Шаблон:Infobox/styles.css: различия между версиями

Текущая версия от 01:49, 21 декабря 2021

.infobox {
	font-family: BeaufortforLoL;
    font-weight: 700;
	margin-top: 0rem!important;
    border-spacing: 0;
    border-radius: 12px;
    z-index: 3!important;
    /* base-90 */
    background: #1b272e!important;
    font-size: 0.875rem;
    text-align: left;
    text-transform: uppercase;
    /* boxshadow-2 */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.04), 0 3px 6px rgba(0, 0, 0, 0.0575);
    /* In case if tooltips go out of boundary */
    overflow: visible;

}
.rare-infobox {
    position: relative;
    font-size: 16px;
    text-align: center;
    width: 310px;
    border-radius: 12px 12px 0 0;
    padding: 5px!important;
    background: linear-gradient(to bottom right,#644796 10%,#763886 65%) !important;
    color: #b96fcc;
}
.top5{
    margin-top: 5px !important;
}
.top2 {
        margin-top: 2px!important;
        width: 50%;
}
.infobox-col-main {
    width:320px;
    margin:0 auto 25px !important
}
.infobox-col1 {
    width: 100%;
    flex-direction: row !important;
}

.infobox-col1 th {
    width: 30%;
}

.infobox-col1 td {
    width: 70%;
}
.infobox-col5 {
    width: 75%;
}

.infobox-col5 th {
    width: 30%;
}

.infobox-col5 td {
    width: 75%;
}

.infobox-col2 {
    width: 50%;
}

.infobox-col3 {
    width: calc(100% / 3);
}

.infobox-col4 {
    width: 25%;
}

.infobox-data {
    min-width: 25%;
}

.infobox tbody {
    display: flex;
    flex-wrap: wrap;
    /*min-width: 300px;*/
    
}

.infobox tr:first-of-type .mw-collapsible-toggle {
    display: none;
    float: unset;
}

.infobox tr:first-of-type .mw-collapsible-toggle a.mw-collapsible-text {
        font-size: 12px;
        position: absolute;
        right: 0;
        border-radius: 0 0 0 12px;
        padding: 4px 10px;
        background: #d33!important;
        color: white;
        display: block;
        text-transform: uppercase;
        top: 34px;
        font-weight: 500;
}

.infobox tr:first-of-type .mw-collapsible-toggle a.mw-collapsible-text:hover {
    background: #b32424 !important;
}

.infobox tr:first-of-type .mw-collapsible-toggle.mw-collapsible-toggle-collapsed a.mw-collapsible-text {
    background: #36c !important;
}

.infobox tr:first-of-type .mw-collapsible-toggle.mw-collapsible-toggle-collapsed a.mw-collapsible-text:hover {
    background: #2a4b8d !important;
}

.infobox tr:first-of-type .mw-collapsible-toggle:before,
.infobox tr:first-of-type .mw-collapsible-toggle:after {
    content: none;
}

.infobox tr:not(.infobox-image) {
		margin-top: 15px;
        display: flex;
        flex-direction: column;
        line-height: 14px;
        /*justify-content: center;*/

}

.infobox th,
.infobox td {
    padding: 0 15px;
}

.infobox-title,
.infobox-header,
.infobox-button-bar-top,
.infobox-button-bar-bottom{
    width: 100%;
}

.infobox-title th,
.infobox-header th {
    text-align: center !important;
}

tr.infobox-title {
    margin-top: 0px !important;
    margin-bottom: 5px;
}

.infobox-title th {
		line-height: 1;
        font-size: 26px;
        color: #f1e6d0;
}

tr.infobox-header {
    padding-top: 15px;
    /* base-80 */
    border-top: 1px solid #383c45
}

tr.infobox-header {
    margin-top: 15px !important;
}

tr.infobox-header1 {
    padding-top: 15px;
    /* base-80 */
    border-top: 1px solid #383c45
}

tr.infobox-header1 {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}

tr.infobox-button-bar-top {
    margin-top: 0 !important;
    border-radius: 12px 12px 0 0;
}
tr.infobox-button-bar-bottom {
    border-radius: 0 0 12px 12px;
}

.infobox-header th {
    font-size: 1rem;
    color: #f1e6d0;
}

.infobox-image td {
    padding: 0;
}


.infobox-image td {
    background: #1e2a31;
    /*width:80px;*/
	/*min-width: 80px;*/
    color: #f1e6d0;
    font-weight: 500;
	font-size: 13px;
    padding: 0 0 0 10px;
    text-align: center;
}
.infobox-image-stats td {
	text-align:right !important;
	width: 80px  !important;
}
.infobox-image-stats div {
	font-size: 18px;
	color: #eae5b1;
	font-weight: bold;
	padding: 0;
}


.infobox-image {
	/*border-radius: 12px 12px 0 0;*/
    overflow: hidden;
    /*margin: 0 auto 15px;*/
    border-radius:0;
    margin: 0;
    line-height: 1.1;    
}

.infobox-data th, .infobox-image-race span {
	/*color: #eae5b1;*/
    /* base-30 */
    /*color: #72777d;*/
	color: #ffb257;
    font-weight: bold;
    font-size: 10px;
    
    /*font-size: 0.8125rem;*/
    /*letter-spacing: .75px;*/
}
.infobox-image-race div {
	margin-bottom: 3px;
}

.infobox-data td {
	color: #eae7c1;
    text-align: left!important;
    font-weight: bold;
	font-size: 18px;
}

/* Screen0 */
@media only screen and (max-width: 720px) {
    .infobox {
        margin-bottom: 1.6rem !important;
        padding: 0 !important;
    }

    .infobox tr:first-of-type .mw-collapsible-toggle {
        display: block;
    }

    /*.infobox-image img {*/
    /*    width: 100vw !important;*/
    /*    height: auto !important;*/
    /*}*/
}


    .infobox {
        background: #24272f;
    }

    /*tr.infobox-header {*/
    /*    border-color: #2e3138;*/
    /*}*/

    .infobox-data th {
        color: #ffb257;
    }

    .infobox-image td {
        background: #1e2a31;
    }

table.hero-spec-table {
    margin-top: 0;
}

.hero-spec-label {
    /*display: flex;*/
    align-items: center;
    font-weight: bold;
    margin-right: 0.8rem;
    line-height: 1.2;
}

.hero-spec-label img {
        margin: 0 auto;
        /*width: 25px;*/
        height: 100%;
}

.hero-spec-table .plainlist ul li {
    display: flex;
    margin-top: 0.4rem;
    flex-direction: column;
}

.hero-spec-table .plainlist .componentcard:before {
    content: "↳";
    display: block;
    margin: 0.4rem 0.6rem 0 0;
}

.hero-spec-table .plainlist .componentcard {
    margin-top: 0.4rem;
}

table.hero-spec-table tr:hover {
    background: none;
}

.hero-spec-table td:hover {
    background-color: #f8f9fa;
}

    .hero-spec-table td:hover {
        background-color: #1d2129;
    }