add preview pictures

[github/wallabag/wallabag.git] / src / Wallabag / CoreBundle / Resources / views / themes / material / public / css / main.css

diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css b/src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css
index 0800271371cf7404b00df43331ab8d874f4052b5..5e1ae8bd5a71febb7c660c4eea667a068330565d 100755 (executable)
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css
@@ -4,13 +4,11 @@
    0 = Common
    1 = Nav
    2 = Side-nav
-
-   2 = Layout
-   3 = Pictos
-   4 = Messages
+   3 = Filters slider
+   4 = Cards
    5 = Article
-
    6 = Media queries
+   7 = Others
 
    ========================================================================== */
 
@@ -26,6 +24,20 @@ body {
     background: #f0f0f0;
 }
 
+#warning_message {
+    position: fixed;
+    background-color: #ff6347;
+    z-index: 1000;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    color: #000;
+}
+
+#warning_message a {
+    color: #555;
+}
+
 .border-bottom {
     border-bottom: 1px solid #DDD;
 }
@@ -48,6 +60,16 @@ nav, main, footer {
     margin-bottom: 0;
 }
 
+.pagination li {
+    padding: 0;
+}
+
+.pagination a {
+    padding: 0px 10px;
+    height: 30px;
+    display: block;
+}
+
 .page-footer .footer-copyright p {
     display: inline;
 }
@@ -56,10 +78,18 @@ nav, main, footer {
     display: none;
 }
 
+.picker__date-display {
+    display: none;
+}
+
 /* ==========================================================================
    1 = Nav
    ========================================================================== */
 
+nav input {
+    color: #aaa;
+}
+
 .nav-wrapper .button-collapse {
     padding: 0px 15px;
 }
@@ -69,7 +99,7 @@ nav, main, footer {
 }
 
 .nav-panels {
-    overflov: hidden;
+    overflow: hidden;
 }
 
 .nav-panel-buttom li {
@@ -80,6 +110,54 @@ nav, main, footer {
     float: right;
 }
 
+.nav-panels {
+    transition: background 0.2s ease;
+}
+
+.nav-panel-add .mdi-content-add,
+.nav-panel-search .mdi-action-search,
+.nav-panels .mdi-navigation-close {
+    color: #444 !important;
+}
+
+.nav-panels .action {
+    padding-left: 0.75rem;
+    font-size: 2.1rem;
+    white-space: nowrap;
+}
+
+.nav-panels .input-field input {
+    display: block;
+    line-height: inherit;
+    padding-left: 4rem !important;
+    width: calc(100% - 8rem);
+}
+
+.nav-panels .input-field input:focus {
+    background-color: #fff;
+    border: 0;
+    box-shadow: none;
+    color: #444;
+}
+
+.input-field.nav-panel-add label {
+    left: 1rem;
+}
+
+.input-field.nav-panel-add .mdi-navigation-close {
+    position: absolute;
+    top: 0;
+    right: 1rem;
+    color: transparent;
+    cursor: pointer;
+    font-size: 2rem;
+    transition: .3s color;
+}
+
+#button_filters {
+    display: none;
+}
+
 /* ==========================================================================
    2 = Side-nav
    ========================================================================== */
@@ -117,7 +195,22 @@ nav, main, footer {
 }
 
 /* ==========================================================================
-   3 = Cards
+ * 3 = Filters slider
+ * ========================================================================== */
+
+#filters button {
+    padding: 0px;
+    width: 100%;
+}
+
+.side-nav.fixed.right-aligned {
+    right: -250px;
+    left: auto !important;
+    overflow-y: visible;
+}
+
+/* ==========================================================================
+   4 = Cards
    ========================================================================== */
 
 main #content {
@@ -128,8 +221,13 @@ main ul.row {
     padding: 0px 0.75rem;
 }
 
-main .card .card-content {
-    min-height: 23em;
+.data .card .card-content {
+    height: 22em;
+    overflow: hidden;
+}
+
+img.preview {
+    max-width: 100%;
 }
 
 .card .card-content .card-title {
@@ -150,19 +248,28 @@ main .card .card-content {
     line-height: 24px;
 }
 
-.card .card-action ul.links a {
-    margin-right: 0;
-    margin-left: 15px;
+.card .card-action a {
+    margin: 0;
+}
+
+.settings .div_tabs {
+    padding-bottom: 15px;
+}
+
+.card.sw {
+    max-width: 370px;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 /* ==========================================================================
-   4 = Article
+   5 = Article
    ========================================================================== */
 
 #article {
     font-size: 20px;
     margin: 0px auto;
-    max-width: 30em;
+    max-width: 40em;
 }
 
 .reader-mode {
@@ -174,6 +281,15 @@ main .card .card-content {
     width: 240px !important;
 }
 
+.reader-mode .collapsible-body {
+    height: 0;
+    overflow: hidden;
+}
+
+.reader-mode:hover .collapsible-body {
+    height: auto;
+}
+
 .reader-mode span {
     opacity: 0;
     transition: opacity 0.2s ease;
@@ -183,6 +299,38 @@ main .card .card-content {
     opacity: 1;
 }
 
+.progress {
+    position:fixed;
+    top:0px;
+    width: 100%;
+    height: 3px;
+    margin: 0;
+    z-index: 9999;
+}
+
+#article aside .link {
+    color: #000;
+    font-size: 0.6em;
+    text-decoration: none;
+}
+
+#article aside #list {
+    float: right;
+    margin-right: 15px;
+}
+
+#article aside span a {
+    background-color: #039be5;
+    color: #fff;
+    border-radius: 3px;
+    float: left;
+    font-size: 0.6em;
+    margin-left: 0.5em;
+    margin-bottom: 0.5em;
+    padding: 4px;
+    text-decoration: none;
+}
+
 /* ==========================================================================
    6 = Media queries
    ========================================================================== */
@@ -191,4 +339,63 @@ main .card .card-content {
     header, main, footer {
       padding-left: 0;
     }
+    nav, main, footer {
+        padding-left: 0;
+    }
+    .pagination {
+        width: auto;
+    }
+    .reader-mode {
+        width: 240px !important;
+    }
+    .reader-mode span {
+        opacity: 1;
+    }
   }
+
+@media only screen and (min-width : 993px) and (max-width : 1180px) {
+    .row .col.l1 {
+    width: 25%;
+    margin-left: 0; }
+    .row .col.l2 {
+    width: 33.33333%;
+    margin-left: 0; }
+    .row .col.l3 {
+    width: 41.66667%;
+    margin-left: 0; }
+    .row .col.l4 {
+    width: 50%;
+    margin-left: 0; }
+    .row .col.l5 {
+    width: 58.33333%;
+    margin-left: 0; }
+    .row .col.l6 {
+    width: 66.66667%;
+    margin-left: 0; }
+    .row .col.l7 {
+    width: 75%;
+    margin-left: 0; }
+    .row .col.l8 {
+    width: 83.33333%;
+    margin-left: 0; }
+    .row .col.l9 {
+    width: 91.66667%;
+    margin-left: 0; }
+    .row .col.l10 {
+    width: 100%;
+    margin-left: 0; }
+}
+
+@media only screen and (max-width : 350px) {
+    .nb-results {
+        display: none;
+    }
+}
+/* ==========================================================================
+   7 = Others
+   ========================================================================== */
+
+/* force height on non-input field in the settings page */
+div.settings div.input-field div, div.settings div.input-field ul {
+    margin-top: 40px;
+}