2017-03-18 00:53:58 +01:00
|
|
|
#lightbox_overlay {
|
2017-06-21 09:00:49 +02:00
|
|
|
background-color: hsl(227, 40%, 16%);
|
2016-09-22 02:05:24 +02:00
|
|
|
|
2019-06-10 11:09:05 +02:00
|
|
|
.image-preview {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
|
|
height: calc(100% - 65px - 95px);
|
2020-08-06 02:42:07 +02:00
|
|
|
margin: 0;
|
2022-02-15 20:25:21 +01:00
|
|
|
overflow: hidden;
|
2019-06-10 07:36:54 +02:00
|
|
|
|
2019-06-10 11:09:05 +02:00
|
|
|
background-size: contain;
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-position: center center;
|
2017-06-08 22:58:15 +02:00
|
|
|
|
2023-03-17 22:10:10 +01:00
|
|
|
& img {
|
2022-02-23 23:57:03 +01:00
|
|
|
cursor: move;
|
2019-06-10 11:09:05 +02:00
|
|
|
max-height: 100%;
|
|
|
|
max-width: 100%;
|
|
|
|
}
|
2022-01-14 00:46:54 +01:00
|
|
|
|
|
|
|
.zoom-element {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
}
|
2019-06-10 11:09:05 +02:00
|
|
|
}
|
2016-09-22 02:05:24 +02:00
|
|
|
|
2019-06-10 11:09:05 +02:00
|
|
|
.exit {
|
2022-02-11 00:01:02 +01:00
|
|
|
flex-shrink: 0;
|
2016-09-22 02:05:24 +02:00
|
|
|
|
2019-06-10 11:09:05 +02:00
|
|
|
color: hsla(0, 0%, 100%, 0.8);
|
|
|
|
font-size: 2rem;
|
2022-02-11 00:01:02 +01:00
|
|
|
margin: 6px 20px 0 0;
|
2016-09-22 02:05:24 +02:00
|
|
|
|
2019-06-10 11:09:05 +02:00
|
|
|
transform: scaleY(0.75);
|
|
|
|
font-weight: 300;
|
2016-09-30 20:59:25 +02:00
|
|
|
|
2019-06-10 11:09:05 +02:00
|
|
|
opacity: 0;
|
|
|
|
pointer-events: none;
|
|
|
|
cursor: pointer;
|
|
|
|
transition: all 0.2s ease;
|
|
|
|
}
|
2016-09-22 02:05:24 +02:00
|
|
|
|
2019-06-10 11:09:05 +02:00
|
|
|
&.show .exit {
|
|
|
|
pointer-events: auto;
|
|
|
|
opacity: 1;
|
|
|
|
}
|
2016-09-22 02:05:24 +02:00
|
|
|
|
2019-06-10 11:09:05 +02:00
|
|
|
.image-info-wrapper {
|
|
|
|
background-color: transparent;
|
2022-02-11 00:01:02 +01:00
|
|
|
display: flex;
|
|
|
|
flex-flow: row wrap;
|
2019-06-10 11:09:05 +02:00
|
|
|
}
|
2017-06-08 22:58:15 +02:00
|
|
|
|
2019-06-10 11:09:05 +02:00
|
|
|
.image-description,
|
|
|
|
.image-actions {
|
2021-11-05 03:33:16 +01:00
|
|
|
margin: 20px;
|
2019-06-10 11:09:05 +02:00
|
|
|
}
|
2017-06-08 22:58:15 +02:00
|
|
|
|
2019-06-10 11:09:05 +02:00
|
|
|
.image-actions {
|
2022-02-11 00:01:02 +01:00
|
|
|
flex-shrink: 0;
|
|
|
|
margin-left: auto;
|
2017-06-08 22:58:15 +02:00
|
|
|
|
2019-06-10 11:09:05 +02:00
|
|
|
.button {
|
|
|
|
font-size: 0.9rem;
|
|
|
|
min-width: inherit;
|
|
|
|
padding: 4px 10px;
|
|
|
|
border: 1px solid hsla(0, 0%, 100%, 0.6);
|
|
|
|
background-color: transparent;
|
|
|
|
color: hsl(0, 0%, 100%);
|
|
|
|
border-radius: 4px;
|
|
|
|
text-decoration: none;
|
|
|
|
display: inline-block;
|
2020-08-06 02:42:07 +02:00
|
|
|
margin: 0 5px;
|
2019-06-10 07:49:22 +02:00
|
|
|
|
2019-06-10 11:09:05 +02:00
|
|
|
&:hover {
|
|
|
|
background-color: hsl(0, 0%, 100%);
|
|
|
|
border-color: hsl(0, 0%, 100%);
|
|
|
|
color: hsl(227, 40%, 16%);
|
|
|
|
}
|
2019-06-10 07:49:22 +02:00
|
|
|
}
|
2022-02-23 23:57:03 +01:00
|
|
|
|
|
|
|
.disabled {
|
|
|
|
opacity: 0.7;
|
|
|
|
cursor: default;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
background-color: transparent;
|
|
|
|
color: hsl(0, 0%, 100%);
|
|
|
|
border: 1px solid hsla(0, 0%, 100%, 0.6);
|
|
|
|
}
|
|
|
|
}
|
2019-06-10 07:49:22 +02:00
|
|
|
}
|
2016-10-17 22:02:25 +02:00
|
|
|
|
2019-06-10 11:09:05 +02:00
|
|
|
.image-description {
|
2022-02-11 00:01:02 +01:00
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
2022-02-23 23:57:03 +01:00
|
|
|
max-width: calc(100% - 400px);
|
2019-06-10 11:09:05 +02:00
|
|
|
/* add some extra margin top and remove some bottom to keep the
|
|
|
|
height the same. and vertically center the text with the buttons. */
|
2019-06-10 08:37:36 +02:00
|
|
|
margin-top: 25px;
|
2019-06-10 11:09:05 +02:00
|
|
|
margin-bottom: 15px;
|
2017-03-19 01:51:20 +01:00
|
|
|
|
2022-02-11 00:01:02 +01:00
|
|
|
font-size: 1.1rem;
|
2019-06-10 08:37:36 +02:00
|
|
|
color: hsl(0, 0%, 100%);
|
2017-03-19 01:51:20 +01:00
|
|
|
|
2019-06-10 11:09:05 +02:00
|
|
|
.title {
|
|
|
|
vertical-align: top;
|
|
|
|
font-weight: 400;
|
|
|
|
line-height: normal;
|
|
|
|
|
|
|
|
/* Required for text-overflow */
|
|
|
|
white-space: nowrap;
|
|
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
}
|
2017-03-19 01:51:20 +01:00
|
|
|
|
2019-06-10 11:09:05 +02:00
|
|
|
.user {
|
|
|
|
font-weight: 300;
|
|
|
|
line-height: normal;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
overflow: hidden;
|
|
|
|
white-space: pre;
|
2017-03-19 01:51:20 +01:00
|
|
|
|
2019-06-10 11:09:05 +02:00
|
|
|
&::before {
|
|
|
|
margin-right: 5px;
|
|
|
|
content: "\2014";
|
|
|
|
}
|
2019-06-10 08:37:36 +02:00
|
|
|
}
|
|
|
|
}
|
2017-03-19 01:51:20 +01:00
|
|
|
|
2019-06-10 11:09:05 +02:00
|
|
|
.player-container {
|
|
|
|
height: calc(100% - 65px - 95px);
|
|
|
|
display: flex;
|
|
|
|
text-align: center;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
2017-03-19 01:51:20 +01:00
|
|
|
|
2023-03-17 22:10:10 +01:00
|
|
|
& iframe {
|
2019-06-10 11:09:05 +02:00
|
|
|
/* maintain 16:9 ratio. */
|
|
|
|
width: calc((100vh - 65px - 95px) * 16 / 9);
|
|
|
|
height: 100%;
|
|
|
|
margin: auto;
|
|
|
|
}
|
|
|
|
}
|
2017-03-19 01:51:20 +01:00
|
|
|
|
2019-06-10 11:09:05 +02:00
|
|
|
.center {
|
|
|
|
.arrow {
|
2019-06-10 08:37:36 +02:00
|
|
|
display: inline-block;
|
|
|
|
vertical-align: top;
|
2019-06-10 11:09:05 +02:00
|
|
|
margin-top: 25px;
|
|
|
|
padding: 5px 10px;
|
2017-03-19 01:51:20 +01:00
|
|
|
|
2019-06-10 11:09:05 +02:00
|
|
|
color: hsl(0, 0%, 100%);
|
|
|
|
font-size: 1.8em;
|
|
|
|
font-weight: 100;
|
2017-03-19 01:51:20 +01:00
|
|
|
|
2019-06-10 11:09:05 +02:00
|
|
|
transform: scaleY(2);
|
2019-06-10 08:37:36 +02:00
|
|
|
cursor: pointer;
|
2017-03-19 01:51:20 +01:00
|
|
|
|
2019-06-10 11:09:05 +02:00
|
|
|
opacity: 0.5;
|
|
|
|
transition: all 0.3s ease;
|
|
|
|
|
|
|
|
&:hover {
|
2019-06-10 08:37:36 +02:00
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
2019-06-10 11:09:05 +02:00
|
|
|
|
|
|
|
.image-list {
|
|
|
|
position: relative;
|
|
|
|
display: inline-block;
|
2021-11-05 03:33:16 +01:00
|
|
|
padding: 15px 0 12px;
|
2019-06-10 11:09:05 +02:00
|
|
|
height: 50px;
|
2020-08-06 02:42:07 +02:00
|
|
|
font-size: 0;
|
2019-06-10 11:09:05 +02:00
|
|
|
|
|
|
|
max-width: 40vw;
|
|
|
|
overflow: hidden;
|
|
|
|
white-space: nowrap;
|
|
|
|
|
|
|
|
.image {
|
|
|
|
display: inline-block;
|
|
|
|
vertical-align: top;
|
|
|
|
width: 50px;
|
|
|
|
height: 50px;
|
2020-08-06 02:42:07 +02:00
|
|
|
margin: 0 2px;
|
2019-06-10 11:09:05 +02:00
|
|
|
|
|
|
|
background-color: hsla(0, 0%, 94%, 0.2);
|
|
|
|
opacity: 0.5;
|
|
|
|
|
|
|
|
background-size: cover;
|
|
|
|
background-position: center;
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
&.selected {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2019-06-10 08:37:36 +02:00
|
|
|
}
|
2017-03-19 01:51:20 +01:00
|
|
|
}
|
|
|
|
|
2021-02-04 02:49:05 +01:00
|
|
|
@media only screen and ($ms_min <= width < $md_min) {
|
2019-06-10 07:32:34 +02:00
|
|
|
#lightbox_overlay {
|
|
|
|
.image-actions {
|
2022-02-11 00:01:02 +01:00
|
|
|
width: 100%;
|
|
|
|
padding-left: 15px;
|
2019-06-10 07:32:34 +02:00
|
|
|
margin-top: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.image-description {
|
|
|
|
max-width: calc(100% - 100px);
|
|
|
|
white-space: nowrap;
|
|
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
margin-bottom: 5px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.center .image-list {
|
|
|
|
max-width: 80vw;
|
|
|
|
}
|
|
|
|
|
|
|
|
.player-container iframe {
|
|
|
|
/* maintain 16:9 ratio. */
|
|
|
|
width: 100%;
|
|
|
|
height: calc((100vw) * 9 / 16);
|
|
|
|
margin: auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
.image-preview {
|
2022-02-11 00:01:02 +01:00
|
|
|
height: calc(100% - 101px - 104px);
|
|
|
|
}
|
|
|
|
|
|
|
|
.image-info-wrapper {
|
|
|
|
align-items: flex-end;
|
|
|
|
}
|
|
|
|
|
|
|
|
.exit {
|
|
|
|
position: absolute;
|
|
|
|
right: 5px;
|
|
|
|
top: 6px;
|
2019-06-10 07:32:34 +02:00
|
|
|
}
|
2017-12-17 08:19:20 +01:00
|
|
|
}
|
2016-10-11 22:32:26 +02:00
|
|
|
}
|