OLD | NEW |
| (Empty) |
1 /* base.css overrides */ | |
2 | |
3 html, | |
4 body { | |
5 margin: 0; | |
6 padding: 0; | |
7 } | |
8 | |
9 body { | |
10 font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
11 line-height: 1.4em; | |
12 background: #eaeaea url('../components/todomvc-common/bg.png'); | |
13 color: #4d4d4d; | |
14 width: 550px; | |
15 margin: 0 auto; | |
16 -webkit-font-smoothing: antialiased; | |
17 -moz-font-smoothing: antialiased; | |
18 -ms-font-smoothing: antialiased; | |
19 -o-font-smoothing: antialiased; | |
20 font-smoothing: antialiased; | |
21 } | |
22 | |
23 body > header { | |
24 padding-top: 22px; | |
25 margin-bottom: -5px; | |
26 } | |
27 | |
28 h1 { | |
29 /* position: absolute; | |
30 top: -120px;*/ | |
31 width: 100%; | |
32 font-size: 70px; | |
33 font-weight: bold; | |
34 text-align: center; | |
35 color: #b3b3b3; | |
36 color: rgba(255, 255, 255, 0.3); | |
37 text-shadow: -1px -1px rgba(0, 0, 0, 0.2); | |
38 -webkit-text-rendering: optimizeLegibility; | |
39 -moz-text-rendering: optimizeLegibility; | |
40 -ms-text-rendering: optimizeLegibility; | |
41 -o-text-rendering: optimizeLegibility; | |
42 text-rendering: optimizeLegibility; | |
43 } | |
44 | |
45 #info { | |
46 margin: 65px auto 0; | |
47 color: #a6a6a6; | |
48 font-size: 12px; | |
49 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); | |
50 text-align: center; | |
51 } | |
52 | |
53 #info a { | |
54 color: inherit; | |
55 } | |
56 | |
57 .hidden{ | |
58 display:none; | |
59 } | |
60 | |
61 hr { | |
62 margin: 20px 0; | |
63 border: 0; | |
64 border-top: 1px dashed #C5C5C5; | |
65 border-bottom: 1px dashed #F7F7F7; | |
66 } | |
67 | |
68 .learn a { | |
69 font-weight: normal; | |
70 text-decoration: none; | |
71 color: #b83f45; | |
72 } | |
73 | |
74 .learn a:hover { | |
75 text-decoration: underline; | |
76 color: #787e7e; | |
77 } | |
78 | |
79 .learn h3, | |
80 .learn h4, | |
81 .learn h5 { | |
82 margin: 10px 0; | |
83 font-weight: 500; | |
84 line-height: 1.2; | |
85 color: #000; | |
86 } | |
87 | |
88 .learn h3 { | |
89 font-size: 24px; | |
90 } | |
91 | |
92 .learn h4 { | |
93 font-size: 18px; | |
94 } | |
95 | |
96 .learn h5 { | |
97 margin-bottom: 0; | |
98 font-size: 14px; | |
99 } | |
100 | |
101 .learn ul { | |
102 padding: 0; | |
103 margin: 0 0 30px 25px; | |
104 } | |
105 | |
106 .learn li { | |
107 line-height: 20px; | |
108 } | |
109 | |
110 .learn p { | |
111 font-size: 15px; | |
112 font-weight: 300; | |
113 line-height: 1.3; | |
114 margin-top: 0; | |
115 margin-bottom: 0; | |
116 } | |
117 | |
118 .quote { | |
119 border: none; | |
120 margin: 20px 0 60px 0; | |
121 } | |
122 | |
123 .quote p { | |
124 font-style: italic; | |
125 } | |
126 | |
127 .quote p:before { | |
128 content: '“'; | |
129 font-size: 50px; | |
130 opacity: .15; | |
131 position: absolute; | |
132 top: -20px; | |
133 left: 3px; | |
134 } | |
135 | |
136 .quote p:after { | |
137 content: '”'; | |
138 font-size: 50px; | |
139 opacity: .15; | |
140 position: absolute; | |
141 bottom: -42px; | |
142 right: 3px; | |
143 } | |
144 | |
145 .quote footer { | |
146 position: absolute; | |
147 bottom: -40px; | |
148 right: 0; | |
149 } | |
150 | |
151 .quote footer img { | |
152 border-radius: 3px; | |
153 } | |
154 | |
155 .quote footer a { | |
156 margin-left: 5px; | |
157 vertical-align: middle; | |
158 } | |
159 | |
160 .speech-bubble { | |
161 position: relative; | |
162 padding: 10px; | |
163 background: rgba(0, 0, 0, .04); | |
164 border-radius: 5px; | |
165 } | |
166 | |
167 .speech-bubble:after { | |
168 content: ''; | |
169 position: absolute; | |
170 top: 100%; | |
171 right: 30px; | |
172 border: 13px solid transparent; | |
173 border-top-color: rgba(0, 0, 0, .04); | |
174 } | |
175 | |
176 /**body*/.learn-bar > .learn { | |
177 position: absolute; | |
178 width: 272px; | |
179 top: 8px; | |
180 left: -300px; | |
181 padding: 10px; | |
182 border-radius: 5px; | |
183 background-color: rgba(255, 255, 255, .6); | |
184 transition-property: left; | |
185 transition-duration: 500ms; | |
186 } | |
187 | |
188 | |
189 /* IE doesn't support the hidden attribute */ | |
190 [hidden] { | |
191 display: none; | |
192 } | |
193 | |
194 @media (min-width: 899px) { | |
195 /**body*/.learn-bar { | |
196 width: auto; | |
197 margin: 0 0 0 300px; | |
198 } | |
199 /**body*/.learn-bar > .learn { | |
200 left: 8px; | |
201 } | |
202 /**body*/.learn-bar #todoapp { | |
203 width: 550px; | |
204 margin: 130px auto 40px auto; | |
205 } | |
206 } | |
OLD | NEW |