CSS темы для виртуальной клавиатуры

Эта страница расскажет о том как создать новую тему и/или изменить существующую так, чтобы она вписалась в проект. Вопросы по созданию и редактированию тем можно задать на форуме.

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

• Все кнопки и их состояния должны размещаться на одной картинке.
• Изменение состояния кнопки осуществляется сдвигом фоновой картинки в нужное положение.
• Не поддерживать слишком старые браузеры, например IE 5.5 и младше.
• Не использовать margin для создания отступов между кнопками.

Пример блока кнопок:

Ниже описаны правила CSS, отвечающие за внешний вид клавиатуры и динамическое изменение состояний.

Описывает размеры и внешний вид корневого блока ВК.

Селектор: #virtualKeyboard #kbDesk

Блок кнопок. Внутри этого узла содержатся только кнопки и ничего более.

Селектор: #virtualKeyboard #kbDesk div.kbButton

Основное описание кнопки, здесь желательно задавать размеры кнопки и все отступы.

    float: left;
    height: YYpx;
    width: XXpx;
    z-index: 2;

Селектор: #virtualKeyboard #kbDesk div.kbButton a

Кпопки формируются из ссылок, поскольку это единственный способ не сбросить выделение в Internet Explorer когда клавиатура расположена в фрейме или другом окне.

    background: url(button_set.png) 0 0 no-repeat;
    display: block;
    height: 100%;
    position: relative;
    width: 100%;

Селектор: #virtualKeyboard #kbDesk div.kbButton a span

Все «наклейки» на кнопках описываются узлами span. Здесь задаются базовые настройки: шрифт, цвет и пр.

        overflow: visible;
        white-space: pre;

Селектор: #virtualKeyboard #kbDesk div.kbButton span.title

Используется для текстовых подсказок на управляющих кнопках. Обычно он прячется, т.к. надписи наносятся прямо на картинки.

• #virtualKeyboard #kbDesk div.kbButton span.charAlt
• #virtualKeyboard #kbDesk div.kbButton span.charCaps
• #virtualKeyboard #kbDesk div.kbButton span.charNormal
• #virtualKeyboard #kbDesk div.kbButton span.charShift
• #virtualKeyboard #kbDesk div.kbButton span.charShiftAlt
• #virtualKeyboard #kbDesk div.kbButton span.charShiftCaps

Используется совместно с серией #kbDesk.mode* для

• указания правил по-умолчанию
• динамического отображения нужных «наклеек»

• #virtualKeyboard #kbDesk div.kbButton span.hiddenAlt
• #virtualKeyboard #kbDesk div.kbButton span.hiddenShift
• #virtualKeyboard #kbDesk div.kbButton span.hiddenCaps

Указывают что данный узел должен быть скрыт в определённом режиме. Используется для уменьшения подсказок на кнопке. Например, если кнопка в нормальном режиме печатает символ 'q', а с нажатым shift - 'Q', то в подсказке нет необходимости.

#virtualKeyboard #kbDesk.modeAlt div.kbButton span.hiddenAlt,
#virtualKeyboard #kbDesk.modeNormal div.kbButton span.hiddenShift,
#virtualKeyboard #kbDesk.modeShift div.kbButton span.hiddenShift,
#virtualKeyboard #kbDesk.modeCaps div.kbButton span.hiddenCaps,
        display: none;
}

Селектор: #virtualKeyboard #kbDesk div.kbButton span.deadKey

Используется для выделения символов, которые работают как «мёртвые», т.е. являются модификаторами для последующего введённого символа. Сам символ вводится двойным нажатием на кнопку.

Селектор: #virtualKeyboard #kbDesk div.kbButtonHover

Сам по себе этот селектор не используется, но указывает на текущее состояние кнопки. С его помощью добавляются динамические эффекты. Был введён вместо a:hover поскольку при использовании последнего в IE кнопки начинают залипать.

Селектор: #virtualKeyboard #kbDesk div.kbButtonDown

Сам по себе этот селектор не используется, но указывает на текущее состояние кнопки. Если этот селектор активен, то div.kbButtonHover отключен.

• #kbDesk.modeAlt
• #kbDesk.modeCaps
• #kbDesk.modeNormal
• #kbDesk.modeShift
• #kbDesk.modeShiftAlt
• #kbDesk.modeShiftAltCaps
• #kbDesk.modeShiftCaps

Указывают на текущее состояние управляющих кнопок. При нажатии на какую-либо из них селектор изменяется. Требуется для:

• указания правил по-умолчанию
• динамического отображения нужных символов

#virtualKeyboard #kbDesk.modeShift div.kbButton span.charShiftCaps {
        color: green;
}
#virtualKeyboard #kbDesk.modeCaps div.kbButton span.charShiftAlt {
        display: none;
}

