Bilder in der SlideBox sehr groß

Julius Cesar · Dec 15th 2020

Hallo, mir ist aufgefallen das nach dem Update auf der Version 5.3 die Bilder der SlideBox sehr groß dargestellt werden. Habe den alle Anzeigen aktualisiert sowie den Cache

Link: https://der-ls-treffpunkt.de/gallery/

Felix | D1strict · Dec 16th 2020

Tritt das auch im Standardstil auf?

Julius Cesar · Dec 16th 2020

Quote from Felix | D1strict

Tritt das auch im Standardstil auf?

Ja

Julius Cesar · Dec 20th 2020

Niemand eine Idee was das sein könnte?

Matthias Schmidt · Dec 21st 2020

Durch ein Plugin oder den Stil wird folgender CSS-Code hinzugefügt:

Code

canvas{width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:0;pointer-events:none}

Wenn dieser Code entfernt ist, werden die Bilder wieder korrekt dargestellt.

Julius Cesar · Dec 24th 2020

Quote from Matthias Schmidt
Durch ein Plugin oder den Stil wird folgender CSS-Code hinzugefügt:
Code
canvas{width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:0;pointer-events:none}
Wenn dieser Code entfernt ist, werden die Bilder wieder korrekt dargestellt.

Vielen dank für die Antwort. Nur wie finde ich diesen CSS-Code?

Darklord · Dec 25th 2020

Nabend,

am ehesten mal bei selbst hinzugefügten CSS nachsehen, evtl. irgendwann Mal eine Particle js eingebunden und noch alte Reste die vergessen wurden,

Es hat schätzungsweise mit einer div <canvas id="canvas"></canvas> zu tun, welche sich in einer deiner Header befindet.

Julius Cesar · Dec 25th 2020

Guten Morgen, also ich habe in meinem Stil nachgesehen (CSS) aber nicht dergleichen gefunden

CSS: Individuelles CSS und SCSS

/*
Woltlab Suite 3 Theme DtP Custom
Design by DtP Mario
https://www.der-ls-treffpunkt.de
*/
/* BBCode - Quellenangabe */
.badgequelleLink {
    margin-left: 47px;
    margin-top: -15px;
}

/* Projektbilder nebeneinander anzeigen lassen */
.imgproject {
float: left;
}

