Add choosers and other styles
Satyajit Sahoo
parent
fbca03b4a1
commit
dd5eb36ecf
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -45,13 +45,13 @@
|
|||
@define-color panel_fg_color @dark_fg_color;
|
||||
|
||||
/* osd */
|
||||
@define-color osd_base @dark_bg_color;
|
||||
@define-color osd_fg @dark_fg_color;
|
||||
@define-color osd_bg alpha(@osd_base, 0.8);
|
||||
@define-color osd_base #{"" + $osd_base};
|
||||
@define-color osd_fg #{"" + $osd_fg};
|
||||
@define-color osd_bg #{"" + $osd_bg};
|
||||
|
||||
/* lightdm greeter colors */
|
||||
@define-color lightdm_bg_color @dark_bg_color;
|
||||
@define-color lightdm_fg_color @dark_fg_color;
|
||||
@define-color lightdm_bg_color #{"" + $lightdm_bg_color};
|
||||
@define-color lightdm_fg_color #{"" + $lightdm_fg_color};
|
||||
|
||||
/* window manager colors */
|
||||
@define-color wm_bg @titlebar_bg_color;
|
||||
|
|
|
|||
|
|
@ -42,6 +42,13 @@ $menu_fg_color: $dark_fg_color;
|
|||
$menubar_bg_color: $dark_bg_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
|
||||
$roundness: 2px;
|
||||
$spacing: 5px;
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
}
|
||||
}
|
||||
|
|
@ -78,17 +78,17 @@
|
|||
outline-offset: -4px;
|
||||
|
||||
&.slider {
|
||||
border: 1px solid shade($bg_color, 0.8);
|
||||
border: 1px solid border_normal($bg_color);
|
||||
background-color: shade($bg_color, 1.08);
|
||||
|
||||
&:insensitive {
|
||||
border-color: shade($bg_color, 0.85);
|
||||
border-color: border_insensitive($bg_color);
|
||||
background-color: shade($bg_color, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
&.trough {
|
||||
border-color: shade($bg_color, 0.8);
|
||||
border: 1px solid border_normal($bg_color);
|
||||
background-color: shade($bg_color, 0.95);
|
||||
color: $fg_color;
|
||||
|
||||
|
|
@ -99,7 +99,7 @@
|
|||
}
|
||||
|
||||
&:insensitive {
|
||||
border-color: shade($bg_color, 0.85);
|
||||
border-color: border_insensitive($bg_color);
|
||||
background-color: shade($bg_color, 0.9);
|
||||
color: mix($fg_color, $bg_color, 0.5);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,9 +4,11 @@
|
|||
@import "button";
|
||||
@import "entry";
|
||||
@import "calendar";
|
||||
@import "choosers";
|
||||
@import "grid";
|
||||
@import "infobar";
|
||||
@import "menu";
|
||||
@import "misc";
|
||||
@import "notebook";
|
||||
@import "progress";
|
||||
@import "scrollbar";
|
||||
|
|
@ -18,127 +20,6 @@
|
|||
@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 *
|
||||
**************/
|
||||
|
|
@ -184,68 +65,6 @@ GtkColorButton.button {
|
|||
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 *
|
||||
*******/
|
||||
|
|
@ -695,19 +514,3 @@ GtkFileChooser .dialog-action-box {
|
|||
color: shade($selected_bg_color, 0.8);
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue