@import _normalize
@import _config
@import _utils

@import _apps_base
@import _notifications
@import _comments
@import _error


html
	height: 100%
	-webkit-font-smoothing: antialiased
	-moz-osx-font-smoothing: grayscale

body
	height: 100%
	font:
		family: $font-body, sans-serif
		size: $font-size
	color: $color-text-dark
	background-color: $color-background

	+media-sm
		width: 100%
		max-width: 100%
		min-width: auto

	+media-xs
		width: 100%
		max-width: 100%
		min-width: auto

h1, h2, h3, h4, h5
	font:
		family: $font-body
		weight: 300

a
	color: $color-primary-dark
	&:hover
		color: $color-primary

strong, b
	font-weight: 500

.container
	+media-xs
		max-width: 100%
		min-width: auto
		padding:
			left: 0
			right: 0

	&.box
		+container-box

.container-page
	background-color: $color-background

.page-content
	position: relative
	flex: 1
	.container-box
		+container-box


.navbar-fixed-top+.page-content
	padding-top: $navbar-height

.alert+.navbar-fixed-top+.page-content
	padding-top: 0

.alert
	display: block
	position: relative
	z-index: 16
	width: 100%
	margin-bottom: 0
	text-align: center
	padding: 15px 20px
	border-radius: 0
	border-bottom: thin solid rgba(black, .1)

	// overriden by alert types
	color: $color-text-dark
	background-color: $color-background

	+clearfix

	&.alert-danger,
	&.alert-error
		background-color: lighten($color-danger, 35%)
		color: $color-danger
		.alert-icon, .close
			color: $color-danger

	&.alert-warning
		background-color: lighten($color-warning, 20%)
		color: darken($color-warning, 20%)
		.alert-icon, .close
			color: darken($color-warning, 20%)

	&.alert-success
		background-color: lighten($color-success, 45%)
		color: $color-success

		.alert-icon, .close
			color: $color-success

	&.alert-info
		background-color: lighten($color-info, 30%)
		color: darken($color-info, 10%)
		.alert-icon, .close
			color: darken($color-info, 10%)

	button.close
		background: none
		border: none
		opacity: .5
		position: absolute
		top: 5px
		right: 10px
		padding: 10px

		&:hover
			opacity: 1

		i
			font-size: .8em

	i.alert-icon
		&:before
			font-family: "pillar-font"
			padding-right: 10px

		&.success:before
			content: '\e801'
		&.info:before
			content: "\e80c"
		&.warning:before
			content: "\e80b"
		&.danger:before,
		&.error:before
			content: "\e83d"


/* When there's an alert, disable the fixed top */
.alert+.navbar-fixed-top
	position: relative
	margin-bottom: 0

	&+.container
		padding-top: 0


/* Navigation */
header.navbar-header
	position: relative
	margin: 0
	z-index: 1 // to be on top of the overlay
	height: 100%

	.navbar-toggle
		color: white


.navbar-overlay
	display: none
	position: absolute
	top: 0
	left: 0
	right: 0
	bottom: 0
	z-index: 0
	width: 100%
	height: 100%

	transition: background-color 350ms ease-in-out

	&+.navbar-container
		.search-input
			margin: 8px 0
			border-radius: 3px
			border: thin solid transparent

			+media-lg
				border: thin solid rgba(white, .2)

				#cloud-search, .tt-hint
					&::placeholder
						color: rgba(white, .8)


	&.is-active
		background-color: $color-background-nav
		text-shadow: none

		&+.navbar-container
			.search-input
				+media-sm
					background-color: darken($color-background-nav, 6%)
				+media-md
					background-color: darken($color-background-nav, 6%)
				+media-lg
					border: thin solid transparent
					background-color: darken($color-background-nav, 6%)

				#cloud-search, .tt-hint
					&::placeholder
						color: rgba(white, .5)

	+media-lg
		display: block


.navbar-container
	align-items: center
	display: flex
	width: 100%

	.navbar-collapse
		+media-xs
			padding: 0
			width: 100%
			max-height: initial // overrides bs, we don't have many items

		&.show-notifications
			display: block

			li
				display: none
				&.nav-notifications
					display: block
					position: absolute
					top: 7px
					left: 0
					width: 100%
					z-index: $z-index-base

					#notifications
						padding: 0 10px


