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

Версия от 08:58, 24 февраля 2024

/* Размещённый здесь CSS будет применяться ко всем темам оформления */
.tooltip{
  position: relative;
}

.tooltiptext {
  position: absolute;
  display: block;
  z-index: 2;
  width: 250px;
  padding: 10px;
  visibility: hidden;
  opacity: 0;
  white-space: normal;
  text-align: left;
  transition: all 0.2s;
  border: 1px solid #aaa;
  background-color: #ffdd66;
}

.tooltipmarine {
  position: absolute;
  display: block;
  z-index: 2;
  width: fit-content;
  padding: 20px;
  visibility: hidden;
  opacity: 0;
  white-space: normal;
  text-align: left;
  transition: all 0.2s;
}

.tooltiptable {
  position: absolute;
  display: block;
  z-index: 2;
  max-width:600px;
  width:max-content;
  padding: 10px;
  top:11pt;
  right:-55px;
  visibility: hidden;
  opacity: 0;
  white-space: normal;
  text-align: left;
  transition: all 0.2s;
  border: 1px solid #666;
  background-color: #ff6666;
}

.tooltip:hover>.tooltiptext {
  visibility: visible;
  opacity: 1;
}

.tooltip:hover>.tooltipmarine {
  visibility: visible;
  opacity: 1;
}

.tooltipmarine > * {
    width: max-content;
}

.tooltip:hover>.tooltiptable {
  visibility: visible;
  opacity: 1;
}

img {
    image-rendering: optimizeSpeed;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
}

/* Стиль таблицы для описания объектов, без излишеств */

.standart-table		{
					width:100%;
					padding:2px;
					border:3px solid grey;
					border-radius:8px;
					border-spacing:4px;
					}

.standart-table th	{
					background-color:dimgray;
					color:white;
					padding:3px;
					border:3px solid black;
					border-radius:3px;
					}

th.capital			{
					background-color:darkgrey;
					color:black;
					font-weight:bold;
					text-align: center;
					padding:3px;
					border:3px outset grey;
					border-radius:3px;
					}

.standart-table td	{
					background-color:rgb(220,220,220,5%);
					padding:16px;
					}

.standart-table td:hover{
						background-color:rgb(220,220,220,20%);
						}

.standart-table td.nohover			{
					background-color:rgb(220,220,220,5%);
					}

.standart-table td.nohover:hover{
						background-color:rgb(220,220,220,5%);
						}

.standart-table td.transparent		{
					background-color:rgb(220,220,220,0%);
					}

.standart-table td.transparent:hover{
						background-color:rgb(220,220,220,0%);
						}

/* Раскрашивание таблицы выше под стиль SECURITY */

.color-security,
tr.color-security		{
						border-color:#BF4C4C; 					/* Secondary */
						}
.color-security th,
tr.color-security th	{
						background-color:#BF2626; 				/* Primary */
						border-color:#BF1313; 					/* Primary Bold */
						}
.color-security th.capital,
tr.color-security th.capital {
						background-color:#BF4C4C; 				/* Secondary */
						color:#000000;							/* Secondary Text */
						border-color:#BF1313; 					/* Primary Bold */
						}

/* Раскрашивание таблицы выше под стиль SCIENCE */

.color-science,
tr.color-science		{
						border-color:#AA66CC; 					/* Secondary */
						}
.color-science th,
tr.color-science th	{
						background-color:#9C3DCC; 				/* Primary */
						border-color:#9528CC; 					/* Primary Bold */
						}
.color-science th.capital,
tr.color-science th.capital {
						background-color:#AA66CC; 				/* Secondary */
						color:#061306;							/* Secondary Text */
						border-color:#9528CC; 					/* Primary Bold */
						}

/* Раскрашивание таблицы выше под стиль SERVICE */

.color-service,
tr.color-service		{
						border-color:#65B36C; 					/* Secondary */
						}
.color-service th,
tr.color-service th	{
						background-color:#2A9633; 				/* Primary */
						border-color:#0F961A; 					/* Primary Bold */
						}
