/* CSS Document */
body, html {
display: contents; /* ishte flex, por ndoshta me mire contents */
height: 100%; /*ishte 100% duhet 100% sepse zvogelon webpage*/
align-items: center; /* ishte center */
background-color: #646464; /* ishte #f0f0f0 */
/*pading nuk duhen*/
/* margin: 0%; /* ishte 0 */
/*padding: 0%; /* ishte 0 orig */
/*padding-left: 0%; /*e shtova un ishte 1% */
/*padding-right: 0%; /*e shtova un ishte 1% */
/*padding-top: 0%; /*e shtova un ishte 1% */
/*padding-bottom: 0%;/*e shtova un ishte 1% */
/*justify-content: center; /* ishte center */
/* border: 20%;/**/
/*border: #E0FF00;/**/
}
/*shtuar per te ber fullscreen me doubleclick */
.main-image.fullscreen {
position: fixed; /*ishte absolute*/
top: 0%; /*ishte 20% */
left: 0; /*ishte 0 */
width: 100%; /*ishte 100% */
height: 100%; /*ishte 100%*/
max-width: none; /*ishte none */
}
.hover-thumbnail {
background-color: red;
transform: scale(1.1);
align-content: center;
width: 100px;
height: 100px;
margin-left: 2.5%;
margin-right: 2.5%;
margin-top: 2%;
margin-bottom: 1%;
border: 60px;
border-style: dotted;
border-radius: 60px;/*berder-radius i ben te 4tra cepat njelloje*/
}
.selected-thumbnail {
background-color: black;
transform: scale(0.8);
}
/* ///////////////////////////////////////// */
.thumbnail-gallery-container {/*containeri ku rrinethumbnail me fotot edhe fotoja main photo e te gjitha */
background-color: #f0f0f0; /*e shtova */
/* left: 10%;*/
/*align-items: center;*/
align: center;/* e shtova une*/
/*border-bottom-right-radius: 50%; /* shtova un borderin majtas container */
display: flex; /* ishte flex */
width: 100%; /*ishte 100% e duhet keshtu 100%*/
height: 100%; /*ishte 100% e duhet te rrije keshtu 100 si per thumbnail edhe per mainPhoto*/
overflow: auto; /*ishte hidden*/
}
/*eshte po containeri ku rrine fotot e thumbnail edhe main foto place svogelohet*/
.thumbnail-gallery {
background-color: #49A636; /* e shtova jeshile*/
/* width: 20%; /* ishte 20% */
width: 146px; /* ishte 20% */
height: 100%;/*ishte 100% lartesia te scrollduhet 100%*/
overflow-y: scroll; /* ishte scroll */
}
.thumbnail-gallery img {
align-content: center;
width: 100px;/*ishte 100%*/
height: 100px;/*nuk ishte e shtova une 20% lartesia e fotos ne thumbnail container*/
/* Duhen marginat ketu*/
margin-left: 2.5%;/*ishte 10px hapsira si border majtas fotos nga parent kur scroll verticale*/
margin-right: 2.5%;/*e shtova un borederi djathtas fotos mbifoton tjeter pash foto1 ! foto2*/
margin-top: 2%;/*ishte 10px hapsira nga foto ne fot te scroll verticale*/
margin-bottom: 1%;/*ishte 10px hapsira nga foto ne fot te scroll verticale*/
transition: transform 0.7s, border 1s;/**/
border: #E50509;
border-bottom-width: medium;
border-style: dotted;
border-color: aqua;
border-radius: 50px;/**/
}
/*//////////////main image ger//////orig//////////////////*/
.main-image-ger {
display: flex; /* ishte flex orig, punon mir edhe me inline-flex */
background-color: #8E8E8E; /* e shtova */
position: relative; /* ishte relative, mos e vendos 200, as inherit,absolute, fixed, */
align-items: center; /* ishte center */
align-content: center; /* e shtova */
justify-content: center; /* ishte center */
width: 99%; /* ishte 80% */
/*animation-delay: 0.3; /* e shtova */
border-bottom-left-radius: 20px;/**/
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
/* e main image img ger orig */
.main-image-ger img {
align-content: flex; /* e shtova */
position: relative; /* ishte flex, me absolute sheh te gjith foton scroll edhe djathtas majtas */
object-fit:scale-down;
left: 0%;/*e shtova%*/
right: 0%;/*ishte 15%*/
top: 0%;/*ishte 70%*/
bottom: 0%;/*e shtova une */
transform: translateY(0%); /*isthe -70% orig kjo e ngren lart apo poshte main picture*/
max-width: 94%; /*ishte 100%,por me mire 95% len pak boshellik per te shikuar bordin */
max-height: 94%; /*ishte 100%*/
min-height: 80%;
min-width: 90%;
border: #E50509;
border-bottom-width: medium;
border-style: dashed;
border-color: aqua;
border-radius: 20px;/**/
}
/* ///////////main image 8 ger////////////////////// */
.main-image {
background-color: #8E8E8E; /*gri e shtova */
overflow: hidden; /* Hides any overflow content */
left: 1%;/*e shtova%*/
/* animation-delay: 0.3; /* e shtova */
/*align-content: space-between; /* e shtova */
justify-content: center; /* ishte center */
align-items: center; /* ishte center */
width: 100%; /* ishte 80% */
/*width: 99%; /* ishte 80% por me mire 99 */
/*display: flex; /* ishte flex orig, punon mir edhe me inline-flex */
/*position: relative; /* ishte relative, mos e vendos 200, as inherit,absolute, fixed, */
/* position: static; /* shtuar si prove */
/*border-radius: 20px;/**/
/*
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
*/
/* object-fit: cover; /* Ensures the image covers the container */
/* max-width: 100%; /**/
/*height: auto; /**/
}
/* ///////////main image img 8 css////////////////////// */
.main-image img {
overflow: hidden;
align-content: center; /* e shtova */
position: static; /* ishte flex, me absolute sheh te gjith foton scroll edhe djathtas majtas */
object-fit: scale-down; /*po. Ensures image scale-down the div without distortion */
/* object-fit: scale-down; /* Ensures image covers the div without distortion */
/* object-fit: cover; /* Ensures the image covers the container */
/*left: 0%;/*e shtova%*/
/*right: 0%;/*ishte 15%*/
/*top: 0%;/*ishte 70%*/
/*bottom: 0%;/*e shtova une */
/*transform: translateY(0%); /*isthe -70% orig kjo e ngren lart apo poshte main picture*/
width: 100%;
height: 100%;
/*max-width: 100%; /*ishte 100%,por me mire 95% len pak boshellik per te shikuar bordin */
/*max-height: 100%; /*ishte 100%*/
/*min-height: 100%;/***/
/*min-width: 100%;/**/
border: #E50509;
border-bottom-width: medium;
border-style: dashed;
border-color: aqua;
border-radius: 20px;/**/
/* max-width: 100%; /**/
/*height: auto; /**/
cursor: move; /*shtuar, kur click me mouse midel e mbaj shtyp leviz foton up/down */
}