kirbylife
/
numix-gtk-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add choosers and other styles

pull/224/head
Satyajit Sahoo 2014-12-13 17:36:16 +05:30
parent fbca03b4a1
commit dd5eb36ecf
7 changed files with 306 additions and 297 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
gtk-3.0/scss/_choosers.scss 100644
View File

@ -0,0 +1,129 @@
@import "functions";
@import "global";
/***************
! Color chooser
****************/
@include exports("colorchooser") {
GtkColorSwatch {
&, &:selected {
border: 1px solid alpha(black, 0.1);
border-radius: $roundness - 1px;
background-color: transparent;
background-clip: border-box;
&:hover { border-color: alpha(black, 0.3); }
}
&.color-light:selected:hover, &.color-dark:selected:hover { background-image: none; }
&.left, &:first-child {
border-top-left-radius: $roundness;
border-bottom-left-radius: $roundness;
}
&.right, &:last-child {
border-top-right-radius: $roundness;
border-bottom-right-radius: $roundness;
}
&:only-child { border-radius: $roundness; }
&.top {
border-top-left-radius: $roundness;
border-top-right-radius: $roundness;
}
&.bottom {
border-bottom-left-radius: $roundness;
border-bottom-right-radius: $roundness;
}
GtkColorEditor & {
border-radius: $roundness;
&.color-dark:hover, &.color-light:hover {
background-image: none;
border-color: alpha(black, 0.3);
}
}
}
GtkColorChooserWidget #add-color-button {
background-clip: padding-box;
border-color: alpha(black, 0.1);
background-color: shade($bg_color, 0.95);
color: $fg_color;
&:hover {
border-color: alpha(black, 0.3);
background-color: shade($bg_color, 0.90);
color: $fg_color;
}
}
.color-active-badge {
&, &:selected {
border-width: 2px;
border-style: solid;
background-color: transparent;
}
&.color-light {
&, &:hover {
border-color: alpha(black, 0.3);
color: alpha(black, 0.3);
}
}
&.color-dark {
&, &:hover {
border-color: alpha(white, 0.3);
color: alpha(white, 0.3);
}
}
}
GtkColorButton.button { padding: $spacing; }
}
/***********************
! Font and file choosers
************************/
@include exports("miscchoosers") {
GtkFontButton, GtkFileChooserButton {
.separator {
/* always disable separators */
-GtkWidget-wide-separators: true;
-GtkWidget-horizontal-separator: 0;
-GtkWidget-vertical-separator: 0;
}
GtkLabel:last-child { color: alpha(currentColor, 0.7); }
GtkImage:last-child { color: alpha(currentColor, 0.7); }
}
GtkFileChooser {
.pane-separator {
&, &:hover {
border-width: 0 1px 0 0;
border-style: solid;
border-color: currentColor;
background-color: $bg_color;
color: border_normal($bg_color);
}
}
/* for fallback when header bar not used */
.dialog-action-box {
border-width: 1px 0 0;
border-style: solid;
border-color: shade($bg_color, 0.7);
}
}
}

10
gtk-3.0/scss/_colors.scss
View File

@ -45,13 +45,13 @@
@define-color panel_fg_color @dark_fg_color; @define-color panel_fg_color @dark_fg_color;
/* osd */ /* osd */
@define-color osd_base @dark_bg_color; @define-color osd_base #{"" + $osd_base};
@define-color osd_fg @dark_fg_color; @define-color osd_fg #{"" + $osd_fg};
@define-color osd_bg alpha(@osd_base, 0.8); @define-color osd_bg #{"" + $osd_bg};
/* lightdm greeter colors */ /* lightdm greeter colors */
@define-color lightdm_bg_color @dark_bg_color; @define-color lightdm_bg_color #{"" + $lightdm_bg_color};
@define-color lightdm_fg_color @dark_fg_color; @define-color lightdm_fg_color #{"" + $lightdm_fg_color};
/* window manager colors */ /* window manager colors */
@define-color wm_bg @titlebar_bg_color; @define-color wm_bg @titlebar_bg_color;

7
gtk-3.0/scss/_global.scss
View File

@ -42,6 +42,13 @@ $menu_fg_color: $dark_fg_color;
$menubar_bg_color: $dark_bg_color; $menubar_bg_color: $dark_bg_color;
$menubar_fg_color: $dark_fg_color; $menubar_fg_color: $dark_fg_color;
$osd_base: $dark_bg_color;
$osd_fg: $dark_fg_color;
$osd_bg: fade-out($dark_fg_color, 0.8);
$lightdm_bg_color: $dark_bg_color;
$lightdm_fg_color: $dark_fg_color;
// widget styles // widget styles
$roundness: 2px; $roundness: 2px;
$spacing: 5px; $spacing: 5px;

