ayushya/watchparty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.3.0-beta/UI redone

Browse Source
This commit is contained in:
ayushya
2020-05-31 00:35:24 -04:00
parent fba32fd7d1
commit aa15c4eb30
21 changed files with 676 additions and 333 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/index.css
+74 -30
View File
@@ -129,11 +129,10 @@ body.amazon-prime textarea:focus {
position: fixed;
background-color: rgb(27, 27, 27);
bottom: 0;
width: calc(var(--party-width) - 2rem);
right: var(--neg-party-width);
transition: all ease-in-out 0.3s;
height: calc(100% - 2rem);
padding: 1rem;
width: var(--party-width);
height: 100%;
color: white;
display: flex;
flex-direction: column;
@@ -150,7 +149,6 @@ body.amazon-prime textarea:focus {
width: calc(var(--party-width) - 2rem) !important;
}
.party-notification-container .MuiPaper-root {
border-radius: 26px !important;
color: white;
background-color: black;
}
@@ -177,14 +175,15 @@ body.amazon-prime textarea:focus {
background-image: url('chrome-extension://__MSG_@@extension_id__/android-icon-192x192.png');
background-position: center;
background-repeat: no-repeat;
background-size: 2rem;
background-size: 75%;
animation-name: showbutton;
animation-iteration-count: 1;
animation-duration: 2s;
transition: all ease-in-out 0.3s !important;
}
.watch-party-fab:hover {
right: 1rem !important;
right: 0rem !important;
background-size: 90%;
}
.watch-party-fab .fab-logo {
max-width: 75%;
@@ -192,37 +191,24 @@ body.amazon-prime textarea:focus {
}
.party-create-container {
padding: 3.5rem;
display: flex;
flex-direction: column;
height: 100%;
}
.party-create-container .brand-title {
padding-top: 1.4rem !important;
padding-left: 3.5rem !important;
}
.party-create-container .name-field {
margin-bottom: 2rem !important;
}
.party-create-container .join-card {
padding: 1rem !important;
margin-bottom: 2rem;
}
.party-create-container .join-card .card-field {
margin-bottom: 1rem !important;
}
.party-create-container .party-create-inputs {
flex: 1;
.party-create-container .create-input-card {
display: flex;
flex-direction: column;
justify-content: center;
padding: 2rem;
margin: auto 0;
}
.party-chat-container {
display: flex;
max-height: 100%;
flex-direction: column;
flex: 1;
.party-create-container .create-input-card .create-mode-select,
.party-create-container .create-input-card .create-name,
.party-create-container .create-input-card .create-pin {
margin-bottom: 1rem;
}
.party-create-container .create-input-card {
background-color: #2d2d2d;
}
.thread-container {
@@ -258,11 +244,32 @@ textarea::-webkit-scrollbar {
.chat-message-box > div {
border-radius: 26px;
}
.party-chat-container {
display: flex;
max-height: 100%;
flex-direction: column;
flex: 1;
padding: 2rem;
padding-bottom: 1rem;
}
.party-chat-header {
display: flex;
align-items: flex-start;
padding-left: 2.25rem;
padding-left: 1rem;
flex-direction: column;
}
.party-chat-header .expander {
flex: 1;
width: 100%;
margin-bottom: 0 !important;
}
.party-chat-header .expander .MuiExpansionPanelDetails-root {
flex-direction: column;
}
.party-chat-header-text {
flex: 1;
}
@@ -277,10 +284,47 @@ textarea::-webkit-scrollbar {
}
.party-controls button:hover .party-control-button-text {
display: initial;
font-size: 1rem !important;
}
.party-controls button:hover .MuiButton-startIcon {
margin-right: 8px !important;
}
.media-info-card {
width: 100%;
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
padding: 0 2rem !important;
padding-bottom: 1rem !important;
}
.media-info-card .MuiCardContent-root {
padding: 0 !important;
}
.media-info-at {
font-size: 1rem !important;
padding-left: 3px !important;
}
.media-info-container {
display: flex;
flex-direction: row;
}
.media-info-icon {
width: 3.5rem !important;
height: 3.5rem !important;
}
.media-info-right {
flex: 1;
padding-left: 1rem;
}
.media-info-right .show-name {
font-size: 1.2rem;
line-height: 1.75rem;
white-space: break-spaces !important;
}
.media-info-link {
color: inherit !important;
}
.giphy-carousel::before {
position: relative;
bottom: 40%;