Перейти к содержанию

MediaWiki:Common.css

Материал из Wiki yaboard

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

  • Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
  • Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
  • Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
  • Opera: Нажмите Ctrl+F5.
@import url("https://fonts.googleapis.com/css?family=Roboto|Noto+Sans"); /* :400,700,400italic,700italic */

body.page-Заглавная_страница h1.firstHeading { display: none; }
body.page-Заглавная_страница div.mw-body { background: none; box-shadow: none !important; }
body.page-Заглавная_страница div#left-navigation { display: none; }
body.page-Заглавная_страница div#catlinks { display: none; }
body.page-Заглавная_страница div#mw-navigation { display: none; }

h1, h2, h3, h4, h5, h6 {
  border-bottom:none;
  position:relative;
  overflow-y:none;
  overflow-x:hidden;
}


h2 span.mw-headline:after,h3 span.mw-headline:after,h4 span.mw-headline:after,h5 span.mw-headline:after,h6 span.mw-headline:after {
  content : "";
  position: absolute;
  bottom:0;
  left:0;
  width:60%;
  height:1px;
  background:#aaa;
}



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);
}


.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;
}


@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;*/
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  padding: 14px 24px;
  border-color: #ccc;
  /*border-radius: 4px 45px 45px 45px;*/
}

.plaha-gold {
background: rgb(233,244,255);
background: linear-gradient(90deg, rgba(233,244,255,1) 0%, rgba(255,254,198,1) 38%);
}

.plaha-gray {
  color:#eee;
  background: rgb(210,196,168);
  background: linear-gradient(90deg, rgba(210,196,168,1) 0%, rgba(149,123,93,1) 38%);
}

.plaha-red {
  color:gold;
  text-shadow: 1px 1px 0 rgba(0,0,0,1),
  background: rgb(238,148,0);
  background: linear-gradient(90deg, rgba(238,148,0,1) 0%, rgba(226,10,10,1) 56%);
/*  background: rgb(237,180,5);
  background: linear-gradient(90deg, rgba(237,180,5,1) 0%, rgba(221,18,63,1) 50%); */
}

.plaha-azure {
/*  background: rgb(215,221,254);
  background: linear-gradient(-90deg, rgba(215,221,254,1) 0%, rgba(206,251,221,1) 100%); */
/* background: rgb(234,246,255);
background: linear-gradient(90deg, rgba(234,246,255,1) 0%, rgba(219,255,218,1) 38%); */
background: rgb(255,229,208);
background: linear-gradient(90deg, rgba(255,229,208,1) 0%, rgba(219,255,218,1) 38%);
}

.plaha-oldpaper {
  color:#773;
  background: rgb(246,228,195);
  background: linear-gradient(125deg, rgba(246,228,195,1) 0%, rgba(245,218,170,1) 50%);
}

.plaha-draft {
  color:#998;
  background: rgb(240,232,232);
  background: linear-gradient(90deg, rgba(240,232,232,1) 0%, rgba(255,250,242,1) 38%);
}

.plaha-widgetbox {
  color:green;
  padding:10px; border:1px #bbe solid; 
  border-radius:10px;
  max-width:800px; 
  box-shadow:1px 1px 3px #aab;
}


/* цветовой класс для всего остального - красим текст, добавляем контраст тенью */
.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;
}



.st { display:inline-block; text-align:center; margin:1px auto; padding:3px; width:120px; height:20px; border-radius:15px; font-size:0.8em;
}

.st-red { background-color: IndianRed; color:white;
}

.st-yellow { background-color: Gold; color:black;
}

.st-green { background-color: MediumSeaGreen; color:white; /* LimeGreen */
}

.st-gray { background-color: Gainsboro;color:black;
}



table.wikitable { 
  width:100%; max-width:800px; margin: 20px auto;
}


table.wikitable td { vertical-align: top;

}

.noborder-right { border:none !important; text-align:right
}

.noborder-left { border:none !important; text-align:left
}


/*.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;*/
	border-radius: 8px; 
    background: #6839cf !important;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

pre { font-family: Arial !important;}
/*pre, .catlinks, .spoilers-body {  border-radius: 4px 20px 20px 20px; display: flow-root;
}*/

.spoilers-body { margin-top:10px;}

pre, .catlinks, .spoilers-body { 
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  background-color: #ecedee;
  border: 1px solid #dadce0;
}

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

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

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

.icon {
  height:80px;
  width: 80px;
  left:0;
  margin:-10px 10px 20px 10px;
  float:left;
}


.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); 
}

.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);
}

.unofficial {
  background-image: url(/images/1/17/Alice-noblur-plaha-80-unofficial.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;
  }
}
Источник — https://wiki.yaboard.com/index.php?title=MediaWiki:Common.css&oldid=6890