SCP-5400-J - Ця сторінка засекречена
SCP-5400-J - Ця сторінка засекречена
Створена: Lt FlopsLt Flops, перекладена DrKhmelnytskyDrKhmelnytsky
Опублікована 23 травня 2020, на цій вікі — 22 Nov 2023 00:09
рейтинг: +8+–x

Що це таке

Це купа різноманітних «покращень» CSS, які я, CroquemboucheCroquembouche, використовую на купі сторінок, бо думаю, що це полегшує роботу з ними.

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

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

Цей компонент, ймовірно, не конфліктуватиме з іншими компонентами чи темами, і навіть якщо конфліктуватиме, це, ймовірно, не матиме великого значення.

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

На інших вікі:

[[include :scp-ukrainian:component:croqstyle]]

Цей компонент призначений для використання з іншими компонентами. Під час використання в коді іншого компоненту будьте впевнені, що компонент додано всередину блока [[iftags]], щоб користувачі вашого компонента не були змушені також використовувати Croqstyle.

Пов'язані компоненти

Інші власні компоненти стилів (які теж змінюють багато речей):

Особисті теми стилю (які є візуальними змінами):

Зміни CSS

Виноски розумного розміру

Виноски не мають ширини в мільйон миль, щоб ви могли їх прочитати.

.hovertip { max-width: 400px; }

Моноширинне поле редагування та код

Робить текстове поле редагування моноширинним, а також змінює весь моноширинний текст на шрифт Fira Code, явно кращий серед моноширинних шрифтів.

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
 
:root { --mono-font: "Fira Code", Cousine, monospace; }
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); }
.code pre * { white-space: pre; }
.code *, .pre * { font-feature-settings: unset; }

Фони телетайпу

Додає світло-сірий фон до елементів <tt> ({{text}}), тому фрагменти коду виділяються більше.

tt {
  background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4);
  font-size: 85%;
  padding: 0.2em 0.4em;
  margin: 0;
  border-radius: 6px;
}

Геть занадто великі аватари

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

.avatar-hover { display: none !important; }

Розриви та бавовна

Будь-який текст усередині div із класом nobreak може бути розірваний у будь-якому місці.

.nobreak { word-break: break-all; }

Кольори коду

Слід додати кольори для терміналу у якості змінних. Можливо, колись я зміню це на більш поширену тему терміналу, як-от Monokai або щось подібне, але поки що це лише моя особиста тема, яка походить від Tomorrow Night Eighties.

Також, додайте клас .terminal до фейкового кодового блоку таким чином: [[div class="code terminal"]]. Це надає вигляд, схожий на термінал, з темним фоном. Але це не працює з [[code]], тому що Wikidot вставляє купу підсвічувань синтаксису, яку ви не можете змінити самостійно без купи CSS. Використовуйте його лише для фрагментів коду, які не належать до [[code]].

Швидкий інструмент для розфарбовування «стандартного» прикладу використання цього компонента Wikidot за допомогою наведених вище змінних: посилання

:root {
  --c-bg: #393939;
  --c-syntax: #e0e0e0;
  --c-comment: #999999;
  --c-error: #f2777a;
  --c-value: #f99157;
  --c-symbol: #ffcc66;
  --c-string: #99cc99;
  --c-operator: #66cccc;
  --c-builtin: #70a7df;
  --c-keyword: #cc99cc;
}
 
.terminal, .terminal > .code {
  color: var(--c-syntax);
  background: var(--c-bg);
  border: 0.4rem solid var(--c-comment);
  border-radius: 1rem;
}

Режим налагодження

Намалюйте лінії навколо будь-чого всередині .debug-mode. Колір ліній червоний, але може бути зміненим за допомогою змінної CSS --debug-colour.

Ви також можете додати div.debug-info.over і div.debug-info.under всередину елемента, щоб анотувати вікна налагодження. Хоча вам потрібно переконатися, що залишилося достатньо вертикального простору щоб анотація не перекривала те, що знаходиться вище чи нижче.

…на кшталт цього!

