pbd-dist-one
Version:
Path ajdustments
696 lines (675 loc) • 20.4 kB
text/less
/* Copyright (C) Sourcemap 2011
* This program is free software: you can redistribute it and/or modify it under the terms
* of the GNU Affero General Public License as published by the Free Software Foundation,
* either version 3 of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
* without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
* See the GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License along with this
* program. If not, see <http://www.gnu.org/licenses/>.*/
@import "sourcemap";
/* Map styles -------------------------------------------------------------- */
#map-container{
width: 1040px;
margin: 0 auto;
padding: 4px;
background: #fefefe;
border: 1px solid #d4d4d4;
.rounded(12px);
.box_shadow(3px, 1px, 10px);
.map-status {
position:absolute;
top:70px;
right:20px;
height:40px;
width:400px;
text-align:right;
font-size:1em;
color:rgba(0,0,0,0.4);
pointer-events:none;
.msg{
padding-top:10px;
height:26px;
background: url("../images/throbber.gif") right center no-repeat transparent;
padding-right: 32px;
&.good-news {
background: none;
}
}
}
}
#map {
overflow:hidden;
#sourcemap-map-view {
position:relative;
border:4px solid #fff;
height:560px;
.rounded(8px);
overflow:hidden;
}
}
.olMap > div { z-index:0 ; }
/* Detail Pane ---------------------------------------------------------- */
#dialog {
position: absolute;
top: 72px;
right: 37px;
width: 411px;
max-height: 420px; width: 400px; /* Could set a height here for non-stretchy dialog */
display:none;
z-index: 1012;
padding: 5px 0 0 0;
border: 1px solid rgb(162,162,162);
background: rgba(255,255,255,0.85);
.box_shadow(3px, 1px, 10px);
.rounded(5px);
&.called-out {
background-color:#eee;
height:140px;
margin:auto; top:0; left:0; right:0; bottom:0;
}
#dialog-content {
overflow:hidden;
padding: 0 10px; margin: 0;
color: #888888;
h2.title {
position:relative;
font-size: 22px;
color: #454545;
margin-top:0;
padding: 5px 5px 0 10px;
padding-left:28px;
&.hop {
background:url("../images/chevron.png") 0 10px no-repeat;
padding-left:28px;
}
.dot {
height:12px;
width:12px;
.rounded(40px);
border:4px solid #fff;
position:absolute;
top:10px; left:0;
}
}
h3.placename {
font-style: italic;
font-size:14px;
font-weight: normal;
color: #888888;
font-style: italic;
margin-bottom: 10px;
}
div.description {
font-size:15px;
line-height:1.2em;
max-height:72px;
overflow:auto;
margin-bottom:5px;
}
a.url {
display:block;
text-align:center;
padding:10px;
cursor:pointer;
text-decoration: underline;
color: #2882B1;
}
.youtube:link, .vimeo:link { background: #444; }
.flickr:setid {
margin-top: 1em;
img {
height: 5em;
float: left;
margin: .5em;
}
}
iframe, object, div.media-object {
display:block;
margin: 0;
background:#444;
width: 360px;
height: 224px;
}
.flickr-slideshow-item {
display:block;
margin: 0;
background:#444;
width: 360px;
height: 224px;
position:relative;
overflow:hidden;
h4 {
z-index:10;
position:absolute;
top:0; left:0; right:0;
background:rgba(0,0,0,0.6);
padding:5px;
color:#fff;
}
img {
z-index:5;
position:absolute;
top:0; left:0; right:0;
}
}
ul#dialog-footprint {
height:45px;
padding:0; margin:0 -10px 0 -10px;
font-size: 14px;
font-weight: bold;
text-align:center;
color: @link-color;
list-style:none;
border-top: 1px solid rgb(206,206,206);
border-bottom: 1px solid rgb(206,206,206);
li {
float:left;
display:block;
padding: 15px 10px;
&.weight{padding-left: 40px; background: url(../images/dock-icon-mass.png) 10px 12px no-repeat;}
&.co2e{padding-left: 40px; background: url(../images/dock-icon-co2.png) 10px 12px no-repeat;}
&.water{padding-left: 40px; background: url(../images/dock-icon-h2o.png) 10px 12px no-repeat;}
&.distance{padding-left: 40px; background: url(../images/dock-icon-distance.png) 10px 12px no-repeat;}
}
}
#dialog-media {
position:relative;
width:360px;
min-height:220px;
background: rgb(200,200,200);
padding: 20px 20px 30px 20px;
margin-left:-10px;
.box_shadow_inset(0px,0px,8px,rgba(0,0,0,.2));
text-align:center;
border-bottom-left-radius:4px;
-moz-border-radius-bottomleft:4px;
-webkit-border-bottom-left-radius:4px;
border-bottom-right-radius:4px;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
iframe, object, embed, div.media-object {
position:absolute;
top:0; bottom:0; left:-1000px; right:0;
margin:auto;
}
iframe:first-child, object:first-child, embed:first-child, div.media-object:first-child {
top:0; left:0; right:0;
}
#dialog-media-navigation {
margin:0 auto;
position:absolute;
top:2px; left:0; right:0;
text-align:center;
text-align:center;
height:12px;
a.navigation-item {
text-decoration:none;
width:12px;
height:12px;
background:rgba(255,255,255,0.4);
.rounded(6px);
display: inline-block;
&.selected {
background:rgba(255,255,255,1);
}
}
}
}
div.close{
background: url("../images/close-grey.png") right center no-repeat;
height: 27px; width: 27px;
position: absolute;
top: 10px;
right: 9px;
a {
display: block;
width: 100%;
height: 100%;
cursor: pointer;
}
}
} /* close dialog content */
} /* close dialog */
.cluster {
max-height:420px;
overflow:auto;
.cluster-item {
position:relative;
border-bottom:1px solid #eee;
.dot {
height:12px;
width:12px;
.rounded(40px);
border:4px solid #fff;
position:absolute;
top:10px; left:0;
}
a {
padding-left:28px;
min-height:28px;
margin-bottom:6px;
display:block;
cursor:pointer;
h2 { font-size:1em; }
&:hover { color:#000; text-decoration:none; }
}
}
}
/* Dock -------------------------------------------------------------- */
#sourcemap-dock {
@dock-height: 3.25em;
z-index: 1008;
width: 100%;
bottom: 0; left: 0;
position: absolute;
height: @dock-height;
overflow: hidden;
text-align: center;
pointer-events: none;
.sourcemap-dock-outerwrap {
float: left;
position:relative;
left: 50%;
.sourcemap-dock-content {
float:left;
position: relative;
left: -50%;
.panel{
float: left;
margin: 0px 10px;
overflow:hidden;
color: #328cbb;
font-weight: bold;
font-size: 14px;
opacity: .9;
.gradient();
.rounded(12px);
.box_shadow(0,1px,6px);
.control{
border-right: 1px solid #c1c1c1;
display: inline-block;
cursor: pointer;
pointer-events: all;
text-align: center;
vertical-align:top;
padding: 14px;
img { height: @dock-height - 2em; }
.content {
height: @dock-height - 2em;
line-height: @dock-height - 2em;
}
&.zoomin{width: 29px; padding: 14px; background: url(../images/icon-zoomin.png) 15px 9px no-repeat;}
&.zoomout{width: 29px; padding: 14px; background: url(../images/icon-zoomout.png) 15px 9px no-repeat;}
&.fitscreen{width: 29px; padding: 14px; background: url(../images/icon-fitscreen.png) 15px 9px no-repeat;}
&.weight{padding-left: 30px; background: url(../images/dock-icon-mass.png) 10px 12px no-repeat;}
&.co2e{padding-left: 40px; background: url(../images/dock-icon-co2.png) 10px 12px no-repeat;}
&.water{padding-left: 40px; background: url(../images/dock-icon-h2o.png) 10px 12px no-repeat;}
&.addstop{padding-left: 40px; background: url(../images/dock-icon-addpoint.png) 10px 12px no-repeat;}
&.toggle { &.active { color: #333; background-color:rgba(200,200,200,0.85); } }
&:last-child{ border:none; }
}
}
}
}
}
/* Banner -------------------------------------------------------------- */
#banner {
position:absolute;
height: 42px; top:10px; left:10px; right:10px;
font-size:0.8em;
background-color: rgba(240,240,240,0.7);
background-image: -moz-linear-gradient(center bottom,rgba(255,255,255,0.5) 0%,rgba(240,240,240,0.7) 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0,rgba(240,240,240,0.5)),color-stop(1,rgba(255,255,255,0.5)));
.rounded(12px);
.box_shadow(0, 1px, 3px);
div#banner-content {
div { padding: 13px; }
#banner-summary {
color: #353535;
font-weight:bold;
font-size: 22px;
overflow:hidden;
}
#banner-favorite {
background: url(../images/icon-favorite.png) 10px -19px no-repeat;
border-left: 1px solid rgba(140,140,140,0.25);
padding-right: 20px;
&.marked {
background: url(../images/icon-favorite.png) 10px 11px no-repeat;
}
}
#banner-owner {
background: url(../images/icon-owner.png) 10px center no-repeat;
border-left: 1px solid rgba(140,140,140,0.25);
padding-left: 45px;
overflow:hidden;
}
#banner-share {
background: url(../images/icon-share.png) 10px center no-repeat;
border-left: 1px solid rgba(140,140,140,0.25);
}
#banner-owner, #banner-favorite, #banner-share {
padding-left: 40px;
float: right;
}
div {
float:left;
}
}
a{
color: #2882b1;
}
}
#watermark {
display:block;
width: 75px;
height: 25px;
background: url("../images/watermark.png") center center no-repeat;
text-align:center;
position:absolute;
bottom:1em; left:10px;
z-index:1010;
}
/* Editor -------------------------------------------------------------- */
#stop-editor,#hop-editor {
h2 input, h3 input {
font-family:inherit;
font-weight:inherit;
font-size:inherit;
color:inherit;
border:none;
padding:4px;
background:transparent;
outline:none;
}
h2.title {
input {
background:#fff;
.rounded(4px);
border: 1px solid #ccc;
color: #999999;
.box_shadow_inset(0, 3px, 12px, #eee);
width:310px;
}
}
h3.placename {
input {
background:#fff;
.rounded(4px);
width:330px;
border: 1px solid #ccc;
color: #999999;
.box_shadow_inset(0, 3px, 12px, #eee);
width:310px;
margin-left:28px;
}
}
#edit-description, #edit-stop-footprint, #edit-hop-footprint, #edit-media, #edit-catalog {
height:200px;
background: rgb(200,200,200);
padding: 10px 20px;
.box_shadow_inset(0px,0px,8px,rgba(0,0,0,.2));
overflow:auto;
}
#edit-description {
textarea {
height:175px;
width:320px;
.box_shadow_inset(0px,0px,4px,rgba(0,0,0,.2));
padding:10px;
font-size:inherit;
color:#999;
border:none;
}
}
#edit-stop-footprint, #edit-hop-footprint {
fieldset { padding:0; }
.footprint-section {
background:none;
float:left;
width:auto;
width:60px;
height:30px;
}
.footprint-math {
background:none;
float:left;
text-align:center;
width:auto;
font-size:1em;
padding:40px 5px 0 5px;
}
input { color:#999; }
select { height:34px; }
.selection { margin-left:5px; }
.footprint-unit { width:60px ; }
label { font-size:0.8em; }
select#transportation-type { margin-top:10px; }
div.disabled-unit {
padding-top:32px;
width:32px;
input {
font-size:inherit;
.box_shadow(0,0,0);
color:#ddd;
border:none;
background:none;
}
}
}
#edit-actions {
padding:0; margin:15px 0;
list-style:none;
li {
float:right;
cursor:pointer;
font-size:12px;
font-weight: bold;
padding: 5px 14px;
.gradient(#cfcfcf,#e6e6e6);
.rounded(4px);
.box_shadow();
cursor:pointer;
color:#f7f7f7 !important;
&.left { float:left; }
a{
padding-left: 25px;
background: url("../images/icon-delete.png") no-repeat;
color:#f7f7f7 ;
text-decoration: none;
}
}
.connect-button {
.gradient(#246587,#50a3ce);
float:left;
a { background: url("../images/icon-connect.png") no-repeat; }
}
.delete-button {
.gradient(#882b25,#cc4f4e);
a { background: url("../images/icon-delete.png") no-repeat; }
}
}
#impact-result{
border-top: 1px solid #999;
background: none;
text-align:center;
margin:20px 0 0 0;
padding: 20px 0;
font-size: 40px;
color: #999;
}
#edit-media {
fieldset {
margin-top:5px;
padding:0;
}
select#media-content-type {
float:left;
width:120px;
margin:0 10px 0 0;
height:29px;
}
input#media-content-value {
float:left;
width:190px;
}
.media-preview {
margin-top:10px;
width:200px;
overflow:hidden;
img {
width:100%;
.rounded(8px);
}
iframe{
width: 100%;
max-height: 150px;
}
p{
font-size:0.8em;
}
}
}
fieldset {
border:none;
label { }
}
.ui-tabs {
position: relative; padding: 0; zoom: 1;
}
.ui-tabs .ui-tabs-nav {
border-top: 1px solid rgb(206,206,206);
border-bottom: 1px solid rgb(206,206,206);
margin: 0; padding: 0;
}
.ui-tabs .ui-tabs-nav li {
list-style: none; float: left; position: relative;
top: 1px; margin: 0; border-bottom: 0 ;
padding: 5px 0; white-space: nowrap;
}
.ui-tabs .ui-tabs-nav li a {
float: left; padding: 0 1.2em; margin: 0.5em 0;
text-decoration: none; font-size:0.8em;
border-left: 1px dotted rgb(206,206,206); display:block;
}
.ui-tabs .ui-tabs-nav li:first-child a {
border:none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
margin-bottom: 0; padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a {
}
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; }
.ui-tabs .ui-tabs-panel {
display: block; border-width: 0; padding: 0; background: none; }
.ui-tabs .ui-tabs-hide { display: none ; }
.ui-state-active { text-decoration:underline; }
}
#newpoint-button {
text-align:center;
height:20px;
margin:20px 32px 10px 28px;
}
#catalog {
.catalog-content {
padding:0 ;
ul.catalog-items {
margin:0;
li.catalog-item {
font-size:0.8em;
cursor: pointer;
padding: 0.8em 0;
color:#777;
list-style:none;
display:block;
border-bottom:1px solid #999;
&:hover {
background:rgba(255,255,255,0.6);
color:#000;
}
.cat-item-name {
font-weight:bold;
float:left;
span.cat-value { font-weight:normal; }
}
.cat-item-footprints {
float:left;
.cat-item-co2e {
width:20px;
height:20px;
margin-right:5px;
float:left;
background: url(../images/dock-icon-co2.png) 0 0 no-repeat;
background-size: 100%;
}
.cat-item-energy {
width:40px; float:left; padding-top:30px;
background: url(../images/dock-icon-energy.png) 0 0 no-repeat;
background-size: 40%;
}
.cat-item-waste {
width:40px; float:left; padding-top:30px;
background: url(../images/dock-icon-waste.png) 0 0 no-repeat;
background-size: 40%;
}
.cat-item-water {
width:40px; float:left; padding-top:30px;
background: url(../images/dock-icon-h20.png) 0 0 no-repeat;
background-size: 40%;
}
}
}
}
}
#catalog-close {
color: #ccc;
cursor:pointer;
display:inline;
}
#catalog-search {
fieldset{
margin:0;
background: url(../images/shadow.png) top repeat-x;
border: 1px solid #c9c9c9;
.rounded;
input#catalog-search-field{
width: 300px;
padding: 10px 0 10px 36px;
border: 0;
outline: none;
background: url(../images/search.png) 12px center no-repeat;
-webkit-appearance: none;
}
}
}
.catalog-pager {
text-align:center;
font-size:0.8em;
margin:0.25em 0;
padding:0 0 0.5em 0 ;
.catalog-pager-prev, .catalog-pager-next {
padding:0.5em;
cursor:pointer;
}
}
}
/* Openlayers ------------------------------------------------- */
.olLayerGooglePoweredBy, .olLayerGoogleCopyright, .olControlAttribution {
z-index:1001 ;
bottom: 0;
float:left;
}
.olControlAttribution {
bottom:0 ;
left:10px ;
font-size:0.6em ;
color:#999;
a {
text-decoration:underline;
color:#999;
}
}