forked from WebCoder49/code-input
-
Notifications
You must be signed in to change notification settings - Fork 0
/
code-input.css
92 lines (76 loc) · 2.04 KB
/
code-input.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
/* Code-Input Compatibility */
/* By WebCoder49 */
/* First Published on CSS-Tricks.com */
code-input {
/* Allow other elems to be inside */
position: relative;
top: 0;
left: 0;
display: block;
/* Normal inline styles */
padding: 8px;
margin: 8px;
width: calc(100% - 16px);
height: 250px;
font-size: 15pt;
font-family: monospace;
line-height: 20pt;
tab-size: 2;
caret-color: darkgrey;
white-space: pre;
}
code-input textarea, code-input:not(.code-input_pre-element-styled) pre code, code-input.code-input_pre-element-styled pre {
/* Both elements need the same text and space styling so they are directly on top of each other */
margin: 0px!important;
padding: var(--padding, 16px)!important;
border: 0;
width: calc(100% - (var(--padding, 16px)*2))!important;
height: calc(100% - (var(--padding, 16px)*2))!important;
}
code-input:not(.code-input_pre-element-styled) pre, code-input.code-input_pre-element-styled pre code {
margin: 0!important;
border: 0!important;
padding: 0!important;
overflow: auto!important;
width: 100%!important;
height: 100%!important;
}
code-input textarea, code-input pre, code-input pre * {
/* Also add text styles to highlighing tokens */
font-size: inherit!important;
font-family: inherit!important;
line-height: inherit!important;
tab-size: inherit!important;
}
code-input textarea, code-input pre {
/* In the same place */
position: absolute;
top: 0;
left: 0;
}
/* Move the textarea in front of the result */
code-input textarea {
z-index: 1;
}
code-input pre {
z-index: 0;
}
/* Make textarea almost completely transparent */
code-input textarea {
color: transparent;
background: transparent;
caret-color: inherit!important; /* Or choose your favourite color */
}
/* Can be scrolled */
code-input textarea, code-input pre {
overflow: auto!important;
white-space: inherit;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
}
/* No resize on textarea; stop outline */
code-input textarea {
resize: none;
outline: none!important;
}