summaryrefslogtreecommitdiff
path: root/app/static/styles
diff options
context:
space:
mode:
Diffstat (limited to 'app/static/styles')
-rw-r--r--app/static/styles/default.css6
-rw-r--r--app/static/styles/home.css17
-rw-r--r--app/static/styles/no.css35
-rw-r--r--app/static/styles/yes.css96
4 files changed, 109 insertions, 45 deletions
diff --git a/app/static/styles/default.css b/app/static/styles/default.css
index 47ba29d..51c6549 100644
--- a/app/static/styles/default.css
+++ b/app/static/styles/default.css
@@ -4,6 +4,9 @@
--home: rgba(200, 200, 200, 0.7);
--yes: rgba(0, 255, 0, 0.7);
--no: rgba(255, 0, 0, 0.7);
+ background-image: url(../img/home.png);
+ background-repeat: repeat-x;
+ transition-timing-function: ease-in-out;
}
* {
@@ -17,9 +20,10 @@ body {
}
h1 {
-
}
h2 {
+}
+p {
}
diff --git a/app/static/styles/home.css b/app/static/styles/home.css
index 262b40c..e2617bd 100644
--- a/app/static/styles/home.css
+++ b/app/static/styles/home.css
@@ -1,22 +1,23 @@
.main {
height: 100%;
position: absolute;
+ z-index: 1;
left: 3%;
right: 3%;
- background: linear-gradient(to top, var(--secondary-color), var(--primary-color)) fixed;
}
.tab-yes {
height: 100%;
- width: 10%;
+ width: 3%;
float: left;
position: fixed;
z-index: -1;
+ left: 0;
background: var(--yes);
}
.tab-no {
height: 100%;
- width: 10%;
+ width: 3%;
float: right;
position: fixed;
z-index: -1;
@@ -24,6 +25,16 @@
background: var(--no);
}
+.tab-yes:hover {
+ width: 4%;
+ transition: 0.2s;
+}
+
+.tab-no:hover {
+ width: 4%;
+ transition: 0.2s;
+}
+
.tab-yes:hover ~ .main {
left: 5%;
transition: 0.2s;
diff --git a/app/static/styles/no.css b/app/static/styles/no.css
index 09171a6..352a635 100644
--- a/app/static/styles/no.css
+++ b/app/static/styles/no.css
@@ -1,47 +1,50 @@
.main {
height: 100%;
- right: 0;
- left: 6%;
position: absolute;
z-index: 1;
- background: linear-gradient(to top, var(--secondary-color), var(--primary-color)) fixed;
+ left: 7%;
}
-.tab-home {
+.tab-yes {
height: 100%;
width: 3%;
float: left;
position: relative;
- z-index: 0;
- background: var(--home);
+ z-index: 1;
+ background: var(--yes);
}
-.tab-yes {
+.tab-home {
height: 100%;
width: 3%;
float: left;
position: relative;
- z-index: -1;
- background: var(--yes);
+ z-index: 1;
+ background: var(--home);
}
-.tab-home:hover ~ .main {
- left: 9%;
+.tab-home:hover {
+ width: 4%;
transition: 0.2s;
}
-.tab-home:hover {
- width: 6%;
+.tab-yes:hover ~ .main {
+ left: 10%;
transition: 0.2s;
}
-.tab-yes:hover ~ .main {
- left: 9%;
+.tab-home:hover ~ .main {
+ left: 8%;
+ transition: 0.2s;
+}
+
+.tab-yes:hover ~ .tab-home {
+ width: 5%;
transition: 0.2s;
}
.tab-yes:hover {
- width: 6%;
+ width: 4%;
transition: 0.2s;
}
diff --git a/app/static/styles/yes.css b/app/static/styles/yes.css
index 96443e1..3e8e614 100644
--- a/app/static/styles/yes.css
+++ b/app/static/styles/yes.css
@@ -1,54 +1,100 @@
+/* Main page components. */
.main {
height: 100%;
- right: 6%;
- left: 0;
- position: absolute;
- z-index: 1;
- background: linear-gradient(to top, var(--secondary-color), var(--primary-color)) fixed;
+ position: relative;
+ z-index: 0;
+ overflow: hidden;
}
-.tab-home {
+/* Feeds. */
+.feed-message {
height: 100%;
- width: 3%;
- float: right;
+ width: 30%;
position: relative;
- z-index: 0;
- background: var(--home);
+ float: left;
+ overflow: auto;
+}
+.feed-post {
+ height: 100%;
+ width: 30%;
+ position: relative;
+ float: left;
+ overflow: auto;
+}
+.feed-ads {
+ height: 100%;
+ width: 20%;
+ position: relative;
+ float: left;
+ overflow: auto;
}
+/* Tabs. */
.tab-no {
height: 100%;
width: 3%;
float: right;
position: relative;
- z-index: -1;
background: var(--no);
}
-
-.tab-home:hover ~ .main {
- right: 9%;
- transition: 0.2s;
+.tab-home {
+ height: 100%;
+ width: 3%;
+ float: right;
+ position: relative;
+ background: var(--home);
}
-
.tab-home:hover {
- width: 6%;
+ width: 4%;
transition: 0.2s;
}
-
-.tab-no:hover ~ .main {
- right: 9%;
+.tab-no:hover ~ .tab-home {
+ width: 5%;
transition: 0.2s;
}
-
.tab-no:hover {
- width: 6%;
+ width: 4%;
transition: 0.2s;
}
-.post {
+/* Messages. */
+.message {
background: white;
border-radius: 14px;
padding: 1rem;
- margin: 1rem;
- width: 20%;
+ margin: 0.5rem;
+}
+.message:hover {
+ background: linear-gradient(to left, var(--no) 50%, var(--yes) 50%);
+ cursor: pointer;
+ transition: 0.8s;
+ color: white;
+}
+
+/* News. */
+.news {
+ background: white;
+ border-radius: 14px;
+ padding: 1rem;
+ margin: 0.5rem;
+}
+.news:hover {
+ background: linear-gradient(to left, var(--no) 50%, var(--yes) 50%);
+ cursor: pointer;
+ transition: 0.8s;
+ color: white;
+}
+
+/* Ads. */
+.ad {
+ background: white;
+ border-radius: 14px;
+ padding: 1rem;
+ margin: 0.5rem;
+}
+.ad:hover {
+ background: linear-gradient(to left, var(--no) 50%, var(--yes) 50%);
+ cursor: pointer;
+ transition: 0.8s;
+ color: white;
}
Copyright 2019--2024 Marius PETER