'yes' page styles.

3 files changed, 130 insertions, 53 deletions

diff --git a/app/static/styles/default.css b/app/static/styles/default.css
index 3812189..05413f6 100644
--- a/app/static/styles/default.css
+++ b/app/static/styles/default.css
@@ -1,7 +1,7 @@
 :root {
     --primary-color: #003B5C;
     --secondary-color: #C3D7EE;
-    --home: rgba(200, 200, 200, 0.7);
+    --home: #c8c8c8;
     --yes: #5cff5c;
     --no: #ff5c5c;
     font-size: 18;
diff --git a/app/static/styles/home.css b/app/static/styles/home.css
index 290909f..161abc8 100644
--- a/app/static/styles/home.css
+++ b/app/static/styles/home.css
@@ -1,7 +1,7 @@
 /* Tabs. */
 .tab-yes {
     height: 100%;
-    width: 10%;
+    width: 6%;
     position: absolute;
     left: 0;
     background: var(--yes);
@@ -15,7 +15,7 @@
 }
 .tab-no {
     height: 100%;
-    width: 10%;
+    width: 6%;
     position: absolute;
     right: 0;
     background: var(--no);
diff --git a/app/static/styles/yes.css b/app/static/styles/yes.css
index bcaf7a4..cd0970f 100644
--- a/app/static/styles/yes.css
+++ b/app/static/styles/yes.css
@@ -1,72 +1,113 @@
-/* Main page area. */
 :root {background: var(--yes);}
-
-.main {
+/* Feeds wrapper. */
+.feeds {
     height: 100%;
-    position: relative;
-    z-index: 0;
+    width: calc(100% - 6%);
+    position: absolute;
     overflow: hidden;
-    /* animation-name: yes-refresh; */
-    /* animation-duration: var(--slow-speed); */
+    animation-name: yes-refresh;
+    animation-duration: var(--med-speed);
 }
-
 /* Tabs. */
 .tab-no {
     height: 100%;
     width: 3%;
-    position: absolute;
-    right: 0;
+    position: relative;
+    float: right;
+    z-index: 0;
     background: var(--no);
-    /* animation-name: yes-refresh; */
-    /* animation-duration: var(--slow-speed); */
 }
+.tab-no:hover {width: 6%; transition: var(--fast-speed);}
+.tab-no:hover ~ .tab-home {width: 6%; transition: var(--fast-speed);}
+.tab-no:hover ~ .feeds {right: 12%; transition: var(--fast-speed);}
 .tab-home {
     height: 100%;
     width: 3%;
+    position: relative;
     float: right;
-    position: absolute;
-    /* background: var(--home); */
-    /* animation-name: yes-refresh; */
-    animation-duration: var(--slow-speed);
+    z-index: 1;
+    background: var(--home);
 }
-.tab-home:hover {
-    width: 4%;
-    transition: 0.2s;
+.tab-home:hover {width: 6%; transition: var(--fast-speed);}
+.tab-home:hover ~ .feeds {
+    /* left: -3%; */
+    right: 9%;
+    transition: var(--fast-speed);
 }
-.tab-no:hover ~ .tab-home {
-    width: 5%;
-    transition: 0.2s;
-}
-.tab-no:hover {
-    width: 4%;
-    transition: 0.2s;
-}
-
 
 /* Feeds. */
-.feed-message {
+.feed-conversations {
     height: 100%;
-    width: 25%;
+    width: 30%;
     position: relative;
     float: left;
     overflow: auto;
 }
-.message {
+.conversation-wrapper {
+    /* background: blue; */
+    height: 25%;
+    position: relative;
+    margin: 1rem;
+    overflow: hidden;
+    perspective: 600px;
+}
+.conversation-wrapper:hover {
+    height: 40%;
+    transition-duration: var(--med-speed);
+}
+.btn-reply {
+    height: 3rem;
+    width: calc(50% - 1rem);
+    position: absolute;
+    left: 0;
+    background: var(--home);
+    border-radius: 8px;
+    transform: rotateX(90deg);
+    transition-duration: var(--slow-speed);
+    transform-origin: bottom;
+}
+.conversation-wrapper:hover > .btn-reply {transform: rotateX(0deg);}
+.btn-finish {
+    height: 3rem;
+    width: calc(50% - 1rem);
+    position: absolute;
+    right: 0;
+    background: var(--no);
+    border-radius: 8px;
+    transform: rotateX(90deg);
+    transition-duration: var(--slow-speed);
+    transform-origin: bottom;
+}
+.conversation-wrapper:hover > .btn-finish {transform: rotateX(0deg);}
+.conversation {
+    height: 40%;
+    width: 100%;
+    position: relative;
     background: white;
-    border-radius: 14px;
-    padding: 1rem;
-    margin: 0.5rem;
+    border-radius: 12px;
+    overflow: hidden;
+    transition-duration: var(--med-speed);
 }
-.message:hover {
-    background: linear-gradient(to left, var(--no) 50%, var(--yes) 50%);
-    cursor: pointer;
-    transition: 0.8s;
-    color: white;
+.conversation-wrapper:hover > .conversation {
+    margin-top: 3.5rem;
+    overflow: auto;
+}
+.input[type=text] {
+    width: 70%;
+    position: relative;
+    margin: 0 auto;
+    /* transform: rotateX(-90deg); */
+    transition-duration: var(--slow-speed);
+    transform-origin: top;
+}
+conversation-wrapper:hover > .input[type=text] {
+    transform: rotateX(90deg);
+    width: 20%;
 }
 
 .feed-news {
     height: 100%;
-    width: 55%;
+    width: 50%;
     display: flex;
     position: relative;
     float: left;
@@ -74,27 +115,63 @@
     overflow: auto;
     justify-content: space-between;
 }
+.news-wrapper {
+    /* background: blue; */
+    height: 25%;
+    max-width: 40%;
+    position: relative;
+    margin: 1rem;
+    overflow: hidden;
+    perspective: 600px;
+}
+.news-wrapper:hover {
+    height: 25%;
+    transition-duration: var(--med-speed);
+}
 .news {
-    max-height: 10%;
-    max-width: 50%;
+    height: 100%;
+    max-width: 100%;
     background: white;
     position: relative;
     border-radius: 14px;
-    padding: 1rem;
-    margin: 0.5rem;
     overflow: hidden;
+    transition-duration: var(--med-speed);
 }
-.news:hover {
-    background: linear-gradient(to left, var(--no) 50%, var(--yes) 50%);
-    cursor: pointer;
-    transition: 0.8s;
-    color: white;
+.news-wrapper:hover > .news {
+    overflow: auto;
+}
+.btn-comment {
+    height: 3rem;
+    width: calc(50% - 1rem);
+    position: absolute;
+    left: 0;
+    background: var(--home);
+    border-radius: 8px;
+    transform: rotateX(90deg);
+    transition-duration: var(--slow-speed);
+    transform-origin: bottom;
+}
+.news-wrapper:hover > .btn-comment {transform: rotateX(0deg);}
+.btn-archive {
+    height: 3rem;
+    width: calc(50% - 1rem);
+    position: absolute;
+    right: 0;
+    background: var(--no);
+    border-radius: 8px;
+    transform: rotateX(90deg);
+    transition-duration: var(--slow-speed);
+    transform-origin: bottom;
+}
+.news-wrapper:hover > .btn-archive {transform: rotateX(0deg);}
+.news-wrapper:hover > .news {
+    margin-top: 3.5rem;
     overflow: auto;
 }
 
 .feed-ads {
-    height: 100%;
     width: 20%;
+    height: 100%;
     position: relative;
     float: right;
     overflow: auto;