/* Toggle Styles */ #wrapper { padding-left: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #sidebar-wrapper { position: fixed; left: 250px; height: 100%; margin-left: -250px; overflow-y: hidden; background-color: #2e3138; font-family: 'Segoe UI', Tahoma, Helvetica, Sans-Serif !important; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; z-index: 10001; width: 0; top: 0; } #wrapper.toggled #sidebar-wrapper { width: 250px; } /* #wrapper.toggled #content-wrapper { position: absolute; transform: translate(250px); } */ /* .sidebar-area */ .sidebar-area { position: absolute; top: 0; width: 250px; height:100%; margin: 0; padding: 0; list-style: none; color: #fff; z-index:10002; box-shadow: 1px 0 3px 1px rgba(0,0,0,1); } /* Sidebar close */ .sidebar-close { position: absolute; right: 10px; top: 10px; cursor: pointer; color: #fff; } /* Sidebar brand */ .sidebar-brand { height: 105px; overflow: hidden; display: block; margin-top: 20px; margin-bottom: 5px; padding-top:5px; color: #fff; } .sidebar-brandname { width: 95%; margin-top: 5px; display: block; color: #fff; font-size: 22px; font-weight: 800; font-family: Microsoft JhengHei,fantasy; } /* .sidebar-nav */ .sidebar-nav li { /*background-color: #fff;*/ } .sidebar-nav li { text-indent: 8px; line-height: 40px; cursor: pointer; color: #cad0d8; background-color: #1f242a; /*margin-bottom: 1px;*/ } .sidebar-nav li i { padding-right: 2px; } .sidebar-nav .side-menu li { background-color: #1f242a; margin-bottom: 1px; } .sidebar-nav li:hover, .sidebar-nav li.active { background-color: #323a44; } .sidebar-nav li a { display: block; text-decoration: none; color: #fff; } .sidebar-nav li a:hover { text-decoration: none; color: #fff; background: rgba(255,255,255,0.2); } .sidebar-nav li a:active, .sidebar-nav li a:focus { text-decoration: none; } @media screen and (max-height: 450px) { .sidenav a {font-size: 18px;} } @media(min-width:768px) { #wrapper { padding-left: 0; } #wrapper.toggled { padding-left: 250px; } #sidebar-wrapper { width: 0; } #wrapper.toggled #sidebar-wrapper { width: 250px; } #wrapper.toggled #content-wrapper { position: relative; margin-right: 0; } }