Making the close button more visually consistent on the menu popup forms

diff --git a/themes/baggy/_pocheit-form.twig b/themes/baggy/_pocheit-form.twig
index 57a928c0b4c2a135b5bc0e716ecdc1dcb9501d89..409707f09e474de163247ec05224bdc7d2ab691f 100755 (executable)
--- a/themes/baggy/_pocheit-form.twig
+++ b/themes/baggy/_pocheit-form.twig
@@ -1,7 +1,7 @@
 <div id="bagit-form" class="messages info">
     <form method="get" action="index.php" target="_blank" id="bagit-form-form">
-        <h2><a href="javascript: void(null);" id="bagit-form-close">X</a>
-        {% trans "Save a link" %}</h2>
+        <h2>{% trans "Save a link" %}</h2>
+        <a href="javascript: void(null);" id="bagit-form-close" class="popup-close">&times;</a>
         <input type="hidden" name="autoclose" value="1" />
         <input required placeholder="example.com/article" class="addurl" id="plainurl" name="plainurl" type="url" />
         <span id="add-link-result"></span>

diff --git a/themes/baggy/_search-form.twig b/themes/baggy/_search-form.twig
index 7b2c70824016366bde13e2d77399e58c10f37ac3..45660b754ef682b24cdc02654babc45efd66fb94 100644 (file)
--- a/themes/baggy/_search-form.twig
+++ b/themes/baggy/_search-form.twig
@@ -1,7 +1,8 @@
 <div id="search-form" class="messages info">
 <form method="get" action="index.php">
+        <a href="javascript: void(null);" id="search-form-close" class="popup-close">&times;</a>
         <input type="hidden" name="view" value="search"></input>
-        <label><a href="javascript: void(null);" id="search-form-close">X</a>{% trans "Search" %}</label> : <input required placeholder="{% trans "Enter your search here" %}" type="text" name="search" id="searchfield" />
+        <label>{% trans "Search" %}</label>: <input required placeholder="{% trans "Enter your search here" %}" type="text" name="search" id="searchfield" />
         <input id="submit-search" type="submit" value="{% trans "Search" %} !"></input>
 </form>
-</div>
\ No newline at end of file
+</div>

diff --git a/themes/baggy/css/main.css b/themes/baggy/css/main.css
index 558fb20898fda1d0002ddc03af19fe79a0ae9ff8..6b5a1f4c49df38b30f861ed6c30d4a77ffd512fd 100755 (executable)
--- a/themes/baggy/css/main.css
+++ b/themes/baggy/css/main.css
@@ -192,7 +192,7 @@ h2:after {
   padding-bottom: 1em;
 }
 
-  #links a {
+  #links > li > a {
     display: block;
     padding: 0.5em 2em 0.5em 1em;
     color: #FFF;
@@ -208,7 +208,7 @@ h2:after {
           transition: all 0.5s ease;
   }
 
-  #links a:hover, #links a:focus {
+  #links > li > a:hover, #links > li > a:focus {
     background: #999;
     color: #000;
   }
@@ -569,19 +569,28 @@ footer a {
   padding: 2em;
 }
 
-a#bagit-form-close, a#search-form-close {
+#bagit-form-form .addurl {
+       margin-left: 0;
+}
+
+.popup-close {
   background: #000;
   color: #FFF;
-  padding: 0.2em 0.5em;
+       font-size: 1.4em;
+       line-height: 1.6em;
+       width: 1.6em;
+       height: 1.6em;
+       text-align: center;
   text-decoration: none;
-  display: inline-block;
-  float: right;
-  font-size: 0.6em;
-}
-a#bagit-form-close:hover, a#search-form-close:hover {
-  background: #999;
-  color: #000;
+       display: inline-block;
+       position: absolute;
+       top: 0;
+       right: 0;
 }
+       .popup-close:hover {
+               background: #999;
+               color: #000;
+       }
 
 .active-current {
   background-color: #999;
@@ -665,20 +674,6 @@ a.add-to-wallabag-link-after:after {
   padding: 2em;
 }
 
-a#search-form-close {
-  background: #000;
-  color: #FFF;
-  padding: 0.2em 0.5em;
-  text-decoration: none;
-  display: inline-block;
-  float: right;
-  font-size: 1.2em;
-}
-a#search-form-close:hover {
-  background: #999;
-  color: #000;
-}
-
 #submit-search{
 margin-left: 4em;
 margin-top:1em;