xrpl-dev-portal/css/api-style.css

* {
  box-sizing:border-box;
}
body {
  background:#fafafa;
  background-image:url('img/bg-gray.png') repeat scroll center top transparent;
  color:#5b5b5b;
  font-family:'open sans';
  margin:0;
  padding:0;
}
h1 {
  font-size:35px;
  font-weight:300;
  text-align:center;
  border-bottom:1px solid #aaa;
  padding:0 0 20px 0;
  margin:30px 0;
  line-height:40px;
}
ul {
  list-style-type:none;
  padding:0;
}
h2 {
  font-family:'open sans';
  font-size:36px;
  font-weight:300;
  color:#173847;
}
#wrapper {
  padding:0 20px;
}
#command_wrapper {
  display:table;
  width:100%;
  padding:0;
  margin:0;
  border-spacing:0;
}
#command_wrapper > * {
  vertical-align:top;
  display:table-cell;
}
#command_list {
  display:table-cell;
  list-style-type:none;
  padding:36px 0 0 0;
  margin:0;
  height:100%;
}
/*#command_list li {
  padding:4px 12px;
  display:block;
  width:200px;
  cursor:pointer;
  border-radius:28px;
  box-sizing:border-box;
  user-select:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  color:#0088CC;
}
#command_list li.selected {
  color:#444;
  background:#f0f0f0;
  cursor: auto;
}*/

#command_list li {
    width: 200px;
}

#command_list li.selected a {
    cursor: default;
    text-decoration: none;
    color: #444;
    background: #f0f0f0;
}

#command_list li.separator {
    color: #474648;
    font-family: "Open Sans",sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 10px;
}

#command_table {
  height:100%;
}
#io_wrapper {
  float:right;
  display:table;
  height:500px;
  padding:0;
  table-layout:fixed;
  border-spacing:24px 0;
  width:96%;
  height: 100%;
}
#io_wrapper > div {
  width:100%;
  margin:0;
  padding:0;
}
#response, #response_body {
  min-height:100px;
  border-top-left-radius:0px !important;
  border-top-right-radius:0px !important;
}
#input {
  width: 30%;
}
#output {
  width: 60%;
}
h3 {
  margin:16px 0;
  font-family:'open sans';
  font-weight:300;
  font-size:24.5px;
}
#status {
  height:120px;
  overflow:auto;
  margin-bottom:10px;
  border-radius:4px;
  border:1px dotted #aaa;
  background:#f5f5f5;
  resize:vertical;
  display:none;
}
#status * {
  resize: none;
}
#status div.result {
  border-bottom:1px dotted #aaa;
  padding:5px 0;
}
#status div.result p {
  font-size:14px;
}
#status div.result div.key {
  padding:2px 2px 2px 6px;
}
#info span.command_name {
  display:inline-block;
}
#info span.timestamp, #info span.sizestamp {
  display:inline-block;
  margin:0 5px;
  color:#aaa;
}
#response.success {
  border-top:4px solid #B5CAA0;
}
#response.error {
  border-top: 4px solid #E83015;
}
#response div.result {
  border-bottom:1px dotted #aaa;
  overflow:auto;
}
#response:focus, #status:focus {
  outline:none;
}

#request_options > div {
/*  float:right;
  margin:0;
  width:200px;
  color:#fff;
 /* 
 background-image:linear-gradient(283deg, rgba(255,255,255,0.1) 50%, transparent 55%), linear-gradient(top, rgba(255,255,255,0.15), transparent);
  background-image:-webkit-linear-gradient(283deg, rgba(255,255,255,0.1) 50%, transparent 55%), -webkit-linear-gradient(top, rgba(255,255,255,0.15), transparent);
  background-image:-moz-linear-gradient(283deg, rgba(255,255,255,0.1) 50%, transparent 55%), -moz-linear-gradient(top, rgba(255,255,255,0.15), transparent);
  background-image:linear-gradient(283deg, rgba(255,255,255,0.1) 50%, transparent 55%), linear-gradient(top, rgba(255,255,255,0.15), transparent);
  background-image:-webkit-linear-gradient(283deg, rgba(255,255,255,0.1) 50%, transparent 55%), -webkit-linear-gradient(top, rgba(255,255,255,0.15), transparent);
  background-image:-moz-linear-gradient(283deg, rgba(255,255,255,0.1) 50%, transparent 55%), -moz-linear-gradient(top, rgba(255,255,255,0.15), transparent);
 

  border-radius:4px;
  border-bottom:1px solid #fff;
  background-color: #346AA9;
  font-weight:300;
  font-size:16px;
/*   line-height:50px; 
  text-align:center;
  cursor:default;

  user-select:none;
  -webkit-user-select:none;
  -moz-user-select:none;
*/
  margin-top: 5px;
}
/*#request_button {
  background-color: #346AA9;
}
#request_button.depressed {
  background:#295F7A;
}*/
#sign_button {
  display:none;
  background:#42602D;
  margin-right:22px !important;
}
#sign_button.depressed {
  background:#304621;
}

