Merge pull request #181 from inthepoche/dev

[github/wallabag/wallabag.git] / tpl / css / style.css

diff --git a/tpl/css/style.css b/tpl/css/style.css
index d23c18964c89332a770fe59a9a3a043c94c80d8e..7633534c3a428b307bae56880cdafa45164c8dbc 100644 (file)
--- a/tpl/css/style.css
+++ b/tpl/css/style.css
@@ -1,7 +1,8 @@
 body {
     font-size: 16px;
-    font-family: 'Roboto', sans-serif;
+    font-family: 'Roboto', Verdana, Geneva, sans-serif;
     margin: 10px;
+    color: #000;
 }
 
 header {
@@ -12,52 +13,67 @@ header h1 {
     font-size: 1.3em;
 }
 
+a, a:hover, a:visited {
+    color: #000;
+}
+
 .bouton {
-       border-radius: 2px;
+    background-color: #000;
+    color: #fff;
+    border: none;
+    border-radius: 2px;
+}
+.bouton:hover {
+    background-color: #222;
+    color: #f1f1f1;
+    cursor: pointer;
 }
 
 #main {
     margin: 0 auto;
 }
 
-#main ul#links {
+#main #links {
     padding: 0;
     list-style-type: none;
     text-align: center;
     font-size: 0.9em;
 }
 
-#main ul#links li {
+#main #links li {
     display: inline;
 }
 
-#main ul#links li a.current {
+#main #links li .current {
+    background-color: #000;
+    color: #fff;
     -webkit-border-radius: 2px;
     border-radius: 2px;
 }
 
-#main ul#sort {
+#main #sort {
     padding: 0;
     list-style-type: none;
     text-align: center;
     opacity: 0.5;
 }
 
-#main ul#sort li {
+#main #sort li {
     display: inline;
     font-size: 0.9em;
 }
 
-#main ul#sort img:hover {
+#main #sort img:hover {
     cursor: pointer;
 }
 
-
-#links a{
+#links a {
     text-decoration: none;
     padding: 5px 10px;
 }
-#links a:hover{
+#links a:hover {
+    background-color: #040707;
+    color: #F1F1F1;
     -webkit-border-radius: 2px;
     border-radius: 2px;
 }
@@ -65,7 +81,7 @@ header h1 {
 /*** ***/
 /*** LINKS DISPLAY ***/
 
-#main a.tool {
+#main .tool {
     text-decoration: none;
     cursor: pointer;
 }
@@ -80,17 +96,23 @@ header h1 {
 }
 
 #main #content .entrie {
-    border-bottom: 1px dashed #222222;
+    border-bottom: 1px dashed #222;
 }
 
-#main .entrie ul.tools {
+#main .entrie .tools {
     list-style-type: none;
 }
 
-#main .entrie ul.tools li {
-    /*display: inline;*/
+#main .entrie .tools + p {
+    min-height: 5.5em;
 }
 
+/*
+#main .entrie .tools li {
+    display: inline;
+}
+*/
+
 .tools {
     float: right;
     text-align: right;
@@ -98,7 +120,8 @@ header h1 {
 }
 
 .tools p {
-    font-size: 0.8em;}
+    font-size: 0.8em;
+}
 
 /*
 .tools ul {
@@ -110,18 +133,18 @@ header h1 {
     line-height: 20px;
 }
 
-.tools a.tool {
+.tools .tool {
     cursor: pointer;
 }*/
 
-#main .entrie .tools a.tool span, #article .tools a.tool span {
+#main .entrie .tools .tool span, #article .tools .tool span {
     display: inline-block;
     width: 16px;
     height: 16px;
-}
-
-#main .entrie .url {
-    font-size: 13px;
+    /* Hide textual content */
+    text-indent: -9999px;
+    text-align: left;
+    overflow: hidden;
 }
 
 
@@ -131,6 +154,11 @@ header h1 {
 #article {
     margin: 0 auto;
 }
+
+#article header, #article article {
+    border-bottom: 1px solid #222;
+}
+
 #article header {
     text-align: left;
 }
@@ -141,7 +169,7 @@ header h1 {
 
 .vieworiginal a, .vieworiginal a:hover, .vieworiginal a:visited {
     text-decoration: none;
-    color: #888888;
+    color: #888;
 }
 
 .backhome {
@@ -151,54 +179,16 @@ header h1 {
 #article .tools {
     position: relative;
     display: inline;
-    top: 0px;
-    right: 0px;
+    top: 0;
+    right: 0;
     width: 100%;
 }
 
-#article .tools ul li{
+#article .tools ul li {
     display: inline;
 }
 
 
-/*** GENERAL ***/
-body {
-    color: #000;
-}
-
-a, a:hover, a:visited {
-    color: #000;
-}
-
-.bouton {
-    background-color: #000;
-    color: #fff;
-    border: none;
-}
-.bouton:hover {
-    background-color: #222222;
-    color: #F1F1F1;
-}
-
-#main ul#links li a.current {
-    background-color: #000;
-    color: #fff;
-}
-
-#links a:hover{
-    background-color: #040707;
-    color: #F1F1F1;
-}
-
-
-/*** ***/
-/*** ARTICLE PAGE ***/
-
-#article header, #article article {
-    border-bottom: 1px solid #222222;
-}
-
-
 /* Pagination */
 .pagination {
     clear: both;
@@ -207,38 +197,63 @@ a, a:hover, a:visited {
     text-align: right;
 }
 .pagination a {
-    border: 1px solid #D5D5D5;
+    border: 1px solid #d5d5d5;
     color: #333;
     font-size: 11px;
     font-weight: bold;
     height: 25px;
     padding: 4px 8px;
     text-decoration: none;
-    margin:2px;
+    margin: 2px;
 }
 .pagination a:hover, .pagination a:active {
-    background:#efefef;
+    background-color: #efefef;
 }
-.pagination span.current {
+.pagination .current {
     background-color: #ccc;
-    border: 1px solid #D5D5D5;
+    border: 1px solid #d5d5d5;
     color: #000;
     font-size: 11px;
     font-weight: bold;
     height: 25px;
     padding: 4px 8px;
     text-decoration: none;
-    margin:2px;
+    margin: 2px;
 }
-.pagination span.disabled {
-    border: 1px solid #EEEEEE;
-    color: #DDDDDD;
-    margin:2px;
+.pagination .disabled {
+    border: 1px solid #eee;
+    color: #ddd;
+    margin: 2px;
     padding: 4px 8px;
     font-size: 11px;
     font-weight: bold;
 }
 
+#bookmarklet {
+    padding: 5px;
+    border: 1px dashed #808080;
+    background: #fff;
+    cursor: move;
+}
+
+.top_link {
+    position: fixed;
+    right: 15px;
+    bottom: 15px;
+    display: none;
+    padding: 20px;
+    background: #ccc;
+    -moz-border-radius: 40px;
+    -webkit-border-radius: 40px;
+    border-radius: 40px;
+    opacity: 0.9;
+    z-index: 2000;
+}
+
 footer {
     clear: both;
-}
\ No newline at end of file
+}
+
+.reading-time {
+    font-size: 0.8em;
+}