CSS tricks

Sthephan Shi edited this page Oct 31, 2018 · 22 revisions

[Read in English]

CSS трюки

Некоторые из хотелок пользователей могут быть решены при помощи CSS. Здесь указаны некоторые CSS-выражения, которые могут быть вам полезны. Чтобы их применить, откройте окно "Настройки" > вкладка "Общее" > включите опцию "Пользовательский CSS" и нажмите кнопку "Правка". После ввода ваших выражений нажмите кнопку "Сохранить", чтобы изменения применились.

Как скрыть кнопки на панели?

#ID { display: none; }

где ID =

  • "Скрытое" — de-panel-hid
  • "Видео" — de-panel-vid
  • "Предыдущая страница" — de-panel-goback
  • "Следующая страница" — de-panel-gonext
  • "В начало сраницы" — de-panel-goup
  • "В конец страницы" — de-panel-godown
  • "Раскрыть все картинки" — de-panel-expimg
  • "Маскировать картинки" — de-panel-maskimg
  • "Предзагрузка картинок" — de-panel-preimg
  • "Сохранить на диск" — de-panel-savethr
  • "Звуковое оповещение" — de-panel-audio-off
  • "Каталог" — de-panel-catalog
  • "Выключение скрипта" — de-panel-enable
  • "Счетчик постов/картинок/постящих" (целиком) — de-panel-info

Пример CSS, который скроет все кнопки, кроме "Настроек":

#de-panel-fav, #de-panel-hid, #de-panel-refresh, #de-panel-vid, #de-panel-goback, #de-panel-gonext, #de-panel-goup, #de-panel-godown, #de-panel-expimg, #de-panel-maskimg, #de-panel-preimg, #de-panel-savethr, #de-panel-upd-on, #de-panel-upd-off, #de-panel-audio-off, #de-panel-catalog, #de-panel-info, #de-panel-enable { display: none !important; }

Если вы закрыли окно настроек и не можете их снова открыть из-за того, что скрыли кнопку #de-panel-cfg, нажмите Alt+S, чтобы открыть окно "Настройки".

Как отдельно отключить счетчики постов/картинок/постящих?

Счетчик постов:

#de-panel-info-pcount { display: none; }
#de-panel-info-icount::before { content: none; }

Счетчик картинок:

#de-panel-info-icount { display: none; }
#de-panel-info-acount:not(:empty)::before { content: none; }

Счетчик постящих:

#de-panel-info-acount { display: none; }

Как разместить панель скрипта по центру окна браузера?

#de-panel { right: 50%; transform: translateX(50%); border-radius: 15px 15px 0px 0px; }

Также открывать по центру "Настройки", "Избранное", и т.д.:

.de-win-fixed { right: 50% !important; transform: translateX(50.5%); }

Как разместить весь тред по центру страницы?

body { margin: auto; width: 1000px; }

Как закрепить панель скрипта наверху треда над оп-постом?

#de-panel { position: static; float: right; }

Как отключить пометку (OP) у >>ссылок на оп-пост?

.de-ref-op::after { content: none; }

Как сделать квадратные скобки в >>ссылках на оп-пост? >>123456[OP]

.de-ref-op::after { content: " [OP]"; }
.de-ref-op.de-ref-my::after { content: " [OP](You)"; }

Как убрать пометку (You) у >>ссылок на ваши посты?

.de-ref-my::after { content: none; }
.de-ref-del.de-ref-my::after { content: " (Del)"; }
.de-ref-op.de-ref-my::after { content: " (OP)"; }

Как убрать счетчик страниц "Страница 1" при бесконечной прокрутке?

.de-page-num { display: none; }

Как отключить панель навигации слева при разворачивании треда?

#de-thr-navpanel { display: none !important; }

Как убрать рамку вокруг >>ссылок при наведении?

.de-link-parent { outline: none !important; }

Как убрать причины скрытия постов? autohide #blabla(...)

.de-post-note { display: none; }

Как сделать квадратные скобки [123] вокруг счетчиков постов в Избранном?

.de-fav-inf-old::before { content: "["; color: black; }
.de-fav-inf-old::after { content: "]"; color: black; }

