MediaWiki:Citizen.css: различия между версиями
Askell (обсуждение | вклад) Нет описания правки |
Askell (обсуждение | вклад) Нет описания правки |
||
(не показаны 84 промежуточные версии этого же участника) | |||
Строка 1: | Строка 1: | ||
/* Размещённый здесь CSS-код будет загружаться для пользователей, использующих тему оформления Citizen */ | /* Размещённый здесь CSS-код будет загружаться для пользователей, использующих тему оформления Citizen */ | ||
@import url('https://fonts.googleapis.com/css?family=Merriweather|Cormorant Infant|PT Mono|Neucha|MedievalSharp|Spectral SC|Kurale|El Messiri|Ledger'); | @import url('https://fonts.googleapis.com/css?family=Merriweather|Cormorant Infant|PT Mono|Neucha|MedievalSharp|Spectral SC|Kurale|El Messiri|Ledger'); | ||
#mw-content-text { | |||
background-color: rgb(255 255 255 / 90%); | |||
border-radius:10px; | |||
padding:10px; | |||
} | |||
pre, .mw-code { | |||
white-space: pre-wrap; | |||
} | |||
.ext-WikiEditor-realtimepreview-textbox#wpTextbox1, .mw-editform .ext-WikiEditor-realtimepreview-textbox#wpTextbox1 { | |||
background-color: white; | |||
padding: 5px; | |||
} | |||
.catlinks { | |||
background-color: rgb(255 255 255 / 90%); | |||
border-radius:10px; | |||
padding:10px; | |||
margin-bottom: -20px; | |||
} | |||
.page-info { | |||
background-color: rgb(255 255 255 / 90%); | |||
border-radius:10px; | |||
padding:10px; | |||
margin-bottom: -25px; | |||
width: max-content; | |||
} | |||
.citizen-sticky-header-visible .citizen-page-header::before { | .citizen-sticky-header-visible .citizen-page-header::before { | ||
Строка 15: | Строка 46: | ||
.ace-tm .ace_gutter-active-line { | .ace-tm .ace_gutter-active-line { | ||
background-color: rgb( | background-color: rgb(255 255 255 / 90%); | ||
} | } | ||
Строка 41: | Строка 72: | ||
padding: 2em !important; | padding: 2em !important; | ||
border-radius:10px; | border-radius:10px; | ||
background-size: cover; /* Фон будет масштабироваться под размеры экрана */ | background-size: cover; /* Фон будет масштабироваться под размеры экрана */ | ||
padding: 15px; | padding: 15px; | ||
max-width:100%; | max-width:100%; | ||
Строка 312: | Строка 341: | ||
} | } | ||
#maincontentwrapper .mw-ui-button.mw-ui-progressive, .btn-primary, body #contentwrapper #maincontentwrapper button.oo-ui-buttonElement-button, body #contentwrapper #maincontentwrapper input.oo-ui-buttonElement-button, input[type=button][name=wpUpload], input[type=submit][name=wpUpload] { | #maincontentwrapper .mw-ui-button.mw-ui-progressive, .btn-primary, body #contentwrapper #maincontentwrapper button.oo-ui-buttonElement-button, body #contentwrapper #maincontentwrapper input.oo-ui-buttonElement-button, input[type=button][name=wpUpload], input[type=submit][name=wpUpload] { | ||
Строка 534: | Строка 552: | ||
padding: 0px !important; | padding: 0px !important; | ||
border-spacing: 0px !important; | border-spacing: 0px !important; | ||
border-image: url('https:// | border-image: url('https://asciawiki.ru/images/3/31/Border1.png') 24 round !important; | ||
border-radius: 35px; | border-radius: 35px; | ||
background: transparent !important; | background: transparent !important; | ||
Строка 903: | Строка 921: | ||
color: black; /* Цвет основного текста */ | color: black; /* Цвет основного текста */ | ||
display: contents; | display: contents; | ||
} | |||
.noclick a { | |||
pointer-events: none; | |||
cursor: default; | |||
} | |||
/* Контейнер для группы карточек */ | |||
.card-group { | |||
display: flex; /* Размещает карточки в строку */ | |||
gap: 10px; /* Отступы между карточками */ | |||
justify-content: center; /* Выравнивание карточек по центру */ | |||
align-items: stretch; /* Все карточки одинаковой высоты */ | |||
} | |||
.card { | |||
position: relative; | |||
width: 350px; /* Фиксированная ширина карточки */ | |||
min-height: 150px; /* Минимальная высота для выравнивания */ | |||
background-color: #ffffff; | |||
border-radius: 10px; | |||
overflow: hidden; /* Скрываем все, что выходит за пределы */ | |||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Легкая тень */ | |||
} | |||
.card-img-top { | |||
width: 100%; | |||
height: auto; | |||
} | |||
/* Показываем подсказку при наведении */ | |||
.card-img-top::after { | |||
content: "Наведи сюда, чтобы узнать больше"; | |||
position: absolute; | |||
top: 50%; | |||
left: 50%; | |||
transform: translate(-50%, -50%); | |||
font-size: 18px; | |||
color: rgba(255, 255, 255, 0.8); /* Белый с прозрачностью */ | |||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Легкая тень */ | |||
font-weight: bold; | |||
opacity: 0; /* Скрыта по умолчанию */ | |||
transition: opacity 0.3s ease; /* Плавное изменение прозрачности */ | |||
} | |||
.card-body { | |||
padding: 15px; | |||
font-family: 'Arial', sans-serif; | |||
background-color: #f7f7f7; | |||
} | |||
.card-title { | |||
font-size: 20px; | |||
color: #212121; | |||
margin-bottom: 10px; | |||
} | |||
/* Плашка, которая появляется при наведении на картинку */ | |||
.card-hover-info { | |||
position: absolute; | |||
padding: 20px; | |||
top: 50%; | |||
left: 0; | |||
width: 100%; | |||
height: 50%; /* Половина карточки */ | |||
background: rgba(0, 0, 0, 0.6); /* Темная плашка с полупрозрачностью */ | |||
color: #ffffff; | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: center; | |||
align-items: center; | |||
opacity: 0; | |||
transition: opacity 0.3s ease, transform 0.3s ease; /* Плавное появление */ | |||
transform: translateY(-100%); /* Плашка будет скрыта */ | |||
border-radius: 0 0 10px 10px; /* Закругляем нижний край плашки */ | |||
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgb(0 0 0 / 0%)); /* Градиент для верхнего края */ | |||
} | |||
.card:hover .card-hover-info { | |||
opacity: 1; /* Плашка становится видимой */ | |||
transform: translateY(0); /* Плашка скользит сверху */ | |||
} | |||
.card-hover-info .label { | |||
font-weight: bold; | |||
font-size: 18px; | |||
} | |||
.card-hover-info .value { | |||
font-size: 16px; | |||
color: #ffffff; | |||
} | |||
.character-row { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 20px; | |||
} | |||
.character-card { | |||
position: relative; | |||
width: 200px; | |||
height: 300px; | |||
background-color: #222; | |||
color: white; | |||
border-radius: 8px; | |||
overflow: hidden; | |||
text-align: center; | |||
font-family: sans-serif; | |||
box-shadow: 0 4px 10px rgba(0,0,0,0.4); | |||
} | |||
.character-image { | |||
width: 100%; | |||
height: 200px; | |||
overflow: hidden; | |||
padding: 0; | |||
margin: 0; | |||
} | |||
.character-img { | |||
width: 100% !important; | |||
height: 100% !important; | |||
object-fit: cover; | |||
display: block; | |||
} | |||
.character-name { | |||
font-size: 1.1em; | |||
font-weight: bold; | |||
padding: 8px 0; | |||
background-color: rgba(0, 0, 0, 0.7); | |||
} | |||
.character-overlay { | |||
position: absolute; | |||
bottom: -60px; | |||
left: 0; | |||
width: 100%; | |||
background-color: rgba(0,0,0,0.7); | |||
color: white; | |||
font-size: 0.9em; | |||
padding: 8px 5px; | |||
box-sizing: border-box; | |||
transition: bottom 0.3s ease; | |||
} | |||
.character-card:hover .character-overlay { | |||
bottom: 40px; | |||
} | } |