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