aboutsummaryrefslogtreecommitdiff
path: root/common/gtk-3.0/3.16/_common.scss
diff options
context:
space:
mode:
Diffstat (limited to 'common/gtk-3.0/3.16/_common.scss')
-rw-r--r--common/gtk-3.0/3.16/_common.scss179
1 files changed, 109 insertions, 70 deletions
diff --git a/common/gtk-3.0/3.16/_common.scss b/common/gtk-3.0/3.16/_common.scss
index cbb5f42..060acfe 100644
--- a/common/gtk-3.0/3.16/_common.scss
+++ b/common/gtk-3.0/3.16/_common.scss
@@ -3,6 +3,8 @@
}
$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+$asset_suffix: if($variant=='dark', '-dark', ''); // use dark assets in dark variant
+$darker_asset_suffix: if($darker=='true', '-dark', $asset_suffix);
* {
background-clip: padding-box;
@@ -230,7 +232,10 @@ GtkTextView { // This will get overridden by .view, needed by gedit line numbers
border-radius: 0;
}
- &:focus { @include entry(focus); }
+ &:focus {
+ background-clip: border-box;
+ @include entry(focus);
+ }
&:insensitive { @include entry(insensitive); }
@@ -408,6 +413,7 @@ $_dot_color: $selected_bg_color;
-gtk-image-effect: highlight;
}
&:active, &:checked {
+ background-clip: border-box;
@include button(active);
transition-duration: 50ms;
}
@@ -600,10 +606,11 @@ $_dot_color: $selected_bg_color;
to(transparent));
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
- background-position: right 3px, right 4px;
-
+ @if $variant == 'light' { background-position: right 3px, right 4px; }
+ @else { background-position: right 3px, right 2px; }
&:dir(rtl) {
- background-position: left 3px, left 4px;
+ @if $variant == 'light' { background-position: left 3px, left 4px; }
+ @else { background-position: left 3px, left 2px; }
}
}
@@ -984,7 +991,7 @@ GtkComboBox {
border-image: linear-gradient(to bottom, opacify($header_bg, 1),
darken($header_bg, 7%)) 1 0 1 0; //temporary hack for rhythmbox 3.1
- &:backdrop { background-color: lighten(opacify($header_bg, 1), 3%); }
+ &:backdrop { background-color: opacify($header_bg_backdrop, 1); }
.separator { @extend %header_separator; }
@@ -1022,7 +1029,7 @@ GtkComboBox {
border-width: 0 0 1px;
border-style: solid;
border-radius: 0;
- border-color: darken($header_bg, 7%);
+ border-color: $header_border;
color: $header_fg;
background-color: opacify($header_bg, 1);
@@ -1031,9 +1038,9 @@ GtkComboBox {
&:backdrop {
color: transparentize($header_fg, 0.3);
- background-color: lighten(opacify($header_bg, 1), 3%);
+ background-color: opacify($header_bg_backdrop, 1);
- .csd & { background-color: lighten($header_bg, 3%); } // Transparent header-bars only in csd windows
+ .csd & { background-color: $header_bg_backdrop; } // Transparent header-bars only in csd windows
}
.title {
@@ -1116,7 +1123,7 @@ GtkComboBox {
.maximized & {
background-color: opacify($header_bg, 1);
- &:backdrop { background-color: opacify(lighten($header_bg, 3%), 1); }
+ &:backdrop { background-color: opacify($header_bg_backdrop, 1); }
}
&.default-decoration {
@@ -1125,14 +1132,14 @@ GtkComboBox {
background-color: opacify($header_bg, 1);
border-bottom-width: 0;
- &:backdrop { background-color: lighten(opacify($header_bg, 1), 3%); }
+ &:backdrop { background-color: opacify($header_bg_backdrop, 1); }
}
}
.titlebar {
padding-left: 7px;
padding-right: 7px;
- border-radius: 4px 4px 0 0;
+ border-radius: if($darker=='false' and $variant=='light', 4px 4px 0 0, 3px 3px 0 0);
color: $header_fg;
background-color: opacify($header_bg, 1);
box-shadow: inset 0 1px lighten($header_bg, 3%);
@@ -1141,15 +1148,15 @@ GtkComboBox {
&:backdrop {
color: transparentize($header_fg, 0.3);
- background-color: opacify($header_bg, 1);
+ background-color: opacify($header_bg_backdrop, 1);
- .csd & { background-color: lighten($header_bg, 3%); }
+ .csd & { background-color: $header_bg_backdrop; }
}
.maximized & {
background-color: opacify($header_bg, 1);
- &:backdrop { background-color: opacify(lighten($header_bg, 3%), 1); }
+ &:backdrop { background-color: opacify($header_bg_backdrop, 1); }
}
}
@@ -1186,7 +1193,8 @@ GtkComboBox {
&:focus {
@include entry(header-focus);
- background-clip: border-box;
+
+ &.image { color: $selected_fg_color; }
}
&:insensitive { @include entry(header-insensitive); }
@@ -1323,9 +1331,13 @@ GtkComboBox {
&:insensitive { background-image: linear-gradient(to bottom, transparentize($header_fg, 0.7)); }
}
&.slider {
- background-image: linear-gradient(to bottom, mix($base_color, $header_bg, 90%));
+ background-image: linear-gradient(to bottom, if($darker == 'false', mix($base_color, $header_bg, 90%), darken($header_bg, 4%)));
+
+ &:insensitive {
+ background-image: linear-gradient(to bottom, if($darker == 'false', mix($base_color, $header_bg, 40%), darken($header_bg, 1%)));
- &:insensitive { background-image: linear-gradient(to bottom, mix($base_color, $header_bg, 40%)); }
+ @if $darker=='true' { border-color: mix($header_bg, $selected_bg_color, 60%); }
+ }
}
}
}
@@ -1464,10 +1476,10 @@ column-header.button.dnd { // for treeview-like derive widgets
border-style: none solid none none;
border-radius: 0;
border-image: linear-gradient(to bottom,
- transparentize(black, 1) 20%,
- transparentize(black, 0.89) 20%,
- transparentize(black, 0.89) 80%,
- transparentize(black, 1) 80%) 0 1 0 0 / 0 1px 0 0 stretch;
+ transparentize(if($variant == 'light', black, white), 1) 20%,
+ transparentize(if($variant == 'light', black, white), 0.89) 20%,
+ transparentize(if($variant == 'light', black, white), 0.89) 80%,
+ transparentize(if($variant == 'light', black, white), 1) 80%) 0 1 0 0 / 0 1px 0 0 stretch;
&:active { background-color: $base_color; }
&:insensitive {
@@ -1485,7 +1497,7 @@ column-header.button.dnd { // for treeview-like derive widgets
background-color: opacify($header_bg, 1);
color: $header_fg;
- &:backdrop { background-color: lighten(opacify($header_bg, 1), 3%); }
+ &:backdrop { background-color: opacify($header_bg_backdrop, 1); }
& > .menuitem {
padding: 6px 8px;
@@ -1520,8 +1532,8 @@ column-header.button.dnd { // for treeview-like derive widgets
padding: 5px;
&:hover {
color: $fg_color;
- background-color: transparentize(black, 0.96);
- border: solid transparentize(black, 0.92);
+ background-color: if($variant == 'light', transparentize(black, 0.96), transparentize(white, 0.95));
+ border: solid if($variant == 'light', transparentize(black, 0.92), transparentize(white, 0.93));
border-width: 1px 0 1px 0;
}
&:insensitive {
@@ -1562,7 +1574,7 @@ column-header.button.dnd { // for treeview-like derive widgets
background-clip: border-box;
background-color: $base_color;
- box-shadow: 0 2px 6px 1px transparentize(black, 0.93);
+ box-shadow: 0 2px 6px 1px if($variant=='light', transparentize(black, 0.93), transparentize(black, 0.65));
& .separator { color: transparentize($base_color, 1); }
.label.separator { @extend .label.separator; } // Noice
@@ -1621,7 +1633,7 @@ column-header.button.dnd { // for treeview-like derive widgets
&.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: $base_color;
+ background-color: mix($base_color, $bg_color, 50%);
// this is the shading of the header behind the tabs
&.frame {
@@ -1632,7 +1644,7 @@ column-header.button.dnd { // for treeview-like derive widgets
&.left { border-right-width: 0; }
}
- $_header_border: lighten($borders_color, 5%);
+ $_header_border: if($variant == 'light', lighten($borders_color, 5%), $borders_color);
&.top {
box-shadow: inset 0 -1px $_header_border; // border
}
@@ -1692,8 +1704,8 @@ column-header.button.dnd { // for treeview-like derive widgets
border-width: 1px;
border-#{$_tab}-width: 0;
border-color: $borders_color;
- background-color: transparentize(black, 0.98);
- &:hover { background-color: transparentize(black, 0.98); }
+ background-color: if($variant == 'light', transparentize(black, 0.965), transparentize(black, 0.85));
+ &:hover { background-color: if($variant == 'light', transparentize(black, 0.965), transparentize(black, 0.85)); }
}
}
}
@@ -1768,7 +1780,7 @@ $_scrollbar_bg_color: darken($base_color, 1%);
.slider {
margin: 0;
background-color: mix($fg_color, $bg_color, 70%);
- border: 1px solid transparentize(white, 0.4);
+ border: 1px solid if($variant == 'light', transparentize(white, 0.4), transparentize(black, 0.7));
background-clip: padding-box;
}
@@ -1878,6 +1890,7 @@ $_scrollbar_bg_color: darken($base_color, 1%);
GtkSwitch {
font: 1;
-GtkSwitch-slider-width: 41;
+ outline-color: transparent;
&.trough, &.slider {
background-size: 52px 24px;
@@ -1893,7 +1906,7 @@ GtkSwitch {
}
}
-@each $i,$j in ('',''), ('.header-bar ','-header'), ('.list-row:selected ','-selected') {
+@each $i,$j in ('',''), ('.list-row:selected ','-selected') {
@each $k,$l in ('',''),
(':active','-active'),
@@ -1903,13 +1916,22 @@ GtkSwitch {
// load switch troughs from .png files in assets directory
#{$i}GtkSwitch.trough#{$k} {
- background-image: -gtk-scaled(url("assets/switch#{$l}#{$j}.png"),url("assets/switch#{$l}#{$j}@2.png"));
+ background-image: -gtk-scaled(url("assets/switch#{$l}#{$asset_suffix}.png"),url("assets/switch#{$l}#{$asset_suffix}@2.png"));
+ }
+
+ .list-row:selected GtkSwitch.trough#{$k} {
+ background-image: -gtk-scaled(url("assets/switch#{$l}-selected.png"),url("assets/switch#{$l}-selected@2.png"));
+ }
+
+ .header-bar GtkSwitch.trough#{$k},
+ .primary-toolbar GtkSwitch.trough#{$k} {
+ background-image: -gtk-scaled(url("assets/switch#{$l}-header#{$darker_asset_suffix}.png"),url("assets/switch#{$l}-header#{$darker_asset_suffix}@2.png"));
}
// load switch sliders from .png files in assets directory
//#{$i}GtkSwitch.slider#{$k} {
- // background-image: -gtk-scaled(url("assets/switch-slider#{$l}#{$j}.png"),url("assets/switch-slider#{$l}#{$j}@2.png"));
+ // background-image: -gtk-scaled(url("assets/switch-slider#{$l}#{$j}#{$asset_suffix}.png"),url("assets/switch-slider#{$l}#{$j}#{$asset_suffix}@2.png"));
//}
}
}
@@ -1932,8 +1954,8 @@ GtkSwitch {
(':checked', '-checked'),
(':checked:insensitive','-checked-insensitive') {
.#{$w}#{$s} {
- -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}.png"),
- url("assets/#{$a}#{$as}@2.png"));
+ -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}#{$asset_suffix}.png"),
+ url("assets/#{$a}#{$as}#{$asset_suffix}@2.png"));
}
// the borders of checks and radios are
// too similar in luminosity to the selected background color, hence
@@ -1951,8 +1973,8 @@ GtkSwitch {
(':checked', '-checked-selectionmode') {
GtkIconView.view.check#{$s},
GtkFlowBox.view.check#{$s} {
- -gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}.png"),
- url("assets/checkbox#{$as}@2.png"));
+ -gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"),
+ url("assets/checkbox#{$as}#{$asset_suffix}@2.png"));
background-color: transparent;
}
}
@@ -1986,7 +2008,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
}
&.slider {
background-clip: border-box;
- background-image: linear-gradient(to bottom, $base_color);
+ background-image: linear-gradient(to bottom, $entry_bg);
border: 1px solid $selected_bg_color;
border-radius: 50%;
box-shadow: none;
@@ -1996,7 +2018,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
border-color: $selected_bg_color;
}
&:insensitive {
- background-image: linear-gradient(to bottom, mix($base_color, $bg_color, 55%));
+ background-image: linear-gradient(to bottom, mix($entry_bg, $bg_color, 55%));
border-color: mix($selected_bg_color, $bg_color, 55%);
}
&:active {
@@ -2034,9 +2056,12 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
}
}
&.trough {
+
+ $_scale_trough_bg: if($variant == 'light', $button_border, darken($base_color, 4%));
+
border: none;
border-radius: 2.5px;
- background-image: linear-gradient(to bottom, $button_border);
+ background-image: linear-gradient(to bottom, $_scale_trough_bg);
&.highlight {
background-image: linear-gradient(to bottom, $selected_bg_color);
@@ -2045,7 +2070,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
}
}
&:insensitive {
- background-image: linear-gradient(to bottom, transparentize($button_border, 0.45));
+ background-image: linear-gradient(to bottom, transparentize($_scale_trough_bg, 0.45));
}
//OSD troughs
@@ -2111,7 +2136,7 @@ GtkProgressBar {
GtkProgressBar.trough {
border: none;
border-radius: 3px;
- background-color: $button_border;
+ background-color: if($variant == 'light', $button_border, darken($base_color, 4%));
&.osd {
border-style: none;
@@ -2225,7 +2250,7 @@ GtkScrolledWindow {
border-radius: 0; // and no rounded corners
box-shadow: none; // and no box-shadow
&:hover {
- background-color: transparentize(black, 0.95);
+ background-color: if($variant == 'light', transparentize(black, 0.95), transparentize(white, 0.97));
}
&:active {
color: $fg_color;
@@ -2258,14 +2283,27 @@ GtkScrolledWindow {
.app-notification,
.app-notification.frame {
+ @extend %osd;
padding: 10px;
- border-radius: 0 0 2.5px 2.5px;
- border-width: 0 1px 1px;
+ background-color: $osd_bg_color;
+ background-clip: border-box;
+ border-radius: 0 0 2px 2px;
+ border-width: 0 1px 1px 1px;
border-style: solid;
- border-color: rgba(0,0,0,0.2);
- background-color: $base_color;
-
- background-clip: padding-box;
+ border-color: darken($osd_bg_color, 10%);
+
+ .button {
+ @include button(osd);
+ &.flat {
+ @extend %undecorated_button;
+ border-color: transparentize($selected_bg_color, 1);
+ &:insensitive { @extend %undecorated_button; }
+ }
+ &:hover { @include button(osd-hover); }
+ &:active, &:checked { @include button(osd-active); }
+ &:insensitive { @include button(osd-insensitive);
+ }
+ }
}
/*************
@@ -2645,38 +2683,39 @@ GtkVolumeButton.button { padding: 8px; }
*********************/
.window-frame {
- border-radius: 4px 4px 0 0;
+ 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: transparentize(black, 0.9);
- $_wm_border_backdrop: transparentize(black, 0.9);
+ $_wm_border: if($variant=='light', transparentize(black, 0.9), transparentize(black, 0.45));
- box-shadow: 0 0 0 1px $_wm_border, 0 4px 8px 1px $_wm_border;
+ box-shadow: 0 0 0 1px if($darker=='true' or $variant == 'dark', darken($header_bg, 7%), $_wm_border),
+ 0 4px 8px 1px if($darker == 'false', $_wm_border, opacify($_wm_border, 0.15));
/* this is used for the resize cursor area */
margin: 10px;
&:backdrop {
- box-shadow: 0 0 0 1px $_wm_border, 0 4px 5px 2px $_wm_border_backdrop;
+ box-shadow: 0 0 0 1px if($darker=='true' or $variant == 'dark', darken($header_bg, 7%), $_wm_border),
+ 0 4px 5px 2px if($darker == 'false', $_wm_border, opacify($_wm_border, 0.15));
}
&.tiled {
border-radius: 0;
}
// server-side decorations as used by mutter
&.ssd {
- border-radius: 4px 4px 0 0;
- box-shadow: 0 0 0 1px $_wm_border;
+ border-radius: if($darker=='false' and $variant=='light', 4px 4px 0 0, 3px 3px 0 0);
+ box-shadow: 0 0 0 1px if($darker=='true' or $variant == 'dark', darken($header_bg, 7%), $_wm_border);
&.maximized { border-radius: 0; }
}
&.csd {
&.popup, &.menu {
border-radius: 3px;
- box-shadow: 0 3px 6px $_wm_border,
- 0 0 0 1px $_wm_border;
+ box-shadow: 0 3px 6px if($variant == 'light', $_wm_border, transparentize($_wm_border, 0.1)),
+ 0 0 0 1px if($variant == 'light', $_wm_border, darken($base_color, 10%));
}
&.tooltip {
border-radius: 2px;
@@ -2730,20 +2769,20 @@ GtkVolumeButton.button { padding: 8px; }
&:backdrop { opacity: 1; }
}
- &.close { background-image: -gtk-scaled(url('assets/titlebutton-close.png'),url('assets/titlebutton-close@2.png')); }
- &.close:backdrop { background-image: -gtk-scaled(url('assets/titlebutton-close-backdrop.png'),url('assets/titlebutton-close-backdrop@2.png')); }
- &.close:hover { background-image: -gtk-scaled(url('assets/titlebutton-close-hover.png'),url('assets/titlebutton-close-hover@2.png')); }
- &.close:active { background-image: -gtk-scaled(url('assets/titlebutton-close-active.png'),url('assets/titlebutton-close-active@2.png')); }
+ &.close { background-image: -gtk-scaled(url('assets/titlebutton-close#{$darker_asset_suffix}.png'),url('assets/titlebutton-close#{$darker_asset_suffix}@2.png')); }
+ &.close:backdrop { background-image: -gtk-scaled(url('assets/titlebutton-close-backdrop#{$darker_asset_suffix}.png'),url('assets/titlebutton-close-backdrop#{$darker_asset_suffix}@2.png')); }
+ &.close:hover { background-image: -gtk-scaled(url('assets/titlebutton-close-hover#{$darker_asset_suffix}.png'),url('assets/titlebutton-close-hover#{$darker_asset_suffix}@2.png')); }
+ &.close:active { background-image: -gtk-scaled(url('assets/titlebutton-close-active#{$darker_asset_suffix}.png'),url('assets/titlebutton-close-active#{$darker_asset_suffix}@2.png')); }
- &.maximize { background-image: -gtk-scaled(url('assets/titlebutton-max.png'),url('assets/titlebutton-max@2.png')); }
- &.maximize:backdrop { background-image: -gtk-scaled(url('assets/titlebutton-max-backdrop.png'),url('assets/titlebutton-max-backdrop@2.png')); }
- &.maximize:hover { background-image: -gtk-scaled(url('assets/titlebutton-max-hover.png'),url('assets/titlebutton-max-hover@2.png')); }
- &.maximize:active { background-image: -gtk-scaled(url('assets/titlebutton-max-active.png'),url('assets/titlebutton-max-active@2.png')); }
+ &.maximize { background-image: -gtk-scaled(url('assets/titlebutton-max#{$darker_asset_suffix}.png'),url('assets/titlebutton-max#{$darker_asset_suffix}@2.png')); }
+ &.maximize:backdrop { background-image: -gtk-scaled(url('assets/titlebutton-max-backdrop#{$darker_asset_suffix}.png'),url('assets/titlebutton-max-backdrop#{$darker_asset_suffix}@2.png')); }
+ &.maximize:hover { background-image: -gtk-scaled(url('assets/titlebutton-max-hover#{$darker_asset_suffix}.png'),url('assets/titlebutton-max-hover#{$darker_asset_suffix}@2.png')); }
+ &.maximize:active { background-image: -gtk-scaled(url('assets/titlebutton-max-active#{$darker_asset_suffix}.png'),url('assets/titlebutton-max-active#{$darker_asset_suffix}@2.png')); }
- &.minimize { background-image: -gtk-scaled(url('assets/titlebutton-min.png'),url('assets/titlebutton-min@2.png')); }
- &.minimize:backdrop { background-image: -gtk-scaled(url('assets/titlebutton-min-backdrop.png'),url('assets/titlebutton-min-backdrop@2.png')); }
- &.minimize:hover { background-image: -gtk-scaled(url('assets/titlebutton-min-hover.png'),url('assets/titlebutton-min-hover@2.png')); }
- &.minimize:active { background-image: -gtk-scaled(url('assets/titlebutton-min-active.png'),url('assets/titlebutton-min-active@2.png')); }
+ &.minimize { background-image: -gtk-scaled(url('assets/titlebutton-min#{$darker_asset_suffix}.png'),url('assets/titlebutton-min#{$darker_asset_suffix}@2.png')); }
+ &.minimize:backdrop { background-image: -gtk-scaled(url('assets/titlebutton-min-backdrop#{$darker_asset_suffix}.png'),url('assets/titlebutton-min-backdrop#{$darker_asset_suffix}@2.png')); }
+ &.minimize:hover { background-image: -gtk-scaled(url('assets/titlebutton-min-hover#{$darker_asset_suffix}.png'),url('assets/titlebutton-min-hover#{$darker_asset_suffix}@2.png')); }
+ &.minimize:active { background-image: -gtk-scaled(url('assets/titlebutton-min-active#{$darker_asset_suffix}.png'),url('assets/titlebutton-min-active#{$darker_asset_suffix}@2.png')); }
}
}