numix-gtk-theme/gtk-3.0/gtk-widgets-assets.css

/*******************
 * check and radio *
 *******************/
/* draw regular check and radio items using our assets */
.check,
.check row:selected,
.check row:selected:focus {
    background-image: url("assets/checkbox-unchecked.svg");
}

.check:insensitive,
.check row:selected:insensitive,
.check row:selected:focus:insensitive {
    background-image: url("assets/checkbox-unchecked-insensitive.svg");
}

.check:active,
.check row:selected:active,
.check row:selected:focus:active {
    background-image: url("assets/checkbox-checked.svg");
}

.check:active:insensitive,
.check row:selected:active:insensitive,
.check row:selected:focus:active:insensitive {
    background-image: url("assets/checkbox-checked-insensitive.svg");
}

.check:inconsistent,
.check row:selected:inconsistent,
.check row:selected:focus:inconsistent {
    background-image: url("assets/checkbox-mixed.svg");
}

.check:inconsistent:insensitive,
.check row:selected:inconsistent:insensitive,
.check row:selected:focus:inconsistent:insensitive {
    background-image: url("assets/checkbox-mixed-insensitive.svg");
}

.radio,
.radio row:selected,
.radio row:selected:focus {
    background-image: url("assets/radio-unselected.svg");
}

.radio:insensitive,
.radio row:selected:insensitive,
.radio row:selected:focus:insensitive {
    background-image: url("assets/radio-unselected-insensitive.svg");
}

.radio:active,
.radio row:selected:active,
.radio row:selected:focus:active {
    background-image: url("assets/radio-selected.svg");
}

.radio:active:insensitive,
.radio row:selected:active:insensitive,
.radio row:selected:focus:active:insensitive {
    background-image: url("assets/radio-selected-insensitive.svg");
}

.radio:inconsistent,
.radio row:selected:inconsistent,
.radio row:selected:focus:inconsistent {
    background-image: url("assets/radio-mixed.svg");
}

.radio:inconsistent:insensitive,
.radio row:selected:inconsistent:insensitive,
.radio row:selected:focus:inconsistent:insensitive {
    background-image: url("assets/radio-mixed-insensitive.svg");
}

.menuitem.check:active {
    background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_selected_bg_color), to(transparent)),
                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_selected_bg_color), to(transparent)),
                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_selected_bg_color), to(transparent)),
                      linear-gradient(45deg, 
                                      transparent,
                                      transparent 30%,
                                      @theme_selected_bg_color 30%,
                                      @theme_selected_bg_color 70%,
                                      transparent 70%,
                                      transparent),
                      linear-gradient(-45deg,
                                      transparent,
                                      transparent 37%,
                                      @theme_selected_bg_color 37%,
                                      @theme_selected_bg_color 62%,
                                      transparent 62%,
                                      transparent);

    background-position: 16% 48%, 42% 74%, 88% 28%, 24% 64%, 76% 48%;
    background-size: 16% 16%, 16% 16%, 16% 16%, 30% 30%, 50% 50%;
    background-repeat: no-repeat;
}

.menuitem.check:active:hover {
    background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_selected_fg_color), to(transparent)),
                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_selected_fg_color), to(transparent)),
                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_selected_fg_color), to(transparent)),
                      linear-gradient(45deg, 
                                      transparent,
                                      transparent 30%,
                                      @theme_selected_fg_color 30%,
                                      @theme_selected_fg_color 70%,
                                      transparent 70%,
                                      transparent),
                      linear-gradient(-45deg,
                                      transparent,
                                      transparent 37%,
                                      @theme_selected_fg_color 37%,
                                      @theme_selected_fg_color 62%,
                                      transparent 62%,
                                      transparent);

    background-position: 16% 48%, 42% 74%, 88% 28%, 24% 64%, 76% 48%;
    background-size: 16% 16%, 16% 16%, 16% 16%, 30% 30%, 50% 50%;
    background-repeat: no-repeat;
}

