Fix alignement and better clarity for 'List all links with those tags' button

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

diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index 3391fa0539ee7b49a5df06f303dce3cbc9b0681b..14439402f26237b9694add9ba9e7205dd1e61e81 100644 (file)
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -226,6 +226,12 @@ body, .pure-g [class*="pure-u"] {
     border-radius: 2px;
     color: #252525;
 }
+@media screen and (max-width: 64em) {
+    .searchform {
+        max-width: 260px;
+        margin: 0 auto;
+    }
+}
 
 /* because chrome */
 #search input[type="text"]::-webkit-input-placeholder,
@@ -236,43 +242,37 @@ body, .pure-g [class*="pure-u"] {
 #search button,
 #search-tagcloud button,
 #search-linklist button {
-    background: transparent;
+    padding: 4px 8px 6px 8px;
+    background-color: #1B926C;
+    color: #f5f5f5;
     border: none;
+    border-radius: 2px;
 }
 
-#search button {
-    color: #f5f5f5;
+#search-tagcloud button {
+    width: 90%;
 }
 
-#search-linklist button {
-    color: #252525;
+@media screen and (max-width: 64em) {
+    #search-linklist button {
+        width: 100%;
+    }
+    #search-linklist .awesomplete {
+        margin: 5px 0;
+    }
 }
 
 #search button:hover,
-#search-linklist button:hover {
-    color: #fff;
-}
+#search-linklist button:hover,
 #search-tagcloud button:hover {
     color: #d0d0d0;
 }
 
+#search,
 #search-linklist {
-    padding: 5px 0;
+    padding: 6px 0;
 }
 
