CSS Cookbook/uk

Це керівництво є набором корисних CSS-уривків, які можуть стати вам в пригоді.

Підручники з CSS

Фонові зображення

Якщо ви хочете змінити фонове зображення вашої вікі за допомогою CSS, не дивіться далі. Зазвичай це можна зробити за допомогою

body.mediawiki {
	/* замініть це URL-адресою зображення, яке має бути */
	background-image: url("<URL>");
	/* змінює колір тла, використовує шістнадцятковий код або назву кольору (тобто «red») */
	background-color: red;
	/* поєднує в собі два або кілька фонових зображень з різними режимами накладення, використовуйте одну з назв режиму накладання для зміни вигляду фонового зображення (приклади: «color-dodge», «screen», «multiply», «hard-light», «difference», «luminosity») */
	background-blend-mode: normal;
	/* встановіть «scroll», щоб воно могло прокручуватися разом зі сторінкою, або «fixed», щоб його положення залишалося статичним> */
	background-attachment: scroll; 
	/* встановлюється як напрямок, з якого буде починатися зображення (наприклад, «top left», «left center», «right center» тощо), відсотки (x% y%) або позиція (xpos ypos). (примітка: % та pos змішуються) */
	background-position: top left; 
	/* параметр за замовчуванням повторюватиме зображення як по вертикалі, так і по горизонталі, якщо встановити repeat-y, то воно повторюватиме зображення вертикально, якщо встановити repeat-x, то воно повторюватиме зображення лише по горизонталі, і його встановлення як no-repeat перешкоджатиме його повтору взагалі. */
	background-repeat: repeat;
}

Можливо, знадобиться деяке тонке налаштування, але це основи.

Message Wall user tags

This snippet by Caburum allows you to add a customizable "tag" to messages and forum posts by a specified user. It can be used to distinguish administrators, bureaucrats, the wiki's founder etc. It can be used for any purpose.

[class^='EntityHeader_name__'][href$="Username"]::after {
	content: " (Tag)";
	color: var(--theme-page-text-color);
}

Change Username to the username (make sure to replace any spaces with %20 or, if the name uses special characters, you can transform it in an URL Encoder and use its result) and change (Tag) to whatever you want to show after. You can type any other CSS rules to customize the appearance of the tag. The above example, in addition to adding the tag, makes the text color the same color as other text, but this can be changed.

Використання CSS

Фандом має декілька специфічних вбудованих класів.

• .ns
  • Клас конкретного простору назв
  • Ця сторінка має клас .ns-0

/* Зміна кольору тексту в просторі назв «Користувач» */
.ns-2 {
	color: black;
}

• .theme-fandomdesktop-light and .theme-fandomdesktop-dark
  • Клас автоматично додається на вікі з темною темою

/* Змінює колір посилання на темних вікі, але не на світлих */
.theme-fandomdesktop-dark a {
	color: white;
}

• .page
  • Спеціальний клас сторінки
  • Ця сторінка має клас .page-CSS_Cookbook

/* Додає стиль на певну сторінку */
.page-CSS_Cookbook h2 {
	font-weight: bold;
}

• .wiki
  • Клас окремої вікі
  • Ця вікі має клас .wiki-dev

/* Додати стиль тільки для Dev Wiki */
.wiki-dev .portable-infobox {
	padding: 1px;
}

Удосконалення вікі

Image styling

This CSS manipulates the appearance of a specific image on your wiki, use this CSS snippet below, replacing Filename.ext with an image on your wiki (for example: Example.jpg):

img[src*="Filename.ext"] {
	/* Apply filters to manipulate image color */
	filter: none;
	/* Combines color with the site background, and the image. (supported blend modes include "color", "color-burn", "color-dodge", "darken", "difference", "exclusion", "hue", "lighten", "luminosity", "multiply", "normal", "overlay", "plus-lighter", "saturation", "screen", and "soft-light" */
	mix-blend-mode: multiply;
	/* Set the opacity, to make the image opaque, or transparent. */
	opacity: 1;
	/* More CSS attributes */
}

/* Prevent effects from being used on file history, especially when hovering image on it's file page to enable viewing original images, incase vandalized. */
.filehistory img {
	filter: revert !important;
	mix-blend-mode: revert !important;
	opacity: revert !important;
	/* More CSS attributes */
}

#file img:hover {
	filter: revert !important;
	mix-blend-mode: revert !important;
	opacity: revert !important;
	/* More CSS attributes */
}

To apply CSS image manipulation for light and dark skins, place .theme-fandomdesktop- (for desktop), and .theme-fandommobile- (for mobile), with the class suffix light or dark before img.

