Навигация с использованием <tabs> в RSS Librocket (CSS-иш)

Question

Я полный новичок в RSS/CSS, и у меня возникли некоторые проблемы с получением этого кода. По сути, я хочу сделать следующее: иметь панель навигации, используя элемент tabset из Librocket (для экрана параметров). У меня проблемы с поддержанием активного / нажатого состояния (чтобы показать пользователю, какая вкладка активна). Я пытался использовать ":focus", но фокус теряется, когда я нажимаю в другом месте. Если я использую ":active", активное состояние остается, только если я удерживаю кнопку мыши на объекте.

Во всяком случае, вот код RSS:

/* Force the tabset element to a fixed size. */
tabset
{
    display: block;
    width: 100%;
    height: 100%;
    border: solid;
}

/* Display the tab container as a block element 20 pixels high; it will
   be positioned at the top of the tabset. */
tabset tabs
{
    display: block;
    height: 20px;
}

/* Force each tab to only take up 80 pixels across the tabs element. */
tabset tab
{
    width: 80px;
    border: solid;
    border-width: 1px 1px 0 1px;
}

/* DOESN'T WORK
tabset tab:focus    
{
    background-color: #DEADBEEF;
    border: solid;
    border-width: 1px 1px 0 1px;
}*/

/* DOESN'T WORK
tabset tab:active
{
    background-color: #DEADBEEF;
    border: solid;
    border-width: 1px 1px 0 1px;
}
*/
/* Display the panel container as a block element 180 pixels high; it will
   be positioned below the tab container and take up the rest of the space
   in the tabset. */
tabset panels
{
    display: block;
    height: 100%;
    border: solid;
}

/* Fix each panel to take up exactly the panelled space. */
tabset panels panel
{
    display: block;
    width: 100%;
    height: 100%;
    border: solid;
    border-width: 1px 1px 0 1px;
}

И выдержка из кода RML (HTML-ish):

<game id="game">
    <tabset style="height: 100%;">
        <tab>Gameplay</tab>
        <panel>
            GAMEPLAY TAB GAMEPLAY TAB GAMEPLAY TAB GAMEPLAY TAB GAMEPLAY TAB <br />
        </panel>
        <tab>Video</tab>
        <panel>
            VIDEO TAB VIDEO TAB VIDEO TAB VIDEO TAB VIDEO TAB VIDEO TAB <br />
        </panel>
    </tabset>   

Я не могу использовать любой код JavaScript, так как Librocket не поддерживает это. Заранее спасибо!

Answer 1

После поиска исходного кода libRocket я обнаружил следующее в ElementTabSet.cpp:

if (old_tab)
    old_tab->SetPseudoClass("selected", false);
if (new_tab)
    new_tab->SetPseudoClass("selected", true);

На активной вкладке всегда применяется псевдокласс:selected. Поэтому вы можете выполнить то, что вы хотите, следующим образом:

/* DOES WORK! */
tabset tab:selected
{
    background-color: #DEADBEEF;
    border: solid;
    border-width: 1px 1px 0 1px;
}