| /* 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"; |
| @import "./components/results.css"; |
| @import "./themes/light.css"; |
| |
| body, .playground { |
| display: flex; |
| min-height: 100vh; |
| flex-direction: column; |
| overflow: hidden; |
| } |
| |
| main { |
| display: flex; |
| flex: 1; |
| } |
| |
| .bundle { |
| flex: 1; |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: center; |
| position: relative; |
| } |
| |
| .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 .spacer { |
| flex: 1; |
| } |
| |
| .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); |
| } |
| |
| .bundle .tabs a.show-results { |
| inherit: .icon-base; |
| background-image: url(/icons/chevron-left.svg); |
| display: block; |
| margin: var(--gutter-half); |
| margin-right: var(--gutter); |
| } |
| |
| .editors { |
| flex: 1; |
| display: flex; |
| position: relative; |
| } |
| |
| .editor { |
| flex: 1; |
| position: absolute; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| display: none; |
| } |
| |
| .editor.active { |
| display: block; |
| } |
| |
| .ace_editor { |
| width: 100%; |
| height: 100%; |
| } |
| |
| .error { |
| margin: var(--gutter) auto; |
| padding: var(--gutter); |
| } |
| |
| .error .details { |
| border: 4px solid red; |
| } |
| |
| .error .details.hide { |
| border: 4px solid green; |
| } |
| |
| .loading { |
| margin: var(--gutter) auto; |
| } |