CSS refactored
This commit is contained in:
Thomas Gelf
parent
4af65b1842
commit
139461c6d5
|
|
@ -0,0 +1,51 @@
|
|||
|
||||
/*** Base rules ***/
|
||||
* {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
TODO: -xy-text-resize-dings
|
||||
*/
|
||||
|
||||
html, body, form, ul {
|
||||
/* TODO: Really 0 ? */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: none;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Ubuntu, Trebuchet MS, Calibri, Helvetica, sans-serif;
|
||||
color: black;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #333;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: black;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#fontsize-calc {
|
||||
width: 1000em;
|
||||
height: 1em;
|
||||
font-size: 1em;
|
||||
position: absolute;
|
||||
top: -2em;
|
||||
}
|
||||
/*** END of Base rules */
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
/* TODO: not here!! */
|
||||
.controls {
|
||||
/* font-size: 0.8em; */
|
||||
}
|
||||
|
||||
|
||||
@petrol : #049baf;
|
||||
@black : #262625;
|
||||
/* END */
|
||||
|
||||
/* =======================================================
|
||||
Forms ========================================================= */
|
||||
|
||||
.form-inline .form-group {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
|
||||
.input-sm {
|
||||
border-radius: 0.2em;
|
||||
font-size: 1em;
|
||||
padding: 0.3em;
|
||||
}
|
||||
.form-control {
|
||||
background-color: white;
|
||||
border: 1px solid lightgrey;
|
||||
border-radius: 4px;
|
||||
padding: 5px;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
|
||||
color: darkgrey;
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
Buttons
|
||||
========================================================================== */
|
||||
|
||||
.button {
|
||||
text-align: center;
|
||||
padding: 3px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.btn-common {
|
||||
border-color: @lightgrey;
|
||||
color: @black;
|
||||
background: rgb(255,255,255); /* Old browsers */
|
||||
background: -moz-linear-gradient(top, rgb(255,255,255) 1%, rgb(245,245,245) 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgb(255,255,255)), color-stop(100%,rgb(245,245,245))); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* IE10+ */
|
||||
background: linear-gradient(to bottom, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* W3C */
|
||||
}
|
||||
|
||||
.panel-row > a:hover,
|
||||
.btn-common:hover {
|
||||
border-color: @black !important;
|
||||
color: @black !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-cta {
|
||||
border-color: @petrol;
|
||||
color: @petrol;
|
||||
background: rgb(255,255,255); /* Old browsers */
|
||||
background: -moz-linear-gradient(top, rgb(255,255,255) 1%, rgb(245,245,245) 100%); /* FF3.6+ */
|
||||
background: -webkit-linear-gradient(top, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* IE10+ */
|
||||
background: linear-gradient(to bottom, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* W3C */
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
#header div.user {
|
||||
font-size: 1.1em;
|
||||
margin-top: 0.8em;
|
||||
margin-right: 2em;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#responsive-debug {
|
||||
font-size: 0.6em;
|
||||
font-family: Courier new, monospace;
|
||||
float: left;
|
||||
padding-top: 0.5em;
|
||||
width: 10em;
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -1,366 +0,0 @@
|
|||
// {{{ICINGA_LICENSE_HEADER}}}
|
||||
/**
|
||||
* This file is part of Icinga Web 2.
|
||||
*
|
||||
* Icinga Web 2 - Head for multiple monitoring backends.
|
||||
* Copyright (C) 2013 Icinga Development Team
|
||||
*
|
||||
* This program is free software; you can redistribute it and/or
|
||||
* modify it under the terms of the GNU General Public License
|
||||
* as published by the Free Software Foundation; either version 2
|
||||
* of the License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program; if not, write to the Free Software
|
||||
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
|
||||
*
|
||||
* @copyright 2013 Icinga Development Team <info@icinga.org>
|
||||
* @license http://www.gnu.org/licenses/gpl-2.0.txt GPL, version 2
|
||||
* @author Icinga Development Team <info@icinga.org>
|
||||
*
|
||||
*/
|
||||
// {{{ICINGA_LICENSE_HEADER}}}
|
||||
|
||||
/* =========================================================================
|
||||
Icinga Icon Set
|
||||
========================================================================= */
|
||||
|
||||
.icinga-icon-mixin(@file) {
|
||||
@iconpath : "img/icons";
|
||||
background: transparent url("@{baseurl}/@{iconpath}/@{file}") center center no-repeat;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.icinga-icon-blank {
|
||||
background: transparent;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.icinga-icon-acknowledgement-petrol {
|
||||
.icinga-icon-mixin("acknowledgement_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-acknowledgement {
|
||||
.icinga-icon-mixin("acknowledgement.png");
|
||||
}
|
||||
|
||||
.icinga-icon-active-checks-disabled-petrol {
|
||||
.icinga-icon-mixin("active_checks_disabled_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-active-checks-disabled {
|
||||
.icinga-icon-mixin("active_checks_disabled.png");
|
||||
}
|
||||
|
||||
.icinga-icon-active-passive-checks-disabled-petrol {
|
||||
.icinga-icon-mixin("active_passive_checks_disabled_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-active-passive-checks-disabled {
|
||||
.icinga-icon-mixin("active_passive_checks_disabled.png");
|
||||
}
|
||||
|
||||
.icinga-icon-comment-petrol {
|
||||
.icinga-icon-mixin("comment_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-comment {
|
||||
.icinga-icon-mixin("comment.png");
|
||||
}
|
||||
|
||||
.icinga-icon-configuration-petrol {
|
||||
.icinga-icon-mixin("configuration_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-configuration {
|
||||
.icinga-icon-mixin("configuration.png");
|
||||
}
|
||||
|
||||
.icinga-icon-create-petrol {
|
||||
.icinga-icon-mixin("create_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-create {
|
||||
.icinga-icon-mixin("create.png");
|
||||
}
|
||||
|
||||
.icinga-icon-csv-petrol {
|
||||
.icinga-icon-mixin("csv_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-csv {
|
||||
.icinga-icon-mixin("csv.png");
|
||||
}
|
||||
|
||||
.icinga-icon-dashboard-petrol {
|
||||
.icinga-icon-mixin("dashboard_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-dashboard {
|
||||
.icinga-icon-mixin("dashboard.png");
|
||||
}
|
||||
|
||||
.icinga-icon-disabled-petrol {
|
||||
.icinga-icon-mixin("disabled_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-disabled {
|
||||
.icinga-icon-mixin("disabled.png");
|
||||
}
|
||||
|
||||
.icinga-icon-down-petrol {
|
||||
.icinga-icon-mixin("down_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-down {
|
||||
.icinga-icon-mixin("down.png");
|
||||
}
|
||||
|
||||
.icinga-icon-downtime-end-petrol {
|
||||
.icinga-icon-mixin("downtime_end_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-downtime-end {
|
||||
.icinga-icon-mixin("downtime_end.png");
|
||||
}
|
||||
|
||||
.icinga-icon-downtime-start-petrol {
|
||||
.icinga-icon-mixin("downtime_start__petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-downtime-start {
|
||||
.icinga-icon-mixin("downtime_start.png");
|
||||
}
|
||||
|
||||
.icinga-icon-edit-petrol {
|
||||
.icinga-icon-mixin("edit_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-edit {
|
||||
.icinga-icon-mixin("edit.png");
|
||||
}
|
||||
|
||||
.icinga-icon-error-petrol {
|
||||
.icinga-icon-mixin("error_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-error {
|
||||
.icinga-icon-mixin("error.png");
|
||||
}
|
||||
|
||||
.icinga-icon-expand-petrol {
|
||||
.icinga-icon-mixin("expand_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-expand {
|
||||
.icinga-icon-mixin("expand.png");
|
||||
}
|
||||
|
||||
.icinga-icon-flapping-petrol {
|
||||
.icinga-icon-mixin("flapping_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-flapping {
|
||||
.icinga-icon-mixin("flapping.png");
|
||||
}
|
||||
|
||||
.icinga-icon-history-petrol {
|
||||
.icinga-icon-mixin("history_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-history {
|
||||
.icinga-icon-mixin("history.png");
|
||||
}
|
||||
|
||||
.icinga-icon-hostgroup-petrol {
|
||||
.icinga-icon-mixin("hostgroup_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-hostgroup {
|
||||
.icinga-icon-mixin("hostgroup.png");
|
||||
}
|
||||
|
||||
.icinga-icon-host-petrol {
|
||||
.icinga-icon-mixin("host_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-host {
|
||||
.icinga-icon-mixin("host.png");
|
||||
}
|
||||
|
||||
.icinga-icon-in-downtime-petrol {
|
||||
.icinga-icon-mixin("in_downtime_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-in-downtime {
|
||||
.icinga-icon-mixin("in_downtime.png");
|
||||
}
|
||||
|
||||
.icinga-icon-json-petrol {
|
||||
.icinga-icon-mixin("json_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-json {
|
||||
.icinga-icon-mixin("json.png");
|
||||
}
|
||||
|
||||
.icinga-icon-logout-petrol {
|
||||
.icinga-icon-mixin("logout_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-logout {
|
||||
.icinga-icon-mixin("logout.png");
|
||||
}
|
||||
|
||||
.icinga-icon-next-petrol {
|
||||
.icinga-icon-mixin("next_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-next {
|
||||
.icinga-icon-mixin("next.png");
|
||||
}
|
||||
|
||||
.icinga-icon-notification-disabled-petrol {
|
||||
.icinga-icon-mixin("notification_disabled_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-notification-disabled {
|
||||
.icinga-icon-mixin("notification_disabled.png");
|
||||
}
|
||||
|
||||
.icinga-icon-notification-petrol {
|
||||
.icinga-icon-mixin("notification_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-notification {
|
||||
.icinga-icon-mixin("notification.png");
|
||||
}
|
||||
|
||||
.icinga-icon-pdf-petrol {
|
||||
.icinga-icon-mixin("pdf_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-pdf {
|
||||
.icinga-icon-mixin("pdf.png");
|
||||
}
|
||||
|
||||
.icinga-icon-prev-petrol {
|
||||
.icinga-icon-mixin("prev_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-prev {
|
||||
.icinga-icon-mixin("prev.png");
|
||||
}
|
||||
|
||||
.icinga-icon-refresh-petrol {
|
||||
.icinga-icon-mixin("refresh_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-refresh {
|
||||
.icinga-icon-mixin("refresh.png");
|
||||
}
|
||||
|
||||
.icinga-icon-remove-petrol {
|
||||
.icinga-icon-mixin("remove_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-remove {
|
||||
.icinga-icon-mixin("remove.png");
|
||||
}
|
||||
|
||||
.icinga-icon-reschedule-petrol {
|
||||
.icinga-icon-mixin("reschedule_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-reschedule {
|
||||
.icinga-icon-mixin("reschedule.png");
|
||||
}
|
||||
|
||||
.icinga-icon-save-petrol {
|
||||
.icinga-icon-mixin("save_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-save {
|
||||
.icinga-icon-mixin("save.png");
|
||||
}
|
||||
|
||||
.icinga-icon-search-petrol {
|
||||
.icinga-icon-mixin("search_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-search {
|
||||
.icinga-icon-mixin("search.png");
|
||||
}
|
||||
|
||||
.icinga-icon-servicegroup-petrol {
|
||||
.icinga-icon-mixin("servicegroup_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-servicegroup {
|
||||
.icinga-icon-mixin("servicegroup.png");
|
||||
}
|
||||
|
||||
.icinga-icon-service-petrol {
|
||||
.icinga-icon-mixin("service_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-service {
|
||||
.icinga-icon-mixin("service.png");
|
||||
}
|
||||
|
||||
.icinga-icon-softstate {
|
||||
.icinga-icon-mixin("softstate.png");
|
||||
}
|
||||
|
||||
.icinga-icon-submit-petrol {
|
||||
.icinga-icon-mixin("submit_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-submit {
|
||||
.icinga-icon-mixin("submit.png");
|
||||
}
|
||||
|
||||
.icinga-icon-success-petrol {
|
||||
.icinga-icon-mixin("success_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-success {
|
||||
.icinga-icon-mixin("success.png");
|
||||
}
|
||||
|
||||
.icinga-icon-uebersicht {
|
||||
.icinga-icon-mixin("uebersicht.png");
|
||||
}
|
||||
|
||||
.icinga-icon-unhandled-petrol {
|
||||
.icinga-icon-mixin("unhandled_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-unhandled {
|
||||
.icinga-icon-mixin("unhandled.png");
|
||||
}
|
||||
|
||||
.icinga-icon-up-petrol {
|
||||
.icinga-icon-mixin("up_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-up {
|
||||
.icinga-icon-mixin("up.png");
|
||||
}
|
||||
|
||||
.icinga-icon-user-petrol {
|
||||
.icinga-icon-mixin("user_petrol.png");
|
||||
}
|
||||
|
||||
.icinga-icon-user {
|
||||
.icinga-icon-mixin("user.png");
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
/* Layout colors */
|
||||
|
||||
#sidebar {
|
||||
background-color: #999;
|
||||
-moz-box-shadow: inset -0.5em 0 0.5em -0.5em #555;
|
||||
-webkit-box-shadow: inset -0.5em 0 0.5em -0.5em #555;
|
||||
box-shadow: inset -0.5em 0 0.5em -0.5em #555;
|
||||
}
|
||||
|
||||
#header {
|
||||
background-color: #555;
|
||||
color: #d0d0d0;
|
||||
}
|
||||
|
||||
#header input {
|
||||
background-color: #777;
|
||||
}
|
||||
|
||||
#main {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#col1.impact, #col2.impact, #col3.impact {
|
||||
background-color: #ddd;
|
||||
.controls {
|
||||
background-color: #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
@colorOk: #44bb77;
|
||||
@colorWarning: #ffaa44;
|
||||
@colorWarningHandled: #ffcc66;
|
||||
@colorCritical: #ff5566;
|
||||
@colorCriticalHandled: #ff99aa;
|
||||
@colorUnknown: #dd66ff;
|
||||
@colorUnknownHandled: #ee99ff;
|
||||
@colorPending: #77aaff;
|
||||
@colorInvalid: #999;
|
||||
|
||||
|
|
@ -0,0 +1,178 @@
|
|||
|
||||
|
||||
#layout {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
min-width: 19em;
|
||||
}
|
||||
|
||||
#header {
|
||||
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
/* position: fixed;
|
||||
width: 13em;
|
||||
left: 0;
|
||||
top: 3em;
|
||||
bottom: 0;
|
||||
*/
|
||||
width: 13em;
|
||||
float: left;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#main {
|
||||
margin-left: 13em;
|
||||
height: 100%;
|
||||
/*
|
||||
position: fixed;
|
||||
left: 13em;
|
||||
top: 3em;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
*/
|
||||
}
|
||||
|
||||
#layout.fullscreen #header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#layout.fullscreen #sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#layout.fullscreen #main {
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* tmp */
|
||||
#main > .container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#layout.twocols #main > .container {
|
||||
width: 50%;
|
||||
}
|
||||
/*#layout.twocols #main > .container {*/
|
||||
#layout.twocols #main .container {
|
||||
/* width: 100%;*/
|
||||
/* font-size: 0.9em; */
|
||||
}
|
||||
|
||||
/* #layout.twocols #main > .container > .controls {*/
|
||||
#layout.twocols #main .container > .controls {
|
||||
width: 100%;
|
||||
/* font-size: 0.9em; */
|
||||
}
|
||||
|
||||
/* Not growing larger than 1920px at 1em=16px right now */
|
||||
@media screen and (min-width: 120em) {
|
||||
#main {
|
||||
width: 107em;
|
||||
}
|
||||
#header {
|
||||
width: 120em;
|
||||
}
|
||||
/*
|
||||
.container {
|
||||
background-color: red;
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
@media screen and (min-width: 48em) and (max-width: 62em) {
|
||||
/* #main > .container { */
|
||||
#main .container {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
/* TEST
|
||||
.container {
|
||||
background-color: blue;
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
.container > div {
|
||||
/* padding: 0 1.5% 0 1.5%; */
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container .controls {
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
background-color: white;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.controls h1 {
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 0.2em;
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
|
||||
.container .fake-controls {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container .controls .pagination {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#main .dashboard {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dashboard > div.container {
|
||||
font-size: 0.9em;
|
||||
vertical-align: top;
|
||||
width: 48%;
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
margin-left: 1%;
|
||||
}
|
||||
|
||||
.dashboard > div.container td.state {
|
||||
font-size: 1em;
|
||||
width: 4em;
|
||||
}
|
||||
|
||||
.dashboard > div.container h1 {
|
||||
line-height: 2em;
|
||||
font-size: 1em;
|
||||
padding-left: 1em;
|
||||
background-color: #555;
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.dashboard > div.container h1 a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.dashboard > div.container h1 a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#layout.twocols .dashboard > div.container {
|
||||
width: 96%;
|
||||
margin-left: 2%;
|
||||
margin-right: 2%;
|
||||
}
|
||||
.content {
|
||||
padding: 0.5em 1em 0.5em 1em;
|
||||
}
|
||||
|
||||
#inner-layout {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -1,13 +1,6 @@
|
|||
|
||||
body.login {
|
||||
position:absolute;
|
||||
left:0px;
|
||||
top:0px;
|
||||
bottom:0px;
|
||||
right:0px;
|
||||
overflow:hidden;
|
||||
|
||||
.logo-container {
|
||||
.login {
|
||||
.logo {
|
||||
background-color: #666666;
|
||||
background-image: linear-gradient(to bottom, #444444, #666666);
|
||||
-ms-background-image: linear-gradient(to bottom, #444444, #666666);
|
||||
|
|
@ -15,13 +8,14 @@ body.login {
|
|||
-moz-background-image: linear-gradient(to bottom, #444444, #666666);
|
||||
-o-background-image: linear-gradient(to bottom, #444444, #666666);
|
||||
position:absolute;
|
||||
top:0px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom:60%;
|
||||
left:0px;
|
||||
right:0px;
|
||||
right: 0;
|
||||
border-bottom:1px solid black;
|
||||
text-align: center;
|
||||
|
||||
.image-container {
|
||||
.image {
|
||||
position:absolute;
|
||||
bottom:1em;
|
||||
left:0px;
|
||||
|
|
@ -30,21 +24,30 @@ body.login {
|
|||
}
|
||||
}
|
||||
|
||||
.form-container {
|
||||
position:absolute;
|
||||
.form {
|
||||
position: absolute;
|
||||
top:45%;
|
||||
left:0px;
|
||||
bottom:0px;
|
||||
right:0px;
|
||||
border-bottom:1px solid black;
|
||||
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
overflow:auto;
|
||||
overflow-x:hidden;
|
||||
|
||||
form {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 18em;
|
||||
}
|
||||
form input {
|
||||
width: 16em;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
font-size:0.7em;
|
||||
text-align:center;
|
||||
position: absolute;
|
||||
bottom: 1em;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-size: 0.7em;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
|
||||
code {
|
||||
background-color: #eee;
|
||||
border: 1px solid #ddd;
|
||||
padding: 1em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
p code {
|
||||
display: inline;
|
||||
padding: 0.3em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #39a;
|
||||
}
|
||||
|
||||
/** Notifications **/
|
||||
|
||||
#notifications {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#notifications > li {
|
||||
list-style-type: none;
|
||||
display: block;
|
||||
border-bottom: 1px solid #999;
|
||||
color: white;
|
||||
line-height: 2.5em;
|
||||
padding-left: 3em;
|
||||
}
|
||||
|
||||
#notifications > li.warning {
|
||||
background-color: @colorWarningHandled;
|
||||
}
|
||||
#notifications > li.error {
|
||||
background-color: @colorCritical;
|
||||
background-image: url(../img/icons/error_inv.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 1em center;
|
||||
}
|
||||
/** END of Notifications **/
|
||||
|
||||
/* TODO: Remove once there is no more module container */
|
||||
.container > div > pre {
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
|
@ -1,478 +0,0 @@
|
|||
// {{{ICINGA_LICENSE_HEADER}}}
|
||||
/**
|
||||
* This file is part of Icinga Web 2.
|
||||
*
|
||||
* Icinga Web 2 - Head for multiple monitoring backends.
|
||||
* Copyright (C) 2013 Icinga Development Team
|
||||
*
|
||||
* This program is free software; you can redistribute it and/or
|
||||
* modify it under the terms of the GNU General Public License
|
||||
* as published by the Free Software Foundation; either version 2
|
||||
* of the License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program; if not, write to the Free Software
|
||||
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
|
||||
*
|
||||
* @copyright 2013 Icinga Development Team <info@icinga.org>
|
||||
* @license http://www.gnu.org/licenses/gpl-2.0.txt GPL, version 2
|
||||
* @author Icinga Development Team <info@icinga.org>
|
||||
*
|
||||
*/
|
||||
// {{{ICINGA_LICENSE_HEADER}}}
|
||||
|
||||
@orange : #ff3300;
|
||||
@white : white;
|
||||
@black : #262625;
|
||||
@petrol : #049baf;
|
||||
@lightgrey : #dddddd;
|
||||
@darkgrey : #555555;
|
||||
|
||||
/* =========================================================================
|
||||
Default elements
|
||||
========================================================================= */
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
color: @black;
|
||||
font-family: "Lucida Grande","Lucida Sans Unicode",Verdana,Helvetica,Arial,sans-serif;
|
||||
font-size: 16px;
|
||||
padding-top: 51px;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
Load Indicator
|
||||
========================================================================= */
|
||||
|
||||
.load-indicator .mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: @darkgrey;
|
||||
opacity: 0.3;
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
.load-indicator .label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: @black;
|
||||
background-color: @white;
|
||||
font-weight: normal;
|
||||
z-index: 999;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
Common elements
|
||||
========================================================================= */
|
||||
|
||||
.label-horizontal {
|
||||
display: inline;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.label-configuration {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.inline-image {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: @lightgrey center center no-repeat;
|
||||
}
|
||||
|
||||
.small-row {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.inline-form {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.gap {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
Bootstrap overrides
|
||||
========================================================================= */
|
||||
|
||||
.input-group-addon {
|
||||
padding: 4px 12px;
|
||||
}
|
||||
|
||||
.glyphicon-arrow-right {
|
||||
background: transparent url("@{baseurl}/img/icons/next.png") center center no-repeat;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
text-indent: -999px;
|
||||
}
|
||||
|
||||
.glyphicon-arrow-right:before {
|
||||
|
||||
}
|
||||
|
||||
.glyphicon-arrow-left {
|
||||
background: transparent url("@{baseurl}/img/icons/prev.png") center center no-repeat;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
text-indent: -999px;
|
||||
}
|
||||
.glyphicon-arrow-left:before {
|
||||
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
Icinga Logo
|
||||
========================================================================= */
|
||||
|
||||
.icinga-logo {
|
||||
background: transparent url("@{baseurl}/img/logo_icinga-inv.png") center center no-repeat;
|
||||
width: 94px;
|
||||
height: 33px;
|
||||
display: block;
|
||||
text-indent: -999px;
|
||||
margin: 8px 0 0 8px;
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
Links
|
||||
========================================================================= */
|
||||
|
||||
a {
|
||||
color: @petrol;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a.button {
|
||||
height: 30px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
a.btn-small {
|
||||
height: 25px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `outline` inconsistency between Chrome and other browsers.
|
||||
*/
|
||||
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability when focused and also mouse hovered in all browsers.
|
||||
*/
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
color: @petrol;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Typography
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address variable `h1` font-size and margin within `section` and `article`
|
||||
* contexts in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
color: @black;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: @black;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
Tables
|
||||
========================================================================== */
|
||||
|
||||
|
||||
table, th, td {
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
padding: 8px 8px 10px 8px;
|
||||
border-bottom: 2px solid @lightgrey;
|
||||
}
|
||||
|
||||
.table-detail th {
|
||||
font-size: 16px;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.table-detail thead > tr > th, .table tbody > tr > th,
|
||||
.table-detail tbody > tr > td, .table tfoot > tr > td {
|
||||
border-top: 0 !important;
|
||||
}
|
||||
|
||||
.table-detail > thead {
|
||||
border-top: 0 !important;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 8px 10px 8px 8px !important;
|
||||
border-bottom: 1px dotted @lightgrey !important;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
|
||||
.badge-container {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.badge {
|
||||
background-color: @white;
|
||||
border-radius: 2px;
|
||||
color: @orange;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
min-width: 10px;
|
||||
padding-bottom: 3px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
padding-top: 3px;
|
||||
text-align: center;
|
||||
vertical-align: baseline;
|
||||
white-space: nowrap;
|
||||
border: 1px solid @orange;
|
||||
}
|
||||
|
||||
.badge a,
|
||||
.badge a:active,
|
||||
.badge a:hover,
|
||||
.badge:hover {
|
||||
color: @orange !important;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Forms
|
||||
========================================================================== */
|
||||
|
||||
.form-inline .form-group {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.input-sm {
|
||||
border-radius: 3px;
|
||||
font-size: 16px;
|
||||
padding: 5px;
|
||||
}
|
||||
.form-control {
|
||||
background-color: @white;
|
||||
border: 1px solid @lightgrey;
|
||||
border-radius: 4px;
|
||||
padding: 5px;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
|
||||
color: @darkgrey;
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
select.input-sm {
|
||||
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Buttons
|
||||
========================================================================== */
|
||||
|
||||
.button {
|
||||
text-align: center;
|
||||
padding: 3px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.btn-common {
|
||||
border-color: @lightgrey;
|
||||
color: @black;
|
||||
background: rgb(255,255,255); /* Old browsers */
|
||||
background: -moz-linear-gradient(top, rgb(255,255,255) 1%, rgb(245,245,245) 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgb(255,255,255)), color-stop(100%,rgb(245,245,245))); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* IE10+ */
|
||||
background: linear-gradient(to bottom, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* W3C */
|
||||
}
|
||||
|
||||
.panel-row > a:hover,
|
||||
.btn-common:hover {
|
||||
border-color: @black !important;
|
||||
color: @black !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-cta {
|
||||
border-color: @petrol;
|
||||
color: @petrol;
|
||||
background: rgb(255,255,255); /* Old browsers */
|
||||
background: -moz-linear-gradient(top, rgb(255,255,255) 1%, rgb(245,245,245) 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgb(255,255,255)), color-stop(100%,rgb(245,245,245))); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* IE10+ */
|
||||
background: linear-gradient(to bottom, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* W3C */
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn-wide {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.btn-half-left {
|
||||
float: left;
|
||||
width: 48%;
|
||||
}
|
||||
.btn-half-right {
|
||||
float: right;
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Details Panel
|
||||
========================================================================== */
|
||||
|
||||
.panel-heading {
|
||||
border-bottom: 0;
|
||||
margin-bottom: 0px !important;
|
||||
padding-left: 5px;
|
||||
padding-bottom: 3px;
|
||||
padding-top: 5px;
|
||||
overflow: hidden;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.panel-hostname {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.separator {
|
||||
border-top: 2px solid @lightgrey;
|
||||
border-bottom: 0;
|
||||
margin: 0;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.panel-header-status {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.panel-row {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px dotted @lightgrey;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.panel-label {
|
||||
float: left;
|
||||
padding-right: 10px;
|
||||
width: 30%;
|
||||
clear: left;
|
||||
|
||||
}
|
||||
.panel-content {
|
||||
float: left;
|
||||
padding-right: 10px;
|
||||
display: inline-block;
|
||||
max-width: 40%;
|
||||
}
|
||||
|
||||
.panel-button {
|
||||
float: right;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
}
|
||||
|
||||
.dashboard-component {
|
||||
border: 1px solid @lightgrey;
|
||||
float:left;
|
||||
width:45%;
|
||||
padding:1%;
|
||||
margin:1%;
|
||||
}
|
||||
|
||||
.dashboard-component.row {
|
||||
width:98%;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
|
@ -1,9 +1,22 @@
|
|||
#menu-header {
|
||||
height: 3.6em;
|
||||
line-height: 3.6em;
|
||||
|
||||
background: -moz-linear-gradient(top, #777, #666);
|
||||
background: -webkit-linear-gradient(top, #777, #666);
|
||||
background: -o-linear-gradient(top, #777, #666);
|
||||
background: -ms-linear-gradient(top, #777, #666);
|
||||
background: linear-gradient(top, #777, #666);
|
||||
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
#menu {
|
||||
background: #999;
|
||||
/* margin-top: 3.6em;*/
|
||||
}
|
||||
|
||||
#menu a {
|
||||
color: #121212;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
#menu .separator {
|
||||
|
|
@ -19,6 +32,20 @@
|
|||
border-bottom: 2em solid #888;
|
||||
}
|
||||
|
||||
|
||||
#menu > ul > li > ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#menu > ul > li.active > ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
#menu > ul > li > ul {
|
||||
display: none;
|
||||
}
|
||||
*/
|
||||
#menu > ul > li.active {
|
||||
background-color: white;
|
||||
padding-left: 0.5em;
|
||||
|
|
@ -26,12 +53,25 @@
|
|||
margin-right: 0;
|
||||
}
|
||||
|
||||
#menu > ul > li > a {
|
||||
text-shadow: #555 -1px 1px 0px;
|
||||
}
|
||||
|
||||
#menu > ul > li.active > a {
|
||||
color: #121212;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
#menu > ul > li.active li.active a {
|
||||
color: #121212;
|
||||
}
|
||||
|
||||
#menu > ul > li.active li a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#menu > ul > li {
|
||||
border-bottom: 0.12em solid #888;
|
||||
border-bottom: 1px solid #888;
|
||||
}
|
||||
|
||||
#menu > ul > li li {
|
||||
|
|
@ -74,3 +114,13 @@
|
|||
line-height: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
#menu > ul > li {
|
||||
margin: 0 0 0 0.5em;
|
||||
}
|
||||
|
||||
#menu > ul > li.active {
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,302 @@
|
|||
|
||||
/* Special tables and states */
|
||||
|
||||
table.colors {
|
||||
font-size: 0.8em;
|
||||
width: 98%;
|
||||
margin: 0 1%;
|
||||
}
|
||||
|
||||
table.colors td {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
width: 10%;
|
||||
height: 1.6em;
|
||||
font-weight: normal;
|
||||
border: 0.079em solid white;
|
||||
}
|
||||
|
||||
/* Action table */
|
||||
table.action {
|
||||
border-collapse: separate;
|
||||
width: 98%;
|
||||
table-layout: fixed;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
table.action tr {
|
||||
/*border-bottom: 0.079em solid transparent;*/
|
||||
}
|
||||
|
||||
table.action th {
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
table.action.wide td {
|
||||
line-height: 2.5em;
|
||||
}
|
||||
|
||||
table.action td {
|
||||
line-height: 1.5em;
|
||||
padding: 0 0.5em 0 0.5em;
|
||||
font-size: 0.8em;
|
||||
border-bottom: 1px solid #dde;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
table.action td a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.action td a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
/* END of Action table */
|
||||
|
||||
|
||||
/* Table behaviour */
|
||||
|
||||
tr[href] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* End of table behaviour */
|
||||
|
||||
|
||||
table.action td.state {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
table.action td.timesince {
|
||||
width: 3.5em;
|
||||
}
|
||||
|
||||
|
||||
/* State row behaviour */
|
||||
|
||||
tr.state img.icon {
|
||||
/* TODO: 1em? */
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
tr.state a {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tr.state a.active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
tr.state.new td.state {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tr.state td.state {
|
||||
width: 7em;
|
||||
padding-left: 2em; /* 1.5 border + 0.5padding */
|
||||
color: white;
|
||||
border-radius: 0.5em 0 0 0.5em;
|
||||
-moz-border-radius: 0.5em 0 0 0.5em;
|
||||
}
|
||||
|
||||
tr.state.handled td.state, tr.state.ok td.state, tr.state.up td.state {
|
||||
border-left-style: solid;
|
||||
border-left-width: 1.5em;
|
||||
padding-left: 0.5em;
|
||||
color: black;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
tr[href]:hover, tr[href].active {
|
||||
background-color: #eee;
|
||||
color: black;
|
||||
}
|
||||
|
||||
tr.state.ok td.state, tr.state.up td.state {
|
||||
border-left-color: @colorOk;
|
||||
}
|
||||
|
||||
tr.state.warning td.state {
|
||||
background-color: @colorWarning;
|
||||
}
|
||||
|
||||
tr.state.warning.handled td.state {
|
||||
border-left-color: @colorWarningHandled;
|
||||
}
|
||||
|
||||
tr.state.critical td.state, tr.state.down td.state {
|
||||
background-color: @colorCritical;
|
||||
}
|
||||
|
||||
tr.state.critical.handled td.state, tr.state.down.handled td.state {
|
||||
border-left-color: @colorCriticalHandled;
|
||||
}
|
||||
|
||||
tr.state.unknown td.state {
|
||||
background-color: @colorUnknown;
|
||||
}
|
||||
|
||||
tr.state.unknown.handled td.state {
|
||||
border-left-color: @colorUnknownHandled;
|
||||
}
|
||||
|
||||
tr.state.pending td.state {
|
||||
border-left-color: @colorPending;
|
||||
}
|
||||
|
||||
tr.state.invalid td.state {
|
||||
background-color: @colorInvalid;
|
||||
}
|
||||
|
||||
tr.state.handled td.state {
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* END of special tables and states */
|
||||
|
||||
|
||||
/* Generic colors */
|
||||
|
||||
a.critical {
|
||||
color: @colorCritical;
|
||||
}
|
||||
|
||||
/* END of Generic colors */
|
||||
|
||||
|
||||
|
||||
|
||||
/* Been here before: */
|
||||
/*
|
||||
|
||||
.state .ok, td.state.ok {
|
||||
background-color: #44BB77;
|
||||
color: white;
|
||||
}
|
||||
.state .ok:hover, td.state.ok:hover {
|
||||
color: #44BB77;
|
||||
background-color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
.state .warning, td.state.warning {
|
||||
color: white;
|
||||
background-color: #FF8844;
|
||||
}
|
||||
.state .warning:hover, td.state.warning:hover {
|
||||
color: #FF8844;
|
||||
background-color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
.state .warning.handled, td.state.warning.handled {
|
||||
color: white;
|
||||
background-color: #FFBB55;
|
||||
}
|
||||
.state .warning.handled:hover, td.state.warning.handled:hover {
|
||||
color: #FF8855;
|
||||
background-color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
.state .critical, td.state.critical {
|
||||
color: white;
|
||||
background-color: #FF5566;
|
||||
}
|
||||
.state .critical.handled, td.state.critical.handled {
|
||||
background-color: #FF99aa;
|
||||
}
|
||||
.state .unknown, td.state.unknown {
|
||||
color: white;
|
||||
background-color: #DD66FF;
|
||||
}
|
||||
.state .unknown.handled, td.state.unknown.handled {
|
||||
background-color: #EE99FF;
|
||||
}
|
||||
|
||||
.state .pending, td.state.pending {
|
||||
color: white;
|
||||
background-color: #77AAFF;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
/* Generic span.state */
|
||||
span.state {
|
||||
color: white;
|
||||
border-radius: 0.5em;
|
||||
-moz-border-radius: 0.5em;
|
||||
padding: 0.3em 0.5em 0.3em 0.5em;
|
||||
margin: 0.2em 0.5em 0.2em 0.5em;
|
||||
}
|
||||
|
||||
|
||||
span.state.ok, span.state.up {
|
||||
background-color: @colorOk;
|
||||
}
|
||||
|
||||
span.state.warning {
|
||||
background-color: @colorWarning;
|
||||
}
|
||||
|
||||
span.state.warning.handled {
|
||||
background-color: @colorWarningHandled;
|
||||
}
|
||||
|
||||
span.state.critical, span.state.down {
|
||||
background-color: @colorCritical;
|
||||
}
|
||||
|
||||
span.state.critical.handled, span.state.down.handled {
|
||||
background-color: @colorCriticalHandled;
|
||||
}
|
||||
|
||||
span.state.unknown, span.state.unreachable {
|
||||
background-color: @colorUnknown;
|
||||
}
|
||||
|
||||
span.state.unknown.handled, span.state.unreachable.handled {
|
||||
background-color: @colorUnknownHandled;
|
||||
}
|
||||
|
||||
span.state.invalid {
|
||||
background-color: @colorInvalid;
|
||||
}
|
||||
|
||||
table.action td.summary {
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
span.state {
|
||||
}
|
||||
|
||||
.summary span.state {
|
||||
width: 10em;
|
||||
text-align: center;
|
||||
float: left;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.summary span.state span.state {
|
||||
width: 8em;
|
||||
}
|
||||
|
||||
span.state a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
span.state.handled {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
span.state a.active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* End of generic span.state */
|
||||
|
||||
|
|
@ -1,206 +0,0 @@
|
|||
// {{{ICINGA_LICENSE_HEADER}}}
|
||||
/**
|
||||
* This file is part of Icinga Web 2.
|
||||
*
|
||||
* Icinga Web 2 - Head for multiple monitoring backends.
|
||||
* Copyright (C) 2013 Icinga Development Team
|
||||
*
|
||||
* This program is free software; you can redistribute it and/or
|
||||
* modify it under the terms of the GNU General Public License
|
||||
* as published by the Free Software Foundation; either version 2
|
||||
* of the License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program; if not, write to the Free Software
|
||||
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
|
||||
*
|
||||
* @copyright 2013 Icinga Development Team <info@icinga.org>
|
||||
* @license http://www.gnu.org/licenses/gpl-2.0.txt GPL, version 2
|
||||
* @author Icinga Development Team <info@icinga.org>
|
||||
*
|
||||
*/
|
||||
// {{{ICINGA_LICENSE_HEADER}}}
|
||||
|
||||
@white: #ffffff;
|
||||
@lightgrey : #dddddd;
|
||||
|
||||
/* =========================================================================
|
||||
Icinga Navigation
|
||||
========================================================================= */
|
||||
.navbar {
|
||||
background-image: linear-gradient(to bottom, #444444, #333333);
|
||||
}
|
||||
|
||||
.navigation-tile-mixin {
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
padding: 3px 5px 3px 5px;
|
||||
border-radius: 3px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.nav-stacked > li + li {
|
||||
margin-left: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.nav-stacked {
|
||||
}
|
||||
|
||||
.icinga-subnavigation {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav-stacked > li {
|
||||
padding-left: 4px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid @lightgrey;
|
||||
border-right: 1px solid @lightgrey;
|
||||
font-size: 11px;
|
||||
background-color: rgb(248, 248, 248);
|
||||
background-image: linear-gradient(rgb(255, 255, 255) 0px, rgb(248, 248, 248) 100%);
|
||||
}
|
||||
|
||||
.nav-stacked > li > a {
|
||||
letter-spacing: 1px;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
.nav-stacked > li:first-child {
|
||||
}
|
||||
|
||||
.submenu {
|
||||
background-image: none;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.submenu > a {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.active > a{
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.icinga-subnavigation > li {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid @lightgrey;
|
||||
border-right: 1px solid @lightgrey;
|
||||
}
|
||||
|
||||
ul.icinga-subnavigation {
|
||||
border-bottom: 1px solid @lightgrey;
|
||||
margin-left: 0;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.icinga-subnavigation > li:last-child {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.nav-stacked > li > a,
|
||||
.icinga-subnavigation > li > a {
|
||||
padding-left: 20px;
|
||||
padding-right: 3px;
|
||||
/* border-left: 6px solid @petrol; */
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.nav-stacked > li > a.nav-notification,
|
||||
.icinga-subnavigation > li > a.nav-notification {
|
||||
border-left: 6px solid red !important;
|
||||
}
|
||||
|
||||
.nav-stacked > li > a:hover,
|
||||
.icinga-subnavigation > li > a:focus {
|
||||
/* font-weight: bold;*/
|
||||
background-color: transparent; !important;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.nav-stacked > li:hover,
|
||||
.nav-stacked > li:focus,
|
||||
.icinga-subnavigation > li:hover,
|
||||
.icinga-subnavigation > li:focus {
|
||||
background-color: @white;
|
||||
}
|
||||
|
||||
.nav-stacked > li.active,
|
||||
.icinga-subnavigation > li.active {
|
||||
background: none;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.badge-container-nav {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
padding-top: 0;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.badge-nav {
|
||||
background-color: @white;
|
||||
border-radius: 2px;
|
||||
color: @orange;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
min-width: 10px;
|
||||
padding-bottom: 3px;
|
||||
padding-left: 7px;
|
||||
padding-right: 7px;
|
||||
padding-top: 3px;
|
||||
text-align: center;
|
||||
vertical-align: baseline;
|
||||
white-space: nowrap;
|
||||
border: 1px solid @orange;
|
||||
}
|
||||
|
||||
.badge-container-subnav {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
padding-top: 0;
|
||||
padding-bottom;
|
||||
margin-left: 2px;
|
||||
margin-top: -8px;
|
||||
}
|
||||
.badge-subnav {
|
||||
background-color: @white;
|
||||
border-radius: 2px;
|
||||
color: @orange;
|
||||
display: inline-block;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
min-width: 10px;
|
||||
padding-bottom: 2px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
padding-top: 2px;
|
||||
text-align: center;
|
||||
vertical-align: baseline;
|
||||
white-space: nowrap;
|
||||
border: 1px solid @orange;
|
||||
}
|
||||
|
||||
.icinga-navbar-search-container {
|
||||
border-left: 1px solid #ddd;
|
||||
padding-left: 15px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.nav > .subclass {
|
||||
text-decoration: underline;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
ul.pagination {
|
||||
font-size: 0.68em;
|
||||
padding: 0;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#layout.twocols u.pagination {
|
||||
font-size: 0.5em;
|
||||
}
|
||||
|
||||
.pagination > li {
|
||||
list-style-type: none;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.pagination > li > a, .pagination > li.disabled > span {
|
||||
display: block;
|
||||
padding: 0em 1em 0em 1em;
|
||||
line-height: 2em;
|
||||
border: 1px solid #ddd;
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
.pagination > li > a {
|
||||
color: #39a;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.pagination li.disabled span {
|
||||
cursor: no-drop;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.pagination > li:last-child > a, .pagination > li:last-child > span {
|
||||
border-radius: 0 0.5em 0.5em 0;
|
||||
border-right-width: 1px;
|
||||
}
|
||||
|
||||
.pagination > li:first-child > a, .pagination > li:first-child > span {
|
||||
border-radius: 0.5em 0 0 0.5em;
|
||||
}
|
||||
|
||||
.pagination > li > a:hover {
|
||||
color: #000;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.pagination > li.active > a {
|
||||
background-color: #39a;
|
||||
border-color: #39a;
|
||||
color: #fff;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
|
||||
ul.tabs {
|
||||
margin: 0;
|
||||
padding: 1em 0 0 0;
|
||||
|
||||
background: -moz-linear-gradient(top, #777, #666);
|
||||
background: -webkit-linear-gradient(top, #777, #666);
|
||||
background: -o-linear-gradient(top, #777, #666);
|
||||
background: -ms-linear-gradient(top, #777, #666);
|
||||
background: linear-gradient(top, #777, #666);
|
||||
|
||||
list-style-type: inside;
|
||||
}
|
||||
|
||||
.impact ul.tabs {
|
||||
border-bottom-color: white;
|
||||
}
|
||||
|
||||
ul.tabs li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
ul.tabs li a {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
padding: 0 1em;
|
||||
line-height: 2.6em;
|
||||
white-space: nowrap;
|
||||
color: #ddd;
|
||||
outline: 0;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
ul.tabs li.active a, ul.tabs li.dropdown:hover {
|
||||
background-color: white;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.impact ul.tabs li.active a, .impact ul.tabs li.dropdown:hover {
|
||||
background: white;
|
||||
}
|
||||
|
||||
ul.tabs li a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
ul.dropdown-menu {
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
z-index: 1000;
|
||||
border: 1px solid #555;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
ul.dropdown-menu li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ul.tabs ul.dropdown-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul.tabs ul.dropdown-menu li a {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
ul.tabs li.dropdown {
|
||||
|
||||
/* text-align: right; */
|
||||
}
|
||||
|
||||
ul.tabs li.dropdown:hover a {
|
||||
text-decoration: none;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
ul.tabs li.dropdown:hover ul.dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
#icingatopbar {
|
||||
background-color: #555;
|
||||
color: #d0d0d0;
|
||||
}
|
||||
|
||||
#icingatopbar .nav a {
|
||||
color: #d0d0d0;
|
||||
}
|
||||
Loading…
Reference in New Issue