Bản mẫu:Wiki2021/Khung/styles.css

/* .main-box */
.main-box {
	padding: 1rem 0;
}
/** .main-box modifier **/
.main-box.-plain {
border: none;
box-shadow: none;
}
.main-box.-plain .main-box__header {
background: none;
}
.main-box.-plain .main-box__icon {
display: none;
}
.main-box.-plain .main-box__title {
padding: 0;
}
/* .main-box__header */
.main-box__header {
	display: flex;
align-items: center;
margin-bottom: 0.65rem;
overflow: hidden;
}
/** header box color modifier **/
.main-box__header.-header-box-color-gray {
	background-color: #f2f2f2;
}
.main-box__header.-header-box-color-gold {
	background-color: #fcf4db;
}
.main-box__header.-header-box-color-green {
	background-color: #d4efdf;
}
.main-box__header.-header-box-color-purple {
	background-color: #f1e1f7;
}
.main-box__header.-header-box-color-blue {
	background-color: #d5ebf8;
}
.main-box__header.-header-box-color-red {
	background-color: #fbdddd;
}
.main-box__header.-header-box-color-orange {
	background-color: #fcebdb;
}
.main-box__header.-header-box-color-medium-violet-red {
	background-color: #f9e0f0;
}
.main-box__header.-header-box-color-olive {
	background-color: #ececd9;
}
.main-box__header.-header-box-color-light-slate-gray {
	background-color: #e6e8ec;
}
.main-box__icon {
	padding: 1.125rem;
background-size: 1.25rem;
background-position: center;
background-repeat: no-repeat;
}
/** icon modifier **/
.main-box__icon.-icon-star {
background-image: url(//upload.wikimedia.org/wikipedia/commons/c/ca/OOjs_UI_icon_unStar-invert.svg);
}
.main-box__icon.-icon-help {
background-image: url(//upload.wikimedia.org/wikipedia/commons/c/c0/OOjs_UI_icon_help-ltr-invert.svg);
}
.main-box__icon.-icon-newspaper {
background-image: url(//upload.wikimedia.org/wikipedia/commons/7/7a/OOjs_UI_icon_newspaper-ltr-invert.svg);
}
.main-box__icon.-icon-calendar {
background-image: url(//upload.wikimedia.org/wikipedia/commons/f/f7/OOjs_UI_icon_calendar-ltr-invert.svg);
}
.main-box__icon.-icon-book {
background-image: url(//upload.wikimedia.org/wikipedia/commons/9/9c/OOjs_UI_icon_book-ltr-invert.svg);
}
.main-box__icon.-icon-edit {
background-image: url(//upload.wikimedia.org/wikipedia/commons/0/00/OOjs_UI_icon_edit-ltr-invert.svg);
}
/** icon box color modifier **/
.main-box__icon.-icon-box-color-gray {
background-color: #bdbdbd;
}
.main-box__icon.-icon-box-color-gold {
background-color: #F2C94C;
}
.main-box__icon.-icon-box-color-green {
background-color: #27ae60;
}
.main-box__icon.-icon-box-color-purple {
background-color: #bb6bd9;
}
.main-box__icon.-icon-box-color-blue {
background-color: #2d9cdb;
}
.main-box__icon.-icon-box-color-red {
background-color: #eb5757;
}
.main-box__icon.-icon-box-color-orange {
background-color: #f2994a;
}
.main-box__icon.-icon-box-color-medium-violet-red {
background-color: #e066b4;
}
.main-box__icon.-icon-box-color-olive {
background-color: #9a9a02;
}
.main-box__icon.-icon-box-color-light-slate-gray {
background-color: #828EA1;
}
.main-box__title {
	flex: 1;
margin: 0;
padding: 0 0.75em;
border-bottom: 0;
font-family: inherit;
font-weight: bold;
font-size: 1.2em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.main-box__title a {
	color: inherit;
text-decoration: none;
}
/* .main-box__body */
.main-box__body p:last-of-type {
	 margin-bottom: 0;
}
body.skin-vector-2022 .main-box__body p:last-of-type + ul {
	margin-top: 0.5em;
}
/*** Ghi chú: Mã của khung HACL cũ ***/
/** .main-box__body modifier **/
.main-box__body.-responsive-image .floatnone > a > img {
	height: auto !important;
	width: 100%;
	max-width: 350px !important;
}
/* .main-box__footer */
.main-box__footer {
	display: flex;
align-items: center;
	margin: 1rem 0 -0.175rem;
padding-top: 0.7rem;
border-top: 1px solid #e0e0e0;
}
/** .main-box-dropdown **/
.main-box-dropdown {
display: inline-block;
	position: relative;
}
.main-box-dropdown__button {
	margin: -3px 0;
padding: 1em;
background-image: url(//upload.wikimedia.org/wikipedia/commons/b/b3/OOjs_UI_icon_ellipsis.svg);
background-size: 1.25rem;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
}
.main-box-dropdown__content {
display: none;
position: absolute;
z-index: 1;
}
.main-box-dropdown__content > ul {
	display: flex;
	flex-flow: wrap column;
}
.main-box-dropdown__content > ul > li > a {
	padding: 6px 12px;
color: inherit;
font-weight: bold;
text-decoration: none;
}
.main-box-dropdown:hover .main-box-dropdown__content {
display: block;
margin-top: 2.5px;
	width: auto;
white-space: nowrap;
background: #fff;
border: 1px solid #e0e0e0;
box-shadow: 0px 2px 3px #eee;
}
.main-box-dropdown:hover .main-box-dropdown__content > ul > li > a {
	display: block;
}
/* responsive */
@media (min-width: 576px) {
	/* .main-box */
	.main-box {
	    padding: 1rem;
	    border: 1px solid #e0e0e0;
	    box-shadow: 0px 2px 3px #eee;
		background-color: #fff;
	}
}
@media (min-width: 768px) and (max-width: 991px),
(min-width: 1145px) {
	/** .main-box-dropdown **/
	.main-box-dropdown__button {
		display: none;
	}
	
	.main-box-dropdown__content {
		display: block;
	position: relative;
	margin-bottom: -1rem;
	}
	
	.main-box-dropdown__content > ul {
		flex-direction: row;
	}
	.main-box-dropdown__content > ul > li > a {
		display: inline-block;
	    margin-bottom: 1rem;
		padding: 0 12px;
	}
	
	.main-box-dropdown:hover .main-box-dropdown__content {
		margin-top: 0;
		width: inherit;
		background: none;
		border: none;
	box-shadow: none;
	}
}
/* fix bug on minerva */
body.skin-minerva .main-box__body > ul {
	margin-left: 0.5em;
}
/* space between .main-box */
.main-box + link + .main-box {
margin-top: 1rem;
}