107 lines
3.4 KiB
SCSS
107 lines
3.4 KiB
SCSS
.translate-y-5 {
|
|
transform: translateY(5px);
|
|
}
|
|
|
|
.image-container {
|
|
display: flex; /* Erlaubt ein flexibles Box-Layout */
|
|
flex-wrap: wrap; /* Erlaubt das Umfließen der Elemente auf die nächste Zeile */
|
|
justify-content: flex-start; /* Startet die Anordnung der Elemente am Anfang des Containers */
|
|
align-items: flex-start; /* Ausrichtung der Elemente am Anfang der Querachse */
|
|
padding: 10px; /* Abstand zwischen den Inhalten des Containers und dessen Rand */
|
|
}
|
|
|
|
.image-container span {
|
|
flex-flow: row;
|
|
display: flex;
|
|
width: fit-content;
|
|
height: fit-content;
|
|
}
|
|
|
|
.image-container span img {
|
|
max-height: 150px; /* Maximale Höhe der Bilder */
|
|
width: auto; /* Die Breite der Bilder passt sich automatisch an die Höhe an */
|
|
cursor: pointer;
|
|
margin: 10px;
|
|
}
|
|
// .image-container fa-icon {
|
|
// top: 0; /* Positioniert das Icon am oberen Rand des Bildes */
|
|
// right: 0; /* Positioniert das Icon am rechten Rand des Bildes */
|
|
// color: #fff; /* Weiße Farbe für das Icon */
|
|
// background-color: rgba(0,0,0,0.5); /* Halbtransparenter Hintergrund für bessere Sichtbarkeit */
|
|
// padding: 5px; /* Ein wenig Platz um das Icon */
|
|
// cursor: pointer; /* Verwandelt den Cursor in eine Hand, um Interaktivität anzudeuten */
|
|
// }
|
|
|
|
.image-wrap {
|
|
position: relative; /* Ermöglicht die absolute Positionierung des Icons bezogen auf diesen Container */
|
|
display: inline-block; /* Erlaubt die Inline-Anordnung, falls mehrere Bilder vorhanden sind */
|
|
}
|
|
|
|
/* Stil für das Bild */
|
|
.image-wrap img {
|
|
max-height: 150px;
|
|
width: auto;
|
|
display: block; /* Verhindert unerwünschten Abstand unter dem Bild */
|
|
}
|
|
|
|
/* Stil für das FontAwesome Icon */
|
|
.image-wrap fa-icon {
|
|
position: absolute;
|
|
top: 15px; /* Positioniert das Icon am oberen Rand des Bildes */
|
|
right: 15px; /* Positioniert das Icon am rechten Rand des Bildes */
|
|
color: #fff; /* Weiße Farbe für das Icon */
|
|
background-color: rgba(0, 0, 0, 0.5); /* Halbtransparenter Hintergrund für bessere Sichtbarkeit */
|
|
padding: 5px; /* Ein wenig Platz um das Icon */
|
|
cursor: pointer; /* Verwandelt den Cursor in eine Hand, um Interaktivität anzudeuten */
|
|
border-radius: 8px; /* Optional: Abrunden der linken unteren Ecke für ästhetische Zwecke */
|
|
}
|
|
|
|
// -------------------------------
|
|
|
|
.grid-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
gap: 16px;
|
|
padding: 16px;
|
|
}
|
|
|
|
.grid-item {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
aspect-ratio: 16 / 9;
|
|
background-color: #f0f0f0;
|
|
border-radius: 8px;
|
|
transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
|
|
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.grid-item:active {
|
|
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.image-box {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cdk-drag-preview {
|
|
box-sizing: border-box;
|
|
border-radius: 4px;
|
|
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.cdk-drag-placeholder {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.cdk-drag-animating {
|
|
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
|
|
.grid-container.cdk-drop-list-dragging .grid-item:not(.cdk-drag-placeholder) {
|
|
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
|
}
|