// ==========================================================================
// Main Layout
// ==========================================================================
.configure .frame.top.fixed {
@include breakpoint(tablet){
padding-left: 0;
};
}
// ==========================================================================
// Main author styles
// ==========================================================================
.wrap.inner,
.page-content {
max-width: 950px;
margin: 0 auto;
li {
line-height: 23px;
}
}
.page-content {
@include breakpoint(large-phone){
margin-top: 0;
};
}
.wrap.inner {
@include breakpoint(large-desktop) {
background: $clouds;
padding: 15px;
};
@include breakpoint(large-phone) {
margin-top: em(24px);
};
}
.page-content.about {
position: relative;
z-index: 10;
@include breakpoint(large-desktop){
background: $clouds;
padding: 15px;
};
}
.page-content.configure {
@include breakpoint(large-desktop){
background: $clouds;
};
}
.footer nav {
max-width: 550px;
margin: 0 auto;
}
// ==========================================================================
// Main navigation
// ==========================================================================
.header {
left: 0;
right: 0;
background: $green;
}
.header-nav {
li {
line-height: 60px;
}
a {
padding: 0 em(10px);
line-height: 24px;
}
.jetpack-logo {
a {
display: inline-block;
position: relative;
width: 214px;
margin-right: 6px;
background: url(../images/jetpack-logo.png) center center no-repeat;
background: url(../images/jetpack-logo.svg) center center no-repeat, none;
background-size: 183px auto;
color: #fff;
line-height: 60px;
font-weight: normal;
span {
text-indent: -9999px;
visibility: hidden;
}
// needs to be cleaned up and removed - jeffgolenski
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: 183px 32px;
}
}
}
.jetpack-modules + .jetpack-modules {
margin-left: 15px;
}
}
.main-nav {
float: left;
li {
margin: 0;
}
@include breakpoint(desktop){
font-size: 13px;
};
}
// Help tab
.jetpack-pagestyles {
#screen-meta {
margin: 0;
}
#screen-meta-links .screen-meta-toggle {
z-index: 2;
}
#screen-options-link-wrap, #contextual-help-link-wrap {
border: none;
}
.update-nag {
display: none;
}
}
// ==========================================================================
// Modal
// ==========================================================================
.loading {
bottom: 50%;
position: absolute;
top: 50%;
width: 100%;
span {
color: #999;
}
}
.modal {
background: #fff;
position: fixed;
top: 52px;
bottom: 20px;
right: 20px;
left: 20px;
margin-left: 160px;
display: none;
box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
z-index: 500;
.close {
position: absolute;
top: 0;
right: 0;
font: 300 em(24px) 'genericons' !important;
color: #777;
content: '\f405';
display: inline-block;
padding: em(4px) em(10px) em(6px);
z-index: 5;
&:hover {
background: #eee;
opacity: 0.8;
}
&:active {
background: #eee;
opacity: 0.4;
}
}
.content-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
padding: em(30px, 14px);
}
.content {
margin: 0 auto;
max-width: 900px;
text-align: left;
}
h2 {
text-align: left;
margin-top: 0;
color: #5d6d74;
font-weight: 300;
line-height: 32px;
text-shadow: 0 1px 1px #fff;
@include breakpoint(large-phone){
font-size: 26px;
};
}
h5 {
clear: left;
}
p {
font-size: em(16px, 13px);
}
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 12px 20px;
border-top: 1px solid #ddd;
background: #fff;
text-align: right;
ul {
margin: 0;
}
li {
display: inline-block;
margin: 0;
}
}
.button-secondary,
.button-primary:active {
// fixing weird core bug thingy
vertical-align: baseline;
}
@include breakpoint(desktop){
bottom: 5%;
margin-left: 36px;
font-size: 80%;
.content {
top: 38px;
}
};
@include breakpoint(tablet){
top: 66px;
margin-left: 0;
};
@include breakpoint(phablet){
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
}
}
.jp-info-img {
float: right;
margin: 0 0 8px 30px;
img {
border: 1px solid #ddd;
max-width: 100%;
height: auto;
&:first-child {
margin-top: 0;
}
}
@include breakpoint(tablet){
float: none;
margin: 0 0 15px;
};
}
.content-container.modal-footer {
bottom: 53px;
}
.shade {
background: #000;
bottom: 0;
cursor: pointer;
display: none;
left: 0;
opacity: 0.2;
position: fixed;
right: 0;
top: 0;
z-index: 11;
}
// ==========================================================================
// Footer Navigation
// ==========================================================================
// NOTE: .download-jetpack is in _buttons.scss
.footer {
margin-top: em(20px);
position: relative;
padding: em(140px) 0 em(60px);
text-align: center;
&:before,
&:after {
content: '';
position: absolute;
left: 0;
pointer-events: none;
}
&:before {
top: 0;
margin-top: -1px; // Removes subpixel gap on retina landscape
width: 100%;
height: 195px;
}
&:after {
display: none;
}
.download-jetpack {
margin-bottom: 33px;
}
@include minbreakpoint(large-desktop){
padding-bottom: 35px;
};
@include breakpoint(large-desktop) {
padding-top: 165px;
padding-bottom: 0;
&:before {
background-size: 160% auto;
}
ul {
float: none;
overflow: hidden; // Clears the float
}
};
@include breakpoint(desktop){
padding-top: 146px;
};
@include breakpoint(tablet){
margin-top: 0;
};
@include breakpoint(large-phone){
margin-top: 0;
padding-top: 135px;
};
@include breakpoint(phone){
padding-top: 76px;
};
}
.footer nav {
max-width: 100%;
a,
a:visited {
padding: 4px 6px;
color: #999;
&:hover,
&:focus {
color: #81A844;
}
}
@include breakpoint(large-desktop){
a,
a:visited {
&:hover,
&:focus {
color: $green;
}
}
};
@include breakpoint(large-phone){
li {
display: block;
float: none;
margin: 0;
text-align: left;
}
a {
display: block;
padding: 0 16px;
line-height: 44px;
}
};
}
.primary {
padding: 25px 15px 10px 15px;
border-bottom: 1px solid #eee;
}
.secondary-footer {
margin: 0 auto;
li {
margin-right: 5px;
}
@include minbreakpoint(tablet){
padding: 8px 15px 10px;
margin-bottom: 30px;
border-bottom: 1px solid #eee;
};
@include minbreakpoint(large-desktop){
margin-bottom: 0;
};
@include breakpoint(tablet){
padding: 8px 15px 8px;
border-bottom: none;
};
@include breakpoint(large-phone){
margin: 0;
padding: 0;
border: none;
font-weight: 400;
a {
border-top: 1px solid #eee;
}
};
}
.footer .a8c-attribution {
margin: 0;
padding: 0 6px;
color: #bbb;
font-size: em(11px);
font-family: $gill;
text-transform: uppercase;
a {
// This may look janky, but if you highlight from
// "AN" to "TEAM," copy and paste, you'll get the whole
// "An AUTOMATTIC TEAM" phrase.
display: inline-block;
position: relative;
padding: 4px 16px;
right: 9999px;
outline: 0;
&:after {
content: 'A';
position: absolute;
top: 2px;
right: -9999px;
height: 100%;
color: #999;
font-size: em(17px, 11px);
font-family: $automatticons;
text-align: center;
}
&:hover {
&:after {
animation: candy .4s ease-in-out;
}
}
}
}
.secondary {
@include minbreakpoint(tablet){
padding: 0 15px 10px 15px;
border-bottom: 1px solid #eee;
}
@include minbreakpoint(large-desktop){
padding: 0 15px 10px 15px;
border-bottom: none;
}
}
// ==========================================================================
// Messages & Errors
// ==========================================================================
.jetpack-message {
background: lighten($green, 5%);
border: 1px solid darken($green, 5%);
margin: 33px auto 0;
max-width: 90%;
position: relative;
z-index: 2;
&.is-opt-in {
margin: 50px 0 0;
max-width: 100%;
padding: 10px 15px;
background: #fff;
border: 0;
box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
font-size: 13px;
text-align: center;
// page=jetpack specific styling
.subhead & {
margin: 0;
padding-bottom: 0;
background: transparent;
box-shadow: none;
.jp-button {
display: inline-block;
}
}
p {
color: #3c4549;
}
.jp-button {
margin-top: 15px;
display: none;
}
}
.squeezer {
h2 {
font-size: 1em;
}
}
h2 {
color: #fff;
margin: 0;
}
p {
color: #fff;
margin: 0;
opacity: 0.7;
}
.squeezer {
padding: 23px 23px 23px 80px;
position: relative;
text-align: left;
&:before {
color: #fff;
content: '\f418';
font-family: 'Genericons';
font-size: 33px;
height: 33px;
left: 25px;
opacity: 0.6;
position: absolute;
top: 23px;
top: calc( 50% - 22px );
}
@include breakpoint(large-phone){
padding: 23px;
&:before {
display: none;
}
}
a {
color:#FFF;
border-bottom:1px solid #D5E4BD;
} a:hover{
border-bottom:1px solid #F1F6E9;
}
}
&.error .squeezer:before,
&.jetpack-err .squeezer:before {
content: '\f414';
}
}
.configure-module .jetpack-message {
max-width:100%;
}
// ==========================================================================
// Uncategorized
// ==========================================================================
@include breakpoint(large-phone){
.wrap.inner.jp-support { // Used anywhere?
.jp-support-column-left {
width: 100%;
.widget-text {
margin-right: 0;
width: 100%;
}
}
.jp-support-column-right {
width: 100%;
}
}
};
// ==========================================================================
// Custom Breakpoints
// ==========================================================================
@media screen and (max-width: 515px) {
.jp-frame {
.header-nav {
padding-bottom: 10px;
li {
line-height: 30px;
}
.jetpack-logo {
width: 100%;
text-align: center;
}
.jetpack-modules {
margin: 0;
width: 50%;
text-align: right;
padding: 0 5px;
}
.jetpack-modules + .jetpack-modules {
text-align: left;
}
.jetpack-modules:nth-child(4) {
text-align: center;
margin: 0 auto;
width: 100%;
a {
padding: 0 10px;
}
}
}
}
} // max 515px
// ==========================================================================
// Fix notice in IE
// ==========================================================================
#ie-legacy-notice .dops-notice__content {
display: inline-block;
margin-left: 10px;
}