Stylisation de l'application.
Chouchen
13 years ago
parent
e5415117a1
commit
f6aae7e077
@ -1,152 +0,0 @@
|
||||
#fancyClock{
|
||||
|
||||
margin:40px auto;
|
||||
|
||||
height:100px;
|
||||
|
||||
/*border:1px solid #111111;*/
|
||||
|
||||
width:300px;
|
||||
float:left;
|
||||
|
||||
}
|
||||
#fancyClock:after{content: div;clear:both;}
|
||||
|
||||
.clock{
|
||||
|
||||
/* The .clock div. Created dynamically by jQuery */
|
||||
background:url(../images/interface/clock.png) top left no-repeat;
|
||||
background-color:#FFF;
|
||||
|
||||
height:100px;
|
||||
|
||||
width:100px;
|
||||
|
||||
position:relative;
|
||||
|
||||
overflow:hidden;
|
||||
|
||||
float:left;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.clock .rotate{
|
||||
|
||||
/* There are two .rotate divs - one for each half of the background */
|
||||
|
||||
position:absolute;
|
||||
|
||||
width:100px;
|
||||
|
||||
height:100px;
|
||||
|
||||
top:0;
|
||||
|
||||
left:0;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.rotate.right{
|
||||
|
||||
display:none;
|
||||
|
||||
z-index:11;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.clock .bg, .clock .front{
|
||||
|
||||
width:50px;
|
||||
|
||||
height:100px;
|
||||
|
||||
background-color:#FFF;
|
||||
|
||||
position:absolute;
|
||||
|
||||
top:0;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.clock .display{
|
||||
|
||||
/* Holds the number of seconds, minutes or hours respectfully */
|
||||
|
||||
position:absolute;
|
||||
|
||||
width:100px;
|
||||
|
||||
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||
|
||||
z-index:20;
|
||||
|
||||
color:#F5F5F5;
|
||||
|
||||
font-size:30px;
|
||||
|
||||
text-align:center;
|
||||
|
||||
top:33px;
|
||||
|
||||
left:0;
|
||||
|
||||
|
||||
|
||||
/* CSS3 text shadow: */
|
||||
|
||||
text-shadow:4px 4px 5px #333333;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* The left part of the background: */
|
||||
|
||||
|
||||
|
||||
.clock .bg.left{ left:0; }
|
||||
|
||||
|
||||
|
||||
/* Individual styles for each color: */
|
||||
|
||||
.orange .bg.left{ background:url(../images/bg_orange.png) no-repeat left top; }
|
||||
|
||||
.green .bg.left{ background:url(../images/bg_green.png) no-repeat left top; }
|
||||
|
||||
.blue .bg.left{ background:url(../images/bg_blue.png) no-repeat left top; }
|
||||
|
||||
|
||||
|
||||
/* The right part of the background: */
|
||||
|
||||
.clock .bg.right{ left:100px; }
|
||||
|
||||
|
||||
|
||||
.orange .bg.right{ background:url(../images/bg_orange.png) no-repeat right top; }
|
||||
|
||||
.green .bg.right{ background:url(../images/bg_green.png) no-repeat right top; }
|
||||
|
||||
.blue .bg.right{ background:url(../images/bg_blue.png) no-repeat right top; }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.clock .front.left{
|
||||
|
||||
left:0;
|
||||
|
||||
z-index:10;
|
||||
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
#todoList {/*position:absolute; bottom:10px; left: 100px;*/padding:5px;width:350px;-webkit-border-radius: 5px;
|
||||
#todoList {padding:5px;width:350px;-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;border: 1px solid rgba(0,0,0,0.3);
|
||||
-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.15);
|
||||
-moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.15);}
|
||||
@ -1,4 +1,6 @@
|
||||
#weather {position:absolute; top:10px; left: 100px;padding:5px;-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;border: 1px solid rgba(0,0,0,0.3);
|
||||
-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.15);
|
||||
-moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.15);}
|
||||
-moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.15);}
|
||||
|
||||
#city-submit{cursor:pointer;}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 762 B |
Binary file not shown.
|
After Width: | Height: | Size: 610 B |
Binary file not shown.
|
After Width: | Height: | Size: 694 B |
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue