UNPKG

@ubertheme/slider

Version:
98 lines (86 loc) 1.85 kB
.root { font-size: 0; height: 100%; width: 100%; } .root img { width: 100%; } :global .clickToPlay span { position: relative; height: 100%; width: 100%; display: block; } @media all and (min-width: 768px) { :global .clickToPlay span { max-height: 600px; } } @media all and (max-width: 479px) { :global div.clickToPlay span { max-height: 285px; } } @media all and (max-width: 767px) { :global .clickToPlay span { max-height: 350px; } } :global .clickToPlay span:after { background: url(./play.svg) no-repeat center center; content: ""; cursor: pointer; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; background-size: 72px; pointer-events: none; transition: background-size 235ms cubic-bezier(0.4, 0, 0.2, 1), opacity 235ms cubic-bezier(0.4, 0, 0.2, 1); } .root iframe { height: 100%; width: 100%; } .root :global .desc h3 { font-size: 26px; line-height: 100%; margin-bottom: 0; } /* Style for RickText Component*/ :global .descContent { font-size: 14px; line-height: 24px; margin-top: 15px; padding: 0; } :global .readmore { background-color: rgb(var(--base-active-color)); color: rgb(var(--base-white-color)); display: inline-block; font-size: 12px; font-weight: 600; height: 40px; line-height: 40px; margin-top: 42px; min-width: 120px; padding: 0; text-align: center; text-shadow: none; text-transform: uppercase; border-radius: 2px; } :global .readmore:active, :global .readmore:focus, :global .readmore:hover { background-color: rgba(var(--base-hover-color)); } @media all and (max-width: 767px) { .clickToPlay .desc { position: static; transform: none; } }