diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-13 11:46:43 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-13 11:46:43 +0000 |
commit | 3e02d5aff85babc3ffbfcf52313f2108e313aa23 (patch) | |
tree | b01f3923360c20a6a504aff42d45670c58af3ec5 /public/css/icinga/controls.less | |
parent | Initial commit. (diff) | |
download | icingaweb2-upstream.tar.xz icingaweb2-upstream.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/controls.less')
-rw-r--r-- | public/css/icinga/controls.less | 281 |
1 files changed, 281 insertions, 0 deletions
diff --git a/public/css/icinga/controls.less b/public/css/icinga/controls.less new file mode 100644 index 0000000..01cf152 --- /dev/null +++ b/public/css/icinga/controls.less @@ -0,0 +1,281 @@ +/*! Icinga Web 2 | (c) 2015 Icinga Development Team | GPLv2+ */ + +// TODO(el): Rename .filter to .filter-control + +// Hide auto sumbit info in controls +.controls .autosubmit-info { + display: none; +} + + +// Backend selection control in user and group list views +.backend-selection { + float: left; + + .control-label-group, select { + display: inline-block; + } + + select { + margin-left: .5em; + } +} + +.controls input.search, +input.search { + .transition(border 0.3s ease); + .transition(background-image 0.2s ease); + + background-image: url(../img/icons/search_white.png); + background-repeat: no-repeat; + background-size: 1em 1em; + background-position: .25em center; + outline: none; + padding-left: 1.5em; + width: 20em; + + &:focus { + background-image: url(../img/icons/search_icinga_blue.png); + } + + &:focus:not([readonly]) { + border-color: @icinga-blue; + } +} + +@light-mode: { + #menu input.search, + .controls input.search, + input.search { + background-image: url(../img/icons/search.png); + } +}; + +.backend-selection, +.pagination-control, +.selection-info, +.sort-controls-container { + margin-bottom: 0.5em; +} + +.filter { + // Display filter control on a new line + clear: both; + margin: .5em 0; + + > a { + color: @icinga-blue; + padding: .5em; + line-height: 1; + } + + > a > i { + text-align: center; + &:before { + margin-right: 0; + } + } + + .form input { + padding: @vertical-padding @vertical-padding; + } +} + +.controls .filter { + form .search { + height: 2em; + } +} + +.controls .button-link { + height: 2em; +} + +.limiter-control > select { + margin-left: .5em; +} + +.pagination-control { + // Display the pagination-control on a new line + clear: both; + float: left; + + li { + line-height: 1; + + &.active { + border-bottom: 2px solid @icinga-blue; + + > a, + > a:hover { + color: @icinga-blue; + /* Compensate border-bottom: 2px */ + margin-bottom: -2px; + } + + > a:hover { + background: none; + cursor: default; + text-decoration: none; + } + } + + &.disabled { + color: @disabled-gray; + cursor: no-drop; + } + + > a, + > span { + padding: 0.5em; + } + > a:hover { + background-color: @gray-lighter; + text-decoration: none; + } + } + + .previous-page { + padding-left: 0; + } + + .next-page { + padding-right: 0; + } +} + +// Multi-selection info +.selection-info { + float: right; + font-size: @font-size-small; + + &:hover { + cursor: help; + } +} + +.sort-control { + label { + width: auto; + margin-right: 0.5em; + } + + select[name=sort] { + width: 12em; + margin-left: 0; + } + + select[name=dir] { + width: 8em; + margin-left: 0; + } +} + +.sort-controls-container { + clear: right; + float: right; + display: flex; + + > *:not(:last-child) { + margin-right: .5em; + } +} + +.sort-direction-control { + margin-left: 0.25em; + width: 1em; + + .spinner { + line-height: 1; + } +} + +.controls .icinga-controls { + .control-label-group { + margin-top: 0; + margin-bottom: 0; + line-height: 1.5em; + padding-top: 0.25em; + padding-bottom: 0.25em; + } + + input, + select { + max-width: 16em; + } + + select { + padding-right: 1.526em; + margin-top: 0; + margin-bottom: 0; + /* compensate inconsistent select height calculations */ + line-height: 1; + max-height: 2em; + } +} + +// Datetime picker colors + +// The less variables are essentially the official dark theme for the flatpickr +@fp-calendarBackground: #3f4458; +@fp-calendarBorderColor: darken(#3f4458, 50%); + +@fp-monthForeground: #fff; +@fp-monthBackground: #3f4458; + +@fp-weekdaysBackground: transparent; +@fp-weekdaysForeground: #fff; + +@fp-dayForeground: fadeout(white, 5%); +@fp-dayHoverBackground: lighten(@fp-calendarBackground, 25%); + +@fp-todayColor: #eee; +@fp-today_fg_color: #3f4458; + +@fp-selectedDayBackground: #80CBC4; + +.icinga-datetime-picker .flatpickr-day.today { + &:hover, + &:focus { + color: @fp-today_fg_color; + } +} + +@light-mode: { + :root { + // These are actually the default colors for the flatpickr + + @fp-dayForeground: #393939; + @fp-dayHoverBackground: #e6e6e6; + + --fp-calendarBackground: #ffffff; + --fp-calendarBorderColor: @fp-dayHoverBackground; + + --fp-arrowColor: fadeout(@fp-dayForeground, 40%); + --fp-arrow_hover_color: #f64747; + + --fp-monthForeground: fadeout(black, 10%); + --fp-monthBackground: transparent; + + --fp-weekdaysBackground: transparent; + --fp-weekdaysForeground: fadeout(black, 46%); + --fp-weekNumberForeground: fadeout(@fp-dayForeground, 70%); + + --fp-dayForeground: @fp-dayForeground; + --fp-dayHoverBackground: @fp-dayHoverBackground; + --fp-disabledDayForeground: fadeout(@fp-dayForeground, 90%); + --fp-outsideRangeDayForeground: fadeout(@fp-dayForeground, 70%); + --fp-selectedDayBackground: #569FF7; + --fp-todayColor: #959ea9; + + --fp-timeHoverBg: lighten(@fp-dayHoverBackground, 3); + + --fp-hoverInvertedBg: fadeout(black, 95%); + + --fp-numChooserSvgFillColor: fadeout(fadeout(black, 10%), 50%); + --fp-hoverNumChooserBg: fadeout(black, 90%); + --fp-numChooserBorderColor: fadeout(@fp-dayForeground, 85%); + } +}; + +// Datetime picker colors (end) |