Налаштування затемнення

Щоб налаштувати затемнення, яке з'являється при перегляді зображення у лайтбоксах, використовуйте наступний уривок CSS:

.blackout {
	background: #84dcff;
	mix-blend-mode: overlay;
}

Змініть колір фону #84dcff на потрібний колір та тип накладання overlay на потрібний режим змішування.

Gallery styling

This CSS snippet by ValleyMaster will change the default appearance of galleries.

/* Alters the whole gallery */
.wikia-gallery {
	/* CSS Attributes */
}

/* Alters each gallery item */
.wikia-gallery-item {
	text-align: center;
	padding: 0px;
	margin: 5px;
	background-color: rgba(0,0,0,0.1);
	border-radius: 1em;
	/* More CSS Attributes */
}

/* Removes the default border of the images */
.wikia-gallery-item .thumb .gallery-image-wrapper {
	border-style: none;
}

If you want a custom image border, remove border-style: none and replace it with border: _px solid color.
You may also apply a border-radius if you'd like, and this works even with border-style: none active.

/* Changes the default position of the images to center */
.wikia-gallery-position-left {
	text-align: center;
}

/* Alters the caption of the images */
.theme-fandomdesktop-dark .lightbox-caption {
	border-top: 1px solid #4d4d4d;
	border-bottom: 1px solid #4d4d4d;
	/* More CSS Attributes */
}

.theme-fandomdesktop-light .lightbox-caption {
	border-top: 1px solid #cecece;
	border-bottom: 1px solid #cecece;
	/* More CSS Attributes */
}

Expand/Collapse toggle button design

This CSS snippet will allow you to design the expand/collapse toggle button.

/* Alters the appearance of the toggle button. */
.mw-collapsible-text {
	/* CSS Attributes */
}

/* Removes the default square brackets (for design purposes) — from MediaWiki. */
.mw-collapsible-toggle-default:before, .mw-collapsible-toggle-default:after {
	display: none;
}

/* Changes the default position of the toggle button to left instead of right. — from MediaWiki. */
.mw-collapsible span.mw-collapsible-toggle {
	float: none;
	margin-left: 0;
	margin-right: 1em;
}

Sometimes, the toggle button may not be better on the left side. This CSS snippet by ValleyMaster will allow you to change the position back to right.

.float-right .mw-collapsible span.mw-collapsible-toggle {
	float: right;
}

To apply this, close the tag with mw-collapsible with <div class="float-right"></div>.
For example:

<div class="float-right">
<div class="mw-collapsible mw-collapsed">
text 1
<div class="mw-collapsible-content">
text 2
</div>
</div>

Table example:

<div class="float-right">
{| class="wikitable mw-collapsible mw-collapsed"
!Text 1
|-
|Text 2
|}
</div>

Заголовок у блочному стилі

Цей фрагмент CSS від JustLeafy робить заголовок сторінки схожим на стиль блоку з однотонним кольором фону. Він опосередковано повертає стиль заголовка в стилі Oasis.

.fandom-community-header {
	background: var(--theme-accent-color);
	color: var(--theme-accent-label-color);
	padding: 15px 20px 5px 20px;
}

.page {
	margin-top: 0;
}

Стиснуті спадні меню заголовка

Цей фрагмент CSS від JustLeafy робить стиль спадних меню заголовка сторінки більш стислим.

.fandom-community-header__local-navigation .wds-dropdown__content {
	padding: 0 !important;
}

.fandom-community-header__local-navigation .wds-dropdown__content .wds-list.wds-is-linked > li {
	padding: 0 6px !important;
}

Wiki-themed scrollbar

This CSS snippet by Headquarter8302 styles the wiki's scrollbar with the current theme that is being applied, regardless of color and theme selection (light or dark). The snippet uses the relatively new scrollbar-color property introduced in the CSS Scrollbars Styling Module Level 1 spec.

:root {
  scrollbar-color: var(--theme-accent-color) var(--theme-accent-color--hover);
}

Налаштування висоти лінії

Налаштування висоти рядка корисно для індійських скриптів, таких як деванагарі, бенгальська, каннада, одія тощо, завдяки матрам (наприклад, ि, ी, ु і ू), які витікають із рядків у певних місцях і роблять його неохайним. Рекомендується, щоб усі вікі на згаданих мовах використовували це:

.wds-community-header__sitename,
.fandom-community-header a,
#content h2,
#content h3,
#content h4 {
	line-height: 1.5;
}

Налаштування посилання

Цей фрагмент CSS створено Cleverduck09, щоб налаштувати, як виглядають посилання на всю вікі під час наведення курсора, після того, як вони були відвідані, а також якщо вони не були відвідані або наведені курсором, введіть наступний код:

/* Як виглядає посилання, якщо ви не клацнули/навели курсор на нього */
a:link {
	color: КОД;
	background-color: КОД;
	text-decoration: КОД;
	text-shadow: КОД;
	/* More CSS Attributes */
}

/* Як виглядає посилання, коли ви його відвідали */
a:visited {
	color: КОД;
	background-color: КОД;
	text-decoration: КОД;
	text-shadow: КОД;
	/* More CSS Attributes */
}

/* Як виглядає посилання, коли ви наводите на нього курсор */
a:hover { 
	color: КОД;
	background-color: КОД;
	text-decoration: КОД;
	text-shadow: КОД;
	/* More CSS Attributes */
}

/* Як виглядає посилання, коли ви натискаєте його */
a:active { 
	color: КОД;
	background-color: КОД;
	text-decoration: КОД;
	text-shadow: КОД;
	/* More CSS Attributes */
}

Фон профілю

Якщо ви хочете вставити фонове зображення, яке охоплює всі профілі користувачів, ви можете використовувати:

#userProfileApp {
	/* вставити URL-адресу до фонового зображення профілю */
	background-image: url("<URL>");
}

Примітка: Додайте background-repeat: no-repeat;, якщо ви додали ширше зображення. Вони можуть не підходити і призвести до повторюваного фону.

Print/PDF sanitisation

This stylesheet by Headquarter8302 distills the print/PDF output to a more print and PDF friendly format by removing most if not all Fandom elements and only leaving the Infoboxes and the content articles, while also making a lot of the page content much more legible. If you have found some elements that should be removed or if you want this to be turned into a fully-maintained stylesheet, please harass Markus (the author of this snippet).

Remember to put this inside MediaWiki:Print.css, and not your Common.css.

:root {
	--pi-border-color: black !important;
}

.fandom-sticky-header,
.global-navigation,
#mixed-content-footer,
.bottom-ads-container,
.top-ads-container,
.global-footer,
div[class^="InlineEntityFormWrapper_inline-entity-form-wrapper"],
#WikiaBar,
.page-side-tools__wrapper,
.page-header__actions,
.page__right-rail,
.community-header-wrapper,
.mw-editsection,
.page-footer__categories .wds-icon.wds-icon-small,
div[class^="Filters_article-comments-filters"],
#mw-data-after-content {
	display: none !important;
}

:not(pre > *),
:not(.mw-highlight > *) {
	background: white !important;
	color: black !important;
}

.main-container, .resizable-container {
	max-width: none;
	width: 100%;
	margin: 0;
}

Налаштування смуги прокрутки

Якщо ви хочете налаштувати смугу прокрутки на вашій вікі, ви можете використовувати ці CSS-селектори, щоб застосувати до неї різні властивості:

/* Ширина смуги прокрутки 8 пікселів */
::-webkit-scrollbar {
	width: 8px;
}

/* Робить тло смуги прокрутки чорним */
::-webkit-scrollbar-track {
	background: black;
}

/* Робить панель смуги прокрутки зеленим */
::-webkit-scrollbar-thumb {
	background: #228B22;
}

/* Робить фон панелі смуги прокрутки темнішим відтінком зеленого, коли на нього наведено курсор */
::-webkit-scrollbar-thumb:hover {
	background: #222;
}

Примітка: Налаштування смуги прокрутки підтримується лише в браузерах на основі WebKit, як-от Chrome, Safari та Opera. Однак користувачі Firefox можуть натомість використовувати інші властивості, такі як scrollbar-width і scrollbar-color.

• scrollbar-width: Змінює ширину смуги прокрутки. Зауважте, що значення цієї властивості не вимірюється в пікселях, тому, наприклад, щоб зробити його тонким, замість того, щоб зробити його кілька пікселів, значення має бути «thin».
• scrollbar-color: Змінює кольори смуги прокрутки. Зауважте, що в цій властивості є два значення кольору: перше значення кольору застосовується до самої смуги прокрутки, а друге значення кольору застосовується до фону смуги прокрутки. Колір смуги прокрутки в стані наведення курсора/активного/фокусу налаштовується автоматично.

/* Змініть усі смуги прокрутки, використовуючи властивості, які підтримуються для браузерів Firefox */
* {
	scrollbar-color: #888 transparent;
	scrollbar-width: thin;
}

Виділення імені користувача

