nmdc-webfrontend/client/dcwebui.less

/* dcwebui.css */

* {
	-webkit-text-size-adjust:100%;
	   -moz-text-size-adjust:100%;
	    -ms-text-size-adjust:100%;
}

html,body {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
	border:0;
	font-family:Geneva,Helvetica,Arial,sans-serif;
	font-size: 12px;
}
.placement-top {
	height:24px;
	
	position:absolute;
	top:0;
	left:0;
	right:0;
}
.placement-mid {
	position:absolute;
	top:24px;
	right:0;
	bottom:40px;
	left:0;
}
.placement-bottom {
	height:40px;
	
	position:absolute;	
	bottom:0;
	left:0;
	right:0;
}
.placement-panel {	
	width:150px;
	
	position:absolute;	
	right:0;
	top:24px;
	bottom:40px;	
}
.placement-vary {
	/* Nothing, at this media query level */
}

/* WiiU placements */
.navigator-wiiu {
	.placement-mid {
		bottom:120px;
	}
	.placement-bottom {
		height:120px;
	}
	.placement-panel {
		bottom:120px;
	}
}

/* Menu button */
.menubutton {
	position:absolute;
	right:2px;
	top:2px;
	
	cursor:pointer;
	color:black;
	font-weight:bold;
	
	line-height:0;
	height:18px;
	width:18px;
	text-align:center;
	
	svg {
		width: 18px;
		height: 18px;
	}
	
	&:hover {
		background:white;
	}
}

/* Menu list */
.menu {
	background:#DDD;
	
	box-shadow: 0 4px 24px #CCC;
	
	display:none; /* default state */
	
	position:absolute; /* but not positioned anywhere specifically */
	
	width:200px;
	z-index:10; /* above placement-panel */
	
	overflow-y:auto;
	
	ul {
		margin:0;
		padding:0;
	}
	
	li {
		list-style-type:none;
		padding:6px;
		cursor:pointer;
		
		&:hover {
			background:#333;
			color:white;
		}
	}
}

