CSS for scrollbars

scrollbars.css

/*
the colors you see (@main-normal, @main-dark, @gray2, etc)
are defined in an external file. here I will provide those valuse for the sake of completeness
*/

@define-color	gray1			#101010;
@define-color	gray2			#202020;
@define-color	gray3			#404040;

@define-color	main-normal		#00FFFF;
@define-color	main-dark 		#008080;
@define-color	main-darker		#004040;

scrollbar, scrollbar *{
	min-width: 4px;
	border-width: 0px;
	border-radius: 0px;
}

scrollbar:disabled, scrollbar:disabled *{
	color: @gray2;
	border-color: @gray2;
}

scrollbar.horizontal, scrollbar.horizontal *{
	min-height: 4px;
}

scrollbar.vertical, scrollbar.vertical *{
	min-width: 4px;
}

/* make the scrollbar wider when we hover above it */

scrollbar.hovering button{
	min-width: 8px;
	min-height: 8px;
}

scrollbar.horizontal.hovering, scrollbar.horizontal.hovering *{
	min-height: 8px;
}

scrollbar.vertical.hovering, scrollbar.vertical.hovering *{
	min-width: 8px;
}

/* make the scrollbar only show a border on the side facing inside the content */

scrollbar.top contents{
	border-bottom: 1px solid @main-dark;
}

scrollbar.bottom contents{
	border-top: 1px solid @main-dark;
}

scrollbar.left contents{
	border-right: 1px solid @main-dark;
}

scrollbar.right contents{
	border-left: 1px solid @main-dark;
}

/* disable the buttons only when the scrollbar isn't actively used */

scrollbar{
	-GtkScrollbar-has-backward-stepper: false;
	-GtkScrollbar-has-forward-stepper: false;
}

scrollbar.hovering{
	-GtkScrollbar-has-backward-stepper: true;
	-GtkScrollbar-has-forward-stepper: true;
}

/* make the buttons show a border only towards the slider */

scrollbar.top > contents > button:first-child,
scrollbar.bottom > contents > button:first-child{
	border-right: 1px solid @main-dark;
}

scrollbar.right > contents > button:first-child,
scrollbar.left > contents > button:first-child{
	border-bottom: 1px solid @main-dark;
}

scrollbar.top > contents > button:last-child,
scrollbar.bottom > contents > button:last-child{
	border-left: 1px solid @main-dark;
}

scrollbar.right > contents > button:last-child,
scrollbar.left > contents > button:last-child{
	border-top: 1px solid @main-dark;;
}

scrollbar slider{
	background-color: @main-dark;
}

scrollbar.dragging slider{
	background-color: @main-normal;
}