/*! Icinga Web 2 | (c) 2013 Icinga Development Team | GPLv2+ */ // Black colors @black: #535353; // Gray colors @gray: #7F7F7F; @gray-semilight: #A9A9A9; @gray-light: #C9C9C9; @gray-lighter: #EEEEEE; @gray-lightest: #F7F7F7; @disabled-gray: #9a9a9a; // State colors @color-ok: #44bb77; @color-up: @color-ok; @color-warning: #ffaa44; @color-warning-handled: #ffcc66; @color-critical: #ff5566; @color-critical-handled: #ff99aa; @color-down: @color-critical; @color-down-handled: @color-critical-handled; @color-unknown: #aa44ff; @color-unknown-handled: #cc77ff; @color-unreachable: @color-unknown; @color-unreachable-handled: @color-unknown-handled; @color-pending: #77aaff; // Icinga colors @icinga-blue: #0095BF; @icinga-secondary: #EF4F98; @low-sat-blue: #dae3e6; @low-sat-blue-dark: #becbcf; @icinga-blue-light: #a5c4cd; @icinga-blue-dark: #0081a6; // Notification colors @color-notification-error: @color-critical; @color-notification-info: @color-pending; @color-notification-success: #fe6; @color-notification-warning: @color-warning-handled; // Background color for @body-bg-color: #fff; // Text colors @text-color: @black; @text-color-inverted: @body-bg-color; @text-color-light: @gray; @text-color-on-icinga-blue: @body-bg-color; // Text color on @link-color: @text-color; @tr-active-color: #E5F9FF; @tr-hover-color: #F5FDFF; // Menu colors @menu-bg-color: #494949; @menu-active-bg-color: #333; @menu-flyout-bg-color: @body-bg-color; @menu-color: @text-color-inverted; @menu-highlight-color: @icinga-blue; @menu-2ndlvl-color: #c4c4c4; @menu-2ndlvl-highlight-color: @text-color-inverted; @menu-flyout-bg-color: @body-bg-color; @menu-flyout-color: @text-color; // Other colors @color-granted: #59cd59; @color-refused: #ee7373; @color-restricted: #dede7d; // Font families @font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @font-family-fixed: "Liberation Mono", "Lucida Console", Courier, monospace; @font-family-wide: Tahoma, Verdana, sans-serif; // Font sizes @font-size: 0.750em; // 12px @font-size-small: 11/12em; // 11px @font-size-dashboard: 3.5em; // 56px @font-size-dashboard-small: 1.1em; // 17px @font-weight-bold: 600; // Set line-height w/o unit so that the line-height is dynamically calculated as font-size * line-height @line-height: 1.5; @table-column-padding: 0.333em; // 4px @vertical-padding: 0.5em; // 6px @horizontal-padding: 1em; // 12px // Make padding not affect the final computed width of an element html { box-sizing: border-box; } *, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; } a { // Reset defaults color: inherit; text-decoration: none; &:hover { text-decoration: underline; } } :focus { outline: 3px solid fade(@icinga-blue, 50%); outline-offset: 1px; } // Default margin for block text blockquote, p, pre { margin: 0 0 1em 0; } blockquote { border-left: 5px solid @gray-lighter; padding: 0.667em 0.333em; } h1, h2, h3, h4, h5, h6 { font-weight: @font-weight-bold; margin: 0.556em 0 0.333em; } h1 { border-bottom: 1px solid @gray-lighter; font-size: 1.333em; } h2 { font-size: 1.333em; } h3 { font-size: 1.167em; } h4 { font-size: 1em; } h5 { font-size: @font-size-small; } h6 { font-size: @font-size-small; font-weight: normal; } pre { background-color: @gray-lightest; font-family: @font-family-fixed; font-size: @font-size-small; padding: @vertical-padding @horizontal-padding; white-space: pre-wrap; } td, th { padding: @table-column-padding; } [class^="icon-"], [class*=" icon-"] { // Smooth icons; ifont claims to have it, but it does not work in :before -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; &:before { margin-left: 0; } } // Styles for when the page is loading. JS will remove this class once the document is ready .loading * { // Disable all transition on page load -webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; transition: none !important; } .container { &:before, > .content:before { content: ""; display: block; background: @body-bg-color url(../img/icinga-loader.gif) no-repeat center center; background-size: 4em 4em; opacity: 0; z-index: -1; pointer-events: none; .transition(none); } &.impact, > .content.impact { overflow: hidden; position: relative; &:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: .7; z-index: 1; pointer-events: all; .transition(opacity 1s 2s linear); } } &.impact:before { top: 2.5em; } }