orga0063
/
BootstrapAdmin11
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

!26 LTE UI优化 (包含移动端UI) 

* LTE UI优化 (包含移动端UI)
* Revert "LTE UI优化 (包含移动端UI)"
* LTE UI优化 (包含移动端UI)
This commit is contained in:
finally44177 2019-08-21 17:11:05 +08:00 committed by Argo
parent 54efb34812
commit 6200370c1d
2 changed files with 90 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Bootstrap.Admin/Views/Shared/Navigator.cshtml
View File

@ -10,7 +10,7 @@
<div class="nav-header flex-fill align-items-center"> <div class="nav-header flex-fill align-items-center">
<a href="~/Admin/Profiles"> <a href="~/Admin/Profiles">
<img src="@Url.Content(Model.Icon)" /> <img src="@Url.Content(Model.Icon)" />
<span class="username d-inline-block text-truncate font-weight-bold flex-fill">@Model.DisplayName</span> <span class="username d-inline-block text-truncate flex-fill">@Model.DisplayName</span>
</a> </a>
</div> </div>
<!-- sidebar menu start--> <!-- sidebar menu start-->

110
Bootstrap.Admin/wwwroot/css/lte.css
View File

@ -30,6 +30,9 @@
.header .sidebar-toggle-box span, aside .nav-brand a { .header .sidebar-toggle-box span, aside .nav-brand a {
transition: all .3s ease-in-out; transition: all .3s ease-in-out;
} }
.sidebar-open .sidebar-toggle-box .fa-bars {
transform: none;
}
.header .badge { .header .badge {
top: 4px; top: 4px;
@ -41,7 +44,6 @@
.username { .username {
font-size: 1rem; font-size: 1rem;
font-weight: 500;
vertical-align: middle; vertical-align: middle;
max-width: 120px; max-width: 120px;
} }
@ -52,8 +54,9 @@
.userinfo img { .userinfo img {
border-radius: 4px; border-radius: 4px;
width: 40px; width: 2rem;
height: 40px; height: 2rem;
margin: 0.25rem 0;
} }
.userinfo .username { .userinfo .username {
@ -111,17 +114,18 @@
background: none; background: none;
} }
.userinfo.show .dropdown-menu { .userinfo.show .dropdown-menu {
margin-top: 4px; margin-top: 4px;
left: auto !important; left: auto !important;
} cursor: default;
}
aside, .main-content { aside, .main-content {
top: 55px; top: 55px;
} }
aside { aside {
background-color: #1a2226; background-color: #222d32;
} }
aside .nav-brand, .sidebar-open aside:hover .nav-brand { aside .nav-brand, .sidebar-open aside:hover .nav-brand {
@ -129,23 +133,36 @@ aside {
align-items: center; align-items: center;
padding: 0 0.625rem; padding: 0 0.625rem;
} }
aside .nav-brand a {
display: flex;
justify-content: center;
align-items: center;
}
aside .nav-brand span, .header .sidebar-toggle-box { aside .nav-brand span, .header .sidebar-toggle-box {
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 700;
white-space: nowrap; white-space: nowrap;
} }
aside .nav-brand img, .sidebar-open aside:hover .nav-brand img { .header .sidebar-toggle-box .fa {
opacity: 0; font-size: 1rem;
visibility: hidden; }
width: 2.75rem; aside .nav-brand img, aside:hover .nav-brand img {
width: 2.125rem;
height: auto; height: auto;
border-radius: 0.42rem; border-radius: 0.42rem;
position: absolute; margin-right: 0.25rem;
top: 6px;
left: 4px;
} }
.sidebar-open aside .nav-brand img, .sidebar-open aside:hover .nav-brand img {
opacity: 0;
visibility: hidden;
width: 2.125rem;
height: auto;
border-radius: 0.42rem;
position: absolute;
top: 11px;
left: 9px;
}
aside .nav-link span { aside .nav-link span {
display: inline-block; display: inline-block;
@ -174,17 +191,30 @@ aside {
border-top: none; border-top: none;
} }
.card-header {
font-size: 1rem;
background: none;
border-bottom: 1px solid #f4f4f4;
padding: 0.625rem 1rem;
}
/* color */ /* color */
.main-content { .main-content {
background: #ecf0f5; background: #ecf0f5;
} }
.header, aside .nav-brand, .userinfo .dropdown-menu, .userinfo .dropdown-item { .bg{
background:none;
}
.header, .userinfo .dropdown-menu, .userinfo .dropdown-item {
background: #3c8dbc; background: #3c8dbc;
} }
.header .nav .dropdown:hover, .userinfo:hover {
background-color: rgba(0,0,0,0.1);
}
.header .nav .dropdown:hover, .userinfo:hover { aside .nav-brand {
background-color: rgba(0,0,0,0.1); background: #367fa9;
} }
.sidebar .nav-link { .sidebar .nav-link {
@ -218,9 +248,12 @@ aside {
} }
.header, aside .nav-brand { .header, aside .nav-brand {
border-bottom: 1px solid #3c8dbc; border-bottom: 1px solid #367fa9;
} }
.breadcrumb > li > a {
color: #444;
}
.card { .card {
border-top-color: #3c8dbc; border-top-color: #3c8dbc;
color: #444; color: #444;
@ -229,7 +262,42 @@ aside {
.card:hover { .card:hover {
border-top-color: #2c6ca2; border-top-color: #2c6ca2;
} }
.card-header {
border-bottom: 1px solid #f4f4f4;
}
.modal-footer {
border-top: 1px solid #f4f4f4;
}
footer {
background: #2c3b41;
}
@media (max-width:767px){
body, .form-control, .dropdown-menu, .btn:not(.btn-lg):not(.btn-xs), .input-group-text, .popover-header {
font-size: 0.75rem;
}
.bg {
background-color: #367fa9;
}
.card-header {
font-size: 0.875rem;
padding: 0.375rem 1rem;
}
.form-inline .form-group{
margin-bottom:0.75rem;
}
.form-inline .form-group .control-label {
margin-bottom: 0.125rem;
}
.modal-body, .card-body {
padding: 0.5rem 0.75rem 0 0.75rem;
}
.modal-footer {
padding: 0.5rem;
}
.username {
font-size: 0.875rem;
}
}
@media (min-width: 667px) { @media (min-width: 667px) {
.header .nav { .header .nav {
display: flex; display: flex;