.menuitem.check:active:insensitive {
    background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(mix(@menu_fg_color, @menu_bg_color, 0.5)), to(transparent)),
                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(mix(@menu_fg_color, @menu_bg_color, 0.5)), to(transparent)),
                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(mix(@menu_fg_color, @menu_bg_color, 0.5)), to(transparent)),
                      linear-gradient(45deg, 
                                      transparent,
                                      transparent 30%,
                                      mix(@menu_fg_color, @menu_bg_color, 0.5) 30%,
                                      mix(@menu_fg_color, @menu_bg_color, 0.5) 70%,
                                      transparent 70%,
                                      transparent),
                      linear-gradient(-45deg,
                                      transparent,
                                      transparent 37%,
                                      mix(@menu_fg_color, @menu_bg_color, 0.5) 37%,
                                      mix(@menu_fg_color, @menu_bg_color, 0.5) 62%,
                                      transparent 62%,
                                      transparent);

    background-position: 16% 48%, 42% 74%, 88% 28%, 24% 64%, 76% 48%;
    background-size: 16% 16%, 16% 16%, 16% 16%, 30% 30%, 50% 50%;
    background-repeat: no-repeat;
}

.menuitem.check:inconsistent,
.menuitem.radio:inconsistent {
    background-image: linear-gradient(to bottom,
                                      @theme_selected_bg_color,
                                      @theme_selected_bg_color
                                      );

    background-position: center center;
    background-size: 60% 16%;
    background-repeat: no-repeat;
}

.menuitem.check:inconsistent:hover,
.menuitem.radio:inconsistent:hover {
    background-image: linear-gradient(to bottom,
                                      @theme_selected_fg_color,
                                      @theme_selected_fg_color
                                      );

    background-position: center center;
    background-size: 60% 16%;
    background-repeat: no-repeat;
}

.menuitem.check:inconsistent:insensitive,
.menuitem.radio:inconsistent:insensitive {
    background-image: linear-gradient(to bottom,
                                      mix(@menu_fg_color, @menu_bg_color, 0.5),
                                      mix(@menu_fg_color, @menu_bg_color, 0.5)
                                      );

    background-position: center center;
    background-size: 60% 16%;
    background-repeat: no-repeat;
}

.menuitem.radio:active {
    background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_selected_bg_color), to(transparent));
    background-position: center center;
    background-size: 40% 40%;
    background-repeat: no-repeat;
}

.menuitem.radio:active:hover {
    background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_selected_fg_color), to(transparent));
    background-position: center center;
    background-size: 40% 40%;
    background-repeat: no-repeat;
}

.menuitem.radio:active:insensitive {
    background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(mix(@menu_fg_color, @menu_bg_color, 0.5)), to(transparent));
    background-position: center center;
    background-size: 40% 40%;
    background-repeat: no-repeat;
}

GtkIconView.content-view.cell.check {
    background-image: url("assets/grid-selection-unchecked.svg");
}

GtkIconView.content-view.cell.check:active {
    background-image: url("assets/grid-selection-checked.svg");
}

/******************
 * pane separator *
 ******************/
.pane-separator,
.pane-separator.horizontal {
    background-image: linear-gradient(to bottom,
                                      shade(@theme_bg_color, 0.8) 0%,
                                      shade(@theme_bg_color, 0.8) 20%,
                                      transparent 20%,
                                      transparent 40%,
                                      shade(@theme_bg_color, 0.8) 40%,
                                      shade(@theme_bg_color, 0.8) 60%,
                                      transparent 60%,
                                      transparent 80%,
                                      shade(@theme_bg_color, 0.8) 80%,
                                      shade(@theme_bg_color, 0.8)
                                      );

    background-size: 4px 10px;
    background-repeat: no-repeat;
    background-position: center center;
}

.pane-separator.vertical {
    background-image: linear-gradient(to right,
                                      shade(@theme_bg_color, 0.8) 0%,
                                      shade(@theme_bg_color, 0.8) 20%,
                                      transparent 20%,
                                      transparent 40%,
                                      shade(@theme_bg_color, 0.8) 40%,
                                      shade(@theme_bg_color, 0.8) 60%,
                                      transparent 60%,
                                      transparent 80%,
                                      shade(@theme_bg_color, 0.8) 80%,
                                      shade(@theme_bg_color, 0.8)
                                      );

    background-size: 10px 4px;
    background-repeat: no-repeat;
    background-position: center center;
}