From 724890a8c0d2c7d91f693b1e3f1577d80bfb862f Mon Sep 17 00:00:00 2001 From: sD Date: Mon, 27 Apr 2020 14:25:39 +0200 Subject: add a really bad persona 3 chatbox --- webAO/styles/chatbox/chatp3.css | 109 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 109 insertions(+) create mode 100644 webAO/styles/chatbox/chatp3.css (limited to 'webAO/styles/chatbox/chatp3.css') diff --git a/webAO/styles/chatbox/chatp3.css b/webAO/styles/chatbox/chatp3.css new file mode 100644 index 0000000..8e5468d --- /dev/null +++ b/webAO/styles/chatbox/chatp3.css @@ -0,0 +1,109 @@ +body { + font-family: sans-serif; +} + +.text_white { + color: #50545c; +} + +.text_blue { + color: #6bc6f7; +} + +.text_green { + color: #00f700; +} + +.text_red { + color: #f00; +} + +.text_orange { + color: #5c1d1b; +} + +.text_yellow { + color: #ff0; +} + +.text_pink { + color: #ffc0cb; +} + +.text_cyan { + color: #0ff; +} + +#client_chatcontainer { + display: block; + position: absolute; + bottom: 0; + left: 0; + height: 30%; + width: 100%; + border-color: #d9e2f9; + border-width: 0.15em; + border-radius: 50% / 10%; + background-color: #aaaeb4;} + +#client_name { + display: block; + position: absolute; + left: 1%; + top: 6%; + height: 15%; + color: #5c1d1b; + 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: 5%; + left: 2%; + width: 96%; + height: 70%; + margin: auto; + font-size: 2em; + word-break: keep-all; + overflow-wrap: break-word; + text-align: left; + overflow: hidden; + scroll-behavior: smooth; +} + +#client_chat p { + padding: 0; + margin: 0; + line-height: 97%; +} + +#client_chatwaiting { + display: block; + transform: rotate(90deg); + position: absolute; + right: 2%; + bottom: 0.5em; + line-height: 0.5; + color: #6a6c72; + animation: appear_down 0.5s linear; +} + +@keyframes appear_down { + 0% { + bottom: 5em; + opacity: 0; + } + + 100% { + bottom: 0.5em; + opacity: 1; + } +} \ No newline at end of file -- cgit From a55f3af79442f7d5cb0d0f138d4ceaca4dbed703 Mon Sep 17 00:00:00 2001 From: sD Date: Mon, 27 Apr 2020 14:28:19 +0200 Subject: the letter spacing just looks off on this box --- webAO/styles/chatbox/chatp3.css | 1 - 1 file changed, 1 deletion(-) (limited to 'webAO/styles/chatbox/chatp3.css') diff --git a/webAO/styles/chatbox/chatp3.css b/webAO/styles/chatbox/chatp3.css index 8e5468d..11888d7 100644 --- a/webAO/styles/chatbox/chatp3.css +++ b/webAO/styles/chatbox/chatp3.css @@ -58,7 +58,6 @@ body { #client_inner_name { text-justify: distribute; - letter-spacing: 0.075em; margin: 0; font-weight: bold; } -- cgit From 4b126c8cae7ef895d5fb274133560a83a61ced16 Mon Sep 17 00:00:00 2001 From: sD Date: Mon, 27 Apr 2020 19:18:25 +0200 Subject: use the id instead of p --- webAO/styles/chatbox/chatp3.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'webAO/styles/chatbox/chatp3.css') diff --git a/webAO/styles/chatbox/chatp3.css b/webAO/styles/chatbox/chatp3.css index 11888d7..efdcbcc 100644 --- a/webAO/styles/chatbox/chatp3.css +++ b/webAO/styles/chatbox/chatp3.css @@ -78,7 +78,7 @@ body { scroll-behavior: smooth; } -#client_chat p { +#client_inner_chat { padding: 0; margin: 0; line-height: 97%; -- cgit From 506b411cd149bb7d49e154dd2a167d508f1fb210 Mon Sep 17 00:00:00 2001 From: sD Date: Wed, 3 Jun 2020 20:43:28 +0200 Subject: persona3: make it suck less --- webAO/styles/chatbox/chatp3.css | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) (limited to 'webAO/styles/chatbox/chatp3.css') diff --git a/webAO/styles/chatbox/chatp3.css b/webAO/styles/chatbox/chatp3.css index efdcbcc..d8ec064 100644 --- a/webAO/styles/chatbox/chatp3.css +++ b/webAO/styles/chatbox/chatp3.css @@ -38,19 +38,21 @@ body { display: block; position: absolute; bottom: 0; - left: 0; + left: 1%; height: 30%; - width: 100%; - border-color: #d9e2f9; + width: 97%; + width: calc(98% - 0.3em); + border-color: #d9e2f9; + border-style: solid; border-width: 0.15em; - border-radius: 50% / 10%; + border-radius: 75% / 25%; background-color: #aaaeb4;} #client_name { display: block; position: absolute; - left: 1%; - top: 6%; + left: 3%; + top: 9%; height: 15%; color: #5c1d1b; z-index: 1; @@ -65,12 +67,12 @@ body { #client_chat { display: block; position: absolute; - bottom: 5%; + bottom: 6%; left: 2%; width: 96%; - height: 70%; - margin: auto; - font-size: 2em; + height: 68%; + margin: 0; + font-size: 1.5em; word-break: keep-all; overflow-wrap: break-word; text-align: left; @@ -79,7 +81,8 @@ body { } #client_inner_chat { - padding: 0; + padding-left: 3%; + padding-right: 8%; margin: 0; line-height: 97%; } -- cgit From 3fb9af3a20cf08894b7c5bbcb8aecd30140448bd Mon Sep 17 00:00:00 2001 From: sD Date: Wed, 10 Jun 2020 19:43:29 +0200 Subject: p3: don't change the font of the entire document --- webAO/styles/chatbox/chatp3.css | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) (limited to 'webAO/styles/chatbox/chatp3.css') diff --git a/webAO/styles/chatbox/chatp3.css b/webAO/styles/chatbox/chatp3.css index d8ec064..5945a67 100644 --- a/webAO/styles/chatbox/chatp3.css +++ b/webAO/styles/chatbox/chatp3.css @@ -1,7 +1,3 @@ -body { - font-family: sans-serif; -} - .text_white { color: #50545c; } @@ -46,7 +42,9 @@ body { border-style: solid; border-width: 0.15em; border-radius: 75% / 25%; - background-color: #aaaeb4;} + background-color: #aaaeb4; + font-family: sans-serif; +} #client_name { display: block; -- cgit