/* Tabs */
.tabbar {
	position:relative;
	overflow:hidden;
	
	background:darkgrey;
	background-image:         linear-gradient(bottom,#BBBBBB,#EEEEEE);
	background-image:     -ms-linear-gradient(bottom,#BBBBBB,#EEEEEE);
	background-image:    -moz-linear-gradient(bottom,#BBBBBB,#EEEEEE);
	background-image: -webkit-linear-gradient(bottom,#BBBBBB,#EEEEEE);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BBBBBB, endColorstr=#EEEEEE); /* IE 6-8 */
}
.tabitem {
	display:inline-block;
	background:white;
		
	height:20px;
	border-top:2px solid white;
	border-right:1px solid lightgrey;
	margin-top:2px;
	padding:0 8px;
	
	&:hover {
		border-top:2px solid #EEE;
	}
	
	&.selected {
		border-top:2px solid darkgreen;
	}
	
	&.unread {
		background:lightyellow;
	}
}

.tab-label {
	cursor:pointer;
}
.tab-closer {
	background:#F8F8F8;
	color:grey;
	font-weight:bold;
	cursor:pointer;
	
	display:inline-block;
	*display:block; /* IE7 */
	*zoom:1; /* IE7 */
	
	text-align:center;
	
	/* Cosmetic */
	
	padding:0 3px;
	border-radius:12px;
	border:1px solid white;
	line-height:12px;
	
	position:relative;
	top:1px;
	
	-webkit-transition:0.1s linear all;
	   -moz-transition:0.1s linear all;
	        transition:0.1s linear all;
	        
	&:hover {
		background:#FFDDDD;
		border:1px solid red;
		color:black;
	}
}

/* */
.content {
	display:block;
}
.content-inner {
	overflow:hidden;
	overflow-y:auto;
	-webkit-transition: all 0.25s ease-in-out;
	
	padding:0;
	margin:0;
	box-sizing:border-box;
	
	position:absolute;
	top:4px;
	bottom:4px;
	left:4px;
	right:0;
}
/* */
#basebar {
	border-top: 1px solid #999;
	
	text-align:center;
	font-weight:bold;
	color:white;
	vertical-align:middle;
	
	background: #ACB9CA;
	background-image:         linear-gradient(bottom,#6E85A2,#ACB9CA);
	background-image:     -ms-linear-gradient(bottom,#6E85A2,#ACB9CA);
	background-image:    -moz-linear-gradient(bottom,#6E85A2,#ACB9CA);
	background-image: -webkit-linear-gradient(bottom,#6E85A2,#ACB9CA);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#6E85A2, endColorstr=#ACB9CA); /* IE 6-8 */
}
#form-none {
	height:32px;
	position:absolute;
	right:4px;
	left:4px;
	top:4px;
}
#chatbox-container {
	padding:1px;
	
	padding-right: 15px; /* (6 + 1)*2 plus 1 expected */
	
	position:absolute;
	left:0;top:0;bottom:0;right:32px;
}
#chatbox {
	font-size:1.2em;
	font-family:Geneva,Helvetica,Arial,sans-serif;
	
	border:1px;
	border-radius:3px;
	padding:0 6px;
	margin:0;
	
	display:block;
	width:100%;
	height:100%;
}
#submit-container {
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	width:32px;
}
#btsubmit {
	width:100%;
	height:100%;
	
	font-size:1.2em;
	font-family:Geneva,Helvetica,Arial,sans-serif;
}

/* iOS-style list view */

.ul-large {
	background-color: #e9e9e9;
	border: 1px solid #ccc;
	width: 95%;
	display: block;
	position: relative;
	padding: 0; 
	margin-left: auto;
	margin-right: auto;
	-webkit-border-radius: 12px;
	   -moz-border-radius: 12px;
	        border-radius: 12px;
	        
	li {
		color: #333;
		font: bold 15px Geneva, Arial, Helvetica, sans-serif; 
		vertical-align: middle;
		border-bottom: 1px solid #ccc;
		list-style-type: none;
		text-align: left;
		white-space: nowrap;
		overflow: hidden;
		height: 30px;
		list-style-type: none; 
		display: block;
		padding: 15px 5px 5px 10px;		
		cursor:pointer;
		
		&:first-child {
			border-top: 0;
			-webkit-border-top-left-radius: 12px;
			-webkit-border-top-right-radius: 12px;
			-moz-border-top-left-radius: 12px;
			-moz-border-top-right-radius: 12px;
					border-top-left-radius: 12px;
					border-top-right-radius: 12px;
		}
		
		&:last-child {
			border-bottom: 0;
			-webkit-border-bottom-left-radius: 12px;
			-webkit-border-bottom-right-radius: 12px;
			-moz-border-bottom-left-radius: 12px;
			-moz-border-bottom-right-radius: 12px;
					border-bottom-left-radius: 12px;
					border-bottom-right-radius: 12px;
		}
	}
}

/* Text */

.tx-sys, .tx-user, .tx-chat {	
	white-space:pre-wrap;
}
.tx-time {
	color:grey;
}
.tx-sys {
	font-weight: bold;
	color: darkgreen;
}
.tx-user {
	font-weight: bold;
	color: black;
}
.tx-chat {
	color: black;
}

/* webkit scrollbars */

::-webkit-scrollbar-track-piece{
	/*background-color:#fff;*/
	-webkit-border-radius:0;
}
::-webkit-scrollbar{
	width:8px;
	height:8px;
}
::-webkit-scrollbar-thumb{
	height:50px;
	background-color:#CCC;
	-webkit-border-radius:4px;
	outline:2px solid #fff;
	outline-offset:-2px;
	border: 2px solid #fff;
	
	-webkit-transition:background-color 0.1s;
	transition:background-color 0.1s;
}
::-webkit-scrollbar-thumb:hover{
	height:50px;
	background-color:#999;
	-webkit-border-radius:4px;
}

/* Userlist */

#panel-userlist {
	border-left:1px solid #EEE;
	background:#F8F8F8;
	overflow-y: auto;
}

.user-is-operator {
	color:darkgreen;
	font-weight:bold;
}

/* User sprite */

.ul-mini {
	padding-left: 4px;
	margin-top:4px;
	
	li {
		list-style-type:none;
		min-height:13px;
		line-height:13px;
		padding-left:14px;
		margin-bottom:5px;
		cursor:pointer;
		
		background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAANCAYAAACQN/8FAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABh0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzT7MfTgAAAZJJREFUKJFtz71rE2EAgPHnrknbXBKkLWhx0DhoWsEOxk0taMGlQ7cimElK5uroH5DFSUQ3KQpV2qlQEDJ4mKFQ0MVS6kfN1dQP2ss1ydW79y6Xu3udBG36zL/lUaSUVKtVqes6hmGgaRqlUulUoVAw+ScV4P2bFfrEPhnF4+v2NuVy+QFHSjiNXWV2cgzh+dRqX1hsNflcr5/tgcJ14larSdDxCYIOuWEV0c3+7oEAxk4NANu2GUnFFIt3FnvgydxFZb9hSRmFCCGwmjb3i3OVo1AFyF2bZm/PxDRN4rDDo4WHt4+F77RfmKNZ1MQA9ukTPPeXXt14OvXita5f+guVJ+uPZ1brlZUJI08qG/F26AP9chDXO8RpeyzNvMyMnc+7fembmU9WYJFXL7M1YtBNhqRIEYURh1Gb/u+DH69fubqRaLQOcAccHDy++TW0pEaATzcOkFHMxs/NCQD13oV50laaH/EuQdhBhAIRClzF/W9GkVIC8Gx54dZafa3SDmxc1SEdZxgfHmdu+m7y3Jlc+AextbuG6q1RSQAAAABJRU5ErkJggg==') no-repeat 0 0;
		
		&:hover {
			background-color:#EEE;
		}
	}
}

/* Display userlist alongside main chat for wide screens */

#panel-userlist {
	display:none;
}
@media screen and (min-width: 590px) {
	
	.placement-vary {
		right:150px;
	}
	#panel-userlist {
		display:block;
	}
	#tabitem-tab-users {
		display:none;
	}
	.position-panel {
		display:block;
	}
}