xref: /template/writr/css/global.less (revision 787ebf2b34f565800837cfcd285970a421c8195f) 
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}
140mark,
141ins {
142    padding: 0 5px;
143    background: @ini_theme_color;
144    color: @ini_background;
145    text-decoration: none;
146}
147sup,
148sub {
149    font-size: 75%;
150    height: 0;
151    line-height: 0;
152    position: relative;
153    vertical-align: baseline;
154}
155sup {
156    bottom: 1ex;
157}
158sub {
159    top: .5ex;
160}
161small {
162    font-size: 75%;
163}
164big {
165    font-size: 125%;
166}
167figure {
168    margin: 0;
169}
170table {
171    margin: 0 0 20px;
172    width: 100%;
173    background: @ini_background_alt;
174}
175div.table {
176    overflow-x: auto;
177    margin-bottom: 20px;
178}
179div.table table {
180    margin-bottom: 0;
181}
182th {
183    background: @ini_background_neu;
184    font-weight: bold;
185}
186th,
187td {
188    padding: 10px;
189    border-bottom: 1px solid @ini_background_neu;
190}
191tr:last-of-type td {
192    border-bottom: none;
193}
194img {
195    margin: auto;
196    height: auto; /* Make sure images are scaled correctly. */
197    max-width: 100%; /* Adhere to container width. */
198}
199
200/* Video */
201embed,
202iframe,
203object,
204video {
205    display: block;
206    max-width: 100%;
207    margin-bottom: 20px;
208}
209
210/* Forms */
211button,
212input,
213select,
214textarea {
215    font-size: 100%; /* Corrects font size not being inherited in all browsers */
216    margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
217    vertical-align: baseline; /* Improves appearance and consistency in all browsers */
218    *vertical-align: middle; /* Improves appearance and consistency in all browsers */
219}
220button,
221input {
222    line-height: normal; /* Addresses FF3/4 setting line-height using !important in the UA stylesheet */
223}
224select {
225    width: 100%;
226    color: @ini_text_alt;
227}
228button,
229html input[type="button"],
230input[type="reset"],
231input[type="submit"] {
232    padding: 10px 20px;
233    border: none;
234    background: @ini_theme_color;
235    color: @ini_background;
236    font-size: 14px;
237    line-height: 1.5;
238    font-weight: bold;
239    text-transform: uppercase;
240    cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
241    -webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */
242    -webkit-box-sizing: border-box;
243    -moz-box-sizing:    border-box;
244    box-sizing:         border-box;
245}
246button:hover,
247html input[type="button"]:hover,
248input[type="reset"]:hover,
249input[type="submit"]:hover,
250button:focus,
251html input[type="button"]:focus,
252input[type="reset"]:focus,
253input[type="submit"]:focus,
254button:active,
255html input[type="button"]:active,
256input[type="reset"]:active,
257input[type="submit"]:active {
258    background: @ini_theme_color_alt;
259}
260input[type="checkbox"],
261input[type="radio"] {
262    box-sizing: border-box; /* Addresses box sizing set to content-box in IE8/9 */
263    padding: 0; /* Addresses excess padding in IE8/9 */
264}
265input[type="search"] {
266    -webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */
267    -webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */
268    -moz-box-sizing:    content-box;
269    box-sizing:         content-box;
270}
271input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
272    -webkit-appearance: none;
273}
274button::-moz-focus-inner,
275input::-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/ */
276    border: 0;
277    padding: 0;
278}
279input[type="text"],
280input[type="url"],
281input[type="email"],
282input[type="password"],
283input[type="search"],
284textarea {
285    width: 100%;
286    height: 40px;
287    padding: 5px 10px;
288    background: transparent;
289    color: @ini_text;
290    border: 5px solid @ini_background_alt;
291    font-size: 14px;
292    line-height: 1.43;
293    -webkit-box-sizing: border-box;
294    -moz-box-sizing:    border-box;
295    box-sizing:         border-box;
296    -webkit-appearance: none;
297}
298input[type="text"]:focus,
299input[type="url"]:focus,
300input[type="email"]:focus,
301input[type="password"]:focus,
302input[type="search"]:focus,
303textarea:focus {
304    outline: none;
305    border-color: @ini_background_neu;
306}
307textarea {
308    overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
309    vertical-align: top; /* Improves readability and alignment in all browsers */
310    height: auto;
311}
312::-webkit-input-placeholder {
313   color: @ini_text;
314}
315:-moz-placeholder {
316   color: @ini_text;
317}
318::-moz-placeholder {
319   color: @ini_text;
320}
321:-ms-input-placeholder {
322   color: @ini_text;
323}
324
325button,
326input[type="button"],
327input[type="reset"],
328input[type="submit"],
329input[type="text"],
330input[type="url"],
331input[type="email"],
332input[type="password"],
333input[type="search"],
334textarea {
335    -webkit-border-radius: 20px;
336    -moz-border-radius:    20px;
337    border-radius:         20px;
338}
339
340/* Links */
341a {
342    color: @ini_theme_color;
343}
344a:hover,
345a:focus,
346a:active {
347    color: @ini_theme_color_alt;
348}
349
350/* Transition */
351a:not(#writr__sidebar-toggle),
352input,
353.site-title a,
354.site-info a,
355.main-navigation a {
356    -webkit-transition: all 0.25s ease-in-out;
357    -moz-transition:    all 0.25s ease-in-out;
358    -ms-transition:     all 0.25s ease-in-out;
359    -o-transition:      all 0.25s ease-in-out;
360    transition:         all 0.25s ease-in-out;
361}
362
363/* Alignment */
364.medialeft {
365    display: inline;
366    float: left;
367    margin: 0 20px 20px 0;
368}
369.mediaright {
370    display: inline;
371    float: right;
372    margin: 0 0 20px 20px;
373}
374.mediacenter {
375    clear: both;
376    display: block;
377    margin: 0 auto 20px auto;
378}
379
380/* Clearing */
381.clear:before,
382.clear:after,
383.site-header:before,
384.site-header:after,
385.site-content:before,
386.site-content:after,
387.site-footer:before,
388.site-footer:after,
389.widget:before,
390.widget:after {
391    content: '';
392    display: table;
393}
394
395.clear:after,
396.site-header:after,
397.site-content:after,
398.site-footer:after,
399.widget:after {
400    clear: both;
401}
402