diff --git a/application/views/scripts/about/index.phtml b/application/views/scripts/about/index.phtml index 47a122a96..0485f5cf8 100644 --- a/application/views/scripts/about/index.phtml +++ b/application/views/scripts/about/index.phtml @@ -2,7 +2,7 @@
- img('img/icinga-logo-big.svg', null, array('class' => 'icinga-logo', 'width' => 320)) ?> + img('img/icinga-logo-big-dark.png', null, array('class' => 'icinga-logo', 'width' => 320)) ?>
translate('Icinga Web 2 Version') ?>
diff --git a/library/Icinga/Web/LessCompiler.php b/library/Icinga/Web/LessCompiler.php index cbf486122..e3efede80 100644 --- a/library/Icinga/Web/LessCompiler.php +++ b/library/Icinga/Web/LessCompiler.php @@ -3,6 +3,7 @@ namespace Icinga\Web; +use Icinga\Application\Icinga; use Icinga\Application\Logger; use Icinga\Util\LessParser; @@ -48,6 +49,8 @@ class LessCompiler */ protected $source; + private $defaultThemeOverride = false; + /** * Path of the LESS theme * @@ -142,6 +145,14 @@ class LessCompiler return $lessFiles; } + /** + * @deprecated Don't use + */ + public function enableDefaultThemeOverride() + { + $this->defaultThemeOverride = true; + } + /** * Set the path to the LESS theme * @@ -241,6 +252,12 @@ class LessCompiler // able to override other variables, that's what themes are for $this->source = $varExports . "\n\n" . $this->source; + if ($this->defaultThemeOverride) { + $this->source .= file_get_contents( + Icinga::app()->getBaseDir('public/css/icinga') . '/legacy-theme.less' + ); + } + if ($this->theme !== null) { $this->source .= file_get_contents($this->theme); } diff --git a/library/Icinga/Web/StyleSheet.php b/library/Icinga/Web/StyleSheet.php index a8a03168a..54fcc0c30 100644 --- a/library/Icinga/Web/StyleSheet.php +++ b/library/Icinga/Web/StyleSheet.php @@ -107,6 +107,7 @@ class StyleSheet $app = Icinga::app(); $this->app = $app; $this->lessCompiler = new LessCompiler(); + $this->lessCompiler->enableDefaultThemeOverride(); $this->pubPath = $app->getBaseDir('public'); $this->collect(); } diff --git a/public/css/icinga/legacy-theme.less b/public/css/icinga/legacy-theme.less new file mode 100644 index 000000000..931de5540 --- /dev/null +++ b/public/css/icinga/legacy-theme.less @@ -0,0 +1,175 @@ +// base.less +@gray: #7F7F7F; +@gray-semilight: #A9A9A9; +@gray-light: #C9C9C9; +@gray-lighter: #EEEEEE; +@gray-lightest: #F7F7F7; +@icinga-blue: #0095BF; +@low-sat-blue: #dae3e6; +@low-sat-blue-dark: #becbcf; +@body-bg-color: #fff; +@text-color: @black; +@text-color-light: @gray; +@tr-active-color: #E5F9FF; +@tr-hover-color: #F5FDFF; +@menu-bg-color: #494949; +@menu-active-bg-color: #333; +@menu-color: @text-color-inverted; +@menu-hover-bg-color: mix(#000, @menu-bg-color, 20); +@menu-search-hover-bg-color: mix(#000, @menu-bg-color, 20); +@menu-active-hover-bg-color: mix(#000, @menu-active-bg-color, 20); +@menu-2ndlvl-highlight-bg-color: darken(@menu-bg-color, 20); +@tab-hover-bg-color: rgba(0,0,0,.1); + +.container { + &:before, + > .content:before { + background-image: url(../img/icinga-loader-light.gif); + } +} + +// badges.less +.badge { + background-color: @gray-light; +} + +// controls.less +.controls input.search, +input.search { + background-image: url(../img/icons/search.png); +} + +@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: #393939; +@fp-dayHoverBackground: #e6e6e6; +@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%); + +.icinga-datetime-picker .flatpickr-day.today { + &:hover, + &:focus { + color: #fff; + } +} + +// layout-structure.less + +#sidebar:after { + display: none; +} + +// layout.less +#header-logo-container { + .var(background, icinga-blue); +} + +// login.less +#login { + color: @white; + + background-color: #06062B; + + input[type=text], + input[type=password], + .toggle-slider { + border-color: #404d72; + background-color: #404d72; + + &:before { + border-color: #282e39; + background-color: #282E39; + } + } + + input[type="checkbox"]:checked + .toggle-switch .toggle-slider { + border-color: #00C3ED; + background-color: #00C3ED; + } +} + +// menu.less +#menu .nav-level-1 > .nav-item { + &.active { + color: @menu-color; + } + + &:not(.selected) > a:hover, + &:not(.selected) > a:focus { + background-color: mix(#000, @menu-bg-color, 20); + } +} + +#menu .nav-level-2 > .nav-item { + &.active > a { + color: @menu-color; + } +} + +#layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item.active .nav-level-2 > li { + &.nav-item:not(.badge-nav-item) { + &:not(.selected):not(.active) a:hover, + &:not(.selected):not(.active) a:focus { + background-color: darken(@menu-bg-color, 20); + color: @menu-2ndlvl-highlight-color; + } + } + + &.badge-nav-item:not(.selected) { + a:hover, + a:focus { + &:first-of-type, + &:first-of-type ~ a { + color: white; + background-color: darken(@menu-bg-color, 20); + } + } + } +} + +// Hovered menu +#layout:not(.minimal-layout).sidebar-collapsed #menu .nav-level-1 > .nav-item.hover, +#layout:not(.minimal-layout) #menu .nav-level-1 > .nav-item:not(.active).hover { + > .nav-level-2 { + > .nav-item { + &:not(.active) { + a:hover, a:focus { + &:first-of-type, + &:first-of-type ~ a { + background-color: @tr-active-color; + } + } + } + } + } +} + +// tabs.less +.tabs { + background-color: @icinga-blue; + + > li > a { + color: @body-bg-color; + } +}