mirror of
https://github.com/Icinga/icingaweb2-module-businessprocess.git
synced 2025-12-25 09:09:34 -05:00
css: Adjust variable usages for compatiblity with v2.10
This commit is contained in:
Johannes Meyer
parent
455db3514e
commit
84c8ab9cd8
2 changed files with 197 additions and 73 deletions
|
|
@ -1,3 +1,9 @@
|
|||
@color-diff-ins: @color-ok;
|
||||
@color-diff-del: @color-critical;
|
||||
@color-diff-changed-old: fade(@color-critical, 30%);
|
||||
@color-diff-changed-new: fade(@color-ok, 30%);
|
||||
@color-change-replace-del: #e99;
|
||||
|
||||
a:focus {
|
||||
outline: none;
|
||||
text-decoration: underline;
|
||||
|
|
@ -22,7 +28,7 @@ a:focus {
|
|||
}
|
||||
|
||||
&.button-link {
|
||||
color: white;
|
||||
color: @text-color-on-icinga-blue;
|
||||
background: @icinga-blue;
|
||||
|
||||
&:active, &:focus {
|
||||
|
|
@ -55,7 +61,7 @@ a:focus {
|
|||
}
|
||||
|
||||
&.active {
|
||||
color: white;
|
||||
color: @text-color-on-icinga-blue;
|
||||
background-color: @icinga-blue;
|
||||
}
|
||||
|
||||
|
|
@ -89,9 +95,9 @@ div.bp.sortable > .sortable-ghost {
|
|||
}
|
||||
|
||||
.simulation div.bp {
|
||||
border-right: 1em solid @colorCriticalHandled;
|
||||
border-right: 1em solid @color-critical-handled;
|
||||
padding-right: 1em;
|
||||
background: white;
|
||||
background: @white;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -170,7 +176,7 @@ ul.bp {
|
|||
background-color: @gray-light;
|
||||
font-weight: bold;
|
||||
font-size: 1em;
|
||||
color: white;
|
||||
color: @text-color-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -201,6 +207,10 @@ ul.bp {
|
|||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> i.icon-service {
|
||||
opacity: .75;
|
||||
}
|
||||
}
|
||||
|
||||
// horizontal layout
|
||||
|
|
@ -266,7 +276,7 @@ ul.bp {
|
|||
|
||||
li.process > div > .state-ball,
|
||||
li:not(.process) > .state-ball {
|
||||
border: .15em solid white;
|
||||
border: .15em solid @body-bg-color;
|
||||
|
||||
&.size-s {
|
||||
width: 7em/6em;
|
||||
|
|
@ -301,17 +311,21 @@ ul.bp {
|
|||
padding: 1em;
|
||||
|
||||
&:hover {
|
||||
background-color: @gray-lighter;
|
||||
background-color: @tr-hover-color;
|
||||
}
|
||||
|
||||
.bp-link {
|
||||
> a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
color: @gray;
|
||||
vertical-align: middle;
|
||||
word-wrap: break-word;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
> span.header {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -324,7 +338,7 @@ ul.bp {
|
|||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 0px 5px #666;
|
||||
box-shadow: 0px 0px 5px @gray-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -339,7 +353,7 @@ ul.bp {
|
|||
.action {
|
||||
> a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
color: @gray;
|
||||
vertical-align: middle;
|
||||
display: block;
|
||||
padding: 1em;
|
||||
|
|
@ -349,8 +363,11 @@ ul.bp {
|
|||
box-sizing: border-box;
|
||||
|
||||
&.addnew:hover {
|
||||
background-color: @icinga-blue;
|
||||
color: white;
|
||||
background-color: @tr-hover-color;
|
||||
}
|
||||
|
||||
> span.header {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -365,7 +382,7 @@ ul.bp {
|
|||
padding: 0.3em 0.4em;
|
||||
|
||||
.badge {
|
||||
border: 1px solid white;
|
||||
border: 1px solid @white;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -381,11 +398,11 @@ td > a > .badges {
|
|||
background-color: transparent;
|
||||
}
|
||||
|
||||
.badge-critical, .badge-down { background: @colorCritical; }
|
||||
.badge-unknown, .badge-unreachable { background: @colorUnknown; }
|
||||
.badge-warning { background: @colorWarning; }
|
||||
.badge-pending { background: @colorPending; }
|
||||
.badge-missing { background: #ccc; }
|
||||
.badge-critical, .badge-down { background: @color-critical; }
|
||||
.badge-unknown, .badge-unreachable { background: @color-unknown; }
|
||||
.badge-warning { background: @color-warning }
|
||||
.badge-pending { background: @color-pending }
|
||||
.badge-missing { background: @gray; }
|
||||
/** END Badges **/
|
||||
|
||||
/** BEGIN Tiles **/
|
||||
|
|
@ -397,11 +414,11 @@ td > a > .badges {
|
|||
|
||||
.tiles.sortable > .sortable-ghost {
|
||||
opacity: 0.5;
|
||||
border: .2em dashed black;
|
||||
border: .2em dashed @black;
|
||||
}
|
||||
|
||||
.tiles > div {
|
||||
color: white;
|
||||
color: @body-bg-color;
|
||||
width: 12em;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
|
|
@ -427,7 +444,7 @@ td > a > .badges {
|
|||
left: 0;
|
||||
bottom: 0;
|
||||
margin: .5em;
|
||||
border: 1px solid white;
|
||||
border: 1px solid @white;
|
||||
}
|
||||
|
||||
> a {
|
||||
|
|
@ -438,7 +455,6 @@ td > a > .badges {
|
|||
padding: 1em 1em 0;
|
||||
font-weight: bold;
|
||||
word-wrap: break-word;
|
||||
color: @text-color-inverted;
|
||||
|
||||
& + p.children-count {
|
||||
margin: 0;
|
||||
|
|
@ -453,7 +469,7 @@ td > a > .badges {
|
|||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 0px 5px #666;
|
||||
box-shadow: 0px 0px 5px @gray;
|
||||
}
|
||||
|
||||
.actions {
|
||||
|
|
@ -518,38 +534,38 @@ td > a > .badges {
|
|||
}
|
||||
|
||||
.tiles {
|
||||
> .critical { background-color: @colorCritical; > a { text-shadow: 0 0 1px mix(#000, @colorCritical, 40%); }}
|
||||
> .critical.handled { background-color: @colorCriticalHandled; > a { text-shadow: 0 0 1px mix(#000, @colorCriticalHandled, 40%); }}
|
||||
> .down { background-color: @colorCritical; > a { text-shadow: 0 0 1px mix(#000, @colorCritical, 40%); }}
|
||||
> .down.handled { background-color: @colorCriticalHandled; > a { text-shadow: 0 0 1px mix(#000, @colorCriticalHandled, 40%); }}
|
||||
> .unknown { background-color: @colorUnknown; > a { text-shadow: 0 0 1px mix(#000, @colorUnknown, 40%); }}
|
||||
> .unknown.handled { background-color: @colorUnknownHandled; > a { text-shadow: 0 0 1px mix(#000, @colorUnknownHandled, 40%); }}
|
||||
> .unreachable { background-color: @colorUnknown; > a { text-shadow: 0 0 1px mix(#000, @colorUnknown, 40%); }}
|
||||
> .unreachable.handled { background-color: @colorUnknownHandled; > a { text-shadow: 0 0 1px mix(#000, @colorUnknownHandled, 40%); }}
|
||||
> .warning { background-color: @colorWarning; > a { text-shadow: 0 0 1px mix(#000, @colorWarning, 40%); }}
|
||||
> .warning.handled { background-color: @colorWarningHandled; > a { text-shadow: 0 0 1px mix(#000, @colorWarningHandled, 40%); }}
|
||||
> .ok { background-color: @colorOk; > a { text-shadow: 0 0 1px mix(#000, @colorOk, 40%); }}
|
||||
> .up { background-color: @colorOk; > a { text-shadow: 0 0 1px mix(#000, @colorOk, 40%); }}
|
||||
> .pending { background-color: @colorPending; > a { text-shadow: 0 0 1px mix(#000, @colorPending, 40%); }}
|
||||
> .missing { background-color: @gray-light; > a { text-shadow: 0 0 1px @gray }}
|
||||
> .empty { background-color: @gray-light; > a { text-shadow: 0 0 1px @gray }}
|
||||
> .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-light; > a { text-shadow: 0 0 1px @gray; }}
|
||||
> .empty { background-color: @gray-light; > a { text-shadow: 0 0 1px @gray; } }
|
||||
}
|
||||
|
||||
/*
|
||||
.tiles > div:hover {
|
||||
> .critical { background: white; color: @text-color; }
|
||||
> .critical.handled { background: @colorCriticalHandled; }
|
||||
> .down { background: @colorCritical; }
|
||||
> .down.handled { background: @colorCriticalHandled; }
|
||||
> .unknown { background: @colorUnknown; }
|
||||
> .unknown.handled { background: @colorUnknownHandled; }
|
||||
> .unreachable { background: @colorUnknown; }
|
||||
> .unreachable.handled { background: @colorUnknownHandled; }
|
||||
> .warning { background: @colorWarning; }
|
||||
> .warning.handled { background: @colorWarningHandled; }
|
||||
> .ok { background: @colorOk; }
|
||||
> .pending { background: @colorPending; }
|
||||
> .missing { background: #ccc; }
|
||||
> .critical { background: @white; color: @text-color; }
|
||||
> .critical.handled { background: @color-critical-handled; }
|
||||
> .down { background: @color-critical; }
|
||||
> .down.handled { background: @color-critical-handled; }
|
||||
> .unknown { background: @color-unknown; }
|
||||
> .unknown.handled { background: @color-unknown-handled; }
|
||||
> .unreachable { background: @color-unknown; }
|
||||
> .unreachable.handled { background: @color-unknown-handled; }
|
||||
> .warning { background: @color-warning; }
|
||||
> .warning.handled { background: @color-warning-handled; }
|
||||
> .ok { background: @color-ok; }
|
||||
> .pending { background: @color-pending; }
|
||||
> .missing { background: @gray; }
|
||||
}
|
||||
*/
|
||||
/*
|
||||
|
|
@ -623,7 +639,7 @@ td > a > .badges {
|
|||
|
||||
> .state-ball {
|
||||
margin-right: .5em;
|
||||
border: .15em solid white;
|
||||
border: .15em solid @body-bg-color;
|
||||
|
||||
&.size-s {
|
||||
width: 7em/6em;
|
||||
|
|
@ -641,12 +657,13 @@ td > a > .badges {
|
|||
|
||||
&:last-of-type {
|
||||
border-radius: .25em;
|
||||
border: 1px solid @icinga-blue;
|
||||
border: 1px solid transparent;
|
||||
background: @icinga-blue;
|
||||
color: @text-color-on-icinga-blue;
|
||||
padding-right: 1.2em;
|
||||
|
||||
a {
|
||||
color: white;
|
||||
color: @text-color-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -678,17 +695,17 @@ td > a > .badges {
|
|||
&.impact {
|
||||
.breadcrumb li:not(:last-of-type) a:after {
|
||||
.transition(border-left-color 2s 0.66s linear ~'!important');
|
||||
border-left-color: @gray-lighter !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 !important;
|
||||
border-left-color: @gray-light;
|
||||
}
|
||||
|
||||
.breadcrumb li:not(:last-of-type) {
|
||||
.transition(border-color 2s 1s linear ~'!important');
|
||||
border-color: @gray-light !important;
|
||||
border-color: @gray-light;
|
||||
}
|
||||
.breadcrumb li:not(:last-of-type) a:hover {
|
||||
background-color: transparent !important;
|
||||
|
|
@ -705,7 +722,7 @@ td > a > .badges {
|
|||
padding-right: 0.5em;
|
||||
}
|
||||
|
||||
.breadcrumb li:not(:last-child) a:hover { background: @icinga-blue; color: white; }
|
||||
.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; }
|
||||
|
||||
|
|
@ -725,11 +742,11 @@ td > a > .badges {
|
|||
ul.error, ul.warning {
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
background-color: @colorCritical;
|
||||
background-color: @color-critical;
|
||||
|
||||
li {
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
color: @text-color;
|
||||
padding: 0.3em 0.8em;
|
||||
}
|
||||
|
||||
|
|
@ -745,7 +762,7 @@ ul.error, ul.warning {
|
|||
|
||||
|
||||
ul.warning {
|
||||
background-color: @colorWarning;
|
||||
background-color: @color-warning;
|
||||
}
|
||||
|
||||
table.sourcecode {
|
||||
|
|
@ -794,7 +811,7 @@ form input[type=submit] {
|
|||
&:disabled {
|
||||
border-color: @gray-light;
|
||||
background-color: @gray-light;
|
||||
color: #fff;
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -835,7 +852,7 @@ form ul.form-errors {
|
|||
background: @color-critical;
|
||||
font-weight: bold;
|
||||
padding: 0.5em 1em;
|
||||
color: white;
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -844,7 +861,7 @@ select::-ms-expand, input::-ms-expand, textarea::-ms-expand { /* for IE 11 */
|
|||
}
|
||||
|
||||
select {
|
||||
border: 1px solid #ddd;
|
||||
border: 1px solid @gray;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
}
|
||||
|
|
@ -860,6 +877,7 @@ input[type=text], input[type=password], textarea, select {
|
|||
border-color: transparent;
|
||||
border-bottom-color: @gray-lighter;
|
||||
border-width: 1px 1px 1px 3px;
|
||||
background-color: @low-sat-blue;
|
||||
|
||||
&.search {
|
||||
background: transparent url("../img/icons/search.png") no-repeat scroll 0.5em center / 1em 1em;
|
||||
|
|
@ -893,7 +911,7 @@ select::-moz-focus-inner { border: 0; }
|
|||
|
||||
select:-moz-focusring {
|
||||
color: transparent;
|
||||
text-shadow: 0 0 0 #000;
|
||||
text-shadow: 0 0 0 @black;
|
||||
}
|
||||
|
||||
select, input[type=text], textarea {
|
||||
|
|
@ -910,20 +928,18 @@ select, input[type=text], textarea {
|
|||
}
|
||||
|
||||
select[value=""] {
|
||||
color: blue;
|
||||
border: 1px solid #666;
|
||||
color: @icinga-blue;
|
||||
border: 1px solid @gray-light;
|
||||
background-color: @body-bg-color;
|
||||
}
|
||||
|
||||
select option {
|
||||
color: inherit;
|
||||
padding-left: 0.5em;
|
||||
background-color: @body-bg-color;
|
||||
}
|
||||
|
||||
select option[value=""] {
|
||||
color: #aaa;
|
||||
background-color: @body-bg-color;
|
||||
color: @disabled-gray;
|
||||
}
|
||||
|
||||
form dt label {
|
||||
|
|
@ -1046,7 +1062,7 @@ form dd ul.errors {
|
|||
padding-left: 0.3em;
|
||||
|
||||
li {
|
||||
color: @colorCritical;
|
||||
color: @color-critical;
|
||||
padding: 0.3em;
|
||||
}
|
||||
}
|
||||
|
|
@ -1060,7 +1076,7 @@ form div.hint {
|
|||
|
||||
pre {
|
||||
font-style: normal;
|
||||
background-color: white;
|
||||
background-color: @white;
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
}
|
||||
|
|
@ -1076,6 +1092,114 @@ form {
|
|||
|
||||
/** END of forms **/
|
||||
|
||||
/** php-diff **/
|
||||
.diff-wrapper.diff {
|
||||
background: repeating-linear-gradient(-45deg, whitesmoke, whitesmoke 0.5em, #e8e8e8 0.5em, #e8e8e8 1em);
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
border: 1px solid black;
|
||||
color: black;
|
||||
empty-cells: show;
|
||||
font-family: monospace;
|
||||
font-size: 13px;
|
||||
width: 100%;
|
||||
word-break: break-all;
|
||||
}
|
||||
.diff-wrapper.diff th {
|
||||
font-weight: 700;
|
||||
}
|
||||
.diff-wrapper.diff td {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.diff-wrapper.diff td,
|
||||
.diff-wrapper.diff th {
|
||||
border-collapse: separate;
|
||||
border: none;
|
||||
padding: 1px 2px;
|
||||
background: @low-sat-blue;
|
||||
}
|
||||
.diff-wrapper.diff td:empty:after,
|
||||
.diff-wrapper.diff th:empty:after {
|
||||
content: " ";
|
||||
visibility: hidden;
|
||||
}
|
||||
.diff-wrapper.diff td a,
|
||||
.diff-wrapper.diff th a {
|
||||
color: @black;
|
||||
cursor: inherit;
|
||||
pointer-events: none;
|
||||
}
|
||||
.diff-wrapper.diff thead th {
|
||||
background: @gray-lighter;
|
||||
border-bottom: 1px solid @black;
|
||||
padding: 4px;
|
||||
text-align: left;
|
||||
}
|
||||
.diff-wrapper.diff tbody.skipped {
|
||||
border-top: 1px solid black;
|
||||
}
|
||||
.diff-wrapper.diff tbody.skipped td,
|
||||
.diff-wrapper.diff tbody.skipped th {
|
||||
display: none;
|
||||
}
|
||||
.diff-wrapper.diff tbody th {
|
||||
background: @gray-lighter;
|
||||
border-right: 1px solid @black;
|
||||
text-align: right;
|
||||
vertical-align: top;
|
||||
width: 4em;
|
||||
}
|
||||
.diff-wrapper.diff tbody th.sign {
|
||||
background: @text-color;
|
||||
border-right: none;
|
||||
padding: 1px 0;
|
||||
text-align: center;
|
||||
width: 1em;
|
||||
}
|
||||
.diff-wrapper.diff tbody th.sign.del {
|
||||
background: @color-diff-del;
|
||||
}
|
||||
.diff-wrapper.diff tbody th.sign.ins {
|
||||
background: @color-diff-ins;
|
||||
}
|
||||
.diff-wrapper.diff.diff-html {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.diff-wrapper.diff.diff-html.diff-combined .change.change-rep .rep {
|
||||
white-space: normal;
|
||||
}
|
||||
.diff-wrapper.diff.diff-html .change.change-eq .old,
|
||||
.diff-wrapper.diff.diff-html .change.change-eq .new {
|
||||
background: @gray-lighter;
|
||||
}
|
||||
.diff-wrapper.diff.diff-html .change .old {
|
||||
background: @color-diff-changed-old;
|
||||
}
|
||||
.diff-wrapper.diff.diff-html .change .new {
|
||||
background: @color-diff-changed-new;
|
||||
}
|
||||
.diff-wrapper.diff.diff-html .change .rep {
|
||||
background: @color-change-replace-del;
|
||||
}
|
||||
.diff-wrapper.diff.diff-html .change .old.none,
|
||||
.diff-wrapper.diff.diff-html .change .new.none,
|
||||
.diff-wrapper.diff.diff-html .change .rep.none {
|
||||
background: transparent;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.diff-wrapper.diff.diff-html .change ins,
|
||||
.diff-wrapper.diff.diff-html .change del {
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
.diff-wrapper.diff.diff-html .change ins {
|
||||
background: @color-diff-ins;
|
||||
}
|
||||
.diff-wrapper.diff.diff-html .change del {
|
||||
background: @color-diff-del;
|
||||
}
|
||||
/** END of php-diff **/
|
||||
|
||||
/** Custom font styling **/
|
||||
textarea.smaller {
|
||||
font-size: 0.833em;
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@
|
|||
}
|
||||
|
||||
> i {
|
||||
color: white;
|
||||
color: @gray;
|
||||
font-style: normal;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue