From 15a68394ddb89f3371ed17be9ab01ccc34bde72c Mon Sep 17 00:00:00 2001 From: artiebits Date: Wed, 27 Dec 2017 23:32:37 +0100 Subject: [PATCH] Move playground styles to the single CSS file (#3588) * Move playground styles to the single css file * Add separateCss property to siteConfig.js --- website/pages/playground/index.html | 286 +--------------------------- website/siteConfig.js | 1 + website/static/playground.css | 283 +++++++++++++++++++++++++++ 3 files changed, 285 insertions(+), 285 deletions(-) create mode 100644 website/static/playground.css diff --git a/website/pages/playground/index.html b/website/pages/playground/index.html index 87c854eee..35faca059 100644 --- a/website/pages/playground/index.html +++ b/website/pages/playground/index.html @@ -41,291 +41,7 @@ - + diff --git a/website/siteConfig.js b/website/siteConfig.js index 57b9194d8..209dd3f3f 100644 --- a/website/siteConfig.js +++ b/website/siteConfig.js @@ -74,6 +74,7 @@ const siteConfig = { ); } ], + separateCss: "/playground.css", gaTrackingId: "UA-111350464-1" }; diff --git a/website/static/playground.css b/website/static/playground.css new file mode 100644 index 000000000..ed239bf53 --- /dev/null +++ b/website/static/playground.css @@ -0,0 +1,283 @@ +html { + background-color: #fafafa; + color: #6a6a6a; + font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", + "Helvetica Neue", Arial, sans-serif; + font-size: 12px; + line-height: 1.25; +} + +body { + display: flex; + flex-direction: column; + height: 100vh; + margin: 0; +} + +header { + display: flex; + flex-wrap: nowrap; + justify-content: space-between; + align-items: center; + height: 30px; + padding: 11px 27px; + background-color: #1a2b34; + color: #e0e0e0; + position: relative; + z-index: 20; +} + +@media (max-width: 400px) { + header { + padding: 10px; + } +} + +header a, +header a:visited, +header a:focus, +header a:active, +header a:hover { + color: #fff; + text-decoration: none; +} + +.logo-wrapper { + display: flex; + align-items: center; +} + +.logo { + height: 34px; + margin-right: 10px; +} + +header h1 { + font-size: 20px; + display: block; + font-family: inherit; + font-weight: 400; + line-height: 18px; + position: relative; + z-index: 9999; + margin: 0; +} + +#version { + font-size: 0.5em; + line-height: 0; + opacity: 0.5; +} + +.links { + display: flex; + font-size: 16px; +} +.links > * + * { + margin-left: 15px; +} + +.editors-container { + display: flex; + flex: 1; + min-height: 0; +} + +.editors { + display: flex; + flex-flow: row wrap; + flex: 1; +} + +.editor { + box-sizing: border-box; + display: flex; + flex: 1 1 100%; + position: relative; + border-bottom: 1px solid #ddd; +} + +/* display as 2x2 grid */ +@media (min-width: 800px) { + .options-container { + border-right: 0; + } + + .editor { + flex-basis: 50%; + border-left: 1px solid #ddd; + margin-left: -1px; + } +} + +/* display as four columns */ +@media (min-width: 1200px) { + .editor { + flex-basis: 25%; + } +} + +.editor.loading { + opacity: 0; +} + +.CodeMirror { + height: auto; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + line-height: 1.6; +} + +.bottom-bar { + position: relative; +} + +.bottom-bar-buttons { + z-index: 10; + padding: 8px; + display: flex; + float: left; +} + +.bottom-bar-buttons-right { + float: right; +} + +.bottom-bar-buttons > * + * { + margin-left: 9px; +} + +@media (max-width: 799px) { + .bottom-bar-buttons { + top: auto; + bottom: 100%; + padding: 2px; + } + + .bottom-bar-buttons > * + * { + margin-left: 2px; + } +} + +.options-container { + display: none; + box-sizing: border-box; + width: 225px; + height: 100%; + border-bottom: 1px solid #ddd; + border-right: 1px solid #ddd; + flex: 0 1 auto; +} + +.options-container.open { + display: block; +} + +.options { + display: flex; + flex-direction: column; + max-height: 100%; + overflow: auto; +} + +.sub-options { + flex: 1; + display: flex; + padding: 15px 0 10px; + border-bottom: 1px solid #ddd; +} + +.sub-options:last-child { + border: 0; +} + +.sub-options > summary { + font-size: 14px; + font-weight: bold; + padding-bottom: 5px; + cursor: pointer; +} + +.sub-options > summary:focus { + outline: 0; +} + +.sub-options > * { + margin-left: 10px; +} + +label { + font-family: Consolas, Courier New, Courier, monospace; + margin: 10px 0; + display: block; +} + +input[type="number"] { + max-width: 40px; +} + +/* Copied from the GitHub button styling. */ +.btn { + box-sizing: content-box; + display: inline-block; + height: 18px; + padding: 0 5px; + border: 1px solid #d1d2d3; + border-radius: 0.25em; + background-image: linear-gradient(to bottom, #fafbfc, #e4ebf0); + font-size: 11px; + line-height: 18px; + font-weight: 600; + font-family: inherit; + color: #24292e; + text-decoration: none; + cursor: pointer; + outline: none; + position: relative; +} + +.btn:focus { + border-color: #c8e1ff; +} + +.btn:hover { + background-color: #e6ebf1; + background-image: linear-gradient(to bottom, #f0f3f6, #dce3ec); + border-color: #afb1b2; +} + +.btn:active { + background-color: #e9ecef; + background-image: none; + border-color: #afb1b2; + box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15); +} + +.tooltip { + position: absolute; + z-index: 1; + bottom: 100%; + left: 50%; + transform: translateX(-50%); + margin-top: 4px; + padding: 0.4em 0.8em; + background-color: #000; + color: #fff; + border-radius: 0.4em; + pointer-events: none; +} + +.tooltip::before { + content: ""; + position: absolute; + top: 100%; + left: 50%; + transform: translateX(-50%); + border: 6px solid transparent; + border-bottom: none; + border-top-color: #000; +} \ No newline at end of file