/*!***************************************************************************************************************************************************************************************************************************************************!*\ !*** css ../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/style.scss ***! \***************************************************************************************************************************************************************************************************************************************************/ @charset "UTF-8"; /** * The following styles get applied both on the front of your site * and in the editor. * * Replace them with your own styles or remove the file completely. */ .homegrade-blocks-focused-schema figure { position: relative; } .homegrade-blocks-focused-schema figcaption .legend + .description:before { content: "—"; margin: 0 5px; display: inline-block; margin-bottom: 10px; } .homegrade-blocks-focused-schema figcaption ol { padding-top: 20px; counter-reset: myOrderedListItemsCounter; } .homegrade-blocks-focused-schema figcaption ol li { line-height: 1.3; list-style-type: none; position: relative; padding: 8px; padding-left: 50px; } .homegrade-blocks-focused-schema figcaption ol li:before { content: ""; left: 0; top: 0; transform: translateY(3px); position: absolute; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; background-color: red; color: white; border-radius: 50%; counter-increment: myOrderedListItemsCounter; content: counter(myOrderedListItemsCounter); margin-right: 0.5em; font-weight: 700; } .homegrade-blocks-focused-schema .homegrade-blocks-focus-point-bullet { position: absolute !important; border-radius: 50%; transition: scale 0.2s ease-in-out; z-index: 1; transform: translateX(-50%); } .homegrade-blocks-focused-schema .homegrade-blocks-focus-point-bullet__index { font-weight: 700; width: 20px; height: 20px; top: 0; left: 0; position: relative; color: white; display: flex; justify-content: center; align-items: center; padding: 16px; word-break: keep-all; } .homegrade-blocks-focused-schema .homegrade-blocks-focus-point-bullet:hover { scale: 1.2; filter: brightness(1.2) hue-rotate(10deg); z-index: 1; } .homegrade-blocks-focused-schema .homegrade-blocks-focus-point-bullet:hover + .homegrade-blocks-focus-point-bullet__tooltip-container { display: flex; } .homegrade-blocks-focused-schema .homegrade-blocks-focus-point-bullet__tooltip-container { z-index: 999; position: absolute; left: 44%; top: 25%; transform: translate(-50%, -100%); background-color: white; border-radius: 14px; padding: 10px; width: -moz-max-content; width: max-content; min-width: 70px; max-width: 220px; text-align: center; display: none; justify-content: center; align-items: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); --bullet-x-position: 50%; } .homegrade-blocks-focused-schema .homegrade-blocks-focus-point-bullet__tooltip-container:after { content: ""; display: block; background-color: white; position: absolute; top: 100%; left: var(--bullet-x-position); width: 10px; height: 10px; transform: translate(-50%, -50%) rotate(45deg); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04); z-index: 999; } .homegrade-blocks-focused-schema .homegrade-blocks-focus-point-bullet__tooltip-container:hover { display: flex; } .tooltip-title { font-weight: bold; margin-right: 6px; } /*!***************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/focus-point/style.scss ***! \***************************************************************************************************************************************************************************************************************************************************************/ /*# sourceMappingURL=style-index.css.map*/