gecko/content/candies/original/index.html
Ian Gilman a78be22cf5 + moved groups.js and resizer.png to shared locations
+ more work on groups pushing things out of the way
+ some steps toward having groups and tabs share an interface
+ more geometry: we now have a point class, and the rect class now has center and intersect routines

--HG--
rename : content/candies/zoomgroups/gfx/resizer.png => browser/themes/pinstripe/browser/tabcandy/shared/resizer.png
2010-03-25 17:22:45 -07:00

159 lines
3.9 KiB
HTML

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
<head>
<title>Switch</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<link rel="icon" href="chrome://tabcandy/content/tabcandy.png"/>
<link rel="stylesheet" href="../../css/shared/groups.css" type="text/css">
<style media="screen" type="text/css">
html, body {
margin: 0;
padding: 0;
font-family: Geneva;
}
.tab{
position: absolute;
display: block;
float:left;
margin: 10px;
padding: 0;
background-color: rgba(255,255,255,.8);
z-index: 0;
width: 160px;
height: 137px;
}
.fav{
position: absolute;
width: 16px;
height: 16px;
background-color: rgba(255,255,255,.8);
-moz-border-radius: 0 0 5px 0;
padding: 3px;
-moz-box-shadow: 1px 1px 3px rgba(0,0,0,.2);
}
.thumb{
width: 100%;
height: 80%;
background-color: #ccc;
-moz-box-shadow: 1px 1px 10px rgba(0,0,0,.3);
}
.thumb:hover{
-moz-box-shadow: 1px 1px 10px rgba(0,0,0,.5);
}
.name{
font-size: 9px;
display:block;
width:160px;
white-space: nowrap;
overflow: hidden;
}
.name:before{
display:inline-block;
height:12px;
width:20px;
content:" ";
position: absolute;
right:0px;
background: -moz-linear-gradient(0deg, rgba(255,255,255,0), white);
overflow: hidden;
}
.close{
position: absolute;
top:12px; right:0;
margin: 1px;
width:12px; height:12px;
background-color: rgba(0,0,0,.6);
font-size: 10px;
text-align: center;
line-height:13px;
color: #DDD;
cursor: pointer;
-moz-border-radius: 10px;
-moz-box-shadow: inset 1px 1px 0px rgba(0,0,0,.5), inset -1px -1px 0px rgba(255,255,255,.5);
text-shadow: 1px 1px 1px rgba(0,0,0,.5);
font-family: Helvetica;
}
.titlebar .close {
top: 2px;
right: 2px;
}
.search{width:100%; margin-top: 30px; text-align: center; margin-bottom: 30px;}
.search input{ width: 300px; font-size: 16pt;}
#actions{
position: absolute;
top: 5px;
right: 5px;
font-size: 11px;
}
.unhighlight{
opacity: .1;
z-index: -100;
}
.lasso-menu{
background-color: white;
width: 100px;
height: 100px;
border: 1px solid #DDD;
-moz-box-shadow: 2px 2px 4px rgba(0,0,0,.5);
line-height: 100px;
text-align: center;
cursor: pointer;
}
.scale-animate{
-moz-transition-property: height, width, left, top;
-moz-transition-duration: .17s;
-moz-transition-timing-function: cubic-bezier(1.0, 0.0, 1.0, 1.0);
}
.scale-down-animate{
-moz-transition-property: height, width, left, top;
-moz-transition-duration: .26s;
-moz-transition-timing-function: ease-out;
}
</style>
</head>
<body>
<div class="search">
<input type="text"/>
</div>
<div id="actions">
<a id="tabbar" href="#">Toggle Tab Bar</a>
</div>
<script type="text/javascript;version=1.8" src="../../js/core/jquery.js"></script>
<script type="text/javascript;version=1.8" src="../../js/optional/jquery-ui.js"></script>
<script type="text/javascript;version=1.8" src="../../js/core/utils.js"></script>
<script type="text/javascript;version=1.8" src="../../js/core/tabs.js"></script>
<script type="text/javascript;version=1.8" src="../../js/core/mirror.js"></script>
<script type="text/javascript;version=1.8" src="js/ui.js"></script>
<script type="text/javascript;version=1.8" src="../../js/shared/groups.js"></script>
<!-- BEGIN Switch Control -->
<script type="text/javascript;version=1.8" src="../../js/optional/switch.js"></script>
<script type="text/javascript;version=1.8">
Switch.insert('body', '');
</script>
<!-- END Switch Control -->
</body>
</html>