Csaba Jakosa
Dustin Falgout
parent
77877e9d53
commit
368e74fc68
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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); }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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); }
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
@at-root %sidebar_left,
|
||||
&:dir(ltr),
|
||||
&.left,
|
||||
&.left:dir(rtl) {
|
||||
border-right: 1px solid $borders_color;
|
||||
border-left-style: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: 0;
|
||||
background-image: none;
|
||||
background-color: shade($selected_bg_color, 1.05);
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
@at-root %sidebar_right
|
||||
&:dir(rtl),
|
||||
&.right {
|
||||
border-left: 1px solid $borders_color;
|
||||
border-right-style: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: 0;
|
||||
background-image: none;
|
||||
background-color: shade($bg_color, 1.05);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-label {
|
||||
padding-left: $spacing;
|
||||
padding-right: $spacing;
|
||||
&: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; }
|
||||
|
||||
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; } }
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue