zui/src/less/theme.less

一个基于 Bootstrap 深度定制开源前端实践方案，帮助你快速构建现代跨屏应用。

/// ========================================================================
/// ZUI: theme.less
/// http://openzui.com
/// ========================================================================
/// Copyright 2014-2020 cnezsoft.com; Licensed MIT
/// ========================================================================


// ZUI THEME
// =========
// The theme variables are setted in less/basic/variables.theme.less

// Minxins
.form-control-focus(@color: @input-border-focus) {
  @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
  &:focus {
    border-color: @color;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @color-rgba;
  }
}

.button-variant(@color; @background; @border) {
  color: @color;
  background-color: @background;
  border-color: @border;

  &:hover,
  &:focus,
  &:active,
  &.active,
  .open .dropdown-toggle& {
    color: @color;
    background-color: darken(@background, 8%);
        border-color: darken(@border, 12%);
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1);

  }
  &:active,
  &.active,
  .open .dropdown-toggle& {
    background-image: none;
    background-color: darken(@background, 15%);
    border-color: darken(@border, 10%);
    box-shadow: inset 0 4px 6px rgba(0,0,0,0.15);

  }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
      background-color: @background;
          border-color: @border;
    }
  }
}

.label-variant(@color) {
  background-color: @color;
  &[href] {
    &:hover,
    &:focus {
      background-color: darken(@color, 10%);
    }
  }
}


// Scaffolding
a {
  color: @link-color;
  &:hover,
  &:focus {
    color: @link-hover-color;
  }
}

// Buttons
.btn {
  border-radius: @border-radius-base;
  .button-variant(@btn-default-color, @btn-default-bg, @btn-default-border);
}

// Priamry button appears
.btn-primary {
  .button-variant(@btn-primary-color, @btn-primary-bg, @btn-primary-border);
}

// Warning appears as orange
.btn-warning {
  .button-variant(@btn-warning-color, @btn-warning-bg, @btn-warning-border);
}

// Danger and error appear as red
.btn-danger {
  .button-variant(@btn-danger-color, @btn-danger-bg, @btn-danger-border);
}

// Success appears as green
.btn-success {
  .button-variant(@btn-success-color, @btn-success-bg, @btn-success-border);
}

// Info appears as blue-green
.btn-info {
  .button-variant(@btn-info-color, @btn-info-bg, @btn-info-border);
}

// Button as link appears
.btn-link {
  color: @link-color;
  background-color: transparent;
  &,
  &:active,
  &[disabled],
  fieldset[disabled] &,
  &:hover,
  &:focus {
    border-color: transparent;
    box-shadow: none;
  }
  &:hover,
  &:focus {
    color: @link-hover-color;
  }
  &[disabled],
  fieldset[disabled] & {
    &:hover,
    &:focus {
      color: @btn-link-disabled-color;
    }
  }
}

// Popover & tooltip
.popover,
.tooltip-inner {
  border-radius: @border-radius-base;
}

// Labels
.label       {border-radius: @border-radius-small;}
.label-badge {border-radius: @badge-border-radius;}
.label-dot   {border-radius: 5px;}

.label-primary { .label-variant(@label-primary-bg); }
.label-success { .label-variant(@label-success-bg); }
.label-info    { .label-variant(@label-info-bg); }
.label-warning { .label-variant(@label-warning-bg); }
.label-danger  { .label-variant(@label-danger-bg); }

// Labels.fix
.btn-primary .label-badge,
.btn-primary .label-dot {
  background-color: lighten(@btn-primary-bg, 20%);
}

// Type
.text-primary {
  color: @color-primary;
  &:hover {
    color: darken(@color-primary, 10%);
  }
}

.text-warning {
  color: @state-warning-text;
  &:hover {
    color: darken(@state-warning-text, 10%);
  }
}

.text-danger {
  color: @state-danger-text;
  &:hover {
    color: darken(@state-danger-text, 10%);
  }
}

.text-success {
  color: @state-success-text;
  &:hover {
    color: darken(@state-success-text, 10%);
  }
}

.text-info {
  color: @state-info-text;
  &:hover {
    color: darken(@state-info-text, 10%);
  }
}

.text-important {
  color: @state-important-text;
  &:hover {
    color: darken(@state-important-text, 10%);
  }
}

.text-special {
  color: @state-special-text;
  &:hover {
    color: darken(@state-special-text, 10%);
  }
}

.text-muted {
  a {
    &:hover,
    &:active {
      color: @link-color;
    }
  }
}

.text-link {
  &:hover,
  &:active {
    color: @link-color;
  }
}

// Type.bg
.bg-primary {
  background-color: @state-primary-inverse-bg;
  a&:hover {
    background-color: darken(@state-primary-inverse-bg, 10%);
  }
}

// Type.hightlight
.hl-primary {
  background-color: @state-primary-bg;
  a&:hover {
    background-color: darken(@state-primary-bg, 10%);
  }
}


// Progress Bar

.progress  {
  background-color: @progress-bg;
  border-radius: @progress-bar-radius;
}

// Bar of progress
.progress-bar  {
  color: @progress-bar-color;
  background-color: @progress-bar-bg;
  border-radius: @progress-bar-radius;
}


// Form
.form-control {
  border-radius: @input-border-radius;
  .form-control-focus();
}

// Condensed form
.form-condensed {
  .form-control,
  .btn {
    border-radius: @border-radius-base;
  }
}

// Switch
.switch {
  > input:checked + label {
    &:before {
      background-color: @color-primary;
      border-color: @color-primary;
    }
  }

  input:focus + label {
    color: @color-primary;

    &:before {
      border-color: @color-primary;
      box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @color-primary;
    }
  }
}

// Checkbox
.checkbox-primary,
.radio-primary {
  > label {
    &:after {
      border: 1px solid @color-gray;
      background: #fff;
    }
  }

  > input:checked + label,
  &.checked > label {
    &:after {
      border-color: @color-primary;
      background-color: @color-primary;
    }

    &:before {
      color: white;
    }
  }

  &.focus > label,
  > input:focus + label {
    &:after {
      box-shadow: 0 0 8px @color-primary;
      border-color: @color-primary;
    }
  }

  &.disabled > label,
  input:disabled + label {
    &:after {
      background-color: #e5e5e5;
      border-color: #bbb;
    }
  }

  &.checked.disabled > label,
  input:disabled:checked + label {
    &:after {
      background-color: #bbb;
    }
  }
}
.radio-primary {
  > input:checked + label,
  &.checked > label {
    &:after {
      border-color: @color-primary;
      background-color: #fff;
    }

    &:before {
      background-color: @color-primary;
    }
  }

  &.checked.disabled > label,
  input:disabled:checked + label {
    &:after {
      background-color: #fff;
      border-color: #bbb;
    }

    &:before {
      background-color: #bbb;
    }
  }
}


// Input control
.form-control:focus {
  + .input-control-label-left {
    color: @color-secondary;
  }
}

// Button group
.btn-group-vertical > .btn {
  &:not(:first-child):not(:last-child) {
    border-radius: 0;
  }
  &:first-child:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: @border-radius-base;
    .border-bottom-radius(0);
  }
  &:last-child:not(:first-child) {
    border-bottom-left-radius: @border-radius-base;
    .border-top-radius(0);
  }
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
  border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child {
  > .btn:last-child,
  > .dropdown-toggle {
    .border-bottom-radius(0);
  }
}
.btn-group-vertical > .btn-group:last-child > .btn:first-child {
  .border-top-radius(0);
}

// Input group
.input-group-addon {
  background-color: @input-group-addon-bg;
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
  &:not(:first-child):not(:last-child) {
    border-radius: 0;
  }
}
.input-group-addon {
  border-radius: @border-radius-base;
}
.input-group-btn.fix-border > .btn {
  border-radius: 0;
}
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
  .border-right-radius(0);
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
  .border-left-radius(0);
}


// List group
.list-group-item {
  background-color: @list-group-bg;
  border: 1px solid @list-group-border;

  &:first-child { .border-top-radius(@list-group-border-radius); }
  &:last-child  { margin-bottom: 0; .border-bottom-radius(@list-group-border-radius); }

  a& {
    color: @list-group-link-color;
    .list-group-item-heading { color: @list-group-link-heading-color; }
    &:hover,
    &:focus { text-decoration: none; background-color: @list-group-hover-bg; color: @list-group-hover-color}
  }

  &.active,
  &.active:hover,
  &.active:focus {
    background-color: @component-active-bg;
    border-color: @component-active-bg;
    color: @component-active-color;

    .list-group-item-heading { color: inherit; }
    .list-group-item-text { color: darken(@component-active-color, 10%); }
  }
}

.list-group-item-heading {color: @color-gray-dark; }


// Navbar
.navbar-toggle {
  border-radius: @border-radius-base;
}

.navbar {
  @media (min-width: @grid-float-breakpoint) {
    border-radius: @navbar-border-radius;
  }
}

