summaryrefslogtreecommitdiffstats
path: root/public/css/icinga/widgets.less
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-13 11:46:43 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-13 11:46:43 +0000
commit3e02d5aff85babc3ffbfcf52313f2108e313aa23 (patch)
treeb01f3923360c20a6a504aff42d45670c58af3ec5 /public/css/icinga/widgets.less
parentInitial commit. (diff)
downloadicingaweb2-3e02d5aff85babc3ffbfcf52313f2108e313aa23.tar.xz
icingaweb2-3e02d5aff85babc3ffbfcf52313f2108e313aa23.zip
Adding upstream version 2.12.1.upstream/2.12.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'public/css/icinga/widgets.less')
-rw-r--r--public/css/icinga/widgets.less666
1 files changed, 666 insertions, 0 deletions
diff --git a/public/css/icinga/widgets.less b/public/css/icinga/widgets.less
new file mode 100644
index 0000000..3518cbe
--- /dev/null
+++ b/public/css/icinga/widgets.less
@@ -0,0 +1,666 @@
+/*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */
+
+#announcements > ul {
+ background-color: @body-bg-color;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+
+ > li {
+ border-bottom: 1px solid @gray-lighter;
+ line-height: 1.5em;
+ padding: 0.5em 1em 0.5em 3em;
+
+ position: relative;
+
+ &:before {
+ color: @icinga-blue;
+ content: "\e811";
+ font-family: 'ifont';
+
+ position: absolute;
+ left: 1.25em;
+ }
+
+ &:last-child {
+ border-bottom: none;
+ }
+
+ a {
+ color: @icinga-blue;
+ }
+
+ .message {
+ display: inline-block;
+ vertical-align: middle;
+ padding-right: 1.5em;
+ font-size: 7/6em;
+ }
+
+ p {
+ margin-bottom: 0;
+ }
+ }
+}
+
+.acknowledge-announcement-control,
+.application-state-acknowledge-message-control {
+ background: none;
+ border: none;
+ display: block;
+ margin-top: -0.75em;
+
+ position: absolute;
+ right: .75em;
+ top: 50%;
+}
+
+.application-state-acknowledge-message-control .link-button {
+ color: #fff;
+
+ &:hover .icon-cancel {
+ color: @icinga-blue;
+ }
+}
+
+#application-state-summary > div {
+ background-color: @color-critical;
+ color: @text-color-on-icinga-blue;
+ line-height: 1.5em;
+ padding: 0.5em 1em 0.5em 3em;
+
+ position: relative;
+
+ &:before {
+ content: "\e84d";
+ font-family: 'ifont';
+
+ position: absolute;
+ text-align: center;
+ left: .4em;
+ padding: .5em;
+ width: 3em;
+ top: 0;
+ }
+
+ > section {
+ margin-left: .5em;
+ }
+
+ > form .icon-cancel:before {
+ color: @text-color-on-icinga-blue;
+ }
+}
+
+.dashboard-link {
+ .clearfix();
+ display: block;
+ max-width: 100%;
+ vertical-align: middle;
+ padding: 1em;
+ width: 36em;
+
+ &:hover {
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
+
+ -webkit-box-shadow: 0 0 0.5em 0 rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: 0 0 0.5em 0 rgba(0, 0, 0, 0.2);
+ box-shadow: 0 0 0.5em 0 rgba(0, 0, 0, 0.2);
+
+ background-color: @tr-hover-color;
+ text-decoration: none;
+ }
+}
+
+.dashboard.content > .container {
+ overflow-x: auto;
+}
+
+.link-meta {
+ display: table-cell;
+ vertical-align: middle;
+}
+
+.link-label {
+ font-weight: @font-weight-bold;
+}
+
+.link-description {
+ color: @text-color-light;
+}
+
+.link-icon {
+ display: table-cell;
+ padding-right: .5em;
+ vertical-align: middle;
+ text-align: center;
+
+ > i {
+ font-size: 3em;
+ opacity: 0.7;
+ line-height: 1.5;
+
+ &:before {
+ min-width: 1.25em;
+ }
+ }
+
+ > img {
+ width: 3em;
+ height: 3em;
+ margin-right: .6em;
+ }
+}
+
+table.historycolorgrid {
+ font-size: 1.5em;
+}
+
+table.historycolorgrid th {
+ width: 1em;
+ height: 1em;
+ margin: 0.5em;
+ font-size: 0.55em;
+ font-weight: bold;
+}
+
+table.historycolorgrid td {
+ width: 1em;
+ height: 1em;
+ margin: 1em;
+}
+
+table.historycolorgrid td:hover {
+ opacity: 0.5;
+}
+
+table.historycolorgrid td.weekday {
+ font-size: 0.55em;
+ font-weight: bold;
+ width: 2.5em;
+ opacity: 1.0;
+}
+
+table.historycolorgrid a, table.historycolorgrid span {
+ .rounded-corners(0.2em);
+ margin: 0;
+ text-decoration: none;
+ display: block;
+ width: 1.1em;
+ height: 1.1em;
+}
+
+table.historycolorgrid a:hover {
+ text-decoration: none;
+}
+
+table.multiselect tr[href] td {
+ user-select: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+}
+
+#main div.filter {
+ .search.search-input {
+ width: 8em;
+ }
+
+ form.editor {
+ input[type=text], select {
+ width: 12em;
+ height: 2em;
+ line-height: 1;
+ }
+
+ ul.tree li.active {
+ background-color: @gray-lightest;
+ }
+
+ button {
+ padding: .5em;
+ border: none;
+ background: none;
+ color: @text-color;
+
+ &:hover, &:focus {
+ color: @icinga-blue;
+ }
+ }
+
+ .buttons {
+ margin-left: 25em;
+ padding: .25em 0;
+ }
+
+ .buttons input:not(:last-child) {
+ margin-right:.5em;
+ }
+
+ ul.tree {
+ .filter-operator {
+ width: 5em;
+ }
+
+ .new-filter {
+ background: #ffb;
+ }
+
+ .filter-rule {
+ width: 4em;
+ }
+ }
+ }
+}
+
+form.role-form {
+ &.icinga-form .control-label-group {
+ width: 20em;
+ }
+
+ .control-label-group em {
+ color: @text-color-light;
+ font-style: normal;
+ }
+
+ .unrestricted-role {
+ text-decoration: line-through;
+ }
+
+ .control-label > * {
+ display: inline-block;
+ }
+
+ summary {
+ border-bottom: 1px solid @gray-light;
+ .user-select(none);
+ cursor: pointer;
+
+ font-weight: @font-weight-bold;
+ margin: 0.556em 0 0.333em;
+ font-size: 1.167em;
+
+ display: flex;
+ align-items: baseline;
+ .privilege-preview {
+ flex: 1 1 auto;
+ }
+
+ > :first-child {
+ display: inline-block;
+ width: 20em / 1.167em; // element label width / summary font-size
+ }
+
+ > :nth-last-child(1),
+ > :nth-last-child(2) {
+ font-size: .75em;
+ opacity: .6;
+ }
+
+ .privilege-preview .icon {
+ &.granted {
+ color: @color-granted;
+ }
+
+ &.refused {
+ color: @color-refused;
+ }
+
+ &.restricted {
+ color: @color-restricted;
+ }
+ }
+ }
+
+ .collapsible {
+ summary em {
+ font-size: .857em;
+ font-weight: normal;
+ color: @text-color-light;
+ }
+
+ h4 {
+ display: inline-block;
+ width: 20em;
+ margin-top: 1.5em;
+ padding-right: .5625em;
+ text-align: right;
+
+ & ~ i {
+ display: inline-block;
+ width: 2.625em;
+ margin-right: 1em;
+ text-align: center;
+
+ &.icon-ok {
+ color: @color-granted;
+ }
+
+ &.icon-cancel {
+ color: @color-refused;
+ }
+ }
+ }
+ }
+}
+
+ul.tree select:first-of-type { /* ?? */
+ margin-bottom: 0.3em;
+ margin-left: 2em;
+}
+
+ul.tree {
+ padding: 0;
+ margin: 0;
+ padding-top: .5em;
+}
+
+ul.tree ul {
+ padding-left: 1em;
+}
+
+ul.tree li {
+ margin: 0;
+ list-style-type: none;
+ position: relative;
+ padding: 0;
+}
+
+ul.tree li .handle {
+ background-image: url('../img/tree/tree-minus.gif');
+ background-repeat: no-repeat;
+ display: inline-block;
+ position: absolute;
+ width: 1.5em;
+ height: 2em;
+ left: 0em;
+ background-position: center center;
+ z-index: 1;
+ cursor: pointer;
+}
+
+ul.tree li.collapsed > .handle {
+ background-image: url('../img/tree/tree-plus.gif');
+}
+
+ul.tree li.collapsed > ul {
+ display: none;
+}
+
+ul.tree li::before, ul.tree li::after {
+ content: '';
+ position: absolute;
+ right: auto;
+ left: -0.2em;
+ border-color: @gray-light;
+ border-style: dotted;
+ border-width: 0;
+}
+
+/* This is the left vertical line */
+ul.tree li::before {
+ border-left-width: 1px;
+ top: -.5em;
+ width: 1em;
+ height: 2.5em;
+ bottom: 1em;
+}
+
+/* This is the horizontal dash in front of each item */
+ul.tree li::after {
+ border-top-width: 1px;
+ top: 1em;
+ width: 2em;
+ height: 1em;
+}
+
+/* Stop left vertical line at "mid-height" after last nodes (at each level) */
+ul.tree li:last-child::before {
+ height: 1.5em;
+}
+
+/* No border for the root element - there must be only ONE root */
+ul.tree > li::before, ul.tree > li::after {
+ display: none;
+}
+
+/* No connector before (each) root element */
+ul.tree > ul > li::before, ul.tree > ul > li::after {
+ border: 0;
+}
+
+ul.tree li a {
+ display: inline-block;
+ line-height: 2em;
+ padding: 0 .5em;
+ text-decoration: none;
+ color: @gray;
+ background-repeat: no-repeat;
+ background-position: 0.8em 0.4em;
+}
+
+ul.tree li a.error {
+ color: @color-critical-handled;
+}
+
+ul.tree li a:hover {
+ color: @text-color;
+ text-decoration: underline;
+}
+
+ul.tree li a.error:hover {
+ color: @color-critical;
+}
+
+/* charts should grow as much as possible but never beyond the current viewport's size */
+.svg-container-responsive {
+ padding: 1.5em;
+ height: 80vh;
+}
+
+.tipsy .tipsy-inner {
+ // overwrite tooltip max width, we need them to grow bigger
+ font-family: @font-family;
+ font-size: @font-size-small;
+ max-width: 300px;
+ text-align: left;
+ background-color: rgba(0,0,0,0.8);
+}
+
+.progress-label span {
+ font-size: 1.5em;
+ .animate(blink 1.4s infinite both);
+
+ &:nth-child(2) {
+ animation-delay: .2s;
+ }
+
+ &:nth-child(3) {
+ animation-delay: .4s;
+ }
+}
+
+.flyover:not(.flyover-expanded) .flyover-content {
+ display: none;
+}
+
+.flyover {
+ position: relative;
+
+ .flyover-content {
+ background-color: @body-bg-color;
+ border: 1px solid;
+ border-color: @gray-lighter;
+ box-shadow: 0 0 .5em 0 rgba(0, 0, 0, 0.2);
+ position: absolute;
+ padding: @vertical-padding @horizontal-padding;
+ .rounded-corners();
+ }
+
+ &.flyover-arrow-top .flyover-content:before {
+ background: @body-bg-color;
+ border-left: 1px solid @gray-lighter;
+ border-top: 1px solid @gray-lighter;
+ content: "";
+ height: 1em;
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+ width: 1em;
+
+ position: absolute;
+ left: 6px;
+ top: -7px;
+ }
+
+ &.flyover-right .flyover-content {
+ left: auto;
+ right: 0;
+ }
+
+ &.flyover-arrow-top.flyover-right .flyover-content:before {
+ left: auto;
+ right: 6px;
+ }
+}
+
+.slice-state-ok {
+ stroke: @color-ok;
+ background: @color-ok;
+}
+
+.slice-state-warning-handled {
+ stroke: @color-warning-handled;
+ background: @color-warning-handled;
+}
+
+.slice-state-warning {
+ stroke: @color-warning;
+ background: @color-unreachable-handled;
+}
+
+.slice-state-critical-handled {
+ stroke: @color-critical-handled;
+ background: @color-critical-handled;
+}
+
+.slice-state-critical {
+ stroke: @color-critical;
+ background: @color-critical;
+}
+
+.slice-state-unknown-handled {
+ stroke: @color-unknown-handled;
+ background: @color-unknown-handled;
+}
+
+.slice-state-unknown {
+ stroke: @color-unknown;
+ background: @color-unknown;
+}
+
+.slice-state-unreachable-handled {
+ stroke: @color-unreachable-handled;
+ background: @color-unreachable-handled;
+}
+
+.slice-state-unreachable {
+ stroke: @color-unreachable;
+ background: @color-unreachable;
+}
+
+.slice-state-pending {
+ stroke: @color-pending;
+ background: @color-pending;
+}
+
+.slice-state-not-checked {
+ stroke: @gray-light;
+ background: @gray-light;
+}
+
+.donut {
+ width: 22em;
+ height: 22em;
+ min-width: 11.5em;
+ display: table;
+}
+
+.donut-graph {
+ width: 22em;
+ height: 22em;
+}
+
+.donut-label {
+ font-weight: bold;
+ fill: @text-color;
+}
+
+.donut-label {
+ margin-top: -12.5em;
+ text-align: center;
+}
+
+.donut-label-big {
+ color: @gray-light;
+ .fg-stateful();
+ font-size: 6em;
+ line-height: 0;
+ text-anchor: middle;
+ &:hover {
+ text-decoration: none;
+ }
+}
+
+.donut-label-small {
+ fill: @text-color;
+ font-size: 1.2em;
+ text-anchor: middle;
+ -moz-transform: translateY(0.35em);
+ -ms-transform: translateY(0.35em);
+ -webkit-transform: translateY(0.35em);
+ transform: translateY(0.35em);
+}
+
+.donut-container {
+ float: left;
+
+ &:not(:last-of-type) {
+ margin-right: 10em;
+ }
+}
+
+.dashboard .donut-container .donut-legend {
+ margin-left: auto;
+}
+
+.donut-legend {
+ width: 50%;
+ padding: 0;
+ margin-left: 18em;
+ list-style-type: none;
+
+ li {
+ vertical-align: middle;
+
+ &:not(:last-child) {
+ margin-bottom: .5em;
+ }
+
+ .badge {
+ font-weight: bold;
+ margin-right: .5em;
+ vertical-align: initial;
+ }
+ }
+}
+
+html.no-js .progress-label {
+ display: none;
+}
+