jpfleury / clearlooks-phenix Goto Github PK

Currently, scrollbars are drawn as on this picture:


When fixing the code up to GTK+ 3.14 changes, I notices that in this situation the bottom border of a stepped is being hidden, so I disabled that code (it now looks less ugly anyway).
However, I think that this should look like this, but I can't come up with a CSS code that'd do this:


As you can see, here, the top border of a thumb is hidden by a bottom border of a stepper. I've got no idea how to implement this, unfortunately, but this issue is worth documenting here anyway.

P.S. For the comparison, here's a scrollbar from GTK+ 2 version:

Hello,

first of all I would like to thank you for creating this excellent port of Clearlooks to GTK+ 3. It works awesomely already, but I would like to request that support for Unity be added, in order to have a complete experience. Fortunately this process is well documented; see https://wiki.ubuntu.com/Unity/Theming. Other themes, such as Numix, already support Unity.

Thanks in advance, and congratulations on the work!

gtk 3.22
Clearlooks-Phénix v7
Debian-Buster

http://python-gtk-3-tutorial.readthedocs.io/en/latest/spinner.html

First I would like to say Thank You for this theme, it has been wonderful.
I am using version 6 on CentOS7/Gnome 3.14. It seems the border for apps like Nautilus, gEdit, etc. is missing (no border). All other apps are working great. Is there a workaround or fix for this? Thank you in advance.

With Clearlooks-Phenix 7.0.1 and GTK 3.22.4, the following errors appear when running any GTK3 program:

(evince:1520): Gtk-WARNING **: Theme parsing error: gtk-widgets.css:1594:13: not a number
(evince:1520): Gtk-WARNING **: Theme parsing error: gtk-widgets.css:1594:13: Expected a string.
(evince:1520): Gtk-WARNING **: Theme parsing error: gtk-widgets.css:1976:11: not a number
(evince:1520): Gtk-WARNING **: Theme parsing error: gtk-widgets.css:1976:11: Expected a string.
(evince:1520): Gtk-WARNING **: Theme parsing error: gtk-widgets.css:2526:11: not a number
(evince:1520): Gtk-WARNING **: Theme parsing error: gtk-widgets.css:2526:11: Expected a string.
(evince:1520): Gtk-WARNING **: Theme parsing error: applications.css:21:0: Expected a valid selector

Corresponding source code locations:

The first three errors are all on the font: property. The last one is clearly an unmatched figure brace.

It seems that Previous/Next buttons don't have the exact same height as other buttons.

Nautilus:

Zoom:

gedit:

Zoom (no white bottom border for Previous/Next buttons):

Evince:

Zoom (no white bottom border for Previous/Next buttons):

Every now and then I get this message:

Gtk-WARNING **: Theme parsing error: gtk-widgets.css:1214:18: Not using units is deprecated. Assuming 'px'.

The problem seems to be the border-width set to 1 instead of 1px, here:

combobox > .linked > button.combo:disabled:last-child {
        border-image-width: 3px 3px 4px 0;
        border-radius: 0 3px 3px 0;
        border-width: 0 1;
}

Should be trivial to fix.

I'm seeing lots of theme parsing errors about deprecated properties when using the theme on Xubuntu 16.10 (yakkety), which uses the Xfce desktop and GTK 3.20.9:

