header.less

@import (reference) "style";

// Subreddits bar
#sr-header-area {
	background-color: @srbar-bg !important;
	border-color: @srbar-border !important;
	
	a {
		color: @srbar-color !important;
		
		&:hover {
			color: white !important;
			text-decoration: none;
		}
	}
	
	.separator, .srSep {
		color: @srbar-border;
	}
	
	#sr-more-link {
		&:extend(#sr-header-area a);
		
		background-color: @srbar-bg !important;
	}
}

// "My Subreddits" drop-down
.srdrop {
	&:extend(#sr-header-area);
	
	.title {
		color: @srbar-alt-color !important;
	}
	
	.choice {
		&.bottom-option {
			border-color: @srbar-border;
		}
		
		&:hover {
			background-color: @srbar-border !important;
		}
	}
}

// RES subreddit bar
#srDropdown a:extend(.srdrop .title) {};

#srList:extend(.srdrop) {
	a, td {
		&:extend(#sr-header-area a);
	}
	
	tr {
		border-color: @srbar-border;
		
		&:hover {
			background-color: @srbar-border !important;
		}
	}
}

#RESShortcuts, #RESShortcutsEditContainer, #RESShortcutsSort, #RESShortcutsRight, #RESShortcutsLeft, #RESShortcutsAdd, #RESShortcutsTrash {
	&:extend(#sr-header-area #sr-more-link);
}

// User bar
#header-bottom-right {
	height: 16px !important;
	top: 19px;
	
	padding: 4px 8px 2px !important;
	
	background-color: @srbar-bg !important;
	
	border-color: @srbar-border;
	border-width: 1px;
	border-style: none none solid solid;
	border-radius: 0 !important;
	
	.res & {
		padding-bottom: 6px !important;
	}
	
	// Normal links
	a:not(.message-count):extend(#sr-header-area a) {}
	
	// User link
	.user > a:extend(.srdrop .title) {}
	
	// Orangereds
	#mail {
		&.nohavemail {
			opacity: 0.8;
		}
		
		&.havemail {
			transition: all 1s ease-in-out;
		}
	}
	
	// RES toggle
	#userbarToggle {
		bottom: -1px;
		
		background-color: @srbar-bg;
		
		border-color: @srbar-border;
		border-width: 1px;
		border-style: none none solid solid;
		border-radius: 0;
		
		color: @srbar-border;
	}
}

// Main header
#header {
	background: none;
	border: none;
	z-index: unset;
}

#header-bottom-left {
	height: @header-height;
}

// Snoo
#header-img-a {
	width: 260px;
	position: absolute;
	left: @content-padding;
	bottom: 0;
	
	text-align: center;
}

// Logo
#header .pagename {
	@logo-width: image-width(@logo-img);
	@logo-height: image-height(@logo-img);
	@logo-offset-x: @side-width + @content-padding;
	
	position: absolute;
	top: (@header-height - @logo-height)/2 + @srbar-height;
	//left: calc(~'50% - @{logo-offset-x}');
	left: 17%;
	
	font-size: 0;
	
	a {
		display: block;
		width: @logo-width;
		height: @logo-height;
		
		background-image: url(%%header-logo%%);
		background-repeat: no-repeat;
		background-position: center;
		background-size: auto @logo-height;
	}
}

// Tab bar
.tabmenu {
	width: @tabs-width;
	height: @tabs-height;
	
	position: absolute;
	top: @tabs-top;
	left: 0;
	
	margin: 0 @content-padding;
	
	background-color: @tabs-bg;
	box-shadow: 0 -2px 3px 0px @content-shadow-color;
	
    // Special case for some mod pages: contained within content body
    //.content & {
    //    width: calc(~'100% - -@{side-width}');
    //    top: -@tabs-height;
    //    left: -@content-padding;
    //}
    
    // Special case for submit page: contained within form#newlink
    form &.formtab {
        @w: 2*@content-padding + 10px;
        width: @tabs-form-width;
        top: @srbar-height + @header-height;
        //left: -@content-padding;
        
        li:extend(.tabmenu li all) {
            a {
                border: none;
            }
        }
    }
    
	li {
		display: inline-block;
		
		margin: 11px 4px 0;
		
		&:first-child {
			margin-left: 10px;
		}
		
		a {
			background: none !important;
			
			color: @tabs-color !important;
			font-size: 14px !important;
			font-weight: normal;
            
            transition: color @transition-time linear;
		}
        
        &:hover {
            a {
                color: @tabs-selected-color !important;
            }
        }
		
		&.selected {
 			a {
				background: none;
				border: none;
				
				color: @tabs-selected-color !important;
				text-shadow: 0 0 2px fade(@tabs-selected-color, 0.3);
			}
		}
	}
}