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

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, .mw-body h1, .mw-body-content h2, .mw-body-content h3 { 
	font-family: "Noto Sans", sans-serif; 
}*/


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


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

.gold {  /* для div цветовой класс желательно указывать явно, тк закрашивается фон и могут коллизии возникнуть. Но пока теряется левый бордюр, если ограничить. Надо дебажить */
  background: rgb(236,237,5);
  background: linear-gradient(90deg, rgba(236,237,5,1) 0%, rgba(50,214,215,1) 100%);
}

.plaha-gray {
  color:#fff;
  background: rgb(168,210,210);
  background: linear-gradient(90deg, rgba(168,210,210,1) 0%, rgba(107,88,92,1) 100%);
}

.plaha-red {
  color:#fff;
  background: rgb(237,180,5);
  background: linear-gradient(90deg, rgba(237,180,5,1) 0%, rgba(221,18,63,1) 100%);
}

.plaha-azure { /*
  background: rgb(63,94,251);
  background: linear-gradient(-90deg, rgba(63,94,251,1) 0%, rgba(80,200,120,1) 100%);
  color: #fff;  */
background: rgb(215,221,254);
background: linear-gradient(-90deg, rgba(215,221,254,1) 0%, rgba(206,251,221,1) 100%);
}

.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;*/
	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;
/*  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;
  }
}
Источник — https://wiki.yaboard.com/index.php?title=MediaWiki:Common.css&oldid=4848