159
gtk-3.0/scss/_misc.scss 100644
View File

@ -0,0 +1,159 @@
@import "functions";
@import "global";
/***********
! Tooltip *
************/
@include exports("tooltip") {
.tooltip {
border: none;
border-radius: $roundness;
background-color: $tooltip_bg_color;
background-image: none;
color: $tooltip_fg_color;
* { background-color: transparent; }
}
}
/***********
! Dialogs *
************/
@include exports("dialogs") {
GtkMessageDialog, .prompt {
-GtkDialog-content-area-border: 0;
-GtkDialog-action-area-border: 0;
-GtkDialog-button-spacing: 0;
margin: 0;
padding: 0;
}
}
/*********************
! App notifications *
**********************/
@include exports("notifications") {
.app-notification {
border-style: solid;
border-color: border_normal($base_color);
border-width: 0 1px 1px 1px;
border-radius: 0 0 $roundness $roundness;
padding: $spacing * 3;
background-color: $base_color;
background-image: none;
color: $text_color;
}
}
/*************
! Expanders *
**************/
@include exports("expander") {
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);
}
&:active {
color: alpha(currentColor, 0.9);
border-color: alpha(currentColor, 0.9);
}
}
}
/*******************
! Symbolic images *
********************/
@include exports("symbolicimage") {
.image {
color: alpha(currentColor, 0.5);
&:hover { color: alpha(currentColor, 0.9); }
&:selected, &:selected:hover { color: $selected_fg_color; }
}
}
/****************
! Floating bar *
*****************/
@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;
}
}
}
/*************************
! Touch text selections *
**************************/
@include exports("touchbubble") {
GtkBubbleWindow {
border-radius: $roundness;
background-clip: border-box;
&.osd.background { background-color: $osd_bg; }
.toolbar { background-color: transparent; }
}
}

8
gtk-3.0/scss/_toggle.scss
View File

@ -78,17 +78,17 @@
outline-offset: -4px; outline-offset: -4px;
&.slider { &.slider {
border: 1px solid shade($bg_color, 0.8); border: 1px solid border_normal($bg_color);
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: border_insensitive($bg_color);
background-color: shade($bg_color, 0.9); background-color: shade($bg_color, 0.9);
} }
} }
&.trough { &.trough {
border-color: shade($bg_color, 0.8); border: 1px solid border_normal($bg_color);
background-color: shade($bg_color, 0.95); background-color: shade($bg_color, 0.95);
color: $fg_color; color: $fg_color;
@ -99,7 +99,7 @@
} }
&:insensitive { &:insensitive {
border-color: shade($bg_color, 0.85); border-color: border_insensitive($bg_color);
background-color: shade($bg_color, 0.9); background-color: shade($bg_color, 0.9);
color: mix($fg_color, $bg_color, 0.5); color: mix($fg_color, $bg_color, 0.5);
} }

89
gtk-3.0/scss/_view.scss
View File

@ -191,92 +191,3 @@
} }
} }
/*************
! Expanders *
**************/
@include exports("expander") {
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);
}
&:active {
color: alpha(currentColor, 0.9);
border-color: alpha(currentColor, 0.9);
}
}
}
/*******************
! Symbolic images *
********************/
@include exports("symbolicimage") {
.image {
color: alpha(currentColor, 0.5);
&:hover { color: alpha(currentColor, 0.9); }
&:selected, &:selected:hover { color: $selected_fg_color; }
}
}
/****************
! Floating bar *
*****************/
@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;
}
}
}

201
gtk-3.0/scss/widgets.scss
View File

