diff options
Diffstat (limited to 'common/gtk-3.0/3.16/_common.scss')
-rw-r--r-- | common/gtk-3.0/3.16/_common.scss | 100 |
1 files changed, 52 insertions, 48 deletions
diff --git a/common/gtk-3.0/3.16/_common.scss b/common/gtk-3.0/3.16/_common.scss index c77cf31..b378684 100644 --- a/common/gtk-3.0/3.16/_common.scss +++ b/common/gtk-3.0/3.16/_common.scss @@ -3,6 +3,7 @@ } $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 * { background-clip: padding-box; @@ -600,10 +601,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 +986,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 +1024,7 @@ GtkComboBox { border-width: 0 0 1px; border-style: solid; border-radius: 0; - border-color: darken($header_bg, 7%); + border-color: if($variant == 'light', darken($header_bg, 7%), darken($header_bg, 5%)); color: $header_fg; background-color: opacify($header_bg, 1); @@ -1031,9 +1033,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 +1118,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,7 +1127,7 @@ 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); } } } @@ -1141,15 +1143,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); } } } @@ -1187,6 +1189,8 @@ GtkComboBox { &:focus { @include entry(header-focus); background-clip: border-box; + + &.image { color: $selected_fg_color; } } &:insensitive { @include entry(header-insensitive); } @@ -1464,10 +1468,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 +1489,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; @@ -1507,7 +1511,7 @@ column-header.button.dnd { // for treeview-like derive widgets margin: 4px; padding: 0; border-radius: 0; - background-color: $base_color; + background-color: if($variant == 'light', $base_color, darken($base_color, 3%)); border: 1px solid $borders_color; .csd & { @@ -1520,8 +1524,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 { @@ -1560,7 +1564,7 @@ column-header.button.dnd { // for treeview-like derive widgets border: 1px solid darken($borders_color, 5%); border-radius: 3px; background-clip: border-box; - background-color: $base_color; + background-color: if($variant == 'light', $base_color, darken($base_color, 3%)); box-shadow: 0 2px 6px 1px transparentize(black, 0.93); @@ -1632,7 +1636,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%), lighten($borders_color, 1%)); &.top { box-shadow: inset 0 -1px $_header_border; // border } @@ -1692,8 +1696,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.98), transparentize(black, 0.9)); + &:hover { background-color: if($variant == 'light', transparentize(black, 0.98), transparentize(black, 0.9)); } } } } @@ -1768,7 +1772,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; } @@ -1903,13 +1907,13 @@ 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}#{$j}#{$asset_suffix}.png"),url("assets/switch#{$l}#{$j}#{$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 +1936,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 +1955,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; } } @@ -2225,7 +2229,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; @@ -2650,8 +2654,8 @@ GtkVolumeButton.button { padding: 8px; } // 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.35)); + $_wm_border_backdrop: if($variant=='light', transparentize(black, 0.9), transparentize(black, 0.35)); box-shadow: 0 0 0 1px $_wm_border, 0 4px 8px 1px $_wm_border; @@ -2674,8 +2678,8 @@ GtkVolumeButton.button { padding: 8px; } &.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, transparentize($_wm_border, 0.1)); } &.tooltip { border-radius: 2px; @@ -2729,20 +2733,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#{$asset_suffix}.png'),url('assets/titlebutton-close#{$asset_suffix}@2.png')); } + &.close:backdrop { background-image: -gtk-scaled(url('assets/titlebutton-close-backdrop#{$asset_suffix}.png'),url('assets/titlebutton-close-backdrop#{$asset_suffix}@2.png')); } + &.close:hover { background-image: -gtk-scaled(url('assets/titlebutton-close-hover#{$asset_suffix}.png'),url('assets/titlebutton-close-hover#{$asset_suffix}@2.png')); } + &.close:active { background-image: -gtk-scaled(url('assets/titlebutton-close-active#{$asset_suffix}.png'),url('assets/titlebutton-close-active#{$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#{$asset_suffix}.png'),url('assets/titlebutton-max#{$asset_suffix}@2.png')); } + &.maximize:backdrop { background-image: -gtk-scaled(url('assets/titlebutton-max-backdrop#{$asset_suffix}.png'),url('assets/titlebutton-max-backdrop#{$asset_suffix}@2.png')); } + &.maximize:hover { background-image: -gtk-scaled(url('assets/titlebutton-max-hover#{$asset_suffix}.png'),url('assets/titlebutton-max-hover#{$asset_suffix}@2.png')); } + &.maximize:active { background-image: -gtk-scaled(url('assets/titlebutton-max-active#{$asset_suffix}.png'),url('assets/titlebutton-max-active#{$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#{$asset_suffix}.png'),url('assets/titlebutton-min#{$asset_suffix}@2.png')); } + &.minimize:backdrop { background-image: -gtk-scaled(url('assets/titlebutton-min-backdrop#{$asset_suffix}.png'),url('assets/titlebutton-min-backdrop#{$asset_suffix}@2.png')); } + &.minimize:hover { background-image: -gtk-scaled(url('assets/titlebutton-min-hover#{$asset_suffix}.png'),url('assets/titlebutton-min-hover#{$asset_suffix}@2.png')); } + &.minimize:active { background-image: -gtk-scaled(url('assets/titlebutton-min-active#{$asset_suffix}.png'),url('assets/titlebutton-min-active#{$asset_suffix}@2.png')); } } } |