Not it’s possible in GTK2, but I think GTK3 it’s the future, we can use transparencies in GTK3 and In GTK without the alpha,
@madsrh, @luxamman, I recommend you transparencies up 0.96 +, ( rgba(0,0,0,0.97) ) After two months of using my own theme, I discovered that transparencies beneath 0.96 with certain backgrounds become a headache to read texts.
That’s very true, but we would need blur for that kind of style. I had to get rid of the blur in my mockups too…
I reworked my mockups (V22Nov17) - no blur, new button design (with the idea of instead of giving the button a color, just give the color to the border), window transparency (96% in window and 100% in fullscreen) reworked window buttons (not in every mockup) and tested some colors for the window content.
I still orient myself strongly to the basic design, without changes to the elements, also because I do not know exactly how much is possible. I think @madsrh idea about header-/titlebar less look is interesting but is that possible for now?
Thanks to all, looks like we are slowly encircling the design by excluding
Stefan
I’ll need to do some testing. Chrome is a little iffy with using background images for maximized windows and I don’t want to resort to hacky stuff. Using a native icon pack is easier, but I get your point, “It looks like Windows 10”
If I remember correctly, that’s the way Adwaita does it. What if “Sign In” remains in full colour but “Cancel” remains with the border color?
On the GDM mockup, since background-images aren’t possible on the lockscreen: what if instead we use a solid colour (purple - #5D2B50) and apply a dot pattern over it? Similar to the old Unity greeter.
One thing to keep in mind is that Unity8 was designed for the more “traditional” window layout: headerbars and client-side-decorations were not considered in the design afaik. As a result: the top bar of a window is the same color as the panel and dash because all three are “owned by the operating system”. They are not “part of the application”.
With Gnome3, headerbars and CSD, this isn’t true anymore: headerbars are “part of the application” so the style should match the application style more than the dash and dock style, like in the following two examples.
Files V22Nov17_LIGHT
V22Nov17_LIGHT_ROUND_SOLID
I think the first one is the best of the two because the headerbar is more clear, which will give users more confidence. (even with CSD, the headerbar still has distinct functionality; you can click and drag the application using the headerbar, but not using the rest of the application)
I’d also like to draw your attention about the UX of the max/min/close buttons. The issue with ambiance is that the click area is wayy to small, making it hard to hit it. You don’t notice this until you’ve used Adwaita or other OS’s for a while.
One of the ways to solve this is with a theme like Nautilus_V22Nov17_A - higher contrast
Here, you can make the entire area around the X clickable, not just a small circle. If the user clicks in the upper right corner of the window, the window will close, even if he doesn’t click right on the x. The size of the click area should be made clear when the mouse hovers over it, however.
This combination of colours used in Files V23Nov17_DARK for the sidebar, headerbar and other elements is my favorite so far. It just looks so clean. Modern too, even without the transparency. The shade of black I used for the headerbar (#181818) seems like way too much in comparison.
I managed to recreate the Ubuntu dots (pretty closely, I think): See here.
I’ll continue looking for the original since I can swear I once saw it for download on the Ubuntu brand assets page.
I see you should find the reference in the unity-greeter source package (for lightdm). However, I like the pure svg option, we can imagine transitions later on, or having a dynamic GDM screen with more and more dots as we get closer to the release date But that’s not for V1, let’s dream again about dynamic wallpapers
I remember seeing the dots on the branding site too. Perhaps the design-team can provide the original ones? @popey will know who to contact. Isn’t the pure CSS thing an option?
@godlyranchdressing I’m not sure I understand how the transparency thing works? Is it something that we can add and if it isn’t supported it will just show a solid white (like HTML) or will the theme simply be broken if it’s unsupported? ( Sorry for the tech newbie questions )
I’m not sure. I’ve tried using them in the past but it seems like complicated gradients like that aren’t available for the Shell. I actually thought gradients weren’t possible at all until Ambiance, which did it using:
So only simple gradients are possible, it seems. There’s also the benefit of the svg option being a simple file swap.
What transparency thing? Sorry for the confused person question.
EDIT: I forgot to mention this in regards to the login screen mockup. The “Unlock” button is the only one that’s available to easily style (it’s in the “.default” class, whereas the Cancel button is just a regular button). It’s minor but just letting you know as well as others.
I wasn’t sure how to illustrate this, so I made a video
These controls are a bit bigger and when hovered, you can see the clickable area. Maybe the min,max and close icons are a bit too far a part (the square is the same width as the titlebar height). And maybe the hover color shouldn’t be orange.