|
94 | 94 | #log {
|
95 | 95 | flex-grow: 1;
|
96 | 96 | font-family: "Roboto Mono", "Courier", "Lucida Grande", Verdana, sans-serif;
|
97 |
| - background: #DAE3E3; |
98 |
| - margin: 15px 15px 0px; |
| 97 | + background-color: #DAE3E3; |
| 98 | + margin: 15px 15px 10px; |
99 | 99 | padding: 8px 10px;
|
100 | 100 | overflow-y: auto;
|
101 | 101 | }
|
102 | 102 |
|
103 |
| -#footer { |
104 |
| - flex-shrink: 0; |
105 |
| - display: flex; |
106 |
| - align-items: center; |
| 103 | +#footer { |
| 104 | + display: flex; |
| 105 | + flex-wrap: wrap; |
107 | 106 | justify-content: space-between;
|
108 |
| - margin: 10px 15px 10px; |
109 |
| - overflow: hidden; |
| 107 | + margin: 0px 15px 0px; |
110 | 108 | }
|
111 | 109 |
|
112 |
| -#form { |
113 |
| - display: inline-block; |
| 110 | +#form { |
| 111 | + display: flex; |
| 112 | + flex-grow: 1; |
| 113 | + margin-bottom: 15px; |
114 | 114 | }
|
115 | 115 |
|
116 |
| -#export { |
117 |
| - float: right; |
118 |
| - margin-left: auto; |
| 116 | +#input { |
| 117 | + flex-grow: 1; |
| 118 | +} |
| 119 | + |
| 120 | +#secondary-controls div { |
| 121 | + display: inline-block; |
| 122 | + padding: 10px 15px; |
119 | 123 | }
|
120 | 124 |
|
121 | 125 | #autoscroll,
|
122 | 126 | #list {
|
123 |
| - margin-left: 10px; |
124 | 127 | vertical-align: middle;
|
125 | 128 | width: 20px;
|
126 | 129 | height: 20px;
|
127 | 130 | }
|
128 | 131 |
|
| 132 | + |
| 133 | +#export { |
| 134 | + margin-bottom: 15px; |
| 135 | +} |
| 136 | + |
129 | 137 | .button {
|
130 | 138 | background-color: #b5c8c9;
|
131 | 139 | border: 1px solid #b5c8c9;
|
|
167 | 175 | outline: none;
|
168 | 176 | }
|
169 | 177 |
|
170 |
| -/* |
171 |
| -@media screen and (max-width: 950px) { |
172 |
| - #form { |
173 |
| - max-width: 60%; |
174 |
| - } |
175 |
| -
|
176 |
| - #input { |
177 |
| - max-width: 55%; |
178 |
| - } |
179 |
| -} |
180 |
| -@media screen and (max-width: 825px) { |
181 |
| - .buttons { |
182 |
| - flex-direction: column; |
183 |
| - } |
184 |
| -
|
185 |
| - #log { |
186 |
| - bottom: 7em; |
187 |
| - } |
188 |
| - |
189 |
| -} */ |
190 | 178 | </style>
|
191 | 179 | </head>
|
192 | 180 | <body>
|
|
195 | 183 | <div id="footer">
|
196 | 184 | <form id="form">
|
197 | 185 | <input type="submit" class="button" value="Send" />
|
198 |
| - <input type="text" id="input" class="textfield" size="64" /> |
| 186 | + <input type="text" id="input" class="textfield" /> |
199 | 187 | </form>
|
200 |
| - <div id="options"> |
201 |
| - <input name="pause" type="checkbox" checked id="autoscroll" /> |
202 |
| - <label for="autoscroll">Autoscroll</label> |
203 |
| - <input name="list" type="checkbox" checked id="list" /> |
204 |
| - <label for="list">List Command Enabled</label> |
| 188 | + <div id="secondary-controls"> |
| 189 | + <div> |
| 190 | + <input name="pause" type="checkbox" checked id="autoscroll" /> |
| 191 | + <label for="autoscroll">Autoscroll</label> |
| 192 | + </div> |
| 193 | + <div> |
| 194 | + <input name="list" type="checkbox" checked id="list" /> |
| 195 | + <label for="list">List Command Enabled</label> |
| 196 | + </div> |
| 197 | + <button id="export" class="button">Export Log</button> |
205 | 198 | </div>
|
206 |
| - <button id="export" class="button">Export Log</button> |
207 | 199 | </div>
|
208 | 200 | </div>
|
209 | 201 | </body>
|
|
0 commit comments