333 lines
9.5 KiB
SCSS
333 lines
9.5 KiB
SCSS
|
/***************
|
||
|
|
! 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: 3px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.view,
|
||
|
|
textview {
|
||
|
|
text {
|
||
|
|
@extend %view;
|
||
|
|
|
||
|
|
selection { &:focus, & { @extend %selected_items; }}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
treeview entry {
|
||
|
|
&.flat, & {
|
||
|
|
border-radius: 0;
|
||
|
|
background-image: none;
|
||
|
|
background-color: $base_color;
|
||
|
|
|
||
|
|
&:focus { border-color: $selected_bg_color; }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
%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, 50%);
|
||
|
|
background-image: none;
|
||
|
|
background-color: $backdrop_base_color;
|
||
|
|
|
||
|
|
&:disabled {
|
||
|
|
border-color: $backdrop_bg_color;
|
||
|
|
background-image: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
treeview.view {
|
||
|
|
-GtkTreeView-grid-line-width: 1;
|
||
|
|
-GtkTreeView-grid-line-pattern: '';
|
||
|
|
-GtkTreeView-tree-line-width: 1;
|
||
|
|
-GtkTreeView-tree-line-pattern: '';
|
||
|
|
|
||
|
|
border-left-color: mix($fg_color, $base_color, 50%); // this is actually the tree lines color,
|
||
|
|
border-top-color: $bg_color; // while this is the grid lines color, better then nothing
|
||
|
|
|
||
|
|
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, 50%);
|
||
|
|
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, 40%);
|
||
|
|
&:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); }
|
||
|
|
}
|
||
|
|
|
||
|
|
&: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, 50%);
|
||
|
|
border-top: $backdrop_bg_color;
|
||
|
|
}
|
||
|
|
&: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, 70%);
|
||
|
|
|
||
|
|
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
|
||
|
|
|
||
|
|
|
||
|
|
&:hover { color: $fg_color; }
|
||
|
|
|
||
|
|
&:selected {
|
||
|
|
color: mix($selected_fg_color, $selected_bg_color, 70%);
|
||
|
|
|
||
|
|
&:hover { color: $selected_fg_color; }
|
||
|
|
|
||
|
|
&:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 70%); }
|
||
|
|
}
|
||
|
|
|
||
|
|
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
|
||
|
|
|
||
|
|
&:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 70%); }
|
||
|
|
}
|
||
|
|
|
||
|
|
&.progressbar { // progress bar in treeviews
|
||
|
|
@if $variant == light { color: $base_color; }
|
||
|
|
|
||
|
|
border: 1px solid $selected_borders_color;
|
||
|
|
border-radius: 4px;
|
||
|
|
background-color: $selected_bg_color;
|
||
|
|
background-image: linear-gradient(to bottom, $selected_bg_color, darken($selected_bg_color,10%));
|
||
|
|
box-shadow: inset 0 1px if($variant == 'light', transparentize(white,0.7), transparentize(white,0.85)),
|
||
|
|
0 1px if($variant == 'light', transparentize(black, 0.8), transparentize(black,0.9));
|
||
|
|
|
||
|
|
&:selected {
|
||
|
|
&:focus, & {
|
||
|
|
border-radius: 4px;
|
||
|
|
|
||
|
|
@if $variant == 'light' {
|
||
|
|
color: $selected_bg_color;
|
||
|
|
box-shadow: none;
|
||
|
|
} @else { box-shadow: inset 0 1px transparentize(white, 0.95); }
|
||
|
|
|
||
|
|
background-image: linear-gradient(to bottom,
|
||
|
|
$base_color,
|
||
|
|
darken($base_color,10%));
|
||
|
|
|
||
|
|
&:backdrop {
|
||
|
|
@if $variant == 'light' {
|
||
|
|
color: $selected_bg_color;
|
||
|
|
border-color: $selected_borders_color; // otherwise it gets inherited by .view(?!?)
|
||
|
|
} @else { border-color: $backdrop_base_color; }
|
||
|
|
|
||
|
|
background-color: $backdrop_base_color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&:backdrop {
|
||
|
|
@if $variant == 'light' { color: $backdrop_base_color;
|
||
|
|
} @else { border-color: $backdrop_base_color; }
|
||
|
|
|
||
|
|
background-image: none;
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.trough { // progress bar trough in treeviews
|
||
|
|
background-color: transparentize($fg_color,0.9);
|
||
|
|
border-radius: 4px;
|
||
|
|
|
||
|
|
&:selected {
|
||
|
|
&:focus, & {
|
||
|
|
background-color: if($variant == 'light',
|
||
|
|
transparentize($selected_fg_color, 0.7),
|
||
|
|
darken($selected_bg_color, 10%));
|
||
|
|
border-radius: 4px;
|
||
|
|
|
||
|
|
@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, 50%);
|
||
|
|
|
||
|
|
@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, 50%);
|
||
|
|
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") {
|
||
|
|
.view.separator, .separator {
|
||
|
|
color: shade($bg_color, ($contrast + .1));
|
||
|
|
border: 1px solid currentColor;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/*********************
|
||
|
|
! 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: 1px solid border_normal($bg_color);
|
||
|
|
|
||
|
|
&.flat { border: 0; }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* avoid double borders when a viewport is packed into a GtkScrolledWindow */
|
||
|
|
scrolledwindow viewport.frame { border: 0; }
|
||
|
|
}
|
||
|
|
|