diff options
| -rw-r--r-- | webAO/client.html | 1 | ||||
| -rw-r--r-- | webAO/styles/chatbox/chatboxes.js | 1 | ||||
| -rw-r--r-- | webAO/styles/chatbox/chatfuture.css | 126 |
3 files changed, 128 insertions, 0 deletions
diff --git a/webAO/client.html b/webAO/client.html index 55c491f..6bc266c 100644 --- a/webAO/client.html +++ b/webAO/client.html @@ -346,6 +346,7 @@ <select id="client_chatboxselect" name="client_chatboxselect" onchange="setChatbox(this.value)"> <option value="dynamic" selected>Use characters</option> <option value="legacy">old webAO</option> + <option value="chatfuture">Future theme</option> <option value="aa">AA</option> <option value="chatdd">DD / SoJ</option> <option value="dgs">DGS</option> diff --git a/webAO/styles/chatbox/chatboxes.js b/webAO/styles/chatbox/chatboxes.js index 880e6bb..5caa952 100644 --- a/webAO/styles/chatbox/chatboxes.js +++ b/webAO/styles/chatbox/chatboxes.js @@ -6,6 +6,7 @@ export default [ "drv3", "drae", "legacy", + "chatfuture", "chatp3", "p4", "chatplvsaa", diff --git a/webAO/styles/chatbox/chatfuture.css b/webAO/styles/chatbox/chatfuture.css new file mode 100644 index 0000000..3daf394 --- /dev/null +++ b/webAO/styles/chatbox/chatfuture.css @@ -0,0 +1,126 @@ +.text_white { + color: #fff; +} + +.text_blue { + color: #6bc6f7; +} + +.text_green { + color: #00f700; +} + +.text_red { + color: #f00; +} + +.text_orange { + color: #f77339; +} + +.text_yellow { + color: #ff0; +} + +.text_pink { + color: #ffc0cb; +} + +.text_cyan { + color: #0ff; +} + +@font-face { + font-family: 'ace_attorneyregular'; + src: url('ace-attorney.woff2') format('woff2'), + url('ace-attorney.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +#client_chatcontainer { + display: block; + position: absolute; + bottom: 0; + left: 0; + height: 40%; + width: 100%; + filter: none; + font-family: "Ace Attorney", "ace_attorneyregular", "MS PGothic", "MS UI Gothic", "MS Sans Serif", "Hiragino Maru Gothic Pro", "Mitra Mono", "Mukti Narrow", "Meera", "Khmer OS", "FreeSans", "Gargi", sans-serif; +} + +#client_name { + display: block; + position: absolute; + left: 0; + top: 0; + height: 15%; + min-width: 3.25em; + background: linear-gradient(to bottom, #1e6169, #0f2f32); + padding: 0 2%; + border-color: #217aff; + border-style: ridge groove groove ridge; + border-width: 0.2em; + border-radius: 0.2em; + z-index: 1; +} + +#client_inner_name { + text-justify: distribute; + letter-spacing: 0.075em; + margin: 0; + font-weight: bold; +} + +#client_chat { + display: block; + position: absolute; + bottom: 0; + left: 0; + width: 98%; + width: calc(100% - 0.27em); + height: 78%; + margin: auto; + border-color: #59f0fc; + border-style: ridge groove groove ridge; + border-width: 0.15em; + border-radius: 0.3em; + background: linear-gradient(to bottom, rgba(0,0,0,0.7),rgba(0,0,137,0.7)); + font-size: 2em; + word-break: keep-all; + overflow-wrap: break-word; + text-align: left; + overflow: hidden; + scroll-behavior: smooth; +} + +#client_chat p { + padding: 1% 3.13%; + margin: 1px; + line-height: 97%; + letter-spacing: 0.05em; + word-spacing: 0.3em; +} + +#client_chatwaiting { + display: block; + position: absolute; + right: 2%; + bottom: 15%; + line-height: 0.5; + animation: idling 0.4s linear infinite; +} + +@keyframes idling { + 0% { + right: 0; + } + + 50% { + right: 2%; + } + + 100% { + right: 0; + } +}
\ No newline at end of file |