.navbar-inverse {
  background-color: @navbar-inverse-bg;
  border-color: @navbar-inverse-border;
  .navbar-nav {
    > li.nav-heading {
      background-color: darken(@navbar-inverse-bg, 5%);
    }
    > li > a {
      &:hover,
      &:focus {
        background-color: @navbar-inverse-link-hover-bg;
      }
    }
    > .active > a {
      &,
      &:hover,
      &:focus {
        background-color: @navbar-inverse-link-active-bg;
      }
    }
  }
  .navbar-toggle {
    border-color: @navbar-inverse-toggle-border-color;
    &:hover,
    &:focus {
      background-color: @navbar-inverse-toggle-hover-bg;
    }
  }
  .navbar-collapse,
  .navbar-form {
    border-color: darken(@navbar-inverse-bg, 7%);
  }
  .navbar-nav {
    > .open > a {
      &,
      &:hover,
      &:focus {
        background-color: @navbar-inverse-link-active-bg;
      }
    }
    @media (max-width: @screen-xs-max) {
      .open .dropdown-menu {
        > .dropdown-header {
          border-color: @navbar-inverse-border;
        }
        > li > a {
          &:hover,
          &:focus {
            background-color: @navbar-inverse-link-hover-bg;
          }
        }
        > .active > a {
          &,
          &:hover,
          &:focus {
            background-color: @navbar-inverse-link-active-bg;
          }
        }
      }
    }
  }
}


// Navbar.fixed-left
.navbar-fixed-left {
  &.navbar-inverse {
    .navbar-header,
    .navbar-nav {
      border-bottom: 1px solid lighten(@navbar-inverse-bg, 10%);
      box-shadow: inset 0 -1px 0 @navbar-inverse-border;
    }
    &.navbar-collapsed .navbar-nav > li.nav-heading:hover {
      color: lighten(@navbar-inverse-link-color, 5%);
      background-color: darken(@navbar-inverse-bg, 8%);
    }
  }
}

// Nav
.nav {
  > li > a {
    &:hover,
    &:focus {
      color: @link-hover-color;
    }
  }
  .open > a {
    &,
    &:hover,
    &:focus {
      border-color: @link-color;
    }
  }
}

.nav-pills {
  > li {
    &.active > a {
      &,
      &:hover,
      &:focus {
        background-color: @nav-pills-active-link-hover-bg;
      }
    }
  }
}

.nav-primary {
  > li {

    &:first-child {
      > a {
        .border-left-radius(@border-radius-base);
      }
    }

    &:last-child {
      > a {
        .border-right-radius(@border-radius-base);
      }
    }

    // Links rendered
    > a {
      border: 1px solid @nav-primary-border-color;
    }

    // Active state
    &.active > a {
      &,
      &:hover,
      &:focus {
        background-color: @component-active-bg;
        border-color: @component-active-bg;
        color: @component-active-color;
      }
    }
  }
}

.nav-secondary {
  > li {
    &.active > a {
      &,
      &:hover,
      &:focus {
        color: @nav-secondary-active-link-hover-color;
        border-bottom-color: @nav-secondary-active-border-color;
      }
    }
  }
}

.nav-stacked {
  &.nav-primary {
    > li {
      &,
      > a {
        .border-bottom-radius(0);
      }
      &:first-child {
        > a,
        &.nav-heading {
          .border-top-radius(@border-radius-base);
        }
      }

      &:last-child {
        > a {
          .border-top-radius(0);
          .border-bottom-radius(@border-radius-base);
        }
      }
      &.nav-heading {
        border: 1px solid @color-gray-light;
        background-color: @color-gray-pale;
      }
    }
  }

  &.nav-secondary {
    > li {
      > a {
        .border-right-radius(@border-radius-base);
        box-shadow: inset 2px 0 0 @nav-secondary-active-link-hover-bg;


        &:hover {
          box-shadow: inset 2px 0 0 @nav-secondary-border-color;

        }
      }
      // Active state
      &.active > a {
        &,
        &:hover,
        &:focus {
          background-color: @nav-secondary-active-link-hover-bg;
          box-shadow: inset 2px 0 0 @nav-secondary-active-border-color;

        }
      }
      &.nav-heading {
        border-bottom: 1px solid @color-gray-light;
      }
    }
  }
}

.nav-tabs {
  > li > a {
    border-radius: @border-radius-base @border-radius-base 0 0;
  }
}


// Pager

