John Postlethwait 0074328fbb Updating Horizon to use LESS.
This changes all of the Bootstrap CSS and Horizon
CSS to use LESS. Horizon's specific CSS will be
organized into separate files in another commit,
as it is outside the scope of this BP.

We are also now packing LESS 1.3.0 directly within
Horizon.

Implementation of Blueprint transition-to-lesscss

Change-Id: Ie4be8b28ab3ce04ea21d7d5cd49c2ccb66bd8ade
2012-06-07 14:32:43 -07:00

1170 lines
21 KiB
Plaintext

/* new clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
@font-face {
font-family: 'anivers';
src: url('/static/dashboard/fonts/Anivers_Regular-webfont.eot');
src: url('/static/dashboard/fonts/Anivers_Regular-webfont.eot?iefix') format('eot'),
url('/static/dashboard/fonts/Anivers_Regular-webfont.woff') format('woff'),
url('/static/dashboard/fonts/Anivers_Regular-webfont.ttf') format('truetype'),
url('/static/dashboard/fonts/Anivers_Regular-webfont.svg#webfont3JLVF59W') format('svg');
font-weight: normal;
font-style: normal;
}
a {
color: #43a1d6;
}
ul {
list-style: none;
margin: 0;
}
dt {
font-weight: bold;
}
#main_content {
padding-left: 250px;
padding-right: 25px;
}
.topbar {
background: #f2f2f2;
border-bottom: 1px solid #e5e5e5;
padding: 10px 25px;
margin-top: 0;
margin-left: -25px;
margin-bottom: 20px;
margin-right: -25px;
min-width: 700px;
}
.topbar .switcher_bar {
display: inline-block;
height: auto;
width: 160px;
background-position: 140px center;
margin-bottom: 0;
font-size: 11px;
padding: 0;
}
.topbar .switcher_bar a {
padding: 2px 10px 1px;
margin-left: 0;
display: block;
}
.topbar .switcher_bar ul {
width: 130px;
}
#user_info {
color: #888;
margin: auto 0;
}
#user_info > a {
margin-left: 25px;
font-size: 11px !important;
}
.page-header {
margin: 0;
padding: 0;
border: 0;
font-family: anivers;
}
h2 {
color: #6a6a6a;
font-size: 30px;
font-weight: normal;
}
body {
background-color: #fff;
min-width: 890px;
}
/* Login Splash Page */
#splash {
background: #fafafa;
}
#splash .login {
background: #fff url(/static/dashboard/img/logo.png) no-repeat center 35px;
position: absolute;
top: 80px;
left: 50%;
margin: 0 0 0 -195px;
padding-top: 170px;
width: 390px;
border: 1px solid #e1e1e1;
max-height: none;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
#splash .login input {
width: 350px;
}
#splash .login select {
width: 360px;
}
#splash .help-block {
display: none;
}
#create_container_form .modal-footer{
margin-top: 190px;
}
.nav li a {
color: #8EACB7;
text-shadow: none;
}
.container-fluid {
padding-left: 0;
}
.sidebar {
background: #edf9ff;
border-right: 5px solid #e5e5e5;
border-bottom: 5px solid #e5e5e5;
float: left;
}
.sidebar h4 {
margin-left: 14px;
color: #999;
}
.sidebar .nav-tabs {
margin-top: -34px;
}
.sidebar .nav-tabs li.active a {
background-color: #edf9ff;
}
h1.brand {
width: 100%;
margin: 0;
background-color: #f5f5f5;
padding-bottom: 40px;
}
h1.brand a {
background: url(/static/dashboard/img/logo.png) top left no-repeat;
display: block;
float: left;
width: 116px;
height: 123px;
text-indent: -9999px;
margin-left: 56px;
margin-top: 15px;
margin-bottom: 25px;
}
/* Tenant Dropdown */
a.current_item {
width: 163px;
float: left;
}
a.current_item:hover {
text-decoration: none;
}
a.current_item:hover h3, a.current_item:hover h4 {
color: #39738c;
}
.switcher_bar {
background-color: #e9f5fa;
width: 190px;
height: 38px;
padding: 5px 0;
border: 1px solid #c0d9e4;
margin-left: 14px;
margin-bottom: 15px;
background-image: url(/static/dashboard/img/drop_arrow.png);
background-repeat: no-repeat;
background-position: 170px 20px;
}
.switcher_bar:hover {
text-decoration: none;
background-color: #cde8f4;
}
.switcher_bar a:hover {
text-decoration: none;
}
.switcher_bar:focus {
outline: none;
}
.switcher_bar h3 {
color: #4790ae;
font-size: 16px;
margin: -6px 0 0 14px;
padding: 0;
}
.switcher_bar h4 {
color: #6fabc4;
font-size: 10px;
text-transform: uppercase;
font-weight: normal;
padding: 0;
}
.switcher_bar ul {
border: 1px solid #c0d9e4;
margin-left: -1px;
width: 190px;
}
.switcher_bar li a:hover{
background: #92d6f1;
}
#usage {
margin-bottom: 25px;
height: 125px;
}
.usage_block {
background: #e8f8ff;
color: #84b6c5;
border: 1px solid #afe3fb;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
float: left;
width: 29%;
margin-right: 5%;
min-height: 125px;
}
.usage_block.last {
margin-right: 0;
}
.usage_block h3 {
background: #cef0ff;
color: #4fa5bf;
font-weight: normal;
padding: 0 0 0 10px;
border-bottom: 1px solid #c6e7f5;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.usage_block ul {
margin: 10px;
}
.usage_block .quantity { font-size: 25px; }
.usage_block li {
font-size: 11px;
margin: 0 0 15px 0;
}
.usage_block .unit{
font-size: 11px;
text-transform: uppercase;
padding: 0 0 0 1px;
}
.table-bordered {
border: none;
}
.table_header {
min-height: 35px;
padding: 5px 0;
}
.table_caption th {
background-color: transparent;
border: none;
}
.table-bordered tr.table_caption + tr th {
border-top: 1px solid #ddd;
}
.table-bordered tr.table_caption + tr th:first-child,
.table-bordered tr.table_caption + tr th.hide + th {
-moz-border-radius-topleft: 4px;
-webkit-border-top-left-radius: 4px;
border-top-left-radius: 4px;
border-left: 1px solid #ddd;
}
.table-bordered tr.table_caption + tr th:last-child {
-moz-border-radius-topright: 4px;
-webkit-border-top-right-radius: 4px;
border-top-right-radius: 4px;
border-right: 1px solid #ddd;
}
.table-bordered tbody tr td:first-child,
.table-bordered tfoot tr td:first-child {
border-left: 1px solid #ddd;
}
.table-bordered tbody tr td:last-child,
.table-bordered tfoot tr td:last-child {
border-right: 1px solid #ddd;
}
.table-bordered tfoot tr td:first-child {
border-bottom: 1px solid #ddd;
-moz-border-radius-bottomleft: 4px;
-webkit-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.table-bordered tfoot tr td:last-child {
border-bottom: 1px solid #ddd;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.table_title h3, .table_header h3 {
font-family: anivers;
font-weight: normal;
font-size: 24px;
margin-bottom: 5px;
float: left;
}
.table th.header {
cursor: pointer;
}
.table th.header:hover {
background-color: #e8e8e8;
}
.table tbody td.anchor a {
display: block;
padding: 8px;
}
.table tr.table_caption th.header:hover {
background-color: transparent;
cursor: default;
}
.table th.headerSortUp:hover,
.table th.headerSortDown:hover {
background-color: #dfdfdf;
}
.table th.headerSortUp,
.table th.headerSortDown {
background-color: #dfdfdf;
background-repeat: no-repeat;
background-position: 98% center;
}
.table th.headerSortDown {
background-image: url(/static/dashboard/img/drop_arrow.png);
}
.table th.headerSortUp {
background-image: url(/static/dashboard/img/up_arrow.png);
}
th {
background: #f1f1f1;
}
td.anchor {
padding: 0;
}
small {
font-size: 11px;
}
.main_nav {
list-style: none;
width: 222px;
float: left;
margin: 10px 0 20px 0;
}
.main_nav a {
color: #999;
width: 185px;
padding: 10px;
display: block;
margin-left: 20px;
}
.main_nav a.active {
background: #fff;
border: 2px solid #d8d8d8;
border-right: 0;
border-bottom-color: #ccc;
}
table form {
margin-bottom: 0;
width: 1px;
}
.alert-block .alert-actions {
margin-top: -23px;
margin-right: -23px;
}
.modal > form,
.login > form,
.alert-actions > form {
margin-bottom: 0;
}
.alert-block p {
overflow: hidden;
word-wrap: break-word;
}
.alert-block p:last-child {
margin-bottom: 0;
}
#actions.single {
width: 90px;
}
.table-striped tr td {
transition: background 0.2s;
-webkit-transition: background 0.2s;
-moz-transition: background 0.2s;
-o-transition: background 0.2s;
}
.inspect {
float: left;
display: block;
margin-top: 5px;
margin-right: 25px;
}
.table {
margin-bottom: 25px;
}
.table tr td {
vertical-align: middle;
}
.table tr.empty td {
text-align: center;
}
.table tfoot tr td {
border-top: 1px solid #DDD;
background-color: #F1F1F1;
font-size: 11px;
line-height: 14px;
}
.table_actions {
float: right;
min-width: 400px;
margin-bottom: 10px;
}
.table_actions .table_search {
display: inline-block;
}
.table_search input {
background: url(/static/dashboard/img/search.png) no-repeat 195px 5px;
display: inline-block;
margin-bottom: 0;
}
.table_actions a, .table_actions button {
float: right;
margin-left: 10px;
}
.table_actions button.filter {
margin-left: 0;
}
.table_header .table_actions {
min-width: 0;
}
.table_header .table_actions a, .table_header .table_actions button {
display: inline-block;
float: none;
}
.table_actions form {
float: right;
margin-left: 10px;
}
.hidden {
display: none;
}
.table-striped tbody tr.status_unknown:nth-child(odd) td {
background-color: #ffffb5;
}
.table-striped tbody tr.status_unknown:nth-child(even) td {
background-color: #ffffc6;
}
.nowrap-col {
white-space: nowrap;
}
.overview {
font-size: 24px;
}
#monitoring {
background: #f8f8f8;
font-size: 14px;
height: 20px;
margin: -18px 0 25px;
padding: 10px;
border: 1px solid #e1e1e1;
font-family: "anivers";
}
#monitoring h3 {
font-size: 14px;
font-weight: normal;
float: left;
line-height: 18px;
}
#external_links, #external_links li {
float: left;
}
#external_links li { margin: 0 0 0 15px; }
/* Forms */
form label {
text-align: left;
color: #555;
font-weight: bold;
}
.modal {
width: 700px;
max-height: none; /* Prevents large modals from scrolling unnecessarily */
top: 80px;
margin-top: 0;
position: absolute;
}
.modal.loading {
width: 150px;
height: 150px;
margin: 0 auto;
overflow: hidden;
}
.modal.loading p {
text-align: center;
position: absolute;
bottom: 0;
width: 150px;
}
form.horizontal .form-field {
float: left;
}
form.horizontal.split_half .form-field {
width: 334px; /* Fits 2 fields to a row */
}
form.horizontal.split_quarter .form-field {
width: 167px; /* Fits 4 fields to a row */
}
form.horizontal.split_five .form-field {
width: 133px; /* Fits 5 fields to a row */
}
form.horizontal fieldset {
width: 100%;
}
.modal-body {
overflow-y: visible;
max-height: none;
}
.modal-body table {
margin-bottom: 30px;
}
.modal-body ~ hr {
margin-bottom: 0;
}
.static_page {
float: left;
width: 700px;
background-color: #FFF;
border: 1px solid #DDD;
}
.static_page > form {
margin-bottom: 0;
}
.left {
float: left;
width: 347px;
margin-right: 15px;
}
.left form {
margin: 0;
}
.right {
float: left;
width: 308px;
}
.workflow ul.nav-tabs {
padding: 0 10px;
}
.workflow td.actions {
vertical-align: top;
width: 308px;
padding-left: 10px;
}
.workflow td.help_text {
vertical-align: top;
width: 340px;
padding-right: 10px;
border-right: 1px solid #DDD;
}
.workflow fieldset > table {
margin-bottom: 0;
}
.clear {
clear: both;
width: 0;
height: 0;
padding: 0;
margin: 0;
}
.modal-body fieldset {
margin: 0;
padding: 0;
}
.modal-body fieldset ul {
width: 90%;
}
.modal-body fieldset .form-field input,
.modal-body fieldset .form-field textarea {
width: 298px;
}
.modal-body fieldset .form-field select {
width: 308px;
}
.modal-footer input {
width: auto;
}
.modal-body .modal-footer {
width: 670px;
margin-left: -25px;
margin-right: -15px;
}
.modal-footer a.close {
margin-top: 0;
margin-right: 5px;
font-size: 12px;
color: #666;
font-weight: normal;
filter: alpha(opacity=100);
-khtml-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
.modal-footer a.close:hover {
color: #333;
text-decoration: underline;
}
.modal-body .help-block {
text-align: left;
float: left;
width: 100%;
margin-bottom: 10px;
}
#create_keypair_modal .clearfix {
margin-bottom: 115px;
}
#actions {
width: 90px;
}
#actions .btn {
margin-bottom: 5px;
}
#actions a.btn {
width: 70px;
}
#actions input.btn {
text-align: left;
}
#images #actions {
width: 100px;
}
/*New List Patches*/
.details-modal .modal-body {
padding-bottom: 20px;
}
.form-inline {
display: inline;
}
td.select {
width: 10px;
}
/* Actions dropdown */
td.actions_column {
width: 150px;
padding: 10px;
position: relative;
min-width: 140px;
min-height: 20px;
}
td.actions_column .row_actions a,
td.actions_column .row_actions input,
td.actions_column .row_actions button {
background: none;
float: none;
display: block;
padding: 5px 10px;
color: black;
text-align: left;
border-radius: 0;
border: 0 none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
td.actions_column .row_actions .hide {
display: none;
}
/* Makes size consistent across browsers when mixing "btn-group" and "small" */
.btn.hide, .btn-group .hide {
display: none;
}
.btn-group .dropdown-toggle:focus {
outline: none;
}
.dropdown-menu button {
line-height: 18px; /* Matches rule for ".dropdown-menu a" in bootstrap */
width: 100%;
}
.btn-group .dropdown-menu .btn {
border-radius: 0;
}
.dropdown-menu .btn.btn-danger,
.dropdown-menu .btn.btn-danger:hover,
.dropdown-menu .btn.btn-success,
.dropdown-menu .btn.btn-success:hover,
.dropdown-menu .btn.btn-info,
.dropdown-menu .btn.btn-info:hover {
text-shadow: none; /* remove default bootstrap shadowing from button text. */
}
.dropdown-menu li:hover {
background: none;
}
.dropdown-menu li.divider:hover {
background-color: #E5E5E5;
}
td.actions_column .dropdown-menu a:hover,
td.actions_column .dropdown-menu button:hover {
background-color: #CDCDCD;
}
.dropdown-menu .btn.btn-danger {
color: #C43C35;
}
.dropdown-menu .btn.btn-danger:hover {
background-color: #f6e0df;
}
/* Overrides for single-action rows (no dropdown) */
tr td.actions_column ul.row_actions.single,
tr:hover td.actions_column ul.row_actions.single,
td.actions_column ul.row_actions.single,
td.actions_column ul.row_actions.single:hover {
border: none;
}
td.actions_column ul.row_actions.single li.action {
display: block;
}
td.actions_column ul.row_actions.single li.action:hover {
background-color: transparent;
}
td.actions_column ul.row_actions.single a,
td.actions_column ul.row_actions.single input,
td.actions_column ul.row_actions.single button {
color: #43a1d6;
}
td.actions_column ul.row_actions.single a:hover,
td.actions_column ul.row_actions.single input:hover,
td.actions_column ul.row_actions.single button:hover {
color: black;
}
th.multi_select_column, td.multi_select_column {
width: 25px;
}
th.multi_select_column, td.multi_select_column {
text-align: center;
}
.table-fixed {
table-layout: fixed;
}
.table input[type="checkbox"] {
display: inline;
}
div.input input[type="checkbox"] {
float: left;
width: 25px;
}
.table_title a {
font-size: 11px;
float: right;
margin-left: 10px;
margin-top: 10px;
}
tr.terminated {
color: #999999;
}
#instance_tabs {
float: left;
width: 100%;
border-bottom: 1px solid #e1e1e1;
}
#instance_tabs li a {
background: #f2f2f2;
display: block;
font-size: 14px;
float: left;
padding: 5px 10px;
margin-right: 10px;
border: 1px solid #e1e1e1;
border-bottom: none;
}
#instance_tabs li.active a {
background: #fff;
padding-bottom: 8px;
margin-bottom: -5px;
}
#main_content .nav-tabs {
margin-bottom: 0;
}
#main_content .tab-content {
border: 1px solid #ddd;
border-top: 0 none;
padding: 10px;
}
#main_content .workflow .modal-body {
padding-left: 0;
padding-right: 0;
}
#main_content .workflow .modal-body .tab-content {
border-left: 0 none;
border-right: 0 none;
border-bottom: 0 none;
}
.tab_wrapper {
padding-top: 50px;
}
/* Fix tooltip z-index to show above modals. Bootstrap bug 582*/
.tooltip {
z-index: 12000;
}
.volume_boot_disclosure {
font-weight: bold;
color: #555;
cursor: pointer;
background-image: url(/static/dashboard/img/right_droparrow.png);
background-repeat: no-repeat;
background-position: 130px center;
}
.volume_boot_disclosure.on {
width: 334px;
margin-bottom: 10px;
border-bottom: solid 1px #E1E1E1;
background-image: url(/static/dashboard/img/drop_arrow.png);
}
form div.clearfix.error {
width: 330px;
}
.nav-tabs a {
cursor: pointer;
}
.nav-tabs li.error a {
color: #B94A48;
}
.nav-tabs li.error a:after {
content: "*";
}
/* Region selector in header */
#region_selector {
position: absolute;
z-index: 9999;
right: 0;
top: 24px;
}
#region_selector a { margin-left: 0; }
#region_selector ul{
float: left;
margin-left: 5px;
padding-right: 21px;
width: 125px;
}
#region_selector ul:hover a { display: block; }
#region_selector li a{
padding: 3px 3px 3px 5px;
display: none;
background: #E1E1E1;
margin-top: -10px;
}
#region_selector li:first-child p{
background: #EDEDED url(/static/dashboard/img/drop_arrow.png) no-repeat 106px 9px !important;
display: block;
border: 1px solid #e1e1e1;
padding: 5px;
}
iframe {
border: none;
}
.item_detail ul li label {
color: #000;
font-weight: bold;
display: block;
margin-top: 5px;
}
.progress_bar {
height: 100%;
width: 100%;
border: 1px solid #CCC;
background-color: #CCC;
}
.progress_bar_fill,
.progress_bar_selected {
height: 100%;
float: left;
}
.progress_bar_fill {
background-color: #666;
}
.progress_bar_selected {
background-color: #4790AE;
width: 0;
}
.progress_bar_over {
background-color: red;
}
.quota_title {
color: #999;
padding-bottom: 0;
margin-bottom: 8px;
}
.quota_title strong {
color: #000;
}
.quota_title strong span {
font-weight: normal;
}
.quota_title p {
float: right;
margin-bottom: 0;
}
.quota_bar {
height: 15px;
margin: -8px 0 8px;
}
div .flavor_table {
border: 1px solid #AAA;
width: 100%;
margin-bottom: 14px;
}
.flavor_table .flavor_name {
white-space: nowrap;
font-weight: bold;
text-align: left;
padding: 7px 12px 7px 7px;
width: 160px;
}
#main_content .row-fluid {
margin: 10px 0 20px;
}
#main_content .row-fluid:last-child {
margin-bottom: 0;
}
.header_rule {
margin: 0 0 10px;
}
.item_detail .detail_section {
margin-bottom: 25px;
float: left;
margin-right: 50px;
}
.error .help-inline {
background: #efdfdf;
border: 1px solid #ead5d8;
padding: 10px;
display: block;
}
label.log-length {
line-height: 28px;
margin-right: 10px;
}
.progress-success.bar {
background-color: #5eb95e;
background-image: -moz-linear-gradient(top, #62c462, #57a957);
background-image: -ms-linear-gradient(top, #62c462, #57a957);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957));
background-image: -webkit-linear-gradient(top, #62c462, #57a957);
background-image: -o-linear-gradient(top, #62c462, #57a957);
background-image: linear-gradient(top, #62c462, #57a957);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
}
.progress_bar_fill.progress-warning.bar {
background-color: #898989;
background-image: -moz-linear-gradient(top, #999999, #333333);
background-image: -ms-linear-gradient(top, #999999, #333333);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#999999), to(#333333));
background-image: -webkit-linear-gradient(top, #999999, #333333);
background-image: -o-linear-gradient(top, #999999, #333333);
background-image: linear-gradient(top, #999999, #333333);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#333333', GradientType=0);
}
.progress_bar_over.bar {
background-color: #dd514c;
background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35));
background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
background-image: linear-gradient(top, #ee5f5b, #c43c35);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
}