/* Benutzerrang - eigene Farbe 3D Artist*/
.userTitleBadge.Artist3D {
    background-color: rgb(127, 255, 212);
    background-image: linear-gradient(#0066ff, #86ff49);
    color: (#fff);
    border-radius: 3px;
    font-weight: bold;
    padding: 2px 14px;
}
/* Benutzerrang - eigene Farbe Server-Chirurg */
.userTitleBadge.ServerChirurg {
    background-color: rgb(127, 255, 212);
    background-image: linear-gradient(rgb(0, 0, 0), #f00);
    color: (#fff);
    border-radius: 3px;
    font-weight: bold;
    padding: 2px 14px;
}

.badge.red, a.badge.red {
    border-radius: 3px;
}

.badge.green, a.badge.green {
    border-radius: 3px;
}
.badge.orange, a.badge.orange {        
    border-radius: 3px;
}
.badge.yellow, a.badge.yellow {
    border-radius: 6px3px
}
.badge.blue, a.badge.blue {
    border-radius: 3px;
}
.badge.purple, a.badge.purple {
    border-radius: 3px;
}
/* donationUsageBar - Farbe */
[data-box-identifier="de.wbb-elite.donation.end"] {
    text-align: center;
}
.donationUsageBar {
    margin-bottom: 10px;
}
.donationUsageBar > span {
    background-color: rgba(76, 169, 22, 1);
    color: transparent;
    display: block;
    height: 100%;
    border-radius: 3px;
}
.donationUsageBar {
    background-color: rgba(165, 223, 65, 1);
    height: 9px;
    border-radius: 3px;
    margin-top: -10px;
}

/* MessageSidebar - Steam Online/Offlineanzeige */
 .steamSidebar {
    margin-top: 20px;
    border-top: 1px solid #bfbfbf;
    padding-top: 10px;
}
 .steamSidebar::before {
    content: " STEAM ";
    position: absolute;
    background-color: #f8f8f9;
    margin-top: -19px;
    font-size: 11px;
    padding-left: 3px;
    padding-right: 3px;
}
 .steamSidebarAvatar {
    vertical-align: top;
    margin-top: 4px;
}
.steamSidebarInfo {
    display: inline-block;
    vertical-align: middle;
}
 .steamSidebarInfo a {
    width: 100px;
    display: inline-block;
    text-align: left;
    line-height: 1.2;
}
*, *::before, *::after {
    box-sizing: inherit;
    min-width: 0;
}
.steamState-online {
    border-bottom: none;
    background-color: #2b8725;
    color: #fff;
    font-size: 11px;
    padding: 1px 5px;
    border-radius: 3px;
    font-family: arial;
    float: left;
    height: 18px;
}
 .steamState-in-game {
    border-bottom: none;
    background-color: #2b8725;
    color: #fff;
    font-size: 11px;
    padding: 1px 5px;
    border-radius: 3px;
    font-family: arial;
    float: left;
    height: 18px;
}
 .steamState-offline {
    border-bottom: none;
    background-color: #de0808;
    color: #fff;
    font-size: 11px;
    padding: 1px 5px;
    border-radius: 3px;
    font-family: arial;
    float: left;
    height: 18px;
}
.steamSidebarInfo {
    display: inline-block;
    vertical-align: middle;
}
/* MessageSidebar - Steam Online/Offlineanzeige */

/* MessageSidebar - Formatierung auf dem Desktop anpassen */
@include screen-lg { /*@media (min-width:1025px)*/
    .messageSidebar {
        align-self: flex-start;
        border-radius: 3px;
        flex: 0 0 225px !important;
        padding: 20px;
        text-align: center;
    }
}
/* MessageSidebar - Anzeige der Credits sortieren */
.messageSidebar .messageAuthor {
    display: flex;
    flex-direction: column;
}
.messageAuthorContainer {
    order: 1;
}
.messageSidebar .userTitle {
    order: 2;
}
.messageSidebar .userRank {
    margin-top: 3px;
    order: 3;
}
.messageSidebar .userAvatar {
    margin-top: 10px;
    order: 4;
}
.specialTrophyContainer {
    order: 5;
}
/* MessageSidebar - Rahmen für Teammitglieder sowie User */

@include screen-lg { /*@media (min-width:1025px)*/
    /* Rahmen für die Admins (ID:4) */
    .userOnlineGroupMarking4 .messageSidebar,{
        border: solid 2px #c00;
        border-bottom-width: 33px;
    }
    /* Rahmen für die Admins (ID:4) */
    .userOnlineGroupMarking4 .messageSidebar::before,{
        background-image: url("#{$style_image_path}dtp_logo.png");
        background-size: cover;
        bottom: -32px;
        content: "";
        height: 30px;
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
        width: 170px;
    }
    /* Rahmen für die Moderatoren (ID:5) */
    .userOnlineGroupMarking5 .messageSidebar,{
        border: solid 2px #090;
        border-bottom-width: 33px;
    }
    .userOnlineGroupMarking5 .messageSidebar::before,{
        background-image: url("#{$style_image_path}dtp_logo.png");
        background-size: cover;
        bottom: -32px;
        content: "";
        height: 30px;
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
        width: 170px;
    }
    /* Rahmen für die 3D Artists (ID:14) */
    .userOnlineGroupMarking14 .messageSidebar,{
        border: solid 2px #06f;
        border-bottom-width: 33px;
    }
    .userOnlineGroupMarking14 .messageSidebar::before,{
        background-image: url("#{$style_image_path}dtp_logo.png");
        background-size: cover;
        bottom: -32px;
        content: "";
        height: 30px;
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
        width: 170px;
    }
    /* Rahmen für die Download-Manager (ID:9) */
    .userOnlineGroupMarking9 .messageSidebar,{
        border: solid 2px #f90;
        border-bottom-width: 33px;
    }
    .userOnlineGroupMarking9 .messageSidebar::before,{
        background-image: url("#{$style_image_path}dtp_logo.png");
        background-size: cover;
        bottom: -32px;
        content: "";
        height: 30px;
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
        width: 170px;
    }
        /* Rahmen für die Support-Engineer (ID:9) */
    .userOnlineGroupMarking10 .messageSidebar,{
        border: solid 2px #090;
        border-bottom-width: 33px;
    }
    .userOnlineGroupMarking10 .messageSidebar::before,{
        background-image: url("#{$style_image_path}dtp_logo.png");
        background-size: cover;
        bottom: -32px;
        content: "";
        height: 30px;
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
        width: 170px;
    }
    /* Rahmen für die User (ID:3) */
    .userOnlineGroupMarking3 .messageSidebar,{
        border: solid 2px #e65100;
        border-bottom-width: 33px;
    }
    .userOnlineGroupMarking3 .messageSidebar::before,{
        background-image: url("#{$style_image_path}dtp_logo.png");
        background-size: cover;
        bottom: -32px;
        content: "";
        height: 30px;
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
        width: 170px;
    }
        /* Rahmen für die Premium-Mitglieder (ID:12) */
    .userOnlineGroupMarking12 .messageSidebar,{
        border: solid 2px #369;
        border-bottom-width: 33px;
    }
    .userOnlineGroupMarking12 .messageSidebar::before,{
        background-image: url("#{$style_image_path}dtp_logo.png");
        background-size: cover;
        bottom: -32px;
        content: "";
        height: 30px;
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
        width: 170px;
    }
    /* Rahmen für die Donator (ID:13) */
    .userOnlineGroupMarking13 .messageSidebar,{
        border: solid 2px #B8860B;
        border-bottom-width: 33px;
    }
    .userOnlineGroupMarking13 .messageSidebar::before,{
        background-image: url("#{$style_image_path}dtp_logo.png");
        background-size: cover;
        bottom: -32px;
        content: "";
        height: 30px;
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
        width: 170px;
    }
    /* Rahmen für die Partner (ID:11) */
    .userOnlineGroupMarking11 .messageSidebar,{
        border: solid 2px #c0f;
        border-bottom-width: 33px;
    }
    .userOnlineGroupMarking11 .messageSidebar::before,{
        background-image: url("#{$style_image_path}dtp_logo.png");
        background-size: cover;
        bottom: -32px;
        content: "";
        height: 30px;
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
        width: 170px;
    }
    /* Rahmen für LPG Gönnatal (ID:15) */
    .userOnlineGroupMarking15 .messageSidebar,{
        border: solid 2px #0070e8;
        border-bottom-width: 33px;
    }
    .userOnlineGroupMarking15 .messageSidebar::before,{
        background-image: url("#{$style_image_path}dtp_logo.png");
        background-size: cover;
        bottom: -32px;
        content: "";
        height: 30px;
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
        width: 170px;
    }
}
/* MessageSidebar - Lange Benutzernamen umbrechen */
.messageSidebar .username {
    width: 140px;
}
/* MessageSidebar - Mobile Ansicht Sidebar Infos */
@include screen-md-down {
    .messageSidebar {
        .userCredits {
            display: block;
        }
        
        .dataList {
            font-size: 11px;
            line-height: 1.28;
        }
        
        dl.dataList > dd {
            min-height: 0;
        }
    }
}

/* ================================================================ BadgeOnline - Pulsating online ad by DtP Mario */
/* BadgeOnline - Pulsierende Online-Anzeige */
.badgeOnline {
    pointer-events: none;
}
@media screen and (min-width: 769px), print {
    .badgeOnline {
        box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
        animation:badgeOnline 3s ease-out infinite
    }
}
@media screen and (max-width: 768px) {
    .badgeOnline {
        color: transparent;
        padding: 0;
        top: 0;
        width: 0
        }
    
    .badgeOnline::before {
        background-color: inherit;
        border: 1px solid rgba(255, 255, 255, 1);
        border-radius: 50%;
        content: "";
        height: 16px;
        left: 34px;
        display: block;
        box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
        animation: badgeOnline 3s ease-out infinite;
        position: absolute;
        width: 16px
        }
}
@-webkit-keyframes badgeOnline {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(55, 221, 78, 0.4)
    }
    70% {
        -webkit-box-shadow: 0 0 0 5px rgba(55, 221, 78, 0.4)
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(55, 221, 78, 0.4)
    }
}
@keyframes badgeOnline {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(55, 221, 78, 0.4);
        box-shadow: 0 0 0 0 rgba(55, 221, 78, 0.4)
    }
    70% {
        -moz-box-shadow: 0 0 0 5px rgba(55, 221, 78, 0.4);
        box-shadow: 0 0 0 5px rgba(55, 221, 78, 0.4)
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(55, 221, 78, 0.4);
        box-shadow: 0 0 0 0 rgba(55, 221, 78, 0.4)
    }
}
/* ================================================================ MessageSidebar by DtP Mario */

/*keine ungelesenen Beiträge im Forum*/
.wbbBoardContainer[data-board-id="4"] > .wbbBoard > .fa-folder-open-o::before {
content: "\f0f6";
color: #61b319;
}
.wbbBoardContainer[data-board-id="5"] > .wbbBoard > .fa-folder-open-o::before {
content: "\f0f6";
color: #61b319;
}
.wbbBoardContainer[data-board-id="57"] > .wbbBoard > .fa-folder-open-o::before {
content: "\f0f6";
color: #61b319;
}
.wbbBoardContainer[data-board-id="62"] > .wbbBoard > .fa-folder-open-o::before {
content: "\f133";
color: #61b319;
}
.wbbBoardContainer[data-board-id="61"] > .wbbBoard > .fa-folder-open-o::before {
content: "\f128";
color: #61b319;
}
.wbbBoardContainer[data-board-id="65"] > .wbbBoard > .fa-folder-open-o::before {
content: "\f0f6";
color: #61b319;
}
.wbbBoardContainer[data-board-id="33"] > .wbbBoard > .fa-folder-open-o::before {
content: "\f03a";
color: #61b319;
}
.wbbBoardContainer[data-board-id="35"] > .wbbBoard > .fa-folder-open-o::before {
content: "\f0a6";
color: #61b319;
}
.wbbBoardContainer[data-board-id="15"] > .wbbBoard > .fa-folder-open-o::before {
content: "\f0a5";
color: #61b319;
}
.wbbBoardContainer[data-board-id="16"] > .wbbBoard > .fa-folder-open-o::before {
content: "\f041";
color: #61b319;
}
.wbbBoardContainer[data-board-id="17"] > .wbbBoard > .fa-folder-open-o::before {
content: "\f015";
color: #61b319;
}
.wbbBoardContainer[data-board-id="64"] > .wbbBoard > .fa-folder-open-o::before {
content: "\f128";
color: #61b319;
}
.wbbBoardContainer[data-board-id="7"] > .wbbBoard > .fa-folder-open-o::before {
content: "\f128";
color: #61b319;
}
.wbbBoardContainer[data-board-id="66"] > .wbbBoard > .fa-folder-open-o::before {
content: "\f0f9";
color: #61b319;
}
.wbbBoardContainer[data-board-id="36"] > .wbbBoard > .fa-folder-open-o::before {
content: "\f108";
color: #61b319;
}
.wbbBoardContainer[data-board-id="19"] > .wbbBoard > .fa-folder-open-o::before {
content: "\f115";
color: #61b319;
}
.wbbBoardContainer[data-board-id="58"] > .wbbBoard > .fa-folder-open-o::before {
content: "\f091";
color: #61b319;
}
.wbbBoardContainer[data-board-id="59"] > .wbbBoard > .fa-folder-open-o::before {
content: "\f11c";
color: #61b319;
}
.wbbBoardContainer[data-board-id="54"] > .wbbBoard > .fa-folder-open-o::before {
content: "\f0d6";
color: #61b319;
}
.wbbBoardContainer[data-board-id="20"] > .wbbBoard > .fa-folder-open-o::before {
content: "\f083";
color: #61b319;
}
.wbbBoardContainer[data-board-id="24"] > .wbbBoard > .fa-folder-open-o::before {
content: "\f0a1";
color: #61b319;
}
.wbbBoardContainer[data-board-id="68"] > .wbbBoard > .fa-folder-open-o::before {
content: "\f11b";
color: #61b319;
}
.wbbBoardContainer[data-board-id="26"] > .wbbBoard > .fa-folder-open-o::before {
content: "\f0f6";
color: #61b319;
}
.wbbBoardContainer[data-board-id="27"] > .wbbBoard > .fa-folder-open-o::before {
content: "\f0f6";
color: #61b319;
}
.wbbBoardContainer[data-board-id="28"] > .wbbBoard > .fa-folder-open-o::before {
content: "\f0f6";
color: #61b319;
}
.wbbBoardContainer[data-board-id="31"] > .wbbBoard > .fa-folder-open-o::before {
content: "\f0f6";
color: #61b319;
}
.wbbBoardContainer[data-board-id="69"] > .wbbBoard > .fa-folder-open-o::before {
content: "\f11b";
color: #61b319;
}


/*ungelesene Beiträge im Forum*/
.wbbBoardContainer[data-board-id="4"] > .wbbBoard > .fa-folder-open::before {
content: "\f15c";
color: #ff0000;
}
.wbbBoardContainer[data-board-id="5"] > .wbbBoard > .fa-folder-open::before {
content: "\f15c";
color: #ff0000;
}
.wbbBoardContainer[data-board-id="57"] > .wbbBoard > .fa-folder-open::before {
content: "\f15c";
color: #ff0000;
}
.wbbBoardContainer[data-board-id="62"] > .wbbBoard > .fa-folder-open::before {
content: "\f114";
color: #ff0000;
}
.wbbBoardContainer[data-board-id="61"] > .wbbBoard > .fa-folder-open::before {
content: "\f128";
color: #ff0000;
}
.wbbBoardContainer[data-board-id="65"] > .wbbBoard > .fa-folder-open::before {
content: "\f15c";
color: #ff0000;
}
.wbbBoardContainer[data-board-id="33"] > .wbbBoard > .fa-folder-open::before {
content: "\f03a";
color: #ff0000;
}
.wbbBoardContainer[data-board-id="35"] > .wbbBoard > .fa-folder-open::before {
content: "\f0a6";
color: #ff0000;
}
.wbbBoardContainer[data-board-id="15"] > .wbbBoard > .fa-folder-open::before {
content: "\f0a5";
color: #ff0000;
}
.wbbBoardContainer[data-board-id="16"] > .wbbBoard > .fa-folder-open::before {
content: "\f041";
color: #ff0000;
}
.wbbBoardContainer[data-board-id="17"] > .wbbBoard > .fa-folder-open::before {
content: "\f015";
color: #ff0000;
}
.wbbBoardContainer[data-board-id="64"] > .wbbBoard > .fa-folder-open::before {
content: "\f128";
color: #ff0000;
}
.wbbBoardContainer[data-board-id="7"] > .wbbBoard > .fa-folder-open::before {
content: "\f128";
color: #ff0000;
}
.wbbBoardContainer[data-board-id="66"] > .wbbBoard > .fa-folder-open::before {
content: "\f0f9";
color: #ff0000;
}
.wbbBoardContainer[data-board-id="36"] > .wbbBoard > .fa-folder-open::before {
content: "\f108";
color: #ff0000;
}
.wbbBoardContainer[data-board-id="19"] > .wbbBoard > .fa-folder-open::before {
content: "\f115";
color: #ff0000;
}
.wbbBoardContainer[data-board-id="58"] > .wbbBoard > .fa-folder-open::before {
content: "\f091";
color: #ff0000;
}
.wbbBoardContainer[data-board-id="59"] > .wbbBoard > .fa-folder-open::before {
content: "\f11c";
color: #ff0000;
}
.wbbBoardContainer[data-board-id="54"] > .wbbBoard > .fa-folder-open::before {
content: "\f0d6";
color: #ff0000;
}
.wbbBoardContainer[data-board-id="20"] > .wbbBoard > .fa-folder-open::before {
content: "\f083";
color: #ff0000;
}
.wbbBoardContainer[data-board-id="24"] > .wbbBoard > .fa-folder-open::before {
content: "\f0a1";
color: #ff0000;
}
.wbbBoardContainer[data-board-id="68"] > .wbbBoard > .fa-folder-open::before {
content: "\f11b";
color: #ff0000;
}
.wbbBoardContainer[data-board-id="26"] > .wbbBoard > .fa-folder-open::before {
content: "\f15c";
color: #ff0000;
}
.wbbBoardContainer[data-board-id="27"] > .wbbBoard > .fa-folder-open::before {
content: "\f15c";
color: #ff0000;
}
.wbbBoardContainer[data-board-id="28"] > .wbbBoard > .fa-folder-open::before {
content: "\f15c";
color: #ff0000;
}
.wbbBoardContainer[data-board-id="31"] > .wbbBoard > .fa-folder-open::before {
content: "\f15c";
color: #ff0000;
}
.wbbBoardContainer[data-board-id="69"] > .wbbBoard > .fa-folder-open::before {
content: "\f11b";
color: #ff0000;
}

/* shop-Angebotfarbe */
.jcoinsShopItemDiv .jcoinsShopItemPrice.jcoinsShopItemPriceOffer {
    color: rgb(255, 1, 1);
    text-decoration: line-through;
}

/* ToDo-Liste anpassung */
.todoSubCategories {
    display: flex;
    flex-wrap: wrap;
    margin-top: 5px;
}

.box16 {
    display: flex;
    margin-right: 5px;
}

/* ribbon best Price banner */
.jcoinsShopItemList li:nth-child(1) .ribbon.bestPrice {
    position: relative;
    right: -6px;
    top: -5px;
    z-index: 200;
    overflow: hidden;
    height: 75px;
}

.jcoinsShopItemDiv .ribbon.bestPrice span {
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    line-height: 20px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    width: 100px;
    display: block;
    background: #79a70a;
    background: linear-gradient(#f70505 0%, #8f0808 100%);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 19px;
    right: -21px;
}

.jcoinsShopItemDiv .ribbon.bestPrice span::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 100%;
    z-index: -1;
    border-left: 3px solid #8f0808;
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #8f0808;
}

.jcoinsShopItemDiv .ribbon.bestPrice span::after {
    content: "";
    position: absolute;
    right: 0px;
    top: 100%;
    z-index: -1;
    border-left: 3px solid transparent;
    border-right: 3px solid #8f0808;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #8f0808;
}
/* ribbon popular banner */
.jcoinsShopItemList li:nth-child(3) .ribbon.popular {
    position: relative;
    right: -6px;
    top: -6px;
    overflow: hidden;
    height: 77px;
}
.jcoinsShopItemList > li {
    overflow: visible;
}

.jcoinsShopItemDiv .ribbon.popular span {
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    line-height: 20px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    width: 100px;
    display: block;
    background: #79a70a;
    background: linear-gradient(#2989d8 0%, #1e5799 100%);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 19px;
    right: -21px;
}

.jcoinsShopItemDiv .ribbon.popular span::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 100%;
    z-index: -1;
    border-left: 3px solid #1e5799;
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #1e5799;
}

.jcoinsShopItemDiv .ribbon.popular span::after {
    content: "";
    position: absolute;
    right: 0px;
    top: 100%;
    z-index: -1;
    border-left: 3px solid transparent;
    border-right: 3px solid #1e5799;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #1e5799;
}

/* Buttons/Forum */
a.button.buttonPrimary {
    background-color: rgb(97, 179, 25);
    color: rgb(252, 252, 252);
}

/* ================================================================ InfoBox/Registration */

.boxesSidebarLeft .box.boxInfo, .boxesSidebarRight .box.boxInfo {
    background-color: rgba(88, 142, 56, 1);
    color: rgba(255, 255, 255, 1);
}
/* ================================================================ Basics */

@import url('https://fonts.googleapis.com/css?family=Raleway:400');

html, body {
    line-height: 1.28;
    font-family: 'Raleway', sans-serif;
}
a:hover {
    text-decoration: none !important;
}
select {
    padding: 2px;
    border: 1px solid #C0C0C0 !important;
    background-color: #fff !important;
    font-family: 'Arial', sans-serif;
    color: #626262 !important;
    font-size: 12px;
    margin: 2px;
}
textarea {
    font-size: 1rem;
    -webkit-transition: 200ms linear 0s;  
    -moz-transition: 200ms linear 0s;  
    -o-transition: 200ms linear 0s;  
    transition: 200ms linear 0s;
}
.highlight {
    background-color: #c31313;
    font-family: 'Arial';
    color: #FFF;
    padding: 1px 4px 1px;
    border-radius: 2px;
    text-shadow: none;
    margin: 1px;
}

/* ================================================================ Input */

input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="text"], input[type="url"] {
    font-family: 'Arial', sans-serif;
    -webkit-transition: 200ms linear 0s;  
    -moz-transition: 200ms linear 0s;  
    -o-transition: 200ms linear 0s;  
    transition: 200ms linear 0s;
    margin: 2px 0px;
    padding: 3px 6px;
    border-radius: 0px;
}

/* ================================================================ Icon Manipulation */

.wbbBoardList .wbbCollapsibleCategory h2 > .collapsibleButton {
    width: 17px;
}
.tabularBoxTitle > header .fa-chevron-down::before {
    content: "\f146";
    color: #fff;
    font-family: FontAwesome;
}
.wbbBoardList .wbbCollapsibleCategory.jsCollapsed h2 > .collapsibleButton {
    transform: none;
}
.wbbBoardList .wbbCollapsibleCategory.jsCollapsed h2 > .collapsibleButton::before {
    content: "\f0fe";
    color: #ffffff;
    font-family: FontAwesome;
    vertical-align: 1px;
}
.wbbBoardList .wbbBoard > .icon, .wbbBoardList .wbbCategory .wbbDepth2.wbbBoardContainer > .wbbBoard > .icon {
    margin-left: 10px;
}
.wbbAnnouncementIcon, .wbbStickyIcon, .wbbMovedIcon {
    border: none;
    border-radius: 0px;
    padding: 3px;
    left: -3px;
    top: -3px;
    font-size: 12px;
    height: 14px;
    line-height: 14px;
    width: 14px;
}
.wbbStickyIcon, .wbbMovedIcon {
    background-color: #31900e;
    color: #FFFFFF;
}
.wbbAnnouncementIcon {
    background-color: #B40000;
    color: #FFFFFF;
}

/* ======================================================= New Entry Arrows by DtP Mario ================= */

.messageGroupList .tabularListColumns.new .columnSubject > h3 > .messageGroupLink::before,
.messageGroupList tr.new .columnSubject > h3 > .messageGroupLink::before {
    content: "\f105\f105\f105";
    font-family: FontAwesome;
    padding-right: 5px;
    font-style: normal;
}

/* ================================================================ Loading Animation */

.spinner {
    background-color: rgba(0, 0, 0, 0.6);
    border: none;
    color: #FFFFFF;
    border-radius: 4px;
}
.fa-spinner, .galleryImagesInMotion.loading::before, .galleryImageGrid > .imageGridMain:not(.hideLoading)::before, .galleryImageGrid > .imageGridColumn > li::before {
    border: 2px solid #FFFFFF;
    border-top-color: #000000;
}
.galleryImagesInMotion.loading::before, .galleryImageGrid > .imageGridMain:not(.hideLoading)::before, .galleryImageGrid > .imageGridColumn > li::before {
    border-top-color: #000000;
}

/* ================================================================ Balloon Tooltip */

.balloonTooltip {
    background-color: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    font-weight: 400;
    font-size: 10px;
    border-radius: 0px;
    padding: 5px 12px 5px;
}

/* ================================================================ Small Popup */

.popover {
    width: 400px !important;
    border-radius: 0px;
}
.popoverContent {
    border-radius: 0px;
}

/* ================================================================ Small Dropdown Menu */

.dropdownMenu {
    border-radius: 0px;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, .2);
    margin-top: 8px
}
.dropdownMenu::before {
    border: 6px solid transparent;
    border-bottom-color: $wcfDropdownBackground;
    border-top-width: 0;
    content: "";
    display: inline-block;
    left: 10px;
    position: absolute;
    top: -6px;
    z-index: 101;
}
.dropdownMenu.dropdownOpen.dropdownArrowBottom.dropdownArrowRight {
    border-radius: 0px;
    margin-bottom: 8px;
}
.dropdownMenu.dropdownArrowRight.dropdownOpen::before {
    right: 15px;
    left: auto;
}
.dropdownMenu.dropdownOpen.dropdownArrowBottom.dropdownArrowRight::before {
    border: 6px solid transparent;
    border-bottom-color: $wcfDropdownBackground;
    border-top-width: 0;
    content: "";
    display: inline-block;
    right: 10px;
    position: absolute;
    bottom: -6px;
    z-index: 101;
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    left: auto;
    top: auto;
}
.dropdownMenu.dropdownOpen.dropdownArrowBottom {
    border-radius: 0px;
    margin-bottom: 8px;
}
.dropdownMenu.dropdownOpen.dropdownArrowBottom::before {
    border: 6px solid transparent;
    border-bottom-color: $wcfDropdownBackground;
    border-top-width: 0;
    content: "";
    display: inline-block;
    left: 10px;
    position: absolute;
    bottom: -6px;
    z-index: 101;
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    right: auto;
    top: auto;
}
.dropdownMenu li > a, .dropdownMenu li > span {
    padding: 4px 20px;
    font-size: 11px;
    text-transform: uppercase;
}
.dropdownMenu li.dropdownDivider {
    border-top: 1px dotted rgb(158, 156, 156);
    margin: 1px 10px;
}
.dropdownMenu li.boxFlag {
    padding-top: 2px;
}
.boxFlag > .box24, .boxFlag.box24 {
    min-height: 14px;
}

/* ================================================================ WBB Suite 3 Dropdown */

.interactiveDropdown {
    border-radius: 0px;
    margin-top: 0px;
    position: absolute;
}
.interactiveDropdownHeader {
    background-color: $wcfHeaderMenuBackground;
    color: #FFF;
    padding: 6px 11px 5px;
    min-height: 34px;
}
.userPanel > ul > li.dropdownOpen > a::before, .userPanel > ul > li.open > a::before {
    content: "";
    position: absolute;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent $wcfHeaderMenuBackground transparent;
    top: 41px;
    left: 12px;
}
#userPanelSearchButton::before {
    display: none;
}
#pageLanguageContainer.dropdownOpen > a::before {
    display: none;
}
.interactiveDropdownHeader .interactiveDropdownTitle {
    font-size: 14px;
    font-weight: 400;
}
.interactiveDropdownHeader a .icon {
    color: #FFFFFF;
}
.interactiveDropdownItemsContainer {
    border: none;
}
.interactiveDropdownItems:not(.interactiveDropdownItemsUserMenu) > li {
    background-color: #ffffff;
}
.interactiveDropdownItems > li:hover {
    background-color: #f4f4f4;
}
.interactiveDropdownItems > li {
    padding: 11px 14px;
}
.interactiveDropdownItems > li:not(:last-child) {
    border-bottom: none;
}
.interactiveDropdownItems .loading, .interactiveDropdownItems .noItems {
    font-size: 14px;
    font-weight: 300;
}
.interactiveDropdownShowAll {
    padding: 8px 20px 7px;
    background-color: #dddddd;
    color: #353535;
}
.interactiveDropdownShowAll:hover {
    color: #555555;
    text-decoration: none;
}
.interactiveDropdownItems > li .icon48 {
    line-height: 32px;
    width: 48px;
    font-size: 28px;
    height: 32px;
    width: 32px;
    vertical-align: 5px;
}
.interactiveDropdown .containerHeadline > h3 {
    font-size: 14px;
}
.interactiveDropdownItems .inlineList li a {
    font-size: .85rem;
}
.interactiveDropdownItemOutstanding h3 {
    font-weight: 600;
}
/* ================================================================ Content */

