numix-gtk-theme/gtk-3.20/scss/widgets/_view.scss

380 lines
11 KiB
SCSS
Raw Normal View History

2016-04-09 04:30:09 +00:00
/***************
! Generic views
****************/
@include exports("view") {
.view,
%view {
color: $text_color;
background-color: $base_color;
&:backdrop {
color: $backdrop_text_color;
background-color: $backdrop_base_color;
}
&:selected {
&:focus, & {
@extend %selected_items;
border-radius: $roundness;
2016-04-09 04:30:09 +00:00
}
}
}
.view,
textview {
text {
@extend %view;
selection { &:focus, & { @extend %selected_items; } }
2016-04-09 04:30:09 +00:00
}
}
iconview { @extend .view; }
}
/************
! Treeview
*************/
@include exports("treeview") {
.rubberband,
rubberband {
border: 1px solid darken($selected_bg_color, 10%);
background-color: transparentize(darken($selected_bg_color, 10%), 0.8);
}
2016-04-09 04:30:09 +00:00
treeview entry {
&.flat, & {
border-radius: 0;
background-image: none;
background-color: $base_color;
&:focus { border-color: $selected_bg_color; }
}
}
2016-04-09 04:30:09 +00:00
%column_header_button {
padding: 0 6px;
border-radius: 0;
background-image: none;
text-shadow: none;
border-style: none solid solid none;
border-color: $bg_color;
&:disabled {
border-color: $bg_color;
background-image: none;
}
&:backdrop {
border-color: $backdrop_bg_color;
border-style: none solid solid none;
color: mix($backdrop_fg_color, $backdrop_bg_color, .5);
2016-04-09 04:30:09 +00:00
background-image: none;
background-color: $backdrop_base_color;
&:disabled {
border-color: $backdrop_bg_color;
background-image: none;
}
}
}
2016-04-09 04:30:09 +00:00
treeview.view {
-GtkTreeView-grid-line-width: 1;
-GtkTreeView-grid-line-pattern: '';
-GtkTreeView-tree-line-width: 1;
-GtkTreeView-tree-line-pattern: '';
2016-04-10 13:09:20 +00:00
border-left-color: mix($dark_bg_color, $base_color, .2); // this is actually the tree lines color,
border-top-color: mix($dark_bg_color, $base_color, .2); // while this is the grid lines color, better then nothing
2016-04-09 04:30:09 +00:00
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
&:selected {
&:focus, & {
@extend %selected_items;
border-radius: 0;
}
&:backdrop, & {
border-left-color: mix($selected_fg_color, $selected_bg_color, .5);
2016-04-09 04:30:09 +00:00
border-top-color: transparentize($fg_color, 0.9); // doesn't work unfortunatelly
}
}
&:disabled {
color: $insensitive_fg_color;
&:selected {
color: mix($selected_fg_color, $selected_bg_color, .4);
&:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, .3); }
2016-04-09 04:30:09 +00:00
}
&:backdrop { color: $backdrop_insensitive_color; }
}
&.separator {
min-height: 2px;
color: $bg_color;
&:backdrop { color: transparentize($bg_color, 0.9); }
}
&:backdrop {
border-left-color: mix($backdrop_fg_color, $backdrop_bg_color, .5);
2016-04-09 04:30:09 +00:00
border-top: $backdrop_bg_color;
}
2016-04-09 04:30:09 +00:00
&:drop(active) {
border-style: solid none;
border-width: 1px;
border-color: $selected_borders_color;
&.after { border-top-style: none; }
&.before { border-bottom-style: none; }
}
&.expander {
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
color: mix($fg_color, $base_color, .7);
2016-04-09 04:30:09 +00:00
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
&:hover { color: $fg_color; }
&:selected {
color: mix($selected_fg_color, $selected_bg_color, .7);
2016-04-09 04:30:09 +00:00
&:hover { color: $selected_fg_color; }
&:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, .7); }
2016-04-09 04:30:09 +00:00
}
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
&:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, .7); }
2016-04-09 04:30:09 +00:00
}
&.progressbar { // progress bar in treeviews
@if $variant == light { color: $base_color; }
2016-04-12 06:48:04 +00:00
border-radius: $roundness;
2016-04-09 04:30:09 +00:00
border: 1px solid $selected_borders_color;
background-color: $selected_bg_color;
2016-04-12 06:48:04 +00:00
//background-image: linear-gradient(to bottom, $selected_bg_color, darken($selected_bg_color, .1));
box-shadow: inset 0 1px if($variant == 'light', transparentize(white, .7), transparentize(white, .85)),
0 1px if($variant == 'light', transparentize(black, .8), transparentize(black, .9));
2016-04-09 04:30:09 +00:00
&:selected {
&:focus, & {
@if $variant == 'light' {
2016-04-12 06:48:04 +00:00
color: $selected_fg_color;
2016-04-09 04:30:09 +00:00
box-shadow: none;
2016-04-12 06:48:04 +00:00
} @else {
box-shadow: inset 0 1px transparentize(white, .95);
}
2016-04-09 04:30:09 +00:00
2016-04-12 06:48:04 +00:00
background-color: linear-gradient(to bottom, $base_color, darken($base_color, .1));
2016-04-09 04:30:09 +00:00
&:backdrop {
@if $variant == 'light' {
color: $selected_bg_color;
border-color: $selected_borders_color; // otherwise it gets inherited by .view(?!?)
2016-04-12 06:48:04 +00:00
} @else {
border-color: $backdrop_base_color;
}
2016-04-09 04:30:09 +00:00
background-color: mix($backdrop_base_color, $selected_bg_color, .9);
2016-04-09 04:30:09 +00:00
}
}
}
/* transmission fix. */
&:insensitive {
&:insensitive {
@include linear-gradient($bg_color);
border-color: border_insensitive($bg_color);
}
}
2016-04-12 06:48:04 +00:00
&:disabled {
@include linear-gradient($bg_color);
border-color: border_disabled($bg_color);
}
2016-04-09 04:30:09 +00:00
&:backdrop {
2016-04-12 06:48:04 +00:00
@if $variant == 'light' {
color: $backdrop_base_color;
} @else {
border-color: $backdrop_base_color;
}
2016-04-09 04:30:09 +00:00
background-image: none;
box-shadow: none;
}
}
&.trough { // progress bar trough in treeviews
2016-04-12 06:48:04 +00:00
background-color: transparentize($fg_color, .9);
border-radius: $roundness;
2016-04-09 04:30:09 +00:00
&:selected {
&:focus, & {
2016-04-12 06:48:04 +00:00
background-color: if($variant == 'light', transparentize($selected_fg_color, .7), darken($selected_bg_color, .1));
2016-04-09 04:30:09 +00:00
@if $variant == 'light' {
border-width: 1px 0;
border-style: solid;
border-color: $selected_bg_color;
}
}
}
}
header {
button {
$_column_header_color: mix($fg_color, $base_color, .5);
2016-04-09 04:30:09 +00:00
@extend %column_header_button;
color: $_column_header_color;
background-color: $base_color;
font-weight: bold;
text-shadow: none;
box-shadow: none;
&:hover {
@extend %column_header_button;
color: mix($_column_header_color, $fg_color, .5);
2016-04-09 04:30:09 +00:00
box-shadow: none;
transition: none; //I shouldn't need this
}
&:active {
@extend %column_header_button;
color: $fg_color;
transition: none; //I shouldn't need this
}
}
button:last-child { &:backdrop, & { border-right-style: none; }}
}
button.dnd,
header.button.dnd { // for treeview-like derive widgets
&:active, &:selected, &:hover, & {
padding: 0 6px;
transition: none;
background-image: none;
background-color: $selected_bg_color;
color: $base_color;
border-radius: 0;
border-style: none;
box-shadow: inset 0 0 0 1px $base_color;
text-shadow: none;
}
}
}
}
/***********
! Separator
************/
@include exports("separator") {
separator { // vbox and hbox separators
background: transparentize(black, .9);
min-width: 1px;
min-height: 1px;
2016-04-09 04:30:09 +00:00
}
}
/*********************
! Column view headers
**********************/
@include exports("columnheader") {
column-header {
.button {
&, &:active {
border-width: 0 1px 1px 0;
border-radius: 0;
}
&, &:active, &:focus, &:active:focus {
border-color: shade($base_color, .9);
border-bottom-color: shade($base_color, .8);
background-color: shade($base_color, .97);
background-image: none;
}
&:hover, &:active:hover, &:hover:focus, &:active:hover:focus {
border-color: shade($base_color, .9);
border-bottom-color: shade($base_color, .8);
background-color: shade($base_color, .99);
background-image: none;
}
&:last-child .button { border-width: 0 0 1px; }
}
}
}
/**********
! Frames *
***********/
@include exports("frame") {
frame > border, .frame {
border: 1px solid $borders_color;
2016-04-09 04:30:09 +00:00
&.flat { border-style: none; }
&:backdrop { border-color: $backdrop_borders_color; }
2016-04-09 04:30:09 +00:00
}
/* avoid double borders when a viewport is packed into a GtkScrolledWindow */
scrolledwindow viewport.frame { border: 0; }
}
/***************
! Places view *
****************/
@include exports("placesview") {
placesview {
.server-list-button > image {
transition: 200ms $ease-out-quad;
-gtk-icon-transform: rotate(0turn);
}
.server-list-button:checked > image {
transition: 200ms $ease-out-quad;
-gtk-icon-transform: rotate(-0.5turn);
}
row.activatable:hover { background-color: transparent; }
// this selects the "connect to server" label
> actionbar > revealer > box > label {
padding-left: 8px;
padding-right: 8px;
}
}
}