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

3 files changed, 25 insertions, 29 deletions

diff --git a/themes/baggy/_pocheit-form.twig b/themes/baggy/_pocheit-form.twig
index 57a928c0..409707f0 100755
--- 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 7b2c7082..45660b75 100644
--- 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 558fb208..6b5a1f4c 100755
--- 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;