motif-scrollbars.user.styl

/* ==UserStyle==
@name           Motif-style scrollbars
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
@preprocessor   stylus
==/UserStyle== */

@-moz-document domain("4channel.org"), domain("4chan.org") {
	:root {
		--color-scrollbar-background: #989898;
		--color-scrollbar-thumb: #aeb1b2;
		--color-border-light: #dcdddd;
		--color-border-dark: #5c5e5e;

		--border-raised:
				inset 1px 1px var(--color-border-light),
				inset -1px -1px var(--color-border-dark),
				inset 2px 2px var(--color-border-light),
				inset -2px -2px var(--color-border-dark);
	}

	body {
		image-rendering: pixelated;
	}

	::-webkit-scrollbar {
		background-color: var(--color-scrollbar-background);
		width: 17px;
		height: 17px;

		&:horizontal {
			height: 18px;
		}

		&-button {
			background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOAgMAAABiJsVCAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAMUExURdzd3VxeXq6xsgAAAByR+OkAAAAEdFJOU////wBAKqn0AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAMUlEQVQI12MQDQ0NYGAFEYdWrSyAEB9WLf0AIf5oTYcS/7niYcTBehjx8T+Q+PD/AwBw5yWc/D+i/wAAAABJRU5ErkJggg==');
			background-position: center top;
			background-repeat: no-repeat;
			padding-bottom: 2px;
			width: 18px;
			height: 16px;

			&:decrement {
				background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOAgMAAABiJsVCAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAMUExURdzd3VxeXq6xsgAAAByR+OkAAAAEdFJOU////wBAKqn0AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAMUlEQVQI12P4/+H/B4b/H0HEwXoYwRUPJf5oTYcSH1YthRKHVq0sgBCsoaEBDKJAAgDZLSWcz2/guAAAAABJRU5ErkJggg==');
			}

			&:horizontal {
				background-position-y: center;

				&:decrement {
					background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOAgMAAABiJsVCAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAMUExURVxeXq6xstzd3QAAAMD6t/QAAAAEdFJOU////wBAKqn0AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAM0lEQVQIHQXBoQHAIBAAsZiO+PswSk0N06Ex10RFHQqdhwznGdYMe4b7De2h+1Gbukv1/g7jH0fIdgr3AAAAAElFTkSuQmCC');
				}

				&:increment {
					background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOAgMAAABiJsVCAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAMUExURdzd3VxeXq6xsgAAAByR+OkAAAAEdFJOU////wBAKqn0AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAOUlEQVQIHQXBsQ2AMBAEMOskmm/IKmzAqD9CRiN1imC7z/nyIGOQWkQPUUvoEa43zBm7xGzZRTQp/OX9DGjlZikGAAAAAElFTkSuQmCC');
				}
			}
		}

		&-thumb {
			background-color: var(--color-scrollbar-thumb);
			background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAdSURBVChTY7xz9+5/BiIAY0xcHFEKqQ9GohsZGAAyihELw9bLXwAAAABJRU5ErkJggg==');
			background-position: center;
			background-repeat: no-repeat;
			box-shadow: var(--border-raised);

			&:horizontal {
				background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAjSURBVChTY7hz9+7/mLi4/wxQgIvPBOUTBKMK8QIiFTIwAAD6ihEXqZr25wAAAABJRU5ErkJggg==');
			}
		}
	}
}