[Flask] Aggregate your news and vote for the content you care about.
1
:root {background:var(--yes);}
2
/* Feeds wrapper. */
3
. {
4
height:100%;
5
width:calc(100%-6%);
6
position:absolute;
7
overflow:hidden;
8
animation-name:;
9
animation-duration:var(--med-speed);
10
}
11
/* Tabs. */
12
. {
13
height:100%;
14
width:3%;
15
position:relative;
16
float:right;
17
z-index:0;
18
background:var(--no);
19
}
20
.:hover {width:6%;transition:var(--fast-speed);}
21
.:hover~. {width:6%;transition:var(--fast-speed);}
22
.:hover~. {right:12%;transition:var(--fast-speed);}
23
. {
24
height:100%;
25
width:3%;
26
position:relative;
27
float:right;
28
z-index:1;
29
background:var(--home);
30
}
31
.:hover {width:6%;transition:var(--fast-speed);}
32
.:hover~. {
33
/* left: -3%; */
34
right:9%;
35
transition:var(--fast-speed);
36
}
37
38
/* Feeds. */
39
. {
40
height:100%;
41
width:30%;
42
position:relative;
43
float:left;
44
overflow:auto;
45
}
46
. {
47
/* background: blue; */
48
height:25%;
49
position:relative;
50
margin:1rem;
51
overflow:hidden;
52
perspective:600px;
53
}
54
.:hover {
55
height:40%;
56
transition-duration:var(--med-speed);
57
}
58
. {
59
height:3rem;
60
width:calc(50%-1rem);
61
position:absolute;
62
left:0;
63
background:var(--home);
64
border-radius:8px;
65
transform:rotateX(90deg);
66
transition-duration:var(--slow-speed);
67
transform-origin:bottom;
68
}
69
.:hover>. {transform:rotateX(0deg);}
70
. {
71
height:3rem;
72
width:calc(50%-1rem);
73
position:absolute;
74
right:0;
75
background:var(--no);
76
border-radius:8px;
77
transform:rotateX(90deg);
78
transition-duration:var(--slow-speed);
79
transform-origin:bottom;
80
}
81
.:hover>. {transform:rotateX(0deg);}
82
. {
83
height:40%;
84
width:100%;
85
position:relative;
86
background:white;
87
border-radius:12px;
88
overflow:hidden;
89
transition-duration:var(--med-speed);
90
}
91
.:hover>. {
92
margin-top:3.5rem;
93
overflow:auto;
94
}
95
.[type=text] {
96
width:70%;
97
position:relative;
98
margin:0auto;
99
/* transform: rotateX(-90deg); */
100
transition-duration:var(--slow-speed);
101
transform-origin:top;
102
}
103
conversation-wrapper:hover>.[type=text] {
104
transform:rotateX(90deg);
105
width:20%;
106
}
107
108
. {
109
height:100%;
110
width:50%;
111
display:flex;
112
position:relative;
113
float:left;
114
flex-wrap:wrap;
115
overflow:auto;
116
justify-content:space-between;
117
}
118
. {
119
/* background: blue; */
120
height:25%;
121
max-width:40%;
122
position:relative;
123
margin:1rem;
124
overflow:hidden;
125
perspective:600px;
126
}
127
.:hover {
128
height:25%;
129
transition-duration:var(--med-speed);
130
}
131
. {
132
height:100%;
133
max-width:100%;
134
background:white;
135
position:relative;
136
border-radius:14px;
137
overflow:hidden;
138
transition-duration:var(--med-speed);
139
}
140
.:hover>. {
141
overflow:auto;
142
}
143
. {
144
height:3rem;
145
width:calc(50%-1rem);
146
position:absolute;
147
left:0;
148
background:var(--home);
149
border-radius:8px;
150
transform:rotateX(90deg);
151
transition-duration:var(--slow-speed);
152
transform-origin:bottom;
153
}
154
.:hover>. {transform:rotateX(0deg);}
155
. {
156
height:3rem;
157
width:calc(50%-1rem);
158
position:absolute;
159
right:0;
160
background:var(--no);
161
border-radius:8px;
162
transform:rotateX(90deg);
163
transition-duration:var(--slow-speed);
164
transform-origin:bottom;
165
}
166
.:hover>. {transform:rotateX(0deg);}
167
.:hover>. {
168
margin-top:3.5rem;
169
overflow:auto;
170
}
171
172
. {
173
width:20%;
174
height:100%;
175
position:relative;
176
float:right;
177
overflow:auto;
178
}
179
. {
180
background:white;
181
border-radius:14px;
182
padding:1rem;
183
margin:0.5rem;
184
}
185
.:hover {
186
background:linear-gradient(toleft,var(--no)50%,var(--yes)50%);
187
cursor:pointer;
188
transition:0.8s;
189
color:white;
190
}
191