Цей уривок CSS виділяє посилання на сторінку користувача, стіну повідомлень, внесок та список блогів:

a[href$=":Admin's_Username"],
a[href$="/Admin's_Username"] {
	/* змінює колір імені користувача */
	color: #006600 !important;
	/* робить ім'я користувача напівжирним */
	font-weight: bold !important;
	/* змінює шрифт імені користувача */
	font-family: Arial !important;
	/* More CSS Attributes */
}

Змініть Admin's_Username на ім’я користувача адміністратора, якого ви збираєтеся виділити, #006600 на передбачуваний колір виділення та Arial на призначений шрифт для родзинки. Ви також можете видалити певні розділи, якщо вони вам не потрібні у виділенні.

Примітка: Для імен користувачів із пробілами стіни обговорень кодують пробіли за допомогою %20, тоді як частина MediaWiki кодує пробіли символами підкреслення. Отже, щоб виділити обидві, обидві версії мають бути включені в правило CSS. Наприклад:

a[href$=":Admin's_Username"],
a[href$="/Admin's_Username"],
a[href$=":Admin's%20Username"],
a[href$="/Admin's%20Username"]	{
	/* CSS Attributes */
}

Якщо в імені користувача є інші спеціальні символи (наприклад, і або ' ), вони також потребують відповідного кодування.

Змінити стиль контуру

Цей незначний плагін CSS налаштовує стиль контуру. Контур означає синю рамку, яка з’являється під час переміщення вкладок (за допомогою ↹ Tab для навігації сторінкою). Це стиль, який не слід плутати з border. Контур — це лінія, яка намальована навколо елементів (за межами), щоб елемент «виділився». Ось список властивостей контуру та їх визначення.

• outline-color — Встановлює колір контуру. (наприклад, червоний контур).
• outline-style — Встановлює стиль контуру. (наприклад dotted, dashed, solid тощо.)
• outline-width — Встановлює ширину контуру. (наприклад 3-піксельний контур)
• outline-offset — Встановлює проміжок між контуром і краєм або межею елемента. (наприклад Контур зі зміщенням 3 пікселі)

a:focus {
	/* Sets the color of the outline */
	outline-color: green;
	/* Sets the amount of space between an outline and the edge or border of an element */
	outline-offset: 1px;
	/* Sets the style of the outline (e.g. dotted, dashed, solid etc.) */
	outline-style: solid;
	/* Sets the width of the outline */
	outline-width: 2px;
}

Note: Do not remove that outline as it is vital for making your wiki accessible to users who only use their keyboards.

Закруглені кути на Special:Community

Цей фрагмент від Louky заокруглює кути модулів Community Page:

.community-page-card-module-header, .community-page-card-module {
	border-radius: 40px 40px / 40px 40px;
}

Піксельні зображення

Цей фрагмент від Rail гарантує, що піксельні зображення з низькою роздільною здатністю відображаються без згладжування, застосованого службою обробки зображень Фандому.

.mw-parser-output img {
	-ms-interpolation-mode: nearest-neighbor;
	image-rendering: -moz-crisp-edges;
	image-rendering: -o-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
}

Зменшений рух

Цей фрагмент CSS зробить тривалість усіх анімацій та переходів CSS за такий короткий час, що вони більше не будуть помітні, зберігаючи при цьому його функціональність на випадок, якщо є сценарії, які залежать від анімації та/або переходів до роботи. Це може бути корисно для людей, які не люблять анімацію, мають порушення вестибулярного спектру, викликані рухом, або хочуть покращити продуктивність сторінки. Код набуде чинності, лише якщо користувач має налаштування prefers-reduced-motion у своїй системі встановлено значення true. Фрагмент із web.dev.

@media (prefers-reduced-motion: reduce) {
	*, ::before, ::after {
		animation-delay: -1ms !important;
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		background-attachment: initial !important;
		scroll-behavior: auto !important;
		transition-duration: 0s !important;
		transition-delay: 0s !important;
	}
}

Ви також можете видалити медіа-запит, щоб застосувати його до вікі, незалежно від уподобань користувача.

Доступні кнопки навігації

Дозволяє навігацію за посиланнями на панелях навігації здійснювати з клавіатури (настійно рекомендується впроваджувати разом із JumpToContent, оскільки це може значно збільшити кількість посилань, за якими користувачам клавіатури доведеться переходити на кожній сторінці, перш ніж перейти до її вмісту).

.wds-dropdown:not(.wds-is-touch-device):not(.wds-is-not-hoverable):is(:hover, :focus, :focus-within) .wds-dropdown__content,
.fandom-community-header__local-navigation .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-nested:not(.wds-is-touch-device):is(:hover, :focus, :focus-within) > .wds-dropdown-level-nested__content {
	display: block;
}

Редагування розділів

Приховані розділи редагування

Цей фрагмент CSS від Александр III приховує всі посилання для редагування поруч із заголовками розділів.

.mw-editsection {
	display: none;
}

Змінити піктограму для редагування розділів

Цей фрагмент CSS від Laclale та KockaAdmiralac змінює піктограму для всіх посилань редагування поруч із заголовками розділів. Ви можете змінити URL-адресу, яка посилає на зображення.

.section-edit-pencil-icon, .mw-editsection .wds-icon {
	background: url('https://vignette.wikia.nocookie.net/ocraviutl/images/1/13/EditVester.png/revision/latest?path-prefix=ja') no-repeat;
}
.section-edit-pencil-icon use, .mw-editsection .wds-icon use {
	opacity: 0;
}

Прозорі удари

Цей фрагмент CSS від Leslie1289 робить <s> і пов’язані елементи напівпрозорими. Приклад.

strike, s, del {
	opacity: 0.5;
}

Напівпрозорий фон сторінки

Фон області вмісту наразі непрозорий, тобто фонове зображення вікі за ним не видно. Щоб зробити фон напівпрозорим, зберігаючи колір, вибраний за допомогою Конструктора тем, використовуйте:

.page__main {
	background-color: rgba(var(--theme-page-background-color--rgb), 0.96);
}

Значення 0,96 є непрозорістю, і його можна збільшити або зменшити, але не рекомендується занадто знижувати його, оскільки фонове зображення може ускладнити читання тексту.

Наведений вище код залишить праву направляючу та нижню подачу вентилятора непрозорими. Щоб зробити їх також напівпрозорими, замість них можна використовувати наступну розширену версію:

.page__main,
.page__right-rail,
#mixed-content-footer {
	background-color: rgba(var(--theme-page-background-color--rgb), 0.96);
}

