From bdc913cad795bf21bde19d289ce41e9c3955aee1 Mon Sep 17 00:00:00 2001 From: likehomedream Date: Wed, 26 Oct 2022 11:38:58 +0800 Subject: [PATCH] Update gtk hightlight --- debian/control | 6 +- debian/openkylin-theme-configure.install | 1 + debian/openkylin-theme.postinst | 2 + debian/openkylin-theme.prerm | 4 +- highlight/meson.build | 18 ++ highlight/ukuireload.c | 45 ++++ meson.build | 4 +- meson_options.txt | 1 + themes/ukui-black/gtk-3.0/_colors-public.scss | 27 +++ themes/ukui-black/gtk-3.0/_common.scss | 188 ++++++++-------- themes/ukui-black/gtk-3.0/_ukui-colors.scss | 92 ++++---- themes/ukui-black/gtk-3.0/_ukui-common.scss | 206 +++++++++--------- themes/ukui-white/gtk-3.0/_colors-public.scss | 27 +++ themes/ukui-white/gtk-3.0/_common.scss | 170 +++++++-------- themes/ukui-white/gtk-3.0/_ukui-colors.scss | 30 +-- themes/ukui-white/gtk-3.0/_ukui-common.scss | 86 ++++---- 16 files changed, 519 insertions(+), 388 deletions(-) create mode 100644 highlight/meson.build create mode 100644 highlight/ukuireload.c diff --git a/debian/control b/debian/control index 2e1974b1..f96bcda2 100644 --- a/debian/control +++ b/debian/control @@ -8,7 +8,11 @@ Build-Depends: debhelper-compat (= 12), meson, ninja-build, sass, - x11-apps + x11-apps, + libgtk-3-bin, + libgtk-3-dev, + libglib2.0-dev, + pkg-config Standards-Version: 4.5.0 Rules-Requires-Root: no Homepage: https://gitee.com/openkylin/openkylin-theme diff --git a/debian/openkylin-theme-configure.install b/debian/openkylin-theme-configure.install index e20af0cf..d425c315 100644 --- a/debian/openkylin-theme-configure.install +++ b/debian/openkylin-theme-configure.install @@ -1,2 +1,3 @@ etc/grub.d usr/share/glib-2.0 +usr/lib/*/gtk-3.0/modules/*.so diff --git a/debian/openkylin-theme.postinst b/debian/openkylin-theme.postinst index f443a0b9..7e56a457 100644 --- a/debian/openkylin-theme.postinst +++ b/debian/openkylin-theme.postinst @@ -67,3 +67,5 @@ if [ -x /usr/share/kylin-system-updater/kylin-reboot-required ]; then #执行请求重启提示 /usr/share/kylin-system-updater/kylin-reboot-required fi + +echo "export GTK_MODULES=ukuireload-gtk-module" >> /etc/profile diff --git a/debian/openkylin-theme.prerm b/debian/openkylin-theme.prerm index 631f0626..854c3b56 100644 --- a/debian/openkylin-theme.prerm +++ b/debian/openkylin-theme.prerm @@ -51,7 +51,9 @@ case "$1" in /usr/share/icons/lightseeking/cursor.theme update-alternatives --remove x-cursor-theme \ /usr/share/icons/blue-crystal/cursor.theme - ;; + sed -i '/ukuireload-gtk-module/d' /etc/profile + + ;; *) echo "$0 called with unknown argument \`$1'" 1>&2 exit 1 diff --git a/highlight/meson.build b/highlight/meson.build new file mode 100644 index 00000000..54a9c8ac --- /dev/null +++ b/highlight/meson.build @@ -0,0 +1,18 @@ +r = run_command('arch') +arch = r.stdout().strip() +pkg = import('pkgconfig') + +gtk3_dep = dependency('gtk+-3.0') +glib2_dep = dependency('glib-2.0') + +gtkmodule_dir = join_paths('/usr/lib/'+ arch +'-linux-gnu/gtk-3.0/modules') + +lib = shared_module( + 'ukuireload-gtk-module', + sources:'ukuireload.c', + dependencies: [gtk3_dep,glib2_dep], + install: true, + install_dir: gtkmodule_dir +) + +pkg.generate(lib) diff --git a/highlight/ukuireload.c b/highlight/ukuireload.c new file mode 100644 index 00000000..58f00935 --- /dev/null +++ b/highlight/ukuireload.c @@ -0,0 +1,45 @@ +#include +#include +#include +#include + +gchar *path; +GFile *file; +GFileMonitor *mon; +GtkCssProvider *provider; + +void ukuireload_colors() { + if (provider != NULL) { + gtk_style_context_remove_provider_for_screen( + gdk_screen_get_default(), + GTK_STYLE_PROVIDER(provider) + ); + g_clear_object(&provider); + } + provider = gtk_css_provider_new(); + gtk_style_context_add_provider_for_screen( + gdk_screen_get_default(), + GTK_STYLE_PROVIDER (provider), + GTK_STYLE_PROVIDER_PRIORITY_USER+1 + ); + gtk_css_provider_load_from_file( + provider, + file, + NULL + ); +} + +__attribute__((visibility("default"))) void gtk_module_init(gint *argc, gchar ***argv[]) { + path = g_strconcat(g_get_user_config_dir(), "/gtk-3.0/colors.css", NULL); + file = g_file_new_for_path(path); + + mon = g_file_monitor_file( + file, + G_FILE_MONITOR_NONE, + NULL, + NULL + ); + + //监听文件改变信号 重新加载颜色 + g_signal_connect(mon, "changed", G_CALLBACK(ukuireload_colors), NULL); +} diff --git a/meson.build b/meson.build index 520c317a..742d71a6 100644 --- a/meson.build +++ b/meson.build @@ -1,7 +1,7 @@ -project('openkylin-theme', +project('openkylin-theme','c', default_options: ['prefix=/usr/']) -components_d = ['themes', 'icons', 'sounds'] +components_d = ['themes', 'icons', 'sounds', 'highlight'] foreach component: components_d if get_option(component) diff --git a/meson_options.txt b/meson_options.txt index 6cc2a1e0..06e12374 100644 --- a/meson_options.txt +++ b/meson_options.txt @@ -1,6 +1,7 @@ option('themes', type: 'boolean', value: true, description:'build ukui gtk theme') option('icons', type: 'boolean', value: true, description:'build ukui icons theme') option('sounds', type: 'boolean', value: true, description:'build ukui sounds theme') +option('highlight', type: 'boolean', value: true, description:'build ukui gtk highlight theme') option('grub', type: 'boolean', value: true, description:'build ukui grub theme') option('plymouth', type: 'boolean', value: true, description:'build ukui plymouth theme') diff --git a/themes/ukui-black/gtk-3.0/_colors-public.scss b/themes/ukui-black/gtk-3.0/_colors-public.scss index 89b88942..b0e93016 100644 --- a/themes/ukui-black/gtk-3.0/_colors-public.scss +++ b/themes/ukui-black/gtk-3.0/_colors-public.scss @@ -7,6 +7,33 @@ // warning, it's innocuous and can be defeated by using "" + $var +@define-color hover_bg_color_ukui #{"" + $hover_bg_color}; +@define-color hover_bd_color_ukui #{"" + $hover_bd_color}; +@define-color active_bg_color_ukui #{"" + $active_bg_color}; +@define-color active_bd_color_ukui #{"" + $active_bd_color}; +@define-color selected_bg_color_ukui #{"" + $selected_bg_color}; +@define-color selected_borders_color_ukui #{"" + $selected_borders_color}; +@define-color bt_hover_bg_color_ukui #{"" + $bt_hover_bg_color}; +@define-color bt_hover_bd_color_ukui #{"" + $bt_hover_bd_color}; +@define-color bt_active_bg_color_ukui #{"" + $bt_active_bg_color}; +@define-color bt_active_bd_color_ukui #{"" + $bt_active_bd_color}; +@define-color bt_selected_bg_color_ukui #{"" + $bt_selected_bg_color}; +@define-color bt_selected_bd_color_ukui #{"" + $bt_selected_bd_color}; +@define-color crb_active_bg_color_ukui #{"" + $crb_active_bg_color}; +@define-color crb_hover_bd_color_ukui #{"" + $crb_hover_bd_color}; +@define-color crb_active_bd_color_ukui #{"" + $crb_active_bd_color}; +@define-color success_color_ukui #{"" + $success_color}; +@define-color base_active_bg_color_ukui #{"" + $base_active_bg_color}; +@define-color base_prelight_bg_color_ukui #{"" + $base_prelight_bg_color}; +@define-color base_selected_bg_color_ukui #{"" + $base_selected_bg_color}; +@define-color base_checked_bg_color_ukui #{"" + $base_checked_bg_color}; +@define-color base_active_border_color_ukui #{"" + $base_active_border_color}; +@define-color base_prelight_border_color_ukui #{"" + $base_prelight_border_color}; +@define-color base_active_bg_image_ukui #{"" + $base_active_bg_image}; +@define-color base_checked_bg_image_ukui #{"" + $base_checked_bg_image}; +@define-color trough_filled_space_normal_color_ukui #{"" + $trough_filled_space_normal_color}; +@define-color toolbar_button_bg_active_color_ukui #{"" + $toolbar_button_bg_active_color}; + /*mate-terminal background color*/ @define-color text_view_bg #{"" + $base_normal_bg_color}; diff --git a/themes/ukui-black/gtk-3.0/_common.scss b/themes/ukui-black/gtk-3.0/_common.scss index a1d1cb7a..61cff7a6 100644 --- a/themes/ukui-black/gtk-3.0/_common.scss +++ b/themes/ukui-black/gtk-3.0/_common.scss @@ -30,7 +30,7 @@ $button_transition: all 200ms $ease-out-quad; outline-offset: -3px; outline-width: 0px; -gtk-outline-radius: 2px; - -gtk-secondary-caret-color: $selected_bg_color; + -gtk-secondary-caret-color: gtk("@selected_bg_color"); } /****************** @@ -38,7 +38,7 @@ $button_transition: all 200ms $ease-out-quad; ******************/ .background { background-color: $bg_color; - color:$fg_color; + color: $fg_color; &:backdrop { color: $backdrop_fg_color; @@ -58,12 +58,12 @@ $button_transition: all 200ms $ease-out-quad; background-color: $bg_color; &:hover { color: $active_fg_color; - background-color: $active_bg_color; + background-color: gtk("@active_bg_color"); } &:active { color: $active_fg_color; - background-color: $active_bg_color; + background-color: gtk("@active_bg_color"); } &:disabled { @@ -73,7 +73,7 @@ $button_transition: all 200ms $ease-out-quad; &:selected { color: $selected_fg_color; - background-color: $selected_bg_color; + background-color: gtk("@selected_bg_color"); } } @@ -126,9 +126,6 @@ iconview { rubberband { //border: 1px solid darken($selected_bg_color, 10%); background-color: transparentize(darken($selected_bg_color, 10%), 0.8); - background-image: linear-gradient(to bottom, - transparentize($base_selected_bg_color, 0.65), - transparentize($base_selected_bg_color, 0.65)); } flowbox { @@ -173,7 +170,7 @@ label { @extend %nobg_selected_items; } selection { - background-color: $selected_bg_color; + background-color: gtk("@selected_bg_color"); color: $selected_fg_color; } &:disabled { @@ -303,7 +300,7 @@ entry { } } &:hover{ - border-color: $active_bd_color; + border-color: gtk("@active_bd_color"); } &:focus { @include entry(focus); @@ -343,7 +340,7 @@ entry { color: $active_fg_color; } &:active { - color: $selected_bg_color; + color: gtk("@selected_bg_color"); } &:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 80%); @@ -373,10 +370,10 @@ entry { progress { margin: 2px -6px; background-color: transparent; - background-image: none; + background: none; border-radius: 0; border-width: 0 0 2px; - border-color: $selected_bg_color; + border-color: gtk("@selected_bg_color"); border-style: solid; box-shadow: none; @@ -467,10 +464,10 @@ treeview entry { } &.flat, & { border-radius: 0; - background-image: none; + background: none; background-color: $bg_color; &:focus { - border-color: $selected_bg_color; + border-color: gtk("@selected_bg_color"); } } } @@ -501,7 +498,7 @@ treeview entry { :backdrop & { color: $backdrop_base_color; - background-color: $selected_bg_color; + background-color: gtk("@selected_bg_color"); } &.button { @@ -526,15 +523,15 @@ treeview entry { * Buttons* *************/ -$_dot_color: $selected_bg_color; +$_dot_color: gtk("@selected_bg_color"); @keyframes needs_attention { from { - background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to($_dot_color), to(transparent)); + background: -gtk-gradient(radial, center center, 0, center center, 0.01, to($_dot_color), to(transparent)); } to { - background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to($_dot_color), to(transparent)); + background: -gtk-gradient(radial, center center, 0, center center, 0.5, to($_dot_color), to(transparent)); } } @@ -725,7 +722,7 @@ button { } &:disabled { - background-image: none; + background: none; border-color: transparent; box-shadow: none; } @@ -857,7 +854,7 @@ button { > label, > image { animation: none; - background-image: none; + background: none; } } } @@ -917,7 +914,7 @@ button { // the followind code is needed since we use a darker bottom border on buttons, which looks pretty // bad with a 100% border radius (see https://bugzilla.gnome.org/show_bug.cgi?id=771205 for details), - // so on relevant states we an additional background-image with a gradient clipped on the border-box, + // so on relevant states we an additional background with a gradient clipped on the border-box, // so setting a transparent border would reveal it. // FIXME: take care of colored circular button. $_border_bg: linear-gradient(to top, $alt-borders-color 25%, $bg_color 50%); @@ -941,7 +938,7 @@ button { $_dot_shadow: _text_shadow_color(); $_dot_shadow_r: 0.5; - background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to($_dot_color), to(transparent)), -gtk-gradient(radial, center center, 0, center center, $_dot_shadow_r, to($_dot_shadow), to(transparent)); + background: -gtk-gradient(radial, center center, 0, center center, 0.5, to($_dot_color), to(transparent)), -gtk-gradient(radial, center center, 0, center center, $_dot_shadow_r, to($_dot_shadow), to(transparent)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 4px; @@ -963,24 +960,24 @@ button { box-shadow: none; border-radius: 4px; color: $button_fg_color; - background-image: image($toolbar_button_bg_color); + background: $toolbar_button_bg_color; &:hover { color: $bt_hover_fg_color; - background-image: image($bt_hover_bg_color); + background: gtk("@bt_hover_bg_color"); } &:disabled { color: $bt_disable_fg_color; - background-image: image($toolbar_button_bg_color); + background: $toolbar_button_bg_color; } &:backdrop { color: $bt_backdrop_fg_color; - background-image:image( $toolbar_button_bg_color); + background: $toolbar_button_bg_color; } &:backdrop:disabled { color: $bt_disable_fg_color; - background-image: image($toolbar_button_bg_color); + background: $toolbar_button_bg_color; } } @@ -1055,7 +1052,7 @@ toolbar.inline-toolbar toolbutton:backdrop { } %undecorated_button { - background-image: none; + background: none; border-color: transparent; box-shadow: inset 0 1px transparentize(white, 1), 0 1px transparentize(white, 1); text-shadow: none; @@ -1075,8 +1072,8 @@ modelbutton.flat, @extend %undecorated_button; &:hover { - color:$active_fg_color; - background-color: $active_bg_color; + color: $active_fg_color; + background-color: gtk("@active_bg_color"); } &:selected { @@ -1090,7 +1087,7 @@ modelbutton.flat, &:backdrop:hover { @extend %undecorated_button; color: $active_fg_color; - background-color: $active_bg_color; + background-color: gtk("@active_bg_color"); } } @@ -1099,7 +1096,7 @@ modelbutton.flat arrow { background-color: $change_bg_color; &:hover { color: $active_fg_color; - background-color: $active_bg_color; + background-color: gtk("@active_bg_color"); } &.left { @@ -1174,8 +1171,8 @@ spinbutton { padding-bottom: 0; padding-top: 0; color: mix($fg_color, $bg_color, 90%); - background-image: none; - background-color:$button_bg_color; + background: none; + background-color: $button_bg_color; border-style: none none none solid; border-color: transparentize($bg_color, 0.7); border-radius: 0; @@ -1187,7 +1184,7 @@ spinbutton { &:hover { color: $active_fg_color; - background-color: $base_prelight_bg_color; + background-color: gtk("@base_prelight_bg_color"); } &:disabled { @@ -1250,7 +1247,7 @@ spinbutton { color: $active_fg_color; border-color: transparentize(opacify($osd_borders_color, 1), 0.5); - background-color: $active_bg_color, ; + background-color: gtk("@active_bg_color"), ; -gtk-icon-shadow: 0 1px black; box-shadow: none; } @@ -1457,7 +1454,7 @@ headerbar { box-shadow:none; &:backdrop { border-style:none; - background-image: none; + background: none; box-shadow: inset 0 1px $top_hilight; transition: $backdrop_transition; } @@ -1485,8 +1482,8 @@ headerbar { border-style:none; &:backdrop { - background-color: $selected_bg_color; - background-image: none; + background-color: gtk("@selected_bg_color"); + background: none; border-style:none; } @@ -1505,27 +1502,27 @@ headerbar { @include button(hover, $selected_bg_color, $selected_fg_color); border-style:none; color: $active_fg_color; - background-color: $active_bg_color; + background-color: gtk("@active_bg_color"); } &:active, &:checked { @include button(active, $selected_bg_color, $selected_fg_color); border-style:none; color: $active_fg_color; - background-color: $active_bg_color; + background-color: gtk("@active_bg_color"); } &:backdrop { &.flat, & { @include button(backdrop, $selected_bg_color, $selected_fg_color); -gtk-icon-effect: none; - border-color: $selected_borders_color; + border-color: gtk("@selected_borders_color"); border-style:none; &:active, &:checked { @include button(backdrop-active, $selected_bg_color, $selected_fg_color); color: $active_fg_color; - background-color: $active_bg_color; - border-color: $selected_borders_color; + background-color: gtk("@active_bg_color"); + border-color: gtk("@selected_borders_color"); border-style:none; } &:disabled { @@ -1535,8 +1532,8 @@ headerbar { &:active, &:checked { @include button(backdrop-insensitive-active, $selected_bg_color, $selected_fg_color); color: $active_fg_color; - background-color: $active_bg_color; - border-color: $selected_borders_color; + background-color: gtk("@active_bg_color"); + border-color: gtk("@selected_borders_color"); border-style:none; } } @@ -1557,14 +1554,14 @@ headerbar { } &.suggested-action { @include button(normal); - border-color: $selected_borders_color; + border-color: gtk("@selected_borders_color"); &:hover { @include button(hover); - border-color: $selected_borders_color; + border-color: gtk("@selected_borders_color"); } &:active { @include button(active); - border-color: $selected_borders_color; + border-color: gtk("@selected_borders_color"); } &:disabled { @include button(insensitive); @@ -1572,11 +1569,11 @@ headerbar { } &:backdrop { @include button(backdrop); - border-color: $selected_borders_color; + border-color: gtk("@selected_borders_color"); } &:backdrop:disabled { @include button(backdrop-insensitive); - border-color: $selected_borders_color; + border-color: gtk("@selected_borders_color"); } } } @@ -1585,7 +1582,7 @@ headerbar { &:backdrop, & { border-color: transparentize($menu_color, 1); background-color: transparentize($menu_color, 1); - background-image: none; + background: none; box-shadow: none; padding-left: 10px; padding-right: 10px; @@ -1739,7 +1736,7 @@ headerbar { // in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases padding: 0; background-color: transparent; - background-image: none; + background: none; border-style: none; border-color: transparent; box-shadow: none; @@ -1984,7 +1981,7 @@ notebook { &:hover:not(:active):not(:backdrop) { background-clip: padding-box; - background-image: none; + background: none; background-color: transparentize(white, 0.7); border-color: transparent; box-shadow: none; @@ -2166,7 +2163,7 @@ scrollbar { min-height: 10px; &:hover{ - background-color:$scrollbar_prelight_bg_color; + background-color: $scrollbar_prelight_bg_color; } // slider @@ -2226,8 +2223,8 @@ switch { &:checked { color: $selected_fg_color; - border-color: $selected_borders_color; - background-color: $selected_bg_color; + border-color: gtk("@selected_borders_color"); + background-color: gtk("@selected_bg_color"); text-shadow:none; } @@ -2247,8 +2244,8 @@ switch { &:checked { color: $backdrop_bg_color; - border-color: $selected_bg_color; - background-color: $selected_bg_color; + border-color: gtk("@selected_bg_color"); + background-color: gtk("@selected_bg_color"); } &:disabled { @@ -2274,7 +2271,7 @@ switch { } &:checked slider { - border: 1px solid $selected_borders_color; + border: 1px solid gtk("@selected_borders_color"); } &:disabled slider { @@ -2289,7 +2286,7 @@ switch { } &:checked slider { - border-color: $selected_bg_color; + border-color: gtk("@selected_bg_color"); } &:disabled slider { @@ -2299,10 +2296,10 @@ switch { row:selected & { box-shadow: none; - border-color: $selected_borders_color; + border-color: gtk("@selected_borders_color"); &:backdrop { - border-color: $selected_borders_color; + border-color: gtk("@selected_borders_color"); } slider:dir(rtl) { @@ -2315,7 +2312,7 @@ switch { slider { &:checked, & { - border-color: $selected_borders_color; + border-color: gtk("@selected_borders_color"); } } } @@ -2348,7 +2345,7 @@ switch { // ...on selected list rows row:selected & { &:disabled, & { - border-color: $selected_borders_color; + border-color: gtk("@selected_borders_color"); } } @@ -2364,9 +2361,9 @@ switch { } %scale_highlight { - border: 1px solid $selected_borders_color; + border: 1px solid gtk("@selected_borders_color"); border-radius: 0px; - background-color: $selected_bg_color; + background-color: gtk("@selected_bg_color"); &:disabled { background-color: $disable_bg_color; @@ -2374,7 +2371,7 @@ switch { } &:backdrop { - border-color: $selected_bg_color; + border-color: gtk("@selected_bg_color"); &:disabled { background-color: $disable_bg_color; @@ -2493,16 +2490,16 @@ scale { slider { @include button(normal-alt, $edge: $shadow_color); border: 1px solid ; - border-color: $selected_borders_color; + border-color: gtk("@selected_borders_color"); border-radius: 100%; transition: $button_transition; transition-property: background, border, box-shadow; &:hover { @include button(hover-alt, $edge: $shadow_color); - border-color: $selected_borders_color; + border-color: gtk("@selected_borders_color"); } &:active { - border-color: $selected_borders_color; + border-color: gtk("@selected_borders_color"); } &:disabled { @include button(insensitive); @@ -2687,7 +2684,7 @@ scale { min-width: 0; trough { - background-image: image($bg_color); + background: $bg_color; background-repeat: no-repeat; } @@ -2966,10 +2963,10 @@ levelbar { &.high, &:not(.empty) { border-color: darken($selected_bg_color, 20%); - background-color: $selected_bg_color; + background-color: gtk("@selected_bg_color"); &:backdrop { - border-color: $selected_bg_color; + border-color: gtk("@selected_bg_color"); } } @@ -3088,7 +3085,7 @@ scrolledwindow { // Overflow indication, works similarly to the overshoot, the size if fixed tho. undershoot { &.top, &.right, &.bottom, &.left { - background-image: none; + background: none; } } @@ -3174,7 +3171,7 @@ row { } &:backdrop { - background-color: $selected_bg_color; + background-color: gtk("@selected_bg_color"); } } } @@ -3194,11 +3191,11 @@ row { padding: 10px; border-radius: 0 0 5px 5px; background-color: $osd_bg_color; - background-image: linear-gradient(to bottom, transparentize(black, 0.8), transparent 2px); + background: linear-gradient(to bottom, transparentize(black, 0.8), transparent 2px); background-clip: padding-box; &:backdrop { - background-image: none; + background: none; transition: $backdrop_transition; } @@ -3299,7 +3296,7 @@ messagedialog { // Message Dialog styling .titlebar { min-height: 20px; - background-image: none; + background: none; background-color: $bg_color; border-style: none; border-top-left-radius: 7px; @@ -3526,12 +3523,12 @@ placessidebar { &.sidebar-placeholder-row { padding: 0 8px; min-height: 2px; - background-image: image($drop_target_color); + background: $drop_target_color; background-clip: content-box; } &.sidebar-new-bookmark-row { - color: $selected_bg_color; + color: gtk("@selected_bg_color"); } &:drop(active):not(:disabled) { @@ -3584,29 +3581,28 @@ paned { background-color: transparent; // workaround, using background istead of a border since the border will get rendered twice (?) - background-image: image($bg_color); + background: $bg_color; background-size: 1px 1px; &:selected { - background-image: image($selected_bg_color); + background: gtk("@selected_bg_color"); } // FIXME is this needed? &:backdrop { - background-image: image($backdrop_borders_color); + background: $backdrop_borders_color; } + &.wide { min-width: 5px; min-height: 5px; background-color: $bg_color; - background-image: image($bg_color), image($bg_color); background-size: 1px 1px, 1px 1px; &:backdrop { background-color: $backdrop_bg_color; - background-image: image($backdrop_borders_color), image($backdrop_borders_color); } } } @@ -3678,36 +3674,36 @@ infobar { box-shadow: none; border-radius: 4px; color: $button_fg_color; - background-image: image($button_bg_color); + background: $button_bg_color; border-style:none; &:hover { color: $bt_hover_fg_color; - background-image: image($bt_hover_bg_color); + background: gtk("@bt_hover_bg_color"); } &:active { color: $bt_active_fg_color; - background-image:image( $bt_active_bg_color); + background: gtk("@bt_active_bg_color"); } &:checked { color: $bt_active_fg_color; - background-image:image( $bt_active_bg_color); + background: gtk("@bt_active_bg_color"); } &:disabled { color: $bt_disable_fg_color; - background-image: image($bt_disable_bg_color); + background: $bt_disable_bg_color; } &:backdrop { color: $bt_backdrop_fg_color; - background-image:image( $bt_backdrop_bg_color); + background: $bt_backdrop_bg_color; } &:backdrop:disabled { color: $bt_disable_fg_color; - background-image: image($bt_disable_bg_color); + background: $bt_disable_bg_color; } } selection { @@ -4043,7 +4039,7 @@ headerbar.selection-mode button.titlebutton, // catch all extend :) %selected_items { - background-color: $base_selected_bg_color; + background-color: gtk("@base_selected_bg_color"); @at-root %nobg_selected_items, & { color: $base_selected_fg_color; &:disabled { @@ -4068,7 +4064,7 @@ headerbar.selection-mode button.titlebutton, //touch selection handlebars for the Popover.osd above cursor-handle { background-color: transparent; - background-image: none; + background: none; box-shadow: none; border-style: none; @each $s, $as in ("", ""), (":hover", "-hover"), (":active", "-active") { diff --git a/themes/ukui-black/gtk-3.0/_ukui-colors.scss b/themes/ukui-black/gtk-3.0/_ukui-colors.scss index f31a5db9..89969cb9 100644 --- a/themes/ukui-black/gtk-3.0/_ukui-colors.scss +++ b/themes/ukui-black/gtk-3.0/_ukui-colors.scss @@ -1,13 +1,18 @@ +@function gtk ($str) { + @return unquote("#{$str}_ukui"); +} + + $bg_color: #0c0c0d; $fg_color: #ffffff; $bd_color: $bg_color; $hover_bg_color:#3790FA; $hover_fg_color:#fff; $hover_bd_color:$hover_bg_color; -$active_bg_color: #3790FA; +$active_bg_color: $hover_bg_color; $active_fg_color: #fff; $active_bd_color: $active_bg_color; -$selected_bg_color: #3790FA; +$selected_bg_color: $hover_bg_color; $selected_fg_color: #fff; $selected_borders_color: $selected_bg_color; $disable_bg_color:#1C1C1E; @@ -20,22 +25,22 @@ $backdrop_bd_color:$backdrop_bg_color; /* All button color */ $button_bg_color:#393A3E; $button_fg_color:#fff; -$button_bd_color:$button_bg_color; -$bt_hover_bg_color:#3790FA; +$button_bd_color: $button_bg_color; +$bt_hover_bg_color: $hover_bg_color; $bt_hover_fg_color:#fff; -$bt_hover_bd_color:$bt_hover_bg_color; -$bt_active_bg_color:#3790FA; +$bt_hover_bd_color: $bt_hover_bg_color; +$bt_active_bg_color: $bt_hover_bg_color; $bt_active_fg_color:#fff; -$bt_active_bd_color:$bt_active_bg_color; -$bt_selected_bg_color: #3790FA; +$bt_active_bd_color: $bt_active_bg_color; +$bt_selected_bg_color: $bt_active_bg_color; $bt_selected_fg_color:#fff; -$bt_selected_borders_color: $selected_bg_color; +$bt_selected_bd_color: $bt_selected_bg_color; $bt_disable_bg_color: #1C1C1E ; $bt_disable_fg_color:#474747; -$bt_disable_bd_color:$bt_disable_bg_color; +$bt_disable_bd_color: $bt_disable_bg_color; $bt_backdrop_bg_color:#1C1C1E; $bt_backdrop_fg_color:#ffffff; -$bt_backdrop_bd_color:$bt_backdrop_bg_color; +$bt_backdrop_bd_color: $bt_backdrop_bg_color; /*For future colors can change*/ $change_bg_color:#2D2E32 ; @@ -50,12 +55,12 @@ $text_bg_color: #242424 ; $crb_bg_color:$bg_color; $crb_fg_color: #ffffff; $crb_bd_color:#48484D; -$crb_hover_bg_color: #2D418D ; -$crb_hover_fg_color:#2D418D ; -$crb_hover_bd_color: #6B8EEB; -$crb_active_bg_color: #3790FA ; +$crb_hover_bg_color: #2D418D; +$crb_hover_fg_color:#2D418D; +$crb_hover_bd_color: $hover_bg_color; +$crb_active_bg_color: $hover_bg_color; $crb_active_fg_color:#ffffff; -$crb_active_bd_color: #415FC4 ; +$crb_active_bd_color: $hover_bg_color; $crb_disable_bg_color: #1C1C1E ; $crb_disable_fg_color: #474747 ; $crb_disable_bd_color: #1C1C1E ; @@ -86,7 +91,6 @@ $osd_fg_color: $fg_color; $osd_text_color: $fg_color; $osd_bg_color: transparentize(#1c1f20, 0.3); $osd_borders_color: transparentize(black, 0.3); - $shadow_color: transparentize(black, 0.9); $drop_target_color: $bg_color; @@ -94,7 +98,7 @@ $drop_target_color: $bg_color; $backdrop_base_color: $backdrop_bg_color; $backdrop_text_color: $backdrop_fg_color; $backdrop_selected_fg_color: $backdrop_base_color; -$backdrop_borders_color: $backdrop_bd_color; +$backdrop_borders_color: #696969; $backdrop_dark_fill: $disable_bg_color; $backdrop_sidebar_bg_color: mix($backdrop_bg_color, $backdrop_base_color, 50%); $backdrop_scrollbar_bg_color: darken($backdrop_bg_color, 3%); @@ -107,7 +111,7 @@ $backdrop_menu_color: $backdrop_base_color; $base_normal_bg_color: $bg_color; $base_active_bg_color: $active_bg_color; $base_prelight_bg_color: $active_bg_color; -$base_selected_bg_color: $active_bg_color; +$base_selected_bg_color: $active_bg_color; $base_focused_bg_color: $bg_color; $base_backdrop_bg_color: $backdrop_bg_color; $base_checked_bg_color: $base_active_bg_color; @@ -115,14 +119,14 @@ $base_checked_bg_color: $base_active_bg_color; /* foreground colors in different states */ $base_normal_fg_color: $fg_color; $base_active_fg_color: $active_fg_color; -$base_prelight_fg_color: #3790FA; +$base_prelight_fg_color: $hover_bg_color;; $base_selected_fg_color: $active_fg_color; $base_focused_fg_color: $fg_color; $base_backdrop_fg_color: $backdrop_fg_color; $base_checked_fg_color: $fg_color; /* border color in different states */ -$base_normal_border_color: $backdrop_borders_color ; +$base_normal_border_color: $backdrop_borders_color; $base_active_border_color: $active_bd_color; $base_prelight_border_color: $active_bd_color; $base_selected_border_color: $backdrop_borders_color; @@ -134,20 +138,20 @@ $base_checked_border_color: $backdrop_borders_color; * background image in different states. * The color value of bg_image is the same as the bg_color */ -$base_normal_bg_image: image($bg_color); -$base_active_bg_image: image($base_active_bg_color); -$base_prelight_bg_image: image($base_prelight_bg_color); -$base_insensitive_bg_image: image($bg_color); -$base_focused_bg_image: image($base_focused_bg_color); -$base_backdrop_bg_image: image($base_backdrop_bg_color); -$base_backdrop_sensitive_bg_image: image($bg_color); -$base_backdrop_insensitive_bg_image: image($bg_color); -$base_checked_bg_image: image($base_checked_bg_color); +$base_normal_bg_image: $bg_color; +$base_active_bg_image: $base_active_bg_color; +$base_prelight_bg_image: $base_prelight_bg_color; +$base_insensitive_bg_image: $bg_color; +$base_focused_bg_image: $base_focused_bg_color; +$base_backdrop_bg_image: $backdrop_bg_color; +$base_backdrop_sensitive_bg_image: $disable_bg_color; +$base_backdrop_insensitive_bg_image: $disable_bg_color; +$base_checked_bg_image: $base_checked_bg_color; /* * ComboBox */ -$combobox_button_normal_bg_image: image(#2C2C2E); +$combobox_button_normal_bg_image: #2C2C2E; /* ComboBox dropdown colors */ $combobox_dropdown_menuitem_normal_bg_color: #1C1C1E; @@ -156,9 +160,9 @@ $combobox_dropdown_menuitem_normal_bg_color: #1C1C1E; */ $notebook_tab_normal_bg_color: $change_bg_color; $notebook_tab_checked_bg_color: $bg_color; -$notebook_tab_closebutton_normal_bg_image: image($change_bg_color); -$notebook_tab_closebutton_active_bg_image: image(#cccccc); -$notebook_tab_closebutton_checked_bg_image: image($notebook_tab_checked_bg_color); +$notebook_tab_closebutton_normal_bg_image: $change_bg_color; +$notebook_tab_closebutton_active_bg_image: #cccccc; +$notebook_tab_closebutton_checked_bg_image: $notebook_tab_checked_bg_color; /* * Scrollbar @@ -197,26 +201,26 @@ $treeview_view_selected_bg_color: #18181A; /* *ToolBar */ -$toolbar_button_bg_color:$change_bg_color; - +$toolbar_button_bg_color: $change_bg_color; +$toolbar_button_bg_active_color: $active_bg_color; /* * Headerbar */ $headerbar_color: lighten($bg_color, 5%); $headerbar_normal_fg_color: $fg_color; $headerbar_backdrop_fg_color: $fg_color; -$headerbar_normal_bg_image: image($bg_color); -$headerbar_backdrop_bg_image: image($bg_color); +$headerbar_normal_bg_image: $bg_color; +$headerbar_backdrop_bg_image: $bg_color; $headerbar_button_normal_fg_color: $fg_color; $headerbar_button_backdrop_fg_color: $fg_color; $headerbar_button_prelight_fg_color: $active_fg_color; $headerbar_button_active_fg_color: $active_fg_color; -$headerbar_button_normal_bg_image: image($button_bg_color); -$headerbar_button_backdrop_bg_image: image($bg_color); -$headerbar_button_prelight_bg_image: image(#545d64); -$headerbar_button_active_bg_image: image(#434d55); -$headerbar_closebutton_prelight_bg_image: image(#d42320); -$headerbar_closebutton_active_bg_image: image(#ac4844); +$headerbar_button_normal_bg_image: $button_bg_color; +$headerbar_button_backdrop_bg_image: $bg_color; +$headerbar_button_prelight_bg_image: #545d64; +$headerbar_button_active_bg_image: #434d55; +$headerbar_closebutton_prelight_bg_image: #d42320; +$headerbar_closebutton_active_bg_image: #ac4844; $headerbar_normal_border_color: #0C0C0D; $headerbar_backdrop_border_color: #0C0C0D; diff --git a/themes/ukui-black/gtk-3.0/_ukui-common.scss b/themes/ukui-black/gtk-3.0/_ukui-common.scss index 849dae84..67bd52d2 100644 --- a/themes/ukui-black/gtk-3.0/_ukui-common.scss +++ b/themes/ukui-black/gtk-3.0/_ukui-common.scss @@ -13,27 +13,27 @@ } &:hover { color: $hover_fg_color; - background-color: $hover_bg_color; + background-color: gtk("@hover_bg_color"); } &:active { color: $active_fg_color; - background-color: $active_bg_color; + background-color: gtk("@active_bg_color"); } &:checked { color: $active_fg_color; - background-color: $active_bg_color; + background-color: gtk("@active_bg_color"); } &:disabled { color: $disable_fg_color; background-color: $disable_bg_color; } &:backdrop{ - color:$backdrop_fg_color; - background-color:$backdrop_bg_color; + color: $backdrop_fg_color; + background-color: $backdrop_bg_color; } &:backdrop:disabled { color: $disable_fg_color; - background-image: image($disable_bg_color); + background: $disable_bg_color; } } @@ -51,36 +51,36 @@ border-style:none; &:focus { color: $bt_hover_fg_color; - background-image: image($bt_hover_bg_color); + background: gtk("@bt_hover_bg_color"); } &:hover { color: $bt_hover_fg_color; - background-image: image($bt_hover_bg_color); + background: gtk("@bt_hover_bg_color"); } &:active { color: $bt_active_fg_color; - background-image:image( $bt_active_bg_color); + background: gtk("@bt_active_bg_color"); } &:checked { color: $bt_active_fg_color; - background-image:image( $bt_active_bg_color); + background: gtk("@bt_active_bg_color"); } &:disabled { color: $bt_disable_fg_color; - background-image: image($bt_disable_bg_color); + background: $bt_disable_bg_color; } &:backdrop { color: $bt_backdrop_fg_color; - background-image:image( $bt_backdrop_bg_color); + background: $bt_backdrop_bg_color; } &:backdrop:disabled { color: $bt_disable_fg_color; - background-image: image($bt_disable_bg_color); + background: $bt_disable_bg_color; } } @@ -94,10 +94,10 @@ button { ************/ %menuitem_base_class { @extend %widget_base_class; - background:$menu_color; + background: $menu_color; &:disabled { - background-image: image($disable_bg_color); - color:$disable_fg_color; + background: $disable_bg_color; + color: $disable_fg_color; } min-height: 22px; } @@ -122,7 +122,7 @@ menubar, //Seems like it :hover even with keyboard focus box-shadow: none; color: $active_fg_color; - background-color:$active_bg_color; + background-color:gtk("@active_bg_color"); } &:disabled { color: $disable_fg_color; @@ -137,7 +137,7 @@ menubar, margin-left:5px; margin-right:5px; &:disabled{ - background-color:$menuitem_insensitive_bg_color; + background-color: $menuitem_insensitive_bg_color; } } } @@ -165,7 +165,7 @@ menu, &:hover { box-shadow: none; color: $active_fg_color; - background-color:$active_bg_color; + background-color:gtk("@active_bg_color"); } &:disabled { color: $disable_fg_color; @@ -209,7 +209,7 @@ menu, &:hover { box-shadow: none; color: $active_fg_color; - background-color:$active_bg_color; + background-color:gtk("@active_bg_color"); } &.top { margin-top: -6px; @@ -248,11 +248,11 @@ combobox { background-color: $combobox_dropdown_menuitem_normal_bg_color; &:focus { color: $active_fg_color; - background-color: $active_bg_color; + background-color: gtk("@active_bg_color"); } &:hover { color: $active_fg_color; - background-color: $active_bg_color; + background-color: gtk("@active_bg_color"); } } } @@ -260,7 +260,7 @@ combobox { /* When combobox isn't clicked, it uses button's style. i don't know what the hell. */ button { @extend %button_base_class; - background-image: $combobox_button_normal_bg_image; + background: $combobox_button_normal_bg_image; } /* When combobox entry isn't clicked, it uses entry's style. I don't want to change it. */ @@ -318,20 +318,20 @@ entry { button { border-radius:10px; border-width:0; - background-image: $notebook_tab_closebutton_normal_bg_image; + background: $notebook_tab_closebutton_normal_bg_image; } &:checked { button { border-radius:10px; border-width:0; - background-image: $notebook_tab_closebutton_checked_bg_image; + background: $notebook_tab_closebutton_checked_bg_image; } } &:hover{ button{ border-radius: 10px; border-width:0; - background-image: $notebook_tab_closebutton_active_bg_image; + background: $notebook_tab_closebutton_active_bg_image; } } @@ -365,7 +365,7 @@ notebook { background-color: transparent; min-width: 40px; min-height: 40px; - background-image: none; + background: none; transition: none; box-shadow: none; border-width: 0; @@ -392,7 +392,7 @@ checkbutton.text-button, radiobutton.text-button { check, radio { border-radius: 4px; - color:$crb_fg_color; + color: $crb_fg_color; margin: 2px 6px 0 0px; &:only-child { margin: 0; @@ -415,50 +415,50 @@ radio { box-shadow: none; -gtk-icon-shadow: none; -gtk-icon-source: none; - background-image: image($crb_bg_color); - border-color:$crb_bd_color; + background: $crb_bg_color; + border-color: $crb_bd_color; &:focus{ - border-color:$crb_hover_bd_color; - background-image: image($crb_hover_bg_color); - color:$crb_hover_fg_color; + border-color: gtk("@crb_hover_bd_color"); + background: $crb_hover_bg_color; + color: $crb_hover_fg_color; } &:hover{ - border-color:$crb_hover_bd_color; - background-image: image($crb_hover_bg_color); - color:$crb_hover_fg_color; + border-color: gtk("@crb_hover_bd_color"); + background: $crb_hover_bg_color; + color: $crb_hover_fg_color; } &:checked{ - background-image: image($crb_active_bg_color); - border-color:$crb_active_bd_color; + border-color: gtk("@crb_active_bd_color"); + background: gtk("@crb_active_bg_color"); color: $crb_active_fg_color; &:disabled { - background-image: image($crb_disable_bg_color); - border-color:$crb_disable_bd_color; + border-color: $crb_disable_bd_color; + background: $crb_disable_bg_color; color: $crb_disable_fg_color; } } &:selected { - background-image: image($crb_active_bg_color); - border-color:$crb_active_bd_color; + border-color: gtk("@crb_active_bd_color"); + background: gtk("@crb_active_bg_color"); color: $crb_active_fg_color; &:disabled { - background-image: image($crb_disable_bg_color); - border-color:$crb_disable_bd_color; + border-color: $crb_disable_bd_color; + background: $crb_disable_bg_color; color: $crb_disable_fg_color; } } &:disabled { - background-image: image($crb_disable_bg_color); - border-color:$crb_disable_bd_color; + background: $crb_disable_bg_color; + border-color: $crb_disable_bd_color; color: $crb_disable_fg_color; } &:backdrop { - background-image: image($crb_backdrop_bg_color); - border-color:$crb_backdrop_bd_color; + background: $crb_backdrop_bg_color; + border-color: $crb_backdrop_bd_color; color: $crb_backdrop_fg_color; &:disabled { - background-image: image($crb_disable_bg_color); - border-color:$crb_disable_bd_color; + background: $crb_disable_bg_color; + border-color: $crb_disable_bd_color; color: $crb_disable_fg_color; } } @@ -466,7 +466,7 @@ radio { // the borders of the light variant versions of checks and radios are too similar in luminosity to the selected background // color, hence we need special casing. row:selected & { - border-color: $selected_borders_color; + border-color: gtk("@selected_borders_color"); } .osd & { @include button(osd); @@ -542,39 +542,39 @@ menu menuitem { treeview.view check { @extend %check; - background-image: image($bg_color); + background: $bg_color; &:checked{ - background-image: image($crb_active_bg_color); - border-color:$crb_active_bd_color; + background: gtk("@crb_active_bg_color"); + border-color: $crb_active_bd_color; color: $crb_active_fg_color; &:disabled { - background-image: image($crb_active_bg_color); - border-color:$crb_active_bd_color; + background: gtk("@crb_active_bg_color"); + border-color: $crb_active_bd_color; color: $crb_active_fg_color; &:hover{ - background-image: image($crb_active_bg_color); - border-color:$crb_active_bd_color; + background: gtk("@crb_active_bg_color"); + border-color: $crb_active_bd_color; color: $crb_active_fg_color; } } } &:disabled { - background-image: image($bg_color); - border-color:$crb_disable_bd_color; + background: $bg_color; + border-color: $crb_disable_bd_color; color: $crb_disable_fg_color; &:hover{ - border-color:$crb_hover_bd_color; - background-image: image($crb_hover_bg_color); - color:$crb_hover_fg_color; + border-color: gtk("@crb_active_bd_color"); + background: $crb_hover_bg_color; + color: $crb_hover_fg_color; } } &:backdrop { - background-image: image($crb_backdrop_bg_color); - border-color:$crb_backdrop_bd_color; + background: $crb_backdrop_bg_color; + border-color: $crb_backdrop_bd_color; color: $crb_backdrop_fg_color; &:disabled { - background-image: image($crb_disable_bg_color); - border-color:$crb_disable_bd_color; + background: $crb_disable_bg_color; + border-color: $crb_disable_bd_color; color: $crb_disable_fg_color; } } @@ -616,7 +616,7 @@ spinbutton { /* trough - filled part (highlight or progress) */ #{$filled_widget} { - background-color: $trough_filled_space_normal_color; + background-color: gtk("@trough_filled_space_normal_color"); border-color: $trough_border_normal_color; &:disabled { background-color: $disable_bg_color; @@ -733,7 +733,7 @@ treeview.view { &:backdrop, & { border-left-color: mix($selected_fg_color, $selected_bg_color, 50%); border-top-color: transparentize($fg_color, 0.9); - background-color: $active_bg_color; + background-color: gtk("@active_bg_color"); } } &:disabled { @@ -759,14 +759,14 @@ treeview.view { &:backdrop { border-left-color: $treeview_view_selected_bg_color; border-top: $treeview_view_selected_bg_color; - background-color:$treeview_view_selected_bg_color; - color:$backdrop_fg_color; + background-color: $treeview_view_selected_bg_color; + color: $backdrop_fg_color; } &:drop(active) { border-style: solid none; border-width: 1px; - border-color: $selected_borders_color; + border-color: gtk("@selected_borders_color"); &.after { border-top-style: none; } @@ -804,20 +804,20 @@ treeview.view { &.progressbar { // progress bar in treeviews color: $bg_color; - border: 1px solid $selected_borders_color; + border: 1px solid gtk("@selected_borders_color"); //border-radius: 4px; - background-color: $selected_bg_color; - background-image: linear-gradient(to bottom, $selected_bg_color, darken($selected_bg_color, 10%)); + background-color: gtk("@selected_bg_color"); + background: linear-gradient(to bottom, $selected_bg_color, darken($selected_bg_color, 10%)); //box-shadow: inset 0 1px transparentize(white, 0.7), 0 1px transparentize(black, 0.8); &:selected { &:focus, & { border-radius: 0px; - color: $selected_bg_color; + color: gtk("@selected_bg_color"); box-shadow: none; - background-image: linear-gradient(to bottom, $bg_color, darken($bg_color, 10%)); + background: linear-gradient(to bottom, $bg_color, darken($bg_color, 10%)); &:backdrop { - color: $selected_bg_color; - border-color: $selected_borders_color; + color: gtk("@selected_bg_color"); + border-color: gtk("@selected_borders_color"); background-color: $treeview_view_selected_bg_color; } } @@ -825,7 +825,7 @@ treeview.view { &:backdrop { color: $backdrop_base_color; - background-image: none; + background: none; box-shadow: none; } } @@ -839,7 +839,7 @@ treeview.view { background-color: transparentize($selected_fg_color, 0.7); border-width: 1px 0; border-style: solid; - border-color: $selected_bg_color; + border-color: gtk("@selected_bg_color"); } } } @@ -873,8 +873,8 @@ treeview.view { &:active, &:selected, &:hover, & { padding: 0 6px; color: $bg_color; - background-image: none; - background-color: $selected_bg_color; + background: none; + background-color: gtk("@selected_bg_color"); border-style: none; border-radius: 0; //box-shadow: inset 0 0 0 1px $bg_color; @@ -884,13 +884,13 @@ treeview.view { } acceleditor > label { - background-color: $selected_bg_color; + background-color: gtk("@selected_bg_color"); } } %column_header_button { padding: 0 6px; - background-image: none; + background: none; border-style: none solid solid none; border-color: $bg_color; border-radius: 0; @@ -898,18 +898,18 @@ treeview.view { &:disabled { border-color: $disable_fg_color; - background-image: none; + background: none; } &:backdrop { color: mix($backdrop_fg_color, $backdrop_bg_color, 50%); border-color: $backdrop_bg_color; border-style: none solid solid none; - background-image: none; + background: none; background-color: $backdrop_base_color; &:disabled { border-color: $disable_bg_color; - background-image: none; + background: none; } } @@ -933,36 +933,36 @@ scrolledwindow { *****************************************/ .titlebar, headerbar { color: $headerbar_normal_fg_color; - background-image: $headerbar_normal_bg_image; + background: $headerbar_normal_bg_image; &:backdrop { color: $headerbar_backdrop_fg_color; - background-image: $headerbar_backdrop_bg_image; + background: $headerbar_backdrop_bg_image; } button.titlebutton { border-radius:6px; color: $headerbar_button_normal_fg_color; - background-image:$headerbar_button_normal_bg_image; + background: $headerbar_button_normal_bg_image; border-width: 0px; /* maximize and minimize close */ &:hover,&:backdrop:hover { color: $headerbar_button_prelight_fg_color; - background-image: $headerbar_button_prelight_bg_image; + background: $headerbar_button_prelight_bg_image; } &:active,&:backdrop:active{ color: $headerbar_button_active_fg_color; - background-image: $headerbar_button_active_bg_image; + background: $headerbar_button_active_bg_image; } &:backdrop { color: $headerbar_button_backdrop_fg_color; - background-image:$headerbar_button_backdrop_bg_image; + background: $headerbar_button_backdrop_bg_image; } /* close button */ &.close:hover { - background-image: $headerbar_closebutton_prelight_bg_image; + background: $headerbar_closebutton_prelight_bg_image; } &.close:active { - background-image: $headerbar_closebutton_active_bg_image; + background: $headerbar_closebutton_active_bg_image; } } } @@ -972,7 +972,7 @@ scrolledwindow { %toolbar { -GtkWidget-window-dragging: true; padding: 4px; - background:$change_bg_color; + background: $change_bg_color; } toolbar { @@ -1003,7 +1003,7 @@ toolbar { box-shadow: none; border-radius: 4px; color: $button_fg_color; - background-image: image($toolbar_button_bg_color); + background: $toolbar_button_bg_color; } // toolbar separators &.horizontal separator { @@ -1041,7 +1041,7 @@ searchbar, @extend %darkbar; border-width: 1px; padding: 3px; - border-color:$sp_bd_color; + border-color: $sp_bd_color; } %darkbar { @@ -1050,7 +1050,7 @@ searchbar, background-color: $change_bg_color; &:backdrop { - color:$backdrop_fg_color; + color: $backdrop_fg_color; border-color: $sp_bd_color; background-color: $change_bg_color; box-shadow: none; @@ -1095,7 +1095,7 @@ separator { &:backdrop { &:backdrop:hover, &:backdrop:hover:selected, & { - color: $selected_bg_color; + color: gtk("@selected_bg_color"); } } @@ -1153,7 +1153,7 @@ button.emoji-section { border-color: $bg_color; } &:checked { - border-color: $selected_bg_color; + border-color: gtk("@selected_bg_color"); } label { padding: 0; @@ -1171,6 +1171,6 @@ button.emoji-section { padding: 6px; border-radius: 6px; :hover { - background: $selected_bg_color; + background: gtk("@selected_bg_color"); } } diff --git a/themes/ukui-white/gtk-3.0/_colors-public.scss b/themes/ukui-white/gtk-3.0/_colors-public.scss index 30b5c510..23af9183 100644 --- a/themes/ukui-white/gtk-3.0/_colors-public.scss +++ b/themes/ukui-white/gtk-3.0/_colors-public.scss @@ -7,6 +7,33 @@ // warning, it's innocuous and can be defeated by using "" + $var +@define-color hover_bg_color_ukui #{"" + $hover_bg_color}; +@define-color hover_bd_color_ukui #{"" + $hover_bd_color}; +@define-color active_bg_color_ukui #{"" + $active_bg_color}; +@define-color active_bd_color_ukui #{"" + $active_bd_color}; +@define-color selected_bg_color_ukui #{"" + $selected_bg_color}; +@define-color selected_borders_color_ukui #{"" + $selected_borders_color}; +@define-color bt_hover_bg_color_ukui #{"" + $bt_hover_bg_color}; +@define-color bt_hover_bd_color_ukui #{"" + $bt_hover_bd_color}; +@define-color bt_active_bg_color_ukui #{"" + $bt_active_bg_color}; +@define-color bt_active_bd_color_ukui #{"" + $bt_active_bd_color}; +@define-color bt_selected_bg_color_ukui #{"" + $bt_selected_bg_color}; +@define-color bt_selected_bd_color_ukui #{"" + $bt_selected_bd_color}; +@define-color crb_active_bg_color_ukui #{"" + $crb_active_bg_color}; +@define-color crb_hover_bd_color_ukui #{"" + $crb_hover_bd_color}; +@define-color crb_active_bd_color_ukui #{"" + $crb_active_bd_color}; +@define-color success_color_ukui #{"" + $success_color}; +@define-color base_active_bg_color_ukui #{"" + $base_active_bg_color}; +@define-color base_prelight_bg_color_ukui #{"" + $base_prelight_bg_color}; +@define-color base_selected_bg_color_ukui #{"" + $base_selected_bg_color}; +@define-color base_checked_bg_color_ukui #{"" + $base_checked_bg_color}; +@define-color base_active_border_color_ukui #{"" + $base_active_border_color}; +@define-color base_prelight_border_color_ukui #{"" + $base_prelight_border_color}; +@define-color base_active_bg_image_ukui #{"" + $base_active_bg_image}; +@define-color base_checked_bg_image_ukui #{"" + $base_checked_bg_image}; +@define-color trough_filled_space_normal_color_ukui #{"" + $trough_filled_space_normal_color}; +@define-color toolbar_button_bg_active_color_ukui #{"" + $toolbar_button_bg_active_color}; + /*mate-terminal background color*/ @define-color text_view_bg #{"" + $base_normal_bg_color}; diff --git a/themes/ukui-white/gtk-3.0/_common.scss b/themes/ukui-white/gtk-3.0/_common.scss index 8ba690fd..8b000932 100644 --- a/themes/ukui-white/gtk-3.0/_common.scss +++ b/themes/ukui-white/gtk-3.0/_common.scss @@ -30,7 +30,7 @@ $button_transition: all 200ms $ease-out-quad; outline-offset: -3px; outline-width: 0px; -gtk-outline-radius: 2px; - -gtk-secondary-caret-color: $selected_bg_color; + -gtk-secondary-caret-color: gtk("@selected_bg_color"); } /****************** @@ -60,12 +60,12 @@ $button_transition: all 200ms $ease-out-quad; background-color: $bg_color; &:hover { color: $active_fg_color; - background-color: $active_bg_color; + background-color: gtk("@hover_bg_color"); } &:active { color: $active_fg_color; - background-color: $active_bg_color; + background-color: gtk("@hover_bg_color"); } &:disabled { @@ -75,7 +75,7 @@ $button_transition: all 200ms $ease-out-quad; &:selected { color: $selected_fg_color; - background-color: $selected_bg_color; + background-color: gtk("@selected_bg_color"); } } @@ -126,11 +126,11 @@ iconview { .rubberband, rubberband { - //border: 1px solid darken($selected_bg_color, 10%); + //border: 1px solid darken(gtk("@selected_bg_color"), 10%); background-color: transparentize(darken($selected_bg_color, 10%), 0.8); - background-image: linear-gradient(to bottom, - transparentize($base_selected_bg_color, 0.65), - transparentize($base_selected_bg_color, 0.65)); + // background: linear-gradient(to bottom, + // transparentize(gtk("@hover_bg_color"), 0.65), + // transparentize(gtk("@hover_bg_color"), 0.65)); } flowbox { @@ -175,7 +175,7 @@ label { @extend %nobg_selected_items; } selection { - background-color: $selected_bg_color; + background-color: gtk("@selected_bg_color"); color: $selected_fg_color; } &:disabled { @@ -305,7 +305,7 @@ entry { } } &:hover{ - border-color: $active_bd_color; + border-color: gtk("@hover_bg_color"); } &:focus { @include entry(focus); @@ -345,7 +345,7 @@ entry { color: $active_fg_color; } &:active { - color: $selected_bg_color; + color: gtk("@selected_bg_color"); } &:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 80%); @@ -375,10 +375,10 @@ entry { progress { margin: 2px -6px; background-color: transparent; - background-image: none; + background: none; border-radius: 0; border-width: 0 0 2px; - border-color: $selected_bg_color; + border-color: gtk("@selected_bg_color"); border-style: solid; box-shadow: none; @@ -469,10 +469,10 @@ treeview entry { } &.flat, & { border-radius: 0; - background-image: none; + background: none; background-color: $bg_color; &:focus { - border-color: $selected_bg_color; + border-color: gtk("@selected_bg_color"); } } } @@ -495,15 +495,15 @@ treeview entry { border-style: none; $_entry_tag_color: $selected_fg_color; color: $_entry_tag_color; - $_entry_tag_bg: $selected_bg_color; + $_entry_tag_bg: gtk("@selected_bg_color"); background-color: $_entry_tag_bg; &:hover { - background-color: lighten($_entry_tag_bg, 10%); + background-color: $_entry_tag_bg; } :backdrop & { color: $backdrop_base_color; - background-color: $selected_bg_color; + background-color: gtk("@selected_bg_color"); } &.button { @@ -528,15 +528,15 @@ treeview entry { * Buttons* *************/ -$_dot_color: $selected_bg_color; +$_dot_color: gtk("@selected_bg_color"); @keyframes needs_attention { from { - background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to($_dot_color), to(transparent)); + background: -gtk-gradient(radial, center center, 0, center center, 0.01, to($_dot_color), to(transparent)); } to { - background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to($_dot_color), to(transparent)); + background: -gtk-gradient(radial, center center, 0, center center, 0.5, to($_dot_color), to(transparent)); } } @@ -742,7 +742,7 @@ button { &:disabled { @include button(osd-insensitive); - background-image: none; + background: none; border-color: transparent; box-shadow: none; } @@ -892,7 +892,7 @@ button { > label, > image { animation: none; - background-image: none; + background: none; } } } @@ -952,7 +952,7 @@ button { // the followind code is needed since we use a darker bottom border on buttons, which looks pretty // bad with a 100% border radius (see https://bugzilla.gnome.org/show_bug.cgi?id=771205 for details), - // so on relevant states we an additional background-image with a gradient clipped on the border-box, + // so on relevant states we an additional background with a gradient clipped on the border-box, // so setting a transparent border would reveal it. // FIXME: take care of colored circular button. $_border_bg: linear-gradient(to top, $alt-borders-color 25%, $bg_color 50%); @@ -976,7 +976,7 @@ button { $_dot_shadow: _text_shadow_color(); $_dot_shadow_r: 0.5; - background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to($_dot_color), to(transparent)), -gtk-gradient(radial, center center, 0, center center, $_dot_shadow_r, to($_dot_shadow), to(transparent)); + background: -gtk-gradient(radial, center center, 0, center center, 0.5, to($_dot_color), to(transparent)), -gtk-gradient(radial, center center, 0, center center, $_dot_shadow_r, to($_dot_shadow), to(transparent)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 4px; @@ -1001,7 +1001,7 @@ button { background: $toolbar_button_bg_color; &:hover { color: $bt_hover_fg_color; - background: $bt_hover_bg_color; + background: gtk("@bt_hover_bg_color"); } &:disabled { color: $bt_disable_fg_color; @@ -1090,7 +1090,7 @@ toolbar.inline-toolbar toolbutton:backdrop { } %undecorated_button { - background-image: none; + background: none; border-color: transparent; box-shadow: inset 0 1px transparentize(white, 1), 0 1px transparentize(white, 1); text-shadow: none; @@ -1111,7 +1111,7 @@ modelbutton.flat, &:hover { color:$active_fg_color; - background-color: $active_bg_color; + background-color: gtk("@hover_bg_color"); } &:selected { @@ -1125,7 +1125,7 @@ modelbutton.flat, &:backdrop:hover { @extend %undecorated_button; color: $active_fg_color; - background-color: $active_bg_color; + background-color: gtk("@hover_bg_color"); } } @@ -1134,7 +1134,7 @@ modelbutton.flat arrow { background-color: $change_bg_color; &:hover { color: $active_fg_color; - background-color: $active_bg_color; + background-color: gtk("@hover_bg_color"); } &.left { @@ -1209,7 +1209,7 @@ spinbutton { padding-bottom: 0; padding-top: 0; color: mix($fg_color, $bg_color, 90%); - background-image: none; + background: none; background-color: $button_bg_color; border-style: none none none solid; border-color: transparentize($bg_color, 0.7); @@ -1222,7 +1222,7 @@ spinbutton { &:hover { color: $active_fg_color; - background-color: $base_prelight_bg_color; + background-color: gtk("@hover_bg_color"); } &:disabled { @@ -1285,7 +1285,7 @@ spinbutton { color: $active_fg_color; border-color: transparentize(opacify($osd_borders_color, 1), 0.5); - background-color: $active_bg_color,; + background-color: gtk("@hover_bg_color"),; -gtk-icon-shadow: 0 1px black; box-shadow: none; } @@ -1492,7 +1492,7 @@ headerbar { box-shadow: none; &:backdrop { border-style: none; - background-image: none; + background: none; box-shadow: inset 0 1px $top_hilight; transition: $backdrop_transition; } @@ -1520,8 +1520,8 @@ headerbar { border-style: none; &:backdrop { - background-color: $selected_bg_color; - background-image: none; + background-color: gtk("@selected_bg_color"); + background: none; border-style: none; } @@ -1540,27 +1540,27 @@ headerbar { @include button(hover, $selected_bg_color, $selected_fg_color); border-style: none; color: $active_fg_color; - background-color: $active_bg_color; + background-color: gtk("@hover_bg_color"); } &:active, &:checked { @include button(active, $selected_bg_color, $selected_fg_color); border-style: none; color: $active_fg_color; - background-color: $active_bg_color; + background-color: gtk("@hover_bg_color"); } &:backdrop { &.flat, & { @include button(backdrop, $selected_bg_color, $selected_fg_color); -gtk-icon-effect: none; - border-color: $selected_borders_color; + border-color: gtk("@selected_borders_color"); border-style: none; &:active, &:checked { @include button(backdrop-active, $selected_bg_color, $selected_fg_color); color: $active_fg_color; - background-color: $active_bg_color; - border-color: $selected_borders_color; + background-color: gtk("@hover_bg_color"); + border-color: gtk("@selected_borders_color"); border-style:none; } &:disabled { @@ -1570,8 +1570,8 @@ headerbar { &:active, &:checked { @include button(backdrop-insensitive-active, $selected_bg_color, $selected_fg_color); color: $active_fg_color; - background-color: $active_bg_color; - border-color: $selected_borders_color; + background-color: gtk("@hover_bg_color"); + border-color: gtk("@selected_borders_color"); border-style: none; } } @@ -1592,14 +1592,14 @@ headerbar { } &.suggested-action { @include button(normal); - border-color: $selected_borders_color; + border-color: gtk("@selected_borders_color"); &:hover { @include button(hover); - border-color: $selected_borders_color; + border-color: gtk("@selected_borders_color"); } &:active { @include button(active); - border-color: $selected_borders_color; + border-color: gtk("@selected_borders_color"); } &:disabled { @include button(insensitive); @@ -1607,11 +1607,11 @@ headerbar { } &:backdrop { @include button(backdrop); - border-color: $selected_borders_color; + border-color: gtk("@selected_borders_color"); } &:backdrop:disabled { @include button(backdrop-insensitive); - border-color: $selected_borders_color; + border-color: gtk("@selected_borders_color"); } } } @@ -1620,7 +1620,7 @@ headerbar { &:backdrop, & { border-color: transparentize($menu_color, 1); background-color: transparentize($menu_color, 1); - background-image: none; + background: none; box-shadow: none; padding-left: 10px; padding-right: 10px; @@ -1770,7 +1770,7 @@ headerbar { // in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases padding: 0; background-color: transparent; - background-image: none; + background: none; border-style: none; border-color: transparent; box-shadow: none; @@ -2015,7 +2015,7 @@ notebook { &:hover:not(:active):not(:backdrop) { background-clip: padding-box; - background-image: none; + background: none; background-color: transparentize(white, 0.7); border-color: transparent; box-shadow: none; @@ -2253,8 +2253,8 @@ switch { &:checked { color: $selected_fg_color; - border-color: $selected_borders_color; - background-color: $selected_bg_color; + border-color: gtk("@selected_borders_color"); + background-color: gtk("@selected_bg_color"); text-shadow: none; } @@ -2274,8 +2274,8 @@ switch { &:checked { color: $backdrop_bg_color; - border-color: $selected_bg_color; - background-color: $selected_bg_color; + border-color: gtk("@selected_bg_color"); + background-color: gtk("@selected_bg_color"); } &:disabled { @@ -2301,7 +2301,7 @@ switch { } &:checked slider { - border: 1px solid $selected_borders_color; + border: 1px solid gtk("@selected_borders_color"); } &:disabled slider { @@ -2316,7 +2316,7 @@ switch { } &:checked slider { - border-color: $selected_bg_color; + border-color: gtk("@selected_bg_color"); } &:disabled slider { @@ -2326,10 +2326,10 @@ switch { row:selected & { box-shadow: none; - border-color: $selected_borders_color; + border-color: gtk("@selected_borders_color"); &:backdrop { - border-color: $selected_borders_color; + border-color: gtk("@selected_borders_color"); } slider:dir(rtl) { @@ -2342,7 +2342,7 @@ switch { slider { &:checked, & { - border-color: $selected_borders_color; + border-color: gtk("@selected_borders_color"); } } } @@ -2375,7 +2375,7 @@ switch { // ...on selected list rows row:selected & { &:disabled, & { - border-color: $selected_borders_color; + border-color: gtk("@selected_borders_color"); } } @@ -2391,9 +2391,9 @@ switch { } %scale_highlight { - border: 1px solid $selected_borders_color; + border: 1px solid gtk("@selected_borders_color"); border-radius: 0px; - background-color: $selected_bg_color; + background-color: gtk("@selected_bg_color"); &:disabled { background-color: $disable_bg_color; @@ -2401,7 +2401,7 @@ switch { } &:backdrop { - border-color: $selected_bg_color; + border-color: gtk("@selected_bg_color"); &:disabled { background-color: $disable_bg_color; @@ -2527,7 +2527,7 @@ scale { @include button(hover-alt, $edge: $shadow_color); } &:active { - border-color: $selected_borders_color; + border-color: gtk("@selected_borders_color"); } &:disabled { @include button(insensitive); @@ -2709,7 +2709,7 @@ scale { min-width: 0; trough { - background-image: image($bg_color); + background: $bg_color; background-repeat: no-repeat; } @@ -2987,20 +2987,20 @@ levelbar { &.high, &:not(.empty) { - border-color: darken($selected_bg_color, 20%); - background-color: $selected_bg_color; + border-color: gtk("@selected_bd_color"); + background-color: gtk("@selected_bg_color"); &:backdrop { - border-color: $selected_bg_color; + border-color: gtk("@selected_bd_color"); } } &.full { - border-color: darken($success_color, 20%); - background-color: $success_color; + // border-color: darken(gtk("@hover_bg_color"), 20%); + background-color: gtk("@hover_bg_color"); &:backdrop { - border-color: $success_color; + border-color: gtk("@hover_bg_color"); } } @@ -3111,7 +3111,7 @@ scrolledwindow { // Overflow indication, works similarly to the overshoot, the size if fixed tho. undershoot { &.top, &.right, &.bottom, &.left { - background-image: none; + background: none; } } @@ -3197,7 +3197,7 @@ row { } &:backdrop { - background-color: $selected_bg_color; + background-color: gtk("@selected_bg_color"); } } } @@ -3217,11 +3217,11 @@ row { padding: 10px; border-radius: 0 0 5px 5px; background-color: $osd_bg_color; - background-image: linear-gradient(to bottom, transparentize(black, 0.8), transparent 2px); + background: linear-gradient(to bottom, transparentize(black, 0.8), transparent 2px); background-clip: padding-box; &:backdrop { - background-image: none; + background: none; transition: $backdrop_transition; } @@ -3322,7 +3322,7 @@ messagedialog { // Message Dialog styling .titlebar { min-height: 20px; - background-image: none; + background: none; background-color: $bg_color; border-style: none; border-top-left-radius: 7px; @@ -3554,7 +3554,7 @@ placessidebar { } &.sidebar-new-bookmark-row { - color: $selected_bg_color; + color: gtk("@selected_bg_color"); } &:drop(active):not(:disabled) { @@ -3611,7 +3611,7 @@ paned { background-size: 1px 1px; &:selected { - background: $selected_bg_color; + background: gtk("@selected_bg_color"); } // FIXME is this needed? @@ -3703,17 +3703,17 @@ infobar { border-style:none; &:hover { color: $bt_hover_fg_color; - background: $bt_hover_bg_color; + background: gtk("@bt_hover_bg_color"); } &:active { color: $bt_active_fg_color; - background: $bt_active_bg_color; + background: gtk("@bt_active_bg_color"); } &:checked { color: $bt_active_fg_color; - background: $bt_active_bg_color; + background: gtk("@bt_active_bg_color"); } &:disabled { @@ -4056,7 +4056,7 @@ button.titlebutton { headerbar.selection-mode button.titlebutton, .titlebar.selection-mode button.titlebutton { - @include _button_text_shadow(white, $selected_bg_color); + @include _button_text_shadow(white, gtk("@selected_bg_color")); &:backdrop { -gtk-icon-shadow: none; } @@ -4065,7 +4065,7 @@ headerbar.selection-mode button.titlebutton, // catch all extend :) %selected_items { - background-color: $base_selected_bg_color; + background-color: gtk("@hover_bg_color"); @at-root %nobg_selected_items, & { color: $base_selected_fg_color; &:disabled { @@ -4090,7 +4090,7 @@ headerbar.selection-mode button.titlebutton, //touch selection handlebars for the Popover.osd above cursor-handle { background-color: transparent; - background-image: none; + background: none; box-shadow: none; border-style: none; @each $s, $as in ("", ""), (":hover", "-hover"), (":active", "-active") { diff --git a/themes/ukui-white/gtk-3.0/_ukui-colors.scss b/themes/ukui-white/gtk-3.0/_ukui-colors.scss index c180a6f8..19d48f77 100644 --- a/themes/ukui-white/gtk-3.0/_ukui-colors.scss +++ b/themes/ukui-white/gtk-3.0/_ukui-colors.scss @@ -1,13 +1,18 @@ +@function gtk ($str) { + @return unquote("#{$str}_ukui"); +} + + $bg_color: #ffffff; $fg_color: #0C0C0D; $bd_color: $bg_color; $hover_bg_color: #3790FA; $hover_fg_color: #F8F8F8; $hover_bd_color: $hover_bg_color; -$active_bg_color: #3790FA; +$active_bg_color: $hover_bg_color; $active_fg_color: #F8F8F8; $active_bd_color: $active_bg_color; -$selected_bg_color: #3790FA; +$selected_bg_color: $active_bg_color; $selected_fg_color: #F8F8F8; $selected_borders_color: $selected_bg_color; $disable_bg_color: #E6E6E6; @@ -21,15 +26,15 @@ $backdrop_bd_color: $backdrop_bg_color; $button_bg_color: #E6E6E6; $button_fg_color: #0C0C0D; $button_bd_color: $button_bg_color; -$bt_hover_bg_color: #3790FA; +$bt_hover_bg_color: $hover_bg_color; $bt_hover_fg_color: #F8F8F8; $bt_hover_bd_color: $bt_hover_bg_color; -$bt_active_bg_color: #3790FA; +$bt_active_bg_color: $bt_hover_bg_color; $bt_active_fg_color: #F8F8F8; $bt_active_bd_color: $bt_active_bg_color; -$bt_selected_bg_color: #3790FA; +$bt_selected_bg_color: $bt_active_bg_color; $bt_selected_fg_color: #F8F8F8; -$bt_selected_borders_color: $selected_bg_color; +$bt_selected_bd_color: $bt_selected_bg_color; $bt_disable_bg_color: #E6E6E6; $bt_disable_fg_color: #CCCCCC; $bt_disable_bd_color: $bt_disable_bg_color; @@ -39,7 +44,6 @@ $bt_backdrop_bd_color: $bt_backdrop_bg_color; /*For future colors can change*/ $change_bg_color: #ebebeb; - /*sp_bd_color*/ $sp_bd_color:#c0c0c0; /* Text Entries */ @@ -53,10 +57,10 @@ $crb_fg_color: #ffffff; $crb_bd_color: #BFBFBF; $crb_hover_bg_color: #DAE3FA; $crb_hover_fg_color: #DAE3FA; -$crb_hover_bd_color: #6B8EEB; -$crb_active_bg_color: #3790FA; +$crb_hover_bd_color: $hover_bg_color; +$crb_active_bg_color: $hover_bg_color; $crb_active_fg_color: #ffffff; -$crb_active_bd_color: #415FC4; +$crb_active_bd_color: $hover_bg_color; $crb_disable_bg_color: #E9E9E9; $crb_disable_fg_color: #ffffff; $crb_disable_bd_color: #E0E0E0; @@ -94,7 +98,7 @@ $drop_target_color: $bg_color; $backdrop_base_color: $backdrop_bg_color; $backdrop_text_color: $backdrop_fg_color; $backdrop_selected_fg_color: $backdrop_base_color; -$backdrop_borders_color: $backdrop_bd_color; +$backdrop_borders_color: #E6E6E6; $backdrop_dark_fill: mix($backdrop_borders_color, $backdrop_bg_color, 35%); $backdrop_sidebar_bg_color: mix($backdrop_bg_color, $backdrop_base_color, 50%); $backdrop_scrollbar_bg_color: darken($backdrop_bg_color, 3%); @@ -116,7 +120,7 @@ $base_checked_bg_color: $base_active_bg_color; /* foreground colors in different states */ $base_normal_fg_color: $fg_color; $base_active_fg_color: $active_fg_color; -$base_prelight_fg_color: #3790FA; +$base_prelight_fg_color: $hover_bg_color; $base_selected_fg_color: $active_fg_color; $base_focused_fg_color: $fg_color; $base_backdrop_fg_color: $backdrop_fg_color; @@ -200,7 +204,7 @@ $treeview_view_selected_bg_color: #F0F0F0; *ToolBar */ $toolbar_button_bg_color: $change_bg_color; -$toolbar_button_bg_active_color: #638eff; +$toolbar_button_bg_active_color: $active_bg_color; /* * Headerbar */ diff --git a/themes/ukui-white/gtk-3.0/_ukui-common.scss b/themes/ukui-white/gtk-3.0/_ukui-common.scss index 677707d2..44085b32 100644 --- a/themes/ukui-white/gtk-3.0/_ukui-common.scss +++ b/themes/ukui-white/gtk-3.0/_ukui-common.scss @@ -13,15 +13,15 @@ } &:hover { color: $hover_fg_color; - background-color: $hover_bg_color; + background-color: gtk("@hover_bg_color"); } &:active { color: $active_fg_color; - background-color: $active_bg_color; + background-color: gtk("@hover_bg_color"); } &:checked { color: $active_fg_color; - background-color: $active_bg_color; + background-color: gtk("@hover_bg_color"); } &:disabled { color: $disable_fg_color; @@ -51,21 +51,21 @@ border-style: none; &:focus { color: $bt_hover_fg_color; - background: $bt_hover_bg_color; + background: gtk("@bt_hover_bg_color"); } &:hover { color: $bt_hover_fg_color; - background: $bt_hover_bg_color; + background: gtk("@bt_hover_bg_color"); } &:active { color: $bt_active_fg_color; - background: $bt_active_bg_color; + background: gtk("@bt_active_bg_color"); } &:checked { color: $bt_active_fg_color; - background: $bt_active_bg_color; + background: gtk("@bt_active_bg_color"); } &:disabled { @@ -122,7 +122,7 @@ menubar, //Seems like it :hover even with keyboard focus box-shadow: none; color: $active_fg_color; - background-color: $active_bg_color; + background-color: gtk("@hover_bg_color"); } &:disabled { color: $disable_fg_color; @@ -164,7 +164,7 @@ menu, &:hover { box-shadow: none; color: $active_fg_color; - background-color: $active_bg_color; + background-color: gtk("@hover_bg_color"); } &:disabled { color: $disable_fg_color; @@ -208,7 +208,7 @@ menu, &:hover { box-shadow: none; color: $active_fg_color; - background-color: $active_bg_color; + background-color: gtk("@hover_bg_color"); } &.top { margin-top: -6px; @@ -247,11 +247,11 @@ combobox { background-color: $combobox_dropdown_menuitem_normal_bg_color; &:focus { color: $active_fg_color; - background-color: $active_bg_color; + background-color: gtk("@hover_bg_color"); } &:hover { color: $active_fg_color; - background-color: $active_bg_color; + background-color: gtk("@hover_bg_color"); } } } @@ -418,32 +418,32 @@ radio { background: $crb_bg_color; border-color: $crb_bd_color; &:focus{ - border-color: $crb_hover_bd_color; + border-color: gtk("@crb_hover_bd_color"); background: $crb_hover_bg_color; color: $crb_hover_fg_color; } &:hover{ - border-color: $crb_hover_bd_color; + border-color: gtk("@crb_hover_bd_color"); background: $crb_hover_bg_color; color: $crb_hover_fg_color; } &:checked{ - background: $crb_active_bg_color; - border-color: $crb_active_bd_color; + border-color: gtk("@crb_active_bd_color"); + background: gtk("@crb_active_bg_color"); color: $crb_active_fg_color; &:disabled { - background: $crb_disable_bg_color; border-color: $crb_disable_bd_color; + background: $crb_disable_bg_color; color: $crb_disable_fg_color; } } &:selected { - background: $crb_active_bg_color; - border-color: $crb_active_bd_color; + border-color: gtk("@crb_active_bd_color"); + background: gtk("@crb_active_bg_color"); color: $crb_active_fg_color; &:disabled { - background: $crb_disable_bg_color; border-color: $crb_disable_bd_color; + background: $crb_disable_bg_color; color: $crb_disable_fg_color; } } @@ -466,7 +466,7 @@ radio { // the borders of the light variant versions of checks and radios are too similar in luminosity to the selected background // color, hence we need special casing. row:selected & { - border-color: $selected_borders_color; + border-color: gtk("@selected_borders_color"); } .osd & { @include button(osd); @@ -544,16 +544,16 @@ treeview.view check { @extend %check; background: $bg_color; &:checked{ - background: $crb_active_bg_color; - border-color: $crb_active_bd_color; + background: gtk("@crb_active_bg_color"); + border-color: gtk("@crb_active_bd_color"); color: $crb_active_fg_color; &:disabled { - background: $crb_active_bg_color; - border-color: $crb_active_bd_color; + background: gtk("@crb_active_bg_color"); + border-color: gtk("@crb_active_bd_color"); color: $crb_active_fg_color; &:hover{ - background: $crb_active_bg_color; - border-color: $crb_active_bd_color; + background: gtk("@crb_active_bg_color"); + border-color: gtk("@crb_active_bd_color"); color: $crb_active_fg_color; } } @@ -563,7 +563,7 @@ treeview.view check { border-color: $crb_disable_bd_color; color: $crb_disable_fg_color; &:hover{ - border-color: $crb_hover_bd_color; + border-color: gtk("@crb_hover_bd_color"); background: $crb_hover_bg_color; color: $crb_hover_fg_color; } @@ -619,7 +619,7 @@ spinbutton { } /* trough - filled part (highlight or progress) */ #{$filled_widget} { - background-color: $trough_filled_space_normal_color; + background-color: gtk("@trough_filled_space_normal_color"); border-color: $trough_border_normal_color; &:disabled { background-color: $disable_bg_color; @@ -736,7 +736,7 @@ treeview.view { &:backdrop, & { border-left-color: mix($selected_fg_color, $selected_bg_color, 50%); border-top-color: transparentize($fg_color, 0.9); - background-color: $active_bg_color; + background-color: gtk("@hover_bg_color"); border: 1px solid #CFCFCF; } } @@ -774,7 +774,7 @@ treeview.view { &:drop(active) { border-style: solid none; border-width: 1px; - border-color: $selected_borders_color; + border-color: gtk("@selected_borders_color"); &.after { border-top-style: none; } @@ -812,20 +812,20 @@ treeview.view { &.progressbar { // progress bar in treeviews color: $bg_color; - border: 1px solid $selected_borders_color; + border: 1px solid gtk("@selected_borders_color"); //border-radius: 4px; - background-color: $selected_bg_color; + background-color: gtk("@selected_bg_color"); background: linear-gradient(to bottom, $selected_bg_color, darken($selected_bg_color, 10%)); //box-shadow: inset 0 1px transparentize(white, 0.7), 0 1px transparentize(black, 0.8); &:selected { &:focus, & { border-radius: 0px; - color: $selected_bg_color; + color: gtk("@selected_bg_color"); box-shadow: none; background: linear-gradient(to bottom, $bg_color, darken($bg_color, 10%)); &:backdrop { - color: $selected_bg_color; - border-color: $selected_borders_color; + color: gtk("@selected_bg_color"); + border-color: gtk("@selected_borders_color"); background-color: $treeview_view_selected_bg_color; } } @@ -847,7 +847,7 @@ treeview.view { background-color: transparentize($selected_fg_color, 0.7); border-width: 1px 0; border-style: solid; - border-color: $selected_bg_color; + border-color: gtk("@selected_bg_color"); } } } @@ -883,7 +883,7 @@ treeview.view { padding: 0 6px; color: $bg_color; background: none; - background-color: $selected_bg_color; + background-color: gtk("@selected_bg_color"); border-style: none; border-radius: 0; //box-shadow: inset 0 0 0 1px $bg_color; @@ -893,7 +893,7 @@ treeview.view { } acceleditor > label { - background-color: $selected_bg_color; + background-color: gtk("@selected_bg_color"); } } @@ -1014,7 +1014,7 @@ toolbar { border-radius: 4px; color: $button_fg_color; &:hover { - background-color: $toolbar_button_bg_active_color; + background-color: gtk("@toolbar_button_bg_active_color"); } } // toolbar separators @@ -1106,7 +1106,7 @@ separator { &:backdrop { &:backdrop:hover, &:backdrop:hover:selected, & { - color: $selected_bg_color; + color: gtk("@selected_bg_color"); } } @@ -1164,7 +1164,7 @@ button.emoji-section { border-color: $bg_color; } &:checked { - border-color: $selected_bg_color; + border-color: gtk("@selected_bg_color"); } label { padding: 0; @@ -1182,6 +1182,6 @@ button.emoji-section { padding: 6px; border-radius: 6px; :hover { - background: $selected_bg_color; + background: gtk("@selected_bg_color"); } } -- Gitee