diff options
| author | sD <stoned@derpymail.org> | 2020-07-20 10:23:15 +0200 |
|---|---|---|
| committer | sD <stoned@derpymail.org> | 2020-07-20 10:23:15 +0200 |
| commit | 0b63ae06bba6ee6bc428055f684164cc475a1e8e (patch) | |
| tree | d1596818fc525bf6e12976a3e262f22e86910cda /webAO/styles/client.css | |
| parent | 35bc5820d194fdb964c40694078f7bc89b62af16 (diff) | |
| parent | e5f3a22ba242b0921c58290fed7147a9912dceac (diff) | |
Merge branch 'master' into objection_maker
Diffstat (limited to 'webAO/styles/client.css')
| -rw-r--r-- | webAO/styles/client.css | 503 |
1 files changed, 302 insertions, 201 deletions
diff --git a/webAO/styles/client.css b/webAO/styles/client.css index d56fe24..cecba80 100644 --- a/webAO/styles/client.css +++ b/webAO/styles/client.css @@ -1,17 +1,3 @@ -#about-logo { - padding-top: 5px; - height: 30%; - image-rendering: auto; -} - -.lm_content :link { - color: #4288f2; -} - -.lm_content :visited { - color: #a65bd4; -} - @keyframes error_blink { 0% { color: #fff; @@ -26,6 +12,41 @@ } } +.text_rainbow { + background-color: #fff; + background-image: repeating-linear-gradient(to right, + red 0% 8%, orange 8% 16%, yellow 16% 24%, green 24% 32%, blue 32% 40%, + red 40% 48%, orange 48% 56%, yellow 56% 64%, green 64% 72%, blue 72% 80%, + red 80% 88%, orange 88% 96%, yellow 96% 100%); + background-size: 40% 40%; + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + animation: rainbow 4s linear infinite; +} + +@keyframes rainbow_alt { + + 0%, + 100% { + background-position: 0 0; + } + + 50% { + background-position: 400% 0; + } +} + +@keyframes rainbow { + 0% { + background-position: 0 0; + } + + 100% { + background-position: 400% 0; + } +} + #client_error { position: absolute; display: flex; @@ -64,8 +85,39 @@ margin: 30px; } -#client_gamewindow { - width: 100%; +.demothing { + display: inline-block; + height: 60px; + width: 60px; + max-width: 60px; + max-height: 60px; + margin: 3px; + border: 1px solid #000; + vertical-align: top; +} + +.noini { + transform: rotate(180deg); +} + +#client_charselect { + display: none; + position: fixed; + top: 5vh; + left: 10vw; + width: 80vw; + max-height: 90vh; + overflow-y: scroll; + text-align: center; + margin: 0 auto; + background: #444; + z-index: 50; +} + +#client_icwrapper { + overflow-x: hidden; + overflow-y: auto; + height: 100%; } @keyframes shake { @@ -104,59 +156,15 @@ } } -#client_charselect { - display: none; - position: fixed; - top: 5vh; - left: 10vw; - width: 80vw; - max-height: 90vh; - overflow-y: scroll; - text-align: center; - margin: 0 auto; - background: #444; - z-index: 50; -} - -.demothing { - display: inline-block; - height: 60px; - width: 60px; - max-width: 60px; - max-height: 60px; - margin: 3px; - border: 1px solid #000; -} - -#client_icwrapper { - overflow-x: hidden; - overflow-y: auto; - height: 100%; -} - -@media (max-width: 360px) { - #kek { - width: fit-content; - } -} - -#client_emo { +#client_background { position: relative; - top: 10px; - width: 95%; -} - -.emote_button { - display: inline-block; - width: 40px; - height: 40px; - margin: 2px; - cursor: pointer; - box-shadow: 0 0 0 2px #000 inset; - border-radius: 4px; + padding-bottom: 75%; + background-color: transparent; + top: 0; + left: 0; } -#client_settings { +#client_gamewindow { width: 100%; } @@ -166,21 +174,34 @@ width: 100%; top: 0; left: 0; + object-fit: cover; } -#client_char { +#client_pair_char { position: absolute; - height: auto; + height: 100%; width: 100%; bottom: 0; - left: 0; + object-fit: cover; + object-position: 50% 0; } -#client_pair_char { +#client_char { position: absolute; height: 100%; width: 100%; bottom: 0; + left: 0; + object-fit: cover; + object-position: 50% 0; +} + +.def_bench, .hld_bench, .jur_bench, .sea_bench { + left: 0; +} + +.pro_bench, .hlp_bench, .wit_bench, .jud_bench { + right: 0; } #client_bench { @@ -188,7 +209,6 @@ height: auto; width: 100%; bottom: 0; - left: 0; } #client_fg { @@ -211,6 +231,71 @@ transition-property: height, opacity; } +#client_testimony { + display: block; + position: absolute; + height: 100%; + width: auto; +} + +@keyframes bubble { + + 0% { + left: 0; + top: 0; + } + + 10% { + left: 0; + top: 0; + } + + 20% { + left: -1%; + top: 0; + } + + 30% { + left: 1%; + top: 1%; + } + + 40% { + left: -1%; + top: -1%; + } + + 50% { + left: 1%; + top: 0; + } + + 60% { + left: -1%; + top: -1%; + } + + 70% { + left: 1%; + top: 0; + } + + 80% { + left: -1%; + top: 1%; + } + + 90% { + left: 0; + top: 0; + } + + 100% { + left: 0; + top: 0; + } +} + #client_shout { display: block; position: absolute; @@ -220,19 +305,13 @@ left: 0; } -#client_background { - position: relative; - padding-bottom: 75%; - background-color: transparent; - top: 0; +#client_chatcontainer { + position: absolute; + width: 100%; + bottom: 0; left: 0; } -#client_inputbox { - font-size: 21px; - padding: 2px 10px; -} - .long { width: 100%; background-color: #ddd; @@ -242,60 +321,9 @@ margin: auto; } -#client_chatlog { - top: 0; - right: 0; - flex: 1; -} - -#client_log { - position: relative; - height: 100%; - color: #fff; - word-break: keep-all; - word-wrap: break-word; - overflow-wrap: break-word; - overflow-y: auto; - font-size: medium; - background-color: #242424; - 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 { - position: relative; - background-color: #242424; - color: #fff; - font-family: "Source Code Pro", "Consolas", monospace; - font-size: small; - overflow-wrap: break-word; - overflow-y: auto; - text-rendering: optimizelegibility; - resize: none; - flex: 1 1 auto; - border: none; -} - -#client_musiclist { - width: 99%; - height: 100%; - background-color: #222; - color: #fff; +#client_inputbox { + font-size: 21px; + padding: 2px 10px; } #client_bars { @@ -305,50 +333,26 @@ display: -webkit-flex; } -#client_testimony { - display: block; - position: absolute; - width: 100%; - height: auto; -} - -.evi_icon { - width: 70px; - height: 70px; - background-color: #787878; - outline-color: #886060; - outline-width: 1px; - outline-style: inset; - outline-offset: -1px; -} - -#evi_options { - display: inline-block; - padding-left: 5px; -} - -#evi_options label { +.emote_button { display: inline-block; - width: 3em; -} - -#evi_desc { - flex: 1 auto; + width: 40px; + height: 40px; + margin: 2px; + cursor: pointer; + box-shadow: 0 0 0 2px #000 inset; + border-radius: 4px; + word-break: break-all; + overflow-y: hidden; } -#bg_preview { - max-width: 150px; - max-height: 112px; - width: 100%; - height: 100%; - border-style: double; - border-radius: 7px; - border-color: #fff; - border-width: 3px; +.emote_button.dark { + opacity: 0.5; } -.healthchange_button { - font-size: 1.5em; +#client_emo { + position: relative; + top: 10px; + width: 95%; } .judge_button { @@ -371,48 +375,69 @@ vertical-align: middle; } -.client_button.hover_button.inactive { - display: none; +.healthchange_button { + font-size: 1.5em; } -.client_button.hover_button:hover { - border-color: #FFD081; +#client_chatlog { + top: 0; + right: 0; + flex: 1; } -.client_button.dark { - opacity: 0.5; +#client_log { + position: relative; + height: 100%; + color: #fff; + word-break: keep-all; + word-wrap: break-word; + overflow-wrap: break-word; + overflow-y: auto; + font-size: medium; + background-color: #242424; + text-align: start; + line-height: .85em; } -.noini { - transform: rotate(180deg); +#client_log>p { + line-height: 1.1em; } -.hrtext { - overflow: hidden; - text-align: center; - font-size: small; - color: #c6c6c6; +.iclog_name { + font-weight: bold; + padding-right: .35em; } -.hrtext:before, -.hrtext:after { - background-color: #c6c6c6; - content: ""; - display: inline-block; - height: 1px; +.iclog_time { + float: right; + padding-right: .5em; + color: #dbdbdb; +} + +#client_ooclog { position: relative; - vertical-align: middle; - width: 50%; + background-color: #242424; + color: #fff; + font-family: "Source Code Pro", "Consolas", monospace; + font-size: small; + overflow-wrap: break-word; + overflow-y: auto; + text-rendering: optimizelegibility; + resize: none; + flex: 1 1 auto; + border: none; } -.hrtext:before { - right: 0.5em; - margin-left: -50%; +#client_musicsearch { + width: 100%; } -.hrtext:after { - left: 0.5em; - margin-right: -50%; +#client_musiclist { + width: 99%; + height: 95%; + height: calc(95% - 16px); + background-color: #222; + color: #fff; } #client_menu { @@ -499,4 +524,80 @@ .area-spectatable { background-color: rgb(54, 198, 68); +} + +#bg_preview { + max-width: 150px; + max-height: 112px; + width: 100%; + height: 100%; + border-style: double; + border-radius: 7px; + border-color: #fff; + border-width: 3px; +} + +#evi_options { + display: inline-block; + width: 100%; + border: 2px ridge white; +} + +#evi_options label { + display: inline-block; + width: 3em; +} + +#evi_desc { + flex: 1 auto; +} + +#client_settings { + width: 100%; +} + +#about-logo { + padding-top: 5px; + height: 30%; + image-rendering: auto; +} + +.client_button.hover_button.inactive { + display: none; +} + +.client_button.hover_button:hover { + border-color: #FFD081; +} + +.client_button.dark { + opacity: 0.5; +} + +.hrtext { + overflow: hidden; + text-align: center; + font-size: small; + color: #c6c6c6; +} + +.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 |
