The GTK Stylesheet for elementary OS
Home Page: https://elementary.io
License: GNU General Public License v3.0
The GTK Stylesheet for elementary OS
You'll need the following dependencies:
Run meson to configure the build environment. To install, use ninja install.
meson build --prefix=/usr
cd build
ninja install
Run ninja clean before building the stylesheets a second time. Otherwise the already built stylesheets will not be overriden.
ninja clean
ninja install
This is because of how the linked entries drop borders. We could look at faking it with an inset box shadow or something if possible.
There is a $50 open bounty on this issue. Add to the bounty at Bountysource.
These are most prominently used in mail, but they're generic style classes
Looks like we messed up with moving to the granite-widgets stylesheets. Need to fix it so the right assets are used
Wasn't like this on Loki, see attached screenshot.
The release tarballs provided at https://launchpad.net/egtk/+download are all unversioned, which makes it hard to keep track which version is which. In the future, please append the version to the package name (just as with any other release tarball).
when clicking on the close button, the button becomes black
The $50 bounty on this issue has been claimed at Bountysource.
from the README:
The aim of style classes should be to be generic across applications. If an application needs a unique style, it should be bundled with that application.
This creates all kinds of issues when elementary apps are used with GTK themes other than this one (for example on distributions where the elementary theme is unavaible / broken due to the incompatibility with GTK3 > 3.18).
Headers and toolboxs in some apps began to look so bad with last stylesheet updates.
Not fun to read. Error messages don't need to be the funnest thing, but they need to be readable.
Edit: wait, is it supposed to look like this? (from the HIG)
Was this implemented or is it just a mockup?
It's definitely better, contrast-wise, although I still think white text on the red would probably be best.
This is especially apparent in the dark stylesheet
The $50 bounty on this issue has been claimed at Bountysource.
Have the developers thought of making the titlebar of the application square (border-radius: 0) when maximized? It would make use of the empty space left by the round-ish border. If this has already been thought, why it wasn't implemented? Is it a good design choice?
Gtk+ 3.22 changed some selectors and we get now warnings for them:
icon-shadow: is now -gtk-icon-shadow:
prelight is now hover
-gtk-image-effect is now -gtk-icon-effect
insensitive is now disabled
it is now mandatory to define a font in css.
.action-bar .title {
font: Bold 11;
}
for example. A solution is to define:
.action-bar .title {
font-weight: bold;
font-size: 11pt;
}
A small script installing the icon theme for the current user (to $HOME/.local/share/icons/ or system-wide (to /usr/share/icons/) would be appreciated, so no manual copying of the files and folders has to be done.
For example, the Paper GTK theme by @snwh seems to have a simple shell script (https://github.com/snwh/paper-gtk-theme/blob/master/install-gtk-theme.sh) that does the job, although a simple CMake solution might be preferrable for elementary.
Colors should only be defined in gtk.css and gtk-dark.css. Having them in say gtk-widgets.css is a major PITA for the dark stylesheet and causes duplicate code.
There is a $50 open bounty on this issue. Add to the bounty at Bountysource.
I'm using the latest version of elementary theme from git and I've noticed that when i maximize a gtk3 window, it's headerbar gets a bit smaller (reducing inner padding). Is it possible to make non-gtk3 headerbars/titlebars do the same?
The color of sidebar font provides poor contrast and is often frustrating to read on non-HiDPI screens.
Elementary OS:
Elementary OS vs. macOS (under default setting for both):
In a GTK+ 3.22 environment the window dimensions appear to include the shadow of the window. Thus a window can be brought to the foreground by clicking its shadow and the resize controls remain far beyond the edge of the window.
Note how the resize cursor is active for Slack far past the edge of the window:
It seems to be worse for Qt and fake native apps (electron) like Slack.
There is a bounty on this issue on Bountysource
The $15 bounty on this issue has been claimed at Bountysource.
Currently we get a Border around GtkPaned windows (8px right and bottom)
Relevant screenshot:
This can be fixed if we remove that margin in gtk-widgets.css. But i have no idea what was the reason in the first place we defined it like that
Did you help close this issue? Go claim the $15 bounty on Bountysource.
Haguichi uses dark variant by default. When disconnected, the "Add", "Refresh" and "Search" buttons in the headerbar are disabled/grayed-out/insensitive. In elementary's dark theme variant insensitive buttons are colored white, which makes them seem active instead (more so than the actual sensitive buttons). The normal (light) theme variant does not have this problem.
Some HeaderBar Buttons show a background - i think this are granite widgets but i am not sure.
Relevant Screenshot:
The $15 bounty on this issue has been claimed at Bountysource.
After log off and loging in again, wallpaper get a glitch style as some video problem.
Clicking the buttons in ssd windows don't change their state, they are static and they feel unresponsive.
Noticed this while loading screenshots in AppCenter app pages.
There is a weird highlight on buttons that are on selected GtkListBoxRow, the structure looks like this:
GtkListBox
The $50 bounty on this issue has been claimed at Bountysource.
Hi!
I really enjoy using elementary OS, design is very much refreshing. I would like make some modifications, but don't know where should I look. The space between items in "tray" is very big without reason.
How can I change that? (what .css file and where should I change padding/margin?)
Thanks!
Probably some specificity BS that will be solved in 3.20, but just making a note that adding border-style: solid fixes it in the inspector. Just gotta figure out the magic selector that makes that stick
There is a $50 open bounty on this issue. Add to the bounty at Bountysource.
If i select text (in epiphany url bar for example) i cannot distinguish which part is selected
Relevant Screenshot (text is selected):
The $15 bounty on this issue has been claimed at Bountysource.
I'm not sure if this is possible, but it would look better if they behaved like the titlebar.
The $50 bounty on this issue has been claimed at Bountysource.
Tabs are not shown in Apps
Relevant Screenshot:
The $15 bounty on this issue has been claimed at Bountysource.
for Gtk.STYLE_CLASS_RAISED
An example of where developers might want this is in Felipe's Spice Up app in the inline-toolbar. It's basically just the opposite of ".flat"
Did you help close this issue? Go claim the $50 bounty on Bountysource.
At the moment we're hard coding background-color. Instead this should use @base_color and @bg_color for .card and .card.collapsed respectively.
This makes the .card classes usable in the dark stylesheet
In Files there is a special Selector for that tree view which is wrong styled in gtk+ 3.22
Relevant Screenshot:
The $15 bounty on this issue has been claimed at Bountysource.
The switch should show the active/not active state (i think with a blue background)
Relevant Screenshot:
The $15 bounty on this issue has been claimed at Bountysource.
Apparently Gtk.TextView can have a monospace property, which just adds .monospace. We should handle setting the font in the stylesheet so that property works as expected,
i.e.
.monospace {
font-family: monospace;
}
CJK characters have many vertical and horizontal strokes in one character. It might be as simple as only one veritcal or horizontal stroke like 一丨, or as complex as something like 轟麤龘.
Small font size are almost unable to read easily with the default settings. CJK people usually expect font size 12 as the general good-reading and comfortable one.
The font size 11 is bearable as the lower boundary of legibility for fluent reading.
The font size less than or equal to 10 is not recommended, and can only be accepted in few situations if there is still a need to have small size font displayed.
Sorry that I don't know much about programming, but I found you specify the size of the text body as 12 already. [1] The font size still looks small than other desktop environments, such as GNOME shell (on my Fedora platform) which uses size 11 as the default one. There might be some problems in there.
Please take this problem into consideration! This will help you do a better internationalization job and be more friendly in East Asia. :)
Hi there, in Gtk applications that use StackSwitcher with icons, the apearance is quite odd, as you can see in the attachment, it misses the borders and the selected icon has a ellipsis around it. Perhaps it should look like Granite ModeButton? I don't know if this as to do with a proper Gtk style class or something...
Using Gtk.StackSwitcher:
Granite.ModeButton:
Tested in Elementary OS Loki 0.4 with GTK 3.18
The scrollbar in webkit2 has artifacts after the window scrolls/refreshes/etc
The $20 bounty on this issue has been claimed at Bountysource.
Plank Menus should show Menu Checkboxes for "stay in dock". But this is a generell problem
Relevant Screenshot:
The $15 bounty on this issue has been claimed at Bountysource.
Haguichi uses dark variant by default. The next release will be using an actionbar for all action buttons in the bottom of the sidebar. The "Go Online" button uses the class "suggested-action". In the dark theme variant this style is missing for buttons inside an actionbar.
The class "destructive-action" on the other hand does seem to work for actionbar buttons in dark variant.
Have to confirm this, but filing it here before I forget. both Eddy (donadigo/eddy#8) and Vocal (VocalPodcastProject/vocal#157) have translucent About dialogs, and they both use the theme color. I suspect it's an issue in the stylesheet.
What it says on the tin. Focus styles for destructive action buttons are not terribly obvious at the moment
The $50 bounty on this issue has been claimed at Bountysource.
Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.
Hi I would like theme for openbox
The menu-bar (I stand to be corrected for the name of this UI element) doesn't match the dark theme and it becomes fairly out of place for apps that have a dark palette.
I'd love to fix it, however, I'm not too clued up on the layout naming of elementary's theming (and of GTK/metacity in general really). Some pointers would be great 👍
Apps like Music and Calculator can have rounded corners because they have predictable widgets at the bottom.
We should do this via a class that allows apps to indicate they can be rounded instead of targeting specific apps in the stylesheet
Flat headerbars should have no bottom border, no gradient, and use the app's default background color
You should be able to do something like so by adding the .flat class:
This is the current scrollbar. It isnt there at all and its nearly impossible to click it - 1px grab.
The problem lies in my opinion on trough css definitions - they are not used in Adwaita. And we can now define slider-width with
slider {
min-width: 2px;
}
GTK 3.20 has been released on 2016-03-21, and that release broke the elementary theme. The latest stable ubuntu (yakkety+) and fedora (24+) releases provide only GTK+ from the 3.20 series (or newer), and thus the elementary theme is not supported / working correctly on those leading linux distributions.
Providing support for the theming API of GTK 3.20 / 3.22 looks like a win to me, since GTK 3.22 will be maintained as the last stable GTK3 branch for about 3 years (https://blog.gtk.org/2016/09/01/versioning-and-long-term-stability-promise-in-gtk/).
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.