Not using units is deprecated. Assuming 'px'.
The style property GtkButton:default-border is deprecated and shouldn't be used anymore. It will be removed in a future version
The style property GtkButton:default-outside-border is deprecated and shouldn't be used anymore. It will be removed in a future version
The style property GtkButton:image-spacing is deprecated and shouldn't be used anymore. It will be removed in a future version
The style property GtkButton:inner-border is deprecated and shouldn't be used anymore. It will be removed in a future version
The style property GtkRange:slider-width is deprecated and shouldn't be used anymore. It will be removed in a future version
The style property GtkRange:stepper-size is deprecated and shouldn't be used anymore. It will be removed in a future version
The style property GtkRange:stepper-spacing is deprecated and shouldn't be used anymore. It will be removed in a future version
The style property GtkRange:trough-under-steppers is deprecated and shouldn't be used anymore. It will be removed in a future version
The style property GtkScrollbar:min-slider-length is deprecated and shouldn't be used anymore. It will be removed in a future version
The style property GtkWidget:focus-line-width is deprecated and shouldn't be used anymore. It will be removed in a future version
The style property GtkWidget:focus-padding is deprecated and shouldn't be used anymore. It will be removed in a future version
The style property GtkWidget:interior-focus is deprecated and shouldn't be used anymore. It will be removed in a future version

On Gtk+ 3.22.30 and using the https://code.launchpad.net/~gnome-terminator/terminator/gtk3 port of Terminator, the splitters of horizontally and vertically split terminals are big, even when setting splitter size to 0 or 1, which is tiny on other themes.
It's also visible in Xfce's panel items like System Load or Network Monitor, the bars are huge.

Christoph Anton Mitterer writes:

Hey.

Thanks for your work... must issues seem in fact to be gone.

Maybe two remain (but I'm not sure whether they're really issues), so here are some screenshots (all form Cinnamon from sid):

1. cut-off-buttons
   In the Clearlooks version you see, that the inner buttons from the shutdown dialogue are cut off right and left.
   This may however also be simply an issue due to how they're placed, cause when you look at the adwaita version, while it looks "good" there, one can still estimate, that something is just overpainted, because even the adwaita buttons are rounded (the outer two buttons). So not sure about his.
   
   

2. white vs. gray background
   Sometimes, the background of dialogues seem to be completely white, while sometimes, they're grey with a small white frame around that (e.g. as in picture 3])
   
   
   

Cheers,
Chris.

Thank you for maintaining this wonderful theme. I have re-themed it for both Devuan Jessie and Ascii. Jessie was fine but I'm having two issues with the one for Ascii.

1. The icons on the synaptic toolbar 'jiggle' on hover and 'vibrate' when the cursor is placed between "Mark All Upgrades" and "Apply" AND between "Properties" and "Search". That can't be good if a user has epilepsy and if not, quite annoying.

2. The Ascii theme is darkish and in GTK3 apps like synaptic when hovering on a selection the font remains dark on hover against a darkish background but changes to white when selected/pressed. I'm missing where to make the font white on hover so would appreciate a nudge in the right direction.

If you're interested you can find the theme here: https://git.devuan.org/fsmithred/clearlooks-phenix-darkpurpy-theme/tree/suites/ascii That's not me but the person who is packaging it. I play with the crayons. :)

Thanks for your time.
nauved

When the window isn't focused, there's a black border around the arrow:

When there's a focus on the item which has an arrow, it becomes white without any borders at all, so it's hardly visible at all on a grey background:

Hello!

I started gtk3-demo (GTK 3.14.15 version and Clearlooks-Phenix 6.0.3), opened the combo boxes widget and I got this screenshot:
Combo boxes.pdf

The sub menu at right is shown with selected bg color rather than the base bg like the menu at left.

GTK 3.20 again broke backwards compatibility for themes. This time they're promising stable naming so I suppose that this might be the last time they break themes. Who knows.

I'm not really up to speed, and I couldn't find a comprehensive list of what changed.
This link promises documented node names, but I can't find them:
https://blogs.gnome.org/mclasen/2015/11/20/a-gtk-update/

Unless it's the list of defines at the bottom here:
https://developer.gnome.org/gtk3/stable/GtkStyleContext.html
I'm not familiar with GTK theming or GTK at all, so I don't know if that is the relevant information.

P.S.
Everyone contributing to this theme: thank you. It's the one things that makes GTK 3 bearable.