.color-service th.capital,
tr.color-service th.capital {
						background-color:#65B36C; 				/* Secondary */
						color:#000000;							/* Secondary Text */
						border-color:#0F961A; 					/* Primary Bold */
						}

/* Раскрашивание таблицы выше под стиль ENGINEERING */

.color-engineering,
tr.color-engineering	{
						border-color:#FFBA4C; 					/* Secondary */
						}
.color-engineering th,
tr.color-engineering th	{
						background-color:#FFAA19; 				/* Primary */
						border-color:#FFA500; 					/* Primary Bold */
						}
.color-engineering th.capital,
tr.color-engineering th.capital {
						background-color:#FFBA4C; 				/* Secondary */
						color:#000000;							/* Secondary Text */
						border-color:#FFA500; 					/* Primary Bold */
						}

/* Раскрашивание таблицы выше под стиль COMMAND */

.color-command,
tr.color-command		{
						border-color:#6691FF; 					/* Secondary */
						}
.color-command th,
tr.color-command th		{
						background-color:#3269FF; 				/* Primary */
						border-color:#195AFF; 					/* Primary Bold */
						}
.color-command th.capital,
tr.color-command th.capital {
						background-color:#6691FF; 				/* Secondary */
						color:#000000;							/* Secondary Text */
						border-color:#195AFF; 					/* Primary Bold */
						}

/* Раскрашивание таблицы выше под стиль MEDICAL */

.color-medical,
tr.color-medical		{
						border-color:#66C6FF; 					/* Secondary */
						}
.color-medical th,
tr.color-medical th		{
						background-color:#32B0FF; 				/* Primary */
						border-color:#19A7FF; 					/* Primary Bold */
						}
.color-medical th.capital,
tr.color-medical th.capital {
						background-color:#66C6FF; 				/* Secondary */
						color:#000000;							/* Secondary Text */
						border-color:#19A7FF; 					/* Primary Bold */
						}

/* Раскрашивание таблицы выше под стиль SUPPLY */

.color-supply,
tr.color-supply		{
						border-color:#77552F; 					/* Secondary */
						}
.color-supply th,
tr.color-supply th		{
						background-color:#7C4C18; 				/* Primary */
						border-color:#7A450C; 					/* Primary Bold */
						}
.color-supply th.capital,
tr.color-supply th.capital {
						background-color:#77552F; 				/* Secondary */
						color:#0D150D;							/* Secondary Text */
						border-color:#7A450C; 					/* Primary Bold */
						}

/* Раскрашивание таблицы выше под стиль LAVALAND */

.color-lavaland,
tr.color-lavaland		{
						border-color:#ED8A63; 					/* Secondary */
						}
.color-lavaland th,
tr.color-lavaland th		{
						background-color:#EE6A34; 				/* Primary */
						border-color:#ED571C; 					/* Primary Bold */
						}
.color-lavaland th.capital,
tr.color-lavaland th.capital {
						background-color:#ED8A63; 				/* Secondary */
						color:#000000;							/* Secondary Text */
						border-color:#ED571C; 					/* Primary Bold */
						}

/* Раскрашивание таблицы выше под стиль SYNTHETIC */

.color-synthetic,
tr.color-synthetic		{
						border-color:#4C82BF; 					/* Secondary */
						}
.color-synthetic th,
tr.color-synthetic th		{
						background-color:#2770C4; 				/* Primary */
						border-color:#1364C1; 					/* Primary Bold */
						}
.color-synthetic th.capital,
tr.color-synthetic th.capital {
						background-color:#4C82BF; 				/* Secondary */
						color:#000000;							/* Secondary Text */
						border-color:#1364C1; 					/* Primary Bold */
						}

/* Раскрашивание таблицы выше под стиль WIZARD */

.color-wizard,
tr.color-wizard		{
						border-color:#9866FF; 					/* Secondary */
						}
.color-wizard th,
tr.color-wizard th		{
						background-color:#7D32FF; 				/* Primary */
						border-color:#6919FF; 					/* Primary Bold */
						}
.color-wizard th.capital,
tr.color-wizard th.capital {
						background-color:#9866FF; 				/* Secondary */
						color:#000000;							/* Secondary Text */
						border-color:#6919FF; 					/* Primary Bold */
						}

/* Раскрашивание таблицы выше под стиль ANTAGONIST */

.color-antagonist,
tr.color-antagonist		{
						border-color:#4C1E1E; 					/* Secondary */
						}
.color-antagonist th,
tr.color-antagonist th	{
						background-color:#190505; 				/* Primary */
						border-color:#160202; 					/* Primary Bold */
						}
.color-antagonist th.capital,
tr.color-antagonist th.capital {
						background-color:#4C1E1E; 				/* Secondary */
						color:#D80A0A;							/* Secondary Text */
						border-color:#160202; 					/* Primary Bold */
						}

/* Раскрашивание таблицы выше под стиль RATVAR */

.color-ratvar,
tr.color-ratvar		{
						border-color:#332409; 					/* Secondary */
						}
.color-ratvar th,
tr.color-ratvar th		{
						background-color:#825b17; 				/* Primary */
						border-color:#6c4b13; 					/* Primary Bold */
						}
.color-ratvar th.capital,
tr.color-ratvar th.capital {
						background-color:#332409; 				/* Secondary */
						color:#FFFFFF;							/* Secondary Text */
						border-color:#6c4b13; 					/* Primary Bold */
						}

/* Раскрашивание таблицы выше под стиль XENOMORPH */

.color-xenomorph,
tr.color-xenomorph		{
						border-color:#4c4666; 					/* Secondary */
						}
.color-xenomorph th,
tr.color-xenomorph th	{
						background-color:#312d43; 				/* Primary */
						border-color:#252138; 					/* Primary Bold */
						}
.color-xenomorph th.capital,
tr.color-xenomorph th.capital {
						background-color:#4c4666; 				/* Secondary */
						color:#FFFFFF;							/* Secondary Text */
						border-color:#252138; 					/* Primary Bold */
						}

/* Раскрашивание таблицы выше под стиль MARINE */

.color-marine,
tr.color-marine		{
						border-color:#48648a; 					/* Secondary */
						}
.color-marine th,
tr.color-marine th		{
						background-color:#2c4c7b; 				/* Primary */
						border-color:#27426d; 					/* Primary Bold */
						}
.color-marine th.capital,
tr.color-marine th.capital {
						background-color:#48648a; 				/* Secondary */
						color:#000000;							/* Secondary Text */
						border-color:#27426d; 					/* Primary Bold */
						}

/* Подгон изображения под размер блока */

.background-image {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #242a31;
}

.background-image:after {
	position: absolute;
    pointer-events: none;
	top: 0;
	bottom: 0;
	left: 0;
    right: 0;
    display: block;
    background: linear-gradient(to right,#000,transparent);
    content: "";
}

.background-image picture,
.background-image img {
	width: 100%;
	height: 100%;
}

.background-image img {
	object-fit: cover;
	object-position: center;
	transition: transform 0.2s ease;
}

.background-image:hover img {
	transform: scale(1.1);
}

/* Подгон изображения для отображения границы блока, без увеличения при наведении */

.border-image {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #242a31;
}

.border-image img {
	object-fit: cover;
	object-position: center;
}

/* Блок, меняющий цвет под выбранную тему */ 

.themed-block {
	background: var( --color-surface-1 );
	border: 1px solid var( --border-color-base );
	color: var( --color-base--emphasized )
}

/* "Кнопка" для ссылки, меняющая цвет под выбранную тему */ 

.themed-button {
	display: flex;
}

.themed-button a {
	flex-grow: 1;
	padding: var( --space-xs );
	border: 1px solid var( --border-color-base );
	background: var( --color-surface-2 );
	border-radius: var( --border-radius--medium );
	color: var( --color-base--emphasized ) !important;
    line-height: var( --line-height-xs );
    text-decoration: none !important;
}

.themed-button a:hover {
	background: var( --color-surface-2--hover );
}

.themed-button a:active {
	background: var( --color-surface-2--active );
}