Subversion Repositories web.active

/**
 * common.scss contains the bulk of styles common to all Reno color themes
 *
 */

$regular-font: "Helvetica Neue", Arial, sans-serif;
$normal-weight: normal; 
$bold-weight: 700; 
$button-radius: 3px; 
$tabs-radius: 3px; 
$tabs-height: 2.5em; 
$tabs-font-weight: normal;
$base-font-size: 0.95em;
$base-line-height: 1.6em; 
$footer-font-size: 0.875em; 
$form-top-margin-adjustment: -2px; 
$container-max-width: 1200px;
$box-shadow: 0 1px 4px rgba(0,0,0,0.4);
$speed: 250ms;
$wide-screen-width: 1200px; 
$mainnav-width: 210px; 
$mainnav-width-wide: 230px; // bigger sidebar for wide screen?
$masthead-height: 52px;

//noinspection CssInvalidPropertyValue
@mixin word-wrap() {
  overflow-wrap: break-word;
  word-break: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

@import 'reset';
@import 'jquery-ui';
@import 'ui';
@import 'notifications';
@import 'inputfields';
@import 'lang';
@import 'masthead';
@import 'sidebar';
@import 'search';
@import 'pagination';
@import 'logs';


/***********************************************************************************************
 * GENERAL
 *
 */

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  height: 100%; // required for sidebar nav
  -webkit-font-smoothing: subpixel-antialiased;
}

body {
  background: $body-bg;
  font-size: 100%;
  text-rendering: optimizeLegibility;
  position: relative;
}

#wrap {
  position: relative; // required for sidebar nav
  min-height: 100%; // required for sidebar nav
}

body,
.ui-dialog,
.ui-button,
button,
input,
th, td,
textarea {
  font-weight: $normal-weight;
  font-family: $regular-font;

}
body {
  color: $text-color;
}
body.modal {
  background-color: $text-bg;
  margin-top: 1em;
}

body,
.ui-dialog {
  line-height: $base-line-height;
  font-size: $base-font-size;
}

.pw-container {
  position: relative;
  width: 100%;
  max-width: $container-max-width;
  margin: 0 auto;
}

a {
  /* standard link color */
  color: $link-color;
}
a:hover {
  /* hovered link color */
  color: $link-hover-color;
  background: $link-hover-bg;
}

a.on {
  /* on/active link color */
  background: $link-current-bg;
  color: $link-current-color;
}
a:active {
  color: $link-active-color;
  background: $link-active-bg;
}

.WireFatalError {
  background: $error-bg;
  color: $reverse-text-color;
  padding: 1em;
  position: relative;
  z-index: 999;
}

.pw-no-select {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none; /* prevent selection of this element */
}

/***********************************************************************************************
 * Font Awesome
 *
 */

.fa { font-size: 14px !important; } // font awesome renders best at 14px.
.fa-lg { font-size: 22px !important; }
.fa-2x { font-size: 28px !important; }
.fa-3x { font-size: 42px !important; }
.fa-4x { font-size: 56px !important; }
.fa-5x { font-size: 70px !important; }

/***********************************************************************************************
 * Login Screen
 *
 */

body.id-23 {
  #sidebar,
  #breadcrumbs,
  #topnav,
  .main-nav-toggle {
    display: none
  }
  #main {
    margin-left: 0
  }

  #logo {
    margin-left: 1.5em;
  }
}

/***********************************************************************************************
 * Main container
 *
 */

#main {
  margin-left: $mainnav-width;
  background: $main-bg;
  position: relative;

  @media only screen and (min-width: $wide-screen-width) {
    margin-left: $mainnav-width-wide;
  }

  &.closed, &.full {
    margin-left: 0;
  }
}

/***********************************************************************************************
 * Breadcrumb Navigation
 *
 */