.page__right-rail .rail-module {
	background: transparent;
}

Залипання рядка пошуку на Special:Search

Цей простий фрагмент від User:SuperDragonXD1 створює панель пошуку поряд із пов’язаними вікі та бічній панеллю фільтрів на Special:Search та Special:SearchCommunity.

/* Пошукові рядки липкі */
.mw-special-Search form.unified-search__form, .mw-special-SearchCommunity form.unified-search__form {
	position: sticky;
	top: 42px;
	z-index: 1;
}

/* Вкладки зліва липкі */
.mw-special-Search .unified-search__layout__left-rail {
	position: sticky;
	top: 100px;
	align-self: flex-start;
}

/* Пов’язаний розділ спільноти залишається липким */
.mw-special-Search .unified-search__layout__right-rail {
	position: sticky;
	top: 85px;
	align-self: flex-start;
}

/* Загальне правило */
.mw-special-Search div#content, .mw-special-SearchCommunity div#content {
	overflow: unset;
}

/* Запобігайте перекриванню рядка пошуку, якщо є більше налаштувань CSS */
.mw-special-SearchCommunity .unified-search__result {
	margin: 8px;
}

Тільки FAB TOC

Цей фрагмент CSS встановлює золоту середину між показом усього змісту (TOC) і не показом жодного з них, приховуючи зміст у статті, але зберігаючи той, що знаходиться на кнопці плаваючої дії (FAB) у верхньому лівому куті сторінки ( або вгорі праворуч, якщо ви використовуєте мобільний телефон). Доступ до змісту внутрішньої сторінки все ще можна отримати за допомогою навігації з клавіатури.

#toc:not(:focus-within) {
	clip: rect(1px, 1px, 1px, 1px);
	overflow: hidden;
	position: absolute;
}

Кнопка перемикання рейок як FAB

Кнопка перемикання рейок не прокручується разом із вами, як кнопки з лівого боку, тому вам доведеться прокручувати сторінку вгору, щоб перемкнути бічну панель, тому цей персональний фрагмент CSS надає конкретну інформацію. Кнопка має такий же стиль, як і інші плаваючі кнопки дій (FAB), щоб вона слідувала за вами під час прокручування.

