Skip to content

Commit 5386e14

Browse files
codeIntrovertcodeIntrovert
committed
UI optimisation & bug fixes
1 parent dcfcdd6 commit 5386e14

File tree

9 files changed

+1003
-468
lines changed

9 files changed

+1003
-468
lines changed

‎static/assets/css/animate.css

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎static/assets/css/flex-slider.css

Lines changed: 281 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,281 @@
1+
/*
2+
* jQuery FlexSlider v2.7.1
3+
* http://www.woothemes.com/flexslider/
4+
*
5+
* Copyright 2012 WooThemes
6+
* Free to use under the GPLv2 and later license.
7+
* http://www.gnu.org/licenses/gpl-2.0.html
8+
*
9+
* Contributing author: Tyler Smith (@mbmufffin)
10+
*
11+
*/
12+
/* ====================================================================================================================
13+
* FONT-FACE
14+
* ====================================================================================================================*/
15+
@font-face {
16+
font-family: 'flexslider-icon';
17+
src: url('../fonts/flexslider-icon.eot');
18+
src: url('../fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('../fonts/flexslider-icon.woff') format('woff'), url('../fonts/flexslider-icon.ttf') format('truetype'), url('../fonts/flexslider-icon.svg#flexslider-icon') format('svg');
19+
font-weight: normal;
20+
font-style: normal;
21+
}
22+
/* ====================================================================================================================
23+
* RESETS
24+
* ====================================================================================================================*/
25+
.flex-container a:hover,
26+
.flex-slider a:hover {
27+
outline: none;
28+
}
29+
.slides,
30+
.slides > li,
31+
.flex-control-nav,
32+
.flex-direction-nav {
33+
margin: 0;
34+
padding: 0;
35+
list-style: none;
36+
}
37+
.flex-pauseplay span {
38+
text-transform: capitalize;
39+
}
40+
/* ====================================================================================================================
41+
* BASE STYLES
42+
* ====================================================================================================================*/
43+
.flexslider {
44+
margin: 0;
45+
padding: 0;
46+
}
47+
.flexslider .slides > li {
48+
display: none;
49+
-webkit-backface-visibility: hidden;
50+
}
51+
.flexslider .slides img {
52+
width: 100%;
53+
display: block;
54+
}
55+
.flexslider .slides:after {
56+
content: "\0020";
57+
display: block;
58+
clear: both;
59+
visibility: hidden;
60+
line-height: 0;
61+
height: 0;
62+
}
63+
html[xmlns] .flexslider .slides {
64+
display: block;
65+
}
66+
* html .flexslider .slides {
67+
height: 1%;
68+
}
69+
.no-js .flexslider .slides > li:first-child {
70+
display: block;
71+
}
72+
/* ====================================================================================================================
73+
* DEFAULT THEME
74+
* ====================================================================================================================*/
75+
.flexslider {
76+
margin: 0;
77+
background: #fff;
78+
border: 4px solid #fff;
79+
position: relative;
80+
zoom: 1;
81+
-webkit-border-radius: 4px;
82+
-moz-border-radius: 4px;
83+
border-radius: 4px;
84+
-webkit-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
85+
-moz-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
86+
-o-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
87+
box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
88+
}
89+
.flexslider .slides {
90+
zoom: 1;
91+
}
92+
.flexslider .slides img {
93+
height: auto;
94+
-moz-user-select: none;
95+
}
96+
.flex-viewport {
97+
max-height: 2000px;
98+
-webkit-transition: all 1s ease;
99+
-moz-transition: all 1s ease;
100+
-ms-transition: all 1s ease;
101+
-o-transition: all 1s ease;
102+
transition: all 1s ease;
103+
}
104+
.loading .flex-viewport {
105+
max-height: 300px;
106+
}
107+
@-moz-document url-prefix() {
108+
.loading .flex-viewport {
109+
max-height: none;
110+
}
111+
}
112+
.carousel li {
113+
margin-right: 5px;
114+
}
115+
.flex-direction-nav {
116+
*height: 0;
117+
}
118+
.flex-direction-nav a {
119+
text-decoration: none;
120+
display: block;
121+
width: 40px;
122+
height: 40px;
123+
line-height: 40px;
124+
margin: -20px 0 0;
125+
position: absolute;
126+
top: 50%;
127+
z-index: 10;
128+
overflow: hidden;
129+
opacity: 0;
130+
cursor: pointer;
131+
color: rgba(0, 0, 0, 0.8);
132+
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
133+
-webkit-transition: all 0.3s ease-in-out;
134+
-moz-transition: all 0.3s ease-in-out;
135+
-ms-transition: all 0.3s ease-in-out;
136+
-o-transition: all 0.3s ease-in-out;
137+
transition: all 0.3s ease-in-out;
138+
}
139+
.flex-direction-nav a:before {
140+
font-family: "flexslider-icon";
141+
font-size: 26px;
142+
display: inline-block;
143+
content: '\f001';
144+
color: rgba(0, 0, 0, 0.8);
145+
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
146+
}
147+
.flex-direction-nav a.flex-next:before {
148+
content: '\f002';
149+
}
150+
.flex-direction-nav .flex-prev {
151+
left: -50px;
152+
}
153+
.flex-direction-nav .flex-next {
154+
right: -50px;
155+
text-align: right;
156+
}
157+
.flexslider:hover .flex-direction-nav .flex-prev {
158+
opacity: 0.7;
159+
left: 10px;
160+
}
161+
.flexslider:hover .flex-direction-nav .flex-prev:hover {
162+
opacity: 1;
163+
}
164+
.flexslider:hover .flex-direction-nav .flex-next {
165+
opacity: 0.7;
166+
right: 10px;
167+
}
168+
.flexslider:hover .flex-direction-nav .flex-next:hover {
169+
opacity: 1;
170+
}
171+
.flex-direction-nav .flex-disabled {
172+
opacity: 0!important;
173+
filter: alpha(opacity=0);
174+
cursor: default;
175+
z-index: -1;
176+
}
177+
.flex-pauseplay a {
178+
display: block;
179+
width: 20px;
180+
height: 20px;
181+
position: absolute;
182+
bottom: 5px;
183+
left: 10px;
184+
opacity: 0.8;
185+
z-index: 10;
186+
overflow: hidden;
187+
cursor: pointer;
188+
color: #000;
189+
}
190+
.flex-pauseplay a:before {
191+
font-family: "flexslider-icon";
192+
font-size: 20px;
193+
display: inline-block;
194+
content: '\f004';
195+
}
196+
.flex-pauseplay a:hover {
197+
opacity: 1;
198+
}
199+
.flex-pauseplay a.flex-play:before {
200+
content: '\f003';
201+
}
202+
.flex-control-nav {
203+
width: 100%;
204+
position: absolute;
205+
bottom: -40px;
206+
text-align: center;
207+
}
208+
.flex-control-nav li {
209+
margin: 0 6px;
210+
display: inline-block;
211+
zoom: 1;
212+
*display: inline;
213+
}
214+
.flex-control-paging li a {
215+
width: 11px;
216+
height: 11px;
217+
display: block;
218+
background: #666;
219+
background: rgba(0, 0, 0, 0.5);
220+
cursor: pointer;
221+
text-indent: -9999px;
222+
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
223+
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
224+
-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
225+
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
226+
-webkit-border-radius: 20px;
227+
-moz-border-radius: 20px;
228+
border-radius: 20px;
229+
}
230+
.flex-control-paging li a:hover {
231+
background: #333;
232+
background: rgba(0, 0, 0, 0.7);
233+
}
234+
.flex-control-paging li a.flex-active {
235+
background: #000;
236+
background: rgba(0, 0, 0, 0.9);
237+
cursor: default;
238+
}
239+
.flex-control-thumbs {
240+
margin: 5px 0 0;
241+
position: static;
242+
overflow: hidden;
243+
}
244+
.flex-control-thumbs li {
245+
width: 25%;
246+
float: left;
247+
margin: 0;
248+
}
249+
.flex-control-thumbs img {
250+
width: 100%;
251+
height: auto;
252+
display: block;
253+
opacity: .7;
254+
cursor: pointer;
255+
-moz-user-select: none;
256+
-webkit-transition: all 1s ease;
257+
-moz-transition: all 1s ease;
258+
-ms-transition: all 1s ease;
259+
-o-transition: all 1s ease;
260+
transition: all 1s ease;
261+
}
262+
.flex-control-thumbs img:hover {
263+
opacity: 1;
264+
}
265+
.flex-control-thumbs .flex-active {
266+
opacity: 1;
267+
cursor: default;
268+
}
269+
/* ====================================================================================================================
270+
* RESPONSIVE
271+
* ====================================================================================================================*/
272+
@media screen and (max-width: 860px) {
273+
.flex-direction-nav .flex-prev {
274+
opacity: 1;
275+
left: 10px;
276+
}
277+
.flex-direction-nav .flex-next {
278+
opacity: 1;
279+
right: 10px;
280+
}
281+
}

0 commit comments

Comments
 (0)