Index: client/samples/swarm/swarm.scss |
=================================================================== |
--- client/samples/swarm/swarm.scss (revision 3770) |
+++ client/samples/swarm/swarm.scss (working copy) |
@@ -1,852 +0,0 @@ |
-/* Copyright (c) 2011, the Dart project authors. Please see the AUTHORS file */ |
-/* for details. All rights reserved. Use of this source code is governed by a */ |
-/* BSD-style license that can be found in the LICENSE file. */ |
- |
-@include "../../view/resources/view.css" |
- |
-@include "../../touch/resources/touch.css" |
- |
-html { |
- height: 100%; |
- width: 100%; |
-} |
- |
-body { |
- background: white; |
- font-weight: normal; |
- font-family: arial,sans-serif; |
- font-size: 13px; |
- margin: 0 0 0 0; |
- height: 100%; |
- width: 100%; |
- color: #222; |
- overflow: hidden; |
- -webkit-tap-highlight-color: rgba(0,0,0,0); |
-} |
- |
-h1 { |
- font-family: arial,sans-serif; |
- font-size: 36px; |
- color: #72c3f2; |
- text-align: center; |
- margin-bottom: 0; |
-} |
- |
-h2 { |
- font-size: 16px; |
- font-weight: normal; |
- text-overflow: ellipsis; |
- text-wrap: none; |
- white-space: nowrap; |
-} |
- |
-button { |
- vertical-align: top; |
-} |
- |
-/* Remove the blue outer glow from focused divs. */ |
-div { |
- outline: none; |
-} |
- |
-input { |
- resize: none; |
- border: inset #aaa 1px; |
- margin: 2px; |
- padding: 1px 2px 2px 2px; |
- overflow: hidden; |
- white-space: nowrap; |
-} |
- |
-.sm-root.hidden { |
- -webkit-transform: translate3d(0, 40px, 0); |
-} |
- |
-input:focus { |
- border: solid #88f 2px; |
- outline: none; |
- margin: 1px; |
-} |
- |
-.front-view { |
- background: white; |
- overflow: hidden; |
-} |
- |
-.bottom-view { |
- position: absolute; |
- left: 0; |
- top: 51px; |
- bottom: 0; |
-} |
- |
-.top-view { |
- position: absolute; |
- left: 0; |
- right: 0; |
- z-index: 30; |
- overflow: hidden; |
- -webkit-transition-duration: 0.45s; |
-} |
- |
-.query { |
- position: absolute; |
- -webkit-transition-duration: 0.45s; |
- top: 0; |
- width: 257px; |
- bottom: 0; |
- background: white; |
- border-left: 1px solid #F5F5F5; |
- border-right: 1px solid #F5F5F5; |
-} |
- |
-.query.sel { |
- z-index: 29 !important; |
- border-left: 1px solid #D2D2D2; |
- border-right: 1px solid #D2D2D2; |
- visibility: visible !important; |
- opacity: 1 !important; |
-} |
- |
-.query h2 { |
- color: #1155CC; |
- padding: 20px 16px 16px 16px; |
- left: 0; |
- right: 0; |
- overflow: hidden; |
- text-overflow: ellipsis; |
- margin: 0; |
- box-sizing: border-box; |
- ms-box-sizing: border-box; |
- -webkit-box-sizing: border-box; |
- z-index: 10; |
- position: absolute; |
- font: bold 14px Arial, sans-serif; |
-} |
- |
-.query-name-shadow { |
- position: absolute; |
- left: 0; |
- right: 0; |
- height: 15px; |
- top: 39px; |
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,0)), to(rgba(255,255,255, 1))); |
- overflow: hidden; |
- z-index: 3; |
-} |
- |
-.section-view { |
- -webkit-transition-property: -webkit-transform, opacity; |
- -webkit-transition-duration: 0.45s; |
- opacity: 0.6; |
- position: absolute; |
- left: 0; |
- right: 0; |
- top: 51px; |
- bottom: 0; |
- overflow: hidden; |
-} |
- |
-.loading-section { |
- position: absolute; |
- left: 0; |
- right: 0; |
- top: 0; |
- bottom: 0; |
-} |
- |
-.touch-scrollbar { |
- position: absolute; |
- background: #888; |
- opacity: 0.4; |
- -webkit-transition-property: opacity; |
- -webkit-transition-duration: 0.3s; |
- z-index: 1000; |
-} |
- |
-.touch-scrollbar.drag, |
-.touch-scrollbar:hover { |
- opacity: 0.8; |
-} |
- |
-.story-section { |
- margin-left: 0; |
- margin-right: 0; |
- left: 0; |
- right: 0; |
- top: 39px; |
- bottom: 0; |
- overflow: hidden; |
- position: absolute; |
-} |
- |
-.story { |
- position: absolute; |
- left: 0; |
- right: 0; |
- box-sizing: border-box; |
- ms-box-sizing: border-box; |
- -webkit-box-sizing: border-box; |
- margin: 0; |
- border: 1px solid #F5F5F5; |
- line-height: 18px; |
- /* This is needed when there is no caption. Since the other elements are |
- absolutely positioned, the story will collapse to nothing without this. */ |
- min-height: 92px; |
-} |
- |
-.story:active, |
-.story.sel { |
- box-shadow:inset 4px 0 4px -2px #4d90f0; |
- -webkit-box-shadow:inset 4px 0 4px -2px #4d90f0; |
-} |
- |
-.story img { |
- position: absolute; |
- width: 57px; |
- height: 57px; |
- z-index: 20; |
- -webkit-transition-property: opacity; |
- -webkit-transition-duration: 0.45s; |
- |
- opacity: 0.6; |
-} |
- |
-.snippet, |
-.story .title { |
- white-space: nowrap; |
- text-overflow: ellipsis; |
- overflow: hidden; |
-} |
- |
-.snippet { |
- margin-top: -5px; |
- font: normal 13px arial,sans-serif; |
- line-height: 18px; |
- opacity: 0.6; |
-} |
- |
-.story .title { |
- font-weight: bold; |
- margin-left: 75px; |
- line-height: 18px; |
- /* TODO(rnystrom): The following prevents it from running over the byline, but |
- it cuts off part of the title if it's longer than two lines. */ |
- height: 38px; |
- opacity: 0.6; |
-} |
- |
-.story.no-thumb .title, |
-.story.no-thumb .byline { |
- left: 16px; |
-} |
- |
-.story-shadow { |
- position: absolute; |
- left: 2px; |
- right: 2px; |
- height: 31px; |
- top: -32px; |
- overflow: hidden; |
- z-index: 2; |
-} |
- |
-.story .byline, |
-.story .dateline { |
- color: #999; |
- font-size: 12px; |
- line-height: 18px; |
-} |
- |
-.story .dateline { |
- position: relative; |
- top: -18px; |
-} |
- |
-/* TODO(jacobr): handle intersection with byline better... */ |
-.story .dateline { |
- text-align: right; |
- opacity: 0.6; |
- line-height: 18px; |
-} |
- |
-.story .byline { |
- margin-left: 75px; |
- text-overflow: ellipsis; |
- white-space: nowrap; |
- opacity: 0.6; |
- display: inline-box; |
-} |
- |
-/* TODO(jacobr): this is backwards. we should have a read classname instead */ |
-.story.story-unread .dateline, |
-.story.story-unread .text, |
-.story.story-unread .title, |
-.story.story-unread .byline, |
-.story.story-unread img, |
-.story.story-unread .caption { |
- opacity: 1; |
-} |
- |
-.story .text { |
- top: 3px; |
- height: 90px; |
- opacity: 0.6; |
-} |
- |
-.story { |
- position: absolute; |
- left: 0; |
- right: 0; |
- padding: 16px; |
- overflow: hidden; |
-} |
- |
-.story-view { |
- position: absolute; |
- left: 260px; |
- right: 0; |
- top: 51px; |
- bottom: 0; |
- line-height: 18px; |
- overflow: hidden; |
- |
- -webkit-animation-timing-function: ease-in; |
- -webkit-transition-duration: 0.45s; |
- -webkit-text-size-adjust: none; |
-} |
- |
-.paged-column { |
- position: absolute; |
- top: 100px; |
- left: 20px; |
- bottom: 45px; /* so it doesn't overlap with the page-number */ |
- right: 20px; |
-} |
- |
-.page-number { |
- position: absolute; |
- z-index: 1; |
- right: -40px; |
- bottom: -40px; |
- padding-left: 0px; |
- padding-top: 0px; |
- padding-right: 50px; |
- padding-bottom: 50px; |
- background: white; |
- box-shadow: -16px -16px 24px white; |
- -webkit-box-shadow: -16px -16px 24px white; |
- font-size: 16px; |
- color: rgba(0, 0, 0, 0.5); |
- text-align: center; |
- /* prevent accidental text selection if user clicks fast */ |
- -webkit-user-select: none; |
-} |
- |
-.page-number-left, .page-number-right { |
- min-width: 25px; /* for bigger click area */ |
- font-size: 22px; |
- font-weight: bold; |
-} |
- |
-.page-number-label { |
- min-width: 60px; |
-} |
- |
-.story-content { |
- -webkit-column-width: 300px; |
- -webkit-column-gap: 26px; /* 2em */ |
-} |
- |
-/* |
- * Styles to get the right look for images in the column layout. |
- * |
- * These are set to "!important" to replace any styles in the HTML. |
- * TODO(jmesserly): ideally the server would strip style="" from img tags, then |
- * we wouldn't need the !important. |
- */ |
-.story-content img { |
- /* Set maximum width so the image shrinks to fit the column. */ |
- max-width: 100% !important; |
- /* |
- * Set maximum height so the image wont't wrap between columns. |
- * TODO(jmesserly): figure out why we can't use 100% here; it seems like |
- * 100% is being interpreted as bigger than the column height. |
- */ |
- max-height: 70% !important; |
- |
- /* Set width and height to auto to preserve aspect ratio. */ |
- width: auto !important; |
- height: auto !important; |
-} |
- |
-.story-content a { |
- color: #15C; |
-} |
- |
-.story-content a:visited { |
- color: #61c; |
-} |
- |
-.story-image { |
- margin: 10px; |
- width: 200px; |
-} |
- |
-.story-text-view { |
- padding: 20px; |
- left: 0; |
- right: 0; |
- top: 0; |
- bottom: 0; |
- position: absolute; |
- overflow: hidden; |
-} |
- |
-.story-text-view { |
- box-sizing: border-box; |
- ms-box-sizing: border-box; |
- -webkit-box-sizing: border-box; |
- -moz-box-sizing: border-box; |
- } |
- |
-.story-text-view .story-header { |
- margin-bottom: 10px; |
- padding-bottom: 2px; |
- border-bottom: 1px solid #d2d2d2; |
- font-weight: bold; |
-} |
- |
-.story-text-view .story-header .story-title { |
- font-weight: bold; |
- color: #15C; |
- font-size: 18px; |
- margin-bottom: 5px; |
- text-overflow: ellipsis; |
- text-wrap: none; |
- white-space: nowrap; |
- width: 100%; |
- display: block; |
- overflow: hidden; |
-} |
- |
-.story-title:link, .story-title:visited { |
- text-decoration: none; |
-} |
- |
-.story-title:hover { |
- text-decoration: underline; |
-} |
- |
-.story-text-view .story-header .story-byline { |
- font-weight: bold; |
- color: #333; |
- font-size: 15px; |
- padding-top: 3px; |
- padding-bottom: 3px; |
- text-overflow: ellipsis; |
- text-wrap: none; |
- white-space: nowrap; |
-} |
- |
-.story-text-view .story-header .story-dateline { |
- font-weight: normal; |
- color: #999; |
- font-size: 12px; |
- padding-top: 3px; |
- padding-bottom: 3px; |
- text-overflow: ellipsis; |
- text-wrap: none; |
- white-space: nowrap; |
-} |
- |
-.header-view { |
- height: 54px; |
- z-index: 2; |
- overflow: hidden; |
- position: relative; |
- background-color: #F5F5F5; |
- border-bottom: 1px solid #d2d2d2; |
-} |
- |
-.app-title { |
- font-size: 20px; |
- color: #484848; |
- padding-left: 22px; |
- padding-top: 0; |
- padding-bottom: 10px; |
- position: absolute; |
- left: 0; |
- top: 17px; |
- cursor: pointer; |
- |
- -webkit-transition-property: left; |
- -webkit-transition-duration: 0.45s; |
-} |
- |
-.app-title.in-story { |
- left: 50px; |
-} |
- |
-/* The arrow that is used as a back button on the story page. */ |
-.back-arrow { |
- background-image: url('back-21.png'); |
- width: 10px; |
- height: 15px; |
- margin: 10px 15px; |
- position: absolute; |
- left: -100px; |
- |
- -webkit-transition-property: left; |
- -webkit-transition-duration: 0.45s; |
-} |
- |
-.back-arrow.in-story { |
- left: 0; |
-} |
- |
-.config { |
- background-image: url('settings-21.png'); |
- position: absolute; |
- right: 120px; |
- |
- -webkit-transition-property: right; |
- -webkit-transition-duration: 0.45s; |
-} |
- |
-.config.in-story { |
- right: -60px; |
-} |
- |
-.refresh { |
- background-image: url('refresh-21.png'); |
- right: 60px; |
- position: absolute; |
- |
- -webkit-transition-property: right; |
- -webkit-transition-duration: 0.45s; |
-} |
- |
-.refresh.in-story { |
- right: -160px; |
-} |
- |
-#dart-logo { |
- height: 21px; |
- padding-left: 25px; |
- background: url('Dart_Logo_21.png') no-repeat; |
-} |
- |
-.info-button { |
- background: url('info.svg'); |
- background-size: 55%; |
- margin: 13px; |
- position: absolute; |
- right: 0; |
- |
- -webkit-transition-property: right; |
- -webkit-transition-duration: 0.45s; |
-} |
- |
-.info-button.in-story { |
- right: -260px; |
-} |
- |
-.new-window-button { |
- background-image: url('externallink.svg'); |
- background-size: 100% 100%; |
- width: 24px; |
- height: 24px; |
- top: 43px; |
- right: 220px; |
- position: absolute; |
-} |
- |
-.web-back-button, |
-.web-forward-button { |
- width: 24px; |
- height: 24px; |
- top: 43px; |
- position: absolute; |
-} |
- |
-.web-back-button { |
- background-image: url('lefttriangle.svg'); |
- right: 302px; |
-} |
- |
-.web-forward-button { |
- background-image: url('righttriangle.svg'); |
- right: 260px; |
-} |
- |
-.web-view-button, .text-view-button { |
- width: 80px; |
- height: 24px; |
- top: 45px; |
- border: solid 1px #D9D9D9; |
- background: -webkit-gradient(linear,left top,left bottom,from(whiteSmoke),to(#F1F1F1)); |
- font-size: 13px; |
- position: absolute; |
- text-align: center; |
-} |
- |
-.web-view-button { |
- right: 40px; |
-} |
- |
-.text-view-button { |
- right: 120px; |
-} |
- |
-.web-view-button.active, .text-view-button.active { |
- background: -webkit-gradient(linear,left top,left bottom,from(#EEE),to(#E0E0E0)); |
- border-color: #BBB; |
- box-shadow: inset 0 1px 5px #ccc; |
- -moz-box-shadow: inset 0 1px 5px #ccc; |
- -webkit-box-shadow: inset 0 1px 5px #ccc; |
-} |
- |
-/* TODO(eub): refactor this to apply to all standard buttons? */ |
-.config, |
-.refresh, |
-.info-button, |
-.back-arrow { |
- opacity: 0.5; |
- border: 1px solid #C8C8C8; |
- color: #444; |
- border-radius: 2px; |
- width: 47px; |
- height: 29px; |
- margin: 12px; |
- background-position: center; |
- background-repeat: no-repeat; |
-} |
- |
-.config:hover, |
-.refresh:hover, |
-.info-button:hover, |
-.back-arrow:hover { |
- opacity: 1; |
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); |
- -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); |
-} |
- |
-button, |
-.button, |
-.sm-item { |
- cursor: pointer; |
-} |
- |
-.sm-root { |
- border-bottom: none; |
- background-color: transparent; |
- -webkit-box-shadow: none; |
- height: 44px; |
- overflow: hidden; |
- position: absolute; |
- top: 16px; |
- left: 120px; |
- z-index: 3; |
-} |
- |
-.data-source-view { |
- left: 0; |
- right: 0; |
- top: 0; |
- bottom: 0; |
- position: absolute; |
-} |
- |
-.data-source-view > div { |
- height: 100%; |
- position: relative; |
-} |
- |
-.sm-item-box { |
- -webkit-box-pack: start; |
-} |
- |
-.sm-triangle { |
- width: 22px; |
- border: none; |
- top: 14px; |
- height: 15px; |
- background-image: url('sliderarrow.svg'); |
-} |
- |
-.sm-item.sel { |
- color: #d14836; |
-} |
- |
-.sm-item { |
- font: 16px arial,sans-serif; |
- text-transform: none; |
- color: #484848; |
-} |
- |
-/* TODO(eub): Kennedy GMail button:active is actually a blue outline, |
- of all things. */ |
-.button:active, |
-.sm-item:active { |
- opacity: 0.5; |
-} |
- |
-/* dialog view */ |
- |
-.dialog-modal { |
- width: 100%; |
- height: 100%; |
- display: -webkit-box; |
- -webkit-box-align: center; |
- -webkit-box-pack: center; |
- background-color: rgba(200, 200, 200, 0.6); |
- z-index: 40; |
- position: absolute; |
-} |
- |
-.dialog { |
- border: 1px solid #CCC; |
- width: 250px; |
- padding: 20px; |
- background-color: white; |
- box-shadow: -1px 3px 3px rgba(0, 0, 0, 0.1); |
- -webkit-box-shadow: -1px 3px 3px rgba(0, 0, 0, 0.1); |
-} |
- |
-.dialog-title-area { |
- font-size: 19px; |
- padding: 0 0 10px 0; |
-} |
- |
-.dialog-title { |
- vertical-align: middle; |
-} |
- |
-.dialog-body { |
- color: black; |
- padding: 10px 0 0 0; |
-} |
- |
-/* TODO(terry): Better than floats for this simple dialog? */ |
-.done-button { |
- float: right; |
-} |
- |
-.hidden-story { |
- -webkit-animation-timing-function: ease-in; |
- opacity: 0; |
-} |
- |
-.header-background { |
- background: black; |
- width: 100%; |
-} |
- |
-#appSplash .header { |
- height: 54px; |
- z-index: 2; |
- overflow: hidden; |
- position: relative; |
- background-color: #F5F5F5; |
- border-bottom: 1px solid #d2d2d2; |
-} |
- |
-#appSplash .title { |
- font-size: 20px; |
- color: #484848; |
- padding-left: 22px; |
- padding-top: 0; |
- padding-bottom: 10px; |
- position: absolute; |
- left: 0; |
- top: 15px; |
-} |
- |
-#appSplash .splash { |
- font-size: 24px; |
- position: absolute; |
- top: 173px; |
- bottom: 0; |
- left: 0; |
- right: 0; |
- text-align: center; |
-} |
- |
-#appSplash .footer { |
- font-size: 10px; |
- color: rgba(0, 0, 0, 0.6); |
- position: absolute; |
- left: 5px; |
- bottom: 5px; |
-} |
- |
-#appSplash .footer A:link,A:visited { |
- text-decoration: none; |
- color: rgba(0, 0, 0, 0.6); |
-} |
- |
-#appSplash .footer A:hover { |
- text-decoration: underline; |
- color: rgba(0, 0, 0, 0.6); |
-} |
- |
-#appSplash { |
- position: absolute; |
- left: 0; |
- right: 0; |
- top: 0; |
- bottom: 0; |
- /* Put in front of UI. UI will load behind it then remove this to avoid |
- a visible flicker. */ |
- z-index: 50; |
- background: #fff; |
-} |
- |
-@-webkit-keyframes pulsate { |
-0% { |
- -webkit-transform: translate3d(0, 0, 0) scale(1.0); |
-} |
-50% { |
- -webkit-transform: scale(1.5) translate3d(0, 20px, 0); |
- } |
-100% { |
- -webkit-transform: translate3d(0, 0, 0) translate3d(0, 0, 0); |
- } |
-} |
- |
-#appSplash .splashImg { |
- position: absolute; |
- left: 140px; |
- /* We put the image on a div instead of just using an img so that the image |
- URL can live in the CSS, where update.py knows to find it. */ |
- width: 640px; |
- height: 480px; |
- background-image: url('pigeons-jumpinjimmyjava-white90pct-q70.jpg'); |
- |
- -webkit-animation-name: pulsate; |
- -webkit-animation-iteration-count: infinite; |
- -webkit-animation-timing-function: ease-in-out; |
- -webkit-animation-duration: 5s; |
-} |
- |
-.section-view.hide-all-queries .data-source-view .query, |
-.section-view.hide-all-queries .page-number { |
- opacity: 0; |
-} |
- |
-.transparent { |
- opacity: 0; |
-} |
- |
-.query { |
- width: 297px; |
-} |
- |
-.story-view { |
- left: 300px; |
-} |
- |
-.story-shadow { |
- background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0)), to(rgba(255,255,255, 1)), color-stop(0.7, rgba(255,255,255, 1))); |
-} |