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