#breadcrumbs {
  padding: $breadcrumbs-padding;
  color: $breadcrumbs-color;
  background: $breadcrumbs-bg;
  border-top: $breadcrumbs-border-top;
  border-bottom: $breadcrumbs-border-bottom;

  ul {

    li {
      color: $breadcrumbs-color;
      display: inline-block;
      padding: 0;
      line-height: 1em;
      white-space: nowrap;
      padding-right: 0.5em;
      font-size: 1em;
    }

    li.title {
      color: $breadcrumbs-title-color;
      font-weight: $bold-weight;
    }

    a {
      color: $breadcrumbs-link-color;
      margin-right: 0.5em;
    }

    a:hover {
      color: $breadcrumbs-link-hover-color;
      background: none;
      text-decoration: underline;
    }

    a.sitelink {
      float: left;

      .ui-icon {
        float: left;
        position: relative;
        top: -2px;
      }
    }

    i.fa, i.fa-lg{
      font-size: 14px !important;
    }

    & #ProcessListerSpinner i{
      position: static;
    }
  }

}


#headline{
  background: $headline-bg;
  padding: $headline-padding;

  #title {
    font-size: 1.9em;
    line-height: 1em;
    margin: 0;
    padding: 0;
    color: $headline-color;
    padding-right: 3em;
  }

}

/***********************************************************************************************
 * CONTENT
 *
 */

#content {
  position: relative;
  padding: 1.8em 1.5em 3.5em 1.5em;
  width: 100%;
}
#content .pw-container {
  min-height: 50px;
}
#content .pw-container > form,
#content .pw-container > .ui-helper-clearfix > form {
  position: relative;
  top: -1px;
}

#head_button {
  /* The main/primary button for a listing screen, appears in the masthead */
  float: right;
  margin: 0;
  position: relative;
  top: -0.35em;

  button {
    font-size: 1.3em;
    margin-right: 0;
    margin-left: 10px;
    margin-top: 0;
    float: right;
    border: none;
  }

  button.pw-button-dropdown-toggle {
    margin-left: 0;
  }
}

ul.action-group{
  li {
    float: left;
    margin: 0;
    a {
      display: block;
      border: 1px solid $border-color;
      padding: 0.3em 1em;
      border-radius: $button-radius;
      font-size: 0.875em;
      color: $action-group-link-color !important;

      &:hover{
        border-color: darken($border-color, 10);
        text-decoration: none !important;
        color: $text-color !important;
      }
      i.fa{
        color: $action-group-icon-color !important;
      }
    }
  }
}

#action_icons span{
  border-radius: $button-radius;
  color: $button-secondary-color !important;
  background: $button-secondary-bg !important;

  &:hover{
    color: $button-color !important;
    background: $button-bg !important;
  }
}

