Wrap modules in exports mixin so they are included only once

pull/224/head
Satyajit Sahoo 2014-12-09 01:05:19 +05:30
parent f34745f3da
commit 0163f1997a
16 changed files with 988 additions and 1015 deletions

View File

@ -145,29 +145,31 @@
.linked & { @include linked_button($bg, $dark_shadow); }
}
%close_button {
border: 1px solid transparent;
background-color: transparent;
background-image: none;
box-shadow: none;
&:focus, &:hover {
border: 1px solid alpha(black, 0.3);
background-color: alpha(white, 0.2);
@include exports("button") {
%close_button {
border: 1px solid transparent;
background-color: transparent;
background-image: 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 {
border: 1px solid alpha(black, 0.3);
background-color: alpha(black, 0.1);
background-image: none;
box-shadow: none;
.button {
@include button($bg_color, $fg_color);
&.default { @include button($selected_bg_color, $selected_fg_color); }
}
}
.button {
@include button($bg_color, $fg_color);
&.default { @include button($selected_bg_color, $selected_fg_color); }
}

View File

@ -6,19 +6,22 @@
! Calendar
***********/
GtkCalendar {
padding: $spacing;
outline-offset: -1px;
@include exports("calendar") {
GtkCalendar {
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 {
&, &:hover, &:insensitive {
border: none;
background-color: transparent;
background-image: none;
&.view, &.highlight, &.header, &.button {
&, &:hover, &:insensitive {
border: none;
background-color: transparent;
background-image: none;
}
}
}
&.highlight { color: $selected_bg_color; }
&.highlight { color: $selected_bg_color; }
}
}

View File

@ -72,27 +72,32 @@
&.image.left { padding-right: $spacing; }
}
.entry { @include entry($base_color, $text_color); }
@include exports("entry") {
.entry { @include entry($base_color, $text_color); }
}
/******************
! Combobox entry *
*******************/
GtkComboBox.combobox-entry {
.entry {
&, &:hover, &:focus, &:active, &:insensitive {
border-width: 1px 0 1px 1px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
@include exports("comboboxentry") {
GtkComboBox.combobox-entry {
.entry {
&, &:hover, &:focus, &:active, &:insensitive {
border-width: 1px 0 1px 1px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
}
.button {
&, &:hover, &:focus, &:active, &:insensitive {
border-width: 1px 1px 1px 1px;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
.button {
&, &:hover, &:focus, &:active, &:insensitive {
border-width: 1px 1px 1px 1px;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
}
}
}

View File

@ -13,7 +13,7 @@
&-row {
border: none;
border-radius: 0;
padding: 3px;
padding: $spacing;
background-image: none;
background-color: transparent;

View File

@ -7,31 +7,33 @@
! Infobar
**********/
GtkInfoBar {
border: none;
@include exports("infobar") {
GtkInfoBar {
border: none;
$types: (
info: ( $info_fg_color, $info_bg_color ),
warning: ( $warning_fg_color, $warning_bg_color ),
question: ( $question_fg_color, $question_bg_color ),
error: ( $error_fg_color, $error_bg_color ),
);
$types: (
info: ( $info_fg_color, $info_bg_color ),
warning: ( $warning_fg_color, $warning_bg_color ),
question: ( $question_fg_color, $question_bg_color ),
error: ( $error_fg_color, $error_bg_color ),
);
@each $type, $colors in $types {
$fg_color: nth($colors, 1);
$bg_color: nth($colors, 2);
@each $type, $colors in $types {
$fg_color: nth($colors, 1);
$bg_color: nth($colors, 2);
&.#{$type} {
border: 1px solid shade($bg_color, 0.8);
background-color: $bg_color;
background-image: none;
color: $fg_color;
&.#{$type} {
border: 1px solid shade($bg_color, 0.8);
background-color: $bg_color;
background-image: none;
color: $fg_color;
.button {
@include button($bg_color, $fg_color);
.button {
@include button($bg_color, $fg_color);
&.close { @extend %close_button; }
&.close { @extend %close_button; }
}
}
}
}

View File

@ -7,30 +7,32 @@
! Menubar
**********/
.menubar {
-GtkWidget-window-dragging: true;
@include exports("menubar") {
.menubar {
-GtkWidget-window-dragging: true;
border: none;
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;
border: none;
background-color: $menubar_bg_color;
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); }
&.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
*******/
GtkTreeMenu, GtkMenuToolButton, GtkComboBox {
&.menu, .menu {
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;
@include exports("menu") {
GtkTreeMenu, GtkMenuToolButton, GtkComboBox {
&.menu, .menu {
background-color: $menu_bg_color;
margin: $spacing;
}
}
}
.context-menu { font: initial; }
.menuitem {
GtkTreeMenu & {
#toolbar-popup, .menu {
padding: 0;
border-width: 0;
}
&, .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);
}
background-color: $menu_bg_color;
color: $menu_fg_color;
&.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); }
&:selected { background-color: $selected_bg_color; }
.button {
border-style: none;
background-color: transparent;
background-image: none;
&, &:hover, &:active, &:active *:insensitive, &:insensitive {
border-width: 0;
background-color: transparent;
background-image: none;
}
}
}
.accelerator {
color: alpha($menu_fg_color, .6);
.context-menu { font: initial; }
&: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
**********/
GtkPopover {
@include border($menu_bg_color);
@include exports("popover") {
GtkPopover {
@include border($menu_bg_color);
margin: 10px;
padding: $spacing;
border-radius: $roundness;
border-width: 1px;
border-style: solid;
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;
margin: 10px;
padding: $spacing;
border-radius: $roundness;
border-width: 1px;
border-style: solid;
background-clip: border-box;
background-color: $menu_bg_color;
background-image: none;
color: $menu_fg_color;
}
box-shadow: 0 2px 3px alpha(black, .5);
&:backdrop { box-shadow: none; }
&.osd {
box-shadow: 0 2px 7px 3px alpha(black, .5);
> .toolbar .button {
border-radius: 0;
border-width: 0;
&.background {
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;
}
}
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;
background-color: $menu_bg_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 {
background-image: none;
background-color: $selected_bg_color;
color: $selected_fg_color;
border: none;
border-radius: 2px;
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;
}
}
&:focus:hover, &:active:hover, &:hover, &:selected {
background-image: none;
background-color: $selected_bg_color;
color: $selected_fg_color;
border: none;
border-radius: 2px;
}
}
}

View File

@ -1,134 +1,137 @@
@import "functions";
@import "global";
/**********
! Notebook
***********/
.notebook {
padding: 0;
border-width: 1px 0 0 0;
border-style: solid;
border-color: border_normal($base_color);
border-radius: 0;
background-color: $base_color;
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;
@include exports("notebook") {
.notebook {
padding: 0;
border-width: 1px 0 0 0;
border-style: solid;
border-color: border_normal($base_color);
border-radius: 0;
background-color: $base_color;
color: $text_color;
}
tab {
padding: $spacing ($spacing * 2);
border: 1px solid transparent;
background-color: transparent;
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-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 {
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; }
.prelight-page {
&, GtkLabel { color: mix($text_color, $base_color, 0.15); }
}
&.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; }
.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);
}
&.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; }
}
.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);
&: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);
}
}
}
}

View File

@ -6,189 +6,191 @@
! Progress bars *
******************/
GtkProgressBar {
padding: 0;
border-radius: $roundness;
font-size: smaller;
color: alpha($fg_color, 0.6);
@include exports("progressbar") {
GtkProgressBar {
padding: 0;
border-radius: $roundness;
font-size: smaller;
color: alpha($fg_color, 0.6);
-GtkProgressBar-min-horizontal-bar-height: 12;
-GtkProgressBar-min-vertical-bar-width: 12;
-GtkProgressBar-min-horizontal-bar-height: 12;
-GtkProgressBar-min-vertical-bar-width: 12;
&.osd {
-GtkProgressBar-xspacing: 0;
-GtkProgressBar-yspacing: 0;
-GtkProgressBar-min-horizontal-bar-height: 3;
&.osd {
-GtkProgressBar-xspacing: 0;
-GtkProgressBar-yspacing: 0;
-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 {
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 {
.progressbar {
background-image: none;
background-color: $selected_bg_color;
border-radius: 0;
box-shadow: none;
&.bottom {
&.left {
border-top-left-radius: $roundness;
border-bottom-left-radius: $roundness;
}
&.right {
border-top-right-radius: $roundness;
border-bottom-right-radius: $roundness;
}
&.top {
border-top-left-radius: $roundness;
border-top-right-radius: $roundness;
}
}
}
&.left.right { box-shadow: none; }
GtkLevelBar {
-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);
&.vertical {
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);
}
}
background-color: $selected_bg_color;
&.fine-tune {
&, &.horizontal {
&:active, &:active:hover {
background-size: 50%;
background-repeat: no-repeat;
background-position: center;
&.bottom {
border-bottom-left-radius: $roundness;
border-bottom-right-radius: $roundness;
}
&.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;
&.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; }
&.vertical {
-GtkLevelBar-min-block-width: 3;
-GtkLevelBar-min-block-height: 34;
}
}
&.highlight {
&, &.left, &.bottom {
border-color: $selected_bg_color;
background-color: $selected_bg_color;
.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 {
border-color: shade($bg_color, 0.7);
background-color: shade($bg_color, 0.8);
background-color: shade($bg_color, 0.9);
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);
}
}
}
}

View File

@ -5,57 +5,59 @@
! Scrollbar
************/
.scrollbar {
border: none;
padding: 0;
@include exports("scrollbar") {
.scrollbar {
border: none;
padding: 0;
&.button {
&, &:active, &:active:hover {
border-width: 0;
&.button {
&, &:active, &:active:hover {
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;
background-color: transparent;
background-image: none;
color: shade($bg_color, 0.6);
background-color: mix($bg_color, $fg_color, 0.21);
&: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 {
border: 1px solid mix(shade($bg_color, 0.87), $fg_color, 0.21);
.scrollbars-junction,
.scrollbar.trough {
border: none;
border-radius: 0;
background-color: mix($bg_color, $fg_color, 0.21);
background-color: $bg_color;
background-image: none;
}
&:hover {
border-color: mix(shade($bg_color, 0.87), $fg_color, 0.31);
background-color: mix($bg_color, $fg_color, 0.31);
}
/* overlay scrollbar */
OsThumb, OsScrollbar {
color: shade($bg_color, 0.7);
&:active {
border-color: shade($selected_bg_color, 0.9);
background-color: $selected_bg_color;
}
&:selected { background-color: $selected_bg_color; }
&.fine-tune:prelight:active {
border-width: 2px;
border-color: transparent;
}
&:active { background-color: $selected_bg_color; }
&: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); }
}

View File

@ -6,69 +6,71 @@
! Sidebar
**********/
.sidebar {
&, &.view, & .view, & GtkScrolledWindow {
background-color: $bg_color;
color: mix($fg_color, $bg_color, 0.1);
@include exports("sidebar") {
.sidebar {
&, &.view, & .view, & GtkScrolledWindow {
background-color: $bg_color;
color: mix($fg_color, $bg_color, 0.1);
&.separator {
&, &:hover, &:focus {
border-width: 1px;
border-style: solid;
border-color: shade($bg_color, 0.9);
color: shade($bg_color, 0.9);
&.separator {
&, &:hover, &:focus {
border-width: 1px;
border-style: solid;
border-color: shade($bg_color, 0.9);
color: shade($bg_color, 0.9);
}
}
}
}
row, .view row {
&:selected {
&, &:hover, &:focus {
border: none;
background-image: none;
background-color: $selected_bg_color;
color: $selected_fg_color;
row, .view row {
&:selected {
&, &:hover, &:focus {
border: none;
background-image: none;
background-color: $selected_bg_color;
color: $selected_fg_color;
}
&:prelight {
border: none;
background-image: none;
background-color: shade($selected_bg_color, 1.05);
color: $selected_fg_color;
}
}
&:prelight {
border: none;
background-image: none;
background-color: shade($selected_bg_color, 1.05);
color: $selected_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); }
&:prelight {
border: none;
background-image: none;
background-color: shade($bg_color, 0.95);
color: $fg_color;
}
}
&.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 {
&, &.horizontal {
background-image: linear-gradient(to bottom,
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)
);
@include exports("paneseparator") {
.pane-separator {
background-color: $bg_color;
color: transparent;
background-size: 4px 10px;
background-repeat: no-repeat;
background-position: center center;
}
&, &.horizontal {
background-image: linear-gradient(to bottom,
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-image: linear-gradient(to right,
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: 4px 10px;
background-repeat: no-repeat;
background-position: center center;
}
background-size: 10px 4px;
background-repeat: no-repeat;
background-position: center center;
&.vertical {
background-image: linear-gradient(to right,
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;
}
}
}

View File

@ -6,21 +6,23 @@
! Spinner animation
********************/
@keyframes spin {
to { -gtk-icon-transform: rotate(1turn); }
}
@include exports("spinner") {
@keyframes spin {
to { -gtk-icon-transform: rotate(1turn); }
}
.spinner {
background-image: none;
background-color: $selected_bg_color;
opacity: 0; // non spinning spinner makes no sense
.spinner {
background-image: none;
background-color: $selected_bg_color;
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 {
opacity: 1;
animation: spin 1s linear infinite;
&:active {
opacity: 1;
animation: spin 1s linear infinite;
&:insensitive { opacity: 0.5; }
&:insensitive { opacity: 0.5; }
}
}
}

View File

@ -6,11 +6,6 @@
! Check and Radio items
************************/
* {
-GtkCheckButton-indicator-size: 16;
-GtkCheckMenuItem-indicator-size: 14;
}
@mixin toggle($type) {
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 {
-gtk-icon-source: url("assets/grid-selection-unchecked.svg");
.check { @include toggle("checkbox"); }
&: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
*********/
GtkSwitch {
padding: 0;
border-radius: $roundness;
font: bold condensed;
outline-offset: -4px;
@include exports("switch") {
GtkSwitch {
padding: 0;
border-radius: $roundness;
font: bold condensed;
outline-offset: -4px;
&.slider {
border: 1px solid shade($bg_color, 0.8);
background-color: shade($bg_color, 1.08);
&.slider {
border: 1px solid shade($bg_color, 0.8);
background-color: shade($bg_color, 1.08);
&:insensitive {
border-color: shade($bg_color, 0.85);
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 {
border-color: shade($bg_color, 0.85);
background-color: shade($bg_color, 0.9);
}
}
&:insensitive {
border-color: shade($bg_color, 0.85);
background-color: shade($bg_color, 0.9);
color: mix($fg_color, $bg_color, 0.5);
&.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 {
border-color: shade($bg_color, 0.85);
background-color: shade($bg_color, 0.9);
color: mix($fg_color, $bg_color, 0.5);
}
}
}
}

View File

@ -49,67 +49,69 @@
.menubar { -GtkToolbar-button-relief: normal; }
}
.toolbar {
@include toolbar($bg_color, $fg_color);
@include exports("toolbar") {
.toolbar {
@include toolbar($bg_color, $fg_color);
border-style: none;
}
border-style: none;
}
.header-bar {
@include toolbar($titlebar_bg_color, $titlebar_fg_color);
.header-bar {
@include toolbar($titlebar_bg_color, $titlebar_fg_color);
border-width: 0 0 1px 0;
border-style: solid;
}
border-width: 0 0 1px 0;
border-style: solid;
}
.titlebar {
@include linear-gradient($titlebar_bg_color);
border-radius: $roundness $roundness 0 0;
color: mix($titlebar_fg_color, $titlebar_bg_color, .1);
&:backdrop {
.titlebar {
@include linear-gradient($titlebar_bg_color);
color: mix($titlebar_fg_color, $titlebar_bg_color, .6);
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;
border-radius: $roundness $roundness 0 0;
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;
@include linear-gradient($titlebar_bg_color);
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;
}
}
}
}

View File

@ -6,125 +6,128 @@
! Generic views
****************/
.view {
color: $text_color;
background-color: $base_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 {
@include exports("view") {
.view {
color: $text_color;
background-color: $base_color;
&:prelight { background-color: alpha($selected_bg_color, 0.6); }
&:selected, &:active { background-color: $selected_bg_color; }
&:insensitive { background-color: shade($base_color, 0.9); }
&.check {
&, &:active, &:prelight, &:insensitive, &:selected { background-color: transparent; }
&:insensitive, &:insensitive:insensitive {
background-color: shade($base_color, 0.9);
color: mix($text_color, $base_color, 0.5);
}
&:selected, &:selected:focus { @extend %selected_items; }
}
.subtitle {
font: smaller;
padding: 0 12px;
}
}
.cell {
border-width: 0;
border-radius: 0;
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); }
}
row {
&: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 {
&, &.view, &.content-view.view {
border: 1px solid $selected_bg_color;
border-radius: 0;
background-color: alpha($selected_bg_color, 0.3);
&:selected, &:active { background-color: $selected_bg_color; }
&:insensitive { background-color: shade($base_color, 0.9); }
&.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 *
*************/
GtkTreeView {
-GtkTreeView-vertical-separator: 0;
@include exports("treeview") {
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 {
border-radius: 0;
background-color: $base_color;
background-image: none;
.entry {
border-radius: 0;
background-color: $base_color;
background-image: none;
}
}
}
@ -133,28 +136,30 @@ GtkTreeView {
! Column view headers
**********************/
column-header {
.button {
&, &:active {
border-width: 0 1px 1px 0;
border-radius: 0;
}
@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, 0.9);
border-bottom-color: shade($base_color, 0.8);
background-color: shade($base_color, 0.97);
background-image: none;
}
&, &:active, &:focus, &:active:focus {
border-color: shade($base_color, 0.9);
border-bottom-color: shade($base_color, 0.8);
background-color: shade($base_color, 0.97);
background-image: none;
}
&:hover, &:active:hover, &:hover:focus, &:active:hover:focus {
border-color: shade($base_color, 0.9);
border-bottom-color: shade($base_color, 0.8);
background-color: shade($base_color, 0.99);
background-image: none;
}
&:hover, &:active:hover, &:hover:focus, &:active:hover:focus {
border-color: shade($base_color, 0.9);
border-bottom-color: shade($base_color, 0.8);
background-color: shade($base_color, 0.99);
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 *
***********/
.frame { border: none; }
@include exports("frame") {
.frame { border: none; }
GtkScrolledWindow {
&.frame { border: 1px solid border_normal($bg_color); }
GtkScrolledWindow {
&.frame { border: 1px solid border_normal($bg_color); }
/* avoid double borders when a viewport is packed into a GtkScrolledWindow */
GtkViewport.frame { border: none; }
/* avoid double borders when a viewport is packed into a GtkScrolledWindow */
GtkViewport.frame { border: none; }
}
}
@ -177,23 +184,25 @@ GtkScrolledWindow {
! Expanders *
**************/
GtkExpander {
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);
@include exports("expander") {
GtkExpander {
padding: $spacing;
outline-offset: 1px;
}
&:active {
color: alpha(currentColor, 0.9);
border-color: alpha(currentColor, 0.9);
.expander {
color: alpha(currentColor, 0.7);
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 *
********************/
.image {
color: alpha(currentColor, 0.5);
@include exports("symbolicimage") {
.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; }
}
/******************
! Pane separator *
*******************/
.pane-separator {
background-color: $bg_color;
color: transparent;
&:selected, &:selected:hover { color: $selected_fg_color; }
}
}
@ -225,43 +226,45 @@ GtkExpander {
! Floating bar *
*****************/
.floating-bar {
border: 1px solid border_normal($bg_color);
border-radius: $roundness;
background-color: $bg_color;
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;
@include exports("floatingbar") {
.floating-bar {
border: 1px solid border_normal($bg_color);
border-radius: $roundness;
background-color: $bg_color;
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;
}
}
}

View File

@ -6,38 +6,40 @@
! Window frame
***************/
.window-frame {
border: none;
border-radius: $roundness $roundness 0 0;
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);
@include exports("window") {
.window-frame {
border: none;
border-radius: $roundness $roundness 0 0;
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 */
margin: $spacing * 3;
/* this is used for the resize cursor area */
margin: $spacing * 3;
&:backdrop {
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);
}
&.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);
&:backdrop {
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);
}
&.tooltip {
border-radius: $roundness;
box-shadow: none;
}
&.tiled { border-radius: 0; }
&.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);
&.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 {
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);
}
}
}
}

View File

@ -17,78 +17,6 @@
@import "notebook";
@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 *
*************/