diff options
Diffstat (limited to 'public/css/icinga/setup.less')
-rw-r--r-- | public/css/icinga/setup.less | 480 |
1 files changed, 480 insertions, 0 deletions
diff --git a/public/css/icinga/setup.less b/public/css/icinga/setup.less new file mode 100644 index 0000000..5748c8e --- /dev/null +++ b/public/css/icinga/setup.less @@ -0,0 +1,480 @@ +/*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */ + +#setup-content-wrapper { + height: 0; + display: flex; + flex: 1 1 auto; + flex-direction: column; + + > .setup-content { + height: 0; + overflow: auto; + flex: 1 1 auto; + } +} + +.setup-header { + width: 100%; + height: 5.5em; + background-color: @icinga-blue; + text-align: center; + + img { + width: 7.5em; + margin: 1.5em; + float: left; + } + + form[name='setup_restart_form'] button { + background: none; + border: none; + color: #ffffff; + cursor: pointer; + outline: none; + font-size: 1.4em; + margin-right: 0.6em; + -moz-transform: scale(1, -1); + -webkit-transform: scale(1, -1); + -o-transform: scale(1, -1); + -ms-transform: scale(1, -1); + transform: scale(1, -1); + } + + .progress-bar { + overflow: hidden; + padding-top: 1em; + + .step { + float: left; + + h1 { + margin: 0; + color: white; + font-size: 0.9em; + text-align: center; + border-bottom: none; + } + + table { + margin-top: 0.3em; + + td { + padding: 0; + + &.left, &.right { + width: 50%; + } + } + } + + div { + background-color: lightgrey; + + &.line { + height: 0.4em; + + &.left { + margin-left: 0.1em; + margin-right: -0.1em; + border-top-left-radius: 0.5em; + border-bottom-left-radius: 0.5em; + } + + &.right { + margin-left: -0.1em; + margin-right: 0.1em; + border-top-right-radius: 0.5em; + border-bottom-right-radius: 0.5em; + } + } + + &.bubble { + width: 1.2em; + height: 1.2em; + border-radius: 1.2em; + + // Make sure that such a bubble overlays lines + position: relative; + z-index: 1337; + } + + &.active { + background-color: white; + } + + &.complete { + background-color: @color-ok; + } + + &.visited { + background-color: #eee; + } + } + } + } +} + +.setup-content { + padding: 1.5em 10em 0 10em; + + h1 { + font-weight: bold; + } + + form { + h2 { + font-size: 2.0em; + } + } +} + +.setup-content .control-group > :not([hidden]) { + display: inline-block; + margin-right: 1em; +} + +.setup-content div.buttons { + margin-top: 1.5em; // Yes, -top and -bottom, keep it like that... + margin-bottom: 1.5em; + + .double { + position: absolute; + left: -1337px; + } + + .control-button, + input[type="submit"] { + .button(); + justify-content: center; + } + + .control-button[disabled] { + background: none; + cursor: default; + color: @control-disabled-color; + border: 1px solid @control-disabled-color; + + &:hover { + color: @control-disabled-color; + background: none; + border: 1px solid @control-disabled-color; + } + } + + button.finish, a.button-link.login { + min-width: 25em; + } + + .spinner { + margin-left: 1em; + } +} + +.setup-content div.buttons + ul.hints { + margin-top: -1.5em; + margin-bottom: 1.5em; +} + +form#setup_requirements { + margin-top: 2em; + padding-top: 0.5em; + border-top: 1px solid #888; + + div.buttons div.requirements-refresh { + width: 25%; + float: right; + text-align: center; + + a.button-like { + padding: 0.1em 0.4em; + } + } +} + +.setup-content ul.requirements { + margin: 0; + padding: 0; + list-style-type: none; + + li { + margin-bottom: 1em; + + & > ul { + margin: 0; + padding: 0; + list-style-type: none; + } + + div { + float: left; + padding-top: 0.4em; + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + } + + div.title { + width: 25%; + + h2 { + padding: 0; + margin: 0 1em 0 0; + border-bottom: 0; + } + } + + div.description { + width: 50%; + border-left: 0.4em solid transparent; + border-right: 0.4em solid transparent; + + ul { + margin: 0; + padding-left: 1em; + list-style-type: square; + } + } + + div.state { + width: 25%; + color: white; + padding: 0.4em; + + &.fulfilled { + background-color: @color-ok; + } + + &.not-available { + color: black; + background-color: #e8ec70; + } + + &.missing { + background-color: @color-critical; + } + } + } +} + +#setup_ldap_discovery_confirm table { + margin: 1em 0; + border-collapse: separate; + border-spacing: 1em 0.2em; +} + +#setup_admin_account { + div.instructions { + width: 30.2em; + display: inline-block; + } + + div.radiobox { + vertical-align: top; + display: inline-block; + padding: 0.9em 0.2em 0; + } +} + +.setup-content { + div.summary { + font-size: 90%; + + div.page { + float: left; + width: 25em; + min-height: 25em; + padding: 0 1em 1em; + margin: 1em 1.5em 1.5em; + border: 1px dashed lightgrey; + + h2 { + font-size: 1.2em; + font-weight: bold; + } + + div.topic { + margin-left: 2em; + + h3 { + font-size: 1em; + } + + ul { + list-style-type: circle; + } + + table { + border-spacing: 0.5em; + border-collapse: separate; + font-size: 0.9em; + margin-left: 2em; + } + } + } + } + + form.summary { + clear: left; + } +} + +#setup-finish { + h2 { + padding: 0.5em; + border-bottom: 0; + font-variant: normal; + font-weight: bold; + color: white; + + &.success { + background-color: @color-ok; + } + + &.failure { + background-color: @color-critical; + } + } + + pre.log-output { + width: 66%; + height: 25em; + max-height: none; + } + + div.buttons { + margin-top: 0; + text-align: center; + + a { + padding: 0.5em; + } + } +} + +.welcome-page { + margin-top: 3em; + text-align: center; + + h2 { + font-size: 2.0em; + margin-bottom: 2em; + } + + div.info { + padding: 0 1em; + background-color: #eee; + border: 1px solid lightgrey; + } + + p.restart-warning { + color: coral; + font-weight: bold; + } + + form ul.errors { + display: block; + + list-style-type: none; + color: red; + } + + div.note { + padding: 1em 1em 0; + margin: 3em auto 0; + text-align: left; + font-size: 0.9em; + border: 1px solid; + border-color: @gray-light; + + h3 { + padding: 0.2em; + margin: -1em -1em 1em; + text-align: center; + color: @text-color; + background-color: @gray-lightest; + border: 1px solid; + border-color: @gray-light; + } + + img { + float: right; + } + + p { + margin: 2em 0 1em 0; + + &:first-child { + margin-top: 1em; + } + } + + div.code { + margin: 0 2em; + + span { + display: block; + font-family: monospace; + } + } + } +} + +#setup_monitoring_welcome { + .welcome-page; + margin-top: 0; + padding: 1em; + + h2 { + margin-top: 0; + } +} + +#setup_modules { + div.module { + float: left; + width: 15em; + height: 15em; + margin: 1em; + padding: 0.3em; + border: 1px solid; + border-color: @gray-semilight; + background-color: @gray-lightest; + + .header { + height: 2.5em; + display: flex; + justify-content: space-between; + } + + h3 { + margin: 0; + border: none; + overflow: hidden; + text-overflow: ellipsis; + + label { + cursor: pointer; + } + } + + label.description { + display: inline-block; + width: 14.4em; + height: 12em; + overflow: auto; + cursor: pointer; + font-weight: normal; + } + + input[type=checkbox] { + height: 10em; + float: right; + margin: 0; + } + } + + div.buttons { + padding-top: 1em; + clear: both; + } +} |