diff options
Diffstat (limited to 'frontend/static/sass/src/screen.sass')
| -rw-r--r-- | frontend/static/sass/src/screen.sass | 891 |
1 files changed, 891 insertions, 0 deletions
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 + |