mirror of
https://github.com/Lastorder-DC/rhymix.git
synced 2026-01-06 18:21:39 +09:00
Refine admin layout design
Improvement on #1056 by @misol - 헤더에 불필요하게 크게 나오는 "Admin" 기본 문구를 톱니바퀴 아이콘으로 대체 - 모바일에서는 톱니바퀴 대신 햄버거 메뉴 아이콘을 표시하여 메뉴 토글 기능 부여 - 현재 선택된 메뉴를 좀더 분명히 구분할 수 있도록 색상 부여 - 색상 대비 개선 및 색상 일관성 개선
This commit is contained in:
Kijin Sung
parent
4ca3bdccc6
commit
e804a43b4e
3 changed files with 79 additions and 64 deletions
|
|
@ -747,7 +747,7 @@ margin-bottom: 10px;
|
|||
padding: 10px 15px;
|
||||
zoom: 1;
|
||||
box-shadow: 0 2px 3px rgba(0,0,0,0.19), 0 1px 1px rgba(0,0,0,0.23);
|
||||
background-color: #455A64;
|
||||
background-color: #263238;
|
||||
}
|
||||
.x>.header:after {
|
||||
content: "";
|
||||
|
|
@ -761,7 +761,6 @@ margin-bottom: 10px;
|
|||
left: 1px;
|
||||
right: 1px;
|
||||
height: 1px;
|
||||
box-shadow: 0 2px 3px #e0e0e0;
|
||||
}
|
||||
.x>.body {
|
||||
position: relative;
|
||||
|
|
@ -780,7 +779,7 @@ margin-bottom: 10px;
|
|||
.x>.body>.content {
|
||||
box-sizing:border-box;
|
||||
width: 100%;
|
||||
padding: 1px 5px 0 5px;
|
||||
padding: 5px 5px 0 5px;
|
||||
float: right;
|
||||
margin: 0 0 0 -100%;
|
||||
outline: none;
|
||||
|
|
@ -838,27 +837,44 @@ margin-bottom: 10px;
|
|||
/* Header */
|
||||
.x>.header>h1 {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
zoom: 1;
|
||||
margin: 0 15px 0 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.x>.header>h1>a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
line-height: 40px;
|
||||
font-size: 22px;
|
||||
line-height: 33px;
|
||||
margin-top: -11px;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
.x>.header>h1>a>img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
@media all and (max-width: 799px) {
|
||||
.x>.header>h1>a {
|
||||
display: none;
|
||||
}
|
||||
.x>.header>h1>a.mobile_menu_open {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 800px) {
|
||||
.x>.header>h1>a {
|
||||
display: block;
|
||||
}
|
||||
.x>.header>h1>a.mobile_menu_open {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.x>.header>.site {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
zoom: 1;
|
||||
margin: 14px 0 0 0;
|
||||
margin: 1px 0 0 0;
|
||||
font-size: 11px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.x>.header>.site>a {
|
||||
text-decoration: none;
|
||||
|
|
@ -869,10 +885,17 @@ margin-bottom: 10px;
|
|||
.x>.header>.site>a:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@media all and (max-width: 799px) {
|
||||
.x>.header>.site {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.x>.header>.account {
|
||||
float: right;
|
||||
position: relative;
|
||||
margin: 13px 0 0 0;
|
||||
margin: 1px 0 0 0;
|
||||
font-size: 12px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.x>.header>.account>ul {
|
||||
list-style: none;
|
||||
|
|
@ -974,18 +997,18 @@ margin-bottom: 10px;
|
|||
font-size: 0;
|
||||
top: 50%;
|
||||
right: -14px;
|
||||
background: #eee;
|
||||
background: #ECEFF1;
|
||||
width: 12px;
|
||||
height: 50px;
|
||||
margin: -25px 0 0 0;
|
||||
border: 1px solid #e0e0e0;
|
||||
border: 1px solid #CFD8DC;
|
||||
border-left: 0;
|
||||
overflow: hidden;
|
||||
text-indent: 20px;
|
||||
}
|
||||
.x>.body.wide>.gnb>a[href="#gnbNav"]>b {
|
||||
border-color: transparent;
|
||||
border-left-color: #666;
|
||||
border-left-color: #78909C;
|
||||
margin: -4px 0 0 -2px;
|
||||
}
|
||||
.x>.body>.gnb>a[href="#gnbNav"]>b {
|
||||
|
|
@ -997,7 +1020,7 @@ margin-bottom: 10px;
|
|||
margin: -4px 0 0 -6px;
|
||||
border: 4px solid;
|
||||
border-color: transparent;
|
||||
border-right-color: #666;
|
||||
border-right-color: #78909C;
|
||||
}
|
||||
.x>.body>.gnb>a>i {
|
||||
display: none;
|
||||
|
|
@ -1035,7 +1058,6 @@ margin-bottom: 10px;
|
|||
display: none;
|
||||
}
|
||||
@media all and (max-width: 800px) {
|
||||
|
||||
.x>.body>.gnb>ul {
|
||||
border: 0;
|
||||
}
|
||||
|
|
@ -1048,21 +1070,6 @@ margin-bottom: 10px;
|
|||
.x>.body>.gnb>ul>li:first-child {
|
||||
display: block !important;
|
||||
}
|
||||
.x>.body>.gnb>a[href="#gnbNav"],
|
||||
.x>.body.wide>.gnb>a[href="#gnbNav"] {
|
||||
top: 0;
|
||||
right: 0;
|
||||
line-height: 40px;
|
||||
width: 40px;
|
||||
height: auto;
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
.x>.body>.gnb>a[href="#gnbNav"]>b {
|
||||
display: none;
|
||||
}
|
||||
.x>.body>.gnb>a>i {
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
@ -1070,12 +1077,14 @@ margin-bottom: 10px;
|
|||
left: 50%;
|
||||
margin: -7px 0 0 -7px;
|
||||
}
|
||||
|
||||
.x>.body>.gnb>a[href="#gnbNav"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
/* li */
|
||||
.x>.body>.gnb>ul>li {
|
||||
background: #546E7A;
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
border-bottom: 1px solid #CFD8DC;
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -1083,7 +1092,7 @@ margin-bottom: 10px;
|
|||
border-bottom: none;
|
||||
}
|
||||
.x>.body>.gnb>ul>li.active {
|
||||
background: #78909C;
|
||||
background: #CFD8DC;
|
||||
}
|
||||
.x>.body>.gnb>ul>li.open,
|
||||
.x>.body>.gnb>ul>li.active {
|
||||
|
|
@ -1093,18 +1102,23 @@ margin-bottom: 10px;
|
|||
/* li>a */
|
||||
.x>.body>.gnb>ul>li>a {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
padding: 10px 10px 10px 8px;
|
||||
background: #ECEFF1;
|
||||
}
|
||||
.x>.body>.gnb>ul>li>a>i {
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin: -4px 4px 0 0;
|
||||
margin: -4px 6px 0 0;
|
||||
vertical-align: middle;
|
||||
opacity: .75;
|
||||
filter: alpha(opacity=75);
|
||||
}
|
||||
@media all and (min-width: 800px) {
|
||||
.x>.body.wide>.gnb>ul>li>a>i {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
.x>.body>.gnb>ul>li>a>b {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
|
|
@ -1192,8 +1206,8 @@ margin-bottom: 10px;
|
|||
}
|
||||
.x>.body>.gnb>ul>li.active>a {
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
background: #78909C;
|
||||
color: #E65100;
|
||||
background: #FFF8E1;
|
||||
}
|
||||
@media all and (max-width: 800px) {
|
||||
.x>.body>.gnb>ul>li:first-child>a {
|
||||
|
|
@ -1209,11 +1223,16 @@ margin-bottom: 10px;
|
|||
height: 1px;
|
||||
overflow: hidden;
|
||||
line-height: 13px;
|
||||
}
|
||||
@media all and (min-width: 800px) {
|
||||
.x>.body.wide>.gnb>ul>li>a>.tx {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
/* li>ul */
|
||||
.x>.body>.gnb>ul>li>ul {
|
||||
display: none;
|
||||
margin: 0 1px 1px;
|
||||
margin: 0 1px 0;
|
||||
}
|
||||
.x>.body>.gnb>ul>li.active>ul {
|
||||
display: block!important;
|
||||
|
|
@ -1230,33 +1249,31 @@ margin-bottom: 10px;
|
|||
border: 0;
|
||||
}
|
||||
.x>.body>.gnb>ul>li>ul>li.active_ {
|
||||
box-shadow: 0 0 3px #9E9E9E;
|
||||
z-index: 99;
|
||||
border: 1px solid #666;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
/* li>ul>li>a */
|
||||
.x>.body>.gnb>ul>li>ul>li>a {
|
||||
padding: 7px 7px 7px 20px;
|
||||
padding: 7px 7px 7px 27px;
|
||||
background: #fff;
|
||||
}
|
||||
.x>.body>.gnb>ul>li>ul#favorite>li>a {
|
||||
padding: 7px 25px 7px 20px;
|
||||
padding: 7px 25px 7px 27px;
|
||||
}
|
||||
.x>.body>.gnb>ul>li>ul>li>a:hover,
|
||||
.x>.body>.gnb>ul>li>ul>li>a:active,
|
||||
.x>.body>.gnb>ul>li>ul>li.active_>a {
|
||||
font-weight: bold;
|
||||
color: #546E7A;
|
||||
color: #E65100;
|
||||
background: #FFF8E1;
|
||||
}
|
||||
/* li>ul>li>.action */
|
||||
.x>.body>.gnb>ul>li>ul>li>.remove {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 5px;
|
||||
top: 7px;
|
||||
right: 3px;
|
||||
}
|
||||
.x>.body>.gnb>ul>li>ul>li>.remove>.x_close {
|
||||
font-size: 12px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue