diff --git a/src/assets/breeze-close-active-symbolic.svg b/src/assets/breeze-close-active-symbolic.svg new file mode 100644 index 0000000..11ebb3c --- /dev/null +++ b/src/assets/breeze-close-active-symbolic.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/breeze-close-hover-symbolic.svg b/src/assets/breeze-close-hover-symbolic.svg new file mode 100644 index 0000000..d0f1d51 --- /dev/null +++ b/src/assets/breeze-close-hover-symbolic.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/breeze-close-symbolic.svg b/src/assets/breeze-close-symbolic.svg new file mode 100644 index 0000000..2559f51 --- /dev/null +++ b/src/assets/breeze-close-symbolic.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/breeze-maximize-active-symbolic.svg b/src/assets/breeze-maximize-active-symbolic.svg new file mode 100644 index 0000000..92c6694 --- /dev/null +++ b/src/assets/breeze-maximize-active-symbolic.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/breeze-maximize-hover-symbolic.svg b/src/assets/breeze-maximize-hover-symbolic.svg new file mode 100644 index 0000000..20481e1 --- /dev/null +++ b/src/assets/breeze-maximize-hover-symbolic.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/breeze-maximize-symbolic.svg b/src/assets/breeze-maximize-symbolic.svg new file mode 100644 index 0000000..0b86490 --- /dev/null +++ b/src/assets/breeze-maximize-symbolic.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/breeze-maximized-active-symbolic.svg b/src/assets/breeze-maximized-active-symbolic.svg new file mode 100644 index 0000000..ff58b7e --- /dev/null +++ b/src/assets/breeze-maximized-active-symbolic.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/breeze-maximized-hover-symbolic.svg b/src/assets/breeze-maximized-hover-symbolic.svg new file mode 100644 index 0000000..792fc32 --- /dev/null +++ b/src/assets/breeze-maximized-hover-symbolic.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/breeze-maximized-symbolic.svg b/src/assets/breeze-maximized-symbolic.svg new file mode 100644 index 0000000..a7ff2ae --- /dev/null +++ b/src/assets/breeze-maximized-symbolic.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/breeze-minimize-active-symbolic.svg b/src/assets/breeze-minimize-active-symbolic.svg new file mode 100644 index 0000000..fd3232c --- /dev/null +++ b/src/assets/breeze-minimize-active-symbolic.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/breeze-minimize-hover-symbolic.svg b/src/assets/breeze-minimize-hover-symbolic.svg new file mode 100644 index 0000000..a665ca9 --- /dev/null +++ b/src/assets/breeze-minimize-hover-symbolic.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/breeze-minimize-symbolic.svg b/src/assets/breeze-minimize-symbolic.svg new file mode 100644 index 0000000..41321f5 --- /dev/null +++ b/src/assets/breeze-minimize-symbolic.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/build_theme.sh b/src/build_theme.sh index 4386e53..f565446 100755 --- a/src/build_theme.sh +++ b/src/build_theme.sh @@ -1,110 +1,111 @@ #!/bin/sh set -e # Usage: create_folders create_folders () { for j in gtk-2.0 gtk-3.0; do if ! [ -d "$1/$j" ]; then mkdir -p "$1/$j" fi done } # Usage: build_sass build_sass() { if command -v sassc >/dev/null 2>&1; then sassc -I "$3" "$1" "$2" else sass -I "$3" --cache-location /tmp/sass-cache "$1" "$2" fi } # Usage: install_theme # If is unset or empty, install to $HOME/.local/share/themes/$THEME_NAME install_theme () { THEME_INSTALL_TARGET="$3" if [ -z "${THEME_INSTALL_TARGET}" ]; then THEME_INSTALL_TARGET="${HOME}/.local/share/themes/$2" fi echo "Installing into ${THEME_INSTALL_TARGET}" mkdir -p "${THEME_INSTALL_TARGET}" for dir in assets gtk-2.0 gtk-3.0; do if [ -d "${THEME_INSTALL_TARGET}/$dir" ]; then rm -rf "${THEME_INSTALL_TARGET:?}/$dir" fi mv -f "$1/$dir" "${THEME_INSTALL_TARGET}" done rmdir "$1" } # Usage render_theme render_theme () { THEME_BUILD_DIR="$(mktemp -d)" create_folders "${THEME_BUILD_DIR}" cp -R gtk2/* "${THEME_BUILD_DIR}/gtk-2.0/" python3 render_assets.py -c "$1" -a "${THEME_BUILD_DIR}/assets" \ -g "${THEME_BUILD_DIR}/gtk-2.0" -G "${THEME_BUILD_DIR}" -b "$4" build_sass gtk3/gtk.scss "${THEME_BUILD_DIR}/gtk-3.0/gtk.css" "${THEME_BUILD_DIR}" rm -f "${THEME_BUILD_DIR}/_global.scss" install_theme "${THEME_BUILD_DIR}" "$2" "$3" } COLOR_SCHEME="" INSTALL_TARGET="" THEME_NAME="" COLOR_SCHEME_ROOT="/usr/share/color-schemes" while [ "$#" -gt 0 ]; do case "$1" in -h|--help) echo "$0: build Breeze theme" echo "Usage: $0 [-c COLOR_SCHEME] [-r COLOR_SCHEME_ROOT] [-t TARGET_DIRECTORY]" echo echo "Arguments:" echo " -h, --help show this help" echo " -c COLOR_SCHEME use color scheme with name COLOR_SCHEME. If unset or" echo " empty, the value from ~/.config/kdeglobals is used" echo " -r COLOR_SCHEME_ROOT The base path of all color schemes or" echo " /usr/share/color-schemes if unset" echo " -t TARGET_DIRECTORY the directory to install the color scheme. If unset or" echo " empty, it is installed into" echo " ~/.local/share/themes/THEME_NAME" exit 0 ;; -c) shift COLOR_SCHEME="$1" ;; -t) shift INSTALL_TARGET="$1" ;; -r) shift COLOR_SCHEME_ROOT="$1" ;; esac shift done if [ -z "${COLOR_SCHEME}" ]; then THEME_NAME="Breeze" if [ -f "${HOME}/.config/kdeglobals" ]; then COLOR_SCHEME="${HOME}/.config/kdeglobals" else echo "${HOME}/.config/kdeglobals not found, using defaults" COLOR_SCHEME="${COLOR_SCHEME_ROOT}/Breeze.colors" fi else THEME_NAME="${COLOR_SCHEME}" if [ -f "${COLOR_SCHEME_ROOT}/${COLOR_SCHEME}.colors" ]; then COLOR_SCHEME="${COLOR_SCHEME_ROOT}/${COLOR_SCHEME}.colors" elif [ -f "${HOME}/.local/share/color-schemes/${COLOR_SCHEME}.colors" ]; then COLOR_SCHEME="${HOME}/.local/share/color-schemes/${COLOR_SCHEME}.colors" else echo "colorscheme ${COLOR_SCHEME} not found" exit 1 fi fi -render_theme "${COLOR_SCHEME}" "${THEME_NAME}" "${INSTALL_TARGET}" "${COLOR_SCHEME_ROOT}/Breeze.colors" \ No newline at end of file +render_theme "${COLOR_SCHEME}" "${THEME_NAME}" "${INSTALL_TARGET}" "${COLOR_SCHEME_ROOT}/Breeze.colors" +cp -r assets/ "${INSTALL_TARGET}" \ No newline at end of file diff --git a/src/gtk3/applications/_chromium.scss b/src/gtk3/applications/_chromium.scss index 79cd85b..2f6ca38 100644 --- a/src/gtk3/applications/_chromium.scss +++ b/src/gtk3/applications/_chromium.scss @@ -1,23 +1,87 @@ window.background.chromium { background-color: gtk("@theme_base_color"); border-color: gtk("@borders"); menubar, .menubar { color: gtk("@theme_titlebar_foreground_backdrop"); background-color: gtk("@theme_bg_color"); &:backdrop { background-color: gtk("@theme_unfocused_bg_color"); color: gtk("@theme_titlebar_foreground_backdrop"); } } entry { background-color: gtk("@theme_base_color"); } &.csd { menubar, .menubar { background-color: gtk("@theme_titlebar_background"); &:backdrop { background-color: gtk("@theme_titlebar_background_backdrop"); } } } + + headerbar, + .titlebar { + button.titlebutton { + &.close { + color: transparent; + background-image: -gtk-scaled(url('../assets/titlebutton-close.png'),url('../assets/titlebutton-close@2.png')); + &:hover { + background-image: -gtk-scaled(url('../assets/titlebutton-close-hover.png'),url('../assets/titlebutton-close-hover@2.png')); + } + &:active { + background-image: -gtk-scaled(url('../assets/titlebutton-close-active.png'),url('../assets/titlebutton-close-active@2.png')); + } + &:backdrop { + background-image: -gtk-scaled(url('../assets/titlebutton-close-backdrop.png'),url('../assets/titlebutton-close-backdrop@2.png')); + } + } + + &.maximize { + color: transparent; + background-image: -gtk-scaled(url('../assets/titlebutton-maximize.png'),url('../assets/titlebutton-maximize@2.png')); + &:hover { + background-image: -gtk-scaled(url('../assets/titlebutton-maximize-hover.png'),url('../assets/titlebutton-maximize-hover@2.png')); + } + &:active { + background-image: -gtk-scaled(url('../assets/titlebutton-maximize-active.png'),url('../assets/titlebutton-maximize-active@2.png')); + } + &:backdrop { + background-image: -gtk-scaled(url('../assets/titlebutton-maximize-backdrop.png'),url('../assets/titlebutton-maximize-backdrop@2.png')); + } + } + &.minimize { + color: transparent; + background-image: -gtk-scaled(url('../assets/titlebutton-minimize.png'),url('../assets/titlebutton-minimize@2.png')); + &:hover { + background-image: -gtk-scaled(url('../assets/titlebutton-minimize-hover.png'),url('../assets/titlebutton-minimize-hover@2.png')); + } + &:active { + background-image: -gtk-scaled(url('../assets/titlebutton-minimize-active.png'),url('../assets/titlebutton-minimize-active@2.png')); + } + &:backdrop { + background-image: -gtk-scaled(url('../assets/titlebutton-minimize-backdrop.png'),url('../assets/titlebutton-minimize-backdrop@2.png')); + } + } + } + + .maximized & { + button.titlebutton { + &.maximize { + color: transparent; + background-image: -gtk-scaled(url('../assets/titlebutton-maximize-maximized.png'),url('../assets/titlebutton-maximize-maximized@2.png')); + &:hover { + background-image: -gtk-scaled(url('../assets/titlebutton-maximize-maximized-hover.png'),url('../assets/titlebutton-maximize-maximized-hover@2.png')); + } + &:active { + background-image: -gtk-scaled(url('../assets/titlebutton-maximize-maximized-active.png'),url('../assets/titlebutton-maximize-maximized-active@2.png')); + } + &:backdrop { + background-image: -gtk-scaled(url('../assets/titlebutton-maximize-maximized-backdrop.png'),url('../assets/titlebutton-maximize-maximized-backdrop@2.png')); + } + } + } + } + } } \ No newline at end of file diff --git a/src/gtk3/widgets/_window_decorations.scss b/src/gtk3/widgets/_window_decorations.scss index b6dc6ff..0fc816a 100644 --- a/src/gtk3/widgets/_window_decorations.scss +++ b/src/gtk3/widgets/_window_decorations.scss @@ -1,180 +1,195 @@ @charset "UTF-8"; /********************** * Window Decorations * *********************/ decoration { //border: 1px solid transparent; border-radius: $r $r 0 0; border-width: 0px; box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.5); /* this is used for the resize cursor area */ margin: 10px; .maximized &, .fullscreen &, .tiled & { border-radius: 0; } .popup & { border-radius: $r; box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1) } // server-side decorations as used by mutter .ssd &{ box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.1); } .csd & { border-radius: $r; &.popup { box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1) } &.tooltip { box-shadow: none; } &.message-dialog { box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.5) } } .solid-csd & { border-radius: 0; margin: 0; padding: 1px; border: none; background-color: gtk("@theme_titlebar_background_light"); box-shadow: none; } } headerbar, .titlebar { &.default-decoration button.titlebutton { padding: 1px; min-height: 18px; min-width: 18px; margin: 0; } + $titlebutton-size: 16px 16px; button.titlebutton { padding: 1px; &:hover, &:active, &:checked, &:backdrop, &:active:hover { transition: none; } &.close { padding: 1px; - color: transparent; border-image: none; box-shadow: none; background-position: center; background-repeat: no-repeat; - background-image: -gtk-scaled(url('../assets/titlebutton-close.png'),url('../assets/titlebutton-close@2.png')); + background-size: $titlebutton-size; + background-image: -gtk-recolor(url('../assets/breeze-close-symbolic.svg'), color gtk("@theme_text_color")); + -gtk-icon-source: none; + image { + color: transparent; + } } &.close:hover { border-color: transparent; background-color: transparent; - background-image: -gtk-scaled(url('../assets/titlebutton-close-hover.png'),url('../assets/titlebutton-close-hover@2.png')); + background-image: -gtk-recolor(url('../assets/breeze-close-hover-symbolic.svg')); } &.close:active { border-color: transparent; background-color: transparent; - background-image: -gtk-scaled(url('../assets/titlebutton-close-active.png'),url('../assets/titlebutton-close-active@2.png')); + background-image: -gtk-recolor(url('../assets/breeze-close-active-symbolic.svg')); } &.close:backdrop { border-color: transparent; background-color: transparent; - background-image: -gtk-scaled(url('../assets/titlebutton-close-backdrop.png'),url('../assets/titlebutton-close-backdrop@2.png')); + background-image: -gtk-recolor(url('../assets/breeze-close-symbolic.svg')); } &.maximize { padding: 1px; - color: transparent; border-image: none; box-shadow: none; background-position: center; background-repeat: no-repeat; - background-image: -gtk-scaled(url('../assets/titlebutton-maximize.png'),url('../assets/titlebutton-maximize@2.png')); + background-size: $titlebutton-size; + background-image: -gtk-recolor(url('../assets/breeze-maximize-symbolic.svg')); + image { + color: transparent; + } } &.maximize:hover { border-color: transparent; background-color: transparent; - background-image: -gtk-scaled(url('../assets/titlebutton-maximize-hover.png'),url('../assets/titlebutton-maximize-hover@2.png')); + background-size: contain; + background-image: -gtk-recolor(url('../assets/breeze-maximize-hover-symbolic.svg')); } &.maximize:active { border-color: transparent; background-color: transparent; - background-image: -gtk-scaled(url('../assets/titlebutton-maximize-active.png'),url('../assets/titlebutton-maximize-active@2.png')); + background-image: -gtk-recolor(url('../assets/breeze-maximize-active-symbolic.svg')); } &.maximize:backdrop { border-color: transparent; background-color: transparent; - background-image: -gtk-scaled(url('../assets/titlebutton-maximize-backdrop.png'),url('../assets/titlebutton-maximize-backdrop@2.png')); + background-image: -gtk-recolor(url('../assets/breeze-maximize-symbolic.svg')); } &.minimize { padding: 1px; - color: transparent; border-image: none; box-shadow: none; background-position: center; background-repeat: no-repeat; - background-image: -gtk-scaled(url('../assets/titlebutton-minimize.png'),url('../assets/titlebutton-minimize@2.png')); + background-size: $titlebutton-size; + background-image: -gtk-recolor(url('../assets/breeze-minimize-symbolic.svg')); + image { + color: transparent; + } } &.minimize:hover { border-color: transparent; background-color: transparent; - background-image: -gtk-scaled(url('../assets/titlebutton-minimize-hover.png'),url('../assets/titlebutton-minimize-hover@2.png')); + background-image: -gtk-recolor(url('../assets/breeze-minimize-hover-symbolic.svg')); } &.minimize:active { border-color: transparent; background-color: transparent; - background-image: -gtk-scaled(url('../assets/titlebutton-minimize-active.png'),url('../assets/titlebutton-minimize-active@2.png')); + background-image: -gtk-recolor(url('../assets/breeze-minimize-active-symbolic.svg')); } &.minimize:backdrop { border-color: transparent; background-color: transparent; - background-image: -gtk-scaled(url('../assets/titlebutton-minimize-backdrop.png'),url('../assets/titlebutton-minimize-backdrop@2.png')); + background-image: -gtk-recolor(url('../assets/breeze-minimize-symbolic.svg')); } } .maximized & { button.titlebutton { &.maximize { padding: 1px; - color: transparent; border-image: none; box-shadow: none; background-position: center; + background-size: $titlebutton-size; background-repeat: no-repeat; - background-image: -gtk-scaled(url('../assets/titlebutton-maximize-maximized.png'),url('../assets/titlebutton-maximize-maximized@2.png')); + background-image: -gtk-recolor(url('../assets/breeze-maximized-symbolic.svg')); + image { + color: transparent; + } } &.maximize:hover { border-color: transparent; background-color: transparent; - background-image: -gtk-scaled(url('../assets/titlebutton-maximize-maximized-hover.png'),url('../assets/titlebutton-maximize-maximized-hover@2.png')); + background-image: -gtk-recolor(url('../assets/breeze-maximized-hover-symbolic.svg')); } &.maximize:active { border-color: transparent; background-color: transparent; - background-image: -gtk-scaled(url('../assets/titlebutton-maximize-maximized-active.png'),url('../assets/titlebutton-maximize-maximized-active@2.png')); + background-image: -gtk-recolor(url('../assets/breeze-maximized-active-symbolic.svg')); } &.maximize:backdrop { border-color: transparent; background-color: transparent; - background-image: -gtk-scaled(url('../assets/titlebutton-maximize-maximized-backdrop.png'),url('../assets/titlebutton-maximize-maximized-backdrop@2.png')); + background-image: -gtk-recolor(url('../assets/breeze-maximized-symbolic.svg')); } } } } headerbar.selection-mode button.titlebutton, .titlebar.selection-mode button.titlebutton { text-shadow: none; &:backdrop { -gtk-icon-shadow: none; } }