diff options
Diffstat (limited to 'Redcore-daylight/gtk-3.20/scss/widgets')
21 files changed, 4105 insertions, 0 deletions
diff --git a/Redcore-daylight/gtk-3.20/scss/widgets/_actionbar.scss b/Redcore-daylight/gtk-3.20/scss/widgets/_actionbar.scss new file mode 100644 index 0000000..3c6aa02 --- /dev/null +++ b/Redcore-daylight/gtk-3.20/scss/widgets/_actionbar.scss @@ -0,0 +1,99 @@ +@import "button"; +@import "toolbar"; + +/************** + ! Action-bar * +***************/ + +@include exports("actionbar") { + actionbar > revealer > box { + padding: $spacing; + border-top: 1px solid $borders_color; + + &:backdrop { border-color: $backdrop_borders_color; } + } +} + + +/**************************** + ! Search and Location bars * +*****************************/ + +@include exports("searchbar") { + searchbar, + .location-bar { + @include linear-gradient(shade($bg_color, .98)); + + border-width: 0 0 1px; + border-style: solid; + border-color: border_normal($bg_color); + color: $fg_color; + } +} + + +/****************** + ! Action buttons * +*******************/ + +@include exports("actionbuttons") { + $types: ( + suggested: $success_color, + destructive: $error-color + ); + + @each $type, $color in $types { + .#{$type}-action { + @include button($color, $selected_fg_color); + } + } +} + + +/****************** + ! Selection mode * +*******************/ + +@include exports("selectionmode") { + headerbar, + .titlebar:not(headerbar) { + &.selection-mode { + @include toolbar($selected_bg_color, $selected_fg_color); + + button { + @include button($selected_bg_color, $selected_fg_color); + + &.suggested-action { @extend .suggested-action; } + } + + &:backdrop { + background-color: $backdrop_selected_bg_color; + background-image: none; + } + + .selection-menu { + &:backdrop, & { + color: shade($selected_bg_color, $contrast); + background-color: transparent; + background-image: none; + box-shadow: none; + border: 0; + + &:hover { color: shade($selected_bg_color, ($contrast - .1)); } + + &:active { color: shade($selected_bg_color, ($contrast - .05)); } + + .arrow { + -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); + color: transparentize($selected_fg_color, .5); + -gtk-icon-shadow: none; + } + } + } + + .dim-label { + &, .selection-menu & { color: shade($selected_bg_color, ($contrast - .1)); } + } + } + } +} diff --git a/Redcore-daylight/gtk-3.20/scss/widgets/_base.scss b/Redcore-daylight/gtk-3.20/scss/widgets/_base.scss new file mode 100644 index 0000000..52a78e2 --- /dev/null +++ b/Redcore-daylight/gtk-3.20/scss/widgets/_base.scss @@ -0,0 +1,133 @@ +/************** + ! GTK settings +***************/ + +* { + -GtkWindow-resize-grip-height: 0; + -GtkWindow-resize-grip-width: 0; + -WnckTasklist-fade-overlay-rect: 0; + + -GtkWidget-cursor-aspect-ratio: $caret_aspect_ratio; + + outline-color: alpha($selected_bg_color, .5); + outline-style: dashed; + outline-width: 1px; + outline-offset: -1px; + -gtk-outline-radius: $roundness; +} + + +/************* + ! Base states + *************/ + +%selected { + &, &:focus { + background-color: $selected_bg_color; + color: $selected_fg_color; + } +} + +* { + /* hyperlinks */ + -GtkIMHtml-hyperlink-color: $link_color; + + &:selected { @extend %selected; } + + &:disabled, + &:disabled:disabled { color: mix($fg_color, $bg_color, .5); } + + &:disabled, &:disabled { -gtk-icon-effect: dim; } + + &:hover { -gtk-icon-effect: highlight; } + + &:link, &:visited { color: $link_color; } +} + +.background { + background-color: $bg_color; + color: $fg_color; + + &:backdrop { + text-shadow: none; + -gtk-icon-shadow: none; + } + + &.csd { background-color: $bg_color; } +} + +.gtkstyle-fallback { + background-color: alpha($bg_color, .5); + color: $fg_color; + + &:hover { + background-color: shade($bg_color, 1.1); + color: $fg_color; + } + + &:active { + background-color: shade($bg_color, .9); + color: $fg_color; + } + + &:disabled { + background-color: shade(shade($bg_color, .95), 1.05); + color: mix($fg_color, $bg_color, .5); + } + + &:selected { @extend %selected; } +} + +image, label, box, grid { + &, &:disabled { background-color: transparent; } +} + +label { + &.separator { + @extend .dim-label; + + color: $fg_color; + + &:backdrop { color: $backdrop_fg_color; } + } + + row:selected &, + &:selected { @extend %nobg_selected_items; } + + selection { + background-color: $selected_bg_color; + color: $selected_fg_color; + } + + &:disabled { + color: $insensitive_fg_color; + + selection { @extend %selected_items:disabled; } + + &:backdrop { color: $backdrop_insensitive_color; } + } + + &:backdrop { + color: $backdrop_fg_color; + + selection { @extend %selected_items:backdrop; } + } +} + +assistant { + .sidebar { + background-color: $base_color; + border-top: 1px solid $borders_color; + + &:backdrop { + background-color: $backdrop_base_color; + border-color: $backdrop_borders_color; + } + } + + &.csd .sidebar { border-top-style: none; } + + .sidebar label { padding: $spacing ($spacing * 2); } + + .sidebar label.highlight { background-color: mix($fg_color, $bg_color, .8); } +} diff --git a/Redcore-daylight/gtk-3.20/scss/widgets/_button.scss b/Redcore-daylight/gtk-3.20/scss/widgets/_button.scss new file mode 100644 index 0000000..263c037 --- /dev/null +++ b/Redcore-daylight/gtk-3.20/scss/widgets/_button.scss @@ -0,0 +1,566 @@ +/********* + ! Buttons +**********/ + +@include exports("button_extends") { + // stuff for .needs-attention + $_dot_color: if($variant == 'light', $selected_bg_color, lighten($selected_bg_color, .15)); + + @keyframes needs_attention { + from { + background-image: -gtk-gradient(radial, center center, 0, center center, .01, to($_dot_color), to(transparent)); + } + + to { + background-image: -gtk-gradient(radial, center center, 0, center center, .5, to($selected_bg_color), to(transparent)); + } + } + + %needs_attention { + animation: needs_attention 150ms ease-in; + $_dot_shadow: _text_shadow_color(); + $_dot_shadow_r: if($variant == 'light', .5, .45); + background-image: -gtk-gradient(radial, center center, 0, center center, .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; + + @if $variant == 'light' { + background-position: right 3px, right 4px; + } @else { + background-position: right 3px, right 2px; + } + + &:backdrop { background-size: 6px 6px, 0 0; } + + &:dir(rtl) { + @if $variant == 'light' { + background-position: left 3px, left 4px; + } @else { + background-position: left 3px, left 2px; + } + } + } + + %button { + min-height: 14px + $spacing * 2; + min-width: 14px + $spacing * 2; + padding: $spacing ($spacing + 2px); + border-width: 1px; + border-style: solid; + border-radius: $roundness; + transition: 150ms ease; + outline-color: transparent; + } + + %undecorated_button { + border-color: transparent; + background-color: transparent; + background-image: none; + box-shadow: none; + } + + %linked_middle { + border-radius: 0; + border-left-style: none; + border-right-style: solid; + + &:dir(rtl) { + border-radius: 0; // needed when including %linked_middle:dir(rtl) + border-right-style: none; + border-left-style: solid; + } + } + + %linked_vertical_middle { + border-radius: 0; + border-top-style: none; + border-bottom-style: solid; + + &:dir(rtl) { + border-radius: 0; // needed when including %linked_vertical_middle:dir(rtl) + border-top-style: none; + border-bottom-style: solid; + } + } + + %linked_button { + border-width: 1px; + border-style: solid; + border-radius: 0; + border-right-style: none; + border-left-style: none; + + &:first-child { + border-width: 1px; + border-radius: $roundness; + border-left-style: solid; + border-right-style: none; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + + &:dir(rtl) { + border-left-style: none; + border-right-style: solid; + } + } + + &:last-child { + border-width: 1px; + border-radius: $roundness; + border-left-style: none; + border-right-style: solid; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + + &:dir(rtl) { + border-left-style: solid; + border-right-style: none; + } + } + + &:only-child, &:first-child:only-child { + border-width: 1px; + border-style: solid; + } + + &:only-child { + border-radius: $roundness; + } + } + + %linked_vertical_button { + border-width: 1px; + border-style: solid; + border-radius: 0; + border-top-style: none; + border-bottom-style: none; + + &:first-child { + border-width: 1px; + border-radius: $roundness; + border-top-style: solid; + border-bottom-style: none; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + + &:dir(rtl) { + border-top-style: none; + border-bottom-style: solid; + } + } + + &:last-child { + border-width: 1px; + border-radius: $roundness; + border-top-style: none; + border-bottom-style: solid; + border-top-left-radius: 0; + border-top-right-radius: 0; + + &:dir(rtl) { + border-top-style: solid; + border-bottom-style: none; + } + } + + &:only-child, &:first-child:only-child { + border-width: 1px; + border-style: solid; + } + + &:only-child { + border-radius: $roundness; + } + } +} + +@mixin linked_button($bg) { + $border_strength: if(lightness($bg) > 50, 0, .1); + $shadow_strength: if(lightness($bg) > 50, 0, .1); + + @extend %linked_button; + + box-shadow: inset -1px 0 border_normal(rgba(0, 0, 0, .12 + $border_strength)), + 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength); + + &:focus, &:hover { + box-shadow: inset -1px 0 border_focus(rgba(0, 0, 0, .12 + $border_strength)), + 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength); + } + + &:active, &:active:hover, + &:active:focus, &:active:hover:focus, + &:checked, &:checked:hover, + &:checked:focus, &:checked:hover:focus { + box-shadow: inset -1px 0 border_active(rgba(0, 0, 0, .12 + $border_strength)), + inset 0 1px alpha($dark_shadow, .07), + inset 0 -1px alpha($dark_shadow, .05); + } + + &:disabled { box-shadow: inset -1px 0 shade($bg, .8); } + + &:last-child, &:only-child { box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength); } + + &:last-child:hover, &:only-child:hover { box-shadow: 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength); } + + &:disabled:last-child, &:disabled:only-child, + &:active:disabled:last-child, &:active:disabled:only-child, + &:checked:disabled:last-child, &:checked:disabled:only-child { box-shadow: none; } + + &:active:last-child, &:active:last-child:focus, &:active:last-child:hover, &:active:last-child:hover:focus, + &:checked:last-child, &:checked:last-child:focus, &:checked:last-child:hover, &:checked:last-child:hover:focus { + box-shadow: inset 0 1px alpha($dark_shadow, .07), + inset -1px 0 alpha($dark_shadow, .06); + } + + &:active:only-child, &:active:only-child:focus, &:active:only-child:hover, &:active:only-child:hover:focus, + &:checked:only-child, &:checked:only-child:focus, &:checked:only-child:hover, &:checked:only-child:hover:focus { + box-shadow: inset 1px 0 alpha($dark_shadow, .06), + inset 0 1px alpha($dark_shadow, .07), + inset -1px 0 alpha($dark_shadow, .06); + } +} + +@mixin linked_vertical_button($bg) { + $border_strength: if(lightness($bg) > 50, 0, .1); + $shadow_strength: if(lightness($bg) > 50, 0, .1); + + @extend %linked_vertical_button; + + box-shadow: inset 0 -1px border_normal(rgba(0, 0, 0, .12 + $border_strength)), + 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength); + + &:focus, &:hover { + box-shadow: inset 0 -1px border_focus(rgba(0, 0, 0, .12 + $border_strength)), + 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength); + } + + &:active, &:active:hover, + &:active:focus, &:active:hover:focus, + &:checked, &:checked:hover, + &:checked:focus, &:checked:hover:focus { + box-shadow: inset 0 -1px border_active(rgba(0, 0, 0, .12 + $border_strength)), + inset 1px 0 alpha($dark_shadow, .07), + inset -1px 0 alpha($dark_shadow, .05); + } + + &:disabled { box-shadow: inset 0 -1px shade($bg, .8); } + + &:last-child, &:only-child { box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength); } + + &:last-child:hover, &:only-child:hover { box-shadow: 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength); } + + &:disabled:last-child, &:disabled:only-child, + &:active:disabled:last-child, &:active:disabled:only-child, + &:checked:disabled:last-child, &:checked:disabled:only-child { box-shadow: none; } + + &:active:last-child, &:active:last-child:focus, &:active:last-child:hover, &:active:last-child:hover:focus, + &:checked:last-child, &:checked:last-child:focus, &:checked:last-child:hover, &:checked:last-child:hover:focus { + box-shadow: inset 0 1px alpha($dark_shadow, .07), + inset -1px 0 alpha($dark_shadow, .06); + } + + &:active:only-child, &:active:only-child:focus, &:active:only-child:hover, &:active:only-child:hover:focus, + &:checked:only-child, &:checked:only-child:focus, &:checked:only-child:hover, &:checked:only-child:hover:focus { + box-shadow: inset 1px 0 alpha($dark_shadow, .06), + inset 0 1px alpha($dark_shadow, .07), + inset -1px 0 alpha($dark_shadow, .06); + } +} + +@mixin button($bg, $fg) { + $border_strength: if(lightness($fg) > 50, .1, .2); + $shadow_strength: if(lightness($bg) > 50, 0, .1); + + $button_bg: $bg; + + @extend %button; + @include linear-gradient($button_bg); + @include border(alpha($fg, .12 + $border_strength)); + + color: $fg; + box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength); + + + &.flat { + //color: mix($bg, $fg, .2); + color: $fg; + border-color: alpha($button_bg, 0); + background-color: alpha($button_bg, 0); + background-image: none; + box-shadow: none; + } + + &, &.flat { + + &:hover { + @include linear-gradient(shade($bg, 1.05)); + @include border(alpha($fg, .20 + $border_strength)); + + color: $fg; + box-shadow: 0 1px 2px -1px alpha($dark_shadow, .22 + $shadow_strength); + } + + &:focus { + @include linear-gradient(shade($bg, 1.05)); + @include border(alpha($fg, .20 + $border_strength)); + + color: $fg; + box-shadow: 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength); + &:hover { + @include linear-gradient(shade($bg, 1.1)); + @include border(alpha($fg, .20 + $border_strength)); + + box-shadow: 0 1px 2px -1px alpha($dark_shadow, .38 + $shadow_strength); + } + } + + &:checked, &:active { + /*@include linear-gradient(shade($bg, .7), to top);*/ + @include linear-gradient($selected_bg_color, to top); + + color: $selected_fg_color; + box-shadow: inset 1px 0 alpha($fg, .06), + inset 0 1px alpha($fg, .07), + inset -1px 0 alpha($fg, .06), + inset 0 -1px alpha($fg, .05); + @include border(alpha($fg, .12 + $border_strength)); + + &:focus, &:hover { + /*@include linear-gradient(shade($bg, .65), to top);*/ + @include linear-gradient(shade($selected_bg_color, 1.05), to top); + + color: $selected_fg_color; + } + } + + &:focus, &:hover { color: $fg; } + + &:disabled:disabled { + @include linear-gradient(alpha(mix($bg, $fg, .2), .4)); + /*border: 1px solid alpha($bg, .2);*/ + opacity: .4; + + color: mix($bg, $fg, .5); + box-shadow: none; + } + + &:active:disabled, &:checked:disabled { + @include linear-gradient(alpha($selected_bg_color, .6)); + + color: $selected_fg_color; + box-shadow: none; + } + } + + &.separator, .separator { + border: 1px solid currentColor; + color: alpha($bg, ($contrast + .1)); + + &:disabled { color: alpha($bg, .85); } + } +} + +@include exports("button") { + %close_button { + border: 1px solid transparent; + background-color: transparent; + background-image: none; + box-shadow: none; + + &:focus, &:hover { + border: 1px solid alpha($bg_color, .3); + background-color: alpha($fg_color, .2); + background-image: none; + box-shadow: none; + } + + &:active, &:checked, &:active:hover, &:checked:hover { + border: 1px solid alpha($selected_bg_color, .3); + background-color: alpha($selected_fg_color, .1); + background-image: none; + box-shadow: none; + } + } + + button { + @include button($button_bg_color, $button_fg_color); + + + .inline-toolbar &, + .linked > & { @include linked_button($button_bg_color); } + + .linked.vertical > & { @include linked_vertical_button($button_bg_color); } + + &.circular, + &.circular-button { // FIXME: aggregate to buttons + padding: 0; + min-width: 28px; + min-height: 28px; + border-radius: 9999px; // Fixed: https://github.com/GNOME/gtk/commit/a6409458f0d50d673a4dc370b9251993b7835b6b + -gtk-outline-radius: 9999px; + + label { padding: 0; } + } + } + + spinbutton { + + &:disabled { + opacity: .4; + } + + button { + color: $button_fg_color; + + &:active, &:checked, &:hover { + @include linear-gradient(shade($button_bg_color, 1.2)); + } + + &:disabled { color: mix($button_fg_color, $bg_color, .7); } + + &:backdrop { color: mix($backdrop_base_color, $backdrop_fg_color, .9); } + + &:backdrop:disabled { color: alpha($backdrop_insensitive_color, .8); } + } + + &:not(.vertical) { + /*@extend %entry;*/ + @include linear-gradient($base_color, to top); + /*@include border($base_color);*/ + + padding: 0; + border-radius: $roundness; + + color: $text_color; + caret-color: $text_color; + + /*&:focus, &:active { border-color: border_focus($borders_color); }*/ + + &:disabled { + @include linear-gradient(shade($base_color, .9), to top); + + color: mix($base_color, $text_color, .5); + } + + entry { + border-radius: $roundness 0 0 $roundness; + border-right-width: 0; + box-shadow: none; + } + + button { + @extend %linked_middle; + border-radius: 0; + /*border-color: alpha($borders_color, .8);*/ + /*border-style: none none none solid;*/ + background-image: none; + box-shadow: none; + + /* + @if (lightness($bg_color) > 50) { + background-color: shade($bg_color, 1.08); + } + + &:hover { + @if (lightness($bg_color) > 50) { + background-color: shade($bg_color, 1.11); + } + } + */ + + &:dir(rtl) { border-style: none solid none none; } + + &:active { box-shadow: inset 0 2px 3px -1px transparentize($black, .8); } + + &:backdrop { border-color: alpha($backdrop_borders_color, .8); } + + &:backdrop:disabled { + border-style: none none none solid; // It is needed or it gets overridden + &:dir(rtl) { border-style: none solid none none; } + } + + &:dir(rtl):first-child { border-radius: $roundness 0 0 $roundness; } + + &:dir(ltr):last-child { border-radius: 0 $roundness $roundness 0; } + } + } + + &.vertical { + button, entry { + min-width: 0; + padding-left: $spacing - 2px; + padding-right: $spacing - 2px; + } + + entry { + // reset all the other props since the spinbutton node is styled here + border-radius: 0; + border-top-width: 0; + border-bottom-width: 0; + } + + button { + &.up { + border-style: solid solid none solid; + border-radius: $roundness $roundness 0 0; + } + + &.down { + border-style: none solid solid solid; + border-radius: 0 0 $roundness $roundness; + } + } + } + } +} + +/****************** +! ComboBoxes * +*******************/ + +@include exports("combobox") { + combobox { + button.combo { + // otherwise the arrow placement is not symmetric + min-width: 0; + padding-left: $spacing + 2px; + padding-right: $spacing + 2px; + } + + arrow { + -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); + min-height: 16px; + min-width: 16px; + } + + box button, box entry { + @extend %linked_button; + padding: $spacing ($spacing + 2px); + } + + .linked:not(.vertical) > & > box > button.combo { + // the combo is a composite widget so the way we do button linked doesn't + // work, special case needed. See + // https://bugzilla.gnome.org/show_bug.cgi?id=733979 + &:dir(ltr) { @extend %linked_middle; } + // specificity bump + &:dir(rtl) { @extend %linked_middle:dir(rtl); } + } + + .linked:not(.vertical) > &:first-child > box > button.combo { @extend %linked_button:first-child; } + + .linked:not(.vertical) > &:last-child > box > button.combo { @extend %linked_button:last-child; } + + .linked:not(.vertical) > &:only-child > box > button.combo { @extend %linked_button:only-child; } + + .linked.vertical > & > box > button.combo { @extend %linked_vertical_middle; } + + .linked.vertical > &:first-child > box > button.combo { @extend %linked_vertical_button:first-child; } + + .linked.vertical > &:last-child > box > button.combo { @extend %linked_vertical_button:last-child; } + + .linked.vertical > &:only-child > box > button.combo { @extend %linked_vertical_button:only-child; } + } +} diff --git a/Redcore-daylight/gtk-3.20/scss/widgets/_calendar.scss b/Redcore-daylight/gtk-3.20/scss/widgets/_calendar.scss new file mode 100644 index 0000000..c2243b9 --- /dev/null +++ b/Redcore-daylight/gtk-3.20/scss/widgets/_calendar.scss @@ -0,0 +1,73 @@ +/********** + ! Calendar +***********/ + +@include exports("calendar") { + calendar { + padding: 1px 3px; + outline-offset: -1px; + + color: $text_color; + + &.view { + &, &:backdrop { @extend %undecorated_button; } + } + + &:selected { + @extend %selected_items; + + border-radius: $roundness; + } + + &.header { + border-bottom: 1px solid transparentize($black, .9); + border-radius: 0; + + &:backdrop { border-color: transparentize($black, .9); } + } + + &.button { + @extend %undecorated_button; + + color: alpha($fg_color, .55); + + &:hover { + @extend %undecorated_button; + + color: $fg_color; + } + + &:backdrop { + @extend %undecorated_button; + + color: alpha($backdrop_fg_color, .55); + } + + &:disabled { + @extend %undecorated_button; + + color: alpha($insensitive_fg_color, .55); + } + } + + &:indeterminate, + &:indeterminate:backdrop { color: mix($fg_color, $bg_color, .5); } + + &.highlight, + &.highlight:backdrop { + font-size: smaller; + color: mix($selected_bg_color, $fg_color, .5); + } + + &:backdrop { + color: $backdrop_text_color; + } + } + + /* gnome-calendar */ + .calendar-view { + background-color: $base_color; + color: $text_color; + } +} + diff --git a/Redcore-daylight/gtk-3.20/scss/widgets/_choosers.scss b/Redcore-daylight/gtk-3.20/scss/widgets/_choosers.scss new file mode 100644 index 0000000..6741bd8 --- /dev/null +++ b/Redcore-daylight/gtk-3.20/scss/widgets/_choosers.scss @@ -0,0 +1,181 @@ +/*************** + ! Color chooser +****************/ + +@include exports("colorchooser") { + colorswatch { + // This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one + // is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is + // applied to the overlay box. + + &:drop(active), & { border-style: none; } // FIXME: implement a proper drop(active) state + + $_colorswatch_radius: $roundness; + + // base color corners rounding + // to avoid the artifacts caused by rounded corner anti-aliasing the base color + // sports a bigger radius. + // nth-child is needed by the custom color strip. + + &.top { + border-top-left-radius: $_colorswatch_radius + .5px; + border-top-right-radius: $_colorswatch_radius + .5px; + + overlay { + border-top-left-radius: $_colorswatch_radius; + border-top-right-radius: $_colorswatch_radius; + } + } + + &.bottom { + border-bottom-left-radius: $_colorswatch_radius + .5px; + border-bottom-right-radius: $_colorswatch_radius + .5px; + + overlay { + border-bottom-left-radius: $_colorswatch_radius; + border-bottom-right-radius: $_colorswatch_radius; + } + } + + &.left, + &:first-child:not(.top) { + border-top-left-radius: $_colorswatch_radius + .5px; + border-bottom-left-radius: $_colorswatch_radius + .5px; + + overlay { + border-top-left-radius: $_colorswatch_radius; + border-bottom-left-radius: $_colorswatch_radius; + } + } + + &.right, + &:last-child:not(.bottom) { + border-top-right-radius: $_colorswatch_radius + .5px; + border-bottom-right-radius: $_colorswatch_radius + .5px; + + overlay { + border-top-right-radius: $_colorswatch_radius; + border-bottom-right-radius: $_colorswatch_radius; + } + } + + &.dark overlay { + color: $selected_fg_color; + + &:hover { border-color: if($variant == 'light', transparentize($black, .2), $borders_color); } + + &:backdrop { color: $backdrop_selected_fg_color; } + } + + &.light overlay { + color: $text_color; + + &:hover { border-color: if($variant == 'light', transparentize($black, .5), $borders_color); } + + &:backdrop { color: $backdrop_text_color; } + } + + &:drop(active) { + box-shadow: none; + + &.light overlay { + border-color: $drop_target_color; + box-shadow: inset 0 0 0 2px if($variant == 'light', darken($drop_target_color, 7%), $borders_color), + inset 0 0 0 1px $drop_target_color; + } + + &.dark overlay { + border-color: $drop_target_color; + box-shadow: inset 0 0 0 2px if($variant == 'light', transparentize($black, .7), $borders_color), + inset 0 0 0 1px $drop_target_color; + } + } + + overlay { + border: 1px solid if($variant == 'light', transparentize($black, .7), $borders_color); + + &:hover { + box-shadow: inset 0 1px transparentize($white, .6), + inset 0 -1px transparentize($black, .8); + } + + &:backdrop, + &:backdrop:hover { + border-color: if($variant == 'light', transparentize($black, .7), $borders_color); + box-shadow: none; + } + } + + &:disabled { + opacity: .5; + + overlay { + border-color: transparentize($black, .4); + box-shadow: none; + } + } + + row:selected & { box-shadow: 0 0 0 2px $selected_fg_color; } + + &#add-color-button { + border-radius: $_colorswatch_radius $_colorswatch_radius 0 0; + + &:only-child { border-radius: $_colorswatch_radius; } + + overlay { + background-color: shade($bg_color, .95); + color: $fg_color; + + &:hover { background-color: shade($bg_color, .9); } + + &:backdrop { background-color: shade($backdrop_bg_color, .95); } + } + } + + &#editor-color-sample { + border-radius: $_colorswatch_radius; + + overlay { border-radius: $_colorswatch_radius + .5px; } + } + } + + button.color { + padding: $spacing; + + colorswatch:only-child { + &, overlay { border-radius: 0; } + + @if $variant == 'light' { box-shadow: 0 1px _text_shadow_color(); } + } + + @if $variant == 'light' { + &:disabled, + &:backdrop, + &:active, + &:checked { colorswatch:only-child { box-shadow: none; } } + } + } +} + + +/*********************** +! Font and file choosers +************************/ + +@include exports("miscchoosers") { + filechooser { + /* for fallback when header bar not used */ + .dialog-action-box { + border-top: 1px solid $borders_color; + + &:backdrop { border-top-color: $backdrop_borders_color; } + } + + #pathbarbox { border-bottom: 1px solid $bg_color; } + } + + filechooserbutton:drop(active) { + box-shadow: none; + border-color: transparent; + } +} diff --git a/Redcore-daylight/gtk-3.20/scss/widgets/_entry.scss b/Redcore-daylight/gtk-3.20/scss/widgets/_entry.scss new file mode 100644 index 0000000..1b65044 --- /dev/null +++ b/Redcore-daylight/gtk-3.20/scss/widgets/_entry.scss @@ -0,0 +1,186 @@ +/********* + ! Entry * +**********/ + +%linked_entry { + border-width: 1px; + border-radius: 0; + border-right-width: 0; + border-left-width: 0; + + &:first-child { + border-width: 1px; + border-radius: $roundness; + border-right-width: 0; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + + &:dir(rtl) { + border-left-width: 0; + border-right-width: 1px; + } + } + + &:last-child { + border-width: 1px; + border-radius: $roundness; + border-left-width: 0; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + + &:dir(rtl) { + border-left-width: 1px; + border-right-width: 0; + } + } + + &:only-child, &:first-child:only-child { + border-width: 1px; + } + + &:only-child { + border-radius: $roundness; + } +} + +%linked_vertical_entry { + border-width: 1px; + border-radius: 0; + border-top-width: 0; + border-bottom-width: 0; + + &:first-child { + border-width: 1px; + border-radius: $roundness; + border-top-width: 1px; + border-bottom-width: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + + &:dir(rtl) { + border-top-width: 0; + border-bottom-width: 1px; + } + } + + &:last-child { + border-width: 1px; + border-radius: $roundness; + border-top-width: 0; + border-bottom-width: 1px; + border-top-left-radius: 0; + border-top-right-radius: 0; + + &:dir(rtl) { + border-top-width: 1px; + border-bottom-width: 0; + } + } + + &:only-child, &:first-child:only-child { + border-width: 1px; + } + + &:only-child { + border-radius: $roundness; + } +} + +%entry { + border-width: 1px; + border-style: solid; + border-radius: $roundness; + border-color: border_normal($bg_color); + transition: border 100ms ease-out; + &:focus, &:hover, &:active { transition: border 100ms ease-in; } + + box-shadow: inset 1px 0 alpha($dark_shadow, 0.10), + inset 0 1px alpha($dark_shadow, 0.12), + inset -1px 0 alpha($dark_shadow, 0.10), + inset 0 -1px alpha($dark_shadow, 0.05); + + + + &:selected { + &, &:selected:focus { + background-color: $selected_bg_color; + color: $selected_fg_color; + } + } + + &:disabled { box-shadow: none; } + + progress { + @include linear-gradient($selected_bg_color); + + border-width: 0; + border-radius: $roundness; + color: $selected_fg_color; + } + + image.left { padding-right: $spacing; } + + image.right { padding-left: $spacing; } + + selection { @extend %selected_items; } + + // entry error and warning style + @each $e_type, $e_color, $e_fg_color in (warning, $warning_bg_color, $warning_fg_color), + (error, $error_bg_color, $error_fg_color), + // entry.search-missing for Gnome-Builder + (search-missing, $error_bg_color, $error_fg_color) { + &.#{$e_type} { + color: $e_fg_color; + border-color: border_normal($e_color); + background-color: mix($base_color, $e_color, .6); + + image { color: $e_fg_color; } + + &:focus { + color: $e_fg_color; + border-color: border_focus($e_color); + background-color: $e_color; + box-shadow: none; + } + + selection { + background-color: $e_fg_color; + color: $e_color; + } + } + } +} + +@mixin entry($bg, $fg, $border: $borders_color) { + @extend %entry; + @include linear-gradient($bg, to top); + @include border(mix($bg, $fg, .20)); + + padding: $spacing; + + color: $fg; + caret-color: $primary_caret_color; + -gtk-secondary-caret-color: $secondary_caret_color; + + &:focus, &:active { border-color: border_focus($border); } + + &:disabled { + @include linear-gradient(shade($bg, .9), to top); + @include border(alpha(mix($bg, $fg, .20), .4)); + /*@include border(mix($bg, $fg, .20));*/ + /*border-color: alpha(mix($bg, $fg, .15), .8);*/ + /*opacity: .8;*/ + + color: mix($bg, $fg, .5); + } +} + +@include exports("entry") { + entry { + @include entry($base_color, $text_color); + + .linked:not(.vertical) > & { @extend %linked_entry; } + + .linked.vertical > & { @extend %linked_vertical_entry; } + } +} diff --git a/Redcore-daylight/gtk-3.20/scss/widgets/_grid.scss b/Redcore-daylight/gtk-3.20/scss/widgets/_grid.scss new file mode 100644 index 0000000..7a16dca --- /dev/null +++ b/Redcore-daylight/gtk-3.20/scss/widgets/_grid.scss @@ -0,0 +1,63 @@ +/****************** + ! Grid and flowbox +*******************/ + +@include exports("grid") { + list { + color: $text_color; + background-color: $base_color; + border-color: $borders_color; + + &:backdrop { + background-color: $backdrop_base_color; + border-color: $backdrop_borders_color; + } + + row { padding: $spacing; } + } + + row { + transition: all 150ms cubic-bezier(.25, .46, .45, .94); + + &:hover { transition: none; } + + &:backdrop { transition: 200ms ease-out; } + + &.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: if(variant == light, transparentize($fg_color, .9), transparentize($fg_color, .95)); } + + &:active { box-shadow: inset 0 2px 2px -2px transparentize($black, .8); } + + &:backdrop:hover { background-color: transparent; } + + &:selected { + &:active { box-shadow: inset 0 2px 3px -1px transparentize($black, .5); } + + &.has-open-popup, + &:hover { background-color: mix($selected_bg_color, $fg_color, .1); } + + &:backdrop { background-color: $selected_bg_color; } + } + } + + &:selected { @extend %selected_items; } + } + + flowbox { + rubberband { @extend rubberband; } + + flowboxchild { + padding: $spacing; + border-radius: $roundness; + + &:selected { + @extend %selected_items; + + outline-offset: -2px; + } + } + } +} + diff --git a/Redcore-daylight/gtk-3.20/scss/widgets/_infobar.scss b/Redcore-daylight/gtk-3.20/scss/widgets/_infobar.scss new file mode 100644 index 0000000..bf82db2 --- /dev/null +++ b/Redcore-daylight/gtk-3.20/scss/widgets/_infobar.scss @@ -0,0 +1,41 @@ +@import "button"; + + +/********* + ! Infobar +**********/ + +@include exports("infobar") { + infobar { + border: 0; + + $types: ( + info: ($info_fg_color, $info_bg_color), + warning: ($warning_fg_color, $warning_bg_color), + question: ($question_fg_color, $question_bg_color), + error: ($error_fg_color, $error_bg_color), + ); + + @each $type, $colors in $types { + $fg_color: nth($colors, 1); + $bg_color: nth($colors, 2); + + &.#{$type} { + &, &:backdrop { // Backdrop button fix: https://github.com/numixproject/numix-gtk-theme/issues/544 + @include linear-gradient($bg_color); + + border: 1px solid shade($bg_color, .8); + caret-color: currentColor; + + label, & { color: $fg_color; } + } + + button { + @include button($bg_color, $fg_color); + + &.close { @extend %close_button; } + } + } + } + } +} diff --git a/Redcore-daylight/gtk-3.20/scss/widgets/_menu.scss b/Redcore-daylight/gtk-3.20/scss/widgets/_menu.scss new file mode 100644 index 0000000..1a7f248 --- /dev/null +++ b/Redcore-daylight/gtk-3.20/scss/widgets/_menu.scss @@ -0,0 +1,319 @@ +@import "entry"; + + + +@mixin menu_calendar($bg, $fg) { + color: $fg; + + &.header { + border-bottom: 1px solid shade($bg, ($contrast + .1)); + border-radius: 0; + + &:backdrop { border-color: shade($bg, ($contrast + .1)); } + } + + &.button { + @extend %undecorated_button; + color: alpha($fg, .55); + + &:hover { + @extend %undecorated_button; + color: $fg; + } + } + + &:indeterminate, + &:indeterminate:backdrop { color: mix($fg, $bg, .5); } +} + + +/********* + ! Menubar +**********/ + +@include exports("menubar") { + menubar, .menubar { + -GtkWidget-window-dragging: true; + + padding: 0; + border: 0; + background-color: $menubar_bg_color; + background-image: none; + //box-shadow: inset 0 -1px shade($menubar_bg_color, .9); + color: $menubar_fg_color; + + > menuitem { + min-height: 16px; + padding: $spacing*1.5 $spacing * 2.5; + border: 1px solid transparent; + background-color: transparent; + background-image: none; + color: $menubar_fg_color; + + &:hover { + border-color: mix($menubar_bg_color, $menubar_fg_color, .21); + background-color: mix($menubar_bg_color, $menubar_fg_color, .21); + background-image: none; + color: shade($menubar_fg_color, 1.08); + } + + *:hover { color: shade($menubar_fg_color, 1.08); } + } + } +} + + +/****** + ! Menu +*******/ + +@include exports("menu") { + menu, + .menu, + .context-menu { + border: 0; + border-radius: 0; + padding: $spacing; + background-color: $menu_bg_color; + color: $menu_fg_color; + + .csd & { border: 0; } // axes borders in a composited env + + &:selected { background-color: $selected_bg_color; } + + // A little hack to get some extra space above/below menuitem separators + separator, + .csd & separator { + background-color: shade($menu_bg_color, ($contrast + .1)); + margin: ($spacing - 2px) 0; + } + + // Firefox workaround + .separator, + .csd & .separator { color: shade($menu_bg_color, ($contrast + .1)); } + + menuitem { + min-height: 16px; + min-width: 40px; + padding: $spacing; + border-radius: 0; + + &:active, &:hover { + border: 0; + background-color: $selected_bg_color; + background-image: none; + color: $selected_fg_color; + } + + *:active, *:hover { color: $selected_fg_color; } + + &:disabled, *:disabled { color: mix($menu_fg_color, $menu_bg_color, .5); } + + // 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-end-symbolic-rtl'); + margin-right: 10px; + } + } + + &.button, &.button.flat { + &, &:focus, &:active, &:disabled, &:active:disabled { + background-color: transparent; + background-image: none; + border: 0; + box-shadow: none; + color: currentColor; + } + + &:hover, &:focus:hover, &:active:hover, &:selected { + background-image: none; + background-color: $selected_bg_color; + color: $selected_fg_color; + } + } + + calendar { @include menu_calendar($menu_bg_color, $menu_fg_color); } + + // avoids labels color being overridden, see + // https://bugzilla.gnome.org/show_bug.cgi?id=767058 + label { &:dir(rtl), &:dir(ltr) { color: inherit; } } + } + + // overflow arrows + > arrow { + //@include button(undecorated); + + min-height: 16px; + min-width: 16px; + padding: $spacing; + background-color: $menu_bg_color; + border-radius: 0; + + &.top { + margin-top: -6px; + border-bottom: 1px solid mix($fg_color, $base_color, .1); + -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); + } + + &.bottom { + margin-bottom: -6px; + border-top: 1px solid mix($fg_color, $base_color, .1); + -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); + } + + &:hover { background-color: mix($fg_color, $base_color, .1); } + + &:backdrop { background-color: $backdrop_menu_color; } + + &:disabled { + color: transparent; + background-color: transparent; + border-color: transparent; + } + } + } + + .context-menu { font: initial; } // Decouple the font of context menus from their entry/textview + + .monospace { font-family: monospace; } + + menuitem { + accelerator { + color: alpha($menu_fg_color, .6); + + &:hover { color: alpha($selected_fg_color, .8); } + + &:disabled { color: alpha(mix($menu_fg_color, $menu_bg_color, .5), .4); } + } + + check, radio { + min-height: 16px; + min-width: 16px; + + &:dir(ltr) { margin-right: 7px; } + &:dir(rtl) { margin-left: 7px; } + } + + window decoration { + box-shadow: 0 2px 3px alpha($black, .2); + } + + entry { @include entry($menu_bg_color, $menu_fg_color); } + } +} + + +/********* + ! Popover +**********/ + +@include exports("popover") { + popover.background { + padding: $spacing - 3px; + border-radius: $roundness; + background-clip: border-box; + background-color: $menu_bg_color; + background-image: none; + color: $menu_fg_color; + box-shadow: 0 3px 6px alpha($black, .16); + + .csd &, & { + /*@include border($menu_bg_color);*/ + @include border(alpha($menu_fg_color, .5)); + border-width: 1px; + border-style: solid; + } + + &:backdrop { box-shadow: none; } + + treeview.view { + &:hover, &:selected, &:selected:focus, &:backdrop:selected, &:backdrop:selected:focus { border-top-color: $selected_bg_color; } + + &, &:backdrop { border-top-color: shade($menu_bg_color, ($contrast + .4)); } + } + + view, .view, list { + &:hover { + background-image: none; + background-color: $selected_bg_color; + color: $selected_fg_color; + } + + &, &:backdrop { + background-color: shade($menu_bg_color, ($contrast + .5)); + background-image: none; + color: $menu_fg_color; + border-color: border_normal($menu_bg_color); + } + } + + list row { + &, & .button { + background-color: transparent; + background-image: none; + color: $menu_fg_color; + + &:focus, &:hover, &:active { + background-image: none; + background-color: $selected_bg_color; + color: $selected_fg_color; + } + } + } + + .frame { + border-color: border_normal($menu_bg_color); + border-radius: $roundness; + } + + entry { @include entry($base_color, $text_color); } + + button { @include button($header_button_bg_color, $header_button_fg_color); } + .linked > button { @include linked_button($header_button_bg_color); } + + > list, > .view, > toolbar { + border-style: none; + background-color: transparent; + } + } + + modelbutton.flat, + menuitem.button.flat { + padding: $spacing ($spacing + 2px); + outline-color: transparent; + transition: none; + + @extend %undecorated_button; + + &:hover { + background-color: $selected_bg_color; + color: $selected_fg_color; + } + + &:active, &:selected { &, arrow { @extend %selected_items; } } + + &:checked { color: $fg_color; } + + arrow { + &.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } + + &.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } + } + + // FIXME: temporary workaround + check:last-child, + radio:last-child { margin-left: 8px; } + + check:first-child, + radio:first-child { margin-right: 8px; } + } +} diff --git a/Redcore-daylight/gtk-3.20/scss/widgets/_misc.scss b/Redcore-daylight/gtk-3.20/scss/widgets/_misc.scss new file mode 100644 index 0000000..da1c7dc --- /dev/null +++ b/Redcore-daylight/gtk-3.20/scss/widgets/_misc.scss @@ -0,0 +1,320 @@ +/*************** +! Dimmed label * +****************/ + +@include exports("dimlabel") { + .dim-label { + opacity: .5; + text-shadow: none; + } +} + + +/*********** + ! Tooltip * +************/ + +@include exports("tooltip") { + .tooltip, // Firefox fix + tooltip { + &.background { + &, &.csd { + background-color: $tooltip_bg_color; + background-clip: padding-box; + border: 1px solid border_normal($tooltip_bg_color); + border-radius: $roundness; + color: $tooltip_fg_color; + } + } + + * { + background-color: transparent; + color: inherit; + } + } +} + + +/*********** + ! Dialogs * +************/ + +@include exports("dialogs") { + messagedialog, .message-dialog, .prompt { + -GtkDialog-content-area-border: 0; + -GtkDialog-action-area-border: 0; + -GtkDialog-button-spacing: $spacing; + + margin: 0; + padding: 0; + } + + printdialog { + paper { + color: $fg_color; + border: 1px solid $borders_color; + background: $white; + padding: 0; + + &:backdrop { + color: $backdrop_fg_color; + border-color: $backdrop_borders_color; + } + } + + .dialog-action-box { margin: $spacing * 2; } + } +} + + +/********************* + ! App notifications * +**********************/ + +@include exports("notifications") { + frame.app-notification { + border-style: solid; + border-color: border_normal($osd_bg); + border-width: 0 1px 1px; + border-radius: 0 0 $roundness $roundness; + padding: $spacing * 2; + background-color: $osd_bg; + background-image: none; + color: $osd_fg; + + button { + @include button($osd_bg, $osd_fg); + } + + border { + border: 0; + } + } +} + + +/************* + ! Expanders * +**************/ + +@include exports("expander") { + expander { + arrow { + min-width: 16px; + min-height: 16px; + -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); + + &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } + + &:hover { color: alpha(currentColor, .8); } //only lightens the arrow + + &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } + } + } +} + + +/******************* + ! Symbolic images * +********************/ + +@include exports("symbolicimage") { + .image { + color: alpha(currentColor, .5); + + &:hover { color: alpha(currentColor, .9); } + + &:selected, &:selected:hover { color: $selected_fg_color; } + } +} + + +/**************** + ! Floating bar * +*****************/ + +@include exports("floatingbar") { + .floating-bar { + @include linear-gradient($bg_color); + + border: 1px solid border_normal($bg_color); + border-radius: $roundness; + color: $fg_color; + + &.top { + border-top-width: 0; + border-top-right-radius: 0; + border-top-left-radius: 0; + } + + &.right { + border-right-width: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + &.bottom { + border-bottom-width: 0; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } + + &.left { + border-left-width: 0; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } + + button { + border: 0; + background-color: transparent; + background-image: none; + } + } +} + + +/************************* + ! Touch text selections * +**************************/ + +@include exports("touchbubble") { + GtkBubbleWindow { + border-radius: $roundness; + background-clip: border-box; + + &.osd.background { background-color: $osd_bg; } + + .toolbar { background-color: transparent; } + } +} + +/*************** + ! Font-viewer * +****************/ + +@include exports("fontviewer") { + SushiFontWidget { + padding: $spacing ($spacing * 2); + } +} + + +/************* + ! Gucharmap * +**************/ + +@include exports("charmap") { + GucharmapChartable { + background-color: $base_color; + color: $text_color; + + &:focus, &:hover, &:active, &:selected { @extend %selected; } + } +} + + +/************* + ! Evolution * +**************/ + +@include exports("evolution") { + EPreviewPane .entry { + background-color: $base_color; + color: $text_color; + } +} + + +/******************* + ! Gnome Bluetooth * +********************/ + +@include exports("gnome-bluetooth") { + // Base code: https://github.com/GNOME/gnome-bluetooth/blob/a93575c4b590e2b831da32f739294bb2f197d420/lib/bluetooth-settings.css + entry.entry.pin-entry { + font-style: normal; + font-size: 50px; + padding-left: $spacing * 5; + padding-right: $spacing * 5; + } + + label.pin-label { + font-style: normal; + font-size: 50px; + } +} + + +/************************ + ! Shortcut window keys * +*************************/ + +@include exports("keycap") { + // shortcut window keys + .keycap { + min-width: 20px; + min-height: 24px; + margin-top: 2px; + padding-bottom: $spacing / 2; + padding-left: $spacing; + padding-right: $spacing; + + color: $fg_color; + background-color: $base_color; + border: 1px solid; + border-color: if($variant == 'light', mix($borders_color, $bg_color, .5), $borders_color); + border-radius: $roundness; + box-shadow: if($variant == 'light', inset 0 -3px mix($base_color, $bg_color, .2), inset 0 -3px mix($borders_color, $base_color, .6)); + font-size: smaller; + + &:backdrop { + background-color: $backdrop_base_color; + color: $backdrop_fg_color; + transition: 200ms ease-out; + } + } +} + + +/***************** + ! Stackswitcher * +******************/ + +@include exports("stackswitcher") { + stackswitcher button { + &.text-button { min-width: 80px; } // FIXME aggregate with buttons + + &.circular { // FIXME aggregate with buttons + min-width: 28px; + min-height: 28px; + padding: 0; + } + } +} + + +/******************* + ! Selected Items * +********************/ + +@include exports("selected_items") { + %selected_items { + background-color: $selected_bg_color; + + @at-root %nobg_selected_items, & { + color: $selected_fg_color; + + @if $variant == 'light' { outline-color: transparentize($selected_fg_color, .7); } + + &:disabled { color: mix($selected_fg_color, $selected_bg_color, .5); } + + &:backdrop { + background-color: $backdrop_selected_bg_color; // Fixed Issue #430 + color: $backdrop_selected_fg_color; + + &:disabled { color: mix($backdrop_selected_fg_color, $selected_bg_color, .3); } + } + } + } +} diff --git a/Redcore-daylight/gtk-3.20/scss/widgets/_notebook.scss b/Redcore-daylight/gtk-3.20/scss/widgets/_notebook.scss new file mode 100644 index 0000000..92fa86b --- /dev/null +++ b/Redcore-daylight/gtk-3.20/scss/widgets/_notebook.scss @@ -0,0 +1,149 @@ +@import "button"; + + +/********** + ! Notebook +***********/ + +@include exports("notebook") { + +notebook { + padding: 0; + + &.frame { + border: 1px solid $borders_color; + + > header { + // ugly hack to hide the borders around the header + margin: -1px; + &.top { margin-bottom: 0; } + &.bottom { margin-top: 0; } + &.left { margin-right: 0; } + &.right { margin-left: 0; } + + &.top, &.bottom { padding-left: 0; padding-right: 0; } + &.left, &.right { padding-top: 0; padding-bottom: 0; } + } + } + + > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks + background-color: $bg_color; + } + + > header { + padding: $spacing; + background-color: $bg_color; + + &.top { box-shadow: inset 0 -1px $borders_color; } + &.bottom { box-shadow: inset 0 1px $borders_color; } + &.right { box-shadow: inset 1px 0 $borders_color; } + &.left { box-shadow: inset -1px 0 $borders_color; } + + @each $_pos, $_bpos in (top, bottom), (bottom, top), (right, left), (left, right) { + // sizing and borders + &.#{$_pos} { + padding-#{$_bpos}: 0; + + > tabs > tab { + padding: $spacing $spacing + 8px; + min-width: 20px; + min-height: 20px; + + outline-offset: -4px; + + border: 1px solid transparent; + border-#{$_bpos}: none; + border-#{$_pos}-width: 3px; + + &:checked { + border-#{$_pos}-color: $selected_bg_color; + } + + // tab overlap + + tab { + @if $_pos==top or $_pos==bottom { margin-left: -1px; } + @else { margin-top: -1px; } + } + + + // tab border radius + @if $_pos==top { border-radius: 1px 1px 0 0; } + @else if $_pos==bottom { border-radius: 0 0 1px 1px; } + @else if $_pos==left { border-radius: 1px 0 0 1px; } + @else if $_pos==right { border-radius: 0 1px 1px 0; } + } + } + } + // overflow arrows + &.top, &.bottom { + > tabs > arrow.up { + -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); + &:last-child { margin-left: 2px; } + } + > tabs > arrow.down { + -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); + &:first-child { margin-right: 2px; } + } + } + &.left, &.right { + > tabs > arrow.up { + -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); + &:last-child { margin-top: 2px; } + } + > tabs > arrow.down { + -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); + &:first-child { margin-bottom: 2px; } + } + } + > tabs > arrow { + @extend %close_button; + color: $insensitive_fg_color; + + &:hover { color: mix($fg_color, $insensitive_fg_color, 0.5); } + &:active { color: $fg_color; } + &:disabled { color: alpha($insensitive_fg_color,0.3); } + } + + // tab colors + + &.top > tabs > tab:hover:not(:checked) { box-shadow: inset 0 -1px $borders_color; } + &.bottom > tabs > tab:hover:not(:checked) { box-shadow: inset 0 1px $borders_color; } + &.left > tabs > tab:hover:not(:checked) { box-shadow: inset -1px 0 $borders_color; } + &.right > tabs > tab:hover:not(:checked) { box-shadow: inset 1px 0 $borders_color; } + + > tabs > tab { + color: alpha($fg_color, 0.8); + background-color: alpha(mix($bg_color, $fg_color, .1), 0.7); + + &:hover:not(:checked) { + color: mix($fg_color, $insensitive_fg_color, 0.5); + background-color: transparentize($base_color, 0.5); + border-color: $borders_color; + } + &:checked { + border-color: $borders_color; + color: $fg_color; + background-color: $bg_color; + } + // close button + button.flat { + min-height: 22px; + min-width: 16px; + padding: 0; + color: mix($bg_color, $fg_color, 0.35); + + &:hover { + @extend %undecorated_button; + color: lighten(red, 15%); + } + &:active, &:active:hover { + @extend %undecorated_button; + color: $selected_bg_color; + } + } + } + + } +} + +} diff --git a/Redcore-daylight/gtk-3.20/scss/widgets/_osd.scss b/Redcore-daylight/gtk-3.20/scss/widgets/_osd.scss new file mode 100644 index 0000000..8a4d8d2 --- /dev/null +++ b/Redcore-daylight/gtk-3.20/scss/widgets/_osd.scss @@ -0,0 +1,268 @@ +@import "button"; + + +/******* + ! OSD * +********/ + +@include exports("osd") { + overlay.osd { background-color: transparent; } + + colorchooser .popover.osd { border-radius: $roundness; } + + button.color { + .osd colorswatch:only-child { box-shadow: none; } + + @if $variant == 'light' { + .osd & { + &:disabled, + &:backdrop, + &:active, + &:checked { colorswatch:only-child { box-shadow: none; } } + } + } + } + + button.osd, + #XfceNotifyWindow button { + @include button($osd_bg, $osd_fg); + + &.image-button { + padding: 0; + min-height: 36px; + min-width: 36px; + } + } + + // stand-alone OSD toolbars + toolbar.osd { + -GtkToolbar-button-relief: normal; + + padding: $spacing; + border: 1px solid border_normal($osd_bg); + border-radius: $roundness; + background-color: $osd_bg; + background-image: none; + color: $osd_fg; + + separator { color: shade($osd_bg, ($contrast + .1)); } + + &.left, + &.right, + &.top, + &.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars + } + + progressbar.osd { // progressbar.osd used for epiphany page loading progress + margin: 2px; + min-height: 2px; + min-width: 2px; + + trough { + border-style: none; + border-radius: 0; + background-image: none; + background-color: transparent; + } + + progress { + border-style: none; + border-radius: 0; + background-color: $selected_bg_color; + background-image: none; + } + } + + .osd, + #XfceNotifyWindow { + background-color: $osd_bg; + color: $osd_fg; + + &.background { + background-color: alpha($osd_bg, .8); + color: $osd_fg; + } + + .frame { + background-clip: border-box; + background-origin: border-box; + } + + button { @include button($osd_bg, $osd_fg); } + + entry { @include entry($osd_base, $osd_text_color, $osd_borders_color); } + + /* used by gnome-settings-daemon's media-keys OSD */ + trough, + &.trough { + background-color: alpha($osd_fg, .3); + } + + progressbar, + &.progressbar { + background-color: $osd_fg; + } + + // Old GTK 3.0 code + scale { + slider { + @include linear-gradient(shade($osd_bg, 1.08)); + @include border($osd_bg); + + &:disabled { @include linear-gradient(shade($osd_bg, .9)); } + } + + trough { + border-color: shade($osd_bg, .8); + background-color: shade($osd_bg, 1.08); + background-image: none; + + &.highlight { + border-color: $selected_bg_color; + background-color: $selected_bg_color; + background-image: none; + } + + &:disabled, &.highlight:disabled { + border-color: shade($osd_bg, .85); + background-color: shade($osd_bg, .9); + background-image: none; + } + } + } + + // New GTK 3.20 code + scale { + //OSD troughs + trough { + background-color: lighten($osd_bg, 7%); + + highlight { background-color: $selected_bg_color; } + } + + // OSD sliders + slider { + background-clip: border-box; + background-color: $selected_bg_color; + border-color: $selected_bg_color; + + &:hover { + background-color: lighten($selected_bg_color, 10%); + border-color: lighten($selected_bg_color, 10%); + } + + &:active { + background-color: darken($selected_bg_color, 10%); + border-color: darken($selected_bg_color, 10%); + } + } + } + + &.view, .view, view { background-color: $osd_bg; } + + scrollbar { + trough { background-color: $osd_bg; } + + slider { + border: 1px solid mix(shade($osd_bg, .87), $osd_fg, .21); + border-radius: 0; + background-color: mix($osd_bg, $osd_fg, .21); + + &:hover { + border-color: mix(shade($osd_bg, .87), $osd_fg, .31); + background-color: mix($osd_bg, $osd_fg, .31); + } + + &:active { + border-color: shade($selected_bg_color, .9); + background-color: $selected_bg_color; + } + } + } + + iconview.cell { + &:selected, &:selected:focus { + background-color: transparent; + border: 3px solid mix(shade($osd_bg, .87), $osd_fg, .21); + border-radius: $roundness; + outline-color: transparent; + } + } + + /* used by Documents */ + .page-thumbnail { + border: 1px solid shade($osd_bg, .9); + /* when there's no pixbuf yet */ + background-color: $osd_bg; + } + + popover.background { + box-shadow: 0 2px 7px 3px alpha($black, .5); + + > toolbar button { + border-radius: 0; + border-width: 0; + background-color: transparent; + background-image: none; + } + } + + spinbutton { + // OSD horizontal + &:not(.vertical) { + @include linear-gradient($osd_base, to top); + @include border($osd_base); + + padding: 0; + + color: $osd_text_color; + caret-color: $osd_text_color; + + &:focus, &:active { border-color: border_focus($osd_borders_color); } + + &:disabled { + @include linear-gradient(shade($osd_base, .9), to top); + + color: mix($osd_base, $osd_text_color, .5); + } + + button { + @include button($osd_bg, $osd_fg); + + border-radius: 0; + border-color: transparentize($osd_borders_color, .3); + border-style: none none none solid; + background-image: none; + box-shadow: none; + + &:dir(rtl) { border-style: none solid none none; } + + &:active, &:checked, &:hover { color: $osd_text_color; } + + &:disabled { color: alpha($osd_insensitive_fg_color, .8); } + + &:backdrop { color: mix($backdrop_base_color, $backdrop_fg_color, .9); } + + &:active { box-shadow: inset 0 2px 3px -1px transparentize($black, .8); } + + &:backdrop:disabled { + color: alpha($backdrop_insensitive_color, .8); + + border-style: none none none solid; // It is needed or it gets overridden + + &:dir(rtl) { border-style: none solid none none; } + } + + &:dir(rtl):first-child { border-radius: $roundness 0 0 $roundness; } + + &:dir(ltr):last-child { border-radius: 0 $roundness $roundness 0; } + } + } + + // OSD vertical + &.vertical button:first-child { + @include button($osd_bg, $osd_fg); + } + } + } +} diff --git a/Redcore-daylight/gtk-3.20/scss/widgets/_overshoot.scss b/Redcore-daylight/gtk-3.20/scss/widgets/_overshoot.scss new file mode 100644 index 0000000..a46fc07 --- /dev/null +++ b/Redcore-daylight/gtk-3.20/scss/widgets/_overshoot.scss @@ -0,0 +1,150 @@ +@mixin overshoot($position, $type: normal, $color: $selected_bg_color) { + $_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 $position == bottom { + $_position: center bottom; + $_linear_gradient_direction: to top; + } @else if $position == right { + $_position: right center; + $_small_gradient_size: $_small_gradient_length 100%; + $_big_gradient_size: $_big_gradient_length 100%; + } @else if $position == left { + $_position: left center; + $_small_gradient_size: $_small_gradient_length 100%; + $_big_gradient_size: $_big_gradient_length 100%; + } + + $_small_gradient_color: $color; + $_big_gradient_color: $color; + + @if $color == $fg_color { + $_small_gradient_color: shade($borders_color, .9); + $_big_gradient_color: $fg_color; + + @if $type == backdrop { $_small_gradient_color: $backdrop_borders_color; } + } + + $_small_gradient: -gtk-gradient(radial, + $_position, 0, + $_position, .5, + to(alpha($_small_gradient_color, .35)), + to(alpha($_small_gradient_color, .25))); + + $_big_gradient: -gtk-gradient(radial, + $_position, 0, + $_position, .6, + from(alpha($_big_gradient_color, .2)), + to(alpha($_big_gradient_color, 0))); + + @if $type == normal { + background-image: $_small_gradient, $_big_gradient; + background-size: $_small_gradient_size, $_big_gradient_size; + } @else if $type == 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: 0; + box-shadow: none; +} + +@mixin undershoot($position) { + $_undershoot_color_dark: alpha($black, .2); + $_undershoot_color_light: alpha($white, .2); + + $_gradient_dir: left; + $_dash_bg_size: 10px 1px; + $_gradient_repeat: repeat-x; + $_bg_pos: center $position; + + background-color: transparent; // shouldn't be needed, but better to be sure; + + @if ($position == left) or ($position == right) { + $_gradient_dir: top; + $_dash_bg_size: 1px 10px; + $_gradient_repeat: repeat-y; + $_bg_pos: $position center; + } + + // Disable + /*background-image: linear-gradient(to $_gradient_dir, // this is the dashed line + $_undershoot_color_light 50%, + $_undershoot_color_dark 50%);*/ + + padding-#{$position}: 1px; + background-size: $_dash_bg_size; + background-repeat: $_gradient_repeat; + background-origin: content-box; + background-position: $_bg_pos; + border: 0; + box-shadow: none; +} + +scrolledwindow { + viewport.frame { // avoid double borders when viewport inside scrolled window + border-style: none; + } + + // 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); } + } + } + + // Overflow indication, works similarly to the overshoot, the size if fixed tho. + undershoot { + &.top { @include undershoot(top); } + + &.bottom { @include undershoot(bottom); } + + &.left { @include undershoot(left); } + + &.right { @include undershoot(right); } + } + + junction { // the small square between two scrollbars + border-color: transparent; + // the border image is used to add the missing dot between the borders, details, details, details... + border-image: linear-gradient(to bottom, $borders_color 1px, transparent 1px) 0 0 0 1 / 0 1px stretch; + background-color: $scrollbar_bg_color; + + &:dir(rtl) { border-image-slice: 0 1 0 0; } + + &:backdrop { + border-image-source: linear-gradient(to bottom, $backdrop_borders_color 1px, transparent 1px); + background-color: $backdrop_scrollbar_bg_color; + transition: 200ms ease-out; + } + } +} diff --git a/Redcore-daylight/gtk-3.20/scss/widgets/_progress.scss b/Redcore-daylight/gtk-3.20/scss/widgets/_progress.scss new file mode 100644 index 0000000..de095ef --- /dev/null +++ b/Redcore-daylight/gtk-3.20/scss/widgets/_progress.scss @@ -0,0 +1,364 @@ +/***************** + ! Progress bars * +******************/ + +@include exports("progressbar") { + progressbar { + padding: 0; + border-radius: $roundness; + font-size: smaller; + color: alpha($fg_color, .6); + + // sizing + &.horizontal { + trough, + progress { min-height: 6px; } + } + + &.vertical { + trough, + progress { min-width: 6px; } + } + + trough { + border: 1px solid mix($bg_color, $fg_color, .17); + background-color: shade($bg_color, 1.08); + background-image: none; + border-radius: $roundness; + } + + progress { + @include linear-gradient($selected_bg_color); + + border-radius: 0; + + &.left { + border-top-left-radius: $roundness; + border-bottom-left-radius: $roundness; + } + + &.right { + border-top-right-radius: $roundness; + border-bottom-right-radius: $roundness; + } + + &.bottom { + border-bottom-left-radius: $roundness; + border-bottom-right-radius: $roundness; + } + + &.top { + border-top-left-radius: $roundness; + border-top-right-radius: $roundness; + } + } + } + + levelbar { + &.horizontal block { + min-width: 34px; + min-height: 4px; + } + + &.vertical block { + min-width: 4px; + min-height: 34px; + } + + &:backdrop { transition: 200ms ease-out; } + + trough { + @include linear-gradient(shade($bg_color, 1.08), to top); + + border: 1px solid mix($bg_color, $fg_color, .17); + border-radius: $roundness; + padding: 2px; // make discrete block appear inside levelbar + } + + &.horizontal.discrete block { + margin: 0 1px; + + &:first-child { margin: 0; } + } + + &.vertical.discrete block { + margin: 1px 0; + + &:first-child { margin: 0; } + } + + block { + @include linear-gradient($selected_bg_color); + + border-color: transparent; + border-radius: $roundness; + + &.low { + background-color: $warning_color; + border-color: transparent; + } + + &.high, + &:not(.empty) { + background-color: $success_color; + border-color: transparent; + } + + &.full { + background-color: shade($selected_bg_color, .8); + border-color: transparent; + } + + &.empty { + background-color: transparent; + border-color: transparent; + box-shadow: none; + } + } + } + + scale { + $_marks_length: 3px; + $_marks_distance: 1px; + $button_bg: $button_bg_color; + $ease-out-quad: cubic-bezier(.25, .46, .45, .94); + $button_transition: all 200ms $ease-out-quad; + + min-height: 10px; + min-width: 10px; + padding: $spacing; + + &.horizontal { + trough { padding: 0 3px; } + + highlight, fill { margin: 0 -4px; } + } + + &.vertical { + trough { padding: 3px 0; } + + highlight, fill { margin: -4px 0; } + } + + // The slider is inside the trough, negative margin to make it bigger + slider { + min-height: 15px; + min-width: 15px; + margin: -7px; + } + + // Click-and-hold the slider to activate + &.fine-tune { + // Make the trough grow in fine-tune mode + slider { margin: -7px; } + + highlight { background-color: shade($selected_bg_color, 1.1); } + + fill, + highlight, + trough { + border-radius: 5px; + -gtk-outline-radius: 7px; + } + } + + // Trough + trough { + $_scale_trough_bg: mix($bg_color, $fg_color, .2); + + outline-offset: 2px; + -gtk-outline-radius: 4.5px; + + border-radius: 2.5px; + background-color: $_scale_trough_bg; + + &:disabled { background-color: mix($bg_color, $fg_color, .1); } + + // Troughs in selected list-rows and infobars + menuitem:hover &, + row:selected &, + infobar & { + background-color: transparentize($black, .8); + + highlight { + background-color: $selected_fg_color; + + &:disabled { background-color: mix($selected_fg_color, $selected_bg_color, .55); } + } + + &:disabled { background-color: transparentize($black, .9); } + } + } + + // The colored part of trough + highlight { + border-radius: 2.5px; + background-color: $selected_bg_color; + + &:disabled { background-color: transparentize($selected_bg_color, .45); } + } + + // this is another differently styled part of the trough, the most relevant use case is for example + // in media player to indicate how much video stream as been cached + fill { + border-radius: 2.5px; + background-color: transparentize($selected_bg_color, .5); + + &:disabled { background-color: transparent; } + } + + slider { + $_slider_border: $button_border; + + background-color: $button_bg; + border: 1px solid $_slider_border; + border-radius: 100%; + + transition: $button_transition; + transition-property: background, border; + + &:hover { background-color: lighten($button_bg, 5%); } + + &:active { + background-clip: border-box; + background-color: $selected_bg_color; + border-color: $selected_bg_color; + } + + &:disabled { + background-color: mix($button_bg, $bg_color, .55); + border-color: transparentize($_slider_border, .2); + } + + // Selected list-row and infobar sliders + menuitem:hover &, + row:selected &, + infobar & { + background-clip: border-box; + background-color: $selected_fg_color; + border-color: $selected_fg_color; + + &:hover { + background-color: mix($selected_fg_color, $selected_bg_color, .85); + border-color: mix($selected_fg_color, $selected_bg_color, .85); + } + + &:active { + background-color: mix($selected_fg_color, $selected_bg_color, .5); + border-color: mix($selected_fg_color, $selected_bg_color, .5); + } + + &:disabled { + background-color: mix($selected_fg_color, $selected_bg_color, .55); + border-color: mix($selected_fg_color, $selected_bg_color, .55); + } + } + } + + value { color: alpha(currentColor, .4); } + + marks { + color: alpha(currentColor, .4); + + @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom), + (bottom, bottom, top), + (top, left, right), + (bottom, right, left) { + &.#{$marks_class} { + margin-#{$marks_margin}: $_marks_distance; + margin-#{$marks_pos}: -($_marks_distance + $_marks_length); + } + } + } + + &.fine-tune marks { + @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom), + (bottom, bottom, top), + (top, left, right), + (bottom, right, left) { + &.#{$marks_class} { + margin-#{$marks_margin}: ($_marks_distance - 1px); + margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 2px); + } + } + } + + &.horizontal { + indicator { + min-height: $_marks_length; + min-width: 1px; + } + + &.fine-tune indicator { min-height: ($_marks_length - 1px); } + } + + &.vertical { + indicator { + min-height: 1px; + min-width: $_marks_length; + } + + &.fine-tune indicator { min-width: ($_marks_length - 1px); } + } + + &.color { + trough { + padding: 0; + border: 0; + background-image: none; + } + + highlight, fill { margin: 0; } + + &.horizontal { + padding: 0 0 6px 0; + + trough { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + + slider { + &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & { + margin-bottom: 0; + margin-top: 0; + } + } + } + + &.vertical { + &:dir(ltr) { + padding: 0 0 0 6px; + + trough { + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + + slider { + &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & { + margin-left: 0; + margin-right: 0; + } + } + } + + &:dir(rtl) { + padding: 0 6px 0 0; + + trough { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } + + slider { + &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & { + margin-right: 0; + margin-left: 0; + } + } + } + } + } + } +} diff --git a/Redcore-daylight/gtk-3.20/scss/widgets/_scrollbar.scss b/Redcore-daylight/gtk-3.20/scss/widgets/_scrollbar.scss new file mode 100644 index 0000000..beff309 --- /dev/null +++ b/Redcore-daylight/gtk-3.20/scss/widgets/_scrollbar.scss @@ -0,0 +1,134 @@ +/*********** + ! Scrollbar +************/ + +@include exports("scrollbar") { + scrollbar { + $_slider_min_length: 40px; + $_slider_normal_width: 7px; + $_slider_small_width: 4px; + + // disable steppers + @at-root * { + -GtkScrollbar-has-backward-stepper: false; + -GtkScrollbar-has-forward-stepper: false; + } + + background-color: $scrollbar_bg_color; + transition: 300ms ease-out; + + // scrollbar border on the content side + &.top { border-bottom: 1px solid $borders_color; } + &.bottom { border-top: 1px solid $borders_color; } + &.left { border-right: 1px solid $borders_color; } + &.right { border-left: 1px solid $borders_color; } + + &:backdrop { + background-color: $backdrop_scrollbar_bg_color; + border-color: $backdrop_borders_color; + transition: 400ms ease-in; + } + + slider { + min-width: $_slider_normal_width; + min-height: $_slider_normal_width; + border: 1px solid transparent; + border-radius: $roundness; + background-clip: padding-box; + background-color: $scrollbar_slider_color; + + &:hover { background-color: $scrollbar_slider_hover_color; } + &:hover:active { background-color: $scrollbar_slider_active_color; } + &:backdrop { background-color: $backdrop_scrollbar_slider_color; } + &:disabled { background-color: transparent; } + } + + &.horizontal slider { min-width: $_slider_min_length; } + &.vertical slider { min-height: $_slider_min_length; } + + &.fine-tune slider:active { + background-color: lighten($scrollbar_slider_active_color, 10%); + } + + &.overlay-indicator { + opacity: .8; + + &:not(.dragging):not(.hovering) { + border-color: transparent; + opacity: .4; + background-color: transparent; + + slider { + min-width: $_slider_small_width; + min-height: $_slider_small_width; + background-color: $fg_color; + border: 1px solid if($variant == 'light', $white, $black); + } + + // hide steppers + button { + min-width: $_slider_small_width; + min-height: $_slider_small_width; + border-color: transparent; + -gtk-icon-source: none; + } + + &.horizontal { + slider { min-width: $_slider_min_length; } + button { min-width: $_slider_normal_width; } + } + + &.vertical { + slider { min-height: $_slider_min_length; } + button { min-height: $_slider_normal_width; } + } + } + } + + // stepper styling + button { + min-width: $_slider_normal_width; + min-height: $_slider_normal_width; + padding: 0; + border: 0; + border-radius: 0; + border-color: $borders_color; // FIXME overwritten by global button definition + background-color: transparent; + box-shadow: none; + color: $scrollbar_slider_color; + + &:hover { color: $scrollbar_slider_hover_color; } + &:active, &:checked { color: $scrollbar_slider_active_color; } + &:backdrop { color: $backdrop_scrollbar_slider_color; } + } + + // button icons + &.vertical { + button { + &.down { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); + border-top: 1px solid $borders_color; + } + + &.up { + -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); + border-bottom: 1px solid $borders_color; + } + } + } + + &.horizontal { + button { + &.down { + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); + border-left: 1px solid $borders_color; + } + + &.up { + -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); + border-right: 1px solid $borders_color; + } + } + } + } +} diff --git a/Redcore-daylight/gtk-3.20/scss/widgets/_sidebar.scss b/Redcore-daylight/gtk-3.20/scss/widgets/_sidebar.scss new file mode 100644 index 0000000..ab068f6 --- /dev/null +++ b/Redcore-daylight/gtk-3.20/scss/widgets/_sidebar.scss @@ -0,0 +1,226 @@ +/********* + ! Sidebar +**********/ + +@include exports("sidebar") { + .sidebar { + border-style: none; + background-color: mix($bg_color, $base_color, .5); + + @at-root %sidebar_left, + &:dir(ltr), + &.left, + &.left:dir(rtl) { + border-right: 1px solid $borders_color; + border-left-style: none; + } + + @at-root %sidebar_right + &:dir(rtl), + &.right { + border-left: 1px solid $borders_color; + border-right-style: none; + } + + &:backdrop { + background-color: $backdrop_sidebar_bg_color; + border-color: $backdrop_borders_color; + transition: 200ms ease-out; + } + + .frame, frame { border-width: 0; } + + list { background-color: transparent; } + + paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; } } + } + + stacksidebar { + &.sidebar { + &:dir(ltr), + &.left, + &.left:dir(rtl) { + list { @extend %sidebar_left; } + } + + &:dir(rtl), + &.right { + list { @extend %sidebar_right; } + } + } + + row { + padding: $spacing * 2 $spacing; + + > label { + padding-left: $spacing; + padding-right: $spacing; + } + + &.needs-attention > label { + @extend %needs_attention; + + background-size: 6px 6px, 0 0; + } + } + } + + $_placesidebar_icons_opacity: .7; + + placessidebar { + > viewport.frame { border-style: none; } + + row { + // Needs overriding of the GtkListBoxRow padding + min-height: 32px; + padding: 0; + + // Using margins/padding directly in the SidebarRow + // will make the animation of the new bookmark row jump + > revealer { padding: 0 $spacing * 2; } + + &:selected { color: $selected_fg_color; } + + &:disabled { color: $insensitive_fg_color; } + + &:backdrop { + color: $backdrop_fg_color; + + &:selected { color: $backdrop_selected_fg_color; } + + &:disabled { color: $backdrop_insensitive_color; } + } + + image.sidebar-icon { + opacity: $_placesidebar_icons_opacity; // dim the device icons + + &:dir(ltr) { + padding-right: $spacing*2 + 2; + padding-left: $spacing; + } + + &:dir(rtl) { + padding-left: $spacing*2 + 2; + padding-right: $spacing; + } + } + + label.sidebar-label { + &:dir(ltr) { padding-right: 2px; } + + &:dir(rtl) { padding-left: 2px; } + } + + @at-root button.sidebar-button { + //@extend %button_basic.flat; + + //@extend %button_selected.flat; + + min-height: 20px; + min-width: 20px; + margin-top: 2px; + margin-bottom: 2px; + padding: 0; + border-radius: 100%; + -gtk-outline-radius: 100%; + + &:not(:hover):not(:active), + &:backdrop { + > image { opacity: $_placesidebar_icons_opacity; } + } + } + + // 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: image($drop_target_color); + background-clip: content-box; + } + + &.sidebar-new-bookmark-row { color: $selected_bg_color; } + + &: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; + } + } + } + } +} + + +/****** +! Paned +*******/ + +@include exports("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(shade($bg_color, .9)); + background-size: 1px 1px; + background-position: center center; + + &:selected { background-image: image($selected_bg_color); } // FIXME is this needed? + + &:backdrop { background-image: image($backdrop_borders_color); } + + &.wide { + min-width: 5px; + min-height: 5px; + background-color: $bg_color; + background-image: image(border_normal($bg_color)), image(border_normal($bg_color)); + background-size: 1px 1px, 1px 1px; + + &:backdrop { + background-color: $backdrop_bg_color; + background-image: image($backdrop_borders_color), + image($backdrop_borders_color); + } + } + } + + &.horizontal > separator { + background-repeat: repeat-y; + padding: 0 2px; + margin: 0 -2px; + + &.wide { + margin: 0; + padding: 0; + background-repeat: repeat-y, repeat-y; + background-position: left, right; + } + } + + &.vertical > separator { + background-repeat: repeat-x; + padding: 2px 0; + margin: -2px 0; + + &.wide { + margin: 0; + padding: 0; + background-repeat: repeat-x, repeat-x; + background-position: bottom, top; + } + } + + &.titlebar > separator { + background-image: image(shade($titlebar_bg_color, ($contrast + .1))); + } + } +} diff --git a/Redcore-daylight/gtk-3.20/scss/widgets/_spinner.scss b/Redcore-daylight/gtk-3.20/scss/widgets/_spinner.scss new file mode 100644 index 0000000..9184446 --- /dev/null +++ b/Redcore-daylight/gtk-3.20/scss/widgets/_spinner.scss @@ -0,0 +1,24 @@ +/******************* + ! Spinner animation +********************/ + +@include exports("spinner") { + @keyframes spin { + to { -gtk-icon-transform: rotate(1turn); } + } + + spinner { + background-image: none; + color: $selected_bg_color; + 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: .5; } + } + } +} diff --git a/Redcore-daylight/gtk-3.20/scss/widgets/_toggle.scss b/Redcore-daylight/gtk-3.20/scss/widgets/_toggle.scss new file mode 100644 index 0000000..2cdf121 --- /dev/null +++ b/Redcore-daylight/gtk-3.20/scss/widgets/_toggle.scss @@ -0,0 +1,155 @@ +/*********************** + ! Check and Radio items +************************/ + +$suffix: if($variant == "dark", "-dark", ""); + +@mixin toggle($type) { + background-image: none; + + -gtk-icon-source: url("../assets/#{$type}-unchecked#{$suffix}.svg"); + + &:disabled { -gtk-icon-source: url("../assets/#{$type}-unchecked-disabled#{$suffix}.svg"); } + + &:checked, &:active { + -gtk-icon-source: url("../assets/#{$type}-checked#{$suffix}.svg"); + + &:disabled { -gtk-icon-source: url("../assets/#{$type}-checked-disabled#{$suffix}.svg"); } + } + + &:indeterminate { + -gtk-icon-source: url("../assets/#{$type}-mixed#{$suffix}.svg"); + + &:disabled { -gtk-icon-source: url("../assets/#{$type}-mixed-disabled#{$suffix}.svg"); } + } + + menuitem &, modelbutton & { + -gtk-icon-source: url("../assets/menuitem-#{$type}-unchecked.svg"); + + &:disabled { + -gtk-icon-source: url("../assets/menuitem-#{$type}-checked-disabled.svg"); + } + + &:checked, &:active { + -gtk-icon-source: url("../assets/menuitem-#{$type}-checked.svg"); + + &:hover { -gtk-icon-source: url("../assets/menuitem-#{$type}-checked-hover.svg"); } + + &:disabled { -gtk-icon-source: url("../assets/menuitem-#{$type}-checked-disabled.svg"); } + } + + &:indeterminate { + -gtk-icon-source: url("../assets/menuitem-#{$type}-mixed.svg"); + + &:hover { -gtk-icon-source: url("../assets/menuitem-#{$type}-mixed-hover.svg"); } + + &:disabled { -gtk-icon-source: url("../assets/menuitem-#{$type}-mixed-disabled.svg"); } + } + } +} + +@include exports("checkradio") { + radio { + @include toggle("radio"); + min-width: 16px; + min-height: 16px; + margin-right: $spacing; + } + + check { + @include toggle("checkbox"); + min-width: 16px; + min-height: 16px; + margin-right: $spacing; + } + + radio:dir(rtl), check:dir(rtl) { + margin-right: 0; + margin-left: $spacing; + } + + //selection-mode + @each $s,$as in ('', '-unchecked'), + (':hover', '-unchecked'), + (':active', '-checked'), + (':backdrop', '-unchecked'), + (':checked', '-checked'), + (':checked:hover', '-checked'), + (':checked:active', '-checked'), + (':backdrop:checked', '-checked') { + .view.content-view.check#{$s}:not(list) { + -gtk-icon-shadow: none; + -gtk-icon-source: url("../assets/grid-selection#{$as}#{$suffix}.svg"); + background-color: transparent; + } + } +} + + +/******** + ! Switch +*********/ + +@include exports("switch") { + switch { + border-radius: $roundness; + padding: $spacing - 1px; + border: none; + outline: none; + transition: background-color .3s linear; + min-width: 88px; + min-height: 24px; + background-color: $switch_bg_color; + color: $switch_fg_color; + box-shadow: inset 1px -1px 0 alpha($dark_shadow, .06), inset -1px 1px 0 alpha($dark_shadow, .06); + + slider { + background-color: $switch_slider_bg_color; + transition: all 0.3s ease-in; + box-shadow: 0 1px 2px 0 alpha($dark_shadow, .07), 1px 0 2px 0 alpha($dark_shadow, .07); + border-radius: $roundness; + } + + &:checked { + background-color: $selected_bg_color; + background-image: none; + border-color: $selected_bg_color; + color: $base_color; + + slider { + background-color: $white; + box-shadow: 0 1px 3px 0 alpha($dark_shadow, .1); + } + } + + &:disabled { + background-color: $switch_disabled_bg_color; + background-image: none; + border-color: $switch_disabled_border_color; + color: $switch_disabled_fg_color; + box-shadow: none; + + slider { + background-color: $switch_disabled_slider_bg_color; + } + } + + list row:selected & { + background-color: $switch_disabled_slider_bg_color; + color: $switch_disabled_bg_color; + + slider { + background-color: mix($switch_disabled_bg_color, $base_color, .4); + } + + &:checked { + color: $selected_bg_color; + background-color: $switch_slider_bg_color; + + slider { + background-color: $selected_bg_color; + } + } + } + } +} diff --git a/Redcore-daylight/gtk-3.20/scss/widgets/_toolbar.scss b/Redcore-daylight/gtk-3.20/scss/widgets/_toolbar.scss new file mode 100644 index 0000000..0b6f30e --- /dev/null +++ b/Redcore-daylight/gtk-3.20/scss/widgets/_toolbar.scss @@ -0,0 +1,237 @@ +@import "button"; + + +/********* + ! Toolbar +**********/ + +@mixin toolbar($bg, $fg) { + @include linear-gradient($bg); + @include border($bg); + + color: $fg; + + &:disabled { + @include linear-gradient(shade($bg, .9)); + + color: mix($fg, $bg, .5); + } + + .title { + font-weight: bold; + padding: 0 ($spacing * 2); + } + + .subtitle { + font-size: smaller; + padding: 0 ($spacing * 2); + } + + button { @include button($bg, $fg); } + + .linked > button { @include linked_button($bg); } + + combobox, button { + padding: $spacing; + + &.text-button { padding: $spacing; } + + &.image-button { padding: $spacing; } + } + + separator { + &, &:disabled { + color: shade($bg, ($contrast - .2)); + border-color: currentColor; + + -GtkWidget-window-dragging: true; + } + } +} + +@mixin inline-toolbar($bg, $fg) { + padding: 1px; + border-width: 0 1px 1px; + border-style: solid; + border-color: $borders_color; + background-color: mix($borders_color, $bg_color, .7);; + background-image: none; + + &:backdrop { + border-color: $backdrop_borders_color; + background-color: $backdrop_dark_fill; + transition: 200ms ease-out; + } + + button { @include button($toolbar_bg_color, $toolbar_fg_color); } + + toolbutton, + toolbutton:backdrop { + > button.flat { @extend %linked_middle; } + + &:first-child > button.flat { @extend %linked_button:first-child; } + + &:last-child > button.flat { @extend %linked_button:last-child; } + + &:only-child > button.flat { @extend %linked_button:only-child; } + } +} + +@include exports("toolbar_extends") { + %toolbar { + padding: $spacing - 1px; + border-style: none; + + // toolbar separators + &.horizontal separator { margin: 0 ($spacing + 2px) 1px; } + + &.vertical separator { margin: ($spacing + 2px) 1px ($spacing + 2px) 0; } + } + + %headerbar { + border-width: 0 0 1px; + border-style: solid; + + // add vertical margins to common widget on the headerbar to avoid them spanning the whole height + entry, + spinbutton, + separator, + button { // Size height + margin-top: $spacing + 3px; + margin-bottom: $spacing + 3px; + } + + switch { // Size height + margin-top: $spacing + 1px; + margin-bottom: $spacing + 1px; + } + + window:not(.tiled):not(.maximized) separator:first-child + &, // tackles the paned container case + window:not(.tiled):not(.maximized) &:first-child { &:backdrop, & { border-top-left-radius: $roundness; } } + + window:not(.tiled):not(.maximized) &:last-child { &:backdrop, & { border-top-right-radius: $roundness; } } + } + + %titlebar { // Default headerbar and titlebar code. + @include toolbar($titlebar_bg_color, $titlebar_fg_color); + @include linear-gradient($titlebar_bg_color); + + border-radius: $roundness $roundness 0 0; + color: mix($titlebar_fg_color, $titlebar_bg_color, .1); + padding: 0 $spacing * 2; + min-height: 42px; + + &:backdrop { + @include linear-gradient($titlebar_bg_color); + + color: mix($titlebar_fg_color, $titlebar_bg_color, .6); + text-shadow: none; + } + + &.default-decoration { // Default titlebar (old metacity) + min-height: 24px; + box-shadow: none; + border: 0; + + button.titlebutton { + min-height: 16px; + min-width: 16px; + margin: 0; + padding: 0; + } + } + + .tiled &, + .maximized & { &:backdrop, & { border-radius: 0; } } // squared corners when the window is maximized or tiled + + .title { font-weight: bold; } + + separator.titlebutton { margin-left: $spacing; } + + button { + @include button($header_button_bg_color, $header_button_fg_color); + } + + button.titlebutton + separator.titlebutton { + margin-left: 0; + margin-right: $spacing; + } + + button.titlebutton { + border: 0; + background-image: none; + background-color: transparent; + color: mix($titlebar_fg_color, $titlebar_bg_color, .1); + box-shadow: none; + + &:hover, &:hover:focus { + background-image: none; + background-color: transparent; + color: $selected_bg_color; + box-shadow: none; + } + + &:active, &:active:hover { + background-image: none; + background-color: transparent; + color: shade($selected_bg_color, .9); + box-shadow: none; + } + + &:backdrop { + background: none; + color: mix($titlebar_fg_color, $titlebar_bg_color, .6); + -gtk-icon-shadow: none; + } + } + } +} + +@include exports("toolbar") { + toolbar { + @include toolbar($toolbar_bg_color, $toolbar_fg_color); + + @extend %toolbar; + + &.inline-toolbar { @include inline-toolbar($toolbar_bg_color, $toolbar_fg_color); } + } + + headerbar { + @extend %titlebar; + @extend %headerbar; + } + + .titlebar:not(headerbar) { + window.csd > & { + // in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases + padding: 0; + background-color: transparent; + background-image: none; + border-style: none; + border-color: transparent; + box-shadow: none; + } + + > separator { background-color: shade($titlebar_bg_color, .88); } // $borders_color + + @extend %titlebar; + } + + .background:not(.tiled):not(.maximized) .titlebar { + &:backdrop, & { + border-top-left-radius: $roundness; + border-top-right-radius: $roundness; + } + } + + // Fixed: https://github.com/numixproject/numix-gtk-theme/issues/585 + // workaround for ugly Ubuntu-related CSD patches + .background:not(.csd):not(.ssd):not(.solid-csd) headerbar { + &, &:backdrop { + &, &:not(:last-child) { + border-radius: 0; + border-top-color: transparent; + } + } + } +} diff --git a/Redcore-daylight/gtk-3.20/scss/widgets/_view.scss b/Redcore-daylight/gtk-3.20/scss/widgets/_view.scss new file mode 100644 index 0000000..ece8b41 --- /dev/null +++ b/Redcore-daylight/gtk-3.20/scss/widgets/_view.scss @@ -0,0 +1,354 @@ +/*************** + ! Generic views +****************/ + +@include exports("view") { + .view, + %view { + color: $text_color; + background-color: $base_color; + caret-color: $primary_caret_color; + -gtk-secondary-caret-color: $secondary_caret_color; + + &:backdrop { + color: $backdrop_text_color; + background-color: $backdrop_base_color; + } + + &:selected { + &:focus, & { + @extend %selected_items; + + border-radius: $roundness; + } + } + } + + .view, + textview { + text { + @extend %view; + + selection { &:focus, & { @extend %selected_items; } } + } + } + + textview border { background-color: mix($bg_color, $base_color, .5); } + + iconview { @extend .view; } +} + + +/************ +! Treeview +*************/ + +@include exports("treeview") { + .rubberband, + rubberband { + border: 1px solid darken($selected_bg_color, .1); + background-color: transparentize(darken($selected_bg_color, .1), .8); + } + + treeview entry { + &:focus { + &:dir(rtl), &:dir(ltr) { // specificity bump hack + background-color: $base_color; + transition-property: color, background; + } + } + + &.flat, & { + border-radius: 0; + background-image: none; + background-color: $base_color; + + &:focus { border-color: $selected_bg_color; } + } + } + + %column_header_button { + padding: ($spacing - 2px) ($spacing + 1px); + border-radius: 0; + background-image: none; + text-shadow: none; + border-style: none solid solid none; + border-color: $bg_color; + + &:disabled { + border-color: $bg_color; + background-image: none; + } + + &:backdrop { + border-color: $backdrop_bg_color; + border-style: none solid solid none; + color: mix($backdrop_fg_color, $backdrop_bg_color, .5); + background-image: none; + background-color: $backdrop_base_color; + + &:disabled { + border-color: $backdrop_bg_color; + background-image: none; + } + } + } + + treeview.view { + -GtkTreeView-grid-line-width: 1; + -GtkTreeView-grid-line-pattern: ''; + -GtkTreeView-tree-line-width: 1; + -GtkTreeView-tree-line-pattern: ''; + + border-left-color: mix($fg_color, $base_color, .5); // this is actually the tree lines color, + border-top-color: $bg_color; // while this is the grid lines color, better then nothing + + rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props + + &:selected { + &:focus, & { + @extend %selected_items; + + border-radius: 0; + } + + &:backdrop, & { + border-left-color: mix($selected_fg_color, $selected_bg_color, .5); + border-top-color: transparentize($fg_color, .9); // doesn't work unfortunatelly + } + } + + &:disabled { + color: $insensitive_fg_color; + + &:selected { + color: mix($selected_fg_color, $selected_bg_color, .4); + + &:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, .3); } + } + + &:backdrop { color: $backdrop_insensitive_color; } + } + + &.separator { + min-height: 2px; + color: $bg_color; + + &:backdrop { color: transparentize($bg_color, .9); } + } + + &:backdrop { + border-left-color: mix($backdrop_fg_color, $backdrop_bg_color, .5); + border-top: $backdrop_bg_color; + } + + &:drop(active) { + border-style: solid none; + border-width: 1px; + border-color: $selected_borders_color; + + &.after { border-top-style: none; } + + &.before { border-bottom-style: none; } + } + + &.expander { + -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); + color: mix($base_color, $fg_color, .7); + + &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } + + &:hover { color: $fg_color; } + + &:selected { + color: mix($selected_bg_color, $selected_fg_color, .7); + + &:hover { color: $selected_fg_color; } + + &:backdrop { color: mix($selected_bg_color, $backdrop_selected_fg_color, .7); } + } + + &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } + + &:backdrop { color: mix($backdrop_base_color, $backdrop_fg_color, .7); } + } + + &.progressbar { // progress bar in treeviews + @if $variant == light { color: $base_color; } + + border-radius: $roundness; + border: 1px solid $selected_borders_color; + background-color: $selected_bg_color; + //background-image: linear-gradient(to bottom, $selected_bg_color, darken($selected_bg_color, .1)); + //box-shadow: inset 0 1px $fg_color, + //0 1px if($variant == 'light', transparentize($black, .8), transparentize($black, .9)); + + &:selected { + &:focus, & { + @if $variant == 'light' { + color: $selected_fg_color; + box-shadow: none; + } @else { + box-shadow: inset 0 1px transparentize($white, .95); + } + + @include linear-gradient($selected_bg_color); + border-radius: $roundness; + + &:backdrop { + @if $variant == 'light' { + color: $backdrop_selected_fg_color; + border-color: $selected_borders_color; // otherwise it gets inherited by .view(?!?) + } @else { + border-color: $backdrop_base_color; + } + + background-color: mix($backdrop_base_color, $selected_bg_color, .9); + } + } + border: 1px solid mix($selected_bg_color, $selected_fg_color, .2); + } + + &:disabled { + @include linear-gradient($bg_color); + border-color: border_insensitive($bg_color); + } + + &:backdrop { + @if $variant == 'light' { + color: $backdrop_base_color; + } @else { + border-color: $backdrop_base_color; + } + + background-image: none; + box-shadow: none; + } + } + + &.trough { // progress bar trough in treeviews + background-color: transparentize($fg_color, .9); + border-radius: $roundness; + + &:selected { + &:focus, & { + background-color: if($variant == 'light', transparentize($selected_fg_color, .7), darken($selected_bg_color, .1)); + + @if $variant == 'light' { + border-width: 1px 0; + border-style: solid; + border-color: $selected_bg_color; + } + border-radius: $roundness; + } + } + } + + header { + button { + $_column_header_color: mix($fg_color, $base_color, .5); + + @extend %column_header_button; + + color: $_column_header_color; + background-color: $base_color; + font-weight: bold; + text-shadow: none; + box-shadow: none; + + &:hover { + @extend %column_header_button; + + color: mix($_column_header_color, $fg_color, .5); + box-shadow: none; + transition: none; //I shouldn't need this + } + + &:active { + @extend %column_header_button; + + color: $fg_color; + 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; + transition: none; + background-image: none; + background-color: $selected_bg_color; + color: $base_color; + border-radius: 0; + border-style: none; + box-shadow: inset 0 0 0 1px $base_color; + text-shadow: none; + } + } + + acceleditor > label { background-color: $selected_bg_color; } + } +} + + +/*********** + ! Separator +************/ + +@include exports("separator") { + separator { // vbox and hbox separators + background: transparentize($black, .9); + min-width: 1px; + min-height: 1px; + } +} + + +/********** + ! Frames * +***********/ + +@include exports("frame") { + frame > border, .frame { + border: 1px solid $borders_color; + + &.flat { border-style: none; } + + &:backdrop { border-color: $backdrop_borders_color; } + } + + /* avoid double borders when a viewport is packed into a GtkScrolledWindow */ + scrolledwindow viewport.frame { border: 0; } +} + + +/*************** + ! Places view * +****************/ + +@include exports("placesview") { + placesview { + .server-list-button > image { + transition: 200ms cubic-bezier(.25, .46, .45, .94); + -gtk-icon-transform: rotate(0turn); + } + + .server-list-button:checked > image { + transition: 200ms cubic-bezier(.25, .46, .45, .94); + -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; + } + } +} + diff --git a/Redcore-daylight/gtk-3.20/scss/widgets/_window.scss b/Redcore-daylight/gtk-3.20/scss/widgets/_window.scss new file mode 100644 index 0000000..c58a1b3 --- /dev/null +++ b/Redcore-daylight/gtk-3.20/scss/widgets/_window.scss @@ -0,0 +1,63 @@ +/************** + ! Window frame +***************/ + +@include exports("window") { + decoration { + $_wm_border: if($variant == 'light', transparentize($black, .77), transparentize($borders_color, .1)); + + border-radius: $roundness $roundness 0 0; + // lamefun trick to get rounded borders regardless of CSD use + //border-width: 0; + + //box-shadow: 0 3px 9px 1px transparentize($black, .3), 0 0 0 1px $wm_border_focused; //doing borders with box-shadow + /* this is used for the resize cursor area */ + //margin: $spacing * 3; + + border-width: $spacing % 2; + border-style: solid; + //border-color: $wm_border_focused; + //@TODO: + border-color: $wm_border_unfocused; + + + &:backdrop { + //box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px transparentize($black, .6), 0 0 0 1px $wm_border_unfocused; + border-color: $wm_border_unfocused; + transition: 200ms ease-out; + } + + .maximized &, .fullscreen &, .tiled & { border-radius: 0; } + + .popup & { box-shadow: none; } + + // this needs to be transparent + // see bug #722563 + // server-side decorations as used by mutter + // Fixed gtk-3.18 Unity bug (https://github.com/numixproject/numix-gtk-theme/issues/270) + .ssd & { box-shadow: 0 0 0 1px $wm_border_focused; } //just doing borders, wm draws actual shadows + + .solid-csd & { + border-radius: 0; + //margin: 1px; + //background-color: $bg_color; + // Unity/compiz regression: Issue: https://github.com/numixproject/numix-gtk-theme/issues/206 + box-shadow: none; + } + + .csd.popup & { + border-radius: 0; + box-shadow: 0 1px 2px transparentize($black, .8), 0 0 0 1px transparentize($_wm_border, .1); + } + + tooltip.csd & { + border-radius: $roundness; + box-shadow: none; + } + + messagedialog.csd & { + border-radius: $roundness; + box-shadow: 0 1px 2px transparentize($black, .8), 0 0 0 1px transparentize($_wm_border, .1); + } + } +} |