Skip to content

Commit

Permalink
Improve control styling for legacy IE versions
Browse files Browse the repository at this point in the history 
IE < 9 does not support RGBA transparency, so instead fall back to
more readable alternatives where possible.

Conflicts:
	css/ol.css
  • Loading branch information
@austinhyde
austinhyde committed Feb 5, 2014
1 parent f7ec082 commit eebf730
Showing 1 changed file with 89 additions and 14 deletions.
103 changes: 89 additions & 14 deletions css/ol.css
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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;
Expand All @@ -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";
}
Expand All @@ -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 {
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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 {
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -230,16 +295,26 @@ 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;
width: 30px;
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 {
Expand Down

0 comments on commit eebf730

Please sign in to comment.