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