/* CSS Document */
body, html {
display: flex; /* ishte flex, por ndoshta me mire contents */
/*background-color: currentColor; /* ishte #f0f0f0 */
background-color: black; /* ishte #f0f0f0 */
position: relative; /*shtuar per prove*/
/*align-items: flex-start; /* ishte center */
/*justify-content: center; /* ishte center */
width: 100%; /*e shtova width, nuk ishte*/
height: 100%; /*ishte 100% duhet 100% sepse zvogelon webpage*/
border-color: green;/**/
border-style: dotted; /**/
overflow: hidden; /*ketu nuk lejon refresh duke zvarritur poshte.*/
/* overflow: hidden; /* duhet hidden kur don qe image te mos dali me shum se screen ose se div*/
padding: 0px;/* shtuar*/
scale: 1.0; /* shtuar */
}
.main-container {
display: flex; /**/
/* background-color: cornflowerblue;/**/
background-color: #030A16;/**/
position: relative;/**/
/* object-position: top;/**/
width: 99%; /**/
height: 95%; /**/
top: -5%;/**/
/* border-color: yellow; /**/
border-color: azure; /**/
border-style: dashed; /**/
border-width: medium; /**/
overflow: hidden; /**/
padding: 1px; /**/
}
/* ////////////////////////////////////////// */
/* ////////////////////////////////////////// */
/* ////////////////////////////////////////// */
/* sherben per ne vend te img si per hor thumbnails edhe per ver thumbnails */
.thumbnail3 {
display: flex; /* ishte flex duhet dsplay ketu*/
background-color: chocolate; /**/
/*position: relative;/**/
/* object-position: left;/**/
width: 60px;/**/
height: 60px;/**/
/* width: 10vh;/*full viewport height*/
/* height: 100px;/**/
align-content: center;/**/
align-items: center;/**/
justify-content: center; /* ishte center */
/*left: 20px;/**/
/*border-color: #E0FF00; /* #E50509 = red*/
/*border-radius: 10px;/**/
/*border: 90px;/**/
border: #E0FF00; /* #E50509 = red nuk duhet border-color: .... por vetem border: ...*/
border-style: dotted;
transition: transform 0.3s, border 0.3s;/**/
border-radius: 3px;
/* overflow: hidden; /**/
padding: 2px;
margin: 31px;
}
/*kjo eshte per container thumbnails pra parent i fotove*/
.thumbnail-gallery {
display: flex; /* ishte flex duhet dsplay ketu*/
background-color: darkgrey; /**/
position: relative;/**/
/*object-position: center;/**/
/* width: 70%;/*ishte*/
width: 120px;/*ishte*/
height: 99%;/*px, ose % ose vh full viewport height*/
align-content: center;/**/
align-items: center;/**/
justify-content: center;/**/
/* overflow: hidden; /**/
overflow-y: scroll;/*orig ishte overflow-y hidden*/
/* overflow-x: hidden;/*orig ishte overflow-y hidden*/
/* white-space: nowrap; /* Keeps items on the same line */
border-style: groove; /**/
border-color: blue;/**/
padding: 5px;/**/
}
.thumbnail-gallery img {
display: flex; /* ishte flex duhet dsplay ketu*/
/*background-color: red; /**/
position: relative;/**/
/* object-position: left;/**/
width: 70px;/**/
height: 70px;/**/
align-content: center;/**/
align-items: center;/**/
justify-content: center; /* ishte center */
/*left: 20px;/**/
/*border-color: #E0FF00; /* #E50509 = red*/
/*border-radius: 10px;/**/
/*border: 90px;/**/
border: #E0FF00; /* #E50509 = red nuk duhet border-color: .... por vetem border: ...*/
border-style: dotted;
transition: transform 0.3s, border 0.3s;/**/
border-radius: 3px;
/* overflow: hidden; /**/
padding: 2px;
margin: 11px;
}
.main-image {
display: flex; /*jo*/;
background-color: #1F1F1F; /*gri e shtova */
position: static; /* ishte relative, mos e vendos 200, as inherit,absolute, fixed, */
object-fit: scale-down; /**/
/*object-fit: none; /**/
/* object-fit: cover; /**/
/* object-fit: contain; /**/
/* object-fit: fill; /**/
object-position: center;/**/
width: 99vw; /**/
height: 99vh; /**/
align-content: center; /* e shtova */
align-items: center; /* ishte center */
justify-content: center; /* ishte center */
/*align-content: space-between; /* e shtova */
/*left: 10px;/*e shtova%*/
/* right: 10px;/*ishte 15%*/
/* top: 5px;/*ishte 70%*/
/* bottom: 5px;/*e shtova une */
/* transform: translateY(0%); /*isthe -70% orig kjo e ngren lart apo poshte main picture*/
border-color: brown; /**/
border-bottom-width: medium; /**/
/* border-style: double; /**/
border: double;
/*border-color: aqua;/**/
border-radius: 20px;/**/
overflow: hidden; /**/
padding: 5px;/**/
cursor: grabbing; /*grab eshte dora, */
}
/* //////////////////////////////////////////////////////////////////////////// */
/* ///////////////////_Fund_Horizontale_///////////////////////////////////// */
/* ///////////////////_Fillim_Verticale_/////////////////////////////////// */
/* ////////////////////////////////////////////////////////////////////// */
/*kjo eshte per container thumbnails pra parent i fotove*/
.thumbnail-gallery-ver {
display: flex; /* ishte flex duhet dsplay ketu*/
background-color: grey; /**/
position: relative;/*relative me mire*/
object-position: bottom;/**/
/*width: 156px;/*ishte*/
width: 99%;/*ishte*/
height: 105px;/**/
align-self: flex-end;/**/
align-items: center;/*duhet*/
align-content: center;/**/
/*justify-content: flex-end;/*nuk duhet ketu*/
oveflow: hidden; /**/
overflow-y: hidden;/*orig ishte overflow-y hidden*/
overflow-x: scroll;/*orig ishte overflow-y hidden*/
/* white-space: nowrap; /* Keeps items on the same line */
border-color: black;/**/
border-style: groove;
padding: 0px;/**/
}
.thumbnail-gallery-ver img {
display: flex; /* ishte flex duhet dsplay ketu*/
/*background-color: chocolate; /**/
position: relative;/**/
width: 50px;/**/
height: 50px;/**/
/* width: 10vh;/*full viewport height*/
/* height: 100px;/**/
/*overflow-x: scroll;/*nuk duhet ketu te img*/
align-content: center;/**/
align-items: center;/**/
justify-content: center; /* ishte center */
/*left: 20px;/**/
/*border-color: #E0FF00; /* #E50509 = red*/
/*border-radius: 10px;/**/
/*border: 90px;/**/
border: #E0FF00; /* #E50509 = red nuk duhet border-color: .... por vetem border: ...*/
border-style: dotted;
transition: transform 0.3s, border 0.3s;/**/
border-radius: 3px;
/* overflow: hidden; /**/
padding: 2px;
margin: 9px;
}
/* ///////////main image css////////////////////// */
.main-image-ver {
display: flex; /* ishte flex orig, punon mir edhe me inline-flex */
background: rgba(0, 0, 0, 0.2);/**/
/*background-color: blue; /**/
position: fixed;/**/
object-fit: scale-down; /* Ensures the image covers the container */
align-self: center;/**/
align-content: center; /* e shtova */
align-items: center; /* ishte center */
justify-content: center; /* ishte center */
/*object-position: top;/*vlen leviz objectin brenda parent majtas djathtas lart poshte*/
width: 97%; /* ishte 80% *//*overflow: hidden; /* Hides any overflow content */
height: 97%; /* ishte 80% *//*overflow: hidden; /* Hides any overflow content */
/*top: 100px;/* */
/*left: 0px;/* */
/* animation-delay: 0.3; /* e shtova */
/*object-fit: scale-down; /*po. Ensures image scale-down the div without distortion */
/*height: 100%; /* ishte 80%, shtuar nga une per full viewport width por nuk jam i sigurte*/
/*width: 99%; /* ishte 80% por me mire 99 */
/*object-fit: scale-down; /* Ensures the image covers the container */
/* max-width: 100%; /**/
/*height: auto; /**/
border-color: yellow;/*#322C2C;*/
/*border-color: aqua;/**/
border-bottom-width: medium; /**/
border-style: dashed; /**/
border-radius: 20px;/**/
overflow: hidden; /**/
padding: 5px;/**/
cursor: vertical-text; /*grab eshte dora, */
}
.name-info {
display: none;
position: absolute;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 10px;
border-radius: 5px;
top: 100px;
left: 125px;
}
.test-info {
display: none;
position: absolute;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 10px;
border-radius: 5px;
top: 50px;
left: 125px;
}
.image-info {
display: none;
position: absolute;
background: rgba(0, 0, 0, 0.2);/**/
color: white;
padding: 10px;
border-radius: 5px;
top: 1px;
left: 125px;
}
.hover-thumbnail {
background-color: blue;
transform: scale(1.2);
cursor: alias;
}
/*hover me selected nese selected eshte siper hover funksionon hover duhet te jen sipas radhes ketu*/
.selected-thumbnail {
background-color: red;/**/
transform: scale(1.3);
border-style: double;
border: 2px red;
/*border-color: solid red;/**/
border-radius: 10px;/*berder-radius i ben te 4tra cepat njelloje*/
}
/* .main-image.fullscreen {/**/
.fullscreen {
display: block;/**/
background-color: black;
position: relative; /*ishte absolute*/
overflow: hidden;
object-fit: cover; /**/
/* object-fit: scale-down; /**/
align-items: center;
align-content: center;
justify-content: center;/**/
align-self: center;/**/
object-position: center;/**/
/*height: calc(var(window.innerHeight)); /**/
width: 100vh;/**/
height: 100vh;/**/
/* width: 100%; /*ishte 100% */
/* height: 100%; /*ishte 100%*/
border-color: aquamarine;
border-style: dashed;
border: 1px; cursor: zoom-out;
}