buzzerstar - static - plugins - Morpheus - SOURCE CODE

// Gray shapes
// Variable pattern: @color-<color>-<modifier>
@color-black:       #000;
@color-gray:        #ccc;
@color-gray-light:  #f0f0f0;
@color-white:       #fff;
@color-silver:      #999;
@color-silver-l14:  lighten(@color-black, 14%);
@color-silver-l20:  lighten(@color-black, 20%);
@color-silver-l30:  lighten(@color-black, 30%);
@color-silver-l40:  lighten(@color-black, 40%);
@color-silver-l50:  lighten(@color-black, 50%);
@color-silver-l60:  lighten(@color-black, 60%);
@color-silver-l70:  lighten(@color-black, 70%);
@color-silver-l80:  lighten(@color-black, 80%);
@color-silver-l85:  lighten(@color-black, 85%);
@color-silver-l90:  lighten(@color-black, 90%);
@color-silver-l95:  lighten(@color-black, 95%);
@color-silver-l98:  lighten(@color-black, 98%);
@color-silver-dark: #333;

// Brand colors
// Variable pattern: @color-<color>-<modifier>
@color-black-piwik:               #0d0d0d;
@color-blue-piwik:                #4183C4;
@color-red-piwik:                 #d4291f;
@color-green-brandSocial:         #009874;
@color-blue-brandSocial:          #3b5998;
@color-blue-brandSocialLight:     #1c87bd;
@color-blue-brandSocialVeryLight: #00aced;
@color-orange-brand:              #ff9600;

@graph-colors-data-series1: #d4291f;
@graph-colors-data-series2: #1f78b4;
@graph-colors-data-series3: #ff7f00;
@graph-colors-data-series4: #33a02c;
@graph-colors-data-series5: #6a3d9a;
@graph-colors-data-series6: #b15928;
@graph-colors-data-series7: #fdbf6f;
@graph-colors-data-series8: #cab2d6;
/*
Qualitative data color series inspired from colorbrewer2.org/
next ones could be: #cab2d6 #ffff99 # #b2df8a
*/

.clearfix {
  *zoom: 1;
  &:after {
    content: "";
    display: table;
    clear: right;
  }
  &:before {
    content: "";
    display: table;
  }
}

.font-default(@size: 13px, @line: 16px) {
  font-family: @theme-fontFamily-base;
  font-size: @size;
  line-height: @line;
}

.border-radius (@radius: 6px) {
    -webkit-border-radius: @radius;
    -moz-border-radius:    @radius;
    border-radius:         @radius;

    -moz-background-clip:    padding;
    -webkit-background-clip: padding-box;
    background-clip:         padding-box;
}

#gradient {

  .horizontal(@start-color: #555, @end-color: #333, @start-percent: 0%, @end-percent: 100%) {
    background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+
    background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
    background-image:  linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
    background-repeat: repeat-x;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@start-color,@end-color)); // IE9 and down
  }

  .vertical(@start-color: #555, @end-color: #333, @start-percent: 0%, @end-percent: 100%) {
    background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(top, @start-color, @start-percent, @end-color, @end-percent); // Safari 5.1+, Chrome 10+
    background-image:  -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
    background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
    background-repeat: repeat-x;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@start-color,@end-color)); // IE9 and down
  }
}


... [truncated, 12 more lines] ...

.ui-state-highlight {
    border-color: @color-silver-l80 !important;
    background: @color-silver-l95 !important;
    .ui-icon {
        background-image: url('plugins/Morpheus/images/info.png');
        background-position: 0 0;
    }
}

.adminTable {
    td {
        padding: 2px 0;
    }
    label {
        cursor: pointer;
        min-height: 30px;
    }
}

.sites_autocomplete  {
    vertical-align: middle;
}

.adminTable a {
    color: @theme-color-link;
}

.admin .adminTable a {
  color: @theme-color-text;
  text-decoration: underline;
}

.admin .adminTable .ui-inline-help a {
  color: @theme-color-link;
  text-decoration: none;
}

.addRowSite,
.addrow {
    cursor: pointer;
}

.addrow:hover {
  text-decoration: underline;
}

.addrow {
    margin-top: 16px;
}

... [truncated, 18 more lines] ...

/* reset style */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

abbr {
    border-bottom: 1px dotted;
}

form {
    margin: 0;
}

body {
    line-height: 1.33;
    background-color: white;
    color: #333;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

/* remember to define focus styles! */
:focus {
    outline: thin dotted;
}

a:focus {
    outline: thin dotted;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}

del {
    text-decoration: line-through;
}

... [truncated, 23 more lines] ...

.submit {
  clear: both;
  font-size: 18px;
  border: 0;
  float: right;
  margin: 12px 0 10px 0;
  cursor: pointer;
}

/* on admin screen, Save button aligned on the left */
.admin .submit {
  margin-left: 0px;
  margin-top: 20px;
  float: none;
}

.admin .entityContainer .submit {
  margin: 0;
  margin-top: 20px;
}

.entityContainer .link_but {
  white-space: nowrap;
  display: inline-block;
  margin: 0 10px 0 0;
  text-decoration: none;
}

.entityContainer .link_but img {
  white-space: nowrap;
  margin: 0 1px 0 0 !important;
}

.entityAddContainer .entityTable th, #entityEditContainer .entityTable th, #entityEditContainer .entityTable td {
  vertical-align: middle !important;
}

