/** * All of the CSS for your public-facing functionality should be * included in this file. */ div.dsib-biblio-loading-book, span.dsib-biblio-loading-book { position: relative; border: 5px solid #8B4513; background-color: #FEEECB; font-family: sans-serif; box-sizing: content-box; } div.dsib-biblio-loading-book { margin: 0 50px; width: 100px; height: 60px; } span.dsib-biblio-loading-book { display: inline-block; top: inherit; margin-bottom: -7px; width: 32px; height: 20px; border: 3px solid #8B4513; } li span.dsib-biblio-loading-book, td span.dsib-biblio-loading-book, .dsib_FigSource span.dsib-biblio-loading-book { display: inline-block; top: inherit; margin-bottom: -4px; width: 24px; height: 15px; border: 2px solid #8B4513; } div.dsib-biblio-loading-page, span.dsib-biblio-loading-page { position: absolute; left: 50%; background-color: #FEEECB; -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); overflow: hidden; box-sizing: content-box; } div.dsib-biblio-loading-page { margin: 0 auto; width: 38px; height: 52px; padding: 4px 6px; font-size: 4px; line-height: 5px; } .dsib-biblio-loading-page.back { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } div.dsib-biblio-loading-page.anim { opacity: 0; -webkit-animation: dsib-biblio-flip 1.6s infinite linear; animation: dsib-biblio-flip 1.6s infinite linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } div.dsib-biblio-loading-page.anim:nth-child(3) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } div.dsib-biblio-loading-page.anim:nth-child(4) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } div.dsib-biblio-loading-page.anim:nth-child(5) { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } span.dsib-biblio-loading-page { width: 12px; height: 16px; padding: 2px; font-size: 8px; line-height: 4px; } li span.dsib-biblio-loading-page, td span.dsib-biblio-loading-page, .dsib_FigSource span.dsib-biblio-loading-page { width: 8px; height: 13px; padding: 1px 2px; font-size: 6px; line-height: 3px; } span.dsib-biblio-loading-page.anim { -webkit-animation: dsib-biblio-flipsmall 1.2s infinite linear; animation: dsib-biblio-flipsmall 1.2s infinite linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } span.dsib-biblio-loading-page.anim:nth-child(3) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } span.dsib-biblio-loading-page.anim:nth-child(4) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } li span.dsib-biblio-loading-page.anim, td span.dsib-biblio-loading-page.anim, .dsib_FigSource span.dsib-biblio-loading-page.anim { -webkit-animation: dsib-biblio-flipverysmall 1.2s infinite linear; animation: dsib-biblio-flipverysmall 1.2s infinite linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } li span.dsib-biblio-loading-page.anim:nth-child(3), td span.dsib-biblio-loading-page.anim:nth-child(3), .dsib_FigSource span.dsib-biblio-loading-page.anim:nth-child(3) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } li span.dsib-biblio-loading-page.anim:nth-child(4), td span.dsib-biblio-loading-page.anim:nth-child(4), .dsib_FigSource span.dsib-biblio-loading-page.anim:nth-child(4) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } span.dsib-biblio-unknown-citation { display: inline-block; position: absolute; color: red; font-size: 40px; font-weight: bold; font-family: Arial; top: inherit; margin-top: -19px; margin-left: -32px; text-shadow: 2px 2px white; } span.dsib-biblio-citation-error::before { content: '\1f4d6'; font-size: 22px; display: inline-block; position: absolute; margin-left: -25px; } span.dsib-biblio-citation-error { display: inline-block; max-width: 260px; font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 10px; font-weight: normal; line-height: 1; vertical-align: top; background: red; color: white; padding: 2px 5px 2px 28px; border-radius: 5px; } /* Bibliography and citations: match production font (Inter) */ #dsib-biblio-bibliographies, .dsib-biblio-citation { font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; } .tooltipster-blank { border-radius: 5px; border: 1px solid #ccc; background: #FFF; color: #444; -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.3); -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.3); box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.3); } .tooltipster-blank .tooltipster-content { font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.5; padding: 8px 10px; } @-webkit-keyframes dsib-biblio-flip { 0% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 15% { background: #fdde99; } 22.9% { -webkit-transform: perspective(200px) rotateY(-90deg); transform: perspective(200px) rotateY(-90deg); background: #fdde99; } 23% { -webkit-transform: perspective(200px) rotateY(-91deg); transform: perspective(200px) rotateY(-91deg); background: #FEEECB; } 79.9% { opacity: 1; } 80% { -webkit-transform: perspective(200px) rotateY(-180deg); transform: perspective(200px) rotateY(-180deg); opacity: 0; } 100% { -webkit-transform: perspective(200px) rotateY(-180deg); transform: perspective(200px) rotateY(-180deg); opacity: 0; } } @keyframes dsib-biblio-flip { 0% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 15% { background: #fdde99; } 22.9% { background: #fdde99; -webkit-transform: perspective(200px) rotateY(-90deg); transform: perspective(200px) rotateY(-90deg); } 23% { -webkit-transform: perspective(200px) rotateY(-91deg); transform: perspective(200px) rotateY(-91deg); background: #FEEECB; } 79.9% { opacity: 1; } 80% { -webkit-transform: perspective(200px) rotateY(-180deg); transform: perspective(200px) rotateY(-180deg); opacity: 0; } 100% { -webkit-transform: perspective(200px) rotateY(-180deg); transform: perspective(200px) rotateY(-180deg); opacity: 0; } } @-webkit-keyframes dsib-biblio-flipsmall { 0% { -webkit-transform: perspective(100px) rotateY(0deg); transform: perspective(100px) rotateY(0deg); } 20% { background: #fdde99; } 29.9% { background: #fdde99; -webkit-transform: perspective(60px) rotateY(-90deg); transform: perspective(60px) rotateY(-90deg); } 30% { -webkit-transform: perspective(60px) rotateY(-91deg); transform: perspective(60px) rotateY(-91deg); background: #FEEECB; } 80% { -webkit-transform: perspective(60px) rotateY(-180deg); transform: perspective(60px) rotateY(-180deg); } 100% { -webkit-transform: perspective(60px) rotateY(-180deg); transform: perspective(60px) rotateY(-180deg); } } @keyframes dsib-biblio-flipsmall { 0% { -webkit-transform: perspective(100px) rotateY(0deg); transform: perspective(100px) rotateY(0deg); } 20% { background: #fdde99; } 29.9% { background: #fdde99; -webkit-transform: perspective(60px) rotateY(-90deg); transform: perspective(60px) rotateY(-90deg); } 30% { -webkit-transform: perspective(60px) rotateY(-91deg); transform: perspective(60px) rotateY(-91deg); background: #FEEECB; } 80% { -webkit-transform: perspective(60px) rotateY(-180deg); transform: perspective(60px) rotateY(-180deg); } 100% { -webkit-transform: perspective(60px) rotateY(-180deg); transform: perspective(60px) rotateY(-180deg); } } @-webkit-keyframes dsib-biblio-flipverysmall { 0% { -webkit-transform: perspective(75px) rotateY(0deg); transform: perspective(75px) rotateY(0deg); } 20% { background: #fdde99; } 29.9% { -webkit-transform: perspective(40px) rotateY(-90deg); transform: perspective(40px) rotateY(-90deg); background: #fdde99; } 30% { -webkit-transform: perspective(40px) rotateY(-91deg); transform: perspective(40px) rotateY(-91deg); background: #FEEECB; } 80% { -webkit-transform: perspective(40px) rotateY(-180deg); transform: perspective(40px) rotateY(-180deg); } 100% { -webkit-transform: perspective(40px) rotateY(-180deg); transform: perspective(40px) rotateY(-180deg); } } @keyframes dsib-biblio-flipverysmall { 0% { -webkit-transform: perspective(75px) rotateY(0deg); transform: perspective(75px) rotateY(0deg); } 20% { background: #fdde99; } 29.9% { -webkit-transform: perspective(40px) rotateY(-90deg); transform: perspective(40px) rotateY(-90deg); background: #fdde99; } 30% { -webkit-transform: perspective(40px) rotateY(-91deg); transform: perspective(40px) rotateY(-91deg); background: #FEEECB; } 80% { -webkit-transform: perspective(40px) rotateY(-180deg); transform: perspective(40px) rotateY(-180deg); } 100% { -webkit-transform: perspective(40px) rotateY(-180deg); transform: perspective(40px) rotateY(-180deg); } }