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