.boxesTop {
    border-bottom: none;
}
.boxesBottom {
    border-top: none;
}
.boxesTop .box, .boxesBottom .box {
    margin-bottom: 30px;
    margin-top: 30px;
    padding: 0px;
}
.main {
    padding: 0px;
}
.main > div {
    padding: 30px 20px;
}
.boxesFooterBoxes .box {
    flex: 0 0 100%;
    margin-bottom: 20px;
    max-width: 100%;
}

/* ================================================================ Navigation Header */

.pageNavigation {
    height: 30px;
    padding: 0px;
}
.pageNavigation > div {
    min-height: 30px;
    height: 30px;
    padding: 0px 0px 0px 10px;
}
.pageNavigationIcons > li {
    background-color: $wcfHeaderMenuBackground;
    padding: 7px;
}
.pageNavigationIcons > li:not(:last-child) {
    margin-left: 0px;
}
.pageNavigationIcons > li:hover {
    background-color: $wcfFooterBackground;
}
.pageNavigationIcons > li a {
    color: #ffffff;
}

/* ================================================================ Breadcrumbs */

.breadcrumbs > ol > li:first-child a::before {
    content: "\f015";
    font-family: FontAwesome;
    font-weight: normal !important;
    padding-right: 6px;
    display: inline-block;
    color: rgba(166, 170, 177, 1) !important;
}
.breadcrumbs > ol > li:not(:last-child) {
    margin-right: 5px;
}
.breadcrumbs > ol > li:not(:last-child) > a {
    margin-right: 5px;
}
.breadcrumbs > ol > li:not(:last-child)::after {
    content: "|";
}
.breadcrumbs > ol > li > a {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 11px;
}

