form > ul {
display: table;
- border-spacing: 0 2px;
}
form > ul > li {
display: table-row;
}
#convertpreview {
width: 300px;
+ height: 200px;
align-self: start;
flex-shrink: 0;
+ position: relative;
+ overflow: hidden;
}
.popup {
margin: 0 -1ex; /* inner gap */
}
.inline > * {
- margin: 0 1ex;
+ margin: 1px 1ex;
}
.inline .inline {
display: flex;
}
.inline.multiinput {
flex-wrap: wrap;
+ justify-content: space-between;
+}
+.inline.multiinput > :last-child {
+ text-align: right;
+ flex-grow: 1;
}
.multiinput > input {
width: 10em;
margin: 1ex 0;
display: inline-block;
}
+
+#nav {
+ position: relative;
+}
+form#search {
+ display: block;
+ position: absolute;
+ width: 100%;
+ text-align: right;
+ top: -7ex;
+}
+#search input {
+ width: 100%;
+ transition: all .5s ease-in;
+}
+#search:not(:focus-within) input {
+ width: 0;
+ padding-left: 0;
+ padding-right: 0;
+ visibility: hidden;
+}
+#search button {
+ position: absolute;
+ right: 0;
+ height: 100%; /* like input */
+ border: 0;
+ background: none;
+ color: inherit;
+ font: inherit;
+ cursor: pointer;
+}