/* div.Nvikie > * > * > button:focus, div.Qvikie > * > * > button:focus, div.Pvikie > * > * > button:focus { outline: none; box-shadow: none; } */ div.Nvikie > *, div.Nvikie > * > *, div.Qvikie > *, div.Qvikie > * > *, div.Pvikie > *, div.Pvikie > * > * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* 모바일 우선 스타일 */ div.Nvikie, div.Qvikie, div.Pvikie { width: 100%; visibility: hidden; position: fixed; left: 0; bottom: 0; outline: none; } div.Nvikie { height: 45%; } div.Qvikie { height: 55%; } div.Pvikie { height: 60%; } .v_top { width: 100%; height: 10%; border: 1px solid; border-bottom: none; background-color: white; } .v_top>div.v_logo { width: 20%; } .v_top>div.v_hint { width: 10%; height: calc(100% - 5px); } .v_top>div.v_size { width: 60%; height: calc(100% - 5px); overflow: hidden; white-space: nowrap; } .v_top>div.v_close { float: right; width: 10%; border-left: 1px solid; } .v_top>div.v_pad { margin-top: 5px; } .Qvikie .v_top>div.v_pad { margin-top: 8px; } .Qvikie .v_top>div.v_hint { height: calc(100% - 8px); } .Qvikie .v_top>div.v_size { height: calc(100% - 8px); } .v_center { border: 1px solid; } .Nvikie>.v_center { width: 100%; height: 90%; padding: 5px; background-color: #707070; } .Nvikie>.v_center>div.v_col, .Nvikie>.v_center>div.v_specol { float: left; width: 25%; height: 25%; padding: 1.5px; } .Qvikie>.v_center { width: 100%; height: 90%; padding: 1.5px; background-color: #707070; } .Qvikie>.v_center.full { height: 100%; } .Qvikie>.v_center>div>button { border-radius: 4px; } .Qvikie>.v_center>div>button.NumberButton { background-color: #d2d4d6; } .Pvikie>.v_center { width: 100%; height: 90%; padding: 5px; background-color: white; } .Pvikie>.v_center>svg { height: 100%; } .Nvikie>.v_center.full, .Pvikie>.v_center.full { height: 100%; } .Qvikie>.v_center>div.v_col, .Qvikie>.v_center>div.v_specol { float: left; width: calc(100%/11); height: 20%; padding: 1px; } .Qvikie>.v_center>div.v_col.v_pad { margin-left: calc(100%/11/2); } /* 숫자 special button size */ .Nvikie>.v_center>div.v_specol.two { width: calc(100%/2); } .Nvikie>.v_center>div.v_specol.three { width: calc(100%/1.355); } .Nvikie>.v_center>div.v_specol.four { width: 98.5%; } /* 쿼티 special button size */ .Qvikie>.v_center>div.v_specol.backspace, .Qvikie>.v_center>div.v_specol.rearrange, .Qvikie>.v_center>div.v_specol.space { width: calc(100%/11*2); } .Qvikie>.v_center>div.v_specol.transform, .Qvikie>.v_center>div.v_specol.complete { width: calc(100%/11*3.5); } /**************** 공통 ****************/ .v_top>div { float: left; height: 100%; text-align: center; } .v_top>div.v_close>button { width: 100%; height: 100%; border: 0px; background-color: transparent; cursor: pointer; } .Nvikie #pfq { background-color: rgb(204, 204, 204); fill: black; opacity: 0; } .Qvikie #pfq { background-color: transparent; fill: black; opacity: 0; } /* center button */ .v_center>div.v_col>button, .v_center>div.v_specol>button{ width: 100%; height: 100%; border: 0px; padding: 0 0; cursor: pointer; } .v_center>div.v_col>button { background-color: white; } .v_center>div.v_col>button.blank { background-color: transparent; cursor: default; } /* 숫자,쿼티 special button color */ .v_center>div.v_specol.security>button { background-color: #707070; } .v_center>div.v_specol.backspace>button, .v_center>div.v_specol.rearrange>button, .v_center>div.v_specol.transform>button, .v_center>div.v_specol.space>button { background-color: #d2d4d6; } .v_center>div.v_specol.complete>button { background-color: #150f96; } .Qvikie>.v_center>div.v_col.shift>button { background-color: #d2d4d6; } /***************************************/ /* 데스크탑용 스타일 */ @media screen and (min-width: 769px) { div.Nvikie { --width: 260px; --height: 170px; width: 260px; height: 170px; left: calc(100%/2 - var(--width)/2); top: calc(100%/2 - var(--height)/2); position: fixed; } div.Qvikie { --width: 510px; --height: 245px; width: 510px; height: 245px; left: calc(100%/2 - var(--width)/2); top: calc(100%/2 - var(--height)/2); position: fixed; } div.Pvikie { --width: 260px; --height: 300px; width: 260px; height: 300px; left: calc(100%/2 - var(--width)/2); top: calc(100%/2 - var(--height)/2); position: fixed; } .Nvikie>.v_top { height: 20%; } .Qvikie>.v_top { height: 15%; } .Pvikie>.v_top { height: 13%; } .v_top>div.v_logo { width: 100px; } .v_top>div.v_hint { width: 30px; } .Nvikie .v_top>div.v_size, .Pvikie .v_top>div.v_size { width: 75px; } .Qvikie .v_top>div.v_size { width: 333px; } .v_top>div.v_close { width: 38px; } .Nvikie>.v_center { width: 100%; height: 80%; padding: 8px 10px; } .Nvikie>.v_center>div.v_col, .Nvikie>.v_center>div.v_specol { width: calc(100%/6.001); height: calc(100%/3); padding: 1.5px 1.5px; } .Nvikie.v_center>div>button, .Qvikie>.v_center>div>button { border-radius: 2px; } .Qvikie>.v_center { width: 100%; height: 85%; padding: 15px; } .Qvikie>.v_center>div.v_col.v_pad { margin-left: calc(100%/11/2); } .Pvikie>.v_center { width: 100%; height: 87%; } /* 숫자 special button size */ .Nvikie>.v_center>div.v_specol.security, .Nvikie>.v_center>div.v_specol.backspace { width: calc(100%/6); } .Nvikie>.v_center>div.v_specol.rearrange, .Nvikie>.v_center>div.v_specol.complete { width: calc(100%/3); } /* 쿼티 special button size */ .Qvikie>.v_center>div.v_col.shift, .Qvikie>.v_center>div.v_specol.backspace { /* 1.5칸 */ width: calc(100%/11*1.5); } .Qvikie>.v_center>div.v_specol.security, .Qvikie>.v_center>div.v_specol.transform, .Qvikie>.v_center>div.v_specol.rearrange, .Qvikie>.v_center>div.v_specol.complete { /* 2칸 */ width: calc(100%/11*2); } .Qvikie>.v_center>div.v_specol.space { /* 3칸 */ width: calc(100%/11*3); } } /* 포인팅된 점 설정 */ .discoverDot { fill: yellow !important; } /* 포인팅된 점 외 설정 */ .patternlock>.lock-dots>.circle { stroke: transparent; fill: #e5e5e5; stroke-width: 13.5; } /* 포인팅된 라인 설정 */ .patternlock>.lock-lines>.line { stroke-width: 1; stroke-linecap: round; stroke: #ff4800; } /* 포인팅된 점의 라운드 설정 */ .patternlock>.lock-actives>.circle { fill: #000; opacity: 0.2; animation: lock-activate-dot 0.15s 0s ease 1; transform-origin: center; }