%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);
}
#bp-hello-container a: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: black;
}
#bp-hello-container .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;
}
.bp-hello-close .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;
}
.bp-hello-close .close-modal:focus:before, .bp-hello-close .close-modal: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;
}
.bp-hello-social li a: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.support:before {
content: "\f448";
}
.bp-hello-social li a.twitter:before {
content: "\f301";
}
/*------------------------------------------------------------------------------
* 3.0 - Elements
*----------------------------------------------------------------------------*/
/*
* 3.1 - Backdrop and container
*/
#bp-hello-backdrop {
position: fixed;
top: 0;
right: 0;
left: 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;
}
.bp-hello-social li:last-child a {
margin-right: 4px;
}
/*
* 3.3 - Modal header
*/
.bp-hello-header {
height: 58px;
max-height: 58px;
}
/*
* 3.4 - Modal content
*/
.bp-hello-content {
padding: 0 25px;
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: white;
}
/*
* 4.2 - Footer content
*/
.bp-hello-footer {
border-radius: 0 0 3px 3px;
background-color: white;
border-top: 1px solid var(--bp-hello-color-secondary);
padding: 6px 25px;
}
.bp-hello-footer p {
font-size: 15px;
}
.bp-hello-social-cta {
text-align: right;
}
.bp-hello-social-links {
text-align: left;
}
.bp-hello-social li a {
text-decoration: none;
}
/*
* 4.3 - Header content
*/
.bp-hello-header {
padding: 6px 25px;
}
.bp-hello-header h1 {
width: calc(100% - 51px);
}
#bp-hello-container .bp-hello-header {
border-bottom: 1px solid var(--bp-hello-color-secondary);
}
.bp-hello-title {
text-align: right;
}
.bp-hello-close {
position: absolute;
top: 20px;
left: 25px;
text-align: left;
}
/*
* 4.4 - Content content
*/
.bp-hello-content {
background-color: white;
}
/*------------------------------------------------------------------------------
* 5.0 - Media
*----------------------------------------------------------------------------*/
.bp-hello-content img {
border-radius: 2px;
max-width: 100%;
}
.bp-hello-content 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;
right: var(--bp-hello-container-size);
left: var(--bp-hello-container-size);
bottom: 30px;
z-index: 9999;
border-radius: 3px;
}
#bp-hello-container .bp-hello-header h1 {
line-height: inherit;
}
.bp-hello-header {
height: auto;
max-height: inherit;
padding: 6px 30px;
}
.bp-hello-close {
left: 30px;
}
.bp-hello-close .close-modal:before {
line-height: 0.7;
}
.bp-hello-footer {
position: fixed;
right: var(--bp-hello-container-size);
left: var(--bp-hello-container-size);
bottom: 30px;
z-index: 10000;
height: auto;
max-height: inherit;
padding: 6px 30px;
}
.bp-hello-content {
height: calc(100% - 90px);
padding: 0 30px;
}
.bp-hello-content p {
font-size: 14px;
}
.bp-hello-content iframe {
height: 100%;
}
}
/**
* 6.2 - Desktop Large
*/
@media screen and (min-width: 1280px) {
#bp-hello-container,
.bp-hello-footer {
right: calc((100% - 896px) / 2);
left: calc((100% - 896px) / 2);
}
}
Zerion Mini Shell 1.0