On Slackware64 Current Multilib with GTK 2.2.24 and 3.18.9, XFCE 4.12 and the Clearlooks-Phenix v6 theme I compared Caja, Atril, Engrampa and Pluma from willysr's 1.14 GTK2 and GTK3 builds at http://slackware.uk/msb/testing/.
I found that for GTK3 the Caja line mode "zebra" background effect that I see with GTK2 is gone, and that the vertical line spacing is wider than with GTK2: a full height window lists 35 vs 38 lines.
I see the same wider line spacing with Mate's TraditionOK theme, but not with the Gnome's builtin (?) Adwaita theme.

Hello!

I use Clearlooks-Phénix 6 with Lubuntu 14.04 64 bits and GTK 3.14.2 (installed from gnome team PPA).
Several icons shown by LXPanel are black. Is it due to a Clearlooks-Phénix bug?

Thank you in advance for your answer and have a nice day! :)

When using this theme the menu of the chromium browser is broken as can be seen in the attached screenshot. What happens is that the item hovered by the mouse pointer becomes invisible (white text, white background, white borders). This does not happen with other themes. Chromium is set to use its native "Classic" theme, not the GTK theme, but still it is clearlooks-phenix that triggers the issue.

This happens on a up-to-date Debian "sid" system, with:

clearlooks-phenix-theme 7.0.1
libgtk-3 3.22.1
chromium 53.0.2785.143

The theme is great, I hope this can be fixed.
Thank you!

Paride

Environment: openbox, compton, GTK 3.12, clearlooks-phenix 5.0.6
Problem (first dialog here):

Workaround:
To get the result shown in the middle dialog above, here's what my settings looked like:

.window-frame {
    border-width: 0px;
    border-radius: 7px 7px 0 0;
    border-style: solid;
    margin: 0px;
}

To get the 3rd dialog (rounded corners don't match anything else on my themes):

.window-frame {
    border-width: 0px;
    border-radius: 0;
    border-style: solid;
    margin: 0px;
}

The tooltip background where it shows information about variables, methods, classes, etc; are black background with black text and completely unreadable while using this theme. This happens under Eclipse Mars.

Hello:
I recently had to upgrade GTK3 to 3.22.26 on a CentOS system, and it seems that Gnome must have changed a bunch of things as various elements are now broken (title bar appears transparent in some apps, title bar also turns black when in focus, and desktop background turns white and cannot be changed... etc.). I did see here that there's a fork of this at https://github.com/iloveeclipse/clearlooks-phenix/tree/eclipse-patches and I tried that one but having the same issues. Is there a release of this theme that is fully compatible for 3.22? I thought I'd try to start with that and see if there is a working solution.
I've been using this theme for several years, and in my opinion it's the best and cleanest one for Gnome3.

As shown in the following screenshot of Caja:
https://img.vim-cn.com/74/aa7c885157750837e9955e7f7373a3002c6bee.png

The statusbar has two visible borders.

I'm running Debian 9 with libgtk-3-0 3.22.11-1 and the theme from andrewshadura/clearlooks-phenix.

I dont know if you want to fix this or not but. Currently rubberband selection is solid color.

--- "a/clearlooks-phenix-master/gtk-3.0/gtk-widgets.css" 2016-10-07 08:21:37.000000000 -0500
+++ b/clearlooks-phenix-master/gtk-3.0/gtk-widgets.css 2016-11-01 21:08:19.964107155 -0500
@@ -154,9 +154,8 @@
-GtkButton-inner-border: 0;
}

-.rubberband,
-view rubberband,
-rubberband {
+.view.rubberband,

• .rubberband {
  background-color: alpha (@theme_selected_bg_color, 0.35);
  border-color: @theme_selected_bg_color;
  border-style: solid;

When I click the speaker icon in LXPanel, it seems the background color overflows the "Volume" frame.
I can see this with a CRT monitor.

Is it due to a Clearlooks-Phénix bug?
Thank you in advance and have a nice day!

Clearlooks-Phenix 6.0.3 and GTK 3.14.15

In gtk.css

/*****************

• error/warning/success *
  *****************/

@define-color error_color #cc0000;

@define-color warning_bg_color #faad3d;

@define-color success_color #4e9a06;

In gtk-widgets.css

/****************

• Level *
  ****************/

/* level bars as used for password quality or remaining power */

GtkLevelBar {
-GtkLevelBar-min-block-width: 34;
-GtkLevelBar-min-block-height: 3;
}

GtkLevelBar.vertical {
-GtkLevelBar-min-block-width: 3;
-GtkLevelBar-min-block-height: 34;
}

.level-bar.trough {
padding: 2px;
}

.level-bar.fill-block {
border-width: 1px;
border-style: solid;
border-color: @scale_trough_highlight_border_color;
background-color: @scale_trough_highlight_bg_color;
}

.level-bar.indicator-continuous.fill-block {
padding: 2px;
border-radius: 2px;
}

.level-bar.fill-block:backdrop,
.level-bar.fill-block.level-high:backdrop,
.level-bar.fill-block.level-low:backdrop {
background-color: @insensitive_bg_color;
border-color: @insensitive_border_color;
background-image: none;
}

.level-bar.indicator-discrete.fill-block.horizontal {
margin: 0 1px;
}

.level-bar.indicator-discrete.fill-block.vertical {
margin: 1px 0;
}

.level-bar.fill-block.level-high {
border-color: shade(@success_color, 0.85);
background-image: linear-gradient(to bottom,
shade(@success_color, 1.2),
@success_color 75%,
shade(@success_color, 0.95)
);
}

.level-bar.fill-block.level-low {
border-color: shade(@warning_bg_color, 0.80);
background-image: linear-gradient(to bottom,
shade(@warning_bg_color, 1.3),
@warning_bg_color 75%,
shade(@warning_bg_color, 0.90)
);
}

.level-bar.fill-block.empty-fill-block {
background-color: transparent;
background-image: none;
border-color: alpha(@theme_bg_color, 0.1);
}

.level-bar.fill-block.empty-fill-block:backdrop {
border-color: transparent;
background-color: transparent;

See 3dc219b#commitcomment-7955428

Especially visible when a button is on focus (e.g. with pressing tab), due to the outline:

GTK 3.22:
GTK 3.14:

I have reported https://gitlab.gnome.org/GNOME/gtk/issues/206 for the behaviour change, but I think the problem is in the theme itself.

Namely, border.svg defines a 16x16 pixels image. Then it defines a 15x14 pixels rectangle with path width 1 pixel. So the bottom line of the image is an empty line. GTK 3.22 apparently takes this empty line to heart and moves the bottom border up.

Either setting an image size of 16x15 or a border of 15x15 fixes the problem.

I'll be changing the svgs for the iloveeclipse fork (https://github.com/iloveeclipse/clearlooks-phenix/tree/eclipse-patches). However I'm not sure whether the svg should stay at 16x16 size and the border should be 15x15, or if the size should be 16x15 with 15x14 border.

When clearlooks-phenix is in use, cairo applications produce the following error message:

cairo.Error: invalid value (typically too big) for the size of the input (surface, pattern, etc.)

For example, I see this message dozens or hundreds of times when using meld to compare git repository subdirectories. This does not occur with other gtk 3.0 themes.

I'm using clearlooks-phenix 6.0.3 on Xubuntu 15.04 with the Mist icon theme.

Some time ago, I started having problems with evince (aka the Document Viewer) showing black background (see the screenshot). Besides not liking black backgrounds (one of the main reasons for using Phenix Clearlooks), it's actually hard working without sliders and stuff... I think this has happened after some recent Ubuntu update (I don't have control over these on my machine), but can't be sure. I'm running Ubuntu 12.04 with GTK 3.4.2. Is there anything I can do? Is it a bug?

if i fullscreen a window (say, firefox) and move my mouse all the way to the right of the screen, and try to click on the vertical scroll slider, the scroll warps down instead of grabbing the scrollbar slider. (if i move the mouse slightly away from the right side of the screen, the slider highlights and becomes clickable and i can grab it and drag it to scroll as usual)

this is because the slider scrollbar-slider trough has an unclickable border, with 1px on the right, so the scrollbar gets clicked instead of the slider

also, my window manager doesnt have window borders in fullscreen mode. not sure if other people do, so perhaps most people already suffer having to be more precise than all-the-way-to-the-right. i was suffering because i move the mouse all the way to the right to grab the scrollbar all the time, and moving it one pixel to the left is much more difficult.

i say this is a bug in clearlooks-phenix because this works in other gtk3 themes (Adwaita), as well as Clearlooks and Clearlooks-Phenix on gtk2.
(maybe its a bug in gtk3 that the borders arent clickable on the scrollbar-slider's trough)

workaround in ~/.config/gtk-3.0:

/* fixes bug in Clearlooks-Phenix,
 * where clicking rightmost 1px edge of slider
 * does a warp-scrolls instead of grabbing slider
 */
.scrollbar.vertical trough,
scrollbar.vertical trough {
  border-width: 1px 0px 2px 1px;
}

Hello!

In pavucontrol (Pulse audio volume controller), pressed buttons haven't got any border.

Is it due to a Clearlooks-Phénix bug?
Thank you in advance and have a nice day!

Christoph Anton Mitterer writes:

3. dark grey background
   Attached image is from Evolution (the black areas contained potentially private information ;-) ).

When you look at the dark grey region (which contains the red circle)... I'm not sure, but that didn't use to be that dark,... actually I think it used to be the standard light grey.

This doesn't necessarily mean it's wrong now,... it just somehow different and I've noticed it ;-)

I've just tested it with 6.0.3, it looks even worse:

Hi!

Any plan on supporting GTK 3.16 (came with Fedora22)? Thanks!

Hello!

I tried to create the Clearlooks-Phénix dark version based on Darklooks GTK+ 2 theme. I think it will be a nice idea because the more time spends, the more clear version hurts my eyes due to hours spent front of the monitor screen.
So I changed the Clearlooks-Phénix color scheme by the Darklooks one, the core_color_b by the Darklooks' bg_color (because they're the same) then calculated the core_color_a basing on the Darklooks' selected_bg_color and these two colors value in Clearlooks-Phénix.
Unfortunately, the result isn't very well. In comparaison with Darklooks, some colors don't match and the are visual bugs.

gtk_color_scheme = "fg_color:#E6E6E6\nbg_color:#555753\nbase_color:#2E3436\ntext_color:#D3D7CF\nselected_bg_color:#3F403D\nselected_fg_color:#7AA3CC\ntooltip_bg_color:#EDDE5C\ntooltip_fg_color:#000000"

core_color_a=#5d574c
core_color_b=#555753

How to proceed as quickier and easier as possible?
Thank you in advance and have a nice day!

From my local gtk.css:

.scrollbar {
  -GtkScrollbar-has-backward-stepper: true;
  -GtkScrollbar-has-forward-stepper: true;
/*  -GtkRange-stepper-size: 18px;
  -GtkRange-slider-width: 18px;*/
}

The 18px is commented out and it looks nice here, I think I found the snippet somewhere including these lines for controling the size. You may have a look if this should be changed.

Putting a fix into /etc/environment to kill the overlay scrollbars worked but there was an objection to allowing the theme to put it there. So we are directing our solution to /etc/X11/Xsession.d/52gtk3-nooverlayscrollbar-nocsd instead. Here's the magic:

# This file is sourced by Xsession(5), not executed.

# This file configures the global behavior of GTK3 "hidden" overlay 
# scrollbars and client side decorations. These settings may be overridden
# by individual users by setting the same variables to different values in
# in their ~/.xsessionrc.

BASESTARTUP=${STARTUP%% *}
BASESTARTUP=${BASESTARTUP##*/}
if [ "$BASESTARTUP" = x-session-manager ]; then
    BASESTARTUP=$(basename $(readlink /etc/alternatives/x-session-manager))
fi
case "$BASESTARTUP" in
  gnome-session*)
      # This is GNOME, make sure settings are left at their defaults.
      unset GTK_CSD
      unset GTK_OVERLAY_SCROLLING
      unset LIBOVERLAY_SCROLLBAR
      ;;
  *)
      # Not GNOME, and the user didn't specify settings themselves, 
      # so set them to 0.
      if [ -z "$GTK_OVERLAY_SCROLLING" ] ; then
          GTK_OVERLAY_SCROLLING=0
      fi
      export GTK_OVERLAY_SCROLLING
      if [ -z "$LIBOVERLAY_SCROLLBAR" ] ; then
          LIBOVERLAY_SCROLLBAR=0
      fi
      export LIBOVERLAY_SCROLLBAR
      if [ -z "$GTK_CSD" ] ; then
          GTK_CSD=0
      fi
      export GTK_CSD
      ;;
