diff --git a/src/_colors.scss b/src/_colors.scss index c406506..d5b49ae 100644 --- a/src/_colors.scss +++ b/src/_colors.scss @@ -1,115 +1,117 @@ +@charset "UTF-8"; + //apps rely on some named colors to be exported /* GTK NAMED COLORS ---------------- use responsibly! */ // Sass thinks we're using the colors in the variables as strings and may shoot // warning, it's innocuous and can be defeated by using "" + $var /* widget text/foreground color */ @define-color theme_fg_color #{"" + w_color(text)}; /* text color for entries, views and content in general */ @define-color theme_text_color #{"" +v_color(text)}; /* widget base background color */ @define-color theme_bg_color #{"" +w_color(normal)}; /* text widgets and the like base background color */ @define-color theme_base_color #{"" +v_color(normal)}; /* base background color of selections */ @define-color theme_selected_bg_color #{"" +s_color(normal)}; /* text/foreground color of selections */ @define-color theme_selected_fg_color #{"" +s_color(text)}; /* base background color of insensitive widgets */ @define-color insensitive_bg_color #{"" +insensitive(w_color(normal))}; /* text foreground color of insensitive widgets */ @define-color insensitive_fg_color #{"" +insensitive(w_color(text))}; /* insensitive text widgets and the like base background color */ @define-color insensitive_base_color #{"" +insensitive(v_color(text))}; /* widget text/foreground color on backdrop windows */ @define-color theme_unfocused_fg_color #{"" +backdrop(w_color(text))}; /* text color for entries, views and content in general on backdrop windows */ @define-color theme_unfocused_text_color #{"" +backdrop(v_color(text))}; /* widget base background color on backdrop windows */ @define-color theme_unfocused_bg_color #{"" +backdrop(w_color(normal))}; /* text widgets and the like base background color on backdrop windows */ @define-color theme_unfocused_base_color #{"" +backdrop(v_color(normal))}; /* base background color of selections on backdrop windows */ @define-color theme_unfocused_selected_bg_color #{"" +backdrop(s_color(backdrop))}; /* text/foreground color of selections on backdrop windows */ @define-color theme_unfocused_selected_fg_color #{"" + backdrop(s_color(text))}; /* widgets main borders color */ @define-color borders #{"" +$border_color}; /* widgets main borders color on backdrop windows */ @define-color unfocused_borders #{"" +backdrop($border_color)}; /* widgets main borders color insensitive */ @define-color insensitive_borders #{"" +insensitive($border_color)}; /* these are pretty self explicative */ @define-color warning_color #{"" +$warning_color}; @define-color error_color #{"" +$error_color}; @define-color success_color #{"" +$success_color}; //@define-color destructive_color #{$destructive_color} //WM // $_wm_highlight: if($variant=='light', $top_hilight, // Sass gets mad if this is // transparentize(black,1)); // done directly in the // // color definition // // /* // these colors are exported for the window manager and shouldn't be used in applications, // read if you used those and something break with a version upgrade you're on your own... */ // @define-color wm_title #{$titlebar_fg_color}; // @define-color wm_unfocused_title #{$backdrop_fg_color}; // @define-color wm_highlight #{"" + $_wm_highlight}; // @define-color wm_borders_edge #{"" + $borders_edge}; // // @define-color wm_bg_a #{$titlebar_bg_color}; // @define-color wm_bg_b #{$titlebar_bg_color}; // // @define-color wm_shadow alpha(black, 0.35); // @define-color wm_border alpha(black, 0.18); // // @define-color wm_button_hover_color_a shade(#{$bg_color}, 1.3); // @define-color wm_button_hover_color_b #{$bg_color}; // @define-color wm_button_active_color_a shade(#{$bg_color}, 0.85); // @define-color wm_button_active_color_b shade(#{$bg_color}, 0.89); // @define-color wm_button_active_color_c shade(#{$bg_color}, 0.9); //FIXME this is really an API @define-color content_view_bg #{"" + v_color(normal)}; diff --git a/src/_functions.scss b/src/_functions.scss index e9cfb4a..7adce8e 100644 --- a/src/_functions.scss +++ b/src/_functions.scss @@ -1,258 +1,260 @@ +@charset "UTF-8"; + // // Theme color functions // // Button Color @function b_color($c: normal) { @if $c == normal { @return $ButtonBackgroundNormal; } @if $c == hover { @return $ButtonDecorationHover; } @if $c == active { @return $ButtonDecorationFocus; } @if $c == text { @return $ButtonForegroundNormal; } @if $c == active-text { @return $SelectionForegroundNormal; } } // Selection Color @function s_color($c: normal) { @if $c == normal { @return $SelectionBackgroundNormal; } @if $c == hover { @return $SelectionDecorationHover; } @if $c == text { @return $SelectionForegroundNormal; } @if $c == backdrop { @return transparentize($SelectionBackgroundNormal,0.5); } } // View Color @function v_color($c: normal) { @if $c == normal { @return $ViewBackgroundNormal; } @if $c == hover { @return $ViewDecorationHover; } @if $c == active { @return $ViewDecorationFocus; } @if $c == text { @return $ViewForegroundNormal; } } // Window Color @function w_color($c: normal) { @if $c == normal { @return $WindowBackgroundNormal; } @if $c == text { @return $WindowForegroundNormal; } } // Titlebar color @function t_color($c: text) { @if $c == text { @return $WindowForegroundNormal; } @if $c == background { @return $WindowBackgroundNormal; } @if $c == background-light { @return $WindowBackgroundNormal; } @if $c == backdrop-text { @return $WMinactiveForeground; } @if $c == backdrop-background { @return $WindowBackgroundNormal; } } @function tooltip($c: text) { @if $c == text { @return $TooltipForegroundNormal; } @if $c == background { @return $TooltipBackgroundNormal; } @if $c == border { @return mix($TooltipForegroundNormal, $TooltipBackgroundNormal, 25%); } } @function button_gradient($c, $state: normal) { @if $state == normal { @return linear-gradient(to bottom, change-color($c, $lightness: min(lightness($c)*1.01,100%)), change-color($c, $lightness:min(lightness($c)/1.03,100%))); } @else { @return linear-gradient(to bottom, change-color($c, $lightness: min(lightness($c)*1.03,100%)), change-color($c, $lightness:min(lightness($c)/1.10,100%))); } } $border_color: mix($WindowBackgroundNormal,$WindowForegroundNormal, 75%); $menu_color: w_color(normal); $link_color: $ViewForegroundLink; $link_visited_color: $ViewForegroundVisited; $warning_color: $ViewForegroundNeutral; $error_color: $ViewForegroundNegative; $success_color: $ViewForegroundPositive; $destructive_color: $error_color; $trough_color: mix(w_color(normal),w_color(text),70%); $scrollbar_color: mix($trough_color,v_color(text),50%); // // Color effects // // // Color maps for color effect functions // $Color: ( Disabled: $DisabledColor, Inactive: $InactiveColor ); $ColorAmount: ( Disabled: $DisabledColorAmount, Inactive: $InactiveColorAmount ); $ColorEffect: ( Disabled: $DisabledColorEffect, Inactive: $InactiveColorEffect ); $ContrastAmount: ( Disabled: $DisabledContrastAmount, Inactive: $InactiveContrastAmount ); $ContrastEffect: ( Disabled: $DisabledContrastEffect, Inactive: $InactiveContrastEffect ); $IntensityAmount: ( Disabled: $DisabledIntensityAmount, Inactive: $InactiveIntensityAmount ); $IntensityEffect: ( Disabled: $DisabledIntensityEffect, Inactive: $InactiveIntensityEffect ); $r: 3px; // standard radius @function insensitive($c) { @return Color(Intensity(Contrast($c, Disabled), Disabled), Disabled); } @function backdrop($c) { @if $InactiveEnable == true { @return Color(Intensity(Contrast($c, Inactive), Inactive), Inactive); } @else { @return $c; } } @function Contrast($c, $state) { @if map-get($ContrastEffect, $state) == 0 { @return $c; } @if map-get($ContrastEffect, $state) == 1 { @if lightness(w_color()) > lightness(w_color(text)) { @if lightness($c) < lightness(w_color()) or ($c == t_color(text) and lightness(t_color(background)) <= lightness(t_color(text))) { @return transparentize($c, map-get($ContrastAmount, $state)); } @else { @return $c; } } @if lightness(w_color()) <= lightness(w_color(text)) { @if lightness($c) > lightness(w_color()) or ($c == t_color(text) and lightness(t_color(background)) > lightness(t_color(text))) { @return transparentize($c, map-get($ContrastAmount, $state)); } @else { @return $c; } } } @if map-get($ContrastEffect, $state) == 2 { @if lightness(w_color()) > lightness(w_color(text)) { // don't know what a reasonable lightness treshhold is for Contrast @if lightness($c) < lightness(w_color()) or ($c == t_color(text) and lightness(t_color(background)) <= lightness(t_color(text))) { @return transparentize($c, map-get($ContrastAmount, $state)); } @else { @return $c; } } @if lightness(w_color()) <= lightness(w_color(text)) { @if lightness($c) > lightness(w_color()) or ($c == t_color(text) and lightness(t_color(background)) > lightness(t_color(text))){ @return transparentize($c, map-get($ContrastAmount, $state)); } @else { @return $c; } } } } @function Color($c, $state) { @if map-get($ColorEffect, $state) ==0 { @return $c; } @if map-get($ColorEffect, $state) ==1 { @if map-get($ColorAmount, $state) >=0 { @return desaturate($c, percentage(map-get($ColorAmount, $state))); } @else { @return saturate($c, percentage(abs(map-get($ColorAmount, $state)))); } } @if map-get($ColorEffect, $state)==2 or map-get($ColorEffect, $state)==3 { // 2 and 3 seem to do the same @return mix(map-get($Color, $state),$c, percentage(map-get($ColorAmount, $state))); } } @function Intensity($c, $state) { @if map-get($IntensityEffect, $state) == 0 { @return $c; } @if map-get($IntensityEffect, $state) == 1 { @if map-get($IntensityAmount, $state) >= 0 { @return mix(white, $c, percentage(map-get($IntensityAmount, $state))); } @else { @return mix(black, $c, percentage(abs(map-get($IntensityAmount, $state)))); } } @if map-get($IntensityEffect, $state) == 2 { @if map-get($IntensityAmount, $state) == -1 { @return change-color($c, $lightness: 100%); } @else { @return change-color($c, $lightness: min(lightness($c)/(1+map-get($IntensityAmount, $state)),100%)); } } @if map-get($IntensityEffect, $state) == 3 { @return change-color($c, $lightness: min(lightness($c)*(1+map-get($IntensityAmount, $state)),100%)); } } @function alpha2solid($c,$background) { $amount:alpha($c); $c:rgb(red($c),green($c),blue($c)); @return mix($c,$background,$amount); } diff --git a/src/gtk318/gtk.scss b/src/gtk318/gtk.scss index 2887989..8147294 100644 --- a/src/gtk318/gtk.scss +++ b/src/gtk318/gtk.scss @@ -1,31 +1,33 @@ +@charset "UTF-8"; + @import 'global'; @import '../functions'; @import '../colors'; @import "widgets/base"; @import "widgets/button"; @import "widgets/entry"; @import "widgets/app_notifications"; @import "widgets/calendar"; @import "widgets/checkboxes"; @import "widgets/color_chooser"; @import "widgets/dialogs"; @import "widgets/headerbar"; @import "widgets/infobar"; @import "widgets/link"; @import "widgets/lists"; @import "widgets/menus"; @import "widgets/misc"; @import "widgets/notebook"; @import "widgets/overshoot"; @import "widgets/pathbar"; @import "widgets/progressbar"; @import "widgets/scale"; @import "widgets/scrollbar"; @import "widgets/sidebar"; @import "widgets/spinbutton"; @import "widgets/switch"; @import "widgets/toolbar"; @import "widgets/tooltips"; @import "widgets/treeview"; @import "widgets/window_decorations"; diff --git a/src/gtk318/widgets/_app_notifications.scss b/src/gtk318/widgets/_app_notifications.scss index d68dff2..bc916c2 100644 --- a/src/gtk318/widgets/_app_notifications.scss +++ b/src/gtk318/widgets/_app_notifications.scss @@ -1,43 +1,45 @@ +@charset "UTF-8"; + /********************* * App Notifications * *********************/ .app-notification, .app-notification.frame { @extend %osd; padding: 10px; border-top-width: 0px; border-radius: 0px 0px 3px 3px; &:backdrop { background-image: none; } .button { @include button(normal); &.flat { @extend %undecorated_button; icon-shadow: none; text-shadow: none; &:hover { @extend %undecorated_button; color: b_color(hover); } &:active { @extend %undecorated_button; color: b_color(active); } &:backdrop, &:insensitive, &:backdrop:insensitive { @extend %undecorated_button; } } &:hover { @include button(hover); } &:active, &:checked, &:backdrop:active, &:backdrop:checked { @include button(active); } &:insensitive, &:backdrop:insensitive { @include button(insensitive); } &:backdrop { @include button(backdrop); } } } diff --git a/src/gtk318/widgets/_base.scss b/src/gtk318/widgets/_base.scss index 288bcc1..547e87e 100644 --- a/src/gtk318/widgets/_base.scss +++ b/src/gtk318/widgets/_base.scss @@ -1,208 +1,210 @@ +@charset "UTF-8"; + @function gtkalpha($c,$a) { @return unquote("alpha(#{$c},#{$a})"); } $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); * { padding: 0; -GtkToolButton-icon-spacing: 4; -GtkTextView-error-underline-color: $error_color; -GtkButton-child-displacement-x: 0; -GtkButton-child-displacement-y: 0; -GtkCheckButton-indicator-size: 18; -GtkCheckMenuItem-indicator-size: 18; // 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; -GtkToolItemGroup-expander-size: 11; -GtkExpander-expander-size: 16; -GtkTreeView-expander-size: 11; -GtkTreeView-horizontal-separator: 4; -GtkMenu-horizontal-padding: 0; -GtkMenu-vertical-padding: 0; -GtkWidget-link-color: $link_color; -GtkWidget-visited-link-color: $link_visited_color; -GtkWidget-focus-padding: 2; // FIXME: do we still need these? -GtkWidget-focus-line-width: 1; // -GtkWidget-text-handle-width: 20; -GtkWidget-text-handle-height: 20; -GtkDialog-button-spacing: 4; -GtkDialog-action-area-border: 0; -GtkStatusbar-shadow-type: none; outline-width: 0px; } /*************** * Base States * ***************/ .background { color: w_color(text); background-color: w_color(normal); &:backdrop { text-shadow: none; icon-shadow: none; color: backdrop(w_color(text)); background-color: backdrop(w_color(normal)); } } /* 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; } .gtkstyle-fallback { background-color: w_color(normal); color: w_color(text); &:prelight { background-color: lighten(w_color(normal), 10%); color: w_color(text); } &:active { background-color: darken(w_color(normal), 10%); color: w_color(text); } &:insensitive { background-color: insensitive(w_color(normal)); color: insensitive(w_color(text)); } &:selected { background-color: s_color(normal); color: s_color(text); } } .view { color: v_color(text); background-color: v_color(normal); &:backdrop { color: backdrop(v_color(text)); background-color: backdrop(v_color(normal)); } &:selected { border-radius: $r; @extend %selected_items; } &:insensitive { color: insensitive(v_color(text)); } } .rubberband { border: 1px solid s_color(normal); background-color: transparentize(s_color(normal),0.8); &:backdrop { border-color: backdrop(s_color(normal)); background-color: backdrop(transparentize(s_color(normal),0.8)); } } .label { &.separator { color: w_color(text); @extend .dim-label; &:backdrop { color: backdrop(w_color(text)); } } &:selected, &:selected:focus, &:selected:hover { @extend %selected_items; } &:insensitive { color: insensitive(w_color(text)); &:backdrop { color: backdrop(insensitive(w_color(text))); } } } .dim-label { opacity: 0.5; text-shadow: none; } GtkAssistant { .sidebar { background-color: v_color(text); border-top: 1px solid $border_color; &:dir(ltr) { border-right: 1px solid $border_color; } &:dir(rtl) { border-left: 1px solid $border_color; } &:backdrop { background-color: backdrop(v_color(text)); border-color: backdrop($border_color); } } &.csd .sidebar { border-top-style: none; } .sidebar .label { padding: 6px 12px; } .sidebar .label.highlight { background-color: mix(v_color(normal), v_color(text), 80%); } } GtkTextView { // This will get overridden by .view, needed by gedit line numbers background-color: mix(w_color(normal), v_color(normal), 50%); &:backdrop { background-color: backdrop(mix(w_color(normal), v_color(normal), 50%)); } &:insensitive { color: insensitive(v_color(text)); } } .grid-child { padding: 3px; border-radius: $r; &:selected { @extend %selected_items; } } %osd, .osd { color: w_color(text); border: 1px solid w_color(normal); background-color: transparentize(w_color(normal),0.2); background-clip: padding-box; box-shadow: none; text-shadow: none; icon-shadow: none; &:backdrop { color: backdrop(w_color(text)); background-color: backdrop(transparentize(w_color(normal),0.2)); } } %selected_items { background-color: s_color(normal); color: s_color(text); &:backdrop { background-color: backdrop(s_color(backdrop)); color: backdrop(v_color(normal)); } } diff --git a/src/gtk318/widgets/_button.scss b/src/gtk318/widgets/_button.scss index 53fcf6a..2146a11 100644 --- a/src/gtk318/widgets/_button.scss +++ b/src/gtk318/widgets/_button.scss @@ -1,459 +1,461 @@ +@charset "UTF-8"; + // buttons @mixin button($t, $c:b_color(normal), $tc:b_color(text)) { // // Button drawing function // // $t: button type, // $c: base button color for colored* types // $tc: optional text color for colored* types // $edge: set to none to not draw the bottom edge or specify a color to not // use the default one // // possible $t values: // normal, hover, active, insensitive, insensitive-active, // backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active, // osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated // @if $t==normal { // // normal button // box-shadow: 1px 1px 1px rgba(0,0,0,0.2); text-shadow: none; icon-shadow: none; color: $tc; border-color: if($c!=b_color(normal), $c, $border_color); background-image: button_gradient($c, normal); } @else if $t==hover { // // hovered button // color: $tc; border-color: if($c!=b_color(normal), $c, b_color(hover)); } @else if $t==active { // // pushed button // color: if($tc==b_color(text),b_color(active-text), $tc); border-color: if($c!=b_color(normal), $c, b_color(active)); background-image: if($c!=b_color(normal), button_gradient($c, active), button_gradient(b_color(active),active)); } @else if $t==active-hover { // // // color: $tc; border-color: if($c!=b_color(normal), transparentize($c, 0.5), b_color(hover)); background-image: if($c!=b_color(normal), button_gradient(transparentize($c, 0.5),active), button_gradient(b_color(hover),active)); } @else if $t==insensitive { // // insensitive button // color: if($tc!=b_color(text),insensitive($tc),insensitive(b_color(text))); border-color: if($c!=b_color(normal), insensitive($c), insensitive($border_color)); background-image: if($c!=b_color(normal), button_gradient(insensitive($c), normal), button_gradient(insensitive(b_color(normal)), normal)); > .label { color: inherit; } } @else if $t==insensitive-active { // // insensitive pushed button // color: if($tc!=b_color(text), insensitive($tc), insensitive(b_color(active-text))); border-color: insensitive(b_color(active)); background-image: if($c!=b_color(normal), button_gradient(insensitive($c), active), button_gradient(insensitive(b_color(active)),active)); > .label { color: inherit; } } @else if $t==backdrop { // // backdrop button // color: backdrop($tc); border-color: backdrop($border_color); background-image: button_gradient(backdrop($c), normal); } @else if $t==backdrop-active { // // backdrop pushed button // color: if($tc!=b_color(text), backdrop($tc), backdrop(b_color(active-text))); border-color: if($c!=b_color(normal), backdrop($c), backdrop(b_color(active))); background-image: if($c!=b_color(normal), button_gradient(backdrop($c), active), button_gradient(backdrop(b_color(active)),active)); } @else if $t==backdrop-insensitive { // // backdrop insensitive button // color: backdrop(insensitive($tc)); border-color: if($c!=b_color(normal), backdrop(insensitive($c)), backdrop(insensitive($border_color))); background-image: button_gradient(backdrop(insensitive($c))); > .label { color: inherit; } } @else if $t==backdrop-insensitive-active { // // backdrop insensitive pushed button // color: if($c!=b_color(normal), backdrop(insensitive($tc)), backdrop(insensitive(b_color(active-text)))); border-color: if($c!=b_color(normal), backdrop(insensitive($c)), backdrop(insensitive(b_color(active)))); background-image: if($c!=b_color(normal), button_gradient(backdrop(insensitive($c)), active), button_gradient(backdrop(insensitive(b_color(active))),active)); > .label { color: inherit; } } @else if $t==undecorated { // // reset // border-color: transparentize(white,1); //FIXME needed? background-color: transparent; background-image: none; box-shadow:none; color: $tc; text-shadow: none; icon-shadow: none; } } /*********** * Buttons * ***********/ // stuff for .needs-attention $_dot_color: b_color(active); @keyframes needs_attention { from { background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to($_dot_color), to(transparent)); } to { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(s_color(normal)), to(transparent)); } } %buttons { $_button_transition: all 200ms $ease-out-quad; border: 1px solid; border-radius: $r; padding: 6px; background-clip: border-box; transition: $_button_transition; @include button(normal); &.flat { @include button(undecorated); // to avoid adiacent buttons borders clashing when transitioning, the transition on the normal state is set // to none, while it's added back in the hover state, so the button decoration will fade in on hover, but // it won't fade out when the pointer leave the button allocation area. To make the transition more evident // in this case the duration is increased. transition: none; &:hover { transition: $_button_transition; transition-duration: 500ms; &:active { transition: $_button_transition; } } &:checked { background-color: $border_color;} } &:hover { @include button(hover); -gtk-image-effect: highlight; // Do we want this? } &:active, &:checked { @include button(active); transition-duration: 50ms; &:hover { @include button(active-hover); } } &:backdrop { @include button(backdrop); -gtk-image-effect: none; &:active, &:checked { @include button(backdrop-active); } &:insensitive { @include button(backdrop-insensitive); } &:insensitive:active, &:insensitive:checked { @include button(backdrop-insensitive-active); } } &.flat:backdrop { -gtk-image-effect: none; @include button(undecorated); color: backdrop(b_color(text)); } &.flat:insensitive { @include button(undecorated); color: insensitive(b_color(text)); } &.flat:backdrop:insensitive { @include button(undecorated); color: backdrop(insensitive(b_color(text))); } &:insensitive { @include button(insensitive); &:active, &:checked { @include button(insensitive-active); } } } .button { @extend %buttons; &.osd { @extend %buttons; } //overlay / OSD style .osd & { @extend %buttons; } // Suggested and Destructive Action buttons @each $b_type, $button_color in (suggested-action, b_color(active)), (destructive-action, $error_color) { &.#{$b_type}, &.#{$b_type}.osd & { @include button(normal, $button_color, b_color(active-text)); &.flat { @include button(undecorated); color: $button_color; } &:hover { @include button(hover, $button_color, white); } //FIXME no hardcoded colors &:active, &:checked { @include button(active, $button_color, white); } &:backdrop, &.flat:backdrop { @include button(backdrop, $button_color, white); &:active, &:checked { @include button(backdrop-active, $button_color, white); } &:insensitive { @include button(backdrop-insensitive); &:active, &:checked { @include button(backdrop-insensitive-active, $button_color, white); } } } &.flat:backdrop, &.flat:insensitive, &.flat:backdrop:insensitive { @include button(undecorated); color: transparentize($button_color, 0.2); } &:insensitive { @include button(insensitive); &:active, &:checked { @include button(insensitive-active, $button_color, white); } } } } &.image-button { padding: 6px; } &.text-button { padding: 6px } &.text-button.image-button { // those buttons needs uneven horizontal padding, we want the icon side // to have the image-button padding, while the text side the text-button // one, so we're adding the missing padding to the label depending on // its position inside the button padding: 6px; // same as .button .label:first-child { padding-left: 8px; } .label:last-child { padding-right: 8px; } } .stack-switcher > & { // to position the needs attention dot, padding is added to the button // child, a label needs just lateral padding while an icon needs vertical // padding added too. > .label { padding-left: 6px; // label padding padding-right: 6px; // } > GtkImage { padding-left: 6px; // image padding padding-right: 6px; // padding-top: 3px; // padding-bottom: 3px; // } &.text-button { padding: 6px; // needed or it will get overridden } &.image-button { // we want image buttons to have a 1:1 aspect ratio, so compensation // of the padding added to the GtkImage is needed padding: 3px 0px; } &.needs-attention > .label, &.needs-attention > GtkImage { @extend %needs_attention; } &.needs-attention:active > .label, &.needs-attention:active > GtkImage, &.needs-attention:checked > .label, &.needs-attention:checked > GtkImage { animation: none; background-image: none; } } //inline-toolbar buttons .inline-toolbar &, .inline-toolbar &:backdrop { border-radius: $r; border-width: 1px; @extend %linked; } .primary-toolbar & { icon-shadow: none; } .linked > &, .linked > &:hover, .linked > &:active, .linked > &:checked, .linked > &:backdrop { @extend %linked; } .linked.vertical > &, .linked.vertical > &:hover, .linked.vertical > &:active, .linked.vertical > &:checked, .linked.vertical > &:backdrop { @extend %linked_vertical; } } /************** * ComboBoxes * **************/ GtkComboBox { > .button { padding: 5px 4px; } // Otherwise combos // are bigger then // buttons -GtkComboBox-arrow-scaling: 0.5; -GtkComboBox-shadow-type: none; // box-shadow: 0 1px $borders_edge; &:insensitive { color: insensitive(b_color(text)); text-shadow: none; icon-shadow: none; } &:backdrop { color: backdrop(b_color(text)); text-shadow: none; icon-shadow: none; } &:backdrop:insensitive { color: backdrop(insensitive(b_color(text))); } .menuitem { text-shadow: none; } .separator.vertical { // always disable separators -GtkWidget-wide-separators: true; } &.combobox-entry .entry { @extend %linked; } &.combobox-entry .button, &.combobox-entry .button:backdrop { // It is needed to specify the backdrop button or it gets overridden @extend %linked; } } %needs_attention { animation: needs_attention 150ms ease-in; $_dot_shadow: b_color(text); $_dot_shadow_r: 0.5; background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to($_dot_color), to(transparent)), -gtk-gradient(radial, center center, 0, center center, $_dot_shadow_r, to($_dot_shadow), to(transparent)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 4px; &:backdrop {background-size: 6px 6px, 0 0;} &:dir(rtl) { background-position: left 3px, left 4px; } } %linked_middle { border-radius: $r; &:dir(rtl) { border-radius: $r; // needed when including %linked_middle:dir(rtl) } } %linked { @extend %linked_middle; &:first-child { border-radius: $r; border-style: solid; } &:last-child { border-radius: $r; &:dir(rtl) { } } &:only-child { border-radius: $r; border-style: solid; } } %linked_vertical_middle { border-style: solid; border-radius: $r; } %linked_vertical{ @extend %linked_vertical_middle; &:first-child { border-radius: $r; } &:last-child { border-radius: $r; border-style: solid; } &:only-child { border-radius: $r; border-style: solid; } } %undecorated_button { border-color: transparent; background-color: transparent; background-image: none; box-shadow:none; text-shadow: none; icon-shadow: none; } diff --git a/src/gtk318/widgets/_calendar.scss b/src/gtk318/widgets/_calendar.scss index 22b59cd..85a2ecd 100644 --- a/src/gtk318/widgets/_calendar.scss +++ b/src/gtk318/widgets/_calendar.scss @@ -1,64 +1,66 @@ +@charset "UTF-8"; + /************ * Calendar * ***********/ GtkCalendar { color: v_color(text); border: 1px solid $border_color; background-color: v_color(normal); &:selected { background-color: $border_color; } &:insensitive { color: insensitive(v_color(text)); } &.header { border: 1px solid $border_color; border-radius: 0; color: v_color(text); &:backdrop { color: backdrop(v_color(text)); border-color: backdrop($border_color); } &:insensitive { color: insensitive(v_color(text)); } } &.button { @extend %undecorated_button; color: b_color(text); &:hover { @extend %undecorated_button; color: b_color(hover); } &:active { @extend %undecorated_button; color: b_color(active); } &:backdrop { @extend %undecorated_button; color: backdrop(b_color(text)); } } &:inconsistent, &.highlight { color: transparentize(v_color(text),0.5); } &:inconsistent:backdrop, &.highlight:backdrop { color: backdrop(transparentize(v_color(text),0.5)); } &:backdrop { color: backdrop(v_color(text)); border-color: backdrop($border_color); background-color: backdrop(v_color(normal)); } } diff --git a/src/gtk318/widgets/_checkboxes.scss b/src/gtk318/widgets/_checkboxes.scss index 240d099..7b2a368 100644 --- a/src/gtk318/widgets/_checkboxes.scss +++ b/src/gtk318/widgets/_checkboxes.scss @@ -1,83 +1,85 @@ +@charset "UTF-8"; + /************************* * 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 @each $w,$a in ('check', 'check'), ('radio','radio') { //standard checks and radios @each $s,$as in ('','-unchecked'), (':hover', '-unchecked-hover'), (':active', '-unchecked-active'), (':insensitive','-unchecked-insensitive'), (':backdrop', '-unchecked-backdrop'), (':backdrop:insensitive', '-unchecked-backdrop-insensitive'), (':inconsistent', '-mixed-active'), (':inconsistent:hover', '-mixed-hover'), (':inconsistent:selected', '-mixed-active'), (':inconsistent:backdrop', '-mixed-backdrop'), (':inconsistent:insensitive', '-mixed-insensitive'), (':inconsistent:insensitive:backdrop', '-mixed-backdrop-insensitive'), (':checked', '-checked-active'), (':checked:insensitive','-checked-insensitive'), (':checked:hover', '-checked-hover'), (':checked:active', '-checked-active'), (':backdrop:checked', '-checked-backdrop'), (':backdrop:checked:insensitive', '-checked-backdrop-insensitive') { .#{$w}#{$s} { -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}#{$as}.png"), url("../assets/#{$a}#{$as}@2.png")); icon-shadow: none; } } @each $ms, $ma in ('', '-unchecked'), (':active', '-checked-active'), (':checked', '-checked-active'), (':inconsistent','-mixed-active') { .menu .menuitem.#{$w}#{$ms}, .popover .button.flat.#{$w}#{$ms} { &:hover { -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}#{$ma}.png"), url("../assets/#{$a}#{$ma}@2.png")); } } } } //treeview and list-rows .view.check, .view.radio, .list-row .check, list-row .radio { icon-shadow: none; &:selected, &:hover { icon-shadow: none; } } //selection-mode @each $s,$as in ('','-unchecked'), (':hover', '-unchecked-hover'), (':active', '-unchecked-active'), (':backdrop', '-unchecked-backdrop'), (':checked', '-checked-active'), (':checked:hover', '-checked-hover'), (':checked:active', '-checked-active'), (':backdrop:checked', '-checked-backdrop') { .view.content-view.check#{$s} { icon-shadow: none; -gtk-icon-source: -gtk-scaled(url("../assets/check-selectionmode#{$as}.png"), url("../assets/check-selectionmode#{$as}@2.png")); background-color: transparent; } } GtkCheckButton.text-button, GtkRadioButton.text-button { // this is for a nice focus on check and radios text padding: 1px 2px 4px; outline-offset: 0; &:insensitive, &:insensitive:active, &:insensitive:inconsistent { color: insensitive(b_color(text)); &:backdrop { color: backdrop(insensitive(b_color(text))); } } } diff --git a/src/gtk318/widgets/_color_chooser.scss b/src/gtk318/widgets/_color_chooser.scss index 1951403..be625b8 100644 --- a/src/gtk318/widgets/_color_chooser.scss +++ b/src/gtk318/widgets/_color_chooser.scss @@ -1,96 +1,98 @@ +@charset "UTF-8"; + /***************** * Color Chooser * *****************/ GtkColorSwatch { // take care of colorswatches on selected elements :selected & { box-shadow: none; &.overlay, &.overlay:hover { border-color: s_color(text); } } &:selected { box-shadow: none; } &.top, &.bottom, &.left, &:first-child:not(.overlay):not(.top), &.right, &:last-child:not(.overlay):not(.bottom), &:only-child:not(.overlay), &.top > .overlay, &.bottom > .overlay, &:first-child:not(.top) > .overlay, &:last-child:not(.bottom) > .overlay, &:only-child > .overlay { border-radius: $r; } // hover effect &:hover, &:hover:selected { background-image: linear-gradient(135deg, transparentize(white, 0.3), transparentize(white, 1) 50%); box-shadow: inset 0 1px transparentize(white, 0.6); &.color-dark { // swatches with colors with luminosity lower than 50% get the color-dark class background-image: linear-gradient(135deg, transparentize(white, 0.5), transparentize(white, 1) 50%); } } &:backdrop, &:backdrop:selected &.color-dark:backdrop, &.color-dark:backdrop:selected { background-image: none; box-shadow: none; } // no hover effect for the colorswatch in the color editor GtkColorEditor & { border-radius: $r; // same radius as the entry &:hover { background-image: none; box-shadow: none; } &:backdrop { box-shadow: none; } } // indicator and keynav outline colors &.color-dark { color: white; outline-color: transparentize(black, 0.7); &:backdrop { color: transparentize(white, 0.7); } } &.color-light { color: black; outline-color: transparentize(white, 0.5); &:backdrop { color: transparentize(black, 0.7); } } // border color &.overlay, &.overlay:selected { border: 1px solid $border_color; &:hover { border-color: b_color(hover); } } // make the add color button looks like, well, a button &#add-color-button { border-style: solid; // the borders are drawn by the overlay for standard colorswatches to have them semi border-width: 1px; // translucent on the colored background, here it's not necessary so they need to be set @include button(normal); &:hover { @include button(hover); } &:backdrop { @include button(backdrop); } .overlay { @include button(undecorated); } // reset the overlay to not cover the button style underneat } } GtkColorButton.button { padding: 5px; // Uniform padding on the GtkColorButton GtkColorSwatch:first-child:last-child { // :first-child:last-child for a specificity bump, it gets overridden by the // colorpicker style, otherwise border-radius: 0; box-shadow: none; &:insensitive, &:backdrop { box-shadow: none; } } } diff --git a/src/gtk318/widgets/_dialogs.scss b/src/gtk318/widgets/_dialogs.scss index 3a8f590..a2464f8 100644 --- a/src/gtk318/widgets/_dialogs.scss +++ b/src/gtk318/widgets/_dialogs.scss @@ -1,34 +1,36 @@ +@charset "UTF-8"; + /*********** * Dialogs * ***********/ // .message-dialog .dialog-action-area .button { // //padding: 8px; // } .message-dialog { // Message Dialog styling -GtkDialog-button-spacing: 8; -GtkDialog-action-area-border: 8; &.background { background-color: w_color(normal); } &:backdrop { background-color: backdrop(w_color(normal))} .titlebar { box-shadow: none; } } GtkFileChooserDialog { .search-bar { background-color: w_color(normal); border-color: w_color(normal); box-shadow: none; &:backdrop { background-color: backdrop(w_color(normal)); border-color: backdrop(w_color(normal)); color: backdrop(w_color(text)); } } .dialog-action-box { border-top: 1px solid $border_color; &:backdrop { border-top-color: backdrop($border_color); } } } diff --git a/src/gtk318/widgets/_entry.scss b/src/gtk318/widgets/_entry.scss index e4c7707..7c87fa9 100644 --- a/src/gtk318/widgets/_entry.scss +++ b/src/gtk318/widgets/_entry.scss @@ -1,117 +1,119 @@ +@charset "UTF-8"; + @mixin entry($t, $fc:v_color(active)) { // // Entries drawing function // // $t: entry type // $fc: focus color // $edge: set to none to not draw the bottom edge or specify a color to not // use the default one // // possible $t values: // normal, focus, insensitive, backdrop, backdrop-insensitive, osd, osd-focus, osd-backdrop; // @if $t==normal { color: v_color(text); border-color: $border_color; background-color: v_color(normal); box-shadow: none; } @if $t==focus { border-color: $fc; } @if $t==insensitive { color: insensitive(v_color(text)); border-color: insensitive($border_color); background-color: insensitive(v_color(normal)); } @if $t==backdrop { color: backdrop(v_color(text)); border-color: backdrop($border_color); background-color: backdrop(v_color(normal)); } @if $t==backdrop-insensitive { color: backdrop(insensitive(v_color(text))); border-color: backdrop(insensitive($border_color)); background-color: backdrop(insensitive(v_color(normal))); } } /**************** * Text Entries * ****************/ .entry { border: 1px solid; padding: 5px 8px 5px; &.image { // icons inside the entry &.left { padding-left: 0; } &.right { padding-right: 0; } } border-radius: $r; transition: all 200ms $ease-out-quad; @include entry(normal); &.flat, &.flat:focus { padding: 2px; @include entry(normal); border: none; border-radius: 0; } &:focus { @include entry(focus); } &:insensitive { @include entry(insensitive); } &:backdrop { @include entry(backdrop); } &:backdrop:insensitive { @include entry(backdrop-insensitive); } &:selected, &:selected:focus { @extend %selected_items; } &.progressbar { margin: 1px; border-radius: 0; border-width: 0 0 2px; border-color: s_color(normal); border-style: solid; background-image: none; background-color: transparent; box-shadow: none; &:backdrop { background-color: transparent; border-color: backdrop(s_color(backdrop)); } } @each $e_type, $e_color in (error, $error_color), (warning, $warning_color) { &.#{$e_type} { color: $e_color; border-color: $e_color; background-color: transparentize($e_color, 0.5); &:focus { @include entry(focus, $e_color); background-color: transparentize($e_color, 0.5); } &:selected, &:selected:focus { background-color: $e_color; } &:backdrop { color: backdrop($e_color); border-color: backdrop($e_color); background-color: backdrop(transparentize($e_color, 0.5)); } } } &.image { // entry icons colors color: mix(w_color(text),v_color(text), 80%); &:hover { color: b_color(hover); } &:active { color: b_color(active); } &:backdrop { color: backdrop(mix(w_color(text), v_color(text), 80%)); } } } diff --git a/src/gtk318/widgets/_headerbar.scss b/src/gtk318/widgets/_headerbar.scss index 765ebe7..8ccc240 100644 --- a/src/gtk318/widgets/_headerbar.scss +++ b/src/gtk318/widgets/_headerbar.scss @@ -1,157 +1,159 @@ +@charset "UTF-8"; + /*************** * Header bars * ***************/ .titlebar, .header-bar { transition: none; padding: 4px 6px; border-width: 0px 0px 1px 0px; border-radius: 3px 3px 0px 0px; border-style: solid; border-color: $border_color; color: t_color(text); background-image: linear-gradient(to bottom,t_color(background-light),t_color(background)); &:backdrop { border-color: transparent; background-image: none; background-color: t_color(backdrop-background); color: t_color(backdrop-text); box-shadow: none; } .path-bar .button { color: t_color(text); } .button { transition: none; @include button(undecorated, $tc: t_color(text)); &.flat { @include button(undecorated,$tc: t_color(text)); } &:hover { @include button(hover, $tc: t_color(text)); &:backdrop { border-color: t_color(backdrop-background); } } &:active, &:checked { @include button(active); &:hover { @include button(active-hover); } &:backdrop { background-image: none; background-color: t_color(backdrop-background); border-color: t_color(backdrop-background); color: t_color(backdrop-text); } } &.suggested-action { @extend %suggested-action; } &:backdrop { background-color: t_color(backdrop-background); color: t_color(backdrop-text); } &.flat:backdrop, &.flat:backdrop:insensitive, &:insensitive:backdrop { background-image: none; background-color: t_color(backdrop-background); color: t_color(backdrop-text); border-color: transparent; } &.flat:insensitive { @extend %undecorated_button;; color: insensitive(t_color(text)); } &:insensitive { background-color: transparent; background-image: none; color: insensitive(t_color(text)); &:active, &:checked { @include button(insensitive-active); } } } .title { font-weight: normal; padding: 0px 12px; } .subtitle { font-size: smaller; padding: 0 12px; @extend .dim-label; } .header-bar-separator, & > GtkBox > .separator.vertical { -GtkWidget-wide-separators: true; -GtkWidget-separator-width: 1px; border-width: 0px; background-color: t_color(background); border-color: t_color(background); &:backdrop { background-color: t_color(backdrop-background); border-color: t_color(backdrop-background); } } &.selection-mode { @extend .info; &.suggested-action { @extend %suggested-action; } .subtitle:link { @extend *:link:selected; } .selection-menu { padding-left: 10px; padding-right: 10px; GtkArrow { -GtkArrow-arrow-scaling: 1; } .arrow { -gtk-icon-source: -gtk-icontheme('arrow-down'); icon-shadow: none; } } } .tiled &, .maximized & { border-radius: 0; // squared corners when the window is max'd or tiled } &.default-decoration { padding: 4px; .button { padding: 5px; } } } %suggested-action { background-image: none; background-color: b_color(active); &:hover { background-color: b_color(hover); color: b_color(text) } &:insensitive { background-color: transparent; background-image: none; color: insensitive(t_color(text)); &:active, &:checked { @include button(insensitive-active); } } &:backdrop { background-color: t_color(backdrop-background); border-color: transparent; color: t_color(backdrop-text); &:insensitive { color: insensitive(t_color(backdrop-text)); } } } diff --git a/src/gtk318/widgets/_infobar.scss b/src/gtk318/widgets/_infobar.scss index ce28771..50cf205 100644 --- a/src/gtk318/widgets/_infobar.scss +++ b/src/gtk318/widgets/_infobar.scss @@ -1,66 +1,68 @@ +@charset "UTF-8"; + /************** * GtkInfoBar * **************/ GtkInfoBar { border-style: none; border-bottom: 1px solid $border_color; background-color: w_color(normal); background-image: none; &:backdrop {border-bottom: 1px solid backdrop($border_color);} } .info, .question, .warning, .error { background-color: w_color(normal); background-image: none; color: $warning_color; text-shadow: none; &:backdrop { background-color: backdrop(w_color(normal)); color: backdrop($warning_color); } .button { box-shadow: none; background-image:none; background-color: transparentize($warning_color, 0.5); border-color: transparentize($warning_color, 0.5); color: b_color(text); &:hover { background-color: transparentize($warning_color, 0.75); border-color: $warning_color; } &:active, &:checked { background-image: button_gradient($warning_color); color: w_color(normal); border-color: $warning_color; } &:insensitive { background-color: insensitive(transparentize($warning_color, 0.5)); border-color: insensitive(transparentize($warning_color, 0.5)); color: insensitive(b_color(text)); } &:backdrop { background-color: backdrop(transparentize($warning_color, 0.5)); border-color: backdrop(transparentize($warning_color, 0.5)); color: backdrop(b_color(text)); &:active, &:checked { background-image: button_gradient(backdrop($warning_color)); color: backdrop(w_color(normal)); border-color: backdrop($warning_color); } &:insensitive { background-color: backdrop(insensitive(transparentize($warning_color, 0.5))); border-color: backdrop(insensitive(transparentize($warning_color, 0.5))); color: backdrop(insensitive(b_color(text))); } &:insensitive:active, &:insensitive:checked { background-image: button_gradient(backdrop(insensitive($warning_color))); color: backdrop(insensitive(w_color(normal))); border-color: backdrop(insensitive($warning_color)); } } } } diff --git a/src/gtk318/widgets/_link.scss b/src/gtk318/widgets/_link.scss index da3a894..6c35a49 100644 --- a/src/gtk318/widgets/_link.scss +++ b/src/gtk318/widgets/_link.scss @@ -1,40 +1,42 @@ +@charset "UTF-8"; + /********* * Links * *********/ *:link { color: $link_color; &:visited { color: $link_visited_color; *:selected & { color: mix(s_color(text), s_color(normal), 60%); } } &:hover { color: lighten($link_color,10%); *:selected & { color: mix(s_color(text), s_color(normal), 90%); } } &:active { color: $link_color; *:selected & { color: mix(s_color(text), s_color(normal), 80%); } } &:backdrop, &:backdrop:hover, &:backdrop:hover:selected { color: backdrop(s_color(backdrop)); } &:selected, *:selected & { color: mix(s_color(text), s_color(normal), 80%); } } .button:link, .button:visited { @extend %undecorated_button; @extend *:link; text-shadow: none; &:hover, &:active, &:checked { @extend %undecorated_button; text-shadow: none; } &:backdrop { @extend %undecorated_button; //This shouldn't be needed but avoids //a weird transition which for some reason //makes borders blink on hover } } diff --git a/src/gtk318/widgets/_lists.scss b/src/gtk318/widgets/_lists.scss index bdd9cca..6341801 100644 --- a/src/gtk318/widgets/_lists.scss +++ b/src/gtk318/widgets/_lists.scss @@ -1,104 +1,106 @@ +@charset "UTF-8"; + /********* * Lists * *********/ .list, .list-row { background-color: w_color(normal); color: w_color(text); border-width: 0px; &:backdrop { background-color: backdrop(w_color(normal)); color: backdrop(w_color(text)); } } .list-row, .grid-child { padding: 0px 2px; border-style: solid; border-width: 0px; border-color: w_color(normal); } .list-row.button, .list-row.button:backdrop, .list-row.button:backdrop:active, .list-row.button:backdrop:checked, .list-row.button:backdrop:insensitive, .list-row.button:backdrop:insensitive:active, .list-row.button:backdrop:insensitive:checked, .list-row.button:insensitive:active, .list-row.button:insensitive:checked { // reset button inherited stuff @extend %undecorated_button; background-color: transparentize(v_color(normal),1); // for the transition border-style: none; // I need no borders here border-radius: 0; // and no rounded corners box-shadow: none; // and no box-shadow } .list-row.button { background-color: w_color(normal); &:hover { background-color: transparentize(b_color(hover), 0.75); } &:active { background-color: s_color(normal); box-shadow: none; } &:selected { &:active { box-shadow: none; } background-color: s_color(normal); &:hover { @include button(active-hover); } &:backdrop { background-color: backdrop(s_color(backdrop)); } } &:backdrop { background-color: backdrop(w_color(normal));} } .list-row:selected { @extend %selected_items; .button { @include button(normal); &.flat { @include button(undecorated); } &:hover { @include button(hover); } &:active, &:checked { @include button(active); } &:backdrop, &.flat:backdrop { @include button(backdrop); &:active, &:checked { @include button(backdrop-active); } &:insensitive { @include button(backdrop-insensitive); &:active, &:checked { @include button(backdrop-insensitive-active); } } } &.flat:backdrop { background-color: backdrop(w_color(normal)); color: backdrop(w_color(text)); border-color: transparent; } &:insensitive { @include button(insensitive); &:active, &:checked { @include button(insensitive-active); } } } } // transition .list-row, list-row.button { transition: all 300ms $ease-out-quad; &:hover { transition: none; } } diff --git a/src/gtk318/widgets/_menus.scss b/src/gtk318/widgets/_menus.scss index 3b11a25..3f5a7d8 100644 --- a/src/gtk318/widgets/_menus.scss +++ b/src/gtk318/widgets/_menus.scss @@ -1,160 +1,162 @@ +@charset "UTF-8"; + /********* * Menus * *********/ /* menu buttons */ .menuitem.button.flat { @extend %undecorated_button; color: w_color(text); &:hover { background-color: b_color(hover); } &:selected { background-color: b_color(active); color: b_color(active-text) } &:backdrop, &:backdrop:hover { @extend %undecorated_button; color: backdrop(w_color(text)); } } .menubar { -GtkWidget-window-dragging: true; padding: 0px; box-shadow: none; background-color: w_color(normal); &:backdrop { background-color: backdrop(w_color(normal)); } & > .menuitem { padding: 6px 8px; border: 1px solid w_color(normal); &:hover { //Seems like it :hover even with keyboard focus background-color: b_color(active); color: b_color(active-text); } &:insensitive { color: insensitive(w_color(text)); box-shadow: none; &:backdrop { background-color: backdrop(w_color(normal)); color: backdrop(insensitive(w_color(text))); } } &:backdrop { background-color: backdrop(w_color(normal)); border-color: backdrop(w_color(normal)); color: backdrop(w_color(text)); } } } .menu { padding: 0px; background-color: $menu_color; border: 1px solid $border_color; // adds borders in a non composited env border-radius: $r; .csd & { border: 1px solid $border_color; } // axes borders in a composited env .separator {color: $border_color;} .menuitem { text-shadow: none; padding: 4px 4px; &:hover { color: b_color(active-text); background-color: b_color(active); } &:insensitive { color: insensitive(w_color(text)); &:backdrop { color: backdrop(insensitive(w_color(text))); } } &:backdrop, &:backdrop:hover { color: backdrop(w_color(text)); background-color: backdrop(w_color(normal)); } //submenu indicators &.arrow { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');} &.arrow:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } } } .menuitem .accelerator { color: gtkalpha(currentColor,0.5); } /*************** * Popovers * ***************/ .popover { margin: 10px; padding: 0px; border: 1px solid $border_color; border-radius: 3px; background-color: $menu_color; box-shadow: 0 2px 3px transparentize(black, 0.2); &:backdrop { box-shadow: none; } > .list, > .view, > .toolbar, &.osd > .toolbar { border-style: none; background-color: transparent; } .button.flat { border-radius: 0px; color: w_color(text); .label { padding: 4px 0px; } &:hover, &:checked:hover { background-image: none; background-color: b_color(active); color: b_color(active-text); transition: none; } &:backdrop { background-color: transparent; color: backdrop(w_color(text)); } } &.osd { @extend %osd; } } //touch selection handlebars for the Popover.osd above .entry.cursor-handle, .cursor-handle { background-color: transparent; background-image: none; box-shadow: none; border-style: none; &.top { -gtk-icon-source: -gtk-icontheme('selection-start-symbolic'); } &.bottom { -gtk-icon-source: -gtk-icontheme('selection-end-symbolic'); } } .scale-popup .button, .scale-popup .button.flat { // +/- buttons on GtkVolumeButton popup @extend %undecorated_button; background-color: transparent; padding: 5px; color: w_color(text); &:hover { @extend %undecorated_button; color: b_color(hover); } &:active { color: b_color(active); } &:insensitive { color: insensitive(w_color(text)); } &:backdrop { color: backdrop(w_color(text)); &:insensitive { color: backdrop(insensitive(w_color(text))); } } } GtkVolumeButton.button { padding: 5px; } diff --git a/src/gtk318/widgets/_misc.scss b/src/gtk318/widgets/_misc.scss index 9108393..f9d9cba 100644 --- a/src/gtk318/widgets/_misc.scss +++ b/src/gtk318/widgets/_misc.scss @@ -1,110 +1,112 @@ +@charset "UTF-8"; + /******** * Misc * ********/ /********** * Frames * **********/ .frame { border: 1px solid $border_color; &.flat { border-style: none; } padding: 0; &.action-bar { padding: 6px; border-width: 1px 0 0; &:backdrop {border-color: backdrop($border_color);} } &:backdrop {border-color: backdrop($border_color);} } GtkScrolledWindow { GtkViewport.frame { // avoid double borders when viewport inside // scrolled window border-style: none; } } //vbox and hbox separators .separator { // always disable separators //-GtkWidget-wide-separators: true; color: transparent; &.vertical { color: $border_color; &:backdrop { color: backdrop($border_color); } } // Font and File button separators GtkFileChooserButton &.vertical, GtkFontButton &.vertical { // always disable separators -GtkWidget-wide-separators: true; } } /************* * Expanders * *************/ .expander { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } &:hover { color: lighten(w_color(text),30%); } //only lightens the arrow &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } } /********* * Paned * *********/ GtkPaned { // this is for the standard paned separator -GtkPaned-handle-size: 1; // sets separator width -gtk-icon-source: none; // removes handle decoration margin: 0 8px 8px 0; // drag area of the separator, not a real margin &:dir(rtl) { margin-right: 0; margin-left: 8px; } .pane-separator { background-color: $border_color; &:backdrop { background-color: backdrop($border_color); } } } GtkPaned.wide { // this is for the paned with wide separator -GtkPaned-handle-size: 5; // wider separator here margin: 0; // no need of the invisible drag area so, reset margin .pane-separator { background-color: transparent; border-style: none; // border-color: $borders_color; // border-width: 1px; } &.vertical .pane-separator { border-style: none;} .pane-separator:backdrop { border-color: transparent; } } /********************* * Spinner Animation * *********************/ @keyframes spin { to { -gtk-icon-transform: rotate(1turn); } } .spinner { background-image: none; background-color: blue; opacity: 0; // non spinning spinner makes no sense -gtk-icon-source: -gtk-icontheme('process-working-symbolic'); &:active { opacity: 1; animation: spin 1s linear infinite; &:insensitive { opacity: 0.5; } } } diff --git a/src/gtk318/widgets/_notebook.scss b/src/gtk318/widgets/_notebook.scss index ed0cbf6..42a3c46 100644 --- a/src/gtk318/widgets/_notebook.scss +++ b/src/gtk318/widgets/_notebook.scss @@ -1,191 +1,193 @@ +@charset "UTF-8"; + /***************** * 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 -GtkNotebook-initial-gap: 0; -GtkNotebook-arrow-spacing: 5; -GtkNotebook-tab-curvature: 0; -GtkNotebook-tab-overlap: 1; -GtkNotebook-has-tab-gap: false; -GtkWidget-focus-padding: 0; -GtkWidget-focus-line-width: 0; transition: all 200ms $ease-out-quad; background-color: $menu_color; &:backdrop {background-color: backdrop($menu_color)} &.frame { border: 1px solid $border_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; } &:backdrop { border-color: backdrop($border_color); } } &.header { background-color: w_color(normal); padding-top: 4px; //this is the shading of the header behind the tabs &.frame { border-style: none; } &.top { box-shadow: inset 0 -1px $border_color; // border &:backdrop { box-shadow: inset 0 -1px backdrop($border_color); } } &.bottom { box-shadow: inset 0 1px $border_color; &:backdrop { box-shadow: inset 0 1px backdrop($border_color); } } &.right { box-shadow: inset 1px 0 $border_color; &:backdrop { box-shadow: inset 1px 0 backdrop($border_color); } } &.left { box-shadow: inset -1px 0 $border_color; &:backdrop { box-shadow: inset -1px 0 backdrop($border_color); } } &:backdrop { background-color: backdrop(w_color(normal)); } } tab { border: 1px solid transparentize(w_color(text), 0.8); background-color: transparentize(w_color(text), 0.8); background-clip: padding-box; &:backdrop {background-color: backdrop(transparentize(w_color(text), 0.8));} //FIXME: we get double border in some cases, not considering the broken //notebook content frame... padding: 8px; &.reorderable-page { background-color: w_color(normal); &.top, &.bottom { padding-left: 12px; // for a nicer close button padding-right: 6px; // placement padding-bottom: 8px; } } @each $_tab, $_border, $_radius in (top,bottom,3px 3px 0px 0px), (bottom,top,0px 0px 3px 3px), (left,right, 3px 0px 0px 3px), (right,left, 0px 3px 3px 0px) { &.#{$_tab} { border-radius: #{$_radius}; border-#{$_border}-color: transparent; &:active, &.active-page { border-color: $border_color; border-#{$_border}-color: $menu_color; background-color: $menu_color; &:backdrop { border-color: backdrop($border_color); border-#{$_border}-color: backdrop($menu_color); background-color: backdrop($menu_color); } } } } //here's the interesting stuff &:hover, &.prelight-page { background-color: transparentize(s_color(normal), 0.8); border-color: transparentize(s_color(normal), 0.8); } @each $_tab, $_border, $_shadow1 in (top, right, -3px 0px 0px 0px), (bottom, right, -3px 0px 0px 0px), (left, bottom, 0px -3px 0px 0px), (right, bottom, 0px -3px 0px 0px) { &.reorderable-page.#{$_tab} { border-width: 3px; border-style: solid; border-color: transparent; background-color: w_color(normal); background-clip: padding-box; border-#{$_border}-width: 1px; border-#{$_border}-color: $border_color; box-shadow: inset #{$_shadow1} w_color(normal); &:hover, &.prelight-page { box-shadow: inset 0px -3px 0px 0px transparentize(s_color(normal),0.8), inset $_shadow1 w_color(normal); } &:active, &.active-page { box-shadow: inset 0px -3px 0px 0px s_color(normal), inset $_shadow1 w_color(normal); &:backdrop { background-color: backdrop(w_color(normal)); border-color: transparent; border-#{$_border}-color: backdrop($border_color); box-shadow:none; } } &:backdrop { background-color: backdrop(w_color(normal)); border-#{$_border}-color: backdrop($border_color); box-shadow:none; } } } .label { //tab text padding: 0 2px; // needed for a nicer focus ring color: w_color(text); &:backdrop { color: backdrop(w_color(text)); } &:insensitive { color: insensitive(w_color(text)); } } .button { //tab close button padding: 0px; border: 1px solid transparent; border-radius: 50%; background-image: none; background-color: $border_color; box-shadow: none; icon-shadow: none; transition: none; color: w_color(normal); &:hover { background-color: $error_color; border-color: transparent; background-image: none; box-shadow: none; } &:active { color: w_color(normal); border-color: transparent; background-image: none; box-shadow: none; } &:backdrop { color: backdrop(w_color(normal)); background-color: backdrop($border_color); } & > GtkImage { padding: 0px; } } .button .active-page, .button.active-page { //not working background-color: $error_color; } } &.arrow { color: w_color(text); &:hover { color: b_color(hover); } &:active { color: b_color(active); } &:insensitive { color: insensitive(w_color(text)); } &:backdrop { color: backdrop(w_color(text)); &:insensitive { color: backdrop(insensitive(w_color(text))); } } } } diff --git a/src/gtk318/widgets/_overshoot.scss b/src/gtk318/widgets/_overshoot.scss index dbefd93..b871dc8 100644 --- a/src/gtk318/widgets/_overshoot.scss +++ b/src/gtk318/widgets/_overshoot.scss @@ -1,109 +1,111 @@ +@charset "UTF-8"; + @mixin overshoot($p, $t:normal, $c:w_color(text)) { // // overshoot // // $p: position // $t: type // $c: base color // // possible $p values: // top, bottom, right, left // // possible $t values: // normal, backdrop // $_small_gradient_length: 5%; $_big_gradient_length: 100%; $_position: center top; $_small_gradient_size: 100% $_small_gradient_length; $_big_gradient_size: 100% $_big_gradient_length; @if $p==bottom { $_position: center bottom; $_linear_gradient_direction: to top; } @else if $p==right { $_position: right center; $_small_gradient_size: $_small_gradient_length 100%; $_big_gradient_size: $_big_gradient_length 100%; } @else if $p==left { $_position: left center; $_small_gradient_size: $_small_gradient_length 100%; $_big_gradient_size: $_big_gradient_length 100%; } $_small_gradient_color: $c; $_big_gradient_color: $c; @if $c==w_color(text) { $_small_gradient_color: darken($border_color, 10%); $_big_gradient_color: w_color(text); @if $t==backdrop { $_small_gradient_color: backdrop($border_color); } } $_small_gradient: -gtk-gradient(radial, $_position, 0, $_position, 0.5, to($_small_gradient_color), to(transparentize($_small_gradient_color, 1))); $_big_gradient: -gtk-gradient(radial, $_position, 0, $_position, 0.6, from(transparentize($_big_gradient_color, 0.93)), to(transparentize($_big_gradient_color, 1))); @if $t==normal { background-image: $_small_gradient, $_big_gradient; background-size: $_small_gradient_size, $_big_gradient_size; } @else if $t==backdrop { background-image: $_small_gradient; background-size: $_small_gradient_size; } background-repeat: no-repeat; background-position: $_position; background-color: transparent; // reset some properties to be sure to not inherit them somehow border: none; // box-shadow: none; // } /* Decouple the font of context menus from their entry/textview */ .touch-selection, .context-menu { font: initial; } .monospace { font: Monospace; } // 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); &:backdrop { @include overshoot(top, backdrop); } } &.bottom { @include overshoot(bottom); &:backdrop { @include overshoot(bottom, backdrop); } } &.left { @include overshoot(left); &:backdrop { @include overshoot(left, backdrop); } } &.right { @include overshoot(right); &:backdrop { @include overshoot(right, backdrop); } } } diff --git a/src/gtk318/widgets/_pathbar.scss b/src/gtk318/widgets/_pathbar.scss index 6a9a613..81b1e5d 100644 --- a/src/gtk318/widgets/_pathbar.scss +++ b/src/gtk318/widgets/_pathbar.scss @@ -1,25 +1,27 @@ +@charset "UTF-8"; + /************ * Pathbars * ************/ .path-bar .button { @include button(undecorated); padding: 4px 8px; color: w_color(text); &:hover {border-color: b_color(hover); } &:active, &:checked { background-color: $border_color; } &:first-child { padding-left: 8px; } &:last-child { padding-right: 8px; } &:only-child { padding-left: 12px; padding-right: 12px; } // the following is for spacing the icon and the label inside the home button .label:last-child { padding-left: 2px; } .label:first-child { padding-right: 2px; } .label:only-child { padding-right: 0; padding-left: 0; } GtkImage { padding-top: 1px; } } diff --git a/src/gtk318/widgets/_progressbar.scss b/src/gtk318/widgets/_progressbar.scss index 5f1ce8d..8f67731 100644 --- a/src/gtk318/widgets/_progressbar.scss +++ b/src/gtk318/widgets/_progressbar.scss @@ -1,142 +1,144 @@ +@charset "UTF-8"; + /***************** * Progress bars * *****************/ GtkProgressBar { padding: 0; font-size: smaller; color: transparentize(b_color(text),0.7); box-shadow: none; // here ot it gets &:backdrop { color: backdrop(transparentize(b_color(text),0.7))} // clipped &.osd { -GtkProgressBar-xspacing: 0; -GtkProgressBar-yspacing: 0; -GtkProgressBar-min-horizontal-bar-height: 3; } &.trough { // background border: 1px solid transparent; border-radius: $r; background-color: transparentize(b_color(text),0.7); &.osd { border: 1px solid transparent; border-radius: $r; background-color: transparentize(b_color(text),0.7); &:backdrop { background-color: backdrop(transparentize(b_color(text),0.7)); } } &:backdrop { background-color: backdrop(transparentize(b_color(text),0.7)); } } } // moving bit .progressbar { background-color: s_color(normal); border: 1px solid s_color(normal); border-radius: 0px; box-shadow: none; //needed for clipping &.left { border-top-left-radius: $r; border-bottom-left-radius: $r; } &.right { border-top-right-radius: $r; border-bottom-right-radius: $r; } &.left.right { box-shadow: none; } &.vertical { &.bottom { border-bottom-left-radius: $r; border-bottom-right-radius: $r; box-shadow: none; } &.top { border-top-left-radius: $r; border-top-right-radius: $r; } } &.osd { background-image: none; background-color: s_color(normal); border: 1px solid s_color(normal); border-radius: $r; &:backdrop { background-color: backdrop(s_color(backdrop)); border-color: backdrop(s_color(backdrop)); } } &:backdrop { background-color: backdrop(s_color(backdrop)); border-color: backdrop(s_color(backdrop)); } } /************* * Level Bar * *************/ .level-bar.vertical { -GtkLevelBar-min-block-width: 6; -GtkLevelBar-min-block-height: 34; } .level-bar { box-shadow: none; // needs to be set here to avoid clipping -GtkLevelBar-min-block-width: 34; -GtkLevelBar-min-block-height: 6; &.vertical { -GtkLevelBar-min-block-width: 6; -GtkLevelBar-min-block-height: 34; } &.trough { border: 1px solid transparent; padding: 3px; border-radius: $r; background-color: transparent;; } &.fill-block { // FIXME: it would be nice to set make fill blocks bigger, but we'd need // :nth-child working on discrete indicators border: 1px solid s_color(normal); background-color: s_color(normal); box-shadow: none; border-radius: $r; &.indicator-discrete { &.horizontal { margin: 0 1px; } &.vertical { margin: 1px 0; } } &.level-high { border-color: $success_color; background-color: $success_color; &:backdrop { background-color: backdrop($success_color); border-color: backdrop($success_color); } } &.level-low { border-color: $warning_color; background-color: $warning_color; &:backdrop { background-color: backdrop($warning_color); border-color: backdrop($warning_color); }; } &.empty-fill-block { background-color: transparentize(b_color(text),0.7); border-color: transparent; box-shadow: none; } &:backdrop { border-color: backdrop(s_color(backdrop)); background-color: backdrop(s_color(backdrop)); } } } diff --git a/src/gtk318/widgets/_scale.scss b/src/gtk318/widgets/_scale.scss index 1f424f8..8977d42 100644 --- a/src/gtk318/widgets/_scale.scss +++ b/src/gtk318/widgets/_scale.scss @@ -1,87 +1,89 @@ +@charset "UTF-8"; + /************ * GtkScale * ************/ .scale, .scale.scale-has-marks-above.scale-has-marks-below, .scale.vertical.scale-has-marks-above.scale-has-marks-below { -GtkScale-slider-length: 18; -GtkRange-slider-width: 18; -GtkRange-trough-border: 2; &.fine-tune { &.trough { margin: 8px; border-radius: $r; } } &.slider { background-color: b_color(normal); border: 1px solid $border_color; border-radius: 50%; box-shadow: none; &:hover { border-style: solid; border-width: 2px; border-color: b_color(hover); border-radius: 50%; // needed for double marks scales &:backdrop { background-color: backdrop(b_color(normal)); border-color: backdrop(b_color(hover)); } } &:insensitive { border-style: solid; // needed for double marks scales or they'll get border-radius: 50%; // overridden background-color: insensitive(b_color(normal)); border-color: insensitive($border_color); &:backdrop { background-color: backdrop(insensitive(b_color(normal))); border-color: backdrop(insensitive($border_color)); } } &:active { border: 2px solid b_color(active); &:backdrop { background-color: backdrop(b_color(normal)); border-color: backdrop(b_color(active)); } } &:backdrop { background-color: backdrop(b_color(normal)); border-color: backdrop($border_color); } } &.trough { margin: 9px; border: 1px solid transparentize(b_color(text),0.7); border-radius: $r; background-color: transparentize(b_color(text),0.7); box-shadow: none; &.highlight { background-color: s_color(normal); border-color: s_color(normal); &.vertical { background-color: s_color(normal); border-color: s_color(normal); } &:backdrop { background-color: backdrop(s_color(backdrop)); border-color: backdrop(s_color(backdrop)); } } &:insensitive, &.vertical:insensitive { border-color: mix(insensitive(b_color(text)), w_color(normal), 70%); background-color: mix(insensitive(b_color(text)), w_color(normal), 70%); box-shadow: none; &:backdrop { background-color: mix(backdrop(insensitive(b_color(text))), w_color(normal), 70%); border-color: mix(backdrop(insensitive(b_color(text))), w_color(normal), 70%); } } &:backdrop { background-color: backdrop(transparentize(b_color(text),0.7)); border-color: backdrop(transparentize(b_color(text),0.7)); } } } diff --git a/src/gtk318/widgets/_scrollbar.scss b/src/gtk318/widgets/_scrollbar.scss index 89d208d..30b85fe 100644 --- a/src/gtk318/widgets/_scrollbar.scss +++ b/src/gtk318/widgets/_scrollbar.scss @@ -1,91 +1,93 @@ +@charset "UTF-8"; + @mixin _border($name, $width: 1px 1px 2px 1px, $image-width: 2 2 3 2 / 2px 2px 3px 2px) { border-image: -gtk-scaled(url("../assets/#{$name}.png"),url("../assets/#{$name}@2.png")) $image-width stretch; border-width: $width; border-style: solid; border-color: transparent; } $scrollbar_color: transparentize(v_color(text),0.5); $trough_color: transparentize(w_color(text),0.7); /************** * Scrollbars * **************/ .scrollbar { -GtkRange-trough-border: 0; -GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-forward-stepper: false; -GtkRange-slider-width: 10px; -GtkScrollbar-min-slider-length: 64; -GtkRange-stepper-spacing: 0; -GtkRange-trough-under-steppers: 1; .button { @extend %undecorated_button; color: b_color(text); &:hover { @extend %undecorated_button; color: b_color(hover); } &:insensitive { color: insensitive(b_color(text)); } &:backdrop { @extend %undecorated_button; color: backdrop(b_color(text)); &:insensitive {color: backdrop(insensitive(b_color(text)));} @extend %undecorated_button; } } // Overlay Scrollbars &.dragging, // if this isn't set, the scrollbars don't update their size correctly &.hovering { opacity: 0.9910; } // probably a gtk bug &.overlay-indicator:not(.dragging):not(.hovering) { opacity: 0.999; } // &.overlay-indicator:not(.dragging):not(.hovering) { -GtkRange-slider-width: 10px; -GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-forward-stepper: false; .slider { margin: 2px; border: 5px solid transparent; border-radius: 8px; background-color: $scrollbar_color; &:backdrop { background-color: backdrop($scrollbar_color); } } .trough { border: none; background: none; } } &.trough { margin: 2px; border: 5px solid transparent; border-radius: 8px; background-color: $trough_color; &:backdrop { background-color: backdrop($trough_color); } } &.slider { margin: 2px; border: 5px solid transparent; border-radius: 8px; background-color: $scrollbar_color; &:hover { background-color: b_color(hover); } &:active { background-color: b_color(active);} &:insensitive { background-color: insensitive($scrollbar_color); } &:backdrop { background-color: backdrop($trough_color); } &:backdrop:insensitive { background-color: backdrop(insensitive($scrollbar_color)); } } } .scrollbars-junction, .scrollbars-junction.frame { // the small square between two scrollbars border-color: transparent; background-color: transparent; border-image: none; } diff --git a/src/gtk318/widgets/_sidebar.scss b/src/gtk318/widgets/_sidebar.scss index ce779d8..92250ae 100644 --- a/src/gtk318/widgets/_sidebar.scss +++ b/src/gtk318/widgets/_sidebar.scss @@ -1,72 +1,74 @@ +@charset "UTF-8"; + /*********** * Sidebar * ***********/ .sidebar, .sidebar .view { border: none; background-color: w_color(normal); &:selected { @extend %selected_items; } &:backdrop { background-color: backdrop(w_color(normal))} } GtkSidebarRow { // Needs overriding of the GtkListBoxRow padding &.list-row { padding: 0px; } // Using margins/padding directly in the SidebarRow // will make the animation of the new bookmark row jump .sidebar-revealer { padding: 4px 14px 4px 12px; } .sidebar-icon { &:dir(ltr) { padding-right: 8px; } &:dir(rtl) { padding-left: 8px; } } .sidebar-label { &:dir(ltr) { padding-right: 2px; } &:dir(rtl) { padding-left: 2px; } } } // Places sidebar is a special case, since the view here have to look like chrome not content, so we override text color GtkPlacesSidebar.sidebar .view { // color: w_color(text); // background-color: transparent; &:insensitive { color: insensitive(w_color(text)); } &:backdrop { color: backdrop(w_color(text)); &:insensitive { color: backdrop(insensitive(w_color(text))); } } &:selected { @extend %selected_items; } .separator, .separator:backdrop { @extend .separator; } .image { // icons color color: w_color(text); &:selected { color: s_color(text); &:backdrop { color: backdrop(w_color(text)); } } &:insensitive { color: insensitive(w_color(text)); } &:backdrop { color: backdrop(w_color(text)); &:insensitive { color: backdrop(insensitive(w_color(text))); } } } } .sidebar-item { padding: 10px 4px; > .label { padding-left: 6px; padding-right: 6px; } &.needs-attention > .label { @extend %needs_attention; background-size: 6px 6px, 0 0; } } diff --git a/src/gtk318/widgets/_spinbutton.scss b/src/gtk318/widgets/_spinbutton.scss index a2796a2..c5a5935 100644 --- a/src/gtk318/widgets/_spinbutton.scss +++ b/src/gtk318/widgets/_spinbutton.scss @@ -1,125 +1,127 @@ +@charset "UTF-8"; + /***************** * GtkSpinButton * *****************/ .spinbutton { .button { @extend %spinbutton; } .osd & { .button { @extend %spinbutton; &:last-child { border-radius: 0 3px 3px 0; } &:dir(rtl):first-child { border-radius: 3px 0 0 3px; } } } &.vertical, &.vertical:dir(rtl) { //FIXME: try using linking templates for vertically linked stuff .button { padding-top: 5px; // Same vertical padding as image-buttons padding-bottom: 5px; // &:first-child { @extend %top_button; @include button(normal); &:active { @extend %top_button; @include button(active); } &:hover { @extend %top_button; @include button(hover); } &:insensitive { @extend %top_button; @include button(insensitive); } &:backdrop { @extend %top_button; @include button(backdrop); } } &:last-child { @extend %bottom_button; @include button(normal); &:active { @extend %bottom_button; @include button(active); } &:hover { @extend %bottom_button; @include button(hover); } &:insensitive { @extend %bottom_button; @include button(insensitive); } &:backdrop { @extend %bottom_button; @include button(backdrop); } } &:backdrop:insensitive { @include button(backdrop-insensitive); } } &.entry { // we should remove the bottom edge hilight here, but seems // like buttons are on top of it so it doesn't show up border-radius: 0px; padding-left: 0px; padding-right: 0px; &:insensitive { background-color: insensitive(v_color(normal));} } } GtkTreeView & { &.entry, &.entry:focus { padding: 1px; border-width: 1px 0; border-color: v_color(active); border-radius: 0; box-shadow: none; } } } %spinbutton { background-image: none; background-color: transparent; border-style: none none none solid; border-color: transparentize($border_color, 0.7); color: b_color(text); border-radius: 0; box-shadow: none; &:dir(rtl) { border-style: none solid none none; } &:hover { color: b_color(hover); } &:insensitive { color: insensitive(b_color(text)); border-color: insensitive(transparentize($border_color, 0.7)); } &:active { color: b_color(active); } &:backdrop { color: backdrop(b_color(text)); border-color: backdrop(transparentize($border_color, 0.7)); background-color: transparent; } &:backdrop:insensitive { background-image: none; color: backdrop(insensitive(b_color(text))); border-style: none none none solid; // It is needed or it gets overridden border-color: backdrop(insensitive(transparentize($border_color, 0.7))); &:dir(rtl) { border-style: none solid none none; } } } %top_button { border-radius: 3px 3px 0 0; border-style: solid solid none solid; } %bottom_button { border-radius: 0 0 3px 3px; border-style: none solid solid solid; } diff --git a/src/gtk318/widgets/_switch.scss b/src/gtk318/widgets/_switch.scss index dc305a3..ea02fa0 100644 --- a/src/gtk318/widgets/_switch.scss +++ b/src/gtk318/widgets/_switch.scss @@ -1,67 +1,69 @@ +@charset "UTF-8"; + /********** * Switch * **********/ GtkSwitch { -GtkSwitch-slider-width: 24px; -GtkSwitch-slider-height: 24px; font-weight: bold; font-size: smaller; outline-offset: 0px; color: transparent; box-shadow: none; // needs to be set here // otherwise it gets // clipped &.trough { // similar to the .scale border: 0px solid; border-radius: 12px; background-image: none; background-color: transparentize(b_color(text),0.7); text-shadow: none; &:active { background-color: s_color(normal); box-shadow: none; text-shadow: none; } &:backdrop { background-color: backdrop(transparentize(b_color(text),0.7)); } } &.slider { border: 1px solid; border-radius: 11px; background-color: w_color(normal); border-color: $border_color; &:hover { box-shadow: none; border-color: b_color(hover); background-color: w_color(normal); } &:active { border-color: b_color(active); &:hover { border-color: b_color(hover)} } &:insensitive { background-color: insensitive(w_color(normal)); } &:backdrop { background-color: backdrop(w_color(normal)); &:insensitive { background-color: backdrop(insensitive(w_color(normal))); } } } .header-bar & { &.trough { &:backdrop { background-color:transparent; } } &.slider { &:backdrop { background-color: t_color(backdrop-text); } } } } diff --git a/src/gtk318/widgets/_toolbar.scss b/src/gtk318/widgets/_toolbar.scss index 8e501d4..2434f10 100644 --- a/src/gtk318/widgets/_toolbar.scss +++ b/src/gtk318/widgets/_toolbar.scss @@ -1,46 +1,48 @@ +@charset "UTF-8"; + /************ * Toolbars * ************/ .toolbar, .primary-toolbar { -GtkWidget-window-dragging: true; padding: 4px; background-color: w_color(normal); &:backdrop { background-color: backdrop(w_color(normal)); box-shadow: none; } .osd &, &.osd { padding: 13px; border: none; border-radius: $r; background-color: w_color(normal); &:backdrop { border-color: backdrop($border_color); background-color: backdrop(w_color(normal)); box-shadow: none; } } } //searchbar, location-bar & inline-toolbar .inline-toolbar { @extend .toolbar; @extend %inset-bar; border-width: 0px 0px 1px 0px; padding: 3px; border-radius: 0; } .search-bar, .location-bar { @extend .toolbar; @extend %inset-bar; border-width: 0px 0px 1px 0px; padding: 3px; } %inset-bar { border-style: solid; border-color: $border_color; text-shadow: none; background-color: w_color(normal); } diff --git a/src/gtk318/widgets/_tooltips.scss b/src/gtk318/widgets/_tooltips.scss index 53bbe95..3153ca7 100644 --- a/src/gtk318/widgets/_tooltips.scss +++ b/src/gtk318/widgets/_tooltips.scss @@ -1,28 +1,30 @@ +@charset "UTF-8"; + /************ * Tooltips * ************/ .tooltip { &.background { // background-color needs to be set this way otherwise it gets drawn twice // see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details. background-color: tooltip(background); background-clip: padding-box; } color: tooltip(text); padding: 4px; /* not working */ border-radius: 5px; box-shadow: none; // otherwise it gets inherited by windowframe.csd text-shadow: none; border: 1px solid tooltip(border); &.window-frame.csd { background-color: transparent; } } .tooltip * { //Yeah this is ugly padding: 4px; background-color: transparent; color: inherit; // just to be sure } diff --git a/src/gtk318/widgets/_treeview.scss b/src/gtk318/widgets/_treeview.scss index 78f5bed..0ffea46 100644 --- a/src/gtk318/widgets/_treeview.scss +++ b/src/gtk318/widgets/_treeview.scss @@ -1,136 +1,138 @@ +@charset "UTF-8"; + /************** * Tree Views * **************/ GtkTreeView.view { -GtkTreeView-grid-line-width: 0; -GtkTreeView-grid-line-pattern: ''; -GtkTreeView-tree-line-width: 1; -GtkTreeView-tree-line-pattern: ''; -GtkTreeView-expander-size: 16; border-left-color: $border_color; // this is actually the tree lines color, border-top-color: transparent; // while this is the grid lines color, better then nothing &:selected { border-radius: 0; } // rest border radius in lists &:selected { background-color: s_color(normal); border-left-color: s_color(text); border-top-color: s_color(text); // doesn't work unfortunatelly } &:backdrop:selected { background-color: backdrop(s_color(backdrop)); border-left-color: backdrop(s_color(text)); border-top-color: backdrop(s_color(text)); } &:insensitive { color: insensitive($border_color); &:selected { color: insensitive(s_color(text)); &:backdrop { color: backdrop(insensitive(s_color(text))); } } &:backdrop { color: backdrop(insensitive($border_color)); } } &.separator { color: $border_color; } &.separator:backdrop { color: backdrop($border_color); } &:backdrop { border-left-color: backdrop($border_color); } &.dnd { border-style: solid none; border-width: 1px; border-color: b_color(hover); } &.expander { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); color: v_color(text); &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl');} &:hover { color: b_color(hover); } &:selected { color: s_color(text); } &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); &:selected { color: s_color(text); } &:backdrop { color: backdrop(v_color(normal)); } } &:backdrop { color: backdrop(v_color(text)); } } } column-header { .button { @extend %column_header_button; color: b_color(text); background-color: b_color(normal); text-shadow: none; box-shadow: none; &:hover { @extend %column_header_button; color: b_color(text); background-color: transparentize(b_color(hover), 0.5); box-shadow: none; transition: none; //I shouldn't need this } &:active { @extend %column_header_button; color: b_color(text); background-color: transparentize(b_color(hover), 0.5); transition: none; //I shouldn't need this } &.dnd { @extend column-header.button.dnd; } } &:last-child .button, &:last-child .button:backdrop, // set :backdrop too or the border will be visibile there &:last-child.button, &:last-child.button:backdrop { //treeview-like derived widgets in Banshee and Evolution border-right-style: none; } } column-header.button.dnd { // for treeview-like derive widgets transition: none; color: s_color(normal); box-shadow: none; &:active { @extend column-header.button.dnd; } &:selected { @extend column-header.button.dnd; } &:hover { @extend column-header.button.dnd; } } %column_header_button { padding: 6px; border-style: none solid solid none; border-radius: 0; background-image: none; border-color: $border_color; text-shadow: none; &:insensitive { border-color: insensitive($border_color); color: insensitive(b_color(text)); background-color: insensitive(b_color(normal)); background-image: none; } &:backdrop { border-color: backdrop($border_color); border-style: none solid solid none; color: backdrop(b_color(text)); background-image: none; background-color: backdrop(b_color(normal)); &:insensitive { border-color: backdrop(insensitive($border_color)); background-image: none; background-color: backdrop(insensitive(b_color(normal))); color: backdrop(insensitive(b_color(text))); } } } diff --git a/src/gtk318/widgets/_window_decorations.scss b/src/gtk318/widgets/_window_decorations.scss index e47cc14..493b5a2 100644 --- a/src/gtk318/widgets/_window_decorations.scss +++ b/src/gtk318/widgets/_window_decorations.scss @@ -1,174 +1,176 @@ +@charset "UTF-8"; + /********************** * Window Decorations * *********************/ .window-frame { //border: 1px solid transparent; border-radius: $r; box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.5); // FIXME rationalize window-frame shadows /* this is used for the resize cursor area */ margin: 10px; &:backdrop { box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.5); } &.tiled { border-radius: 0; } &.popup { border-radius: $r; box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1) } // server-side decorations as used by mutter &.ssd { box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.1); } &.csd { border-radius: $r; &.popup { box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1) } &.tooltip { box-shadow: none; } &.message-dialog { box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.5) } } &.solid-csd { border-radius: 0; margin: 0px; background-color: t_color(background-light); border: none; box-shadow: none; } } // Window Close button .header-bar .button.titlebutton, .titlebar .button.titlebutton { @extend %undecorated_button; padding: 0px; &:hover, &:active, &:checked, &:backdrop, &:active:hover { @extend %undecorated_button; transition: none;} &.close { padding: 1px; color: transparent; border-image: none; box-shadow: none; background-position: center; background-repeat: no-repeat; background-image: -gtk-scaled(url('../assets/titlebutton-close.png'),url('../assets/titlebutton-close@2.png')); } &.close:hover { border-color: transparent; background-color: transparent; background-image: -gtk-scaled(url('../assets/titlebutton-close-hover.png'),url('../assets/titlebutton-close-hover@2.png')); } &.close:active { border-color: transparent; background-color: transparent; background-image: -gtk-scaled(url('../assets/titlebutton-close-active.png'),url('../assets/titlebutton-close-active@2.png')); } &.close:backdrop { border-color: transparent; background-color: transparent; background-image: -gtk-scaled(url('../assets/titlebutton-close-backdrop.png'),url('../assets/titlebutton-close-backdrop@2.png')); } &.maximize { padding: 1px; color: transparent; border-image: none; box-shadow: none; background-position: center; background-repeat: no-repeat; background-image: -gtk-scaled(url('../assets/titlebutton-maximize.png'),url('../assets/titlebutton-maximize@2.png')); } &.maximize:hover { border-color: transparent; background-color: transparent; background-image: -gtk-scaled(url('../assets/titlebutton-maximize-hover.png'),url('../assets/titlebutton-maximize-hover@2.png')); } &.maximize:active { border-color: transparent; background-color: transparent; background-image: -gtk-scaled(url('../assets/titlebutton-maximize-active.png'),url('../assets/titlebutton-maximize-active@2.png')); } &.maximize:backdrop { border-color: transparent; background-color: transparent; background-image: -gtk-scaled(url('../assets/titlebutton-maximize-backdrop.png'),url('../assets/titlebutton-maximize-backdrop@2.png')); } &.minimize { padding: 1px; color: transparent; border-image: none; box-shadow: none; background-position: center; background-repeat: no-repeat; background-image: -gtk-scaled(url('../assets/titlebutton-minimize.png'),url('../assets/titlebutton-minimize@2.png')); } &.minimize:hover { border-color: transparent; background-color: transparent; background-image: -gtk-scaled(url('../assets/titlebutton-minimize-hover.png'),url('../assets/titlebutton-minimize-hover@2.png')); } &.minimize:active { border-color: transparent; background-color: transparent; background-image: -gtk-scaled(url('../assets/titlebutton-minimize-active.png'),url('../assets/titlebutton-minimize-active@2.png')); } &.minimize:backdrop { border-color: transparent; background-color: transparent; background-image: -gtk-scaled(url('../assets/titlebutton-minimize-backdrop.png'),url('../assets/titlebutton-minimize-backdrop@2.png')); } } .header-bar, .titlebar { .maximized & { .button.titlebutton { &.maximize { padding: 1px; color: transparent; border-image: none; box-shadow: none; background-position: center; background-repeat: no-repeat; background-image: -gtk-scaled(url('../assets/titlebutton-maximize-maximized.png'),url('../assets/titlebutton-maximize-maximized@2.png')); } &.maximize:hover { border-color: transparent; background-color: transparent; background-image: -gtk-scaled(url('../assets/titlebutton-maximize-maximized-hover.png'),url('../assets/titlebutton-maximize-maximized-hover@2.png')); } &.maximize:active { border-color: transparent; background-color: transparent; background-image: -gtk-scaled(url('../assets/titlebutton-maximize-maximized-active.png'),url('../assets/titlebutton-maximize-maximized-active@2.png')); } &.maximize:backdrop { border-color: transparent; background-color: transparent; background-image: -gtk-scaled(url('../assets/titlebutton-maximize-maximized-backdrop.png'),url('../assets/titlebutton-maximize-maximized-backdrop@2.png')); } } } } .header-bar.selection-mode .button.titlebutton, .titlebar.selection-mode .button.titlebutton { text-shadow: none; &:backdrop { icon-shadow: none; } } diff --git a/src/gtk320/gtk.scss b/src/gtk320/gtk.scss index 2887989..8147294 100644 --- a/src/gtk320/gtk.scss +++ b/src/gtk320/gtk.scss @@ -1,31 +1,33 @@ +@charset "UTF-8"; + @import 'global'; @import '../functions'; @import '../colors'; @import "widgets/base"; @import "widgets/button"; @import "widgets/entry"; @import "widgets/app_notifications"; @import "widgets/calendar"; @import "widgets/checkboxes"; @import "widgets/color_chooser"; @import "widgets/dialogs"; @import "widgets/headerbar"; @import "widgets/infobar"; @import "widgets/link"; @import "widgets/lists"; @import "widgets/menus"; @import "widgets/misc"; @import "widgets/notebook"; @import "widgets/overshoot"; @import "widgets/pathbar"; @import "widgets/progressbar"; @import "widgets/scale"; @import "widgets/scrollbar"; @import "widgets/sidebar"; @import "widgets/spinbutton"; @import "widgets/switch"; @import "widgets/toolbar"; @import "widgets/tooltips"; @import "widgets/treeview"; @import "widgets/window_decorations"; diff --git a/src/gtk320/widgets/_app_notifications.scss b/src/gtk320/widgets/_app_notifications.scss index 3ca855e..b1b8dcf 100644 --- a/src/gtk320/widgets/_app_notifications.scss +++ b/src/gtk320/widgets/_app_notifications.scss @@ -1,44 +1,46 @@ +@charset "UTF-8"; + /********************* * App Notifications * *********************/ .app-notification, .app-notification.frame { @extend %osd; padding: 10px; border-top-width: 0px; border-radius: 0px 0px 3px 3px; &:backdrop { background-image: none; } button { @include button(normal); &.flat { @extend %undecorated_button; -gtk-icon-shadow: none; text-shadow: none; &:hover { @extend %undecorated_button; color: b_color(hover); } &:active { @extend %undecorated_button; color: b_color(active); } &:backdrop, &:disabled, &:backdrop:disabled { @extend %undecorated_button; } } &:hover { @include button(hover); } &:active, &:checked, &:backdrop:active, &:backdrop:checked { @include button(active); } &:disabled, &:backdrop:disabled{ @include button(insensitive); } &:backdrop { @include button(backdrop); } } border {border: none;} } \ No newline at end of file diff --git a/src/gtk320/widgets/_base.scss b/src/gtk320/widgets/_base.scss index 6096bf0..8517bb1 100644 --- a/src/gtk320/widgets/_base.scss +++ b/src/gtk320/widgets/_base.scss @@ -1,260 +1,262 @@ +@charset "UTF-8"; + @function gtkalpha($c,$a) { @return unquote("alpha(#{$c},#{$a})"); } $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); * { padding: 0; -GtkToolButton-icon-spacing: 4; -GtkTextView-error-underline-color: $error_color; // 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; -GtkScrolled-window-overlay-scrolling: FALSE; -GtkToolItemGroup-expander-size: 11; -GtkTreeView-expander-size: 11; -GtkTreeView-horizontal-separator: 4; -GtkWidget-text-handle-width: 20; -GtkWidget-text-handle-height: 20; -GtkDialog-button-spacing: 4; -GtkDialog-action-area-border: 0; outline-width: 0px; } /*************** * Base States * ***************/ .background { color: w_color(text); background-color: w_color(normal); &:backdrop { text-shadow: none; -gtk-icon-shadow: none; color: backdrop(w_color(text)); background-color: backdrop(w_color(normal)); } } /* 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. */ *:disabled { -gtk-icon-effect: dim; } .gtkstyle-fallback { background-color: w_color(normal); color: w_color(text); &:hover { background-color: lighten(w_color(normal), 10%); color: w_color(text); } &:active { background-color: darken(w_color(normal), 10%); color: w_color(text); } &:disabled { background-color: insensitive(w_color(normal)); color: insensitive(w_color(text)); } &:selected { background-color: s_color(normal); color: s_color(text); } } %view, .view { color: v_color(text); background-color: v_color(normal); &:backdrop { color: backdrop(v_color(text)); background-color: backdrop(v_color(normal)); } &:disabled { color: insensitive(v_color(text)); } &:selected { &:focus, & { border-radius: $r; @extend %selected_items; } } } .view, textview { text { @extend %view; selection { &:focus, & { @extend %selected_items; }} } } textview border { background-color: v_color(normal); background-image: image($border_color); // HACK: the border node just draws background so, background-repeat: no-repeat; // using a background-image to draw the border &:backdrop { background-color: backdrop(v_color(normal)); } &.bottom { background-size: 100% 1px; background-position: top; } &.top { background-size: 100% 1px; background-position: bottom; } &.left { background-size: 1px 100%; background-position: right; } &.right { background-size: 1px 100%; background-position: left; } } .rubberband, rubberband { border: 1px solid s_color(normal); background-color: transparentize(s_color(normal),0.8); &:backdrop { border-color: backdrop(s_color(normal)); background-color: backdrop(transparentize(s_color(normal),0.8)); } } flowbox { rubberband { @extend rubberband; } flowboxchild { padding: 3px; border-radius: $r; &:selected { @extend %selected_items; outline-offset: 0px; } } } label { &.separator { color: w_color(text); @extend .dim-label; &:backdrop { color: backdrop(w_color(text)); } } selection { background-color: s_color(normal); color: s_color(text) } &:disabled { color: insensitive(w_color(text)); selection { @extend %selected_items:disabled; } &:backdrop { color: backdrop(insensitive(w_color(text))); } } &:backdrop { color:backdrop(w_color(text)); selction {@extend %selected_items:backdrop;} } } .dim-label { opacity: 0.5; text-shadow: none; } assistant { .sidebar { background-color: v_color(text); border-top: 1px solid $border_color; &:backdrop { background-color: backdrop(v_color(text)); border-color: backdrop($border_color); } } &.csd .sidebar { border-top-style: none; } .sidebar label { padding: 6px 12px; } .sidebar label.highlight { background-color: mix(v_color(normal), v_color(text), 80%); } } %osd, .osd { color: w_color(text); border: 1px solid $border_color; background-color: transparentize(w_color(normal),0.2); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; &:backdrop { color: backdrop(w_color(text)); background-color: backdrop(transparentize(w_color(normal),0.2)); -gtk-icon-shadow: none; } } %selected_items { background-color: s_color(normal); color: s_color(text); &:hover { background-color: s_color(hover); color: w_color(text); } &:backdrop { background-color: backdrop(s_color(backdrop)); color: backdrop(v_color(normal)); } } %selected_items { background-color: s_color(normal); border-radius: 0px; @at-root %nobg_selected_items, & { color: s_color(text); &:disabled { color: insensitive(s_color(text)); } &:backdrop { color: backdrop(s_color(text)); &:disabled { color: backdrop(insensitive(s_color(text))); } } } } diff --git a/src/gtk320/widgets/_button.scss b/src/gtk320/widgets/_button.scss index 0818026..c3f62b8 100644 --- a/src/gtk320/widgets/_button.scss +++ b/src/gtk320/widgets/_button.scss @@ -1,496 +1,498 @@ +@charset "UTF-8"; + // buttons @mixin button($t, $c:b_color(normal), $tc:b_color(text)) { // // Button drawing function // // $t: button type, // $c: base button color for colored* types // $tc: optional text color for colored* types // $edge: set to none to not draw the bottom edge or specify a color to not // use the default one // // possible $t values: // normal, hover, active, insensitive, insensitive-active, // backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active, // osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated // @if $t==normal { // // normal button // box-shadow: 1px 1px 1px rgba(0,0,0,0.1); text-shadow: none; -gtk-icon-shadow: none; color: $tc; border-color: if($c!=b_color(normal), $c, $border_color); background-image: button_gradient($c, normal); } @else if $t==hover { // // hovered button // color: $tc; border-color: if($c!=b_color(normal), $c, b_color(hover)); } @else if $t==active { // // pushed button // color: if($tc==b_color(text),b_color(active-text), $tc); border-color: if($c!=b_color(normal), $c, b_color(active)); background-image: if($c!=b_color(normal), button_gradient($c, active), button_gradient(b_color(active),active)); } @else if $t==active-hover { // // // color: $tc; border-color: if($c!=b_color(normal), transparentize($c, 0.5), b_color(hover)); background-image: if($c!=b_color(normal), button_gradient(transparentize($c, 0.5),active), button_gradient(b_color(hover),active)); } @else if $t==insensitive { // // insensitive button // color: if($tc!=b_color(text),insensitive($tc),insensitive(b_color(text))); border-color: if($c!=b_color(normal), insensitive($c), insensitive($border_color)); background-image: if($c!=b_color(normal), button_gradient(insensitive($c), normal), button_gradient(insensitive(b_color(normal)), normal)); > .label { color: inherit; } } @else if $t==insensitive-active { // // insensitive pushed button // color: if($tc!=b_color(text), insensitive($tc), insensitive(b_color(active-text))); border-color: insensitive(b_color(active)); background-image: if($c!=b_color(normal), button_gradient(insensitive($c), active), button_gradient(insensitive(b_color(active)),active)); > .label { color: inherit; } } @else if $t==backdrop { // // backdrop button // color: backdrop($tc); border-color: backdrop($border_color); background-image: button_gradient(backdrop($c), normal); } @else if $t==backdrop-active { // // backdrop pushed button // color: if($tc!=b_color(text), backdrop($tc), backdrop(b_color(active-text))); border-color: if($c!=b_color(normal), backdrop($c), backdrop(b_color(active))); background-image: if($c!=b_color(normal), button_gradient(backdrop($c), active), button_gradient(backdrop(b_color(active)),active)); } @else if $t==backdrop-insensitive { // // backdrop insensitive button // color: backdrop(insensitive($tc)); border-color: if($c!=b_color(normal), backdrop(insensitive($c)), backdrop(insensitive($border_color))); background-image: button_gradient(backdrop(insensitive($c))); > .label { color: inherit; } } @else if $t==backdrop-insensitive-active { // // backdrop insensitive pushed button // color: if($c!=b_color(normal), backdrop(insensitive($tc)), backdrop(insensitive(b_color(active-text)))); border-color: if($c!=b_color(normal), backdrop(insensitive($c)), backdrop(insensitive(b_color(active)))); background-image: if($c!=b_color(normal), button_gradient(backdrop(insensitive($c)), active), button_gradient(backdrop(insensitive(b_color(active))),active)); > .label { color: inherit; } } @else if $t==undecorated { // // reset // border-color: transparentize(white,1); //FIXME needed? background-color: transparent; background-image: none; box-shadow:none; color: $tc; text-shadow: none; -gtk-icon-shadow: none; } } /*********** * Buttons * ***********/ // stuff for .needs-attention $_dot_color: b_color(active); @keyframes needs_attention { from { background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to($_dot_color), to(transparent)); } to { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(s_color(normal)), to(transparent)); } } %buttons { $_button_transition: all 200ms $ease-out-quad; border: 1px solid; border-radius: $r; padding: 4px 6px; background-clip: border-box; transition: $_button_transition; @include button(normal); &.flat { @include button(undecorated); // to avoid adiacent buttons borders clashing when transitioning, the transition on the normal state is set // to none, while it's added back in the hover state, so the button decoration will fade in on hover, but // it won't fade out when the pointer leave the button allocation area. To make the transition more evident // in this case the duration is increased. transition: none; &:hover { transition: $_button_transition; transition-duration: 500ms; &:active { transition: $_button_transition; } } &:checked { background-color: $border_color;} } &:hover { @include button(hover); -gtk-icon-effect: none; // Do we want this? } &:active, &:checked { @include button(active); transition-duration: 50ms; &:hover { @include button(active-hover); } } &:backdrop { @include button(backdrop); -gtk-icon-effect: none; &:active, &:checked { @include button(backdrop-active); } &:disabled { @include button(backdrop-insensitive); } &:disabled:active, &:disabled:checked { @include button(backdrop-insensitive-active); } } &.flat:backdrop { -gtk-icon-effect: none; @include button(undecorated); color: backdrop(b_color(text)); } &.flat:disabled { @include button(undecorated); color: insensitive(b_color(text)); } &.flat:backdrop:disabled { @include button(undecorated); color: backdrop(insensitive(b_color(text))); } &:disabled { @include button(insensitive); &:active, &:checked { @include button(insensitive-active); } } separator { background-color: transparent; background-image: none; color: transparent; } } %button, button { @at-root %button_basic, & { @extend %buttons; &.osd { @extend %buttons; } //overlay / OSD style .osd & { //@extend %buttons; } &.image-button { min-width:16px; padding: 6px; } &.text-button { padding-left: 6px; padding-right: 6px; } &.text-button.image-button { padding-left: 6px; padding-right: 6px; label { padding-left: 6px; padding-right: 6px; } } // FIXME // &:drop(active) { // color: $drop_target_color; // border-color: $drop_target_color; // box-shadow: inset 0 0 0 1px $drop_target_color; // } } @at-root %button_selected, & { row:selected & { border-color: s_color(normal); &.flat:not(:active):not(:checked):not(:hover):not(disabled) { color: s_color(text); border-color: transparent; &:backdrop { color: backdrop(s_color(text)); } } } } // Suggested and Destructive Action buttons @each $b_type, $button_color in (suggested-action, b_color(active)), (destructive-action, $error_color) { &.#{$b_type}, &.#{$b_type}.osd & { @include button(normal, $button_color, b_color(active-text)); &.flat { @include button(undecorated); color: $button_color; } &:hover { @include button(hover, $button_color, white); } //FIXME no hardcoded colors &:active, &:checked { @include button(active, $button_color, white); } &:backdrop, &.flat:backdrop { @include button(backdrop, $button_color, white); &:active, &:checked { @include button(backdrop-active, $button_color, white); } &:disabled { @include button(backdrop-insensitive); &:active, &:checked { @include button(backdrop-insensitive-active, $button_color, white); } } } &.flat:backdrop, &.flat:disabled, &.flat:backdrop:disabled { @include button(undecorated); color: transparentize($button_color, 0.2); } &:disabled { @include button(insensitive); &:active, &:checked { @include button(insensitive-active, $button_color, white); } } } } .stack-switcher > & { // to position the needs attention dot, padding is added to the button // child, a label needs just lateral padding while an icon needs vertical // padding added too. > label { padding-left: 6px; // label padding padding-right: 6px; // } > image { padding-left: 6px; // image padding padding-right: 6px; // padding-top: 3px; // padding-bottom: 3px; // } &.text-button { padding: 6px; // needed or it will get overridden } &.image-button { // we want image buttons to have a 1:1 aspect ratio, so compensation // of the padding added to the GtkImage is needed padding: 3px 0px; } &.needs-attention > label, &.needs-attention > image { @extend %needs_attention; } &.needs-attention:active > label, &.needs-attention:active > image, &.needs-attention:checked > label, &.needs-attention:checked > image { animation: none; background-image: none; } } //inline-toolbar buttons .inline-toolbar &, .inline-toolbar &:backdrop { border-radius: $r; border-width: 1px; @extend %linked; } .primary-toolbar & { -gtk-icon-shadow: none; } .linked > &, .linked > &:hover, .linked > &:active, .linked > &:checked, .linked > &:backdrop { @extend %linked; } .linked.vertical > &, .linked.vertical > &:hover, .linked.vertical > &:active, .linked.vertical > &:checked, .linked.vertical > &:backdrop { @extend %linked_vertical; } } /************** * ComboBoxes * **************/ combobox { arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); min-height: 16px; min-width: 16px; } &.linked { button:nth-child(2) { &:dir(ltr) { @extend %linked:last-child; } &:dir(rtl) { @extend %linked:first-child; } } } // &:drop(active) { // FIXME: untested // box-shadow: none; // // button.combo { @extend %button_basic:drop(active); } //} } .linked > combobox > box > button.combo { // the combo is a composite widget so the way we do button linking doesn't // work, special case needed. See // https://bugzilla.gnome.org/show_bug.cgi?id=733979 &:dir(ltr), &:dir(rtl) { @extend %linked_middle; } // specificity bump } .linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; } .linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; } .linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; } .linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; } .linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;} .linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; } .linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; } %needs_attention { animation: needs_attention 150ms ease-in; $_dot_shadow: b_color(text); $_dot_shadow_r: 0.5; background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to($_dot_color), to(transparent)), -gtk-gradient(radial, center center, 0, center center, $_dot_shadow_r, to($_dot_shadow), to(transparent)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 4px; &:backdrop {background-size: 6px 6px, 0 0;} &:dir(rtl) { background-position: left 3px, left 4px; } } %linked_middle { border-radius: $r; &:dir(rtl) { border-radius: $r; // needed when including %linked_middle:dir(rtl) } } %linked { margin-left: 2px; margin-right: 2px; @extend %linked_middle; &:first-child { border-radius: $r; border-style: solid; } &:last-child { border-radius: $r; &:dir(rtl) { } } &:only-child { border-radius: $r; border-style: solid; } } %linked_vertical_middle { border-style: solid; border-radius: $r; } %linked_vertical{ @extend %linked_vertical_middle; &:first-child { border-radius: $r; } &:last-child { border-radius: $r; border-style: solid; } &:only-child { border-radius: $r; border-style: solid; } } %undecorated_button { border-color: transparent; background-color: transparent; background-image: none; box-shadow:none; text-shadow: none; -gtk-icon-shadow: none; } diff --git a/src/gtk320/widgets/_calendar.scss b/src/gtk320/widgets/_calendar.scss index a8c4875..fec716d 100644 --- a/src/gtk320/widgets/_calendar.scss +++ b/src/gtk320/widgets/_calendar.scss @@ -1,64 +1,66 @@ +@charset "UTF-8"; + /************ * Calendar * ***********/ calendar { color: v_color(text); border: 1px solid $border_color; background-color: v_color(normal); &:selected { background-color: $border_color; } &:disabled { color: insensitive(v_color(text)); } &.header { border: 1px solid $border_color; border-radius: 0; color: v_color(text); &:backdrop { color: backdrop(v_color(text)); border-color: backdrop($border_color); } &:disabled { color: insensitive(v_color(text)); } } &.button { @extend %undecorated_button; color: b_color(text); &:hover { @extend %undecorated_button; color: b_color(hover); } &:active { @extend %undecorated_button; color: b_color(active); } &:backdrop { @extend %undecorated_button; color: backdrop(b_color(text)); } } &:indeterminate, &.highlight { color: transparentize(v_color(text),0.5); } &:indeterminate:backdrop, &.highlight:backdrop { color: backdrop(transparentize(v_color(text),0.5)); } &:backdrop { color: backdrop(v_color(text)); border-color: backdrop($border_color); background-color: backdrop(v_color(normal)); } } diff --git a/src/gtk320/widgets/_checkboxes.scss b/src/gtk320/widgets/_checkboxes.scss index aa536e1..62adbe9 100644 --- a/src/gtk320/widgets/_checkboxes.scss +++ b/src/gtk320/widgets/_checkboxes.scss @@ -1,79 +1,81 @@ +@charset "UTF-8"; + /************************* * Check and Radio items * *************************/ @each $s,$as in ('','-unchecked'), (':hover', '-unchecked-hover'), (':active', '-unchecked-active'), (':backdrop', '-unchecked-backdrop'), (':checked', '-checked-active'), (':checked:hover', '-checked-hover'), (':checked:active', '-checked-active'), (':backdrop:checked', '-checked-backdrop') { .view.content-view.check#{$s}:not(list) { -gtk-icon-shadow: none; -gtk-icon-source: -gtk-scaled(url("../assets/check-selectionmode#{$as}.png"), url("../assets/check-selectionmode#{$as}@2.png")); background-color: transparent; } } checkbutton.text-button, radiobutton.text-button { // this is for a nice focus on check and radios text padding: 2px 0; outline-offset: 0; label:not(:only-child) { &:first-child { margin-left: 4px; } &:last-child { margin-right: 4px; } } } @each $a in ('check','radio') { #{$a} { margin: 0 4px; &:only-child { margin: 0; } min-height: 18px; min-width: 18px; //border: none; animation: none; background-color: transparent; -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-unchecked.png"), url("../assets/#{$a}-unchecked@2.png")); @each $s,$as in ('hover','-hover'), ('active','-active'), ('disabled','-insensitive'), ('backdrop','-backdrop'), ('backdrop:disabled','-backdrop-insensitive') { &:#{$s} { -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-unchecked#{$as}.png"), url("../assets/#{$a}-unchecked#{$as}@2.png")); } &:checked { -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-checked-active.png"), url("../assets/#{$a}-checked-active@2.png")); &:#{$s} { -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-checked#{$as}.png"), url("../assets/#{$a}-checked#{$as}@2.png")); } } &:indeterminate { -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-mixed-active.png"), url("../assets/#{$a}-mixed-active@2.png")); &:#{$s} { -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-mixed#{$as}.png"), url("../assets/#{$a}-mixed#{$as}@2.png")); } } } menu menuitem & { margin: 0; // this is a workaround for a menu check/radio size allocation issue min-height: 18px; min-width: 18px; background-color: transparent; box-shadow: none; -gtk-icon-shadow: none; animation: none; &:hover { -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-unchecked.png"), url("../assets/#{$a}-unchecked@2.png")); } &:checked:hover { -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-checked-active.png"), url("../assets/#{$a}-checked-active@2.png")); } &:indeterminate:hover { -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-mixed-active.png"), url("../assets/#{$a}-mixed-active@2.png")); } } } } diff --git a/src/gtk320/widgets/_color_chooser.scss b/src/gtk320/widgets/_color_chooser.scss index 8161280..af1f666 100644 --- a/src/gtk320/widgets/_color_chooser.scss +++ b/src/gtk320/widgets/_color_chooser.scss @@ -1,96 +1,98 @@ +@charset "UTF-8"; + /***************** * Color Chooser * *****************/ // FIXME button.color in buttons section colorswatch { // take care of colorswatches on selected elements :selected & { box-shadow: none; &.overlay, &.overlay:hover { border-color: s_color(text); } } &:selected { box-shadow: none; } &.top, &.bottom, &.left, &:first-child:not(.overlay):not(.top), &.right, &:last-child:not(.overlay):not(.bottom), &:only-child:not(.overlay), &.top > .overlay, &.bottom > .overlay, &:first-child:not(.top) > .overlay, &:last-child:not(.bottom) > .overlay, &:only-child > .overlay { border-radius: $r; } // hover effect &:hover, &:hover:selected { background-image: linear-gradient(135deg, transparentize(white, 0.3), transparentize(white, 1) 50%); box-shadow: inset 0 1px transparentize(white, 0.6); &.color-dark { // swatches with colors with luminosity lower than 50% get the color-dark class background-image: linear-gradient(135deg, transparentize(white, 0.5), transparentize(white, 1) 50%); } } &:backdrop, &:backdrop:selected &.color-dark:backdrop, &.color-dark:backdrop:selected { background-image: none; box-shadow: none; } // no hover effect for the colorswatch in the color editor GtkColorEditor & { border-radius: $r; // same radius as the entry &:hover { background-image: none; box-shadow: none; } &:backdrop { box-shadow: none; } } // indicator and keynav outline colors &.color-dark { color: white; outline-color: transparentize(black, 0.7); &:backdrop { color: transparentize(white, 0.7); } } &.color-light { color: black; outline-color: transparentize(white, 0.5); &:backdrop { color: transparentize(black, 0.7); } } // border color overlay, overlay:selected { border: 1px solid $border_color; &:hover { border-color: b_color(hover); } } // make the add color button looks like, well, a button &#add-color-button { border-style: solid; // the borders are drawn by the overlay for standard colorswatches to have them semi border-width: 1px; // translucent on the colored background, here it's not necessary so they need to be set @include button(normal); &:hover { @include button(hover); } &:backdrop { @include button(backdrop); } overlay { @include button(undecorated); } // reset the overlay to not cover the button style underneat } } GtkColorButton.button { padding: 5px; // Uniform padding on the GtkColorButton GtkColorSwatch:first-child:last-child { // :first-child:last-child for a specificity bump, it gets overridden by the // colorpicker style, otherwise border-radius: 0; box-shadow: none; &:disabled, &:backdrop { box-shadow: none; } } } diff --git a/src/gtk320/widgets/_dialogs.scss b/src/gtk320/widgets/_dialogs.scss index c3f8849..bfaf0e6 100644 --- a/src/gtk320/widgets/_dialogs.scss +++ b/src/gtk320/widgets/_dialogs.scss @@ -1,44 +1,46 @@ +@charset "UTF-8"; + /*********** * Dialogs * ***********/ // .message-dialog .dialog-action-area .button { // //padding: 8px; // } messagedialog { // Message Dialog styling &.background { background-color: w_color(normal); } &:backdrop { background-color: backdrop(w_color(normal))} .titlebar { min-height: 32px; background-color: transparent; background-image: linear-gradient(to bottom,change-color(t_color(background),$lightness: min(lightness(t_color(background))*1.2,100%)),t_color(background)); box-shadow: none; } .dialog-action-area { padding: 8px; } button { margin: 2px; } } filechooser { .search-bar { background-color: w_color(normal); border-color: w_color(normal); box-shadow: none; &:backdrop { background-color: backdrop(w_color(normal)); border-color: backdrop(w_color(normal)); color: backdrop(w_color(text)); } } .dialog-action-box { border-top: 1px solid $border_color; &:backdrop { border-top-color: backdrop($border_color); } } #pathbarbox { background-color: w_color(normal); border-bottom: 1px solid $border_color; } } diff --git a/src/gtk320/widgets/_entry.scss b/src/gtk320/widgets/_entry.scss index 8535165..67eea4c 100644 --- a/src/gtk320/widgets/_entry.scss +++ b/src/gtk320/widgets/_entry.scss @@ -1,145 +1,147 @@ +@charset "UTF-8"; + @mixin entry($t, $fc:v_color(active)) { // // Entries drawing function // // $t: entry type // $fc: focus color // $edge: set to none to not draw the bottom edge or specify a color to not // use the default one // // possible $t values: // normal, focus, insensitive, backdrop, backdrop-insensitive, osd, osd-focus, osd-backdrop; // @if $t==normal { color: v_color(text); border-color: $border_color; background-color: v_color(normal); box-shadow: none; } @if $t==focus { border-color: $fc; } @if $t==insensitive { color: insensitive(v_color(text)); border-color: insensitive($border_color); background-color: insensitive(v_color(normal)); } @if $t==backdrop { color: backdrop(v_color(text)); border-color: backdrop($border_color); background-color: backdrop(v_color(normal)); } @if $t==backdrop-insensitive { color: backdrop(insensitive(v_color(text))); border-color: backdrop(insensitive($border_color)); background-color: backdrop(insensitive(v_color(normal))); } } /**************** * Text Entries * ****************/ %entry, entry { %entry_basic, & { min-height: 30px; padding-left: 8px; padding-right: 8px; border: 1px solid; border-radius: $r; transition: all 200ms $ease-out-quad; @include entry(normal); image { // icons inside the entry &.left { padding-left: 0; padding-right: 6px; } &.right { padding-left: 6px; padding-right: 0; } } // FIXME // undershoot { // &.left { @include undershoot(left); } // &.right { @include undershoot(right); } // } &.flat { &:focus, & { min-height: 0; padding: 2px; @include entry(normal); } } &:focus { @include entry(focus); } &:disabled { @include entry(insensitive); } &:backdrop { @include entry(backdrop); } &:backdrop:disabled { @include entry(backdrop-insensitive); } selection { &:focus, & { @extend %selected_items; }} @each $e_type, $e_color in (error, $error_color), (warning, $warning_color) { &.#{$e_type} { color: $e_color; border-color: $e_color; background-color: transparentize($e_color, 0.5); &:focus { @include entry(focus, $e_color); background-color: transparentize($e_color, 0.5); } &:selected, &:selected:focus { background-color: $e_color; } &:backdrop { color: backdrop($e_color); border-color: backdrop($e_color); background-color: backdrop(transparentize($e_color, 0.5)); } } } image { // entry icons colors color: mix(w_color(text),v_color(text), 80%); &:hover { color: b_color(hover); } &:active { color: b_color(active); } &:backdrop { color: backdrop(mix(w_color(text), v_color(text), 80%)); } } // FIXME // &:drop(active) { // &:focus, & { // border-color: $drop_target_color; // box-shadow: inset 0 0 0 1px $drop_target_color; // } // } } progress { margin: 1px; border-radius: 0; border-width: 0 0 2px; border-color: s_color(normal); border-style: solid; background-image: none; background-color: transparent; box-shadow: none; &:backdrop { background-color: transparent; border-color: backdrop(s_color(backdrop)); } } } treeview acceleditor > label { background-color: s_color(normal); } treeview entry { &.flat, & { border-radius: 0; background-image: none; background-color: v_color(normal); &:focus { border-color: v_color(active); } } } diff --git a/src/gtk320/widgets/_headerbar.scss b/src/gtk320/widgets/_headerbar.scss index 4cbe870..148ebbb 100644 --- a/src/gtk320/widgets/_headerbar.scss +++ b/src/gtk320/widgets/_headerbar.scss @@ -1,168 +1,170 @@ +@charset "UTF-8"; + /*************** * Header bars * ***************/ %titlebar, headerbar { transition: none; padding: 0px 6px; border-width: 0px 0px 1px 0px; border-radius: 3px 3px 0px 0px; border-style: solid; border-color: $border_color; color: t_color(text); background-image: linear-gradient(to bottom,t_color(background-light),t_color(background)); &:backdrop { border-color: transparent; background-image: none; background-color: t_color(backdrop-background); color: t_color(backdrop-text); box-shadow: none; } label { font-weight: normal; &:backdrop { color: t_color(backdrop-text); } } .path-bar button { color: t_color(text); font-weight: normal; &:backdrop { color: t_color(backdrop-text)} } button { transition: none; @include button(undecorated, $tc: t_color(text)); &.flat { @include button(undecorated,$tc: t_color(text)); } &:hover { @include button(hover, $tc: t_color(text)); &:backdrop { border-color: t_color(backdrop-background); } } &:active, &:checked { @include button(active); &:hover { @include button(active-hover); } &:backdrop { background-image: none; background-color: t_color(backdrop-background); border-color: t_color(backdrop-background); color: t_color(backdrop-text); } } &.suggested-action { @extend %suggested-action; } &:backdrop { border-color: transparent; background-image: none; background-color: t_color(backdrop-background); color: t_color(backdrop-text); } &.flat:backdrop, &.flat:backdrop:disabled, &:disabled:backdrop { background-image: none; background-color: t_color(backdrop-background); color: t_color(backdrop-text); border-color: transparent; } &.flat:disabled { @extend %undecorated_button;; color: insensitive(t_color(text)); } &:disabled { background-color: transparent; background-image: none; border-color: transparent; color: insensitive(t_color(text)); &:active, &:checked { @include button(insensitive-active); } } } .title { font-weight: normal; padding: 0px 12px; &:backdrop { color: t_color(backdrop-text)} } .subtitle { font-size: smaller; padding: 0 12px; @extend .dim-label; &:backdrop { color: t_color(backdrop-text)} } separator { border-width: 0px; background-color: transparent; background-image: none; border-color: transparent; } &.selection-mode { @extend .info; &.suggested-action { @extend %suggested-action; } .subtitle:link { @extend *:link:selected; } .selection-menu { padding: 4px 6px; GtkArrow { -GtkArrow-arrow-scaling: 1; } .arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); -gtk-icon-shadow: none; } } } .tiled &, .maximized & { border-radius: 0; // squared corners when the window is max'd or tiled } } headerbar { // add vertical margins to headerbar entries, buttons and separators to avoid them spanning the whole height entry, spinbutton, separator, button { margin-top: 3px; margin-bottom: 3px; } } %suggested-action { background-image: none; background-color: b_color(active); &:hover { background-color: b_color(hover); color: b_color(text) } &:disabled { background-color: transparent; background-image: none; color: insensitive(t_color(text)); &:active, &:checked { @include button(insensitive-active); } } &:backdrop { background-color: t_color(backdrop-background); border-color: transparent; color: t_color(backdrop-text); &:disabled { color: insensitive(t_color(backdrop-text)); } } } diff --git a/src/gtk320/widgets/_infobar.scss b/src/gtk320/widgets/_infobar.scss index 3d2ea16..fa55f59 100644 --- a/src/gtk320/widgets/_infobar.scss +++ b/src/gtk320/widgets/_infobar.scss @@ -1,66 +1,68 @@ +@charset "UTF-8"; + /************** * GtkInfoBar * **************/ infobar { border-style: none; border-bottom: 1px solid $border_color; background-color: w_color(normal); background-image: none; &:backdrop {border-bottom: 1px solid backdrop($border_color);} } .info, .question, .warning, .error { background-color: w_color(normal); background-image: none; color: $warning_color; text-shadow: none; &:backdrop { background-color: backdrop(w_color(normal)); color: backdrop($warning_color); } button { box-shadow: none; background-image:none; background-color: transparentize($warning_color, 0.5); border-color: transparentize($warning_color, 0.5); color: b_color(text); &:hover { background-color: transparentize($warning_color, 0.75); border-color: $warning_color; } &:active, &:checked { background-image: button_gradient($warning_color); color: w_color(normal); border-color: $warning_color; } &:disabled { background-color: insensitive(transparentize($warning_color, 0.5)); border-color: insensitive(transparentize($warning_color, 0.5)); color: insensitive(b_color(text)); } &:backdrop { background-color: backdrop(transparentize($warning_color, 0.5)); border-color: backdrop(transparentize($warning_color, 0.5)); color: backdrop(b_color(text)); &:active, &:checked { background-image: button_gradient(backdrop($warning_color)); color: backdrop(w_color(normal)); border-color: backdrop($warning_color); } &:disabled { background-color: backdrop(insensitive(transparentize($warning_color, 0.5))); border-color: backdrop(insensitive(transparentize($warning_color, 0.5))); color: backdrop(insensitive(b_color(text))); } &:disabled:active, &:disabled:checked { background-image: button_gradient(backdrop(insensitive($warning_color))); color: backdrop(insensitive(w_color(normal))); border-color: backdrop(insensitive($warning_color)); } } } } diff --git a/src/gtk320/widgets/_link.scss b/src/gtk320/widgets/_link.scss index d8de5bc..484aeac 100644 --- a/src/gtk320/widgets/_link.scss +++ b/src/gtk320/widgets/_link.scss @@ -1,49 +1,51 @@ +@charset "UTF-8"; + /********* * Links * *********/ %link, *:link { color: $link_color; &:visited { color: $link_visited_color; *:selected & { color: mix(s_color(text), s_color(normal), 60%); } } &:hover { color: lighten($link_color,10%); *:selected & { color: mix(s_color(text), s_color(normal), 90%); } } &:active { color: $link_color; *:selected & { color: mix(s_color(text), s_color(normal), 80%); } } &:backdrop, &:backdrop:hover, &:backdrop:hover:selected { color: backdrop(s_color(backdrop)); } @at-root %link_selected, &:selected, *:selected & { color: mix(s_color(text), s_color(normal), 80%); } } button:link, button:visited { @extend %undecorated_button; @extend *:link; text-shadow: none; &:hover, &:active, &:checked { @extend %undecorated_button; text-shadow: none; } > label { @extend %link; text-decoration-line: underline; } } diff --git a/src/gtk320/widgets/_lists.scss b/src/gtk320/widgets/_lists.scss index 4cd7594..6aa9302 100644 --- a/src/gtk320/widgets/_lists.scss +++ b/src/gtk320/widgets/_lists.scss @@ -1,48 +1,50 @@ +@charset "UTF-8"; + /********* * Lists * *********/ list { background-color: w_color(normal); color: w_color(text); border-width: 0px; &:backdrop { background-color: backdrop(w_color(normal)); color: backdrop(w_color(text)); } row { padding: 2px; } } row { transition: all 150ms $ease-out-quad; &:hover { transition: none; } &.activatable { &.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411 &:hover { background-color: transparentize(s_color(normal), 0.5); } &:active { box-shadow: none; background-color: s_color(normal); } &:selected { &:active { box-shadow: none; background-color: s_color(normal); } &.has-open-popup, &:hover { color: w_color(text); background-color: s_color(hover); } &:backdrop { background-color: backdrop(s_color(normal)); } } } &:selected { @extend %selected_items; } } diff --git a/src/gtk320/widgets/_menus.scss b/src/gtk320/widgets/_menus.scss index 0c7d647..f3c4d24 100644 --- a/src/gtk320/widgets/_menus.scss +++ b/src/gtk320/widgets/_menus.scss @@ -1,255 +1,257 @@ +@charset "UTF-8"; + /********* * Menus * *********/ menubar, .menubar { -GtkWidget-window-dragging: true; padding: 0px; box-shadow: none; border-style: none; background-color: w_color(normal); &:backdrop { background-color: backdrop(w_color(normal)); } > menuitem { min-height: 16px; padding: 4px 6px; border-style: solid; border-width: 1px 0px; border-color: w_color(normal); &:hover { //Seems like it :hover even with keyboard focus background-color: b_color(active); color: b_color(active-text); } &:disabled { color: insensitive(w_color(text)); box-shadow: none; &:backdrop { background-color: backdrop(w_color(normal)); color: backdrop(insensitive(w_color(text))); } } &:backdrop { background-color: backdrop(w_color(normal)); border-color: backdrop(w_color(normal)); color: backdrop(w_color(text)); } } } menu, .menu { padding: 0px; background-color: $menu_color; border: 0px solid transparent; // FIXME workaround for libreoffice gtk3, should be a border //border: 1px solid $border_color; // adds borders in a non composited env box-shadow: inset 0px 0px 0px 1px $border_color; border-radius: $r; .csd & { //background-color: transparent; border: 0px solid; border-radius: $r; //box-shadow: 0px 0px 0px 1px $border_color, 2px 2px 2px 1px rgba(0, 0, 0, 0.1); } // axes borders in a composited env separator { color: $border_color; margin-top: 3px; margin-bottom: 3px; } menuitem { text-shadow: none; min-height: 16px; min-width: 40px; padding: 4px 4px; &:hover { color: b_color(active-text); background-color: b_color(active); } &:disabled { color: insensitive(w_color(text)); &:backdrop { color: backdrop(insensitive(w_color(text))); } } &:backdrop, &:backdrop:hover { color: backdrop(w_color(text)); background-color: backdrop(w_color(normal)); } // submenu indicators arrow { min-height: 16px; min-width: 16px; &:dir(ltr) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); margin-left: 10px; } &:dir(rtl) { -gtk-icon-source:-gtk-icontheme('pan-start-symbolic'); margin-right: 10px; } } } // overflow arrows > arrow { @include button(undecorated); min-height: 16px; min-width: 16px; padding: 4px; background-color: transparent; border-radius: 0; &.top { margin-top: -6px; border: none; -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); } &.bottom { margin-bottom: -6px; border: none; -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } &:hover { color: b_color(hover); } &:active { color: b_color(active)} &:backdrop { background-color: backdrop($menu_color); } &:disabled { color: transparent; background-color: transparent; border-color: transparent ; } } } menuitem { accelerator { color: gtkalpha(currentColor,0.55); } check, radio { min-height: 18px; min-width: 18px; &:dir(ltr) { margin-right: 6px; } &:dir(rtl) { margin-left: 6px; } } } /*************** * Popovers * ***************/ /* menu buttons */ modelbutton.flat, .menuitem.button.flat { min-height: 16px; padding: 4px 8px; @extend %undecorated_button; color: w_color(text); &:hover { background-color: b_color(active); color: b_color(active-text) } &:selected { background-color: b_color(active); color: b_color(active-text) } &:backdrop, &:backdrop:hover { @extend %undecorated_button; color: backdrop(w_color(text)); } check:hover {-gtk-icon-source: -gtk-scaled(url("../assets/check-unchecked.png"), url("../assets/check-unchecked@2.png"));} radio:hover {-gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked.png"), url("../assets/radio-unchecked@2.png"));} check:checked:hover {-gtk-icon-source: -gtk-scaled(url("../assets/check-checked-active.png"), url("../assets/check-checked-active@2.png"));} radio:checked:hover {-gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-active.png"), url("../assets/radio-checked-active@2.png"));} check:indeterminate:hover {-gtk-icon-source: -gtk-scaled(url("../assets/check-mixed.png"), url("../assets/check-mixed@2.png"));} radio:indeterminate:hover {-gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed.png"), url("../assets/radio-mixed@2.png"));} // FIXME: remove the following when the checks/radios rewrite lands check:last-child, radio:last-child { margin-right: 0px; } check:first-child, radio:first-child { margin-left: 0px; } } modelbutton.flat arrow { background: none; &:hover { background: none; } &.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } &.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } } popover.background { padding: 0px; border: 1px solid $border_color; border-radius: 3px; background-color: w_color(normal); box-shadow: 0 2px 3px transparentize(black, 0.1); &:backdrop { box-shadow: none; } > list, > .view, > toolbar { border-style: none; background-color: transparent; } .csd &, & { &.touch-selection, &.magnifier { @extend %osd; border: 1px solid $border_color; button { @extend %button }; } &.osd { @extend %osd; } } separator { margin: 3px; } list separator { margin: 0px; } checkbutton, radiobutton { @extend modelbutton.flat; } } // .scale-popup .button, // .scale-popup .button.flat { // +/- buttons on GtkVolumeButton popup // @extend %undecorated_button; // background-color: transparent; // padding: 5px; // color: w_color(text); // &:hover { // @extend %undecorated_button; // color: b_color(hover); // } // &:active { // color: b_color(active); // } // &:insensitive { // color: insensitive(w_color(text)); // } // &:backdrop { // color: backdrop(w_color(text)); // &:insensitive { // color: backdrop(insensitive(w_color(text))); // } // } // } GtkVolumeButton.button { padding: 5px; } diff --git a/src/gtk320/widgets/_misc.scss b/src/gtk320/widgets/_misc.scss index 9e6bd05..f743a2a 100644 --- a/src/gtk320/widgets/_misc.scss +++ b/src/gtk320/widgets/_misc.scss @@ -1,172 +1,174 @@ +@charset "UTF-8"; + /******** * Misc * ********/ /**************** * Print dialog * *****************/ printdialog { paper { color: w_color(text); border: 1px solid $border_color; background: white; padding: 0; &:backdrop { color: backdrop(w_color(text)); border-color: backdrop($border_color); background: backdrop(white); } } .dialog-action-box { margin: 12px; } } /********** * Frames * **********/ frame > border, .frame { box-shadow: none; margin: 0; padding: 0; border-radius: 0; border: 1px solid $border_color; &.flat { border-style: none; } &:backdrop { border-color: backdrop($border_color); } } actionbar > revealer > box { padding: 6px; border-top: 1px solid $border_color; &:backdrop { border-color: backdrop($border_color); } } scrolledwindow { viewport.frame { // avoid double borders when viewport inside scrolled window border-style: none; } junction { // the small square between two scrollbars border-color: transparent; background-color: transparent; background-image: none; } } //vbox and hbox separators separator { background: $border_color; min-width: 1px; min-height: 1px; } /************* * Expanders * *************/ expander { arrow { min-width: 16px; min-height: 16px; -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic');} &:hover { color: lighten(w_color(text),30%); } //only lightens the arrow &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } } } /********* * Paned * *********/ paned { > separator { min-width: 1px; min-height: 1px; -gtk-icon-source: none; // defeats the ugly default handle decoration border-style: none; // just to be sure background-color: transparent; // workaround, using background istead of a border since the border will get rendered twice (?) background-image: image($border_color); background-size: 1px 1px; //&:selected { background-image: image($selected_bg_color); } // FIXME is this needed? &:backdrop { background-image: image(backdrop($border_color)); } &.wide { min-width: 5px; min-height: 5px; background-color: w_color(normal); background-image: image($border_color), image($border_color); background-size: 1px 1px, 1px 1px; &:backdrop { background-color: backdrop(w_color(normal)); background-image: image(backdrop($border_color)), image(backdrop($border_color)); } } } &.horizontal > separator { background-repeat: repeat-y; &:dir(ltr) { margin: 0 -8px 0 0; padding: 0 8px 0 0; background-position: left; } &:dir(rtl) { margin: 0 0 0 -8px; padding: 0 0 0 8px; background-position: right; } &.wide { margin: 0; padding: 0; background-repeat: repeat-y, repeat-y; background-position: left, right; } } &.vertical > separator { margin: 0 0 -8px 0; padding: 0 0 8px 0; background-repeat: repeat-x; background-position: top; &.wide { margin: 0; padding: 0; background-repeat: repeat-x, repeat-x; background-position: bottom, top; } } } /********************* * Spinner Animation * *********************/ @keyframes spin { to { -gtk-icon-transform: rotate(1turn); } } spinner { background-image: none; opacity: 0; // non spinning spinner makes no sense -gtk-icon-source: -gtk-icontheme('process-working-symbolic'); &:checked { opacity: 1; animation: spin 1s linear infinite; &:disabled { opacity: 0.5; } } } diff --git a/src/gtk320/widgets/_notebook.scss b/src/gtk320/widgets/_notebook.scss index 57bef25..6e05409 100644 --- a/src/gtk320/widgets/_notebook.scss +++ b/src/gtk320/widgets/_notebook.scss @@ -1,216 +1,218 @@ +@charset "UTF-8"; + /***************** * Notebooks and * * Tabs * *****************/ /************* * Notebooks * *************/ notebook { &.frame { border: none; padding: 0px; box-shadow: inset 0px 0px 0px 1px $border_color; } > header { padding: 0px; border: none; background-color: w_color(normal); //box-shadow: inset 0 -1px $border_color; &.top { box-shadow: inset 0 -1px $border_color; // border &:backdrop { box-shadow: inset 0 -1px backdrop($border_color); } } &.bottom { box-shadow: inset 0 1px $border_color; &:backdrop { box-shadow: inset 0 1px backdrop($border_color); } } &.right { box-shadow: inset 1px 0 $border_color; &:backdrop { box-shadow: inset 1px 0 backdrop($border_color); } } &.left { box-shadow: inset -1px 0 $border_color; &:backdrop { box-shadow: inset -1px 0 backdrop($border_color); } } &:backdrop { background-color: backdrop(w_color(normal)); } tabs { margin: 0px; } @each $_tab, $_border, $_radius in (top,bottom,3px 3px 0px 0px), (bottom,top,0px 0px 3px 3px), (left,right, 3px 0px 0px 3px), (right,left, 0px 3px 3px 0px) { &.#{$_tab} { > tabs { > tab { padding: 4px 6px; border: 1px solid transparentize(w_color(text), 0.8); background-color: transparentize(w_color(text), 0.8); border-radius: #{$_radius}; border-#{$_border}-color: transparent; &:hover, &.prelight-page { background-color: transparentize(s_color(normal), 0.8); border-color: transparentize(s_color(normal), 0.8); } &:checked { border-color: $border_color; border-#{$_border}-color: $menu_color; background-color: $menu_color; &:backdrop { border-color: backdrop($border_color); border-#{$_border}-color: backdrop($menu_color); background-color: backdrop($menu_color); } } } } } } @each $_tab, $_border, $_shadow1 in (top, right, -3px 0px 0px 0px), (bottom, right, -3px 0px 0px 0px), (left, bottom, 0px -3px 0px 0px), (right, bottom, 0px -3px 0px 0px) { &.#{$_tab} { > tabs { > tab { &.reorderable-page { border-width: 3px; border-style: solid; border-color: transparent; background-color: w_color(normal); background-clip: padding-box; border-#{$_border}-width: 1px; border-#{$_border}-color: $border_color; box-shadow: inset #{$_shadow1} w_color(normal); &:hover, &.prelight-page { box-shadow: inset 0px -3px 0px 0px transparentize(s_color(normal),0.8), inset $_shadow1 w_color(normal); } &:checked { box-shadow: inset 0px -3px 0px 0px s_color(normal), inset $_shadow1 w_color(normal); &:backdrop { background-color: backdrop(w_color(normal)); border-color: transparent; border-#{$_border}-color: backdrop($border_color); box-shadow:none; } } &:backdrop { background-color: backdrop(w_color(normal)); border-#{$_border}-color: backdrop($border_color); box-shadow:none; } } } } } } &.top > tabs > arrow { @extend %notebook_vert_arrows; border-top-style: none; } &.bottom > tabs > arrow { @extend %notebook_vert_arrows; border-bottom-style: none; } @at-root %notebook_vert_arrows { margin-left: -5px; margin-right: -5px; padding-left: 4px; padding-right: 4px; &.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); } &.up { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); } } &.left > tabs > arrow { @extend %notebook_horz_arrows; border-left-style: none; } &.right > tabs > arrow { @extend %notebook_horz_arrows; border-right-style: none; } @at-root %notebook_horz_arrows { margin-top: -5px; margin-bottom: -5px; padding-top: 4px; padding-bottom: 4px; &.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); } &.up { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } } > tabs > arrow { @extend %button_basic; @extend %button_basic.flat; min-height: 16px; min-width: 16px; border-radius: 0; &:hover:not(:active):not(:backdrop) { background-clip: padding-box; background-image: none; background-color: transparentize(white, 0.7); border-color: transparent; box-shadow: none; } &:disabled { @include button(undecorated); } } // colors the button like the label, overridden otherwise button.flat { padding: 0; margin: 4px; // FIXME: generalize .small-button? min-width: 12px; min-height: 12px; border: 0px solid; border-radius: 50%; color: w_color(normal); background-color: $border_color; background-image: none; &:hover { background-color: $error_color; } &:active { background-color: $error_color;} &:backdrop { background-color: backdrop($border_color); color: backdrop(w_color(normal)); } } } > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks background-color: transparent; border-style: solid; border-color: $border_color; border-width: 0px; } } diff --git a/src/gtk320/widgets/_overshoot.scss b/src/gtk320/widgets/_overshoot.scss index db03d83..6307df1 100644 --- a/src/gtk320/widgets/_overshoot.scss +++ b/src/gtk320/widgets/_overshoot.scss @@ -1,114 +1,116 @@ +@charset "UTF-8"; + @mixin overshoot($p, $t:normal, $c:w_color(text)) { // // overshoot // // $p: position // $t: type // $c: base color // // possible $p values: // top, bottom, right, left // // possible $t values: // normal, backdrop // $_small_gradient_length: 5%; $_big_gradient_length: 100%; $_position: center top; $_small_gradient_size: 100% $_small_gradient_length; $_big_gradient_size: 100% $_big_gradient_length; @if $p==bottom { $_position: center bottom; $_linear_gradient_direction: to top; } @else if $p==right { $_position: right center; $_small_gradient_size: $_small_gradient_length 100%; $_big_gradient_size: $_big_gradient_length 100%; } @else if $p==left { $_position: left center; $_small_gradient_size: $_small_gradient_length 100%; $_big_gradient_size: $_big_gradient_length 100%; } $_small_gradient_color: $c; $_big_gradient_color: $c; @if $c==w_color(text) { $_small_gradient_color: darken($border_color, 10%); $_big_gradient_color: w_color(text); @if $t==backdrop { $_small_gradient_color: backdrop($border_color); } } $_small_gradient: -gtk-gradient(radial, $_position, 0, $_position, 0.5, to($_small_gradient_color), to(transparentize($_small_gradient_color, 1))); $_big_gradient: -gtk-gradient(radial, $_position, 0, $_position, 0.6, from(transparentize($_big_gradient_color, 0.93)), to(transparentize($_big_gradient_color, 1))); @if $t==normal { background-image: $_small_gradient, $_big_gradient; background-size: $_small_gradient_size, $_big_gradient_size; } @else if $t==backdrop { background-image: $_small_gradient; background-size: $_small_gradient_size; } background-repeat: no-repeat; background-position: $_position; background-color: transparent; // reset some properties to be sure to not inherit them somehow border: none; // box-shadow: none; // } scrolledwindow { // This is used when content is touch-dragged past boundaries. // draws a box on top of the content, the size changes programmatically. overshoot { &.top { @include overshoot(top); &:backdrop { @include overshoot(top, backdrop); } } &.bottom { @include overshoot(bottom); &:backdrop { @include overshoot(bottom, backdrop); } } &.left { @include overshoot(left); &:backdrop { @include overshoot(left, backdrop); } } &.right { @include overshoot(right); &:backdrop { @include overshoot(right, backdrop); } } } // Overflow indication, works similarly to the overshoot, the size if fixed tho. undershoot { background-image: none; border: none; } } \ No newline at end of file diff --git a/src/gtk320/widgets/_pathbar.scss b/src/gtk320/widgets/_pathbar.scss index 7c6dfd3..3b5a935 100644 --- a/src/gtk320/widgets/_pathbar.scss +++ b/src/gtk320/widgets/_pathbar.scss @@ -1,42 +1,44 @@ +@charset "UTF-8"; + /************ * Pathbars * ************/ .path-bar { background-color: w_color(normal); border-bottom: 1px solid $border_color; } .path-bar button { @include button(undecorated); padding: 4px 8px; color: w_color(text); &:hover {border-color: b_color(hover); } &:active, &:checked { background-color: $border_color; font-weight: normal; } &.text-button, &.image-button, & { padding-left: 4px; padding-right: 4px; } &.text-button.image-button label { padding-left: 0; padding-right: 0; } &.text-button.image-button, & { label:last-child { padding-right: 8px; } label:first-child { padding-left: 8px; } } image { padding-left: 4px; padding-right: 4px; } &.slider-button { padding-left: 0; padding-right: 0; } } diff --git a/src/gtk320/widgets/_progressbar.scss b/src/gtk320/widgets/_progressbar.scss index 9a3bd5e..6dac6ff 100644 --- a/src/gtk320/widgets/_progressbar.scss +++ b/src/gtk320/widgets/_progressbar.scss @@ -1,139 +1,141 @@ +@charset "UTF-8"; + /***************** * Progress bars * *****************/ progressbar { // sizing &.horizontal { trough, progress { min-height: 6px; } } &.vertical { trough, progress { min-width: 6px; } } // FIXME: insensitive state missing and some other state should be set probably font-size: smaller; color: transparentize(b_color(text), 0.7); trough { border: 0px solid transparent; border-radius: $r; background-color: transparentize(b_color(text),0.7); } &:backdrop trough { background-color: backdrop(transparentize(b_color(text),0.7)); } // looks like states are not passed to the trough component here progress { background-color: s_color(normal); border: 0px solid transparent; border-radius: 3px; box-shadow: none; //needed for clipping } &:backdrop progress { background-color: backdrop(s_color(normal)); } // states not passed here as well &.osd { // progressbar.osd used for epiphany page loading progress background-color: transparent; } } treeview.view { &.progressbar { border: 0px solid transparent; border-radius: $r; background-color: s_color(normal); color: s_color(text); background-image: none; &:selected { &:focus, & { background-color: transparentize(s_color(text),0.75); } } } &.trough { background-color: $trough_color; &:selected { &:focus, & { background-color: transparentize(s_color(text),0.7); } } } } /************* * Level Bar * *************/ levelbar { block { min-width: 32px; min-height: 6px; } &.vertical block { min-width: 6px; min-height: 32px; } trough { border: 1px solid; padding: 2px; border-radius: 3px; @include entry(normal); &:backdrop { @include entry(backdrop); } } &.horizontal.discrete block { margin: 0 1px; } &.vertical.discrete block { margin: 1px 0; } block:not(.empty) { border: 1px solid s_color(normal); background-color: s_color(normal); box-shadow: none; border-radius: 1px; &:backdrop { border-color: backdrop(s_color(normal)); background-color: backdrop(s_color(normal)); } } block { &.low { border-color: $warning_color; background-color: $warning_color; &:backdrop { background-color: backdrop($warning_color); border-color: backdrop($warning_color); } } &.high { border-color: $success_color; background-color: $success_color; &:backdrop { background-color: backdrop($success_color); border-color: backdrop($success_color); } } &.full { border-color: $success_color; background-color: $success_color; &:backdrop { background-color: backdrop($success_color); border-color: backdrop($success_color); } } &.empty { background-color: transparentize(b_color(text),0.7); border-color: transparent; box-shadow: none; &:backdrop { background-color: backdrop(transparentize(b_color(text),0.7)); } } } } diff --git a/src/gtk320/widgets/_scale.scss b/src/gtk320/widgets/_scale.scss index 61628ae..e2ae50d 100644 --- a/src/gtk320/widgets/_scale.scss +++ b/src/gtk320/widgets/_scale.scss @@ -1,92 +1,94 @@ +@charset "UTF-8"; + /************ * GtkScale * ************/ scale { &.fine-tune { &.trough { margin: 8px; border-radius: $r; } } slider { min-width: 18px; min-height: 18px; background-color: b_color(normal); border: 1px solid $border_color; border-radius: 50%; box-shadow: none; margin: -9px; &:hover { border-style: solid; border-width: 2px; border-color: b_color(hover); border-radius: 50%; // needed for double marks scales &:backdrop { background-color: backdrop(b_color(normal)); border-color: backdrop(b_color(hover)); } } &:disabled { border-style: solid; // needed for double marks scales or they'll get border-radius: 50%; // overridden background-color: alpha2solid(insensitive(b_color(normal)),w_color(normal)); border-color: insensitive($border_color); &:backdrop { background-color: alpha2solid(backdrop(insensitive(b_color(normal))),w_color(normal)); border-color: backdrop(insensitive($border_color)); } } &:active { border: 2px solid b_color(active); &:backdrop { background-color: backdrop(b_color(normal)); border-color: backdrop(b_color(active)); } } &:backdrop { background-color: backdrop(b_color(normal)); border-color: backdrop($border_color); } } trough { min-width: 6px; min-height: 6px; margin: 9px; border: 0px solid; border-radius: $r; background-color: $trough_color; box-shadow: none; &:disabled, &.vertical:disabled { border-color: insensitive($trough_color); background-color: insensitive($trough_color); box-shadow: none; &:backdrop { background-color: backdrop(insensitive($trough_color)); border-color: backdrop(insensitive($trough_color)); } } &:backdrop { background-color: backdrop($trough_color); border-color: backdrop($trough_color); } } highlight { border: 0px solid; border-radius: 3px; background-color: s_color(normal); border-color: s_color(normal); &.vertical { background-color: s_color(normal); border-color: s_color(normal); } &:disabled { background-color: insensitive(s_color(normal));} &:backdrop { background-color: backdrop(s_color(backdrop)); border-color: backdrop(s_color(backdrop)); &:disabled {background-color: backdrop(insensitive(s_color(normal)));} } } } diff --git a/src/gtk320/widgets/_scrollbar.scss b/src/gtk320/widgets/_scrollbar.scss index da26c1a..bc40435 100644 --- a/src/gtk320/widgets/_scrollbar.scss +++ b/src/gtk320/widgets/_scrollbar.scss @@ -1,111 +1,113 @@ +@charset "UTF-8"; + /************** * Scrollbars * **************/ scrollbar { -GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-forward-stepper: false; background-color: w_color(normal); border-width: 0px 0px; border-color: w_color(normal); margin: 0px; button { min-width: 14px; min-height: 14px; margin: 0px; padding: 0px 0px; border: none; border-radius: 0px; background-image: none; background-color: transparent; color: transparent; box-shadow: none; &:hover { border: none; background-image: none; background-color: w_color(normal); color: transparent; } &:active, &:active:hover { border: none; background-image: none; background-color: w_color(normal); color: transparent; } &:disabled { border: none; background-color: w_color(normal); background-image: none; color: transparent; } &:backdrop { @extend %undecorated_button; color: backdrop(b_color(text)); &:disabled {color: backdrop(insensitive(b_color(text)));} @extend %undecorated_button; } } // Overlay Scrollbars &.dragging, // if this isn't set, the scrollbars don't update their size correctly &.hovering { opacity: 0.9910; } // probably a gtk bug &.overlay-indicator:not(.dragging):not(.hovering) { opacity: 0.999; } // &.overlay-indicator:not(.dragging):not(.hovering) { -GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-forward-stepper: false; slider { min-width: 6px; border-radius: 8px; background-color: transparentize($scrollbar_color, 0.2); &:backdrop { background-color: backdrop($scrollbar_color); } } &.horizontal slider { min-height: 6px;} } &.overlay-indicator { background: none; } trough { //margin: 0px; transition-duration: 0.1s; min-width: 6px; min-height: 14px; border: 0px solid w_color(normal); border-radius: 8px; background-color: transparent; } &:hover { trough { background-color: backdrop($trough_color); box-shadow: inset 0px 0px 0px 5px w_color(normal); } } slider { //margin: 0px; transition-duration: 0.1s; min-width: 6px; min-height: 30px; border: 5px solid transparent; border-radius: 8px; background-clip: padding-box; background-color: $scrollbar_color; &:hover { background-color: b_color(hover); } &:backdrop { background-color: backdrop($scrollbar_color); } &:backdrop:disabled { background-color: backdrop(insensitive($scrollbar_color)); } } &.horizontal slider { min-width: 30px; min-height: 6px; } } diff --git a/src/gtk320/widgets/_sidebar.scss b/src/gtk320/widgets/_sidebar.scss index d8801a9..916e573 100644 --- a/src/gtk320/widgets/_sidebar.scss +++ b/src/gtk320/widgets/_sidebar.scss @@ -1,122 +1,124 @@ +@charset "UTF-8"; + /*********** * Sidebar * ***********/ .sidebar { border: none; background-color: w_color(normal); &:selected { @extend %selected_items; } &:backdrop { background-color: backdrop(w_color(normal))} } // Places sidebar is a special case, since the view here have to look like chrome not content, so we override text color placessidebar { > viewport.frame { border-style: none; } row { // Needs overriding of the GtkListBoxRow padding min-height: 36px; padding: 0px; // Using margins/padding directly in the SidebarRow // will make the animation of the new bookmark row jump > revealer { padding: 0 14px; } &:selected { color: s_color(text); } &:disabled { color: insensitive(w_color(text)); } &:backdrop { color: backdrop(w_color(text)); &:selected { color: backdrop(s_color(normal)); } &:disabled { color: backdrop(insensitive(w_color(text))); } } image.sidebar-icon { &:dir(ltr) { padding-right: 8px; } &:dir(rtl) { padding-left: 8px; } } label.sidebar-label { &:dir(ltr) { padding-right: 2px; } &:dir(rtl) { padding-left: 2px; } } @at-root button.sidebar-button { @extend %button_basic.flat; @extend %undecorated_button; min-height: 26px; min-width: 26px; margin-top: 3px; margin-bottom: 3px; padding: 0; } // in the sidebar case it makes no sense to click the selected row &:selected:active { box-shadow: none; } &.sidebar-placeholder-row { padding: 0 8px; min-height: 2px; background-image: none; background-clip: content-box; } &.sidebar-new-bookmark-row { color: s_color(normal); } // &:drop(active):not(:disabled) { // color: $drop_target_color; // box-shadow: inset 0 1px $drop_target_color, // inset 0 -1px $drop_target_color; // // &:selected { // color: $selected_fg_color; // background-color: $drop_target_color; // } // } } } placesview { .server-list-button > image { transition: 200ms $ease-out-quad; -gtk-icon-transform: rotate(0turn); } .server-list-button:checked > image { transition: 200ms $ease-out-quad; -gtk-icon-transform: rotate(-0.5turn); } row.activatable:hover { background-color: transparent; } // this selects the "connect to server" label > actionbar > revealer > box > label { padding-left: 8px; padding-right: 8px; } } stacksidebar { &.sidebar { row { padding: 10px 4px; > label { padding-left: 6px; padding-right: 6px; } &.needs-attention > .label { @extend %needs_attention; background-size: 6px 6px, 0 0; } } } } diff --git a/src/gtk320/widgets/_spinbutton.scss b/src/gtk320/widgets/_spinbutton.scss index 2196662..08cce5d 100644 --- a/src/gtk320/widgets/_spinbutton.scss +++ b/src/gtk320/widgets/_spinbutton.scss @@ -1,157 +1,159 @@ +@charset "UTF-8"; + /***************** * GtkSpinButton * *****************/ spinbutton { &:not(.vertical) { // in this horizontal configuration, the whole spinbutton // behaves as the entry, so we extend the entry styling // and nuke the style on the internal entry @extend %entry; padding: 0; entry { min-width: 28px; // reset all the other props since the spinbutton node is styled here margin: 0; background: none; background-color: transparent; border: none; border-radius: 0; box-shadow: none; &:backdrop:disabled { background-color: transparent; } } button { min-height: 16px; margin: 0; padding-bottom: 0; padding-top: 0; color: v_color(text); background-image: none; background-color: transparent; border-style: none; box-shadow: none; &:hover { color: v_color(hover); } &:disabled { color: insensitive(v_color(text)); } &:active { color: v_color(active); box-shadow: none; } &:backdrop { color: backdrop(v_color(text)); background-color: transparent; } &:backdrop:disabled { color: backdrop(insensitive(v_color(text))); background-color: transparent; border-style: none; // It is needed or it gets overridden } &:dir(ltr):last-child { border-radius: 0 3px 3px 0; } &:dir(rtl):first-child { border-radius: 3px 0 0 3px; } } } // Vertical &.vertical { // in the vertical configuration, we treat the spinbutton // as a box, and tweak the style of the entry in the middle // so that it's linked // FIXME: this should not be set at all, but otherwise it gets the wrong // color &:disabled { color: insensitive(v_color(text)); } &:backdrop:disabled { color: backdrop(insensitive(v_color(text))); } &:drop(active) { border-color: transparent; box-shadow: none; } entry { margin: 0px; min-height: 26px; min-width: 26px; border-style: none solid none solid; border-color: $border_color; padding: 0; border-radius: 0; &:disabled { color: insensitive(v_color(text)); background-color: insensitive(v_color(normal)); border-color: insensitive($border_color); } &:backdrop:disabled { color: backdrop(insensitive(v_color(text))); background-color: backdrop(insensitive(v_color(normal))); border-color: backdrop(insensitive($border_color)); } } button { min-height: 26px; min-width: 26px; padding: 0; box-shadow: none; background-image: none; background-color: v_color(normal); color: v_color(text); border-color: $border_color; &:hover { color: v_color(hover);} &:active { color: v_color(active);} &:disabled { color: insensitive(v_color(text)); background-color: insensitive(v_color(normal)); border-color: insensitive($border_color); } &:backdrop:disabled { color: backdrop(insensitive(v_color(text))); background-color: backdrop(insensitive(v_color(normal))); border-color: backdrop(insensitive($border_color)); } &.up { @extend %top_button; } &.down { @extend %bottom_button; } } %top_button { border-radius: 3px 3px 0 0; border-style: solid solid none solid; } %bottom_button { border-radius: 0 0 3px 3px; border-style: none solid solid solid; } } // Misc treeview &:not(.vertical) { min-height: 0; border-style: none; border-radius: 0; entry { min-height: 0; padding: 1px 2px; } } } diff --git a/src/gtk320/widgets/_switch.scss b/src/gtk320/widgets/_switch.scss index 16ae11b..82432c8 100644 --- a/src/gtk320/widgets/_switch.scss +++ b/src/gtk320/widgets/_switch.scss @@ -1,52 +1,54 @@ +@charset "UTF-8"; + /********** * Switch * **********/ switch { margin: 2px; font-weight: bold; font-size: smaller; min-width: 48px; min-height: 24px; border: 0px solid; border-radius: 12px; color: transparent; background-color: transparentize(b_color(text),0.7); text-shadow: none; &:checked { background-color: s_color(normal); } &:backdrop { background-color: backdrop(transparentize(b_color(text),0.7)); text-shadow: none; &:checked { background-color: backdrop(s_color(normal)); } } slider { min-width: 22px; min-height: 22px; border: 1px solid; border-radius: 11px; background-color: w_color(normal); border-color: $border_color; } &:hover slider { border-color: b_color(hover); } &:disabled slider { background-color:insensitive(w_color(normal)); } &:backdrop { slider { background-color: backdrop(w_color(normal)); } &:disabled slider { background-color: backdrop(insensitive(w_color(normal))); } } } diff --git a/src/gtk320/widgets/_toolbar.scss b/src/gtk320/widgets/_toolbar.scss index 7e53a89..0f85c4e 100644 --- a/src/gtk320/widgets/_toolbar.scss +++ b/src/gtk320/widgets/_toolbar.scss @@ -1,70 +1,72 @@ +@charset "UTF-8"; + /************ * Toolbars * ************/ %toolbar { -GtkWidget-window-dragging: true; padding: 4px; background-color: w_color(normal); } toolbar { @extend %toolbar; padding: 4px 3px 3px 4px; &:backdrop { background-color: backdrop(w_color(normal)); box-shadow: none; } button { margin: 2px; padding: 3px; &.image-button, &.text-button.image-button { padding: 3px; } } separator { margin-left: 3px; margin-right: 3px; } entry { margin: 3px; } // on OSD .osd & { background-color: transparent; } &.osd { padding: 13px; border: none; border-radius: $r; background-color: w_color(normal); &:backdrop { border-color: backdrop($border_color); background-color: backdrop(w_color(normal)); box-shadow: none; } &.left, &.right, &.top, &.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars } } //searchbar, location-bar & inline-toolbar .inline-toolbar { @extend %toolbar; @extend %inset-bar; border-width: 0px 0px 1px 0px; padding: 3px; border-radius: 0; } searchbar, .location-bar { @extend %toolbar; @extend %inset-bar; border-width: 0px 0px 1px 0px; padding: 3px; } %inset-bar { border-style: solid; border-color: $border_color; text-shadow: none; background-color: w_color(normal); } diff --git a/src/gtk320/widgets/_tooltips.scss b/src/gtk320/widgets/_tooltips.scss index b8d9e7c..5ed112c 100644 --- a/src/gtk320/widgets/_tooltips.scss +++ b/src/gtk320/widgets/_tooltips.scss @@ -1,30 +1,32 @@ +@charset "UTF-8"; + /************ * Tooltips * ************/ tooltip { &.background { // background-color needs to be set this way otherwise it gets drawn twice // see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details. background-color: tooltip(background); background-clip: padding-box; } color: tooltip(text); padding: 4px; /* not working */ border-radius: $r; box-shadow: none; // otherwise it gets inherited by windowframe.csd text-shadow: none; border: 1px solid tooltip(border); &.window-frame.csd { background-color: transparent; box-shadow: none; } decoration { background-color: transparent; } } tooltip * { //Yeah this is ugly padding: 0px; background-color: transparent; color: tooltip(text); // just to be sure } diff --git a/src/gtk320/widgets/_treeview.scss b/src/gtk320/widgets/_treeview.scss index 17bc88a..2357e51 100644 --- a/src/gtk320/widgets/_treeview.scss +++ b/src/gtk320/widgets/_treeview.scss @@ -1,138 +1,140 @@ +@charset "UTF-8"; + /************** * Tree Views * **************/ treeview.view { -GtkTreeView-grid-line-width: 0; -GtkTreeView-grid-line-pattern: ''; -GtkTreeView-tree-line-width: 1; -GtkTreeView-tree-line-pattern: ''; -GtkTreeView-expander-size: 16; border-left-color: $border_color; // this is actually the tree lines color, border-top-color: transparent; // while this is the grid lines color, better then nothing rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props &:selected { border-radius: 0; } // rest border radius in lists &:selected { background-color: s_color(normal); border-left-color: s_color(text); border-top-color: s_color(text); // doesn't work unfortunatelly } &:backdrop:selected { background-color: backdrop(s_color(backdrop)); border-left-color: backdrop(s_color(text)); border-top-color: backdrop(s_color(text)); } &:disabled { color: insensitive($border_color); &:selected { color: insensitive(s_color(text)); &:backdrop { color: backdrop(insensitive(s_color(text))); } } &:backdrop { color: backdrop(insensitive($border_color)); } } &.separator { min-height: 2px; color: $border_color; } &.separator:backdrop { color: backdrop($border_color); } &:backdrop { border-left-color: backdrop($border_color); } &:drop(active) { border-style: solid none; border-width: 1px; border-color: b_color(hover); } &.expander { // GtkTreeView uses the larger of the expander’s min-width and min-height min-width: 16px; min-height: 16px; -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); color: v_color(text); &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }; &:hover { color: b_color(hover); } &:selected { color: s_color(text); } &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); &:selected { color: s_color(text); } &:backdrop { color: backdrop(v_color(normal)); } } &:backdrop { color: backdrop(v_color(normal)); } } header { button { @extend %column_header_button; color: b_color(text); background-color: b_color(normal); text-shadow: none; box-shadow: none; &:hover { @extend %column_header_button; color: b_color(text); background-color: transparentize(b_color(hover), 0.5); box-shadow: none; transition: none; //I shouldn't need this } &:active { @extend %column_header_button; color: b_color(text); background-color: transparentize(b_color(hover), 0.5); transition: none; //I shouldn't need this } } button:last-child { &:backdrop, & { border-right-style: none; }} } button.dnd, header.button.dnd { // for treeview-like derive widgets &:active, &:selected, &:hover, & { padding: 0 6px; color: s_color(text); background-image: none; background-color: s_color(normal); border-style: none; border-radius: 0; box-shadow: none; text-shadow: none; transition: none; } } } %column_header_button { padding: 6px; border-style: none solid solid none; border-radius: 0; background-image: none; border-color: $border_color; text-shadow: none; &:disabled { border-color: insensitive($border_color); color: insensitive(b_color(text)); background-color: insensitive(b_color(normal)); background-image: none; } &:backdrop { border-color: backdrop($border_color); border-style: none solid solid none; color: backdrop(b_color(text)); background-image: none; background-color: backdrop(b_color(normal)); &:disabled { border-color: backdrop(insensitive($border_color)); background-image: none; background-color: backdrop(insensitive(b_color(normal))); color: backdrop(insensitive(b_color(text))); } } } diff --git a/src/gtk320/widgets/_window_decorations.scss b/src/gtk320/widgets/_window_decorations.scss index 23b41c4..6fa3591 100644 --- a/src/gtk320/widgets/_window_decorations.scss +++ b/src/gtk320/widgets/_window_decorations.scss @@ -1,178 +1,180 @@ +@charset "UTF-8"; + /********************** * Window Decorations * *********************/ decoration { //border: 1px solid transparent; border-radius: $r $r 0 0; border-width: 0px; box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.5); /* this is used for the resize cursor area */ margin: 10px; .maximized &, .fullscreen &, .tiled & { border-radius: 0; } .popup & { border-radius: $r; box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1) } // server-side decorations as used by mutter .ssd &{ box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.1); } .csd & { border-radius: $r; &.popup { box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1) } &.tooltip { box-shadow: none; } &.message-dialog { box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.5) } } .solid-csd & { border-radius: 0; margin: 0; padding: 1px; border: none; background-color: t_color(background-light); box-shadow: none; } } headerbar, .titlebar { &.default-decoration button.titlebutton { padding: 1px; min-height: 18px; min-width: 18px; margin: 0; } button.titlebutton { padding: 1px; &:hover, &:active, &:checked, &:backdrop, &:active:hover { transition: none; } &.close { padding: 1px; color: transparent; border-image: none; box-shadow: none; background-position: center; background-repeat: no-repeat; background-image: -gtk-scaled(url('../assets/titlebutton-close.png'),url('../assets/titlebutton-close@2.png')); } &.close:hover { border-color: transparent; background-color: transparent; background-image: -gtk-scaled(url('../assets/titlebutton-close-hover.png'),url('../assets/titlebutton-close-hover@2.png')); } &.close:active { border-color: transparent; background-color: transparent; background-image: -gtk-scaled(url('../assets/titlebutton-close-active.png'),url('../assets/titlebutton-close-active@2.png')); } &.close:backdrop { border-color: transparent; background-color: transparent; background-image: -gtk-scaled(url('../assets/titlebutton-close-backdrop.png'),url('../assets/titlebutton-close-backdrop@2.png')); } &.maximize { padding: 1px; color: transparent; border-image: none; box-shadow: none; background-position: center; background-repeat: no-repeat; background-image: -gtk-scaled(url('../assets/titlebutton-maximize.png'),url('../assets/titlebutton-maximize@2.png')); } &.maximize:hover { border-color: transparent; background-color: transparent; background-image: -gtk-scaled(url('../assets/titlebutton-maximize-hover.png'),url('../assets/titlebutton-maximize-hover@2.png')); } &.maximize:active { border-color: transparent; background-color: transparent; background-image: -gtk-scaled(url('../assets/titlebutton-maximize-active.png'),url('../assets/titlebutton-maximize-active@2.png')); } &.maximize:backdrop { border-color: transparent; background-color: transparent; background-image: -gtk-scaled(url('../assets/titlebutton-maximize-backdrop.png'),url('../assets/titlebutton-maximize-backdrop@2.png')); } &.minimize { padding: 1px; color: transparent; border-image: none; box-shadow: none; background-position: center; background-repeat: no-repeat; background-image: -gtk-scaled(url('../assets/titlebutton-minimize.png'),url('../assets/titlebutton-minimize@2.png')); } &.minimize:hover { border-color: transparent; background-color: transparent; background-image: -gtk-scaled(url('../assets/titlebutton-minimize-hover.png'),url('../assets/titlebutton-minimize-hover@2.png')); } &.minimize:active { border-color: transparent; background-color: transparent; background-image: -gtk-scaled(url('../assets/titlebutton-minimize-active.png'),url('../assets/titlebutton-minimize-active@2.png')); } &.minimize:backdrop { border-color: transparent; background-color: transparent; background-image: -gtk-scaled(url('../assets/titlebutton-minimize-backdrop.png'),url('../assets/titlebutton-minimize-backdrop@2.png')); } } .maximized & { button.titlebutton { &.maximize { padding: 1px; color: transparent; border-image: none; box-shadow: none; background-position: center; background-repeat: no-repeat; background-image: -gtk-scaled(url('../assets/titlebutton-maximize-maximized.png'),url('../assets/titlebutton-maximize-maximized@2.png')); } &.maximize:hover { border-color: transparent; background-color: transparent; background-image: -gtk-scaled(url('../assets/titlebutton-maximize-maximized-hover.png'),url('../assets/titlebutton-maximize-maximized-hover@2.png')); } &.maximize:active { border-color: transparent; background-color: transparent; background-image: -gtk-scaled(url('../assets/titlebutton-maximize-maximized-active.png'),url('../assets/titlebutton-maximize-maximized-active@2.png')); } &.maximize:backdrop { border-color: transparent; background-color: transparent; background-image: -gtk-scaled(url('../assets/titlebutton-maximize-maximized-backdrop.png'),url('../assets/titlebutton-maximize-maximized-backdrop@2.png')); } } } } headerbar.selection-mode button.titlebutton, .titlebar.selection-mode button.titlebutton { text-shadow: none; &:backdrop { -gtk-icon-shadow: none; } }