From 5685e2b1714c8d85e505e9eccee549723773aaab Mon Sep 17 00:00:00 2001 From: oldmud0 Date: Tue, 15 May 2018 21:20:00 -0500 Subject: Move files to webAO folder; GoldenLayout works! --- webAO/client.css | 308 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 308 insertions(+) create mode 100644 webAO/client.css (limited to 'webAO/client.css') diff --git a/webAO/client.css b/webAO/client.css new file mode 100644 index 0000000..87ff868 --- /dev/null +++ b/webAO/client.css @@ -0,0 +1,308 @@ +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; +} + +@keyframes error_blink { + 0% { color: red; } + 100% { color: white; } +} + +.error { + position: absolute; + width: 50vw; + height: 25vh; + top: 50%; + left: 50%; + margin-right: -50%; + transform: translate(-50%, -50%); + justify-content: center; + display: flex; + align-content: center; + margin: 0 auto; + align-items: center; + background: red; + color: white; + font-size: 4em; + animation: error_blink 0.5s linear infinite; +} + +#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; +} + +#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; +} + +#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%; */ + position: relative; + background-color: #ff0000; + /* resize: vertical; */ + width: auto; +} + +#client_bars { + position: relative; + /*! margin-bottom: 30px; */ + text-align: center; + /* display: flex; */ + /* flex-direction: row; */ + height: 20px; +} + +.slider { + padding-right: 4px; +} + +.client_defense { + /* position: absolute; */ + /* left: 30px; */ + width: 90px; + height: 20px; +} + +.client_prosecutor { + /* left: 130px; */ +} + +.client_button { + padding: 1px; +} + +.dark { + filter: brightness(50%); +} \ No newline at end of file -- cgit From 2f3c66512cae56aa50f705d4669ce64d69e7ad26 Mon Sep 17 00:00:00 2001 From: oldmud0 Date: Tue, 15 May 2018 22:21:16 -0500 Subject: Some more layout fixes --- webAO/client.css | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) (limited to 'webAO/client.css') diff --git a/webAO/client.css b/webAO/client.css index 87ff868..d5d8e75 100644 --- a/webAO/client.css +++ b/webAO/client.css @@ -213,6 +213,7 @@ img { border: 1px solid #555555; border-style: solid; box-sizing: border-box; + margin: auto; } #client_chatlog { @@ -269,10 +270,8 @@ img { width: 99%; /* margin-top: 20px; */ /*! height: 50%; */ - position: relative; - background-color: #ff0000; - /* resize: vertical; */ - width: auto; + background-color: #222; + color: white; } #client_bars { @@ -286,6 +285,10 @@ img { .slider { padding-right: 4px; + width: 80%; + align-self: center; + margin-left: auto; + margin-right: auto; } .client_defense { -- cgit From 9f7f070be3d0ded8e6a9e3eae8aa55e5c6958df8 Mon Sep 17 00:00:00 2001 From: oldmud0 Date: Tue, 22 May 2018 21:57:02 -0500 Subject: Enhance IC log and add timestamps --- webAO/client.css | 43 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) (limited to 'webAO/client.css') diff --git a/webAO/client.css b/webAO/client.css index d5d8e75..ac1aeca 100644 --- a/webAO/client.css +++ b/webAO/client.css @@ -247,6 +247,22 @@ img { /* max-width: 50em; */ /* min-height: 30em; */ text-align: start; + line-height: .85em; +} + +#client_log > p { + line-height: 1.2em; +} + +#iclog_name { + font-weight: bold; + padding-right: .35em; +} + +#iclog_time { + float: right; + padding-right: .5em; + color: #dbdbdb; } #client_ooclog { @@ -308,4 +324,31 @@ img { .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 -- cgit From 10f7bd449ed2fd4186dc2f15f6f6cbd8c5655e23 Mon Sep 17 00:00:00 2001 From: oldmud0 Date: Tue, 22 May 2018 22:49:10 -0500 Subject: Decrease spacing in IC log --- webAO/client.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'webAO/client.css') diff --git a/webAO/client.css b/webAO/client.css index ac1aeca..0dc1999 100644 --- a/webAO/client.css +++ b/webAO/client.css @@ -251,7 +251,7 @@ img { } #client_log > p { - line-height: 1.2em; + line-height: 1.1em; } #iclog_name { -- cgit From 41d166c7912048fe1bdbf186fb68b9fc617ae2f1 Mon Sep 17 00:00:00 2001 From: oldmud0 Date: Tue, 22 May 2018 23:29:03 -0500 Subject: Improve connection error dialog --- webAO/client.css | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) (limited to 'webAO/client.css') diff --git a/webAO/client.css b/webAO/client.css index 0dc1999..3b770e9 100644 --- a/webAO/client.css +++ b/webAO/client.css @@ -11,8 +11,9 @@ img { } @keyframes error_blink { - 0% { color: red; } - 100% { color: white; } + 0% { color: white; } + 50% { color: red; } + 100% { color: white; } } .error { @@ -23,15 +24,17 @@ img { left: 50%; margin-right: -50%; transform: translate(-50%, -50%); - justify-content: center; display: flex; - align-content: center; margin: 0 auto; + justify-content: center; + align-content: center; align-items: center; - background: red; + text-align: center; + background: #4e0e00; color: white; - font-size: 4em; - animation: error_blink 0.5s linear infinite; + font-size: x-large; + animation: error_blink 0.5s ease-in-out infinite; + z-index: 3; } #client_loading { -- cgit From 334ee0e9feebe15926e5ad9a967c24cdf5264cdb Mon Sep 17 00:00:00 2001 From: oldmud0 Date: Wed, 23 May 2018 00:09:13 -0500 Subject: New client build, with GoldenLayout included --- webAO/client.css | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'webAO/client.css') diff --git a/webAO/client.css b/webAO/client.css index 3b770e9..96a7f71 100644 --- a/webAO/client.css +++ b/webAO/client.css @@ -10,6 +10,12 @@ img { -ms-interpolation-mode: nearest-neighbor; } +#about-logo { + padding-top: 5px; + height: 30%; + image-rendering: auto; +} + @keyframes error_blink { 0% { color: white; } 50% { color: red; } -- cgit