.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after {
  outline: 1px solid var(--debug-colour, red);
  position: relative;
}
.debug-info {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Fira Code', monospace;
  font-size: 1rem;
  white-space: nowrap;
}
.debug-info.over { top: -2.5rem; }
.debug-info.under { bottom: -2.5rem; }
.debug-info p { margin: 0; }
/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */
 
#top-bar .open-menu a {
        position: fixed;
        top: 0.5em;
        left: 0.5em;
        z-index: 5;
        font-family: 'Nanum Gothic', san-serif;
        font-size: 30px;
        font-weight: 700;
        width: 30px;
        height: 30px;
        line-height: 0.9em;
        text-align: center;
        border: 0.2em solid #888;
        background-color: #fff;
        border-radius: 3em;
        color: #888;
}
 
@media (min-width: 768px) {
 
    #top-bar .mobile-top-bar {
        display: block;
    }
 
    #top-bar .mobile-top-bar li {
        display: none;
    }
 
    #main-content {
        max-width: 708px;
        margin: 0 auto;
        padding: 0;
        transition: max-width 0.2s ease-in-out;
    }
 
    #side-bar {
        display: block;
        position: fixed;
        top: 0;
        left: -20em;
        width: 17.75em;
        height: 100%;
        margin: 0;
        overflow-y: auto;
        z-index: 10;
        padding: 1em 1em 0 1em;
        background-color: rgba(0,0,0,0.1);
        transition: left 0.4s ease-in-out;
 
        scrollbar-width: thin;
    }
 
    #side-bar:target {
        left: 0;
    }
    #side-bar:focus-within:not(:target) {
        left: 0;
    }
 
    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        margin-left: 19.75em;
        opacity: 0;
        z-index: -1;
        visibility: visible;
    }
    #side-bar:not(:target) .close-menu { display: none; }
 
    #top-bar .open-menu a:hover {
        text-decoration: none;
    }
 
    /* FIREFOX-SPECIFIC COMPATIBILITY METHOD */
    @supports (-moz-appearance:none) {
    #top-bar .open-menu a {
        pointer-events: none;
    }
    #side-bar:not(:target) .close-menu {
        display: block;
        pointer-events: none;
        user-select: none;
    }
 
    /* This pseudo-element is meant to overlay the regular sidebar button
    so the fixed positioning (top, left, right and/or bottom) has to match */
 
    #side-bar .close-menu::before {
        content: "";
        position: fixed;
        z-index: 5;
        display: block;
 
        top: 0.5em;
        left: 0.5em;
 
        border: 0.2em solid transparent;
        width: 30px;
        height: 30px;
        font-size: 30px;
        line-height: 0.9em;
 
        pointer-events: all;
        cursor: pointer;
    }
    #side-bar:focus-within {
        left: 0;
    }
    #side-bar:focus-within .close-menu::before {
        pointer-events: none;
    }
    }
}

SCP-5400-J - Ця сторінка засекречена
Створена: DrApricusDrApricus
Перекладена: DrKhmelnytskyDrKhmelnytsky
Опубліковано 22 Nov 2023 00:09
рейтинг: +8+–x


УВАГА: ЦЕЙ ДОКУМЕНТ ПОТРЕБУЄ РІВНЯ ДОПУСКУ 4/5400-J

БУДЬ-ЯКІ СПРОБИ ОТРИМАТИ ДОСТУП ДО ДОКУМЕНТА БЕЗ НАЛЕЖНОГО РІВНЯ ДОПУСКУ БУДУТЬ ЗАФІКСОВАНІ ТА ПРИЗВЕДУТЬ ДО НЕГАЙНОГО ДИСЦИПЛІНАРНОГО СТЯГНЕННЯ.

_oenгумороб'єктособливий
версія сторінки: 5, останнє редагування: 22 Nov 2023 14:43
Редагувати Оцінити (+8) Теґи Обговорити (1) Історія Файли Друкувати Інструменти сайту + Налаштування
Якщо не зазначено інше, вміст цієї сторінки доступний на умовах ліцензії Creative Commons Attribution-ShareAlike 3.0 License