Template:Infobox/styles.css: Difference between revisions

Jump to navigation Jump to search
no edit summary
No edit summary
No edit summary
 
Line 1: Line 1:
/*
/* ========== Infobox base (Module:Infobox) ========== */
* Infobox stylesheet for 3rd parties who use [[Module:Infobox]]
* and don't have to worry about manual classes lying around (most of you)
*/
.infobox {
.infobox {
border: 2px solid #C14424;
  border: 2px solid #C14424;     /* толстая рамка 2px */
border-spacing: 3px;
  border-radius: 6px;
border-radius: 5px 5px;
  background-color: #EFE9DE;
background-color: #EFE9DE;
  color: #000;
color: black;
  margin: 0.5em 0 0.5em 1em;     /* справа плавающий бокс */
/* @noflip */
  padding: 0.15em;               /* компактнее */
margin: 0.5em 0 0.5em 1em;
  float: right;                   /* @noflip */
padding: 0.2em;
  clear: right;                   /* @noflip */
/* @noflip */
  font-size: 88%;
float: right;
  line-height: 1.35em;           /* плотнее строки */
/* @noflip */
  width: 22em;
clear: right;
  border-spacing: 2px;            /* меньше зазор между строками */
font-size: 88%;
line-height: 1.5em;
width: 22em;
}
}


/*
/* Встроенные инфобоксы (когда subbox=yes) */
* not strictly certain .infobox-subbox styles are necessary since the modules
* now exclusively output infobox-subbox or infobox, not both
* just replicating the module faithfully
*/
.infobox-subbox {
.infobox-subbox {
padding: 0;
  padding: 0;
border: none;
  border: 2px solid #C14424;      /* та же рамка для консистентности */
margin: -3px;
  border-radius: 6px;
width: auto;
  margin: -2px;                   /* компенсируем border-spacing родителя */
min-width: 100%;
  width: auto;
font-size: 100%;
  min-width: 100%;
clear: none;
  font-size: 100%;
float: none;
  clear: none;
background-color: transparent;
  float: none;
  background-color: transparent;
}
}


/* Выравнивания ячеек */
.infobox-header,
.infobox-header,
.infobox-label,
.infobox-label,
Line 46: Line 38:
.infobox-subheader,
.infobox-subheader,
.infobox-image,
.infobox-image,
.infobox-navbar {
.infobox-navbar { vertical-align: top; }
vertical-align: top;
}


.infobox-label,
.infobox-label,
.infobox-data {
.infobox-data { text-align: left; } /* @noflip */
/* @noflip */
text-align: left;
}


/* Заголовок (title/above) — компактный */
.infobox-above,
.infobox-above,
.infobox-title {
.infobox-title {
font-size: 125%;
  font-size: 125%;
font-weight: bold;
  font-weight: bold;
text-align: center;
  text-align: center;
border-radius: 2px 2px;
  border-radius: 4px;
}
  padding: 0.15em 0.4em;          /* меньше отступов у тайтла */
 
  margin-bottom: 0.15em;         /* меньше расстояние до содержимого */
.infobox-title {
padding: 0.2em;
}
}


/* Центровки сервисных рядов */
.infobox-header,
.infobox-header,
.infobox-subheader,
.infobox-subheader,
.infobox-image,
.infobox-image,
.infobox-full-data,
.infobox-full-data,
.infobox-below {
.infobox-below { text-align: center; }
text-align: center;
}
 
.infobox-navbar {
/* @noflip */
text-align: right;
}


.infobox .navbar {
.infobox-navbar { text-align: right; } /* @noflip */
font-size: 100%;
}


.infobox-3cols-child {
.infobox .navbar { font-size: 100%; }
margin: auto;
.infobox-3cols-child { margin: auto; }
}


/* Общая коробка */
/* -------- Дополнительные правки под макет -------- */
.infobox,
.infobox-subbox {
  background: #e7e0d5;          /* бежевый фон как на примере */
  color: #161616;
  border: 1px solid #a63a3a;    /* кроваво-красная окантовка */
  border-radius: 8px;
  box-shadow: none;
}


/* Изображение и подпись */
/* Картинка и подпись */
.infobox .infobox-image { padding: 0; }
.infobox .infobox-image { padding: 0; }
.infobox .infobox-caption {
.infobox .infobox-caption {
   padding: .45em .7em .6em;
   padding: 0.35em 0.6em 0.45em;   /* компактнее подпись */
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Roboto Mono", monospace;
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Roboto Mono", monospace;
   font-weight: 600;             /* как на вашем скрине */
   font-weight: 600;
   color: #111;
   color: #111;
}
}


/* Лейбл слева (без «фоновой плашки», без двоеточий) */
/* Лейбл слева (без фона и двоеточий) */
.infobox .infobox-label {
.infobox .infobox-label {
   background: transparent;
   background: transparent;
   font-weight: 700;
   font-weight: 700;
   text-align: left;             /* важно, чтобы было как в примере */
   text-align: left;
   width: 42%;
   width: 42%;
   color: #131313;
   color: #131313;
   padding: .35em .6em;
   padding: 0.22em 0.5em;         /* меньше вертикальные отступы */
  border-bottom: 0;
   white-space: normal;
   white-space: normal;
  border: 0;
}
}


/* Значение справа — уважаем переносы строк в викитексте */
/* Значение справа — уважаем \n внутри параметров */
.infobox .infobox-data,
.infobox .infobox-data,
.infobox .infobox-full-data {
.infobox .infobox-full-data {
   padding: .35em .6em;
   padding: 0.22em 0.5em;         /* меньше вертикальные отступы */
  border-bottom: 0;
   white-space: pre-line;         /* переносы из вики-разметки */
   white-space: pre-line;         /* <<< это даёт переносы от \n внутри {{...}} */
   line-height: 1.28;             /* ещё плотнее строки в значении */
   line-height: 1.35;
  border: 0;
}
 
/* Разделители строк не нужны — убираем мутные бордеры из модульной верстки */
.infobox tr { border: 0; }
.infobox th, .infobox td { border: 0; }
 
/* Заголовок/Title (если используете) — спокойный, без вырвиглаз */
.infobox .infobox-title {
  display: none; /* как раньше: изображение сверху — заголовок не нужен */
}
}


/* Навбар внизу (V • T • E) — тоньше и красным */
/* Убираем лишние бордеры строк/ячеек */
.infobox .infobox-navbar {
.infobox tr, .infobox th, .infobox td { border: 0; }
  padding: .4em .6em .5em;
  text-align: right;
  color: #a63a3a;
}

Navigation menu