summaryrefslogtreecommitdiff
path: root/frontend/static/sass/src/test.sass
blob: 4af658eaebf4694c1c6d2b519d522b1418dfb4b0 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
@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
#msg
	position: fixed
	top: 10px
	right: 10px
	padding: 5px
	width: 250px
	max-height: 80%
	font-size: 12px
	background-color: #eeeeee
	overflow-y: scroll
	overflow-x: hidden
	color: #333
	z-index: 100
	strong
		color: #859900
	em
		color: #dc322f
	b
		color: #002b36
#player
	#projector
		display: block
		position: absolute
		background-color: #000
		width: 320px
		height: 240px
		#screen
			position: absolute
			top: 0
			left: 0
			width: 100%
			height: 100%
			z-index: 20 
			#soundcloud
				position: absolute
				top: 0
				right: 0
				z-index: 21
			#soundcloud-dl
				position: absolute
				top: 81px
				right: 10px
				padding: 5px
				background-color: #000
				*
					color: #839496
				z-index: 20
			#soundcloud-img
				position: absolute
				top: 0
				left: 0
				width: 100%
				height: 100%
				z-index: 20
				img
					max-width: 100%
					max-height: 100%
		#ytscreen
			z-index: 19
			position: absolute
			top: 0
			left: 0
		#video-title
			position: absolute
			bottom: 0
			left: 0
			color: #988
			z-index: 20
		#projimg
			width: 100%
			height: 100%
	nav
		position: absolute
		top: 260px
		button
			color: #000
		#scan.blinkOn
			background-color: #fff
			color: #000
		#scan.blinkOff
			background-color: #000
			color: #fff
		#like
			color: #e4b
		#like.liked
			color: #44f
	#playlist
		position: absolute
		left: 330px
		z-index: 20
		width: 300px
		ul#queue
			width: 100%
			li
				display: block
				cursor: pointer
				border-bottom: 1px solid #ddd
				span.title
					display: block
					padding: 5px
					z-index: 1
				a.user
					float: right
					padding: 0 5px
					color: #d33682
					padding: 5px
					z-index: 2
				span.like
					float: right
					color: #657b83
					padding: 5px
					z-index: 3
				span.like.liked
					color: #a35783
			li.playing
				background-color: #073642
				color: #fff
#room, #user
	padding: 10px
	label
		color: #657b83
		width: 200px
		text-align: right
		padding-right: 5px
		display: inline-block
	span
		color: #93a1a1
a
	color: #268bd2
	&:visited
		color: #6c71c4
body
	font-size: 16px
#bg
	position: fixed
	top: 0
	left: 0
	z-index: -1
	opacity: 0.3
#pnp
	position: fixed
	right: 20px
	bottom: 20px
	width: 400px
	height: 285px
	background: #fff
#stats
	position: fixed
	right: 20px
	top: 20px
	width: 390px
	font-size: 14px
	background-color: #fff
	padding: 5px
	display: none
	overflow-y: scroll
#videos
	width: 800px
	padding-right: 5px
	li
		width: 100%
		list-style-type: none
		display: block
		margin-top: 3px
		a,span
			display: inline-block
			margin-left: 5px
		.date
			opacity: 0.8
			width: 60px
			text-align: right
			font-size: 14px
		.time
			opacity: 0.8
			width: 40px
			text-align: right
			font-size: 14px
		.user
			font-size: 14px
			width: 100px
			overflow: hidden
		.type
			width: 20px
			text-align: center
			font-variant: small-caps
		.title
			// color: #93a1a1
			text-decoration: none
			width: 300px
			overflow: hidden
			white-space: nowrap
		.remove
			color: #dc322f
			width: 200px
			cursor: pointer
			text-decoration: underline
			text-transform: uppercase
			opacity: 0.5
	li:hover
		.remove
			opacity: 1
		.title
			text-decoration: underline
a#return-link
	position: absolute
	top: 10px
	left: 10px
	font-size: 14px
h1
	color: #bbb
	font-size: 48px
	text-align: center
	width: 80%
	padding-bottom: 10px
h2
	color: #bbb
	font-size: 24px
	padding-left: 20px
	text-transform: uppercase
	#room-name
		color: #fff
#search-terms
	font-size: 14px
	padding: 2px 2px
	width: 200px
	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
	width: 350px
	border: 2px solid black
	background: #333
	display: none
	#search-loading
		margin: 10px
	#search-results
		height: 400px
		width: 100%
		overflow-x: hidden
		overflow-y: scroll
		li
			clear: both
			height: 54px
			overflow: hidden
			// padding-right: 5px
			div.thumb
				width: 80px
				height: 54px
				float: left
				background-position: center center
				margin: 0 5px 0 0
				border-right: 2px solid black
			h4
				white-space: nowrap
				overflow: hidden
				font-size: 14px
				color: #fff
				margin: 3px 0 3px 0
			border-bottom: 2px solid black
			font-size: 12px
			line-height: 15px
			color: #bbb
			opacity: 0.9
			cursor: pointer
			&:hover
				background: black
				cursor: pointer
				opacity: 1.0