praiadeseselle/wire/modules/AdminTheme/AdminThemeUikit/uikit-pw/styles/reno.less

/**************************************************************
 * Reno theme
 *
 * Adjustments to stock Uikit admin theme to make it resemble
 * the AdminThemeReno look and colors. 
 *  
 */

/**************************************************************
 * Primary variables
 *
 * The entire color theme can be adjusted from the @reno 
 * variables below. 
 *
 */

@reno-text-color: #354b60;
@reno-link-color: #e83561;
@reno-link-hover-color: darken(@reno-link-color, 10%);
@reno-dark-background: #1C2836;
@reno-muted-background: #f0f3f7;
@reno-muted-text-color: #8d939e; 
@reno-muted-text-color-alternate: #6c8dae; 
@reno-primary-background: #3eb998;
@reno-secondary-background: #e2e9ef;
@reno-success-background: #8bccde;
@reno-success-color: @reno-text-color;
@reno-warning-background: #FFD15E;
@reno-warning-color: @reno-text-color;
@reno-danger-background: #bc283d;
@reno-danger-color: #fff;
@reno-alert-background: #ffd;
@reno-alert-color: @reno-text-color;
@reno-primary-headline-color: #1C2836;
@reno-secondary-headline-color: lighten(@reno-primary-headline-color, 30%);
@reno-notes-text-color: @reno-muted-text-color;
@reno-notes-background: #ffd;
@reno-masthead-background: @reno-dark-background;
@reno-masthead-link-color: rgba(255, 255, 255, 0.7); 
@reno-masthead-link-hover-color: lightblue;
@reno-masthead-link-current-color: #fff;
@reno-masthead-icon-color: #8d939e;
@reno-masthead-search-text-color: #8d939e;
@reno-masthead-search-background: transparent;
@reno-masthead-search-border-color: lighten(#253447, 10%);
@reno-masthead-search-focus-background: lighten(#253447, 5%);
@reno-masthead-search-focus-text-color: #fff;
@reno-masthead-search-focus-border-color: @reno-masthead-search-focus-background;
@reno-masthead-search-icon-color: @reno-masthead-icon-color;
@reno-button-text-color: #fff;
@reno-button-background: @reno-primary-background;
@reno-button-hover-background: @global-link-color;
@reno-button-secondary-background: @reno-muted-text-color-alternate; 
@reno-dropdown-background: #fff; 
@reno-dropdown-color: @reno-text-color;
@reno-dropdown-hover-background: #e2e9ef;
@reno-dropdown-border-color: #d9e1ea;
@reno-dropdown-border: 1px solid @reno-dropdown-border-color;
@reno-dropdown-nav-icon-color: #97aab4;
@reno-page-list-link-color: #7a002b;
@reno-page-list-link-open-color: #bb153e;
@reno-page-list-icon-color: @reno-link-color; // #a9adb5;
@reno-page-list-link-active-color: @reno-link-hover-color;
@reno-page-list-link-hover-color: @reno-link-hover-color;
@reno-page-list-action-link-color: #fff;
@reno-page-list-action-link-background-color: @reno-link-color; 
@reno-page-list-action-link-hover-color: #fff;
@reno-page-list-action-link-hover-background-color: @reno-link-hover-color;
@reno-inputfield-border: 1px solid #d9e1ea;
@reno-inputfield-input-background: #f0f3f7;
@reno-inputfield-input-border-color: #b1c3d4 #cbd7e3 #cbd7e3 #cbd7e3;
@reno-inputfield-select-background: #f0f3f7;
@reno-inputfield-select-border-color: #cbd7e3;
@reno-form-radio-checked-background: @reno-muted-text-color-alternate;
@reno-offcanvas-text-color: @reno-text-color;
@reno-offcanvas-link-color: @reno-text-color;
@reno-offcanvas-link-hover-color: @reno-link-color;
@reno-offcanvas-link-open-color: @reno-link-color;
@reno-offcanvas-background: @reno-secondary-background; 
@reno-offcanvas-search-background: #fff;
@reno-language-tab-background: transparent;
@reno-language-tab-color: @reno-text-color;
@reno-language-tab-current-background: #d2dce6;
@reno-language-tab-current-color: @reno-primary-headline-color;
@reno-language-tab-hover-background: @reno-muted-background;
@reno-language-tab-hover-color: @reno-text-color;
@reno-language-tab-empty-color: @reno-muted-text-color;
@reno-table-header-color: @reno-muted-text-color-alternate;
@reno-table-header-current-color: @reno-primary-background;

/****************************************************************
 * General admin theme variables
 * 
 * These mostly map @reno variables to Uikit and @pw admin them
 * variables. These are not likely to need edits if making 
 * adjustments to the theme colors. 
 *
 */

// Global colors
@global-color: @reno-text-color;
@global-primary-background: @reno-primary-background;
@global-secondary-background: @reno-secondary-background;
@global-secondary-color: @reno-text-color;
@global-link-color: @reno-link-color;
@global-link-hover-color: @reno-link-hover-color;
@global-muted-background: @reno-muted-background;
@global-muted-color: @reno-muted-text-color;
@global-success-background: @reno-success-background;
@global-warning-background: @reno-warning-background;
@global-danger-background: @reno-danger-background;

// Alert colors
@alert-primary-background: @reno-alert-background;
@alert-primary-color: @reno-alert-color;
@alert-danger-background: @reno-danger-background;
@alert-danger-color: @reno-danger-color;
@alert-warning-background: @global-warning-background;
@alert-warning-color: @reno-warning-color;

// Dropdowns and primary navigation
@dropdown-padding: 15px;
@pw-masthead-height: 73px; // note: must also be updated in _masthead.php "data-pw-height" attribute 
@pw-dropdown-color: @reno-dropdown-color;
@pw-dropdown-background: @reno-dropdown-background;
@pw-dropdown-nav-item-color: @reno-dropdown-color;
@pw-dropdown-nav-item-hover-color: @reno-dropdown-color;
@pw-dropdown-nav-item-hover-background: @reno-dropdown-hover-background;
@pw-dropdown-separator-color: lighten(@reno-dropdown-border-color, 7%);
@pw-dropdown-highlight-color: #fff; 
@pw-dropdown-highlight-background-color: @dropdown-background;
@pw-dropdown-nav-font-size: @dropdown-nav-font-size;
@pw-dropdown-nav-icon-color: @reno-dropdown-nav-icon-color;
@pw-dropdown-box-shadow: 0 1px 7px rgba(0,0,0,0.175);
@pw-dropdown-min-width: @dropdown-min-width;
@pw-dropdown-line-height: 1em;
@pw-dropdown-list-padding-vertical: 10px;
@pw-dropdown-list-padding-horizontal: 0;
@pw-dropdown-item-padding-vertical: 0.5em;
@pw-dropdown-item-padding-horizontal: @dropdown-padding;
@pw-dropdown-list-border-radius: 0;
@navbar-nav-item-text-transform: none;
@navbar-nav-item-font-size: 16px;

// Buttons
@button-font-size: 16px; 
@button-text-transform: capitalize;
@button-text-color: @global-link-color; // text-only button
@button-text-hover-color: @global-link-hover-color; // text-only button
@pw-button-background: @reno-button-background;
@pw-button-color: @reno-button-text-color;
@pw-button-hover-background: @reno-button-hover-background;
@pw-button-secondary-background: @reno-button-secondary-background;
@pw-button-secondary-hover-background: @reno-button-hover-background;

// Form and inputfields
@pw-inputfield-border: @reno-inputfield-border;
@pw-inputfield-repeater-background: @global-muted-background;
@pw-inputfield-repeater-background-none: @pw-inputfield-repeater-background;
@pw-inputfield-color-primary: @reno-primary-headline-color;
@pw-inputfield-background-primary: lighten(@reno-primary-headline-color, 70%);
// @pw-inputfield-border-primary: 1px solid @pw-inputfield-background-primary;
@pw-inputfield-color-warning: @reno-warning-color;
@pw-inputfield-background-warning: lighten(@reno-warning-background, 20%);
@pw-inputfield-background-danger: lighten(@reno-danger-background, 50%);
@pw-inputfield-header-color: @reno-text-color;
@pw-inputfield-header-collapsed-color: @reno-muted-text-color-alternate;
@pw-inputfield-header-hover-color: @reno-muted-text-color-alternate;
@pw-inputfield-header-collapsed-hover-background: @reno-muted-background;
@form-radio-checked-background: @reno-form-radio-checked-background;
@form-radio-checked-focus-background: darken(@form-radio-checked-background, 7%);

// jQuery UI
@pw-ui-widget-overlay-background: rgba(0,0,0,0.8);
@pw-datepicker-background: @reno-dark-background;

// Page list
@pw-page-list-text-color: @global-color;
@pw-page-list-muted-text-color: @global-muted-color;
@pw-page-list-link-color: @reno-page-list-link-color;
@pw-page-list-link-active-color: @global-link-color;
@pw-page-list-link-hover-color: @global-link-hover-color;
@pw-page-list-link-open-color: @reno-page-list-link-open-color;
@pw-page-list-link-open-background-color: inherit;
@pw-page-list-icon-color: @reno-page-list-icon-color;
@pw-page-list-status-icon-color: #a9adb5;
@pw-page-list-action-link-color: @reno-page-list-action-link-color;
@pw-page-list-action-link-background-color: @reno-page-list-action-link-background-color;
@pw-page-list-action-link-hover-color: @reno-page-list-action-link-hover-color;
@pw-page-list-action-link-hover-background-color: @reno-page-list-action-link-hover-background-color;

// Tabs
@tab-margin-horizontal: 0;
@tab-item-padding-horizontal: 20px;
@tab-item-padding-vertical: 10px;
@tab-item-color: @global-link-color;
@tab-item-hover-color: @global-link-hover-color;
@tab-item-hover-text-decoration: none;
@tab-item-active-color: @global-emphasis-color;
@tab-item-disabled-color: @global-muted-color;
@tab-border-width: @global-border-width;
@tab-border: @global-border;
@tab-item-border-width: @global-border-width;
@tab-item-font-size: 16px;
@tab-item-text-transform: none;
@tab-item-active-border: @global-link-color;
@tab-item-active-background: #fff;

// Offcanvas bar
@offcanvas-bar-color-mode: dark;
@offcanvas-bar-padding-vertical-m: @offcanvas-bar-padding-vertical;
@offcanvas-bar-padding-horizontal-m: @offcanvas-bar-padding-horizontal;

// Sidebar
@pw-sidebar-nav-border-color: darken(@reno-offcanvas-background, 4%);
@pw-sidebar-nav-nested-border-color: @reno-offcanvas-background;
@nav-parent-icon-color: darken(@reno-offcanvas-background, 12%); 

// Dialog modal windows
@pw-dialog-titlebar-background: @reno-masthead-background;
@pw-dialog-titlebar-color: #fff;

// Breadcrumb
@breadcrumb-divider-margin-horizontal: 15px;

// Table
@pw-table-header-color: @reno-table-header-color;
@pw-table-header-current-color: @reno-table-header-current-color;

/**********************************************************************
 * Styles
 *
 * Adjustments to the default Uikit admin theme styles to give more 
 * the look and feel of AdminThemeReno. 
 *
 */

.hook-base-h2,
.hook-base-h3,
.hook-base-h4 {
  color: @reno-secondary-headline-color;
}

// Tabs ---------------------------------------------------------------

.hook-tab-item {
  border: 1px solid transparent;
  margin-left: -1px;
}

.hook-tab-item-active() { 
  border: @pw-inputfield-border;
  border-bottom-color: #fff;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.langTabs .ui-tabs-nav,
.langTabs .uk-tab {
  // using a different styling for language tabs in this theme
  > li {
    background: transparent; 
    border: none;
    margin: 3px 0 3px 0;
    padding: 0 !important;
    &:first-child {
      // margin-left: 1px;
    }
    &.langTabEmpty > a {
      color: @reno-language-tab-empty-color;
    }
    > a {
      margin: 0 1px 0 0;
      display: inline-block;
      border: none;
      border-radius: 0;
      color: @reno-language-tab-color;
      background: @reno-language-tab-background;
      padding: 4px 15px;
      font-size: @pw-tiny-font-size;
      text-transform: uppercase;
    }
    > a:hover {
      color: @reno-language-tab-hover-color;
      background: @reno-language-tab-hover-background;
    }
    &.uk-active > a {
      color: @reno-language-tab-current-color;
      background: @reno-language-tab-current-background;
    }
  }
}

.WireTabs.uk-tab > li.uk-active.pw-tab-muted {
  background: @reno-muted-background;
  > a {
    border-bottom: none;
  }
}

// Pagination ---------------------------------------------------------

.hook-pagination-item() {
  color: @reno-text-color; 
  background: @reno-muted-background;
  border: @pw-inputfield-border;
}
.hook-pagination-item-hover() {
  color: @reno-text-color;
  background: darken(@reno-muted-background, 5%); 
  border: @pw-inputfield-border;
}
.hook-pagination-item-active() {
  &, a {
    background: @reno-link-color;
    color: @global-inverse-color;
    border: @pw-inputfield-border;
    border-color: @reno-link-color;
  }
}
.hook-pagination-item-disabled() {
  padding-left: 0;
  padding-right: 0;
  color: @reno-muted-text-color;
  background: none;
}
.uk-pagination > li,
.PageList > .uk-pagination > li {
  padding: 0;
  margin-left: -1px;
  > a {
    border-radius: 0;
  }
  &:first-child > a {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
  }
  &:last-child > a {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
  }
  &.uk-disabled > span {
    border: none;
    color: @reno-muted-text-color;
    padding-left: 5px;
    padding-right: 5px;
  }
}
.PageList > .uk-pagination > li {
  margin: 0 0 0 -1px;
  > .PageListLoading {
    border: none;
    display: inline-block;
  }
  &:first-child > a {
    margin-left: 3px;
  }
  > a {
    border: @pw-inputfield-border !important;
  }
  &.uk-active > a {
    border-color: @reno-link-color !important;
    background: @reno-link-color;
  }
}

// Masthead and dropdowns ------------------------------------------

#pw-masthead-mobile {
  background-color: @reno-masthead-background;
}

#pw-masthead {
  background-color: @reno-masthead-background;
  .uk-navbar-nav {
    > li {
      position: relative;
      &, > a {
        color: @reno-masthead-link-color;
        i {
          color: @reno-masthead-icon-color;
        }
      }
      &.uk-active,
      &.uk-active > a {
        color: @reno-masthead-link-current-color;
      }
      & > a.hover,
      & > a:hover {
        color: @reno-masthead-link-hover-color;
        i {
          color: @reno-masthead-link-hover-color;
        }
      }
      &.uk-active > a,
      & > a.hover,
      & > a:hover {
        &:after {
          // white triangle
          content: " ";
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 0 6px 7px 6px;
          border-color: transparent transparent @reno-dropdown-background transparent;
          position: absolute;
          bottom: -1px;
          left: 40%;
          z-index: 99;
        }
      }
      & > a.hover:after,
      & > a:hover:after {
        // white triangle: hovered only
        z-index: 200;
      }
      
      /*
      &.uk-active > a:not(.hover):not(:hover):after {
        border-color: transparent transparent rgba(255,255,255,0.5) transparent;
      }
      */
    }
  }
  
  .pw-search-form {
    .pw-search-input {
      color: @reno-masthead-search-text-color;
      background: @reno-masthead-search-background;
      border-color: @reno-masthead-search-border-color;
      border-radius: 5px;
      &:focus {
        color: @reno-masthead-search-focus-text-color;
        border-color: @reno-masthead-search-focus-border-color;
        background: @reno-masthead-search-focus-background;
      }
    }
    .uk-form-icon {
      color: @reno-masthead-search-icon-color;
    }
  }
}

ul.pw-dropdown-menu,
ul.ui-menu {
  border: @reno-dropdown-border;
  margin-top: -2px;
  // border-top: none;
  > li.ui-menu-item > ul.ui-menu {
    border: @reno-dropdown-border !important;
  }
}

// Notices ----------------------------------------------------

.pw-notices {
  margin-top: 0;
  > li {
    margin: 0;
  }
  .NoticeMessage {
    border-bottom: 1px solid @global-muted-background;
    a.notice-remove {
      color: @global-color;
    }
  }
  .NoticeWarning,
  .NoticeError {
    border-bottom: 1px solid #fff;
    a.notice-remove {
      color: #fff;
    }
  }
}

// Offcanvas -------------------------------------------------

#offcanvas-toggle {
  cursor: pointer;
  > i {
    color: @reno-masthead-icon-color;
  }
  &:hover > i {
    color: @reno-masthead-link-color;
  }
}

#offcanvas-nav {
  color: @reno-offcanvas-text-color;
  .uk-offcanvas-bar {
    background: @reno-offcanvas-background;
    padding: 0;
    box-shadow: 0 4px 7px rgba(0,0,0,0.175);
    border-right: 1px solid darken(@reno-offcanvas-background, 10%); 
  }
  #offcanvas-nav-header {
    display: none;
  }
  .pw-sidebar-nav {
    li > a {
      padding-left: 20px;
      padding-right: 20px;
      color: @reno-offcanvas-link-color;
      &:hover {
        color: @reno-offcanvas-link-hover-color;
      }
    }
    li.uk-open {
      padding-bottom: 0;
      background: lighten(@reno-offcanvas-background, 3%);
      > a {
        color: @reno-offcanvas-link-open-color;
      }
    }
    li.pw-nav-spinner {
      padding-left: 20px;
    }
  }
  .pw-search-form {
    padding: 20px 20px 5px 20px;
  }
  .pw-search-input {
    background: @reno-offcanvas-search-background;
    border-radius: 5px;
  }
  .pw-logo {
    display: none;
  }
}

// Other ---------------------------------------------------------

html.pw-sidebar-frame,
html.pw-sidebar-frame body {
  background: @global-muted-background;
  #main {
    background: @global-muted-background;
  }
}

.Inputfields {
  // background color for text fields
  input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not(.uk-form-blank),
  textarea:not(.uk-form-blank) {
    background-color: @reno-inputfield-input-background;
    border: 1px solid; 
    border-color: @reno-inputfield-input-border-color;
    -webkit-appearance: none;
    &:focus {
      background-color: lighten(@reno-inputfield-input-background, 2%);
      border-color: @reno-inputfield-input-border-color;
    }
  }
  select.uk-select:not(.uk-form-blank) {
    // border-radius: 3px;
    background-color: @reno-inputfield-select-background;
    border: 1px solid;
    border-color: @reno-inputfield-select-border-color;
    -webkit-appearance: none;
    &:focus {
      background-color: lighten(@reno-inputfield-select-background, 2%);
      border-color: @reno-inputfield-select-border-color;
    }
  }
  input.uk-form-blank:focus,
  textarea.uk-form-blank:focus {
    background-color: lighten(@reno-inputfield-select-background, 2%);
  }
}
img.pw-logo {
  max-height: 40px;
}
img.pw-logo-native {
  &:hover {
    filter: brightness(0) invert(1);
  }
}

#pw-content-head {
  h1 {
    color: @reno-primary-headline-color;
  }
}

.uk-breadcrumb {
  padding-bottom: 0; 
}

#main .notes {
  color: @reno-notes-text-color !important;
  background: @reno-notes-background;
}

#pw-footer {
  padding-top: 20px;
  border-top: @pw-inputfield-border;
}