diff options
Diffstat (limited to '')
-rw-r--r-- | public/css/module.less | 1103 |
1 files changed, 1103 insertions, 0 deletions
diff --git a/public/css/module.less b/public/css/module.less new file mode 100644 index 0000000..78f42c3 --- /dev/null +++ b/public/css/module.less @@ -0,0 +1,1103 @@ +a:focus { + outline: none; + text-decoration: underline; + &::before { + text-decoration: none; + } +} + +.action-bar { + display: flex; + align-items: center; + font-size: 1.3em; + color: @icinga-blue; + + > a { + &:hover::before { + text-decoration: none; + } + + &:not(:last-child) { + margin-right: 1em; + } + + &.button-link { + color: @text-color-on-icinga-blue; + background: @icinga-blue; + + &:active, &:focus { + text-decoration: none; + } + + &:last-child { + margin-left: auto; + } + } + } + + > div.view-toggle { + margin-right: 1em; + + span { + color: @gray; + margin-right: .5em; + } + + a { + display: inline-block; + + i { + padding: .25em .5em; + border: 1px solid @icinga-blue; + + &:before { + margin-right: 0; + } + + &.active { + color: @text-color-on-icinga-blue; + background-color: @icinga-blue; + } + + &:first-of-type { + border-top-left-radius: .25em; + border-bottom-left-radius: .25em; + } + &:last-of-type { + border-top-right-radius: .25em; + border-bottom-right-radius: .25em; + } + } + } + } + + span.disabled { + color: @gray; + } +} + +form a { + color: @icinga-blue; +} + +div.bp { + margin-bottom: 4px; +} + +div.bp.sortable > .sortable-ghost { + opacity: 0.5; +} + + +/* TreeView */ + +@vertical-tree-item-gap: .5em; + +ul.bp { + margin: 0; + padding: 0; + list-style-type: none; + + .action-link { + font-size: 1.3em; + line-height: 1; + } + + // cursors!!!1 + &:not([data-sortable-disabled="true"]) { + .movable { + cursor: grab; + + &.sortable-chosen { + cursor: grabbing; + } + } + + &.progress .movable { + cursor: wait; + } + } + &[data-sortable-disabled="true"] { + li.process > div { + cursor: pointer; + } + } + + li { + i.icon-service { + opacity: .75; + } + + i.icon-sitemap { + opacity: .8; + } + + i.icon-ok { + opacity: .8; + } + + i.icon-plug { + opacity: .7; + } + } + + // ghost style + &.sortable > li.sortable-ghost { + position: relative; + overflow: hidden; + max-height: 30em; + background-color: @gray-lighter; + border: .2em dotted @gray-light; + border-left-width: 0; + border-right-width: 0; + + &.process:after { + // TODO: Only apply if content overflows? + content: " "; + position: absolute; + right: 0; + bottom: 0; + left: 0; + height: 50%; + background: linear-gradient(transparent, @body-bg-color); + } + } + + // header style + li.process > div { + padding: .291666667em 0; + border-bottom: 1px solid @gray-light; + + > a.toggle { + min-width: 1.25em; // So that process icons align with their node's icons + color: @gray; + } + + > span { + font-size: 1.25em; + + &.op { + padding: .1em .5em; + border-radius: .5em; + background-color: @gray-semilight; + font-weight: bold; + font-size: 1em; + color: @text-color-on-icinga-blue; + } + } + } + + // subprocess style + li.process > ul { + padding-left: 2em; + list-style-type: none; + + &.sortable { + min-height: 1em; // Required to be able to move items back to an otherwise empty list + } + } + + // vertical layout + > li { + padding: @vertical-tree-item-gap 0; + + &:first-child { + margin-top: @vertical-tree-item-gap; + } + + &.process { + padding-bottom: 0; + + &:first-child { + margin-top: 0; + padding-top: 0; + } + } + } + + // horizontal layout + li.process > div, + li:not(.process) { + display: flex; + align-items: center; + padding-left: .25em; + + > * { + margin-right: .5em; + } + + > :not(.overridden-state) + a.action-link { + margin-left: auto; // Let the first action link move everything to the right + + & + a.action-link { + margin-left: 0; // But really only the first one + } + } + + .overridden-state { + margin-left: auto; + margin-right: 1em; + } + } + + // collapse handling + li.process { + // toggle, default + > div > a.toggle > i:before { + -webkit-transition: -webkit-transform 0.3s; + -moz-transition: -moz-transform 0.3s; + -o-transition: -o-transform 0.3s; + transition: transform 0.3s; + } + + // toggle, collapsed + &.collapsed > div > a.toggle > i:before { + -moz-transform:rotate(-90deg); + -ms-transform:rotate(-90deg); + -o-transform:rotate(-90deg); + -webkit-transform:rotate(-90deg); + transform:rotate(-90deg); + } + + &.collapsed { + margin-bottom: (@vertical-tree-item-gap * 2); + + > ul.bp { + display: none; + } + } + } + + // hover style + li.process:hover > div { + background-color: @tr-active-color; + } + li:not(.process):hover { + background-color: @tr-active-color; + } + + li.process > div > .state-ball, + li:not(.process) > .state-ball { + border: .15em solid @body-bg-color; + + &.size-s { + width: 7em/6em; + height: 7em/6em; + line-height: 7em/6em; + } + } +} + +/** BEGIN Dashboard **/ +.overview-dashboard { + .header { + font-weight: bold; + display: block; + font-size: 1.25em; + } + + i { + float: left; + font-size: 2.5em; + margin-top: -0.1em; + margin-bottom: 2em; + color: inherit; + } + + .bp-root-tiles { + margin-left: 3em; + } + + .dashboard-tile { + cursor: pointer; + padding: 1em; + + &:hover { + background-color: @tr-hover-color; + } + + .bp-link { + > a { + text-decoration: none; + color: @gray; + vertical-align: middle; + word-wrap: break-word; + width: 100%; + overflow: hidden; + + > span.header { + color: @text-color; + } + } + } + } + + .dashboard-tile, + div.action { + width: 20em; + display: inline-block; + vertical-align: top; + } + + .action { + > a { + text-decoration: none; + color: @gray; + vertical-align: middle; + display: block; + padding: 1em; + word-wrap: break-word; + width: 100%; + overflow: hidden; + box-sizing: border-box; + + &.addnew:hover { + background-color: @tr-hover-color; + } + + > span.header { + color: @text-color; + } + } + } +} +/** END Dashboard **/ + +// State summary badges +.state-badges { + .state-badges(); + + &.state-badges li > ul > li:last-child { + margin-left: 0; + } + + li > ul > li:first-child:not(:last-child) .state-badge { + border-right: 0; + } +} + +// Node children count +.item-count { + font-size: 1em; + text-align: center; + color: @text-color-inverted; +} + +div.bp .state-badges { + display: inline-block; + padding-top: 0; +} + +td > a > .state-badges { + background-color: transparent; +} + +.state-badge { + font-size: .8em; + border: 1px solid @body-bg-color; + + &.state-missing { + background: @gray-semilight; + color: @text-color-on-icinga-blue; + } + + &.state-critical.handled, &.state-down.handled { background: @color-critical-handled; opacity: 1; } + &.state-unknown.handled { background-color: @color-unknown-handled; opacity: 1; } + &.state-warning.handled { background: @color-warning-handled; opacity: 1; } +} + +/** END Badges **/ + +/** BEGIN Tiles **/ +.tiles:after { + content:''; + display:block; + clear: both; +} + +.tiles.sortable > .sortable-ghost { + opacity: 0.5; + border: .2em dashed @gray; +} + +.tiles > div { + color: @text-color-on-icinga-blue; + width: 12em; + display: inline-block; + float: left; + vertical-align: top; + margin-right: 0.2em; + margin-bottom: 0.2em; + height: 6em; + cursor: pointer; + position: relative; + + .item-count { + margin-right: .5em; + } + + .state-badges { + position: absolute; + bottom: 0; + right: 0; + margin: 0.5em; + text-align: center; + font-size: 0.5em; + } + + .overridden-state { + font-size: .75em; + position: absolute; + left: 0; + bottom: 0; + margin: .5em; + border: 1px solid @body-bg-color; + } + + > a { + display: block; + text-decoration: none; + font-size: 0.7em; + text-align: center; + padding: 1em 1em 0; + font-weight: bold; + word-wrap: break-word; + } + + &:hover { + box-shadow: 0 0 .2em @gray; + } + + .actions { + opacity: 0.8; + margin: 0.5em 0 0 0.5em; + font-size: 0.75em; + height: 1.8em; + + i { + float: none; + display: block; + width: 100%; + font-size: 1em; + line-height: normal; + margin: 0; + padding: 0 0 0 0.25em; + } + a { + margin: 0; + padding: 0; + display: inline-block; + width: 1.5em; + height: 1.5em; + border-radius: 0.3em; + } + + a:hover { + background-color: @body-bg-color; + color: @text-color; + } + + > .node-info { + margin-right: 0.3em; + float: right; + } + } +} + +.tiles.sortable:not([data-sortable-disabled="true"]) { + > div { + cursor: grab; + + &.sortable-chosen { + cursor: grabbing; + } + } + + &.progress > div { + cursor: wait; + } +} + +.tiles > div.parent::before { + content: '&'; + position: absolute; + font-size: 1.2em; +} + +.tiles > div.parent { + width: 100%; + height: 2em; +} + +.tiles { + > .critical { background-color: @color-critical; > a { text-shadow: 0 0 1px mix(#000, @color-critical, 40%); }} + > .critical.handled { background-color: @color-critical-handled; > a { text-shadow: 0 0 1px mix(#000, @color-critical-handled, 40%); }} + > .down { background-color: @color-critical; > a { text-shadow: 0 0 1px mix(#000, @color-critical, 40%); }} + > .down.handled { background-color: @color-critical-handled; > a { text-shadow: 0 0 1px mix(#000, @color-critical-handled, 40%); }} + > .unknown { background-color: @color-unknown; > a { text-shadow: 0 0 1px mix(#000, @color-unknown, 40%); }} + > .unknown.handled { background-color: @color-unknown-handled; > a { text-shadow: 0 0 1px mix(#000, @color-unknown-handled, 40%); }} + > .unreachable { background-color: @color-unknown; > a { text-shadow: 0 0 1px mix(#000, @color-unknown, 40%); }} + > .unreachable.handled { background-color: @color-unknown-handled; > a { text-shadow: 0 0 1px mix(#000, @color-unknown-handled, 40%); }} + > .warning { background-color: @color-warning; > a { text-shadow: 0 0 1px mix(#000, @color-warning, 40%); }} + > .warning.handled { background-color: @color-warning-handled; > a { text-shadow: 0 0 1px mix(#000, @color-warning-handled, 40%); }} + > .ok { background-color: @color-ok; > a { text-shadow: 0 0 1px mix(#000, @color-ok, 40%); }} + > .up { background-color: @color-ok; > a { text-shadow: 0 0 1px mix(#000, @color-ok, 40%); }} + > .pending { background-color: @color-pending; > a { text-shadow: 0 0 1px mix(#000, @color-pending, 40%); }} + > .missing { background-color: @gray-semilight; > a { color: @text-color-on-icinga-blue; }} + > .empty { background-color: @gray-semilight; > a { color: @text-color-on-icinga-blue; }} +} + +.tiles.few { font-size: 2.5em; } +.tiles.normal { font-size: 2.1em; } +.tiles.many { font-size: 1.8em; } + +#layout.twocols, #layout.layout-minimal, div.compact { + .tiles.few { font-size: 1.8em; } + .tiles.normal { font-size: 1.8em; } + .tiles.many { font-size: 1.8em; } +} + +#layout.fullscreen-layout .controls { + padding: 0 1em; +} + +/** END of tiles **/ + +.content.restricted { + h1 { + font-size: 2em; + } + + p > a { + margin-left: 1em; + } +} + +/** BEGIN breadcrumb **/ + +.breadcrumb { + list-style: none; + overflow: hidden; + padding: 0; +} + +.breadcrumb:after { + content:''; + display:block; + clear: both; +} +.breadcrumb li { + float: left; + cursor: pointer; + user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + +} +.breadcrumb li a { + color: @icinga-blue; + margin: 0; + font-size: 1.2em; + text-decoration: none; + padding-left: 2em; + line-height: 2.5em; + position: relative; + display: block; + float: left; + &:focus { + outline: none; + } + + > .state-ball { + margin-right: .5em; + border: .15em solid @body-bg-color; + + &.size-s { + width: 7em/6em; + height: 7em/6em; + line-height: 7em/6em; + } + } +} +.breadcrumb li { + border: 1px solid @gray-lighter; + + &:first-of-type { + border-radius: .25em; + } + + &:last-of-type { + border-radius: .25em; + border: 1px solid transparent; + background: @icinga-blue; + color: @text-color-on-icinga-blue; + padding-right: 1.2em; + + a { + color: @text-color-on-icinga-blue; + } + } +} + +.breadcrumb li:not(:last-of-type) a:before, .breadcrumb li:not(:last-of-type) a:after { + content: " "; + display: block; + width: 0; + height: 0; + border-top: 1.3em solid transparent; + border-bottom: 1.2em solid transparent; + position: absolute; + margin-top: -1.2em; + top: 50%; + left: 100%; +} + +.breadcrumb li:not(:last-of-type) a:before { + border-left: 1.2em solid @gray-lighter; + margin-left: 1px; + z-index: 1; +} + +.breadcrumb li:not(:last-of-type) a:after { + border-left: 1.2em solid @body-bg-color; + z-index: 2; +} + +&.impact { + .breadcrumb li:not(:last-of-type) a:after { + .transition(border-left-color 2s 0.66s linear ~'!important'); + border-left-color: @gray-lighter; + } + + .breadcrumb li:not(:last-of-type) a:before { + .transition(border-left-color 2s 1s linear ~'!important'); + border-left-color: @gray-light; + } + + .breadcrumb li:not(:last-of-type) { + .transition(border-color 2s 1s linear ~'!important'); + border-color: @gray-light; + } + .breadcrumb li:not(:last-of-type) a:hover { + background-color: transparent !important; + color: @icinga-blue; + } +} + +.tabs > .dropdown-nav-item > ul { + z-index: 100; +} + +.breadcrumb li:first-child a { + padding-left: 1em; + padding-right: 0.5em; +} + +.breadcrumb li:not(:last-child) a:hover { background: @icinga-blue; color: @text-color-on-icinga-blue; } +.breadcrumb li:not(:last-child) a:hover:after { border-left-color: @icinga-blue; } +.breadcrumb li:last-child:hover, .breadcrumb li:last-child a:hover { background: @icinga-blue; border-color: @icinga-blue; } + +.breadcrumb li a:focus { + text-decoration: underline; +} + +#layout.twocols, #layout.layout-minimal, div.compact { + .breadcrumb { + font-size: 0.833em; + } +} + +/** END of breadcrumb **/ + + +ul.error, ul.warning { + padding: 0; + list-style-type: none; + background-color: @color-critical; + + li { + font-weight: bold; + color: @text-color-on-icinga-blue; + padding: 0.3em 0.8em; + } + + li a { + color: inherit; + text-decoration: underline; + + &:hover { + text-decoration: none; + } + } +} + + +ul.warning { + background-color: @color-warning; +} + +table.sourcecode { + font-family: monospace; + white-space: pre-wrap; + + th { + vertical-align: top; + padding-right: 0.5em; + user-select: none; + -moz-user-select: none; + -o-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + font-weight: bold; + } + td { + vertical-align: top; + } +} + +/** Forms stolen from director **/ +.content form { + margin-bottom: 2em; +} + +.content form.inline { + margin: 0; +} + +.invisible { + position: absolute; + left: -100%; +} + +form input[type=file] { + padding-right: 1em; +} + +form input[type=submit]:first-of-type { + border-width: 2px; +} + +form p.description { + padding: 1em 1em; + margin: 0; + font-style: italic; + width: 100%; +} + +form ul.form-errors { + margin-bottom: 0.5em; + + ul.errors li { + background: @color-critical; + font-weight: bold; + padding: 0.5em 1em; + color: @text-color-on-icinga-blue; + } +} + +input[type=text], input[type=password], input[type=file], textarea, select { + max-width: 36em; + min-width: 20em; + width: 100%; +} + +label { + line-height: 2em; +} + +form dl { + margin: 0; + padding: 0; +} + +select option { + padding-left: 0.5em; +} + +form dt label { + width: auto; + font-weight: normal; + font-size: inherit; + + &.required { + &::after { + content: '*' + } + } + + &:hover { + text-decoration: underline; + cursor: pointer; + } +} + +#stateOverrides-element { + display: inline-table; + table-layout: fixed; + border-spacing: .5em; + padding: 0; + + label { + display: table-row; + + span, select { + display: table-cell; + } + + span { + width: 10em; + } + + select { + width: 26em; + } + } +} + +form fieldset { + min-width: 36em; +} + +form dd input.related-action[type='submit'] { + display: none; +} + +form dd.active li.active input.related-action[type='submit'] { + display: inline-block; +} + +form dd.active { + p.description { + color: inherit; + font-style: normal; + } +} + +form dd { + padding: 0.3em 0.5em; + margin: 0; +} + +form dt { + padding: 0.5em 0.5em; + margin: 0; +} + +form dt.active, form dd.active { + background-color: @tr-active-color; +} + +form dt { + display: inline-block; + vertical-align: top; + min-width: 12em; + min-height: 2.5em; + width: 30%; + &.errors label { + color: @color-critical; + } +} + +form .errors label { + color: @color-critical; +} + +form dd { + display: inline-block; + width: 63%; + min-height: 2.5em; + vertical-align: top; + margin: 0; + &.errors { + input[type=text], select { + border-color: @color-critical; + } + } + + &.full-width { + padding: 0.5em; + width: 100%; + } +} + +form dd:after { + display: block; + content: ''; +} + +form textarea { + height: auto; +} + +form dd ul.errors { + list-style-type: none; + padding-left: 0.3em; + + li { + color: @color-critical; + padding: 0.3em; + } +} + +form { + #_FAKE_SUBMIT { + position: absolute; + left: -100%; + } +} + +/** END of forms **/ + +/* Form fallback styles, remove once <=2.9.5 support is dropped */ + +.icinga-controls { + input[type="file"] { + background-color: @low-sat-blue; + } + + button[type="button"] { + background-color: @low-sat-blue; + } +} + +form.icinga-form { + input[type="file"] { + flex: 1 1 auto; + width: 0; + } + + button[type="button"] { + line-height: normal; + } +} + +/* Form fallback styles end */ + +/** Custom font styling **/ +textarea.smaller { + font-size: 0.833em; + max-width: 60em; +} +/** END of custom font styling **/ + +/** php-diff **/ +.Differences { + width: 100%; + table-layout: fixed; + empty-cells: show; +} + +.Differences thead { + display: none; +} + +.Differences thead th { + text-align: left; + padding-left: 4 / 14 * 16em; +} +.Differences tbody th { + text-align: right; + width: 4em; + padding: 1px 2px; + border-right: 1px solid @gray-light; + background: @gray-lightest; + font-weight: normal; + vertical-align: top; +} + +.Differences tbody td { + width: 50%; + .preformatted(); + word-break: break-all; +} + +@color-diff-ins: #bfb; +@color-diff-del: #faa; +@color-diff-changed-old: #fdd; +@color-diff-changed-new: #efe; + +.diff { + font-family: monospace; + white-space: pre-wrap; + + del, ins { + text-decoration: none; + } + + del { + color: @color-critical; + background-color: #fdd; + } + + ins { + color: @color-ok; + background-color: #dfd; + } +} + +.DifferencesSideBySide { + ins, del { + text-decoration: none; + } + + .ChangeInsert { + td.Left { + background: @gray-lighter; + } + td.Right { + background: @color-diff-ins; + } + } + + .ChangeDelete { + td.Left { + background: @color-diff-del; + } + td.Right { + background: @gray-lighter; + } + } + + .ChangeReplace { + td.Left { + color: black; + background: @color-diff-changed-old; + del { + background: @color-diff-del; + } + } + + td.Right { + color: black; + background: @color-diff-changed-new; + ins { + background: @color-diff-ins; + } + } + + } +} + +.Differences .Skipped { + background: @gray-lightest; +} + +.DifferencesInline .ChangeReplace .Left, +.DifferencesInline .ChangeDelete .Left { + background: #fdd; +} + +.DifferencesInline .ChangeReplace .Right, +.DifferencesInline .ChangeInsert .Right { + background: #dfd; +} + +.DifferencesInline .ChangeReplace ins { + background: #9e9; +} + +.DifferencesInline .ChangeReplace del { + background: #e99; +} +/** END of php-diff **/ |