diff options
Diffstat (limited to 'Redcore-nighttime/gtk-3.20/scss')
40 files changed, 5570 insertions, 0 deletions
diff --git a/Redcore-nighttime/gtk-3.20/scss/_colors.scss b/Redcore-nighttime/gtk-3.20/scss/_colors.scss new file mode 100644 index 0000000..8593ba9 --- /dev/null +++ b/Redcore-nighttime/gtk-3.20/scss/_colors.scss @@ -0,0 +1,101 @@ +@import "global"; + +/* dark color scheme */ +@define-color dark_bg_color #{"" + $dark_bg_color}; +@define-color dark_fg_color #{"" + $dark_fg_color}; + +/* colormap actually used by the theme, to be overridden in other css files */ +@define-color theme_bg_color #{"" + $bg_color}; +@define-color theme_fg_color #{"" + $fg_color}; +@define-color theme_base_color #{"" + $base_color}; +@define-color theme_text_color #{"" + $text_color}; +@define-color theme_selected_bg_color #{"" + $selected_bg_color}; +@define-color theme_selected_fg_color #{"" + $selected_fg_color}; +@define-color theme_tooltip_bg_color #{"" + $tooltip_bg_color}; +@define-color theme_tooltip_fg_color #{"" + $tooltip_fg_color}; + +/* shadow effects */ +@define-color light_shadow #{"" + $light_shadow}; +@define-color dark_shadow #{"" + $dark_shadow}; + +/* misc colors used by gtk+ */ +@define-color info_fg_color #{"" + $info_fg_color}; +@define-color info_bg_color #{"" + $info_bg_color}; +@define-color warning_fg_color #{"" + $warning_fg_color}; +@define-color warning_bg_color #{"" + $warning_bg_color}; +@define-color question_fg_color #{"" + $question_fg_color}; +@define-color question_bg_color #{"" + $question_bg_color}; +@define-color error_fg_color #{"" + $error_fg_color}; +@define-color error_bg_color #{"" + $error_bg_color}; +@define-color link_color #{"" + $link_color}; +@define-color success_color #{"" + $success_color}; +@define-color warning_color #{"" + $warning_color}; +@define-color error_color #{"" + $error_color}; + +/* widget colors */ +@define-color titlebar_bg_color @dark_bg_color; +@define-color titlebar_fg_color @dark_fg_color; +@define-color menubar_bg_color @dark_bg_color; +@define-color menubar_fg_color @dark_fg_color; +@define-color toolbar_bg_color @theme_bg_color; +@define-color toolbar_fg_color @theme_fg_color; +@define-color menu_bg_color @dark_bg_color; +@define-color menu_fg_color @dark_fg_color; +@define-color panel_bg_color @dark_bg_color; +@define-color panel_fg_color @dark_fg_color; +@define-color borders #{"" + $borders_color}; +@define-color unfocused_borders #{"" + $backdrop_borders_color}; + +@define-color button_bg_color #{"" + $button_bg_color}; +@define-color button_fg_color #{"" + $button_fg_color}; +@define-color header_button_bg_color #{"" + $header_button_bg_color}; +@define-color header_button_fg_color #{"" + $header_button_fg_color}; + +@define-color insensitive_bg_color #{"" + $insensitive_bg_color}; +@define-color insensitive_fg_color #{"" + $insensitive_fg_color}; + +/* osd */ +@define-color osd_base #{"" + $osd_base}; +@define-color osd_bg #{"" + $osd_bg}; +@define-color osd_fg #{"" + $osd_fg}; +@define-color osd_insensitive_bg_color #{"" + $osd_insensitive_bg_color}; +@define-color osd_insensitive_fg_color #{"" + $osd_insensitive_fg_color}; +@define-color osd_borders_color #{"" + $osd_borders_color}; + +/* lightdm greeter colors */ +@define-color lightdm_bg_color #{"" + $lightdm_bg_color}; +@define-color lightdm_fg_color #{"" + $lightdm_fg_color}; + +/* widget text/foreground color on backdrop windows */ +@define-color theme_unfocused_fg_color #{"" + $backdrop_fg_color}; + +/* text color for entries, views and content in general on backdrop windows */ +@define-color theme_unfocused_text_color #{"" + $text_color}; + +/* widget base background color on backdrop windows */ +@define-color theme_unfocused_bg_color #{"" + $backdrop_bg_color}; + +/* text widgets and the like base background color on backdrop windows */ +@define-color theme_unfocused_base_color #{"" + $backdrop_base_color}; + +/* base background color of selections on backdrop windows */ +@define-color theme_unfocused_selected_bg_color #{"" + $selected_bg_color}; + +/* text/foreground color of selections on backdrop windows */ +@define-color theme_unfocused_selected_fg_color #{"" + $selected_fg_color}; + +/* insensitive color on backdrop windows*/ +@define-color unfocused_insensitive_color #{"" + $backdrop_insensitive_color}; + +/* window manager colors */ +@define-color wm_bg #{"" + $wm_bg}; +@define-color wm_border_focused #{"" + $wm_border_focused}; +@define-color wm_border_unfocused #{"" + $wm_border_unfocused}; +@define-color wm_title_focused #{"" + $wm_title_focused}; +@define-color wm_title_unfocused #{"" + $wm_title_unfocused}; +@define-color wm_icons_focused #{"" + $wm_icons_focused}; +@define-color wm_icons_focused_prelight #{"" + $wm_icons_focused_prelight}; +@define-color wm_icons_focused_pressed #{"" + $wm_icons_unfocused_pressed}; +@define-color wm_icons_unfocused #{"" + $wm_icons_unfocused}; +@define-color wm_icons_unfocused_prelight #{"" + $wm_icons_unfocused_prelight}; +@define-color wm_icons_unfocused_pressed #{"" + $wm_icons_unfocused_pressed}; diff --git a/Redcore-nighttime/gtk-3.20/scss/_functions.scss b/Redcore-nighttime/gtk-3.20/scss/_functions.scss new file mode 100644 index 0000000..8eb18c6 --- /dev/null +++ b/Redcore-nighttime/gtk-3.20/scss/_functions.scss @@ -0,0 +1,95 @@ +$modules: () !default; + +@mixin exports($name) { + @if (not index($modules, $name)) { + $modules: append($modules, $name) !global; + + @content; + } +} + +@function alpha($color, $amount) { + @if type-of($color) == "color" { + @return fade-out($color, (1 - $amount)); + } @else { + @return unquote("alpha(#{$color},#{$amount})"); + } +} + +@function shade($color, $amount) { + @if type-of($color) == "color" { + @if ($amount > 1) { + @return lighten($color, ($amount - 1) * lightness($color)) + } @else { + @return darken($color, (1 - $amount) * lightness($color)) + } + } @else { + @return unquote("shade(#{$color},#{$amount})"); + } +} + +@function mix($color1, $color2, $amount) { + @return unquote("mix(#{$color1},#{$color2},#{$amount})"); +} + +@function border_normal($color) { + @return shade($color, $contrast); +} + +@function border_focus($color) { + @return if($variant == 'light', mix($selected_bg_color, $color, .3), darken($selected_bg_color, 20%)); +} + +@function border_active($color) { + @return shade($color, ($contrast - .1)); +} + +@function border_insensitive($color) { + @return shade($color, ($contrast + .05)); +} + +@mixin linear-gradient($color, $direction: to bottom) { + @if $gradient == 0 { + background-color: $color; + background-image: none; + } @else { + $amount: $gradient / 2; + + background-color: $color; + background-image: linear-gradient($direction, + shade($color, (1 + $amount)), + shade($color, (1 - $amount)) + ); + } +} + +@mixin border($color) { + border-color: border_normal($color); + + &:focus, &:hover { border-color: border_focus($color); } + + &:active, &:active:hover, + &:active:focus, &:active:hover:focus, + &:checked, &:checked:hover, + &:checked:focus, &:checked:hover:focus { border-color: border_active($color); } + + &:disabled { border-color: border_insensitive($color); } + + &:active:disabled, &:checked:disabled { border-color: border_normal($color); } +} + +@function _text_shadow_color($tc: $fg_color, $bg: $bg_color) { + // + // calculate the color of text shadows + // + // $tc is the text color + // $bg is the background color + // + $_lbg: lightness($bg) / 100%; + + @if lightness($tc) < 50% { + @return transparentize(white, 1 - $_lbg / ($_lbg * 1.3)); + } @else { + @return transparentize(black, $_lbg * .8); + } +} diff --git a/Redcore-nighttime/gtk-3.20/scss/_global.scss b/Redcore-nighttime/gtk-3.20/scss/_global.scss new file mode 100644 index 0000000..2e35a4e --- /dev/null +++ b/Redcore-nighttime/gtk-3.20/scss/_global.scss @@ -0,0 +1,150 @@ +// scss-lint:disable ColorVariable + +@import "functions"; + +// default color scheme +$bg_color: if($variant == "dark", #dedede, #2d2d2d); +$fg_color: if($variant == "dark", #2d2d2d, #dedede); +$base_color: if($variant == "dark", #dedede, #2d2d2d); +$text_color: if($variant == "dark", #2d2d2d, #dedede); +$button_bg_color: if($variant == "dark", #dedede, #2d2d2d); +$button_fg_color: if($variant == "dark", #2d2d2d, #dedede); +$header_button_bg_color: #2d2d2d; +$header_button_fg_color: #dedede; +$selected_bg_color: #990000; +$selected_fg_color: #dedede; +$tooltip_bg_color: #2d2d2d; +$tooltip_fg_color: #dedede; + +/*$selected_borders_color: if($variant == 'light', darken($selected_bg_color, 30%), darken($selected_bg_color, 20%));*/ +/*$borders_color: if($variant == 'light', shade($bg_color, .85), shade($bg_color, .88));*/ +$selected_borders_color: if($variant == 'light', mix($selected_bg_color, $fg_color, .3), darken($selected_bg_color, 20%)); +$borders_color: if($variant == 'light', mix($bg_color, $fg_color, .08), shade($bg_color, .88)); +$borders_edge: if($variant == 'light', transparentize(white, 0.2), transparentize($fg_color, 0.93)); + +// dark colors +$dark_bg_color: #2d2d2d; +$dark_fg_color: #dedede; + +// shadows +/*$dark_shadow: #000;*/ +/*$light_shadow: #fff;*/ +$dark_shadow: shade($fg_color, .2); +$light_shadow: lighten($bg_color, .4); + +// caret +$primary_caret_color: #dedede; +$secondary_caret_color: #dedede; +$caret_aspect_ratio: 0.04; + +// white and black +$black: #000; +$white: #fff; + +/*$button_border_strength: if(lightness($bg) > 50, 0, .1);*/ +/*$button_shadow_strength: if(lightness($bg) > 50, 0, .1);*/ +$button_border_strength: 0.1; +$button_border: alpha($button_fg_color, .06 + $button_border_strength); +$entry_border: $borders_color; + +$scrollbar_bg_color: if($variant == 'light', darken($bg_color, 5%), mix($base_color, $bg_color, .4)); +$scrollbar_slider_color: mix($bg_color, $fg_color, .5); +$scrollbar_slider_hover_color: mix($bg_color, $fg_color, .7); +$scrollbar_slider_active_color: if($variant == 'light', darken($selected_bg_color, 5%), lighten($selected_bg_color, 10%)); + +$switch_disabled_bg_color: mix($bg_color, $base_color, .5); +$switch_disabled_border_color: $bg_color; +$switch_disabled_fg_color: $bg_color; +$switch_disabled_slider_bg_color: $bg_color; +$switch_bg_color: mix($bg_color, $base_color, .3); +$switch_fg_color: $text_color; +$switch_slider_bg_color: mix($text_color, $bg_color, .5); + +// @TODO: replace to xrdb values: +// misc colors used by gtk+ +$info_fg_color: #fff; +$info_bg_color: #03a9f4; +$warning_fg_color: #fff; +$warning_bg_color: #ef6c00; +$question_fg_color: #fff; +$question_bg_color: #673ab7; +$error_fg_color: #fff; +$error_bg_color: #f44336; +$link_color: #3f51b5; +$success_color: #4caf50; +$warning_color: #ef6c00; +$error_color: #f44336; + +$toolbar_bg_color: $bg_color; +$toolbar_fg_color: $fg_color; + +$titlebar_bg_color: $dark_bg_color; +$titlebar_fg_color: $dark_fg_color; + +$menu_bg_color: $dark_bg_color; +$menu_fg_color: $dark_fg_color; + +$menubar_bg_color: $dark_bg_color; +$menubar_fg_color: $dark_fg_color; + +$panel_bg_color: $dark_bg_color; +$panel_fg_color: $dark_fg_color; + +$osd_base: $dark_bg_color; +$osd_text_color: $dark_fg_color; +$osd_bg: alpha($osd_base, .8); +$osd_fg: $osd_text_color; +$osd_insensitive_bg_color: mix($osd_fg, $osd_bg, .5); +$osd_insensitive_fg_color: mix($osd_fg, $osd_base, .6); +$osd_borders_color: shade($osd_bg, .85); + +$lightdm_bg_color: $dark_bg_color; +$lightdm_fg_color: $dark_fg_color; + +$wm_bg: $titlebar_bg_color; +$wm_border_focused: #990000; +$wm_border_unfocused: #2d2d2d; +$wm_title_focused: mix($titlebar_fg_color, $titlebar_bg_color, .1); +$wm_title_unfocused: mix($titlebar_fg_color, $titlebar_bg_color, .4); +$wm_icons_focused: mix($titlebar_fg_color, $titlebar_bg_color, .1); +$wm_icons_focused_prelight: $selected_bg_color; +$wm_icons_focused_pressed: shade($selected_bg_color, .8); +$wm_icons_unfocused: mix($titlebar_fg_color, $titlebar_bg_color, .4); +$wm_icons_unfocused_prelight: $selected_bg_color; +$wm_icons_unfocused_pressed: shade($selected_bg_color, .8); + +//insensitive state derived colors +$insensitive_fg_color: mix($fg_color, $bg_color, .5); +$insensitive_bg_color: mix($bg_color, $base_color, .6); +$insensitive_borders_color: $borders_color; + +//colors for the backdrop state, derived from the main colors. +$backdrop_base_color: if($variant == 'light', darken($base_color, .01), lighten($base_color, .01)); +$backdrop_text_color: mix($backdrop_base_color, $text_color, .8); +$backdrop_bg_color: $bg_color; +$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, .5); +$backdrop_insensitive_color: if($variant == 'light', darken($backdrop_bg_color, 15%), lighten($backdrop_bg_color, 15%)); +$backdrop_selected_bg_color: $selected_bg_color; +$backdrop_selected_fg_color: mix($selected_bg_color, $selected_fg_color, .66); +$backdrop_borders_color: mix($bg_color, $borders_color, .9); +$backdrop_dark_fill: mix($backdrop_bg_color, $backdrop_borders_color, .35); +$backdrop_sidebar_bg_color: mix($backdrop_bg_color, $backdrop_base_color, .5); + +$backdrop_osd_base: $osd_base; +$backdrop_osd_bg: $osd_bg; +$backdrop_osd_fg: mix($osd_fg, $backdrop_osd_base, .5); + +$backdrop_scrollbar_bg_color: darken($backdrop_bg_color, 3%); +$backdrop_scrollbar_slider_color: mix($backdrop_fg_color, $backdrop_bg_color, .4); + +$backdrop_menu_color: if($variant == 'light', $backdrop_base_color, mix($backdrop_bg_color, $backdrop_base_color, .2)); + +$drop_target_color: #4e9a06; + +// widget styles +$_roundness: 0; +$_spacing: 3; +$roundness: 0px; +$spacing: 3px; +$gradient: 0.0; +$contrast: .8; diff --git a/Redcore-nighttime/gtk-3.20/scss/_widgets.scss b/Redcore-nighttime/gtk-3.20/scss/_widgets.scss new file mode 100644 index 0000000..719463b --- /dev/null +++ b/Redcore-nighttime/gtk-3.20/scss/_widgets.scss @@ -0,0 +1,41 @@ +@import "functions"; +@import "global"; +@import "colors"; + + +@import "widgets/base"; +@import "widgets/button"; +@import "widgets/entry"; +@import "widgets/actionbar"; +@import "widgets/calendar"; +@import "widgets/choosers"; +@import "widgets/grid"; +@import "widgets/infobar"; +@import "widgets/menu"; +@import "widgets/misc"; +@import "widgets/notebook"; +@import "widgets/osd"; +@import "widgets/overshoot"; +@import "widgets/progress"; +@import "widgets/scrollbar"; +@import "widgets/sidebar"; +@import "widgets/spinner"; +@import "widgets/toggle"; +@import "widgets/toolbar"; +@import "widgets/view"; +@import "widgets/window"; + +@import "apps/mate-applications"; +@import "apps/cinnamon-applications"; +@import "apps/gnome-applications"; +@import "apps/unity-greeter"; +@import "apps/gedit"; +@import "apps/nautilus"; +@import "apps/nemo"; +@import "apps/panel"; +@import "apps/synaptic"; +@import "apps/xfce"; +@import "apps/unity"; +@import "apps/lightdm"; +@import "apps/gnome-terminal"; +@import "apps/budgie"; diff --git a/Redcore-nighttime/gtk-3.20/scss/apps/_budgie.scss b/Redcore-nighttime/gtk-3.20/scss/apps/_budgie.scss new file mode 100644 index 0000000..3b5ed0a --- /dev/null +++ b/Redcore-nighttime/gtk-3.20/scss/apps/_budgie.scss @@ -0,0 +1,27 @@ +/****************** + ! Budgie Desktop * +*******************/ + +@include exports("budgie-desktop") { + .budgie-container { + background-color: transparent; + } + + .raven { + background-color: transparentize($bg_color, .07); + + .raven-header { + background-color: $bg_color; + border: solid $borders_color; + border-width: 1px 0; + } + + .raven-background { + background-color: transparentize($bg_color, .07); + } + } + + .raven-mpris { + background-color: transparentize($bg_color, .3); + } +} diff --git a/Redcore-nighttime/gtk-3.20/scss/apps/_cinnamon-applications.scss b/Redcore-nighttime/gtk-3.20/scss/apps/_cinnamon-applications.scss new file mode 100644 index 0000000..28511c7 --- /dev/null +++ b/Redcore-nighttime/gtk-3.20/scss/apps/_cinnamon-applications.scss @@ -0,0 +1,19 @@ +/********************* + ! Cinnamon Settings * +**********************/ + +@include exports("cinnamon-settings") { + .cs-category-view { + &, .view { + &, &:backdrop { + background-color: transparent; + } + + &:selected { + &:focus, & { + @extend %selected_items; + } + } + } + } +} diff --git a/Redcore-nighttime/gtk-3.20/scss/apps/_gedit.scss b/Redcore-nighttime/gtk-3.20/scss/apps/_gedit.scss new file mode 100644 index 0000000..c153930 --- /dev/null +++ b/Redcore-nighttime/gtk-3.20/scss/apps/_gedit.scss @@ -0,0 +1,143 @@ +/********* + ! Gedit * +**********/ + +@include exports("gedit") { + GeditWindow .pane-separator { + border-width: 0 1px 0 0; + border-style: solid; + + &, &:hover { + border-color: shade($bg_color, ($contrast + .1)); + background-color: $bg_color; + } + } + + .gedit-document-panel { + background-color: $bg_color; + color: mix($fg_color, $bg_color, .1); + + list row { + padding: $spacing; + + button { + padding: 1px; + border-radius: $roundness; + border-style: solid; + border-color: transparent; + border-width: 1px; + background-color: transparent; + background-image: none; + color: transparent; + -gtk-icon-shadow: none; + } + } + + .prelight-row button { + border-color: alpha($black, .1); + color: alpha($white, .8); + + &:active { + border-color: alpha($black, .2); + background-color: alpha($black, .08); + color: $white; + } + } + + list row, .prelight-row { + button:hover { + border-color: alpha($black, .1); + color: $white; + } + } + } + + .gedit-document-panel-group-row { + &, &:hover { + border-top: 1px solid shade($bg_color, ($contrast + .1)); + background-color: $bg_color; + } + } + + .gedit-document-panel-document-row { + &:hover { background-color: shade($bg_color, 1.05); } + + &:selected { + &, &:hover { @extend %selected; } + } + } + + .gedit-document-panel-dragged-row { + border: 1px solid alpha($black, .1); + background-color: alpha($black, .5); + color: $white; + } + + .gedit-document-panel-placeholder-row { + border: 0; + background-color: alpha($black, .08); + transition: all 200ms ease-in; + } + + //Ignore: Global double border separator. + //statusbar { border-top: 1px solid border_normal($bg_color); } + + statusbar GeditSmallButton, GeditStatusMenuButton { + text-shadow: none; + + button { + border-style: solid; + border-width: 0 1px; + border-color: transparent; + border-radius: 0; + padding: 1px 6px 2px 4px; + + &:hover, &:active, &:active:hover { border-color: border_normal($bg_color); } + + &:active { + background-color: shade($bg_color, .95); + color: $fg_color; + } + } + } + + GeditViewFrame .gedit-search-slider { + padding: $spacing; + border-radius: 0 0 $roundness $roundness; + border-width: 0 1px 1px; + border-style: solid; + border-color: border_normal($base_color); + background-color: $base_color; + + .not-found { + background-color: $error_bg_color; + background-image: none; + color: $error_fg_color; + + &:selected { @extend %selected; } + } + } + + GeditFileBrowserWidget .toolbar { + padding: $spacing / 2; + border-top: 0; + background-color: $bg_color; + background-image: none; + } + + .gedit-search-entry-occurrences-tag { + margin: $spacing / 2; + padding: $spacing / 2; + color: mix($text_color, $base_color, .5); + } + + .gedit-bottom-panel-paned, + .gedit-side-panel-paned, + paned.titlebar { + margin-right: 0; + } + + .gedit-bottom-panel-paned notebook { + border-top: none; + } +} diff --git a/Redcore-nighttime/gtk-3.20/scss/apps/_gnome-applications.scss b/Redcore-nighttime/gtk-3.20/scss/apps/_gnome-applications.scss new file mode 100644 index 0000000..dc20144 --- /dev/null +++ b/Redcore-nighttime/gtk-3.20/scss/apps/_gnome-applications.scss @@ -0,0 +1,59 @@ +/**************** + ! Gnome clocks * +*****************/ + +@include exports("gnome-clocks") { + .clocks-analog-frame { + &.trough { color: mix($fg_color, $bg_color, .85); } + + &.progress { color: mix($bg_color, $selected_bg_color, .5); } + + &.progress-fast { color: shade($selected_bg_color, .7); } + } +} + + +/***************** + ! Gnome Builder * +******************/ + +@include exports("gnome-builder") { + workbench.csd > stack.titlebar:not(headerbar) { + padding: 0; + background: none; + border: 0; + box-shadow: none; + + headerbar { + &, &:first-child, &:last-child { border-radius: $roundness $roundness 0 0; } + } + } +} + + +/************************ + ! Unity-Control-Center * +*************************/ + +@include exports("unity-control-center") { + // Fixed: https://github.com/numixproject/numix-gtk-theme/issues/634 + .background:not(.csd):not(.solid-csd) > box.vertical > notebook.frame { + // hide unwanted frames + border: 0 none transparent; + + > stack > scrolledwindow > viewport > box.vertical > frame > box.vertical { + // reset $base_color; + iconview.view { + &, &:backdrop { + background-color: transparent; + } + + &:selected { + &:focus, & { + @extend %selected_items; + } + } + } + } + } +} diff --git a/Redcore-nighttime/gtk-3.20/scss/apps/_gnome-terminal.scss b/Redcore-nighttime/gtk-3.20/scss/apps/_gnome-terminal.scss new file mode 100644 index 0000000..c23893c --- /dev/null +++ b/Redcore-nighttime/gtk-3.20/scss/apps/_gnome-terminal.scss @@ -0,0 +1,37 @@ +/********************** + ! Genome Terminal * +***********************/ + +@include exports("gnome-terminal") { + //noinspection ScssLintInspection,ScssLintInspection + VteTerminal { + background-color: $osd_base; + color: $osd_fg; + } + + terminal-window { + junction, scrollbar trough { + background-color: $osd_base; + border-color: border_normal($osd_base); + + //&:backdrop { + // background-color: shade($backdrop_osd_bg, .9); + // border-color: border_normal(shade($backdrop_osd_bg, .9)); + //} + } + + scrollbar.vertical { + slider { + background-color: mix($osd_base, $osd_fg, .2); + + &:hover { background-color: mix($osd_base, $osd_fg, .3); } + + &:hover:active { background-color: $selected_bg_color; } + + //&:backdrop { background-color: mix($backdrop_osd_fg, $backdrop_osd_bg, .4); } + + &:disabled { background-color: transparent; } + } + } + } +} diff --git a/Redcore-nighttime/gtk-3.20/scss/apps/_lightdm.scss b/Redcore-nighttime/gtk-3.20/scss/apps/_lightdm.scss new file mode 100644 index 0000000..76d189c --- /dev/null +++ b/Redcore-nighttime/gtk-3.20/scss/apps/_lightdm.scss @@ -0,0 +1,117 @@ +/*********************** + ! LightDM GTK Greeter * + ***********************/ + +@include exports("lightdm") { + #panel_window { + background-color: $lightdm_bg_color; + background-image: none; + color: $white; + font-weight: bold; + text-shadow: 0 1px alpha($black, .5); + -gtk-icon-shadow: 0 1px alpha($black, .5); + + menubar { + padding-left: $spacing; + + &, > menuitem { + background-color: transparent; + background-image: none; + border-style: none; + color: $white; + text-shadow: 0 1px alpha($black, .5); + -gtk-icon-shadow: 0 1px alpha($black, .5); + + &:hover { + background-color: alpha($white, .2); + background-image: none; + color: $white; + } + + *:hover { color: $white; } + + &:disabled { color: alpha($white, .7); } + } + + menu > menuitem { font-weight: normal; } + } + } + + #content_frame { padding-bottom: $spacing * 3; } + + #login_window, #shutdown_dialog, #restart_dialog { + border-style: none; + border-radius: $roundness; + background-color: $lightdm_bg_color; + color: $lightdm_fg_color; + + /* draw border using box-shadow */ + box-shadow: inset 1px 0 mix(shade($lightdm_bg_color, .7), $lightdm_fg_color, .21), + inset -1px 0 mix(shade($lightdm_bg_color, .7), $lightdm_fg_color, .21), + inset 0 1px mix(shade($lightdm_bg_color, .7), $lightdm_fg_color, .21), + inset 0 -1px mix(shade($lightdm_bg_color, .7), $lightdm_fg_color, .21); + + @extend %panelbutton; + } + + #login_window { + menu { border-radius: 0; } + + button { @include button($lightdm_bg_color, $lightdm_fg_color); } + + entry { @include entry($lightdm_bg_color, $lightdm_fg_color); } + } + + #user_combobox { + color: $lightdm_fg_color; + font-size: 18px; + + menu { font-weight: normal; } + + arrow { color: mix($lightdm_fg_color, $lightdm_bg_color, .5); } + } + + #user_image { + border-radius: $roundness; + + /* draw border using box-shadow */ + box-shadow: inset 1px 0 shade($lightdm_bg_color, .7), + inset -1px 0 shade($lightdm_bg_color, .7), + inset 0 1px shade($lightdm_bg_color, .7), + inset 0 -1px shade($lightdm_bg_color, .7); + } + + #user_image_border { + border-radius: $roundness; + background-color: shade($lightdm_bg_color, .9); + background-image: none; + box-shadow: inset 1px 0 alpha($dark_shadow, .07), + inset 0 1px alpha($dark_shadow, .08), + inset -1px 0 alpha($dark_shadow, .07), + inset 0 -1px alpha($dark_shadow, .05); + } + + #buttonbox_frame { + padding-top: $spacing * 2; + padding-bottom: 0; + border-style: none; + border-bottom-left-radius: $roundness; + border-bottom-right-radius: $roundness; + background-color: transparent; + background-image: none; + box-shadow: none; + } + + /* shutdown button */ + #shutdown_button { + button { @include button($error_bg_color, $error_fg_color); } + } + + /* restart button */ + #restart_button { + button { @include button($warning_bg_color, $warning_fg_color); } + } + + /* password warning */ + #greeter_infobar { font-weight: bold; } +} diff --git a/Redcore-nighttime/gtk-3.20/scss/apps/_mate-applications.scss b/Redcore-nighttime/gtk-3.20/scss/apps/_mate-applications.scss new file mode 100644 index 0000000..87e76a0 --- /dev/null +++ b/Redcore-nighttime/gtk-3.20/scss/apps/_mate-applications.scss @@ -0,0 +1,86 @@ +@import "panel"; + +/**************** + ! MATE styles * +*****************/ + +@include exports("mate-applications") { + .mate-panel-menu-bar { + @extend %panel; + + border: 0; + padding: 0; + text-shadow: none; + } + + #PanelApplet label, + .mate-panel-menu-bar menubar > menuitem { + color: $panel_fg_color; + } + + PanelSeparator, MatePanelAppletFrameDBus { + border-width: 0; + color: transparent; + background-image: -gtk-scaled(url("../assets/pane-handle.png"), + url("../assets/pane-handle@2.png")); + background-color: transparent; + background-repeat: no-repeat; + background-position: left; + } + + #PanelApplet button, + #PanelApplet button.flat, + #PanelApplet button.toggle + #PanelApplet button.flat.toggle { + background-image: none; + background-color: transparent; + border-color: transparent; + border-style: solid; + border-radius: 0; + border-width: 1px; + color: $panel_fg_color; + text-shadow: none; + box-shadow: none; + padding: 2px; + } + + #PanelApplet button:hover:active, + #PanelApplet button:checked, + #PanelApplet button:checked:hover, + #PanelApplet button.flat:hover:active, + #PanelApplet button.flat:checked, + #PanelApplet button.flat:checked:hover, + #PanelApplet button.toggle:hover:active, + #PanelApplet button.toggle:checked, + #PanelApplet button.toggle:checked:hover, + #PanelApplet button.flat.toggle:hover:active, + #PanelApplet button.flat.toggle:checked, + #PanelApplet button.flat.toggle:checked:hover { + background-image: none; + background-color: darker($panel_bg_color); + border-color: transparent; + border-radius: 0; + border-width: 1px; + color: lighter($panel_fg_color); + text-shadow: none; + padding: 2px; + } + + #PanelApplet button:hover, + #PanelApplet button.flat:hover, + #PanelApplet button.toggle:hover, + #PanelApplet button.flat.toggle:hover { + background-image: none; + background-color: shade($panel_bg_color, 1.3); + border-color: transparent; + border-radius: 0; + border-width: 1px; + color: $selected_fg_color; + text-shadow: none; + padding: 2px; + } + + .mate-panel-menu-bar menubar > menuitem { + padding: 3px 7px; + } +} diff --git a/Redcore-nighttime/gtk-3.20/scss/apps/_nautilus.scss b/Redcore-nighttime/gtk-3.20/scss/apps/_nautilus.scss new file mode 100644 index 0000000..1b51e55 --- /dev/null +++ b/Redcore-nighttime/gtk-3.20/scss/apps/_nautilus.scss @@ -0,0 +1,92 @@ +/************ + ! Nautilus * +*************/ + +@include exports("nautilus") { + .nautilus-desktop, .nautilus-desktop * { + &, &:backdrop { + color: $white; + text-shadow: 1px 1px $black; + + &:active { color: $fg_color; } + + &:selected { color: $selected_fg_color; } + + &:active, &:hover, &:selected { text-shadow: none; } + } + } + + .nautilus-window { + toolbar { + border-width: 0 0 1px; + border-style: solid; + border-color: border_normal($toolbar_bg_color); + } + + .sidebar { + border: 0; + + frame { border: 0; } + } + + notebook { + background-color: $base_color; + border: 0; + + frame { border: 0; } + } + + .searchbar-container { + margin-top: -1px; + + searchbar { + padding-top: $spacing - 3px; + padding-bottom: $spacing - 2px; + border-bottom: 1px solid $borders_color; + } + } + } + + button.nautilus-circular-button.image-button { + @extend button.circular; + } + + $disk_space_unknown: alpha($fg_color, .5); + $disk_space_used: alpha($selected_bg_color, .8); + $disk_space_free: shade($bg_color, .95); + + .disk-space-display { + border-style: solid; + border-width: 1px; + + &.unknown { + background-color: $disk_space_unknown; + border-color: shade($disk_space_unknown, .9); + } + + &.used { + background-color: $disk_space_used; + border-color: shade($disk_space_used, .9); + } + + &.free { + background-color: $disk_space_free; + border-color: shade($disk_space_free, .9); + } + } + + // Batch renaming dialog + .conflict-row.activatable { + &, &:active { + color: $error_fg_color; + background-color: $error_color; + } + + &:hover { background-color: shade($error_color, 1.1); } + + &:selected { + color: $selected_fg_color; + background-color: $selected_bg_color; + } + } +} diff --git a/Redcore-nighttime/gtk-3.20/scss/apps/_nemo.scss b/Redcore-nighttime/gtk-3.20/scss/apps/_nemo.scss new file mode 100644 index 0000000..e2fe671 --- /dev/null +++ b/Redcore-nighttime/gtk-3.20/scss/apps/_nemo.scss @@ -0,0 +1,174 @@ +/******** + ! Nemo * +*********/ + +@include exports("nemo") { + .nemo-desktop, .nemo-desktop * { + &, &:backdrop { + color: $white; + text-shadow: 1px 1px $black; + + &:active { color: $fg_color; } + + &:selected { color: $selected_fg_color; } + + &:active, &:hover, &:selected { text-shadow: none; } + } + } + + .nemo-window { + toolbar { + border-width: 0 0 1px; + border-style: solid; + border-color: border_normal($toolbar_bg_color); + + button { + @include button($bg_color, $fg_color); + } + + .linked > button { @include linked_button($bg_color); } + + separator, separator:disabled { + color: shade($bg_color, ($contrast + .1)); + border-color: currentColor; + -GtkWidget-window-dragging: true; + } + + &.primary-toolbar button.image-button { + padding: 0 ($spacing + 5px); + } + + combobox, button { + padding: $spacing; + + &.text-button { padding: $spacing; } + + &.image-button { padding: $spacing; } + } + + /* Path Bar */ + toolitem stack { + margin-left: 15px; + + widget button { + @include linked_button($toolbar_bg_color); + -NemoPathbarButton-border-radius: $roundness; + } + } + } // END toolbar + + /* Status Bar */ + grid { + > widget:last-child { + button { + min-height: 16px; + min-width: 16px; + padding: ($spacing - 1px) (($spacing * 2) - 2px); + } + + button:first-child { + margin-left: 20px; + } + + button:first-child + button { + margin-right: 15px; + } + + button:first-child + button + separator + button { + margin-left: 15px; + } + + > box > scale { + margin-right: 12px; + } + + statusbar { + border: 0; + } + } + } // END Status Bar + + .sidebar { + .frame { + border: 0; + } + + image { + padding-left: $spacing; + padding-right: $spacing; + } + + .nemo-places-sidebar { + &, & .view { + background-color: mix($bg_color, $base_color, .5); + } + + .view { + -NemoPlacesTreeView-disk-full-bg-color: shade($bg_color, .8); + -NemoPlacesTreeView-disk-full-fg-color: $selected_bg_color; + -NemoPlacesTreeView-disk-full-bar-width: 2px; + -NemoPlacesTreeView-disk-full-bar-radius: 1px; + -NemoPlacesTreeView-disk-full-bottom-padding: 0; + -NemoPlacesTreeView-disk-full-max-length: 75px; + + &:selected { + -NemoPlacesTreeView-disk-full-bg-color: $selected_fg_color; + -NemoPlacesTreeView-disk-full-fg-color: shade($selected_bg_color, 1.2); + + &:focus, & { + @extend %selected_items; + } + } + } + } + + /* Nemo Query Editor (File Search Bar) */ + + separator + box .primary-toolbar { + @include linear-gradient(shade($bg_color, .98)); // Searchbar color (_actionbar.scss) + + padding-top: $spacing - 3px; + padding-bottom: $spacing - 3px; + border-bottom: 1px solid $borders_color; + + button:nth-child(2) { + border-right: none; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + button:nth-child(3) { + margin-left: -6px; + border-left: none; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + button.flat { + $bg: $bg_color; + $fg: $fg_color; + $border_strength: if(lightness($bg) > 50, 0, .1); + $shadow_strength: if(lightness($bg) > 50, 0, .1); + + $button_bg: if(hue($bg) == 0deg, shade($bg, 1.2), $bg); + + @extend %button; + @include linear-gradient($button_bg); + @include border(rgba(0, 0, 0, .12 + $border_strength)); + + color: $fg; + box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength); + padding: 5px 6px; + } + } // END Nemo Query Editor + } // END .sidebar + + notebook { + background-color: $base_color; + border-width: 0; + + tabs { + border: 0; + } + } + } +} diff --git a/Redcore-nighttime/gtk-3.20/scss/apps/_panel.scss b/Redcore-nighttime/gtk-3.20/scss/apps/_panel.scss new file mode 100644 index 0000000..814a450 --- /dev/null +++ b/Redcore-nighttime/gtk-3.20/scss/apps/_panel.scss @@ -0,0 +1,91 @@ +/*********************** + ! Fallback mode panel * +************************/ + +@include exports("panel") { + %panel { + @include linear-gradient($panel_bg_color); + + color: $panel_fg_color; + } + + %panellabel { + font-weight: normal; + color: $panel_fg_color; + } + + %panelbutton { + border-width: 0 1px; + border-radius: 0; + border-color: transparent; + background-color: transparent; + background-image: none; + color: $panel_fg_color; + + &:hover { + @include linear-gradient(mix($panel_bg_color, $panel_fg_color, .11)); + + border-color: mix($panel_bg_color, $panel_fg_color, .11); + color: shade($panel_fg_color, 1.08); + } + + &:active, &:checked { + @include linear-gradient(mix($panel_bg_color, $panel_fg_color, .21), to top); + + border-color: mix($panel_bg_color, $panel_fg_color, .21); + color: shade($panel_fg_color, 1.08); + + &:hover { + @include linear-gradient(mix($panel_bg_color, $panel_fg_color, .31), to top); + + border-color: mix($panel_bg_color, $panel_fg_color, .31); + } + } + } + + panel-plug, + panel-toplevel.background { + @extend %panel; + + padding: 0; + } + + .gp-text-color { + color: $black; + } + + #clock-applet-button { &, &:backdrop { @extend %panelbutton; } } + + panel-applet { + border: 0; + + button { + &, &:backdrop { @extend %panelbutton; } + } + } + + clock-box, + panel-applet > menubar, + panel-toplevel .gnome-panel-menu-bar { + &, &:backdrop { + @extend %panel; + + menuitem { + @extend %panel; + + border: 0; + + label { @extend %panellabel; } + } + } + } + + gp-calendar-window, + #tasklist-button, + #clock-applet-button, + #showdesktop-button { + label { @extend %panellabel; } + } + + wnck-pager, wnck-tasklist { @extend %panel; } +} diff --git a/Redcore-nighttime/gtk-3.20/scss/apps/_synaptic.scss b/Redcore-nighttime/gtk-3.20/scss/apps/_synaptic.scss new file mode 100644 index 0000000..c19b78e --- /dev/null +++ b/Redcore-nighttime/gtk-3.20/scss/apps/_synaptic.scss @@ -0,0 +1,15 @@ +/************ + ! Synaptic * +*************/ + +@include exports("synaptic") { + GtkWindow > GtkVBox > .dock { + &, > GtkHBox > GtkToolbar { + @include linear-gradient($toolbar-bg-color); + + padding: $spacing; + border: 0; + color: $toolbar_fg_color; + } + } +} diff --git a/Redcore-nighttime/gtk-3.20/scss/apps/_unity-greeter.scss b/Redcore-nighttime/gtk-3.20/scss/apps/_unity-greeter.scss new file mode 100644 index 0000000..70f5c3a --- /dev/null +++ b/Redcore-nighttime/gtk-3.20/scss/apps/_unity-greeter.scss @@ -0,0 +1,105 @@ +/*********************** + ! Unity Greeter * + ***********************/ + +@include exports("unity-greeter") { + @keyframes dashentry_spinner { + to { -gtk-icon-transform: rotate(1turn); } + } + + %lightdm-button { + background-image: none; + background-color: fade-out($black, .7); + border-color: fade-out($white, .1); + border-radius: ($roundness * 2) + 1px; + padding: $spacing; + color: $white; + } + + .lightdm { + &.menu { + background-image: none; + background-color: fade-out($black, .4); + border-color: fade-out($white, .8); + border-radius: $roundness * 2; + padding: 1px; + + color: $white; + + .menuitem { *, &.check:active, &.radio:active { color: $white; } } + } + + &.menubar { *, &.menuitem { padding: $spacing - 3px; } } + + &.option-button { + padding: $spacing; + background: none; + border: 0; + } + + &.toggle-button { + background: none; + border-width: 0; + + &.selected { + background-color: fade-out($black, .7); + border-color: fade-out($white, .7); + border-width: 1px; + + &:hover { background-color: fade-out($white, .7); } + } + } + + &.button { + @extend %lightdm-button; + + &:hover { + background-color: fade-out($white, .7); + border-color: fade-out($white, .4); + text-shadow: none; + } + } + + &.entry, &.button:active, &.button:active:focus, &.button:focus { + background-image: none; + background-color: fade-out($black, .7); + border-color: fade-out($white, .4); + border-radius: ($roundness * 2) + 1px; + padding: $spacing + 2px; + color: $white; + text-shadow: none; + } + + &.entry { + &:hover, &:active, &:active:focus { + background-image: none; + border-image: none; + } + + &:active { + -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); + animation: dashentry_spinner 1s infinite linear; + } + + &:focus { + border-color: fade-out($white, .4); + border-width: 1px; + border-style: solid; + color: $white; + } + + &:selected { background-color: fade-out($white, .8); } + } + } + + .lightdm-combo { + &.combobox-entry .button, .cell, .button, .entry { @extend %lightdm-button; } + + &.menu { + background-color: shade($dark_bg_color, 1.08); + border-radius: 0; + padding: 0; + color: $white; + } + } +} diff --git a/Redcore-nighttime/gtk-3.20/scss/apps/_unity.scss b/Redcore-nighttime/gtk-3.20/scss/apps/_unity.scss new file mode 100644 index 0000000..54477cb --- /dev/null +++ b/Redcore-nighttime/gtk-3.20/scss/apps/_unity.scss @@ -0,0 +1,80 @@ +@import "panel"; + +/**************** + ! Unity styles * +*****************/ + +@include exports("unity") { + UnityDecoration { + -UnityDecoration-extents: 24px 1px 1px 1px; + -UnityDecoration-input-extents: 10px; + + -UnityDecoration-shadow-offset-x: 1px; + -UnityDecoration-shadow-offset-y: 1px; + -UnityDecoration-active-shadow-color: rgba(0, 0, 0, .7); + -UnityDecoration-active-shadow-radius: 8px; + -UnityDecoration-inactive-shadow-color: rgba(0, 0, 0, .5); + -UnityDecoration-inactive-shadow-radius: 5px; + + -UnityDecoration-glow-size: 10px; + -UnityDecoration-glow-color: $selected_bg_color; + + -UnityDecoration-title-indent: 10px; + -UnityDecoration-title-fade: 35px; + -UnityDecoration-title-alignment: 0; + + + .top { + border: 1px solid $wm_border_focused; + border-bottom: 0; + border-radius: $roundness $roundness 0 0; + padding: 1px ($spacing + 3px) 0 ($spacing + 3px); + background-color: $titlebar_bg_color; + color: mix($titlebar_fg_color, $titlebar_bg_color, .1); + text-shadow: none; + + // Fixed: https://github.com/numixproject/numix-gtk-theme/issues/632 + // for L.I.M's selected menuitem + &:hover { + border-radius: 0; + border-color: mix($panel_bg_color, $panel_fg_color, .21); + background-color: mix($panel_bg_color, $panel_fg_color, .21); + background-image: none; + color: shade($panel_fg_color, 1.08); + } + + &:backdrop { + border: 1px solid $wm_border_unfocused; + color: mix($titlebar_fg_color, $titlebar_bg_color, .4); + } + } + + .left, .right, .bottom { + background-color: $titlebar_bg_color; + + &:backdrop { background-color: mix(shade($titlebar_bg_color, .7), $titlebar_fg_color, .21); } + } + } + + UnityPanelWidget, .unity-panel { + @extend %panel; + + border: 0; + } + + .unity-panel { + &.menuitem, .menuitem { + border-width: 0 1px; + color: $panel_fg_color; + + &:hover, *:hover { + border-color: mix($panel_bg_color, $panel_fg_color, .21); + background-color: mix($panel_bg_color, $panel_fg_color, .21); + background-image: none; + color: shade($panel_fg_color, 1.08); + } + } + } + + SheetStyleDialog.unity-force-quit { background-color: $bg_color; } +} diff --git a/Redcore-nighttime/gtk-3.20/scss/apps/_xfce.scss b/Redcore-nighttime/gtk-3.20/scss/apps/_xfce.scss new file mode 100644 index 0000000..4300474 --- /dev/null +++ b/Redcore-nighttime/gtk-3.20/scss/apps/_xfce.scss @@ -0,0 +1,30 @@ +@import "panel"; + +/*************** + ! Xfce styles * +****************/ + +@include exports("xfce") { + .XfceHeading { + margin: 0; + padding: 0; + border: 0; + background-image: none; + background-color: $base_color; + color: $text_color; + } + + .xfce4-panel { + @extend %panel; + + font: inherit; + + button { @extend %panelbutton; } + + menu { + -gtk-icon-effect: none; + + text-shadow: none; + } + } +} diff --git a/Redcore-nighttime/gtk-3.20/scss/gtk.scss b/Redcore-nighttime/gtk-3.20/scss/gtk.scss new file mode 100644 index 0000000..4455669 --- /dev/null +++ b/Redcore-nighttime/gtk-3.20/scss/gtk.scss @@ -0,0 +1,3 @@ +$variant: "light"; + +@import "widgets"; diff --git a/Redcore-nighttime/gtk-3.20/scss/widgets/_actionbar.scss b/Redcore-nighttime/gtk-3.20/scss/widgets/_actionbar.scss new file mode 100644 index 0000000..3c6aa02 --- /dev/null +++ b/Redcore-nighttime/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-nighttime/gtk-3.20/scss/widgets/_base.scss b/Redcore-nighttime/gtk-3.20/scss/widgets/_base.scss new file mode 100644 index 0000000..52a78e2 --- /dev/null +++ b/Redcore-nighttime/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-nighttime/gtk-3.20/scss/widgets/_button.scss b/Redcore-nighttime/gtk-3.20/scss/widgets/_button.scss new file mode 100644 index 0000000..263c037 --- /dev/null +++ b/Redcore-nighttime/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-nighttime/gtk-3.20/scss/widgets/_calendar.scss b/Redcore-nighttime/gtk-3.20/scss/widgets/_calendar.scss new file mode 100644 index 0000000..c2243b9 --- /dev/null +++ b/Redcore-nighttime/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-nighttime/gtk-3.20/scss/widgets/_choosers.scss b/Redcore-nighttime/gtk-3.20/scss/widgets/_choosers.scss new file mode 100644 index 0000000..6741bd8 --- /dev/null +++ b/Redcore-nighttime/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-nighttime/gtk-3.20/scss/widgets/_entry.scss b/Redcore-nighttime/gtk-3.20/scss/widgets/_entry.scss new file mode 100644 index 0000000..1b65044 --- /dev/null +++ b/Redcore-nighttime/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-nighttime/gtk-3.20/scss/widgets/_grid.scss b/Redcore-nighttime/gtk-3.20/scss/widgets/_grid.scss new file mode 100644 index 0000000..7a16dca --- /dev/null +++ b/Redcore-nighttime/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-nighttime/gtk-3.20/scss/widgets/_infobar.scss b/Redcore-nighttime/gtk-3.20/scss/widgets/_infobar.scss new file mode 100644 index 0000000..bf82db2 --- /dev/null +++ b/Redcore-nighttime/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-nighttime/gtk-3.20/scss/widgets/_menu.scss b/Redcore-nighttime/gtk-3.20/scss/widgets/_menu.scss new file mode 100644 index 0000000..1a7f248 --- /dev/null +++ b/Redcore-nighttime/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-nighttime/gtk-3.20/scss/widgets/_misc.scss b/Redcore-nighttime/gtk-3.20/scss/widgets/_misc.scss new file mode 100644 index 0000000..da1c7dc --- /dev/null +++ b/Redcore-nighttime/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-nighttime/gtk-3.20/scss/widgets/_notebook.scss b/Redcore-nighttime/gtk-3.20/scss/widgets/_notebook.scss new file mode 100644 index 0000000..92fa86b --- /dev/null +++ b/Redcore-nighttime/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-nighttime/gtk-3.20/scss/widgets/_osd.scss b/Redcore-nighttime/gtk-3.20/scss/widgets/_osd.scss new file mode 100644 index 0000000..8a4d8d2 --- /dev/null +++ b/Redcore-nighttime/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-nighttime/gtk-3.20/scss/widgets/_overshoot.scss b/Redcore-nighttime/gtk-3.20/scss/widgets/_overshoot.scss new file mode 100644 index 0000000..a46fc07 --- /dev/null +++ b/Redcore-nighttime/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-nighttime/gtk-3.20/scss/widgets/_progress.scss b/Redcore-nighttime/gtk-3.20/scss/widgets/_progress.scss new file mode 100644 index 0000000..de095ef --- /dev/null +++ b/Redcore-nighttime/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-nighttime/gtk-3.20/scss/widgets/_scrollbar.scss b/Redcore-nighttime/gtk-3.20/scss/widgets/_scrollbar.scss new file mode 100644 index 0000000..beff309 --- /dev/null +++ b/Redcore-nighttime/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-nighttime/gtk-3.20/scss/widgets/_sidebar.scss b/Redcore-nighttime/gtk-3.20/scss/widgets/_sidebar.scss new file mode 100644 index 0000000..ab068f6 --- /dev/null +++ b/Redcore-nighttime/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-nighttime/gtk-3.20/scss/widgets/_spinner.scss b/Redcore-nighttime/gtk-3.20/scss/widgets/_spinner.scss new file mode 100644 index 0000000..9184446 --- /dev/null +++ b/Redcore-nighttime/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-nighttime/gtk-3.20/scss/widgets/_toggle.scss b/Redcore-nighttime/gtk-3.20/scss/widgets/_toggle.scss new file mode 100644 index 0000000..2cdf121 --- /dev/null +++ b/Redcore-nighttime/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-nighttime/gtk-3.20/scss/widgets/_toolbar.scss b/Redcore-nighttime/gtk-3.20/scss/widgets/_toolbar.scss new file mode 100644 index 0000000..0b6f30e --- /dev/null +++ b/Redcore-nighttime/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-nighttime/gtk-3.20/scss/widgets/_view.scss b/Redcore-nighttime/gtk-3.20/scss/widgets/_view.scss new file mode 100644 index 0000000..ece8b41 --- /dev/null +++ b/Redcore-nighttime/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-nighttime/gtk-3.20/scss/widgets/_window.scss b/Redcore-nighttime/gtk-3.20/scss/widgets/_window.scss new file mode 100644 index 0000000..c58a1b3 --- /dev/null +++ b/Redcore-nighttime/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); + } + } +} |