verdnatura-mirror
/
loopback-component-explorer
mirror of https://github.com/strongloop/loopback-component-explorer.git
0
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
loopback-component-explorer/public/css/loopbackStyles.css

370 lines
11 KiB
CSS
Raw Normal View History

Allow easy setting of accessToken in explorer UI.
2014-07-09 16:45:44 +00:00
/* Styles used for loopback explorer customizations */
Move CSS customizations to loopbackStyles.css Compare loopback-explorer:public/css/screen.css@f3d6cb9 against swagger-ui:dist/css/screen@e980cca and move all changes to loopbackStyles.css
2015-07-08 13:20:21 +00:00
/* Custom font */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 300;
src: local('Ubuntu Light'),
local('Ubuntu-Light'),
url(../fonts/_aijTyevf54tkVDLy-dlnLO3LdcAZYWl9Si6vvxL-qU.woff)
format('woff');
}
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 500;
src: local('Ubuntu Medium'),
local('Ubuntu-Medium'),
url(../fonts/OsJ2DjdpjqFRVUSto6IffLO3LdcAZYWl9Si6vvxL-qU.woff)
format('woff');
}
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
src: local('Ubuntu Bold'),
local('Ubuntu-Bold'),
url(../fonts/0ihfXUL2emPh0ROJezvraLO3LdcAZYWl9Si6vvxL-qU.woff)
format('woff');
}
.swagger-section .swagger-ui-wrap,
.swagger-section .swagger-ui-wrap b,
.swagger-section .swagger-ui-wrap strong,
.swagger-section .swagger-ui-wrap .model-signature
.swagger-section .swagger-ui-wrap h1,
.swagger-section .swagger-ui-wrap form.formtastic fieldset.inputs ol li.text textarea,
.swagger-section .swagger-ui-wrap ul#resources,
.swagger-section .swagger-ui-wrap ul#resources li.resource div.heading h2,
.swagger-section .swagger-ui-wrap p#colophon,
.swagger-section .swagger-ui-wrap .markdown ul
.model-signature {
font-family: "Ubuntu", sans-serif !important;
}
/* layout spacing and global colors */
body {
padding-top: 60px;
font-family: "Ubuntu", sans-serif;
}
body #header {
background-color: #08592b !important;
position: fixed;
width: 100%;
top: 0;
}
body #header a#logo {
padding: 20px 0 20px 60px !important;
}
body #header form#api_selector .input a#explore {
background-color: #7dbd33 !important;
}
body #header form#api_selector .input a#explore:hover {
background-color: #808080 !important;
}
/* HTTP GET */
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.get div.heading {
background-color: #e6f3f6 !important;
border: 1px solid #bfe1e8 !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.get div.heading h3 span.http_method a {
background-color: #0085a1 !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.get div.heading ul.options li {
color: #0085a1 !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.get div.content {
background-color: #e9f5f7 !important;
border: 1px solid #bfe1e8 !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.get div.content h4 {
color: #0085a1 !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.get div.content form input[type='text'].error {
outline: 2px solid #cc0000 !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.get div.content div.sandbox_header a {
color: #66b6c7 !important;
}
li.operation.get .content > .content-type > div > label {
color: #0085a1 !important;
}
/* HTTP POST */
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.post div.heading {
background-color: #f4effa !important;
border: 1px solid #e3d8f3 !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.post div.heading h3 span.http_method a {
background-color: #9063cd !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.post div.heading ul.options li {
border-right-color: #e3d8f3 !important;
color: #9063cd !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.post div.heading ul.options li a {
color: #9063cd !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.post div.content {
background-color: #f6f2fb !important;
border: 1px solid #e3d8f3 !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.post div.content h4 {
color: #9063cd !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.post div.content form input[type='text'].error {
outline: 2px solid #cc0000 !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.post div.content div.sandbox_header a {
color: #bca1e1 !important;
}
li.operation.post .content > .content-type > div > label {
color: #9063cd !important;
}
/* HTTP PUT */
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.put div.heading {
background-color: #ede7ee !important;
border: 1px solid #d1c2d6 !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.put div.heading h3 span.http_method a {
background-color: #470a59;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.put div.heading ul.options li {
border-right-color: #d1c2d6 !important;
color: #470a59 !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.put div.heading ul.options li a {
color: #470a59 !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.put div.content {
background-color: #efeaf1 !important;
border: 1px solid #d1c2d6 !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.put div.content h4 {
color: #470a59 !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.put div.content form input[type='text'].error {
outline: 2px solid #cc0000 !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.put div.content div.sandbox_header a {
color: #916c9b !important;
}
li.operation.put .content > .content-type > div > label {
color: #470a59 !important;
}
/* HTTP PATCH */
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.patch div.heading {
background-color: #e6f9fb !important;
border: 1px solid #bff0f5 !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.patch div.heading h3 span.http_method a {
background-color: #00c1d5 !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.patch div.heading ul.options li {
border-right-color: #bff0f5 !important;
color: #00c1d5 !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.patch div.heading ul.options li a {
color: #00c1d5 !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.patch div.content {
background-color: #e9fafb !important;
border: 1px solid #bff0f5 !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.patch div.content h4 {
color: #00c1d5 !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.patch div.content form input[type='text'].error {
outline: 2px solid #cc0000 !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.patch div.content div.sandbox_header a {
color: #66dae6 !important;
}
li.operation.patch .content > .content-type > div > label {
color: #00c1d5 !important;
}
/* HTTP HEAD */
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.head div.heading {
background-color: #fff2ec !important;
border: 1px solid #ffdfd0 !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.head div.heading h3 span.http_method a {
background-color: #ff7f41 !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.head div.heading ul.options li {
border-right-color: #ffdfd0 !important;
color: #ff7f41 !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.head div.heading ul.options li a {
color: #ff7f41 !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.head div.content {
background-color: #fff4ef !important;
border: 1px solid #ffdfd0 !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.head div.content h4 {
color: #ff7f41 !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.head div.content form input[type='text'].error {
outline: 2px solid #cc0000 !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.head div.content div.sandbox_header a {
color: #ffb28d !important;
}
li.operation.head .content > .content-type > div > label {
color: #ff7f41 !important;
}
/* HTTP DELETE */
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.delete div.heading {
background-color: #fbede7 !important
border: 1px solid #f4d1c3 !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.delete div.heading h3 span.http_method a {
background-color: #d4470f !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.delete div.heading ul.options li {
border-right-color: #f4d1c3 !important;
color: #d4470f !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.delete div.heading ul.options li a {
color: #d4470f !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.delete div.content {
background-color: #fbefeb !important;
border: 1px solid #f4d1c3 !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.delete div.content h4 {
color: #d4470f !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.delete div.content form input[type='text'].error {
outline: 2px solid #cc0000 !important;
}
body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.delete div.content div.sandbox_header a {
color: #e5916f !important;
}
li.operation.delete .content > .content-type > div > label {
color: #d4470f !important;
}
/* Access Token widgets */
Allow easy setting of accessToken in explorer UI.
2014-07-09 16:45:44 +00:00
.accessTokenDisplay {
color: white;
margin-right: 10px;
}
.accessTokenDisplay.set {
border-bottom: 1px dotted #333; position: relative; cursor: pointer;
}
.accessTokenDisplay.set:hover:after {
content: attr(data-tooltip);
position: absolute;
white-space: nowrap;
Restore existing styles. TODO extract overrides instead of replacing styles wholesale.
2014-07-09 17:03:34 +00:00
font-size: 12px;
Allow easy setting of accessToken in explorer UI.
2014-07-09 16:45:44 +00:00
background: rgba(0, 0, 0, 0.85);
padding: 3px 7px;
color: #FFF;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
right: 0;
bottom: -30px;
}
Restore existing styles. TODO extract overrides instead of replacing styles wholesale.
2014-07-09 17:03:34 +00:00
Add syntax highlighting styles & highlight threshold. Previously, highlighting classes were being added to the DOM but had no CSS so the user just saw black - a lot of CPU usage for nothing. These styles now attractively and minimally style resposes so long as they are below a certain threshold, as well as model schemas. The highlightSizeThreshold fixes the long hang users would see when large responses were returned.
2014-10-07 09:07:41 +00:00
/* JSON syntax highlighting */
.json, .json .attribute {
color: black;
}
.json .value .string {
color: #800;
}
.json .value .number, .json .value .literal {
color: #080;
}
Added padding to content well in order to counteract changes in SwaggerUI
2014-09-30 02:43:56 +00:00
.contentWell {
Merge remote-tracking branch 'upstream/master' * upstream/master: Sort endpoints by letter. Add syntax highlighting styles & highlight threshold. Add contribution guidelines Bump version Fix how the array of models is iterated Bump version Make sure nested/referenced models in array are mapped to swagger Make sure nested/referenced models are mapped to swagger Bump version Newest Swagger UI requires application/x-www-form-urlencoded. Use `dist` property from swagger-ui package. Fixed undefined modelClass when using polymorphic relations Bump version Fix the type name for a property if model class is used Conflicts: lib/model-helper.js lib/swagger.js public/css/loopbackStyles.css
2014-10-07 18:57:15 +00:00
padding-left: 30px;
padding-right: 30px;
Added padding to content well in order to counteract changes in SwaggerUI
2014-09-30 02:43:56 +00:00
}
Restore existing styles. TODO extract overrides instead of replacing styles wholesale.
2014-07-09 17:03:34 +00:00
/*
Reverted to use special loading logic from loopback-explorer
2014-07-15 04:57:39 +00:00
FIXME: Separate the overrides from the rest of the styles, rather than override screen.css entirely.
Corrected issues with merge of 2.x changes
2014-08-05 03:09:07 +00:00
*/
loopbackStyles: improve spacing in small window Improve spacing of page elements when the browser window is small.
2014-10-14 08:25:57 +00:00
/* Improve spacing when the browser window is small */
#message-bar, #swagger-ui-container {
padding-left: 30px;
padding-right: 30px;
}
Restore existing styles. TODO extract overrides instead of replacing styles wholesale.
2014-07-09 17:03:34 +00:00
loopbackStyles: improve spacing in small window Improve spacing of page elements when the browser window is small.
2014-10-14 08:25:57 +00:00
#api_selector {
padding: 0px 20px;
}