├── .gitignore ├── .gitlab-ci.yml ├── .kde-ci.yml ├── .prettierrc ├── CMakeLists.txt ├── LICENSES ├── BSD-3-Clause.txt └── CC0-1.0.txt ├── README.md ├── TODO ├── cmake ├── FindGTKEngine.cmake ├── FindPythonCairo.cmake └── FindSass.cmake └── src ├── CMakeLists.txt ├── _colors.scss ├── _functions.scss ├── assets ├── breeze-check-checked-symbolic.svg ├── breeze-check-indeterminate-symbolic.svg ├── breeze-check-unchecked-symbolic.svg ├── breeze-close-active-symbolic.svg ├── breeze-close-hover-symbolic.svg ├── breeze-close-symbolic.svg ├── breeze-maximize-active-symbolic.svg ├── breeze-maximize-hover-symbolic.svg ├── breeze-maximize-symbolic.svg ├── breeze-maximized-active-symbolic.svg ├── breeze-maximized-hover-symbolic.svg ├── breeze-maximized-symbolic.svg ├── breeze-minimize-active-symbolic.svg ├── breeze-minimize-hover-symbolic.svg ├── breeze-minimize-symbolic.svg ├── breeze-radio-checked-symbolic.svg ├── breeze-radio-indeterminate-symbolic.svg ├── breeze-radio-unchecked-symbolic.svg ├── bullet-symbolic.svg ├── checkmark-symbolic.svg └── dash-symbolic.svg ├── build_theme.sh.cmake ├── gtk-dark-3.0.css ├── gtk-dark-4.0.css ├── gtk2 └── widgets │ ├── buttons │ ├── default │ ├── entry │ ├── menu │ ├── misc │ ├── notebook │ ├── progressbar │ ├── range │ ├── scrollbar │ ├── styles │ └── toolbar ├── gtk3 ├── applications │ ├── _chromium.scss │ └── _firefox.scss ├── gtk.scss └── widgets │ ├── _app_notifications.scss │ ├── _assistant.scss │ ├── _base.scss │ ├── _button.scss │ ├── _calendar.scss │ ├── _checkboxes.scss │ ├── _color_chooser.scss │ ├── _dialogs.scss │ ├── _entry.scss │ ├── _floating-bar.scss │ ├── _headerbar.scss │ ├── _infobar.scss │ ├── _libhandy.scss │ ├── _link.scss │ ├── _lists.scss │ ├── _menus.scss │ ├── _misc.scss │ ├── _notebook.scss │ ├── _overshoot.scss │ ├── _pathbar.scss │ ├── _progressbar.scss │ ├── _scale.scss │ ├── _scrollbar.scss │ ├── _sidebar.scss │ ├── _spinbutton.scss │ ├── _switch.scss │ ├── _toolbar.scss │ ├── _tooltips.scss │ ├── _treeview.scss │ └── _window_decorations.scss ├── gtk4 ├── gtk.scss └── widgets │ ├── _app_notifications.scss │ ├── _assistant.scss │ ├── _base.scss │ ├── _button.scss │ ├── _calendar.scss │ ├── _checkboxes.scss │ ├── _color_chooser.scss │ ├── _dialogs.scss │ ├── _entry.scss │ ├── _floating-bar.scss │ ├── _headerbar.scss │ ├── _infobar.scss │ ├── _libhandy.scss │ ├── _link.scss │ ├── _lists.scss │ ├── _menus.scss │ ├── _misc.scss │ ├── _notebook.scss │ ├── _overshoot.scss │ ├── _pathbar.scss │ ├── _progressbar.scss │ ├── _scale.scss │ ├── _scrollbar.scss │ ├── _sidebar.scss │ ├── _spinbutton.scss │ ├── _switch.scss │ ├── _toolbar.scss │ ├── _tooltips.scss │ ├── _treeview.scss │ ├── _typography.scss │ └── _window_decorations.scss ├── render_assets.py └── settings.ini /.gitignore: -------------------------------------------------------------------------------- 1 | build 2 | install 3 | .clang-format 4 | CMakeLists.txt.user* 5 | /build*/ 6 | /compile_commands.json 7 | .clangd 8 | .idea 9 | /cmake-build* 10 | .cache 11 | -------------------------------------------------------------------------------- /.gitlab-ci.yml: -------------------------------------------------------------------------------- 1 | # SPDX-FileCopyrightText: None 2 | # SPDX-License-Identifier: CC0-1.0 3 | 4 | include: 5 | - project: sysadmin/ci-utilities 6 | file: 7 | - /gitlab-templates/linux-qt6.yml 8 | - /gitlab-templates/freebsd-qt6.yml 9 | - /gitlab-templates/xml-lint.yml 10 | - /gitlab-templates/yaml-lint.yml 11 | -------------------------------------------------------------------------------- /.kde-ci.yml: -------------------------------------------------------------------------------- 1 | Dependencies: 2 | - 'on': ['Linux', 'FreeBSD'] 3 | 'require': 4 | 'frameworks/extra-cmake-modules': '@stable' 5 | 'plasma/breeze': '@same' 6 | Options: 7 | require-passing-tests-on: ['Linux', 'FreeBSD'] 8 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | useTabs: true 2 | printWidth: 60 3 | -------------------------------------------------------------------------------- /CMakeLists.txt: -------------------------------------------------------------------------------- 1 | cmake_minimum_required(VERSION 3.16) 2 | 3 | project(breeze-gtk) 4 | set(PROJECT_VERSION "6.4.80") 5 | 6 | find_package(ECM 6.2.0 REQUIRED NO_MODULE) 7 | include(FeatureSummary) 8 | 9 | set(CMAKE_MODULE_PATH ${ECM_MODULE_PATH} "${CMAKE_SOURCE_DIR}/cmake") 10 | find_package(GTKEngine) 11 | find_package(Sass REQUIRED) 12 | find_package(PythonCairo) 13 | set_package_properties(PythonCairo PROPERTIES TYPE REQUIRED PURPOSE "Required to render assets") 14 | find_package(Breeze 5.27.80 REQUIRED) 15 | set_package_properties(Breeze PROPERTIES TYPE REQUIRED PURPOSE "Required to build the Breeze GTK+ styles") 16 | 17 | 18 | include(KDEInstallDirs) 19 | 20 | add_subdirectory(src) 21 | 22 | feature_summary(WHAT ALL INCLUDE_QUIET_PACKAGES FATAL_ON_MISSING_REQUIRED_PACKAGES) 23 | -------------------------------------------------------------------------------- /LICENSES/BSD-3-Clause.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) . All rights reserved. 2 | 3 | Redistribution and use in source and binary forms, with or without modification, 4 | are permitted provided that the following conditions are met: 5 | 6 | 1. Redistributions of source code must retain the above copyright notice, 7 | this list of conditions and the following disclaimer. 8 | 9 | 2. Redistributions in binary form must reproduce the above copyright notice, 10 | this list of conditions and the following disclaimer in the documentation 11 | and/or other materials provided with the distribution. 12 | 13 | 3. Neither the name of the copyright holder nor the names of its contributors 14 | may be used to endorse or promote products derived from this software without 15 | specific prior written permission. 16 | 17 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" 18 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 19 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE 20 | ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE 21 | LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL 22 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR 23 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER 24 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, 25 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE 26 | USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 27 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Gnome-breeze 2 | 3 | A GTK Theme Built to Match KDE's Breeze. GTK2 theme made by [scionicspectre](https://github.com/scionicspectre/BreezyGTK) 4 | 5 | # Requirements 6 | 7 | - GTK+ 3.16 8 | - Pixmap/Pixbuf theme engine for GTK 2 9 | 10 | # Install instructions 11 | If your distribution doesn't provide a package, you can install the theme system-wide by copying it to the appropriate directory, usually "/usr/share/themes". 12 | ``` 13 | find Breeze* -type f -exec install -Dm644 '{}' "$pkgdir/usr/share/themes/{}" \; 14 | ``` 15 | 16 | To install only for the current user, copy the files to "~/.themes". 17 | 18 | To set the theme in Plasma 5, install kde-gtk-config and use System Settings > Application Style > GNOME Application Style. 19 | Also make sure to disable "apply colors to non-Qt applications" in System Settings > Colors > Options. 20 | -------------------------------------------------------------------------------- /TODO: -------------------------------------------------------------------------------- 1 | * Remove SASS deprecation warnings 2 | * Build the theme into ${CMAKE_BINARY_DIR} 3 | -------------------------------------------------------------------------------- /cmake/FindGTKEngine.cmake: -------------------------------------------------------------------------------- 1 | include(KDEInstallDirs) 2 | 3 | set_package_properties(GTKEngine PROPERTIES 4 | DESCRIPTION "Pixmap/Pixbuf theme engine for GTK 2" 5 | URL "http://www.gtk.org/" 6 | TYPE RUNTIME 7 | PURPOSE "Required for GTK 2 theme") 8 | 9 | set(_versions 2.20 2.18 2.16 2.14 2.12 10 | 2.10 2.8 2.6 2.4 2.2 2.0 11 | 1.20 1.18 1.16 1.14 1.12 12 | 1.10 1.8 1.6 1.4 1.2 1.0) 13 | 14 | foreach(_ver ${_versions}) 15 | find_library(GTKPIXMAP_PLUGIN NAMES pixmap 16 | PATHS 17 | ${KDE_INSTALL_FULL_LIBDIR}/gtk-2.0/${_ver}.0/engines) 18 | endforeach() 19 | 20 | if(NOT ${GTKPIXMAP_PLUGIN} STREQUAL "GTKPIXMAP_PLUGIN-NOTFOUND") 21 | set(GTKEngine_FOUND TRUE) 22 | endif() 23 | -------------------------------------------------------------------------------- /cmake/FindPythonCairo.cmake: -------------------------------------------------------------------------------- 1 | find_package(Python3 COMPONENTS Interpreter REQUIRED) 2 | 3 | # Check for python cairo 4 | execute_process(COMMAND ${Python3_EXECUTABLE} -c "import cairo" 5 | RESULT_VARIABLE PYTHON_CAIRO_RESULT) 6 | if (PYTHON_CAIRO_RESULT EQUAL 0) 7 | set(PYTHONCAIRO_FOUND 1) 8 | endif() 9 | -------------------------------------------------------------------------------- /cmake/FindSass.cmake: -------------------------------------------------------------------------------- 1 | #.rst: 2 | # FindSass 3 | # ----------- 4 | # 5 | # Try to find Sass compiler. 6 | # 7 | # If the Sass compiler executable is not in your PATH, you can provide 8 | # an alternative name or full path location with the ``Sass_EXECUTABLE`` variable. 9 | # In this case, do not forget to set ``Sass_COMPILER_TYPE`` variable also. 10 | # 11 | # This will define the following variables: 12 | # 13 | # ``Sass_FOUND`` 14 | # True if sass is available. 15 | # 16 | # ``Sass_EXECUTABLE`` 17 | # The Sass compiler executable. 18 | # 19 | # ``Sass_COMPILER_TYPE`` 20 | # Sass compiler type: ``sass`` or ``sassc``. 21 | # 22 | # If ``Sass_FOUND`` is TRUE, it will also define the following imported 23 | # target: 24 | # 25 | # ``Sass::Sass`` 26 | # The Sass compiler executable. 27 | # 28 | 29 | #============================================================================= 30 | # SPDX-FileCopyrightText: 2018 Alexander Kernozhitsky 31 | # 32 | # SPDX-License-Identifier: BSD-3-Clause 33 | #============================================================================= 34 | 35 | set_package_properties(Sass PROPERTIES 36 | DESCRIPTION "SASS compiler" 37 | URL "https://sass-lang.com/" 38 | PURPOSE "Required for building GTK themes") 39 | 40 | find_program(Sass_EXECUTABLE NAMES sassc) 41 | 42 | if(Sass_EXECUTABLE) 43 | if(NOT Sass_COMPILER_TYPE) 44 | set(Sass_COMPILER_TYPE sassc) 45 | endif() 46 | else() 47 | find_program(Sass_EXECUTABLE NAMES sass) 48 | set(Sass_COMPILER_TYPE sass) 49 | endif() 50 | 51 | include(FindPackageHandleStandardArgs) 52 | 53 | find_package_handle_standard_args(Sass 54 | FOUND_VAR 55 | Sass_FOUND 56 | REQUIRED_VARS 57 | Sass_EXECUTABLE 58 | ) 59 | mark_as_advanced(Sass_EXECUTABLE) 60 | 61 | if (Sass_FOUND) 62 | if (NOT TARGET Sass::Sass) 63 | add_executable(Sass::Sass IMPORTED) 64 | set_target_properties(Sass::Sass PROPERTIES 65 | IMPORTED_LOCATION "${Sass_EXECUTABLE}" 66 | ) 67 | endif() 68 | endif() 69 | -------------------------------------------------------------------------------- /src/CMakeLists.txt: -------------------------------------------------------------------------------- 1 | file(GLOB_RECURSE SCSS_SOURCES "*.scss") 2 | file(GLOB CSS_SOURCES "*.css") 3 | file(GLOB_RECURSE GTK2_SOURCES "gtk2/*") 4 | 5 | configure_file(build_theme.sh.cmake ${CMAKE_CURRENT_BINARY_DIR}/build_theme.sh @ONLY) 6 | 7 | set(SOURCES 8 | ${SCSS_SOURCES} 9 | ${CSS_SOURCES} 10 | ${GTK2_SOURCES} 11 | render_assets.py 12 | ) 13 | 14 | function(gen_targets THEME_NAME) 15 | set(THEME_DIR "${PROJECT_BINARY_DIR}/${THEME_NAME}") 16 | set(${THEME_NAME}_TARGETS 17 | "${THEME_DIR}/gtk-2.0/gtkrc" 18 | "${THEME_DIR}/gtk-3.0/gtk.css" 19 | PARENT_SCOPE 20 | ) 21 | endfunction() 22 | 23 | gen_targets(Breeze) 24 | gen_targets(Breeze-Dark) 25 | 26 | list(APPEND Breeze_TARGETS 27 | "${PROJECT_BINARY_DIR}/Breeze/gtk-3.0/gtk-dark.css" 28 | "${PROJECT_BINARY_DIR}/Breeze/gtk-4.0/gtk-dark.css" 29 | ) 30 | 31 | add_custom_command( 32 | OUTPUT ${Breeze-Dark_TARGETS} 33 | DEPENDS ${SOURCES} ${CMAKE_CURRENT_BINARY_DIR}/build_theme.sh 34 | COMMAND ${CMAKE_CURRENT_BINARY_DIR}/build_theme.sh -c BreezeDark -t "${PROJECT_BINARY_DIR}/Breeze-Dark" -r "${BREEZE_COLOR_INSTALL_ROOT}" 35 | WORKING_DIRECTORY "${PROJECT_SOURCE_DIR}/src" 36 | ) 37 | add_custom_target(Breeze-Dark ALL DEPENDS ${Breeze-Dark_TARGETS}) 38 | 39 | add_custom_command( 40 | OUTPUT ${Breeze_TARGETS} 41 | DEPENDS ${SOURCES} ${CMAKE_CURRENT_BINARY_DIR}/build_theme.sh 42 | COMMAND ${CMAKE_CURRENT_BINARY_DIR}/build_theme.sh -c BreezeLight -t "${PROJECT_BINARY_DIR}/Breeze" -r "${BREEZE_COLOR_INSTALL_ROOT}" 43 | COMMAND cp gtk-dark-3.0.css "${PROJECT_BINARY_DIR}/Breeze/gtk-3.0/gtk-dark.css" 44 | COMMAND cp gtk-dark-4.0.css "${PROJECT_BINARY_DIR}/Breeze/gtk-4.0/gtk-dark.css" 45 | WORKING_DIRECTORY "${PROJECT_SOURCE_DIR}/src" 46 | ) 47 | add_custom_target(Breeze ALL DEPENDS ${Breeze_TARGETS}) 48 | 49 | install(DIRECTORY "${PROJECT_BINARY_DIR}/Breeze" DESTINATION "${KDE_INSTALL_FULL_DATAROOTDIR}/themes/") 50 | install(DIRECTORY "${PROJECT_BINARY_DIR}/Breeze-Dark" DESTINATION "${KDE_INSTALL_FULL_DATAROOTDIR}/themes/") 51 | install(FILES settings.ini DESTINATION "${KDE_INSTALL_FULL_DATAROOTDIR}/themes/Breeze") 52 | install(FILES settings.ini DESTINATION "${KDE_INSTALL_FULL_DATAROOTDIR}/themes/Breeze-Dark") 53 | -------------------------------------------------------------------------------- /src/assets/breeze-check-checked-symbolic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/assets/breeze-check-indeterminate-symbolic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/assets/breeze-check-unchecked-symbolic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/assets/breeze-close-active-symbolic.svg: -------------------------------------------------------------------------------- 1 | 2 | 10 | 16 | 17 | -------------------------------------------------------------------------------- /src/assets/breeze-close-hover-symbolic.svg: -------------------------------------------------------------------------------- 1 | 2 | 10 | 16 | 23 | 24 | -------------------------------------------------------------------------------- /src/assets/breeze-close-symbolic.svg: -------------------------------------------------------------------------------- 1 | 2 | 10 | 16 | 17 | -------------------------------------------------------------------------------- /src/assets/breeze-maximize-active-symbolic.svg: -------------------------------------------------------------------------------- 1 | 2 | 10 | 16 | 17 | -------------------------------------------------------------------------------- /src/assets/breeze-maximize-hover-symbolic.svg: -------------------------------------------------------------------------------- 1 | 2 | 10 | 15 | 16 | -------------------------------------------------------------------------------- /src/assets/breeze-maximize-symbolic.svg: -------------------------------------------------------------------------------- 1 | 2 | 10 | 21 | 22 | -------------------------------------------------------------------------------- /src/assets/breeze-maximized-active-symbolic.svg: -------------------------------------------------------------------------------- 1 | 2 | 10 | 16 | 17 | -------------------------------------------------------------------------------- /src/assets/breeze-maximized-hover-symbolic.svg: -------------------------------------------------------------------------------- 1 | 2 | 10 | 15 | 16 | -------------------------------------------------------------------------------- /src/assets/breeze-maximized-symbolic.svg: -------------------------------------------------------------------------------- 1 | 2 | 10 | 21 | 22 | -------------------------------------------------------------------------------- /src/assets/breeze-minimize-active-symbolic.svg: -------------------------------------------------------------------------------- 1 | 2 | 10 | 16 | 17 | -------------------------------------------------------------------------------- /src/assets/breeze-minimize-hover-symbolic.svg: -------------------------------------------------------------------------------- 1 | 2 | 10 | 15 | 16 | -------------------------------------------------------------------------------- /src/assets/breeze-minimize-symbolic.svg: -------------------------------------------------------------------------------- 1 | 2 | 10 | 21 | 22 | -------------------------------------------------------------------------------- /src/assets/breeze-radio-checked-symbolic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/assets/breeze-radio-indeterminate-symbolic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/assets/breeze-radio-unchecked-symbolic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/assets/bullet-symbolic.svg: -------------------------------------------------------------------------------- 1 | 2 | 15 | 17 | 35 | 39 | 47 | 48 | -------------------------------------------------------------------------------- /src/assets/checkmark-symbolic.svg: -------------------------------------------------------------------------------- 1 | 2 | 15 | 17 | 40 | 42 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /src/assets/dash-symbolic.svg: -------------------------------------------------------------------------------- 1 | 2 | 15 | 17 | 35 | 40 | 41 | -------------------------------------------------------------------------------- /src/build_theme.sh.cmake: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | set -e 3 | 4 | # Usage: create_folders 5 | create_folders () { 6 | for j in gtk-2.0 gtk-3.0 gtk-4.0; do 7 | if ! [ -d "$1/$j" ]; then 8 | mkdir -p "$1/$j" 9 | fi 10 | done 11 | } 12 | 13 | # Usage: build_sass 14 | build_sass() { 15 | if command -v sassc >/dev/null 2>&1; then 16 | sassc -I "$3" "$1" "$2" 17 | else 18 | sass -I "$3" --cache-location /tmp/sass-cache "$1" "$2" 19 | fi 20 | } 21 | 22 | # Usage: install_theme 23 | # If is unset or empty, install to $HOME/.local/share/themes/$THEME_NAME 24 | install_theme () { 25 | THEME_INSTALL_TARGET="$3" 26 | if [ -z "${THEME_INSTALL_TARGET}" ]; then 27 | THEME_INSTALL_TARGET="${HOME}/.local/share/themes/$2" 28 | fi 29 | echo "Installing into ${THEME_INSTALL_TARGET}" 30 | mkdir -p "${THEME_INSTALL_TARGET}" 31 | for dir in assets gtk-2.0 gtk-3.0 gtk-4.0; do 32 | if [ -d "${THEME_INSTALL_TARGET}/$dir" ]; then 33 | rm -rf "${THEME_INSTALL_TARGET:?}/$dir" 34 | fi 35 | mv -f "$1/$dir" "${THEME_INSTALL_TARGET}" 36 | done 37 | rmdir "$1" 38 | } 39 | 40 | # Usage render_theme 41 | render_theme () { 42 | THEME_BUILD_DIR="$(mktemp -d)" 43 | create_folders "${THEME_BUILD_DIR}" 44 | cp -R gtk2/* "${THEME_BUILD_DIR}/gtk-2.0/" 45 | @Python3_EXECUTABLE@ render_assets.py -c "$1" -a "${THEME_BUILD_DIR}/assets" \ 46 | -g "${THEME_BUILD_DIR}/gtk-2.0" -G "${THEME_BUILD_DIR}" -b "$4" 47 | build_sass gtk3/gtk.scss "${THEME_BUILD_DIR}/gtk-3.0/gtk.css" "${THEME_BUILD_DIR}" 48 | build_sass gtk4/gtk.scss "${THEME_BUILD_DIR}/gtk-4.0/gtk.css" "${THEME_BUILD_DIR}" 49 | rm -f "${THEME_BUILD_DIR}/_global.scss" 50 | install_theme "${THEME_BUILD_DIR}" "$2" "$3" 51 | } 52 | 53 | COLOR_SCHEME="" 54 | INSTALL_TARGET="" 55 | THEME_NAME="" 56 | COLOR_SCHEME_ROOT="/usr/share/color-schemes" 57 | 58 | while [ "$#" -gt 0 ]; do 59 | case "$1" in 60 | -h|--help) 61 | echo "$0: build Breeze theme" 62 | echo "Usage: $0 [-c COLOR_SCHEME] [-r COLOR_SCHEME_ROOT] [-t TARGET_DIRECTORY]" 63 | echo 64 | echo "Arguments:" 65 | echo " -h, --help show this help" 66 | echo " -c COLOR_SCHEME use color scheme with name COLOR_SCHEME. If unset or" 67 | echo " empty, the value from ~/.config/kdeglobals is used" 68 | echo " -r COLOR_SCHEME_ROOT The base path of all color schemes or" 69 | echo " /usr/share/color-schemes if unset" 70 | echo " -t TARGET_DIRECTORY the directory to install the color scheme. If unset or" 71 | echo " empty, it is installed into" 72 | echo " ~/.local/share/themes/THEME_NAME" 73 | exit 0 74 | ;; 75 | -c) 76 | shift 77 | COLOR_SCHEME="$1" 78 | ;; 79 | -t) 80 | shift 81 | INSTALL_TARGET="$1" 82 | ;; 83 | -r) 84 | shift 85 | COLOR_SCHEME_ROOT="$1" 86 | ;; 87 | esac 88 | shift 89 | done 90 | 91 | if [ -z "${COLOR_SCHEME}" ]; then 92 | THEME_NAME="Breeze" 93 | if [ -f "${HOME}/.config/kdeglobals" ]; then 94 | COLOR_SCHEME="${HOME}/.config/kdeglobals" 95 | else 96 | echo "${HOME}/.config/kdeglobals not found, using defaults" 97 | COLOR_SCHEME="${COLOR_SCHEME_ROOT}/BreezeLight.colors" 98 | fi 99 | else 100 | THEME_NAME="${COLOR_SCHEME}" 101 | if [ -f "${COLOR_SCHEME_ROOT}/${COLOR_SCHEME}.colors" ]; then 102 | COLOR_SCHEME="${COLOR_SCHEME_ROOT}/${COLOR_SCHEME}.colors" 103 | elif [ -f "${HOME}/.local/share/color-schemes/${COLOR_SCHEME}.colors" ]; then 104 | COLOR_SCHEME="${HOME}/.local/share/color-schemes/${COLOR_SCHEME}.colors" 105 | else 106 | echo "colorscheme ${COLOR_SCHEME} not found" 107 | exit 1 108 | fi 109 | fi 110 | 111 | render_theme "${COLOR_SCHEME}" "${THEME_NAME}" "${INSTALL_TARGET}" "${COLOR_SCHEME_ROOT}/BreezeLight.colors" 112 | [ -z "${INSTALL_TARGET}" ] && INSTALL_TARGET="${HOME}/.local/share/themes/${THEME_NAME}" 113 | cp -r assets/ "${INSTALL_TARGET}" 114 | -------------------------------------------------------------------------------- /src/gtk-dark-3.0.css: -------------------------------------------------------------------------------- 1 | @import url("../../Breeze-Dark/gtk-3.0/gtk.css"); 2 | -------------------------------------------------------------------------------- /src/gtk-dark-4.0.css: -------------------------------------------------------------------------------- 1 | @import url("../../Breeze-Dark/gtk-4.0/gtk.css"); 2 | -------------------------------------------------------------------------------- /src/gtk2/widgets/entry: -------------------------------------------------------------------------------- 1 | style "entry" 2 | { 3 | xthickness = 4 4 | ythickness = 4 5 | 6 | base[NORMAL] = @base_color 7 | base[ACTIVE] = @base_color 8 | base[INSENSITIVE] = @insensitive_base_color 9 | 10 | engine "pixmap" 11 | { 12 | image 13 | { 14 | function = SHADOW 15 | detail = "entry" 16 | state = NORMAL 17 | shadow = IN 18 | file = "../assets/entry.png" 19 | border = { 4, 4, 4, 4 } 20 | stretch = TRUE 21 | } 22 | image 23 | { 24 | function = SHADOW 25 | detail = "entry" 26 | state = INSENSITIVE 27 | shadow = IN 28 | file = "../assets/entry-insensitive.png" 29 | border = { 4, 4, 4, 4 } 30 | stretch = TRUE 31 | } 32 | image 33 | { 34 | function = SHADOW 35 | detail = "entry" 36 | state = ACTIVE 37 | file = "../assets/entry-active.png" 38 | border = { 4, 4, 4, 4 } 39 | stretch = TRUE 40 | } 41 | image 42 | { 43 | function = FLAT_BOX 44 | detail = "entry_bg" 45 | state = ACTIVE 46 | file = "../assets/null.png" 47 | border = { 0, 0, 0, 0 } 48 | stretch = TRUE 49 | } 50 | } 51 | } 52 | 53 | style "combobox_entry" 54 | { 55 | xthickness = 3 56 | ythickness = 4 57 | 58 | engine "pixmap" { 59 | 60 | # LTR version 61 | 62 | image { 63 | function = SHADOW 64 | detail = "entry" 65 | state = NORMAL 66 | shadow = IN 67 | file = "../assets/combo-entry.png" 68 | border = { 4, 4, 5, 4 } 69 | stretch = TRUE 70 | direction = LTR 71 | } 72 | 73 | image { 74 | function = SHADOW 75 | detail = "entry" 76 | state = INSENSITIVE 77 | shadow = IN 78 | file = "../assets/combo-entry-insensitive.png" 79 | border = { 4, 4, 5, 4 } 80 | stretch = TRUE 81 | direction = LTR 82 | } 83 | 84 | image { 85 | function = SHADOW 86 | detail = "entry" 87 | state = ACTIVE 88 | file = "../assets/combo-entry-active.png" 89 | border = { 4, 4, 5, 4 } 90 | stretch = TRUE 91 | direction = LTR 92 | } 93 | 94 | # RTL version 95 | 96 | image { 97 | function = SHADOW 98 | detail = "entry" 99 | state = NORMAL 100 | shadow = IN 101 | file = "../assets/combo-entry-button.png" 102 | border = { 4, 4, 5, 4 } 103 | stretch = TRUE 104 | direction = RTL 105 | } 106 | 107 | image { 108 | function = SHADOW 109 | detail = "entry" 110 | state = INSENSITIVE 111 | shadow = IN 112 | file = "../assets/combo-entry-button-insensitive.png" 113 | border = { 4, 4, 5, 4 } 114 | stretch = TRUE 115 | direction = RTL 116 | } 117 | 118 | image { 119 | function = SHADOW 120 | detail = "entry" 121 | state = ACTIVE 122 | file = "../assets/combo-entry-button-active.png" 123 | border = { 4, 4, 5, 4 } 124 | stretch = TRUE 125 | direction = RTL 126 | } 127 | } 128 | } 129 | 130 | style "combobox_entry_button" 131 | { 132 | xthickness = 6 133 | 134 | fg[ACTIVE] = @text_color 135 | 136 | engine "pixmap" { 137 | 138 | # LTR version 139 | 140 | image { 141 | function = BOX 142 | state = NORMAL 143 | file = "../assets/combo-entry-button.png" 144 | border = { 4, 4, 5, 4 } 145 | stretch = TRUE 146 | direction = LTR 147 | } 148 | 149 | image { 150 | function = BOX 151 | state = PRELIGHT 152 | file = "../assets/combo-entry-button.png" 153 | border = { 4, 4, 5, 4 } 154 | stretch = TRUE 155 | direction = LTR 156 | } 157 | 158 | image { 159 | function = BOX 160 | state = INSENSITIVE 161 | file = "../assets/combo-entry-button-insensitive.png" 162 | border = { 4, 4, 5, 4 } 163 | stretch = TRUE 164 | direction = LTR 165 | } 166 | 167 | image { 168 | function = BOX 169 | state = ACTIVE 170 | file = "../assets/combo-entry-button-active.png" 171 | border = { 4, 4, 5, 4 } 172 | stretch = TRUE 173 | direction = LTR 174 | } 175 | 176 | # RTL version 177 | image { 178 | function = BOX 179 | state = NORMAL 180 | file = "../assets/combo-entry.png" 181 | border = { 4, 4, 5, 4 } 182 | stretch = TRUE 183 | direction = RTL 184 | } 185 | 186 | image { 187 | function = BOX 188 | state = PRELIGHT 189 | file = "../assets/combo-entry.png" 190 | border = { 4, 4, 5, 4 } 191 | stretch = TRUE 192 | direction = RTL 193 | } 194 | 195 | image { 196 | function = BOX 197 | state = INSENSITIVE 198 | file = "../assets/combo-entry-insensitive.png" 199 | border = { 4, 4, 5, 4 } 200 | stretch = TRUE 201 | direction = RTL 202 | } 203 | 204 | image { 205 | function = BOX 206 | state = ACTIVE 207 | file = "../assets/combo-entry-active.png" 208 | border = { 4, 4, 5, 4 } 209 | stretch = TRUE 210 | direction = RTL 211 | } 212 | } 213 | } 214 | 215 | -------------------------------------------------------------------------------- /src/gtk2/widgets/misc: -------------------------------------------------------------------------------- 1 | style "treeview" 2 | { 3 | engine "pixmap" 4 | { 5 | image 6 | { 7 | function = BOX 8 | file = "../assets/tree-header.png" 9 | border = { 1, 1, 1, 1 } 10 | stretch = TRUE 11 | } 12 | } 13 | } 14 | 15 | style "scrolled_window" 16 | { 17 | engine "pixmap" 18 | { 19 | image 20 | { 21 | function = SHADOW 22 | file = "../assets/frame.png" 23 | border = { 5, 5, 5, 5 } 24 | stretch = TRUE 25 | } 26 | } 27 | } 28 | 29 | style "frame" 30 | { 31 | xthickness = 1 32 | ythickness = 1 33 | 34 | engine "pixmap" 35 | { 36 | image 37 | { 38 | function = SHADOW 39 | file = "../assets/frame.png" 40 | border = { 1, 1, 1, 1 } 41 | stretch = TRUE 42 | shadow = IN 43 | } 44 | image 45 | { 46 | function = SHADOW_GAP 47 | file = "../assets/frame.png" 48 | border = { 1, 1, 1, 1 } 49 | stretch = TRUE 50 | gap_start_file = "../assets/frame-gap-start.png" 51 | gap_start_border = { 1, 0, 0, 0 } 52 | gap_end_file = "../assets/frame-gap-end.png" 53 | gap_end_border = { 0, 1, 0, 0 } 54 | shadow = IN 55 | } 56 | image 57 | { 58 | function = SHADOW 59 | file = "../assets/frame.png" 60 | border = { 1, 1, 1, 1 } 61 | stretch = TRUE 62 | shadow = OUT 63 | } 64 | image 65 | { 66 | function = SHADOW_GAP 67 | file = "../assets/frame.png" 68 | border = { 1, 1, 1, 1 } 69 | stretch = TRUE 70 | gap_start_file = "../assets/frame-gap-start.png" 71 | gap_start_border = { 1, 0, 0, 0 } 72 | gap_end_file = "../assets/frame-gap-end.png" 73 | gap_end_border = { 0, 1, 0, 0 } 74 | shadow = OUT 75 | } 76 | image 77 | { 78 | function = SHADOW 79 | file = "../assets/frame.png" 80 | border = { 1, 1, 1, 1 } 81 | stretch = TRUE 82 | shadow = ETCHED_IN 83 | } 84 | image 85 | { 86 | function = SHADOW_GAP 87 | file = "../assets/frame.png" 88 | border = { 1, 1, 1, 1 } 89 | stretch = TRUE 90 | gap_start_file = "../assets/frame-gap-start.png" 91 | gap_start_border = { 1, 0, 0, 0 } 92 | gap_end_file = "../assets/frame-gap-end.png" 93 | gap_end_border = { 0, 1, 0, 0 } 94 | shadow = ETCHED_IN 95 | } 96 | image 97 | { 98 | function = SHADOW 99 | file = "../assets/frame.png" 100 | border = { 1, 1, 1, 1 } 101 | stretch = TRUE 102 | shadow = ETCHED_OUT 103 | } 104 | image 105 | { 106 | function = SHADOW_GAP 107 | file = "../assets/frame.png" 108 | border = { 1, 1, 1, 1 } 109 | stretch = TRUE 110 | gap_start_file = "../assets/frame-gap-start.png" 111 | gap_start_border = { 1, 0, 0, 0 } 112 | gap_end_file = "../assets/frame-gap-end.png" 113 | gap_end_border = { 0, 1, 0, 0 } 114 | shadow = ETCHED_OUT 115 | } 116 | } 117 | } 118 | 119 | style "tooltips" 120 | { 121 | xthickness = 8 122 | ythickness = 4 123 | 124 | bg[NORMAL] = @tooltip_bg_color 125 | fg[NORMAL] = @tooltip_fg_color 126 | bg[SELECTED] = @tooltip_bg_color 127 | } 128 | 129 | # Chromium 130 | 131 | style "chrome-gtk-frame" 132 | { 133 | ChromeGtkFrame::frame-color = @bg_color 134 | ChromeGtkFrame::inactive-frame-color = @bg_color 135 | 136 | ChromeGtkFrame::frame-gradient-size = 100 137 | ChromeGtkFrame::frame-gradient-color = @bg_color 138 | 139 | ChromeGtkFrame::incognito-frame-color = @bg_color 140 | ChromeGtkFrame::incognito-inactive-frame-color = @bg_color 141 | 142 | ChromeGtkFrame::incognito-frame-gradient-size = 100 143 | ChromeGtkFrame::incognito-frame-gradient-color = @bg_color 144 | 145 | ChromeGtkFrame::scrollbar-trough-color = shade (0.912, @bg_color) 146 | ChromeGtkFrame::scrollbar-slider-prelight-color = shade (1.04, @bg_color) 147 | ChromeGtkFrame::scrollbar-slider-normal-color = @bg_color 148 | } 149 | 150 | style "null" 151 | { 152 | engine "pixmap" 153 | { 154 | image 155 | { 156 | function = BOX 157 | file = "../assets/null.png" 158 | stretch = TRUE 159 | } 160 | } 161 | } 162 | 163 | style "toplevel_hack" { 164 | 165 | engine "adwaita" { 166 | } 167 | } 168 | 169 | -------------------------------------------------------------------------------- /src/gtk2/widgets/notebook: -------------------------------------------------------------------------------- 1 | style "notebook_tab_label" 2 | { 3 | fg[ACTIVE] = @fg_color 4 | } 5 | 6 | 7 | style "notebook" 8 | { 9 | 10 | xthickness = 5 11 | ythickness = 2 12 | 13 | engine "pixmap" 14 | { 15 | image 16 | { 17 | function = EXTENSION 18 | state = ACTIVE 19 | file = "../assets/tab-bottom-inactive.png" 20 | border = { 3,3,3,3 } 21 | stretch = TRUE 22 | gap_side = TOP 23 | } 24 | image 25 | { 26 | function = EXTENSION 27 | state = ACTIVE 28 | file = "../assets/tab-top-inactive.png" 29 | border = { 3,3,3,3 } 30 | stretch = TRUE 31 | gap_side = BOTTOM 32 | } 33 | image 34 | { 35 | function = EXTENSION 36 | state = ACTIVE 37 | file = "../assets/tab-left-inactive.png" 38 | border = { 3,3,3,3 } 39 | stretch = TRUE 40 | gap_side = RIGHT 41 | } 42 | image 43 | { 44 | function = EXTENSION 45 | state = ACTIVE 46 | file = "../assets/tab-right-inactive.png" 47 | border = { 3,3,3,3 } 48 | stretch = TRUE 49 | gap_side = LEFT 50 | } 51 | image 52 | { 53 | function = EXTENSION 54 | file = "../assets/tab-top-active.png" 55 | border = { 3,3,3,3 } 56 | stretch = TRUE 57 | gap_side = BOTTOM 58 | } 59 | image 60 | { 61 | function = EXTENSION 62 | file = "../assets/tab-bottom-active.png" 63 | border = { 3,3,3,3 } 64 | stretch = TRUE 65 | gap_side = TOP 66 | } 67 | image 68 | { 69 | function = EXTENSION 70 | file = "../assets/tab-left-active.png" 71 | border = { 3,3,3,3 } 72 | stretch = TRUE 73 | gap_side = RIGHT 74 | } 75 | image 76 | { 77 | function = EXTENSION 78 | file = "../assets/tab-right-active.png" 79 | border = { 3,3,3,3 } 80 | stretch = TRUE 81 | gap_side = LEFT 82 | } 83 | 84 | # How to draw boxes with a gap on one side (ie the page of a notebook) 85 | 86 | image 87 | { 88 | function = BOX_GAP 89 | file = "../assets/notebook-frame-top.png" 90 | border = { 4, 4, 4, 4 } 91 | stretch = TRUE 92 | gap_file = "../assets/notebook-gap-horizontal.png" 93 | gap_border = { 1, 1, 0, 0 } 94 | gap_side = TOP 95 | } 96 | image 97 | { 98 | function = BOX_GAP 99 | file = "../assets/notebook-frame-bottom.png" 100 | border = { 4, 4, 4, 4 } 101 | stretch = TRUE 102 | gap_file = "../assets/notebook-gap-horizontal.png" 103 | gap_border = { 1, 1, 0, 0 } 104 | gap_side = BOTTOM 105 | } 106 | image 107 | { 108 | function = BOX_GAP 109 | file = "../assets/notebook-frame-top.png" 110 | border = { 4, 4, 4, 4 } 111 | stretch = TRUE 112 | gap_file = "../assets/notebook-gap-vertical.png" 113 | gap_border = { 0, 0, 1, 1 } 114 | gap_side = LEFT 115 | } 116 | image 117 | { 118 | function = BOX_GAP 119 | file = "../assets/notebook-frame-right.png" 120 | border = { 4, 4, 4, 4 } 121 | stretch = TRUE 122 | gap_file = "../assets/notebook-gap-vertical.png" 123 | gap_border = { 0, 0, 1, 1 } 124 | gap_side = RIGHT 125 | } 126 | 127 | # How to draw the box of a notebook when it isnt attached to a tab 128 | 129 | image 130 | { 131 | function = BOX 132 | file = "../assets/frame.png" 133 | border = { 4, 4, 4, 4 } 134 | stretch = TRUE 135 | } 136 | } 137 | } 138 | 139 | -------------------------------------------------------------------------------- /src/gtk2/widgets/progressbar: -------------------------------------------------------------------------------- 1 | style "progressbar" { 2 | xthickness = 0 3 | ythickness = 0 4 | 5 | fg[PRELIGHT] = @selected_fg_color 6 | 7 | engine "pixmap" 8 | { 9 | image 10 | { 11 | function = BOX 12 | detail = "trough" 13 | file = "../assets/progressbar-trough.png" 14 | border = { 4, 4, 4, 4 } 15 | stretch = TRUE 16 | orientation = HORIZONTAL 17 | } 18 | image 19 | { 20 | function = BOX 21 | detail = "bar" 22 | file = "../assets/progressbar-bar.png" 23 | stretch = TRUE 24 | border = { 4, 4, 4, 4 } 25 | orientation = HORIZONTAL 26 | } 27 | image 28 | { 29 | function = BOX 30 | detail = "trough" 31 | file = "../assets/progressbar-trough.png" 32 | border = { 4, 4, 4, 4 } 33 | stretch = TRUE 34 | orientation = VERTICAL 35 | } 36 | image 37 | { 38 | function = BOX 39 | detail = "bar" 40 | file = "../assets/progressbar-bar.png" 41 | stretch = TRUE 42 | border = { 4, 4, 4, 4 } 43 | orientation = VERTICAL 44 | } 45 | } 46 | } 47 | 48 | -------------------------------------------------------------------------------- /src/gtk2/widgets/range: -------------------------------------------------------------------------------- 1 | style "range" 2 | { 3 | engine "pixmap" 4 | { 5 | image 6 | { 7 | function = BOX 8 | detail = "trough" 9 | file = "../assets/scale-trough-horizontal.png" 10 | border = { 4, 4, 0, 0 } 11 | stretch = TRUE 12 | orientation = HORIZONTAL 13 | } 14 | image 15 | { 16 | function = BOX 17 | detail = "trough" 18 | file = "../assets/scale-trough-vertical.png" 19 | border = { 0, 0, 4, 4 } 20 | stretch = TRUE 21 | orientation = VERTICAL 22 | } 23 | 24 | # Horizontal 25 | 26 | image 27 | { 28 | function = SLIDER 29 | state = NORMAL 30 | file = "../assets/null.png" 31 | border = { 0, 0, 0, 0 } 32 | stretch = TRUE 33 | overlay_file = "../assets/scale-slider.png" 34 | overlay_stretch = FALSE 35 | orientation = HORIZONTAL 36 | } 37 | image 38 | { 39 | function = SLIDER 40 | state = PRELIGHT 41 | file = "../assets/null.png" 42 | border = { 0, 0, 0, 0 } 43 | stretch = TRUE 44 | overlay_file = "../assets/scale-slider-active.png" 45 | overlay_stretch = FALSE 46 | orientation = HORIZONTAL 47 | } 48 | image 49 | { 50 | function = SLIDER 51 | state = INSENSITIVE 52 | file = "../assets/null.png" 53 | border = { 0, 0, 0, 0 } 54 | stretch = TRUE 55 | overlay_file = "../assets/scale-slider.png" 56 | overlay_stretch = FALSE 57 | orientation = HORIZONTAL 58 | } 59 | 60 | # Vertical 61 | 62 | image 63 | { 64 | function = SLIDER 65 | state = NORMAL 66 | file = "../assets/null.png" 67 | border = { 0, 0, 0, 0 } 68 | stretch = TRUE 69 | overlay_file = "../assets/scale-slider.png" 70 | overlay_stretch = FALSE 71 | orientation = VERTICAL 72 | } 73 | image 74 | { 75 | function = SLIDER 76 | state = PRELIGHT 77 | file = "../assets/null.png" 78 | border = { 0, 0, 0, 0 } 79 | stretch = TRUE 80 | overlay_file = "../assets/scale-slider-active.png" 81 | overlay_stretch = FALSE 82 | orientation = VERTICAL 83 | } 84 | 85 | image 86 | { 87 | function = SLIDER 88 | state = INSENSITIVE 89 | file = "../assets/null.png" 90 | border = { 0, 0, 0, 0 } 91 | stretch = TRUE 92 | overlay_file = "../assets/scale-slider.png" 93 | overlay_stretch = FALSE 94 | orientation = VERTICAL 95 | } 96 | # Function below removes ugly boxes 97 | 98 | image 99 | { 100 | function = BOX 101 | file = "../assets/null.png" 102 | border = { 3, 3, 3, 3 } 103 | stretch = TRUE 104 | } 105 | 106 | } 107 | } 108 | 109 | -------------------------------------------------------------------------------- /src/gtk2/widgets/scrollbar: -------------------------------------------------------------------------------- 1 | style "scrollbar" 2 | { 3 | engine "pixmap" 4 | { 5 | image 6 | { 7 | function = BOX 8 | detail = "trough" 9 | file = "../assets/scrollbar-trough-horizontal.png" 10 | border = { 25,25, 7, 7 } #large borders while LibreOffice won't use GtkScrollbar::stepper-spacing=1 11 | stretch = TRUE 12 | orientation = HORIZONTAL 13 | } 14 | image 15 | { 16 | function = BOX 17 | detail = "trough" 18 | file = "../assets/scrollbar-trough-vertical.png" 19 | border = { 7, 7, 25, 25 } 20 | stretch = TRUE 21 | orientation = VERTICAL 22 | } 23 | 24 | # Sliders 25 | 26 | image 27 | { 28 | function = SLIDER 29 | state = NORMAL 30 | file = "../assets/scrollbar-slider-horizontal.png" 31 | border = { 5, 5, 5, 5 } 32 | stretch = TRUE 33 | orientation = HORIZONTAL 34 | 35 | } 36 | image 37 | { 38 | function = SLIDER 39 | state = ACTIVE 40 | file = "../assets/scrollbar-slider-horizontal-hover.png" 41 | border = { 5, 5, 5, 5 } 42 | stretch = TRUE 43 | orientation = HORIZONTAL 44 | 45 | } 46 | image 47 | { 48 | function = SLIDER 49 | state = PRELIGHT 50 | file = "../assets/scrollbar-slider-horizontal-hover.png" 51 | border = { 5, 5, 5, 5 } 52 | stretch = TRUE 53 | orientation = HORIZONTAL 54 | 55 | } 56 | image 57 | { 58 | function = SLIDER 59 | state = INSENSITIVE 60 | file = "../assets/scrollbar-slider-horizontal.png" 61 | border = { 5, 5, 5, 5 } 62 | stretch = TRUE 63 | orientation = HORIZONTAL 64 | 65 | } 66 | 67 | # X Verticals 68 | 69 | image 70 | { 71 | function = SLIDER 72 | state = NORMAL 73 | file = "../assets/scrollbar-slider-vertical.png" 74 | border = { 5, 5, 5, 5 } 75 | stretch = TRUE 76 | orientation = VERTICAL 77 | 78 | } 79 | image 80 | { 81 | function = SLIDER 82 | state = ACTIVE 83 | file = "../assets/scrollbar-slider-vertical-hover.png" 84 | border = { 5, 5, 5, 5 } 85 | stretch = TRUE 86 | orientation = VERTICAL 87 | 88 | } 89 | image 90 | { 91 | function = SLIDER 92 | state = PRELIGHT 93 | file = "../assets/scrollbar-slider-vertical-hover.png" 94 | border = { 5, 5, 5, 5 } 95 | stretch = TRUE 96 | orientation = VERTICAL 97 | 98 | } 99 | image 100 | { 101 | function = SLIDER 102 | state = INSENSITIVE 103 | file = "../assets/scrollbar-slider-vertical.png" 104 | border = { 5, 5, 5, 5 } 105 | stretch = TRUE 106 | orientation = VERTICAL 107 | 108 | } 109 | image 110 | { 111 | function = STEPPER 112 | file = "../assets/null.png" 113 | stretch = TRUE 114 | 115 | } 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /src/gtk2/widgets/styles: -------------------------------------------------------------------------------- 1 | class "GtkWidget" style "default" 2 | class "GtkScrollbar" style "scrollbar" 3 | class "GtkButton" style "button" 4 | class "GtkEntry" style "entry" 5 | class "GtkOldEditable" style "entry" 6 | class "GtkSpinButton" style "spinbutton" 7 | class "GtkNotebook" style "notebook" 8 | class "GtkRange" style "range" 9 | class "GtkProgressBar" style "progressbar" 10 | class "GtkSeparatorMenuItem" style "separator_menu_item" 11 | class "GtkScrolledWindow" style "scrolled_window" 12 | class "GtkFrame" style "frame" 13 | class "GtkToolButton" style "toolbuttons" 14 | class "ChromeGtkFrame" style "chrome-gtk-frame" 15 | class "GtkToggleButton" style "togglebutton" 16 | 17 | widget_class "**" style "menubar" 18 | widget_class "**" style "menu" 19 | widget_class "**" style "menu_framed_box" 20 | widget_class "**" style "menu_item" 21 | widget_class "*.*" style "menubar_item" 22 | widget_class "*Nautilus*ToolBar*" style "toolbar" 23 | widget_class "*HandleBox" style "toolbar" 24 | widget_class "*BonoboDockItem" style "toolbar" 25 | widget_class "*HandleBox" style "toolbar" 26 | widget_class "*" style "toolbar" 27 | widget_class "*.*" style "treeview" 28 | widget_class "*Tool*GtkButton" style "toolbuttons" 29 | widget_class "*Tool*GtkToggleButton" style "tooltoggle_buttons" 30 | widget_class "**" style "tooltoggle_buttons" 31 | widget_class "**" style "button_label" 32 | widget_class "*.." style "button_label" 33 | widget_class "**" style "button" 34 | widget_class "**" style "combobox_separator" 35 | widget_class "*.*" style "combobox_separator" 36 | widget_class "**" style "combobox_entry" 37 | widget_class "**" style "combobox_entry_button" 38 | widget_class "**" style "combobox_entry" 39 | widget_class "*." style "combobox_entry_button" 40 | widget_class "**GtkToggleButton*" style "toolbuttons" 41 | widget_class "**GtkComboBox*" style "button" 42 | widget_class "*." style "notebook_tab_label" 43 | widget "gtk-tooltip*" style "tooltips" 44 | 45 | # Xchat special cases 46 | widget "*xchat-inputbox" style "entry" 47 | 48 | # Chrome/Chromium 49 | widget_class "*Chrom*Button*" style "button" 50 | widget "*swt*toolbar*" style "toolbuttons" 51 | 52 | class "GtkWindow" style "toplevel_hack" 53 | -------------------------------------------------------------------------------- /src/gtk2/widgets/toolbar: -------------------------------------------------------------------------------- 1 | style "toolbar" 2 | { 3 | engine "pixmap" 4 | { 5 | image 6 | { 7 | function = BOX 8 | file = "../assets/toolbar-background.png" 9 | stretch = TRUE 10 | } 11 | } 12 | } 13 | 14 | style "toolbuttons" 15 | { 16 | xthickness = 2 17 | ythickness = 2 18 | GtkWidget::focus_padding = 2 19 | 20 | engine "pixmap" { 21 | 22 | image 23 | { 24 | function = BOX 25 | state = NORMAL 26 | file = "../assets/null.png" 27 | border = { 4, 4, 4, 4 } 28 | stretch = TRUE 29 | } 30 | image 31 | { 32 | function = BOX 33 | state = PRELIGHT 34 | file = "../assets/toolbutton-hover.png" 35 | border = { 4, 4, 4, 4 } 36 | stretch = TRUE 37 | } 38 | image 39 | { 40 | function = BOX 41 | state = ACTIVE 42 | file = "../assets/toolbutton-active.png" 43 | border = { 4, 4, 4, 4 } 44 | stretch = TRUE 45 | } 46 | image 47 | { 48 | function = BOX 49 | state = INSENSITIVE 50 | file = "../assets/null.png" 51 | border = { 4, 4, 4, 4 } 52 | stretch = TRUE 53 | } 54 | } 55 | } 56 | 57 | style "tooltoggle_buttons" 58 | { 59 | engine "pixmap" 60 | { 61 | image 62 | { 63 | function = BOX 64 | state = NORMAL 65 | file = "../assets/null.png" 66 | border = { 4, 4, 4, 4 } 67 | stretch = TRUE 68 | } 69 | image 70 | { 71 | function = BOX 72 | state = PRELIGHT 73 | file = "../assets/toolbutton-hover.png" 74 | border = { 4, 4, 4, 4 } 75 | stretch = TRUE 76 | } 77 | image 78 | { 79 | function = BOX 80 | state = ACTIVE 81 | file = "../assets/toolbutton-toggled.png" 82 | border = { 4, 4, 4, 4} 83 | stretch = TRUE 84 | } 85 | image 86 | { 87 | function = BOX 88 | state = INSENSITIVE 89 | file = "../assets/null.png" 90 | border = { 4, 4, 4, 4 } 91 | stretch = TRUE 92 | } 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /src/gtk3/applications/_chromium.scss: -------------------------------------------------------------------------------- 1 | window.background.chromium { 2 | background-color: gtk("@theme_base_color"); 3 | border-color: gtk("@borders"); 4 | 5 | menubar, 6 | .menubar { 7 | color: gtk("@theme_fg_color"); 8 | background-color: gtk("@theme_bg_color"); 9 | &:backdrop { 10 | background-color: gtk("@theme_unfocused_bg_color"); 11 | color: gtk("@theme_unfocused_fg_color"); 12 | } 13 | } 14 | entry { 15 | background-color: gtk("@theme_base_color"); 16 | } 17 | &.csd { 18 | menubar, 19 | .menubar { 20 | color: gtk("@theme_titlebar_foreground"); 21 | background-color: gtk("@theme_titlebar_background"); 22 | &:backdrop { 23 | background-color: gtk( 24 | "@theme_titlebar_background_backdrop" 25 | ); 26 | color: gtk("@theme_titlebar_foreground_backdrop"); 27 | } 28 | } 29 | } 30 | 31 | headerbar, 32 | .titlebar { 33 | button.titlebutton { 34 | &.close { 35 | color: transparent; 36 | background-image: -gtk-scaled( 37 | url("../assets/titlebutton-close.png"), 38 | url("../assets/titlebutton-close@2.png") 39 | ); 40 | &:hover { 41 | background-image: -gtk-scaled( 42 | url("../assets/titlebutton-close-hover.png"), 43 | url("../assets/titlebutton-close-hover@2.png") 44 | ); 45 | } 46 | &:active { 47 | background-image: -gtk-scaled( 48 | url("../assets/titlebutton-close-active.png"), 49 | url("../assets/titlebutton-close-active@2.png") 50 | ); 51 | } 52 | &:backdrop { 53 | background-image: -gtk-scaled( 54 | url("../assets/titlebutton-close-backdrop.png"), 55 | url("../assets/titlebutton-close-backdrop@2.png") 56 | ); 57 | } 58 | } 59 | 60 | &.maximize { 61 | color: transparent; 62 | background-image: -gtk-scaled( 63 | url("../assets/titlebutton-maximize.png"), 64 | url("../assets/titlebutton-maximize@2.png") 65 | ); 66 | &:hover { 67 | background-image: -gtk-scaled( 68 | url("../assets/titlebutton-maximize-hover.png"), 69 | url("../assets/titlebutton-maximize-hover@2.png") 70 | ); 71 | } 72 | &:active { 73 | background-image: -gtk-scaled( 74 | url("../assets/titlebutton-maximize-active.png"), 75 | url("../assets/titlebutton-maximize-active@2.png") 76 | ); 77 | } 78 | &:backdrop { 79 | background-image: -gtk-scaled( 80 | url("../assets/titlebutton-maximize-backdrop.png"), 81 | url("../assets/titlebutton-maximize-backdrop@2.png") 82 | ); 83 | } 84 | } 85 | &.minimize { 86 | color: transparent; 87 | background-image: -gtk-scaled( 88 | url("../assets/titlebutton-minimize.png"), 89 | url("../assets/titlebutton-minimize@2.png") 90 | ); 91 | &:hover { 92 | background-image: -gtk-scaled( 93 | url("../assets/titlebutton-minimize-hover.png"), 94 | url("../assets/titlebutton-minimize-hover@2.png") 95 | ); 96 | } 97 | &:active { 98 | background-image: -gtk-scaled( 99 | url("../assets/titlebutton-minimize-active.png"), 100 | url("../assets/titlebutton-minimize-active@2.png") 101 | ); 102 | } 103 | &:backdrop { 104 | background-image: -gtk-scaled( 105 | url("../assets/titlebutton-minimize-backdrop.png"), 106 | url("../assets/titlebutton-minimize-backdrop@2.png") 107 | ); 108 | } 109 | } 110 | } 111 | 112 | @at-root window.background.chromium.maximized headerbar, 113 | .maximized .titlebar { 114 | button.titlebutton { 115 | &.maximize { 116 | color: transparent; 117 | background-image: -gtk-scaled( 118 | url("../assets/titlebutton-maximize-maximized.png"), 119 | url("../assets/titlebutton-maximize-maximized@2.png") 120 | ); 121 | &:hover { 122 | background-image: -gtk-scaled( 123 | url("../assets/titlebutton-maximize-maximized-hover.png"), 124 | url("../assets/titlebutton-maximize-maximized-hover@2.png") 125 | ); 126 | } 127 | &:active { 128 | background-image: -gtk-scaled( 129 | url("../assets/titlebutton-maximize-maximized-active.png"), 130 | url("../assets/titlebutton-maximize-maximized-active@2.png") 131 | ); 132 | } 133 | &:backdrop { 134 | background-image: -gtk-scaled( 135 | url("../assets/titlebutton-maximize-maximized-backdrop.png"), 136 | url("../assets/titlebutton-maximize-maximized-backdrop@2.png") 137 | ); 138 | } 139 | } 140 | } 141 | } 142 | } 143 | } 144 | -------------------------------------------------------------------------------- /src/gtk3/applications/_firefox.scss: -------------------------------------------------------------------------------- 1 | #MozillaGtkWidget { 2 | scrollbar { 3 | padding: 0px; 4 | slider { 5 | margin: 0px; 6 | background: none; 7 | background-color: gtkalpha(gtk("@theme_fg_color"), 0.5); 8 | 9 | &:hover { 10 | background-color: gtkalpha( gtk("@theme_button_decoration_hover"), 0.5); 11 | } 12 | &:focus { 13 | background-color: gtkalpha( gtk("@theme_button_decoration_focus"), 0.5); 14 | } 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/gtk3/gtk.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | $new-highlight: false; 4 | 5 | @import "global"; 6 | @import "../functions"; 7 | @import "../colors"; 8 | 9 | @import "widgets/base"; 10 | @import "widgets/button"; 11 | @import "widgets/entry"; 12 | @import "widgets/app_notifications"; 13 | @import "widgets/calendar"; 14 | @import "widgets/checkboxes"; 15 | @import "widgets/color_chooser"; 16 | @import "widgets/dialogs"; 17 | @import "widgets/headerbar"; 18 | @import "widgets/infobar"; 19 | @import "widgets/link"; 20 | @import "widgets/lists"; 21 | @import "widgets/menus"; 22 | @import "widgets/misc"; 23 | @import "widgets/notebook"; 24 | @import "widgets/overshoot"; 25 | @import "widgets/pathbar"; 26 | @import "widgets/progressbar"; 27 | @import "widgets/scale"; 28 | @import "widgets/scrollbar"; 29 | @import "widgets/sidebar"; 30 | @import "widgets/spinbutton"; 31 | @import "widgets/switch"; 32 | @import "widgets/toolbar"; 33 | @import "widgets/tooltips"; 34 | @import "widgets/treeview"; 35 | @import "widgets/window_decorations"; 36 | @import "widgets/libhandy"; 37 | @import "widgets/assistant"; 38 | @import "widgets/floating-bar"; 39 | 40 | @import "applications/chromium"; 41 | @import "applications/firefox"; 42 | -------------------------------------------------------------------------------- /src/gtk3/widgets/_app_notifications.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /********************* 4 | * App Notifications * 5 | *********************/ 6 | 7 | .app-notification, 8 | .app-notification.frame { 9 | @extend %osd; 10 | padding: 10px; 11 | border-top-width: 0px; 12 | border-radius: 0px 0px 3px 3px; 13 | &:backdrop { 14 | background-image: none; 15 | } 16 | button { 17 | @include neobutton(normal); 18 | &.flat { 19 | @include neobutton(toolbutton); 20 | } 21 | } 22 | border { 23 | border: none; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/gtk3/widgets/_assistant.scss: -------------------------------------------------------------------------------- 1 | assistant { 2 | .sidebar { 3 | background-color: gtk("@theme_base_color"); 4 | color: gtk("@theme_text_color"); 5 | border-top: 1px solid gtk("@borders"); 6 | border-right: 1px solid gtk("@borders"); 7 | 8 | &:backdrop { 9 | background-color: gtk("@theme_unfocused_base_color"); 10 | color: gtk("@theme_unfocused_text_color"); 11 | border-color: gtk("@unfocused_borders"); 12 | } 13 | } 14 | &.csd .sidebar { 15 | border-top-style: none; 16 | } 17 | .sidebar label { 18 | padding: 6px 12px; 19 | } 20 | .sidebar label.highlight { 21 | background-color: gtk("@theme_selected_bg_color"); 22 | color: gtk("@theme_fg_color"); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/gtk3/widgets/_calendar.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /************ 4 | * Calendar * 5 | ***********/ 6 | calendar { 7 | color: gtk("@theme_text_color"); 8 | border: 1px solid gtk("@borders"); 9 | background-color: gtk("@theme_base_color"); 10 | &:selected { 11 | background-color: gtk("@borders"); 12 | } 13 | &:disabled { 14 | color: gtk("@insensitive_base_fg_color"); 15 | } 16 | 17 | &.header { 18 | border: 1px solid gtk("@borders"); 19 | border-radius: 0; 20 | color: gtk("@theme_text_color"); 21 | 22 | &:backdrop { 23 | color: gtk("@theme_unfocused_text_color"); 24 | border-color: gtk("@unfocused_borders"); 25 | } 26 | 27 | &:disabled { 28 | color: gtk("@insensitive_base_fg_color"); 29 | } 30 | } 31 | 32 | &.button { 33 | @extend %undecorated_button; 34 | color: gtk("@theme_button_foreground_normal"); 35 | 36 | &:hover { 37 | @extend %undecorated_button; 38 | color: gtk("@theme_button_decoration_hover"); 39 | } 40 | &:active { 41 | @extend %undecorated_button; 42 | color: gtk("@theme_button_decoration_focus"); 43 | } 44 | &:backdrop { 45 | @extend %undecorated_button; 46 | color: gtk("@theme_button_foreground_backdrop"); 47 | } 48 | } 49 | 50 | &:indeterminate, 51 | &.highlight { 52 | color: gtkalpha(gtk("@theme_text_color"), 0.5); 53 | } 54 | 55 | &:indeterminate:backdrop, 56 | &.highlight:backdrop { 57 | color: gtkalpha( 58 | gtk("@theme_unfocused_text_color"), 59 | 0.5 60 | ); 61 | } 62 | 63 | &:backdrop { 64 | color: gtk("@theme_unfocused_text_color"); 65 | border-color: gtk("@unfocused_borders"); 66 | background-color: gtk("@theme_unfocused_base_color"); 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /src/gtk3/widgets/_checkboxes.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /************************* 4 | * Check and Radio items * 5 | *************************/ 6 | 7 | checkbutton.text-button, 8 | radiobutton.text-button { 9 | // this is for a nice focus on check and radios text 10 | padding: 2px 0; 11 | outline-offset: 0; 12 | 13 | label:not(:only-child) { 14 | &:first-child { 15 | margin-left: 4px; 16 | } 17 | &:last-child { 18 | margin-right: 4px; 19 | } 20 | } 21 | } 22 | 23 | check, 24 | radio { 25 | transition: 0.1s; 26 | margin: 0 4px; 27 | 28 | &:only-child { 29 | margin: 0; 30 | } 31 | 32 | min-height: 14px; 33 | min-width: 14px; 34 | //border: none; 35 | animation-timing-function: $ease-out-quad; 36 | background-color: gtk("@theme_button_background_normal"); 37 | border: 1px solid gtkalpha( 38 | gtk("@theme_button_foreground_normal"), 39 | 0.33 40 | ); 41 | 42 | -gtk-icon-shadow: none; 43 | -gtk-icon-palette: fg gtk("@theme_fg_color"); 44 | 45 | &:hover { 46 | border: 1px solid gtk("@theme_button_decoration_hover"); 47 | } 48 | &:disabled { 49 | background-color: gtk("@insensitive_base_color"); 50 | 51 | border-color: gtkalpha( 52 | gtk("@insensitive_base_fg_color"), 53 | 0.33 54 | ); 55 | } 56 | 57 | &:active { 58 | background: shade(gtk("@theme_base_color"), 0.9) 59 | } 60 | 61 | &:focus { 62 | border-color: gtk("@theme_button_decoration_focus"); 63 | } 64 | 65 | &:indeterminate, 66 | &:checked { 67 | border-color: gtk("@theme_button_decoration_hover"); 68 | background-color: gtkalpha( 69 | gtk("@theme_button_decoration_hover"), 70 | 0.33 71 | ); 72 | 73 | &:backdrop { 74 | background-color: gtkalpha( 75 | gtk("@theme_unfocused_selected_bg_color"), 76 | 0.33 77 | ); 78 | 79 | border-color: gtk("@theme_unfocused_selected_bg_color"); 80 | } 81 | 82 | &:disabled { 83 | background-color: gtkalpha( 84 | gtk("@insensitive_bg_color"), 85 | 0.33 86 | ); 87 | 88 | border-color: gtk("@insensitive_bg_color"); 89 | color: gtk("@insensitive_fg_color"); 90 | -gtk-icon-effect: none; 91 | } 92 | } 93 | 94 | menu menuitem & { 95 | margin: 0; // this is a workaround for a menu check/radio size allocation issue 96 | min-height: 14px; 97 | min-width: 14px; 98 | background-color: transparent; 99 | box-shadow: none; 100 | -gtk-icon-shadow: none; 101 | animation: none; 102 | } 103 | } 104 | 105 | check{ 106 | border-radius: $r; 107 | &:checked { 108 | -gtk-icon-source: -gtk-recolor(url("../assets/checkmark-symbolic.svg")); 109 | } 110 | &:indeterminate { 111 | -gtk-icon-source: -gtk-recolor(url("../assets/dash-symbolic.svg")); 112 | } 113 | } 114 | radio { 115 | border-radius: 50%; 116 | &:checked { 117 | -gtk-icon-source: -gtk-recolor(url("../assets/bullet-symbolic.svg")); 118 | } 119 | &:indeterminate { 120 | -gtk-icon-source: -gtk-recolor(url("../assets/dash-symbolic.svg")); 121 | } 122 | } 123 | 124 | radio:not(:indeterminate):not(:checked):active:not(:backdrop) { -gtk-icon-transform: scale(0); } 125 | 126 | check:not(:indeterminate):not(:checked):active:not(:backdrop) { -gtk-icon-transform: translate(-4px, 3px) scale(0) } 127 | 128 | radio, 129 | check { 130 | &:active { -gtk-icon-transform: scale(0, 1); } 131 | 132 | &:checked:not(:backdrop), &:indeterminate:not(:backdrop) { 133 | -gtk-icon-transform: unset; 134 | } 135 | } 136 | -------------------------------------------------------------------------------- /src/gtk3/widgets/_color_chooser.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /***************** 4 | * Color Chooser * 5 | *****************/ 6 | // FIXME button.color in buttons section 7 | colorswatch { 8 | // take care of colorswatches on selected elements 9 | :selected & { 10 | box-shadow: none; 11 | &.overlay, 12 | &.overlay:hover { 13 | border-color: gtk("@theme_selected_fg_color"); 14 | } 15 | } 16 | 17 | &:selected { 18 | box-shadow: none; 19 | } 20 | 21 | &.top, 22 | &.bottom, 23 | &.left, 24 | &:first-child:not(.overlay):not(.top), 25 | &.right, 26 | &:last-child:not(.overlay):not(.bottom), 27 | &:only-child:not(.overlay), 28 | &.top > .overlay, 29 | &.bottom > .overlay, 30 | &:first-child:not(.top) > .overlay, 31 | &:last-child:not(.bottom) > .overlay, 32 | &:only-child > .overlay { 33 | border-radius: $r; 34 | } 35 | 36 | // hover effect 37 | &:hover, 38 | &:hover:selected { 39 | background-image: linear-gradient( 40 | 135deg, 41 | transparentize(white, 0.3), 42 | transparentize(white, 1) 50% 43 | ); 44 | box-shadow: inset 0 1px transparentize(white, 0.6); 45 | &.color-dark { 46 | // swatches with colors with luminosity lower than 50% get the color-dark class 47 | background-image: linear-gradient( 48 | 135deg, 49 | transparentize(white, 0.5), 50 | transparentize(white, 1) 50% 51 | ); 52 | } 53 | } 54 | &:backdrop, 55 | &:backdrop:selected &.color-dark:backdrop, 56 | &.color-dark:backdrop:selected { 57 | background-image: none; 58 | box-shadow: none; 59 | } 60 | 61 | // no hover effect for the colorswatch in the color editor 62 | GtkColorEditor & { 63 | border-radius: $r; // same radius as the entry 64 | &:hover { 65 | background-image: none; 66 | box-shadow: none; 67 | } 68 | &:backdrop { 69 | box-shadow: none; 70 | } 71 | } 72 | 73 | // indicator and keynav outline colors 74 | &.color-dark { 75 | color: white; 76 | outline-color: transparentize(black, 0.7); 77 | &:backdrop { 78 | color: transparentize(white, 0.7); 79 | } 80 | } 81 | &.color-light { 82 | color: black; 83 | outline-color: transparentize(white, 0.5); 84 | &:backdrop { 85 | color: transparentize(black, 0.7); 86 | } 87 | } 88 | 89 | // border color 90 | overlay, 91 | overlay:selected { 92 | border: 1px solid gtk("@borders"); 93 | &:hover { 94 | border-color: gtk("@theme_button_decoration_hover"); 95 | } 96 | } 97 | 98 | // make the add color button looks like, well, a button 99 | &#add-color-button { 100 | border-style: solid; // the borders are drawn by the overlay for standard colorswatches to have them semi 101 | border-width: 1px; // translucent on the colored background, here it's not necessary so they need to be set 102 | @include neobutton(normal); 103 | overlay { 104 | @include neobutton(toolbutton); 105 | } // reset the overlay to not cover the button style underneat 106 | } 107 | } 108 | 109 | GtkColorButton.button { 110 | padding: 5px; // Uniform padding on the GtkColorButton 111 | 112 | GtkColorSwatch:first-child:last-child { 113 | // :first-child:last-child for a specificity bump, it gets overridden by the 114 | // colorpicker style, otherwise 115 | border-radius: 0; 116 | box-shadow: none; 117 | &:disabled, 118 | &:backdrop { 119 | box-shadow: none; 120 | } 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /src/gtk3/widgets/_dialogs.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /*********** 4 | * Dialogs * 5 | ***********/ 6 | 7 | // .message-dialog .dialog-action-area .button { 8 | // //padding: 8px; 9 | // } 10 | 11 | messagedialog { 12 | // Message Dialog styling 13 | 14 | &.background { 15 | background-color: gtk("@theme_bg_color"); 16 | } 17 | &:backdrop { 18 | background-color: gtk("@theme_unfocused_bg_color"); 19 | } 20 | .titlebar { 21 | min-height: 32px; 22 | background-color: transparent; 23 | background-image: linear-gradient( 24 | to bottom, 25 | gtkshade("@theme_titlebar_background", 1.2117647), 26 | gtk("@theme_titlebar_background") 27 | ); 28 | box-shadow: none; 29 | } 30 | .dialog-action-area { 31 | padding: 8px; 32 | } 33 | button { 34 | margin: 2px; 35 | } 36 | } 37 | 38 | filechooser { 39 | .search-bar { 40 | background-color: gtk("@theme_bg_color"); 41 | border-color: gtk("@theme_bg_color"); 42 | box-shadow: none; 43 | &:backdrop { 44 | background-color: gtk("@theme_unfocused_bg_color"); 45 | border-color: gtk("@theme_unfocused_bg_color"); 46 | color: gtk("@theme_unfocused_text_color"); 47 | } 48 | } 49 | .dialog-action-box { 50 | border-top: 1px solid gtk("@borders"); 51 | &:backdrop { 52 | border-top-color: gtk("@unfocused_borders"); 53 | } 54 | } 55 | #pathbarbox { 56 | background-color: gtk("@theme_bg_color"); 57 | border-bottom: 1px solid gtk("@borders"); 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/gtk3/widgets/_entry.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @mixin entry( 4 | $t, 5 | $fc: gtk("@theme_view_active_decoration_color") 6 | ) { 7 | // 8 | // Entries drawing function 9 | // 10 | // $t: entry type 11 | // $fc: focus color 12 | // $edge: set to none to not draw the bottom edge or specify a color to not 13 | // use the default one 14 | // 15 | // possible $t values: 16 | // normal, focus, insensitive, backdrop, backdrop-insensitive, osd, osd-focus, osd-backdrop; 17 | // 18 | @if $t==normal { 19 | color: gtk("@theme_text_color"); 20 | border-color: gtk("@borders"); 21 | background-color: gtk("@theme_base_color"); 22 | box-shadow: none; 23 | } 24 | 25 | @if $t==focus { 26 | border-color: $fc; 27 | } 28 | 29 | @if $t==insensitive { 30 | color: gtk("@insensitive_base_fg_color"); 31 | border-color: gtk("@insensitive_borders"); 32 | background-color: gtk("@insensitive_base_color"); 33 | } 34 | 35 | @if $t==backdrop { 36 | color: gtk("@theme_unfocused_text_color"); 37 | border-color: gtk("@unfocused_borders"); 38 | background-color: gtk("@theme_unfocused_base_color"); 39 | } 40 | 41 | @if $t==backdrop-insensitive { 42 | color: gtk("@theme_unfocused_view_text_color"); 43 | border-color: gtk("@unfocused_insensitive_borders"); 44 | background-color: gtk("@theme_unfocused_view_bg_color"); 45 | } 46 | } 47 | 48 | /**************** 49 | * Text Entries * 50 | ****************/ 51 | 52 | %entry, 53 | entry { 54 | %entry_basic, 55 | & { 56 | min-height: 30px; 57 | padding-left: 8px; 58 | padding-right: 8px; 59 | border: 1px solid; 60 | border-radius: $r; 61 | 62 | @include entry(normal); 63 | 64 | image { 65 | // icons inside the entry 66 | &.left { 67 | padding-left: 0; 68 | padding-right: 6px; 69 | } 70 | &.right { 71 | padding-left: 6px; 72 | padding-right: 0; 73 | } 74 | } 75 | // FIXME 76 | // undershoot { 77 | // &.left { @include undershoot(left); } 78 | // &.right { @include undershoot(right); } 79 | // } 80 | 81 | &.flat { 82 | &:focus, 83 | & { 84 | min-height: 0; 85 | padding: 2px; 86 | @include entry(normal); 87 | } 88 | } 89 | &:focus { 90 | @include entry(focus); 91 | } 92 | &:disabled { 93 | @include entry(insensitive); 94 | } 95 | &:backdrop { 96 | @include entry(backdrop); 97 | } 98 | &:backdrop:disabled { 99 | @include entry(backdrop-insensitive); 100 | } 101 | 102 | selection { 103 | &:focus, 104 | & { 105 | @extend %selected_items; 106 | } 107 | } 108 | 109 | @each $e_type, $e_color in (error, gtk("@error_color")), 110 | (warning, gtk("@warning_color")) 111 | { 112 | &.#{$e_type} { 113 | color: $e_color; 114 | border-color: $e_color; 115 | background-color: gtkalpha($e_color, 0.5); 116 | &:focus { 117 | @include entry(focus, $e_color); 118 | background-color: gtkalpha($e_color, 0.5); 119 | } 120 | &:selected, 121 | &:selected:focus { 122 | background-color: $e_color; 123 | } 124 | &:backdrop { 125 | @if $e_color == gtk("@error_color") { 126 | color: gtk("@error_color_backdrop"); 127 | border-color: gtk("@error_color_backdrop"); 128 | background-color: gtkalpha( 129 | gtk("@error_color_backdrop"), 130 | 0.5 131 | ); 132 | } @else if $e_color == gtk("@warning_color") { 133 | color: gtk("@warning_color_backdrop"); 134 | border-color: gtk("@warning_color_backdrop"); 135 | background-color: gtkalpha( 136 | gtk("@warning_color_backdrop"), 137 | 0.5 138 | ); 139 | } 140 | } 141 | } 142 | } 143 | 144 | image { 145 | // entry icons colors 146 | color: gtkmix( 147 | gtk("@theme_fg_color"), 148 | gtk("@theme_text_color"), 149 | 0.8 150 | ); 151 | &:hover { 152 | color: gtk("@theme_button_decoration_hover"); 153 | } 154 | &:active { 155 | color: gtk("@theme_button_decoration_focus"); 156 | } 157 | &:backdrop { 158 | color: gtkmix( 159 | gtk("@theme_unfocused_fg_color"), 160 | gtk("@theme_unfocused_fg_color"), 161 | 0.8 162 | ); 163 | } 164 | } 165 | // FIXME 166 | // &:drop(active) { 167 | // &:focus, & { 168 | // border-color: $drop_target_color; 169 | // box-shadow: inset 0 0 0 1px $drop_target_color; 170 | // } 171 | // } 172 | } 173 | 174 | progress { 175 | margin: 1px; 176 | border-radius: 0; 177 | border-width: 0 0 2px; 178 | border-color: gtk("@theme_selected_bg_color"); 179 | border-style: solid; 180 | background-image: none; 181 | background-color: transparent; 182 | box-shadow: none; 183 | &:backdrop { 184 | background-color: transparent; 185 | border-color: gtk( 186 | "@theme_unfocused_selected_bg_color" 187 | ); 188 | } 189 | } 190 | } 191 | 192 | treeview acceleditor > label { 193 | background-color: gtk("@theme_selected_bg_color"); 194 | } 195 | 196 | treeview entry { 197 | &.flat, 198 | & { 199 | border-radius: 0; 200 | background-image: none; 201 | background-color: gtk("@theme_base_color"); 202 | 203 | &:focus { 204 | border-color: gtk( 205 | "@theme_view_active_decoration_color" 206 | ); 207 | } 208 | } 209 | } 210 | 211 | combobox > box > button.combo:not(:only-child) { 212 | background: none; 213 | @include entry(normal); 214 | 215 | &:focus { 216 | @include entry(focus); 217 | } 218 | &:disabled { 219 | @include entry(insensitive); 220 | } 221 | &:backdrop { 222 | @include entry(backdrop); 223 | } 224 | &:backdrop:disabled { 225 | @include entry(backdrop-insensitive); 226 | } 227 | } 228 | -------------------------------------------------------------------------------- /src/gtk3/widgets/_floating-bar.scss: -------------------------------------------------------------------------------- 1 | .floating-bar { 2 | background-color: gtk("@tooltip_background"); 3 | color: gtk("@tooltip_text"); 4 | border: 1px solid gtk("@tooltip_border"); 5 | border-radius: $r; 6 | margin: 3px; 7 | } 8 | -------------------------------------------------------------------------------- /src/gtk3/widgets/_headerbar.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /*************** 4 | * Header bars * 5 | ***************/ 6 | 7 | %titlebar, 8 | headerbar { 9 | padding: 0px 6px; 10 | border-width: 0px 0px 1px 0px; 11 | border-radius: 6px 6px 0px 0px; 12 | border-style: solid; 13 | border-color: gtk("@borders"); 14 | color: gtk("@theme_titlebar_foreground"); 15 | background-image: none; 16 | background-color: gtk("@theme_titlebar_background"); 17 | border-top: 1px solid lighter(gtk("@theme_titlebar_background")); 18 | 19 | &:backdrop { 20 | background-image: none; 21 | background-color: gtk( 22 | "@theme_titlebar_background_backdrop" 23 | ); 24 | color: gtk("@theme_titlebar_foreground_backdrop"); 25 | border-top: 1px solid lighter(gtk("@theme_titlebar_background_backdrop")); 26 | box-shadow: none; 27 | } 28 | label { 29 | font-weight: normal; 30 | &:backdrop { 31 | color: gtk("@theme_titlebar_foreground_backdrop"); 32 | } 33 | } 34 | .path-bar button { 35 | color: gtk("@theme_titlebar_foreground"); 36 | font-weight: normal; 37 | &:backdrop { 38 | color: gtk("@theme_titlebar_foreground_backdrop"); 39 | } 40 | } 41 | .linked button { 42 | @include neobutton(normal); 43 | } 44 | button { 45 | @include neobutton(toolbutton); 46 | 47 | //ensure we don't have a shadow on headerbar buttons at all 48 | box-shadow: none; 49 | color: gtk("@theme_titlebar_foreground"); 50 | 51 | &:hover { 52 | color: gtk("@theme_titlebar_foreground"); 53 | } 54 | 55 | &:backdrop { 56 | background-image: none; 57 | background-color: gtk( 58 | "@theme_titlebar_background_backdrop" 59 | ); 60 | color: gtk("@theme_titlebar_foreground_backdrop"); 61 | } 62 | 63 | &.flat:backdrop, 64 | &.flat:backdrop:disabled, 65 | &:disabled:backdrop { 66 | background-image: none; 67 | background-color: gtk( 68 | "@theme_titlebar_background_backdrop" 69 | ); 70 | color: gtk("@theme_titlebar_foreground_backdrop"); 71 | border-color: transparent; 72 | } 73 | &.flat:disabled { 74 | @extend %undecorated_button; 75 | color: gtk("@theme_titlebar_foreground_insensitive"); 76 | } 77 | &:disabled { 78 | background-color: transparent; 79 | background-image: none; 80 | border-color: transparent; 81 | color: gtk("@theme_titlebar_foreground_insensitive"); 82 | } 83 | } 84 | 85 | .title { 86 | font-weight: normal; 87 | padding: 0px 12px; 88 | &:backdrop { 89 | color: gtk("@theme_titlebar_foreground_backdrop"); 90 | } 91 | } 92 | 93 | .subtitle { 94 | font-size: smaller; 95 | padding: 0 12px; 96 | @extend .dim-label; 97 | &:backdrop { 98 | color: gtk("@theme_titlebar_foreground_backdrop"); 99 | } 100 | } 101 | 102 | separator { 103 | border-width: 0px; 104 | background-color: transparent; 105 | background-image: none; 106 | border-color: transparent; 107 | } 108 | 109 | &.selection-mode, 110 | &.selection-mode headerbar { 111 | background-color: gtkmix( 112 | "@theme_titlebar_background", 113 | "@theme_button_decoration_focus", 114 | 0.5 115 | ); 116 | separator { 117 | background-color: gtk( 118 | "@theme_button_decoration_focus" 119 | ); 120 | } 121 | button:not(.titlebutton) { 122 | background-color: gtkalpha( 123 | gtk("@theme_button_decoration_focus"), 124 | 0.5 125 | ); 126 | &:active, 127 | &:focus { 128 | background-color: gtk( 129 | "@theme_button_decoration_focus" 130 | ); 131 | } 132 | } 133 | 134 | .subtitle:link { 135 | @extend %link, :selected; 136 | } 137 | 138 | .selection-menu { 139 | padding: 4px 6px; 140 | 141 | GtkArrow { 142 | -GtkArrow-arrow-scaling: 1; 143 | } 144 | 145 | .arrow { 146 | -gtk-icon-source: -gtk-icontheme($arrow_down); 147 | -gtk-icon-shadow: none; 148 | } 149 | } 150 | } 151 | 152 | .tiled &, 153 | .maximized & { 154 | border-radius: 0; // squared corners when the window is max'd or tiled 155 | } 156 | } 157 | 158 | headerbar { 159 | // add vertical margins to headerbar entries, buttons and separators to avoid them spanning the whole height 160 | entry, 161 | spinbutton, 162 | separator, 163 | button { 164 | margin-top: 8px; 165 | margin-bottom: 8px; 166 | } 167 | } 168 | -------------------------------------------------------------------------------- /src/gtk3/widgets/_infobar.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /************** 4 | * GtkInfoBar * 5 | **************/ 6 | infobar { 7 | border-style: none; 8 | border-bottom: 1px solid gtk("@borders"); 9 | background-color: gtk("@theme_bg_color"); 10 | background-image: none; 11 | &:backdrop { 12 | border-bottom: 1px solid gtk("@unfocused_borders"); 13 | } 14 | } 15 | 16 | .info, 17 | .question, 18 | .warning, 19 | .error { 20 | background-color: gtk("@theme_bg_color"); 21 | background-image: none; 22 | color: gtk("@warning_color"); 23 | text-shadow: none; 24 | &:backdrop { 25 | background-color: gtk("@theme_unfocused_bg_color"); 26 | color: gtk("@warning_color_backdrop"); 27 | } 28 | button { 29 | box-shadow: none; 30 | background-image: none; 31 | background-color: gtkalpha(gtk("@warning_color"), 0.5); 32 | border-color: gtkalpha(gtk("@warning_color"), 0.5); 33 | color: gtk("@theme_button_foreground_normal"); 34 | &:hover { 35 | background-color: gtkalpha( 36 | gtk("@warning_color"), 37 | 0.25 38 | ); 39 | border-color: gtk("@warning_color"); 40 | } 41 | &:active, 42 | &:checked { 43 | background-color: gtk("@warning_color"); 44 | color: gtk("@theme_bg_color"); 45 | border-color: gtk("@warning_color"); 46 | } 47 | &:disabled { 48 | background-color: gtkalpha( 49 | gtk("@warning_color_insensitive"), 50 | 0.5 51 | ); 52 | border-color: gtkalpha( 53 | gtk("@warning_color_insensitive"), 54 | 0.5 55 | ); 56 | color: gtk("@theme_button_foreground_insensitive"); 57 | } 58 | &:backdrop { 59 | background-color: gtkalpha( 60 | gtk("@warning_color_backdrop"), 61 | 0.5 62 | ); 63 | border-color: gtkalpha( 64 | gtk("@warning_color_backdrop"), 65 | 0.5 66 | ); 67 | color: gtk("@theme_button_foreground_backdrop"); 68 | &:active, 69 | &:checked { 70 | background-color: gtk("@warning_color_backdrop"); 71 | color: gtk("@theme_unfocused_bg_color"); 72 | border-color: gtk("@warning_color_backdrop"); 73 | } 74 | &:disabled { 75 | background-color: gtkalpha( 76 | gtk("@warning_color_insensitive_backdrop"), 77 | 0.5 78 | ); 79 | border-color: gtkalpha( 80 | gtk("@warning_color_insensitive_backdrop"), 81 | 0.5 82 | ); 83 | color: gtk( 84 | "@theme_button_foreground_backdrop_insensitive" 85 | ); 86 | } 87 | &:disabled:active, 88 | &:disabled:checked { 89 | background-color: gtk( 90 | "@warning_color_insensitive_backdrop" 91 | ); 92 | color: gtk("@insensitive_unfocused_bg_color"); 93 | border-color: gtk( 94 | "@warning_color_insensitive_backdrop" 95 | ); 96 | } 97 | } 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /src/gtk3/widgets/_libhandy.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | hdydialer { 4 | button { 5 | font-weight: lighter; 6 | background-color: transparent; 7 | border: 0; 8 | box-shadow: none; 9 | &:backdrop { 10 | background-color: transparent; 11 | } 12 | &:focus { 13 | background-color: transparent; 14 | border: none; 15 | } 16 | } 17 | } 18 | hdyviewswitcher { 19 | > button { 20 | border: 0; 21 | background-color: transparent; 22 | &:backdrop:hover, 23 | &:hover, 24 | &:active, 25 | &:hover:focus, 26 | &:active:focus, 27 | &:checked, 28 | &:checked:hover { 29 | background-color: transparent; 30 | } 31 | &:checked, 32 | &:checked:backdrop { 33 | border-top: 0; 34 | border-left: 0; 35 | border-right: 0; 36 | background-color: transparent; 37 | > stack { 38 | border-bottom: 3px solid transparent; 39 | border-top: 3px solid 40 | gtk("@theme_button_decoration_focus"); 41 | } 42 | } 43 | &.needs-attention > stack > box label { 44 | animation: needs_attention 150ms ease-in; 45 | background-image: -gtk-gradient( 46 | radial, 47 | center center, 48 | 0, 49 | center center, 50 | 0.5, 51 | to(gtk("@theme_button_decoration_focus")), 52 | to(transparent) 53 | ); 54 | background-size: 6px 6px, 6px 6px; 55 | background-repeat: no-repeat; 56 | background-position: right 0px, right 1px; 57 | } 58 | } 59 | } 60 | headerbar hdyviewswitcher > button:checked > stack { 61 | &:backdrop { 62 | border-top: 3px solid transparent; 63 | border-bottom: 3px solid 64 | gtk("@theme_button_decoration_focus"); 65 | } 66 | border-top: 3px solid transparent; 67 | border-bottom: 3px solid 68 | gtk("@theme_button_decoration_focus"); 69 | } 70 | viewswitcher { 71 | border-radius: 0; 72 | margin: 0; 73 | padding: 0; 74 | background-color: transparent; 75 | button { 76 | border-radius: 0; 77 | margin: 0; 78 | padding: 0; 79 | background-color: transparent; 80 | border: 0; 81 | box-shadow: none; 82 | > stack { 83 | color: gtk("@theme_button_foreground_normal"); 84 | > box label.active { 85 | font-weight: bold; 86 | } 87 | > box.narrow { 88 | font-size: 0.75rem; 89 | padding-top: 7px; 90 | padding-bottom: 5px; 91 | image, 92 | label { 93 | padding-left: 8px; 94 | padding-right: 8px; 95 | } 96 | } 97 | > box.wide { 98 | padding: 8px 12px; 99 | label:dir(ltr) { 100 | padding-right: 7px; 101 | } 102 | label:dir(rtl) { 103 | padding-left: 7px; 104 | } 105 | } 106 | } 107 | &:backdrop, 108 | &:active, 109 | &:active:focus, 110 | &:checked:hover, 111 | &:checked:focus:hover, 112 | &:backdrop:checked:hover, 113 | &:focus { 114 | background-color: transparent; 115 | } 116 | &:hover, 117 | &:focus:hover, 118 | &:backdrop:hover, 119 | &:backdrop:focus:hover { 120 | background-color: gtk("@insensitive_borders"); 121 | } 122 | &:checked, 123 | &:checked:backdrop, 124 | label:backdrop viewswitcher > selection:checked { 125 | border-top: 0; 126 | border-left: 0; 127 | border-right: 0; 128 | background-color: transparent; 129 | > stack { 130 | border-bottom: 3px solid transparent; 131 | border-top: 3px solid 132 | gtk("@theme_button_decoration_focus"); 133 | } 134 | } 135 | &.needs-attention { 136 | > stack > box label { 137 | animation: needs_attention 150ms ease-in; 138 | background-image: -gtk-gradient( 139 | radial, 140 | center center, 141 | 0, 142 | center center, 143 | 0.5, 144 | to(gtk("@theme_button_decoration_focus")), 145 | to(transparent) 146 | ); 147 | background-size: 6px 6px, 6px 6px; 148 | background-repeat: no-repeat; 149 | background-position: right 0px, right 1px; 150 | } 151 | &:checked > stack > box label { 152 | animation: needs_attention 150ms ease-out; 153 | background-image: none; 154 | } 155 | } 156 | } 157 | } 158 | headerbar viewswitcher button:checked { 159 | > stack { 160 | border-top: 3px solid transparent; 161 | border-bottom: 3px solid 162 | gtk("@theme_button_decoration_focus"); 163 | > box label { 164 | font-weight: bold; 165 | } 166 | } 167 | > stack:backdrop { 168 | border-top: 3px solid transparent; 169 | border-bottom: 3px solid 170 | gtk("@theme_button_decoration_focus"); 171 | } 172 | } 173 | viewswitcherbar { 174 | actionbar > revealer > box { 175 | margin: 0; 176 | padding: 0; 177 | } 178 | } 179 | 180 | window.unified { 181 | border-radius: 6px; 182 | &.maximized, 183 | &.fullscreen, 184 | &.tiled { 185 | border-radius: 0; 186 | } 187 | } 188 | -------------------------------------------------------------------------------- /src/gtk3/widgets/_link.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /********* 4 | * Links * 5 | *********/ 6 | %link, 7 | *:link { 8 | color: gtk("@link_color"); 9 | &:visited { 10 | color: gtk("@link_visited_color"); 11 | *:selected & { 12 | color: gtkmix( 13 | gtk("@theme_selected_fg_color"), 14 | gtk("@theme_selected_bg_color"), 15 | 0.6 16 | ); 17 | } 18 | } 19 | &:hover { 20 | color: gtkshade("@link_color", 1.1); 21 | *:selected & { 22 | color: gtkmix( 23 | gtk("@theme_selected_fg_color"), 24 | gtk("@theme_selected_bg_color"), 25 | 0.9 26 | ); 27 | } 28 | } 29 | &:active { 30 | color: gtk("@link_color"); 31 | *:selected & { 32 | color: gtkmix( 33 | gtk("@theme_selected_fg_color"), 34 | gtk("@theme_selected_bg_color"), 35 | 0.8 36 | ); 37 | } 38 | } 39 | &:backdrop, 40 | &:backdrop:hover, 41 | &:backdrop:hover:selected { 42 | color: gtk("@theme_unfocused_selected_bg_color"); 43 | } 44 | @at-root %link_selected, 45 | &:selected, 46 | *:selected & { 47 | color: gtkmix( 48 | gtk("@theme_selected_fg_color"), 49 | gtk("@theme_selected_bg_color"), 50 | 0.8 51 | ); 52 | } 53 | } 54 | 55 | button:link, 56 | button:visited { 57 | @extend %undecorated_button; 58 | 59 | @extend *, :link; 60 | 61 | text-shadow: none; 62 | 63 | &:hover, 64 | &:active, 65 | &:checked { 66 | @extend %undecorated_button; 67 | 68 | text-shadow: none; 69 | } 70 | 71 | > label { 72 | @extend %link; 73 | 74 | text-decoration-line: underline; 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /src/gtk3/widgets/_lists.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /********* 4 | * Lists * 5 | *********/ 6 | 7 | @mixin list-item-highlight { 8 | @if $new-highlight { 9 | background-color: gtk("@theme_selected_bg_color"); 10 | color: gtk("@theme_button_foreground_active"); 11 | border-top: 1px 12 | solid 13 | gtk("@theme_button_decoration_focus"); 14 | border-bottom: 1px 15 | solid 16 | gtk("@theme_button_decoration_focus"); 17 | border-radius: 0px; 18 | } @else { 19 | background-color: gtk("@theme_selected_bg_color"); 20 | } 21 | } 22 | 23 | list { 24 | color: gtk("@theme_fg_color"); 25 | background: gtk("@theme_base_color"); 26 | border-radius: 3px; 27 | &.content { 28 | border: 1px solid gtk("@borders"); 29 | } 30 | 31 | row { 32 | background: gtk("@theme_base_color"); 33 | padding: 2px; 34 | } 35 | } 36 | 37 | row { 38 | &:hover { 39 | } 40 | 41 | &.activatable { 42 | @if $new-highlight { 43 | border: 1px solid transparent; 44 | } 45 | 46 | &.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411 47 | 48 | &:hover { 49 | @include list-item-highlight(); 50 | } 51 | 52 | &:active { 53 | box-shadow: none; 54 | @include list-item-highlight(); 55 | } 56 | 57 | &:selected { 58 | &:active { 59 | box-shadow: none; 60 | @include list-item-highlight(); 61 | } 62 | 63 | &.has-open-popup, 64 | &:hover { 65 | @include list-item-highlight(); 66 | } 67 | 68 | &:backdrop { 69 | background-color: gtk( 70 | "@theme_unfocused_selected_bg_color_alt" 71 | ); 72 | } 73 | } 74 | } 75 | 76 | &:selected { 77 | @extend %selected_items; 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /src/gtk3/widgets/_misc.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /******** 4 | * Misc * 5 | ********/ 6 | 7 | /**************** 8 | * Print dialog * 9 | *****************/ 10 | printdialog { 11 | paper { 12 | color: gtk("@theme_fg_color"); 13 | border: 1px solid gtk("@borders"); 14 | background: white; 15 | padding: 0; 16 | 17 | &:backdrop { 18 | color: gtk("@theme_unfocused_fg_color"); 19 | border-color: gtk("@unfocused_borders"); 20 | background: gtk("@print_paper_backdrop"); 21 | } 22 | } 23 | 24 | .dialog-action-box { 25 | margin: 12px; 26 | } 27 | } 28 | 29 | /********** 30 | * Frames * 31 | **********/ 32 | frame > border, 33 | .frame { 34 | box-shadow: none; 35 | margin: 0; 36 | padding: 0; 37 | border-radius: 0; 38 | border: 1px solid gtk("@borders"); 39 | 40 | &.flat { 41 | border-style: none; 42 | } 43 | 44 | &:backdrop { 45 | border-color: gtk("@unfocused_borders"); 46 | } 47 | } 48 | 49 | actionbar > revealer > box { 50 | padding: 6px; 51 | border-top: 1px solid gtk("@borders"); 52 | 53 | &:backdrop { 54 | border-color: gtk("@unfocused_borders"); 55 | } 56 | } 57 | 58 | scrolledwindow { 59 | viewport.frame { 60 | // avoid double borders when viewport inside scrolled window 61 | border-style: none; 62 | } 63 | 64 | junction { 65 | // the small square between two scrollbars 66 | border-color: transparent; 67 | background-color: transparent; 68 | background-image: none; 69 | } 70 | } 71 | 72 | //vbox and hbox separators 73 | separator, separator.sidebar { 74 | background: gtk("@borders"); 75 | min-width: 1px; 76 | min-height: 1px; 77 | } 78 | 79 | /************* 80 | * Expanders * 81 | *************/ 82 | 83 | expander { 84 | arrow { 85 | min-width: 16px; 86 | min-height: 16px; 87 | -gtk-icon-source: -gtk-icontheme($arrow_right); 88 | &:dir(rtl) { 89 | -gtk-icon-source: -gtk-icontheme( 90 | "go-next-rtl-symbolic" 91 | ); 92 | } 93 | &:hover { 94 | color: gtkshade("@theme_button_decoration_focus", 1.3); 95 | } //only lightens the arrow 96 | &:checked { 97 | -gtk-icon-source: -gtk-icontheme($arrow_down); 98 | } 99 | } 100 | } 101 | 102 | /********* 103 | * Paned * 104 | *********/ 105 | 106 | paned { 107 | > separator { 108 | min-width: 1px; 109 | min-height: 1px; 110 | -gtk-icon-source: none; // defeats the ugly default handle decoration 111 | border-style: none; // just to be sure 112 | background-color: transparent; 113 | // workaround, using background istead of a border since the border will get rendered twice (?) 114 | background-image: image(gtk("@borders")); 115 | background-size: 1px 1px; 116 | 117 | //&:selected { background-image: image($selected_bg_color); } // FIXME is this needed? 118 | 119 | &:backdrop { 120 | background-image: image(gtk("@unfocused_borders")); 121 | } 122 | 123 | &.wide { 124 | min-width: 5px; 125 | min-height: 5px; 126 | background-color: gtk("@theme_bg_color"); 127 | background-image: image(gtk("@borders")), 128 | image(gtk("@borders")); 129 | background-size: 1px 1px, 1px 1px; 130 | 131 | &:backdrop { 132 | background-color: gtk("@theme_unfocused_bg_color"); 133 | background-image: image(gtk("@unfocused_borders")), 134 | image(gtk("@unfocused_borders")); 135 | } 136 | } 137 | } 138 | 139 | &.horizontal > separator { 140 | background-repeat: repeat-y; 141 | 142 | &:dir(ltr) { 143 | margin: 0 -8px 0 0; 144 | padding: 0 8px 0 0; 145 | background-position: left; 146 | } 147 | &:dir(rtl) { 148 | margin: 0 0 0 -8px; 149 | padding: 0 0 0 8px; 150 | background-position: right; 151 | } 152 | 153 | &.wide { 154 | margin: 0; 155 | padding: 0; 156 | background-repeat: repeat-y, repeat-y; 157 | background-position: left, right; 158 | } 159 | } 160 | 161 | &.vertical > separator { 162 | margin: 0 0 -8px 0; 163 | padding: 0 0 8px 0; 164 | background-repeat: repeat-x; 165 | background-position: top; 166 | 167 | &.wide { 168 | margin: 0; 169 | padding: 0; 170 | background-repeat: repeat-x, repeat-x; 171 | background-position: bottom, top; 172 | } 173 | } 174 | } 175 | 176 | /********************* 177 | * Spinner Animation * 178 | *********************/ 179 | 180 | @keyframes spin { 181 | to { 182 | -gtk-icon-transform: rotate(1turn); 183 | } 184 | } 185 | 186 | spinner { 187 | background-image: none; 188 | opacity: 0; // non spinning spinner makes no sense 189 | -gtk-icon-source: -gtk-icontheme( 190 | "process-working-symbolic" 191 | ); 192 | &:checked { 193 | opacity: 1; 194 | animation: spin 1s linear infinite; 195 | &:disabled { 196 | opacity: 0.5; 197 | } 198 | } 199 | } 200 | -------------------------------------------------------------------------------- /src/gtk3/widgets/_overshoot.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | scrolledwindow { 4 | overshoot, 5 | undershoot { 6 | background: none; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/gtk3/widgets/_pathbar.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /************ 4 | * Pathbars * 5 | ************/ 6 | .path-bar { 7 | background-color: gtk("@theme_bg_color"); 8 | border-bottom: 1px solid gtk("@borders"); 9 | } 10 | 11 | .path-bar button { 12 | @include neobutton(normal); 13 | padding: 4px 8px; 14 | color: gtk("@theme_fg_color"); 15 | &:hover { 16 | border-color: gtk("@theme_button_decoration_hover"); 17 | } 18 | &:active, 19 | &:checked { 20 | background-color: gtk("@borders"); 21 | font-weight: normal; 22 | } 23 | &.text-button, 24 | &.image-button, 25 | & { 26 | padding-left: 4px; 27 | padding-right: 4px; 28 | } 29 | 30 | &.text-button.image-button label { 31 | padding-left: 0; 32 | padding-right: 0; 33 | } 34 | 35 | &.text-button.image-button, 36 | & { 37 | label:last-child { 38 | padding-right: 8px; 39 | } 40 | label:first-child { 41 | padding-left: 8px; 42 | } 43 | } 44 | 45 | image { 46 | padding-left: 4px; 47 | padding-right: 4px; 48 | } 49 | 50 | &.slider-button { 51 | padding-left: 0; 52 | padding-right: 0; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/gtk3/widgets/_progressbar.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /***************** 4 | * Progress bars * 5 | *****************/ 6 | progressbar { 7 | // sizing 8 | &.horizontal { 9 | trough, 10 | progress { 11 | min-height: 4px; 12 | } 13 | } 14 | 15 | &.vertical { 16 | trough, 17 | progress { 18 | min-width: 4px; 19 | } 20 | } 21 | 22 | // FIXME: insensitive state missing and some other state should be set probably 23 | font-size: smaller; 24 | color: gtkalpha( 25 | gtk("@theme_button_foreground_normal"), 26 | 0.3 27 | ); 28 | 29 | trough { 30 | border: 1px solid; 31 | border-radius: $r; 32 | background: gtkoverlay( 33 | gtk("@theme_bg_color"), 34 | gtkalpha(gtk("@theme_button_foreground_normal"), 0.5*0.2) 35 | ); 36 | 37 | border-color: gtkalpha( 38 | gtk("@theme_button_foreground_normal"), 39 | 0.2 40 | ); 41 | } 42 | 43 | progress { 44 | border: 1px solid; 45 | margin: -1px; 46 | border-radius: $r; 47 | box-shadow: none; //needed for clipping 48 | background: gtkoverlay( 49 | gtk("@theme_bg_color"), 50 | gtkalpha(gtk("@theme_button_decoration_hover"), 0.5) 51 | ); 52 | 53 | border: 1px solid gtk("@theme_button_decoration_hover"); 54 | } 55 | 56 | &:backdrop progress { 57 | background: gtkoverlay( 58 | gtk("@theme_bg_color"), 59 | gtkalpha(gtk("@theme_unfocused_selected_bg_color"), 0.5) 60 | ); 61 | 62 | border-color: gtk( 63 | "@theme_unfocused_selected_bg_color" 64 | ); 65 | } // states not passed here as well 66 | 67 | &.osd { 68 | // progressbar.osd used for epiphany page loading progress 69 | background-color: transparent; 70 | } 71 | } 72 | 73 | treeview.view { 74 | &.progressbar { 75 | border: 0px solid transparent; 76 | border-radius: $r; 77 | background-color: gtk("@theme_selected_bg_color"); 78 | color: gtk("@theme_selected_fg_color"); 79 | background-image: none; 80 | &:selected { 81 | &:focus, 82 | & { 83 | background-color: gtkalpha( 84 | gtk("@theme_selected_bg_color"), 85 | 0.25 86 | ); 87 | } 88 | } 89 | } 90 | &.trough { 91 | background-color: $trough_color; 92 | &:selected { 93 | &:focus, 94 | & { 95 | background-color: gtkalpha( 96 | gtk("@theme_selected_fg_color"), 97 | 0.3 98 | ); 99 | } 100 | } 101 | } 102 | } 103 | 104 | /************* 105 | * Level Bar * 106 | *************/ 107 | @mixin levelbar($color) { 108 | border: 1px solid $color; 109 | background: gtkoverlay( 110 | gtk("@theme_bg_color"), 111 | gtkalpha($color, 0.5) 112 | ); 113 | box-shadow: none; 114 | border-radius: $r; 115 | } 116 | 117 | levelbar { 118 | block { 119 | min-height: 6px; 120 | } 121 | 122 | &.vertical block { 123 | min-width: 6px; 124 | min-height: 32px; 125 | } 126 | 127 | trough { 128 | border: 1px solid; 129 | padding: 2px; 130 | border-radius: 3px; 131 | @include entry(normal); 132 | 133 | &:backdrop { 134 | @include entry(backdrop); 135 | } 136 | } 137 | 138 | &.horizontal.discrete block { 139 | margin: 0 1px; 140 | min-width: 32px; 141 | } 142 | 143 | &.vertical.discrete block { 144 | margin: 1px 0; 145 | } 146 | 147 | block { 148 | &:not(.empty) { 149 | @include levelbar(gtk("@theme_button_decoration_hover")); 150 | 151 | &:backdrop { 152 | @include levelbar(gtk("@theme_unfocused_selected_bg_color")); 153 | } 154 | } 155 | 156 | &.low { 157 | @include levelbar(gtk("@warning_color")); 158 | &:backdrop { 159 | @include levelbar(gtk("@warning_color_backdrop")); 160 | } 161 | } 162 | 163 | &.full, &.high { 164 | @include levelbar(gtk("@success_color")); 165 | 166 | &:backdrop { 167 | @include levelbar(gtk("@success_color_backdrop")); 168 | } 169 | } 170 | 171 | &.empty { 172 | @include levelbar(gtkalpha(gtk("@theme_button_foreground_normal"), 0.2)); 173 | } 174 | } 175 | } 176 | -------------------------------------------------------------------------------- /src/gtk3/widgets/_scale.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /************ 4 | * GtkScale * 5 | ************/ 6 | scale { 7 | padding: 12px; 8 | &.fine-tune { 9 | &.trough { 10 | margin: 8px; 11 | border-radius: $r; 12 | } 13 | } 14 | 15 | slider { 16 | min-width: 16px; 17 | min-height: 16px; 18 | border: 1px solid gtkmix(gtk("@theme_bg_color"),gtk("@theme_button_foreground_normal"), 0.4); 19 | border-radius: 50%; 20 | box-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.125); 21 | 22 | background: gtk("@theme_button_background_normal"); 23 | margin: -9px; 24 | 25 | &:hover { 26 | border-color: gtk("@theme_button_decoration_hover"); 27 | border-radius: 50%; // needed for double marks scales 28 | 29 | &:backdrop { 30 | border-color: gtk( 31 | "@theme_button_decoration_hover_insensitive" 32 | ); 33 | } 34 | } 35 | 36 | &:focus { 37 | border-color: gtk("@theme_button_decoration_focus"); 38 | border-radius: 50%; // needed for double marks scales 39 | 40 | &:backdrop { 41 | border-color: gtk( 42 | "@theme_button_decoration_focus_insensitive" 43 | ); 44 | } 45 | } 46 | 47 | &:disabled { 48 | border-style: solid; // needed for double marks scales or they'll get 49 | border-radius: 50%; // overridden 50 | background-color: gtk("@theme_button_background_insensitive"); 51 | opacity: 1; 52 | border-color: gtk("@insensitive_borders"); 53 | &:backdrop { 54 | background-color: gtkalpha( 55 | gtk( 56 | "@theme_button_background_backdrop_insensitive" 57 | ), 58 | 100 59 | ); 60 | border-color: gtk("@unfocused_insensitive_borders"); 61 | } 62 | } 63 | &:active { 64 | box-shadow: none; 65 | background-color: gtk("@theme_button_background_normal"); 66 | &:backdrop { 67 | background-color: gtk( 68 | "@theme_button_background_normal" 69 | ); 70 | border-color: gtk( 71 | "@theme_button_decoration_focus_backdrop" 72 | ); 73 | } 74 | } 75 | &:backdrop { 76 | background-color: gtk( 77 | "@theme_button_background_backdrop" 78 | ); 79 | border-color: gtk("@unfocused_borders"); 80 | } 81 | } 82 | 83 | trough { 84 | min-width: 4px; 85 | min-height: 4px; 86 | border: 1px solid; 87 | border-radius: $r; 88 | 89 | background: gtkoverlay( 90 | gtk("@theme_bg_color"), 91 | gtkalpha(gtk("@theme_button_foreground_normal"), 0.5*0.2) 92 | ); 93 | 94 | border-color: gtkalpha( 95 | gtk("@theme_button_foreground_normal"), 96 | 0.2 97 | ); 98 | 99 | &:disabled, &.vertical:disabled { 100 | background: gtkoverlayalpha( 101 | gtk("@theme_bg_color"), 102 | gtkalpha(gtk("@theme_button_foreground_normal"), 0.5*0.2), 103 | 0.5 104 | ); 105 | border-color: gtkalpha( 106 | gtk("@theme_button_foreground_normal"), 107 | 0.2 * 0.5 108 | ); 109 | } 110 | } 111 | 112 | highlight { 113 | margin: -1px; 114 | border-radius: $r; 115 | background: gtkoverlay( 116 | gtk("@theme_bg_color"), 117 | gtkalpha(gtk("@theme_button_decoration_hover"), 0.5) 118 | ); 119 | 120 | border: 1px solid gtk("@theme_button_decoration_hover"); 121 | 122 | &:disabled { 123 | background: none; 124 | border-color: transparent; 125 | } 126 | 127 | &:backdrop { 128 | background: gtkoverlay( 129 | gtk("@theme_bg_color"), 130 | gtkalpha(gtk("@theme_unfocused_selected_bg_color"), 0.5) 131 | ); 132 | 133 | border-color: gtk( 134 | "@theme_unfocused_selected_bg_color" 135 | ); 136 | 137 | &:disabled { 138 | background: none; 139 | border-color: transparent; 140 | } 141 | } 142 | } 143 | 144 | $_marks_length: 8px; 145 | $_marks_distance: 1px; 146 | 147 | marks { 148 | color: gtkalpha( 149 | gtk("@theme_button_foreground_normal"), 150 | 0.2 151 | ); 152 | font-feature-settings: "tnum"; 153 | } 154 | 155 | label { 156 | color: gtk("@theme_button_foreground_normal") 157 | } 158 | 159 | @each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom), 160 | (horizontal, bottom, bottom, top), 161 | (vertical, top, left, right), 162 | (vertical, bottom, right, left) { 163 | &.#{$scale_orient} marks { 164 | &.#{$marks_class} { 165 | margin-#{$marks_margin}: $_marks_distance; 166 | margin-#{$marks_pos}: -($_marks_distance + $_marks_length); 167 | } 168 | } 169 | 170 | &.#{$scale_orient}.fine-tune marks { 171 | &.#{$marks_class} { 172 | margin-#{$marks_margin}: $_marks_distance; 173 | margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 3px); 174 | } 175 | } 176 | } 177 | 178 | &.horizontal { 179 | indicator { 180 | min-height: $_marks_length; 181 | min-width: 1px; 182 | } 183 | 184 | &.fine-tune indicator { min-height: ($_marks_length - 3px); } 185 | } 186 | 187 | &.vertical { 188 | indicator { 189 | min-height: 1px; 190 | min-width: $_marks_length; 191 | } 192 | 193 | &.fine-tune indicator { min-width: ($_marks_length - 3px); } 194 | } 195 | } 196 | -------------------------------------------------------------------------------- /src/gtk3/widgets/_scrollbar.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /************** 4 | * Scrollbars * 5 | **************/ 6 | 7 | scrollbar { 8 | -GtkScrollbar-has-backward-stepper: false; 9 | -GtkScrollbar-has-forward-stepper: false; 10 | 11 | background-color: gtk("@theme_bg_color"); 12 | border-width: 0px; 13 | border-color: gtk("@theme_bg_color"); 14 | 15 | // Vertical padding (for vertical scroll bar, obviously) is done here for proper distance to the window border, 16 | // horizontal padding is done on the trough below to ensure its hit area touches the window side. 17 | padding: 5px 0px; 18 | 19 | &.vertical { 20 | 21 | &:dir(rtl) { 22 | border-right: 1px solid gtk("@borders"); 23 | } 24 | 25 | &:dir(ltr) { 26 | border-left: 1px solid gtk("@borders"); 27 | } 28 | 29 | &.right { 30 | &:dir(rtl) { 31 | border-right: none; 32 | } 33 | border-left: 1px solid gtk("@borders"); 34 | } 35 | 36 | &.left { 37 | &:dir(ltr) { 38 | border-left: none; 39 | } 40 | border-right: 1px solid gtk("@borders"); 41 | } 42 | } 43 | 44 | &.horizontal { 45 | border-top: 1px solid gtk("@borders"); 46 | 47 | padding: 0px 5px; 48 | 49 | &.bottom { 50 | border-top: 1px solid gtk("@borders"); 51 | } 52 | 53 | &.top { 54 | border-top: none; 55 | border-bottom: 1px solid gtk("@borders"); 56 | } 57 | } 58 | 59 | button { 60 | min-width: 14px; 61 | min-height: 14px; 62 | margin: 0px; 63 | padding: 0px 0px; 64 | border: none; 65 | border-radius: 0px; 66 | background-image: none; 67 | background-color: transparent; 68 | color: transparent; 69 | box-shadow: none; 70 | &:hover { 71 | border: none; 72 | background-image: none; 73 | background-color: gtk("@theme_bg_color"); 74 | color: transparent; 75 | } 76 | &:active, 77 | &:active:hover { 78 | border: none; 79 | background-image: none; 80 | background-color: gtk("@theme_bg_color"); 81 | color: transparent; 82 | } 83 | &:disabled { 84 | border: none; 85 | background-color: gtk("@theme_bg_color"); 86 | background-image: none; 87 | color: transparent; 88 | } 89 | } 90 | 91 | // Overlay Scrollbars 92 | &.dragging, // if this isn't set, the scrollbars don't update their size correctly 93 | &.hovering { 94 | opacity: 0.991; 95 | } // probably a gtk bug 96 | &.overlay-indicator:not(.dragging):not(.hovering) { 97 | opacity: 0.999; 98 | } // 99 | 100 | &.overlay-indicator:not(.dragging):not(.hovering) { 101 | -GtkScrollbar-has-backward-stepper: false; 102 | -GtkScrollbar-has-forward-stepper: false; 103 | } 104 | 105 | &.overlay-indicator { 106 | border: none; 107 | 108 | &.vertical { 109 | border:none; 110 | } 111 | 112 | &.horizontal { 113 | border:none; 114 | } 115 | 116 | background: none; 117 | 118 | slider { 119 | background-image: gtkoverlayalpha(gtk("@theme_bg_color"), gtkalpha(gtk("@theme_button_foreground_normal"), 0.5*0.5*0.7), 0.75); 120 | } 121 | } 122 | 123 | trough { 124 | // Complements the padding on the scrollbar itself. 125 | margin: 0px 5px; 126 | min-width: 6px; 127 | min-height: 14px; 128 | background-color: transparent; 129 | } 130 | 131 | &:hover { 132 | trough { 133 | slider { 134 | background-image: gtkoverlay(gtk("@theme_bg_color"), gtkalpha(gtk("@theme_button_foreground_normal"), 0.5*0.5)); 135 | box-shadow: 0 0 0 1px gtkalpha(gtk("@theme_button_foreground_normal"), 0.5*0.9) inset; 136 | 137 | &:hover { 138 | background-image: gtkoverlay(gtk("@theme_bg_color"), gtkalpha(gtk("@theme_button_decoration_hover"), 0.5)); 139 | box-shadow: 0 0 0 1px gtkalpha(gtk("@theme_button_decoration_hover"), 0.9) inset; 140 | } 141 | } 142 | } 143 | } 144 | 145 | &.horizontal trough { 146 | margin: 5px 0px; 147 | min-width: 14px; 148 | min-height: 6px; 149 | } 150 | 151 | *:focus ~ &, 152 | & ~ *:focus{ 153 | 154 | &:hover { 155 | slider { 156 | background-image: gtkoverlay(gtk("@theme_bg_color"), gtkalpha(gtk("@theme_button_decoration_hover"), 0.5)); 157 | box-shadow: 0 0 0 1px gtkalpha(gtk("@theme_button_decoration_hover"), 0.9) inset; 158 | } 159 | } 160 | 161 | &.overlay-indicator { 162 | slider { 163 | background-image: gtkoverlayalpha(gtk("@theme_bg_color"), gtkalpha(gtk("@theme_button_decoration_focus"), 0.5*0.7), 0.75); 164 | } 165 | 166 | &:hover { 167 | slider { 168 | background-image: gtkoverlay(gtk("@theme_bg_color"), gtkalpha(gtk("@theme_button_decoration_hover"), 0.5)); 169 | box-shadow: 0 0 0 1px gtkalpha(gtk("@theme_button_decoration_hover"), 0.9) inset; 170 | } 171 | } 172 | } 173 | } 174 | 175 | slider { 176 | transition-duration: 0.1s; 177 | min-width: 6px; 178 | min-height: 30px; 179 | border-radius: 15px; 180 | background-clip: padding-box; 181 | background-image: gtkoverlay(gtk("@theme_bg_color"), gtkalpha(gtk("@theme_button_foreground_normal"), 0.5*0.5*0.7)); 182 | box-shadow: 0 0 0 1px gtkalpha(gtk("@theme_button_foreground_normal"), 0.5*0.7*0.9) inset; 183 | } 184 | 185 | // GTK WebKit scrollbar paint code cannot deal with negative margins properly, 186 | // causing the scrollbar slider turn invisible. 187 | :not(webkitwebview) & slider { 188 | margin: -9px; 189 | margin-bottom: -6px; 190 | margin-top: -6px; 191 | // To keep the ability to drag the slider from the edge of the screen 192 | border: 5px solid transparent; 193 | } 194 | 195 | &.horizontal slider { 196 | transition-duration: 0.1s; 197 | min-width: 30px; 198 | min-height: 6px; 199 | } 200 | 201 | :not(webkitwebview) &.horizontal slider { 202 | margin: -9px; 203 | margin-left: -6px; 204 | margin-right: -6px; 205 | } 206 | } 207 | -------------------------------------------------------------------------------- /src/gtk3/widgets/_sidebar.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /*********** 4 | * Sidebar * 5 | ***********/ 6 | 7 | @mixin selected-item-highlight { 8 | @if $new-highlight { 9 | background-color: gtk("@theme_selected_bg_color"); 10 | color: gtk("@theme_button_foreground_active"); 11 | border-right: 3px 12 | solid 13 | gtk("@theme_button_decoration_focus"); 14 | border-top: 0; 15 | border-bottom: 0; 16 | border-left: 0; 17 | border-radius: 0px; 18 | } 19 | } 20 | @mixin selected-item-highlight-rtl { 21 | @if $new-highlight { 22 | background-color: gtk("@theme_selected_bg_color"); 23 | color: gtk("@theme_button_foreground_active"); 24 | border-left: 3px 25 | solid 26 | gtk("@theme_button_decoration_focus"); 27 | border-top: 0; 28 | border-bottom: 0; 29 | border-right: 0; 30 | border-radius: 0px; 31 | } 32 | } 33 | 34 | .sidebar { 35 | border-radius: 0px; 36 | border-style: none; 37 | background-color: gtk("@theme_base_color"); 38 | 39 | &:selected { 40 | @extend %selected_items; 41 | } 42 | 43 | &:not(separator) { 44 | &:dir(ltr), 45 | &.left, 46 | &.left:dir(rtl) { 47 | border-right: 1px solid $ligh_border_color; 48 | border-left: none; 49 | } 50 | 51 | &:dir(rtl), 52 | &.right { 53 | border-left: 1px solid $ligh_border_color; 54 | border-right: none; 55 | } 56 | } 57 | 58 | .sidebar-header > separator { 59 | background-color: $ligh_border_color; 60 | } 61 | 62 | row { 63 | &:hover { 64 | } 65 | 66 | &.activatable { 67 | border: 0; 68 | &:dir(ltr) { 69 | border-right: 3px solid transparent; 70 | } 71 | &:dir(rtl) { 72 | border-left: 3px solid transparent; 73 | } 74 | 75 | &.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411 76 | 77 | &:hover:dir(ltr) { 78 | @include selected-item-highlight(); 79 | } 80 | &:hover:dir(rtl) { 81 | @include selected-item-highlight-rtl(); 82 | } 83 | 84 | &:active:dir(ltr) { 85 | @include selected-item-highlight(); 86 | } 87 | &:active:dir(rtl) { 88 | @include selected-item-highlight-rtl(); 89 | } 90 | 91 | &:selected { 92 | &:dir(ltr) { 93 | @include selected-item-highlight(); 94 | } 95 | &:dir(rtl) { 96 | @include selected-item-highlight-rtl(); 97 | } 98 | 99 | &:active { 100 | &:dir(ltr) { 101 | @include selected-item-highlight(); 102 | } 103 | &:dir(rtl) { 104 | @include selected-item-highlight-rtl(); 105 | } 106 | } 107 | 108 | &.has-open-popup, 109 | &:hover { 110 | &:dir(ltr) { 111 | @include selected-item-highlight(); 112 | } 113 | &:dir(rtl) { 114 | @include selected-item-highlight-rtl(); 115 | } 116 | } 117 | 118 | &:backdrop { 119 | background-color: gtk( 120 | "@theme_unfocused_selected_bg_color_alt" 121 | ); 122 | } 123 | } 124 | } 125 | 126 | &:selected { 127 | @extend %selected_items; 128 | } 129 | } 130 | paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }} 131 | } 132 | separator.sidebar { 133 | background-color: gtk("@borders"); 134 | } 135 | 136 | // Places sidebar is a special case, since the view here have to look like chrome not content, so we override text color 137 | placessidebar { 138 | > viewport.frame { 139 | border-style: none; 140 | } 141 | 142 | row { 143 | // Needs overriding of the GtkListBoxRow padding 144 | min-height: 36px; 145 | padding: 0px; 146 | 147 | // Using margins/padding directly in the SidebarRow 148 | // will make the animation of the new bookmark row jump 149 | > revealer { 150 | padding: 0 14px; 151 | } 152 | 153 | &:selected { 154 | color: gtk("@theme_selected_fg_color"); 155 | } 156 | 157 | &:disabled { 158 | color: gtk("@insensitive_fg_color"); 159 | } 160 | 161 | &:backdrop { 162 | color: gtk("@theme_unfocused_fg_color"); 163 | 164 | &:selected { 165 | color: gtk( 166 | "@theme_unfocused_selected_bg_color_alt" 167 | ); 168 | } 169 | 170 | &:disabled { 171 | color: gtk("@insensitive_unfocused_fg_color"); 172 | } 173 | } 174 | 175 | image.sidebar-icon { 176 | &:dir(ltr) { 177 | padding-right: 8px; 178 | } 179 | &:dir(rtl) { 180 | padding-left: 8px; 181 | } 182 | } 183 | 184 | label.sidebar-label { 185 | &:dir(ltr) { 186 | padding-right: 2px; 187 | } 188 | &:dir(rtl) { 189 | padding-left: 2px; 190 | } 191 | } 192 | 193 | @at-root button.sidebar-button { 194 | @include neobutton(toolbutton); 195 | 196 | min-height: 26px; 197 | min-width: 26px; 198 | margin-top: 3px; 199 | margin-bottom: 3px; 200 | padding: 0; 201 | } 202 | 203 | // in the sidebar case it makes no sense to click the selected row 204 | &:selected:active { 205 | box-shadow: none; 206 | } 207 | 208 | &.sidebar-placeholder-row { 209 | padding: 0 8px; 210 | min-height: 2px; 211 | background-image: none; 212 | background-clip: content-box; 213 | } 214 | 215 | &.sidebar-new-bookmark-row { 216 | color: gtk("@theme_selected_bg_color"); 217 | } 218 | 219 | // &:drop(active):not(:disabled) { 220 | // color: $drop_target_color; 221 | // box-shadow: inset 0 1px $drop_target_color, 222 | // inset 0 -1px $drop_target_color; 223 | // 224 | // &:selected { 225 | // color: $selected_fg_color; 226 | // background-color: $drop_target_color; 227 | // } 228 | // } 229 | } 230 | } 231 | 232 | placesview { 233 | .server-list-button > image { 234 | -gtk-icon-transform: rotate(0turn); 235 | } 236 | 237 | .server-list-button:checked > image { 238 | -gtk-icon-transform: rotate(-0.5turn); 239 | } 240 | 241 | row.activatable:hover { 242 | background-color: transparent; 243 | } 244 | 245 | // this selects the "connect to server" label 246 | > actionbar > revealer > box > label { 247 | padding-left: 8px; 248 | padding-right: 8px; 249 | } 250 | } 251 | 252 | stacksidebar { 253 | &.sidebar { 254 | row { 255 | padding: 10px 4px; 256 | > label { 257 | padding-left: 6px; 258 | padding-right: 6px; 259 | } 260 | &.needs-attention > .label { 261 | @extend %needs_attention; 262 | background-size: 6px 6px, 0 0; 263 | } 264 | } 265 | } 266 | } 267 | -------------------------------------------------------------------------------- /src/gtk3/widgets/_spinbutton.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /***************** 4 | * GtkSpinButton * 5 | *****************/ 6 | spinbutton { 7 | &:not(.vertical) { 8 | // in this horizontal configuration, the whole spinbutton 9 | // behaves as the entry, so we extend the entry styling 10 | // and nuke the style on the internal entry 11 | @extend %entry; 12 | 13 | padding: 0; 14 | 15 | entry { 16 | min-width: 28px; 17 | // reset all the other props since the spinbutton node is styled here 18 | margin: 0; 19 | background: none; 20 | background-color: transparent; 21 | border: none; 22 | border-radius: 0; 23 | box-shadow: none; 24 | 25 | &:backdrop:disabled { 26 | background-color: transparent; 27 | } 28 | } 29 | 30 | button { 31 | min-height: 16px; 32 | margin: 0; 33 | padding-bottom: 0; 34 | padding-top: 0; 35 | color: gtk("@theme_text_color"); 36 | background-image: none; 37 | background-color: transparent; 38 | border-style: none; 39 | box-shadow: none; 40 | 41 | &:hover { 42 | color: gtk("@theme_view_hover_decoration_color"); 43 | 44 | // disable button's hover background override 45 | &:not(:checked):not(:active) { 46 | background: none; 47 | } 48 | } 49 | 50 | &:disabled { 51 | color: gtk("@insensitive_base_fg_color"); 52 | } 53 | 54 | &:active { 55 | color: gtk("@theme_view_active_decoration_color"); 56 | box-shadow: none; 57 | } 58 | 59 | &:backdrop { 60 | color: gtk("@theme_unfocused_text_color"); 61 | background-color: transparent; 62 | } 63 | 64 | &:backdrop:disabled { 65 | color: gtk("@theme_unfocused_view_text_color"); 66 | background-color: transparent; 67 | border-style: none; // It is needed or it gets overridden 68 | } 69 | 70 | &:dir(ltr):last-child { 71 | border-radius: 0 3px 3px 0; 72 | } 73 | 74 | &:dir(rtl):first-child { 75 | border-radius: 3px 0 0 3px; 76 | } 77 | } 78 | } 79 | 80 | // Vertical 81 | &.vertical { 82 | // in the vertical configuration, we treat the spinbutton 83 | // as a box, and tweak the style of the entry in the middle 84 | // so that it's linked 85 | 86 | // FIXME: this should not be set at all, but otherwise it gets the wrong 87 | // color 88 | &:disabled { 89 | color: gtk("@insensitive_base_fg_color"); 90 | } 91 | 92 | &:backdrop:disabled { 93 | color: gtk("@theme_unfocused_view_text_color"); 94 | } 95 | 96 | &:drop(active) { 97 | border-color: transparent; 98 | box-shadow: none; 99 | } 100 | 101 | entry { 102 | margin: 0px; 103 | min-height: 26px; 104 | min-width: 26px; 105 | border-style: none solid none solid; 106 | border-color: gtk("@borders"); 107 | padding: 0; 108 | border-radius: 0; 109 | &:disabled { 110 | color: gtk("@insensitive_base_fg_color"); 111 | background-color: gtk("@insensitive_base_color"); 112 | border-color: gtk("@insensitive_borders"); 113 | } 114 | &:backdrop:disabled { 115 | color: gtk("@theme_unfocused_view_text_color"); 116 | background-color: gtk( 117 | "@theme_unfocused_view_bg_color" 118 | ); 119 | border-color: gtk("@unfocused_insensitive_borders"); 120 | } 121 | } 122 | 123 | button { 124 | min-height: 26px; 125 | min-width: 26px; 126 | padding: 0; 127 | box-shadow: none; 128 | background-image: none; 129 | background-color: gtk("@theme_base_color"); 130 | color: gtk("@theme_text_color"); 131 | border-color: gtk("@borders"); 132 | &:hover { 133 | color: gtk("@theme_view_hover_decoration_color"); 134 | 135 | // disable button's hover background override 136 | &:not(:checked):not(:active) { 137 | background-color: gtk("@theme_base_color"); 138 | } 139 | } 140 | &:active { 141 | color: gtk("@theme_view_active_decoration_color"); 142 | } 143 | &:disabled { 144 | color: gtk("@insensitive_base_fg_color"); 145 | background-color: gtk("@insensitive_base_color"); 146 | border-color: gtk("@insensitive_borders"); 147 | } 148 | &:backdrop:disabled { 149 | color: gtk("@theme_unfocused_view_text_color"); 150 | background-color: gtk( 151 | "@theme_unfocused_view_bg_color" 152 | ); 153 | border-color: gtk("@unfocused_insensitive_borders"); 154 | } 155 | 156 | &.up { 157 | @extend %top_button; 158 | } 159 | 160 | &.down { 161 | @extend %bottom_button; 162 | } 163 | } 164 | 165 | %top_button { 166 | border-radius: 3px 3px 0 0; 167 | border-style: solid solid none solid; 168 | } 169 | 170 | %bottom_button { 171 | border-radius: 0 0 3px 3px; 172 | border-style: none solid solid solid; 173 | } 174 | } 175 | 176 | // Misc 177 | treeview &:not(.vertical) { 178 | min-height: 0; 179 | border-style: none; 180 | border-radius: 0; 181 | 182 | entry { 183 | min-height: 0; 184 | padding: 1px 2px; 185 | } 186 | } 187 | } 188 | -------------------------------------------------------------------------------- /src/gtk3/widgets/_switch.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /********** 4 | * Switch * 5 | **********/ 6 | 7 | $switch-height: 24px; 8 | 9 | switch { 10 | margin: 2px; 11 | font-weight: bold; 12 | font-size: smaller; 13 | border: 1px solid; 14 | border-radius: 12px; 15 | color: transparent; 16 | background-color: gtkalpha( 17 | gtk("@theme_button_foreground_normal"), 18 | 0.05 19 | ); 20 | border-color: gtkalpha( 21 | gtk("@theme_button_foreground_normal"), 22 | 0.222 23 | ); 24 | text-shadow: none; 25 | 26 | &:disabled { 27 | background-color: gtkalpha( 28 | gtk("@theme_button_foreground_normal"), 29 | 0.03 30 | ); 31 | } 32 | 33 | &:checked { 34 | background: gtkalpha( 35 | gtk("@theme_button_decoration_hover"), 36 | 0.333 37 | ); 38 | border-color: gtk("@theme_button_decoration_hover"); 39 | 40 | &:disabled { 41 | background: gtkalpha( 42 | gtk("@theme_button_decoration_hover"), 43 | 0.222 44 | ); 45 | border-color: gtkalpha( 46 | gtk("@theme_button_decoration_hover"), 47 | 0.777 48 | ); 49 | } 50 | } 51 | 52 | &:dir(ltr) { 53 | &:checked slider { 54 | margin-left: 1px; 55 | } 56 | &:not(:checked) slider { 57 | margin-right: 1px; 58 | } 59 | } 60 | 61 | slider { 62 | min-width: $switch-height; 63 | min-height: $switch-height; 64 | margin: -($switch-height / 6); 65 | border: 1px solid; 66 | border-radius: $switch-height / 2; 67 | 68 | box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.125); 69 | border-color: gtk("@borders"); 70 | @include bg-gradient( 71 | gtk("@theme_button_background_normal") 72 | ); 73 | } 74 | 75 | &:hover slider { 76 | border-color: gtk("@theme_button_decoration_hover"); 77 | } 78 | 79 | &:focus slider { 80 | border-color: gtk("@theme_button_decoration_focus"); 81 | } 82 | 83 | &:disabled slider { 84 | box-shadow: none; 85 | color: gtk("@theme_button_foreground_insensitive"); 86 | border-color: gtk("@insensitive_borders"); 87 | background: gtk("@theme_button_background_insensitive"); 88 | 89 | &:active, 90 | &:checked { 91 | color: gtk( 92 | "@theme_button_foreground_active_insensitive" 93 | ); 94 | } 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /src/gtk3/widgets/_toolbar.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /************ 4 | * Toolbars * 5 | ************/ 6 | %toolbar { 7 | -GtkWidget-window-dragging: true; 8 | padding: 4px; 9 | background-color: gtk("@theme_bg_color"); 10 | } 11 | toolbar { 12 | @extend %toolbar; 13 | padding: 4px 3px 3px 4px; 14 | &:backdrop { 15 | background-color: gtk("@theme_unfocused_bg_color"); 16 | box-shadow: none; 17 | } 18 | button { 19 | margin: 2px; 20 | padding: 3px; 21 | &.image-button, 22 | &.text-button.image-button { 23 | padding: 3px; 24 | } 25 | } 26 | separator { 27 | margin-left: 3px; 28 | margin-right: 3px; 29 | } 30 | entry { 31 | margin: 3px; 32 | } 33 | // on OSD 34 | .osd & { 35 | background-color: transparent; 36 | } 37 | &.osd { 38 | padding: 13px; 39 | border: none; 40 | border-radius: $r; 41 | background-color: gtk("@theme_bg_color"); 42 | &:backdrop { 43 | border-color: gtk("@unfocused_borders"); 44 | background-color: gtk("@theme_unfocused_bg_color"); 45 | box-shadow: none; 46 | } 47 | &.left, 48 | &.right, 49 | &.top, 50 | &.bottom { 51 | border-radius: 0; 52 | } // positional classes for `attached` osd toolbars 53 | } 54 | } 55 | 56 | //searchbar, location-bar & inline-toolbar 57 | .inline-toolbar { 58 | @extend %toolbar; 59 | @extend %inset-bar; 60 | border-width: 0px 0px 1px 0px; 61 | padding: 3px; 62 | border-radius: 0; 63 | } 64 | searchbar > revealer > box, 65 | .location-bar { 66 | @extend %toolbar; 67 | @extend %inset-bar; 68 | border-width: 0px 0px 1px 0px; 69 | padding: 3px; 70 | } 71 | 72 | %inset-bar { 73 | border-style: solid; 74 | border-color: gtk("@borders"); 75 | text-shadow: none; 76 | background-color: gtk("@theme_bg_color"); 77 | } 78 | -------------------------------------------------------------------------------- /src/gtk3/widgets/_tooltips.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /************ 4 | * Tooltips * 5 | ************/ 6 | 7 | tooltip { 8 | &.background { 9 | // background-color needs to be set this way otherwise it gets drawn twice 10 | // see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details. 11 | background-color: gtk("@tooltip_background"); 12 | background-clip: padding-box; 13 | } 14 | 15 | color: gtk("@tooltip_text"); 16 | padding: 4px; /* not working */ 17 | border-radius: $r; 18 | box-shadow: none; // otherwise it gets inherited by windowframe.csd 19 | text-shadow: none; 20 | border: 1px solid gtk("@tooltip_border"); 21 | &.window-frame.csd { 22 | background-color: transparent; 23 | box-shadow: none; 24 | } 25 | decoration { 26 | background-color: transparent; 27 | } 28 | } 29 | 30 | tooltip * { 31 | //Yeah this is ugly 32 | padding: 0px; 33 | background-color: transparent; 34 | color: gtk("@tooltip_text"); // just to be sure 35 | } 36 | -------------------------------------------------------------------------------- /src/gtk4/gtk.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | $new-highlight: false; 4 | 5 | @import "global"; 6 | @import "../functions"; 7 | @import "../colors"; 8 | 9 | @import "widgets/base"; 10 | @import "widgets/button"; 11 | @import "widgets/entry"; 12 | @import "widgets/app_notifications"; 13 | @import "widgets/calendar"; 14 | @import "widgets/checkboxes"; 15 | @import "widgets/color_chooser"; 16 | @import "widgets/dialogs"; 17 | @import "widgets/headerbar"; 18 | @import "widgets/infobar"; 19 | @import "widgets/link"; 20 | @import "widgets/lists"; 21 | @import "widgets/menus"; 22 | @import "widgets/misc"; 23 | @import "widgets/notebook"; 24 | @import "widgets/overshoot"; 25 | @import "widgets/pathbar"; 26 | @import "widgets/progressbar"; 27 | @import "widgets/scale"; 28 | @import "widgets/scrollbar"; 29 | @import "widgets/sidebar"; 30 | @import "widgets/spinbutton"; 31 | @import "widgets/switch"; 32 | @import "widgets/toolbar"; 33 | @import "widgets/tooltips"; 34 | @import "widgets/treeview"; 35 | @import "widgets/window_decorations"; 36 | @import "widgets/libhandy"; 37 | @import "widgets/assistant"; 38 | @import "widgets/floating-bar"; 39 | @import "widgets/typography"; 40 | -------------------------------------------------------------------------------- /src/gtk4/widgets/_app_notifications.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /********************* 4 | * App Notifications * 5 | *********************/ 6 | 7 | .app-notification, 8 | .app-notification.frame { 9 | @extend %osd; 10 | padding: 10px; 11 | border-top-width: 0px; 12 | border-radius: 0px 0px 3px 3px; 13 | &:backdrop { 14 | background-image: none; 15 | } 16 | button { 17 | @include neobutton(normal); 18 | &.flat { 19 | @include neobutton(toolbutton); 20 | } 21 | } 22 | border { 23 | border: none; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/gtk4/widgets/_assistant.scss: -------------------------------------------------------------------------------- 1 | assistant { 2 | .sidebar { 3 | background-color: gtk("@theme_base_color"); 4 | color: gtk("@theme_text_color"); 5 | border-top: 1px solid gtk("@borders"); 6 | border-right: 1px solid gtk("@borders"); 7 | 8 | &:backdrop { 9 | background-color: gtk("@theme_unfocused_base_color"); 10 | color: gtk("@theme_unfocused_text_color"); 11 | border-color: gtk("@unfocused_borders"); 12 | } 13 | } 14 | &.csd .sidebar { 15 | border-top-style: none; 16 | } 17 | .sidebar label { 18 | padding: 6px 12px; 19 | } 20 | .sidebar label.highlight { 21 | background-color: gtk("@theme_selected_bg_color"); 22 | color: gtk("@theme_fg_color"); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/gtk4/widgets/_base.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); 4 | 5 | * { 6 | padding: 0; 7 | 8 | outline-width: 0px; 9 | } 10 | 11 | /*************** 12 | * Base States * 13 | ***************/ 14 | 15 | .background { 16 | color: gtk("@theme_fg_color"); 17 | background-color: gtk("@theme_bg_color"); 18 | 19 | &:backdrop { 20 | text-shadow: none; 21 | -gtk-icon-shadow: none; 22 | color: gtk("@theme_unfocused_fg_color"); 23 | background-color: gtk("@theme_unfocused_bg_color"); 24 | } 25 | } 26 | 27 | /* 28 | These wildcard seems unavoidable, need to investigate. 29 | Wildcards are bad and troublesome, use them with care, 30 | or better, just don't. 31 | Everytime a wildcard is used a kitten dies, painfully. 32 | */ 33 | 34 | .gtkstyle-fallback { 35 | background-color: gtk("@theme_bg_color"); 36 | color: gtk("@theme_fg_color"); 37 | &:hover { 38 | background-color: gtkshade("@theme_bg_color", 1.1); 39 | color: gtk("@theme_fg_color"); 40 | } 41 | &:active { 42 | background-color: gtkshade("@theme_bg_color", 0.9); 43 | color: gtk("@theme_fg_color"); 44 | } 45 | &:disabled { 46 | background-color: gtk("@insensitive_fg_color"); 47 | color: gtk("@insensitive_fg_color"); 48 | } 49 | &:selected { 50 | background-color: gtk("@theme_selected_bg_color"); 51 | color: gtk("@theme_selected_fg_color"); 52 | } 53 | } 54 | 55 | %view, 56 | .view { 57 | color: gtk("@theme_text_color"); 58 | background-color: gtk("@theme_base_color"); 59 | 60 | &:backdrop { 61 | color: gtk("@theme_unfocused_text_color"); 62 | background-color: gtk("@theme_unfocused_base_color"); 63 | } 64 | 65 | &:disabled { 66 | color: gtk("@insensitive_base_fg_color"); 67 | } 68 | 69 | &:selected { 70 | &:focus, 71 | & { 72 | border-radius: $r; 73 | @extend %selected_items; 74 | } 75 | } 76 | } 77 | 78 | .view, 79 | textview { 80 | text { 81 | @extend %view; 82 | 83 | selection { 84 | &:focus, 85 | & { 86 | @extend %selected_items; 87 | } 88 | } 89 | } 90 | } 91 | 92 | textview border { 93 | background-color: gtk("@theme_base_color"); 94 | background-image: image( 95 | gtk("@borders") 96 | ); // HACK: the border node just draws background so, 97 | background-repeat: no-repeat; // using a background-image to draw the border 98 | 99 | &:backdrop { 100 | background-color: gtk("@theme_unfocused_base_color"); 101 | } 102 | 103 | &.bottom { 104 | background-size: 100% 1px; 105 | background-position: top; 106 | } 107 | 108 | &.top { 109 | background-size: 100% 1px; 110 | background-position: bottom; 111 | } 112 | 113 | &.left { 114 | background-size: 1px 100%; 115 | background-position: right; 116 | } 117 | 118 | &.right { 119 | background-size: 1px 100%; 120 | background-position: left; 121 | } 122 | } 123 | 124 | .rubberband, 125 | rubberband { 126 | border: 1px solid gtk("@theme_selected_bg_color"); 127 | background-color: gtkalpha( 128 | gtk("@theme_selected_bg_color"), 129 | 0.8 130 | ); 131 | &:backdrop { 132 | border-color: gtk("@theme_unfocused_selected_bg_color"); 133 | background-color: gtkalpha( 134 | gtk("@theme_unfocused_selected_bg_color"), 135 | 0.8 136 | ); 137 | } 138 | } 139 | 140 | flowbox { 141 | rubberband { 142 | @extend rubberband; 143 | } 144 | 145 | flowboxchild { 146 | padding: 3px; 147 | border-radius: $r; 148 | 149 | &:selected { 150 | @extend %selected_items; 151 | 152 | outline-offset: 0px; 153 | } 154 | } 155 | } 156 | 157 | label { 158 | &.separator { 159 | color: gtk("@theme_fg_color"); 160 | @extend .dim-label; 161 | &:backdrop { 162 | color: gtk("@theme_unfocused_fg_color"); 163 | } 164 | } 165 | 166 | selection { 167 | background-color: gtk("@theme_selected_bg_color"); 168 | color: gtk("@theme_selected_fg_color"); 169 | } 170 | &:disabled { 171 | color: gtk("@insensitive_fg_color"); 172 | selection { 173 | @extend %selected_items, :disabled; 174 | } 175 | 176 | &:backdrop { 177 | color: gtk("@insensitive_unfocused_fg_color"); 178 | } 179 | } 180 | &:backdrop { 181 | color: gtk("@theme_unfocused_text_color"); 182 | 183 | selection { 184 | @extend %selected_items, :backdrop; 185 | } 186 | } 187 | } 188 | 189 | .dim-label { 190 | opacity: 0.5; 191 | text-shadow: none; 192 | } 193 | 194 | %osd, 195 | .osd { 196 | color: gtk("@theme_fg_color"); 197 | border: 1px solid gtk("@borders"); 198 | background-color: gtkalpha(gtk("@theme_bg_color"), 0.8); 199 | background-clip: padding-box; 200 | box-shadow: none; 201 | text-shadow: none; 202 | -gtk-icon-shadow: none; 203 | &:backdrop { 204 | color: gtk("@theme_unfocused_text_color"); 205 | background-color: gtkalpha( 206 | gtk("@theme_unfocused_bg_color"), 207 | 0.8 208 | ); 209 | -gtk-icon-shadow: none; 210 | } 211 | } 212 | 213 | %selected_items { 214 | background-color: gtk("@theme_selected_bg_color"); 215 | color: gtk("@theme_selected_fg_color"); 216 | &:hover { 217 | background-color: gtk( 218 | "@theme_hovering_selected_bg_color" 219 | ); 220 | color: gtk("@theme_fg_color"); 221 | } 222 | &:backdrop { 223 | background-color: gtk( 224 | "@theme_unfocused_selected_bg_color" 225 | ); 226 | color: gtk("@theme_unfocused_base_color"); 227 | } 228 | } 229 | 230 | %selected_items { 231 | background-color: gtk("@theme_selected_bg_color"); 232 | border-radius: 0px; 233 | 234 | @at-root %nobg_selected_items, 235 | & { 236 | color: gtk("@theme_selected_fg_color"); 237 | 238 | &:disabled { 239 | color: gtk("@insensitive_selected_fg_color"); 240 | } 241 | 242 | &:backdrop { 243 | color: gtk("@theme_unfocused_selected_fg_color"); 244 | 245 | &:disabled { 246 | color: gtk( 247 | "@insensitive_unfocused_selected_fg_color" 248 | ); 249 | } 250 | } 251 | } 252 | } 253 | 254 | picture:disabled { 255 | opacity: 0.5; 256 | } -------------------------------------------------------------------------------- /src/gtk4/widgets/_calendar.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /************ 4 | * Calendar * 5 | ***********/ 6 | calendar { 7 | color: gtk("@theme_text_color"); 8 | border: 1px solid gtk("@borders"); 9 | background-color: gtk("@theme_base_color"); 10 | &:selected { 11 | background-color: gtk("@borders"); 12 | } 13 | &:disabled { 14 | color: gtk("@insensitive_base_fg_color"); 15 | } 16 | 17 | &.header { 18 | border: 1px solid gtk("@borders"); 19 | border-radius: 0; 20 | color: gtk("@theme_text_color"); 21 | 22 | &:backdrop { 23 | color: gtk("@theme_unfocused_text_color"); 24 | border-color: gtk("@unfocused_borders"); 25 | } 26 | 27 | &:disabled { 28 | color: gtk("@insensitive_base_fg_color"); 29 | } 30 | } 31 | 32 | &.button { 33 | @extend %undecorated_button; 34 | color: gtk("@theme_button_foreground_normal"); 35 | 36 | &:hover { 37 | @extend %undecorated_button; 38 | color: gtk("@theme_button_decoration_hover"); 39 | } 40 | &:active { 41 | @extend %undecorated_button; 42 | color: gtk("@theme_button_decoration_focus"); 43 | } 44 | &:backdrop { 45 | @extend %undecorated_button; 46 | color: gtk("@theme_button_foreground_backdrop"); 47 | } 48 | } 49 | 50 | &:indeterminate, 51 | &.highlight { 52 | color: gtkalpha(gtk("@theme_text_color"), 0.5); 53 | } 54 | 55 | &:indeterminate:backdrop, 56 | &.highlight:backdrop { 57 | color: gtkalpha( 58 | gtk("@theme_unfocused_text_color"), 59 | 0.5 60 | ); 61 | } 62 | 63 | &:backdrop { 64 | color: gtk("@theme_unfocused_text_color"); 65 | border-color: gtk("@unfocused_borders"); 66 | background-color: gtk("@theme_unfocused_base_color"); 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /src/gtk4/widgets/_checkboxes.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /************************* 4 | * Check and Radio items * 5 | *************************/ 6 | 7 | checkbutton.text-button, 8 | radiobutton.text-button { 9 | // this is for a nice focus on check and radios text 10 | padding: 2px 0; 11 | outline-offset: 0; 12 | 13 | label:not(:only-child) { 14 | &:first-child { 15 | margin-left: 4px; 16 | } 17 | &:last-child { 18 | margin-right: 4px; 19 | } 20 | } 21 | } 22 | 23 | check, 24 | radio { 25 | transition: 0.1s; 26 | margin: 0 4px; 27 | 28 | &:only-child { 29 | margin: 0; 30 | } 31 | 32 | min-height: 14px; 33 | min-width: 14px; 34 | //border: none; 35 | animation-timing-function: $ease-out-quad; 36 | background-color: gtk("@theme_button_background_normal"); 37 | border: 1px solid gtkalpha( 38 | gtk("@theme_button_foreground_normal"), 39 | 0.33 40 | ); 41 | 42 | -gtk-icon-shadow: none; 43 | -gtk-icon-palette: fg gtk("@theme_fg_color"); 44 | 45 | &:hover { 46 | border: 1px solid gtk("@theme_button_decoration_hover"); 47 | } 48 | &:disabled { 49 | background-color: gtk("@insensitive_base_color"); 50 | 51 | border-color: gtkalpha( 52 | gtk("@insensitive_base_fg_color"), 53 | 0.33 54 | ); 55 | } 56 | 57 | &:active { 58 | background: shade(gtk("@theme_base_color"), 0.9) 59 | } 60 | 61 | &:focus { 62 | border-color: gtk("@theme_button_decoration_focus"); 63 | } 64 | 65 | &:indeterminate, 66 | &:checked { 67 | border-color: gtk("@theme_button_decoration_hover"); 68 | background-color: gtkalpha( 69 | gtk("@theme_button_decoration_hover"), 70 | 0.33 71 | ); 72 | 73 | &:backdrop { 74 | background-color: gtkalpha( 75 | gtk("@theme_unfocused_selected_bg_color"), 76 | 0.33 77 | ); 78 | 79 | border-color: gtk("@theme_unfocused_selected_bg_color"); 80 | } 81 | 82 | &:disabled { 83 | background-color: gtkalpha( 84 | gtk("@insensitive_bg_color"), 85 | 0.33 86 | ); 87 | 88 | border-color: gtk("@insensitive_bg_color"); 89 | color: gtk("@insensitive_fg_color"); 90 | } 91 | } 92 | 93 | menu menuitem & { 94 | margin: 0; // this is a workaround for a menu check/radio size allocation issue 95 | min-height: 14px; 96 | min-width: 14px; 97 | background-color: transparent; 98 | box-shadow: none; 99 | -gtk-icon-shadow: none; 100 | animation: none; 101 | } 102 | } 103 | 104 | check{ 105 | border-radius: $r; 106 | &:checked { 107 | -gtk-icon-source: -gtk-recolor(url("../assets/checkmark-symbolic.svg")); 108 | } 109 | &:indeterminate { 110 | -gtk-icon-source: -gtk-recolor(url("../assets/dash-symbolic.svg")); 111 | } 112 | } 113 | radio { 114 | border-radius: 50%; 115 | &:checked { 116 | -gtk-icon-source: -gtk-recolor(url("../assets/bullet-symbolic.svg")); 117 | } 118 | &:indeterminate { 119 | -gtk-icon-source: -gtk-recolor(url("../assets/dash-symbolic.svg")); 120 | } 121 | } 122 | 123 | radio:not(:indeterminate):not(:checked):active:not(:backdrop) { -gtk-icon-transform: scale(0); } 124 | 125 | check:not(:indeterminate):not(:checked):active:not(:backdrop) { -gtk-icon-transform: translate(-4px, 3px) scale(0) } 126 | 127 | radio, 128 | check { 129 | &:active { -gtk-icon-transform: scale(0, 1); } 130 | 131 | &:checked:not(:backdrop), &:indeterminate:not(:backdrop) { 132 | -gtk-icon-transform: unset; 133 | } 134 | } 135 | -------------------------------------------------------------------------------- /src/gtk4/widgets/_color_chooser.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /***************** 4 | * Color Chooser * 5 | *****************/ 6 | // FIXME button.color in buttons section 7 | colorswatch { 8 | // take care of colorswatches on selected elements 9 | :selected & { 10 | box-shadow: none; 11 | &.overlay, 12 | &.overlay:hover { 13 | border-color: gtk("@theme_selected_fg_color"); 14 | } 15 | } 16 | 17 | &:selected { 18 | box-shadow: none; 19 | } 20 | 21 | &.top, 22 | &.bottom, 23 | &.left, 24 | &:first-child:not(.overlay):not(.top), 25 | &.right, 26 | &:last-child:not(.overlay):not(.bottom), 27 | &:only-child:not(.overlay), 28 | &.top > .overlay, 29 | &.bottom > .overlay, 30 | &:first-child:not(.top) > .overlay, 31 | &:last-child:not(.bottom) > .overlay, 32 | &:only-child > .overlay { 33 | border-radius: $r; 34 | } 35 | 36 | // hover effect 37 | &:hover, 38 | &:hover:selected { 39 | background-image: linear-gradient( 40 | 135deg, 41 | transparentize(white, 0.3), 42 | transparentize(white, 1) 50% 43 | ); 44 | box-shadow: inset 0 1px transparentize(white, 0.6); 45 | &.color-dark { 46 | // swatches with colors with luminosity lower than 50% get the color-dark class 47 | background-image: linear-gradient( 48 | 135deg, 49 | transparentize(white, 0.5), 50 | transparentize(white, 1) 50% 51 | ); 52 | } 53 | } 54 | &:backdrop, 55 | &:backdrop:selected &.color-dark:backdrop, 56 | &.color-dark:backdrop:selected { 57 | background-image: none; 58 | box-shadow: none; 59 | } 60 | 61 | // no hover effect for the colorswatch in the color editor 62 | GtkColorEditor & { 63 | border-radius: $r; // same radius as the entry 64 | &:hover { 65 | background-image: none; 66 | box-shadow: none; 67 | } 68 | &:backdrop { 69 | box-shadow: none; 70 | } 71 | } 72 | 73 | // indicator and keynav outline colors 74 | &.color-dark { 75 | color: white; 76 | outline-color: transparentize(black, 0.7); 77 | &:backdrop { 78 | color: transparentize(white, 0.7); 79 | } 80 | } 81 | &.color-light { 82 | color: black; 83 | outline-color: transparentize(white, 0.5); 84 | &:backdrop { 85 | color: transparentize(black, 0.7); 86 | } 87 | } 88 | 89 | // border color 90 | overlay, 91 | overlay:selected { 92 | border: 1px solid gtk("@borders"); 93 | &:hover { 94 | border-color: gtk("@theme_button_decoration_hover"); 95 | } 96 | } 97 | 98 | // make the add color button looks like, well, a button 99 | &#add-color-button { 100 | border-style: solid; // the borders are drawn by the overlay for standard colorswatches to have them semi 101 | border-width: 1px; // translucent on the colored background, here it's not necessary so they need to be set 102 | @include neobutton(normal); 103 | overlay { 104 | @include neobutton(toolbutton); 105 | } // reset the overlay to not cover the button style underneat 106 | } 107 | } 108 | 109 | GtkColorButton.button { 110 | padding: 5px; // Uniform padding on the GtkColorButton 111 | 112 | GtkColorSwatch:first-child:last-child { 113 | // :first-child:last-child for a specificity bump, it gets overridden by the 114 | // colorpicker style, otherwise 115 | border-radius: 0; 116 | box-shadow: none; 117 | &:disabled, 118 | &:backdrop { 119 | box-shadow: none; 120 | } 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /src/gtk4/widgets/_dialogs.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /*********** 4 | * Dialogs * 5 | ***********/ 6 | 7 | // .message-dialog .dialog-action-area .button { 8 | // //padding: 8px; 9 | // } 10 | 11 | messagedialog { 12 | // Message Dialog styling 13 | 14 | &.background { 15 | background-color: gtk("@theme_bg_color"); 16 | } 17 | &:backdrop { 18 | background-color: gtk("@theme_unfocused_bg_color"); 19 | } 20 | .titlebar { 21 | min-height: 32px; 22 | background-color: transparent; 23 | background-image: linear-gradient( 24 | to bottom, 25 | gtkshade("@theme_titlebar_background", 1.2117647), 26 | gtk("@theme_titlebar_background") 27 | ); 28 | box-shadow: none; 29 | } 30 | .dialog-action-area { 31 | padding: 8px; 32 | } 33 | button { 34 | margin: 2px; 35 | } 36 | } 37 | 38 | filechooser { 39 | .search-bar { 40 | background-color: gtk("@theme_bg_color"); 41 | border-color: gtk("@theme_bg_color"); 42 | box-shadow: none; 43 | &:backdrop { 44 | background-color: gtk("@theme_unfocused_bg_color"); 45 | border-color: gtk("@theme_unfocused_bg_color"); 46 | color: gtk("@theme_unfocused_text_color"); 47 | } 48 | } 49 | .dialog-action-box { 50 | border-top: 1px solid gtk("@borders"); 51 | &:backdrop { 52 | border-top-color: gtk("@unfocused_borders"); 53 | } 54 | } 55 | #pathbarbox { 56 | background-color: gtk("@theme_bg_color"); 57 | border-bottom: 1px solid gtk("@borders"); 58 | } 59 | } 60 | 61 | .dialog-action-box { 62 | margin-top: 8px; 63 | 64 | button { 65 | border-radius: 0px; 66 | 67 | &:first-child { 68 | border-radius: $r 0 0 $r; 69 | } 70 | &:last-child { 71 | border-radius: 0 $r $r 0; 72 | } 73 | } 74 | } 75 | 76 | // Icon sizes 77 | 78 | .normal-icons { 79 | -gtk-icon-size: 16px; 80 | } 81 | 82 | .large-icons { 83 | -gtk-icon-size: 32px; 84 | } 85 | 86 | window.aboutdialog image.large-icons { 87 | -gtk-icon-size: 128px; 88 | } 89 | -------------------------------------------------------------------------------- /src/gtk4/widgets/_entry.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @mixin entry( 4 | $t, 5 | $fc: gtk("@theme_view_active_decoration_color") 6 | ) { 7 | // 8 | // Entries drawing function 9 | // 10 | // $t: entry type 11 | // $fc: focus color 12 | // $edge: set to none to not draw the bottom edge or specify a color to not 13 | // use the default one 14 | // 15 | // possible $t values: 16 | // normal, focus, insensitive, backdrop, backdrop-insensitive, osd, osd-focus, osd-backdrop; 17 | // 18 | @if $t==normal { 19 | color: gtk("@theme_text_color"); 20 | border-color: gtk("@borders"); 21 | background-color: gtk("@theme_base_color"); 22 | box-shadow: none; 23 | } 24 | 25 | @if $t==focus { 26 | border-color: $fc; 27 | } 28 | 29 | @if $t==insensitive { 30 | color: gtk("@insensitive_base_fg_color"); 31 | border-color: gtk("@insensitive_borders"); 32 | background-color: gtk("@insensitive_base_color"); 33 | } 34 | 35 | @if $t==backdrop { 36 | color: gtk("@theme_unfocused_text_color"); 37 | border-color: gtk("@unfocused_borders"); 38 | background-color: gtk("@theme_unfocused_base_color"); 39 | } 40 | 41 | @if $t==backdrop-insensitive { 42 | color: gtk("@theme_unfocused_view_text_color"); 43 | border-color: gtk("@unfocused_insensitive_borders"); 44 | background-color: gtk("@theme_unfocused_view_bg_color"); 45 | } 46 | } 47 | 48 | /**************** 49 | * Text Entries * 50 | ****************/ 51 | 52 | %entry, 53 | entry { 54 | %entry_basic, 55 | & { 56 | min-height: 30px; 57 | padding-left: 8px; 58 | padding-right: 8px; 59 | border: 1px solid; 60 | border-radius: $r; 61 | 62 | @include entry(normal); 63 | 64 | image { 65 | // icons inside the entry 66 | &.left { 67 | padding-left: 0; 68 | padding-right: 6px; 69 | } 70 | &.right { 71 | padding-left: 6px; 72 | padding-right: 0; 73 | } 74 | } 75 | // FIXME 76 | // undershoot { 77 | // &.left { @include undershoot(left); } 78 | // &.right { @include undershoot(right); } 79 | // } 80 | 81 | &.flat { 82 | &:focus, 83 | & { 84 | min-height: 0; 85 | padding: 2px; 86 | @include entry(normal); 87 | } 88 | } 89 | &:focus { 90 | @include entry(focus); 91 | } 92 | &:disabled { 93 | @include entry(insensitive); 94 | } 95 | &:backdrop { 96 | @include entry(backdrop); 97 | } 98 | &:backdrop:disabled { 99 | @include entry(backdrop-insensitive); 100 | } 101 | 102 | selection { 103 | &:focus, 104 | & { 105 | @extend %selected_items; 106 | } 107 | } 108 | 109 | @each $e_type, $e_color in (error, gtk("@error_color")), 110 | (warning, gtk("@warning_color")) 111 | { 112 | &.#{$e_type} { 113 | color: $e_color; 114 | border-color: $e_color; 115 | background-color: gtkalpha($e_color, 0.5); 116 | &:focus { 117 | @include entry(focus, $e_color); 118 | background-color: gtkalpha($e_color, 0.5); 119 | } 120 | &:selected, 121 | &:selected:focus { 122 | background-color: $e_color; 123 | } 124 | &:backdrop { 125 | @if $e_color == gtk("@error_color") { 126 | color: gtk("@error_color_backdrop"); 127 | border-color: gtk("@error_color_backdrop"); 128 | background-color: gtkalpha( 129 | gtk("@error_color_backdrop"), 130 | 0.5 131 | ); 132 | } @else if $e_color == gtk("@warning_color") { 133 | color: gtk("@warning_color_backdrop"); 134 | border-color: gtk("@warning_color_backdrop"); 135 | background-color: gtkalpha( 136 | gtk("@warning_color_backdrop"), 137 | 0.5 138 | ); 139 | } 140 | } 141 | } 142 | } 143 | 144 | image { 145 | // entry icons colors 146 | color: gtkmix( 147 | gtk("@theme_fg_color"), 148 | gtk("@theme_text_color"), 149 | 0.8 150 | ); 151 | &:hover { 152 | color: gtk("@theme_button_decoration_hover"); 153 | } 154 | &:active { 155 | color: gtk("@theme_button_decoration_focus"); 156 | } 157 | &:backdrop { 158 | color: gtkmix( 159 | gtk("@theme_unfocused_fg_color"), 160 | gtk("@theme_unfocused_fg_color"), 161 | 0.8 162 | ); 163 | } 164 | } 165 | // FIXME 166 | // &:drop(active) { 167 | // &:focus, & { 168 | // border-color: $drop_target_color; 169 | // box-shadow: inset 0 0 0 1px $drop_target_color; 170 | // } 171 | // } 172 | } 173 | 174 | progress { 175 | margin: 1px; 176 | border-radius: 0; 177 | border-width: 0 0 2px; 178 | border-color: gtk("@theme_selected_bg_color"); 179 | border-style: solid; 180 | background-image: none; 181 | background-color: transparent; 182 | box-shadow: none; 183 | &:backdrop { 184 | background-color: transparent; 185 | border-color: gtk( 186 | "@theme_unfocused_selected_bg_color" 187 | ); 188 | } 189 | } 190 | } 191 | 192 | treeview acceleditor > label { 193 | background-color: gtk("@theme_selected_bg_color"); 194 | } 195 | 196 | treeview entry { 197 | &.flat, 198 | & { 199 | border-radius: 0; 200 | background-image: none; 201 | background-color: gtk("@theme_base_color"); 202 | 203 | &:focus { 204 | border-color: gtk( 205 | "@theme_view_active_decoration_color" 206 | ); 207 | } 208 | } 209 | } 210 | 211 | combobox > box > button.combo:not(:only-child) { 212 | background: none; 213 | @include entry(normal); 214 | 215 | &:focus { 216 | @include entry(focus); 217 | } 218 | &:disabled { 219 | @include entry(insensitive); 220 | } 221 | &:backdrop { 222 | @include entry(backdrop); 223 | } 224 | &:backdrop:disabled { 225 | @include entry(backdrop-insensitive); 226 | } 227 | } 228 | 229 | -------------------------------------------------------------------------------- /src/gtk4/widgets/_floating-bar.scss: -------------------------------------------------------------------------------- 1 | .floating-bar { 2 | background-color: gtk("@tooltip_background"); 3 | color: gtk("@tooltip_text"); 4 | border: 1px solid gtk("@tooltip_border"); 5 | border-radius: $r; 6 | margin: 3px; 7 | } 8 | -------------------------------------------------------------------------------- /src/gtk4/widgets/_headerbar.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /*************** 4 | * Header bars * 5 | ***************/ 6 | 7 | %titlebar, 8 | headerbar { 9 | padding: 0px 6px; 10 | border-width: 0px 0px 1px 0px; 11 | border-radius: 6px 6px 0px 0px; 12 | border-style: solid; 13 | border-color: gtk("@borders"); 14 | color: gtk("@theme_titlebar_foreground"); 15 | background-image: none; 16 | background-color: gtk("@theme_titlebar_background"); 17 | border-top: 1px solid lighter(gtk("@theme_titlebar_background")); 18 | 19 | &:backdrop { 20 | background-image: none; 21 | background-color: gtk( 22 | "@theme_titlebar_background_backdrop" 23 | ); 24 | color: gtk("@theme_titlebar_foreground_backdrop"); 25 | border-top: 1px solid lighter(gtk("@theme_titlebar_background_backdrop")); 26 | box-shadow: none; 27 | } 28 | label { 29 | font-weight: normal; 30 | &:backdrop { 31 | color: gtk("@theme_titlebar_foreground_backdrop"); 32 | } 33 | } 34 | .path-bar button { 35 | color: gtk("@theme_titlebar_foreground"); 36 | font-weight: normal; 37 | &:backdrop { 38 | color: gtk("@theme_titlebar_foreground_backdrop"); 39 | } 40 | } 41 | .linked button { 42 | @include neobutton(normal); 43 | } 44 | button { 45 | @include neobutton(toolbutton); 46 | 47 | //ensure we don't have a shadow on headerbar buttons at all 48 | box-shadow: none; 49 | color: gtk("@theme_titlebar_foreground"); 50 | 51 | &:hover { 52 | color: gtk("@theme_titlebar_foreground"); 53 | } 54 | 55 | &:backdrop { 56 | background-image: none; 57 | background-color: gtk( 58 | "@theme_titlebar_background_backdrop" 59 | ); 60 | color: gtk("@theme_titlebar_foreground_backdrop"); 61 | } 62 | 63 | &.flat:backdrop, 64 | &.flat:backdrop:disabled, 65 | &:disabled:backdrop { 66 | background-image: none; 67 | background-color: gtk( 68 | "@theme_titlebar_background_backdrop" 69 | ); 70 | color: gtk("@theme_titlebar_foreground_backdrop"); 71 | border-color: transparent; 72 | } 73 | &.flat:disabled { 74 | @extend %undecorated_button; 75 | color: gtk("@theme_titlebar_foreground_insensitive"); 76 | } 77 | &:disabled { 78 | background-color: transparent; 79 | background-image: none; 80 | border-color: transparent; 81 | color: gtk("@theme_titlebar_foreground_insensitive"); 82 | } 83 | } 84 | 85 | .title { 86 | font-weight: normal; 87 | padding: 0px 12px; 88 | &:backdrop { 89 | color: gtk("@theme_titlebar_foreground_backdrop"); 90 | } 91 | } 92 | 93 | .subtitle { 94 | font-size: smaller; 95 | padding: 0 12px; 96 | @extend .dim-label; 97 | &:backdrop { 98 | color: gtk("@theme_titlebar_foreground_backdrop"); 99 | } 100 | } 101 | 102 | separator { 103 | border-width: 0px; 104 | background-color: transparent; 105 | background-image: none; 106 | border-color: transparent; 107 | } 108 | 109 | &.selection-mode, 110 | &.selection-mode headerbar { 111 | background-color: gtkmix( 112 | "@theme_titlebar_background", 113 | "@theme_button_decoration_focus", 114 | 0.5 115 | ); 116 | separator { 117 | background-color: gtk( 118 | "@theme_button_decoration_focus" 119 | ); 120 | } 121 | button:not(.titlebutton) { 122 | background-color: gtkalpha( 123 | gtk("@theme_button_decoration_focus"), 124 | 0.5 125 | ); 126 | &:active, 127 | &:focus { 128 | background-color: gtk( 129 | "@theme_button_decoration_focus" 130 | ); 131 | } 132 | } 133 | 134 | .subtitle:link { 135 | @extend %link, :selected; 136 | } 137 | 138 | .selection-menu { 139 | padding: 4px 6px; 140 | 141 | .arrow { 142 | -gtk-icon-source: -gtk-icontheme($arrow_down); 143 | -gtk-icon-shadow: none; 144 | } 145 | } 146 | } 147 | 148 | .tiled &, 149 | .maximized & { 150 | border-radius: 0; // squared corners when the window is max'd or tiled 151 | } 152 | } 153 | 154 | headerbar { 155 | // add vertical margins to headerbar entries, buttons and separators to avoid them spanning the whole height 156 | entry, 157 | spinbutton, 158 | separator, 159 | button { 160 | margin-top: 8px; 161 | margin-bottom: 8px; 162 | } 163 | } 164 | -------------------------------------------------------------------------------- /src/gtk4/widgets/_infobar.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /************** 4 | * GtkInfoBar * 5 | **************/ 6 | infobar { 7 | border-style: none; 8 | border-bottom: 1px solid gtk("@borders"); 9 | background-color: gtk("@theme_bg_color"); 10 | background-image: none; 11 | &:backdrop { 12 | border-bottom: 1px solid gtk("@unfocused_borders"); 13 | } 14 | } 15 | 16 | .info, 17 | .question, 18 | .warning, 19 | .error { 20 | background-color: gtk("@theme_bg_color"); 21 | background-image: none; 22 | color: gtk("@warning_color"); 23 | text-shadow: none; 24 | &:backdrop { 25 | background-color: gtk("@theme_unfocused_bg_color"); 26 | color: gtk("@warning_color_backdrop"); 27 | } 28 | button { 29 | box-shadow: none; 30 | background-image: none; 31 | background-color: gtkalpha(gtk("@warning_color"), 0.5); 32 | border-color: gtkalpha(gtk("@warning_color"), 0.5); 33 | color: gtk("@theme_button_foreground_normal"); 34 | &:hover { 35 | background-color: gtkalpha( 36 | gtk("@warning_color"), 37 | 0.25 38 | ); 39 | border-color: gtk("@warning_color"); 40 | } 41 | &:active, 42 | &:checked { 43 | background-color: gtk("@warning_color"); 44 | color: gtk("@theme_bg_color"); 45 | border-color: gtk("@warning_color"); 46 | } 47 | &:disabled { 48 | background-color: gtkalpha( 49 | gtk("@warning_color_insensitive"), 50 | 0.5 51 | ); 52 | border-color: gtkalpha( 53 | gtk("@warning_color_insensitive"), 54 | 0.5 55 | ); 56 | color: gtk("@theme_button_foreground_insensitive"); 57 | } 58 | &:backdrop { 59 | background-color: gtkalpha( 60 | gtk("@warning_color_backdrop"), 61 | 0.5 62 | ); 63 | border-color: gtkalpha( 64 | gtk("@warning_color_backdrop"), 65 | 0.5 66 | ); 67 | color: gtk("@theme_button_foreground_backdrop"); 68 | &:active, 69 | &:checked { 70 | background-color: gtk("@warning_color_backdrop"); 71 | color: gtk("@theme_unfocused_bg_color"); 72 | border-color: gtk("@warning_color_backdrop"); 73 | } 74 | &:disabled { 75 | background-color: gtkalpha( 76 | gtk("@warning_color_insensitive_backdrop"), 77 | 0.5 78 | ); 79 | border-color: gtkalpha( 80 | gtk("@warning_color_insensitive_backdrop"), 81 | 0.5 82 | ); 83 | color: gtk( 84 | "@theme_button_foreground_backdrop_insensitive" 85 | ); 86 | } 87 | &:disabled:active, 88 | &:disabled:checked { 89 | background-color: gtk( 90 | "@warning_color_insensitive_backdrop" 91 | ); 92 | color: gtk("@insensitive_unfocused_bg_color"); 93 | border-color: gtk( 94 | "@warning_color_insensitive_backdrop" 95 | ); 96 | } 97 | } 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /src/gtk4/widgets/_libhandy.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | hdydialer { 4 | button { 5 | font-weight: lighter; 6 | background-color: transparent; 7 | border: 0; 8 | box-shadow: none; 9 | &:backdrop { 10 | background-color: transparent; 11 | } 12 | &:focus { 13 | background-color: transparent; 14 | border: none; 15 | } 16 | } 17 | } 18 | hdyviewswitcher { 19 | > button { 20 | border: 0; 21 | background-color: transparent; 22 | &:backdrop:hover, 23 | &:hover, 24 | &:active, 25 | &:hover:focus, 26 | &:active:focus, 27 | &:checked, 28 | &:checked:hover { 29 | background-color: transparent; 30 | } 31 | &:checked, 32 | &:checked:backdrop { 33 | border-top: 0; 34 | border-left: 0; 35 | border-right: 0; 36 | background-color: transparent; 37 | > stack { 38 | border-bottom: 3px solid transparent; 39 | border-top: 3px solid 40 | gtk("@theme_button_decoration_focus"); 41 | } 42 | } 43 | &.needs-attention > stack > box label { 44 | animation: needs_attention 150ms ease-in; 45 | background-image: radial-gradient( 46 | circle, 47 | gtk("@theme_button_decoration_focus") 0%, 48 | transparent 5px 49 | ); 50 | background-size: 6px 6px, 6px 6px; 51 | background-repeat: no-repeat; 52 | background-position: right 0px, right 1px; 53 | } 54 | } 55 | } 56 | headerbar hdyviewswitcher > button:checked > stack { 57 | &:backdrop { 58 | border-top: 3px solid transparent; 59 | border-bottom: 3px solid 60 | gtk("@theme_button_decoration_focus"); 61 | } 62 | border-top: 3px solid transparent; 63 | border-bottom: 3px solid 64 | gtk("@theme_button_decoration_focus"); 65 | } 66 | 67 | window.unified { 68 | border-radius: 6px; 69 | &.maximized, 70 | &.fullscreen, 71 | &.tiled { 72 | border-radius: 0; 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /src/gtk4/widgets/_link.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /********* 4 | * Links * 5 | *********/ 6 | %link, 7 | *:link { 8 | color: gtk("@link_color"); 9 | &:visited { 10 | color: gtk("@link_visited_color"); 11 | *:selected & { 12 | color: gtkmix( 13 | gtk("@theme_selected_fg_color"), 14 | gtk("@theme_selected_bg_color"), 15 | 0.6 16 | ); 17 | } 18 | } 19 | &:hover { 20 | color: gtkshade("@link_color", 1.1); 21 | *:selected & { 22 | color: gtkmix( 23 | gtk("@theme_selected_fg_color"), 24 | gtk("@theme_selected_bg_color"), 25 | 0.9 26 | ); 27 | } 28 | } 29 | &:active { 30 | color: gtk("@link_color"); 31 | *:selected & { 32 | color: gtkmix( 33 | gtk("@theme_selected_fg_color"), 34 | gtk("@theme_selected_bg_color"), 35 | 0.8 36 | ); 37 | } 38 | } 39 | &:backdrop, 40 | &:backdrop:hover, 41 | &:backdrop:hover:selected { 42 | color: gtk("@theme_unfocused_selected_bg_color"); 43 | } 44 | @at-root %link_selected, 45 | &:selected, 46 | *:selected & { 47 | color: gtkmix( 48 | gtk("@theme_selected_fg_color"), 49 | gtk("@theme_selected_bg_color"), 50 | 0.8 51 | ); 52 | } 53 | } 54 | 55 | button:link, 56 | button:visited { 57 | @extend %undecorated_button; 58 | 59 | @extend *, :link; 60 | 61 | text-shadow: none; 62 | 63 | &:hover, 64 | &:active, 65 | &:checked { 66 | @extend %undecorated_button; 67 | 68 | text-shadow: none; 69 | } 70 | 71 | > label { 72 | @extend %link; 73 | 74 | text-decoration-line: underline; 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /src/gtk4/widgets/_lists.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /********* 4 | * Lists * 5 | *********/ 6 | 7 | @mixin list-item-highlight { 8 | @if $new-highlight { 9 | background-color: gtk("@theme_selected_bg_color"); 10 | color: gtk("@theme_button_foreground_active"); 11 | border-top: 1px 12 | solid 13 | gtk("@theme_button_decoration_focus"); 14 | border-bottom: 1px 15 | solid 16 | gtk("@theme_button_decoration_focus"); 17 | border-radius: 0px; 18 | } @else { 19 | background-color: gtk("@theme_selected_bg_color"); 20 | } 21 | } 22 | 23 | list { 24 | color: gtk("@theme_fg_color"); 25 | background: gtk("@theme_base_color"); 26 | border-radius: 3px; 27 | &.content { 28 | border: 1px solid gtk("@borders"); 29 | } 30 | 31 | row { 32 | background: gtk("@theme_base_color"); 33 | padding: 2px; 34 | } 35 | } 36 | 37 | row { 38 | &.activatable { 39 | @if $new-highlight { 40 | border: 1px solid transparent; 41 | } 42 | 43 | &.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411 44 | 45 | &:hover { 46 | @include list-item-highlight(); 47 | } 48 | 49 | &:active { 50 | box-shadow: none; 51 | @include list-item-highlight(); 52 | } 53 | 54 | &:selected { 55 | &:active { 56 | box-shadow: none; 57 | @include list-item-highlight(); 58 | } 59 | 60 | &.has-open-popup, 61 | &:hover { 62 | @include list-item-highlight(); 63 | } 64 | 65 | &:backdrop { 66 | background-color: gtk( 67 | "@theme_unfocused_selected_bg_color_alt" 68 | ); 69 | } 70 | } 71 | } 72 | 73 | &:selected { 74 | @extend %selected_items; 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /src/gtk4/widgets/_menus.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /********* 4 | * Menus * 5 | *********/ 6 | 7 | accelerator { 8 | opacity: 0.5; 9 | margin-left: 2.5mm; 10 | } 11 | 12 | menubar, 13 | .menubar { 14 | padding: 0px; 15 | box-shadow: none; 16 | border-style: none; 17 | background-color: gtk("@theme_header_background"); 18 | 19 | &:backdrop { 20 | background-color: gtk("@theme_header_background_backdrop"); 21 | } 22 | 23 | > item { 24 | min-height: 4.5mm; 25 | padding: 1.25mm 2.5mm; 26 | @if $new-highlight { 27 | border-bottom: 3px solid transparent; 28 | } 29 | 30 | &:hover { 31 | //Seems like it :hover even with keyboard focus 32 | @if $new-highlight { 33 | background-color: gtkalpha( 34 | gtk("@theme_button_decoration_focus"), 35 | 0.3 36 | ); 37 | color: gtk("@theme_button_foreground_active"); 38 | border-bottom: 3px 39 | solid 40 | gtk("@theme_button_decoration_focus"); 41 | } @else { 42 | background-color: gtk( 43 | "@theme_button_decoration_focus" 44 | ); 45 | color: gtk("@theme_button_foreground_active"); 46 | } 47 | } 48 | 49 | &:disabled { 50 | color: gtk("@insensitive_fg_color"); 51 | box-shadow: none; 52 | 53 | &:backdrop { 54 | background-color: gtk("@theme_unfocused_bg_color"); 55 | color: gtk("@insensitive_unfocused_fg_color"); 56 | } 57 | } 58 | 59 | &:backdrop { 60 | background-color: gtk("@theme_unfocused_bg_color"); 61 | color: gtk("@theme_unfocused_fg_color"); 62 | } 63 | } 64 | } 65 | 66 | popover, popover.background { 67 | background-color: transparent; 68 | 69 | contents, > arrow { 70 | padding: 4px; // Use px to avoid overflow when using fractional scaling 71 | background-color: gtkmix(gtk("@theme_bg_color"), gtk("@theme_base_color"), 0.3); 72 | border: 1px solid gtk("@borders"); 73 | border-radius: $r; 74 | } 75 | 76 | // axes borders in a composited env 77 | separator { 78 | color: gtk("@borders"); 79 | margin: 0.75mm 0; 80 | } 81 | 82 | modelbutton { 83 | text-shadow: none; 84 | min-height: 4.5mm; 85 | min-width: 10mm; 86 | padding: 0.75mm 2mm; 87 | border: 1px solid transparent; 88 | 89 | @if $new-highlight { 90 | border: 1px solid transparent; 91 | margin: 1mm; 92 | } 93 | 94 | accelerator { 95 | color: gtkalpha(currentColor, 0.55); 96 | } 97 | check, 98 | radio { 99 | &:dir(ltr) { 100 | margin-right: 1.5mm; 101 | } 102 | &:dir(rtl) { 103 | margin-left: 1.5mm; 104 | } 105 | } 106 | 107 | arrow.left { 108 | -gtk-icon-source: -gtk-icontheme($arrow_left); 109 | } 110 | 111 | arrow.right { 112 | -gtk-icon-source: -gtk-icontheme($arrow_right); 113 | } 114 | 115 | &:hover { 116 | background-color: gtkalpha(gtk("@theme_selected_bg_color"), 0.3); 117 | border: 1px solid gtk("@theme_button_decoration_focus"); // Use px to avoid strange thickness when fractional scaling is used 118 | border-radius: $r; 119 | } 120 | 121 | &:disabled { 122 | color: gtk("@insensitive_fg_color"); 123 | 124 | &:backdrop { 125 | color: gtk("@insensitive_unfocused_fg_color"); 126 | } 127 | } 128 | 129 | &:backdrop, 130 | &:backdrop:hover { 131 | color: gtk("@theme_unfocused_fg_color"); 132 | background-color: gtk("@theme_unfocused_bg_color"); 133 | } 134 | } 135 | } 136 | 137 | GtkVolumeButton.button { 138 | padding: 1.25mm; 139 | } 140 | -------------------------------------------------------------------------------- /src/gtk4/widgets/_misc.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /******** 4 | * Misc * 5 | ********/ 6 | 7 | /**************** 8 | * Print dialog * 9 | *****************/ 10 | printdialog { 11 | paper { 12 | color: gtk("@theme_fg_color"); 13 | border: 1px solid gtk("@borders"); 14 | background: white; 15 | padding: 0; 16 | 17 | &:backdrop { 18 | color: gtk("@theme_unfocused_fg_color"); 19 | border-color: gtk("@unfocused_borders"); 20 | background: gtk("@print_paper_backdrop"); 21 | } 22 | } 23 | 24 | .dialog-action-box { 25 | margin: 12px; 26 | } 27 | } 28 | 29 | /********** 30 | * Frames * 31 | **********/ 32 | frame > border, 33 | .frame { 34 | box-shadow: none; 35 | margin: 0; 36 | padding: 0; 37 | border-radius: 0; 38 | border: 1px solid gtk("@borders"); 39 | 40 | &.flat { 41 | border-style: none; 42 | } 43 | 44 | &:backdrop { 45 | border-color: gtk("@unfocused_borders"); 46 | } 47 | } 48 | 49 | actionbar > revealer > box { 50 | padding: 6px; 51 | border-top: 1px solid gtk("@borders"); 52 | 53 | &:backdrop { 54 | border-color: gtk("@unfocused_borders"); 55 | } 56 | } 57 | 58 | scrolledwindow { 59 | viewport.frame { 60 | // avoid double borders when viewport inside scrolled window 61 | border-style: none; 62 | } 63 | 64 | junction { 65 | // the small square between two scrollbars 66 | border-color: transparent; 67 | background-color: transparent; 68 | background-image: none; 69 | } 70 | } 71 | 72 | //vbox and hbox separators 73 | separator, separator.sidebar { 74 | background: gtk("@borders"); 75 | min-width: 1px; 76 | min-height: 1px; 77 | } 78 | 79 | /************* 80 | * Expanders * 81 | *************/ 82 | 83 | expander { 84 | arrow { 85 | min-width: 16px; 86 | min-height: 16px; 87 | -gtk-icon-source: -gtk-icontheme($arrow_right); 88 | &:dir(rtl) { 89 | -gtk-icon-source: -gtk-icontheme( 90 | "go-next-rtl-symbolic" 91 | ); 92 | } 93 | &:hover { 94 | color: gtkshade("@theme_button_decoration_focus", 1.3); 95 | } //only lightens the arrow 96 | &:checked { 97 | -gtk-icon-source: -gtk-icontheme($arrow_down); 98 | } 99 | } 100 | } 101 | 102 | /********* 103 | * Paned * 104 | *********/ 105 | 106 | paned { 107 | > separator { 108 | min-width: 1px; 109 | min-height: 1px; 110 | -gtk-icon-source: none; // defeats the ugly default handle decoration 111 | border-style: none; // just to be sure 112 | background-color: transparent; 113 | // workaround, using background istead of a border since the border will get rendered twice (?) 114 | background-image: image(gtk("@borders")); 115 | background-size: 1px 1px; 116 | 117 | //&:selected { background-image: image($selected_bg_color); } // FIXME is this needed? 118 | 119 | &:backdrop { 120 | background-image: image(gtk("@unfocused_borders")); 121 | } 122 | 123 | &.wide { 124 | min-width: 5px; 125 | min-height: 5px; 126 | background-color: gtk("@theme_bg_color"); 127 | background-image: image(gtk("@borders")), 128 | image(gtk("@borders")); 129 | background-size: 1px 1px, 1px 1px; 130 | 131 | &:backdrop { 132 | background-color: gtk("@theme_unfocused_bg_color"); 133 | background-image: image(gtk("@unfocused_borders")), 134 | image(gtk("@unfocused_borders")); 135 | } 136 | } 137 | } 138 | 139 | &.horizontal > separator { 140 | background-repeat: repeat-y; 141 | 142 | &:dir(ltr) { 143 | margin: 0 -8px 0 0; 144 | padding: 0 8px 0 0; 145 | background-position: left; 146 | } 147 | &:dir(rtl) { 148 | margin: 0 0 0 -8px; 149 | padding: 0 0 0 8px; 150 | background-position: right; 151 | } 152 | 153 | &.wide { 154 | margin: 0; 155 | padding: 0; 156 | background-repeat: repeat-y, repeat-y; 157 | background-position: left, right; 158 | } 159 | } 160 | 161 | &.vertical > separator { 162 | margin: 0 0 -8px 0; 163 | padding: 0 0 8px 0; 164 | background-repeat: repeat-x; 165 | background-position: top; 166 | 167 | &.wide { 168 | margin: 0; 169 | padding: 0; 170 | background-repeat: repeat-x, repeat-x; 171 | background-position: bottom, top; 172 | } 173 | } 174 | } 175 | 176 | /********************* 177 | * Spinner Animation * 178 | *********************/ 179 | 180 | @keyframes spin { 181 | to { 182 | -gtk-icon-transform: rotate(1turn); 183 | } 184 | } 185 | 186 | spinner { 187 | background-image: none; 188 | opacity: 0; // non spinning spinner makes no sense 189 | -gtk-icon-source: -gtk-icontheme( 190 | "process-working-symbolic" 191 | ); 192 | &:checked { 193 | opacity: 1; 194 | animation: spin 1s linear infinite; 195 | &:disabled { 196 | opacity: 0.5; 197 | } 198 | } 199 | } 200 | -------------------------------------------------------------------------------- /src/gtk4/widgets/_overshoot.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | scrolledwindow { 4 | overshoot, 5 | undershoot { 6 | background: none; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/gtk4/widgets/_pathbar.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /************ 4 | * Pathbars * 5 | ************/ 6 | .path-bar { 7 | background-color: gtk("@theme_bg_color"); 8 | border-bottom: 1px solid gtk("@borders"); 9 | } 10 | 11 | .path-bar button { 12 | @include neobutton(normal); 13 | padding: 4px 8px; 14 | color: gtk("@theme_fg_color"); 15 | &:hover { 16 | border-color: gtk("@theme_button_decoration_hover"); 17 | } 18 | &:active, 19 | &:checked { 20 | background-color: gtk("@borders"); 21 | font-weight: normal; 22 | } 23 | &.text-button, 24 | &.image-button, 25 | & { 26 | padding-left: 4px; 27 | padding-right: 4px; 28 | } 29 | 30 | &.text-button.image-button label { 31 | padding-left: 0; 32 | padding-right: 0; 33 | } 34 | 35 | &.text-button.image-button, 36 | & { 37 | label:last-child { 38 | padding-right: 8px; 39 | } 40 | label:first-child { 41 | padding-left: 8px; 42 | } 43 | } 44 | 45 | image { 46 | padding-left: 4px; 47 | padding-right: 4px; 48 | } 49 | 50 | &.slider-button { 51 | padding-left: 0; 52 | padding-right: 0; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/gtk4/widgets/_progressbar.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /***************** 4 | * Progress bars * 5 | *****************/ 6 | progressbar { 7 | // sizing 8 | &.horizontal { 9 | trough, 10 | progress { 11 | min-height: 4px; 12 | } 13 | } 14 | 15 | &.vertical { 16 | trough, 17 | progress { 18 | min-width: 4px; 19 | } 20 | } 21 | 22 | // FIXME: insensitive state missing and some other state should be set probably 23 | font-size: smaller; 24 | color: gtkalpha( 25 | gtk("@theme_button_foreground_normal"), 26 | 0.3 27 | ); 28 | 29 | trough { 30 | border: 1px solid; 31 | border-radius: $r; 32 | background: gtkoverlay( 33 | gtk("@theme_bg_color"), 34 | gtkalpha(gtk("@theme_button_foreground_normal"), 0.5*0.2) 35 | ); 36 | 37 | border-color: gtkalpha( 38 | gtk("@theme_button_foreground_normal"), 39 | 0.2 40 | ); 41 | } 42 | 43 | progress { 44 | border: 1px solid; 45 | margin: -1px; 46 | border-radius: $r; 47 | box-shadow: none; //needed for clipping 48 | background: gtkoverlay( 49 | gtk("@theme_bg_color"), 50 | gtkalpha(gtk("@theme_button_decoration_hover"), 0.5) 51 | ); 52 | 53 | border: 1px solid gtk("@theme_button_decoration_hover"); 54 | } 55 | 56 | &:backdrop progress { 57 | background: gtkoverlay( 58 | gtk("@theme_bg_color"), 59 | gtkalpha(gtk("@theme_unfocused_selected_bg_color"), 0.5) 60 | ); 61 | 62 | border-color: gtk( 63 | "@theme_unfocused_selected_bg_color" 64 | ); 65 | } // states not passed here as well 66 | 67 | &.osd { 68 | // progressbar.osd used for epiphany page loading progress 69 | background-color: transparent; 70 | } 71 | } 72 | 73 | treeview.view { 74 | &.progressbar { 75 | border: 0px solid transparent; 76 | border-radius: $r; 77 | background-color: gtk("@theme_selected_bg_color"); 78 | color: gtk("@theme_selected_fg_color"); 79 | background-image: none; 80 | &:selected { 81 | &:focus, 82 | & { 83 | background-color: gtkalpha( 84 | gtk("@theme_selected_bg_color"), 85 | 0.25 86 | ); 87 | } 88 | } 89 | } 90 | &.trough { 91 | background-color: $trough_color; 92 | &:selected { 93 | &:focus, 94 | & { 95 | background-color: gtkalpha( 96 | gtk("@theme_selected_fg_color"), 97 | 0.3 98 | ); 99 | } 100 | } 101 | } 102 | } 103 | 104 | /************* 105 | * Level Bar * 106 | *************/ 107 | @mixin levelbar($color) { 108 | border: 1px solid $color; 109 | background: gtkoverlay( 110 | gtk("@theme_bg_color"), 111 | gtkalpha($color, 0.5) 112 | ); 113 | box-shadow: none; 114 | border-radius: $r; 115 | } 116 | 117 | levelbar { 118 | block { 119 | min-height: 6px; 120 | } 121 | 122 | &.vertical block { 123 | min-width: 6px; 124 | min-height: 32px; 125 | } 126 | 127 | trough { 128 | border: 1px solid; 129 | padding: 2px; 130 | border-radius: 3px; 131 | @include entry(normal); 132 | 133 | &:backdrop { 134 | @include entry(backdrop); 135 | } 136 | } 137 | 138 | &.horizontal.discrete block { 139 | margin: 0 1px; 140 | min-width: 32px; 141 | } 142 | 143 | &.vertical.discrete block { 144 | margin: 1px 0; 145 | } 146 | 147 | block { 148 | &:not(.empty) { 149 | @include levelbar(gtk("@theme_button_decoration_hover")); 150 | 151 | &:backdrop { 152 | @include levelbar(gtk("@theme_unfocused_selected_bg_color")); 153 | } 154 | } 155 | 156 | &.low { 157 | @include levelbar(gtk("@warning_color")); 158 | &:backdrop { 159 | @include levelbar(gtk("@warning_color_backdrop")); 160 | } 161 | } 162 | 163 | &.full, &.high { 164 | @include levelbar(gtk("@success_color")); 165 | 166 | &:backdrop { 167 | @include levelbar(gtk("@success_color_backdrop")); 168 | } 169 | } 170 | 171 | &.empty { 172 | @include levelbar(gtkalpha(gtk("@theme_button_foreground_normal"), 0.2)); 173 | } 174 | } 175 | } 176 | -------------------------------------------------------------------------------- /src/gtk4/widgets/_scale.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /************ 4 | * GtkScale * 5 | ************/ 6 | scale { 7 | padding: 12px; 8 | 9 | &.fine-tune { 10 | &.trough { 11 | margin: 8px; 12 | border-radius: $r; 13 | } 14 | } 15 | 16 | slider { 17 | min-width: 16px; 18 | min-height: 16px; 19 | border: 1px solid gtkmix(gtk("@theme_bg_color"),gtk("@theme_button_foreground_normal"), 0.4); 20 | border-radius: 50%; 21 | box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.125); 22 | 23 | background: gtk("@theme_button_background_normal"); 24 | margin: -9px; 25 | 26 | &:hover { 27 | border-color: gtk("@theme_button_decoration_hover"); 28 | border-radius: 50%; // needed for double marks scales 29 | 30 | &:backdrop { 31 | border-color: gtk( 32 | "@theme_button_decoration_hover_insensitive" 33 | ); 34 | } 35 | } 36 | 37 | &:disabled { 38 | border-style: solid; // needed for double marks scales or they'll get 39 | border-radius: 50%; // overridden 40 | background-color: gtk("@theme_button_background_insensitive"); 41 | opacity: 1; 42 | border-color: gtk("@insensitive_borders"); 43 | &:backdrop { 44 | background-color: gtkalpha( 45 | gtk( 46 | "@theme_button_background_backdrop_insensitive" 47 | ), 48 | 100 49 | ); 50 | border-color: gtk("@unfocused_insensitive_borders"); 51 | } 52 | } 53 | &:active { 54 | box-shadow: none; 55 | background-color: gtk("@theme_button_background_normal"); 56 | &:backdrop { 57 | background-color: gtk( 58 | "@theme_button_background_normal" 59 | ); 60 | border-color: gtk( 61 | "@theme_button_decoration_focus_backdrop" 62 | ); 63 | } 64 | } 65 | &:backdrop { 66 | background-color: gtk( 67 | "@theme_button_background_backdrop" 68 | ); 69 | border-color: gtk("@unfocused_borders"); 70 | } 71 | } 72 | 73 | &:focus-within slider { 74 | border-color: gtk("@theme_button_decoration_focus"); 75 | border-radius: 50%; // needed for double marks scales 76 | 77 | &:backdrop { 78 | border-color: gtk( 79 | "@theme_button_decoration_focus_insensitive" 80 | ); 81 | } 82 | } 83 | 84 | trough { 85 | min-width: 4px; 86 | min-height: 4px; 87 | border: 1px solid; 88 | border-radius: $r; 89 | 90 | background: gtkoverlay( 91 | gtk("@theme_bg_color"), 92 | gtkalpha(gtk("@theme_button_foreground_normal"), 0.5*0.2) 93 | ); 94 | 95 | border-color: gtkalpha( 96 | gtk("@theme_button_foreground_normal"), 97 | 0.2 98 | ); 99 | 100 | &:disabled, &.vertical:disabled { 101 | background: gtkoverlayalpha( 102 | gtk("@theme_bg_color"), 103 | gtkalpha(gtk("@theme_button_foreground_normal"), 0.5*0.2), 104 | 0.5 105 | ); 106 | border-color: gtkalpha( 107 | gtk("@theme_button_foreground_normal"), 108 | 0.2 * 0.5 109 | ); 110 | } 111 | } 112 | 113 | highlight { 114 | margin: -1px; 115 | border-radius: $r; 116 | background: gtkoverlay( 117 | gtk("@theme_bg_color"), 118 | gtkalpha(gtk("@theme_button_decoration_hover"), 0.5) 119 | ); 120 | 121 | border: 1px solid gtk("@theme_button_decoration_hover"); 122 | 123 | &:disabled { 124 | background: none; 125 | border-color: transparent; 126 | } 127 | 128 | &:backdrop { 129 | background: gtkoverlay( 130 | gtk("@theme_bg_color"), 131 | gtkalpha(gtk("@theme_unfocused_selected_bg_color"), 0.5) 132 | ); 133 | 134 | border-color: gtk( 135 | "@theme_unfocused_selected_bg_color" 136 | ); 137 | 138 | &:disabled { 139 | background: none; 140 | border-color: transparent; 141 | } 142 | } 143 | } 144 | 145 | $_marks_length: 8px; 146 | $_marks_distance: 1px; 147 | 148 | 149 | > label { 150 | color: gtk("@theme_button_foreground_normal") 151 | } 152 | 153 | &.horizontal { 154 | > marks { 155 | color: gtkalpha( 156 | gtk("@theme_button_foreground_normal"), 157 | 0.2 158 | ); 159 | &.top { margin-bottom: $_marks_distance; } 160 | &.bottom { margin-top: $_marks_distance; } 161 | 162 | indicator { 163 | background-color: gtkalpha( 164 | gtk("@theme_button_foreground_normal"), 165 | 0.2 166 | ); 167 | min-height: $_marks_length; 168 | min-width: 1px; 169 | } 170 | } 171 | 172 | > value.left { margin-right: 9px; } 173 | > value.right { margin-left: 9px; } 174 | 175 | &.fine-tune >marks { 176 | &.top { margin-top: 3px; } 177 | &.bottom { margin-bottom: 3px; } 178 | 179 | indicator { min-height: ($_marks_length - 3px); } 180 | } 181 | } 182 | 183 | &.vertical { 184 | > marks { 185 | color: gtkalpha( 186 | gtk("@theme_button_foreground_normal"), 187 | 0.2 188 | ); 189 | &.top { margin-right: $_marks_distance; } 190 | &.bottom { margin-left: $_marks_distance; } 191 | 192 | indicator { 193 | background-color: gtkalpha( 194 | gtk("@theme_button_foreground_normal"), 195 | 0.2 196 | ); 197 | min-height: 1px; 198 | min-width: $_marks_length; 199 | } 200 | } 201 | 202 | > value.top { margin-bottom: 9px; } 203 | > value.bottom { margin-top: 9px; } 204 | 205 | &.fine-tune >marks { 206 | &.top { margin-left: 3px; } 207 | &.bottom { margin-right: 3px; } 208 | 209 | indicator { min-height: ($_marks_length - 3px); } 210 | } 211 | } 212 | 213 | } 214 | -------------------------------------------------------------------------------- /src/gtk4/widgets/_scrollbar.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /************** 4 | * Scrollbars * 5 | **************/ 6 | 7 | scrollbar { 8 | 9 | background-color: gtk("@theme_bg_color"); 10 | border-width: 0px; 11 | border-color: gtk("@theme_bg_color"); 12 | 13 | // Vertical padding (for vertical scroll bar, obviously) is done here for proper distance to the window border, 14 | // horizontal padding is done on the trough below to ensure its hit area touches the window side. 15 | padding: 5px 0px; 16 | 17 | &.vertical { 18 | 19 | &:dir(rtl) { 20 | border-right: 1px solid gtk("@borders"); 21 | } 22 | 23 | &:dir(ltr) { 24 | border-left: 1px solid gtk("@borders"); 25 | } 26 | 27 | &.right { 28 | &:dir(rtl) { 29 | border-right: none; 30 | } 31 | border-left: 1px solid gtk("@borders"); 32 | } 33 | 34 | &.left { 35 | &:dir(ltr) { 36 | border-left: none; 37 | } 38 | border-right: 1px solid gtk("@borders"); 39 | } 40 | } 41 | 42 | &.horizontal { 43 | border-top: 1px solid gtk("@borders"); 44 | 45 | padding: 0px 5px; 46 | 47 | &.bottom { 48 | border-top: 1px solid gtk("@borders"); 49 | } 50 | 51 | &.top { 52 | border-top: none; 53 | border-bottom: 1px solid gtk("@borders"); 54 | } 55 | } 56 | 57 | button { 58 | min-width: 14px; 59 | min-height: 14px; 60 | margin: 0px; 61 | padding: 0px 0px; 62 | border: none; 63 | border-radius: 0px; 64 | background-image: none; 65 | background-color: transparent; 66 | color: transparent; 67 | box-shadow: none; 68 | &:hover { 69 | border: none; 70 | background-image: none; 71 | background-color: gtk("@theme_bg_color"); 72 | color: transparent; 73 | } 74 | &:active, 75 | &:active:hover { 76 | border: none; 77 | background-image: none; 78 | background-color: gtk("@theme_bg_color"); 79 | color: transparent; 80 | } 81 | &:disabled { 82 | border: none; 83 | background-color: gtk("@theme_bg_color"); 84 | background-image: none; 85 | color: transparent; 86 | } 87 | } 88 | 89 | // Overlay Scrollbars 90 | &.dragging, // if this isn't set, the scrollbars don't update their size correctly 91 | &.hovering { 92 | opacity: 0.991; 93 | } // probably a gtk bug 94 | &.overlay-indicator:not(.dragging):not(.hovering) { 95 | opacity: 0.999; 96 | } // 97 | 98 | &.overlay-indicator { 99 | border: none; 100 | 101 | &.vertical { 102 | border:none; 103 | } 104 | 105 | &.horizontal { 106 | border:none; 107 | } 108 | 109 | background: none; 110 | 111 | slider { 112 | background-image: gtkoverlayalpha(gtk("@theme_bg_color"), gtkalpha(gtk("@theme_button_foreground_normal"), 0.5*0.5*0.7), 0.75); 113 | } 114 | } 115 | 116 | trough { 117 | // Complements the padding on the scrollbar itself. 118 | margin: 0px 5px; 119 | min-width: 6px; 120 | min-height: 14px; 121 | background-color: transparent; 122 | } 123 | 124 | &:hover { 125 | trough { 126 | slider { 127 | background-image: gtkoverlay(gtk("@theme_bg_color"), gtkalpha(gtk("@theme_button_foreground_normal"), 0.5*0.5)); 128 | box-shadow: 0 0 0 1px gtkalpha(gtk("@theme_button_foreground_normal"), 0.5*0.9) inset; 129 | 130 | &:hover { 131 | background-image: gtkoverlay(gtk("@theme_bg_color"), gtkalpha(gtk("@theme_button_decoration_hover"), 0.5)); 132 | box-shadow: 0 0 0 1px gtkalpha(gtk("@theme_button_decoration_hover"), 0.9) inset; 133 | } 134 | } 135 | } 136 | } 137 | 138 | &.horizontal trough { 139 | margin: 5px 0px; 140 | min-width: 14px; 141 | min-height: 6px; 142 | } 143 | 144 | *:focus ~ &, 145 | & ~ *:focus { 146 | 147 | &:hover { 148 | slider { 149 | background-image: gtkoverlay(gtk("@theme_bg_color"), gtkalpha(gtk("@theme_button_decoration_hover"), 0.5)); 150 | box-shadow: 0 0 0 1px gtkalpha(gtk("@theme_button_decoration_hover"), 0.9) inset; 151 | } 152 | } 153 | 154 | &.overlay-indicator { 155 | slider { 156 | background-image: gtkoverlayalpha(gtk("@theme_bg_color"), gtkalpha(gtk("@theme_button_decoration_focus"), 0.5*0.7), 0.75); 157 | } 158 | 159 | &:hover { 160 | slider { 161 | background-image: gtkoverlay(gtk("@theme_bg_color"), gtkalpha(gtk("@theme_button_decoration_hover"), 0.5)); 162 | box-shadow: 0 0 0 1px gtkalpha(gtk("@theme_button_decoration_hover"), 0.9) inset; 163 | } 164 | } 165 | } 166 | } 167 | 168 | slider { 169 | transition-duration: 0.1s; 170 | min-width: 6px; 171 | min-height: 30px; 172 | border-radius: 15px; 173 | background-clip: padding-box; 174 | background-image: gtkoverlay(gtk("@theme_bg_color"), gtkalpha(gtk("@theme_button_foreground_normal"), 0.5*0.5*0.7)); 175 | box-shadow: 0 0 0 1px gtkalpha(gtk("@theme_button_foreground_normal"), 0.5*0.7*0.9) inset; 176 | } 177 | 178 | // GTK WebKit scrollbar paint code cannot deal with negative margins properly, 179 | // causing the scrollbar slider turn invisible. 180 | :not(webkitwebview) & slider { 181 | margin: -9px; 182 | margin-bottom: -6px; 183 | margin-top: -6px; 184 | // To keep the ability to drag the slider from the edge of the screen 185 | border: 5px solid transparent; 186 | } 187 | 188 | &.horizontal slider { 189 | transition-duration: 0.1s; 190 | min-width: 30px; 191 | min-height: 6px; 192 | } 193 | 194 | :not(webkitwebview) &.horizontal slider { 195 | margin: -9px; 196 | margin-left: -6px; 197 | margin-right: -6px; 198 | } 199 | } 200 | -------------------------------------------------------------------------------- /src/gtk4/widgets/_sidebar.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /*********** 4 | * Sidebar * 5 | ***********/ 6 | 7 | @mixin selected-item-highlight { 8 | @if $new-highlight { 9 | background-color: gtk("@theme_selected_bg_color"); 10 | color: gtk("@theme_button_foreground_active"); 11 | border-right: 3px 12 | solid 13 | gtk("@theme_button_decoration_focus"); 14 | border-top: 0; 15 | border-bottom: 0; 16 | border-left: 0; 17 | border-radius: 0px; 18 | } 19 | } 20 | @mixin selected-item-highlight-rtl { 21 | @if $new-highlight { 22 | background-color: gtk("@theme_selected_bg_color"); 23 | color: gtk("@theme_button_foreground_active"); 24 | border-left: 3px 25 | solid 26 | gtk("@theme_button_decoration_focus"); 27 | border-top: 0; 28 | border-bottom: 0; 29 | border-right: 0; 30 | border-radius: 0px; 31 | } 32 | } 33 | 34 | .sidebar { 35 | border-radius: 0px; 36 | border-style: none; 37 | background-color: gtk("@theme_base_color"); 38 | 39 | &:selected { 40 | @extend %selected_items; 41 | } 42 | 43 | &:not(separator) { 44 | &:dir(ltr), 45 | &.left, 46 | &.left:dir(rtl) { 47 | border-right: 1px solid $ligh_border_color; 48 | border-left: none; 49 | } 50 | 51 | &:dir(rtl), 52 | &.right { 53 | border-left: 1px solid $ligh_border_color; 54 | border-right: none; 55 | } 56 | } 57 | 58 | .sidebar-header > separator { 59 | background-color: $ligh_border_color; 60 | } 61 | 62 | row { 63 | &:hover { 64 | } 65 | 66 | &.activatable { 67 | border: 0; 68 | &:dir(ltr) { 69 | border-right: 3px solid transparent; 70 | } 71 | &:dir(rtl) { 72 | border-left: 3px solid transparent; 73 | } 74 | 75 | &.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411 76 | 77 | &:hover:dir(ltr) { 78 | @include selected-item-highlight(); 79 | } 80 | &:hover:dir(rtl) { 81 | @include selected-item-highlight-rtl(); 82 | } 83 | 84 | &:active:dir(ltr) { 85 | @include selected-item-highlight(); 86 | } 87 | &:active:dir(rtl) { 88 | @include selected-item-highlight-rtl(); 89 | } 90 | 91 | &:selected { 92 | &:dir(ltr) { 93 | @include selected-item-highlight(); 94 | } 95 | &:dir(rtl) { 96 | @include selected-item-highlight-rtl(); 97 | } 98 | 99 | &:active { 100 | &:dir(ltr) { 101 | @include selected-item-highlight(); 102 | } 103 | &:dir(rtl) { 104 | @include selected-item-highlight-rtl(); 105 | } 106 | } 107 | 108 | &.has-open-popup, 109 | &:hover { 110 | &:dir(ltr) { 111 | @include selected-item-highlight(); 112 | } 113 | &:dir(rtl) { 114 | @include selected-item-highlight-rtl(); 115 | } 116 | } 117 | 118 | &:backdrop { 119 | background-color: gtk( 120 | "@theme_unfocused_selected_bg_color_alt" 121 | ); 122 | } 123 | } 124 | } 125 | 126 | &:selected { 127 | @extend %selected_items; 128 | } 129 | } 130 | paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }} 131 | } 132 | separator.sidebar { 133 | background-color: gtk("@borders"); 134 | } 135 | 136 | // Places sidebar is a special case, since the view here have to look like chrome not content, so we override text color 137 | placessidebar { 138 | > viewport.frame { 139 | border-style: none; 140 | } 141 | 142 | row { 143 | // Needs overriding of the GtkListBoxRow padding 144 | min-height: 36px; 145 | padding: 0px; 146 | 147 | // Using margins/padding directly in the SidebarRow 148 | // will make the animation of the new bookmark row jump 149 | > revealer { 150 | padding: 0 14px; 151 | } 152 | 153 | &:selected { 154 | color: gtk("@theme_selected_fg_color"); 155 | } 156 | 157 | &:disabled { 158 | color: gtk("@insensitive_fg_color"); 159 | } 160 | 161 | &:backdrop { 162 | color: gtk("@theme_unfocused_fg_color"); 163 | 164 | &:selected { 165 | color: gtk( 166 | "@theme_unfocused_selected_bg_color_alt" 167 | ); 168 | } 169 | 170 | &:disabled { 171 | color: gtk("@insensitive_unfocused_fg_color"); 172 | } 173 | } 174 | 175 | image.sidebar-icon { 176 | &:dir(ltr) { 177 | padding-right: 8px; 178 | } 179 | &:dir(rtl) { 180 | padding-left: 8px; 181 | } 182 | } 183 | 184 | label.sidebar-label { 185 | &:dir(ltr) { 186 | padding-right: 2px; 187 | } 188 | &:dir(rtl) { 189 | padding-left: 2px; 190 | } 191 | } 192 | 193 | @at-root button.sidebar-button { 194 | @include neobutton(toolbutton); 195 | 196 | min-height: 26px; 197 | min-width: 26px; 198 | margin-top: 3px; 199 | margin-bottom: 3px; 200 | padding: 0; 201 | } 202 | 203 | // in the sidebar case it makes no sense to click the selected row 204 | &:selected:active { 205 | box-shadow: none; 206 | } 207 | 208 | &.sidebar-placeholder-row { 209 | padding: 0 8px; 210 | min-height: 2px; 211 | background-image: none; 212 | background-clip: content-box; 213 | } 214 | 215 | &.sidebar-new-bookmark-row { 216 | color: gtk("@theme_selected_bg_color"); 217 | } 218 | 219 | // &:drop(active):not(:disabled) { 220 | // color: $drop_target_color; 221 | // box-shadow: inset 0 1px $drop_target_color, 222 | // inset 0 -1px $drop_target_color; 223 | // 224 | // &:selected { 225 | // color: $selected_fg_color; 226 | // background-color: $drop_target_color; 227 | // } 228 | // } 229 | } 230 | } 231 | 232 | placesview { 233 | .server-list-button > image { 234 | -gtk-icon-transform: rotate(0turn); 235 | } 236 | 237 | .server-list-button:checked > image { 238 | -gtk-icon-transform: rotate(-0.5turn); 239 | } 240 | 241 | row.activatable:hover { 242 | background-color: transparent; 243 | } 244 | 245 | // this selects the "connect to server" label 246 | > actionbar > revealer > box > label { 247 | padding-left: 8px; 248 | padding-right: 8px; 249 | } 250 | } 251 | 252 | stacksidebar { 253 | &.sidebar { 254 | row { 255 | padding: 10px 4px; 256 | > label { 257 | padding-left: 6px; 258 | padding-right: 6px; 259 | } 260 | &.needs-attention > .label { 261 | @extend %needs_attention; 262 | background-size: 6px 6px, 0 0; 263 | } 264 | } 265 | } 266 | } 267 | -------------------------------------------------------------------------------- /src/gtk4/widgets/_spinbutton.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /***************** 4 | * GtkSpinButton * 5 | *****************/ 6 | spinbutton { 7 | text { 8 | @extend %entry; 9 | 10 | border-radius: 0px; 11 | } 12 | 13 | &:not(.vertical) { 14 | // in this horizontal configuration, the whole spinbutton 15 | // behaves as the entry, so we extend the entry styling 16 | // and nuke the style on the internal entry 17 | @extend %entry; 18 | 19 | padding: 0; 20 | 21 | text { 22 | min-width: 28px; 23 | // reset all the other props since the spinbutton node is styled here 24 | margin: 0; 25 | background: none; 26 | background-color: transparent; 27 | border: none; 28 | border-radius: 0; 29 | box-shadow: none; 30 | 31 | &:backdrop:disabled { 32 | background-color: transparent; 33 | } 34 | } 35 | 36 | button { 37 | @include neobutton(toolbutton); 38 | 39 | &:hover { 40 | color: gtk("@theme_view_hover_decoration_color"); 41 | 42 | // disable button's hover background override 43 | &:not(:checked):not(:active) { 44 | background: none; 45 | } 46 | } 47 | } 48 | } 49 | 50 | // Vertical 51 | &.vertical { 52 | // in the vertical configuration, we treat the spinbutton 53 | // as a box, and tweak the style of the entry in the middle 54 | // so that it's linked 55 | 56 | // FIXME: this should not be set at all, but otherwise it gets the wrong 57 | // color 58 | &:disabled { 59 | color: gtk("@insensitive_base_fg_color"); 60 | } 61 | 62 | &:backdrop:disabled { 63 | color: gtk("@theme_unfocused_view_text_color"); 64 | } 65 | 66 | &:drop(active) { 67 | border-color: transparent; 68 | box-shadow: none; 69 | } 70 | 71 | entry { 72 | margin: 0px; 73 | min-height: 26px; 74 | min-width: 26px; 75 | border-style: none solid none solid; 76 | border-color: gtk("@borders"); 77 | padding: 0; 78 | border-radius: 0; 79 | &:disabled { 80 | color: gtk("@insensitive_base_fg_color"); 81 | background-color: gtk("@insensitive_base_color"); 82 | border-color: gtk("@insensitive_borders"); 83 | } 84 | &:backdrop:disabled { 85 | color: gtk("@theme_unfocused_view_text_color"); 86 | background-color: gtk( 87 | "@theme_unfocused_view_bg_color" 88 | ); 89 | border-color: gtk("@unfocused_insensitive_borders"); 90 | } 91 | } 92 | 93 | button { 94 | &:hover { 95 | color: gtk("@theme_view_hover_decoration_color"); 96 | 97 | // disable button's hover background override 98 | &:not(:checked):not(:active) { 99 | background: none; 100 | } 101 | } 102 | } 103 | 104 | button.up { 105 | border-radius: 3px 3px 0 0; 106 | border-style: solid solid none solid; 107 | } 108 | 109 | button.down { 110 | border-radius: 0 0 3px 3px; 111 | border-style: none solid solid solid; 112 | } 113 | } 114 | 115 | // Misc 116 | treeview &:not(.vertical) { 117 | min-height: 0; 118 | border-style: none; 119 | border-radius: 0; 120 | 121 | entry { 122 | min-height: 0; 123 | padding: 1px 2px; 124 | } 125 | } 126 | } 127 | -------------------------------------------------------------------------------- /src/gtk4/widgets/_switch.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /********** 4 | * Switch * 5 | **********/ 6 | 7 | $switch-height: 24px; 8 | 9 | switch { 10 | margin: 2px; 11 | font-weight: bold; 12 | font-size: smaller; 13 | border: 1px solid; 14 | border-radius: 12px; 15 | color: transparent; 16 | background-color: gtkalpha( 17 | gtk("@theme_button_foreground_normal"), 18 | 0.05 19 | ); 20 | border-color: gtkalpha( 21 | gtk("@theme_button_foreground_normal"), 22 | 0.222 23 | ); 24 | text-shadow: none; 25 | 26 | &:disabled { 27 | background-color: gtkalpha( 28 | gtk("@theme_button_foreground_normal"), 29 | 0.03 30 | ); 31 | } 32 | 33 | &:checked { 34 | background: gtkalpha( 35 | gtk("@theme_button_decoration_hover"), 36 | 0.333 37 | ); 38 | border-color: gtk("@theme_button_decoration_hover"); 39 | 40 | &:disabled { 41 | background: gtkalpha( 42 | gtk("@theme_button_decoration_hover"), 43 | 0.222 44 | ); 45 | border-color: gtkalpha( 46 | gtk("@theme_button_decoration_hover"), 47 | 0.777 48 | ); 49 | } 50 | } 51 | 52 | &:dir(ltr) { 53 | &:checked slider { 54 | margin-left: 1px; 55 | } 56 | &:not(:checked) slider { 57 | margin-right: 1px; 58 | } 59 | } 60 | 61 | slider { 62 | min-width: $switch-height; 63 | min-height: $switch-height; 64 | margin: -($switch-height / 6); 65 | border: 1px solid; 66 | border-radius: $switch-height / 2; 67 | 68 | box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.125); 69 | border-color: gtk("@borders"); 70 | @include bg-gradient( 71 | gtk("@theme_button_background_normal") 72 | ); 73 | } 74 | 75 | &:hover slider { 76 | border-color: gtk("@theme_button_decoration_hover"); 77 | } 78 | 79 | &:focus slider { 80 | border-color: gtk("@theme_button_decoration_focus"); 81 | } 82 | 83 | &:disabled slider { 84 | box-shadow: none; 85 | color: gtk("@theme_button_foreground_insensitive"); 86 | border-color: gtk("@insensitive_borders"); 87 | background: gtk("@theme_button_background_insensitive"); 88 | 89 | &:active, 90 | &:checked { 91 | color: gtk( 92 | "@theme_button_foreground_active_insensitive" 93 | ); 94 | } 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /src/gtk4/widgets/_toolbar.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /************ 4 | * Toolbars * 5 | ************/ 6 | %toolbar { 7 | padding: 4px; 8 | background-color: gtk("@theme_bg_color"); 9 | } 10 | toolbar { 11 | @extend %toolbar; 12 | padding: 4px 3px 3px 4px; 13 | &:backdrop { 14 | background-color: gtk("@theme_unfocused_bg_color"); 15 | box-shadow: none; 16 | } 17 | button { 18 | margin: 2px; 19 | padding: 3px; 20 | &.image-button, 21 | &.text-button.image-button { 22 | padding: 3px; 23 | } 24 | } 25 | separator { 26 | margin-left: 3px; 27 | margin-right: 3px; 28 | } 29 | entry { 30 | margin: 3px; 31 | } 32 | // on OSD 33 | .osd & { 34 | background-color: transparent; 35 | } 36 | &.osd { 37 | padding: 13px; 38 | border: none; 39 | border-radius: $r; 40 | background-color: gtk("@theme_bg_color"); 41 | &:backdrop { 42 | border-color: gtk("@unfocused_borders"); 43 | background-color: gtk("@theme_unfocused_bg_color"); 44 | box-shadow: none; 45 | } 46 | &.left, 47 | &.right, 48 | &.top, 49 | &.bottom { 50 | border-radius: 0; 51 | } // positional classes for `attached` osd toolbars 52 | } 53 | } 54 | 55 | //searchbar, location-bar & inline-toolbar 56 | .inline-toolbar { 57 | @extend %toolbar; 58 | @extend %inset-bar; 59 | border-width: 0px 0px 1px 0px; 60 | padding: 3px; 61 | border-radius: 0; 62 | } 63 | searchbar > revealer > box, 64 | .location-bar { 65 | @extend %toolbar; 66 | @extend %inset-bar; 67 | border-width: 0px 0px 1px 0px; 68 | padding: 3px; 69 | } 70 | 71 | %inset-bar { 72 | border-style: solid; 73 | border-color: gtk("@borders"); 74 | text-shadow: none; 75 | background-color: gtk("@theme_bg_color"); 76 | } 77 | -------------------------------------------------------------------------------- /src/gtk4/widgets/_tooltips.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /************ 4 | * Tooltips * 5 | ************/ 6 | 7 | tooltip { 8 | &.background { 9 | // background-color needs to be set this way otherwise it gets drawn twice 10 | // see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details. 11 | background-color: gtk("@tooltip_background"); 12 | background-clip: padding-box; 13 | } 14 | 15 | color: gtk("@tooltip_text"); 16 | padding: 4px; /* not working */ 17 | border-radius: $r; 18 | box-shadow: none; // otherwise it gets inherited by windowframe.csd 19 | text-shadow: none; 20 | border: 1px solid gtk("@tooltip_border"); 21 | &.window-frame.csd { 22 | background-color: transparent; 23 | box-shadow: none; 24 | } 25 | decoration { 26 | background-color: transparent; 27 | } 28 | } 29 | 30 | tooltip * { 31 | //Yeah this is ugly 32 | padding: 0px; 33 | background-color: transparent; 34 | color: gtk("@tooltip_text"); // just to be sure 35 | } 36 | -------------------------------------------------------------------------------- /src/gtk4/widgets/_typography.scss: -------------------------------------------------------------------------------- 1 | .large-title { 2 | font-weight: 300; 3 | font-size: 24pt; 4 | } 5 | .title { 6 | font-weight: 700; 7 | font-size: 13pt; 8 | } 9 | .title-1 { 10 | font-weight: 800; 11 | font-size: 20pt; 12 | } 13 | .title-2 { 14 | font-weight: 800; 15 | font-size: 15pt; 16 | } 17 | .title-3 { 18 | font-weight: 700; 19 | font-size: 15pt; 20 | } 21 | .title-4 { 22 | font-weight: 700; 23 | font-size: 13pt; 24 | } 25 | .heading { 26 | font-weight: 700; 27 | font-size: 11pt; 28 | } 29 | .body { 30 | font-weight: 400; 31 | font-size: 11pt; 32 | } 33 | .caption-heading { 34 | font-weight: 700; 35 | font-size: 9pt; 36 | } 37 | .caption { 38 | font-weight: 400; 39 | font-size: 9pt; 40 | } 41 | -------------------------------------------------------------------------------- /src/gtk4/widgets/_window_decorations.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /********************** 4 | * Window Decorations * 5 | *********************/ 6 | 7 | dialog, 8 | window { 9 | $shadow: rgba(0, 0, 0, 0.5); 10 | 11 | //border: 1px solid transparent; 12 | border-radius: 6px 6px 0 0; 13 | border-width: 0px; 14 | box-shadow: 0px 0px 16px $shadow, 15 | 0px 2px 8px scale-color($shadow, $alpha: -40%); 16 | 17 | margin: 0px; 18 | 19 | &.maximized { 20 | border-radius: 0; 21 | } 22 | 23 | .maximized &, 24 | .fullscreen &, 25 | .tiled & { 26 | border-radius: 0; 27 | } 28 | .popup & { 29 | border-radius: $r; 30 | box-shadow: 0px 3px 10px -4px rgba(0, 0, 0, 0.27), 31 | 0px 5px 8px -4px rgba(0, 0, 0, 0.17); 32 | } 33 | // server-side decorations as used by mutter 34 | .ssd & { 35 | box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.1); 36 | } 37 | .csd & { 38 | border-radius: 6px; 39 | &.popup { 40 | box-shadow: 0px 3px 10px -4px rgba(0, 0, 0, 0.27), 41 | 0px 5px 8px -4px rgba(0, 0, 0, 0.17); 42 | } 43 | &.tooltip { 44 | box-shadow: none; 45 | } 46 | &.message-dialog { 47 | box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.5); 48 | } 49 | } 50 | .solid-csd & { 51 | border-radius: 0; 52 | margin: 0; 53 | padding: 0px; 54 | border: 5px solid gtk("@theme_titlebar_background"); 55 | background-color: gtk( 56 | "@theme_titlebar_background_light" 57 | ); 58 | box-shadow: none; 59 | } 60 | } 61 | 62 | dialog.solid-csd, 63 | window.solid-csd { 64 | headerbar.titlebar, 65 | paned.titlebar, 66 | .titlebar, 67 | paned.titlebar headerbar { 68 | border-radius: 0; 69 | } 70 | } 71 | 72 | headerbar.titlebar { 73 | min-height: 46px; 74 | } 75 | 76 | headerbar, 77 | .titlebar { 78 | $titlebutton-size: 18px 18px; 79 | 80 | windowcontrols button { 81 | min-height: 18px; 82 | min-width: 18px; 83 | padding: 0; 84 | 85 | $extra_margin: 14px; 86 | $extra_padding: $extra_margin*2; // extend to screen border 87 | 88 | margin-top: -$extra_margin; 89 | padding-top: $extra_padding; 90 | margin-bottom: -$extra_margin; 91 | padding-bottom: $extra_padding; 92 | 93 | &:dir(ltr) { 94 | margin-right: -$extra_margin/2; 95 | padding-right: $extra_margin; 96 | } 97 | 98 | &:dir(rtl) { 99 | margin-left: -$extra_margin/2; 100 | padding-left: $extra_margin; 101 | } 102 | 103 | image { 104 | color: transparent; 105 | } 106 | 107 | &.close, 108 | &.close:hover, 109 | &.close:active, 110 | &.close:backdrop, 111 | &.maximize, 112 | &.maximize:hover, 113 | &.maximize:active, 114 | &.maximize:backdrop, 115 | &.minimize, 116 | &.minimize:hover, 117 | &.minimize:active, 118 | &.minimize:backdrop { 119 | border-color: transparent; 120 | border-image: none; 121 | box-shadow: none; 122 | background-color: transparent; 123 | background-position: center; 124 | background-repeat: no-repeat; 125 | background-size: $titlebutton-size; 126 | } 127 | 128 | &.close { 129 | background-image: -gtk-recolor( 130 | url("../assets/breeze-close-symbolic.svg"), 131 | color gtk("@theme_text_color") 132 | ); 133 | -gtk-icon-source: none; 134 | } 135 | &.close:hover { 136 | background-image: -gtk-recolor( 137 | url("../assets/breeze-close-hover-symbolic.svg") 138 | ); 139 | } 140 | &.close:active { 141 | background-image: -gtk-recolor( 142 | url("../assets/breeze-close-active-symbolic.svg") 143 | ); 144 | } 145 | &.close:backdrop { 146 | background-image: -gtk-recolor( 147 | url("../assets/breeze-close-symbolic.svg") 148 | ); 149 | } 150 | 151 | &.maximize { 152 | background-image: -gtk-recolor( 153 | url("../assets/breeze-maximize-symbolic.svg") 154 | ); 155 | } 156 | &.maximize:hover { 157 | background-image: -gtk-recolor( 158 | url("../assets/breeze-maximize-hover-symbolic.svg") 159 | ); 160 | } 161 | &.maximize:active { 162 | background-image: -gtk-recolor( 163 | url("../assets/breeze-maximize-active-symbolic.svg") 164 | ); 165 | } 166 | &.maximize:backdrop { 167 | background-image: -gtk-recolor( 168 | url("../assets/breeze-maximize-symbolic.svg") 169 | ); 170 | } 171 | 172 | &.minimize { 173 | background-image: -gtk-recolor( 174 | url("../assets/breeze-minimize-symbolic.svg") 175 | ); 176 | } 177 | &.minimize:hover { 178 | background-image: -gtk-recolor( 179 | url("../assets/breeze-minimize-hover-symbolic.svg") 180 | ); 181 | } 182 | &.minimize:active { 183 | background-image: -gtk-recolor( 184 | url("../assets/breeze-minimize-active-symbolic.svg") 185 | ); 186 | } 187 | &.minimize:backdrop { 188 | background-image: -gtk-recolor( 189 | url("../assets/breeze-minimize-symbolic.svg") 190 | ); 191 | } 192 | 193 | .maximized & { 194 | &.maximize { 195 | background-image: -gtk-recolor( 196 | url("../assets/breeze-maximized-symbolic.svg") 197 | ); 198 | } 199 | &.maximize:hover { 200 | background-image: -gtk-recolor( 201 | url("../assets/breeze-maximized-hover-symbolic.svg") 202 | ); 203 | } 204 | &.maximize:active { 205 | background-image: -gtk-recolor( 206 | url("../assets/breeze-maximized-active-symbolic.svg") 207 | ); 208 | } 209 | &.maximize:backdrop { 210 | background-image: -gtk-recolor( 211 | url("../assets/breeze-maximized-symbolic.svg") 212 | ); 213 | } 214 | } 215 | } 216 | } 217 | 218 | headerbar.selection-mode button.titlebutton, 219 | .titlebar.selection-mode button.titlebutton { 220 | text-shadow: none; 221 | &:backdrop { 222 | -gtk-icon-shadow: none; 223 | } 224 | } 225 | -------------------------------------------------------------------------------- /src/settings.ini: -------------------------------------------------------------------------------- 1 | [Settings] 2 | gtk-cursor-theme-name=breeze_cursors 3 | gtk-modules=colorreload-gtk-module 4 | gtk-error-bell=0 5 | --------------------------------------------------------------------------------