[Ингбур]

Пользовательские стили для кубиков. Применяется с использованием соответствующего плагина браузера либо при индивидуальной непереносимости дефолтного стиля, либо если бросков делается сразу по многу.

Было:

Стало:

    CSS

.dicetop, .dicemain {
display: inline;
font-size: 11px;
line-height: 220%;
white-space: nowrap;
}
.dicetop {
background: #E4EAF2 url(http://rttw.ru/forum/style_images/rttw/dice.png) no-repeat left;
padding: 3px 3px 3px 24px;
margin: 0;
}
.dicemain {
border: solid #C2CFDF;
border-width: 1px 2px 1px 1px;
padding: 3px 0 3px 3px;
margin: 0 3px 0 0;
}
.dicemain br, .dicemain b {
display: none;
}

    Known Issues

В связи с особенностями генерируемого форумом HTML (текстовые элементы) не всё удаётся полностью настроить:

В случае изменения генерации HTML (помещения каждого текстового элемент в отдельный SPAN, помещения обоих .dicetop, .dicemain в общий специальный DIV) будет настраиваться вообще идеально.

Сообщение отредактировано: Ингбур - 19 Июля 2013, 18:22

[Ингбур]

Убрать значок кубика просто (см. код в спойлере, поправленный с некоторыми поправками по мотивам сообщения Призрака Форума).

    CSS

.dicetop, .dicemain {
display: inline-block;
font-size: 11px;
white-space: nowrap;
}
.dicetop {
background: #E4EAF2 url(http://rttw.ru/forum/style_images/rttw/dice.png) no-repeat left;
padding: 1px 3px 1px 24px;
background: #E4EAF2;
padding: 1px 3px 1px 3px;
margin: 0;
min-width: 100px;
}
.dicemain {
border: solid #C2CFDF;
border-width: 1px 2px 1px 1px;
padding: 1px 3px 1px 3px;
margin: 1px 3px 1px 0;
}
.dicemain br {
display: none;
}
.dicemain b {
display: none;
text-indent: -9999px;
width: 8px;
}
.dicemain b:nth-of-type(2) {
display: inline-block;
}

Чтобы сделать разный стиль для кода броска и для результата броска одними стилями не обойтись. Тут либо движок сайта должен текст заворачивать во что-то типа SPAN либо пользовательский JavaScript типа Greasemonkey должен это делать.

    CSS+JS

.dicetop, .dicemain {
display: inline-block;
font-size: 11px;
white-space: nowrap;
cursor: default;
}
.dicetop {
background: #E4EAF2;
border-width: 1px 0px 1px 2px;
padding: 1px 3px 1px 3px;
margin: 0;
min-width: 100px;
}
.dicemain {
border: solid #C2CFDF;
border-width: 1px 2px 1px 1px;
padding: 1px 3px 1px 3px;
margin: 1px 3px 1px 0;
}

Array.prototype.slice.call(document.getElementsByClassName("dicemain"), 0).forEach(function(diceDiv) {
diceDiv.previousSibling.parentNode.removeChild(diceDiv.previousSibling);
var hint = diceDiv.previousSibling.innerHTML;
diceDiv.innerHTML = diceDiv.innerHTML.replace(/<b>.+?<\/b>(.+?)<br>\s*<b>.+?<\/b>(.+?)\s*\(<b>.+?<\/b>(.+?)\)/g, '<span title="' + hint + ' = $2">$1 = <b>$3</b></span>');
});

Результат со скриптом (курсор на скриншоте не снялся, он наведён на третий из бросков):


Сообщение отредактировано: Ингбур - 20 Июля 2013, 13:09