diff options
Diffstat (limited to 'openstack_dashboard/static/dashboard/less/horizon.less')
| -rw-r--r-- | openstack_dashboard/static/dashboard/less/horizon.less | 1169 |
1 files changed, 1169 insertions, 0 deletions
diff --git a/openstack_dashboard/static/dashboard/less/horizon.less b/openstack_dashboard/static/dashboard/less/horizon.less new file mode 100644 index 00000000..c9f68086 --- /dev/null +++ b/openstack_dashboard/static/dashboard/less/horizon.less @@ -0,0 +1,1169 @@ +/* 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); +} |