nav.navbar, nav.sidebar
	z-index: $z-index-base + 5 /* Flowplayer seems to take up to 11, project container is 12 */
	border: none
	border-width: 0
	display: flex
	align-items: center
	background-color: $color-background-nav

	nav
		margin-left: auto
		margin-right: 0

		.navbar-nav
			margin-right: 0
			+media-xs
				margin: 0
				width: 100%

	li
		user-select: none
		a.navbar-item
			user-select: none
			color: $color-text-light-secondary
			height: $navbar-height
			display: flex
			align-items: center
			padding:
				top: 3px
				bottom: 0
				left: 20px
				right: 20px

			font-weight: 400
			text-transform: uppercase
			border-bottom: 3px solid transparent
			transition: color 200ms ease-in-out, border-bottom 100ms ease-in-out

			+media-md
				padding-left: 15px
				padding-right: 15px
			+media-sm
				padding-left: 10px
				padding-right: 10px

			&:hover, &:focus
				color: $color-text-light
				background-color: rgba($color-background-nav, .4)
				border-bottom-color: $color-primary

			&:focus
				border-bottom-color: $color-primary

			&.active
				color: $color-text-light
				background-color: $color-background-nav
				border-bottom-color: lighten($color-secondary, 10%)

				&:hover
					border-bottom-color: lighten($color-secondary, 20%)

			.pi-angle-down
				position: relative
				left: 5px

		&.nav-item-sign-in
			i
				padding-right: 6px
				font-size: 1.1em

		img.gravatar
			border-radius: 999em
			height: 32px
			width: 32px
			box-shadow: 1px 1px 0 rgba(black, .2)
			position: relative


		.special
			width: 18px
			height: 18px
			border-radius: 999em
			position: absolute
			background-color: white
			z-index: 2
			display: inline-block
			top: 10px
			left: 38px
			font-size: 1.2em
			box-shadow: 1px 1px 1px rgba(black, .2)

			&.subscriber
				background-color: $color-success
				color: white
				font-size: .6em

			&.demo
				background-color: $color-info
				color: white
				font-size: .6em

			&.none
				color: $color-danger

			i
				+position-center-translate

	.navbar-brand
		height: $navbar-height
		display: flex
		align-items: center
		margin-left: 0 !important
		color: white
		padding:
			top: 8px
			left: 5px
			right: 20px // overrides bs

		&:hover
			span.app-logo
				transform: scale(1.1)

		span.app-logo
			font-size: 1.2em
			position: relative
			top: 3px
			transition: transform 150ms ease-in-out

	.dropdown
		position: relative
		min-width: 60px

		&:hover
			background-color: rgba($color-background-nav, .4)

		&.open a
			background-color: $color-background-nav

		span.fa-stack
			position: absolute
			top: 50%
			left: 50%
			transform: translate(-50%, -50%)

		ul.dropdown-menu
			padding-top: 0

			li
				a
					background-color: rgba(white, .3)
					text-shadow: none
					height: initial
					border-bottom: none
					font:
						family: $font-body
						size: .9em
					padding: 5px 15px 5px 5px
					color: rgba($color-text, .8)

					&:hover
						color: $color-primary

					&.subitem
						font-size: .8em
						padding-top: 0
						text-transform: initial

				i
					width: 35px
					text-align: center

				&.subscription-status
					padding:
						top: 10px
						bottom: 10px

					transition: opacity 150ms ease-in-out
					opacity: 1

					&:hover
						opacity: .8

					a
						text-transform: initial

					&.none a
						color: $color-danger
					&.subscriber a
						color: $color-success

					&.demo a
						color: $color-info

					span.info
						display: block

						span.renew
							display: block
							color: $color-text-dark-primary
							font-size: .9em


		&.libraries
			ul.dropdown-menu
				background-color: lighten($color-background-nav, 5%)
				color: white
				padding-top: 5px
				left: 0
				right: auto

				small
					padding-left: 5px
				li
					a
						background-color: transparent
						color: $color-text-light-primary

						&:hover
							color: $color-primary
					&.disabled a
						color: $color-text-dark-primary
						cursor: default


nav.sidebar
	ul li.nav-item-sign-in a.navbar-item
		font-size: .8em


.navbar-backdrop-container
	width: 100%
	height: 100%
	position: absolute
	top: 0
	left: 0
	right: 0
	bottom: 0

	img
		display: none
		position: fixed
		width: 100%
		align-self: flex-start
		+media-md
			display: block
		+media-lg
			display: block


