After Width: | Height: | Size: 168 KiB |
After Width: | Height: | Size: 103 KiB |
After Width: | Height: | Size: 172 KiB |
After Width: | Height: | Size: 170 KiB |
After Width: | Height: | Size: 168 KiB |
After Width: | Height: | Size: 122 KiB |
After Width: | Height: | Size: 34 KiB |
After Width: | Height: | Size: 48 KiB |
After Width: | Height: | Size: 49 KiB |
After Width: | Height: | Size: 2.9 KiB |
After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 10 KiB |
After Width: | Height: | Size: 7.8 KiB |
After Width: | Height: | Size: 15 KiB |
@ -0,0 +1,45 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<meta charset="UTF-8"> |
||||||
|
<html lang="en"> |
||||||
|
<html><header><title>Rabi-Ribi Rando Location Tracker Starisms</title> |
||||||
|
<link rel="stylesheet" href="style.css"> |
||||||
|
<script src="scripts/main.js"></script> |
||||||
|
<script src="scripts/locations.js"></script> |
||||||
|
</header> |
||||||
|
<body class="body" onload="justLoaded()"> |
||||||
|
<button onclick="showSection(0)" type="button" style= "background-color:#62a362">S. Woodland</button> |
||||||
|
<button onclick="showSection(1)" type="button" style= "background-color:#5478a5">W. Coast</button> |
||||||
|
<button onclick="showSection(2)" type="button" style= "background-color:#5ea9a4">Island Core</button> |
||||||
|
<button onclick="showSection(3)" type="button" style= "background-color:#8165d1">N Tundra</button> |
||||||
|
<button onclick="showSection(4)" type="button" style= "background-color:#b89368">E. Highlands</button> |
||||||
|
<button onclick="showSection(5)" type="button" style= "background-color:#a96036">Other</button> |
||||||
|
<input type="color" id="bgcolor" value="#666666" onchange="changeBG()"> |
||||||
|
<button onClick="info()" type="button">info</button> |
||||||
|
<div id="info" class="info"> |
||||||
|
<a href="https://github.com/allibear17/Rabi-Ribi-Rando-Tracker" target="_blank">Click here for readme and source</a> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div id="mapdisplay" class="map-container"> |
||||||
|
<p><span id="tt" class="tooltip">Tooltip Info</span></p> |
||||||
|
|
||||||
|
<div id="swood" class="base"> |
||||||
|
<img src="images/01.png"> |
||||||
|
</div> |
||||||
|
<div id="wcoast" class="base"> |
||||||
|
<img src="images/02.png"> |
||||||
|
</div> |
||||||
|
<div id="core" class="base"> |
||||||
|
<img src="images/03.png"> |
||||||
|
</div> |
||||||
|
<div id="ntun" class="base"> |
||||||
|
<img src="images/04.png"> |
||||||
|
</div> |
||||||
|
<div id="ehigh" class="base"> |
||||||
|
<img src="images/05.png"> |
||||||
|
</div> |
||||||
|
<div id="other" class="base"> |
||||||
|
<img src="images/06.png"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</body> |
||||||
|
</html> |
@ -0,0 +1,4 @@ |
|||||||
|
WIP for a map location tracker to help with Rabi Ribi rando. |
||||||
|
|
||||||
|
Feel free to download the files and run index.html locally or use the |
||||||
|
gitpage for it at https://allibear17.github.io/Rabi-Ribi-Rando-Tracker/ |
@ -0,0 +1,232 @@ |
|||||||
|
markers = [ |
||||||
|
new Location(2, 35), // 0 Start of Southern Woodlands
|
||||||
|
new Location(71, 35), |
||||||
|
new Location(71, 70), |
||||||
|
new Location(205, 70), |
||||||
|
new Location(205, 105), |
||||||
|
new Location(140, 140), // 5
|
||||||
|
new Location(205, 172), |
||||||
|
new Location(206, 207), |
||||||
|
new Location(243, 207), |
||||||
|
new Location(345, 140), |
||||||
|
new Location(412, 140), // 10
|
||||||
|
new Location(310, 35), |
||||||
|
new Location(448, 35), |
||||||
|
new Location(515, 70), |
||||||
|
new Location(585, 70), |
||||||
|
new Location(585, 0), // 15
|
||||||
|
new Location(620, 35), |
||||||
|
new Location(686, 0), |
||||||
|
new Location(482, 172), |
||||||
|
new Location(585, 172), |
||||||
|
new Location(585, 208), // 20
|
||||||
|
new Location(140, 240), |
||||||
|
new Location(140, 275), |
||||||
|
new Location(175, 275), |
||||||
|
new Location(140, 345), |
||||||
|
new Location(105, 310), // 25
|
||||||
|
new Location(278, 376), |
||||||
|
new Location(310, 343), |
||||||
|
new Location(343, 308), |
||||||
|
new Location(310, 275), |
||||||
|
new Location(378, 376), // 30
|
||||||
|
new Location(413, 343), |
||||||
|
new Location(446, 275), |
||||||
|
new Location(446, 242), |
||||||
|
new Location(548, 310), |
||||||
|
new Location(582, 378), |
||||||
|
new Location(582, 343), // 36 End of South Woodlands
|
||||||
|
new Location(74, 204), // 37 Start of Western Coast
|
||||||
|
new Location(132, 115), |
||||||
|
new Location(190, 85), |
||||||
|
new Location(280, 115), //40
|
||||||
|
new Location(308, 204), |
||||||
|
new Location(336, 115), |
||||||
|
new Location(367, 87), |
||||||
|
new Location(394, 204), |
||||||
|
new Location(394, 172), // 45
|
||||||
|
new Location(425, 204), |
||||||
|
new Location(424, 145), |
||||||
|
new Location(424, 57), |
||||||
|
new Location(454, 0),
|
||||||
|
new Location(482, 57), // 50
|
||||||
|
new Location(482, 174), |
||||||
|
new Location(510, 144), |
||||||
|
new Location(540, 174), |
||||||
|
new Location(570, 144), |
||||||
|
new Location(570, 85), |
||||||
|
new Location(660, 85), // 56 End of Western Coast
|
||||||
|
new Location(190, 0), // 57 Start of Island Core
|
||||||
|
new Location(160, 33), |
||||||
|
new Location(220, 33), |
||||||
|
new Location(343, 64), // 60
|
||||||
|
new Location(343, 95), |
||||||
|
new Location(440, 95), |
||||||
|
new Location(130, 127), |
||||||
|
new Location(67, 157), |
||||||
|
new Location(220, 157), // 65
|
||||||
|
new Location(250, 157), |
||||||
|
new Location(95, 220), |
||||||
|
new Location(65, 250), |
||||||
|
new Location(285, 250), |
||||||
|
new Location(190, 280), // 70
|
||||||
|
new Location(190, 280), |
||||||
|
new Location(34, 343), |
||||||
|
new Location(66, 376), |
||||||
|
new Location(99, 405), |
||||||
|
new Location(190, 405), // 75
|
||||||
|
new Location(33, 470), |
||||||
|
new Location(99, 440), |
||||||
|
new Location(66, 470), |
||||||
|
new Location(285, 355), |
||||||
|
new Location(315, 355), |
||||||
|
new Location(407, 392), // 80
|
||||||
|
new Location(525, 348), |
||||||
|
new Location(525, 315), |
||||||
|
new Location(525, 280), |
||||||
|
new Location(587, 280), |
||||||
|
new Location(587, 310), // 85
|
||||||
|
new Location(587, 342), |
||||||
|
new Location(618, 280), |
||||||
|
new Location(651, 342), |
||||||
|
new Location(618, 438), |
||||||
|
new Location(557, 468), // 91 End of Island Core + Town
|
||||||
|
new Location(30, 0), // 92 Start of Northen Tundra
|
||||||
|
new Location(30, 30), |
||||||
|
new Location(30, 390), |
||||||
|
new Location(60, 360), // 95
|
||||||
|
new Location(60, 210), |
||||||
|
new Location(90, 90), |
||||||
|
new Location(150, 30), |
||||||
|
new Location(150, 90), |
||||||
|
new Location(150, 120), // 100
|
||||||
|
new Location(180, 60), |
||||||
|
new Location(180, 150), |
||||||
|
new Location(120, 210), |
||||||
|
new Location(270, 60), |
||||||
|
new Location(270, 0), // 105
|
||||||
|
new Location(330, 90), |
||||||
|
new Location(360, 30), |
||||||
|
new Location(480, 30), |
||||||
|
new Location(480, 60), |
||||||
|
new Location(450, 120), // 110
|
||||||
|
new Location(510, 120), |
||||||
|
new Location(270, 180), |
||||||
|
new Location(210, 240), |
||||||
|
new Location(270, 270), |
||||||
|
new Location(240, 330), // 115
|
||||||
|
new Location(180, 390), |
||||||
|
new Location(390, 360), |
||||||
|
new Location(450, 210), |
||||||
|
new Location(480, 240), |
||||||
|
new Location(510, 270), // 120
|
||||||
|
new Location(540, 270), |
||||||
|
new Location(630, 240), |
||||||
|
new Location(660, 300), |
||||||
|
new Location(660, 330), |
||||||
|
new Location(660, 360), |
||||||
|
new Location(600, 390), // 126 End of N Tundra
|
||||||
|
new Location(30, 150), // 127 Start of E. Highlands
|
||||||
|
new Location(90, 150), |
||||||
|
new Location(90, 180), |
||||||
|
new Location(90, 210), // 130
|
||||||
|
new Location(30, 268), |
||||||
|
new Location(60, 328), |
||||||
|
new Location(90, 328), |
||||||
|
new Location(210, 237), |
||||||
|
new Location(240, 178), // 135
|
||||||
|
new Location(240, 118), |
||||||
|
new Location(240, 237), |
||||||
|
new Location(240, 270), |
||||||
|
new Location(300, 30), |
||||||
|
new Location(330, 150), // 140
|
||||||
|
new Location(300, 270), |
||||||
|
new Location(360, 270), |
||||||
|
new Location(330, 330), |
||||||
|
new Location(360, 330), |
||||||
|
new Location(390, 150), // 145
|
||||||
|
new Location(418, 88), |
||||||
|
new Location(418, 358), |
||||||
|
new Location(450, 358), |
||||||
|
new Location(450, 390), |
||||||
|
new Location(478, 58), // 150
|
||||||
|
new Location(478, 150), |
||||||
|
new Location(478, 237), |
||||||
|
new Location(507, 267), |
||||||
|
new Location(538, 58), |
||||||
|
new Location(538, 208), // 155
|
||||||
|
new Location(538, 390), |
||||||
|
new Location(538, 30), |
||||||
|
new Location(568, 30), |
||||||
|
new Location(598, 60), |
||||||
|
new Location(658, 0), // 160
|
||||||
|
new Location(688, 90), |
||||||
|
new Location(658, 358), |
||||||
|
new Location(688, 358), // 163 End of E. Highlands
|
||||||
|
new Location(63, 164), // 164 Start of other
|
||||||
|
new Location(-5, 297), |
||||||
|
new Location(-5, 432), |
||||||
|
new Location(150, 275), |
||||||
|
new Location(95, 98), |
||||||
|
new Location(127, 68), // 170
|
||||||
|
new Location(451, 96), |
||||||
|
new Location(451, 194), |
||||||
|
new Location(483, 68), |
||||||
|
new Location(513, 0), |
||||||
|
new Location(676, 355), |
||||||
|
new Location(553, 302), // 175
|
||||||
|
new Location(583, 332), |
||||||
|
new Location(678, 425), |
||||||
|
new Location(678, 485), |
||||||
|
new Location(461, 425), |
||||||
|
new Location(398, 457), // 180
|
||||||
|
new Location(305, 365), |
||||||
|
new Location(275, 365), |
||||||
|
]; |
||||||
|
|
||||||
|
openMarkers = [0,4,6,7,10,19,23,22,25,28,30,34, //S Woodlands
|
||||||
|
39,40,47,49,52,53,54,55,56, //W Coast
|
||||||
|
59,60,75,76,77,79,82,83,84,89, //I Core
|
||||||
|
92,93,101,102,106,109,116,117,119,120,123, //N Tundra
|
||||||
|
127,129,134,136,142,147,151,152,153,156,159,160, //E Highlands
|
||||||
|
166,167,169,174,177,178,181, //Other
|
||||||
|
]; |
||||||
|
|
||||||
|
function drawMarkers(){ |
||||||
|
|
||||||
|
var sw = document.getElementById("swood"); |
||||||
|
var wc = document.getElementById("wcoast"); |
||||||
|
var ic = document.getElementById("core"); |
||||||
|
var nt = document.getElementById("ntun"); |
||||||
|
var eh = document.getElementById("ehigh"); |
||||||
|
var ot = document.getElementById("other"); |
||||||
|
|
||||||
|
|
||||||
|
for ( i = 0; i < markers.length; i++){ |
||||||
|
markers[i].elem = document.createElement("img"); |
||||||
|
markers[i].elem.setAttribute("src", "images/marker0.png"); |
||||||
|
markers[i].elem.setAttribute("class", "markera"); |
||||||
|
markers[i].elem.id = "marker " + i; |
||||||
|
markers[i].elem.style.left = markers[i].x + "px"; |
||||||
|
markers[i].elem.style.top = markers[i].y + "px"; |
||||||
|
markers[i].elem.onclick = toggleMarker; |
||||||
|
markers[i].elem.onmouseenter = showTooltip; |
||||||
|
markers[i].elem.onmouseleave = hideTooltip; |
||||||
|
if ( i < 37 ){ |
||||||
|
sw.appendChild(markers[i].elem); |
||||||
|
} else if (( i >= 37 ) && ( i <= 56 )){ |
||||||
|
wc.appendChild(markers[i].elem); |
||||||
|
} else if (( i >= 57 ) && ( i <= 91)){ |
||||||
|
ic.appendChild(markers[i].elem); |
||||||
|
} else if (( i >= 92 ) && ( i <= 126 )){ |
||||||
|
nt.appendChild(markers[i].elem); |
||||||
|
} else if (( i >= 127 ) && ( i <= 163 )){ |
||||||
|
eh.appendChild(markers[i].elem); |
||||||
|
} else if (( i >= 164 ) && ( i <= 182 )){ |
||||||
|
ot.appendChild(markers[i].elem); |
||||||
|
} |
||||||
|
} |
||||||
|
for ( i = 0; i < openMarkers.length; i++){ |
||||||
|
markers[openMarkers[i]].elem.setAttribute("class", "markerb"); |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,141 @@ |
|||||||
|
var sectionShown = []; |
||||||
|
var markers = []; |
||||||
|
var openMarkers = []; |
||||||
|
var markerTypes = [ |
||||||
|
"images/marker0.png",
|
||||||
|
"images/marker1.png",
|
||||||
|
"images/marker2.png", |
||||||
|
"images/marker3.png", |
||||||
|
"images/marker4.png", |
||||||
|
]; |
||||||
|
|
||||||
|
var lastClick; |
||||||
|
|
||||||
|
function justLoaded(){ |
||||||
|
hideAll(); |
||||||
|
drawMarkers(); |
||||||
|
showSection(5); |
||||||
|
} |
||||||
|
|
||||||
|
function hideAll(){ |
||||||
|
for (i = 0; i < 6; i++){ |
||||||
|
sectionShown[i] = false;
|
||||||
|
} |
||||||
|
swood.style.display = "none"; |
||||||
|
wcoast.style.display = "none"; |
||||||
|
core.style.display = "none"; |
||||||
|
ntun.style.display = "none"; |
||||||
|
ehigh.style.display = "none"; |
||||||
|
other.style.display = "none"; |
||||||
|
} |
||||||
|
|
||||||
|
function showSection(m) { |
||||||
|
if (!sectionShown[m]){ |
||||||
|
hideAll(); |
||||||
|
sectionShown[m] = true; |
||||||
|
switch(m){ |
||||||
|
case 0:
|
||||||
|
swood.style.display = "block"; |
||||||
|
break; |
||||||
|
case 1: |
||||||
|
wcoast.style.display = "block"; |
||||||
|
break; |
||||||
|
case 2: |
||||||
|
core.style.display = "block"; |
||||||
|
break; |
||||||
|
case 3: |
||||||
|
ntun.style.display = "block"; |
||||||
|
break; |
||||||
|
case 4: |
||||||
|
ehigh.style.display = "block"; |
||||||
|
break; |
||||||
|
case 5: |
||||||
|
other.style.display = "block"; |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function toggleMarker(event) { |
||||||
|
var clicked = document.getElementById(this.id); |
||||||
|
var clickedSrc = clicked.getAttribute("src"); |
||||||
|
var type = 0; |
||||||
|
|
||||||
|
for ( i = 0; i < markerTypes.length; i++){ |
||||||
|
if ( clickedSrc == markerTypes[i] ){ |
||||||
|
type = i+1; |
||||||
|
} |
||||||
|
} |
||||||
|
if ( markerTypes[type] ){ |
||||||
|
clicked.setAttribute("src", markerTypes[type]); |
||||||
|
} |
||||||
|
else { |
||||||
|
clicked.setAttribute("src", markerTypes[0]); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function showTooltip(event){ |
||||||
|
var id = document.getElementById("tt"); |
||||||
|
var clicked = document.getElementById(this.id); |
||||||
|
id.style.display = "block"; |
||||||
|
id.innerHTML = clicked.id; |
||||||
|
id.style.top = "20px"; |
||||||
|
id.style.left = "20px"; |
||||||
|
} |
||||||
|
|
||||||
|
function hideTooltip(){ |
||||||
|
document.getElementById("tt").style.display = "none"; |
||||||
|
} |
||||||
|
function changeBG(){ |
||||||
|
document.body.style.backgroundColor = document.getElementById("bgcolor").value; |
||||||
|
document.getElementById("shopDropdown").style.backgroundColor = document.getElementById("bgcolor").value; |
||||||
|
} |
||||||
|
|
||||||
|
function info(){ |
||||||
|
var id = document.getElementById("info") |
||||||
|
if (id.style.display == "block"){ |
||||||
|
id.style.display = "none"; |
||||||
|
} |
||||||
|
else { |
||||||
|
id.style.display = "block"; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function Location(x, y){ |
||||||
|
this.x = x; |
||||||
|
this.y = y; |
||||||
|
this.canReach = false; |
||||||
|
this.elem = ""; |
||||||
|
} |
||||||
|
|
||||||
|
function toggleItem(e){ |
||||||
|
id = e.target; |
||||||
|
if ( id.style.opacity == 1.0 ){ |
||||||
|
id.style.opacity = 0.5; |
||||||
|
id.style.filter = "grayscale(100%)"; |
||||||
|
} else { |
||||||
|
id.style.opacity = 1.0; |
||||||
|
id.style.filter = "none"; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
addEventListener('contextmenu', function(e) { |
||||||
|
e.preventDefault(); |
||||||
|
if (( e.target.className == "markera" ) || ( e.target.className == "markerb" )){ |
||||||
|
var clicked = document.getElementById(e.target.id); |
||||||
|
var clickedSrc = clicked.getAttribute("src"); |
||||||
|
var type = 0; |
||||||
|
|
||||||
|
for ( i = 0; i < markerTypes.length; i++){ |
||||||
|
if ( clickedSrc == markerTypes[i] ){ |
||||||
|
type = i-1; |
||||||
|
} |
||||||
|
} |
||||||
|
if ( type >= 0 ){ |
||||||
|
clicked.setAttribute("src", markerTypes[type]); |
||||||
|
} |
||||||
|
else { |
||||||
|
clicked.setAttribute("src", markerTypes[4]); |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
@ -0,0 +1,149 @@ |
|||||||
|
body { |
||||||
|
background-color: #7b4785 |
||||||
|
} |
||||||
|
button { |
||||||
|
font-family: helvetica, arial, sans-serif; |
||||||
|
background-color: #4CAF50; |
||||||
|
border: none; |
||||||
|
color: white; |
||||||
|
padding: 4px 20px; |
||||||
|
text-align: center; |
||||||
|
text-decoration: none; |
||||||
|
display: inline-block; |
||||||
|
font-size: 14px; |
||||||
|
margin: 2px 0px; |
||||||
|
cursor: pointer; |
||||||
|
outline: none; |
||||||
|
border-radius: 10px; |
||||||
|
box-shadow: 0 2px #999; |
||||||
|
} |
||||||
|
button:active{ |
||||||
|
box-shadow: 0 2px #666; |
||||||
|
transform: translateY(2px); |
||||||
|
} |
||||||
|
|
||||||
|
.markera{ |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
width: 32px; |
||||||
|
height: 32px; |
||||||
|
border: none; |
||||||
|
padding: 0px 0px; |
||||||
|
z-index: 2; |
||||||
|
} |
||||||
|
|
||||||
|
.markerb{ |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
width: 32px; |
||||||
|
height: 32px; |
||||||
|
border: none; |
||||||
|
padding: 0px 0px; |
||||||
|
z-index: 2; |
||||||
|
outline: rgba(255, 255, 255, 1) solid 2px; |
||||||
|
outline-offset: -1.5px; |
||||||
|
} |
||||||
|
|
||||||
|
.tooltip { |
||||||
|
font-family: helvetica, arial, sans-serif; |
||||||
|
position: absolute; |
||||||
|
white-space: nowrap; |
||||||
|
display: none; |
||||||
|
background: #ffffcc; |
||||||
|
border: 1px solid black; |
||||||
|
padding: 5px; |
||||||
|
z-index: 1000; |
||||||
|
color: black; |
||||||
|
} |
||||||
|
.base{ |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
width: 720px; |
||||||
|
padding-top: 0px; |
||||||
|
padding-left: 0px; |
||||||
|
display: none; |
||||||
|
z-index: 0; |
||||||
|
} |
||||||
|
.info{ |
||||||
|
position: absolute; |
||||||
|
text-align: right; |
||||||
|
top: 20; |
||||||
|
left: 200; |
||||||
|
width: 600px; |
||||||
|
padding-top: 0px; |
||||||
|
padding-left: 0px; |
||||||
|
display: none; |
||||||
|
z-index: 3; |
||||||
|
} |
||||||
|
img{ |
||||||
|
max-width: 100%; |
||||||
|
max-height: 100%; |
||||||
|
} |
||||||
|
.map-container{ |
||||||
|
position: relative; |
||||||
|
max-width: 720px; |
||||||
|
max-height: 480px; |
||||||
|
} |
||||||
|
a{ |
||||||
|
background-color: #ffffcc; |
||||||
|
font-family: helvetica, arial, sans-serif; |
||||||
|
color: #000000; |
||||||
|
} |
||||||
|
.shop-dropdown{ |
||||||
|
display: none; |
||||||
|
background-color: #666666; |
||||||
|
position: absolute; |
||||||
|
top: 0px; |
||||||
|
left: 0px; |
||||||
|
width: 210px; |
||||||
|
overflow: auto; |
||||||
|
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4); |
||||||
|
padding-top: 4px; |
||||||
|
padding-left: 4px; |
||||||
|
border: 2px solid black; |
||||||
|
z-index: 4; |
||||||
|
} |
||||||
|
.shop-item{ |
||||||
|
width: 25px; |
||||||
|
height: 25px; |
||||||
|
padding: 2px 2px 2px 2px; |
||||||
|
background-color: #444444; |
||||||
|
border: 1px solid black; |
||||||
|
} |
||||||
|
.in-shop{ |
||||||
|
background-color: rgba(0,0,0,0); |
||||||
|
border: none; |
||||||
|
padding: 0px 0px; |
||||||
|
display: inline-block; |
||||||
|
margin: 0px 0px; |
||||||
|
cursor: pointer; |
||||||
|
outline: none; |
||||||
|
box-shadow: 0 0px #999; |
||||||
|
z-index: 4; |
||||||
|
} |
||||||
|
.in-shop:active{ |
||||||
|
box-shadow: 0 0px #999; |
||||||
|
transform: translateY(2px); |
||||||
|
} |
||||||
|
.item{ |
||||||
|
position: relative; |
||||||
|
width: 30px; |
||||||
|
height: 30px; |
||||||
|
opacity: 0.5; |
||||||
|
filter: grayscale(100%); |
||||||
|
} |
||||||
|
table{ |
||||||
|
position: relative; |
||||||
|
width: 600px; |
||||||
|
height: 28px; |
||||||
|
margin-top: 10px; |
||||||
|
margin-bottom: -13px; |
||||||
|
} |
||||||
|
td{ |
||||||
|
width: 32px; |
||||||
|
height: 32px; |
||||||
|
padding-top: 5px; |
||||||
|
} |