diff --git a/skins/elastic/styles/colors.less b/skins/elastic/styles/colors.less index 11a374e4d..b41dc3aa1 100644 --- a/skins/elastic/styles/colors.less +++ b/skins/elastic/styles/colors.less @@ -69,7 +69,7 @@ // Listings @color-list: @color-font; @color-list-selected: inherit; -@color-list-selected-background: tint(@color-main, 96%); +@color-list-selected-background: tint(@color-main, 94%); @color-list-flagged: @color-error; @color-list-deleted: @color-black-shade-border; @color-list-secondary: @color-black-shade-text; diff --git a/skins/elastic/styles/widgets/messages.less b/skins/elastic/styles/widgets/messages.less index db8fa5c55..30cc2e794 100644 --- a/skins/elastic/styles/widgets/messages.less +++ b/skins/elastic/styles/widgets/messages.less @@ -11,39 +11,6 @@ /*** UI Messages ***/ -#messagestack { - position: absolute; - bottom: .5em; - right: .7em; - z-index: 102; // needs to be above .ui-widget-overlay - width: 320px; - height: auto; - max-height: 85%; - - @media screen and (max-width: @screen-width-xs) { - left: 0; - right: 0; - bottom: 0; - width: auto; - } - - div { - &.voice { - position: absolute; - top: -1000px; - } - - i.icon { - font-size: 1.5em !important; - } - - a:hover { - text-decoration: underline; - cursor: pointer; - } - } -} - // .boxwarning/.boxerror/.boxinformation classes are converted to .ui.alert in bootstrap_init() .ui.alert { @@ -54,15 +21,12 @@ padding: .75em; color: @color-message; border: 1px solid @color-message-border; -// box-shadow: 1px 1px 2px @color-message-shadow; background-color: @color-message-background; display: flex; align-items: center; @media screen and (max-width: @screen-width-xs) { - box-shadow: none; border: 0; - border-top: 2px solid #fff; border-radius: 0; min-height: 4.2rem; } @@ -77,10 +41,6 @@ margin: auto 0; } - &.loading { - color: @color-message-loading; - } - & > i.icon { line-height: 1; color: @color-message-information; @@ -91,13 +51,17 @@ &:extend(.font-icon-class); content: @fa-var-info-circle; margin-right: .6rem; - width: 1em; } - &.loading > i.icon:before { - content: @fa-var-circle-notch; - .animated-icon-class; + &.loading { color: @color-message-loading; + + & > i.icon:before { + content: @fa-var-circle-notch; + .animated-icon-class; + color: @color-message-loading; + width: 1em; + } } &.alert-success > i.icon:before { @@ -151,17 +115,13 @@ &.boxwarning { float: none; border-radius: 0; - box-shadow: none; border: none; padding: .5em; + margin-top: 0; // this can be a

element, reset default margin i.icon { font-size: 1.5em !important; } - - & + :not(.boxwarning) { - margin-top: 1rem; - } } &.boxerror { @@ -176,3 +136,93 @@ background-color: @color-message-warning-background; } } + +#messagestack { + position: absolute; + bottom: .5em; + right: .7em; + z-index: 102; // needs to be above .ui-widget-overlay + width: 320px; + height: auto; + max-height: 85%; + + @media screen and (max-width: @screen-width-xs) { + left: 0; + right: 0; + bottom: 0; + width: auto; + } + + div { + border-color: transparent; + + &.voice { + position: absolute; + top: -1000px; + } + + i.icon { + font-size: 1.5em !important; + } + } + + .loading { + background-color: @color-list-selected-background; + border-color: @color-main; + color: @color-main; + + & > i.icon:before { + color: inherit; + } + } + + .alert-info.information { + color: #fff; + background-color: @color-message-information; + + & > i.icon:before { + color: #fff; + } + } + + .alert-info.notice { + color: #fff; + background-color: @color-taskmenu-background; + + & > i.icon:before { + color: #fff; + } + } + + .alert-success { + color: #fff; + background-color: @color-message-success; + + & > i.icon:before { + color: #fff; + } + } + + .alert-warning { + background-color: @color-message-warning; + + & > i.icon:before { + color: #fff; + } + } + + .alert-danger { + color: #fff; + background-color: @color-message-error; + + & > i.icon:before { + color: #fff; + } + } + + a { + color: inherit !important; + text-decoration: underline; + cursor: pointer; + } +}