Skip to content

Commit 01f9145

Browse files
authored
Update API theme (#356)
* Update API theme * Fix comma * A few fixes * A few more fixes
1 parent d6209f3 commit 01f9145

7 files changed

Lines changed: 64 additions & 428 deletions

File tree

awx/static/api/api.css

Lines changed: 58 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -11,42 +11,43 @@ body {
1111
body {
1212
font-family: 'Open Sans', sans-serif;
1313
font-weight: 400;
14-
color: #161B1F;
15-
background-color: #F6F6F6;
14+
color: #f7f7f7;
15+
background-color: #13161b;
1616
padding-top: 50px;
1717
min-height: 100%;
1818
position: relative;
1919
}
2020
body a {
21-
color: #337AB7;
21+
color: #12a66f;
2222
}
2323
body a:hover {
24-
color: #286090;
24+
color: #17c484;
2525
}
2626
body code {
27-
color: #D9534F;
28-
background-color: #FFF5F5;
27+
color: #f7f7f7;
28+
background-color: #1a1e25;
2929
}
3030
body pre code {
3131
color: inherit;
3232
background-color: transparent;
3333
}
3434

3535
body .navbar {
36-
background-color: #FFFFFF;
37-
border-color: #E8E8E8;
36+
background-color: #1a1e25;
37+
border-color: #373a41;
3838
}
3939
body .navbar > .container .navbar-brand,
4040
body .navbar > .container-fluid .navbar-brand,
4141
.navbar {
42-
color: #707070;
42+
color: #f7f7f7;
4343
padding: 0;
4444
margin-left: 0px;
4545
font-size: 14px;
4646
}
4747
body .navbar .navbar-brand:focus,
4848
body .navbar .navbar-brand:hover {
49-
color: #707070;
49+
color: #f7f7f7;
50+
background-color: #1a1e25;
5051
}
5152
body .navbar .navbar-brand img {
5253
display: inline-block;
@@ -63,7 +64,7 @@ body .navbar .navbar-brand > span {
6364
body .navbar .navbar-title {
6465
float: left;
6566
height: 50px;
66-
color: #707070;
67+
color: #cecfd2;
6768
padding: 0;
6869
font-size: 14px;
6970
display: none;
@@ -77,19 +78,20 @@ body.show-title .navbar .navbar-title {
7778
display: inline-block;
7879
}
7980
body .navbar .navbar-nav > li > a {
80-
color: #707070;
81+
color: #f7f7f7;
8182
display: flex;
8283
justify-content: center;
8384
}
8485
body .navbar .navbar-nav > li > a:focus,
8586
body .navbar .navbar-nav > li > a:hover {
86-
color: #707070;
87+
color: #f7f7f7;
88+
background-color: #1a1e25 !important;
8789
}
8890
body .navbar .navbar-nav > li > a > span.glyphicon {
8991
font-size: 20px;
9092
padding-right: 5px;
9193
padding-left: 5px;
92-
color: #848992;
94+
color: #cecfd2;
9395
}
9496

9597
body .page-header {
@@ -103,10 +105,10 @@ body .page-header .toggle-description span.glyphicon {
103105
font-size: 14px;
104106
vertical-align: top;
105107
padding: 2px;
106-
color: #A9A9A9;
108+
color: #f7f7f7;
107109
}
108110
body .page-header .toggle-description:hover span.glyphicon {
109-
color: #171717;
111+
color: #cecfd2;
110112
}
111113
body .description .hide-description span.glyphicon {
112114
color: #E1E1E1;
@@ -120,10 +122,10 @@ body .description,
120122
body .request-info .prettyprint,
121123
body .response-info .prettyprint,
122124
body .well {
123-
background-color: #FFFFFF;
125+
background-color: #1a1e25;
124126
border-radius: 5px;
125127
padding: 10px;
126-
border: 1px solid #E8E8E8;
128+
border: 1px solid #373a41;
127129
margin-top: 20px;
128130
box-shadow: none;
129131
}
@@ -143,13 +145,16 @@ body .response-info {
143145
body pre,
144146
body .prettyprint .pln,
145147
body .request-info .prettyprint .lit {
146-
color: #161B1F;
148+
color: #cecfd2;
147149
}
148150
body .prettyprint .lit {
149-
color: #337AB7;
151+
color: #12a66f;
150152
}
151153
body .prettyprint .str {
152-
color: #D9534F;
154+
color: #f7f7f7;
155+
}
156+
.kwd, .pun, .opn, .clo {
157+
color: #12a66f !important;
153158
}
154159
body div.ansi_back {
155160
display: inline-block;
@@ -173,7 +178,7 @@ body .form-actions button {
173178
body .form-horizontal .control-label {
174179
text-transform: uppercase;
175180
font-weight: normal;
176-
color: #707070;
181+
color: #f7f7f7;
177182
}
178183
body textarea.form-control {
179184
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
@@ -183,36 +188,39 @@ body textarea.form-control {
183188
body .form-control,
184189
body .description pre {
185190
border-color: #E1E1E1;
186-
background-color: #F6F6F6;
187-
color: #161B1F;
191+
background-color: #1a1e25;
192+
color: #f7f7f7;
188193
}
189194

190195
body .tooltip.bottom .tooltip-arrow {
191-
border-bottom-color: #707070;
196+
border-bottom-color: #373a41;
192197
}
193198
body .tooltip.top .tooltip-arrow {
194-
border-top-color: #707070;
199+
border-top-color: #373a41;
195200
}
196201
body .tooltip.left .tooltip-arrow {
197-
border-left-color: #707070;
202+
border-left-color: #373a41;
198203
}
199204
body .tooltip.right .tooltip-arrow {
200-
border-right-color: #707070;
205+
border-right-color: #373a41;
201206
}
202207
body .tooltip.in {
203208
opacity: 1;
204209
}
205210
body .tooltip-inner {
206-
background-color: #707070;
211+
background-color: #1a1e25;
212+
color: #f7f7f7;
213+
border: 1px solid #373a41;
207214
}
208215

209216
body .btn {
210217
transition: background-color 0.2s;
211218
}
212219
.btn-primary {
213-
background-color: #FFFFFF;
214-
color: #707070;
215-
border: 1px solid #E8E8E8;
220+
background-color: #12a66f;
221+
color: #13161b;
222+
border: 1px solid #373a41;
223+
font-weight: bold;
216224
}
217225
.btn-primary:hover,
218226
.btn-primary.focus,
@@ -229,14 +237,14 @@ body .btn {
229237
.open>.dropdown-toggle.btn-primary:focus,
230238
.open>.dropdown-toggle.btn-primary:hover,
231239
.open>.dropdown-toggle.btn-primary {
232-
background-color: #FAFAFA;
233-
color: #707070;
234-
border: 1px solid #E8E8E8;
240+
background-color: #17c484;
241+
color: #13161b;
242+
border: 1px solid #1a1e25;
235243
}
236244

237245
body .tab-content .btn-primary {
238246
background-color: #5cb85c;
239-
color: #FFFFFF;
247+
color: #1a1e25;
240248
border: 1px solid #5cb85c;
241249
}
242250
body .tab-content .btn-primary:hover,
@@ -251,8 +259,9 @@ body .tab-content .btn-primary:active.focus,
251259
body .tab-content .btn-primary:active:focus,
252260
body .tab-content .btn-primary:active:hover {
253261
background-color: #449d44;
254-
color: #FFFFFF;
262+
color: #1a1e25;
255263
border: 1px solid #449d44;
264+
font-weight: bold;
256265
}
257266

258267
.btn-danger {
@@ -289,7 +298,8 @@ body #footer {
289298
overflow: hidden;
290299
margin-bottom: 0;
291300
height: 40px;
292-
color: #707070;
301+
color: #f7f7f7;
302+
padding-bottom: 50px;
293303
}
294304
body #footer .footer-logo {
295305
text-align: left;
@@ -308,7 +318,7 @@ body #footer .footer-copyright {
308318
padding-top: 10px;
309319
}
310320
body #footer .footer-copyright a {
311-
color: #707070;
321+
color: #17c484;
312322
}
313323

314324
@media screen and (min-width: 768px) {
@@ -370,3 +380,12 @@ body #footer .footer-copyright a {
370380
white-space: nowrap;
371381
}
372382
}
383+
384+
.dropdown-menu,
385+
.dropdown-menu > li,
386+
.dropdown-menu > li:hover,
387+
.dropdown-menu > li > a {
388+
background-color: #1a1e25 !important;
389+
border-color: #1a1e25 !important;
390+
color: #f7f7f7 !important;
391+
}

0 commit comments

Comments
 (0)