MediaWiki:Common.css: различия между версиями
Материал из AbduloverA.com
Adept (обсуждение | вклад) Нет описания правки |
Adept (обсуждение | вклад) Нет описания правки |
||
| Строка 112: | Строка 112: | ||
box-shadow: 0px 0px 10px 10px rgba(255, 0, 0, 0.5); | box-shadow: 0px 0px 10px 10px rgba(255, 0, 0, 0.5); | ||
} | } | ||
/* | /* --- СТИЛИ ДЛЯ АБДУЛО-СЕТКИ --- */ | ||
. | .abdul-grid-container { | ||
width: 100%; | display: flex; | ||
height: 100%; | flex-wrap: wrap; | ||
object-fit: | gap: 15px; | ||
justify-content: center; | |||
} | |||
.abdul-grid-item { | |||
width: 200px; /* Жесткий размер квадрата */ | |||
height: 200px; | |||
overflow: hidden; | |||
border: 2px solid #b71c1c; | |||
border-radius: 8px; | |||
background: #000; | |||
box-shadow: 0 5px 15px rgba(0,0,0,0.5); | |||
transition: transform 0.2s; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
} | |||
.abdul-grid-item:hover { | |||
transform: scale(1.05); | |||
border-color: #ffd700; | |||
z-index: 5; | |||
} | |||
/* Принудительно растягиваем картинку на весь квадрат */ | |||
.abdul-grid-item img { | |||
width: 100% !important; | |||
height: 100% !important; | |||
object-fit: cover !important; /* Обрезает лишнее, заполняя квадрат */ | |||
min-width: 200px; | |||
min-height: 200px; | |||
} | |||
/* --- СТИЛИ ДЛЯ АБДУЛО-СЛАЙДЕРА --- */ | |||
.abdul-slider-wrapper { | |||
max-width: 600px; | |||
margin: 20px auto; | |||
position: relative; | |||
background: #000; | background: #000; | ||
border: 2px solid #b71c1c; | |||
border-radius: 12px; | |||
box-shadow: 0 10px 30px rgba(0,0,0,0.6); | |||
overflow: hidden; /* Скрываем всё, что вылезает */ | |||
} | |||
.abdul-slider-track { | |||
display: flex; /* Выстраивает слайды в ряд */ | |||
overflow-x: auto; | |||
scroll-snap-type: x mandatory; | |||
scroll-behavior: smooth; | |||
scrollbar-width: none; /* Скрывает скроллбар */ | |||
} | |||
.abdul-slider-track::-webkit-scrollbar { | |||
display: none; | |||
} | |||
.abdul-slide { | |||
flex: 0 0 100%; /* Слайд занимает 100% ширины */ | |||
height: 400px; | |||
scroll-snap-align: center; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
background: #000; | |||
position: relative; | |||
} | |||
/* Картинка в слайдере вписывается целиком */ | |||
.abdul-slide img { | |||
max-width: 100% !important; | |||
max-height: 100% !important; | |||
width: auto !important; | |||
height: auto !important; | |||
object-fit: contain !important; | |||
} | |||
/* Кнопки слайдера (простые и надежные) */ | |||
.abdul-slider-btn { | |||
position: absolute; | |||
top: 50%; | |||
transform: translateY(-50%); | |||
width: 40px; | |||
height: 40px; | |||
background: rgba(0,0,0,0.7); | |||
color: #b71c1c; | |||
border: 2px solid #b71c1c; | |||
border-radius: 50%; | |||
font-size: 24px; | |||
font-weight: bold; | |||
cursor: pointer; | |||
z-index: 10; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
user-select: none; | |||
transition: 0.2s; | |||
} | } | ||
.slider- | .abdul-slider-btn:hover { | ||
background: #b71c1c; | |||
color: #fff; | |||
scale: 1.1; | |||
} | } | ||
.abdul-slider-btn.prev { left: 10px; } | |||
.abdul-slider-btn.next { right: 10px; } | |||
Версия от 21:02, 23 ноября 2025
form:not(.oo-ui-layout) textarea, form:not(.oo-ui-layout) input {
border: solid 1px #c8ccd1;
border-radius: 2px;
}
element.style {
background: rgba(255, 128, 0, 0.5);
border: solid 2px #000000;
}
form input:not(.mw-widgets-datetime-dateTimeInputWidget-editField):not(.mw-history-compareselectedversions-button) {
margin: 0.5em 0;
padding: 0.35em;
}
form:not(.oo-ui-layout) button, form:not(.oo-ui-layout) input[type='submit'] {
border-radius: 2px;
padding: 0.35em 1em;
background-color: rgb(255, 128, 0);
font-weight: bold;
color: rgb(0, 0, 0);
border: solid 3px rgb(0, 0, 0);
}
form:not(.oo-ui-layout) textarea, form:not(.oo-ui-layout) input {
border: solid 2px #000000;
border-radius: 2px;
background: rgba(255, 128, 0, 0.5);
font-family: Zekton;
}
form:not(.oo-ui-layout) button:not(:disabled):hover, form:not(.oo-ui-layout) input[type='submit']:not(:disabled):hover, form:not(.oo-ui-layout) button:not(:disabled):active, form:not(.oo-ui-layout) input[type='submit']:not(:disabled):active {
background-color: rgb(224, 0, 0);
}
.mw-message-box-error {
background-color: rgba(255, 0, 0, 1.0);
border-color: rgb(255, 0, 0);
/* border: solid 1px rgb(255, 0, 0); */
box-shadow: 0px 0px 17px 7px rgb(255, 0, 0);
font-size: 1.15em;
text-align: center;
font-family: 'ZektonBd';
text-shadow: 0px 0px 5px rgb(255, 255, 0);
}
a:visited {
/* color: #2a4b8d; */
color: #000000;
text-shadow: 0px 0px 4px rgb(255, 255, 0);
}
a:visited:hover {
color: #000000;
text-shadow: 0px 0px 4px rgb(255, 0, 0);
}
select {
padding: 0.35em;
box-sizing: border-box;
height: unset;
background: rgba(255, 128, 0, 0.5);
border: solid 2px #000000;
font-family: ZektonBg;
}
/* Контекст всплывающего окна */
.mw-echo-ui-notificationsListWidget a, #p-personal .mw-echo-ui-notificationsListWidget a.new {
/* color: #54595d; */
background: linear-gradient(0deg, #ff8000, #ffffff);
}
.oo-ui-popupWidget-head {
background: linear-gradient(12deg, black, transparent);
text-shadow: 0px 0px 2px rgba(255,255,0);
color: #FFFFFF;
}
div.mw-warning-with-logexcerpt {
padding: 3px;
margin-bottom: 3px;
color: white;
border: 4px solid rgba(255, 255, 0, 0.75);
background: rgba(64,64,64,0.9);
clear: both;
}
div.embedvideo.ev_left {
margin-right: 20px;
margin-top: 20px;
margin-bottom: 20px;
box-shadow: 0px 0px 10px 10px rgba(255, 0, 0, 0.5);
}
div.embedvideo.ev_right {
margin-left: 20px;
margin-top: 20px;
margin-bottom: 20px;
box-shadow: 0px 0px 10px 10px rgba(255, 0, 0, 0.5);
}
/* --- СТИЛИ ДЛЯ АБДУЛО-СЕТКИ --- */
.abdul-grid-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
}
.abdul-grid-item {
width: 200px; /* Жесткий размер квадрата */
height: 200px;
overflow: hidden;
border: 2px solid #b71c1c;
border-radius: 8px;
background: #000;
box-shadow: 0 5px 15px rgba(0,0,0,0.5);
transition: transform 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.abdul-grid-item:hover {
transform: scale(1.05);
border-color: #ffd700;
z-index: 5;
}
/* Принудительно растягиваем картинку на весь квадрат */
.abdul-grid-item img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important; /* Обрезает лишнее, заполняя квадрат */
min-width: 200px;
min-height: 200px;
}
/* --- СТИЛИ ДЛЯ АБДУЛО-СЛАЙДЕРА --- */
.abdul-slider-wrapper {
max-width: 600px;
margin: 20px auto;
position: relative;
background: #000;
border: 2px solid #b71c1c;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.6);
overflow: hidden; /* Скрываем всё, что вылезает */
}
.abdul-slider-track {
display: flex; /* Выстраивает слайды в ряд */
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none; /* Скрывает скроллбар */
}
.abdul-slider-track::-webkit-scrollbar {
display: none;
}
.abdul-slide {
flex: 0 0 100%; /* Слайд занимает 100% ширины */
height: 400px;
scroll-snap-align: center;
display: flex;
align-items: center;
justify-content: center;
background: #000;
position: relative;
}
/* Картинка в слайдере вписывается целиком */
.abdul-slide img {
max-width: 100% !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
}
/* Кнопки слайдера (простые и надежные) */
.abdul-slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
background: rgba(0,0,0,0.7);
color: #b71c1c;
border: 2px solid #b71c1c;
border-radius: 50%;
font-size: 24px;
font-weight: bold;
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
transition: 0.2s;
}
.abdul-slider-btn:hover {
background: #b71c1c;
color: #fff;
scale: 1.1;
}
.abdul-slider-btn.prev { left: 10px; }
.abdul-slider-btn.next { right: 10px; }