Share your image gallery from a server's directory without need for a database thanks to strong encryption. Users can be authenticated via authentication module, e.g. implementing LDAP.
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
145 lines
2.2 KiB
145 lines
2.2 KiB
html { |
|
height: 100%; |
|
width: 100%; |
|
} |
|
|
|
body { |
|
padding: 2.25em 0 0 0; |
|
margin: 0; |
|
height: 100%; |
|
width: 100%; |
|
} |
|
|
|
div#header { |
|
opacity: 1; |
|
position: fixed; |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: flex-start; |
|
align-content: flex-start; |
|
font-size: 150%; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
padding: 0 .1em 0 .1em; |
|
margin: 0; |
|
height: 1.5em; |
|
background-color: black; |
|
color: white; |
|
} |
|
|
|
h1 { |
|
margin: 0; |
|
padding: 0; |
|
font-size: inherit; |
|
display: inline; |
|
flex: 1; |
|
align-self: flex-start; |
|
text-overflow: ellipsis; |
|
white-space: nowrap; |
|
direction: rtl; |
|
text-align: left; |
|
overflow: hidden; |
|
} |
|
|
|
#arrows { |
|
flex: 0 0 auto; |
|
} |
|
|
|
a:link, a:visited, a:active, a:hover { |
|
text-decoration: inherit; |
|
color: inherit; |
|
} |
|
|
|
input[type="checkbox"] { |
|
display: none; |
|
} |
|
|
|
input[type="checkbox"] + label { |
|
opacity: 0.5; |
|
border: .25em solid black; |
|
border-radius: 1em; |
|
} |
|
|
|
input[type="checkbox"]:checked + label { |
|
opacity: 1; |
|
border: .25em solid yellow; |
|
border-radius: 1em; |
|
} |
|
|
|
img { |
|
width: auto; |
|
height: auto; |
|
max-width: 100%; |
|
max-height: 100%; |
|
} |
|
|
|
div.image { |
|
width: 100%; |
|
height: calc(100% - 2.25em); |
|
background-color: black; |
|
text-align: center; |
|
} |
|
|
|
img.image { |
|
display: block; |
|
margin: auto; |
|
object-fit: contain; |
|
object-position: 50% 50%; |
|
} |
|
|
|
#pos { |
|
display: none; |
|
position: fixed; |
|
left: 50%; |
|
top: 50%; |
|
transform: translate(-50%, -50%); |
|
z-index: 20; |
|
font-size: xx-large; |
|
font-weight: bold; |
|
background: transparent; |
|
color: white; |
|
} |
|
|
|
div.images { |
|
color: white; |
|
background-color: black; |
|
padding: 2em; |
|
display: flex; |
|
flex-wrap: wrap; |
|
justify-content: space-around; |
|
align-items: center; |
|
align-content: space-around; |
|
} |
|
|
|
div.images img.thumbnail { |
|
padding: .5em; |
|
margin: .5em; |
|
box-shadow: .2em .2em .6em #aaa; |
|
border-radius: 1em; |
|
background-color: white; |
|
flex-grow: 1; |
|
flex-shrink: 1; |
|
flex-basis: auto; |
|
align-self: center; |
|
} |
|
|
|
@media handheld, (max-width: 40em), (max-height: 40em) { |
|
div#header.single, .more { |
|
display: none; |
|
} |
|
div.image { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
} |
|
img.image { |
|
position: fixed; |
|
left: 50%; |
|
top: 50%; |
|
transform: translate(-50%, -50%); |
|
z-index: 10; |
|
} |
|
}
|
|
|