Hallo,
ich ärgere mich schon seit Version 4.x.x das die Ansicht des Image Viewers so lieblos & schlecht überschaubar ist - alles nur dunkel...
Wer seinen Image Viewer dem neuen Design des WSC anpassen möchte, ohne viel Aufwand, der kann folgenden Code der CSS-Definition des Stils hinzufügen:
CSS
/* ================================================================ Woltlab Suite 3 Image Viewer Modification */
.wcfImageViewer {
background-color: $wcfFooterBackground;
}
.wcfImageViewer > header {
background-color: $wcfHeaderMenuBackground;
}
.wcfImageViewer > div {
background-color: $wcfContentBackground;
border-top: none;
border-bottom: none;
}
.wcfImageViewer > header h3 {
color: $wcfHeaderMenuLink;
}
.wcfImageViewer > header h1 > a, .wcfImageViewer > header h2 > a, .wcfImageViewer > header h3 > a {
color: $wcfHeaderMenuLink;
}
.wcfImageViewer > header h1 > a:hover, .wcfImageViewer > header h2 > a:hover, .wcfImageViewer > header h3 > a:hover {
color: $wcfHeaderMenuLinkActive;
}
.wcfImageViewer > header > .wcfImageViewerButtonClose {
color: $wcfHeaderMenuLink !important;
}
.wcfImageViewer > header > .wcfImageViewerButtonClose:hover {
color: $wcfHeaderMenuLinkActive !important;
}
.wcfImageViewer:not(.wcfImageViewerMobile) > div > ul {
background-color: $wcfContentBackground;
opacity: .9;
border: none;
border-radius: 2px;
box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.5);
bottom: 20px;
}
.wcfImageViewer:not(.wcfImageViewerMobile) > div > ul > li.wcfImageViewerSlideshowButtonEnlarge, .wcfImageViewer:not(.wcfImageViewerMobile) > div > ul > li.wcfImageViewerSlideshowButtonFull {
border-left: 1px solid transparent;
}
.wcfImageViewer:not(.wcfImageViewerMobile) > div > ul > li:not(.pointer) > .icon {
color: $wcfContentDimmedText !important;
opacity: .5;
}
.wcfImageViewer:not(.wcfImageViewerMobile) .icon {
color: $wcfContentDimmedText;
}
.wcfImageViewer:not(.wcfImageViewerMobile) .icon:hover {
color: $wcfContentText;
}
.wcfImageViewer.wcfImageViewerMobile > header {
background-color: $wcfHeaderMenuBackground;
}
.wcfImageViewer.wcfImageViewerMobile > footer {
background-color: $wcfFooterBackground;
}
.wcfImageViewer.wcfImageViewerMobile > div > ul > li.wcfImageViewerSlideshowButtonFull {
bottom: 100px;
}
.wcfImageViewer.wcfImageViewerMobile > div > ul > li.wcfImageViewerSlideshowButtonPrevious > span {
top: 0px;
}
.wcfImageViewer.wcfImageViewerMobile > div > ul > li.wcfImageViewerSlideshowButtonNext > span {
right: -2px;
top: 0px;
}
.wcfImageViewer.wcfImageViewerMobile > div > ul > li.wcfImageViewerSlideshowButtonPrevious {
left: 15px;
}
.wcfImageViewer.wcfImageViewerMobile > div > ul > li.wcfImageViewerSlideshowButtonNext {
right: 15px;
}So sieht die Ansicht vor der Anpassung aus:
Und so nach der Anpassung:
Selbstverständlich kann der Code auch für eigene Stile verwendet werden, die Farben werden vom Headermenu background & Footer background der Farbpalette übernommen.
Gino 
