MediaWiki:Custom-common.less/mainpage.less

//

/****************************
 * General
 ****************************/
/* Effects widgets on the front page / templates that use this class. */
.page-content .widget_title, .widget_title {
    display: block;
    padding:2px;
    margin:10px 0;
    border:1px solid #BBB;
    border-radius:3px;
    
    color:#DDD;
    font-size:150%;
    font-weight:bold;
    text-align:center;
    text-transform:capitalize;
    
    * { font-family: inherit !important; }
}
.color1 {
	background: var(--theme-accent-color);
	color: #DDD;
}
.color1 a, .color1 a:hover {
	color: #FFFFFF;
}

/****************************
 * Project:Poll
 ****************************/
/* Changes the color of the bars on polls to fit wiki colors. */
.pollAnswerVotes { color:#DDD; background:darken(@theme-page, 15%); }
.pollAnswerVotes div {
	#gradient.horizontal(@theme-buttons, lighten(@theme-buttons, 15%)) !important;
}
.pollAnswerVotes>span {
	line-height: 22px;
}

/****************************
 * Project:Game
 ****************************/
.mainpage-game-link {
    background:rgba(0,0,0,0.12);
    display:inline-block;
    text-align:center;
    width:125px;
    margin:1px;
    border-radius:5px;
    position:relative;
    
    .platform {
        position:absolute;
        z-index:1;
        border:1px solid black;
        border-radius:9px;
        background:rgba(245,245,245,0.85);
        width: 26px;
        height: 26px;
        &.ios {
            top:83px;
            left:0;
            border-top:0;
            border-right:0;
        }
        &.android {
            top:83px;
            right:0;
            border-top:0;
            border-left:0;
        }
        &.platform-switch {
            top:2px;
            right:0;
            border-bottom:0;
            border-left:0;
        }
    }
    
    .image-container {
        transition: transform 0.3s linear;
        -webkit-transition: transform 0.3s linear;
        
        position:relative;
        display:block;
        height:100px;
        width:100px;
        margin:3px auto -103px;
        
        .image-holder {
            display:inline-block;
            overflow:hidden;
            border-radius:18px;
        }
    }
    .link-container {
        display:inline-block;
        width:100%;
        padding-top:3px;
        // This covers everything and makes it a link.
        .link-cover {
            display:inline-block;
            width:100px;
            height:100px;
        }
    }
    .game-caption {
        display:inline-block;
        color: white;
	    background: var(--theme-accent-color);
        font-size:12px;
        padding:0px 1px 1px;
        width:121px;
        margin:1px;
        border-radius:0 0 5px 5px;
        border-top:1px solid #444;
        font-weight:bold;
    }
    &:hover {
        position:relative;
        top:-2px;
        box-shadow:0 2px 2px 2px var(--theme-accent-color);
        
        .image-container {
            position:   relative;
            top:1px;
            transform:  rotate(5deg);
            -webkit-transform:  rotate(5deg);
        }
        
        &>a>span {
            background: rgba(0,0,0,0.04);
        }
    }
}

/****************************
 * Project:Link
 ****************************/
.linkBox:hover { border-style:inset !important; background:rgba(0,0,0,0.20); }
.linkBox:hover .linkBoxContent { position:relative; top:1px; left:1px; }

/****************************
 * Project:NewestGames
 ****************************/
.mainpage-newest-games h2 { margin-bottom:0 !important; }
.mainpage-newest-games .article-thumb { margin:0 auto; }
.mainpage-newest-games .article-thumb .caption { text-align:center; }

/****************************
 * Project:News/article
 ****************************/
.newsarticle-heading {
    border-bottom:1px solid #b2af9c;
}
.newsarticle-new {
    color:white;
    background:red;
    padding:1px 3px;
    border-radius:5px;
    border:2px dotted darkred;
}
.newsarticle-date { float:right; }
.newsarticle-content {
    padding:0 5px 0 25px;
    margin:3px 0 8px 0;
    border:1px solid #B3AF9B;
    &:after {
        content: "";
        display:block;
        clear:both;
    }
}
.newsarticle-links {
    float:right;
    border: 1px solid #b2af9c;
    line-height: 1;
    padding: 2px 2px 1px 2px;
    border-radius: 2px;
    background: rgba(0,0,0,0.01);
}
.newsarticle-links:empty { display: none; }
//