606 lines
10 KiB
CSS
606 lines
10 KiB
CSS
/*
|
|
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
|
|
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 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, write to the Free Software
|
|
Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
|
|
or see http://www.gnu.org/licenses/agpl.txt.
|
|
*/
|
|
|
|
/* OSRM CSS styles */
|
|
|
|
/* ------------------------------------------------------------------------ */
|
|
|
|
/* fullscreen map */
|
|
html, body {
|
|
padding: 0;
|
|
margin: 0;
|
|
height: 100%;
|
|
overflow:hidden;
|
|
}
|
|
#map {
|
|
height: 100%;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------------ */
|
|
|
|
/* general styles for gui boxes */
|
|
.box-wrapper
|
|
{
|
|
position:absolute;
|
|
border-radius:10px;
|
|
-moz-border-radius:10px;
|
|
-webkit-border-radius:10px;
|
|
background-color:#666666;
|
|
background-color:rgba(0, 0, 0, 0.25);
|
|
}
|
|
.box-animated
|
|
{
|
|
transition:left 1s, right 1s;
|
|
-moz-transition:left 1s,right 1s;
|
|
-webkit-transition:left 1s,right 1s;
|
|
-o-transition:left 1s,right 1s;
|
|
-ms-transition:left 1s,right 1s;
|
|
}
|
|
.box-content
|
|
{
|
|
position:absolute;
|
|
background-color:#ffffff;
|
|
background-color:rgba(255,255,255,1);
|
|
border-radius:10px;
|
|
-moz-border-radius:10px;
|
|
-webkit-border-radius:10px;
|
|
margin:5px;
|
|
padding:5px;
|
|
}
|
|
.box-handle-wrapper-right
|
|
{
|
|
width:36px;
|
|
height:36px;
|
|
border-top-right-radius:0px;
|
|
border-bottom-right-radius:0px;
|
|
-moz-border-radius-topright:0px;
|
|
-moz-border-radius-bottomright:0px;
|
|
-webkit-border-top-right-radius:0px;
|
|
-webkit-border-bottom-right-radius:0px;
|
|
}
|
|
.box-handle-content-right
|
|
{
|
|
width:16px;
|
|
height:16px;
|
|
border-top-right-radius:0px;
|
|
border-bottom-right-radius:0px;
|
|
-moz-border-radius-topright:0px;
|
|
-moz-border-radius-bottomright:0px;
|
|
-webkit-border-top-right-radius:0px;
|
|
-webkit-border-bottom-right-radius:0px;
|
|
}
|
|
.box-handle-wrapper-left
|
|
{
|
|
width:36px;
|
|
height:36px;
|
|
border-top-left-radius:0px;
|
|
border-bottom-left-radius:0px;
|
|
-moz-border-radius-topleft:0px;
|
|
-moz-border-radius-bottomleft:0px;
|
|
-webkit-border-top-left-radius:0px;
|
|
-webkit-border-bottom-left-radius:0px;
|
|
}
|
|
.box-handle-content-left
|
|
{
|
|
width:16px;
|
|
height:16px;
|
|
border-top-left-radius:0px;
|
|
border-bottom-left-radius:0px;
|
|
-moz-border-radius-topleft:0px;
|
|
-moz-border-radius-bottomleft:0px;
|
|
-webkit-border-top-left-radius:0px;
|
|
-webkit-border-bottom-left-radius:0px;
|
|
}
|
|
|
|
|
|
/* general styles for gui box headers */
|
|
.top-left-button
|
|
{
|
|
float:left;
|
|
vertical-align:top;
|
|
}
|
|
.top-right-button
|
|
{
|
|
float:right;
|
|
vertical-align:top;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------------ */
|
|
|
|
/* styles for main gui boxes */
|
|
#main-wrapper
|
|
{
|
|
width:410px;
|
|
top:5px;
|
|
bottom:25px;
|
|
left:5px;
|
|
}
|
|
#main-input
|
|
{
|
|
width:390px;
|
|
height:140px;
|
|
}
|
|
#main-output
|
|
{
|
|
width:390px;
|
|
top:160px; /* main-input.height+2*gui-box.margin+2*gui-box.padding */
|
|
bottom:0px;
|
|
}
|
|
|
|
|
|
/* styles for main-input areas */
|
|
#input-mask-header
|
|
{
|
|
left:0px;
|
|
right:0px;
|
|
top:0px;
|
|
height:50px;
|
|
background-repeat:no-repeat;
|
|
background-position:center;
|
|
}
|
|
#input-mask
|
|
{
|
|
margin:3px;
|
|
}
|
|
#input-mask-options
|
|
{
|
|
margin:3px;
|
|
}
|
|
|
|
|
|
/* styles for main-input input-mask-header */
|
|
#gui-language-toggle
|
|
{
|
|
position:absolute;
|
|
}
|
|
|
|
|
|
/* styles for main-input input-mask */
|
|
.input-marker
|
|
{
|
|
display:table-row;
|
|
}
|
|
.input-marker > div
|
|
{
|
|
padding-bottom:4px;
|
|
}
|
|
.input-label
|
|
{
|
|
margin:0px 2px 0px 0px;
|
|
}
|
|
.input-delete
|
|
{
|
|
margin:0px 15px 0px 8px;
|
|
visibility:hidden;
|
|
}
|
|
.input-box
|
|
{
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
/* styles for main-input input-mask-options */
|
|
#gui-options-toggle
|
|
{
|
|
cursor:pointer;
|
|
color:#0000ff
|
|
}
|
|
#gui-options-toggle:hover
|
|
{
|
|
color:#ff0000
|
|
}
|
|
#options-box
|
|
{
|
|
visibility:hidden;
|
|
}
|
|
|
|
|
|
/* styles for main-output areas */
|
|
#information-box-header
|
|
{
|
|
margin:5px;
|
|
height:60px;
|
|
}
|
|
#information-box
|
|
{
|
|
position:absolute;
|
|
bottom:20px;
|
|
top:65px;
|
|
width:380px;
|
|
overflow:auto;
|
|
margin:5px;
|
|
}
|
|
#legal-notice
|
|
{
|
|
position:absolute;
|
|
right:0px;
|
|
bottom:0px;
|
|
margin:5px;
|
|
}
|
|
|
|
|
|
/* styles for main-output information-box-header */
|
|
.header-title
|
|
{
|
|
font-weight:bold;
|
|
margin-bottom:10px;
|
|
}
|
|
.header-label
|
|
{
|
|
font-weight:normal;
|
|
padding:0px 5px 0px 0px;
|
|
}
|
|
.header-content
|
|
{
|
|
font-weight:normal;
|
|
}
|
|
.route-link
|
|
{
|
|
color:#0000ff;
|
|
text-decoration:none;
|
|
cursor:pointer;
|
|
}
|
|
.route-link:hover
|
|
{
|
|
color:#ff0000;
|
|
}
|
|
|
|
|
|
/* styles for main-output information-box -> workaround for invisible scrollbars in Chrome */
|
|
#information-box::-webkit-scrollbar {
|
|
height: 10px;
|
|
width: 10px;
|
|
}
|
|
#information-box::-webkit-scrollbar-track {
|
|
background: #FFFFFF;
|
|
}
|
|
#information-box::-webkit-scrollbar-thumb {
|
|
min-height: 30px;
|
|
background: #EEEEEE;
|
|
border: 1px solid #999999;
|
|
-webkit-border-radius: 5ex;
|
|
}
|
|
#information-box::-webkit-scrollbar-thumb:hover {
|
|
background: #F9F9F9;
|
|
}
|
|
#information-box::-webkit-scrollbar-thumb:active {
|
|
background: #F4F4F4;
|
|
}
|
|
|
|
|
|
/* style for main-output information-box -> table (general) */
|
|
.no-results
|
|
{
|
|
text-align:center;
|
|
margin:28px;
|
|
}
|
|
|
|
|
|
/* style for main-output information-box -> table (search results) */
|
|
.results
|
|
{
|
|
border-spacing:0px;
|
|
width:100%;
|
|
}
|
|
.results-body-odd
|
|
{
|
|
background-color: #FFFDE3;
|
|
}
|
|
.results-body-even
|
|
{
|
|
background-color: #FFF9BB;
|
|
}
|
|
.results-body-counter
|
|
{
|
|
text-align:right;
|
|
vertical-align:top;
|
|
font-weight:bold;
|
|
padding:1px 5px 1px 5px;
|
|
}
|
|
.results-body-items
|
|
{
|
|
text-align:left;
|
|
vertical-align: middle;
|
|
width:100%;
|
|
padding:1px;
|
|
}
|
|
.results-body-item
|
|
{
|
|
cursor:pointer;
|
|
color:#000000
|
|
}
|
|
.results-body-item:hover
|
|
{
|
|
color:#ff0000
|
|
}
|
|
|
|
|
|
/* style for main-output information-box -> table (driving directions) */
|
|
.description
|
|
{
|
|
border-spacing:0px;
|
|
width:100%;
|
|
}
|
|
.description-body-odd
|
|
{
|
|
background-color: #FFFDE3;
|
|
}
|
|
.description-body-even
|
|
{
|
|
background-color: #FFF9BB;
|
|
}
|
|
.description-body-items
|
|
{
|
|
text-align:left;
|
|
vertical-align: middle;
|
|
width:100%;
|
|
padding:1px;
|
|
}
|
|
.description-body-directions
|
|
{
|
|
text-align:left;
|
|
vertical-align: middle;
|
|
padding:1px 5px 1px 5px;
|
|
}
|
|
.description-body-direction
|
|
{
|
|
width:18px;
|
|
height:18px;
|
|
}
|
|
.description-body-distance
|
|
{
|
|
text-align:right;
|
|
vertical-align: middle;
|
|
padding:1px 1px 1px 5px;
|
|
|
|
}
|
|
.description-body-item
|
|
{
|
|
cursor:pointer;
|
|
color:#000000
|
|
}
|
|
.description-body-item:hover
|
|
{
|
|
color:#ff0000
|
|
}
|
|
|
|
/* ------------------------------------------------------------------------ */
|
|
|
|
/* styles for other gui boxes */
|
|
#mapping-wrapper
|
|
{
|
|
width:410px;
|
|
height:100px;
|
|
bottom:25px;
|
|
right:5px;
|
|
}
|
|
#mapping-content
|
|
{
|
|
width:390px;
|
|
height:80px;
|
|
}
|
|
#config-wrapper
|
|
{
|
|
width:410px;
|
|
height:100px;
|
|
bottom:25px;
|
|
right:5px;
|
|
}
|
|
#config-content
|
|
{
|
|
width:390px;
|
|
height:80px;
|
|
}
|
|
|
|
|
|
/* styles for content of other gui boxes */
|
|
#gui-language-2-toggle
|
|
{
|
|
position:relative;
|
|
}
|
|
#gui-units-toggle
|
|
{
|
|
position:relative;
|
|
}
|
|
.box-label
|
|
{
|
|
font-weight:bold;
|
|
margin-bottom:10px;
|
|
}
|
|
.config-label
|
|
{
|
|
margin: 0px 0px 0px 5px;
|
|
}
|
|
.config-select
|
|
{
|
|
width:100px;
|
|
}
|
|
.mapping-checkbox
|
|
{
|
|
margin: 0px 5px 3px 5px;
|
|
padding: 0px;
|
|
}
|
|
.mapping-button
|
|
{
|
|
float: right;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------------ */
|
|
|
|
/* buttons */
|
|
.button
|
|
{
|
|
cursor:pointer;
|
|
padding:2px 10px 2px 10px;
|
|
border-radius:5px;
|
|
-moz-border-radius:5px;
|
|
-webkit-border-radius:5px;
|
|
background-color:#EEEEEE;
|
|
border:1px solid #999999;
|
|
color:#333333;
|
|
text-decoration:none;
|
|
font-size:9px;
|
|
outline-style:none;
|
|
vertical-align:1px;
|
|
}
|
|
.button:hover
|
|
{
|
|
background-color:#F9F9F9;
|
|
color:#000000;
|
|
}
|
|
.button:active
|
|
{
|
|
background-color:#F4F4F4;
|
|
color:#FF0000;
|
|
}
|
|
|
|
|
|
/* iconic buttons */
|
|
.iconic-button
|
|
{
|
|
cursor:pointer;
|
|
width:16px;
|
|
height:16px;
|
|
background-repeat:no-repeat;
|
|
background-position:center;
|
|
}
|
|
|
|
#gui-printer-inactive
|
|
{
|
|
cursor:default;
|
|
}
|
|
|
|
|
|
/* styled select */
|
|
.styled-select-helper
|
|
{
|
|
border: 0px;
|
|
text-decoration:none;
|
|
opacity: 0;
|
|
filter: alpha(opacity=0);
|
|
z-index: 5;
|
|
cursor:pointer;
|
|
}
|
|
.styled-select
|
|
{
|
|
position:absolute;
|
|
background-repeat:no-repeat;
|
|
background-position: top right;
|
|
padding: 1px 1px 1px 1px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
/* checkboxes */
|
|
input[type=checkbox],
|
|
{
|
|
cursor:pointer;
|
|
}
|
|
.checkbox-label
|
|
{
|
|
vertical-align:2px;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------------ */
|
|
|
|
/* utility styles */
|
|
.quad
|
|
{
|
|
min-width:10px;
|
|
min-height:10px;
|
|
}
|
|
|
|
.not-selectable
|
|
{
|
|
cursor:default;
|
|
-moz-user-select: -moz-none;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
.text-selectable
|
|
{
|
|
cursor:default;
|
|
-moz-user-select: text;
|
|
-webkit-user-select: text;
|
|
-ms-user-select: text;
|
|
user-select: text;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------------ */
|
|
|
|
/* table styles */
|
|
.full
|
|
{
|
|
display:table;
|
|
width:100%;
|
|
}
|
|
.row
|
|
{
|
|
display:table-row;
|
|
}
|
|
.left
|
|
{
|
|
display:table-cell;
|
|
text-align:left;
|
|
vertical-align:middle;
|
|
}
|
|
.right
|
|
{
|
|
display:table-cell;
|
|
text-align:right;
|
|
vertical-align:middle;
|
|
}
|
|
.center
|
|
{
|
|
display:table-cell;
|
|
text-align:center;
|
|
vertical-align:middle;
|
|
}
|
|
.stretch
|
|
{
|
|
width:100%;
|
|
}
|
|
.fixed
|
|
{
|
|
min-width:100px;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------------ */
|
|
|
|
/* fonts */
|
|
.base-font {
|
|
font-family: Verdana, Arial, Helvetica, sans-serif;
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
}
|
|
.big-font {
|
|
font-family: Verdana, Arial, Helvetica, sans-serif;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
.medium-font {
|
|
font-family: Verdana, Arial, Helvetica, sans-serif;
|
|
font-size: 10.5px;
|
|
font-weight: normal;
|
|
}
|
|
.small-font {
|
|
font-family: Verdana, Arial, Helvetica, sans-serif;
|
|
font-size: 9px;
|
|
font-weight: normal;
|
|
} |