@include screen-lg {

/* ================================================================ Top Userpanel */

#pageHeader {
    height: 320px;
}
.pageHeaderPanel {
    background-color: transparent;
    position: relative;
    border-top: 40px solid $wcfFooterCopyrightBackground;
    z-index: auto;
}
.pageHeaderFacade > .layoutBoundary {
    padding: 0px;
}
.userPanel {
    position: absolute;
    left: 0px;
    margin-top: -40px;
    width: 100%;
}
.pageHeaderPanel > .layoutBoundary {
    position: relative;
    padding: 0px;
}
.pageHeaderContainer {
    background: url(#{$style_image_path}headerBG.jpg);
    background-repeat: no-repeat;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;    
    height: 320px;
    border-bottom: 40px solid $wcfHeaderMenuLinkBackground;
    padding-top: 0px;
}
.userPanel li.jsOnly {
    flex: 1 100%;
    justify-content: flex-end;
}
#pageHeaderFacade {
    margin-top: -260px;
}
#userPanelSearchButton {
    display: none;
}
.pageHeaderSearch {
    display: block;
    position: relative;
    margin-top: -208px;
    margin-right: 6px;
    z-index: 100;
}
.pageHeaderSearchInputContainer .pageHeaderSearchType > .button {
    border-radius: 2px 0px 0px 2px;
    max-width: 220px;
    min-width: 120px;
    margin-right: 1px;
    padding: 1px 8px 1px 8px;
    height: 28px;
    font-weight: 400;
    font-size: 9px;
}
.pageHeaderSearchInputContainer .pageHeaderSearchType > .button:hover, .pageHeaderSearchInputContainer .pageHeaderSearchType.dropdownOpen > .button {
    opacity: 0.8;
}
.pageHeaderSearchInputContainer .pageHeaderSearchInputButton {
    background-color: $wcfHeaderSearchBoxBackground;
    color: #fff;
    padding: 1px 5px;
    width: 32px;
    height: 28px;
    border-radius: 0px 2px 2px 0px;
    margin-left: 0px;
}
.pageHeaderSearchInputContainer .pageHeaderSearchInputButton:hover {
    background-color: $wcfHeaderSearchBoxBackgroundActive;
    color: #fff;
}
.pageHeaderSearchInputContainer .pageHeaderSearchInput {
    color: #fff;
    padding-bottom: 6px;
    padding-top: 6px;
    width: 220px;
    border-radius: 0px;
    height: 28px;
    line-height: 12px;
    font-size: 11px;
    margin-top: 0px;
    margin-right: 1px;
    z-index: 1;
}
.pageHeaderSearchInputContainer .pageHeaderSearchInput:focus, .pageHeaderSearchInputContainer .pageHeaderSearchInput:hover {
    color: #FFFFFF;
    opacity: 1;
}
.pageHeaderSearchInputContainer .pageHeaderSearchInputButton .icon {
    vertical-align: -1px;
}
.dropdownIndicator::after {
    font-weight: 400;
    font-size: 12px;
}
a.loginLink::before {
    content: "\f011";
    font-family: FontAwesome;
    margin-right: 6px;
    font-weight: 400;
    font-size: 14px;
}
.userPanel > ul > li > a {
    background-color: transparent;
    text-transform: uppercase;
    font-size: 11px;
    padding: 0 8px;
    height: 40px;
    -webkit-transition: 200ms linear 0s;
    -moz-transition: 200ms linear 0s;
    -o-transition: 200ms linear 0s;
    transition: 200ms linear 0s;
}
.userPanel > ul > li > a > span:not(.icon):not(.badge) {
    display: inline-block;
    padding-left: 5px;
}
.pageHeaderContainer .icon {
    font-size: 18px;
    width: 22px;
}
.userPanel > ul > li.dropdownOpen > a, .userPanel > ul > li.open > a, .userPanel > ul > li:hover > a {
    background-color: $wcfFooterBackground;
}

