aboutsummaryrefslogtreecommitdiff
path: root/webAO/styles/client.css
diff options
context:
space:
mode:
Diffstat (limited to 'webAO/styles/client.css')
-rw-r--r--webAO/styles/client.css892
1 files changed, 452 insertions, 440 deletions
diff --git a/webAO/styles/client.css b/webAO/styles/client.css
index deca156..b24dc57 100644
--- a/webAO/styles/client.css
+++ b/webAO/styles/client.css
@@ -1,735 +1,747 @@
.lm_item .lm_header .lm_controls .lm_maximise {
- display: none;
+ display: none;
}
.lm_content {
- overflow-y: scroll;
- }
+ overflow-y: scroll;
+}
@keyframes error_blink {
- 0% {
- color: #fff;
- }
+ 0% {
+ color: #fff;
+ }
- 50% {
- color: #e00;
- }
+ 50% {
+ color: #e00;
+ }
- 100% {
- color: #fff;
- }
+ 100% {
+ color: #fff;
+ }
}
-
-
.text_rainbow {
- background-color: #fff;
- background-image: repeating-linear-gradient(to right, red 0% 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80% 100%);
- background-size: 75% 75%;
- background-clip: text;
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- animation: rainbow 2s linear infinite;
+ background-color: #fff;
+ background-image: repeating-linear-gradient(
+ to right,
+ red 0% 20%,
+ orange 20% 40%,
+ yellow 40% 60%,
+ green 60% 80%,
+ blue 80% 100%
+ );
+ background-size: 75% 75%;
+ background-clip: text;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ animation: rainbow 2s linear infinite;
}
@keyframes rainbow_alt {
+ 0%,
+ 100% {
+ background-position: 0 0;
+ }
- 0%,
- 100% {
- background-position: 0 0;
- }
-
- 50% {
- background-position: 400% 0;
- }
+ 50% {
+ background-position: 400% 0;
+ }
}
@keyframes rainbow {
- 0% {
- background-position: 0 0;
- }
+ 0% {
+ background-position: 0 0;
+ }
- 100% {
- background-position: 400% 0;
- }
+ 100% {
+ background-position: 400% 0;
+ }
}
#client_error {
- position: absolute;
- display: flex;
- flex-direction: column;
- padding: 10px;
- top: 50%;
- left: 50%;
- margin-right: -50%;
- transform: translate(-50%, -50%);
- justify-content: center;
- align-items: center;
- background: #a00;
- color: #fff;
- font-size: large;
- z-index: 100;
+ position: absolute;
+ display: flex;
+ flex-direction: column;
+ padding: 10px;
+ top: 50%;
+ left: 50%;
+ margin-right: -50%;
+ transform: translate(-50%, -50%);
+ justify-content: center;
+ align-items: center;
+ background: #a00;
+ color: #fff;
+ font-size: large;
+ z-index: 100;
}
#client_errortext {
- animation: error_blink 3s ease-in-out infinite;
+ animation: error_blink 3s ease-in-out infinite;
}
#client_secondfactor {
- display: block;
- flex-direction: column;
- justify-content: center;
- text-align: center;
- align-items: center;
- background: black;
- color: lightgreen;
- font-size: large;
- z-index: 200;
+ display: block;
+ flex-direction: column;
+ justify-content: center;
+ text-align: center;
+ align-items: center;
+ background: black;
+ color: lightgreen;
+ font-size: large;
+ z-index: 200;
}
#client_waiting {
- display: block;
- flex-direction: column;
- position: fixed;
- top: 5vh;
- left: 10vw;
- width: 80vw;
- max-height: 90vh;
- justify-content: center;
- text-align: center;
- align-items: center;
- font-size: large;
- overflow-y: scroll;
- z-index: 100;
- background: #555;
+ display: block;
+ flex-direction: column;
+ position: fixed;
+ top: 5vh;
+ left: 10vw;
+ width: 80vw;
+ max-height: 90vh;
+ justify-content: center;
+ text-align: center;
+ align-items: center;
+ font-size: large;
+ overflow-y: scroll;
+ z-index: 100;
+ background: #555;
}
#client_loading {
- display: block;
- flex-direction: column;
- justify-content: center;
- text-align: center;
- align-items: center;
- background: black;
- color: lightgreen;
- font-size: large;
+ display: block;
+ flex-direction: column;
+ justify-content: center;
+ text-align: center;
+ align-items: center;
+ background: black;
+ color: lightgreen;
+ font-size: large;
}
#client_loadingtext {
- margin: 30px;
+ margin: 30px;
}
.demothing {
- display: inline-block;
- height: 60px;
- width: 60px;
- max-width: 60px;
- max-height: 60px;
- margin: 3px;
- border: 1px solid #000;
- vertical-align: top;
+ 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);
+ transform: rotate(180deg);
}
#client_charselect {
- display: block;
- text-align: center;
- margin: 0 auto;
- background: #444;
+ display: block;
+ text-align: center;
+ margin: 0 auto;
+ background: #444;
}
#client_icwrapper {
- position: relative;
- background: inherit;
+ position: relative;
+ background: inherit;
}
#client_iccontrols {
- background: inherit;
- height: 100%;
- overflow-y: auto;
+ background: inherit;
+ height: 100%;
+ overflow-y: auto;
}
-
@keyframes shake {
+ 0%,
+ 100% {
+ left: 0;
+ }
- 0%,
- 100% {
- left: 0;
- }
-
- 20% {
- left: -10%;
- }
+ 20% {
+ left: -10%;
+ }
- 40% {
- left: +10%;
- }
+ 40% {
+ left: +10%;
+ }
- 60% {
- left: -10%;
- }
+ 60% {
+ left: -10%;
+ }
- 80% {
- left: +10%;
- }
+ 80% {
+ left: +10%;
+ }
}
@keyframes flash {
+ 0%,
+ 100% {
+ background-color: transparent;
+ }
- 0%,
- 100% {
- background-color: transparent;
- }
-
- 50% {
- background-color: white;
- }
+ 50% {
+ background-color: white;
+ }
}
#client_background {
- position: relative;
- background-color: transparent;
- top: 0;
- left: 0;
+ position: relative;
+ background-color: transparent;
+ top: 0;
+ left: 0;
}
#client_gamewindow {
- position: inherit;
- width: 100%;
- padding-bottom: 75%;
-
+ position: inherit;
+ width: 100%;
+ padding-bottom: 75%;
}
#client_court_static {
- position: absolute;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ top: 0;
+ left: 0;
}
#client_court {
- position: absolute;
- height: 100%;
- top: 0;
- left: 0;
+ position: absolute;
+ height: 100%;
+ top: 0;
+ left: 0;
}
#client_stitch_court {
- position: absolute;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ top: 0;
+ left: 0;
}
-#client_stitch_court>img {
- position: absolute;
- height: 100%;
- width: 100%;
- bottom: 0;
+#client_stitch_court > img {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ bottom: 0;
}
#client_court_classic {
- position: absolute;
- height: 100%;
- top: 0;
- left: 0;
+ position: absolute;
+ height: 100%;
+ top: 0;
+ left: 0;
}
.def_court {
- object-position: center;
+ object-position: center;
}
.wit_court {
- object-position: center;
+ object-position: center;
}
.pro_court {
- object-position: center;
+ object-position: center;
}
#client_fullview {
- position: absolute;
- height: 100%;
- width: 100%;
- bottom: 0;
- transition: none;
- transition-property: left;
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ bottom: 0;
+ transition: none;
+ transition-property: left;
}
#client_classicview {
- position: absolute;
- height: 100%;
- width: 100%;
- bottom: 0;
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ bottom: 0;
}
.client_char {
- position: absolute;
- height: 100%;
- width: 100%;
- bottom: 0;
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ bottom: 0;
}
-.client_char>img {
- position: absolute;
- height: 100%;
- bottom: 0;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
-
+.client_char > img {
+ position: absolute;
+ height: 100%;
+ bottom: 0;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
}
#client_bench_classic {
- left: 0;
+ left: 0;
}
-#client_def_bench, #client_def_char, #client_def_pair_char, #client_court_def {
- left: 0;
+#client_def_bench,
+#client_def_char,
+#client_def_pair_char,
+#client_court_def {
+ left: 0;
}
#client_court_deft {
- left: 100%;
+ left: 100%;
}
-#client_wit_bench, #client_wit_char, #client_wit_pair_char, #client_court_wit {
- left: 200%;
+#client_wit_bench,
+#client_wit_char,
+#client_wit_pair_char,
+#client_court_wit {
+ left: 200%;
}
#client_court_prot {
- left: 100%;
+ left: 100%;
}
-#client_pro_bench, #client_pro_char, #client_pro_pair_char, #client_court_pro {
- left: 400%;
+#client_pro_bench,
+#client_pro_char,
+#client_pro_pair_char,
+#client_court_pro {
+ left: 400%;
}
.client_bench {
- position: absolute;
- height: 100%;
- bottom: 0;
- object-fit: contain;
+ position: absolute;
+ height: 100%;
+ bottom: 0;
+ object-fit: contain;
}
#client_fg {
- position: absolute;
- height: 100%;
- width: 100%;
- bottom: 0;
- left: 0;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ bottom: 0;
+ left: 0;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
}
#client_evi {
- opacity: 0;
- position: absolute;
- background-repeat: no-repeat;
- background-size: contain;
- height: 0%;
- width: auto;
- top: 1em;
- transition: 0.25s linear;
- transition-property: height, opacity;
+ opacity: 0;
+ position: absolute;
+ background-repeat: no-repeat;
+ background-size: contain;
+ height: 0%;
+ width: auto;
+ top: 1em;
+ transition: 0.25s linear;
+ transition-property: height, opacity;
}
#client_testimony {
- display: block;
- position: absolute;
- height: 100%;
- width: auto;
+ 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%;
+ }
- 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;
- }
+ 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;
- height: 100%;
- width: 100%;
- bottom: 0;
- left: 0;
+ display: block;
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ bottom: 0;
+ left: 0;
}
#client_chatcontainer {
- position: absolute;
- width: 100%;
- bottom: 0;
- left: 0;
+ position: absolute;
+ width: 100%;
+ bottom: 0;
+ left: 0;
}
.long {
- width: 100%;
- background-color: #ddd;
- border: 1px solid #555;
- border-style: solid;
- box-sizing: border-box;
- margin: auto;
+ width: 100%;
+ background-color: #ddd;
+ border: 1px solid #555;
+ border-style: solid;
+ box-sizing: border-box;
+ margin: auto;
}
#client_inputbox {
- position: relative;
- font-size: 21px;
- padding: 2px 10px;
+ position: relative;
+ font-size: 21px;
+ padding: 2px 10px;
}
#client_bars {
- position: relative;
- background: inherit;
- text-align: center;
- display: flex;
- display: -webkit-flex;
+ position: relative;
+ background: inherit;
+ text-align: center;
+ display: flex;
+ display: -webkit-flex;
}
.emote_button {
- display: inline-block;
- 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;
+ display: inline-block;
+ 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;
}
.emote_button.dark {
- opacity: 0.5;
+ opacity: 0.5;
}
#client_emo {
- position: relative;
- top: 10px;
- width: 95%;
+ position: relative;
+ top: 10px;
+ width: 95%;
}
.judge_button {
- display: inline-block;
- min-width: 85px;
- min-height: 42px;
- margin: 5px 1px;
- padding: 2px;
- cursor: pointer;
- text-align: center;
- font-weight: bold;
- font-family: sans-serif;
- text-shadow: -2px 0 #fff, 0 2px #fff, 2px 0 #fff, 0 -2px #fff;
- background-color: #c1c1c1;
- border-radius: 5px;
- border-style: solid;
- border-width: 1px;
- border-color: #919191;
- box-shadow: 1px 1px white inset;
- vertical-align: middle;
+ display: inline-block;
+ min-width: 85px;
+ min-height: 42px;
+ margin: 5px 1px;
+ padding: 2px;
+ cursor: pointer;
+ text-align: center;
+ font-weight: bold;
+ font-family: sans-serif;
+ text-shadow:
+ -2px 0 #fff,
+ 0 2px #fff,
+ 2px 0 #fff,
+ 0 -2px #fff;
+ background-color: #c1c1c1;
+ border-radius: 5px;
+ border-style: solid;
+ border-width: 1px;
+ border-color: #919191;
+ box-shadow: 1px 1px white inset;
+ vertical-align: middle;
}
.healthchange_button {
- font-size: 1.5em;
+ font-size: 1.5em;
}
#client_chatlog {
- top: 0;
- right: 0;
- flex: 1;
+ 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;
+ 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: 0.85em;
}
-#client_log>p {
- line-height: 1.1em;
+#client_log > p {
+ line-height: 1.1em;
}
.iclog_name {
- font-weight: bold;
- padding-right: .35em;
+ font-weight: bold;
+ padding-right: 0.35em;
}
.iclog_time {
- float: right;
- padding-right: .5em;
- color: #dbdbdb;
+ float: right;
+ padding-right: 0.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;
+ 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_oocinput {
- display:flex;
- flex-flow: row nowrap;
- whitespace: nowrap;
+ display: flex;
+ flex-flow: row nowrap;
+ whitespace: nowrap;
}
#client_oocinputbox {
- flex-grow:1;
+ flex-grow: 1;
}
#OOC_name {
- width:15%;
+ width: 15%;
}
#client_musicsearch {
- width: 100%;
+ width: 100%;
}
#client_musiclist {
- width: 99%;
- height: 95%;
- height: calc(99% - 18px);
- background-color: #222;
- color: #fff;
+ width: 99%;
+ height: 95%;
+ height: calc(99% - 18px);
+ background-color: #222;
+ color: #fff;
}
#client_playerlist {
- width: 100%;
+ width: 100%;
}
#client_menu {
- overflow-y: auto;
- height: 100%;
+ overflow-y: auto;
+ height: 100%;
}
.menu_content {
- margin: 15px 15px;
- display: none;
+ margin: 15px 15px;
+ display: none;
}
.menu_content.active {
- display: block;
+ display: block;
}
.menu_button {
- cursor: pointer;
- display: inline-table;
- margin: 10px 15px;
- opacity: 1;
+ cursor: pointer;
+ display: inline-table;
+ margin: 10px 15px;
+ opacity: 1;
}
.menu_button.active {
- opacity: 0.25;
+ opacity: 0.25;
}
.menu_button:hover {
- color: #FFD081;
+ color: #ffd081;
}
.menu_icon {
- font-size: 2vw;
+ font-size: 2vw;
}
.area-button {
- border-style: solid;
- min-width: 120px;
- margin: 5px;
- display: inline-block;
- padding: 6px;
- border-radius: 5px;
- border-color: white;
- border-width: 1px;
- cursor: pointer;
- color: #000;
+ border-style: solid;
+ min-width: 120px;
+ margin: 5px;
+ display: inline-block;
+ padding: 6px;
+ border-radius: 5px;
+ border-color: white;
+ border-width: 1px;
+ cursor: pointer;
+ color: #000;
}
.area-button:hover {
- border-color: #FFD081;
+ border-color: #ffd081;
}
.area-default {
- background-color: rgb(54, 198, 68);
+ background-color: rgb(54, 198, 68);
}
-.area- { /* THANKS CW */
- background-color: rgb(54, 198, 68);
+.area- {
+ /* THANKS CW */
+ background-color: rgb(54, 198, 68);
}
.area-idle {
- background-color: rgb(54, 198, 68);
+ background-color: rgb(54, 198, 68);
}
.area-looking-for-players {
- background-color: rgb(255, 255, 0);
+ background-color: rgb(255, 255, 0);
}
.area-casing {
- background-color: rgb(255, 166, 0);
+ background-color: rgb(255, 166, 0);
}
.area-recess {
- background-color: rgb(255, 190, 30);
+ background-color: rgb(255, 190, 30);
}
.area-rp {
- background-color: rgb(200, 52, 252);
+ background-color: rgb(200, 52, 252);
}
.area-gaming {
- background-color: rgb(55, 255, 255);
+ background-color: rgb(55, 255, 255);
}
.area-locked {
- background-color: rgb(127, 127, 127);
+ background-color: rgb(127, 127, 127);
}
.area-spectatable {
- background-color: rgb(54, 198, 68);
+ 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;
+ 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;
+ display: inline-block;
+ width: 100%;
+ border: 2px ridge white;
}
#evi_options label {
- display: inline-block;
- width: 3em;
+ display: inline-block;
+ width: 3em;
}
#evi_desc {
- flex: 1 auto;
+ flex: 1 auto;
}
#client_settings {
- width: 100%;
+ width: 100%;
}
#about-logo {
- padding-top: 5px;
- height: 30%;
- image-rendering: auto;
+ padding-top: 5px;
+ height: 30%;
+ image-rendering: auto;
}
.client_button.hover_button.inactive {
- display: none;
+ display: none;
}
.client_button.hover_button:hover {
- border-color: #FFD081;
+ border-color: #ffd081;
}
.client_button.dark {
- opacity: 0.5;
+ opacity: 0.5;
}
.hrtext {
- overflow: hidden;
- text-align: center;
- font-size: small;
- color: #c6c6c6;
+ 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%;
+ background-color: #c6c6c6;
+ content: "";
+ display: inline-block;
+ height: 1px;
+ position: relative;
+ vertical-align: middle;
+ width: 50%;
}
.hrtext:before {
- right: 0.5em;
- margin-left: -50%;
+ right: 0.5em;
+ margin-left: -50%;
}
.hrtext:after {
- left: 0.5em;
- margin-right: -50%;
-} \ No newline at end of file
+ left: 0.5em;
+ margin-right: -50%;
+}
generated by cgit (git 2.34.1) at 2026-04-23 15:30:36 +0000