Files
myprojplanet_vite/src/components/CCatalogoCard/CCatalogoCard.scss
2024-05-05 19:09:08 +02:00

282 lines
4.8 KiB
SCSS
Executable File

.card .product-image {
height: 300px;
}
.text-title {
font-size: 0.9rem;
}
.centeritems {
place-content: center;
}
.prod_price {
font-size: 1.1rem;
font-style: bold;
@media (max-width: 718px) {
font-size: 1rem;
}
}
.prod_sale_price {
font-size: 1.10rem;
font-style: bold;
@media (max-width: 718px) {
font-size: 1.05rem;
}
}
.prod_off_price {
font-size: 1rem;
@media (max-width: 718px) {
font-size: 0.85rem;
}
color: gray;
text-decoration: line-through;
padding-left: 5px;
}
.prod_disp {
font-size: 1.2rem;
@media (max-width: 718px) {
font-size: 1rem;
}
}
.prod_preorder {
font-size: 1.2rem;
@media (max-width: 718px) {
font-size: 1rem;
}
}
.prod_qtywarn {
padding-left: 10px;
font-size: 1rem;
color: grey;
}
.totali {
font-weight: bold;
font-size: 1.2rem;
}
.prod_sconti {
font-size: 1.1rem;
color: blue;
}
.product_code {
font-size: 0.75rem;
color: gray;
}
.label-qta {
font-size: 1.15rem;
font-weight: bold;
}
.countdown_scadenza {
font-size: 1.15rem;
font-weight: bold;
}
.subtit_prod {
font-style: italic;
}
.icone_prod {
font-size: 1.25rem;
@media (max-width: 718px) {
font-size: 1.15rem;
}
}
.thumbnail {
max-width: 100%;
max-height: 100%;
}
.fullscreen-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
display: flex;
align-items: center;
justify-content: center;
}
.fullscreen-image {
max-width: 100%;
max-height: 100%;
}
.titolo_prod {
cursor: pointer;
}
.image-section {
justify-content: center;
}
.card_titolo_prod {
text-align: center;
padding: 4px 4px 4px 4px;
height: 70px;
}
.image-container {
width: 300px;
height: 300px;
position: relative;
overflow: hidden;
@media (max-width: 718px) {
width: 200px;
height: 200px;
}
}
.book-image-fixed{
max-width: 300px;
max-height: 600px;
}
.img-pic {
width: 100%;
height: 100%;
object-fit: cover;
}
.q-card__section--vert {
padding: 4px;
}
.book-details {
margin: 20px;
}
.book-card {
width: 300px;
background-color: #f8f8f8;
}
.book-card {
width: 300px;
background-color: #f8f8f8;
}
.book-card-section {
display: flex;
}
.book-image {
flex: 1;
}
.book-block {
display: flex;
}
.book-image q-img {
max-width: 100%;
}
.book-info {
padding: 20px;
}
.book-title {
margin: 8px;
font-family: 'Poppins,sans-serif';
font-size: 1.15rem;
line-height: 20px;
font-weight: bold;
color: #333;
display: block;
text-align: center;
}
.book-author {
font-size: 1.1em; /* Dimensione del font leggermente più grande per enfatizzare l'importanza del nome dell'autore */
color: darkblue; /* Colore scuro per garantire una buona leggibilità */
text-transform: capitalize; /* Capitalizzazione delle iniziali per ogni parola del nome */
background-color: #f9f9f9; /* Sfondo leggermente diverso per evidenziare il nome */
border-radius: 2px; /* Bordi arrotondati per un aspetto più soft-edged */
display: inline-block; /* Tratta il blocco come elementi inline-block per adattarlo al contenuto */
font-style: italic; /* Stile del testo in corsivo per evidenziare l'autore */
}
.book-description {
font-size: 0.85rem;
color: #777;
}
.block-variazione {
border: 1px solid gray;
// effetto 3d
box-shadow: 0 0 5px gray;
border-radius: 5px;
padding: 2px;
margin: 2px;
cursor: pointer;
}
.block-variazione-selected {
border: 2px solid red !important;
font-weight: bold;
}
.book-isbn {
font-size: 0.85rem;
color: #A0A0A0;
}
/* Stilizzazione per descrizione breve del libro */
.book-short-descr {
font-size: 1.1em; /* Leggermente più grande per enfatizzare l'importanza */
color: #666; /* Colore del testo in tono grigio scuro per un look sobrio */
padding: 8px; /* Padding per dare spazio intorno al testo */
border-left: 4px solid #007BFF; /* Linea verticale a sinistra come decorazione tradizionale delle citazioni */
margin: 10px 0; /* Margine sopra e sotto per distanziare dalla restante contenuto */
font-style: italic; /* Stile del font in corsivo per indicare che si tratta di un estratto o citazione */
background-color: #f4f4f4; /* Sfondo leggermente diverso per evidenziare la sezione */
display: block; /* Assicura che l'elemento sia trattato come blocco, occupando l'intera larghezza */
text-align: center; /* Giustifica il testo per una lettura più fluida */
}
/* Opzionale: Transizione per l'hover su descrizione */
.book-short-descr:hover {
background-color: #e9e9e9; /* Cambio di sfondo al passaggio del mouse per un effetto interattivo */
}
.ingrandisci:hover {
// fai lo scale
transform: scale(1.1);
}
.title-descr{
font-weight: bold;
font-size: 1.1rem;
text-align: center;
}
.scheda-book {
text-align: center;
margin-left: 20px;
@media (max-width: 718px) {
margin-left: 5px;
}
}