Wrap modules in exports mixin so they are included only once
Satyajit Sahoo
parent
f34745f3da
commit
0163f1997a
|
|
@ -145,29 +145,31 @@
|
||||||
.linked & { @include linked_button($bg, $dark_shadow); }
|
.linked & { @include linked_button($bg, $dark_shadow); }
|
||||||
}
|
}
|
||||||
|
|
||||||
%close_button {
|
@include exports("button") {
|
||||||
border: 1px solid transparent;
|
%close_button {
|
||||||
background-color: transparent;
|
border: 1px solid transparent;
|
||||||
background-image: none;
|
background-color: transparent;
|
||||||
box-shadow: none;
|
|
||||||
|
|
||||||
&:focus, &:hover {
|
|
||||||
border: 1px solid alpha(black, 0.3);
|
|
||||||
background-color: alpha(white, 0.2);
|
|
||||||
background-image: none;
|
background-image: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
|
||||||
|
&:focus, &:hover {
|
||||||
|
border: 1px solid alpha(black, 0.3);
|
||||||
|
background-color: alpha(white, 0.2);
|
||||||
|
background-image: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active, &:checked, &:active:hover, &:checked:hover {
|
||||||
|
border: 1px solid alpha(black, 0.3);
|
||||||
|
background-color: alpha(black, 0.1);
|
||||||
|
background-image: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active, &:checked, &:active:hover, &:checked:hover {
|
.button {
|
||||||
border: 1px solid alpha(black, 0.3);
|
@include button($bg_color, $fg_color);
|
||||||
background-color: alpha(black, 0.1);
|
|
||||||
background-image: none;
|
&.default { @include button($selected_bg_color, $selected_fg_color); }
|
||||||
box-shadow: none;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
|
||||||
@include button($bg_color, $fg_color);
|
|
||||||
|
|
||||||
&.default { @include button($selected_bg_color, $selected_fg_color); }
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -6,19 +6,22 @@
|
||||||
! Calendar
|
! Calendar
|
||||||
***********/
|
***********/
|
||||||
|
|
||||||
GtkCalendar {
|
@include exports("calendar") {
|
||||||
padding: $spacing;
|
GtkCalendar {
|
||||||
outline-offset: -1px;
|
padding: $spacing;
|
||||||
|
outline-offset: -1px;
|
||||||
|
|
||||||
&:inconsistent { color: mix($fg_color, $bg_color, 0.5); }
|
&:inconsistent { color: mix($fg_color, $bg_color, 0.5); }
|
||||||
|
|
||||||
&.view, &.highlight, &.header, &.button {
|
&.view, &.highlight, &.header, &.button {
|
||||||
&, &:hover, &:insensitive {
|
&, &:hover, &:insensitive {
|
||||||
border: none;
|
border: none;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&.highlight { color: $selected_bg_color; }
|
&.highlight { color: $selected_bg_color; }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -72,27 +72,32 @@
|
||||||
&.image.left { padding-right: $spacing; }
|
&.image.left { padding-right: $spacing; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.entry { @include entry($base_color, $text_color); }
|
@include exports("entry") {
|
||||||
|
.entry { @include entry($base_color, $text_color); }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/******************
|
/******************
|
||||||
! Combobox entry *
|
! Combobox entry *
|
||||||
*******************/
|
*******************/
|
||||||
|
|
||||||
GtkComboBox.combobox-entry {
|
@include exports("comboboxentry") {
|
||||||
.entry {
|
GtkComboBox.combobox-entry {
|
||||||
&, &:hover, &:focus, &:active, &:insensitive {
|
.entry {
|
||||||
border-width: 1px 0 1px 1px;
|
&, &:hover, &:focus, &:active, &:insensitive {
|
||||||
border-top-right-radius: 0;
|
border-width: 1px 0 1px 1px;
|
||||||
border-bottom-right-radius: 0;
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
&, &:hover, &:focus, &:active, &:insensitive {
|
&, &:hover, &:focus, &:active, &:insensitive {
|
||||||
border-width: 1px 1px 1px 1px;
|
border-width: 1px 1px 1px 1px;
|
||||||
border-bottom-left-radius: 0;
|
border-bottom-left-radius: 0;
|
||||||
border-top-left-radius: 0;
|
border-top-left-radius: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
&-row {
|
&-row {
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
padding: 3px;
|
padding: $spacing;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -7,31 +7,33 @@
|
||||||
! Infobar
|
! Infobar
|
||||||
**********/
|
**********/
|
||||||
|
|
||||||
GtkInfoBar {
|
@include exports("infobar") {
|
||||||
border: none;
|
GtkInfoBar {
|
||||||
|
border: none;
|
||||||
|
|
||||||
$types: (
|
$types: (
|
||||||
info: ( $info_fg_color, $info_bg_color ),
|
info: ( $info_fg_color, $info_bg_color ),
|
||||||
warning: ( $warning_fg_color, $warning_bg_color ),
|
warning: ( $warning_fg_color, $warning_bg_color ),
|
||||||
question: ( $question_fg_color, $question_bg_color ),
|
question: ( $question_fg_color, $question_bg_color ),
|
||||||
error: ( $error_fg_color, $error_bg_color ),
|
error: ( $error_fg_color, $error_bg_color ),
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
||||||
@each $type, $colors in $types {
|
@each $type, $colors in $types {
|
||||||
$fg_color: nth($colors, 1);
|
$fg_color: nth($colors, 1);
|
||||||
$bg_color: nth($colors, 2);
|
$bg_color: nth($colors, 2);
|
||||||
|
|
||||||
&.#{$type} {
|
&.#{$type} {
|
||||||
border: 1px solid shade($bg_color, 0.8);
|
border: 1px solid shade($bg_color, 0.8);
|
||||||
background-color: $bg_color;
|
background-color: $bg_color;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
color: $fg_color;
|
color: $fg_color;
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
@include button($bg_color, $fg_color);
|
@include button($bg_color, $fg_color);
|
||||||
|
|
||||||
&.close { @extend %close_button; }
|
&.close { @extend %close_button; }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,30 +7,32 @@
|
||||||
! Menubar
|
! Menubar
|
||||||
**********/
|
**********/
|
||||||
|
|
||||||
.menubar {
|
@include exports("menubar") {
|
||||||
-GtkWidget-window-dragging: true;
|
.menubar {
|
||||||
|
-GtkWidget-window-dragging: true;
|
||||||
|
|
||||||
border: none;
|
border: none;
|
||||||
background-color: $menubar_bg_color;
|
background-color: $menubar_bg_color;
|
||||||
background-image: none;
|
|
||||||
color: $menubar_fg_color;
|
|
||||||
|
|
||||||
|
|
||||||
&.menuitem, .menuitem {
|
|
||||||
padding: $spacing ($spacing * 2);
|
|
||||||
border: 1px solid transparent;
|
|
||||||
background-color: transparent;
|
|
||||||
background-image: none;
|
background-image: none;
|
||||||
color: $menubar_fg_color;
|
color: $menubar_fg_color;
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: mix($menubar_bg_color, $menubar_fg_color, 0.21);
|
|
||||||
background-color: mix($menubar_bg_color, $menubar_fg_color, 0.21);
|
|
||||||
background-image: none;
|
|
||||||
color: shade($menubar_fg_color, 1.08);
|
|
||||||
}
|
|
||||||
|
|
||||||
& *:hover { color: shade($menubar_fg_color, 1.08); }
|
&.menuitem, .menuitem {
|
||||||
|
padding: $spacing ($spacing * 2);
|
||||||
|
border: 1px solid transparent;
|
||||||
|
background-color: transparent;
|
||||||
|
background-image: none;
|
||||||
|
color: $menubar_fg_color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: mix($menubar_bg_color, $menubar_fg_color, 0.21);
|
||||||
|
background-color: mix($menubar_bg_color, $menubar_fg_color, 0.21);
|
||||||
|
background-image: none;
|
||||||
|
color: shade($menubar_fg_color, 1.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
& *:hover { color: shade($menubar_fg_color, 1.08); }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -39,185 +41,189 @@
|
||||||
! Menu
|
! Menu
|
||||||
*******/
|
*******/
|
||||||
|
|
||||||
GtkTreeMenu, GtkMenuToolButton, GtkComboBox {
|
@include exports("menu") {
|
||||||
&.menu, .menu {
|
GtkTreeMenu, GtkMenuToolButton, GtkComboBox {
|
||||||
background-color: $menu_bg_color;
|
&.menu, .menu {
|
||||||
margin: $spacing;
|
background-color: $menu_bg_color;
|
||||||
}
|
margin: $spacing;
|
||||||
}
|
|
||||||
|
|
||||||
#toolbar-popup, .menu {
|
|
||||||
padding: 0;
|
|
||||||
border-radius: 0;
|
|
||||||
border-style: none;
|
|
||||||
background-color: $menu_bg_color;
|
|
||||||
color: $menu_fg_color;
|
|
||||||
|
|
||||||
&:selected { background-color: $selected_bg_color; }
|
|
||||||
|
|
||||||
.button {
|
|
||||||
&, &:hover, &:active, &:active *:insensitive, &:insensitive {
|
|
||||||
border-width: 0;
|
|
||||||
background-color: transparent;
|
|
||||||
background-image: none;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.context-menu { font: initial; }
|
#toolbar-popup, .menu {
|
||||||
|
|
||||||
.menuitem {
|
|
||||||
GtkTreeMenu & {
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&, .menu & {
|
|
||||||
margin: $spacing;
|
|
||||||
padding: $spacing;
|
|
||||||
border: none;
|
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background-color: transparent;
|
|
||||||
background-image: none;
|
|
||||||
|
|
||||||
-GtkMenuItem-arrow-scaling: 0.5;
|
|
||||||
|
|
||||||
&:active, &:hover {
|
|
||||||
border: none;
|
|
||||||
background-color: $selected_bg_color;
|
|
||||||
background-image: none;
|
|
||||||
color: $selected_fg_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
& *:active, & *:hover { color: $selected_fg_color; }
|
|
||||||
|
|
||||||
&:insensitive, & *:insensitive { color: mix($menu_fg_color, $menu_bg_color, .5); }
|
|
||||||
}
|
|
||||||
|
|
||||||
&.check, &.radio {
|
|
||||||
&, &:focus, &:hover, &:insensitive { background-image: none; }
|
|
||||||
|
|
||||||
&, &:focus, &:hover, &:active, &:insensitive {
|
|
||||||
border-style: none;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.separator {
|
|
||||||
-GtkMenuItem-horizontal-padding: 0;
|
|
||||||
-GtkWidget-separator-height: 1;
|
|
||||||
|
|
||||||
border-style: none;
|
border-style: none;
|
||||||
color: shade($menu_bg_color, .9);
|
background-color: $menu_bg_color;
|
||||||
}
|
color: $menu_fg_color;
|
||||||
|
|
||||||
&.button {
|
&:selected { background-color: $selected_bg_color; }
|
||||||
&, &:focus, &:active, &:insensitive, &:active:insensitive {
|
|
||||||
background-color: transparent;
|
|
||||||
background-image: none;
|
|
||||||
border-color: transparent;
|
|
||||||
border-style: none;
|
|
||||||
box-shadow: none;
|
|
||||||
color: currentColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover, &:focus:hover, &:active:hover, &:selected {
|
|
||||||
background-color: $selected_bg_color;
|
|
||||||
background-image: none;
|
|
||||||
color: $selected_fg_color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
GtkCalendar {
|
|
||||||
&:inconsistent { color: mix($menu_fg_color, $menu_bg_color, .5); }
|
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
border-style: none;
|
&, &:hover, &:active, &:active *:insensitive, &:insensitive {
|
||||||
background-color: transparent;
|
border-width: 0;
|
||||||
background-image: none;
|
background-color: transparent;
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.accelerator {
|
.context-menu { font: initial; }
|
||||||
color: alpha($menu_fg_color, .6);
|
|
||||||
|
|
||||||
&:hover { color: alpha($selected_fg_color, .8); }
|
.menuitem {
|
||||||
|
GtkTreeMenu & {
|
||||||
|
padding: 0;
|
||||||
|
border-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
&:insensitive { color: alpha(mix($menu_fg_color, $menu_bg_color, .5), .4); }
|
&, .menu & {
|
||||||
|
margin: $spacing;
|
||||||
|
padding: $spacing;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
background-image: none;
|
||||||
|
|
||||||
|
-GtkMenuItem-arrow-scaling: 0.5;
|
||||||
|
|
||||||
|
&:active, &:hover {
|
||||||
|
border: none;
|
||||||
|
background-color: $selected_bg_color;
|
||||||
|
background-image: none;
|
||||||
|
color: $selected_fg_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
& *:active, & *:hover { color: $selected_fg_color; }
|
||||||
|
|
||||||
|
&:insensitive, & *:insensitive { color: mix($menu_fg_color, $menu_bg_color, .5); }
|
||||||
|
}
|
||||||
|
|
||||||
|
&.check, &.radio {
|
||||||
|
&, &:focus, &:hover, &:insensitive { background-image: none; }
|
||||||
|
|
||||||
|
&, &:focus, &:hover, &:active, &:insensitive {
|
||||||
|
border-style: none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.separator {
|
||||||
|
-GtkMenuItem-horizontal-padding: 0;
|
||||||
|
-GtkWidget-separator-height: 1;
|
||||||
|
|
||||||
|
border-style: none;
|
||||||
|
color: shade($menu_bg_color, .9);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.button {
|
||||||
|
&, &:focus, &:active, &:insensitive, &:active:insensitive {
|
||||||
|
background-color: transparent;
|
||||||
|
background-image: none;
|
||||||
|
border-color: transparent;
|
||||||
|
border-style: none;
|
||||||
|
box-shadow: none;
|
||||||
|
color: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover, &:focus:hover, &:active:hover, &:selected {
|
||||||
|
background-color: $selected_bg_color;
|
||||||
|
background-image: none;
|
||||||
|
color: $selected_fg_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
GtkCalendar {
|
||||||
|
&:inconsistent { color: mix($menu_fg_color, $menu_bg_color, .5); }
|
||||||
|
|
||||||
|
.button {
|
||||||
|
border-style: none;
|
||||||
|
background-color: transparent;
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.accelerator {
|
||||||
|
color: alpha($menu_fg_color, .6);
|
||||||
|
|
||||||
|
&:hover { color: alpha($selected_fg_color, .8); }
|
||||||
|
|
||||||
|
&:insensitive { color: alpha(mix($menu_fg_color, $menu_bg_color, .5), .4); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry { @include entry($menu_bg_color, $menu_fg_color); }
|
||||||
}
|
}
|
||||||
|
|
||||||
.entry { @include entry($menu_bg_color, $menu_fg_color); }
|
GtkModelMenuItem GtkBox GtkImage { padding-right: $spacing; }
|
||||||
}
|
}
|
||||||
|
|
||||||
GtkModelMenuItem GtkBox GtkImage { padding-right: $spacing; }
|
|
||||||
|
|
||||||
|
|
||||||
/*********
|
/*********
|
||||||
! Popover
|
! Popover
|
||||||
**********/
|
**********/
|
||||||
|
|
||||||
GtkPopover {
|
@include exports("popover") {
|
||||||
@include border($menu_bg_color);
|
GtkPopover {
|
||||||
|
@include border($menu_bg_color);
|
||||||
|
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
padding: $spacing;
|
padding: $spacing;
|
||||||
border-radius: $roundness;
|
border-radius: $roundness;
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
background-clip: border-box;
|
background-clip: border-box;
|
||||||
background-color: $menu_bg_color;
|
|
||||||
background-image: none;
|
|
||||||
color: $menu_fg_color;
|
|
||||||
box-shadow: 0 2px 3px alpha(black, .5);
|
|
||||||
|
|
||||||
&.background {
|
|
||||||
background-image: none;
|
|
||||||
background-color: $menu_bg_color;
|
background-color: $menu_bg_color;
|
||||||
|
background-image: none;
|
||||||
color: $menu_fg_color;
|
color: $menu_fg_color;
|
||||||
}
|
box-shadow: 0 2px 3px alpha(black, .5);
|
||||||
|
|
||||||
&:backdrop { box-shadow: none; }
|
&.background {
|
||||||
|
|
||||||
&.osd {
|
|
||||||
box-shadow: 0 2px 7px 3px alpha(black, .5);
|
|
||||||
|
|
||||||
> .toolbar .button {
|
|
||||||
border-radius: 0;
|
|
||||||
border-width: 0;
|
|
||||||
background-image: none;
|
background-image: none;
|
||||||
background-color: transparent;
|
background-color: $menu_bg_color;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> .list, > .view, > .toolbar { background-color: transparent; }
|
|
||||||
|
|
||||||
.separator {
|
|
||||||
border: 0;
|
|
||||||
background-color: transparent;
|
|
||||||
color: alpha($menu_bg_color, .5);
|
|
||||||
font-size: 80%;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
GtkModelButton.button {
|
|
||||||
&, &:focus, &:active, &:insensitive, &:active:insensitive {
|
|
||||||
&, &:backdrop {
|
|
||||||
background-color: transparent;
|
|
||||||
background-image: none;
|
|
||||||
border-color: transparent;
|
|
||||||
border-image: none;
|
|
||||||
border-style: none;
|
|
||||||
box-shadow: none;
|
|
||||||
color: $menu_fg_color;
|
color: $menu_fg_color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:backdrop { box-shadow: none; }
|
||||||
|
|
||||||
|
&.osd {
|
||||||
|
box-shadow: 0 2px 7px 3px alpha(black, .5);
|
||||||
|
|
||||||
|
> .toolbar .button {
|
||||||
|
border-radius: 0;
|
||||||
|
border-width: 0;
|
||||||
|
background-image: none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .list, > .view, > .toolbar { background-color: transparent; }
|
||||||
|
|
||||||
|
.separator {
|
||||||
|
border: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
color: alpha($menu_bg_color, .5);
|
||||||
|
font-size: 80%;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus:hover, &:active:hover, &:hover, &:selected {
|
GtkModelButton.button {
|
||||||
background-image: none;
|
&, &:focus, &:active, &:insensitive, &:active:insensitive {
|
||||||
background-color: $selected_bg_color;
|
&, &:backdrop {
|
||||||
color: $selected_fg_color;
|
background-color: transparent;
|
||||||
border: none;
|
background-image: none;
|
||||||
border-radius: 2px;
|
border-color: transparent;
|
||||||
|
border-image: none;
|
||||||
|
border-style: none;
|
||||||
|
box-shadow: none;
|
||||||
|
color: $menu_fg_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus:hover, &:active:hover, &:hover, &:selected {
|
||||||
|
background-image: none;
|
||||||
|
background-color: $selected_bg_color;
|
||||||
|
color: $selected_fg_color;
|
||||||
|
border: none;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,134 +1,137 @@
|
||||||
@import "functions";
|
@import "functions";
|
||||||
@import "global";
|
@import "global";
|
||||||
|
|
||||||
|
|
||||||
/**********
|
/**********
|
||||||
! Notebook
|
! Notebook
|
||||||
***********/
|
***********/
|
||||||
|
|
||||||
.notebook {
|
@include exports("notebook") {
|
||||||
padding: 0;
|
.notebook {
|
||||||
border-width: 1px 0 0 0;
|
padding: 0;
|
||||||
border-style: solid;
|
border-width: 1px 0 0 0;
|
||||||
border-color: border_normal($base_color);
|
border-style: solid;
|
||||||
border-radius: 0;
|
border-color: border_normal($base_color);
|
||||||
background-color: $base_color;
|
border-radius: 0;
|
||||||
background-image: none;
|
|
||||||
background-clip: border-box;
|
|
||||||
color: $text_color;
|
|
||||||
|
|
||||||
-GtkNotebook-initial-gap: 0;
|
|
||||||
-GtkNotebook-arrow-spacing: 5;
|
|
||||||
-GtkNotebook-tab-curvature: 0;
|
|
||||||
-GtkNotebook-tab-overlap: 1;
|
|
||||||
-GtkNotebook-has-tab-gap: false;
|
|
||||||
|
|
||||||
&.frame { border-width: 1px; }
|
|
||||||
|
|
||||||
&.header {
|
|
||||||
border-width: 0;
|
|
||||||
background-color: shade($base_color, 0.85);
|
|
||||||
|
|
||||||
&.frame {
|
|
||||||
border-color: shade($base_color, 0.75);
|
|
||||||
|
|
||||||
&.top { border-width: 1px 1px 0 1px; }
|
|
||||||
|
|
||||||
&.right { border-width: 1px 1px 1px 0; }
|
|
||||||
|
|
||||||
&.bottom { border-width: 0 1px 1px 1px; }
|
|
||||||
|
|
||||||
&.left { border-width: 1px 0 1px 1px; }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
GtkViewport {
|
|
||||||
border-width: 0;
|
|
||||||
background-color: $base_color;
|
background-color: $base_color;
|
||||||
color: $text_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
tab {
|
|
||||||
padding: $spacing ($spacing * 2);
|
|
||||||
border: 1px solid transparent;
|
|
||||||
background-color: transparent;
|
|
||||||
background-image: none;
|
background-image: none;
|
||||||
|
background-clip: border-box;
|
||||||
|
color: $text_color;
|
||||||
|
|
||||||
&:active {
|
-GtkNotebook-initial-gap: 0;
|
||||||
|
-GtkNotebook-arrow-spacing: 5;
|
||||||
|
-GtkNotebook-tab-curvature: 0;
|
||||||
|
-GtkNotebook-tab-overlap: 1;
|
||||||
|
-GtkNotebook-has-tab-gap: false;
|
||||||
|
|
||||||
|
&.frame { border-width: 1px; }
|
||||||
|
|
||||||
|
&.header {
|
||||||
|
border-width: 0;
|
||||||
|
background-color: shade($base_color, 0.85);
|
||||||
|
|
||||||
|
&.frame {
|
||||||
|
border-color: shade($base_color, 0.75);
|
||||||
|
|
||||||
|
&.top { border-width: 1px 1px 0 1px; }
|
||||||
|
|
||||||
|
&.right { border-width: 1px 1px 1px 0; }
|
||||||
|
|
||||||
|
&.bottom { border-width: 0 1px 1px 1px; }
|
||||||
|
|
||||||
|
&.left { border-width: 1px 0 1px 1px; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
GtkViewport {
|
||||||
|
border-width: 0;
|
||||||
|
background-color: $base_color;
|
||||||
|
color: $text_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
tab {
|
||||||
|
padding: $spacing ($spacing * 2);
|
||||||
|
border: 1px solid transparent;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: transparent;
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.top {
|
||||||
|
border-bottom-width: 2px;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
|
||||||
|
&:hover { border-bottom-color: alpha($selected_bg_color, 0.3); }
|
||||||
|
|
||||||
|
&:active { border-bottom-color: $selected_bg_color; }
|
||||||
|
}
|
||||||
|
|
||||||
|
&.right {
|
||||||
|
border-left-width: 2px;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
|
||||||
|
&:hover { border-left-color: alpha($selected_bg_color, 0.3); }
|
||||||
|
|
||||||
|
&:active { border-left-color: $selected_bg_color; }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
&.bottom {
|
||||||
|
border-top-width: 2px;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
|
||||||
|
&:hover { border-top-color: alpha($selected_bg_color, 0.3); }
|
||||||
|
|
||||||
|
&:active { border-top-color: $selected_bg_color; }
|
||||||
|
}
|
||||||
|
|
||||||
|
&.left {
|
||||||
|
border-right-width: 2px;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
|
||||||
|
&:hover { border-right-color: alpha($selected_bg_color, 0.3); }
|
||||||
|
|
||||||
|
&:active { border-right-color: $selected_bg_color; }
|
||||||
|
}
|
||||||
|
|
||||||
|
GtkLabel { color: mix($text_color, $base_color, 0.3); }
|
||||||
|
|
||||||
|
/* close button styling */
|
||||||
|
.button { @extend %close_button; }
|
||||||
}
|
}
|
||||||
|
|
||||||
&.top {
|
.prelight-page {
|
||||||
border-bottom-width: 2px;
|
&, GtkLabel { color: mix($text_color, $base_color, 0.15); }
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
|
|
||||||
&:hover { border-bottom-color: alpha($selected_bg_color, 0.3); }
|
|
||||||
|
|
||||||
&:active { border-bottom-color: $selected_bg_color; }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.right {
|
.active-page {
|
||||||
border-left-width: 2px;
|
&, GtkLabel { color: $text_color; }
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
|
|
||||||
&:hover { border-left-color: alpha($selected_bg_color, 0.3); }
|
|
||||||
|
|
||||||
&:active { border-left-color: $selected_bg_color; }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.reorderable-page {
|
||||||
|
&:hover {
|
||||||
|
background-color: shade($base_color, 0.85);
|
||||||
|
border-left: 0;
|
||||||
|
border-right: 0;
|
||||||
|
/* using box shadows instead of borders due to slanted edges */
|
||||||
|
box-shadow: inset 0 3px alpha(black, 0.03), inset 0 2px alpha(black, 0.03), inset 0 1px alpha(black, 0.03),
|
||||||
|
inset 1px 0 shade($base_color, 0.7), inset -1px 0 shade($base_color, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
&.bottom {
|
&:active {
|
||||||
border-top-width: 2px;
|
background-color: shade($base_color, 0.90);
|
||||||
border-top-right-radius: 0;
|
border-left: 0;
|
||||||
border-top-left-radius: 0;
|
border-right: 0;
|
||||||
|
box-shadow: inset 0 3px alpha(black, 0.03), inset 0 2px alpha(black, 0.03), inset 0 1px alpha(black, 0.03),
|
||||||
&:hover { border-top-color: alpha($selected_bg_color, 0.3); }
|
inset 1px 0 shade($base_color, 0.75), inset -1px 0 shade($base_color, 0.75);
|
||||||
|
}
|
||||||
&:active { border-top-color: $selected_bg_color; }
|
|
||||||
}
|
|
||||||
|
|
||||||
&.left {
|
|
||||||
border-right-width: 2px;
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
|
|
||||||
&:hover { border-right-color: alpha($selected_bg_color, 0.3); }
|
|
||||||
|
|
||||||
&:active { border-right-color: $selected_bg_color; }
|
|
||||||
}
|
|
||||||
|
|
||||||
GtkLabel { color: mix($text_color, $base_color, 0.3); }
|
|
||||||
|
|
||||||
/* close button styling */
|
|
||||||
.button { @extend %close_button; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.prelight-page {
|
|
||||||
&, GtkLabel { color: mix($text_color, $base_color, 0.15); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.active-page {
|
|
||||||
&, GtkLabel { color: $text_color; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.reorderable-page {
|
|
||||||
&:hover {
|
|
||||||
background-color: shade($base_color, 0.85);
|
|
||||||
border-left: 0;
|
|
||||||
border-right: 0;
|
|
||||||
/* using box shadows instead of borders due to slanted edges */
|
|
||||||
box-shadow: inset 0 3px alpha(black, 0.03), inset 0 2px alpha(black, 0.03), inset 0 1px alpha(black, 0.03),
|
|
||||||
inset 1px 0 shade($base_color, 0.7), inset -1px 0 shade($base_color, 0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
background-color: shade($base_color, 0.90);
|
|
||||||
border-left: 0;
|
|
||||||
border-right: 0;
|
|
||||||
box-shadow: inset 0 3px alpha(black, 0.03), inset 0 2px alpha(black, 0.03), inset 0 1px alpha(black, 0.03),
|
|
||||||
inset 1px 0 shade($base_color, 0.75), inset -1px 0 shade($base_color, 0.75);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,189 +6,191 @@
|
||||||
! Progress bars *
|
! Progress bars *
|
||||||
******************/
|
******************/
|
||||||
|
|
||||||
GtkProgressBar {
|
@include exports("progressbar") {
|
||||||
padding: 0;
|
GtkProgressBar {
|
||||||
border-radius: $roundness;
|
padding: 0;
|
||||||
font-size: smaller;
|
border-radius: $roundness;
|
||||||
color: alpha($fg_color, 0.6);
|
font-size: smaller;
|
||||||
|
color: alpha($fg_color, 0.6);
|
||||||
|
|
||||||
-GtkProgressBar-min-horizontal-bar-height: 12;
|
-GtkProgressBar-min-horizontal-bar-height: 12;
|
||||||
-GtkProgressBar-min-vertical-bar-width: 12;
|
-GtkProgressBar-min-vertical-bar-width: 12;
|
||||||
|
|
||||||
&.osd {
|
&.osd {
|
||||||
-GtkProgressBar-xspacing: 0;
|
-GtkProgressBar-xspacing: 0;
|
||||||
-GtkProgressBar-yspacing: 0;
|
-GtkProgressBar-yspacing: 0;
|
||||||
-GtkProgressBar-min-horizontal-bar-height: 3;
|
-GtkProgressBar-min-horizontal-bar-height: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.trough {
|
||||||
|
border: 1px solid alpha(border_normal($bg_color), 0.5);
|
||||||
|
background-color: shade($bg_color, 1.08);
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.trough {
|
.progressbar {
|
||||||
border: 1px solid alpha(border_normal($bg_color), 0.5);
|
|
||||||
background-color: shade($bg_color, 1.08);
|
|
||||||
background-image: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.progressbar {
|
|
||||||
background-image: none;
|
|
||||||
background-color: $selected_bg_color;
|
|
||||||
border-radius: 0;
|
|
||||||
box-shadow: none;
|
|
||||||
|
|
||||||
&.left {
|
|
||||||
border-top-left-radius: $roundness;
|
|
||||||
border-bottom-left-radius: $roundness;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.right {
|
|
||||||
border-top-right-radius: $roundness;
|
|
||||||
border-bottom-right-radius: $roundness;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.left.right { box-shadow: none; }
|
|
||||||
|
|
||||||
&.vertical {
|
|
||||||
background-image: none;
|
background-image: none;
|
||||||
background-color: $selected_bg_color;
|
background-color: $selected_bg_color;
|
||||||
|
border-radius: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
|
||||||
&.bottom {
|
&.left {
|
||||||
|
border-top-left-radius: $roundness;
|
||||||
border-bottom-left-radius: $roundness;
|
border-bottom-left-radius: $roundness;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.right {
|
||||||
|
border-top-right-radius: $roundness;
|
||||||
border-bottom-right-radius: $roundness;
|
border-bottom-right-radius: $roundness;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.top {
|
&.left.right { box-shadow: none; }
|
||||||
border-top-left-radius: $roundness;
|
|
||||||
border-top-right-radius: $roundness;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
GtkLevelBar {
|
&.vertical {
|
||||||
-GtkLevelBar-min-block-width: 34;
|
|
||||||
-GtkLevelBar-min-block-height: 3;
|
|
||||||
|
|
||||||
&.vertical {
|
|
||||||
-GtkLevelBar-min-block-width: 3;
|
|
||||||
-GtkLevelBar-min-block-height: 34;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.level-bar {
|
|
||||||
&.trough {
|
|
||||||
border: 1px solid alpha(border_normal($bg_color), 0.5);
|
|
||||||
background-color: shade($bg_color, 1.08);
|
|
||||||
background-image: none;
|
|
||||||
border-radius: $roundness;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.fill-block {
|
|
||||||
// FIXME: it would be nice to set make fill blocks bigger, but we'd need
|
|
||||||
// :nth-child working on discrete indicators
|
|
||||||
background-color: $selected_bg_color;
|
|
||||||
border-color: transparent;
|
|
||||||
border-radius: 0;
|
|
||||||
|
|
||||||
&.indicator-discrete {
|
|
||||||
&.horizontal { margin-right: 1px; }
|
|
||||||
&.vertical { margin-bottom: 1px; }
|
|
||||||
}
|
|
||||||
|
|
||||||
&.level-high {
|
|
||||||
background-color: $success_color;
|
|
||||||
border-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.level-low {
|
|
||||||
background-color: $warning_color;
|
|
||||||
border-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.empty-fill-block {
|
|
||||||
background-color: transparent;
|
|
||||||
border-color: transparent;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.scale {
|
|
||||||
-GtkRange-slider-width: 16;
|
|
||||||
-GtkRange-trough-border: 1;
|
|
||||||
-GtkScale-slider-length: 16;
|
|
||||||
|
|
||||||
padding: 0;
|
|
||||||
border-width: 1px;
|
|
||||||
border-radius: $roundness;
|
|
||||||
outline-offset: -1px;
|
|
||||||
|
|
||||||
|
|
||||||
&.slider {
|
|
||||||
border-radius: 8px;
|
|
||||||
background-color: shade($bg_color, 1.08);
|
|
||||||
background-image: none;
|
|
||||||
/* we will draw the border using box shadow for now */
|
|
||||||
box-shadow: inset 1px 0 border_normal($bg_color),
|
|
||||||
inset 0 1px border_normal($bg_color),
|
|
||||||
inset -1px 0 border_normal($bg_color),
|
|
||||||
inset 0 -1px border_normal($bg_color);
|
|
||||||
|
|
||||||
&:hover, &:focus {
|
|
||||||
box-shadow: inset 1px 0 border_focus($bg_color),
|
|
||||||
inset 0 1px border_focus($bg_color),
|
|
||||||
inset -1px 0 border_focus($bg_color),
|
|
||||||
inset 0 -1px border_focus($bg_color);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
box-shadow: inset 1px 0 border_active($bg_color),
|
|
||||||
inset 0 1px border_active($bg_color),
|
|
||||||
inset -1px 0 border_active($bg_color),
|
|
||||||
inset 0 -1px border_active($bg_color);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:insensitive {
|
|
||||||
background-color: shade($bg_color, 0.9);
|
|
||||||
background-image: none;
|
background-image: none;
|
||||||
box-shadow: inset 1px 0 border_insensitive($bg_color),
|
background-color: $selected_bg_color;
|
||||||
inset 0 1px border_insensitive($bg_color),
|
|
||||||
inset -1px 0 border_insensitive($bg_color),
|
|
||||||
inset 0 -1px border_insensitive($bg_color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.fine-tune {
|
&.bottom {
|
||||||
&, &.horizontal {
|
border-bottom-left-radius: $roundness;
|
||||||
&:active, &:active:hover {
|
border-bottom-right-radius: $roundness;
|
||||||
background-size: 50%;
|
}
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
&.top {
|
||||||
|
border-top-left-radius: $roundness;
|
||||||
|
border-top-right-radius: $roundness;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.mark { border-color: alpha(border_normal($bg_color), 0.5); }
|
GtkLevelBar {
|
||||||
|
-GtkLevelBar-min-block-width: 34;
|
||||||
|
-GtkLevelBar-min-block-height: 3;
|
||||||
|
|
||||||
|
&.vertical {
|
||||||
&.trough {
|
-GtkLevelBar-min-block-width: 3;
|
||||||
margin: 7px 0;
|
-GtkLevelBar-min-block-height: 34;
|
||||||
border: 1px solid alpha(border_normal($bg_color), 0.5);
|
}
|
||||||
border-radius: $roundness;
|
|
||||||
background-color: shade($bg_color, 1.08);
|
|
||||||
background-image: none;
|
|
||||||
|
|
||||||
&:insensitive { background-color: shade($bg_color, 0.9); }
|
|
||||||
|
|
||||||
&.vertical { margin: 0 7px; }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.highlight {
|
.level-bar {
|
||||||
&, &.left, &.bottom {
|
&.trough {
|
||||||
border-color: $selected_bg_color;
|
border: 1px solid alpha(border_normal($bg_color), 0.5);
|
||||||
background-color: $selected_bg_color;
|
background-color: shade($bg_color, 1.08);
|
||||||
background-image: none;
|
background-image: none;
|
||||||
|
border-radius: $roundness;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.fill-block {
|
||||||
|
// FIXME: it would be nice to set make fill blocks bigger, but we'd need
|
||||||
|
// :nth-child working on discrete indicators
|
||||||
|
background-color: $selected_bg_color;
|
||||||
|
border-color: transparent;
|
||||||
|
border-radius: 0;
|
||||||
|
|
||||||
|
&.indicator-discrete {
|
||||||
|
&.horizontal { margin-right: 1px; }
|
||||||
|
&.vertical { margin-bottom: 1px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
&.level-high {
|
||||||
|
background-color: $success_color;
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.level-low {
|
||||||
|
background-color: $warning_color;
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.empty-fill-block {
|
||||||
|
background-color: transparent;
|
||||||
|
border-color: transparent;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.scale {
|
||||||
|
-GtkRange-slider-width: 16;
|
||||||
|
-GtkRange-trough-border: 1;
|
||||||
|
-GtkScale-slider-length: 16;
|
||||||
|
|
||||||
|
padding: 0;
|
||||||
|
border-width: 1px;
|
||||||
|
border-radius: $roundness;
|
||||||
|
outline-offset: -1px;
|
||||||
|
|
||||||
|
|
||||||
|
&.slider {
|
||||||
|
border-radius: 8px;
|
||||||
|
background-color: shade($bg_color, 1.08);
|
||||||
|
background-image: none;
|
||||||
|
/* we will draw the border using box shadow for now */
|
||||||
|
box-shadow: inset 1px 0 border_normal($bg_color),
|
||||||
|
inset 0 1px border_normal($bg_color),
|
||||||
|
inset -1px 0 border_normal($bg_color),
|
||||||
|
inset 0 -1px border_normal($bg_color);
|
||||||
|
|
||||||
|
&:hover, &:focus {
|
||||||
|
box-shadow: inset 1px 0 border_focus($bg_color),
|
||||||
|
inset 0 1px border_focus($bg_color),
|
||||||
|
inset -1px 0 border_focus($bg_color),
|
||||||
|
inset 0 -1px border_focus($bg_color);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
box-shadow: inset 1px 0 border_active($bg_color),
|
||||||
|
inset 0 1px border_active($bg_color),
|
||||||
|
inset -1px 0 border_active($bg_color),
|
||||||
|
inset 0 -1px border_active($bg_color);
|
||||||
|
}
|
||||||
|
|
||||||
&:insensitive {
|
&:insensitive {
|
||||||
border-color: shade($bg_color, 0.7);
|
background-color: shade($bg_color, 0.9);
|
||||||
background-color: shade($bg_color, 0.8);
|
background-image: none;
|
||||||
|
box-shadow: inset 1px 0 border_insensitive($bg_color),
|
||||||
|
inset 0 1px border_insensitive($bg_color),
|
||||||
|
inset -1px 0 border_insensitive($bg_color),
|
||||||
|
inset 0 -1px border_insensitive($bg_color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.fine-tune {
|
||||||
|
&, &.horizontal {
|
||||||
|
&:active, &:active:hover {
|
||||||
|
background-size: 50%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mark { border-color: alpha(border_normal($bg_color), 0.5); }
|
||||||
|
|
||||||
|
|
||||||
|
&.trough {
|
||||||
|
margin: 7px 0;
|
||||||
|
border: 1px solid alpha(border_normal($bg_color), 0.5);
|
||||||
|
border-radius: $roundness;
|
||||||
|
background-color: shade($bg_color, 1.08);
|
||||||
|
background-image: none;
|
||||||
|
|
||||||
|
&:insensitive { background-color: shade($bg_color, 0.9); }
|
||||||
|
|
||||||
|
&.vertical { margin: 0 7px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
&.highlight {
|
||||||
|
&, &.left, &.bottom {
|
||||||
|
border-color: $selected_bg_color;
|
||||||
|
background-color: $selected_bg_color;
|
||||||
|
background-image: none;
|
||||||
|
|
||||||
|
&:insensitive {
|
||||||
|
border-color: shade($bg_color, 0.7);
|
||||||
|
background-color: shade($bg_color, 0.8);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,57 +5,59 @@
|
||||||
! Scrollbar
|
! Scrollbar
|
||||||
************/
|
************/
|
||||||
|
|
||||||
.scrollbar {
|
@include exports("scrollbar") {
|
||||||
border: none;
|
.scrollbar {
|
||||||
padding: 0;
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
&.button {
|
&.button {
|
||||||
&, &:active, &:active:hover {
|
&, &:active, &:active:hover {
|
||||||
border-width: 0;
|
border-width: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
background-image: none;
|
||||||
|
color: shade($bg_color, 0.6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.slider, &.slider.vertical {
|
||||||
|
border: 1px solid mix(shade($bg_color, 0.87), $fg_color, 0.21);
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background-color: transparent;
|
background-color: mix($bg_color, $fg_color, 0.21);
|
||||||
background-image: none;
|
|
||||||
color: shade($bg_color, 0.6);
|
&:hover {
|
||||||
|
border-color: mix(shade($bg_color, 0.87), $fg_color, 0.31);
|
||||||
|
background-color: mix($bg_color, $fg_color, 0.31);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
border-color: shade($selected_bg_color, 0.9);
|
||||||
|
background-color: $selected_bg_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.fine-tune:prelight:active {
|
||||||
|
border-width: 2px;
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.slider, &.slider.vertical {
|
.scrollbars-junction,
|
||||||
border: 1px solid mix(shade($bg_color, 0.87), $fg_color, 0.21);
|
.scrollbar.trough {
|
||||||
|
border: none;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background-color: mix($bg_color, $fg_color, 0.21);
|
background-color: $bg_color;
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
/* overlay scrollbar */
|
||||||
border-color: mix(shade($bg_color, 0.87), $fg_color, 0.31);
|
OsThumb, OsScrollbar {
|
||||||
background-color: mix($bg_color, $fg_color, 0.31);
|
color: shade($bg_color, 0.7);
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
&:selected { background-color: $selected_bg_color; }
|
||||||
border-color: shade($selected_bg_color, 0.9);
|
|
||||||
background-color: $selected_bg_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.fine-tune:prelight:active {
|
&:active { background-color: $selected_bg_color; }
|
||||||
border-width: 2px;
|
|
||||||
border-color: transparent;
|
&:insensitive { background-color: shade($bg_color, 0.9); }
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.scrollbars-junction,
|
|
||||||
.scrollbar.trough {
|
|
||||||
border: none;
|
|
||||||
border-radius: 0;
|
|
||||||
background-color: $bg_color;
|
|
||||||
background-image: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* overlay scrollbar */
|
|
||||||
OsThumb, OsScrollbar {
|
|
||||||
color: shade($bg_color, 0.7);
|
|
||||||
|
|
||||||
&:selected { background-color: $selected_bg_color; }
|
|
||||||
|
|
||||||
&:active { background-color: $selected_bg_color; }
|
|
||||||
|
|
||||||
&:insensitive { background-color: shade($bg_color, 0.9); }
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -6,69 +6,71 @@
|
||||||
! Sidebar
|
! Sidebar
|
||||||
**********/
|
**********/
|
||||||
|
|
||||||
.sidebar {
|
@include exports("sidebar") {
|
||||||
&, &.view, & .view, & GtkScrolledWindow {
|
.sidebar {
|
||||||
background-color: $bg_color;
|
&, &.view, & .view, & GtkScrolledWindow {
|
||||||
color: mix($fg_color, $bg_color, 0.1);
|
background-color: $bg_color;
|
||||||
|
color: mix($fg_color, $bg_color, 0.1);
|
||||||
|
|
||||||
&.separator {
|
&.separator {
|
||||||
&, &:hover, &:focus {
|
&, &:hover, &:focus {
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-color: shade($bg_color, 0.9);
|
border-color: shade($bg_color, 0.9);
|
||||||
color: shade($bg_color, 0.9);
|
color: shade($bg_color, 0.9);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
row, .view row {
|
row, .view row {
|
||||||
&:selected {
|
&:selected {
|
||||||
&, &:hover, &:focus {
|
&, &:hover, &:focus {
|
||||||
border: none;
|
border: none;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
background-color: $selected_bg_color;
|
background-color: $selected_bg_color;
|
||||||
color: $selected_fg_color;
|
color: $selected_fg_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:prelight {
|
||||||
|
border: none;
|
||||||
|
background-image: none;
|
||||||
|
background-color: shade($selected_bg_color, 1.05);
|
||||||
|
color: $selected_fg_color;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:prelight {
|
&:prelight {
|
||||||
border: none;
|
border: none;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
background-color: shade($selected_bg_color, 1.05);
|
background-color: shade($bg_color, 0.95);
|
||||||
color: $selected_fg_color;
|
color: $fg_color;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&:prelight {
|
|
||||||
border: none;
|
|
||||||
background-image: none;
|
|
||||||
background-color: shade($bg_color, 0.95);
|
|
||||||
color: $fg_color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.frame { border-width: 0; }
|
|
||||||
|
|
||||||
GtkAssistant & {
|
|
||||||
padding: 4px;
|
|
||||||
border-width: 0 1px 0 0;
|
|
||||||
border-style: solid;
|
|
||||||
border-right-color: border_normal($bg_color);
|
|
||||||
border-radius: 0;
|
|
||||||
background-color: $bg_color;
|
|
||||||
color: mix($fg_color, $bg_color, 0.1);
|
|
||||||
|
|
||||||
&:dir(ltr) { border-width: 0 1px 0 0; }
|
|
||||||
&:dir(rtl) { border-width: 0 0 0 1px; }
|
|
||||||
|
|
||||||
GtkLabel {
|
|
||||||
padding: $spacing ($spacing * 2);
|
|
||||||
|
|
||||||
&.highlight { background-color: mix($bg_color, $fg_color, 0.80); }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.csd .sidebar { border-top-style: none; }
|
.frame { border-width: 0; }
|
||||||
|
|
||||||
.highlight { font: bold; }
|
GtkAssistant & {
|
||||||
|
padding: 4px;
|
||||||
|
border-width: 0 1px 0 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-right-color: border_normal($bg_color);
|
||||||
|
border-radius: 0;
|
||||||
|
background-color: $bg_color;
|
||||||
|
color: mix($fg_color, $bg_color, 0.1);
|
||||||
|
|
||||||
|
&:dir(ltr) { border-width: 0 1px 0 0; }
|
||||||
|
&:dir(rtl) { border-width: 0 0 0 1px; }
|
||||||
|
|
||||||
|
GtkLabel {
|
||||||
|
padding: $spacing ($spacing * 2);
|
||||||
|
|
||||||
|
&.highlight { background-color: mix($bg_color, $fg_color, 0.80); }
|
||||||
|
}
|
||||||
|
|
||||||
|
&.csd .sidebar { border-top-style: none; }
|
||||||
|
|
||||||
|
.highlight { font: bold; }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -77,42 +79,47 @@
|
||||||
! Pane separator
|
! Pane separator
|
||||||
****************/
|
****************/
|
||||||
|
|
||||||
.pane-separator {
|
@include exports("paneseparator") {
|
||||||
&, &.horizontal {
|
.pane-separator {
|
||||||
background-image: linear-gradient(to bottom,
|
background-color: $bg_color;
|
||||||
shade($bg_color, 0.8) 0%,
|
color: transparent;
|
||||||
shade($bg_color, 0.8) 20%,
|
|
||||||
transparent 20%,
|
|
||||||
transparent 45%,
|
|
||||||
shade($bg_color, 0.8) 45%,
|
|
||||||
shade($bg_color, 0.8) 55%,
|
|
||||||
transparent 55%,
|
|
||||||
transparent 80%,
|
|
||||||
shade($bg_color, 0.8) 80%,
|
|
||||||
shade($bg_color, 0.8)
|
|
||||||
);
|
|
||||||
|
|
||||||
background-size: 4px 10px;
|
&, &.horizontal {
|
||||||
background-repeat: no-repeat;
|
background-image: linear-gradient(to bottom,
|
||||||
background-position: center center;
|
shade($bg_color, 0.8) 0%,
|
||||||
}
|
shade($bg_color, 0.8) 20%,
|
||||||
|
transparent 20%,
|
||||||
|
transparent 45%,
|
||||||
|
shade($bg_color, 0.8) 45%,
|
||||||
|
shade($bg_color, 0.8) 55%,
|
||||||
|
transparent 55%,
|
||||||
|
transparent 80%,
|
||||||
|
shade($bg_color, 0.8) 80%,
|
||||||
|
shade($bg_color, 0.8)
|
||||||
|
);
|
||||||
|
|
||||||
&.vertical {
|
background-size: 4px 10px;
|
||||||
background-image: linear-gradient(to right,
|
background-repeat: no-repeat;
|
||||||
shade($bg_color, 0.8) 0%,
|
background-position: center center;
|
||||||
shade($bg_color, 0.8) 20%,
|
}
|
||||||
transparent 20%,
|
|
||||||
transparent 45%,
|
|
||||||
shade($bg_color, 0.8) 45%,
|
|
||||||
shade($bg_color, 0.8) 55%,
|
|
||||||
transparent 55%,
|
|
||||||
transparent 80%,
|
|
||||||
shade($bg_color, 0.8) 80%,
|
|
||||||
shade($bg_color, 0.8)
|
|
||||||
);
|
|
||||||
|
|
||||||
background-size: 10px 4px;
|
&.vertical {
|
||||||
background-repeat: no-repeat;
|
background-image: linear-gradient(to right,
|
||||||
background-position: center center;
|
shade($bg_color, 0.8) 0%,
|
||||||
|
shade($bg_color, 0.8) 20%,
|
||||||
|
transparent 20%,
|
||||||
|
transparent 45%,
|
||||||
|
shade($bg_color, 0.8) 45%,
|
||||||
|
shade($bg_color, 0.8) 55%,
|
||||||
|
transparent 55%,
|
||||||
|
transparent 80%,
|
||||||
|
shade($bg_color, 0.8) 80%,
|
||||||
|
shade($bg_color, 0.8)
|
||||||
|
);
|
||||||
|
|
||||||
|
background-size: 10px 4px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center center;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,21 +6,23 @@
|
||||||
! Spinner animation
|
! Spinner animation
|
||||||
********************/
|
********************/
|
||||||
|
|
||||||
@keyframes spin {
|
@include exports("spinner") {
|
||||||
to { -gtk-icon-transform: rotate(1turn); }
|
@keyframes spin {
|
||||||
}
|
to { -gtk-icon-transform: rotate(1turn); }
|
||||||
|
}
|
||||||
|
|
||||||
.spinner {
|
.spinner {
|
||||||
background-image: none;
|
background-image: none;
|
||||||
background-color: $selected_bg_color;
|
background-color: $selected_bg_color;
|
||||||
opacity: 0; // non spinning spinner makes no sense
|
opacity: 0; // non spinning spinner makes no sense
|
||||||
|
|
||||||
-gtk-icon-source: -gtk-icontheme("process-working-symbolic");
|
-gtk-icon-source: -gtk-icontheme("process-working-symbolic");
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
animation: spin 1s linear infinite;
|
animation: spin 1s linear infinite;
|
||||||
|
|
||||||
&:insensitive { opacity: 0.5; }
|
&:insensitive { opacity: 0.5; }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,11 +6,6 @@
|
||||||
! Check and Radio items
|
! Check and Radio items
|
||||||
************************/
|
************************/
|
||||||
|
|
||||||
* {
|
|
||||||
-GtkCheckButton-indicator-size: 16;
|
|
||||||
-GtkCheckMenuItem-indicator-size: 14;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin toggle($type) {
|
@mixin toggle($type) {
|
||||||
background-image: none;
|
background-image: none;
|
||||||
|
|
||||||
|
|
@ -53,14 +48,21 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.radio { @include toggle("radio"); }
|
@include exports("checkradio") {
|
||||||
|
* {
|
||||||
|
-GtkCheckButton-indicator-size: 16;
|
||||||
|
-GtkCheckMenuItem-indicator-size: 14;
|
||||||
|
}
|
||||||
|
|
||||||
.check { @include toggle("checkbox"); }
|
.radio { @include toggle("radio"); }
|
||||||
|
|
||||||
GtkIconView.content-view.cell.check {
|
.check { @include toggle("checkbox"); }
|
||||||
-gtk-icon-source: url("assets/grid-selection-unchecked.svg");
|
|
||||||
|
|
||||||
&:active { -gtk-icon-source: url("assets/grid-selection-checked.svg"); }
|
GtkIconView.content-view.cell.check {
|
||||||
|
-gtk-icon-source: url("assets/grid-selection-unchecked.svg");
|
||||||
|
|
||||||
|
&:active { -gtk-icon-source: url("assets/grid-selection-checked.svg"); }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -68,37 +70,39 @@ GtkIconView.content-view.cell.check {
|
||||||
! Switch
|
! Switch
|
||||||
*********/
|
*********/
|
||||||
|
|
||||||
GtkSwitch {
|
@include exports("switch") {
|
||||||
padding: 0;
|
GtkSwitch {
|
||||||
border-radius: $roundness;
|
padding: 0;
|
||||||
font: bold condensed;
|
border-radius: $roundness;
|
||||||
outline-offset: -4px;
|
font: bold condensed;
|
||||||
|
outline-offset: -4px;
|
||||||
|
|
||||||
&.slider {
|
&.slider {
|
||||||
border: 1px solid shade($bg_color, 0.8);
|
border: 1px solid shade($bg_color, 0.8);
|
||||||
background-color: shade($bg_color, 1.08);
|
background-color: shade($bg_color, 1.08);
|
||||||
|
|
||||||
&:insensitive {
|
&:insensitive {
|
||||||
border-color: shade($bg_color, 0.85);
|
border-color: shade($bg_color, 0.85);
|
||||||
background-color: shade($bg_color, 0.9);
|
background-color: shade($bg_color, 0.9);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&.trough {
|
|
||||||
border-color: shade($bg_color, 0.8);
|
|
||||||
background-color: shade($bg_color, 0.95);
|
|
||||||
color: $fg_color;
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
border-color: shade($selected_bg_color, 0.9);
|
|
||||||
background-color: $selected_bg_color;
|
|
||||||
color: $selected_fg_color;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:insensitive {
|
&.trough {
|
||||||
border-color: shade($bg_color, 0.85);
|
border-color: shade($bg_color, 0.8);
|
||||||
background-color: shade($bg_color, 0.9);
|
background-color: shade($bg_color, 0.95);
|
||||||
color: mix($fg_color, $bg_color, 0.5);
|
color: $fg_color;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
border-color: shade($selected_bg_color, 0.9);
|
||||||
|
background-color: $selected_bg_color;
|
||||||
|
color: $selected_fg_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:insensitive {
|
||||||
|
border-color: shade($bg_color, 0.85);
|
||||||
|
background-color: shade($bg_color, 0.9);
|
||||||
|
color: mix($fg_color, $bg_color, 0.5);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -49,67 +49,69 @@
|
||||||
.menubar { -GtkToolbar-button-relief: normal; }
|
.menubar { -GtkToolbar-button-relief: normal; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar {
|
@include exports("toolbar") {
|
||||||
@include toolbar($bg_color, $fg_color);
|
.toolbar {
|
||||||
|
@include toolbar($bg_color, $fg_color);
|
||||||
|
|
||||||
border-style: none;
|
border-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-bar {
|
.header-bar {
|
||||||
@include toolbar($titlebar_bg_color, $titlebar_fg_color);
|
@include toolbar($titlebar_bg_color, $titlebar_fg_color);
|
||||||
|
|
||||||
border-width: 0 0 1px 0;
|
border-width: 0 0 1px 0;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
.titlebar {
|
.titlebar {
|
||||||
@include linear-gradient($titlebar_bg_color);
|
|
||||||
|
|
||||||
border-radius: $roundness $roundness 0 0;
|
|
||||||
color: mix($titlebar_fg_color, $titlebar_bg_color, .1);
|
|
||||||
|
|
||||||
&:backdrop {
|
|
||||||
@include linear-gradient($titlebar_bg_color);
|
@include linear-gradient($titlebar_bg_color);
|
||||||
|
|
||||||
color: mix($titlebar_fg_color, $titlebar_bg_color, .6);
|
border-radius: $roundness $roundness 0 0;
|
||||||
text-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.default-decoration {
|
|
||||||
border: none;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tiled &, .maximized & { border-radius: 0; }
|
|
||||||
|
|
||||||
.title { font: bold; }
|
|
||||||
|
|
||||||
.titlebutton {
|
|
||||||
padding: $spacing;
|
|
||||||
border: none;
|
|
||||||
background-image: none;
|
|
||||||
background-color: transparent;
|
|
||||||
color: mix($titlebar_fg_color, $titlebar_bg_color, .1);
|
color: mix($titlebar_fg_color, $titlebar_bg_color, .1);
|
||||||
box-shadow: none;
|
|
||||||
|
|
||||||
&:hover, &:hover:focus {
|
|
||||||
background-image: none;
|
|
||||||
background-color: transparent;
|
|
||||||
color: $selected_bg_color;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active, &:active:hover {
|
|
||||||
background-image: none;
|
|
||||||
background-color: transparent;
|
|
||||||
color: darken($selected_bg_color, 10%);
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:backdrop {
|
&:backdrop {
|
||||||
background: none;
|
@include linear-gradient($titlebar_bg_color);
|
||||||
|
|
||||||
color: mix($titlebar_fg_color, $titlebar_bg_color, .6);
|
color: mix($titlebar_fg_color, $titlebar_bg_color, .6);
|
||||||
icon-shadow: none;
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.default-decoration {
|
||||||
|
border: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tiled &, .maximized & { border-radius: 0; }
|
||||||
|
|
||||||
|
.title { font: bold; }
|
||||||
|
|
||||||
|
.titlebutton {
|
||||||
|
padding: $spacing;
|
||||||
|
border: none;
|
||||||
|
background-image: none;
|
||||||
|
background-color: transparent;
|
||||||
|
color: mix($titlebar_fg_color, $titlebar_bg_color, .1);
|
||||||
|
box-shadow: none;
|
||||||
|
|
||||||
|
&:hover, &:hover:focus {
|
||||||
|
background-image: none;
|
||||||
|
background-color: transparent;
|
||||||
|
color: $selected_bg_color;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active, &:active:hover {
|
||||||
|
background-image: none;
|
||||||
|
background-color: transparent;
|
||||||
|
color: darken($selected_bg_color, 10%);
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:backdrop {
|
||||||
|
background: none;
|
||||||
|
color: mix($titlebar_fg_color, $titlebar_bg_color, .6);
|
||||||
|
icon-shadow: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,125 +6,128 @@
|
||||||
! Generic views
|
! Generic views
|
||||||
****************/
|
****************/
|
||||||
|
|
||||||
.view {
|
@include exports("view") {
|
||||||
color: $text_color;
|
.view {
|
||||||
background-color: $base_color;
|
color: $text_color;
|
||||||
|
|
||||||
&:insensitive, &:insensitive:insensitive {
|
|
||||||
background-color: shade($base_color, 0.9);
|
|
||||||
color: mix($text_color, $base_color, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:selected, &:selected:focus { @extend %selected_items; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.cell {
|
|
||||||
border-width: 0;
|
|
||||||
border-radius: 0;
|
|
||||||
|
|
||||||
&:selected, &:selected:focus {
|
|
||||||
background-color: $selected_bg_color;
|
|
||||||
color: $selected_fg_color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
row {
|
|
||||||
&:selected {
|
|
||||||
&, &:hover, &:focus {
|
|
||||||
-GtkWidget-focus-padding: 1;
|
|
||||||
-GtkWidget-focus-line-width: 0;
|
|
||||||
|
|
||||||
border: none;
|
|
||||||
background-color: $selected_bg_color;
|
|
||||||
background-image: none;
|
|
||||||
color: $selected_fg_color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-view {
|
|
||||||
&.view {
|
|
||||||
background-color: $base_color;
|
background-color: $base_color;
|
||||||
|
|
||||||
&:prelight { background-color: alpha($selected_bg_color, 0.6); }
|
&:insensitive, &:insensitive:insensitive {
|
||||||
|
background-color: shade($base_color, 0.9);
|
||||||
&:selected, &:active { background-color: $selected_bg_color; }
|
color: mix($text_color, $base_color, 0.5);
|
||||||
|
|
||||||
&:insensitive { background-color: shade($base_color, 0.9); }
|
|
||||||
|
|
||||||
&.check {
|
|
||||||
&, &:active, &:prelight, &:insensitive, &:selected { background-color: transparent; }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:selected, &:selected:focus { @extend %selected_items; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle {
|
.cell {
|
||||||
font: smaller;
|
border-width: 0;
|
||||||
padding: 0 12px;
|
border-radius: 0;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
GtkIconView {
|
|
||||||
&.content-view.check { @extend .content-view.check; }
|
|
||||||
|
|
||||||
&.view.cell {
|
|
||||||
&:selected, &:selected:focus {
|
&:selected, &:selected:focus {
|
||||||
border: none;
|
|
||||||
border-radius: 2px;
|
|
||||||
background-image: none;
|
|
||||||
background-color: $selected_bg_color;
|
background-color: $selected_bg_color;
|
||||||
color: $selected_fg_color;
|
color: $selected_fg_color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.dim-label {
|
row {
|
||||||
&, &.view { color: alpha(currentColor, 0.5); }
|
&:selected {
|
||||||
}
|
&, &:hover, &:focus {
|
||||||
|
-GtkWidget-focus-padding: 1;
|
||||||
|
-GtkWidget-focus-line-width: 0;
|
||||||
|
|
||||||
.dnd { border: 1px solid $selected_bg_color; }
|
border: none;
|
||||||
|
background-color: $selected_bg_color;
|
||||||
|
background-image: none;
|
||||||
|
color: $selected_fg_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.grip { background-color: transparent; }
|
.content-view {
|
||||||
|
&.view {
|
||||||
|
background-color: $base_color;
|
||||||
|
|
||||||
.arrow { color: alpha(currentColor, 0.7); }
|
&:prelight { background-color: alpha($selected_bg_color, 0.6); }
|
||||||
|
|
||||||
.rubberband {
|
&:selected, &:active { background-color: $selected_bg_color; }
|
||||||
&, &.view, &.content-view.view {
|
|
||||||
border: 1px solid $selected_bg_color;
|
&:insensitive { background-color: shade($base_color, 0.9); }
|
||||||
border-radius: 0;
|
|
||||||
background-color: alpha($selected_bg_color, 0.3);
|
&.check {
|
||||||
|
&, &:active, &:prelight, &:insensitive, &:selected { background-color: transparent; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font: smaller;
|
||||||
|
padding: 0 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
GtkIconView {
|
||||||
|
&.content-view.check { @extend .content-view.check; }
|
||||||
|
|
||||||
|
&.view.cell {
|
||||||
|
&:selected, &:selected:focus {
|
||||||
|
border: none;
|
||||||
|
border-radius: 2px;
|
||||||
|
background-image: none;
|
||||||
|
background-color: $selected_bg_color;
|
||||||
|
color: $selected_fg_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dim-label {
|
||||||
|
&, &.view { color: alpha(currentColor, 0.5); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.dnd { border: 1px solid $selected_bg_color; }
|
||||||
|
|
||||||
|
.grip { background-color: transparent; }
|
||||||
|
|
||||||
|
.arrow { color: alpha(currentColor, 0.7); }
|
||||||
|
|
||||||
|
.rubberband {
|
||||||
|
&, &.view, &.content-view.view {
|
||||||
|
border: 1px solid $selected_bg_color;
|
||||||
|
border-radius: 0;
|
||||||
|
background-color: alpha($selected_bg_color, 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* used by GtkScrolledWindow, shown when content is touch-dragged past boundaries. */
|
||||||
|
.overshoot { background-color: alpha($selected_bg_color, 0.3); }
|
||||||
|
|
||||||
|
GdMainIconView.content-view { -GdMainIconView-icon-size: 40; }
|
||||||
|
|
||||||
|
/* this will get overridden by .view, needed by gedit line numbers */
|
||||||
|
GtkTextView { background-color: mix($bg_color, $base_color, 0.50); }
|
||||||
|
|
||||||
|
GtkDrawingArea, GtkHTML {
|
||||||
|
@extend .view;
|
||||||
|
|
||||||
|
&:insensitive { background-color: shade($base_color, 0.9); }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* used by GtkScrolledWindow, shown when content is touch-dragged past boundaries. */
|
|
||||||
.overshoot { background-color: alpha($selected_bg_color, 0.3); }
|
|
||||||
|
|
||||||
GdMainIconView.content-view { -GdMainIconView-icon-size: 40; }
|
|
||||||
|
|
||||||
/* this will get overridden by .view, needed by gedit line numbers */
|
|
||||||
GtkTextView { background-color: mix($bg_color, $base_color, 0.50); }
|
|
||||||
|
|
||||||
GtkDrawingArea, GtkHTML {
|
|
||||||
@extend .view;
|
|
||||||
|
|
||||||
&:insensitive { background-color: shade($base_color, 0.9); }
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/************
|
/************
|
||||||
! Treeview *
|
! Treeview *
|
||||||
*************/
|
*************/
|
||||||
|
|
||||||
GtkTreeView {
|
@include exports("treeview") {
|
||||||
-GtkTreeView-vertical-separator: 0;
|
GtkTreeView {
|
||||||
|
-GtkTreeView-vertical-separator: 0;
|
||||||
|
|
||||||
outline-offset: -1px;
|
outline-offset: -1px;
|
||||||
|
|
||||||
&.dnd { border: 1px solid $selected_bg_color; }
|
&.dnd { border: 1px solid $selected_bg_color; }
|
||||||
|
|
||||||
.entry {
|
.entry {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background-color: $base_color;
|
background-color: $base_color;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -133,28 +136,30 @@ GtkTreeView {
|
||||||
! Column view headers
|
! Column view headers
|
||||||
**********************/
|
**********************/
|
||||||
|
|
||||||
column-header {
|
@include exports("columnheader") {
|
||||||
.button {
|
column-header {
|
||||||
&, &:active {
|
.button {
|
||||||
border-width: 0 1px 1px 0;
|
&, &:active {
|
||||||
border-radius: 0;
|
border-width: 0 1px 1px 0;
|
||||||
}
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
&, &:active, &:focus, &:active:focus {
|
&, &:active, &:focus, &:active:focus {
|
||||||
border-color: shade($base_color, 0.9);
|
border-color: shade($base_color, 0.9);
|
||||||
border-bottom-color: shade($base_color, 0.8);
|
border-bottom-color: shade($base_color, 0.8);
|
||||||
background-color: shade($base_color, 0.97);
|
background-color: shade($base_color, 0.97);
|
||||||
background-image: none;
|
background-image: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover, &:active:hover, &:hover:focus, &:active:hover:focus {
|
&:hover, &:active:hover, &:hover:focus, &:active:hover:focus {
|
||||||
border-color: shade($base_color, 0.9);
|
border-color: shade($base_color, 0.9);
|
||||||
border-bottom-color: shade($base_color, 0.8);
|
border-bottom-color: shade($base_color, 0.8);
|
||||||
background-color: shade($base_color, 0.99);
|
background-color: shade($base_color, 0.99);
|
||||||
background-image: none;
|
background-image: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child .button { border-width: 0 0 1px 0; }
|
&:last-child .button { border-width: 0 0 1px 0; }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -163,13 +168,15 @@ column-header {
|
||||||
! Frames *
|
! Frames *
|
||||||
***********/
|
***********/
|
||||||
|
|
||||||
.frame { border: none; }
|
@include exports("frame") {
|
||||||
|
.frame { border: none; }
|
||||||
|
|
||||||
GtkScrolledWindow {
|
GtkScrolledWindow {
|
||||||
&.frame { border: 1px solid border_normal($bg_color); }
|
&.frame { border: 1px solid border_normal($bg_color); }
|
||||||
|
|
||||||
/* avoid double borders when a viewport is packed into a GtkScrolledWindow */
|
/* avoid double borders when a viewport is packed into a GtkScrolledWindow */
|
||||||
GtkViewport.frame { border: none; }
|
GtkViewport.frame { border: none; }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -177,23 +184,25 @@ GtkScrolledWindow {
|
||||||
! Expanders *
|
! Expanders *
|
||||||
**************/
|
**************/
|
||||||
|
|
||||||
GtkExpander {
|
@include exports("expander") {
|
||||||
padding: $spacing;
|
GtkExpander {
|
||||||
outline-offset: 1px;
|
padding: $spacing;
|
||||||
}
|
outline-offset: 1px;
|
||||||
|
|
||||||
.expander {
|
|
||||||
color: alpha(currentColor, 0.7);
|
|
||||||
border: alpha(currentColor, 0.7);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: alpha(currentColor, 0.8);
|
|
||||||
border-color: alpha(currentColor, 0.8);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
.expander {
|
||||||
color: alpha(currentColor, 0.9);
|
color: alpha(currentColor, 0.7);
|
||||||
border-color: alpha(currentColor, 0.9);
|
border: alpha(currentColor, 0.7);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: alpha(currentColor, 0.8);
|
||||||
|
border-color: alpha(currentColor, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
color: alpha(currentColor, 0.9);
|
||||||
|
border-color: alpha(currentColor, 0.9);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -202,22 +211,14 @@ GtkExpander {
|
||||||
! Symbolic images *
|
! Symbolic images *
|
||||||
********************/
|
********************/
|
||||||
|
|
||||||
.image {
|
@include exports("symbolicimage") {
|
||||||
color: alpha(currentColor, 0.5);
|
.image {
|
||||||
|
color: alpha(currentColor, 0.5);
|
||||||
|
|
||||||
&:hover { color: alpha(currentColor, 0.9); }
|
&:hover { color: alpha(currentColor, 0.9); }
|
||||||
|
|
||||||
&:selected, &:selected:hover { color: $selected_fg_color; }
|
&:selected, &:selected:hover { color: $selected_fg_color; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/******************
|
|
||||||
! Pane separator *
|
|
||||||
*******************/
|
|
||||||
|
|
||||||
.pane-separator {
|
|
||||||
background-color: $bg_color;
|
|
||||||
color: transparent;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -225,43 +226,45 @@ GtkExpander {
|
||||||
! Floating bar *
|
! Floating bar *
|
||||||
*****************/
|
*****************/
|
||||||
|
|
||||||
.floating-bar {
|
@include exports("floatingbar") {
|
||||||
border: 1px solid border_normal($bg_color);
|
.floating-bar {
|
||||||
border-radius: $roundness;
|
border: 1px solid border_normal($bg_color);
|
||||||
background-color: $bg_color;
|
border-radius: $roundness;
|
||||||
background-image: none;
|
background-color: $bg_color;
|
||||||
color: $fg_color;
|
|
||||||
|
|
||||||
&.top {
|
|
||||||
border-top-width: 0;
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.right {
|
|
||||||
border-right-width: 0;
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.bottom {
|
|
||||||
border-bottom-width: 0;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.left {
|
|
||||||
border-left-width: 0;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
|
||||||
-GtkButton-image-spacing: 0;
|
|
||||||
-GtkButton-inner-border: 0;
|
|
||||||
|
|
||||||
border: none;
|
|
||||||
background-color: transparent;
|
|
||||||
background-image: none;
|
background-image: none;
|
||||||
|
color: $fg_color;
|
||||||
|
|
||||||
|
&.top {
|
||||||
|
border-top-width: 0;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.right {
|
||||||
|
border-right-width: 0;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.bottom {
|
||||||
|
border-bottom-width: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.left {
|
||||||
|
border-left-width: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
-GtkButton-image-spacing: 0;
|
||||||
|
-GtkButton-inner-border: 0;
|
||||||
|
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,38 +6,40 @@
|
||||||
! Window frame
|
! Window frame
|
||||||
***************/
|
***************/
|
||||||
|
|
||||||
.window-frame {
|
@include exports("window") {
|
||||||
border: none;
|
.window-frame {
|
||||||
border-radius: $roundness $roundness 0 0;
|
border: none;
|
||||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23),
|
border-radius: $roundness $roundness 0 0;
|
||||||
0 0 0 1px mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.21);
|
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23),
|
||||||
|
0 0 0 1px mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.21);
|
||||||
|
|
||||||
/* this is used for the resize cursor area */
|
/* this is used for the resize cursor area */
|
||||||
margin: $spacing * 3;
|
margin: $spacing * 3;
|
||||||
|
|
||||||
&:backdrop {
|
&:backdrop {
|
||||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24),
|
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24),
|
||||||
0 0 0 1px mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.12);
|
0 0 0 1px mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.12);
|
||||||
}
|
|
||||||
|
|
||||||
&.tiled { border-radius: 0; }
|
|
||||||
|
|
||||||
&.csd {
|
|
||||||
&.popup {
|
|
||||||
border-radius: 0;
|
|
||||||
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23),
|
|
||||||
0 0 0 1px mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.21);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.tooltip {
|
&.tiled { border-radius: 0; }
|
||||||
border-radius: $roundness;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.message-dialog {
|
&.csd {
|
||||||
border-radius: $roundness;
|
&.popup {
|
||||||
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23),
|
border-radius: 0;
|
||||||
0 0 0 1px mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.21);
|
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23),
|
||||||
|
0 0 0 1px mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.21);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.tooltip {
|
||||||
|
border-radius: $roundness;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.message-dialog {
|
||||||
|
border-radius: $roundness;
|
||||||
|
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23),
|
||||||
|
0 0 0 1px mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.21);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -17,78 +17,6 @@
|
||||||
@import "notebook";
|
@import "notebook";
|
||||||
@import "scrollbar";
|
@import "scrollbar";
|
||||||
|
|
||||||
|
|
||||||
/*************
|
|
||||||
* scrollbar *
|
|
||||||
*************/
|
|
||||||
.scrollbar {
|
|
||||||
border-width: 1px;
|
|
||||||
border-style: solid;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scrollbars-junction,
|
|
||||||
.scrollbar.trough {
|
|
||||||
border-width: 0;
|
|
||||||
border-radius: 0;
|
|
||||||
background-color: $bg_color;
|
|
||||||
background-image: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scrollbar.button,
|
|
||||||
.scrollbar.button:active,
|
|
||||||
.scrollbar.button:active:hover {
|
|
||||||
border-width: 0;
|
|
||||||
border-radius: 0;
|
|
||||||
background-color: transparent;
|
|
||||||
background-image: none;
|
|
||||||
color: shade($bg_color, 0.6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.scrollbar.slider {
|
|
||||||
border-width: 1px;
|
|
||||||
border-color: mix(shade($bg_color, 0.87), $fg_color, 0.21);
|
|
||||||
border-radius: 0;
|
|
||||||
background-color: mix($bg_color, $fg_color, 0.21);
|
|
||||||
}
|
|
||||||
|
|
||||||
.scrollbar.slider:hover,
|
|
||||||
.scrollbar.slider.vertical:hover {
|
|
||||||
border-color: mix(shade($bg_color, 0.87), $fg_color, 0.31);
|
|
||||||
background-color: mix($bg_color, $fg_color, 0.31);
|
|
||||||
}
|
|
||||||
|
|
||||||
.scrollbar.slider:active,
|
|
||||||
.scrollbar.slider.vertical:active {
|
|
||||||
border-color: shade($selected_bg_color, 0.9);
|
|
||||||
background-color: $selected_bg_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scrollbar.slider.fine-tune:prelight:active {
|
|
||||||
border-width: 2px;
|
|
||||||
border-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* overlay scrollbar */
|
|
||||||
OsThumb {
|
|
||||||
color: shade($bg_color, 0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
OsThumb:selected,
|
|
||||||
OsScrollbar:selected {
|
|
||||||
background-color: $selected_bg_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
OsThumb:active,
|
|
||||||
OsScrollbar:active {
|
|
||||||
background-color: $selected_bg_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
OsThumb:insensitive,
|
|
||||||
OsScrollbar:insensitive {
|
|
||||||
background-color: shade($bg_color, 0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*************
|
/*************
|
||||||
* separator *
|
* separator *
|
||||||
*************/
|
*************/
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue