mirror of
https://github.com/vinceliuice/WhiteSur-gtk-theme.git
synced 2025-06-06 07:23:02 +00:00
Fixed #1123
This commit is contained in:
vinceliuice
parent
4bd14d1ccc
commit
46c06f498c
3
.gitignore
vendored
3
.gitignore
vendored
@ -5,6 +5,7 @@
|
||||
src/main/gtk-3.0/gtk*.css
|
||||
src/main/gtk-4.0/gtk*.css
|
||||
src/main/cinnamon/cinnamon*.css
|
||||
src/main/gnome-shell/*/*.css
|
||||
src/main/gnome-shell/gnome-shell-Dark.css
|
||||
src/main/gnome-shell/gnome-shell-light.css
|
||||
src/other/dash-to-dock/stylesheet.css
|
||||
src/other/dash-to-dock/stylesheet-dark.css
|
||||
|
||||
@ -26,6 +26,7 @@ fi
|
||||
SASSC_OPT="-M -t expanded"
|
||||
|
||||
_COLOR_VARIANTS=('-Light' '-Dark')
|
||||
|
||||
if [ ! -z "${COLOR_VARIANTS:-}" ]; then
|
||||
IFS=', ' read -r -a _COLOR_VARIANTS <<< "${COLOR_VARIANTS:-}"
|
||||
fi
|
||||
@ -35,18 +36,8 @@ for color in "${_COLOR_VARIANTS[@]}"; do
|
||||
echo "==> Generating the 3.0 gtk${color}.css..."
|
||||
sassc $SASSC_OPT src/main/gtk-4.0/gtk${color}.{scss,css}
|
||||
echo "==> Generating the 4.0 gtk${color}.css..."
|
||||
sassc $SASSC_OPT src/main/gnome-shell/shell-3-28/gnome-shell${color}.{scss,css}
|
||||
echo "==> Generating the 3.28 gnome-shell${color}.css..."
|
||||
sassc $SASSC_OPT src/main/gnome-shell/shell-40-0/gnome-shell${color}.{scss,css}
|
||||
echo "==> Generating the 40.0 gnome-shell${color}.css..."
|
||||
sassc $SASSC_OPT src/main/gnome-shell/shell-42-0/gnome-shell${color}.{scss,css}
|
||||
echo "==> Generating the 42.0 gnome-shell${color}.css..."
|
||||
sassc $SASSC_OPT src/main/gnome-shell/shell-44-0/gnome-shell${color}.{scss,css}
|
||||
echo "==> Generating the 44.0 gnome-shell${color}.css..."
|
||||
sassc $SASSC_OPT src/main/gnome-shell/shell-46-0/gnome-shell${color}.{scss,css}
|
||||
echo "==> Generating the 46.0 gnome-shell${color}.css..."
|
||||
sassc $SASSC_OPT src/main/gnome-shell/shell-47-0/gnome-shell${color}.{scss,css}
|
||||
echo "==> Generating the 47.0 gnome-shell${color}.css..."
|
||||
sassc $SASSC_OPT src/main/gnome-shell/gnome-shell${color}.{scss,css}
|
||||
echo "==> Generating gnome-shell${color}.css..."
|
||||
sassc $SASSC_OPT src/main/cinnamon/cinnamon${color}.{scss,css}
|
||||
echo "==> Generating the cinnamon${color}.css..."
|
||||
done
|
||||
|
||||
@ -366,7 +366,7 @@ install_shelly() {
|
||||
mkdir -p "${TARGET_DIR}/assets"
|
||||
cp -r "${THEME_SRC_DIR}/assets/gnome-shell/icons" "${TARGET_DIR}"
|
||||
cp -r "${THEME_SRC_DIR}/main/gnome-shell/pad-osd.css" "${TARGET_DIR}"
|
||||
sassc ${SASSC_OPT} "${THEME_SRC_DIR}/main/gnome-shell/shell-${GNOME_VERSION}/gnome-shell${color}.scss" "${TARGET_DIR}/gnome-shell.css"
|
||||
sassc ${SASSC_OPT} "${THEME_SRC_DIR}/main/gnome-shell/gnome-shell${color}.scss" "${TARGET_DIR}/gnome-shell.css"
|
||||
|
||||
cp -r "${THEME_SRC_DIR}/assets/gnome-shell/common-assets/"*".svg" "${TARGET_DIR}/assets"
|
||||
cp -r "${THEME_SRC_DIR}/assets/gnome-shell/assets${color}/"*".svg" "${TARGET_DIR}/assets"
|
||||
@ -537,8 +537,6 @@ install_libadwaita() {
|
||||
color="${colors[0]}"
|
||||
opacity="${opacities[0]}"
|
||||
|
||||
echo -e "${color} ${opacity} ${alt} ${theme} ${scheme}"
|
||||
|
||||
gtk_base && config_gtk4 "${color}" "${opacity}" "${alt}" "${theme}" "${scheme}"
|
||||
}
|
||||
|
||||
@ -574,6 +572,7 @@ install_themes() {
|
||||
for scheme in "${schemes[@]}"; do
|
||||
gtk_base
|
||||
install_theemy "${color}" "${opacity}" "${alt}" "${theme}" "${scheme}"
|
||||
shell_base
|
||||
install_shelly "${color}" "${opacity}" "${alt}" "${theme}" "${scheme}" "${icon}"
|
||||
done
|
||||
done
|
||||
@ -892,6 +891,22 @@ gtk_base() {
|
||||
if [[ "${scheme}" == 'nord' ]]; then
|
||||
sed $SED_OPT "/\$scheme/s/standard/nord/" "${THEME_SRC_DIR}/sass/_gtk-base-temp.scss"
|
||||
fi
|
||||
|
||||
if [[ "${GNOME_VERSION}" -ge '47-0' ]]; then
|
||||
sed $SED_OPT "/\$gnome_version/s/old/new/" "${THEME_SRC_DIR}/sass/_gtk-base-temp.scss"
|
||||
fi
|
||||
}
|
||||
|
||||
shell_base() {
|
||||
cp -rf "${THEME_SRC_DIR}/main/gnome-shell/_shell-base"{".scss","-temp.scss"}
|
||||
|
||||
sed $SED_OPT "/\widgets/s/46-0/$GNOME_VERSION/" "${THEME_SRC_DIR}/main/gnome-shell/_shell-base-temp.scss"
|
||||
|
||||
if [[ "${GNOME_VERSION}" == '3-28' ]]; then
|
||||
sed $SED_OPT "/\extensions/s/46-0/3-28/" "${THEME_SRC_DIR}/main/gnome-shell/_shell-base-temp.scss"
|
||||
elif [[ "${GNOME_VERSION}" -gt '3-28' && "${GNOME_VERSION}" -lt '46-0' ]]; then
|
||||
sed $SED_OPT "/\extensions/s/46-0/40-0/" "${THEME_SRC_DIR}/main/gnome-shell/_shell-base-temp.scss"
|
||||
fi
|
||||
}
|
||||
|
||||
###############################################################################
|
||||
|
||||
5
src/main/gnome-shell/_shell-base.scss
Normal file
5
src/main/gnome-shell/_shell-base.scss
Normal file
@ -0,0 +1,5 @@
|
||||
@import '../../sass/variables';
|
||||
@import '../../sass/colors';
|
||||
@import '../../sass/gnome-shell/drawing';
|
||||
@import '../../sass/gnome-shell/widgets-46-0';
|
||||
@import '../../sass/gnome-shell/extensions-46-0';
|
||||
3
src/main/gnome-shell/gnome-shell-Dark.scss
Normal file
3
src/main/gnome-shell/gnome-shell-Dark.scss
Normal file
@ -0,0 +1,3 @@
|
||||
$variant: 'dark';
|
||||
|
||||
@import 'shell-base-temp';
|
||||
5190
src/main/gnome-shell/gnome-shell-Light.css
Normal file
5190
src/main/gnome-shell/gnome-shell-Light.css
Normal file
File diff suppressed because it is too large
Load Diff
3
src/main/gnome-shell/gnome-shell-Light.scss
Normal file
3
src/main/gnome-shell/gnome-shell-Light.scss
Normal file
@ -0,0 +1,3 @@
|
||||
$variant: 'light';
|
||||
|
||||
@import 'shell-base-temp';
|
||||
@ -1,11 +0,0 @@
|
||||
$variant: 'dark';
|
||||
$laptop: 'true';
|
||||
$trans: 'true';
|
||||
$black: 'false';
|
||||
$theme: 'default';
|
||||
|
||||
@import '../../../sass/colors';
|
||||
@import '../../../sass/variables';
|
||||
@import '../../../sass/gnome-shell/drawing';
|
||||
@import '../../../sass/gnome-shell/widgets-3-28';
|
||||
@import '../../../sass/gnome-shell/extensions-3-28';
|
||||
@ -1,11 +0,0 @@
|
||||
$variant: 'light';
|
||||
$laptop: 'true';
|
||||
$trans: 'true';
|
||||
$black: 'false';
|
||||
$theme: 'default';
|
||||
|
||||
@import '../../../sass/colors';
|
||||
@import '../../../sass/variables';
|
||||
@import '../../../sass/gnome-shell/drawing';
|
||||
@import '../../../sass/gnome-shell/widgets-3-28';
|
||||
@import '../../../sass/gnome-shell/extensions-3-28';
|
||||
@ -1,7 +0,0 @@
|
||||
$variant: 'dark';
|
||||
|
||||
@import '../../../sass/variables';
|
||||
@import '../../../sass/colors';
|
||||
@import '../../../sass/gnome-shell/drawing';
|
||||
@import '../../../sass/gnome-shell/widgets-40-0';
|
||||
@import '../../../sass/gnome-shell/extensions-40-0';
|
||||
@ -1,7 +0,0 @@
|
||||
$variant: 'light';
|
||||
|
||||
@import '../../../sass/variables';
|
||||
@import '../../../sass/colors';
|
||||
@import '../../../sass/gnome-shell/drawing';
|
||||
@import '../../../sass/gnome-shell/widgets-40-0';
|
||||
@import '../../../sass/gnome-shell/extensions-40-0';
|
||||
@ -1,7 +0,0 @@
|
||||
$variant: 'dark';
|
||||
|
||||
@import '../../../sass/variables';
|
||||
@import '../../../sass/colors';
|
||||
@import '../../../sass/gnome-shell/drawing';
|
||||
@import '../../../sass/gnome-shell/widgets-42-0';
|
||||
@import '../../../sass/gnome-shell/extensions-40-0';
|
||||
@ -1,7 +0,0 @@
|
||||
$variant: 'light';
|
||||
|
||||
@import '../../../sass/variables';
|
||||
@import '../../../sass/colors';
|
||||
@import '../../../sass/gnome-shell/drawing';
|
||||
@import '../../../sass/gnome-shell/widgets-42-0';
|
||||
@import '../../../sass/gnome-shell/extensions-40-0';
|
||||
@ -1,7 +0,0 @@
|
||||
$variant: 'dark';
|
||||
|
||||
@import '../../../sass/variables';
|
||||
@import '../../../sass/colors';
|
||||
@import '../../../sass/gnome-shell/drawing';
|
||||
@import '../../../sass/gnome-shell/widgets-44-0';
|
||||
@import '../../../sass/gnome-shell/extensions-40-0';
|
||||
@ -1,7 +0,0 @@
|
||||
$variant: 'light';
|
||||
|
||||
@import '../../../sass/variables';
|
||||
@import '../../../sass/colors';
|
||||
@import '../../../sass/gnome-shell/drawing';
|
||||
@import '../../../sass/gnome-shell/widgets-44-0';
|
||||
@import '../../../sass/gnome-shell/extensions-40-0';
|
||||
@ -1,7 +0,0 @@
|
||||
$variant: 'dark';
|
||||
|
||||
@import '../../../sass/variables';
|
||||
@import '../../../sass/colors';
|
||||
@import '../../../sass/gnome-shell/drawing';
|
||||
@import '../../../sass/gnome-shell/widgets-46-0';
|
||||
@import '../../../sass/gnome-shell/extensions-46-0';
|
||||
@ -1,7 +0,0 @@
|
||||
$variant: 'light';
|
||||
|
||||
@import '../../../sass/variables';
|
||||
@import '../../../sass/colors';
|
||||
@import '../../../sass/gnome-shell/drawing';
|
||||
@import '../../../sass/gnome-shell/widgets-46-0';
|
||||
@import '../../../sass/gnome-shell/extensions-46-0';
|
||||
@ -1,7 +0,0 @@
|
||||
$variant: 'dark';
|
||||
|
||||
@import '../../../sass/variables';
|
||||
@import '../../../sass/colors';
|
||||
@import '../../../sass/gnome-shell/drawing';
|
||||
@import '../../../sass/gnome-shell/widgets-47-0';
|
||||
@import '../../../sass/gnome-shell/extensions-46-0';
|
||||
@ -1,7 +0,0 @@
|
||||
$variant: 'light';
|
||||
|
||||
@import '../../../sass/variables';
|
||||
@import '../../../sass/colors';
|
||||
@import '../../../sass/gnome-shell/drawing';
|
||||
@import '../../../sass/gnome-shell/widgets-47-0';
|
||||
@import '../../../sass/gnome-shell/extensions-46-0';
|
||||
@ -2,8 +2,8 @@ $variant: 'dark';
|
||||
|
||||
@import '../../sass/variables';
|
||||
@import '../../sass/colors';
|
||||
@import '../../sass/gtk/colors-libadwaita';
|
||||
@import '../../sass/gtk/drawing';
|
||||
@import '../../sass/gtk/common-4.0';
|
||||
@import '../../sass/gtk/apps-4.0';
|
||||
@import '../../sass/gtk/colors-public';
|
||||
@import '../../sass/gtk/colors-libadwaita';
|
||||
|
||||
@ -2,8 +2,8 @@ $variant: 'light';
|
||||
|
||||
@import '../../sass/variables';
|
||||
@import '../../sass/colors';
|
||||
@import '../../sass/gtk/colors-libadwaita';
|
||||
@import '../../sass/gtk/drawing';
|
||||
@import '../../sass/gtk/common-4.0';
|
||||
@import '../../sass/gtk/apps-4.0';
|
||||
@import '../../sass/gtk/colors-public';
|
||||
@import '../../sass/gtk/colors-libadwaita';
|
||||
|
||||
@ -316,4 +316,4 @@ $wm_button_maximize_bg: if($variant == 'light', #28d33f, #59c837);
|
||||
$wm_button_maximize_hover_bg: if($variant == 'light', #28d33f, #59c837);
|
||||
$wm_button_maximize_active_bg: if($variant == 'light', #20a932, #47a02c);
|
||||
$wm_button_maximize_border: if($variant == 'light', #20a932, #47a02c);
|
||||
$wm_icon_maximize_bg: if($variant == 'light', #14691f, #2c641b);
|
||||
$wm_icon_maximize_bg: if($variant == 'light', #14691f, #2c641b);
|
||||
@ -3,3 +3,6 @@ $laptop: 'true';
|
||||
$trans: 'true';
|
||||
$theme: 'default';
|
||||
$scheme: 'standard';
|
||||
|
||||
// Gnome version
|
||||
$gnome_version: 'old';
|
||||
|
||||
@ -23,6 +23,11 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT";
|
||||
* Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA.
|
||||
*/
|
||||
|
||||
@if $gnome_version == 'new' {
|
||||
$selected_bg_color: -st-accent-color;
|
||||
$primary_color: -st-accent-color;
|
||||
}
|
||||
|
||||
// Stage
|
||||
stage {
|
||||
@include fontsize($base_font_size);
|
||||
|
||||
@ -125,8 +125,12 @@
|
||||
}
|
||||
|
||||
@if $t == focus {
|
||||
border: 2px solid lighten($fc, 15%) !important;
|
||||
box-shadow: inset 0 0 0 1px rgba($borders_color, 0) !important;
|
||||
@if $gnome_version == 'old' {
|
||||
border: 2px solid lighten($fc, 15%) !important;
|
||||
} @else {
|
||||
border: 2px solid st-lighten($fc, 15%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@if $t == insensitive {
|
||||
@ -222,18 +226,26 @@
|
||||
|
||||
@if $t == hover {
|
||||
color: $tc;
|
||||
background-color: mix($tc, $c, 6%);
|
||||
border: none;
|
||||
text-shadow: none;
|
||||
icon-shadow: none;
|
||||
@if $gnome_version == 'old' {
|
||||
background-color: mix($tc, $c, 6%);
|
||||
} @else {
|
||||
background-color: st-mix($tc, $c, 6%);
|
||||
}
|
||||
}
|
||||
|
||||
@if $t == active {
|
||||
color: $tc;
|
||||
background-color: mix($tc, $c, 12%);
|
||||
border: none;
|
||||
text-shadow: none;
|
||||
icon-shadow: none;
|
||||
@if $gnome_version == 'old' {
|
||||
background-color: mix($tc, $c, 12%);
|
||||
} @else {
|
||||
background-color: st-mix($tc, $c, 12%);
|
||||
}
|
||||
}
|
||||
|
||||
@if $t == checked {
|
||||
|
||||
@ -3,8 +3,14 @@
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 24px; // radius equals the size of the box to give us the curve
|
||||
background-color: lighten(transparentize($primary_color, 0.7), 30%);
|
||||
box-shadow: 0 0 2px 2px lighten($primary_color, 20%);
|
||||
|
||||
@if $gnome_version == 'old' {
|
||||
background-color: lighten(transparentize($primary_color, 0.7), 30%);
|
||||
box-shadow: 0 0 2px 2px lighten($primary_color, 20%);
|
||||
} @else {
|
||||
background-color: st-lighten(st-transparentize($primary_color, 0.7), 30%);
|
||||
box-shadow: 0 0 2px 2px st-lighten($primary_color, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
// Pointer accessibility notifications
|
||||
@ -13,7 +19,12 @@
|
||||
height: 60px;
|
||||
-pie-border-width: 3px;
|
||||
-pie-border-color: $primary_color;
|
||||
-pie-background-color: lighten(transparentize($primary_color, 0.7), 40%);
|
||||
|
||||
@if $gnome_version == 'old' {
|
||||
-pie-background-color: lighten(transparentize($primary_color, 0.7), 40%);
|
||||
} @else {
|
||||
-pie-background-color: st-lighten(st-transparentize($primary_color, 0.7), 40%);
|
||||
}
|
||||
}
|
||||
|
||||
// Screen zoom/Magnifier
|
||||
|
||||
@ -199,7 +199,11 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($primary_color, 5%);
|
||||
@if $gnome_version == 'old' {
|
||||
background-color: darken($primary_color, 5%);
|
||||
} @else {
|
||||
background-color: st-darken($primary_color, 5%);
|
||||
}
|
||||
color: $light_fg_color !important;
|
||||
background-gradient-direction: none !important;
|
||||
}
|
||||
@ -210,8 +214,12 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
|
||||
background-gradient-direction: none !important;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: lighten($primary_color, 8%);
|
||||
color: $light_fg_color !important;
|
||||
@if $gnome_version == 'old' {
|
||||
background-color: lighten($primary_color, 8%);
|
||||
} @else {
|
||||
background-color: st-lighten($primary_color, 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,9 +25,9 @@
|
||||
background-image: url("assets/checkbox.svg");
|
||||
}
|
||||
&:hover:checked StBin {
|
||||
background-color: rgba($primary_color, $lower_opacity / 2);
|
||||
background-color: RGB($primary_color, 15%);
|
||||
}
|
||||
&:active:checked StBin {
|
||||
background-color: rgba($primary_color, $lower_opacity);
|
||||
background-color: RGB($primary_color, 30%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,13 +3,19 @@
|
||||
$ripple_size: 50px;
|
||||
|
||||
.ripple-box {
|
||||
background-color: rgba($primary_color, 0.35);
|
||||
box-shadow: 0 0 2px 2px lighten($primary_color, 20%);
|
||||
// plus + 2px for the border (box-shadow)
|
||||
width: $ripple_size + 2px;
|
||||
height: $ripple_size + 2px;
|
||||
border-radius: 0 0 $ripple_size + 2px 0; // radius equals the size of the box to give us the curve
|
||||
|
||||
@if $gnome_version == 'old' {
|
||||
background-color: transparentize($primary_color, 0.65);
|
||||
box-shadow: 0 0 2px 2px lighten($primary_color, 20%);
|
||||
} @else {
|
||||
background-color: st-transparentize($primary_color, 0.65);
|
||||
box-shadow: 0 0 2px 2px st-lighten($primary_color, 20%);
|
||||
}
|
||||
|
||||
// just a simple change to the border radius position
|
||||
&:rtl { border-radius: 0 0 0 $ripple_size + 2px; }
|
||||
}
|
||||
|
||||
@ -63,8 +63,13 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten
|
||||
background-color: $primary_color;
|
||||
box-shadow: 0 2px 3px rgba(black, 0.15);
|
||||
|
||||
&:focus, &:hover { color: $light_fg_color; background-color: lighten($primary_color, 5%); }
|
||||
&:checked, &:active { color: $light_fg_color; background-color: darken($primary_color, 10%); }
|
||||
@if $gnome_version == 'old' {
|
||||
&:focus, &:hover { color: $light_fg_color; background-color: lighten($primary_color, 5%); }
|
||||
&:checked, &:active { color: $light_fg_color; background-color: darken($primary_color, 10%); }
|
||||
} @else {
|
||||
&:focus, &:hover { color: $light_fg_color; background-color: st-lighten($primary_color, 5%); }
|
||||
&:checked, &:active { color: $light_fg_color; background-color: st-darken($primary_color, 10%); }
|
||||
}
|
||||
}
|
||||
|
||||
&.shift-key-uppercase {
|
||||
@ -99,8 +104,12 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten
|
||||
|
||||
.emoji-panel {
|
||||
.keyboard-key:latched {
|
||||
border-color: lighten($primary_color, 5%);
|
||||
background-color: $primary_color;
|
||||
@if $gnome_version == 'old' {
|
||||
border-color: lighten($primary_color, 5%);
|
||||
} @else {
|
||||
border-color: st-lighten($primary_color, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,8 +1,13 @@
|
||||
// Rubberband for select-area screenshots
|
||||
.select-area-rubberband {
|
||||
background-color: transparentize($primary_color, 0.7);
|
||||
border: 1px solid $primary_color;
|
||||
border-radius: 3px;
|
||||
|
||||
@if $gnome_version == 'old' {
|
||||
background-color: transparentize($primary_color, 0.3);
|
||||
} @else {
|
||||
background-color: st-transparentize($primary_color, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
// User icon
|
||||
|
||||
@ -126,7 +126,11 @@ $popop_menuitem_radius: $po_radius - $base_padding;
|
||||
|
||||
&:active {
|
||||
color: $selected_fg_color !important;
|
||||
background-color: mix($fg_color, $selected_bg_color, 5%) !important;
|
||||
@if $gnome_version == 'old' {
|
||||
background-color: mix($fg_color, $selected_bg_color, 5%) !important;
|
||||
} @else {
|
||||
background-color: st-mix($fg_color, $selected_bg_color, 5%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:insensitive { color: $disabled_fg_color !important; }
|
||||
@ -140,7 +144,11 @@ $popop_menuitem_radius: $po_radius - $base_padding;
|
||||
|
||||
&:active, &.selected:active {
|
||||
color: $selected_fg_color !important;
|
||||
background-color: mix($fg_color, $selected_bg_color, 5%) !important;
|
||||
@if $gnome_version == 'old' {
|
||||
background-color: mix($fg_color, $selected_bg_color, 5%) !important;
|
||||
} @else {
|
||||
background-color: st-mix($fg_color, $selected_bg_color, 5%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:insensitive { color: $disabled_fg_color !important; }
|
||||
@ -170,7 +178,11 @@ $popop_menuitem_radius: $po_radius - $base_padding;
|
||||
|
||||
&:active {
|
||||
color: $selected_fg_color !important;
|
||||
background-color: mix($fg_color, $selected_bg_color, 5%) !important;
|
||||
@if $gnome_version == 'old' {
|
||||
background-color: mix($fg_color, $selected_bg_color, 5%) !important;
|
||||
} @else {
|
||||
background-color: st-mix($fg_color, $selected_bg_color, 5%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -68,7 +68,12 @@
|
||||
#unlockDialogNotifications {
|
||||
StButton#vhandle, StButton#hhandle {
|
||||
background-color: transparentize($bg_color,0.7);
|
||||
&:hover, &:focus { background-color: transparentize($bg_color,0.5); }
|
||||
&:active { background-color: transparentize($selected_bg_color,0.5); }
|
||||
&:hover, &:focus { background-color: transparentize($bg_color, 0.5); }
|
||||
|
||||
@if $gnome_version == 'old' {
|
||||
&:active { background-color: transparentize($selected_bg_color, 0.5); }
|
||||
} @else {
|
||||
&:active { background-color: st-transparentize($selected_bg_color, 0.5); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,7 +4,11 @@
|
||||
$tile_corner_radius: $base_border_radius + 1px;
|
||||
|
||||
.tile-preview {
|
||||
background-color: rgba($primary_color, $lower_opacity);
|
||||
@if $gnome_version == 'old' {
|
||||
background-color: transparentize($primary_color, 0.75);
|
||||
} @else {
|
||||
background-color: st-transparentize($primary_color, 0.75);
|
||||
}
|
||||
border: 1px solid $primary_color;
|
||||
}
|
||||
|
||||
|
||||
@ -3,6 +3,10 @@
|
||||
StButton#vhandle, StButton#hhandle {
|
||||
background-color: transparentize($bg_color, 0.7);
|
||||
&:hover, &:focus { background-color: transparentize($bg_color, 0.5); }
|
||||
&:active { background-color: transparentize($primary_color, 0.5); }
|
||||
@if $gnome_version == 'old' {
|
||||
&:active { background-color: transparentize($primary_color, 0.5); }
|
||||
} @else {
|
||||
&:active { background-color: st-transparentize($primary_color, 0.5); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -170,13 +170,22 @@ $screenshot_ui_button_red: $error_color;
|
||||
.screenshot-ui-window-selector-window {
|
||||
&:hover {
|
||||
.screenshot-ui-window-selector-window-border {
|
||||
border-color: darken($primary_color, 15%);
|
||||
@if $gnome_version == 'old' {
|
||||
border-color: darken($primary_color, 15%);
|
||||
} @else {
|
||||
border-color: st-darken($primary_color, 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
.screenshot-ui-window-selector-window-border {
|
||||
border-color: $primary_color;
|
||||
background-color: transparentize($primary_color, 0.8);
|
||||
@if $gnome_version == 'old' {
|
||||
background-color: transparentize($primary_color, 0.8);
|
||||
} @else {
|
||||
background-color: st-transparentize($primary_color, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.screenshot-ui-window-selector-check {
|
||||
|
||||
@ -39,13 +39,21 @@
|
||||
color: $light_fg_color;
|
||||
|
||||
&:hover {
|
||||
background-color: mix($text_color, $primary_color, 6%) !important;
|
||||
color: $light_fg_color;
|
||||
@if $gnome_version == 'old' {
|
||||
background-color: mix($text_color, $primary_color, 6%) !important;
|
||||
} @else {
|
||||
background-color: st-mix($text_color, $primary_color, 6%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: mix($text_color, $primary_color, 15%) !important;
|
||||
color: $light_fg_color;
|
||||
@if $gnome_version == 'old' {
|
||||
background-color: mix($text_color, $primary_color, 15%) !important;
|
||||
} @else {
|
||||
background-color: st-mix($text_color, $primary_color, 15%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -100,13 +108,21 @@
|
||||
color: $light_fg_color;
|
||||
|
||||
&:hover {
|
||||
background-color: mix($text_color, $primary_color, 6%) !important;
|
||||
color: $light_fg_color;
|
||||
@if $gnome_version == 'old' {
|
||||
background-color: mix($text_color, $primary_color, 6%) !important;
|
||||
} @else {
|
||||
background-color: st-mix($text_color, $primary_color, 6%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: mix($text_color, $primary_color, 15%) !important;
|
||||
color: $light_fg_color;
|
||||
@if $gnome_version == 'old' {
|
||||
background-color: mix($text_color, $primary_color, 15%) !important;
|
||||
} @else {
|
||||
background-color: st-mix($text_color, $primary_color, 15%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -66,7 +66,11 @@
|
||||
border-style: solid;
|
||||
|
||||
&:focus {
|
||||
border-color: transparentize($selected_bg_color, 0.4);
|
||||
@if $gnome_version == 'old' {
|
||||
border-color: transparentize($selected_bg_color, 0.4);
|
||||
} @else {
|
||||
border-color: st-transparentize($selected_bg_color, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,41 +2,48 @@
|
||||
|
||||
.check-box {
|
||||
StBoxLayout { spacing: .8em; }
|
||||
|
||||
StBin {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: ($medium_size - 24px) / 2;
|
||||
border-radius: 100px;
|
||||
background-image: url("assets/checkbox-off.svg");
|
||||
border-radius: 7px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
&:focus StBin {
|
||||
background-image: url("assets/checkbox-off.svg");
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
&:hover StBin {
|
||||
background-color: $divider_color;
|
||||
}
|
||||
&:active StBin {
|
||||
background-color: $track_color;
|
||||
}
|
||||
&:checked StBin {
|
||||
background-image: url("assets/checkbox.svg");
|
||||
}
|
||||
&:focus:checked StBin {
|
||||
background-image: url("assets/checkbox.svg");
|
||||
}
|
||||
&:hover:checked StBin {
|
||||
background-color: rgba($primary_color, $lower_opacity / 2);
|
||||
}
|
||||
&:active:checked StBin {
|
||||
background-color: rgba($primary_color, $lower_opacity);
|
||||
// Trick due to St limitations. It needs a background to draw a box-shadow
|
||||
background-color: rgba(0, 0, 0, 0.01);
|
||||
box-shadow: inset 0 0 0 2px st-transparentize(-st-accent-color, .65);
|
||||
}
|
||||
|
||||
StIcon {
|
||||
icon-size: 0 !important;
|
||||
padding: 0 !important;
|
||||
color: transparent !important;
|
||||
border: none !important;
|
||||
background-color: transparent !important;
|
||||
icon-size: 14px;
|
||||
padding: 1px;
|
||||
|
||||
color: transparent;
|
||||
border-radius: 6px;
|
||||
border: 2px solid transparentize(if($variant == 'light', black, white), .85);
|
||||
}
|
||||
|
||||
&:hover StIcon {
|
||||
border-color: transparentize(if($variant == 'light', black, white), .8);
|
||||
}
|
||||
|
||||
&:active StIcon {
|
||||
border-color: transparentize(if($variant == 'light', black, white), .7);
|
||||
}
|
||||
|
||||
&:checked StIcon {
|
||||
background-color: -st-accent-color;
|
||||
color: -st-accent-fg-color;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&:checked:hover StIcon {
|
||||
background-color: st-lighten(-st-accent-color, 5%);
|
||||
color: st-lighten(-st-accent-fg-color, 5%);
|
||||
}
|
||||
|
||||
&:checked:active StIcon {
|
||||
background-color: st-darken(-st-accent-color, 7%);
|
||||
color: st-darken(-st-accent-fg-color, 7%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,20 +15,33 @@
|
||||
|
||||
&:hover {
|
||||
color: white !important;
|
||||
background-color: lighten($primary_color, 9%);
|
||||
background-gradient-direction: none !important;
|
||||
@if $gnome_version == 'old' {
|
||||
background-color: lighten($primary_color, 9%);
|
||||
} @else {
|
||||
background-color: st-lighten($primary_color, 9%);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: white !important;
|
||||
background-color: darken($primary_color, 5%);
|
||||
background-gradient-direction: none !important;
|
||||
@if $gnome_version == 'old' {
|
||||
background-color: darken($primary_color, 5%);
|
||||
} @else {
|
||||
background-color: st-darken($primary_color, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
&:insensitive {
|
||||
background-color: rgba($primary_color, 0.05);
|
||||
color: rgba($primary_color, 0.35) !important;
|
||||
background-gradient-direction: none !important;
|
||||
@if $gnome_version == 'old' {
|
||||
background-color: transparentize($primary_color, 0.9);
|
||||
color: transparentize($primary_color, 0.65) !important;
|
||||
} @else {
|
||||
background-color: st-transparentize($primary_color, 0.9);
|
||||
color: st-transparentize($primary_color, 0.65) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -3,15 +3,15 @@
|
||||
.toggle-switch {
|
||||
width: 40px;
|
||||
height: 24px;
|
||||
background-size: contain;
|
||||
background-image: url("assets/toggle-off.svg");
|
||||
background-gradient-direction: vertical;
|
||||
background-gradient-start: rgba($fg_color, 0.25);
|
||||
background-gradient-end: rgba($fg_color, 0.35);
|
||||
background: rgba($fg_color, 0.25);
|
||||
|
||||
&:checked { background-image: url("assets/toggle-on.svg"); }
|
||||
|
||||
.popup-menu-item.selected & {
|
||||
background-image: url("assets/toggle-off.svg");
|
||||
|
||||
&:checked { background-image: url("assets/toggle-on.svg"); }
|
||||
&:hover {
|
||||
background-gradient-start: rgba($fg_color, 0.3);
|
||||
background-gradient-end: rgba($fg_color, 0.4);
|
||||
background: rgba($fg_color, 0.3);
|
||||
}
|
||||
|
||||
StIcon {
|
||||
@ -19,25 +19,29 @@
|
||||
}
|
||||
|
||||
.handle {
|
||||
margin: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
transition-duration: 0;
|
||||
margin: 1px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background: white;
|
||||
box-shadow: 0 2px 4px transparentize(black, .9);
|
||||
transition-duration: 100ms;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-color: transparent;
|
||||
color: transparent;
|
||||
background: $primary_color;
|
||||
color: $primary_color;
|
||||
background-gradient-start: $primary_color;
|
||||
background-gradient-end: st-lighten($primary_color, 10%);
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
color: transparent;
|
||||
background: $primary_color;
|
||||
color: $primary_color;
|
||||
background-gradient-start: $primary_color;
|
||||
background-gradient-end: st-lighten($primary_color, 10%);
|
||||
}
|
||||
|
||||
.handle {
|
||||
background: none;
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -104,8 +104,12 @@ $dark_5: #000000;
|
||||
// define variables for them in _colors.scss
|
||||
|
||||
// The main accent color and the matching text value
|
||||
@define-color accent_bg_color #{$primary_color};
|
||||
@define-color accent_fg_color #{$light_fg_color};
|
||||
|
||||
@if $gnome_version == 'old' {
|
||||
@define-color accent_bg_color #{$primary_color};
|
||||
@define-color accent_fg_color #{$light_fg_color};
|
||||
}
|
||||
|
||||
@define-color accent_color #{$primary_color};
|
||||
|
||||
// destructive-action buttons
|
||||
@ -157,3 +161,28 @@ $dark_5: #000000;
|
||||
// Miscellaneous
|
||||
@define-color shade_color #{$borders_color};
|
||||
@define-color scrollbar_outline_color #{$borders_color};
|
||||
|
||||
@if $gnome_version == 'new' {
|
||||
:root {
|
||||
--accent-blue: #{$theme_color_default};
|
||||
--accent-teal: #2190a4;
|
||||
--accent-green: #{$theme_color_green};
|
||||
--accent-yellow: #{$theme_color_yellow};
|
||||
--accent-orange: #{$theme_color_orange};
|
||||
--accent-red: #{$theme_color_red};
|
||||
--accent-pink: #{$theme_color_pink};
|
||||
--accent-purple: #{$theme_color_purple};
|
||||
--accent-slate: #6f8396;
|
||||
|
||||
--accent-color: @accent_bg_color;
|
||||
--accent-bg-color: @accent_bg_color;
|
||||
--accent-fg-color: @accent_fg_color;
|
||||
}
|
||||
|
||||
$selected_bg_color: var(--accent-bg-color);
|
||||
$primary_color: var(--accent-bg-color);
|
||||
$entry_highlight: RGB(color-mix(in srgb, white 25%, var(--accent-bg-color)), 75%);
|
||||
$progress_color: var(--accent-bg-color);
|
||||
$selection_mode_bg: color-mix(in srgb, white 25%, var(--accent-bg-color));
|
||||
$selected_borders_color: color-mix(in srgb, black 25%, var(--accent-bg-color));
|
||||
}
|
||||
|
||||
@ -87,8 +87,14 @@ $wm_borders_unfocused: if($variant == 'light', darken($header_bg, 10%), darken($
|
||||
@define-color budgie_tasklist_indicator_color #{"" + $fg_color};
|
||||
// focused window 'line'
|
||||
@define-color budgie_tasklist_indicator_color_active #{"" + $selected_bg_color};
|
||||
|
||||
// group-ed and unfocused window 'line(s)'
|
||||
@define-color budgie_tasklist_indicator_color_active_window #{"" + mix($selected_bg_color, opacify($header_bg, 1), 35%)};
|
||||
@if $gnome_version == 'old' {
|
||||
@define-color budgie_tasklist_indicator_color_active_window #{"" + mix($selected_bg_color, opacify($header_bg, 1), 35%)};
|
||||
} @else {
|
||||
@define-color budgie_tasklist_indicator_color_active_window #{"" + color-mix(in srgb, $selected_bg_color 35%, $header_bg)};
|
||||
}
|
||||
|
||||
// attention 'dot'
|
||||
// FIXME: we can't fill whole widget backgrounds with our suggestion colour
|
||||
// because of lacking specific style-class on 'needs_attention' state,
|
||||
|
||||
@ -107,13 +107,25 @@ $list_shadow: if($variant == 'light',
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
|
||||
&:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); }
|
||||
&:disabled {
|
||||
@if $gnome_version == 'old' {
|
||||
color: mix($selected_fg_color, $selected_bg_color, 50%);
|
||||
} @else {
|
||||
color: color-mix(in srgb, $selected_fg_color 50%, $selected_bg_color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
%nobg_selected_items {
|
||||
color: $selected_fg_color;
|
||||
|
||||
&:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); }
|
||||
&:disabled {
|
||||
@if $gnome_version == 'old' {
|
||||
color: mix($selected_fg_color, $selected_bg_color, 50%);
|
||||
} @else {
|
||||
color: color-mix(in srgb, $selected_fg_color 50%, $selected_bg_color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
%linked_middle {
|
||||
@ -312,8 +324,13 @@ iconview {
|
||||
|
||||
%rubberband,
|
||||
rubberband {
|
||||
border: 1px solid darken($selected_bg_color, 10%);
|
||||
background-color: transparentize(darken($selected_bg_color, 10%), 0.8);
|
||||
@if $gnome_version == 'old' {
|
||||
border: 1px solid darken($selected_bg_color, 10%);
|
||||
background-color: transparentize(darken($selected_bg_color, 10%), 0.8);
|
||||
} @else {
|
||||
border: 1px solid color-mix(in srgb, black 10%, $selected_bg_color);
|
||||
background-color: RGB(color-mix(in srgb, black 10%, $selected_bg_color), 80%);
|
||||
}
|
||||
}
|
||||
|
||||
flowbox {
|
||||
@ -340,8 +357,11 @@ gridview {
|
||||
padding: 3px;
|
||||
|
||||
&:selected {
|
||||
outline-color: darken($selected_bg_color, 15%);
|
||||
|
||||
@if $gnome_version == 'old' {
|
||||
outline-color: darken($selected_bg_color, 15%);
|
||||
} @else {
|
||||
outline-color: color-mix(in srgb, black 15%, $selected_bg_color);
|
||||
}
|
||||
@extend %selected_items;
|
||||
}
|
||||
|
||||
@ -379,7 +399,13 @@ label {
|
||||
opacity: 1;
|
||||
color: $disabled_fg_color;
|
||||
|
||||
selection { color: mix($selected_fg_color, $selected_bg_color, 50%); }
|
||||
selection {
|
||||
@if $gnome_version == 'old' {
|
||||
color: mix($selected_fg_color, $selected_bg_color, 50%);
|
||||
} @else {
|
||||
color: color-mix(in srgb, $selected_fg_color 50%, $selected_bg_color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -720,11 +746,18 @@ editablelabel > stack > text {
|
||||
// Buttons
|
||||
//
|
||||
// stuff for .needs-attention
|
||||
$_dot_color: if($variant=='light', $selected_bg_color,
|
||||
lighten($selected_bg_color, 15%));
|
||||
|
||||
$_dot_color: '';
|
||||
|
||||
@if $gnome_version == 'old' {
|
||||
$_dot_color: if($variant=='light', $selected_bg_color, lighten($selected_bg_color, 15%));
|
||||
} @else {
|
||||
$_dot_color: if($variant=='light', $selected_bg_color, color-mix(in srgb, white 15%, $selected_bg_color));
|
||||
}
|
||||
|
||||
@keyframes needs_attention {
|
||||
from { background-image: radial-gradient(farthest-side, $_dot_color 0%, transparentize($_dot_color, 1) 0%); }
|
||||
to { background-image: radial-gradient(farthest-side, $_dot_color 95%, transparentize($_dot_color, 1)); }
|
||||
from { background-image: radial-gradient(farthest-side, $_dot_color 0%, $_dot_color 0%); }
|
||||
to { background-image: radial-gradient(farthest-side, $_dot_color 95%, $_dot_color); }
|
||||
}
|
||||
|
||||
%needs_attention {
|
||||
@ -732,7 +765,7 @@ $_dot_color: if($variant=='light', $selected_bg_color,
|
||||
// simulates the shadow labels and icons normally have in buttons.
|
||||
animation: needs_attention 150ms ease-in;
|
||||
|
||||
background-image: radial-gradient(farthest-side, $_dot_color 96%, transparentize($_dot_color,1 ));
|
||||
background-image: radial-gradient(farthest-side, $_dot_color 96%, $_dot_color);
|
||||
background-size: 6px 6px, 6px 6px;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
@ -1471,30 +1504,38 @@ list > row button.image-button:not(.flat) {
|
||||
//
|
||||
// Links
|
||||
//
|
||||
link, %links {
|
||||
%links,
|
||||
link,
|
||||
button.link {
|
||||
color: $link_color;
|
||||
text-decoration: underline;
|
||||
font-weight: inherit;
|
||||
|
||||
&:visited {
|
||||
color: $link_visited_color;
|
||||
*:selected & { color: mix($selected_fg_color, $selected_bg_color, 60%); }
|
||||
}
|
||||
&:hover {
|
||||
color: lighten($link_color,10%);
|
||||
*:selected & { color: mix($selected_fg_color, $selected_bg_color, 90%); }
|
||||
}
|
||||
&:active {
|
||||
color: $link_color;
|
||||
*:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); }
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: HSL(from $link_color h calc(s * 1.1) calc(l * 1.1));
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $link_color;
|
||||
}
|
||||
|
||||
&:disabled { color: gtkalpha(currentColor, 0.35); }
|
||||
|
||||
@at-root %link_selected,
|
||||
&:selected,
|
||||
*:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); }
|
||||
&:selected {
|
||||
@if $gnome_version == 'old' {
|
||||
color: mix($selected_fg_color, $selected_bg_color, 80%);
|
||||
} @else {
|
||||
color: color-mix(in srgb, $selected_fg_color 80%, $selected_bg_color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.link {
|
||||
@extend %links;
|
||||
|
||||
&, &:hover, &:active, &:checked {
|
||||
@extend %undecorated_button;
|
||||
}
|
||||
@ -2188,15 +2229,25 @@ headerbar {
|
||||
&.selection-mode {
|
||||
color: $light_fg_color;
|
||||
background-color: $selection_mode_bg;
|
||||
border-color: darken($selection_mode_bg, 4%);
|
||||
box-shadow: none;
|
||||
background-image: none;
|
||||
text-shadow: none;
|
||||
|
||||
@if $gnome_version == 'old' {
|
||||
border-color: darken($selection_mode_bg, 5%);
|
||||
} @else {
|
||||
border-color: color-mix(in srgb, black 15%, $selection_mode_bg)
|
||||
}
|
||||
|
||||
&:backdrop {
|
||||
background-color: $selection_mode_bg;
|
||||
color: transparentize($light_fg_color, 0.4);
|
||||
border-color: darken($selection_mode_bg, 4%);
|
||||
|
||||
@if $gnome_version == 'old' {
|
||||
border-color: darken($selection_mode_bg, 5%);
|
||||
} @else {
|
||||
border-color: color-mix(in srgb, black 15%, $selection_mode_bg)
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
@ -2366,9 +2417,6 @@ treeview.view {
|
||||
&:selected {
|
||||
&, &:focus {
|
||||
border-radius: 0;
|
||||
border-left-color: mix($selected_fg_color, $selected_bg_color, 50%);
|
||||
border-top-color: rgba($fg_color, 0.15); // doesn't work unfortunately
|
||||
|
||||
@extend %selected_items;
|
||||
}
|
||||
}
|
||||
@ -2377,7 +2425,7 @@ treeview.view {
|
||||
color: $disabled_fg_color;
|
||||
|
||||
&:selected {
|
||||
color: mix($selected_fg_color, $selected_bg_color, 40%);
|
||||
color: rgba($selected_fg_color, 0.45);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2389,7 +2437,7 @@ treeview.view {
|
||||
> dndtarget:drop(active) {
|
||||
border-style: solid none;
|
||||
border-width: 1px;
|
||||
border-color: mix($fg_color, $selected_bg_color, 50%);
|
||||
border-color: $drop_target_color;
|
||||
|
||||
&.after { border-top-style: none; }
|
||||
|
||||
@ -2403,16 +2451,13 @@ treeview.view {
|
||||
|
||||
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
|
||||
|
||||
color: mix($fg_color, $base_color, 50%);
|
||||
color: $alt_fg_color;
|
||||
|
||||
&:hover { color: $fg_color; }
|
||||
|
||||
&:selected {
|
||||
color: mix($selected_fg_color, $selected_bg_color, 70%);
|
||||
&:hover { color: $selected_fg_color; }
|
||||
}
|
||||
|
||||
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
|
||||
|
||||
&:disabled { color: $alt_disabled_fg_color; }
|
||||
}
|
||||
|
||||
&.progressbar { // progress bar in treeviews
|
||||
@ -2750,8 +2795,13 @@ popover.menu {
|
||||
|
||||
&:selected:active {
|
||||
color: $selected_fg_color;
|
||||
background-color: darken($selected_bg_color, 5%); // matching buttons
|
||||
transition: background-color $shorter_duration $deceleration_curve;
|
||||
|
||||
@if $gnome_version == 'old' {
|
||||
background-color: darken($selected_bg_color, 5%);
|
||||
} @else {
|
||||
background-color: color-mix(in srgb, black 10%, $selected_bg_color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3123,10 +3173,20 @@ scrollbar {
|
||||
|
||||
$switch_image: linear-gradient(0deg, rgba($fg_color, 0.25) 0%, rgba($fg_color, 0.35) 100%);
|
||||
$switch_disabled_image: linear-gradient(0deg, rgba($fg_color, 0.1) 0%, rgba($fg_color, 0.15) 100%);
|
||||
$switch_checked_image: linear-gradient(0deg, lighten($selected_bg_color, 10%) 0%, $selected_bg_color 100%);
|
||||
$switch_checked_backdrop_image: linear-gradient(0deg, rgba($fg_color, 0.45) 0%, rgba($fg_color, 0.55) 100%);
|
||||
$switch_checked_disabled_image: linear-gradient(0deg, lighten($selected_bg_color, 35%) 0%, lighten($selected_bg_color, 25%) 100%);
|
||||
$switch_animation: switch_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1);
|
||||
|
||||
$switch_checked_image: '';
|
||||
$switch_checked_disabled_image: '';
|
||||
|
||||
@if $gnome_version == 'old' {
|
||||
$switch_checked_image: linear-gradient(0deg, lighten($selected_bg_color, 10%) 0%, $selected_bg_color 100%);
|
||||
$switch_checked_disabled_image: linear-gradient(0deg, lighten($selected_bg_color, 35%) 0%, lighten($selected_bg_color, 25%) 100%);
|
||||
} @else {
|
||||
$switch_checked_image: linear-gradient(0deg, color-mix(in srgb, white 25%, $selected_bg_color) 0%, color-mix(in srgb, black 10%, $selected_bg_color) 100%);
|
||||
$switch_checked_disabled_image: linear-gradient(0deg, color-mix(in srgb, white 35%, $selected_bg_color) 0%, color-mix(in srgb, white 25%, $selected_bg_color) 100%);
|
||||
}
|
||||
|
||||
$switch_animation: switch_ripple_effect 0.1s cubic-bezier(0, 0, 0.2, 1);
|
||||
|
||||
@keyframes switch_ripple_effect {
|
||||
from {
|
||||
@ -3137,8 +3197,8 @@ $switch_animation: switch_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1);
|
||||
|
||||
to {
|
||||
background-image: $switch_checked_image, radial-gradient(circle farthest-corner at center,
|
||||
rgba($selected_bg_color, 0.75) 100%,
|
||||
rgba($selected_bg_color, 0.0) 0%);
|
||||
RGB($selected_bg_color, 75%) 100%,
|
||||
transparent 0%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -3153,7 +3213,12 @@ switch {
|
||||
font-size: 0;
|
||||
padding: 0;
|
||||
box-shadow: inset 0 1px 2px rgba(black, 0.1);
|
||||
background-image: $switch_image, radial-gradient(circle farthest-corner at center, transparent 0%, transparent 0%);
|
||||
|
||||
@if $gnome_version == 'old' {
|
||||
background-image: $switch_image, radial-gradient(circle farthest-corner at center, transparent 0%, transparent 0%);
|
||||
} @else {
|
||||
background-image: $switch_image;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: transparent;
|
||||
@ -3166,8 +3231,13 @@ switch {
|
||||
background-color: transparent;
|
||||
color: transparent;
|
||||
box-shadow: inset 0 1px 2px rgba(black, 0.15);
|
||||
transition: background-image 0.3s, box-shadow 0;
|
||||
background-image: $switch_checked_image, radial-gradient(circle farthest-corner at center, rgba($selected_bg_color, 0.75) 100%, transparent 0%);
|
||||
transition: background-image 0.1s, box-shadow 0;
|
||||
|
||||
@if $gnome_version == 'old' {
|
||||
background-image: $switch_checked_image, radial-gradient(circle farthest-corner at center, rgba($selected_bg_color, 0.75) 100%, transparent 0%);
|
||||
} @else {
|
||||
background-image: $switch_checked_image;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: transparent;
|
||||
@ -3242,7 +3312,13 @@ checkbutton, radiobutton {
|
||||
|
||||
$check_radio_border: if($variant == 'light', rgba(black, 0.2), rgba(black, 0.1));
|
||||
$check_radio_image: linear-gradient(0deg, #6a6a6a 0%, #545454 100%);
|
||||
$check_radio_checked_image: linear-gradient(0deg, darken($selected_bg_color, 5%) 0%, lighten($selected_bg_color, 5%) 100%);
|
||||
$check_radio_checked_image: '';
|
||||
|
||||
@if $gnome_version == 'old' {
|
||||
$check_radio_checked_image: linear-gradient(0deg, darken($selected_bg_color, 5%) 0%, lighten($selected_bg_color, 5%) 100%);
|
||||
} @else {
|
||||
$check_radio_checked_image: linear-gradient(0deg, color-mix(in srgb, black 5%, $selected_bg_color) 0%, color-mix(in srgb, white 5%, $selected_bg_color) 100%);
|
||||
}
|
||||
|
||||
check,
|
||||
radio {
|
||||
@ -3407,7 +3483,7 @@ scale {
|
||||
> trough > highlight {
|
||||
background-color: $selected_fg_color;
|
||||
|
||||
&:disabled { background-color: mix($selected_fg_color, $selected_bg_color, 55%); }
|
||||
&:disabled { background-color: rgba($selected_fg_color, 0.5); }
|
||||
}
|
||||
|
||||
&:disabled { background-color: transparentize(black, 0.9); }
|
||||
@ -3419,14 +3495,14 @@ scale {
|
||||
border-radius: $bt_radius;
|
||||
background-color: $selected_bg_color;
|
||||
|
||||
&:disabled { background-color: transparentize($selected_bg_color, 0.45); }
|
||||
&:disabled { background-color: rgba($selected_bg_color, 0.55); }
|
||||
}
|
||||
|
||||
// this is another differently styled part of the trough, the most relevant use case is for example
|
||||
// in media player to indicate how much video stream as been cached
|
||||
> trough > fill {
|
||||
border-radius: $bt_radius;
|
||||
background-color: transparentize($selected_bg_color, 0.5);
|
||||
background-color: rgba($selected_bg_color, 0.5);
|
||||
|
||||
&:disabled { background-color: transparent; }
|
||||
}
|
||||
@ -3468,17 +3544,32 @@ scale {
|
||||
background-color: $selected_fg_color;
|
||||
border-color: $selected_fg_color;
|
||||
|
||||
&:hover {
|
||||
background-color: mix($selected_fg_color, $selected_bg_color, 85%);
|
||||
border-color: mix($selected_fg_color, $selected_bg_color, 85%);
|
||||
}
|
||||
&:active {
|
||||
background-color: mix($selected_fg_color, $selected_bg_color, 50%);
|
||||
border-color: mix($selected_fg_color, $selected_bg_color, 50%);
|
||||
}
|
||||
&:disabled{
|
||||
background-color: mix($selected_fg_color, $selected_bg_color, 55%);
|
||||
border-color: mix($selected_fg_color, $selected_bg_color, 55%);
|
||||
@if $gnome_version == 'old' {
|
||||
&:hover {
|
||||
background-color: mix($selected_fg_color, $selected_bg_color, 85%);
|
||||
border-color: mix($selected_fg_color, $selected_bg_color, 85%);
|
||||
}
|
||||
&:active {
|
||||
background-color: mix($selected_fg_color, $selected_bg_color, 50%);
|
||||
border-color: mix($selected_fg_color, $selected_bg_color, 50%);
|
||||
}
|
||||
&:disabled {
|
||||
background-color: mix($selected_fg_color, $selected_bg_color, 55%);
|
||||
border-color: mix($selected_fg_color, $selected_bg_color, 55%);
|
||||
}
|
||||
} @else {
|
||||
&:hover {
|
||||
background-color: color-mix(in srgb, $selected_fg_color 85%, $selected_bg_color);
|
||||
border-color: color-mix(in srgb, $selected_fg_color 85%, $selected_bg_color);
|
||||
}
|
||||
&:active {
|
||||
background-color: color-mix(in srgb, $selected_fg_color 50%, $selected_bg_color);
|
||||
border-color: color-mix(in srgb, $selected_fg_color 50%, $selected_bg_color);
|
||||
}
|
||||
&:disabled {
|
||||
background-color: color-mix(in srgb, $selected_fg_color 55%, $selected_bg_color);
|
||||
border-color: color-mix(in srgb, $selected_fg_color 55%, $selected_bg_color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -5541,4 +5632,4 @@ popover.entry-completion > contents {
|
||||
|
||||
statusbar {
|
||||
padding: $container_padding $container_padding * 2;
|
||||
}
|
||||
}
|
||||
@ -105,8 +105,13 @@
|
||||
// active osd entry
|
||||
//
|
||||
color: $selected_fg_color;
|
||||
border-color: darken($selection_mode_bg, 5%);
|
||||
background-color: $selected_bg_color;
|
||||
|
||||
@if $gnome_version == 'old' {
|
||||
border-color: darken($selection_mode_bg, 5%);
|
||||
} @else {
|
||||
border-color: color-mix(in srgb, black 25%, $selected_bg_color)
|
||||
}
|
||||
}
|
||||
|
||||
@else if $t==osd-insensitive {
|
||||
@ -180,8 +185,8 @@
|
||||
//
|
||||
label, & { color: transparentize($selected_fg_color, 0.45); }
|
||||
|
||||
border-color: if($variant == 'light', transparentize($selected_bg_color, 1), $dark_borders_color);
|
||||
background-color: transparentize($selected_bg_color, 0.45);
|
||||
border-color: if($variant == 'light', $selected_bg_color, $dark_borders_color);
|
||||
background-color: rgba($selected_bg_color, 0.45);
|
||||
@if $variant=='light' { box-shadow: none; }
|
||||
|
||||
opacity: 0.6;
|
||||
@ -356,9 +361,14 @@
|
||||
|
||||
color: $actionb_fg;
|
||||
background-color: $actionb_bg;
|
||||
border-color: if($variant == 'light', darken($actionb_bg, 6%), $dark_borders_color);
|
||||
background-image: none;
|
||||
box-shadow: if($variant=='light', none, (inset 0 1px rgba(white, 0.15), inset 0 -1px rgba(white, 0.03)));
|
||||
|
||||
@if $gnome_version == 'old' {
|
||||
border-color: if($variant == 'light', darken($actionb_bg, 6%), $dark_borders_color);
|
||||
} @else {
|
||||
border-color: if($variant == 'light', color-mix(in srgb, black 6% $actionb_bg), $dark_borders_color);
|
||||
}
|
||||
}
|
||||
|
||||
@else if $t==undecorated {
|
||||
|
||||
@ -103,7 +103,13 @@ $flap_sidebar_size: 240px;
|
||||
}
|
||||
|
||||
&.sidebar-row {
|
||||
.sidebar-icon { color: if($variant == 'light', $selected_bg_color, lighten($selected_bg_color, 20%)); }
|
||||
.sidebar-icon {
|
||||
@if $gnome_version == 'old' {
|
||||
color: if($variant == 'light', $selected_bg_color, lighten($selected_bg_color, 20%));
|
||||
} @else {
|
||||
color: if($variant == 'light', $selected_bg_color, color-mix(in srgb, white 20%, $selected_bg_color));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -354,6 +360,66 @@ preferencesgroup > box {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.cutout-button { background-color: $dialog_bg_color; }
|
||||
|
||||
@if $gnome_version == 'new' {
|
||||
button.accent-button {
|
||||
min-height: 24px;
|
||||
min-width: 24px;
|
||||
padding: $base_padding / 2;
|
||||
border-radius: $circular_radius;
|
||||
background: var(--accent-bg-color);
|
||||
outline: none;
|
||||
background-clip: content-box;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
|
||||
&:hover { box-shadow: 0 0 0 3px $divider_color; }
|
||||
|
||||
&:checked { box-shadow: 0 0 0 3px var(--accent-bg-color); }
|
||||
|
||||
&.blue, &.teal, &.green, &.yellow, &.orange, &.red, &.pink, &.purple, &.slate {
|
||||
--accent-color: oklab(from var(--accent-bg-color) var(--standalone-color-oklab));
|
||||
}
|
||||
|
||||
&.blue {
|
||||
--accent-bg-color: var(--accent-blue);
|
||||
}
|
||||
|
||||
&.teal {
|
||||
--accent-bg-color: var(--accent-teal);
|
||||
}
|
||||
|
||||
&.green {
|
||||
--accent-bg-color: var(--accent-green);
|
||||
}
|
||||
|
||||
&.yellow {
|
||||
--accent-bg-color: var(--accent-yellow);
|
||||
}
|
||||
|
||||
&.orange {
|
||||
--accent-bg-color: var(--accent-orange);
|
||||
}
|
||||
|
||||
&.red {
|
||||
--accent-bg-color: var(--accent-red);
|
||||
}
|
||||
|
||||
&.pink {
|
||||
--accent-bg-color: var(--accent-pink);
|
||||
}
|
||||
|
||||
&.purple {
|
||||
--accent-bg-color: var(--accent-purple);
|
||||
}
|
||||
|
||||
&.slate {
|
||||
--accent-bg-color: var(--accent-slate);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -350,31 +350,36 @@ indicatorbin {
|
||||
}
|
||||
}
|
||||
|
||||
headerbar > windowhandle > box viewswitcher.wide {
|
||||
box-shadow: inset 0 0 0 1px $light_borders_color;
|
||||
border-radius: $bt_radius;
|
||||
padding: 0;
|
||||
margin: 8px 0;
|
||||
headerbar > windowhandle > box viewswitcher {
|
||||
min-height: 0;
|
||||
|
||||
> button.toggle {
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
&.wide {
|
||||
box-shadow: inset 0 0 0 1px $light_borders_color;
|
||||
border-radius: $bt_radius;
|
||||
|
||||
&:not(:first-child) {
|
||||
border-width: 0 0 0 1px;
|
||||
border-style: none solid none none;
|
||||
border-image: linear-gradient(to bottom,
|
||||
transparent 16%,
|
||||
$light_borders_color 16%,
|
||||
$light_borders_color 84%,
|
||||
transparent 84%) 0 0 0 1 / 0 0 0 1px stretch;
|
||||
}
|
||||
|
||||
&:hover, &:active, &:checked {
|
||||
border-image: none;
|
||||
|
||||
& + button { border-image: none; }
|
||||
padding: 0;
|
||||
margin: 8px 0;
|
||||
|
||||
> button.toggle {
|
||||
margin: 0;
|
||||
min-height: 0;
|
||||
font-weight: 500;
|
||||
border-radius: $bt_radius;
|
||||
|
||||
&:not(:first-child) {
|
||||
border-width: 0 0 0 1px;
|
||||
border-style: none solid none none;
|
||||
border-image: linear-gradient(to bottom,
|
||||
transparent 16%,
|
||||
$light_borders_color 16%,
|
||||
$light_borders_color 84%,
|
||||
transparent 84%) 0 0 0 1 / 0 0 0 1px stretch;
|
||||
}
|
||||
|
||||
&:hover, &:active, &:checked {
|
||||
border-image: none;
|
||||
|
||||
& + button { border-image: none; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user