/* ================================================================ Main Menu */

.mainMenu {
    margin-top: 240px;
    margin-right: 0px;
}
.mainMenu .boxMenu > li > a {
    height: 40px;
    padding: 0 30px;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1px;
    -webkit-transition: 200ms linear 0s;  
    -moz-transition: 200ms linear 0s;  
    -o-transition: 200ms linear 0s;  
    transition: 200ms linear 0s;
}
.mainMenu .boxMenu > li:hover > a {
    background-color: $wcfFooterBackground;
}
.mainMenu .boxMenu > .boxMenuHasChildren > a::after {
    content: "\f0d7";
    font-size: 14px;
    font-weight: normal;
    margin-left: 10px;
    font-style: normal;
}
.mainMenu .mainMenuShowPrevious {
    background: linear-gradient(to left, transparent 0%, $wcfHeaderMenuLinkBackground 75%);
}
.mainMenu .mainMenuShowNext {
    background: linear-gradient(to right, transparent 0%, $wcfHeaderMenuLinkBackground 75%);
}
    
/* ================================================================ Main Menu Small */

.mainMenu .boxMenu .boxMenuDepth1 {
    border-radius: 0px;
    padding: 0px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ================================================================ Logo */

.pageHeaderLogo {
    height: 130px;
    z-index: 100;
}
.pageHeaderLogo > a {
    margin-left: 10px;
    padding: 0px 0;
}
}

/* ================================================================ Boxes Footer & Copyright */

.boxesFooter {
    padding: 2px 0px 0px;
    min-height: 30px;
    line-height: 30px;
}
.pageFooterCopyright > .layoutBoundary > div:not(:first-child) {
    margin-top: 2px;
}
.boxesFooter a {
    color: rgb(195, 195, 195);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 10px;
}
.pageFooterCopyright {
    text-align: left;
    text-transform: uppercase;
    font-style: italic;
    font-size: 10px;
    padding: 12px 0;
}
.jsButtonStyleChanger::before {
    content: "\f03e";
    font-family: FontAwesome;
    padding-right: 4px;
}
.zan a {
    color: #BFBFBF;
}
.zan a:hover {
    color: #FFFFFF;
}
/* ================================================================ Social Media Button */

.messageShareButtons .button {
    border-radius: 0px;
    padding: 2px 8px;
}
.messageShareButtons .button:hover {
    background-color: transparent;
    opacity: .8;
}
.messageShareButtons .jsShareFacebook {
    background-color: transparent;
    color: rgba(59, 89, 153, 1) !important;
    border: 2px solid rgba(59, 89, 153, 1);
}
.messageShareButtons .jsShareTwitter {
    background-color: transparent;
    color: #55acee !important;
    border: 2px solid #55acee;
}
.messageShareButtons .jsShareGoogle {
    background-color: transparent;
    color: rgba(220, 78, 65, 1) !important;
    border: 2px solid rgba(220, 78, 65, 1);
}
.messageShareButtons .jsShareReddit {
    background-color: transparent;
    color: rgba(255, 69, 0, 1) !important;
    border: 2px solid rgba(255, 69, 0, 1);
}
.messageShareButtons .jsShareWhatsApp {
    background-color: transparent;
    color: #25d366 !important;
    border: 2px solid #25d366;
}
.messageShareButtons .jsShareLinkedIn {
    background-color: transparent;
    color: rgba(0, 122, 182, 1) !important;
    border: 2px solid rgba(0, 122, 182, 1);
}
.messageShareButtons .jsSharePinterest {
    background-color: transparent;
    color: rgba(189, 33, 37, 1) !important;
    border: 2px solid rgba(189, 33, 37, 1);
}
.messageShareButtons .jsShareXing {
    background-color: transparent;
    color: rgba(0, 101, 103, 1) !important;
    border: 2px solid rgba(0, 101, 103, 1);
}
/* ========================================= Woltlab Suite 3 Image Viewer Modification by DtP Mario */

.wcfImageViewer {
    background-color: $wcfFooterBackground;
}
.wcfImageViewer > header {
    background-color: $wcfHeaderMenuBackground;
}
.wcfImageViewer.wcfImageViewerMobile > header {
    padding: 8px 10px;
}
.wcfImageViewer > footer {
    background-color: $wcfHeaderMenuLinkBackground;
}
.wcfImageViewer.wcfImageViewerMobile > header, .wcfImageViewer.wcfImageViewerMobile > footer {
    line-height: 1.1;
}
.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: $wcfHeaderMenuLinkBackground;
}
.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;
}

/* ================================================================ Announcement Icon Modification by DtP Mario */

.info, .error, .warning, .success {
    position: relative;
    padding-left: 52px; 
    border: none;
&::after {
    font-family: FontAwesome;
    font-size: 28px;
    display: block;
    height: 32px;
    left: 12px;
    margin-top: -16px;
    position: absolute;
    top: 50%;
    width: 32px;
    text-align: center;
    color: inherit;
}
}
.info::after {
    content: $fa-var-info;
}
.error::after {
    content: $fa-var-ban;
}
.warning::after {
    content: $fa-var-warning;
}
.success::after {
    content: $fa-var-check;
}
.info.notice, .error.notice, .warning.notice, .success.notice {
    padding-top: 20px;
    padding-left: 52px;
&::after {
    top: 35px;
}
}
.info span.icon, .success span.icon, .error span.icon {
    color: #fff;
}
.info.notice.noticeDismissible.active, .error.notice.noticeDismissible.active, .warning.notice.noticeDismissible.active, .success.notice.noticeDismissible.active {
    padding-top: 20px;
    padding-left: 52px;
&::after {
    top: 35px;
}
}
.sidebar .info::after, .sidebar .error::after, .sidebar .warning::after, .sidebar .success::after {
    top: 25px;
}
.pageFooterStickyNotice .error::after, .pageFooterStickyNotice .info::after, .pageFooterStickyNotice .success::after, .pageFooterStickyNotice .warning::after {
    display: none;
}
#systemNotification > p.info::after, #systemNotification > p.error::after, #systemNotification > p.success::after, #systemNotification > p.warning::after {
    display: none;
}
#systemNotification > p.info, #systemNotification > p.error, #systemNotification > p.success, #systemNotification > p.warning {
    padding: 10px 20px;
}
.noticeDismissible > .jsDismissNoticeButton {
    float: right;
    margin-top: -10px;
    margin-right: -10px;
}
.pageFooterStickyNotice .error, .pageFooterStickyNotice .info, .pageFooterStickyNotice .success, .pageFooterStickyNotice .warning {
    border-top-width: 0px;
}
.info.cookiePolicyNotice {
    background-color: rgba(0, 0, 0, 0.85);
    border: none;
}
.pageFooterStickyNotice .cookiePolicyNotice .cookiePolicyNoticeMoreInformation, .pageFooterStickyNotice .cookiePolicyNotice .cookiePolicyNoticeDismiss {
    background-color: #171717;
}
.pageFooterStickyNotice .cookiePolicyNotice .cookiePolicyNoticeMoreInformation:hover {
    background-color: #3b3b3b;
}

