tolag3/kcc_adr_advc_git
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2024/03/21[웹접근성 수정] 모바일 > 퀵메뉴(용어해설, 조정사례) 스타일 수정

Browse Source
This commit is contained in:
ITN_디자인팀 2024-03-21 10:47:42 +09:00
parent a4ce227bab
commit 7c5eff95ab
3 changed files with 36 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/main/webapp/WEB-INF/jsp/web/com/pop/quickWrapAdjCsPop.jsp
View File

@ -81,12 +81,12 @@
</script>
<!-- 저작권 용어사전 -->
<div class="tooltip-wrap">
<div class="tooltip-wrap quick_wrap">
<div class="popup_wrap glossary_popup">
<div class="popup_tit">
<p>저작권 조정사례</p>
</div>
<div class="popup_cont">
<div class="popup_cont ex_cont">
<div class="popup_search type02">
<p class="search_title">조정사례검색</p>
<input type="text" id="searchKeywordSearch" placeholder="검색어를 입력해주세요" title="용어 검색어 입력" onkeypress="if(event.keyCode==13) {search();}">

2
src/main/webapp/WEB-INF/jsp/web/com/pop/quickWrapGlossaryPop.jsp
View File

@ -77,7 +77,7 @@
</script>
<!-- 저작권 용어사전 -->
<div class="tooltip-wrap">
<div class="tooltip-wrap quick_wrap">
<div class="popup_wrap glossary_popup">
<div class="popup_tit">
<p>저작권 용어해설</p>

34
src/main/webapp/kccadrPb/usr/css/popup.css
View File

@ -125,7 +125,39 @@
.glossary_popup .glossary_right_area dl dt{display:flex;height:45px;padding:10px 20px;background-color:#f3f3f3;font-size:18px;font-weight:500;align-items:center;line-height:1.4;}
.glossary_popup .glossary_right_area dl dt p{position:relative;}
/* .glossary_popup .glossary_right_area dl dt p::after{position:absolute;content:"";width: 100%;height:8px;background-color:#ea5404;opacity:0.15;left:0;bottom:0;} */
.glossary_popup .glossary_right_area dl dd{max-height:calc(100% - 75px);padding:15px 20px;line-height: 1.5;font-size:16px;font-weight:300;overflow-y:auto;}
.glossary_popup .glossary_right_area dl dd{max-height:calc(95% - 75px);padding:15px 20px;line-height: 1.5;font-size:16px;font-weight:300;overflow-y:auto;}
/*모바일 > 퀵 메뉴(용어해설, 조정사례) 수정*/
@media all and (max-width: 980px){
.quick_wrap .glossary_popup{width: 100%; max-width: 100% !important; max-height: 100vh; left: 50% !important; top: 50% !important; transform: translate(-50%,-50%); overflow-y: scroll;}
}
@media all and (max-width: 790px){
.quick_wrap .glossary_popup .popup_cont{border: 0;}
.quick_wrap .glossary_popup .popup_cont .popup_tab_wrap .tab_ul{flex-wrap: wrap;}
.quick_wrap .popup_cont .popup_tab_wrap .tab_ul .tab_li .tab{white-space: normal;}
.quick_wrap .glossary_popup .tab_li{width: calc((100% - 0px)/8);}
.quick_wrap .glossary_popup .ex_cont .tab_li{width: calc((100% - 0px)/4);}
/*안에 내용*/
.quick_wrap .glossary_popup .popup_tab_content{display: block;}
.quick_wrap .glossary_popup .glossary_left_area{width: 100%;}
.quick_wrap .glossary_popup .glossary_right_area{width: 100%;}
.quick_wrap .popup_cont .btn_wrap{margin: 450px auto 0 auto;}
.quick_wrap .glossary_popup .glossary_right_area dl dt p{font-size: 17px; line-height: 1.2;}
}
@media all and (max-width: 540px){
.quick_wrap .glossary_popup .tab_li{width: calc((100% - 0px)/4);}
.quick_wrap .glossary_popup .ex_cont .tab_li{width: calc((100% - 0px)/2);}
/*검색창*/
.quick_wrap .popup_cont .popup_search.type02{display: block; padding: 10px 10px;}
.quick_wrap .popup_cont .popup_search.type02 .search_title{margin: 0 0 5px 3px;}
.quick_wrap .popup_cont .popup_search.type02 button{margin: 0;}
}
@media all and (max-width: 390px){
/*검색창*/
.quick_wrap .popup_cont .popup_search.type02 input{width: 100%;}
.quick_wrap .popup_cont .popup_search.type02 button{margin: 5px 0 0 0;}
}
/* //모바일 > 퀵 메뉴(용어해설, 조정사례) 수정 */
@media all and (max-width: 640px){
.popup_wrap{width: 90%; max-width: 90% !important; max-height: 90vh; left: 50% !important; top: 50% !important; transform: translate(-50%,-50%); overflow-y: scroll;}