Another slider style
Hi Latte devs, maybe better use another style for slider...
If used transparent buttons slider not visible.
Example:
As i know, buttons draw on plasma layr on layer:
normal - it's normal
hover - it's normal+hover
focus - it' pressed+focus
pressed - it's pressed
Hover & Focus can't use non-transparent style and if use non-transparent style this not visible checkbox.
For example,
normal button 0% opacity, color #343434
hover button 30% opacity - this already not visible on LatteDock. I think hover layer is superimposed from below.
Example 2,
normal button 30% opacity
hover button 30% - all fine, but we have problem with slider on Latte
Solution, i can draw slider (with full support KDE Color Scheme) and this will be buil-in on latte:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="38" height="40" version="1.1">
<defs>
<linearGradient id="linearGradient856">
<stop style="stop-color:#000000" offset="0"/>
<stop style="stop-color:#000000;stop-opacity:0" offset="1"/>
</linearGradient>
<radialGradient id="radialGradient858" cx="45.508" cy="142.483" r="2.646" fx="45.508" fy="142.483" gradientTransform="matrix(3.7792896,2.1387021e-6,-4.1657266e-6,3.7792799,-143.98732,-528.48325)" gradientUnits="userSpaceOnUse" xlink:href="#linearGradient856"/>
<radialGradient id="radialGradient862" cx="45.508" cy="142.483" r="2.646" fx="45.508" fy="142.483" gradientTransform="matrix(3.7800064,4.672207e-4,-4.6707341e-4,3.7788149,-161.95588,-508.43939)" gradientUnits="userSpaceOnUse" xlink:href="#linearGradient856"/>
<style id="current-color-scheme" type="text/css">
.ColorScheme-Text { color:#31363b; stop-color:#31363b; } .ColorScheme-Background { color:#eff0f1; stop-color:#eff0f1; } .ColorScheme-Highlight { color:#3daee9; stop-color:#3daee9; } .ColorScheme-ViewText { color:#31363b; stop-color:#31363b; } .ColorScheme-ViewBackground { color:#fcfcfc; stop-color:#fcfcfc; } .ColorScheme-ViewHover { color:#93cee9; stop-color:#93cee9; } .ColorScheme-ViewFocus{ color:#3daee9; stop-color:#3daee9; } .ColorScheme-ButtonText { color:#31363b; stop-color:#31363b; } .ColorScheme-ButtonBackground { color:#eff0f1; stop-color:#eff0f1; } .ColorScheme-ButtonHover { color:#93cee9; stop-color:#93cee9; } .ColorScheme-ButtonFocus{ color:#3daee9; stop-color:#3daee9; }
</style>
</defs>
<g id="latte-slider-enabled">
<rect style="opacity:0.001" width="38" height="20" x="0" y="0"/>
<path fill="currentColor" class="ColorScheme-Highlight" d="m 9.99028,1.00001 c -4.96675,0.005 -8.99023,4.03325 -8.99023,9 0,4.97056 4.02944,9 9,9 h 18 c 0,0 0,-17.99987 0,-18 h -0.01 -17.99 z"/>
<path style="fill:url(#radialGradient858)" d="M 27.980469 0 A 10 10 0 0 0 18 10 A 10 10 0 0 0 28 20 A 10 10 0 0 0 38 10 A 10 10 0 0 0 28 0 A 10 10 0 0 0 27.980469 0 z M 27.990234 1 A 9 9 0 0 1 28 1 A 9 9 0 0 1 37 10 A 9 9 0 0 1 28 19 A 9 9 0 0 1 19 10 A 9 9 0 0 1 27.990234 1 z"/>
<circle fill="currentColor" class="ColorScheme-ButtonBackground" cx="28" cy="10" r="9"/>
</g>
<g id="latte-slider-disabled">
<rect style="opacity:0.001" width="38" height="20" x="0" y="20"/>
<path style="opacity:0.5;fill:currentColor" class="ColorScheme-Text" d="m 9.9999974,20.999944 c 0,0 0,17.999994 0.00983,17.999994 h 17.99343 c 4.968748,0 8.996714,-4.029428 8.996714,-8.999997 0,-4.970568 -4.027966,-8.999997 -8.996714,-8.999997 h -0.0098 -17.983662 -0.00983 z"/>
<path style="fill:url(#radialGradient862)" d="M 9.9804688 20 A 10 10 0 0 0 0 30 A 10 10 0 0 0 10 40 A 10 10 0 0 0 20 30 A 10 10 0 0 0 10 20 A 10 10 0 0 0 9.9804688 20 z M 9.9902344 21 A 9 9 0 0 1 10 21 A 9 9 0 0 1 19 30 A 9 9 0 0 1 10 39 A 9 9 0 0 1 1 30 A 9 9 0 0 1 9.9902344 21 z"/>
<circle fill="currentColor" class="ColorScheme-ButtonBackground" cx="10" cy="30" r="9"/>
</g>
</svg>
Edited by Alexey Varfolomeev