diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-14 13:17:31 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-14 13:17:31 +0000 |
commit | f66ab8dae2f3d0418759f81a3a64dc9517a62449 (patch) | |
tree | fbff2135e7013f196b891bbde54618eb050e4aaf /public/css/module.less | |
parent | Initial commit. (diff) | |
download | icingaweb2-module-director-f66ab8dae2f3d0418759f81a3a64dc9517a62449.tar.xz icingaweb2-module-director-f66ab8dae2f3d0418759f81a3a64dc9517a62449.zip |
Adding upstream version 1.10.2.upstream/1.10.2
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
-rw-r--r-- | public/css/module.less | 1835 |
1 files changed, 1835 insertions, 0 deletions
diff --git a/public/css/module.less b/public/css/module.less new file mode 100644 index 0000000..1f11251 --- /dev/null +++ b/public/css/module.less @@ -0,0 +1,1835 @@ +div.action-bar a:focus, .tabs a:focus { + outline: none; + text-decoration: underline; + + &:before { + text-decoration: none; + } +} + +table.common-table td { + padding-top: 0.2em; + padding-bottom: 0.2em; + vertical-align: middle; + + p { + word-break: break-word; + } +} + +#layout.minimal-layout table.common-table td { + padding-top: 0.5em; + padding-bottom: 0.5em; +} + +table.common-table thead th { + border-bottom: 1px solid @text-color; +} +table.common-table tbody td { + border-bottom: 1px solid @gray-lighter; +} + +a:before { + text-decoration: none; +} + +form.director-form { + max-width: 68em; +} + +form.director-form:focus { + outline: none; +} + +div.action-bar a, div.action-bar form i { + color: @icinga-blue; +} + +div.action-bar > a { + margin-right: 1em; +} + +.controls > .pagination-control li > a { + padding: 0.5em 0 0.5em 0; +} + +.controls > .pagination-control > ul { + float: right; +} + +div.action-bar { + .pagination-control { + float: none; + clear: none; + display: inline-block; + line-height: inherit; + margin: 0; + vertical-align: middle; + } + + form.director-form input { + margin: 0; + } + input { + max-width: unset; + } + select { + line-height: 1.25em; + } +} + +div.action-bar ul { + padding: 0; + margin: 0; + + li { + list-style-type: none; + a { display: block; } + } +} + +div.action-bar > ul { + display: inline-block; +} + +div.action-bar > ul ul { + padding: 0.5em 0em 1em 0em; + min-width: 10em; + position: absolute; + display: none; + color: @text-color-inverted; + background-color: @icinga-blue; + + a { + display: block; + padding: 0.3em 2em 0.3em 2em; + margin: 0; + outline: none; + color: @text-color-inverted; + + &:hover { + text-decoration: underline; + } + } + + li.active a { + font-weight: bold; + } +} + +div.action-bar > ul > li:hover ul { + display: block; +} +div.action-bar > ul > li > a { + padding: 0.2em 0.5em; +} +div.action-bar > ul > li:hover { + background-color: @icinga-blue; + & > a { + color: @text-color-inverted; + text-decoration: none; + } +} + +#layout.twocols div.action-bar .pagination-control { + li { + display: none; + } + + li:nth-child(1), li.active, li:last-child { + display: list-item; + } + + li.active a { + border-bottom: none; + } +} + +.content a { + color: @icinga-blue; + &:hover { + text-decoration: underline; + } +} + +p { + max-width: 56em; +} + +table.common-table { + max-width: 68em; + + a { + color: inherit; + text-decoration: none; + } + + th { + padding-top: 0.5em; + } + td { + vertical-align: top; + } + + pre { + margin: 0; + padding: 0.2em; + max-height: 10em; + background: none; + overflow: auto; + word-break: keep-all; + white-space: pre; + display: inline-block; + -ms-overflow-style: none; + scrollbar-width: none; + &::-webkit-scrollbar { + display: none; + } + } +} + +table.history { + td:last-of-type { + text-align: right; + } +} + +span.disabled { + cursor: no-drop; + color: @gray-light; +} + +.controls span.action-links { + display: block; + margin-bottom: 0.5em; + a { + color: @icinga-blue; + margin-right: 1em; + } + form.director-form { + display: inline; + margin-right: 1em; + } +} + +.action-bar { + form.director-form { + display: inline; + margin-right: 1em; + } +} + +pre.disabled { + color: @disabled-gray; +} + +form.director-form i.link-color::before { + color: @icinga-blue; +} + +/* TODO: remove this, but autosubmit looks ugly otherwise */ +form.director-form input[disabled] { + background: inherit; +} +/* END OF TODO */ + +pre { + background: none; +} + +pre.logfile { + font-size: 0.875em; + padding: 1em; + background: @gray-lighter; + color: @gray; + overflow: auto; + white-space: pre; + + a { + color: @link-color; + } + + .loglevel, .application { + font-weight: bold; + } + + .critical { + color: @color-critical; + } + + .warning { + color: @color-warning; + } + + .information { + color: @color-ok; + } + + .notice { + // color: @color-ok; + } + + .debug { + color: @color-pending; + } + + .error-hint { + color: @text-color; + font-weight: 900; + } +} + +pre.generated-config { + + a { + color: @link-color; + font-weight: bold; + } + + .highlight { + border-bottom: 1px dashed @gray-light; + &::before { + // icon: right-big + font-family: 'ifont'; + content: '\e826'; + margin-left: -1em; + padding-top: 0em; + float: left; + } + + &.critical::before { + color: @color-critical; + } + &.warning::before { + color: @color-warning; + } + &.ok::before { + color: @color-ok; + } + } +} + +pre.agent-deployment-instructions { + color: @text-color; + height: 14em; + overflow: scroll; +} + +table.avp th { + font-size: inherit; +} + +.content form.director-form { + margin-top: 0.5em; + margin-bottom: 2em; +} + +.content form.director-form.inline { + margin: 0; + + i.icon::before { + color: @icinga-blue; + } +} + +.invisible { + position: absolute; + left: -100%; +} + +form.director-form input[type=file] { + padding-right: 1em; +} + + +form.director-form input[type=submit] { + .button(); + border-width: 1px; + margin-top: 0.5em; + + &:disabled { + border-color: @gray-light; + background-color: @gray-light; + color: @disabled-gray; + } +} + +form.director-form input[type=submit]:first-of-type { + border-width: 2px; +} + +form.director-form input[type=submit].link-button { + color: @icinga-blue; + background: none; + border: none; + font-weight: normal; + padding: 0; + margin: 0; + + text-align: left; + + &:hover { + text-decoration: underline; + } +} + +form.director-form p.description { + padding: 1em 1em; + margin: 0; + font-style: italic; + width: 100%; +} + +form.director-form { + input[type=text], input[type=button], select, select option, textarea { + -webkit-appearance: none; + -moz-appearance: none; + } +} + +form.director-form ul.form-errors { + list-style-type: none; + margin-bottom: 0.5em; + padding: 0; + + ul.errors { + list-style-type: none; + padding: 0; + } + + ul.errors li { + background: @color-critical; + font-weight: bold; + padding: 0.5em 1em; + color: @text-color-inverted; + } +} + +form.director-form { + select::-ms-expand, input::-ms-expand, textarea::-ms-expand { /* for IE 11 */ + display: none; + } + + select { + border: 1px solid @gray-light; + cursor: pointer; + background: none; + } + + input[type=text], input[type=password], textarea, select { + max-width: 36em; + min-width: 20em; + width: 100%; + line-height: 2em; + height: 2.4em; + padding-left: 0.5em; + border-style: solid; + 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; + padding-left: 2em; + } + } + + textarea { + max-width: 100%; + } + + select[multiple] { + height: auto; + } + + select option { + height: 2em; + padding-top: 0.3em; + } + + select[multiple=multiple] { + height: auto; + } + + label { + line-height: 2em; + } +} + +form.director-form dl { + margin: 0; + padding: 0; +} + +.strike-links a, table.common-table .strike-links a { + text-decoration: line-through; + &:hover { + text-decoration: line-through; + } +} +.strike-links span.ro-service { + text-decoration: line-through; +} + +// TODO: figure out whether form.editor and filter-related CSS is still required +div.filter > form.search, div.filter > a { + // Duplicated by quicksearch + display: none; +} + +div.filter form.editor > ul.tree ul li.active { + background-color: @tr-hover-color; +} + +div.filter form.editor { + padding-top: 1em; + select, input[type=text] { + line-height: unset; + height: auto; + } +} + +form.director-form.editor { + select, input[type=text] { + background: @low-sat-blue; + max-width: unset; + min-width: unset; + width: auto; + } + .tree li a { + padding: 0; + } +} + +ul.extensible-set { + margin: 0; + padding: 0; + list-style-type: none; + display: inline-block; + width: 100%; + max-width: 36em; + min-width: 20em; + border-bottom: 1px solid @gray-lighter; + + input[type=text], input[type=password], textarea, select { + border-color: transparent; + } + + li { + display: inline; + } + + select { + width: 100%; + } + + input[type=text] { + background-color: @low-sat-blue; + .rounded-corners(0.5em); + border: 1px solid transparent; + padding: 0.1em 0.3em; + margin: 0.2em 0.2em; + width: 30%; + min-width: 4em; + text-overflow: ellipsis; + } + + span.inline-buttons { + position: absolute; + z-index: 10; + right: 0.225em; + top: -0.275em; + input[type=submit] { + font-family: 'ifont'; + width: 2em; + height: 2em; + font-size: 1em; + margin-left: 0.2em; + padding: 1px 0 1px 0; + } + } + + select.extend-set, input.extend-set { + display: none; + } +} + +form.director-form { + #_FAKE_SUBMIT { + position: absolute; + left: -100%; + } +} + +form.director-form dd.active ul.extensible-set, ul.extensible-set.sortable { + + li { + display: list-item; + position: relative; + clear: both; + } + + input[type=text], select { + width: 100%; + } + + input[type=text] { + background-color: @low-sat-blue; + .rounded-corners(0); + border: 1px solid @gray-light; + padding: 0.25em 0.5em; + margin: 0; + } +} + +form.director-form dd.active ul.extensible-set { + border: 1px solid @icinga-blue; + + input[type=submit]:first-of-type { + border-width: 1px; + } + + select.extend-set, input.extend-set { + display: inline; + } +} + +form.director-form { + select::-moz-focus-inner { + border: 0; + } + + select:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 #000; + } + + select, input[type=text], textarea { + &:hover { + border-style: dotted solid dotted solid; + border-color: @gray-light; + } + + &:focus, &:focus:hover { + border-style: solid; + border-color: @icinga-blue; + outline: none; + } + } + + select option { + padding-left: 0.5em; + } + + select option[value=""] { + color: @disabled-gray; + background-color: @low-sat-blue; + } +} + +a { + &.state-critical { + color: @color-critical; + } + + &.state-warning { + color: @color-warning; + } + + &.state-ok { + color: @color-ok; + } + + &.state-unknown { + color: @color-unknown; + } + + &.state-pending { + color: @color-pending; + } +} +ul.tabs a.state-critical { + background-color: @color-critical; + font-weight: bold; + color: @text-color-inverted; +} +ul.tabs a.state-warning { + background-color: @color-warning; + font-weight: bold; + color: @text-color-inverted; +} +ul.tabs a.state-ok { + background-color: @color-ok; + font-weight: bold; + color: @text-color-inverted; +} +ul.tabs a.state-unknown { + background-color: @color-unknown; + font-weight: bold; + color: @text-color-inverted; +} + +a:hover::before { + text-decoration: none; +} + +ul.main-actions { + margin: 0; + padding: 0; + min-width: 38em; + max-width: 64em; + + li { + list-style-type: none; + + text-align: left; + display: inline-block; + padding: 0; + clear: both; + width: 18em; + min-width: 16em; + vertical-align: top; + + a { + i { + font-size: 3em; + display: block; + float: left; + line-height: 1em; + margin-right: 0.3em; + color: @text-color-light; + } + + &.state-critical i { + color: @color-critical; + } + + &.state-warning i { + color: @color-warning; + } + + &.state-ok i { + color: @color-ok; + } + + &.state-unknown i { + color: @color-unknown; + } + + &.state-pending i { + color: @color-pending; + } + + border-left: 0.5em solid transparent; + padding: 1em; + color: @text-color; + font-weight: bold; + display: block; + text-decoration: none; + min-height: 12em; + + overflow: hidden; + + &.active { + border-color: @icinga-blue; + background-color: @tr-active-color; + } + + &:hover { + background-color: @tr-hover-color; + text-decoration: none; + } + + &:active, &:focus { + background-color: @tr-hover-color; + outline: none; + } + } + + p { + font-weight: normal; + margin-bottom: 0.5em; + padding-left: 4.5em; + color: @text-color-light; + } + } +} + +#layout.compact-layout.twocols ul.main-actions, +#layout.minimal-layout ul.main-actions { + max-width: unset; + min-width: unset; + li { + width: 100%; + a { + height: auto; + min-height: unset; + } + > a > i { + font-size: 3em; + } + + > a > p { + padding-left: 4.5em; + } + margin-bottom: 0.5em; + } +} + +#layout.minimal-layout div.content form.director-form { + dt, dd { + display: block; + width: auto; + } + fieldset.collapsed { + dd, dt, ul, div { + display: none; + } + } + dt label { + color: @text-color; + } + fieldset { + min-width: unset; + } + + input[type=text], input[type=password], textarea, select { + max-width: unset; + min-width: unset; + border-color: @gray-light; + } + dd.active { + input[type=text], input[type=password], textarea, select { + border-color: @icinga-blue; + } + } + ul.extensible-set { + max-width: unset; + } + dd ul.extensible-set { + border: 1px solid @gray-light; + } + dd.active ul.extensible-set { + border: 1px solid @icinga-blue; + + input[type=submit]:first-of-type { + border-width: 1px; + } + } + + dd.active ul.extensible-set, ul.extensible-set.sortable { + input[type=text], select { + width: 100%; + } + + input[type=text] { + background-color: @low-sat-blue; + border: 1px solid @gray-light; + } + } + +} + +form.director-form fieldset { + margin: 0; + padding: 0 0 1.5em 0; + border: none; + + legend { + margin: 0em 0 0.5em 0; + font-size: 1em; + border-bottom: 1px solid @gray-light; + font-weight: bold; + display: block; + width: 100%; + padding-left: 1em; + line-height: 2em; + cursor: pointer; + user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + + &:hover { + border-color: @text-color; + } + + &::before { + // icon: down-dir + font-family: 'ifont'; + content: '\e81d'; + margin-left: -1em; + padding-top: 0em; + float: left; + color: inherit; + } + } + + &.collapsed { + legend { + margin: 0; + } + + dd, dt, ul, div { + display: none; + } + + legend::before { + // icon: right-dir + content: '\e820'; + } + + margin-bottom: 0.2em; + padding-bottom: 0; + } +} + + +/* BEGIN Forms */ +form.director-form dt label { + width: auto; + font-weight: normal; + font-size: inherit; + + &.required { + &::after { + content: '*' + } + } + + &:hover { + text-decoration: underline; + cursor: pointer; + } +} + +form.director-form fieldset { + min-width: 36em; +} + +form.director-form dd input.related-action[type='submit'] { + display: none; +} + +form.director-form dd.active li.active input.related-action[type='submit'] { + display: inline-block; +} + +form.director-form { + p.description { + color: @gray; + font-style: italic; + padding: 0.25em 0.5em; + display: none; + } + + dd.active { + p.description { + font-style: normal; + display: block; + height: auto; + color: @text-color; + } + } +} + +form.director-form.db-selector { + padding: 0; + margin: 0; + select { + float: right; + text-align: center; + max-width: 20em; + margin-top: 0.5em; + min-width: 14em; + width: auto; + } +} + +// Adjustments for the legacy layout to keep backwards compatibility +#layout.twocols > #main &#col1 { + width: 50%; +} +#layout.twocols > #main &#col2 { + width: 50%; +} +#layout.twocols > #main &#col1 + #col2 { + width: 50%; +} + +// Adjustments for the flexbox layout +#layout.twocols > #content-wrapper &#col2, +#layout.twocols > #content-wrapper &#col1 + #col2 { + flex-grow: 1; +} + +form.director-form dd { + padding: 0.3em 0.5em; + margin: 0; +} + +form.director-form dt { + padding: 0.5em 0.5em; + margin: 0; +} + +form.director-form dt.active, form.director-form dd.active { + background-color: @tr-active-color; +} + +form.director-form dt { + display: inline-block; + vertical-align: top; + min-width: 12em; + min-height: 2.5em; + width: 30%; + &.errors label { + color: @color-critical; + } +} + +form.director-form .errors label { + color: @color-critical; +} + +form.director-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.director-form dd:after { + display: block; + content: ''; +} + +form.director-form textarea { + height: auto; +} + +form.director-form dd ul.errors { + list-style-type: none; + padding-left: 0.3em; + + li { + color: @color-critical; + padding: 0.3em; + } +} + +form.director-form div.hint { + padding: 1em; + background-color: @tr-hover-color; + margin: 1em 0; + max-width: 65em; + font-size: 1em; + + pre { + font-style: normal; + background-color: @body-bg-color; + margin: 0; + padding: 1em; + } +} + +/* END of Forms */ + +ul.health-check-result { + list-style-type: none; + padding: 0; + margin-bottom: 2em; + li { + line-height: 2em; + } + .badge { + font-weight: bold; + } +} + +.title-badges { + .badge { + font-size: 0.6em; + margin-left: 0.5em; + } +} + +li.state { + border-left: 0.5em solid transparent; + margin-bottom: 0.5em; + padding-left: 1em; + &.state-ok { + border-color: @color-ok; + } + &.state-warning { + border-color: @color-warning; + } + &.state-critical { + border-color: @color-critical; + } + &.state-unknown { + border-color: @color-unknown; + } + &.state-pending { + border-color: @color-pending; + } +} + +span.error { + color: @color-critical; + + a { + color: @color-critical; + } +} + +p.legacy-error { + color: @text-color-inverted; + padding: 1em 2em; + background-color: @color-critical; + +} + +table th.actions, table td.actions { + text-align: right; +} + +table tr.disabled td { + color: @gray-light; + font-style: italic; +} + +/* Simple table, test */ +table.syncstate { + tr td:first-child { + padding-left: 2em; + &::before { + font-family: 'ifont'; + // icon-help: + content: '\e85b'; + float: left; + font-weight: bold; + margin-left: -1.5em; + line-height: 1.5em; + } + } + + tr.in-sync td:first-child::before { + content: '\e803'; + color: @color-ok; + } + + tr.pending-changes td:first-child::before { + content: '\e864'; + color: @color-warning; + } + + tr.failing td:first-child::before { + content: '\e804'; + color: @color-critical; + } +} + +table.jobs { + tr td:first-child { + padding-left: 2em; + &::before { + font-family: 'ifont'; + // icon-help: + content: '\e85b'; + float: left; + font-weight: bold; + margin-left: -1.5em; + line-height: 1.5em; + } + } + + tr.ok td:first-child::before { + content: '\e803'; + color: @color-ok; + } + + tr.warning td:first-child::before { + content: '\e864'; + color: @color-warning; + } + + tr.pending td:first-child::before { + content: '\e864'; + color: @color-pending; + } + + tr.critical td:first-child::before { + content: '\e804'; + color: @color-critical; + } +} + +table.icinga-objects { + tr td:first-child { + padding-left: 2em; + &::before { + font-family: 'ifont'; + // icon-wrench: + content: '\e83d'; + float: left; + font-weight: bold; + margin-left: -1.5em; + line-height: 1.5em; + } + } + + tr.icinga-object-external td:first-child::before { + color: @gray; + // icon-pin + content: '\e879'; + } + + tr.icinga-object td:first-child::before { + color: @text-color; + // icon-thumbs-up + // content: '\e867'; + // icon-ok + content: '\e803'; + } + + tr.icinga-template td:first-child::before { + color: @gray-light; + // icon-paste + content: '\e817'; + } + + tr.icinga-apply td:first-child::before { + color: @text-color; + // resize-full-alt + content: '\e829'; + } + +} + +div.content.compact table.icinga-objects thead { + display: none; +} + +table.deployment-log { + + tr td:nth-child(2), tr th:nth-child(2) { + text-align: right; + padding-right: 1em; + } + + tr th:first-child { + padding-left: 2em; + } + + tr td:first-child { + padding-left: 2em; + &::before { + font-family: 'ifont'; + // icon-help: + content: '\e85b'; + float: left; + font-weight: bold; + margin-left: -1.5em; + line-height: 1.5em; + } + } + + tr.succeeded td:first-child::before { + // icon-ok + color: @color-ok; + content: '\e803'; + } + + tr.pending td:first-child::before { + color: @gray; + // icon-spinner + content: '\e874'; + .animate(spin 2s infinite linear); + } + + tr.failed td:first-child::before { + // icon-ok + color: @color-critical; + content: '\e804'; + } + + tr.running td, tr.running td a { + font-weight: bold; + } +} + +th.table-header-day { + text-align: right; +} + +table.activity-log { + td { + max-height: 2em; + } + tr th:first-child { + padding-left: 2em; + } + + tr td:last-child { + text-align: right; + white-space: nowrap; + width:10%; + } + + tr td:first-child { + padding-left: 2em; + &::before { + font-family: 'ifont'; + // icon-help: + content: '\e85b'; + float: left; + font-weight: bold; + margin-left: -1.5em; + line-height: 1.5em; + } + } + + tr.action-create td:first-child::before { + // icon-plus + color: @color-pending; + content: '\e805'; + } + + tr.action-modify td:first-child::before { + // icon-wrench + color: @color-ok; + content: '\e83d'; + } + + tr.action-delete td:first-child::before { + // icon-cancel + color: @color-critical; + content: '\e804'; + } + + tr.undeployed td, tr.undeployed a { + color: @gray; + } + + tr.undeployed { + background-color: @gray-lightest; + &.active { + background-color: @gray-lighter; + } + &[href]:hover { + background-color: @gray-light; + td, a { + color: @text-color; + } + } + } + + tr.branched { + background-color: @gray-lightest; + color: @color-pending; + } + + tr.undeployed td:first-child::before { + color: @gray; + } + + div.range-comment-container { + width: 100%; + position: absolute; + height: 100%; + background: @body-bg-color; + border-radius: 1em; + } + a.range-comment { + width: 100%; + height: 100%; + display: block; + border-radius: 1em; + padding: 0.2em 1em; + vertical-align: middle; + &::-webkit-scrollbar { + display: none; + } + scrollbar-width: none; + -ms-overflow-style: none; + overflow-y:auto; + overflow-x:hidden; + word-break: break-word; + &:hover { + cursor: default; + text-decoration: none; + } + background: fade(@color-warning-handled, 20%); + &:hover { + background: fade(@color-warning-handled, 60%); + } + } + td.comment-cell { + padding: 0; + min-width: 10em; + width: 40%; + position: relative; + &.continuing div.range-comment-container { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + a.range-comment { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + } + &.continued div.range-comment-container { + border-top-left-radius: 0; + border-top-right-radius: 0; + a.range-comment { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + } + } +} + +tr.branch_modified { + color: @color-pending; +} + +table.config-diff { + + tr th:first-child { + padding-left: 2em; + } + + tr td:first-child { + padding-left: 2em; + &::before { + font-family: 'ifont'; + // icon-help: + content: '\e85b'; + float: left; + font-weight: bold; + margin-left: -1.5em; + line-height: 1.5em; + } + } + + tr.file-unmodified td:first-child::before { + // icon-ok + color: @color-ok; + content: '\e803'; + } + + tr.file-created td:first-child::before { + // icon-plus + color: @color-pending; + content: '\e805'; + } + + tr.file-removed td:first-child::before { + // icon-cancel + color: @color-critical; + content: '\e804'; + } + + tr.file-modified td:first-child::before { + // icon-flapping + color: @color-warning; + content: '\e85d'; + } +} + +input[type=submit].icon-button { + font-family: 'ifont'; + font-weight: normal; + background: none; + border: none; + padding: 0.2em 0.4em 0.2em 0.4em; + margin: 0 0 0 0.2em; + + &:hover { + background-color: @icinga-blue; + } + + &:disabled { + background-color: unset; + color: @gray-light; + cursor: default; + } +} + +/** BEGIN breadcrumb **/ + +// Hint: .badges is unused right now +.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 @text-color; + margin: -0.25em 1px 0 0; + } + } +} + +.breadcrumb { + > .critical a { color: @text-color-inverted; background: @color-critical; } + > .critical.handled a { color: @text-color-inverted; background: @color-critical-handled; } + > .unknown a { color: @text-color-inverted; background: @color-unknown; } + > .unknown.handled a { color: @text-color-inverted; background: @color-unknown-handled; } + > .warning a { color: @text-color-inverted; background: @color-warning; } + > .warning.handled a { color: @text-color-inverted; background: @color-warning-handled; } + > .ok a { color: @text-color-inverted; background: @color-ok; } +} + +.breadcrumb { + > .critical a:after { border-left-color: @color-critical; } + > .critical.handled a:after { border-left-color: @color-critical-handled; } + > .unknown a:after { border-left-color: @color-unknown; } + > .unknown.handled a:after { border-left-color: @color-unknown-handled; } + > .warning a:after { border-left-color: @color-warning; } + > .warning.handled a:after { border-left-color: @color-warning-handled; } + > .ok a:after { border-left-color: @color-ok; } +} + +.breadcrumb:after { + content:''; + display:block; + clear: both; +} +.breadcrumb li { + float: left; + cursor: pointer; + user-select: none; + background: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + +} +.breadcrumb li a { + // color: white; + color: @icinga-blue; + margin: 0; + // font-size: 1.2em; + text-decoration: none; + padding-left: 2em; + // line-height: 1.5em; + // background: @icinga-blue; + border: 1px none @icinga-blue; + border-right-style: solid; + border-left-style: solid; + position: relative; + display: block; + float: left; + &:focus { + outline: none; + } + &:hover { + text-decoration: none; + } +} +.action-bar .breadcrumb li a { + padding-left: 2em; +} + +.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 @icinga-blue; + margin-left: 1px; + z-index: 1; +} + +.breadcrumb li a:after { + border-left: 1.2em solid @body-bg-color; + z-index: 2; +} + +.breadcrumb li:first-child a { + padding-left: 1em; + padding-right: 0.5em; +} +.breadcrumb li:last-child a { + color: @text-color; +} + +.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: transparent; text-decoration: underline; } + +.breadcrumb li a:focus { + text-decoration: underline; +} +/** END of breadcrumb **/ + + + +ul.filter-root { + margin-top: 0; + width: 100%; + padding-left: 0.5em; + list-style-type: none; + ul { + list-style-type: none; + padding-left: 1.5em; + } + + ul.filter { + padding-left: 1.5em; + list-style-type: none; + width: 100%; + } + + li.filter-chain, div.filter-expression { + width: 100%; + padding: 0.3em 0.5em; + min-width: 30em; + } + + ul li.filter-chain::before, ul .filter-expression::before { + font-family: 'ifont'; + // Formerly: icon-down-open: e821 + // icon-right-small: + content: '\e877'; + float: left; + margin-left: -1.5em; + margin-top: 0.5em; + } + + ul.extensible-set { + padding-left: 0; + border: none; + display: inline-block; + vertical-align: top; + li::before { + content: none; + } + } + + .filter-chain > input[type=submit].icon-button, .filter-expression > input[type=submit].icon-button { + display: none; + font-family: 'ifont'; + font-weight: normal; + background: none; + border: none; + padding: 0.2em 0.4em 0.2em 0.4em; + margin: 0 0 0 0.2em; + } + + .active input[type=submit].icon-button, + li:hover input[type=submit].icon-button, + div:hover input[type=submit].icon-button + { + display: inline; + } +} + +.errors > ul.filter-root { + input[type=text], select { + border-color: transparent; + border-bottom-color: @gray-lighter; + } + + select.column, select.operator { + border-left-color: @color-critical; + } +} + + +form.director-form li.filter-chain > select.operator { + min-width: 5em; + max-width: 5em; + width: 5em; +} + +form.director-form div.filter-expression { + .column { + min-width: 7em; + max-width: 30em; + width: auto; + } + + .sign { + min-width: 4em; + max-width: 4em; + width: 4em; + margin: 0 0.3em; + &.wide { + min-width: 6em; + max-width: 8em; + width: 8em; + } + } + + div.expression-wrapper { + display: inline-block; + vertical-align: top; + } + + div.expression-wrapper > input[type=text], + div.expression-wrapper > select { + min-width: 7em; + width: 10em; + max-width: 10em; + } +} + +ul.director-suggestions { +/* + min-width: 18.5em; + max-width: 34.65em; + width: 100%; + */ + width: 20em; + max-height: 25em; + overflow-y: auto; + overflow-x: hidden; + border: 1px solid @icinga-blue; + position: absolute; + z-index: 2000; + padding: 0; + margin: 0; + list-style-type: none; + background-color: @low-sat-blue; + li { + margin: 0; + padding: 0.5em 1em; + } + + li:hover { + background-color: @tr-hover-color; + cursor: pointer; + } + + li.active { + color: @text-color; + &:hover { + color: @text-color; + } + } + + table.benchmark { + font-size: 0.8em; + font-family: @font-family-fixed; + } +} + +table.pivot { + width: 100%; + table-layout: fixed; + + thead th { + text-align: center; + } + + tbody th { + text-align: right; + width: 25%; + } + tbody td { + text-align: center; + } + tbody td > a { + display: block; + font-size: 2em; + line-height: 1.5em; + text-decoration: none; + color: @icinga-blue; + &:hover { + background: @tr-active-color; + text-decoration: none; + } + } +} + +.tree li a { + display: inline-block; + padding-left: 2.4em; + line-height: 2em; + text-decoration: none; + color: @text-color; + outline: 0; + background-repeat: no-repeat; + background-position: 0.8em 0.4em; +} + +ul.tree li > .handle { + background-image: none; + &:before { + content: '\e806'; + font-family: 'ifont'; + position: absolute; + font-size: 0.6em; + margin-left: 0.25em; + margin-top: 0.9em; + } +} +ul.tree li.collapsed > .handle { + background-image: none; + &:before { + content: '\e805'; + } +} +.tree li a { + padding-left: 1em; +} + +div.sql-dump { + background-color: @gray-lightest; + border: 1px solid @gray-light; + padding: 1em; +} + +div.exception { + margin: 1em; +} + +h2.action-create::before { + color: @color-pending; +} +h2.action-modify::before { + color: @color-ok; +} +h2.action-delete::before { + color: @color-critical; +} + +/* Special components */ +table.table-basket-changes { + min-width: 18em; + max-width: 100%; + th { + width: 80%; + font-weight: normal; + text-align: left; + min-width: 10em; + } +} |