.pw-content {

  img {
    display: block;
  }

  .nav a.label {
    font-size: 1em;
  }

  p,
  ul
  ol,
  table {
    margin: 1em 0;
  }

  table th,
  table th.header,
  table.AdminDataList th,
  h4 {
    color: $table-th-color;
  }

  table.AdminDataList th {
    font-size: 0.8em;
  }

  .pw-container > table.AdminDataList {
    margin-top: 1em;
  }

  h2 {
    margin: 0 0 0.5em 0;
    font-size: 1.2em;
    line-height: 1.2em;

  }
  h2 a {
    text-decoration: underline;
  }
  h2 a:hover {
    color: $reverse-text-color;
    background: $link-hover-color;
    text-decoration: none;
  }

  h3 {
    margin: 1em 0;
    font-size: 1.2em;
  }

  h4 {
    margin: 1em 0 0.25em 0;
    font-weight: $bold-weight;
    font-size: 0.916666666666667em;
  }

  li {
    margin: 1em 0;
    display: block;
    list-style: disc;
  }

  ol li {
    display: list-item;
    list-style-type: decimal;
    margin-left: 1em;
  }

  /**
   * Actions: like the "|edit|view|new" in the PageList
   *
   */

  .PageList a {
    padding: 0 4px 0 4px;
    border-radius: 3px;
  }

  .PageListActions {
    margin-left: -2px;
  }

  .PageListStatusIcon {
    color: lighten($text-color, 40%);
  }

  ul.actions {
  }
  ul.actions li,
  .PageListActions li,
  li.action {
    border: none;
    padding: 0 1px;
    margin: 0;
    margin-right: 3px;

  }
  ul.actions li:first-child:before,
  .PageListActions li:first-child:before,
  li.action:first-child:before {
    content: "\203A";
    margin-right: 3px;
    color: lighten($text-color,50%);
  }


  li.action a, .actions a,
  .PageList .actions a,
  .PageListMoveNote a {
    /* action links */
    // color: $action-link-color; 
    // background: $action-link-bg;
    padding: 0 4px 0 4px;
    display: inline-block;
    font-size: $action-link-font-size;
    border-radius: 3px;
    border: $action-link-border !important;
    font-weight: normal;
    color: $action-link-color;
    background: $action-link-bg;
  }
  .actions a:hover,
  li.action a:hover,
  .PageListMoveNote a:hover {
    /* action links hovered */
    color: $action-link-hover-color !important;
    background: $action-link-hover-bg ;
    border: $action-link-hover-border;
  }

  .PageListMoveNote {
    text-transform: lowercase;
    cursor: move;
  }

  .PageListItem > a span {
    display: inline-block;
    & + span:before {
      content: " / ";
      color: $medium-text-color;
    }
  }

  .PageListActionMore a {
    margin-top: 0.5em;
  }

  .PageListSelectName {
    margin-right: 0.5em;
    i {
      margin-right: 0.25em;
    }
  }

  .PageList .PageListItem:hover .PageListActions {
    display: inline;
    -webkit-transition-delay: .25s;
    transition-delay: .25s;
  }


  /**
   * Content navigation like when on the root page of "templates" or "access"
   *
   */
  dl {
    margin: 1em 0;
  }
  .pw-container > dl:first-child {
    margin-top: 0;
  }
  dt,
  dt {
    display: block;
    font-weight: $bold-weight;
    padding-top: 0.75em;
  }
  dt a {
    text-transform: none;
    color: $alt-link-color;
  }
  dt a:hover {
    color: $link-hover-color;
  }
  dl dd {
    padding-bottom: 0.75em;
    border-bottom: 1px solid $border-color;
  }

  /**
   * PageList
   *
   */

  .PageListLoading{
    // PW 2.5.x only, can be removed when support is no longer needed
    background: none !important;
  }

  .PageList {

    .PageListID1{
      padding-top: 0 !important;
    }

    .PageListItem {
      border-bottom: 1px solid lighten($border-color, 4%);
      padding-top: 0.6em;
      padding-bottom: 0.6em;
      line-height: 1.3em;
    }
    .PageListPlaceholderItem {
      border: none;
      padding: 0;
    }

    a.PageListPage {
      color: $pagelist-link-color;
      opacity: 1.0;
    }
    .PageListItem > a.PageListPage:hover {
      text-decoration: underline;
      color: $pagelist-link-hover-color;
    }
    .PageListItem > a.PageListPage:active {
      text-decoration: underline;
      color: $pagelist-link-active-color;
    }
    .PageListItem > a.PageListPage i {
      padding: 0 0.25em 0 0;
      color: $pagelist-link-icon-color;
    }

    .PageListItem > a.PageListPage:hover i {
      text-decoration: none;
    }

    .PageListItemOpen > a.PageListPage  {
      color: $pagelist-link-open-color;
      background-color: $pagelist-link-open-bg;
    }

    //.PageListStatusHidden:not(.PageListItemOpen) > a.PageListPage {
    .PageListStatusHidden > a.PageListPage {
      opacity: 0.6;
    }

    .PageListNumChildren {
      font-size: 0.833333em;
    }

    .PageListItemOpen .PageListNumChildren {
    }


  }

  /* MarkupAdminDataTable */

  .AdminDataList thead th,
  .AdminDataList thead th.header,
  .AdminDataList tbody td,
  .AdminDataList tfoot td {
    border-left: 1px dotted darken($border-color, 5%);
    border-color: darken($border-color, 5%);
    padding: 0.5em;
  }

  .AdminDataList thead th:first-child,
  .AdminDataList thead th.header:first-child,
  .AdminDataList tbody td:first-child,
  .AdminDataList tfoot td:first-child {
    border-left: none;
    padding-left: 0;
  }

  .AdminDataList tbody td:nth-child(2),
  .AdminDataList tbody th:nth-child(2) {
    min-width: 80px;
  }

  .AdminDataList tr:hover td,
  .AdminDataList tr.open td {
    background: $table-tr-hover;
  }

  .AdminDataList tr:hover th {
    background: $table-th-hover;
  }

  .AdminDataList td a {
    color: $alt-link-color;
  }
  .AdminDataList td a:hover {
    color: $link-hover-color;
  }

  .AdminDataList th.headerSortUp,
  .AdminDataList th.headerSortDown,
  th.headerSortUp,
  th.headerSortDown,
  th:hover {
    color: $table-th-active-color;
  }

  .AdminDataList {
    margin-top: 0;
  }

  .AdminDataList th:hover,
  .AdminDataList th.tablesorter-header-inner:hover {
    text-decoration: none;
  }

  .AdminDataList small.buttons button {
    font-size: 1em !important;
  }

  /* AdminDataTableSortable */

  .AdminDataTableSortable th {
    &:after {
      content: "\f0dc";
      font-family: fontAwesome;
      margin: 0 0 0 5px;
      opacity: 0.6;
      font-weight: normal;
    }

    &.headerSortDown:after{
      content: "\f0dd";
    }

    &.headerSortUp:after{
      content: "\f0de";
    }
  }

  .AdminDataTableSortable{
    tr.tablesorter-headerRow th:after{
      content: none; // newer version of tablesorter has different markup.
    }

    tr.tablesorter-headerRow th {

      & .tablesorter-header-inner:after{
        content: " ";
        font-family: fontAwesome;
        margin: 0 0 0 5px;
        opacity: 0.6;
        font-weight: normal;
      }

      & .tablesorter-header-inner:empty:after{
        content: none !important;
      }

      &.tablesorter-headerUnSorted .tablesorter-header-inner:after {
        content: "\f0dc";
      }

      &.tablesorter-headerAsc .tablesorter-header-inner:after {
        content: "\f0dd";
      }

      &.tablesorter-headerDesc .tablesorter-header-inner:after {
        content: "\f0de";
      }

      &.tablesorter-headerAsc,
      &.tablesorter-headerDesc{
        color: $table-th-active-color;
      }
    }
  }

  /* template and field filters*/
  #filters, #field_filter_form{
    margin-bottom: 1.5em;
  }
}

#content {

  /**
   * WireTabs
   *
   */

  #PageEditTabs { margin-bottom: 0;}

  .WireTabs {
    left:0;
    top: 1px;
    width: 100%;
    // z-index: 100; 

    li {
      background: none;
      margin: 0;
      padding: 0;
      // padding: 0 2.0em 0 0;
    }

    a {
      font-weight: $tabs-font-weight;
      padding: .75em 1em;
      display: inline-block;
      border-top-color: transparent;
      border-right-color: transparent;
      border-bottom-color: transparent;
      border-left-color: transparent;
      border-width: 1px 1px 0 1px;
      border-style: solid;
      border-radius: 3px 3px 0 0;
      color: $link;
      // height: $tabs-height;
      //background: $wiretab-link-bg; 
      // position: relative;
      // top: 1px; 

      em {
        border-bottom: none;
      }
    }
    a.on {
      color: $dark-blue;
      border-top-color: $border-color;
      border-right-color: $border-color;
      border-bottom-color: $white;
      border-left-color: $border-color;
      background: $white;
      // border-bottom: 1px solid $wiretab-link-current-bg;
      // border-bottom: 2px solid $dark-link; 
      // position: relative;

      em {
        border-color: transparent;
      }
    }

    a:hover {
      // border: $wiretab-link-hover-border; 
      // border-bottom: none; 
      color: $wiretab-link-hover-color;
      // background: $wiretab-link-hover-bg; 

      em {
        border: none;
      }
    }

    a em {
      font-weight: $tabs-font-weight;
      font-style: normal;
    }

    #_ProcessPageEditView {
      color: $link-color;
      font-weight: normal;
    }
    #_ProcessPageEditView:hover {
      background: none;
      text-decoration: underline;
      border-color: transparent;
    }

    i.ui-priority-secondary{
      background: none !important;
      color: $link !important;
    }

  }

  & p.description {
    color: $description-color;
    margin-bottom: 0.5em;
  }

  & > p.description{
    margin-top: 0; // no top margin if first item in #content.
  }
}

.detail {
  color: $description-color;
}