@ -4,9 +4,11 @@
@import "button"; @import "button";
@import "entry"; @import "entry";
@import "calendar"; @import "calendar";
@import "choosers";
@import "grid"; @import "grid";
@import "infobar"; @import "infobar";
@import "menu"; @import "menu";
@import "misc";
@import "notebook"; @import "notebook";
@import "progress"; @import "progress";
@import "scrollbar"; @import "scrollbar";
@ -18,127 +20,6 @@
@import "window"; @import "window";
/*****************
* color chooser *
*****************/
GtkColorSwatch,
GtkColorSwatch:selected {
border-width: 1px;
border-style: solid;
border-color: alpha(black, 0.1);
border-radius: 1px;
background-color: transparent;
background-clip: border-box;
}
GtkColorSwatch:hover,
GtkColorSwatch:selected:hover {
border-color: alpha(black, 0.3);
}
GtkColorSwatch.color-dark:hover {
}
GtkColorSwatch.color-light:hover {
}
GtkColorSwatch.color-light:selected:hover,
GtkColorSwatch.color-dark:selected:hover {
background-image: none;
}
GtkColorSwatch.left,
GtkColorSwatch:first-child {
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
GtkColorSwatch.right,
GtkColorSwatch:last-child {
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
GtkColorSwatch:only-child {
border-radius: 2px;
}
GtkColorSwatch.top {
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
GtkColorSwatch.bottom {
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
GtkColorChooserWidget #add-color-button {
background-clip: padding-box;
border-color: alpha(black, 0.1);
background-color: shade($bg_color, 0.95);
color: $fg_color;
}
GtkColorChooserWidget #add-color-button:hover {
border-color: alpha(black, 0.3);
background-color: shade($bg_color, 0.90);
color: $fg_color;
}
.color-active-badge,
.color-active-badge:selected {
border-width: 1px;
border-style: solid;
border-width: 2px;
background-color: transparent;
}
.color-active-badge.color-light,
.color-active-badge.color-light:hover {
border-color: alpha(black, 0.3);
color: alpha(black, 0.3);
}
.color-active-badge.color-dark,
.color-active-badge.color-dark:hover {
border-color: alpha(white, 0.3);
color: alpha(white, 0.3);
}
GtkColorEditor GtkColorSwatch {
border-radius: 2px;
}
GtkColorEditor GtkColorSwatch.color-dark:hover,
GtkColorEditor GtkColorSwatch.color-light:hover {
background-image: none;
border-color: alpha(black, 0.3);
}
GtkColorButton.button {
padding: 2px;
}
/***********
* tooltip *
***********/
.tooltip {
border-width: 1px;
border-style: solid;
border-color: shade($tooltip_bg_color, 0.8);
border-radius: 2px;
background-color: $tooltip_bg_color;
background-image: none;
color: $tooltip_fg_color;
}
.tooltip * {
background-color: transparent;
}
/************** /**************
* action-bar * * action-bar *
**************/ **************/
@ -184,68 +65,6 @@ GtkColorButton.button {
padding: 4px; padding: 4px;
} }
/***********
* dialogs *
***********/
GtkMessageDialog,
.prompt {
-GtkDialog-content-area-border: 0;
-GtkDialog-action-area-border: 0;
-GtkDialog-button-spacing: 0;
margin: 0;
padding: 0;
}
/********************
* various choosers *
********************/
GtkFontButton .separator,
GtkFileChooserButton .separator {
/* always disable separators */
-GtkWidget-wide-separators: true;
-GtkWidget-horizontal-separator: 0;
-GtkWidget-vertical-separator: 0;
}
GtkFontButton GtkLabel:last-child {
color: alpha(currentColor, 0.7);
}
GtkFileChooserButton GtkImage:last-child {
color: alpha(currentColor, 0.7);
}
GtkFileChooser .pane-separator,
GtkFileChooser .pane-separator:hover {
border-width: 0 1px 0 0;
border-style: solid;
border-color: shade($bg_color, 0.8);
background-color: $bg_color;
color: shade($bg_color, 0.9);
}
/* for fallback when header bar not used */
GtkFileChooser .dialog-action-box {
border-width: 1px 0 0;
border-style: solid;
border-color: shade($bg_color, 0.7);
}
/*********************
* app notifications *
*********************/
.app-notification {
border-style: solid;
border-color: shade($base_color, 0.8);
border-width: 0 1px 1px 1px;
border-radius: 0 0 2px 2px;
padding: 8px;
background-color: $base_color;
background-image: none;
color: $text_color;
}
/******* /*******
* osd * * osd *
*******/ *******/
@ -695,19 +514,3 @@ GtkFileChooser .dialog-action-box {
color: shade($selected_bg_color, 0.8); color: shade($selected_bg_color, 0.8);
box-shadow: none; box-shadow: none;
} }
/*************************
* touch text selections *
*************************/
GtkBubbleWindow {
border-radius: 2px;
background-clip: border-box;
}
GtkBubbleWindow.osd.background {
// background-color: $osd_bg;
}
GtkBubbleWindow .toolbar {
background-color: transparent;
}