diff --git a/gtk-3.20/scss/_global.scss b/gtk-3.20/scss/_global.scss index 94dc3e9..7c803d7 100755 --- a/gtk-3.20/scss/_global.scss +++ b/gtk-3.20/scss/_global.scss @@ -113,6 +113,8 @@ $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: 2px; $spacing: 5px; diff --git a/gtk-3.20/scss/widgets/_base.scss b/gtk-3.20/scss/widgets/_base.scss index 2d5b27d..76f1e8f 100755 --- a/gtk-3.20/scss/widgets/_base.scss +++ b/gtk-3.20/scss/widgets/_base.scss @@ -128,5 +128,5 @@ assistant { .sidebar label { padding: 6px 12px; } - .sidebar label.highlight { background-color: mix($bg_color, $fg_color, .8); } + .sidebar label.highlight { background-color: mix($fg_color, $bg_color, .8); } } diff --git a/gtk-3.20/scss/widgets/_button.scss b/gtk-3.20/scss/widgets/_button.scss index bc8c35a..5de0559 100755 --- a/gtk-3.20/scss/widgets/_button.scss +++ b/gtk-3.20/scss/widgets/_button.scss @@ -3,6 +3,47 @@ **********/ @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 { padding: $spacing ($spacing + 2px); border-width: 1px; diff --git a/gtk-3.20/scss/widgets/_misc.scss b/gtk-3.20/scss/widgets/_misc.scss index 7185b70..94e97ee 100644 --- a/gtk-3.20/scss/widgets/_misc.scss +++ b/gtk-3.20/scss/widgets/_misc.scss @@ -232,7 +232,7 @@ @at-root %nobg_selected_items, & { color: $selected_fg_color; - @if $variant == 'light' { outline-color: transparentize($selected_fg_color, 0.7); } + @if $variant == 'light' { outline-color: transparentize($selected_fg_color, .7); } &:disabled { color: mix($selected_fg_color, $selected_bg_color, .5); } diff --git a/gtk-3.20/scss/widgets/_sidebar.scss b/gtk-3.20/scss/widgets/_sidebar.scss index 3316b8b..c0d24db 100755 --- a/gtk-3.20/scss/widgets/_sidebar.scss +++ b/gtk-3.20/scss/widgets/_sidebar.scss @@ -4,78 +4,151 @@ @include exports("sidebar") { .sidebar { - &, &.view, .view, view, scrolledwindow { + border-style: none; + background-color: mix($bg_color, $base_color, .5); + + .view { // .view, nemo sidebar fix. background-color: $bg_color; color: mix($fg_color, $bg_color, .1); - - &.separator, separator { - &, &:hover, &:focus { - border-width: 1px; - border-style: solid; - border-color: shade($bg_color, .9); - color: shade($bg_color, .9); - } - } } - row, .view 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); - } + @at-root %sidebar_left, + &:dir(ltr), + &.left, + &.left:dir(rtl) { + border-right: 1px solid $borders_color; + border-left-style: none; } - .sidebar-label { - padding-left: $spacing; - padding-right: $spacing; + @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: $backdrop_transition; } .frame, frame { border-width: 0; } - .sidebar-icon { - padding-left: $spacing * 2; - padding-right: $spacing * 2; - } + list { background-color: transparent; } - assistant & { - 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); + paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; } } + } - &: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); } + stacksidebar { + &.sidebar { + &:dir(ltr), + &.left, + &.left:dir(rtl) { + list { @extend %sidebar_left; } } - &.csd .sidebar { border-top-style: none; } + &:dir(rtl), + &.right { + list { @extend %sidebar_right; } + } + } - .highlight { font: bold; } + 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: 0.7; + + placessidebar { + > viewport.frame { border-style: none; } + + row { + // Needs overriding of the GtkListBoxRow padding + min-height: 36px; + padding: 0px; + + // Using margins/padding directly in the SidebarRow + // will make the animation of the new bookmark row jump + > revealer { padding: 0 14px; } + + &:selected { color: $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: 8px; } + &:dir(rtl) { padding-left: 8px; } + } + + label.sidebar-label { + &:dir(ltr) { padding-right: 2px; } + &:dir(rtl) { padding-left: 2px; } + } + + @at-root button.sidebar-button { + //@extend %button_basic.flat; + + //@extend %button_selected.flat; + + min-height: 26px; + min-width: 26px; + margin-top: 3px; + margin-bottom: 3px; + 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; + } + } } } } diff --git a/gtk-3.20/scss/widgets/_view.scss b/gtk-3.20/scss/widgets/_view.scss index 9ed5b16..33af742 100644 --- a/gtk-3.20/scss/widgets/_view.scss +++ b/gtk-3.20/scss/widgets/_view.scss @@ -27,7 +27,7 @@ text { @extend %view; - selection { &:focus, & { @extend %selected_items; }} + selection { &:focus, & { @extend %selected_items; } } } } @@ -350,3 +350,30 @@ scrolledwindow viewport.frame { border: 0; } } + +/*************** + ! Places view * +****************/ + +@include exports("placesview") { + placesview { + .server-list-button > image { + transition: 200ms $ease-out-quad; + -gtk-icon-transform: rotate(0turn); + } + + .server-list-button:checked > image { + transition: 200ms $ease-out-quad; + -gtk-icon-transform: rotate(-0.5turn); + } + + row.activatable:hover { background-color: transparent; } + + // this selects the "connect to server" label + > actionbar > revealer > box > label { + padding-left: 8px; + padding-right: 8px; + } + } +} +