.notes,
.detail {
  font-size: 0.875em;
  line-height: 1.5em;
}
.notes {
  background: $notes-bg;
}
.description,
.notes {
  @include word-wrap();
}

.description strong,
.notes strong {
  color: $description-color;
  font-weight: $bold-weight;
}

.error {
  background: $error-bg;
  color: $error-color;
  font-weight: $bold-weight;
  font-size: 0.9166666em;
}

#ProcessTemplateList .InputfieldMarkup{
  margin-bottom: -1px !important;
}

#ProcessTemplateList > .Inputfields{
  margin-bottom: 1em !important;
}

/****************************************************************************
 * ProcessLister
 *
 *
 */

#ProcessListerResultsTab{
  padding-top: 0 !important;
}

#ProcessListerResults{
  padding: 20px;
  border: 1px solid #d9e1ea;
  margin-bottom: 20px;

  &:after {
    content: "";
    display: table;
    clear: both;
  }

  & .MarkupPagerNav{
    margin-top: 0;
  }

  & p.notes{
    float: left;
    clear:both;
  }

  & #lister_open_cnt {
    margin-left: 1em;
    font-size: 0.8em;
  }

}

body.modal-inline #ProcessListerResults {
  padding: 0;
  border: none;
  margin-bottom: 0;
}

/***********************************************************************************************
 * FOOTER
 *
 */

#footer {
  margin: 0;
  padding: 1em 1.5em 2em 1.5em;
  border-top: 1px solid $border-color;

  a {
    margin: 0 0 0 1em;
  }
  #debug_toggle {
    margin-left: 0;
  }

  #userinfo {
    display: block;
    float: right;
  }
  
  #debug {
    margin-top: 2em;
  }

}

#footer, #debug {
  font-size: $footer-font-size;
  color: $footer-color;
  background: $footer-bg;
  
  p {
    margin-top: 0;
  }

}

#debug {

  .pw-container {
    width: 100%;
  }

  p {
    margin: 1em 0;
  }

  ol {
    margin: 1em 0;
  }

  h3, h4 {
    font-weight: $bold-weight;
  }

  table {
    width: 100%;

    th {
      font-weight: $bold-weight;
    }

    td, th {
      vertical-align: top;
      padding: 3px 5px;
      border-bottom: 1px dotted $light-text-color;
      border-left: 1px dotted $light-text-color;
      font-size: 12px;
    }

  }
}

.pw-panel-content #debug {
  padding: 0.25em 0.75em 0.25em 0.25em;
}

/***********************************************************************************************
 * MODAL
 *
 */

html.modal, body.modal {
  height: auto !important;
}

body.modal {

  .pw-container {
    margin: 0;
    width: 100%;
    min-width: 300px;
    padding-left: 1.5em;
    padding-right: 1.5em;
  }

  #notices {
    margin: 0.5em 0 0.25em 0;
    padding: 0 20px 10px 20px;
  }

  #content {
    padding: 0 20px 20px 20px;
  }

  .pw-content h2 {
    margin: 1em 0;
    font-size: 1.2em;
    color: $medium-text-color;
  }

  #main {
    margin: 0;
  }

  #wrap {
    min-height: 0;
  }

  #footer,
  #masthead,
  #breadcrumbs,
  #headline,
  #sidebar,
  #branding,
  #search,
  .main-nav-toggle {
    display: none;
  }

  & .pw-content #fieldgroupContext {
    /* context selection in field editor */
    top: 0 ;
    right: 1.5em;
  }

}

body.modal-inline {
  /* modal content in a frame/iframe that needs no padding/margins/borders around it */
  #content {
    padding: 0; 
  }
  .pw-container {
    padding-left: 0;
    padding-right: 0;
  }
}


/***********************************************************************************************
 * MISC
 *
 */

body.id-3:not(.hasUrlSegments) #breadcrumbs ul li:not(:first-child):not(:last-child),
body.id-23 #breadcrumbs ul li:not(:first-child):not(:last-child),
body.id-8:not(.hasUrlSegments) #breadcrumbs ul li:not(:first-child):not(:last-child) {
  /* hide extraneous breadcrumbs when in admin root */
  display: none;
}

