Šablona:MicroWiki/styles.css

/* {{pp|small=yes}} */

/* ********** MAIN PAGE LAYOUT ********** */

/* Configure main page containers */
table.mainpage-table,
table.mainpage-table >tbody,
table.mainpage-table >tbody >tr,
table.mainpage-table >tbody >tr >th,
table.mainpage-table >tbody >tr >td {
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	padding: 0; /* Some browsers set padding on these; we need to disable that if we want pixel-perfect alignment. */
}
table.mainpage-table >tbody >tr {
	flex-direction: row;
}
table.mainpage-table,
table.mainpage-table >tbody,
table.mainpage-table >tbody >tr >th,
table.mainpage-table >tbody >tr >td {
	flex-direction: column;
}
table.mainpage-table >tbody >tr >th {
	font-weight: inherit; /* Browsers by default usually make table-headers bold, but we don't want that here. */
}
table.mainpage-table >tbody >tr >th,
/*table.mainpage-table >tbody >tr >td {
	max-width: 79rem; /* NOTE: This should be adjusted whenever the contents of the header change. We want everything to flow nicely, but we also don't want the boxes to be infinitely wide.
}*//* Commented in favor of limiting the whole assembly, below. */
.mainpage {
	max-width: 158rem; /* NOTE: This should be twice the `th` max-width (above). */
}

/* Define column widths */
table.mainpage-table-small  >tbody >tr >th,
table.mainpage-table-small  >tbody >tr >td {width: 100%;}
table.mainpage-table-medium >tbody >tr >th,
table.mainpage-table-medium >tbody >tr >td {width:  50%;}
table.mainpage-table-large  >tbody >tr >th,
table.mainpage-table-large  >tbody >tr >td {width: calc(100%/3);}
table.mainpage-table-huge   >tbody >tr >th,
table.mainpage-table-huge   >tbody >tr >td {width: 25%;}

/* Define column width overrides */
table.mainpage-table-medium >tbody >tr >th[colspan="2"],
table.mainpage-table-medium >tbody >tr >td[colspan="2"] {width: 100%;}
table.mainpage-table-large  >tbody >tr >th[colspan="2"],
table.mainpage-table-large  >tbody >tr >td[colspan="2"] {width: calc(200%/3);}
table.mainpage-table-large  >tbody >tr >th[colspan="3"],
table.mainpage-table-large  >tbody >tr >td[colspan="3"] {width: 100%;}
table.mainpage-table-huge   >tbody >tr >th[colspan="2"],
table.mainpage-table-huge   >tbody >tr >td[colspan="2"] {width:  50%;}
table.mainpage-table-huge   >tbody >tr >th[colspan="3"],
table.mainpage-table-huge   >tbody >tr >td[colspan="3"] {width:  75%;}
table.mainpage-table-huge   >tbody >tr >th[colspan="4"],
table.mainpage-table-huge   >tbody >tr >td[colspan="4"] {width: 100%;}

/* Display appropriate layout according to screen size. */
.mainpage.mainpage-table-small,
.mainpage.mainpage-table-medium,
.mainpage.mainpage-table-large,
.mainpage.mainpage-table-huge {
	display: none; /* Hide all sizes by default. */
}
@media (max-width: 1100px) {
	.mainpage.mainpage-table-small {display: table;}
}
@media (min-width: 1101px) and (max-width: 1700px) {
	.mainpage.mainpage-table-medium {display: table;}
}
@media (min-width: 1701px) and (max-width: 2300px) {
	.mainpage.mainpage-table-large {display: table;}
}
@media (min-width: 2301px) {
	.mainpage.mainpage-table-huge {display: table;}
}

/* ********** GENERAL ********** */

/* Buttons to 3rd-Party Sites */
.links-contents {
	display: flex;
	flex-flow: wrap;
	justify-content: center;
	gap: 10px;
}

/* ********** MAIN PAGE BOX ********** */
.mainpage-box {
	background: #FFF;
	border: 1px solid #B7B7B7;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
	margin: 0;
}

.mainpage-head {
	background: #F6F6F6;
	border-bottom: 1px solid #B7B7B7;
	padding: 10px 15px;
	margin: 0;
}

.mainpage-foot {
	margin: 15px;
}
	
.mainpage-box h3 {
	font-weight: bold;
	margin: 0;
	padding: 0;
}

/* Main page box content */
.mainpage-items {
	max-height: 78ex; /* This value avoids clipping when 4 news stories are visible. */ /* `ex` is likely to reduce clipping generally when compared to other units. */
	overflow-y: auto;
	margin: 15px;
}
.mainpage-items img {
	max-width: calc(100% - 2px);
	height: auto;
}
.mainpage-items p { margin: 0; }
.mainpage-items hr {
	background-color: #b7b7b7;
	margin: 1em 0;
}