/* ================================================================ Tags */

.boxesSidebarLeft .tagList li a, .boxesSidebarRight .tagList li a {
    background-color: transparent;
    margin: 1px 0px 1px 0px;
    display: inline-block;
    padding: 2px 5px 1px;
    color: $wcfSidebarLink;
    border: 1px solid $wcfSidebarLink;
    border-radius: 0px !important;
}
.boxesSidebarLeft .tagList li a::before, .boxesSidebarRight .tagList li a::before {
    content: "\f02b";
    font-family: FontAwesome;
    font-weight: 400;
    margin-right: 6px;
}
.boxesSidebarLeft .tagList li a:hover, .boxesSidebarRight .tagList li a:hover {
    background-color: transparent !important;
    color: $wcfSidebarLinkActive;
    border: 1px solid $wcfSidebarLinkActive !important;
    border-radius: 0px !important;
}
.tagList .tag::before {
    display: none;
}
.tagList .tag {
    background-color: transparent;
    color: #666;
    display: inline-block;
    margin-left: 0px;
    padding: 3px 4px 2px 4px;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 400;
    border: 1px solid;
    line-height: 12px;
}
.tagList .tag:hover {
    background-color: transparent !important;
    border: 1px solid #9C9EA2;
    color: #9C9EA2;
}

/* ================================================================ Badges */

.badge, a.badge {
    background-color: rgb(83, 92, 102);
    border-radius: 1px;
    text-shadow: none !important;
    font-family: 'Arial' !important;
    font-weight: normal;
    letter-spacing: 0px !important;
    text-transform: none !important;
    font-style: normal !important;
}
a.badge:hover {
    color: rgb(255, 255, 255);
}
.userTitleBadge {
    padding: 2px 7px !important;
    line-height: 15px;
}
.userPanel > ul > li > a > .badgeUpdate {
    box-shadow: none;
    left: 2px;
    padding: 1px 5px;
    position: relative;
    top: -1px;
    color: #fcf7f7;
    margin-left: 3px;
    margin-right: 0px;
    height: 15px;
    line-height: 14px;
    font-weight: normal;
    font-size: 10px;
}
.mainMenu .boxMenu > li > a > .boxMenuLinkOutstandingItems {
    color: #fef9f9;
    margin-left: 7px;
    line-height: 14px;
    height: 18px;
    font-weight: bold;
    font-size: 10px;
}
.mainMenu .boxMenu .boxMenuDepth1 .boxMenuLinkOutstandingItems.badge.badgeUpdate {
    top: -1px;
    left: 4px;
    padding: 1px 4px 1px;
    font-weight: normal;
    font-size: 10px;
    border-radius: 0px;
    line-height: 12px;
}
.sidebar .boxTitle .badge {
    top: 1px;
    right: -2px;
}
.tabMenu > ul > li > a .badge {
    background-color: #838e9b;
    margin-bottom: 0px;
    margin-top: -3px;
    margin-left: 4px;
    line-height: 12px;
    height: 16px;
    padding: 2px 5px;
}
.pollContainer h2 .badge {
    margin-top: -4px;
    margin-bottom: 4px;
}
.badge.label.newMessageBadge {
    background-color: #c90b0b;
    font-family: arial;
    text-transform: uppercase !important;
}
@include screen-lg {
.message.messageSidebarOrientationLeft .messageSidebar .badgeOnline {
    left: 6px;
    border-radius: 3px;
    line-height: 17px;
    height: 19px;
    padding: 1px 6px;
    box-shadow: 2px 1px 2px rgba(0, 0, 0, 0.4);
}
}
.contentHeader .contentTitle .badge, .boxHeadline .contentTitle .badge, .contentHeader > h1 .badge, .boxHeadline > h1 .badge {
    top: -2px;
    line-height: 1.28;
}
.galleryNewImageBagde {
    background-color: rgb(198, 12, 12);
    border-radius: 0px;
    font-family: 'Arial', sans-serif;
    color: rgba(255, 255, 255, 1);
    font-weight: bold;
    text-transform: uppercase;
    padding: 2px 8px;
    right: 12px;
    top: 12px;
}
.wcfLikeCounter.likeCounterDisliked {
    color: #b91616 !important;
}

/* ================================================================ Article */

h3.articleListTitle {
    color: #2f3339 !important;
}
.articleNavigation .previousArticleButton > a .articleNavigationArticleTitle, .articleNavigation .nextArticleButton > a .articleNavigationArticleTitle {
    font-weight: 600;
    letter-spacing: -1px;
    color: rgba(64, 65, 67, 1) !important;
}
.articleNavigation .previousArticleButton > a .articleNavigationArticleTitle::before, .articleNavigation .nextArticleButton > a .articleNavigationArticleTitle::before {
    content: "\f1ea";
    font-family: FontAwesome;
    font-weight: normal !important;
    font-style: normal !important;
    text-align: center;
    margin-right: 7px;
}
.articleNavigation .previousArticleButton > a .articleNavigationArticleImage > img,
.articleNavigation .nextArticleButton > a .articleNavigationArticleImage > img, .articleList .articleListImage > img {
    opacity: 1 !important;
}
.articleList > li {
    background-color: #f7f7f7;
    padding: 14px 16px;
}
.articleList > li:not(:first-child) {
    margin-top: 20px;
}
.section .articleImage {
    background-color: #f7f7f7;
    padding: 13px;
    margin-bottom: -10px;
}
.articleContent .articleTeaser {
    background-color: #f7f7f7;
    border-bottom: 10px solid #fff;
    margin: -18px -18px 15px;
    padding: 12px 18px 12px;
}
.section.articleContent {
    background-color: #f7f7f7;
    padding: 0px 18px 14px;
    margin-top: 19px;
}

/* ================================================================ Woltlab Suite 3 Filebase */

.filebaseFileList .filebaseFileCard {
    border: none;
    background-color: #f7f7f7;
}
.filebaseFileCard .filebaseFilePrice {
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    background-color: #090;
    color: #fff;
    padding: 4px 8px 3px;
    font-weight: 700;
    border-radius: 3px;
}
.filebaseFileCard .filebaseFileIconContainer .badge {
    position: absolute;
    margin-top: -24px;
    margin-left: 6px;
    border-radius: 0px;
}
.filebaseFileDataContainer {
    overflow: visible !important;
}
.filebaseFileCard .filebaseFilePriceInfo .icon::before {
    top: auto;
    background-color: #090;
    color: #fff;
    height: 26px;
    width: 26px;
    line-height: 26px;
    border-radius: 3px;
    margin-top: -1px;
    position: absolute;
    margin-left: -24px;
}
.filebaseVersionNumber {
    color: rgb(35, 137, 26);
}

/* ================================================================ WBB Suite 3 Calendar */

