ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve control styling for legacy IE versions

Browse Source 
IE < 9 does not support RGBA transparency, so instead fall back to
more readable alternatives where possible.

Conflicts:
	css/ol.css
This commit is contained in:
Austin Hyde
2013-11-26 10:00:07 -05:00
parent f7ec082411
commit eebf730b66
1 changed files with 89 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
css/ol.css
View File

@@ -1,17 +1,32 @@
.ol-attribution {
position: absolute;
text-align: right;
color: #eeeeee;
bottom: 0;
right: 0;
background: rgba(0,60,136,0.3);
font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
padding: 6px;
}
.ol-attribution a {
color: white;
text-decoration: none;
}
/* rgba is not supported on IE <= 8, fall back to black text so that it's readable */
.ol-attribution {
color: #000000;
}
.ol-attribution:not([ie8andbelow]) {
color: #eeeeee;
background: rgba(0,60,136,0.3);
}
/* white links are unreadable on IE <= 8 with no background, fall back to blue links */
.ol-attribution a {
color: #7b98bc;
}
.ol-attribution a:not([ie8andbelow]) {
color: white;
}
.ol-attribution ul {
margin: 0;
padding: 0;
@@ -32,20 +47,26 @@
white-space: nowrap;
}
.ol-full-screen {
background: rgba(255,255,255,0.4);
/* IE <= 8 doesn't support rgba, fall back to a light grey */
background: #eee;
border-radius: 4px;
padding: 2px;
position: absolute;
right: 8px;
top: 8px;
}
.ol-full-screen:not([ie8andbelow]) {
/* IE <= 8 doesn't support rgba, fall back to a light grey */
background: rgba(255,255,255,0.4);
}
@media print {
.ol-full-screen {
display: none;
}
}
.ol-full-screen a {
background: rgba(0,60,136,0.5);
/* IE <= 8 doesn't support rgba, fall back to a light blue */
background: #7b98bc;
color: white;
display: block;
font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
@@ -59,6 +80,10 @@
text-decoration: none;
width: 22px;
}
.ol-full-screen a:not([ie8andbelow]) {
/* IE <= 8 doesn't support rgba, fall back to a light blue */
background: rgba(0,60,136,0.5);
}
a.ol-full-screen-false:after {
content: "\2194";
}
@@ -73,6 +98,11 @@ a.ol-full-screen-true:after {
border-radius: 2px;
}
.ol-full-screen a:hover {
/* IE <= 8 doesn't support rgba, fall back to a light blue */
background: #4c6079;
}
.ol-full-screen a:hover:not([ie8andbelow]) {
/* IE <= 8 doesn't support rgba, fall back to a light blue */
background: rgba(0,60,136,0.7);
}
.ol-logo {
@@ -92,17 +122,22 @@ a.ol-full-screen-true:after {
.ol-mouse-position {
top: 8px;
right: 8px;
position: absolute;
position: absolute;
}
.ol-scale-line {
background: rgba(0,60,136,0.3);
/* IE <= 8 doesn't support rgba, fall back to a light blue */
background: #95b9e6;
border-radius: 4px;
bottom: 8px;
left: 8px;
padding: 2px;
position: absolute;
}
.ol-scale-line:not([ie8andbelow]) {
/* IE <= 8 doesn't support rgba, fall back to a light blue */
background: rgba(0,60,136,0.3);
}
.ol-scale-line-inner {
border: 1px solid #eeeeee;
border-top: none;
@@ -129,10 +164,15 @@ a.ol-full-screen-true:after {
position: absolute;
top: 8px;
left: 8px;
background: rgba(255,255,255,0.4);
/* IE <= 8 doesn't support rgba, fall back to a light grey */
background-color: #eee;
border-radius: 4px;
padding: 2px;
}
/* IE <= 8 doesn't support rgba, fall back to a light grey */
.ol-zoom:not([ie8andbelow]) {
background-color: rgba(255,255,255,0.4);
}
@media print {
.ol-zoom {
display: none;
@@ -152,7 +192,12 @@ a.ol-full-screen-true:after {
height: 22px;
width: 22px;
line-height: 19px;
background: rgba(0,60,136,0.5);
/* IE <= 8 doesn't support rgba, fall back to a light blue */
background-color: #7b98bc;
}
.ol-zoom a:not([ie8andbelow]) {
/* IE <= 8 doesn't support rgba, fall back to a light blue */
background-color: rgba(0,60,136,0.5);
}
.ol-touch .ol-zoom a {
font-size: 20px;
@@ -163,7 +208,12 @@ a.ol-full-screen-true:after {
.ol-zoom a:hover {
color: #fff;
text-decoration: none;
background: rgba(0,60,136,0.7);
/* IE <= 8 doesn't support rgba, fall back to a lighter blue */
background-color: #4c6079;
}
.ol-zoom a:hover:not([ie8andbelow]) {
/* IE <= 8 doesn't support rgba, fall back to a lighter blue */
background-color: rgba(0,60,136,0.7);
}
.ol-zoom-in {
@@ -184,7 +234,8 @@ a.ol-full-screen-true:after {
position: absolute;
top: 67px;
left: 8px;
background: rgba(255, 255, 255, 0.4);
/* IE <= 8 doesn't support rgba, fall back to a light grey */
background: #eee;
border-radius: 4px;
width: 28px;
height: 200px;
@@ -193,26 +244,40 @@ a.ol-full-screen-true:after {
padding: 0;
margin: 0;
}
.ol-zoomslider:not([ie8andbelow]) {
/* IE <= 8 doesn't support rgba, fall back to a light grey */
background: rgba(255, 255, 255, 0.4);
}
.ol-zoomslider-thumb {
position: absolute;
display: block;
padding: 0;
margin: 2px;
background: rgba(0,60,136,0.5);
/* IE <= 8 doesn't support rgba, fall back to a lighter blue */
background: #7b98bc;
border-radius: 2px;
outline: none;
overflow: hidden;
height: 20px;
width: 24px;
}
.ol-zoomslider-thumb:not([ie8andbelow]) {
/* IE <= 8 doesn't support rgba, fall back to a lighter blue */
background: rgba(0,60,136,0.5);
}
.ol-zoom-extent {
position: absolute;
background: rgba(255,255,255,0.4);
/* IE <= 8 doesn't support rgba, fall back to a light grey */
background: #eee;
border-radius: 4px;
left: 8px;
padding: 2px;
top: 65px;
}
.ol-zoom-extent:not([ie8andbelow]) {
/* IE <= 8 doesn't support rgba, fall back to a light grey */
background: rgba(255,255,255,0.4);
}
@media print {
.ol-zoom-extent {
display: none;
@@ -230,9 +295,14 @@ a.ol-full-screen-true:after {
text-align: center;
height: 22px;
width: 22px;
background-color: rgba(0, 60, 136, 0.5);
/* IE <= 8 doesn't support rgba, fall back to a lighter blue */
background-color: #7b98bc;
border-radius: 2px;
}
.ol-zoom-extent a:not([ie8andbelow]) {
/* IE <= 8 doesn't support rgba, fall back to a lighter blue */
background-color: rgba(0, 60, 136, 0.5);
}
.ol-touch .ol-zoom-extent a {
font-size: 20px;
height: 30px;
@@ -240,6 +310,11 @@ a.ol-full-screen-true:after {
line-height: 26px;
}
.ol-zoom-extent a:hover {
/* IE <= 8 doesn't support rgba, fall back to a lighter blue */
background-color: #4c6079;
}
.ol-zoom-extent a:hover:not([ie8andbelow]) {
/* IE <= 8 doesn't support rgba, fall back to a lighter blue */
background-color: rgba(0, 60, 136, 0.7);
}
.ol-zoom-extent a:after {