diff options
Diffstat (limited to '')
-rw-r--r-- | public/css/module.less | 537 | ||||
-rw-r--r-- | public/css/vendor/codemirror/addon/dialog/dialog.css | 32 | ||||
-rw-r--r-- | public/css/vendor/codemirror/addon/search/matchesonscrollbar.css | 8 | ||||
-rw-r--r-- | public/css/vendor/codemirror/codemirror.css | 341 |
4 files changed, 918 insertions, 0 deletions
diff --git a/public/css/module.less b/public/css/module.less new file mode 100644 index 0000000..659984d --- /dev/null +++ b/public/css/module.less @@ -0,0 +1,537 @@ +/* Copyright (C) 2017 Icinga Development Team <info@icinga.com> */ + +.tlv-overview-tiles .tlv-overview-tile { + display: block; + + float: left; + + padding: 1em; + margin: 1em; + + position: relative; + + width: 20em; + height: 10em; + + border: 1px solid @gray; + + text-decoration: none; + + .tlv-title { + font-weight: bold; + font-size: 1.3em; + } + + .tlv-name { + color: @gray; + } + + .action-links { + position: absolute; + right: 0; + bottom: 1em; + } + + .unsaved { + display: inline-block; + padding: 0.2em; + + font-weight: bold; + + background: @tlv-color-warning-bg; + color: @tlv-color-warning-fg; + } +} + +// see Icinga Web 2: public/css/icinga/base.less +//@import '../../vendor/icingaweb2/public/css/icinga/base.less'; +@tlv-color-critical-bg: @color-critical; +@tlv-color-critical-fg: white; +@tlv-color-critical-handled-bg: #FFCCBC; // Material Design Deep Orange 100 +@tlv-color-critical-handled-fg: #6d4148; +@tlv-color-warning-bg: @color-warning; +@tlv-color-warning-fg: #6d572b; +@tlv-color-warning-handled-bg: #FFF9C4; // Material Design Yellow 100 +@tlv-color-warning-handled-fg: #6d572b; +@tlv-color-unknown-bg: @color-unknown; +@tlv-color-unknown-fg: white; +@tlv-color-unknown-handled-bg: #E1BEE7; // Material Design Purple 100 +@tlv-color-unknown-handled-fg: #57326d; +@tlv-color-ok-bg: @color-ok; +@tlv-color-ok-fg: white; +@tlv-color-downtime-bg: @color-ok; +@tlv-color-downtime-fg: #333; +@tlv-color-downtime-handled-bg: @color-ok; +@tlv-color-downtime-handled-fg: #ffff00; +@tlv-color-pending-bg: @color-pending; +@tlv-color-pending-fg: #32486d; +@tlv-color-missing-bg: #ccc; +@tlv-color-missing-fg: #333; + +.tlv-status-tile { + &.critical, &.down { + background-color: @tlv-color-critical-bg; + color: @tlv-color-critical-fg; + } + &.critical.handled, &.down.handled { + background-color: @tlv-color-critical-handled-bg; + color: @tlv-color-critical-handled-fg; + } + &.unknown, &.unreachable { + background-color: @tlv-color-unknown-bg; + color: @tlv-color-unknown-fg; + } + &.unknown.handled, &.unreachable.handled { + background-color: @tlv-color-unknown-handled-bg; + color: @tlv-color-unknown-handled-fg; + } + &.warning { + background-color: @tlv-color-warning-bg; + color: @tlv-color-warning-fg; + } + &.warning.handled { + background-color: @tlv-color-warning-handled-bg; + color: @tlv-color-warning-handled-fg; + } + &.ok, &.up { + background-color: @tlv-color-ok-bg; + color: @tlv-color-ok-fg; + } + &.downtime.active { + background-color: @tlv-color-downtime-bg; + color: @tlv-color-downtime-fg; + } + &.downtime.handled { + background-color: @tlv-color-downtime-handled-bg; + color: @tlv-color-downtime-handled-fg; + } + &.pending { + background-color: @tlv-color-pending-bg; + color: @tlv-color-pending-fg; + } + &.missing { + background-color: @tlv-color-missing-bg; + color: @tlv-color-missing-fg; + } + &.total { + background-color: @icinga-blue; + color: @text-color-on-icinga-blue; + } +} + +.tlv-status-section { + &.critical, &.down { + border-color: @tlv-color-critical-bg; + } + &.critical.handled, &.down.handled { + border-color: @tlv-color-critical-handled-bg; + } + &.unknown, &.unreachable { + border-color: @tlv-color-unknown-bg; + } + &.unknown.handled, &.unreachable.handled { + border-color: @tlv-color-unknown-handled-bg; + } + &.warning { + border-color: @tlv-color-warning-bg; + } + &.warning.handled { + border-color: @tlv-color-warning-handled-bg; + } + &.ok, &.up { + border-color: @tlv-color-ok-bg; + } + &.pending { + border-color: @tlv-color-pending-bg; + } + &.missing { + border-color: @tlv-color-missing-bg; + } +} + +.tlv-content { + position: relative; + width: 100%; + height: 100%; + + padding-right: 0 !important; + padding-left: 0 !important; + + .tlv-header { + margin: 0 12px; + z-index: 99; + } +} + +.tlv-header { + position: relative; + + line-height: 2em; + height: 2em; + + h1 { + display: inline-block; + border: none; + margin: 0 0.5em 0 0; + } + + .last-refresh { + display: inline-block; + font-weight: bold; + margin: 0 0.5em; + } + + .action-links { + display: inline-block; + margin: 0 0.5em; + } + + .badges { + display: inline-block; + position: absolute; + right: 0; + + font-size: 1.2em; + + .badge { + margin-left: 0.2em; + } + } +} + +.tlv-view-tiles { + position: relative; + + clear: both; + display: flex; + flex-wrap: wrap; + align-content: stretch; + + height: 100%; + + margin-top: -2em; + padding-top: 2em; + + .tlv-tiles { + display: flex; + flex-wrap: wrap; + align-content: stretch; + flex-grow: 1; + + width: 100%; + height: 100%; + + margin-top: -2.3em; // - padding title - margin tile + padding-top: 2.3em; // + padding title + margin tile + } + + .tlv-tile { + margin: 0.1em; + flex-grow: 1; + + overflow: hidden; + + .badges { + display: inline-block; + + font-weight: normal; + margin-left: 0.2em; + + .badge { + font-size: 0.7em; + + border: 0.1em solid white; + margin-left: 0.2em; + } + } + } + + .tlv-tile-title { + display: inline-block; + height: 1.8em; + width: 100%; + + padding: 0.1em; + } + + > .tlv-tile { // first level + min-width: 40%; + + border-style: solid; + border-width: 1px 1px 1px 4px; + + padding: 0.1em; + margin: 0.3em 0.5em; + + > .tlv-tile-title { + font-weight: bold; + + > .badges { + float: right; + } + } + + > .tlv-tiles > .tlv-tile { // second level + min-width: 10%; + + > .tlv-tile-title { + height: 100%; + text-align: center; + + .badge { + margin-top: -0.3em; + } + + &:before { + content: ""; + display: inline-block; + height: 100%; + vertical-align: middle; + } + } + } + } +} + +#layout.wide-layout .tlv-view-tiles .tlv-tile-title { + font-size: 1.3em; +} + +#layout.wide-layout.twocols .tlv-view-tiles .tlv-tile-title { + font-size: 1.1em; +} + +.tlv-view-tree { + .tlv-tree-node { + display: flex; + flex-wrap: wrap; + flex-grow: 1; + + width: 100%; + + &.tlv-collapsed { + width: auto; + } + + background: none; + border-style: solid; + + border-width: 2px 0 0 5px; + + padding: 0.2em 0 0 1em; + + &.tlv-collapsed { + > .tlv-tree-node, > .tlv-node-icinga { + display: none; + } + } + + .badges { + display: inline-block; + font-size: 0.9em; + + .badge { + border: 0.1em solid white; + margin-left: 0.2em; + } + } + } + + > .tlv-tree-node { + border-right-width: 2px; + + &:last-of-type { + border-bottom-width: 2px; + } + } + + .tlv-tree-title { + display: block; + width: 100%; + white-space: nowrap; + margin: -0.2em 0 0 -1em; + padding: 0.3em 0.3em 0.3em 0.3em; + + .badges { + float: right; + } + } + + .tlv-node-icinga { + flex-grow: 1; + + margin: 0.2em; + padding: 0.2em 1em; + white-space: nowrap; + + border-radius: 0.5em; + + font-size: 0.9em; + } +} + +.tlv-collapsible { + .icon.tlv-collapse-handle::before { + font-size: 1.3em; + content: '\e81d'; + } + + .collapsed { + .icon.tlv-collapse-handle::before { + content: '\e820'; + } + } +} + +/** BEGIN of breadcrumb **/ +.breadcrumb { + list-style: none; + overflow: hidden; + padding: 0; + + .badges { + display: inline-block; + padding: 0 0 0 0.5em; + .badge { + line-height: 1.25em; + font-size: 0.8em; + border: 1px solid white; + margin: -0.25em 1px 0 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: white; + margin: 0; + font-size: 1.2em; + text-decoration: none; + padding-left: 2em; + line-height: 2.5em; + background: @icinga-blue; + position: relative; + display: block; + float: left; + &:focus { + outline: none; + } +} + +.breadcrumb li a:before, .breadcrumb li 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 a:before { + border-left: 1.2em solid white; + margin-left: 1px; + z-index: 1; +} + +.breadcrumb li a:after { + border-left: 1.2em solid @icinga-blue; + z-index: 2; +} + +.breadcrumb li:first-child a { + padding-left: 1em; + padding-right: 0.5em; +} + +.breadcrumb li:last-child a { + cursor: default; +} + +.breadcrumb li:last-child a:hover { + +} + +.breadcrumb li:not(:last-child) a:hover { + background: @text-color; + color: white; +} + +.breadcrumb li:not(:last-child) a:hover:after { + border-left-color: @text-color; +} + +.breadcrumb li a:focus { + text-decoration: underline; +} + +#layout.twocols, #layout.layout-minimal, div.compact { + .breadcrumb { + font-size: 0.833em; + } +} + +/** END of breadcrumb **/ + +.action-links { + .action-link { + margin-right: 1em; + } +} + +.warning-note { + display: inline-block; + + padding: 1px 5px; + background: @tlv-color-warning-bg; + color: @tlv-color-warning-fg +} + +textarea.code-editor { + min-height: 45em; + width: 100%; +} + +.CodeMirror { + min-height: 60em; + width: 100%; + + margin-bottom: 1em; + + border: 1px solid @gray-light; + + pre { + font-family: @font-family-fixed; + font-size: 1.2em; + } +} + +div[href].action.active { + border-left-color: @icinga-blue; +} + +div[href].action:hover { + cursor: pointer; + + a[href]:first-of-type { + text-decoration: underline; + } +} diff --git a/public/css/vendor/codemirror/addon/dialog/dialog.css b/public/css/vendor/codemirror/addon/dialog/dialog.css new file mode 100644 index 0000000..677c078 --- /dev/null +++ b/public/css/vendor/codemirror/addon/dialog/dialog.css @@ -0,0 +1,32 @@ +.CodeMirror-dialog { + position: absolute; + left: 0; right: 0; + background: inherit; + z-index: 15; + padding: .1em .8em; + overflow: hidden; + color: inherit; +} + +.CodeMirror-dialog-top { + border-bottom: 1px solid #eee; + top: 0; +} + +.CodeMirror-dialog-bottom { + border-top: 1px solid #eee; + bottom: 0; +} + +.CodeMirror-dialog input { + border: none; + outline: none; + background: transparent; + width: 20em; + color: inherit; + font-family: monospace; +} + +.CodeMirror-dialog button { + font-size: 70%; +} diff --git a/public/css/vendor/codemirror/addon/search/matchesonscrollbar.css b/public/css/vendor/codemirror/addon/search/matchesonscrollbar.css new file mode 100644 index 0000000..77932cc --- /dev/null +++ b/public/css/vendor/codemirror/addon/search/matchesonscrollbar.css @@ -0,0 +1,8 @@ +.CodeMirror-search-match { + background: gold; + border-top: 1px solid orange; + border-bottom: 1px solid orange; + -moz-box-sizing: border-box; + box-sizing: border-box; + opacity: .5; +} diff --git a/public/css/vendor/codemirror/codemirror.css b/public/css/vendor/codemirror/codemirror.css new file mode 100644 index 0000000..9d8ff0c --- /dev/null +++ b/public/css/vendor/codemirror/codemirror.css @@ -0,0 +1,341 @@ +/* BASICS */ + +.CodeMirror { + /* Set height, width, borders, and global font properties here */ + font-family: monospace; + height: 300px; + color: black; + direction: ltr; +} + +/* PADDING */ + +.CodeMirror-lines { + padding: 4px 0; /* Vertical padding around content */ +} +.CodeMirror pre { + padding: 0 4px; /* Horizontal padding of content */ +} + +.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { + background-color: white; /* The little square between H and V scrollbars */ +} + +/* GUTTER */ + +.CodeMirror-gutters { + border-right: 1px solid #ddd; + background-color: #f7f7f7; + white-space: nowrap; +} +.CodeMirror-linenumbers {} +.CodeMirror-linenumber { + padding: 0 3px 0 5px; + min-width: 20px; + text-align: right; + color: #999; + white-space: nowrap; +} + +.CodeMirror-guttermarker { color: black; } +.CodeMirror-guttermarker-subtle { color: #999; } + +/* CURSOR */ + +.CodeMirror-cursor { + border-left: 1px solid black; + border-right: none; + width: 0; +} +/* Shown when moving in bi-directional text */ +.CodeMirror div.CodeMirror-secondarycursor { + border-left: 1px solid silver; +} +.cm-fat-cursor .CodeMirror-cursor { + width: auto; + border: 0 !important; + background: #7e7; +} +.cm-fat-cursor div.CodeMirror-cursors { + z-index: 1; +} + +.cm-animate-fat-cursor { + width: auto; + border: 0; + -webkit-animation: blink 1.06s steps(1) infinite; + -moz-animation: blink 1.06s steps(1) infinite; + animation: blink 1.06s steps(1) infinite; + background-color: #7e7; +} +@-moz-keyframes blink { + 0% {} + 50% { background-color: transparent; } + 100% {} +} +@-webkit-keyframes blink { + 0% {} + 50% { background-color: transparent; } + 100% {} +} +@keyframes blink { + 0% {} + 50% { background-color: transparent; } + 100% {} +} + +/* Can style cursor different in overwrite (non-insert) mode */ +.CodeMirror-overwrite .CodeMirror-cursor {} + +.cm-tab { display: inline-block; text-decoration: inherit; } + +.CodeMirror-rulers { + position: absolute; + left: 0; right: 0; top: -50px; bottom: -20px; + overflow: hidden; +} +.CodeMirror-ruler { + border-left: 1px solid #ccc; + top: 0; bottom: 0; + position: absolute; +} + +/* DEFAULT THEME */ + +.cm-s-default .cm-header {color: blue;} +.cm-s-default .cm-quote {color: #090;} +.cm-negative {color: #d44;} +.cm-positive {color: #292;} +.cm-header, .cm-strong {font-weight: bold;} +.cm-em {font-style: italic;} +.cm-link {text-decoration: underline;} +.cm-strikethrough {text-decoration: line-through;} + +.cm-s-default .cm-keyword {color: #708;} +.cm-s-default .cm-atom {color: #219;} +.cm-s-default .cm-number {color: #164;} +.cm-s-default .cm-def {color: #00f;} +.cm-s-default .cm-variable, +.cm-s-default .cm-punctuation, +.cm-s-default .cm-property, +.cm-s-default .cm-operator {} +.cm-s-default .cm-variable-2 {color: #05a;} +.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;} +.cm-s-default .cm-comment {color: #a50;} +.cm-s-default .cm-string {color: #a11;} +.cm-s-default .cm-string-2 {color: #f50;} +.cm-s-default .cm-meta {color: #555;} +.cm-s-default .cm-qualifier {color: #555;} +.cm-s-default .cm-builtin {color: #30a;} +.cm-s-default .cm-bracket {color: #997;} +.cm-s-default .cm-tag {color: #170;} +.cm-s-default .cm-attribute {color: #00c;} +.cm-s-default .cm-hr {color: #999;} +.cm-s-default .cm-link {color: #00c;} + +.cm-s-default .cm-error {color: #f00;} +.cm-invalidchar {color: #f00;} + +.CodeMirror-composing { border-bottom: 2px solid; } + +/* Default styles for common addons */ + +div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;} +div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;} +.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); } +.CodeMirror-activeline-background {background: #e8f2ff;} + +/* STOP */ + +/* The rest of this file contains styles related to the mechanics of + the editor. You probably shouldn't touch them. */ + +.CodeMirror { + position: relative; + overflow: hidden; + background: white; +} + +.CodeMirror-scroll { + overflow: scroll !important; /* Things will break if this is overridden */ + /* 30px is the magic margin used to hide the element's real scrollbars */ + /* See overflow: hidden in .CodeMirror */ + margin-bottom: -30px; margin-right: -30px; + padding-bottom: 30px; + height: 100%; + outline: none; /* Prevent dragging from highlighting the element */ + position: relative; +} +.CodeMirror-sizer { + position: relative; + border-right: 30px solid transparent; +} + +/* The fake, visible scrollbars. Used to force redraw during scrolling + before actual scrolling happens, thus preventing shaking and + flickering artifacts. */ +.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { + position: absolute; + z-index: 6; + display: none; +} +.CodeMirror-vscrollbar { + right: 0; top: 0; + overflow-x: hidden; + overflow-y: scroll; +} +.CodeMirror-hscrollbar { + bottom: 0; left: 0; + overflow-y: hidden; + overflow-x: scroll; +} +.CodeMirror-scrollbar-filler { + right: 0; bottom: 0; +} +.CodeMirror-gutter-filler { + left: 0; bottom: 0; +} + +.CodeMirror-gutters { + position: absolute; left: 0; top: 0; + min-height: 100%; + z-index: 3; +} +.CodeMirror-gutter { + white-space: normal; + height: 100%; + display: inline-block; + vertical-align: top; + margin-bottom: -30px; +} +.CodeMirror-gutter-wrapper { + position: absolute; + z-index: 4; + background: none !important; + border: none !important; +} +.CodeMirror-gutter-background { + position: absolute; + top: 0; bottom: 0; + z-index: 4; +} +.CodeMirror-gutter-elt { + position: absolute; + cursor: default; + z-index: 4; +} +.CodeMirror-gutter-wrapper ::selection { background-color: transparent } +.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent } + +.CodeMirror-lines { + cursor: text; + min-height: 1px; /* prevents collapsing before first draw */ +} +.CodeMirror pre { + /* Reset some styles that the rest of the page might have set */ + -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; + border-width: 0; + background: transparent; + font-family: inherit; + font-size: inherit; + margin: 0; + white-space: pre; + word-wrap: normal; + line-height: inherit; + color: inherit; + z-index: 2; + position: relative; + overflow: visible; + -webkit-tap-highlight-color: transparent; + -webkit-font-variant-ligatures: contextual; + font-variant-ligatures: contextual; +} +.CodeMirror-wrap pre { + word-wrap: break-word; + white-space: pre-wrap; + word-break: normal; +} + +.CodeMirror-linebackground { + position: absolute; + left: 0; right: 0; top: 0; bottom: 0; + z-index: 0; +} + +.CodeMirror-linewidget { + position: relative; + z-index: 2; + overflow: auto; +} + +.CodeMirror-widget {} + +.CodeMirror-rtl pre { direction: rtl; } + +.CodeMirror-code { + outline: none; +} + +/* Force content-box sizing for the elements where we expect it */ +.CodeMirror-scroll, +.CodeMirror-sizer, +.CodeMirror-gutter, +.CodeMirror-gutters, +.CodeMirror-linenumber { + -moz-box-sizing: content-box; + box-sizing: content-box; +} + +.CodeMirror-measure { + position: absolute; + width: 100%; + height: 0; + overflow: hidden; + visibility: hidden; +} + +.CodeMirror-cursor { + position: absolute; + pointer-events: none; +} +.CodeMirror-measure pre { position: static; } + +div.CodeMirror-cursors { + visibility: hidden; + position: relative; + z-index: 3; +} +div.CodeMirror-dragcursors { + visibility: visible; +} + +.CodeMirror-focused div.CodeMirror-cursors { + visibility: visible; +} + +.CodeMirror-selected { background: #d9d9d9; } +.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; } +.CodeMirror-crosshair { cursor: crosshair; } +.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; } +.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; } + +.cm-searching { + background-color: #ffa; + background-color: rgba(255, 255, 0, .4); +} + +/* Used to force a border model for a node */ +.cm-force-border { padding-right: .1px; } + +@media print { + /* Hide the cursor when printing */ + .CodeMirror div.CodeMirror-cursors { + visibility: hidden; + } +} + +/* See issue #2901 */ +.cm-tab-wrap-hack:after { content: ''; } + +/* Help users use markselection to safely style text background */ +span.CodeMirror-selectedtext { background: none; } |