Fixes #4274: Fix for logos in player.

[wolnelektury.git] / src / wolnelektury / static / scss / main / book_box.scss

diff --git a/src/wolnelektury/static/scss/main/book_box.scss b/src/wolnelektury/static/scss/main/book_box.scss
old mode 100755 (executable)
new mode 100644 (file)
index c9ccbf2..b1bfe93
--- a/src/wolnelektury/static/scss/main/book_box.scss
+++ b/src/wolnelektury/static/scss/main/book_box.scss
@@ -1,3 +1,6 @@
+@import "../tools";
+@import "const";
+
 @mixin inner-box {
   display: block;
   color: black;
@@ -12,10 +15,10 @@
   @include size(margin-bottom, 5px);
 
   @include min-screen($S_BOOK_SHORT_FULL) {
-    position: absolute;
-    top: 0;
-    left: 0;
-    margin-right: 0;
+    //position: absolute;
+    //top: 0;
+    //left: 0;
+    //margin-right: 0;
   }
 
   img.cover {
@@ -104,7 +107,8 @@
 
 #books-list .plain-list-container .plain-list {
   p {
-    line-height: 1em;
+    line-height: 1.2em;
+    margin-bottom: 20px;
     &.header {
       font-weight: bold;
     }
@@ -127,27 +131,39 @@
   }
 }
 
-.audiobook-box {
+.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);
     }
   }
 
-  .audiobook-right-column {
+  .book-right-column {
     @media screen and (min-width: 1024px) {
       float: right;
+      @include size(padding-top, 15px);
       @include size(width, 360px);
     }
   }
 
+    .license-icon {
+      display: block;
+      @include size(margin-top, 5px);
+    }
+
+    .project-icon {
+      @include size(max-width, 100px);
+      @include size(max-height, 100px);
+    }
+
+
   .jp-type-playlist {
     margin-top: 24px;
 
     @media screen and (min-width: 1024px) {
       float: right;
-      margin-top: 48px;
     }
   }
 }
@@ -171,6 +187,7 @@
       @media screen and (min-width: 62.5em) {
         float: left;
         @include size(width, 536px);
+        @include size(min-height, 196px);
       }
     }
 
@@ -179,6 +196,12 @@
       @include size(margin-top, 5px);
     }
 
+    .project-icon {
+      @include size(max-width, 100px);
+      @include size(max-height, 100px);
+    }
+
+
     @include min-screen($S_BOOK_SHORT_FULL) {
       // Show full title on the work's page.
 
@@ -283,7 +306,7 @@
     @include size(width, 415px);
     top: 0;
     @include size(margin-left, 550px);
-    margin-top: 0em;
+    margin-top: 0;
   }
 }
 
@@ -293,7 +316,8 @@
 
   .book-box-head,
   .tags,
-  .book-box-tools {
+  .book-box-tools,
+  .abstract {
     @include min-screen($S_BOOK_SHORT_FULL) {
       margin-left: 154px;
     }
@@ -307,9 +331,6 @@
       @include size(min-height, 70px);
     }
 
-    a {
-      color: black;
-    }
     .author {
       @include size(font-size, 11px);
       @include mono;
@@ -332,6 +353,10 @@
         @include size(height, 57.6px);
         overflow: hidden;
       }
+
+      a {
+       color: black;
+      }
     }
   }
 
@@ -351,7 +376,10 @@
       @include size(margin-bottom, 6px);
 
       @include min-screen($S_BOOK_SHORT_FULL) {
-        display: inline;
+        display: inline-block;
+        @include size(margin-top, 0px);
+        @include size(margin-bottom, 0px);
+        @include size(margin-right, 9px);
       }
 
       .mono {
@@ -380,6 +408,16 @@
     @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;
@@ -391,9 +429,13 @@
       display: inline-block;
       background: #0D7E85;
       color: white;
-      @include size(width, 200px);
+      @include size(width, 170px);
       text-align: center;
       @include size(margin-bottom, 5px);
+      @include  size(margin-right, 30px);
+    }
+    a.print {
+      margin-right: 0;
     }
 
     a:before {
@@ -402,6 +444,13 @@
       @include size(margin-right, 3.71px);
       vertical-align: middle;
       font-weight: normal;
+      // ugly quick fix
+      position: relative;
+      bottom: 2px;
+    }
+
+    a.print:before {
+      content: "";
     }
   }
 
@@ -428,14 +477,16 @@
     }
 
     .book-box-formats {
-      display: inline-block;
-      max-width: 220px;
+      max-width: 300px;
       vertical-align: top;
       padding-top: 6px;
+      border-collapse: collapse;
 
       a {
-        display: inline-block;
+        display: table-cell;
         @include size(padding, .2em 1em);
+        border:1px solid black;
+        line-height: 20px;
       }
     }
   }
@@ -446,10 +497,14 @@
   @include size(margin-right, 11.25px);
   position: absolute;
   right: 0;
+  z-index: 10;
 
-  button::-moz-focus-inner {
-    padding: 0;
-    border: 0
+  button {
+    cursor: pointer;
+    &::-moz-focus-inner {
+      padding: 0;
+      border: 0
+    }
   }
   .if-unlike button {
     font-size: 1em;
@@ -477,6 +532,7 @@
 
 #book-detail .see-also,
 #picture-detail .see-also {
+  display: inline-block;
   h1 {
     @include size(height, 32px);
     margin: 0;
@@ -492,3 +548,44 @@
     }
   }
 }
+
+.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%)
+    }
+  }
+}