.pager {
  border-radius: @border-radius-base;

  > li {
    > a,
    > span {
      background-color: @pager-bg;
      border: 1px solid @pager-border;
    }
    &:first-child {
      > a,
      > span {
        .border-left-radius(@border-radius-base);
      }
    }
    &:last-child {
      > a,
      > span {
        .border-right-radius(@border-radius-base);
      }
    }
  }

  > li > a,
  > li > span {
    &:hover,
    &:focus {
      background-color: @pager-hover-bg;
    }
  }

  > li.active > a,
  > li.active > span {
    &,
    &:hover {
      color: @pager-active-color;
      background-color: @pager-active-bg;
      border-color: @pager-active-bg;
    }
  }

  > li.disabled {
    > span,
    > span:hover,
    > span:focus,
    > a,
    > a:hover,
    > a:focus {
      color: @pager-disabled-color;
      background-color: @pager-bg;
      border-color: @pager-border;
    }
  }
}

// Panel.type
.panel {
  border-radius: @border-radius-base;
  > .panel-heading {
    background-image: none;
    border-top-left-radius: @border-radius-base;
    border-top-right-radius: @border-radius-base;
  }
}
.panel-group .panel {border-radius: @border-radius-base;}
.dashboard .panel {
  box-shadow: none
}
.panel-primary {
  .panel-variant(@panel-primary-border, @panel-primary-text, @panel-primary-heading-bg, @panel-primary-border);
}
.panel-success > .panel-body,
.panel-warning > .panel-body,
.panel-primary > .panel-body,
.panel-info > .panel-body,
.panel-danger > .panel-body {
  box-shadow: none
}

// Table
.table-hover > tbody > tr:hover {
  > td,
  > th {
    background-color: @table-bg-hover;
  }
}
.table tr {
  > td.active,
  > th.active,
  &.active > td,
  &.active > th {
    background-color: @table-bg-active;
  }
}

table.tablesorter thead tr .headerSortUp:after,
table.tablesorter thead tr .headerSortDown:after{color:@link-color!important;}

// Chossen
.chosen-container-single {
  .chosen-search {
    &:focus,
    input[type="text"]:focus {
      border-color: @input-border-focus!important;
    }
  }
  .chosen-single {
    border-radius: @input-border-radius!important;
  }

  &.chosen-with-drop {
    .chosen-single {
      .border-bottom-radius(0)!important;
    }

    &.chosen-up .chosen-single {
      .border-bottom-radius(@input-border-focus)!important;
      .border-top-radius(0)!important;
    }
  }
}

.chosen-container .chosen-results {
  li {
    &.highlighted {
      background-color: @dropdown-link-hover-bg!important;
    }
  }
}

.chosen-container-active {
  .chosen-single {
    @color-rgba: rgba(red(@input-border-focus), green(@input-border-focus), blue(@input-border-focus), .6)!important;
    border-color: @input-border-focus!important;
  }
  &.chosen-with-drop .chosen-single {
    border-color: @dropdown-fallback-border!important; // IE8 fallback
    border-color: @dropdown-border!important;
  }
  .chosen-choices {
    @color-rgba: rgba(red(@input-border-focus), green(@input-border-focus), blue(@input-border-focus), .6)!important;
    border-color: @input-border-focus!important;
  }
}

.chosen-container-multi  {
  .chosen-choices {
    border-radius: @input-border-radius!important;
  }

  &.chosen-with-drop {
    .chosen-choices {
      .border-bottom-radius(0)!important;
    }

    &.chosen-up .chosen-choices {
      .border-bottom-radius(@input-border-focus)!important;
      .border-top-radius(0)!important;
    }
  }
}
.chosen-container.chosen-highlight-selected {
  .result-selected {
    background: @color-pale;
    color: @color-primary;
  }
}

// Menu
.menu {
  > .nav {
    > li {
      > .nav {
        background-color: lighten(@color-gray-pale, 2%);
        > li {
          > a {
            border: 1px solid @nav-primary-border-color;

            &:hover,
            &:focus {
              background-color: darken(@nav-link-hover-bg, 5%);
            }
          }

          // Active state
          &.active > a {
            &,
            &:hover,
            &:focus {
              background-color: @component-active-bg;
              border-color: @component-active-bg;
              color: @component-active-color;
            }
          }
        }
      }

      &:first-child {
        > a,
        &.nav-heading {
          .border-bottom-radius(0);
          .border-top-radius(@border-radius-base);
        }
      }

      &:last-child {
        > a {
          .border-top-radius(0);
          .border-bottom-radius(@border-radius-base);
        }
      }

      &:first-child {
        > a,
        &.nav-heading {
          .border-top-radius(@border-radius-base);
        }
      }

      &.show {
        > a {
          &,
          &:hover,
          &:focus {
            color: @color-fore;
            background-color: @color-back;
            border-color: @nav-primary-border-color;

            > [class*='icon-'] {
              color: @color-fore;
            }
          }

          &:hover {
            background-color: @nav-link-hover-bg;
          }
        }


        &:last-child {
          > a {
            .border-bottom-radius(0);
          }

          > .nav > li:last-child > a {
            .border-bottom-radius(@border-radius-base);
          }
        }
      }

      &.nav-heading {
        border: 1px solid @color-gray-light;
        background-color: @color-gray-pale;
      }
    }
  }
}


