зеркало из https://github.com/mozilla/bedrock.git
608 строки
14 KiB
CSS
608 строки
14 KiB
CSS
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
|
|
/* {{{ Main Feature */
|
|
|
|
#channel #main-feature {
|
|
padding-top: 30px;
|
|
}
|
|
|
|
#channel #main-feature h2 {
|
|
line-height: 0.9;
|
|
font-size: 36px;
|
|
}
|
|
|
|
#channel #main-feature h2 span {
|
|
font-size: 60px;
|
|
}
|
|
|
|
#channel #main-feature p {
|
|
width: 550px;
|
|
}
|
|
|
|
|
|
#channel #footer {
|
|
margin-top: 50px;
|
|
}
|
|
|
|
#channel #sub-footer {
|
|
display: none;
|
|
}
|
|
|
|
/* }}} */
|
|
/* {{{ Main Content */
|
|
|
|
#channel .channel {
|
|
width: 300px;
|
|
float: left;
|
|
display: inline;
|
|
padding-bottom: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
#channel .channel#download_aurora,
|
|
#channel .channel#download_beta,
|
|
#channel .channel#download_firefox,
|
|
#channel .channel#download_mobile_beta {
|
|
padding-right: 0;
|
|
}
|
|
|
|
#channel_news {
|
|
clear: both;
|
|
background-position: 50% 0;
|
|
background-repeat: repeat-x;
|
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAASCAMAAACglzTJAAAAS1BMVEXg8P3g8f3g8f7h8f7s9v7s9v/s9//t9//v9/7v9//v+P7v+P/w+P7x+P/y+P/x+f7y+f7y+f/y+v/0+v71+v/2+v/3+//3/P/4/P85dJkYAAAAUUlEQVR42gXBwY0DQBACwQZW/jj/ZE834CqBEV+DesTm0GYR6H8WZtkpqd5706Tv09aAXXybi0rnZAHMMQd/onKybm7kMzX3KLDZwWL+I135AR/XK08cBKDoAAAAAElFTkSuQmCC);
|
|
padding-top: 75px;
|
|
zoom: 1;
|
|
}
|
|
|
|
.channel h3 {
|
|
background: url(/media/img/l10n/covehead/channel/logos.png) top left no-repeat;
|
|
padding: 0;
|
|
margin: 0;
|
|
height: 110px;
|
|
}
|
|
|
|
#download_aurora h3 { background-position: 0 0; }
|
|
#download_beta h3 { background-position: 0 -260px; }
|
|
#download_firefox h3 { background-position: 0 -260px; }
|
|
#download_mobile_beta h3 { background-position: 0 -260px; }
|
|
|
|
|
|
#channel .channel#download_firefox h3 span,
|
|
#channel .channel#download_mobile_beta h3 span {
|
|
padding-top: 15px;
|
|
}
|
|
|
|
.channel h3 span {
|
|
font-size: 38px;
|
|
padding: 25px 0 30px 120px;
|
|
}
|
|
|
|
#channel .channel#download_aurora #download_aurora_button,
|
|
#channel .channel#download_beta #download-button,
|
|
#channel .channel#download_firefox #download,
|
|
#channel .channel#download_mobile_beta .home-download {
|
|
margin: 10px 10px 10px 28px;
|
|
}
|
|
|
|
#channel ul.home-download {
|
|
width: auto;
|
|
overflow: visible;
|
|
}
|
|
|
|
#channel .channel#download_aurora a.download-link,
|
|
#channel .channel#download_beta a.download-link,
|
|
#channel .channel#download_firefox a.download-link,
|
|
#channel .channel#download_mobile_beta a.download-link {
|
|
margin: 0 0 5px;
|
|
height: auto;
|
|
}
|
|
|
|
#channel .channel#download_aurora a.download-link,
|
|
#channel .channel#download_aurora a.download-link:hover,
|
|
#channel .channel#download_aurora a.download-link:active {
|
|
background: #6b65bd; /* old browsers */
|
|
background: -moz-linear-gradient(top, #6b65bd 0%, #3d2c6f 100%); /* firefox */
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6b65bd), color-stop(100%,#3d2c6f)); /* webkit */
|
|
background: linear-gradient(top, #6b65bd 0%, #3d2c6f 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b65bd', endColorstr='#3d2c6f',GradientType=0 ); /* ie */
|
|
}
|
|
|
|
#channel .channel#download_aurora #download_aurora_button a.download-link span.download-content,
|
|
#channel .channel#download_beta #download-button a.download-link span.download-content,
|
|
#channel .channel#download_firefox #download a.download-link span.download-content,
|
|
#channel .channel#download_mobile_beta a.download-link span.download-content {
|
|
background: url(/media/img/covehead/channel/download-arrow.png) no-repeat 10px 50%;
|
|
padding: 10px 10px 12px 38px;
|
|
margin: 0;
|
|
height: 50px;
|
|
font-size: 15px;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
#channel #download_aurora_button a.download-link span.download-title,
|
|
#channel #download_beta #download-button a.download-link span.download-title,
|
|
#channel #download a.download-link span.download-title,
|
|
#channel #download_mobile_beta a.download-link span.download-title {
|
|
background: none;
|
|
line-height: 1.1;
|
|
display: block;
|
|
padding: 0;
|
|
margin: 0;
|
|
font-style: italic;
|
|
font-size: 20px;
|
|
}
|
|
|
|
#channel .channel#download_aurora h3 span span,
|
|
#channel .channel#download_beta h3 span span,
|
|
#channel .channel#download_firefox h3 span span,
|
|
#channel .channel#download_mobile_beta h3 span span {
|
|
font-size: 24px;
|
|
display: block;
|
|
line-height: 0.8;
|
|
padding: 0;
|
|
}
|
|
|
|
#channel #download_aurora_button .download-other,
|
|
#channel #download_beta .download-other,
|
|
#channel #download .download-other,
|
|
#channel #download_mobile_beta .download-other {
|
|
margin: 5px 0 0 0;
|
|
width: auto;
|
|
text-align: left;
|
|
}
|
|
|
|
.channel ul.channel-list {
|
|
margin: 5px 10px 10px 10px;
|
|
padding: 0 0 10px 20px;
|
|
min-height: 11em;
|
|
}
|
|
|
|
.channel a.download,
|
|
.channel a.download:link,
|
|
.channel a.download:visited {
|
|
display: block;
|
|
margin: 10px 20px 10px 28px;
|
|
-moz-box-shadow: 0 3px rgba(0,0,0,0.1), inset 0 -4px rgba(0,0,0,0.1);
|
|
-webkit-box-shadow: 0 3px rgba(0,0,0,0.1), inset 0 -4px rgba(0,0,0,0.1);
|
|
box-shadow: 0 3px rgba(0,0,0,0.1), inset 0 -4px rgba(0,0,0,0.1);
|
|
-webkit-border-radius: 6px;
|
|
-moz-border-radius: 6px;
|
|
border-radius: 6px;
|
|
color: #fff;
|
|
overflow: visible;
|
|
background: #84C63C; /* old browsers */
|
|
background: -moz-linear-gradient(top, #84C63C 0%, #489615 100%); /* firefox */
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#84C63C), color-stop(100%,#489615)); /* webkit */
|
|
background: linear-gradient(top, #84C63C 0%, #489615 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#84C63C', endColorstr='#489615',GradientType=0 ); /* ie */
|
|
-moz-transition: box-shadow 0.2s ease-in-out;
|
|
-webit-transition: box-shadow 0.2s ease-in-out;
|
|
transition: box-shadow 0.2s ease-in-out;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.channel a.download:hover,
|
|
.channel a.download:active {
|
|
-moz-box-shadow: 0 3px rgba(0,0,0,0.15), inset 0 -4px rgba(0,0,0,0.15), inset 0 0 80px rgba(255,255,255,0.3);
|
|
-webkit-box-shadow: 0 3px rgba(0,0,0,0.15), inset 0 -4px rgba(0,0,0,0.15), inset 0 0 80px rgba(255,255,255,0.3);
|
|
box-shadow: 0 3px rgba(0,0,0,0.15), inset 0 -4px rgba(0,0,0,0.15), inset 0 0 80px rgba(255,255,255,0.3);
|
|
-moz-transition: box-shadow 0.2s ease-in-out;
|
|
-webkit-transition: box-shadow 0.2s ease-in-out;
|
|
transition: box-shadow 0.2s ease-in-out;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.channel a.download span {
|
|
padding: 10px 20px 12px 45px;
|
|
display: block;
|
|
background: url(/img/covehead/channel/download-arrow.png) no-repeat 12px 50%;
|
|
font-size: 16px;
|
|
font-style: italic;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.channel a.download span strong {
|
|
font-size: 20px;
|
|
display: block;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.channel .download-soon {
|
|
display: block;
|
|
margin: 10px 20px 10px 28px;
|
|
padding: 10px 15px 11px 15px;
|
|
-moz-box-shadow: 0 3px rgba(90,90,90,0.1), inset 0 -4px #e0eff9, inset 0 -10px 30px #e0eff9;
|
|
-webkit-box-shadow: 0 3px rgba(90,90,90,0.1), inset 0 -4px #e0eff9, inset 0 -10px 30px #e0eff9;
|
|
box-shadow: 0 3px rgba(90,90,90,0.1), inset 0 -4px #e0eff9, inset 0 -10px 30px #e0eff9;
|
|
-webkit-border-radius: 6px;
|
|
-moz-border-radius: 6px;
|
|
border-radius: 6px;
|
|
color: #444;
|
|
border: 1px solid #b3c8d7;
|
|
overflow: visible;
|
|
background: #fff;
|
|
-moz-transition: box-shadow 0.2s ease-in-out;
|
|
-webit-transition: box-shadow 0.2s ease-in-out;
|
|
transition: box-shadow 0.2s ease-in-out;
|
|
font-style: italic;
|
|
color: #666;
|
|
font-size: 15px;
|
|
line-height: 1.1;
|
|
text-align: center;
|
|
}
|
|
|
|
.channel .download-soon:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.channel .download-soon span {
|
|
display: block;
|
|
font-size: 20px;
|
|
color: #006e9a;
|
|
}
|
|
|
|
.channel small {
|
|
font-size: 10px;
|
|
margin-left: 28px;
|
|
}
|
|
|
|
#channel .download-info {
|
|
color: white;
|
|
}
|
|
|
|
/* }}} */
|
|
/* {{{ Newsletter */
|
|
|
|
#newsletter-signup {
|
|
position: relative;
|
|
margin-left: 20px;
|
|
float: left;
|
|
display: inline;
|
|
width: 400px;
|
|
margin-right: 40px;
|
|
padding-right: 40px;
|
|
border-right: 1px dotted #ddd;
|
|
}
|
|
#newsletter-signup .title h3 {
|
|
margin: 0;
|
|
zoom: 1;
|
|
font-style: italic;
|
|
padding: 5px 25px 5px 65px;
|
|
line-height: 1;
|
|
background: url(/media/img/covehead/channel/mail.png) 0 10px no-repeat;
|
|
}
|
|
#newsletter-signup .title p {
|
|
margin: 0 0 20px 0;
|
|
color: #888;
|
|
font-style: italic;
|
|
font-size: 15px;
|
|
}
|
|
#newsletter-signup form {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
#newsletter-signup form select {
|
|
width: 23em;
|
|
}
|
|
#email {
|
|
font-family: Georgia, serif;
|
|
font-size: 16px;
|
|
height: 34px;
|
|
width: 210px;
|
|
border-radius: 4px;
|
|
border: 1px solid #aaa;
|
|
padding: 1px 14px;
|
|
box-shadow: 0 2px rgba(0,0,0,.1), 0 0 1px #888 inset;
|
|
}
|
|
.error-email #email,
|
|
.error-email #expand {
|
|
border-color: red;
|
|
}
|
|
#email-error,
|
|
#channel-error,
|
|
#privacy-error,
|
|
.success-pane {
|
|
display: none;
|
|
margin-top: .5em;
|
|
}
|
|
#channel-error,
|
|
#privacy-error {
|
|
margin-bottom: 1em;
|
|
}
|
|
.success .success-pane {
|
|
color: #489615;
|
|
display: block;
|
|
padding-bottom: 40px;
|
|
}
|
|
|
|
.success .success-pane h3 {
|
|
color: #489615;
|
|
}
|
|
|
|
.success #newsletter-signup form {
|
|
display: none;
|
|
}
|
|
.error-email #email-error,
|
|
.error-channel #channel-error,
|
|
.error-privacy #privacy-error {
|
|
color: red;
|
|
display: block;
|
|
}
|
|
|
|
#newsletter-signup .privacy-field label span {
|
|
float: left;
|
|
display: inline;
|
|
margin: 2px;
|
|
padding: 2px;
|
|
}
|
|
|
|
#newsleter-signup .privacy-field span.title {
|
|
display: inline;
|
|
float: left;
|
|
padding-top: 5px;
|
|
}
|
|
|
|
#newsletter-signup input[type=submit] {
|
|
padding: 8px 20px;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
}
|
|
#newsletter-signup input {
|
|
margin-left: 0;
|
|
}
|
|
|
|
#newsletter-signup #subscribe {
|
|
clear: left;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
#newsletter-signup .privacy-field {
|
|
padding: 10px 0 0 0;
|
|
}
|
|
|
|
#newsletter-signup .privacy-field .error-wrapper {
|
|
padding: 0;
|
|
margin: 0;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.error-privacy #newsletter-signup .privacy-field .error-wrapper {
|
|
padding-left: 2px;
|
|
}
|
|
|
|
#privacy-check-label {
|
|
font-size: .9em;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#newsletter-signup .channels_signup {
|
|
margin-bottom: .25em;
|
|
}
|
|
|
|
#newsletter-signup .channels_signup li {
|
|
list-style-type: none;
|
|
display: inline-block;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
#newsletter-signup .footnote {
|
|
margin-top: 8px;
|
|
font-style: italic;
|
|
font-size: 11px;
|
|
}
|
|
input:-moz-placeholder {
|
|
font-style: italic;
|
|
color: #ccc;
|
|
}
|
|
.row {
|
|
margin: 16px 0;
|
|
}
|
|
#newsletter-signup .channels_signup input {
|
|
float: left;
|
|
display: inline;
|
|
}
|
|
|
|
#newsletter-signup label span {
|
|
float: left;
|
|
display: inline;
|
|
padding-left: 5px;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
#newsletter-signup label small {
|
|
clear: left;
|
|
font-size: 11px;
|
|
font-style: italic;
|
|
display: block;
|
|
}
|
|
|
|
/* }}} */
|
|
/* {{{ Blog */
|
|
|
|
#blog {
|
|
float: left;
|
|
display: inline;
|
|
width: 425px;
|
|
}
|
|
|
|
#blog h3 {
|
|
margin-top: 0;
|
|
font-size: 22px;
|
|
line-height: 1;
|
|
padding: 5px 0;
|
|
}
|
|
|
|
#blog ul {
|
|
margin: 10px 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#blog ul li {
|
|
margin: 10px 0;
|
|
padding: 0;
|
|
list-style-type: none;
|
|
}
|
|
|
|
#blog h4 {
|
|
margin: 0;
|
|
}
|
|
|
|
|
|
/* }}} */
|
|
|
|
/* Pulled in from inline css */
|
|
/* Bug 654158: we hide the newsletter form, subtitle description */
|
|
#channel #main-feature p {
|
|
visibility: hidden;
|
|
}
|
|
|
|
/* Bug 654158: we hide the newsletter form, subtitle description, some spacing to make it look better without a form */
|
|
#main-content {
|
|
margin: 0 20px 500px;
|
|
}
|
|
|
|
a.download-link em {
|
|
display: block;
|
|
margin: -1em 1em 0;
|
|
text-align:right;
|
|
}
|
|
|
|
#channel #download_aurora_button .download-other,
|
|
#channel #download-button .download-other,
|
|
#channel #download .download-other {
|
|
text-align: center;
|
|
}
|
|
|
|
.channel ul.channel-list {
|
|
min-height: 13em;
|
|
}
|
|
|
|
div.title h3,
|
|
p.footnote {
|
|
max-width:250px;
|
|
}
|
|
|
|
div.title {
|
|
width:700px;
|
|
}
|
|
|
|
form {
|
|
width:200px;
|
|
}
|
|
|
|
body.locale-sq .channel h3 span {
|
|
font-size: 20px;
|
|
}
|
|
|
|
body.locale-ru .channel h3 span,
|
|
body.locale-vi .channel h3 span {
|
|
font-size: 25px;
|
|
}
|
|
|
|
body.locale-gd .channel h3 span {
|
|
font-size: 24px;
|
|
}
|
|
|
|
body.locale-ro .channel h3 span {
|
|
font-size: 28px;
|
|
}
|
|
|
|
/* {{{ RTL Support */
|
|
/* Pulled in from inline css */
|
|
|
|
.html-rtl a.download-link em {
|
|
text-align:left;
|
|
}
|
|
|
|
.html-rtl #main-feature {
|
|
margin: 0 20px 0 210px;
|
|
}
|
|
|
|
.html-rtl #main-content {
|
|
margin: 0 20px;
|
|
}
|
|
|
|
.html-rtl #channel .channel {
|
|
float: right;
|
|
padding-right: 0;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.html-rtl #download_aurora h3 {
|
|
background-position: right 0;
|
|
}
|
|
|
|
.html-rtl #download_beta h3 {
|
|
background-position: right -260px;
|
|
}
|
|
|
|
.html-rtl #download_firefox h3 {
|
|
background-position: right -260px;
|
|
}
|
|
|
|
.html-rtl .channel h3 span {
|
|
padding: 25px 120px 30px 0;
|
|
}
|
|
|
|
.html-rtl .channel ul.channel-list {
|
|
padding: 0 20px 10px 0;
|
|
}
|
|
|
|
.html-rtl ul.home-download {
|
|
margin-right: 30px;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.html-rtl #channel #download_aurora.channel #download_aurora_button a.download-link span.download-content,
|
|
.html-rtl #channel #download_beta.channel #download-button a.download-link span.download-content,
|
|
.html-rtl #channel #download_firefox.channel #download a.download-link span.download-content {
|
|
background: url(/img/covehead/channel/download-arrow.png) no-repeat scroll 190px 50% transparent;
|
|
padding: 10px 45px 12px 20px;
|
|
}
|
|
|
|
.html-rtl #newsletter-signup {
|
|
background: url(/img/covehead/channel/mail.png) no-repeat scroll right 10px transparent;
|
|
margin-right: 20px;
|
|
padding-right: 55px;
|
|
margin-left: 0;
|
|
padding-left: 0;
|
|
|
|
}
|
|
|
|
.html-rtl #newsletter-signup .title h3 {
|
|
float: right;
|
|
border-right: 0;
|
|
border-left: 1px dotted #CCCCCC;
|
|
}
|
|
|
|
.html-rtl #newsletter-signup .title p {
|
|
float: right;
|
|
}
|
|
|
|
|
|
/* Pulled in from inline css */
|
|
#mobile-beta {
|
|
width: 310px !important;
|
|
margin-left: 300px!important;
|
|
text-align:center;
|
|
clear:both !important;
|
|
}
|
|
|
|
.html-rtl #mobile-beta {
|
|
margin-right:300px;
|
|
margin-left:auto;
|
|
}
|
|
|
|
#mobile-beta .download-soon:hover {
|
|
-moz-transition: box-shadow 0.2s ease-in !important;
|
|
box-shadow: 0 3px rgba(90, 90, 90, 0.1), 0 -4px rgb(200,239,255) inset, 0 -10px 30px rgb(200,239,255) inset !important;
|
|
}
|
|
|
|
|
|
#mobile-beta .download-soon:hover a {
|
|
text-decoration:none;
|
|
} |