light skin for self hosted instances

This commit is contained in:
Kyle Spearrin 2017-09-19 17:34:20 -04:00
parent 84a36a18d6
commit 6af0e62976
5 changed files with 36 additions and 23 deletions

View File

@ -4,6 +4,7 @@ angular
.controller('mainController', function ($scope, $state, authService, appSettings, toastr, $window, $document,
cryptoService, $uibModal, apiService) {
var vm = this;
vm.skinClass = appSettings.selfHosted ? 'skin-blue-light' : 'skin-blue';
vm.bodyClass = '';
vm.usingControlSidebar = vm.openControlSidebar = false;
vm.searchVaultText = null;

View File

@ -59,8 +59,6 @@
</li>
<li class="treeview" ng-class="{active: $state.is('backend.user.shared')}">
<a ui-sref="backend.user.shared">
<small class="label pull-right bg-orange">NEW</small>
<i class="fa fa-share-alt fa-fw"></i> <span>Shared</span>
</a>
</li>

View File

@ -103,7 +103,7 @@
<link rel="stylesheet" href="css/vault.css" />
<!-- @endexclude -->
</head>
<body ng-controller="mainController as main" class="layout-boxed skin-blue sidebar-mini {{main.bodyClass}}"
<body ng-controller="mainController as main" class="layout-boxed {{main.skinClass}} sidebar-mini {{main.bodyClass}}"
ng-class="{'using-control-sidebar': main.usingControlSidebar,
'control-sidebar-open': main.usingControlSidebar && main.openControlSidebar}">
<div ui-view></div>

View File

@ -46,3 +46,4 @@
/* End AdminLTE */
@import "../../node_modules/admin-lte/build/less/skins/skin-blue.less";
@import "../../node_modules/admin-lte/build/less/skins/skin-blue-light.less";

View File

@ -20,6 +20,39 @@ h1, h2, h3, h4, h5, h6,
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body.skin-blue-light {
.main-header {
.logo {
.logo-variant(darken(@light-blue, 5%));
}
}
.sidebar-menu > li {
> a {
font-weight: normal;
}
&:hover > a, &.active > a {
border-left-color: @light-blue;
font-weight: normal;
}
&.header {
background: darken(@sidebar-light-hover-bg, 3%);
}
> .treeview-menu {
background: #ffffff;
}
}
}
body.skin-blue {
.content-wrapper, .main-footer {
border-left: 1px solid transparent;
}
}
.login-box, .register-box {
width: 400px;
margin: 4% auto;
@ -215,9 +248,7 @@ form div.validation-errors ul {
}
}
}
/* Buttons */
.btn-table {
padding: 1px 5px;
line-height: 1;
@ -259,9 +290,7 @@ form .btn .loading-icon {
display: none;
}
}
/* Forms */
.form-control {
border-radius: 0 !important;
}
@ -351,15 +380,11 @@ form .btn .loading-icon {
font-size: @font-size-large;
}
}
/* Modals */
.modal-footer {
text-align: left;
}
/* Tables */
.table-selectable {
td:not(.actions) {
cursor: pointer;
@ -386,9 +411,7 @@ form .btn .loading-icon {
display: none;
}
}
/* Callouts */
.callout.callout-default {
background-color: #fff;
border-color: darken(@gray, 10%);
@ -420,9 +443,7 @@ form .btn .loading-icon {
color: @btn-default-color;
}
}
/* Alerts */
.alert-notification {
border-radius: 0;
border-left: none;
@ -430,9 +451,7 @@ form .btn .loading-icon {
margin-bottom: 0;
cursor: pointer;
}
/* Boxes */
.box > .list-group {
margin-bottom: 0;
}
@ -489,9 +508,7 @@ form .btn .loading-icon {
}
}
}
/* Toastr */
#toast-container {
position: absolute;
@ -563,15 +580,11 @@ form .btn .loading-icon {
}
}
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
}
/* Misc */
.strike {
text-decoration: line-through;
color: @text-muted;