MediaWiki:Common.css

Материал из SAMP

Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.

  • Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
  • Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
  • Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
  • Opera: Нажмите Ctrl+F5.
.infobox
{
	border: 1px #C6C6C6 solid;
}
.infobox_head 
{ 
	text-align: center; 
	font-weight: bold; 
	padding: 2% 0.5%; 
	font-size: 18px;
}
.infobox_param
{
	display: flex;
	border-bottom: 2px solid #FFFFFF;
    margin: 1px 5%;
    padding: 5px 5px 10px 5px;
}
.infobox_param:last-child
{
	border-bottom: unset;
}
.infobox_param_titul
{
	font-weight: bold;
}
.infobox_param_text > p
{
	margin: 0;
}
.infobox_param > div
{
	width: 50%;
}
.skin
{
	display: inline-block;
	max-width: 20%;
}
.skin > span > span > img
{
	width: 100%;
	height: auto;
}


.index
{
	display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-items: flex-start;
}
.index_elem
{
	background: #111d41;
	border: 1px #111111 solid; 
	border-radius: 15px;
	width: 350px;
	position: relative;
	margin: 1%;
	cursor: pointer;
}
.banner > span > span > img
{
	width: 100%;
	height: 120px;
	border-radius: 15px;
}

.index_elem.active > .banner > span > span > img
{
	border-radius: 15px 15px 0 0;
}

.index_elem_title
{
	position: absolute;
	top: 50px;
	left: 15px;
	font-weight: bold;
	width: 90%;
	cursor: pointer;
}
.index_elem_title::after
{    
	display: inline-block;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFF' width='24' height='24'%3e%3cpath d='M13 17.586V4h-2v13.586l-6.293-6.293-1.414 1.414L12 21.414l8.707-8.707-1.414-1.414L13 17.586z'/%3e%3c/svg%3e");
	width: 20px;
	height: 20px;
	background-size: cover;
	content: "";
    position: absolute;
    right: 0;
    transition: 0.2s;
}

.index_elem.active > .index_elem_title::after
{
	transform: rotate(180deg);
}
.index_subelems
{
    text-shadow: 0 0 6px black;
    display: none;
    height: 0;
    transition: 0.2s;
}
.index_subelems > p { display: none; }
.index_elem.active > .index_subelems
{
	display: block;
	height: auto;
}
.index_subelem
{
	width: 90%;
	padding: 2% 5%;
	background-color: #111d41;
	transition: 0.2s;
	&:hover
	{
		background-color: #1c2a54;
	}
}
.index_subelem:last-child
{
	border-radius: 0 0 15px 15px;
}


@media screen and (orientation: landscape)/* PK */ 
{
	.infobox
	{
		position: relative;
		lear: right;
		float: right;
		width: 320px;
	}
	.infobox_image > span > span > img
	{
		width: 100%;
		height: 200px;
		border: none;
	}
}
@media screen and (orientation: portrait )/* mobile */ 
{
	.infobox
	{
		width: 100%;
	}
	.infobox_image > span > span > img
	{
		width: 100%;
		height: 180px;
		border: none;
	}
	.index
	{
		gap: 30px 0;
		font-size: 14px;
	}
}