MediaWiki:Common.css: различия между версиями
Страница интерфейса MediaWiki
Дополнительные действия
Actn2k (обсуждение | вклад) Нет описания правки |
Actn2k (обсуждение | вклад) Нет описания правки |
||
| Строка 29: | Строка 29: | ||
/* Вертикальный табс */ | /* Вертикальный табс */ | ||
.vtabs { | .vtabs { | ||
| Строка 43: | Строка 43: | ||
flex-direction: column; | flex-direction: column; | ||
width: 220px; | width: 220px; | ||
background-color: # | background-color: #e6ebf6; | ||
border-right: 1px solid #ccc; | border-right: 1px solid #ccc; | ||
} | } | ||
| Строка 61: | Строка 61: | ||
.vtabs-button.active { | .vtabs-button.active { | ||
background-color: # | background-color: #eef2f9; | ||
color: #2a6ddf; | color: #2a6ddf; | ||
border-left: 4px solid #2a6ddf; | border-left: 4px solid #2a6ddf; | ||
| Строка 69: | Строка 69: | ||
flex-grow: 1; | flex-grow: 1; | ||
padding: 20px; | padding: 20px; | ||
background: # | background: #eef2f9; | ||
} | } | ||
| Строка 80: | Строка 80: | ||
} | } | ||
/* Сворачиваемая панель */ | /* Сворачиваемая панель */ | ||
.colstr-panel { | .colstr-panel { | ||
| Строка 86: | Строка 86: | ||
border-radius: 2px; | border-radius: 2px; | ||
margin: 10px 0; | margin: 10px 0; | ||
box-shadow: 0 2px 4px rgba(0,0,0,0.1); | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | ||
} | } | ||
.colstr-header { | .colstr-header { | ||
background-color: # | background-color: #e6ebf6; | ||
padding: 10px 14px; | padding: 10px 14px; | ||
cursor: pointer; | cursor: pointer; | ||
| Строка 129: | Строка 129: | ||
@keyframes fadeIn { | @keyframes fadeIn { | ||
from { opacity: 0.5; } | from { | ||
to { opacity: 1; } | opacity: 0.5; | ||
} | |||
to { | |||
opacity: 1; | |||
} | |||
} | } | ||
/* Анимированный фон */ | /* Анимированный фон */ | ||
@keyframes animateBackground { | @keyframes animateBackground { | ||
from { | |||
background-position: 0 0; | |||
} | |||
to { | |||
background-position: -960px 0; | |||
} | |||
} | } | ||
.space-bg, | .space-bg, | ||
.stars-bg, | .stars-bg, | ||
.specs-bg { | .specs-bg { | ||
position: fixed; | |||
width: 100%; | |||
height: 100%; | |||
top: 0; | |||
left: 0; | |||
background-repeat: repeat; | |||
} | } | ||
.space-bg { | .space-bg { | ||
background-image: url("../images/6/60/Space-bg.png"); | |||
animation: animateBackground 120s linear infinite; | |||
z-index: -7; | |||
} | } | ||
.stars-bg { | .stars-bg { | ||
background-image: url("../images/2/22/Stars-bg.png"); | |||
animation: animateBackground 60s linear infinite; | |||
z-index: -6; | |||
} | } | ||
.specs-bg { | .specs-bg { | ||
background-image: url("../images/3/38/Specs-bg.png"); | |||
animation: animateBackground 30s linear infinite; | |||
z-index: -4; | |||
} | } | ||
/* Главная страница */ | /* Главная страница */ | ||
.main-panel { | .main-panel { | ||
display: flex; | |||
gap: 20px; | |||
} | |||
.main-panel div { | |||
backdrop-filter: blur(2px); | |||
} | |||
.main-panel > div { | |||
border-radius: 20px; | |||
box-sizing: border-box; | |||
display: flex; | |||
} | flex-direction: column; | ||
justify-content: space-between; | |||
} | |||
.mp-btn-panel { | |||
width: 50%; | |||
} | |||
.mp-server-panel { | |||
justify-content: space-around; | |||
width: 50%; | |||
background: oklch(0.1884 0.0291 207.77 / 53.83%); | |||
border: 1px solid rgba(255, 255, 255, 0.3); | |||
overflow: hidden; | |||
} | |||
.mp-btn-category { | |||
background: oklch(0.1884 0.0291 207.77 / 53.83%); | |||
border: 1px solid rgba(255, 255, 255, 0.3); | |||
border-radius: 15px; | |||
overflow: hidden; | |||
} | |||
.mp-btn-title { | |||
background-color: rgba(255, 255, 255, 0.1); | |||
padding: 10px; | |||
font-weight: bold; | |||
text-align: center; | |||
backdrop-filter: blur(5px); | |||
} | |||
.mp-btn-row { | |||
display: flex; | |||
gap: 10px; | |||
padding: 15px; | |||
flex-wrap: wrap; | |||
} | |||
.mp-btn { | |||
flex: 1; | |||
text-align: center; | |||
} | |||
.mp-server-info { | |||
margin-bottom: 20px; | |||
padding: 20px; | |||
} | |||
.mp-servers { | |||
display: flex; | |||
flex-direction: column; | |||
gap: 15px; | |||
padding: 20px; | |||
} | |||
.mp-server { | |||
text-align: left; | |||
border-radius: 12px; | |||
padding: 15px; | |||
} | |||
.mp-server .title { | |||
font-size: 1.1em; | |||
margin-bottom: 8px; | |||
} | |||
.mp-server .desc { | |||
font-size: 0.95em; | |||
color: #d1d5db; | |||
} | |||
.mp-server .links { | |||
margin-top: 12px; | |||
} | display: flex; | ||
flex-wrap: wrap; | |||
gap: 8px; | |||
} | |||
.server-link { | |||
padding: 6px 10px; | |||
border: 1px solid rgba(255, 255, 255, 0.3); | |||
border-radius: 8px; | |||
text-decoration: none; | |||
color: white; | |||
font-size: 0.9em; | |||
} | |||
.server-link:hover { | |||
background-color: rgba(255, 255, 255, 0.2); | |||
} | |||
a.back-to-top { | a.back-to-top { | ||
| Строка 286: | Строка 289: | ||
bottom: 20px; | bottom: 20px; | ||
background-color: darkred; | background-color: darkred; | ||
background: url(https://wiki.ss13-bluemoon.ru/images/4/41/Arrowtop.png) 0% 0%/70px 70px no-repeat; | background: url(https://wiki.ss13-bluemoon.ru/images/4/41/Arrowtop.png) 0% 0%/70px | ||
70px no-repeat; | |||
background-position: 43%; | background-position: 43%; | ||
background-position-x: center; | background-position-x: center; | ||
| Строка 346: | Строка 350: | ||
border: 1px solid rgba(0, 0, 0, 0.5); | border: 1px solid rgba(0, 0, 0, 0.5); | ||
border-top: none; | border-top: none; | ||
background-color: # | background-color: #6e7167; | ||
} | } | ||