About
Themes
Bubble

Preview

Bubble

How to

Add the following css to your custom css :

#master {
    --TOKEN-WEBPART-BORDER-RADIUS: 10px;
    --TOKEN-BIG-BUTTON-BORDER-RADIUS: 40px;
    --TOKEN-MEDIUM-BUTTON-BORDER-RADIUS: 40px;
    --TOKEN-INPUT-BORDER-RADIUS: 10px;
}

[data-theme-emphasis="3"] {
    --TOKEN-BIG-BUTTON-OUTLINE-INVERSE-COLOR: var(--TOKEN-WHITE, #fff);
    --TOKEN-BIG-BUTTON-OUTLINE-INVERSE-BORDER: 1px solid var(--TOKEN-WHITE, #fff);
    --TOKEN-BIG-BUTTON-OUTLINE-INVERSE-BACKGROUND: transparent;
}

/* Hide SharePoint Header - When Office is hidden */
#master.toggle-collapsed #spSiteHeader {
    display: none;
    transition: none;
}
/* Hide SharePoint Header - Allways */
#master [data-sp-feature-tag="Site header host"] [class*="headerRow"] {
    display: none !important;
}
/* Hide SharePoint command (page add/edit) - When Office is hidden */
#master.toggle-collapsed #spCommandBar {
    display: none;
    transition: none;
}
/* Hide SharePoint Like / Views / Save for later at bottom of the page - Allways */
#CommentsWrapper {
    display: none;
}
/* Remove left SharePoint bar - When Office is hidden */
#master.toggle-collapsed #sp-appBar {
    display: none !important;
    transition: none;
}
@media (min-width: 1024px) {
    #master.toggle-collapsed[data-is-sp-appbar] .pow-panel-left-small {
        left: 0px;
    }
}
@media (min-width: 900px) {
    #master.toggle-collapsed[data-is-sp-appbar] .pow-panel-left-small.from-panel-left {
        left: 400px;
    }
}
#master.toggle-collapsed[data-is-sp-appbar] .pow-panel-left-large {
    left: 0px;
}
@media (min-width: 1450px) {
    #master.toggle-collapsed[data-is-sp-appbar] .pow-panel-left-large.from-panel-left {
        left: 400px;
    }
}

/* Hide header/footer in mobile app */
.powell-mobile-app #pow-header,
.powell-mobile-app powell-breadcrumb,
.powell-mobile-app .ms-SPLegacyFabricBlock[style*="min-height"],
.powell-mobile-app .footer-container,
.powell-mobile-app #DeltaPageStatusBar,
.powell-mobile-app #ribbon-container,
.powell-mobile-app #breadcrumb,
.powell-mobile-app #footer {
    display: none !important;
}

/* Gamification profile */
.pow-gamification-profile .pow-webpart-border-radius {
    border: 0 none;
    box-shadow: var(--TOKEN-WEBPART-BOX-SHADOW, 0 2px 8px var(--TOKEN-BLACK-ALPHA-30, rgba(0, 0, 0, 0.3)));
}
.small-webpart .pow-gamification-profile [style*="270px"] {
    width: 100px !important;
}

/* Header Megamenu */
@media (min-width: 961px) {
    .megamenu-description-container .view-more {
        border-radius: var(--TOKEN-MEDIUM-BUTTON-BORDER-RADIUS, 3px);
    }
    .wrapper-topnav-standard .second-level-container {
        border-radius: 0 0 var(--TOKEN-WEBPART-BORDER-RADIUS, 3px) var(--TOKEN-WEBPART-BORDER-RADIUS, 3px);
    }
}

/* Change Search view detail image format */
.pow-article-metadata .article-image > powell-action-item + div {
    height: 0;
    padding-bottom: 50%;
}
.pow-article-metadata .article-image > powell-action-item + div img {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    border-radius: var(--TOKEN-WEBPART-BORDER-RADIUS, 3px);
}

/* Webpart Title text */
#master .title-container [class*="pow-heading"],
#master h2.ms-webpart-titleText {
    font-size: 20px;
    margin-left: 35px;
}

/* Webpart Title bullet */
#master .title-container [class*="pow-heading"].border-inside:before,
#master h2.ms-webpart-titleText:before {
    width: 20px;
    height: 8px;
    border-radius: 5px;
}

@media (max-width: 650px) {
    #master .title-container [class*="pow-heading"],
    #master h2.ms-webpart-titleText {
        margin-left: 0;
    }
}

/* Webpart Banner */
#master .pow-banner .container-content {
    border-radius: 0 var(--TOKEN-WEBPART-BORDER-RADIUS, 3px) var(--TOKEN-WEBPART-BORDER-RADIUS, 3px) 0;
}

/* Pagination */
.pow-pagination-container .page.active button {
    background-color: transparent;
}

/* Square view */
@media (min-width: 651px) {
    .pow-feed-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        grid-template-rows: repeat(auto-fit, 100px);
    }
}

/* Twitter */
.twitter_ctrl {
    border: 0 none;
    border-radius: var(--TOKEN-WEBPART-BORDER-RADIUS, 3px);
    box-shadow: var(--TOKEN-WEBPART-BOX-SHADOW, 0 2px 8px var(--TOKEN-BLACK-ALPHA-30, rgba(0, 0, 0, 0.3)));
}

/* Discussion */
.discussion-item {
    box-shadow: var(--TOKEN-WEBPART-BOX-SHADOW, 0 2px 8px var(--TOKEN-BLACK-ALPHA-30, rgba(0, 0, 0, 0.3)));
}

/* Slider */
@media (min-width: 961px) {
    .pow-slider-full2 .slider-content,
    .pow-slider-full .slider-content {
        border-radius: 0 var(--TOKEN-WEBPART-BORDER-RADIUS, 3px) var(--TOKEN-WEBPART-BORDER-RADIUS, 3px) 0;
    }
}

/* Admin item button */
.pow-admin-item .pow-admin-item-button {
    border-radius: var(--TOKEN-WEBPART-BORDER-RADIUS, 3px);
}

/* Combined search square */
.pow-feed-grid {
    grid-gap: 4px;
}