.entityAddContainer .entityTable tr td.first {
  font-weight: bold;
  vertical-align: top !important;
}

.entityAddContainer tr:hover {
  background: none !important;
}

/* Add / Edit / List entities */
.entityContainer {
  width: 100%;
  max-width: 850px;

... [truncated, 86 more lines] ...

form {
    margin-bottom: 30px;
}

label {
    cursor: pointer;
}

input:not([type="checkbox"]):not([type="submit"]):not([type="button"]), select, textarea {
    border: 1px solid #d4d4d4;
    font-size: 14px;
    color: @theme-color-text-lighter;
    .border-radius(2px);
    margin-left: 0;
    padding: 10px 12px;
    min-height: 20px;
    .box-sizing(border-box);
    background: @theme-color-background-base;
}
input:not([type="checkbox"]):not([type="submit"]):not([type="button"]), textarea {
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -moz-box-shadow:    inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow:         inset 0 1px 1px rgba(0,0,0,.075);
}
input[disabled] {
    background: #F5F5F5 none !important;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: @theme-color-background-base;
    background-image: url("plugins/Morpheus/images/select_arrow.png");
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 30px;
}
// This class/mixin allows to restore the native style of selects when needed
.native-select {
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    appearance: menulist;
    padding: 4px 4px;
    background: none;
}

.form-group {
    width: 100%;
    margin-bottom: 15px;

... [truncated, 442 more lines] ...

/* jQuery Tooltip */
#tooltip h3 {
  font-weight: normal;
  font-size: .85em;
  font-style: italic;
  color: #162540;
  margin: 0;
  padding: 0;
}

#tooltip {
  position: absolute;
  z-index: 3000;
  border: 1px solid #E4E2D7 /*#111*/;
  padding: 5px 7px 5px 7px;
  background-color: #F5F7FF;
  opacity: 0.95;
}

/* jQuery Ajax */
.ajaxError {
  color: red;
  text-align: center;
  font-weight: bold;
  width: 550px;
  border: 3px solid red;
  margin: 10px;
  padding: 10px;
  border-radius: 9px;
}

.ajaxSuccess {
  font-size: 14px;
  margin: 10px;
  padding: 15px;
  color: #301901;
  display: inline-block;
  background-color: #ffffe0;
  border: 1px solid #e6db55;
  border-radius: 3px;
}

/* extending the jquery UI css, for visitor Log popover */
.ui-widget .dataTable {
  font-size: 14px;
}

/* for inline help */
.ui-widget {
  text-align: justify;

... [truncated, 234 more lines] ...

#topApiRef {
    color: #95AECB;
}

.section-toggler-link {
  font-size: .8em;
  font-style: italic;
  text-decoration: none;
}

.section-toggler-link:hover {
  text-decoration: underline;
}

.metricEvolution {
  display: inline-block;
  font-size: 9pt;
  opacity: 0.75;
}

.metricEvolution > .positive-evolution {
  color: green;
}

.metricEvolution > .negative-evolution {
  color: #e02a3b;
}

.reportsByDimensionView > .entityList {
  float: left;
  width: 220px;
  min-height: 450px;
}

.dimensionCategory {
  margin-top: 10px;
}

h1, h2, h3, h4, h5 {
    font-family: @theme-fontFamily-base;
}

a {
    color: @theme-color-link;
    text-decoration: none;
}

h1 {
    font-size: 30px;
    margin-bottom: 20px;
}
h2 {
    color: @theme-color-text;
}

.datatableRelatedReports {
    color: @theme-color-text-lighter;
}

.tableIcon {
    background: none;
    padding: 2px 4px 4px 4px;
    &.activeIcon {
        background: @color-silver-l80;
    }
}

.exportToFormatItems {
    background: @color-silver-l80;
    padding-top: 5px;
    padding-bottom: 4px;
    color: #000;

    a {
       color: @theme-color-brand !important;
    }
}

.dataTableFooterActiveItem {
    display: none;
}

#topApiRef {
    color: @theme-color-text;
}

.tableConfiguration div.configItem span.action {
    color: @theme-color-link;

... [truncated, 67 more lines] ...

/* br clear="all" deprecated */
br.clearAll {
  clear: both;
  height: 0;
  line-height: 0;
  font-size: 0; /*for IE*/
}

br.clear,
div.clear {
  clear: both;
  height: 0;
  overflow: hidden;
}

/* IE < 9 will use this */
body.old-ie .ie-hide {
  display: none;
}

.centerLargeDiv {
  width: 850px;
  margin: auto;
}

.center {
  margin: auto;
  text-align: center;
  padding-bottom: 10px;
}

.datatable-label-category {
    color:#999;
}

#root {
  #logo {
    padding: 9px 0 0 4px;
    float: left;
  }

  #logo  {
    img.default-piwik-logo {
      width: 82px;
      margin-top: 8px;
    }

    img {
      max-height: 30px;
    }
  }

  #logo > a {
    text-decoration: none;
  }
  
  #logo {
    // IE 9 only
    width: 200px\9\0;
  }
}

// IE 10+
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  #root #logo {
    width: 80px;
  }
  #root #logo img.default-piwik-logo {
    width: 100%;
  }
}

#javascriptDisabled,
#javascriptDisabled a {
  font-weight: bold;
  color: #F88D22;
  padding: 15px;
  clear: both;
}