#content .pw-container > form,
#content .pw-container > .ui-helper-clearfix > form {
  /* for wiretabs and/or forms to line up with headline area */
  top: $form-top-margin-adjustment;
}

body:not(.hasWireTabs) #headline .pw-container {
  min-height: 40px;
}

.pw-content > .pw-container > #PageListContainer {
  margin-top: 0;
}

.pw-content #fieldgroupContext {
  /* context selection in field editor */
  top: 1.5em;
  right: 1.5em;
  z-index: 9;
}

#ModuleEditForm .AdminDataTable tr td:first-child {
  color: $medium-text-color;
}

#addLinksMenu {
  min-width: 150px;
}

.align_left,
.align-left {
  float: left;
  margin: 0 1em 0.5em 0;
}

.align_right,
.align-right {
  float: right;
  margin: 0 0 0.5em 1em;
}

.align_center,
.align-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

body.pw-init .toggle-icon {
  display: none; 
}


/***********************************************************************************************
 * MEDIA QUERIES
 *
 */

@media only screen and (max-width: 959px) {}

@media only screen and (min-width: 768px) and (max-width: 959px) {}

@media only screen and (max-width: 767px) {

  #masthead {
    padding-top: 0;
  }

  #masthead #topnav {
    // float: left; 
  }

  body #content .WireTabs li a {
    padding-left: 0.75em;
    padding-right: 0.75em;
  }

  #fieldgroupContext {
    display: none;
  }

  .AjaxUploadDropHere {
    display: none !important;
  }

// convert tabs to pills at smaller widths where there might be multiple lines.
  body #content .WireTabs {
    margin: 0 0 0.5em 0;
    li {
      a {
        border: none;
        padding: 0.3em 1em;
        border-radius: 3px;
        margin: 0 0 0.5em 0;
        &.on {
          background: $link-color;
          color: $reverse-text-color;
        }
      }
    }
  }
}

@media only screen and (max-width: 720px) {

  #masthead{
    padding-right: 0;
  }

  #masthead #topnav li.avatar > a > img {
    margin: 0 !important;
  }

  #masthead #topnav li.avatar > a > span{
    display: none !important;
  }

  #masthead #topnav li.avatar > a > i.fa {
    display: inline-block;
  }

  #masthead #topnav li.pw-dropdown:not(.superuser) > a:after{
    margin-left: 3px;
  }

  /**
   * Disregard column width when at mobile size
   *
   */
  .Inputfield {
    clear: both !important;
    width: 100% !important;
    margin-left: 0 !important;
    
    .maxColHeightSpacer {
      // no need to adjust column height when Inputfields are collapsed
      display: none;
    }

  }

  .InputfieldHeader,
  .InputfieldContent {
    margin-left: 0 !important;
  }

  .pw-container {
    width: 100%;
  }
  #footer #userinfo {
    float: none;
  }
}

@media only screen and (max-width: 500px) {
  
  #ProcessPageSearchQuery {
    //padding-right: 0 !important;
    //width: 160px !important;
  }

}

@media only screen and (max-width: 480px) {

  #branding {
    width: 100%;
  }

  #sidebar{
    width: 100%;
  }

  .main-nav-toggle{
    border-right: $topnav-border;
    &:not(.closed){
      left: 85%;
      width: 15%;
      z-index: 12;
    }
  }

  #main{
    margin-left: 0;
  }

  // hack to prevent iOS zoom on focus.
  // Apparently does not work in iOS8, with no solition other than to disable zoom altogether.
  // Leaving this here for iOS < 8
  #ProcessPageSearchQuery {
    font-size: 16px; 
  }

  #headline{
    #title {
      font-size: 1.5em;
      line-height: 1.4em;
    }
  }

  #NotificationBug {
    left: 90px !important;
  }

}

@media only screen and (max-width: 380px) {

  #ProcessPageSearchForm,
  #ProcessPageSearchAutocomplete.ui-autocomplete{
    width: 80%;
  }

}

@media only screen and (max-width: 320px) {

  #content, #headline, #breadcrumbs {
    padding: 0.875em;
  }

}

@media only screen and (max-width: 300px) {

  #masthead #topnav li a {
    padding-left: 0.9em;
    padding-right: 0.9em;
  }

}