попа

mirzaev/surikovlib/system/public/css/books.css

@@ -26,6 +26,50 @@ main>section#books>article.book {
     margin-right: 20px;
     display: flex;
     flex-direction: column;
+    border-radius: 3px;
+    overflow: hidden;
+    background: #b38b8b;
+    transition: .1s ease-in-out;
+    font-weight: 900;
+}
+
+main>section#books>article.book:hover {
+    scale: 1.05;
+    z-index: 1000;
+}
+
+main>section#books>article.book>button {
+    position: absolute;
+    display: flex;
+    top: 10px;
+    right: 10px;
+    width: 25px;
+    height: 25px;
+    flex-direction: column;
+    justify-content: center;
+    font-size: 110%;
+    opacity: 0;
+    pointer-events: none;
+    border-radius: 3px;
+    border: none;
+    color: #ff5757;
+    background-color: rgba(0, 0, 0, .5);
+}
+
+main>section#books>article.book:hover>button {
+    opacity: 1;
+    pointer-events: all;
+    transition: .2s ease-in-out;
+}
+
+main>section#books>article.book>button:hover {
+    color: #ff6b6b;
+    background-color: rgba(0, 0, 0, .4);
+}
+
+main>section#books>article.book>button:active {
+    color: #e04d4d;
+    background-color: rgba(0, 0, 0, .6);
 }
 
 main>section#books>article.book:nth-child(3n) {
@@ -42,7 +86,8 @@ main>section#books>article.book>img {
     height: 100%;
     object-fit: cover;
     object-position: right;
-    overflow: hidden;
+    text-align: center;
+    /* overflow: hidden; */
     /* clip-path: polygon(5px calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 5px, 5px 5px); */
 }
 
@@ -58,8 +103,16 @@ main>section#books>article.book>h4 {
     -moz-hyphens: auto;
     -ms-hyphens: auto;
     hyphens: auto;
+    color: #e8e8e8;
+    background-color: rgba(0, 0, 0, .5);
+}
+
+main>section#books>article.book>h4:hover {
     color: #fff;
-    background: rgba(0, 0, 0, 50%);
+}
+
+main>section#books>article.book>h4:active {
+    color: #e7e4e4;
 }
 
 main>section#books>article.book>p {
@@ -96,11 +149,35 @@ main>section#book>nav>ul>li:only-of-type {
     margin-right: auto;
 }
 
-main>section#book>nav>ul>li.previous {
-    margin-left: auto;
+
+main>section#book>nav>ul>li {
     margin-right: 15px;
 }
 
+main>section#book>nav>ul>li:first-of-type,
+main>section#book>nav>ul>li.previous {
+    margin-left: auto;
+}
+
+main>section#book>nav>ul>li:last-of-type,
 main>section#book>nav>ul>li.next {
     margin-right: auto;
 }
+
+main>section#book>nav>ul>li.icon {
+    display: flex;
+}
+
+main>section#book>nav>ul>li.icon>i {
+    height: 1rem;
+    margin: auto;
+    color: #9b3d10;
+}
+
+main>section#book>nav>ul>li.icon>i:hover {
+    color: #bd4f1c;
+}
+
+main>section#book>nav>ul>li.icon>i:active {
+    color: #813410;
+}