.calendarFullMonthView .calendarMonthViewHeader {
    padding-left: 34px;
}
.calendarFullMonthView .calendarWeeks > li > div {
    text-align: center;
    width: 34px;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -1px;
}
.calendarMonthView .calendarMonthViewHeader {
    background-color: $wcfNavigationBackground;
    border-bottom: none;
}
.calendarFullMonthView .calendarMonthViewHeader > li {
    padding: 6px 10px;
}
.calendarMonthView .calendarMonthViewHeader > li {
    font-weight: 600;
    font-size: 13px;
    color: #FFFFFF;
    text-transform: uppercase;
    border-right: 1px solid;
}
.sidebar .calendarMonthView .calendarMonthViewHeader > li {
    font-size: 11px;
}
.sidebar .calendarMonthView .calendarWeeks > li {
    background-color: #ece9e9;
}
.calendarMonthView .calendarMonthViewHeader > li:first-child {
    border-left: 1px solid;
    margin-left: -1px;
}
.calendarMonthView .calendarMonthViewHeader > li:last-child {
    border-right: none;
}
.calendarFullMonthView .calendarWeeks > li, .calendarMonthView .calendarWeeks > li {
    background-color: #f2f2f2;
}
.calendarMonthView .calendarWeeks .calendarWeekDays > li.calendarToday {
    background-color: #e4e4e4;
}
.calendarWeekView .calendarDay {
    background-color: $wcfNavigationBackground;
    border: none;
    border-radius: 3px;
    color: #fff;
}
.calendarWeekView .calendarDay > p {
    color: rgb(255, 255, 255);
}
.calendarWeekView .calendarDay > h3 > a {
    color: rgb(255, 255, 255);
}
.calendarWeekView .containerList > li.calendarToday {
    background-color: #f1f1f1;
}
.calendarWeekView .calendarEvents > li {
    background-color: transparent;
    padding: 5px 10px;
    border-left: 3px solid #303030;
}
.calendarWeekView .containerList > li.calendarToday .calendarDay {
    background-color: $wcfHeaderMenuLinkBackground;
}
.section.sectionContainerList.calendarWeekView:first-child {
    background-color: transparent;
    padding: 0px;
}
.section.sectionContainerList.calendarWeekView {
    background-color: transparent;
    padding: 0px;
}
#tpl_calendar_daily .section.sectionContainerList {
    background-color: transparent;
    padding: 0px;
}
.section.calendarEvent {
    background-color: #f7f7f7;
    padding: 14px;
}
.sidebar .calendarMonthView .calendarWeeks .calendarWeekDays h3 a {
    font-weight: 600 !Important;
    color: #f00;
}
.sidebar .boxContainer > section:not(.box) {
    padding: 0px 10px 0px 10px;
}
.sidebar .section:not(.sectionContainerList) > .sectionHeader, .sidebar .section:not(.sectionContainerList) > .sectionTitle {
    background-color: $wcfNavigationBackground;
    font-size: 13px;
    text-transform: uppercase;
    padding: 4px 8px;
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: 10px;
    line-height: 19px;
    color: #ffffff;
}
.sidebar .section:not(.sectionContainerList) > .sectionHeader a, .sidebar .section:not(.sectionContainerList) > .sectionTitle a {
    color: #ffffff;
    font-size: 13px;
}
.section.sectionContainerList.calendarWeekView h2.sectionTitle {
    border-bottom: 2px solid;
}
.calendarMonthView .calendarWeeks .calendarWeekDays h3, .calendarMonthView .calendarWeeks .calendarWeekDays h3 a {
    font-weight: 400 !Important;
}
.sidebar .calendarMonthView .calendarWeeks .calendarWeekDays > li.calendarOffMonth > h3 > a {
    color: #f00;
}
.box .calendarMonthView .calendarWeekDays > li > h3 > a {
    font-weight: 600 !important;
    color: #f00;
}

/* WBB Suite 3 Blog */

#tpl_blog_entry .messageList.messageReducedList.blogEntryList .message {
    padding: 14px;
}
.blogEntryReadMoreButton .icon {
    display: none;
}
.blogEntryReadMoreButton::before {
    content: "\f105";
    font-family: 'FontAwesome';
    font-size: 14px;
    font-weight: 400;
    height: 22px;
    line-height: 22px;
    margin-right: 5px;
}
.blogEntryReadMoreButton {
    margin-top: 10px;
    position: relative;
    background-color: $wcfButtonBackground;
    padding: 4px 10px 4px;
    line-height: 22px;
    font-size: 12px;
    border-radius: 2px;
    font-weight: 400;
    color: #ffffff;
}
.blogEntryReadMoreButton:hover {
    background-color: $wcfButtonBackgroundActive;
    color: rgba(255, 255, 255, 1);
}
.section.blogEntry .message {
    padding: 14px;
    background-color: #f7f7f7;
}

Display More

Darklord · Dec 25th 2020

Im Stil unabhängigen SCSS auch nachgesehen, da es ja auch im Standard Stil auftritt, dürfte es eventuell da zu finden sein.

Ansonsten mal die einzelnen Plugins checken, welche eigene Stilelemente mitbringen.

Julius Cesar · Dec 25th 2020

Danke. Also in den Stilen ist nichts der gleichen zu finden. Und welches Plugin das nun auf einmal so verursacht muss ich dann mal nachforschen. Könnte etwas dauern aber ich melde mich sobald ich etwas habe.

Julius Cesar · Dec 25th 2020

So ich habe nun nochmal genauer geschaut aber nichts gefunden was darauf schließen lässt

Matthias Schmidt · Dec 25th 2020

Suche in den style-Ordner aller Apps (inklusive Core) man nur nach "100vw". Der umgebende CSS-Code deutet auf EasyMedia hin.

Darklord · Dec 25th 2020

Matthias Schmidt das hatte ich auch schon gedacht, aber in der EasyMedia selbst ist diesbezüglich nichts zu finden,

die Stelle im CSS sieht mir danach aus, als wären dort eigene CSS Deklarationen eingetragen worden.

Julius Cesar kann es sein, das du das Feuerwerk von Fabi installiert hast?

RE: Feuerwerk Script

Julius Cesar · Dec 25th 2020

Quote from Darklord

Matthias Schmidt das hatte ich auch schon gedacht, aber in der EasyMedia selbst ist diesbezüglich nichts zu finden,
die Stelle im CSS sieht mir danach aus, als wären dort eigene CSS Deklarationen eingetragen worden.

Julius Cesar kann es sein, das du das Feuerwerk von Fabi installiert hast?

RE: Feuerwerk Script

Display More

Nein sondern das von Simon

Julius Cesar · Dec 25th 2020

Quote from Matthias Schmidt

Suche in den style-Ordner aller Apps (inklusive Core) man nur nach "100vw". Der umgebende CSS-Code deutet auf EasyMedia hin.

Ich habe in den style Ordner geschaut und die firework.scss gefunden mit folgendem Inhalt

Code

canvas {
  width:100vw;
  height:100vh;
  position:fixed;
  top:0;
  left:0;
  z-index:0;
  pointer-events: none;
}

EDIT: hab das Plugin Feuerwerk deinstalliert und siehe da, es ist nun behoben. Danke Leute für eure Hilfe

Bilder in der SlideBox sehr groß

Participate now!

Share

Similar Threads

Einschränkung der Anzahl Links, mit denen Bilder hinterlegt werden können

Nachkomprimierung Bilder