MediaWiki:Common.css: различия между версиями
Страница интерфейса MediaWiki
Дополнительные действия
Admin (обсуждение | вклад) Нет описания правки |
Admin (обсуждение | вклад) Нет описания правки |
||
| (не показано 50 промежуточных версий этого же участника) | |||
| Строка 1: | Строка 1: | ||
/* Размещённый здесь CSS будет применяться ко всем темам оформления */ | /* Размещённый здесь CSS будет применяться ко всем темам оформления */ | ||
/* Бар */ | |||
.home-event { | |||
border: 1px solid var( --border-color-base ); | |||
border-radius: var( --border-radius-medium ); | |||
background: var( --color-surface-1 ); | |||
} | } | ||
.home-gameinfo { | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
padding: var( --space-xs ) var( --space-md ); | |||
white-space: nowrap; | |||
line-height: 1; | |||
overflow-x: auto; | |||
font-size: var( --font-size-small ); | |||
gap: var( --space-xl ); | |||
} | } | ||
. | |||
.home-gameinfo-label { | |||
color: var( --color-subtle ); | |||
} | } | ||
. | |||
.home-gameinfo-list { | |||
display: flex; | |||
} | } | ||
. | |||
display: | .home-gameinfo-list-item { | ||
display: flex; | |||
align-items: center; | |||
gap: var( --space-xs ); | |||
font-weight: var( --font-weight-medium ); | |||
} | } | ||
.home-gameinfo-list-item + .home-gameinfo-list-item { | |||
margin-left: var( --space-sm ); | |||
border-left: 1px solid var( --border-color-base ); | |||
padding-left: var( --space-sm ); | |||
} | } | ||
.home-event .home-card { | |||
height: 5rem; | |||
border-top-left-radius: 0; | |||
border-top-right-radius: 0; | |||
} | } | ||
.home-event .home-card__background:after { | |||
/* | |||
* Theme gradient color | |||
* FIXME: Find a way to make customize it through wikitext | |||
*/ | |||
background: linear-gradient(to right,#101e3c 1%,transparent 33.3%); | |||
} | } | ||
color: | /* Главная */ | ||
.home-header { | |||
position: relative; | |||
padding-block: 3.5rem; | |||
line-height: var( --line-height-xx-small ); | |||
text-align: center; | |||
} | |||
.home-header__pretitle { | |||
margin-bottom: var( --space-xxs ); | |||
color: var( --color-subtle ); | |||
font-size: var( --font-size-small ); | |||
letter-spacing: 0.05em; | |||
} | } | ||
.home-header__title { | |||
--display-font-size: min( calc( 2.5rem + 3.9vw ), 4.5rem ); | |||
margin: 0; | |||
font-size: var( --display-font-size ); | |||
text-transform: uppercase; | |||
line-height: 0.9; | |||
font-weight: var( --font-weight-semi-bold ); | |||
} | } | ||
. | |||
.home-header__subtitle { | |||
margin-top: var( --space-xxs ); | |||
color: var( --color-subtle ); | |||
font-size: var( --font-size-small ); | |||
} | } | ||
. | /* Поиск на главной */ | ||
.home-header__search .keyboard-key { | |||
display: inline; | |||
padding-top: 0.1em; | |||
padding-bottom: 0.1em; | |||
} | } | ||
. | |||
.home-header:before, | |||
.home-header__searchIcon img { | |||
filter: var( --filter-invert ); | |||
} | } | ||
. | |||
@media ( hover: none ) { | |||
.home-header__search .desktoponly { | |||
display: none; | |||
} | |||
} | } | ||
. | .home-header__search { | ||
--gradient: #87bfdb, #77abC8, #6797b5, #577f9d, #476684, #43668a, #3e668f, #304a66, #212e3d, #304a66, #3e668f, #43668a, #476684, #577f9d, #6797b5, #77abC8, #87bfdb; | |||
--gradient-blur: 4px; | |||
padding: var( --space-md ); | |||
margin-top: var( --space-xl ); | |||
margin-left: auto; | |||
margin-right: auto; | |||
max-width: 600px; | |||
border: var( --border-base ); | |||
border-radius: var( --border-radius-pill ); | |||
background-color: var( --color-surface-1 ); | |||
cursor: pointer; | |||
font-size: var( --font-size-small ); | |||
font-weight: var( --font-weight-medium ); | |||
text-align: center; | |||
} | } | ||
.home-header__search .desktoponly { | |||
margin-left: var( --space-xs ); | |||
} | } | ||
. | .home-header__search:hover { | ||
background | --gradient: #120d0e, #321d13, #512d19, #713d1e, #90571d, #b0701b, #cf8a1a, #de9822, #eeA529, #fdb331, #eeA529, #de9822, #cf8a1a, #b0701b, #90571d, #713d1e, #512d19, #321d13, #120d0e; | ||
--gradient-blur: 8px; | |||
background: var( --color-surface-0 ); | |||
} | } | ||
. | |||
.home-header__searchIcon img { | |||
margin-right: var( --space-md ); | |||
opacity: var( --opacity-icon-base ); | |||
} | } | ||
@property --gradient-angle { | |||
syntax: '<angle>'; | |||
initial-value: 0deg; | |||
inherits: false; | |||
} | } | ||
. | |||
.scw-gradient-glow { | |||
position: relative; | |||
--clr-3: var( --color-progressive ); | |||
--clr-4: var( --border-color-base ); | |||
--clr-5: var( --border-color-subtle ); | |||
--gradient: var( --clr-3 ), var( --clr-4 ), var( --clr-5 ), var( --clr-4 ), var( --clr-3 ); | |||
--gradient-blur: 4px; | |||
--gradient-time: 5s; | |||
} | } | ||
. | |||
.scw-gradient-glow::before { | |||
position: absolute; | |||
inset: 0px; | |||
z-index: -1; | |||
content: ''; | |||
background: conic-gradient( from var( --gradient-angle ), var( --gradient ) ); | |||
border-radius: inherit; | |||
animation: scw-gradient-rotate var( --gradient-time ) linear infinite; | |||
filter: blur( var( --gradient-blur ) ); | |||
transition: filter 100ms ease; | |||
} | } | ||
@keyframes scw-gradient-rotate { | |||
0% { | |||
--gradient-angle: 0deg; | |||
} | |||
100% { | |||
--gradient-angle: 360deg; | |||
} | |||
} | } | ||
. | |||
/* Основной цвет фона */ | |||
.crownstore-announ img { | |||
max-width:100%; | |||
height:auto; | |||
} | |||
.citizen-overflow-content > .motif { | |||
height: 600px; | |||
overflow: auto; | |||
} | } | ||
body { | |||
background-color: var(--background-color-base, #fff); | |||
} | } | ||
. | .nav__link.active { | ||
opacity: 0.3; | |||
} | } | ||
. | .textbox { | ||
overflow: auto; | |||
border-radius: var(--border-radius-large); | |||
color: | font-family: var(--font-family-monospace); | ||
font-size: var(--font-size-small); | |||
color: var(--color-emphasized); | |||
background-color: var(--color-surface-2); | |||
border: var(--border-width-base) solid var(--border-color-base); | |||
} | } | ||
. | .admin-only { | ||
display:none; | |||
} | } | ||
. | span.itemmythic { | ||
color: rgb(255, 130, 0) !important; | |||
} | } | ||
. | span.itemlegendary { | ||
color: rgb(228, 193, 41) !important; | |||
} | } | ||
. | span.itemepic { | ||
color: #A02EF7 !important; | |||
} | } | ||
. | span.itemfine { | ||
color: #2DC50E !important; | |||
} | |||
color: | span.itemsuperior { | ||
color: #3A92FF !important; | |||
} | |||
.itemmythic a { | |||
color: rgb(255, 130, 0) !important; | |||
} | |||
.itemlegendary a { | |||
color: rgb(228, 193, 41) !important; | |||
} | } | ||
.itemepic a { | |||
# | color: #A02EF7 !important; | ||
} | } | ||
.itemfine a { | |||
color: #2DC50E !important; | |||
} | } | ||
.itemsuperior a { | |||
color: #3A92FF !important; | |||
} | } | ||
. | table.overview { | ||
background-color:#eaecf0; | |||
border: 1px solid #ddd; | |||
} | } | ||
.client-js .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable), .jquery-tablesorter th.headerSort { | |||
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both.svg?0e440); | |||
cursor: pointer; | |||
background-repeat: no-repeat; | |||
background-position: center right; | |||
padding-right: 21px; | |||
} | } | ||
. | .RadiantApexRewards { | ||
padding: 10px !important; | |||
margin-top: 2rem !important; | |||
color: #FF6F50 !important; | |||
border-bottom: 1px solid #FF6F50 !important; | |||
min-width: 150px; | |||
} | } | ||
.ApexRewards { | |||
. | padding: 10px !important; | ||
margin-top: 2rem !important; | |||
- | color: #E58B27 !important; | ||
border-bottom: 1px solid #E58B27 !important; | |||
- | min-width: 150px; | ||
} | } | ||
.LegendaryRewards { | |||
. | padding: 10px !important; | ||
margin-top: 2rem !important; | |||
color: #CCAA1A !important; | |||
border-bottom: 1px solid #CCAA1A !important; | |||
min-width: 150px; | |||
} | } | ||
.EpicRewards { | |||
. | padding: 10px !important; | ||
margin-top: 2rem !important; | |||
color: #A02EF7 !important; | |||
border-bottom: 1px solid #A02EF7 !important; | |||
min-width: 150px; | |||
} | } | ||
.SuperiorRewards { | |||
. | padding: 10px !important; | ||
margin-top: 2rem !important; | |||
- | color: #3A92FF !important; | ||
border-bottom: 1px solid #3A92FF !important; | |||
- | min-width: 150px; | ||
} | } | ||
.FineRewards { | |||
padding: 10px !important; | |||
margin-top: 2rem !important; | |||
color: #2DC50E !important; | |||
border-bottom: 1px solid #2DC50E !important; | |||
min-width: 150px; | |||
} | } | ||
.CommonRewards { | |||
padding: 10px !important; | |||
margin-top: 2rem !important; | |||
color: #888888 !important; | |||
border-bottom: 1px solid #888888 !important; | |||
min-width: 150px; | |||
} | } | ||
.Drops { | |||
padding: 10px !important; | |||
margin-top: 2rem !important; | |||
color: var(--color-progressive) !important; | |||
border-bottom: 1px solid var(--color-progressive) !important; | |||
min-width: 150px; | |||
} | } | ||
.Datamine { | |||
. | padding: 10px !important; | ||
margin-top: 2rem !important; | |||
border-bottom: 1px | color: var(--background-color-error) !important; | ||
border-bottom: 1px solid var(--background-color-error) !important; | |||
min-width: 150px; | |||
} | } | ||
.PS { | |||
. | padding: 10px !important; | ||
margin-top: 2rem !important; | |||
color: var(--color-progressive) !important; | |||
border-bottom: 1px solid var(--color-progressive) !important; | |||
min-width: 150px; | |||
} | } | ||
.Applied { | |||
. | padding: 10px !important; | ||
margin-top: 2rem !important; | |||
- | color: var(--color-progressive) !important; | ||
- | border-bottom: 1px solid var(--color-progressive) !important; | ||
- | min-width: 150px; | ||
} | } | ||
.Craft { | |||
. | padding: 10px !important; | ||
margin-top: 2rem !important; | |||
- | color: var(--color-progressive) !important; | ||
- | border-bottom: 1px solid var(--color-progressive) !important; | ||
- | min-width: 150px; | ||
} | } | ||
#skin-client-pref-skin-theme-value-os { display:none!important; } | |||
#ca-talk { display:none!important; } | |||
. | .mw-body h1,.mw-body-content h1,.mw-body-content h2 { | ||
font-family: sans-serif | |||
} | } | ||
h1,h2 { | |||
border-bottom: 1px solid rgba(156,191,235,.5) | |||
} | } | ||
. | .color_h3 { | ||
background-color: #b0c4de; | |||
padding: 10px; | |||
box-shadow: 0 0 0 0px rgba(255,255,255,0.6) inset,0 0 7px rgba(0,0,0,0.4),0 0 0 rgba(0,0,0,0.33); | |||
-webkit-transition: box-shadow 0.1s; | |||
transition: box-shadow 0.1s | |||
} | |||
body.page-Заглавная_страница * h1 { | |||
display: none | |||
} | |||
.catlinks { | |||
display: none | |||
} | |||
.smw-datatable-toolbar { | |||
display: none | |||
} | } | ||
. | .creature tr:hover { | ||
background-color: #e0e8ff; | background-color: #e0e8ff; | ||
-webkit-transition: all 0.3s ease; | -webkit-transition: all 0.3s ease; | ||
| Строка 282: | Строка 366: | ||
} | } | ||
. | .only-quest img { | ||
background-color: #ff8e8e | |||
} | } | ||
.tt { | |||
white-space: nowrap | |||
} | } | ||
.tt tr:hover { | |||
background-color: #e0e8ff; | |||
-webkit-transition: all 0.3s ease; | |||
-moz-transition: all 0.3s ease; | |||
-o-transition: all 0.3s ease; | |||
transition: all 0.3s ease | |||
} | } | ||
. | .trade-item { | ||
display: flex; | |||
- | align-items: center | ||
} | } | ||
.trade-item-name { | |||
display: flex; | |||
flex-direction: column; | |||
padding-left: 10px | |||
} | } | ||
.trade-item-icon { | |||
position: relative; | |||
flex-shrink: 0 | |||
} | } | ||
. | .smw-highlighter { | ||
cursor: help; | |||
} | } | ||
. | .swap { | ||
white-space: nowrap | |||
} | } | ||
.swap tr:hover { | |||
background-color: #e0e8ff; | |||
-webkit-transition: all 0.3s ease; | |||
-moz-transition: all 0.3s ease; | |||
background: # | -o-transition: all 0.3s ease; | ||
transition: all 0.3s ease | |||
} | } | ||
.weapons tr:hover { | |||
background-color: #e0e8ff; | |||
-webkit-transition: all 0.3s ease; | |||
-moz-transition: all 0.3s ease; | |||
-o-transition: all 0.3s ease; | |||
transition: all 0.3s ease | |||
} | } | ||
.equip-name { | |||
display: table-cell; | |||
padding-left: 5px; | |||
vertical-align: middle | |||
} | } | ||
.equip-name-icon { | |||
position: relative; | |||
display: table-cell; | |||
width: | width: 64px; | ||
height: | height: 64px | ||
} | } | ||
.equip-name-icon-set { | |||
position: absolute; | |||
position: | top: -2px | ||
top: | |||
} | } | ||
. | .equip tr:hover { | ||
background-color: #e0e8ff; | background-color: #e0e8ff; | ||
-webkit-transition: all 0.3s ease; | -webkit-transition: all 0.3s ease; | ||
| Строка 395: | Строка 448: | ||
} | } | ||
. | .recipe p { | ||
margin: 0 | |||
} | } | ||
. | table.infobox { | ||
width: 450px; | |||
float: right; | |||
margin: 0 0 1em 3em | |||
} | } | ||
. | table.infobox > tr > th,table.infobox > tr > td,table.infobox > * > tr > th,table.infobox > * > tr > td { | ||
border: 1px solid #b0c4de | |||
border | |||
} | } | ||
. | .slight_shadow { | ||
box-shadow: 0 0 0 1px rgba(255,255,255,0.6) inset,0 0 7px rgba(0,0,0,0.4),0 0 0 rgba(0,0,0,0.33); | |||
-webkit-transition: box-shadow 0.1s; | |||
transition: box-shadow 0.1s | |||
} | } | ||
#look3d { | |||
border: 2px solid black; | |||
width: | width: 125px; | ||
height: 25px; | |||
cursor: pointer; | |||
position: absolute | |||
} | } | ||
#look3d:hover { | |||
border: 2px solid gray | |||
} | } | ||
. | .look3d { | ||
position: relative; | |||
float: right; | |||
right: 128px; | |||
top: 32px | |||
} | } | ||
. | .text-look3d { | ||
position: absolute; | |||
top: 4px; | |||
left: 2px; | |||
width: 125px; | |||
height: 25px; | |||
font-weight: bold | |||
} | } | ||
#viewer3d { | |||
width: | width: 650px; | ||
height: 450px; | |||
border: 3px #000 solid; | |||
background: #999999; | |||
position: fixed; | |||
top: 45%; | |||
left: 50%; | |||
margin-top: -225px; | |||
margin-left: -325px; | |||
display: none; | |||
opacity: 0; | |||
z-index: 5; | |||
padding: 0 | |||
} | |||
#viewer3d #viewer3d_close { | |||
width: 21px; | |||
height: 21px; | |||
position: absolute; | |||
top: 5px; | |||
right: 50px; | |||
cursor: pointer; | cursor: pointer; | ||
display: block; | |||
color: red; | |||
font-weight: bold | |||
} | } | ||
#viewer3d #viewer3d_close:hover { | |||
color: white | |||
color: | |||
} | } | ||
#overlay { | |||
z-index: 3; | |||
position: fixed; | |||
width: 100%; | |||
height: 100%; | |||
top: 0; | |||
left: 0; | |||
cursor: pointer; | |||
display: none | |||
} | } | ||
. | table.jquery-tablesorter th.headerSort { | ||
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both.svg?0e440); | |||
position: sticky; | |||
z-index: 1 | |||
} | } | ||
table-wrap { | |||
text-align: center; | |||
display: inline-block; | |||
background-color: #fff; | |||
padding: 2rem 2rem; | |||
color: #000; | |||
} | } | ||
. | .trhover tr:hover { | ||
background-color: #e0e8ff; | |||
-webkit-transition: all 0.3s ease; | |||
-moz-transition: all 0.3s ease; | |||
-o-transition: all 0.3s ease; | |||
transition: all 0.3s ease | |||
} | } | ||
. | .box_frnds { | ||
width: | width: 250px; | ||
height: | height: 335px; | ||
border: 1px solid #e7e8ec; | |||
border-radius: 3px; | |||
text-align: left | |||
} | } | ||
. | .frnd { | ||
display: block; | |||
padding: 10px; | |||
float: left | |||
} | } | ||
. | .thumb_frnd { | ||
position: relative; | position: relative; | ||
float: left; | |||
width: 40px; | |||
height: 40px; | |||
border-radius: 50%; | |||
overflow: hidden | |||
} | } | ||
. | .thumb_frnd img { | ||
position: absolute; | position: absolute; | ||
top: 0; | |||
bottom: 0; | |||
margin: auto; | |||
width: 40px; | |||
max-height: 40px; | |||
border-radius: 50%; | |||
display: block | |||
} | } | ||
. | .desc_info { | ||
float: left; | |||
width: 170px; | |||
overflow: hidden; | |||
- | word-wrap: break-word; | ||
padding: 4px 0 0 12px | |||
} | } | ||
. | .frnd_name { | ||
color: #2a5885; | |||
text-decoration: none; | |||
cursor: pointer | |||
} | } | ||
. | .frnd_name:hover { | ||
text-decoration: underline | |||
} | } | ||
. | .frnd_desc { | ||
font-size: 12px; | |||
overflow: hidden; | |||
color: #656565 | |||
} | } | ||
. | .ore_but { | ||
width: 230px; | |||
color: #ff9501; | |||
cursor: pointer; | |||
border: 1px solid #ff9501; | |||
text-align: center; | |||
padding: 5px; | |||
border-radius: 3px | |||
} | } | ||
. | .ore_but a { | ||
text-decoration: none; | |||
color: #ff9501 | |||
} | } | ||
. | .ore_but a:hover { | ||
color: red | |||
} | } | ||
. | .menu_cont-cards { | ||
display:flex; | |||
flex-wrap: wrap; | |||
justify-content: center; | |||
} | |||
.menu_cont { | |||
display:flex; | |||
flex-wrap: wrap; | |||
justify-content: center; | |||
gap: 10px; | |||
} | } | ||
.menu_caches .menu_button { | |||
max-width: 190px | |||
} | |||
. | .menu_button { | ||
text-align: center; | |||
word-wrap: normal | |||
- | |||
} | } | ||
. | .menu_button_img_events img { | ||
width: 246px; | |||
height: 133px | |||
} | } | ||
. | .menu_button_tile { | ||
position: relative; | |||
margin: 0 20px 0 20px; | |||
-webkit-transition: all 0.6s ease; | |||
-moz-transition: all 0.6s ease; | |||
-o-transition: all 0.6s ease; | |||
transition: all 0.6s ease; | |||
} | } | ||
. | .card_button_tile { | ||
position: relative; | |||
margin: 0 20px 0 20px; | |||
word-break: break-all | |||
} | } | ||
. | .menu_button:hover .menu_button_tile { | ||
-webkit-transform: scale(1.11); | |||
-moz-transform: scale(1.11); | |||
-o-transform: scale(1.11); | |||
transform: scale(1.11) | |||
} | } | ||
. | .menu_buttun_pvp_number { | ||
position: absolute; | position: absolute; | ||
margin-top: -115px; | |||
right: 30px; | |||
z-index: 1; | |||
color: white; | |||
font-weight: 600; | |||
font-size: 1.8em; | |||
user-select: none; | |||
pointer-events: none | |||
} | } | ||
. | .menu_buttun_pvp_number::before { | ||
content: url(/w/images/6/69/Wreath_half.png); | |||
} | -moz-transform: scale(1.5,1.5); | ||
-webkit-transform: scale(1.5,1.5); | |||
-o-transform: scale(1.5,1.5); | |||
transform: scale(1.5,1.5); | |||
margin: 8px 0 0 -12px; | |||
position: absolute | |||
} | |||
. | .menu_buttun_pvp_number::after { | ||
content: url(/w/images/6/69/Wreath_half.png); | |||
-moz-transform: scale(-1.5,1.5); | |||
-webkit-transform: scale(-1.5,1.5); | |||
-o-transform: scale(-1.5,1.5); | |||
transform: scale(-1.5,1.5); | |||
margin: 8px 0 0 -6px; | |||
position: absolute | |||
} | } | ||
. | .note { | ||
position: relative; | |||
margin: 2em 0em; | |||
pointer-events: none | |||
} | } | ||
. | .note_name { | ||
background: | position: absolute; | ||
background-color: #fff; | |||
margin: -14px 0 0 1px; | |||
padding: 0 5px; | |||
font-size: 1.2em; | |||
font-weight: 600 | |||
} | } | ||
. | .note_text { | ||
border: 1px dashed black; | |||
padding: 10px 10px 5px 10px; | |||
box-shadow: 0 0 0 1px rgba(255,255,255,0.6) inset,0 0 7px rgba(0,0,0,0.4),0 0 0 rgba(0,0,0,0.33); | |||
-webkit-transition: box-shadow 0.1s; | |||
transition: box-shadow 0.1s; | |||
overflow-x: auto; | |||
pointer-events: auto | |||
} | } | ||
. | .advice { | ||
position: relative; | |||
margin: 2em 0em; | |||
pointer-events: none | |||
} | } | ||
. | .advice_name { | ||
font-size: | position: absolute; | ||
font-weight: 600 | background-color: #fff; | ||
margin: -14px 0 0 1px; | |||
padding: 0 5px; | |||
font-size: 1.2em; | |||
font-weight: 600 | |||
} | } | ||
. | .advice_text { | ||
border: 1px dashed black; | |||
padding: 10px 10px 5px 10px; | |||
box-shadow: 0 0 0 1px rgba(255,255,255,0.6) inset,0 0 7px rgba(0,0,0,0.4),0 0 0 rgba(0,0,0,0.33); | |||
-webkit-transition: box-shadow 0.1s; | |||
transition: box-shadow 0.1s; | |||
overflow-x: auto; | |||
pointer-events: auto | |||
} | } | ||
.tippy- | .tippy-tooltip { | ||
width: | max-width: 330px; | ||
border-radius: inherit; | |||
-webkit-border-radius: inherit; | |||
-moz-border-radius: inherit | |||
} | } | ||
.tippy- | .tippy-header { | ||
display: none | |||
} | } | ||
.plate { | |||
width: 70px; | |||
float: left; | |||
border-radius: 3px; | |||
} | padding: 2px; | ||
margin: 5px | |||
} | |||
.plate:hover { | |||
box-shadow: 0 0 0 1px rgba(0,0,0,0.6) inset,0 0 7px rgba(0,0,0,0.4),0 0 0 rgba(0,0,0,0.33); | |||
-webkit-transition: box-shadow 0.1s; | |||
transition: box-shadow 0.2s | |||
} | } | ||
.plate:hover .marquee { | |||
display: inline-block; | |||
white-space: pre-wrap; | |||
margin-left: -2px | |||
} | } | ||
.plate:hover .marquee span { | |||
0 | display: inline-block; | ||
position: absolute; | |||
animation: none; | |||
padding: 0 5px 0 5px; | |||
border: 1px solid; | |||
background: rgb(255,255,255); | |||
margin-top: -1.2em; | |||
min-width: 100px; | |||
max-width: 150px; | |||
z-index: 1 | |||
} | } | ||
. | .usually { | ||
background-color: rgba(41,41,41,0.2) | |||
} | } | ||
. | .rare { | ||
background: linear-gradient(to top left,#b4c3c8,#5f7476) | |||
} | } | ||
.very_rare { | |||
background: linear-gradient(to top left,#f2b73b,#bc5101) | |||
} | } | ||
. | .guarantee { | ||
background: linear-gradient(to top left,#1b5825,#40d744) | |||
} | } | ||
. | .arrow { | ||
background-image: url(/w/images/7/7b/Arrow_down.png); | |||
background-repeat: no-repeat; | |||
background-position: center; | |||
height: 11px | |||
} | } | ||
. | .arrow:hover { | ||
background- | background-image: url(/w/images/4/46/Arrow_up.png); | ||
-webkit-transition: box-shadow 0.3s; | |||
transition: box-shadow 0.3s | |||
} | } | ||
. | .drop_rate { | ||
font-size: 90%; | |||
font-weight: 600; | |||
cursor: default | |||
} | } | ||
. | .tippy-content-container { | ||
max-height: 500px | |||
} | } | ||
. | .tippy-content-container .plate { | ||
width: 40px; | |||
float: none; | |||
display: inline-block | |||
} | } | ||
. | .tippy-content-container .plate img { | ||
width: 36px; | |||
height: 36px | |||
} | } | ||
. | .tippy-content-container .drop_rate { | ||
font-size: 75%; | |||
font-weight: 600; | |||
cursor: default | |||
} | } | ||
@-webkit-keyframes scroll { | |||
0% { | |||
-webkit-transform: translate(0,0); | |||
transform: translate(0,0) | |||
} | |||
100% { | |||
-webkit-transform: translate(-100%,0); | |||
transform: translate(-100%,0) | |||
} | |||
} | } | ||
@-moz-keyframes scroll { | |||
0% { | |||
-moz-transform: translate(0,0); | |||
transform: translate(0,0) | |||
} | |||
100% { | |||
-moz-transform: translate(-100%,0); | |||
transform: translate(-100%,0) | |||
} | |||
} | } | ||
@keyframes scroll { | |||
0% { | |||
transform: translate(0,0) | |||
} | |||
} | |||
100% { | |||
transform: translate(-100%,0) | |||
} | |||
} | } | ||
. | .marquee { | ||
display: | display: block; | ||
width: 100%; | |||
white-space: nowrap; | |||
overflow: hidden | |||
} | } | ||
. | .marquee span { | ||
display: inline-block; | display: inline-block; | ||
padding-left: 100%; | |||
-webkit-animation: scroll 10s infinite linear; | |||
-moz-animation: scroll 10s infinite linear; | |||
animation: scroll 10s infinite linear | |||
} | } | ||
#google_translate_element { | |||
overflow-x: hidden; | |||
width: 145px | |||
} | } | ||
. | .tabber { | ||
clear: both | |||
} | } | ||
. | .last-update { | ||
width: 300px; | |||
background: rgba(var(--color-base-rgb),0.02); | |||
border: 1px solid rgba(var(--color-base-rgb),0.1); | |||
margin-bottom: 2rem | |||
} | } | ||
. | .last-update-header { | ||
background-color: var(--color-surface-2); | |||
border: 1px solid var(--border-color-base); | |||
border-radius: 10px 10px 0px 0px; | |||
padding: 1rem; | |||
font-weight: 600; | |||
overflow: hidden; | |||
white-space: nowrap; | |||
text-overflow: ellipsis | |||
} | } | ||
. | .last-update-body { | ||
color: | border: 1px solid var(--border-color-base); | ||
border-radius: 0px 0px 10px 10px; | |||
padding- | border-top: 0px; | ||
height: 220px; | |||
padding: 0 1rem 1rem 1rem; | |||
box-sizing: border-box; | |||
overflow: hidden | |||
} | } | ||
. | .reward { | ||
margin-bottom: 20px | |||
} | } | ||
. | .rep-rew-table { | ||
border-collapse: collapse; | |||
cursor: default | |||
} | } | ||
. | .rep-rew-table tr:hover { | ||
background-color: #e0e8ff; | |||
-webkit-transition: all 0.3s ease; | |||
-moz-transition: all 0.3s ease; | |||
-o-transition: all 0.3s ease; | |||
transition: all 0.3s ease | |||
} | } | ||
. | .rep-rew-table td { | ||
padding: 0 6px 0 6px | |||
} | } | ||
. | .community_button { | ||
display: | width: 220px; | ||
display: inline-block; | |||
font-weight: 700; | |||
color: white; | |||
text-decoration: none; | |||
text-transform: uppercase; | |||
padding: .8em 1em calc(.8em + 3px); | |||
border-radius: 3px; | |||
background: rgb(64,199,129); | |||
box-shadow: 0 -3px rgb(53,167,110) inset; | |||
transition: 0.2s | |||
} | } | ||
. | .community_button:hover { | ||
background: rgb(53,167,110) | |||
background | |||
} | } | ||
. | .donate_button { | ||
display: | width: 220px; | ||
display: inline-block; | |||
font-weight: 700; | |||
color: white; | |||
text-decoration: none; | |||
text-transform: uppercase; | |||
padding: .8em 1em calc(.8em + 3px); | |||
border-radius: 3px; | |||
background: rgb(255,140,0); | |||
box-shadow: 0 -3px rgb(225,120,10) inset; | |||
transition: 0.2s | |||
} | } | ||
. | .donate_button:hover { | ||
background: rgb(225,120,10) | |||
} | } | ||
. | .inventory { | ||
display: inline-block; | |||
width: | position: relative; | ||
background-image: url(/w/images/e/e7/Inventory_slots.jpg); | |||
background-repeat: no-repeat; | |||
width: 554px; | |||
height: 531px | |||
} | } | ||
. | .inventory_slot { | ||
display: inline-block; | |||
height: 58px; | |||
width: 58px; | |||
background-image: url(/w/images/0/0f/Inventory_slots_back.jpg); | |||
background-repeat: no-repeat | |||
} | } | ||
. | .modification-equip { | ||
display: flex; | |||
flex-wrap: wrap | |||
} | } | ||
. | .coloration { | ||
width: 260px; | |||
margin: 10px 25px 15px 0px; | |||
border: 1px solid black; | |||
display: inline-block | |||
} | } | ||
.coloration-name { | |||
background-color: black; | |||
width: 260px; | |||
position: absolute; | |||
} | display: none | ||
} | |||
.coloration:hover .coloration-name { | |||
display: block | |||
} | |||
.coloration-name-text { | |||
color: white; | |||
font-size: 1.3em; | |||
padding-left: 5px | |||
} | } | ||
.coloration-cost { | |||
text-align: center; | |||
padding-top: 2px | |||
} | |||
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button { | |||
display: none | |||
} | } | ||
. | .img-border { | ||
border: 1px solid black | |||
} | } | ||
. | .npc_box { | ||
display: grid; | |||
justify-content: space-between; | |||
gap: 10px 20px; | |||
align-items: start | |||
} | } | ||
. | .npc_block { | ||
display: grid; | |||
grid-template-columns: 96px auto; | |||
grid-template-rows: auto auto; | |||
align-content: start; | |||
grid-column: 1 / 2; | |||
grid-row: auto | |||
} | } | ||
. | .npc_portrait { | ||
flex: 0 0 96px; | |||
height: 96px; | |||
background-color: black | |||
} | } | ||
. | .npc_info { | ||
display: grid; | |||
grid-template-columns: min-content auto; | |||
height: min-content; | |||
flex: 1 1 auto; | |||
margin: 0 25px | |||
} | } | ||
. | .npc_prof_val,.npc_group_val,.npc_location_val,.npc_coord_val { | ||
margin-left: 10px; | |||
min-width: 200px | |||
} | } | ||
. | .npc_descrption { | ||
margin- | margin-top: 15px; | ||
width: 100%; | |||
grid-column: 1 / 3 | |||
} | } | ||
. | .npc_map_block { | ||
max-width: 300px; | |||
background-color: black; | |||
border: 2px solid black; | |||
grid-column: 2 / 3; | |||
grid-row: 1 / 3 | |||
} | } | ||
. | .npc_map_block_name { | ||
height: 35px; | |||
background-color: black; | |||
color: white; | |||
font-size: 1.5em; | |||
padding-left: 5px | |||
} | } | ||
. | .npc_issue_quest { | ||
grid-column: auto; | |||
grid-row: auto | |||
} | } | ||
. | @media screen and (max-width: 860px) { | ||
.npc_block { | |||
} | grid-column:1 / 2; | ||
grid-row: 1 / 2 | |||
} | |||
. | .npc_map_block { | ||
grid-column: 1 / 2; | |||
} | grid-row: 2 / 3 | ||
} | |||
. | .npc_issue_quest { | ||
grid-column: 1 / 2; | |||
grid-row: 3 / 4 | |||
} | |||
} | } | ||
. | @media screen and (max-width: 470px) { | ||
.npc_block { | |||
} | display:flex !important; | ||
flex-wrap: wrap; | |||
justify-content: center | |||
} | |||
. | .npc_info { | ||
display: grid; | |||
grid-template-columns: min-content auto; | |||
flex: 1 1 auto | |||
} | |||
} | } | ||
. | .rep_line { | ||
max-width: 1024px; | |||
min-width: 500px; | |||
height: 100px | |||
} | } | ||
. | .back_gradient { | ||
margin- | position: relative; | ||
width: 95%; | |||
height: 15px; | |||
margin: auto 25px auto 25px; | |||
border: 2px solid black; | |||
background: rgb(170,11,16); | |||
background: linear-gradient(90deg,rgba(170,11,16,1) 0%,rgba(190,88,13,1) 25%,rgba(200,161,8,1) 50%,rgba(130,163,14,1) 75%,rgba(52,161,18,1) 100%) | |||
} | } | ||
. | .v_stripe { | ||
position: absolute; | |||
width: 0px; | |||
height: 10px; | |||
border-left: 2px solid black; | |||
margin: 17px 0 0 -2px; | |||
padding: 0 | |||
} | } | ||
. | .v_stripe::after { | ||
position: absolute; | |||
width: 50px; | |||
left: -25px; | |||
top: 12px; | |||
text-align: center | |||
} | } | ||
. | .minus30000 { | ||
} | } | ||
. | .minus30000::after { | ||
content: "-30000" | |||
} | } | ||
. | .minus15000 { | ||
margin-left: 10% | |||
} | } | ||
. | .minus15000::after { | ||
content: "-15000" | |||
} | } | ||
. | .minus7500 { | ||
margin-left: 20% | |||
} | } | ||
. | .minus7500::after { | ||
content: "-7500" | |||
} | } | ||
. | .minus3000 { | ||
margin-left: 30% | |||
} | } | ||
. | .minus3000::after { | ||
content: "-3000" | |||
} | } | ||
. | .minus1000 { | ||
margin-left: 40% | |||
} | } | ||
. | .minus1000::after { | ||
content: "-1000" | |||
} | } | ||
. | .zero { | ||
margin-left: 50% | |||
} | } | ||
. | .zero::after { | ||
content: "0" | |||
} | } | ||
. | .plus1000 { | ||
margin-left: 60% | |||
} | } | ||
. | .plus1000::after { | ||
content: "1000" | |||
} | |||
.plus3000 { | |||
margin-left: 70% | |||
} | } | ||
. | .plus3000::after { | ||
content: "3000" | |||
} | } | ||
. | .plus7500 { | ||
margin-left: 80% | |||
} | } | ||
. | |||
.plus7500::after { | |||
content: "7500" | |||
} | } | ||
. | |||
.plus15000 { | |||
margin-left: 90% | |||
} | } | ||
. | |||
.plus15000::after { | |||
content: "15000" | |||
} | } | ||
. | |||
.plus30000 { | |||
margin-left: 100% | |||
} | } | ||
.plus30000::after { | |||
content: "30000" | |||
} | } | ||
. | .line_bonus { | ||
position: relative; | |||
width: 95%; | |||
margin: auto 30px auto 30px; | |||
top: 35px | |||
} | } | ||
. | .rep_bonus { | ||
position: absolute; | position: absolute; | ||
width: 26px; | |||
left: -13px; | |||
filter: brightness(0.3); | |||
border-bottom: none | |||
} | } | ||
. | |||
.container_DamageTaken { | |||
overflow-x: auto | |||
} | } | ||
. | |||
.table-item-cell { | |||
display: flex; | |||
align-items: center; | |||
min-width: 200px | |||
} | } | ||
. | .table-item-name { | ||
display: inline-block; | |||
padding-left: 5px; | |||
vertical-align: middle | |||
} | } | ||
. | .table-item-name-icon { | ||
position: relative; | |||
display: inline-block; | |||
flex-shrink: 0 | |||
} | } | ||
. | .caches-img { | ||
filter: drop-shadow(5px 5px 10px #000000) | |||
} | } | ||
.refferal_article { | |||
position: relative; | |||
width: 100%; | |||
height: 400px; | |||
background-image: url(/w/images/d/d1/%D0%A3%D0%B1%D0%B5%D0%B6%D0%B8%D1%89%D0%B5_%D1%81%D1%82%D0%B0%D0%BB%D0%BA%D0%B5%D1%80%D0%B0.jpg); | |||
background-size: cover; | |||
background-position: center | |||
} | } | ||
. | .mw-parser-output .note-info { | ||
background-color: #eaf3ff; | |||
color: #333; | |||
background-image: url("https://upload.wikimedia.org/wikipedia/commons/e/ec/OOjs_UI_icon_information-progressive.svg"); | |||
background-size: 35px; | |||
border-color: #a3caff; | |||
padding-left: 40px; | |||
min-height: 25px; | |||
} | } | ||
.mw-parser-output .note-Storm-Atronach-Crate { | |||
background-color: #eaf3ff; | |||
color: #333; | |||
. | background-image: url("/images/7/74/ON-icon-store-Storm_Atronach_Crown_Crate.png"); | ||
background-size: 40px; | |||
. | font-size: 15px; | ||
border-color: #a3caff; | |||
padding-left: 55px; | |||
min-height: 40px; | |||
. | |||
} | } | ||
.mw-parser-output .note-RageboundCrate { | |||
background-color: #eaf3ff; | |||
color: #333; | |||
background-image: url("/images/9/9f/ON-icon-store-Ragebound_Crate.png"); | |||
/ | background-size: 40px; | ||
font-size: 15px; | |||
border-color: #a3caff; | |||
padding-left: 55px; | |||
min-height: 40px; | |||
} | |||
.mw-parser-output .note-CarnavalCrate { | |||
background-color: #eaf3ff; | |||
color: #333; | |||
background-image: url("/images/f/fd/ON-icon-store-Carnaval_Crate.png"); | |||
background-size: 40px; | |||
font-size: 15px; | |||
border-color: #a3caff; | |||
padding-left: 55px; | |||
min-height: 40px; | |||
} | } | ||
.mw-parser-output .note-WildHuntCrate { | |||
. | background-color: #eaf3ff; | ||
color: #333; | |||
background-image: url("/images/6/6a/ON-icon-store-Wild_Hunt_Crown_Crate.png"); | |||
background-size: 40px; | |||
font-size: 15px; | |||
border-color: #a3caff; | |||
padding-left: 55px; | |||
min-height: 40px; | |||
} | } | ||
. | .mw-parser-output .note { | ||
background-position: left 7px top 50%; | |||
padding: 0.5em 0.5em 0.5em 55px; | |||
margin: 0.5em 0; | |||
overflow: hidden; | |||
background-color: #f8f9fa; | |||
color: #333; | |||
background-repeat: no-repeat; | |||
border: 1px solid #ddd; | |||
} | } | ||
. | /* Cached 20250402115902 */ | ||
.ivent { | |||
position: relative; | |||
top: 0; | |||
left: 0; | |||
} | |||
.ivent-notactive { | |||
position: absolute; | |||
top: 120px; | |||
color: red; | |||
left: 0px; | |||
background-color: rgb(16 18 19 / 80%); | |||
} | |||
.ivent-active { | |||
position: absolute; | |||
top: 120px; | |||
color: #00fc5c; | |||
left: 0px; | |||
background-color: rgb(16 18 19 / 80%); | |||
} | |||
.showcase1 { | |||
position: relative; | |||
top: 0; | |||
left: 0; | |||
} | } | ||
. | .showcase2 { | ||
position: absolute; | |||
top: 110px; | |||
color: gold; | |||
font-family: var(--font-family-monospace); | |||
font-size: var(--font-size-small); | |||
border-radius: 0px 20px 20px 0px; | |||
padding: 0.2em; | |||
left: 0px; | |||
background-color: rgb(16 18 19 / 80%); | |||
} | |||
.showcase3 { | |||
position: absolute; | |||
top: 110px; | |||
color: red; | |||
padding: 0.2em; | |||
border-radius: 0px 20px 20px 0px; | |||
font-family: var(--font-family-monospace); | |||
font-size: var(--font-size-small); | |||
left: 0px; | |||
background-color: rgb(16 18 19 / 80%); | |||
} | |||
.showcase4 { | |||
position: absolute; | |||
top: 100px; | |||
padding: 0.2em; | |||
border-radius: 0px 20px 20px 0px; | |||
font-family: var(--font-family-monospace); | |||
font-size: var(--font-size-small); | |||
left: 0px; | |||
background-color: rgb(16 18 19 / 80%); | |||
} | |||
. | .card1 { | ||
position: relative; | |||
top: 0; | |||
left: 0; | |||
z-index: 1; | |||
} | |||
. | .card2 { | ||
. | position: absolute; | ||
top: 0; | |||
left: 0; | |||
z-index: 2; | |||
} | |||
.card3 { | |||
position: absolute; | |||
top: 165px; | |||
left: 0px; | |||
right:0px; | |||
color: #ffffff; | |||
text-align:center; | |||
z-index: 3; | |||
text-shadow: 2px 2px 1px #000; | |||
} | |||
.card4 { | |||
position: absolute; | |||
top: 185px; | |||
left: 0px; | |||
right:0px; | |||
color: #ffffff; | |||
text-align:center; | |||
z-index: 4; | |||
text-shadow: 2px 2px 1px #000; | |||
} | |||
crateico { | |||
position: absolute; | |||
left: 0; | |||
top: 0; | |||
width: 20%; | |||
height: auto; | |||
} | |||
.imgthumb { | |||
background: #F9F9F9; | |||
border: #CCCCCC; | |||
float: right; | |||
padding: 5px; | |||
} | |||
/* Стиль карт Leaflet */ | |||
.leaflet-pane, | |||
.leaflet-tile, | |||
.leaflet- | .leaflet-marker-icon, | ||
.leaflet-marker-shadow, | |||
.leaflet-tile-container, | |||
.leaflet-pane > svg, | |||
.leaflet-pane > canvas, | |||
.leaflet-zoom-box, | |||
.leaflet- | .leaflet-image-layer, | ||
.leaflet- | .leaflet-layer { | ||
position: absolute; | position: absolute; | ||
left: 0; | |||
top: 0; | top: 0; | ||
} | } | ||
.leaflet- | .leaflet-container { | ||
overflow: hidden; | |||
} | } | ||
.leaflet- | .leaflet-tile, | ||
.leaflet-marker-icon, | |||
.leaflet-marker-shadow { | |||
-webkit-user-select: none; | |||
-moz-user-select: none; | |||
user-select: none; | |||
-webkit-user-drag: none; | |||
} | } | ||
.leaflet- | /* Prevents IE11 from highlighting tiles in blue */ | ||
.leaflet-tile::selection { | |||
background: transparent; | |||
} | |||
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */ | |||
.leaflet-safari .leaflet-tile { | |||
image-rendering: -webkit-optimize-contrast; | |||
} | } | ||
.leaflet- | /* hack that prevents hw layers "stretching" when loading new tiles */ | ||
.leaflet-safari .leaflet-tile-container { | |||
width: 1600px; | |||
height: 1600px; | |||
-webkit-transform-origin: 0 0; | |||
} | } | ||
.leaflet- | .leaflet-marker-icon, | ||
.leaflet-marker-shadow { | |||
display: block; | |||
} | } | ||
.leaflet- | /* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */ | ||
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */ | |||
.leaflet-container .leaflet-overlay-pane svg { | |||
max-width: none !important; | |||
max-height: none !important; | |||
} | } | ||
.leaflet- | .leaflet-container .leaflet-marker-pane img, | ||
.leaflet-container .leaflet-shadow-pane img, | |||
.leaflet-container .leaflet-tile-pane img, | |||
.leaflet- | .leaflet-container img.leaflet-image-layer, | ||
.leaflet-container .leaflet-tile { | |||
max-width: none !important; | |||
.leaflet- | max-height: none !important; | ||
width: auto; | |||
padding: 0; | |||
} | } | ||
.leaflet-container img.leaflet-tile { | |||
/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */ | |||
mix-blend-mode: plus-lighter; | |||
} | |||
.leaflet-container.leaflet-touch-zoom { | |||
-ms-touch-action: pan-x pan-y; | |||
.leaflet- | touch-action: pan-x pan-y; | ||
- | |||
} | } | ||
.leaflet- | .leaflet-container.leaflet-touch-drag { | ||
-ms-touch-action: pinch-zoom; | |||
} | /* Fallback for FF which doesn't support pinch-zoom */ | ||
.leaflet- | touch-action: none; | ||
touch-action: pinch-zoom; | |||
} | |||
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom { | |||
-ms-touch-action: none; | |||
touch-action: none; | |||
} | |||
.leaflet-container { | |||
-webkit-tap-highlight-color: transparent; | |||
} | } | ||
.leaflet-container a { | |||
-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4); | |||
-webkit- | } | ||
.leaflet-tile { | |||
filter: inherit; | |||
visibility: hidden; | |||
} | |||
.leaflet-tile-loaded { | |||
visibility: inherit; | |||
} | } | ||
.leaflet-zoom- | .leaflet-zoom-box { | ||
width: 0; | |||
- | height: 0; | ||
-moz-box-sizing: border-box; | |||
box-sizing: border-box; | |||
z-index: 800; | |||
} | } | ||
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */ | |||
.leaflet- | .leaflet-overlay-pane svg { | ||
-moz-user-select: none; | |||
} | } | ||
.leaflet-pane { z-index: 400; } | |||
.leaflet-tile-pane { z-index: 200; } | |||
.leaflet-overlay-pane { z-index: 400; } | |||
.leaflet- | .leaflet-shadow-pane { z-index: 500; } | ||
.leaflet-marker-pane { z-index: 600; } | |||
.leaflet-tooltip-pane { z-index: 650; } | |||
.leaflet-popup-pane { z-index: 700; } | |||
.leaflet-map-pane canvas { z-index: 100; } | |||
.leaflet-map-pane svg { z-index: 200; } | |||
.leaflet-vml-shape { | |||
width: 1px; | |||
height: 1px; | |||
} | } | ||
. | .lvml { | ||
behavior: url(#default#VML); | |||
display: inline-block; | |||
position: absolute; | |||
} | } | ||
/* control positioning */ | |||
.leaflet-control { | .leaflet-control { | ||
position: relative; | |||
z-index: 800; | |||
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */ | |||
pointer-events: auto; | |||
} | } | ||
.leaflet- | .leaflet-top, | ||
.leaflet-bottom { | |||
.leaflet- | position: absolute; | ||
z-index: 1000; | |||
pointer-events: none; | pointer-events: none; | ||
} | } | ||
.leaflet-top { | |||
top: 0; | |||
.leaflet- | |||
} | } | ||
.leaflet-right { | |||
right: 0; | |||
} | |||
.leaflet- | .leaflet-bottom { | ||
bottom: 0; | |||
} | } | ||
.leaflet- | .leaflet-left { | ||
left: 0; | |||
} | } | ||
.leaflet- | .leaflet-control { | ||
float: left; | |||
clear: both; | |||
} | } | ||
.leaflet-right .leaflet-control { | |||
float: right; | |||
.leaflet- | |||
} | } | ||
.leaflet-top .leaflet-control { | |||
margin-top: 10px; | |||
.leaflet- | |||
} | } | ||
.leaflet- | .leaflet-bottom .leaflet-control { | ||
margin-bottom: 10px; | |||
} | } | ||
.leaflet- | .leaflet-left .leaflet-control { | ||
.leaflet-control | margin-left: 10px; | ||
} | } | ||
.leaflet- | .leaflet-right .leaflet-control { | ||
.leaflet- | margin-right: 10px; | ||
} | } | ||
.leaflet- | |||
/* zoom and fade animations */ | |||
.leaflet-fade-anim .leaflet-popup { | |||
opacity: 0; | |||
-webkit-transition: opacity 0.2s linear; | |||
-moz-transition: opacity 0.2s linear; | |||
transition: opacity 0.2s linear; | |||
} | } | ||
.leaflet- | .leaflet-fade-anim .leaflet-map-pane .leaflet-popup { | ||
opacity: 1; | |||
} | } | ||
.leaflet- | .leaflet-zoom-animated { | ||
-webkit-transform-origin: 0 0; | |||
-ms-transform-origin: 0 0; | |||
transform-origin: 0 0; | |||
} | } | ||
svg.leaflet-zoom-animated { | |||
will-change: transform; | |||
} | |||
.leaflet- | .leaflet-zoom-anim .leaflet-zoom-animated { | ||
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1); | |||
-moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1); | |||
transition: transform 0.25s cubic-bezier(0,0,0.25,1); | |||
} | } | ||
.leaflet- | .leaflet-zoom-anim .leaflet-tile, | ||
.leaflet-pan-anim .leaflet-tile { | |||
-webkit-transition: none; | |||
-moz-transition: none; | |||
transition: none; | |||
} | } | ||
.leaflet- | |||
.leaflet-zoom-anim .leaflet-zoom-hide { | |||
visibility: hidden; | |||
} | } | ||
/* cursors */ | |||
.leaflet- | .leaflet-interactive { | ||
cursor: pointer; | |||
} | } | ||
.leaflet-grab { | |||
cursor: -webkit-grab; | |||
cursor: -moz-grab; | |||
cursor: grab; | |||
.leaflet- | |||
} | } | ||
.leaflet- | .leaflet-crosshair, | ||
.leaflet-crosshair .leaflet-interactive { | |||
cursor: crosshair; | |||
} | } | ||
.leaflet- | .leaflet-popup-pane, | ||
.leaflet-control { | |||
cursor: auto; | |||
} | } | ||
.leaflet- | .leaflet-dragging .leaflet-grab, | ||
.leaflet-dragging .leaflet-grab .leaflet-interactive, | |||
.leaflet-dragging .leaflet-marker-draggable { | |||
cursor: move; | |||
cursor: -webkit-grabbing; | |||
cursor: -moz-grabbing; | |||
cursor: grabbing; | |||
} | } | ||
.leaflet- | |||
.leaflet- | /* marker & overlays interactivity */ | ||
.leaflet-marker-icon, | |||
.leaflet-marker-shadow, | |||
.leaflet-image-layer, | |||
.leaflet-pane > svg path, | |||
.leaflet-tile-container { | |||
pointer-events: none; | |||
} | } | ||
.leaflet- | |||
.leaflet-marker-icon.leaflet-interactive, | |||
.leaflet-image-layer.leaflet-interactive, | |||
.leaflet-pane > svg path.leaflet-interactive, | |||
svg.leaflet-image-layer.leaflet-interactive path { | |||
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */ | |||
pointer-events: auto; | |||
} | } | ||
.leaflet- | |||
/* visual tweaks */ | |||
.leaflet-container { | |||
background: #ddd; | |||
outline-offset: 1px; | |||
} | } | ||
.leaflet- | .leaflet-container a { | ||
color: #0078A8; | |||
} | } | ||
.leaflet- | .leaflet-zoom-box { | ||
border: 2px dotted #38f; | |||
background: rgba(255,255,255,0.5); | |||
. | |||
} | } | ||
/* | |||
.leaflet- | /* general typography */ | ||
.leaflet-container { | |||
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; | |||
font-size: 12px; | |||
font-size: 0.75rem; | |||
line-height: 1.5; | |||
} | } | ||
/* | /* general toolbar styles */ | ||
.leaflet- | .leaflet-bar { | ||
box-shadow: 0 1px 5px rgba(0,0,0,0.65); | |||
border-radius: 4px; | |||
} | } | ||
.leaflet- | .leaflet-bar a { | ||
background-color: #fff; | |||
border-bottom: 1px solid #ccc; | |||
width: 26px; | |||
line-height: | height: 26px; | ||
line-height: 26px; | |||
display: block; | |||
text-align: center; | |||
text-decoration: none; | text-decoration: none; | ||
color: black; | |||
} | } | ||
.leaflet-control- | .leaflet-bar a, | ||
.leaflet- | .leaflet-control-layers-toggle { | ||
background-position: 50% 50%; | |||
background-repeat: no-repeat; | |||
display: block; | |||
} | |||
.leaflet-bar a:hover, | |||
.leaflet-bar a:focus { | |||
background-color: #f4f4f4; | |||
} | } | ||
.leaflet- | .leaflet-bar a:first-child { | ||
border-top-left-radius: 4px; | |||
border-top-right-radius: 4px; | |||
} | } | ||
.leaflet-left | .leaflet-bar a:last-child { | ||
border-bottom-left-radius: 4px; | |||
border-bottom-right-radius: 4px; | |||
border-bottom: none; | |||
} | } | ||
.leaflet- | .leaflet-bar a.leaflet-disabled { | ||
cursor: default; | |||
background-color: #f4f4f4; | |||
color: #bbb; | |||
} | } | ||
.leaflet- | |||
.leaflet-touch .leaflet-bar a { | |||
width: 30px; | |||
line-height: | height: 30px; | ||
line-height: 30px; | |||
} | } | ||
.leaflet- | .leaflet-touch .leaflet-bar a:first-child { | ||
border-top: 2px | border-top-left-radius: 2px; | ||
border- | border-top-right-radius: 2px; | ||
} | } | ||
.leaflet- | .leaflet-touch .leaflet-bar a:last-child { | ||
border-bottom: 2px | border-bottom-left-radius: 2px; | ||
border-bottom-right-radius: 2px; | |||
} | } | ||
.leaflet- | /* zoom control */ | ||
.leaflet-control-zoom-in, | |||
.leaflet-control-zoom-out { | |||
font: bold 18px 'Lucida Console', Monaco, monospace; | |||
text-indent: 1px; | |||
} | } | ||
.leaflet-touch .leaflet-control- | |||
.leaflet-touch .leaflet- | .leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out { | ||
font-size: 22px; | |||
} | } | ||
/* | /* layers control */ | ||
.leaflet- | .leaflet-control-layers { | ||
box-shadow: 0 1px 5px rgba(0,0,0,0.4); | |||
background: #fff; | |||
border-radius: 5px; | |||
} | } | ||
.leaflet- | .leaflet-control-layers-toggle { | ||
background-image: url(https://unpkg.com/leaflet@1.9.4/dist/images/layers.png); | |||
width: 36px; | |||
height: 36px; | |||
} | } | ||
.leaflet- | .leaflet-retina .leaflet-control-layers-toggle { | ||
background-image: url(https://unpkg.com/leaflet@1.9.4/dist/images/layers-2x.png); | |||
background-size: 26px 26px; | |||
} | } | ||
.leaflet- | .leaflet-touch .leaflet-control-layers-toggle { | ||
width: 44px; | |||
height: 44px; | |||
} | |||
.leaflet-control-layers .leaflet-control-layers-list, | |||
.leaflet-control-layers-expanded .leaflet-control-layers-toggle { | |||
display: none; | |||
} | } | ||
.leaflet- | .leaflet-control-layers-expanded .leaflet-control-layers-list { | ||
display: block; | |||
position: relative; | |||
} | } | ||
.leaflet- | .leaflet-control-layers-expanded { | ||
padding: 6px 10px 6px 6px; | |||
color: #333; | |||
padding: | background: #fff; | ||
} | } | ||
.leaflet- | .leaflet-control-layers-scrollbar { | ||
overflow-y: scroll; | |||
overflow-x: hidden; | |||
padding-right: 5px; | |||
} | } | ||
.leaflet- | .leaflet-control-layers-selector { | ||
margin-top: 2px; | |||
position: relative; | |||
top: 1px; | |||
} | } | ||
.leaflet- | .leaflet-control-layers label { | ||
display: block; | |||
font-size: 13px; | |||
font-size: 1.08333em; | |||
} | } | ||
.leaflet- | .leaflet-control-layers-separator { | ||
height: 0; | |||
border-top: 1px solid #ddd; | |||
margin: 5px -10px 5px -6px; | |||
} | } | ||
.leaflet- | /* Default icon URLs */ | ||
- | .leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */ | ||
background-image: url(https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png); | |||
} | } | ||
/* attribution and scale controls */ | |||
.leaflet-container .leaflet-control-attribution { | |||
.leaflet- | |||
background: #fff; | background: #fff; | ||
background: rgba(255, 255, 255, 0.8); | |||
margin: 0; | |||
} | } | ||
.leaflet-control-attribution, | |||
.leaflet-control-scale-line { | |||
padding: 0 5px; | |||
color: #333; | |||
.leaflet- | line-height: 1.4; | ||
padding: | |||
color: # | |||
} | } | ||
.leaflet- | .leaflet-control-attribution a { | ||
text-decoration: none; | |||
} | } | ||
.leaflet- | .leaflet-control-attribution a:hover, | ||
.leaflet- | .leaflet-control-attribution a:focus { | ||
text-decoration: underline; | |||
} | } | ||
.leaflet-attribution-flag { | |||
display: inline !important; | |||
vertical-align: baseline !important; | |||
.leaflet- | width: 1em; | ||
height: 0.6669em; | |||
} | } | ||
.leaflet- | .leaflet-left .leaflet-control-scale { | ||
margin-left: 5px; | |||
margin- | |||
} | } | ||
.leaflet | .leaflet-bottom .leaflet-control-scale { | ||
margin-bottom: 5px; | |||
margin | |||
} | } | ||
.leaflet- | .leaflet-control-scale-line { | ||
border: 2px solid #777; | |||
border-top: none; | |||
line-height: 1.1; | |||
padding: 2px 5px 1px; | |||
white-space: nowrap; | |||
-moz-box-sizing: border-box; | |||
box-sizing: border-box; | |||
background: rgba(255, 255, 255, 0.8); | |||
text-shadow: 1px 1px #fff; | |||
} | } | ||
.leaflet- | .leaflet-control-scale-line:not(:first-child) { | ||
border-top: 2px solid #777; | |||
border-bottom: none; | |||
margin-top: -2px; | |||
} | } | ||
.leaflet- | .leaflet-control-scale-line:not(:first-child):not(:last-child) { | ||
border-bottom: 2px solid #777; | |||
border- | |||
} | } | ||
.leaflet-touch .leaflet-control-attribution, | |||
.leaflet-touch .leaflet-control-layers, | |||
.leaflet-touch .leaflet-bar { | |||
box-shadow: none; | |||
.leaflet-control | } | ||
.leaflet-touch .leaflet-control-layers, | |||
.leaflet-touch .leaflet-bar { | |||
border: 2px solid rgba(0,0,0,0.2); | |||
background-clip: padding-box; | |||
} | } | ||
/* | |||
/* popup */ | |||
.leaflet-popup { | |||
position: absolute; | |||
text-align: center; | |||
margin-bottom: 20px; | |||
} | |||
.leaflet-popup-content-wrapper { | |||
padding: 1px; | |||
text-align: left; | |||
border-radius: 12px; | |||
} | } | ||
.leaflet-popup-content { | |||
margin: 13px 24px 13px 20px; | |||
line-height: 1.3; | |||
font-size: 13px; | |||
font-size: 1.08333em; | |||
min-height: 1px; | |||
} | } | ||
.leaflet-popup-content p { | |||
margin: 17px 0; | |||
margin: 1.3em 0; | |||
} | |||
.leaflet-popup-tip-container { | |||
width: 40px; | |||
height: 20px; | |||
position: absolute; | |||
left: 50%; | |||
margin-top: -1px; | |||
margin-left: -20px; | |||
overflow: hidden; | |||
pointer-events: none; | |||
} | |||
.leaflet-popup-tip { | |||
width: 17px; | |||
height: 17px; | |||
padding: 1px; | |||
margin: -10px auto 0; | |||
pointer-events: auto; | |||
-webkit-transform: rotate(45deg); | |||
-moz-transform: rotate(45deg); | |||
-ms-transform: rotate(45deg); | |||
transform: rotate(45deg); | |||
} | |||
.leaflet-popup-content-wrapper, | |||
.leaflet-popup-tip { | |||
background: white; | |||
color: #333; | |||
box-shadow: 0 3px 14px rgba(0,0,0,0.4); | |||
} | } | ||
.leaflet-container a.leaflet-popup-close-button { | |||
position: absolute; | |||
top: 0; | |||
right: 0; | |||
border: none; | |||
text-align: center; | |||
width: 24px; | |||
height: 24px; | |||
font: 16px/24px Tahoma, Verdana, sans-serif; | |||
color: #757575; | |||
text-decoration: none; | |||
background | background: transparent; | ||
} | } | ||
.leaflet-container a.leaflet-popup-close-button:hover, | |||
.leaflet-container a.leaflet-popup-close-button:focus { | |||
color: #585858; | |||
} | |||
.leaflet-popup-scrolled { | |||
overflow: auto; | |||
} | |||
} | .leaflet-oldie .leaflet-popup-content-wrapper { | ||
-ms-zoom: 1; | |||
} | |||
} | .leaflet-oldie .leaflet-popup-tip { | ||
width: 24px; | |||
margin: 0 auto; | |||
} | |||
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)"; | |||
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678); | |||
} | |||
} | |||
.leaflet-oldie .leaflet-control-zoom, | |||
.leaflet-oldie .leaflet-control-layers, | |||
.leaflet-oldie .leaflet-popup-content-wrapper, | |||
.leaflet-oldie .leaflet-popup-tip { | |||
border: 1px solid #999; | |||
} | |||
/* div icon */ | |||
.leaflet-div-icon { | |||
background: #fff; | |||
border: 1px solid #666; | |||
} | } | ||
/* Tooltip */ | |||
/* Base styles for the element that has a tooltip */ | |||
.leaflet-tooltip { | |||
position: absolute; | |||
padding: 6px; | |||
background-color: #fff; | |||
border: 1px solid #fff; | |||
border-radius: 3px; | |||
color: #222; | |||
} | white-space: nowrap; | ||
-webkit-user-select: none; | |||
-moz-user-select: none; | |||
} | -ms-user-select: none; | ||
user-select: none; | |||
pointer-events: none; | |||
box-shadow: 0 1px 3px rgba(0,0,0,0.4); | |||
} | |||
background | .leaflet-tooltip.leaflet-interactive { | ||
} | cursor: pointer; | ||
pointer-events: auto; | |||
} | |||
.leaflet-tooltip-top:before, | |||
.leaflet-tooltip-bottom:before, | |||
.leaflet-tooltip-left:before, | |||
.leaflet-tooltip-right:before { | |||
position: absolute; | |||
pointer-events: none; | |||
border: 6px solid transparent; | |||
background: transparent; | |||
content: ""; | |||
} | |||
/* Directions */ | |||
.leaflet-tooltip-bottom { | |||
margin-top: 6px; | |||
} | } | ||
.leaflet-tooltip-top { | |||
margin-top: -6px; | |||
} | } | ||
.leaflet-tooltip-bottom:before, | |||
.leaflet-tooltip-top:before { | |||
} | left: 50%; | ||
margin-left: -6px; | |||
} | |||
.leaflet-tooltip-top:before { | |||
bottom: 0; | |||
margin-bottom: -12px; | |||
border-top-color: #fff; | |||
} | |||
.leaflet-tooltip-bottom:before { | |||
top: 0; | |||
margin-top: -12px; | |||
margin-left: -6px; | |||
border-bottom-color: #fff; | |||
} | |||
.leaflet-tooltip-left { | |||
margin-left: -6px; | |||
} | } | ||
.leaflet-tooltip-right { | |||
margin-left: 6px; | |||
} | } | ||
.leaflet-tooltip-left:before, | |||
.leaflet-tooltip-right:before { | |||
} | top: 50%; | ||
html.skin-theme-clientpref- | margin-top: -6px; | ||
} | |||
.leaflet-tooltip-left:before { | |||
} | right: 0; | ||
html.skin-theme-clientpref-night | margin-right: -12px; | ||
border-left-color: #fff; | |||
} | |||
.leaflet-tooltip-right:before { | |||
left: 0; | |||
margin-left: -12px; | |||
border-right-color: #fff; | |||
} | |||
/* Printing */ | |||
@media print { | |||
/* Prevent printers from removing background-images of controls. */ | |||
.leaflet-control { | |||
-webkit-print-color-adjust: exact; | |||
print-color-adjust: exact; | |||
} | |||
} | |||
/* Темная тема */ | |||
@media screen { | |||
html.skin-theme-clientpref-night client-js .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable), .jquery-tablesorter th.headerSort { | |||
background-image: url(/w/resources/src/jquery.tablesorter.styles/images/sort_both_inverted.svg?d764d); | |||
} | |||
html.skin-theme-clientpref-night table.overview { | |||
background-color: #1C1D21; | |||
border: 1px solid #162f4d; | |||
background-image: url(/resources/css/grunge.png); | |||
color: #ffffff; | |||
} | } | ||
html.skin-theme-clientpref-night .mw-parser-output > span.mw-default-size img, html.skin-theme-clientpref-night section .mw-heading ~ div > span.mw-default-size img, html.skin-theme-clientpref-night section > span.mw-default-size img, html.skin-theme-clientpref-night dd > span.mw-default-size img, html.skin-theme-clientpref-night p > span.mw-default-size img, html.skin-theme-clientpref-night .mw-parser-output > figure[typeof='mw:File'] img, html.skin-theme-clientpref-night section .mw-heading ~ div > figure[typeof='mw:File'] img, html.skin-theme-clientpref-night section > figure[typeof='mw:File'] img, html.skin-theme-clientpref-night dd > figure[typeof='mw:File'] img, html.skin-theme-clientpref-night p > figure[typeof='mw:File'] img, html.skin-theme-clientpref-night .mw-parser-output > figure[typeof='mw:File/Thumb'] img, html.skin-theme-clientpref-night section .mw-heading ~ div > figure[typeof='mw:File/Thumb'] img, html.skin-theme-clientpref-night section > figure[typeof='mw:File/Thumb'] img, html.skin-theme-clientpref-night dd > figure[typeof='mw:File/Thumb'] img, html.skin-theme-clientpref-night p > figure[typeof='mw:File/Thumb'] img, html.skin-theme-clientpref-night .mw-parser-output > figure[typeof='mw:File/Frameless'] img, html.skin-theme-clientpref-night section .mw-heading ~ div > figure[typeof='mw:File/Frameless'] img, html.skin-theme-clientpref-night section > figure[typeof='mw:File/Frameless'] img, html.skin-theme-clientpref-night dd > figure[typeof='mw:File/Frameless'] img, html.skin-theme-clientpref-night p > figure[typeof='mw:File/Frameless'] img { | |||
background: transparent; | |||
} | } | ||
html.skin-theme-clientpref-night .mw-parser-output .note-Storm-Atronach-Crate { | |||
background-color: #3d425a; | |||
. | color: #ffffff; | ||
background-image: url("/images/7/74/ON-icon-store-Storm_Atronach_Crown_Crate.png"); | |||
background-size: 40px; | |||
font-size: 15px; | |||
border-color: #162f4d; | |||
padding-left: 55px; | |||
min-height: 40px; | |||
} | } | ||
. | html.skin-theme-clientpref-night .mw-parser-output .note-RageboundCrate { | ||
background-color: #3d425a; | |||
color: #ffffff; | |||
background-image: url("/images/9/9f/ON-icon-store-Ragebound_Crate.png"); | |||
background-size: 40px; | |||
font-size: 15px; | |||
border-color: #162f4d; | |||
padding-left: 55px; | |||
min-height: 40px; | |||
} | } | ||
html.skin-theme-clientpref-night .mw-parser-output .note-CarnavalCrate { | |||
. | background-color: #3d425a; | ||
color: #ffffff; | |||
background-image: url("/images/f/fd/ON-icon-store-Carnaval_Crate.png"); | |||
background-size: 40px; | |||
font-size: 15px; | |||
border-color: #162f4d; | |||
padding-left: 55px; | |||
min-height: 40px; | |||
} | } | ||
. | html.skin-theme-clientpref-night .mw-parser-output .note-WildHuntCrate { | ||
background-color: #3d425a; | |||
color: #ffffff; | |||
background-image: url("/images/6/6a/ON-icon-store-Wild_Hunt_Crown_Crate.png"); | |||
background-size: 40px; | |||
font-size: 15px; | |||
border-color: #162f4d; | |||
padding-left: 55px; | |||
min-height: 40px; | |||
} | } | ||
. | html.skin-theme-clientpref-night .Drops { | ||
padding: 10px !important; | |||
margin-top: 2rem !important; | |||
color: var(--color-progressive) !important; | |||
border-bottom: 1px solid var(--color-progressive) !important; | |||
min-width: 150px; | |||
} | |||
html.skin-theme-clientpref-night .Applied { | |||
background-color:#13b4a7; | |||
} | } | ||
. | html.skin-theme-clientpref-night .Video { | ||
background-color:#1b71b7; | |||
} | } | ||
. | html.skin-theme-clientpref-night .Craft { | ||
background-color:#a3a634; | |||
} | } | ||
. | html.skin-theme-clientpref-night .itemepic a { | ||
color: #b662f5 !important; | |||
} | } | ||
. | html.skin-theme-clientpref-night .itemfine a { | ||
color: #4ef62c !important; | |||
} | } | ||
. | html.skin-theme-clientpref-night .itemsuperior a { | ||
color: #64a9ff !important; | |||
} | } | ||
. | html.skin-theme-clientpref-night span.itemepic { | ||
color: #b662f5 !important; | |||
} | } | ||
. | html.skin-theme-clientpref-night span.itemfine { | ||
color: #4ef62c !important; | |||
} | } | ||
. | html.skin-theme-clientpref-night span.itemsuperior { | ||
color: #64a9ff !important; | |||
} | } | ||
. | html.skin-theme-clientpref-night .embedvideo.frame { | ||
border: 1pt solid #212836; | |||
padding: 0.5em; | |||
} | } | ||
} | } | ||
/* Автоматический режим */ | |||
@media screen and (prefers-color-scheme: dark) { | |||
html.skin-theme-clientpref-os table.overview { | |||
background-color: #1C1D21; | |||
border: 1px solid #162f4d; | |||
background-image: url(/resources/css/grunge.png); | |||
color: #ffffff; | |||
} | } | ||
. | html.skin-theme-clientpref-os .mw-parser-output > span.mw-default-size img, html.skin-theme-clientpref-os section .mw-heading ~ div > span.mw-default-size img, html.skin-theme-clientpref-os section > span.mw-default-size img, html.skin-theme-clientpref-os dd > span.mw-default-size img, html.skin-theme-clientpref-os p > span.mw-default-size img, html.skin-theme-clientpref-os .mw-parser-output > figure[typeof='mw:File'] img, html.skin-theme-clientpref-os section .mw-heading ~ div > figure[typeof='mw:File'] img, html.skin-theme-clientpref-os section > figure[typeof='mw:File'] img, html.skin-theme-clientpref-os dd > figure[typeof='mw:File'] img, html.skin-theme-clientpref-os p > figure[typeof='mw:File'] img, html.skin-theme-clientpref-os .mw-parser-output > figure[typeof='mw:File/Thumb'] img, html.skin-theme-clientpref-os section .mw-heading ~ div > figure[typeof='mw:File/Thumb'] img, html.skin-theme-clientpref-os section > figure[typeof='mw:File/Thumb'] img, html.skin-theme-clientpref-os dd > figure[typeof='mw:File/Thumb'] img, html.skin-theme-clientpref-os p > figure[typeof='mw:File/Thumb'] img, html.skin-theme-clientpref-os .mw-parser-output > figure[typeof='mw:File/Frameless'] img, html.skin-theme-clientpref-os section .mw-heading ~ div > figure[typeof='mw:File/Frameless'] img, html.skin-theme-clientpref-os section > figure[typeof='mw:File/Frameless'] img, html.skin-theme-clientpref-os dd > figure[typeof='mw:File/Frameless'] img, html.skin-theme-clientpref-os p > figure[typeof='mw:File/Frameless'] img { | ||
background: transparent; | |||
} | } | ||
.infobox-value { | |||
color: var(--color-base); | html.skin-theme-clientpref-os .Drops { | ||
text-align: right; | padding: 10px !important; | ||
} | margin-top: 2rem !important; | ||
.infobox-quest--list--chapter { | color: var(--color-progressive) !important; | ||
overflow-x: auto; | border-bottom: 1px solid var(--color-progressive) !important; | ||
white-space: nowrap; | min-width: 150px; | ||
} | } | ||
.overview_box { | html.skin-theme-clientpref-os .Applied { | ||
justify-content: space-between; | background-color:#13b4a7; | ||
gap: 10px 20px; | } | ||
align-items: start; | html.skin-theme-clientpref-os .Applied { | ||
} | background-color:#1b71b7; | ||
.overview_block { | } | ||
display: grid; | html.skin-theme-clientpref-os .Video { | ||
grid-template-columns: 96px auto; | background-color:#1b71b7; | ||
grid-template-rows: auto auto; | } | ||
align-content: start; | html.skin-theme-clientpref-os .Craft { | ||
grid-column: 1 / 2; | background-color:#a3a634; | ||
grid-row: auto; | } | ||
html.skin-theme-clientpref-os .itemepic a { | |||
color: #b662f5 !important; | |||
} | |||
html.skin-theme-clientpref-os .itemfine a { | |||
color: #4ef62c !important; | |||
} | |||
html.skin-theme-clientpref-os .itemsuperior a { | |||
color: #64a9ff !important; | |||
} | |||
html.skin-theme-clientpref-os span.itemepic { | |||
color: #b662f5 !important; | |||
} | |||
html.skin-theme-clientpref-os span.itemfine { | |||
color: #4ef62c !important; | |||
} | |||
html.skin-theme-clientpref-os span.itemsuperior { | |||
color: #64a9ff !important; | |||
} | |||
html.skin-theme-clientpref-os .embedvideo.frame { | |||
border: 1pt solid #212836; | |||
padding: 0.5em; | |||
} | |||
} | |||
/* Стили для инфобокса */ | |||
.infobox { | |||
width: 100%; | |||
max-width: 350px; | |||
box-sizing: border-box; | |||
background: var(--color-surface-2); | |||
border-color: transparent; | |||
border-radius: var(--border-radius-base); | |||
padding: 1.5rem; | |||
height: fit-content; | |||
float: right; | |||
margin: 0 0 2rem 2rem; | |||
} | |||
.infobox-overview { | |||
width: 100%; | |||
max-width: 350px; | |||
box-sizing: border-box; | |||
background: #eaecf0; | |||
border: 1px solid #ECE6E7; | |||
padding: 1.5rem; | |||
height: fit-content; | |||
float: right; | |||
margin: 0 0 2rem 2rem; | |||
} | |||
.infobox-section { | |||
margin-bottom: 1.5rem; | |||
} | |||
.infobox-section:last-child { | |||
margin-bottom: 0; | |||
} | |||
.infobox-row { | |||
display: flex; | |||
align-items: flex-start; | |||
justify-content: space-between; | |||
gap: 5px; | |||
position: relative; | |||
padding: 0.5rem 0; | |||
} | |||
.infobox-row-overview { | |||
display: block; | |||
align-items: flex-start; | |||
justify-content: space-between; | |||
gap: 5px; | |||
position: relative; | |||
padding: 0.5rem 0; | |||
} | |||
.infobox-row::after { | |||
content: ''; | |||
display: block; | |||
position: absolute; | |||
bottom: 0; | |||
left: 0; | |||
right: 0; | |||
height: 1px; | |||
background-color: var(--color-progressive); | |||
opacity: 0.1; | |||
} | |||
.infobox-row-overview::after { | |||
content: ''; | |||
display: block; | |||
position: absolute; | |||
bottom: 0; | |||
left: 0; | |||
right: 60%; | |||
height: 1px; | |||
background-color: var(--color-progressive); | |||
opacity: 0.1; | |||
} | |||
.infobox-row:last-child::after { | |||
display: none; | |||
} | |||
.infobox-row-nested { | |||
display: flex; | |||
align-items: flex-start; | |||
justify-content: space-between; | |||
gap: 5px; | |||
position: relative; | |||
padding: 0.2rem 0; | |||
} | |||
.infobox-row--no-flex { | |||
display: block; | |||
} | |||
.infobox-row--overflow-x { | |||
overflow-x: auto; | |||
} | |||
.infobox-row--wrap { | |||
flex-wrap: wrap; | |||
} | |||
.infobox-title { | |||
display: flex; | |||
align-items: center; | |||
position: relative; | |||
font-size: 1.2em; | |||
font-weight: 600; | |||
justify-content: left; | |||
color: var(--color-progressive); | |||
} | |||
.infobox-title::after { | |||
opacity: 0.3; | |||
} | |||
.infobox-title--icon { | |||
font-size: 0.875em; | |||
} | |||
.infobox-overview-title { | |||
display: block; | |||
align-items: center; | |||
position: relative; | |||
font-size: 0.9em; | |||
font-weight: 600; | |||
justify-content: left; | |||
color: var(--color-progressive); | |||
} | |||
.infobox-label { | |||
color: var(--color-subtle); | |||
} | |||
.infobox-label.smw-highlighter { | |||
border-bottom: 1px dotted var(--color-subtle); | |||
} | |||
.infobox-value { | |||
color: var(--color-base); | |||
text-align: right; | |||
} | |||
.infobox-quest--list--chapter { | |||
overflow-x: auto; | |||
white-space: nowrap; | |||
} | |||
.overview_box { | |||
justify-content: space-between; | |||
gap: 10px 20px; | |||
align-items: start; | |||
} | |||
.overview_block { | |||
display: grid; | |||
grid-template-columns: 96px auto; | |||
grid-template-rows: auto auto; | |||
align-content: start; | |||
grid-column: 1 / 2; | |||
grid-row: auto; | |||
} | |||
.overview_icon { | |||
flex: 0 0 96px; | |||
height: 96px; | |||
} | |||
.overview_info { | |||
grid-template-columns: min-content auto; | |||
height: min-content; | |||
flex: 1 1 auto; | |||
} | |||
@media screen and (max-width:450px){ | |||
.infobox { | |||
max-width: 100%; | |||
margin: 0 0 2rem 0; | |||
} | |||
} | |||
/* Цвета кнопок */ | |||
/* Оформление кнопок */ | |||
.mw-parser-output .home-card--row4 { | |||
grid-row: span 4; | |||
} | |||
.mw-parser-output .home-card--col2 { | |||
grid-column: span 2; | |||
} | |||
.mw-parser-output .home-card { | |||
position: relative; | |||
padding: var(--space-md); | |||
border: 1px solid var(--border-color-base); | |||
background: var(--color-surface-1); | |||
border-radius: var(--border-radius-medium); | |||
font-size: var(--font-size-small); | |||
} | |||
.mw-parser-output .home-card__badge, .mw-parser-output .home-card__label { | |||
color: var(--color-subtle); | |||
font-size: var(--font-size-small); | |||
letter-spacing: 0.05em; | |||
} | |||
.mw-parser-output .home-link { | |||
display: grid; | |||
margin-top: var(--space-xs); | |||
font-size: var(--font-size-small); | |||
font-weight: var(--font-weight-medium); | |||
grid-gap: var(--space-xs); | |||
text-align: center; | |||
} | |||
.mw-parser-output .home-link__button { | |||
display: flex; | |||
} | } | ||
. | .mw-parser-output .home-link__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-emphasized)!important; | |||
line-height: var(--line-height-xxx-small); | |||
text-decoration: none!important; | |||
} | } | ||
. | .mw-parser-output .home-link__button a:hover { | ||
background: var(--color-surface-2--hover) | |||
} | } | ||
.mw-parser-output .home-link__button a:active { | |||
background: var(--color-surface-2--active) | |||
} | } | ||