search

horst3180 / vertex-theme

Vertex is a theme for GTK 3, GTK 2, Gnome-Shell and Cinnamon
GNU General Public License v3.0
768 stars 78 forks source link

GtkWidgets missing: ProgressBar & Spinner #168

Open rsm-gh opened 8 years ago

rsm-gh commented 8 years ago

Hello,

I'm using libgtk 3.18 and I noticed that there are two widgets missing on the theme:

The GtkProgressBar is shown, but not the percent inside of it. I took a fast look in a working theme, and I believe that the code they use for the progress bar is:

/****************
 * Progress bar *
 ****************/

/* progress component */
.progressbar,
.progressbar row,
.progressbar row:hover,
.progressbar row:selected,
.progressbar row:selected:focused {
    background-image: -gtk-gradient (linear,
                                     left top, left bottom,
                                     from (@progressbar_background_a),
                                     to (@progressbar_background_b));

    border-radius: 3px;
    border-width: 1px;
    border-style: none;
    /* border-image defined in the -assets variant */

    -adwaita-progressbar-pattern: -gtk-gradient (linear,
                                                 left top, right bottom,
                                                 from (alpha (@progressbar_pattern, 0.00)),
                                                 color-stop (0.49, alpha (@progressbar_pattern, 0.00)),
                                                 color-stop (0.50, alpha (@progressbar_pattern, 0.10)),
                                                 to (alpha (@progressbar_pattern, 0.10)));
}

.progressbar.vertical {
    background-image: -gtk-gradient (linear,
                                     left top, right top,
                                     from (@progressbar_background_a),
                                     to (@progressbar_background_b));

    -adwaita-progressbar-pattern: -gtk-gradient (linear,
                                                 left bottom, right top,
                                                 from (alpha (@progressbar_pattern, 0.00)),
                                                 color-stop (0.49, alpha (@progressbar_pattern, 0.00)),
                                                 color-stop (0.50, alpha (@progressbar_pattern, 0.10)),
                                                 to (alpha (@progressbar_pattern, 0.10)));
}

/* through component */
GtkProgressBar,
.trough row {
    padding: 0px;
    -GtkProgressBar-xspacing: 22px;
    -GtkProgressBar-yspacing: 22px;
}

.trough,
.trough row,
.trough row:hover {
    background-image: -gtk-gradient (linear,
                                     left top, left bottom,
                                     from (@trough_bg_color_a),
                                     to (@trough_bg_color_b));

    border-width: 1px;
    border-style: solid;
    border-radius: 3px;
    border-color: shade (@inactive_frame_color, 0.8);
}

.trough.vertical {
    background-image: -gtk-gradient (linear,
                                     left top, right top,
                                     from (@trough_bg_color_a),
                                     to (@trough_bg_color_b));
}

.trough row:selected,
.trough row:selected:focused {
    background-image: -gtk-gradient (linear,
                                     left top, left bottom,
                                     from (mix (@trough_bg_color_a, @theme_selected_bg_color, 0.25)),
                                     to (mix (@trough_bg_color_b, @theme_selected_bg_color, 0.25)));
}

The GtkSpinner. The code should be something like:


/***********
 * spinner *
 ***********/
@keyframes spinner {
    0.00% { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)); }

    12.5% { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)); }

    25.0% { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)); }

    37.5% { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)); }

    50.0% { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)); }

    62.5% { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)); }

    75.0% { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)); }

    87.5% { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)); }

    100%  { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)); }
}

.spinner {
    background-color: transparent;
    background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent));

    background-position: 14% 14%, 0% 50%, 14% 86%, 50% 100%, 86% 86%, 100% 50%, 86% 14%, 50% 0%;
    background-size: 15% 15%;
    background-repeat: no-repeat;
}

.spinner:active {
    background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)),
                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)),
                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)),
                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)),
                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)),
                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)),
                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)),
                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent));

    animation: spinner 1s infinite linear;
}

.menu.spinner,
.menu .spinner,
.menu .spinner:hover,
.primary-toolbar .spinner {
    color: @theme_selected_bg_color;
    border: none;
    box-shadow: none;
}

The spinner may be a headache, I searched trough different themes and under gtk 3.18 I haven't find any theme that make the spinner turn. The previous code only displays an static spinner.

I hope that you can fix those two missing widgets, I find the theme awesome! I would have liked to fix the bugs by myself but right now I have too much stuff to code..

Thanks!

horst3180 commented 8 years ago

I can't reproduce that. Everything works here.

rsm-gh commented 8 years ago

Can I know what distribution you are using? I'll try it under Ubunutu, maybe may hybrid Debian Jessie-Testing is the problem!