|
7fcb462…
|
stephan
|
1 |
/* CSS for the WASM /pikchrshow app. */ |
|
f3adbd8…
|
drh
|
2 |
/* emcscript-related styling, used during the module load/initialization processes... */ |
|
7fcb462…
|
stephan
|
3 |
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; } |
|
7fcb462…
|
stephan
|
4 |
div.emscripten { text-align: center; } |
|
7fcb462…
|
stephan
|
5 |
div.emscripten_border { border: 1px solid black; } |
|
7fcb462…
|
stephan
|
6 |
#module-spinner { overflow: visible; } |
|
7fcb462…
|
stephan
|
7 |
#module-spinner > * { |
|
7fcb462…
|
stephan
|
8 |
margin-top: 1em; |
|
7fcb462…
|
stephan
|
9 |
} |
|
7fcb462…
|
stephan
|
10 |
.spinner { |
|
7fcb462…
|
stephan
|
11 |
height: 50px; |
|
7fcb462…
|
stephan
|
12 |
width: 50px; |
|
7fcb462…
|
stephan
|
13 |
margin: 0px auto; |
|
7fcb462…
|
stephan
|
14 |
animation: rotation 0.8s linear infinite; |
|
7fcb462…
|
stephan
|
15 |
border-left: 10px solid rgb(0,150,240); |
|
7fcb462…
|
stephan
|
16 |
border-right: 10px solid rgb(0,150,240); |
|
7fcb462…
|
stephan
|
17 |
border-bottom: 10px solid rgb(0,150,240); |
|
7fcb462…
|
stephan
|
18 |
border-top: 10px solid rgb(100,0,200); |
|
7fcb462…
|
stephan
|
19 |
border-radius: 100%; |
|
7fcb462…
|
stephan
|
20 |
background-color: rgb(200,100,250); |
|
7fcb462…
|
stephan
|
21 |
} |
|
7fcb462…
|
stephan
|
22 |
@keyframes rotation { |
|
7fcb462…
|
stephan
|
23 |
from {transform: rotate(0deg);} |
|
7fcb462…
|
stephan
|
24 |
to {transform: rotate(360deg);} |
|
7fcb462…
|
stephan
|
25 |
} |
|
7fcb462…
|
stephan
|
26 |
|
|
7fcb462…
|
stephan
|
27 |
/* The following styles are for app-level use. */ |
|
7fcb462…
|
stephan
|
28 |
/* TODO: consolidate the WASM- and legacy-mode CSS into this file. |
|
864ed8d…
|
stephan
|
29 |
Since both versions of /pikchrshow share a URI, they both load this |
|
864ed8d…
|
stephan
|
30 |
file. */ |
|
7fcb462…
|
stephan
|
31 |
textarea { |
|
7fcb462…
|
stephan
|
32 |
font-family: monospace; |
|
7fcb462…
|
stephan
|
33 |
flex: 1 1 auto; |
|
7fcb462…
|
stephan
|
34 |
} |
|
7fcb462…
|
stephan
|
35 |
#main-wrapper { |
|
7fcb462…
|
stephan
|
36 |
display: flex; |
|
7fcb462…
|
stephan
|
37 |
flex-direction: column-reverse; |
|
7fcb462…
|
stephan
|
38 |
flex: 1 1 auto; |
|
7fcb462…
|
stephan
|
39 |
margin: 0.5em 0; |
|
7fcb462…
|
stephan
|
40 |
overflow: hidden; |
|
7fcb462…
|
stephan
|
41 |
} |
|
7fcb462…
|
stephan
|
42 |
#main-wrapper.side-by-side { |
|
7fcb462…
|
stephan
|
43 |
flex-direction: row; |
|
7fcb462…
|
stephan
|
44 |
} |
|
7fcb462…
|
stephan
|
45 |
#main-wrapper.side-by-side > fieldset { |
|
7fcb462…
|
stephan
|
46 |
margin-left: 0.25em; |
|
7fcb462…
|
stephan
|
47 |
margin-right: 0.25em; |
|
7fcb462…
|
stephan
|
48 |
} |
|
7fcb462…
|
stephan
|
49 |
#main-wrapper:not(.side-by-side) > fieldset { |
|
7fcb462…
|
stephan
|
50 |
margin-bottom: 0.25em; |
|
7fcb462…
|
stephan
|
51 |
} |
|
7fcb462…
|
stephan
|
52 |
#main-wrapper.swapio { |
|
7fcb462…
|
stephan
|
53 |
flex-direction: column; |
|
7fcb462…
|
stephan
|
54 |
} |
|
7fcb462…
|
stephan
|
55 |
#main-wrapper.side-by-side.swapio { |
|
7fcb462…
|
stephan
|
56 |
flex-direction: row-reverse; |
|
7fcb462…
|
stephan
|
57 |
} |
|
7fcb462…
|
stephan
|
58 |
.zone-wrapper{ |
|
7fcb462…
|
stephan
|
59 |
display: flex; |
|
7fcb462…
|
stephan
|
60 |
margin: 0; |
|
7fcb462…
|
stephan
|
61 |
flex: 1 1 0%; |
|
7fcb462…
|
stephan
|
62 |
border-radius: 0.5em; |
|
7fcb462…
|
stephan
|
63 |
min-width: inherit/*important: resolves inability to scroll fieldset child element!*/; |
|
7fcb462…
|
stephan
|
64 |
padding: 0.35em 0 0 0; |
|
7fcb462…
|
stephan
|
65 |
} |
|
7fcb462…
|
stephan
|
66 |
.zone-wrapper > div { |
|
7fcb462…
|
stephan
|
67 |
display:flex; |
|
7fcb462…
|
stephan
|
68 |
flex: 1 1 0%; |
|
7fcb462…
|
stephan
|
69 |
} |
|
7fcb462…
|
stephan
|
70 |
.zone-wrapper.output { |
|
7fcb462…
|
stephan
|
71 |
} |
|
7fcb462…
|
stephan
|
72 |
#main-wrapper.side-by-side .zone-wrapper { |
|
7fcb462…
|
stephan
|
73 |
/* Keep the layout from "flopping around" when |
|
7fcb462…
|
stephan
|
74 |
render-while-typing mode is on. */ |
|
7fcb462…
|
stephan
|
75 |
/*max-width: 50%;*/ |
|
7fcb462…
|
stephan
|
76 |
} |
|
7fcb462…
|
stephan
|
77 |
#pikchr-output { |
|
7fcb462…
|
stephan
|
78 |
padding: 0; |
|
7fcb462…
|
stephan
|
79 |
margin: 0 auto/*auto resolves a weird left-shift truncation of the SVG*/; |
|
7fcb462…
|
stephan
|
80 |
} |
|
7fcb462…
|
stephan
|
81 |
#pikchr-output-wrapper { |
|
7fcb462…
|
stephan
|
82 |
flex: 1 1 auto; |
|
7fcb462…
|
stephan
|
83 |
overflow: auto; |
|
7fcb462…
|
stephan
|
84 |
} |
|
7fcb462…
|
stephan
|
85 |
#pikchr-output-wrapper.text { |
|
7fcb462…
|
stephan
|
86 |
display: flex; |
|
7fcb462…
|
stephan
|
87 |
align-items: stretch; |
|
7fcb462…
|
stephan
|
88 |
} |
|
7fcb462…
|
stephan
|
89 |
#pikchr-output-wrapper.text > #pikchr-output { |
|
7fcb462…
|
stephan
|
90 |
display: flex; |
|
7fcb462…
|
stephan
|
91 |
align-items: stretch; |
|
7fcb462…
|
stephan
|
92 |
flex: 1 1 auto; |
|
7fcb462…
|
stephan
|
93 |
} |
|
7fcb462…
|
stephan
|
94 |
#pikchr-output-wrapper.text > #pikchr-output > textarea { |
|
7fcb462…
|
stephan
|
95 |
flex: 1 1 auto; |
|
7fcb462…
|
stephan
|
96 |
} |
|
7fcb462…
|
stephan
|
97 |
fieldset > legend { |
|
7fcb462…
|
stephan
|
98 |
font-size: 85%; |
|
7fcb462…
|
stephan
|
99 |
} |
|
7fcb462…
|
stephan
|
100 |
.zone-wrapper textarea { |
|
7fcb462…
|
stephan
|
101 |
border-radius: 0.5em; |
|
7fcb462…
|
stephan
|
102 |
flex: 1 1 auto; |
|
7fcb462…
|
stephan
|
103 |
/*min/max width resolve an inexplicable margin on the RHS. The -1em |
|
7fcb462…
|
stephan
|
104 |
is for the padding, else we overlap the parent boundaries.*/ |
|
7fcb462…
|
stephan
|
105 |
min-width: calc(100% - 1em); |
|
7fcb462…
|
stephan
|
106 |
max-width: calc(100% - 1em); |
|
7fcb462…
|
stephan
|
107 |
padding: 0 0.5em; |
|
7fcb462…
|
stephan
|
108 |
} |
|
7fcb462…
|
stephan
|
109 |
.zone-wrapper.input { |
|
7fcb462…
|
stephan
|
110 |
min-height: 10em; |
|
7fcb462…
|
stephan
|
111 |
/*width: 50%;*/ |
|
7fcb462…
|
stephan
|
112 |
min-width: 20em; |
|
7fcb462…
|
stephan
|
113 |
} |
|
7fcb462…
|
stephan
|
114 |
.zone-wrapper textarea { |
|
7fcb462…
|
stephan
|
115 |
border: 0; |
|
7fcb462…
|
stephan
|
116 |
outline: 0; |
|
7fcb462…
|
stephan
|
117 |
} |
|
7fcb462…
|
stephan
|
118 |
.zone-wrapper.output { |
|
7fcb462…
|
stephan
|
119 |
overflow: auto; |
|
7fcb462…
|
stephan
|
120 |
justify-content: space-between; |
|
7fcb462…
|
stephan
|
121 |
} |
|
7fcb462…
|
stephan
|
122 |
.button-bar { |
|
864ed8d…
|
stephan
|
123 |
display: flex; |
|
7fcb462…
|
stephan
|
124 |
flex-wrap: wrap; |
|
864ed8d…
|
stephan
|
125 |
align-items: center; |
|
864ed8d…
|
stephan
|
126 |
align-content: space-between; |
|
864ed8d…
|
stephan
|
127 |
justify-content: flex-start; |
|
7fcb462…
|
stephan
|
128 |
} |
|
7fcb462…
|
stephan
|
129 |
.button-bar > * { |
|
864ed8d…
|
stephan
|
130 |
margin: 0.05em 0.5em 0.05em 0; |
|
864ed8d…
|
stephan
|
131 |
flex: 0 1 auto; |
|
864ed8d…
|
stephan
|
132 |
align-self: auto; |
|
7fcb462…
|
stephan
|
133 |
} |
|
7fcb462…
|
stephan
|
134 |
fieldset.options { |
|
7fcb462…
|
stephan
|
135 |
border-radius: 0.5em; |
|
7fcb462…
|
stephan
|
136 |
border: 1px inset; |
|
7fcb462…
|
stephan
|
137 |
display: flex; |
|
7fcb462…
|
stephan
|
138 |
flex-direction: column; |
|
7fcb462…
|
stephan
|
139 |
padding: 0.25em; |
|
7fcb462…
|
stephan
|
140 |
} |
|
7fcb462…
|
stephan
|
141 |
fieldset.options > div { |
|
7fcb462…
|
stephan
|
142 |
display: flex; |
|
7fcb462…
|
stephan
|
143 |
flex-wrap: wrap; |
|
7fcb462…
|
stephan
|
144 |
font-size: 85%; |
|
7fcb462…
|
stephan
|
145 |
} |
|
864ed8d…
|
stephan
|
146 |
fieldset.collapsible.options > legend > .fieldset-toggle::after { |
|
7fcb462…
|
stephan
|
147 |
content: " [hide]"; |
|
7fcb462…
|
stephan
|
148 |
position: relative; |
|
7fcb462…
|
stephan
|
149 |
} |
|
864ed8d…
|
stephan
|
150 |
fieldset.collapsible.collapsed > legend > .fieldset-toggle::after { |
|
7fcb462…
|
stephan
|
151 |
content: " [show]"; |
|
7fcb462…
|
stephan
|
152 |
position: relative; |
|
7fcb462…
|
stephan
|
153 |
} |
|
7fcb462…
|
stephan
|
154 |
span.labeled-input { |
|
7fcb462…
|
stephan
|
155 |
padding: 0.25em; |
|
7fcb462…
|
stephan
|
156 |
margin: 0.25em 0.5em; |
|
7fcb462…
|
stephan
|
157 |
border-radius: 0.25em; |
|
7fcb462…
|
stephan
|
158 |
white-space: nowrap; |
|
7fcb462…
|
stephan
|
159 |
background: #0002; |
|
7fcb462…
|
stephan
|
160 |
display: flex; |
|
7fcb462…
|
stephan
|
161 |
align-items: center; |
|
7fcb462…
|
stephan
|
162 |
} |
|
7fcb462…
|
stephan
|
163 |
span.labeled-input > *:nth-child(2) { |
|
7fcb462…
|
stephan
|
164 |
margin-left: 0.3em; |
|
7fcb462…
|
stephan
|
165 |
} |
|
7fcb462…
|
stephan
|
166 |
.center { text-align: center; } |
|
7fcb462…
|
stephan
|
167 |
.app-view { |
|
7fcb462…
|
stephan
|
168 |
flex: 20 1 auto; |
|
7fcb462…
|
stephan
|
169 |
} |
|
7fcb462…
|
stephan
|
170 |
#titlebar { |
|
7fcb462…
|
stephan
|
171 |
display: flex; |
|
7fcb462…
|
stephan
|
172 |
justify-content: space-between; |
|
7fcb462…
|
stephan
|
173 |
margin-bottom: 0.5em; |
|
7fcb462…
|
stephan
|
174 |
} |
|
7fcb462…
|
stephan
|
175 |
#view-split { |
|
7fcb462…
|
stephan
|
176 |
display: flex; |
|
7fcb462…
|
stephan
|
177 |
flex-direction: column-reverse; |
|
7fcb462…
|
stephan
|
178 |
} |