/******************************************************************************* @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); }