// FOR THE DEFAULT STYLING OF HEADINGS, LINKS, etc, see the _modules.scss file // Structural base // @todo create a specific scss file for the code after this line /* make sure that the location level occupies 100% of the width */ [data-sek-level="location"] { clear: both; font-size: 16px;//reset the base font-size. we can't use 1rem there because too far from the tag, the base font has already been defined by the theme. } /* To make vertical alignment possible in sections */ .sek-section, .sek-column, .sek-module { display: flex; align-items: center; } .sek-column-inner, .sek-module-inner { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } /* To allow horizontal centering of modules @see https://github.com/presscustomizr/nimble-builder/issues/119 */ /* - sections in locations */ // .sektion-wrapper { // display: flex; // flex-direction: column; // } // .sek-section { // align-self: center; // max-width: 100%; // width: 100%; // } /* - columns in sections */ // .sek-sektion-inner { // flex-direction: column; // } // .sek-column { // align-self: center // } /* - modules in columns */ .sek-column-inner { display: flex; flex-direction: column; } .sek-module { align-self: center; width: 100%; // overflow: hidden; max-width: 100%; } /* a nested sektion should reset its parent column padding @see https://github.com/presscustomizr/nimble-builder/issues/25 */ [data-sek-is-nested="true"] .sek-container-fluid { padding-right: 0; padding-left: 0; } /* MODULE PLACEHOLDER */ /*@font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url('../fonts/material-icons/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2') format('woff2'); }*/ /* @see https://github.com/google/material-design-icons/blob/master/iconfont/material-icons.css */ // @font-face { // font-family: 'Material Icons'; // font-style: normal; // font-weight: 400; // src: url('../fonts/material-icons/MaterialIcons-Regular.eot'); /* For IE6-8 */ // src: local('Material Icons'), // local('MaterialIcons-Regular'), // url('../fonts/material-icons/MaterialIcons-Regular.woff2') format('woff2'), // url('../fonts/material-icons/MaterialIcons-Regular.woff') format('woff'), // url('../fonts/material-icons/MaterialIcons-Regular.ttf') format('truetype'); // } // .material-icons { // font-family: 'Material Icons'; // font-weight: normal; // font-style: normal; // font-size: 24px; /* Preferred icon size */ // display: inline-block; // line-height: 1; // text-transform: none; // letter-spacing: normal; // word-wrap: normal; // white-space: nowrap; // direction: ltr; // /* Support for all WebKit browsers. */ // -webkit-font-smoothing: antialiased; // /* Support for Safari and Chrome. */ // text-rendering: optimizeLegibility; // /* Support for Firefox. */ // -moz-osx-font-smoothing: grayscale; // /* Support for IE. */ // font-feature-settings: 'liga'; // } .sek-module-placeholder { text-align: center; } .sek-module-placeholder .material-icons { font-size: inherit; color: #cfcfcf; } /* LEVEL VISIBILITY BY DEVICE */ // Dec 2019 : since issue https://github.com/presscustomizr/nimble-builder/issues/555, we use a dynamic CSS rule generation instead of static CSS // The CSS classes are kept only for information when inspecting the markup // @see sek_add_css_rules_for_level_visibility() // @media (min-width:768px){ // [data-sek-level="location"] .sek-hidden-on-desktops { display: none; } // } // @media (min-width:575px) and (max-width:767px){ // [data-sek-level="location"] .sek-hidden-on-tablets { display: none; } // } // @media (max-width:575px){ // [data-sek-level="location"] .sek-hidden-on-mobiles { display: none; } // } /* NIMBLE TEMPLATE GENERAL STYLING */ /* */ .sek-screen-reader-text { border: 0; clip: rect(0, 0, 0, 0); height: 1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } #nimble-page { position: relative; word-wrap: break-word; } /* */ /* Nimble btn in admin top bar */ #wpadminbar .sek-nimble-icon { // padding-left: 15px; display: inline-block; } #wpadminbar .sek-nimble-icon img { width:28px; position:absolute; top: 2px; -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-filter: gray; filter: gray; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all, 0.3s ease-in-out; -ms-transition: all, 0.3s ease-in-out; -o-transition: all, 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-box-shadow: none; box-shadow: none; } #wpadminbar .sek-nimble-icon:hover img { -webkit-filter: none; filter: none; -webkit-filter: none; filter: none; } #wpadminbar .sek-nimble-icon .sek-nimble-admin-bar-title { padding-left:30px } // LEVEL BACKGROUND [data-sek-has-bg="true"] { background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; } [data-sek-level="location"] [data-sek-bg-parallax="true"] { //background-repeat: repeat; background-attachment: fixed; background-size: cover; } [data-sek-level="location"] .sek-has-bg { position: relative;//so we can center the CSS loader } // the background-attachment:fixed rule is not well supported on mobile devices // fix for https://github.com/presscustomizr/nimble-builder/issues/414 @supports (-webkit-overflow-scrolling:touch) { body [data-sek-level="location"] [data-sek-bg-parallax="true"], body [data-sek-level="location"] [data-sek-bg-fixed="true"] { background-attachment: scroll; } } // https://stackoverflow.com/questions/15789026/smoothing-the-parallax-scrolling-of-a-background-image // ensure that Nimble sets its own transition rules, prevents any bg rules from third party theme or plugin to be applied [data-sek-level="location"] [data-sek-level] { -webkit-transition: 0s linear; -o-transition: 0s linear; transition: 0s linear; -webkit-transition-property: background-position; -o-transition-property: background-position; transition-property: background-position; } // COMPATIBILITY WITH HUEMAN THEME // fixes https://github.com/presscustomizr/nimble-builder/issues/511 .sek-module .sek-module-inner .alx-tab.thumbs-enabled > li { padding-left: 94px; } .sek-module .sek-module-inner .widget_hu_tabs ul, .sek-module .sek-module-inner .widget_hu_tabs ol { margin-left: 0; margin-bottom: 0; } .sek-module .sek-module-inner .widget_hu_tabs .alx-tabs-nav { margin-bottom: 10px; } // SEPT 2020 => LEVEL SHADOW [data-sek-level].sek-level-has-shadow { -webkit-box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 11px 0px; -moz-box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 11px 0px; box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 11px 0px; } .customizer-preview [data-sek-level].sek-level-has-shadow { -webkit-box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 11px 0px!important; -moz-box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 11px 0px!important; box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 11px 0px!important; } // VIDEO BG [data-sek-level][data-sek-video-bg-src] { position: relative; } [data-sek-level] embed, [data-sek-level] iframe, [data-sek-level] object, [data-sek-level] video { max-width: 100%; width: 100%; margin: 0; line-height: 1; border: none; } [data-sek-level] .sek-custom-embed { line-height: 0; } [data-sek-level] .sek-bg-video-wrapper, [data-sek-level] .sek-background { height: 100%; width: 100%; top: 0; left: 0; position: absolute!important; overflow: hidden; z-index: 0; direction: ltr; } [data-sek-level] .sek-bg-video-wrapper { -webkit-transition: opacity 0.5s linear; -o-transition: opacity 0.5s linear; transition: opacity 0.5s linear; pointer-events: none; opacity: 0; } [data-sek-level] .sek-bg-video-wrapper.sek-bg-loading { opacity: 0; visibility: hidden; } [data-sek-level] .sek-bg-youtube-video-wrapper, [data-sek-level] .sek-background-vimeo-element { max-width: none; } [data-sek-level] .sek-bg-youtube-video-wrapper, [data-sek-level] .sek-background-video-local , [data-sek-level] .sek-background-vimeo-element { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } [data-sek-level] .sek-background-video-local { -o-object-fit: cover; object-fit: cover; } // added for https://github.com/presscustomizr/nimble-builder/issues/688 .sek-module-inner .sek-debug-modules { margin: 1em; padding: 5px; border: 1px solid rgba(221, 221, 221, 0.43); box-shadow: 1px 1px 2px 0 rgba(75, 75, 85, 0.2); -webkit-box-shadow: 1px 1px 2px 0 rgba(75, 75, 85, 0.2); background-color: #fff; font-size: 15px; font-weight: normal; color: #6d6d6d; background: rgba(255, 255, 255, 0.6); } // @media (min-width:575px) and (max-width:768px){ // .customizer-preview [data-sek-video-bg-on-mobile="false"] .sek-bg-video-wrapper { // display: none; // } // } // when customizing, emulate hiding on mobile @media (max-width:575px){ .customizer-preview [data-sek-video-bg-on-mobile="false"] .sek-bg-video-wrapper { display: none; } } // SEPT 2020 : Animate body:not(.customizer-preview) .sek-animate-candidate:not(.sek-animate-displayed-before-starting) { opacity: 0;} .sek-overflow-hidden-while-animating { overflow: hidden;} // Janv 2021 : Pro header // default background color on scroll, consistent with default registration param in nimble-builder-pro\inc\front\nb-pro-menu.php .nb-scroll-down #nimble-header:not(.sek-header-mobile-menu-expanded), .nb-scroll-up #nimble-header:not(.sek-header-mobile-menu-expanded) { background-color: rgba(255,255,255,0.9); } // July 2021 : Fix button style Magnific Popup .mfp-wrap { button.mfp-arrow, button.mfp-close { background: none!important; background:transparent!important; } img.mfp-img { padding: 40px 0 0; } &::after { bottom: 20px; } .mfp-bottom-bar { margin-top: 0; } }