mirror of
https://github.com/ansible/awx.git
synced 2026-01-18 05:01:19 -03:30
Update browsable API styling based on UI feedback.
This commit is contained in:
Chris Church
parent
f68329bd58
commit
ce5989ba31
@ -11,25 +11,39 @@ body {
|
||||
body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-weight: 400;
|
||||
color: #171717;
|
||||
background-color: #f6f6f6;
|
||||
color: #161B1F;
|
||||
background-color: #F6F6F6;
|
||||
padding-top: 50px;
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
body a {
|
||||
color: #1678C4;
|
||||
}
|
||||
body a:hover {
|
||||
color: #4498DA;
|
||||
}
|
||||
body code {
|
||||
color: #FF5850;
|
||||
background-color: #FFF5F5;
|
||||
}
|
||||
body pre code {
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
body .navbar {
|
||||
background-color: #FFFFFF;
|
||||
border-color: #E8E8E8;
|
||||
}
|
||||
body .navbar .navbar-brand {
|
||||
color: #707070;
|
||||
color: #848992;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
body .navbar .navbar-brand:focus,
|
||||
body .navbar .navbar-brand:hover {
|
||||
color: #707070;
|
||||
color: #848992;
|
||||
}
|
||||
body .navbar .navbar-brand img {
|
||||
display: inline-block;
|
||||
@ -45,7 +59,7 @@ body .navbar .navbar-brand > span {
|
||||
body .navbar .navbar-title {
|
||||
float: left;
|
||||
height: 50px;
|
||||
color: #707070;
|
||||
color: #848992;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
display: none;
|
||||
@ -60,11 +74,19 @@ body.show-title .navbar .navbar-title {
|
||||
}
|
||||
body .navbar .navbar-nav > li > a {
|
||||
color: #848992;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
body .navbar .navbar-nav > li > a:focus,
|
||||
body .navbar .navbar-nav > li > a:hover {
|
||||
color: #848992;
|
||||
}
|
||||
body .navbar .navbar-nav > li > a > span.glyphicon {
|
||||
font-size: 20px;
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
color: #B7B7B7;
|
||||
}
|
||||
|
||||
body .page-header {
|
||||
margin-top: 20px;
|
||||
@ -77,6 +99,17 @@ body .page-header .toggle-description span.glyphicon {
|
||||
font-size: 14px;
|
||||
vertical-align: top;
|
||||
padding: 2px;
|
||||
color: #A9A9A9;
|
||||
}
|
||||
body .page-header .toggle-description:hover span.glyphicon {
|
||||
color: #171717;
|
||||
}
|
||||
body .description .hide-description span.glyphicon {
|
||||
color: #E1E1E1;
|
||||
font-size: 20px;
|
||||
}
|
||||
body .description .hide-description:hover span.glyphicon {
|
||||
color: #B7B7B7;
|
||||
}
|
||||
body ul.breadcrumb,
|
||||
body .description,
|
||||
@ -103,6 +136,18 @@ body .resource-description,
|
||||
body .response-info {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
body pre,
|
||||
body .prettyprint .pln,
|
||||
body .request-info .prettyprint .lit {
|
||||
color: #161B1F;
|
||||
}
|
||||
body .prettyprint .lit {
|
||||
color: #1678C4;
|
||||
}
|
||||
body .prettyprint .str {
|
||||
color: #FF5850;
|
||||
}
|
||||
|
||||
body .well.tab-content {
|
||||
padding: 20px;
|
||||
}
|
||||
@ -118,6 +163,110 @@ body .form-group {
|
||||
body .form-actions button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
body .form-horizontal .control-label {
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
color: #848992;
|
||||
}
|
||||
body textarea.form-control {
|
||||
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
font-size: 12px;
|
||||
padding: 6px;
|
||||
}
|
||||
body .form-control,
|
||||
body .description pre {
|
||||
border-color: #E1E1E1;
|
||||
background-color: #F6F6F6;
|
||||
color: #161B1F;
|
||||
}
|
||||
|
||||
body .tooltip.bottom .tooltip-arrow {
|
||||
border-bottom-color: #848992;
|
||||
}
|
||||
body .tooltip.top .tooltip-arrow {
|
||||
border-top-color: #848992;
|
||||
}
|
||||
body .tooltip.left .tooltip-arrow {
|
||||
border-left-color: #848992;
|
||||
}
|
||||
body .tooltip.right .tooltip-arrow {
|
||||
border-right-color: #848992;
|
||||
}
|
||||
body .tooltip.in {
|
||||
opacity: 1;
|
||||
}
|
||||
body .tooltip-inner {
|
||||
background-color: #848992;
|
||||
}
|
||||
|
||||
body .btn {
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.btn-primary {
|
||||
background-color: #FFFFFF;
|
||||
color: #848992;
|
||||
border: 1px solid #E8E8E8;
|
||||
}
|
||||
.btn-primary:hover,
|
||||
.btn-primary.focus,
|
||||
.btn-primary:focus,
|
||||
.btn-primary.active,
|
||||
.btn-primary:active,
|
||||
.btn-primary.active.focus,
|
||||
.btn-primary.active:focus,
|
||||
.btn-primary.active:hover,
|
||||
.btn-primary:active.focus,
|
||||
.btn-primary:active:focus,
|
||||
.btn-primary:active:hover,
|
||||
.open>.dropdown-toggle.btn-primary.focus,
|
||||
.open>.dropdown-toggle.btn-primary:focus,
|
||||
.open>.dropdown-toggle.btn-primary:hover,
|
||||
.open>.dropdown-toggle.btn-primary {
|
||||
background-color: #FAFAFA;
|
||||
color: #848992;
|
||||
border: 1px solid #E8E8E8;
|
||||
}
|
||||
|
||||
body .tab-content .btn-primary {
|
||||
background-color: #3CB878;
|
||||
color: #FFFFFF;
|
||||
border: 1px solid #3CB878;
|
||||
}
|
||||
body .tab-content .btn-primary:hover,
|
||||
body .tab-content .btn-primary.focus,
|
||||
body .tab-content .btn-primary:focus,
|
||||
body .tab-content .btn-primary.active,
|
||||
body .tab-content .btn-primary:active,
|
||||
body .tab-content .btn-primary.active.focus,
|
||||
body .tab-content .btn-primary.active:focus,
|
||||
body .tab-content .btn-primary.active:hover,
|
||||
body .tab-content .btn-primary:active.focus,
|
||||
body .tab-content .btn-primary:active:focus,
|
||||
body .tab-content .btn-primary:active:hover {
|
||||
background-color: #60D66F;
|
||||
color: #FFFFFF;
|
||||
border: 1px solid #60D66F;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background-color: #FF5850;
|
||||
border-color: #FF5850;
|
||||
}
|
||||
.btn-danger:hover,
|
||||
.btn-danger:hover,
|
||||
.btn-danger.focus,
|
||||
.btn-danger:focus,
|
||||
.btn-danger.active,
|
||||
.btn-danger:active,
|
||||
.btn-danger.active.focus,
|
||||
.btn-danger.active:focus,
|
||||
.btn-danger.active:hover,
|
||||
.btn-danger:active.focus,
|
||||
.btn-danger:active:focus,
|
||||
.btn-danger:active:hover {
|
||||
background-color: #FF1105;
|
||||
border-color: #FF1105;
|
||||
}
|
||||
|
||||
body .wrapper {
|
||||
min-height: 100%;
|
||||
@ -170,20 +319,28 @@ body #footer .footer-copyright a {
|
||||
display: none;
|
||||
}
|
||||
body .navbar .navbar-toggle {
|
||||
background-color: #337ab7;
|
||||
border-color: #2e6da4;
|
||||
background-color: #FFFFFF;
|
||||
border-color: #E8E8E8;
|
||||
}
|
||||
body .navbar .navbar-toggle:active,
|
||||
body .navbar .navbar-toggle:hover {
|
||||
background-color: #286090;
|
||||
border-color: #204d74;
|
||||
background-color: #FAFAFA;
|
||||
border-color: #E8E8E8;
|
||||
}
|
||||
body .navbar .navbar-toggle .icon-bar {
|
||||
background-color: #fff;
|
||||
background-color: #B7B7B7;
|
||||
}
|
||||
body .navbar .tooltip {
|
||||
visibility: hidden;
|
||||
}
|
||||
body .navbar .navbar-nav > li > a {
|
||||
display: block;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
body .navbar .navbar-nav > li > a > span.glyphicon {
|
||||
top: 4px;
|
||||
}
|
||||
body .page-header h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
@ -6,6 +6,10 @@
|
||||
|
||||
$(function() {
|
||||
|
||||
// Add syntax highlighting to examples in description.
|
||||
$('.description pre').addClass('prettyprint');
|
||||
prettyPrint();
|
||||
|
||||
// Make links from relative URLs to resources.
|
||||
$('span.str').each(function() {
|
||||
var s = $(this).html();
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<div class="navbar navbar-fixed-top">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
|
||||
<button type="button btn btn-primary" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
@ -61,7 +61,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden">
|
||||
<a class="hide-description pull-right js-tooltip" href="#" title="Hide Description"><span class="glyphicon glyphicon-remove"></span></a>
|
||||
<a class="hide-description pull-right js-tooltip" href="#" title="Hide Description"><span class="glyphicon glyphicon-remove-sign"></span></a>
|
||||
<a class="toggle-description js-tooltip" href="#" title="Show/Hide Description"><span class="glyphicon glyphicon-question-sign"></span></a>
|
||||
</div>
|
||||
{{ block.super }}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user