.navbar-backdrop
	z-index: 0
	position: absolute
	top: 0
	left: 0
	right: 0
	bottom: 0

	width: 100%
	height: 100%
	background:
		size: 100%
		position: 0 0
		repeat: no-repeat
		color: transparent
		image: url(https://cloud.blender.org/static/assets/img/backgrounds/pattern_02_blur.jpg)

	filter: none

	&.project
		display: none
		+media-lg
			display: block
			left: -10px
			width: 105%
	&.blog
		display: none
		+media-lg
			display: block
			left: -10px
			width: 105%
		+media-md
			display: block
			left: -10px
			width: 105%


.navbar-backdrop-overlay
	position: absolute
	top: 0
	left: 0
	width: 100%
	height: $navbar-backdrop-height
	background: linear-gradient(to bottom, rgba($color-background, 0) 25%, rgba($color-background,0.5) 50%, rgba($color-background,1) 100%)


/* Global, we want all menus to look like this */
ul.dropdown-menu
	background-color: white
	border: none
	box-shadow: 0 10px 25px rgba(black, .1)
	user-select: none

	.divider
		background-color: rgba(black, .1)

nav .dropdown:hover ul.dropdown-menu
	display: block

.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu
	margin-top: 0


/* FOOTER */
#footer-container
	position: relative
	background-color: $color-background

	.row
		+media-xs
			margin: 0

/* Footer Navigation */
footer
	font-size: .75em
	padding: 0 0 10px 0
	a
		color: $color-text-dark-primary

		&:hover
			color: $color-primary

	ul.links
		float: left
		padding: 0
		margin: 0
		list-style-type: none

		li
			padding: 0 15px 0 0
			margin: 0
			float: left

	#hop
		display: flex
		align-items: center
		justify-content: center
		visibility: hidden
		position: fixed
		right: 25px
		bottom: 25px
		z-index: 999
		cursor: pointer
		opacity: 0
		background: $color-background-light
		width: 32px
		height: 32px
		border-radius: 50%
		color: $color-text-dark-secondary
		font-size: 2em
		box-shadow: 0 0 15px rgba(black, .2)
		transform: scale(0.5)
		transition: all 150ms ease-in-out

		&:hover
			transform: scale(1.2)
			background-color: $color-background-nav

		&.active
			visibility: visible
			opacity: 1
			transform: scale(1)


#footer-navigation
	font-size: .85em
	margin-bottom: 5px
	color: lighten($color-text, 30%)
	border-top: thick solid lighten($color-text, 60%)
	padding:
		top: 15px
		bottom: 15px

	h4
		color: lighten($color-text, 8%)
		margin-bottom: 10px

		a
			color: $color-text-dark-primary

	ul
		position: relative
		margin: 0
		padding: 0 0 10px 0
		list-style-type: none

		li
			position: relative
			padding: 0
			margin: 0

	a
		color: lighten($color-text, 35%)

		&:hover
			color: $color-primary

	.footer-links
		i
			font-size: 80%
			position: absolute
			left: -14px
			top: 20%

	.special
		padding:
			top: 10px
			bottom: 15px
		font-size: .9em
		border-left: thin solid darken($color-background, 20%)


		img
			max-width: 100%
			opacity: .6

	ul.footer-social
		width: 100%
		text-align:center
		margin: 0 auto
		display: flex
		align-items: center
		justify-content: space-around

		li
			display: inline-block
			padding: 30px 0

			i
				font-size: 3em


.btn-outline
	background-color: transparent
	border-width: 1px
	transition: background-color .1s

	&:focus, &:active
		box-shadow: none

.btn-empty
	background-color: transparent
	border-color: transparent

	&:focus, &:active
		box-shadow: none


.tooltip
	transition: opacity 50ms ease-in-out
	&.in
		opacity: 1

	.tooltip-inner
		max-width: auto
		white-space: nowrap
		background-color: $color-background-nav-light
		color: $color-text-light-primary
		border-radius: 3px

	&.top .tooltip-arrow
		border-top-color: $color-background-nav-light
	&.bottom .tooltip-arrow
		border-bottom-color: $color-background-nav-light
	&.left .tooltip-arrow
		border-left-color: $color-background-nav-light
	&.right .tooltip-arrow
		border-right-color: $color-background-nav-light

.popover
	background-color: lighten($color-background-nav, 5%)
	border-radius: 3px
	box-shadow: 1px 1px 2px rgba(black, .2)
	border: thin solid lighten($color-background-nav, 10%)

	&.in
		opacity: 1

	.popover-title
		background-color: lighten($color-background-nav, 10%)
		border-bottom: thin solid lighten($color-background-nav, 3%)
		color: $color-text-light-primary
		font-family: $font-body

	.popover-content
		color: $color-text-light
		font-size: .9em

	&.top .arrow:after
		border-top-color: lighten($color-background-nav, 5%)
	&.bottom .arrow:after
		border-bottom-color: lighten($color-background-nav, 5%)
	&.left .arrow:after
		border-left-color: lighten($color-background-nav, 5%)
	&.right .arrow:after
		border-right-color: lighten($color-background-nav, 5%)

/* Inputs */
input, input.form-control,
textarea, textarea.form-control,
select, select.form-control
	+input-generic

label, label.control-label
	+label-generic

select, select.form-control
	border-top-left-radius: 3px
	border-top-right-radius: 3px
	background-color: $color-background-light

	option
		background-color: white

input.fileupload
	background-color: transparent
	display: block
	margin-top: 10px

textarea
	resize: vertical

button, .btn
	+button($color-text-dark-secondary, $color-background, false)

	&-success
		+button($color-success, $color-success, false)
	&-warning
		+button($color-warning, $color-warning, false)
	&-danger
		+button($color-danger, $color-danger, false)
	&-info
		+button($color-info, $color-info, false)

.input-group-flex
	display: flex

.input-group-separator
	margin: 10px 0
	border-top: thin solid $color-background

/* File Upload forms */
.fieldlist
	list-style: none
	padding: 0
	margin: 10px 0 0 0

	li.fieldlist-item
		background-color: $color-background-light
		border: thin solid $color-background
		border-left: 3px solid $color-primary
		border-top-right-radius: 3px
		border-bottom-right-radius: 3px

		margin-bottom: 10px
		padding: 10px
		+clearfix

		.form-group
			margin-bottom: 0 !important // override bs
			width: 100%

			input.form-control
				background-color: white !important
				padding: 0 10px !important
				border: thin solid $color-background-dark !important

		div[class$="slug"]
			width: 50%
			float: left
			display: flex
			align-items: center

			label
				margin-right: 10px

		.fieldlist-action-button
			+button($color-success, 3px)
			margin: 0 0 0 10px
			padding: 5px 10px
			text-transform: initial

.form-upload-file
	margin-bottom: 10px
	display: flex
	flex-direction: column

	.form-upload-progress
		margin-top: 10px

		.form-upload-progress-bar
			margin-top: 5px
			background-color: $color-success
			height: 5px
			min-width: 0
			border-radius: 3px

			&.progress-uploading
				background-color: hsl(hue($color-success), 80%, 65%) !important

			&.progress-processing
				+stripes($color-success, lighten($color-success, 15%), -45deg, 25px)
				+stripes-animate
				animation-duration: 1s

			&.progress-error
				background-color: $color-danger !important

	.preview-thumbnail
		width: 50px
		height: 50px
		min-width: 50px
		min-height: 50px
		margin-right: 10px
		margin-top: 5px
		border-radius: 3px
		background-color: $color-background

	.form-upload-file-meta-container
		display: flex

	.form-upload-file-meta
		list-style: none
		padding: 0
		margin: 0
		width: 100%
		display: flex
		flex-wrap: wrap
		flex: 1

		li
			display: inline-block
			padding: 5px 10px

			&:first-child
				padding-left: 0

			&.dimensions, &.size
				color: $color-text-dark-secondary

			&.delete
				margin-left: auto

			&.name
				+text-overflow-ellipsis

		.file_delete
			color: $color-danger

	.form-upload-file-actions
		list-style: none
		padding: 0
		margin: 0
		display: flex
		flex-wrap: wrap

		li
			display: inline-block
			padding: 5px 10px

		.file_delete
			color: $color-danger

.form-group
	&.error
		.form-control, input
			border-color: $color-danger !important

	ul.error
		padding: 5px 0 0 0
		margin: 0
		color: $color-danger
		list-style-type: none

.checkbox label label
	padding-left: 0

.checkbox label input[type=checkbox] + label
	transition: color 100ms ease-in-out

.checkbox label input[type=checkbox]:checked + label
	color: $color-success !important



/* Flyouts (only used on notifications for now) */
.flyout
	display: block
	font-size: .9em
	background-color: white
	border-radius: 3px
	border: thin solid darken($color-background, 3%)
	box-shadow: 1px 2px 2px rgba(black, .2)

	& .flyout-title
		font-weight: 600
		display: block
		padding: 8px 10px 5px 10px
		font-size: 1.1em
		float: left
		cursor: default

	&.notifications
		position: absolute
		right: 0
		top: 60px
		z-index: 9999
		width: 420px
		max-height: 1000%
		border-top-color: white
		overflow-x: hidden


/* Font aliases */
.pi /* blank item with the right spacing */
	&:after
		content: ''
		font-family: "pillar-font"
		font-style: normal
		font-weight: normal
		speak: none
		display: inline-block
		text-decoration: inherit
		width: 1em
		margin-right: .2em
		text-align: center
		font-variant: normal
		text-transform: none
		line-height: 1em
		margin-left: .2em
		-webkit-font-smoothing: antialiased
		-moz-osx-font-smoothing: grayscale
		position: relative

	&:before
		position: relative

.pi-license-cc-zero:before
	content: '\e85a'
.pi-license-cc-sa:before
	content: '\e858'
.pi-license-cc-nd:before
	content: '\e859'
.pi-license-cc-nc:before
	content: '\e857'

.pi-license-cc-0
	@extend .pi-license-cc-zero
	position: relative
	top: 1px
.pi-license-cc-by-sa
	@extend .pi-license-cc-sa
.pi-license-cc-by-nd
	@extend .pi-license-cc-nd
.pi-license-cc-by-nc
	@extend .pi-license-cc-nc

.pi-license-cc-by-sa,
.pi-license-cc-by-nd,
.pi-license-cc-by-nc
	@extend .pi

	&:after
		content: '\e807'
		left: -27px

	&:before
		left: 27px

#search-overlay
	position: absolute
	top: 0
	left: 0
	right: 0
	bottom: 0
	width: 100%
	height: 100%
	pointer-events: none
	visibility: hidden
	opacity: 0
	z-index: $z-index-base + 4
	transition: opacity 150ms ease-in-out

	&.active
		opacity: 1
		visibility: visible
		background-color: rgba($color-background-nav, .7)

.search-input
	position: relative
	float: left
	padding: 0
	margin: 0

	+media-lg
		max-width: 350px
	+media-md
		max-width: 350px
	+media-sm
		max-width: 120px
	+media-xs
		display: block
		margin: 0 10px
		width: 75%
		position: absolute
		z-index: $z-index-base
		top: 2px
		left: 40px

	.search-icon
		position: absolute
		color: white
		top: 4px
		left: 10px
		cursor: pointer

		&:after
			opacity: 0
			content: 'Use advanced search...'
			font-style: normal
			background: darken($color-background-nav, 5%)
			color: $color-text-light-primary
			box-shadow: 1px 1px 3px rgba(black, .4)
			padding: 3px 10px
			font-size: .85em
			border-radius: 3px
			top: 30px
			left: -10px
			width: 150px
			position: absolute
			transition: top 150ms ease-in-out, opacity 150ms ease-in-out
			pointer-events: none

		&:hover
			&:after
				opacity: 1
				top: 35px


	#cloud-search, .tt-hint
		background-color: transparent
		width: 100%
		outline: none
		border: thin solid transparent
		border-bottom: 3px solid transparent
		font:
			size: 1em
			weight: 400
			family: $font-body
		margin: 0
		padding: 0 20px 0 40px
		min-height: 32px
		color: white
		+text-overflow-ellipsis
		transition: border 100ms ease-in-out

		&:focus
			border: thin solid transparent
			border-bottom: 3px solid lighten($color-primary, 5%)
			outline: none

		&::placeholder
			color: rgba(white, .5)
			transition: color 150ms ease-in-out

		&:hover
			&::placeholder
				color: rgba(white, .6)

#page-overlay
	background-color: rgba(black, .8)
	position: fixed
	top: 0
	bottom: 0
	right: 0
	left: 0
	z-index: $z-index-base + 15
	visibility: hidden
	opacity: 0
	transition: opacity 150ms ease-in-out

	display: flex
	align-items: center
	justify-content: center

	img
		user-select: none
		display: block
		max-height: 96%
		max-width: 96%
		z-index: 0

		box-shadow: 0 0 15px rgba(black, .2), 0 0 100px rgba(black, .5)

	&.active
		visibility: visible
		opacity: 1

	.no-preview
		user-select: none
		z-index: 0
		color: $color-text-light-secondary

	.nav-prev, .nav-next
		display: block
		font:
			family: 'pillar-font'
			size: 2em
		height: 80%
		width: 50px
		cursor: pointer
		color: $color-text-light-secondary
		z-index: 1
		+position-center-translate

		&:hover
			color: $color-text-light

		&:before, &:after
			+position-center-translate

	.nav-prev
		left: 50px
		&:before
			content: '\e839'

	.nav-next
		left: initial
		right: 0
		&:before
			content: '\e83a'


	&.video
		.video-embed
			+position-center-translate
			position: fixed

			iframe
				width: 853px
				height: 480px

#status-bar
	opacity: 0
	transition: all 250ms ease-in-out

	i
		margin-right: 5px

	&.info
		color: $color-info
	&.error
		color: $color-danger
	&.warning
		color: $color-warning
	&.success
		color: $color-success
	&.default
		color: $color-text-light

	&.active
		opacity: 1