esac

And here's the antidote to reverse it:

# To disable the Clearlooks-Phénix-Purpy GTK3 hack
# place the following lines in ~/.xsessionrc:

GTK_OVERLAY_SCROLLING=1
export GTK_OVERLAY_SCROLLING
LIBOVERLAY_SCROLLBAR=1
export LIBOVERLAY_SCROLLBAR
GTK_CSD=1
export GTK_CSD

Hello!

There is a white band in the printing dialog box at preview, cancel, print buttons level I can see with a CRT monitor.

Is it due to Clearlooks-Phénix bug?
Thank you in advance and have a nice day!

The commit b8b3811 causes some problems with vertical alignment for buttons containing a label (GtkLabel) and an image (GtkImage). The label is not aligned with the image:

This problem may not always occur, depending on the font and the font size of the desktop environment.

Here is an inspection of a GtkContainer with a GtkScale:

This is more pronounced in Eclipse SWT, where anything outside of the container is not painted:

The following seems to fix the problem:

diff --git a/src/clearlooks-phenix-theme-7.0.1/gtk-3.0/gtk-widgets.css b/src/clearlooks-phenix-theme-7.0.1/gtk-3.0/gtk-widgets.css
index 09c9159..89d9e58 100644
--- a/src/clearlooks-phenix-theme-7.0.1/gtk-3.0/gtk-widgets.css
+++ b/src/clearlooks-phenix-theme-7.0.1/gtk-3.0/gtk-widgets.css
@@ -384,14 +384,10 @@ row:selected:focus progressbar trough {
  * GtkScale *
  ************/
 
-scale.vertical {
-    min-width: 10px;
-    padding: 3px 5px;
-}
-
-scale.horizontal {
-    min-height: 10px;
-    padding: 5px 2px;
+scale {
+  min-height: 13px;
+  min-width: 21px;
+  padding: 12px;
 }
 
 scale.horizontal slider,

Hello,

After uncommenting the Nautilus part of applications.css I get the following error:

Gtk-WARNING **: Theme parsing error: applications.css:8:15: Not using units is deprecated. Assuming 'px'.
Gtk-WARNING **: Theme parsing error: applications.css:8:17: Not using units is deprecated. Assuming 'px'.

It seems that px are missing, i.e. it should be:

 .nautilus-desktop.nautilus-canvas-item {
    color: @theme_base_color;
    text-shadow: 1px 1px alpha (@theme_fg_color, 0.8);
}

BTW, is there any reason that icon fonts are by default black? For dark backgrounds it looks horribile, i.e. it is hard to read the icon text.

Best regards,
Jan