TabsAsideExtension/css/style.generic.css

.updateBadge
{
	display: none;
}
.tabsAside[updated] .updateBadge
{
	width: 10px;
	height: 10px;
	background-color: #0078d7;
	border-radius: 5px;
	display: block;
}

/* Custom scrollbar */
.tabsAside ::-webkit-scrollbar
{
	height: 6px;
	width: 6px;
}

.tabsAside ::-webkit-scrollbar-thumb
{
	background: darkgray;
	border-radius: 3px;
}
	.tabsAside ::-webkit-scrollbar-thumb:hover
	{
		background: gray;
	}

.tabsAside
{
	font-family: "SegoeUI", "SegoeMDL2Assets" !important;
	font-size: 14px;
	user-select: none;
}

/* Links style */
.tabsAside a
{
	color: #0078d7;
}
	.tabsAside a:hover
	{
		text-decoration: underline;
		cursor: pointer;
	}

	.tabsAside a:visited
	{
		color: #0078d7;
	}

/* Buttons style */
.tabsAside button
{
	width: 28px;
	height: 28px;
	font-size: 16px;
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none !important;
	position: relative;
}
	.tabsAside button:hover
	{
		background-color: #f2f2f2;
	}
	.tabsAside button:active
	{
		background-color: gray;
	}

/* Context menus style */
.tabsAside nav
{
	user-select: none;

	position: absolute;
	width: 390px;
	font-size: 12px;

	box-shadow: 0px 4px 10px rgba(0,0,0,.25);
	background-color: white;
	border-radius: 5px;

	z-index: 10;

	visibility: hidden;
	padding: 4px 0px;
}

	.tabsAside nav hr
	{
		border: none;
		height: 1px;
		background-color: rgba(0, 0, 0, .1);
		margin: 4px 0px
	}

	.tabsAside nav button
	{
		align-content: center;
		text-align: start;

		padding: 0px 12px;
		width: 100%;

		height: 32px;
		font-family: "SegoeUI";
		font-size: 12px;

		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-column-gap: 14px;
	}

		.tabsAside nav button:hover
		{
			background-color: #eeee;
		}

		.tabsAside nav button img:first-child
		{
			width: 16px;
			height: 16px;
		}

		.tabsAside nav button img:nth-child(3)
		{
			width: 12px;
			height: 12px;
		}

		.tabsAside nav button *:nth-child(3)
		{
			align-self: center;
		}

	.tabsAside button + nav:active,
	.tabsAside button:focus + nav
	{
		visibility: visible;
	}

/* Icon buttons style */
.btn
{
	background-repeat: no-repeat;
	background-size: 12px;
	background-position: center;
	font-family: "SegoeUI", "SegoeMDL2Assets";
}

.control.checkbox
{
	display: block;
	position: relative;
	padding: 8px 12px 8px 42px;
	box-sizing: border-box;
	cursor: pointer;
	min-height: 32px;
}
	.control.checkbox:hover
	{
		background-color: #eeeeee;
	}
	.control.checkbox input
	{
		position: absolute;
		opacity: 0;
		width: 0;
		height: 0;
	}
	.control.checkbox input + span
	{
		position: absolute;
		left: 12px;
		height: 16px;
		width: 16px;

		transition-property: background, border, border-color;
		transition-duration: 200ms;
		transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1);
	}
		.control.checkbox input + span::after
		{
			position: absolute;
			color: rgba(0, 0, 0, .4);

			font-family: "SegoeMDL2Assets";
			content: "\E001";

			width: 16px;
			height: 16px;
			font-size: 16px;
			text-align: center;

			display: none;
		}
			.control.checkbox input:checked + span::after
			{
				display: block;
				color: black;
			}
			.control.checkbox:hover input + span::after
			{
				display: block;
			}

@font-face
{
	font-family: "SegoeUI";
	src: local("Segoe UI"),
		url("../fonts/segoeui.ttf") format("truetype"),
		url("../fonts/segoeui.woff") format("woff")
}

@font-face
{
	font-family: "SegoeMDL2Assets";
	src: local("Segoe MDL2 Assets"),
		url("../fonts/segoemdl2.ttf") format("truetype"),
		url("../fonts/segoemdl2.woff") format("woff")
}