[upd] use flex input and label form

tpl/myShaarli/configure.html

@@ -15,11 +15,11 @@
             <div id="tab-content1" class="tab-content">
               <p>
                 <label for="title">Page title :</label>
-                <input type="text" name="title" id="title" size="50" value="{$title}" autofocus>
+                <input type="text" name="title" id="title" value="{$title}" autofocus>
               </p>
               <p>
                 <label for="titleLink">Title link :</label>
-                <input type="text" name="titleLink" id="titleLink" size="50" value="{$titleLink}">
+                <input type="text" name="titleLink" id="titleLink" value="{$titleLink}">
               </p>
               <p>
                 <label for="contactLink">Contact link in footer: </label>
@@ -32,7 +32,7 @@
               </p>
               <p>
                 <label for="redirector">Redirector : </label>
-                <input type="text" name="redirector" id="redirector" size="50" value="{$redirector}">
+                <input type="text" name="redirector" id="redirector" value="{$redirector}">
                 (e.g. <i>http://anonym.to/?</i> will mask the HTTP_REFERER)
               </p>
               <p>
@@ -107,7 +107,7 @@
               </p>
               <p>
                 <label for="externalThumbshot">External thumbnailer : </label>
-                <input type="text" name="externalThumbshot" id="externalThumbshot" size="50" value="{$GLOBALS['config']['externalThumbshot']}">
+                <input type="text" name="externalThumbshot" id="externalThumbshot" value="{$GLOBALS['config']['externalThumbshot']}">
               </p>
               <p>
                 <label for="enableFavicon">Enable favicon : </label>

tpl/myShaarli/myShaarli.css

@@ -980,20 +980,16 @@ a:hover, .linkdescription a:hover, .linktitle a:hover, .linkWallabag a:hover, .l
  */
 
 .tabs input[type=radio] {
+  left: -9999px;
   position: absolute;
   top: -9999px;
-  left: -9999px;
 }
 
 .tabs {
   float: none;
   list-style: none;
-  position: relative;
   padding: 0;
-}
+  position: relative;
-
-.tabs li {
-  display: block;
 }
 
 .tabsLabel {
@@ -1001,42 +997,63 @@ a:hover, .linkdescription a:hover, .linktitle a:hover, .linkWallabag a:hover, .l
   border-radius: 5px;
   box-shadow: 0 1px 2px rgba(0,0,0,0.5);
   color: #a2dd42;
+  cursor: pointer;
   display: block;
   font-size: 1.1em;
-  cursor: pointer;
+  padding: .3em .6em;
   position: relative;
   top: 3px;
   transition: all .2s ease-in-out;
-  padding: .3em .6em;
 }
 
-.tabsLabel:hover {
+.tab-content {
-  color: #ffffc9;
+  -moz-animation-duration: .5s;
+  -o-animation-duration: .5s;
+  -webkit-animation-duration: .5s;
+  animation-duration: .5s;
+  border: 1px solid #ccc;
+  border-radius: .3em;
+  box-sizing: border-box;
+  display: none;
+  left: 0;
+  padding: 15px;
+  text-align: left;
+  width: 100%;
+  z-index: 2;
 }
 
-[id^=tab]:checked + .tabsLabel {
+.tab-content input {
-  color: #ffffc9;
+  margin: 0 .2em;
 }
 
-[id^=tab]:checked ~
+.tab-content p {
+  align-content: center;
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+
+.tab-content input[type=text] {
+  align-items: center;
+  flex: 100 1 auto;
+  height: 1.1em;
+}
+
+.tab-content label {
+  align-items: center;
+  flex: 0 1 auto;
+  height: 1.1em;
+}
+
+.tabs li,[id^=tab]:checked ~
 [id^=tab-content] {
   display: block;
 }
 
-.tab-content {
+.tabsLabel:hover, [id^=tab]:checked + .tabsLabel {
-  z-index: 2;
+  color: #ffffc9;
-  display: none;
-  text-align: left;
-  width: 100%;
-  left: 0;
-  box-sizing: border-box;
-  -webkit-animation-duration: .5s;
-  -o-animation-duration: .5s;
-  -moz-animation-duration: .5s;
-  animation-duration: .5s;
-  border: 1px solid #ccc;
-  border-radius: .3em;
-  padding: 15px;
 }
 
 @media print {

tpl/myShaarli_Columns/columns.css

@@ -990,20 +990,16 @@ a:hover, .linkdescription a:hover, .linktitle a:hover, .linkWallabag a:hover, .l
  */
 
 .tabs input[type=radio] {
+  left: -9999px;
   position: absolute;
   top: -9999px;
-  left: -9999px;
 }
 
 .tabs {
   float: none;
   list-style: none;
-  position: relative;
   padding: 0;
-}
+  position: relative;
-
-.tabs li {
-  display: block;
 }
 
 .tabsLabel {
@@ -1011,42 +1007,63 @@ a:hover, .linkdescription a:hover, .linktitle a:hover, .linkWallabag a:hover, .l
   border-radius: 5px;
   box-shadow: 0 1px 2px rgba(0,0,0,0.5);
   color: #a2dd42;
+  cursor: pointer;
   display: block;
   font-size: 1.1em;
-  cursor: pointer;
+  padding: .3em .6em;
   position: relative;
   top: 3px;
   transition: all .2s ease-in-out;
-  padding: .3em .6em;
 }
 
-.tabsLabel:hover {
+.tab-content {
-  color: #ffffc9;
+  -moz-animation-duration: .5s;
+  -o-animation-duration: .5s;
+  -webkit-animation-duration: .5s;
+  animation-duration: .5s;
+  border: 1px solid #ccc;
+  border-radius: .3em;
+  box-sizing: border-box;
+  display: none;
+  left: 0;
+  padding: 15px;
+  text-align: left;
+  width: 100%;
+  z-index: 2;
 }
 
-[id^=tab]:checked + .tabsLabel {
+.tab-content input {
-  color: #ffffc9;
+  margin: 0 .2em;
 }
 
-[id^=tab]:checked ~
+.tab-content p {
+  align-content: center;
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+
+.tab-content input[type=text] {
+  align-items: center;
+  flex: 100 1 auto;
+  height: 1.1em;
+}
+
+.tab-content label {
+  align-items: center;
+  flex: 0 1 auto;
+  height: 1.1em;
+}
+
+.tabs li,[id^=tab]:checked ~
 [id^=tab-content] {
   display: block;
 }
 
-.tab-content {
+.tabsLabel:hover, [id^=tab]:checked + .tabsLabel {
-  z-index: 2;
+  color: #ffffc9;
-  display: none;
-  text-align: left;
-  width: 100%;
-  left: 0;
-  box-sizing: border-box;
-  -webkit-animation-duration: .5s;
-  -o-animation-duration: .5s;
-  -moz-animation-duration: .5s;
-  animation-duration: .5s;
-  border: 1px solid #ccc;
-  border-radius: .3em;
-  padding: 15px;
 }
 
 @media print {