diff options
Diffstat (limited to 'webAO/client.css')
| -rw-r--r-- | webAO/client.css | 363 |
1 files changed, 363 insertions, 0 deletions
diff --git a/webAO/client.css b/webAO/client.css new file mode 100644 index 0000000..96a7f71 --- /dev/null +++ b/webAO/client.css @@ -0,0 +1,363 @@ +body { + font-family: "Ace Attorney","メイリオ",Meiryo,Hiragino Kaku Gothic Pro,"ヒラギノ角ゴ Pro W3",Osaka,"MS Gothic","ＭＳ Ｐゴシック",Tahoma,Sans; +} + +img { + image-rendering: -moz-crisp-edges; + image-rendering: -o-crisp-edges; + image-rendering: -webkit-optimize-contrast; + image-rendering: crisp-edges; + -ms-interpolation-mode: nearest-neighbor; +} + +#about-logo { + padding-top: 5px; + height: 30%; + image-rendering: auto; +} + +@keyframes error_blink { + 0% { color: white; } + 50% { color: red; } + 100% { color: white; } +} + +.error { + position: absolute; + width: 50vw; + height: 25vh; + top: 50%; + left: 50%; + margin-right: -50%; + transform: translate(-50%, -50%); + display: flex; + margin: 0 auto; + justify-content: center; + align-content: center; + align-items: center; + text-align: center; + background: #4e0e00; + color: white; + font-size: x-large; + animation: error_blink 0.5s ease-in-out infinite; + z-index: 3; +} + +#client_loading { + position: absolute; + width: 90vw; + height: 30vh; + top: 50%; + left: 50%; + margin-right: -50%; + transform: translate(-50%, -50%); + justify-content: center; + display: flex; + align-items: center; + background: black; + color: lightgreen; + font-size: 3em; + z-index: 100; +} + +#client_gamewindow { + position: relative; + /*! top: 0; */ + /*! left: 0; */ + /*! width: 100%; */ + padding-bottom: 75%; +} + +#client_charselect { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow-y: scroll; + justify-content: center; + align-items: center; + vertical-align: middle; + margin: 0 auto; + background: rgba(70, 70, 70, 0.5); + z-index: 50; +} + +#client_chartable { + height: 360px; + width: 320px; + margin: 0 auto; + vertical-align: middle; + background: #eeeeee; +} + +.demothing { + height: 60px; + width: 60px; + margin: 3px; + border: 1px solid black; +} + +#client_wrapper { + /*! position: absolute; */ + /*! top: 0; */ + /*! left: 0; */ + background-color: #888888; + /*! height: 99%; */ + /*! width: 512px; */ + /*! margin: 0; */ + /*! padding: 0; */ + /*! float: left; */ + /*! resize: horizontal; */ + overflow: auto; + overflow-y:hidden; + /*! border: 1px solid; */ + min-width: 256px; + resize: horizontal; +} + +@media (max-width: 360px) { + #kek { + width: fit-content; + } +} + +#client_emo { + position: relative; + top: 10px; + width: 95%; +} + +#client_settings { + /*! position: absolute; */ + /*! top: 100%; */ + width: 100%; + /*! grid-column: 1; */ + /*! grid-row: 2; */ +} + +.area_btn { + width: 20%; +} + +#client_court { + position: absolute; + height: 100%; + width: 100%; + top: 0; + left: 0; +} + +#client_char { + position: absolute; + height: 100%; + width: 100%; + bottom: 0; + left: 0; +} + +#client_bench { + display: none; + position: absolute; + height: 100%; + width: 100%; + top: 0; + left: 0; +} + +#client_fg { + display: none; + position: absolute; + height: 100%; + width: 100%; + bottom: 0; + left: 0; +} + +#client_name { + display: none; + height: 7%; + border: 1px solid rgba(255,255,255,0.7); + background:rgba(73,0,254,0.5); + top: 63%; + border-radius: 3px; + position: absolute; +} + +#client_name p { + opacity: 2; + color: white; + position: relative; + margin-left: 4px; + margin-right: 4px; + margin-top: auto; +} + +#client_chat { + display: none; + width: 98%; /* fallback if needed */ + width: calc(100% - 4px); + margin: auto; + height: 30%; + border: 2px solid rgba(255,255,255,0.7); + background-color: rgba(0,0,0,0.5); + top: 70%; + border-radius: 4px; + position: absolute; + word-break: keep-all; + word-wrap: break-word; + overflow-wrap: break-word; + text-align: start; + overflow: hidden; + scroll-behavior: smooth; +} + +#client_chat p { + margin: 4px; + color: white; +} +.long { + width: 100%; + background-color: #dddddd; + border: 1px solid #555555; + border-style: solid; + box-sizing: border-box; + margin: auto; +} + +#client_chatlog { + /*! width: 244px; */ + /*! height: 100%; */ + /*! background: #dbdbdb url("misc/chat2.png") no-repeat; */ + /*! padding: 0; */ + /*! position: absolute; */ + top: 0; + right: 0; + /* grid-column: 2; */ + flex: 1; +} + +#client_log { + position: relative; + /* top: 3px; */ + /*! left: 10px; */ + height: 100%; + /*! width: 99%; */ + color: white; + word-break: keep-all; + word-wrap:break-word; + overflow-wrap: break-word; + overflow-y: scroll; + font-size: medium; + /* margin-bottom: 10px; */ + background-color: #242424; + border: black; + border-style: solid; + /* max-width: 50em; */ + /* min-height: 30em; */ + text-align: start; + line-height: .85em; +} + +#client_log > p { + line-height: 1.1em; +} + +#iclog_name { + font-weight: bold; + padding-right: .35em; +} + +#iclog_time { + float: right; + padding-right: .5em; + color: #dbdbdb; +} + +#client_ooclog { + /*! width: 99%; */ + /* margin-top: 25px; */ + /* height: 50%; */ + position: relative; + background-color: #242424; + color: white; + font-family: "Source Code Pro", "Consolas", monospace; + font-size: small; + overflow-wrap: break-word; + overflow-y: scroll; + text-rendering: optimizelegibility; + resize: none; + flex: 1 1 auto; + border: none; +} + +#client_musiclist { + width: 99%; + /* margin-top: 20px; */ + /*! height: 50%; */ + background-color: #222; + color: white; +} + +#client_bars { + position: relative; + /*! margin-bottom: 30px; */ + text-align: center; + /* display: flex; */ + /* flex-direction: row; */ + height: 20px; +} + +.slider { + padding-right: 4px; + width: 80%; + align-self: center; + margin-left: auto; + margin-right: auto; +} + +.client_defense { + /* position: absolute; */ + /* left: 30px; */ + width: 90px; + height: 20px; +} + +.client_prosecutor { + /* left: 130px; */ +} + +.client_button { + padding: 1px; +} + +.dark { + filter: brightness(50%); +} + +.hrtext { + overflow: hidden; + text-align: center; + font-size: small; +} + +.hrtext:before, +.hrtext:after { + background-color: #c6c6c6; + content: ""; + display: inline-block; + height: 1px; + position: relative; + vertical-align: middle; + width: 50%; +} + +.hrtext:before { + right: 0.5em; + margin-left: -50%; +} + +.hrtext:after { + left: 0.5em; + margin-right: -50%; +}
\ No newline at end of file |