Willkommen bei WordPress. Dies ist dein erster Beitrag. Bearbeite oder lösche ihn und beginne mit dem Schreiben!
Hallo Welt!
von raredesign | Dez 3, 2019 | Allgemein | 0 Kommentare
Cokiee Shell
Current Path : /var/www/web28/html/wp-content/plugins/fusion-builder/assets/css/shortcodes/ |
Current File : //var/www/web28/html/wp-content/plugins/fusion-builder/assets/css/shortcodes/image-before-after.css |
/* stylelint-disable length-zero-no-unit */ /* stylelint-enable length-zero-no-unit */ .fusion-image-before-after-wrapper { --awb-handle-color: var(--before_after_handle_color, #fff); --awb-handle-accent-color: #d3d3d3; --awb-handle-transparent-color: #d3d3d3; --awb-font-size: var(--before_after_font_size, inherit); --awb-accent-color: var(--before_after_accent_color, #fff); --awb-handle-bg: var(--before_after_handle_bg, transparent); --awb-accent-color-bg: rgba(255, 255, 255, 0.2); --awb-transition-time: var(--before_after_transition_time, 0.5s); --awb-bordersize: var(--before_after_border_size, 0); --awb-bordercolor: var(--before_after_border_color, currentColor); --awb-borderradius: var(--before_after_border_radius, 0); --awb-element-width: auto; --awb-element-max-width: none; --awb-margin-top: 0; --awb-margin-right: 0; --awb-margin-bottom: 0; --awb-margin-left: 0; margin: var(--awb-margin-top) var(--awb-margin-right) var(--awb-margin-bottom) var(--awb-margin-left); } .fusion-image-before-after-wrapper .fusion-image-before-after-element { width: var(--awb-element-width); max-width: var(--awb-element-max-width); } .fusion-image-before-after-wrapper.type-before-after { overflow: hidden; } .fusion-image-before-after-wrapper.type-before-after.hover-type-individual .fusion-image-before-after-overlay { pointer-events: none; } .fusion-image-before-after-wrapper.type-before-after.hover-type-individual .fusion-image-before-after-before, .fusion-image-before-after-wrapper.type-before-after.hover-type-individual .fusion-image-before-after-after { transition-duration: 0.5s; transition-property: filter; } .fusion-image-before-after-wrapper.type-before-after.hover-type-individual .fusion-image-before-after-before:hover { filter: brightness(50%); } .fusion-image-before-after-wrapper.type-before-after.hover-type-individual .fusion-image-before-after-before:hover ~ .fusion-image-before-after-overlay .fusion-image-before-after-before-label { opacity: 1; } .fusion-image-before-after-wrapper.type-before-after.hover-type-individual .fusion-image-before-after-after:hover { filter: brightness(50%); } .fusion-image-before-after-wrapper.type-before-after.hover-type-individual .fusion-image-before-after-after:hover ~ .fusion-image-before-after-overlay .fusion-image-before-after-after-label { opacity: 1; } .fusion-image-before-after-wrapper.fusion-image-before-after-vertical .fusion-image-before-after-after-label.before-after-label-out-image-up-down, .fusion-image-before-after-wrapper.fusion-image-before-after-vertical .fusion-image-before-after-before-label.before-after-label-out-image-up-down { text-align: center; } .fusion-image-before-after-wrapper.has-alignment { display: flex; } .fusion-image-before-after-wrapper.has-alignment .fusion-image-before-after { flex: 1; } .fusion-image-before-after-wrapper.has-alignment.align-center { justify-content: center; } .fusion-image-before-after-wrapper.has-alignment.align-right { justify-content: flex-end; } .fusion-image-before-after-wrapper.has-alignment.align-left { justify-content: flex-start; } .fusion-image-before-after-horizontal .fusion-image-before-after-handle { /* Handle Rectangle Horizontal */ /* Handle Rectangle Arrows Horizontal */ /* Handle Rectangle Arrows Diamond Horizontal */ /* Handle Rectangle Arrows Circle Horizontal */ } .fusion-image-before-after-horizontal .fusion-image-before-after-handle:before { content: " "; display: block; background: var(--awb-handle-color); position: absolute; z-index: 30; width: 3px; height: 9999px; left: 50%; margin-left: -1.5px; bottom: 50%; margin-bottom: 22px; box-shadow: 0 3px 0 var(--awb-handle-color), 0 0 12px rgba(51, 51, 51, 0.5); } .fusion-image-before-after-horizontal .fusion-image-before-after-handle:after { content: " "; display: block; background: var(--awb-handle-color); position: absolute; z-index: 30; width: 3px; height: 9999px; left: 50%; margin-left: -1.5px; top: 50%; margin-top: 22px; box-shadow: 0 -3px 0 var(--awb-handle-color), 0 0 12px rgba(51, 51, 51, 0.5); } .fusion-image-before-after-horizontal .fusion-image-before-after-handle.fusion-image-before-after-handle-rectangle { border-radius: 6px; width: 15px; height: 65px; } .fusion-image-before-after-horizontal .fusion-image-before-after-handle.fusion-image-before-after-handle-rectangle:before { margin-bottom: 36px; } .fusion-image-before-after-horizontal .fusion-image-before-after-handle.fusion-image-before-after-handle-rectangle:after { margin-top: 35px; } .fusion-image-before-after-horizontal .fusion-image-before-after-handle.fusion-image-before-after-handle-rectangle .fusion-image-before-after-left-arrow { margin: 0; transform: translate(-230%, -50%); } .fusion-image-before-after-horizontal .fusion-image-before-after-handle.fusion-image-before-after-handle-rectangle .fusion-image-before-after-right-arrow { margin: 0; transform: translate(230%, -50%); } .fusion-image-before-after-horizontal .fusion-image-before-after-handle.fusion-image-before-after-handle-arrows { border: transparent; box-shadow: none; } .fusion-image-before-after-horizontal .fusion-image-before-after-handle.fusion-image-before-after-handle-arrows:before { margin-bottom: 0; } .fusion-image-before-after-horizontal .fusion-image-before-after-handle.fusion-image-before-after-handle-arrows:after { margin-top: 0; } .fusion-image-before-after-horizontal .fusion-image-before-after-handle.fusion-image-before-after-handle-arrows .fusion-image-before-after-right-arrow { border-width: 9px; border-left-width: 9px; margin: 0; transform: translate(130%, -50%); } .fusion-image-before-after-horizontal .fusion-image-before-after-handle.fusion-image-before-after-handle-arrows .fusion-image-before-after-left-arrow { margin: 0; border-width: 9px; border-right-width: 9px; transform: translate(-130%, -50%); } .fusion-image-before-after-horizontal .fusion-image-before-after-handle.fusion-image-before-after-handle-diamond { border: transparent; box-shadow: none; } .fusion-image-before-after-horizontal .fusion-image-before-after-handle.fusion-image-before-after-handle-diamond:before { margin-bottom: 31px; } .fusion-image-before-after-horizontal .fusion-image-before-after-handle.fusion-image-before-after-handle-diamond:after { margin-top: 30px; margin-left: -1.5px; } .fusion-image-before-after-horizontal .fusion-image-before-after-handle.fusion-image-before-after-handle-diamond .fusion-image-before-after-left-arrow { margin-left: -12px; } .fusion-image-before-after-horizontal .fusion-image-before-after-handle.fusion-image-before-after-handle-diamond .fusion-image-before-after-left-arrow:before { content: ""; width: 38px; height: 38px; border: 3px solid #fff; border-color: var(--awb-handle-color); position: absolute; left: 50%; top: 50%; border-radius: 3px; transform: translate(-36%, -50%) rotate(-45deg); z-index: -1; } .fusion-image-before-after-horizontal .fusion-image-before-after-handle.fusion-image-before-after-handle-diamond .fusion-image-before-after-right-arrow { margin-right: -12px; } .fusion-image-before-after-horizontal .fusion-image-before-after-handle.fusion-image-before-after-handle-circle { background: var(--awb-handle-color); border-color: transparent; } .fusion-image-before-after-horizontal .fusion-image-before-after-handle.fusion-image-before-after-handle-circle:after, .fusion-image-before-after-horizontal .fusion-image-before-after-handle.fusion-image-before-after-handle-circle:before { background: transparent; box-shadow: none; } .fusion-image-before-after-horizontal .fusion-image-before-after-handle.fusion-image-before-after-handle-circle .fusion-image-before-after-left-arrow { border-right-color: var(--awb-handle-accent-color); } .fusion-image-before-after-horizontal .fusion-image-before-after-handle.fusion-image-before-after-handle-circle .fusion-image-before-after-left-arrow:before { content: ""; width: 42px; height: 42px; position: absolute; border: 10px solid #d3d3d3; left: 50%; top: 50%; transform: translate(-32%, -50%); border-radius: 100%; border-color: var(--awb-handle-transparent-color); } .fusion-image-before-after-horizontal .fusion-image-before-after-handle.fusion-image-before-after-handle-circle .fusion-image-before-after-right-arrow { border-left-color: var(--awb-handle-accent-color); } .fusion-image-before-after-horizontal .fusion-image-before-after-handle.fusion-image-before-after-handle-default .fusion-image-before-after-left-arrow { margin: 0; transform: translate(-130%, -50%); } .fusion-image-before-after-horizontal .fusion-image-before-after-handle.fusion-image-before-after-handle-default .fusion-image-before-after-right-arrow { margin: 0; transform: translate(130%, -50%); } .fusion-image-before-after-horizontal .fusion-image-before-after-before-label:before { top: 50%; left: 10px; transform: translateY(-50%); } .fusion-image-before-after-horizontal .fusion-image-before-after-after-label:before { top: 50%; right: 10px; transform: translateY(-50%); } .fusion-image-before-after-horizontal .fusion-image-before-after-overlay.before-after-overlay-image-up-down .fusion-image-before-after-before-label:before { top: 0; left: 0; margin-top: 0; transform: inherit; } .fusion-image-before-after-horizontal .fusion-image-before-after-overlay.before-after-overlay-image-up-down .fusion-image-before-after-after-label:before { top: auto; bottom: 0; margin-top: 0; right: 0; transform: inherit; } .fusion-image-before-after-vertical .fusion-image-before-after-handle { /* Handle Rectangle Vertical */ /* Handle Rectangle Arrows Vertical */ /* Handle Rectangle Arrows Diamond Vertical */ /* Handle Rectangle Arrows Circle Vertical */ } .fusion-image-before-after-vertical .fusion-image-before-after-handle:before { content: " "; display: block; background: var(--awb-handle-color); position: absolute; z-index: 30; width: 9999px; height: 3px; top: 50%; margin-top: -1.5px; left: 50%; margin-left: 22px; box-shadow: 3px 0 0 #fff, 0 0 12px rgba(51, 51, 51, 0.5); } .fusion-image-before-after-vertical .fusion-image-before-after-handle:after { content: " "; display: block; background: var(--awb-handle-color); position: absolute; z-index: 30; width: 9999px; height: 3px; top: 50%; margin-top: -1.5px; right: 50%; margin-right: 22px; box-shadow: -3px 0 0 #fff, 0 0 12px rgba(51, 51, 51, 0.5); } .fusion-image-before-after-vertical .fusion-image-before-after-handle.fusion-image-before-after-handle-rectangle { border-radius: 6px; width: 65px; height: 15px; margin-left: auto; margin-right: auto; left: 0; right: 0; margin-top: 0; transform: translateY(-50%); } .fusion-image-before-after-vertical .fusion-image-before-after-handle.fusion-image-before-after-handle-rectangle:before { margin-left: 35px; } .fusion-image-before-after-vertical .fusion-image-before-after-handle.fusion-image-before-after-handle-rectangle:after { margin-right: 35px; } .fusion-image-before-after-vertical .fusion-image-before-after-handle.fusion-image-before-after-handle-rectangle .fusion-image-before-after-down-arrow { margin: 0; transform: translate(-50%, 230%); } .fusion-image-before-after-vertical .fusion-image-before-after-handle.fusion-image-before-after-handle-rectangle .fusion-image-before-after-up-arrow { margin: 0; transform: translate(-50%, -230%); } .fusion-image-before-after-vertical .fusion-image-before-after-handle.fusion-image-before-after-handle-arrows { border: transparent; box-shadow: none; } .fusion-image-before-after-vertical .fusion-image-before-after-handle.fusion-image-before-after-handle-arrows:before { margin-left: 0; } .fusion-image-before-after-vertical .fusion-image-before-after-handle.fusion-image-before-after-handle-arrows:after { margin-right: 0; } .fusion-image-before-after-vertical .fusion-image-before-after-handle.fusion-image-before-after-handle-arrows .fusion-image-before-after-down-arrow { border-width: 9px; border-top-width: 9px; margin: 0; transform: translate(-50%, 130%); } .fusion-image-before-after-vertical .fusion-image-before-after-handle.fusion-image-before-after-handle-arrows .fusion-image-before-after-up-arrow { border-width: 9px; border-top-width: 9px; margin: 0; transform: translate(-50%, -130%); } .fusion-image-before-after-vertical .fusion-image-before-after-handle.fusion-image-before-after-handle-diamond { border: transparent; box-shadow: none; } .fusion-image-before-after-vertical .fusion-image-before-after-handle.fusion-image-before-after-handle-diamond:before { margin-left: 29px; } .fusion-image-before-after-vertical .fusion-image-before-after-handle.fusion-image-before-after-handle-diamond:after { margin-right: 29px; } .fusion-image-before-after-vertical .fusion-image-before-after-handle.fusion-image-before-after-handle-diamond .fusion-image-before-after-down-arrow { margin-bottom: -12px; } .fusion-image-before-after-vertical .fusion-image-before-after-handle.fusion-image-before-after-handle-diamond .fusion-image-before-after-down-arrow:before { content: ""; width: 38px; height: 38px; border: 3px solid var(--awb-handle-color); position: absolute; left: 50%; top: 50%; border-radius: 3px; transform: translate(-50%, -64%) rotate(-45deg); z-index: -1; } .fusion-image-before-after-vertical .fusion-image-before-after-handle.fusion-image-before-after-handle-diamond .fusion-image-before-after-up-arrow { margin-top: -12px; } .fusion-image-before-after-vertical .fusion-image-before-after-handle.fusion-image-before-after-handle-circle { background: var(--awb-handle-color); border-color: transparent; } .fusion-image-before-after-vertical .fusion-image-before-after-handle.fusion-image-before-after-handle-circle:after, .fusion-image-before-after-vertical .fusion-image-before-after-handle.fusion-image-before-after-handle-circle:before { background: transparent; box-shadow: none; } .fusion-image-before-after-vertical .fusion-image-before-after-handle.fusion-image-before-after-handle-circle .fusion-image-before-after-down-arrow { border-top-color: var(--awb-handle-accent-color); } .fusion-image-before-after-vertical .fusion-image-before-after-handle.fusion-image-before-after-handle-circle .fusion-image-before-after-down-arrow:before { content: ""; width: 42px; height: 42px; position: absolute; border: 10px solid var(--awb-handle-transparent-color); left: 50%; top: 50%; border-radius: 100%; transform: translate(-50%, -67%); } .fusion-image-before-after-vertical .fusion-image-before-after-handle.fusion-image-before-after-handle-circle .fusion-image-before-after-up-arrow { border-bottom-color: var(--awb-handle-accent-color); } .fusion-image-before-after-vertical .fusion-image-before-after-handle.fusion-image-before-after-handle-square .fusion-image-before-after-down-arrow { margin: 0; transform: translate(-50%, 130%); } .fusion-image-before-after-vertical .fusion-image-before-after-handle.fusion-image-before-after-handle-square .fusion-image-before-after-up-arrow { margin: 0; transform: translate(-50%, -130%); } .fusion-image-before-after-vertical .fusion-image-before-after-handle.fusion-image-before-after-handle-default .fusion-image-before-after-down-arrow { margin: 0; transform: translate(-50%, 130%); } .fusion-image-before-after-vertical .fusion-image-before-after-handle.fusion-image-before-after-handle-default .fusion-image-before-after-up-arrow { margin: 0; transform: translate(-50%, -130%); } .fusion-image-before-after-vertical .fusion-image-before-after-before-label:before { left: 50%; text-align: center; top: 10px; transform: translateX(-50%); } .fusion-image-before-after-vertical .fusion-image-before-after-after-label:before { left: 50%; text-align: center; bottom: 10px; transform: translateX(-50%); } .fusion-image-before-after-vertical .fusion-image-before-after-overlay.before-after-overlay-image-up-down .fusion-image-before-after-before-label:before { left: 0; transform: inherit; top: 0; } .fusion-image-before-after-vertical .fusion-image-before-after-overlay.before-after-overlay-image-up-down .fusion-image-before-after-after-label:before { left: auto; right: 0; transform: inherit; bottom: 0; } .fusion-image-before-after-before-label { position: absolute; top: 0; width: 100%; height: 100%; transition-duration: 0.5s; transition-property: opacity; opacity: 0; } .fusion-image-before-after-before-label:before { color: var(--awb-accent-color); letter-spacing: 0.1em; position: absolute; background: var(--awb-accent-color-bg); line-height: normal; padding: 2% 3.8%; border-radius: 2px; font-size: var(--awb-font-size); content: attr(data-content); } .fusion-image-before-after-after-label { position: absolute; top: 0; width: 100%; height: 100%; transition-duration: 0.5s; transition-property: opacity; opacity: 0; } .fusion-image-before-after-after-label:before { color: var(--awb-accent-color); letter-spacing: 0.1em; position: absolute; background: var(--awb-accent-color-bg); line-height: normal; padding: 2% 3.8%; border-radius: 2px; font-size: var(--awb-font-size); content: attr(data-content); } .fusion-image-before-after-after-label.before-after-label-out-image-up-down { text-align: right; } .fusion-image-before-after-overlay { position: absolute; top: 0; width: 100%; height: 100%; transition-duration: 0.5s; transition-property: background; background: transparent; z-index: 25; } .fusion-image-before-after-overlay:hover { background: rgba(0, 0, 0, 0.5); } .fusion-image-before-after-overlay:hover .fusion-image-before-after-after-label { opacity: 1; } .fusion-image-before-after-overlay:hover .fusion-image-before-after-before-label { opacity: 1; } .fusion-image-before-after-left-arrow { width: 0; height: 0; border: 6px inset transparent; position: absolute; top: 50%; margin-top: -6px; border-right: 6px solid var(--awb-handle-color); left: 50%; margin-left: -17px; } .fusion-image-before-after-left-arrow::before { background: var(--awb-handle-bg); } .fusion-image-before-after-right-arrow { width: 0; height: 0; border: 6px inset transparent; position: absolute; top: 50%; margin-top: -6px; border-left: 6px solid var(--awb-handle-color); right: 50%; margin-right: -17px; } .fusion-image-before-after-up-arrow { width: 0; height: 0; border: 6px inset transparent; position: absolute; left: 50%; margin-left: -6px; border-bottom: 6px solid var(--awb-handle-color); top: 50%; margin-top: -17px; } .fusion-image-before-after-down-arrow { width: 0; height: 0; border: 6px inset transparent; position: absolute; left: 50%; margin-left: -6px; border-top: 6px solid var(--awb-handle-color); bottom: 50%; margin-bottom: -17px; } .fusion-image-before-after-down-arrow::before { background: var(--awb-handle-bg); } .fusion-image-before-after-container { box-sizing: content-box; z-index: 0; overflow: hidden; position: relative; -webkit-user-select: none; user-select: none; } .fusion-image-before-after-container img { max-width: 100%; position: absolute; top: 0; width: 100%; display: block; } .fusion-image-before-after-container * { box-sizing: content-box; } .fusion-image-before-after-container.active .fusion-image-before-after-overlay { background: transparent; } .fusion-image-before-after-container.active .fusion-image-before-after-overlay .fusion-image-before-after-before-label { opacity: 0; } .fusion-image-before-after-container.active .fusion-image-before-after-overlay .fusion-image-before-after-after-label { opacity: 0; } .fusion-image-before-after-container.active:hover.fusion-image-before-after-overlay { background: transparent; } .fusion-image-before-after-container.active:hover.fusion-image-before-after-overlay .fusion-image-before-after-before-label { opacity: 0; } .fusion-image-before-after-container.active:hover.fusion-image-before-after-overlay .fusion-image-before-after-after-label { opacity: 0; } .fusion-image-before-after-before { z-index: 20; } .fusion-image-before-after-after { z-index: 10; } .fusion-image-before-after-handle { height: 38px; width: 38px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 3px solid var(--awb-handle-color); border-radius: 1000px; box-shadow: 0 0 12px rgba(51, 51, 51, 0.5); z-index: 40; background: var(--awb-handle-bg); cursor: pointer; /* Handle Square */ } .fusion-image-before-after-handle.fusion-image-before-after-handle-square { border-radius: 0; } .fusion-image-before-after-handle.fusion-image-before-after-handle-square .fusion-image-before-after-left-arrow { margin: 0; transform: translate(-130%, -50%); } .fusion-image-before-after-handle.fusion-image-before-after-handle-square .fusion-image-before-after-right-arrow { margin: 0; transform: translate(130%, -50%); } .fusion-image-before-after-wrapper:not(.fusion-image-switch).initialized { border: var(--awb-bordersize) solid var(--awb-bordercolor); border-radius: var(--awb-borderradius); } .fusion-image-switch { display: inline-block; position: relative; } .fusion-image-switch img { transition: var(--awb-transition-time) ease-in-out; border: var(--awb-bordersize) solid var(--awb-bordercolor); border-radius: var(--awb-borderradius); } .fusion-image-switch img:first-child { opacity: 1; } .fusion-image-switch img:last-child { opacity: 0; position: absolute; top: 0; left: 0; } .fusion-image-switch:hover img:first-child { opacity: 0; } .fusion-image-switch:hover img:last-child { opacity: 1; } /* Label Out Image */ .before-after-label-out-image-up-down { opacity: 1; position: relative; padding: 0; line-height: normal; visibility: hidden; } .before-after-label-out-image-up-down.fusion-image-before-after-before-label { margin-bottom: 0.5em; } .before-after-label-out-image-up-down.fusion-image-before-after-after-label { margin-top: 0.5em; } .before-after-label-out-image-up-down:before { position: static; padding: 0; margin: 0; letter-spacing: 2px; line-height: normal; } .before-after-label-out-image-up-down.visible { visibility: visible; height: auto !important; } /* RTL */ .rtl .fusion-image-before-after-horizontal .fusion-image-before-after-after-label:before { right: auto; left: 10px; } .rtl .fusion-image-before-after-horizontal .fusion-image-before-after-before-label:before { left: auto; right: 10px; } .rtl .fusion-image-before-after-after-label.before-after-label-out-image-up-down { text-align: left; } .rtl .fusion-image-before-after-wrapper.fusion-image-before-after-horizontal .fusion-image-before-after-overlay.before-after-overlay-image-up-down .fusion-image-before-after-before-label:before { left: auto; right: 0; } .rtl .fusion-image-before-after-wrapper.fusion-image-before-after-horizontal .fusion-image-before-after-overlay.before-after-overlay-image-up-down .fusion-image-before-after-after-label:before { left: 0; right: auto; } .rtl .fusion-image-before-after-wrapper.fusion-image-before-after-vertical .fusion-image-before-after-overlay.before-after-overlay-image-up-down .fusion-image-before-after-before-label:before { left: auto; right: 0; } .rtl .fusion-image-before-after-wrapper.fusion-image-before-after-vertical .fusion-image-before-after-overlay.before-after-overlay-image-up-down .fusion-image-before-after-after-label:before { left: 0; right: auto; }
Cokiee Shell Web 1.0, Coded By Razor
Neueste Kommentare