summaryrefslogtreecommitdiffstats
path: root/public/css/icinga/layout.less
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-13 11:46:43 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-13 11:46:43 +0000
commit3e02d5aff85babc3ffbfcf52313f2108e313aa23 (patch)
treeb01f3923360c20a6a504aff42d45670c58af3ec5 /public/css/icinga/layout.less
parentInitial commit. (diff)
downloadicingaweb2-3e02d5aff85babc3ffbfcf52313f2108e313aa23.tar.xz
icingaweb2-3e02d5aff85babc3ffbfcf52313f2108e313aa23.zip
Adding upstream version 2.12.1.upstream/2.12.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'public/css/icinga/layout.less')
-rw-r--r--public/css/icinga/layout.less379
1 files changed, 379 insertions, 0 deletions
diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less
new file mode 100644
index 0000000..c37da79
--- /dev/null
+++ b/public/css/icinga/layout.less
@@ -0,0 +1,379 @@
+/*! Icinga Web 2 | (c) 2015 Icinga Development Team | GPLv2+ */
+
+#footer {
+ bottom: 0;
+ right: 0;
+ left: 12em;
+ position: fixed;
+ z-index: 999;
+}
+
+#layout.minimal-layout #footer {
+ left: 0;
+}
+
+.sidebar-collapsed #footer {
+ left: 3em;
+}
+
+#guest-error {
+ background-color: @icinga-blue;
+ height: 100%;
+ overflow: auto;
+}
+
+#guest-error #icinga-logo {
+ .fadein();
+}
+
+#guest-error-message {
+ .fadein();
+ color: @body-bg-color;
+ font-size: 2em;
+}
+
+#header,
+#login,
+#content-wrapper {
+ font-size: @font-size;
+ line-height: @line-height;
+}
+
+#header-logo-container {
+ background: @menu-bg-color;
+ height: 6em;
+ padding: 1.25em;
+ width: 16em;
+}
+
+#header-logo,
+#mobile-menu-logo {
+ background-image: url('../img/icinga-logo.svg');
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-size: contain;
+ display: block;
+ height: 100%;
+ width: 100%;
+
+ &:focus {
+ opacity: .6;
+ outline: none;
+ }
+}
+
+#mobile-menu-logo {
+ width: 50%;
+ float: left;
+ height: 2em;
+ margin-top: .25em;
+ background-position: .75em center;
+}
+
+#mobile-menu-toggle .icon-cancel {
+ display: none;
+}
+
+#icinga-logo {
+ background-image: url('../img/icinga-logo-big.svg');
+ background-position: center bottom;
+ background-repeat: no-repeat;
+ background-size: contain; // Does not work in IE < 10
+ height: 177px;
+ margin-bottom: 2em;
+ width: 100%;
+
+ &.invert {
+ background-image: url('../img/icinga-logo-big-dark.svg');
+ }
+}
+
+#layout {
+ background-color: @body-bg-color;
+ color: @text-color;
+ font-family: @font-family;
+}
+
+#login {
+ overflow: auto;
+}
+
+@gutter: 1em;
+
+// x-column-layout
+#main {
+ .clearfix();
+
+ & > .container {
+ width: 0;
+ overflow: auto;
+ flex: 1 1 auto;
+ display: flex;
+ flex-direction: column;
+
+ &:empty {
+ display: none;
+ }
+
+ & > .content {
+ flex: 1 1 auto;
+ overflow: auto;
+ }
+
+ & > .controls {
+ > .tabs {
+ // Remove gutter for tabs
+ margin-left: -1 * @gutter;
+ margin-right: -1 * @gutter;
+ height: 2.5em;
+ }
+
+ .tabs:first-child:not(:last-child) {
+ margin-bottom: .5em;
+ }
+ }
+ }
+}
+
+// Not part of the above to relax specificity and to allow modules adjust this
+:not(.dashboard) > .container {
+ & > .controls {
+ padding-left: @gutter;
+ padding-right: @gutter;
+ }
+
+ & > .content {
+ padding: @gutter;
+ }
+}
+
+// Mobile menu
+#layout.minimal-layout #sidebar {
+ background-color: @menu-bg-color;
+}
+
+#mobile-menu-toggle {
+ color: @menu-color;
+ text-align: right;
+
+ > button {
+ background: none;
+ border: none;
+ font-size: 2em;
+ padding: 0 .5em;
+ line-height: 2;
+
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -ms-appearance: none;
+ appearance: none;
+ }
+
+ i:before {
+ margin-right: 0;
+ }
+}
+
+.container,
+.error-message,
+.modal-window {
+ // Don't outline containers and error messages when focused because they receive focus for accessibility only
+ // programmatically
+ outline: none;
+}
+
+.controls {
+ > .tabs {
+ overflow: hidden;
+ }
+}
+
+// Dashboard grid
+
+.dashboard {
+ letter-spacing: -0.417em;
+
+ > .container {
+ display: inline-block;
+ letter-spacing: normal;
+ vertical-align: top;
+ // Column width controlled by #layout
+ width: 100%;
+
+ &:last-of-type {
+ // See reponsive.less for gutters
+ padding-right: 0;
+ }
+ }
+}
+
+// Notification styles
+
+#notifications {
+ // Reset defaults
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+
+#notifications > li {
+ color: @text-color;
+ display: block;
+ line-height: 2.5em;
+ border-left: .5em solid @gray-light;
+ background: @body-bg-color;
+ margin-bottom: 1px;
+ box-shadow: 0 0 1em 0 rgba(0,0,0,0.25);
+
+ .icon {
+ padding: .5em;
+ width: 3em;
+ text-align: center;
+ }
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ &.error {
+ border-color: @color-notification-error;
+ background: @color-notification-error;
+ color: @text-color-on-icinga-blue;
+
+ .icon {
+ color: @text-color-on-icinga-blue;
+ }
+ }
+
+ &.info {
+ border-color: @color-notification-info;
+
+ .icon {
+ color: @color-notification-info;
+ }
+ }
+
+ &.success {
+ border-color: @color-notification-success;
+
+ .icon {
+ color: @color-notification-success;
+ }
+ }
+
+ &.warning {
+ border-color: @color-notification-warning;
+ background: @color-notification-warning;
+ color: @text-color-inverted;
+
+ .icon {
+ color: @text-color-inverted;
+ }
+ }
+}
+
+// Collapsed sidebar
+#layout:not(.minimal-layout).sidebar-collapsed {
+ #header-logo-container {
+ height: 3em;
+ padding: 0.25em 0.125em;
+ width: 4em;
+ }
+
+ #header-logo {
+ background-image: url('../img/icinga-logo-compact.svg');
+ }
+
+ #sidebar {
+ width: 4em;
+ }
+
+ #open-sidebar {
+ display: inline;
+ }
+
+ #close-sidebar {
+ display: none;
+ }
+
+ #menu {
+ .nav-level-1 {
+ > .badge-nav-item > a {
+ position: relative;
+
+ > .badge {
+ position: absolute;
+ right: .5em;
+ bottom: .25em;
+ font-size: 75%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 4em;
+ }
+ }
+
+ > .nav-item.active > a > .badge {
+ display: unset;
+ }
+ }
+
+ img.icon {
+ margin: 0 1.25em -.25em 0.25em;
+ font-size: 1.5em;
+ }
+
+ .nav-item {
+ white-space: nowrap;
+ }
+
+ .nav-item.no-icon > a {
+ padding-left: .75em;
+ }
+
+ .nav-level-1 > .nav-item i {
+ font-size: 1.5em;
+ margin-right: .5em;
+ }
+
+ > .search-control {
+ height: 3.333em;
+ }
+ }
+
+ #search {
+ padding-left: 3.75em;
+ }
+
+ #search:focus {
+ background-color: @menu-bg-color;
+ border-radius: 0 .25em .25em 0;
+ box-shadow: 0 0 .25em 0 rgba(0, 0, 0, .2);
+ color: @menu-color;
+ width: 20em;
+ position: fixed;
+ z-index: 1;
+ }
+
+ .search-input {
+ font-size: 1.25em;
+ padding-right: .625em;
+ }
+
+ .search-reset {
+ display: none;
+ }
+
+ .skip-links {
+ a, button {
+ width: 20em;
+ }
+ }
+}
+
+@light-mode: {
+ #header-logo,
+ #mobile-menu-logo,
+ #about .icinga-logo {
+ filter: brightness(0.415) sepia(1) ~"saturate(0.1)" hue-rotate(144deg);
+ }
+};