![\"ugly](\"http:\/\/www.notmart.org\/misc\/article_images\/badplasmoidborders.png\")
<\/p>\nSince yesterday The border of plasma dialogs like the clock popups have got rounded borders also when the composite is disabled, just like tooltips before,ok not a big deal.
\nBut what is changed is that before tooltips shape was an hardcoded rounded rectangle with a fixed shape and an also hardcoded white border and that kinda sucked…<\/p>\n
A second problem connected to that was when compositing was active the windows only faked a non rectangular shape, but they still were stupid rectangles, so for instance you couldn’t click on a totally transparent area to make the popup go away.<\/p>\n
Now the window shape is computed from the alpha channel of the background svg, it means now the windows have a shape similar to the one you would expect seeing the fancy transparent svg.<\/p>\n
And it causes another problem if not well-managed, because if you use a fancy svg with cool antialiased borders, without composite you will get something awful like that (here zoomed 2x):<\/p>\n
\n<\/p>\n
See that two black pixels on each edge? and if the radius is bigger the problem gets worse.
\nThis because the semi-transparent pixels will become fully opaque. Fortunately the way Plasma::Theme works comes to rescue, because when compositing is not active it will load a different set of svgs when available (they are all the files in the “opaque” folder in the theme path), so for instance with tooltips when compositing is disabled it will load the following svg (here with an huge zoom):<\/p>\n
\n![\"good](\"http:\/\/www.notmart.org\/misc\/article_images\/goodplasmoidborders.jpg\")
<\/p>\n
Here you can see that the outer borders are made of big blocks that will be rendered with a size of exactly one pixel and will make the illusion of a perfectly round line, while the inner border is still round and antialiased. What? very 90’s or eve 80’s you say? Eh, true, this is where the desktop without compositing comes from \ud83d\ude00<\/p>\n","protected":false},"excerpt":{"rendered":" Since yesterday The border of plasma dialogs like the clock popups have got rounded borders also when the composite is disabled, just like tooltips before,ok not a big deal. But what is changed is that before tooltips shape was an hardcoded rounded rectangle with a fixed shape and an also hardcoded white border and that […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[99,102,2,10],"class_list":["post-348","post","type-post","status-publish","format-standard","hentry","category-graphics","tag-graphics-2","tag-howto","tag-kde","tag-kde4"],"_links":{"self":[{"href":"https:\/\/notmart.org\/blog\/wp-json\/wp\/v2\/posts\/348","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notmart.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notmart.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notmart.org\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/notmart.org\/blog\/wp-json\/wp\/v2\/comments?post=348"}],"version-history":[{"count":0,"href":"https:\/\/notmart.org\/blog\/wp-json\/wp\/v2\/posts\/348\/revisions"}],"wp:attachment":[{"href":"https:\/\/notmart.org\/blog\/wp-json\/wp\/v2\/media?parent=348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notmart.org\/blog\/wp-json\/wp\/v2\/categories?post=348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notmart.org\/blog\/wp-json\/wp\/v2\/tags?post=348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nSo if you will make a sexy plasma theme don’t forget to provide an “opaque” version of the relevant svgs, that at the moment are widgets\/tooltip.svg and dialogs\/widget.svg (probably in the future there will be also krunner.svg).
\nthese svgs must not have semi-transparent areas and they must have a pixelated border, There are some nice tutorials around on how to make a convincing pixel-based path, like this one<\/a>.<\/p>\n