@define-color boxes_bg_color shade (@theme_bg_color, 0.5);
@define-color boxes_bg2_color mix (@theme_bg_color, @boxes_bg_color, 0.5);
@define-color boxes_selected_color #5f8dd3;

#TopbarLabel {
    font-size: 14;
    font-weight: bold;
}

#CollectionLabel {
    font-size: 11;
    font-weight: bold;
}

.separator {
    -GtkWidget-wide-separators: true;
    -GtkWidget-separator-height: 1;
}

.view {
    background-color: @boxes_bg_color;
/*
  this is broken in clutter-gtk? atm
  background-image: url("assets/boxes-dark.png");
  background-repeat: repeat;
*/
}

.boxes-bg {
    background-color: @boxes_bg_color;
    background-image: url("assets/boxes-dark.png");
    background-repeat: repeat;
}

.boxes-sidebar-bg {
    background-color: @boxes_bg2_color;
    background-image: url("assets/boxes-gray.png");
    background-repeat: repeat;
}

.boxes-step-label {
    color: #989898;
    font-size: 11;
    font-weight: bold;
}

.boxes-wizard-label {
    color: #d8d8d8;
}

.boxes-logo-notice-label {
    color: #989898;
    font-style: italic;
}

.boxes-source-label {
    font-size: 11;
    font-weight: bold;
}

.boxes-graph-label {
    font-size: 8;
    font-family: monospace;
    color: #989898;
}

.boxes-source-nb {
    background-color: alpha(#fff, 0.0);
}

.boxes-selected {
    background-color: @boxes_selected_color;
}

.boxes-continue {
    background-image: -gtk-gradient (linear,
                                     left top, left bottom,
                                     from (@boxes_selected_color),
                                     to (darker (@boxes_selected_color)));
}

.boxes-continue:insensitive {
    background-image: none;
}

.boxes-product-key-entry {
    font-family: monospace;
}

.osd {
    background-image: none;
    background-color: alpha(#000, 0.0);
    color: #ffffff;
}

.osd .toolbar {
    padding: 6px 6px;
    border-style: none;
    border-radius: 5px;
    border-width: 0;

    background-image: none;
    background-color: alpha(#fff, 0.15);

    text-shadow: 1px 1px black;
    icon-shadow: 1px 1px black;
}

.osd .toolbar .favorite {
    color: shade(@theme_selected_bg_color, 1.20);
}

.osd .toolbar .separator {
    color: alpha(@theme_tooltip_fg_color, 0.30);
}

.osd .toolbar .button:hover {
    background-image: -gtk-gradient(linear, left top, left bottom,
                                    from(alpha(@theme_tooltip_fg_color, 0.00)),
                                    color-stop(0.50, alpha(@theme_tooltip_fg_color, 0.15)),
                                    to(alpha(@theme_tooltip_fg_color, 0.00)));

    border-image: none;
    border-style: none;
    border-radius: 2px;
    border-width: 0;
}

.osd .toolbar .button:active {
    background-image: none;
    background-color: alpha(@theme_tooltip_fg_color, 0.15);

    border-image: none;
    border-style: none;
    border-radius: 2px;
    border-width: 0;
}

.osd .toolbar .button:active:hover {
    background-image: -gtk-gradient(linear, left top, left bottom,
                                    from(alpha(@theme_tooltip_fg_color, 0.15)),
                                    color-stop(0.50, alpha(@theme_tooltip_fg_color, 0.30)),
                                    to(alpha(@theme_tooltip_fg_color, 0.15)));

    border-style: none;
    border-image: none;
    border-radius: 2px;
    border-width: 0;
}

GtkInfoBar {
    -GtkInfoBar-action-area-border: 0;
}

/* Ensure the viewport is transparent so the background don't
   show through the rounded corners */
.boxes-menu GtkViewport {
    background-image: none;
    background-color: transparent;
    border-style: none;
}

.boxes-menu-row {
    -GtkWidget-focus-line-width: 0;
    border-style: ridge none none none;
    border-color: shade (@boxes_bg2_color, 0.7);
    border-width: 2px 0 0 0;
    box-shadow: none;
    border-image: none;
    background-image: none;
    background-color: @boxes_bg2_color;
    border-radius: 0;
}

.boxes-menu-row:nth-child(first) {
    border-radius: 15px 15px 0 0;
    border-style: none;
}

.boxes-menu-scrolled .boxes-menu-row:nth-child(first) {
    border-radius: 0;
}

.boxes-menu > .boxes-menu-row:nth-child(last) {
    border-radius: 0 0 15px 15px;
}

.boxes-menu-row:prelight, .boxes-menu-row:focus {
    background-color: shade (@boxes_bg2_color, 1.2);
}

.boxes-menu-row:active {
    background-color: @theme_selected_bg_color;
}

.boxes-menu-row *:active {
    color: #ffffff;
}
