From 3e02d5aff85babc3ffbfcf52313f2108e313aa23 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sat, 13 Apr 2024 13:46:43 +0200 Subject: Adding upstream version 2.12.1. Signed-off-by: Daniel Baumann --- public/css/icinga/main.less | 459 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 459 insertions(+) create mode 100644 public/css/icinga/main.less (limited to 'public/css/icinga/main.less') diff --git a/public/css/icinga/main.less b/public/css/icinga/main.less new file mode 100644 index 0000000..11dfa30 --- /dev/null +++ b/public/css/icinga/main.less @@ -0,0 +1,459 @@ +/*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */ + +// Url for static ipl assets +@iplWebAssets: "../lib/icinga/icinga-php-library"; + +// Width for the name column--th--of name-value-table +@name-value-table-name-width: 38/3em; + +.action-link { + color: @icinga-blue; +} + +.error-message { + font-weight: @font-weight-bold; +} + +.error-reason { + margin-top: 4em; +} + +.large-icon { + font-size: 200%; +} + +.content-centered { + margin: 0 auto; + text-align: center; +} + +.icon-col { + text-align: center; + width: 1em; +} + +.preformatted { + font-family: @font-family-fixed; + white-space: pre-wrap; +} + +.markdown { + > * { + margin-left: 0; + margin-right: 0; + } + + > *:last-child { + margin-bottom: 0; + } + + img { + max-width: 100%; + height: auto; + } + + a { + border-bottom: 1px @text-color-light dotted; + + &:hover, &:focus { + border-bottom: 1px @text-color solid; + text-decoration: none; + } + + img { + max-width: 32em; + } + + &.with-thumbnail { + img { + padding: 1px; + } + + &:hover, &:focus { + img { + padding: 0; + } + } + } + } + + table { + border-collapse: collapse; + + th { + text-align: left; + background-color: @gray-lighter; + } + + &, th, td { + border: 1px solid @gray-light; + } + } +} + +.no-wrap { + white-space: nowrap; +} + +.pull-right { + float: right; +} + +.text-right { + text-align: right; +} + +.user-avatar { + height: 16px; + width: 16px; +} + +.v-center { + > * { + vertical-align: middle; + } +} + +.section { + margin-bottom: 2em; +} + +a:hover > .icon-cancel { + color: @color-critical; +} + +.icon-stateful { + .fg-stateful(); +} + +// Link styles + +.button-link { + .action-link(); + .rounded-corners(3px); + + background: @low-sat-blue; + display: inline-block; + padding: 0.25em 0.5em; + + &:hover { + background: @low-sat-blue-dark; + text-decoration: none; + } +} + +// List styles + +.comment-list { + margin: 0; + + > dt { + border-bottom: 1px solid @gray-lighter; + margin-bottom: 0.25em; + + &:hover { + background-color: @gray-lightest; + + > .remove-action button:not(.spinner.active) { + visibility: visible; + } + } + + > .remove-action button:not(.spinner.active) { + visibility: hidden; + } + } + + > dd { + margin: 0 0 1em 0; + } +} + +.comment-time { + color: @text-color-light; + font-size: @font-size-small; +} + +.name-value-list { + > dd { + // Reset default margin + margin: 0; + } + + > dt { + color: @text-color-light; + font-size: @font-size-small; + } +} + +// Table styles + +.common-table { + width: 100%; + + td, th { + padding-top: 1em; + } + + td { + padding-bottom: 1em; + } + + th { + text-align: left; + padding-bottom: 0.5em; + } + + thead { + border-bottom: 1px solid @gray-light; + } + + tbody tr { + border-bottom: 1px solid @gray-lightest; + border-left: 5px solid transparent; + + &:last-child { + border-bottom: none; + } + } + + tr[href].active { + background-color: @tr-active-color; + border-left-color: @icinga-blue; + } + + tr[href]:hover { + background-color: @tr-hover-color; + cursor: pointer; + } +} + +.name-value-table { + width: 100%; +} + +.name-value-table > caption { + margin-top: .5em; + text-align: left; + font-weight: bold; +} + +.name-value-table > tbody > tr > th { + color: @text-color-light; + // Reset default font-weight + font-weight: normal; + padding-left: 0; + text-align: left; + vertical-align: top; + width: @name-value-table-name-width; +} + +/* Styles for centering content of unknown width and height both horizontally and vertically + * + * Example markup: + *
+ *
+ *