/* Додає стиль FAB до кнопки перемикання рейок */
.page__right-rail > .right-rail-toggle {
	-webkit-box-pack: center;
	-webkit-box-align: center;
	align-items: center;
	background: var(--theme-page-background-color);
	border: none;
	border-radius: 50%;
	-webkit-box-shadow: 0 3px 12px 0 rgb(0 0 0 / 30%);
	box-shadow: 0 3px 12px 0 rgb(0 0 0 / 30%);
	color: var(--theme-link-color);
	cursor: pointer;
	display: -webkit-box;
	display: flex;
	height: 36px;
	justify-content: center;
	margin-bottom: 9px;
	margin-top: 18px;
	outline: none;
	padding: 0;
	position: sticky;
	top: 58px;
	-webkit-transition: color .3s;
	transition: color .3s;
	width: 36px;
}

.page__right-rail > .right-rail-toggle:focus-visible {
	outline: 2px solid var(--theme-link-color);
}

.page__right-rail > .right-rail-toggle:hover,
.page__right-rail > .right-rail-toggle:focus {
	color: var(--theme-link-color--hover);
}

.page__right-rail > .right-rail-toggle {
	float: right;
	transform: translateX(18px);
}

/* Restores rail's original position and width */
.right-rail-wrapper {
	transform: translateY(-63px);
	width: 100%;
}

Кольори теми HTML

Цей фрагмент встановлює колір акценту для елементів керування користувальницького інтерфейсу, створених деякими елементами HTML за замовчуванням, а також смугою прокрутки. Зауважте, що accent-color ввімкнено за замовчуванням лише в останніх версіях браузера, а color-scheme має ширшу підтримку браузера.

У наведеному нижче фрагменті передбачається, що ваша вікі має світлу тему за замовчуванням, але ви можете інвертувати значення color-scheme на dark light, якщо ваша вікі має темну тему за замовчуванням, і ви також можете змінити клас .theme-fandomdesktop-dark на .theme-fandomdesktop-light, щоб правильно оновити колірну схему для світлої теми.

/* Невизначена/світла тема */
:root {
	accent-color: var(--theme-link-color);
	color-scheme: light dark;
}

/* Темна тема */
.theme-fandomdesktop-dark {
	accent-color: var(--theme-link-color);
	color-scheme: dark light;
}

Sticky table headers

You can make table header cells follow your screen so users can permanently see what each column is about. To do so, you use the following CSS:

/* Allows sticky elements to work inside the page's content. */
#content {
	overflow: initial;
}

Then you can make header cells sticky. Here we will show two methods: one that only checks for the table class nd other that checks for each cell's class.

/* Method 1: check for table's class. All header cells of that table will be sticky. */
table.sticky-header th {
	position: sticky;
	top: 45px;
}

/* Method 2: check only for table header cells with the "sticky-header" class. */
table th.sticky-header {
	position: sticky;
	top: 45px;
}

Align mobile footer

The following snippet aligns the footer section in mobile to not obstruct any elements above as it can clash with interactive maps and navboxes.

Note: This snippet should only be added either to your personal CSS, or to your local FandomMobile.css. It won't work if it's added elsewhere, or if mobile CSS hasn't been enabled for your community.

.article-footer {
	transform: unset;
}

.article-footer-item, .article-information-header, .wds-font-size-base {
	transform: unset;
}

Remove mobile main page elements

The following snippet comes from Sky Children of the Light Wiki, in which it removes elements from the native main page in mobile in order to have the wiki's main page to only show at the top.

Note: This snippet should only be added either to your personal CSS, or to your local FandomMobile.css. It won't work if it's added elsewhere.

.mobile-main-page__wiki-description {
	display: none;
}

.mobile-main-page__trending-articles {
	display: none;
}

.mobile-main-page__popular-categories {
	display: none;
}

.mobile-main-page .mobile-hidden {
	display: block;
}

Користувацькі налаштування

WikiEditor Syntaxhighlight Extensions

Personal CSS only: This CSS extension pack by Suggon adds a few visual fixes and syntaxhighlight features into the 2010 wikitext editor; some being inspired by VSCode.

• Enable editor overscrolling
• Fix occasional "disappearance" of text cursor
• Line highlight on mouse hover
• Comprehensible matching-brackets
• Outline for lines with matching-bracket
• Left border for lines between matching-brackets — handy for debugging nested parser functions