Вместо black подставьте свой цвет, например #800000 для iichan.hk.

Firefox Quantum: как таскать webm за шапку, закрывать по крестику и ставить на паузу ЛКМ в любой области?

.de-fullimg-center-video { border-top: 20px solid #444 !important; border-radius: 10px 10px 0 0; cursor: pointer; }
.de-fullimg-center-video > .de-fullimg-video::before { right: 6px !important; top: -20px; }
.de-fullimg-video::before { content: "\2716"; color: #fff; background-color: rgba(64, 64, 64, 0.8); text-align: center; width: 20px; height: 20px; position: absolute; right: 0; font: bold 14px/18px tahoma; cursor: pointer; }
.de-fullimg-video-hack { display: none; }

Как убрать удаленные посты (помеченные как "удалено")?

.de-wrap-removed { display: none; }

Как вернуть старую иконку раскрытия всех картинок ("Лупа") на панели скрипта?

#de-panel-expimg > .de-panel-svg { display: none; }
#de-panel-expimg { background-image: url(data:image/gif;base64,R0lGODlhGQAZAIAAAPDw8P///yH5BAEAAAEALAAAAAAZABkAQAI9jI+pGwDn4GPL2Wep3rxXFEFel42mBE6kcYXqFqYnVc72jTPtS/KNr5OJOJMdq4diAXWvS065NNVwseehAAA7); background-repeat: no-repeat; background-position: center; }

Как в форме ответа убрать кнопку добавления файла по ссылке (которая синяя круглая с плюсом)?

.de-file-off > .de-file-utils { opacity: 0; }

Как вручную перекрасить кнопки постов?

.ID { color: yellow; fill: red; }

где color - цвет содержимого кнопки, fill - цвет фона кнопки, и ID это...

  • "Скрыть пост" — de-btn-hide
  • "Раскрыть пост" — de-btn-unhide
  • "Скрыть пост", если пост был раскрыт пользователем — de-btn-hide-user
  • "Раскрыть пост", если пост был скрыт пользователем — de-btn-unhide-user
  • "Быстрый ответ" — de-btn-rep
  • "Развернуть тред" — de-btn-expthr
  • "Добавить тред Избранное" — de-btn-fav
  • "Добавить тред Избранное", если тред уже в Избранном — de-btn-fav-sel
  • "Поиск картинки" — de-btn-src
  • "Закрепить превью" — de-btn-stick
  • "Закрепить превью", если превью поста уже закреплено — de-btn-stick-on
  • "Индикатор сажи" — de-btn-sage

Пример. Сделать фоном всех кнопок постов украинский флаг:

.de-btn-expthr, .de-btn-fav, .de-btn-fav-sel, .de-btn-hide, .de-btn-hide-user, .de-btn-unhide, .de-btn-unhide-user, .de-btn-rep, .de-btn-sage, .de-btn-src, .de-btn-stick, .de-btn-stick-on { color: white; fill: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22gradient%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%2250%25%22%20y1%3D%220%25%22%20y2%3D%22100%25%22%20x2%3D%2250%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%230057b8%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23ffd700%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E#gradient); }

CSS для конкретных борд

iichan.hk и 4chan.org

Как убрать ">>" перед постами?
iichan:

.doubledash { display: none; }

4chan:

.sideArrows { display: none; }

Как сделать, чтобы код в тексте и блочный код не вылезали за посты?

code, pre { white-space: pre-wrap; }

Как сделать, чтобы блоки кода не занимали много места по ширине?

pre { max-width: 960px; overflow: auto; background: #FFF2E6; }

2ch.hk

Как сделать, чтобы длинные сообщения разворачивались полностью, без скролла?

.post.reply .post-message { max-height: initial !important; }

Надоело скроллить вайп-посты! Как вернуть скроллы в длинных сообщениях?

.post.reply .post-message { max-height: 600px !important; }

Как сделать, чтобы новые посты подкрашивались оранжевым?

.de-new-post { box-shadow: 6px 0px 2px -2px #F60, -6px 0px 2px -2px #F60 !important; }

dobrochan.com

Как убрать кнопки "edit" редактирования картинок?

.edit_.icon { display: none; }
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.