add evernote icon

[github/wallabag/wallabag.git] / themes / baggy / css / main.css

diff --git a/themes/baggy/css/main.css b/themes/baggy/css/main.css
index 6d320cd2d657b6a108faa4a6213a5500fd97f37d..54622cfcee1c75840dec399b127c3e4db394aa93 100755 (executable)
--- a/themes/baggy/css/main.css
+++ b/themes/baggy/css/main.css
@@ -15,11 +15,11 @@ html {
 }
 
 body {
-  background: #EEE;
+  background-color: #EEE;
 }
 
 .login {
-  background: #333;
+  background-color: #333;
 }
 
 .login #main {
@@ -28,7 +28,7 @@ body {
 }
 
 .login form {
-  background: #FFF;
+  background-color: #FFF;
   padding: 1.5em;
   box-shadow: 0 1px 8px rgba(0,0,0,0.9);
   width: 20em;
@@ -51,7 +51,7 @@ body {
 
 ::selection { 
   color: #FFF;  
-  background: #000;
+  background-color: #000;
 } 
 
 .desktopHide {
@@ -70,7 +70,7 @@ h2, h3, h4 {
   text-transform: uppercase;
 }
 
-p, li {
+p, li, label {
   color: #666;
 }
 
@@ -89,7 +89,7 @@ form fieldset {
   margin: 0;
 }
 
-form input[type="text"], select, form input[type="password"], form input[type="url"] {
+form input[type="text"], select, form input[type="password"], form input[type="url"], form input[type="email"] {
   border: 1px solid #999;
   padding: 0.5em 1em;
   min-width: 12em;
@@ -104,10 +104,6 @@ form input[type="text"], select, form input[type="password"], form input[type="u
   }
 }
 
-fieldset label {
-  min-width: 12.5em;
-}
-
 .inline .row {
   display: inline-block;
   margin-right: 0.5em;
@@ -119,17 +115,21 @@ fieldset label {
 
 fieldset label {
   display: inline-block;
-  margin-right: 0.5em;
+  min-width: 12.5em;
   color: #666;
 }
 
+label {
+  margin-right: 0.5em;
+}
+
 form .row {
   margin-bottom: 0.5em;
 }
 
 form button, input[type="submit"] {
   cursor:pointer;
-  background: #000;
+  background-color: #000;
   color: #FFF;
   border:0;
   padding: 0.5em 1em;
@@ -138,7 +138,7 @@ form button, input[type="submit"] {
 }
 
   form button:hover, form button:focus, input[type="submit"]:hover, input[type="submit"]:focus {
-    background: #FFF;
+    background-color: #FFF;
     color: #000;
     -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
@@ -155,7 +155,7 @@ h2:after {
   content: "";
   height: 4px;
   width: 70px;
-  background: #000;
+  background-color: #000;
   display: block;
 }
 
@@ -176,11 +176,11 @@ h2:after {
   width: 10em;
   left: 0;
   text-align: right;
-  background: #333;
+  background-color: #333;
   padding-top: 9.5em;
   height: 100%;
   box-shadow:inset -4px 0 20px rgba(0,0,0,0.6);
-  z-index: 10;
+  z-index: 15;
 }
 
 #main {
@@ -191,7 +191,7 @@ h2:after {
   padding-bottom: 1em;
 }
 
-  #links a {
+  #links > li > a {
     display: block;
     padding: 0.5em 2em 0.5em 1em;
     color: #FFF;
@@ -207,8 +207,8 @@ h2:after {
           transition: all 0.5s ease;
   }
 
-  #links a:hover, #links a:focus {
-    background: #999;
+  #links > li > a:hover, #links > li > a:focus {
+    background-color: #999;
     color: #000;
   }
 
@@ -281,12 +281,12 @@ h2:after {
 #listmode a:hover {
   opacity: 1;
 }
-.tablemode {
+#listmode.tablemode {
   background-image: url("../img/baggy/table.png");
   background-repeat: no-repeat;
   background-position: bottom;
 }
-.listmode {
+#listmode.listmode {
   background-image: url("../img/baggy/list.png");
   background-repeat: no-repeat;
   background-position: bottom;
@@ -327,15 +327,11 @@ footer a {
   margin-left: 0!important;
 }
 
-.listmode .entrie p {
-  display: none;
-}
-
 .list-entries + .results {
   margin-bottom: 2em;
 }
 
-.estimatedTime a {
+.estimatedTime .reading-time {
   color: #999;
   font-style: italic;
   font-weight: normal;
@@ -348,7 +344,7 @@ footer a {
 }
 
 .entrie {
-  background: #FFF;
+  background-color: #FFF;
   letter-spacing:normal;
   box-shadow: 0 3px 7px rgba(0,0,0,0.3);
   display: inline-block;
@@ -359,11 +355,15 @@ footer a {
   position: relative;
   overflow: hidden;
   padding: 1.5em 1.5em 3em 1.5em;
-  -webkit-transition: all 0.5s ease;
-     -moz-transition: all 0.5s ease;
-      -ms-transition: all 0.5s ease;
-       -o-transition: all 0.5s ease;
-          transition: all 0.5s ease;
+
+       /* Removing CSS transitions because they make the switch from list view to
+        * table view jerky
+        */
+  /* -webkit-transition: all 0.5s ease; */
+  /*    -moz-transition: all 0.5s ease; */
+  /*     -ms-transition: all 0.5s ease; */
+  /*      -o-transition: all 0.5s ease; */
+  /*         transition: all 0.5s ease; */
 }
 
 .entrie:before {
@@ -391,7 +391,7 @@ footer a {
   width: 100%;
   bottom: 0;
   left: 0;
-  background: #000;
+  background-color: #000;
   -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
       -ms-transition: all 0.5s ease;
@@ -418,6 +418,7 @@ footer a {
 .entrie h2 {
   text-transform: none;
   margin-bottom: 0;
+  line-height: 1.2;
 }
 
   .entrie h2:after {
@@ -540,7 +541,7 @@ footer a {
   2.1 = "save a link" related styles
   ========================================================================== */
 
-#bagit-form, #search-form {
+.popup-form {
   background: rgba(0,0,0,0.5);
   position: absolute;
   top: 0;
@@ -549,37 +550,53 @@ footer a {
   height: 100%;
   width: 100%;
   margin: 0;
-  margin-top: -30%;
+  margin-top: -30% !important; /* TODO: get rid of !important here; overridden by .messages selector */
   padding: 2em;
   display: none;
   border-left: 1px #EEE solid;
 }
 
-#bagit-form form, #search-form form {
-  background: #FFF;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 20;
-  border: 10px solid #000;
-  width: 400px;
-  height: 200px;
-  /* margin: -150px 0 0 -300px; */
-  padding: 2em;
+       .popup-form form {
+               background-color: #FFF;
+               position: absolute;
+               top: 0;
+               left: 0;
+               z-index: 20;
+               border: 10px solid #000;
+               width: 400px;
+               height: 200px;
+               padding: 2em;
+       }
+
+#bagit-form-form .addurl {
+       margin-left: 0;
 }
 
-a#bagit-form-close, a#search-form-close {
-  background: #000;
+.closeMessage,
+.close-button {
+  background-color: #000;
   color: #FFF;
-  padding: 0.2em 0.5em;
+       font-size: 1.2em;
+       line-height: 1.6;
+       width: 1.6em;
+       height: 1.6em;
+       text-align: center;
   text-decoration: none;
-  display: inline-block;
-  float: right;
-  font-size: 0.6em;
 }
-a#bagit-form-close:hover, a#search-form-close:hover {
-  background: #999;
-  color: #000;
+       .closeMessage:hover,
+       .closeMessage:focus,
+       .close-button:hover,
+       .close-button:focus {
+               background-color: #999;
+               color: #000;
+       }
+
+.close-button--popup {
+       display: inline-block;
+       position: absolute;
+       top: 0;
+       right: 0;
+       font-size: 1.4em;
 }
 
 .active-current {
@@ -630,57 +647,7 @@ a.add-to-wallabag-link-after:after {
 
 #add-link-result {
   font-weight: bold;
-  margin-top: 10px;
-}
-
-/* ==========================================================================
-  2.2 = "search for articles" popup div related styles
-  ========================================================================== */
-#search-form {
-  background: rgba(0,0,0,0.5);
-  position: absolute;
-  top: 0;
-  left: 10em;
-  z-index: 20;
-  height: 100%;
-  width: 100%;
-  margin: 0;
-  margin-top: -30%;
-  padding: 2em;
-  display: none;
-  border-left: 1px #EEE solid;
-}
-
-#search-form form {
-  background: #FFF;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 20;
-  border: 10px solid #000;
-  width: 400px;
-  height: 200px;
-  /* margin: -150px 0 0 -300px; */
-  padding: 2em;
-}
-
-a#search-form-close {
-  background: #000;
-  color: #FFF;
-  padding: 0.2em 0.5em;
-  text-decoration: none;
-  display: inline-block;
-  float: right;
-  font-size: 1.2em;
-}
-a#search-form-close:hover {
-  background: #999;
-  color: #000;
-}
-
-#submit-search{
-margin-left: 4em;
-margin-top:1em;
+  font-size: 0.9em;
 }
 
 /* ==========================================================================
@@ -690,15 +657,16 @@ margin-top:1em;
 @font-face {
   font-family: 'icomoon';
   src:url('../fonts/icomoon.eot?-s0mcsx');
-  src:url('../fonts/icomoon.eot?#iefix-s0mcsx') format('embedded-opentype'),
-    url('../fonts/icomoon.woff?-s0mcsx') format('woff'),
-    url('../fonts/icomoon.ttf?-s0mcsx') format('truetype'),
-    url('../fonts/icomoon.svg?-s0mcsx#icomoon') format('svg');
+  src:url('../fonts/icomoon.eot?#iefix-s0mcsx')   format('embedded-opentype'),
+      url('../fonts/icomoon.woff?-s0mcsx')        format('woff'),
+      url('../fonts/icomoon.ttf?-s0mcsx')         format('truetype'),
+      url('../fonts/icomoon.svg?-s0mcsx#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }
 
-.icon span {
+.icon span,
+.icon-image span {
   position: absolute;
   top: -9999px;
 }
@@ -768,6 +736,37 @@ margin-top:1em;
 .icon-print:before {
   content: "\e80d";
 }
+.icon-random:before {
+  content: "\e915";
+}
+.icon-reload:before {
+  content: "\ea2e";
+}
+.icon-evernote:before {
+  content: "\e603";
+}
+
+
+/* .icon-image class, for image-based icons
+        ========================================================================== */
+
+.icon-image {
+       background-size: 16px 16px;
+       background-repeat: no-repeat;
+       background-position: center;
+       padding-right: 1em !important;
+       padding-left: 1em !important;
+}
+
+/* Carrot (http://carrot.org) */
+.icon-image--carrot {
+       background-image: url('../../_global/img/icons/carrot-icon--white.png');
+}
+
+/* Diaspora */
+.icon-image--diaspora {
+       background-image: url('../../_global/img/icons/diaspora-icon--black.png');
+}}
 
 /* ==========================================================================
    Icon selected
@@ -777,6 +776,10 @@ margin-top:1em;
   color: #FFF;
 }
 
+.icon-check.archive:before {
+  color: #FFF;
+}
+
 /* ==========================================================================
    4 = Messages
    ========================================================================== */
@@ -788,18 +791,6 @@ margin-top:1em;
 
 .messages > * { display: inline-block;}
 
-.closeMessage {
-  background: #000;
-  color: #FFF;
-  padding: 0.2em 0.5em;
-  text-decoration: none;
-}
-
-  .closeMessage:hover, .closeMessage:focus {
-    background: #FFF;
-    color: #000;
-  }
-
 .warning {
   /* font-size: 3em;
   color: #999;
@@ -816,6 +807,16 @@ margin-top:1em;
   width: 100%;
 }
 
+.more-info {
+       font-size: 0.85em;
+  line-height: 1.5;
+       color: #aaa;
+}
+
+       .more-info a {
+               color: #aaa;
+       }
+
 /* ==========================================================================
    5 = Article
    ========================================================================== */
@@ -836,11 +837,15 @@ margin-top:1em;
 
 blockquote {
   border:1px solid #999;
-  background: #FFF;
+  background-color: #FFF;
   padding: 1em;
   margin: 0;
 }
 
+#article h1 {
+  text-align: left;
+}
+
 #article h2, #article h3, #article h4 {
   text-transform: none;
 }
@@ -865,14 +870,14 @@ blockquote {
 }
 
 #article_toolbar a {
-  background: #000;
+  background-color: #000;
   padding: 0.3em 0.5em 0.2em;
   color: #FFF;
   text-decoration: none;
 }
   
   #article_toolbar a:hover, #article_toolbar a:focus {
-    background: #999;
+    background-color: #999;
   }
 
 .shaarli:before {
@@ -895,7 +900,7 @@ blockquote {
 }
 
 .icon-rss {
-  background: #000;
+  background-color: #000;
   color: #FFF;
   padding: 0.2em 0.5em;
 }
@@ -910,7 +915,7 @@ blockquote {
 }
 
 .list-tags .icon-rss:hover, .list-tags .icon-rss:focus {
-  background: #FFF;
+  background-color: #FFF;
   color: #000;
   text-decoration: none;
 }
@@ -923,6 +928,13 @@ blockquote {
   text-decoration: underline;
 }
 
+pre code {
+               font-family: "Courier New", Courier, monospace;
+               border: 1px solid #ccc;
+               font-size: 0.96em;
+}
+
+
 /* ==========================================================================
    6 = Media Queries
    ========================================================================== */
@@ -964,7 +976,7 @@ blockquote {
     margin-left: 0;
   }
   body > header {
-    background: #333;
+    background-color: #333;
     position: fixed;
     top: 0;
     width: 100%;
@@ -1010,11 +1022,11 @@ blockquote {
     width: 2.5em;
     height: 2.5em;
     cursor: pointer;
-    background: #999;
+    background-color: #999;
     font-size: 1.2em;
   }
     .desktopHide:hover, .desktopHide:focus {
-      background: #FFF;
+      background-color: #FFF;
     }
   #links {
     display: none;
@@ -1022,6 +1034,9 @@ blockquote {
     height: auto;
     padding-top: 3em;
   }
+  #links.menu--open {
+    display: block;
+  }
   footer  {
     position: static;
     margin-right: 3em;
@@ -1051,7 +1066,15 @@ blockquote {
     display: none;
   }
 
-  #bagit-form, #search-form {
+  .popup-form, #bagit-form, #search-form {
     left: 0;
+    width: 100%;
+    border-left: none;
+  }
+
+  .popup-form form,
+  #bagit-form form,
+  #search-form form {
+    width: 100%;
   }
 }