• #virtualKeyboard #kbDesk div#kb_benter
• #virtualKeyboard #kbDesk div#kb_bbackspace
• #virtualKeyboard #kbDesk div#kb_btab
• #virtualKeyboard #kbDesk div#kb_bcaps
• #virtualKeyboard #kbDesk div#kb_bshift_left
• #virtualKeyboard #kbDesk div#kb_bshift_right
• #virtualKeyboard #kbDesk div#kb_balt_left
• #virtualKeyboard #kbDesk div#kb_balt_right
• #virtualKeyboard #kbDesk div#kb_bctrl_left
• #virtualKeyboard #kbDesk div#kb_bctrl_right
• #virtualKeyboard #kbDesk div#kb_bdel
• #virtualKeyboard #kbDesk div#kb_bspace

Определяет управляющие кнопки.

Селектор: #virtualKeyboard #kbDesk div#kb_benter div#kb_benter

Описывает правила для кнопки «Enter».

#virtualKeyboard #kbDesk div#kb_benter {
        margin-top: -XXpx;
        float: right;
        z-index: -1;
}
#virtualKeyboard #kbDesk div#kb_benter[id] {
        z-index: 0;
}

Где XX - высота стандартной кнопки. Стандартный дизайн предполагает двойную высоту Enter, относительно прочих кнопок.

Селектор: #virtualKeyboard #kbDesk div#kb_balt_left Описывает правила для левого «Alt».

#virtualKeyboard #kbDesk div#kb_benter {
        margin-left: XXpx;
}

Где XX - сдвиг кнопки, так чтобы «Alt» оказался примерно под серединой «Z».

Селектор #virtualKeyboard #kbDesk div#kb_bctrl_right

Описывает правила для правого «Ctrl».

#virtualKeyboard #kbDesk div#kb_bctrl_right {

float: right;

}

Селектор: #virtualKeyboard select#kb_langselector

Выпадающий список (select) раскладок.

Селектор: #virtualKeyboard select#kb_mappingselector

Выпадающий список (select) клавиатурных драйверов для настройки трансляции виртуальных кодов кнопок.

Селектор: #virtualKeyboard #copyrights

Стили для блока копирайтов и ссылки на данный сайт. Не рекомендуется прятать, если только вы не намерены приобрести коммерческую лицензию.

Правила для тулбара IME. Используется в основном в азиатских языках.

Селектор: #VirtualKeyboardIME table

Правила для самой таблицы подсказок.

Селектор: #VirtualKeyboardIME table td.IMEControl

Базовые правила для управляющих «кнопок»: перелистывание страниц с подсказками, отображение режима показа - постраничный или полный.

Селектор: #VirtualKeyboardIME td.IMEContent

Правила для ячейки таблицы, где размещаются подсказки.

Селектор: #VirtualKeyboardIME td.IMEContent a Правила для самих подсказок.

Селектор: #VirtualKeyboardIME div.left Кнопка для перелистывания подсказок «влево», к началу списка. По-умолчанию выглядит как треугольник, нарисована с помощью трюка CSS, без картинки.

Селектор: #VirtualKeyboardIME div.right

Кнопка для перелистывания подсказок «вправо», к концу списка. По-умолчанию выглядит как треугольник, нарисована с помощью трюка CSS, без картинки.

Селектор: #VirtualKeyboardIME td.IMEInfo

Правила для информационного блока (список «страниц», текущая «страница»)

Селектор: #VirtualKeyboardIME td.IMEInfo div.arrow

Базовые правила для кнопки переключения режима отображения подсказок.

Селектор: #VirtualKeyboardIME td.IMEInfo div.showAll div.arrow

Кнопка в режиме «показать полный список»

Селектор: #VirtualKeyboardIME td.IMEInfo div.showPage div.arrow

Кнопка в режиме «показать страницы»

Селектор: #VirtualKeyboardIME td.IMEInfo

Счётчик страниц с подсказками.

Различные алфавиты используют символы различных размеров, что привело к необходимости подстройки размеров шрифтов и положения «наклеек» относительно кнопки. Для реализации такой подстройки, при переключении раскладки к корневому узлу клавиатуры и тулбара добавляется определённый «код» языка.

Подстройка под китайский язык, кроме размеров шрифта нужно указать и сам шрифт.

#virtualKeyboard.ZH div.kbButton span {
        font-family: MingLiU, SimSun, "Arial Unicode MS";
        font-size: 15.5pt;
}
#virtualKeyboard.ZH div.kbButton span.charAlt,
#virtualKeyboard.ZH div.kbButton span.charShift {
        font-size: 14pt;
}
#VirtualKeyboardIME.ZH div.IMEContent {
        font-family: SimSun, "Arial Unicode MS";
        font-size: 16px;
}