OwlCyberSecurity - MANAGER
Edit File: customizer-controls.css
/** * Customizer controls styling * */ #accordion-section-digital_newspaper_about_section h3.accordion-section-title { background-color: #2271b1!important; color: #ffffff!important; } #customize-controls .customize-info { margin-bottom: 0 !important; } #customize-controls .control-section>h3.accordion-section-title { display: flex; align-items: center; padding: 14px 26px; font-size: 13px; font-weight: 400; line-height: 13px; border-left: none; border-bottom: none; background-color: rgba(0,0,0,0); } #customize-controls .control-section>h3.accordion-section-title:after { font-size: 12px; top: calc(50% - 6px); right: 23px; color: inherit; } .customize-control select, .customize-control input { margin-top: 2px; border: none; box-shadow: 0px 0px 2px rgb(24 35 177 / 58%); border-radius: 0; } #accordion-section-digital_newspaper_about_section h3.accordion-section-title { background-color: #2271b1; color: #ffffff; } /********************************** Section Tab Styles **********************************/ .customize-section-tab-control .components-tab-panel__tabs { display: -webkit-box; display: flex; margin-top: -5px; margin-left: -24px; margin-right: -24px; padding: 0; margin-bottom: 0; border: 1px solid #dddddd; background: #ffffff; margin-bottom: 0; } .customize-section-tab-control .components-tab-panel__tabs button { -webkit-box-flex: 1; flex: 1 1 0; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; font-size: 11.5px; font-weight: 500; letter-spacing: 1px; font-style: normal; text-transform: uppercase; height: 40px; margin: 0; box-sizing: content-box; padding: 0 10px; cursor: pointer; border: 0; background: transparent; border-top: 2px solid transparent; border-radius: 0; } .customize-section-tab-control .components-tab-panel__tabs button.active-tab { border-top-color: #0071a1; color: #0073aa; background-image: linear-gradient( 180deg, #f3f5f6, #ffffff); } /********************************** Item Sortable Control Styles **********************************/ .customize-item-sortable-control .sort-list .sort-item { padding: 0 0 0 12px; border: 1px solid #ddd; color: #556068; background: #fff; cursor: move; font-size: 12px; line-height: 38px; margin: 0 0 10px; border-radius: 3px; } .customize-item-sortable-control .sort-list .sort-item.invisible { opacity: .6; } .customize-item-sortable-control .sort-list .sort-item .trigger-icon { cursor: pointer; float: right; position: relative; font-size: 16px; padding: 9px; line-height: 20px; border-left: 1px solid #ddd; } /*************************** Info Box control ****************************/ .customize-info-box-control .info-box-label { margin: 0; font-size: 13px; } .customize-info-box-control .info-box-icon { margin-right: 6px; } .customize-info-box-control .info-box-description { font-size: 12px; font-style: italic; } .customize-info-box-control .info-box-button { display: block; text-align: center; } /*************************** Responsive Box control ****************************/ .customize-responsive-range-control, .customize-responsive-box-control { position: relative; } .customize-responsive-range-control .responsive-icons, .customize-responsive-box-control .responsive-icons { position: absolute; right: 30px; cursor: pointer; z-index: 9; } /********************************** Color Picker / Color Group Picker Styles **********************************/ .customize-color-image-group-control .preset-colors, .customize-color-group-control .preset-colors, .customize-color-group-picker-control .preset-colors, .customize-color-picker-control .preset-colors, .components-popover__content .preset-colors { display: flex; align-items: center; justify-content: space-between; padding: 10px 5px; border-bottom: 1px solid #eee; margin: 0 auto; } .react-colorful { margin: 0 auto; } .customize-color-image-group-control .preset-colors .preset-colors-inner, .customize-color-group-control .preset-colors .preset-colors-inner, .customize-color-group-picker-control .preset-colors .preset-colors-inner, .customize-color-picker-control .preset-colors .preset-colors-inner, .components-popover__content .preset-colors .preset-colors-inner { display: flex; margin: 0; flex-wrap: wrap; justify-content: center; } .customize-color-image-group-control .preset-colors .preset-colors-inner li, .customize-color-group-control .preset-colors .preset-colors-inner li, .customize-color-group-picker-control .preset-colors .preset-colors-inner li, .customize-color-picker-control .preset-colors .preset-colors-inner li, .components-popover__content .preset-colors .preset-colors-inner li { display: flex; align-items: center; justify-content: center; position: relative; width: 20px; height: 20px; margin-bottom: 5px; cursor: pointer; border-radius: 100%; box-shadow: inset 0 0 3px rgb(0 0 0 / 9%); margin-right: 6px; } .customize-color-image-group-control .preset-colors .preset-colors-inner li:not(:last-child), .customize-color-group-control .preset-colors .preset-colors-inner li:not(:last-child), .customize-color-group-picker-control .preset-colors .preset-colors-inner li:not(:last-child), .customize-color-picker-control .preset-colors .preset-colors-inner li:not(:last-child) { margin-right: 10px; } .customize-color-image-group-control .preset-colors .preset-colors-inner li.active, .customize-color-group-control .preset-colors .preset-colors-inner li.active, .customize-color-group-picker-control .preset-colors .preset-colors-inner li.active, .customize-color-picker-control .preset-colors .preset-colors-inner li.active { box-shadow: inset 0 0 3px rgb(0 0 0 / 9%), 0px 0px 0px 3px #fff; } .customize-color-image-group-control .preset-colors .preset-colors-inner li.active:before, .customize-color-group-control .preset-colors .preset-colors-inner li.active:before, .customize-color-group-picker-control .preset-colors .preset-colors-inner li.active:before, .customize-color-picker-control .preset-colors .preset-colors-inner li.active:before { position: absolute; content: ""; z-index: -1; width: calc(100% + 8px); height: calc(100% + 8px); background: rgba(0,0,0,.07); border-radius: 100%; } .customize-color-image-group-control .preset-colors .preset-colors-inner li.active:after, .customize-color-group-control .preset-colors .preset-colors-inner li.active:after, .customize-color-group-picker-control .preset-colors .preset-colors-inner li.active:after, .customize-color-picker-control .preset-colors .preset-colors-inner li.active:after { display: flex; align-items: center; justify-content: center; position: absolute; top: 1px; left: -1px; right: 0px; bottom: 0px; content: ""; font-family: dashicons; font-size: 15px; color: rgb(255, 255, 255); text-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; } .customize-preset-gradient-picker-control .components-popover__content, .customize-preset-color-picker-control .components-popover__content, .customize-color-image-group-control .components-popover__content, .customize-color-group-control .components-popover__content, .customize-color-group-picker-control .components-popover__content, .customize-color-picker-control .components-popover__content { border-radius: 3px; border: none; } .customize-preset-gradient-picker-control .components-circular-option-picker, .customize-preset-color-picker-control .components-circular-option-picker, .customize-color-group-control .components-circular-option-picker, .customize-color-image-group-control .components-circular-option-picker { padding: 10px; width: 100%; box-sizing: border-box; } .customize-preset-gradient-picker-control .components-color-picker, .customize-preset-color-picker-control .components-color-picker, .customize-color-image-group-control .components-color-picker, .customize-color-group-control .components-color-picker, .customize-color-group-picker-control .components-color-picker, .customize-color-picker-control .components-color-picker { padding: 10px 8px; box-sizing: border-box; width: 100%; } .customize-preset-color-picker-control .react-colorful, .customize-color-image-group-control .react-colorful, .customize-color-group-control .react-colorful, .customize-color-group-picker-control .react-colorful, .customize-color-picker-control .react-colorful { width: 100%; } .customize-preset-color-picker-control .react-colorful .react-colorful__saturation, .customize-color-image-group-control .react-colorful .react-colorful__saturation, .customize-color-group-control .react-colorful .react-colorful__saturation, .customize-color-group-picker-control .react-colorful .react-colorful__saturation, .customize-color-picker-control .react-colorful .react-colorful__saturation { height: 117px; border-radius: 5px; margin-bottom: 20px; } .customize-gradient-picker-control .customize-control-title, .customize-color-picker-control .customize-control-title, .customize-color-group-control .customize-control-title, .customize-color-image-group-control .customize-control-title, .customize-color-group-picker-control .customize-control-title { font-size: 11.5px; } .customize-preset-color-picker-control .control-header .control-header-trigger, .customize-preset-gradient-picker-control .control-header .control-header-trigger, .customize-gradient-picker-control .control-header .control-header-trigger, .customize-color-picker-control .control-header .control-header-trigger, .customize-color-group-control .control-header .control-header-trigger, .customize-color-image-group-control .control-header .control-header-trigger, .customize-advanced-color-group-control .control-header .control-header-trigger, .customize-color-group-picker-control .control-header .control-header-trigger, .customize-control-color-picker .control-header .control-header-trigger { display: flex; justify-content: space-between; align-items: center; } .customize-gradient-picker-control .control-header .component-color-indicator, .customize-color-picker-control .control-header .component-color-indicator, .customize-color-group-control .control-header .component-color-indicator, .customize-color-image-group-control .control-header .component-color-indicator, .customize-advanced-color-group-control .control-header .component-color-indicator, .customize-color-group-picker-control .control-header .component-color-indicator, .customize-control-color-picker .control-header .component-color-indicator { cursor: pointer; transform: scale(1); height: 28px; width: 28px; border-radius: 50%; display: flex; justify-content: center; align-items: center; } .customize-gradient-picker-control .control-header .component-color-indicator:hover, .customize-color-picker-control .control-header .component-color-indicator:hover, .customize-color-group-control .control-header .component-color-indicator:hover, .customize-color-image-group-control .control-header .component-color-indicator:hover, .customize-advanced-color-group-control .control-header .component-color-indicator:hover, .customize-color-group-picker-control .control-header .component-color-indicator:hover, .customize-control-color-picker .control-header .component-color-indicator:hover { transform: scale(1.05); box-shadow: none; } .customize-gradient-picker-control, .customize-color-picker-control, .customize-control-advanced-color-group, .customize-control-color-group-picker, .customize-control-color-picker { margin-bottom: 22px; } .customize-gradient-picker-control .customize-control-title, .customize-color-picker-control .customize-control-title, .customize-color-group-control .customize-control-title, .customize-color-image-group-control .customize-control-title, .customize-control-advanced-color-group .customize-control-title, .customize-control-color-group-picker .customize-control-title, .customize-control-color-picker .customize-control-title { line-height: 2; font-size: 13px; } .customize-color-group-picker-control .control-content-wrap, .customize-color-group-control .control-content-wrap, .customize-color-image-group-control .control-content-wrap { display: flex; align-items: center; } .customize-color-picker-control .control-content-wrap .reset-button, .customize-color-group-picker-control .control-content-wrap .reset-button, .customize-color-group-control .control-content-wrap .reset-button, .customize-color-image-group-control .control-content-wrap .reset-button { color: #006ba1; height: 20px; width: 20px; padding: 4px; background: 0 0; box-shadow: none; } .customize-color-picker-control .control-content-wrap .reset-button .dashicon, .customize-color-group-picker-control .control-content-wrap .reset-button .dashicon, .customize-color-group-control .control-content-wrap .reset-button .dashicon, .customize-color-image-group-control .control-content-wrap .reset-button .dashicon { width: 12px; height: 12px; font-size: 12px; } .customize-color-picker-control .control-content-wrap .reset-button.components-button.is-secondary:hover:not(:disabled):hover, .customize-color-group-picker-control .control-content-wrap .reset-button.components-button.is-secondary:hover:not(:disabled):hover, .customize-color-group-control .control-content-wrap .reset-button.components-button.is-secondary:hover:not(:disabled):hover, .customize-color-image-group-control .control-content-wrap .reset-button.components-button.is-secondary:hover:not(:disabled):hover { color: #02abff; box-shadow: none; } .customize-preset-gradient-picker-control .components-popover__content .components-surface.components-card{ padding: 1px 4px; } .components-popover__content .preset-colors .preset-colors-inner li.active { box-shadow: inset 0 0 3px rgb(0 0 0 / 9%), 0px 0px 0px 3px #fff; } .components-popover__content .preset-colors .preset-colors-inner li.active:before { position: absolute; content: ""; z-index: -1; width: calc(100% + 8px); height: calc(100% + 8px); background: rgba(0,0,0,.07); border-radius: 100%; } .components-popover__content .preset-colors .preset-colors-inner li.active:after { display: flex; align-items: center; justify-content: center; position: absolute; top: 1px; left: -1px; right: 0px; bottom: 0px; content: "\f147"; font-family: dashicons; font-size: 15px; color: rgb(255, 255, 255); text-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; } /********************************** Border Box control ***********************************/ .customize-border-control .control-inner { display: flex; justify-content: flex-end; } .customize-border-control .control-inner > div { padding: 2px; } .customize-border-control .component-color-indicator { width: 26px; height: 26px; width: 26px; } .customize-border-control .preset-colors { display: flex; align-items: center; justify-content: space-between; padding: 17px; border-bottom: 1px solid #eee; } .customize-border-control .preset-colors .preset-colors-inner { display: flex; margin: 0; } .customize-border-control .preset-colors .preset-colors-inner li { display: flex; align-items: center; justify-content: center; position: relative; width: 24px; height: 24px; margin-bottom: 0; cursor: pointer; border-radius: 100%; box-shadow: inset 0 0 3px rgb(0 0 0 / 9%); } .customize-border-control .preset-colors .preset-colors-inner li:not(:last-child) { margin-right: 10px; margin-bottom: 5px; } .customize-border-control .preset-colors .preset-colors-inner li.active { box-shadow: inset 0 0 3px rgb(0 0 0 / 9%), 0px 0px 0px 3px #fff; } .customize-border-control .preset-colors .preset-colors-inner li.active:before { position: absolute; content: ""; z-index: -1; width: calc(100% + 8px); height: calc(100% + 8px); background: rgba(0,0,0,.07); border-radius: 100%; } .customize-border-control .preset-colors .preset-colors-inner li.active:after { display: flex; align-items: center; justify-content: center; position: absolute; top: 1px; left: -1px; right: 0px; bottom: 0px; content: ""; font-family: dashicons; font-size: 15px; color: rgb(255, 255, 255); text-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; } .customize-border-control .components-popover__content { border-radius: 12px; border: none; } .customize-border-control .components-color-picker { padding: 20px 17px; width: 100%; box-sizing: border-box; } .customize-border-control .react-colorful { width: 100%; } .customize-border-control .react-colorful .react-colorful__saturation { height: 117px; border-radius: 5px; margin-bottom: 20px; } /********************************** Tab Panel Styles **********************************/ .digital-newspaper-group-tab-panel { width: 190px; } .digital-newspaper-group-tab-panel .components-tab-panel__tabs { display: flex; justify-content: space-around; background: #ffffff; } .digital-newspaper-group-tab-panel .components-tab-panel__tabs .components-tab-panel__tabs-item { flex: 1 1 auto; border: 1px solid #dfe1e4; display: flex; justify-content: center; font-size: 12px; font-weight: 400; height: 38px; } .digital-newspaper-group-tab-panel .components-tab-panel__tabs .components-tab-panel__tabs-item:first-child { border-radius: 3px 0 0 3px; border-right: none; } .digital-newspaper-group-tab-panel .components-tab-panel__tabs .components-tab-panel__tabs-item:last-child { border-radius: 0 3px 3px 0; border-left: none; } .digital-newspaper-group-tab-panel .components-tab-panel__tabs .active-tab { color: #fff; background: #2271b1; border-color: #2271b1; } .component-color-indicator { cursor: pointer; } #accordion-panel-digital_newspaper_innerpages_settings_panel, #accordion-section-background_image, #accordion-section-footer_three_column_section{ margin-top: 15px; } .customize-color-group-picker-control .components-dropdown { padding: 0 5px; } /********************************** Block Controls **********************************/ .customize-video-playlist-control .block-item, .customize-block-repeater-control .block-item, .digital-newspaper-repeater-control-inner { position: relative; } .customize-video-playlist-control .block-item.block--hidden, .customize-block-repeater-control .block-item.block--hidden { opacity: 0.6; } .customize-video-playlist-control .block-item .block-header, .customize-block-repeater-control .block-item .block-header { display: flex; padding: 0 0 0 12px; border: 1px solid #ddd; color: #556068; background: #fff; cursor: move; font-size: 12px; margin: 0 0 10px; border-radius: 3px; align-items: center; position: relative; } .customize-video-playlist-control .block-item .block-header { margin-bottom: 0px; } .customize-video-playlist-control .block-item { margin-bottom: 10px; } .customize-video-playlist-control .block-item .block-content { border: 1px solid #ddd; border-top: none; background: #fff; padding: 2px 6px; } #customize-control-social_icons .digital-newspaper-repeater-control-inner .digital-newspaper-repeater-item { display: flex; padding: 0 0 0 12px; border: 1px solid #ddd; color: #556068; background: #fff; cursor: move; font-size: 12px; line-height: 38px; margin: 0 0 10px; border-radius: 3px; } #customize-control-opinons_items .digital-newspaper-repeater-control-inner .digital-newspaper-repeater-item { display: flex; padding: 0 0 0 12px; border: 1px solid #ddd; color: #556068; background: #fff; cursor: move; font-size: 12px; line-height: 38px; margin: 0 0 10px; border-radius: 3px; } #customize-control-social_icons .digital-newspaper-repeater-control-inner .digital-newspaper-repeater-item { display: flex; padding: 0 0 0 12px; border: 1px solid #ddd; color: #556068; background: #fff; cursor: move; font-size: 12px; line-height: 38px; margin: 0 0 10px; border-radius: 3px; } .block-item .block-header .control-title, #customize-control-social_icons .digital-newspaper-repeater-control-inner .digital-newspaper-repeater-item .item-heading, #customize-control-opinons_items .digital-newspaper-repeater-control-inner .digital-newspaper-repeater-item .item-heading { flex: 1; display: block; text-transform: capitalize; font-size: 12px; } .block-item .block-header .display-icon, .block-item .block-header .setting-icon, #customize-control-social_icons .digital-newspaper-repeater-control-inner .digital-newspaper-repeater-item .display-icon, #customize-control-social_icons .digital-newspaper-repeater-control-inner .digital-newspaper-repeater-item .settings-icon, #customize-control-opinons_items .digital-newspaper-repeater-control-inner .digital-newspaper-repeater-item .display-icon, #customize-control-opinons_items .digital-newspaper-repeater-control-inner .digital-newspaper-repeater-item .settings-icon { cursor: pointer; float: right; position: relative; font-size: 16px; padding: 9px; line-height: 20px; border-left: 1px solid #ddd; } #customize-control-opinons_items .digital-newspaper-repeater-control-inner .digital-newspaper-repeater-item .item-heading-wrap { padding: 0px; } #customize-control-opinons_items .digital-newspaper-repeater-control-inner .digital-newspaper-repeater-item .item-heading { width: 150px; } .block-item .block-header .remove-icon { display: none; position: absolute; right: -10px; border: 1px dashed red; border-radius: 70%; width: 20px; height: 20px; top: -10px; color: red; text-decoration: none; } #customize-control-social_icons .digital-newspaper-repeater-control-inner .digital-newspaper-repeater-item .remove-item, #customize-control-opinons_items .digital-newspaper-repeater-control-inner .digital-newspaper-repeater-item .remove-item { text-decoration: none; order: 1; margin-top: -10px; margin-right: -12px; position: relative; display: none; width: 0; height: 0; } #customize-control-social_icons .digital-newspaper-repeater-control-inner .digital-newspaper-repeater-item .remove-item .dashicons.dashicons-minus, #customize-control-opinons_items .digital-newspaper-repeater-control-inner .digital-newspaper-repeater-item .remove-item .dashicons.dashicons-minus{ position: absolute; width: 20px; height: 20px; border: 1px dashed red; border-radius: 50px; left: -10px; z-index: 999; } .block-item .block-header:hover .remove-icon, #customize-control-social_icons .digital-newspaper-repeater-control-inner .digital-newspaper-repeater-item:hover .remove-item, #customize-control-opinons_items .digital-newspaper-repeater-control-inner .digital-newspaper-repeater-item:hover .remove-item{ display: block; text-decoration: none; } .block-item .block-header .remove-icon:hover, #customize-control-social_icons .digital-newspaper-repeater-control-inner .digital-newspaper-repeater-item .remove-item:hover, #customize-control-opinons_items .digital-newspaper-repeater-control-inner .digital-newspaper-repeater-item .remove-item:hover{ cursor: pointer; } #customize-control-social_icons .digital-newspaper-repeater-control-inner .digital-newspaper-repeater-item .item-heading-wrap, #customize-control-opinons_items .digital-newspaper-repeater-control-inner .digital-newspaper-repeater-item .item-heading-wrap { width: 100%; } .customize-video-playlist-control .block-item .components-popover__content, .customize-block-repeater-control .block-item .components-popover__content { width: 280px; border-radius: 5px; box-shadow: 1px 1px 1px 3px rgb(251 251 251); -webkit-box-shadow: 1px 1px 1px 3px rgb(251 251 251); -moz-box-shadow: 1px 1px 1px 3px rgb(251 251 251); border: none; } #customize-control-social_icons .digital-newspaper-repeater-control-inner .digital-newspaper-repeater-item.popupActive, #customize-control-social_icons .digital-newspaper-repeater-control-inner .digital-newspaper-repeater-item.popupActive { border-top: 6px solid #007CBA; } .customize-control-item-sortable .sort-list .sort-item { display: block; } /* Scrollbar styling */ .components-popover__content::-webkit-scrollbar{ width: 5px; } /* Track */ .components-popover__content::-webkit-scrollbar-track{ box-shadow: inset 0 0 5px #000000; border-radius: 10px; } /* Handle */ .components-popover__content::-webkit-scrollbar-thumb{ background: #545454; border-radius: 20px; } /* Handle on hover */ .components-popover__content::-webkit-scrollbar-thumb:hover{ background: #545454; } #customize-control-social_icons .digital-newspaper-repeater-control-inner .digital-newspaper-repeater-item .item-control-fields.isShow { position: fixed; visibility: visible; padding: 0; overflow: auto; background: #fff; padding: 20px; z-index: 999; box-shadow: 1px 1px 1px 3px rgb(251 251 251); -webkit-box-shadow: 1px 1px 1px 3px rgb(251 251 251); -moz-box-shadow: 1px 1px 1px 3px rgb(251 251 251); border-radius: 5px; display: block; top: auto; margin-top: 0; border: none; left: 330px; width: 195px; bottom: 20%; } #customize-control-opinons_items .digital-newspaper-repeater-control-inner .digital-newspaper-repeater-item .item-control-fields.isShow { position: fixed; visibility: visible; padding: 0; overflow: auto; background: #fff; padding: 20px; z-index: 999; max-height: 62%; box-shadow: 1px 1px 1px 3px rgb(251 251 251); -webkit-box-shadow: 1px 1px 1px 3px rgb(251 251 251); -moz-box-shadow: 1px 1px 1px 3px rgb(251 251 251); border-radius: 5px; display: block; top: 44%; margin-top: 0; border: none; overflow: hidden; overflow-y: scroll; height: 410px; left: 310px; z-index: 1; width: 500px; bottom: 0; } #customize-control-social_icons .digital-newspaper-repeater-control-inner .digital-newspaper-repeater-item .item-heading-wrap, #customize-control-opinons_items .digital-newspaper-repeater-control-inner .digital-newspaper-repeater-item .item-heading-wrap { padding: 0; } #customize-control-social_icons .digital-newspaper-repeater-control-inner .digital-newspaper-repeater-item .fontawesome-icon-picker h2.control--item-label, #customize-control-opinons_items .digital-newspaper-repeater-control-inner .digital-newspaper-repeater-item .fontawesome-icon-picker h2.control--item-label { display: none; } #customize-control-social_icons .digital-newspaper-repeater-control .fontawesome-icon-picker .icon-holder .icon-header i, #customize-control-opinons_items .digital-newspaper-repeater-control .fontawesome-icon-picker .icon-holder .icon-header i { font-size: 20px; } #customize-control-social_icons .digital-newspaper-repeater-control .fontawesome-icon-picker .icon-search-input, #customize-control-opinons_items .digital-newspaper-repeater-control .fontawesome-icon-picker .icon-search-input { position: fixed; height: 33px; margin-bottom: 65px; display: block; width: 590px; margin-top: -28px; } /** post query field **/ .block-content .post-query-field { margin-bottom: 6px; padding: 6px; } .block-content .post-query-field > div { float: right; } .block-content .post-query-field-label { display: inline-block; font-weight: 500; text-decoration: underline; font-size: 13px; text-transform: uppercase; color: #007cba; } .block-content .dashicons-edit { background-color: #f0f0f0; padding: 3px; border-radius: 50%; vertical-align: middle; border: 2px solid #007cba; color: #007cba; } .block-content .dashicons-edit:hover { cursor: pointer; } #customize-control-social_icons .digital-newspaper-repeater-control-inner .digital-newspaper-repeater-item .item-control-fields, #ccustomize-control-opinons_items .digital-newspaper-repeater-control-inner .digital-newspaper-repeater-item .item-control-fields.isShow { width: 213px; left: 22px; } #customize-control-social_icons .digital-newspaper-repeater-control .fontawesome-icon-picker .icon-header > div { flex: 50%; text-align: center; padding: 7px; vertical-align: middle; line-height: 1; } #customize-control-social_icons .digital-newspaper-repeater-control .fontawesome-icon-picker .icon-holder .icons-list { position: fixed; background-color: #fff; padding: 20px; height: 350px; overflow: auto; border: 1px solid #ffbcbc; margin-top: 8px; bottom: 0; left: 300px; width: 600px; margin-bottom: 5px; padding-top: 35px; } #customize-control-social_icons .digital-newspaper-repeater-control .fontawesome-icon-picker .icon-holder .icons-list i { cursor: pointer; font-size: 18px; padding: 12px 9px; } #customize-control-social_icons .digital-newspaper-repeater-control .fontawesome-icon-picker .icon-holder .icons-list i:hover { color: #d95f3d; } #customize-control-social_icons .digital-newspaper-repeater-control .fontawesome-icon-picker .icon-holder .icons-list i.selected { color: #d95f3d; font-size: 25px; } /********************************** Typography **********************************/ .digital-newspaper-typography-popover .inner-field.font-family input { box-shadow: none; } .customize-typography-control .control-title { font-size: 12px; font-weight: 500; letter-spacing: .1px; cursor: default; } .customize-typography-control .reset-button, .digital-newspaper-typography-popover .reset-button { font-size: 12px; box-shadow: none; } .digital-newspaper-typography-popover .typo-field .reset-button { position: absolute; right: 80px; } .customize-typography-control .components-button.is-secondary:hover:not(:disabled):hover, .digital-newspaper-typography-popover .components-button.is-secondary:hover:not(:disabled):hover { color: #02abff; box-shadow: none; } .customize-typography-control .reset-button .dashicon, .digital-newspaper-typography-popover .reset-button .dashicon { font-size: 12px; } .customize-typography-control .control-title .reset-button { float: right; } .customize-typography-control .components-dropdown { display: block; margin-top: 6px; } .customize-typography-control .typo-value-holder { position: relative; } .customize-typography-control .typo-summ-value:hover { border-color: #0e8ecc; } .customize-typography-control .typo-summ-value { display: flex; align-items: center; justify-content: space-between; cursor: pointer; background: #fff; border-radius: 3px; border: 1px solid #ddd; padding-right: 8px; transition: border-color .1s linear; } .customize-typography-control .summ-vals { padding: 6px 0 6px 8px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 100%; box-sizing: border-box; } .customize-typography-control .summ-vals .summ-val { display: inline-flex; align-items: center; } .customize-typography-control .summ-vals i { margin: 0 7px; font-style: normal; font-size: 70%; opacity: .5; line-height: normal; position: relative; margin-top: -5px; } .customize-typography-control .append-icon { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; font-size: 10px; font-weight: 700; letter-spacing: .1em; opacity: .7; color: inherit; } .digital-newspaper-typography-popover .components-popover__content { width: 16rem; border-radius: 5px; border: none; margin: 0 auto; } .digital-newspaper-typography-popover .components-popover__content .typo-fields .typo-field { position: relative; padding: 0 5px; margin: 5px 0; box-sizing: border-box; border-bottom: 1px dashed #eee; } .digital-newspaper-typography-popover .components-popover__content .typo-fields .typo-field .responsive-icons { cursor: pointer; position: absolute; right: 16px; } .digital-newspaper-typography-popover .components-popover__content .typo-fields .typo-field .responsive-icons .dashicons { font-size: 16px; } .digital-newspaper-typography-popover .components-popover__content .typo-fields .typo-field .responsive-icons .dashicons.isActive { color: #2271b1; } .digital-newspaper-typography-popover .components-popover__content .typo-fields .typo-field.field-group { display: flex; align-items: center; position: relative; height: 50px; padding: 0 20px; margin: 0; box-sizing: border-box; border-bottom: 1px dashed #eee; } .digital-newspaper-typography-popover .components-popover__content .typo-fields .typo-field.field-group .inner-field { flex: 1; display: flex; justify-content: space-evenly; } .digital-newspaper-typography-popover .inner-field.text-decoration, .digital-newspaper-typography-popover .inner-field.text-transform { margin: 0 2px; } .digital-newspaper-typography-popover .inner-field.text-decoration span, .digital-newspaper-typography-popover .inner-field.text-transform span { flex: 1; display: flex; justify-content: center; position: relative; margin: 0; padding: 5px 0; cursor: pointer; border: 1px solid #dfe1e4; } .digital-newspaper-typography-popover .inner-field.text-decoration span.isActive, .digital-newspaper-typography-popover .inner-field.text-transform span.isActive { color: #fff; background: #2271b1; border-color: #2271b1; } .digital-newspaper-typography-popover .inner-field.text-decoration span:first-child, .digital-newspaper-typography-popover .inner-field.text-transform span:first-child { border-radius: 3px 0 0 3px; border-right: none; } .digital-newspaper-typography-popover .inner-field.text-decoration span:last-child, .digital-newspaper-typography-popover .inner-field.text-transform span:last-child { border-radius: 0 3px 3px 0; border-left: none; } /******************* Icon Select Icon *******************/ .customize-control-icon-text .field-wrap { display: flex; } .customize-control-icon-text .field-wrap .components-dropdown { flex: 0 1 15%; } .customize-control-icon-text .field-wrap .components-base-control { flex: 0 1 82%; } .customize-control-icon-text .field-wrap .components-dropdown { text-align: center; padding: 0; border: 1px solid #8d8d8d; margin-right: 5px; border-radius: 7px; position: relative; height: 30px; vertical-align: middle; box-shadow: 3px 5px 7px -3px rgba(0,0,0,0.75); -webkit-box-shadow: 3px 5px 7px -3px rgba(0,0,0,0.75); -moz-box-shadow: 3px 5px 7px -3px rgba(0,0,0,0.75); } .customize-control-icon-text .field-wrap .components-dropdown i{ padding: 10px 17px; display: inline-block; } .customize-control-icon-text .field-wrap .components-dropdown:hover { cursor: pointer; box-shadow: 6px 7px 8px -3px rgba(0,0,0,0.75); -webkit-box-shadow: 6px 7px 8px -3px rgba(0,0,0,0.75); -moz-box-shadow: 6px 7px 8px -3px rgba(0,0,0,0.75); } .customize-control-icon-text .field-wrap .components-dropdown .components-popover__content { width: 230px; padding: 5px; } .customize-control-icon-text .field-wrap .components-dropdown .components-popover__content i{ padding: 10px; display: inline-block; } .customize-control-icon-text .field-wrap .components-dropdown .components-popover__content i:after { content: none; } .customize-control-icon-text .field-wrap .components-dropdown .components-popover__content i:hover{ cursor: pointer; color: #000; } .components-base-control .components-range-control__root { display: flex; align-items: center; } /*************************************** Responsive Multiselect Tab Styles *****************************************/ .customize-block-repeater-control .components-button-group, .customize-radio-tab-control .components-button-group, .customize-responsive-multiselect-tab-control .components-button-group, .components-popover__content span.radio-bubble.isActive { display: flex; } .customize-block-repeater-control .components-button-group > button, .customize-radio-tab-control .components-button-group > button, .customize-responsive-multiselect-tab-control .components-button-group > button, .components-popover__content span.radio-bubble { flex: 1 1 auto; display: flex; justify-content: center; border: none; box-shadow: inset 0px 0px 0px 1px rgb(0 0 0 / 10%); } .customize-responsive-multiselect-tab-control .components-button-group .components-button.is-primary, #customize-control-footer_section_width .components-button-group .components-button.is-primary, #customize-control-header_menu_hover_effect .components-button-group .components-button.is-primary, #customize-control-header_newsletter_content_display_type .components-button-group .components-button.is-primary, #customize-control-archive_pagination_type .components-button-group .components-button.is-primary { box-shadow: inset 0 0 0 1px #909090 } #customize-control-header_menu_background_color_group .components-popover.components-dropdown__content.components-custom-gradient-picker__color-picker-popover .components-popover__content{ left: 80px!important; position: absolute!important; top: -500px!important; width: 250px; } .customize-color-image-group-control .components-popover.components-dropdown__content.components-custom-gradient-picker__color-picker-popover .components-popover__content { width: 247px; top: auto; left: -30px; } .media-field-image__preview { display: block; width: 100%; overflow: hidden; height: 79px; margin-bottom: 20px; } .media-field-image__preview img { width: 100%; height: 100px; object-fit: contain; } .media-field .media-field-image__toggle { border: 1px solid #545454; } .layout-list { width: 180px; } .layout-list li{ padding: 5px 0; position: relative; font-weight: 500; } .layout-list li:hover{ cursor: pointer; color: #d95f3d; font-weight: 500; } .layout-list li:hover:after { content: 'add'; position: absolute; right: 0; background-color: #d95f3d; color: #fff; padding: 2px 5px; border-radius: 10px 0 0 10px; line-height: 1; font-weight: 500; } #customize-control-ticker_news_width_layout.customize-control-radio-image img, #customize-control-main_banner_width_layout.customize-control-radio-image img, #customize-control-full_width_blocks_width_layout.customize-control-radio-image img, #customize-control-leftc_rights_blocks_width_layout.customize-control-radio-image img, #lefts_rightc_blocks_width_layout-global.customize-control-radio-image img, #customize-control-bottom_full_width_blocks_width_layout.customize-control-radio-image img, #customize-control-single_page_width_layout.customize-control-radio-image img, #customize-control-error_page_width_layout.customize-control-radio-image img, #customize-control-search_page_width_layout.customize-control-radio-image img, #customize-control-archive_width_layout.customize-control-radio-image img, #customize-control-single_post_width_layout.customize-control-radio-image img, #customize-control-bottom_footer_width_layout.customize-control-radio-image img, #customize-control-opinions_section_width_layout.customize-control-radio-image img { border-width: 5px; } #customize-control-ticker_news_width_layout.customize-control-radio-image .buttonset label.ui-button, #customize-control-main_banner_width_layout.customize-control-radio-image .buttonset label.ui-button, #customize-control-full_width_blocks_width_layout.customize-control-radio-image .buttonset label.ui-button, #customize-control-leftc_rights_blocks_width_layout.customize-control-radio-image .buttonset label.ui-button, #lefts_rightc_blocks_width_layout-global.customize-control-radio-image .buttonset label.ui-button, #customize-control-bottom_full_width_blocks_width_layout.customize-control-radio-image .buttonset label.ui-button, #customize-control-single_page_width_layout.customize-control-radio-image .buttonset label.ui-button, #customize-control-error_page_width_layout.customize-control-radio-image .buttonset label.ui-button, #customize-control-search_page_width_layout.customize-control-radio-image .buttonset label.ui-button, #customize-control-archive_width_layout.customize-control-radio-image .buttonset label.ui-button, #customize-control-single_post_width_layout.customize-control-radio-image .buttonset label.ui-button, #customize-control-bottom_footer_width_layout.customize-control-radio-image .buttonset label.ui-button, #customize-control-opinions_section_width_layout.customize-control-radio-image .buttonset label.ui-button { flex: 0 1 31%; } .customize-control-radio-image .buttonset label.ui-button { padding: 0; border: none; margin-bottom: 5px; } label.ui-button .ui-icon { position: absolute; visibility: hidden; } /** customizer layout **/ li#accordion-section-background_image:before { content: 'Core'; font-weight: 600; color: #50575e; font-size: 13px; line-height: 1.3; padding: 10px 20px; display: block; padding-left: 10px; } li#accordion-section-background_image { border-top: 1px solid #e6e6e6!important; margin-top: 20px; } .customize-control-preset-color-picker .customize-preset-color-picker-control .control-header-trigger, .customize-control-preset-gradient-picker .customize-preset-gradient-picker-control .control-header-trigger{ display: flex; align-items: center; } .customize-control-preset-color-picker .customize-preset-color-picker-control .control-header-trigger .customize-control-title, .customize-control-preset-gradient-picker .customize-preset-gradient-picker-control .control-header-trigger .customize-control-title, .customize-control-preset-color-picker .customize-preset-color-picker-control .control-header-trigger label, .customize-control-preset-gradient-picker .customize-preset-gradient-picker-control .control-header-trigger label { flex: 1; } .customize-color-picker-control .control-content-wrap { display: flex; align-items: center; } li#accordion-panel-digital_newspaper_global_panel:before { content: 'General Options'; font-weight: 600; color: #50575e; font-size: 13px; line-height: 1.3; padding: 10px 20px; display: block; padding-left: 10px; } li#accordion-panel-digital_newspaper_global_panel { margin-top: 20px; } li#accordion-section-digital_newspaper_main_banner_section:before { content: 'Front Page Options'; font-weight: 600; color: #50575e; font-size: 13px; line-height: 1.3; padding: 10px 20px; display: block; padding-left: 10px; } li#accordion-section-digital_newspaper_main_banner_section { border-top: 1px solid #e6e6e6!important; margin-top: 20px; } li#accordion-panel-digital_newspaper_blog_post_archive_panel:before { content: 'Page Options'; font-weight: 600; color: #50575e; font-size: 13px; line-height: 1.3; padding: 10px 20px; display: block; padding-left: 10px; } li#accordion-panel-digital_newspaper_blog_post_archive_panel { border-top: 1px solid #e6e6e6!important; margin-top: 20px; } li#accordion-section-digital_newspaper_footer_section:before { content: 'Footer Options'; font-weight: 600; color: #50575e; font-size: 13px; line-height: 1.3; padding: 10px 20px; display: block; padding-left: 10px; } li#accordion-section-digital_newspaper_footer_section { border-top: 1px solid #e6e6e6!important; margin-top: 20px; } li#accordion-section-digital_newspaper_top_header_section:before { content: 'Header Options'; font-weight: 600; color: #50575e; font-size: 13px; line-height: 1.3; padding: 10px 20px; display: block; padding-left: 10px; } li#accordion-section-digital_newspaper_top_header_section { border-top: 1px solid #e6e6e6!important; margin-top: 20px; } .customize-preset-color-picker-control .component-color-indicator, .customize-preset-gradient-picker-control .component-color-indicator{ width: 30px; height: 20px; border-radius: 10%; } #fs_customizer_support span{ flex: 1; } #customize-control-opinons_section_column .components-button-group, .block-content .components-button-group { width: 70%; padding: 5px 0; } #customize-control-opinons_section_column .components-button-group .components-button, .block-content .components-button-group .components-button { box-shadow: none; border: 1px solid #b3b3b3; } #customize-control-opinons_section_column .components-button-group .components-button:hover, .block-content .components-button-group .components-button-group .components-button:hover { border: 1px solid #006ba1; } .dashicons.isActive { color: #0994d9; } /** rtl css customizer **/ body.rtl #customize-controls .control-section>h3.accordion-section-title:after { right: auto; } body.rtl .components-custom-gradient-picker__gradient-bar { border-radius: 2px; margin-top: 12px; width: 100%; height: 48px; margin-bottom: 20px; padding-right: 10px; padding-left: 0; margin-right: -5px; } body.rtl .components-popover.components-dropdown__content.components-custom-gradient-picker__color-picker-popover { left: auto!important; right: -270px!important; } body.rtl .customize-control-preset-gradient-picker .components-popover__content .components-popover__content { position: absolute!important; margin: 0!important; right: 178px; bottom: 50vh; left: auto; } body.rtl .customize-responsive-box-control .responsive-icons, body.rtl .customize-responsive-range-control .responsive-icons { right: auto; left: 8px; } body.rtl .digital-newspaper-typography-popover .components-popover__content .typo-fields .typo-field .responsive-icons { right: auto; left: 19px; } body.rtl .digital-newspaper-typography-popover .typo-field .reset-button { right: auto; left: 80px; } body.rtl #customize-control-opinons_items .digital-newspaper-repeater-control-inner .digital-newspaper-repeater-item .item-control-fields.isShow { left: auto; right: 310px; } body.rtl #customize-control-opinons_items .digital-newspaper-repeater-control-inner .digital-newspaper-repeater-item, body.rtl .customize-video-playlist-control .block-item .block-header, body.rtl .customize-block-repeater-control .block-item .block-header { padding: 0 12px 0 0px; } body.rtl .customize-color-group-control .components-popover__content .components-popover__content, .customize-color-group-picker-control .components-popover__content .components-popover__content, body.rtl .customize-color-image-group-control .components-popover__content .components-popover__content, .customize-color-picker-control .components-popover__content .components-popover__content, body.rtl .customize-preset-color-picker-control .components-popover__content .components-popover__content { position: absolute!important; left: auto; bottom: 35vh; top: auto; right: 340px!important; } body.rtl .customize-color-image-group-control .components-popover.components-dropdown__content.components-custom-gradient-picker__color-picker-popover .components-popover__content { width: 247px; top: auto; left: auto; right: 425px!important; } body.rtl .post-query-field .components-popover.components-dropdown__content { left: auto!important; right: 80px; } body.rtl .layout-list li:hover:after { right: auto; left: 0px; border-radius: 0 10px 10px 0; } body #customize-control-opinons_items .digital-newspaper-repeater-control-inner .digital-newspaper-repeater-item .item-heading, body .digital-newspaper-repeater-control-inner .digital-newspaper-repeater-item .item-heading-wrap .display-icon, body .digital-newspaper-repeater-control-inner .digital-newspaper-repeater-item .item-heading-wrap .item-heading { cursor: all-scroll; } body .components-circular-option-picker { min-width: 200px; } .components-base-control.components-range-control { margin-top: 8px; } .customize-control span.control-limit-upgrade-notice { color: red; font-style: italic; font-size: 12px; } /* color dropdown fixed */ #customize-theme-controls .customize-pane-child.accordion-section-content { height: 100%; } /* .customize-control-color-group-picker .components-dropdown__content .components-popover__content { padding: 2px 0px; } */ .components-custom-gradient-picker .components-popover__content { width: 250px; } #sub-accordion-section-digital_newspaper_sidebar_options_section .customize-control-radio-image .buttonset label.ui-button { flex: 0 1 31%; padding: 0; margin-bottom: 10px; border: none; } #sub-accordion-section-digital_newspaper_sidebar_options_section .customize-control-radio-image .buttonset label.ui-button .ui-icon { position: absolute; visibility: hidden; } /************************* Radio Bubble Control *************************/ .customize-block-repeater-control span.radio-bubble.isActive, .customize-radio-bubble-control span.radio-bubble.isActive, .components-popover__content span.radio-bubble.isActive { background: #007cba; border-color: #007cba; color: #fff; } .customize-block-repeater-control span.radio-bubble, .customize-radio-bubble-control span.radio-bubble, .customize-radio-bubble-control div.radio-bubble, .components-popover__content span.radio-bubble { cursor: pointer; padding: 4px; border: 1px solid #fff; border-radius: 5px; font-size: 10px; margin: 4px; background: #fff; box-shadow: 1px 1px 3px 3px #e4dddd; } .radio-bubbles.column-2{ display: flex; padding: 0 5px; } .radio-bubbles.column-4 { padding: 0 5px; text-align: center; } .radio-bubbles.column-2 > span, .radio-bubbles.column-4 > span { flex: 1; text-align: center; flex-wrap: wrap; } .customize-block-repeater-control .column-4 span.radio-bubble, .customize-radio-bubble-control .column-4 span.radio-bubble, .components-popover__content .column-4 span.radio-bubble { width: 50px; display: inline-block; } span.radio-bubble:hover { background: #007cba; border-color: #007cba; color: #fff; } #customize-control-ticker_news_categories { margin-top: 0; background-color: #ffffff; display: block; margin-bottom: 0; } #customize-control-ticker_news_categories .customize-multiselect-control { padding:10px; } #customize-control-ticker_news_date_filter, #customize-control-main_banner_date_filter, .components-popover__content .components-dropdown__content .radio-bubbles.column-4, #sub-accordion-section-digital_newspaper_top_header_section #customize-control-top_header_ticker_news_date_filter { box-shadow: 0px 4px 4px 0 rgb(181 181 181 / 75%); -webkit-box-shadow: 0px 4px 4px 0 rgb(181 181 181 / 75%); -moz-box-shadow: 0px 4px 4px 0 rgb(181 181 181 / 75%); background-color: #fff; margin-top: 0; padding-bottom: 10px; margin-bottom: 25px; } #customize-control-main_banner_slider_categories .customize-multiselect-control, #customize-control-ticker_news_categories .customize-multiselect-control, #sub-accordion-section-digital_newspaper_top_header_section .customize-multiselect-control { padding: 10px; } #customize-control-main_banner_slider_categories, #customize-control-ticker_news_categories, .components-popover__content .components-dropdown__content .css-b62m3t-container, #sub-accordion-section-digital_newspaper_top_header_section #customize-control-top_header_ticker_news_categories { margin-top: 0; background-color: #fff; display: block; margin-bottom: 0; } #customize-control-ticker_news_post_filter, #customize-control-main_banner_post_filter, .components-popover__content .components-dropdown__content .radio-bubbles.column-2, #sub-accordion-section-digital_newspaper_top_header_section #customize-control-top_header_ticker_news_post_filter{ box-shadow: 0px -2px 5px 0px rgba(181,181,181,0.75); -webkit-box-shadow: 0px -2px 5px 0px rgba(181,181,181,0.75); -moz-box-shadow: 0px -2px 5px 0px rgba(181,181,181,0.75); background-color: #fff; margin-bottom: 0; padding: 10px 5px 5px 5px; box-sizing: border-box; margin-top: 15px; } .post-query-field .radio-bubbles.column-2 { padding: 5px 5px 8px; } .post-query-field .radio-bubbles.column-4 { padding: 8px 5px 10px; margin-bottom: 0 !important; } .post-query-field .radio-bubbles.column-2>span, .post-query-field .radio-bubbles.column-4>span { line-height: 2; color: #000; } /* Repeater popup */ .customize-control-block-repeater .components-popover { position: fixed!important; } .customize-control-block-repeater .components-dropdown__content .components-popover__content { padding: 10px; height: 370px; overflow-y: scroll; } .customize-control-block-repeater .components-popover.components-dropdown__content .components-popover__content .components-popover__content { height: 400px; overflow-y: scroll; } /** Typography **/ .digital-newspaper-typography-popover.components-dropdown__content .components-popover__content { padding: 8px 5px; height: 100%; } .customize-color-group-control .digital-newspaper-group-tab-panel { padding: 5px; } .customize-control-block-repeater .components-dropdown__content.digital-newspaper--popover-content .components-popover__content { height: auto; overflow: initial; } @media (min-width: 1600px ) { .customize-control-block-repeater .components-dropdown__content .components-popover__content { height: auto; overflow-y: initial; } } /** Box shadow controls **/ .customize-box-shadow-control { display: flex; flex-direction: column; } .customize-box-shadow-control .control-inner-content { display: flex; } .customize-box-shadow-control .control-inner-content .components-dropdown { display: block; clear: both; width: 170px; } .customize-box-shadow-control .control-inner-content .box-shadow-reflector { width: 100%; height: 75px; } .customize-box-shadow-control .control-title { display: flex; margin-bottom: 10px; } .customize-box-shadow-control .control-title .reset-button{ margin-left: 10px; box-shadow: none;; } .customize-box-shadow-control .component-color-indicator { width: 30px; height: 30px; } .customize-box-shadow-control .box-shadow-reflector { background-color: #FD4F1845; border-radius: 5px; } .customize-box-shadow-control .box-shadow-reflector:hover { cursor: pointer; } .box-shadow-value-holder:hover { border: 1px solid #0e8ecc; border-radius: 3px; } .box-shadow-value-holder .box-shadow-summ-value { position: relative; text-align: left; } .box-shadow-value-holder .box-shadow-summ-value { display: flex; align-items: center; justify-content: space-between; cursor: pointer; background: #fff; border-radius: 3px; border: 1px solid #ddd; padding-right: 8px; transition: #f0f0f0 .1s linear; } .box-shadow-value-holder .summ-vals { padding: 6px 0 6px 8px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 100%; box-sizing: border-box; } .box-shadow-summ-value .summ-vals .summ-val { display: inline-flex; align-items: center; } .box-shadow-summ-value .summ-vals i { margin: 0 7px; font-style: normal; font-size: 70%; opacity: .5; line-height: normal; position: relative; margin-top: -5px; } .box-shadow-summ-value .append-icon { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; font-size: 10px; font-weight: 700; letter-spacing: .1em; opacity: .7; color: inherit; } .customize-box-shadow-control .control-inner-content .components-dropdown:first-child { flex: 0 1 80%; text-align: center; align-items: center; border-radius: 3px; } .customize-box-shadow-control .control-inner-content .components-dropdown:last-child { flex: 0 1 20%; justify-content: flex-end; text-align: right; } .customize-box-shadow-control .components-dropdown:first-child .components-popover__content { width: 200px; text-align: left; } /** radio button **/ .components-base-control.components-toggle-control { margin-bottom: 6px; } .customize-control { margin-bottom: 8px; } /* Front sections ui */ #sub-accordion-section-digital_newspaper_full_width_section #customize-control-homepage_content_order .sort-item.full_width_section, #sub-accordion-section-digital_newspaper_leftc_rights_section #customize-control-homepage_content_order .sort-item.leftc_rights_section, #sub-accordion-section-digital_newspaper_lefts_rightc_section #customize-control-homepage_content_order .sort-item.lefts_rightc_section, #sub-accordion-section-digital_newspaper_bottom_full_width_section #customize-control-homepage_content_order .sort-item.bottom_full_width_section, #sub-accordion-section-digital_newspaper_video_playlist_section #customize-control-homepage_content_order .sort-item.video_playlist { border-top: 2px solid #0071a1; } .components-popover.components-dropdown__content { width: auto; } .customize-control-color-group .components-circular-option-picker .components-circular-option-picker__custom-clear-wrapper { margin-top: 0; } .customize-control-color-group .digital-newspaper-group-tab-panel, .customize-control-color-group .components-popover__content { width: auto; margin-left: 5px; } .customize-control-box-shadow .react-colorful__saturation { height: 110px!important; border-radius: 6px!important; } .customize-control-box-shadow .dashicons-image-rotate { font-size: 12px; width: auto; height: auto; } .customize-control-box-shadow .components-popover__content { width: auto; } .components-dropdown__content .components-popover__content { padding: 4px; } .color-group-inner-wrap .components-popover.components-dropdown__content { margin-left: 10px; } /** color dropdown design **/ .components-custom-gradient-picker__markers-container .components-popover.components-dropdown__content.components-color-palette__custom-color-dropdown-content { top: 120px!important; } .components-dropdown__content .components-popover__content { padding: 15px; } .components-popover__content .react-colorful__saturation { height: 125px!important; } .components-popover__content .icon-picker-modal { display: flex; flex-wrap: wrap; } .components-popover__content .icon-picker-modal i{ padding: 5px 7px; font-size: 14px; } .components-popover__content .components-color-picker { width: 190px; margin: 0 auto; } .components-popover__content .components-color-picker .react-colorful { width: 100%; margin: 0 auto; height: 150px; } .components-popover__content .components-surface.components-card { box-shadow: none; } .components-popover__content button.components-button.is-secondary.is-small { display: none; } .components-popover__content ul.typo-fields { width: 14rem; border-radius: 5px; border: none; margin: 0 auto; } .components-circular-option-picker__custom-clear-wrapper .components-button { display: none; } .components-color-picker .components-input-control__container { width: 100%; } .components-popover__content .icon-picker-modal { display: flex; flex-wrap: wrap; width: 190px; } .components-popover__content .icon-picker-modal i{ padding: 5px 7px; font-size: 14px; } .components-popover__content .block-content { width: 250px; } .components-popover__content .block-content > div { width: 90%; margin: 5px auto; } .components-popover__content > div.components-surface { box-shadow: none; } .components-popover__content .components-surface .components-card__body { padding: 10px; height: 300px; width: 240px; overflow-y: scroll; } .digital-newspaper-group-tab-panel .editor-post-featured-image { padding: 7px; } .digital-newspaper-group-tab-panel .more-settings { height: 150px; overflow-y: scroll; padding: 15px 5px; } .digital-newspaper-group-tab-panel .more-settings .components-button-group .components-button { font-size: 12px; } .components-popover__content .block-content { width: 250px; height: 300px; overflow-y: scroll; } /* ======================================================== 31.0 Loader Css ======================================================== */ :root { --nm-loading-color : #FD4F18; --nm-loader-icon-width: 20px; --nm-loader-icon-height: 20px; } .digital_newspaper_loading_box { text-align: center; } .box { display: inline-block; border: 1px solid #289dcc; border-radius: 3px; font-size: 3px; position: relative; margin-bottom: 0.25em; vertical-align: top; transition: .3s color,.3s border,.3s transform,.3s opacity; text-align: center; vertical-align: middle; width: 50px; height: 30px; top: 0; padding-bottom: 0; padding: 5px; vertical-align: middle; padding-top: 15px; margin: 5px; } .box.active { margin: 4px; border-width: 2px; border-color: #2271b1; } .digital_newspaper_loading_box button { display: inline-block; background: transparent; border: 2px solid #289dcc; color: white; padding: 0.5em 1em; border-radius: 5px; font-size: 20px; } .digital_newspaper_loading_box [class*=loader-] { display: inline-block; width: var(--nm-loader-icon-width); height: var(--nm-loader-icon-height); color: inherit; vertical-align: middle; pointer-events: none; } .digital_newspaper_loading_box .loader-1 { border: 0.2em dotted var(--nm-loading-color); border-radius: 50%; -webkit-animation: 1s loader-1 linear infinite; animation: 1s loader-1 linear infinite; } @-webkit-keyframes loader-1 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes loader-1 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .digital_newspaper_loading_box .loader-2 { border: 0.2em solid transparent; border-left-color: var(--nm-loading-color); border-right-color: var(--nm-loading-color); border-radius: 50%; -webkit-animation: 1s loader-2 linear infinite; animation: 1s loader-2 linear infinite; } @-webkit-keyframes loader-2 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes loader-2 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .digital_newspaper_loading_box .loader-3 { border: 0.2em solid var(--nm-loading-color); border-bottom-color: transparent; border-radius: 50%; -webkit-animation: 1s loader-3 linear infinite; animation: 1s loader-3 linear infinite; position: relative; } @-webkit-keyframes loader-3 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes loader-3 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .digital_newspaper_loading_box .loader-4 { border: 1px solid var(--nm-loading-color); border-radius: 50%; -webkit-animation: 1s loader-4 linear infinite; animation: 1s loader-4 linear infinite; position: relative; } .digital_newspaper_loading_box .loader-4:before { content: ""; display: block; width: 0; height: 0; position: absolute; top: -0.2em; left: 50%; border: 0.2em solid var(--nm-loading-color); border-radius: 50%; } @-webkit-keyframes loader-4 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes loader-4 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .digital_newspaper_loading_box .loader-5 { border: 0.2em solid transparent; border-top-color: var(--nm-loading-color); border-radius: 50%; -webkit-animation: 1s loader-5 linear infinite; animation: 1s loader-5 linear infinite; position: relative; } .digital_newspaper_loading_box .loader-5:before { content: ""; display: block; width: inherit; height: inherit; position: absolute; top: -0.2em; left: -0.2em; border: 0.2em solid var(--nm-loading-color); border-radius: 50%; opacity: 0.5; } @-webkit-keyframes loader-5 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes loader-5 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .digital_newspaper_loading_box .loader-6 { border: 0.2em solid var(--nm-loading-color); border-radius: 50%; -webkit-animation: loader-6 1s ease-out infinite; animation: loader-6 1s ease-out infinite; } @-webkit-keyframes loader-6 { 0% { transform: scale(0); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } } @keyframes loader-6 { 0% { transform: scale(0); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } } .digital_newspaper_loading_box .loader-7 { border: 0 solid transparent; border-radius: 50%; position: relative; } .digital_newspaper_loading_box .loader-7:before, .loader-7:after { content: ""; border: 0.2em solid var(--nm-loading-color); border-radius: 50%; width: inherit; height: inherit; position: absolute; top: 0; left: 0; -webkit-animation: loader-7 1s linear infinite; animation: loader-7 1s linear infinite; opacity: 0; } .digital_newspaper_loading_box .loader-7:before { -webkit-animation-delay: 1s; animation-delay: 1s; } .digital_newspaper_loading_box .loader-7:after { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } @-webkit-keyframes loader-7 { 0% { transform: scale(0); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } } @keyframes loader-7 { 0% { transform: scale(0); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } } .digital_newspaper_loading_box .loader-8 { position: relative; } .digital_newspaper_loading_box .loader-8:before, .loader-8:after { content: ""; width: inherit; height: inherit; border-radius: 50%; background-color: var(--nm-loading-color); opacity: 0.6; position: absolute; top: 0; left: 0; -webkit-animation: loader-8 2s infinite ease-in-out; animation: loader-8 2s infinite ease-in-out; } .digital_newspaper_loading_box .loader-8:after { -webkit-animation-delay: -1s; animation-delay: -1s; } @-webkit-keyframes loader-8 { 0%, 100% { transform: scale(0); } 50% { transform: scale(1); } } @keyframes loader-8 { 0%, 100% { transform: scale(0); } 50% { transform: scale(1); } } .digital_newspaper_loading_box .loader-9 { background-color: var(--nm-loading-color); border-radius: 50%; -webkit-animation: loader-9 1s infinite ease-in-out; animation: loader-9 1s infinite ease-in-out; } @-webkit-keyframes loader-9 { 0% { transform: scale(0); } 100% { transform: scale(1); opacity: 0; } } @keyframes loader-9 { 0% { transform: scale(0); } 100% { transform: scale(1); opacity: 0; } } .digital_newspaper_loading_box .loader-10 { position: relative; -webkit-animation: loader-10-1 2s infinite linear; animation: loader-10-1 2s infinite linear; } .digital_newspaper_loading_box .loader-10:before, .loader-10:after { content: ""; width: 0; height: 0; border: 0.5em solid var(--nm-loading-color); display: block; position: absolute; border-radius: 100%; -webkit-animation: loader-10-2 2s infinite ease-in-out; animation: loader-10-2 2s infinite ease-in-out; } .digital_newspaper_loading_box .loader-10:before { top: 0; left: 50%; } .digital_newspaper_loading_box .loader-10:after { bottom: 0; right: 50%; -webkit-animation-delay: -1s; animation-delay: -1s; } @-webkit-keyframes loader-10-1 { 100% { transform: rotate(360deg); } } @keyframes loader-10-1 { 100% { transform: rotate(360deg); } } @-webkit-keyframes loader-10-2 { 0%, 100% { transform: scale(0); } 50% { transform: scale(1); } } @keyframes loader-10-2 { 0%, 100% { transform: scale(0); } 50% { transform: scale(1); } } .digital_newspaper_loading_box .loader-11 { background-color: var(--nm-loading-color); -webkit-animation: loader-11 1.2s infinite ease-in-out; animation: loader-11 1.2s infinite ease-in-out; } @-webkit-keyframes loader-11 { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } @keyframes loader-11 { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } .digital_newspaper_loading_box .loader-12 { position: relative; } .digital_newspaper_loading_box .loader-12:before, .loader-12:after { content: ""; display: block; position: absolute; background-color: var(--nm-loading-color); left: 50%; right: 0; top: 0; bottom: 50%; box-shadow: -0.5em 0 0 var(--nm-loading-color); -webkit-animation: loader-12 1s linear infinite; animation: loader-12 1s linear infinite; } .digital_newspaper_loading_box .loader-12:after { top: 50%; bottom: 0; -webkit-animation-delay: 0.25s; animation-delay: 0.25s; } @-webkit-keyframes loader-12 { 0%, 100% { box-shadow: -0.5em 0 0 transparent; background-color: var(--nm-loading-color); } 50% { box-shadow: -0.5em 0 0 var(--nm-loading-color); background-color: transparent; } } @keyframes loader-12 { 0%, 100% { box-shadow: -0.5em 0 0 transparent; background-color: var(--nm-loading-color); } 50% { box-shadow: -0.5em 0 0 var(--nm-loading-color); background-color: transparent; } } .digital_newspaper_loading_box .loader-13:before, .digital_newspaper_loading_box .loader-13:after, .digital_newspaper_loading_box .loader-13 { border-radius: 50%; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation: loader-13 1.8s infinite ease-in-out; animation: loader-13 1.8s infinite ease-in-out; } .digital_newspaper_loading_box .loader-13 { color: var(--nm-loading-color); position: relative; transform: translateZ(0); -webkit-animation-delay: -0.16s; animation-delay: -0.16s; top: -1em; } .digital_newspaper_loading_box .loader-13:before { right: 100%; -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .digital_newspaper_loading_box .loader-13:after { left: 100%; } .digital_newspaper_loading_box .loader-13:before, .loader-13:after { content: ""; display: block; position: absolute; top: 0; width: inherit; height: inherit; } @-webkit-keyframes loader-13 { 0%, 80%, 100% { box-shadow: 0 1em 0 -1em; } 40% { box-shadow: 0 1em 0 -0.2em; } } @keyframes loader-13 { 0%, 80%, 100% { box-shadow: 0 1em 0 -1em; } 40% { box-shadow: 0 1em 0 -0.2em; } } .digital_newspaper_loading_box .loader-14 { border-radius: 50%; box-shadow: 0 1em 0 -0.2em var(--nm-loading-color); position: relative; -webkit-animation: loader-14 0.8s ease-in-out alternate infinite; animation: loader-14 0.8s ease-in-out alternate infinite; -webkit-animation-delay: 0.32s; animation-delay: 0.32s; top: -1em; } .digital_newspaper_loading_box .loader-14:after, .loader-14:before { content: ""; position: absolute; width: inherit; height: inherit; border-radius: inherit; box-shadow: inherit; -webkit-animation: inherit; animation: inherit; } .digital_newspaper_loading_box .loader-14:before { left: -1em; -webkit-animation-delay: 0.48s; animation-delay: 0.48s; } .digital_newspaper_loading_box .loader-14:after { right: -1em; -webkit-animation-delay: 0.16s; animation-delay: 0.16s; } @-webkit-keyframes loader-14 { 0% { box-shadow: 0 2em 0 -0.2em var(--nm-loading-color); } 100% { box-shadow: 0 1em 0 -0.2em var(--nm-loading-color); } } @keyframes loader-14 { 0% { box-shadow: 0 2em 0 -0.2em var(--nm-loading-color); } 100% { box-shadow: 0 1em 0 -0.2em var(--nm-loading-color); } } .digital_newspaper_loading_box .loader-15 { background: var(--nm-loading-color); position: relative; -webkit-animation: loader-15 1s ease-in-out infinite; animation: loader-15 1s ease-in-out infinite; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; width: 0.25em; height: 0.5em; margin: 0 0.5em; } .digital_newspaper_loading_box .loader-15:after, .loader-15:before { content: ""; position: absolute; width: inherit; height: inherit; background: inherit; -webkit-animation: inherit; animation: inherit; } .digital_newspaper_loading_box .loader-15:before { right: 0.5em; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .digital_newspaper_loading_box .loader-15:after { left: 0.5em; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } @-webkit-keyframes loader-15 { 0%, 100% { box-shadow: 0 0 0 var(--nm-loading-color), 0 0 0 var(--nm-loading-color); } 50% { box-shadow: 0 -0.25em 0 var(--nm-loading-color), 0 0.25em 0 var(--nm-loading-color); } } @keyframes loader-15 { 0%, 100% { box-shadow: 0 0 0 var(--nm-loading-color), 0 0 0 var(--nm-loading-color); } 50% { box-shadow: 0 -0.25em 0 var(--nm-loading-color), 0 0.25em 0 var(--nm-loading-color); } } .digital_newspaper_loading_box .loader-16 { transform: rotateZ(45deg); perspective: 1000px; border-radius: 50%; } .digital_newspaper_loading_box .loader-16:before, .digital_newspaper_loading_box .loader-16:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: inherit; height: inherit; border-radius: 50%; -webkit-animation: 1s spin linear infinite; animation: 1s spin linear infinite; } .digital_newspaper_loading_box .loader-16:before { transform: rotateX(70deg); } .digital_newspaper_loading_box .loader-16:after { transform: rotateY(70deg); -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } @-webkit-keyframes rotate { 0% { transform: translate(-50%, -50%) rotateZ(0deg); } 100% { transform: translate(-50%, -50%) rotateZ(360deg); } } @keyframes rotate { 0% { transform: translate(-50%, -50%) rotateZ(0deg); } 100% { transform: translate(-50%, -50%) rotateZ(360deg); } } @-webkit-keyframes rotateccw { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(-360deg); } } @keyframes rotateccw { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(-360deg); } } @-webkit-keyframes spin { 0%, 100% { box-shadow: 0.2em 0px 0 0px var(--nm-loading-color); } 12% { box-shadow: 0.2em 0.2em 0 0 var(--nm-loading-color); } 25% { box-shadow: 0 0.2em 0 0px var(--nm-loading-color); } 37% { box-shadow: -0.2em 0.2em 0 0 var(--nm-loading-color); } 50% { box-shadow: -0.2em 0 0 0 var(--nm-loading-color); } 62% { box-shadow: -0.2em -0.2em 0 0 var(--nm-loading-color); } 75% { box-shadow: 0px -0.2em 0 0 var(--nm-loading-color); } 87% { box-shadow: 0.2em -0.2em 0 0 var(--nm-loading-color); } } @keyframes spin { 0%, 100% { box-shadow: 0.2em 0px 0 0px var(--nm-loading-color); } 12% { box-shadow: 0.2em 0.2em 0 0 var(--nm-loading-color); } 25% { box-shadow: 0 0.2em 0 0px var(--nm-loading-color); } 37% { box-shadow: -0.2em 0.2em 0 0 var(--nm-loading-color); } 50% { box-shadow: -0.2em 0 0 0 var(--nm-loading-color); } 62% { box-shadow: -0.2em -0.2em 0 0 var(--nm-loading-color); } 75% { box-shadow: 0px -0.2em 0 0 var(--nm-loading-color); } 87% { box-shadow: 0.2em -0.2em 0 0 var(--nm-loading-color); } } .digital_newspaper_loading_box .loader-17 { position: relative; background-color: var(--nm-loading-color); border-radius: 50%; } .digital_newspaper_loading_box .loader-17:after,.digital_newspaper_loading_box .loader-17:before { content: ""; position: absolute; width: 0.25em; height: 0.25em; border-radius: 50%; opacity: 0.8; } .digital_newspaper_loading_box .loader-17:after { left: -0.5em; top: -0.25em; background-color: var(--nm-loading-color); transform-origin: 0.75em 1em; -webkit-animation: loader-17 1s linear infinite; animation: loader-17 1s linear infinite; opacity: 0.6; } .digital_newspaper_loading_box .loader-17:before { left: -1.25em; top: -0.75em; background-color: var(--nm-loading-color); transform-origin: 1.5em 1em; -webkit-animation: loader-17 2s linear infinite; animation: loader-17 2s linear infinite; } @-webkit-keyframes loader-17 { 0% { transform: rotateZ(0deg) translate3d(0, 0, 0); } 100% { transform: rotateZ(360deg) translate3d(0, 0, 0); } } @keyframes loader-17 { 0% { transform: rotateZ(0deg) translate3d(0, 0, 0); } 100% { transform: rotateZ(360deg) translate3d(0, 0, 0); } } .digital_newspaper_loading_box .loader-18 { position: relative; } .digital_newspaper_loading_box .loader-18:before,.digital_newspaper_loading_box .loader-18:after { content: ""; display: block; position: absolute; border-radius: 50%; border: 0.1em solid transparent; border-bottom-color: var(--nm-loading-color); top: 0; left: 0; -webkit-animation: 1s loader-18 linear infinite; animation: 1s loader-18 linear infinite; } .digital_newspaper_loading_box .loader-18:before { width: 1em; height: 1em; } .digital_newspaper_loading_box .loader-18:after { width: 0.8em; height: 0.8em; top: 0.1em; left: 0.1em; animation-direction: reverse; } @-webkit-keyframes loader-18 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes loader-18 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .digital_newspaper_loading_box .loader-19 { border-top: 0.2em solid var(--nm-loading-color); border-right: 0.2em solid transparent; -webkit-animation: loader-19 1s linear infinite; animation: loader-19 1s linear infinite; border-radius: 100%; position: relative; } @-webkit-keyframes loader-19 { to { transform: rotate(360deg); } } @keyframes loader-19 { to { transform: rotate(360deg); } } .digital_newspaper_loading_box .loader-20 { background-color: transparent; box-shadow: inset 0px 0px 0px 0.1em var(--nm-loading-color); border-radius: 50%; position: relative; } .digital_newspaper_loading_box .loader-20:after,.digital_newspaper_loading_box .loader-20:before { position: absolute; content: ""; background-color: var(--nm-loading-color); top: 0.5em; left: 0.5em; height: 0.1em; transform-origin: left center; } .digital_newspaper_loading_box .loader-20:after { width: 0.4em; -webkit-animation: loader-20 2s linear infinite; animation: loader-20 2s linear infinite; } .digital_newspaper_loading_box .loader-20:before { width: 0.3em; -webkit-animation: loader-20 8s linear infinite; animation: loader-20 8s linear infinite; } @-webkit-keyframes loader-20 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes loader-20 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .digital_newspaper_loading_box .loader-21 { position: relative; } .digital_newspaper_loading_box .loader-21:before, .digital_newspaper_loading_box .loader-21:after { position: absolute; content: ""; } .digital_newspaper_loading_box .loader-21:before { width: 80%; height: 80%; left: 10%; bottom: 10%; border-radius: 100% 100% 100% 0; box-shadow: 0px 0px 0px 0.1em var(--nm-loading-color); -webkit-animation: loader-21 1s linear infinite; animation: loader-21 1s linear infinite; transform: rotate(-46deg); } .digital_newspaper_loading_box .loader-21:after { width: 1em; height: 0.3em; border-radius: 100%; left: 0; background-color: rgba(255, 255, 255, 0.2); bottom: -0.2em; z-index: -1; } @-webkit-keyframes loader-21 { 0% { top: 0; } 50% { top: -5px; } 100% { top: 0; } } @keyframes loader-21 { 0% { top: 0; } 50% { top: -5px; } 100% { top: 0; } } .digital_newspaper_loading_box .loader-22 { border: 0.1em var(--nm-loading-color) solid; border-radius: 100%; position: relative; overflow: hidden; z-index: 1; } .digital_newspaper_loading_box .loader-22:after, .digital_newspaper_loading_box .loader-22:before { position: absolute; content: ""; background-color: var(--nm-loading-color); } .digital_newspaper_loading_box .loader-22:after { width: 50%; height: 0.1em; left: 50%; top: 50%; transform-origin: left center; -webkit-animation: loader-22 2s linear infinite alternate; animation: loader-22 2s linear infinite alternate; } .digital_newspaper_loading_box .loader-22:before { width: 100%; height: 40%; left: 0; bottom: 0; } @-webkit-keyframes loader-22 { 0% { transform: rotate(-160deg); } 100% { transform: rotate(-20deg); } } @keyframes loader-22 { 0% { transform: rotate(-160deg); } 100% { transform: rotate(-20deg); } } .digital_newspaper_loading_box .loader-23 { height: 0.5em; border: 0.1em var(--nm-loading-color) solid; border-radius: 0.1em; position: relative; -webkit-animation: loader-23 5s linear infinite; animation: loader-23 5s linear infinite; } .digital_newspaper_loading_box .loader-23:after { width: 0.07em; height: 100%; background-color: var(--nm-loading-color); border-radius: 0px 0.5em 0.5em 0px; position: absolute; content: ""; top: 0; left: calc(100% + .1em); } @-webkit-keyframes loader-23 { 0% { box-shadow: inset 0px 0px 0px var(--nm-loading-color); } 100% { box-shadow: inset 1em 0px 0px var(--nm-loading-color); } } @keyframes loader-23 { 0% { box-shadow: inset 0px 0px 0px var(--nm-loading-color); } 100% { box-shadow: inset 1em 0px 0px var(--nm-loading-color); } } .digital_newspaper_loading_box .loader-24 { width: 0.8em; height: 1em; border: 0.1em var(--nm-loading-color) solid; border-radius: 0px 0px 0.2em 0.2em; position: relative; } .digital_newspaper_loading_box .loader-24:after, .digital_newspaper_loading_box .loader-24:before { position: absolute; content: ""; } .digital_newspaper_loading_box .loader-24:after { width: 0.2em; height: 50%; border: 0.1em var(--nm-loading-color) solid; border-left: none; border-radius: 0px 0.5em 0.5em 0px; left: calc(100% + .1em); top: 0.1em; } .digital_newspaper_loading_box .loader-24:before { width: 0.1em; height: 0.3em; background-color: var(--nm-loading-color); top: -0.3em; left: 0.05em; box-shadow: 0.2em 0px 0px 0px var(--nm-loading-color), 0.2em -0.2em 0px 0px var(--nm-loading-color), 0.4em 0px 0px 0px var(--nm-loading-color); -webkit-animation: loader-24 1s linear infinite alternate; animation: loader-24 1s linear infinite alternate; } @-webkit-keyframes loader-24 { 0% { height: 0px; } 100% { height: 6px; } } @keyframes loader-24 { 0% { height: 0px; } 100% { height: 6px; } } .digital_newspaper_loading_box .loader-25 { border: 0.1em var(--nm-loading-color) solid; position: relative; -webkit-animation: loader-25-1 5s linear infinite; animation: loader-25-1 5s linear infinite; } .digital_newspaper_loading_box .loader-25:after { width: 0.2em; height: 0.2em; position: absolute; content: ""; background-color: var(--nm-loading-color); bottom: calc(100% + .2em); left: -0.4em; -webkit-animation: loader-25-2 1s ease-in-out infinite; animation: loader-25-2 1s ease-in-out infinite; } @-webkit-keyframes loader-25-1 { 0% { box-shadow: inset 0 0 0 0 var(--nm-loading-color); } 100% { box-shadow: inset 0 -1em 0 0 var(--nm-loading-color); } } @keyframes loader-25-1 { 0% { box-shadow: inset 0 0 0 0 var(--nm-loading-color); } 100% { box-shadow: inset 0 -1em 0 0 var(--nm-loading-color); } } @-webkit-keyframes loader-25-2 { 25% { left: calc(100% + .2em); bottom: calc(100% + .2em); } 50% { left: calc(100% + .2em); bottom: -0.4em; } 75% { left: -0.4em; bottom: -0.4em; } 100% { left: -0.4em; bottom: calc(100% + .2em); } } @keyframes loader-25-2 { 25% { left: calc(100% + .2em); bottom: calc(100% + .2em); } 50% { left: calc(100% + .2em); bottom: -0.4em; } 75% { left: -0.4em; bottom: -0.4em; } 100% { left: -0.4em; bottom: calc(100% + .2em); } } .digital_newspaper_loading_box .loader-26 { width: 0.5em; height: 0.5em; background-color: var(--nm-loading-color); box-shadow: 1em 0px 0px var(--nm-loading-color); border-radius: 50%; -webkit-animation: loader-26 1s ease-in-out infinite alternate; animation: loader-26 1s ease-in-out infinite alternate; } @-webkit-keyframes loader-26 { 0% { opacity: 0.1; transform: rotate(0deg) scale(0.5); } 100% { opacity: 1; transform: rotate(360deg) scale(1.2); } } @keyframes loader-26 { 0% { opacity: 0.1; transform: rotate(0deg) scale(0.5); } 100% { opacity: 1; transform: rotate(360deg) scale(1.2); } } .digital_newspaper_loading_box .loader-27 { box-shadow: inset 0 0 0 0.1em var(--nm-loading-color); border-radius: 50%; position: relative; margin-left: 1.2em; } .digital_newspaper_loading_box .loader-27:before { content: ""; display: block; width: inherit; height: inherit; border-radius: 50%; position: absolute; right: 1.2em; top: 0; box-shadow: inset 0 0 0 0.1em var(--nm-loading-color); } .digital_newspaper_loading_box .loader-27:after { border: 0.2em solid var(--nm-loading-color); box-shadow: -1.2em 0 0 0 var(--nm-loading-color); width: 0; height: 0; border-radius: 50%; left: 50%; top: 25%; position: absolute; content: ""; -webkit-animation: loader-27 2s linear infinite alternate; animation: loader-27 2s linear infinite alternate; } @-webkit-keyframes loader-27 { 0% { left: 0; } 100% { left: 0.5em; } } @keyframes loader-27 { 0% { left: 0; } 100% { left: 0.5em; } } .digital_newspaper_loading_box .loader-28 { position: relative; -webkit-animation: 2s loader-28 infinite; animation: 2s loader-28 infinite; } .digital_newspaper_loading_box .loader-28:before { content: ""; display: block; width: inherit; height: inherit; border-radius: 80% 20%; border: 0.1em solid var(--nm-loading-color); transform: rotate(45deg); border-width: 0.1em 0.05em 0.05em 0.1em; } .digital_newspaper_loading_box .loader-28:after { content: ""; display: block; width: 0.2em; height: 0.2em; position: absolute; top: 0.4em; left: 50%; border-radius: 50%; box-shadow: -0.07em 0.07em 0 0.1em var(--nm-loading-color); -webkit-animation: 2s loader-28-2 linear infinite; animation: 2s loader-28-2 linear infinite; } @-webkit-keyframes loader-28 { 0%, 100% { transform: scaleY(1); } 10% { transform: scaleY(0); } 20% { transform: scaleY(1); } } @keyframes loader-28 { 0%, 100% { transform: scaleY(1); } 10% { transform: scaleY(0); } 20% { transform: scaleY(1); } } @-webkit-keyframes loader-28 { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-100%); } 50% { transform: transalteX(200%); } } @keyframes loader-28 { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-100%); } 50% { transform: transalteX(200%); } } .digital_newspaper_loading_box .loader-29 { border-radius: 50%; box-shadow: inset 0 0 0 0.1em var(--nm-loading-color), -0.5em -0.5em 0 -0.4em var(--nm-loading-color), 0 -0.7em 0 -0.4em var(--nm-loading-color), 0.5em -0.5em 0 -0.4em var(--nm-loading-color), -0.5em 0.5em 0 -0.4em var(--nm-loading-color), 0 0.7em 0 -0.4em var(--nm-loading-color), 0.5em 0.5em 0 -0.4em var(--nm-loading-color), -0.7em 0 0 -0.4em var(--nm-loading-color), 0.7em 0 0 -0.4em var(--nm-loading-color); -webkit-animation: 5s loader-29 linear infinite; animation: 5s loader-29 linear infinite; } @-webkit-keyframes loader-29 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes loader-29 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }