| /* 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. */ |
| |
| body { |
| margin: 0; |
| font-family: Arial, sans-serif; |
| } |
| |
| .add-bn { |
| border-radius: 24px; |
| box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28); |
| float: right; |
| width: 48px; |
| height: 48px; |
| cursor: pointer; |
| color: white; |
| background-color: #db4437; |
| text-align: center; |
| margin-top: 12px; |
| font-size: 27px; |
| font-weight: 100; |
| transform-origin: 100% 0; |
| transition: box-shadow .15s, transform .2s .1s; |
| } |
| |
| .collapsed .add-bn { |
| transform: scaleX(0); |
| transition: transform .2s .2s; |
| } |
| |
| .add-bn:hover { |
| box-shadow: 2px 4px 4px rgba(0,0,0,.14), 2px 8px 8px rgba(0,0,0,.28); |
| transition: box-shadow .15s; |
| } |
| |
| .add-bn.disabled { |
| transform: scaleY(0); |
| transition: transform .2s .1s; |
| /* Delay is just to style consistently with .add-bn transition so |
| * we don't have to create a dummy parent just for the different transition.*/ |
| } |
| |
| .clear-float { |
| clear: both; |
| } |
| |
| .destination { |
| position: relative; |
| width: 100%; |
| } |
| |
| .destination input { |
| width: 100%; |
| font-size: 15px; |
| padding: 8px 16px; |
| } |
| |
| .destination input { |
| display: initial; |
| } |
| |
| .destination input.autocomplete { |
| display: none; |
| } |
| |
| .destination.autocomplete input { |
| display: none; |
| } |
| |
| .destination.autocomplete input.autocomplete { |
| display: initial; |
| } |
| |
| .destination-info .title { |
| font-weight: 500; |
| font-size: 14px; |
| } |
| |
| .selected { |
| box-shadow: 0 0 8px #05f; |
| z-index: 1; |
| } |
| |
| .map-canvas { |
| height: 100%; |
| } |
| |
| .messages { |
| width: 30%; |
| border: 1px solid #aaa; |
| border-radius: 2px; |
| } |
| |
| .messages.headlines { |
| border: initial; |
| } |
| |
| .messages .handle { |
| background-color: rgba(192, 192, 192, .95); |
| border-bottom: 1px solid #aaa; |
| border-radius: 2px; |
| color: #444; |
| cursor: pointer; |
| text-align: center; |
| transition: background-color .2s, border-bottom .2s; |
| } |
| |
| .messages.headlines .handle { |
| background-color: rgba(255, 255, 255, .5); |
| border-bottom: initial; |
| transition: background-color .2s, border-bottom .2s; |
| } |
| |
| .handle:before { |
| content: "="; |
| font-stretch: expanded; |
| } |
| |
| .handle:after { |
| content: "="; |
| font-stretch: expanded; |
| } |
| |
| .messages ul { |
| background-color: rgba(255, 255, 255, .95); |
| list-style: none; |
| margin: 0; |
| max-height: 20em; |
| overflow: auto; |
| min-width: 10em; |
| padding: 0; |
| width: 100%; |
| } |
| |
| .messages.headlines ul { |
| background-color: initial; |
| max-height: initial; |
| } |
| |
| .messages li { |
| font-size: 10pt; |
| padding: 3px 3px 3px 1em; |
| text-indent: -.5em; |
| } |
| |
| .messages span { |
| text-indent: initial; |
| } |
| |
| .messages.headlines li { |
| background-color: rgba(0, 0, 0, .6); |
| border-radius: 4px; |
| color: white; |
| margin-top: 3px; |
| } |
| |
| .messages.headlines a { |
| background-color: rgba(255, 255, 255, .8); |
| border-radius: 2px; |
| display: inline-block; |
| padding: 1px 3px; |
| } |
| |
| .messages.headlines li.history { |
| display: none; |
| } |
| |
| .messages li:before { |
| font-weight: bold; |
| } |
| |
| .messages li.info:before { |
| content: "i "; |
| color: #77F; |
| } |
| |
| .messages li.error:before { |
| content: "x "; |
| color: red; |
| } |
| |
| .label { |
| color: blue; |
| margin-right: .4em; |
| } |
| |
| .messages.headlines .label { |
| background-color: rgba(255, 255, 255, .8); |
| border-radius: 3px; |
| padding: .1em .3em .1em .4em; |
| } |
| |
| .label:after { |
| content: ':' |
| } |
| |
| .label.no-timestamp.no-sender { |
| display: none; |
| } |
| |
| .username { |
| font-weight: bold; |
| } |
| |
| .timestamp:before { |
| content: ' ('; |
| } |
| |
| .timestamp:after { |
| content: ')'; |
| } |
| |
| .no-sender .timestamp:before { |
| content: initial; |
| } |
| |
| .no-sender .timestamp:after { |
| content: initial; |
| } |
| |
| .send { |
| background-color: silver; |
| } |
| |
| .send div { |
| overflow: hidden; |
| } |
| |
| .send input { |
| width: 100%; |
| } |
| |
| .messages.headlines .send { |
| display: none; |
| } |
| |
| .send .label { |
| background-color: initial; |
| float: left; |
| margin: .4em .5em .1em .5em; |
| } |
| |
| .mini-search { |
| overflow: hidden; |
| vertical-align: middle; |
| transform-origin: 0 0; |
| transition: transform .5s; |
| } |
| |
| .mini-search.collapsed { |
| transform: translateX(-200%); |
| /* keep this in sync with js search disable delay */ |
| transition: transform .5s; |
| } |
| |
| .mini-search > * { |
| display: inline-block; |
| margin-left: 1em; |
| } |
| |
| .mini-search .add-bn { |
| float: none; |
| margin-bottom: 12px; |
| transform-origin: 0 0; |
| } |
| |
| .mini-search.collapsed .add-bn { |
| transform: initial; |
| } |
| |
| .mini-search .destination { |
| width: 32em; |
| } |
| |
| .no-select { |
| -webkit-touch-callout: none; |
| -webkit-user-select: none; |
| -khtml-user-select: none; |
| -moz-user-select: none; |
| -ms-user-select: none; |
| user-select: none; |
| } |
| |
| .timeline { |
| padding: 1em; |
| margin: 0; |
| } |
| |
| .timeline-container { |
| box-shadow: inset -7px 0 7px -7px gray; |
| float: left; |
| height: 100%; |
| overflow-y: auto; |
| width: 25em; |
| transition: width .5s; |
| } |
| |
| .timeline-container.collapsed { |
| overflow: hidden; |
| width: 0; |
| transition: width .5s; |
| } |
| |
| .toggle-timeline { |
| background-color: #f0f0f0; |
| border-radius: 4px 4px 0 0; |
| box-shadow: 0 0 4px gray; |
| cursor: pointer; |
| letter-spacing: .5px; |
| padding: 4px 1em; |
| transform: rotate(90deg) translateY(-50%); |
| transform-origin: 0 50%; |
| } |
| |
| .toggle-timeline:after { |
| content: '▼'; |
| font-size: 6pt; |
| padding-left: 1em; |
| } |
| |
| .toggle-timeline.collapsed { |
| background-color: white; |
| } |
| |
| .toggle-timeline.collapsed:after { |
| content: '▲'; |
| } |
| |
| .vertical-middle { |
| position: relative; |
| top: 50%; |
| transform: translateY(-50%); |
| } |