/* Wipe all theming CSS to start with */

@import url("resource:///com/endlessm/sdk/css/reset.css");

@define-color endless_theme_bg_color #2e3436;
@define-color endless_wm_shadow alpha(black, 0.5);

/* Insensitive Text */

.menu GtkLabel:insensitive {
    color: rgba(255, 255, 255, 0.5);
}

/* Endless app window */

EosWindow {
    background-color: @endless_theme_bg_color;
}

.window-frame {
    border-color: darker(@endless_theme_bg_color);
    border-radius: 7px 7px 0 0;
    border-width: 1px;
    border-style: solid;

    box-shadow: 0 2px 8px 3px @endless_wm_shadow;

    /* this is used for the resize cursor area */
    margin: 10px;
}

.window-frame:backdrop {
    box-shadow: 0 2px 5px 1px @endless_wm_shadow;
}

/* Endless window top bar */

.top-bar {
    font-family: "Lato";
    font-weight: bold;
    font-size: 11px;
    background-image: -gtk-gradient(linear, center top, center bottom,
        from(#464646), to(#1e1e1e));
}

.top-bar.unmaximized {
    border-radius: 7px 7px 0px 0px;
}

.top-bar:backdrop {
    background-image: -gtk-gradient(linear, center top, center bottom,
        from(#282828), to(#1e1e1e));
}

.top-bar .button {
    border-radius: 2px;
    color: #8c8c8c;
    icon-shadow: 0px -1px alpha(black, 0.25);
}

.top-bar .button:backdrop {
    color: #646464;
}

.top-bar .button:hover {
    color: #dcdcdc;
    icon-shadow: 0px -1px alpha(black, 0.35);
    background-image: -gtk-gradient(linear, left bottom, left top,
        color-stop(0.98, rgb(131, 131, 131)),
        color-stop(0.95, rgb(108, 108, 108)),
        color-stop(0, rgb(68, 68, 68)));
}

.top-bar .button:active {
    color: #787878;
    icon-shadow: none;
    background-image: -gtk-gradient(linear, left bottom, left top,
        color-stop(0.98, rgb(79, 79, 79)),
        color-stop(0.95, rgb(71, 71, 71)),
        color-stop(0, rgb(67, 67, 67)));
}

.top-bar .back,
.top-bar .forward {
    background-image: linear-gradient(-179deg,
        rgba(98, 98, 98, 0.49) 0%,
        alpha(black, 0.50) 100%);
    border: 1px solid black;
    box-shadow: inset 1px 1px alpha(white, 0.25);
    padding: 2px 10px;
}

.top-bar .back:insensitive,
.top-bar .forward:insensitive {
    border: 1px solid alpha(black, 0.20);
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    color: #5a5a5a;
    icon-shadow: none;
}

.top-bar .back {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-right: 0px none;
}

.top-bar .forward {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.top-bar .forward.rtl {
    border-radius: 5px 0 0 5px;
    border-right: 0px none;
}

.top-bar .back.rtl {
    border-radius: 0 5px 5px 0;
}

.top-bar .endless-search-box {
    background-color: #4d4d4d;
    color: #eeeeec;
    padding: 1px 2px 1px 4px;
    border-radius: 15px;
    border-style: solid;
    border-width: 1px;
    border-color: #575757;
    box-shadow: inset 0px 1px 1px alpha(black, 0.1);
    /* Can't get the actual gradient border to work, this appears as a square. */
    /*border-image: linear-gradient(to bottom, #262626, #515151) 1 1 stretch;*/
}

.top-bar .endless-search-box.image {
    color: #919191;
}

.top-bar .endless-search-box:selected {
    color: #2e3436;
    background-color: #eeeeec;
}

.endless-search-box .frame {
    background-color: #f5f5f5;
    padding: 7px;
    border-radius: 4px;
    border-color: #c6c8c5;
    border-width: 1px;
    border-style: solid;
}

.endless-search-box .cell {
    color: #333333;
}

.endless-search-box .cell:selected {
    background-color: #d5e1ed;
    border-radius: 3px;
    border-color: #bbd4ea;
    border-width: 1px;
    border-style: solid;
}

/*
 * We need to set the min scrollbar size smaller than in adwaita (42 pixels)
 * as it is making our auto-complete results too big if there is only one
 * entry. This is a bug in GTK
 */
.scrollbar {
    -GtkScrollbar-min-slider-length: 28;
}

/*
 * Themeing for context menus, to get Adwaita look
 * FIXME: Really gross to be duplicating all this Adwaita theme here. If the
 * :not selector is ever supported in gtk css, just :not(.context-menu) and
 * children in reset.css and drop all of this.
 */
@define-color endless_menu_fg_color #2e3436;
@define-color endless_menu_bg_color shade (#ededed, 1.1);

.menu {
    font: initial;
    color: @endless_menu_fg_color;
    background-color: @endless_menu_bg_color;
}

.menu .menuitem {
    padding: 4px;
    -GtkMenuItem-arrow-scaling: 0.4;
}

.menu .menuitem:active,
.menu .menuitem:hover {
    color: #ffffff;
    background-color: #4a90d9;
}

.menu .menuitem *:insensitive {
    color: mix (@endless_menu_fg_color, @endless_menu_bg_color, 0.6);
}

.menu .menuitem.separator {
    color: mix (@endless_menu_fg_color, @endless_menu_bg_color, 0.9);
    -GtkMenuItem-horizontal-padding: 0;
}

/* Simple spinner. Loosely based on http://projects.lukehaas.me/css-loaders/,
MIT licensed. */

.spinner {
    background-image: -gtk-gradient(radial, center center, 0, center center, 0.2,
                                    color-stop(0, white),
                                    color-stop(0.8, white),
                                    color-stop(1, transparent)),
                      -gtk-gradient(radial, center center, 0, center center, 0.2,
                                    color-stop(0, white),
                                    color-stop(0.8, white),
                                    color-stop(1, transparent)),
                      -gtk-gradient(radial, center center, 0, center center, 0.2,
                                    color-stop(0, white),
                                    color-stop(0.8, white),
                                    color-stop(1, transparent));
    background-position: 0% 50%, 50% 50%, 100% 50%;
    background-size: 40% 40%;
    background-repeat: no-repeat;
}

.spinner:active {
    animation: spinner 2.1s infinite linear;
}

@keyframes spinner {
    0% {
        background-image: -gtk-gradient(radial, center center, 0, center center, 0.2,
                                        color-stop(0, white),
                                        color-stop(0.8, white),
                                        color-stop(1, transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.2,
                                        color-stop(0, white),
                                        color-stop(0.8, white),
                                        color-stop(1, transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.2,
                                        color-stop(0, white),
                                        color-stop(0.8, white),
                                        color-stop(1, transparent));
    }
    25% {
        background-image: -gtk-gradient(radial, center center, 0, center center, 0.5,
                                        color-stop(0, white),
                                        color-stop(0.5, white),
                                        color-stop(1, transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.2,
                                        color-stop(0, white),
                                        color-stop(0.8, white),
                                        color-stop(1, transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.2,
                                        color-stop(0, white),
                                        color-stop(0.8, white),
                                        color-stop(1, transparent));
    }
    50% {
        background-image: -gtk-gradient(radial, center center, 0, center center, 0.2,
                                        color-stop(0, white),
                                        color-stop(0.8, white),
                                        color-stop(1, transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5,
                                        color-stop(0, white),
                                        color-stop(0.5, white),
                                        color-stop(1, transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.2,
                                        color-stop(0, white),
                                        color-stop(0.8, white),
                                        color-stop(1, transparent));
    }
    75% {
        background-image: -gtk-gradient(radial, center center, 0, center center, 0.2,
                                        color-stop(0, white),
                                        color-stop(0.8, white),
                                        color-stop(1, transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.2,
                                        color-stop(0, white),
                                        color-stop(0.8, white),
                                        color-stop(1, transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5,
                                        color-stop(0, white),
                                        color-stop(0.5, white),
                                        color-stop(1, transparent));
    }
    100% {
        background-image: -gtk-gradient(radial, center center, 0, center center, 0.2,
                                        color-stop(0, white),
                                        color-stop(0.8, white),
                                        color-stop(1, transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.2,
                                        color-stop(0, white),
                                        color-stop(0.8, white),
                                        color-stop(1, transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.2,
                                        color-stop(0, white),
                                        color-stop(0.8, white),
                                        color-stop(1, transparent));
    }
}