GSYH/WebRoot/static/ace/css/less/page.inbox.less

.enable_inbox() when(@enable-inbox = true) {

.inbox-tabs.nav-tabs {
  > li {
	> a {
		background-color:#FAFAFA;
	}
	&.active:not(.open) > a {
		& , &:hover, &:focus {
			background-color:#F1F5FA;
			box-shadow:0 -2px 3px 0 rgba(0, 0, 0, 0.1);
			color:#48768E;
		}
	}

	> a.btn-new-mail {
		background-color:transparent;
		border:none !important;
		padding:0 !important;
		> .btn {
			border-width:0 !important;
			border-radius:3px !important;

			padding:0 6px !important;

			position:relative;

			transition:none !important;
		}
	}
	&.active > a.btn-new-mail {
		box-shadow:none !important;

		> .btn:before {
			content: "";
			display: block;
			position: absolute;

			top: 100%;
			left: 50%;
			margin-left: -6px;
			
			border-width:6px 8px;

			border-style:solid;
			border-color:transparent;
			border-top-color:inherit;
		}
	}

  }

  &.tab-size-bigger > li {
	> a {
		padding: 5px 15px 7px;
		font-size: @font-size-inbox-tab-large;
		> .@{icon}:first-child  {
			margin-bottom: 5px;
		}

		&.btn-new-mail > .btn{
			padding: 10px !important;
			border-radius: 7px !important;
		}
	}
	
	&.active > a.btn-new-mail {
		margin-top:0 !important;
		top:1px;
	}
	&.active > a.btn-new-mail > .btn:before {
		left: 50%;
		margin-left: -8px;

		border-width:8px 10px;
	}
  }

}


@media only screen and (max-width: @screen-tiny-max) {//475px
 .inbox-tabs > .li-new-mail {
	display:block;
	text-align:right;
	margin-bottom:8px !important;
	float:none !important;
 }
 .inbox-tabs > .li-new-mail > .btn-new-mail {
	display:inline-block;
	width:auto;
 }
}






.message-container {
 position:relative;
}
.message-list {
 position:relative;
}
.message-item {
 border:1px solid #EAEDF1;
 border-bottom-width:0;
 padding:12px 12px 14px;
 line-height:18px;
 
 position:relative;
 background-color:#FFF;
 
 &:first-child {
	border-top-width:0;
 }
 
 &:hover {
	border-color:#E2EAF2;
	background-color:#F2F6F9;
	
	+ .message-item {
		border-top-color:#E2EAF2;
		
		&.selected {
			border-top-color:#FFF;
		}
	}
 }
 
 &.selected {
	background-color:#EFF4F7;
	border-color:#FFF #E2EAF2;
	
	+ .message-item{
		border-top-color:#FFF;

		&:hover + .message-item {
			border-top-color:#FFF;
		}
	}
 }
}

.message-navbar , .message-item {
 input.ace + .lbl::before {
	top: auto;
 }
}



.message-item {
 .sender {
	margin:0 6px 0 4px;
	vertical-align:middle;
	color:#467287;

	display:inline-block;
	width:110px; height:18px;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space: nowrap;

	cursor:pointer;
 }
 &.message-unread .sender {
	color:#6A9CBA; font-weight:bold;
 }

 .summary {
	vertical-align:middle;
	display:inline-block;
	position:relative;
	
	margin-left:30px;

	max-width: 250px;
	max-width: ~"calc(100% - 300px)";
	min-width: 200px;
	white-space: nowrap;

	.text {
		color:#555;
		vertical-align:middle;
		display:inline-block;

		width:auto;
		max-width:100%;
		height:18px;
		text-overflow:ellipsis;
		overflow:hidden;
		white-space: nowrap;

		cursor:pointer;
		
		&:hover {
			text-decoration:underline;
		}
	}
	
	.message-flags {
		display:block;
		position:absolute;

		right: 100%;
		margin-right: 4px;
		
		height:18px;
		white-space: nowrap;
	}
	
 }
 &.message-unread .summary .text {
	color:#609FC4;
	font-weight:bold;
 }


 .time {
	float:right;
	width:60px;
	height:18px;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space: nowrap;
	color:#666;
 }
 &.message-unread .time {
	font-weight: bold;
	color: #609FC4;
 }
 &.message-unread .message-content .time {
	font-weight: normal;
 }
 

 .attachment {
	color: #999;
	font-size: @font-size-inbox-attachment-icon;
	vertical-align: middle;
	float: right;
	margin: 0 12px;
	position: relative;
 }
 &.message-unread .attachment{
	color:#4F99C6;
 }
}
.message-content .time {
 font-weight: normal;
}

.message-star{
 vertical-align: middle;
 margin: 2px 4px 0 6px;
 font-size: @font-size-inbox-start-icon;
 cursor: pointer;
 
 &:hover {
	color: @ace-orange2 !important;
	text-decoration: none;
 }
}


.mail-tag:empty {
 display:inline-block;
 width:8px; height:11px;
 padding:0; line-height:normal;
 vertical-align:middle;
 margin:0 1px 0 0;
}
.badge.mail-tag{
 border-radius:2px;
}
.dropdown-menu > li > a >.mail-tag {
 vertical-align: inherit;
}



@media only screen and (max-width: @screen-sm-max) {
 .message-item .summary {
	min-width:0;
 }
 .message-item .sender {
	width:100px;
 }
}


@media only screen and (max-width: 550px) {
 .message-item .summary {
	margin:8px 0 0 32px;
	max-width:95%;
	min-width:0;
	 
	display:block;
 }
 .message-item .sender {
	width:auto;
	max-width:150px;
 }
 .message-item .summary  .text {
	max-width:95%;
 }
}




.btn-message , .btn-message:hover , .btn-message:focus, .btn-message:active, .open .btn-message.dropdown-toggle {
 background-color:#FFF  !important;
 border:1px solid #94B9CE !important;
 color:#7CA3BA !important;
 text-shadow:none !important;
}




.message-content {
 padding:16px 12px;
 border:1px solid #E9E9E9;
 .box-shadow(~"0 0 1px 1px rgba(0,0,0,0.02)");
 background-color:rgba(255,255,255,0.8);
 border-top-width:0;
 
 .message-item & {
	margin-top:16px;
	border-top-width:1px;
 }
}
.message-body {
  padding:0 9px;
  color:#6A7177;
}


.message-navbar {
 line-height:24px;
 padding:10px 12px;
 border:1px solid #D6E1EA;
 border-color:#D6E1EA transparent;
 
 background-color:#F1F5FA;
 text-align: center;
 
 position:relative;
}

.message-navbar , .message-content {
 .dropdown-toggle {
	color:#777;	
	&:hover, &:focus {
		text-decoration:none;
		color:#2283C5;
	}
 }
}



.message-bar {
  display:inline-block;
  min-height:28px;
}

@media only screen and (max-width: @screen-xs) {
.message-bar {
  display:block;
  min-height:60px;
 }
}


.message-footer {
  background-color: #F1F1F1;
  padding: 12px 16px;
  border: 1px solid #E6E6E6;
  border-width: 1px 0;
  border-top: 1px solid #E4E9EE;

 .pagination {
	margin: 0;
	> li {
		margin: 0;
		padding: 0;
		
		> a , > span {
			color: #777;
			padding: 3px 6px;

			margin-left: 1px;
			margin-right: 1px;

			background-color: transparent;
			border: 1px solid transparent;
		}
		&.disabled > span {
			color: #BBBBBB;
			cursor: default;
			background-color: transparent;
			border-color: transparent;
		}
		
		> a:hover {
			border-color: lighten(desaturate(#2283C5 , 25%) , 25%);
			color: #2283C5;
			text-decoration: none;
			background-color: #FFF;
		}
	}
 }

 input[type=text] {
	font-size: @base-font-size - 1;

	width: 34px;
	height: 24px;
	line-height: 20px;

	margin-bottom: 0;
	
	padding: 3px;
	vertical-align: middle;
	text-align: center;
 }

}


.message-footer-style2 .pagination > li {
	 > a , > span {
		border: 1px solid #B5B5B5;
		border-radius: 100% !important;
		width: 26px;
		height: 26px;
		line-height: 26px;
		
		display: inline-block;
		text-align: center;
		padding: 0;
	}
	> span , &.disabled > span {
		border-color:#CCC;
	}

	> a:hover {
		border-color: #84AFC9;
		background-color: #F7F7F7;
	}
}



.message-item.message-inline-open {
 background-color:#F2F6F9;
 border:1px solid #DDD;
 border-bottom-color:#CCC;

 &:first-child {
	border-top-color:#EEE;
 }
 &:last-child {
	border-bottom-color:#DDD;
 }
 + .message-item {
	border-bottom-color:transparent;
 }
}



.message-loading-overlay {
 position: absolute;
 z-index: 14;
 top: 0;
 bottom: 0;
 right: 0;
 left: 0;

 background-color: rgba(255,255,255,0.5);
 text-align: center;

 > .@{icon} {
		position: absolute;
		top: 15%;
		left: 0;
		right: 0; 
		text-align: center;
 }
}


.message-content {
  .sender {
	color:#6A9CBA;
	font-weight:bold;
	width:auto;
	text-overflow:inherit;
	vertical-align:middle;
	margin:0;
  }
  .time {
	width:auto;
	text-overflow:inherit;
	white-space:normal;
	float:none;
	vertical-align:middle;
  }
  
}



ul.attachment-list {
 margin:6px 0 4px 8px;
 > li{
	margin-bottom:3px;
 }
}
.message-attachment {
  padding-left:10px;
  padding-right:10px;
}

.attached-file {
 color: #777;
 width: 200px;
 display: inline-block;

  > .@{icon} {
	display: inline-block;
	width: 16px;
	margin-right: 2px;
	vertical-align: middle;
 }
 
 &:hover {
	text-decoration: none;
	color: #438EB9;
	
	.attached-name {
		color: #2283C5;
	}
 }
 .attached-name {
	display: inline-block;
	max-width: 175px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	vertical-align: middle;
 }
 
}





.messagebar-item-left , .messagebar-item-right {
 position: absolute;
 bottom: 14px;
 left: 12px;
 text-align: left;
}
.messagebar-item-right {
 right: 12px;
 left: auto;
}
.message-navbar .nav-search {
  right: auto;
  left: 5px;
  top: auto;
  bottom: 11px;
}
.message-navbar .messagebar-item-left ~ .nav-search {
  left: 60px;
}




.message-form {
 border:1px solid #ddd;
 border-top:none;
 padding-top:22px;
}

@media only screen and (max-width: @screen-xs) {
 .message-form {
	padding-left:16px;
	padding-right:16px;
 }
}

.message-form {
 .form-actions {
	margin-bottom:0;
 }
 
 .wysiwyg-editor {
	overflow:auto;
	min-height:150px;
	max-height:250px;
	height:auto;
 }
}

.btn-send-message {
  position: relative;
  top: 6px;
  vertical-align: middle;
  
}

.btn-back-message-list {
  color: #777;
  &:hover {
	color: #478FCA;
	text-decoration: none;
 }
}



.message-condensed {
	.message-item {
		padding-top:8px;
		padding-bottom:9px;
	}
	.message-navbar , .message-footer {
		padding-top:7px;
		padding-bottom:7px;
	}
	
	.messagebar-item-left , .messagebar-item-right {
		bottom:9px;
	}
	.message-navbar .nav-search {
		bottom:7px;
	}
}

@media only screen and (max-width: @screen-xs) {
.message-condensed .message-bar {
  min-height:42px;
 }
}





.enable_inbox_tabless() when(@enable-inbox-tabless = true) {
//alternative to tabs
.inbox-folders  .btn-block {
	margin-top:0;
}
@media only screen and (max-width: @screen-xs-max) {
 .inbox-folders.inbox-folders-responsive  .btn-block {
	width:24%;
 }
}
@media only screen and (max-width: 600px) {
 .inbox-folders.inbox-folders-responsive   .btn-block {
	width:48%;
 }
}
@media only screen and (max-width: @screen-tiny) {
 .inbox-folders.inbox-folders-responsive   .btn-block {
	width:99%;
 }
}


.inbox-folders  .btn-lighter  , .inbox-folders  .btn-lighter.active {
	background-color:#F4F4F4 !important;
	text-shadow:none !important;
	color:#7C8395 !important;
	border:1px solid #FFF  !important;
	padding:5px 11px;
}
.inbox-folders .btn-lighter.active {
	background-color:#EDF2F8 !important;
	color:#53617C !important;
}

.inbox-folders  .btn-lighter:hover {
	background-color:#EFEFEF !important;
	color:#6092C4 !important;
}
.inbox-folders .btn > .@{icon}:first-child {
	display:inline-block;
	width:14px;
	text-align:left;
} 


.inbox-folders  .btn-lighter + .btn-lighter {
	border-top-width:0 !important;
}

.inbox-folders  .btn.active:before{
	display:block;
	content:"";
	position:absolute;
	top:1px; bottom:1px; left:-1px;
	border-left:3px solid #4F99C6;
}
.inbox-folders  .btn.active:after{ 
	display:none;
}

.inbox-folders .btn .counter {
	border-radius:3px;
	position:absolute;
	right: 8px;
	top:8px;
	padding-left:6px; padding-right:6px;
	.opacity(0.75);
}
.inbox-folders  .btn:hover .badge{
	.opacity(1);
}

}
.enable_inbox_tabless();


}
.enable_inbox();