fanbinit/rhymix
1
0
Fork 0
mirror of https://github.com/Lastorder-DC/rhymix.git synced 2026-01-07 18:51:41 +09:00
Code Issues Projects Releases Packages Wiki Activity

Issue 1603: Admin menu navigation UX enhancement. (Desktop/Mobile)

Browse source 
git-svn-id: http://xe-core.googlecode.com/svn/branches/1.5.0@10341 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
ChanMyeong 2012-03-06 08:32:27 +00:00
parent c308ad67cb
commit 4d9155e861
5 changed files with 128 additions and 114 deletions
Download patch file Download diff file Expand all files Collapse all files

116
modules/admin/tpl/css/admin.css
View file

@ -117,65 +117,45 @@ header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption{di
.x .form .a{margin:0 0 5px 0}
.x .form .tgForm{margin-right:1em}
/* Global Navigation Bar */
.x .gnb{position:relative;clear:both;border:1px solid #c1c1c1;border-left:0;border-right:0;background-color:#efefef;background:#efefef -webkit-gradient(linear, 0% 0%, 0% 100%, from(#efefef), to(#dcdcdc));background:#efefef -moz-linear-gradient(top, #efefef, #dcdcdc);filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#efefef, endColorStr=#dcdcdc);zoom:1}
.x .gnb.active{border-bottom:0;border-radius:0 0 5px 5px}
.x .gnb ul{position:relative;display:inline-block;*display:inline;zoom:1;margin:0 0 0 20px;padding:1px;list-style:none}
.x .gnb ul ul{_position:absolute;display:block;_display:inline;zoom:1;clear:both;margin:0;padding:0;border:0;overflow:hidden}
.x .gnb.active ul{box-shadow:0 0 10px #999;padding:1px 5px 5px 5px;margin:0 -5px 0 15px;border:1px solid #ccc;border-top:0;border-bottom:0;background:#fff}
.x .gnb.active ul ul{_position:relative;box-shadow:none;display:block;_display:inline;clear:both;padding:0;margin:0;border:0}
.x .gnb ul:after{content:"";display:block;clear:both}
.x .gnb li{position:relative;display:inline-block;*display:inline;zoom:1;vertical-align:top;overflow:hidden;margin:0 -1px 0 0;*margin:0 -5px 0 0}
.x .gnb li.activeOn{z-index:10}
.x .gnb li.activeOn>a{border:1px solid #ccc}
.x .gnb li li{display:block;_float:left;clear:both;overflow:hidden;border:0;margin:0}
.x .gnb li li:first-child{border:0}
.x .gnb li a{display:block;_float:left;font-weight:bold;color:#333;font-size:12px;height:14px;padding:9px 15px;white-space:nowrap;text-decoration:none;text-shadow:0 1px 0 #fff;zoom:1;border:1px solid #fff;border-top:0;border-bottom:0;*border:0}
.x .gnb li a:hover,
.x .gnb li a:active,
.x .gnb li a:focus{background:#f4f4f4}
.x .gnb li.activeOn>a{background:#fff;padding:8px 15px}
.x .gnb li li a{color:#555;background:#fff;padding:5px 15px !important;font-weight:normal !important;border:0 !important}
.x .gnb li li a:hover,
.x .gnb li li a:active,
.x .gnb li li a:focus{border:0;background:#eee}
.x .gnb .setting{position:absolute;top:8px;right:2em;width:16px;height:0;padding:16px 0 0 0;overflow:hidden;background:url(../img/iconSetting.gif) no-repeat center}
.x .gnb.jx ul{display:block;position:static;padding:0}
.x .gnb.jx li{float:none;clear:both;border-top:1px solid #ccc}
.x .gnb.jx ul ul{border:0}
.x .gnb.jx li li{border:0}
.x .gnb.jx li a{float:none;display:block}
.x .gnb.jx li a:hover,
.x .gnb.jx li a:active,
.x .gnb.jx li a:focus{background:none}
.x .gnb.jx li.activeOn>a{background:#ddd}
.x .gnb{position:relative;height:34px;clear:both;border:1px solid #c1c1c1;border-left:0;border-right:0;background-color:#efefef;background:#efefef -webkit-gradient(linear, 0% 0%, 0% 100%, from(#efefef), to(#dcdcdc));background:#efefef -moz-linear-gradient(top, #efefef, #dcdcdc);filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#efefef, endColorStr=#dcdcdc);zoom:1}
.x .gnb .nav{position:relative;display:inline-block;*display:inline;zoom:1;margin:0 0 0 20px;padding:1px;list-style:none}
.x .gnb .nav ul{_position:absolute;display:block;_display:inline;zoom:1;clear:both;margin:0;padding:0;border:0;overflow:hidden}
.x .gnb.active .nav{top:-5px;padding:5px 5px 5px 0;margin:0 0 0 20px;border:1px solid #aaa;background:#fff;box-shadow:0 0 10px #999;border-radius:5px}
.x .gnb.active .nav ul{top:0;_position:relative;box-shadow:none;display:block;_display:inline;clear:both;padding:0;margin:0;border:0}
.x .gnb .nav:after{content:"";display:block;clear:both}
.x .gnb .nav li{position:relative;display:inline-block;*display:inline;zoom:1;vertical-align:top;overflow:hidden;margin:0}
.x .gnb .nav li.activeOn{z-index:10}
.x .gnb .nav li.activeOn>a{border:1px solid #ccc}
.x .gnb .nav li li{display:block;_float:left;clear:both;overflow:hidden;border:0;margin:0}
.x .gnb .nav li li:first-child{border:0}
.x .gnb .nav li a{display:block;_float:left;font-weight:bold;color:#333;font-size:12px;height:14px;padding:9px 0;white-space:nowrap;text-decoration:none;text-shadow:0 1px 0 #fff;zoom:1}
.x .gnb .nav li a span{padding:0 15px;border-left:1px solid #fff}
.x .gnb.active .nav li a span,
.x .gnb .nav li:first-child a span,
.x .gnb .nav li.activeOn+li a span{border:0;margin:0 0 0 1px}
.x .gnb .nav li a:hover,
.x .gnb .nav li a:active,
.x .gnb .nav li a:focus{background:#f4f4f4}
.x .gnb .nav li.activeOn>a{background:#fff;padding:8px 0}
.x .gnb .nav li li a{color:#555;background:#fff;padding:5px 15px !important;font-weight:normal !important;border:0 !important}
.x .gnb .nav li li a:hover,
.x .gnb .nav li li a:active,
.x .gnb .nav li li a:focus{border:0;background:#eee}
.x .gnb .mnv{width:100%;height:32px;display:none}
.x .gnb .bmk{position:absolute;right:20px;top:10px;padding:0 15px;text-align:right}
.x .gnb .bmk.active{top:-5px;padding:14px 14px 10px 15px;background-color:#fff;border:1px solid #aaa;box-shadow:0 0 10px #999;border-radius:5px}
.x .gnb .bmk .bmAnchor{height:16px;text-shadow:0 1px 0 #fff;display:inline-block;padding:0 0 0 20px;background:url(../img/iconFavorite.gif) no-repeat 0 -16px}
.x .gnb .bmk ul{display:none}
.x .gnb .bmk.active ul{position:relative;list-style:none;display:block !important;text-align:left;background:none;margin:0 !important;padding:10px 0 0 0 !important;border:0;box-shadow:none;border-radius:0}
.x .gnb .bmk li{display:block;position:relative;padding:3px 15px 3px 0 !important;white-space:nowrap}
.x .gnb .bmk li a{display:inline;padding:0;background:none !important;font-weight:normal}
.x .gnb .bmk li .action{position:absolute;top:0;right:0}
.x .gnb .bmk li .action .text{text-decoration:none;width:16px;text-align:center;margin:0}
@media only all and (max-width:860px){
.x .gnb ul{padding-left:1em}
.x .gnb .setting{right:1em}
}
@media only all and (max-width:640px){
.x .gnb ul{display:block;position:static;padding:0}
.x .gnb li{float:none;clear:both;border-top:1px solid #ccc}
.x .gnb ul ul{border:0;position:static}
.x .gnb li li{border:0}
.x .gnb li a{float:none;display:block}
.x .gnb li a:hover,
.x .gnb li a:active,
.x .gnb li a:focus{background:none}
.x .gnb li.activeOn>a{background:#ddd}
}
/* Favorite */
.x .bmk{position:absolute;right:20px;top:10px;padding:0 0 0 20px;background:url(../img/iconFavorite.gif) no-repeat 0 -16px}
.x .bmk>a{text-shadow:0 1px 0 #fff}
.x .bmk ul{position:absolute;top:24px;right:0;list-style:none;margin:0 !important;padding:5px 10px !important;border:1px solid #aaa;border-radius:5px;background:#fff;box-shadow:1px 1px 3px #aaa}
.x .bmk li{display:block;position:relative;padding:3px 20px 3px 0 !important;white-space:nowrap}
.x .bmk li a{padding:0;background:none !important;font-weight:normal}
.x .bmk li .action{position:absolute;top:0;right:0}
.x .bmk li .action .text{text-decoration:none;width:16px;text-align:center;margin:0}
@media only all and (max-width:640px){
.x .bmk{position:static;background-color:#fff;padding:10px 20px;background:#fff}
.x .bmk .tgAnchor{display:block}
.x .bmk ul{position:relative;border:0;border-top:1px solid #ccc;border-radius:0;box-shadow:none;padding:0;margin:5px 0 0 0}
.x .bmk li{position:relative;top:-1px;border-top:1px dotted #ccc}
.x .gnb{height:auto}
.x .gnb .nav,
.x .gnb .bmk{display:none}
.x .gnb .mnv{display:block}
}
/* Local Navigation */
.x .lnb{position:relative;float:left;width:210px;margin:1em 0 1em -240px;line-height:normal;zoom:1;display:inline}
@ -271,19 +251,22 @@ body.modalContainer{_height:100%;_width:100%} /* IE6 only */
.x .h2Anchor{position:absolute;right:0;border:0;background:none;color:#00f;text-decoration:underline}
/* Skip Navigation */
.x .skipNav{margin:0;text-align:center}
.x .skipNav a{position:absolute;width:1px;height:1px;display:block;font-weight:bold;overflow:hidden}
@media only all and (max-width:860px){
.x .skipNav{display:none}
}
.x .skipNav a{position:absolute;width:1px;height:1px;display:block;padding:10px 0;font-weight:bold;overflow:hidden}
.x .skipNav a:hover,
.x .skipNav a:active,
.x .skipNav a:focus{position:relative;width:auto;height:auto;padding:10px 0}
.x .skipNav a:focus{position:relative;width:auto;height:auto}
/* Header */
.x .header{position:relative;z-index:2;padding:30px 0 0 0;background:#4c4c4c;box-shadow:0 0 10px #aaa;zoom:1;border-radius:6px}
.x .header{position:relative;z-index:2;padding:30px 0 0 0;background:#4c4c4c;box-shadow:0 0 10px #aaa;zoom:1;border-radius:5px 5px 0 0}
.x .header:after{content:"";display:block;clear:both}
.x .header a{text-decoration:none}
.x .header h1{margin:0 15px 10px 20px;font-size:24px;line-height:32px;display:inline-block;*display:inline;zoom:1;vertical-align:middle}
.x .header h1{margin:0 0 10px 20px;font-size:24px;line-height:32px;display:inline-block;*display:inline;zoom:1;vertical-align:middle}
.x .header h1 *{vertical-align:middle}
.x .header h1 a{color:#fff;text-shadow:1px 1px 0 #000;filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1, Color=#000000, Positive=true);zoom:1}
.x .header h1 a{display:inline-block;color:#fff;text-shadow:1px 1px 0 #000;filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1, Color=#000000, Positive=true);zoom:1}
.x .header h1 .url{font-size:12px;font-weight:normal}
.x .header .site{margin:0;display:inline-block;*display:inline;zoom:1}
.x .header .site{margin:0 0 10px 20px;display:inline-block;*display:inline;zoom:1}
.x .header .site a{color:#fff;text-decoration:underline}
.x .header #moveSiteList{padding:10px 1em 5px 1em;margin:0}
.x .header #moveSiteList ul{list-style:none;margin:0;padding:0}
@ -590,7 +573,6 @@ body.modalContainer{_height:100%;_width:100%} /* IE6 only */
.x a.cMenu{display:inline-block;width:16px;height:0;padding:16px 0 0 0;overflow:hidden;vertical-align:middle;background:url(../../../../common/img/icon.bubble.png) no-repeat}
/* Responsive Layout */
@media only all and (max-width:860px){
.x .header h1{margin-left:.7em}
.x .header .account ul{padding-right:10px}
.x .body{padding:0}
.x .content{float:none;margin-left:0}
@ -601,10 +583,6 @@ body.modalContainer{_height:100%;_width:100%} /* IE6 only */
.x .easyNav .category{float:none;display:block;width:auto}
.x .easyNav .filter{position:static}
}
@media only all and (max-width:640px){
.x .skipNav a{position:relative;width:auto;height:auto}
.modal{position:absolute}
}
/* Legacy Code (Don't use it. It will be removed as soon as possible.) */
.x h3.xeAdmin,
.x h4.xeAdmin{position:relative;border-bottom-style:solid;border-bottom-color:#ccc;zoom:1}