.CodeMirror {
	caret-color: var(--theme-page-text-color);
}
.CodeMirror * {
	transition-property: background-color, box-shadow, filter;
	transition-duration: 0.2s;
}
.cm-mw-matchingbracket {
	background-color: transparent !important;
	box-shadow: 0 0 0 0.5px rgba(128,128,128,.5) !important;
	filter: brightness(2);
	.theme-fandomdesktop-light & {
		box-shadow: 0 0 0 0.5px rgba(0,0,0,.5) !important;
	}
}
.CodeMirror-line:hover {
	background-color: rgba(128,128,128,.1) !important;
}
.CodeMirror-line:has(.cm-mw-matchingbracket) {
	box-shadow: inset 0 0 0 2px rgba(128,128,128,.2);
}
.CodeMirror-code div:last-child {
	height: 50vh;
}
.CodeMirror-code div:has(.cm-mw-matchingbracket), .CodeMirror-code div:has(.cm-mw-matchingbracket) ~ div {
	box-shadow: -1px 0 #0af;
}
.CodeMirror-code div:has(:nth-child(2 of .cm-mw-matchingbracket)) ~ div, .CodeMirror-code div:nth-child(2 of :has(.cm-mw-matchingbracket)) ~ div {
	box-shadow: none;
}
.CodeMirror-gutters {
	margin-left: -0.5px;
}

Видалити підказку пошуку

Лише персональний CSS: Це дуже просте налаштування користувача, яке видаляє жовту підказку, яка вказує на параметри пошуку окремого виділеного тексту.

#highlight__main-container {
	display: none;
}

Налаштування курсору

Якщо ви хочете змінити значок, який відображатиметься як курсор, ви можете використовувати:

/* This cursor icon will be displayed normally */
html {
	/* вставте URL значка курсора */
	cursor: url("<URL>"), default;
}

/* This cursor icon will be displayed when hovering or clicking on links */
a:hover, a:active {
	/* вставте URL значка курсора */
	cursor: url("<URL>"), pointer;
}

Визначення шаблону імені користувача

Цей уривок CSS від користувача TheGoldenPatrik1 встановлює бордер навколо шаблону {{USERNAME}}, аби запобігти обдурюванню користувачів:

.insertusername,
.inputusername,
.InsertUsername,
.InputUsername {
	border: 1px solid;
	padding: 0.5px;
}

Виправити кнопку «Позначити все як прочитане».

Цей лише особистий фрагмент CSS від Headquarter8302 вирішує проблему, через яку плаваюча панель навігації вікі покриває верхню частину спливаючого вікна сповіщень і таким чином покриває кнопку «Позначити все як прочитане». Фрагмент нижче змінює z-індекс спливаючого вікна сповіщень і заголовка:

.fandom-sticky-header.is-visible {
	z-index: 499;
}

.notifications header[class*="NotificationsDropdown-module_contentHeader"] {
	z-index: 500;
}

Примусово встановити курсор за замовчуванням

Цей лише особистий фрагмент CSS змушує всі курсори стати за замовчуванням. Це означає, що спеціальні вікікурсори будуть відновлені до стандартних. Він також замінює курсор руки при наведенні курсора на посилання курсором за замовчуванням.

body,
* {
	cursor: default !important;
}

a:hover {
	cursor: pointer !important;
}

Приховати категорії головної сторінки

Цей лише особистий фрагмент CSS від JustLeafy та KockaAdmiralac запобігає відображенню нижньої панелі категорій на головній сторінці:

.mainpage .article-categories, .mainpage .page-footer__categories {
	display: none;
}

Приховати заголовок головної сторінки

Цей лише особистий фрагмент CSS від DiegoFire Network та KockaAdmiralac видаляє заголовок головної сторінки вікі.

.mainpage .WikiaPage .page-header__title,
.mainpage .WikiaPage .page-header__separator,
.mainpage #firstHeading {
	display: none;
}

Hide global sidebar

This personal-only CSS snippet by Headquarter8302 removes the global sidebar and allowing a larger view of the content page. If you'd like to completely remove the margins present on the main container, consider using MinutelyWider.

.global-explore-navigation#global-explore-navigation { display: none }

.main-container {
  margin-left: 0;
  width: initial
}

Мінімізований PPH

Цей лише особистий фрагмент CSS від KurwaAntics мінімізує новий заголовок статті Фандому, видаляючи список категорій та кнопку спадного меню мови у верхній частині заголовка та зменшуючи розмір шрифту назви статті:

.page-header__categories,
.page-header__languages {
	display: none;
}
.page-header__title {
	font-size: 34px;
}

Попередній дизайн кнопки WDS

Цей незначний плагін CSS від JustLeafy робить кнопки схожими на попередній стиль до того, як вони мали закруглені кути та більший розмір шрифту.

.wds-button {
	padding: 7px 12px;
	font-size: 10px;
	border-radius: 0 !important;
}

Ретро-редактор ACE 2010

Цей фрагмент CSS від Headquarter8302 робить текст редактора ACE 2010 мати сяючий текстовий ефект, схожий на ретро-налаштування терміналу Windows.