-@media screen and (min-width: 64em) {
-    #search .searchform,
-    #search-linklist .searchform {
-        margin-right: 25px;
-        text-align: right;
-    }
-
-    #search .tagfilter,
-    #search-linklist .tagfilter {
-        margin-left: 25px;
-        text-align: left;
-    }
-}
 @media screen and (max-width: 64em) {
     #search, #search * {
         visibility: hidden;
@@ -321,7 +321,6 @@ body, .pure-g [class*="pure-u"] {
 }
 
 .subheader-form input[type="text"], .subheader-form input[type="password"], .subheader-form .remember-me {
-    margin: 0 0 5px 0;
     padding: 5px 5px 3px 15px;
     height: 20px;
     width: 20%;
@@ -434,7 +433,7 @@ body, .pure-g [class*="pure-u"] {
  * 64em -> lg
  */
 .linklist-filters {
-    margin: 10px 0;
+    margin: 5px 0;
     color: #252525;
     font-size: 0.9em;
 }
@@ -455,7 +454,7 @@ body, .pure-g [class*="pure-u"] {
 }
 
 .linklist-pages {
-    margin: 10px 0;
+    margin: 5px 0;
     color: #252525;
     text-align: center;
 }
@@ -470,7 +469,7 @@ body, .pure-g [class*="pure-u"] {
 }
 
 .linksperpage {
-    margin: 10px 0;
+    margin: 5px 0;
     text-align: right;
     color: #252525;
     font-size: 0.9em;
@@ -507,9 +506,29 @@ body, .pure-g [class*="pure-u"] {
  * CONTENT - LINKLIST ITEMS
  */
 .linklist-item {
-    margin: 0 0 15px 0;
+    margin: 0 0 10px 0;
     background: #f5f5f5;
-    box-shadow: 2px 2px 0.5em #797979;
+    box-shadow: 1px 1px 3px #797979;
+}
+
+.linklist-item-buttons {
+    background: transparent;
+    position: relative;
+    width: 23px;
+    z-index: 99;
+}
+
+.linklist-item-buttons-right {
+    float: right;
+    margin-right: -25px;
+}
+
+.linklist-item-buttons * {
+    display: block;
+    float: left;
+    width:100%;
+    margin: auto;
+    text-align: center;
 }
 
 .linklist-item-title, .linklist-item-title h2  {
@@ -527,7 +546,7 @@ body, .pure-g [class*="pure-u"] {
     line-height: 30px;
 }
 
-.linklist-item-title a {
+.linklist-item-title h2 a {
     font-size: 0.7em;
     color: #252525;
     text-decoration: none;
@@ -539,11 +558,11 @@ body, .pure-g [class*="pure-u"] {
     color: #1b926c;
 }
 
-.linklist-item-title a:visited .linklist-link {
-    color: #555555;
+.linklist-item-title h2 a:visited .linklist-link {
+    color: #2a4c41;
 }
 
-.linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{
+.linklist-item-title h2 a:hover, .linklist-item-title .linklist-link:hover{
     color: #252525;
 }
 
@@ -555,8 +574,9 @@ body, .pure-g [class*="pure-u"] {
     color: #F89406;
 }
 
-.linklist-item-title .fold-button {
+.fold-button {
     display: none;
+    color: #252525;
 }
 
 .linklist-item-editbuttons {
@@ -586,24 +606,12 @@ body, .pure-g [class*="pure-u"] {
 
 .linklist-item-description {
     position: relative;
-    padding: 10px;
+    padding: 0 10px;
     word-wrap: break-word;
     color: #252525;
     line-height: 1.3em;
 }
 
- {
-    position: absolute;
-    left: 3px;
-    top: 0;
-    display: block;
-    content:"";
-    background: #F89406;
-    height: 95%;
-    width: 2px;
-    z-index: 1;
-}
-
 .linklist-item-description a {
     text-decoration: none;
     color: #1b926c;
@@ -619,32 +627,36 @@ body, .pure-g [class*="pure-u"] {
 
 .linklist-item-thumbnail {
     position: relative;
-    margin-top: 10px;
-    padding: 10px;
-    float: left;
+    padding: 0 0 0 5px;
+    margin: 0;
+    float: right;
     z-index: 50;
+    height: 90px;
 }
 
 .linklist-item.private .linklist-item-title::before,
-.linklist-item.private .linklist-item-description::before,
-.linklist-item.private .linklist-item-thumbnail::before {
+.linklist-item.private .linklist-item-description::before {
     position: absolute;
     left: 3px;
     top: 0;
     display: block;
     content:"";
     background: #F89406;
-    height: 95%;
+    height: 96%;
     width: 2px;
     z-index: 1;
 }
 
+.linklist-item.private .linklist-item-description::before {
+    height: 100%;
+}
+
 .linklist-item.private .linklist-item-title::before {
     margin-top: 3px;
 }
 
 .linklist-item-infos {
-    padding: 8px 8px 5px 8px;
+    padding: 4px 8px 4px 8px;
     background: #ddd;
     color: #252525;
 }
@@ -681,6 +693,8 @@ body, .pure-g [class*="pure-u"] {
     overflow: hidden;
     text-overflow: ellipsis;
     font-size: 0.8em;
+    height:23px;
+    line-height:23px;
 }
 
 .linklist-item-infos .mobile-buttons {
@@ -694,6 +708,16 @@ body, .pure-g [class*="pure-u"] {
     height: 16px;
 }
 
+.linklist-item-infos-controls-group {
+    display: inline-block;
+    border-right: 1px solid #5d5d5d;
+    padding-right: 6px;
+}
+
+.ctrl-edit {
+    margin: 0 7px;
+}
+
 /** 64em -> lg **/
 @media screen and (max-width: 64em) {
     .linklist-item-infos-url {
@@ -992,6 +1016,14 @@ form[name="linkform"].page-form {
     color: #3f3f3f;
 }
 
+/**
+ * EDIT LINK
+ */
+#editlinkform .created-date {
+    color: #767676;
+    margin-bottom: 10px;
+}
+
 /**
  * LOGIN
  */
@@ -1277,3 +1309,40 @@ form[name="linkform"].page-form {
     text-decoration: none;
     font-weight: bold;
 }
+
+/**
+ * Markdown
+ */
+.markdown p {
+    margin: 0 !important;
+}
+
+.markdown p + p {
+    margin: 0.5em 0 0 0 !important;
+}
+
+.markdown *:first-child {
+    margin-top: 0 !important;
+}
+
+.markdown *:last-child {
+    margin-bottom: 5px !important;
+}
+
+/**
+ * Pure Button
+ */
+.pure-button-success,
+.pure-button-error,
+.pure-button-warning,
+.pure-button-primary,
+.pure-button-shaarli,
+.pure-button-secondary {
+    color: white !important;
+    border-radius: 4px;
+    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+}
+
+.pure-button-shaarli {
+    background-color: #1B926C;
+}