]> git.immae.eu Git - github/shaarli/Shaarli.git/blobdiff - tpl/default/css/shaarli.css
visited links color: same hue as unvisited links, darkened
[github/shaarli/Shaarli.git] / tpl / default / css / shaarli.css
index 161c36d6ab25a2c51edb01217af8f45ca8c970bd..ba589723b3c999e1361f6cab0cc8ebbaf3e830c1 100644 (file)
@@ -2,7 +2,7 @@
  * General
  */
 body {
-    background: #c5c5c5;
+    background: #d0d0d0;
 }
 
 .strong {
@@ -35,14 +35,29 @@ pre {
 }
 
 @font-face {
-    font-family: 'Roboto Slab';
+    font-family: 'Roboto';
     font-weight: 400;
     font-style: normal;
     src:
-    local('Fira Sans'),
-    local('Fira-Sans-regular'),
-    url('../fonts/Fira-Sans-regular.woff2') format('woff2'),
-    url('../fonts/Fira-Sans-regular.woff') format('woff');
+    local('Roboto'),
+    local('Roboto-Regular'),
+    url('../fonts/Roboto-Regular.woff2') format('woff2'),
+    url('../fonts/Roboto-Regular.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Roboto';
+    font-weight: 700;
+    font-style: normal;
+    src:
+    local('Roboto'),
+    local('Roboto-Bold'),
+    url('../fonts/Roboto-Bold.woff2') format('woff2'),
+    url('../fonts/Roboto-Bold.woff') format('woff');
+}
+
+body, .pure-g [class*="pure-u"] {
+    font-family: Roboto, Arial, sans-serif;
 }
 
 /**
@@ -68,10 +83,6 @@ pre {
     .pure-u-xl-visible { display: inline-block !important; }
 }
 
-.pure-g [class*="pure-u"]{
-    font-family: Roboto Slab, Arial, sans-serif;
-}
-
 /**
  * Make pure-extras alert closable.
  */
@@ -200,7 +211,7 @@ pre {
     }
 }
 
-#search, #search-linklist {
+#search, #search-linklist, #search-tagcloud {
     text-align: center;
     width: 100%;
 }
@@ -215,6 +226,12 @@ pre {
     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,
@@ -223,51 +240,68 @@ pre {
 }
 
 #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;
     }
 }
 
+.subheader-form a.button {
+    color: #f5f5f5;
+    font-weight: bold;
+    text-decoration: none;
+    border: 2px solid #f5f5f5;
+    border-radius: 5px;
+    padding: 3px 10px;
+}
+
+.linklist-item-editbuttons .delete-checkbox {
+    display: none;
+}
+
 #header-login-form input[type="text"], #header-login-form input[type="password"] {
     width: 200px;
 }
 
