| /* File generated by SCSS from source swarm.scss | |
| * Do not edit. | |
| */ | |
| /****** @include ../../view/resources/view.css ******/ | |
| .hbox, .vbox { | |
| display: -moz-box; | |
| display: -webkit-box; | |
| -moz-box-align: stretch; | |
| -webkit-box-align: stretch; | |
| overflow: hidden; | |
| } | |
| .vbox { | |
| -moz-box-orient: vertical; | |
| -webkit-box-orient: vertical; | |
| } | |
| .hbox { | |
| -moz-box-orient: horizontal; | |
| -webkit-box-orient: horizontal; | |
| } | |
| .center { | |
| -moz-box-pack: center; | |
| -webkit-box-pack: center; | |
| } | |
| .paged-content, .fullpage { | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| top: 0; | |
| bottom: 0; | |
| overflow: hidden; | |
| } | |
| .flex-item { | |
| -webkit-box-flex: 1; | |
| -moz-box-flex: 1; | |
| box-flex: 1; | |
| } | |
| .flex { | |
| -moz-box-flex: 1; | |
| -webkit-box-flex: 1; | |
| } | |
| .conveyor-view, .conveyor-item { | |
| overflow: hidden; | |
| left: 0; | |
| right: 0; | |
| top: 0; | |
| bottom: 0; | |
| } | |
| .conveyor-view-container { | |
| overflow: visible; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .paged-column-container { | |
| overflow: visible; | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| top: 0; | |
| bottom: 0; | |
| } | |
| .paged-column { | |
| overflow: hidden; | |
| } | |
| .page-number-left, .page-number-label, .page-number-right { | |
| display: inline-block; | |
| } | |
| .page-number-left, .page-number-right { | |
| cursor: pointer; | |
| } | |
| .sm-item { | |
| font-size: 16px; | |
| text-transform: uppercase; | |
| text-align: center; | |
| color: #c8c8c8; | |
| padding-left: 20px; | |
| padding-right: 20px; | |
| } | |
| .sm-item-box { | |
| display: -moz-box; | |
| display: -webkit-box; | |
| padding-top: 5px; | |
| -moz-box-orient: horizontal; | |
| -webkit-box-orient: horizontal; | |
| -webkit-box-pack: center; | |
| } | |
| .sm-root { | |
| background-color: #191919; | |
| position: relative; | |
| z-index: 1; | |
| height: 32px; | |
| border-bottom: 3px solid #73c6f5; | |
| -webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, .6); | |
| -webkit-transition-property: -webkit-transform; | |
| -webkit-transition-duration: 0.4s; | |
| } | |
| .sm-root.hidden { | |
| -webkit-transform: translate3d(0px, -46px, 0px); | |
| } | |
| .sm-item.sel { | |
| color: #74c6f5; | |
| } | |
| .sm-slider-box { | |
| padding-bottom: 0; | |
| display: -moz-box; | |
| display: -webkit-box; | |
| -moz-box-orient: horizontal; | |
| -webkit-box-orient: horizontal; | |
| } | |
| .sm-triangle { | |
| border-color: transparent transparent #73c6f5 transparent; | |
| border-style: solid; | |
| border-width: 9px; | |
| margin-top: -9px; | |
| position: relative; | |
| top: 1px; | |
| } | |
| .invisible { | |
| opacity: 0; | |
| visibility: hidden; | |
| } | |
| /****** End of ../../view/resources/view.css ******/ | |
| /****** @include ../../touch/resources/touch.css ******/ | |
| .touch-scrollbar { | |
| position: absolute; | |
| background: rgba(127, 127, 127, 0.4); | |
| -webkit-transition: opacity 300ms; | |
| z-index: 1000; | |
| } | |
| .touch-scrollbar.drag, .touch-scrollbar:hover { | |
| background: rgba(127, 127, 127, 0.8); | |
| } | |
| .touch-scrollbar-vertical { | |
| height: 30px; | |
| width: 7px; | |
| right: 1px; | |
| } | |
| .touch-scrollbar-horizontal { | |
| width: 30px; | |
| height: 7px; | |
| bottom: 1px; | |
| } | |
| /****** End of ../../touch/resources/touch.css ******/ | |
| html { | |
| height: 100%; | |
| width: 100%; | |
| } | |
| body { | |
| background: #ffffff; | |
| 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; | |
| } | |
| 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: #ffffff; | |
| 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: #ffffff; | |
| 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; | |
| 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; | |
| 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; | |
| } | |
| .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; | |
| } | |
| .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; | |
| 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: #ffffff; | |
| box-shadow: -16px -16px 24px #ffffff; | |
| -webkit-box-shadow: -16px -16px 24px #ffffff; | |
| font-size: 16px; | |
| color: rgba(0, 0, 0, 0.5); | |
| text-align: center; | |
| -webkit-user-select: none; | |
| } | |
| .page-number-left, .page-number-right { | |
| min-width: 25px; | |
| font-size: 22px; | |
| font-weight: bold; | |
| } | |
| .page-number-label { | |
| min-width: 60px; | |
| } | |
| .story-content { | |
| -webkit-column-width: 300px; | |
| -webkit-column-gap: 26px; | |
| } | |
| .story-content img { | |
| max-width: 100% !important; | |
| max-height: 70% !important; | |
| 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; | |
| } | |
| .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(#f5f5f5), 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; | |
| } | |
| .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; | |
| } | |
| .button:active, .sm-item:active { | |
| opacity: 0.5; | |
| } | |
| .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: #ffffff; | |
| 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: #0; | |
| padding: 10px 0 0 0; | |
| } | |
| .done-button { | |
| float: right; | |
| } | |
| .hidden-story { | |
| -webkit-animation-timing-function: ease-in; | |
| opacity: 0; | |
| } | |
| .header-background { | |
| background: #0; | |
| 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; | |
| 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; | |
| 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))); | |
| } |