/*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */ // Gray colors @gray: #7F7F7F; @gray-light: #C9C9C9; @gray-lighter: #EEEEEE; @gray-lightest: #F7F7F7; // Icinga colors @icinga-blue: #0095BF; @icinga-blue-dark: #AA95BF; @color-ok: #44bb77; @color-warning: #ffaa44; @color-warning-handled: #ffcc66; @color-critical: #ff5566; @color-critical-handled: #ff99aa; @color-unknown: #aa44ff; @color-unknown-handled: #cc77ff; @color-unreachable: #aa44ff; @color-unreachable-handled: #cc77ff; @color-pending: #77aaff; // Background color for @body-bg-color: #fff; // Text colors @text-color: #535353; @text-color-inverted: @body-bg-color; @text-color-light: @gray; // Text color on @link-color: @text-color; @tr-active-color: #E5F9FF; @tr-hover-color: #F5FDFF; // Font families @font-family: Calibri, Helvetica, sans-serif; @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: 0.917em; // 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; &:focus { outline-color: @icinga-blue; } &:hover { text-decoration: underline; } } // 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; } // Styles for when containers are loading. JS will remove this once the containers are ready .impact { .active > a, // Remove > a once .tabs layout has been fixed .controls, .content { .transition(background-color 2s 1s linear !important); background-color: @gray-lighter !important; } }