MediaWiki:Common.css: различия между версиями
Страница интерфейса MediaWiki
Дополнительные действия
Admin (обсуждение | вклад) Нет описания правки |
Admin (обсуждение | вклад) Нет описания правки |
||
| (не показаны 363 промежуточные версии 3 участников) | |||
| Строка 1: | Строка 1: | ||
/* Размещённый здесь CSS будет применяться ко всем темам оформления */ | /* Размещённый здесь CSS будет применяться ко всем темам оформления */ | ||
.law-td { | .law-td { | ||
text-decoration: underline; | text-decoration: underline; | ||
color: #030303; | |||
} | } | ||
| Строка 10: | Строка 12: | ||
.law-selected { | .law-selected { | ||
outline: 2px solid #529ff1; | /*outline: 2px solid #529ff1;*/ | ||
box-shadow: 0px 0px 15px 5px rgba(34, 60, 80, 0.5) inset; | |||
} | } | ||
.blink { | |||
font-weight: bold; | |||
color: red; | |||
animation: blink 0.3s infinite alternate; | |||
} | |||
@keyframes blink { | |||
from { color: darkred; } | |||
to { color: red; } | |||
} | |||
/* Зеленый, желтый, оранжевый, красный, темно-красный */ | /* Зеленый, желтый, оранжевый, красный, темно-красный */ | ||
.td-bg1 { background-color: #d9ead3; } | .td-bg1 { background-color: #d9ead3; color: #030303;} | ||
.td-bg2 { background-color: #fff2cc; } | .td-bg2 { background-color: #fff2cc; color: #030303;} | ||
.td-bg3 { background-color: #f9cb9c; } | .td-bg3 { background-color: #f9cb9c; color: #030303;} | ||
.td-bg4 { background-color: #f4cccc; } | .td-bg4 { background-color: #f4cccc; color: #030303;} | ||
.td-bg5 { background-color: #e89b9b; } | .td-bg5 { background-color: #e89b9b; color: #030303;} | ||
.th-bg1 { background-color: #93c47d; } | .th-bg1 { background-color: #93c47d; color: #030303;} | ||
.th-bg2 { background-color: #ffd966; } | .th-bg2 { background-color: #ffd966; color: #030303;} | ||
.th-bg3 { background-color: #e69138; } | .th-bg3 { background-color: #e69138; color: #030303;} | ||
.th-bg4 { background-color: #e06666; } | .th-bg4 { background-color: #e06666; color: #030303;} | ||
.th-bg5 { background-color: #cc0000; } | .th-bg5 { background-color: #cc0000; color: #030303;} | ||
/* Вертикальный табс */ | /* Вертикальный табс */ | ||
.vtabs { | .vtabs { | ||
display: flex; | display: flex; | ||
width: 100%; | width: 100%; | ||
border: 1px solid # | border: 1px solid #1e222ccc; | ||
border-radius: 6px; | border-radius: 6px; | ||
overflow: hidden; | overflow: hidden; | ||
| Строка 43: | Строка 57: | ||
flex-direction: column; | flex-direction: column; | ||
width: 220px; | width: 220px; | ||
background-color: # | background-color: #1a232ab3; | ||
border-right: 1px solid # | border-right: 1px solid #1e222ccc; | ||
} | } | ||
| Строка 51: | Строка 66: | ||
cursor: pointer; | cursor: pointer; | ||
font-weight: bold; | font-weight: bold; | ||
color: #fcfcfc; | |||
border-bottom: 1px solid # | border-bottom: 1px solid #1e222ccc; | ||
transition: background 0.2s, color 0.2s; | transition: background 0.2s, color 0.2s; | ||
} | } | ||
.vtabs-button:hover { | .vtabs-button:hover { | ||
background-color: # | background-color: #1e222ccc; | ||
} | } | ||
.vtabs-button.active { | .vtabs-button.active { | ||
background-color: # | background-color: #1a232ab3; | ||
color: #2a6ddf; | color: #2a6ddf; | ||
border-left: 4px solid #2a6ddf; | border-left: 4px solid #2a6ddf; | ||
| Строка 69: | Строка 84: | ||
flex-grow: 1; | flex-grow: 1; | ||
padding: 20px; | padding: 20px; | ||
background: # | background: #1a232ab3; | ||
color: #fcfcfc; | |||
} | } | ||
| Строка 80: | Строка 96: | ||
} | } | ||
/* | @keyframes fadeIn { | ||
from { | |||
opacity: 0.5; | |||
} | |||
to { | |||
opacity: 1; | |||
} | |||
} | |||
/* Анимированный фон */ | |||
@keyframes animateBackground { | |||
from { | |||
background-position: 0 0; | |||
} | |||
to { | |||
background-position: -960px 0; | |||
} | |||
} | |||
. | /* разные БГшки*/ | ||
.space-bg, | |||
.stars-bg, | |||
.specs-bg { | |||
position: fixed; | |||
width: 100%; | |||
height: 100%; | |||
top: 0; | |||
left: 0; | |||
background-repeat: repeat; | |||
} | } | ||
. | .space-bg { | ||
background- | background-image: url("../images/6/60/Space-bg.png"); | ||
animation: animateBackground 120s linear infinite; | |||
z-index: -7; | |||
} | |||
.stars-bg { | |||
background-image: url("../images/2/22/Stars-bg.png"); | |||
animation: animateBackground 60s linear infinite; | |||
z-index: -6; | |||
} | |||
.specs-bg { | |||
background-image: url("../images/3/38/Specs-bg.png"); | |||
animation: animateBackground 30s linear infinite; | |||
z-index: -4; | |||
} | } | ||
. | .Inteqbg{ | ||
content: ''; | |||
position: fixed; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
background-image: linear-gradient(to bottom, #e3943f, #838383); | |||
background-repeat: no-repeat; | |||
background-position: center; center; | |||
background-size: 100% auto; | |||
z-index: -2; | |||
opacity: 1; | |||
} | |||
.Inteqlogobg{ | |||
content: ''; | |||
position: fixed; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
background-image: url('/images/e/ed/Inteqlogo1.png'); | |||
background-repeat: no-repeat; | |||
background-position: center; center; | |||
background-size: 30% auto; | |||
z-index: -1; | |||
opacity: 0.3; | |||
} | } | ||
. | |||
/* Панель для гайдов */ | |||
.guide { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 10px; | |||
} | } | ||
. | .guide-panel { | ||
display: | flex: 0 1 calc(50% - 10px); | ||
box-sizing: border-box; | |||
border-radius: 10px; | |||
border: 2px solid; | |||
background-size: 100% auto !important; | |||
overflow: hidden; | |||
display: flex; | |||
} | } | ||
. | .guide-panel .overlay { | ||
flex: 1; | |||
backdrop-filter: blur(5px); | |||
background-color: rgba(0, 0, 0, 0.1); | |||
} | } | ||
. | .guide-panel .header { | ||
display: flex; | |||
justify-content: space-between; | |||
flex-direction: row; | |||
align-items: flex-start; | |||
} | } | ||
. | .guide-panel .title { | ||
border-bottom: | padding: 2px; | ||
padding-inline: 30px; | |||
border: 2px solid; | |||
border-bottom-left-radius: 10px; | |||
border-bottom-right-radius: 10px; | |||
border-top: none; | |||
font-size: 1.2em; | |||
} | } | ||
.guide-panel .items { | |||
display: flex; | |||
justify-content: space-around; | |||
flex-wrap: wrap; | |||
gap: 5px; | |||
padding: 5px; | |||
} | } | ||
.guide-panel .item { | |||
flex: 0 1 calc(33% - 5px); | |||
box-sizing: border-box; | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
border: 1px rgba(255, 255, 255, 0.2) solid !important; | |||
border-radius: 10px; | |||
padding: 2px; | |||
padding-left: 5px; | |||
} | |||
. | .guide-panel .item:hover { | ||
cursor: pointer; | cursor: pointer; | ||
border: 1px solid rgba(255, 255, 255, 0.5) !important; | |||
} | |||
.guide-panel .logo { | |||
margin: 3px; | |||
} | } | ||
. | |||
color: | .guide a, | ||
.guide a:visited, | |||
.guide a:active, | |||
.guide a.external { | |||
color: rgba(200, 215, 255, 0.9) !important; | |||
font-weight: bold; | font-weight: bold; | ||
} | } | ||
.guide a.new, | |||
.guide a.new:visited { | |||
color: #730300 !important; | |||
font-weight: normal !important; | |||
} | } | ||
.guide-bg-med { | |||
. | background: url(https://wiki.ss13-bluemoon.ru/images/1/17/Guide-bg-med.png) center top no-repeat; !important | ||
} | } | ||
. | |||
.guide-bg-cargo { | |||
background: url(https://wiki.ss13-bluemoon.ru/images/2/28/Guide-bg-cargo.png) center top no-repeat; !important | |||
} | } | ||
. | |||
.guide-bg-engi { | |||
background: url(https://wiki.ss13-bluemoon.ru/images/d/dd/Guide-bg-engi.png) center top no-repeat; !important | |||
} | } | ||
. | |||
background | .guide-bg-rnd { | ||
background: url(https://wiki.ss13-bluemoon.ru/images/a/a2/Guide-bg-rnd.png) center top no-repeat; !important | |||
} | } | ||
. | |||
.guide-bg-sec { | |||
background: url(https://wiki.ss13-bluemoon.ru/images/9/9a/Guide-bg-sec.png) center top no-repeat; !important | |||
} | } | ||
.guide-bg-service { | |||
background: url(https://wiki.ss13-bluemoon.ru/images/2/2f/Guide-bg-service.png) center top no-repeat; !important | |||
} | |||
. | .guide-bg-misc { | ||
background: url(https://wiki.ss13-bluemoon.ru/images/4/47/Guide-bg-misc.png) center top no-repeat; !important | |||
} | } | ||
. | .lore-bg-inteq { | ||
background: url(https://wiki.ss13-bluemoon.ru/images/c/c0/Lore-bg-Inteq.png) center top no-repeat; !important | |||
} | } | ||
/* Убираем размытие со всех изображений */ | |||
img { | |||
image-rendering: pixelated; | |||
} | } | ||
. | |||
.bluemoon-bg { | |||
background-image: linear-gradient(to bottom right, rgba(33, 141, 168, 0.45), rgba(33, 141, 200, 0.45)); | |||
} | } | ||
. | |||
.palemoon-bg { | |||
background-image: linear-gradient(to bottom right, rgba(63, 69, 77, 0.45), rgba(110, 107, 107, 0.45)); | |||
} | } | ||
. | |||
.redmoon-bg { | |||
background-image: linear-gradient(to bottom right, rgba(124, 35, 33, 0.45), rgba(200, 35, 33, 0.45)); | |||
} | } | ||
.coffee-bg { | |||
background-image: linear-gradient(to bottom right, rgba(191, 145, 97, 0.45), rgba(220, 160, 110, 0.45)); | |||
. | |||
. | |||
} | } | ||
.CM-bg { | |||
. | background-image: linear-gradient(to bottom right, rgba(179, 141, 202, 0.45), rgba(206, 156, 225, 0.45)); | ||
} | } | ||
.main-panel { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 10px; | |||
.border>div, | |||
>div { | |||
border: 1px solid rgba(255, 255, 255, 0.15); | |||
border-radius: 10px; | |||
box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; | |||
} | |||
. | .title { | ||
background-color: rgba(225, 216, 255, 0.2); | |||
border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |||
padding: 5px; | |||
font-size: 1.1em; | |||
font-weight: bold; | |||
} | } | ||
. | .item { | ||
flex: 1 1 calc(50% - 10px); | |||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
box-sizing: border-box; | |||
background: rgba(2, 23, 26, 0.5); | |||
overflow: hidden; | |||
backdrop-filter: blur(10px); | |||
border-radius: 20px; | |||
>.title { | |||
flex: 0 0 auto; | |||
text-align: center; | |||
} | |||
>div:not(.title) { | |||
flex: 1 1 auto; | |||
min-height: 0; | |||
padding: 10px; | |||
} | |||
} | } | ||
. | .server-panel { | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | |||
gap: 10px; | gap: 10px; | ||
padding: | |||
.server { | |||
flex: 1 1 100%; | |||
overflow: hidden; | |||
.title { | |||
background-color: rgba(255, 255, 255, 0.1); | |||
padding-left: 10px; | |||
border-bottom: none; | |||
} | |||
.desc { | |||
padding: 10px; | |||
padding-bottom: 5px; | |||
} | |||
.links { | |||
display: flex; | |||
flex-wrap: nowrap; | |||
justify-content: space-around; | |||
.link { | |||
padding: 5px; | |||
margin: 5px; | |||
text-align: center; | |||
box-sizing: border-box; | |||
} | |||
.link:hover { | |||
cursor: pointer; | |||
border: 1px solid rgba(255, 255, 255, 0.5) !important; | |||
} | |||
} | |||
} | |||
} | } | ||
.button-panel { | |||
. | |||
display: flex; | display: flex; | ||
align-items: center; | |||
flex-wrap: wrap; | flex-wrap: wrap; | ||
.row { | |||
flex: 1 1 100%; | |||
display: flex; | |||
flex-wrap: wrap; | |||
align-items: last baseline; | |||
justify-content: space-between; | |||
.button { | |||
flex: 1 1 calc(33% - 10px); | |||
display: flex; | |||
flex-direction: column; | |||
box-sizing: border-box; | |||
align-self: stretch; | |||
overflow: hidden; | |||
margin: 5px; | |||
>div { | |||
text-align: center; | |||
padding: 5px; | |||
} | |||
.content { | |||
flex: 0 0 auto; | |||
padding: 15px; | |||
background: rgba(2, 23, 26, 0.9); | |||
} | |||
.title { | |||
flex: 1 1 100%; | |||
font-size: 1em; | |||
} | |||
} | |||
.button:hover { | |||
cursor: pointer; | |||
border: 1px solid rgba(255, 255, 255, 0.5) !important; | |||
} | |||
} | |||
} | } | ||
} | |||
@media (max-width: 600px) { | |||
.main-panel .item { | |||
flex: 1 1 100% !important; | |||
} | } | ||
. | .main-panel .button { | ||
flex: 1 1 100% !important; | |||
} | } | ||
} | |||
.tooltip { | |||
position: relative; | |||
cursor: pointer; | |||
} | |||
.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: #005069; | |||
border-radius: 8px; | |||
transition-delay: 0.2s; | |||
color: #fcfcfc; | |||
} | |||
.tooltip:hover > .tooltiptext{ | |||
visibility: visible; | |||
opacity: 1; | |||
transition-delay: 0.1s; | |||
} | |||