X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/357027375ff8867f42ca34bcbfb5a78b5b185fc3..298a2c3414d84d57ec9e691cfbc6d084530af278:/src/wolnelektury/static/scss/main/book_box.scss?ds=inline

diff --git a/src/wolnelektury/static/scss/main/book_box.scss b/src/wolnelektury/static/scss/main/book_box.scss
old mode 100755
new mode 100644
index d318fda34..b1bfe9341
--- a/src/wolnelektury/static/scss/main/book_box.scss
+++ b/src/wolnelektury/static/scss/main/book_box.scss
@@ -1,543 +1,591 @@
+@import "../tools";
+@import "const";
+
 @mixin inner-box {
-    display: block;
-    color: black;
-    @include size(margin, 1px);
-    @include size(padding, 8px 10px);
-    @include white-box;
+  display: block;
+  color: black;
+  @include size(margin, 1px);
+  @include size(padding, 8px 10px);
+  @include white-box;
 }
 
-
 .cover-area {
-    float: left;
-    @include size(margin-right, 15px);
-    @include size(margin-bottom, 5px);
+  float: left;
+  @include size(margin-right, 15px);
+  @include size(margin-bottom, 5px);
 
-    @include min-screen($S_BOOK_SHORT_FULL) {
-        position: absolute;
-        top: 0;
-        left: 0;
-        margin-right: 0;
-    }
+  @include min-screen($S_BOOK_SHORT_FULL) {
+    //position: absolute;
+    //top: 0;
+    //left: 0;
+    //margin-right: 0;
+  }
 
-    img.cover {
-        @include size(height, 193px / 2);
-        @include size(width, 139px / 2);
+  img.cover {
+    @include size(height, 193px / 2);
+    @include size(width, 139px / 2);
 
-        @include min-screen($S_BOOK_SHORT_MEDIUM) {
-            @include size(height, 193px);
-            @include size(width, 139px);
-        }
+    @include min-screen($S_BOOK_SHORT_MEDIUM) {
+      @include size(height, 193px);
+      @include size(width, 139px);
     }
+  }
 }
 
 .book-mini-box {
-    /* Original design fits 6 boxes horizontally in 975px (162.5px each),
-     * but we really want to fit 2 boxes on a 320px mobile screen. */
+  /* Original design fits 6 boxes horizontally in 975px (162.5px each),
+   * but we really want to fit 2 boxes on a 320px mobile screen. */
 
-    @include size(width, 160px);
-    display: inline-block;
-    vertical-align: top;
+  @include size(width, 160px);
+  display: inline-block;
+  vertical-align: top;
 
-    @include min-screen(350px) {
-        @include size(width, 162.5px);
-    }
+  @include min-screen(350px) {
+    @include size(width, 162.5px);
+  }
 
-    .book-mini-box-inner {
-        @include inner-box;
-        @include size(height, 271px);
-        @include size(margin, 1px);
-        @include size(padding, 8px 9px);
-        overflow: hidden;
-
-        @include min-screen(350px) {
-            @include size(padding, 8px 10px);
-        }
+  .book-mini-box-inner {
+    @include inner-box;
+    @include size(height, 271px);
+    @include size(margin, 1px);
+    @include size(padding, 8px 9px);
+    overflow: hidden;
 
-        a {
-            display: block;
-        }
-    }
-    img.cover {
-        @include size(height, 193px);
-        @include size(width, 139px);
-        @include size(margin-bottom, 18px);
-    }
-    .language {
-        color: #aaa;
-        float: right;
-        @include mono;
-        @include size(font-size, 10px);
-        text-transform: uppercase;
-        position: relative;
-        @include size(top, -20px);
-    }
-    .desc {
-        margin-left: 0;
-    }
-    .author {
-        @include size(font-size, 11px);
-        @include mono;
-        color: #6d7877;
-        display: block;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+    @include min-screen(350px) {
+      @include size(padding, 8px 10px);
     }
-    .title {
-        @include size(font-size, 14px);
-        color: #242424;
+
+    a {
+      display: block;
     }
+  }
+  img.cover {
+    @include size(height, 193px);
+    @include size(width, 139px);
+    @include size(margin-bottom, 18px);
+  }
+  .language {
+    color: #aaa;
+    float: right;
+    @include mono;
+    @include size(font-size, 10px);
+    text-transform: uppercase;
+    position: relative;
+    @include size(top, -20px);
+  }
+  .desc {
+    margin-left: 0;
+  }
+  .author {
+    @include size(font-size, 11px);
+    @include mono;
+    color: #6d7877;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .title {
+    @include size(font-size, 14px);
+    color: #242424;
+    white-space: normal;
+  }
 }
 
-
-
 .work-list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
+  margin: 0;
+  padding: 0;
+  list-style: none;
 
-    .Book-item {
-        @include min-screen($S_BOOK_SHORT_FULL) {
-            display: inline-block;
-        }
-        vertical-align: top;
+  .Book-item {
+    /*@include min-screen($S_BOOK_SHORT_FULL) {
+        display: inline-block;
     }
+    vertical-align: top;*/
+  }
 }
 
+#books-list .plain-list-container .plain-list {
+  p {
+    line-height: 1.2em;
+    margin-bottom: 20px;
+    &.header {
+      font-weight: bold;
+    }
+  }
+}
 
 .book-box {
-    margin: 0;
-    vertical-align: top;
+  margin: 0;
+  vertical-align: top;
 
-    /* */
-    a {
-        color: #0D7E85;
-    }
-
-    @include min-screen($S_BOOK_SHORT_FULL) {
-        @include size(width, $W_BOOK_SHORT_FULL);
-    }
+  /* */
+  a {
+    color: #0D7E85;
+  }
 
-    .book-box-inner {
-        position: relative;
-        @include inner-box;
-        @include size(min-height, 197.5px);
-    }
+  .book-box-inner {
+    position: relative;
+    @include inner-box;
+    @include size(min-height, 197.5px);
+  }
 }
 
+.audiobook-box, .search-result .book-box {
+  .book-left-column {
+    @media screen and (min-width: 1024px) {
+      display: inline-block;
+      @include size(width, 590px);
+      @include size(min-height, 196px);
+    }
+  }
 
-.book-wide-box {
-    margin: 0;
-    vertical-align: top;
-
-    @media screen and (min-width: 62.5em) {
-        @include size(width, 975px);
+  .book-right-column {
+    @media screen and (min-width: 1024px) {
+      float: right;
+      @include size(padding-top, 15px);
+      @include size(width, 360px);
     }
+  }
 
-    .book-box-inner {
-        position: relative;
-        @include size(min-height, 244px);
-        @include inner-box;
-        @include size(margin-left, 0);
-        @include size(margin-right, 0);
+    .license-icon {
+      display: block;
+      @include size(margin-top, 5px);
+    }
 
-        .book-left-column { /* FIXME */
-            @media screen and (min-width: 62.5em) {
-                float: left;
-                @include size(width, 536px);
-            }
-        }
+    .project-icon {
+      @include size(max-width, 100px);
+      @include size(max-height, 100px);
+    }
 
-        .license-icon {
-            display: block;
-            @include size(margin-top, 5px);
-        }
 
-        @include min-screen($S_BOOK_SHORT_FULL) {
-             // Show full title on the work's page.
+  .jp-type-playlist {
+    margin-top: 24px;
 
-            .book-box-body {
-                height: auto;
-                @include size(min-height, 170px);
+    @media screen and (min-width: 1024px) {
+      float: right;
+    }
+  }
+}
 
-                .book-box-head .title {
-                    height: auto;
-                    @include size(min-height, 57.6px);
-                }
-            }
-        }
+.book-wide-box {
+  margin: 0;
+  vertical-align: top;
 
-        .book-box-head,
-        .tags,
-        .book-box-tools {
-            @media screen and (min-width: 62.5em) {
-                @include size(width, 382px);
-            }
-        }
+  @media screen and (min-width: 62.5em) {
+    @include size(width, 975px);
+  }
 
-        #theme-list-wrapper {
-            @include min-screen($S_BOOK_SHORT_MEDIUM) {
-                @include size(margin-left, 154px);
-                @include size(width, 300px);
-            }
-            margin-bottom: 0;
-
-            p {
-                @include size(margin-top, 10px);
-                @include size(margin-bottom, 10px);
-            }
-        }
+  .book-box-inner {
+    position: relative;
+    @include size(min-height, 244px);
+    @include inner-box;
+    @include size(margin-left, 0);
+    @include size(margin-right, 0);
+
+    .book-left-column { /* FIXME */
+      @media screen and (min-width: 62.5em) {
+        float: left;
+        @include size(width, 536px);
+        @include size(min-height, 196px);
+      }
+    }
 
-        .right-column {
-            @include size(margin-top, 16px);
-            // Eat the padding
-            @include size(margin-left, -10px);
-            @include size(margin-right, -10px);
-            max-width: none;
-
-            @media screen and (min-width: 62.5em) {
-                @include size(width, 415px);
-                // Eat the padding
-                @include size(margin-top, -8px);
-            }
-
-            .other-tools,
-            .other-download {
-                @include size(font-size, 11px);
-                clear: left;
-                @include size(margin-top, 25px);
-                line-height: 1.75em;
-                @include size(margin-left, 15px);
-
-                h2 {
-                    margin: 0;
-                    @include size(font-size, 11px);
-                    @include mono;
-                }
-
-                @include min-screen($S_BOOK_SHORT_FULL) {
-                    float: left;
-                    clear: none;
-                    @include size(width, 145px);
-                    @include size(margin-top, 50px);
-                    @include size(margin-right, 0);
-                    @include size(margin-bottom, 0);
-                    @include size(margin-left, 5px);
-                }
-
-                @include min-screen(1000px) {
-                    @include size(margin-top, 50px);
-                    line-height: 1.2em;
-                }
-            }
-            .other-download {
-                @include min-screen($S_BOOK_SHORT_FULL) {
-                    @include size(margin-left, 15px);
-                    @include size(width, 220px);
-                }
-            }
-        }
+    .license-icon {
+      display: block;
+      @include size(margin-top, 5px);
     }
-}
 
-@media screen and (min-width: 50em) {
-    .picture.book-wide-box .right-column {
-        float: none;
-        @include size(width, 415px);
-        top: 0;
-        @include size(margin-left, 550px);
-        margin-top: 0em;
+    .project-icon {
+      @include size(max-width, 100px);
+      @include size(max-height, 100px);
     }
-}
 
 
-.book-box-body {
-    @include size(margin-bottom, 10px);
     @include min-screen($S_BOOK_SHORT_FULL) {
-        margin-bottom: 0;
-        @include size(height, 170px);
+      // Show full title on the work's page.
+
+      .book-box-body {
+        height: auto;
+        @include size(min-height, 170px);
+
+        .book-box-head .title {
+          height: auto;
+          @include size(min-height, 57.6px);
+        }
+      }
     }
-    position: relative;
 
     .book-box-head,
     .tags,
     .book-box-tools {
-        @include min-screen($S_BOOK_SHORT_FULL) {
-            margin-left: 154px;
-        }
+      @media screen and (min-width: 62.5em) {
+        @include size(width, 382px);
+      }
     }
 
-    .book-box-head {
-        @include size(padding-top, 14px);
+    #theme-list-wrapper {
+      @include min-screen($S_BOOK_SHORT_MEDIUM) {
+        @include size(margin-left, 154px);
+        @include size(width, 300px);
+      }
+      margin-bottom: 0;
+
+      p {
+        @include size(margin-top, 10px);
         @include size(margin-bottom, 10px);
+      }
+    }
 
-        @include min-screen($S_BOOK_SHORT_FULL) {
-            @include size(min-height, 70px);
+    .right-column {
+      @include size(margin-top, 16px);
+      // Eat the padding
+      @include size(margin-left, -10px);
+      @include size(margin-right, -10px);
+      max-width: none;
+
+      @media screen and (min-width: 62.5em) {
+        @include size(width, 415px);
+        // Eat the padding
+        @include size(margin-top, -8px);
+      }
+
+      .other-tools,
+      .other-download {
+        @include size(font-size, 11px);
+        clear: left;
+        @include size(margin-top, 25px);
+        line-height: 1.75em;
+        @include size(margin-left, 15px);
+
+        h2 {
+          margin: 0;
+          @include size(font-size, 11px);
+          @include mono;
         }
 
-        a {
-            color: black;
+        @include min-screen($S_BOOK_SHORT_FULL) {
+          float: left;
+          clear: none;
+          @include size(width, 145px);
+          @include size(margin-top, 50px);
+          @include size(margin-right, 0);
+          @include size(margin-bottom, 0);
+          @include size(margin-left, 5px);
         }
-        .author {
-            @include size(font-size, 11px);
-            @include mono;
-            @include size(line-height, 13.2px);
-            @include size(max-height, 26.4px);
-            overflow: hidden;
-
-            @include min-screen($S_BOOK_SHORT_FULL) {
-                @include size(max-width, 264px);
-            }
+
+        @include min-screen(1000px) {
+          @include size(margin-top, 50px);
+          line-height: 1.2em;
         }
-        .title {
-            @include size(font-size, 24px);
-            line-height: 1.2em;
-            @include size(margin-top, 7.2px);
-            @include size(margin-bottom, 12px);
-
-            @include min-screen($S_BOOK_SHORT_FULL) {
-                margin-bottom: 0;
-                @include size(height, 57.6px);
-                overflow: hidden;
-            }
+      }
+      .other-download {
+        @include min-screen($S_BOOK_SHORT_FULL) {
+          @include size(margin-left, 15px);
+          @include size(width, 220px);
         }
+      }
     }
+  }
 
-    .tags {
-        @include size(font-size, 11px);
-        line-height: 1.2em;
-        margin-bottom: 5px;
+  .jp-type-playlist {
+    margin-top: 24px;
+    margin-left: 0.625rem;
 
-        @include min-screen($S_BOOK_SHORT_FULL) {
-            clear: right;
-            @include size(max-height, 57.6px);
-            overflow: hidden;
-        }
+    @media screen and (min-width: 1024px) {
+      float: right;
+      margin-right: 0.625rem;
+    }
+  }
 
-        .category {
-            display: block;
-            @include size(margin-top, 6px);
-            @include size(margin-bottom, 6px);
+}
 
-            @include min-screen($S_BOOK_SHORT_FULL) {
-                display: inline;
-            }
+@media screen and (min-width: 50em) {
+  .picture.book-wide-box .right-column {
+    float: none;
+    @include size(width, 415px);
+    top: 0;
+    @include size(margin-left, 550px);
+    margin-top: 0;
+  }
+}
 
-            .mono {
-                @include mono;
-            }
+.book-box-body {
+  @include size(margin-bottom, 10px);
+  position: relative;
 
-            .book-box-tag {
-                @include size(margin-left, 4.4px);
-                @include size(margin-right, 5.5px);
-            }
-        }
+  .book-box-head,
+  .tags,
+  .book-box-tools,
+  .abstract {
+    @include min-screen($S_BOOK_SHORT_FULL) {
+      margin-left: 154px;
     }
+  }
 
-}
+  .book-box-head {
+    @include size(padding-top, 14px);
+    @include size(margin-bottom, 10px);
 
+    @include min-screen($S_BOOK_SHORT_FULL) {
+      @include size(min-height, 70px);
+    }
 
+    .author {
+      @include size(font-size, 11px);
+      @include mono;
+      @include size(line-height, 13.2px);
+      @include size(max-height, 26.4px);
+      overflow: hidden;
+
+      @include min-screen($S_BOOK_SHORT_FULL) {
+        @include size(max-width, 264px);
+      }
+    }
+    .title {
+      @include size(font-size, 24px);
+      line-height: 1.2em;
+      @include size(margin-top, 7.2px);
+      @include size(margin-bottom, 12px);
 
-.book-box-tools {
-    @include size(font-size, 11px);
-    margin: 0;
-    padding: 0;
-    list-style: none;
+      @include min-screen($S_BOOK_SHORT_FULL) {
+        margin-bottom: 0;
+        @include size(height, 57.6px);
+        overflow: hidden;
+      }
 
-    clear: left;
+      a {
+	color: black;
+      }
+    }
+  }
 
-    @include min-screen($S_BOOK_SHORT_MEDIUM) {
-        clear: none;
-        @include size(margin-left, 139px + 15px);
+  .tags {
+    @include size(font-size, 11px);
+    line-height: 1.2em;
+    margin-bottom: 5px;
+
+    @include min-screen($S_BOOK_SHORT_FULL) {
+      @include size(max-height, 57.6px);
+      overflow: hidden;
     }
 
-    li {
+    .category {
+      display: block;
+      @include size(margin-top, 6px);
+      @include size(margin-bottom, 6px);
+
+      @include min-screen($S_BOOK_SHORT_FULL) {
+        display: inline-block;
+        @include size(margin-top, 0px);
+        @include size(margin-bottom, 0px);
+        @include size(margin-right, 9px);
+      }
+
+      .mono {
         @include mono;
-        margin-top: 1em;
+      }
 
-        @include min-screen($S_BOOK_SHORT_FULL) {
-            display: inline-block;
-            margin-top: 0;
-        }
+      .book-box-tag {
+        @include size(margin-left, 4.4px);
+        @include size(margin-right, 5.5px);
+      }
     }
+  }
 
-    .book-box-read {
-        @include min-screen($S_BOOK_SHORT_FULL) {
-            @include size(width, 126.5px);
-        }
+}
 
-        a {
-            @include mono;
-        }
+.book-box-tools {
+  @include size(font-size, 11px);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  clear: left;
+
+  @include min-screen($S_BOOK_SHORT_MEDIUM) {
+    clear: none;
+    @include size(margin-left, 139px + 15px);
+  }
+
+  &.book-box-tools-warn {
+     font-size: 1rem;
+     margin-bottom: 1em;
+     max-width: 32em;
+     border: 3px solid #9ACD32;
+     padding: 1em;
+     box-sizing: border-box;
+  }
+
+
+  li {
+    @include mono;
+    margin-top: 0;
+  }
+
+  .book-box-read {
+    a {
+      @include mono;
+      display: inline-block;
+      background: #0D7E85;
+      color: white;
+      @include size(width, 170px);
+      text-align: center;
+      @include size(margin-bottom, 5px);
+      @include  size(margin-right, 30px);
+    }
+    a.print {
+      margin-right: 0;
+    }
 
-        a:before {
-            content: url("/static/img/read.png");
-            @include size(font-size, 25px);
-            @include size(margin-right, 3.71px);
-            vertical-align: middle;
-            font-weight: normal;
-        }
+    a:before {
+      content: url("/static/img/read-white.png");
+      @include size(font-size, 25px);
+      @include size(margin-right, 3.71px);
+      vertical-align: middle;
+      font-weight: normal;
+      // ugly quick fix
+      position: relative;
+      bottom: 2px;
     }
 
-    .book-box-download {
-        position: relative;
+    a.print:before {
+      content: "";
+    }
+  }
 
-        @include min-screen($S_BOOK_SHORT_FULL) {
-            @include size(width, 93.5px);
-        }
+  .book-box-download {
+    position: relative;
 
-        a {
-            position: relative;
-            z-index: 101;
-
-            @mixin downarrow {
-                color: #0D7E85;
-
-                &:before {
-                    content: url("/static/img/download.png");
-                    @include size(font-size, 25px);
-                    @include size(margin-right, 3.71px);
-                    vertical-align: middle;
-                    font-weight: normal;
-                    display: inline;
-                }
-            }
-
-            &.downarrow {
-                @include downarrow;
-                &.hoverclick {
-                    color: black;
-                    &:before {
-                        display: none;
-                    }
-
-                    @include min-screen($S_BOOK_SHORT_FULL) {
-                        @include downarrow;
-                    }
-                }
-            }
-        }
+    a {
+      @mixin downarrow {
+        color: #0D7E85;
 
-        .book-box-formats {
-            @include size(padding-left, 19px);
-
-            @include min-screen($S_BOOK_SHORT_FULL) {
-                display: none;
-                position: absolute;
-
-                @include size(width, 180px);
-                @include size(padding-top, 38px);
-                @include size(padding-bottom, 9px);
-                @include size(padding-left, 19px);
-                @include size(padding-right, 19px);
-
-                @include white-box;
-
-                z-index: 100;
-
-                @include size(top, -16px);
-                @include size(left, -19px);
-            }
-
-            span {
-                display: block;
-                @include size(margin-top, 16px);
-
-                a {
-                    &:before {
-                        content: url("/static/img/download.png");
-                        @include size(font-size, 25px);
-                        @include size(margin-right, 3.71px);
-                        vertical-align: middle;
-                        font-weight: normal;
-                    }
-                }
-
-                @include min-screen($S_BOOK_SHORT_FULL) {
-                    @include size(margin-top, 0);
-
-                    &:first-child {
-                        @include size(margin-top, 16px);
-                    }
-                    a:before {
-                        display:none;
-                    }
-                }
-            }
+        &:before {
+          content: url("/static/img/download.png");
+          @include size(font-size, 25px);
+          @include size(margin-right, 3.71px);
+          vertical-align: middle;
+          font-weight: normal;
+          display: inline;
         }
+      }
 
-        &:hover .book-box-formats,
-        &.hover .book-box-formats {
-            display: block;
-        }
+      &.downarrow {
+        @include downarrow;
+      }
     }
 
-    .book-box-audiobook {
-        @include min-screen($S_BOOK_SHORT_FULL) {
-            @include size(width, 77px);
-        }
-
-        a:before {
-            content: url("/static/img/listen.png");
-            @include size(font-size, 25px);
-            @include size(margin-right, 3.71px);
-            vertical-align: middle;
-            font-weight: normal;
-        }
-
+    .book-box-formats {
+      max-width: 300px;
+      vertical-align: top;
+      padding-top: 6px;
+      border-collapse: collapse;
+
+      a {
+        display: table-cell;
+        @include size(padding, .2em 1em);
+        border:1px solid black;
+        line-height: 20px;
+      }
     }
+  }
 }
 
-
-
-
 .star {
-    @include size(font-size, 22.5px);
-    @include size(margin-right, 11.25px);
-    position: absolute;
-    right: 0;
-
-    button::-moz-focus-inner {
-        padding: 0;
-        border: 0
-    }
-    .if-unlike button {
-        font-size: 1em;
-        font-family: inherit;
-        border: 0;
-        background: none;
-        margin: 0;
-        padding: 0;
-        color: #757575;
-    }
-    .if-like a {
-        display:block;
-        text-align:right;
-        padding: 0;
+  @include size(font-size, 22.5px);
+  @include size(margin-right, 11.25px);
+  position: absolute;
+  right: 0;
+  z-index: 10;
+
+  button {
+    cursor: pointer;
+    &::-moz-focus-inner {
+      padding: 0;
+      border: 0
     }
+  }
+  .if-unlike button {
+    font-size: 1em;
+    font-family: inherit;
+    border: 0;
+    background: none;
+    margin: 0;
+    padding: 0;
+    color: #757575;
+  }
+  .if-like a {
+    display: block;
+    text-align: right;
+    padding: 0;
+  }
 }
+
 .like .if-unlike {
-    display: none;
+  display: none;
 }
+
 .unlike .if-like {
-    display: none;
+  display: none;
 }
 
-
 #book-detail .see-also,
 #picture-detail .see-also {
-    h1 {
-        @include size(height, 32px);
-        margin: 0;
-        @include size(padding-top, 19px);
-        @include size(padding-left, 10px);
+  display: inline-block;
+  h1 {
+    @include size(height, 32px);
+    margin: 0;
+    @include size(padding-top, 19px);
+    @include size(padding-left, 10px);
 
-        @include size(font-size, 11px);
-        @include mono;
-        font-weight: normal;
+    @include size(font-size, 11px);
+    @include mono;
+    font-weight: normal;
 
-        @media screen and (min-width: 33em) {
-            @include size(padding-left, 19px);
-        }
+    @media screen and (min-width: 33em) {
+      @include size(padding-left, 19px);
+    }
+  }
+}
+
+.abstract {
+  @include size(font-size, 16px);
+  line-height: 1.2em;
+  @include size(margin-bottom, 8px);
+  @include size(margin-top, 18px);
+  overflow: hidden;
+  position: relative;
+  clear: left;
+
+  @media screen and (min-width: 62.5em) {
+    @include size(width, 536px);
+  }
+
+  p.paragraph {
+    margin-bottom: 0;
+    margin-top: 1.2em;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  &.short {
+    height: 3.6em;
+    &:after {
+       content:' ';
+       position:absolute;
+       bottom:0;
+       width:25%;
+       height:20px;
+       background-color:transparent;
+       /* assume ltr */
+       right:0;
+       background-image:-webkit-linear-gradient(to right,rgba(255,255,255,0),#ffffff 50%);
+       background-image:-moz-linear-gradient(to right,rgba(255,255,255,0),#ffffff 50%);
+       background-image:-o-linear-gradient(to right,rgba(255,255,255,0),#ffffff 50%);
+       background-image:linear-gradient(to right,rgba(255,255,255,0),#ffffff 50%)
     }
+  }
 }