I'm centered.

+ *
+ *
+ */ + +.centered-content { + display: inline-block; + vertical-align: middle; +} + +.centered-ghost { + height: 100%; + text-align: center; + letter-spacing: -0.417em; // Remove gap between content and ghost +} + +.centered-ghost > * { + letter-spacing: normal; +} + +.centered-ghost:after { + content: ''; + display: inline-block; + height: 100%; + vertical-align: middle; +} + +// Responsive iFrames + +.iframe-container { + position: relative; + height: 0; + overflow: hidden; + padding-bottom: 75%; + width: 100%; + + & > iframe { + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 100%; + } +} + +// Collapsible Control +#collapsible-control-ghost { + display: none; +} + +.collapsible + .collapsible-control { + position: relative; + z-index: 1; + + button { + .rounded-corners(50%); + + float: right; + width: 2em; + height: 2em; + padding: 0; + margin-top: -1em; + margin-right: .25em; + + background: @gray-lighter; + color: @gray; + border: none; + -webkit-box-shadow: 0 0 1/3em rgba(0,0,0,.3); + -moz-box-shadow: 0 0 1/3em rgba(0,0,0,.3); + box-shadow: 0 0 1/3em rgba(0,0,0,.3); + + &:hover { + background: @gray-light; + } + } + + button i:before { + margin-right: 0; + } +} + +details.collapsible > summary { + &::marker, + &::-webkit-details-marker { + display: none; + } +} + +.collapsible[data-can-collapse]:not(.collapsed) + .collapsible-control button, +.collapsible[data-can-collapse]:not(.collapsed) > .collapsible-control, +details.collapsible[open] + .collapsible-control button, +details.collapsible[open] > .collapsible-control { + i.expand-icon { + display: none; + } + + i.collapse-icon { + display: inline; + } +} + +.collapsible.collapsed + .collapsible-control button, +.collapsible.collapsed > .collapsible-control, +details.collapsible:not([open]) + .collapsible-control button, +details.collapsible:not([open]) > .collapsible-control { + i.expand-icon { + display: inline; + } + + i.collapse-icon { + display: none; + } +} + +// Collapsibles + +.collapsible.collapsed:not(details) { + overflow: hidden; +} + +.collapsible.collapsed:not([data-toggle-element], details) { + position: relative; + + &:after { + content: ""; + display: block; + height: 2em; + background: linear-gradient(@body-bg-color-transparent, @body-bg-color); + position: absolute; + bottom: 0; + left: 0; + right: 0; + z-index: 1; + + opacity: 1; + transition: opacity 2s 1s linear; + } +} + +.role-memberships { + letter-spacing: -0.417em; + list-style-type: none; + margin: 0; + padding: 0; + + > li { + display: inline-block; + letter-spacing: normal; + margin: 0; + padding: 0 0.25em 0 0; + + &:last-child { + padding-right: 0; + } + } +} + +.module-dependencies { + .unmet-dependencies { + background-color: @color-warning; + color: @text-color-on-icinga-blue; + padding: .25em .5em; + margin-left: -.5em; + } + + .name-value-table { + > caption { + font-weight: normal; + color: @text-color-light; + } + + > tbody > tr > th { + font-weight: bold; + color: @text-color; + } + + .missing { + color: @color-critical; + font-weight: bold; + } + + td { + white-space: nowrap; + + &.or-separator { + width: 100%; + transform: translate(0, 50%); + padding-left: 3em; + + &::before { + content: ""; + position: absolute; + height: 1.5em; + width: 1.5em; + left: 0.5em; + border-top: 3px solid @gray; + border-right: 3px solid @gray; + border-top-right-radius: .50em; + transform: rotate(45deg); + } + } + } + } +} -- cgit v1.2.3