From a1a6a1e6509c8e4766f03d99ea090c5902620550 Mon Sep 17 00:00:00 2001 From: "M. Voerman" Date: Sat, 15 Nov 2014 15:34:23 +0100 Subject: Make skin also ready for 576p & 720p part 4 --- images/background.png | Bin 33702 -> 0 bytes images/black/background.png | Bin 0 -> 33702 bytes images/black/mute.png | Bin 0 -> 9001 bytes images/black/osd-bg.png | Bin 0 -> 993 bytes images/black/unmute.png | Bin 0 -> 7472 bytes images/blue/mute.png | Bin 0 -> 9001 bytes images/blue/unmute.png | Bin 0 -> 7472 bytes images/mute.png | Bin 9001 -> 0 bytes images/osd-bg.png | Bin 993 -> 0 bytes images/unmute.png | Bin 7472 -> 0 bytes index.html | 4 +- javascript/main.js | 92 ++++++++++++++++++++++++------------------- javascript/settings.js | 4 +- javascript/settings2.js | 5 ++- skins/blue.css | 94 ++++++++++++++++++++++++++------------------ 15 files changed, 114 insertions(+), 85 deletions(-) delete mode 100644 images/background.png create mode 100644 images/black/background.png create mode 100644 images/black/mute.png create mode 100644 images/black/osd-bg.png create mode 100644 images/black/unmute.png create mode 100644 images/blue/mute.png create mode 100644 images/blue/unmute.png delete mode 100644 images/mute.png delete mode 100644 images/osd-bg.png delete mode 100644 images/unmute.png diff --git a/images/background.png b/images/background.png deleted file mode 100644 index 8b1d392..0000000 Binary files a/images/background.png and /dev/null differ diff --git a/images/black/background.png b/images/black/background.png new file mode 100644 index 0000000..8b1d392 Binary files /dev/null and b/images/black/background.png differ diff --git a/images/black/mute.png b/images/black/mute.png new file mode 100644 index 0000000..44e9547 Binary files /dev/null and b/images/black/mute.png differ diff --git a/images/black/osd-bg.png b/images/black/osd-bg.png new file mode 100644 index 0000000..a116650 Binary files /dev/null and b/images/black/osd-bg.png differ diff --git a/images/black/unmute.png b/images/black/unmute.png new file mode 100644 index 0000000..70000a8 Binary files /dev/null and b/images/black/unmute.png differ diff --git a/images/blue/mute.png b/images/blue/mute.png new file mode 100644 index 0000000..44e9547 Binary files /dev/null and b/images/blue/mute.png differ diff --git a/images/blue/unmute.png b/images/blue/unmute.png new file mode 100644 index 0000000..70000a8 Binary files /dev/null and b/images/blue/unmute.png differ diff --git a/images/mute.png b/images/mute.png deleted file mode 100644 index 44e9547..0000000 Binary files a/images/mute.png and /dev/null differ diff --git a/images/osd-bg.png b/images/osd-bg.png deleted file mode 100644 index a116650..0000000 Binary files a/images/osd-bg.png and /dev/null differ diff --git a/images/unmute.png b/images/unmute.png deleted file mode 100644 index 70000a8..0000000 Binary files a/images/unmute.png and /dev/null differ diff --git a/index.html b/index.html index c68eb78..5d1e3c9 100644 --- a/index.html +++ b/index.html @@ -28,7 +28,7 @@
-
Volume :
+
@@ -44,7 +44,7 @@
-
+
diff --git a/javascript/main.js b/javascript/main.js index 292aad3..c2f8ef1 100644 --- a/javascript/main.js +++ b/javascript/main.js @@ -65,7 +65,7 @@ function onLoad() { setOSDtimer(); showOSD(); videoplane.subtitles = Boolean(ShowSubs); - colorkeys.innerHTML = " " + NN[4] + " " + NN[1] + " " + NN[2] + " " + NN[5] + " "; + colorkeys.innerHTML = "
" + " " +  NN[4] + "  " + NN[1] + "  " + NN[2] + "  " + NN[5] + " 
"; medialist.innerHTML = "

" + Lang[0] + "

"; } @@ -237,7 +237,7 @@ function loadcss(filename){ var oScript= document.createElement("link"); oScript.type = "text/css"; oScript.rel = "stylesheet"; - oScript.href = "skins/" + filename; + oScript.href = "skins/" + filename + ".css"; oHead.appendChild( oScript); } @@ -357,6 +357,7 @@ function VolumeMute() { state = aos.getMuteState(AudioOut); aos.setMuteState(AudioOut, !state); mute = 1 - state; + osdmute.innerHTML = ""; osdmute.style.opacity = mute; } @@ -785,12 +786,12 @@ function onKeyDown(event) { if (lang_prio_dyn.length > 1) { is.setObject("cfg.media.audio.languagepriority",lang_prio_dyn[audio_dyn] + "," + lang_prio[audio],is.STORAGE_PERMANENT); osdlang.style.opacity = 1; - osdlang.innerHTML = "
" + " " + lang_prio_dyn[audio_dyn] + " 
"; + osdlang.innerHTML = "
" + "\n" + lang_prio_dyn[audio_dyn] + " 
"; setTimeout("osdlang.style.opacity = 0; ", 3000); } } } else if(isSchedule == 0 && !epgactive){ - colorkeys.innerHTML = " " + NN[3 + NowNext] + " " + NN[NowNext] + " " + NN[2] + " " + NN[5] + " "; + colorkeys.innerHTML = "
" + " " +  NN[3 + NowNext] + "  " + NN[NowNext] + "  " + NN[2] + "  " + NN[5] + " 
"; NowNext = 1 - NowNext; showChannelList(); } @@ -818,9 +819,9 @@ function onKeyDown(event) { schedule.style.opacity = 1 - schedule.style.opacity; isSchedule = schedule.style.opacity; if(isSchedule == 1){ - colorkeys.innerHTML = " " + NN[4] + " " + NN[4] + " " + NN[6] + " " + NN[4] + " "; + colorkeys.innerHTML = "
" + " " +  NN[4] + "  " + NN[4] + "  " + NN[6] + "  " + NN[4] + " 
"; } else { - colorkeys.innerHTML = " " + NN[3 + (1 - NowNext)] + " " + NN[1 - NowNext] + " " + NN[2] + " " + NN[5] + " "; + colorkeys.innerHTML = "
" + " " +  NN[3 + (1 - NowNext)] + "  " + NN[1 - NowNext] + "  " + NN[2] + "  " + NN[5] + " 
"; } } break; @@ -864,9 +865,10 @@ function onKeyDown(event) { if(isSchedule) { isSchedule = 0; schedule.style.opacity = 0; - colorkeys.innerHTML = " " + NN[3 + (1 - NowNext)] + " " + colorkeys.innerHTML = "
" + " " 
+				+  NN[3 + (1 - NowNext)] + "  " 
 				+ NN[1 - NowNext] + "  " + NN[2] + "  " 
-				+ NN[5] + " ";
+				+ NN[5] + " 
"; break; } @@ -915,7 +917,7 @@ function onKeyDown(event) { showOSD(); GetEPG(currChan); updateOSDtime(currChan); - osdepg.innerHTML = "
" + EPG[0][7][currChan] + "\n" + EPG[1][7][currChan] + "
"; + osdepg.innerHTML = "
" + EPG[0][7][currChan] + "
\n
" + EPG[1][7][currChan] + "
"; // showOSD(); } else { CheckChannel(Change); @@ -1382,13 +1384,13 @@ function OSDchannr(channr) { function OSDhtml(){ osdtime.innerHTML = "" + result + ""; if (ShowSource == 1) { - osdname.innerHTML = "" + channels[currChan].split("-")[0] + "\uE003" + Left(channelsnames[currChan],30) + ""; + osdname.innerHTML = "" + channels[currChan].split("-")[0] + "\uE003" + channelsnames[currChan] + ""; } else { - osdname.innerHTML = "" + Left(channelsnames[currChan],30) + ""; + osdname.innerHTML = "" + channelsnames[currChan] + ""; } - osdepg.innerHTML = "
" + EPG[0][7][currChan] + "\n" + EPG[1][7][currChan] + "
"; - osdepginfo.innerHTML = "

" + currChan + "\uE003" + channelsnames[currChan] + "

" + AvInfo[currChan] + "

" + EPG[0][7][currChan] + EPG[0][9][currChan] + EPG[0][8][currChan] + "

\n

" + EPG[0][4][currChan] + "

\n

" + Left(EPG[0][5][currChan],750) + "

"; - osdepginfonext.innerHTML = "

" + currChan + "\uE003" + channelsnames[currChan] + "

" + EPG[1][7][currChan] + EPG[1][9][currChan] + EPG[1][8][currChan] + "

\n

" + EPG[1][4][currChan] + "

\n

" + Left(EPG[1][5][currChan],750) + "

"; + osdepg.innerHTML = "
" + EPG[0][7][currChan] + "
\n
" + EPG[1][7][currChan] + "
"; + osdepginfo.innerHTML = "" + "

" + currChan + "\uE003" + channelsnames[currChan] + "

" + AvInfo[currChan] + "

" + EPG[0][7][currChan] + EPG[0][9][currChan] + EPG[0][8][currChan] + "

\n

" + EPG[0][4][currChan] + "

\n

" + Left(EPG[0][5][currChan],750) + "

"; + osdepginfonext.innerHTML = "" + "

" + currChan + "\uE003" + channelsnames[currChan] + "

" + EPG[1][7][currChan] + EPG[1][9][currChan] + EPG[1][8][currChan] + "

\n

" + EPG[1][4][currChan] + "

\n

" + Left(EPG[1][5][currChan],750) + "

"; } function updateOSDtime(timchan) { @@ -1481,7 +1483,7 @@ if (!BackGroundColor) { BackGroundColor = color_default;} } // switchtimer.style.background = BackGroundColor; - switchtimer.innerHTML = "
" + Lang[2] + Left(ProgName,30) + "\n" + Lang[3] + channelsnames[currChan] + "\n" + x + "
"; + switchtimer.innerHTML = "
" + Lang[2] + ProgName + "\n" + Lang[3] + channelsnames[currChan] + "\n" + x + "
"; setOSDtimer(); switchtimer.style.opacity = 1; @@ -1736,7 +1738,8 @@ function GetEPG(epgchan) var th = tijd.getHours(); th=addzero(th); tm=addzero(tm); - EPG[1][7][epgchan] = th + ":" + tm + " (" + (event.duration/60).toFixed(0) + ")" + " " + event.name + " "; +// EPG[1][7][epgchan] = th + ":" + tm + " (" + (event.duration/60).toFixed(0) + ")" + " " + event.name + " "; + EPG[1][7][epgchan] = th + ":" + tm + " (" + (event.duration/60).toFixed(0) + ") " + event.name + " "; if (!event.time) { @@ -2211,13 +2214,13 @@ function onKeyMenu(keyCode) { if (menu == 5) { // Show EPG info Timer osdepginfo.style.opacity = 1 - osdepginfo.style.opacity; - osdepginfo.innerHTML = "
\n\n\n" + Lang[0] + "\n\n\n 
" ; + osdepginfo.innerHTML = "" + "

\n\n\n" + Lang[0] + "\n\n\n

" ; setTimeout("ShowTimerInfo();",100); } if (menu == 7) { // Show more info Current SearchTimer osdepginfo.style.opacity = 1 - osdepginfo.style.opacity; - osdepginfo.innerHTML = "

" + searchtimersSearch[timerID] + "\n\n\n\n" + Lang[0] + "

" ; + osdepginfo.innerHTML = "" + "

" + searchtimersSearch[timerID] + "\n\n\n\n" + Lang[0] + "

" ; setTimeout("ShowSearchTimerInfo();",100); } @@ -2359,8 +2362,6 @@ function onKeyMenu(keyCode) { css_nr += 1; if (css_nr > (cssfile.length - 1)) { css_nr = 0;} loadcss(cssfile[css_nr]); - alert(css_nr); - alert(cssfile[css_nr]); is.setObject("vip.css_nr",css_nr.toString(),is.STORAGE_PERMANENT) setTimeout("InitMenu(menu);",100); } else if (menu == 2) { @@ -2368,15 +2369,20 @@ function onKeyMenu(keyCode) { var x = ss.getBookingIds("*", 0, 0); var y = Number(ss.getParameter(x[timerID-1], "Channel")); osdepginfo.style.opacity = 1 - osdepginfo.style.opacity; - osdepginfo.innerHTML = "
" + ss.getParameter(x[timerID-1], "Title") + "\n " + "\n" + y + " - " + channelsnames[y] + "(" + ss.getParameter(x[timerID-1], "Eventid") + ")" + "\n 

" + ss.getParameter(x[timerID-1], "Info") + "

" ; + osdepginfo.innerHTML = "" + "

" + + ss.getParameter(x[timerID-1], "Title") + "\n " + "\n" + y + " - " + + channelsnames[y] + "(" + ss.getParameter(x[timerID-1], "Eventid") + ")" + + "\n

" + ss.getParameter(x[timerID-1], "Info") + "

" ; } else if (menu == 5) { // Show EPG info Timer osdepginfo.style.opacity = 1 - osdepginfo.style.opacity; - osdepginfo.innerHTML = "
\n\n\n" + Lang[0] + "\n\n\n 
" ; + osdepginfo.innerHTML = "" + "

\n\n\n" + + Lang[0] + "\n\n\n

" ; setTimeout("ShowTimerInfo();",100); } else if (menu == 7) { // Show info SearchTimers - osdepginfo.innerHTML = "
" + SearchTimer[timerID] + "
"; + osdepginfo.innerHTML = "" + "

" + + SearchTimer[timerID] + "

"; osdepginfo.style.opacity = 1 - osdepginfo.style.opacity; } else if (menu == 10) { if (protChn[ChanGroup] !== 1 && ChanGroup !== Fav_group) { @@ -2727,7 +2733,7 @@ if(menu == 1) { // settings menu htmltext += "\n\n \u25CF -" + Lang[20]; htmltext += "\u25CF - " + VideoOutputModes_txt[VideoOutputModes[Set_Res]] + " "; htmltext += "\u25CF -" + Lang[35]; - htmltext += "\u25CF - " + Left(cssfile[css_nr].split(".")[0],8) +""; + htmltext += "\u25CF - " + Left(cssfile[css_nr],8) +""; // htmltext += "\n 0 -" + Lang[9] +""; mainmenu.innerHTML = htmltext; } @@ -3108,8 +3114,10 @@ function ShowTimerInfo() { } else { info3 = Lang[37]; } - osdepginfo.innerHTML = "
" + Left(info1,60) + "\n " + timersDays[timerID] + " " + 
-	timersStrt[timerID] + " - " + timersStop[timerID] + "\n" + info2 + "\n 

" + info3 + Left(info4,750) + "

" ; + osdepginfo.innerHTML = "" + "

" + + Left(info1,60) + "\n " + timersDays[timerID] + " " + + timersStrt[timerID] + " - " + timersStop[timerID] + "\n" + + info2 + "\n " + info3 + Left(info4,750) + "

" ; } } @@ -3245,7 +3253,8 @@ function ShowSearchTimerInfo() { } - osdepginfo.innerHTML = "
" + searchtimersSearch[timerID] + "\n " + info1 + "
" ; + osdepginfo.innerHTML = "" + + "

" + searchtimersSearch[timerID] + "\n " + info1 + "

" ; } @@ -3608,7 +3617,7 @@ if (DelisOK) { if (lang_prio_dyn.length > 1) { is.setObject("cfg.media.audio.languagepriority",lang_prio_dyn[audio_dyn] + "," + lang_prio[audio],is.STORAGE_PERMANENT); osdlang.style.opacity = 1; - osdlang.innerHTML = "
" + " " + lang_prio_dyn[audio_dyn] + " 
"; + osdlang.innerHTML = "
" + "\n" + lang_prio_dyn[audio_dyn] + " 
"; setTimeout("osdlang.style.opacity = 0; ", 3000); } break; @@ -4187,7 +4196,7 @@ try { //popup for confirm switchtimer.style.background = "red"; switchtimer.style.opacity = 1; - switchtimer.innerHTML = "
" + Lang[44] +"\n" + Lang[45] + "\n\n " + Left(recTitl[currMed],30) + "
"; // Recording Name + switchtimer.innerHTML = "
" + Lang[44] +"\n" + Lang[45] + "\n\n " + recTitl[currMed] + "
"; // Recording Name DelisOK = 1 } catch(e) { alert("Delete Recordings problem: " + e); @@ -4497,7 +4506,7 @@ function showMediaList() { if (recList[listMed]) { //Solves empty string at the end. if ( listMed == currMed) { htmlstring += ""; } - htmlstring += "\uE003" + Left(recList[listMed],60) + "\uE003\uE003\n"; + htmlstring += "\uE003" + recList[listMed] + "\uE003\uE003\n"; if ( listMed == currMed) { htmlstring += "";} } @@ -4897,11 +4906,12 @@ function ShowInfo() { if ( medialist.style.opacity == 0 ) { updateStreamInfo(currMed);} else { AvInfo[currMed] = "";} if (get_recordings == 2) { result = recStrt[currMed] - osdepginfo.innerHTML = "

" + Left(recTitl[currMed],60) - + "\n

" + AvInfo[currMed] - + "

" + result + "\n " + osdepginfo.innerHTML = "" + + "

" + Left(recTitl[currMed],60) + + "

" + AvInfo[currMed] + + "

" + result + "
" + "???" + Lang[54] - + "

Sorry STREAMDEV-plugin : " + Lang[37] + "

"; + + "

Sorry STREAMDEV-plugin : " + Lang[37] + "

"; } else { date = new Date(Number(recStrt[currMed])*1000); year = date.getFullYear(); @@ -4915,15 +4925,17 @@ function ShowInfo() { result = '' + days[day] + ' ' + d + ' ' + months[month] + ' ' + year + ' ' + h + ':' + m; if (year!==1970) { - osdepginfo.innerHTML = "

" + Left(recTitl[currMed],60) + osdepginfo.innerHTML = "" + + "

" + Left(recTitl[currMed],60) + "

" + AvInfo[currMed] - + "

" + result + "\n " - + (recDura[currMed] / 60).toFixed(0) + Lang[54] + "\n " + recChan[currMed] + " " - + "\n

" + Left(recDesc[currMed],750) + "

"; + + "

" + result + "
" + + (recDura[currMed] / 60).toFixed(0) + Lang[54] + "
" + recChan[currMed] + + "

" + Left(recDesc[currMed],750) + "

"; } else { //info for non-vdr recordings - osdepginfo.innerHTML = "

" + Left(recTitl[currMed],60) - + "\n

" + AvInfo[currMed] + " " + "\n \n

"; + osdepginfo.innerHTML = "" + + "

" + Left(recTitl[currMed],60) + + "

" + AvInfo[currMed] + " " + "

"; } } } diff --git a/javascript/settings.js b/javascript/settings.js index eece108..db06608 100644 --- a/javascript/settings.js +++ b/javascript/settings.js @@ -2,7 +2,7 @@ // Default settings // -var Version = "0.26.5"; +var Version = "0.26.6"; server_ip_array = new Array("http://192.168.1.15","http://192.168.3.15","http://192.168.178.56","http://192.168.3.100","http://192.168.178.19","http://192.168.1.21","http://192.168.2.100","http://192.168.178.52"); @@ -14,7 +14,7 @@ OSDLang = new Array ("English", "Nederlands", "Deutsch"); langfile = new Array ("languages/lang_eng.js", "languages/lang_dut.js","languages/lang_ger.js"); lang_prio = new Array("dut,eng,und","ger,deu,eng","eng,und","fre,fra,eng"); -cssfile = new Array ("blue.css","black.css"); +cssfile = new Array ("blue","black"); cssres = new Array(); cssres[0] = new Array ("576","720","1080"); //blue.css cssres[1] = new Array ("","",""); //black.css diff --git a/javascript/settings2.js b/javascript/settings2.js index 3aa5a91..e24ade7 100644 --- a/javascript/settings2.js +++ b/javascript/settings2.js @@ -25,9 +25,10 @@ function GuideView_start() { isFullscreen = 0; ClearScreen(); channellist.style.opacity = 1; - colorkeys.innerHTML = " " + NN[3 + (1 - NowNext)] + " " + colorkeys.innerHTML = "
" + " "
+				+  NN[3 + (1 - NowNext)] + "  " 
 				+ NN[1 - NowNext] + "  " + NN[2] + "  " 
-				+ NN[5] + " ";
+				+ NN[5] + " 
"; colorkeys.style.opacity = 1; showChannelList(); if(!SwitchGuide) { diff --git a/skins/blue.css b/skins/blue.css index 8521206..8700d5a 100644 --- a/skins/blue.css +++ b/skins/blue.css @@ -26,8 +26,20 @@ color :green; } + pre.colorkeys576 { + font-size:19px; + } + + pre.colorkeys720 { + font-size:24px; + } + + pre.colorkeys1080 { + font-size:36px; + } + .mainfont576 { - font-size:26px; + font-size:18px; color:black; } @@ -42,7 +54,7 @@ } .osdnr576 { - font-size:43px; + font-size:36px; } .osdnr720 { @@ -71,7 +83,7 @@ .osdtime576 { color : white; - font-size:17px; + font-size:12px; text-align: right; } @@ -104,7 +116,7 @@ .osdca576 { color : black; - font-size:32px; + font-size:20px; } .osdca720 { @@ -119,7 +131,7 @@ pre.osdvolume576 { color : green; - font-size:35px; + font-size:26px; } pre.osdvolume720 { @@ -139,11 +151,11 @@ pre.osdepg720 { color : white; - font-size:23px; + font-size:25px; } pre.osdepg1080 { color : white; - font-size:36px; + font-size:40px; } .notset { @@ -176,6 +188,7 @@ -webkit-border-radius:25px; color:black; font-size:21px; + overflow:hidden; } .mediaselect720 { @@ -183,6 +196,7 @@ -webkit-border-radius:25px; color:black; font-size:26px; + overflow:hidden; } .mediaselect1080 { @@ -190,21 +204,25 @@ -webkit-border-radius:25px; color:black; font-size:38px; + overflow:hidden; } pre.mediamenu576 { font-size:21px; color:black; + overflow:hidden; } pre.mediamenu720 { font-size:26px; color:black; + overflow:hidden; } pre.mediamenu1080 { font-size:38px; color:black; + overflow:hidden; } pre.deletefile576 { @@ -249,34 +267,40 @@ background :red; } - p.epg_head { - color:white; + .osdepginfo576 { + font-size:19px; + text-align: center; + } + + .osdepginfo720 { + font-size:26px; text-align: center; + } + + .osdepginfo1080 { font-size:39px; + text-align: center; + } + + + p.epg_head { + color:white; } p.epg_avinfo { color:black; - text-align: center; - font-size:39px; } p.epg_title { color:white; - text-align: center; - font-size:39px; } p.epg_info { color:yellow; - text-align: center; - font-size:39px; } p.epg_info_long { color:yellow; - text-align: center; - font-size:39px; } pre.color_switchtimer576 { @@ -335,7 +359,7 @@ h1.mainmenu576 { - font-size:35px; + font-size:28px; color:white; text-align: center; } @@ -353,7 +377,7 @@ } pre.mainmenu576 { - font-size:26px; + font-size:25px; color:black; } @@ -387,7 +411,7 @@ pre.media576 { color:white; - font-size:26px; + font-size:18px; } pre.media720 { @@ -400,15 +424,6 @@ font-size:49px; } - pre.epgtimerinfo { - color:white; - text-align: center; - } - - p.epgtimerinfo { - text-align: center; - } - p.epg576 { font-size:19px; color:black; @@ -488,9 +503,10 @@ z-index : 505; position : absolute; width : 69%; - height : 4%; + height : 20%; left : 3%; top : 20%; + overflow:hidden; } @@ -506,16 +522,17 @@ z-index : 505; position : absolute; width : 42%; - right : 5%; + right : 3%; top : 7%; } div#osdepg { z-index : 505; position : absolute; - width : 63%; + width : 78%; left : 17%; top : 30%; + overflow:hidden; } div#osdca { @@ -536,24 +553,19 @@ background : #bbb; } -/* */ - div#colorkeys { z-index : 401; position : absolute; width : 100%; left : 10%; top : 84%; - font-size:36px; } -/* */ - div#osdmediatime { z-index : 506; position : absolute; width : 42%; - right : 15%; + right : 5%; top : 63%; color : white; } @@ -580,7 +592,7 @@ position : absolute; width : 63%; left : 10%; - top : 80%; + top : 75%; opacity : 0; } @@ -593,6 +605,7 @@ opacity :0; -webkit-border-radius:50px; background : #3366ff; + overflow:hidden; } div#schedule { @@ -626,6 +639,7 @@ opacity :0; -webkit-border-radius:50px; background : #3366ff; + overflow:hidden; } div#medialist { @@ -645,10 +659,12 @@ position :absolute; left :21%; top :26%; + height :18%; z-index :530; opacity :0; -webkit-border-radius:25px; background :lightblue; + overflow:hidden; } div#osdepginfo { -- cgit v1.2.3