path: root/frontend/static/sass/src/screen.sass

@import compass/reset
@mixin rounded($width)
	-moz-border-radius: $width
	-webkit-border-radius: $width
	-o-border-radius: $width
	border-radius: $width
body
	font-family: trebuchet ms, helvetica, arial, sans-serif
	width: 100%
	height: 100%
	overflow: hidden
	background: #000
#bg
	position: fixed
	top: 0
	left: 0
	opacity: 1
	z-index: -3
	width: 100%
	height: 100%
#bg img
	width: 100%
	height: 100%
	-ms-interpolation-mode: nearest-neighbor
	image-rendering: -moz-crisp-edges
	image-rendering: -webkit-optimize-contrast
#loading
	z-index: 20
	background: transparent
	color: #06033c
	text-shadow: #060363 0 0 50px
	display: block
	position: fixed
	width: 100%
	padding: 20px
	top: 30%
	left: 10%
	font-size: 170px
	font-weight: bold
	text-align: left
	white-space: no-wrap
	letter-spacing: -3px
	pointer-events: none

#msg
	z-index: 100
	position: fixed
	top: 10px
	right: 10px
	padding: 5px
	width: 350px
	max-height: 80%
	font-size: 12px
	background-color: #eeeeee
	overflow-y: scroll
	overflow-x: hidden
	color: #333
	strong
		color: #859900
	em
		color: #dc322f
	b
		color: #002b36
#player
	padding: 10px
	position: absolute
	background: #000
	#projector
		display: block
		position: absolute
		background-color: #000
		#screen
			position: absolute
			top: 0
			left: 0
			width: 100%
			height: 100%
			z-index: 19
			#soundcloud, #audio
				position: absolute
				top: 0
				right: 0
				background-color: #000
				z-index: 21
			#soundcloud-dl, #audio-dl
				position: absolute
				top: 81px
				right: 0
				width: 81px
				padding: 5px 0 5px 0
				font-size: 13px
				text-align: center
				background-color: #000
				*
					color: #839496
				z-index: 20
			#soundcloud-img, #audio-img
				position: absolute
				top: 0
				left: 0
				width: 100%
				height: 100%
				z-index: 20
				img
					max-width: 100%
					min-height: 100%
					max-height: 100%
		#ytscreen
			z-index: 19
			position: absolute
			top: 0
			left: 0
		#video-title
			position: absolute
			bottom: 0
			left: 0
			color: #fff
			z-index: 20
		#video-title.fullscreen
			position: fixed
			bottom: 90px
			left: auto
			right: 30px
			font-size: 24px
		#projimg
			width: 100%
			height: 100%
	nav#controls
		z-index: 40
		position: absolute
		#video-link
			color: #839496
		#scan.blinkOn
			background-color: #fff
			color: #000
		#scan.blinkOff
			background-color: #000
			color: #fff
		#like
			color: #e4b
		#like.liked
			color: #44f
		#mute.muted
			background-color: #fff
			color: #000
#playlistbg
	position: absolute
	background-color: #000
	opacity: 0.3
#playlist
	position: absolute
	z-index: 90
	width: 100%
	overflow-y: auto
	overflow-x: hidden
	ul#queue
		// overflow-y: none
		// &:hover
		// 	overflow-y: auto
		width: 100%
		li
			padding: 5px
			display: block
			cursor: pointer
			border-bottom: 1px solid #333
			span.title
				color: #ddd
				display: block
				padding: 5px
				z-index: 1
				&:hover
					color: #d8f
					cursor: pointer
			a.user
				float: right
				font-size: 14px
				padding: 0 5px
				color: #d33682
				padding: 5px
				z-index: 2
				text-decoration: none
			span.like
				float: right
				font-size: 14px
				color: #657b83
				padding: 5px
				z-index: 3
			span.like.liked
				color: #c357a3
		li.playing
			background-color: #222
			span.title
				color: #fff
#room, user
	padding: 10px
	label
		color: #657b83
		width: 100px
		text-align: right
		padding-right: 5px
		display: inline-block
	span
		color: #073642


#curtain
	background: #080810
	opacity: 0.3
	width: 100%
	height: 100%
	position: fixed
	top: 0
	left: 0
	z-index: 10
	display: none
