summaryrefslogtreecommitdiff
path: root/app/static/styles
diff options
context:
space:
mode:
Diffstat (limited to 'app/static/styles')
-rw-r--r--app/static/styles/default.css2
-rw-r--r--app/static/styles/home.css4
-rw-r--r--app/static/styles/yes.css177
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;
Copyright 2019--2024 Marius PETER