@import 'style.scss';
.upload-button {
float: right;
margin: 0;
}
.file-upload-total {
display: none;
float: right;
margin-right: 35px;
font-size: 20px;
margin-top: 12px;
}
.server-storage-info {
float: right;
}
.account-button {
float: right;
margin-top: -56px;
}
.account-field-group {
border-left: 2px solid $blue;
max-width: 420px;
}
.align-with-buttons {
margin-left: 20px;
}
.header {
position: absolute;
height: 40px;
font-size: 24px;
top: 15px;
left: 40px;
right: 40px;
}
.torso {
padding-top: 60px;
}
.footer {
height: 50px;
position: absolute;
bottom: 0;
left: 0;
right: 420px;
padding: 10px;
text-align: center;
border-top: 2px solid $blue;
}
.copyright-text {
display: inline-block;
padding: 15px;
}
.footer-element {
float: right;
padding: 5px;
}
.donate-info {
display: none;
position: absolute;
border: 2px solid $blue;
background: $background;
padding: 10px;
text-align: center;
line-height: 1.3;
}
.donate-button {
padding: 0;
width: unset;
height: 40px;
margin: 0;
}
.field-header {
padding: 15px 0 15px 0;
font-size: 20px;
}
.field-header.sidebar {
font-size: 18px;
text-align: center;
}
.right-sidebar {
height: 100%;
width: 420px;
transition: all ease 350ms;
position: absolute;
right: 0;
top: 0;
background: $background;
z-index: 1;
}
.watchrooms {
height: Calc(40vh - 4px);
border: 2px solid $blue;
}
.network-info {
padding-left: 10px;
padding-top: 10px;
}
.network-info-item {
display: inline-block;
width: 32%;
font-family: 'VT323', monospace;
font-size: 14px;
border-bottom: 2px solid $blue;
text-align: center;
}
.watchroom-item {
padding: 10px;
cursor: pointer;
}
.watchroom-item:hover {
background-color: $hovered;
}
.messages {
height: Calc(60vh - 2px);
border: 2px solid $blue;
border-top: none;
}
.message {
padding: 5px;
font-size: 14px;
font-family: 'Asap', sans-serif;
}
.left-sidebar {
display: inline-block;
width: 140px;
background: $background;
height: Calc(100vh - 134px);
overflow: auto;
}
.sidebar-item {
padding: 20px;
font-size: 20px;
cursor: pointer;
}
.sidebar-item:hover {
background-color: $hovered;
}
.sidebar-item.selected {
background-color: $selected;
border-right: 2px solid $blue;
}
.content {
display: inline-block;
vertical-align: top;
margin-left: 40px;
width: Calc(100vw - 640px);
max-height: Calc(100vh - 132px);
overflow-y: auto;
padding-right: 35px;
}
.field-wrapper {
padding: 10px;
}
.file-upload-header {
padding-bottom: 0;
}
.file-upload-wrapper {
padding: 0 0 20px 0;
margin: 10px 0 10px 0;
border-bottom: 2px solid $blue;
width: 100%;
}
.file-upload-controls {
padding-left: 20px;
margin-left: 10px;
border-left: 2px solid $blue;
display: inline-block;
width: -moz-available;
margin-top: 20px;
}
.custom-file-upload {
border: 2px solid white;
display: inline-block;
padding: 15px;
font-size: 15px;
cursor: pointer;
vertical-align: top;
}
.custom-file-upload:hover {
background-color: $hovered;
}
.queued-files {
display: inline-block;
vertical-align: bottom;
padding: 0px 20px;
margin: 20px 0;
width: Calc(100% - 50px);
max-height: 30vh;
overflow: auto;
}
.queued-files.queued-files-empty {
width: auto;
}
.queued-file {
text-align: right;
padding: 3px 5px;
border-bottom: 1px solid $blue;
}
.queued-file-name {
float: left;
}
.upload-progress {
width: 80%;
}
.upload-button-loading-gif {
height: 17px;
vertical-align: bottom;
padding-right: 10px;
}
.queued-file-progress {
padding: 4px 0 4px 4px;
}
.queued-file-progress-label {
float: left;
padding: 2px 0;
}
.library {}
.video-entry {
padding: 10px;
margin: 10px;
cursor: pointer;
border-left: 2px solid $blue;
text-align: right;
}
.video-entry.blocked {
cursor: default;
}
.video-entry:hover {
background-color: $hovered;
}
.video-entry.blocked:hover {
background-color: $background;
}
.video-entry-loading {
display: none;
margin-right: 10px;
}
.video-entry-loading-gif {
height: 15px;
vertical-align: bottom;
margin: 2px;
}
.video-entry-progress {
margin-right: 10px;
}
.video-entry-title {
float: left;
word-wrap: anywhere;
}
.video-entry-option {
margin-left: 10px;
}
.video-entry-option:hover {
text-decoration: underline;
}
.video-entry-option.scary:hover {
text-decoration-color: red;
}
.custom-subtitle-upload {
display: inline-block;
cursor: pointer;
}
.custom-subtitle-upload:hover {
text-decoration: underline;
}
.mobile-menu-icon {
position: absolute;
top: 12px;
height: 30px;
display: none;
cursor: pointer;
}
.mobile-menu-icon.left {
left: 12px;
}
.mobile-menu-icon.right {
right: 12px;
}
.right-sidebar.open {
right: 0;
}
.left-sidebar.open {
left: 0;
}
/* Right sidebar is nearly collapsed and slides in on hover */
@media only screen and (max-width: 1200px) {
.mobile-menu-icon.right {
display: block;
right: 32px;
}
.right-sidebar {
right: -400px;
}
.right-sidebar:hover {
right: 0;
}
.content {
width: Calc(100vw - 240px);
}
.footer {
right: 20px;
}
}
/* Mobile CSS */
/* Left sidebar is fully collapsed and slides in on top left hamburger menu tap */
/* Right sidebar is fully collapsed and slides in on top right hamburger menu tap */
/* Watch Together Header is centered */
@media only screen and (max-width: 800px) {
.mobile-menu-icon {
display: block;
}
.mobile-menu-icon.right {
right: 12px;
}
.content {
width: Calc(100vw - 20px);
margin-left: 10px;
padding-right: 10px;
}
.header {
text-align: center;
}
.right-sidebar {
right: -420px;
}
.right-sidebar:hover {
right: 0;
}
.left-sidebar {
position: absolute;
left: -141px;
transition: all 350ms ease;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-top: 1px solid black;
z-index: 1;
}
.footer {
right: 0;
}
.donate-info {
max-width: 60vw;
}
}
@media only screen and (max-width: 500px) {
.right-sidebar {
right: -300px;
width: 300px;
}
.server-storage-info {
max-width: 180px;
}
}
@media only screen and (max-width: 420px) {
.server-storage-info {
max-width: 180px;
}
}