%PDF-
%PDF-
Mini Shell
Mini Shell
/*------------------------------------------------------------------------------
Loaded in wp-admin for query string `hello=buddypress`.
@since 3.0.0
--------------------------------------------------------------------------------
TABLE OF CONTENTS:
--------------------------------------------------------------------------------
1.0 - Typography and colour
2.0 - Dashicons
3.0 - Elements
3.1 - Backdrop and container
3.2 - Modal footer
3.3 - Modal header
3.4 - Modal content
4.0 - Content styles
4.1 - Backdrop and container
4.2 - Footer content
4.3 - Header content
4.4 - Content content
5.0 - Media
6.0 - Media Queries
6.1 - Desktop Medium
6.2 - Desktop Large
------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------
* 1.0 - Typography and colour
*----------------------------------------------------------------------------*/
:root {
--bp-hello-color-primary: #d34600;
--bp-hello-color-secondary: #e5e5e5;
--bp-hello-container-size: 15%;
}
#bp-hello-container {
a {
color: var(--bp-hello-color-primary);
&:hover {
-webkit-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
color: rgb(0, 0, 0);
}
}
.bp-hello-header {
h1 {
line-height: 1.7;
font-size: 21px;
font-weight: 400;
}
}
}
.bp-hello-content {
p {
font-size: 16px;
}
}
/*------------------------------------------------------------------------------
* 2.0 - Dashicons
*----------------------------------------------------------------------------*/
.bp-hello-close {
.button {
padding: 5px !important;
}
.close-modal {
&:before {
content: "\f158";
color: #23282d; /* wp toolbar */
font: 400 1.5em/1 dashicons;
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-image: none !important;
}
&:focus:before,
&:hover:before {
-webkit-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
color: var(--bp-hello-color-primary);
}
}
}
.bp-hello-social {
li a {
&:before {
color: #23282d; /* wp toolbar */
font: 400 30px/0.6 dashicons;
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-image: none !important;
}
&:hover:before {
-webkit-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
color: var(--bp-hello-color-primary);
}
&.support:before {
content: "\f448";
}
&.twitter:before {
content: "\f301";
}
}
}
/*------------------------------------------------------------------------------
* 3.0 - Elements
*----------------------------------------------------------------------------*/
/*
* 3.1 - Backdrop and container
*/
#bp-hello-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9998;
display: none;
}
#bp-hello-container {
position: fixed;
top: 0;
bottom: 80px;
z-index: 99999;
}
.bp-disable-scroll {
overflow: hidden;
}
/*
* 3.2 - Modal footer
*/
.bp-hello-footer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
height: 58px;
max-height: 58px;
}
.bp-hello-social-cta,
.bp-hello-social-links {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
}
.bp-hello-social-links {
ul {
display: inline-block;
}
}
.bp-hello-social {
li {
position: relative;
bottom: -5px;
display: inline-block;
list-style-type: none;
margin-bottom: 0;
&:last-child a {
margin-left: 4px;
}
}
}
/*
* 3.3 - Modal header
*/
.bp-hello-header {
height: 58px;
max-height: 58px;
}
/*
* 3.4 - Modal content
*/
.bp-hello-content {
padding: 0 25px;
// Force scrolling.
height: calc(100% - 58px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/*------------------------------------------------------------------------------
* 4.0 - Content styles
*----------------------------------------------------------------------------*/
/*
* 4.1 - Backdrop and container
*/
#bp-hello-backdrop {
background-color: rgba(0, 0, 0, 0.8);
-webkit-transition: opacity 0.15s ease-out;
-o-transition: opacity 0.15s ease-out;
transition: opacity 0.15s ease-out;
}
#bp-hello-container {
background-color: rgb(255, 255, 255);
}
/*
* 4.2 - Footer content
*/
.bp-hello-footer {
border-radius: 0 0 3px 3px;
background-color: rgb(255, 255, 255);
border-top: 1px solid var(--bp-hello-color-secondary);
padding: 6px 25px;
p {
font-size: 15px;
}
}
.bp-hello-social-cta {
text-align: left;
}
.bp-hello-social-links {
text-align: right;
}
.bp-hello-social {
li {
a {
text-decoration: none;
}
}
}
/*
* 4.3 - Header content
*/
.bp-hello-header {
padding: 6px 25px;
h1 {
width: calc(100% - 51px); // Approx. width of "X" button block.
}
}
#bp-hello-container {
.bp-hello-header {
border-bottom: 1px solid var(--bp-hello-color-secondary);
}
}
.bp-hello-title {
text-align: left;
}
.bp-hello-close {
position: absolute;
top: 20px;
right: 25px;
text-align: right;
}
/*
* 4.4 - Content content
*/
.bp-hello-content {
background-color: rgb(255, 255, 255);
}
/*------------------------------------------------------------------------------
* 5.0 - Media
*----------------------------------------------------------------------------*/
.bp-hello-content {
img {
border-radius: 2px;
max-width: 100%;
}
iframe {
width: 100%;
}
}
/*------------------------------------------------------------------------------
* 6.0 - Media Queries
*----------------------------------------------------------------------------*/
/*
* 6.1 - Desktop Medium
*/
@media only screen and (min-width: 1024px) {
#bp-hello-backdrop {
display: block;
}
#bp-hello-container {
position: fixed;
top: 60px;
left: var(--bp-hello-container-size);
right: var(--bp-hello-container-size);
bottom: 30px;
z-index: 9999;
border-radius: 3px;
.bp-hello-header {
h1 {
line-height: inherit;
}
}
}
.bp-hello-header {
height: auto;
max-height: inherit;
padding: 6px 30px;
}
.bp-hello-close {
right: 30px;
.close-modal:before {
line-height: 0.7;
}
}
.bp-hello-footer {
position: fixed; // Fixed position above "content" div.
left: var(--bp-hello-container-size);
right: var(--bp-hello-container-size);
bottom: 30px;
z-index: 10000; // See #bp-hello-backdrop
height: auto;
max-height: inherit;
padding: 6px 30px;
}
.bp-hello-content {
// Very very approx. height of header and footer.
height: calc(100% - 90px);
padding: 0 30px;
p {
font-size: 14px;
}
iframe {
height: 100%;
}
}
}
/**
* 6.2 - Desktop Large
*/
@media screen and (min-width: 1280px) {
#bp-hello-container,
.bp-hello-footer {
// Approx. max-width of modal at Desktop Medium size.
left: calc((100% - 896px) / 2);
right: calc((100% - 896px) / 2);
}
}
Zerion Mini Shell 1.0