/*TODO: Hintergrundfarben entfernen*/ .hauptcontainer { /*Einzelne Elemente untereinander anzeigen.*/ flex-direction: column; } #searchResult_heading { /* background-color: #70AD47; */ margin-top: 30px; margin-left: 30px; margin-bottom: 25px; margin-right: 50px; font-weight: 500; } /*Container wird mit Daten aus der Datenbank gefüllt.*/ #searchResult_container { padding-left: 45px; padding-right: 50px; padding-bottom: 50px; } .book_container { /* background-color: blueviolet; */ display: flex; /*Einzelne Elemente nebeneinander anzeigen.*/ flex-direction: row; cursor: pointer; } .bookCover_container { /*background-color: blue;*/ display: flex; /*Verbietet dem Container, seine Standardgröße (px) zu ändern.*/ flex: 0 0 150px; align-items: center; height: auto; } .bookCover { /*Bild passt sich seinem Container an.*/ max-width:100%; max-height:100%; } .bookDetails_container { /* background-color: aquamarine; */ width: 100%; display: flex; flex-direction: column; padding-left: 15px; padding-right: 15px; } .bookTitle { margin-bottom: 10px; font-weight: 400; } .bookDetails { margin-bottom: 10px; } .available_container { width: fit-content; /*Hintergrundfarbe wird an Inhalt angepasst.*/ background-color: #70AD47; /*background-color: #F34343;*/ /*Element immer an der unteren Seite des Containers platzieren.*/ margin-top: auto; } .available { color: white; margin: 10px 25px; } .shoppingCart_container { /* background-color: chartreuse; */ margin-left: auto; margin-top: auto; flex: 0 0 40px; } .shoppingCart { background-image: url('pictures/shopping_cart.png'); width: 40px; height: 40px; background-size: contain; background-repeat: no-repeat; } .shoppingCart:hover { background-image: url('pictures/shopping_cart_hover.png'); cursor: pointer; } .bin_container { /* background-color: chartreuse; */ margin-left: auto; margin-top: auto; flex: 0 0 40px; } .bin { background-image: url('pictures/bin.png'); width: 40px; height: 40px; background-size: contain; background-repeat: no-repeat; } .bin:hover { background-image: url('pictures/bin_hover.png'); cursor: pointer; } .extend { background-image: url('pictures/extend.png'); width: 40px; height: 40px; background-size: contain; background-repeat: no-repeat; } .extend:hover { background-image: url('pictures/extend_hover.png'); cursor: pointer; } .placeholder_container { /* background-color: chartreuse; */ margin-left: auto; margin-top: auto; flex: 0 0 40px; } .divider { margin-top: 15px; margin-bottom: 15px; background-color: #987554; width: 100%; height: 1px; }