@@ -2,160 +2,35 @@ | |||
@import url('https://fonts.googleapis.com/css?family=Roboto'); | |||
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono'); | |||
@import "sidebar.css"; | |||
*, *:before, *:after { | |||
margin: 0; | |||
padding: 0; | |||
box-sizing: border-box; | |||
} | |||
html, body { | |||
height: 100vh; | |||
} | |||
body { | |||
font: 600 14px 'Roboto', sans-serif; | |||
color: #000000; | |||
background: #000000; | |||
overflow-x: hidden; | |||
font: 12px 'Roboto', sans-serif; | |||
color: #eeeeee; | |||
background: #020202; | |||
} | |||
.container { | |||
display: flex; | |||
min-height: 100%; | |||
} | |||
.sidebar { | |||
position: absolute; | |||
width: 220px; | |||
} | |||
.content { | |||
flex: 1; | |||
padding: 30px; | |||
background: #444444; | |||
box-shadow: 0 0 5px rgba(0,0,0,1); | |||
transform: translate3d(0,0,0); | |||
transition: transform .3s; | |||
color: #cccccc; | |||
} | |||
.content.isOpen { | |||
transform: translate3d(220px,0,0); | |||
} | |||
.button { | |||
position: relative; | |||
width: 120px; | |||
height: 40px; | |||
cursor: pointer; | |||
margin: 10px 0 40px 0; | |||
padding: 15px; | |||
transition-property: opacity, filter; | |||
transition-duration: .15s; | |||
text-transform: none; | |||
} | |||
.button-inner { | |||
left: 0; | |||
top: 50%; | |||
display: inline-block; | |||
margin-top: -2px; | |||
} | |||
.button-inner, | |||
.button-inner::after, | |||
.button-inner::before { | |||
background-color: #fff; | |||
position: absolute; | |||
width: 40px; | |||
height: 4px; | |||
transition: transform 0.15s ease; | |||
border-radius: 4px; | |||
} | |||
.button-inner::before, | |||
.button-inner::after { | |||
content: ""; | |||
display: block; | |||
} | |||
.button-inner::before { | |||
top: -10px; | |||
} | |||
.button-inner::after { | |||
bottom: -10px; | |||
} | |||
.button.isOpen .button-inner::before { | |||
transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); | |||
} | |||
.button.isOpen .button-inner::after { | |||
transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); | |||
} | |||
.button-label { | |||
position: absolute; | |||
top: 6px; | |||
left: 50px; | |||
font-size: 24px; | |||
color: #fff; | |||
} | |||
.sidebar-title { | |||
color: #2a9fd6; | |||
cursor: pointer; | |||
font-size: 16px; | |||
line-height: 50px; | |||
text-align: center; | |||
text-transform: uppercase; | |||
letter-spacing: 7px; | |||
border-bottom: 1px solid #222; | |||
background: #2a2a2a; | |||
} | |||
.nav li { | |||
cursor: pointer; | |||
} | |||
.nav li a { | |||
outline: 0; | |||
position: relative; | |||
display: block; | |||
padding: 20px 0 20px 50px; | |||
font-size: 14px; | |||
color: #eee; | |||
background: #333333; | |||
border-bottom: 1px solid #222; | |||
text-decoration: none; | |||
} | |||
.nav li a:before { | |||
font: 14px fontawesome; | |||
position: absolute; | |||
top: 19px; | |||
left: 20px; | |||
display: grid; | |||
grid-template-columns: 240px 100%; | |||
grid-template-rows: 60px 100%; | |||
width: 100vw; | |||
height: 100vh; | |||
} | |||
.nav li:nth-child(1) a:before { content: '\f00a'; } | |||
.nav li:nth-child(2) a:before { content: '\f002'; } | |||
.nav li:nth-child(3) a:before { content: '\f084'; } | |||
.nav li:nth-child(4) a:before { content: '\f0e0'; } | |||
.nav li:nth-child(5) a:before { content: '\f0c0'; } | |||
.nav li:nth-child(6) a:before { content: '\f233'; } | |||
.nav li:nth-child(7) a:before { content: '\f023'; left: 23px; } | |||
.nav li a:hover { | |||
background: #444; | |||
.view { | |||
grid-row-start: 2; | |||
grid-column-start: 2; | |||
background: #121212; | |||
padding: 20px; | |||
} | |||
::-moz-focus-inner {border: 0;} | |||
.nav li a.active { | |||
box-shadow: inset 5px 0 0 #2A9FD6, inset 6px 0 0 #222; | |||
background: #444; | |||
} | |||
.inner { | |||
display: flex; | |||
@@ -0,0 +1,58 @@ | |||
.sidebar-title { | |||
grid-row-start: 1; | |||
grid-row-end: 1; | |||
place-self: center; | |||
color: #2a9fd6; | |||
cursor: pointer; | |||
font-size: 20px; | |||
text-transform: uppercase; | |||
letter-spacing: 6px; | |||
} | |||
.sidebar { | |||
grid-row-start: 2; | |||
grid-row-end: 2; | |||
} | |||
.nav li { | |||
cursor: pointer; | |||
display: flex; | |||
align-items: center; | |||
} | |||
.nav li a { | |||
flex: 1; | |||
outline: none; | |||
padding: 20px 0 20px; | |||
margin-left: 20px; | |||
font-size: 14px; | |||
color: #666; | |||
text-decoration: none; | |||
} | |||
.nav li span { | |||
background: #0d0d0d; | |||
width: 35px; | |||
height: 35px; | |||
border-radius: 50%; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
margin-left: 20px; | |||
} | |||
.nav-icon { | |||
font: 14px fontawesome; | |||
color: #fff; | |||
} | |||
.nav li a:hover { | |||
color: #fff; | |||
} | |||
.nav li a.active { | |||
color: #fff; | |||
} | |||
::-moz-focus-inner {border: 0;} |
@@ -5,29 +5,47 @@ | |||
<base href="/panel"/> | |||
<title>Panel</title> | |||
<link rel="stylesheet" href="/css/panel.min.css"/> | |||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" | |||
integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> | |||
<script src="/js/panel.bundle.js"></script> | |||
</head> | |||
<body ng-app="shimapan-panel"> | |||
<div class="container"> | |||
<div class="sidebar" ng-controller="NavController"> | |||
<div class="sidebar-title" ng-click="$state.go('home')"><span>Shimapan</span></div> | |||
<ul class="nav"> | |||
<li><a draggable="false" ui-sref="dashboard" ng-class="{active: $state.$current.name=='dashboard'}">Dashboard</a></li> | |||
<li><a draggable="false" ui-sref="search" ng-class="{active: $state.$current.name=='search'}">Search</a></li> | |||
<li><a draggable="false" ui-sref="keys" ng-class="{active: $state.$current.name=='keys'}">Keys</a></li> | |||
<li><a draggable="false" ui-sref="invites" ng-class="{active: $state.$current.name=='invites'}">Invites</a></li> | |||
<li ng-hide="!hasPermission('user.get')"><a draggable="false" ui-sref="users" ng-class="{active: $state.$current.name=='users'}">Users</a></li> | |||
<li><a draggable="false" ui-sref="stats" ng-class="{active: $state.$current.name=='stats'}">Statistics</a></li> | |||
<li><a draggable="false" ng-click="logout()">Logout</a></li> | |||
</ul> | |||
</div> | |||
<div class="content" ng-class="{isOpen: open}"> | |||
<div class="button" ng-class="{isOpen: open}" ng-init="open = false" ng-click="open = !open"> | |||
<div class="button-inner"></div> | |||
<span class="button-label">Menu</span> | |||
</div> | |||
<div class="view" ui-view></div> | |||
</div> | |||
<div class="container"> | |||
<div class="sidebar-title" ng-click="$state.go('home')"><span>Shimapan</span></div> | |||
<div class="sidebar" ng-controller="NavController"> | |||
<ul class="nav"> | |||
<li> | |||
<span class="nav-icon"><i class="fa fa-tachometer-alt"></i></span> | |||
<a draggable="false" ui-sref="dashboard" ng-class="{active: $state.$current.name=='dashboard'}">Dashboard</a> | |||
</li> | |||
<li> | |||
<span class="nav-icon"><i class="fa fa-search"></i></span> | |||
<a draggable="false" ui-sref="search" ng-class="{active: $state.$current.name=='search'}">Search</a> | |||
</li> | |||
<li> | |||
<span class="nav-icon"><i class="fa fa-key"></i></span> | |||
<a draggable="false" ui-sref="keys" ng-class="{active: $state.$current.name=='keys'}">Keys</a> | |||
</li> | |||
<li> | |||
<span class="nav-icon"><i class="fa fa-envelope"></i></span> | |||
<a draggable="false" ui-sref="invites" ng-class="{active: $state.$current.name=='invites'}">Invites</a> | |||
</li> | |||
<li ng-hide="!hasPermission('user.get')"> | |||
<span class="nav-icon"><i class="fa fa-users"></i></span> | |||
<a draggable="false" ui-sref="users" ng-class="{active: $state.$current.name=='users'}">Users</a> | |||
</li> | |||
<li> | |||
<span class="nav-icon"><i class="fa fa-signal"></i></span> | |||
<a draggable="false" ui-sref="stats" ng-class="{active: $state.$current.name=='stats'}">Statistics</a> | |||
</li> | |||
<li> | |||
<span class="nav-icon"><i class="fa fa-sign-out-alt"></i></span> | |||
<a draggable="false" ng-click="logout()">Logout</a> | |||
</li> | |||
</ul> | |||
</div> | |||
<div class="view" ui-view> | |||
</div> | |||
</div> | |||
</body> | |||
</html> |