// Dropdown
.dropdown-menu {
  border-radius: @border-radius-base;
}

.dropdown-menu > li > a {
  &:hover,
  &:focus {
    background-color: @dropdown-link-hover-bg;
  }
}

.dropdown-menu > .active > a {
  &,
  &:hover,
  &:focus {
    background-color: @dropdown-link-active-bg;
  }
}

.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
  background-color: @dropdown-link-hover-bg;
}

.dropdown-submenu:hover > a:after {
  border-left-color: @dropdown-link-hover-color;
}

// Datetimepicker
.datetimepicker td.day.today {
  background-color: @color-warning!important;
  border-color: @color-warning!important;
}

.datetimepicker td.day.active {
  background-color: @color-primary!important;
  border-color: darken(@color-primary, 10%)!important;
}

.datetimepicker td.day.active:hover {
  background-color: darken(@color-primary, 10%)!important;
}

.datetimepicker td.day.today:hover,
.datetimepicker td.day.today.active:hover {
  background-color: darken(@color-warning, 10%)!important;
}

// Kindeditor
.ke-container {
  border-radius: @border-radius-base!important;

  &.focus {
    @color: @input-border-focus;
    @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
    border-color: @color!important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @color-rgba!important;
  }
}

.ke-menu-item-on {
  background-color: @dropdown-link-active-bg!important;
}

.ke-colorpicker-cell-on {
  background-color: @dropdown-link-active-bg!important;
}

.ke-input-text {
  @color: @input-border-focus;
  @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
  &:focus {
    border-color: @color!important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @color-rgba!important;
  }
}

// Messager
@messager-radius: @border-radius-base;
.messager           { border-radius:    @messager-radius; }
.messager-primary   { background-color: @state-primary-inverse-bg; }
.messager-success   { background-color: @state-success-inverse-bg; }
.messager-info      { background-color: @state-info-inverse-bg; }
.messager-warning   { background-color: @state-warning-inverse-bg; }
.messager-danger    { background-color: @state-danger-inverse-bg; }
.messager-important { background-color: @state-important-inverse-bg; }
.messager-special   { background-color: @state-special-inverse-bg; }

// Comment
.comment {
  &:hover {
    > .content {
      > .actions {
        > a { color: @link-color; }
      }
    }
  }
}

// Alerts
.alert:not(.alert-block) {border-radius: @alert-border-radius;}

.alert-primary {
  .alert-variant(@alert-primary-bg, @alert-primary-border, @alert-primary-text);
}
.alert-success {
  .alert-variant(@alert-success-bg, @alert-success-border, @alert-success-text);
}
.alert-info {
  .alert-variant(@alert-info-bg, @alert-info-border, @alert-info-text);
}
.alert-warning {
  .alert-variant(@alert-warning-bg, @alert-warning-border, @alert-warning-text);
}
.alert-danger {
  .alert-variant(@alert-danger-bg, @alert-danger-border, @alert-danger-text);
}
.alert-primary-inverse {
  .alert-inverse-variant(@color-primary);
}

// Modal
.modal-dialog {
  border-radius: @border-radius-large;
}

// Card
.card {
  box-shadow: none;
  border-radius: @border-radius-base;
}

// Code
pre {border-radius: @border-radius-base}

// Datagrid
.datagrid .datagrid-hover-row .datagrid-row-cell:hover .datagrid-cell,
.datagrid .datagrid-hover-col .datagrid-cell.hover,
.datagrid .datagrid-hover-col .datagrid-row-cell.active .datagrid-cell.hover  {
  background-color: @color-pale;
}
.datagrid .datagrid-loading > .content > .icon,
.datagrid .datagrid-sort-up > .icon-sort:before,
.datagrid .datagrid-sort-down > .icon-sort:before {
  color: @color-primary;
}

// Tree and tree menu
.tree-drag-holder {
  background-color: @color-pale;
}
.tree-menu {
  li {
    &.active > a {
      background-color: @component-active-bg;
      border-color: @component-active-bg;
      color: @component-active-color;
    }
    &.active > .list-toggle {
      color: @component-active-color;
    }
  }
}