UNPKG

storie-component

Version:

A component for ReactJS to display stories

108 lines (107 loc) 2.25 kB
._spinnercontainer_p32o6_1{ display: flex; justify-content: center; width: 100%; height: 100%; background-color: gray; border-radius: 20px; } ._spinnercontainer_p32o6_1 ._spinnerloading_p32o6_9 { width: 60px; height: 100%; }._progressbar_g57o9_1{ width: 100%; height: 10px; border-radius: 5px; margin-bottom: 10px; padding: 0 3px; } ._progressbar_g57o9_1 svg { border-radius: 5px; } ._bgprogress_g57o9_11{ fill: #6767675c; box-shadow: 0 0 0 1px #6767675c; } ._stories_15h3q_1 { border-radius: 20px; box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 43%); position: relative; display: flex; flex-direction: column; } ._storiesaction_15h3q_8 { display: flex; position: absolute; height: inherit; width: inherit; } ._storiesactionbutton_15h3q_14 { width: 50%; height: 100%; cursor: pointer; z-index: 1; } ._countprogressstories_15h3q_20 { padding-top: 3px; display: flex; flex-direction: row; align-items: center; justify-content: center; position: absolute; width: 100%; } ._hiddenprogressstories_15h3q_29 { visibility: hidden; opacity: 0; transition: visibility 0s 0.2s, opacity 0.2s ease-in-out; } ._storiescontent_15h3q_34 { height: 100%; } ._storiescontent_15h3q_34 img { border-radius: 20px; width: 100%; height: 100%; } ._storiescontent_15h3q_34 video { border-radius: 20px; width: 100%; height: 100%; } ._storiescontent_15h3q_34 iframe { border-radius: 20px; width: 100%; height: 100%; } ._storiescontent_15h3q_34 ._jsx_15h3q_52 { border-radius: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ._storiescontent_15h3q_34:first-child { margin-top: 1000px; } ._mutedPosition_15h3q_68{ position: absolute; top: 25px; right: 15px; filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5)); z-index: 2; } @keyframes _fadeOutAnimation_15h3q_1 { 0% { opacity: 1; } 100% { opacity: 0; } }