summaryrefslogtreecommitdiff
path: root/frontend/static/sass/src
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/static/sass/src')
-rw-r--r--frontend/static/sass/src/avatar.sass56
-rw-r--r--frontend/static/sass/src/calendar.sass87
-rw-r--r--frontend/static/sass/src/diornights.sass88
-rw-r--r--frontend/static/sass/src/disaro.sass29
-rw-r--r--frontend/static/sass/src/embed.sass96
-rw-r--r--frontend/static/sass/src/feederbleeder.sass29
-rw-r--r--frontend/static/sass/src/frederick.sass4
-rw-r--r--frontend/static/sass/src/gallery-white.sass220
-rw-r--r--frontend/static/sass/src/glitter.sass18
-rw-r--r--frontend/static/sass/src/ie.scss5
-rw-r--r--frontend/static/sass/src/main.sass0
-rw-r--r--frontend/static/sass/src/print.scss3
-rw-r--r--frontend/static/sass/src/profile.sass514
-rw-r--r--frontend/static/sass/src/roomlist.sass131
-rw-r--r--frontend/static/sass/src/screen.sass891
-rw-r--r--frontend/static/sass/src/screen.scss6
-rw-r--r--frontend/static/sass/src/sewergreats.sass0
-rw-r--r--frontend/static/sass/src/test.sass285
-rw-r--r--frontend/static/sass/src/tiny.sass36
-rw-r--r--frontend/static/sass/src/top.sass52
20 files changed, 2550 insertions, 0 deletions
diff --git a/frontend/static/sass/src/avatar.sass b/frontend/static/sass/src/avatar.sass
new file mode 100644
index 0000000..790b4e8
--- /dev/null
+++ b/frontend/static/sass/src/avatar.sass
@@ -0,0 +1,56 @@
+table
+ float: left
+.avatar-right
+ left: 250px
+.message
+ vertical-align: top
+.tri
+ vertical-align: top
+ height: 100%
+.triangle-left
+ width: 0
+ height: 0
+ border-top: 10px solid transparent
+ border-bottom: 5px solid transparent
+ border-right: 25px solid #fff
+ position: relative
+ top: 10px
+ left: 5px
+ margin-left: -16px
+.triangle-right
+ width: 0
+ height: 0
+ border-top: 10px solid transparent
+ border-bottom: 5px solid transparent
+ border-left: 25px solid #fff
+ position: relative
+ top: 10px
+ margin-left: -12px
+.message .message-blurb
+ box-shadow: 2px 2px 10px #123
+ max-width: 250px
+ font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif
+ background-color: #fff
+ border-top: 2px solid #f0f0f8
+ border-left: 2px solid #ebeeef
+ border-right: 2px solid #ddd
+ border-bottom: 2px solid #ddd
+ -moz-border-radius: 20px
+ -webkit-border-radius: 20px
+ padding: 10px
+ color: #222
+ word-wrap: break-word
+#chat img
+ max-width: 250px
+ max-height: 250px
+#chat .ytlink:hover
+ color: #f3c
+#chat .ytlink
+ color: #c3d
+#chat .ytlink.playing
+ color: #60b
+div.frame
+ display: inline-block
+ padding: 2px
+ height: 300px
+ overflow: visible
diff --git a/frontend/static/sass/src/calendar.sass b/frontend/static/sass/src/calendar.sass
new file mode 100644
index 0000000..ffb19d0
--- /dev/null
+++ b/frontend/static/sass/src/calendar.sass
@@ -0,0 +1,87 @@
+body
+ background-color: #f8f8f8
+ overflow: hidden
+#calendar
+ position: absolute
+ *
+ font-size: 18px
+ z-index: 10
+#playlist ul#queue li.playing
+ span.score
+ color: #bbb
+#playlist ul#queue li
+ span.score
+ color: #333
+ span.title
+ color: #222
+#player
+ z-index: 6
+#playlistbg
+ z-index: 7
+ background-color: #f8f8f8
+#water-cooler
+ position: fixed
+ bottom: -10px
+ left: -30px
+ height: 500px
+ z-index: 7
+#office-plant
+ position: fixed
+ bottom: 20px
+ left: 160px
+ z-index: 8
+#carpet
+ position: fixed
+ width: 100%
+ height: 70px
+ bottom: 0
+ left: 0
+ background-color: white
+ z-index: 6
+#bg
+ opacity: 0.1
+ display: none
+#likebutton
+ position: fixed
+ right: 20px
+ top: 30px
+ opacity: 0.7
+#calendar
+ z-index: 10
+ box-shadow: #666 5px 5px 10px
+ display: none
+#logo h1
+ color: #b8d
+#player #projector #video-title
+ bottom: 5px
+ left: 5px
+.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
+
diff --git a/frontend/static/sass/src/diornights.sass b/frontend/static/sass/src/diornights.sass
new file mode 100644
index 0000000..e52d602
--- /dev/null
+++ b/frontend/static/sass/src/diornights.sass
@@ -0,0 +1,88 @@
+@import compass/reset
+@mixin rounded($width)
+ -moz-border-radius: $width
+ -webkit-border-radius: $width
+ -o-border-radius: $width
+ border-radius: $width
+
+html
+ height: 100%
+ width: 100%
+body
+ font-family: trebuchet ms, helvetica, arial, sans-serif
+ width: 100%
+ height: 100%
+ overflow-x: hidden
+ background: #fff
+ background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.28, rgb(255,255,255)), color-stop(0.64, rgb(250,247,250)))
+ background-image: -moz-linear-gradient( center bottom, rgb(255,255,255) 28%, rgb(250,247,250) 64%)
+ background-attachment: fixed
+ font-size: 11px
+ font-family: "lucida grande",tahoma,verdana,arial,sans-serif
+ color: #333
+#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
+#container
+ position: absolute
+ top: 0
+ left: 50%
+ width: 950px
+ min-height: 100%
+ margin-left: -475px
+ background: #fff
+ padding-bottom: 2000px
+ // border-right: 1px solid #eee
+ // border-left: 1px solid #eee
+#header
+ width: 100%
+ #logo
+ height: 160px
+ #likebutton
+ position: absolute
+ top: 80px
+ right: 30px
+#menu
+ width: 100%
+ border-top: 1px solid #eee
+ border-bottom: 1px solid #eee
+ ul
+ li
+ display: inline-block
+ width: (918px/6)
+ padding: 5px 0 5px 0px
+ text-align: center
+ a
+ color: #333
+ text-decoration: none
+ display: block
+ &:hover
+ color: #33f
+.box
+ width: 300px
+ margin: 10px 0 0 10px
+ img
+ width: 100%
+ opacity: 0.9
+ &:hover
+ opacity: 1.0
+ &#feed
+ ul
+ li
+ display: inline-block
+ height: 32px
+ vertical-align: middle
+ img
+ width: 32px
+ height: 32px
diff --git a/frontend/static/sass/src/disaro.sass b/frontend/static/sass/src/disaro.sass
new file mode 100644
index 0000000..d4641ce
--- /dev/null
+++ b/frontend/static/sass/src/disaro.sass
@@ -0,0 +1,29 @@
+#chat
+ text-align: center
+ img
+ width: 500px
+ max-width: none
+ max-height: none
+ border: 10px solid black
+ margin: 10px auto 0
+ margin-right: 100px
+ a.u
+ font-size: 14px
+ min-width: 100px
+ letter-spacing: -1px
+ text-align: right
+ padding-right: 20px
+ *
+ font-size: 14px
+ .chatline
+ width: 510px
+ background-color: black
+ padding: 5px
+ text-align: left
+ margin: 0 auto
+ opacity: 0.9
+ margin-right: 100px
+ span
+ color: #666
+ text-shadow: none
+ font-weight: normal
diff --git a/frontend/static/sass/src/embed.sass b/frontend/static/sass/src/embed.sass
new file mode 100644
index 0000000..abce351
--- /dev/null
+++ b/frontend/static/sass/src/embed.sass
@@ -0,0 +1,96 @@
+body
+ background: #000
+ overflow: hidden
+#logo,#form,#logobg,#sitez
+ opacity: 0
+ z-index: -20
+#lastlogbox *, #lastlogbox h4
+ font-size: 12px
+ padding: 1px
+#lastlogbox
+ padding: 1px
+#chat
+ font-size: 6px
+ line-height: 120%
+ overflow-y: hidden
+ a.u
+ min-width: 10px
+ img
+ max-height: 30px
+ max-width: 30px
+#player
+ padding: 0
+ margin: 0
+#player *,#playlist *,#queue *
+ font-size: 12px
+#playlist ul#queue li
+ padding: 1px
+ &.playing
+ background-color: #657
+#playlist ul#queue li span.like
+ display: none
+#playlist ul#queue li a.user
+ font-size: 10px
+#playlist
+ overflow-y: hidden
+#queue
+ overflow-y: scroll
+nav
+ button
+ font-size: 12px
+ padding: 1px
+ overflow: hidden
+ position: relative
+ top: 3px
+ left: 3px
+ #video-link
+ position: relative
+ top: 2px
+ left: 3px
+ padding: 4px
+ font-size: 10px
+#player nav#controls
+ span.instructions
+ font-size: 11px
+ color: #ddd
+ position: relative
+ top: 3px
+ left: 5px
+#player nav#controls
+ z-index: 90
+ overflow: visible
+#player #projector #video-title
+ bottom: 10px
+ left: 2px
+*,#chat
+ overflow: hidden
+.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
+
diff --git a/frontend/static/sass/src/feederbleeder.sass b/frontend/static/sass/src/feederbleeder.sass
new file mode 100644
index 0000000..d4641ce
--- /dev/null
+++ b/frontend/static/sass/src/feederbleeder.sass
@@ -0,0 +1,29 @@
+#chat
+ text-align: center
+ img
+ width: 500px
+ max-width: none
+ max-height: none
+ border: 10px solid black
+ margin: 10px auto 0
+ margin-right: 100px
+ a.u
+ font-size: 14px
+ min-width: 100px
+ letter-spacing: -1px
+ text-align: right
+ padding-right: 20px
+ *
+ font-size: 14px
+ .chatline
+ width: 510px
+ background-color: black
+ padding: 5px
+ text-align: left
+ margin: 0 auto
+ opacity: 0.9
+ margin-right: 100px
+ span
+ color: #666
+ text-shadow: none
+ font-weight: normal
diff --git a/frontend/static/sass/src/frederick.sass b/frontend/static/sass/src/frederick.sass
new file mode 100644
index 0000000..4bc0857
--- /dev/null
+++ b/frontend/static/sass/src/frederick.sass
@@ -0,0 +1,4 @@
+#chat
+ span
+ color: #004b27
+ text-shadow: 0 0 2px #fff
diff --git a/frontend/static/sass/src/gallery-white.sass b/frontend/static/sass/src/gallery-white.sass
new file mode 100644
index 0000000..f51853a
--- /dev/null
+++ b/frontend/static/sass/src/gallery-white.sass
@@ -0,0 +1,220 @@
+body
+ background: #fff
+#loading
+ background: transparent
+ color: #e6f0f0
+ text-shadow: #e6f0f0 0 0 50px
+#player
+ background: #fff
+ #projector
+ background-color: #000
+ #video-title
+ color: #fff
+ #video-title.fullscreen
+ #projimg
+ nav#controls
+ #scan.blinkOn
+ background-color: #fff
+ color: #000
+ #scan.blinkOff
+ background-color: #000
+ color: #fff
+ #like
+ color: #fae
+ #like.liked
+ color: #88f
+#playlistbg
+ background-color: #fff
+#playlist
+ ul#queue
+ li
+ border-bottom: 1px solid #ddd
+ span.title
+ color: #333
+ a.user
+ color: #d33682
+ span.like
+ color: #657b83
+ span.like.liked
+ color: #c357a3
+ li.playing
+ background-color: #333
+ span.title
+ color: #fff
+#curtain
+ background: #080810
+ opacity: 0.3
+#login
+ background: #fff
+ box-shadow: 0 5px 10px #000
+ img
+ label
+ color: #000
+ #button-shim
+ button
+ padding: 2px 5px
+ #login-username, #login-password
+ border: 2px solid #806
+ a
+ color: #68f
+#sitez
+ div
+ &:hover
+ background-color: #333
+ &.opened
+ background-color: #333
+nav
+ button
+ background-color: #888
+#logobg
+ background-color: #000
+ opacity: 0.7
+#logo
+ a
+ img
+ #scanjam
+ h1
+ color: #8ff
+ h2
+ color: #839496
+ a
+ color: #268bd2
+ img
+ #likebutton
+#likereport
+ a
+ background-color: #222
+ opacity: 0.95
+#form
+ background-color: #fff
+ #chat-message
+ border: 1px solid #333
+ button
+ background-color: #ddd
+ color: #333
+ &:hover
+ background-color: #c8cbd6
+#formbg
+ background-color: #fff
+ opacity: 0.7
+#chatbg
+ background-color: #fff
+ opacity: 0.1
+#chat
+ background: transparent
+ a
+ color: #4444ff
+ a.u
+ color: #ff0066
+ opacity: 0.9
+ a.pic
+ opacity: 1
+ span
+ color: #333
+ text-shadow: #000 0 0 0
+ .ytlink
+ color: #8aaab3
+ text-shadow: #000 0 0 0
+ .ytlink:hover
+ color: #11182f
+ text-shadow: #000 0 0 0
+ .ytlink.playing
+ color: #c2b
+ .ytlink.playing::before
+ img
+ #shim
+#lastlogbg
+ background-color: #fff
+ opacity: 0.3
+#lastlogbox
+ opacity: 0.8
+ h4
+ color: #666
+ ul
+ border-top: 1px solid #ddd
+li.ll
+ a
+ color: #4a5a73
+ border-bottom: 1px solid #ddd
+ text-shadow: #000 0 0 0
+#flower
+#plant
+button
+ background: #ddd
+ color: #333
+#settings-container, #rooms-container, #about-container
+ background-color: #222
+ color: #657b83
+ .close
+ color: #ded8c5
+ background-color: #000b16
+ &:hover
+ color: #fff
+ #rooms-loading
+ h5
+ color: #93a1a1
+ background-color: #333
+ p
+ color: #b3c1c1
+ background-color: #1b1b1f
+ label
+ color: #657b83
+ span
+ color: #839496
+ input
+ #room-topic, #room-bg, #room-bgreset
+ #room-settings-save
+ .shim
+ ul
+ li
+ border-top: 1px solid #000
+ color: #83a1a1
+ &:hover
+ color: #fdf6e3
+ a li
+ color: #83a1a1
+ a
+ color: #83a1a1
+#rooms-container
+#about-container
+
+#chat
+ text-align: center
+ img
+ width: 520px
+ max-width: none
+ max-height: none
+ border: 0
+ margin: 0 auto
+ a.u
+ font-size: 14px
+ min-width: 100px
+ letter-spacing: -1px
+ text-align: right
+ padding-right: 20px
+ a.pic
+ padding: 0
+ margin: 0
+ *
+ font-size: 14px
+ .chatimg
+ margin: 0 auto
+ padding: 0
+ .chatline
+ width: 510px
+ background-color: #fff
+ padding: 2px 5px 2px 5px
+ line-height: 16px
+ text-align: left
+ margin: 0 auto
+ opacity: 0.9
+ span
+ color: #666
+ text-shadow: none
+ font-weight: normal
+#logo
+ h2#topic
+ left: 5px
+ #likebutton
+ position: relative
+ left: 30px
diff --git a/frontend/static/sass/src/glitter.sass b/frontend/static/sass/src/glitter.sass
new file mode 100644
index 0000000..fd5e463
--- /dev/null
+++ b/frontend/static/sass/src/glitter.sass
@@ -0,0 +1,18 @@
+#chat *, #chat span, #chat span a
+ font-size: 30px
+ line-height: 38px
+ text-shadow: #000 0 0 5px, #000 0 0 5px, #000 0 0 5px, #000 0 0 5px, #000 0 0 5px, #000 0 0 5px, #000 0 0 5px, #000 0 0 5px, #000 0 0 5px, #000 0 0 5px, #000 0 0 5px, #000 0 0 5px, #000 0 0 5px, #000 0 0 5px, #000 0 0 5px, #000 0 0 5px, #000 0 0 5px, #000 0 0 5px, #000 0 0 5px
+ font-family: papyrus, comic sans, comic sans ms, sans-serif
+ letter-spacing: -1px
+ overflow: hidden
+#heading img
+ position: relative
+ top: -35px
+ left: -18px
+ z-index: 47
+#likebutton
+ position: relative
+ top: -90px
+ left: -16px
+#chat a.u
+ font-size: 24px
diff --git a/frontend/static/sass/src/ie.scss b/frontend/static/sass/src/ie.scss
new file mode 100644
index 0000000..5cd5b6c
--- /dev/null
+++ b/frontend/static/sass/src/ie.scss
@@ -0,0 +1,5 @@
+/* Welcome to Compass. Use this file to write IE specific override styles.
+ * Import this file using the following HTML or equivalent:
+ * <!--[if IE]>
+ * <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
+ * <![endif]--> */
diff --git a/frontend/static/sass/src/main.sass b/frontend/static/sass/src/main.sass
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/frontend/static/sass/src/main.sass
diff --git a/frontend/static/sass/src/print.scss b/frontend/static/sass/src/print.scss
new file mode 100644
index 0000000..b0e9e45
--- /dev/null
+++ b/frontend/static/sass/src/print.scss
@@ -0,0 +1,3 @@
+/* Welcome to Compass. Use this file to define print styles.
+ * Import this file using the following HTML or equivalent:
+ * <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> */
diff --git a/frontend/static/sass/src/profile.sass b/frontend/static/sass/src/profile.sass
new file mode 100644
index 0000000..0d88ea5
--- /dev/null
+++ b/frontend/static/sass/src/profile.sass
@@ -0,0 +1,514 @@
+@import compass/reset
+@mixin rounded($width)
+ -moz-border-radius: $width
+ -webkit-border-radius: $width
+ -o-border-radius: $width
+ border-radius: $width
+
+body
+ background: #888
+ // overflow-y: scroll
+ overflow-y: hidden
+ overflow-x: hidden
+ font-family: trebuchet ms, sans-serif
+#logo
+ position: absolute
+ z-index: 20
+ top: 15px
+ left: 20px
+ a
+ display: inline-block
+ img
+ padding-top: 5px
+ display: inline-block
+ h1
+ position: relative
+ top: -10px
+ left: 10px
+ font-size: 34px
+ font-weight: normal
+ font-style: italic
+ font-family: georgia, garamond, serif
+ color: #f8b
+ display: inline-block
+ h2
+ position: relative
+ display: inline-block
+ font-size: 12px
+ color: #fff
+ max-width: 250px
+ left: 10px
+ top: -6px
+ padding-right: 20px
+#logobg
+ position: absolute
+ top: 10px
+ left: 0
+ width: 100%
+ height: 64px
+ background-color: #000
+ opacity: 0.8
+ z-index: 19
+#likebutton
+ display: inline-block
+ display: none
+ z-index: -1
+ min-width: 90px
+ a
+ color: #33f
+#flower
+ position: absolute
+ top: 0
+ right: 10%
+ z-index: 20
+ pointer-events: none
+ display: none
+#contact
+ position: absolute
+ left: 0
+ display: none
+ #avatar, .avatar
+ display: none
+ width: 100%
+ // max-height: 300px
+ .avatar
+ display: block
+ #bio
+ p
+ color: #ddd
+ background-color: #000
+ padding: 10px 5px
+ text-align: center
+ opacity: 0.7
+ a
+ color: #ebf
+ display: block
+ img
+ width: 100%
+ // max-height: 300px
+#sitez
+ position: absolute
+ top: 30px
+ right: 20px
+ text-align: right
+ z-index: 20
+ div
+ color: #ddd
+ cursor: pointer
+ display: inline-block
+ padding: 4px 8px 4px 8px
+ float: left
+ a
+ color: #bbc
+ div#settings-hook
+ &:hover
+ @include rounded(10px 10px 3px 3px)
+ background-color: #333
+ color: #fff
+ &.opened
+ @include rounded(10px 10px 3px 3px)
+ background-color: #333
+ color: #fff
+ display: none
+ z-index: 82
+#fullscreen-warning
+ position: fixed
+ top: 50%
+ left: 50%
+ width: 600px
+ margin-left: -300px
+ margin-top: -20px
+ text-align: center
+ font-size: 24px
+ padding: 10px
+ background-color: rgba(0,0,0,0.5)
+ color: white
+ z-index: 100
+ display: none
+#settings-container
+ position: fixed
+ top: 53px
+ @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
+ input
+ margin: 2px 10px 0 0
+ width: 100px
+ #profile-avatar, #profile-bg
+ width: 300px
+ #profile-settings-save
+ font-size: 14px
+ textarea
+ width: 300px
+ height: 150px
+ .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
+#msg
+ z-index: 100
+ 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
+ strong
+ color: #859900
+ em
+ color: #dc322f
+ b
+ color: #002b36
+#player
+ padding: 10px
+ position: absolute
+ background: #000
+ #projector
+ display: block
+ position: fixed
+ 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: 10px
+ color: #fff
+ z-index: 20
+ &.fullscreen
+ position: fixed
+ bottom: 90px
+ left: auto
+ right: 30px
+ font-size: 24px
+ #projimg
+ width: 100%
+ height: 100%
+ nav#controls
+ z-index: 40
+ position: absolute
+ display: none
+ #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
+#playlistbg
+ position: absolute
+ background-color: #000
+ opacity: 0.5
+#playlist
+ position: absolute
+ z-index: 90
+ width: 100%
+ ul#queue
+ width: 100%
+ border-top: 1px solid #888
+ border-left: 1px solid #888
+ border-bottom: 1px solid #888
+ -webkit-padding-start: 0
+ -webkit-margin-before: 0
+ overflow-y: scroll
+ overflow-x: hidden
+ z-index: 90
+ li
+ padding: 5px
+ display: block
+ cursor: pointer
+ border-bottom: 1px solid #333
+ span.title
+ color: #ddd
+ display: block
+ padding: 5px
+ font-size: 15px
+ z-index: 1
+ &:hover
+ color: #fff
+ 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
+ span.score
+ float: right
+ font-size: 14px
+ color: #bbb
+ padding: 5px 10px 5px 5px
+ li.playing
+ background-color: #222
+ span.title
+ color: #fff
+ li#queueLess
+ color: #fff
+ text-align: center
+ &:hover
+ background-color: #666
+ color: #fff
+ border: 0
+ border-bottom: 1px solid #333
+ font-size: 18px
+ padding: 10px 0
+ cursor: pointer
+ li#queueMore
+ color: #fff
+ text-align: center
+ &:hover
+ background-color: #666
+ color: #fff
+ border: 0
+ font-size: 33px
+ padding: 20px 20px 20px 20px
+ cursor: pointer
+ li#queueDone
+ color: #ddd
+ text-align: center
+ border: 0
+ font-size: 33px
+ padding: 80px 20px 200px 20px
+ li#queueLoading
+ text-align: center
+ color: #fff
+ font-size: 24px
+ padding: 80px
+ ol
+ -webkit-padding-start: 0
+ -webkit-margin-before: 0
+ -webkit-margin-after: 0
+ display: block
+ position: relative
+ top: 1px
+ li
+ padding: 5px 8px 8px 8px
+ margin: 0 0 0 10px
+ list-style-type: none
+ border-top: 1px solid #000
+ border-right: 1px solid #000
+ border-left: 1px solid #000
+ border-bottom: 1px solid #888
+ display: inline-block
+ background-color: #333
+ color: #bbb
+ cursor: pointer
+ opacity: 0.7
+ z-index: 89
+ li.mode
+ position: relative
+ padding: 8px 8px 8px 8px
+ border-color: #888
+ border-bottom: 1px solid #111
+ background-color: #111
+ color: #fff
+ z-index: 91
+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
+ padding: 6px 5px 5px 5px
+#msg
+ display: none
+#gif-container
+ position: absolute
+ left: 0
+ width: 100%
+ padding-left: 10%
+ display: block
+ padding-bottom: 200px
+ #gifs
+ clear: both
+ display: block
+ text-align: center
+ top: 0
+ max-width: 80%
+ margin: 0 0 200px 0
+ box-shadow: 0 5px 10px #000
+ background-color: #fff
+ div
+ padding: 10px
+ display: inline-block
+ img
+ max-width: 350px
+ max-height: 400px
+#bg
+ position: fixed
+ top: 0
+ left: 0
+ opacity: 1
+ z-index: -3
+ width: 100%
+ height: 100%
+ display: none
+ img
+ width: 100%
+ height: 100%
+
+.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
+
diff --git a/frontend/static/sass/src/roomlist.sass b/frontend/static/sass/src/roomlist.sass
new file mode 100644
index 0000000..9bff4cc
--- /dev/null
+++ b/frontend/static/sass/src/roomlist.sass
@@ -0,0 +1,131 @@
+.roomdiv
+ width: 200px
+ height: 100px
+ display: block
+ float: left
+ text-align: center
+ vertical-align: bottom
+ position: relative
+ font-size: 30px
+ color: #fff
+ padding-top: 160px
+ background-color: #000
+ cursor: pointer
+ *
+ cursor: pointer
+ .count
+ font-size: 160px
+ color: #fff
+ position: absolute
+ left: 0
+ top: 10px
+ width: 100%
+ text-align: center
+ vertical-align: middle
+ z-index: 3
+ opacity: 0.9
+ .roomname
+ position: absolute
+ left: 0
+ top: 180px
+ width: 100%
+ text-align: center
+ vertical-align: middle
+ opacity: 0.9
+ z-index: 4
+ .roombg
+ position: absolute
+ background-position: center center
+ left: 0
+ top: 0
+ width: 100%
+ height: 100%
+ opacity: 0.8
+ z-index: 1
+ cursor: pointer
+ &:hover
+ .roomname
+ opacity: 1
+ .count
+ opacity: 1
+ .roombg
+ opacity: 0.9
+#roomlist
+ padding-top: 90px
+#roomlist a
+ text-decoration: none
+ cursor: pointer
+body
+ overflow-y: scroll
+ background: #000
+#logo
+ //top: 22px
+ top: 5px
+ left: 10px
+ h1#header
+ font-size: 30px
+ color: #4df
+ // top: -8px
+ top: 8px
+ max-width: 500px
+ h2.preamblish
+ display: inline-block
+ position: relative
+ top: -15px
+ left: 10px
+ font-size: 12px
+ color: #fff
+ max-width: 250px
+ padding-right: 20px
+
+#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
+ button
+ font-size: 24px
diff --git a/frontend/static/sass/src/screen.sass b/frontend/static/sass/src/screen.sass
new file mode 100644
index 0000000..f8b4429
--- /dev/null
+++ b/frontend/static/sass/src/screen.sass
@@ -0,0 +1,891 @@
+@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('/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
+
diff --git a/frontend/static/sass/src/screen.scss b/frontend/static/sass/src/screen.scss
new file mode 100644
index 0000000..81de847
--- /dev/null
+++ b/frontend/static/sass/src/screen.scss
@@ -0,0 +1,6 @@
+/* Welcome to Compass.
+ * In this file you should write your main styles. (or centralize your imports)
+ * Import this file using the following HTML or equivalent:
+ * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
+
+@import "compass/reset";
diff --git a/frontend/static/sass/src/sewergreats.sass b/frontend/static/sass/src/sewergreats.sass
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/frontend/static/sass/src/sewergreats.sass
diff --git a/frontend/static/sass/src/test.sass b/frontend/static/sass/src/test.sass
new file mode 100644
index 0000000..15e46c4
--- /dev/null
+++ b/frontend/static/sass/src/test.sass
@@ -0,0 +1,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('/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
+
diff --git a/frontend/static/sass/src/tiny.sass b/frontend/static/sass/src/tiny.sass
new file mode 100644
index 0000000..3be302d
--- /dev/null
+++ b/frontend/static/sass/src/tiny.sass
@@ -0,0 +1,36 @@
+#logo,#form,#logobg,#sitez
+ opacity: 0
+ z-index: -20
+#lastlogbox *, #lastlogbox h4
+ font-size: 5px
+ padding: 1px
+#lastlogbox
+ padding: 1px
+#chat
+ font-size: 6px
+ line-height: 120%
+ overflow-y: hidden
+ a.u
+ min-width: 10px
+ img
+ max-height: 30px
+ max-width: 30px
+#player *,#playlist *,#queue *
+ font-size: 5px
+#playlist ul#queue li
+ padding: 1px
+#playlist ul#queue li span.like
+ font-size: 5px
+#playlist ul#queue li a.user
+ font-size: 5px
+nav button
+ font-size: 10px
+ padding: 1px
+ border: 1px solid #888
+ min-width: 10px
+ max-width: 10px
+ min-height: 10px
+ max-height: 10px
+ overflow: hidden
+*,#chat
+ overflow: hidden
diff --git a/frontend/static/sass/src/top.sass b/frontend/static/sass/src/top.sass
new file mode 100644
index 0000000..3f55c57
--- /dev/null
+++ b/frontend/static/sass/src/top.sass
@@ -0,0 +1,52 @@
+body
+ background-color: rgb(49,18,150)
+ overflow: hidden
+#bg
+ position: fixed
+ top: 0
+ left: 0
+ height: 100%
+ width: 100%
+ display: block
+ opacity: 1
+ background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.11, rgb(49,18,150)), color-stop(0.67, rgb(143,38,255)), color-stop(0.84, rgb(157,66,255)))
+ background-image: -moz-linear-gradient( center bottom, rgb(49,18,150) 11%, rgb(143,38,255) 67%, rgb(157,66,255) 84%)
+ img
+ width: 100%
+ height: 100%
+#plant1
+ z-index: -2
+ position: fixed
+ left: -200px
+ bottom: 0
+#plant2
+ z-index: -2
+ position: fixed
+ right: -200px
+ bottom: 0
+.cloudleft
+ background-image: url(/bgz/cloudz1.png)
+ position: fixed
+ bottom: 0
+ left: 0
+ width: 600px
+ height: 400px
+ opacity: 0.7
+ pointer-events: none
+ z-index: -1
+.cloudright
+ background-image: url(/bgz/cloudz2.png)
+ position: fixed
+ bottom: 0
+ right: 0
+ width: 600px
+ height: 400px
+ opacity: 0.8
+ pointer-events: none
+ z-index: -1
+.shimmer
+ margin: 0 0 -20px 0
+ opacity: 0.5
+.shimmer2
+ margin: 0 0 -40px 0
+ opacity: 0.5
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 13:58:14 +0000