GTK3: Improve nautilus floating-bar design
This commit is contained in:
		
							parent
							
								
									f7ca909145
								
							
						
					
					
						commit
						4789e40f4e
					
				| @ -5193,7 +5193,11 @@ filechooser placessidebar.sidebar, | |||||||
|     margin-left: 6px; |     margin-left: 6px; | ||||||
|     margin-right: 6px; |     margin-right: 6px; | ||||||
|     border-radius: 5px; |     border-radius: 5px; | ||||||
|     box-shadow: 0 2px 4px rgba(39, 119, 255, 0.5); } |     box-shadow: 0 1px 4px rgba(39, 119, 255, 0.5); | ||||||
|  |     transition: box-shadow 200ms ease-out; } | ||||||
|  |     filechooser placessidebar.sidebar row.sidebar-row:selected:backdrop, | ||||||
|  |     .nautilus-window placessidebar.sidebar row.sidebar-row:selected:backdrop { | ||||||
|  |       box-shadow: none; } | ||||||
|     filechooser placessidebar.sidebar row.sidebar-row:selected:dir(ltr), |     filechooser placessidebar.sidebar row.sidebar-row:selected:dir(ltr), | ||||||
|     .nautilus-window placessidebar.sidebar row.sidebar-row:selected:dir(ltr) { |     .nautilus-window placessidebar.sidebar row.sidebar-row:selected:dir(ltr) { | ||||||
|       background-image: linear-gradient(to right, #005af3 35px, transparent 0); } |       background-image: linear-gradient(to right, #005af3 35px, transparent 0); } | ||||||
| @ -5212,6 +5216,19 @@ filechooser placessidebar.sidebar, | |||||||
|   .nautilus-window placessidebar.sidebar row.sidebar-row .sidebar-icon { |   .nautilus-window placessidebar.sidebar row.sidebar-row .sidebar-icon { | ||||||
|     padding-right: 20px; } |     padding-right: 20px; } | ||||||
| 
 | 
 | ||||||
|  | .floating-bar { | ||||||
|  |   background-color: #2777ff; | ||||||
|  |   border-color: #00348d; | ||||||
|  |   margin: 10px; | ||||||
|  |   box-shadow: 0 1px 4px rgba(39, 119, 255, 0.5); | ||||||
|  |   transition: background-color 200ms ease-out; } | ||||||
|  |   .floating-bar:backdrop { | ||||||
|  |     box-shadow: none; | ||||||
|  |     border-color: #0d0e11; } | ||||||
|  |   .floating-bar.bottom.left, .floating-bar.bottom.right { | ||||||
|  |     border-radius: 5px; | ||||||
|  |     border-style: solid; } | ||||||
|  | 
 | ||||||
| /* XFCE4 PANEL */ | /* XFCE4 PANEL */ | ||||||
| .xfce4-panel.background { | .xfce4-panel.background { | ||||||
|   background: rgba(35, 37, 46, 0.8); } |   background: rgba(35, 37, 46, 0.8); } | ||||||
|  | |||||||
| @ -5193,7 +5193,11 @@ filechooser placessidebar.sidebar, | |||||||
|     margin-left: 6px; |     margin-left: 6px; | ||||||
|     margin-right: 6px; |     margin-right: 6px; | ||||||
|     border-radius: 5px; |     border-radius: 5px; | ||||||
|     box-shadow: 0 2px 4px rgba(39, 119, 255, 0.5); } |     box-shadow: 0 1px 4px rgba(39, 119, 255, 0.5); | ||||||
|  |     transition: box-shadow 200ms ease-out; } | ||||||
|  |     filechooser placessidebar.sidebar row.sidebar-row:selected:backdrop, | ||||||
|  |     .nautilus-window placessidebar.sidebar row.sidebar-row:selected:backdrop { | ||||||
|  |       box-shadow: none; } | ||||||
|     filechooser placessidebar.sidebar row.sidebar-row:selected:dir(ltr), |     filechooser placessidebar.sidebar row.sidebar-row:selected:dir(ltr), | ||||||
|     .nautilus-window placessidebar.sidebar row.sidebar-row:selected:dir(ltr) { |     .nautilus-window placessidebar.sidebar row.sidebar-row:selected:dir(ltr) { | ||||||
|       background-image: linear-gradient(to right, #005af3 35px, transparent 0); } |       background-image: linear-gradient(to right, #005af3 35px, transparent 0); } | ||||||
| @ -5212,6 +5216,19 @@ filechooser placessidebar.sidebar, | |||||||
|   .nautilus-window placessidebar.sidebar row.sidebar-row .sidebar-icon { |   .nautilus-window placessidebar.sidebar row.sidebar-row .sidebar-icon { | ||||||
|     padding-right: 20px; } |     padding-right: 20px; } | ||||||
| 
 | 
 | ||||||
|  | .floating-bar { | ||||||
|  |   background-color: #2777ff; | ||||||
|  |   border-color: #00348d; | ||||||
|  |   margin: 10px; | ||||||
|  |   box-shadow: 0 1px 4px rgba(39, 119, 255, 0.5); | ||||||
|  |   transition: background-color 200ms ease-out; } | ||||||
|  |   .floating-bar:backdrop { | ||||||
|  |     box-shadow: none; | ||||||
|  |     border-color: #0d0e11; } | ||||||
|  |   .floating-bar.bottom.left, .floating-bar.bottom.right { | ||||||
|  |     border-radius: 5px; | ||||||
|  |     border-style: solid; } | ||||||
|  | 
 | ||||||
| /* XFCE4 PANEL */ | /* XFCE4 PANEL */ | ||||||
| .xfce4-panel.background { | .xfce4-panel.background { | ||||||
|   background: rgba(35, 37, 46, 0.8); } |   background: rgba(35, 37, 46, 0.8); } | ||||||
|  | |||||||
| @ -5214,7 +5214,11 @@ filechooser placessidebar.sidebar, | |||||||
|     margin-left: 6px; |     margin-left: 6px; | ||||||
|     margin-right: 6px; |     margin-right: 6px; | ||||||
|     border-radius: 5px; |     border-radius: 5px; | ||||||
|     box-shadow: 0 2px 4px rgba(39, 119, 255, 0.5); } |     box-shadow: 0 1px 4px rgba(39, 119, 255, 0.5); | ||||||
|  |     transition: box-shadow 200ms ease-out; } | ||||||
|  |     filechooser placessidebar.sidebar row.sidebar-row:selected:backdrop, | ||||||
|  |     .nautilus-window placessidebar.sidebar row.sidebar-row:selected:backdrop { | ||||||
|  |       box-shadow: none; } | ||||||
|     filechooser placessidebar.sidebar row.sidebar-row:selected:dir(ltr), |     filechooser placessidebar.sidebar row.sidebar-row:selected:dir(ltr), | ||||||
|     .nautilus-window placessidebar.sidebar row.sidebar-row:selected:dir(ltr) { |     .nautilus-window placessidebar.sidebar row.sidebar-row:selected:dir(ltr) { | ||||||
|       background-image: linear-gradient(to right, #005af3 35px, transparent 0); } |       background-image: linear-gradient(to right, #005af3 35px, transparent 0); } | ||||||
| @ -5233,6 +5237,19 @@ filechooser placessidebar.sidebar, | |||||||
|   .nautilus-window placessidebar.sidebar row.sidebar-row .sidebar-icon { |   .nautilus-window placessidebar.sidebar row.sidebar-row .sidebar-icon { | ||||||
|     padding-right: 20px; } |     padding-right: 20px; } | ||||||
| 
 | 
 | ||||||
|  | .floating-bar { | ||||||
|  |   background-color: #2777ff; | ||||||
|  |   border-color: #0051da; | ||||||
|  |   margin: 10px; | ||||||
|  |   box-shadow: 0 1px 4px rgba(39, 119, 255, 0.5); | ||||||
|  |   transition: background-color 200ms ease-out; } | ||||||
|  |   .floating-bar:backdrop { | ||||||
|  |     box-shadow: none; | ||||||
|  |     border-color: #d9d9d9; } | ||||||
|  |   .floating-bar.bottom.left, .floating-bar.bottom.right { | ||||||
|  |     border-radius: 5px; | ||||||
|  |     border-style: solid; } | ||||||
|  | 
 | ||||||
| /* XFCE4 PANEL */ | /* XFCE4 PANEL */ | ||||||
| .xfce4-panel.background { | .xfce4-panel.background { | ||||||
|   background: rgba(255, 255, 255, 0.9); } |   background: rgba(255, 255, 255, 0.9); } | ||||||
|  | |||||||
| @ -7,6 +7,8 @@ $panel_bg : transparentize($bg_color, if($variant=='light', .1, .2)); | |||||||
| @define-color disk_space_used #{"" +$selected_bg_color}; | @define-color disk_space_used #{"" +$selected_bg_color}; | ||||||
| @define-color disk_space_free white; | @define-color disk_space_free white; | ||||||
| 
 | 
 | ||||||
|  | 
 | ||||||
|  | $_glow_shadow: 0 1px 4px transparentize($selected_bg_color, .5); | ||||||
| filechooser, | filechooser, | ||||||
| .nautilus-window { | .nautilus-window { | ||||||
|   placessidebar.sidebar { |   placessidebar.sidebar { | ||||||
| @ -28,7 +30,10 @@ filechooser, | |||||||
|         margin-left: 6px; |         margin-left: 6px; | ||||||
|         margin-right: 6px; |         margin-right: 6px; | ||||||
|         border-radius: $button_radius; |         border-radius: $button_radius; | ||||||
|         box-shadow: 0 2px 4px transparentize($selected_bg_color, .5); |         box-shadow: $_glow_shadow; | ||||||
|  |         transition: box-shadow $backdrop_transition; | ||||||
|  | 
 | ||||||
|  |         &:backdrop { box-shadow: none; } | ||||||
| 
 | 
 | ||||||
|         &:dir(ltr) { |         &:dir(ltr) { | ||||||
|           background-image: linear-gradient(to right, darken($selected_bg_color, 10%) 35px, transparent 0); |           background-image: linear-gradient(to right, darken($selected_bg_color, 10%) 35px, transparent 0); | ||||||
| @ -50,6 +55,26 @@ filechooser, | |||||||
|   } |   } | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
|  | .floating-bar { | ||||||
|  |   background-color: $selected_bg_color; | ||||||
|  |   border-color: $selected_borders_color; | ||||||
|  |   margin: 10px; | ||||||
|  |   box-shadow: $_glow_shadow; | ||||||
|  |   transition: background-color $backdrop_transition; | ||||||
|  | 
 | ||||||
|  |   &:backdrop { | ||||||
|  |     box-shadow: none; | ||||||
|  |     border-color: $borders_color; | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   &.bottom { | ||||||
|  |     &.left, &.right{ | ||||||
|  |       border-radius: $button_radius; | ||||||
|  |       border-style: solid; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | 
 | ||||||
| /* XFCE4 PANEL */ | /* XFCE4 PANEL */ | ||||||
| .xfce4-panel { | .xfce4-panel { | ||||||
|   &.background { background: $panel_bg; } |   &.background { background: $panel_bg; } | ||||||
|  | |||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user
	 Daniel Ruiz de Alegría
						Daniel Ruiz de Alegría