Fix delete buttons issues

[github/shaarli/Shaarli.git] / tpl / default / css / shaarli.css

diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index 36d848d82952beaacefe8dbe8f2c9f2649fc1587..ed9a86caf0944b06f5674774bb760e74c3701c72 100644 (file)
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -2,7 +2,7 @@
  * General
  */
 body {
-    background: url(../img/noise.png) #c5c5c5;
+    background: #c5c5c5;
 }
 
 .strong {
@@ -87,7 +87,7 @@ pre {
 }
 
 .anchor:target {
-    padding-top: 35px;
+    padding-top: 40px;
 }
 /**
  * MENU
@@ -96,10 +96,11 @@ pre {
     position: fixed;
     top: 0;
     width: 100%;
+    --height: 50px;
     background: #1b926c;
     -webkit-font-smoothing: antialiased;
     /* Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 */
-    max-height: 2.1em;
+    max-height: 45px;
     transition: max-height 0.5s;
     overflow: hidden;
     z-index: 999;
@@ -107,7 +108,12 @@ pre {
 
 /* Chrome bugfix: with 100% height, it only displays the first element. */
 .pure-menu-item {
-    height: inherit;
+    height: 45px;
+}
+
+.shaarli-menu.open {
+    max-height: 500px;
+    transition: max-height 0.75s;
 }
 
 .head-logo {
@@ -119,6 +125,7 @@ pre {
 .pure-menu-link:visited,
 .pure-menu-selected .pure-menu-link,
 .pure-menu-selected .pure-menu-link:visited {
+    padding: 0.8em 1em;
     color: #f5f5f5;
 }
 
@@ -127,14 +134,22 @@ pre {
 .pure-menu-selected .pure-menu-link:focus {
     color: #fff;
     background: transparent;
+}
 
+.pure-menu-item:hover::after {
+    margin: -4px auto 0 auto;
+    display: block;
+    content:"";
+    background: #fff;
+    height: 4px;
+    width: 100%;
 }
 
 .menu-toggle {
     width: 34px;
-    height: 34px;
+    height: 45px;
     position: absolute;
-    top: 0;
+    top: 5px;
     right: 0;
     display: none;
 }
@@ -178,6 +193,13 @@ pre {
     font-size: 0.8em;
 }
 
+@media screen and (min-width: 64em) {
+    #linkcount {
+        position: absolute;
+        right: 5px;
+    }
+}
+
 #search, #search-linklist {
     text-align: center;
     width: 100%;
@@ -214,12 +236,9 @@ pre {
     color: #252525;
 }
 
-#search button:hover {
-    color: #fff;
-}
-
+#search button:hover,
 #search-linklist button:hover {
-    color: #000;
+    color: #fff;
 }
 
 #search-linklist {
@@ -256,7 +275,7 @@ pre {
     text-align: center;
     background: #1b926c;
     display: block;
-    z-index: 9999;
+    z-index: 999;
     height: 30px;
     padding: 5px 0;
 }
@@ -323,18 +342,7 @@ pre {
 #content {
     position: relative;
     z-index: 2;
-}
-
-@media screen and (max-width: 64em) {
-    #content {
-        margin: 2.1em 0 0 0;
-    }
-}
-
-@media screen and (min-width: 64em) {
-    #content {
-        margin-top: 33px;
-    }
+    margin-top: 45px;
 }
 
 /**
@@ -388,7 +396,7 @@ pre {
 }
 
 .linklist-filters a {
-    padding: 2px 5px;
+    padding: 5px 8px;
     text-decoration: none;
 }
 
@@ -425,7 +433,7 @@ pre {
 }
 
 .linksperpage a {
-    padding: 2px 5px;
+    padding: 5px 5px;
     text-decoration: none;
     color: #252525;
     background: #f5f5f5;
@@ -442,9 +450,9 @@ pre {
 }
 
 .linksperpage input[type="text"] {
-    height: 15px;
+    height: 20px;
     margin: 0;
-    padding: 3px 5px 3px 8px;
+    padding: 4px 5px 3px 8px;
     background: #f5f5f5;
     border: medium none currentColor;
     color: #252525;
@@ -478,13 +486,14 @@ pre {
     content:"";
     background: #F89406;
     height: 95%;
-    width: 3px;
+    width: 2px;
     margin-top: 3px;
+    z-index: 1;
 }
 
 .linklist-item-title h2 {
     padding: 3px 10px 0 10px;
-    line-height: 25px;
+    line-height: 30px;
 }
 
 .linklist-item-title a {
@@ -520,18 +529,9 @@ pre {
     display: none;
 }
 
-.linklist-item-title:after {
-    display: block;
-    content:"";
-    background: linear-gradient(to right, #f5f5f5, #8e8e8e, #f5f5f5);
-    height: 1px;
-    width: 90%;
-    margin: 1px auto 0 auto;
-}
-
 .linklist-item-editbuttons {
     float: right;
-    padding: 5px;
+    padding: 8px 5px;
 }
 
 .linklist-item-editbuttons * {
@@ -550,7 +550,7 @@ pre {
 }
 
 .delete-link {
-    font-size: 1.1em;
+    font-size: 1.3em;
     color: #ac2925 !important;
 }
 
@@ -561,6 +561,7 @@ pre {
     font-family: Roboto Slab, Arial, sans-serif;
     word-wrap: break-word;
     color: #252525;
+    line-height: 1.3em;
 }
 
 .linklist-item.private .linklist-item-description::before {
@@ -571,9 +572,8 @@ pre {
     content:"";
     background: #F89406;
     height: 95%;
-    width: 3px;
-    z-index: 9999;
-    #margin: 0;
+    width: 2px;
+    z-index: 1;
 }
 
 .linklist-item-description a {
@@ -747,22 +747,49 @@ pre {
     color: #777777;
 }
 
-.page-form input[type="submit"] {
+.page-form input[type="submit"], .page-form a.button {
     margin: 15px 5px;
     height: 35px;
+    line-height: 35px;
     width: 150px;
     background: #1b926c;
+    color: #f5f5f5;
     border: none;
     box-shadow: 1px 1px 1px #ddd, -1px -1px 6px #ddd, -1px 1px 2px #ddd, 1px -1px 2px #ddd;
     font-size: 1.2em;
-    color: #f5f5f5;
+    text-decoration: none;
+    vertical-align: center;
+    font-weight: normal;
+    display: inline-block;
 }
 
 
-.page-form input[type="submit"].button-red {
+.page-form .button.button-red {
     background: #ac2925;
 }
 
+.page-form .submit-buttons {
+    margin-bottom: 10px;
+}
+
+@media screen and (min-width: 64em) {
+    .page-form .submit-buttons {
+        position: relative;
+    }
+
+    .page-form .submit-buttons .button.button-red {
+        position: absolute;
+        right: 5%;
+    }
+}
+
+@media screen and (max-width: 64em) {
+    .page-form .submit-buttons .button {
+        display: block;
+        margin: auto;
+    }
+}
+
 .page-form select {
     color: #252525;
 }
@@ -787,7 +814,7 @@ pre {
 
 .page-form-complete .form-label, .page-form-complete .form-input {
     position: relative;
-    height: 60px;
+    min-height: 60px;
 }
 
 .page-form-complete .form-label label,
@@ -1108,6 +1135,7 @@ pre {
     padding: 5px 5px 0 5px;
     font-size: 0.9em;
     text-align: justify;
+    word-wrap: break-word;
 }
 
 .daily-entry .daily-entry-tags {