#login
	background: #000
	display: block
	width: 50%
	top: 20%
	left: 50%
	margin-left: -25%
	padding: 30px
	padding-bottom: 60px
	z-index: 20
	position: fixed
	text-align: center
	box-shadow: 0 5px 10px #000
	img
		margin-bottom: 20px
	label
		min-width: 20%
		display: inline-block
		text-align: right
		padding-right: 10px
		font-size: 18px
		color: #fff
	#button-shim
		width: 30%
		display: inline-block
		text-align: left
		padding: 10px 10px 10px 0
		margin-right: 20px
		button
			padding: 2px 5px
	#login-username, #login-password
		width: 30%
		margin-right: 10px
		font-size: 24px
		border: 2px solid #806
		padding: 10px
	a
		color: #68f
		text-decoration: underline
#sitez
	position: fixed
	top: 24px
	right: 30px
	color: #888
	z-index: 82
	color: #aaa
	a, #logout
		cursor: pointer
		color: #aaa
		text-decoration: underline
	select option
		color: #666
		text-decoration: none
		padding-right: 3px
	button
		font-size: 24px
		background: #030303
		color: #fff
		padding: 2px
	a#faqlink
		color: #8ff
	div
		cursor: pointer
		display: inline-block
		padding: 8px 8px 5px 8px
		&:hover
			@include rounded(10px 10px 3px 3px)
			background-color: #333
		&.opened
			@include rounded(10px 10px 3px 3px)
			background-color: #333
nav
	z-index: 10
	margin: 0 auto
	button, #video-link
		background-color: #333
		color: #ddd
		&:hover
			background-color: #666
			color: #fff
		border: 0
		font-size: 14px
		min-width: 40px
		min-height: 20px
		padding: 5px 5px
		position: relative
		top: -1px
	#video-link
		top: -2px
		padding-bottom: 6px
#lunacy
	z-index: 40
	background: #ddd
	color: #000
	display: block
	width: 700px
	position: fixed
	top: 20%
	left: 50%
	margin-left: -390px
	opacity: 0.7
	padding: 40px
	text-align: center
	font-size: 48px
#plea
	z-index: 30
	background: #ddd
	color: #000
	display: block
	width: 400px
	position: fixed
	top: 20%
	left: 50%
	margin-left: -240px
	opacity: 0.7
	padding: 40px
	text-align: center
	font-size: 48px

#logobg
	position: fixed
	top: 10px
	left: 0
	width: 100%
	height: 64px
	background-color: #000
	opacity: 0.8
	z-index: 45
#logo
	position: fixed
	top: 10px
	z-index: 46
	left: 10px
	a
		float: left
		display: inline-block
		img
			display: inline-block
	#scanjam
		padding: 10px 15px 10px 0
	#preamble
		display: inline-block
		font-size: 12px
		color: #fff
		max-width: 80px
		padding-left: 15px
	h1
		padding: 15px 15px 0 10px
		font-size: 34px
		color: #fff
		font-weight: normal
		font-style: italic
		font-family: georgia, garamond, serif
		color: #8ff
		display: inline-block
	h2
		display: inline-block
		font-size: 16px
		color: #fff
		position: relative
		left: 20px
		top: -5px
		color: #839496
		a
			display: inline
			float: none
			color: #268bd2
		img
			max-height: 20px
			max-width: 20px
			display: inline-block
	h2.preamblish
		font-size: 12px
		color: #fff
		max-width: 250px
		left: 0
		top: 9px
		padding-right: 20px
	h2.radio
		a
			color: #def
		font-size: 12px
		top: -8px
		left: 30px
	#likebutton
		display: inline-block
		display: none
		position: relative
		top: -5px
		width: 90px
		height: 21px
		z-index: -1
#glasspopcornlogo
	position: absolute
	top: 80px
	left: 15px
	pointer-events: none
	opacity: 0.5
	z-index: 8
	img
		z-index: 8
		pointer-events: none
#likereport
	position: fixed
	width: 100px
	padding: 20px
	z-index: 100
	overflow-y: hidden
	a
		background-color: #222
		display: block
		text-decoration: none
		padding: 5px
		opacity: 0.95

#form
	position: fixed
	bottom: 10px
	left: 10px
	padding: 10px 10px 10px 10px
	background-color: #000
	white-space: nowrap
	z-index: 31
	#chat-message
		border: 0
		outline: 0
		font-size: 18px
		padding: 5px
		margin-right: 5px
		background-color: #f8f8f8
		&:hover
			background-color: #ffffff
	button
		margin: 0
		outline: 0
		border: 0
		background-color: #333
		color: #ddd
		&:hover
			background-color: #666
			color: #fff
		// @include rounded(2px)
		padding: 4px 6px
		position: relative
		top: 1px
		font-size: 20px
	#videochat-badge
		cursor: auto
		pointer-events: none
		@include rounded(8px)
		font-size: 10px
		background-color: #f00
		color: #fff
		position: absolute
		width: 10px
		height: 10px
		text-align: center
		padding: 2px 2px
		display: none
		z-index: 32
