diff options
Diffstat (limited to 'common/gtk-3.0/3.16/_common.scss')
| -rw-r--r-- | common/gtk-3.0/3.16/_common.scss | 172 |
1 files changed, 104 insertions, 68 deletions
diff --git a/common/gtk-3.0/3.16/_common.scss b/common/gtk-3.0/3.16/_common.scss index c77cf31..1b15c33 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; @@ -600,10 +602,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 +987,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 +1025,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 +1034,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 +1119,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 +1128,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 +1144,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 +1190,8 @@ GtkComboBox { &:focus { @include entry(header-focus); background-clip: border-box; + + &.image { color: $selected_fg_color; } } &:insensitive { @include entry(header-insensitive); } @@ -1323,9 +1328,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, mix($base_color, $header_bg, 40%)); } + &:insensitive { + background-image: linear-gradient(to bottom, if($darker == 'false', mix($base_color, $header_bg, 40%), darken($header_bg, 1%))); + + @if $darker=='true' { border-color: mix($header_bg, $selected_bg_color, 60%); } + } } } } @@ -1464,10 +1473,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 +1494,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 +1529,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 +1571,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 +1630,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 +1641,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 +1701,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 +1777,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 +1887,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 +1903,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 +1913,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 +1951,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 +1970,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 +2005,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 +2015,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 +2053,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 +2067,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 +2133,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 +2247,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 +2280,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); + } + } } /************* @@ -2644,38 +2679,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; @@ -2729,20 +2765,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')); } } } |