diff options
Diffstat (limited to 'Redcore-nighttime/gtk-3.0/scss/widgets')
21 files changed, 2762 insertions, 0 deletions
diff --git a/Redcore-nighttime/gtk-3.0/scss/widgets/_actionbar.scss b/Redcore-nighttime/gtk-3.0/scss/widgets/_actionbar.scss new file mode 100644 index 0000000..749f549 --- /dev/null +++ b/Redcore-nighttime/gtk-3.0/scss/widgets/_actionbar.scss @@ -0,0 +1,106 @@ +@import "button"; +@import "toolbar"; + +/************** + ! Action-bar * +***************/ + +@include exports("actionbar") { + .action-bar { + @include linear-gradient($bg_color); + + padding: $spacing; + border-width: 1px 0 0; + border-style: solid; + border-color: border_normal($bg_color); + color: $fg_color; + + .button { + &.text-button { padding: $spacing - 1px; } + + &.image-button { padding: $spacing + 1px; } + } + + .title { + font: bold; + padding: 0 ($spacing * 2); + } + + .subtitle { + font: smaller; + padding: 0 ($spacing * 2); + } + } +} + + +/*************** + ! Search bars * +****************/ + +@include exports("searchbar") { + .search-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; + + .button.close-button { padding: $spacing; } + } +} + + +/****************** + ! Action buttons * +*******************/ + +@include exports("actionbuttons") { + $types: ( + suggested: $success_color, + destructive: $error-color + ); + + @each $type, $color in $types { + .#{$type}-action.button { + @include button($color, $selected_fg_color); + } + } +} + + +/****************** +* selection mode * +******************/ + +@include exports("selectionmode") { + .selection-mode { + &.header-bar, &.toolbar { + @include toolbar($selected_bg_color, $selected_fg_color); + + .button { + @include button($selected_bg_color, $selected_fg_color); + + &.suggested-action { @extend .suggested-action.button; } + } + + .selection-menu.button { + border: 0; + background-color: transparent; + background-image: none; + color: shade($selected_bg_color, $contrast); + + &:hover { color: shade($selected_bg_color, ($contrast - .1)); } + + &:active { color: shade($selected_bg_color, ($contrast - .05)); } + } + + .dim-label, { + &, .selection-menu.button & { color: shade($selected_bg_color, ($contrast - .1)); } + } + } + + &.toolbar { padding: $spacing; } + } +} diff --git a/Redcore-nighttime/gtk-3.0/scss/widgets/_base.scss b/Redcore-nighttime/gtk-3.0/scss/widgets/_base.scss new file mode 100644 index 0000000..730bbec --- /dev/null +++ b/Redcore-nighttime/gtk-3.0/scss/widgets/_base.scss @@ -0,0 +1,104 @@ +/************** + ! GTK settings +***************/ + +* { + -GtkArrow-arrow-scaling: .5; + -GtkExpander-expander-size: 8; + -GtkStatusbar-shadow-type: none; + -GtkToolItemGroup-expander-size: 8; + -GtkWindow-resize-grip-height: 0; + -GtkWindow-resize-grip-width: 0; + -WnckTasklist-fade-overlay-rect: 0; + + -GtkWidget-cursor-color: $primary_caret_color; + -GtkWidget-secondary-cursor-color: $secondary_caret_color; + -GtkWidget-cursor-aspect-ratio: $caret_aspect_ratio; + + outline-color: alpha($selected_bg_color, .5); + outline-style: dashed; + outline-width: 1px; + outline-offset: -1px; + outline-radius: $roundness; +} + + +/************* + ! Base states + *************/ + +%selected { + &, &:focus { + background-color: $selected_bg_color; + color: $selected_fg_color; + } +} + +* { + /* hyperlinks */ + -GtkHTML-link-color: $link_color; + -GtkIMHtml-hyperlink-color: $link_color; + -GtkWidget-link-color: $link_color; + -GtkWidget-visited-link-color: $link_color; + + &:selected { @extend %selected; } + + &:insensitive, + &:insensitive:insensitive { color: mix($fg_color, $bg_color, .5); } + + &:insensitive { -gtk-image-effect: dim; } + + &:hover { -gtk-image-effect: highlight; } + + &:link, &:visited { color: $link_color; } +} + +.background { + background-color: $bg_color; + color: $fg_color; + + &:backdrop { + text-shadow: none; + 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; + } + + &:insensitive { + background-color: shade(shade($bg_color, .95), 1.05); + color: mix($fg_color, $bg_color, .5); + } + + &:selected { @extend %selected; } +} + +GtkImage, GtkLabel, GtkBox, GtkGrid { + &, &:insensitive { background-color: transparent; } +} + +GtkLabel { + &.separator { + @extend .dim-label; + + color: $fg_color; + } + + &:selected { @extend %selected; } + + &:insensitive { color: mix($fg_color, $bg_color, .5); } +} diff --git a/Redcore-nighttime/gtk-3.0/scss/widgets/_button.scss b/Redcore-nighttime/gtk-3.0/scss/widgets/_button.scss new file mode 100644 index 0000000..6d26c9f --- /dev/null +++ b/Redcore-nighttime/gtk-3.0/scss/widgets/_button.scss @@ -0,0 +1,376 @@ +/********* + ! Buttons +**********/ + +@include exports("button_extends") { + %button { + padding: $spacing ($spacing + 2px); + border-width: 1px; + border-style: solid; + border-radius: $roundness; + transition: 150ms ease; + outline-color: transparent; + + -GtkWidget-focus-padding: 1; + -GtkWidget-focus-line-width: 0; + + &:focus, &:hover, &:active { transition: 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_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; + 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); + } + + &:insensitive { 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); } + + &:insensitive:last-child, &:insensitive:only-child, + &:active:insensitive:last-child, &:active:insensitive:only-child, + &:checked:insensitive:last-child, &:checked:insensitive: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($bg) > 50, 0, .1); + $shadow_strength: if(lightness($bg) > 50, 0, .1); + + /*$button_bg: if(hue($bg) == 0deg, shade($bg, 1.2), $bg);*/ + $button_bg: $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); + + &.flat { + border-color: alpha($button_bg, 0); + background-color: alpha($button_bg, 0); + background-image: none; + box-shadow: none; + } + + &, &.flat { + &:focus, &:hover { + @include linear-gradient(shade($button_bg, 1.2)); + @include border(rgba(0, 0, 0, .2 + $border_strength)); + + box-shadow: 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength); + } + + &:active, &:checked { + @include linear-gradient(shade($button_bg, .7), to top); + + color: $selected_fg_color; + box-shadow: inset 1px 0 alpha($dark_shadow, .06), + inset 0 1px alpha($dark_shadow, .07), + inset -1px 0 alpha($dark_shadow, .06), + inset 0 -1px alpha($dark_shadow, .05); + + &:focus, &:hover { + @include linear-gradient(shade($button_bg, .65), to top); + + color: $selected_fg_color; + } + } + + &:focus, &:hover { color: $fg; } + + &:active:insensitive, &:checked:insensitive { + @include linear-gradient(shade($button_bg, .9)); + + color: $fg; + box-shadow: none; + } + + &:insensitive:insensitive { + @if (lightness($button_bg) > 50) { + @include linear-gradient(shade($button_bg, .95)); + } @else { + @include linear-gradient(alpha($button_bg, .3)); + } + + color: mix($button_bg, $fg, .5); + box-shadow: none; + } + } + + // Fixed: https://github.com/numixproject/numix-gtk-theme/issues/572 + // Webkitgtk workaround start + &:active { color: $fg; } + // Webkitgtk workaround end + + &.flat { + &:insensitive:insensitive { + background-color: transparent; + background-image: none; + color: mix($bg, $fg, .5); + box-shadow: none; + } + } + + &.separator, .separator { + border: 1px solid currentColor; + color: shade($button_bg, ($contrast + .1)); + + &:insensitive { color: shade($button_bg, .85); } + } +} + +@include exports("button") { + * { + -GtkButton-child-displacement-x: 0; + -GtkButton-child-displacement-y: 0; + -GtkButton-default-border: 0; + -GtkButton-image-spacing: 0; + -GtkButton-inner-border: 1; + -GtkButton-interior-focus: true; + -GtkButtonBox-child-min-height: 24; + -GtkButtonBox-child-internal-pad-y: 1; + -GtkToolButton-icon-spacing: 6; + } + + %close_button { + border: 1px solid transparent; + background-color: transparent; + background-image: none; + box-shadow: none; + + &:focus, &:hover { + border: 1px solid alpha($black, .3); + background-color: alpha($white, .2); + background-image: none; + box-shadow: none; + } + + &:active, &:checked, &:active:hover, &:checked:hover { + border: 1px solid alpha($black, .3); + background-color: alpha($black, .1); + background-image: none; + box-shadow: none; + } + } + + .button { + @include button($button_bg_color, $button_fg_color); + + &.default { @include button($selected_bg_color, $selected_fg_color); } + + &.linked, .linked & { @include linked_button($button_bg_color); } + + .spinbutton & { + color: mix($text_color, $base_color, .4); + padding: $spacing ($spacing * 2); + border: 0; + border-radius: 0; + border-style: none; + background-color: transparent; + background-image: none; + box-shadow: inset 1px 0 shade($base_color, .9); + + &:insensitive { + color: mix($text_color, $base_color, .7); + box-shadow: inset 1px 0 shade($base_color, .85); + } + + &:active, &:checked, &:hover { color: $text_color; } + + &:first-child { + border-radius: $roundness 0 0 $roundness; + box-shadow: none; + } + + &:last-child { border-radius: 0 $roundness $roundness 0; } + + &:dir(rtl) { box-shadow: inset -1px 0 shade($base_color, .9); } + } + + .spinbutton.vertical & { + border: 1px solid shade($bg_color, .8); + border-radius: $roundness; + background-color: shade($bg_color, 1.08); + background-image: none; + color: $fg_color; + box-shadow: none; + + &:hover { + border-color: shade($bg_color, .7); + background-color: shade($bg_color, 1.1); + background-image: none; + } + + &:active, &:checked { + border-color: shade($bg_color, .8); + background-color: shade($bg_color, .95); + background-image: none; + } + + &:active:hover, &:checked:hover { + border-color: shade($bg_color, .7); + } + + &:focus, &:hover:focus, &:active:focus, &:active:hover:focus { border-color: shade($bg_color, .7); } + + &:insensitive { + border-color: shade($bg_color, .85); + background-color: shade($bg_color, .9); + background-image: none; + } + + &:first-child { + border-width: 1px; + border-bottom-width: 0; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } + + &:last-child { + border-width: 1px; + border-top-width: 0; + border-top-left-radius: 0; + border-top-right-radius: 0; + } + } + + .spinbutton.vertical.entry { + border-width: 1px; + border-style: solid; + border-radius: 0; + } + } +} + + +/****************** +! ComboBoxes * +*******************/ + +@include exports("combobox") { + GtkComboBox { + > .button { + padding: ($spacing - 2px) ($spacing + 1px); + + -GtkComboBox-arrow-scaling: .5; + -GtkComboBox-shadow-type: none; + } + + &.combobox-entry { + .entry, .button { @extend %linked_button; } + } + + .separator { + /* always disable separators */ + -GtkWidget-wide-separators: true; + -GtkWidget-horizontal-separator: 0; + -GtkWidget-vertical-separator: 0; + + border-style: none; + } + } + + .linked > GtkComboBox { + > .button { + // 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); } + } + + &:first-child > .button { @extend %linked_button:first-child; } + + &:last-child > .button { @extend %linked_button:last-child; } + + &:only-child > .button { @extend %linked_button:only-child; } + } +} diff --git a/Redcore-nighttime/gtk-3.0/scss/widgets/_calendar.scss b/Redcore-nighttime/gtk-3.0/scss/widgets/_calendar.scss new file mode 100644 index 0000000..5c7ca32 --- /dev/null +++ b/Redcore-nighttime/gtk-3.0/scss/widgets/_calendar.scss @@ -0,0 +1,38 @@ +/********** + ! Calendar +***********/ + +@include exports("calendar") { + GtkCalendar { + padding: 1px 3px; + outline-offset: -1px; + + &:inconsistent { color: mix($fg_color, $bg_color, .5); } + + &.view, &.highlight, &.header, &.button { + &, &:focus, &:hover, &:insensitive { + background-color: transparent; + background-image: none; + border-width: 0; + border-radius: 0; + } + } + + &.button { + &, &:focus, &:hover, &:insensitive { + color: $white; + border-width: 0; + box-shadow: none; + } + } + + &.highlight { color: $selected_bg_color; } + } + + /* gnome-calendar */ + .calendar-view { + background-color: $base_color; + color: $text_color; + } +} + diff --git a/Redcore-nighttime/gtk-3.0/scss/widgets/_choosers.scss b/Redcore-nighttime/gtk-3.0/scss/widgets/_choosers.scss new file mode 100644 index 0000000..ecd50dd --- /dev/null +++ b/Redcore-nighttime/gtk-3.0/scss/widgets/_choosers.scss @@ -0,0 +1,125 @@ +/*************** + ! Color chooser +****************/ + +@include exports("colorchooser") { + GtkColorSwatch { + &, &:selected { + border: 1px solid alpha($black, .1); + border-radius: $roundness; + background-color: transparent; + background-clip: border-box; + + &:hover { border-color: alpha($black, .3); } + } + + &.color-light:selected:hover, &.color-dark:selected:hover { background-image: none; } + + &.left, &:first-child { + border-top-left-radius: $roundness; + border-bottom-left-radius: $roundness; + } + + &.right, &:last-child { + border-top-right-radius: $roundness; + border-bottom-right-radius: $roundness; + } + + &:only-child { border-radius: $roundness; } + + &.top { + border-top-left-radius: $roundness; + border-top-right-radius: $roundness; + } + + &.bottom { + border-bottom-left-radius: $roundness; + border-bottom-right-radius: $roundness; + } + + GtkColorEditor & { + border-radius: $roundness; + + &.color-dark:hover, &.color-light:hover { + background-image: none; + border-color: alpha($black, .3); + } + } + } + + GtkColorChooserWidget #add-color-button { + background-clip: padding-box; + border-color: alpha($black, .1); + background-color: shade($bg_color, .95); + color: $fg_color; + + &:hover { + border-color: alpha($black, .3); + background-color: shade($bg_color, .9); + color: $fg_color; + } + } + + .color-active-badge { + &, &:selected { + border-width: 2px; + border-style: solid; + background-color: transparent; + } + + &.color-light { + &, &:hover { + border-color: alpha($black, .3); + color: alpha($black, .3); + } + } + + &.color-dark { + &, &:hover { + border-color: alpha($white, .3); + color: alpha($white, .3); + } + } + } + + GtkColorButton.button { padding: $spacing; } +} + + +/*********************** +! Font and file choosers +************************/ + +@include exports("miscchoosers") { + GtkFontButton, GtkFileChooserButton { + .separator { + /* always disable separators */ + -GtkWidget-wide-separators: true; + -GtkWidget-horizontal-separator: 0; + -GtkWidget-vertical-separator: 0; + } + + GtkLabel:last-child { color: alpha(currentColor, .7); } + + GtkImage:last-child { color: alpha(currentColor, .7); } + } + + GtkFileChooser { + .pane-separator { + &, &:hover { + border-width: 0 1px 0 0; + border-style: solid; + border-color: currentColor; + background-color: $bg_color; + color: shade($bg_color, ($contrast + .1)); + } + } + + /* for fallback when header bar not used */ + .dialog-action-box { + border-width: 1px 0 0; + border-style: solid; + border-color: shade($bg_color, .7); + } + } +} diff --git a/Redcore-nighttime/gtk-3.0/scss/widgets/_entry.scss b/Redcore-nighttime/gtk-3.0/scss/widgets/_entry.scss new file mode 100644 index 0000000..e8d7562 --- /dev/null +++ b/Redcore-nighttime/gtk-3.0/scss/widgets/_entry.scss @@ -0,0 +1,84 @@ +/********* + ! 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; + } + + &:last-child { + border-width: 1px; + border-radius: $roundness; + border-left-width: 0; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } + + &:only-child { + border-width: 1px; + border-radius: $roundness; + } +} + +%entry { + padding: ($spacing - 1px) $spacing; + border-width: 1px; + border-style: solid; + border-radius: $roundness; + transition: border 150ms ease; + box-shadow: inset 1px 1px alpha($dark_shadow, .06), + inset -1px 0 alpha($dark_shadow, .06); + + &:focus, &:hover, &:active { transition: none; } + + &:selected, &:selected:focus { + background-color: $selected_bg_color; + color: $selected_fg_color; + } + + &:insensitive { box-shadow: none; } + + &.progressbar { + @include linear-gradient($selected_bg_color); + + border-width: 0; + border-radius: $roundness; + color: $selected_fg_color; + } + + &.image.left { padding-right: $spacing; } +} + +@mixin entry($bg, $fg) { + @extend %entry; + @include linear-gradient($bg, to top); + @include border($bg); + + color: $fg; + + &:focus, &:active { border-color: $selected_bg_color; } + + &:insensitive { + @include linear-gradient(shade($bg, .9), to top); + + color: mix($bg, $fg, .5); + } +} + +@include exports("entry") { + .entry { + @include entry($base_color, $text_color); + + &.linked, .linked & { @extend %linked_entry; } + } +} diff --git a/Redcore-nighttime/gtk-3.0/scss/widgets/_grid.scss b/Redcore-nighttime/gtk-3.0/scss/widgets/_grid.scss new file mode 100644 index 0000000..e4b9e8f --- /dev/null +++ b/Redcore-nighttime/gtk-3.0/scss/widgets/_grid.scss @@ -0,0 +1,48 @@ +/****************** + ! Grid and flowbox +*******************/ + +@include exports("grid") { + .list { + background-color: shade($bg_color, .97); + color: $fg_color; + + &-row { + &, &.button { + border: 0; + border-radius: 0; + padding: $spacing; + background-image: none; + background-color: alpha($bg_color, 0); + box-shadow: none; + + &:hover { + background-image: none; + background-color: shade($bg_color, 1.02); + } + + &:selected { + &, &:hover, &:focus { + background-image: none; + background-color: $selected_bg_color; + color: $selected_fg_color; + } + } + } + } + } + + .grid-child { + &, GtkFlowBox & { + padding: $spacing; + border-radius: $roundness; + + &:selected { + @extend %selected; + + outline-offset: -2px; + } + } + } +} + diff --git a/Redcore-nighttime/gtk-3.0/scss/widgets/_infobar.scss b/Redcore-nighttime/gtk-3.0/scss/widgets/_infobar.scss new file mode 100644 index 0000000..6f5865b --- /dev/null +++ b/Redcore-nighttime/gtk-3.0/scss/widgets/_infobar.scss @@ -0,0 +1,38 @@ +@import "button"; + + +/********* + ! Infobar +**********/ + +@include exports("infobar") { + GtkInfoBar { + 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} { + @include linear-gradient($bg_color); + + border: 1px solid shade($bg_color, .8); + color: $fg_color; + + .button { + @include button($bg_color, $fg_color); + + &.close { @extend %close_button; } + } + } + } +} diff --git a/Redcore-nighttime/gtk-3.0/scss/widgets/_menu.scss b/Redcore-nighttime/gtk-3.0/scss/widgets/_menu.scss new file mode 100644 index 0000000..aa1ccfd --- /dev/null +++ b/Redcore-nighttime/gtk-3.0/scss/widgets/_menu.scss @@ -0,0 +1,267 @@ +@import "entry"; + + +/********* + ! Menubar +**********/ + +@include exports("menubar") { + .menubar { + -GtkWidget-window-dragging: true; + + border: 0; + background-color: $menubar_bg_color; + background-image: none; + color: $menubar_fg_color; + + + &.menuitem, .menuitem { + padding: $spacing ($spacing * 2); + 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") { + * { + -GtkMenu-horizontal-padding: 0; + -GtkMenu-vertical-padding: 0; + } + + GtkTreeMenu, GtkMenuToolButton, GtkComboBox { + &.menu, .menu { + background-color: $menu_bg_color; + margin: $spacing; + } + } + + #toolbar-popup, .menu { + padding: 0; + border-radius: 0; + border: 0; + background-color: $menu_bg_color; + color: $menu_fg_color; + + &:selected { background-color: $selected_bg_color; } + + .button { + &, &:hover, &:active, &:active *:insensitive, &:insensitive { + border-width: 0; + background-color: transparent; + background-image: none; + } + } + } + + .context-menu { font: initial; } + + .menuitem { + GtkTreeMenu & { + padding: 0; + border-width: 0; + } + + &, .menu & { + margin: $spacing; + padding: $spacing; + border: 0; + border-radius: 0; + background-color: transparent; + background-image: none; + + -GtkMenuItem-arrow-scaling: .5; + + &:active, &:hover { + border: 0; + background-color: $selected_bg_color; + background-image: none; + color: $selected_fg_color; + } + + *:active, *:hover { color: $selected_fg_color; } + + &:insensitive, *:insensitive { color: mix($menu_fg_color, $menu_bg_color, .5); } + } + + &.check, &.radio { + &, &:focus, &:hover, &:insensitive { background-image: none; } + + &, &:focus, &:hover, &:active, &:insensitive { + border-style: none; + background-color: transparent; + } + } + + &.separator { + -GtkMenuItem-horizontal-padding: 0; + -GtkWidget-separator-height: 1; + + border-style: none; + color: shade($menu_bg_color, ($contrast + .1)); + } + + &.button, &.button.flat { + &, &:focus, &:active, &:insensitive, &:active:insensitive { + 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; + } + } + + GtkCalendar { + &:inconsistent { color: mix($menu_fg_color, $menu_bg_color, .5); } + + .button { + border-style: none; + background-color: transparent; + background-image: none; + } + } + + .accelerator { + color: alpha($menu_fg_color, .6); + + &:hover { color: alpha($selected_fg_color, .8); } + + &:insensitive { color: alpha(mix($menu_fg_color, $menu_bg_color, .5), .4); } + } + + .entry { @include entry($menu_bg_color, $menu_fg_color); } + } + + GtkModelMenuItem GtkBox GtkImage { padding-right: $spacing; } +} + + +/********* + ! Popover +**********/ + +@include exports("popover") { + GtkPopover { + @include border($menu_bg_color); + + margin: 10px; + padding: $spacing; + border-radius: $roundness; + border-width: 1px; + border-style: solid; + background-clip: border-box; + background-color: $menu_bg_color; + background-image: none; + color: $menu_fg_color; + box-shadow: 0 3px 6px alpha($black, .16); + + &.background { + background-image: none; + background-color: $menu_bg_color; + color: $menu_fg_color; + } + + &:backdrop { box-shadow: none; } + + &.osd { + box-shadow: 0 2px 7px 3px alpha($black, .5); + + > .toolbar .button { + border-radius: 0; + border-width: 0; + background-color: transparent; + background-image: none; + } + } + + .view, .list { + background-color: shade($menu_bg_color, ($contrast + .5)); + background-image: none; + color: $menu_fg_color; + + &:hover { + background-image: none; + background-color: $selected_bg_color; + color: $selected_fg_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); } + + > .list, > .view, > .toolbar { background-color: transparent; } + + .separator { + border: 0; + background-color: transparent; + color: shade($menu_bg_color, ($contrast + .1)); + font-size: 80%; + font-weight: bold; + } + } + + GtkModelButton.button { + &, &:backdrop { + @include button(transparent, currentColor); + + &:focus:hover, &.flat:checked:hover, &:active:hover, &:hover, &:selected { + background-image: none; + background-color: $selected_bg_color; + color: $selected_fg_color; + box-shadow: none; + } + + &.flat { + &:checked { + box-shadow: none; + } + + &, &:hover { + transition: none; + } + } + } + } +} diff --git a/Redcore-nighttime/gtk-3.0/scss/widgets/_misc.scss b/Redcore-nighttime/gtk-3.0/scss/widgets/_misc.scss new file mode 100644 index 0000000..015632d --- /dev/null +++ b/Redcore-nighttime/gtk-3.0/scss/widgets/_misc.scss @@ -0,0 +1,227 @@ +/*************** +! Dimmed label * +****************/ + +@include exports("dimlabel") { + .dim-label { + opacity: .5; + text-shadow: none; + } +} + + +/*********** + ! Tooltip * +************/ + +@include exports("tooltip") { + .tooltip { + &.background { + @include linear-gradient($tooltip_bg_color); + + border: 0; + border-radius: $roundness; + color: $tooltip_fg_color; + } + + * { + background-color: transparent; + color: inherit; + } + } +} + + +/*********** + ! Dialogs * +************/ + +@include exports("dialogs") { + GtkMessageDialog, .message-dialog, .prompt { + -GtkDialog-content-area-border: $spacing; + -GtkDialog-action-area-border: $spacing; + -GtkDialog-button-spacing: $spacing; + + margin: 0; + padding: 0; + } +} + + +/********************* + ! App notifications * +**********************/ + +@include exports("notifications") { + .app-notification { + &, &.frame { + 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); } + } + } +} + + +/************* + ! Expanders * +**************/ + +@include exports("expander") { + GtkExpander { + padding: $spacing; + outline-offset: 1px; + } + + .expander { + color: alpha(currentColor, .7); + border: alpha(currentColor, .7); + + &:hover { + color: alpha(currentColor, .8); + border-color: alpha(currentColor, .8); + } + + &:active { + color: alpha(currentColor, .9); + border-color: alpha(currentColor, .9); + } + } +} + + +/******************* + ! 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 { + -GtkButton-image-spacing: 0; + -GtkButton-inner-border: 0; + + 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") { + GtkEntry.entry.pin-entry { + font: regular 50; + padding-left: 25px; + padding-right: 25px; + } + + GtkLabel.pin-label { font: regular 50; } +} diff --git a/Redcore-nighttime/gtk-3.0/scss/widgets/_notebook.scss b/Redcore-nighttime/gtk-3.0/scss/widgets/_notebook.scss new file mode 100644 index 0000000..962d8c3 --- /dev/null +++ b/Redcore-nighttime/gtk-3.0/scss/widgets/_notebook.scss @@ -0,0 +1,139 @@ +@import "button"; + + +/********** + ! Notebook +***********/ + +@include exports("notebook") { + .notebook { + padding: 0; + border-style: solid; + border-color: border_normal($bg_color); + border-radius: 0; + @include linear-gradient($bg_color); + background-clip: border-box; + color: $text_color; + + -GtkNotebook-initial-gap: 0; + -GtkNotebook-arrow-spacing: 5; + -GtkNotebook-tab-curvature: 0; + -GtkNotebook-tab-overlap: 1; + -GtkNotebook-has-tab-gap: false; + + &.frame { + &.top { border-width: 0 1px 1px; } + + &.right { border-width: 1px 0 1px 1px; } + + &.bottom { border-width: 1px 1px 0; } + + &.left { border-width: 1px 1px 1px 0; } + } + + &.header { + border-width: 2px; + background-color: transparent; + } + + GtkViewport { + border-width: 0; + background-color: $base_color; + color: $text_color; + } + + tab { + padding: ($spacing + 1px) ($spacing * 2); + border-style: solid; + border-color: border_normal(shade($bg_color, 0.80)); + background-color: shade($bg_color, 0.80); + background-image: none; + + &:active { + background-color: $bg_color; + background-image: none; + } + + &.top { + border-width: 2px 1px 1px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + + &:active { + border-top-width: 3px; + border-top-color: $selected_bg_color; + border-bottom-width: 0; + } + } + + &.right { + border-width: 1px 2px 1px 1px; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + + &:active { + border-right-width: 3px; + border-right-color: $selected_bg_color; + border-left-width: 0; + } + } + + + &.bottom { + border-width: 1px 1px 2px; + border-top-right-radius: 0; + border-top-left-radius: 0; + + &:active { + border-bottom-width: 3px; + border-bottom-color: $selected_bg_color; + border-top-width: 0; + } + } + + &.left { + border-width: 1px 1px 1px 2px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + + &:active { + border-left-width: 3px; + border-left-color: $selected_bg_color; + border-right-width: 0; + } + } + + GtkLabel { color: mix($text_color, $base_color, .3); } + + &.reorderable-page { + &:hover { + background-color: shade($base_color, .85); + border-left: 0; + border-right: 0; + /* using box shadows instead of borders due to slanted edges */ + box-shadow: inset 0 3px alpha($black, .03), inset 0 2px alpha($black, .03), inset 0 1px alpha($black, .03), inset 1px 0 shade($base_color, .7), inset -1px 0 shade($base_color, .7); + } + + &:active { + background-color: shade($base_color, .9); + border-left: 0; + border-right: 0; + box-shadow: inset 0 3px alpha($black, .03), inset 0 2px alpha($black, .03), inset 0 1px alpha($black, .03), inset 1px 0 shade($base_color, .75), inset -1px 0 shade($base_color, .75); + } + } + + /* close button styling */ + .button { @extend %close_button; } + + } + + .prelight-page { + &, GtkLabel { color: mix($text_color, $base_color, .15); } + } + + .active-page { + &, GtkLabel { color: $text_color; } + } + + } +} diff --git a/Redcore-nighttime/gtk-3.0/scss/widgets/_osd.scss b/Redcore-nighttime/gtk-3.0/scss/widgets/_osd.scss new file mode 100644 index 0000000..dcb4e74 --- /dev/null +++ b/Redcore-nighttime/gtk-3.0/scss/widgets/_osd.scss @@ -0,0 +1,132 @@ +@import "button"; + + +/******* + ! OSD * +********/ + +@include exports("osd") { + GtkOverlay.osd { background-color: transparent; } + + .osd, + #XfceNotifyWindow { + &.background { + background-color: alpha($osd_bg, .8); + color: $osd_fg; + } + + &.frame { + background-clip: border-box; + background-origin: border-box; + } + + &.button, .button { @include button($osd_bg, $osd_fg); } + + + &.toolbar { + -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)); } + } + + /* used by gnome-settings-daemon's media-keys OSD */ + &.trough { background-color: shade($osd_bg, .8); } + + &.progressbar { background-color: $osd_fg; } + + .scale { + &.slider { + @include linear-gradient(shade($osd_bg, 1.08)); + @include border($osd_bg); + + &:insensitive { @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; + } + + &:insensitive, &.highlight:insensitive { + border-color: shade($osd_bg, .85); + background-color: shade($osd_bg, .9); + background-image: none; + } + } + } + + &.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; + } + } + } + + GtkIconView.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; + } + } + + .osd GtkProgressBar, GtkProgressBar.osd { + -GtkProgressBar-xspacing: 0; + -GtkProgressBar-yspacing: 2px; + -GtkProgressBar-min-horizontal-bar-height: 2px; + + padding: 0; + + &.trough { + padding: 0; + border-style: none; + border-radius: 0; + background-image: none; + background-color: transparent; + } + + &.progressbar { + border-style: none; + border-radius: 0; + background-color: $selected_bg_color; + background-image: none; + } + } +} diff --git a/Redcore-nighttime/gtk-3.0/scss/widgets/_overshoot.scss b/Redcore-nighttime/gtk-3.0/scss/widgets/_overshoot.scss new file mode 100644 index 0000000..9950eb1 --- /dev/null +++ b/Redcore-nighttime/gtk-3.0/scss/widgets/_overshoot.scss @@ -0,0 +1,119 @@ +@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; + + $_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; + } + + /*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; +} + +// 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); } +} diff --git a/Redcore-nighttime/gtk-3.0/scss/widgets/_progress.scss b/Redcore-nighttime/gtk-3.0/scss/widgets/_progress.scss new file mode 100644 index 0000000..8a1ef11 --- /dev/null +++ b/Redcore-nighttime/gtk-3.0/scss/widgets/_progress.scss @@ -0,0 +1,182 @@ +/***************** + ! Progress bars * +******************/ + +@include exports("progressbar") { + GtkProgressBar { + padding: 0; + border-radius: $roundness; + font-size: smaller; + color: alpha($fg_color, .6); + + -GtkProgressBar-min-horizontal-bar-height: 6; + -GtkProgressBar-min-vertical-bar-width: 6; + + &.osd { + -GtkProgressBar-xspacing: 0; + -GtkProgressBar-yspacing: 0; + -GtkProgressBar-min-horizontal-bar-height: 3; + } + + &.trough { + border: 1px solid alpha(border_normal($bg_color), .5); + background-color: shade($bg_color, 1.08); + background-image: none; + } + } + + .progressbar { + @include linear-gradient($selected_bg_color); + + border-radius: 0; + box-shadow: none; + + &.left { + border-top-left-radius: $roundness; + border-bottom-left-radius: $roundness; + } + + &.right { + border-top-right-radius: $roundness; + border-bottom-right-radius: $roundness; + } + + &.left.right { box-shadow: none; } + + &.vertical { + @include linear-gradient($selected_bg_color, to right); + + &.bottom { + border-bottom-left-radius: $roundness; + border-bottom-right-radius: $roundness; + } + + &.top { + border-top-left-radius: $roundness; + border-top-right-radius: $roundness; + } + } + } + + GtkLevelBar { + -GtkLevelBar-min-block-width: 34; + -GtkLevelBar-min-block-height: 3; + + &.vertical { + -GtkLevelBar-min-block-width: 3; + -GtkLevelBar-min-block-height: 34; + } + } + + .level-bar { + &.trough { + @include linear-gradient(shade($bg_color, 1.08), to top); + + border: 1px solid alpha(border_normal($bg_color), .5); + border-radius: $roundness; + } + + &.fill-block { + @include linear-gradient($selected_bg_color); + + // FIXME: it would be nice to set make fill blocks bigger, but we'd need + // :nth-child working on discrete indicators + border-color: transparent; + border-radius: 0; + + &.indicator-discrete { + &.horizontal { margin-right: 1px; } + + &.vertical { margin-bottom: 1px; } + } + + &.level-high { + background-color: $success_color; + border-color: transparent; + } + + &.level-low { + background-color: $warning_color; + border-color: transparent; + } + + &.empty-fill-block { + background-color: transparent; + border-color: transparent; + box-shadow: none; + } + } + } + + .scale { + -GtkRange-slider-width: 16; + -GtkRange-trough-border: 1; + -GtkScale-slider-length: 16; + + padding: 0; + border-width: 1px; + border-radius: $roundness; + outline-offset: -1px; + + + &.slider { + @include linear-gradient(shade($bg_color, 1.08)); + @include border($bg_color); + + border-radius: 8px; + border-width: 1px; + border-style: solid; + box-shadow: 0 1px 2px -1px alpha($dark_shadow, .3); + + &:insensitive { @include linear-gradient(shade($bg_color, .9)); } + } + + &.fine-tune { + &, &.horizontal { + &:active, &:active:hover { + background-size: 50%; + background-repeat: no-repeat; + background-position: center; + } + } + } + + &.mark { border-color: alpha(border_normal($bg_color), .5); } + + + &.trough { + @include linear-gradient(shade($bg_color, 1.08)); + + margin: 7px 0; + border: 1px solid alpha(border_normal($bg_color), .5); + border-radius: $roundness; + + &:insensitive { @include linear-gradient(shade($bg_color, .9)); } + + &.vertical { margin: 0 7px; } + } + + &.highlight.left { + &, .memuitem & { + @include linear-gradient($selected_bg_color); + border-color: $selected_bg_color; + + &:hover { + border-color: border_normal($selected_bg_color); + background-color: shade($selected_bg_color, .8); + } + + &:insensitive { + @include linear-gradient(shade($bg_color, .9)); + border-color: shade($bg_color, .85); + } + } + } + + &.highlight.bottom { + @include linear-gradient($selected_bg_color); + border-color: $selected_bg_color; + } + + } +} diff --git a/Redcore-nighttime/gtk-3.0/scss/widgets/_scrollbar.scss b/Redcore-nighttime/gtk-3.0/scss/widgets/_scrollbar.scss new file mode 100644 index 0000000..2d1af41 --- /dev/null +++ b/Redcore-nighttime/gtk-3.0/scss/widgets/_scrollbar.scss @@ -0,0 +1,86 @@ +/*********** + ! Scrollbar +************/ + +@include exports("scrollbar") { + * { + -GtkRange-slider-width: 8; + -GtkRange-stepper-spacing: 0; + -GtkRange-trough-border: 2; + -GtkRange-trough-under-steppers: 1; + -GtkScrollbar-has-backward-stepper: false; + -GtkScrollbar-has-forward-stepper: false; + -GtkScrollbar-min-slider-length: 80; + -GtkScrolledWindow-scrollbar-spacing: 0; + -GtkScrolledWindow-scrollbars-within-bevel: 1; + } + + .scrollbar { + border: 0; + padding: 0; + + &.button { + &, &:active, &:active:hover { + border-width: 0; + border-radius: 0; + background-color: transparent; + background-image: none; + color: alpha($fg_color, .5); + } + } + + &.slider, &.slider.vertical { + border: 0; + border-radius: $roundness; + background-color: mix($bg_color, $fg_color, 0.21); + + &:hover { background-color: mix($bg_color, $fg_color, .31); } + + &:active { background-color: $selected_bg_color; } + + &.fine-tune:hover:active { border: 2px solid transparent; } + } + + // overlay scrolling indicator + &.overlay-indicator { + &:not(.dragging):not(.hovering) { + opacity: .5; + + -GtkRange-slider-width: 4px; + + .slider { + margin: 0; + background-color: $fg_color; + background-clip: padding-box; + } + + .trough { + border-style: none; + background-color: transparent; + } + } + + &.dragging, &.hovering { opacity: .7; } + } + } + + .scrollbars-junction, + .scrollbars-junction.frame, + .scrollbar.trough { + border: 0; + border-radius: 0; + background-color: $bg_color; + background-image: none; + } + + // ubuntu overlay scrollbars + OsThumb, OsScrollbar { + color: shade($bg_color, .7); + + &:selected { background-color: $selected_bg_color; } + + &:active { background-color: $selected_bg_color; } + + &:insensitive { background-color: shade($bg_color, .9); } + } +} diff --git a/Redcore-nighttime/gtk-3.0/scss/widgets/_sidebar.scss b/Redcore-nighttime/gtk-3.0/scss/widgets/_sidebar.scss new file mode 100644 index 0000000..7ec5727 --- /dev/null +++ b/Redcore-nighttime/gtk-3.0/scss/widgets/_sidebar.scss @@ -0,0 +1,114 @@ +/********* + ! Sidebar +**********/ + +@include exports("sidebar") { + .sidebar { + &, &.view, .view, GtkScrolledWindow { + background-color: $bg_color; + color: mix($fg_color, $bg_color, .1); + + &.separator { + &, &:hover, &:focus { + border-width: 1px; + border-style: solid; + border-color: shade($bg_color, .9); + color: shade($bg_color, .9); + } + } + } + + row, .view row { + &:selected { + &, &:hover, &:focus { + border: 0; + background-image: none; + background-color: $selected_bg_color; + color: $selected_fg_color; + } + + &:hover { + border: 0; + background-image: none; + background-color: shade($selected_bg_color, 1.05); + color: $selected_fg_color; + } + } + + &:hover { + border: 0; + background-image: none; + background-color: shade($bg_color, 1.05); + } + } + + .frame { border-width: 0; } + + .sidebar-row { + padding: 1px; + } + + .sidebar-icon { + padding-left: $spacing * 2; + padding-right: $spacing * 2; + } + + GtkAssistant & { + padding: $spacing; + border-width: 0 1px 0 0; + border-style: solid; + border-right-color: border_normal($bg_color); + border-radius: 0; + background-color: $bg_color; + color: mix($fg_color, $bg_color, .1); + + &:dir(ltr) { border-width: 0 1px 0 0; } + + &:dir(rtl) { border-width: 0 0 0 1px; } + + .label { + padding: $spacing ($spacing * 2); + + &.highlight { background-color: mix($bg_color, $fg_color, .8); } + } + + &.csd .sidebar { border-top-style: none; } + + .highlight { font: bold; } + } + } +} + + +/****** +! Paned +*******/ + +@include exports("paned") { + GtkPaned { + -GtkPaned-handle-size: 1; + -gtk-icon-source: none; + margin: 0 $spacing; + + &:dir(rtl) { + margin-right: 0; + margin-left: $spacing; + } + + .pane-separator { background-color: shade($bg_color, .9); } + + &.wide { + -GtkPaned-handle-size: 4; + margin: 0; + + .pane-separator { + background-color: transparent; + border-style: none solid; + border-color: shade($bg_color, .9); + border-width: 1px; + } + + &.vertical .pane-separator { border-style: solid none; } + } + } +} diff --git a/Redcore-nighttime/gtk-3.0/scss/widgets/_spinner.scss b/Redcore-nighttime/gtk-3.0/scss/widgets/_spinner.scss new file mode 100644 index 0000000..9c753f7 --- /dev/null +++ b/Redcore-nighttime/gtk-3.0/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; + background-color: $selected_bg_color; + opacity: 0; // non spinning spinner makes no sense + + -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); + + &:active { + opacity: 1; + animation: spin 1s linear infinite; + + &:insensitive { opacity: .5; } + } + } +} diff --git a/Redcore-nighttime/gtk-3.0/scss/widgets/_toggle.scss b/Redcore-nighttime/gtk-3.0/scss/widgets/_toggle.scss new file mode 100644 index 0000000..b85fef2 --- /dev/null +++ b/Redcore-nighttime/gtk-3.0/scss/widgets/_toggle.scss @@ -0,0 +1,128 @@ +/*********************** + ! Check and Radio items +************************/ + +$suffix: if($variant == "dark", "-dark", ""); + +@mixin toggle($type) { + background-image: none; + + -gtk-icon-source: url("../assets/#{$type}-unchecked#{$suffix}.svg"); + + &:insensitive { -gtk-icon-source: url("../assets/#{$type}-unchecked-insensitive#{$suffix}.svg"); } + + &:checked, &:active { + -gtk-icon-source: url("../assets/#{$type}-checked#{$suffix}.svg"); + + &:insensitive { -gtk-icon-source: url("../assets/#{$type}-checked-insensitive#{$suffix}.svg"); } + } + + &:inconsistent { + -gtk-icon-source: url("../assets/#{$type}-mixed#{$suffix}.svg"); + + &:insensitive { -gtk-icon-source: url("../assets/#{$type}-mixed-insensitive#{$suffix}.svg"); } + } + + &.menuitem { + -gtk-icon-source: url("../assets/menuitem-#{$type}-unchecked.svg"); + + &:insensitive { + -gtk-icon-source: url("../assets/menuitem-#{$type}-checked-insensitive.svg"); + } + + &:checked, &:active { + -gtk-icon-source: url("../assets/menuitem-#{$type}-checked.svg"); + + &:hover { -gtk-icon-source: url("../assets/menuitem-#{$type}-checked-hover.svg"); } + + &:insensitive { -gtk-icon-source: url("../assets/menuitem-#{$type}-checked-insensitive.svg"); } + } + + &:inconsistent { + -gtk-icon-source: url("../assets/menuitem-#{$type}-mixed.svg"); + + &:hover { -gtk-icon-source: url("../assets/menuitem-#{$type}-mixed-hover.svg"); } + + &:insensitive { -gtk-icon-source: url("../assets/menuitem-#{$type}-mixed-insensitive.svg"); } + } + } +} + +@include exports("checkradio") { + * { + -GtkCheckButton-indicator-size: 16; + -GtkCheckMenuItem-indicator-size: 16; + } + + .radio { @include toggle("radio"); } + + .check { @include toggle("checkbox"); } + + //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) { + icon-shadow: none; + -gtk-icon-source: url("../assets/grid-selection#{$as}#{$suffix}.svg"); + background-color: transparent; + } + } +} + + +/******** + ! Switch +*********/ + +@include exports("switch") { + GtkSwitch { + padding: 0; + border-radius: $roundness; + font: bold condensed; + outline-offset: -4px; + + &.slider { + @include linear-gradient(shade($bg_color, 1.2)); + + border: 1px solid rgba(0, 0, 0, .2); + box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12); + + &:insensitive { + border-color: rgba(0, 0, 0, .1); + background-color: shade($bg_color, .9); + box-shadow: none; + } + } + + &.trough { + @include linear-gradient(shade($bg_color, .95), to top); + + border: 1px solid border_normal($bg_color); + color: $fg_color; + 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); + + &:active { + @include linear-gradient($selected_bg_color, to top); + + border-color: shade($selected_bg_color, .9); + color: $selected_fg_color; + } + + &:insensitive { + @include linear-gradient(shade($bg_color, .9), to top); + + border-color: border_insensitive($bg_color); + color: mix($fg_color, $bg_color, .5); + } + } + } +} diff --git a/Redcore-nighttime/gtk-3.0/scss/widgets/_toolbar.scss b/Redcore-nighttime/gtk-3.0/scss/widgets/_toolbar.scss new file mode 100644 index 0000000..362ade4 --- /dev/null +++ b/Redcore-nighttime/gtk-3.0/scss/widgets/_toolbar.scss @@ -0,0 +1,132 @@ +@import "button"; + + +/********* + ! Toolbar +**********/ + +@mixin toolbar($bg, $fg) { + @include linear-gradient($bg); + @include border($bg); + + padding: $spacing * 2; + color: $fg; + + &:insensitive { + @include linear-gradient(shade($bg, .9)); + + color: mix($fg, $bg, .5); + } + + .title { + font: bold; + padding: 0 ($spacing * 2); + } + + .subtitle { + font: smaller; + padding: 0 ($spacing * 2); + } + + .button { @include button($header_button_bg_color, $header_button_fg_color); } + + .button.linked, .linked .button { @include linked_button($header_button_bg_color); } + + GtkComboBox, .button { + padding: $spacing - 1px; + + &.text-button { padding: $spacing; } + + &.image-button { padding: ($spacing + 1px) ($spacing - 1px) ($spacing + 1px) $spacing; } + } + + GtkSeparatorToolItem, .separator, .separator:insensitive { + color: shade($bg, ($contrast + .1)); + border-color: currentColor; + + -GtkWidget-window-dragging: true; + } + + .menubar { -GtkToolbar-button-relief: normal; } +} + +@include exports("toolbar") { + .toolbar { + @include toolbar($bg_color, $fg_color); + + padding: 2px; + border-style: none; + + &.inline-toolbar { + background-image: none; + background-color: transparent; + } + GtkToolButton:insensitive GtkButton:insensitive, + GtkToolButton:insensitive GtkButton:insensitive.button, + GtkToolButton:insensitive GtkButton:insensitive.flat.button { + background-color: $bg_color; + } + } + + .header-bar { + @include toolbar($titlebar_bg_color, $titlebar_fg_color); + + border-width: 0 0 1px; + border-style: solid; + .button { + color: $header_button_fg_color; + } + } + + .titlebar { + @include linear-gradient($titlebar_bg_color); + + border-radius: $roundness $roundness 0 0; + color: mix($titlebar_fg_color, $titlebar_bg_color, .1); + + &:backdrop { + @include linear-gradient($titlebar_bg_color); + + color: mix($titlebar_fg_color, $titlebar_bg_color, .6); + text-shadow: none; + } + + &.default-decoration { + border: 0; + box-shadow: none; + } + + .tiled &, .maximized & { border-radius: 0; } + + .title { font: bold; } + + .titlebutton { + padding: $spacing; + 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); + icon-shadow: none; + } + } + } +} diff --git a/Redcore-nighttime/gtk-3.0/scss/widgets/_view.scss b/Redcore-nighttime/gtk-3.0/scss/widgets/_view.scss new file mode 100644 index 0000000..bfa33dc --- /dev/null +++ b/Redcore-nighttime/gtk-3.0/scss/widgets/_view.scss @@ -0,0 +1,233 @@ +/*************** + ! Generic views +****************/ + +@include exports("view") { + * { -GtkTextView-error-underline-color: $error_color; } + + .view { + color: $text_color; + background-color: $base_color; + + &:insensitive, &:insensitive:insensitive { + background-color: shade($base_color, .9); + color: mix($text_color, $base_color, .5); + } + + &:selected, &:selected:focus { @extend %selected; } + } + + .cell { + border-width: 0; + border-radius: 0; + + &:selected, &:selected:focus { + background-color: $selected_bg_color; + color: $selected_fg_color; + } + } + + row { + &:selected { + &, &:hover, &:focus { + -GtkWidget-focus-padding: 1; + -GtkWidget-focus-line-width: 0; + + border: 0; + background-color: $selected_bg_color; + background-image: none; + color: $selected_fg_color; + } + } + } + + .content-view { + &.view { + background-color: $base_color; + + &:hover { background-color: alpha($selected_bg_color, .6); } + + &:selected, &:active { background-color: $selected_bg_color; } + + &:insensitive { background-color: shade($base_color, .9); } + + &.check { + &, &:active, &:hover, &:insensitive, &:selected { background-color: transparent; } + } + } + + .subtitle { + font: smaller; + padding: 0 12px; + } + } + + GtkIconView { + &.content-view.check { @extend .content-view.check; } + + &.view.cell { + &:selected, &:selected:focus { + border: 0; + border-radius: 2px; + background-image: none; + background-color: $selected_bg_color; + color: $selected_fg_color; + } + } + } + + .dim-label { + &, &.view { color: alpha(currentColor, .5); } + } + + .dnd { border: 1px solid $selected_bg_color; } + + .grip { background-color: transparent; } + + .arrow { color: alpha(currentColor, .7); } + + .rubberband { + &, &.view, &.content-view.view { + border: 1px solid $selected_bg_color; + border-radius: 0; + background-color: alpha($selected_bg_color, .3); + } + } + + GdMainIconView.content-view { -GdMainIconView-icon-size: 40; } + + /* this will get overridden by .view, needed by gedit line numbers */ + GtkTextView { background-color: mix($bg_color, $base_color, .5); } + + GtkHTML { + @extend .view; + + &:insensitive { background-color: shade($base_color, .9); } + } + + GtkDrawingArea { background-color: transparent; } +} + +/************ + ! Treeview * +*************/ + +@include exports("treeview") { + GtkTreeView { + -GtkTreeView-expander-size: 8; + -GtkTreeView-vertical-separator: 0; + + outline-offset: -1px; + border-top-color: shade($menu_bg_color, ($contrast + .1)); + + &:hover, &:selected, &:selected:focus, &:backdrop:selected, &:backdrop:selected:focus { border-top-color: $selected_bg_color; } + + &.dnd { border: 1px solid $selected_bg_color; } + + .entry { + border-radius: 0; + background-color: $base_color; + background-image: none; + } + + .progressbar { + @include linear-gradient($selected_bg_color); + border: 1px solid border_normal($selected_bg_color); + + &:selected { + &:focus, & { + @include linear-gradient($selected_bg_color); + border: 1px solid border_focus($selected_bg_color); + color: $selected_fg_color; + } + } + + &:insensitive { + &:insensitive { + @include linear-gradient($bg_color); + border-color: border_insensitive($bg_color); + } + } + } + + .trough { + background-color: mix($bg_color, $base_color, .5); + border: 1px solid border_normal($base_color); + + &:selected { + &:focus, & { + background-color: $base_color; + border: 1px solid border_focus($bg_color); + color: $text_color; + } + } + + &:insensitive { + &:insensitive { + background-color: $base_color; + } + } + } + } +} + + +/*********** + ! Separator +************/ + +@include exports("separator") { + .view.separator, .separator { + color: shade($bg_color, ($contrast + .1)); + border: 1px solid currentColor; + } +} + + +/********************* + ! Column view headers +**********************/ + +@include exports("columnheader") { + column-header { + .button { + &, &:active { + border-width: 0 1px 1px 0; + border-radius: 0; + } + + &, &:active, &:focus, &:active:focus { + border-color: shade($base_color, .9); + border-bottom-color: shade($base_color, .8); + background-color: shade($base_color, .97); + background-image: none; + } + + &:hover, &:active:hover, &:hover:focus, &:active:hover:focus { + border-color: shade($base_color, .9); + border-bottom-color: shade($base_color, .8); + background-color: shade($base_color, .99); + background-image: none; + } + + &:last-child .button { border-width: 0 0 1px; } + } + } +} + + +/********** + ! Frames * +***********/ + +@include exports("frame") { + .frame { + border: 1px solid border_normal($bg_color); + + &.flat { border: 0; } + } + + /* avoid double borders when a viewport is packed into a GtkScrolledWindow */ + GtkScrolledWindow GtkViewport.frame { border: 0; } +} + diff --git a/Redcore-nighttime/gtk-3.0/scss/widgets/_window.scss b/Redcore-nighttime/gtk-3.0/scss/widgets/_window.scss new file mode 100644 index 0000000..7742fbb --- /dev/null +++ b/Redcore-nighttime/gtk-3.0/scss/widgets/_window.scss @@ -0,0 +1,60 @@ +/************** + ! Window frame +***************/ + +@include exports("window") { + %window { + box-shadow: 0 19px 38px rgba(0, 0, 0, .3), 0 15px 12px rgba(0, 0, 0, .22), + 0 0 0 1px $wm_border_focused; + + &:backdrop { + box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23), + 0 0 0 1px $wm_border_unfocused; + } + } + + .window-frame { + @extend %window; + + border: 0; + border-radius: $roundness $roundness 0 0; + background-color: mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.21); + /* this is used for the resize cursor area */ + margin: $spacing * 3; + + &.tiled { border-radius: 0; } + + &.solid-csd { + border-radius: $roundness $roundness 0 0; + margin: 1px; + background-color: mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.21); + box-shadow: none; + } + + &.csd { + &.popup { + @extend %window; + + border-radius: 0; + } + + &.tooltip { + border-radius: $roundness; + box-shadow: none; + } + + &.message-dialog { + @extend %window; + + border-radius: $roundness; + } + } + + &.ssd { + // Fixed gtk-3.18 Unity bug (https://github.com/numixproject/numix-gtk-theme/issues/270) + box-shadow: 0 0 0 1px $wm_border_focused; + + &.maximized { border-radius: 0; } + } + } +} |