.ace_line {
	text-shadow: 0 0 5px currentColor;
}

Налаштування вибору

Цей фрагмент CSS від JustLeafy робить колір фону виділення напівпрозорим.

::selection {
	background: rgba(120,120,120,0.5);
}

Плавне завантаження сторінки

Example of the Smooth Page Load

Цей лише особистий код CSS від Cleverduck09 створює коротку анімацію зникнення на сторінках вікі.

@keyframes pageload {
	from { opacity: 0; }
	to { opacity: 100; }
}
body,
.Message__content,
.wds-dropdown,
.wds-tabs__tab,
.wds-dropdown__toggle,
.client-js {
	animation-name: pageload;
	animation-duration: 0.4s;
	animation-iteration-count: 1;
	animation-delay: 0s;
}

Змінити виділення відмінностей

Цей фрагмент CSS від RyaNayR додає червону межу контуру для зміни колірної схеми виділення. Імовірно, це значно підвищить видимість невеликих змін, що містять один символ, а також залишиться приємним для очей на більших відмінностях, коли хтось із вашої вікі переглядає відмінності редагування.

.diffchange {
	border: 1px solid #f00;
}

Видалити фан-стрічку

Це простий фрагмент CSS, який видаляє стрічку шанувальників, яка розташована внизу головної сторінки, сторінок статей і сторінок файлів.

#mixed-content-footer {
	display: none;
}

Колір каре

Caret color — це проста таблиця стилів, яка надає каретці (або курсору текстового індикатора) інший колір. Наразі каретку можна розфарбувати лише за допомогою caret-color, але ширину та інші властивості ще не можна налаштувати, оскільки ці властивості ще не існують. Цей незначний плагін CSS вплине на курсор у всіх текстових областях. Зверніть увагу, що колір каретки тут червоний, але його точно можна змінити на інший колір.

textarea {
	caret-color: red;
}

Приховати сповіщення про прочитані канали/сповіщення

Цей фрагмент CSS, доданий Andrewds1021 та KockaAdmiralac, приховує сповіщення про прочитання у спадному меню «Канали/Оголошення» (значок дзвіночка в заголовку глобальної навігації). Він також переробляє, як горизонтальні правила додаються між сповіщеннями, щоб за останнім непрочитаним сповіщенням не супроводжувалося стороннє горизонтальне правило. Це лише для особистого використання.

/* Приховування сповіщень про прочитання */
#notificationContainer .wds-notification-card:not(.wds-is-unread), .notifications li:not([class*="isUnread"]) {
	display: none;
}

/* Переробка горизонтальних правил */
#notificationContainer.wds-has-lines-between > li {
	border-bottom: 0;
	border-top: 1px solid #bed1cf;
}
 
#notificationContainer.wds-has-lines-between > li:first-child {
	border-top: 0;
}

Великі мініатюри в динамічних категоріях

Цей фрагмент CSS від HumansCanWinElves і частково на основі власної таблиці стилів Фандому перетворює всі записи на сторінках категорій, щоб вони виглядали як «Популярні сторінки» вгорі — чотири стовпці з великими мініатюрами. Це працює для користувачів, які використовують режим перегляду «Динамічні категорії» за замовчуванням.

Зображення виглядають дещо розмитими, оскільки це мініатюри з низькою роздільною здатністю, збільшені за допомогою CSS.

Записи без зображення відображатимуть логотип Фандому, і його можна замінити, змінивши URL-адресу в середині коду. У цьому випадку зазвичай вам також потрібно змінити визначення розміру «80%» на «100%».

.ns-14 #content .category-page__members.category-page__members {
	column-count: 1;
}

.ns-14 #content .category-page__members-for-char {
	display: -ms-inline-flexbox;
	display: grid;
	-ms-flex-wrap: wrap;
	grid-gap: 20px;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	margin-left: 0;
}

.ns-14 #content .category-page__member {
	flex-direction: column;
}

.ns-14 #content .category-page__member-left {
	width: 160px;
	height: 120px;
	background: url(https://static.wikia.nocookie.net/740bff54-a89f-4c0a-97a1-a97c6b1a77a7) no-repeat center center/auto 80%;
	border: 1px solid;
	justify-content: flex-start;
}

.ns-14 #content .category-page__member-thumbnail {
	width: 160px;
	height: 120px;
	border: none;
}

.ns-14 #content .category-page__member-link {
	text-align: center;
}

Приховати спадну навігацію

Цей короткий лише особистий фрагмент від BlindCartographer зупиняє відображення приклеєної верхньої навігації.

.fandom-sticky-header {
	display: none !important;
}