зеркало из https://github.com/mozilla/bedrock.git
Merge branch 'firefox' into dev
This commit is contained in:
Steven Garrity
Коммит
529fd6c15a
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
<div id="main-feature">
|
||||
<div class="row">
|
||||
<hgroup>
|
||||
<hgroup class="stacked">
|
||||
<h1>Easy Ways To <span class="large">Personalize</span></h1>
|
||||
<h4>When it comes to browsing, one size doesn’t fit all—customize Firefox pretty much any way you like!</h4>
|
||||
</hgroup>
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@
|
|||
|
||||
{% block content %}
|
||||
|
||||
<div id="main-feature">
|
||||
<h1>Blazing <span class="huge">Performance</span></h1>
|
||||
<div id="main-feature" class="stacked">
|
||||
<h1>Blazing <span class="large">Performance</span></h1>
|
||||
{{ download_button('download', 'small') }}
|
||||
|
||||
<script src="/media/js/download.js"></script>
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@
|
|||
{% block content %}
|
||||
|
||||
|
||||
<div id="main-feature">
|
||||
<h1>Firefox Helps You <span class="huge">Stay Safe</span></h1>
|
||||
<div id="main-feature" class="stacked">
|
||||
<h1>Firefox Helps You <span class="large">Stay Safe</span></h1>
|
||||
{{ download_button('download', 'small') }}
|
||||
|
||||
<script src="/media/js/download.js"></script>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
<div id="main-feature">
|
||||
<div class="row">
|
||||
<hgroup>
|
||||
<hgroup class="stacked">
|
||||
<h1>Built on Open <span class="large">Technology</span></h1>
|
||||
<h4>Powerful new innovations that change the way you build the Web</h4>
|
||||
</hgroup>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@ section.container#privacy {
|
|||
.small;
|
||||
}
|
||||
h4 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,452 @@
|
|||
|
||||
#wall section article #click-star {
|
||||
height: 160px;
|
||||
width: 162px;
|
||||
background: url(/media/img/firefox/technology/click-star.png);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: 150px;
|
||||
}
|
||||
|
||||
#wall section article #click-star span {
|
||||
font-family: MetaBlack,"Trebuchet MS",sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
color: #a1acb8;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
display: block;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
#wall #html5 {
|
||||
background: url(/img/covehead/divider-notch-main.jpg) 50% 0 no-repeat;
|
||||
padding-top: 55px;
|
||||
}
|
||||
|
||||
#wall article.article {
|
||||
background: url(/img/covehead/divider-notch.jpg) 50% 0 no-repeat;
|
||||
padding: 40px 0;
|
||||
clear: both;
|
||||
overflow: auto;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
#wall .intro p,
|
||||
#wall .intro h1 {
|
||||
width: 550px;
|
||||
}
|
||||
|
||||
.top-link {
|
||||
float: right;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.top-link a {
|
||||
background: url(/media/img/firefox/technology/page-top.png) 0 0 no-repeat;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
padding-left: 25px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* }}} */
|
||||
/***** @font-face *****/
|
||||
@font-face { font-family: megalopolis; src: url(/media/fonts/MEgalopolisExtra.woff);}
|
||||
|
||||
|
||||
/***** general stuff *****/
|
||||
|
||||
#plzwait { display: none; }
|
||||
body.loading #plzwait {display: block; width: 100%; height: 100%; text-align: center; padding-top: 200px;}
|
||||
body.loading #wall {opacity: 0;}
|
||||
|
||||
#wall { padding: 20px 0; margin: auto; margin-top: 10px; clear: both; position: relative; }
|
||||
|
||||
#shortcredit a { color: #555; }
|
||||
#shortcredit { opacity: 0.5; top: -150px; right: 0px; font-size: 10px; color: #777; position: relative; width: 100%; text-align: right; }
|
||||
#shortcredit:hover {opacity: 1;}
|
||||
|
||||
#longcredits a { color: black; }
|
||||
#longcredits {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
/* Title */
|
||||
#wall section article article h1 { font-size: 18px; letter-spacing: 0px; vertical-align: bottom; position: absolute; bottom: 200px; font-style: normal; }
|
||||
|
||||
|
||||
#wall section article article {transition-duration: 1s; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; width: 265px; display: inline-block; margin: 10px 0; padding: 10px 15px; height: 250px; vertical-align: middle; position: relative; background-image: url(/media/img/firefox/technology/article-box-bg.png); background-position: 100% 100%; background-repeat: no-repeat; font-size: 13px;}
|
||||
|
||||
#wall section article article.hasademo { background-position: 0 100%; }
|
||||
|
||||
#wall section article.closed h1:after { -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }
|
||||
|
||||
#wall section article.closed article { height: 0px; border: none; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; }
|
||||
|
||||
#wall section article article { overflow: hidden;}
|
||||
|
||||
#wall section article article p { margin-top: 65px; position: relative; z-index: 41; line-height: 18px;}
|
||||
|
||||
#wall section article article#tools-more {
|
||||
width: 525px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
#wall section article article#tools-more ul{
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
#wall section article article#tools-more li {
|
||||
margin-bottom: 0.5em;
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
|
||||
article.closed:hover .demo,
|
||||
.demo {
|
||||
position: absolute;
|
||||
top: 400px;
|
||||
left: 70px;
|
||||
background-color: white;
|
||||
border: 5px solid #33b3f0;
|
||||
z-index: 42;
|
||||
box-shadow: 0 0 30px black;
|
||||
-moz-transition-duration: 1s;
|
||||
-moz-transition-timing-function: cubic-bezier(0.05, 1.4, 0.25, 1);
|
||||
|
||||
-webkit-transition-duration: 1s;
|
||||
-webkit-transition-timing-function: cubic-bezier(0.05, 1.4, 0.25, 1);
|
||||
|
||||
transition-duration: 1s;
|
||||
transition-timing-function: cubic-bezier(0.05, 1.4, 0.25, 1);
|
||||
}
|
||||
|
||||
#tools .demo {
|
||||
left: 48px;
|
||||
}
|
||||
|
||||
article:hover > .demo {
|
||||
opacity: 1;
|
||||
top: 90px;
|
||||
}
|
||||
|
||||
article:hover .demo.close {
|
||||
top: 400px;
|
||||
}
|
||||
|
||||
.activexxxie .xxxie {
|
||||
opacity: 0.4;
|
||||
-moz-transform: scale(0.7);
|
||||
-webkit-transform: scale(0.7);
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
.activexxxie #overview .xxxie {
|
||||
opacity: 1;
|
||||
-moz-transform: scale(0)!important;
|
||||
-webkit-transform: scale(0)!important;
|
||||
transform: scale(0)!important;
|
||||
}
|
||||
|
||||
#wall section article article.closed:hover a.learn,
|
||||
#wall section article article a.learn {
|
||||
position: absolute;
|
||||
z-index: 44;
|
||||
bottom: -30px; left: 0;
|
||||
-moz-transition-duration: 0.3s;
|
||||
-webkit-transition-duration: 0.3s;
|
||||
transition-duration: 0.3s;
|
||||
padding: 4px 0;
|
||||
background-color: #33b3f0;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
width: 80%;
|
||||
margin: 0 10%;
|
||||
font-family: MetaBlack,"Trebuchet MS",sans-serif;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#wall section article article.closed:hover a.close,
|
||||
#wall section article article a.close {
|
||||
padding: 4px 8px;
|
||||
color: white;
|
||||
background-color: #33b3f0;
|
||||
font-family: MetaBlack,"Trebuchet MS",sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
-moz-transition-duration: 0.3s;
|
||||
-webkit-transition-duration: 0.3s;
|
||||
transition-duration: 0.3s;
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
right: -50px;
|
||||
bottom: auto;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#wall section article article a.learn:after {
|
||||
content: " »";
|
||||
}
|
||||
|
||||
#wall section article article a.close:before {
|
||||
content: "× ";
|
||||
}
|
||||
|
||||
#wall section article article:hover a.learn {
|
||||
bottom: 0px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#wall section article article:hover a.close {
|
||||
top: 45px;
|
||||
right: 10px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
article .demo * {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.demo .closebutton {
|
||||
position: absolute;
|
||||
top: -18px;
|
||||
right: -18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media all and (max-width: 900px) { #wall { width: 600px; } #overview {display: none;}}
|
||||
@media all and (max-width: 600px) { #wall { width: 300px; } #wall section h1 { font-size: 70px; } }
|
||||
|
||||
/* SOME SPECIFIC LAYOUTS */
|
||||
|
||||
article, section {display: block;}
|
||||
|
||||
.parser { width: 140px; text-align: center}
|
||||
.parser * { vertical-align: middle; display: inline; }
|
||||
|
||||
.canvas2d:after { content: url(imgs/overlay.png)!important; position: absolute; top: 0; left: 0; pointer-events: none; z-index: 65000; background-color: transparent}
|
||||
.canvas2d canvas { width: 150px; }
|
||||
|
||||
#audiodemo .demo,
|
||||
#audiodemo .demo canvas { width: 100px; height: 100px; }
|
||||
|
||||
#tagsoup .demo p { text-align: left;}
|
||||
#tagsoup .demo span { font-family: bebas; }
|
||||
#tagsoup:hover .demo { top: 30px!important; }
|
||||
|
||||
#fontfacedemo {width: 170px; float: right; margin-left: 10px;}
|
||||
#fontfacedemo * { margin: 0; padding: 0; vertical-align: top;}
|
||||
#fontfacedemo span {font-size: 18px; letter-spacing: -1px; display: inline-block;}
|
||||
|
||||
#radiusdemo { transition-duration: 3s;-moz-transition-duration: 3s;-webkit-transition-duration: 3s; border: 1px solid transparent; }
|
||||
#radiusdemo:hover { border: 1px solid rgba(0,0,0,0.5); border-radius: 35px;}
|
||||
|
||||
#gradientdemo:hover {
|
||||
background-image: -moz-radial-gradient(50% 120%, circle, white, rgba(40, 194, 218, 1) 40%, rgba(0, 194, 218, 0) 60%) , url("/media/img/firefox/technology/texture.png") !important;
|
||||
background-image: -webkit-radial-gradient(50% 120%, circle, white, rgba(40, 194, 218, 1) 40%, rgba(0, 194, 218, 0) 60%) , url("/media/img/firefox/technology/texture.png") !important;
|
||||
}
|
||||
|
||||
#geodemo .demo.showme { top: 40px; }
|
||||
|
||||
#orientationdemo .demo {padding: 10px;}
|
||||
|
||||
.dnding #dnddemo .demo {top: 100px;}
|
||||
#dnddemo .demo img {width: 200px;}
|
||||
#dnddemo .demo {text-align: center; padding: 5px;}
|
||||
|
||||
#dragdemo {background-color: #E1E6E9; cursor: pointer;}
|
||||
#dragdemo .demo {width: 200px;}
|
||||
|
||||
#columndemo {width: 245px!important; padding-right: 10px!important;}
|
||||
#columndemo p {-moz-column-count: 2; text-align: left!important;}
|
||||
|
||||
#boxshadowdemo { box-shadow: inset 0px 0px 0px black; transition-duration: 0.4s; -moz-transition-duration: 0.4s; -webkit-transition-duration: 0.4s; -webkit-box-shadow: inset 0px 0px 0px black; }
|
||||
#boxshadowdemo:hover { box-shadow: inset 0px 0px 100px black; -webkit-box-shadow: inset 0px 0px 100px black; }
|
||||
|
||||
#textshadowdemo div { padding: 10px; }
|
||||
#textshadowdemo .demo {background-color: #E1E6E9!important;}
|
||||
#textshadowdemo div p { color: white; font-family: bebas; font-size: 25px; text-shadow: 0px 0px 4px black; }
|
||||
|
||||
#transformdemo p { transition-duration: 1.4s;-moz-transition-duration: 1.4s;-webkit-transition-duration: 1.4s; }
|
||||
#transformdemo:hover p { -moz-transform: rotate(900deg) scale(-1, -1); -webkit-transform: rotate(900deg) scale(-1, -1);}
|
||||
|
||||
#transitiondemo { background-color: transparent!important;
|
||||
border-width: 0!important;
|
||||
-webkit-box-shadow: none!important;
|
||||
-moz-box-shadow: none!important;
|
||||
font-size: 50px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
text-shadow: 0px 0px 5px black;
|
||||
color: rgba(0, 0, 0, 0);
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
-webkit-transition-duration: 1s!important;
|
||||
-moz-transition-duration: 6s!important;
|
||||
-moz-transition-timing-function: cubic-bezier(0.05, 1.6, 0.25, 1);
|
||||
}
|
||||
#transitiondemo:hover { -webkit-transform: scale(3) rotate(360deg); -moz-transform: scale(3) rotate(360deg); text-shadow: 0px 0px 3px #28C2DA; }
|
||||
|
||||
#animationdemo {
|
||||
background: none repeat scroll 0 0 transparent;
|
||||
border: medium none;
|
||||
box-shadow: none;
|
||||
font-size: 5em;
|
||||
color: #e8001e;
|
||||
text-align: center;
|
||||
padding-top: 60px;
|
||||
width: 53%;
|
||||
}
|
||||
|
||||
#animationdemo:hover {
|
||||
-moz-animation: glowheart 2s linear 0s infinite;
|
||||
-webkit-animation: glowheart 2s linear 0s infinite;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
@-moz-keyframes glowheart {
|
||||
from {
|
||||
text-shadow: 0 0 0 #e8001e;
|
||||
}
|
||||
10% {
|
||||
-moz-transform: scale(1);
|
||||
text-shadow: 0 0 0 #e8001e;
|
||||
}
|
||||
30% {
|
||||
-moz-transform: scale(1.1);
|
||||
text-shadow: 0 0 10px #f00038;
|
||||
}
|
||||
50% {
|
||||
-moz-transform: scale(1);
|
||||
text-shadow: 0 0 0 #e8001e;
|
||||
}
|
||||
70% {
|
||||
-moz-transform: scale(1.2);
|
||||
text-shadow: 0 0 10px #ea0048;
|
||||
}
|
||||
90% {
|
||||
-moz-transform: scale(1);
|
||||
text-shadow: 0 0 0 #e8001e;
|
||||
}
|
||||
to {
|
||||
text-shadow: 0 0 0 #e8001e;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes glowheart {
|
||||
from {
|
||||
text-shadow: 0 0 0 #e8001e;
|
||||
}
|
||||
10% {
|
||||
-webkit-transform: scale(1);
|
||||
text-shadow: 0 0 0 #e8001e;
|
||||
}
|
||||
30% {
|
||||
-webkit-transform: scale(1.1);
|
||||
text-shadow: 0 0 10px #f00038;
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: scale(1);
|
||||
text-shadow: 0 0 0 #e8001e;
|
||||
}
|
||||
70% {
|
||||
-webkit-transform: scale(1.2);
|
||||
text-shadow: 0 0 10px #ea0048;
|
||||
}
|
||||
90% {
|
||||
-webkit-transform: scale(1);
|
||||
text-shadow: 0 0 0 #e8001e;
|
||||
}
|
||||
to {
|
||||
text-shadow: 0 0 0 #e8001e;
|
||||
}
|
||||
}
|
||||
|
||||
#formdemo .demo { padding: 4px 8px 0; width: 190px; font-size: 12px; left: 49px; }
|
||||
#formdemo input { display: inline; width: 70px; border: none; font-size: 12px; font-weight: bold; text-align: center; padding: 0; }
|
||||
#formdemo input:hover { background: #dff5ff; box-shadow: 0px 0px 2px #33b3f0; }
|
||||
#formdemo input:focus { background: #fff; }
|
||||
#formdemo button { font-weight: bold; }
|
||||
#formdemo h4 { margin: 0 0 4px 0; font-size: 12px; font-style: normal; }
|
||||
#formdemo em { display: block; margin-top: 5px; vertical-align: middle; }
|
||||
#formdemo input:last-of-type { width: 90px;}
|
||||
#wall section #formdemo .demo p { margin: 0 0 4px 0; line-height: 1.50; }
|
||||
#formdemo:not(.submited) .demo > p { display: none; }
|
||||
#formdemo:not(.submited) .demo form { display: inline; }
|
||||
#formdemo.submited .demo > p { display: block; }
|
||||
#formdemo.submited .demo form { display: none; }
|
||||
|
||||
#multiplatform img {width: 150px; display: block; margin-top: 80px;}
|
||||
|
||||
.nogl #webgldemo .demo {display: none;}
|
||||
#webgldemo .demo { background: rgba(0,0,0,0.8);}
|
||||
#webgldemo canvas { transition-duration: 1s; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; width: 150px; height: 100px; transition-delay: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; z-index: 10000;}
|
||||
#webgldemo canvas:hover { transform: scale(2); -webkit-transform: scale(2); -moz-transform: scale(2);}
|
||||
|
||||
#borderimagedemo {transition: none;-webkit-transition: none;-moz-transition: none;}
|
||||
#borderimagedemo:hover { -webkit-border-image: url(imgs/tv-border.jpg) 25 31 37 31 stretch stretch; -moz-border-image: url(imgs/tv-border.jpg) 25 31 37 31 stretch stretch; border-width: 20px!important; background-color: white!important; color: white; padding: 10px!important; max-height: 210px; }
|
||||
#borderimagedemo:hover p {margin-top: 40px;}
|
||||
#borderimagedemo:hover h1 {top: 20px;}
|
||||
|
||||
#wall section article article#mozelementdemo {
|
||||
background-image: url(/media/img/firefox/technology/article-box-bg.png), -moz-element(#main-feature);
|
||||
background-size: auto, 100% 30%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 100%, 0 170px;
|
||||
}
|
||||
|
||||
#ffsdemo .demo { font-family: megalopolis; font-size: 15px; text-align: center;}
|
||||
.dlig { -moz-font-feature-settings: "dlig=1"; }
|
||||
.dlig-ss01 { -moz-font-feature-settings: "dlig=1,ss01=1"; }
|
||||
.dlig-ss02 { -moz-font-feature-settings: "dlig=1,ss02=1,case=1"; }
|
||||
.ss04 { -moz-font-feature-settings: "ss04=1"; }
|
||||
.ss05 { -moz-font-feature-settings: "ss05=1"; }
|
||||
.ss06 { -moz-font-feature-settings: "ss06=1"; letter-spacing: -1px; }
|
||||
.salt { -moz-font-feature-settings: "salt=1"; }
|
||||
|
||||
#wall article.article#svg {
|
||||
background: url(/media/img/firefox/technology/tiger.svg) 550px 80px no-repeat;
|
||||
}
|
||||
|
||||
#wall article.article#svg img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/*
|
||||
* Project: circular player
|
||||
* http://www.jplayer.org
|
||||
* Copyright (c) 2011 Happyworm Ltd
|
||||
* Author: Silvia Benvenuti
|
||||
* Date: 18th January 2011
|
||||
* Arwork inspired by: http://forrst.com/posts/Untitled-CJz
|
||||
*/
|
||||
.player :focus { border:none; outline:0; }
|
||||
#jquery_jplayer_1 { width: 0; height: 0; }
|
||||
.player { width: 200px; height: 200px; background: url("imgs/bgr.jpg") 0 0 no-repeat; margin: 0 auto; padding: 48px; }
|
||||
#audioplayerdemo .demo { height: 200px;}
|
||||
#audioplayerdemo:hover .demo { top: 30px;}
|
||||
#jp_interface_1 { width: 100px; height: 100px; overflow: hidden; }
|
||||
.progress { position: absolute; top: 0; left: 0; width: 104px; height: 104px; background: url("imgs/progress.png") 0 0 no-repeat; clip:rect(0px,52px,104px,0px); -moz-border-radius:52px; -webkit-border-radius:52px; border-radius:52px; -moz-transform:rotate(0); -webkit-transform:rotate(0); -o-transform:rotate(0); transform:rotate(0); /* NO CSS3 FALLBACK (12 steps starting from 1hr filled progress, DEcrease second value by 104px for next step) background: url("graphics/progress_sprite.jpg") 0 0 no-repeat; */ }
|
||||
/* this is needed when progress is greater than 50% */ .progress.fill { -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); transform:rotate(0deg); -o-transform:rotate(0deg); }
|
||||
.hold, .click-control { position:absolute; width:104px; height:104px; }
|
||||
.click-control:hover { cursor:pointer; }
|
||||
.hold { clip:rect(0px,104px,104px,52px); }
|
||||
/* this is needed when progress is greater than 50% */ .hold.gt50 { clip:rect(auto, auto, auto, auto); }
|
||||
.jp-controls { margin:26px; padding: 0; }
|
||||
.jp-controls li{ list-style-type:none; display: block; }
|
||||
.jp-controls li a{ position: relative; display: block; width:50px; height:50px; text-indent:-9999px; z-index:1; }
|
||||
.jp-controls .jp-play { background: url("imgs/controls.jpg") 0 0 no-repeat; }
|
||||
.jp-controls .jp-play:hover { background: url("imgs/controls.jpg") -50px 0 no-repeat; cursor:pointer; }
|
||||
.jp-controls .jp-pause { background: url("imgs/controls.jpg") 0 -50px no-repeat; }
|
||||
.jp-controls .jp-pause:hover { background: url("imgs/controls.jpg") -50px -50px no-repeat; }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -13,458 +13,3 @@
|
|||
.small;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* {{{ Main Content */
|
||||
|
||||
#wall section article #click-star {
|
||||
height: 160px;
|
||||
width: 162px;
|
||||
background: url(/media/img/firefox/technology/click-star.png);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: 150px;
|
||||
}
|
||||
|
||||
#wall section article #click-star span {
|
||||
font-family: MetaBlack,"Trebuchet MS",sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
color: #a1acb8;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
display: block;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
#wall #html5 {
|
||||
background: url(/img/covehead/divider-notch-main.jpg) 50% 0 no-repeat;
|
||||
padding-top: 55px;
|
||||
}
|
||||
|
||||
#wall article.article {
|
||||
background: url(/img/covehead/divider-notch.jpg) 50% 0 no-repeat;
|
||||
padding: 40px 0;
|
||||
clear: both;
|
||||
overflow: auto;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
#wall .intro p,
|
||||
#wall .intro h1 {
|
||||
width: 550px;
|
||||
}
|
||||
|
||||
.top-link {
|
||||
float: right;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.top-link a {
|
||||
background: url(/media/img/firefox/technology/page-top.png) 0 0 no-repeat;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
padding-left: 25px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* }}} */
|
||||
/***** @font-face *****/
|
||||
@font-face { font-family: megalopolis; src: url(/media/fonts/MEgalopolisExtra.woff);}
|
||||
|
||||
|
||||
/***** general stuff *****/
|
||||
|
||||
#plzwait { display: none; }
|
||||
body.loading #plzwait {display: block; width: 100%; height: 100%; text-align: center; padding-top: 200px;}
|
||||
body.loading #wall {opacity: 0;}
|
||||
|
||||
#wall { padding: 20px 0; margin: auto; margin-top: 10px; clear: both; position: relative; }
|
||||
|
||||
#shortcredit a { color: #555; }
|
||||
#shortcredit { opacity: 0.5; top: -150px; right: 0px; font-size: 10px; color: #777; position: relative; width: 100%; text-align: right; }
|
||||
#shortcredit:hover {opacity: 1;}
|
||||
|
||||
#longcredits a { color: black; }
|
||||
#longcredits {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
/* Title */
|
||||
#wall section article article h1 { font-size: 18px; letter-spacing: 0px; vertical-align: bottom; position: absolute; bottom: 200px; font-style: normal; }
|
||||
|
||||
|
||||
#wall section article article {transition-duration: 1s; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; width: 265px; display: inline-block; margin: 10px 0; padding: 10px 15px; height: 250px; vertical-align: middle; position: relative; background-image: url(/media/img/firefox/technology/article-box-bg.png); background-position: 100% 100%; background-repeat: no-repeat; font-size: 13px;}
|
||||
|
||||
#wall section article article.hasademo { background-position: 0 100%; }
|
||||
|
||||
#wall section article.closed h1:after { -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }
|
||||
|
||||
#wall section article.closed article { height: 0px; border: none; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; }
|
||||
|
||||
#wall section article article { overflow: hidden;}
|
||||
|
||||
#wall section article article p { margin-top: 65px; position: relative; z-index: 41; line-height: 18px;}
|
||||
|
||||
#wall section article article#tools-more {
|
||||
width: 525px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
#wall section article article#tools-more ul{
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
#wall section article article#tools-more li {
|
||||
margin-bottom: 0.5em;
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
|
||||
article.closed:hover .demo,
|
||||
.demo {
|
||||
position: absolute;
|
||||
top: 400px;
|
||||
left: 70px;
|
||||
background-color: white;
|
||||
border: 5px solid #33b3f0;
|
||||
z-index: 42;
|
||||
box-shadow: 0 0 30px black;
|
||||
-moz-transition-duration: 1s;
|
||||
-moz-transition-timing-function: cubic-bezier(0.05, 1.4, 0.25, 1);
|
||||
|
||||
-webkit-transition-duration: 1s;
|
||||
-webkit-transition-timing-function: cubic-bezier(0.05, 1.4, 0.25, 1);
|
||||
|
||||
transition-duration: 1s;
|
||||
transition-timing-function: cubic-bezier(0.05, 1.4, 0.25, 1);
|
||||
}
|
||||
|
||||
#tools .demo {
|
||||
left: 48px;
|
||||
}
|
||||
|
||||
article:hover > .demo {
|
||||
opacity: 1;
|
||||
top: 90px;
|
||||
}
|
||||
|
||||
article:hover .demo.close {
|
||||
top: 400px;
|
||||
}
|
||||
|
||||
.activexxxie .xxxie {
|
||||
opacity: 0.4;
|
||||
-moz-transform: scale(0.7);
|
||||
-webkit-transform: scale(0.7);
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
.activexxxie #overview .xxxie {
|
||||
opacity: 1;
|
||||
-moz-transform: scale(0)!important;
|
||||
-webkit-transform: scale(0)!important;
|
||||
transform: scale(0)!important;
|
||||
}
|
||||
|
||||
#wall section article article.closed:hover a.learn,
|
||||
#wall section article article a.learn {
|
||||
position: absolute;
|
||||
z-index: 44;
|
||||
bottom: -30px; left: 0;
|
||||
-moz-transition-duration: 0.3s;
|
||||
-webkit-transition-duration: 0.3s;
|
||||
transition-duration: 0.3s;
|
||||
padding: 4px 0;
|
||||
background-color: #33b3f0;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
width: 80%;
|
||||
margin: 0 10%;
|
||||
font-family: MetaBlack,"Trebuchet MS",sans-serif;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#wall section article article.closed:hover a.close,
|
||||
#wall section article article a.close {
|
||||
padding: 4px 8px;
|
||||
color: white;
|
||||
background-color: #33b3f0;
|
||||
font-family: MetaBlack,"Trebuchet MS",sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
-moz-transition-duration: 0.3s;
|
||||
-webkit-transition-duration: 0.3s;
|
||||
transition-duration: 0.3s;
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
right: -50px;
|
||||
bottom: auto;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#wall section article article a.learn:after {
|
||||
content: " »";
|
||||
}
|
||||
|
||||
#wall section article article a.close:before {
|
||||
content: "× ";
|
||||
}
|
||||
|
||||
#wall section article article:hover a.learn {
|
||||
bottom: 0px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#wall section article article:hover a.close {
|
||||
top: 45px;
|
||||
right: 10px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
article .demo * {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.demo .closebutton {
|
||||
position: absolute;
|
||||
top: -18px;
|
||||
right: -18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media all and (max-width: 900px) { #wall { width: 600px; } #overview {display: none;}}
|
||||
@media all and (max-width: 600px) { #wall { width: 300px; } #wall section h1 { font-size: 70px; } }
|
||||
|
||||
/* SOME SPECIFIC LAYOUTS */
|
||||
|
||||
article, section {display: block;}
|
||||
|
||||
.parser { width: 140px; text-align: center}
|
||||
.parser * { vertical-align: middle; display: inline; }
|
||||
|
||||
.canvas2d:after { content: url(imgs/overlay.png)!important; position: absolute; top: 0; left: 0; pointer-events: none; z-index: 65000; background-color: transparent}
|
||||
.canvas2d canvas { width: 150px; }
|
||||
|
||||
#audiodemo .demo,
|
||||
#audiodemo .demo canvas { width: 100px; height: 100px; }
|
||||
|
||||
#tagsoup .demo p { text-align: left;}
|
||||
#tagsoup .demo span { font-family: bebas; }
|
||||
#tagsoup:hover .demo { top: 30px!important; }
|
||||
|
||||
#fontfacedemo {width: 170px; float: right; margin-left: 10px;}
|
||||
#fontfacedemo * { margin: 0; padding: 0; vertical-align: top;}
|
||||
#fontfacedemo span {font-size: 18px; letter-spacing: -1px; display: inline-block;}
|
||||
|
||||
#radiusdemo { transition-duration: 3s;-moz-transition-duration: 3s;-webkit-transition-duration: 3s; border: 1px solid transparent; }
|
||||
#radiusdemo:hover { border: 1px solid rgba(0,0,0,0.5); border-radius: 35px;}
|
||||
|
||||
#gradientdemo:hover {
|
||||
background-image: -moz-radial-gradient(50% 120%, circle, white, rgba(40, 194, 218, 1) 40%, rgba(0, 194, 218, 0) 60%) , url("/media/img/firefox/technology/texture.png") !important;
|
||||
background-image: -webkit-radial-gradient(50% 120%, circle, white, rgba(40, 194, 218, 1) 40%, rgba(0, 194, 218, 0) 60%) , url("/media/img/firefox/technology/texture.png") !important;
|
||||
}
|
||||
|
||||
#geodemo .demo.showme { top: 40px; }
|
||||
|
||||
#orientationdemo .demo {padding: 10px;}
|
||||
|
||||
.dnding #dnddemo .demo {top: 100px;}
|
||||
#dnddemo .demo img {width: 200px;}
|
||||
#dnddemo .demo {text-align: center; padding: 5px;}
|
||||
|
||||
#dragdemo {background-color: #E1E6E9; cursor: pointer;}
|
||||
#dragdemo .demo {width: 200px;}
|
||||
|
||||
#columndemo {width: 245px!important; padding-right: 10px!important;}
|
||||
#columndemo p {-moz-column-count: 2; text-align: left!important;}
|
||||
|
||||
#boxshadowdemo { box-shadow: inset 0px 0px 0px black; transition-duration: 0.4s; -moz-transition-duration: 0.4s; -webkit-transition-duration: 0.4s; -webkit-box-shadow: inset 0px 0px 0px black; }
|
||||
#boxshadowdemo:hover { box-shadow: inset 0px 0px 100px black; -webkit-box-shadow: inset 0px 0px 100px black; }
|
||||
|
||||
#textshadowdemo div { padding: 10px; }
|
||||
#textshadowdemo .demo {background-color: #E1E6E9!important;}
|
||||
#textshadowdemo div p { color: white; font-family: bebas; font-size: 25px; text-shadow: 0px 0px 4px black; }
|
||||
|
||||
#transformdemo p { transition-duration: 1.4s;-moz-transition-duration: 1.4s;-webkit-transition-duration: 1.4s; }
|
||||
#transformdemo:hover p { -moz-transform: rotate(900deg) scale(-1, -1); -webkit-transform: rotate(900deg) scale(-1, -1);}
|
||||
|
||||
#transitiondemo { background-color: transparent!important;
|
||||
border-width: 0!important;
|
||||
-webkit-box-shadow: none!important;
|
||||
-moz-box-shadow: none!important;
|
||||
font-size: 50px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
text-shadow: 0px 0px 5px black;
|
||||
color: rgba(0, 0, 0, 0);
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
-webkit-transition-duration: 1s!important;
|
||||
-moz-transition-duration: 6s!important;
|
||||
-moz-transition-timing-function: cubic-bezier(0.05, 1.6, 0.25, 1);
|
||||
}
|
||||
#transitiondemo:hover { -webkit-transform: scale(3) rotate(360deg); -moz-transform: scale(3) rotate(360deg); text-shadow: 0px 0px 3px #28C2DA; }
|
||||
|
||||
#animationdemo {
|
||||
background: none repeat scroll 0 0 transparent;
|
||||
border: medium none;
|
||||
box-shadow: none;
|
||||
font-size: 5em;
|
||||
color: #e8001e;
|
||||
text-align: center;
|
||||
padding-top: 60px;
|
||||
width: 53%;
|
||||
}
|
||||
|
||||
#animationdemo:hover {
|
||||
-moz-animation: glowheart 2s linear 0s infinite;
|
||||
-webkit-animation: glowheart 2s linear 0s infinite;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
@-moz-keyframes glowheart {
|
||||
from {
|
||||
text-shadow: 0 0 0 #e8001e;
|
||||
}
|
||||
10% {
|
||||
-moz-transform: scale(1);
|
||||
text-shadow: 0 0 0 #e8001e;
|
||||
}
|
||||
30% {
|
||||
-moz-transform: scale(1.1);
|
||||
text-shadow: 0 0 10px #f00038;
|
||||
}
|
||||
50% {
|
||||
-moz-transform: scale(1);
|
||||
text-shadow: 0 0 0 #e8001e;
|
||||
}
|
||||
70% {
|
||||
-moz-transform: scale(1.2);
|
||||
text-shadow: 0 0 10px #ea0048;
|
||||
}
|
||||
90% {
|
||||
-moz-transform: scale(1);
|
||||
text-shadow: 0 0 0 #e8001e;
|
||||
}
|
||||
to {
|
||||
text-shadow: 0 0 0 #e8001e;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes glowheart {
|
||||
from {
|
||||
text-shadow: 0 0 0 #e8001e;
|
||||
}
|
||||
10% {
|
||||
-webkit-transform: scale(1);
|
||||
text-shadow: 0 0 0 #e8001e;
|
||||
}
|
||||
30% {
|
||||
-webkit-transform: scale(1.1);
|
||||
text-shadow: 0 0 10px #f00038;
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: scale(1);
|
||||
text-shadow: 0 0 0 #e8001e;
|
||||
}
|
||||
70% {
|
||||
-webkit-transform: scale(1.2);
|
||||
text-shadow: 0 0 10px #ea0048;
|
||||
}
|
||||
90% {
|
||||
-webkit-transform: scale(1);
|
||||
text-shadow: 0 0 0 #e8001e;
|
||||
}
|
||||
to {
|
||||
text-shadow: 0 0 0 #e8001e;
|
||||
}
|
||||
}
|
||||
|
||||
#formdemo .demo { padding: 4px 8px 0; width: 190px; font-size: 12px; left: 49px; }
|
||||
#formdemo input { display: inline; width: 70px; border: none; font-size: 12px; font-weight: bold; text-align: center; padding: 0; }
|
||||
#formdemo input:hover { background: #dff5ff; box-shadow: 0px 0px 2px #33b3f0; }
|
||||
#formdemo input:focus { background: #fff; }
|
||||
#formdemo button { font-weight: bold; }
|
||||
#formdemo h4 { margin: 0 0 4px 0; font-size: 12px; font-style: normal; }
|
||||
#formdemo em { display: block; margin-top: 5px; vertical-align: middle; }
|
||||
#formdemo input:last-of-type { width: 90px;}
|
||||
#wall section #formdemo .demo p { margin: 0 0 4px 0; line-height: 1.50; }
|
||||
#formdemo:not(.submited) .demo > p { display: none; }
|
||||
#formdemo:not(.submited) .demo form { display: inline; }
|
||||
#formdemo.submited .demo > p { display: block; }
|
||||
#formdemo.submited .demo form { display: none; }
|
||||
|
||||
#multiplatform img {width: 150px; display: block; margin-top: 80px;}
|
||||
|
||||
.nogl #webgldemo .demo {display: none;}
|
||||
#webgldemo .demo { background: rgba(0,0,0,0.8);}
|
||||
#webgldemo canvas { transition-duration: 1s; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; width: 150px; height: 100px; transition-delay: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; z-index: 10000;}
|
||||
#webgldemo canvas:hover { transform: scale(2); -webkit-transform: scale(2); -moz-transform: scale(2);}
|
||||
|
||||
#borderimagedemo {transition: none;-webkit-transition: none;-moz-transition: none;}
|
||||
#borderimagedemo:hover { -webkit-border-image: url(imgs/tv-border.jpg) 25 31 37 31 stretch stretch; -moz-border-image: url(imgs/tv-border.jpg) 25 31 37 31 stretch stretch; border-width: 20px!important; background-color: white!important; color: white; padding: 10px!important; max-height: 210px; }
|
||||
#borderimagedemo:hover p {margin-top: 40px;}
|
||||
#borderimagedemo:hover h1 {top: 20px;}
|
||||
|
||||
#wall section article article#mozelementdemo {
|
||||
background-image: ~"url(/media/img/firefox/technology/article-box-bg.png), -moz-element(#main-feature)";
|
||||
background-size: auto, 100% 30%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 100%, 0 170px;
|
||||
}
|
||||
|
||||
#ffsdemo .demo { font-family: megalopolis; font-size: 15px; text-align: center;}
|
||||
.dlig { -moz-font-feature-settings: "dlig=1"; }
|
||||
.dlig-ss01 { -moz-font-feature-settings: "dlig=1,ss01=1"; }
|
||||
.dlig-ss02 { -moz-font-feature-settings: "dlig=1,ss02=1,case=1"; }
|
||||
.ss04 { -moz-font-feature-settings: "ss04=1"; }
|
||||
.ss05 { -moz-font-feature-settings: "ss05=1"; }
|
||||
.ss06 { -moz-font-feature-settings: "ss06=1"; letter-spacing: -1px; }
|
||||
.salt { -moz-font-feature-settings: "salt=1"; }
|
||||
|
||||
#wall article.article#svg {
|
||||
background: url(/media/img/firefox/technology/tiger.svg) 550px 80px no-repeat;
|
||||
}
|
||||
|
||||
#wall article.article#svg img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/*
|
||||
* Project: circular player
|
||||
* http://www.jplayer.org
|
||||
* Copyright (c) 2011 Happyworm Ltd
|
||||
* Author: Silvia Benvenuti
|
||||
* Date: 18th January 2011
|
||||
* Arwork inspired by: http://forrst.com/posts/Untitled-CJz
|
||||
*/
|
||||
.player :focus { border:none; outline:0; }
|
||||
#jquery_jplayer_1 { width: 0; height: 0; }
|
||||
.player { width: 200px; height: 200px; background: url("imgs/bgr.jpg") 0 0 no-repeat; margin: 0 auto; padding: 48px; }
|
||||
#audioplayerdemo .demo { height: 200px;}
|
||||
#audioplayerdemo:hover .demo { top: 30px;}
|
||||
#jp_interface_1 { width: 100px; height: 100px; overflow: hidden; }
|
||||
.progress { position: absolute; top: 0; left: 0; width: 104px; height: 104px; background: url("imgs/progress.png") 0 0 no-repeat; clip:rect(0px,52px,104px,0px); -moz-border-radius:52px; -webkit-border-radius:52px; border-radius:52px; -moz-transform:rotate(0); -webkit-transform:rotate(0); -o-transform:rotate(0); transform:rotate(0); /* NO CSS3 FALLBACK (12 steps starting from 1hr filled progress, DEcrease second value by 104px for next step) background: url("graphics/progress_sprite.jpg") 0 0 no-repeat; */ }
|
||||
/* this is needed when progress is greater than 50% */ .progress.fill { -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); transform:rotate(0deg); -o-transform:rotate(0deg); }
|
||||
.hold, .click-control { position:absolute; width:104px; height:104px; }
|
||||
.click-control:hover { cursor:pointer; }
|
||||
.hold { clip:rect(0px,104px,104px,52px); }
|
||||
/* this is needed when progress is greater than 50% */ .hold.gt50 { clip:rect(auto, auto, auto, auto); }
|
||||
.jp-controls { margin:26px; padding: 0; }
|
||||
.jp-controls li{ list-style-type:none; display: block; }
|
||||
.jp-controls li a{ position: relative; display: block; width:50px; height:50px; text-indent:-9999px; z-index:1; }
|
||||
.jp-controls .jp-play { background: url("imgs/controls.jpg") 0 0 no-repeat; }
|
||||
.jp-controls .jp-play:hover { background: url("imgs/controls.jpg") -50px 0 no-repeat; cursor:pointer; }
|
||||
.jp-controls .jp-pause { background: url("imgs/controls.jpg") 0 -50px no-repeat; }
|
||||
.jp-controls .jp-pause:hover { background: url("imgs/controls.jpg") -50px -50px no-repeat; }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
@import "../sandstone/sandstone.less";
|
||||
@import "menu.less";
|
||||
|
||||
|
||||
|
||||
#masthead h1 {
|
||||
padding: @baseLine 0;
|
||||
}
|
||||
|
|
@ -27,3 +29,11 @@ a:active {
|
|||
color: darken(@linkBlue, 10%);
|
||||
}
|
||||
|
||||
.stacked h1 {
|
||||
font-size: 32px;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
.stacked h1 span {
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -73,6 +73,7 @@ MINIFY_BUNDLES = {
|
|||
),
|
||||
'firefox-technology': (
|
||||
'css/firefox/technology.less',
|
||||
'css/firefox/technology-demos.css',
|
||||
),
|
||||
'home': (
|
||||
'css/covehead/template.css',
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче