From 43eae3a4a86db4878b670b7efc14e01bd4c06e0f Mon Sep 17 00:00:00 2001 From: blendoit Date: Wed, 5 Feb 2020 19:47:05 -0800 Subject: 'yes' page styles. --- app/static/styles/default.css | 2 +- app/static/styles/home.css | 4 +- app/static/styles/yes.css | 177 ++++++++++++++++++++++++++++++------------ 3 files changed, 130 insertions(+), 53 deletions(-) (limited to 'app/static') 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; -- cgit v1.2.3