xref: /template/writr/css/global.less (revision f686122c57ac0cf2cd5acd3c88bf740215fe8b33) 
1/* =Global
2----------------------------------------------- */
3
4body,
5button,
6input,
7select,
8textarea {
9    color: @ini_background;
10    font-family: Montserrat, sans-serif;
11    font-size: 16px;
12    line-height: 1.5;
13}
14body.custom-background-size {
15    background-position: 0 0 !important;
16    background-repeat: no-repeat !important;
17    background-attachment: fixed !important;
18    -webkit-background-size: cover !important;
19    -moz-background-size:    cover !important;
20    background-size:         cover !important;
21}
22
23/* Headings */
24h1,
25h2,
26h3,
27h4,
28h5,
29h6 {
30    clear: left;
31    margin: 0 0 20px;
32    color: @ini_text_alt;
33}
34h1 {
35    font-size: 32px;
36    line-height: 1.2;
37}
38h2 {
39    font-size: 24px;
40    line-height: 1.3;
41}
42h3 {
43    font-size: 22px;
44    line-height: 1.4;
45}
46h4 {
47    font-size: 18px;
48}
49h5 {
50    font-size: 16px;
51}
52h6 {
53    font-size: 14px;
54}
55hr {
56    background-color: @ini_background_alt;
57    border: 0;
58    height: 5px;
59    margin-bottom: 20px;
60}
61
62/* Text elements */
63p {
64    margin-bottom: 20px;
65}
66ul,
67ol {
68    margin: 0 0 20px 0;
69}
70ul {
71    list-style: disc inside;
72}
73ol {
74    list-style: decimal inside;
75}
76li > ul,
77li > ol {
78    margin-bottom: 0;
79    margin-left: 20px;
80}
81li .li {
82    display: inline;
83}
84dt {
85    font-weight: bold;
86}
87dd {
88    margin: 0 20px 20px;
89}
90dl.code dd,
91dl.file dd {
92    margin-left: 0;
93}
94b,
95strong {
96    font-weight: bold;
97}
98dfn,
99cite,
100em,
101i {
102    font-style: italic;
103}
104cite {
105    color: @ini_theme_color;
106}
107blockquote {
108    padding: 0 0 0 20px;
109    border-left: 15px double @ini_background_alt;
110}
111blockquote > div.no {
112    display: block;
113    margin-bottom: 20px;
114}
115address {
116    margin: 0 0 20px;
117}
118pre {
119    overflow: auto;
120    padding: 20px;
121    margin-bottom: 20px;
122    max-width: 100%;
123    background: @ini_background_alt;
124    font: 15px/1.6 "Courier 10 Pitch", Courier, monospace;
125    direction: ltr;
126    unicode-bidi: bidi-override;
127    text-align: left;
128}
129code,
130kbd,
131tt,
132var {
133    font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
134}
135abbr,
136acronym {
137    border-bottom: 1px dotted;
138    cursor: help;
139    text-decoration: none;
140}
141mark,
142ins {
143    padding: 0 5px;
144    background: @ini_theme_color;
145    color: @ini_background;
146    text-decoration: none;
147}
148sup,
149sub {
150    font-size: 75%;
151    height: 0;
152    line-height: 0;
153    position: relative;
154    vertical-align: baseline;
155}
156sup {
157    bottom: 1ex;
158}
159sub {
160    top: .5ex;
161}
162small {
163    font-size: 75%;
164}
165big {
166    font-size: 125%;
167}
168figure {
169    margin: 0;
170}
171table {
172    margin: 0 0 20px;
173    width: 100%;
174    background: @ini_background_alt;
175}
176div.table {
177    overflow-x: auto;
178    margin-bottom: 20px;
179}
180div.table table {
181    margin-bottom: 0;
182}
183th {
184    background: @ini_background_neu;
185    font-weight: bold;
186}
187th,
188td {
189    padding: 10px;
190    border-bottom: 1px solid @ini_background_neu;
191}
192tr:last-of-type td {
193    border-bottom: none;
194}
195img {
196    margin: auto;
197    height: auto; /* Make sure images are scaled correctly. */
198    max-width: 100%; /* Adhere to container width. */
199}
200
201/* Video */
202embed,
203iframe,
204object,
205video {
206    display: block;
207    max-width: 100%;
208    margin-bottom: 20px;
209}
210
211/* Forms */
212button,
213input,
214select,
215textarea {
216    font-size: 100%; /* Corrects font size not being inherited in all browsers */
217    margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
218    vertical-align: baseline; /* Improves appearance and consistency in all browsers */
219    *vertical-align: middle; /* Improves appearance and consistency in all browsers */
220}
221button,
222input {
223    line-height: normal; /* Addresses FF3/4 setting line-height using !important in the UA stylesheet */
224}
225select {
226    width: 100%;
227    color: @ini_text_alt;
228}
229button,
230html input[type="button"],
231input[type="reset"],
232input[type="submit"] {
233    padding: 10px 20px;
234    border: none;
235    background: @ini_theme_color;
236    color: @ini_background;
237    font-size: 14px;
238    line-height: 1.5;
239    font-weight: bold;
240    text-transform: uppercase;
241    cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
242    -webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */
243    -webkit-box-sizing: border-box;
244    -moz-box-sizing:    border-box;
245    box-sizing:         border-box;
246}
247button:hover,
248html input[type="button"]:hover,
249input[type="reset"]:hover,
250input[type="submit"]:hover,
251button:focus,
252html input[type="button"]:focus,
253input[type="reset"]:focus,
254input[type="submit"]:focus,
255button:active,
256html input[type="button"]:active,
257input[type="reset"]:active,
258input[type="submit"]:active {
259    background: @ini_theme_color_alt;
260}
261input[type="checkbox"],
262input[type="radio"] {
263    box-sizing: border-box; /* Addresses box sizing set to content-box in IE8/9 */
264    padding: 0; /* Addresses excess padding in IE8/9 */
265}
266input[type="search"] {
267    -webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */
268    -webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */
269    -moz-box-sizing:    content-box;
270    box-sizing:         content-box;
271}
272input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
273    -webkit-appearance: none;
274}
275button::-moz-focus-inner,
276input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
277    border: 0;
278    padding: 0;
279}
280input[type="text"],
281input[type="url"],
282input[type="email"],
283input[type="password"],
284input[type="search"],
285textarea {
286    width: 100%;
287    height: 40px;
288    padding: 5px 10px;
289    background: transparent;
290    color: @ini_text;
291    border: 5px solid @ini_background_alt;
292    font-size: 14px;
293    line-height: 1.43;
294    -webkit-box-sizing: border-box;
295    -moz-box-sizing:    border-box;
296    box-sizing:         border-box;
297    -webkit-appearance: none;
298}
299input[type="text"]:focus,
300input[type="url"]:focus,
301input[type="email"]:focus,
302input[type="password"]:focus,
303input[type="search"]:focus,
304textarea:focus {
305    outline: none;
306    border-color: @ini_background_neu;
307}
308textarea {
309    overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
310    vertical-align: top; /* Improves readability and alignment in all browsers */
311    height: auto;
312}
313::-webkit-input-placeholder {
314   color: @ini_text;
315}
316:-moz-placeholder {
317   color: @ini_text;
318}
319::-moz-placeholder {
320   color: @ini_text;
321}
322:-ms-input-placeholder {
323   color: @ini_text;
324}
325
326button,
327input[type="button"],
328input[type="reset"],
329input[type="submit"],
330input[type="text"],
331input[type="url"],
332input[type="email"],
333input[type="password"],
334input[type="search"],
335textarea {
336    -webkit-border-radius: 20px;
337    -moz-border-radius:    20px;
338    border-radius:         20px;
339}
340
341/* Links */
342a {
343    color: @ini_theme_color;
344}
345a:hover,
346a:focus,
347a:active {
348    color: @ini_theme_color_alt;
349}
350
351/* Transition */
352a:not(#writr__sidebar-toggle),
353input,
354.site-title a,
355.site-info a,
356.main-navigation a {
357    -webkit-transition: all 0.25s ease-in-out;
358    -moz-transition:    all 0.25s ease-in-out;
359    -ms-transition:     all 0.25s ease-in-out;
360    -o-transition:      all 0.25s ease-in-out;
361    transition:         all 0.25s ease-in-out;
362}
363
364/* Alignment */
365.medialeft {
366    display: inline;
367    float: left;
368    margin: 0 20px 20px 0;
369}
370.mediaright {
371    display: inline;
372    float: right;
373    margin: 0 0 20px 20px;
374}
375.mediacenter {
376    clear: both;
377    display: block;
378    margin: 0 auto 20px auto;
379}
380
381/* Clearing */
382.clear:before,
383.clear:after,
384.site-header:before,
385.site-header:after,
386.site-content:before,
387.site-content:after,
388.site-footer:before,
389.site-footer:after,
390.widget:before,
391.widget:after {
392    content: '';
393    display: table;
394}
395
396.clear:after,
397.site-header:after,
398.site-content:after,
399.site-footer:after,
400.widget:after {
401    clear: both;
402}
403