#formbg
	background-color: #000
	opacity: 0.7

#chatbg
	position: fixed
	bottom: 100px
	left: 20px
	padding: 10px
	width: 600px
	background-color: #000
	padding: 0 10px 5px 10px
	opacity: 0.25
	z-index: 9
	
#chat
	padding: 0 10px 5px 10px
	position: fixed
	font-size: 18px
	line-height: 26px
	vertical-align: bottom
	overflow-y: hidden
	overflow-x: hidden
	background: transparent
	z-index: 30
	a
		font-weight: normal
		font-size: 11px
		opacity: 0.8
		color: #44bbff
		text-decoration: underline
	a.u
		font-weight: bold
		padding-right: 10px
		display: inline-block
		color: #ff0066
		opacity: 1
		text-decoration: none
		min-width: 80px
		overflow-x: hidden
		font-size: 16px
		line-height: 26px
		vertical-align: bottom
	a.pic
		opacity: 1
	span
		color: #f0fff0
		text-shadow: #000 0 0 2px
		font-weight: bold
	.ytlink
		font-size: 11px
		color: #88dddd
		cursor: pointer
		text-decoration: underline
		text-shadow: none
		text-shadow: #000 0 0 1px
		font-weight: normal
		opacity: 1
	.ytlink:hover
		color: #dd66ff
		text-decoration: underline
		text-shadow: #000 0 0 1px
	.ytlink.playing
		color: #daf
		font-size: 12px
		font-weight: normal
		text-decoration: none
	.ytlink.playing::before
		text-decoration: none
		content: "\25b6 "
		font-weight: normal
	img
		max-width: 350px
		max-height: 400px
		border: 0
	#shim
		width: 10px
		height: 500px
#chat.fullscreen
	overflow-y: hidden
	&:hover
		overflow-y: hidden
#webcam-container
	z-index: 100
	position: fixed
	right: 500px
	bottom: 100px
	background-color: #000
	padding: 10px
	display: none
#lastlogbg
	position: fixed
	background-color: #000
	opacity: 0.5
	padding: 10px
	z-index: 31
#lastlogbox
	position: fixed
	font-size: 14px
	padding: 10px
	z-index: 32
	h4
		font-size: 12px
		font-weight: bold
		color: #eee
		padding-bottom: 5px
	ul
		border-top: 1px solid #000
li.ll
	list-style-type: none
	a
		color: #d0e0fe
		padding: 5px 0
		border-bottom: 1px solid #000
		display: block
		text-shadow: #000 0 0 2px
		text-decoration: underline
		font-size: 16px
		font-weight: bold

#flower
	position: absolute
	top: 0
	right: 10%
	z-index: 50
	pointer-events: none
	display: none
#plant
	position: absolute
	bottom: 0
	right: 50%
	z-index: 50
	pointer-events: none
	display: none
#msg
	display: none
button
	font-size: 24px
	background: #030303
	color: #fff
	padding: 2px
#settings-container, #rooms-container, #about-container, #videochat-container
	position: fixed
	top: 59px
	@include rounded (10px)
	right: 20px
	z-index: 80
	width: 500px
	background-color: #222
	color: #657b83
	display: none
	box-shadow: 0 5px 10px #000
	.close
		margin: 10px 10px 0 0
		float: right
		color: #ded8c5
		width: 20px
		height: 14px
		font-size: 14px
		padding: 3px 0
		text-align: center
		vertical-align: middle
		@include rounded(10px)
		background-color: #000b16
		&:hover
			color: #fff
			cursor: pointer
	#rooms-loading
		margin: 10px
	h5
		font-size: 16px
		color: #93a1a1
		display: block
		padding: 10px
		background-color: #333
		@include rounded(10px 10px 0 0)
	p
		padding: 10px 10px 10px 10px
		font-size: 14px
		line-height: 18px
		color: #b3c1c1
		background-color: #1b1b1f
	label
		margin: 2px 0 0 10px
		font-size: 14px
		color: #657b83
		width: 150px
		text-align: right
		padding-right: 5px
		display: inline-block
	span
		margin: 2px 10px 0 0
		color: #839496
		font-size: 14px
	span#room-mod-tag a
		float: right
		padding: 0 10px 10px 0
		display: block
		color: #dc322f
	span#gallery-link a
		color: #268bd2
		padding: 0 10px 10px 0
		display: block
		float: right
	button
		position: relative
		left: 3px
	input
		margin: 2px 10px 0 0
		width: 100px
	#room-topic, #room-bg, #room-bgreset
		width: 300px
	#room-settings-save
		font-size: 14px
	.shim
		width: 1px
		height: 10px
	ul
		text-decoration: none
		cursor: pointer
		li
			list-style-type: none
			padding: 10px
			cursor: pointer
			border-top: 1px solid #000
			background-color: transparent
			text-decoration: none
			font-size: 14px
			color: #83a1a1
			&:hover
				color: #fdf6e3
		a li
			color: #83a1a1
			text-decoration: none
		a
			color: #83a1a1
			text-decoration: none
