Skip to content

Instantly share code, notes, and snippets.

@ysrinivasreddy

ysrinivasreddy/Windows-8-Prototype.markdown

Created November 9, 2013 16:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ysrinivasreddy/7387083 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ysrinivasreddy/7387083 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Rahul Kapoor.
Raw
index.html
<div id="app-wrapper"></div>
<div id="container">
<div id="header">
<h1 class="modal-trigger" rel="modal-notice" id="modal-notice-trigger">Rahul Kapoor</h1>
<div id="user-bit">
<a class="user-bit-wrap menu-trigger" rel="user-bit-menu" href="#">
<span class="user-bit-name">
Rahul
</span>
<span class="user-bit-photo">
<img src="http://vastyles.net/images/user-bit-photo.png" alt="user" />
</span>
</a>
<ul id="user-bit-menu" rel="user-bit-menu" class="menu">
<li><a href="http://www.coolinfoforme.blogspot.com">Change account picture</a></li>
<li><a href="">Lock</a></li>
<li><a href="">Sign out</a></li>
</ul>
</div>
</div>
<div class="tiles-wrap">
<div class="tiles">
<div class="tile-page">
<div class="tile-col">
<div class="tile tile-smaller app app-store" rel="app" data-file="app-store.html">
<span class="tile-icon"></span>
<span class="tile-title">Store <var>4</var></span>
</div>
<div class="tile tile-smaller app app-xbox" rel="app" data-file="app-xbox.html">
<span class="tile-icon"></span>
<span class="tile-title">Xbox Live Games</span>
</div>
<div class="tile tile-smaller app app-maps" rel="app" data-file="app-maps.html">
<span class="tile-icon"></span>
<span class="tile-title">Maps</span>
</div>
<div class="tile tile-smaller app app-ie" rel="app" data-file="app-ie.html">
<span class="tile-icon"></span>
<span class="tile-title">Internet Explorer</span>
</div>
<div class="tile app app-video" rel="app" data-file="app-video.html">
<span class="tile-icon"></span>
<span class="tile-title">Video</span>
</div>
<div class="tile app app-desktop">
<span class="tile-icon"></span>
<span class="tile-title">Desktop</span>
</div>
</div>
<div class="tile-col">
<div class="tile app app-photos" rel="app" data-file="app-photos.html">
<span class="tile-icon"></span>
<span class="tile-title">Photos</span>
</div>
<div class="tile app app-messaging" rel="app" data-file="app-messaging.html">
<span class="tile-icon"></span>
<span class="tile-title">Messaging</span>
</div>
<div class="tile app app-mail" rel="app" data-file="app-mail.html">
<span class="tile-icon"></span>
<span class="tile-title">Mail</span>
</div>
<div class="tile app app-weather" rel="app" data-file="app-weather.html">
<span class="tile-icon"></span>
<span class="tile-title">Weather</span>
</div>
</div>
<div class="tile-col">
<div class="tile app app-calendar" rel="app" data-file="app-calendar.html">
<span class="tile-icon"></span>
<span class="tile-title">Calendar</span>
</div>
<div class="tile app app-people" rel="app" data-file="app-people.html">
<span class="tile-icon"></span>
<span class="tile-title">People</span>
</div>
<div class="tile tile-smaller app app-pinballfx2" rel="app" data-file="app-pinballfx2.html">
<span class="tile-icon"></span>
<span class="tile-title">Pinball FX2</span>
<span class="tile-xboxlive"></span>
</div>
<div class="tile tile-smaller app app-solitaire" rel="app" data-file="app-solitaire.html">
<span class="tile-icon"></span>
<span class="tile-title">Solitaire</span>
<span class="tile-xboxlive"></span>
</div>
<div class="tile tile-smaller app app-camera" rel="app" data-file="app-camera.html">
<span class="tile-icon"></span>
<span class="tile-title">Camera</span>
</div>
<div class="tile tile-smaller app app-xboxcompanion" rel="app" data-file="app-xboxcompanion.html">
<span class="tile-icon"></span>
<span class="tile-title">Xbox Companion</span>
</div>
</div>
</div>
<div class="tile-page">
<div class="tile-col">
<div class="tile tile app app-music" rel="app" data-file="app-music.html">
<span class="tile-icon"></span>
<span class="tile-title">Music</span>
</div>
<div class="tile tile-smaller app app-skydrive" rel="app" data-file="app-skydrive.html">
<span class="tile-icon"></span>
<span class="tile-title">Skydrive</span>
</div>
<div class="tile tile-smaller app app-remote" rel="app" data-file="app-remote.html">
<span class="tile-icon"></span>
<span class="tile-title">Remote Desktop</span>
</div>
<div class="tile app app-finance" rel="app" data-file="app-finance.html">
<span class="tile-icon"></span>
<span class="tile-title">Finance</span>
</div>
<div class="tile tile-smaller app app-reader" rel="app" data-file="app-reader.html">
<span class="tile-icon"></span>
<span class="tile-title">Reader</span>
</div>
<div class="tile tile-smaller app-windowsexplorer">
<span class="tile-icon"></span>
<span class="tile-title">Windows Explorer</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="charms-zone"></div>
<span id="charms-trigger"></span>
<div id="charms">
<div class="charms-wrap">
<div class="charm charm-item-search" rel="panel" data-file="panel-search.html">
<span class="charm-icon"></span>
<span class="charm-title">Search</span>
</div>
<div class="charm charm-item-share" rel="panel" data-file="panel-share.html">
<span class="charm-icon"></span>
<span class="charm-title">Share</span>
</div>
<div class="charm charm-item-start close-app">
<span class="charm-icon"></span>
<span class="charm-title">Start</span>
</div>
<div class="charm charm-item-devices" rel="panel" data-file="panel-devices.html">
<span class="charm-icon"></span>
<span class="charm-title">Devices</span>
</div>
<div class="charm charm-item-settings" rel="panel" data-file="panel-settings.html">
<span class="charm-icon"></span>
<span class="charm-title">Settings</span>
</div>
</div>
</div>
<div id="clock">
<div class="clock-icons">
<span class="clock-icon plugged-in"></span>
</div>
<div class="clock-time">
<span class="clock-time-hours">0</span><span class="clock-time-dots">:</span><span class="clock-time-minutes">00</span>
</div>
<div class="clock-date">
<span class="clock-date-day">Day</span><br />
<span class="clock-date-month">Month</span>
<span class="clock-date-date">1</span>
</div>
</div>
<div id="panel"></div>
<div id="modal-notice" class="modal-window" style="display:none">
<div class="modal-content">
<h2>What the...</h3>
<p>
This is just a little project to mimic the Windows 8 Metro UI.<br />
Created by <a href="https://twitter.com/forrahul">Rahul Kapoor</a>, <!--; Windows is a registered trademarks of Microsoft Corporation-->
</p>
<p>Works best in Webkit based browsers (Safari & Chrome), limited support Firefox, Opera, and IE 10</p>
<div class="buttons">
<a class="close button default" href="#">Continue</a>
<a class="button" href="https://twitter.com/forrahul">@forrahul</a>
</div>
</div>
</div>
<div id="overlay"></div>
Raw
script.js
$(document).ready(function() {
// Modal Bits
$(".modal-trigger").click(function() { launchModalWindow($(this).attr("rel")); return false; });
$("#overlay").live('click',function() { closeModalWindow(); });
$(".close").live('click',function() { closeModalWindow(); });
// Launch modal window
function launchModalWindow(elm) {
$("#"+elm).center().fadeIn(400);
$("#overlay").css("opacity", 0.45).fadeIn(300);
}
// Close modal window
function closeModalWindow() {
$(".modal-window, #overlay").fadeOut(200);
}
// Center modal window
$.fn.center = function() {
this.css({
'position': 'fixed',
'top': '50%'
});
this.css({
'margin-top': -this.height() / 2 + 'px'
});
return this;
}
// Dropdown Menus
$(".menu-trigger").live('click', function() { launchPopup($(this).attr("rel")); return false; });
$("body").click(function() {
closePopup();
$(".tiles").removeClass("overview");
$('#panel').empty().removeClass("open");
});
// Load dropdown menu
function launchPopup(elm) {
closePopup();
$(".menu-trigger[rel='" + elm + "']").toggleClass("active");
$(".menu[rel='" + elm + "']").css('marginTop', '-8px').toggleClass("open").animate({opacity:"toggle",'marginTop':'0'}, 100);
}
// Close all dropdown menus
function closePopup() {
$(".menu").removeClass("open").fadeOut(100);
$(".menu-trigger").removeClass("active");
}
// Tiles
$(".tile").mouseup(function(){ $(this).removeClass("active"); }).mousedown(function(){ $(this).addClass("active"); });
// Charms
$("#charms-zone").mouseenter(function(){
$("#charms").addClass("open").show().css({opacity:1}).animate({right:0}, 400);
});
$("#charms").mouseleave(function(){
$(this).removeClass("open").fadeToggle(300).delay(300).animate({'right':'-86px'}, 0).removeClass("active").show();
$("#clock").removeClass("active");
});
$(".charms-wrap").mouseenter(function(){
$("#charms").addClass("active");
$("#clock").addClass("active");
});
$("#charms-trigger").live('click',function() {
$(".tiles").toggleClass("overview");
});
// Load Panel
$("[rel=panel]").live('click',function() {
$.get($(this).attr("data-file"), function(data) {
$('#panel').html(data).addClass("open");
});
});
// Close Panel
$(".close-panel").live('click',function() {
$('#panel').empty().removeClass("open");;
});
// Load App - Danke Simon
$("[rel=app]").live('click',function() {
$.get($(this).attr("data-file"), function(data) {
$('#app-wrapper').html(data).addClass("open");
});
$("#charms-trigger").fadeOut(100);
});
// Close App
$(".close-app").live('click',function() {
$('#app-wrapper').empty().removeClass("open");
$("#charms-trigger").fadeIn(300);
});
// Timmy Hates and Sucks at Javascript
$("#modal-notice-trigger").click();
// Clock crap - Danke alessioatzeni.com
var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
// Create a newDate() object
var newDate = new Date();
// Extract the current date from Date object
newDate.setDate(newDate.getDate());
// Output the day, date, month and year
$('.clock-date-day').html(dayNames[newDate.getDay()]);
$('.clock-date-month').html(monthNames[newDate.getMonth()]);
$('.clock-date-date').html(newDate.getDate());
setInterval( function() {
// Create a newDate() object and extract the minutes of the current time on the visitor's
var minutes = new Date().getMinutes();
// Add a leading zero to the minutes value
$(".clock-time-minutes").html(( minutes < 10 ? "0" : "" ) + minutes);
},1000);
setInterval( function() {
// Create a newDate() object and extract the hours of the current time on the visitor's
var hours = new Date().getHours();
// Add a leading zero to the hours value
$(".clock-time-hours").html(hours);
}, 1000);
});
Raw
style.css
@font-face{
font-family: 'Segoe UI';
src: url('http://www.vastyles.com/fonts/segoe-ui-light-webfont.ttf') format('woff');
font-weight: 100;
}
@font-face{
font-family: 'Segoe UI';
src: url('http://www.vastyles.net/fonts/segoe-ui-webfont.ttf') format('woff');
font-weight: 400;
}
* { margin: 0; padding: 0; list-style: none; }
a { outline: none; text-decoration: none; }
html,
body { height: 100%; overflow: hidden; width: 100%; }
body { background: #004050 url(http://www.vastyles.net/images/body-bottom.png) repeat-x left bottom; color: #fff; font-family: "Segoe WP", "Segoe UI", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; /* -webkit-transform: translate3d(0,0,0); */ }
input,
textarea,
select { font-family: "Segoe WP", "Segoe UI", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; }
#container { position: relative; background: url(http://www.vastyles.net/images/body-top.png) repeat-x left top; }
#header { padding: 49px 36px 75px 120px; height: 56px; }
@media all and (max-height: 672px) {
#header { padding: 24px 36px 35px 120px; height: 56px; }
}
#header h1 { font-size: 56px; line-height: 56px; font-weight: 100; display: block; float: left; }
#user-bit { margin-top: 2px; display: block; float: right; position: relative; }
.user-bit-wrap { height: 40px; display: block; padding: 8px 10px 9px; cursor: default; -ms-transition: -ms-transform .2s ease-in-out; -webkit-transition: -webkit-transform .2s ease-in-out; -o-transition: -o-transform .2s ease-in-out; -moz-transition: -moz-transform .2s ease-in-out; transition: transform .2s ease-in-out; -ms-transform: scale(1,1); -webkit-transform: scale(1,1); -o-transform: scale(1,1); -moz-transform: scale(1,1); transform: scale(1,1); color: rgba(255,255,255,.85); }
.user-bit-wrap:hover { background-color: #206475; color: rgba(255,255,255,1); }
.user-bit-wrap:active { -ms-transform: scale(0.95,0.95); -webkit-transform: scale(0.95,0.95); -o-transform: scale(0.95,0.95); -moz-transform: scale(0.95,0.95); transform: scale(0.95,0.95); }
.user-bit-wrap.active { background-color: transparent !important; -ms-transform: scale(1,1); -webkit-transform: scale(1,1); -o-transform: scale(1,1); -moz-transform: scale(1,1); transform: scale(1,1); }
.user-bit-name { float: left; font-size: 27px; font-weight: 200; display: block; line-height: 39px; text-align: right; vertical-align: text-top; white-space: nowrap; padding: 0 0 1px 3px; }
.user-bit-photo { padding-left: 10px; height: 40px; width: 40px; display: inline-block; vertical-align: text-top; }
#user-bit-menu { right: 10px; }
.menu { border: 2px solid #292929; background: #fff; color: #666; padding: 5px 0; position: absolute; top: 100%; display: none; z-index: 9; }
.menu.open { }
.menu > li { }
.menu > li > a { display: block; line-height: 37px; padding: 0 21px; min-width: 228px; color: #000; font-weight: 400; font-size: 15px; }
.menu > li > a:hover { background-color: #dedede; }
.tiles-wrap { overflow: auto; margin-left: 116px; position: relative; }
.tiles { overflow: hidden; width: 1120px; -ms-transition: all .2s linear; -webkit-transition: all .2s linear; -o-transition: all .2s linear; -moz-transition: all .2s linear; transition: all .2s linear; }
.tiles.overview { -ms-transform: translate(-420px,0) scale(.25,.25); -webkit-transform: translate(-420px,0) scale(.25,.25); -o-transform: translate(-420px,0) scale(.25,.25); -moz-transform: translate(-420px,0) scale(.25,.25); transform: translate(-420px,0) scale(.25,.25); }
.tiles.overview .tile-title { display: none; }
.tiles.overview .tile-icon { -ms-transform: scale(4,4); -webkit-transform: scale(3.5,3.5); -o-transform: scale(4,4); -moz-transform: scale(4,4); transform: scale(4,4); top: 35%; left: 0; right: 0; bottom: 35%; margin: 0 auto; }
.tiles.overview .app .tile-icon { -ms-transform: scale(1,1); -webkit-transform: scale(1,1); -o-transform: scale(1,1); -moz-transform: scale(1,1); transform: scale(1,1); top: 0; left: 0; right: 0; bottom: 0; }
.tiles.overview .tile-page { background: rgba(255,255,255,.01); border: 3px solid rgba(255,255,255,.01); margin: -3px 45px -3px -3px; }
.tiles.overview .tile-page:hover { background: rgba(255,255,255,.125); border: 3px solid rgba(255,255,255,.125); }
.tiles.overview .tile-page:active { -ms-transform: scale(0.95,0.95); -webkit-transform: scale(0.95,0.95); -o-transform: scale(0.95,0.95); -moz-transform: scale(0.95,0.95); transform: scale(0.95,0.95); }
.tiles.overview .tile:hover { border-color: transparent; }
.tiles.overview .tile.active { -ms-transform: scale(1,1); -webkit-transform: scale(1,1); -o-transform: scale(1,1); -moz-transform: scale(1,1); transform: scale(1,1); }
.tile-page { margin-right: 48px; float: left; }
.tile-col { float: left; width: 256px; }
.tile { cursor: default; width: 248px; height: 120px; display: block; float: left; margin: 1px; border: 3px solid rgba(255,255,255,0.01); box-shadow: inset rgba(255,255,255,.1) 0 0 -1px; background-clip: padding-box; color: #fff; background-color: #00475a; background-image: -webkit-gradient(linear, left center, right center, from(rgba(255, 255, 255, 0.00)), to(rgba(255, 255, 255, 0.10))); background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.00), rgba(255, 255, 255, 0.10)); background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0.00), rgba(255, 255, 255, 0.10)); background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0.00), rgba(255, 255, 255, 0.10)); background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 0.00), rgba(255, 255, 255, 0.10)); background-image: linear-gradient(left, rgba(255, 255, 255, 0.00), rgba(255, 255, 255, 0.10)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#ffffff', EndColorStr='#ffffff'); position: relative; clear: left; -ms-transition: -ms-transform .2s ease-in-out; -webkit-transition: -webkit-transform .2s ease-in-out; -o-transition: -o-transform .2s ease-in-out; -moz-transition: -moz-transform .2s ease-in-out; transition: transform .2s ease-in-out; -ms-transform: scale(1,1); -webkit-transform: scale(1,1); -o-transform: scale(1,1); -moz-transform: scale(1,1); transform: scale(1,1); }
.tile:hover { margin: 1px; border-color: rgba(255,255,255,.125); }
.tile.active { -ms-transform: scale(0.95,0.95); -webkit-transform: scale(0.95,0.95); -o-transform: scale(0.95,0.95); -moz-transform: scale(0.95,0.95); transform: scale(0.95,0.95); }
.tile-smaller { clear: none; width: 120px; }
.tile-icon { position: absolute; left: 16px; bottom: 8px; width: 32px; height: 32px; background-repeat: no-repeat; background-position: center center; display: block; background-image: url(http://www.vastyles.net/images/tile-icon.png); }
.tile-title { font-size: 17px; line-height: 20px; color: rgba(255,255,255,.65); display: block; top: 16px; left: 16px; right: 16px; position: absolute; }
.tile.app { background-color: #1d7983; }
.app .tile-icon { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center center; background-image: url(http://www.vastyles.net/images/tile-app-icon.png); display: block; width: 100%; height: 100%; }
.app .tile-title { font-size: 12px; line-height: 12px; color: #fff; display: block; top: auto; bottom: 7px; left: 16px; right: 8px; position: absolute; }
.app .tile-title var { font-weight: 700; font-style: normal; font-size: 15px; position: absolute; right: 0; margin: 1px 2px 0 0; }
.tile-xboxlive { position: absolute; top: 0; left: 0; right: 0; height: 12px; background: url(http://www/vastyles.net/images/tile-xboxlive.png) no-repeat right top; }
.tile.app-store,
.tile.app-ie,
.tile.app-weather,
.tile.app-solitaire,
.tile.app-skydrive { background-color: #3c80ee !important; }
.tile.app-store .tile-icon { background-image: url(http://www.vastyles.net/images/icon-app-store.png); }
.tile.app-ie .tile-icon { background-image: url(http://www.vastyles.net/images/icon-app-ie.png); }
.tile.app-weather .tile-icon { background-image: url(http://www.vastyles.net/images/icon-app-weather.png); }
.tile.app-solitaire .tile-icon { background-image: url(http://www.vastyles.net/images/icon-app-solitaire.png); }
.tile.app-skydrive .tile-icon { background-image: url(http://www.vastyles.net/images/icon-app-skydrive.png); }
.tile.app-xbox,
.tile.app-xboxcompanion { background-color: #5aa518 !important; }
.tile.app-xbox .tile-icon { background-image: url(http://www.vastyles.net/images/icon-app-xbox.png); }
.tile.app-xboxcompanion .tile-icon { background-image: url(http://www.vastyles.net/images/icon-app-xboxcompanion.png); }
.tile.app-maps,
.tile.app-messaging,
.tile.app-music { background-color: #5132ab !important; }
.tile.app-maps .tile-icon { background-image: url(http://www.vastyles.net/images/icon-app-maps.png); }
.tile.app-messaging .tile-icon { background-image: url(http://www.vastyles.net/images/icon-app-messaging.png); }
.tile.app-music .tile-icon { background-image: url(http://www.vastyles.net/images/icon-app-music.png); }
.tile.app-video { background-color: #d24725 !important; }
.tile.app-video .tile-icon { background-image: url(http://www.vastyles.net/images/icon-app-video.png); }
.tile.app-photos,
.tile.app-camera { background-color: #ac183c !important; }
.tile.app-photos .tile-icon { background-image: url(http://www.vastyles.net/images/icon-app-photos.png); }
.tile.app-camera .tile-icon { background-image: url(http://www.vastyles.net/images/icon-app-camera.png); }
.tile.app-mail,
.tile.app-calendar,
.tile.app-finance { background-color: #008a16 !important; }
.tile.app-mail .tile-icon { background-image: url(http://www.vastyles.net/images/icon-app-mail.png); }
.tile.app-calendar .tile-icon { background-image: url(http://www.vastyles.net/images/icon-app-calendar.png); }
.tile.app-finance .tile-icon { background-image: url(http://www.vastyles.net/images/icon-app-finance.png); }
.tile.app-people,
.tile.app-remote,
.tile.app-reader { background-color: #d24725 !important; }
.tile.app-people .tile-icon { background-image: url(http://www.vastyles.net/images/icon-app-people.png); }
.tile.app-remote .tile-icon { background-image: url(http://www.vastyles.net/images/icon-app-remote.png); }
.tile.app-reader .tile-icon { background-image: url(http://www.vastyles.net/images/icon-app-reader.png); }
.tile.app-desktop { background-color: #0d757d !important; }
.tile.app-desktop .tile-icon { background-image: url(http://www.vastyles.net/images/icon-app-desktop.png); }
.tile.app-pinballfx2 { background-color: #000 !important; }
.tile.app-pinballfx2 .tile-icon { background-image: url(http://www.vastyles.net/images/icon-app-pinballfx2.png); }
#charms-zone { width: 24px; position: absolute; bottom: 0; right: 0; top: 0; z-index: 98; background: rgba(0,0,0,.05); }
#charms-trigger { z-index: 100; display: block; position: absolute; bottom: 0; right: 0; width: 24px; height: 17px; background: url(http://www.vastyles.net/images/charms-trigger.png) no-repeat right bottom; opacity: .5; }
#charms-trigger:hover { opacity: .75; }
#charms { display: none; width: 86px; position: absolute; z-index: 99; top: 0; right: -86px; bottom: 0; text-align: center; -ms-transition: background-color .3s ease-in; -webkit-transition: background-color .3s ease-in; -o-transition: background-color .3s ease-in; -moz-transition: background-color .3s ease-in; transition: background-color .3s ease-in; }
#charms.open { display: block; }
#charms.active { background-color: #101010; color: #fff; }
.charms-wrap { position: absolute; top: 50%; height: 510px; padding-top: 10px; margin-top: -210px; left: 0; right: 0; }
.charm { position: relative; height: 100px; text-align: center; color: #a0a0a0; -ms-transition: background-color .1s ease-in-out; -webkit-transition: background-color .1s ease-in-out; -o-transition: background-color .1s ease-in-out; -moz-transition: background-color .1s ease-in-out; transition: background-color .1s ease-in-out; }
#charms.active .charm:hover { background-color: #212121; }
#charms.active .charm:active { background-color: #323232; }
.charm-icon { height: 48px; width: 48px; background-position: center center; background-repeat: no-repeat; display: inline-block; margin: 14px auto 0; }
.charm-title { display: block; text-align: center; font-size: 15px; font-weight: 400; line-height: 15px; opacity: 0; }
#charms.active .charm-title { opacity: 1; }
.charm-item-search .charm-icon { background-image: url(http://www.vastyles.net/images/icon-charm-search.png); }
.charm-item-share .charm-icon { background-image: url(http://www.vastyles.net/images/icon-charm-share.png); }
.charm-item-start .charm-icon { background-image: url(http://www.vastyles.net/images/icon-charm-start.png); }
#charms.active .charm-item-start .charm-icon { background-image: url(http://www.vastyles.net/images/icon-charm-start-active.png); }
.charm-item-devices .charm-icon { background-image: url(http://www.vastyles.net/images/icon-charm-devices.png); }
.charm-item-settings .charm-icon { background-image: url(http://www.vastyles.net/images/icon-charm-settings.png); }
@-webkit-keyframes charm {
0% { margin-right: -86px; }
100% { margin-right: 0; }
}
@-moz-keyframes charm {
0% { margin-right: -86px; }
100% { margin-right: 0; }
}
@-ms-keyframes charm {
0% { margin-right: -86px; }
100% { margin-right: 0; }
}
@-o-keyframes charm {
0% { margin-right: -86px; }
100% { margin-right: 0; }
}
@keyframes charm {
0% { margin-right: -86px; }
100% { margin-right: 0; }
}
#charms.open .charm { -webkit-animation-name: charm; -moz-animation-name: charm; -ms-animation-name: charm; -o-animation-name: charm; animation-name: charm; }
.charm { -webkit-transform-style: preserve-3d; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; -webkit-animation-duration: .25s; -webkit-animation-fill-mode: both; -moz-transform-style: preserve-3d; -moz-animation-timing-function: ease-in-out; -moz-animation-iteration-count: 1; -moz-animation-duration: .25s; -moz-animation-fill-mode: both; -ms-transform-style: preserve-3d; -ms-animation-timing-function: ease-in-out; -ms-animation-iteration-count: 1; -ms-animation-duration: .25s; -ms-animation-fill-mode: both; -o-transform-style: preserve-3d; -o-animation-timing-function: ease-in-out; -o-animation-iteration-count: 1; -o-animation-duration: .25s; -o-animation-fill-mode: both; transform-style: preserve-3d; animation-timing-function: ease-in-out; animation-iteration-count: 1; animation-duration: .25s; animation-fill-mode: both; }
.charm-item-start { -webkit-animation-delay: .1s; -moz-animation-delay: .1s; -ms-animation-delay: .1s; -o-animation-delay: .1s; animation-delay: .1s; }
.charm-item-share,
.charm-item-devices { -webkit-animation-delay: .15s; -moz-animation-delay: .15s; -ms-animation-delay: .15s; -o-animation-delay: .15s; animation-delay: .15s; }
.charm-item-search,
.charm-item-settings { -webkit-animation-delay: .2s; -moz-animation-delay: .2s; -ms-animation-delay: .2s; -o-animation-delay: .2s; animation-delay: .2s; }
#clock { opacity: 0; position: absolute; bottom: 48px; left: 50px; z-index: 99; background-color: rgba(10,10,10,.95); color: #fff; overflow: hidden; padding: 20px 40px; -ms-transition: opacity .3s ease-in; -webkit-transition: opacity .3s ease-in; -o-transition: opacity .3s ease-in; -moz-transition: opacity .3s ease-in; transition: opacity .3s ease-in; }
#clock.active { opacity: 1; }
.clock-icons { width: 22px; margin-right: 38px; float: left; height: 62px; padding: 19px 0; }
.clock-icon { display: block; width: 22px; height: 22px; }
.clock-icon.plugged-in { background: url(http://www.vastyles.net/images/clock-icon-pluggedin.png) no-repeat center center; }
.clock-time { font-size: 84px; font-weight: 100; float: left; line-height: 90px; padding: 0 0 10px; overflow: hidden; }
.clock-time span { float: left; }
.clock-time .clock-time-dots { margin-top: -9px; }
.clock-date { font-size: 31px; font-weight: 300; line-height: 38px; float: right; padding: 9px 0 15px; margin-left: 22px; }
#overlay { display: none; background: black; bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 998; }
.modal-window { display: none; background-color: #004d60; min-height: 100px; z-index: 999; left: 0; right: 0; }
.modal-window .modal-content { width: 680px; margin: 0 auto; padding: 30px 0; color: #fff; }
.modal-window .modal-content h2 { font-size: 27px; line-height: 27px; font-weight: 300; margin-bottom: 12px; }
.modal-window .modal-content p { font-size: 15px; line-height: 20px; margin-bottom: 12px; }
.modal-window a { color: #1dd3db; }
.buttons { text-align: right; clear: both; margin-top: 20px; }
.button { color: #fff !important; line-height: 28px; text-align: center; font-weight: 600; font-size: 15px; min-width: 86px; display: inline-block; border: 2px solid #fff; cursor: default; }
.button:hover { background-color: #215967 }
.button.default { background-color: #008287; }
.button.default:hover { background-color: #219297; }
.button:active { background-color: #fff !important; color: #000 !important; }
.button + .button { margin-left: 16px; }
#start-preview { position: absolute; bottom: 0; left: 0; display: block; height: 32px; width: 32px; background: url(http://www.vastyles.net/images/start-preview.png) no-repeat 32px 32px; z-index: 98; opacity: .25; -ms-transition: opacity .1s ease-in; -webkit-transition: opacity .1s ease-in; -o-transition: opacity .1s ease-in; -moz-transition: opacity .1s ease-in; transition: opacity .1s ease-in; }
#start-preview:hover { background-position: 0 0; width: 172px; height: 114px; opacity: 1; }
#app-wrapper { -webkit-perspective: 1500px; -moz-perspective: 600px; -ms-perspective: 600px; -o-perspective: 600px; perspective: 600px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
#app-wrapper.open { z-index: 97; }
#app { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #3c80ee url(http://www.vastyles.net/images/app.png) no-repeat center center; z-index: 97; -webkit-transform-style: preserve-3d; -ms-transition: -ms-transform .6s ease-in-out; -webkit-transition: -webkit-transform .6s ease-in-out; -o-transition: -o-transform .6s ease-in-out; -moz-transition: -moz-transform .6s ease-in-out; transition: transform .6s ease-in-out; -webkit-transform: scale(.25,.25) rotateY( -180deg ); -moz-transform: scale(.25,.25) rotateY( -90deg ); -ms-transform: scale(.25,.25) rotateY( -90deg ); -o-transform: scale(.25,.25) rotateY( -90deg ); transform: scale(.25,.25) rotateY( -90deg ); }
#app-wrapper.open #app { -webkit-transform: rotateY( 0deg ) scale(1,1); -moz-transform: rotateY( 0deg ) scale(1,1); -ms-transform: rotateY( 0deg ) scale(1,1); -o-transform: rotateY( 0deg ) scale(1,1); transform: rotateY( 0deg ) scale(1,1); }
#app.app-store { background: #fff url(http://www.vastyles.net/images/apps/store.jpg) no-repeat; }
#app.app-xbox { background: #afb0b0 url(http://www.vastyles.net/images/apps/xbox.jpg) no-repeat; }
#app.app-maps { background: #e9e4e1 url(http://www.vastyles.net/images/apps/maps.jpg) no-repeat; }
#app.app-ie { background: #101010 url(http://www.vastyles.net/images/apps/ie.jpg) no-repeat; }
#app.app-video { background: #afb0b0 url(http://www.vastyles.net/images/apps/video.jpg) no-repeat; }
#app.app-photos { background: #1c1c1c url(http://www.vastyles.net/images/apps/photos.jpg) no-repeat; }
#app.app-messaging { background: #f4f4f4 url(http://www.vastyles.net/images/apps/messaging.jpg) no-repeat; }
#app.app-mail { background: #e5e5e5 url(http://www.vastyles.net/images/apps/mail.jpg) no-repeat; }
#app.app-weather { background: #000 url(http://www.vastyles.net/images/apps/weather.jpg) no-repeat; }
#app.app-calendar { background: #f2f2f2 url(http://www.vastyles.net/images/apps/calendar.jpg) no-repeat; }
#app.app-people { background: #f4f4f4 url(http://www.vastyles.net/images/apps/people.jpg) no-repeat; }
#app.app-pinballfx2 { background: #000 url(http://www.vastyles.net/images/apps/pinballfx2.jpg) no-repeat; }
#app.app-solitaire { background: #1c6500 url(http://www.vastyles.net/images/apps/solitaire.jpg) no-repeat; }
#app.app-camera { background: #0b0b0b url(http://www.vastyles.net/images/apps/camera.jpg) no-repeat; }
#app.app-xboxcompanion { background: #afb0b0 url(http://www.vastyles.net/images/apps/xboxcompanion.jpg) no-repeat; }
#app.app-music { background: #afb0b0 url(http://www.vastyles.net/images/apps/music.jpg) no-repeat; }
#app.app-skydrive { background: #fff url(http://www.vastyles.net/images/apps/skydrive.jpg) no-repeat; }
#app.app-remote { background: #202020 url(http://www.vastyles.net/images/apps/remote.jpg) no-repeat; }
#app.app-finance { background: #d4e7f3 url(http://www.vastyles.net/images/apps/finance.jpg) no-repeat; }
#app.app-reader { background: #1c1c1c url(http://www.vastyles.net/images/apps/reader.jpg) no-repeat; }
#panel { overflow: hidden; position: absolute; top: 0; bottom: 0; right: -346px; height: 100%; width: 345px; border-left: 1px solid #000; background: #004d60; z-index: 150; -ms-transition: right .25s ease-out; -webkit-transition: right .25s ease-out; -o-transition: right .25s ease-out; -moz-transition: right .25s ease-out; transition: right .25s ease-out; }
#panel.open { right: 0; }
#panel .sub-panel { position: relative; left: 40px; -ms-transition: all .45s ease-out; -webkit-transition: all .45s ease-out; -o-transition: all .45s ease-out; -moz-transition: all .45s ease-out; transition: all .45s ease-out; }
#panel.open .sub-panel { left: 0; }
#panel .panel-back { display: block; float: left; margin-right: 12px; vertical-align: text-bottom; height: 28px; width: 28px; background: url(http://www.vastyles.net/images/panel-back.png) no-repeat 0 0; border-radius: 12px; }
#panel .panel-back:hover { background-position: 0 -28px; }
#panel .panel-back:active { background-position: 0 -56px; }
#panel h2 { font-size: 26px; font-weight: 400; line-height: 28px; margin: 36px 12px 26px 41px; }
#panel p { font-size: 15px; line-height: 20px; margin-bottom: 12px; }
#panel .bits { margin: 26px 12px 16px 43px; }
#panel hr { border: 0; border-top: 1px solid #003b49; margin: 10px 40px 11px; height: 0; background: transparent; }
.search { margin: -12px 0 24px 40px; }
.search-wrap { background: #fff; padding: 2px; height: 28px; width: 262px; overflow: hidden; display: block; overflow: hidden; }
.search-wrap .search-input { float: left; width: 218px; -moz-appearance: textfield; -webkit-appearance: textfield; appearance: textfield; -webkit-box-sizing: content-box; background: #fff; font-size: 15px; font-weight: 300; height: 24px; line-height: 24px; color: #000; border: 0; padding: 1px 7px; outline: none; }
.search-wrap .search-button { width: 28px; height: 28px; display: block; float: right; background: url(http://www.vastyles.net/images/panel-search-button.png) no-repeat 0 0; }
.search-wrap .search-button:hover { background-position: 0 -28px; }
.search-wrap .search-button:active { background-position: 0 -56px; }
.list { }
.list-item { color: #1dd3db; line-height: 30px; padding: 10px 10px 10px 44px; -ms-transition: -ms-transform .2s ease-in-out; -webkit-transition: -webkit-transform .2s ease-in-out; -o-transition: -o-transform .2s ease-in-out; -moz-transition: -moz-transform .2s ease-in-out; transition: transform .2s ease-in-out; -ms-transform: scale(1,1); -webkit-transform: scale(1,1); -o-transform: scale(1,1); -moz-transform: scale(1,1); transform: scale(1,1); }
.list-item:hover { background-color: #216475; }
.list-item:active { -ms-transform: scale(0.95,0.95); -webkit-transform: scale(0.95,0.95); -o-transform: scale(0.95,0.95); -moz-transform: scale(0.95,0.95); transform: scale(0.95,0.95); }
.list-item.active { background-color: #008287; }
.icon-list { margin: 5px 0; }
.icon-list .list-item { color: #fff; min-height: 40px; line-height: 20px; }
.list-item-icon { float: left; width: 40px; height: 40px; margin: 0 14px 0 -4px; background-color: #219297; background-position: center center; background-repeat: no-repeat; }
.list-item-icon.apps { background-image: url(http://www.vastyles.net/images/icon-list-apps.png); }
.list-item-icon.settings { background-image: url(http://www.vastyles.net/images/icon-list-settings.png); }
.list-item-icon.files { background-image: url(http://www.vastyles.net/images/icon-list-files.png); }
.list-item-icon.ie { background-image: url(http://www.vastyles.net/images/icon-list-ie.png); background-color: #3c80ee; }
.list-item-icon.secondscreen { background-image: url(http://www.vastyles.net/images/icon-list-secondscreen.png); }
Raw
Windows-8-Prototype.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment