/*******************************************************************************
@theme: Export Process Viewer
@version: 1.0.0
@author: UX TEAM at Bizagi
@description: Custom theme CSS rules for Process Viewer
********************************************************************************/
/* ==========================================================================
Export process viewer components
========================================================================== */
/* General
========================================================================== */
::-webkit-input-placeholder { color: @navigation-link; }
::-moz-placeholder { color: @navigation-link; }
:-ms-input-placeholder { color: @navigation-link; }
#app-container-view { background: lighten(@navigation, 5%); }
.ui-tooltip.biz-ex-tooltip,
.ui-tooltip.biz-ex-tooltip-nav {
background: @content;
color: @content-text;
}
.ui-tooltip.biz-ex-tooltip:after { border-left-color: @content; }
.ui-tooltip.biz-ex-tooltip-nav:after { border-right-color: @content; }
.biz-gradien-scroll {
background: -webkit-linear-gradient(top, transparent 0%, darken(@navigation, 10%) 100%);
background: -moz-linear-gradient(top, transparent 0%, darken(@navigation, 10%) 100%);
background: linear-gradient(to bottom, transparent 0%, darken(@navigation, 10%) 100%);
}
/* Header
========================================================================== */
.biz-ex-header-view {
border-bottom-color: @header-border;
a {
color: @header-link;
&:hover { color: darken(@header-link, 5%); }
}
}
.lt-ie9 .biz-ex-header-view{
background:darken(@header, 6%);
}
.biz-ex-logo {
background:darken(@header, 6%);
border-right-color: @header-border;
border-bottom-color: @header-border;
}
.biz-ex-top-nav {
background: darken(@header, 6%);
}
.biz-ex-back-process.biz-ex-navigate {
border-color: @header-border;
background: transparent;
}
.biz-ex-title-diagram { color: @header-link; }
/* Navigation sidebar
========================================================================== */
#sidebar,
.biz-ex-navigation-left { background: darken(@navigation, 5%); }
.biz-ex-navigation-left { border-right-color: @navigation-border; }
.biz-ex-search-input,
.biz-ex-icon-search { background-color: darken(@navigation, 10%); }
.biz-ex-search-input { color: @navigation-link; }
.nav-bar {
border-top-color: @navigation-border;
.biz-ex-sub-page a { border-bottom-color: @navigation-border; }
.biz-ex-sub-page.active { background: fade(@navigation-link, 25%); }
a {
color: @navigation-link;
&:hover {
background: darken(@navigation, 10%);
color: darken(@navigation-link, 5%);
}
}
}
.biz-ex-active.active > a {
border-top-color: @navigation-border !important;
color: darken(@navigation-link, 40%);
}
.biz-ex-ind-container { border-right-color: @navigation-border; }
/* Search
========================================================================== */
.biz-ex-search-options {
box-shadow: 0 1px 1px darken(@content, 25%);
background: fade(@content, 90%);
}
.biz-ex-search-options:after {
border-bottom-color: fade(@content, 90%);
}
.ui-autocomplete {
box-shadow: 0 1px 1px darken(@content, 25%);
background: fade(@content, 90%);
}
.biz-ex-result-name,
.biz-ex-result-container {
color: @content-text !important;
}
.biz-ex-search-option { color: @navigation-link; }
.biz-ex-search-option.biz-ex-active { color: @content-text; }
/* Content
========================================================================== */
.biz-ex-diagram-data { background: @content; }
.no-touch .bix-ex-figure-panel {
border-color: @content-border;
background: @content;
}
h1, h2, h3, h4, h5, h6,
.biz-ex-diagram-desc-container { color: @content-text; }
.biz-ex-img,
.biz-ex-diagram-desc:last-child { border-color: lighten(@content-border, 25%); }
.biz-ex-expand-button-span {
border-color: @navigation-border;
background: @content;
}
/* Modal window
========================================================================== */
.reveal-modal { border-color: @content-border }
.biz-ex-dialog-header { background: lighten(@header, 25%); }
.biz-ex-dialog-details > dt,
.biz-ex-dialog-details > dd,
.biz-ex-dialog-properties .biz-ex-dialog-process-title,
.biz-ex-performers-list-as-contact span,
.biz-ex-performers-list-as-contact span:nth-child(even) { color: @content-text; }
.biz-ex-dialog-line { border-color: @content-border; }
.biz-ex-performer-tag { background: darken(@content, 10%); }
.biz-ex-dialog-content.biz-ex-dialog-properties {
bottom: 4px;
border-top-color: @content-border;
}
.alert-box {
background: darken(@content, 10%) !important;
color: @content-text;
}
/* GUID list
========================================================================== */
.biz-ex-guid-wrapper {
border-color: @content-border;
background: @content;
color: @content-text;
}
.biz-ex-guid-img { border-color: lighten(@content-border, 25%); }
/* Zoom
========================================================================== */
.zoom-hotspot:hover {
border-color: transparent;
background-color: fade(@navigation, 50%);
}
.zoom-pane-preview {
border-color: @header-border;
}
.zoom-pane-preview .zoom-pane-square {
border-color: @navigation-border;
background: fade(@navigation, 50%);
}
.zoom-pane-preview .zoom-pane-square.ui-draggable-dragging {
border-color: @header-border;
background: fade(@header, 50%);
}
/* ==========================================================================
Mixins
========================================================================== */
.gradient(@start: #EEE, @stop: #FFF) {
background: @start;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, @stop), color-stop(100%, @start));
background-image: -webkit-linear-gradient(@stop, @start);
background-image: -moz-linear-gradient(@stop, @start);
background-image: -o-linear-gradient(@stop, @start);
background-image: linear-gradient(@stop, @start);
}