diff --git a/index.html b/index.html index 804f7de..7be5c5f 100644 --- a/index.html +++ b/index.html @@ -1,509 +1,518 @@ + - Content Collaboration + Content Collaboration - + #loader_container button { + margin: 1rem auto auto auto; + } + + .pulse .first-orb { + -webkit-animation: pulse 1s infinite ease; + animation: pulse 1s infinite ease; + } + + .pulse .second-orb { + -webkit-animation: pulse 1s 0.1s infinite ease; + animation: pulse 1s 0.1s infinite ease; + } + + .pulse .third-orb { + -webkit-animation: pulse 1s 0.2s infinite ease; + animation: pulse 1s 0.2s infinite ease; + } + + @-webkit-keyframes pulse { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + + 60% { + -webkit-transform: scale(1.5); + transform: scale(1.5); + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } + } + + @keyframes pulse { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + + 60% { + -webkit-transform: scale(1.5); + transform: scale(1.5); + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } + } + + .spin svg { + -webkit-animation: spin 0.6s ease infinite; + animation: spin 0.6s ease infinite; + -webkit-transform-origin: center; + transform-origin: center; + } + + @-webkit-keyframes spin { + 0% { + -webkit-transform: rotate(0); + transform: rotate(0); + } + + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } + } + + @keyframes spin { + 0% { + -webkit-transform: rotate(0); + transform: rotate(0); + } + + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } + } + + @media only screen and (max-width: 640px) { + ::-webkit-scrollbar { + width: 0.2rem; + height: 0.2rem; + } + + ::-webkit-scrollbar-track { + background: transparent; + } + + ::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.3); + } + + .hide-on-mobile { + display: none; + } + + .article-body { + min-width: calc(100% - 2em) !important; + } + + #context_menu, + .floating-btn { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin: 2rem; + background: #222; + position: fixed; + -webkit-box-shadow: 0.2rem 0.4rem 0.6rem rgba(0, 0, 0, 0.24), -0.1rem -0.2rem 0.4rem rgba(0, 0, 0, 0.16); + box-shadow: 0.2rem 0.4rem 0.6rem rgba(0, 0, 0, 0.24), -0.1rem -0.2rem 0.4rem rgba(0, 0, 0, 0.16); + z-index: 3; + } + + #context_menu button, + .floating-btn button { + width: 100%; + } + + .floating-btn { + background: #282828; + bottom: 0; + right: 0; + border-radius: 5rem; + overflow: hidden; + } + + .floating-btn button { + padding: 1rem; + } + + .floating-btn button .icon { + margin-right: 0; + } + + #context_menu { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + } + + #context_menu button:nth-of-type(1) svg { + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + } + + #article_container { + padding: 1.5rem 1.5rem 6rem 1.5rem; + } + + .navigation-arrows { + opacity: 0; + pointer-events: none; + } + + .popup-container .popup { + -ms-flex-item-align: end; + align-self: flex-end; + width: 100%; + border-radius: 0.5rem 0.5rem 0 0; + } + } + + @media only screen and (max-width: 1280px) { + .article-body { + min-width: 50%; + } + + .hide-on-medium { + display: none; + } + } + + + })(); + - - + - + - - + + - + - - - + + + + - + + \ No newline at end of file