445 lines
7.2 KiB
CSS
445 lines
7.2 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%;
|
|
}
|
|
#map {
|
|
height: 100%;
|
|
z-index: 0;
|
|
}
|
|
|
|
|
|
/* general styles for gui boxes */
|
|
.gui-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);
|
|
transition:left 1s;
|
|
-moz-transition:left 1s;
|
|
-webkit-transition:left 1s;
|
|
-o-transition:left 1s;
|
|
-ms-transition:left 1s;
|
|
}
|
|
.gui-box
|
|
{
|
|
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;
|
|
}
|
|
|
|
|
|
/* styles for specific gui boxes */
|
|
#main-wrapper
|
|
{
|
|
width:410px;
|
|
top:5px;
|
|
bottom:25px;
|
|
left:5px;
|
|
}
|
|
#main-input
|
|
{
|
|
width:390px;
|
|
height:200px;
|
|
}
|
|
#main-output
|
|
{
|
|
width:390px;
|
|
top:220px; /* main-input.height+2*gui-box.margin+2*gui-box.padding */
|
|
bottom:0px;
|
|
}
|
|
#blob-wrapper
|
|
{
|
|
left:-5px;
|
|
top:5px;
|
|
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;
|
|
visibility:hidden;
|
|
}
|
|
#blob-content
|
|
{
|
|
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;
|
|
}
|
|
|
|
|
|
/* styles for main-input areas */
|
|
#input-mask-header
|
|
{
|
|
left:0px;
|
|
right:0px;
|
|
top:0px;
|
|
height:50px;
|
|
background-repeat:no-repeat;
|
|
background-position:center;
|
|
background-image:url("images/osrm-logo.png");
|
|
}
|
|
#input-mask
|
|
{
|
|
margin:3px;
|
|
}
|
|
#input-mask-options
|
|
{
|
|
margin:3px;
|
|
}
|
|
|
|
|
|
/* styles for main-input input-mask-header */
|
|
#gui-language-toggle
|
|
{
|
|
border: 0px;
|
|
text-decoration:none;
|
|
}
|
|
.top-left-button
|
|
{
|
|
float:left;
|
|
}
|
|
.top-right-button
|
|
{
|
|
float:right;
|
|
}
|
|
|
|
|
|
/* styles for main-input input-mask */
|
|
.input-marker
|
|
{
|
|
display:table-row;
|
|
}
|
|
.input-marker > div
|
|
{
|
|
padding-bottom:4px;
|
|
}
|
|
.input-box
|
|
{
|
|
width: 250px;
|
|
padding-right: 2px;
|
|
}
|
|
|
|
|
|
/* 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 information-box-header */
|
|
.header-title
|
|
{
|
|
font-weight:bold;
|
|
margin-bottom:10px;
|
|
}
|
|
.header-content
|
|
{
|
|
font-weight:normal;
|
|
}
|
|
.result-link
|
|
{
|
|
color:#0000ff;
|
|
text-decoration:none;
|
|
cursor:pointer;
|
|
}
|
|
.result-link:hover
|
|
{
|
|
color:#ff0000;
|
|
}
|
|
|
|
|
|
/* style for information-box table (search results, driving directions) */
|
|
.results-table
|
|
{
|
|
border-spacing:0px;
|
|
width:100%;
|
|
}
|
|
.results-odd
|
|
{
|
|
background-color: #FFFDE3;
|
|
}
|
|
.results-even
|
|
{
|
|
background-color: #FFF9BB;
|
|
}
|
|
.result-counter
|
|
{
|
|
text-align:right;
|
|
vertical-align:top;
|
|
font-weight:bold;
|
|
padding:1px 5px 1px 5px;
|
|
}
|
|
.result-items
|
|
{
|
|
text-align:left;
|
|
vertical-align: middle;
|
|
width:100%;
|
|
padding:1px;
|
|
}
|
|
.result-directions
|
|
{
|
|
text-align:left;
|
|
vertical-align: middle;
|
|
padding:1px 5px 1px 5px;
|
|
}
|
|
.result-distance
|
|
{
|
|
text-align:right;
|
|
vertical-align: middle;
|
|
padding:1px 1px 1px 5px;
|
|
}
|
|
.result-item
|
|
{
|
|
cursor:pointer;
|
|
color:#000000
|
|
}
|
|
.result-item:hover
|
|
{
|
|
color:#ff0000
|
|
}
|
|
.no-results
|
|
{
|
|
text-align:center;
|
|
margin:28px;
|
|
}
|
|
|
|
|
|
/* 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-toggle-out
|
|
{
|
|
background-image:url("images/cancel.png");
|
|
}
|
|
#gui-toggle-out:hover
|
|
{
|
|
background-image:url("images/cancel_hover.png");
|
|
}
|
|
#gui-toggle-out:active
|
|
{
|
|
background-image:url("images/cancel_active.png");
|
|
}
|
|
|
|
#gui-toggle-in
|
|
{
|
|
background-image:url("images/restore.png");
|
|
}
|
|
#gui-toggle-in:hover
|
|
{
|
|
background-image:url("images/restore_hover.png");
|
|
}
|
|
#gui-toggle-in:active
|
|
{
|
|
background-image:url("images/restore_active.png");
|
|
}
|
|
|
|
#gui-printer
|
|
{
|
|
background-image:url("images/printer.png");
|
|
}
|
|
#gui-printer:hover
|
|
{
|
|
background-image:url("images/printer_hover.png");
|
|
}
|
|
#gui-printer:active
|
|
{
|
|
background-image:url("images/printer_active.png");
|
|
}
|
|
|
|
.delete-marker
|
|
{
|
|
background-image:url("images/cancel.png");
|
|
visibility:hidden;
|
|
}
|
|
.delete-marker:hover
|
|
{
|
|
background-image:url("images/cancel_hover.png");
|
|
}
|
|
.delete-marker:active
|
|
{
|
|
background-image:url("images/cancel_active.png");
|
|
}
|
|
|
|
|
|
/* 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;
|
|
}
|
|
|
|
|
|
/* utility styles (defined above buttons, so that buttons retain cursor:pointer)*/
|
|
.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;
|
|
}
|
|
|
|
.checkbox-label
|
|
{
|
|
vertical-align:2px;
|
|
}
|
|
|
|
.full
|
|
{
|
|
display:table;
|
|
width:100%;
|
|
}
|
|
.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;
|
|
} |