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