| /***************/ |
| /* THEME START */ |
| |
| @import "components/color-functions.scss"; |
| |
| $v-app-loading-text: "OSBP"; |
| |
| $os-loading-animation: url('load_spinner_3.gif'); |
| $os-login-background-image: url('U68NITW3EI_s.jpg'); |
| |
| /** Switches **/ |
| $web: false; |
| $web2: false; |
| $os-button-uppercase: true; |
| $os-img-size-override: false; |
| $os-bordered: false; |
| |
| // get_contrast |
| $os-fn-desaturate: false; //default: true |
| $os-fn-light: 7; |
| $os-fn-border: 17; |
| $os-fn-medium: 37; |
| $os-fn-strong: 67; |
| |
| |
| /** OS-Variables **/ |
| $os-background-color: #fff;// #334455; |
| //$os-background-color: #b2dbb2; |
| |
| $os-base-color: #362455; //lila #4F437E, #34235A, #23135E |
| $os-base-color: #1f567d; //blau |
| |
| $os-highlight-color: #EF7F1E; //orange #F5832F, #f39200, #F2910D |
| $os-highlight-color: #c37f27; //gelblich |
| $os-highlight-color: #c35127; //roetlich |
| $os-highlight-color: #f5863c; |
| $os-odd-highlight: #f5863c; |
| $os-button-as-tab: $os-highlight-color; //header |
| |
| //$v-error-indicator-color: #9c27b0; |
| |
| |
| $os-light-contrast: #efefef; //grey1c #F2F3F4, #f0f0f0 |
| $os-light-contrast: get_contrast($os-fn-light, $os-background-color, $os-fn-desaturate); |
| |
| $os-mid-contrast: #A0A4A6; //grey6c, #777779 |
| $os-mid-contrast: get_contrast($os-fn-medium, $os-background-color, $os-fn-desaturate); |
| |
| $os-dark-contrast: #545559; //grey11c #9FA0A5, #575757 |
| $os-dark-contrast: get_contrast($os-fn-strong, $os-background-color, $os-fn-desaturate); |
| |
| $os-button-color: $os-base-color; |
| |
| @if $web==true { |
| $os-highlight-color: #ffc600; |
| $os-odd-highlight: #bf1e2e ; //#bf1e2e |
| $os-button-as-tab: #ffc600; |
| $os-button-color: $os-dark-contrast; |
| } |
| |
| @if $web2==true { |
| $os-highlight-color:#ffc600; |
| $os-odd-highlight: #bf1e2e ; //#bf1e2e |
| $os-button-as-tab: $os-highlight-color; |
| $os-button-as-tab-inactive: $os-light-contrast; |
| $os-button-color: #1268b3; |
| } |
| |
| $os-focus-color: get_color_mix($os-highlight-color, #fff, 50); |
| $os-base-color-light: get_color_mix($os-base-color, #fff, 50); |
| |
| $os-splitter: $os-light-contrast; |
| $os-main-header-bg: $os-light-contrast; |
| @if $web==true { |
| $os-main-header-bg: $os-background-color; |
| } |
| $os-sub-header-bg: $os-light-contrast; |
| |
| //desaturate(lighten($os-highlight-color, 25), 10%); |
| //alternatives: desaturate(lighten($os-base-color, 25), 10%) |
| $os-font-unit: px; |
| $os-font-size: 12px; |
| $os-l-font-factor: 1.4; |
| $os-xl-font-factor: 1.8; |
| $os-unit-size: 22px; |
| $os-line-height-factor: 1.75; //1.6 = recommended factor for readability of longer texts. |
| $os-line-height: $os-font-size * $os-line-height-factor; |
| $os-font-family: Arial; |
| $os-splitter-size: $os-unit-size/2.75; //8px, try for an even number |
| $os-field-width: $os-unit-size * 10 !default; |
| $os-icon-image-width: 16px; |
| |
| |
| $os-border-width: 1px; |
| $os-border-style: solid; |
| $os-border-color: get_contrast($os-fn-border, $os-background-color, $os-fn-desaturate);; |
| $os-border: valo-border($os-border-width $os-border-style $os-border-color, $os-background-color, null, 1); |
| |
| //filters-panel |
| $os-filters-padding: 1px; |
| $os-filters-font: #a3a3a3; |
| $os-filters-panel-bg: $os-border-color; |
| |
| $os-button-height: $os-unit-size + floor($os-unit-size/3); |
| $os-button-width: $os-unit-size*7; |
| |
| $os-luminance-threshold: 150 ;//150 !default |
| $os-loading-bar-height: 2px; |
| $os-loading-bar-color: $os-highlight-color; |
| $os-progress-important: #be1e2d; |
| |
| $os-shadow: 1px 3px 7px transparentize(#000, 0.9); |
| $os-shadow-reversed: 0px -2px 2px transparentize(#000, 0.9); |
| $os-text-shadow: 0px 1px 1px transparentize(#000, 0.8); |
| |
| /** Vaadin/Valo-Variables **/ |
| |
| $v-loading-indicator-bar-height: $os-unit-size; |
| $v-loading-indicator-color: $os-loading-bar-color; |
| |
| //(v-shade 0.7) |
| $v-textfield-disabled-opacity: 1; |
| |
| $v-luminance-threshold: $os-luminance-threshold; |
| |
| $v-app-background-color: $os-background-color; |
| $valo-menu-background-color: $os-base-color; |
| $v-table-background-color: $os-background-color; |
| $v-focus-color: $os-highlight-color; |
| $v-font-family: $os-font-family; |
| $v-font-size: $os-font-size; |
| $v-line-height: $os-line-height; |
| $v-unit-size: $os-unit-size; |
| $v-table-row-height: $os-unit-size; |
| $v-default-field-width: $os-field-width; //$v-unit-size * 5 !default; |
| |
| $v-scaling-factor--tiny: 1 !default; //0.75 |
| $v-scaling-factor--small: 0.85 !default; |
| $v-scaling-factor--large: 1.2 !default; |
| $v-scaling-factor--huge: 1.6 !default; |
| |
| $v-border: $os-border-width $os-border-style $os-border-color !default; |
| $v-border-radius: 0px; |
| |
| $os-button-gradient: v-linear 5%; |
| $os-gradient-amount: v-linear 5%; |
| |
| $v-layout-margin-top: $os-unit-size*0.5; |
| $v-layout-margin-left: $os-unit-size*0.5; |
| $v-layout-margin-right: $os-unit-size*0.5; |
| $v-layout-margin-bottom: $os-unit-size*0.5; |
| $v-layout-spacing-vertical: 0px; |
| |
| $v-tabsheet-content-animation-enabled: false; //default: true |
| |
| /* |
| $v-textfield-bevel: false;*/ |
| $v-gradient: false; |
| |
| /*$v-hover-styles-enabled: false /*true !default;*/ |
| |
| $v-bevel: false; |
| $v-shadow: $os-shadow; |
| $v-textfield-shadow: false; |
| $v-shadow-opacity: 10% !default; |
| |
| |
| $v-focus-style: 0 0 0 1px transparent; //Focus-shadow/glow-color. Default = glow |
| |
| /*$v-background-color: hsl(0, 0, 99.5%); |
| $valo-menu-background-color: hsl(218, 20%, 98%); |
| |
| $v-background-color: $os-lila; |
| $v-focus-color: $os-orange; |
| $v-panel-background-color: $weiss; //buggy? |
| $v-overlay-background-color: $os-orange; |
| $valo-menu-background-color: $os-lila; |
| */ |
| |
| /* $v-focus-color: hsl(218, 80%, 60%); |
| $v-border: 1px solid (v-shade 0.6); |
| $v-border-radius: 0px; |
| $v-bevel: inset 0 1px 0 v-tint; |
| $v-textfield-bevel: false; |
| $v-gradient: v-linear 3%; |
| $v-shadow: false; |
| $v-friendly-color: hsl(163, 61%, 41%); |
| $v-error-indicator-color: hsl(349, 66%, 56%); |
| $v-font-family: Arial; |
| $v-font-size: 12px; |
| $v-line-height: 1.618;*/ |
| |