Here's a copy of our less file. You'll need to replace the "PICK COLOR" with the 3 colors you want.
This is for admin 5 or 6 I believe, but it should work, at least as a starting point, for any of them.
@primary_blue: PICK COLOR;
@primary_blue_hover: lighten(@primary_blue, 15%);
@primary_blue_active: lighten(@primary_blue, 15%);
@light_blue: PICK COLOR;
@light_blue_hover: lighten(@light_blue, 15%);
@light_blue_active: lighten(@light_blue, 15%);
@primary_blue_shadow: lighten(@primary_blue,60%);
@light_grey: #ececec;
@light_grey_hover: lighten(@light_grey, 15%);
@light_grey_active: lighten(@light_grey, 15%);
@yellow: PICK COLOR;
@yellow_hover: lighten(@yellow, 15%);
@yellow_active: lighten(@yellow, 15%);
@white: #fff;
@background: #f7f7f7;
@navigation_link: #d4d4d4;
@menu_link: #b8bece;
@menu_link_icon: #b8bece;
@menu_link_hover: #676c7b;
@form_text_color: [#212529](https://support.aspnetzero.com/QA/Questions/212529);
body {
background-color: @background;
}
.input-group {
span.input-group-btn {
button {
i {
font-size: 1rem;
}
}
}
}
.small-profile-pic {
height: 30px;
}
.easy-pie-chart {
text-align: center;
}
.easy-pie-chart .number {
font-size: 14px !important;
font-weight: 300;
margin: 0 auto;
position: relative;
text-align: center;
width: 75px;
height: 75px;
line-height: 75px;
}
.easy-pie-chart .number canvas {
position: absolute;
top: 0;
left: 0;
}
.easy-pie-chart .title {
display: block;
text-align: center;
color: [#333](https://support.aspnetzero.com/QA/Questions/333);
font-weight: 300;
font-size: 16px;
margin-top: 5px;
margin-bottom: 10px;
}
.easy-pie-chart .title:hover {
color: [#666](https://support.aspnetzero.com/QA/Questions/666);
text-decoration: none;
}
.easy-pie-chart .title > i {
margin-top: 5px;
}
.m-login.m-login--1 .m-login__wrapper .m-login__logo {
margin-bottom: .5rem !important;
}
body.m-page--boxed {
background-color: #fafafa;
}
.m-brand__logo-wrapper {
margin-left: -5px !important;
}
.m-footer {
z-index: 100 !important;
}
.alert.alert-warning {
color: [#333](https://support.aspnetzero.com/QA/Questions/333);
}
.modal {
.modal-content {
.modal-header .close {
&:before {
cursor: pointer !important;
}
}
}
}
.m-messenger__message {
width: 100% !important;
.m-messenger__message-body {
width: 100% !important;
.m-messenger__message-username {
text-align: right !important;
span {
float: left;
}
}
}
&.m-messenger__message--out {
time {
color: #ececec;
}
.m-messenger__message-body {
.m-messenger__message-username {
text-align: left !important;
span {
float: right;
color: #ececec;
}
}
.m-messenger__message-text {
text-align: right;
color: #fff !important;
span {
color: #fff;
}
}
}
}
}
.m-checkbox {
> input:disabled {
~ span {
opacity: .3;
}
}
}
.m-aside-menu {
&.m-aside-menu--skin-light {
.m-menu__nav {
> .m-menu__item {
&.m-menu__item--active {
> .m-menu__heading {
background-color: #ededfd !important;
}
> .m-menu__link {
background-color: #ededfd !important;
}
}
.m-menu__submenu {
.m-menu__item {
&.m-menu__item--active {
> .m-menu__heading {
background-color: #ededfd !important;
}
> .m-menu__link {
background-color: #ededfd !important;
}
}
}
}
}
}
}
&.m-aside-menu--skin-dark {
.m-menu__nav {
> .m-menu__item {
&.m-menu__item--active {
> .m-menu__heading {
.m-menu__link-text {
color: @light_grey;
}
.m-menu__link-icon {
color: @light_grey;
}
}
> .m-menu__link {
.m-menu__link-text {
color: @light_grey;
}
.m-menu__link-icon {
color: @light_grey;
}
}
}
.m-menu__submenu {
.m-menu__item.m-menu__item--active {
> .m-menu__heading {
.m-menu__link-icon {
color: @light_grey;
}
.m-menu__link-text {
color: @light_grey;
}
}
> .m-menu__link {
.m-menu__link-icon {
color: @light_grey;
}
.m-menu__link-text {
color: @light_grey;
}
}
}
}
}
}
}
}
.m-aside-left--minimize {
.m-aside-menu.m-aside-menu--submenu-skin-dark {
.m-menu__nav {
.m-menu__item.m-menu__item--hover {
> .m-menu__submenu {
> .m-menu__subnav {
.m-menu__item.m-menu__item--active {
> .m-menu__heading {
.m-menu__link-icon {
color: @light_grey;
}
.m-menu__link-text {
color: @light_grey;
}
}
> .m-menu__link {
.m-menu__link-icon {
color: @light_grey;
}
.m-menu__link-text {
color: @light_grey;
}
}
}
}
}
}
}
}
}
.m-aside-menu.m-aside-menu--dropdown.m-aside-menu--submenu-skin-dark {
.m-menu__nav {
.m-menu__item.m-menu__item--hover {
> .m-menu__submenu {
> .m-menu__subnav {
.m-menu__item.m-menu__item--active {
> .m-menu__heading {
.m-menu__link-icon {
color: @light_grey;
}
.m-menu__link-text {
color: @light_grey;
}
}
> .m-menu__link {
.m-menu__link-icon {
color: @light_grey;
}
.m-menu__link-text {
color: @light_grey;
}
}
}
}
}
}
}
}
@media(max-width: 992px) {
.m-aside-header-menu-mobile {
li.m-menu__item.m-menu__item--active {
a {
background-color: #ededfd !important;
&:hover {
background-color: #f8f8fb !important;
}
}
ul.m-menu__subnav {
li {
a {
background-color: #fff !important;
&:hover {
background-color: #f8f8fb !important;
}
}
}
li.m-menu__item.m-menu__item--active {
a {
background-color: #ededfd !important;
&:hover {
background-color: #f8f8fb !important;
}
}
}
}
color: #2e374c !important;
}
}
}
div.btn-group {
label.btn-secondary.active {
background-color: #ddd;
}
}
.m-list-timeline__items.empty {
&:before {
background-color: transparent !important;
}
}
.m-subheader {
padding: 15px 15px 0 15px;
.m-section__sub {
position: relative;
top: 3px;
}
}
.m-content {
padding: 15px 15px !important;
}
td {
label.m-checkbox {
span {
top: -4px !important;
}
}
}
.m-widget24 {
.m-widget24__item {
.m-widget24__title {
margin-top: 1.21rem;
}
.m-widget24__change, .m-widget24__number {
margin-bottom: 0.86rem;
}
}
}
.m-subheader {
.m-subheader__daterange {
border-radius: 3.5px;
}
}
.m-topbar {
.m-topbar__nav.m-nav {
> .m-nav__item.m-topbar__user-profile.m-topbar__user-profile--img.m-dropdown--arrow {
.m-dropdown__arrow {
color: #a395c7;
}
}
}
}
.m-form {
.m-form__heading {
margin-top: 10px !important;
}
}
.m-card-user {
.m-card-user__details {
.m-card-user__name {
word-break: break-word;
color: #fff !important;
font-size: 1.1rem;
}
}
}
.form-control[readonly] {
background-color: #f3f3f3 !important;
}
.form-control[readonly], .form-control {
border-color: #ebedf2;
color: @primary_blue;
}
.form-control[readonly]::-moz-placeholder, .form-control::-moz-placeholder {
color: @primary_blue;
opacity: 1;
}
.form-control[readonly]:-ms-input-placeholder, .form-control:-ms-input-placeholder {
color: @primary_blue;
}
.form-control[readonly]::-webkit-input-placeholder, .form-control::-webkit-input-placeholder {
color: @primary_blue;
}
.bootstrap-select.btn-group.show > .dropdown-toggle.btn-default, .bootstrap-select.btn-group.show > .dropdown-toggle.btn-secondary {
border-color: @primary_blue !important;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background-color: transparent;
}
/*Strix Custom Overrides*/
a {
color: @light_blue;
}
a:hover {
color: @light_blue_hover;
}
.m-link {
color: @light_blue;
}
.m-link:hover {
color: @light_blue_hover;
}
.m-link:hover:after {
border-bottom: 1px solid @light_blue_hover;
}
.m-link.m-link--focus {
color: @light_blue;
}
.m-link.m-link--focus:hover {
color: @light_blue_hover;
}
.m-link.m-link--focus:hover:after {
border-bottom: 1px solid @light_blue_hover;
}
.btn-focus {
color: @white;
background-color: @primary_blue;
border-color: @primary_blue;
}
.btn-focus:hover {
color: @white;
background-color: @primary_blue_hover;
border-color: @primary_blue_hover;
}
.btn-focus.disabled, .btn-focus:disabled {
background-color: @primary_blue;
border-color: @primary_blue;
}
.btn-focus:active, .btn-focus.active,
.show > .btn-focus.dropdown-toggle {
background-color: @primary_blue_active;
background-image: none;
border-color: @primary_blue_active;
}
.btn-metal {
color: @white;
background-color: @primary_blue;
border-color: @primary_blue;
}
.btn-metal:hover {
color: @white;
background-color: @primary_blue_hover;
border-color: @primary_blue_hover;
}
.btn-metal:focus, .btn-metal.focus {
box-shadow: 0 0 0 3px @primary_blue_hover;
}
.btn-metal.disabled, .btn-metal:disabled {
background-color: @primary_blue;
border-color: @primary_blue;
}
.btn-metal:active, .btn-metal.active,
.show > .btn-metal.dropdown-toggle {
background-color: @primary_blue_hover;
background-image: none;
border-color: @primary_blue_hover;
}
.btn-outline-primary {
color: @primary_blue;
background-color: transparent;
background-image: none;
border-color: @primary_blue;
}
.btn-outline-primary:hover {
color: #ffffff;
background-color: @primary_blue_hover;
border-color: @primary_blue_hover;
}
.btn-outline-primary:focus, .btn-outline-primary.focus {
box-shadow: 0 0 0 3px @primary_blue_shadow;
}
.btn-outline-primary.disabled, .btn-outline-primary:disabled {
color: @light_grey;
background-color: transparent;
}
.btn-outline-primary:active, .btn-outline-primary.active,
.show > .btn-outline-primary.dropdown-toggle {
color: #ffffff;
background-color: @primary_blue_active;
border-color: @primary_blue_active;
}
.m-header-menu.m-header-menu--skin-dark .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-icon {
color: @menu_link;
}
.m-header-menu.m-header-menu--skin-dark .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-text {
color: @menu_link;
}
.m-header-menu.m-header-menu--skin-dark .m-menu__nav > .m-menu__item:hover > .m-menu__link .m-menu__link-icon, .m-header-menu.m-header-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--hover > .m-menu__link .m-menu__link-icon {
color: @white;
}
.m-header-menu.m-header-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link > .m-menu__hor-arrow {
color: @white;
}
.m-header-menu.m-header-menu--skin-dark .m-menu__nav > .m-menu__item:hover > .m-menu__link > .m-menu__hor-arrow, .m-header-menu.m-header-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--hover > .m-menu__link > .m-menu__hor-arrow {
color: @white;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-icon {
color: @primary_blue;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text {
color: @primary_blue;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span {
background-color: @primary_blue;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--line > span {
background-color: @primary_blue;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav > .m-menu__item.m-menu__item--active > .m-menu__link > .m-menu__hor-arrow {
color: @primary_blue;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav > .m-menu__item:hover > .m-menu__link .m-menu__link-icon, .m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav > .m-menu__item.m-menu__item--hover > .m-menu__link .m-menu__link-icon {
color: @primary_blue;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav > .m-menu__item:hover > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span, .m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav > .m-menu__item.m-menu__item--hover > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span {
background-color: @primary_blue;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav > .m-menu__item:hover > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--line > span, .m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav > .m-menu__item.m-menu__item--hover > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--line > span {
background-color: @primary_blue;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav > .m-menu__item:hover > .m-menu__link .m-menu__link-text, .m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav > .m-menu__item.m-menu__item--hover > .m-menu__link .m-menu__link-text {
color: @primary_blue;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav > .m-menu__item:hover > .m-menu__link > .m-menu__hor-arrow, .m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav > .m-menu__item.m-menu__item--hover > .m-menu__link > .m-menu__hor-arrow {
color: @primary_blue;
}
.m-header-menu.m-header-menu--skin-light .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-icon {
color: #78759b;
}
.m-header-menu.m-header-menu--skin-light .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span {
background-color: #78759b;
}
.m-header-menu.m-header-menu--skin-light .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--line > span {
background-color: #78759b;
}
.m-header-menu.m-header-menu--skin-light .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-text {
color: #a8a4d2;
}
.m-header-menu.m-header-menu--skin-light .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__hor-arrow {
color: #78759b;
}
.m-header-menu.m-header-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-icon {
color: @primary_blue;
}
.m-header-menu.m-header-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span {
background-color: @primary_blue;
}
.m-header-menu.m-header-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--line > span {
background-color: @primary_blue;
}
.m-header-menu.m-header-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text {
color: @primary_blue;
}
.m-header-menu.m-header-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link > .m-menu__hor-arrow {
color: @primary_blue;
}
.m-header-menu.m-header-menu--skin-light .m-menu__nav > .m-menu__item:hover > .m-menu__link .m-menu__link-icon, .m-header-menu.m-header-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--hover > .m-menu__link .m-menu__link-icon {
color: @primary_blue;
}
.m-header-menu.m-header-menu--skin-light .m-menu__nav > .m-menu__item:hover > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span, .m-header-menu.m-header-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--hover > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span {
background-color: @primary_blue;
}
.m-header-menu.m-header-menu--skin-light .m-menu__nav > .m-menu__item:hover > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--line > span, .m-header-menu.m-header-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--hover > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--line > span {
background-color: @primary_blue;
}
.m-header-menu.m-header-menu--skin-light .m-menu__nav > .m-menu__item:hover > .m-menu__link .m-menu__link-text, .m-header-menu.m-header-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--hover > .m-menu__link .m-menu__link-text {
color: @primary_blue;
}
.m-header-menu.m-header-menu--skin-light .m-menu__nav > .m-menu__item:hover > .m-menu__link > .m-menu__hor-arrow, .m-header-menu.m-header-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--hover > .m-menu__link > .m-menu__hor-arrow {
color: @primary_blue;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav {
background-color: #ffffff;
-webkit-box-shadow: 0px 0px 15px 1px @primary_blue_shadow;
-moz-box-shadow: 0px 0px 15px 1px @primary_blue_shadow;
box-shadow: 0px 0px 15px 1px @primary_blue_shadow;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav > .m-menu__item > .m-menu__link .m-menu__link-icon {
color: @menu_link;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav > .m-menu__item > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span {
background-color: @menu_link;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav > .m-menu__item > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--line > span {
background-color: @menu_link;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav > .m-menu__item > .m-menu__link .m-menu__link-text {
color: @menu_link;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav > .m-menu__item > .m-menu__link .m-menu__hor-arrow {
color: #b9c1d4;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-icon {
color: @primary_blue;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span {
background-color: @primary_blue;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--line > span {
background-color: @primary_blue;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text {
color: @primary_blue;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav > .m-menu__item.m-menu__item--active > .m-menu__link > .m-menu__hor-arrow {
color: @primary_blue;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav > .m-menu__item:hover > .m-menu__link .m-menu__link-icon, .m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav > .m-menu__item.m-menu__item--hover > .m-menu__link .m-menu__link-icon {
color: @primary_blue;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav > .m-menu__item:hover > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span, .m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav > .m-menu__item.m-menu__item--hover > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span {
background-color: @primary_blue;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav > .m-menu__item:hover > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--line > span, .m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav > .m-menu__item.m-menu__item--hover > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--line > span {
background-color: @primary_blue;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav > .m-menu__item:hover > .m-menu__link .m-menu__link-text, .m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav > .m-menu__item.m-menu__item--hover > .m-menu__link .m-menu__link-text {
color: @primary_blue;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav > .m-menu__item:hover > .m-menu__link > .m-menu__hor-arrow, .m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav > .m-menu__item.m-menu__item--hover > .m-menu__link > .m-menu__hor-arrow {
color: @primary_blue;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav .m-menu__content > .m-menu__item {
border-right: 1px solid #f6f7fa;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav .m-menu__content .m-menu__heading > .m-menu__link-text {
color: #5f6281;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav .m-menu__content .m-menu__heading > .m-menu__link-icon {
color: #5f6281;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav .m-menu__content .m-menu__inner > .m-menu__item > .m-menu__link .m-menu__link-icon {
color: @menu_link;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav .m-menu__content .m-menu__inner > .m-menu__item > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span {
background-color: @menu_link;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav .m-menu__content .m-menu__inner > .m-menu__item > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--line > span {
background-color: @menu_link;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav .m-menu__content .m-menu__inner > .m-menu__item > .m-menu__link .m-menu__link-text {
color: #676c7b;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav .m-menu__content .m-menu__inner > .m-menu__item > .m-menu__link .m-menu__hor-arrow {
color: #b9c1d4;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav .m-menu__content .m-menu__inner > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-icon {
color: @primary_blue;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav .m-menu__content .m-menu__inner > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span {
background-color: @primary_blue;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav .m-menu__content .m-menu__inner > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--line > span {
background-color: @primary_blue;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav .m-menu__content .m-menu__inner > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text {
color: @primary_blue;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav .m-menu__content .m-menu__inner > .m-menu__item.m-menu__item--active > .m-menu__link > .m-menu__hor-arrow {
color: @primary_blue;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav .m-menu__content .m-menu__inner > .m-menu__item:hover > .m-menu__link .m-menu__link-icon, .m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav .m-menu__content .m-menu__inner > .m-menu__item.m-menu__item--hover > .m-menu__link .m-menu__link-icon {
color: @primary_blue;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav .m-menu__content .m-menu__inner > .m-menu__item:hover > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span, .m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav .m-menu__content .m-menu__inner > .m-menu__item.m-menu__item--hover > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span {
background-color: @primary_blue;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav .m-menu__content .m-menu__inner > .m-menu__item:hover > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--line > span, .m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav .m-menu__content .m-menu__inner > .m-menu__item.m-menu__item--hover > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--line > span {
background-color: @primary_blue;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav .m-menu__content .m-menu__inner > .m-menu__item:hover > .m-menu__link .m-menu__link-text, .m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav .m-menu__content .m-menu__inner > .m-menu__item.m-menu__item--hover > .m-menu__link .m-menu__link-text {
color: @primary_blue;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav .m-menu__content .m-menu__inner > .m-menu__item:hover > .m-menu__link > .m-menu__hor-arrow, .m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav > .m-menu__item .m-menu__submenu > .m-menu__subnav .m-menu__content .m-menu__inner > .m-menu__item.m-menu__item--hover > .m-menu__link > .m-menu__hor-arrow {
color: @primary_blue;
}
.m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav.m-menu__nav--submenu-arrow > .m-menu__item.m-menu__item--submenu.m-menu__item--hover > .m-menu__submenu .m-menu__arrow {
color: #ffffff;
}
.m-header-menu.m-header-menu--skin-dark .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-icon {
color: @menu_link;
}
.m-header-menu.m-header-menu--skin-dark .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span {
background-color: @menu_link;
}
.m-header-menu.m-header-menu--skin-dark .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--line > span {
background-color: @menu_link;
}
.m-header-menu.m-header-menu--skin-dark .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-text {
color: @menu_link;
}
.m-header-menu.m-header-menu--skin-dark .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__hor-arrow {
color: @menu_link;
}
.m-header-menu.m-header-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-icon {
color: @white;
}
.m-header-menu.m-header-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span {
background-color: @primary_blue;
}
.m-header-menu.m-header-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--line > span {
background-color: @primary_blue;
}
.m-header-menu.m-header-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text {
color: #ffffff;
}
.m-header-menu.m-header-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link > .m-menu__hor-arrow {
color: @white;
}
.m-header-menu.m-header-menu--skin-dark .m-menu__nav > .m-menu__item:hover > .m-menu__link .m-menu__link-icon, .m-header-menu.m-header-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--hover > .m-menu__link .m-menu__link-icon {
color: @white;
}
.m-header-menu.m-header-menu--skin-dark .m-menu__nav > .m-menu__item:hover > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span, .m-header-menu.m-header-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--hover > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span {
background-color: @primary_blue;
}
.m-header-menu.m-header-menu--skin-dark .m-menu__nav > .m-menu__item:hover > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--line > span, .m-header-menu.m-header-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--hover > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--line > span {
background-color: @primary_blue;
}
.m-header-menu.m-header-menu--skin-dark .m-menu__nav > .m-menu__item:hover > .m-menu__link .m-menu__link-text, .m-header-menu.m-header-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--hover > .m-menu__link .m-menu__link-text {
color: #ffffff;
}
.m-header-menu.m-header-menu--skin-dark .m-menu__nav > .m-menu__item:hover > .m-menu__link > .m-menu__hor-arrow, .m-header-menu.m-header-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--hover > .m-menu__link > .m-menu__hor-arrow {
color: @white;
}
.m-header {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
-webkit-box-shadow: 0px 1px 15px 1px @primary_blue_shadow;
-moz-box-shadow: 0px 1px 15px 1px @primary_blue_shadow;
box-shadow: 0px 1px 15px 1px @primary_blue_shadow;
}
.m-header .m-header__bottom {
padding: 0;
position: relative;
z-index: 1;
background: @primary_blue;
height: 70px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.btn-primary {
color: @white;
background-color: @primary_blue;
border-color: @primary_blue;
}
.btn-primary:hover {
color: @white;
background-color: @primary_blue_hover;
border-color: @primary_blue_hover;
}
.btn-primary.disabled, .btn-primary:disabled {
background-color: @light_grey;
border-color: @light_grey;
}
.btn-primary:active, .btn-primary.active,
.show > .btn-primary.dropdown-toggle {
background-color: @primary_blue_active;
background-image: none;
border-color: @primary_blue_active;
}
.m--font-brand {
color: @primary_blue !important;
}
.m--font-info {
color: @light_blue !important;
}
.m--font-warning {
color: @yellow !important;
}
.btn-brand {
color: #fff;
background-color: @primary_blue;
border-color: @primary_blue;
}
.btn.m-btn--label-brand {
color: @primary_blue;
}
.btn-brand:hover {
color: #fff;
background-color: @primary_blue_hover;
border-color: @primary_blue_hover;
}
.alert-warning:not(.m-alert--outline) {
color: white;
background-color: @yellow;
border-color: @yellow;
}
.alert-warning:not(.m-alert--outline) hr {
border-top-color: #ffb518;
}
.btn-brand.disabled, .btn-brand:disabled {
background-color: @light_grey;
border-color: @light_grey;
}
.btn-brand:active, .btn-brand.active,
.show > .btn-brand.dropdown-toggle {
background-color: @primary_blue_active;
background-image: none;
border-color: @primary_blue_active;
}
.daterangepicker .ranges li.active {
background: @light_blue;
color: #ffffff;
border: 1px solid @light_blue;
}
.daterangepicker tbody td.in-range, .daterangepicker tbody td.active {
background: @light_blue;
/* color: #ffffff; */
}
.daterangepicker tbody td.in-range:hover, .daterangepicker tbody td.active:hover {
background: @light_blue_hover;
color: #ffffff;
}
.datepicker tbody tr > td.day.selected, .datepicker tbody tr > td.day.selected:hover, .datepicker tbody tr > td.day.active, .datepicker tbody tr > td.day.active:hover {
background: @light_blue;
color: #ffffff;
}
.datepicker tbody tr > td.day.today {
background: @light_blue;
color: #ffffff;
}
.m-topbar .m-topbar__nav.m-nav > .m-nav__item.m-topbar__notifications.m-topbar__notifications--img.m-dropdown--arrow .m-dropdown__arrow {
color: @yellow;
}
.m-topbar .m-topbar__nav.m-nav > .m-nav__item.m-topbar__user-profile.m-topbar__user-profile--img.m-dropdown--arrow .m-dropdown__arrow {
color: @yellow;
}
.form-control:focus {
border-color: @primary_blue_hover;
color: @form_text_color;
}
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item > .m-menu__heading .m-menu__link-icon,
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-icon {
color: @primary_blue;
}
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-text {
color: @primary_blue;
}
.m--font-brand {
color: @primary_blue;
}
.m--font-primary {
color: @primary_blue !important;
}
.btn-outline-focus {
color: @primary_blue_hover;
border-color: @primary_blue_hover;
}
.btn-outline-focus:hover {
color: #ffffff;
background-color: @primary_blue_hover;
border-color: @primary_blue_hover;
}
.btn-outline-focus.disabled, .btn-outline-focus:disabled {
color: @primary_blue;
}
.btn-outline-focus:active,
.btn-outline-focus.active,
.show > .btn-outline-focus.dropdown-toggle {
color: #ffffff;
background-color: @primary_blue_active;
border-color: @primary_blue_active;
}
.btn-outline-focus.m-btn--air,
.btn-focus.m-btn--air,
.m-btn--gradient-from-focus.m-btn--air {
-webkit-box-shadow: 0px 5px 10px 2px @primary_blue_shadow;
-moz-box-shadow: 0px 5px 10px 2px @primary_blue_shadow;
box-shadow: 0px 5px 10px 2px @primary_blue_shadow;
}
.btn-outline-focus.m-btn--air.focus, .btn-outline-focus.m-btn--air:focus, .btn-outline-focus.m-btn--air:hover,
.btn-focus.m-btn--air.focus,
.btn-focus.m-btn--air:focus,
.btn-focus.m-btn--air:hover,
.m-btn--gradient-from-focus.m-btn--air.focus,
.m-btn--gradient-from-focus.m-btn--air:focus,
.m-btn--gradient-from-focus.m-btn--air:hover {
-webkit-box-shadow: 0px 5px 10px 2px @primary_blue_shadow;
-moz-box-shadow: 0px 5px 10px 2px @primary_blue_shadow;
box-shadow: 0px 5px 10px 2px @primary_blue_shadow;
}
.btn.m-btn--air.btn-default, .btn.m-btn--air.btn-secondary {
-webkit-box-shadow: 0px 3px 20px 0px rgba(113, 106, 202, 0.17);
-moz-box-shadow: 0px 3px 20px 0px rgba(113, 106, 202, 0.17);
box-shadow: 0px 3px 20px 0px rgba(113, 106, 202, 0.17);
border-color: @primary_blue !important;
}
.btn.m-btn--air.btn-default.focus, .btn.m-btn--air.btn-default:focus, .btn.m-btn--air.btn-default:hover, .btn.m-btn--air.btn-secondary.focus, .btn.m-btn--air.btn-secondary:focus, .btn.m-btn--air.btn-secondary:hover {
-webkit-box-shadow: 0px 3px 20px 0px rgba(113, 106, 202, 0.26);
-moz-box-shadow: 0px 3px 20px 0px rgba(113, 106, 202, 0.26);
box-shadow: 0px 3px 20px 0px rgba(113, 106, 202, 0.26);
background: @primary_blue_hover !important;
color: #ffffff !important;
border-color: @primary_blue_hover !important;
}
.btn.m-btn--air.btn-default.focus i, .btn.m-btn--air.btn-default:focus i, .btn.m-btn--air.btn-default:hover i, .btn.m-btn--air.btn-secondary.focus i, .btn.m-btn--air.btn-secondary:focus i, .btn.m-btn--air.btn-secondary:hover i {
color: #ffffff !important;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
background-color: @primary_blue;
border-color: @primary_blue;
color: #ffffff;
}
.daterangepicker .daterangepicker_input .input-mini {
border: 1px solid @light_grey;
}
.daterangepicker .daterangepicker_input .input-mini.active, .daterangepicker .daterangepicker_input .input-mini:focus {
border: 1px solid @light_grey_active;
}
.m-scroll-top {
background: @primary_blue;
color: @white;
border-color: @primary_blue;
}
.m-scroll-top > i {
color: @white;
}
.m-scroll-top:hover > i {
color: @primary_blue_hover;
}
.m-subheader .m-subheader__daterange {
background: @background;
}
.form-control[disabled] {
border-color: @background;
color: #6f727d;
background-color: @background;
}
.m--font-primary {
color: @primary_blue;
}
.m-nav > .m-nav__item > .m-nav__link .m-nav__link-text {
color: @menu_link;
font-weight: 400;
}
.m-nav > .m-nav__item > .m-nav__link .m-nav__link-icon {
color: @menu_link;
}
.m-nav > .m-nav__item > .m-nav__link .m-nav__link-bullet.m-nav__link-bullet--line > span, .m-nav > .m-nav__item > .m-nav__link .m-nav__link-bullet.m-nav__link-bullet--dot > span {
background-color: @menu_link;
}
.m-nav > .m-nav__item:hover > .m-nav__heading .m-nav__link-icon,
.m-nav > .m-nav__item:hover > .m-nav__heading .m-nav__link-text,
.m-nav > .m-nav__item:hover > .m-nav__link .m-nav__link-icon,
.m-nav > .m-nav__item:hover > .m-nav__link .m-nav__link-text, .m-nav > .m-nav__item.m-nav__item--active > .m-nav__heading .m-nav__link-icon,
.m-nav > .m-nav__item.m-nav__item--active > .m-nav__heading .m-nav__link-text,
.m-nav > .m-nav__item.m-nav__item--active > .m-nav__link .m-nav__link-icon,
.m-nav > .m-nav__item.m-nav__item--active > .m-nav__link .m-nav__link-text {
color: @menu_link_hover;
}
.m-list-search .m-list-search__results .m-list-search__result-category {
color: @menu_link_hover;
}
.m--font-info {
color: @primary_blue;
}
.btn.m-btn--air.btn-default, .btn.m-btn--air.btn-secondary {
-webkit-box-shadow: 0px 3px 20px 0px rgba(113, 106, 202, 0.17);
-moz-box-shadow: 0px 3px 20px 0px rgba(113, 106, 202, 0.17);
box-shadow: 0px 3px 20px 0px rgba(113, 106, 202, 0.17);
background: @primary_blue;
color: #ffffff;
border-color: @primary_blue;
}
.btn.btn-default, .btn.btn-secondary {
background: @white;
border-color: @white;
}
.btn.btn-default i, .btn.btn-secondary i {
color: @white;
}
.btn.m-btn--air.btn-default.focus, .btn.m-btn--air.btn-default:focus, .btn.m-btn--air.btn-default:hover, .btn.m-btn--air.btn-secondary.focus, .btn.m-btn--air.btn-secondary:focus, .btn.m-btn--air.btn-secondary:hover {
-webkit-box-shadow: 0px 3px 20px 0px rgba(113, 106, 202, 0.26);
-moz-box-shadow: 0px 3px 20px 0px rgba(113, 106, 202, 0.26);
box-shadow: 0px 3px 20px 0px rgba(113, 106, 202, 0.26);
background: @primary_blue_hover;
color: #ffffff;
border-color: @primary_blue_hover;
}
.btn.m-btn--air.btn-default.focus i, .btn.m-btn--air.btn-default:focus i, .btn.m-btn--air.btn-default:hover i, .btn.m-btn--air.btn-secondary.focus i, .btn.m-btn--air.btn-secondary:focus i, .btn.m-btn--air.btn-secondary:hover i {
color: #ffffff;
}
.m-checkbox > input:checked ~ span {
border: 1px solid @primary_blue;
}
.m-checkbox > span {
border: 1px solid @primary_blue;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-ms-border-radius: 0px;
-o-border-radius: 0px;
border-radius: 0px;
}
.m-checkbox > span:after {
border: solid @primary_blue;
}
.m-checkbox > input:checked ~ span {
border: 1px solid @primary_blue;
}
.m-checkbox > input:disabled ~ span:after {
border-color: @primary_blue;
}
.m-checkbox > input:checked ~ span {
border: 1px solid @primary_blue;
}
.m-checkbox.m-checkbox--focus > span {
border: 1px solid @primary_blue_active;
}
.m-checkbox.m-checkbox--focus > span:after {
border: solid @primary_blue_active;
}
.m-checkbox.m-checkbox--focus > input:checked ~ span {
border: 1px solid @primary_blue;
}
.m-checkbox.m-checkbox--focus > input:disabled ~ span:after {
border-color: @primary_blue;
}
.m-checkbox.m-checkbox--focus > input:checked ~ span {
border: 1px solid @primary_blue;
}
.modal .modal-content {
border: 0;
border-radius: 0;
border-radius: 0px !important;
}
.m-login.m-login--1 .m-login__wrapper .m-login__form .m-form__group .form-control:focus::-webkit-input-placeholder {
color: inherit;
}
.m--bg-primary {
background-color: @primary_blue !important;
}
.m--border-top-primaryv2 {
border-top-color: @primary_blue !important;
}
.tooltip-inner {
background-color: @primary_blue;
}
.dataTables_wrapper div.bottom div.dataTables_paginate ul li a {
background: @primary_blue;
color: @white;
}
.dataTables_wrapper table tbody tr.odd, .dataTables_wrapper table tbody tr.odd > .sorting_1, .dataTables_wrapper table tbody tr.odd > .sorting_2, .dataTables_wrapper table tbody tr.odd > .sorting_3 {
background-color: darken(@white, 2%) !important;
border-color: lightgrey;
}
.dataTables_wrapper div.bottom div.dataTables_paginate ul li a:hover {
background-color: @primary_blue_shadow !important;
}
.dataTables_wrapper div.bottom div.dataTables_paginate ul li.active a {
background-color: @primary_blue_shadow !important;
}
.daterangepicker tbody td.today {
background: @primary_blue;
color: #ffffff;
}
.daterangepicker tbody td.today:before {
border-bottom-color: @primary_blue;
border-top-color: rgba(0, 0, 0, 0.2);
}
.daterangepicker tbody td.in-range, .daterangepicker tbody td.active {
background: @primary_blue;
color: #ffffff;
}
.daterangepicker tbody td.in-range:hover, .daterangepicker tbody td.active:hover {
background: @primary_blue;
color: #ffffff;
}
.daterangepicker .ranges li.active {
background: @primary_blue;
color: #ffffff;
border: 1px solid @primary_blue;
}
.m-radio.m-radio--disabled {
opacity: 0.8;
filter: alpha(opacity=80);
}
.m-radio > span {
border: 1px solid @primary_blue;
}
.m-radio > span:after {
border: solid @primary_blue_active;
}
.m-radio > input:checked ~ span {
border: 1px solid @primary_blue;
}
.m-radio > input:disabled ~ span:after {
border-color: @primary_blue;
}
.m-radio > input:checked ~ span {
border: 1px solid @primary_blue;
}
.m-badge.m-badge--brand {
background-color: @primary_blue;
color: #ffffff;
}
.m-badge.m-badge--metal {
background-color: @light_grey;
color: [#111111](https://support.aspnetzero.com/QA/Questions/111111);
}
.badge-primary {
color: #fff;
background-color: @primary_blue;
}
.badge-primary[href]:focus, .badge-primary[href]:hover {
color: #fff;
text-decoration: none;
background-color: @primary_blue_hover;
}
.swal-modal {
border-radius: 0px;
}
.swal-button {
display: inline-block;
font-weight: normal;
text-align: center;
white-space: nowrap;
vertical-align: middle;
user-select: none;
border: 1px solid transparent;
border-radius: 0 !important;
padding: 0.65rem 1.25rem;
font-size: 1rem;
line-height: 1.25;
transition: all 0.15s ease-in-out;
}
.swal-button:focus, .swal-button:hover {
text-decoration: none;
}
.swal-button:focus, .swal-button.focus {
outline: 0;
box-shadow: 0 0 0 3px @primary_blue_hover;
}
.swal-button.disabled, .swal-button:disabled {
opacity: .65;
}
.swal-button:active, .swal-button.active {
background-image: none;
}
a.swal-button.disabled,
fieldset[disabled] a.swal-button {
pointer-events: none;
}
.swal-button--confirm {
color: #fff;
border-radius: 0px !important;
background-color: @primary_blue;
border-color: @primary_blue;
}
.swal-button--confirm:hover {
color: #fff;
background-color: @primary_blue_hover;
border-color: @primary_blue_hover;
}
.swal-button--confirm:focus, .swal-button--confirm.focus {
box-shadow: 0 0 0 3px @primary_blue_hover;
}
.swal-button--confirm.disabled, .swal-button--confirm:disabled {
background-color: @light_grey;
border-color: @light_grey;
}
.swal-button--confirm:active, .swal-button--confirm.active,
.show > .swal-button--confirm.dropdown-toggle {
background-color: @primary_blue_active;
background-image: none;
border-color: @primary_blue_active;
}
.swal-button--cancel {
color: [#111](https://support.aspnetzero.com/QA/Questions/111);
background-color: #fff;
border-color: #fff;
}
.swal-button--cancel:hover {
color: [#111](https://support.aspnetzero.com/QA/Questions/111);
background-color: @light_grey;
border-color: @light_grey;
}
.swal-button--cancel:focus, .swal-button--cancel.focus {
box-shadow: 0 0 0 3px @light_grey_hover;
}
.swal-button--cancel.disabled, .swal-button--cancel:disabled {
background-color: @light_grey;
border-color: @light_grey;
}
.swal-button--cancel:active, .swal-button--cancel.active,
.show > .swal-button--cancel.dropdown-toggle {
background-color: @light_grey_active;
background-image: none;
border-color: @light_grey_active;
}
.dropdown-menu {
-webkit-box-shadow: 0px 0px 15px 1px @primary_blue_shadow;
-moz-box-shadow: 0px 0px 15px 1px @primary_blue_shadow;
box-shadow: 0px 0px 15px 1px @primary_blue_shadow;
border-radius: 0px;
}
.m-brand .m-brand__tools .m-brand__icon > i {
color: #6c6e86;
}
.m-brand .m-brand__tools .m-brand__toggler.m-brand__toggler--active span {
background: @primary_blue;
}
.m-brand .m-brand__tools .m-brand__icon:hover > i {
color: @primary_blue_active;
}
.m-header-menu .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__subnav {
background-color: #eee;
list-style: none;
padding: 0;
margin: 0;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-ms-border-radius: 0px;
-o-border-radius: 0px;
}
.m-dropdown .m-dropdown__wrapper .m-dropdown__header {
padding: 20px 20px;
-webkit-border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
-ms-border-radius: 0px 0px 0px 0px;
-o-border-radius: 0px 0px 0px 0px;
border-radius: 0px 0px 0px 0px;
}
.m-dropdown .m-dropdown__wrapper .m-dropdown__inner {
background-color: #ffffff;
box-shadow: 0px 0px 15px 1px @primary_blue_shadow;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-ms-border-radius: 0px;
-o-border-radius: 0px;
}
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item:not(.m-menu__item--parent):hover > .m-menu__heading .m-menu__link-text,
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item:not(.m-menu__item--parent):hover > .m-menu__link .m-menu__link-text {
color: @primary_blue_hover;
}
<cite>Ricavir: </cite> Thanks for your replies. I will not spend that time for it. My main goal was to change the purple color and glow effects by the blue color used on demo6.
From your experience, is it easy to do ? any advice would be welcome.
We also did a complete rebranding. We used the metronic-customize.less file and added our own colors there. If you're just looking to recolor, it's a very simple process. This took a few hours to find all of the styles we wanted to override. This file is already referenced in the correct order, so extending it to suit your needs will suffice.
We swapped out the theme, but we did not compile from source. We used the distribution files provided with the m5 download link because we had issues building metronic from source.
The biggest issue you will run into is that the menus are different, and the customization options are not exactly the same between m5 demos, so the UiCustomization feature that's provided with Zero doesn't work perfectly. We ended up customizing the front end implementation a good bit, and then removing a lot of the customization options.
All together it took us about a week to implement, mostly because of the UiCustomization stuff.
Why not create a generic hub interface in your app layer, implement it on your signalR hub, and then register that dependency in the web layer, and inject it in the app service?
<cite>BobIngham: </cite> Thanks strix20, looks like I'm swimming against the tide here! If I conceded the need for an email I still don't understand why I also need Firstname and Surname.
Without email verification, how will you prevent a bot service from launching an attack on your site and flooding it with fake accounts? And Don't say reCaptcha (See this whitepaper: here.)
There's no compelling reason for names.. you could always remove the required attributes from the domain and app dto and script a migration to remove the db requirement.
<cite>BobIngham: </cite>
The system requires a unique voucher code tying each registration to a tenant, what would stop a bot service from launching an attack on your site and flooding it with fake EMAIL accounts?
If you require email verification, then a bot cannot simply flood registration and access, it must also generate real email addresses, register, obtain the verification from the email, and follow the link. This is a vastly more complex process to automate than simply filling in a registration form.
<cite>BobIngham: </cite>
Also, what happens when a user forgets his password? How are you going to allow them to reset if you have no user information to otherwise identify him/her?
The system registers the device along with the user. It is possible to use SMS or notifications in the same way as you would traditionally use email. This can be extended to use 2FA in the same way you would use email.
Moreover, without the ability to contact your users, how are you going to send them information and updates about your platform?
As stated before, by SMS or notification.
But SMS is no different than email is with regards to GDPR, so I don't understand how a phone number is a better requirement than an email. And it would still have to be required. In general, people are much less willing to give out their phone numbers than emails. I personally will not use a service that requires SMS / phone as a 2FA. Google Auth or email is fine, but my phone number is off limits.
Also, using a device is not an acceptable way of identifying a user. People use web apps from all kinds of places, schools, libraries, work, all of which are public. Add in mobile / laptop connections from unsecured public wifi, hotels, etc, and you can never trust a device as an identifying feature.
If you really want to mask emails from your users, then that should not be done at the application level, it should be the responsibility of the tenant admin to make that decision. If they don't want to put in live emails when they are creating user accounts for their users, they can use google aliases that are unique, and redirect to their admin emails.
Every SaaS system I have ever used has required an email, this is industry standard. Faceboook, Google+, Discord, Slack, Mint.com, Turbotax... I literally cannot think of a single service that DOESN'T require a valid email.
Without email verification, how will you prevent a bot service from launching an attack on your site and flooding it with fake accounts? And Don't say reCaptcha (See this whitepaper: here.)
Also, what happens when a user forgets his password? How are you going to allow them to reset if you have no user information to otherwise identify him/her?
Moreover, without the ability to contact your users, how are you going to send them information and updates about your platform?
Which SMTP provider are you using? Are they configured to use TLS or SSL? Do they require Authentication? Did you provide the correct authentication credentials if so?
Pretty sure the Localization cookie is how the front end knows what language to localize in javascript.
I don't think external links are supported. I have a separate issue due to the current constraints of the menu system, see here:
Perhaps it would be of use to request enhancements to the constricting menu system on github?
Part of the answer is "Them's the requirements." Stakeholders and such.
Part of the answer is, some of the forms take up multiple pages, and modals are very poorly suited for displaying the content, so the navigation must direct to full pages.
We can manually create the menu on each page, but that is less than ideal, for obvious reasons.
My current thinking is to add an additional params string[] parameter to the view component itself, and in the menu definition use a string format pattern. Then I can add an string[] to the MenuItemViewModel, and update the CalculateUrl extension to accept the params as well.
But this only works if every menu item requires the same params, which may or may not be the case for some applications.