MediaWiki:Light.css: відмінності між версіями
Wiki (обговорення | внесок) Створена сторінка: →========================= Світла тема =========================: body { background-color: #ffffff; →білий фон: color: #202020; →темний текст: font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } a { color: #0066cc; →сині посилання: text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4, h5, h6 { color: #cc3... |
Wiki (обговорення | внесок) Немає опису редагування |
||
| (Не показано 7 проміжних версій цього користувача) | |||
| Рядок 1: | Рядок 1: | ||
/* ========================= | /* ========================= | ||
Світла тема | Світла тема для MediaWiki 1.44 (Vector) | ||
========================= */ | ========================= */ | ||
body { | /* ========================= | ||
background-color: # | Фон сторінки та шапка | ||
color: # | ========================= */ | ||
html, body, .mw-body { | |||
background-color: #f9f9f9; | |||
color: #000000; /* основний текст чорний */ | |||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; | font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; | ||
min-height: 100%; | |||
} | |||
#mw-head { | |||
background-color: #e0e0e0; /* світла шапка */ | |||
color: #000000; | |||
} | |||
#mw-head h1, #mw-head h2 { | |||
color: #000000; /* заголовки чорні */ | |||
} | |||
/* ========================= | |||
Панелі навігації | |||
========================= */ | |||
#p-personal, #p-navigation, #p-tb, #p-lang, #p-cactions { | |||
background-color: #e0e0e0; | |||
color: #000000; | |||
} | |||
#p-personal a, #p-navigation a, #p-tb a, #p-lang a, #p-cactions a { | |||
color: #000000; | |||
} | } | ||
a { | #p-personal a:hover, #p-navigation a:hover, #p-tb a:hover, | ||
#p-lang a:hover, #p-cactions a:hover { | |||
text-decoration: underline; | |||
} | |||
/* ========================= | |||
Вкладки сторінки | |||
========================= */ | |||
#ca-nstab-main, #ca-nstab-talk, #ca-view, #ca-edit, #ca-viewsource, #ca-history { | |||
background-color: #ffffff !important; | |||
border: 1px solid #ccc; | |||
border-radius: 4px 4px 0 0; | |||
} | |||
#ca-nstab-main a, | |||
#ca-nstab-talk a, | |||
#ca-view a, | |||
#ca-edit a, | |||
#ca-viewsource a, | |||
#ca-history a { | |||
color: #000000 !important; | |||
text-decoration: none; | text-decoration: none; | ||
padding: 4px 10px; | |||
display: inline-block; | |||
background-color: #ffffff !important; | |||
box-shadow: none !important; | |||
outline: none !important; | |||
border-radius: 4px 4px 0 0; | |||
} | } | ||
a:hover { | /* Hover / Focus / Active для вкладок */ | ||
#ca-nstab-main a:hover, | |||
#ca-nstab-talk a:hover, | |||
#ca-view a:hover, | |||
#ca-edit a:hover, | |||
#ca-viewsource a:hover, | |||
#ca-history a:hover, | |||
#ca-nstab-main a:focus, | |||
#ca-nstab-talk a:focus, | |||
#ca-view a:focus, | |||
#ca-edit a:focus, | |||
#ca-viewsource a:focus, | |||
#ca-history a:focus, | |||
#ca-nstab-main a:active, | |||
#ca-nstab-talk a:active, | |||
#ca-view a:active, | |||
#ca-edit a:active, | |||
#ca-viewsource a:active, | |||
#ca-history a:active { | |||
background-color: #d0e1ff !important; /* світло-синій hover */ | |||
color: #1a73e8 !important; | |||
box-shadow: none !important; | |||
outline: none !important; | |||
} | |||
/* Активна вкладка */ | |||
#ca-nstab-main.mw-selected a, | |||
#ca-nstab-talk.mw-selected a, | |||
#ca-view.mw-selected a, | |||
#ca-edit.mw-selected a, | |||
#ca-viewsource.mw-selected a, | |||
#ca-history.mw-selected a { | |||
background-color: #d0e1ff !important; | |||
color: #1a73e8 !important; | |||
font-weight: bold; | |||
box-shadow: none !important; | |||
outline: none !important; | |||
} | } | ||
/* Vector специфіка */ | |||
color: # | .mw-vectorTabs a, | ||
.mw-vectorTabs a:focus, | |||
.mw-vectorTabs a:active { | |||
background-color: #ffffff !important; | |||
color: #000000 !important; | |||
box-shadow: none !important; | |||
outline: none !important; | |||
} | |||
/* ========================= | |||
Приховати вкладку Інструменти для неавторизованих користувачів | |||
========================= */ | |||
body:not(.logged-in) #p-tb { | |||
display: none !important; | |||
} | |||
/* ========================= | |||
Приховати бічні блоки для незареєстрованих користувачів | |||
========================= */ | |||
body:not(.logged-in) #p-navigation, | |||
body:not(.logged-in) #p-specialpages { | |||
display: none !important; | |||
} | } | ||
.mw- | |||
/* ========================= | |||
Основний контент | |||
========================= */ | |||
.mw-parser-output { | |||
background-color: #ffffff; | background-color: #ffffff; | ||
padding: 20px; | |||
border-radius: 6px; | |||
} | |||
p, li, span, a { | |||
color: #000000; | |||
text-decoration: none; | |||
} | |||
p a:hover, li a:hover, span a:hover { | |||
color: #1a73e8; | |||
text-decoration: underline; | |||
} | } | ||
/* Таблиці */ | |||
.mw-parser-output table { | .mw-parser-output table { | ||
border: 1px solid #ccc; | border: 1px solid #ccc; | ||
background-color: #ffffff; | |||
color: #000000; | |||
} | } | ||
.mw-parser-output th { | .mw-parser-output th { | ||
background-color: # | background-color: #e0e0e0; | ||
color: #000000; | |||
padding: 6px; | |||
} | } | ||
.mw-parser-output td { | .mw-parser-output td { | ||
background-color: #ffffff; | background-color: #ffffff; | ||
padding: 6px; | |||
} | } | ||
/* Кнопки | /* ========================= | ||
button, input[type="submit"] { | Кнопки та форми | ||
background-color: # | ========================= */ | ||
border: 1px solid # | button, input[type="submit"], input[type="button"] { | ||
color: # | background-color: #f0f0f0 !important; | ||
padding: | border: 1px solid #ccc !important; | ||
color: #000000 !important; | |||
padding: 6px 12px; | |||
border-radius: 4px; | border-radius: 4px; | ||
cursor: pointer; | |||
box-shadow: none !important; | |||
outline: none !important; | |||
} | |||
button:hover, button:focus, button:active, | |||
input[type="submit"]:hover, input[type="submit"]:focus, input[type="submit"]:active, | |||
input[type="button"]:hover, input[type="button"]:focus, input[type="button"]:active { | |||
background-color: #d0e1ff !important; | |||
color: #1a73e8 !important; | |||
box-shadow: none !important; | |||
outline: none !important; | |||
} | |||
/* Приховати політику конфіденційності та відмову від відповідальності у футері */ | |||
#footer-places-privacy, | |||
#footer-places-disclaimers { | |||
display: none !important; | |||
} | } | ||
/* ========================= | |||
Підвал сайту | |||
========================= */ | |||
#footer { | |||
background-color: #e0e0e0; | background-color: #e0e0e0; | ||
color: #555; | |||
padding: 10px; | |||
} | |||
/* ========================= | |||
Приховати вкладки для неавторизованих користувачів | |||
========================= */ | |||
body:not(.logged-in) #ca-nstab-talk, | |||
body:not(.logged-in) #ca-talk, | |||
body:not(.logged-in) #ca-viewsource, | |||
body:not(.logged-in) #ca-history { | |||
display: none !important; | |||
} | |||
/* ========================= | |||
УНІВЕРСАЛЬНИЙ РЕЖИМ ДОСТУПНОСТІ (для обох тем) | |||
========================= */ | |||
body.accessibility-mode { | |||
/* Поліпшена читабельність без фіксованого розміру шрифту */ | |||
line-height: 1.8 !important; | |||
letter-spacing: 0.5px !important; | |||
word-spacing: 1px !important; | |||
} | |||
/* ПОКРАЩЕНІ КОНТРАСТИ ТА КОЛЬОРИ */ | |||
body.accessibility-mode .mw-body, | |||
body.accessibility-mode .mw-parser-output { | |||
border: 3px solid #ff6600 !important; | |||
background-color: #ffffff !important; | |||
color: #000000 !important; | |||
} | |||
/* Для темної теми - особливі налаштування контрасту */ | |||
body.dark-theme.accessibility-mode .mw-body, | |||
body.dark-theme.accessibility-mode .mw-parser-output { | |||
background-color: #000000 !important; | |||
color: #ffffff !important; | |||
border-color: #ffff00 !important; | |||
} | |||
/* ПОКРАЩЕНА НАВІГАЦІЯ */ | |||
body.accessibility-mode #mw-head, | |||
body.accessibility-mode #p-personal, | |||
body.accessibility-mode #p-navigation, | |||
body.accessibility-mode #p-tb, | |||
body.accessibility-mode #p-lang { | |||
background-color: #f8f8f8 !important; | |||
border: 2px solid #ff6600 !important; | |||
color: #000000 !important; | |||
} | |||
body.dark-theme.accessibility-mode #mw-head, | |||
body.dark-theme.accessibility-mode #p-personal, | |||
body.dark-theme.accessibility-mode #p-navigation, | |||
body.dark-theme.accessibility-mode #p-tb, | |||
body.dark-theme.accessibility-mode #p-lang { | |||
background-color: #333333 !important; | |||
border-color: #ffff00 !important; | |||
color: #ffffff !important; | |||
} | |||
/* ЧІТКІ ПОСИЛАННЯ */ | |||
body.accessibility-mode a { | |||
color: #d40000 !important; | |||
font-weight: bold !important; | |||
text-decoration: underline !important; | |||
padding: 2px 4px !important; | |||
border-radius: 3px !important; | |||
} | |||
body.accessibility-mode a:hover, | |||
body.accessibility-mode a:focus { | |||
color: #ffffff !important; | |||
background-color: #d40000 !important; | |||
text-decoration: none !important; | |||
outline: 3px solid #ff6600 !important; | |||
} | |||
/* ВЕЛИКІ ТА ЧІТКІ КНОПКИ */ | |||
body.accessibility-mode button, | |||
body.accessibility-mode input[type="submit"], | |||
body.accessibility-mode input[type="button"] { | |||
font-size: 16px !important; | |||
padding: 14px 20px !important; | |||
border: 3px solid #000000 !important; | |||
border-radius: 8px !important; | |||
min-height: 50px !important; | |||
min-width: 120px !important; | |||
font-weight: bold !important; | |||
background-color: #1a73e8 !important; | |||
color: #ffffff !important; | |||
} | |||
body.accessibility-mode button:hover, | |||
body.accessibility-mode input[type="submit"]:hover, | |||
body.accessibility-mode input[type="button"]:hover { | |||
background-color: #d40000 !important; | |||
border-color: #d40000 !important; | |||
transform: scale(1.05) !important; | |||
} | |||
/* ПОЛЯ ВВОДУ */ | |||
body.accessibility-mode input[type="text"], | |||
body.accessibility-mode input[type="search"], | |||
body.accessibility-mode input[type="email"], | |||
body.accessibility-mode textarea, | |||
body.accessibility-mode select { | |||
font-size: 16px !important; | |||
padding: 12px !important; | |||
border: 3px solid #000000 !important; | |||
border-radius: 6px !important; | |||
min-height: 44px !important; | |||
background-color: #ffffff !important; | |||
color: #000000 !important; | |||
} | |||
/* СИЛЬНІ ФОКУСИ ДЛЯ КЛАВІАТУРНОЇ НАВІГАЦІЇ */ | |||
body.accessibility-mode *:focus { | |||
outline: 4px solid #ff6600 !important; | |||
outline-offset: 3px !important; | |||
box-shadow: 0 0 0 6px rgba(255, 102, 0, 0.3) !important; | |||
} | |||
/* АКТИВНІ ВКЛАДКИ */ | |||
body.accessibility-mode .mw-vectorTabs .mw-selected a, | |||
body.accessibility-mode #ca-nstab-main.mw-selected a, | |||
body.accessibility-mode #ca-nstab-talk.mw-selected a { | |||
background-color: #d40000 !important; | |||
color: #ffffff !important; | |||
font-weight: bold !important; | |||
font-size: 1.1em !important; | |||
border: 3px solid #ff6600 !important; | |||
} | |||
/* ТАБЛИЦІ */ | |||
body.accessibility-mode table { | |||
border: 3px solid #000000 !important; | |||
background-color: #f8f8f8 !important; | |||
} | |||
body.accessibility-mode th { | |||
background-color: #1a73e8 !important; | |||
color: #ffffff !important; | |||
font-weight: bold !important; | |||
padding: 12px !important; | |||
font-size: 1.1em !important; | |||
} | |||
body.accessibility-mode td { | |||
background-color: #ffffff !important; | |||
color: #000000 !important; | |||
padding: 10px !important; | |||
border: 2px solid #cccccc !important; | |||
} | |||
/* ЗОБРАЖЕННЯ */ | |||
body.accessibility-mode img { | |||
border: 3px solid #1a73e8 !important; | |||
border-radius: 5px !important; | |||
} | |||
body.accessibility-mode img:hover { | |||
border-color: #d40000 !important; | |||
transform: scale(1.02) !important; | |||
} | |||
/* СПИСКИ */ | |||
body.accessibility-mode ul, | |||
body.accessibility-mode ol { | |||
padding-left: 2em !important; | |||
} | |||
body.accessibility-mode li { | |||
margin-bottom: 8px !important; | |||
padding-left: 10px !important; | |||
} | |||
/* ЗАГОЛОВКИ */ | |||
body.accessibility-mode h1, | |||
body.accessibility-mode h2, | |||
body.accessibility-mode h3, | |||
body.accessibility-mode h4, | |||
body.accessibility-mode h5, | |||
body.accessibility-mode h6 { | |||
color: #d40000 !important; | |||
border-left: 5px solid #1a73e8 !important; | |||
padding-left: 15px !important; | |||
margin-bottom: 1.2em !important; | |||
} | |||
/* КОД */ | |||
body.accessibility-mode code, | |||
body.accessibility-mode pre { | |||
background-color: #f0f0f0 !important; | |||
color: #000000 !important; | |||
border: 2px solid #cccccc !important; | |||
padding: 10px !important; | |||
font-size: 1.1em !important; | |||
border-radius: 5px !important; | |||
} | |||
/* ВИДІЛЕННЯ ТЕКСТУ */ | |||
body.accessibility-mode ::selection { | |||
background-color: #ff6600 !important; | |||
color: #ffffff !important; | |||
} | |||
body.accessibility-mode ::-moz-selection { | |||
background-color: #ff6600 !important; | |||
color: #ffffff !important; | |||
} | } | ||