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