/* ==UserStyle==
@name           Wider Sweclockers
@namespace      github.com/openstyles/stylus
@version        0.2.0
@description    More width on Sweclockers
@author         Lagers
@homepageURL	https://github.com/rlagers/Wider-Sweclockers
@supportURL		https://github.com/rlagers/Wider-Sweclockers/issues
@updateURL		https://raw.githubusercontent.com/rlagers/Wider-Sweclockers/main/wider-sweclockers.user.styl
@license		MPL-2.0
@preprocessor   stylus

@var select var-page-width "Page Max-Width" {
    "tighten": "1000px",
    "Orginal": "1270px",
    "1400px": "1400px",
    "1600px": "1600px",
    "1800px*": "1800px",
    "100%": "100%"
}
@var select var-article-width "Article Max-Width" {
    "Orginal": "660px",
    "Middle" : "972px",
    "Big": "1280px",
    "100%*": "100%"
}
@var select var-forum-width "Forum Max-Width" {
    "Orginal": "940px",
    "Middle" : "1200px",
    "Big": "1400px",
    "100%*": "100%"
}
@var select var-image-width "Image Max-Width" {
    "Orginal": "696px",
    "Middle" : "972px",
    "Big*": "1280px",
    "100%": "100%"
}

==/UserStyle== */

@-moz-document domain("sweclockers.com") {

    /************************************************
     Main Layout of Sweclockers
    ************************************************/
    .container,
    .col-content,
    .col-content-wide {
        max-width: var-page-width !important;
    }

    /************************************************
     Main Content And Articles
    ************************************************/
    .content-primary,
    .content-head,
    .content-foot,
    .carousel {
        max-width: var-article-width;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /************************************************
     Image in Articles
    ************************************************/
    .content-primary img,
    .content-primary .bbVideoYoutube,
    .article-bbcode .bbImage,
    .article-bbcode .bbSlideshow,
    .article-bbcode .bbVideo,
    .article-bbcode .bbVideoYoutube,
    .card-text .bbcode .bbVideoYoutube,
    .article-bbcode .tv-frame {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100%;
        max-width: var-image-width !important;
    }

    /************************************************   
     Forum and other image and video default to 728px
    ************************************************/
    .bbImage,
    .forum-post-body .bbVideo,
    .forum-post-body .bbVideoYoutube {
        max-width: 728px;
        height: auto;
    }
        
    /* SweC Shop Image */
    .article-footer .bbImage .inner {
        max-width: 154px;
    }
    
    .withPrisjakt img {
        width: 11px;
        height: auto;
    }
    
    /************************************************
     Forum Width
    ************************************************/
    #forumList-1,
    #threadList-1,
    .list-actions,
    .forum-posts,
    .thread-footer,
    .forumForm,
    .col-content-wide .content-head {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: var-forum-width;
    }

    /************************************************
     Gallery list 
    ************************************************/
    
    .galleryList {
        justify-content: space-around;
    }

    /* don't work with flex row with nowrap on H3. Why? */
    .gallery-item h3 {
        white-space: normal;
    }

    /* 154px /2 * 3 */
    .gallery-item {
        max-width: 231px;
    }

    /* For the galleri */
    .gallery-images {
        width: 100%;
    }

    .galleryText .bbVideo {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}