diff options
| -rw-r--r-- | webAO/client.html | 14 | ||||
| -rw-r--r-- | webAO/styles/chatbox/chat999.css | 116 | ||||
| -rw-r--r-- | webAO/styles/chatbox/chatboxes.js | 14 | ||||
| -rw-r--r-- | webAO/styles/chatbox/n64zelda.css | 105 |
4 files changed, 237 insertions, 12 deletions
diff --git a/webAO/client.html b/webAO/client.html index c77d0fc..bf8fcdc 100644 --- a/webAO/client.html +++ b/webAO/client.html @@ -352,21 +352,23 @@ <label for="client_chatboxselect">Chatbox theme:</label> <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> - <option value="trilogy">Trilogy</option> <option value="chatplvsaa">PL vs AA</option> - <option value="halla">VA-11 HALL-A</option> - <option value="chatp3">Persona 3</option> - <option value="p4">Persona 4</option> + <option value="trilogy">Trilogy</option> + <option value="chatfuture">Future theme</option> + <option value="legacy">old webAO</option> <option value="dr1">DR 1</option> <option value="chatdr2">DR 2</option> <option value="drv3">DR 3</option> <option value="drae">DR: AE</option> + <option value="chatp3">Persona 3</option> + <option value="p4">Persona 4</option> + <option value="chat999">999</option> + <option value="halla">VA-11 HALL-A</option> <option value="yttd">YTTD</option> + <option value="n64zelda">N64 Zelda</option> </select> <!-- <br> diff --git a/webAO/styles/chatbox/chat999.css b/webAO/styles/chatbox/chat999.css new file mode 100644 index 0000000..f85adba --- /dev/null +++ b/webAO/styles/chatbox/chat999.css @@ -0,0 +1,116 @@ +.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; +} + +#client_chatcontainer { + display: block; + position: absolute; + bottom: 0; + left: 0; + height: 42%; + width: 100%; + text-shadow: -1px -1px 0 #525252, 1px -1px 0 #525252, -1px 1px 0 #525252, 1px 1px 0 #525252; +} + +#client_name { + display: block; + position: absolute; + right: 0; + top: 0; + height: 27%; + min-width: 3.25em; + background: rgba(0, 0, 0, 0.5); + padding: 0 2%; + border-color: #fff; + border-style: ridge; + border-width: 0.2em; + border-radius: 0.1em; + z-index: 1; +} + +#client_inner_name { + text-justify: distribute; + letter-spacing: 0.075em; + margin: 0; + line-height: 2; +} + +#client_chat { + display: block; + position: absolute; + bottom: 0; + left: 0; + width: 98%; + width: calc(100% - 0.27em); + height: 60%; + margin: auto; + border-color: #fff; + border-style: ridge; + border-width: 0.15em; + border-radius: 0.1em; + background-color: rgba(0, 0, 0, 0.5); + font-size: 2em; + word-break: keep-all; + overflow-wrap: break-word; + text-align: left; + overflow: hidden; + scroll-behavior: smooth; +} + +#client_inner_chat { + padding: 1% 3.13%; + margin: 1px; + line-height: 97%; + letter-spacing: 0.05em; + word-spacing: 0.3em; +} + +#client_chatwaiting { + display: none; + transform: rotate(90deg); + line-height: 0.5; + color: #28599a; + animation: idling 0.4s linear infinite; +} + +@keyframes idling { + 0% { + right: 0; + } + + 50% { + right: 2%; + } + + 100% { + right: 0; + } +}
\ No newline at end of file diff --git a/webAO/styles/chatbox/chatboxes.js b/webAO/styles/chatbox/chatboxes.js index 66df18f..d81e7fd 100644 --- a/webAO/styles/chatbox/chatboxes.js +++ b/webAO/styles/chatbox/chatboxes.js @@ -2,16 +2,18 @@ export default [ "aa", "chatdd", "dgs", + "chatplvsaa", + "trilogy", + "chatfuture", + "legacy", "dr1", "chatdr2", "drv3", "drae", - "legacy", - "chatfuture", - "halla", "chatp3", "p4", - "chatplvsaa", - "trilogy", - "yttd" + "chat999", + "halla", + "yttd", + "n64zelda" ];
\ No newline at end of file diff --git a/webAO/styles/chatbox/n64zelda.css b/webAO/styles/chatbox/n64zelda.css new file mode 100644 index 0000000..4c2cbbb --- /dev/null +++ b/webAO/styles/chatbox/n64zelda.css @@ -0,0 +1,105 @@ +.text_white { + color: #fff; +} + +.text_blue { + color: #505aff; +} + +.text_green { + color: #46ff50; +} + +.text_red { + color: #ff3c3c; +} + +.text_orange { + color: #ff7800; +} + +.text_yellow { + color: #ff0; +} + +.text_pink { + color: #ff96b4; +} + +.text_cyan { + color: #64b4ff; +} + +@font-face { + font-family: 'ChiaroWeb'; + src: url('https://github.com/ngarces/FE15-Text-Simulator/raw/master/FOT-ChiaroStd-B.otf') format('opentype'); + font-weight: normal; + font-style: normal; +} + +#client_chatcontainer { + display: block; + position: absolute; + bottom: 0; + left: 0; + height: 25%; + width: 100%; + filter: none; + font-family: "FOT-Chiaro Std", "ChiaroWeb", "Arial", sans-serif; +} + +#client_name { + display: none; +} + +#client_inner_name { + display: none; +} + +#client_chat { + display: block; + position: absolute; + bottom: 2%; + left: 10%; + width: 80%; + height: 100%; + margin: auto; + border-radius: 0.5em; + background: rgba(0,0,0,0.7); + font-size: 1.3em; + word-break: keep-all; + overflow-wrap: break-word; + text-align: center; + line-height: 120%; + scroll-behavior: smooth; +} + +#client_inner_chat { + padding: 1% 5%; + margin: 0; + text-shadow: 0.1em 0.05em 0.1em #000; + overflow: hidden; +} + +#client_chatwaiting { + display: block; + position: absolute; + transform: rotate(90deg); + left: 50%; + bottom: -5%; + line-height: 0.5; + color: #0c5cd4; + animation: idling 0.5s linear infinite alternate; +} + +@keyframes idling { + from { + color: #0c5cd4; + text-shadow: none; + } + + to { + color: #3282ff; + text-shadow: 0 0 0.2em #3282ff; + } +}
\ No newline at end of file |