mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-12-05 08:48:11 +00:00
[FIX] styles
This commit is contained in:
Ben Stein-Lobovits
345
css/api-style.css
Normal file
345
css/api-style.css
Normal file
@@ -0,0 +1,345 @@
|
||||
* {
|
||||
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:hover {
|
||||
color:#444;
|
||||
}
|
||||
#command_list li.selected {
|
||||
color:#444;
|
||||
background:#f0f0f0;
|
||||
}
|
||||
#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 {
|
||||
display:table-row;
|
||||
width:100%;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
#response {
|
||||
min-height:100px;
|
||||
border-top-left-radius:0px !important;
|
||||
border-top-right-radius:0px !important;
|
||||
}
|
||||
#input {
|
||||
width: 30%;
|
||||
}
|
||||
#output {
|
||||
width: 60%;
|
||||
}
|
||||
p, 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;
|
||||
|
||||
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;
|
||||
}
|
||||
#request_button {
|
||||
background:#3a87ad;
|
||||
}
|
||||
#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,
|
||||
#response {
|
||||
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;
|
||||
}
|
||||
@@ -236,7 +236,7 @@ mixpanel.init("132d42885e094171f34467fc54da6fab");
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<link rel='stylesheet' type='text/css' href='css/api-style.min.css'/>
|
||||
<link rel='stylesheet' type='text/css' href='css/api-style.css'/>
|
||||
<link rel='stylesheet' type='text/css' href='css/codemirror.css'/>
|
||||
<script type='text/javascript' src='js/es5-shim.js'></script>
|
||||
<script src='//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/codemirror.min.js'></script>
|
||||
|
||||
Reference in New Issue
Block a user