diff --git a/layouts/simple_world/layout.scss b/layouts/simple_world/layout.scss index 8147b3062..e0cab0867 100644 --- a/layouts/simple_world/layout.scss +++ b/layouts/simple_world/layout.scss @@ -43,7 +43,9 @@ body { width:100%; margin:0 auto; } - +header.layout_frame, footer.layout_frame{ + font-family: "맑은 고딕", "Apple SD Gothic Neo","나눔고딕",NanumGothic,'Nanum Gothic',Arial,Helvetica,sans-serif; +} .layout_header { padding:0; } @@ -71,36 +73,35 @@ body { .layout_content { overflow: auto; padding:10px 0px; + + img { + max-width:100%; + height: auto + } } .layout_content>*:first-child { margin-top:0 } -.layout_content img { - max-width:100%; - height: auto -} - /* Header */ header.layout_frame { position:relative; background-color: lighten($primary-color, 10%); z-index: 1; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); -} -.layout_header>h1 { - margin:0 auto; - padding:20px 5px; - box-sizing: border-box; - color: layoutGrayContrast(lighten($primary-color, 10%), 0.710); -} - -.layout_header>h1>a { - font-size:32px; - text-decoration: none; - color: layoutGrayContrast(lighten($primary-color, 10%), 0.710); - padding:0 5px; + .layout_header>h1 { + margin:0 auto; + padding:20px 5px; + box-sizing: border-box; + color: layoutGrayContrast(lighten($primary-color, 10%), 0.710); + a { + font-size:32px; + text-decoration: none; + color: layoutGrayContrast(lighten($primary-color, 10%), 0.710); + padding:0 5px; + } + } } #layout_menu_toggle { @@ -114,83 +115,90 @@ header.layout_frame { padding: 13px 7px; background-color: darken($grey, 35%); color: lighten($grey, 30%); -} - -.layout_footer p { - font-size:12px -} - -.layout_footer a { - font-weight: bold; - text-decoration: none; - color: lighten($primary_color, 31%); -} - -.layout_footer a:hover, -.layout_footer a:focus { - text-decoration: underline + p { + font-size:12px + } + a { + font-weight: bold; + text-decoration: none; + color: lighten($primary_color, 31%); + } + a:hover, + a:focus { + text-decoration: underline + } } /* Search */ -.layout_header .layout_search { - display: inline-block; - vertical-align: bottom; - margin:0 -} - -.layout_header .layout_search>input { - font-size:12px; - -webkit-appearance: none; - border-radius: 0; -} - -.layout_header .layout_search>input[type="text"] { - width: 126px; - line-height: 18px; - font-size: 14px; - margin: 0; - padding: 8px 8px 6px 8px; - position: relative; - display: inline-block; - outline: none; - border-radius: 0; - border: none; - background: lighten($primary-color, 20%); - color: layoutGrayContrast(lighten($primary-color, 20%), 0.710); -} - -.layout_header .layout_search>input[type="text"]:hover, -.layout_header .layout_search>input[type="text"]:focus { - background: lighten($primary-color, 50%); - color: layoutGrayContrast(lighten($primary-color, 50%), 0.710); -} - -.layout_header .layout_search>input[type="submit"] { - vertical-align: bottom; - background: lighten($primary-color,15%); - color: layoutGrayContrast(lighten($primary-color, 15%), 0.710); - border: none; - height:32px; - padding:0 15px; - margin:0; -} - -.layout_header .layout_search>input[type="submit"]:hover, - .layout_header .layout_search>input[type="submit"]:focus { - background:$primary-color; - color: layoutGrayContrast($primary-color, 0.710); +.layout_header{ + .layout_search { + display: inline-block; + vertical-align: bottom; + margin:0 + } + input { + font-size:12px; + -webkit-appearance: none; + border-radius: 0; + } + input[type="text"] { + width: 126px; + line-height: 18px; + font-size: 14px; + margin: 0; + padding: 8px 8px 6px 8px; + position: relative; + display: inline-block; + outline: none; + border-radius: 0; + border: none; + background: lighten($primary-color, 20%); + color: layoutGrayContrast(lighten($primary-color, 20%), 0.710); + } + input[type="text"]:hover, + input[type="text"]:focus { + background: lighten($primary-color, 50%); + color: layoutGrayContrast(lighten($primary-color, 50%), 0.710); + } + input[type="submit"] { + vertical-align: bottom; + background: lighten($primary-color,15%); + color: layoutGrayContrast(lighten($primary-color, 15%), 0.710); + border: none; + height:32px; + padding:0 15px; + margin:0; + } + input[type="submit"]:hover, + input[type="submit"]:focus { + background:$primary-color; + color: layoutGrayContrast($primary-color, 0.710); + } } /* GNB */ .layout_menu { background-color: lighten($grey, 31%); -} -.layout_menu ul { - list-style-type: none; - padding: 0; - overflow: hidden; - max-width:1050px; - margin:0 auto; + ul { + list-style-type: none; + padding: 0; + overflow: hidden; + max-width:1050px; + margin:0 auto; + } + li a, .dropbtn { + display: inline-block; + color: black; + text-align: center; + padding: 14px 16px; + text-decoration: none; + font-size: 13px; + line-height: 1; + } + li.active>a { + background-color: lighten($primary-color, 15%); + color: layoutGrayContrast(lighten($primary-color, 15%), 0.710); + } } .layout_menu>ul{ width:100%; @@ -203,26 +211,13 @@ header.layout_frame { float: right; } - -.layout_menu li a, .dropbtn { - display: inline-block; - color: black; - text-align: center; - padding: 14px 16px; - text-decoration: none; - font-size: 13px; - line-height: 1; -} - -.layout_menu li.active>a { - background-color: lighten($primary-color, 15%); - color: layoutGrayContrast(lighten($primary-color, 15%), 0.710); -} -header .layout_menu li:hover, -header .layout_menu li:focus, -header .layout_menu li:active, -header .layout_menu .layout_focus { - background-color: lighten($grey, 40%); +header.layout_frame .layout_menu{ + li:hover, + li:focus, + li:active, + .layout_focus { + background-color: lighten($grey, 40%); + } } .layout_menu li a:hover, .layout_menu li a:focus, @@ -236,78 +231,81 @@ header .layout_menu .layout_focus { background-color: $primary-color; color: layoutGrayContrast($primary-color, 0.710); } +.layout_menu { + li.layout_dropdown { + display: block; + } -.layout_menu li.layout_dropdown { - display: block; + .layout_dropdown-content { + display: none; + position: absolute; + background-color: lighten($grey, 40%); + z-index: 1000; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + } + + .layout_dropdown-content a { + color: black; + padding: 12px 16px; + text-decoration: none; + min-width: 160px; + display: block; + text-align: left; + box-sizing: border-box; + } + + . + .layout_dropdown-content a:hover, + .layout_dropdown-content a:active, + .layout_dropdown-content a:focus { + display: block; + background-color: lighten($primary-color, 10%); + color: layoutGrayContrast(lighten($primary-color, 10%), 0.710); + } + + .layout_dropdown:hover .layout_dropdown-content, + .layout_dropdown:active .layout_dropdown-content, + .layout_dropdown:focus .layout_dropdown-content, + .layout_dropdown a:hover ~ .layout_dropdown-content, + .layout_dropdown a:active ~ .layout_dropdown-content, + .layout_dropdown a:focus ~ .layout_dropdown-content, + .layout_dropdown layout_dropdown-content:hover, + .layout_dropdown layout_dropdown-content:active, + .layout_dropdown layout_dropdown-content:focus { + display: block; + } } -.layout_menu .layout_dropdown-content { - display: none; - position: absolute; - background-color: lighten($grey, 40%); - z-index: 1000; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); -} - -.layout_menu .layout_dropdown-content a { - color: black; - padding: 12px 16px; - text-decoration: none; - min-width: 160px; - display: block; - text-align: left; - box-sizing: border-box; -} - -. -.layout_menu .layout_dropdown-content a:hover, -.layout_menu .layout_dropdown-content a:active, -.layout_menu .layout_dropdown-content a:focus { - display: block; - background-color: lighten($primary-color, 10%); - color: layoutGrayContrast(lighten($primary-color, 10%), 0.710); -} - -.layout_menu .layout_dropdown:hover .layout_dropdown-content, -.layout_menu .layout_dropdown:active .layout_dropdown-content, -.layout_menu .layout_dropdown:focus .layout_dropdown-content, -.layout_menu .layout_dropdown a:hover ~ .layout_dropdown-content, -.layout_menu .layout_dropdown a:active ~ .layout_dropdown-content, -.layout_menu .layout_dropdown a:focus ~ .layout_dropdown-content, -.layout_menu .layout_dropdown layout_dropdown-content:hover, -.layout_menu .layout_dropdown layout_dropdown-content:active, -.layout_menu .layout_dropdown layout_dropdown-content:focus/* , -.layout_menu .layout_dropdown .layout_dropdown-content:has(> a:hover), -.layout_menu .layout_dropdown .layout_dropdown-content:has(> a:focus) */ { - display: block; -} #layout_fnb{ background-color: transparent; } -.layout_footer .layout_menu li a, .layout_footer .dropbtn { - color: lighten($grey, 10%); - font-weight: normal; - text-decoration: none; - padding: 14px 0px; -} -.layout_footer .layout_menu li a>span { - padding: 0px 16px; - border-right: 1px solid lighten($grey, 10%); -} -.layout_footer .layout_menu li:first-child{ - margin-left:-16px; -} -.layout_footer .layout_menu li:last-child a>span { - border-right: none; +.layout_footer { + .layout_menu li a, .dropbtn { + color: lighten($grey, 10%); + font-weight: normal; + text-decoration: none; + padding: 14px 0px; + } + .layout_menu li a>span { + padding: 0px 16px; + border-right: 1px solid lighten($grey, 10%); + } + .layout_menu li:first-child{ + margin-left:-16px; + } + .layout_menu li:last-child a>span { + border-right: none; + } + + .layout_menu li a:hover, + .layout_menu li a:focus, + .layout_menu li a:active{ + background-color: transparent; + color: #fff; + } } -.layout_footer .layout_menu li a:hover, -.layout_footer .layout_menu li a:focus, -.layout_footer .layout_menu li a:active{ - background-color: transparent; - color: #fff; -} /* Language */ .layout_language{ @@ -382,62 +380,62 @@ header .layout_menu .layout_focus { border: none; cursor: pointer; transition: background 0.3s; + span { + display: block; + position: absolute; + top: 41px; + left: 17px; + right: 17px; + height: 8px; + background: white; + } + + span::before, + span::after { + position: absolute; + display: block; + left: 0; + width: 100%; + height: 8px; + background-color: #fff; + content: ""; + } + + span::before { + top: -19px; + } + + span::after { + bottom: -19px; + } + } .layout_mobile_menu:focus { outline: none; } -.layout_mobile_menu span { - display: block; - position: absolute; - top: 41px; - left: 17px; - right: 17px; - height: 8px; - background: white; -} - -.layout_mobile_menu span::before, -.layout_mobile_menu span::after { - position: absolute; - display: block; - left: 0; - width: 100%; - height: 8px; - background-color: #fff; - content: ""; -} - -.layout_mobile_menu span::before { - top: -19px; -} - -.layout_mobile_menu span::after { - bottom: -19px; -} - .layout_mobile_menu--htx { background-color: $primary-color; + span { + transition: background 0s 0.3s; + } + span::before, + span::after { + transition-duration: 0.3s, 0.3s; + transition-delay: 0.3s, 0s; + } + + span::before { + transition-property: top, transform; + } + + span::after { + transition-property: bottom, transform; + } } -.layout_mobile_menu--htx span { - transition: background 0s 0.3s; -} -.layout_mobile_menu--htx span::before, -.layout_mobile_menu--htx span::after { - transition-duration: 0.3s, 0.3s; - transition-delay: 0.3s, 0s; -} - -.layout_mobile_menu--htx span::before { - transition-property: top, transform; -} - -.layout_mobile_menu--htx span::after { - transition-property: bottom, transform; -} /* active state, i.e. menu open */ .layout_mobile_menu--htx.is-active { @@ -507,14 +505,13 @@ header .layout_menu .layout_focus { width:100%; height: auto; clear: both; - } - - .layout_menu ul { - list-style-type: none; - margin: 0; - padding: 0; - width: 100%; - height: auto; + ul { + list-style-type: none; + margin: 0; + padding: 0; + width: 100%; + height: auto; + } } .layout_menu>ul>li, #layout_gnb>ul>li:first-child { @@ -582,16 +579,16 @@ header .layout_menu .layout_focus { .layout_language { margin-top: 15px; - } - .layout_language ul { - display: none; - float:none; - width:100%; - } - .layout_language .toggle{ - display: block; - float: none; - width:100%; + ul { + display: none; + float:none; + width:100%; + } + .toggle{ + display: block; + float: none; + width:100%; + } } /* PC only */ .layout_pc { diff --git a/modules/member/skins/simple_world/css/css.less b/modules/member/skins/simple_world/css/css.less index 57534b821..e448b0a5a 100644 --- a/modules/member/skins/simple_world/css/css.less +++ b/modules/member/skins/simple_world/css/css.less @@ -62,6 +62,7 @@ script, style { font-family: "맑은 고딕", "Apple SD Gothic Neo","나눔고딕",NanumGothic,'Nanum Gothic',Arial,Helvetica,sans-serif; font-size: 14px; + text-align: justify; margin: 8px 0px; padding: 0 5px; } diff --git a/modules/message/skins/simple_world/css/message.less b/modules/message/skins/simple_world/css/message.less index c567a2db8..dc80e2dc1 100644 --- a/modules/message/skins/simple_world/css/message.less +++ b/modules/message/skins/simple_world/css/message.less @@ -65,6 +65,7 @@ script, style box-sizing:border-box; font-family: "맑은 고딕", "Apple SD Gothic Neo","나눔고딕",NanumGothic,'Nanum Gothic',Arial,Helvetica,sans-serif; font-size: 14px; + text-align: justify; padding: 0 5px; } diff --git a/widgets/content/skins/simple_rectangle/css/css.less b/widgets/content/skins/simple_rectangle/css/css.less index 13906cb0e..9ddb7841d 100644 --- a/widgets/content/skins/simple_rectangle/css/css.less +++ b/widgets/content/skins/simple_rectangle/css/css.less @@ -56,6 +56,7 @@ div.simple_content { font-family: "맑은 고딕", "Apple SD Gothic Neo","나눔고딕",NanumGothic,'Nanum Gothic',Arial,Helvetica,sans-serif; font-size: 14px; + text-align: justify; padding: 3px; } section.simple_content