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