Fixed imageViewer (forgot CSS)
authorAlexander Ebert <ebert@woltlab.com>
Mon, 9 Jul 2012 21:12:49 +0000 (23:12 +0200)
committerAlexander Ebert <ebert@woltlab.com>
Mon, 9 Jul 2012 21:12:49 +0000 (23:12 +0200)
com.woltlab.wcf/template/imageViewer.tpl
wcfsetup/install/files/style/bootstrap.less
wcfsetup/install/files/style/imageviewer.less [new file with mode: 0644]

index 8c0e676aec09561cf2734e8d68bae7cc4698f020..5d2738b77df9cfe59d3f59521c5eb6254d3b36e0 100644 (file)
@@ -7,7 +7,7 @@
                        WCF.Icon.addObject({
                                'wcf.icon.arrowLeftColored': '{icon size='M'}arrowLeftColored{/icon}',
                                'wcf.icon.arrowRightColored': '{icon size='M'}arrowRightColored{/icon}',
-                               'wcf.icon.closeColored': '{icon size='M'}closeColored{/icon}',
+                               'wcf.icon.deleteColored': '{icon size='M'}deleteColored{/icon}',
                                'wcf.icon.enlargeColored': '{icon size='M'}enlargeColored{/icon}'
                        });
                        WCF.Language.addObject({
index 3105d187c5b1fceaff2a41169d2cf1a5948d3179..d9a6b302d4fbaade2bf1a9724faa64e2a1e5ad08 100644 (file)
@@ -38,6 +38,7 @@
 @import "popover.less";
 @import "acl.less";
 @import "sitemap.less";
+@import "imageViewer.less";
 
 /* application */
 @import "wbb.less";
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/imageviewer.less b/wcfsetup/install/files/style/imageviewer.less
new file mode 100644 (file)
index 0000000..c6b86df
--- /dev/null
@@ -0,0 +1,100 @@
+#lbOverlay {
+       background-color: #000;
+       bottom: 0;
+       cursor: pointer;
+       left: 0;
+       position: fixed;
+       right: 0;
+       top: 0;
+       z-index: 399;
+}
+
+#lbPrevLink,
+#lbNextLink {
+       display: block;
+       overflow: hidden;
+       position: absolute;
+       top: 0;
+       width: 50%;
+       outline: none;
+
+       > span {
+               background-color: #fff;
+               padding: @wcfGapSmall;
+               position: absolute;
+               text-transform: uppercase;
+               top: 20%;
+       }
+       
+       &:hover > span {
+               .boxShadow(0, 0, @wcfButtonHoverBorderColor, 20px);
+       }
+}
+
+#lbPrevLink {
+       left: 0;
+       
+       > span {
+               left: 0;
+               padding-right: @wcfGapMedium;
+               text-align: right;
+
+               .borderRadius(0, 30px, 30px, 0);
+       }
+}
+
+#lbNextLink {
+       right: 0;
+
+       > span {
+               padding-left: @wcfGapMedium;
+               right: 0;
+
+               .borderRadius(30px, 0, 0, 30px);
+       }
+}
+
+#lbEnlarge,
+#lbCloseLink {
+       cursor: pointer;
+       display: block;
+       float: right;
+       margin: 5px 0;
+       padding-right: @wcfGapSmall;
+       outline: none;
+}
+
+
+#lbCenter, #lbBottomContainer {
+       background-color: #fff;
+       overflow: hidden;
+       position: absolute;
+       z-index: 400;
+}
+
+.lbLoading {
+       background: #fff url(../icon/spinner.svg) no-repeat center;
+       background-size: 48px;
+}
+
+#lbImage {
+       background-repeat: no-repeat;
+       border: 10px solid #fff;
+       left: 0;
+       position: absolute;
+       top: 0;
+}
+
+#lbBottom {
+       border: 10px solid #fff;
+       border-top-style: none;
+       color: #666;
+}
+
+#lbCaption, #lbNumber {
+       margin-right: 71px;
+}
+
+#lbCaption {
+       font-weight: bold;
+}