mirror of
https://github.com/Lastorder-DC/rhymix.git
synced 2026-01-07 10:41:40 +09:00
HTML, CSS, Web Accessibility...
git-svn-id: http://xe-core.googlecode.com/svn/branches/1.5.0@9676 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
ChanMyeong
parent
341bfa73ed
commit
15ddf80ad3
9 changed files with 65 additions and 61 deletions
|
|
@ -1,7 +1,5 @@
|
|||
@charset "utf-8";
|
||||
/* NHN (developers@xpressengine.com) */
|
||||
/* Element Reset */
|
||||
body{margin:0}
|
||||
header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption{display:block}
|
||||
body>.popup{margin:1em}
|
||||
.x,
|
||||
|
|
@ -21,11 +19,11 @@ body>.popup{margin:1em}
|
|||
.x .h1,
|
||||
.x .h2,
|
||||
.x .h3,
|
||||
.x .h4{position:relative;border-bottom-style:solid;border-bottom-color:#ccc;zoom:1}
|
||||
.x .h1{border-bottom-width:4px;font-size:24px}
|
||||
.x .h2{border-bottom-width:3px;font-size:20px}
|
||||
.x .h3{border-bottom-width:2px;font-size:16px}
|
||||
.x .h4{border-bottom-width:1px;font-size:12px}
|
||||
.x .h4{position:relative;border-bottom-style:solid;zoom:1}
|
||||
.x .h1{border-bottom-width:4px;font-size:24px;border-bottom-color:#666}
|
||||
.x .h2{border-bottom-width:3px;font-size:20px;border-bottom-color:#888}
|
||||
.x .h3{border-bottom-width:2px;font-size:16px;border-bottom-color:#aaa}
|
||||
.x .h4{border-bottom-width:1px;font-size:12px;border-bottom-color:#ccc}
|
||||
.x .h1 + ul,
|
||||
.x .h2 + ul,
|
||||
.x .h3 + ul,
|
||||
|
|
@ -33,14 +31,14 @@ body>.popup{margin:1em}
|
|||
.x .h1 + .table table,
|
||||
.x .h2 + .table table,
|
||||
.x .h3 + .table table,
|
||||
.x .h4 + .table table{border-top:0;margin-top:-1em}
|
||||
.x .h4 + .table table{border-top:0 !important;margin-top:-1em !important}
|
||||
/* Portlet */
|
||||
.x .portlet{position:relative;border:1px solid #e9e9e9;margin:1em 0;padding:0;background:#fff;zoom:1;overflow:hidden;border-radius:5px}
|
||||
.x .portlet h2,
|
||||
.x .portlet h3{margin:0;padding:.5em 1em;font-size:14px;border:1px solid #fff;border-bottom:1px solid #e9e9e9;background:#f7f7f7;border-radius:5px 5px 0 0}
|
||||
.x .portlet p{margin:1em 1.2em}
|
||||
.x .portlet li{position:relative;padding-right:8em}
|
||||
.x .portlet .lined{margin:1px;padding:0;list-style:none}
|
||||
.x .portlet .lined{margin:1px !important;padding:0;list-style:none}
|
||||
.x .portlet .lined li{padding:.5em 8em .5em 1em;border-top:1px solid #eee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-o-text-overflow:ellipsis}
|
||||
.x .portlet .lined li:first-child{border:0}
|
||||
.x .portlet .side{position:absolute;top:0;_top:1px;right:0;color:#666;background:#fff;padding:0 1em}
|
||||
|
|
@ -96,7 +94,12 @@ body>.popup{margin:1em}
|
|||
.x .form input.loading[type=password]{padding-right:24px;width:260px;background:transparent url(../img/preLoader16.gif) no-repeat 265px center}
|
||||
.x .form input[type=checkbox],
|
||||
.x .form input[type=radio]{margin:0;padding:0;width:13px;height:13px;vertical-align:middle}
|
||||
.x .form *[disabled=disabled]{background:#ddd !important;text-shadow:1px 1px 0 #fff}
|
||||
.x .form input[type=text][disabled=disabled],
|
||||
.x .form input[type=password][disabled=disabled],
|
||||
.x .form input[type=radio][disabled=disabled],
|
||||
.x .form input[type=checkbox][disabled=disabled],
|
||||
.x .form select[disabled=disabled],
|
||||
.x .form textarea[disabled=disabled]{background:#ddd;text-shadow:1px 1px 0 #fff}
|
||||
.x .form textarea{padding:3px 4px;vertical-align:top}
|
||||
.x .form span.desc,
|
||||
.x .form em.desc{line-height:22px;vertical-align:middle;margin:0 10px}
|
||||
|
|
@ -106,7 +109,7 @@ body>.popup{margin:1em}
|
|||
.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 ul{margin:0;padding:0 0 0 2em;list-style:none;border:1px solid #fff;border-left:0;border-right:0;zoom:1}
|
||||
.x .gnb ul{margin:0;padding:0 0 0 20px;list-style:none;border:1px solid #fff;border-left:0;border-right:0;zoom:1}
|
||||
.x .gnb ul ul{position:absolute;top:30px;left:0;border:1px solid #ccc;border-top:0;padding:1px 0 0 0;background:#fff}
|
||||
.x .gnb ul:after{content:"";display:block;clear:both}
|
||||
.x .gnb li{position:relative;float:left;border:1px solid #fff;border-top:0;border-bottom:0;margin:0 -1px 0 0}
|
||||
|
|
@ -148,7 +151,8 @@ body>.popup{margin:1em}
|
|||
.x .gnb li.activeOn>a{background:#ddd}
|
||||
}
|
||||
/* Favorite */
|
||||
.x .bmk{position:absolute;right:2em;bottom:10px;padding:0 0 0 20px;background:url(../img/iconFavorite.gif) no-repeat 0 -16px}
|
||||
.x .bmk{position:absolute;right:20px;bottom: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:140%;right:0;list-style:none;margin:0;padding:5px 10px;border:1px solid #aaa;border-radius:5px;background:#fff;box-shadow:1px 1px 3px #aaa}
|
||||
.x .bmk li{position:relative;padding:3px 30px 3px 0;white-space:nowrap}
|
||||
.x .bmk li .action{position:absolute;top:0;right:0}
|
||||
|
|
@ -160,9 +164,9 @@ body>.popup{margin:1em}
|
|||
.x .bmk li{position:relative;top:-1px;border-top:1px dotted #ccc}
|
||||
}
|
||||
/* Local Navigation */
|
||||
.x .lnb{position:relative;float:left;width:200px;margin:1em 0 1em -230px;line-height:normal;zoom:1;display:inline}
|
||||
.x .lnb{position:relative;float:left;width:210px;margin:1em 0 1em -240px;line-height:normal;zoom:1;display:inline}
|
||||
.x .lnb .h2{margin-top:0}
|
||||
.x .lnb ul{margin:0;padding:0;list-style:none}
|
||||
.x .lnb ul{margin:0 !important;padding:0;list-style:none}
|
||||
.x .lnb li{position:relative;margin:0 0 -1px 0;vertical-align:top;zoom:1}
|
||||
.x .lnb li a{display:block;position:relative;padding:8px 10px;text-decoration:none;color:#666;font-weight:bold;background:#fafafa;border:1px solid #eee;zoom:1}
|
||||
.x .lnb li a .i{position:absolute;top:50%;left:100%;margin:-4px 0 0 -16px;width:8px;height:8px;color:#ccc;background:url(../img/iconNavVr.gif) no-repeat left top}
|
||||
|
|
@ -252,16 +256,16 @@ body.modalContainer{_height:100%;_width:100%} /* IE6 only */
|
|||
/* H2 Anchor */
|
||||
.x .h2Anchor{position:absolute;right:0;border:0;background:none;color:#00f;text-decoration:underline}
|
||||
/* Skip Navigation */
|
||||
.x .skipNav{margin:0;text-align:center;overflow:hidden}
|
||||
.x .skipNav a{position:absolute;width:1px;height:1px;display:block;color:#fff;font-weight:bold;padding:10px 0;background:#333;border-top:1px solid #656565}
|
||||
.x .skipNav{margin:0;text-align:center}
|
||||
.x .skipNav a{position:absolute;width:1px;height:1px;display:block;font-weight:bold;padding:10px 0}
|
||||
.x .skipNav a:hover,
|
||||
.x .skipNav a:active,
|
||||
.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}
|
||||
.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 1.3em;font-size:24px;line-height:32px;display:inline-block;zoom:1}
|
||||
.x .header h1{margin:0 15px 10px 20px;font-size:24px;line-height:32px;display:inline-block;zoom:1}
|
||||
.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 .url{font-size:12px;font-weight:normal}
|
||||
|
|
@ -272,8 +276,8 @@ body.modalContainer{_height:100%;_width:100%} /* IE6 only */
|
|||
.x .header #moveSiteList li{white-space:nowrap;margin:0;padding:4px 0;border-bottom:1px dotted #ccc}
|
||||
.x .header #siteMapList{padding:0 1em 1em 1em;margin:0}
|
||||
.x .header #siteMapList li{white-space:nowrap}
|
||||
.x .header .account{position:absolute;z-index:3;width:100%;padding:5px 2em 5px 0;top:0;right:0;white-space:nowrap;text-align:right;background:#333;border-bottom:1px solid #656565;color:#fff;font-size:12px;box-shadow:0 0 10px #333}
|
||||
.x .header .account ul{margin:0 2px 0 0;padding:0;list-style:none}
|
||||
.x .header .account{position:absolute;z-index:3;width:100%;top:0;right:0;white-space:nowrap;text-align:right;background:#333;border-bottom:1px solid #656565;color:#fff;font-size:12px;border-radius:5px 5px 0 0}
|
||||
.x .header .account ul{margin:0 2px 0 0;padding:5px 20px 5px 0;list-style:none}
|
||||
.x .header .account li{position:relative;display:inline;border-left:1px solid #666;padding:0 6px 0 10px}
|
||||
.x .header .account li:first-child{border:0}
|
||||
.x .header .account a{color:#fff;display:inline-block;height:14px}
|
||||
|
|
@ -289,13 +293,13 @@ body.modalContainer{_height:100%;_width:100%} /* IE6 only */
|
|||
.x .header .account a:active,
|
||||
.x .header .account a:focus{color:#6e9cf2;text-decoration:underline}
|
||||
/* Footer */
|
||||
.x .footer{border-top:1px solid #ddd;text-align:center;font-size:12px;padding:1.5em 0;margin:0 2em;zoom:1}
|
||||
.x .footer{border-top:1px solid #ddd;text-align:center;font-size:12px;padding:1.5em 0;zoom:1}
|
||||
.x .footer:after{content:"";display:block;clear:both}
|
||||
.x .footer p{margin:0}
|
||||
.x .footer .power{float:left}
|
||||
.x .footer .cache{float:right}
|
||||
/* Body */
|
||||
.x .body{position:relative;z-index:1;padding:1em 2em 1em 260px;zoom:1}
|
||||
.x .body{position:relative;z-index:1;padding:1em 20px 1em 260px;zoom:1}
|
||||
.x .body:after{content:"";display:block;clear:both}
|
||||
/* Content */
|
||||
.x .content{float:right;width:100%;margin-left:-230px;zoom:1}
|
||||
|
|
@ -317,7 +321,7 @@ body.modalContainer{_height:100%;_width:100%} /* IE6 only */
|
|||
.x .dashboard .portlet{float:left !important;width:32% !important;margin-right:1em !important}
|
||||
}
|
||||
/* Single Column*/
|
||||
.x .single{position:relative;float:none;width:auto;margin-left:-230px}
|
||||
.x .single{position:relative;float:none;width:auto;margin-left:-240px}
|
||||
/* Search */
|
||||
.x .search{zoom:1}
|
||||
.x .search:after{content:"";display:block;clear:both}
|
||||
|
|
@ -566,9 +570,10 @@ body.modalContainer{_height:100%;_width:100%} /* IE6 only */
|
|||
.x a.iSetting{display:inline-block;width:16px;height:0;padding:16px 0 0 0;overflow:hidden;vertical-align:middle;background:url(../img/iconSetting.gif) no-repeat}
|
||||
.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{padding-right:1em}
|
||||
.x .body{padding:1em}
|
||||
@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}
|
||||
.x .lnb{float:none;width:auto;margin:1em 0}
|
||||
.x .dashboard .portlet{float:none !important;width:auto !important;margin-right:0}
|
||||
|
|
@ -577,7 +582,8 @@ 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}
|
||||
@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.) */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue