/*! Icinga Web 2 | (c) 2013 Icinga Development Team | GPLv2+ */ // Black colors @black: #535353; // Gray colors @gray: #7F7F7F; @gray-light: #C9C9C9; @gray-lighter: #EEEEEE; @gray-lightest: #F7F7F7; // Icinga colors @icinga-blue: #0095BF; @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; // 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; // 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: 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; &:hover { text-decoration: underline; } } a:focus, button:focus, input[type="checkbox"]: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; } // Styles for when containers are loading. JS will remove this once the containers are ready .impact { .transition(background-color 2s 1s linear !important); background-color: @gray-lighter !important; } .impact > .controls, .impact li.active a { .transition(background-color 2s 1s linear !important); background-color: @gray-lighter !important; }