// // Variables // -------------------------------------------------- // Bootstrap overrides and PatternFly-specific variables // PatternFly-specific // ------------------- @bootstrap-switch-handle-default-bg-color: #fbfbfb; @btn-default-bg-img-start: #fafafa; @btn-default-bg-img-stop: #ededed; @btn-xs-font-weight: 400; @card-pf-accented-border-top-color: #39a5dc; @card-pf-aggregate-status-title-icon-color: #333; @card-pf-bg-color: #fff; @card-pf-border-color: #d1d1d1; @card-pf-border-top-color: transparent; @card-pf-container-bg-color: #f5f5f5; @card-pf-footer-bg-color: #fafafa; @donut-font-size-big: 30px; @dropdown-divider-margin: 4px 1px; @dropdown-link-active-border-color: #0076b7; @dropdown-link-hover-border-color: #b3d3e7; @dropdown-link-focus-color: #fff; @fa-font-path: "../../components/font-awesome/fonts"; @flyout-transition-pf: all .2s cubic-bezier(.35,0,.25,1); @font-family-monospace: Menlo, Monaco, Consolas, monospace; @font-path: "../fonts"; @footer-pf-alt-bg-color: #030303; @footer-pf-alt-padding-left: 25px; @footer-pf-alt-padding-top: 10px; @footer-pf-alt-height: 37px; @gray-light-pf: #aaa; @gray-pf: #4d5258; @icon-font-name-fa: "FontAwesome"; @icon-font-name-pf: "PatternFlyIcons-webfont"; @icon-prefix: pficon; @img-bg-login: "bg-login.jpg"; @img-path: "../img"; @img-spinner: "spinner.gif"; @img-spinner-lg: "spinner-lg.gif"; @img-spinner-sm: "spinner-sm.gif"; @img-spinner-xs: "spinner-xs.gif"; @input-border-disabled: #d4d4d4; @input-border-hover: #7BB2DD; @list-group-top-border: #e9e8e8; @login-bg-color: #080808; @login-container-bg-color: #181818; @login-container-bg-color-rgba: rgba(255, 255, 255, 0.055); @modal-title-padding-horizontal: 18px; @modal-title-padding-vertical: 10px; @nav-pf-vertical-alt-active-color: #39a5dc; @nav-pf-vertical-alt-bg-color: #fff; @nav-pf-vertical-alt-badge-color: #fff; @nav-pf-vertical-alt-collapsed-width: 75px; @nav-pf-vertical-alt-color: #464952; @nav-pf-vertical-alt-link-height: 63px; @nav-pf-vertical-alt-link-padding: 17px 20px 17px 25px; @nav-pf-vertical-alt-width: 250px; @navbar-pf-active-color: #f1f1f1; @navbar-pf-bg-color: #030303; //#393F45 @navbar-pf-border-color: #199dde; @navbar-pf-color: #cfcfcf; @navbar-pf-alt-active-color: #fff; @navbar-pf-alt-bg-color: #030303; @navbar-pf-alt-bg-img: url("../img/bg-navbar-pf-alt.svg"); @navbar-pf-alt-bg-repeat: no-repeat; @navbar-pf-alt-bg-size: auto 100%; @navbar-pf-alt-border-style: solid; @navbar-pf-alt-border-width: 2px; @navbar-pf-alt-color: #cfcfcf; @navbar-pf-alt-height: 60px; @navbar-pf-alt-nav-item-iconic-padding: 21px 12px; @navbar-pf-alt-navbar-brand-color: #fff; @navbar-pf-alt-navbar-brand-icon-margin: 0 15px 0 0; @navbar-pf-alt-navbar-brand-margin: 0 0 0 25px; @navbar-pf-alt-navbar-brand-min-height: 35px; @navbar-pf-alt-navbar-brand-name-breakpoint: 480px; @navbar-pf-alt-navbar-brand-name-margin: 0 15px 0 0; @navbar-pf-alt-navbar-brand-padding: 11px 0 12px; @navbar-pf-alt-navbar-toggle-margin: 13px 15px; @navbar-pf-alt-navbar-toggle-icon-bar-hover-bg: #fff; @navbar-pf-icon-bar-bg-color: #fff; @navbar-pf-navbar-navbar-brand-min-width: 270px; @navbar-pf-navbar-navbar-brand-padding: 8px 0 7px; @navbar-pf-navbar-navbar-persistent-bg-color: #f6f6f6; @navbar-pf-navbar-navbar-persistent-border-color: #cecdcd; @pagination-padding-small-vertical: 0; @pficon-var-add-circle-o: "\e61b"; @pficon-var-builder-image: "\e800"; @pficon-var-close: "\e60b"; @pficon-var-cluster: "\e620"; @pficon-var-container-node: "\e621"; @pficon-var-delete: "\e611"; @pficon-var-edit: "\e60a"; @pficon-var-error-circle-o: "\e61d"; @pficon-var-export: "\e616"; @pficon-var-folder-close: "\e607"; @pficon-var-folder-open: "\e606"; @pficon-var-help: "\e605"; @pficon-var-history: "\e617"; @pficon-var-home: "\e618"; @pficon-var-image: "\e61f"; @pficon-var-import: "\e615"; @pficon-var-info: "\e604"; @pficon-var-flag: "\e603"; @pficon-var-kubernetes: "\e627"; @pficon-var-ok: "\e602"; @pficon-var-openshift: "\e626"; @pficon-var-print: "\e612"; @pficon-var-project: "\e622"; @pficon-var-registry: "\e623"; @pficon-var-replicator: "\e624"; @pficon-var-restart: "\e613"; @pficon-var-route: "\e625"; @pficon-var-running: "\e614"; @pficon-var-save: "\e601"; @pficon-var-screen: "\e600"; @pficon-var-service: "\e61e"; @pficon-var-settings: "\e610"; @pficon-var-thumb-tack-o: "\e609"; @pficon-var-topology: "\e608"; @pficon-var-user: "\e60e"; @pficon-var-users: "\e60f"; @pficon-var-warning-triangle-o: "\e61c"; @panel-default-border-color: #bebdbd; @sidebar-pf-bg: #fafafa; @sidebar-pf-border-color: #d0d0d0; @table-border-hover: #a7cadf; @table-cell-padding-bottom: 3px; @table-cell-padding-top: 2px; // Reference variables declared in block above @bootstrap-switch-bg-color-start: @btn-default-bg-img-start; @bootstrap-switch-bg-color-stop: @btn-default-bg-img-stop; @img-path-alt: @img-path; @nav-pf-vertical-alt-border-color: @sidebar-pf-border-color; @navbar-pf-alt-border-color: @navbar-pf-border-color; @navbar-pf-navbar-header-border-color: lighten(@navbar-pf-bg-color, 15%); @navbar-pf-navbar-nav-active-active-bg-color: lighten(@navbar-pf-bg-color, 8%); @navbar-pf-navbar-nav-active-active-open-bg-color: lighten(@navbar-pf-bg-color, 11%); @navbar-pf-navbar-nav-active-bg-color: lighten(@navbar-pf-bg-color, 12.5%); @navbar-pf-navbar-primary-bg-color-start: lighten(@navbar-pf-bg-color, 10%); // #474C50; @navbar-pf-navbar-primary-bg-color-stop: @navbar-pf-bg-color; // #383F43; @navbar-pf-navbar-utility-border-color: lighten(@navbar-pf-bg-color, 15.5%); @navbar-pf-navbar-utility-color: @navbar-pf-color; @navbar-pf-navbar-utility-hover-bg-color: lighten(@navbar-pf-bg-color, 12.5%); @nav-tabs-color: @gray-pf; // Reference variables declared in block above @navbar-pf-navbar-primary-context-bg-color-start: lighten(@navbar-pf-navbar-primary-bg-color-start, 8.5%); @navbar-pf-navbar-primary-context-bg-color-stop: lighten(@navbar-pf-navbar-primary-bg-color-stop, 11%); @navbar-pf-navbar-primary-hover-bg-color-start: lighten(@navbar-pf-navbar-primary-bg-color-start, 10%); @navbar-pf-navbar-primary-hover-bg-color-stop: lighten(@navbar-pf-navbar-primary-bg-color-stop, 10%); @navbar-pf-navbar-primary-hover-border-color: lighten(@navbar-pf-navbar-header-border-color, 20%); @navbar-pf-navbar-primary-context-border-color: lighten(@navbar-pf-navbar-header-border-color, 8%); @navbar-pf-navbar-primary-context-border-top-color: lighten(@navbar-pf-navbar-header-border-color, 7%); @navbar-pf-navbar-utility-hover-border-color: lighten(@navbar-pf-navbar-utility-border-color, 5%); @navbar-pf-navbar-utility-open-bg-color: lighten(@navbar-pf-navbar-utility-hover-bg-color, 7.5%); @navbar-pf-navbar-utility-open-border-color: lighten(@navbar-pf-navbar-utility-hover-border-color, 5%); // Reference variables declared in block above @navbar-pf-navbar-primary-active-bg-color-start: lighten(@navbar-pf-navbar-primary-hover-bg-color-start, 5%); @navbar-pf-navbar-primary-active-bg-color-stop: lighten(@navbar-pf-navbar-primary-hover-bg-color-stop, 7.5%); @navbar-pf-navbar-primary-active-border-color: lighten(@navbar-pf-navbar-primary-hover-border-color, 5%); @navbar-pf-navbar-primary-context-hover-bg-color-start: lighten(@navbar-pf-navbar-primary-context-bg-color-start, 5%); @navbar-pf-navbar-primary-context-hover-bg-color-stop: lighten(@navbar-pf-navbar-primary-context-bg-color-stop, 7.5%); @navbar-pf-navbar-primary-context-hover-border-color: lighten(@navbar-pf-navbar-primary-context-border-color, 5%); @navbar-pf-navbar-primary-context-hover-border-top-color: lighten(@navbar-pf-navbar-primary-context-border-top-color, 6%); // Reference variables declared in block above @navbar-pf-navbar-primary-context-active-bg-color-start: lighten(@navbar-pf-navbar-primary-context-hover-bg-color-start, 5%); @navbar-pf-navbar-primary-context-active-bg-color-stop: lighten(@navbar-pf-navbar-primary-context-hover-bg-color-stop, 7.5%); @navbar-pf-navbar-primary-context-active-border-color: lighten(@navbar-pf-navbar-primary-context-hover-border-color, 5%); @navbar-pf-navbar-primary-context-active-border-top-color: lighten(@navbar-pf-navbar-primary-context-hover-border-top-color, 6%); // References variable declared in block above @navbar-pf-navbar-primary-context-active-border-right-color: @navbar-pf-navbar-primary-context-active-border-color; // Bootstrap overrides // ------------------- @alert-info-border: #ccc; @alert-link-font-weight: 500; @alert-padding: 7px; @body-bg: #ffffff; @border-radius-base: 1px; @brand-danger: #cc0000; @brand-info: #006e9c; @brand-primary: #00a8e1; @brand-success: #3f9c35; @brand-warning: #ec7a08; @breadcrumb-bg: transparent; @breadcrumb-separator: "\f105"; @btn-danger-bg: #a30000; @btn-danger-border: #781919; @btn-default-border: #b7b7b7; @btn-font-weight: 600; @btn-primary-bg: #0085cf; @btn-primary-border: #006e9c; @caret-width-base: 0; @dropdown-border: #b6b6b6; @dropdown-divider-bg: #e5e5e5; @dropdown-link-active-color: #fff; @dropdown-link-hover-bg: #d4edfa; @font-family-base: "Open Sans", Helvetica, Arial, sans-serif; @font-size-base: 12px; @gray-dark: lighten(#000, 20%); // #333 @gray-darker: lighten(#000, 13.5%); // #222 @gray-light: lighten(#000, 60%); // #999 @gray-lighter: lighten(#000, 93.5%); // #eee @grid-gutter-width: 40px; @icon-font-path: "../../components/bootstrap/dist/fonts/"; @input-bg-disabled: #F8F8F8; @input-border: #BABABA; @line-height-base: 1.66666667; // 20/12 @link-color: #0099d3; @list-group-border: #f2f2f2; @list-group-border-radius: 0; @list-group-hover-bg: #d4edfa; @link-hover-color: #00618a; @nav-tabs-border-color: #e9e8e8; @nav-tabs-link-hover-border-color: transparent; @padding-large-horizontal: 10px; @padding-base-horizontal: 6px; @padding-base-vertical: 2px; @padding-large-vertical: 6px; @pager-border-radius: 0; @pager-disabled-color: #969696; @pagination-bg: #f5f5f5; @pagination-border: #bbbbbb; @pagination-hover-bg: #ededed; @panel-inner-border: #cecdcd; @popover-arrow-color: #fff; @popover-arrow-outer-color: #bbb; @popover-border-color: #bbb; @popover-max-width: 220px; @popover-title-bg: #f5f5f5; @pre-bg: #fcfcfc; @progress-bg: #ededed; @table-bg-accent: #f5f5f5; @table-bg-hover: #d5ecf9; @table-border-color: #d1d1d1; @table-cell-padding: 10px; @tooltip-arrow-width: 8px; @tooltip-bg: #434343; @tooltip-max-width: 220px; // Reference variables declared in block above @alert-danger-bg: @body-bg; @alert-danger-border: @brand-danger; @alert-danger-text: @gray-dark; @alert-info-bg: @body-bg; @alert-info-text: @gray-dark; @alert-success-bg: @body-bg; @alert-success-border: @brand-success; @alert-success-text: @gray-dark; @alert-warning-bg: @body-bg; @alert-warning-border: @brand-warning; @alert-warning-text: @gray-dark; @badge-border-radius: @border-radius-base; @border-radius-large: @border-radius-base; @border-radius-small: @border-radius-base; @breadcrumb-active-color: @gray-pf; @breadcrumb-color: @gray-pf; @btn-default-bg: @gray-lighter; @btn-default-color: @gray-pf; @caret-width-large: @caret-width-base; @dropdown-fallback-border: @dropdown-border; @dropdown-link-active-bg: @link-color; @dropdown-link-hover-color: @gray-pf; @font-size-h1: ceil(@font-size-base * 2); // ~24px @font-size-h2: ceil(@font-size-base * 1.8333); // ~22px @font-size-h3: ceil(@font-size-base * 1.3333); // ~16px @font-size-h5: ceil(@font-size-base * 1.0833); // ~13px @font-size-large: ceil(@font-size-base * 1.1666); // ~14px @font-size-small: ceil(@font-size-base * .9166); // ~11px @input-color: @gray-dark; @nav-tabs-active-link-hover-color: @link-color; @nav-tabs-justified-link-border-color: @nav-tabs-border-color; @padding-small-horizontal: @padding-base-horizontal; @padding-small-vertical: @padding-base-vertical; @panel-danger-border: @brand-danger; @panel-danger-heading-bg: @brand-danger; @panel-info-border: @brand-info; @panel-info-heading-bg: @brand-info; @panel-primary-text: @body-bg; @panel-success-border: @brand-success; @panel-success-heading-bg: @brand-success; @panel-warning-border: @brand-warning; @panel-warning-heading-bg: @brand-warning; @state-warning-text: @brand-warning; // Reference variable declared in block above @panel-danger-text: @panel-primary-text; @panel-info-text: @panel-primary-text; @panel-success-text: @panel-primary-text; @panel-warning-text: @panel-primary-text; // PatternFly-specific variables based on Bootstrap overides // --------------------------------------------------------- @bootstrap-switch-bg-color: @btn-default-bg; @btn-danger-bg-img-start: @brand-danger; @btn-danger-bg-img-stop: @btn-danger-bg; @btn-primary-bg-img-start: @brand-primary; @btn-primary-bg-img-stop: @btn-primary-bg; @dropdown-link-focus-bg: @link-color; @line-height-computed: floor((@font-size-base * @line-height-base)); @notification-badge-color: @brand-danger; @progress-sm: @line-height-computed - 6; @progress-xs: @line-height-computed - 14; @syntax-1: @btn-danger-bg; @syntax-2: @gray-dark; @syntax-3: @brand-success; @syntax-4: @brand-info; @tooltip-font-size: @font-size-base;