| /* Copyright 2015 The Vanadium Authors. All rights reserved. */ |
| /* Use of this source code is governed by a BSD-style */ |
| /* license that can be found in the LICENSE file. */ |
| |
| @import "./variables.css"; |
| @import "./reset.css"; |
| @import "./typography.css"; |
| @import "./icons.css"; |
| @import "./components/buttons.css"; |
| @import "./components/header.css"; |
| @import "./components/footer.css"; |
| |
| body, .playground { |
| display: flex; |
| min-height: 100vh; |
| flex-direction: column; |
| } |
| |
| main { |
| display: flex; |
| flex: 1; |
| } |
| |
| .bundle { |
| flex: 1; |
| display: flex; |
| flex-wrap: wrap; |
| align-content: center; |
| justify-content: center; |
| } |
| |
| .bundle .code, |
| .bundle .results { |
| flex: 1; |
| } |
| |
| .bundle .code { |
| display: flex; |
| flex-direction: column; |
| background-color: var(--grey-50); |
| } |
| |
| .bundle .tabs { |
| display: flex; |
| background-color: var(--cyan-700); |
| } |
| |
| .bundle .tabs .tab { |
| padding: calc(var(--gutter-half) - 2px) var(--gutter); |
| border-bottom: 4px solid transparent; |
| color: var(--white-54); |
| } |
| |
| .bundle .tabs .tab.active { |
| border-bottom-color: var(--deeporange-A200); |
| color: var(--white); |
| } |
| |
| .editors { |
| flex: 1; |
| display: flex; |
| position: relative; |
| } |
| |
| .editor { |
| flex: 1; |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| visibility: hidden; |
| } |
| |
| .editor.active { |
| visibility: visible; |
| } |
| |
| .ace_editor { |
| width: 100%; |
| height: 100%; |
| } |
| |
| .results { |
| display: flex; |
| flex-direction: column; |
| background-color: var(--grey-50); |
| } |
| |
| .results .controls { |
| background-color: var(--cyan-600); |
| padding: var(--gutter-half) var(--gutter); |
| color: var(--white); |
| } |
| |
| .results .controls a { |
| color: var(--blue-grey-700); |
| } |
| |
| .results .console { |
| flex: 1; |
| position: relative; |
| } |
| |
| .scroller { |
| position: absolute; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| left: 0; |
| overflow: auto; |
| padding: var(--gutter); |
| } |
| |
| .log { |
| margin-bottom: var(--gutter); |
| } |
| |
| .log .meta { |
| display: flex; |
| } |
| |
| .log .meta .source { |
| flex: 1; |
| font-weight: bold; |
| } |
| |
| .log .meta .source .stream { |
| font-weight: normal; |
| } |
| |
| .log .message { |
| font-family: "Source Code Pro", monospace; |
| padding-left: var(--gutter-half); |
| overflow: hidden; |
| overflow-y: scroll; |
| } |
| |
| .log .message pre { |
| padding: 0; |
| margin: 0; |
| white-space: pre-wrap; /* CSS 3 */ |
| white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ |
| white-space: -pre-wrap; /* Opera 4-6 */ |
| white-space: -o-pre-wrap; /* Opera 7 */ |
| word-wrap: break-word; |
| } |
| |
| .log.debug pre { |
| color: #00B9F7; |
| } |
| |
| .log.stdout { |
| |
| } |
| |
| .log.stderr pre { |
| color: #F03A76; |
| } |
| |
| .log.debug { |
| display: none; |
| } |
| |
| .console.debug .log.debug { |
| display: block; |
| } |