Minor improvements to the mobile message view

[GitHub/WoltLab/WCF.git] / wcfsetup / install / files / style / layout / pageNavigation.scss

@include screen-md-up {
	.pageNavigation {
		background-color: $wcfNavigationBackground;
		color: $wcfNavigationText;
		flex: 0 0 auto;
		padding: 10px 0;
		
		> div {
			align-items: center;
			display: flex;
			justify-content: flex-end;
			min-height: 20px;
		}
		
		.icon {
			color: inherit;
		}
		
		a {
			color: $wcfNavigationLink;
			
			&:hover {
				color: $wcfNavigationLinkActive;
			}
		}
	}
	
	.boxesHeaderBoxes + .pageNavigation {
		margin-top: 1px;
	}
}

@include screen-lg {
	.pageNavigationIcons {
		display: flex;
		flex: 0 0 auto;
		flex-direction: row-reverse;
		margin-left: 10px;
		
		> li {
			flex: 0 0 auto;
			
			&:not(:last-child) {
				margin-left: 10px;
			}
		}
	}
}

@include screen-sm-down {
	.pageNavigation {
		display: none;
	}
}

@include screen-md-down {
	.pageNavigationIcons {
		display: none;
	}
}