X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=tpl%2Fcss%2Fstyle.css;h=d644814d195a4002cdd015eaf09b1459cc200443;hb=ce4a1dcc193d3124fc51c4942137621d3d806a19;hp=69e374971cfab2c7c6297a016f23a463b008b473;hpb=4f5b44bd3bd490309eb2ba7b44df4769816ba729;p=github%2Fwallabag%2Fwallabag.git

diff --git a/tpl/css/style.css b/tpl/css/style.css
index 69e37497..d644814d 100644
--- a/tpl/css/style.css
+++ b/tpl/css/style.css
@@ -1,102 +1,129 @@
-/*** GENERAL ***/
 body {
-    font: 20px/1.3em Palatino,Georgia,serif;
+    font-size: 16px;
+    font-family: 'Roboto', Verdana, Geneva, sans-serif;
     margin: 10px;
+    color: #000;
 }
 
 header {
     text-align: center;
 }
 
+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;
 }
 
-#main, #article {
-    margin: 0 auto;
-}
-
-#links a, .backhome a, .support a{
+#links a {
     text-decoration: none;
     padding: 5px 10px;
 }
-#links a:hover, .backhome a:hover, .support a:hover{
+#links a:hover {
+    background-color: #040707;
+    color: #F1F1F1;
     -webkit-border-radius: 2px;
     border-radius: 2px;
 }
 
-.support {
-    font-size: 14px;
-}
-
-footer {
-    text-align: right;
-}
-
 /*** ***/
 /*** LINKS DISPLAY ***/
 
-#main a.tool {
+#main .tool {
     text-decoration: none;
     cursor: pointer;
 }
 
-input[type=submit].delete {
-    width : 16px;
-    height :16px;
-    border : none;
-    cursor: pointer;
-    font-size : 0;
-}
-
 #main #content {
     margin-top: 20px;
 }
 
-#main .entrie {
-    padding: 15px;
-    min-height: 8em;
-    border: 1px solid;
+#main #content h2 {
+    font-size: 1.3em;
+    text-decoration: none;
 }
 
-#main .entrie h2 a {
-    text-decoration: none;
+#main #content .entrie {
+    border-bottom: 1px dashed #222;
 }
 
+#main .entrie .tools {
+    list-style-type: none;
+}
+
+#main .entrie .tools + p {
+    min-height: 5.5em;
+}
+
+/*
+#main .entrie .tools li {
+    display: inline;
+}
+*/
+
 .tools {
+    float: right;
     text-align: right;
+    opacity: 0.5;
+}
+
+.tools p {
+    font-size: 0.8em;
 }
 
+/*
 .tools ul {
     padding: 0; margin: 0;
     list-style-type: none;
@@ -106,39 +133,30 @@ input[type=submit].delete {
     line-height: 20px;
 }
 
-.tools a.tool {
+.tools .tool {
     cursor: pointer;
-}
-
-#article .tools {
-    position: relative;
-    display: inline;
-    top: 0px;
-    right: 0px;
-    width: 100%;
-    text-align: left;
-}
-
-#article .tools ul li{
-    display: inline;
-}
+}*/
 
-#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;
 }
 
 
 /*** ***/
 /*** ARTICLE PAGE ***/
 
-body.article {
-    font: 20px/1.3em Palatino,Georgia,serif;
+#article {
+    margin: 0 auto;
+}
+
+#article header, #article article {
+    border-bottom: 1px solid #222;
 }
 
 #article header {
@@ -149,62 +167,107 @@ body.article {
     text-decoration: none;
 }
 
-.vieworiginal a {
+.vieworiginal a, .vieworiginal a:hover, .vieworiginal a:visited {
     text-decoration: none;
+    color: #888;
 }
 
 .backhome {
     display: inline;
 }
 
-/*** ***/
-
-#main
-{
-    max-width: 60em; /* 960 px */
-    margin: 0 auto;
-}
-#content
-{
-    width: 103.125%; /* 990px */
-    overflow: hidden;
-    margin-left: -1.562%; /* 15px */
-    margin-bottom: -1.875em; /* 30px */
+#article .tools {
+    position: relative;
+    display: inline;
+    top: 0;
+    right: 0;
+    width: 100%;
 }
 
-.entrie
-{
-    width: 30.303%; /* 300px */
-    background-color: #fff;
-    float: left;
-    margin: 0 1.515% 1.875em; /* 15px 30px */
+#article .tools ul li {
+    display: inline;
 }
 
-@media only screen and ( max-width: 40em ) /* 640px */
-{
-    .entrie
-    {
-        width: 46.876%; /* 305px */
-        margin-bottom: 0.938em; /* 15px */
-    }
+
+/* Pagination */
+.pagination {
+    clear: both;
+    padding-bottom: 20px;
+    padding-top: 10px;
+    text-align: right;
+}
+.pagination a {
+    border: 1px solid #d5d5d5;
+    color: #333;
+    font-size: 11px;
+    font-weight: bold;
+    height: 25px;
+    padding: 4px 8px;
+    text-decoration: none;
+    margin: 2px;
+}
+.pagination a:hover, .pagination a:active {
+    background-color: #efefef;
+}
+.pagination .current {
+    background-color: #ccc;
+    border: 1px solid #d5d5d5;
+    color: #000;
+    font-size: 11px;
+    font-weight: bold;
+    height: 25px;
+    padding: 4px 8px;
+    text-decoration: none;
+    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;
 }
 
-@media only screen and ( max-width: 20em ) /* 320px */
-{
-    #content
-    {
-        width: 100%;
-        margin-left: 0;
-    }
+footer {
+    clear: both;
+}
 
-    .entrie
-    {
-        width: 100%;
-        margin-left: 0;
-        margin-right: 0;
-    }
+.reading-time {
+    font-size: 0.8em;
 }
 
-.messages {
-    
+#inputform {
+    display: none;
+    text-align:center;
+    max-width:300px;
+    margin-left:auto;
+    margin-right:auto;
+    margin-top:5px;
+    padding-bottom: 5px;
+    background-color: rgba(0, 0, 0, 0.9);
+    opacity:0.8;
+    color:white;
+    border-radius: 3px;
 }
\ No newline at end of file