]> git.r.bdr.sh - rbdr/grita/blob - views/style.less
1f7b075d9e6ce59d1793862dc038176e49be9017
[rbdr/grita] / views / style.less
1 @text_color: #666;
2 @background_color: #fff;
3 @emphasis_color: #222;
4 @light_color: #999;
5 @lighter_color: #ccc;
6 @border_color: #eee;
7 @error_color: #ffebe8;
8 @success_color: #f0fff0;
9
10 @font_stack: "Helvetica Neue", Helvetica, Arial, sans-serif;
11
12 *{
13 margin: 0;
14 padding: 0;
15 }
16
17 img{
18 border: 0;
19 }
20
21 body{
22 color: @text_color;
23 background-color: @background_color;
24 text-align: center;
25 font-size: .625em;
26 font-family: @font_stack;
27 }
28
29 #wrapper{
30 margin: 0 auto;
31 width: 960px;
32 text-align: left;
33 }
34
35 #header #logo{
36 background-image: url(/images/logo.png);
37 background-repeat: no-repeat;
38 width: 460px;
39 height: 212px;
40 display: block;
41 margin: 10px 250px;
42 }
43
44 #header #logomini{
45 background-image: url(/images/logomini.png);
46 background-repeat: no-repeat;
47 width: 140px;
48 height: 65px;
49 display: block;
50 margin: 10px 410px;
51 }
52
53 #header #logo span, #header #logomini span{
54 display: none;
55 }
56
57 #header #description p{
58 font-size: 1.4em;
59 line-height: 1.8em;
60 margin: 10px 170px;
61 width: 620px;
62 color: @light_color;
63 }
64
65 #body h1{
66 margin: 20px 90px;
67 font-size: 2.4em;
68 color: @emphasis_color;
69 }
70
71 #body h2{
72 margin: 20px 90px;
73 font-size: 1.8em;
74 color: @emphasis_color;
75 }
76
77 #body h3{
78 margin: 20px 90px;
79 font-size: 1.6em;
80 color: @emphasis_color;
81 }
82
83 #body p{
84 margin: 20px 90px;
85 font-size: 1.6em;
86 line-height: 2.4em;
87 text-indent: 3em;
88 text-align: justify;
89 }
90
91 #body ul, #body ol{
92 margin: 20px 90px;
93 font-size: 1.4em;
94 line-height: 1.8em;
95 }
96
97 #body ul li p, #body ol li p{
98 font-size: 1em;
99 margin: 0;
100 line-height: 1em;
101 text-indent: 0;
102 }
103
104 #body ul li, #body ol li{
105 margin-left: 80px;
106 }
107
108 #body blockquote{
109 margin: 20px 170px;
110 text-align: justify;
111 border-left: 2px solid @border_color;
112 padding-left: 5px;
113 }
114
115 #body blockquote blockquote{
116 margin: 10px;
117 }
118
119 #body pre{
120 margin: 20px 170px;
121 border: 1px solid @lighter_color;
122 background-color: @border_color;
123 padding: 10px;
124 }
125
126 #body pre code{
127 font-size: 1.6em;
128 line-height: 1.8em;
129 }
130
131 #body blockquote p{
132 margin: 5px 0;
133 text-indent: 0;
134 font-size: 1.4em;
135 line-height: 1.8em;
136 }
137
138 hr{
139 margin: 10px;
140 border: 0;
141 border-bottom: 1px solid @border_color;
142 }
143
144 #body #sharing{
145 text-align: center;
146 }
147
148 #body input.title, #body input.url{
149 border: 1px solid @lighter_color;
150 font-size: 1.6em;
151 padding: 5px;
152 margin: 0 90px;
153 width: 770px;
154 }
155
156 #body #sharing input.url{
157 width: 290px;
158 margin-bottom: 10px;
159 margin-top: 10px;
160 }
161
162 #body textarea.text{
163 border: 1px solid @lighter_color;
164 font-size: 1.6em;
165 padding: 5px;
166 margin: 0 90px;
167 resize: vertical;
168 }
169
170 #body input.submit{
171 width: 150px;
172 font-size: 4.8em;
173 margin: 10px 410px;
174 padding: 20px;
175 }
176
177 #body #errors{
178 -moz-border-radius: 5px;
179 border-radius: 5px;
180 -webkit-border-radius: 5px;
181 padding: 10px;
182 font-size: 1.4em;
183 margin: 0 90px;
184 width: 760px;
185 background-color: @error_color;
186 }
187
188 #body #success{
189 -moz-border-radius: 5px;
190 border-radius: 5px;
191 -webkit-border-radius: 5px;
192 padding: 10px;
193 font-size: 1.4em;
194 margin: 0 90px;
195 width: 760px;
196 background-color: @success_color;
197 }
198
199 .tooltip{
200 position: absolute;
201 top: 0;
202 left: 0;
203 z-index: 3;
204 display: none;
205 }
206
207 #footer{
208 height: 100px;
209 }