blender-cloud/src/styles/_homepage.sass

.dashboard-container
	+container-behavior
	+media-xs
		flex-direction: column
	align-content: center
	align-items: flex-start
	display: flex
	justify-content: space-around
	word-break: break-word

	section.dashboard-main,
	section.dashboard-secondary
		+media-xs
			width: 100%
		margin: 20px auto

		img
			max-width: 100%

	section.dashboard-main
		+container-box
		width: 52%

	section.dashboard-secondary
		width: 46%
		flex-direction: column
		margin-right: auto

	span.section-lead
		display: block
		padding: 10px 0
		color: $color-text-dark-secondary

	section.dashboard-main,
	section.dashboard-secondary
		.section-title
			padding-bottom: 5px
			margin-bottom: 20px
			position: relative

			&:before
				position: absolute
				width: 50px
				height: 2px
				top: 125%
				content: ' '
				display: block
				background-color: $color-primary

			a
				color: $color-text

				&:hover
					color: $color-primary
					cursor: pointer

	nav#nav-tabs,
	nav#sub-nav-tabs
		ul#nav-tabs__list,
		ul#sub-nav-tabs__list
			margin: 0
			padding: 0
			list-style: none
			border-bottom: thin solid $color-background
			+clearfix

			li.nav-tabs__list-tab
				float: left
				border: none
				border-bottom: 3px solid transparent
				color: $color-text-dark-primary
				user-select: none

				&:hover
					border-color: rgba($color-secondary, .3)
					cursor: pointer
					color: $color-text-dark
					a
						color: $color-text-dark

				a
					display: block
					text-decoration: none
					padding: 10px 15px 5px
					color: $color-text-dark-primary

				i
					margin-right: 5px
					color: $color-text-dark-secondary
					font-size: .9em

					&.pi-blender
						margin-right: 10px

				span
					color: $color-text-dark-hint
					margin-left: 5px

				&.active
					border-color: $color-secondary
					color: $color-secondary-dark
					a, i
						color: $color-secondary-dark

				&.disabled
					border-color: $color-background-light
					color: $color-text-dark-hint
					cursor: default
					a, i
						color: $color-text-dark-hint

					&:hover
						border-color: $color-background-light
						pointer-events: none

	section.stream
		background-color: white
		border-bottom: thin solid $color-background-dark

		ul.activity-stream__list
			$activity-stream-thumbnail-size: 110px

			> li
				position: relative
				display: flex
				padding: 10px 0
				overflow: hidden
				border-top: thin solid $color-background-dark

				&:first-child
					border: none

				&.active .activity-stream__list-details .title
					color: $color-primary

				&:hover
					.title
						text-decoration: underline
					&.video
						a.image
							&:hover
								i
									font-size: 3.5em
								img
									opacity: .9
							img
								opacity: .7
								z-index: 0
								transition: opacity 150ms ease-in-out

							i
								+position-center-translate
								z-index: 1
								color: rgba(white, .6)
								font-size: 3em
								transition: font-size 100ms ease-in-out

				&.comment
					.activity-stream__list-details
						padding: 0
						.title
							color: $color-text-dark
							padding: 7px 10px 2px 10px
							font-size: 1em
							margin: 0

						ul.meta
							padding: 0 10px 7px 10px

							li
								&.where-parent:before
									content: '\e83a'
									font-family: 'pillar-font'

								&.what:before
									display: none

				&.post
					.activity-stream__list-thumbnail
						border-color: $node-type-post
						background-color: $node-type-post
					.activity-stream__list-details .title
						color: darken($node-type-post, 15%)
						font:
							size: 1.3em
							weight: 500

				&.asset, &.comment, &.post
					&:hover
						cursor: pointer
				&.empty
					display: none
					color: $color-text-dark-primary
					padding: 20px
					text-align: center
					span
						color: $color-primary
						&:hover
							text-decoration: underline
							cursor: pointer

				&.with-picture
					min-height: $activity-stream-thumbnail-size

					.activity-stream__list-thumbnail
						background-color: black
						width: $activity-stream-thumbnail-size * 1.69
						min-width: $activity-stream-thumbnail-size * 1.69

						.activity-stream__list-thumbnail-icon
							position: absolute
							top: 0
							left: 0
							right: 0
							bottom: 0
							font-size: 1.3em
							text-shadow: 1px 1px 0 rgba(black, .2)
							background-image: linear-gradient(10deg, rgba(black, .5) 0%, transparent 40%)

							i
								position: absolute
								bottom: -8px
								left: 20px
								top: initial
								right: initial
								color: white

				.activity-stream__list-thumbnail
					position: relative
					display: flex
					justify-content: center
					align-items: center
					overflow: hidden
					width: 35px
					height: auto
					min-width: 35px
					min-height: auto

					+media-xs
						display: none


					&.image i
						color: $node-type-asset_image
					&.file i
						color: $node-type-asset_file
					&.video i
						color: $node-type-asset_video

					i
						+position-center-translate
						left: 23px
						top: 21px
						font-size: 1.1em

					img
						max-height: $activity-stream-thumbnail-size
						+position-center-translate

				.activity-stream__list-details
					display: flex
					flex-direction: column
					justify-content: space-around
					flex: 1
					overflow: hidden
					position: relative
					max-width: 100%
					padding: 10px 0

					+media-xs
						margin-left: 0

					.ribbon
						+ribbon
						right: -47px
						top: 5px
						font-size: 12px

						span
							padding: 1px 50px

					.title
						padding: 0 10px
						color: $color-text-dark

						span
							@include badge(hsl(hue($color-success), 60%, 45%), 3px)
							font-size: .7em
							padding: 1px 5px
							margin-right: 5px

	ul.meta
		+list-meta
		padding: 5px 10px 0 10px
		font-size: .85em
		color: $color-text-dark-secondary
		display: flex
		white-space: nowrap

		&.extra
			margin-top: auto

		li
			padding-left: 10px
			&:before
				left: -5px
			&.where-project
				+text-overflow-ellipsis

	section.comments
		padding: 0 15px 5px

		ul
			padding: 0

		> ul
			list-style-type: none
			margin: 10px 0 0

			> li
				+text-overflow-ellipsis
				border-top: thin solid $color-background-dark
				padding: 10px 0

				&:first-child
					border: none

				> a
					+text-overflow-ellipsis
					color: $color-text
					display: block
					padding-bottom: 5px

	section.blog-stream
		+media-md
			padding-left: 10px
		+media-sm
			padding-left: 10px
		position: relative

		.feed
			position: absolute
			top: 10px
			right: 10px
			font-size: 1.4em
			color: lighten($color-text-dark-hint, 10%)

			&:hover
				color: $color-primary

		> ul
			margin: 0
			padding: 0
			list-style: none
			border-top: thin solid $color-background

			.blog_index-item
				+container-box
				display: flex
				flex-direction: column
				margin-bottom: 50px

				&:before
					height: 1px
					background-color: $color-background-dark
					position: absolute
					bottom: -26px
					left: 25px
					right: 25px
					content: ' '

				&:last-child
					margin-bottom: 0

					&:before
						display: none

				video
					max-width: 100%

				a.item-title
					font-size: 1.6em
					padding: 5px 15px
					display: block
					color: $color-text

					&:hover
						color: $color-primary

				ul.meta
					+list-meta
					font-size: .9em
					padding: 15px 15px 5px


				&.blog-non-featured
					border-radius: 0
					margin: 0

				.item-content
					+node-details-description
					padding: 10px 15px

				.blog-stream__list-details
					.title
						color: $color-text-dark-primary
						display: block
						font-size: 1.3em

						&:hover
							color: $color-primary

					ul.meta
						+list-meta
						padding-top: 5px
						font-size: .9em
						color: $color-text-dark-secondary

						li
							padding-left: 10px
							&:before
								left: -5px

			.blog_index-header
				display: block
				position: relative

				img
					border-top-left-radius: 3px
					border-top-right-radius: 3px
					width: 100%

		.more
			text-align: center

			a
				color: $color-text
				display: block
				padding: 25px 0
				text-decoration: underline
				width: 100%

				&:hover
					color: $color-primary

	section.random-asset
		border-bottom: thin solid $color-background-dark

		ul.random-asset__list
			list-style: none
			padding: 0

			> li
				align-items: center
				border-top: thin solid $color-background
				display: flex
				padding: 7px 0
				position: relative
				overflow: hidden

				&:first-child
					border-top: none

				.ribbon
					+ribbon
					right: -47px
					top: 5px
					font:
						size: 12px
						weight: 500

					z-index: 1

					span
						padding: 1px 50px

				.random-asset__list-thumbnail
					background-color: $color-background
					display: block
					height: 50px
					margin-right: 15px
					min-height: 50px
					min-width: 50px
					overflow: hidden
					position: relative
					width: 50px

					img
						width: 100%

					i
						+position-center-translate
						font-size: 1.6em
						color: $color-text-light

					&.image
						background-color: $node-type-asset_image
					&.file
						background-color: $node-type-asset_file
						font-size: .8em
					&.video
						background-color: $node-type-asset_video
						font-size: .8em
					&.None
						background-color: $node-type-group

				.random-asset__list-details
					.title
						display: block
						font-size: 1em
						color: $color-text-dark-primary

						&:hover
							color: $color-primary

					ul.meta
						+list-meta
						padding-top: 5px
						font-size: .9em

						li
							&:before
								left: -5px
							&.what
								text-transform: capitalize

				&.featured
					align-items: flex-start
					flex-direction: column
					padding: 0

					a.title
						font-size: 1.1em
						padding: 10px 0 5px
						display: block
						color: $color-text

						&:hover
							color: $color-primary

					a.random-asset__thumbnail
						display: block
						position: relative

						&.video
							background-color: black
							img
								opacity: .7

						img
							transition: opacity 150ms ease-in-out
							width: 100%
							max-width: 100%

						i
							+position-center-translate
							color: white
							font-size: 3em
							text-shadow: 0 0 25px black
							transition: font-size 150ms ease-in-out

						&:hover
							i
								font-size: 3.5em
							img
								opacity: .85

					ul.meta
						+list-meta
						padding-bottom: 10px