#rooms-container
	right: 20px
	z-index: 80
	width: 300px
	max-height: 300px
#about-container
	right: 20px
	z-index: 80
	width: 300px
#videochat-container
	right: 20px
	z-index: 80
	width: 300px
	display: none
	cursor: pointer
	#videochat-disable
		display: none
#tokbox-embed
	position: absolute
	bottom: 10px
	left: 10px
	height: 150px
	z-index: 80
	display: none
	overflow-y: auto
	#tokbox-publisher, #tokbox-subscribers
		float: left
		object
			float: left
	#tokbox-settings
		position: absolute
		top: 0
		right: 10px
		padding: 5px
		font-size: 12px
		color: #bbb
		background-color: black
		text-align: right
		button
			padding: 2px
			font-size: 12px
			background-color: #333
			color: #888
			min-width: 30px
			&.on
				background-color: #d33
				color: #fff
.roomhello
	width: 400px
	color: #fff
	padding: 10px
	font-size: 18px
	background-color: #000
	cursor: pointer
	position: fixed
	top: 85px
	left: 15px
	opacity: 0.9
.modhello
	width: 400px
	color: #fff
	padding: 5px
	background-color: #000
	cursor: pointer
	margin-top: 10px
.glitter
	pointer-events: none
	position: absolute
	z-index: 23

.arrow-play
	width: 0
	height: 0
	border-top: 4.5px solid transparent
	border-left: 9.5px solid white
	border-bottom: 4.5px solid transparent
	display: inline-block
.arrow-pause
	width: 0
	height: 0
	border-top: 5px solid white
	border-right: 2.5px solid white
	border-bottom: 4px solid white
	border-left: 0
	display: inline-block
.arrow-prev
	width: 0
	height: 0
	border-top: 4px solid transparent
	border-right: 4px solid white
	border-bottom: 4px solid transparent
	display: inline-block
.arrow-next
	width: 0
	height: 0
	border-top: 4px solid transparent
	border-left: 4px solid white
	border-bottom: 4px solid transparent
	display: inline-block

#search-terms
	font-size: 14px
	padding: 2px 2px
	width: 200px
	position: relative
	top: -4px
	left: -10px
	background-image: url('/static/img/magnify.png')
	background-position: right center
	background-repeat: no-repeat
	border: 0
	outline: 0
	background-color: #ddd
	&:hover
		background-color: #fff
	&:focus
		background-color: #fff
#search-results-container
	position: fixed
	top: 53px
	right: 21px
	z-index: 100
	width: 334px
	border: 2px solid black
	background: #333
	display: none
	#search-loading
		margin: 10px
	#search-instructions
		font-size: 11px
		color: white
		padding: 3px 3px 3px 38px
		background-color: #000
		width: 100%
	#search-results
		height: 300px
		width: 100%
		overflow-x: hidden
		overflow-y: scroll
		li
			clear: both
			height: 54px
			overflow: hidden
			position: relative
			// padding-right: 5px
			div.thumb
				width: 32px
				height: 54px
				float: left
				background-position: center center
				margin: 0 5px 0 0
				border-right: 2px solid black
				cursor: pointer
			h4
				white-space: nowrap
				overflow: hidden
				font-size: 14px
				color: #fff
				margin: 3px 0 3px 0
				cursor: pointer
			span.metadata
				cursor: pointer
				display: block
				width: 200px
			border-bottom: 2px solid black
			font-size: 12px
			line-height: 15px
			color: #bbb
			opacity: 0.9
			a.preview
				position: absolute
				bottom: 3px
				right: 5px
				color: #268bd2
				text-decoration: underline
			&:hover
				background: black
				opacity: 1.0