622 lines
10 KiB
Plaintext
622 lines
10 KiB
Plaintext
/*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */
|
|
|
|
input:not([type]),
|
|
input[type=text],
|
|
input[type=date],
|
|
input[type=datetime-local],
|
|
input[type=email],
|
|
input[type=number],
|
|
input[type=password],
|
|
input[type=search],
|
|
input[type=tel],
|
|
input[type=time],
|
|
input[type=url] {
|
|
.box-shadow(0 1px 0 0 @gray-light);
|
|
.transition(border 0.3s ease);
|
|
|
|
border: none;
|
|
border-bottom: 1px solid @gray-light;
|
|
outline: none;
|
|
padding: @vertical-padding / 2 @horizontal-padding / 2;
|
|
|
|
&:focus:not([readonly]) {
|
|
border-color: @icinga-blue;
|
|
}
|
|
|
|
width: 20em;
|
|
}
|
|
|
|
select, textarea {
|
|
width: 20em;
|
|
}
|
|
|
|
.control-button,
|
|
input[type="submit"] {
|
|
.button();
|
|
}
|
|
|
|
input:-moz-placeholder { // FF 18-
|
|
color: inherit;
|
|
opacity: 1;
|
|
}
|
|
|
|
input::-moz-placeholder { // FF 19+
|
|
color: inherit;
|
|
opacity: 1;
|
|
}
|
|
|
|
input:-ms-input-placeholder {
|
|
color: inherit;
|
|
}
|
|
|
|
input::-webkit-input-placeholder {
|
|
color: inherit;
|
|
}
|
|
|
|
input[placeholder] {
|
|
color: inherit;
|
|
}
|
|
|
|
input.search {
|
|
background: transparent url("../img/icons/search.png") no-repeat scroll 0.1em center;
|
|
background-size: 1em 1em;
|
|
padding-left: 1.5em;
|
|
|
|
&:focus {
|
|
background-color: @body-bg-color;
|
|
background-image: url('../img/icons/search_icinga_blue.png') !important;
|
|
}
|
|
}
|
|
|
|
// TODO(el): .form-inline control-group { display: inline-block; }
|
|
form.inline {
|
|
.control-group {
|
|
padding: 0;
|
|
}
|
|
.form-controls {
|
|
margin: 0;
|
|
}
|
|
display: inline-block;
|
|
}
|
|
|
|
.form-controls {
|
|
margin-left: 10em;
|
|
}
|
|
|
|
.autosubmit-info {
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
button:hover .icon-cancel {
|
|
color: @color-critical;
|
|
}
|
|
|
|
.control-info {
|
|
color: @text-color-light;
|
|
margin-left: 0.2em;
|
|
|
|
&:hover {
|
|
.opacity(0.6);
|
|
}
|
|
}
|
|
|
|
.control-label {
|
|
display: inline-block;
|
|
}
|
|
|
|
label {
|
|
color: @text-color-light;
|
|
font-size: @font-size-small;
|
|
}
|
|
|
|
.control-label-group {
|
|
display: inline-block;
|
|
padding-right: @horizontal-padding;
|
|
text-align: right;
|
|
width: 10em;
|
|
}
|
|
|
|
.control-group {
|
|
padding: @vertical-padding @horizontal-padding;
|
|
|
|
.errors {
|
|
color: @color-critical;
|
|
}
|
|
}
|
|
|
|
.link-button {
|
|
.action-link();
|
|
// Reset defaults
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
|
|
text-align: left;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
// @TODO(el): Fix that
|
|
.form-description, .form-description ul,
|
|
.form-info, .form-info ul,
|
|
.form-notifications, .form-notifications ul,
|
|
.form-errors, .form-errors ul,
|
|
form .errors, form .errors ul {
|
|
// Reset defaults
|
|
margin: 5 0;
|
|
padding: 0;
|
|
list-style-type: none;
|
|
}
|
|
|
|
.form-errors {
|
|
background-color: @color-critical;
|
|
color: @text-color-inverted;
|
|
}
|
|
|
|
.form-info {
|
|
color: @text-color-light;
|
|
font-size: @font-size-small;
|
|
}
|
|
|
|
.form-notifications {
|
|
.notification-error {
|
|
background-color: @color-critical;
|
|
color: @text-color-inverted;
|
|
li {
|
|
padding: @vertical-padding @horizontal-padding;
|
|
}
|
|
}
|
|
.notification-info {
|
|
background-color: @color-pending;
|
|
color: @text-color-inverted;
|
|
li {
|
|
padding: @vertical-padding @horizontal-padding;
|
|
}
|
|
}
|
|
.notification-warning {
|
|
background-color: @color-warning;
|
|
color: @text-color-inverted;
|
|
li {
|
|
padding: @vertical-padding @horizontal-padding;
|
|
}
|
|
}
|
|
}
|
|
|
|
button.animated.active {
|
|
&.move-up i:before {
|
|
.animate(move-vertical 500ms infinite linear);
|
|
}
|
|
|
|
&.move-down i:before {
|
|
.animate(move-vertical 500ms infinite linear reverse);
|
|
}
|
|
}
|
|
|
|
textarea {
|
|
height: 4em;
|
|
}
|
|
|
|
select.grant-permissions {
|
|
height: 20em;
|
|
width: auto;
|
|
}
|
|
|
|
//div.config-form-buttons {
|
|
// margin-top: 5px;
|
|
//}
|
|
//
|
|
//table.configTable {
|
|
// border-spacing: 15px;
|
|
// border-collapse: separate;
|
|
//}
|
|
//
|
|
//td.configTable {
|
|
// border: solid;
|
|
// border-width: thin;
|
|
// padding: 10px;
|
|
// min-width: 300px;
|
|
//}
|
|
//
|
|
//.form-element {
|
|
// margin-bottom: 1em;
|
|
//}
|
|
//
|
|
//label {
|
|
// display: block;
|
|
// font-weight: bold;
|
|
//}
|
|
//
|
|
//input, select, textarea {
|
|
// box-sizing: border-box;
|
|
// -moz-box-sizing: border-box;
|
|
// -webkit-box-sizing: border-box;
|
|
// border: 1px solid #ddd;
|
|
// font-size: 0.9em;
|
|
// padding: 0.2em;
|
|
// background: #fff;
|
|
// font-family: Calibri, Helvetica, sans-serif;
|
|
//}
|
|
//
|
|
//input[type=checkbox] {
|
|
// margin-top: 0.3em;
|
|
// margin-bottom: 0.1em;
|
|
//}
|
|
//
|
|
//input:focus, select:focus {
|
|
// border-color: #333;
|
|
//}
|
|
//
|
|
//input[type=submit] {
|
|
// font-weight: bold;
|
|
// text-align: center;
|
|
// color: #fff;
|
|
// border: 1px solid;
|
|
// border-color: @colorPetrol;
|
|
// background: @colorPetrol;
|
|
// outline: 0;
|
|
//
|
|
// &[disabled] {
|
|
// background-color: #666;
|
|
// border-color: black;
|
|
// }
|
|
//
|
|
// &:hover[disabled], &:active[disabled], &:focus[disabled] {
|
|
// background-color: #666;
|
|
// }
|
|
//}
|
|
//
|
|
//input[type=submit]:hover, a.button:hover, input[type=submit]:focus {
|
|
// background-color: #333;
|
|
// border-color: #333;
|
|
//}
|
|
//
|
|
//input[type=submit]:hover, a.button:hover {
|
|
// cursor: pointer;
|
|
// color: white;
|
|
//}
|
|
//
|
|
//input:focus, select:focus {
|
|
// background: white;
|
|
// outline: 0;
|
|
//}
|
|
//
|
|
//input::-moz-placeholder {
|
|
// color: #333;
|
|
//}
|
|
//
|
|
//input::-webkit-input-placeholder {
|
|
// color: #333;
|
|
//}
|
|
//
|
|
//input:-ms-input-placeholder {
|
|
// color: #333;
|
|
//}
|
|
//
|
|
//input::-moz-focus-inner {
|
|
// border: 0;
|
|
// outline: 0;
|
|
//}
|
|
//
|
|
//button::-moz-focus-inner {
|
|
// border: 0;
|
|
// outline: 0;
|
|
//}
|
|
//
|
|
//select::-moz-focus-inner {
|
|
// border: 0;
|
|
// outline: 0;
|
|
//}
|
|
//
|
|
//form.inline {
|
|
// margin: 0;
|
|
// padding: 0;
|
|
// display: inline;
|
|
//}
|
|
//
|
|
//div.spinner {
|
|
// display: inline-block;
|
|
// margin-top: 0.2em;
|
|
// margin-left: 0.25em;
|
|
//
|
|
// i {
|
|
// visibility: hidden;
|
|
//
|
|
// &.active {
|
|
// visibility: visible;
|
|
//
|
|
// &:before {
|
|
// .animate(spin 2s infinite linear);
|
|
// }
|
|
// }
|
|
//
|
|
// &:before {
|
|
// margin: 0; // Disables wobbling
|
|
// }
|
|
// }
|
|
//}
|
|
//
|
|
//button.animated.active {
|
|
// &.move-up i:before {
|
|
// .animate(move-vertical 500ms infinite linear);
|
|
// }
|
|
//
|
|
// &.move-down i:before {
|
|
// .animate(move-vertical 500ms infinite linear reverse);
|
|
// }
|
|
//}
|
|
//
|
|
//button, .button-like {
|
|
// font-size: 0.9em;
|
|
// font-weight: bold;
|
|
// outline: 0;
|
|
// color: #fff;
|
|
// padding: 0.2em;
|
|
// border: 1px solid;
|
|
// border-color: @colorPetrol;
|
|
// background: @colorPetrol;
|
|
//
|
|
// &[disabled] {
|
|
// background-color: #666;
|
|
// border-color: black;
|
|
// }
|
|
//
|
|
// &:hover, &:focus, &:active {
|
|
// background-color: #333;
|
|
// border-color: #333;
|
|
// cursor: pointer;
|
|
//
|
|
// &[disabled] {
|
|
// background-color: #666;
|
|
// }
|
|
// }
|
|
//}
|
|
//
|
|
//.button-like {
|
|
// display: inline-block;
|
|
//}
|
|
//
|
|
//a.button-like {
|
|
// cursor: default;
|
|
// text-decoration: none;
|
|
//}
|
|
//
|
|
//form.link-like input[type="submit"], form.link-like button[type="submit"], input.link-like, button.link-like {
|
|
// color: @colorLinkDefault;
|
|
// font-weight: normal;
|
|
// border: none;
|
|
// background: none;
|
|
// padding: 0;
|
|
// font-size: 1em;
|
|
// cursor: pointer;
|
|
//
|
|
// &.icon-only {
|
|
// color: inherit;
|
|
// font-size: 1.5em;
|
|
//
|
|
// &:hover, &:focus, &:active {
|
|
// color: #666;
|
|
// }
|
|
// }
|
|
//}
|
|
//
|
|
//form.link-like input[type="submit"]:hover,
|
|
//form.link-like input[type="submit"]:focus,
|
|
//form.link-like input[type="submit"]:active,
|
|
//form.link-like button[type="submit"]:hover,
|
|
//form.link-like button[type="submit"]:focus,
|
|
//form.link-like button[type="submit"]:active,
|
|
//input.link-like:hover,
|
|
//input.link-like:focus,
|
|
//input.link-like:active,
|
|
//button.link-like:hover,
|
|
//button.link-like:focus,
|
|
//button.link-like:active {
|
|
// text-decoration: underline;
|
|
// background: none;
|
|
// color: @colorLinkDefault;
|
|
//}
|
|
//
|
|
//.non-list-like-list {
|
|
// list-style-type: none;
|
|
// margin: 0;
|
|
// padding: 0.5em 0.5em 0;
|
|
//
|
|
// li {
|
|
// padding-bottom: 0.5em;
|
|
// }
|
|
//}
|
|
//
|
|
//form div.element ul.errors {
|
|
// .non-list-like-list;
|
|
// margin: 0.3em 0 0 0.6em;
|
|
//
|
|
// li {
|
|
// color: @colorCritical;
|
|
// font-weight: bold;
|
|
// }
|
|
//}
|
|
//
|
|
//form ul.form-errors {
|
|
// .non-list-like-list;
|
|
// margin-bottom: 1em;
|
|
// background-color: @colorCritical;
|
|
//
|
|
// ul.errors {
|
|
// .non-list-like-list;
|
|
// padding: 0;
|
|
//
|
|
// li:last-child {
|
|
// padding-bottom: 0;
|
|
// }
|
|
// }
|
|
//
|
|
// li {
|
|
// color: white;
|
|
// font-weight: bold;
|
|
// }
|
|
//}
|
|
//
|
|
//form ul.form-notifications {
|
|
// .non-list-like-list;
|
|
// margin-bottom: 1em;
|
|
// padding: 0;
|
|
//
|
|
// ul {
|
|
// .non-list-like-list;
|
|
//
|
|
// &.info {
|
|
// background-color: @colorFormNotificationInfo;
|
|
// }
|
|
//
|
|
// &.warning {
|
|
// background-color: @colorFormNotificationWarning;
|
|
// }
|
|
//
|
|
// &.error {
|
|
// background-color: @colorFormNotificationError;
|
|
// }
|
|
// }
|
|
//
|
|
// li {
|
|
// color: white;
|
|
// font-weight: bold;
|
|
// }
|
|
//}
|
|
//
|
|
//form div.element {
|
|
// margin-top: 0.5em;
|
|
// margin-bottom: 0.5em;
|
|
//}
|
|
//
|
|
//form label {
|
|
// display: inline-block;
|
|
// vertical-align: top;
|
|
// margin-top: 0.25em;
|
|
// margin-right: 1em;
|
|
// font-size: 0.9em;
|
|
// width: 10em;
|
|
//}
|
|
//
|
|
//form div.element i.help:before {
|
|
// margin-top: 0.25em;
|
|
//}
|
|
//
|
|
//label ~ * {
|
|
// vertical-align: top;
|
|
//}
|
|
//
|
|
//form dt {
|
|
// vertical-align: top;
|
|
//}
|
|
//
|
|
//select, input[type=text], textarea {
|
|
// width: 20em;
|
|
// display: inline-block;
|
|
//}
|
|
//
|
|
//textarea {
|
|
// height: 4em;
|
|
//}
|
|
//
|
|
//textarea.resource {
|
|
// &.ssh-identity {
|
|
// width: 50%;
|
|
// height: 25em;
|
|
// }
|
|
//}
|
|
//
|
|
//form .description {
|
|
// font-size: 0.8em;
|
|
// margin: 0.3em 0 0 0.6em;
|
|
//}
|
|
//
|
|
//.description {
|
|
// display: block;
|
|
//}
|
|
//
|
|
//select.grant-permissions {
|
|
// height: 20em;
|
|
// width: auto;
|
|
//}
|
|
//
|
|
//label ~ input, label ~ select, label ~ textarea {
|
|
// margin-left: 1.3em;
|
|
//}
|
|
//
|
|
//label + i ~ input, label + i ~ select, label + i ~ textarea {
|
|
// margin-left: 0;
|
|
//}
|
|
//
|
|
//button.noscript-apply {
|
|
// margin-left: 0.5em;
|
|
//}
|
|
//
|
|
//i.autosubmit-warning {
|
|
// display: inline-block;
|
|
// margin-left: 0.2em;
|
|
// margin-top: 0.25em;
|
|
//
|
|
// &:before {
|
|
// margin: 0; // Disables wobbling
|
|
// }
|
|
//
|
|
// &.spinning:before {
|
|
// content: '\e874'; // icon-spin6
|
|
// .animate(spin 2s infinite linear);
|
|
// }
|
|
//}
|
|
//
|
|
//input[type=checkbox] + i.autosubmit-warning {
|
|
// margin-top: 0.15em;
|
|
//}
|
|
//
|
|
//html.no-js i.autosubmit-warning {
|
|
// .sr-only;
|
|
//}
|
|
//
|
|
//form ul.descriptions {
|
|
// .info-box;
|
|
// padding: 0.5em 0.5em 0 1.8em;
|
|
//
|
|
// li {
|
|
// padding-bottom: 0.5em;
|
|
//
|
|
// &:only-child {
|
|
// margin-left: -1.3em;
|
|
// list-style-type: none;
|
|
// }
|
|
// }
|
|
//}
|
|
//
|
|
//form ul.hints {
|
|
// .non-list-like-list;
|
|
// padding: 0.5em 0.5em 0 0.5em;
|
|
//
|
|
// li {
|
|
// font-size: 0.8em;
|
|
// padding-bottom: 0.5em;
|
|
// }
|
|
//}
|
|
//
|
|
//.control-group {
|
|
// & > * {
|
|
// float: left;
|
|
// margin-right: 0.5em;
|
|
// }
|
|
//
|
|
// div.element {
|
|
// margin-top: 0;
|
|
// margin-bottom: 0;
|
|
// }
|
|
//
|
|
// &:after {
|
|
// content: ".";
|
|
// visibility: hidden;
|
|
// display: block;
|
|
// height: 0;
|
|
// clear: both;
|
|
// }
|
|
//}
|