From 087d70a060baa49e63bc950a73677014029ee51f Mon Sep 17 00:00:00 2001 From: Ben Stein-Lobovits Date: Thu, 11 Sep 2014 12:43:50 -0700 Subject: [PATCH] [FIX] styles --- css/api-style.css | 345 +++++++++++++++++++++++++++++++++++++++++++ ripple-api-tool.html | 2 +- 2 files changed, 346 insertions(+), 1 deletion(-) create mode 100644 css/api-style.css diff --git a/css/api-style.css b/css/api-style.css new file mode 100644 index 0000000000..c2a1f7b0b1 --- /dev/null +++ b/css/api-style.css @@ -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; +} diff --git a/ripple-api-tool.html b/ripple-api-tool.html index b149c43641..e6176929ea 100644 --- a/ripple-api-tool.html +++ b/ripple-api-tool.html @@ -236,7 +236,7 @@ mixpanel.init("132d42885e094171f34467fc54da6fab"); - +