section.announcement
	+container-box
	margin-left: 15px
	margin-right: 15px

	.header-icons
		display: flex
		align-items: center
		justify-content: center
		padding: 20px 0 5px 0

		i
			font-size: 2.5em
			color: $color-info

			&.pi-heart-filled
				color: $color-danger
				margin-left: 5px

	img.header
		width: 100%
		margin: 0 auto
		border-top-left-radius: 3px
		border-top-right-radius: 3px

	iframe
		width: 100%
		position: relative
		left: 15px
		margin: 25px auto

		+media-sm
			height: 500px
		+media-md
			height: 520px
		+media-lg
			height: 580px

	.text
		padding: 15px

		.title
			padding-bottom: 10px

			+media-xs
				font-size: 1.4em

			strong
				color: $color-primary-dark

			a
				color: $color-text-dark-primary

		.lead
			font-size: 1em
			+list-bullets

			ul
				margin-top: 10px
				padding-left: 10px

			hr
				border: none
				height: 1px
				width: 100%
				margin: 10px 0
				background-color: $color-background
				clear: both

			+media-xs
				padding-left: 10px

		.buttons
			margin: 15px auto 0 auto
			display: flex
			align-items: center
			justify-content: space-around
			flex-wrap: wrap

section.dashboard-in-production
	.in-production-project
		border-bottom: thin solid $color-background-dark
		color: $color-text-dark-primary
		display: block
		font-size: 1.1em
		margin-bottom: 15px

		> img
			margin-bottom: 15px

body.homepage
	.dashboard-container
		.dashboard-main
			+media-xs
				width: 100%
			background-color: transparent
			box-shadow: none
			width: 60%

		.dashboard-secondary
			+container-box
			+media-xs
				width: 100%
			width: 38%

			> section
				padding: 15px