MediaWiki:Common.css: различия между версиями

@import url("https://fonts.googleapis.com/css?family=Roboto|Noto+Sans"); /* :400,700,400italic,700italic */

/*body, .mw-body h1, .mw-body-content h2, .mw-body-content h3 { 
	font-family: "Noto Sans", sans-serif; 
}*/


body.page-Заглавная_страница h1.firstHeading { display: none; }

h1 {border-bottom:none;}


body { quotes: '\201c' '\201d'; }
.quote:before { content: open-quote;  color:#99c; font-size:2em; display: inline-block; position: relative; height:.5em; line-height:.5em; top: 7px;}
.quote:after  { content: close-quote; color:#99c; font-size:2em; display: inline-block; position: relative; height:.5em; line-height:.5em; top: 7px; }


div.epigraph { word-wrap:break-word;float:right;max-width:60%;color:#777 }

div.epiauthor { margin:4px; padding:4px; text-align:right; }


small {
  color: #777;
}

img {
  max-width:90%; height:auto;
}

.thumbinner { max-width: 100%; }


.mw-body h1 { /* h1.firstHeading без указания класса padding перекроется через .mw-body h1 */
  /*background-color: #6030ff;
  color: #fff;
  margin : 0 3px 10px 3px;
  padding: 4px 14px;
  border-radius: 4px 25px 25px 25px;*/
}

/*div.mw-parser-output > h2 { 
  background-color: #8050ff; 
  color: #fff;
  padding: 5px;
  border-radius: 4px 20px 20px 20px;
}

div.mw-parser-output > h3 {
  /*background-color: #bb56d7;
  color: #fff;
  padding: 3px;
  border-radius: 4px 20px 20px 20px;
}

div.mw-parser-output > h4 {
  background-color: #c448bc;
  color: #fff;
  padding: 1px;
  border-radius: 4px 14px 14px 14px;
}

div.mw-parser-output > h5 {
  background-color: #e468ac;
  color: #fff;
  padding: 1px;
  border-radius: 4px 14px 14px 14px;
}*/



.firstHeading, span.mw-headline { 
  /*margin-left : 14px;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.8), -1px -1px 0 rgba(0,0,0,0.4);*/
}

.cathead { 
  text-shadow: 1px 1px 0 rgba(0,0,0,0.8), -1px -1px 0 rgba(0,0,0,0.4);
}

span.mw-editsection a { color: #fff; /* править, пока это черновое */
}

.container {
  display: -webkit-flex;
  display : flex;
  flex-direction: row; 
  align-items: stretch;
  justify-content: space-around;
}

.catbody {
  flex: 1;		
  background-color: #f5faff; 
  margin : 0 3px 10px 3px;
  padding: 0;
  border-radius: 4px 20px 4px 4px;
}

.cathead {
  font-weight:600;
  font-size:115%;
  letter-spacing:1px;
  color:#fff; 
  background-color: #6926ff; 
  text-align:center;
  padding:4px;
  border-radius: 4px 20px 20px 24px;
}

.headmain {
  font-size:125%;
  background-color: #b4f; 
}

.bodymain {
  background: none; 
  margin: 5px 2px;
}


.tocopy {
 -webkit-user-select: all;  /* Chrome 49+ */
 -moz-user-select: all;     /* Firefox 43+ */
 -ms-user-select: all;      /* No support yet */
  user-select: all;
  border : 1px dashed #ddd;
  background-color:#f8f8f8;
  padding-left: 4px;
  padding-right:4px;
}

.tocopy:hover:after{
  color: #fff;
  background-color: #6926ff;
  border : 1px blue solid;
  border-radius: 4px 20px 20px 20px;
  box-shadow: 1px 1px 2px 0px #408080;
//content: attr(title);
  content: "Кликните и скопируйте в буфер";
  padding: 5px 15px;
  position: absolute;
  z-index: 200;
}


.radiolist {
  display: block;
  overflow: auto;
  width : 100%; 
  text-align : center;
}

.radiolist img {
  margin: 10px;
  max-width: 200px;
  height:auto;
}

@media (max-width: 800px){
  .container{ flex-direction: column;		
  }
}


@media (max-width: 550px){
	div .thumbinner {
		margin:0 auto;
	}
	div .tright {
		display:block;
	}
	div.tright, div.floatright, table.floatright {
		float:none;
		text-align:center;
		margin: 0;
		padding-bottom: 10px;
	}
}



/* cyrillic-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v8/o-0IIpQlx3QUlC5A4PNr6DRAW_0.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v8/o-0IIpQlx3QUlC5A4PNr4TRAW_0.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* devanagari */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v8/o-0IIpQlx3QUlC5A4PNr5DRAW_0.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* greek-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v8/o-0IIpQlx3QUlC5A4PNr6TRAW_0.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v8/o-0IIpQlx3QUlC5A4PNr5jRAW_0.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v8/o-0IIpQlx3QUlC5A4PNr6jRAW_0.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v8/o-0IIpQlx3QUlC5A4PNr6zRAW_0.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v8/o-0IIpQlx3QUlC5A4PNr5TRA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* подсветка фона для таблиц с устройствами по простоте подключения: нативное Я, прямое через облако, требует стороннего хаба */
.device-native-connect { background-color:#cfc; }
.device-direct-connect { background-color:#ffc; }
.device-hub-connect { background-color:#fdd; }


.toc {
  background-color: #eee0ff;
  padding: 14px 24px;
  border-color: #ccc;
  border-radius: 4px 45px 45px 45px;
}

.gold {  /* для div цветовой класс желательно указывать явно, тк закрашивается фон и могут коллизии возникнуть. Но пока теряется левый бордюр, если ограничить. Надо дебажить */
  background-color:gold;
  border:solid 1px orange;
}


.gray {
  background-color:#ddd;
  border:solid 1px red;
}

.azure {
  background-color:#33ffcc;
  border:solid 1px #669900;
}

.oldpaper {
  background-color:#f0c384;
  border:solid 1px #d2a15a;
}


/* цветовой класс для всего остального - красим текст, добавляем контраст тенью */
.red { color:red;
}
.green { color:green;
}
.blue { color:blue;
}
pre.red {  border: 1px solid red;
}
pre.green {  border: 1px solid green;
}
pre.blue {  border: 1px solid blue;
}


.shadow { text-shadow: 1px 1px 1px rgba(255,255,255,1), -1px -1px 1px rgba(0,0,0,0.1)
}

.spoilers {
margin: 4px auto;
}
.spoilers-button { border-radius: 20px 20px 20px 4px;
}
/*pre, .catlinks, .spoilers-body {  border-radius: 4px 20px 20px 20px; display: flow-root;
}*/

pre, .catlinks, .spoilers-body { 
	border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.01);
}

.spoilers-body {  padding-left:24px;
}

.plaha {
  clear: both;
  width: 75%;
  align: center; /* в простой плашке без вложенных div текст по центру */
  text-align: center;
  margin: 20px auto;
  padding:10px;
  border-left-width: 20px;
}

.plaha div {
  text-align: left; /* в сложной плашке текст основного div влево */
  line-height:1.3;
}

.icon {
  height:80px;
  width: 80px;
  left:0;
  margin:0 10px 20px 10px;
  float:left;
/*  background-color: #ccc; debug */
}

.skills {
/*  background-image: url(/images/0/00/Alice-noblur-plaha-80-skills.png); */
  background-image: url(/resources/assets/Alice-noblur-plaha-80-skills.png); 
}

.hands {
  background-image: url(/images/c/c6/Alice-noblur-plaha-80-hands.png); 
}

.highvoltage {
  background-image: url(/images/5/57/Alice-noblur-plaha-80-highvoltage.png); 
/*  background-image: url(/resources/assets/Alice-noblur-plaha-80-highvoltage.png);  */
}

.zombie {
    background-image: url(/images/d/d2/Alice-noblur-plaha-80-zombie.png);
}

.axe {
    background-image: url(/images/f/f3/Alice-noblur-plaha-80-axe.png);
}


span.mw-headline { display: inline-block; }
h3 { clear: left; }

@media (max-width:700px) {

  .plaha {
    max-width: 90%;
    margin: 20px auto;
    font-size:75%;
  }
}

@media (max-width:500px) {

  .icon {
    display: none;
  }
}


.bl-main {
	.stage-1 {
		h1 {
			display: block;
			margin: 2rem 0;
			text-align: center;
			font-size: 36px;

		}
	}
	.stage-2 {
		.group {
			margin-bottom: 3rem;
			& > span.t {
				display: flex;

				color: #2c3e50;
				font-weight: 600;
				font-size: 18px;
				margin-bottom: 2rem;

				justify-content: center;
				align-items: center;

				&:before,
				&:after {
					display: block;
					width: 10px;
					height: 2px;
					margin: 0 10px;
					content: '';
					background: #2c3e50;
				}
			}

			.columns {
				width: 100%;
				display: flex;
				align-items: flex-start;
				justify-content: space-around;

				@media @mobile {
					display: block;
				}
				.col {
					background: #fff;
					border-radius: 10px;
					overflow: hidden;
				    margin: 0 1rem;
				    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.14);

				    @media @mobile {
				    	width: 100%;
				    	margin: 0;
				    	margin-bottom: 2rem;
				    }
					span.t {
						display: flex;

						align-items: center;
						justify-content: center;
						height: 60px;

						color: #fff;
						background: #2980b9;

						font-size: 18px;
					}

					&.light {
						span.t {
							background: #27ae60;
							color: #fff;
						}
					}

					&.pro {
						span.t {
							background: #16a085;
							color: #fff;
						}
					}

					&.error {
						span.t {
							background: #c0392b;
							color: #fff;
						}
					}

					&.def {
						span.t {
							background: #34495e;
							color: #fff;
						}
					}

					.items {
						ul {
							margin: 0;
							padding: 0;
							list-style: none;
							li {
								padding: 0.5rem 1rem;
								border-bottom: 1px solid #ecf0f1;

								.transition-momentum();

								&:hover {
									background: #8e44ad;

									a {
										color: #fff;
									}
									
								}
								&:last-child {
									border-bottom: none;
								}

								a {
									display: block;
									width: 100%;
									height: 100%;
									font-size: 16px;
									.transition-momentum();

									&:visited {
										color: #7f8c8d!important;

									}
								}
							}
						}
					}
				}
			}
		}
	}
}