aboutsummaryrefslogtreecommitdiff
path: root/common/gtk-3.0/3.14/sass/_common.scss
diff options
context:
space:
mode:
Diffstat (limited to 'common/gtk-3.0/3.14/sass/_common.scss')
-rw-r--r--common/gtk-3.0/3.14/sass/_common.scss377
1 files changed, 155 insertions, 222 deletions
diff --git a/common/gtk-3.0/3.14/sass/_common.scss b/common/gtk-3.0/3.14/sass/_common.scss
index aaafff7..3356d3e 100644
--- a/common/gtk-3.0/3.14/sass/_common.scss
+++ b/common/gtk-3.0/3.14/sass/_common.scss
@@ -15,11 +15,6 @@ $darker_asset_suffix: if($darker=='true', '-dark', $asset_suffix);
-GtkCheckButton-indicator-size: 16;
-GtkCheckMenuItem-indicator-size: 16;
- // The size for scrollbars. The slider is 2px smaller, but we keep it
- // up so that the whole area is sensitive to button presses for the
- // slider. The stepper button is larger in both directions, the slider
- // only in the width
-
-GtkScrolledWindow-scrollbar-spacing: 0;
-GtkScrolledWindow-scrollbars-within-bevel: 1;
@@ -47,9 +42,6 @@ $darker_asset_suffix: if($darker=='true', '-dark', $asset_suffix);
-GtkStatusbar-shadow-type: none;
// We use the outline properties to signal the focus properties
- // to the adwaita engine: using real CSS properties is faster,
- // and we don't use any outlines for now.
-
outline-color: transparentize($fg_color, 0.7);
outline-style: dashed;
outline-offset: -3px;
@@ -58,22 +50,14 @@ $darker_asset_suffix: if($darker=='true', '-dark', $asset_suffix);
}
-/***************
- * Base States *
- ***************/
-
+//
+// Base States
+//
.background {
color: $fg_color;
background-color: if($transparency == 'true', transparentize($bg_color, 0.001), $bg_color); // without this headerbar transparency doesn't seem to work
}
-/*
- These wildcard seems unavoidable, need to investigate.
- Wildcards are bad and troublesome, use them with care,
- or better, just don't.
- Everytime a wildcard is used a kitten dies, painfully.
-*/
-
*:insensitive {
-gtk-image-effect: dim;
}
@@ -181,10 +165,9 @@ GtkFlowBox .grid-child {
box-shadow: none;
}
-/**********************
- * Spinner Animations *
- **********************/
-
+//
+// Spinner Animations
+//
@keyframes spin {
to { -gtk-icon-transform: rotate(1turn); }
}
@@ -205,10 +188,9 @@ GtkFlowBox .grid-child {
}
}
-/****************
- * Text Entries *
- ****************/
-
+//
+// Text Entries
+//
.entry {
border: 1px solid;
padding: 5px 8px 6px;
@@ -348,10 +330,9 @@ GtkFlowBox .grid-child {
GtkSearchEntry.entry { border-radius: 20px; }
-/***********
- * Buttons *
- ***********/
-
+//
+// Buttons
+//
// stuff for .needs-attention
$_dot_color: $selected_bg_color;
@@ -372,7 +353,6 @@ $_dot_color: $selected_bg_color;
}
}
-
.button {
$_button_transition: all 200ms $ease-out-quad;
@@ -385,7 +365,7 @@ $_dot_color: $selected_bg_color;
@include button(normal);
- &.flat {
+ &.flat {
@include button(undecorated);
background-color: transparentize($button_bg, 1);
border-color: transparentize($button_border, 1);
@@ -751,10 +731,9 @@ $_linked_separator_color: if($variant=='light', transparentize($button_border, 0
&:checked { color: $fg_color; }
}
-/*********
- * Links *
- *********/
-
+//
+// Links
+//
*:link {
color: $link_color;
&:visited {
@@ -782,10 +761,9 @@ $_linked_separator_color: if($variant=='light', transparentize($button_border, 0
}
}
-/*****************
- * GtkSpinButton *
- *****************/
-
+//
+// Spinbuttons
+//
.spinbutton {
border-radius: 3px;
@@ -796,8 +774,7 @@ $_linked_separator_color: if($variant=='light', transparentize($button_border, 0
color: mix($fg_color,$base_color,95%);
border-radius: 0;
box-shadow: none;
- // padding-left: 6px;
- // padding-right: 6px;
+
&:dir(rtl) { border-style: none solid none none; }
&:first-child { color: red; }
@@ -899,16 +876,18 @@ $_linked_separator_color: if($variant=='light', transparentize($button_border, 0
}
}
-/**************
- * ComboBoxes *
- **************/
+//
+// Comboboxes
+//
GtkComboBox {
- > .button { padding-top: 3px; padding-bottom: 4px; } // Otherwise combos
- // are bigger then
- // buttons
-GtkComboBox-arrow-scaling: 0.5;
-GtkComboBox-shadow-type: none;
+ > .button { // Otherwise combos
+ padding-top: 3px; // are bigger than
+ padding-bottom: 4px; // buttons
+ }
+
&:insensitive {
color: $insensitive_fg_color;
}
@@ -974,9 +953,9 @@ GtkComboBox {
.linked.vertical > GtkComboBoxText:only-child > .button,
.linked.vertical > GtkComboBox:only-child > .button { @extend %linked_vertical:only-child; }
-/************
- * Toolbars *
- ************/
+//
+// Toolbars
+//
.toolbar {
-GtkWidget-window-dragging: true;
padding: 4px;
@@ -1026,10 +1005,9 @@ GtkComboBox {
.action-bar { background-color: darken($bg_color, 3%) }
-/***************
- * Header bars *
- ***************/
-
+//
+// Headerbars
+//
.header-bar {
padding: 7px 7px 6px 7px;
@@ -1193,7 +1171,7 @@ GtkComboBox {
}
%header_widgets {
- // Header-bar Entries
+ // Headerbar Entries
.entry {
@include entry(header-normal);
@@ -1237,7 +1215,7 @@ GtkComboBox {
}
}
- // Header-bar Buttons
+ // Headerbar Buttons
.button {
@include button(header-normal);
@@ -1290,7 +1268,7 @@ GtkComboBox {
}
}
- // Header-bar Suggested and Destructive Action buttons
+ // Headerbar Suggested and Destructive Action buttons
@each $b_type, $b_color in (suggested-action, $suggested_color),
(destructive-action, $destructive_color) {
.button.#{$b_type} {
@@ -1316,7 +1294,7 @@ GtkComboBox {
}
}
- // Header-bar Spinbuttons
+ // Headerbar Spinbuttons
& .spinbutton {
&:focus .button {
@@ -1334,7 +1312,7 @@ GtkComboBox {
}
}
- // Header-bar ComboBoxes
+ // Headerbar ComboBoxes
& GtkComboBox{
&:insensitive { color: transparentize($header_fg, 0.6); }
@@ -1367,7 +1345,7 @@ GtkComboBox {
}
}
- // Header-bar Switches
+ // Headerbar Switches
GtkSwitch {
&:backdrop { opacity: 0.75; }
}
@@ -1379,7 +1357,7 @@ GtkComboBox {
&:backdrop { opacity: 0.75; }
}
- // Header-bar Scale
+ // Headerbar Scale
.scale {
&:backdrop { opacity: 0.75; }
@@ -1413,9 +1391,9 @@ GtkComboBox {
}
}
-/************
- * Pathbars *
- ************/
+//
+// Pathbars
+//
.path-bar .button {
padding-left: 6px;
padding-right: 6px;
@@ -1431,9 +1409,9 @@ GtkComboBox {
GtkLabel:only-child, GtkLabel { padding-right: 4px; padding-left: 4px; }
}
-/**************
- * Tree Views *
- **************/
+//
+// Tree Views
+//
GtkTreeView.view { // treeview grid lines and expanders, unfortunatelly
// the tree lines color can't be set
-GtkTreeView-grid-line-width: 1;
@@ -1545,9 +1523,9 @@ column-header.button.dnd { // for treeview-like derive widgets
}
}
-/*********
- * Menus *
- *********/
+//
+// Menus
+//
.menubar {
-GtkWidget-window-dragging: true;
padding: 0px;
@@ -1625,10 +1603,9 @@ column-header.button.dnd { // for treeview-like derive widgets
.menuitem .accelerator { color: gtkalpha(currentColor,0.55); }
-/************
- * Popovers *
- ************/
-
+//
+// Popovers
+//
.popover {
margin: 10px;
padding: 2px;
@@ -1663,17 +1640,10 @@ column-header.button.dnd { // for treeview-like derive widgets
&.bottom { -gtk-icon-source: -gtk-icontheme('selection-end-symbolic'); }
}
-/*****************
- * Notebooks and *
- * Tabs *
- *****************/
-
+//
+// Notebooks and Tabs
+//
.notebook {
- // Through me you go to the grief wracked city;
- // Through me you go to everlasting pain;
- // Through me you go a pass among lost souls.
- // ...
- // Abandon all hope — Ye Who Enter Here
padding: 0;
background-color: $base_color;
-GtkNotebook-initial-gap: 4;
@@ -1687,15 +1657,13 @@ column-header.button.dnd { // for treeview-like derive widgets
&.frame {
border: 1px solid $borders_color;
- // FIXME doesn't work
+
&.top { border-top-width: 0; }
&.bottom { border-bottom-width: 0; }
&.right { border-right-width: 0; }
&.left { border-left-width: 0; }
}
&.header {
- // FIXME: double borders in some case, can't fix it w/o a class tho
- // FIXME: doesn't work on dark var
background-color: $bg_color;
// this is the shading of the header behind the tabs
@@ -1708,18 +1676,10 @@ column-header.button.dnd { // for treeview-like derive widgets
}
$_header_border: $borders_color;
- &.top {
- box-shadow: inset 0 -1px $_header_border; // border
- }
- &.bottom {
- box-shadow: inset 0 1px $_header_border;
- }
- &.right {
- box-shadow: inset 1px 0 $_header_border;
- }
- &.left {
- box-shadow: inset -1px 0 $_header_border;
- }
+ &.top { box-shadow: inset 0 -1px $_header_border; }
+ &.bottom { box-shadow: inset 0 1px $_header_border; }
+ &.right { box-shadow: inset 1px 0 $_header_border; }
+ &.left { box-shadow: inset -1px 0 $_header_border; }
}
tab {
border-width: 0;
@@ -1840,10 +1800,9 @@ column-header.button.dnd { // for treeview-like derive widgets
}
}
-/**************
- * Scrollbars *
- **************/
-
+//
+// Scrollbars
+//
$_scrollbar_bg_color: darken($base_color, 1%);
.scrollbar {
@@ -1908,9 +1867,9 @@ $_scrollbar_bg_color: darken($base_color, 1%);
}
-/**********
- * Switch *
- **********/
+//
+// Switches
+//
GtkSwitch {
font: 1;
-GtkSwitch-slider-width: 41;
@@ -1952,13 +1911,9 @@ GtkSwitch {
}
}
-/*************************
- * Check and Radio items *
- *************************/
-
-// draw regular check and radio items using our PNG assets
-// all assets are rendered from assets.svg. never add pngs directly
-
+//
+// Check and Radio items *
+//
@each $w,$a in ('check', 'checkbox'),
('radio','radio') {
@@ -1992,7 +1947,7 @@ GtkSwitch {
}
}
-//selection-mode
+// Selectionmode
@each $s,$as in ('','-selectionmode'),
(':checked', '-checked-selectionmode') {
GtkIconView.view.check#{$s},
@@ -2015,9 +1970,9 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
}
}
-/************
- * GtkScale *
- ************/
+//
+// GtkScale
+//
.scale {
-GtkScale-slider-length: 15;
-GtkRange-slider-width: 15;
@@ -2124,15 +2079,13 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
}
}
-/*****************
- * Progress bars *
- *****************/
-
+//
+// Progress bars
+//
GtkProgressBar {
padding: 0;
font-size: smaller;
color: transparentize($fg_color, 0.3);
- //@include _shadows(_button_shadow(normal));
&.osd {
-GtkProgressBar-xspacing: 0;
@@ -2171,24 +2124,22 @@ GtkProgressBar.trough {
border-style: none;
background-color: transparent;
box-shadow: none;
- //FIXME: there is a margin on top
}
.list-row:selected &,
GtkInfoBar & { background-color: transparentize(black, 0.8); }
}
-/*************
- * Level Bar *
- *************/
-
+//
+// Level Bar
+//
GtkLevelBar {
-GtkLevelBar-min-block-width: 34;
-GtkLevelBar-min-block-height: 3;
-}
-GtkLevelBar.vertical {
- -GtkLevelBar-min-block-width: 3;
- -GtkLevelBar-min-block-height: 34;
+ &.vertical {
+ -GtkLevelBar-min-block-width: 3;
+ -GtkLevelBar-min-block-height: 34;
+ }
}
.level-bar {
@@ -2224,9 +2175,9 @@ GtkLevelBar.vertical {
}
-/**********
- * Frames *
- **********/
+//
+// Frames
+//
.frame {
border: 1px solid $borders_color;
&.flat { border-style: none; }
@@ -2260,10 +2211,9 @@ GtkScrolledWindow {
}
}
-/*********
- * Lists *
- *********/
-
+//
+// Lists
+//
.list, .list-row {
background-color: $base_color;
border-color: $borders_color;
@@ -2308,10 +2258,9 @@ GtkScrolledWindow {
&:hover { transition: none; }
}
-/*********************
- * App Notifications *
- *********************/
-
+//
+// App Notifications
+//
.app-notification,
.app-notification.frame {
padding: 10px;
@@ -2337,20 +2286,19 @@ GtkScrolledWindow {
}
}
-/*************
- * Expanders *
- *************/
-
-GtkExpander {
+//
+// Expanders
+//
+.expander {
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
&:hover { color: lighten($fg_color,30%); } //only lightens the arrow
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
}
-/************
- * Calendar *
- ***********/
+//
+// Calendar
+//
GtkCalendar {
color: $fg_color;
border: 1px solid $borders_color;
@@ -2383,9 +2331,9 @@ GtkCalendar {
&.highlight { color: gtkalpha(currentColor,0.55); }
}
-/***********
- * Dialogs *
- ***********/
+//
+// Dialogs
+//
.message-dialog .dialog-action-area .button {
padding: 8px;
}
@@ -2439,9 +2387,9 @@ GtkFileChooserDialog {
}
}
-/***********
- * Sidebar *
- ***********/
+//
+// Sidebar
+//
.sidebar {
border: none;
background-color: $bg_color;
@@ -2484,6 +2432,9 @@ GtkPlacesSidebar.sidebar .view {
}
}
+//
+// Paned
+//
GtkPaned {
// This is actually the invisible area of the paned separator, not a margin...
margin: 0 8px 8px 0; //drag area of the separator
@@ -2499,9 +2450,9 @@ GtkPaned {
background-image: linear-gradient(to bottom, $borders_color);
}
-/**************
- * GtkInfoBar *
- **************/
+//
+// GtkInfoBar
+//
GtkInfoBar {
border-style: none;
@@ -2557,9 +2508,9 @@ GtkInfoBar {
}
}
-/************
- * Tooltips *
- ************/
+//
+// Tooltips
+//
.tooltip {
&.background {
// background-color needs to be set this way otherwise it gets drawn twice
@@ -2582,9 +2533,9 @@ GtkInfoBar {
color: inherit; // just to be sure
}
-/*****************
- * Color Chooser *
- *****************/
+//
+// Color Chooser
+//
GtkColorSwatch {
border: none;
@@ -2656,9 +2607,9 @@ GtkColorButton.button {
GtkColorSwatch { border-radius: 0; }
}
-/********
- * Misc *
- ********/
+//
+// Misc
+//
.scale-popup .button { // +/- buttons on GtkVolumeButton popup
padding: 6px;
&:hover {
@@ -2668,23 +2619,49 @@ GtkColorButton.button {
GtkVolumeButton.button { padding: 8px; }
-/**********************
- * Window Decorations *
- *********************/
+// Decouple the font of context menus from their entry/textview
+.touch-selection,
+.context-menu { font: initial;}
+
+.monospace { font: Monospace; }
+
+//
+// Overshoot
+//
+// This is used by GtkScrolledWindow, when content is touch-dragged past boundaries.
+// This draws a box on top of the content, the size changes programmatically.
+.overshoot {
+ &.top { @include overshoot(top); }
+ &.bottom { @include overshoot(bottom); }
+ &.left { @include overshoot(left); }
+ &.right { @include overshoot(right); }
+}
+
+//
+// Undershoot
+//
+// Overflow indication, works similarly to the overshoot, the size if fixed tho.
+.undershoot {
+ &.top { @include undershoot(top); }
+ &.bottom { @include undershoot(bottom); }
+ &.left { @include undershoot(left); }
+ &.right { @include undershoot(right); }
+}
+
+//
+// Window Decorations
+//
.window-frame {
border-radius: if($darker=='false' and $variant=='light', 4px 4px 0 0, 3px 3px 0 0);
- // lamefun trick to get rounded borders regardless of CSD use
border-width: 0px;
- // this needs to be transparent
- // see bug #722563
$_wm_border: if($variant=='light', transparentize(black, 0.9), transparentize(black, 0.45));
box-shadow: 0 0 0 1px if($darker=='true' or $variant == 'dark', darken($header_bg, 7%), $_wm_border),
0 8px 8px 0 if($variant == 'light', opacify($_wm_border, 0.1), transparentize($_wm_border, 0.2));
- /* this is used for the resize cursor area */
+ // this is used for the resize cursor area
margin: 10px;
&:backdrop {
@@ -2789,58 +2766,14 @@ GtkVolumeButton.button { padding: 8px; }
.titlebar.selection-mode .left:dir(rtl) GtkMenuButton.button.titlebutton:last-child {
padding: 4px 6px 4px 6px;
-
-
@include button(undecorated);
-
- &:hover {
-
- }
- &:active, &:checked {
-
- }
- &:backdrop { }
}
-// catch all extend :)
-
+// catch all extend
%selected_items {
background-image: none;
background-color: $selected_bg_color;
color: $selected_fg_color;
outline-color: transparentize($selected_fg_color, 0.7);
}
-
-/* Decouple the font of context menus from their entry/textview */
-.touch-selection,
-.context-menu {
- font: initial;
-}
-
-.monospace {
- font: Monospace;
-}
-
-//
-// Overshoot
-//
-// This is used by GtkScrolledWindow, when content is touch-dragged past boundaries.
-// This draws a box on top of the content, the size changes programmatically.
-.overshoot {
- &.top { @include overshoot(top); }
- &.bottom { @include overshoot(bottom); }
- &.left { @include overshoot(left); }
- &.right { @include overshoot(right); }
-}
-
-//
-// Undershoot
-//
-// Overflow indication, works similarly to the overshoot, the size if fixed tho.
-.undershoot {
- &.top { @include undershoot(top); }
- &.bottom { @include undershoot(bottom); }
- &.left { @include undershoot(left); }
- &.right { @include undershoot(right); }
-}