Skip to content

Commit 74aefd3

Browse files
i8ramini8ramin
committed
initial commit
0 parents  commit 74aefd3

File tree

2 files changed

+575
-0
lines changed

2 files changed

+575
-0
lines changed

‎fb-menu.css

Lines changed: 285 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,285 @@
1+
* {
2+
margin: 0; padding: 0;
3+
box-sizing: border-box;
4+
-webkit-box-sizing: border-box;
5+
/*
6+
-webkit-touch-callout: none;
7+
-webkit-tap-highlight-color: transparent;
8+
-webkit-text-size-adjust: none;
9+
-webkit-user-select: none;
10+
*/
11+
}
12+
13+
html {
14+
overflow: hidden;
15+
font-family: Helvetica;
16+
font-size: 100%;
17+
-webkit-text-size-adjust: 100%;
18+
}
19+
body {
20+
font-family: Helvetica, sans-serif;
21+
margin: 0; font-size: 13px; line-height: 1.231;
22+
}
23+
24+
body.menu-open #page {
25+
position: fixed;
26+
left: 260px;
27+
/* -webkit-transform: translate3d(260px, 0, 0);*/
28+
}
29+
30+
#viewport {
31+
/* position: absolute;*/
32+
/* width: 320px;*/
33+
/* overflow-x: hidden;*/
34+
}
35+
36+
#close-mask {
37+
display: none;
38+
position: absolute;
39+
top: 0;
40+
right: 0;
41+
bottom: 0;
42+
left: 0;
43+
z-index: 999;
44+
background-color: transparent;
45+
}
46+
47+
#page {
48+
position: relative;
49+
z-index: 2;
50+
height: 1000px;
51+
min-width: 320px;
52+
background-color: #fff;
53+
/* left: -260px;*/
54+
/* -webkit-transform: translate3d(0, 0, 0);*/
55+
/* -webkit-transition: -webkit-transform 200ms ease-in;*/
56+
-webkit-transition: left 200ms ease-in;
57+
58+
}
59+
#page > header {
60+
position: relative;
61+
height: 43px;
62+
line-height: 43px;
63+
background: -webkit-gradient( linear, left top, left bottom, from(#738ABA), to(#2C4987) );
64+
border-color: #111A33;
65+
-webkit-box-shadow: inset 0 1px 1px -1px white;
66+
}
67+
#page > header .trigger {
68+
position: absolute;
69+
top: 11px;
70+
left: 14px;
71+
display: block;
72+
width: 24px;
73+
height: 21px;
74+
background: transparent url(https://s-static.ak.facebook.com/rsrc.php/v1/y8/r/NwLTcDwF0zP.png) no-repeat;
75+
}
76+
#page > header .icons {
77+
position: absolute;
78+
left: 50%;
79+
margin-left: -72px;
80+
top: 9px;
81+
}
82+
#page > header .icons > span {
83+
display: inline-block;
84+
padding: 0 8px;
85+
}
86+
87+
#page .story {
88+
position: relative;
89+
padding: 7px;
90+
border-top: 1px solid #E9E9E9;
91+
background-color: #fff;
92+
}
93+
#page .story > img {
94+
position: absolute;
95+
}
96+
#page .story .contents {
97+
margin-left: 50px;
98+
}
99+
#page .story .contents .name {
100+
font-size: 14px;
101+
color: #3B5998;
102+
text-decoration: none;
103+
}
104+
#page .story .contents .actions {
105+
color: gray;
106+
margin: 6px 25px 3px 0;
107+
108+
font-size: 12px;
109+
line-height: 15px;
110+
}
111+
#page .story .contents .meta {
112+
position: relative;
113+
margin-top: 12px;
114+
padding: 4px 0 4px 9px;
115+
background: #EDEFF4;
116+
border-bottom: 1px solid #E5EAF1;
117+
border-top: 1px solid #EDEFF4;
118+
font-weight: bold;
119+
color: #3B5998;
120+
}
121+
#page .story .contents .meta::after {
122+
content: "";
123+
position: absolute;
124+
top: -8px;
125+
left: 10px;
126+
border-style: solid;
127+
border-width: 0 8px 8px;
128+
border-color: #EDEFF4 transparent;
129+
display: block;
130+
width: 0;
131+
}
132+
#page .story .contents .meta span {
133+
padding-right: 10px;
134+
}
135+
#page .story .contents .meta span img {
136+
vertical-align: text-bottom;
137+
}
138+
139+
#composer {
140+
display: -webkit-box;
141+
display: box;
142+
box-orient: horizontal;
143+
padding: 7px 4px;
144+
background-color: #F2F2F2;
145+
border-bottom: 1px solid #CCC;
146+
}
147+
#composer button {
148+
display: block;
149+
margin: 0 4px;
150+
-webkit-box-flex: 1;
151+
box-flex: 1;
152+
-webkit-border-radius: 3px;
153+
border-radius: 3px;
154+
color: #505C77;
155+
text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
156+
border: 1px solid;
157+
border-color: #9599A1 #A8ABB4 #ACB1BB;
158+
-webkit-box-shadow: inset 0 1px 1px rgba(43, 48, 60, .18), 0 1px 0 white;
159+
background: -webkit-gradient( linear, left top, left bottom, from(#FDFEFE), to(#F0F1F2) );
160+
-webkit-background-clip: padding-box;
161+
font-weight: bold;
162+
font-size: 12px;
163+
line-height: 27px;
164+
min-width: 50px;
165+
}
166+
#composer button img {
167+
position: relative;
168+
top: -2px;
169+
display: inline-block;
170+
margin-right: 1px;
171+
vertical-align: text-top;
172+
}
173+
174+
#menu {
175+
width: 260px;
176+
position: absolute;
177+
top: 0;
178+
left: 0;
179+
/* bottom: 0;*/
180+
/* z-index: 0;*/
181+
background: #32394A;
182+
}
183+
#menu > header {
184+
position: fixed;
185+
z-index: 2;
186+
top: 0;
187+
padding: 0 8px;
188+
width: 260px;
189+
height: 43px;
190+
background-image: -webkit-gradient( linear, left top, left bottom, from(#434B5B), to(#242B39));
191+
border-bottom: 1px solid #000;
192+
border-top: 1px solid #5F6673;
193+
color: #fff;
194+
}
195+
196+
#menu #search {
197+
position: relative;
198+
top: 6px;
199+
width: 100%;
200+
padding: 2px 8px 0 10px;
201+
background: -webkit-gradient( linear, 0 0, 0 100%, from(#414A5A), to(#4C5464));
202+
color: #AAB2C0;
203+
border: 1px solid #222936;
204+
-webkit-border-radius: 15px;
205+
-webkit-box-shadow: inset 0 1px 2px -1px rgba(0, 0, 0, .5), 0 1px 2px -1px rgba(255, 255, 255, .4);
206+
height: 27px;
207+
outline: none;
208+
font-size: 13px;
209+
font-weight: bold;
210+
}
211+
#menu #search::-webkit-input-placeholder {
212+
color: #AAB2C0;
213+
font-weight: normal;
214+
}
215+
216+
#menu .scrollable {
217+
position: absolute;
218+
width: 100%;
219+
top: 43px;
220+
/* bottom: 0;*/
221+
/* overflow-y: scroll;*/
222+
/* -webkit-overflow-scrolling: touch;*/
223+
}
224+
#menu .separator {
225+
background: #434B5C;
226+
background: -webkit-gradient( linear, left top, left bottom, from(#434B5C), to(#394152) );
227+
border-bottom: 1px solid #242A37;
228+
border-top: none;
229+
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
230+
color: #7A8292;
231+
padding: 4px 0 4px 8px;
232+
text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
233+
font-size: 10px;
234+
line-height: 12px;
235+
text-transform: uppercase;
236+
}
237+
#menu li {
238+
position: relative;
239+
display: block;
240+
list-style: none;
241+
min-height: 43px;
242+
line-height: 40px;
243+
padding: 3px 0 3px 8px;
244+
background-color: #32394A;
245+
border-bottom: 1px solid #242A37;
246+
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
247+
font-size: 16px;
248+
color: #C4CCDA;
249+
text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
250+
}
251+
#menu .active {
252+
background-color: #262C3A;
253+
}
254+
#menu li img {
255+
vertical-align: middle;
256+
display: block;
257+
float: left;
258+
margin: 4px 5px 0 0;
259+
}
260+
#menu li .count {
261+
position: absolute;
262+
right: 10px;
263+
top: 15px;
264+
background: #3E485E;
265+
background: -webkit-gradient( linear, left top, left bottom, color-stop(0, #3E485E), color-stop(1, #323A4D));
266+
border-top: 1px solid #505A63;
267+
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
268+
color: #BFC5D2;
269+
padding: 1px 3px 3px 4px;
270+
display: inline-block;
271+
line-height: 12px;
272+
min-width: 11px;
273+
text-align: center;
274+
font-weight: bold;
275+
font-size: 12px;
276+
text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
277+
}
278+
#menu li#copy {
279+
padding: 10px 8px;
280+
font-size: 14px;
281+
line-height: 18px;
282+
}
283+
#menu li#copy p {
284+
font-weight: 100;
285+
}

0 commit comments

Comments
 (0)