1@import "simple-lightbox/simple-lightbox.less";
2
3/** Simple Lightbox Adjustments */
4.sl-overlay {
5    background-color: #000;
6}
7
8.sl-wrapper {
9    .sl-counter,
10    .sl-close,
11    .sl-navigation button {
12        color: #fff;
13
14        &:hover {
15            color: #000;
16        }
17    }
18}
19
20/** Gallery Styles */
21div.plugin-gallery {
22    max-width: 100%;
23    box-sizing: border-box;
24    margin-bottom: 1.4em;
25
26    div.gallery-page {
27        display: grid;
28        // column setup happens in Formatter::formatPage()
29        gap: 1em;
30        width: auto;
31        max-width: 100%;
32
33        figure {
34            text-align: center;
35            border: 1px solid @ini_border;
36            margin: 0;
37            padding: 0.4em;
38            display: flex;
39            flex-direction: column;
40            justify-content: space-between;
41            overflow: hidden;
42
43            img {
44                max-width: 100%;
45                height: auto;
46            }
47
48            figcaption {
49                margin-top: 0.4em;
50
51                a {
52                    display: block;
53
54                    &.gallery-title {
55                        font-weight: bold;
56                    }
57                }
58            }
59        }
60    }
61
62    &.align-full {
63        width: 100%;
64    }
65
66    &.align-left {
67        float: left;
68        margin-right: 1em;
69    }
70
71    &.align-right {
72        float: right;
73        margin-left: 1em;
74    }
75
76    &.align-center {
77        display: flex;
78        justify-content: center;
79        flex-wrap: wrap; // wrap page selector on new line
80    }
81
82    .gallery-page-selector {
83        padding-top: 0.4em;
84        display: none; // hidden by default, shown by JS
85
86        a {
87            display: inline-block;
88            padding: 0.2em 0.4em;
89            border: 1px solid transparent;
90
91            &.active {
92                border: 1px solid @ini_border;
93                border-radius: 0.4em;
94            }
95        }
96    }
97}
98