.wfsr loading dialog design enhancement.

git-svn-id: http://xe-core.googlecode.com/svn/branches/maserati@12327 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
ChanMyeong 2012-11-29 08:45:47 +00:00
parent 8e6a0fb991
commit 84f0692664
8 changed files with 36 additions and 37 deletions

View file

@ -20,7 +20,7 @@ body>.x,
.x a[target="_blank"]:focus:after{opacity:.7;filter:alpha(opacity=70)}
.x mark{background-color:#FF0;color:#000}
/* Bootstrap Override */
.x .x_page-header{padding-bottom:0;border-bottom:2px solid #ddd}
.x .x_page-header{margin-top:10px;padding-bottom:0;border-bottom:2px solid #ddd}
.x .x_page-header>h1{margin-bottom:0;font-size:24px;color:#333}
.x h1,
.x h2,
@ -190,9 +190,11 @@ body>.x,
.x>.body:after{content:"";display:block;clear:both}
.x>.body>.content{width:100%;padding:1px 0 0 0;float:right;margin:0 0 0 -100%;outline:none}
.x>.body>.content>*:first-child{margin-top:0}
.x>.body>.gnb{width:180px;position:relative;margin:1px 0 0 -215px;float:left;display:inline}
.x>.body.wide>.gnb{width:38px;margin:1px 0 0 -70px}
.x>.body>.gnb{width:180px;position:relative;margin:15px 0 0 -215px;float:left;display:inline}
.x>.body.wide>.gnb{width:38px;margin-left:-70px}
@media all and (max-width:980px){
.x>.header{border-bottom:0}
.x>.header:before{content:normal}
.x>.body,
.x>.body.wide{padding:0}
.x>.body>.content{width:auto;padding:1px 10px 0 10px;float:none;margin:0 0 30px 0}
@ -235,7 +237,7 @@ body>.x,
.x>.footer .vr{color:#ccc !important}
/* GNB */
.x>.body>.gnb ul{margin:0;padding:0;list-style:none}
.x>.body>.gnb>ul{position:relative;z-index:1;box-shadow:0 1px 4px #ccc;border:2px solid #fff;border-top:0}
.x>.body>.gnb>ul{position:relative;z-index:1;box-shadow:0 0 4px #ccc;border:2px solid #fff}
.x>.body>.gnb a{text-decoration:none;text-shadow:0 1px 0 #fff;color:#000;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x>.body>.gnb>a[href="#gnbNav"]{display:block;position:absolute;z-index:2;white-space:nowrap;font-size:0;top:50%;right:-14px;background:#eee;width:12px;height:50px;border-radius:0 3px 3px 0;margin:-25px 0 0 0;border:1px solid #ddd;border-left:0;overflow:hidden;text-indent:20px}
.x>.body.wide>.gnb>a[href="#gnbNav"]>b{border-color:transparent;border-left-color:#666;margin:-4px 0 0 -2px}
@ -249,15 +251,16 @@ body>.x,
.x>.body>.gnb .exMenu .x_icon-chevron-up,
.x>.body>.gnb>.ex .exMenu .x_icon-chevron-down{display:none}
.x>.body>.gnb>.ex .exMenu .x_icon-chevron-up{display:inline-block}
.x>.body>.gnb>ul>li[data-index="1"]{border-top-color:#eee}
.x>.body>.gnb>ul>li[data-index="5"]{margin-bottom:25px}
.x>.body>.gnb>ul>li[data-index="6"]{border-top:1px solid #eee}
.x>.body>.gnb>ul>li[data-index="6"]{border-top-color:#eee}
.x>.body>.gnb>ul>li[data-index="6"],
.x>.body>.gnb>ul>li[data-index="7"]{display:none}
.x>.body>.gnb>.ex>li[data-index="6"],
.x>.body>.gnb>.ex>li[data-index="7"]{display:block}
.x>.body>.gnb>ul>li[data-index].active_{display:none}
@media all and (max-width:980px){
.x>.body>.gnb>ul{border-right:0;border-bottom-width:1px}
.x>.body>.gnb>ul{border:0}
.x>.body>.gnb>ul>li{display:none}
.x>.body>.gnb.open>ul>li{display:block}
.x>.body>.gnb.open>ul>li[data-index="6"],
@ -294,7 +297,7 @@ body>.x,
.x>.body>.gnb>ul>li.open>a{font-weight:bold;color:#fff;text-shadow:0 -1px 0 #333;background:#3886d0;background:-webkit-gradient(linear,left top,left bottom,from(#6ebcea),to(#3886d0));background:-moz-linear-gradient(top,#6ebcea,#3886d0);background:-o-linear-gradient(top,#6ebcea,#3886d0)}
.x>.body>.gnb>ul>li.active>a{font-weight:bold;color:#fff;text-shadow:none;background:#222;background:-webkit-linear-gradient(top,from(#555),to(#222));background:-moz-linear-gradient(top,#555,#222);background:-o-linear-gradient(top,#555,#222)}
@media all and (max-width:980px){
.x>.body>.gnb>ul>li:first-child>a{font-weight:bold;color:#fff;text-shadow:none;background:#222;background:-webkit-linear-gradient(top,from(#555),to(#222));background:-moz-linear-gradient(top,#555,#222);background:-o-linear-gradient(top,#555,#222)}
.x>.body>.gnb>ul>li:first-child>a{font-weight:bold;color:#fff;text-shadow:none;border-radius:3px;background-color:#222;background-image:-webkit-linear-gradient(top, #555, #222);background-image:-moz-linear-gradient(top, #555, #222);background-image:-o-linear-gradient(top, #555, #222);background-image:linear-gradient(top, #555, #222);}
}
/* li>a>span */
.x>.body.wide>.gnb>ul>li>a>.tx{display:inline-block;width:1px;height:1px;overflow:hidden}

File diff suppressed because one or more lines are too long

View file

@ -54,4 +54,4 @@ a:focus{text-decoration:underline}
.x .language li{position:relative;margin:0 0 7px 0}
.x .language li>i{position:absolute;top:2px;left:-20px}
/* Waiting for server response */
.wfsr{display:none;position:absolute;position:fixed;left:0;top:0;z-index:100;border:1px solid #EAE9DC;background:#FFFDEF url(../../common/img/msg.loading.gif) no-repeat 1em .5em;margin:1em;padding:1em 1em 1em 55px;border-radius:5px;line-height:1.4;font-weight:bold}
.wfsr{display:none;position:absolute;position:fixed;left:0;top:0;right:0;bottom:0;z-index:100;color:#fff;background:#333 url(../../common/img/msg.loading.gif) no-repeat center 90px;text-align:center;margin:0;padding:120px 0 0 0;opacity:.8;filter:alpha(opacity=80);font:bold 16px "Helvetica Neue", Helvetica, Arial, , Dotum, sans-serif}

View file

@ -10,7 +10,7 @@ body>.x{max-width:none !important}
#site .btnBoth:after{content:"";display:block;clear:both}
.col{display:inline-block;*display:inline;*zoom:1;vertical-align:top;position:relative;background-color:#ddd;white-space:normal;height:100%;min-width:220px;padding:10px;margin:0 4px 0 0;border-radius:5px;box-shadow:1px 1px 1px #999;background-image:-webkit-linear-gradient(top, #eee, #ddd 18px, #ccc 18px, #ddd 33px);background-image:-moz-linear-gradient(top, #eee, #ddd 18px, #ccc 18px, #ddd 33px);background-image:-o-linear-gradient(top, #eee, #ddd 18px, #ccc 18px, #ddd 33px);background-image:linear-gradient(top, #eee, #ddd 18px, #ccc 18px, #ddd 33px);}
.col>h1,
.col>*>h1{line-height:32px !important;font-size:16px !important;margin:-10px -10px 0 -10px;color:#000 !important;padding:0 8px;text-shadow:0 1px 0 #fff;max-width:270px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.col>*>h1{line-height:32px !important;font-size:16px !important;margin:-10px -10px 0 -10px;color:#000 !important;padding:0 8px;text-shadow:0 1px 0 #fff;max-width:240px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.col>*>h1>a{color:#000;text-decoration:none}
.col>*>h1>a[target="_blank"]:after{vertical-align:middle;opacity:.75;filter:alpha(opacity=75)}
.col>*>h1>a:hover,
@ -28,7 +28,7 @@ body>.x{max-width:none !important}
/* .mapi */
.col.map .x_btn-group{border-top:1px solid #ddd;padding:10px 0}
.col.map li._isCut a{color:#aaa}
.mapi{margin:0 0 5px 0;min-width:200px;background-color:transparent !important}
.mapi{margin:3px 0 5px 0;min-width:200px;background-color:transparent !important}
.mapi ul{margin:0;padding:0;list-style:none}
.mapi li{padding:0 80px 0 0;white-space:nowrap;position:relative;line-height:30px;border-radius:3px;vertical-align:top}
.mapi li>ul{margin:0}
@ -185,17 +185,15 @@ body>.x{max-width:none !important}
#sitemap_general .btnBoth{position:absolute;margin:0;bottom:4px;left:4px;right:4px}
/* Properties */
#properties ul{margin:0;padding:0 0 8px 0}
#properties li{position:relative;white-space:nowrap}
#properties li{position:relative;white-space:nowrap;border-top:1px solid #ddd}
#properties li:first-child{border:0}
#properties li>strong{margin:0 0 0 8px}
#properties li>a,
#properties li>button{color:#000;position:relative;display:block;padding:0 8px;line-height:30px;background-color:transparent;border:0;text-align:left;text-decoration:none;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s}
#properties li>a{padding:0 24px 0 8px}
#properties li.type{border-bottom:1px solid #ddd;height:30px;line-height:30px}
#properties li.add{border:1px solid #ddd;border-left:0;border-right:0}
#properties li.default{margin: 0 0 0 0;}
#properties li.add>a{height:30px;line-height:30px}
#properties li.homepage{border-top:1px solid #ddd;border-bottom:1px solid #ddd}
#properties li.type{height:30px;line-height:30px}
#properties li.homepage>label{line-height:30px}
#properties li.ex{border-top:0}
#properties li>button{width:100%}
#properties li>a:hover,
#properties li>button:hover,
@ -217,7 +215,7 @@ body>.x{max-width:none !important}
/* Add Menu */
#add_menu label{font-weight:bold}
#add_menu .x_tabbable{padding-top:8px}
#add_menu .desc{width:220px;min-height:55px;border-bottom:1px solid #ddd;color:#666;margin:0;padding:0 0 5px 0}
#add_menu .desc{width:220px;min-height:50px;border-bottom:1px solid #ddd;color:#666;margin:0;padding:5px 0}
#add_menu .desc>a{overflow:hidden;font-size:0;text-indent:20px;display:inline-block;width:14px;height:14px;opacity:.5;filter:alpha(opacity=50);vertical-align:middle}
#add_menu .desc>a:after{content:normal}
#add_menu .desc>a:hover,
@ -235,11 +233,11 @@ body>.x{max-width:none !important}
#auth .x_btn-group{position:absolute;left:4px;right:4px;bottom:4px;margin:0}
/* Image Button */
#imgbtn form{padding:8px 0 0 0;margin:0}
#imgbtn figure{margin:0}
#imgbtn figcaption{font-weight:bold}
#imgbtn p{margin:0}
#imgbtn figure{margin:0;text-align:center}
#imgbtn figcaption{font-weight:bold;text-align:left}
#imgbtn p{margin:0;text-align:left}
#imgbtn .btnBoth{border-top:0;border-bottom:1px solid #ddd;margin:0;padding:10px 0}
#imgbtn figure>img{max-width:200px;max-height:200px}
#imgbtn figure>img{max-width:220px}
#imgbtn figure>img,
#imgbtn .delete,
#imgbtn .modify{display:none}
@ -252,8 +250,10 @@ body>.x{max-width:none !important}
/* Design */
#design ._site{display:none}
#design ._preview_form{margin:0}
#design .mvOption{margin-bottom:10px}
#design ul{margin-top:8px}
#design .mvOption{padding:10px 0 0 0}
#design>ul{margin-top:8px}
#design .x_nav{margin-bottom:14px}
#design .x_nav a{padding-top:5px;padding-bottom:4px}
#design .btnBoth{border:0}
#design img{width:220px}
#design .shadow{position:relative;box-shadow:0 0 4px #999 inset;padding:4px;width:212px;height:160px;overflow:hidden}

View file

@ -113,18 +113,18 @@
<div class="cnt">
<ul>
<li class="type"><strong>{$lang->menu_type}</strong>: <span class="module_type"></span></li>
<li class="default"><a href="#default" data-admin-show="#default">{$lang->general_settings} <i class="x_icon-circle-arrow-right"></i></a></li>
<li><a href="#default" data-admin-show="#default">{$lang->general_settings} <i class="x_icon-circle-arrow-right"></i></a></li>
<!--li><strong>{$lang->menu_id}</strong>: <span class="url"></span></li-->
<li class="add"><a href="#add" data-admin-show="#add">{$lang->add_menu} <i class="x_icon-circle-arrow-right"></i></a></li>
<li><a href="#add" data-admin-show="#add">{$lang->add_menu} <i class="x_icon-circle-arrow-right"></i></a></li>
<li><button type="button" class="_edit_cut">{$lang->cut}</button></li>
<li><button type="button" class="_edit_copy">{$lang->copy}</button></li>
<li><button type="button" class="_edit_paste" disabled>{$lang->paste}</button></li>
<li><button type="button" class="_deleteMenu">{$lang->cmd_delete}</button></li>
<li class="ex"><button type="button" class="_edit_copy">{$lang->copy}</button></li>
<li class="ex"><button type="button" class="_edit_paste" disabled>{$lang->paste}</button></li>
<li class="ex"><button type="button" class="_deleteMenu">{$lang->cmd_delete}</button></li>
<li class="homepage"><label style="padding:0 0 0 8px;margin:0"><input type="checkbox" class="_chkUseAsHome"> {$lang->use_site_default_module}</label></li>
<li><a href="#imgbtn" data-admin-show="#imgbtn">{$lang->menu_img_btn} <i class="x_icon-circle-arrow-right"></i></a></li>
<li class="design"><a href="#design" data-admin-show="#design">{$lang->design} <i class="x_icon-circle-arrow-right"></i></a></li>
<li><a href="#design" data-admin-show="#design">{$lang->design} <i class="x_icon-circle-arrow-right"></i></a></li>
<li><a href="#auth" data-admin-show="#auth">{$lang->grant} <i class="x_icon-circle-arrow-right"></i></a></li>
<li class="details"><a href="#" class="_openFullSetup">{$lang->full_settings} <i class="x_icon-cog"></i></a></li>
<li><a href="#" class="_openFullSetup">{$lang->full_settings} <i class="x_icon-cog"></i></a></li>
</ul>
</div>
</section>