Redone UI, add leave and delete logic

2020-04-16 01:28:29 -04:00
parent 24b2c6a4e0
commit 1acbca3bf0
15 changed files with 1197 additions and 1968 deletions
@@ -1,7 +1,138 @@
-@import '~antd/dist/antd.css';
-.party-content-wrapper {
-  position: relative;
-  height: 100%;
+body {
+  margin: 0 !important;
+  background-color: black;
+  transition: max-width ease-in-out 0.35s;
+}
+body.visible {
+  width: 65%;
+}
+body.visible .watch-party-fab {
+  right: calc(35% - 4rem) !important;
+  top: 1.5rem;
+}
+
+body.netflix.visible .AkiraPlayer, /* NETFLIX */
+body.hulu.visible .Player__container.addFocus,/* HULU */
+body.amazon-prime.visible #dv-web-player.dv-player-fullscreen /* AMAZON PRIME */ {
+  max-width: 65% !important;
+}
+/* HULU MINIMIZED VIDEO */
+body.hulu.visible #__player__.Player__container.Player__container--modal {
+  right: calc(35% + 2rem) !important;
+}
+/* HULU & AMAZON PRIME FIX */
+body.hulu #party-routes-wrapper,
+body.amazon-prime #party-routes-wrapper {
+  width: 35% !important;
+  height: 100% !important;
+}
+/* NETFLIX HEADER FIX */
+body.netflix .pinning-header-container {
+  right: 35% !important;
+}
+
+#party-routes-wrapper {
+  margin: 0;
+  position: fixed;
+  background-color: rgb(27, 27, 27);
+  bottom: 0;
+  width: calc(35% - 2rem);
+  right: -35%;
+  transition: all ease-in-out 0.3s;
+  height: calc(100% - 2rem);
+  padding: 1rem;
+  color: white;
  display: flex;
-  width: 100%;
-}
+  flex-direction: column;
+}
+#party-routes-wrapper.visible {
+  right: 0;
+}
+.watch-party-fab {
+  z-index: 9999;
+  position: fixed !important;
+  bottom: 1rem !important;
+  right: -2rem !important;
+  background-color: black !important;
+  /* background-image: url('/logo192.png'); */
+  background-image: url('chrome-extension://__MSG_@@extension_id__/logo192.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 2rem;
+  transition: all ease-in-out 0.3s !important;
+}
+.watch-party-fab:hover {
+  right: 1rem !important;
+}
+.watch-party-fab .fab-logo {
+  max-width: 65%;
+  max-height: 65%;
+}
+
+.party-create-container {
+  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;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.party-chat-container {
+  display: flex;
+  max-height: 100%;
+  flex-direction: column;
+  flex: 1;
+}
+
+.thread-container {
+  max-height: 100%;
+  flex: 1;
+  overflow-y: auto;
+  margin-bottom: 1rem;
+  margin-top: 1rem;
+}
+.room-title,
+.brand-title {
+  padding-left: 3.5rem !important;
+}
+.thread-container::-webkit-scrollbar {
+  width: 5px;
+}
+.thread-container::-webkit-scrollbar-track {
+  background-color: rgb(90, 90, 90);
+  border-radius: 1rem;
+}
+.thread-container::-webkit-scrollbar-thumb {
+  background-color: rgb(118, 182, 255);
+  border-radius: 13px;
+}
+textarea::-webkit-scrollbar {
+  display: none;
+}
+.chat-message-box > div {
+  border-radius: 26px;
+}
+
+.party-controls {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}