Thành viên:Đức Anh/Nháp 30

/* default layout */
.main-body {
	display: flex;
	flex-flow: wrap column;
}

.main-box {
	margin-top: 1rem;
}

.main-bottom {
	margin-top: -0.5rem;
}

/* responsive layout */
@media (min-width: 992px) {
	.main-body {
		flex-direction: row;
    	margin: 0 -0.5rem;
	}
	
	.main-body__left,
	.main-body__right {
		flex: 1;
    	margin: 0 0.5rem;
	}

	.main-body__bottom {
	    width: 100%;
	    margin: 0 0.5rem;
	}
}

/* tweaks WikimediaUI */
.mw-headline-number {
    display: none;
}

.main-top__right .mw-ui-quiet {
	padding: 6px 8px;
}

.main-top__right .mw-ui-quiet:hover,
.main-top__right .mw-ui-quiet:focus,
.main-box__title a:hover,
.main-box__title a:focus,
.main-box-dropdown__content > ul > li > a:hover,
.main-box-dropdown__content > ul > li > a:focus {
	color: #0645ad;
}

/* tweaks .main-bottom elements */
/** .main-bottom-box **/
.main-bottom-box {
	margin-top: calc(1.5rem + 24px);
    border-top: 2px dotted #e0e0e0;
}

/** .main-bottom-box__icon **/
.main-bottom-box__icon {
    margin: -24px 0 0.5rem;
}

.main-bottom-box__icon img {
    padding: 0 1em;
	background-color: #fff;
}

/** .main-bottom-box__header **/
.main-bottom-box__header {
	text-align: center;
}

@media (max-width: 719px) {
	.main-bottom-box__header {
		margin-bottom: 1em;
		font-family: inherit;
		font-size: 1em;
		line-height: 1.5;
	}
}

@media (min-width: 720px) {
	.main-bottom-box__header {
		margin-bottom: 1rem;
		font-size: 1.4em;
	}
}

@media (min-width: 1000px) {
	.main-bottom-box__header {
		margin-left: auto;
		margin-right: auto;
		width: 80%;
	}
}

/* utils */
.u-display-inline-block {
	display: inline-block;
}

.u-font-size-larger {
	font-size: 1.35em;
}

.u-text-align-center {
	text-align: center;
}

.u-plain-list > ul,
.u-plain-list > ul > li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.u-horizontal-list > ul {
	display: inline-flex;
    flex-wrap: wrap;
}

.u-horizontal-list > ul li::after {
    padding: 0 0.35em;
    content: "·";
    font-weight: bold;
}

.u-horizontal-list > ul li:last-child::after {
    padding: 0;
    content: "";
}

.u-plain-heading {
	margin-top: 0;
	padding-bottom: 0;
	padding-top: 0;
	border-bottom-color: transparent;
}

/* others */
.main-box__body > .show-image,
.main-box__body > .itn-img {
	margin: 0.4em 0 0.4em 1em !important;
}

.main-box__body > .itn-img > .mp-thumb {
	padding: 0 !important;
}

.itn-speciald {
	padding: 6px 1rem !important;
	background: #f9f9f9 !important;
    border: 1px solid #e0e0e0 !important;
    border-width: 0 0 1px 0 !important;
}

.-responsive-image center:first-child {
    padding: 0.25em 0 0.75em;
}

/** #main-suggestions **/
#main-suggestions {
	padding-top: 0.5rem;	
}

#main-suggestions .floatright {
    margin-top: -2.75em;
    position: relative;
}

#main-suggestions .main-box__title {
	border-bottom: 1px dotted #e0e0e0;
}

/** .main-figure **/
.main-figure {
	display: table;
    position: relative;
    margin: auto;
    padding-top: 0.05em;
}

.main-figure-img > a > img {
    width: 100%;
    height: auto !important;
	max-width: 420px !important;
}

.main-figure-caption {
    display: none;
}

.main-figure:hover .main-figure-caption {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    overflow: hidden;
    width: 100%;
    height: auto;
    background: #fff;
    background: rgba(255, 255, 255, 0.9);
    padding: 1em;
    box-sizing: border-box;
    text-align: center;
}