+/* because chrome */
+#header-login-form input[type="text"]::-webkit-input-placeholder,
+#header-login-form input[type="password"]::-webkit-input-placeholder {
+    color: #777777;
+}
+
 .subheader-form {
     visibility: hidden;
     position: fixed;
@@ -287,7 +321,6 @@ pre {
 }
 
 .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%;
@@ -384,6 +417,10 @@ pre {
     color: #252525;
 }
 
+.toolbar-plugin input[type="submit"]:hover {
+    background: #fff;
+}
+
 @media screen and (max-width: 64em) {
     .toolbar-plugin input[type="text"] {
         width: 70%;
@@ -484,19 +521,6 @@ pre {
     background: #f5f5f5;
 }
 
-.linklist-item.private .linklist-item-title::before {
-    position: absolute;
-    left: 3px;
-    top: 0;
-    display: block;
-    content:"";
-    background: #F89406;
-    height: 95%;
-    width: 2px;
-    margin-top: 3px;
-    z-index: 1;
-}
-
 .linklist-item-title h2 {
     padding: 3px 10px 0 10px;
     line-height: 30px;
@@ -507,7 +531,6 @@ pre {
     color: #252525;
     text-decoration: none;
     vertical-align: middle;
-    font-family: Roboto Slab, Arial, sans-serif;
 }
 
 .linklist-item-title .linklist-link {
@@ -515,8 +538,8 @@ pre {
     color: #1b926c;
 }
 
-.linklist-item-title .linklist-link:visited {
-    color: #1b926c;
+.linklist-item-title a:visited .linklist-link {
+    color: #2a4c41;
 }
 
 .linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{
@@ -563,14 +586,12 @@ pre {
 .linklist-item-description {
     position: relative;
     padding: 10px;
-    background: #f5f5f5;
-    font-family: Roboto Slab, Arial, sans-serif;
     word-wrap: break-word;
     color: #252525;
     line-height: 1.3em;
 }
 
-.linklist-item.private .linklist-item-description::before {
+ {
     position: absolute;
     left: 3px;
     top: 0;
@@ -596,9 +617,29 @@ pre {
 }
 
 .linklist-item-thumbnail {
+    position: relative;
     margin-top: 10px;
     padding: 10px;
     float: left;
+    z-index: 50;
+}
+
+.linklist-item.private .linklist-item-title::before,
+.linklist-item.private .linklist-item-description::before,
+.linklist-item.private .linklist-item-thumbnail::before {
+    position: absolute;
+    left: 3px;
+    top: 0;
+    display: block;
+    content:"";
+    background: #F89406;
+    height: 95%;
+    width: 2px;
+    z-index: 1;
+}
+
+.linklist-item.private .linklist-item-title::before {
+    margin-top: 3px;
 }
 
 .linklist-item-infos {
@@ -702,15 +743,6 @@ pre {
     text-align: center;
 }
 
-.page-form .window-title:after {
-    display: block;
-    content:"";
-    background: linear-gradient(to right, #f5f5f5, #1b926c, #f5f5f5);
-    height: 1px;
-    width: 80%;
-    margin: auto;
-}
-
 .page-form .window-subtitle {
     text-align: center;
 }
@@ -718,10 +750,11 @@ pre {
 .page-form a {
     color: #1b926c;
     font-weight: bold;
+    text-decoration: none;
 }
 
 .page-form p {
-    padding: 0 10px;
+    padding: 5px 10px;
     margin: 0;
 }
 
@@ -740,7 +773,7 @@ pre {
 }
 
 .page-form textarea {
-    height: 240px;
+    min-height: 240px;
     padding: 15px 5px 3px 15px;
     resize: vertical;
     overflow-y: auto;
@@ -825,6 +858,7 @@ pre {
 
 .page-form-complete .form-label label,
 .page-form-complete .form-input input,
+.page-form-complete .form-input select.align,
 .page-form-complete .timezone {
     position: absolute;
     top: 50%;
@@ -901,6 +935,10 @@ div.awesomplete > ul {
     color: black;
 }
 
+form[name="linkform"].page-form {
+    overflow: visible;
+}
+
 @media screen and (max-width: 64em) {
     .page-form-complete .form-label {
         height: inherit;
@@ -953,6 +991,14 @@ div.awesomplete > ul {
     color: #3f3f3f;
 }
 
+/**
+ * EDIT LINK
+ */
+#editlinkform .created-date {
+    color: #767676;
+    margin-bottom: 10px;
+}
+
 /**
  * LOGIN
  */
@@ -978,6 +1024,10 @@ div.awesomplete > ul {
     margin: 0 0 0 5px;
 }
 
+.search-result .label-private {
+    border: 1px solid white;
+}
+
 /**
  * TOOLS
  */
@@ -1028,7 +1078,7 @@ div.awesomplete > ul {
 }
 
 #cloudtag, #cloudtag a {
-    color: #000;
+    color: #252525;
     text-decoration: none;
 }
 
@@ -1036,6 +1086,42 @@ div.awesomplete > ul {
     color: #7f7f7f;
 }
 
+/**
+ * TAG LIST
+ */
+#taglist {
+    padding: 0 10px;
+}
+
+#taglist a {
+    color: #252525;
+    text-decoration: none;
+}
+
+#taglist .count {
+    display: inline-block;
+    width: 35px;
+    text-align: right;
+    color: #7f7f7f;
+}
+
+#taglist .rename-tag-form {
+    display: none;
+}
+
+#taglist .delete-tag {
+    color: #ac2925;
+    display: none;
+}
+
+#taglist .rename-tag {
+    color: #0b5ea6;
+}
+
+#taglist .validate-rename-tag {
+    color: #1b926c;
+}
+
 /**
  * Picture wall CSS
  */
@@ -1163,7 +1249,7 @@ div.awesomplete > ul {
 
 .daily-entry-thumbnail {
     float: left;
-    margin: 15px 5px 5px 5px;
+    margin: 15px 5px 5px 15px;
 }
 
 .daily-entry-description a {
@@ -1178,3 +1264,23 @@ div.awesomplete > ul {
 .daily-entry-description a:visited {
     color: #20b988;
 }
+
+/*
+ * Fix empty bookmarklet name in Firefox
+ */
+.pure-button {
+    -moz-user-select: auto;
+}
+
+.tag-sort {
+    margin-top: 30px;
+    text-align: center;
+}
+
+.tag-sort a {
+    display: inline-block;
+    margin: 0 15px;
+    color: white;
+    text-decoration: none;
+    font-weight: bold;
+}