X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/64cf4d889127d7dc3ea893e8a27711468276dc47..e9f9c3887d9c9e45401257a78d3182f17a5a8146:/apps/wolnelektury_core/static/scss/funding/funding.scss

diff --git a/apps/wolnelektury_core/static/scss/funding/funding.scss b/apps/wolnelektury_core/static/scss/funding/funding.scss
index 61a48d681..3b63e2037 100644
--- a/apps/wolnelektury_core/static/scss/funding/funding.scss
+++ b/apps/wolnelektury_core/static/scss/funding/funding.scss
@@ -4,7 +4,12 @@
     @include size(padding, 5px 0);
     position: relative;
     .close {
-        @include size(font-size, 10px);
+        @include mono;
+        @include size(font-size, 16px);
+        position: absolute;
+        top: 0px;
+        right: 0;
+        @include size(padding, 1px 5px 10px 10px);
     }
     .call-area {
         float:left;
@@ -16,19 +21,28 @@
         @include size(padding, 5.25px 7.5px);
         @include size(margin, 7.5px);
         display: inline-block;
-        vertical-align: top;
+        vertical-align: middle;
         text-align: center;
 
         background: lighten(#018189, .05);
         @include size(width, 135px);
+
+        @include min-screen(420px) {
+            vertical-align: top;
+        }
     }
     .learn-more {
         text-align: center;
         margin: auto;
         @include size(font-size, 10px);
         padding: .5em;
+        
+        @include min-screen(300px) {
+            display: inline;
+        }
         @include min-screen(420px) {
             padding: 0;
+            display: block;
         }
     }
     .description {
@@ -53,8 +67,42 @@
         @include size(border-radius, 20px);
         background-image: url(/static/img/progress-pixel.png);
         background-repeat: repeat-y;
-        background-color: mix(#ec6d00, orange, .5);
+        background-color: #F68900;
         @include box-shadow(1px 1px 1px #888);
+
+        .progress-collected {
+            float:left;
+            &:after {
+                content: " / ";
+            }
+            @include min-screen(500px) {
+                &:after {
+                    content: none;
+                }
+            }
+        }
+        .progress-target {
+            float: left;
+            padding-left: 0;
+            @include min-screen(500px) {
+                float: right;
+                @include size(padding-left, 6px);
+            }
+        }
+        .progress-extralabel {
+            display: none;
+            @include min-screen(500px) {
+                display: inline;
+            }
+        }
+        .progress-until {
+            display: inline-block;
+            margin-right: 0em;
+            text-align: right;
+            @include min-screen(500px) {
+                text-align: center;
+            }
+        }
     }
     .with-button {
         clear: left;
@@ -66,17 +114,16 @@
 
     .funding-title {
         @include size(font-size, 11px);
+        display: block;
+        @include min-screen(640px) {
+            display: inline;
+        }
     }
     .funding-title-strong {
         @extend .funding-title;
         font-weight: bold;
         @include size(font-size, 15px);
     }
-    .close {
-        position: absolute;
-        top: 0px;
-        @include size(right, 5px);
-    }
 }
 
 .funding-top-header {
@@ -148,7 +195,10 @@
     }
 }
 
-.funding-handle {
+#funding-closeable {
+    display: none;
+}
+#funding-handle {
     position: absolute;
     top: 0;
     right: 0;