feat: xkeypad 보안 키패드 통합 및 비밀번호 변경 기능 구현
- xkeypad 보안 키패드 라이브러리 추가 - 비밀번호 변경 페이지에 보안 키패드 적용 - RSA 암호화 기능 통합 - route 설정 및 Sentry 설정 업데이트 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jay Sheen
@@ -83,7 +83,9 @@ const VatReturnPages = lazyLoad('/src/pages/vat-return/vat-return-pages
|
||||
const AdditionalServicePages = lazyLoad('/src/pages/additional-service/additional-service-pages');
|
||||
const SupportPages = lazyLoad('/src/pages/support/support-pages');
|
||||
const SettingPage = lazyLoad('/src/pages/setting/setting-page');
|
||||
const AlarmPages = lazyLoad('/src/pages/alarm/alarm-pages');
|
||||
const AlarmPages = lazyLoad('/src/pages/alarm/alarm-pages');
|
||||
const XkeypadPage = lazyLoad('/src/pages/xkeypad/xkeypad-page');
|
||||
const XkeypadSample = lazyLoad('/src/pages/xkeypad/xkeypad-sample');
|
||||
|
||||
export const SentryRoutes = Sentry.withSentryReactRouterV6Routing(Routes);
|
||||
const Pages = () => {
|
||||
@@ -105,6 +107,8 @@ const Pages = () => {
|
||||
<Route path={ROUTE_NAMES.support.base} element={<SupportPages />} />
|
||||
<Route path={ROUTE_NAMES.setting} element={<SettingPage />} />
|
||||
<Route path={ROUTE_NAMES.alarm.base} element={<AlarmPages />} />
|
||||
<Route path={ROUTE_NAMES.xkeypad} element={<XkeypadPage />} />
|
||||
<Route path={ROUTE_NAMES.xkeypadSample} element={<XkeypadSample />} />
|
||||
</Route>
|
||||
<Route path="*" element={<NotFoundError />} />
|
||||
</Route>
|
||||
|
||||
@@ -162,7 +162,8 @@ export const ROUTE_NAMES = {
|
||||
base: '/alarm/*',
|
||||
list: 'list',
|
||||
},
|
||||
|
||||
xkeypad: '/xkeypad',
|
||||
xkeypadSample: '/xkeypad-sample',
|
||||
};
|
||||
|
||||
export type RouteNamesType = typeof ROUTE_NAMES;
|
||||
|
||||
206
src/shared/ui/assets/css/xkeypad-modal.css
Normal file
206
src/shared/ui/assets/css/xkeypad-modal.css
Normal file
@@ -0,0 +1,206 @@
|
||||
/**
|
||||
* XKeypad Modal Styles
|
||||
* 키패드 모달 스타일
|
||||
*/
|
||||
|
||||
/* 모달 오버레이 - 전체화면 */
|
||||
.xkeypad-modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
z-index: 9998;
|
||||
display: none;
|
||||
animation: fadeIn 0.2s ease;
|
||||
}
|
||||
|
||||
.xkeypad-modal-overlay.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 모달 컨테이너 */
|
||||
.xkeypad-modal-container {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: transparent;
|
||||
z-index: 9999;
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
/* Safe area 적용 */
|
||||
padding-bottom: env(safe-area-inset-bottom, 0);
|
||||
padding-bottom: constant(safe-area-inset-bottom, 0); /* iOS 11.0 */
|
||||
}
|
||||
|
||||
.xkeypad-modal-container.active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* 키패드 래퍼 */
|
||||
.xkeypad-wrapper {
|
||||
position: relative;
|
||||
background-color: #dbdde2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 키패드 컨텐츠 영역 */
|
||||
.xkeypad-content {
|
||||
position: relative;
|
||||
background-color: #dbdde2;
|
||||
}
|
||||
|
||||
/* XKeypad 컨테이너가 모달 내에서 보이도록 */
|
||||
.xkeypad-content .xkp_ui_qwerty,
|
||||
.xkeypad-content .xkp_ui_number {
|
||||
position: relative !important;
|
||||
z-index: 10001 !important;
|
||||
display: block !important;
|
||||
visibility: visible !important;
|
||||
opacity: 1 !important;
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
/* 모든 키패드 자식 요소들이 보이도록 */
|
||||
.xkeypad-content .xkp_ui_qwerty *,
|
||||
.xkeypad-content .xkp_ui_number * {
|
||||
visibility: visible !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* 키패드 DIV가 모달 내에서 보이도록 */
|
||||
.xkeypad-content > div {
|
||||
position: relative !important;
|
||||
display: block !important;
|
||||
visibility: visible !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* 키패드 버튼들이 보이도록 */
|
||||
.xkeypad-content ul,
|
||||
.xkeypad-content li,
|
||||
.xkeypad-content a {
|
||||
display: block !important;
|
||||
visibility: visible !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* 애니메이션 */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 반응형 대응 */
|
||||
@media (max-width: 768px) {
|
||||
.xkeypad-modal-container {
|
||||
/* 모바일에서는 전체 너비 */
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 769px) {
|
||||
/* 데스크톱에서는 중앙 정렬 */
|
||||
.xkeypad-modal-container {
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(100%);
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.xkeypad-modal-container.active {
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* iOS 노치 대응 */
|
||||
@supports (padding: max(0px)) {
|
||||
.xkeypad-modal-container {
|
||||
padding-bottom: max(env(safe-area-inset-bottom, 0), 0px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 키패드 타입별 높이는 자동 조정 - min-height 제거 */
|
||||
|
||||
/* 입력 필드 활성화 스타일 */
|
||||
.xkeypad-input-active {
|
||||
border-color: #4CAF50 !important;
|
||||
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1) !important;
|
||||
}
|
||||
|
||||
/* 모달 열림/닫힘 시 body 스크롤 방지 */
|
||||
body.xkeypad-modal-open {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
/* top 값은 JavaScript에서 동적으로 설정 */
|
||||
}
|
||||
|
||||
/* iOS 바운스 스크롤 방지 */
|
||||
.xkeypad-modal-container {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
/* 터치 이벤트 최적화 */
|
||||
.xkeypad-modal-overlay,
|
||||
.xkeypad-modal-container {
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.xkeypad-content {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
/* 다크모드 지원 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.xkeypad-modal-overlay {
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.xkeypad-wrapper {
|
||||
background-color: #2c2c2e;
|
||||
border-top-color: #48484a;
|
||||
}
|
||||
|
||||
.xkeypad-modal-header {
|
||||
background-color: #1c1c1e;
|
||||
border-bottom-color: #48484a;
|
||||
}
|
||||
|
||||
.xkeypad-drag-indicator {
|
||||
background-color: #636366;
|
||||
}
|
||||
|
||||
.xkeypad-close-btn {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.xkeypad-close-btn:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.xkeypad-close-btn::before {
|
||||
color: #f0f0f0;
|
||||
}
|
||||
}
|
||||
663
src/shared/ui/assets/css/xkeypad.css
Normal file
663
src/shared/ui/assets/css/xkeypad.css
Normal file
@@ -0,0 +1,663 @@
|
||||
/**
|
||||
* XecureKeypad Mobile Web
|
||||
* @version 1.5.0.6
|
||||
* @release 2022-12-13
|
||||
*/
|
||||
@charset "utf-8";
|
||||
|
||||
/* iPhone 글자크기 자동조정 방지 */
|
||||
html{-webkit-text-size-adjust:100%;}
|
||||
|
||||
/* 배포 코드 */
|
||||
.xkp_ui_qwerty,
|
||||
.xkp_ui_qwerty * { -moz-box-sizing: border-box; box-sizing: border-box; }
|
||||
|
||||
.xkp_ui_qwerty div,
|
||||
.xkp_ui_qwerty ul,
|
||||
.xkp_ui_qwerty li,
|
||||
.xkp_ui_qwerty table,
|
||||
.xkp_ui_qwerty th,
|
||||
.xkp_ui_qwerty td {margin:0;padding:0}
|
||||
.xkp_ui_qwerty body{-webkit-text-size-adjust:none}
|
||||
.xkp_ui_qwerty img{border:0;vertical-align:top}
|
||||
.xkp_ui_qwerty ul,.xkp_ui_qwerty li{list-style:none}
|
||||
.xkp_ui_qwerty em{font-style:normal;font-weight:normal}
|
||||
.xkp_ui_qwerty table{border-collapse:collapse;border-spacing:0}
|
||||
.xkp_ui_qwerty{margin:0;padding:5px 2px 3px;border-top: 1px solid #cfcdcd;border-bottom: 1px solid #b4b4b4;background-color:#dbdde2;font-size:20px}
|
||||
.xkp_ui_qwerty table{width:100%;table-layout:fixed}
|
||||
.xkp_ui_qwerty td{padding:0 1px 3px;vertical-align:middle}
|
||||
|
||||
.xkp_ui_qwerty .xkp_dummy{display:inline-block;height:100%;vertical-align:middle}
|
||||
.xkp_ui_qwerty .xkp_ui_tb{display:table;width:100%;table-layout:fixed}
|
||||
.xkp_ui_qwerty .xkp_ui_tb .xkp_ui_cell.xkp_first{padding-right:2px}
|
||||
.xkp_ui_qwerty .xkp_ui_tb .xkp_ui_cell.xkp_pad_n{padding:0}
|
||||
.xkp_ui_qwerty .xkp_ui_cell{display:table-cell;vertical-align:middle}
|
||||
|
||||
/* [ Qwerty & Number ] Common Border Style */
|
||||
.xkp_ui_qwerty a.xkqwerty,
|
||||
.xkp_ui_qwerty a.xkp_key2,
|
||||
.xkp_ui_qwerty a.xkp_key3,
|
||||
.xkp_ui_qwerty a.xkp_key4 { border-width: 1px; border-style: solid; border-radius: 3px; -webkit-tap-highlight-color: rgba(0,0,0,0) !important;}
|
||||
|
||||
/* [ Qwerty ] 0 ~ 9 */
|
||||
.xkp_ui_qwerty a.xkqwerty { background-color: #f9f9f9; border-color: #cdced0; }
|
||||
/* [ Qwerty & Number ] Upper/Lower Case Character & Number & Symbol On/Off */
|
||||
.xkp_ui_qwerty a.xkp_key2{ background-color: #ffffff; border-color: #cdced0; }
|
||||
/* [ Qwerty & Number ] Capslock & Refresh & Symbol On/Off & Space & Backspace */
|
||||
.xkp_ui_qwerty a.xkp_key3 { background-color: #262d39; border-color: #565D69; }
|
||||
/* [ Qwerty & Number ] Enter */
|
||||
.xkp_ui_qwerty a.xkp_key4 { background-color: #126bd8; }
|
||||
|
||||
/* [ Qwerty ] 0 ~ 9 */
|
||||
.xkp_ui_qwerty.has_press_effect a.xkqwerty:active { background-color: #AFB2B8; border-color: #9CA1AA; }
|
||||
/* [ Qwerty & Number ] Upper/Lower Case Character & Number & Symbol On/Off */
|
||||
.xkp_ui_qwerty.has_press_effect a.xkp_key2:active{ background-color: #AFB2B8; border-color: #9CA1AA; }
|
||||
/* [ Qwerty & Number ] Capslock & Refresh & Symbol On/Off & Space & Backspace */
|
||||
.xkp_ui_qwerty.has_press_effect a.xkp_key3:active{ background-color: #AFB2B8; border-color: #9CA1AA; }
|
||||
/* [ Qwerty & Number ] Enter */
|
||||
.xkp_ui_qwerty.has_press_effect a.xkp_key4:active{ background-color: #AFB2B8; border-color: #9CA1AA; }
|
||||
|
||||
/****************************
|
||||
스프라이트 이미지 설정
|
||||
*****************************/
|
||||
.xkp_ui_qwerty em{display:inline-block;overflow:hidden;color:transparent;white-space:nowrap;vertical-align:top;letter-spacing:-5px}
|
||||
|
||||
/****************************
|
||||
버튼 기본 스타일
|
||||
*****************************/
|
||||
/* [ Qwerty & Number ] Common */
|
||||
.xkp_ui_qwerty a,
|
||||
.xkp_ui_qwerty span {display:block; position:relative; text-align:center; height: 40px;}
|
||||
.xkp_ui_qwerty em {width:21px;height:29px;background:url(/images/xkeypad/sp_xkp_white.png) no-repeat;}
|
||||
.xkp_ui_qwerty a { padding-top: 5px; }
|
||||
.xkp_ui_qwerty span { background:none;line-height:30px;vertical-align:middle; padding-top: 3px;}
|
||||
.xkp_ui_qwerty span img{vertical-align:middle; width: 18px; height: 18px;}
|
||||
/* [ Number ] */
|
||||
.xkp_ui_qwerty.xkp_ui_number a,
|
||||
.xkp_ui_qwerty.xkp_ui_number span { height: 50px; }
|
||||
.xkp_ui_qwerty.xkp_ui_number a { padding-top:10px; }
|
||||
.xkp_ui_qwerty.xkp_ui_number span { padding-top: 7px; }
|
||||
/* [ Qwerty & Number ] Refresh Key & Enter Key */
|
||||
.xkp_ui_qwerty.ko .xkp_m106,
|
||||
.xkp_ui_qwerty.ko .xkp_m109,
|
||||
.xkp_ui_qwerty.ko2 .xkp_m106,
|
||||
.xkp_ui_qwerty.ko2 .xkp_m109{width:44px}
|
||||
/* [ Qwerty & Number ] Space Key */
|
||||
.xkp_ui_qwerty a .xkp_m108{width:33px}
|
||||
|
||||
/****************************************************
|
||||
스프라이트 이미지 좌표 설정 ( 키가 눌리지 않았을 때 )
|
||||
*****************************************************/
|
||||
/* [ Qwerty ] 0 ~ 9 */
|
||||
.xkp_ui_qwerty a .xkp_m0{background-position:-207px 0}
|
||||
.xkp_ui_qwerty a .xkp_m1{background-position:0 0}
|
||||
.xkp_ui_qwerty a .xkp_m2{background-position:-23px 0}
|
||||
.xkp_ui_qwerty a .xkp_m3{background-position:-46px 0}
|
||||
.xkp_ui_qwerty a .xkp_m4{background-position:-69px 0}
|
||||
.xkp_ui_qwerty a .xkp_m5{background-position:-92px 0}
|
||||
.xkp_ui_qwerty a .xkp_m6{background-position:-115px 0}
|
||||
.xkp_ui_qwerty a .xkp_m7{background-position:-138px 0}
|
||||
.xkp_ui_qwerty a .xkp_m8{background-position:-161px 0}
|
||||
.xkp_ui_qwerty a .xkp_m9{background-position:-184px 0}
|
||||
/* [ Number ] 0 ~ 9 */
|
||||
.xkp_ui_qwerty a .xkp_m94{background-position:-253px -310px}
|
||||
.xkp_ui_qwerty a .xkp_m95{background-position:-23px -310px}
|
||||
.xkp_ui_qwerty a .xkp_m96{background-position:-46px -310px}
|
||||
.xkp_ui_qwerty a .xkp_m97{background-position:-69px -310px}
|
||||
.xkp_ui_qwerty a .xkp_m98{background-position:-92px -310px}
|
||||
.xkp_ui_qwerty a .xkp_m99{background-position:-115px -310px}
|
||||
.xkp_ui_qwerty a .xkp_m100{background-position:-138px -310px}
|
||||
.xkp_ui_qwerty a .xkp_m101{background-position:-161px -310px}
|
||||
.xkp_ui_qwerty a .xkp_m102{background-position:-184px -310px}
|
||||
.xkp_ui_qwerty a .xkp_m103{background-position:-207px -310px}
|
||||
/* [ Qwerty ] q(ㅂ) ~ p(ㅔ) */
|
||||
.xkp_ui_qwerty a .xkp_m10{background-position:0 -31px}
|
||||
.xkp_ui_qwerty a .xkp_m11{background-position:-23px -31px}
|
||||
.xkp_ui_qwerty a .xkp_m12{background-position:-46px -31px}
|
||||
.xkp_ui_qwerty a .xkp_m13{background-position:-69px -31px}
|
||||
.xkp_ui_qwerty a .xkp_m14{background-position:-92px -31px}
|
||||
.xkp_ui_qwerty a .xkp_m15{background-position:-115px -31px}
|
||||
.xkp_ui_qwerty a .xkp_m16{background-position:-138px -31px}
|
||||
.xkp_ui_qwerty a .xkp_m17{background-position:-161px -31px}
|
||||
.xkp_ui_qwerty a .xkp_m18{background-position:-184px -31px}
|
||||
.xkp_ui_qwerty a .xkp_m19{background-position:-207px -31px}
|
||||
/* [ Qwerty ] a(ㅁ) ~ l(ㅣ) */
|
||||
.xkp_ui_qwerty a .xkp_m20{background-position:0 -62px}
|
||||
.xkp_ui_qwerty a .xkp_m21{background-position:-23px -62px}
|
||||
.xkp_ui_qwerty a .xkp_m22{background-position:-46px -62px}
|
||||
.xkp_ui_qwerty a .xkp_m23{background-position:-69px -62px}
|
||||
.xkp_ui_qwerty a .xkp_m24{background-position:-92px -62px}
|
||||
.xkp_ui_qwerty a .xkp_m25{background-position:-115px -62px}
|
||||
.xkp_ui_qwerty a .xkp_m26{background-position:-138px -62px}
|
||||
.xkp_ui_qwerty a .xkp_m27{background-position:-161px -62px}
|
||||
.xkp_ui_qwerty a .xkp_m28{background-position:-184px -62px}
|
||||
/* [ Qwerty ] z(ㅋ) ~ m(ㅡ) */
|
||||
.xkp_ui_qwerty a .xkp_m29{background-position:-207px -62px}
|
||||
.xkp_ui_qwerty a .xkp_m30{background-position:0 -93px}
|
||||
.xkp_ui_qwerty a .xkp_m31{background-position:-23px -93px}
|
||||
.xkp_ui_qwerty a .xkp_m32{background-position:-46px -93px}
|
||||
.xkp_ui_qwerty a .xkp_m33{background-position:-69px -93px}
|
||||
.xkp_ui_qwerty a .xkp_m34{background-position:-92px -93px}
|
||||
.xkp_ui_qwerty a .xkp_m35{background-position:-115px -93px}
|
||||
/* [ Qwerty ] Capslock Key */
|
||||
.xkp_ui_qwerty a .xkp_m104{background-position:-138px -93px;letter-spacing:-8px}
|
||||
/* [ Qwerty & Number ] Backspace Key */
|
||||
.xkp_ui_qwerty a .xkp_m105{background-position:-161px -93px;letter-spacing:-9px}
|
||||
/* [ Qwerty & Number ] Refresh Key ( XKConfigMobile.functionKeyButtonStyle === 'symbol' ) */
|
||||
.xkp_ui_qwerty a .xkp_m106{background-position:-184px -93px}
|
||||
/* [ Qwerty ] Refresh Key ( XKConfigMobile.functionKeyButtonStyle === 'text' ) */
|
||||
.xkp_ui_qwerty.ko a .xkp_m106{background-position:0 -341px}
|
||||
/* [ Number ] Refresh Key ( XKConfigMobile.functionKeyButtonStyle === 'text' ) */
|
||||
.xkp_ui_qwerty.ko2 a .xkp_m106{background-position:-92px -341px}
|
||||
/* [ Qwerty ] Symbol On/Off Key */
|
||||
.xkp_ui_qwerty a .xkp_m107{background-position:-207px -93px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty a .xkp_m107_1{background-position:-191px -342px;letter-spacing:-12px;}
|
||||
/* [ Qwerty & Number ] Space Key */
|
||||
.xkp_ui_qwerty a .xkp_m108{background-position:0 -124px}
|
||||
/* [ Qwerty & Number ] Enter Key ( XKConfigMobile.functionKeyButtonStyle === 'symbol' ) */
|
||||
.xkp_ui_qwerty a .xkp_m109{background-position:-46px -124px}
|
||||
/* [ Qwerty ] Enter Key ( XKConfigMobile.functionKeyButtonStyle === 'text' ) */
|
||||
.xkp_ui_qwerty.ko a .xkp_m109{background-position:-46px -341px}
|
||||
/* [ Number ] Enter Key ( XKConfigMobile.functionKeyButtonStyle === 'text' ) */
|
||||
.xkp_ui_qwerty.ko2 a .xkp_m109{background-position:-138px -341px}
|
||||
/* [ Qwerty (Capslock On) ] Q(ㅃ) ~ P(ㅔ) */
|
||||
.xkp_ui_qwerty a .xkp_m36{background-position:-69px -124px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty a .xkp_m37{background-position:-92px -124px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty a .xkp_m38{background-position:-115px -124px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty a .xkp_m39{background-position:-138px -124px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty a .xkp_m40{background-position:-161px -124px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty a .xkp_m41{background-position:-184px -124px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty a .xkp_m42{background-position:-207px -124px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty a .xkp_m43{background-position:0 -155px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty a .xkp_m44{background-position:-23px -155px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty a .xkp_m45{background-position:-46px -155px;letter-spacing:-12px}
|
||||
/* [ Qwerty (Capslock On) ] A(ㅁ) ~ L(ㅣ) */
|
||||
.xkp_ui_qwerty a .xkp_m46{background-position:-69px -155px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty a .xkp_m47{background-position:-92px -155px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty a .xkp_m48{background-position:-115px -155px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty a .xkp_m49{background-position:-138px -155px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty a .xkp_m50{background-position:-161px -155px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty a .xkp_m51{background-position:-184px -155px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty a .xkp_m52{background-position:-207px -155px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty a .xkp_m53{background-position:0 -186px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty a .xkp_m54{background-position:-23px -186px;letter-spacing:-12px}
|
||||
/* [ Qwerty (Capslock On) ] Z(ㅋ) ~ M(ㅡ) */
|
||||
.xkp_ui_qwerty a .xkp_m55{background-position:-46px -186px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty a .xkp_m56{background-position:-69px -186px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty a .xkp_m57{background-position:-92px -186px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty a .xkp_m58{background-position:-115px -186px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty a .xkp_m59{background-position:-138px -186px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty a .xkp_m60{background-position:-161px -186px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty a .xkp_m61{background-position:-184px -186px;letter-spacing:-12px}
|
||||
/* [ Qwerty (Symbol On) ] "!" ~ ")" */
|
||||
.xkp_ui_qwerty a .xkp_m62{background-position:-207px -186px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty a .xkp_m63{background-position:0 -217px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty a .xkp_m64{background-position:-23px -217px}
|
||||
.xkp_ui_qwerty a .xkp_m65{background-position:-46px -217px}
|
||||
.xkp_ui_qwerty a .xkp_m66{background-position:-69px -217px}
|
||||
.xkp_ui_qwerty a .xkp_m67{background-position:-92px -217px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty a .xkp_m68{background-position:-115px -217px}
|
||||
.xkp_ui_qwerty a .xkp_m69{background-position:-138px -217px}
|
||||
.xkp_ui_qwerty a .xkp_m70{background-position:-161px -217px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty a .xkp_m71{background-position:-184px -217px;letter-spacing:-13px}
|
||||
/* [ Qwerty (Symbol On) ] "[" ~ ";" */
|
||||
.xkp_ui_qwerty a .xkp_m72{background-position:-207px -217px;letter-spacing:-13px}
|
||||
.xkp_ui_qwerty a .xkp_m73{background-position:0 -248px;letter-spacing:-13px}
|
||||
.xkp_ui_qwerty a .xkp_m74{background-position:-23px -248px;letter-spacing:-13px}
|
||||
.xkp_ui_qwerty a .xkp_m75{background-position:-46px -248px;letter-spacing:-13px}
|
||||
.xkp_ui_qwerty a .xkp_m76{background-position:-69px -248px;letter-spacing:-13px}
|
||||
.xkp_ui_qwerty a .xkp_m77{background-position:-92px -248px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty a .xkp_m78{background-position:-115px -248px}
|
||||
.xkp_ui_qwerty a .xkp_m79{background-position:-138px -248px}
|
||||
/* [ Qwerty (Symbol On) ] ":" ~ "=" */
|
||||
.xkp_ui_qwerty a .xkp_m80{background-position:-161px -248px}
|
||||
.xkp_ui_qwerty a .xkp_m81{background-position:-184px -248px;letter-spacing:-13px}
|
||||
.xkp_ui_qwerty a .xkp_m82{background-position:-207px -248px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty a .xkp_m83{background-position:0 -279px}
|
||||
.xkp_ui_qwerty a .xkp_m84{background-position:-23px -279px;letter-spacing:-10px}
|
||||
.xkp_ui_qwerty a .xkp_m85{background-position:-46px -279px;letter-spacing:-10px}
|
||||
.xkp_ui_qwerty a .xkp_m86{background-position:-69px -279px}
|
||||
.xkp_ui_qwerty a .xkp_m87{background-position:-92px -279px}
|
||||
/* [ Qwerty (Symbol On) ] "\" ~ "~" */
|
||||
.xkp_ui_qwerty a .xkp_m88{background-position:-115px -279px}
|
||||
.xkp_ui_qwerty a .xkp_m89{background-position:-138px -279px}
|
||||
.xkp_ui_qwerty a .xkp_m90{background-position:-161px -279px}
|
||||
.xkp_ui_qwerty a .xkp_m91{background-position:-184px -279px;letter-spacing:-10px}
|
||||
.xkp_ui_qwerty a .xkp_m92{background-position:-207px -279px;letter-spacing:-13px}
|
||||
.xkp_ui_qwerty a .xkp_m93{background-position:0 -310px;letter-spacing:-13px}
|
||||
|
||||
/****************************************************
|
||||
스프라이트 이미지 좌표 설정 ( 키가 눌렸을 때 )
|
||||
*****************************************************/
|
||||
/* [ Qwerty ] 0 ~ 9 */
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m0{background-position:-437px 0}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m1{background-position:-230px 0}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m2{background-position:-253px 0}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m3{background-position:-276px 0}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m4{background-position:-299px 0}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m5{background-position:-322px 0}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m6{background-position:-345px 0}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m7{background-position:-368px 0}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m8{background-position:-391px 0}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m9{background-position:-414px 0}
|
||||
/* [ Qwerty ] q(ㅂ) ~ p(ㅔ) */
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m10{background-position:-230px -31px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m11{background-position:-253px -31px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m12{background-position:-276px -31px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m13{background-position:-299px -31px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m14{background-position:-322px -31px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m15{background-position:-345px -31px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m16{background-position:-368px -31px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m17{background-position:-391px -31px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m18{background-position:-414px -31px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m19{background-position:-437px -31px}
|
||||
/* [ Qwerty ] a(ㅁ) ~ l(ㅣ) */
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m20{background-position:-230px -62px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m21{background-position:-253px -62px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m22{background-position:-276px -62px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m23{background-position:-299px -62px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m24{background-position:-322px -62px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m25{background-position:-345px -62px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m26{background-position:-368px -62px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m27{background-position:-391px -62px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m28{background-position:-414px -62px}
|
||||
/* [ Qwerty ] z(ㅋ) ~ m(ㅡ) */
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m29{background-position:-437px -62px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m30{background-position:-230px -93px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m31{background-position:-253px -93px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m32{background-position:-276px -93px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m33{background-position:-299px -93px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m34{background-position:-322px -93px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m35{background-position:-345px -93px}
|
||||
/* [ Qwerty ] Capslock Key */
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m104{background-position:-368px -93px}
|
||||
/* [ Qwerty & Number ] Backspace Key */
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m105{background-position:-391px -93px}
|
||||
/* [ Qwerty & Number ] Refresh Key ( XKConfigMobile.functionKeyButtonStyle === 'symbol' ) */
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m106{background-position:-414px -93px}
|
||||
/* [ Qwerty ] Refresh Key ( XKConfigMobile.functionKeyButtonStyle === 'text' ) */
|
||||
.xkp_ui_qwerty.has_press_effect.ko a:active .xkp_m106{background-position:-276px -310px}
|
||||
/* [ Number ] Refresh Key ( XKConfigMobile.functionKeyButtonStyle === 'text' ) */
|
||||
.xkp_ui_qwerty.has_press_effect.ko2 a:active .xkp_m106{background-position:-368px -310px}
|
||||
/* [ Qwerty ] Symbol On/Off Key */
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m107{background-position:-437px -93px}
|
||||
/* [ Qwerty & Number ] Space Key */
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m108{background-position:-230px -124px}
|
||||
/* [ Qwerty & Number ] Enter Key ( XKConfigMobile.functionKeyButtonStyle === 'symbol' ) */
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m109{background-position:-276px -124px}
|
||||
/* [ Qwerty ] Enter Key ( XKConfigMobile.functionKeyButtonStyle === 'text' ) */
|
||||
.xkp_ui_qwerty.has_press_effect.ko a:active .xkp_m109{background-position:-322px -310px}
|
||||
/* [ Number ] Enter Key ( XKConfigMobile.functionKeyButtonStyle === 'text' ) */
|
||||
.xkp_ui_qwertyhas_press_effect.ko2 a:active .xkp_m109{background-position:-414px -310px}
|
||||
/* [ Qwerty (Capslock On) ] Q(ㅃ) ~ P(ㅔ) */
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m36{background-position:-299px -124px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m37{background-position:-322px -124px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m38{background-position:-345px -124px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m39{background-position:-368px -124px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m40{background-position:-391px -124px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m41{background-position:-414px -124px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m42{background-position:-437px -124px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m43{background-position:-230px -155px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m44{background-position:-253px -155px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m45{background-position:-276px -155px}
|
||||
/* [ Qwerty (Capslock On) ] A(ㅁ) ~ L(ㅣ) */
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m46{background-position:-299px -155px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m47{background-position:-322px -155px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m48{background-position:-345px -155px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m49{background-position:-368px -155px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m50{background-position:-391px -155px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m51{background-position:-414px -155px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m52{background-position:-437px -155px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m53{background-position:-230px -186px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m54{background-position:-253px -186px}
|
||||
/* [ Qwerty (Capslock On) ] Z(ㅋ) ~ M(ㅡ) */
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m55{background-position:-276px -186px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m56{background-position:-299px -186px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m57{background-position:-322px -186px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m58{background-position:-345px -186px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m59{background-position:-368px -186px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m60{background-position:-391px -186px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m61{background-position:-414px -186px}
|
||||
/* [ Qwerty (Symbol On) ] "!" ~ ")" */
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m62{background-position:-437px -186px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m63{background-position:-230px -217px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m64{background-position:-253px -217px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m65{background-position:-276px -217px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m66{background-position:-299px -217px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m67{background-position:-322px -217px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m68{background-position:-345px -217px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m69{background-position:-368px -217px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m70{background-position:-391px -217px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m71{background-position:-414px -217px}
|
||||
/* [ Qwerty (Symbol On) ] "[" ~ ";" */
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m72{background-position:-437px -217px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m73{background-position:-230px -248px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m74{background-position:-253px -248px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m75{background-position:-276px -248px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m76{background-position:-299px -248px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m77{background-position:-322px -248px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m78{background-position:-345px -248px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m79{background-position:-368px -248px}
|
||||
/* [ Qwerty (Symbol On) ] ":" ~ "=" */
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m80{background-position:-391px -248px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m81{background-position:-414px -248px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m82{background-position:-437px -248px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m83{background-position:-230px -279px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m84{background-position:-253px -279px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m85{background-position:-276px -279px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m86{background-position:-299px -279px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m87{background-position:-322px -279px}
|
||||
/* [ Qwerty (Symbol On) ] "\" ~ "~" */
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m88{background-position:-345px -279px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m89{background-position:-368px -279px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m90{background-position:-391px -279px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m91{background-position:-414px -279px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m92{background-position:-437px -279px}
|
||||
.xkp_ui_qwerty.has_press_effect a:active .xkp_m93{background-position:-230px -310px}
|
||||
|
||||
@media (min-width: 840px) and (min-height: 630px) {
|
||||
/* [ Qwerty & Number ] Common */
|
||||
.xkp_ui_qwerty.auto_resize a { padding-top: 7px; }
|
||||
.xkp_ui_qwerty.auto_resize a,
|
||||
.xkp_ui_qwerty.auto_resize span { height: 60px; }
|
||||
.xkp_ui_qwerty.auto_resize em{width:31.5px;height:43.5px;background:url(/images/xkeypad/sp_xkp_white_big.png) no-repeat;}
|
||||
.xkp_ui_qwerty.auto_resize span { padding-top: 11px;}
|
||||
.xkp_ui_qwerty.auto_resize span img{width: 24.5px; height: 24.5px;}
|
||||
/* [ Number ] */
|
||||
.xkp_ui_qwerty.xkp_ui_number.auto_resize a,
|
||||
.xkp_ui_qwerty.xkp_ui_number.auto_resize span { height: 70px; }
|
||||
.xkp_ui_qwerty.xkp_ui_number.auto_resize a { padding-top:12px; }
|
||||
.xkp_ui_qwerty.xkp_ui_number.auto_resize span { padding-top: 18px; }
|
||||
/* [ Qwerty & Number ] Refresh Key & Enter Key */
|
||||
.xkp_ui_qwerty.ko.auto_resize .xkp_m106,
|
||||
.xkp_ui_qwerty.ko.auto_resize .xkp_m109,
|
||||
.xkp_ui_qwerty.ko2.auto_resize .xkp_m106,
|
||||
.xkp_ui_qwerty.ko2.auto_resize .xkp_m109{width:66px;}
|
||||
/* [ Qwerty & Number ] Space Key */
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m108{width:50px}
|
||||
|
||||
/****************************************************
|
||||
스프라이트 이미지 좌표 설정 ( 키가 눌리지 않았을 때 )
|
||||
*****************************************************/
|
||||
/* [ Qwerty ] 0 ~ 9 */
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m0{background-position:-310.5px 0}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m1{background-position:0 0}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m2{background-position:-34.5px 0}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m3{background-position: -69px 0}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m4{background-position:-103.5px 0}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m5{background-position:-138px 0}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m6{background-position:-172.5px 0}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m7{background-position:-207px 0}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m8{background-position:-241.5px 0}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m9{background-position:-276px 0}
|
||||
/* [ Number ] 0 ~ 9 */
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m94{background-position:-379.5px -465px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m95{background-position:-34.5px -465px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m96{background-position:-69px -465px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m97{background-position:-103.5px -465px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m98{background-position:-138px -465px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m99{background-position:-172.5px -465px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m100{background-position:-207px -465px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m101{background-position:-241.5px -465px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m102{background-position:-276px -465px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m103{background-position:-310.5px -465px}
|
||||
/* [ Qwerty ] q(ㅂ) ~ p(ㅔ) */
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m10{background-position:0 -46.5px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m11{background-position:-34.5px -46.5px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m12{background-position:-69px -46.5px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m13{background-position:-103.5px -46.5px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m14{background-position:-138px -46.5px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m15{background-position:-172.5px -46.5px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m16{background-position:-207px -46.5px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m17{background-position:-241.5px -46.5px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m18{background-position:-276px -46.5px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m19{background-position:-310.5px -46.5px}
|
||||
/* [ Qwerty ] a(ㅁ) ~ l(ㅣ) */
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m20{background-position:0 -93px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m21{background-position:-34.5px -93px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m22{background-position:-69px -93px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m23{background-position:-103.5px -93px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m24{background-position:-138px -93px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m25{background-position:-172.5px -93px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m26{background-position:-207px -93px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m27{background-position:-241.5px -93px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m28{background-position:-276px -93px}
|
||||
/* [ Qwerty ] z(ㅋ) ~ m(ㅡ) */
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m29{background-position:-310.5px -93px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m30{background-position:0 -139.5px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m31{background-position:-34.5px -139.5px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m32{background-position:-69px -139.5px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m33{background-position:-103.5px -139.5px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m34{background-position:-138px -139.5px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m35{background-position:-172.5px -139.5px}
|
||||
/* [ Qwerty ] Capslock Key */
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m104{background-position:-207px -139.5px;letter-spacing:-8px}
|
||||
/* [ Qwerty & Number ] Backspace Key */
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m105{background-position:-241.5px -139.5px;letter-spacing:-9px}
|
||||
/* [ Qwerty & Number ] Refresh Key ( XKConfigMobile.functionKeyButtonStyle === 'symbol' ) */
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m106{background-position:-276px -139.5px}
|
||||
/* [ Qwerty ] Refresh Key ( XKConfigMobile.functionKeyButtonStyle === 'text' ) */
|
||||
.xkp_ui_qwerty.ko.auto_resize a .xkp_m106{background-position:0 -511.5px}
|
||||
/* [ Number ] Refresh Key ( XKConfigMobile.functionKeyButtonStyle === 'text' ) */
|
||||
.xkp_ui_qwerty.ko2.auto_resize a .xkp_m106{background-position:-138px -511.5px}
|
||||
/* [ Qwerty ] Symbol On/Off Key */
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m107{background-position:-310.5px -139.5px; letter-spacing:-12px}
|
||||
/* [ Qwerty & Number ] Space Key */
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m108{background-position:0 -186px}
|
||||
/* [ Qwerty & Number ] Enter Key ( XKConfigMobile.functionKeyButtonStyle === 'symbol' ) */
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m109{background-position:-69px -186px}
|
||||
/* [ Qwerty ] Enter Key ( XKConfigMobile.functionKeyButtonStyle === 'text' ) */
|
||||
.xkp_ui_qwerty.ko.auto_resize a .xkp_m109{background-position:-69px -511.5px}
|
||||
/* [ Number ] Enter Key ( XKConfigMobile.functionKeyButtonStyle === 'text' ) */
|
||||
.xkp_ui_qwerty.ko2.auto_resize a .xkp_m109{background-position:-207px -511.5px}
|
||||
/* [ Qwerty (Capslock On) ] Q(ㅃ) ~ P(ㅔ) */
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m36{background-position:-103.5px -186px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m37{background-position:-138px -186px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m38{background-position:-172.5px -186px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m39{background-position:-207px -186px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m40{background-position:-241.5px -186px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m41{background-position:-276px -186px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m42{background-position:-310.5px -186px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m43{background-position: 0 -232.5px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m44{background-position:-34.5px -232.5px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m45{background-position:-69px -232.5px;letter-spacing:-12px}
|
||||
/* [ Qwerty (Capslock On) ] A(ㅁ) ~ L(ㅣ) */
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m46{background-position:-103.5px -232.5px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m47{background-position:-138px -232.5px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m48{background-position:-172.5px -232.5px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m49{background-position:-207px -232.5px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m50{background-position:-241.5px -232.5px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m51{background-position:-276px -232.5px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m52{background-position:-310.5px -232.5px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m53{background-position:0 -279px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m54{background-position:-34.5px -279px;letter-spacing:-12px}
|
||||
/* [ Qwerty (Capslock On) ] Z(ㅋ) ~ M(ㅡ) */
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m55{background-position:-69px -279px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m56{background-position:-103.5px -279px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m57{background-position:-138px -279px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m58{background-position:-172.5px -279px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m59{background-position:-207px -279px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m60{background-position:-241.5px -279px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m61{background-position:-276px -279px;letter-spacing:-12px}
|
||||
/* [ Qwerty (Symbol On) ] "!" ~ ")" */
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m62{background-position:-310.5px -279px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m63{background-position:0 -325.5px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m64{background-position:-34.5px -325.5px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m65{background-position:-69px -325.5px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m66{background-position:-103.5px -325.5px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m67{background-position:-138px -325.5px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m68{background-position:-172.5px -325.5px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m69{background-position:-207px -325.5px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m70{background-position:-241.5px -325.5px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m71{background-position:-276px -325.5px;letter-spacing:-12px}
|
||||
/* [ Qwerty (Symbol On) ] "[" ~ ";" */
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m72{background-position:-310.5px -325.5px;letter-spacing:-13px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m73{background-position:0 -372px;letter-spacing:-13px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m74{background-position:-34.5px -372px;letter-spacing:-13px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m75{background-position:-69px -372px;letter-spacing:-13px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m76{background-position:-103.5px -372px;letter-spacing:-13px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m77{background-position:-138px -372px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m78{background-position:-172.5px -372px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m79{background-position:-207px -372px}
|
||||
/* [ Qwerty (Symbol On) ] ":" ~ "=" */
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m80{background-position:-241.5px -372px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m81{background-position:-276px -372px;letter-spacing:-13px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m82{background-position:-310.5px -372px;letter-spacing:-12px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m83{background-position:0 -418.5px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m84{background-position:-34.5px -418.5px;letter-spacing:-10px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m85{background-position:-69px -418.5px;letter-spacing:-10px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m86{background-position:-103.5px -418.5px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m87{background-position:-138px -418.5px}
|
||||
/* [ Qwerty (Symbol On) ] "\" ~ "~" */
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m88{background-position:-172.5px -418.5px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m89{background-position:-207px -418.5px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m90{background-position:-241.5px -418.5px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m91{background-position:-276px -418.5px;letter-spacing:-10px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m92{background-position:-310.5px -418.5px;letter-spacing:-13px}
|
||||
.xkp_ui_qwerty.auto_resize a .xkp_m93{background-position:0 -465px;letter-spacing:-13px}
|
||||
|
||||
/****************************************************
|
||||
스프라이트 이미지 좌표 설정 ( 키가 눌렸을 때 )
|
||||
*****************************************************/
|
||||
/* [ Qwerty ] 0 ~ 9 */
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m0{background-position:-655.5px 0}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m1{background-position:-345px 0}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m2{background-position:-379.5px 0}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m3{background-position:-414px 0}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m4{background-position:-448.5px 0}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m5{background-position:-483px 0}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m6{background-position:-517.5px 0}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m7{background-position:-552px 0}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m8{background-position:-586.5px 0}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m9{background-position:-621px 0}
|
||||
/* [ Qwerty ] q(ㅂ) ~ p(ㅔ) */
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m10{background-position:-345px -46.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m11{background-position:-379.5px -46.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m12{background-position:-414px -46.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m13{background-position:-448.5px -46.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m14{background-position:-483px -46.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m15{background-position:-517.5px -46.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m16{background-position:-552px -46.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m17{background-position:-586.5px -46.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m18{background-position:-621px -46.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m19{background-position:-655.5px -46.5px}
|
||||
/* [ Qwerty ] a(ㅁ) ~ l(ㅣ) */
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m20{background-position:-345px -93px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m21{background-position:-379.5px -93px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m22{background-position:-414px -93px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m23{background-position:-448.5px -93px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m24{background-position:-483px -93px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m25{background-position:-517.5px -93px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m26{background-position:-552px -93px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m27{background-position:-586.5px -93px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m28{background-position:-621px -93px}
|
||||
/* [ Qwerty ] z(ㅋ) ~ m(ㅡ) */
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m29{background-position:-655.5px -93px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m30{background-position:-345px -139.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m31{background-position:-379.5px -139.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m32{background-position:-414px -139.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m33{background-position:-448.5px -139.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m34{background-position:-483px -139.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m35{background-position:-517.5px -139.5px}
|
||||
/* [ Qwerty ] Capslock Key */
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m104{background-position:-552px -139.5px}
|
||||
/* [ Qwerty & Number ] Backspace Key */
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m105{background-position:-587.5px -139.5px}
|
||||
/* [ Qwerty & Number ] Refresh Key ( XKConfigMobile.functionKeyButtonStyle === 'symbol' ) */
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m106{background-position:-621px -139.5px}
|
||||
/* [ Qwerty ] Refresh Key ( XKConfigMobile.functionKeyButtonStyle === 'text' ) */
|
||||
.xkp_ui_qwerty.ko.auto_resize.has_press_effect a:active .xkp_m106{background-position:-414px -465px}
|
||||
/* [ Number ] Refresh Key ( XKConfigMobile.functionKeyButtonStyle === 'text' ) */
|
||||
.xkp_ui_qwerty.ko2.auto_resize.has_press_effect a:active .xkp_m106{background-position:-552px -465px}
|
||||
/* [ Qwerty ] Symbol On/Off Key */
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m107{background-position:-655.5px -139.5px}
|
||||
/* [ Qwerty & Number ] Space Key */
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m108{background-position:-345px -186px}
|
||||
/* [ Qwerty & Number ] Enter Key ( XKConfigMobile.functionKeyButtonStyle === 'symbol' ) */
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m109{background-position:-414px -186px}
|
||||
/* [ Qwerty ] Enter Key ( XKConfigMobile.functionKeyButtonStyle === 'text' ) */
|
||||
.xkp_ui_qwerty.ko.auto_resize.has_press_effect a:active .xkp_m109{background-position:-483px -465px}
|
||||
/* [ Number ] Enter Key ( XKConfigMobile.functionKeyButtonStyle === 'text' ) */
|
||||
.xkp_ui_qwerty.ko2.auto_resize.has_press_effect a:active .xkp_m109{background-position:-621px -465px}
|
||||
/* [ Qwerty (Capslock On) ] Q(ㅃ) ~ P(ㅔ) */
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m36{background-position:-448.5px -186px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m37{background-position:-483px -186px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m38{background-position:-517.5px -186px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m39{background-position:-552px -186px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m40{background-position:-586.5px -186px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m41{background-position:-621px -186px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m42{background-position:-655.5px -186px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m43{background-position:-345px -232.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m44{background-position:-379.5px -232.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m45{background-position:-414px -232.5px}
|
||||
/* [ Qwerty (Capslock On) ] A(ㅁ) ~ L(ㅣ) */
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m46{background-position:-448.5px -232.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m47{background-position:-483px -232.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m48{background-position:-517.5px -232.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m49{background-position:-552px -232.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m50{background-position:-586.5px -232.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m51{background-position:-621px -232.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m52{background-position:-655.5px -232.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m53{background-position:-345px -279px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m54{background-position:-379.5px -279px}
|
||||
/* [ Qwerty (Capslock On) ] Z(ㅋ) ~ M(ㅡ) */
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m55{background-position:-414px -279px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m56{background-position:-448.5px -279px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m57{background-position:-483px -279px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m58{background-position:-517.5px -279px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m59{background-position:-552px -279px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m60{background-position:-586.5px -279px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m61{background-position:-621px -279px}
|
||||
/* [ Qwerty (Symbol On) ] "!" ~ ")" */
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m62{background-position:-655.5px -279px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m63{background-position:-345px -325.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m64{background-position:-379.5px -325.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m65{background-position:-414px -325.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m66{background-position:-448.5px -325.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m67{background-position:-483px -325.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m68{background-position:-517.5px -325.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m69{background-position:-552px -325.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m70{background-position:-586.5px -325.5px}
|
||||
/* [ Qwerty (Symbol On) ] "[" ~ ";" */
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m71{background-position:-621px -325.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m72{background-position:-655.5px -325.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m73{background-position:-345px -372px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m74{background-position:-379.5px -372px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m75{background-position:-414px -372px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m76{background-position:-448.5px -372px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m77{background-position:-483px -372px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m78{background-position:-517.5px -372px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m79{background-position:-552px -372px}
|
||||
/* [ Qwerty (Symbol On) ] ":" ~ "=" */
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m80{background-position:-586.5px -372px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m81{background-position:-621px -372px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m82{background-position:-655.5px -372px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m83{background-position:-345px -418.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m84{background-position:-379.5px -418.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m85{background-position:-414px -418.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m86{background-position:-448.5px -418.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m87{background-position:-483px -418.5px}
|
||||
/* [ Qwerty (Symbol On) ] "\" ~ "~" */
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m88{background-position:-517.5px -418.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m89{background-position:-552px -418.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m90{background-position:-586.5px -418.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m91{background-position:-621px -418.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m92{background-position:-655.5px -418.5px}
|
||||
.xkp_ui_qwerty.auto_resize.has_press_effect a:active .xkp_m93{background-position:-345px -465px}
|
||||
}
|
||||
|
||||
/* keypad내에 위치할 경우 */
|
||||
/*
|
||||
.xkalert_overlay{width:100%;height:100%;position:fixed;top:0;left:0;background-image:url(/images/xkeypad/overlay.png);z-index:10;}
|
||||
.xkalert_frame{width:100%;position:absolute;top:15%;}
|
||||
*/
|
||||
|
||||
/* 기존 alert 위치할 경우 */
|
||||
.xkalert_overlay{width:100%;height:100%;position:fixed;top:0;left:0;background-image:url(/images/xkeypad/overlay.png);z-index:10;}
|
||||
.xkalert_frame{width:100%;position:absolute;top:35%;}
|
||||
|
||||
.xkalert_box{font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-size:14px;width:90%;height:115px;margin:auto;text-align:center;border:1px solid gray;background-color:white;border-radius:3px;padding-top:15px;z-index:10;}
|
||||
.xkalert_box hr{border:0;height:0;border-top:1px solid rgba(0, 0, 0, 0.1);border-bottom:1px solid rgba(255, 255, 255, 0.3);}
|
||||
.xkalert_box .content{text-align:center;vertical-align:middle;height:57px;}
|
||||
.xkalert_box .bottom{position:absolute;width:90%;bottom:10px;margin:auto;}
|
||||
.xkalert_box .btn {display:inline-block;text-decoration:none;font-weight:bold;line-height:240%;color:rgb(102,102,102);text-align:center;background-color:white;width:100px;height:30px;border-color:rgb(180,180,180);border-width:1px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border-style:solid;padding-top:3px;}
|
||||
1
src/shared/ui/assets/js/rsa_crypto.js
Executable file
1
src/shared/ui/assets/js/rsa_crypto.js
Executable file
File diff suppressed because one or more lines are too long
35
src/shared/ui/assets/js/xkeypad.js
Executable file
35
src/shared/ui/assets/js/xkeypad.js
Executable file
File diff suppressed because one or more lines are too long
64
src/shared/ui/assets/js/xkeypad_config.js
Normal file
64
src/shared/ui/assets/js/xkeypad_config.js
Normal file
@@ -0,0 +1,64 @@
|
||||
/**
|
||||
* XKeypad Configuration
|
||||
* 가상 키패드 설정 파일
|
||||
*/
|
||||
|
||||
// XKeypad Mobile Configuration
|
||||
window.XKConfigMobile = {
|
||||
// 최대 입력 길이
|
||||
maxInputSize: 16,
|
||||
|
||||
// 기본 키패드 타입
|
||||
defaultKeyType: 'qwertysmart',
|
||||
|
||||
// 기본 뷰 타입
|
||||
defaultViewType: 'normal',
|
||||
|
||||
// 기본 숫자 키패드 행 개수
|
||||
defaultNumberKeyRowCount: 3,
|
||||
|
||||
// 키패드 닫힘 지연 시간 (ms)
|
||||
defaultCloseDelay: 300,
|
||||
|
||||
// E2E 통신 기본 활성화
|
||||
defaultIsE2E: true,
|
||||
|
||||
// 모바일 전용 모드 기본값
|
||||
defaultOnlyMobile: false,
|
||||
|
||||
// 키 음영 효과 기본값
|
||||
defaultHasPressEffect: true,
|
||||
|
||||
// 자동 키 크기 조절 기본값
|
||||
defaultAutoKeyResize: false,
|
||||
|
||||
// 키패드 기본 너비 (%)
|
||||
defaultWidth: 100,
|
||||
|
||||
logoImgPath: '/images/xkeypad/blank_key.png',
|
||||
|
||||
// 서버 URL (E2E 통신용)
|
||||
serverUrl: '',
|
||||
|
||||
// 공개키 (RSA)
|
||||
rsaPublicKey: {
|
||||
modulus: "C4F7B39E2E93DB19C016C7A0C1C05B028A1D57CB9B91E13F5B7353F8FB5AC6CE6BE31ABEB8E8F7AD18B90C08F4EBC011A6A8FCE614EA879ED5B96296B969CE92923BC9BAD6FD87F00E08F529F93010EA77E40937BDAC1C866E79ACE2F2822A3ECD982F90532D5301CF90D9BF89E953A0593AB6C5F31E99B690DD582FB85F85A9",
|
||||
exponent: "10001"
|
||||
},
|
||||
|
||||
// 디버그 모드
|
||||
debug: false,
|
||||
|
||||
// 로그 레벨
|
||||
logLevel: 'error' // 'none', 'error', 'warn', 'info', 'debug'
|
||||
};
|
||||
|
||||
// 전역 설정 함수
|
||||
window.setXKConfig = function(config) {
|
||||
window.XKConfigMobile = Object.assign(window.XKConfigMobile || {}, config);
|
||||
};
|
||||
|
||||
// 초기화 확인 플래그
|
||||
window.XKConfigLoaded = true;
|
||||
|
||||
console.log('XKConfigMobile initialized');
|
||||
Reference in New Issue
Block a user