.main-figure-button {
	display: none;
}

@media (max-width: 576px) {
	.main-figure-button {
		display: block;
		position: absolute;
		z-index: 1;
	    left: 0.5em;
	    bottom: 0.5em;
	    padding: 18px;
	    background-color: #fff;
	    background-color: rgba(255, 255, 255, 0.9);
	    background-image: url(//upload.wikimedia.org/wikipedia/commons/8/81/OOjs_UI_icon_stripeFlow-ltr.svg);
	    background-size: 20px;
	    background-repeat: no-repeat;
	    background-position: center;
	}
	
	.main-figure:hover .main-figure-button {
		display: none;
	}
}

/*** fix bug <small> for skin minerva ***/
body.skin-minerva small {
	font-size: smaller;
}

/* .content-improvement-box */
.content-improvement-box {
	display: flex;
    flex-flow: wrap column;
    margin: 0 -0.5rem;
}

/* .content-improvement-problems */
.content-improvement-problems,
.content-improvement-invitation {
    margin: 0 0.5rem;
}

.content-improvement-problems {
	order: 2;
	display: flex;
    flex-wrap: wrap;
    margin: -0.5rem 0;
    padding-top: 1rem;
}

.content-improvement-item {
    flex-grow: 1;
    padding: 0.5rem;
	width: 100%;
}

/** .content-improvement-item color modifier **/
.content-improvement-item.-color-red > a {
    border-bottom: 5px solid #dd3333;
}

.content-improvement-item.-color-red > a:hover {
    background-color: #dd3333;
}

.content-improvement-item.-color-blue > a {
    border-bottom: 5px solid #36c;
}

.content-improvement-item.-color-blue > a:hover {
    background-color: #36c;
}

.content-improvement-item.-color-green > a {
    border-bottom: 5px solid #00af89;
}

.content-improvement-item.-color-green > a:hover {
    background-color: #00af89;
}

.content-improvement-item.-color-yellow > a {
    border-bottom: 5px solid #f2c94c;
}

.content-improvement-item.-color-yellow > a:hover {
    background-color: #f2c94c;
}

.content-improvement-item.-color-gray > a {
    border-bottom: 5px solid #a2a9b1;
}

.content-improvement-item.-color-gray > a:hover {
    background-color: #a2a9b1;
}

.content-improvement-item.-color-orange > a {
    border-bottom: 5px solid #f2994a;
}

.content-improvement-item.-color-orange > a:hover {
    background-color: #f2994a;
}

/** .content-improvement-item icon modifier **/
.content-improvement-item.-icon-reload > a::before {
    background-image: url(//upload.wikimedia.org/wikipedia/commons/1/17/OOjs_UI_icon_reload.svg);
}

.content-improvement-item.-icon-tableMergeCells > a::before {
    background-image: url(//upload.wikimedia.org/wikipedia/commons/6/64/OOjs_UI_icon_table-merge-cells.svg);
}

.content-improvement-item.-icon-searchCaseSensitive > a::before {
    background-image: url(//upload.wikimedia.org/wikipedia/commons/e/e5/OOjs_UI_icon_searchCaseSensitive.svg);
}

.content-improvement-item.-icon-alert > a::before {
    background-image: url(//upload.wikimedia.org/wikipedia/commons/8/80/OOjs_UI_icon_alert.svg);
}

.content-improvement-item.-icon-tag > a::before {
    background-image: url(//upload.wikimedia.org/wikipedia/commons/d/dd/OOjs_UI_icon_tag-ltr.svg);
}

.content-improvement-item.-icon-language > a::before {
    background-image: url(//upload.wikimedia.org/wikipedia/commons/4/43/OOjs_UI_icon_language-ltr.svg);
}

.content-improvement-item.-icon-link > a::before {
    background-image: url(//upload.wikimedia.org/wikipedia/commons/7/72/OOjs_UI_icon_link-ltr.svg);
}

.content-improvement-item.-icon-link > a::before {
    background-image: url(//upload.wikimedia.org/wikipedia/commons/7/72/OOjs_UI_icon_link-ltr.svg);
}

.content-improvement-item.-icon-history > a::before {
    background-image: url(//upload.wikimedia.org/wikipedia/commons/2/27/OOjs_UI_icon_history.svg);
}

.content-improvement-item.-icon-edit > a::before {
    background-image: url(//upload.wikimedia.org/wikipedia/commons/8/8a/OOjs_UI_icon_edit-ltr.svg);
}

.content-improvement-item.-icon-users > a::before {
    background-image: url(//upload.wikimedia.org/wikipedia/commons/9/98/OOjs_UI_icon_userAvatar.svg);
}

.content-improvement-item.-icon-active-users > a::before {
    background-image: url(//upload.wikimedia.org/wikipedia/commons/1/1b/OOjs_UI_icon_logo-wikimediaDiscovery.svg);
}

.content-improvement-item.-icon-sysop > a::before {
    background-image: url(//upload.wikimedia.org/wikipedia/commons/1/1b/VisualEditor_icon_profile.svg);
}

.content-improvement-item.-icon-articles > a::before {
    background-image: url(//upload.wikimedia.org/wikipedia/commons/3/36/VisualEditor_icon_page-existing-rtl.svg);
}

.content-improvement-item.-icon-code > a::before {
    background-image: url(//upload.wikimedia.org/wikipedia/commons/c/cd/OOjs_UI_icon_code.svg);
}

/** .content-improvement-item > a **/
.content-improvement-item > a {
    box-sizing: border-box;
    position: relative;
    z-index: 0;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    padding: 0.5rem 1rem 1rem;
    width: 100%;
    height: 100%;
    color: inherit;
    background: #f7f7f7;
    text-decoration: none;
    transition: color .1s ease-in-out, background .1s ease-in-out, box-shadow .1s ease-in-out, opacity .1s ease-in-out;
}

.content-improvement-item > a:hover {
    color: #fff;
    box-shadow: 0 2px 5px #ccc;
}

.content-improvement-item > a:active {
    opacity: 0.7;
    box-shadow: 0 4px 7px #ccc;
}

.content-improvement-item > a::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    width: calc(100% - 0.75rem);
    height: 90%;
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
    opacity: 0.02;
    transition: opacity .1s ease-in-out;
}

.content-improvement-item > a:hover::before {
    opacity: 0.08;
}

.content-improvement-item > a > span {
    display: block;
    width: 100%;
}

.content-improvement-item__number {
    font-weight: bold;
    font-size: 1.8em;
    padding-right: 0.25em;
}

/* .content-improvement-invitation */
.content-improvement-invitation {
	order: 1;
    padding: 1rem;
    background: #f7f7f7;
}

.content-improvement-invitation__icon {
    margin: 0 0 0.5em 0.75em;
    float: right;
    width: 80px;
    height: 80px;
    background-image: url(//upload.wikimedia.org/wikipedia/commons/b/bd/Wikipedia-logo-v2-bw.svg);
    background-size: 80px;
    background-position: center;
    background-repeat: no-repeat;
}

.content-improvement-invitation__title {
    font-weight: bold;
    font-size: 1.1em;
}

.content-improvement-invitation__content p:last-child {
	margin-bottom: 0;
}

.content-improvement-invitation__button {
	padding: 0.75rem 0 0.45rem;
}

/* responsive */
@media (min-width: 768px) {
	/* .content-improvement-problems */
	.content-improvement-item {
		width: 45%;
	}
}

@media (min-width: 992px) {
	/* .content-improvement-box */
	.content-improvement-box {
		flex-direction: row;
	}
	
	/* .content-improvement-problems */
	.content-improvement-problems {
		flex: 2;
		order: 1;
    	padding-top: 0;
	}

	/* .content-improvement-invitation */
	.content-improvement-invitation {
		flex: 1;
		order: 2;
	}
}

@media (min-width: 1200px) {
	/* .content-improvement-problems */
	.content-improvement-item {
		width: 20%;
	}
}