Popup Pratinjau

P E R I N G A T A N
DIMOHON UNTUK TIDAK MENYUNTING HALAMAN INI TANPA PERSETUJUAN STAF.

Templat ini hanya dapat digunakan di Backroom Wiki ID.


这是什么

CroquemboucheCroquembouche用在一大堆页面上的一大堆各种各样的CSS“改进”,因为我觉得这样就能使其更容易处理。

该组件做出了很多非常细碎的改动以使得写作体验更加舒服且能够使制作组件/版式更加容易一点(也就是我经常干的事)。它不会对读者来说在视觉上改变页面中的任何东西——这些改动是为作者服务的。

我不期望用了这个组件的文章的翻译版也会用到这个组件,除非那个翻译者也喜欢这个组件而且也想用这个组件之类的。

这个组件可能不会与其它组件或版式冲突,且即使会冲突,也可能不会有什么影响。

用法

在任意维基上:

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

该组件被设计于与其它组件一同使用,所以-=-是用来隐藏该文档的。在另一个组件内使用时,请确保将该组件放在[[iftags]],这样你的组件的用户就不会强制同样使用 Croq 风格。

相关组件

其它个人自定义组件(只会改变一点点东西):

个人自定义版式(在视觉上有大的变化):

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>元素加上亮灰色的背景({{文本}}),使得代码片段更为突出。

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; }

碎裂碎裂

任何在带有nobreak类的div中的文本可以在字母间自动换行。

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

代码颜色

将我终端中的代码颜色加为变量。可能我会在什么时候把它改成比如Monokai或者别的更加常见的终端主题,但是现在暂时这还是我的个人主题,是从Tomorrow Night Eighties中衍生而来的。

还有,将.terminal类像[[div class="code terminal"]]一样添加到假代码方块中可以让它有一个有点伪终端样的暗色背景。不能用在[[code]]中,因为Wikidot嵌入了一大堆语法来使其高亮,不用一大堆CSS是改不动的。只能用在非[[code]]的代码片段中。

: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.overdiv.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; }
penilaian: 0+x

Apa ini?

Ini adalah Popup Pratinjau yang dibuat oleh EltracEltrac untuk meniru fitur pratinjau navigasi Wikipedia. Pengguna dapat mengarahkan tetikus ke sebuah pranala dan melihat deskripsi yang telah ditentukan sebelumnya oleh penulis dari halaman yang ditautkan.

Komponen ini menghasilkan sebuah ? untuk membedakannya dari tautan biasa. Pada perangkat layar kecil, terutama perangkat seluler yang hanya dapat diketuk pada layar sentuh, tombol ini perlu diketuk agar Anda tidak membuka halaman yang ditautkan saat melihat konten.


Demonstrasi

Coba arahkan kursor ke/ketuk pada tautan di bawah ini!

Selain level ini, Level 14-IDDSC05785.jpgLevel 14-ID terlihat seperti dataran tinggi non-linier yang subur dan lembap, hangat di siang hari serta dingin pada malam hari. Dataran ini bertopografi serupa dengan sistem sawah di Frontrooms yang mendominasi sebagian besar Level 14-ID. Seluruh permukaan level ditutupi oleh tumbuhan Oryza Sativa atau lebih dikenal sebagai padi rawa. juga merupakan contoh lainnya dari level bertema sumber daya alam di Backrooms Indonesia.

Penggunaan

Pertama, sisipkan kode di bagian atas halaman.

[[include :id-backrooms-wiki:component:popup]]

Cukup salin dan tempel kode berikut ini di lokasi di mana pun Anda perlu menggunakannya lalu memodifikasinya.

Teks sebelum tautan[[span class="popup"]][[[Tautan|Teks Tautan]]][[span class="popup-content"]][[image Tautan Gambar]][[span]]Teks Pratinjau[[/span]][[/span]][[/span]]Teks setelah tautan.

Untuk pratinjau tanpa gambar, Anda dapat menggunakan kode ini1.

Teks sebelum tautan[[span class="popup text-only"]][[[Tautan|Teks Tautan]]][[span class="popup-content"]]Teks pratinjau[[/span]][[/span]]Teks setelah tautan.

Jika Anda perlu mengubah warna blok pratinjau semu, gunakan kode ini. Jika Anda hanya menginginkan kompatibilitas sederhana dengan tata letak yang dibuat berdasarkan Black Highlighter, cukup salin kode tanpa mengubahnya.

[[module CSS]]
:root {
    --popup-bg: var(--pale-gray-monochrome); /* Mengubah warna latar belakang */
    --popup-text: var(--black-monochrome); /* Mengubah warna teks */
}
[[/module]]

Jika Anda tidak menyukai tanda ? setelah tautan, Anda dapat menyembunyikannya dengan kode ini.

[[module CSS]]
@media screen and (min-width:768px) {
    .popup::after { display: none }
}
[[/module]]

Catatan Khusus

Jika Anda menemukan bahwa salah satu paragraf di mana Anda telah menambahkan pratinjau tautan telah kehilangan margin atas dan bawahnya, seperti yang terjadi:

Sistem Pembuangan Air Limbah adalah istilah baru yang kemudian digunakan untuk membedakannya dengan Level 34level34.jpgLevel 34 adalah terowongan kecil dengan jarak hanya empat kaki antara langit-langit dan lantai. Berhati-hatilah di sini karena Anda bisa saja secara tidak sengaja jatuh ke dalam air dan masuk ke Level -2. Tidak ada penerangan internal di level ini, jadi membawa lentera atau senter sangat disarankan. Level ini telah diakses oleh banyak orang. Ada banyak entitas di dalam level ini, seperti Smiler. Jika Anda melihat Smiler di dalam terowongan, Anda disarankan untuk segera mematikan senter Anda dan mengarahkan pandangan ke bawah hingga Anda mengira Smiler telah menghilang—jika Anda mengira Smiler telah menghilang, maka Smiler telah menghilang. Hanya ada sedikit Hound di sini, namun banyak Death Rats yang berkeliaran di wilayah sempit ini. Seorang wanita mengaku pernah melihat Skin-Stealer di level ini, namun tidak ada bukti yang mendukung hal ini. Disarankan untuk membawa air almond dari level lain, karena air almond di level ini sudah terkontaminasi., itu karena ini adalah level yang sangat istimewa dan rahasia.

Deskripsi:

……

Sedangkan tanpa menggunakan pratinjau tautan:

Sistem Pembuangan Air Limbah adalah istilah baru yang kemudian digunakan untuk membedakannya dengan Level 34, itu karena ini adalah level yang sangat istimewa dan rahasia.

Deskripsi:

……

Hal ini disebabkan oleh sebuah bug yang menyebabkan Wikidot tidak menambahkan tag p ke paragraf yang menggunakan pratinjau tautan, dan tanpa tag p, tidak ada margin atas dan bawah. Untuk memperbaikinya, kita perlu menambahkan margin secara manual.

Jika hal ini terjadi, tambahkan class popup-fix ke paragraf yang bersangkutan.

[[div class="popup-fix"]]
......
[[/div]]
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License