위젯 상자 스타일 컬러 베리에이션 추가/분류변경/디버깅

git-svn-id: http://xe-core.googlecode.com/svn/sandbox@5930 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
ChanMyeong 2009-03-23 07:34:50 +00:00
parent 03c0ef4db4
commit b84bf44947
27 changed files with 472 additions and 336 deletions

View file

@ -3,14 +3,12 @@
.widgetBoxContainer{ position:relative;}
.widgetBox{ position:relative; *zoom:1}
.widgetBox{ position:relative;}
.widgetBox .widgetBoxHeader{ font-size:16px; font-family:Tahoma; margin:0; z-index:10;}
.widgetBox .widgetContainer{ position:relative; z-index:10;}
.widgetBox .widgetMore{ position:absolute; display:block; text-decoration:none; font-size:11px !important; white-space:nowrap; font-family:Tahoma; color:#000; text-align:center; z-index:20;}
.widgetBox .widgetMore img{ border:0;}
.widgetBox .rcContainer{ display:block; width:100%; font-size:0; line-height:0; z-index:1; *zoom:1;}
.widgetBox .rcTop{ position:absolute;}
.widgetBox .rcBottom{ position:relative;}
.widgetBox .rc{ position:absolute; display:block; font-size:0; line-height:0; overflow:hidden;}
.widgetBox .rcTop .tl{ top:0;}
.widgetBox .rcTop .tr{ top:0;}
@ -18,13 +16,13 @@
.widgetBox .rcBottom .br{ top:0;}
.widgetBoxDred{ padding:8px 0;}
.widgetBoxDred .widgetBox{ background:#fff; border-left:5px solid #ffcccc; border-right:5px solid #ffcccc;}
.widgetBoxDred .widgetBox{ background:#fff; border-left:5px solid #ffcccc; border-right:5px solid #ffcccc; *zoom:1}
.widgetBoxDred .widgetBoxHeader{ position:relative; padding:3px 0; text-indent:15px; color:#ff3333;}
.widgetBoxDred .widgetMore{ top:5px; right:15px; width:35px; background:url(../img/moreBgDred.gif) no-repeat; color:#fff !important;}
.widgetBoxDred .rcTop,
.widgetBoxDred .rcBottom{ height:8px;}
.widgetBoxDred .rcTop{ top:-8px;}
.widgetBoxDred .rcBottom{ bottom:-8px;}
.widgetBoxDred .rcTop{ position:absolute; top:-8px;}
.widgetBoxDred .rcBottom{ position:relative; bottom:-8px;}
.widgetBoxDred .rc { width:100%; height:8px; background-image:url(../img/roundedCornerDred.png); _background-image:url(../img/roundedCornerDred.gif); background-repeat:no-repeat;}
.widgetBoxDred .rcTop .tl{ background-position:0 0; left:-5px;}
.widgetBoxDred .rcTop .tr{ background-position:right 0; left:5px;}
@ -32,13 +30,13 @@
.widgetBoxDred .rcBottom .br{ background-position:right bottom; left:5px;}
.widgetBoxDgreen{ padding:8px 0;}
.widgetBoxDgreen .widgetBox{ background:#fff; border-left:5px solid #d9efb9; border-right:5px solid #d9efb9;}
.widgetBoxDgreen .widgetBox{ background:#fff; border-left:5px solid #d9efb9; border-right:5px solid #d9efb9; *zoom:1}
.widgetBoxDgreen .widgetBoxHeader{ position:relative; padding:3px 0; text-indent:15px; color:#90d133;}
.widgetBoxDgreen .widgetMore{ top:5px; right:15px; width:35px; background:url(../img/moreBgDgreen.gif) no-repeat; color:#fff !important;}
.widgetBoxDgreen .rcTop,
.widgetBoxDgreen .rcBottom{ height:8px;}
.widgetBoxDgreen .rcTop{ top:-8px;}
.widgetBoxDgreen .rcBottom{ bottom:-8px;}
.widgetBoxDgreen .rcTop{ position:absolute; top:-8px;}
.widgetBoxDgreen .rcBottom{ position:relative; bottom:-8px;}
.widgetBoxDgreen .rc { width:100%; height:8px; background-image:url(../img/roundedCornerDgreen.png); _background-image:url(../img/roundedCornerDgreen.gif); background-repeat:no-repeat;}
.widgetBoxDgreen .rcTop .tl{ background-position:0 0; left:-5px;}
.widgetBoxDgreen .rcTop .tr{ background-position:right 0; left:5px;}
@ -46,13 +44,13 @@
.widgetBoxDgreen .rcBottom .br{ background-position:right bottom; left:5px;}
.widgetBoxDblue{ padding:8px 0;}
.widgetBoxDblue .widgetBox{ background:#fff; border-left:5px solid #d8e6e7; border-right:5px solid #d8e6e7;}
.widgetBoxDblue .widgetBox{ background:#fff; border-left:5px solid #d8e6e7; border-right:5px solid #d8e6e7; *zoom:1}
.widgetBoxDblue .widgetBoxHeader{ position:relative; padding:3px 0; text-indent:15px; color:#55ccdd;}
.widgetBoxDblue .widgetMore{ top:5px; right:15px; width:35px; background:url(../img/moreBgDblue.gif) no-repeat; color:#fff !important;}
.widgetBoxDblue .rcTop,
.widgetBoxDblue .rcBottom{ height:8px;}
.widgetBoxDblue .rcTop{ top:-8px;}
.widgetBoxDblue .rcBottom{ bottom:-8px;}
.widgetBoxDblue .rcTop{ position:absolute; top:-8px;}
.widgetBoxDblue .rcBottom{ position:relative; bottom:-8px;}
.widgetBoxDblue .rc { width:100%; height:8px; background-image:url(../img/roundedCornerDblue.png); _background-image:url(../img/roundedCornerDblue.gif); background-repeat:no-repeat;}
.widgetBoxDblue .rcTop .tl{ background-position:0 0; left:-5px;}
.widgetBoxDblue .rcTop .tr{ background-position:right 0; left:5px;}
@ -60,15 +58,15 @@
.widgetBoxDblue .rcBottom .br{ background-position:right bottom; left:5px;}
.widgetBoxEred{ padding:3px 0;}
.widgetBoxEred .widgetBox{ background:#ff3333;}
.widgetBoxEred .widgetBox{ background:#ff3333; *zoom:1}
.widgetBoxEred .widgetBoxHeader{ position:relative; padding:5px 0; text-indent:15px; color:#fff;}
.widgetBoxEred .widgetContainer,
.widgetBoxEred .widgetContainer a{ color:#fff;}
.widgetBoxEred .widgetMore{ top:10px; right:15px; width:35px; background:url(../img/moreBgEred.gif) no-repeat; color:#ff3333;}
.widgetBoxEred .rcTop,
.widgetBoxEred .rcBottom{ height:3px;}
.widgetBoxEred .rcTop{ top:-3px;}
.widgetBoxEred .rcBottom{ bottom:-3px;}
.widgetBoxEred .rcTop{ position:absolute; top:-3px;}
.widgetBoxEred .rcBottom{ position:relative; bottom:-3px;}
.widgetBoxEred .rc { width:50%; height:3px; background-image:url(../img/roundedCornerEred.gif); background-repeat:no-repeat;}
.widgetBoxEred .rcTop .tl{ background-position:0 0;}
.widgetBoxEred .rcTop .tr{ background-position:right 0; left:50%;}
@ -76,15 +74,15 @@
.widgetBoxEred .rcBottom .br{ background-position:right bottom; left:50%;}
.widgetBoxEgreen{ padding:3px 0;}
.widgetBoxEgreen .widgetBox{ background:#90d133;}
.widgetBoxEgreen .widgetBox{ background:#90d133; *zoom:1}
.widgetBoxEgreen .widgetBoxHeader{ position:relative; padding:5px 0; text-indent:15px; color:#fff;}
.widgetBoxEgreen .widgetContainer,
.widgetBoxEgreen .widgetContainer a{ color:#fff;}
.widgetBoxEgreen .widgetMore{ top:10px; right:15px; width:35px; background:url(../img/moreBgEgreen.gif) no-repeat; color:#90d133;}
.widgetBoxEgreen .rcTop,
.widgetBoxEgreen .rcBottom{ height:3px;}
.widgetBoxEgreen .rcTop{ top:-3px;}
.widgetBoxEgreen .rcBottom{ bottom:-3px;}
.widgetBoxEgreen .rcTop{ position:absolute; top:-3px;}
.widgetBoxEgreen .rcBottom{ position:relative; bottom:-3px;}
.widgetBoxEgreen .rc { width:50%; height:3px; background-image:url(../img/roundedCornerEgreen.gif); background-repeat:no-repeat;}
.widgetBoxEgreen .rcTop .tl{ background-position:0 0;}
.widgetBoxEgreen .rcTop .tr{ background-position:right 0; left:50%;}
@ -92,15 +90,15 @@
.widgetBoxEgreen .rcBottom .br{ background-position:right bottom; left:50%;}
.widgetBoxEblue{ padding:3px 0;}
.widgetBoxEblue .widgetBox{ background:#55ccdd;}
.widgetBoxEblue .widgetBox{ background:#55ccdd; *zoom:1}
.widgetBoxEblue .widgetBoxHeader{ position:relative; padding:5px 0; text-indent:15px; color:#fff;}
.widgetBoxEblue .widgetContainer,
.widgetBoxEblue .widgetContainer a{ color:#fff;}
.widgetBoxEblue .widgetMore{ top:10px; right:15px; width:35px; background:url(../img/moreBgEblue.gif) no-repeat; color:#55ccdd;}
.widgetBoxEblue .rcTop,
.widgetBoxEblue .rcBottom{ height:3px;}
.widgetBoxEblue .rcTop{ top:-3px;}
.widgetBoxEblue .rcBottom{ bottom:-3px;}
.widgetBoxEblue .rcTop{ position:absolute; top:-3px;}
.widgetBoxEblue .rcBottom{ position:relative; bottom:-3px;}
.widgetBoxEblue .rc { width:50%; height:3px; background-image:url(../img/roundedCornerEblue.gif); background-repeat:no-repeat;}
.widgetBoxEblue .rcTop .tl{ background-position:0 0;}
.widgetBoxEblue .rcTop .tr{ background-position:right 0; left:50%;}