1 /* ImageViewer for WCF */
2 $wcfImageViewerBorderColor: rgba(51, 51, 51, 1);
3 $wcfImageViewerFontColor: rgba(211, 211, 211, 1);
6 background-color: rgba(0, 0, 0, 1);
17 color: rgb(158, 158, 158);
25 &.maximized:not(.wcfImageViewerMobile) {
32 border-color: fade($wcfImageViewerBorderColor, 0%);
41 &.wcfImageViewerMobile {
44 background-color: rgba(0, 0, 0, 1);
57 transition: visibility 0s linear .24s, opacity .24s linear;
60 > div > ul > li.pointer {
71 background-color: rgba(224, 224, 224, 1);
77 transition: opacity .24s;
83 &.wcfImageViewerSlideshowButtonFull,
84 &.wcfImageViewerSlideshowButtonNext,
85 &.wcfImageViewerSlideshowButtonPrevious {
86 /* places buttons above images at all times */
90 &.wcfImageViewerSlideshowButtonPrevious {
100 &.wcfImageViewerSlideshowButtonNext {
110 &.wcfImageViewerSlideshowButtonFull {
114 transform: translateX(-50%);
124 &.wcfImageViewerSlideshowButtonToggle,
125 &.wcfImageViewerSlideshowButtonEnlarge {
133 > .wcfImageViewerButtonPrevious,
134 > .wcfImageViewerButtonNext {
147 box-sizing: border-box;
148 -moz-box-sizing: border-box;
171 color: $wcfImageViewerFontColor;
174 color: $wcfImageViewerFontColor;
187 color: $wcfImageViewerFontColor;
192 > .wcfImageViewerButtonClose {
200 background-color: rgba(0, 0, 0, 1);
201 border-bottom: 1px solid $wcfImageViewerBorderColor;
202 border-top: 1px solid $wcfImageViewerBorderColor;
205 transition-property: top, bottom, border-color;
206 transition-timing-function: linear;
207 transition-duration: .24s;
214 content: "" !important;
216 left: calc(50% - 34px);
218 top: calc(50% - 34px);
225 transition: opacity .24s linear;
228 &.animateTransformation {
229 transition: left .24s, margin-top .24s, height .24s, width .24s, opacity .24s;
239 &:not(.wcfImageViewerMobile) {
241 color: rgb(255, 255, 255);
245 transition: top .24s linear;
249 transition: bottom .24s linear;
261 background-color: rgba(0, 0, 0, .9);
262 border: 1px solid $wcfImageViewerBorderColor;
263 border-bottom-width: 0;
264 border-radius: 2px 2px 0 0;
269 transform: translateX(-50%);
275 &:not(.pointer) > .icon {
276 color: rgb(66, 66, 66) !important;
279 &.pointer > span.icon {
283 &.wcfImageViewerSlideshowButtonToggle > span,
284 &.wcfImageViewerSlideshowButtonEnlarge > span,
285 &.wcfImageViewerSlideshowButtonFull > span {
296 &.wcfImageViewerSlideshowButtonEnlarge,
297 &.wcfImageViewerSlideshowButtonFull {
298 border-left: 1px solid $wcfImageViewerBorderColor;
299 box-sizing: border-box;
303 vertical-align: middle;
315 &:hover > div > ul > li > img {
317 -webkit-filter: none;
327 transition: opacity .24s;
339 &.wcfImageViewerButtonPrevious {
343 &.wcfImageViewerButtonNext {
360 transition: margin-left cubic-bezier(.5, 1.595, .56, .98) .24s;
368 transition: opacity .24s;
381 -webkit-filter: none;
405 @media only screen and (max-width: 800px) {
410 > .wcfImageViewerButtonClose {