/*共通CSS*/ html, body { /*transform: translate3d(0,0,0);*/ overflow: hidden; user-select: none; cursor: default; font-size: 13px; height: 100vh; background-color: var(--bg); color: var(--color); } body { border: thin solid gray; } .btn { margin: 5px; text-transform: none; } .markdown { display: none; } help { display: none; } .show-help { display: inline; } option { display: none; } #mainView { padding: 10px; overflow: scroll; height: auto; } #message { display: none; position: fixed; bottom: 0; left: 0; background-color: black; color: white; z-index: 9999; } #imagemodal, #videomodal { display: none; max-width: 100vw; max-height: 100vh; position: fixed; z-index: 9; } #videomodal, #tootmodal { background-color: var(--modal); } #imagemodal .modal-content { overflow: hidden; padding: 0; } #imagemodal .modal-footer { overflow-x: scroll; overflow-y: hidden; } #imagewrap { width: 100%; height: 100%; } .pointer { cursor: pointer; } .badge { min-width: 0 !important; margin-left: 5px !important; } .bbcode-pulse-loadings, .bbcode-pulse-loading, .fa-pulse { display: inline-block; animation-duration: 3s; animation-fill-mode: both; animation-iteration-count: infinite; animation-name: pulse; } @keyframes pulse { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .shake { display: inline-block; animation-duration: 1s; animation-fill-mode: both; animation-iteration-count: infinite; animation-name: shake; } code:before, .pre:before { content: "Code"; font-size: 1.8rem; line-height: 1em; font-family: monospace, monospace; color: #999; position: absolute; right: 0; top: 0; } code, pre { color: white; display: block; border-left: 5px solid; border-color: #079903; padding-left: 10px; margin-top: 5px; margin-bottom: 5px; margin-left: 5px; background-color: #000; padding: 1em 1em 1em; position: relative; border-top-left-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; } blockquote, .quote p { margin: 0; } blockquote, .quote { color: black; background-color: #ddd; padding: 1em 1em 1em; position: relative; border-top-left-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; } blockquote:before, .quote:before { content: "Quote"; font-size: 1.8rem; line-height: 1em; font-family: Open Sans, cursive; color: #999; position: absolute; right: 0; top: 0; } .twitter-tweet { color: black; background-color: #fff; padding: 1em 1em 1em; position: relative; border-top-left-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; border-left: 5px solid #0c7abf; } .twitter-tweet :before { content: "From Twitter"; font-size: 1.8rem; line-height: 1em; font-family: Open Sans; color: #999; position: absolute; right: 0; top: 0; } .pixiv-post { color: black; background-color: #fff; padding: 1em 1em 1em; position: relative; border-top-left-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; border-left: 5px solid #0096fa; } .pixiv-post :before { content: "From Pixiv"; font-size: 1.8rem; line-height: 1em; font-family: Open Sans; color: #999; position: absolute; right: 0; top: 0; } #drag { display: none; position: fixed; width: 100vw; height: 100vh; background-color: var(--bg); color: var(--color); z-index: 99999; justify-content: center; align-items: center; } #drag-content { font-size: 2rem; } .radio { font-family: "Baloo Bhai"; } #pip { z-index: 504; width: 418px; background-color: var(--subcolor); position: absolute; } .pip-bottom { bottom: 10px; } .pip-left { left: 10px; } .pip-top { top: 10px; } .pip-right { right: 10px; } #pip-content .material-icons { display: none; } .big-text { font-size: 1.2rem; } #releasenote { background-color: var(--modal); } #releasenote li { list-style-type: disc; } @media only screen and (min-width: 993px) { #toast-container { top: auto; right: auto; bottom: 5%; left: 4%; max-width: 86%; } } .show { animation: show 0.2s linear 0s; } @keyframes show { from { opacity: 0; } to { opacity: 1; } } .hide-anime { animation: hide 0.2s linear 0s; display: none; } @keyframes hide { from { opacity: 1; } to { opacity: 0; } } .collapsible-header, .tabs { background-color: var(--subcolor); } .modal-footer { background-color: var(--modalfooter) !important; } .font { font-size: 1.5rem; margin-bottom: 5px; } .font:hover { background-color: #999; } .release-do { border: solid 2px; border-color: var(--color); padding: 5px; } #pickers { display: flex; flex-wrap: wrap; } #menu { position: fixed; z-index: 9999; background-color: var(--box); width: 540px; top: calc(50% - 150px); left: calc(50% - 250px); padding: 5px; border: thin solid gray; border-radius: 5px; } #menu-wrapper { margin-left: -5px; display: flex; } #left-menu { width: 170px; } #left-menu div { padding-left: 5px; width: 100%; height: 50px; display: flex; align-items: center; cursor: pointer; } #left-menu div:hover { background-color: var(--beforehover); } #left-menu span { margin-left: 5px; } #left-menu div.active { background-color: var(--emphasized); } #right-menu { width: 380px; max-height: 375px; overflow-y: scroll; overflow-x: hidden; padding: 5px; } #tltype { display: flex; flex-wrap: wrap; } #tltype .type { display: flex; flex-wrap: wrap; align-items: center; width: 170px; height: 40px; cursor: pointer; } #tltype .type:hover { background-color: var(--beforehover); } #tltype .active { background-color: var(--emphasized); } #tltype i { font-size: 30px; } #tltype i.sub-icon { font-size: 20px; position: relative; color: var(--beforehover); left: -15px; } .drag-bar { cursor: move; text-align: center; width: calc(100% + 10px); border-radius: 5px; background-color: var(--bg); margin-left: -5px; margin-right: -5px; margin-top: -5px; font-size: 16px; padding: 4px; } #something-wrong { flex-direction: column; width: 100%; height: 100%; position: absolute; display: flex; justify-content: center; align-items: center; } #support-btm { position: fixed; bottom: 0; width: 100vw; background-color: var(--box); z-index: 9999; padding: 10px; display: grid; grid-template-columns: 3fr 1fr 1fr; grid-template-rows: 1fr 36px; grid-template-areas: "note middle right" "note close close"; } #support-btm-en, #support-btm-ja { grid-area: note; } #support-btm-middle { grid-area: middle; } #support-btm-right { grid-area: right; } #support-btm-close { grid-area: close; } /*スクロールバー*/ ::-webkit-scrollbar { width: 5px; height: 10px; background: rgba(0, 0, 0, 0.05); } ::-webkit-scrollbar-track { -webkit-border-radius: 5px; border-radius: 5px; } /* Handle */ ::-webkit-scrollbar-thumb { -webkit-border-radius: 5px; border-radius: 5px; background: #607d8b; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); }