changed buttons look

This commit is contained in:
schiefer 2012-03-09 17:33:06 +01:00
parent 8b109904c8
commit 93892b9806
2 changed files with 47 additions and 14 deletions

View File

@ -238,3 +238,36 @@ html, body, #map {
padding:5px;
font-size:10px;
}
/* buttons */
.button
{
cursor:pointer;
padding:2px 10px 2px 10px;
border-radius:5px;
-moz-border-radius:5px;
background-color:#EEEEEE;
border:1px solid #999999;
color:#333333;
text-decoration:none;
font-size:11px;
outline-style:none;
}
.button:hover
{
background-color:#F9F9F9;
color:#000000;
}
.button:active
{
background-color:#F4F4F4;
color:#FF0000;
}
/* generally useful styles */
.not-selectable
{
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}

View File

@ -11,6 +11,10 @@
<meta name="description" content="OSRM Website"/>
<meta name="author" content="Dennis Schieferdecker" />
<!-- stylesheets -->
<link rel="stylesheet" href="leaflet/leaflet.css" />
<link rel="stylesheet" href="main.css" />
<!-- scripts -->
<script src="leaflet/leaflet-src.js"></script>
<!--[if lte IE 8]><link rel="stylesheet" href="leaflet/leaflet.ie.css" /><![endif]-->
@ -34,10 +38,6 @@
<script src="via.js"></script>
<script src="utils.js"></script>
<!-- stylesheets -->
<link rel="stylesheet" href="leaflet/leaflet.css" />
<link rel="stylesheet" href="main.css" />
</head>
@ -67,15 +67,15 @@
<tr>
<td id="gui-search-source-label">Start:</td>
<td><input id="input-source-name" class="input-box" type="text" value="Karlsruhe" title="Startposition eingeben" onkeypress="if(event.keyCode==13) {callGeocoder(OSRM.SOURCE_MARKER_ID, document.getElementById('input-source-name').value);}" /></td>
<!-- <td class="right"><button id="gui-here-source" onclick="">i</button></td> -->
<td class="right"><button id="gui-search-source" onclick="callGeocoder(OSRM.SOURCE_MARKER_LABEL, document.getElementById('input-source-name').value);">Suchen</button></td>
<!-- <td class="right"><a class="button not-selectable" id="gui-here-target" onclick="">i</a></td> -->
<td class="right"><a class="button not-selectable" id="gui-search-source" onclick="callGeocoder(OSRM.SOURCE_MARKER_LABEL, document.getElementById('input-source-name').value);">Suchen</a></td>
</tr>
<tr>
<td id="gui-search-target-label">Ende:</td>
<td><input id="input-target-name" class="input-box" type="text" value="Aalen" title="Zielposition eingeben" onkeypress="if(event.keyCode==13) {callGeocoder(OSRM.TARGET_MARKER_ID, document.getElementById('input-target-name').value);}" /></td>
<!-- <td class="right"><button id="gui-here-target" onclick="">i</button></td> -->
<td class="right"><button id="gui-search-target" onclick="callGeocoder(OSRM.TARGET_MARKER_LABEL, document.getElementById('input-target-name').value);" >Suchen</button></td>
<!-- <td class="right"><a class="button not-selectable" id="gui-here-target" onclick="">i</a></td> -->
<td class="right"><a class="button not-selectable" id="gui-search-target" onclick="callGeocoder(OSRM.TARGET_MARKER_LABEL, document.getElementById('input-target-name').value);">Suchen</a></td>
</tr>
</table>
@ -83,16 +83,16 @@
<div class="vquad"></div>
<table style="width:100%">
<tr>
<td><button id="gui-reset" onclick="resetRouting();">Reset</button></td>
<td class="center"><button id="gui-reverse" onclick="reverseRouting();">Reverse</button></td>
<td class="right"><button id="gui-route" onclick="startRouting();">Route</button></td>
<td> <a class="button not-selectable" id="gui-reset" onclick="resetRouting();">Reset</a></td>
<td class="center"> <a class="button not-selectable" id="gui-reverse" onclick="reverseRouting();">Reverse</a></td>
<td class="right"> <a class="button not-selectable" id="gui-route" onclick="startRouting();">Route</a></td>
</tr>
</table>
<!-- options -->
<div class="vquad"></div>
<div id="options-toggle" class="main-options" onclick="OSRM.GUI.toggleOptions()">Options</div>
<div id="options-box" class="main-options">
<div class="main-options not-selectable" id="options-toggle" onclick="OSRM.GUI.toggleOptions()">Options</div>
<div class="main-options not-selectable" id="options-box">
<input type="checkbox" id="option-highlight-nonames" name="main-options" value="highlight-nonames" onclick="getRoute(OSRM.FULL_DESCRIPTION)" /><span id="gui-option-highlight-nonames-label">Unbenannte Straßen hervorheben</span>
</div>
</div>