summaryrefslogtreecommitdiffstats
path: root/public/css
diff options
context:
space:
mode:
Diffstat (limited to 'public/css')
-rw-r--r--public/css/module.less996
1 files changed, 996 insertions, 0 deletions
diff --git a/public/css/module.less b/public/css/module.less
new file mode 100644
index 0000000..f048863
--- /dev/null
+++ b/public/css/module.less
@@ -0,0 +1,996 @@
+a:focus {
+ outline: none;
+ text-decoration: underline;
+ &::before {
+ text-decoration: none;
+ }
+}
+
+.action-bar {
+ float: left;
+ 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;
+ }
+}
+
+.controls {
+ &.sort-control,
+ &.want-fullscreen > a {
+ float: right;
+ }
+}
+
+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 summary {
+ cursor: pointer;
+ }
+ }
+
+ li {
+ > .icon,
+ summary > .icon {
+ opacity: .75;
+ }
+
+ span.state-ball ~ i:last-of-type {
+ margin-right: 0;
+ }
+ }
+
+ // ghost style
+ &.sortable > li.sortable-ghost {
+ > details {
+ 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 > .details: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 summary {
+ padding: .291666667em 0;
+ border-bottom: 1px solid @gray-light;
+ user-select: none;
+
+ > .icon:nth-child(1),
+ > .icon:nth-child(2) {
+ min-width: 1.3em; // 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;
+ }
+ }
+ }
+
+ li.process.sortable-ghost details:not([open]) > summary {
+ border-bottom: none;
+ }
+
+ // TODO: Remove once support for Icinga Web 2.10.x is dropped
+ li.process details:not(.collapsible) {
+ &[open] > summary .expand-icon {
+ display: none;
+ }
+
+ &:not([open]) > summary .collapse-icon {
+ display: none;
+ }
+ }
+
+ // subprocess style
+ li.process > details 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 summary,
+ 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;
+
+ i.icon {
+ font-size: 0.75em;
+ line-height: 0.08333em;
+ vertical-align: 0.125em;
+
+ &::before {
+ margin: 0 .3em;
+ }
+ }
+ }
+ }
+
+ // collapse handling
+ li.process details:not([open]) {
+ margin-bottom: (@vertical-tree-item-gap * 2);
+
+ > ul.bp {
+ display: none;
+ }
+ }
+
+ // hover style
+ li.process:hover summary {
+ background-color: @tr-active-color;
+ }
+ li:not(.process):hover {
+ background-color: @tr-active-color;
+ }
+
+ li.process summary > .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;
+ }
+ }
+}
+
+// ** Node inspect broken files **/
+ul.broken-files {
+ .rounded-corners();
+ padding: 1em;
+ margin: 1em 0;
+ border: 2px solid @state-warning;
+ font-size: 1.25em;
+ list-style: none;
+
+ li {
+ padding-left: 1em;
+ font-weight: bold;
+ }
+}
+// ** END Node inspect broken files **/
+
+/** 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.5em 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;
+
+ &.handled-icon {
+ display: inline-block;
+ margin-top: 0.15em;
+ float: right;
+ width: 1.5em;
+ height: 1.5em;
+ }
+ }
+ 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,
+ li .link-button {
+ 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.bp-form {
+ input[type=file] {
+ padding-right: 1em;
+ }
+
+ input[type=submit]:first-of-type {
+ border-width: 2px;
+ }
+
+ p.description {
+ padding: 1em 1em;
+ margin: 0;
+ font-style: italic;
+ width: 100%;
+ }
+
+ 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;
+ }
+
+ dl {
+ margin: 0;
+ padding: 0;
+ }
+
+ select option {
+ padding-left: 0.5em;
+ }
+
+ dt label {
+ width: auto;
+ font-weight: normal;
+ font-size: inherit;
+
+ &.required {
+ &::after {
+ content: '*'
+ }
+ }
+
+ &:hover {
+ text-decoration: underline;
+ cursor: pointer;
+ }
+ }
+
+ fieldset {
+ min-width: 36em;
+ }
+
+ dd input.related-action[type='submit'] {
+ display: none;
+ }
+
+ dd.active li.active input.related-action[type='submit'] {
+ display: inline-block;
+ }
+
+ dd.active {
+ p.description {
+ color: inherit;
+ font-style: normal;
+ }
+ }
+
+ dd {
+ padding: 0.3em 0.5em;
+ margin: 0;
+ }
+
+ dt {
+ padding: 0.5em 0.5em;
+ margin: 0;
+ }
+
+ dt.active, dd.active {
+ background-color: @tr-active-color;
+ }
+
+ dt {
+ display: inline-block;
+ vertical-align: top;
+ min-width: 12em;
+ min-height: 2.5em;
+ width: 30%;
+ &.errors label {
+ color: @color-critical;
+ }
+ }
+
+ .errors label {
+ color: @color-critical;
+ }
+
+ 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%;
+ }
+ }
+
+ dd:after {
+ display: block;
+ content: '';
+ }
+
+ textarea {
+ height: auto;
+ }
+
+ dd ul.errors {
+ list-style-type: none;
+ padding-left: 0.3em;
+
+ li {
+ color: @color-critical;
+ padding: 0.3em;
+ }
+ }
+
+
+ #_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 **/
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-11 08:45:05 +0000