summaryrefslogtreecommitdiff
path: root/app/static/styles
diff options
context:
space:
mode:
Diffstat (limited to 'app/static/styles')
-rw-r--r--app/static/styles/home.css73
1 files changed, 29 insertions, 44 deletions
diff --git a/app/static/styles/home.css b/app/static/styles/home.css
index d18729d..d7828c3 100644
--- a/app/static/styles/home.css
+++ b/app/static/styles/home.css
@@ -2,8 +2,8 @@
.tab-yes {
height: 100%;
width: 10%;
- float: left;
- position: relative;
+ position: absolute;
+ left: 0;
background: var(--yes);
}
.tab-yes:hover ~ .feed-post {
@@ -14,8 +14,8 @@
.tab-no {
height: 100%;
width: 10%;
- float: right;
- position: relative;
+ position: absolute;
+ right: 0;
background: var(--no);
}
.tab-no:hover ~ .feed-post {
@@ -41,66 +41,51 @@
.post-wrapper {
position: relative;
- z-index: 1;
max-height: 25%;
max-width: 40%;
+ margin: 1rem;
+ background: blue;
perspective: 600px;
- perspective-origin: bottom;
}
-@keyframes post {
- 0% {}
- 100% {overflow: auto; height: 40%;}
-}
.post {
position: relative;
- height: 70%;
+ margin: 0 auto;
+ height: 50%;
+ width: 70%;
background: white;
- z-index: 0;
border-radius: 12px;
padding: 1rem;
- margin: 1rem;
overflow: hidden;
+ transition-duration: 1s;
}
-.post:hover {
- animation-name: post;
- animation-duration: var(--med-speed);
- animation-fill-mode: both;
-}
-.post:hover + .btn-wrapper {
- animation-name: btn-wrapper;
- animation-duration: var(--med-speed);
- animation-fill-mode: both;
-}
-
-@keyframes btn-wrapper {
- 0% {}
- 100% {transform: rotateX(0deg); opacity: 100%;}
-}
-.btn-wrapper {
- position: relative;
- z-index: 1;
- opacity: 0%;
- transform: rotateX(-90deg);
+.post-wrapper:hover > .post {
+ width: 60%;
+ overflow: auto;
}
.btn-yes {
- height: 25%;
- width: 40%;
- float: left;
- left: 1rem;
- z-index: 2;
- position: relative;
+ height: 100%;
+ width: 20%;
+ position: absolute;
+ left: 0;
background: var(--yes);
border-radius: 12px;
+ transform: rotateY(-90deg);
+ transition-duration: 1s;
+ transform-origin: right;
}
+.post-wrapper:hover > .btn-yes {transform: rotateY(0deg);}
.btn-no {
- height: 25%;
- width: 40%;
- float: right;
- right: 1rem;
- position: relative;
+ height: 100%;
+ width: 20%;
+ position: absolute;
+ right: 0;
background: var(--no);
border-radius: 12px;
+ transform: rotateY(90deg);
+ transition-duration: 1s;
+ transform-origin: left;
}
+.post-wrapper:hover > .btn-no {transform: rotateY(0deg);}
Copyright 2019--2024 Marius PETER