diff options
Diffstat (limited to '')
| -rw-r--r-- | public/css/icinga/audit.less | 363 |
1 files changed, 363 insertions, 0 deletions
diff --git a/public/css/icinga/audit.less b/public/css/icinga/audit.less new file mode 100644 index 0000000..23ab5b9 --- /dev/null +++ b/public/css/icinga/audit.less @@ -0,0 +1,363 @@ +// Style + +.privilege-audit-role-control { + list-style-type: none; + + li { + .rounded-corners(3px); + border: 1px solid; + border-color: @low-sat-blue; + + &.active { + border-color: @icinga-blue; + } + } +} + +.privilege-audit { + &, ul, ol { + list-style-type: none; + } + + .privilege-section > summary { + font-weight: @font-weight-bold; + border-bottom: 1px solid @gray-light; + } + + .privilege-section > summary em, + .previews em, + .privilege-label em { + color: @text-color-light; + } + .privilege-section > summary em { + font-weight: normal; + } + .privilege-label em { + font-style: normal; + } + + .icon { + color: @gray-light; + + &.granted { + color: @color-granted; + } + + &.refused { + color: @color-refused; + } + + &.restricted { + color: @color-restricted; + } + } + + .privilege-list > li { + .spacer { + opacity: 0; + .transition(opacity .5s ease-out); + } + + &:hover .spacer { + .transition(opacity .25s .25s ease-in); + border: 0 dashed; + border-color: @gray-light; + border-top-width: .2em; + opacity: 1; + } + } + + .vertical-line { + border: 0 solid; + border-left-width: 2px; + + &.granted { + border-color: @color-granted; + } + + &.refused { + border-color: @color-refused; + } + } + + .connector { + border: 0 solid; + border-color: @gray-lighter; + border-bottom-width: 2px; + + &.granted { + border-color: @color-granted; + } + + &.refused { + border-color: @color-refused; + } + + &:first-child { + border-width: 0 0 2px 2px; + border-bottom-left-radius: .5em; + } + } + + .role { + .rounded-corners(1em); + border: 2px solid; + border-color: @gray-lighter; + + &.granted { + border: 2px solid; + border-color: @color-granted; + } + + &.refused { + border: 2px solid; + border-color: @color-refused; + } + } + + .restriction { + font-family: @font-family-fixed; + background-color: @gray-lighter; + } +} + +// Layout + +.privilege-audit-role-control { + display: inline-flex; + flex-wrap: wrap; + + margin: 0 0 0 1em; + padding: 0; + + li { + margin-top: @vertical-padding; + + &:not(:first-child) { + margin-left: .5em; + } + } +} + +.privilege-audit { + &, ul, ol { + margin: 0; + padding: 0; + } + + .flex-overflow, + .privilege-list > li, + .inheritance-paths > ol { + display: flex; + } + + .privilege-list > li { + margin-top: 1em; + + > :last-child { + // This aids the usage of text-overflow:ellipsis in any of the children. + // It seems that to get this working while none of the children has a + // defined width, any flex item on the way up to the clipped container + // also must have a overflow value of "hidden". + // https://codepen.io/unthinkingly/pen/XMwJLG + overflow: hidden; + } + + > details:last-child { + // The overflow above cuts off the outline of the summary otherwise + margin: -4px; + padding: 4px; + } + } + + .privilege-section { + &:not(.collapsed) { + margin-bottom: 2em; + } + } + + .privilege-section > summary { + display: flex; + align-items: baseline; + font-size: 1.167em; + margin: 0.556em 0 0.333em; + + > :first-child { + flex: 3 1 auto; + min-width: 20em; + max-width: 40em / 1.167em; // privilege label width + spacer width / summary font-size + } + + .audit-preview { + flex: 1 1 auto; + + .icon:before { + width: 1.25em; + font-size: 1.25em / 1.167em; // privilege state icon font-size / summary font-size + } + } + + em { + font-size: .857em; + } + } + + h4, + .privilege-label { + flex-shrink: 0; + width: 20em; + margin: 0; + text-align: right; + } + + ol + h4 { + margin-top: 1em; + } + + .spacer { + flex: 20 1 auto; + min-width: 10em; // TODO: Mobile? + max-width: 18.8em; // 20em - (margin-left + margin-right) + margin: .6em; + } + + .inheritance-paths, + .restrictions { + flex: 1 1 auto; + + > summary { + line-height: 1; + + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + + > .icon:before { + width: 1.25em; + font-size: 1.25em; + } + } + } + + .vertical-line { + margin-left: ~"calc(.75em - 1px)"; + } + + .connector { + flex: 1 1 auto; + width: 2em; + max-width: 2em; + min-width: 1em; + margin-bottom: ~"calc(1em - 1px)"; + + &:first-child { + margin-left: ~"calc(.75em - 1px)"; + } + + &.initiator { + z-index: 1; + margin-right: ~"calc(-.25em - 2px)"; + } + } + + .vertical-line + .connector { + min-width: ~"calc(.75em - 2px)"; + width: ~"calc(.75em - 2px)"; + flex-grow: 0; + + &.initiator { + width: ~"calc(1em - 1px)"; + } + } + .connector:first-child { + min-width: .75em; + width: .75em; + flex-grow: 0; + + &.initiator { + width: 1em; + } + } + + .role { + padding: .25em .5em .25em .5em; + line-height: 1; + + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + + .icon:before { + font-size: 1.25em; + } + } + .inheritance-paths .role { + min-width: 4em; + margin-top: .5em; + padding-left: .25em; + } + .restrictions .role { + display: inline-block; + } + + .previews { + display: flex; + margin-top: .25em; + + em { + // explicit margin + ((header icon width + its margin right) * 125% font-size) + margin: 0 1em 0 1em + ((1.25em + .2em) * 1.25em); + } + } + + .links li:not(:last-child):after { + content: ","; + } + + .restrictions > ul > li { + margin-top: .5em; + + .role { + margin-left: 1.25em + .2em * 1.25em; // (header icon width + its margin right) * 125% font-size + margin-right: 1em; + } + } + + .restriction { + font-size: .8em; + padding: .335em / .8em; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + + .user-select(all); + } +} + +#layout.minimal-layout, +#layout.poor-layout { + .privilege-audit { + .privilege-section > summary > :first-child { + flex-grow: 99; + } + + h4, + .privilege-label { + width: 12em; + } + + .spacer { + flex: 0; + min-width: 0; + } + } +} + +// Integrations + +.privilege-audit .collapsible { + .collapsible-control { + cursor: pointer; + .user-select(none); + } +} |