/* ********** SOCIAL BUTTONS ********* */
.microwiki-button {
	background: #1D3C72;
	border: 1px solid #112444;
	padding: 0 10px 10px 10px;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
	height: 50px;
	width: 275px;
	max-width: 275px;
}

.microwiki-button,
.microwiki-button * { color: #FFF !important; }
.microwiki-button a { background-image: none !important; }

.microwiki-button-logo {
	float: left;
	width: 10%;
}

.microwiki-button-link {
	float: right;
	width: 80%;
	text-align: center;
}

.microwiki-button-link a.external,
.microwiki-button-link a.external:visited {
	color: #FFF;
	background-image: none;
	font-weight: bold;
	display: block;
	line-height: 60px;
	width: 100%;
}

.mw-invite a.external:active { color: #FFF; }

/* ********** HORIZONTAL LIST OF LINKS ********** */
.mainpage-header-links {
	margin-right: auto;
	margin-left: auto;
}

.mw-box-browse {
	width: 100%;
	text-align: center;
	overflow-y: clip; /* HACK: This line is a hacky workaround for an unsolved issue whereby the links overflow their parent. */
}
.mw-box-browse a {
	padding: 5px;
	font-weight: bold;
	color: #3F3F3F !important;
	margin: 10px 5px 5px 5px;
}

.mw-box-browse ul li::after {
	content: " • ";
	font-size: 12px;
	color: #3F3F3F;
}

.mw-box-browse-link a:hover { background-color: #B7B7B7; }

/* Interwiki */
/* [[ru:Шаблон:Микропедия/styles.css]] */

.mw-box-socials,
.mw-box-language {
	display: flex;
	flex-direction: row;
	gap: 1ch;
	text-align: center;
	justify-content: center;
    flex-wrap: wrap;
}
.mw-box-socials >div,
.mw-box-language >div {
	margin: 0.5ex 1ch; /* Moved from >a */
	position: relative; /* Bound the flag icon shenanigans */
}
.mw-box-language >div >.flagicon {
	margin-top: -0.5ex; /* Undo the top margin from .mw-box-language */
	position: absolute; /* Allow the flag icon to overlap the link/text */
	width: 100%; /* Center the flag icon */
	left: 0; /* Ensure flag icon is not centered on its left bound */
}
.mw-box-language >div >a {
	margin: unset; /* Moved into parent div */
	padding: unset;

	z-index: 1; /* Display over top of flags, so that all clicks on the div count as clicks on the `a`. */
	position: relative; /* Ensure that z-index will work */
	height: 6ex; /* Make room for flag above */
	display: flex;
	flex-direction: column;
	justify-content: end; /* Put the text at the bottom of the enlargèd element */
}
.mw-box-socials {
	font-size: large;
	font-weight: bold;
}
.mw-box-socials >div >.social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 100%;
	background-color: #777;
	margin: 0 auto;
}
.mw-box-socials >div >.social-icon >span,
.mw-box-socials >div >.social-icon >span >a {display: contents;}
.mw-box-socials >div >.social-icon >span >a >img {
	max-width: 100%;
	max-height: 100%;
}
.mw-box-socials >div >a {background-image: none;}
.whiten img {filter: grayscale(1) brightness(10);}

/* ********** RECENT CHANGES ********** */
.mw-changeslist h4 {
	padding: 0;
	margin: 0;
}
.mw-changeslist h4,
tr >td.mw-enhanced-rc,
.mw-changeslist-legend,
.mw-changeslist-line-inner-characterDiff,
.mw-changeslist-line-inner-logLink,
.mw-changeslist-line-inner-rollback,
.mw-changeslist-line-inner-separatorAfterLinks,
.mw-changeslist-line-inner-separatorAftercharacterDiff,
.mw-changeslist-line-inner-tags,
.mw-changeslist-line-inner-userTalkLink,
.mw-changeslist-links span:not(:first-of-type),
.mw-changeslist-separator,
.mw-diff-bytes,
.mw-enhancedchanges-arrow-space,
.mw-usertoollinks {
	display: none;
}
.mw-changeslist-line-inner-userLink::before {content: ' [';}
.mw-changeslist-line-inner-userLink::after {content: ']';}
.mw-changeslist-line-inner::before {content: '• '; font-size: 1rem;} /* TODO: Use `url(/skins/Vector/resources/common/images/bullet-icon.svg?d4515)` instead. */
.mw-changeslist {
	max-height: 20ex; /* Limits displayed results to a maximum of 6. */
}