GTK3: change scrollbar colors
This commit is contained in:
		
							parent
							
								
									83c0fbfcce
								
							
						
					
					
						commit
						c8c7afdf0c
					
				| @ -2957,7 +2957,7 @@ notebook > stack:not(:only-child) { | ||||
|  * Scrollbars * | ||||
|  **************/ | ||||
| scrollbar { | ||||
|   background-color: #252831; | ||||
|   background-color: #272a34; | ||||
|   transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } | ||||
|   * { | ||||
|     -GtkScrollbar-has-backward-stepper: false; | ||||
| @ -2971,7 +2971,7 @@ scrollbar { | ||||
|   scrollbar.right { | ||||
|     border-left: 1px solid #0d0e11; } | ||||
|   scrollbar:backdrop { | ||||
|     background-color: #1c1e25; | ||||
|     background-color: #272a34; | ||||
|     border-color: #111217; | ||||
|     transition: 200ms ease-out; } | ||||
|   scrollbar slider { | ||||
| @ -2981,11 +2981,11 @@ scrollbar { | ||||
|     border: 4px solid transparent; | ||||
|     border-radius: 8px; | ||||
|     background-clip: padding-box; | ||||
|     background-color: #9d9ea0; } | ||||
|     background-color: #41434b; } | ||||
|     scrollbar slider:hover { | ||||
|       background-color: #c5c6c6; } | ||||
|       background-color: #4b4d54; } | ||||
|     scrollbar slider:hover:active { | ||||
|       background-color: #5a97ff; } | ||||
|       background-color: #2777ff; } | ||||
|     scrollbar slider:backdrop { | ||||
|       background-color: #4b4e54; } | ||||
|     scrollbar slider:disabled { | ||||
| @ -3046,7 +3046,7 @@ scrollbar { | ||||
|     box-shadow: inset 0 1px rgba(255, 255, 255, 0); | ||||
|     text-shadow: none; | ||||
|     -gtk-icon-shadow: none; | ||||
|     color: #9d9ea0; } | ||||
|     color: #41434b; } | ||||
|     scrollbar button:hover { | ||||
|       border-color: transparent; | ||||
|       background-color: transparent; | ||||
| @ -3054,7 +3054,7 @@ scrollbar { | ||||
|       box-shadow: inset 0 1px rgba(255, 255, 255, 0); | ||||
|       text-shadow: none; | ||||
|       -gtk-icon-shadow: none; | ||||
|       color: #c5c6c6; } | ||||
|       color: #4b4d54; } | ||||
|     scrollbar button:active, scrollbar button:checked { | ||||
|       border-color: transparent; | ||||
|       background-color: transparent; | ||||
| @ -3062,7 +3062,7 @@ scrollbar { | ||||
|       box-shadow: inset 0 1px rgba(255, 255, 255, 0); | ||||
|       text-shadow: none; | ||||
|       -gtk-icon-shadow: none; | ||||
|       color: #5a97ff; } | ||||
|       color: #2777ff; } | ||||
|     scrollbar button:disabled { | ||||
|       border-color: transparent; | ||||
|       background-color: transparent; | ||||
| @ -3070,7 +3070,7 @@ scrollbar { | ||||
|       box-shadow: inset 0 1px rgba(255, 255, 255, 0); | ||||
|       text-shadow: none; | ||||
|       -gtk-icon-shadow: none; | ||||
|       color: rgba(157, 158, 160, 0.2); } | ||||
|       color: rgba(65, 67, 75, 0.2); } | ||||
|     scrollbar button:backdrop { | ||||
|       border-color: transparent; | ||||
|       background-color: transparent; | ||||
| @ -4398,12 +4398,12 @@ scrolledwindow overshoot.right { | ||||
| scrolledwindow junction { | ||||
|   border-color: transparent; | ||||
|   border-image: linear-gradient(to bottom, #0d0e11 1px, transparent 1px) 0 0 0 1/0 1px stretch; | ||||
|   background-color: #252831; } | ||||
|   background-color: #272a34; } | ||||
|   scrolledwindow junction:dir(rtl) { | ||||
|     border-image-slice: 0 1 0 0; } | ||||
|   scrolledwindow junction:backdrop { | ||||
|     border-image-source: linear-gradient(to bottom, #111217 1px, transparent 1px); | ||||
|     background-color: #1c1e25; | ||||
|     background-color: #272a34; | ||||
|     transition: 200ms ease-out; } | ||||
| 
 | ||||
| separator { | ||||
|  | ||||
| @ -2957,7 +2957,7 @@ notebook > stack:not(:only-child) { | ||||
|  * Scrollbars * | ||||
|  **************/ | ||||
| scrollbar { | ||||
|   background-color: #252831; | ||||
|   background-color: #272a34; | ||||
|   transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } | ||||
|   * { | ||||
|     -GtkScrollbar-has-backward-stepper: false; | ||||
| @ -2971,7 +2971,7 @@ scrollbar { | ||||
|   scrollbar.right { | ||||
|     border-left: 1px solid #0d0e11; } | ||||
|   scrollbar:backdrop { | ||||
|     background-color: #1c1e25; | ||||
|     background-color: #272a34; | ||||
|     border-color: #111217; | ||||
|     transition: 200ms ease-out; } | ||||
|   scrollbar slider { | ||||
| @ -2981,11 +2981,11 @@ scrollbar { | ||||
|     border: 4px solid transparent; | ||||
|     border-radius: 8px; | ||||
|     background-clip: padding-box; | ||||
|     background-color: #9d9ea0; } | ||||
|     background-color: #41434b; } | ||||
|     scrollbar slider:hover { | ||||
|       background-color: #c5c6c6; } | ||||
|       background-color: #4b4d54; } | ||||
|     scrollbar slider:hover:active { | ||||
|       background-color: #5a97ff; } | ||||
|       background-color: #2777ff; } | ||||
|     scrollbar slider:backdrop { | ||||
|       background-color: #4b4e54; } | ||||
|     scrollbar slider:disabled { | ||||
| @ -3046,7 +3046,7 @@ scrollbar { | ||||
|     box-shadow: inset 0 1px rgba(255, 255, 255, 0); | ||||
|     text-shadow: none; | ||||
|     -gtk-icon-shadow: none; | ||||
|     color: #9d9ea0; } | ||||
|     color: #41434b; } | ||||
|     scrollbar button:hover { | ||||
|       border-color: transparent; | ||||
|       background-color: transparent; | ||||
| @ -3054,7 +3054,7 @@ scrollbar { | ||||
|       box-shadow: inset 0 1px rgba(255, 255, 255, 0); | ||||
|       text-shadow: none; | ||||
|       -gtk-icon-shadow: none; | ||||
|       color: #c5c6c6; } | ||||
|       color: #4b4d54; } | ||||
|     scrollbar button:active, scrollbar button:checked { | ||||
|       border-color: transparent; | ||||
|       background-color: transparent; | ||||
| @ -3062,7 +3062,7 @@ scrollbar { | ||||
|       box-shadow: inset 0 1px rgba(255, 255, 255, 0); | ||||
|       text-shadow: none; | ||||
|       -gtk-icon-shadow: none; | ||||
|       color: #5a97ff; } | ||||
|       color: #2777ff; } | ||||
|     scrollbar button:disabled { | ||||
|       border-color: transparent; | ||||
|       background-color: transparent; | ||||
| @ -3070,7 +3070,7 @@ scrollbar { | ||||
|       box-shadow: inset 0 1px rgba(255, 255, 255, 0); | ||||
|       text-shadow: none; | ||||
|       -gtk-icon-shadow: none; | ||||
|       color: rgba(157, 158, 160, 0.2); } | ||||
|       color: rgba(65, 67, 75, 0.2); } | ||||
|     scrollbar button:backdrop { | ||||
|       border-color: transparent; | ||||
|       background-color: transparent; | ||||
| @ -4398,12 +4398,12 @@ scrolledwindow overshoot.right { | ||||
| scrolledwindow junction { | ||||
|   border-color: transparent; | ||||
|   border-image: linear-gradient(to bottom, #0d0e11 1px, transparent 1px) 0 0 0 1/0 1px stretch; | ||||
|   background-color: #252831; } | ||||
|   background-color: #272a34; } | ||||
|   scrolledwindow junction:dir(rtl) { | ||||
|     border-image-slice: 0 1 0 0; } | ||||
|   scrolledwindow junction:backdrop { | ||||
|     border-image-source: linear-gradient(to bottom, #111217 1px, transparent 1px); | ||||
|     background-color: #1c1e25; | ||||
|     background-color: #272a34; | ||||
|     transition: 200ms ease-out; } | ||||
| 
 | ||||
| separator { | ||||
|  | ||||
| @ -2968,7 +2968,7 @@ notebook > stack:not(:only-child) { | ||||
|  * Scrollbars * | ||||
|  **************/ | ||||
| scrollbar { | ||||
|   background-color: #dedfe2; | ||||
|   background-color: #fafafa; | ||||
|   transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } | ||||
|   * { | ||||
|     -GtkScrollbar-has-backward-stepper: false; | ||||
| @ -2982,7 +2982,7 @@ scrollbar { | ||||
|   scrollbar.right { | ||||
|     border-left: 1px solid #d9d9d9; } | ||||
|   scrollbar:backdrop { | ||||
|     background-color: #f7f7f7; | ||||
|     background-color: #fafafa; | ||||
|     border-color: #e0e0e0; | ||||
|     transition: 200ms ease-out; } | ||||
|   scrollbar slider { | ||||
| @ -2992,11 +2992,11 @@ scrollbar { | ||||
|     border: 4px solid transparent; | ||||
|     border-radius: 8px; | ||||
|     background-clip: padding-box; | ||||
|     background-color: #9da0a7; } | ||||
|     background-color: #ced0d3; } | ||||
|     scrollbar slider:hover { | ||||
|       background-color: #7d8189; } | ||||
|       background-color: #c6c8cc; } | ||||
|     scrollbar slider:hover:active { | ||||
|       background-color: #005af3; } | ||||
|       background-color: #2777ff; } | ||||
|     scrollbar slider:backdrop { | ||||
|       background-color: #dfdfe2; } | ||||
|     scrollbar slider:disabled { | ||||
| @ -3057,7 +3057,7 @@ scrollbar { | ||||
|     box-shadow: inset 0 1px rgba(255, 255, 255, 0); | ||||
|     text-shadow: none; | ||||
|     -gtk-icon-shadow: none; | ||||
|     color: #9da0a7; } | ||||
|     color: #ced0d3; } | ||||
|     scrollbar button:hover { | ||||
|       border-color: transparent; | ||||
|       background-color: transparent; | ||||
| @ -3065,7 +3065,7 @@ scrollbar { | ||||
|       box-shadow: inset 0 1px rgba(255, 255, 255, 0); | ||||
|       text-shadow: none; | ||||
|       -gtk-icon-shadow: none; | ||||
|       color: #7d8189; } | ||||
|       color: #c6c8cc; } | ||||
|     scrollbar button:active, scrollbar button:checked { | ||||
|       border-color: transparent; | ||||
|       background-color: transparent; | ||||
| @ -3073,7 +3073,7 @@ scrollbar { | ||||
|       box-shadow: inset 0 1px rgba(255, 255, 255, 0); | ||||
|       text-shadow: none; | ||||
|       -gtk-icon-shadow: none; | ||||
|       color: #005af3; } | ||||
|       color: #2777ff; } | ||||
|     scrollbar button:disabled { | ||||
|       border-color: transparent; | ||||
|       background-color: transparent; | ||||
| @ -3081,7 +3081,7 @@ scrollbar { | ||||
|       box-shadow: inset 0 1px rgba(255, 255, 255, 0); | ||||
|       text-shadow: none; | ||||
|       -gtk-icon-shadow: none; | ||||
|       color: rgba(157, 160, 167, 0.2); } | ||||
|       color: rgba(206, 208, 211, 0.2); } | ||||
|     scrollbar button:backdrop { | ||||
|       border-color: transparent; | ||||
|       background-color: transparent; | ||||
| @ -4421,12 +4421,12 @@ scrolledwindow overshoot.right { | ||||
| scrolledwindow junction { | ||||
|   border-color: transparent; | ||||
|   border-image: linear-gradient(to bottom, #d9d9d9 1px, transparent 1px) 0 0 0 1/0 1px stretch; | ||||
|   background-color: #dedfe2; } | ||||
|   background-color: #fafafa; } | ||||
|   scrolledwindow junction:dir(rtl) { | ||||
|     border-image-slice: 0 1 0 0; } | ||||
|   scrolledwindow junction:backdrop { | ||||
|     border-image-source: linear-gradient(to bottom, #e0e0e0 1px, transparent 1px); | ||||
|     background-color: #f7f7f7; | ||||
|     background-color: #fafafa; | ||||
|     transition: 200ms ease-out; } | ||||
| 
 | ||||
| separator { | ||||
|  | ||||
| @ -22,10 +22,10 @@ $menu_color: if($variant == 'light', $base_color, mix($borders_color, $bg_color, | ||||
| $popover_bg_color: $menu_color; | ||||
| $popover_hover_color: lighten($menu_color, 5%); | ||||
| 
 | ||||
| $scrollbar_bg_color: if($variant == 'light', mix($bg_color, $fg_color, 80%), mix($base_color, $bg_color, 50%)); | ||||
| $scrollbar_slider_color: mix($fg_color, $bg_color, 60%); | ||||
| $scrollbar_slider_hover_color: mix($fg_color, $bg_color, 80%); | ||||
| $scrollbar_slider_active_color: if($variant=='light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 10%)); | ||||
| $scrollbar_bg_color: $base_color; | ||||
| $scrollbar_slider_color: mix($fg_color, $bg_color, if($variant=='light', 30%, 15%)); | ||||
| $scrollbar_slider_hover_color: mix($fg_color, $bg_color, if($variant=='light', 35%, 20%)); | ||||
| $scrollbar_slider_active_color: $selected_bg_color; | ||||
| 
 | ||||
| $warning_color: #fd7d00; | ||||
| $error_color: #bf1717; | ||||
| @ -64,7 +64,7 @@ $backdrop_borders_color: mix($borders_color, $bg_color, 80%); | ||||
| $backdrop_dark_fill: mix($backdrop_borders_color, $backdrop_bg_color, 35%); | ||||
| $backdrop_sidebar_bg_color: mix($backdrop_bg_color, $backdrop_base_color, 50%); | ||||
| 
 | ||||
| $backdrop_scrollbar_bg_color: darken($backdrop_bg_color, 3%); | ||||
| $backdrop_scrollbar_bg_color: $scrollbar_bg_color; | ||||
| $backdrop_scrollbar_slider_color: mix($backdrop_fg_color, $backdrop_bg_color, 40%); | ||||
| 
 | ||||
| $backdrop_menu_color: if($variant == 'light', $backdrop_base_color, mix($backdrop_bg_color, $backdrop_base_color, 20%)); | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user
	 Daniel Ruiz de Alegría
						Daniel Ruiz de Alegría