aboutsummaryrefslogtreecommitdiff
path: root/webAO/styles
diff options
context:
space:
mode:
Diffstat (limited to 'webAO/styles')
-rw-r--r--webAO/styles/classic.css47
-rw-r--r--webAO/styles/client.css568
-rw-r--r--webAO/styles/master.css382
-rw-r--r--webAO/styles/soj.css45
4 files changed, 1042 insertions, 0 deletions
diff --git a/webAO/styles/classic.css b/webAO/styles/classic.css
new file mode 100644
index 0000000..5235f70
--- /dev/null
+++ b/webAO/styles/classic.css
@@ -0,0 +1,47 @@
+body {
+ font-family: "Ace Attorney", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Osaka", "MS Gothic", "MS Pゴシック", "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;
+}
+
+#client_name {
+ display: none;
+ padding: 0px 6px;
+ 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_chat {
+ font-size: 1em;
+ display: none;
+ width: 98%;
+ 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: left;
+ overflow: hidden;
+ scroll-behavior: smooth;
+}
+
+#client_chat p {
+ margin: 4px;
+ color: white;
+} \ No newline at end of file
diff --git a/webAO/styles/client.css b/webAO/styles/client.css
new file mode 100644
index 0000000..e736e16
--- /dev/null
+++ b/webAO/styles/client.css
@@ -0,0 +1,568 @@
+#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;
+ }
+
+ 50% {
+ color: red;
+ }
+
+ 100% {
+ color: #fff;
+ }
+}
+
+#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;
+ animation: error_blink 3s ease-in-out infinite;
+ z-index: 100;
+}
+
+#client_loading {
+ 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: black;
+ color: lightgreen;
+ font-size: large;
+ z-index: 100;
+}
+
+#client_loadingtext {
+ margin: 30px;
+}
+
+#client_gamewindow {
+ width: 100%;
+}
+
+@keyframes shake {
+ 0%,100% {left: 0; }
+ 20% {left: -10%; }
+ 40% {left: +10%; }
+ 60% {left: -10%; }
+ 80% {left: +10%; }
+}
+
+@keyframes flash {
+ 0%,100% {background-color: transparent; }
+ 50% {background-color: white; }
+}
+
+#client_charselect {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ overflow-y: auto;
+ justify-content: center;
+ align-items: center;
+ vertical-align: middle;
+ margin: 0 auto;
+ background: rgba(70, 70, 70, 0.5);
+ z-index: 50;
+}
+
+#client_chartable {
+ background: #eee;
+}
+
+#client_chartable_container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.demothing {
+ display: 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 {
+ position: relative;
+ top: 10px;
+ width: 95%;
+}
+
+.emote_button {
+ display: inline-block;
+ width: 40px;
+ height: 40px;
+ padding: 1px;
+ cursor: pointer;
+ border: 1px solid #000;
+}
+
+#client_settings {
+ width: 100%;
+}
+
+#client_court {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ top: 0;
+ left: 0;
+}
+
+#client_char {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ bottom: 0;
+}
+
+#client_pair_char {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ bottom: 0;
+}
+
+#client_bench {
+ display: none;
+ position: absolute;
+ height: auto;
+ width: 100%;
+ bottom: 0;
+ left: 0;
+}
+
+#client_fg {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ bottom: 0;
+ left: 0;
+}
+
+#client_evi {
+ opacity: 0;
+ position: absolute;
+ background-repeat: no-repeat;
+ background-size: contain;
+ height: 0%;
+ width: auto;
+ top: 1.5em;
+ transition: 0.25s linear;
+ transition-property: height, opacity;
+}
+
+#client_shout {
+ display: block;
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ bottom: 0;
+ left: 0;
+}
+
+#client_background {
+ position: relative;
+ padding-bottom: 75%;
+ background-color: transparent;
+ top: 0;
+ left: 0;
+}
+
+.rainbow-text {
+ background-color: rgb(255, 255, 255);
+ 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_inputbox {
+ font-size: 21px;
+ padding: 2px 10px;
+}
+
+.long {
+ width: 100%;
+ background-color: #ddd;
+ border: 1px solid #555;
+ border-style: solid;
+ box-sizing: border-box;
+ 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_bars {
+ position: relative;
+ text-align: center;
+ display: flex;
+ 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 {
+ display: inline-block;
+ width: 3em;
+}
+
+#evi_desc {
+ flex: 1 auto;
+}
+
+#bg_preview {
+ max-width: 150px;
+ max-height: 112px;
+ width: 100%;
+ height: 100%;
+ border-style: double;
+ border-radius: 7px;
+ border-color: #fff;
+ border-width: 3px;
+}
+
+.slider {
+ padding-right: 4px;
+ width: 80%;
+ align-self: center;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+#client_defense_hp {
+ text-align: left;
+}
+
+#client_defense_hp>.health-bar {
+ background-color: #169de0;
+}
+
+#client_prosecutor_hp {
+ text-align: right;
+}
+
+#client_prosecutor_hp>.health-bar {
+ background-color: #e01f5f;
+}
+
+.health-box {
+ background-color: #555;
+ height: 20px;
+ width: 50%;
+ margin: 0 auto;
+ border: solid 2px #aaa;
+ border-radius: 5px;
+ box-sizing: border-box;
+ display: block;
+}
+
+.health-bar {
+ width: 100%;
+ height: 100%;
+ border-radius: 3px;
+ bottom: 0;
+ position: relative;
+ display: inline-block;
+ transition: 1s linear;
+ transition-property: width;
+}
+
+.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;
+}
+
+.client_button {
+ min-width: 6em;
+ margin: 1px;
+ padding: 6px 2px;
+ clip-path: polygon(75% 0, 100% 50%, 100% 100%, 0 100%, 0 50%, 25% 0);
+ cursor: pointer;
+ text-align: center;
+ color: white;
+ background-color: #7b2900;
+ text-shadow: 0 0 4px #000;
+ border: 1px solid #000;
+}
+
+.client_button.hover_button.inactive {
+ display: none;
+}
+
+.client_button.hover_button:hover {
+ border-color: #FFD081;
+}
+
+.dark {
+ filter: brightness(50%);
+}
+
+.noini {
+ transform: rotate(180deg);
+}
+
+.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%;
+}
+
+#client_menu {
+ overflow-y: auto;
+ height: 100%;
+}
+
+.menu_content {
+ margin: 15px 15px;
+ display: none;
+}
+
+.menu_content.active {
+ display: block;
+}
+
+.menu_icon {
+ cursor: pointer;
+ display: inline-table;
+ margin: 10px 15px;
+ opacity: 1;
+}
+
+.menu_icon.active {
+ opacity: 0.25;
+}
+
+.menu_icon:hover {
+ color: #FFD081;
+}
+
+.em-3 {
+ font-size: 3em;
+}
+
+.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;
+}
+
+.area-button:hover {
+ border-color: #FFD081;
+}
+
+.area-default {
+ background-color: rgb(54,198,68);
+}
+
+.area-idle {
+ background-color: rgb(54,198,68);
+}
+
+.area-looking-for-players {
+ background-color: rgb(255,255,0);
+}
+
+.area-casing {
+ background-color: rgb(255,166,0);
+}
+
+.area-recess {
+ background-color: rgb(255,190,30);
+}
+
+.area-rp {
+ background-color: rgb(200,52,252);
+}
+
+.area-gaming {
+ background-color: rgb(55,255,255);
+}
+
+.area-locked {
+ background-color: rgb(127,127,127);
+}
+
+.area-spectatable {
+ background-color: rgb(54,198,68);
+} \ No newline at end of file
diff --git a/webAO/styles/master.css b/webAO/styles/master.css
new file mode 100644
index 0000000..9aa459f
--- /dev/null
+++ b/webAO/styles/master.css
@@ -0,0 +1,382 @@
+#serverinfo {
+ margin-top: 75px;
+ margin-bottom: 0px;
+ float: left;
+ font-size:0.6em;
+}
+
+#clientinfo {
+ margin: 0px;
+ display: block;
+ float: left;
+ clear: both;
+ font-size:0.6em;
+}
+
+.button {
+ padding: 5px;
+ vertical-align: middle;
+ text-decoration: none;
+ cursor: pointer;
+ background: repeating-linear-gradient(#792c01, #792c01 3px, #9a491c 3px, #9a491c 4px);
+ border: 1px solid #553e30;
+ border-radius: 5px;
+ box-shadow: 0 0 0 1px #FFFFFF;
+ color: white;
+ text-align: center;
+ text-shadow:
+ 0px -1px 0 #612000,
+ 1px 0px 0 #612000,
+ -1px 0px 0 #612000,
+ 0px 1px 0 #612000;
+ padding: 11px;
+ font-family: Times New Roman, sans;
+ font-weight: normal;
+}
+
+.button:hover {
+ background: repeating-linear-gradient(#a57318, #a57318 3px, #c68c39 3px, #c68c39 4px);
+ border: 1px solid #bdb521;
+}
+
+#menu .chosen:before {
+ height: 200px;
+ width: 200px;
+ border-color: #bdb521;
+ border-width:11px;
+ padding: 1px;
+}
+
+#serverdescription_box {
+ display: inline-block;
+ position: fixed;
+ width: 185px;
+ height: 276px;
+ top: 35%;
+ right: 0px;
+ padding: 0px;
+ background: url("./images/desc.png") no-repeat;
+ border: 2px solid #888;
+ border-radius: 5px;
+}
+
+#serverdescription_content {
+ width: 180px;
+ height: 270px;
+ position: relative;
+ color: white;
+ white-space: pre-line;
+ word-wrap: break-word;
+ text-align: center;
+ margin: 2px;
+ overflow-x: visible;
+ overflow-y: auto;
+}
+
+
+.serverlist {
+ display: block;
+ margin: auto;
+ width: 500px;
+}
+
+.serverlist li {
+ position: relative;
+ left: -55px;
+ background-color: #FFF;
+ border: 2px solid #BBB;
+ border-radius: 5px;
+ padding: 0px;
+ padding-left: 10px;
+ display: block;
+ width: 500px;
+ height: 50px;
+ margin: 10px;
+ margin-left: auto;
+ margin-right: auto;
+ float: left;
+ text-align: center;
+ cursor: default;
+}
+.serverlist li:hover {
+ background-color: #FFFF6B;
+ border-color: #EFAD21;
+}
+
+.serverlist li p {
+ display: inline-block !important;
+}
+
+.serverlist li a {
+ float: right;
+}
+
+.serverlist .button {
+ position: relative;
+ top: 0px;
+ right: -2px;
+ height: 38px;
+ padding: 0px;
+ padding-top: 10px;
+ border-radius: 0px 5px 5px 0px;
+ width: 50px;
+ box-shadow: 0 0 0 2px #BBB;
+}
+
+.serverlist .available {
+ background-color: #6BFF6B;
+ border-color: #21AD21;
+}
+
+.serverlist .unavailable {
+ background-color: #ff6b6B;
+ border-color: #ad2121;
+ display: none;
+}
+
+.serverlist .button:hover {
+ box-shadow: 0 0 0 1px #EFAD21;
+}
+
+#content h2 {
+ vertical-align: top;
+ display: inline-block;
+ margin-top: 0px;
+ margin-left: auto;
+ margin-right: auto;
+}
+#content p {
+ vertical-align: top;
+ display: inline-block;
+}
+
+#content > p {
+ margin-right: 50px;
+}
+
+ul.navbar-nav.ml-auto {
+ display: inline-flex;
+ list-style-type: none;
+}
+
+nav.navbar.fixed-top.navbar-expand-lg.navbar-dark.bg-dark.fixed-top{
+ background: black;
+}
+
+body{
+ margin: 0px;
+}
+
+/*!
+ * Start Bootstrap - Modern Business (https://startbootstrap.com/template-overviews/modern-business)
+ * Copyright 2013-2017 Start Bootstrap
+ * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-logomodern-business-nav/blob/master/LICENSE)
+ */
+
+.carousel-item {
+ height: 65vh;
+ min-height: 300px;
+ background: no-repeat center center scroll;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+}
+
+.portfolio-item {
+ margin-bottom: 30px;
+}
+
+.navbar {
+ font-family: 'Poiret One', cursive;
+ text-transform: uppercase;
+ font-size:22px;
+}
+
+.navbar-dark .navbar-nav .nav-link {
+ margin-right: 25px;
+ color: white !important;
+}
+
+.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
+ color: rgba(255, 229, 145, .75)!important;
+ opacity: 100 !important;
+}
+
+body {
+ background: #2c3d51;
+ color: white;
+ font-family: 'Roboto Condensed', sans-serif;
+}
+
+.page-heading{
+ font-family: 'Oswald', sans-serif;
+ text-transform: uppercase;
+ margin-top: 5px;
+ text-align: center;
+}
+
+hr.gold {
+border-top: 10px solid #f3b137;
+width: 250px;
+}
+
+.about {
+ text-align: center;
+}
+
+.card-body {
+background-color: #473322;
+font-family: 'Roboto Condensed', sans-serif;
+}
+
+.card-header {
+background-color: #2f2216;
+border-bottom: 1px solid #ffe591;
+font-family: 'Roboto Condensed', sans-serif;
+border-radius: 0px !important;
+}
+
+.card-header a {
+ color: #ffe591 !important;
+}
+
+.card {
+ border: 1px solid #ffe591;
+ border-radius: 0px !important;
+}
+
+@media (max-width:411px) {
+ .top-bois {
+ display: none !important;
+ }
+}
+
+.top-bois {
+ display: inline-table;
+ width: 100%;
+}
+
+.carousel-item {
+ height: 90vh;
+ background-size: contain;
+}
+
+.carousel-inner {
+ background-color: #2c3d51;
+}
+
+@media (max-width:980px){
+ .carousel-item {
+ background-size: cover;
+}
+}
+
+h1 {
+ font-family: 'Poiret One', cursive;
+ text-transform: uppercase;
+}
+
+a {
+ color: #ffe591!important;
+}
+
+@media (max-width:576px){
+.borderbox{
+ padding: 0px 20px 0px 20px;
+}
+}
+
+.inside-carousel {
+ position:relative;
+}
+
+.button-carousel, .tagline-carousel {
+ right: 0;
+ bottom: 0;
+ left: 0;
+ position: absolute;
+ margin: auto;
+ text-align: center;
+}
+
+.button-carousel {
+ background-color: #2f2216;
+ max-width: 200px;
+ padding: 30px;
+ border: 2px solid #ffe591;
+ color: white !important;
+ border-radius: 15px;
+}
+
+.button-carousel p{
+ margin-top: -17px;
+ font-family: 'Poiret One', cursive;
+ text-transform: uppercase;
+ font-size: 24px;
+}
+
+.download-button h4 {
+ font-family: 'Poiret One', cursive;
+ text-transform: uppercase;
+ margin-bottom:0px;
+}
+
+.button-carousel a, .download-button a {
+ color: white !important;
+}
+
+.download-button{
+ background-color: #2f2216;
+ max-width: 400px;
+ padding: 10px;
+ text-align: center;
+ border: 2px solid #ffe591;
+ color: white !important;
+ border-radius: 15px;
+ margin: 0 auto;
+}
+
+.card {
+ background-color: #2c3d51;;
+}
+
+.download-box strong {
+ color:#ffe591;
+}
+.download-box a, .download-button a, .links a, .card a {
+ text-decoration: underline;
+}
+
+.acc {
+ text-decoration: none !important;
+}
+
+a:hover{
+ opacity: 0.8;
+}
+
+.navbar .container {
+ text-align: center;
+}
+
+a.nav-link {
+ text-decoration: none !important;
+}
+
+ul.serverlist p {
+ color: black;
+}
+
+a.nav-link {
+ padding: 8px;
+}
+
+ul.navbar-nav.ml-auto{
+ margin-top: 19px;
+ padding: 0;
+}
+
+nav.navbar.fixed-top.navbar-expand-lg.navbar-dark.bg-dark.fixed-top{
+ height: 65px;
+}
diff --git a/webAO/styles/soj.css b/webAO/styles/soj.css
new file mode 100644
index 0000000..ad29317
--- /dev/null
+++ b/webAO/styles/soj.css
@@ -0,0 +1,45 @@
+body {
+ font-family: sans-serif;
+}
+
+#client_chatcontainer {
+ position: absolute;
+ top: 73%;
+ height: 27%;
+ width: 100%;
+ background-image: url("images/chatbox.svg");
+ background-size: cover;
+ background-repeat: no-repeat;
+}
+
+#client_name {
+ display: none;
+ top: 5%;
+ padding: 0px 10px;
+ height: 20%;
+ border-radius: 3px;
+ position: absolute;
+}
+
+#client_chat {
+ font-size: 1em;
+ display: none;
+ width: 100%;
+ margin: auto;
+ height: 90%;
+ top: 20%;
+ border-radius: 4px;
+ position: absolute;
+ word-break: keep-all;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ text-align: left;
+ overflow: hidden;
+ scroll-behavior: smooth;
+}
+
+#client_chat p {
+ margin: 4px;
+ padding: 5px 10px;
+ color: white;
+} \ No newline at end of file