.obscured {
  opacity:.7;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  cursor:default;
}
::-webkit-scrollbar-thumb {
  background:#aaa;
  border-radius: 4px;
  cursor:pointer;
}
#online_state {
  position:absolute;
  top:100px;
/*   right:20px; */
  line-height:50px;
  font-size:14px;
  font-style:italic;
}
#online_state.disconnected {
  color:#E83015;
}
#online_state.connecting { }
#online_state.connected {
  color: #4A593D;
}
#invalid {
  display:none;
  color:#E83015;
  font-family:'open sans';
  font-size:14px;
}

#pause_button {
  display:inline-block;
  position:relative;
  right:-12px;
  top:3px;
  background:#aaa;
  color:#fff;
  font-size:10px;
  cursor:pointer;
  font-weight:bold;
  letter-spacing:-5px;
  text-align:center;
  width:28px;
  padding-right:6px;
  padding-bottom:2px;
  border-radius:4px;
  vertical-align:top;
  display:none;
}

ul.toolbar {
  background:#f5f5f5;
  font-size:.8em;
  border-radius:4px;
}
ul.toolbar li {
  display:inline-block;
  width:50px;
  text-align:center;
  color:#0088CC;
  line-height:28px;
  padding:0 8px;
  cursor:pointer;
}


/* JSON syntax highlighting */
#request, #request_body,
#response, #response_body,
#rest_url_wrapper {
  font-family:'inconsolata',monospace;
  font-size:13px;
  line-height:20px;
  padding:6px;
  background:#f5f5f5;
  border:1px dotted #aaa;
  border-radius:4px;
  cursor:text;
  overflow:auto;
}
#status > div {
  border-bottom:1px dotted #aaa;
}
/*#description {
  margin-top:10px;
  padding:15px;
  border-radiuS:4px;
  font-size:16px;
  color:#3a87ad;
  background:#d9edf7;
  border:1px dotted #3a87ad;
}*/

/*#selected_command {
  margin-top:-32px;
}*/

#selected_command a {
  text-decoration:none;
  color:#3a87ad;
}

#tooltip {
  position:absolute;
  display:none;
  padding:8px 16px;
  border-radius:4px;
  background:#FBEFD5;
  border:1px dotted #7A6943;
  color:#7A6943;
  font-family:'open sans';
  font-weight:300;
  font-size:14px;
  line-height:1.5em;
  max-width:300px;
  z-index:99;
}

.CodeMirror {
  background:inherit !important;
  color:inherit !important;
  height: auto !important;
  line-height:1.3 !important;
  font-size:14px !important;
}

.CodeMirror-selected {
  background:#ddd !important;
}

/* JSON property */
span.cm-string:first-of-type {
  font-weight:bold !important;
  color:#574C57 !important;
}

span.cm-string {
  color:#516E41 !important;
}

span.cm-number {
  color:#F05E1C !important;
}

span.cm-atom {
  color:#66327C !important;
}

/* Progress spinner animation */
@keyframes rotating {
    from {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
    }
}

@-webkit-keyframes rotating /* Safari and Chrome */ {
    from {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
    }
}

.loader {
    -webkit-animation: rotating 1s linear infinite;
    -moz-animation: rotating 1s linear infinite;
    -ms-animation: rotating 1s linear infinite;
    -o-animation: rotating 1s linear infinite;
    animation: rotating 1s linear infinite;
    width: 25px;height:25px;
}


/* Rest-tool-specific stuff */

#rest_method {
    display: inline-block;
    padding: 6px;
    vertical-align: middle;
    border: 1px dotted #aaa;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    margin-bottom: 3px;
    background-color: #c7254e;
    color: white;
    appearance: none;
    -moz-appearance: none;
}

#rest_url_wrapper {
    font-family: sans-serif;
    display: inline-block;
    text-indent: -2em;
    padding-left: 2.5em;
}

#rest_url {
    width: auto;
    border: 0;
    background: none;
    font-size:13px;
    vertical-align: top;
}

#rest_url .editable {
    font-weight: bold;
    font-family:'inconsolata',monospace;
    border-width: 0 0px 1px 0;
    border-style: dotted;
    border-color: #aaa;
    min-width: 5em;
    background: none;
    vertical-align: top;
}

#rest_url .non_editable {
    vertical-align: top;
}

#rest_url_wrapper p {
    margin: 0;
}

#rest_url div {
    display: inline-block;
}

#rest_url input {
    margin: 0 !important;
}

#rest_url div label, 
#rest_url div input {
    display: block;
}