/* MeczRealu: styl przeniesiony z templates/__mr_comments.css.tpl (przegladarka trzyma go w pamieci podrecznej,
zamiast pobierac z kazda strona / kazdym otwarciem okna). */
/* ==========================================================================
1.0.57 — komentarze na PC w stylu X + szerokosc mediow
========================================================================== */
/* ── Media w komentarzu nie moga rozpychac ukladu ─────────────────────────
.comment-data i .comment-inner-wrapper sa elementami flex bez min-width,
wiec domyslne min-width:auto pozwalalo szerokiemu wideo rozepchnac cala
kolumne komentarzy. */
.comment .comment-data,
.comment .comment-inner-wrapper,
.comment .comment-inner,
.comment .comment-replace {
min-width: 0;
}
.mr-comment-publisher-media {
max-width: 100%;
}
.mr-comment-audio {
width: 100%;
max-width: 100%;
height: auto;
}
/* Bez wymuszonej proporcji: film zachowuje wlasny ksztalt, a oba ograniczenia
(szerokosc kontenera i wysokosc) skaluja go proporcjonalnie. Dzieki temu
pionowy klip nie dostaje czarnych pasow po bokach, a poziomy wypelnia
szerokosc komentarza. */
.mr-comment-video,
.mr-comment-publisher-media .mr-comment-video,
.comment .mr-comment-video {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: min(520px, 60vh);
border-radius: 14px;
background: #000;
}
.mr-comment-photo-grid img,
.mr-comment-gif img,
.comment-data .img-fluid {
max-width: 100%;
height: auto;
}
/* 1.0.73 — @nazwa jest teraz w kazdym komentarzu, ale poza modalami
(np. na stronie pojedynczego posta) zostaje ukryta jak dotad. */
.x_comms_list .mr-thread-handle,
.post-comments .mr-thread-handle {
display: none;
}
/* ==========================================================================
1.0.86 — panel emotek zawsze w jednym rzedzie (KAZDA strona)
--------------------------------------------------------------------------
Panel jest przypiety do przycisku (position: absolute), a przycisk ma ok.
40 px szerokosci. Bez jawnej szerokosci emotki dobieraja sie do blocku
otaczajacego i zawijaja w pionowa kolumne — dokladnie to bylo widac na
stronie glownej. width: max-content zdejmuje ten warunek.
========================================================================== */
.reactions-container {
width: max-content;
max-width: none;
white-space: nowrap;
}
.reactions-container .reactions_item {
float: none;
display: inline-block;
vertical-align: middle;
}
/* 1.0.88 — lista odpowiedzi ma wlasne czarne tlo (PC i telefon) */
.x_comms_list:not(:empty) {
background: #000;
}
@media (min-width: 768px) {
/* 1.0.105 — w feedzie na PC wiersz ma odstep 16 px, wiec i nitka */
.mrx-row {
--mrx-pad: 16px;
}
/* ── Lista komentarzy: plaska, oddzielona linia, bez karty ───────── */
.x_comms_list:not(:empty) {
background: #000;
border-radius: 0;
padding-top: 0;
}
.post-comments .comment:not(.writer),
.x_comms_list > li > .comment:not(.writer) {
position: relative;
padding: 12px 16px;
border-top: 1px solid #111;
background: transparent;
border-radius: 0;
cursor: pointer;
transition: background-color .12s ease;
}
.x_comms_list > li:first-child > .comment:not(.writer) {
border-top: 0;
}
.post-comments .comment:not(.writer):hover,
.x_comms_list > li > .comment:not(.writer):hover {
background-color: #080808;
}
/* odpowiedzi: wciecie i pionowa linia watku jak na X */
.mr-comment-thread-modal .comment.reply,
.x_comms_list .comment.reply {
position: relative;
padding: 10px 16px 10px 30px;
border-top: 0;
cursor: pointer;
}
.mr-comment-thread-modal .comment.reply::before,
.x_comms_list .comment.reply::before {
content: '';
position: absolute;
left: 34px;
top: 0;
bottom: 0;
width: 2px;
border-radius: 2px;
background: #111;
}
/* tekst nie jest juz sciety do 90% */
.comment-replace {
max-width: 100%;
}
/* elementy interaktywne zachowuja domyslny kursor */
.comment a,
.comment button,
.comment .comment-btn,
.comment .cmt-action-btn,
.comment video,
.comment audio,
.comment .mr-comment-photo-grid span {
cursor: auto;
}
.comment a,
.comment .cmt-action-btn,
.comment .comment-btn {
cursor: pointer;
}
/* 1.0.58 — pod postem widac wylacznie komentarze glowne. Odpowiedzi
zyja tylko w modalu watku, wiec chowamy je takze na stronie
pojedynczego posta, gdzie szablon nie dodaje klasy x-hidden. */
.post-comments .comment-replies,
.x_comms_list .comment-replies {
display: none !important;
}
.mr-comment-thread-modal .comment-replies {
display: block !important;
}
/* ── 1.0.62 — modale "Post" i "Watek" w srodkowej kolumnie ──────────
Modal nie ma wlasnego paska przewijania: rosnie razem z trescia,
a przewija sie cale okno. Naglowek zostaje przyklejony u gory.
Pozycje i szerokosc kolumny mierzy post.js i podaje w zmiennych
--mr-panel-left / --mr-panel-width. */
/* ── 1.0.66 — srodkowa kolumna zamienia sie w panel ────────────────
Panel jest przypiety do okna: od gory do dolu, dokladnie nad kolumna
z trescia. Strona w tle nie przewija sie i nie skacze — przewija sie
tylko zawartosc panelu, tak jak kolumna na X. Pasek przewijania jest
waski i czarny, wiec nie rzuca sie w oczy.
Pozycje i szerokosc kolumny mierzy post.js i podaje w zmiennych
--mr-panel-left / --mr-panel-width. */
#modal.mr-comment-thread-open,
/* ==================================================================
1.0.138 — otwarcie panelu nie przesuwa strony
------------------------------------------------------------------
Bootstrap przy otwieraniu okna doklada do klase modal-open,
ktora blokuje przewijanie i REZERWUJE miejsce po pasku przewijania
(padding-right). Strona przeskakiwala wiec o szerokosc paska —
widac to bylo jako drgniecie naglowka tuz przed pojawieniem sie
wpisu.
Nasze panele nie potrzebuja blokady przewijania: na PC zajmuja
srodkowa kolumne i celowo przepuszczaja klikniecia obok siebie.
Zdejmujemy wiec obie rzeczy i strona stoi w miejscu.
================================================================== */
body.mr-post-thread-open.modal-open,
body.mr-comment-thread-open.modal-open,
body.mr-notif-open.modal-open,
body.mr-msg-open.modal-open,
/* 1.0.149 — okno udostepniania tez nie moze przesuwac strony */
body.mr-share-publisher-body-open.modal-open,
body.mr-publisher-desktop-open.modal-open {
overflow: visible !important;
padding-right: 0 !important;
}
/* MR 2026-09: gorna belka (Obserwujesz / Najnowsze / ...) i wyszukiwarka
ZOSTAJA przy otwieraniu wpisu - tak samo jak pasek chipow. Panel wpisu
(modal, z-index Bootstrapa) i tak przykrywa srodkowa kolumne, a prawa
kolumna z wyszukiwarka zostaje widoczna. Wczesniej (1.0.150 / 1.0.186)
obie rzeczy byly tu chowane. */
.search-wrapper-prnt .form-control,
.search-wrapper-prnt .search-input-icon {
transition-property: background-color, border-color, color, box-shadow !important;
}
/* MR 2026-10: wyszukiwarka stoi tam, gdzie przy wejsciu na strone (na samej gorze).
Otwarcie wpisu zdejmuje z blokade przewijania (regula wyzej), a przez to
"sticky" wyszukiwarki nagle zaczynalo dzialac i wyskakiwala ona u gory ekranu,
nawet w polowie strony. Na czas otwartego okna trzymamy ja w miejscu. */
@media (min-width: 931px) {
body.modal-open .search-wrapper-prnt {
position: relative !important;
top: auto !important;
}
}
/* 1.0.174 — karta profilu uzytkownika jest dopisywana do BODY.
Modal posta ma wyzszy z-index niz standardowy popover Sngine, wiec
po najechaniu nicka karta istniala, ale zostawala pod panelem. */
body.mr-post-thread-open .user-popover-wrapper,
body.mr-comment-thread-open .user-popover-wrapper,
body.mr-post-thread-open .user-popover-content,
body.mr-comment-thread-open .user-popover-content {
z-index: 2147483030 !important;
}
#modal.mr-post-thread-open {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 0 !important;
overflow: hidden;
}
/* 1.0.79 — poza wlasnym oknem panel nie lapie klikniec, wiec menu boczne
i reszta strony reaguja od razu, bez zamykania panelu osobnym klikiem.
Zamkniecie bierze na siebie uchwyt w post.js. */
#modal.mr-comment-thread-open,
#modal.mr-post-thread-open {
pointer-events: none;
}
#modal.mr-comment-thread-open + .modal-backdrop,
#modal.mr-post-thread-open + .modal-backdrop,
body.mr-comment-thread-open .modal-backdrop,
body.mr-post-thread-open .modal-backdrop {
pointer-events: none;
}
#modal.mr-comment-thread-open .modal-dialog,
#modal.mr-post-thread-open .modal-dialog {
pointer-events: auto;
position: fixed;
top: 0;
bottom: 0;
left: var(--mr-profile-panel-left, var(--mr-panel-left, 50%));
width: var(--mr-profile-panel-width, var(--mr-panel-width, 600px));
max-width: var(--mr-profile-panel-width, var(--mr-panel-width, 600px));
height: 100%;
margin: 0;
display: block;
background: #000;
overflow: hidden;
}
/* Profile shell covers the header and both columns. Keep the reading
width identical in the live thread and its transition snapshot. */
html.mr-profile-thread-layout #modal.mr-post-thread-open .mr-post-thread-modal,
html.mr-profile-thread-layout #modal.mr-comment-thread-open .mr-comment-thread-modal,
html.mr-profile-thread-layout #mr-thread-ghost .mr-post-thread-modal,
html.mr-profile-thread-layout #mr-thread-ghost .mr-comment-thread-modal {
/* Align with the profile feed instead of shifting short posts into
the middle of the full-width profile overlay. */
width: min(100%, var(--mr-panel-width, 640px));
max-width: 640px;
margin-left: 0;
margin-right: auto;
border-right: 1px solid #16181c;
box-sizing: border-box;
}
/* 1.0.183 — czat pozostaje prawdziwie interaktywny obok desktopowego
panelu. Sam pointer-events nie wystarcza bez wylaczenia FocusTrap w JS,
ale jawna regula chroni przed dziedziczeniem blokady z warstw modala. */
body.mr-comment-thread-open .chat-widget,
body.mr-post-thread-open .chat-widget {
pointer-events: auto !important;
}
#modal.mr-comment-thread-open .modal-content,
#modal.mr-post-thread-open .modal-content {
width: 100%;
height: 100%;
background: #000;
border: 0;
border-left: 1px solid #111;
border-right: 1px solid #111;
border-radius: 0;
box-shadow: none;
}
/* 1.0.77 — panel zajmuje srodkowa kolumne, wiec reszta strony zostaje
normalnie widoczna. Przyslona nadal istnieje (klikniecie obok zamyka
panel), tylko nic nie przyciemnia. */
#modal.mr-comment-thread-open + .modal-backdrop,
#modal.mr-post-thread-open + .modal-backdrop,
body.mr-comment-thread-open .modal-backdrop,
body.mr-post-thread-open .modal-backdrop {
opacity: 0;
}
/* panel wypelnia wysokosc, przewija sie tylko jego srodek */
#modal.mr-comment-thread-open .mr-comment-thread-modal,
#modal.mr-post-thread-open .mr-post-thread-modal {
height: 100%;
max-height: none;
min-height: 0;
border-radius: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
#modal.mr-comment-thread-open .mr-comment-thread-header,
#modal.mr-post-thread-open .mr-post-thread-header {
position: static;
flex: 0 0 auto;
height: 43px;
min-height: 43px;
background: #000;
}
#modal.mr-comment-thread-open .mr-comment-thread-title,
#modal.mr-post-thread-open .mr-post-thread-title {
font-size: 17px;
}
/* ==================================================================
1.0.98 — naglowek nie puchnie przy cofaniu
------------------------------------------------------------------
Reguly powyzej (naglowek 53 px, napis 17 px) sa przypiete do klas
na #modal. Zamrozona kopia widoku, ktora pokazuje sie na czas
cofania, lezy JEDNAK POZA #modal — jest doklejana do . Zadna
z tych regul jej wiec nie dotyczyla i kopia wracala do wartosci
podstawowych z arkusza widoku: naglowek 58 px, napis 20 px.
Dlatego po klknieciu strzalki napis na moment robil sie wiekszy.
To nie byla zadna animacja — to byl po prostu inny rozmiar w kopii.
Kopia dostaje teraz dokladnie te same wymiary co widok, ktory
zastepuje, wiec podmiana jest niewidoczna. Poza wysokoscia naglowka
i rozmiarem napisu NIE ustawiamy tu niczego wiecej — reszta (odstepy,
siatka, przycisk) przychodzi z arkusza widoku i jest juz poprawna.
================================================================== */
#mr-thread-ghost .mr-comment-thread-header,
#mr-thread-ghost .mr-post-thread-header {
height: 43px;
min-height: 43px;
background: #000;
}
#mr-thread-ghost .mr-comment-thread-title,
#mr-thread-ghost .mr-post-thread-title {
font-size: 17px;
}
#modal.mr-comment-thread-open .mr-comment-thread-scroll,
#modal.mr-post-thread-open .mr-post-thread-scroll {
flex: 1 1 auto;
min-height: 0;
max-height: none;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
/* 1.0.67 — panel przewija sie kolkiem myszy, ale paska nie widac */
scrollbar-width: none;
-ms-overflow-style: none;
}
#modal.mr-comment-thread-open .mr-comment-thread-scroll::-webkit-scrollbar,
#modal.mr-post-thread-open .mr-post-thread-scroll::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
/* 1.0.67 — dolny pasek "Napisz odpowiedz" znika, a jego pole trafia w
tresc jako "Opublikuj swoja odpowiedz". Klase mr-x-inline-composer
nadaje post.js razem z przeniesieniem elementu. */
#modal.mr-post-thread-open .mr-post-thread-compose-wrap:not(.mr-x-inline-composer),
#modal.mr-comment-thread-open .mr-comment-thread-compose-wrap:not(.mr-x-inline-composer) {
display: none !important;
}
/* 1.0.68 — powrot z publishera do widoku "Post"/"Watek": zawartosc
modalu jest schowana, a na wierzchu zostaje zamrozony obraz widoku.
Bez tego przez czas zapytania AJAX widac wnetrze zamykanego
publishera i odlozony z powrotem publisher feedu. */
/* ── Zamrozony obraz widoku pod publisherem ─────────────────────── */
#mr-thread-ghost {
position: fixed;
top: 0;
bottom: 0;
left: var(--mr-profile-panel-left, var(--mr-panel-left, 50%));
width: var(--mr-profile-panel-width, var(--mr-panel-width, 600px));
height: 100vh;
overflow: hidden;
z-index: 999998;
pointer-events: none;
background: #000;
border-left: 1px solid #111;
border-right: 1px solid #111;
}
/* 1.0.70 — zamkniecie bez animacji zanikania. Bootstrap wygasza dialog
przez ~0,3 s i przez ten czas zamykany publisher plywa nad feedem. */
#modal.mr-instant-close,
#modal.mr-instant-close .modal-dialog {
transition: none !important;
opacity: 0 !important;
}
#modal.mr-instant-close .modal-content {
visibility: hidden !important;
}
/* 1.0.69 — na czas podmiany panelu kopia wychodzi NAD modal, wiec przez
caly czas zapytania AJAX widac dokladnie ten sam widok co przed
klinieciem. Ponizej lightboxa (1000100), wiec podglad zdjecia dalej
jest na wierzchu. */
#mr-thread-ghost.mr-ghost-front {
z-index: 1000000;
}
/* 1.0.72 — publisher jest warstwa NAD zamrozonym panelem. Panel z polem
"Opublikuj swoja odpowiedz" stoi wiec nieruchomo przez caly czas
pisania: nic nie gasnie i nic nie pojawia sie na nowo po zamknieciu.
Ponizej lightboxa (1000100), zeby podglad zdjecia dalej byl na wierzchu. */
#modal.mr-publisher-modal-open {
z-index: 1000050;
}
#modal.mr-thread-returning .modal-content > * {
visibility: hidden;
}
/* Returning from the composer: hide the entire old dialog, including its
background, legacy close button and positioned toolbar descendants. The
frozen thread remains visible while the replacement request completes. */
#modal.mr-thread-returning .modal-dialog {
opacity: 0 !important;
}
#modal.mr-thread-returning .modal-dialog,
#modal.mr-thread-returning .modal-dialog * {
pointer-events: none !important;
}
/* kopia ma miec dokladnie taka sama geometrie jak panel, zeby po
przywroceniu scrollTop pokazywala ten sam kawalek tresci */
#mr-thread-ghost .mr-post-thread-modal,
#mr-thread-ghost .mr-comment-thread-modal {
height: 100%;
max-height: none;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 0;
}
#mr-thread-ghost .mr-post-thread-header,
#mr-thread-ghost .mr-comment-thread-header {
position: static;
flex: 0 0 auto;
}
#mr-thread-ghost .mr-post-thread-scroll,
#mr-thread-ghost .mr-comment-thread-scroll {
flex: 1 1 auto;
min-height: 0;
max-height: none;
overflow: hidden;
}
#mr-thread-ghost .mr-post-thread-compose-wrap:not(.mr-x-inline-composer),
#mr-thread-ghost .mr-comment-thread-compose-wrap:not(.mr-x-inline-composer) {
display: none !important;
}
/* 1.0.65 — w widoku "Post" i w watku komplet komentarzy przychodzi juz
z serwera, wiec przycisk doczytywania nie ma czego doczytac. */
#modal.mr-post-thread-open .js_see-more,
#modal.mr-comment-thread-open .js_see-more,
#mr-thread-ghost .js_see-more {
display: none !important;
}
/* Lightbox byl POD modalem: w tym serwisie #modal ma z-index 999999,
a motyw daje .lightbox tylko 99999. Podnosimy go nad modal i nad
warstwe publishera, ale zostawiamy ponizej pplywajacych okien (.mrw). */
.lightbox,
.livebox {
z-index: 1000100 !important;
}
/* w srodku watku komentarz nie jest juz klikalny */
.mr-comment-thread-modal .comment:not(.writer),
.mr-post-thread-modal .comment:not(.writer) {
cursor: default;
}
.mr-comment-thread-modal .comment:not(.writer):hover,
.mr-post-thread-modal .comment:not(.writer):hover {
background: transparent;
}
/* w widoku "Post" komentarze glowne prowadza do watku */
.mr-post-thread-modal .x_comms_list > li > .comment:not(.writer) {
cursor: pointer;
}
.mr-post-thread-modal .x_comms_list > li > .comment:not(.writer):hover {
background: #080808;
}
}
/* 1.0.78 — powrot z publishera do widoku "Post"/"Watek" na telefonie */
@media (max-width: 767.98px) {
#modal.mr-thread-returning .modal-content {
background: #000 !important;
}
#modal.mr-thread-returning .modal-content > * {
visibility: hidden !important;
}
}
/* ==========================================================================
1.0.88 — bialy przycisk "Obserwuj" (X)
--------------------------------------------------------------------------
Wymiary prosto z X: wysokosc 32 px, promien pelny, 14/700, tlo #eff3f4,
napis #0f1419. Stan "Obserwujesz" jest odwrocony — przezroczysty z
obwodka, a najechanie kursorem zapowiada odwolanie na czerwono.
Przycisk pokazuje sie w modalach "Post"/"Watek", w podgladzie kontekstu
publishera i na stronie wpisu. W feedzie zostaje ukryty, zeby lista
wpisow nie zmienila sie w sciane przyciskow.
========================================================================== */
.mr-x-follow {
display: none;
height: 32px;
min-height: 32px;
align-items: center;
justify-content: center;
flex: 0 0 auto;
margin: 0 2px 0 0;
padding: 0 16px;
border: 1px solid transparent;
border-radius: 999px;
outline: 0;
background: #eff3f4;
color: #0f1419;
font-family: inherit;
font-size: 14px;
line-height: 1;
font-weight: 700;
white-space: nowrap;
cursor: pointer;
transition: background-color .12s ease, color .12s ease, border-color .12s ease;
-webkit-appearance: none;
appearance: none;
}
.mr-x-follow:hover {
background: #d7dbdc;
}
.mr-x-follow:active {
background: #cfd3d4;
}
.mr-x-follow.mr-x-following {
border-color: #536471;
background: transparent;
color: #e7e9ea;
}
.mr-x-follow.mr-x-following:hover {
border-color: #67070f;
background: rgba(244, 33, 46, .1);
color: #f4212e;
}
.mr-post-thread-modal .mr-x-follow,
.mr-comment-thread-modal .mr-x-follow,
.mr-publisher-full-modal .mr-x-follow,
.standalone-post > .post-header .mr-x-follow,
.standalone-post .post-header .mr-x-follow {
display: inline-flex;
}
@media (max-width: 767.98px) {
.mr-x-follow {
height: 30px;
min-height: 30px;
padding: 0 14px;
font-size: 13px;
}
}
/* ==========================================================================
1.0.88 — przejscia miedzy widokami na telefonie
--------------------------------------------------------------------------
Klatki, ktorych do tej pory brakowalo: klasy mr-modal-enter-* byly
ustawiane przez post.js i wskazywaly na animacje, ktorej nigdzie nie
zdefiniowano, wiec nowy widok po prostu wskakiwal. Teraz wjezdza z boku
— z prawej przy wejsciu w glab, z lewej przy cofaniu — tak jak na X.
Osobno: klasa mr-modal-swiping wylacza wszystkie inne przejscia na czas
ciagniecia palcem, zeby okno szlo za palcem bez opoznienia.
========================================================================== */
/* 1.0.113 — takze tutaj bez przezroczystosci, z tego samego powodu:
kazda jej zmiana kazala przegladarce przerysowac zdjecia w panelu */
@keyframes mr-modal-enter-right {
from { transform: translate3d(14%, 0, 0); }
to { transform: translate3d(0, 0, 0); }
}
@keyframes mr-modal-enter-left {
from { transform: translate3d(-14%, 0, 0); }
to { transform: translate3d(0, 0, 0); }
}
/* ==========================================================================
1.0.114 — COFANIE: KARTA ODJEZDZA W PRAWO, POD NIA POPRZEDNI WIDOK
--------------------------------------------------------------------------
Sama klatka. Zastosowana jest w static.tpl, tam gdzie od 1.0.88 siedzi cala
powloka przejsc — bo to wlasnie tamtejsza regula z "!important" trzymala
karte na 9% i nie pozwalala jej nigdzie odjechac. Wypelnienie "both" jest
istotne: karta ma ZOSTAC za krawedzia do konca zapytania.
========================================================================== */
@keyframes mr-modal-exit-right {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(100%, 0, 0); }
}
@media (max-width: 767.98px) {
#modal.mr-modal-swiping,
#modal.mr-modal-swiping .modal-dialog {
transition: none !important;
}
#modal.mr-modal-swiping .modal-content {
will-change: transform, opacity;
animation: none !important;
box-shadow: -18px 0 40px rgba(0, 0, 0, .55);
}
/* okno musi byc przezroczyste, bo POD nim lezy poprzedni widok */
#modal.mr-modal-swiping {
background: transparent !important;
}
}
/* ==========================================================================
1.0.89 — poprzedni widok pod przesuwanym oknem
--------------------------------------------------------------------------
Warstwa stoi tuz PONIZEJ modalu (#modal ma 999999), wiec przy cofaniu widac
dokladnie to, do czego wracasz, zamiast strony glownej. Nie lapie klikniec
i znika, gdy nowy widok jest gotowy.
========================================================================== */
#mr-back-layer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999995;
overflow: hidden;
background: #000;
pointer-events: none;
}
#mr-back-layer .mr-post-thread-modal,
#mr-back-layer .mr-comment-thread-modal {
height: 100%;
min-height: 0;
max-height: none;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 0;
}
#mr-back-layer .mr-post-thread-scroll,
#mr-back-layer .mr-comment-thread-scroll {
min-height: 0;
max-height: none;
flex: 1 1 auto;
overflow: hidden;
}
#mr-back-layer .js_see-more {
display: none !important;
}
@media (min-width: 768px) {
/* na PC gestu nie ma — warstwy tez nie */
#mr-back-layer {
display: none !important;
}
}
/* ==========================================================================
1.0.89 — publisher strony nie miga przy zamykaniu okna
--------------------------------------------------------------------------
visibility zamiast display: miejsce w ukladzie zostaje, wiec tresc pod
spodem nie podskakuje ani o piksel.
========================================================================== */
#publisher-wapper.mr-publisher-page-hidden {
visibility: hidden !important;
}
/* ==========================================================================
1.0.89 — wysokie zdjecie nie rozpycha juz wpisu
--------------------------------------------------------------------------
Zrzut ekranu z telefonu ma proporcje w rodzaju 9:20 i w widoku wpisu
zajmowal kilka ekranow — pasek akcji (odpowiedz, polubienie) lezal tak
nisko, ze trzeba bylo do niego dlugo przewijac. X przycina takie zdjecia,
a pelny rozmiar pokazuje dopiero w podgladzie. Robimy tak samo: najwyzej
62% wysokosci ekranu, przyciecie od gory, dotkniecie otwiera podglad.
========================================================================== */
.mr-post-thread-modal .post-media img,
.mr-comment-thread-modal .post-media img,
.standalone-post .post-media img,
.mr-post-thread-modal .post-media-image img,
.mr-comment-thread-modal .post-media-image img,
.standalone-post .post-media-image img,
.mr-post-thread-modal .pg_1x img,
.mr-comment-thread-modal .pg_1x img,
.standalone-post .pg_1x img {
max-height: 56vh !important;
max-height: min(56dvh, 560px) !important;
object-fit: cover !important;
object-position: center top !important;
}
.mr-post-thread-modal .post-media .image,
.mr-comment-thread-modal .post-media .image,
.standalone-post .post-media .image {
background-size: cover !important;
background-position: center top !important;
}
.mr-post-thread-modal .post-media > .post-media-image:not(.ratio),
.mr-comment-thread-modal .post-media > .post-media-image:not(.ratio),
.standalone-post .post-media > .post-media-image:not(.ratio) {
max-height: 56vh !important;
max-height: min(56dvh, 560px) !important;
overflow: hidden !important;
}
/* W feedzie ten sam limit, tylko odrobine nizszy — inaczej jeden zrzut
ekranu zajmuje cala liste. Gdybys wolal w feedzie pelna wysokosc, wystarczy
usunac ten jeden blok. */
.post:not(.standalone-post) .post-media img,
.post:not(.standalone-post) .post-media-image img,
.post:not(.standalone-post) .pg_1x img {
max-height: 50vh !important;
max-height: min(50dvh, 500px) !important;
object-fit: cover !important;
object-position: center top !important;
}
.post:not(.standalone-post) .post-media > .post-media-image:not(.ratio) {
max-height: 50vh !important;
max-height: min(50dvh, 500px) !important;
overflow: hidden !important;
}
/* 1.0.89 — ostatni komentarz nie chowa sie juz pod polem odpowiedzi */
.mr-post-thread-scroll,
.mr-comment-thread-scroll {
padding-bottom: 24px;
scroll-padding-bottom: 24px;
}
/* 1.0.115 — blok z 1.0.92 (klasa mr-replies-open, rozwijanie odpowiedzi
w miejscu) usuniety. Samo rozwijanie zniknelo w 1.0.95, gdy rozmowa
stala sie plaska lista z serwera — klasy nikt juz nie nadawal. */
/* ==========================================================================
1.0.93 — ROZMOWA W STYLU X
--------------------------------------------------------------------------
Jedna plaska lista wierszy. Zagniezdzenia nie ma — dokladnie jak na X,
gdzie odpowiedzi nie sa wciete, tylko polaczone pionowa nitka biegnaca
przez awatary. Wciecie pojawia sie dopiero od drugiego poziomu i jest
male (16 px), zeby dlugi lancuch nie uciekl za krawedz.
Wiersz wie o sobie wszystko z serwera:
mrx-line-down — pod moim awatarem biegnie nitka do nastepnego wiersza
mrx-line-up — nad moim awatarem biegnie nitka od poprzedniego
mrx-hidden — czekam pod przyciskiem "Pokaz N odpowiedzi"
mrx-focus — jestem wypowiedzia, na ktorej otwarto rozmowe
========================================================================== */
.mrx-list {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
background: #000;
}
.mrx-row {
position: relative;
display: block;
margin: 0;
padding: 0;
list-style: none;
}
/* wiersz: te same odstepy co komentarz glowny, zeby nitka byla prosta.
Wyrozniona wypowiedz w widoku "Watek" ma wlasny, wiekszy uklad — jej
nie ruszamy. */
.mrx-row:not(.mrx-focus) > .comment {
position: relative;
padding: 12px 16px 4px;
border: 0;
border-radius: 0;
background: transparent;
cursor: pointer;
transition: background-color .12s ease;
}
/* wciecie kolejnych poziomow — delikatne, jak na X */
.mrx-row:not(.mrx-focus).mrx-d2 > .comment { padding-left: 32px !important; }
.mrx-row:not(.mrx-focus).mrx-d3 > .comment { padding-left: 48px !important; }
.mrx-row:not(.mrx-focus).mrx-d4 > .comment { padding-left: 60px !important; }
.mrx-row:not(.mrx-focus).mrx-d5 > .comment { padding-left: 72px !important; }
.mrx-row:not(.mrx-focus).mrx-d6 > .comment { padding-left: 80px !important; }
/* ── Nitka rozmowy ────────────────────────────────────────────────────
WAZNE: kreski rysuje sam WIERSZ (.mrx-row::before / ::after), a nie
komentarz w srodku. Powod jest konkretny: arkusze widokow maja wlasne
reguly dla .comment.reply::before z content: none !important — pisane
jeszcze pod stara, zagniezdzona liste. Gdyby nitka siedziala na
.comment, trzeba by je przekrzykiwac coraz wyzsza specyficznoscia.
Na .mrx-row nikt niczego nie ma, wiec nie ma z kim konkurowac.
Awatar ma 40 px i zaczyna sie tam, gdzie konczy sie lewy odstep wiersza,
wiec srodek nitki wypada 19-20 px dalej. Kreska w gore siega od gory
wiersza do gory awatara, kreska w dol — od dolu awatara do dolu wiersza. */
/* ==========================================================================
1.0.105 — nitka trzyma sie srodka awatara, a nie sztywnej liczby
--------------------------------------------------------------------------
Kreska stala pod adresem wpisanym na sztywno (35 px na PC, 27 px na
telefonie), dobranym pod odstep wiersza rowny 16 / 8 px. Tyle ze odstep
nie jest wszedzie taki sam: w widoku "Post" zszedl do 8 px (1.0.102),
a w widoku "Watek" zostal 16 px. Kreska trafiala wiec obok awatara —
na telefonie w watku o 8 px w lewo, na PC w widoku "Post" o 8 px w prawo.
Awatar ma 40 px i zaczyna sie tam, gdzie konczy sie odstep wiersza, wiec
jego srodek to zawsze "odstep + 20". Kreska ma 2 px, czyli jej lewa
krawedz to "odstep + 19". Tak to teraz policzone — jedna zmienna na widok
zamiast czterech liczb do pilnowania.
========================================================================== */
.mrx-row {
--mrx-pad: 8px;
}
.mr-post-thread-native .mrx-row,
.mr-post-thread-modal .mrx-row {
--mrx-pad: 6px;
}
.mr-comment-thread-modal .mrx-row,
.mr-comment-thread-list .mrx-row {
--mrx-pad: 6px;
}
.mrx-row::before,
.mrx-row::after {
content: '';
position: absolute;
display: none;
left: calc(var(--mrx-pad) + 19px);
width: 2px;
background: #333639;
pointer-events: none;
z-index: 0;
}
.mrx-row.mrx-d2::before, .mrx-row.mrx-d2::after { left: 51px; }
.mrx-row.mrx-d3::before, .mrx-row.mrx-d3::after { left: 67px; }
.mrx-row.mrx-d4::before, .mrx-row.mrx-d4::after { left: 79px; }
.mrx-row.mrx-d5::before, .mrx-row.mrx-d5::after { left: 91px; }
.mrx-row.mrx-d6::before, .mrx-row.mrx-d6::after { left: 99px; }
.mrx-row.mrx-line-up::before {
display: block;
top: 0;
height: 12px;
}
.mrx-row.mrx-line-down::after {
display: block;
top: 52px;
bottom: 0;
}
.mrx-row > .comment:hover {
background-color: #080808;
}
.mrx-row.mrx-focus > .comment {
cursor: default;
}
.mrx-row.mrx-focus > .comment:hover {
background-color: transparent;
}
/* ── "Odpowiadajac do @nick" ─────────────────────────────────────────── */
.mrx-replying-to {
margin: 0 0 2px;
color: #71767b;
font-size: 14px;
line-height: 18px;
}
.mrx-replying-to span {
color: #0053cb;
}
/* natywna lista Sngine jest w tych widokach pusta — nie zostawiamy po niej
odstepu ani kreski */
.mr-post-thread-native .post-comments .js_comments:empty,
.mr-post-thread-native .js_comments:empty {
display: none !important;
}
/* ── Pierwszenstwo nad arkuszem przychodzacym z AJAX-em ────────────────
ajax.post.thread.tpl ma regule
.mr-post-thread-native .x_comms_list > li > .comment:not(.writer)
{ padding: 12px 16px !important }
o tej samej wadze co moje wciecia i lezaca PO nich, wiec wygrywala.
Dokladamy jeden czlon (.mrx-list) i sprawa jest rozstrzygnieta raz na
zawsze — bez zgadywania, ktory arkusz wczyta sie pierwszy. */
.mrx-list > .mrx-row:not(.mrx-focus).mrx-d2 > .comment { padding-left: 32px !important; }
.mrx-list > .mrx-row:not(.mrx-focus).mrx-d3 > .comment { padding-left: 48px !important; }
.mrx-list > .mrx-row:not(.mrx-focus).mrx-d4 > .comment { padding-left: 60px !important; }
.mrx-list > .mrx-row:not(.mrx-focus).mrx-d5 > .comment { padding-left: 72px !important; }
.mrx-list > .mrx-row:not(.mrx-focus).mrx-d6 > .comment { padding-left: 80px !important; }
/* Kreska pod wierszem tylko tam, gdzie rozmowa sie konczy. W srodku rozmowy
laczy juz wszystko pionowa nitka — dokladnie jak na X. */
.mr-post-thread-native .mrx-list > .mrx-row.mrx-reply > .comment,
.mr-comment-thread-modal .mrx-list > .mrx-row.mrx-reply > .comment,
.mr-post-thread-modal .mrx-list > .mrx-row.mrx-line-down > .comment {
border-bottom: 0 !important;
}
@media (max-width: 767.98px) {
.mrx-list > .mrx-row:not(.mrx-focus).mrx-d2 > .comment { padding-left: 22px !important; }
.mrx-list > .mrx-row:not(.mrx-focus).mrx-d3 > .comment { padding-left: 34px !important; }
.mrx-list > .mrx-row:not(.mrx-focus).mrx-d4 > .comment { padding-left: 44px !important; }
.mrx-list > .mrx-row:not(.mrx-focus).mrx-d5 > .comment { padding-left: 52px !important; }
.mrx-list > .mrx-row:not(.mrx-focus).mrx-d6 > .comment { padding-left: 58px !important; }
}
@media (max-width: 767.98px) {
.mrx-row:not(.mrx-focus) > .comment {
padding: 9px 8px 3px;
}
.mrx-row:not(.mrx-focus).mrx-d2 > .comment { padding-left: 22px !important; }
.mrx-row:not(.mrx-focus).mrx-d3 > .comment { padding-left: 34px !important; }
.mrx-row:not(.mrx-focus).mrx-d4 > .comment { padding-left: 44px !important; }
.mrx-row:not(.mrx-focus).mrx-d5 > .comment { padding-left: 52px !important; }
.mrx-row:not(.mrx-focus).mrx-d6 > .comment { padding-left: 58px !important; }
/* 1.0.105 — poziom pierwszy liczy sie ze zmiennej (patrz wyzej) */
.mrx-row.mrx-d2::before, .mrx-row.mrx-d2::after { left: 41px; }
.mrx-row.mrx-d3::before, .mrx-row.mrx-d3::after { left: 53px; }
.mrx-row.mrx-d4::before, .mrx-row.mrx-d4::after { left: 63px; }
.mrx-row.mrx-d5::before, .mrx-row.mrx-d5::after { left: 71px; }
.mrx-row.mrx-d6::before, .mrx-row.mrx-d6::after { left: 77px; }
.mrx-row.mrx-line-up::before { height: 9px; }
.mrx-row.mrx-line-down::after { top: 47px; }
.mrx-row > .comment:hover { background-color: transparent; }
}
/* ==========================================================================
1.0.104 — trzy kropki przy komentarzu widoczne CALY CZAS
--------------------------------------------------------------------------
Menu komentarza (.comment-btn) chowa arkusz motywu i pokazuje je dopiero
po najechaniu kursorem. Na telefonie kursora nie ma w ogole, wiec kropki
pojawialy sie tam dopiero po dotknieciu — czyli praktycznie przypadkiem.
Nie wiemy, ktorym sposobem motyw je chowa (visibility, opacity, display
albo odsuniecie transformem), a arkusza motywu nie ruszamy. Dlatego
zdejmujemy wszystkie cztery naraz. Selektory maja po trzy klasy, wiec
biora gore nad typowym zapisem motywu (.comment .comment-btn), a
!important zamyka sprawe niezaleznie od kolejnosci wczytywania arkuszy.
========================================================================== */
.comment .comment-data .comment-btn,
.comment .x_user_info .comment-btn,
.x_comms_list .comment .comment-btn,
.post-comments .comment .comment-btn,
.mrx-list .comment .comment-btn,
.mr-post-thread-modal .comment .comment-btn,
.mr-comment-thread-modal .comment .comment-btn,
.mr-publisher-full-modal .comment .comment-btn {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
transform: none !important;
pointer-events: auto !important;
}
.comment .comment-data .comment-btn svg,
.comment .x_user_info .comment-btn svg,
.x_comms_list .comment .comment-btn svg,
.post-comments .comment .comment-btn svg,
.mrx-list .comment .comment-btn svg,
.mr-post-thread-modal .comment .comment-btn svg,
.mr-comment-thread-modal .comment .comment-btn svg,
.mr-publisher-full-modal .comment .comment-btn svg {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* wygaszone, zeby nie krzyczaly z kazdego wiersza — rozjasniaja sie przy
najechaniu i po otwarciu menu, dokladnie jak na X */
.comment .comment-data .comment-btn {
color: #71767b;
transition: color .12s ease;
}
.comment .comment-data .comment-btn:hover,
.comment .comment-data .comment-btn.show {
color: #e7e9ea;
}
/* ==========================================================================
1.0.108 — KOMENTARZ 1:1 Z X (poprawione w 1.0.109)
--------------------------------------------------------------------------
Wymiary z ciemnego motywu X, zebrane w jednym miejscu:
odstep wiersza 12 px w pionie, 16 px w poziomie
awatar 40 x 40, 12 px odstepu do kolumny tresci
nazwa 15 / 20, grubosc 700, #e7e9ea
@nick i czas 15 / 20, grubosc 400, #71767b, w tej samej linii
tresc 15 / 20, #e7e9ea
pasek akcji 20 px wysokosci, 12 px odstepu nad nim
ikony w pasku 18,75 px, kolor #71767b
liczniki 13 / 16, kolor #71767b
WYPOWIEDZ OTWIERAJACA WATEK (.mrx-focus) JEST STAD WYLACZONA. Ma wlasny,
szerszy uklad — nazwa i @nick pod soba, tresc przez cala szerokosc, tak
jak wpis glowny na X. Objecie jej tymi regulami rozwalalo ten uklad:
@nick uciekal pod nazwe w zlym miejscu, a tresc wychodzila poza kolumne.
Dlatego kazdy selektor zaczyna sie od wiersza ZWYKLEGO:
.mrx-list > .mrx-row:not(.mrx-focus) > .comment
Kazdy zaczyna sie tez od #modal albo identyfikatora warstwy — arkusze
widokow przychodza AJAX-em, czyli PO tym pliku, i maja "!important";
bez przedrostka nowe wartosci przegralyby sama kolejnoscia wczytywania.
========================================================================== */
/* wiersz: odstepy */
#modal .mr-post-thread-native .mrx-list > .mrx-row:not(.mrx-focus) > .comment,
#modal .mr-post-thread-modal .mrx-list > .mrx-row:not(.mrx-focus) > .comment,
#modal .mr-comment-thread-modal .mrx-list > .mrx-row:not(.mrx-focus) > .comment,
#mr-thread-ghost .mrx-list > .mrx-row:not(.mrx-focus) > .comment,
#mr-back-layer .mrx-list > .mrx-row:not(.mrx-focus) > .comment {
padding: 12px 16px !important;
border-radius: 0 !important;
}
/* awatar i odstep do kolumny tresci */
#modal .mr-post-thread-native .mrx-list > .mrx-row:not(.mrx-focus) > .comment > .x_user_info,
#modal .mr-post-thread-modal .mrx-list > .mrx-row:not(.mrx-focus) > .comment > .x_user_info,
#modal .mr-comment-thread-modal .mrx-list > .mrx-row:not(.mrx-focus) > .comment > .x_user_info,
#mr-thread-ghost .mrx-list > .mrx-row:not(.mrx-focus) > .comment > .x_user_info,
#mr-back-layer .mrx-list > .mrx-row:not(.mrx-focus) > .comment > .x_user_info {
gap: 12px !important;
align-items: flex-start !important;
}
/* awatar: 40 x 40 */
#modal .mr-post-thread-native .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-avatar-picture,
#modal .mr-post-thread-modal .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-avatar-picture,
#modal .mr-comment-thread-modal .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-avatar-picture,
#mr-thread-ghost .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-avatar-picture,
#mr-back-layer .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-avatar-picture {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
}
/* naglowek: nazwa, @nick i czas w JEDNEJ linii */
#modal .mr-post-thread-native .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-author,
#modal .mr-post-thread-modal .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-author,
#modal .mr-comment-thread-modal .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-author,
#mr-thread-ghost .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-author,
#mr-back-layer .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-author {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 4px !important;
margin: 0 !important;
line-height: 20px !important;
}
/* nazwa autora */
#modal .mr-post-thread-native .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-author a,
#modal .mr-post-thread-modal .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-author a,
#modal .mr-comment-thread-modal .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-author a,
#mr-thread-ghost .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-author a,
#mr-back-layer .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-author a {
display: inline !important;
font-size: 15px !important;
line-height: 20px !important;
font-weight: 700 !important;
color: #e7e9ea !important;
}
/* @nick i czas */
#modal .mr-post-thread-native .mrx-list > .mrx-row:not(.mrx-focus) > .comment .mr-thread-handle,
#modal .mr-post-thread-modal .mrx-list > .mrx-row:not(.mrx-focus) > .comment .mr-thread-handle,
#modal .mr-comment-thread-modal .mrx-list > .mrx-row:not(.mrx-focus) > .comment .mr-thread-handle,
#mr-thread-ghost .mrx-list > .mrx-row:not(.mrx-focus) > .comment .mr-thread-handle,
#mr-back-layer .mrx-list > .mrx-row:not(.mrx-focus) > .comment .mr-thread-handle,
#modal .mr-post-thread-native .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-author .js_moment,
#modal .mr-post-thread-modal .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-author .js_moment,
#modal .mr-comment-thread-modal .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-author .js_moment,
#mr-thread-ghost .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-author .js_moment,
#mr-back-layer .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-author .js_moment {
display: inline !important;
margin: 0 !important;
font-size: 15px !important;
line-height: 20px !important;
font-weight: 400 !important;
color: #71767b !important;
}
/* tresc komentarza */
#modal .mr-post-thread-native .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-text,
#modal .mr-post-thread-modal .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-text,
#modal .mr-comment-thread-modal .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-text,
#mr-thread-ghost .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-text,
#mr-back-layer .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-text {
margin-top: 0 !important;
font-size: 15px !important;
line-height: 20px !important;
color: #e7e9ea !important;
}
/* pasek akcji */
#modal .mr-post-thread-native .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-actions,
#modal .mr-post-thread-modal .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-actions,
#modal .mr-comment-thread-modal .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-actions,
#mr-thread-ghost .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-actions,
#mr-back-layer .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-actions {
height: 20px !important;
min-height: 20px !important;
max-height: 20px !important;
margin: 12px 0 0 !important;
padding: 0 !important;
color: #71767b !important;
font-size: 13px !important;
line-height: 16px !important;
font-weight: 400 !important;
}
/* przyciski w pasku akcji */
#modal .mr-post-thread-native .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-actions .action-btn,
#modal .mr-post-thread-modal .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-actions .action-btn,
#modal .mr-comment-thread-modal .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-actions .action-btn,
#mr-thread-ghost .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-actions .action-btn,
#mr-back-layer .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-actions .action-btn,
#modal .mr-post-thread-native .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-actions > .pointer,
#modal .mr-post-thread-modal .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-actions > .pointer,
#modal .mr-comment-thread-modal .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-actions > .pointer,
#mr-thread-ghost .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-actions > .pointer,
#mr-back-layer .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-actions > .pointer {
height: 20px !important;
min-height: 20px !important;
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
color: #71767b !important;
font-size: 13px !important;
line-height: 16px !important;
}
/* ikony w pasku akcji */
#modal .mr-post-thread-native .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-actions .action-icon,
#modal .mr-post-thread-modal .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-actions .action-icon,
#modal .mr-comment-thread-modal .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-actions .action-icon,
#mr-thread-ghost .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-actions .action-icon,
#mr-back-layer .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-actions .action-icon,
#modal .mr-post-thread-native .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-actions .action-btn > svg,
#modal .mr-post-thread-modal .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-actions .action-btn > svg,
#modal .mr-comment-thread-modal .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-actions .action-btn > svg,
#mr-thread-ghost .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-actions .action-btn > svg,
#mr-back-layer .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-actions .action-btn > svg,
#modal .mr-post-thread-native .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-actions .reaction-btn svg,
#modal .mr-post-thread-modal .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-actions .reaction-btn svg,
#modal .mr-comment-thread-modal .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-actions .reaction-btn svg,
#mr-thread-ghost .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-actions .reaction-btn svg,
#mr-back-layer .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-actions .reaction-btn svg {
width: 18.75px !important;
height: 18.75px !important;
color: #71767b !important;
}
/* liczniki przy ikonach */
#modal .mr-post-thread-native .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-actions span,
#modal .mr-post-thread-modal .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-actions span,
#modal .mr-comment-thread-modal .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-actions span,
#mr-thread-ghost .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-actions span,
#mr-back-layer .mrx-list > .mrx-row:not(.mrx-focus) > .comment .comment-actions span {
margin-left: 4px !important;
font-size: 13px !important;
line-height: 16px !important;
color: #71767b !important;
}
/* ── Wciecia kolejnych poziomow rozmowy ────────────────────────────────
Odstep wiersza to wszedzie 16 px, wiec drabinka wciec jest jedna — bez
osobnych liczb dla telefonu. Nitka idzie za nia sama, bo jej polozenie
liczy sie jako 'odstep + 19 px'. */
/* 1.0.115 — polozenie nitki (left) dla poziomow 2-6 stalo tu dwa razy,
slowo w slowo. Zostaje jeden komplet, ten nizej. */
/* poziom 2 */
#modal .mr-post-thread-native .mrx-list > .mrx-row:not(.mrx-focus).mrx-d2 > .comment,
#modal .mr-post-thread-modal .mrx-list > .mrx-row:not(.mrx-focus).mrx-d2 > .comment,
#modal .mr-comment-thread-modal .mrx-list > .mrx-row:not(.mrx-focus).mrx-d2 > .comment,
#mr-thread-ghost .mrx-list > .mrx-row:not(.mrx-focus).mrx-d2 > .comment,
#mr-back-layer .mrx-list > .mrx-row:not(.mrx-focus).mrx-d2 > .comment {
padding-left: 32px !important;
}
/* poziom 3 */
#modal .mr-post-thread-native .mrx-list > .mrx-row:not(.mrx-focus).mrx-d3 > .comment,
#modal .mr-post-thread-modal .mrx-list > .mrx-row:not(.mrx-focus).mrx-d3 > .comment,
#modal .mr-comment-thread-modal .mrx-list > .mrx-row:not(.mrx-focus).mrx-d3 > .comment,
#mr-thread-ghost .mrx-list > .mrx-row:not(.mrx-focus).mrx-d3 > .comment,
#mr-back-layer .mrx-list > .mrx-row:not(.mrx-focus).mrx-d3 > .comment {
padding-left: 48px !important;
}
/* poziom 4 */
#modal .mr-post-thread-native .mrx-list > .mrx-row:not(.mrx-focus).mrx-d4 > .comment,
#modal .mr-post-thread-modal .mrx-list > .mrx-row:not(.mrx-focus).mrx-d4 > .comment,
#modal .mr-comment-thread-modal .mrx-list > .mrx-row:not(.mrx-focus).mrx-d4 > .comment,
#mr-thread-ghost .mrx-list > .mrx-row:not(.mrx-focus).mrx-d4 > .comment,
#mr-back-layer .mrx-list > .mrx-row:not(.mrx-focus).mrx-d4 > .comment {
padding-left: 60px !important;
}
/* poziom 5 */
#modal .mr-post-thread-native .mrx-list > .mrx-row:not(.mrx-focus).mrx-d5 > .comment,
#modal .mr-post-thread-modal .mrx-list > .mrx-row:not(.mrx-focus).mrx-d5 > .comment,
#modal .mr-comment-thread-modal .mrx-list > .mrx-row:not(.mrx-focus).mrx-d5 > .comment,
#mr-thread-ghost .mrx-list > .mrx-row:not(.mrx-focus).mrx-d5 > .comment,
#mr-back-layer .mrx-list > .mrx-row:not(.mrx-focus).mrx-d5 > .comment {
padding-left: 72px !important;
}
/* poziom 6 */
#modal .mr-post-thread-native .mrx-list > .mrx-row:not(.mrx-focus).mrx-d6 > .comment,
#modal .mr-post-thread-modal .mrx-list > .mrx-row:not(.mrx-focus).mrx-d6 > .comment,
#modal .mr-comment-thread-modal .mrx-list > .mrx-row:not(.mrx-focus).mrx-d6 > .comment,
#mr-thread-ghost .mrx-list > .mrx-row:not(.mrx-focus).mrx-d6 > .comment,
#mr-back-layer .mrx-list > .mrx-row:not(.mrx-focus).mrx-d6 > .comment {
padding-left: 80px !important;
}
/* ==========================================================================
1.0.109 — kolor kresek miedzy komentarzami cofniety
--------------------------------------------------------------------------
W 1.0.104 rozjasnilem je do #2f3336 (tak ma X). Na tym tle wyszlo za
jasno, wiec wracamy do tego, co bylo wczesniej: kolor bierze sie z
arkuszy widokow, czyli #111 (a w bloku telefonu w widoku "Post" #222).
Blok, ktory to nadpisywal, zostal usuniety — nie zastapiony innym.
========================================================================== */
/* ==========================================================================
1.0.108 — KOMENTARZ 1:1 Z X
--------------------------------------------------------------------------
Jeden blok z wymiarami, zebrany w calosc, zamiast wartosci rozsypanych po
trzech arkuszach. Liczby sa te, ktorych uzywa X w ciemnym motywie:
odstep wiersza 12 px w pionie, 16 px w poziomie
awatar 40 x 40, 12 px odstepu do kolumny tresci
nazwa 15 / 20, grubosc 700, #e7e9ea
@nick i czas 15 / 20, grubosc 400, #71767b, w tej samej linii
tresc 15 / 20, #e7e9ea
pasek akcji 20 px wysokosci, 12 px odstepu nad nim
ikony w pasku 18,75 px, kolor #71767b
liczniki 13 / 16, kolor #71767b
kreska kolor z arkusza widoku (patrz 1.0.109)
Wypowiedz, na ktorej otwarty jest watek (.mrx-focus), jest z tego bloku
WYLACZONA. Ma wlasny, szerszy uklad — nazwa i @nick w dwoch liniach,
tresc przez cala szerokosc — dokladnie jak wpis glowny na X. Objecie jej
tymi regulami rozwalalo ten uklad: @nick uciekal pod nazwe, a tresc
wychodzila poza kolumne awatara.
Arkusze widokow "Post" i "Watek" przychodza AJAX-em, czyli PO tym pliku,
i maja przy tych samych wlasnosciach "!important". Dlatego KAZDY selektor
zaczyna sie od #modal albo od identyfikatora warstwy — inaczej przegralby
sama kolejnoscia wczytywania, a nie trescia.
========================================================================== */
/* wiersz: odstepy i zaokraglenie */
#modal .mr-post-thread-native .x_comms_list > li > .mrx-row:not(.mrx-focus) > .comment,
#modal .mr-post-thread-modal .x_comms_list > li > .mrx-row:not(.mrx-focus) > .comment,
#modal .mr-comment-thread-modal .x_comms_list > li > .mrx-row:not(.mrx-focus) > .comment,
#mr-thread-ghost .x_comms_list > li > .mrx-row:not(.mrx-focus) > .comment,
#mr-back-layer .x_comms_list > li > .mrx-row:not(.mrx-focus) > .comment,
#modal .mr-post-thread-native .mrx-list > .mrx-row > .mrx-row:not(.mrx-focus) > .comment,
#modal .mr-post-thread-modal .mrx-list > .mrx-row > .mrx-row:not(.mrx-focus) > .comment,
#modal .mr-comment-thread-modal .mrx-list > .mrx-row > .mrx-row:not(.mrx-focus) > .comment,
#mr-thread-ghost .mrx-list > .mrx-row > .mrx-row:not(.mrx-focus) > .comment,
#mr-back-layer .mrx-list > .mrx-row > .mrx-row:not(.mrx-focus) > .comment,
#modal .mr-post-thread-modal .mr-comment-thread-list > li > .comment,
#modal .mr-comment-thread-modal .mr-comment-thread-list > li > .comment {
padding: 12px 16px !important;
border-radius: 0 !important;
}
/* awatar i odstep do kolumny tresci */
#modal .mr-post-thread-native .mrx-row:not(.mrx-focus) > .comment > .x_user_info,
#modal .mr-post-thread-modal .mrx-row:not(.mrx-focus) > .comment > .x_user_info,
#modal .mr-comment-thread-modal .mrx-row:not(.mrx-focus) > .comment > .x_user_info,
#mr-thread-ghost .mrx-row:not(.mrx-focus) > .comment > .x_user_info,
#mr-back-layer .mrx-row:not(.mrx-focus) > .comment > .x_user_info {
gap: 12px !important;
align-items: flex-start !important;
}
/* awatar: 40 x 40 */
#modal .mr-post-thread-native .mrx-row:not(.mrx-focus) > .comment .comment-avatar-picture,
#modal .mr-post-thread-modal .mrx-row:not(.mrx-focus) > .comment .comment-avatar-picture,
#modal .mr-comment-thread-modal .mrx-row:not(.mrx-focus) > .comment .comment-avatar-picture,
#mr-thread-ghost .mrx-row:not(.mrx-focus) > .comment .comment-avatar-picture,
#mr-back-layer .mrx-row:not(.mrx-focus) > .comment .comment-avatar-picture {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
}
/* naglowek wiersza: nazwa, @nick i czas w JEDNEJ linii */
#modal .mr-post-thread-native .mrx-row:not(.mrx-focus) > .comment .comment-author,
#modal .mr-post-thread-modal .mrx-row:not(.mrx-focus) > .comment .comment-author,
#modal .mr-comment-thread-modal .mrx-row:not(.mrx-focus) > .comment .comment-author,
#mr-thread-ghost .mrx-row:not(.mrx-focus) > .comment .comment-author,
#mr-back-layer .mrx-row:not(.mrx-focus) > .comment .comment-author {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 4px !important;
margin: 0 !important;
line-height: 20px !important;
}
/* nazwa autora */
#modal .mr-post-thread-native .mrx-row:not(.mrx-focus) > .comment .comment-author a,
#modal .mr-post-thread-modal .mrx-row:not(.mrx-focus) > .comment .comment-author a,
#modal .mr-comment-thread-modal .mrx-row:not(.mrx-focus) > .comment .comment-author a,
#mr-thread-ghost .mrx-row:not(.mrx-focus) > .comment .comment-author a,
#mr-back-layer .mrx-row:not(.mrx-focus) > .comment .comment-author a {
display: inline !important;
font-size: 15px !important;
line-height: 20px !important;
font-weight: 700 !important;
color: #e7e9ea !important;
}
/* @nick i czas */
#modal .mr-post-thread-native .mrx-row:not(.mrx-focus) > .comment .mr-thread-handle,
#modal .mr-post-thread-modal .mrx-row:not(.mrx-focus) > .comment .mr-thread-handle,
#modal .mr-comment-thread-modal .mrx-row:not(.mrx-focus) > .comment .mr-thread-handle,
#mr-thread-ghost .mrx-row:not(.mrx-focus) > .comment .mr-thread-handle,
#mr-back-layer .mrx-row:not(.mrx-focus) > .comment .mr-thread-handle,
#modal .mr-post-thread-native .mrx-row:not(.mrx-focus) > .comment .comment-author .js_moment,
#modal .mr-post-thread-modal .mrx-row:not(.mrx-focus) > .comment .comment-author .js_moment,
#modal .mr-comment-thread-modal .mrx-row:not(.mrx-focus) > .comment .comment-author .js_moment,
#mr-thread-ghost .mrx-row:not(.mrx-focus) > .comment .comment-author .js_moment,
#mr-back-layer .mrx-row:not(.mrx-focus) > .comment .comment-author .js_moment {
display: inline !important;
margin: 0 !important;
font-size: 15px !important;
line-height: 20px !important;
font-weight: 400 !important;
color: #71767b !important;
}
/* tresc komentarza */
#modal .mr-post-thread-native .mrx-row:not(.mrx-focus) > .comment .comment-text,
#modal .mr-post-thread-modal .mrx-row:not(.mrx-focus) > .comment .comment-text,
#modal .mr-comment-thread-modal .mrx-row:not(.mrx-focus) > .comment .comment-text,
#mr-thread-ghost .mrx-row:not(.mrx-focus) > .comment .comment-text,
#mr-back-layer .mrx-row:not(.mrx-focus) > .comment .comment-text {
margin-top: 0 !important;
font-size: 15px !important;
line-height: 20px !important;
color: #e7e9ea !important;
}
/* pasek akcji */
#modal .mr-post-thread-native .mrx-row:not(.mrx-focus) > .comment .comment-actions,
#modal .mr-post-thread-modal .mrx-row:not(.mrx-focus) > .comment .comment-actions,
#modal .mr-comment-thread-modal .mrx-row:not(.mrx-focus) > .comment .comment-actions,
#mr-thread-ghost .mrx-row:not(.mrx-focus) > .comment .comment-actions,
#mr-back-layer .mrx-row:not(.mrx-focus) > .comment .comment-actions {
height: 20px !important;
min-height: 20px !important;
max-height: 20px !important;
margin: 12px 0 0 !important;
padding: 0 !important;
color: #71767b !important;
font-size: 13px !important;
line-height: 16px !important;
font-weight: 400 !important;
}
/* przyciski w pasku akcji */
#modal .mr-post-thread-native .mrx-row:not(.mrx-focus) > .comment .comment-actions .action-btn,
#modal .mr-post-thread-modal .mrx-row:not(.mrx-focus) > .comment .comment-actions .action-btn,
#modal .mr-comment-thread-modal .mrx-row:not(.mrx-focus) > .comment .comment-actions .action-btn,
#mr-thread-ghost .mrx-row:not(.mrx-focus) > .comment .comment-actions .action-btn,
#mr-back-layer .mrx-row:not(.mrx-focus) > .comment .comment-actions .action-btn,
#modal .mr-post-thread-native .mrx-row:not(.mrx-focus) > .comment .comment-actions > .pointer,
#modal .mr-post-thread-modal .mrx-row:not(.mrx-focus) > .comment .comment-actions > .pointer,
#modal .mr-comment-thread-modal .mrx-row:not(.mrx-focus) > .comment .comment-actions > .pointer,
#mr-thread-ghost .mrx-row:not(.mrx-focus) > .comment .comment-actions > .pointer,
#mr-back-layer .mrx-row:not(.mrx-focus) > .comment .comment-actions > .pointer {
height: 20px !important;
min-height: 20px !important;
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
color: #71767b !important;
font-size: 13px !important;
line-height: 16px !important;
}
/* ikony w pasku akcji */
#modal .mr-post-thread-native .mrx-row:not(.mrx-focus) > .comment .comment-actions .action-icon,
#modal .mr-post-thread-modal .mrx-row:not(.mrx-focus) > .comment .comment-actions .action-icon,
#modal .mr-comment-thread-modal .mrx-row:not(.mrx-focus) > .comment .comment-actions .action-icon,
#mr-thread-ghost .mrx-row:not(.mrx-focus) > .comment .comment-actions .action-icon,
#mr-back-layer .mrx-row:not(.mrx-focus) > .comment .comment-actions .action-icon,
#modal .mr-post-thread-native .mrx-row:not(.mrx-focus) > .comment .comment-actions .action-btn > svg,
#modal .mr-post-thread-modal .mrx-row:not(.mrx-focus) > .comment .comment-actions .action-btn > svg,
#modal .mr-comment-thread-modal .mrx-row:not(.mrx-focus) > .comment .comment-actions .action-btn > svg,
#mr-thread-ghost .mrx-row:not(.mrx-focus) > .comment .comment-actions .action-btn > svg,
#mr-back-layer .mrx-row:not(.mrx-focus) > .comment .comment-actions .action-btn > svg,
#modal .mr-post-thread-native .mrx-row:not(.mrx-focus) > .comment .comment-actions .reaction-btn svg,
#modal .mr-post-thread-modal .mrx-row:not(.mrx-focus) > .comment .comment-actions .reaction-btn svg,
#modal .mr-comment-thread-modal .mrx-row:not(.mrx-focus) > .comment .comment-actions .reaction-btn svg,
#mr-thread-ghost .mrx-row:not(.mrx-focus) > .comment .comment-actions .reaction-btn svg,
#mr-back-layer .mrx-row:not(.mrx-focus) > .comment .comment-actions .reaction-btn svg {
width: 18.75px !important;
height: 18.75px !important;
color: #71767b !important;
}
/* liczniki przy ikonach */
#modal .mr-post-thread-native .mrx-row:not(.mrx-focus) > .comment .comment-actions span,
#modal .mr-post-thread-modal .mrx-row:not(.mrx-focus) > .comment .comment-actions span,
#modal .mr-comment-thread-modal .mrx-row:not(.mrx-focus) > .comment .comment-actions span,
#mr-thread-ghost .mrx-row:not(.mrx-focus) > .comment .comment-actions span,
#mr-back-layer .mrx-row:not(.mrx-focus) > .comment .comment-actions span {
margin-left: 4px !important;
font-size: 13px !important;
line-height: 16px !important;
color: #71767b !important;
}
/* ── Wciecia kolejnych poziomow rozmowy ────────────────────────────────
Odstep wiersza to teraz wszedzie 16 px, wiec i drabinka wciec jest
jedna — bez osobnych liczb dla telefonu. Kazdy szczebel to +16 px
przy drugim poziomie i po +12 px dalej, dokladnie tak, jak stalo to
w arkuszu od 1.0.93. Nitka idzie za nimi sama, bo jej polozenie liczy
sie jako 'odstep + 19 px'. */
/* poziom 2 */
#modal .mr-post-thread-native .mrx-list > .mrx-row.mrx-d2 > .mrx-row:not(.mrx-focus) > .comment,
#modal .mr-post-thread-modal .mrx-list > .mrx-row.mrx-d2 > .mrx-row:not(.mrx-focus) > .comment,
#modal .mr-comment-thread-modal .mrx-list > .mrx-row.mrx-d2 > .mrx-row:not(.mrx-focus) > .comment,
#mr-thread-ghost .mrx-list > .mrx-row.mrx-d2 > .mrx-row:not(.mrx-focus) > .comment,
#mr-back-layer .mrx-list > .mrx-row.mrx-d2 > .mrx-row:not(.mrx-focus) > .comment {
padding-left: 22px !important;
}
#modal .mr-post-thread-native .mrx-row.mrx-d2::before,
#modal .mr-post-thread-native .mrx-row.mrx-d2::after,
#modal .mr-post-thread-modal .mrx-row.mrx-d2::before,
#modal .mr-post-thread-modal .mrx-row.mrx-d2::after,
#modal .mr-comment-thread-modal .mrx-row.mrx-d2::before,
#modal .mr-comment-thread-modal .mrx-row.mrx-d2::after,
#mr-thread-ghost .mrx-row.mrx-d2::before,
#mr-thread-ghost .mrx-row.mrx-d2::after,
#mr-back-layer .mrx-row.mrx-d2::before,
#mr-back-layer .mrx-row.mrx-d2::after {
left: 41px !important;
}
/* poziom 3 */
#modal .mr-post-thread-native .mrx-list > .mrx-row.mrx-d3 > .mrx-row:not(.mrx-focus) > .comment,
#modal .mr-post-thread-modal .mrx-list > .mrx-row.mrx-d3 > .mrx-row:not(.mrx-focus) > .comment,
#modal .mr-comment-thread-modal .mrx-list > .mrx-row.mrx-d3 > .mrx-row:not(.mrx-focus) > .comment,
#mr-thread-ghost .mrx-list > .mrx-row.mrx-d3 > .mrx-row:not(.mrx-focus) > .comment,
#mr-back-layer .mrx-list > .mrx-row.mrx-d3 > .mrx-row:not(.mrx-focus) > .comment {
padding-left: 38px !important;
}
#modal .mr-post-thread-native .mrx-row.mrx-d3::before,
#modal .mr-post-thread-native .mrx-row.mrx-d3::after,
#modal .mr-post-thread-modal .mrx-row.mrx-d3::before,
#modal .mr-post-thread-modal .mrx-row.mrx-d3::after,
#modal .mr-comment-thread-modal .mrx-row.mrx-d3::before,
#modal .mr-comment-thread-modal .mrx-row.mrx-d3::after,
#mr-thread-ghost .mrx-row.mrx-d3::before,
#mr-thread-ghost .mrx-row.mrx-d3::after,
#mr-back-layer .mrx-row.mrx-d3::before,
#mr-back-layer .mrx-row.mrx-d3::after {
left: 57px !important;
}
/* poziom 4 */
#modal .mr-post-thread-native .mrx-list > .mrx-row.mrx-d4 > .mrx-row:not(.mrx-focus) > .comment,
#modal .mr-post-thread-modal .mrx-list > .mrx-row.mrx-d4 > .mrx-row:not(.mrx-focus) > .comment,
#modal .mr-comment-thread-modal .mrx-list > .mrx-row.mrx-d4 > .mrx-row:not(.mrx-focus) > .comment,
#mr-thread-ghost .mrx-list > .mrx-row.mrx-d4 > .mrx-row:not(.mrx-focus) > .comment,
#mr-back-layer .mrx-list > .mrx-row.mrx-d4 > .mrx-row:not(.mrx-focus) > .comment {
padding-left: 50px !important;
}
#modal .mr-post-thread-native .mrx-row.mrx-d4::before,
#modal .mr-post-thread-native .mrx-row.mrx-d4::after,
#modal .mr-post-thread-modal .mrx-row.mrx-d4::before,
#modal .mr-post-thread-modal .mrx-row.mrx-d4::after,
#modal .mr-comment-thread-modal .mrx-row.mrx-d4::before,
#modal .mr-comment-thread-modal .mrx-row.mrx-d4::after,
#mr-thread-ghost .mrx-row.mrx-d4::before,
#mr-thread-ghost .mrx-row.mrx-d4::after,
#mr-back-layer .mrx-row.mrx-d4::before,
#mr-back-layer .mrx-row.mrx-d4::after {
left: 69px !important;
}
/* poziom 5 */
#modal .mr-post-thread-native .mrx-list > .mrx-row.mrx-d5 > .mrx-row:not(.mrx-focus) > .comment,
#modal .mr-post-thread-modal .mrx-list > .mrx-row.mrx-d5 > .mrx-row:not(.mrx-focus) > .comment,
#modal .mr-comment-thread-modal .mrx-list > .mrx-row.mrx-d5 > .mrx-row:not(.mrx-focus) > .comment,
#mr-thread-ghost .mrx-list > .mrx-row.mrx-d5 > .mrx-row:not(.mrx-focus) > .comment,
#mr-back-layer .mrx-list > .mrx-row.mrx-d5 > .mrx-row:not(.mrx-focus) > .comment {
padding-left: 62px !important;
}
#modal .mr-post-thread-native .mrx-row.mrx-d5::before,
#modal .mr-post-thread-native .mrx-row.mrx-d5::after,
#modal .mr-post-thread-modal .mrx-row.mrx-d5::before,
#modal .mr-post-thread-modal .mrx-row.mrx-d5::after,
#modal .mr-comment-thread-modal .mrx-row.mrx-d5::before,
#modal .mr-comment-thread-modal .mrx-row.mrx-d5::after,
#mr-thread-ghost .mrx-row.mrx-d5::before,
#mr-thread-ghost .mrx-row.mrx-d5::after,
#mr-back-layer .mrx-row.mrx-d5::before,
#mr-back-layer .mrx-row.mrx-d5::after {
left: 81px !important;
}
/* poziom 6 */
#modal .mr-post-thread-native .mrx-list > .mrx-row.mrx-d6 > .mrx-row:not(.mrx-focus) > .comment,
#modal .mr-post-thread-modal .mrx-list > .mrx-row.mrx-d6 > .mrx-row:not(.mrx-focus) > .comment,
#modal .mr-comment-thread-modal .mrx-list > .mrx-row.mrx-d6 > .mrx-row:not(.mrx-focus) > .comment,
#mr-thread-ghost .mrx-list > .mrx-row.mrx-d6 > .mrx-row:not(.mrx-focus) > .comment,
#mr-back-layer .mrx-list > .mrx-row.mrx-d6 > .mrx-row:not(.mrx-focus) > .comment {
padding-left: 70px !important;
}
#modal .mr-post-thread-native .mrx-row.mrx-d6::before,
#modal .mr-post-thread-native .mrx-row.mrx-d6::after,
#modal .mr-post-thread-modal .mrx-row.mrx-d6::before,
#modal .mr-post-thread-modal .mrx-row.mrx-d6::after,
#modal .mr-comment-thread-modal .mrx-row.mrx-d6::before,
#modal .mr-comment-thread-modal .mrx-row.mrx-d6::after,
#mr-thread-ghost .mrx-row.mrx-d6::before,
#mr-thread-ghost .mrx-row.mrx-d6::after,
#mr-back-layer .mrx-row.mrx-d6::before,
#mr-back-layer .mrx-row.mrx-d6::after {
left: 89px !important;
}
/* 1.0.135 — wiersze w modalu maja padding 12px 16px (linia 1048), wiec nitka
liczy sie od tego: lewy odstep 16 px + 19 px do osi kreski = 35 px, a pionowa
startuje od gornej krawedzi awatara (gorny padding 12 px) i konczy pod nim
(12 + 40 = 52 px). Te same wartosci we WSZYSTKICH kontekstach modala i
warstwie cofania, wiec nic nie skacze przy przechodzeniu miedzy nimi. */
#modal .mr-post-thread-native .mrx-row,
#modal .mr-post-thread-modal .mrx-row,
#modal .mr-comment-thread-modal .mrx-row,
#mr-thread-ghost .mrx-row,
#mr-back-layer .mrx-row {
--mrx-pad: 16px !important;
}
#modal .mr-post-thread-native .mrx-row.mrx-line-up::before,
#modal .mr-post-thread-modal .mrx-row.mrx-line-up::before,
#modal .mr-comment-thread-modal .mrx-row.mrx-line-up::before,
#mr-thread-ghost .mrx-row.mrx-line-up::before,
#mr-back-layer .mrx-row.mrx-line-up::before {
height: 12px !important;
}
#modal .mr-post-thread-native .mrx-row.mrx-line-down::after,
#modal .mr-post-thread-modal .mrx-row.mrx-line-down::after,
#modal .mr-comment-thread-modal .mrx-row.mrx-line-down::after,
#mr-thread-ghost .mrx-row.mrx-line-down::after,
#mr-back-layer .mrx-row.mrx-line-down::after {
top: 52px !important;
}
/* ==========================================================================
1.0.109 — panel wchodzi plynnie, bez okienka ladowania
--------------------------------------------------------------------------
Zamiast kolka na srodku ekranu panel ma teraz wlasne, krotkie wejscie:
pojawia sie z lekkim przesunieciem z dolu. Trwa 180 ms, czyli mniej wiecej
tyle, ile zapytanie do serwera — dzieki temu wyglada to na jedno plynne
zdarzenie, a nie na dwa osobne.
========================================================================== */
/* ==========================================================================
1.0.113 — przejscia bez migania zdjec
--------------------------------------------------------------------------
Zdjecia mrugaly przy kazdym przejsciu miedzy wpisami. Powod: animacja
zmieniala PRZEZROCZYSTOSC calego panelu. Przy zmianie przezroczystosci
przegladarka musi zlozyc warstwe od nowa, wiec kazdy obrazek jest
rysowany jeszcze raz — a jesli akurat sie doczytuje, widac to jako
mrugniecie.
Animujemy wiec juz TYLKO przesuniecie (transform). Przesuniecie idzie
po stronie karty graficznej i nie wymaga przerysowania obrazkow. Ruch
wyglada tak samo, a zdjecia stoja spokojnie.
========================================================================== */
@keyframes mr-thread-wejscie {
from { transform: translate3d(0, 6px, 0); }
to { transform: translate3d(0, 0, 0); }
}
#modal.mr-thread-entering .modal-content {
animation: mr-thread-wejscie .18s ease-out both;
}
/* ==========================================================================
1.0.111 — na telefonie panel WJEZDZA Z PRAWEJ, tak jak na X
--------------------------------------------------------------------------
Na PC zostaje delikatne podniesienie (panel jest kolumna posrodku strony
i przesuwanie w bok wygladaloby tam dziwnie). Na telefonie panel zajmuje
caly ekran, wiec zachowuje sie jak kolejna strona: wjezdza z prawej,
a to, co bylo pod spodem, zostaje na miejscu.
========================================================================== */
@keyframes mr-thread-wjazd-z-prawej {
from { transform: translate3d(22%, 0, 0); }
to { transform: translate3d(0, 0, 0); }
}
@media (max-width: 767.98px) {
#modal.mr-thread-entering .modal-content {
animation: mr-thread-wjazd-z-prawej .22s cubic-bezier(.22, .61, .36, 1) both;
box-shadow: -18px 0 40px rgba(0, 0, 0, .55);
will-change: transform, opacity;
}
}
@media (prefers-reduced-motion: reduce) {
#modal.mr-thread-entering .modal-content {
animation: none;
}
}
/* ==========================================================================
1.0.113 — zdjecia w panelu stoja spokojnie
--------------------------------------------------------------------------
Poza samymi klatkami animacji pomaga jeszcze jedno: powiedzenie
przegladarce wprost, ze te obrazki nie zmieniaja sie w trakcie ruchu.
Dzieki temu trzyma je w gotowej postaci zamiast skalowac od nowa przy
kazdej klatce.
========================================================================== */
#modal.mr-thread-entering .post-media img,
#modal.mr-thread-entering .post-media-image img,
#modal.mr-thread-entering .comment-media img,
#modal.mr-thread-entering .mr-comment-photo-grid img,
#modal.mr-modal-enter-right .post-media img,
#modal.mr-modal-enter-left .post-media img,
#mr-thread-ghost .post-media img,
#mr-back-layer .post-media img {
backface-visibility: hidden;
transform: translateZ(0);
image-rendering: auto;
}
/* ==========================================================================
1.0.140 — po wyborze reakcji lista ma zostac schowana
--------------------------------------------------------------------------
Motyw pokazuje liste wpisujac style prosto w atrybut style="", wiec samo
.hide() z JS przegrywa z kolejnym mouseenter. Ta regula jest silniejsza
i trzyma liste zamknieta, dopoki post.js nie zdejmie klasy z
(czyli az kursor zejdzie z przycisku albo palec dotknie czegos obok).
========================================================================== */
body.mr-reactions-off .reactions-container {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* ==========================================================================
1.0.141 — na PC panel nie wjezdza z boku
--------------------------------------------------------------------------
Przejscie z powiadomien do wpisu odpalalo animacje wjazdu z prawej.
Na telefonie to ma sens (wchodzimy glebiej), ale na PC panel stoi
w srodkowej kolumnie i taki wjazd wyglada jak szarpniecie calej strony.
Poprawka w post.js usuwa przyczyne, a ta regula pilnuje skutku.
========================================================================== */
@media (min-width: 768px) {
#modal.mr-thread-entering .modal-content {
animation: none !important;
transform: none !important;
}
}
/* ==========================================================================
1.0.146 — podswietlenie pozycji w menu
--------------------------------------------------------------------------
Kolor bierze sie z klasy "main", ktora dokladamy razem z motywem — nie
wpisujemy tu wlasnej barwy, zeby aktywna pozycja wygladala DOKLADNIE tak
samo jak ta zaznaczona przez serwer. Wypelniony rysunek ikony podstawia
mr_menu_ikona() w post.js.
========================================================================== */
.x_side_links.mr-panel-active,
.x_side_links.mr-panel-active svg,
.x_side_links.mr-panel-active i {
opacity: 1 !important;
}
/* ==========================================================================
1.0.151 — LICZBA REAKCJI PRZY SERDUSZKU
--------------------------------------------------------------------------
Bylo: po lewej stronie osobny blok z ikonka kazdego rodzaju reakcji
i liczba, a serce przycisku dopiero na srodku. Teraz zostaje samo serce
na srodku, a liczba stoi tuz obok niego.
Ikonki chowamy tutaj, a caly klikalny blok przenosi obok serca
mr_komentarz_licznik_reakcji() w post.js — dzieki przeniesieniu (a nie
przepisaniu) zostaje oryginalne data-url, wiec klikniecie nadal otwiera
liste osob, ktore zareagowaly.
========================================================================== */
.comment-actions .reactions-stats .reactions-stats-item {
display: none !important;
}
.comment-actions .reactions-stats {
gap: 0 !important;
}
/* Serce i liczba w jednym przycisku, w normalnym przeplywie.
--------------------------------------------------------------------------
Wczesniej liczba byla pozycjonowana absolutnie (1.0.155). Trzymala sie
serca, ale NIE ZAJMOWALA MIEJSCA — przez to nachodzila na sasiednia
ikone i caly wiersz robil sie scisniety. Teraz wrapper jest inline-flex
i rosnie o szerokosc liczby, wiec sasiedzi odsuwaja sie normalnie. */
.comment-actions .reactions-wrapper {
position: relative;
display: inline-flex !important;
align-items: center;
gap: 5px;
width: auto !important;
border-radius: 999px !important;
overflow: visible !important;
}
.comment-actions .mr-reakcje-przy-sercu {
position: static !important;
margin: 0 !important;
padding: 0 !important;
display: inline-flex;
align-items: center;
line-height: 1;
white-space: nowrap;
cursor: pointer;
}
/* rozmiar i grubosc dziedziczymy po wierszu, zeby liczba polubien wygladala
tak samo jak liczba komentarzy obok; kolor dokłada post.js */
.comment-actions .mr-reakcje-przy-sercu .reactions-stats,
.comment-actions .mr-reakcje-przy-sercu .reactions-stats > span {
margin: 0 !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* ── Czytelniejszy wiersz akcji na telefonie ─────────────────────────────
Ikony stykaly sie ze soba. Dajemy wierszowi oddech po bokach i troche
wieksze pola dotyku. */
@media (max-width: 767.98px) {
.mr-post-thread-modal .comment-actions,
.mr-comment-thread-modal .comment-actions {
padding-inline: 2px 6px;
}
.mr-post-thread-modal .comment-actions .action-btn,
.mr-comment-thread-modal .comment-actions .action-btn {
padding: 5px !important;
}
}
/* ==========================================================================
1.0.157 — ODSTEPY W PASKU AKCJI KOMENTARZA (jak na X)
--------------------------------------------------------------------------
Panel ograniczal wiersz do max-width: 425px, wiec na telefonie szesc ikon
scieskalo sie do siebie i pasek byl nieczytelny. X rozklada je na CALA
szerokosc kolumny, z wyraznym odstepem miedzy pozycjami.
========================================================================== */
@media (max-width: 767.98px) {
.mr-post-thread-modal .comment-actions,
.mr-comment-thread-modal .comment-actions {
max-width: none !important;
/* 1.0.159 — NIE narzucamy width: 100%.
Pasek akcji glownej wypowiedzi ma w ajax.comment.thread.tpl
ujemne marginesy (margin: 4px -16px 0 -68px), zeby kreska siegala
scianek panelu. Przy width: 100% element startuje 68 px na lewo
od kolumny, ale konczy sie po jej szerokosci — czyli 68 px PRZED
prawa krawedzia. Stad wezszy pasek i krotsza kreska.
width: auto pozwala mu dojsc do konca. */
width: auto !important;
height: auto !important;
min-height: 34px !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding-inline-end: 0 !important;
}
/* Zakladka i udostepnianie byly scisniete przy prawej krawedzi.
Odsuwamy je od reszty i zostawiamy male swiatlo z prawej strony,
zeby ostatnia ikona nie dotykala brzegu ekranu. */
.mr-post-thread-modal .comment-actions > *:nth-last-child(2),
.mr-comment-thread-modal .comment-actions > *:nth-last-child(2) {
margin-inline-start: 10px !important;
}
.mr-post-thread-modal .comment-actions > *:last-child,
.mr-comment-thread-modal .comment-actions > *:last-child {
margin-inline-start: 10px !important;
margin-inline-end: 4px !important;
}
.mr-post-thread-modal .comment-actions .action-btn,
.mr-comment-thread-modal .comment-actions .action-btn {
padding: 6px 2px !important;
gap: 6px !important;
}
/* ikony odrobine wieksze — przy wiekszych odstepach nie zlewaja sie */
.mr-post-thread-modal .comment-actions .action-icon,
.mr-comment-thread-modal .comment-actions .action-icon {
width: 20px !important;
height: 20px !important;
}
}
/* ==========================================================================
1.0.158 — WYROZNIONA WYPOWIEDZ NA PELNA SZEROKOSC
--------------------------------------------------------------------------
W watku wpis, na ktorym otwarto rozmowe (.mrx-focus), mial wezszy pasek
akcji i krotsza kreske od pozostalych — konczyly sie mniej wiecej
w polowie ekranu. Bierze sie to z ograniczenia max-width, ktore ma sens
na PC, ale na telefonie zostawia puste pole po prawej.
========================================================================== */
@media (max-width: 767.98px) {
.mrx-row.mrx-focus .comment-actions {
max-width: none !important;
width: auto !important;
}
/* kreska pod wypowiedzia ma isc przez cala szerokosc */
.mrx-row.mrx-focus > .comment,
.mrx-row.mrx-focus .comment-actions {
box-sizing: border-box;
}
}
/* ==========================================================================
1.0.162 — OZNACZONA OSOBA W TRESCI
--------------------------------------------------------------------------
Wzmianka to nick
wewnatrz .post-text / .comment-text. Sam dziedziczyl kolor tekstu
(#e7e9ea), wiec oznaczenie niczym sie nie wyroznialo.
Kolorujemy zarowno span, jak i odnosnik w srodku — motyw ustawia kolor
na .post-text i .comment-text, wiec bez tego drugiego selektora
dziedziczenie i tak by wygralo.
========================================================================== */
.post-text .js_user-popover,
.comment-text .js_user-popover,
.post-text .js_user-popover a,
.comment-text .js_user-popover a,
.mr-comment-thread-modal .comment-text .js_user-popover a,
.mr-post-thread-modal .comment-text .js_user-popover a {
color: #0053cb !important;
font-weight: 600;
text-decoration: none;
}
.post-text .js_user-popover a:hover,
.comment-text .js_user-popover a:hover {
text-decoration: underline;
}
/* ==========================================================================
1.0.165 — FILTR KOMENTARZY W STYLU X
--------------------------------------------------------------------------
Zamiast szarej pigulki z ikona "hamburgera" — zwykly tekst z daszkiem,
dokladnie jak przelacznik sortowania na X.
Nie ruszam znacznikow: przycisk nadal jest .btn z data-bs-toggle,
a lista pozycji to .dropdown-menu. Cala obsluga (js_comments-filter)
dziala bez zmian, wiec sortowanie sie nie psuje. Zmieniamy WYLACZNIE
wyglad, i to tak, zeby przebic wszystkie 15 regul, ktore motyw i panel
nakladaly na ten przycisk.
Reguly celuja w oba miejsca, gdzie filtr wystepuje: w panelu wpisu
(.mr-post-thread-native) i na zwyklej stronie posta.
========================================================================== */
.comments-filter,
#modal .mr-post-thread-native .comments-filter {
/* Filtr musi zajmowac WLASNY wiersz. Przy samym margin: 0 tracil
odstep, ktory motyw dawal klasami mb-2 pb-1, i w chwili otwierania
publishera nachodzil na wiersz "Opublikuj swoja odpowiedz".
Blok o pelnej szerokosci z wlasnym tlem trzyma go na miejscu przez
caly czas przejscia. */
display: block !important;
position: relative !important;
z-index: 1 !important;
width: 100% !important;
box-sizing: border-box !important;
min-height: 34px !important;
margin: 0 0 2px !important;
padding: 10px 16px 6px !important;
border: 0 !important;
background: #000 !important;
transform: none !important;
transition: none !important;
}
/* przycisk nie moze wystawac poza swoj wiersz */
.comments-filter > .btn-group,
#modal .mr-post-thread-native .comments-filter > .btn-group {
display: inline-flex !important;
align-items: center !important;
height: 18px !important;
position: relative !important;
float: none !important;
vertical-align: top !important;
transform: none !important;
transition: none !important;
}
/* przycisk: sam tekst, zero tla i obramowania */
.comments-filter .btn,
.comments-filter .btn.dropdown-toggle,
#modal .mr-post-thread-native .comments-filter .btn,
#modal .mr-post-thread-native .comments-filter .btn.dropdown-toggle {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #71767b !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
transform: none !important;
transition: color .12s ease !important;
}
.comments-filter .btn:hover,
#modal .mr-post-thread-native .comments-filter .btn:hover {
color: #e7e9ea !important;
background: transparent !important;
text-decoration: none !important;
}
/* ikona "hamburgera" z motywu znika — X jej nie ma */
.comments-filter .btn > svg,
#modal .mr-post-thread-native .comments-filter .btn > svg {
display: none !important;
}
.comments-filter .btn-group-text,
#modal .mr-post-thread-native .comments-filter .btn-group-text {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
color: inherit !important;
font: inherit !important;
}
/* daszek rysujemy sami, zeby nie zalezec od strzalki Bootstrapa */
.comments-filter .btn.dropdown-toggle::after,
#modal .mr-post-thread-native .comments-filter .btn.dropdown-toggle::after {
content: "" !important;
display: inline-block !important;
width: 7px !important;
height: 7px !important;
margin: -3px 0 0 2px !important;
border: 0 !important;
border-right: 1.6px solid currentColor !important;
border-bottom: 1.6px solid currentColor !important;
transform: rotate(45deg) !important;
vertical-align: middle !important;
transition: transform .15s ease !important;
}
/* po rozwinieciu daszek obraca sie do gory */
.comments-filter .btn.dropdown-toggle.show::after,
#modal .mr-post-thread-native .comments-filter .btn.dropdown-toggle.show::after {
transform: rotate(-135deg) !important;
margin-top: 2px !important;
}
/* 1.0.173 — stale metryki napisu "Ostatnio dodane".
Bootstrap i lokalne reguly zmienialy font przy :active/.show, przez co
napis optycznie skakal mimo stalego polozenia calego filtra. */
.comments-filter,
#modal .mr-post-thread-native .comments-filter,
.comments-filter .btn,
.comments-filter .btn:hover,
.comments-filter .btn:focus,
.comments-filter .btn:active,
.comments-filter .btn.show,
.comments-filter .btn.dropdown-toggle,
.comments-filter .btn.dropdown-toggle.show,
.comments-filter .btn-group-text,
#modal .mr-post-thread-native .comments-filter .btn,
#modal .mr-post-thread-native .comments-filter .btn:hover,
#modal .mr-post-thread-native .comments-filter .btn:focus,
#modal .mr-post-thread-native .comments-filter .btn:active,
#modal .mr-post-thread-native .comments-filter .btn.show,
#modal .mr-post-thread-native .comments-filter .btn.dropdown-toggle,
#modal .mr-post-thread-native .comments-filter .btn.dropdown-toggle.show,
#modal .mr-post-thread-native .comments-filter .btn-group-text {
font-size: 14px !important;
line-height: 18px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-transform: none !important;
transform: none !important;
}
.comments-filter .btn *,
#modal .mr-post-thread-native .comments-filter .btn * {
font-size: inherit !important;
line-height: inherit !important;
font-weight: inherit !important;
letter-spacing: inherit !important;
}
/* lista pozycji — ciemna, jak reszta panelu */
.comments-filter .dropdown-menu,
#modal .mr-post-thread-native .comments-filter .dropdown-menu {
min-width: 190px;
padding: 6px 0;
border: 1px solid #2f3336;
border-radius: 14px;
background: #000;
box-shadow: 0 0 14px rgba(255, 255, 255, .08);
}
.comments-filter .dropdown-item,
#modal .mr-post-thread-native .comments-filter .dropdown-item {
padding: 10px 16px;
color: #e7e9ea;
font-size: 15px;
background: transparent;
}
.comments-filter .dropdown-item:hover,
#modal .mr-post-thread-native .comments-filter .dropdown-item:hover {
background: #0a0a0a;
color: #e7e9ea;
}
/* ==========================================================================
1.0.168 — KONIEC PRZESKOKOW UKLADU PRZY OTWIERANIU OKIEN
--------------------------------------------------------------------------
Filtr komentarzy nie zmienial swojego paddingu — przesuwala sie CALA
strona, a on razem z nia. Zrodlo jest w _publisher.tpl (linia 832):
body.mr-main-publisher-open { overflow: hidden !important; }
plus to samo, co robi Bootstrap przy kazdym oknie: dokłada klase
modal-open, chowa pasek przewijania i rezerwuje po nim miejsce
przez padding-right. Strona zwezala sie wiec o szerokosc paska i wszystko
drgalo w lewo — najbardziej widoczny byl wlasnie filtr.
Poprawialem to juz punktowo (1.0.138), wymieniajac klasy naszych paneli.
Bylo to zawodne: przy publisherze klasy na sa inne i przypadek
znowu wypadal poza lista.
Teraz rozwiazujemy to u zrodla. scrollbar-gutter: stable kaze przegladarce
trzymac miejsce na pasek przewijania NA STALE, wiec jego zniknieciu nie
towarzyszy zadna zmiana szerokosci. Rezerwa Bootstrapa staje sie zbedna
i zerujemy ja dla wszystkich okien.
========================================================================== */
html {
/* Sam scrollbar-gutter nie wystarczyl. Dziala on wtedy, gdy element
MOZE sie przewijac — a publisher ustawia overflow: hidden,
wiec pasek i tak znikal i strona sie rozszerzala.
overflow-y: scroll trzyma pasek widoczny ZAWSZE, niezaleznie od tego,
co ktokolwiek ustawi na . Szerokosc obszaru tresci przestaje
sie wtedy zmieniac przy otwieraniu okien. */
overflow-y: scroll !important;
scrollbar-gutter: stable;
}
body.modal-open {
padding-right: 0 !important;
}
.js_post-link[data-post-url] { cursor: pointer; }
.js_post-link[data-post-url]:focus-visible { outline: 2px solid #0053cb; outline-offset: 2px; }
.poll-vote-button:focus-visible { outline: 2px solid #0053cb; outline-offset: 2px; }
.poll-options[aria-busy="true"] .poll-vote-button { cursor: wait; }
/* MeczRealu: znacznik przypietej odpowiedzi (styl X) */
.mr-pinned-badge {
display: inline-flex;
align-items: center;
gap: 4px;
margin-bottom: 2px;
font-size: 12px;
font-weight: 600;
line-height: 1;
color: #536471;
}
.mr-pinned-badge svg { flex: 0 0 auto; opacity: .9; }
html[data-mr-default-theme="dark"] .mr-pinned-badge,
:root[data-theme="dark"] .mr-pinned-badge,
.dark-mode .mr-pinned-badge { color: #8b98a5; }
.mr-pinned-badge.x-hidden { display: none !important; }
/* MeczRealu: Notatki spolecznosci — style w , zeby karta z SSR byla
ostylowana od razu (bez migotania ramki). Ramka i pozioma linia: #222. */
.mr-cn-host{margin:12px 0 2px}
.mr-cn-card{border:1px solid #222;border-radius:16px;padding:11px 15px;margin:10px 0;background:transparent}
.mr-cn-pending{border-style:dashed}
.mr-cn-head{align-items:center;color:#71767b;display:flex;font-size:13px;font-weight:600;gap:7px;margin-bottom:5px}
.mr-cn-title{color:#71767b}
.mr-cn-pending .mr-cn-title{color:#c99400}
.mr-cn-author{color:#71767b;font-weight:400}
.mr-cn-del{background:transparent;border:0;border-radius:6px;color:#71767b;cursor:pointer;font-size:12.5px;line-height:1;margin-left:auto;padding:3px 7px}
.mr-cn-del:hover{background:rgba(244,33,46,.12);color:#f4212e}
.mr-cn-body{color:#e7e9ea;font-size:14px;line-height:1.45;overflow-wrap:anywhere;white-space:normal}
.mr-cn-source{align-items:center;color:#71767b;display:inline-flex;font-size:13px;gap:5px;margin-top:8px;text-decoration:none;word-break:break-all}
.mr-cn-source:hover{color:#e7e9ea;text-decoration:underline}
.mr-cn-rate{align-items:center;border-top:1px solid #222;display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;padding-top:9px}
.mr-cn-rate-label{color:#71767b;font-size:12.5px;margin-right:2px}
.mr-cn-vote{align-items:center;background:transparent;border:1px solid #333639;border-radius:999px;color:#e7e9ea;cursor:pointer;display:inline-flex;font-size:12px;font-weight:600;gap:5px;padding:3px 10px}
.mr-cn-vote b{font-weight:700}
.mr-cn-vote:hover{background:#181818}
.mr-cn-vote.is-on{background:#eff3f4;border-color:#eff3f4;color:#0f1419}
.mr-cn-modrow{display:flex;gap:8px;margin-top:11px}
.mr-cn-mod{align-items:center;background:transparent;border:1px solid #536471;border-radius:999px;color:#e7e9ea;cursor:pointer;display:inline-flex;font-size:13px;font-weight:700;gap:6px;padding:6px 15px}
.mr-cn-approve:hover{background:#181818;border-color:#e7e9ea}
.mr-cn-reject:hover{background:rgba(244,33,46,.12);border-color:#f4212e;color:#f4212e}
.mr-cn-mod:disabled{opacity:.55;cursor:default}
.mr-cn-hint{align-items:center;color:#71767b;display:flex;flex-wrap:wrap;font-size:13px;gap:7px;margin:8px 0 2px}
.mr-cn-withdraw{background:transparent;border:0;color:#f4212e;cursor:pointer;font:inherit;font-size:13px;padding:0;text-decoration:none}
.mr-cn-withdraw:hover{text-decoration:underline}
.mr-cn-overlay{align-items:center;background:rgba(0,0,0,.6);display:flex;inset:0;justify-content:center;padding:16px;position:fixed;z-index:2147483000}
.mr-cn-dialog{background:#000;border:1px solid #2f3336;border-radius:16px;box-shadow:0 0 24px rgba(255,255,255,.08);color:#e7e9ea;max-width:460px;padding:20px;width:100%}
.mr-cn-dialog h2{font-size:19px;margin:0 0 8px}
.mr-cn-dialog-help{color:#71767b;font-size:13px;line-height:1.5;margin:0 0 12px}
.mr-cn-input{background:#000;border:1px solid #333639;border-radius:10px;color:#e7e9ea;display:block;font:inherit;font-size:15px;margin-bottom:10px;padding:11px 12px;width:100%}
.mr-cn-input:focus{border-color:#536471;outline:0}
textarea.mr-cn-input{resize:vertical}
.mr-cn-dialog-status{color:#71767b;font-size:12.5px;margin:0 0 6px;min-height:16px}.mr-cn-dialog-status.is-error{color:#f4212e}
.mr-cn-dialog-actions{align-items:center;display:flex;gap:8px;justify-content:flex-end}
.mr-cn-dialog-actions button{background:transparent;border:1px solid #536471;border-radius:999px;color:#e7e9ea;cursor:pointer;font-weight:700;min-height:38px;padding:7px 16px}
.mr-cn-dialog-send{background:#eff3f4 !important;border-color:#eff3f4 !important;color:#0f1419 !important}
.mr-cn-dialog-send:disabled{opacity:.6}
html[data-mr-theme="light"] .mr-cn-card{border-color:#cfd9de}
html[data-mr-theme="light"] .mr-cn-body{color:#0f1419}
html[data-mr-theme="light"] .mr-cn-vote{color:#0f1419;border-color:#cfd9de}
html[data-mr-theme="light"] .mr-cn-vote.is-on{background:#0f1419;border-color:#0f1419;color:#fff}
html[data-mr-theme="light"] .mr-cn-vote:hover{background:#eff3f4}
html[data-mr-theme="light"] .mr-cn-mod{color:#0f1419;border-color:#cfd9de}
html[data-mr-theme="light"] .mr-cn-dialog{background:#fff;border-color:#cfd9de;color:#0f1419}
html[data-mr-theme="light"] .mr-cn-input{background:#fff;border-color:#cfd9de;color:#0f1419}
html[data-mr-theme="light"] .mr-cn-dialog-actions button{color:#0f1419;border-color:#cfd9de}
html[data-mr-theme="light"] .mr-cn-dialog-send{background:#0f1419 !important;border-color:#0f1419 !important;color:#fff !important}
.mr-cn-extras{display:block}
/* MeczRealu: KONIEC skakania rozmiaru napisu "Ostatnio dodane".
Watek (ajax.post.thread.tpl) wstrzykuje swoj