From ed7bbd57e567447852c32ac3e62daa7dd33d7781 Mon Sep 17 00:00:00 2001 From: Rintim Date: Tue, 16 Apr 2024 02:38:11 +0800 Subject: [PATCH] pref: format @/layout. --- layout/default/codemirror.css | 1330 +++++++++------ layout/default/layout.css | 3017 +++++++++++++++++---------------- layout/default/menu.css | 665 ++++---- layout/default/phone.css | 238 +-- layout/long/layout.css | 667 +++++--- layout/long2/layout.css | 1131 ++++++------ layout/mobile/equip.css | 452 +++-- layout/mobile/layout.css | 735 ++++---- layout/mode/boss.css | 368 ++-- layout/mode/chess.css | 691 ++++---- layout/mode/stone.css | 1027 ++++++----- layout/mode/story.css | 459 ++--- layout/mode/tafang.css | 494 +++--- layout/newlayout/equip.css | 289 ++-- layout/newlayout/global.css | 1527 ++++++++++------- layout/newlayout/layout.css | 4 +- layout/nova/layout.css | 811 +++++---- 17 files changed, 7532 insertions(+), 6373 deletions(-) diff --git a/layout/default/codemirror.css b/layout/default/codemirror.css index 38a59d366..dedf99113 100644 --- a/layout/default/codemirror.css +++ b/layout/default/codemirror.css @@ -1,518 +1,812 @@ -/* BASICS */ - -.CodeMirror { - /* Set height, width, borders, and global font properties here */ - width: 100%; - height: 100%; - color: black; -} -.CodeMirror div{ - display: block; - text-shadow: none; - transition: all 0s; - position: static; -} - -/* PADDING */ - -.CodeMirror-lines { - padding: 4px 0; /* Vertical padding around content */ -} -.CodeMirror pre { - padding: 0 4px; /* Horizontal padding of content */ -} - -.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { - background-color: white; /* The little square between H and V scrollbars */ -} - -/* GUTTER */ - -.CodeMirror-gutters { - border-right: 1px solid #ddd; - background-color: #f7f7f7; - white-space: nowrap; -} -.CodeMirror-linenumbers {} -.CodeMirror-linenumber { - padding: 0 3px 0 5px; - min-width: 20px; - text-align: right; - color: #999; - white-space: nowrap; -} - -.CodeMirror-guttermarker { color: black; } -.CodeMirror-guttermarker-subtle { color: #999; } - -/* CURSOR */ - -.CodeMirror-cursor { - border-left: 1px solid black; - border-right: none; - width: 0; -} -/* Shown when moving in bi-directional text */ -.CodeMirror div.CodeMirror-secondarycursor { - border-left: 1px solid silver; -} -.cm-fat-cursor .CodeMirror-cursor { - width: auto; - border: 0 !important; - background: #7e7; -} -.cm-fat-cursor div.CodeMirror-cursors { - z-index: 1; -} - -.cm-animate-fat-cursor { - width: auto; - border: 0; - -webkit-animation: blink 1.06s steps(1) infinite; - -moz-animation: blink 1.06s steps(1) infinite; - animation: blink 1.06s steps(1) infinite; - background-color: #7e7; -} -@-moz-keyframes blink { - 0% {} - 50% { background-color: transparent; } - 100% {} -} -@-webkit-keyframes blink { - 0% {} - 50% { background-color: transparent; } - 100% {} -} -@keyframes blink { - 0% {} - 50% { background-color: transparent; } - 100% {} -} - -/* Can style cursor different in overwrite (non-insert) mode */ -.CodeMirror-overwrite .CodeMirror-cursor {} - -.cm-tab { display: inline-block; text-decoration: inherit; } - -.CodeMirror .CodeMirror-rulers { - position: absolute; - left: 0; right: 0; top: -50px; bottom: -20px; - overflow: hidden; -} -.CodeMirror .CodeMirror-ruler { - border-left: 1px solid #ccc; - top: 0; bottom: 0; - position: absolute; -} - -/* DEFAULT THEME */ - -.cm-s-default .cm-header {color: blue;} -.cm-s-default .cm-quote {color: #090;} -.cm-negative {color: #d44;} -.cm-positive {color: #292;} -.cm-header, .cm-strong {font-weight: bold;} -.cm-em {font-style: italic;} -.cm-link {text-decoration: underline;} -.cm-strikethrough {text-decoration: line-through;} - -.cm-s-default .cm-keyword {color: #708;} -.cm-s-default .cm-atom {color: #219;} -.cm-s-default .cm-number {color: #164;} -.cm-s-default .cm-def {color: #00f;} -.cm-s-default .cm-variable, -.cm-s-default .cm-punctuation, -.cm-s-default .cm-property, -.cm-s-default .cm-operator {} -.cm-s-default .cm-variable-2 {color: #05a;} -.cm-s-default .cm-variable-3 {color: #085;} -.cm-s-default .cm-comment {color: #a50;} -.cm-s-default .cm-string {color: #a11;} -.cm-s-default .cm-string-2 {color: #f50;} -.cm-s-default .cm-meta {color: #555;} -.cm-s-default .cm-qualifier {color: #555;} -.cm-s-default .cm-builtin {color: #30a;} -.cm-s-default .cm-bracket {color: #997;} -.cm-s-default .cm-tag {color: #170;} -.cm-s-default .cm-attribute {color: #00c;} -.cm-s-default .cm-hr {color: #999;} -.cm-s-default .cm-link {color: #00c;} - -.cm-s-default .cm-error {color: #f00;} -.cm-invalidchar {color: #f00;} - -.CodeMirror-composing { border-bottom: 2px solid; } - -/* Default styles for common addons */ - -div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;} -div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;} -.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); } -.CodeMirror-activeline-background {background: #e8f2ff;} - -/* STOP */ - -/* The rest of this file contains styles related to the mechanics of - the editor. You probably shouldn't touch them. */ - -.CodeMirror { - position: relative; - overflow: hidden; - background: white; -} - -.CodeMirror .CodeMirror-scroll { - overflow: scroll !important; /* Things will break if this is overridden */ - /* 30px is the magic margin used to hide the element's real scrollbars */ - /* See overflow: hidden in .CodeMirror */ - margin-bottom: -30px; margin-right: -30px; - padding-bottom: 30px; - height: 100%; - outline: none; /* Prevent dragging from highlighting the element */ - position: relative; -} -.CodeMirror .CodeMirror-sizer { - position: relative; - border-right: 30px solid transparent; -} - -/* The fake, visible scrollbars. Used to force redraw during scrolling - before actual scrolling happens, thus preventing shaking and - flickering artifacts. */ -.CodeMirror .CodeMirror-vscrollbar, .CodeMirror .CodeMirror-hscrollbar, .CodeMirror .CodeMirror-scrollbar-filler, .CodeMirror .CodeMirror-gutter-filler { - position: absolute; - z-index: 6; - display: none; -} -.CodeMirror-vscrollbar { - right: 0; top: 0; - overflow-x: hidden; - overflow-y: scroll; -} -.CodeMirror-hscrollbar { - bottom: 0; left: 0; - overflow-y: hidden; - overflow-x: scroll; -} -.CodeMirror-scrollbar-filler { - right: 0; bottom: 0; -} -.CodeMirror-gutter-filler { - left: 0; bottom: 0; -} - -.CodeMirror .CodeMirror-gutters { - position: absolute; left: 0; top: 0; - min-height: 100%; - z-index: 3; -} -.CodeMirror-gutter { - white-space: normal; - height: 100%; - display: inline-block; - vertical-align: top; - margin-bottom: -30px; - /* Hack to make IE7 behave */ - *zoom:1; - *display:inline; -} -.CodeMirror .CodeMirror-gutter-wrapper { - position: absolute; - z-index: 4; - background: none !important; - border: none !important; -} -.CodeMirror .CodeMirror-gutter-background { - position: absolute; - top: 0; bottom: 0; - z-index: 4; -} -.CodeMirror .CodeMirror-gutter-elt { - position: absolute; - cursor: default; - z-index: 4; -} -.CodeMirror-gutter-wrapper { - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} - -.CodeMirror-lines { - cursor: text; - min-height: 1px; /* prevents collapsing before first draw */ -} -.CodeMirror pre { - /* Reset some styles that the rest of the page might have set */ - -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; - border-width: 0; - background: transparent; - /*font-family: inherit;*/ - /*font-family:'STHeiti','SimHei','Microsoft JhengHei','Microsoft YaHei','WenQuanYi Micro Hei',Helvetica,Arial,sans-serif;*/ - font-size: inherit; - margin: 0; - white-space: pre; - word-wrap: normal; - line-height: inherit; - color: inherit; - z-index: 2; - position: relative; - overflow: visible; - -webkit-tap-highlight-color: transparent; - -webkit-font-variant-ligatures: none; - font-variant-ligatures: none; -} -.CodeMirror-wrap pre { - word-wrap: break-word; - white-space: pre-wrap; - word-break: normal; -} - -.CodeMirror .CodeMirror-linebackground { - position: absolute; - left: 0; right: 0; top: 0; bottom: 0; - z-index: 0; -} - -.CodeMirror .CodeMirror-linewidget { - position: relative; - z-index: 2; - overflow: auto; -} - -.CodeMirror-widget {} - -.CodeMirror-code { - outline: none; -} - -/* Force content-box sizing for the elements where we expect it */ -.CodeMirror-scroll, -.CodeMirror-sizer, -.CodeMirror-gutter, -.CodeMirror-gutters, -.CodeMirror-linenumber { - -moz-box-sizing: content-box; - box-sizing: content-box; -} - -.CodeMirror .CodeMirror-measure { - position: absolute; - width: 100%; - height: 0; - overflow: hidden; - visibility: hidden; -} - -.CodeMirror .CodeMirror-cursor { - position: absolute; - pointer-events: none; -} -.CodeMirror-measure pre { position: static; } - -.CodeMirror div.CodeMirror-cursors { - visibility: hidden; - position: relative; - z-index: 3; -} -div.CodeMirror-dragcursors { - visibility: visible; -} - -.CodeMirror-focused div.CodeMirror-cursors { - visibility: visible; -} - -.CodeMirror-selected { background: #d9d9d9; } -.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; } -.CodeMirror-crosshair { cursor: crosshair; } -.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; } -.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; } - -.cm-searching { - background: #ffa; - background: rgba(255, 255, 0, .4); -} - -/* IE7 hack to prevent it from returning funny offsetTops on the spans */ -.CodeMirror span { *vertical-align: text-bottom; } - -/* Used to force a border model for a node */ -.cm-force-border { padding-right: .1px; } - -@media print { - /* Hide the cursor when printing */ - .CodeMirror div.CodeMirror-cursors { - visibility: hidden; - } -} - -/* See issue #2901 */ -.cm-tab-wrap-hack:after { content: ''; } - -/* Help users use markselection to safely style text background */ -span.CodeMirror-selectedtext { background: none; } - -/* - MDN-LIKE Theme - Mozilla - Ported to CodeMirror by Peter Kroon - Report bugs/issues here: https://github.com/codemirror/CodeMirror/issues - GitHub: @peterkroon - - The mdn-like theme is inspired on the displayed code examples at: https://developer.mozilla.org/en-US/docs/Web/CSS/animation - -*/ -.cm-s-mdn-like.CodeMirror { color: #999; background-color: #fff; } -.cm-s-mdn-like div.CodeMirror-selected { background: #cfc; } -.cm-s-mdn-like .CodeMirror-line::selection, .cm-s-mdn-like .CodeMirror-line > span::selection, .cm-s-mdn-like .CodeMirror-line > span > span::selection { background: #cfc; } -.cm-s-mdn-like .CodeMirror-line::-moz-selection, .cm-s-mdn-like .CodeMirror-line > span::-moz-selection, .cm-s-mdn-like .CodeMirror-line > span > span::-moz-selection { background: #cfc; } - -.cm-s-mdn-like .CodeMirror-gutters { background: #f8f8f8; border-left: 6px solid rgba(0,83,159,0); color: #333; } -.cm-s-mdn-like .CodeMirror-linenumber { color: #aaa; padding-left: 8px; } -.cm-s-mdn-like .CodeMirror-cursor { border-left: 2px solid #222; } - -.cm-s-mdn-like .cm-keyword { color: #6262FF; } -.cm-s-mdn-like .cm-atom { color: #F90; } -.cm-s-mdn-like .cm-number { color: #ca7841; } -.cm-s-mdn-like .cm-def { color: #8DA6CE; } -.cm-s-mdn-like span.cm-variable-2, .cm-s-mdn-like span.cm-tag { color: #690; } -.cm-s-mdn-like span.cm-variable-3, .cm-s-mdn-like span.cm-def { color: #07a; } - -.cm-s-mdn-like .cm-variable { color: #07a; } -.cm-s-mdn-like .cm-property { color: #905; } -.cm-s-mdn-like .cm-qualifier { color: #690; } - -.cm-s-mdn-like .cm-operator { color: #cda869; } -.cm-s-mdn-like .cm-comment { color:#777; font-weight:normal; } -.cm-s-mdn-like .cm-string { color:#07a; font-style:italic; } -.cm-s-mdn-like .cm-string-2 { color:#bd6b18; } /*?*/ -.cm-s-mdn-like .cm-meta { color: #000; } /*?*/ -.cm-s-mdn-like .cm-builtin { color: #9B7536; } /*?*/ -.cm-s-mdn-like .cm-tag { color: #997643; } -.cm-s-mdn-like .cm-attribute { color: #d6bb6d; } /*?*/ -.cm-s-mdn-like .cm-header { color: #FF6400; } -.cm-s-mdn-like .cm-hr { color: #AEAEAE; } -.cm-s-mdn-like .cm-link { color:#ad9361; font-style:italic; text-decoration:none; } -.cm-s-mdn-like .cm-error { border-bottom: 1px solid red; } - -div.cm-s-mdn-like .CodeMirror-activeline-background { background: #efefff; } -div.cm-s-mdn-like span.CodeMirror-matchingbracket { outline:1px solid grey; color: inherit; } - -/*.cm-s-mdn-like.CodeMirror { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFcAAAAyCAYAAAAp8UeFAAAHvklEQVR42s2b63bcNgyEQZCSHCdt2vd/0tWF7I+Q6XgMXiTtuvU5Pl57ZQKkKHzEAOtF5KeIJBGJ8uvL599FRFREZhFx8DeXv8trn68RuGaC8TRfo3SNp9dlDDHedyLyTUTeRWStXKPZrjtpZxaRw5hPqozRs1N8/enzIiQRWcCgy4MUA0f+XWliDhyL8Lfyvx7ei/Ae3iQFHyw7U/59pQVIMEEPEz0G7XiwdRjzSfC3UTtz9vchIntxvry5iMgfIhJoEflOz2CQr3F5h/HfeFe+GTdLaKcu9L8LTeQb/R/7GgbsfKedyNdoHsN31uRPWrfZ5wsj/NzzRQHuToIdU3ahwnsKPxXCjJITuOsi7XLc7SG/v5GdALs7wf8JjTFiB5+QvTEfRyGOfX3Lrx8wxyQi3sNq46O7QahQiCsRFgqddjBouVEHOKDgXAQHD9gJCr5sMKkEdjwsarG/ww3BMHBU7OBjXnzdyY7SfCxf5/z6ATccrwlKuwC/jhznnPF4CgVzhhVf4xp2EixcBActO75iZ8/fM9zAs2OMzKdslgXWJ9XG8PQoOAMA5fGcsvORgv0doBXyHrCwfLJAOwo71QLNkb8n2Pl6EWiR7OCibtkPaz4Kc/0NNAze2gju3zOwekALDaCFPI5vjPFmgGY5AZqyGEvH1x7QfIb8YtxMnA/b+QQ0aQDAwc6JMFg8CbQZ4qoYEEHbRwNojuK3EHwd7VALSgq+MNDKzfT58T8qdpADrgW0GmgcAS1lhzztJmkAzcPNOQbsWEALBDSlMKUG0Eq4CLAQWvEVQ9WU57gZJwZtgPO3r9oBTQ9WO8TjqXINx8R0EYpiZEUWOF3FxkbJkgU9B2f41YBrIj5ZfsQa0M5kTgiAAqM3ShXLgu8XMqcrQBvJ0CL5pnTsfMB13oB8athpAq2XOQmcGmoACCLydx7nToa23ATaSIY2ichfOdPTGxlasXMLaL0MLZAOwAKIM+y8CmicobGdCcbbK9DzN+yYGVoNNI5iUKTMyYOjPse4A8SM1MmcXgU0toOq1yO/v8FOxlASyc7TgeYaAMBJHcY1CcCwGI/TK4AmDbDyKYBBtFUkRwto8gygiQEaByFgJ00BH2M8JWwQS1nafDXQCidWyOI8AcjDCSjCLk8ngObuAm3JAHAdubAmOaK06V8MNEsKPJOhobSprwQa6gD7DclRQdqcwL4zxqgBrQcabUiBLclRDKAlWp+etPkBaNMA0AKlrHwTdEByZAA4GM+SNluSY6wAzcMNewxmgig5Ks0nkrSpBvSaQHMdKTBAnLojOdYyGpQ254602ZILPdTD1hdlggdIm74jbTp8vDwF5ZYUeLWGJpWsh6XNyXgcYwVoJQTEhhTYkxzZjiU5npU2TaB979TQehlaAVq4kaGpiPwwwLkYUuBbQwocyQTv1tA0+1UFWoJF3iv1oq+qoSk8EQdJmwHkziIF7oOZk14EGitibAdjLYYK78H5vZOhtWpoI0ATGHs0Q8OMb4Ey+2bU2UYztCtA0wFAs7TplGLRVQCcqaFdGSPCeTI1QNIC52iWNzof6Uib7xjEp07mNNoUYmVosVItHrHzRlLgBn9LFyRHaQCtVUMbtTNhoXWiTOO9k/V8BdAc1Oq0ArSQs6/5SU0hckNy9NnXqQY0PGYo5dWJ7nINaN6o958FWin27aBaWRka1r5myvLOAm0j30eBJqCxHLReVclxhxOEN2JfDWjxBtAC7MIH1fVaGdoOp4qJYDgKtKPSFNID2gSnGldrCqkFZ+5UeQXQBIRrSwocbdZYQT/2LwRahBPBXoHrB8nxaGROST62DKUbQOMMzZIC9abkuELfQzQALWTnDNAm8KHWFOJgJ5+SHIvTPcmx1xQyZRhNL5Qci689aXMEaN/uNIWkEwDAvFpOZmgsBaaGnbs1NPa1Jm32gBZAIh1pCtG7TSH4aE0y1uVY4uqoFPisGlpP2rSA5qTecWn5agK6BzSpgAyD+wFaqhnYoSZ1Vwr8CmlTQbrcO3ZaX0NAEyMbYaAlyquFoLKK3SPby9CeVUPThrSJmkCAE0CrKUQadi4DrdSlWhmah0YL9z9vClH59YGbHx1J8VZTyAjQepJjmXwAKTDQI3omc3p1U4gDUf6RfcdYfrUp5ClAi2J3Ba6UOXGo+K+bQrjjssitG2SJzshaLwMtXgRagUNpYYoVkMSBLM+9GGiJZMvduG6DRZ4qc04DMPtQQxOjEtACmhO7K1AbNbQDEggZyJwscFpAGwENhoBeUwh3bWolhe8BTYVKxQEWrSUn/uhcM5KhvUu/+eQu0Lzhi+VrK0PrZZNDQKs9cpYUuFYgMVpD4/NxenJTiMCNqdUEUf1qZWjppLT5qSkkUZbCwkbZMSuVnu80hfSkzRbQeqCZSAh6huR4VtoM2gHAlLf72smuWgE+VV7XpE25Ab2WFDgyhnSuKbs4GuGzCjR+tIoUuMFg3kgcWKLTwRqanJQ2W00hAsenfaApRC42hbCvK1SlE0HtE9BGgneJO+ELamitD1YjjOYnNYVcraGhtKkW0EqVVeDx733I2NH581k1NNxNLG0i0IJ8/NjVaOZ0tYZ2Vtr0Xv7tPV3hkWp9EFkgS/J0vosngTaSoaG06WHi+xObQkaAdlbanP8B2+2l0f90LmUAAAAASUVORK5CYII=); }*/ - - -/****************************************************************/ -/* Based on mbonaci's Brackets mbo theme */ -/* https://github.com/mbonaci/global/blob/master/Mbo.tmTheme */ -/* Create your own: http://tmtheme-editor.herokuapp.com */ -/****************************************************************/ - -.cm-s-mbo.CodeMirror { background: #2c2c2c; color: #ffffec; } -.cm-s-mbo div.CodeMirror-selected { background: #716C62; } -.cm-s-mbo .CodeMirror-line::selection, .cm-s-mbo .CodeMirror-line > span::selection, .cm-s-mbo .CodeMirror-line > span > span::selection { background: rgba(113, 108, 98, .99); } -.cm-s-mbo .CodeMirror-line::-moz-selection, .cm-s-mbo .CodeMirror-line > span::-moz-selection, .cm-s-mbo .CodeMirror-line > span > span::-moz-selection { background: rgba(113, 108, 98, .99); } -.cm-s-mbo .CodeMirror-gutters { background: #4e4e4e; border-right: 0px; } -.cm-s-mbo .CodeMirror-guttermarker { color: white; } -.cm-s-mbo .CodeMirror-guttermarker-subtle { color: grey; } -.cm-s-mbo .CodeMirror-linenumber { color: #dadada; } -.cm-s-mbo .CodeMirror-cursor { border-left: 1px solid #ffffec; } - -.cm-s-mbo span.cm-comment { color: #95958a; } -.cm-s-mbo span.cm-atom { color: #00a8c6; } -.cm-s-mbo span.cm-number { color: #00a8c6; } - -.cm-s-mbo span.cm-property, .cm-s-mbo span.cm-attribute { color: #9ddfe9; } -.cm-s-mbo span.cm-keyword { color: #ffb928; } -.cm-s-mbo span.cm-string { color: #ffcf6c; } -.cm-s-mbo span.cm-string.cm-property { color: #ffffec; } - -.cm-s-mbo span.cm-variable { color: #ffffec; } -.cm-s-mbo span.cm-variable-2 { color: #00a8c6; } -.cm-s-mbo span.cm-def { color: #ffffec; } -.cm-s-mbo span.cm-bracket { color: #fffffc; font-weight: bold; } -.cm-s-mbo span.cm-tag { color: #9ddfe9; } -.cm-s-mbo span.cm-link { color: #f54b07; } -.cm-s-mbo span.cm-error { border-bottom: #636363; color: #ffffec; } -.cm-s-mbo span.cm-qualifier { color: #ffffec; } - -.cm-s-mbo .CodeMirror-activeline-background { background: #494b41; } -.cm-s-mbo .CodeMirror-matchingbracket { color: #ffb928 !important; } -.cm-s-mbo .CodeMirror-matchingtag { background: rgba(255, 255, 255, .37); } - -.CodeMirror-hints { - position: absolute; - z-index: 10; - overflow: hidden; - list-style: none; - - margin: 0; - padding: 2px; - - -webkit-box-shadow: 2px 3px 5px rgba(0, 0, 0, .2); - -moz-box-shadow: 2px 3px 5px rgba(0, 0, 0, .2); - box-shadow: 2px 3px 5px rgba(0, 0, 0, .2); - border-radius: 3px; - border: 1px solid silver; - - background: white; - font-size: 90%; - font-family: monospace; - text-shadow: none; - - max-height: 20em; - overflow-y: auto; -} - -.CodeMirror-hints::-webkit-scrollbar { - width: 15px; - display: block; -} - -.CodeMirror-hints::-webkit-scrollbar-thumb { - background-color: rgb(218, 215, 215); - border-radius: 5px; - height: 50px; -} - -.CodeMirror-hints::-webkit-scrollbar-track { - background-color: #6b6565; -} - -.CodeMirror-hint { - margin: 0; - padding: 0 4px; - border-radius: 2px; - white-space: pre; - color: black; - cursor: pointer; -} - -li.CodeMirror-hint-active { - background: #08f; - color: white; -} - -.cm-completionIcon { - position: relative; - font-size: 90%; - font-family: monospace; - width: .8em; - display: inline-block; - text-align: center; - padding-right: .6em; - opacity: 0.6; - box-sizing: content-box; -} - -.cm-completionIcon-function:after, -.cm-completionIcon-method:after {content: 'ƒ';} -.cm-completionIcon-class:after {content: '○';} -.cm-completionIcon-interface:after {content: '◌';} -.cm-completionIcon-variable:after {content: '𝑥';} -.cm-completionIcon-constant:after {content: '𝐶';} -.cm-completionIcon-type:after {content: '𝑡';} -.cm-completionIcon-enum:after {content: '∪';} -.cm-completionIcon-property:after {content: '□';} -.cm-completionIcon-keyword:after {content: '🔑︎';} -.cm-completionIcon-namespace:after {content: '▢';} -.cm-completionIcon-text:after {content: 'abc'; font-size: 50%; vertical-align: middle;} \ No newline at end of file +/* BASICS */ + +.CodeMirror { + /* Set height, width, borders, and global font properties here */ + width: 100%; + height: 100%; + color: black; +} +.CodeMirror div { + display: block; + text-shadow: none; + transition: all 0s; + position: static; +} + +/* PADDING */ + +.CodeMirror-lines { + padding: 4px 0; /* Vertical padding around content */ +} +.CodeMirror pre { + padding: 0 4px; /* Horizontal padding of content */ +} + +.CodeMirror-scrollbar-filler, +.CodeMirror-gutter-filler { + background-color: white; /* The little square between H and V scrollbars */ +} + +/* GUTTER */ + +.CodeMirror-gutters { + border-right: 1px solid #ddd; + background-color: #f7f7f7; + white-space: nowrap; +} +.CodeMirror-linenumbers { +} +.CodeMirror-linenumber { + padding: 0 3px 0 5px; + min-width: 20px; + text-align: right; + color: #999; + white-space: nowrap; +} + +.CodeMirror-guttermarker { + color: black; +} +.CodeMirror-guttermarker-subtle { + color: #999; +} + +/* CURSOR */ + +.CodeMirror-cursor { + border-left: 1px solid black; + border-right: none; + width: 0; +} +/* Shown when moving in bi-directional text */ +.CodeMirror div.CodeMirror-secondarycursor { + border-left: 1px solid silver; +} +.cm-fat-cursor .CodeMirror-cursor { + width: auto; + border: 0 !important; + background: #7e7; +} +.cm-fat-cursor div.CodeMirror-cursors { + z-index: 1; +} + +.cm-animate-fat-cursor { + width: auto; + border: 0; + -webkit-animation: blink 1.06s steps(1) infinite; + -moz-animation: blink 1.06s steps(1) infinite; + animation: blink 1.06s steps(1) infinite; + background-color: #7e7; +} +@-moz-keyframes blink { + 0% { + } + 50% { + background-color: transparent; + } + 100% { + } +} +@-webkit-keyframes blink { + 0% { + } + 50% { + background-color: transparent; + } + 100% { + } +} +@keyframes blink { + 0% { + } + 50% { + background-color: transparent; + } + 100% { + } +} + +/* Can style cursor different in overwrite (non-insert) mode */ +.CodeMirror-overwrite .CodeMirror-cursor { +} + +.cm-tab { + display: inline-block; + text-decoration: inherit; +} + +.CodeMirror .CodeMirror-rulers { + position: absolute; + left: 0; + right: 0; + top: -50px; + bottom: -20px; + overflow: hidden; +} +.CodeMirror .CodeMirror-ruler { + border-left: 1px solid #ccc; + top: 0; + bottom: 0; + position: absolute; +} + +/* DEFAULT THEME */ + +.cm-s-default .cm-header { + color: blue; +} +.cm-s-default .cm-quote { + color: #090; +} +.cm-negative { + color: #d44; +} +.cm-positive { + color: #292; +} +.cm-header, +.cm-strong { + font-weight: bold; +} +.cm-em { + font-style: italic; +} +.cm-link { + text-decoration: underline; +} +.cm-strikethrough { + text-decoration: line-through; +} + +.cm-s-default .cm-keyword { + color: #708; +} +.cm-s-default .cm-atom { + color: #219; +} +.cm-s-default .cm-number { + color: #164; +} +.cm-s-default .cm-def { + color: #00f; +} +.cm-s-default .cm-variable, +.cm-s-default .cm-punctuation, +.cm-s-default .cm-property, +.cm-s-default .cm-operator { +} +.cm-s-default .cm-variable-2 { + color: #05a; +} +.cm-s-default .cm-variable-3 { + color: #085; +} +.cm-s-default .cm-comment { + color: #a50; +} +.cm-s-default .cm-string { + color: #a11; +} +.cm-s-default .cm-string-2 { + color: #f50; +} +.cm-s-default .cm-meta { + color: #555; +} +.cm-s-default .cm-qualifier { + color: #555; +} +.cm-s-default .cm-builtin { + color: #30a; +} +.cm-s-default .cm-bracket { + color: #997; +} +.cm-s-default .cm-tag { + color: #170; +} +.cm-s-default .cm-attribute { + color: #00c; +} +.cm-s-default .cm-hr { + color: #999; +} +.cm-s-default .cm-link { + color: #00c; +} + +.cm-s-default .cm-error { + color: #f00; +} +.cm-invalidchar { + color: #f00; +} + +.CodeMirror-composing { + border-bottom: 2px solid; +} + +/* Default styles for common addons */ + +div.CodeMirror span.CodeMirror-matchingbracket { + color: #0f0; +} +div.CodeMirror span.CodeMirror-nonmatchingbracket { + color: #f22; +} +.CodeMirror-matchingtag { + background: rgba(255, 150, 0, 0.3); +} +.CodeMirror-activeline-background { + background: #e8f2ff; +} + +/* STOP */ + +/* The rest of this file contains styles related to the mechanics of + the editor. You probably shouldn't touch them. */ + +.CodeMirror { + position: relative; + overflow: hidden; + background: white; +} + +.CodeMirror .CodeMirror-scroll { + overflow: scroll !important; /* Things will break if this is overridden */ + /* 30px is the magic margin used to hide the element's real scrollbars */ + /* See overflow: hidden in .CodeMirror */ + margin-bottom: -30px; + margin-right: -30px; + padding-bottom: 30px; + height: 100%; + outline: none; /* Prevent dragging from highlighting the element */ + position: relative; +} +.CodeMirror .CodeMirror-sizer { + position: relative; + border-right: 30px solid transparent; +} + +/* The fake, visible scrollbars. Used to force redraw during scrolling + before actual scrolling happens, thus preventing shaking and + flickering artifacts. */ +.CodeMirror .CodeMirror-vscrollbar, +.CodeMirror .CodeMirror-hscrollbar, +.CodeMirror .CodeMirror-scrollbar-filler, +.CodeMirror .CodeMirror-gutter-filler { + position: absolute; + z-index: 6; + display: none; +} +.CodeMirror-vscrollbar { + right: 0; + top: 0; + overflow-x: hidden; + overflow-y: scroll; +} +.CodeMirror-hscrollbar { + bottom: 0; + left: 0; + overflow-y: hidden; + overflow-x: scroll; +} +.CodeMirror-scrollbar-filler { + right: 0; + bottom: 0; +} +.CodeMirror-gutter-filler { + left: 0; + bottom: 0; +} + +.CodeMirror .CodeMirror-gutters { + position: absolute; + left: 0; + top: 0; + min-height: 100%; + z-index: 3; +} +.CodeMirror-gutter { + white-space: normal; + height: 100%; + display: inline-block; + vertical-align: top; + margin-bottom: -30px; + /* Hack to make IE7 behave */ + *zoom: 1; + *display: inline; +} +.CodeMirror .CodeMirror-gutter-wrapper { + position: absolute; + z-index: 4; + background: none !important; + border: none !important; +} +.CodeMirror .CodeMirror-gutter-background { + position: absolute; + top: 0; + bottom: 0; + z-index: 4; +} +.CodeMirror .CodeMirror-gutter-elt { + position: absolute; + cursor: default; + z-index: 4; +} +.CodeMirror-gutter-wrapper { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +.CodeMirror-lines { + cursor: text; + min-height: 1px; /* prevents collapsing before first draw */ +} +.CodeMirror pre { + /* Reset some styles that the rest of the page might have set */ + -moz-border-radius: 0; + -webkit-border-radius: 0; + border-radius: 0; + border-width: 0; + background: transparent; + /*font-family: inherit;*/ + /*font-family:'STHeiti','SimHei','Microsoft JhengHei','Microsoft YaHei','WenQuanYi Micro Hei',Helvetica,Arial,sans-serif;*/ + font-size: inherit; + margin: 0; + white-space: pre; + word-wrap: normal; + line-height: inherit; + color: inherit; + z-index: 2; + position: relative; + overflow: visible; + -webkit-tap-highlight-color: transparent; + -webkit-font-variant-ligatures: none; + font-variant-ligatures: none; +} +.CodeMirror-wrap pre { + word-wrap: break-word; + white-space: pre-wrap; + word-break: normal; +} + +.CodeMirror .CodeMirror-linebackground { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + z-index: 0; +} + +.CodeMirror .CodeMirror-linewidget { + position: relative; + z-index: 2; + overflow: auto; +} + +.CodeMirror-widget { +} + +.CodeMirror-code { + outline: none; +} + +/* Force content-box sizing for the elements where we expect it */ +.CodeMirror-scroll, +.CodeMirror-sizer, +.CodeMirror-gutter, +.CodeMirror-gutters, +.CodeMirror-linenumber { + -moz-box-sizing: content-box; + box-sizing: content-box; +} + +.CodeMirror .CodeMirror-measure { + position: absolute; + width: 100%; + height: 0; + overflow: hidden; + visibility: hidden; +} + +.CodeMirror .CodeMirror-cursor { + position: absolute; + pointer-events: none; +} +.CodeMirror-measure pre { + position: static; +} + +.CodeMirror div.CodeMirror-cursors { + visibility: hidden; + position: relative; + z-index: 3; +} +div.CodeMirror-dragcursors { + visibility: visible; +} + +.CodeMirror-focused div.CodeMirror-cursors { + visibility: visible; +} + +.CodeMirror-selected { + background: #d9d9d9; +} +.CodeMirror-focused .CodeMirror-selected { + background: #d7d4f0; +} +.CodeMirror-crosshair { + cursor: crosshair; +} +.CodeMirror-line::selection, +.CodeMirror-line > span::selection, +.CodeMirror-line > span > span::selection { + background: #d7d4f0; +} +.CodeMirror-line::-moz-selection, +.CodeMirror-line > span::-moz-selection, +.CodeMirror-line > span > span::-moz-selection { + background: #d7d4f0; +} + +.cm-searching { + background: #ffa; + background: rgba(255, 255, 0, 0.4); +} + +/* IE7 hack to prevent it from returning funny offsetTops on the spans */ +.CodeMirror span { + *vertical-align: text-bottom; +} + +/* Used to force a border model for a node */ +.cm-force-border { + padding-right: 0.1px; +} + +@media print { + /* Hide the cursor when printing */ + .CodeMirror div.CodeMirror-cursors { + visibility: hidden; + } +} + +/* See issue #2901 */ +.cm-tab-wrap-hack:after { + content: ""; +} + +/* Help users use markselection to safely style text background */ +span.CodeMirror-selectedtext { + background: none; +} + +/* + MDN-LIKE Theme - Mozilla + Ported to CodeMirror by Peter Kroon + Report bugs/issues here: https://github.com/codemirror/CodeMirror/issues + GitHub: @peterkroon + + The mdn-like theme is inspired on the displayed code examples at: https://developer.mozilla.org/en-US/docs/Web/CSS/animation + +*/ +.cm-s-mdn-like.CodeMirror { + color: #999; + background-color: #fff; +} +.cm-s-mdn-like div.CodeMirror-selected { + background: #cfc; +} +.cm-s-mdn-like .CodeMirror-line::selection, +.cm-s-mdn-like .CodeMirror-line > span::selection, +.cm-s-mdn-like .CodeMirror-line > span > span::selection { + background: #cfc; +} +.cm-s-mdn-like .CodeMirror-line::-moz-selection, +.cm-s-mdn-like .CodeMirror-line > span::-moz-selection, +.cm-s-mdn-like .CodeMirror-line > span > span::-moz-selection { + background: #cfc; +} + +.cm-s-mdn-like .CodeMirror-gutters { + background: #f8f8f8; + border-left: 6px solid rgba(0, 83, 159, 0); + color: #333; +} +.cm-s-mdn-like .CodeMirror-linenumber { + color: #aaa; + padding-left: 8px; +} +.cm-s-mdn-like .CodeMirror-cursor { + border-left: 2px solid #222; +} + +.cm-s-mdn-like .cm-keyword { + color: #6262ff; +} +.cm-s-mdn-like .cm-atom { + color: #f90; +} +.cm-s-mdn-like .cm-number { + color: #ca7841; +} +.cm-s-mdn-like .cm-def { + color: #8da6ce; +} +.cm-s-mdn-like span.cm-variable-2, +.cm-s-mdn-like span.cm-tag { + color: #690; +} +.cm-s-mdn-like span.cm-variable-3, +.cm-s-mdn-like span.cm-def { + color: #07a; +} + +.cm-s-mdn-like .cm-variable { + color: #07a; +} +.cm-s-mdn-like .cm-property { + color: #905; +} +.cm-s-mdn-like .cm-qualifier { + color: #690; +} + +.cm-s-mdn-like .cm-operator { + color: #cda869; +} +.cm-s-mdn-like .cm-comment { + color: #777; + font-weight: normal; +} +.cm-s-mdn-like .cm-string { + color: #07a; + font-style: italic; +} +.cm-s-mdn-like .cm-string-2 { + color: #bd6b18; +} /*?*/ +.cm-s-mdn-like .cm-meta { + color: #000; +} /*?*/ +.cm-s-mdn-like .cm-builtin { + color: #9b7536; +} /*?*/ +.cm-s-mdn-like .cm-tag { + color: #997643; +} +.cm-s-mdn-like .cm-attribute { + color: #d6bb6d; +} /*?*/ +.cm-s-mdn-like .cm-header { + color: #ff6400; +} +.cm-s-mdn-like .cm-hr { + color: #aeaeae; +} +.cm-s-mdn-like .cm-link { + color: #ad9361; + font-style: italic; + text-decoration: none; +} +.cm-s-mdn-like .cm-error { + border-bottom: 1px solid red; +} + +div.cm-s-mdn-like .CodeMirror-activeline-background { + background: #efefff; +} +div.cm-s-mdn-like span.CodeMirror-matchingbracket { + outline: 1px solid grey; + color: inherit; +} + +/*.cm-s-mdn-like.CodeMirror { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFcAAAAyCAYAAAAp8UeFAAAHvklEQVR42s2b63bcNgyEQZCSHCdt2vd/0tWF7I+Q6XgMXiTtuvU5Pl57ZQKkKHzEAOtF5KeIJBGJ8uvL599FRFREZhFx8DeXv8trn68RuGaC8TRfo3SNp9dlDDHedyLyTUTeRWStXKPZrjtpZxaRw5hPqozRs1N8/enzIiQRWcCgy4MUA0f+XWliDhyL8Lfyvx7ei/Ae3iQFHyw7U/59pQVIMEEPEz0G7XiwdRjzSfC3UTtz9vchIntxvry5iMgfIhJoEflOz2CQr3F5h/HfeFe+GTdLaKcu9L8LTeQb/R/7GgbsfKedyNdoHsN31uRPWrfZ5wsj/NzzRQHuToIdU3ahwnsKPxXCjJITuOsi7XLc7SG/v5GdALs7wf8JjTFiB5+QvTEfRyGOfX3Lrx8wxyQi3sNq46O7QahQiCsRFgqddjBouVEHOKDgXAQHD9gJCr5sMKkEdjwsarG/ww3BMHBU7OBjXnzdyY7SfCxf5/z6ATccrwlKuwC/jhznnPF4CgVzhhVf4xp2EixcBActO75iZ8/fM9zAs2OMzKdslgXWJ9XG8PQoOAMA5fGcsvORgv0doBXyHrCwfLJAOwo71QLNkb8n2Pl6EWiR7OCibtkPaz4Kc/0NNAze2gju3zOwekALDaCFPI5vjPFmgGY5AZqyGEvH1x7QfIb8YtxMnA/b+QQ0aQDAwc6JMFg8CbQZ4qoYEEHbRwNojuK3EHwd7VALSgq+MNDKzfT58T8qdpADrgW0GmgcAS1lhzztJmkAzcPNOQbsWEALBDSlMKUG0Eq4CLAQWvEVQ9WU57gZJwZtgPO3r9oBTQ9WO8TjqXINx8R0EYpiZEUWOF3FxkbJkgU9B2f41YBrIj5ZfsQa0M5kTgiAAqM3ShXLgu8XMqcrQBvJ0CL5pnTsfMB13oB8athpAq2XOQmcGmoACCLydx7nToa23ATaSIY2ichfOdPTGxlasXMLaL0MLZAOwAKIM+y8CmicobGdCcbbK9DzN+yYGVoNNI5iUKTMyYOjPse4A8SM1MmcXgU0toOq1yO/v8FOxlASyc7TgeYaAMBJHcY1CcCwGI/TK4AmDbDyKYBBtFUkRwto8gygiQEaByFgJ00BH2M8JWwQS1nafDXQCidWyOI8AcjDCSjCLk8ngObuAm3JAHAdubAmOaK06V8MNEsKPJOhobSprwQa6gD7DclRQdqcwL4zxqgBrQcabUiBLclRDKAlWp+etPkBaNMA0AKlrHwTdEByZAA4GM+SNluSY6wAzcMNewxmgig5Ks0nkrSpBvSaQHMdKTBAnLojOdYyGpQ254602ZILPdTD1hdlggdIm74jbTp8vDwF5ZYUeLWGJpWsh6XNyXgcYwVoJQTEhhTYkxzZjiU5npU2TaB979TQehlaAVq4kaGpiPwwwLkYUuBbQwocyQTv1tA0+1UFWoJF3iv1oq+qoSk8EQdJmwHkziIF7oOZk14EGitibAdjLYYK78H5vZOhtWpoI0ATGHs0Q8OMb4Ey+2bU2UYztCtA0wFAs7TplGLRVQCcqaFdGSPCeTI1QNIC52iWNzof6Uib7xjEp07mNNoUYmVosVItHrHzRlLgBn9LFyRHaQCtVUMbtTNhoXWiTOO9k/V8BdAc1Oq0ArSQs6/5SU0hckNy9NnXqQY0PGYo5dWJ7nINaN6o958FWin27aBaWRka1r5myvLOAm0j30eBJqCxHLReVclxhxOEN2JfDWjxBtAC7MIH1fVaGdoOp4qJYDgKtKPSFNID2gSnGldrCqkFZ+5UeQXQBIRrSwocbdZYQT/2LwRahBPBXoHrB8nxaGROST62DKUbQOMMzZIC9abkuELfQzQALWTnDNAm8KHWFOJgJ5+SHIvTPcmx1xQyZRhNL5Qci689aXMEaN/uNIWkEwDAvFpOZmgsBaaGnbs1NPa1Jm32gBZAIh1pCtG7TSH4aE0y1uVY4uqoFPisGlpP2rSA5qTecWn5agK6BzSpgAyD+wFaqhnYoSZ1Vwr8CmlTQbrcO3ZaX0NAEyMbYaAlyquFoLKK3SPby9CeVUPThrSJmkCAE0CrKUQadi4DrdSlWhmah0YL9z9vClH59YGbHx1J8VZTyAjQepJjmXwAKTDQI3omc3p1U4gDUf6RfcdYfrUp5ClAi2J3Ba6UOXGo+K+bQrjjssitG2SJzshaLwMtXgRagUNpYYoVkMSBLM+9GGiJZMvduG6DRZ4qc04DMPtQQxOjEtACmhO7K1AbNbQDEggZyJwscFpAGwENhoBeUwh3bWolhe8BTYVKxQEWrSUn/uhcM5KhvUu/+eQu0Lzhi+VrK0PrZZNDQKs9cpYUuFYgMVpD4/NxenJTiMCNqdUEUf1qZWjppLT5qSkkUZbCwkbZMSuVnu80hfSkzRbQeqCZSAh6huR4VtoM2gHAlLf72smuWgE+VV7XpE25Ab2WFDgyhnSuKbs4GuGzCjR+tIoUuMFg3kgcWKLTwRqanJQ2W00hAsenfaApRC42hbCvK1SlE0HtE9BGgneJO+ELamitD1YjjOYnNYVcraGhtKkW0EqVVeDx733I2NH581k1NNxNLG0i0IJ8/NjVaOZ0tYZ2Vtr0Xv7tPV3hkWp9EFkgS/J0vosngTaSoaG06WHi+xObQkaAdlbanP8B2+2l0f90LmUAAAAASUVORK5CYII=); }*/ + +/****************************************************************/ +/* Based on mbonaci's Brackets mbo theme */ +/* https://github.com/mbonaci/global/blob/master/Mbo.tmTheme */ +/* Create your own: http://tmtheme-editor.herokuapp.com */ +/****************************************************************/ + +.cm-s-mbo.CodeMirror { + background: #2c2c2c; + color: #ffffec; +} +.cm-s-mbo div.CodeMirror-selected { + background: #716c62; +} +.cm-s-mbo .CodeMirror-line::selection, +.cm-s-mbo .CodeMirror-line > span::selection, +.cm-s-mbo .CodeMirror-line > span > span::selection { + background: rgba(113, 108, 98, 0.99); +} +.cm-s-mbo .CodeMirror-line::-moz-selection, +.cm-s-mbo .CodeMirror-line > span::-moz-selection, +.cm-s-mbo .CodeMirror-line > span > span::-moz-selection { + background: rgba(113, 108, 98, 0.99); +} +.cm-s-mbo .CodeMirror-gutters { + background: #4e4e4e; + border-right: 0px; +} +.cm-s-mbo .CodeMirror-guttermarker { + color: white; +} +.cm-s-mbo .CodeMirror-guttermarker-subtle { + color: grey; +} +.cm-s-mbo .CodeMirror-linenumber { + color: #dadada; +} +.cm-s-mbo .CodeMirror-cursor { + border-left: 1px solid #ffffec; +} + +.cm-s-mbo span.cm-comment { + color: #95958a; +} +.cm-s-mbo span.cm-atom { + color: #00a8c6; +} +.cm-s-mbo span.cm-number { + color: #00a8c6; +} + +.cm-s-mbo span.cm-property, +.cm-s-mbo span.cm-attribute { + color: #9ddfe9; +} +.cm-s-mbo span.cm-keyword { + color: #ffb928; +} +.cm-s-mbo span.cm-string { + color: #ffcf6c; +} +.cm-s-mbo span.cm-string.cm-property { + color: #ffffec; +} + +.cm-s-mbo span.cm-variable { + color: #ffffec; +} +.cm-s-mbo span.cm-variable-2 { + color: #00a8c6; +} +.cm-s-mbo span.cm-def { + color: #ffffec; +} +.cm-s-mbo span.cm-bracket { + color: #fffffc; + font-weight: bold; +} +.cm-s-mbo span.cm-tag { + color: #9ddfe9; +} +.cm-s-mbo span.cm-link { + color: #f54b07; +} +.cm-s-mbo span.cm-error { + border-bottom: #636363; + color: #ffffec; +} +.cm-s-mbo span.cm-qualifier { + color: #ffffec; +} + +.cm-s-mbo .CodeMirror-activeline-background { + background: #494b41; +} +.cm-s-mbo .CodeMirror-matchingbracket { + color: #ffb928 !important; +} +.cm-s-mbo .CodeMirror-matchingtag { + background: rgba(255, 255, 255, 0.37); +} + +.CodeMirror-hints { + position: absolute; + z-index: 10; + overflow: hidden; + list-style: none; + + margin: 0; + padding: 2px; + + -webkit-box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2); + box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2); + border-radius: 3px; + border: 1px solid silver; + + background: white; + font-size: 90%; + font-family: monospace; + text-shadow: none; + + max-height: 20em; + overflow-y: auto; +} + +.CodeMirror-hints::-webkit-scrollbar { + width: 15px; + display: block; +} + +.CodeMirror-hints::-webkit-scrollbar-thumb { + background-color: rgb(218, 215, 215); + border-radius: 5px; + height: 50px; +} + +.CodeMirror-hints::-webkit-scrollbar-track { + background-color: #6b6565; +} + +.CodeMirror-hint { + margin: 0; + padding: 0 4px; + border-radius: 2px; + white-space: pre; + color: black; + cursor: pointer; +} + +li.CodeMirror-hint-active { + background: #08f; + color: white; +} + +.cm-completionIcon { + position: relative; + font-size: 90%; + font-family: monospace; + width: 0.8em; + display: inline-block; + text-align: center; + padding-right: 0.6em; + opacity: 0.6; + box-sizing: content-box; +} + +.cm-completionIcon-function:after, +.cm-completionIcon-method:after { + content: "ƒ"; +} +.cm-completionIcon-class:after { + content: "○"; +} +.cm-completionIcon-interface:after { + content: "◌"; +} +.cm-completionIcon-variable:after { + content: "𝑥"; +} +.cm-completionIcon-constant:after { + content: "𝐶"; +} +.cm-completionIcon-type:after { + content: "𝑡"; +} +.cm-completionIcon-enum:after { + content: "∪"; +} +.cm-completionIcon-property:after { + content: "□"; +} +.cm-completionIcon-keyword:after { + content: "🔑︎"; +} +.cm-completionIcon-namespace:after { + content: "▢"; +} +.cm-completionIcon-text:after { + content: "abc"; + font-size: 50%; + vertical-align: middle; +} diff --git a/layout/default/layout.css b/layout/default/layout.css index ca5abd2e3..fdeafb099 100644 --- a/layout/default/layout.css +++ b/layout/default/layout.css @@ -10,8 +10,8 @@ html { -moz-user-select: none; -webkit-user-select: none; -webkit-font-smoothing: subpixel-antialiased; - -webkit-tap-highlight-color: rgba(0,0,0,0); - background-color: rgb(60,60,60); + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + background-color: rgb(60, 60, 60); } body { @@ -25,7 +25,8 @@ body { overflow: hidden; text-rendering: optimizeLegibility; transform-origin: top left; - font-family: 'STHeiti','SimHei','Microsoft JhengHei','Microsoft YaHei','WenQuanYi Micro Hei','Suits',Helvetica,Arial,sans-serif; + font-family: "STHeiti", "SimHei", "Microsoft JhengHei", "Microsoft YaHei", "WenQuanYi Micro Hei", "Suits", + Helvetica, Arial, sans-serif; } div { @@ -45,119 +46,122 @@ table { top: 0px; left: 0; transition-property: opacity; - overflow: hidden + overflow: hidden; } -#window.connecting>*:not(#system){ +#window.connecting > *:not(#system) { opacity: 0.5; } -.fullsize.connectlayer{ +.fullsize.connectlayer { display: table; text-align: center; z-index: 100; } -.connectlayer>div{ +.connectlayer > div { display: table-cell; vertical-align: middle; font-size: 60px; color: white; text-shadow: black 0 0 2px; position: relative; - font-family: 'xinwei'; + font-family: "xinwei"; transition: all 0.5s; } -#window.server>div:not(.serverinfo){ +#window.server > div:not(.serverinfo) { display: none !important; } -#window.server>.serverinfo{ +#window.server > .serverinfo { width: 400px; height: 200px; - font-family: 'xinwei'; + font-family: "xinwei"; text-align: center; left: calc(50% - 200px); top: calc(50% - 100px); } -#window.server>.serverinfo>div{ +#window.server > .serverinfo > div { position: relative; display: block; font-size: 20px; margin-top: 10px; } -#window.server>.serverinfo>div>div{ +#window.server > .serverinfo > div > div { position: relative; display: inline-block; } -#window.server>.serverinfo>div>div:last-child{ +#window.server > .serverinfo > div > div:last-child { width: 60px; text-align: left; white-space: nowrap; } -#window.server>.serverinfo>div>.menubutton.large:last-child{ +#window.server > .serverinfo > div > .menubutton.large:last-child { width: auto; margin-top: 30px; cursor: pointer; } -#window.server>.serverinfo>div:first-child{ +#window.server > .serverinfo > div:first-child { font-size: 40px; } .statusbar #window { top: 24px; height: calc(100% - 24px); } -#statusbg{ - position:absolute; +#statusbg { + position: absolute; left: 0; top: 0; width: 100%; height: 24px; - background: rgba(0,0,0,0.4); + background: rgba(0, 0, 0, 0.4); display: none; } -.statusbar #statusbg{ +.statusbar #statusbg { display: block; } -#window>.tutorial_tap { +#window > .tutorial_tap { width: 30px; height: 30px; border-radius: 100%; - background: rgba(255,255,255,0.5); - box-shadow: rgba(255,255,255,0.5) 0 0 5px; + background: rgba(255, 255, 255, 0.5); + box-shadow: rgba(255, 255, 255, 0.5) 0 0 5px; left: calc(50% - 15px); top: calc(50% - 15px); position: absolute; transition: all 1s; } -#window.testing>*:not(.pausedbg){ +#window.testing > *:not(.pausedbg) { display: none !important; } -#window.modepaused>div:not(.modenopause):not(#arena):not(.popped) { +#window.modepaused > div:not(.modenopause):not(#arena):not(.popped) { opacity: 0.3; } -#window.modepaused>#arena>#roundmenu { +#window.modepaused > #arena > #roundmenu { opacity: 0.3; } -#window.shortcutpaused>.modeshortcutpause { +#window.shortcutpaused > .modeshortcutpause { opacity: 0.3 !important; } -#window.shortcutpaused.modepaused>.modenopause.popup-container:not(.filter-character) { +#window.shortcutpaused.modepaused > .modenopause.popup-container:not(.filter-character) { opacity: 0.3; } -#window.shortcutpaused>div:not(.background):not(#shortcut):not(#system):not(#arena):not(.hidden):not(.removing):not(.dialog):not(.centermenu):not(.popup-container):not(.forceopaque) { +#window.shortcutpaused + > div:not(.background):not(#shortcut):not(#system):not(#arena):not(.hidden):not(.removing):not( + .dialog + ):not(.centermenu):not(.popup-container):not(.forceopaque) { opacity: 0.3 !important; } -#window.shortcutpaused>#arena>div:not(#timer):not(.removing):not(.hidden):not(#autonode) { +#window.shortcutpaused > #arena > div:not(#timer):not(.removing):not(.hidden):not(#autonode) { opacity: 0.3 !important; } -#window.shortcutpaused>#system { +#window.shortcutpaused > #system { z-index: 31; } -#window.systempaused>#system { +#window.systempaused > #system { opacity: 0.3 !important; } #window.noclick_important * { pointer-events: none !important; } #window.noclick_important .noclick_click_important div { - pointer-events: auto !important + pointer-events: auto !important; } #window.blur_ui #arena.paused, #window.blur_ui #arena.menupaused, @@ -165,8 +169,8 @@ table { #window.blur_ui #historybar.menupaused, #window.blur_ui #arena.unfocus, #window.blur_ui #arena.right, -#window.blur_ui.shortcutpaused>#arena, -#window.blur_ui.shortcutpaused>#historybar { +#window.blur_ui.shortcutpaused > #arena, +#window.blur_ui.shortcutpaused > #historybar { filter: blur(3px); -webkit-filter: blur(3px); } @@ -174,7 +178,7 @@ table { #window.blur_ui #historybar.menupaused { opacity: 0.6; } -#window.blur_ui #arena.thrownhighlight>.card.thrown:not(.thrownhighlight) { +#window.blur_ui #arena.thrownhighlight > .card.thrown:not(.thrownhighlight) { filter: blur(2px); -webkit-filter: blur(2px); } @@ -189,9 +193,9 @@ table { text-align: center; pointer-events: none; display: block; - font-family: 'xinwei' + font-family: "xinwei"; } -#time>div{ +#time > div { margin: 0; padding: 0; display: inline-block; @@ -208,7 +212,7 @@ table { z-index: 10; /*background-color: rgba(0, 0, 0, 0.6);*/ } -#shortcut>div { +#shortcut > div { width: 80px; height: 80px; padding: 10px; @@ -221,7 +225,7 @@ table { letter-spacing: -6px; transform: scale(1.3); } -#shortcut>div:not(.menubutton) { +#shortcut > div:not(.menubutton) { width: 100%; height: 80px; margin: 0; @@ -229,102 +233,102 @@ table { left: 0; top: 0; } -#shortcut>div>span { +#shortcut > div > span { width: 200px; left: -63px; position: relative; display: inline-block; } -#shortcut>div[data-position="1"] { +#shortcut > div[data-position="1"] { left: calc(50% - 50px); top: calc(50% - 190px); } -#shortcut.hidden>div[data-position="1"] { +#shortcut.hidden > div[data-position="1"] { transform: scale(1) translateY(150px); } -#shortcut>div[data-position="2"] { +#shortcut > div[data-position="2"] { left: calc(50% + 100px); top: calc(50% - 40px); } -#shortcut.hidden>div[data-position="2"] { +#shortcut.hidden > div[data-position="2"] { transform: scale(1) translateX(-150px); } -#shortcut>div[data-position="3"] { +#shortcut > div[data-position="3"] { left: calc(50% - 50px); top: calc(50% + 110px); } -#shortcut.hidden>div[data-position="3"] { +#shortcut.hidden > div[data-position="3"] { transform: scale(1) translateY(-150px); } -#shortcut>div[data-position="4"] { +#shortcut > div[data-position="4"] { left: calc(50% - 200px); top: calc(50% - 40px); } -#shortcut.hidden>div[data-position="4"] { +#shortcut.hidden > div[data-position="4"] { transform: scale(1) translateX(150px); } -#shortcut>div[data-position="5"] { +#shortcut > div[data-position="5"] { left: calc(50% - 50px); top: calc(50% - 50px); } -#shortcut>.favmodelist:not(.menubutton){ +#shortcut > .favmodelist:not(.menubutton) { width: 130px; height: 300px; top: calc(50% - 150px); left: calc(50% - 430px); overflow: visible; } -#shortcut>.favmodelist>.menubutton.large{ +#shortcut > .favmodelist > .menubutton.large { display: block; position: absolute; left: 0; letter-spacing: 0; } -#shortcut>.favmodelist>[data-type="even"]{ +#shortcut > .favmodelist > [data-type="even"] { top: calc(50% - 45px); } -#shortcut>.favmodelist>[data-type="odd"]{ +#shortcut > .favmodelist > [data-type="odd"] { top: calc(50% - 20px); } -#shortcut>.favmodelist>[data-position="0"]{ +#shortcut > .favmodelist > [data-position="0"] { transition-duration: 0.5s; } -#shortcut.hidden>.favmodelist>[data-position="0"]{ +#shortcut.hidden > .favmodelist > [data-position="0"] { transform: translateX(-140px); } -#shortcut>.favmodelist>[data-position="1"]{ +#shortcut > .favmodelist > [data-position="1"] { transition-duration: 0.6s; transform: translateY(50px); } -#shortcut.hidden>.favmodelist>[data-position="1"]{ +#shortcut.hidden > .favmodelist > [data-position="1"] { transform: translateY(50px) translateX(-150px); } -#shortcut>.favmodelist>[data-position="2"]{ +#shortcut > .favmodelist > [data-position="2"] { transition-duration: 0.4s; transform: translateY(-50px); } -#shortcut.hidden>.favmodelist>[data-position="2"]{ +#shortcut.hidden > .favmodelist > [data-position="2"] { transform: translateY(-50px) translateX(-130px); } -#shortcut>.favmodelist>[data-position="3"]{ +#shortcut > .favmodelist > [data-position="3"] { transition-duration: 0.7s; transform: translateY(100px); } -#shortcut.hidden>.favmodelist>[data-position="3"]{ +#shortcut.hidden > .favmodelist > [data-position="3"] { transform: translateY(100px) translateX(-160px); } -#shortcut>.favmodelist>[data-position="4"]{ +#shortcut > .favmodelist > [data-position="4"] { transition-duration: 0.3s; transform: translateY(-100px); } -#shortcut.hidden>.favmodelist>[data-position="4"]{ +#shortcut.hidden > .favmodelist > [data-position="4"] { transform: translateY(-100px) translateX(-120px); } -#shortcut>.favmodelist>[data-position="5"]{ +#shortcut > .favmodelist > [data-position="5"] { transition-duration: 0.8s; transform: translateY(150px); } -#shortcut.hidden>.favmodelist>[data-position="5"]{ +#shortcut.hidden > .favmodelist > [data-position="5"] { transform: translateY(150px) translateX(-170px); } #shortcut.hidden { @@ -347,7 +351,7 @@ table { #splash.removing { pointer-events: none; } -#splash>div { +#splash > div { width: 100px; height: 300px; top: calc(50% - 150px); @@ -357,31 +361,31 @@ table { transition: all 0.8s; cursor: pointer; } -#splash>div:first-child { +#splash > div:first-child { margin-left: 20px; } -#splash>div:last-child { +#splash > div:last-child { margin-right: 20px; } -#splash:not(.touch)>div:hover:not(.clicked) { +#splash:not(.touch) > div:hover:not(.clicked) { transform: translateY(-20px); } -#splash>div.clicked { +#splash > div.clicked { transform: translateY(-20px) scale(1.5); transition: all 0.3s; opacity: 0; } -#splash>div.hidden { +#splash > div.hidden { transform: translateY(-300px) scale(0.5); } -#splash.low_performance>div.hidden { +#splash.low_performance > div.hidden { transform: scale(0.8); } -#splash.low_performance>div { +#splash.low_performance > div { transition: all 0.5s; } -#splash>div>.splashtext { - font-family: 'huangcao','xinwei'; +#splash > div > .splashtext { + font-family: "huangcao", "xinwei"; font-size: 50px; position: absolute; right: 7px; @@ -391,7 +395,7 @@ table { writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; } -#splash>div>.avatar { +#splash > div > .avatar { width: 86px; height: calc(100% - 14px); left: 7px; @@ -399,70 +403,70 @@ table { background-size: cover; } -#splash.slim>div>.splashtext{ +#splash.slim > div > .splashtext { right: 5px; bottom: 5px; } -#splash.slim>div>.avatar{ +#splash.slim > div > .avatar { width: 90px; height: calc(100% - 10px); left: 5px; top: 5px; } -#splash[data-radius_size='reduce']>div>div, -#splash[data-radius_size='reduce']>div { +#splash[data-radius_size="reduce"] > div > div, +#splash[data-radius_size="reduce"] > div { border-radius: 4px; } -#splash[data-radius_size='off']>div>div, -#splash[data-radius_size='off']>div { +#splash[data-radius_size="off"] > div > div, +#splash[data-radius_size="off"] > div { border-radius: 0px; } -#splash[data-radius_size='increase']>div>div, -#splash[data-radius_size='increase']>div { +#splash[data-radius_size="increase"] > div > div, +#splash[data-radius_size="increase"] > div { border-radius: 12px; } /* 启动页style2 */ -#splash[data-splash_style='style2']>div { +#splash[data-splash_style="style2"] > div { width: 250px; height: 350px; top: calc(50% - 175px); } -#splash[data-splash_style='style2']>div:first-child { +#splash[data-splash_style="style2"] > div:first-child { margin-left: 15px; } -#splash[data-splash_style='style2']>div:last-child { +#splash[data-splash_style="style2"] > div:last-child { margin-right: 15px; } -#splash[data-splash_style='style2']>div>.splashtext { - font-family: 'shousha'; +#splash[data-splash_style="style2"] > div > .splashtext { + font-family: "shousha"; font-size: 65px; } -#splash[data-splash_style='style2'].slim>div>.splashtext { +#splash[data-splash_style="style2"].slim > div > .splashtext { right: 10px; bottom: 5px; } -#splash[data-splash_style='style2'].slim>div>.avatar { +#splash[data-splash_style="style2"].slim > div > .avatar { width: 240px; } -#arena.playerhidden>.player, -#arena.playerhidden>#mebg, -#arena.markhidden>.player>.marks { +#arena.playerhidden > .player, +#arena.playerhidden > #mebg, +#arena.markhidden > .player > .marks { visibility: hidden; opacity: 0; } -#arena.chess>#arenalog { +#arena.chess > #arenalog { display: none !important; } -#arena.observe .handcards>.card>div { +#arena.observe .handcards > .card > div { opacity: 0 !important; } -#arena.hide_name .player>.name:not(.name_seat), -#arena.hide_name .player>.name2, -#arena.hide_name>.dialog .button.character>.name{ +#arena.hide_name .player > .name:not(.name_seat), +#arena.hide_name .player > .name2, +#arena.hide_name > .dialog .button.character > .name { display: none !important; } #arenalog { @@ -475,32 +479,32 @@ table { #arenalog.withdialog { opacity: 0.5; } -#arena:not(.oldlayout)>#arenalog[data-position="center"] { +#arena:not(.oldlayout) > #arenalog[data-position="center"] { left: calc(25% + 105px); } -#arena:not(.oldlayout)>#arenalog[data-position="left"] { +#arena:not(.oldlayout) > #arenalog[data-position="left"] { left: 150px; } -#arena.oldlayout>#arenalog { +#arena.oldlayout > #arenalog { top: 160px; width: calc(50% - 300px); height: calc(100% - 325px); } -#arena.oldlayout>#arenalog[data-position="center"] { +#arena.oldlayout > #arenalog[data-position="center"] { left: calc(25% + 150px); } -#arena.oldlayout>#arenalog[data-position="left"] { +#arena.oldlayout > #arenalog[data-position="left"] { left: 240px; } -#arenalog>div { +#arenalog > div { position: relative; display: block; width: calc(100% - 20px); left: 20px; line-height: 18px; } -#window:not(.low_performance) #arena #arenalog>div { +#window:not(.low_performance) #arena #arenalog > div { animation: game_start 0.5s; -webkit-animation: game_start 0.5s; } @@ -521,7 +525,7 @@ table { height: 90%; top: calc(5% + 10px); left: 3%; - transition-property: opacity + transition-property: opacity; } #arena.right:not(.noleft) { left: 240px; @@ -541,36 +545,38 @@ table { #arena.top { top: -100%; } -#arena.paused,#arena.unfocus,#historybar.paused { +#arena.paused, +#arena.unfocus, +#historybar.paused { opacity: 0.3 !important; } #arena.paused2 { opacity: 0.1 !important; } -#arena>.poplayer, -#window>.poplayer { +#arena > .poplayer, +#window > .poplayer { width: 100%; height: 100%; position: absolute; left: 0; top: 0; - z-index: 20 + z-index: 20; } -#arena.only_dialog>div:not(.dialog):not(#control) { +#arena.only_dialog > div:not(.dialog):not(#control) { opacity: 0 !important; pointer-events: none !important; } -#arena>canvas { +#arena > canvas { z-index: 10; pointer-events: none; position: absolute; } -#arena.playerfocus>div:not(#timer):not(.playerfocus):not(#chess-container):not(.removing):not(#autonode) { +#arena.playerfocus > div:not(#timer):not(.playerfocus):not(#chess-container):not(.removing):not(#autonode) { opacity: 0.3 !important; } -#arena.playerfocus #chess>div:not(.playerfocus):not(.removing) { +#arena.playerfocus #chess > div:not(.playerfocus):not(.removing) { opacity: 0.3 !important; } @@ -584,12 +590,12 @@ table { opacity: 0; overflow: hidden; z-index: 2; - transition-property: opacity,visibility; + transition-property: opacity, visibility; } #historybar.hidden { pointer-events: none; } -#historybar>div { +#historybar > div { width: 42px; height: 42px; margin: 0; @@ -597,7 +603,7 @@ table { display: block; position: absolute; } -#historybar>div>.card { +#historybar > div > .card { transform: scale(0.403846); transform-origin: top left; margin: 0; @@ -605,7 +611,7 @@ table { top: 4px; position: absolute; } -#historybar>div>.avatar { +#historybar > div > .avatar { padding: 0; margin: 0; position: absolute; @@ -615,35 +621,35 @@ table { height: 42px; border-radius: 3.230768px; } -#historybar>div>.avatar>div { +#historybar > div > .avatar > div { position: absolute; margin: 0; padding: 0; left: 0; bottom: 2px; height: auto; - font-family: 'xinwei'; + font-family: "xinwei"; font-size: 18px; text-align: center; width: 100%; } -#historybar>div>.avatar>.avatarbg { +#historybar > div > .avatar > .avatarbg { bottom: 0; height: 100%; background-size: cover; } -#historybar>div>.avatar2 { +#historybar > div > .avatar2 { width: 20px; height: 20px; left: 28px; top: 28px; border-radius: 100%; - font-family: 'xinwei'; + font-family: "xinwei"; font-size: 20px; line-height: 20px; z-index: 1; } -#historybar>div>.avatar2.avatar3{ +#historybar > div > .avatar2.avatar3 { left: 12px; top: 31px; transform: scale(0.7); @@ -661,8 +667,8 @@ table { visibility: visible; } -.dialog .button.character.cardbg>.avatar_name { - font-family: 'xinwei'; +.dialog .button.character.cardbg > .avatar_name { + font-family: "xinwei"; font-size: 20px; width: 100%; height: 20px; @@ -677,41 +683,41 @@ table { .player.linked:not(.treasure).playerfocus { transform: scale(1.1) rotate(-90deg); } -.player.connect>div:not(.avatar):not(.name):not(.nameol):not(.hp):not(.room):not(.gaming):not(.identity) { +.player.connect > div:not(.avatar):not(.name):not(.nameol):not(.hp):not(.room):not(.gaming):not(.identity) { display: none !important; } -.player.connect>.gaming { +.player.connect > .gaming { left: 16px; top: auto; bottom: 16px; - font-family: 'xinwei' + font-family: "xinwei"; } -.player.connect[data-cursor_style="forbidden"]{ +.player.connect[data-cursor_style="forbidden"] { opacity: 0.5; } -#arena #me>div>div>.card { +#arena #me > div > div > .card { position: absolute; left: 8px; } -.touchinfo{ +.touchinfo { padding: 6px; position: absolute; color: white; text-shadow: black 0 0 2px; top: 0; margin: 0; - font-family: 'xinwei' + font-family: "xinwei"; } -.touchinfo.left{ +.touchinfo.left { left: 0; } -.touchinfo.right{ +.touchinfo.right { left: auto; right: 0; text-align: right; } -#window.touchinfohidden>.touchinfo{ +#window.touchinfohidden > .touchinfo { opacity: 0; } @@ -731,7 +737,7 @@ table { #arena:not(.phone) #roundmenu { display: none !important; } -#roundmenu>div { +#roundmenu > div { width: 26px; height: 4px; background: white; @@ -740,35 +746,35 @@ table { border-radius: 2px; box-shadow: black 0 0 2px; } -#roundmenu.clock>div:nth-of-type(1) { +#roundmenu.clock > div:nth-of-type(1) { width: 2px; height: 2px; left: 24px; top: 2px; opacity: 1; } -#roundmenu.clock>div:nth-of-type(2) { +#roundmenu.clock > div:nth-of-type(2) { width: 2px; height: 2px; left: 24px; top: 46px; opacity: 1; } -#roundmenu.clock>div:nth-of-type(3) { +#roundmenu.clock > div:nth-of-type(3) { width: 2px; height: 2px; top: 24px; left: 2px; opacity: 1; } -#roundmenu.clock>div:nth-of-type(4) { +#roundmenu.clock > div:nth-of-type(4) { width: 2px; height: 2px; top: 24px; left: 46px; opacity: 1; } -#roundmenu.clock>div:nth-of-type(5) { +#roundmenu.clock > div:nth-of-type(5) { width: 2px; height: 2px; left: 24px; @@ -777,7 +783,7 @@ table { transform: rotate(30deg); transform-origin: 1px 23px; } -#roundmenu.clock>div:nth-of-type(9) { +#roundmenu.clock > div:nth-of-type(9) { width: 2px; height: 2px; left: 24px; @@ -786,7 +792,7 @@ table { transform: rotate(60deg); transform-origin: 1px 23px; } -#roundmenu.clock>div:nth-of-type(6) { +#roundmenu.clock > div:nth-of-type(6) { width: 2px; height: 2px; left: 24px; @@ -795,7 +801,7 @@ table { transform: rotate(30deg); transform-origin: 1px -23px; } -#roundmenu.clock>div:nth-of-type(10) { +#roundmenu.clock > div:nth-of-type(10) { width: 2px; height: 2px; left: 24px; @@ -804,7 +810,7 @@ table { transform: rotate(60deg); transform-origin: 1px -23px; } -#roundmenu.clock>div:nth-of-type(7) { +#roundmenu.clock > div:nth-of-type(7) { width: 2px; height: 2px; top: 24px; @@ -813,7 +819,7 @@ table { transform: rotate(30deg); transform-origin: 23px 1px; } -#roundmenu.clock>div:nth-of-type(11) { +#roundmenu.clock > div:nth-of-type(11) { width: 2px; height: 2px; top: 24px; @@ -822,7 +828,7 @@ table { transform: rotate(60deg); transform-origin: 23px 1px; } -#roundmenu.clock>div:nth-of-type(8) { +#roundmenu.clock > div:nth-of-type(8) { width: 2px; height: 2px; top: 24px; @@ -831,7 +837,7 @@ table { transform: rotate(30deg); transform-origin: -23px 1px; } -#roundmenu.clock>div:nth-of-type(12) { +#roundmenu.clock > div:nth-of-type(12) { width: 2px; height: 2px; top: 24px; @@ -840,7 +846,7 @@ table { transform: rotate(60deg); transform-origin: -23px 1px; } -#roundmenu.clock>div:nth-of-type(13) { +#roundmenu.clock > div:nth-of-type(13) { width: 22px; height: 2px; top: 24px; @@ -848,7 +854,7 @@ table { transform-origin: 1px 1px; border-radius: 4px 40px 40px 4px/4px 4px 4px 4px; } -#roundmenu.clock>div:nth-of-type(14) { +#roundmenu.clock > div:nth-of-type(14) { width: 16px; height: 4px; top: 23px; @@ -856,7 +862,7 @@ table { transform-origin: 2px 2px; border-radius: 4px 23px 23px 4px/4px 4px 4px 4px; } -#roundmenu.clock>div:nth-of-type(15) { +#roundmenu.clock > div:nth-of-type(15) { width: 80%; height: 80%; left: 10%; @@ -868,80 +874,81 @@ table { opacity: 0; } -#roundmenu.clock[data-watchface="simple"]>div:nth-of-type(1), -#roundmenu.clock[data-watchface="simple"]>div:nth-of-type(2), -#roundmenu.clock[data-watchface="simple"]>div:nth-of-type(3), -#roundmenu.clock[data-watchface="simple"]>div:nth-of-type(4), -#roundmenu.clock[data-watchface="simple"]>div:nth-of-type(5), -#roundmenu.clock[data-watchface="simple"]>div:nth-of-type(6), -#roundmenu.clock[data-watchface="simple"]>div:nth-of-type(7), -#roundmenu.clock[data-watchface="simple"]>div:nth-of-type(8), -#roundmenu.clock[data-watchface="simple"]>div:nth-of-type(9), -#roundmenu.clock[data-watchface="simple"]>div:nth-of-type(10), -#roundmenu.clock[data-watchface="simple"]>div:nth-of-type(11), -#roundmenu.clock[data-watchface="simple"]>div:nth-of-type(12) { +#roundmenu.clock[data-watchface="simple"] > div:nth-of-type(1), +#roundmenu.clock[data-watchface="simple"] > div:nth-of-type(2), +#roundmenu.clock[data-watchface="simple"] > div:nth-of-type(3), +#roundmenu.clock[data-watchface="simple"] > div:nth-of-type(4), +#roundmenu.clock[data-watchface="simple"] > div:nth-of-type(5), +#roundmenu.clock[data-watchface="simple"] > div:nth-of-type(6), +#roundmenu.clock[data-watchface="simple"] > div:nth-of-type(7), +#roundmenu.clock[data-watchface="simple"] > div:nth-of-type(8), +#roundmenu.clock[data-watchface="simple"] > div:nth-of-type(9), +#roundmenu.clock[data-watchface="simple"] > div:nth-of-type(10), +#roundmenu.clock[data-watchface="simple"] > div:nth-of-type(11), +#roundmenu.clock[data-watchface="simple"] > div:nth-of-type(12) { opacity: 0; } -#roundmenu.clock[data-watchface="simple"]>div:nth-of-type(15) { +#roundmenu.clock[data-watchface="simple"] > div:nth-of-type(15) { opacity: 1; } -#roundmenu:not(.clock)>div:nth-of-type(even) { +#roundmenu:not(.clock) > div:nth-of-type(even) { width: 20px; left: 18px; } -#roundmenu:not(.clock)>div:nth-of-type(odd) { +#roundmenu:not(.clock) > div:nth-of-type(odd) { width: 4px; } -#roundmenu:not(.clock)>div:nth-of-type(1), -#roundmenu:not(.clock)>div:nth-of-type(2) { +#roundmenu:not(.clock) > div:nth-of-type(1), +#roundmenu:not(.clock) > div:nth-of-type(2) { top: 14px; } -#roundmenu:not(.clock)>div:nth-of-type(3), -#roundmenu:not(.clock)>div:nth-of-type(4) { +#roundmenu:not(.clock) > div:nth-of-type(3), +#roundmenu:not(.clock) > div:nth-of-type(4) { top: 23px; } -#roundmenu:not(.clock)>div:nth-of-type(5), -#roundmenu:not(.clock)>div:nth-of-type(6) { +#roundmenu:not(.clock) > div:nth-of-type(5), +#roundmenu:not(.clock) > div:nth-of-type(6) { top: 32px; transform: none !important; } -#roundmenu:not(.clock)>div:nth-of-type(7), -#roundmenu:not(.clock)>div:nth-of-type(8), -#roundmenu:not(.clock)>div:nth-of-type(9), -#roundmenu:not(.clock)>div:nth-of-type(10), -#roundmenu:not(.clock)>div:nth-of-type(11), -#roundmenu:not(.clock)>div:nth-of-type(12), -#roundmenu:not(.clock)>div:nth-of-type(13), -#roundmenu:not(.clock)>div:nth-of-type(14), -#roundmenu:not(.clock)>div:nth-of-type(15) { +#roundmenu:not(.clock) > div:nth-of-type(7), +#roundmenu:not(.clock) > div:nth-of-type(8), +#roundmenu:not(.clock) > div:nth-of-type(9), +#roundmenu:not(.clock) > div:nth-of-type(10), +#roundmenu:not(.clock) > div:nth-of-type(11), +#roundmenu:not(.clock) > div:nth-of-type(12), +#roundmenu:not(.clock) > div:nth-of-type(13), +#roundmenu:not(.clock) > div:nth-of-type(14), +#roundmenu:not(.clock) > div:nth-of-type(15) { opacity: 0; } .linexy { pointer-events: none; - transition-property: transform,opacity; + transition-property: transform, opacity; width: 3px; border-radius: 4px; z-index: 4; - box-shadow: rgba(0,0,0,0.5) 0 0 2px; + box-shadow: rgba(0, 0, 0, 0.5) 0 0 2px; transform-origin: top center; } -.linexy.drag{ +.linexy.drag { transition-property: none !important; } -#me,#mebg { +#me, +#mebg { width: 100%; height: 140px; top: calc(100% - 140px); left: 0; } #mebg { - z-index: -1 + z-index: -1; } #autonode { z-index: 10; @@ -952,41 +959,44 @@ table { display: table; text-align: center; font-size: 60px; - font-family: 'xinwei'; - text-shadow: black 0 0 10px + font-family: "xinwei"; + text-shadow: black 0 0 10px; } -#arena:not(.chess):not(.mobile)>#autonode { - display: none +#arena:not(.chess):not(.mobile) > #autonode { + display: none; } -#arena:not(.auto)>#autonode, +#arena:not(.auto) > #autonode, #autonode.hidden { opacity: 0; pointer-events: none; } -#arena.auto #me .handcards{ - opacity: 0.5 +#arena.auto #me .handcards { + opacity: 0.5; } -#autonode>div { +#autonode > div { display: table-cell; vertical-align: middle; - position: relative + position: relative; } -#handcards1,#handcards2 { +#handcards1, +#handcards2 { width: calc(50% - 140px); height: 127px; padding: 10px; text-align: left; } -#handcards1,#handcards2 { +#handcards1, +#handcards2 { white-space: nowrap; overflow-x: visible; overflow-y: visible; display: block; } -#handcards1.scrollh,#handcards2.scrollh { +#handcards1.scrollh, +#handcards2.scrollh { overflow-x: scroll; - overflow-y: hidden + overflow-y: hidden; } #handcards1 { left: 0; @@ -997,15 +1007,15 @@ table { top: calc(100% - 140px); } -#arena #handcards1>div, -#arena #handcards2>div { +#arena #handcards1 > div, +#arena #handcards2 > div { height: 100%; position: relative; margin-left: 2px; margin-right: 10px; } -#arena:not(.mobile):not(.single-handcard):not(.chess) #handcards1>div, -#arena:not(.mobile):not(.single-handcard):not(.chess) #handcards2>div { +#arena:not(.mobile):not(.single-handcard):not(.chess) #handcards1 > div, +#arena:not(.mobile):not(.single-handcard):not(.chess) #handcards2 > div { left: -10px; } #arena.single-handcard #handcards1 { @@ -1027,20 +1037,20 @@ table { pointer-events: none; transition-property: opacity; } -#system>div { +#system > div { height: 100%; position: relative; margin: 0; padding: 0; } -#system>div>div { - pointer-events: auto +#system > div > div { + pointer-events: auto; } -#system>div:last-child { +#system > div:last-child { text-align: right; - float: right + float: right; } -#system>div>div { +#system > div > div { position: relative; padding-top: 6px; padding-bottom: 6px; @@ -1048,7 +1058,7 @@ table { padding-right: 8px; text-align: center; margin: 4px; - transition: all 0.1s + transition: all 0.1s; } .pausedbg { @@ -1058,12 +1068,13 @@ table { height: 100%; z-index: 5; } -.pausedbg>div:first-child { +.pausedbg > div:first-child { font-size: 30px; top: calc(50% - 17px); left: calc(50% - 45px); } -#sidebar,#sidebar3 { +#sidebar, +#sidebar3 { left: 0; top: 0; width: 200px; @@ -1074,9 +1085,10 @@ table { z-index: 6; } #sidebar3 { - text-align: right + text-align: right; } -.pausedbg>#sidebar.right,#sidebar3 { +.pausedbg > #sidebar.right, +#sidebar3 { left: calc(100% - 240px); } #sidebar3.left { @@ -1091,29 +1103,29 @@ table { width: 100%; padding-bottom: 10px; } -.dialog .poppedpile>div { +.dialog .poppedpile > div { display: block; position: relative; } -.dialog.character>.content-container { +.dialog.character > .content-container { width: calc(100% - 136px); left: 136px; } -.dialog.character>.packnode { +.dialog.character > .packnode { width: 136px; left: 0; height: 100%; position: absolute; overflow: scroll; } -.dialog.choose-character>.content-container { +.dialog.choose-character > .content-container { width: calc(100% - 106px); left: 106px; } -.dialog.choose-character>.packnode { +.dialog.choose-character > .packnode { width: 106px; } -.dialog.character>.packnode>div { +.dialog.character > .packnode > div { /*box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1px, rgba(0, 0, 0, 0.2) 0 3px 10px; background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)); border-radius: 4px; @@ -1130,21 +1142,22 @@ table { white-space: nowrap; position: relative; } -.dialog.character>.packnode>div:last-child { +.dialog.character > .packnode > div:last-child { margin-bottom: 9px; } -.dialog.popped .caption>.text>ul>li:not(*:last-child){ +.dialog.popped .caption > .text > ul > li:not(*:last-child) { margin-bottom: 8px; } -.dialog.popped .caption>.caption>div>.skillinfo:not(*:last-child){ +.dialog.popped .caption > .caption > div > .skillinfo:not(*:last-child) { margin-bottom: 8px; } -.skillversion{ +.skillversion { padding-bottom: 5px; } -#sidebar>div,#sidebar3>div { +#sidebar > div, +#sidebar3 > div { margin: 10px; position: relative; display: block; @@ -1167,17 +1180,17 @@ table { height: 140px; } -body>.background.paused { +body > .background.paused { filter: blur(3px); -webkit-filter: blur(3px); } -body>.background { - z-index: -5 +body > .background { + z-index: -5; } -body>.background.upper { - z-index: -4 +body > .background.upper { + z-index: -4; } -body>.background.land { +body > .background.land { background-position: center; background-size: cover; transition: all 2s; @@ -1189,12 +1202,13 @@ body>.background.land { .forcehide { display: none !important; } -.removing,.hidden { +.removing, +.hidden { opacity: 0 !important; pointer-events: none; } -#system>div>div.hidden { +#system > div > div.hidden { opacity: 0.5 !important; } .opaque { @@ -1263,7 +1277,7 @@ body>.background.land { } .button.buttonclick { animation: buttonclick 0.8s; - -webkit-animation: buttonclick 0.8s + -webkit-animation: buttonclick 0.8s; } .background { width: 100%; @@ -1283,11 +1297,14 @@ body>.background.land { padding: 0; display: inline-block !important; } -.background,.button,.avatar,.avatar2 { - transition-property: top,box-shadow,opacity,transform; +.background, +.button, +.avatar, +.avatar2 { + transition-property: top, box-shadow, opacity, transform; transition-duration: 0.5s; } -.fullsize{ +.fullsize { width: 100%; height: 100%; left: 0; @@ -1308,7 +1325,7 @@ body>.background.land { top: auto; margin: 0; } -#arena:not(.mobile)>#systembutton { +#arena:not(.mobile) > #systembutton { display: none !important; } /*--------卡牌--------*/ @@ -1321,28 +1338,28 @@ body>.background.land { position: relative; /*overflow: hidden;*/ } -.card>.info { +.card > .info { top: 5.2px; right: 7px; white-space: nowrap; word-spacing: -0.1em; } -.card>.range { +.card > .range { bottom: 5px; right: 5px; text-align: right; - text-shadow: rgba(213, 194, 179,1) 0 0 3px,rgba(213, 194, 179,1) 0 0 3px,rgba(213, 194, 179,1) 0 0 3px, - rgba(213, 194, 179,1) 0 0 3px,black 0 0 3px; + text-shadow: rgba(213, 194, 179, 1) 0 0 3px, rgba(213, 194, 179, 1) 0 0 3px, + rgba(213, 194, 179, 1) 0 0 3px, rgba(213, 194, 179, 1) 0 0 3px, black 0 0 3px; } -.card>.gaintag { +.card > .gaintag { bottom: 5px; left: 5px; text-align: left; color: white; - text-shadow: rgba(255, 120, 0,1) 0 0 2px,rgba(255, 120, 0,1) 0 0 2px,rgba(255, 120, 0,1) 0 0 2px, - rgba(255, 120, 0,1) 0 0 2px,black 0 0 1px; + text-shadow: rgba(255, 120, 0, 1) 0 0 2px, rgba(255, 120, 0, 1) 0 0 2px, rgba(255, 120, 0, 1) 0 0 2px, + rgba(255, 120, 0, 1) 0 0 2px, black 0 0 1px; } -.card>.name { +.card > .name { top: 9px; left: 6px; text-align: center; @@ -1350,20 +1367,20 @@ body>.background.land { writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; } -.card.fullimage>.name.long { +.card.fullimage > .name.long { top: 6px; } -.card>.name2 { +.card > .name2 { display: none; } -.card>.intro { +.card > .intro { top: 85px; right: 0; } -.card.fullborder>.name{ - font-family: 'xinwei'; +.card.fullborder > .name { + font-family: "xinwei"; } -.card>.cardframebg{ +.card > .cardframebg { width: 100%; height: 100%; left: 0; @@ -1372,31 +1389,31 @@ body>.background.land { background-size: 100% 100%; border-radius: 8px; } -#window[data-radius_size='reduce'] .card>.cardframebg{ +#window[data-radius_size="reduce"] .card > .cardframebg { border-radius: 4px; } -#window[data-radius_size='increase'] .card>.cardframebg{ +#window[data-radius_size="increase"] .card > .cardframebg { border-radius: 16px; } -#window[data-radius_size='off'] .card>.cardframebg{ +#window[data-radius_size="off"] .card > .cardframebg { border-radius: 0; } -.card>.cardframebg[data-auto='gold']{ - background-image:url('../../theme/style/card/image/border_gold.jpg'); +.card > .cardframebg[data-auto="gold"] { + background-image: url("../../theme/style/card/image/border_gold.jpg"); } -.card>.cardframebg[data-auto='silver']{ - background-image:url('../../theme/style/card/image/border_silver.jpg'); +.card > .cardframebg[data-auto="silver"] { + background-image: url("../../theme/style/card/image/border_silver.jpg"); } -.card>.cardframebg[data-auto='bronze']{ - background-image:url('../../theme/style/card/image/border_bronze.jpg'); +.card > .cardframebg[data-auto="bronze"] { + background-image: url("../../theme/style/card/image/border_bronze.jpg"); } -.card>.cardframebg[data-auto='wood']{ - background-image:url('../../theme/style/card/image/border_wood.jpg'); +.card > .cardframebg[data-auto="wood"] { + background-image: url("../../theme/style/card/image/border_wood.jpg"); } -.card>.cardframebg[data-auto='map']{ - background-image:url('../../theme/style/card/image/border_map.jpg'); +.card > .cardframebg[data-auto="map"] { + background-image: url("../../theme/style/card/image/border_map.jpg"); } -.card>.cardavatar{ +.card > .cardavatar { width: calc(100% - 6px); height: calc(100% - 6px); left: 3px; @@ -1407,37 +1424,37 @@ body>.background.land { box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px inset, rgba(0, 0, 0, 0.45) 0 0 10px inset; } -#window[data-radius_size='reduce'] .card>.cardavatar { +#window[data-radius_size="reduce"] .card > .cardavatar { border-radius: 3px; } -#window[data-radius_size='off'] .card>.cardavatar { +#window[data-radius_size="off"] .card > .cardavatar { border-radius: 0px; } -#window[data-radius_size='increase'] .card>.cardavatar { +#window[data-radius_size="increase"] .card > .cardavatar { border-radius: 14px; } -div:not(.handcards)>.card>.info, -.handcards>.card:last-child>.info, -div:not(.handcards)>.card>.name, -.handcards>.card:last-child>.name { - transform: none !important +div:not(.handcards) > .card > .info, +.handcards > .card:last-child > .info, +div:not(.handcards) > .card > .name, +.handcards > .card:last-child > .name { + transform: none !important; } -div:not(.handcards).menu-buttons>.button.card>.name { +div:not(.handcards).menu-buttons > .button.card > .name { transform: scale(0.9) !important; transform-origin: top left; } -div:not(.handcards).menu-buttons>.button.card>.info { +div:not(.handcards).menu-buttons > .button.card > .info { transform: scale(0.9) !important; transform-origin: top right; } -div:not(.handcards)>.card>.info>span, -.handcards>.card:last-child>.info>span { - display: inline !important +div:not(.handcards) > .card > .info > span, +.handcards > .card:last-child > .info > span { + display: inline !important; } -.card>.image { +.card > .image { width: 100%; height: 100%; position: absolute; @@ -1445,7 +1462,7 @@ div:not(.handcards)>.card>.info>span, top: 0; background-size: cover; } -.card.infohidden>div { +.card.infohidden > div { display: none !important; } .card.cardflip { @@ -1475,7 +1492,7 @@ div:not(.handcards)>.card>.info>span, -webkit-animation: playerflip 0.3s ease-out; } -.button.card.button>.intro { +.button.card.button > .intro { top: 69px; } .buttons { @@ -1488,9 +1505,9 @@ div:not(.handcards)>.card>.info>span, } .buttons.smallzoom { display: block; - zoom: 0.65 + zoom: 0.65; } -.buttons .card.button>.name { +.buttons .card.button > .name { transform: scale(0.8); transform-origin: top left; } @@ -1502,10 +1519,10 @@ div:not(.handcards)>.card>.info>span, margin-left: 0px; margin-right: 0px; } -.buttons.scrollbuttons:not(.popup) .button:first-child{ +.buttons.scrollbuttons:not(.popup) .button:first-child { margin-left: 12px; } -.buttons.scrollbuttons:not(.popup) .button:last-child{ +.buttons.scrollbuttons:not(.popup) .button:last-child { margin-right: 12px; } /*.buttons.smallzoom .card.button>.name, @@ -1516,106 +1533,107 @@ div:not(.handcards)>.card>.info>span, transform: scale(0.8); transform-origin: bottom right; }*/ -.buttons .card.button>.info { +.buttons .card.button > .info { transform: scale(0.8); transform-origin: top right; } -.buttons .card.button>.addinfo { +.buttons .card.button > .addinfo { transform: scale(0.8); transform-origin: bottom left; } -.dialog .buttons>.button.character, +.dialog .buttons > .button.character, .button.character.longcharacter { height: 108px; background-size: cover; } -.dialog .buttons>.button.character>.name, -.button.character.longcharacter>.name { +.dialog .buttons > .button.character > .name, +.button.character.longcharacter > .name { overflow: visible; } -.dialog .buttons>.button.character>.name.long { +.dialog .buttons > .button.character > .name.long { transform: scale(0.95); transform-origin: top left; } -.dialog .buttons>.card>.name{ +.dialog .buttons > .card > .name { font-size: 14px; line-height: 16px; } -.dialog .buttons>.card>.name.long{ +.dialog .buttons > .card > .name.long { top: 3px; } .card.center { top: calc(50% - 52px); left: calc(50% - 52px); } -.card>.background { +.card > .background { font-size: 80px; height: 80px; padding-top: 14px; text-align: center; } -.card.fullimage>div:not(.background), -.card.fullborder>div:not(.background){ +.card.fullimage > div:not(.background), +.card.fullborder > div:not(.background) { color: white; text-shadow: black 0px 0px 2px; } -.card.fullimage>.name{ +.card.fullimage > .name { line-height: 18px; } -.equips>.card>.background { +.equips > .card > .background { font-size: 36px; height: 36px; padding-top: 3px; } #window.low_performance #arena .player .equips, #window.low_performance #arena .player .name { - transition: all 0s + transition: all 0s; } -.judges>.card>.background,.marks>.card>.background { +.judges > .card > .background, +.marks > .card > .background { font-size: 20px; height: 20px; padding-top: 3px; } -.judges>.card.fakejudge.fullskin>.image { - display: none !important +.judges > .card.fakejudge.fullskin > .image { + display: none !important; } -.judges>.card.fakejudge.fullskin>.background, -.judges>.card.fakejudge.fullborder>.background, -.marks>.card.fakemark.fullborder>.background { +.judges > .card.fakejudge.fullskin > .background, +.judges > .card.fakejudge.fullborder > .background, +.marks > .card.fakemark.fullborder > .background { display: block !important; - font-family: 'huangcao' !important; + font-family: "huangcao" !important; padding-top: 4px !important; } -.judges:empty{ +.judges:empty { pointer-events: none; } -.mark-container.marks{ +.mark-container.marks { left: 0; top: 0; position: relative; margin-bottom: 0; margin-top: 0; } -.mark-container.marks>div{ +.mark-container.marks > div { position: relative !important; margin: 8px; width: 48px !important; height: 48px !important; } -.mark-container.marks>.card>.background.skillmark, -.mark-container.marks>.card.fakemark.fullborder>.background { +.mark-container.marks > .card > .background.skillmark, +.mark-container.marks > .card.fakemark.fullborder > .background { padding-top: calc(17px / 2) !important; zoom: 2; } -.mark-container.marks>.card.overflowmark { +.mark-container.marks > .card.overflowmark { overflow: visible; } -.mark-container.marks>div>.markcount.menubutton { +.mark-container.marks > div > .markcount.menubutton { font-size: 12px; width: 16px; height: 16px; @@ -1625,11 +1643,11 @@ div:not(.handcards)>.card>.info>span, top: 34px; border-radius: 100%; } -.mark-container.marks>.card.fullskin>.image{ +.mark-container.marks > .card.fullskin > .image { background-size: 100%; background-position: 0 0; } -.mark-container.marks>.card.fullskin>.info{ +.mark-container.marks > .card.fullskin > .info { transform: scale(0.6) !important; transform-origin: top right; left: auto !important; @@ -1637,38 +1655,38 @@ div:not(.handcards)>.card>.info>span, display: block; top: 2px; } -.mark-container.marks>.card.fullskin>.name{ +.mark-container.marks > .card.fullskin > .name { transform: scale(0.5) !important; transform-origin: top left; left: 3px !important; display: block; top: 3px !important; } -.mark-container.marks>.card.fullskin>.name.long{ +.mark-container.marks > .card.fullskin > .name.long { transform: scale(0.48) !important; top: 1px !important; } -.button.card>.background { +.button.card > .background { font-size: 68px; height: 68px; padding-top: 12px; } -.card>.background { - font-family: 'xiaozhuan' +.card > .background { + font-family: "xiaozhuan"; } -.card>.background.tight { - letter-spacing: -0.2em +.card > .background.tight { + letter-spacing: -0.2em; } -.marks>.card>.background.skillmark { - font-family: 'huangcao','xinwei'; +.marks > .card > .background.skillmark { + font-family: "huangcao", "xinwei"; padding-top: 4px; } -.marks>.card.overflowmark { +.marks > .card.overflowmark { overflow: visible; } -.marks>div>.markcount.menubutton { - font-family: 'xinwei'; +.marks > div > .markcount.menubutton { + font-family: "xinwei"; font-size: 9px; width: 12px; height: 12px; @@ -1682,8 +1700,8 @@ div:not(.handcards)>.card>.info>span, display: block !important; } -#arena.oldlayout .player:not(.linked2) .marks>div:first-child, -#arena.oldlayout:not(.nolink) .player .marks>div:first-child, +#arena.oldlayout .player:not(.linked2) .marks > div:first-child, +#arena.oldlayout:not(.nolink) .player .marks > div:first-child, #arena.oldlayout .player .marks .removing { transform: scale(0.2); opacity: 0; @@ -1693,7 +1711,7 @@ div:not(.handcards)>.card>.info>span, .dialog { text-align: center; z-index: 4; - transition-property: opacity,background,box-shadow; + transition-property: opacity, background, box-shadow; } .dialog { width: calc(90% - 420px); @@ -1701,21 +1719,22 @@ div:not(.handcards)>.card>.info>span, } .dialog.fullheight { height: calc(100% - 80px) !important; - top: 40px !important + top: 40px !important; } .dialog.fullwidth { left: calc(5% + 60px) !important; - width: calc(90% - 120px) !important + width: calc(90% - 120px) !important; } -.dialog.halfleft,.dialog.halfright { +.dialog.halfleft, +.dialog.halfright { width: 43% !important; - opacity: 1 !important + opacity: 1 !important; } .dialog.halfleft { - left: 5% !important + left: 5% !important; } .dialog.halfright { - left: 52% !important + left: 52% !important; } .dialog { top: calc(100% / 3 - 100px / 3); @@ -1727,86 +1746,87 @@ div:not(.handcards)>.card>.info>span, bottom: auto !important; min-height: 0px !important; } -.dialog.forcebutton,.dialog.forcebutton-auto{ +.dialog.forcebutton, +.dialog.forcebutton-auto { width: 400px; left: calc(50% - 200px); } -.dialog.nobutton .content>div:last-child { +.dialog.nobutton .content > div:last-child { padding-bottom: 8px; } -#window>.dialog.popped { +#window > .dialog.popped { z-index: 5; width: 220px; - background: rgba(0,0,0,0.2); + background: rgba(0, 0, 0, 0.2); box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px; border-radius: 6px; transition: opacity 0.3s; } -#window[data-radius_size='reduce']>.dialog.popped { +#window[data-radius_size="reduce"] > .dialog.popped { border-radius: 4px; } -#window[data-radius_size='off']>.dialog.popped { +#window[data-radius_size="off"] > .dialog.popped { border-radius: 0px; } -#window[data-radius_size='increase']>.dialog.popped { +#window[data-radius_size="increase"] > .dialog.popped { border-radius: 12px; } -#window>.dialog.popped>.bar { +#window > .dialog.popped > .bar { display: none !important; } -#window>.dialog.popped>.content-container { +#window > .dialog.popped > .content-container { height: 100%; top: 0; } -.content>table { - width: 100% +.content > table { + width: 100%; } -.content>div { +.content > div { margin-top: 8px; margin-bottom: 8px; margin-left: 4px; margin-right: 4px; position: relative; } -.content>div:not(.pointerdiv) { +.content > div:not(.pointerdiv) { width: calc(100% - 8px); } -.content>.caption + .buttons:not(*:last-child){ +.content > .caption + .buttons:not(*:last-child) { margin-top: 0; margin-bottom: 0; } -.content>.caption + .buttons:last-child{ +.content > .caption + .buttons:last-child { margin-top: 0; } -.content>.config { +.content > .config { height: 20px; line-height: 20px; } -.content>.config.removing { +.content > .config.removing { margin-top: -28px; } -.config>.configinfo { +.config > .configinfo { margin-top: 28px; } -.config>.configinfo>ul { +.config > .configinfo > ul { margin: 0; - padding-left: 20px + padding-left: 20px; } -.config>.configinfo>.dashedline { +.config > .configinfo > .dashedline { border-bottom: 1px dashed white; display: block; height: 0; margin-top: 5px; margin-bottom: 5px; } -.content>.placeholder { +.content > .placeholder { display: block; height: 5px; } -.content>.placeholder.slim { +.content > .placeholder.slim { margin: 1px; } -.content>.placeholder.removing { +.content > .placeholder.removing { margin-top: -13px; } .content { @@ -1815,26 +1835,26 @@ div:not(.handcards)>.card>.info>span, font-size: 0px; overflow-x: hidden; } -.content>*{ +.content > * { font-size: 16px; } .dialog:not(.popped) .content { vertical-align: top; } -.dialog:not(.popped) .content>.config { +.dialog:not(.popped) .content > .config { width: 200px; left: 0; margin-left: 20px; display: inline-block; } -.dialog:not(.popped) .content>.config>.switcher { +.dialog:not(.popped) .content > .config > .switcher { position: absolute; } -.dialog .content>.volumn { +.dialog .content > .volumn { margin: 0; - font-family: 'xinwei'; + font-family: "xinwei"; } -.dialog .content>.volumn>span { +.dialog .content > .volumn > span { margin-left: 2px; margin-right: 2px; } @@ -1847,16 +1867,16 @@ div:not(.handcards)>.card>.info>span, overflow: hidden; border-radius: 2px; } -.config>div { +.config > div { text-align: left; left: 0; } -.config>div>div { +.config > div > div { position: relative; padding-right: 10px; - height: 20px + height: 20px; } -.dialog>.content>.config { +.dialog > .content > .config { width: 300px; left: calc(50% - 150px); } @@ -1868,9 +1888,9 @@ div:not(.handcards)>.card>.info>span, } .menu-buttons.configpopped { - margin-top: 10px + margin-top: 10px; } -.menu-buttons.configpopped>.toggle { +.menu-buttons.configpopped > .toggle { text-align: left !important; margin-left: 21px !important; width: calc(100% - 15px) !important; @@ -1889,44 +1909,44 @@ div:not(.handcards)>.card>.info>span, font-size: 20px; display: block; } -.caption.choosetomove{ +.caption.choosetomove { margin: 5px; padding: 0px !important; } .caption:only-child { padding-bottom: 8px; } -.caption:not(.normal)>div { +.caption:not(.normal) > div { text-align: left; display: block; width: 100%; } -.caption>div { +.caption > div { position: relative; } -.caption>.text { +.caption > .text { font-size: 16px; - text-align: left + text-align: left; } -.caption>.text.center { - text-align: center +.caption > .text.center { + text-align: center; } -.caption>.text.chat { +.caption > .text.chat { word-break: break-all; margin-bottom: 3px; margin-left: 10px; - width: calc(100% - 20px) + width: calc(100% - 20px); } -.caption>.text.textlink { +.caption > .text.textlink { margin-left: 10px; } -.caption>.text.textlink:not(*:first-child) { +.caption > .text.textlink:not(*:first-child) { margin-top: 6px; } -.caption>.text.textlink:hover { +.caption > .text.textlink:hover { text-decoration: underline; } -.caption>div>div { +.caption > div > div { font-size: 16px; position: relative; width: calc(100% - 70px); @@ -1944,19 +1964,20 @@ div:not(.handcards)>.card>.info>span, left: 0 !important; width: 70px !important; } -.skill>.card { +.skill > .card { transform: scale(0.56); transform-origin: top left; margin-left: 2px; margin-top: 6px; - margin-bottom: -52px + margin-bottom: -52px; } -.caption>.ctext { +.caption > .ctext { text-align: center; font-size: 16px; } -.button.character,.button.card { +.button.character, +.button.card { width: 90px; height: 90px; position: relative; @@ -1965,7 +1986,7 @@ div:not(.handcards)>.card>.info>span, .button.card { font-size: 14px; } -.button.character>.name { +.button.character > .name { left: 5px; top: 22px; max-height: 68px; @@ -1974,28 +1995,28 @@ div:not(.handcards)>.card>.info>span, writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; } -.button.character>.hp { +.button.character > .hp { left: 5px; top: 3px; } -.button.character>.hp.text { +.button.character > .hp.text { top: 8px; left: 6px; - font-family: 'huangcao','xinwei'; + font-family: "huangcao", "xinwei"; font-size: 20px; letter-spacing: 3px; } .button.nodisplay { display: none; } -.dialog .content>.nodisplay { +.dialog .content > .nodisplay { display: none; } -.button.character>.intro { +.button.character > .intro { top: 71px; left: 0; } -.button.character>.identity { +.button.character > .identity { align-items: flex-end; display: flex; flex-direction: column; @@ -2003,7 +2024,7 @@ div:not(.handcards)>.card>.info>span, left: 72px; top: -6px; } -.button.character.newstyle>.identity{ +.button.character.newstyle > .identity { /*display: none;*/ border: none; background: none !important; @@ -2013,39 +2034,39 @@ div:not(.handcards)>.card>.info>span, top: 5px; /*font-size: 20px;*/ } -.button.newstyle>.name{ +.button.newstyle > .name { top: 8px; max-height: 84px; } -.button.newstyle>.name.long{ +.button.newstyle > .name.long { top: 6px; transform: scale(0.93); transform-origin: top left; } -.button.newstyle>.hp, -.button.newstyle>.hp.text{ +.button.newstyle > .hp, +.button.newstyle > .hp.text { left: auto; top: auto; text-align: right; right: 6px; bottom: 5px; } -.button.newstyle>.hp>div{ +.button.newstyle > .hp > div { width: 10px; height: 10px; - background: rgba(57, 123, 4,1); + background: rgba(57, 123, 4, 1); border: 1px solid rgba(39, 79, 7, 1); - box-shadow: rgba(0,0,0,0.2) 1px -1px 2px inset, rgba(255,255,255,0.15) -1px 1px 5px inset; + box-shadow: rgba(0, 0, 0, 0.2) 1px -1px 2px inset, rgba(255, 255, 255, 0.15) -1px 1px 5px inset; } -.button.newstyle>.hp>.shield{ - background: rgba(63, 119, 173,1); +.button.newstyle > .hp > .shield { + background: rgba(63, 119, 173, 1); border: 1px solid rgba(31, 82, 131, 1); } -.button.newstyle>.hp>div.text{ +.button.newstyle > .hp > div.text { background: none !important; box-shadow: none !important; border: none !important; - font-family: 'xinwei'; + font-family: "xinwei"; text-align: right; width: auto; height: auto; @@ -2054,7 +2075,7 @@ div:not(.handcards)>.card>.info>span, } .button.replaceButton, -.button.replaceButton.text{ +.button.replaceButton.text { left: 2px; top: auto; text-align: center; @@ -2064,7 +2085,7 @@ div:not(.handcards)>.card>.info>span, background-image: linear-gradient(rgba(150, 47, 47, 1), rgba(132, 43, 43, 1)); border-radius: 3px; } -.button.replaceButton>div{ +.button.replaceButton > div { width: 10px; height: 10px; } @@ -2075,18 +2096,18 @@ div:not(.handcards)>.card>.info>span, top: calc(200% / 3); left: calc(5% + 240px); width: calc(90% - 480px); - pointer-events: none + pointer-events: none; } -#control>* { +#control > * { pointer-events: auto; } -#window:not(.nopointer) #control{ - cursor:pointer; +#window:not(.nopointer) #control { + cursor: pointer; } -#control.nozoom>div { +#control.nozoom > div { transition-property: opacity; } -#control>div.stayleft{ +#control > div.stayleft { transition-property: opacity !important; } .control { @@ -2099,69 +2120,69 @@ div:not(.handcards)>.card>.info>span, font-size: 18px; white-space: nowrap; overflow: hidden; - opacity: 0 + opacity: 0; } .control.removing.removing2 { - transform: scale(0.2) + transform: scale(0.2); } -.control>div { +.control > div { position: relative; padding: 3px; - margin: 0 + margin: 0; } -.control.disabled{ +.control.disabled { opacity: 0.6 !important; cursor: default !important; } -#control>div { +#control > div { position: absolute; left: 50%; } -#arena.choose-to-move>#control, -#arena.discard-player-card>#control, -#arena.gain-player-card>#control, -#arena.choose-player-card>#control{ +#arena.choose-to-move > #control, +#arena.discard-player-card > #control, +#arena.gain-player-card > #control, +#arena.choose-player-card > #control { top: calc(80%) !important; } /*--------角色--------*/ -.player>.avatar>.action { +.player > .avatar > .action { margin: 5px; - font-family: 'xinwei'; + font-family: "xinwei"; font-size: 20px; letter-spacing: -2px; right: 5px; text-align: right; } -.player>.avatar.hidden, -.player>.avatar2.hidden { +.player > .avatar.hidden, +.player > .avatar2.hidden { pointer-events: none !important; } -.player>.avatar.disabled, -.player>.avatar2.disabled{ +.player > .avatar.disabled, +.player > .avatar2.disabled { filter: grayscale(1); -webkit-filter: grayscale(1); opacity: 0.8; } -.player>.avatar>.action:not(.freecolor) { +.player > .avatar > .action:not(.freecolor) { text-shadow: black 0 0 1px, rgba(10, 155, 67, 1) 0 0 5px, rgba(10, 155, 67, 1) 0 0 10px; } -.player:not(.current_action) .avatar>.action { - opacity: 0 +.player:not(.current_action) .avatar > .action { + opacity: 0; } -#arena.chess:not(.selecting) .player.current_action .avatar>.action { - opacity: 0 +#arena.chess:not(.selecting) .player.current_action .avatar > .action { + opacity: 0; } .player.controlfakeme { width: 100px; height: 120px; - top: calc(100% - 140px) + top: calc(100% - 140px); } -.player.controlfakeme>.avatar { +.player.controlfakeme > .avatar { width: 100%; height: 100%; box-shadow: none; left: 0; - top: 0 + top: 0; } .player { z-index: 2; @@ -2173,27 +2194,29 @@ div:not(.handcards)>.card>.info>span, } .player.replaceme { animation: replaceme 0.5s; - -webkit-animation: replaceme 0.5s + -webkit-animation: replaceme 0.5s; } .player.replaceenemy { animation: replaceenemy 0.5s; - -webkit-animation: replaceenemy 0.5s + -webkit-animation: replaceenemy 0.5s; } -.player>div { +.player > div { z-index: 2; } -.player.dead,.player.likedead,.grayscale1 { +.player.dead, +.player.likedead, +.grayscale1 { z-index: 1; filter: grayscale(1); -webkit-filter: grayscale(1); } -.grayscale{ +.grayscale { filter: grayscale(1); -webkit-filter: grayscale(1); } -.player>.nameol { +.player > .nameol { left: 0; top: 13px; width: 100%; @@ -2202,56 +2225,56 @@ div:not(.handcards)>.card>.info>span, white-space: nowrap; /*opacity: 0;*/ } -.player:hover>.nameol { +.player:hover > .nameol { opacity: 1; } -.player>.name { +.player > .name { left: 16px; top: 24px; font-size: 20px; - font-family: 'xinwei'; + font-family: "xinwei"; white-space: nowrap; writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; } -.player>.name.name2 { - left: 81px +.player > .name.name2 { + left: 81px; } -#arena.slim_player .player>.name { +#arena.slim_player .player > .name { left: 13px; top: 21px; } -#arena.slim_player .player>.name.name2 { - left: 78px +#arena.slim_player .player > .name.name2 { + left: 78px; } -#arena .player.minskin>.name, -#arena.slim_player .player.minskin>.name { +#arena .player.minskin > .name, +#arena.slim_player .player.minskin > .name { top: 17px; } -#arena .player.minskin>.name.long, -#arena.slim_player .player.minskin>.name.long { +#arena .player.minskin > .name.long, +#arena.slim_player .player.minskin > .name.long { transform: scale(0.9); transform-origin: top left; top: 13px; } -#arena .player.linked.minskin>.name, -#arena.slim_player .player.linked.minskin>.name { - transform: rotate(90deg) translate(81px,-66px); +#arena .player.linked.minskin > .name, +#arena.slim_player .player.linked.minskin > .name { + transform: rotate(90deg) translate(81px, -66px); } -.button.character>.name { - font-family: 'xinwei'; +.button.character > .name { + font-family: "xinwei"; } -.player>.intro { +.player > .intro { top: 87px; left: 18px; } -.player>.turned{ - font-family: 'xinwei'; +.player > .turned { + font-family: "xinwei"; width: 100%; height: 100%; line-height: 50px; @@ -2266,17 +2289,17 @@ div:not(.handcards)>.card>.info>span, background: black; top: 0; border-radius: 8px; - color: rgba(255,255,255,0.8); + color: rgba(255, 255, 255, 0.8); text-shadow: none; } -.player>.turned>div{ +.player > .turned > div { top: calc(50% - 50px); left: calc(50% - 25px); white-space: nowrap; writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; } -.player>.chain{ +.player > .chain { top: calc(50% - 10px); left: 0; height: 20px; @@ -2289,51 +2312,51 @@ div:not(.handcards)>.card>.info>span, z-index: 3; pointer-events: none; } -.player>.chain>div{ +.player > .chain > div { overflow: visible; left: 0; top: 0; margin: 0; padding: 0; } -.player:not(.linked2)>.chain>div{ +.player:not(.linked2) > .chain > div { opacity: 0; transform: translateX(-40px); } -#arena.nolink .player>.chain{ +#arena.nolink .player > .chain { display: none; } -.player>.chain>div>div{ +.player > .chain > div > div { position: absolute; margin: 0; padding: 0; left: 0; - box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1px,rgba(0, 0, 0, 0.4) 0 0 2px; + box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1px, rgba(0, 0, 0, 0.4) 0 0 2px; } -.player>.chain>div>div:nth-child(odd){ +.player > .chain > div > div:nth-child(odd) { height: 8px; width: 10px; border-radius: 2px; top: 6px; } -.player>.chain>div>div:nth-child(even){ +.player > .chain > div > div:nth-child(even) { width: 10px; height: 2px; top: 9px; z-index: 1; border-radius: 2px; } -#arena:not(.hide_turned):not(.oldlayout) .player.turnedover>.turned{ +#arena:not(.hide_turned):not(.oldlayout) .player.turnedover > .turned { opacity: 0.2; } -#window>.damage.fullscreenavatar{ +#window > .damage.fullscreenavatar { text-align: center; - font-family: 'xinwei'; + font-family: "xinwei"; top: calc(50% - 200px); height: 400px; transform-origin: center; } -#window>.damage.fullscreenavatar>div{ +#window > .damage.fullscreenavatar > div { width: 500px; height: 100%; left: calc(50% - 250px); @@ -2341,11 +2364,11 @@ div:not(.handcards)>.card>.info>span, position: absolute; top: 0; } -#window>.damage.fullscreenavatar>div:first-child{ +#window > .damage.fullscreenavatar > div:first-child { mask-image: linear-gradient(transparent, black, black, transparent); -webkit-mask-image: linear-gradient(transparent, black, black, transparent); } -#window>.damage.fullscreenavatar>div:first-child>div{ +#window > .damage.fullscreenavatar > div:first-child > div { background-size: cover; background-position: 50%; width: 200px; @@ -2354,43 +2377,54 @@ div:not(.handcards)>.card>.info>span, height: 100%; box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(0, 0, 0, 0.5) 0 0 10px; } -#window>.damage.fullscreenavatar[data-nature='thunder']:not(.noshadow)>div:first-child>div{ - box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0,0.5) 0 0 10px, rgba(0, 0, 0,0.3) 0 0 30px, rgba(100, 74, 139,1) 0 0 60px; +#window > .damage.fullscreenavatar[data-nature="thunder"]:not(.noshadow) > div:first-child > div { + box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.5) 0 0 10px, rgba(0, 0, 0, 0.3) 0 0 30px, + rgba(100, 74, 139, 1) 0 0 60px; } -#window>.damage.fullscreenavatar[data-nature='kami']:not(.noshadow)>div:first-child>div{ - box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0,0.5) 0 0 10px, rgba(0, 0, 0,0.3) 0 0 30px, rgba(90, 118, 99,1) 0 0 60px; +#window > .damage.fullscreenavatar[data-nature="kami"]:not(.noshadow) > div:first-child > div { + box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.5) 0 0 10px, rgba(0, 0, 0, 0.3) 0 0 30px, + rgba(90, 118, 99, 1) 0 0 60px; } -#window>.damage.fullscreenavatar[data-nature='metal']>div:first-child>div{ - box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0,0.5) 0 0 10px, rgba(255, 0, 0,0.1) 0 0 30px, rgba(255, 203, 0,0.6) 0 0 80px; +#window > .damage.fullscreenavatar[data-nature="metal"] > div:first-child > div { + box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.5) 0 0 10px, rgba(255, 0, 0, 0.1) 0 0 30px, + rgba(255, 203, 0, 0.6) 0 0 80px; } -#window>.damage.fullscreenavatar[data-nature='wood']>div:first-child>div{ - box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0,0.5) 0 0 10px, rgba(0, 0, 0,0.3) 0 0 30px, rgba(57, 123, 4,1) 0 0 60px; +#window > .damage.fullscreenavatar[data-nature="wood"] > div:first-child > div { + box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.5) 0 0 10px, rgba(0, 0, 0, 0.3) 0 0 30px, + rgba(57, 123, 4, 1) 0 0 60px; } -#window>.damage.fullscreenavatar[data-nature='water']>div:first-child>div{ - box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0,0.5) 0 0 10px, rgba(0, 0, 0,0.3) 0 0 30px, rgba(78, 117, 140,1) 0 0 60px, rgba(78, 117, 140,1) 0 0 60px; +#window > .damage.fullscreenavatar[data-nature="water"] > div:first-child > div { + box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.5) 0 0 10px, rgba(0, 0, 0, 0.3) 0 0 30px, + rgba(78, 117, 140, 1) 0 0 60px, rgba(78, 117, 140, 1) 0 0 60px; } -#window>.damage.fullscreenavatar[data-nature='ice']>div:first-child>div{ - box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0,0.5) 0 0 20px, rgba(0, 0, 0,0.3) 0 0 40px, rgba(213, 194, 179, 1) 0 0 80px; +#window > .damage.fullscreenavatar[data-nature="ice"] > div:first-child > div { + box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.5) 0 0 20px, rgba(0, 0, 0, 0.3) 0 0 40px, + rgba(213, 194, 179, 1) 0 0 80px; } -#window>.damage.fullscreenavatar[data-nature='soil']>div:first-child>div{ - box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0,0.5) 0 0 10px, rgba(0, 0, 0,0.3) 0 0 30px, rgba(128, 59, 2,1) 0 0 60px; +#window > .damage.fullscreenavatar[data-nature="soil"] > div:first-child > div { + box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.5) 0 0 10px, rgba(0, 0, 0, 0.3) 0 0 30px, + rgba(128, 59, 2, 1) 0 0 60px; } -#window>.damage.fullscreenavatar[data-nature='fire']>div:first-child>div{ - box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0,0.5) 0 0 20px, rgba(0, 0, 0,0.3) 0 0 40px, rgba(232, 53, 53, 1) 0 0 80px; +#window > .damage.fullscreenavatar[data-nature="fire"] > div:first-child > div { + box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.5) 0 0 20px, rgba(0, 0, 0, 0.3) 0 0 40px, + rgba(232, 53, 53, 1) 0 0 80px; } -#window>.damage.fullscreenavatar[data-nature='fire']>div:first-child>div{ - box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0,0.5) 0 0 20px, rgba(0, 0, 0,0.3) 0 0 40px, rgba(203, 177, 255, 1) 0 0 80px; +#window > .damage.fullscreenavatar[data-nature="fire"] > div:first-child > div { + box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.5) 0 0 20px, rgba(0, 0, 0, 0.3) 0 0 40px, + rgba(203, 177, 255, 1) 0 0 80px; } -#window>.damage.fullscreenavatar[data-nature='orange']>div:first-child>div{ - box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0,0.5) 0 0 20px, rgba(0, 0, 0,0.3) 0 0 40px, rgba(255, 120, 0, 1) 0 0 80px; +#window > .damage.fullscreenavatar[data-nature="orange"] > div:first-child > div { + box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.5) 0 0 20px, rgba(0, 0, 0, 0.3) 0 0 40px, + rgba(255, 120, 0, 1) 0 0 80px; } -#window>.damage.fullscreenavatar[data-nature='gray']>div:first-child>div{ - box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0,0.5) 0 0 20px, rgba(0, 0, 0,0.3) 0 0 40px, rgba(213, 194, 179, 1) 0 0 80px; +#window > .damage.fullscreenavatar[data-nature="gray"] > div:first-child > div { + box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.5) 0 0 20px, rgba(0, 0, 0, 0.3) 0 0 40px, + rgba(213, 194, 179, 1) 0 0 80px; } -#window>.damage.fullscreenavatar>.text{ +#window > .damage.fullscreenavatar > .text { display: table; } -#window>.damage.fullscreenavatar>.text>div{ +#window > .damage.fullscreenavatar > .text > div { display: block; position: relative; width: auto; @@ -2403,28 +2437,28 @@ div:not(.handcards)>.card>.info>span, left: auto; right: 165px; } -#window>.damage.fullscreenavatar>.text>div>div{ +#window > .damage.fullscreenavatar > .text > div > div { transform: scale(4); opacity: 0; display: inline-block; position: relative; } -#window>.damage.fullscreenavatar>.textbg{ +#window > .damage.fullscreenavatar > .textbg { transition: all 0s; display: none; } -#window>.damage.fullscreenavatar.flashtext>.textbg{ +#window > .damage.fullscreenavatar.flashtext > .textbg { display: block; } /*#window>.damage.fullscreenavatar.flashtext>.text:not(.textbg)>div{ transform: scale(2); opacity: 0; }*/ -#window>.damage.fullscreenavatar>.text>div>.flashtext{ +#window > .damage.fullscreenavatar > .text > div > .flashtext { transform: none; opacity: 1; } -#window>.damage.fullscreenavatar>.name>div{ +#window > .damage.fullscreenavatar > .name > div { display: block; position: relative; width: auto; @@ -2434,12 +2468,12 @@ div:not(.handcards)>.card>.info>span, left: 20px; font-size: 40px; } -#window>.damage.fullscreenavatar.removing{ +#window > .damage.fullscreenavatar.removing { transition: all 0.3s; } -.player>.damage, -#window>.damage { - font-family: 'huangcao','xinwei'; +.player > .damage, +#window > .damage { + font-family: "huangcao", "xinwei"; font-size: 72px; width: 100%; text-align: center; @@ -2451,7 +2485,7 @@ div:not(.handcards)>.card>.info>span, z-index: 5; pointer-events: none; } -#window>.damage { +#window > .damage { transform: scale(2); font-size: 120px; } @@ -2460,19 +2494,19 @@ div:not(.handcards)>.card>.info>span, font-size: 30px; top: calc(50% - 15px); } -.player.minskin>.damage.normal-font { +.player.minskin > .damage.normal-font { font-size: 26px; top: calc(50% - 13px); } -.player[data-position='0']>.damage.dieidentity, -.player:not(.dead)>.damage.dieidentity { - opacity: 0 !important +.player[data-position="0"] > .damage.dieidentity, +.player:not(.dead) > .damage.dieidentity { + opacity: 0 !important; } -.player>.damage.dieidentity { +.player > .damage.dieidentity { transition-property: opacity; } -.player>.cardeffect { - font-family: 'huangcao','xinwei'; +.player > .cardeffect { + font-family: "huangcao", "xinwei"; font-size: 108px; width: 100%; text-align: center; @@ -2483,19 +2517,19 @@ div:not(.handcards)>.card>.info>span, animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; } -.player>.damage.damageadded, -#window>.damage.damageadded { +.player > .damage.damageadded, +#window > .damage.damageadded { opacity: 1; transform: scale(1); } -.player.linked>.damage { +.player.linked > .damage { transform: scale(0.7) rotate(90deg); } -.player.linked>.damage.damageadded { +.player.linked > .damage.damageadded { transform: scale(1) rotate(90deg); } -.player>.framebg{ +.player > .framebg { width: 100%; height: 100%; left: 0; @@ -2504,46 +2538,46 @@ div:not(.handcards)>.card>.info>span, display: none; pointer-events: none; } -#arena.oldlayout .player>.framebg{ +#arena.oldlayout .player > .framebg { transform: rotate(90deg) translateY(-240px); width: 120px; height: 240px; transform-origin: top left; } -#window #arena.mobile:not(.chess) .player[data-position='0']>.framebg{ +#window #arena.mobile:not(.chess) .player[data-position="0"] > .framebg { /*display: none;*/ width: 120px; } -#window .player>.framebg[data-auto="gold"], -#window #arena.long.mobile:not(.fewplayer) .player[data-position='0']>.framebg[data-auto="gold"]{ - display:block; - background-image:url('../../theme/style/player/gold1.png'); +#window .player > .framebg[data-auto="gold"], +#window #arena.long.mobile:not(.fewplayer) .player[data-position="0"] > .framebg[data-auto="gold"] { + display: block; + background-image: url("../../theme/style/player/gold1.png"); } -#window #arena.long:not(.fewplayer) .player>.framebg[data-auto="gold"], -#arena.oldlayout .player>.framebg[data-auto="gold"]{ - display:block; - background-image:url('../../theme/style/player/gold3.png'); +#window #arena.long:not(.fewplayer) .player > .framebg[data-auto="gold"], +#arena.oldlayout .player > .framebg[data-auto="gold"] { + display: block; + background-image: url("../../theme/style/player/gold3.png"); } -#window .player>.framebg[data-auto="silver"], -#window #arena.long.mobile:not(.fewplayer) .player[data-position='0']>.framebg[data-auto="silver"]{ - display:block; - background-image:url('../../theme/style/player/silver1.png'); +#window .player > .framebg[data-auto="silver"], +#window #arena.long.mobile:not(.fewplayer) .player[data-position="0"] > .framebg[data-auto="silver"] { + display: block; + background-image: url("../../theme/style/player/silver1.png"); } -#window #arena.long:not(.fewplayer) .player>.framebg[data-auto="silver"], -#arena.oldlayout .player>.framebg[data-auto="silver"]{ - display:block; - background-image:url('../../theme/style/player/silver3.png'); +#window #arena.long:not(.fewplayer) .player > .framebg[data-auto="silver"], +#arena.oldlayout .player > .framebg[data-auto="silver"] { + display: block; + background-image: url("../../theme/style/player/silver3.png"); } -#window .player>.framebg[data-auto="bronze"], -#window #arena.long.mobile:not(.fewplayer) .player[data-position='0']>.framebg[data-auto="bronze"]{ - display:block; - background-image:url('../../theme/style/player/bronze1.png'); +#window .player > .framebg[data-auto="bronze"], +#window #arena.long.mobile:not(.fewplayer) .player[data-position="0"] > .framebg[data-auto="bronze"] { + display: block; + background-image: url("../../theme/style/player/bronze1.png"); } -#window #arena.long:not(.fewplayer) .player>.framebg[data-auto="bronze"], -#arena.oldlayout .player>.framebg[data-auto="bronze"]{ - display:block; - background-image:url('../../theme/style/player/bronze3.png'); +#window #arena.long:not(.fewplayer) .player > .framebg[data-auto="bronze"], +#arena.oldlayout .player > .framebg[data-auto="bronze"] { + display: block; + background-image: url("../../theme/style/player/bronze3.png"); } .avatar { @@ -2567,42 +2601,46 @@ div:not(.handcards)>.card>.info>span, right: 14px; top: 12px; } -.equips>div { +.equips > div { width: 42px; height: 42px; margin: 0; position: absolute; } -.equips>.equip1 { +.equips > .equip1 { top: 0; left: 0; } -.equips>.equip2 { +.equips > .equip2 { top: 0; right: 0; } -.equips>.equip3 { +.equips > .equip3 { bottom: 0; left: 0; } -.equips>.equip4 { +.equips > .equip4 { bottom: 0; right: 0; } -.equips>.equip5 { +.equips > .equip5 { top: calc(50% - 21px); left: calc(50% - 21px); border-radius: 21px; - z-index: 1 + z-index: 1; } -.equips>.equip6 { +.equips > .equip6 { bottom: 3; left: calc(50% - 21px); } -.equips>div>div:not(.image),.judges>div>div:not(.image),.marks>div>div:not(.image) { +.equips > div > div:not(.image), +.judges > div > div:not(.image), +.marks > div > div:not(.image) { display: none; } -.equips>div>.image,.judges>div>.image,.marks>div>.image { +.equips > div > .image, +.judges > div > .image, +.marks > div > .image { /*width: 120%; height: 120%; left: -20%; @@ -2612,7 +2650,7 @@ div:not(.handcards)>.card>.info>span, background-repeat: no-repeat; } -#arena:not(.chess) .player[data-position='0']>.equips>div>.image{ +#arena:not(.chess) .player[data-position="0"] > .equips > div > .image { background-size: 115%; } /*.equips>div:hover>.info{display: inline-block; @@ -2626,7 +2664,7 @@ div:not(.handcards)>.card>.info>span, -webkit-animation-fill-mode: forwards; }*/ #arena.oldlayout .marks { - left: 14px + left: 14px; } .judges { @@ -2637,10 +2675,11 @@ div:not(.handcards)>.card>.info>span, left: 14px; top: 112px; } -.player>.marks { - z-index: 4 +.player > .marks { + z-index: 4; } -.judges>div,.marks>div { +.judges > div, +.marks > div { width: 24px; height: 24px; margin: 0; @@ -2661,96 +2700,98 @@ div:not(.handcards)>.card>.info>span, .hp.text { top: 18px; } -.hp.textstyle{ - font-family: 'xinwei' +.hp.textstyle { + font-family: "xinwei"; } -.hp>div { +.hp > div { width: 8px; height: 8px; margin-left: 3px; position: relative; border-radius: 100%; - box-shadow: rgba(0,0,0,0.2) 1px -1px 2px inset,rgba(255,255,255,0.15) -1px 1px 5px inset; + box-shadow: rgba(0, 0, 0, 0.2) 1px -1px 2px inset, rgba(255, 255, 255, 0.15) -1px 1px 5px inset; position: relative; filter: brightness(1.5); -webkit-filter: brightness(1.5); transition: all 0.5s; background-repeat: no-repeat; } -.button .hp>div { +.button .hp > div { width: 6px; height: 6px; background: white; - box-shadow: 0px 1px 1px rgba(0,0,0,0.5); + box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); border: 1px solid #fff; } -.button .hp>.shield { - background: rgba(63, 119, 173,1); +.button .hp > .shield { + background: rgba(63, 119, 173, 1); border: 1px solid rgba(63, 119, 173, 1); } -.hp[data-condition="hidden"]>div:not(.lost):not(.shield) { - background-image:url('../../theme/style/hp/image/hidden_hp.png') !important; +.hp[data-condition="hidden"] > div:not(.lost):not(.shield) { + background-image: url("../../theme/style/hp/image/hidden_hp.png") !important; width: 12px; height: 12px; background-size: 100% 100%; box-shadow: none; } -.hp[data-condition="high"]>div:not(.lost):not(.shield) { - background: rgba(57, 123, 4,1); +.hp[data-condition="high"] > div:not(.lost):not(.shield) { + background: rgba(57, 123, 4, 1); border: 1px solid rgba(39, 79, 7, 1); } -.hp[data-condition="mid"]>div:not(.lost):not(.shield) { - background: rgba(166, 140, 6,1); +.hp[data-condition="mid"] > div:not(.lost):not(.shield) { + background: rgba(166, 140, 6, 1); border: 1px solid rgba(79, 64, 7, 1); } -.hp[data-condition="low"]>div:not(.lost):not(.shield) { - background: rgba(148, 27, 27,1); +.hp[data-condition="low"] > div:not(.lost):not(.shield) { + background: rgba(148, 27, 27, 1); border: 1px solid rgba(79, 7, 7, 1); } -.hp.actcount>div:not(.lost):not(.shield) { - background: rgba(63, 119, 173,1); +.hp.actcount > div:not(.lost):not(.shield) { + background: rgba(63, 119, 173, 1); border: 1px solid rgba(31, 82, 131, 1); } -.treasure>.hp>div:not(.lost):not(.shield) { - background: rgba(63, 119, 173,1) !important; +.treasure > .hp > div:not(.lost):not(.shield) { + background: rgba(63, 119, 173, 1) !important; border: 1px solid rgba(31, 82, 131, 1) !important; } -.hp.actcount>div.overflow:not(.lost):not(.shield) { +.hp.actcount > div.overflow:not(.lost):not(.shield) { background: rgb(154, 154, 154); border: 1px solid rgb(109, 109, 109); } -.hp.actcount.overflow2>div.overflow:not(.lost):not(.shield) { +.hp.actcount.overflow2 > div.overflow:not(.lost):not(.shield) { background: rgb(173, 129, 63); border: 1px solid rgb(131, 109, 31); } -.hp.actcount>.lost { - background: rgba(63, 119, 173,1); +.hp.actcount > .lost { + background: rgba(63, 119, 173, 1); border: 1px solid rgba(31, 82, 131, 1); filter: grayscale(1); -webkit-filter: grayscale(1); } -.hp>.lost { - background: rgba(57, 123, 4,1); +.hp > .lost { + background: rgba(57, 123, 4, 1); border: 1px solid rgba(39, 79, 7, 1); filter: grayscale(1); -webkit-filter: grayscale(1); } -.hp>.shield { - background: rgba(63, 119, 173,1); +.hp > .shield { + background: rgba(63, 119, 173, 1); border: 1px solid rgba(31, 82, 131, 1); } .hp.text[data-condition="low"], .hp.textstyle[data-condition="low"] { - text-shadow: black 0 0 1px,rgba(232, 53, 53,1) 0 0 2px,rgba(232, 53, 53,1) 0 0 5px,rgba(232, 53, 53,1) 0 0 10px + text-shadow: black 0 0 1px, rgba(232, 53, 53, 1) 0 0 2px, rgba(232, 53, 53, 1) 0 0 5px, + rgba(232, 53, 53, 1) 0 0 10px; } .hp.text[data-condition="mid"], .hp.textstyle[data-condition="mid"] { - text-shadow: black 0 0 1px,rgba(255, 203, 0,1) 0 0 2px,rgba(255, 203, 0,1) 0 0 5px,rgba(255, 203, 0,1) 0 0 10px + text-shadow: black 0 0 1px, rgba(255, 203, 0, 1) 0 0 2px, rgba(255, 203, 0, 1) 0 0 5px, + rgba(255, 203, 0, 1) 0 0 10px; } .hp.text[data-condition="high"], .hp.textstyle[data-condition="high"] { - text-shadow: rgba(57, 123, 4,1) 0 0 2px,rgba(57, 123, 4,1) 0 0 5px,rgba(57, 123, 4,1) 0 0 10px + text-shadow: rgba(57, 123, 4, 1) 0 0 2px, rgba(57, 123, 4, 1) 0 0 5px, rgba(57, 123, 4, 1) 0 0 10px; } .player::after, @@ -2759,7 +2800,7 @@ div:not(.handcards)>.card>.info>span, .player::before, .card::before, .button::before { - content: ''; + content: ""; position: absolute; z-index: -1; width: 100%; @@ -2776,16 +2817,17 @@ div:not(.handcards)>.card>.info>span, .player::after, .card::after, .button::after { - box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px,rgba(255, 0, 0, 0.4) 0 0 5px, rgba(255, 0, 0, 0.4) 0 0 12px, rgba(255, 0, 0, 0.8) 0 0 15px; + box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(255, 0, 0, 0.4) 0 0 5px, rgba(255, 0, 0, 0.4) 0 0 12px, + rgba(255, 0, 0, 0.8) 0 0 15px; } .player::before, .card::before, .button::before { - box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 133, 255, 0.5) 0 0 5px, rgba(0, 133, 255, 0.6) 0 0 12px, rgba(0, 133, 255, 0.8) 0 0 15px; + box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 133, 255, 0.5) 0 0 5px, rgba(0, 133, 255, 0.6) 0 0 12px, + rgba(0, 133, 255, 0.8) 0 0 15px; } - /*.hp>div{width: 6px;height: 6px;margin-left: 3px;position: relative;}*/ .count.p2 { right: 174px; @@ -2806,7 +2848,7 @@ div:not(.handcards)>.card>.info>span, .identity { text-align: center; } -.identity>div { +.identity > div { line-height: 16px; position: relative; text-align: right; @@ -2839,522 +2881,525 @@ div:not(.handcards)>.card>.info>span, transform-origin: bottom left; } -.identitycircle > div > div[data-color='wei'] { - background-image: radial-gradient(circle at bottom left, rgb(157, 198, 255), rgb(117, 147, 189)) +.identitycircle > div > div[data-color="wei"] { + background-image: radial-gradient(circle at bottom left, rgb(157, 198, 255), rgb(117, 147, 189)); } -.identitycircle > div > div[data-color='shu'] { - background-image: radial-gradient(circle at bottom left, rgb(185, 72, 36), rgb(158, 62, 31)) +.identitycircle > div > div[data-color="shu"] { + background-image: radial-gradient(circle at bottom left, rgb(185, 72, 36), rgb(158, 62, 31)); } -.identitycircle > div > div[data-color='wu'] { - background-image: radial-gradient(circle at bottom left, rgb(120, 218, 83), rgb(104, 189, 73)) +.identitycircle > div > div[data-color="wu"] { + background-image: radial-gradient(circle at bottom left, rgb(120, 218, 83), rgb(104, 189, 73)); } -.identitycircle > div > div[data-color='qun'] { - background-image: radial-gradient(circle at bottom left, rgb(255, 218, 71), rgb(224, 191, 62)) +.identitycircle > div > div[data-color="qun"] { + background-image: radial-gradient(circle at bottom left, rgb(255, 218, 71), rgb(224, 191, 62)); } -.identitycircle > div > div[data-color='jin'] { - background-image: radial-gradient(circle at bottom left, rgb(100, 74, 139), rgb(96, 72, 136)) +.identitycircle > div > div[data-color="jin"] { + background-image: radial-gradient(circle at bottom left, rgb(100, 74, 139), rgb(96, 72, 136)); } -.identitycircle > div > div[data-color='key'] { - background-image: radial-gradient(circle at bottom left, rgb(203, 177, 255), rgb(203, 177, 255)) +.identitycircle > div > div[data-color="key"] { + background-image: radial-gradient(circle at bottom left, rgb(203, 177, 255), rgb(203, 177, 255)); } -.unseen>.avatar,.unseen>.name:not(.name2), -.unseen2>.avatar2,.unseen2>.name2 { +.unseen > .avatar, +.unseen > .name:not(.name2), +.unseen2 > .avatar2, +.unseen2 > .name2 { opacity: 0 !important; } -#arena:not(.observe) .player[data-position='0'].unseen>.avatar, -#arena:not(.observe) .player[data-position='0'].unseen2>.avatar2, -#arena:not(.observe) .player[data-position='0'].unseen>.name:not(.name2):not(.name_seat), -#arena:not(.observe) .player[data-position='0'].unseen2>.name2, -#arena:not(.observe) .unseen_v>.avatar, -#arena:not(.observe) .unseen2_v>.avatar2, -#arena:not(.observe) .unseen_v>.name:not(.name2):not(.name_seat), -#arena:not(.observe) .unseen2_v>.name2 { +#arena:not(.observe) .player[data-position="0"].unseen > .avatar, +#arena:not(.observe) .player[data-position="0"].unseen2 > .avatar2, +#arena:not(.observe) .player[data-position="0"].unseen > .name:not(.name2):not(.name_seat), +#arena:not(.observe) .player[data-position="0"].unseen2 > .name2, +#arena:not(.observe) .unseen_v > .avatar, +#arena:not(.observe) .unseen2_v > .avatar2, +#arena:not(.observe) .unseen_v > .name:not(.name2):not(.name_seat), +#arena:not(.observe) .unseen2_v > .name2 { opacity: 0.2 !important; } -.player>.unseen_show>.avatar, -.player>.unseen2_show>.avatar2 { +.player > .unseen_show > .avatar, +.player > .unseen2_show > .avatar2 { opacity: 0; } -#arena:not(.observe) .player:not([data-position='0']).unseen_show>.avatar, -#arena:not(.observe) .player:not([data-position='0']).unseen2_show>.avatar2 { +#arena:not(.observe) .player:not([data-position="0"]).unseen_show > .avatar, +#arena:not(.observe) .player:not([data-position="0"]).unseen2_show > .avatar2 { opacity: 1 !important; - background-image:url('../../image/character/hidden_image.jpg') !important; + background-image: url("../../image/character/hidden_image.jpg") !important; } -.player>.name_seat { +.player > .name_seat { opacity: 0; white-space: nowrap; writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; } -.player:not([data-position='0']).unseen.unseen2>.name_seat, -.player:not([data-position='0']):not(.fullskin2).unseen>.name_seat { +.player:not([data-position="0"]).unseen.unseen2 > .name_seat, +.player:not([data-position="0"]):not(.fullskin2).unseen > .name_seat { opacity: 1 !important; } -.linked>.avatar,.linked>.avatar2 { +.linked > .avatar, +.linked > .avatar2 { transform: rotate(-90deg); } -.linked>.avatar2 { +.linked > .avatar2 { top: 5px; } -.linked>.identity { +.linked > .identity { top: 88px; } -.linked>.count { +.linked > .count { right: 154px; } -.acted>.identity>div { +.acted > .identity > div { transform: rotate(180deg); } /*--------位置(8人)------*/ -[data-number='8']>.player[data-position='1'] { +[data-number="8"] > .player[data-position="1"] { top: calc(200% / 3 - 90px); left: calc(100% - 240px); } -[data-number='8']>.player[data-position='2'] { +[data-number="8"] > .player[data-position="2"] { top: calc(100% / 3 - 40px); left: calc(100% - 240px); } -[data-number='8']>.player[data-position='3'] { +[data-number="8"] > .player[data-position="3"] { top: 10px; left: calc(75% - 60px); } -[data-number='8']>.player[data-position='4'] { +[data-number="8"] > .player[data-position="4"] { top: 0; left: calc(50% - 120px); } -[data-number='8']>.player[data-position='5'] { +[data-number="8"] > .player[data-position="5"] { top: 10px; left: calc(25% - 180px); } -[data-number='8']>.player[data-position='6'] { +[data-number="8"] > .player[data-position="6"] { top: calc(100% / 3 - 40px); left: 0; } -[data-number='8']>.player[data-position='7'] { +[data-number="8"] > .player[data-position="7"] { top: calc(200% / 3 - 90px); left: 0; } -[data-number='8']>.card[data-position='1'] { +[data-number="8"] > .card[data-position="1"] { top: calc(200% / 3 - 90px); left: calc(100% - 240px); } -[data-number='8']>.card[data-position='2'] { +[data-number="8"] > .card[data-position="2"] { top: calc(100% / 3 - 40px); left: calc(100% - 240px); } -[data-number='8']>.card[data-position='3'] { +[data-number="8"] > .card[data-position="3"] { top: 10px; left: calc(75% - 60px); } -[data-number='8']>.card[data-position='4'] { +[data-number="8"] > .card[data-position="4"] { top: 0; left: calc(50% - 52px); } -[data-number='8']>.card[data-position='5'] { +[data-number="8"] > .card[data-position="5"] { top: 10px; left: calc(25% - 60px); } -[data-number='8']>.card[data-position='6'] { +[data-number="8"] > .card[data-position="6"] { top: calc(100% / 3 - 40px); left: 120px; } -[data-number='8']>.card[data-position='7'] { +[data-number="8"] > .card[data-position="7"] { top: calc(200% / 3 - 90px); left: 120px; } -[data-number='8']>.popup[data-position='1'] { +[data-number="8"] > .popup[data-position="1"] { top: calc(200% / 3 - 78px); left: calc(100% - 270px); } -[data-number='8']>.popup[data-position='2'] { +[data-number="8"] > .popup[data-position="2"] { top: calc(100% / 3 - 28px); left: calc(100% - 270px); } -[data-number='8']>.popup[data-position='3'] { +[data-number="8"] > .popup[data-position="3"] { top: 140px; left: calc(75% - 80px); } -[data-number='8']>.popup[data-position='4'] { +[data-number="8"] > .popup[data-position="4"] { top: 130px; left: calc(50% - 106px); } -[data-number='8']>.popup[data-position='5'] { +[data-number="8"] > .popup[data-position="5"] { top: 140px; left: calc(25% + 60px); } -[data-number='8']>.popup[data-position='6'] { +[data-number="8"] > .popup[data-position="6"] { top: calc(100% / 3 - 28px); left: 250px; } -[data-number='8']>.popup[data-position='7'] { +[data-number="8"] > .popup[data-position="7"] { top: calc(200% / 3 - 78px); left: 250px; } /*--------位置(7人)------*/ -[data-number='7']>.player[data-position='1'] { +[data-number="7"] > .player[data-position="1"] { top: calc(200% / 3 - 90px); left: calc(100% - 240px); } -[data-number='7']>.player[data-position='2'] { +[data-number="7"] > .player[data-position="2"] { top: calc(100% / 3 - 40px); left: calc(100% - 240px); } -[data-number='7']>.player[data-position='3'] { +[data-number="7"] > .player[data-position="3"] { top: 10px; left: calc(75% - 180px); } -[data-number='7']>.player[data-position='4'] { +[data-number="7"] > .player[data-position="4"] { top: 10px; left: calc(25% - 60px); } -[data-number='7']>.player[data-position='5'] { +[data-number="7"] > .player[data-position="5"] { top: calc(100% / 3 - 40px); left: 0; } -[data-number='7']>.player[data-position='6'] { +[data-number="7"] > .player[data-position="6"] { top: calc(200% / 3 - 90px); left: 0; } -[data-number='7']>.card[data-position='1'] { +[data-number="7"] > .card[data-position="1"] { top: calc(200% / 3 - 90px); left: calc(100% - 240px); } -[data-number='7']>.card[data-position='2'] { +[data-number="7"] > .card[data-position="2"] { top: calc(100% / 3 - 40px); left: calc(100% - 240px); } -[data-number='7']>.card[data-position='3'] { +[data-number="7"] > .card[data-position="3"] { top: 10px; left: calc(75% - 180px); } -[data-number='7']>.card[data-position='4'] { +[data-number="7"] > .card[data-position="4"] { top: 10px; left: calc(25% + 60px); } -[data-number='7']>.card[data-position='5'] { +[data-number="7"] > .card[data-position="5"] { top: calc(100% / 3 - 40px); left: 120px; } -[data-number='7']>.card[data-position='6'] { +[data-number="7"] > .card[data-position="6"] { top: calc(200% / 3 - 90px); left: 120px; } -[data-number='7']>.popup[data-position='1'] { +[data-number="7"] > .popup[data-position="1"] { top: calc(200% / 3 - 78px); left: calc(100% - 270px); } -[data-number='7']>.popup[data-position='2'] { +[data-number="7"] > .popup[data-position="2"] { top: calc(100% / 3 - 28px); left: calc(100% - 270px); } -[data-number='7']>.popup[data-position='3'] { +[data-number="7"] > .popup[data-position="3"] { top: 140px; left: calc(75% - 210px); } -[data-number='7']>.popup[data-position='4'] { +[data-number="7"] > .popup[data-position="4"] { top: 140px; left: calc(25% + 180px); } -[data-number='7']>.popup[data-position='5'] { +[data-number="7"] > .popup[data-position="5"] { top: calc(100% / 3 - 28px); left: 250px; } -[data-number='7']>.popup[data-position='6'] { +[data-number="7"] > .popup[data-position="6"] { top: calc(200% / 3 - 78px); left: 250px; } /*--------位置(6人)------*/ -[data-number='6']>.player[data-position='1'] { +[data-number="6"] > .player[data-position="1"] { top: calc(200% / 3 - 325px / 3); left: calc(100% - 240px); } -[data-number='6']>.player[data-position='2'] { +[data-number="6"] > .player[data-position="2"] { top: calc(100% / 3 - 230px / 3); left: calc(100% - 240px); } -[data-number='6']>.player[data-position='3'] { +[data-number="6"] > .player[data-position="3"] { top: 0; left: calc(50% - 120px); } -[data-number='6']>.player[data-position='4'] { +[data-number="6"] > .player[data-position="4"] { top: calc(100% / 3 - 230px / 3); left: 0; } -[data-number='6']>.player[data-position='5'] { +[data-number="6"] > .player[data-position="5"] { top: calc(200% / 3 - 325px / 3); left: 0; } -[data-number='6']>.card[data-position='1'] { +[data-number="6"] > .card[data-position="1"] { top: calc(200% / 3 - 325px / 3); left: calc(100% - 240px); } -[data-number='6']>.card[data-position='2'] { +[data-number="6"] > .card[data-position="2"] { top: calc(100% / 3 - 230px / 3); left: calc(100% - 240px); } -[data-number='6']>.card[data-position='3'] { +[data-number="6"] > .card[data-position="3"] { top: 0; left: calc(50% - 52px); } -[data-number='6']>.card[data-position='4'] { +[data-number="6"] > .card[data-position="4"] { top: calc(100% / 3 - 230px / 3); left: 120px; } -[data-number='6']>.card[data-position='5'] { +[data-number="6"] > .card[data-position="5"] { top: calc(200% / 3 - 325px / 3); left: 120px; } -[data-number='6']>.popup[data-position='1'] { +[data-number="6"] > .popup[data-position="1"] { top: calc(200% / 3 - 289px / 3); left: calc(100% - 270px); } -[data-number='6']>.popup[data-position='2'] { +[data-number="6"] > .popup[data-position="2"] { top: calc(100% / 3 - 194px / 3); left: calc(100% - 270px); } -[data-number='6']>.popup[data-position='3'] { +[data-number="6"] > .popup[data-position="3"] { top: 130px; left: calc(50% - 106px); } -[data-number='6']>.popup[data-position='4'] { +[data-number="6"] > .popup[data-position="4"] { top: calc(100% / 3 - 194px / 3); left: 250px; } -[data-number='6']>.popup[data-position='5'] { +[data-number="6"] > .popup[data-position="5"] { top: calc(200% / 3 - 289px / 3); left: 250px; } /*--------位置(5人)------*/ -[data-number='5']>.player[data-position='1'] { +[data-number="5"] > .player[data-position="1"] { top: calc(150% / 3 - 65px); left: calc(100% - 240px); } -[data-number='5']>.player[data-position='2'] { +[data-number="5"] > .player[data-position="2"] { top: 10px; left: calc(75% - 120px); } -[data-number='5']>.player[data-position='3'] { +[data-number="5"] > .player[data-position="3"] { top: 10px; left: calc(25% - 120px); } -[data-number='5']>.player[data-position='4'] { +[data-number="5"] > .player[data-position="4"] { top: calc(150% / 3 - 65px); left: 0; } -[data-number='5']>.card[data-position='1'] { +[data-number="5"] > .card[data-position="1"] { top: calc(150% / 3 - 65px); left: calc(100% - 240px); } -[data-number='5']>.card[data-position='2'] { +[data-number="5"] > .card[data-position="2"] { top: 10px; left: calc(75% - 120px); } -[data-number='5']>.card[data-position='3'] { +[data-number="5"] > .card[data-position="3"] { top: 10px; left: calc(25% - 0px); } -[data-number='5']>.card[data-position='4'] { +[data-number="5"] > .card[data-position="4"] { top: calc(150% / 3 - 65px); left: 120px; } -[data-number='5']>.popup[data-position='1'] { +[data-number="5"] > .popup[data-position="1"] { top: calc(150% / 3 - 53px); left: calc(100% - 270px); } -[data-number='5']>.popup[data-position='2'] { +[data-number="5"] > .popup[data-position="2"] { top: 140px; left: calc(75% - 150px); } -[data-number='5']>.popup[data-position='3'] { +[data-number="5"] > .popup[data-position="3"] { top: 140px; left: calc(25% + 120px); } -[data-number='5']>.popup[data-position='4'] { +[data-number="5"] > .popup[data-position="4"] { top: calc(150% / 3 - 53px); left: 250px; } /*--------位置(4人)------*/ -[data-number='4']>.player[data-position='1'] { +[data-number="4"] > .player[data-position="1"] { top: calc(100% / 3 - 40px); left: calc(100% - 240px); } -[data-number='4']>.player[data-position='2'] { +[data-number="4"] > .player[data-position="2"] { top: 0; left: calc(50% - 120px); } -[data-number='4']>.player[data-position='3'] { +[data-number="4"] > .player[data-position="3"] { top: calc(100% / 3 - 40px); left: 0; } -[data-number='4']>.card[data-position='1'] { +[data-number="4"] > .card[data-position="1"] { top: calc(100% / 3 - 40px); left: calc(100% - 240px); } -[data-number='4']>.card[data-position='2'] { +[data-number="4"] > .card[data-position="2"] { top: 0; left: calc(50% - 52px); } -[data-number='4']>.card[data-position='3'] { +[data-number="4"] > .card[data-position="3"] { top: calc(100% / 3 - 40px); left: 120px; } -[data-number='4']>.popup[data-position='1'] { +[data-number="4"] > .popup[data-position="1"] { top: calc(100% / 3 - 28px); left: calc(100% - 270px); } -[data-number='4']>.popup[data-position='2'] { +[data-number="4"] > .popup[data-position="2"] { top: 130px; left: calc(50% - 106px); } -[data-number='4']>.popup[data-position='3'] { +[data-number="4"] > .popup[data-position="3"] { top: calc(100% / 3 - 28px); left: 250px; } /*--------位置(3人)------*/ -[data-number='3']>.player[data-position='1'] { +[data-number="3"] > .player[data-position="1"] { top: 10px; left: calc(75% - 60px); } -[data-number='3']>.player[data-position='2'] { +[data-number="3"] > .player[data-position="2"] { top: 10px; left: calc(25% - 180px); } -[data-number='3']>.card[data-position='1'] { +[data-number="3"] > .card[data-position="1"] { top: 10px; left: calc(75% - 60px); } -[data-number='3']>.card[data-position='2'] { +[data-number="3"] > .card[data-position="2"] { top: 10px; left: calc(25% - 60px); } -[data-number='3']>.popup[data-position='1'] { +[data-number="3"] > .popup[data-position="1"] { top: 140px; left: calc(75% - 80px); } -[data-number='3']>.popup[data-position='2'] { +[data-number="3"] > .popup[data-position="2"] { top: 140px; left: calc(25% + 60px); } /*--------位置(2人)------*/ -[data-number='2']>.player[data-position='1'] { +[data-number="2"] > .player[data-position="1"] { top: 0; left: calc(50% - 120px); } -[data-number='2']>.card[data-position='1'] { +[data-number="2"] > .card[data-position="1"] { top: 0; left: calc(50% - 52px); } -[data-number='2']>.popup[data-position='1'] { +[data-number="2"] > .popup[data-position="1"] { top: 130px; left: calc(50% - 106px); } /*--------位置(1人)------*/ -.player[data-position='0'] { +.player[data-position="0"] { top: calc(100% - 130px); left: calc(50% - 120px); } -.card[data-position='0'] { +.card[data-position="0"] { top: calc(100% - 130px); left: calc(50% - 52px); } -.popup[data-position='0'] { +.popup[data-position="0"] { top: calc(100% - 176px); left: calc(50% - 106px); } -#window>.player.connect[data-position='c0'] { +#window > .player.connect[data-position="c0"] { left: calc(50% - 120px); - top: calc(50% - 200px) + top: calc(50% - 200px); } -#window>.player.connect[data-position='c1'] { +#window > .player.connect[data-position="c1"] { left: calc(50% - 120px); - top: calc(50% - 60px) + top: calc(50% - 60px); } -#window>.player.connect[data-position='c2'] { +#window > .player.connect[data-position="c2"] { left: calc(50% - 120px); - top: calc(50% + 80px) + top: calc(50% + 80px); } -#window>.player.connect[data-position='c0'] { +#window > .player.connect[data-position="c0"] { left: calc(50% - 140px); - top: calc(50% - 200px) + top: calc(50% - 200px); } -#window>.player.connect[data-position='c1'] { +#window > .player.connect[data-position="c1"] { left: calc(50% - 140px); - top: calc(50% - 60px) + top: calc(50% - 60px); } -#window>.player.connect[data-position='c2'] { +#window > .player.connect[data-position="c2"] { left: calc(50% - 140px); - top: calc(50% + 80px) + top: calc(50% + 80px); } -#window>.player.connect[data-position='c3'] { +#window > .player.connect[data-position="c3"] { left: calc(50% + 20px); - top: calc(50% - 200px) + top: calc(50% - 200px); } -#window>.player.connect[data-position='c4'] { +#window > .player.connect[data-position="c4"] { left: calc(50% + 20px); - top: calc(50% - 60px) + top: calc(50% - 60px); } -#window>.player.connect[data-position='c5'] { +#window > .player.connect[data-position="c5"] { left: calc(50% + 20px); - top: calc(50% + 80px) + top: calc(50% + 80px); } -#window>.player.connect[data-position='cx0']{ - left:calc(150% / 7 - 1275px / 7); - top:calc(300% / 7 - 160px + 5px); +#window > .player.connect[data-position="cx0"] { + left: calc(150% / 7 - 1275px / 7); + top: calc(300% / 7 - 160px + 5px); } -#window>.player.connect[data-position='cx1']{ - left:calc(247% / 7 - 850px / 7); - top:calc(300% / 7 - 160px + 5px); +#window > .player.connect[data-position="cx1"] { + left: calc(247% / 7 - 850px / 7); + top: calc(300% / 7 - 160px + 5px); } -#window>.player.connect[data-position='cx2']{ - left:calc(350% / 7 - 525px / 7); - top:calc(300% / 7 - 160px + 5px); +#window > .player.connect[data-position="cx2"] { + left: calc(350% / 7 - 525px / 7); + top: calc(300% / 7 - 160px + 5px); } -#window>.player.connect[data-position='cx3']{ - left:calc(453% / 7 - 200px / 7); - top:calc(300% / 7 - 160px + 5px); +#window > .player.connect[data-position="cx3"] { + left: calc(453% / 7 - 200px / 7); + top: calc(300% / 7 - 160px + 5px); } -#window>.player.connect[data-position='cx4']{ - left:calc(550% / 7 + 125px / 7); - top:calc(300% / 7 - 160px + 5px); +#window > .player.connect[data-position="cx4"] { + left: calc(550% / 7 + 125px / 7); + top: calc(300% / 7 - 160px + 5px); } -#window>.player.connect[data-position='cx5']{ - left:calc(150% / 7 - 1275px / 7); - top:calc(400% / 7 - 40px + 5px); +#window > .player.connect[data-position="cx5"] { + left: calc(150% / 7 - 1275px / 7); + top: calc(400% / 7 - 40px + 5px); } -#window>.player.connect[data-position='cx6']{ - left:calc(247% / 7 - 850px / 7); - top:calc(400% / 7 - 40px + 5px); +#window > .player.connect[data-position="cx6"] { + left: calc(247% / 7 - 850px / 7); + top: calc(400% / 7 - 40px + 5px); } -#window>.player.connect[data-position='cx7']{ - left:calc(350% / 7 - 525px / 7); - top:calc(400% / 7 - 40px + 5px); +#window > .player.connect[data-position="cx7"] { + left: calc(350% / 7 - 525px / 7); + top: calc(400% / 7 - 40px + 5px); } -#window>.player.connect[data-position='cx8']{ - left:calc(453% / 7 - 200px / 7); - top:calc(400% / 7 - 40px + 5px); +#window > .player.connect[data-position="cx8"] { + left: calc(453% / 7 - 200px / 7); + top: calc(400% / 7 - 40px + 5px); } -#window>.player.connect[data-position='cx9']{ - left:calc(550% / 7 + 125px / 7); - top:calc(400% / 7 - 40px + 5px); +#window > .player.connect[data-position="cx9"] { + left: calc(550% / 7 + 125px / 7); + top: calc(400% / 7 - 40px + 5px); } -#window>.player.connect { +#window > .player.connect { width: 120px; } -#window.menupaused>.player.connect{ +#window.menupaused > .player.connect { opacity: 0.5; } .connectbutton { @@ -3374,30 +3419,32 @@ div:not(.handcards)>.card>.info>span, bottom: 20px; z-index: 5; } -.connectevents.server{ +.connectevents.server { left: 20px; right: auto; } -.connectevents.left{ +.connectevents.left { transform: translateX(-85px); } -.connectevents.left2{ +.connectevents.left2 { transform: translateX(-170px); } -.connectevents.icon{ +.connectevents.icon { width: 20px; height: 20px; border-radius: 100%; padding: 0; font-size: 15px; - font-family: 'xinwei'; + font-family: "xinwei"; line-height: 22px; bottom: 47px; right: 13px; } /*--------动画--------*/ -.start,.equips>.card,.popup { +.start, +.equips > .card, +.popup { animation: game_start 0.5s; -webkit-animation: game_start 0.5s; } @@ -3422,10 +3469,10 @@ div:not(.handcards)>.card>.info>span, margin: 0; z-index: 3; } -#arena>.card.thrown { - pointer-events: none +#arena > .card.thrown { + pointer-events: none; } -#arena.thrownhighlight>.card.thrown:not(.thrownhighlight):not(.drawingcard) { +#arena.thrownhighlight > .card.thrown:not(.thrownhighlight):not(.drawingcard) { opacity: 0.5; transform: scale(0.95); /*-webkit-filter:blur(3px);*/ @@ -3438,20 +3485,20 @@ div:not(.handcards)>.card>.info>span, animation: card_judgestart 1s; -webkit-animation: card_judgestart 1s; } -#me>div>div>.card.start { +#me > div > div > .card.start { animation: card_start2 0.5s; -webkit-animation: card_start2 0.5s; } -#me>div>div>.card.drawinghidden { +#me > div > div > .card.drawinghidden { opacity: 0; transform: scale(0.2) !important; } -.marks>.card.drawinghidden, -.judges>.card.drawinghidden { +.marks > .card.drawinghidden, +.judges > .card.drawinghidden { opacity: 0; transform: scale(0.2); } -#me>.fakeme.avatar { +#me > .fakeme.avatar { width: 120px; height: 120px; border-radius: 8px; @@ -3459,36 +3506,36 @@ div:not(.handcards)>.card>.info>span, left: 10px; background-size: cover; } -#window[data-radius_size='reduce'] #me>.fakeme.avatar { +#window[data-radius_size="reduce"] #me > .fakeme.avatar { border-radius: 4px; } -#window[data-radius_size='off'] #me>.fakeme.avatar { +#window[data-radius_size="off"] #me > .fakeme.avatar { border-radius: 0px; } -#window[data-radius_size='increase'] #me>.fakeme.avatar { +#window[data-radius_size="increase"] #me > .fakeme.avatar { border-radius: 16px; } .card.removing { transform: scale(0); } -#me>div>div>.card.removing { +#me > div > div > .card.removing { margin-left: -52px; margin-right: -52px; } .card.thrown.removing { width: 104px; height: 104px; - transform: none + transform: none; } #sidebar.sidebar { animation: sidebar 0.5s; - -webkit-animation: sidebar 0.5s + -webkit-animation: sidebar 0.5s; } .button.zoom { animation: zoom_button 0.5s; - -webkit-animation: zoom_button 0.5s + -webkit-animation: zoom_button 0.5s; } -.content>.config.start { +.content > .config.start { animation: config 0.5s; -webkit-animation: config 0.5s; } @@ -3505,166 +3552,178 @@ div:not(.handcards)>.card>.info>span, -webkit-animation: flip 1s; } /*--------样式--------*/ -#arena.selecting:not(.video) .player[data-position='0'] .card:not(.selectable)>.background, -#arena.selecting:not(.video) .player[data-position='0'] .card:not(.selectable)>.image, -#arena.selecting:not(.video) .player[data-position='0'] .card:not(.selectable)>.name, -#arena.selecting:not(.video) .player[data-position='0'] .card:not(.selectable)>.name2, -#arena.selecting:not(.video) .player[data-position='0'] .card:not(.selectable)>.info, -#arena.selecting:not(.video) .player[data-position='0'] .card:not(.selectable)>.range, -#arena.selecting:not(.video) .player[data-position='0'] .card:not(.selectable)>.gaintag, -#arena.selecting:not(.video) .player[data-position='0'] .card:not(.selectable)>.addinfo, -#arena.selecting:not(.video) .player.current_action .card:not(.selectable)>.background, -#arena.selecting:not(.video) .player.current_action .card:not(.selectable)>.image, -#arena.selecting:not(.video) .player.current_action .card:not(.selectable)>.name, -#arena.selecting:not(.video) .player.current_action .card:not(.selectable)>.name2, -#arena.selecting:not(.video) .player.current_action .card:not(.selectable)>.info, -#arena.selecting:not(.video) .player.current_action .card:not(.selectable)>.range, -#arena.selecting:not(.video) .player.current_action .card:not(.selectable)>.gaintag, -#arena.selecting:not(.video) .player.current_action .card:not(.selectable)>.addinfo, -#arena.selecting:not(.video) #me .card:not(.selectable)>.background, -#arena.selecting:not(.video) #me .card:not(.selectable)>.image, -#arena.selecting:not(.video) #me .card:not(.selectable)>.name, -#arena.selecting:not(.video) #me .card:not(.selectable)>.name2, -#arena.selecting:not(.video) #me .card:not(.selectable)>.info, -#arena.selecting:not(.video) #me .card:not(.selectable)>.range, -#arena.selecting:not(.video) #me .card:not(.selectable)>.gaintag, -#arena.selecting:not(.video) #me .card:not(.selectable)>.addinfo, -#arena.selecting:not(.video) .dialog:not(.noselect) .button:not(.selectable):not(.noclick):not(.replaceButton), -#arena.selecting:not(.video) .dialog:not(.noselect) .textbutton:not(.selectable):not(.noclick):not(.replaceButton), -#arena.selecting:not(.video) .dialog:not(.noselect) .tdnodes:not(.selectable):not(.noclick):not(.replaceButton), -.dead,.likedead { +#arena.selecting:not(.video) .player[data-position="0"] .card:not(.selectable) > .background, +#arena.selecting:not(.video) .player[data-position="0"] .card:not(.selectable) > .image, +#arena.selecting:not(.video) .player[data-position="0"] .card:not(.selectable) > .name, +#arena.selecting:not(.video) .player[data-position="0"] .card:not(.selectable) > .name2, +#arena.selecting:not(.video) .player[data-position="0"] .card:not(.selectable) > .info, +#arena.selecting:not(.video) .player[data-position="0"] .card:not(.selectable) > .range, +#arena.selecting:not(.video) .player[data-position="0"] .card:not(.selectable) > .gaintag, +#arena.selecting:not(.video) .player[data-position="0"] .card:not(.selectable) > .addinfo, +#arena.selecting:not(.video) .player.current_action .card:not(.selectable) > .background, +#arena.selecting:not(.video) .player.current_action .card:not(.selectable) > .image, +#arena.selecting:not(.video) .player.current_action .card:not(.selectable) > .name, +#arena.selecting:not(.video) .player.current_action .card:not(.selectable) > .name2, +#arena.selecting:not(.video) .player.current_action .card:not(.selectable) > .info, +#arena.selecting:not(.video) .player.current_action .card:not(.selectable) > .range, +#arena.selecting:not(.video) .player.current_action .card:not(.selectable) > .gaintag, +#arena.selecting:not(.video) .player.current_action .card:not(.selectable) > .addinfo, +#arena.selecting:not(.video) #me .card:not(.selectable) > .background, +#arena.selecting:not(.video) #me .card:not(.selectable) > .image, +#arena.selecting:not(.video) #me .card:not(.selectable) > .name, +#arena.selecting:not(.video) #me .card:not(.selectable) > .name2, +#arena.selecting:not(.video) #me .card:not(.selectable) > .info, +#arena.selecting:not(.video) #me .card:not(.selectable) > .range, +#arena.selecting:not(.video) #me .card:not(.selectable) > .gaintag, +#arena.selecting:not(.video) #me .card:not(.selectable) > .addinfo, +#arena.selecting:not(.video) + .dialog:not(.noselect) + .button:not(.selectable):not(.noclick):not(.replaceButton), +#arena.selecting:not(.video) + .dialog:not(.noselect) + .textbutton:not(.selectable):not(.noclick):not(.replaceButton), +#arena.selecting:not(.video) + .dialog:not(.noselect) + .tdnodes:not(.selectable):not(.noclick):not(.replaceButton), +.dead, +.likedead { opacity: 0.6; } -#window:not(.nopointer) .player .judges>.card, -#window:not(.nopointer) .player .marks>.card{ +#window:not(.nopointer) .player .judges > .card, +#window:not(.nopointer) .player .marks > .card { cursor: context-menu; } -#window:not(.nopointer) .player .identity.guessing{ +#window:not(.nopointer) .player .identity.guessing { cursor: help; } -#window:not(.nopointer) #system>div>div:not(.hidden), +#window:not(.nopointer) #system > div > div:not(.hidden), #window:not(.nopointer) .choosedouble.character, #window:not(.nopointer) .config.more, #window:not(.nopointer) .dashboard, #window:not(.nopointer) .textlink, #window:not(.nopointer) .hrefnode, -#window:not(.nopointer) #historybar>div>div, +#window:not(.nopointer) #historybar > div > div, #window:not(.nopointer) .closenode, #window:not(.nopointer) .pointerdiv, #window:not(.nopointer) .pointernode div, #window:not(.nopointer) .pointerspan span, -#window:not(.nopointer) .pointertable td>span, -#window:not(.nopointer) .config>.toggle.onoff, +#window:not(.nopointer) .pointertable td > span, +#window:not(.nopointer) .config > .toggle.onoff, #window:not(.nopointer) .pointerdialog .button:not(.unselectable), -#window:not(.nopointer) .dialog.fullheight .buttons .button:not(.selectedx):not(.glow):not(.glows):not(.forbidden), -#window:not(.nopointer) #arena.selecting:not(.video) .player .equips>.card.selectable, +#window:not(.nopointer) + .dialog.fullheight + .buttons + .button:not(.selectedx):not(.glow):not(.glows):not(.forbidden), +#window:not(.nopointer) #arena.selecting:not(.video) .player .equips > .card.selectable, #window:not(.nopointer) #arena.selecting #me .card.selectable, #window:not(.nopointer) #arena.selecting .button.selectable, #window:not(.nopointer) #arena.selecting .player.selectable, #window:not(.nopointer) .menubutton.round, -*[data-cursor_style="pointer"]{ +*[data-cursor_style="pointer"] { cursor: pointer; } -*[data-cursor_style="forbidden"]{ +*[data-cursor_style="forbidden"] { cursor: not-allowed; } -*[data-cursor_style="menu"]{ +*[data-cursor_style="menu"] { cursor: context-menu; } -*[data-cursor_style="zoom"]{ +*[data-cursor_style="zoom"] { cursor: -webkit-zoom-in; } -#arena.dragging{ +#arena.dragging { cursor: -webkit-grabbing; } -#arena.selecting:not(.video) .player[data-position='0'] .marks>.card:not(.selectable)>.image, -#arena.selecting:not(.video) .player[data-position='0'] .judges>.card:not(.selectable)>.image, -#arena.selecting:not(.video) .player[data-position='0'] .judges>.card:not(.selectable)>.background, -#arena.selecting:not(.video) .player .marks>.card:not(.selectable)>.image, -#arena.selecting:not(.video) .player .judges>.card:not(.selectable)>.image, -#arena.selecting:not(.video) .player .judges>.card:not(.selectable)>.background { +#arena.selecting:not(.video) .player[data-position="0"] .marks > .card:not(.selectable) > .image, +#arena.selecting:not(.video) .player[data-position="0"] .judges > .card:not(.selectable) > .image, +#arena.selecting:not(.video) .player[data-position="0"] .judges > .card:not(.selectable) > .background, +#arena.selecting:not(.video) .player .marks > .card:not(.selectable) > .image, +#arena.selecting:not(.video) .player .judges > .card:not(.selectable) > .image, +#arena.selecting:not(.video) .player .judges > .card:not(.selectable) > .background { opacity: 1; } -#arena.tempnoe .player.selectable .equips>.card{ +#arena.tempnoe .player.selectable .equips > .card { pointer-events: none; } .unselectable:not(.selected):not(.removing) { - opacity: 0.6 !important + opacity: 0.6 !important; } .unselectable2 { - opacity: 0.4 !important + opacity: 0.4 !important; } -.mark>.background { +.mark > .background { opacity: 1 !important; } #arena.selecting:not(.video) #me .card:not(.selectable) { - opacity: 0.8 + opacity: 0.8; } -.button.character.banned,.button.card.banned { - opacity: 0.5 +.button.character.banned, +.button.card.banned { + opacity: 0.5; } -.card.selectable>.background, -.card.selectable>.name, -.card.selectable>.name2, -.card.selectable>.info, -.card.selectable>.range, -.card.selectable>.gaintag, +.card.selectable > .background, +.card.selectable > .name, +.card.selectable > .name2, +.card.selectable > .info, +.card.selectable > .range, +.card.selectable > .gaintag, .button.selectable { opacity: 1; } .card { - color: rgba(0,0,0,0.3); + color: rgba(0, 0, 0, 0.3); text-shadow: none; } .fire { - color: rgba(255,0,0,0.3); + color: rgba(255, 0, 0, 0.3); } .thunder { - color: rgba(0,80,255,0.3); + color: rgba(0, 80, 255, 0.3); } .kami { - color: rgba(90,118,99,0.3); + color: rgba(90, 118, 99, 0.3); } .ice { - color: rgba(0,153,255,0.3); + color: rgba(0, 153, 255, 0.3); } .poison { - color: rgba(30, 133, 51,0.4); + color: rgba(30, 133, 51, 0.4); } .brown { color: rgba(133, 92, 30, 0.4); } .purple { - color: rgba(177, 62, 177,0.4); + color: rgba(177, 62, 177, 0.4); } -.player,.button.character { +.player, +.button.character { color: white; text-shadow: black 0 0 2px; } -.turnedover>div { +.turnedover > div { opacity: 0.3; } -.turnedover>.identity, -.turnedover>.framebg, -.turnedover>.marks, -.turnedover>.judges { +.turnedover > .identity, +.turnedover > .framebg, +.turnedover > .marks, +.turnedover > .judges { opacity: 0.7; } .intro:not(.showintro) { opacity: 0; - display: none !important + display: none !important; } .intro.showintro { - white-space: nowrap + white-space: nowrap; } -div:hover>.intro { +div:hover > .intro { opacity: 1; } /*.hp>div{background: white;box-shadow:0px 1px 1px rgba(0,0,0,0.5);border:1px solid #fff;border-radius: 8px;}*/ @@ -3675,25 +3734,25 @@ div:hover>.intro { } .player .identity { - z-index: 4 + z-index: 4; } .info { border-radius: 10px; } -.dialog>.bar { +.dialog > .bar { position: absolute; width: 100%; height: 5px; left: 0; opacity: 0; } -.dialog>.bar.top { +.dialog > .bar.top { top: 0; } -.dialog>.bar.bottom { +.dialog > .bar.bottom { bottom: 0; } -.dialog>.content-container { +.dialog > .content-container { width: 100%; height: calc(100% - 0px); /*height:calc(100% - 5px);*/ @@ -3708,7 +3767,7 @@ div:hover>.intro { .dialog.slim { top: 300px; bottom: auto; - min-height: none + min-height: none; } /*.dialog.scroll1{box-shadow:0 -10px 10px -9px rgba(0,0,0,0.1),0 -10px 0 -9px rgba(0,0,0,0.05);} .dialog.scroll2{box-shadow:0 10px 10px -9px rgba(0,0,0,0.1),0 10px 0 -9px rgba(0,0,0,0.05)} @@ -3720,54 +3779,55 @@ div:hover>.intro { /*.player.target{-webkit-filter:brightness(1.2)}*/ .target { - box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px,rgba(255, 0, 0, 0.4) 0 0 5px, rgba(255, 0, 0, 0.5) 0 0 12px, rgba(255, 0, 0, 0.8) 0 0 15px !important + box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(255, 0, 0, 0.4) 0 0 5px, rgba(255, 0, 0, 0.5) 0 0 12px, + rgba(255, 0, 0, 0.8) 0 0 15px !important; } #mebg.target { transform: none !important; } -#arena[data-target_shake='shake'] .target { +#arena[data-target_shake="shake"] .target { transform: rotate(-3deg); } -#arena[data-target_shake='shake'] .target2 { +#arena[data-target_shake="shake"] .target2 { transform: rotate(3deg); } -#arena[data-target_shake='zoom'] .target, -#arena[data-target_shake='zoom'] .target2 { +#arena[data-target_shake="zoom"] .target, +#arena[data-target_shake="zoom"] .target2 { transform: scale(1.03); } -.content>.config.line2 { +.content > .config.line2 { transform: translateX(-5px); } .popup { - background: rgba(0,0,0,0.2); + background: rgba(0, 0, 0, 0.2); box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px; border-radius: 4px; } -.tdnode{ - position:relative !important; - display:inline-block; - padding:5px !important; - padding-left:8px !important; - padding-right:8px !important; - font-size:18px !important; - margin:4px !important; - margin-left:6px !important; - margin-right:6px !important; +.tdnode { + position: relative !important; + display: inline-block; + padding: 5px !important; + padding-left: 8px !important; + padding-right: 8px !important; + font-size: 18px !important; + margin: 4px !important; + margin-left: 6px !important; + margin-right: 6px !important; width: auto !important; } -.tdnode.thundertext{ - background-image: linear-gradient(rgba(47,101,150,1), rgba(43, 90, 132,1)) !important; +.tdnode.thundertext { + background-image: linear-gradient(rgba(47, 101, 150, 1), rgba(43, 90, 132, 1)) !important; } -.tdnode.reduce_margin{ +.tdnode.reduce_margin { margin-left: 4px !important; margin-right: 4px !important; } .shadowed, .menubutton.large.shadowed { - background: rgba(0,0,0,0.2); + background: rgba(0, 0, 0, 0.2); box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px; border-radius: 8px; color: white !important; @@ -3775,37 +3835,37 @@ div:hover>.intro { .shadowed2 { box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px; } -#window[data-radius_size='reduce'] .shadowed { +#window[data-radius_size="reduce"] .shadowed { border-radius: 4px; } -#window[data-radius_size='off'] .shadowed { +#window[data-radius_size="off"] .shadowed { border-radius: 0px; } -#window[data-radius_size='increase'] .shadowed { +#window[data-radius_size="increase"] .shadowed { border-radius: 16px; } -#window[data-radius_size='default'] .shadowed.reduce_radius { +#window[data-radius_size="default"] .shadowed.reduce_radius { border-radius: 4px; } -#window>.choosedouble { +#window > .choosedouble { left: 50%; top: 50%; } -#window>.choosedouble:not(.character) { +#window > .choosedouble:not(.character) { transition-duration: 0.2s; } -#window>.choosedouble.character { +#window > .choosedouble.character { transform-origin: top left; transition-property: opacity, transform; } -#window>.choosedouble.character.moved { +#window > .choosedouble.character.moved { z-index: 1; } -#window:not(.nopointer)>.choosedouble.character.moved:not(.selecting){ +#window:not(.nopointer) > .choosedouble.character.moved:not(.selecting) { cursor: default; } -#window>.choosedouble.character>.name { +#window > .choosedouble.character > .name { left: 6%; top: 8%; white-space: nowrap; @@ -3813,13 +3873,14 @@ div:hover>.intro { -webkit-writing-mode: vertical-rl; } -.hrefnode{ +.hrefnode { text-decoration: underline; } -.closenode{ +.closenode { float: right; } -.underline,.underlinenode { +.underline, +.underlinenode { padding: 3px; width: auto; display: inline-block; @@ -3830,17 +3891,18 @@ div:hover>.intro { .underlinenode.slim { padding-bottom: 0; } -.underlinenode.gray:not(.on){ +.underlinenode.gray:not(.on) { border-color: rgb(133, 133, 133); opacity: 0.5; } -.on>.underline,.underlinenode.on { +.on > .underline, +.underlinenode.on { border-color: rgb(0, 133, 255); } .config.underlined { overflow: visible; } -.config.underlined>div { +.config.underlined > div { border-width: 0 0 2px; border-style: solid; border-color: rgb(0, 133, 255); @@ -3851,7 +3913,7 @@ div:hover>.intro { width: calc(100% - 16px); display: flex; } -.newgame>div { +.newgame > div { padding: 3px; position: relative; margin: auto; @@ -3866,9 +3928,9 @@ div:hover>.intro { transition: all 0.2s; } -.player .identity>div { +.player .identity > div { position: relative; - font-family: 'huangcao','xinwei'; + font-family: "huangcao", "xinwei"; font-size: 24px; line-height: 24px; top: 0; @@ -3880,30 +3942,31 @@ div:hover>.intro { .player .identity[data-color="zhu"], .player .identity[data-color="truezhu"], .player .identity[data-color="enemy"], -div[data-nature='zhu'], -span[data-nature='zhu'], -div[data-nature='enemy'], -span[data-nature='enemy'], -div[data-nature='fire'], -span[data-nature='fire'] { - text-shadow: black 0 0 1px,rgba(232, 53, 53,1) 0 0 2px,rgba(232, 53, 53,1) 0 0 5px,rgba(232, 53, 53,1) 0 0 10px, - rgba(232, 53, 53,1) 0 0 10px,rgba(232, 53, 53,1) 0 0 20px,rgba(232, 53, 53,1) 0 0 20px +div[data-nature="zhu"], +span[data-nature="zhu"], +div[data-nature="enemy"], +span[data-nature="enemy"], +div[data-nature="fire"], +span[data-nature="fire"] { + text-shadow: black 0 0 1px, rgba(232, 53, 53, 1) 0 0 2px, rgba(232, 53, 53, 1) 0 0 5px, + rgba(232, 53, 53, 1) 0 0 10px, rgba(232, 53, 53, 1) 0 0 10px, rgba(232, 53, 53, 1) 0 0 20px, + rgba(232, 53, 53, 1) 0 0 20px; } -div[data-nature='firem'], -span[data-nature='firem'] { - text-shadow: black 0 0 1px,rgba(232, 53, 53,1) 0 0 2px,rgba(232, 53, 53,1) 0 0 5px,rgba(232, 53, 53,1) 0 0 5px, - rgba(232, 53, 53,1) 0 0 5px,black 0 0 1px; +div[data-nature="firem"], +span[data-nature="firem"] { + text-shadow: black 0 0 1px, rgba(232, 53, 53, 1) 0 0 2px, rgba(232, 53, 53, 1) 0 0 5px, + rgba(232, 53, 53, 1) 0 0 5px, rgba(232, 53, 53, 1) 0 0 5px, black 0 0 1px; } -div[data-nature='firemx'], -span[data-nature='firemx'] { - text-shadow: black 0 0 1px,rgba(191, 0, 0,0.2) 0 0 2px,rgba(191, 0, 0,1) 0 0 2px,rgba(191, 0, 0,1) 0 0 5px, - rgba(191, 0, 0,1) 0 0 5px,black 0 0 1px; +div[data-nature="firemx"], +span[data-nature="firemx"] { + text-shadow: black 0 0 1px, rgba(191, 0, 0, 0.2) 0 0 2px, rgba(191, 0, 0, 1) 0 0 2px, + rgba(191, 0, 0, 1) 0 0 5px, rgba(191, 0, 0, 1) 0 0 5px, black 0 0 1px; } -div[data-nature='firemm'], -span[data-nature='firemm'] { - text-shadow: black 0 0 1px,rgba(232, 53, 53,1) 0 0 2px,rgba(232, 53, 53,1) 0 0 2px,rgba(232, 53, 53,1) 0 0 2px, - rgba(232, 53, 53,1) 0 0 2px,black 0 0 1px; +div[data-nature="firemm"], +span[data-nature="firemm"] { + text-shadow: black 0 0 1px, rgba(232, 53, 53, 1) 0 0 2px, rgba(232, 53, 53, 1) 0 0 2px, + rgba(232, 53, 53, 1) 0 0 2px, rgba(232, 53, 53, 1) 0 0 2px, black 0 0 1px; } .player .identity[data-color="mingzhong"], @@ -3911,96 +3974,99 @@ span[data-nature='firemm'] { .player .identity[data-color="rZhong"], .player .identity[data-color="rNei"], .player .identity[data-color="cai2"], -div[data-nature='orange'], -span[data-nature='orange'] { - text-shadow: rgba(255, 120, 0,1) 0 0 2px,rgba(255, 120, 0,1) 0 0 5px,rgba(255, 120, 0,1) 0 0 10px, - rgba(255, 120, 0,1) 0 0 10px,rgba(255, 120, 0,1) 0 0 20px,rgba(255, 120, 0,1) 0 0 20px,black 0 0 1px; +div[data-nature="orange"], +span[data-nature="orange"] { + text-shadow: rgba(255, 120, 0, 1) 0 0 2px, rgba(255, 120, 0, 1) 0 0 5px, rgba(255, 120, 0, 1) 0 0 10px, + rgba(255, 120, 0, 1) 0 0 10px, rgba(255, 120, 0, 1) 0 0 20px, rgba(255, 120, 0, 1) 0 0 20px, + black 0 0 1px; } -div[data-nature='orangem'], -span[data-nature='orangem'] { - text-shadow: rgba(255, 120, 0,1) 0 0 2px,rgba(255, 120, 0,1) 0 0 5px,rgba(255, 120, 0,1) 0 0 5px, - rgba(255, 120, 0,1) 0 0 5px,black 0 0 1px; +div[data-nature="orangem"], +span[data-nature="orangem"] { + text-shadow: rgba(255, 120, 0, 1) 0 0 2px, rgba(255, 120, 0, 1) 0 0 5px, rgba(255, 120, 0, 1) 0 0 5px, + rgba(255, 120, 0, 1) 0 0 5px, black 0 0 1px; } -div[data-nature='orangemm'], -span[data-nature='orangemm'] { - text-shadow: rgba(255, 120, 0,1) 0 0 2px,rgba(255, 120, 0,1) 0 0 2px,rgba(255, 120, 0,1) 0 0 2px, - rgba(255, 120, 0,1) 0 0 2px,black 0 0 1px; +div[data-nature="orangemm"], +span[data-nature="orangemm"] { + text-shadow: rgba(255, 120, 0, 1) 0 0 2px, rgba(255, 120, 0, 1) 0 0 2px, rgba(255, 120, 0, 1) 0 0 2px, + rgba(255, 120, 0, 1) 0 0 2px, black 0 0 1px; } -div[data-nature='firemx'], -span[data-nature='firemx'] { - text-shadow: black 0 0 1px,rgba(255, 120, 0,0.2) 0 0 2px,rgba(255, 120, 0,1) 0 0 2px,rgba(255, 120, 0,1) 0 0 5px, - rgba(255, 120, 0,1) 0 0 5px,black 0 0 1px; +div[data-nature="firemx"], +span[data-nature="firemx"] { + text-shadow: black 0 0 1px, rgba(255, 120, 0, 0.2) 0 0 2px, rgba(255, 120, 0, 1) 0 0 2px, + rgba(255, 120, 0, 1) 0 0 5px, rgba(255, 120, 0, 1) 0 0 5px, black 0 0 1px; } .player .identity[data-color="zhong"], .player .identity[data-color="qun"], .player .identity[data-color="neutral"], .player .identity[data-color="friend2"], -div[data-nature='zhong'], -span[data-nature='zhong'], -div[data-nature='metal'], -span[data-nature='metal'] { - text-shadow: black 0 0 1px,rgba(255, 203, 0,1) 0 0 2px,rgba(255, 203, 0,1) 0 0 5px,rgba(255, 203, 0,1) 0 0 10px, - rgba(255, 203, 0,1) 0 0 10px +div[data-nature="zhong"], +span[data-nature="zhong"], +div[data-nature="metal"], +span[data-nature="metal"] { + text-shadow: black 0 0 1px, rgba(255, 203, 0, 1) 0 0 2px, rgba(255, 203, 0, 1) 0 0 5px, + rgba(255, 203, 0, 1) 0 0 10px, rgba(255, 203, 0, 1) 0 0 10px; } -div[data-nature='metalm'], -span[data-nature='metalm'] { - text-shadow: black 0 0 1px,rgba(255, 203, 0,1) 0 0 2px,rgba(255, 203, 0,1) 0 0 5px,rgba(255, 203, 0,1) 0 0 5px, - rgba(255, 203, 0,1) 0 0 5px,black 0 0 1px; +div[data-nature="metalm"], +span[data-nature="metalm"] { + text-shadow: black 0 0 1px, rgba(255, 203, 0, 1) 0 0 2px, rgba(255, 203, 0, 1) 0 0 5px, + rgba(255, 203, 0, 1) 0 0 5px, rgba(255, 203, 0, 1) 0 0 5px, black 0 0 1px; } -div[data-nature='metalmm'], -span[data-nature='metalmm'] { - text-shadow: black 0 0 1px,rgba(255, 203, 0,1) 0 0 2px,rgba(255, 203, 0,1) 0 0 2px,rgba(255, 203, 0,1) 0 0 2px, - rgba(255, 203, 0,1) 0 0 2px,black 0 0 1px; +div[data-nature="metalmm"], +span[data-nature="metalmm"] { + text-shadow: black 0 0 1px, rgba(255, 203, 0, 1) 0 0 2px, rgba(255, 203, 0, 1) 0 0 2px, + rgba(255, 203, 0, 1) 0 0 2px, rgba(255, 203, 0, 1) 0 0 2px, black 0 0 1px; } .player .identity[data-color="key"], -div[data-nature='key'], -span[data-nature='key'] { - text-shadow: rgba(203, 177, 255,1) 0 0 2px,rgba(203, 177, 255,1) 0 0 5px,rgba(203, 177, 255,1) 0 0 10px, - rgba(203, 177, 255,1) 0 0 10px,rgba(203, 177, 255,1) 0 0 20px,rgba(203, 177, 255,1) 0 0 20px,black 0 0 1px; +div[data-nature="key"], +span[data-nature="key"] { + text-shadow: rgba(203, 177, 255, 1) 0 0 2px, rgba(203, 177, 255, 1) 0 0 5px, + rgba(203, 177, 255, 1) 0 0 10px, rgba(203, 177, 255, 1) 0 0 10px, rgba(203, 177, 255, 1) 0 0 20px, + rgba(203, 177, 255, 1) 0 0 20px, black 0 0 1px; } -div[data-nature='keym'], -span[data-nature='keym'] { - text-shadow: rgba(203, 177, 255,1) 0 0 2px,rgba(203, 177, 255,1) 0 0 5px,rgba(203, 177, 255,1) 0 0 5px, - rgba(203, 177, 255,1) 0 0 5px,black 0 0 1px; +div[data-nature="keym"], +span[data-nature="keym"] { + text-shadow: rgba(203, 177, 255, 1) 0 0 2px, rgba(203, 177, 255, 1) 0 0 5px, + rgba(203, 177, 255, 1) 0 0 5px, rgba(203, 177, 255, 1) 0 0 5px, black 0 0 1px; } -div[data-nature='keymm'], -span[data-nature='keymm'] { - text-shadow: rgba(203, 177, 255,1) 0 0 2px,rgba(203, 177, 255,1) 0 0 2px,rgba(203, 177, 255,1) 0 0 2px, - rgba(203, 177, 255,1) 0 0 2px,black 0 0 1px; +div[data-nature="keymm"], +span[data-nature="keymm"] { + text-shadow: rgba(203, 177, 255, 1) 0 0 2px, rgba(203, 177, 255, 1) 0 0 2px, + rgba(203, 177, 255, 1) 0 0 2px, rgba(203, 177, 255, 1) 0 0 2px, black 0 0 1px; } - -div[data-nature='shen'], -span[data-nature='shen'] { - text-shadow: rgba(243, 171, 27, 1) 0 0 2px,rgba(243, 171, 27, 1) 0 0 5px,rgba(243, 171, 27, 1) 0 0 10px, - rgba(243, 171, 27, 1) 0 0 10px,rgba(243, 171, 27, 1) 0 0 20px,rgba(243, 171, 27, 1) 0 0 20px,black 0 0 1px; +div[data-nature="shen"], +span[data-nature="shen"] { + text-shadow: rgba(243, 171, 27, 1) 0 0 2px, rgba(243, 171, 27, 1) 0 0 5px, rgba(243, 171, 27, 1) 0 0 10px, + rgba(243, 171, 27, 1) 0 0 10px, rgba(243, 171, 27, 1) 0 0 20px, rgba(243, 171, 27, 1) 0 0 20px, + black 0 0 1px; } -div[data-nature='shenm'], -span[data-nature='shenm'] { - text-shadow: rgba(243, 171, 27, 1) 0 0 2px,rgba(243, 171, 27, 1) 0 0 5px,rgba(243, 171, 27, 1) 0 0 5px, - rgba(243, 171, 27, 1) 0 0 5px,black 0 0 1px; +div[data-nature="shenm"], +span[data-nature="shenm"] { + text-shadow: rgba(243, 171, 27, 1) 0 0 2px, rgba(243, 171, 27, 1) 0 0 5px, rgba(243, 171, 27, 1) 0 0 5px, + rgba(243, 171, 27, 1) 0 0 5px, black 0 0 1px; } -div[data-nature='shenmm'], -span[data-nature='shenmm'] { - text-shadow: rgba(243, 171, 27, 1) 0 0 2px,rgba(243, 171, 27, 1) 0 0 2px,rgba(243, 171, 27, 1) 0 0 2px, - rgba(243, 171, 27, 1) 0 0 2px,black 0 0 1px; +div[data-nature="shenmm"], +span[data-nature="shenmm"] { + text-shadow: rgba(243, 171, 27, 1) 0 0 2px, rgba(243, 171, 27, 1) 0 0 2px, rgba(243, 171, 27, 1) 0 0 2px, + rgba(243, 171, 27, 1) 0 0 2px, black 0 0 1px; } -div[data-nature='qun'], -span[data-nature='qun'] { - text-shadow: rgba(164, 164, 164, 1) 0 0 2px,rgba(164, 164, 164, 1) 0 0 5px,rgba(164, 164, 164, 1) 0 0 10px, - rgba(164, 164, 164, 1) 0 0 10px,rgba(164, 164, 164, 1) 0 0 20px,rgba(164, 164, 164, 1) 0 0 20px,black 0 0 1px; +div[data-nature="qun"], +span[data-nature="qun"] { + text-shadow: rgba(164, 164, 164, 1) 0 0 2px, rgba(164, 164, 164, 1) 0 0 5px, + rgba(164, 164, 164, 1) 0 0 10px, rgba(164, 164, 164, 1) 0 0 10px, rgba(164, 164, 164, 1) 0 0 20px, + rgba(164, 164, 164, 1) 0 0 20px, black 0 0 1px; } -div[data-nature='qunm'], -span[data-nature='qunm'] { - text-shadow: rgba(164, 164, 164, 1) 0 0 2px,rgba(164, 164, 164, 1) 0 0 5px,rgba(164, 164, 164, 1) 0 0 5px, - rgba(164, 164, 164, 1) 0 0 5px,black 0 0 1px; +div[data-nature="qunm"], +span[data-nature="qunm"] { + text-shadow: rgba(164, 164, 164, 1) 0 0 2px, rgba(164, 164, 164, 1) 0 0 5px, + rgba(164, 164, 164, 1) 0 0 5px, rgba(164, 164, 164, 1) 0 0 5px, black 0 0 1px; } -div[data-nature='qunmm'], -span[data-nature='qunmm'] { - text-shadow: rgba(164, 164, 164, 1) 0 0 2px,rgba(164, 164, 164, 1) 0 0 2px,rgba(164, 164, 164, 1) 0 0 2px, - rgba(164, 164, 164, 1) 0 0 2px,black 0 0 1px; +div[data-nature="qunmm"], +span[data-nature="qunmm"] { + text-shadow: rgba(164, 164, 164, 1) 0 0 2px, rgba(164, 164, 164, 1) 0 0 2px, + rgba(164, 164, 164, 1) 0 0 2px, rgba(164, 164, 164, 1) 0 0 2px, black 0 0 1px; } .player .identity[data-color="nei"], @@ -4008,65 +4074,69 @@ span[data-nature='qunmm'] { .player .identity[data-color="rYe"], .player .identity[data-color="bYe"], .player .identity[data-color="jin"], -div[data-nature='nei'], -span[data-nature='nei'], -div[data-nature='thunder'], -span[data-nature='thunder'] { - text-shadow: rgba(100, 74, 139,1) 0 0 2px,rgba(100, 74, 139,1) 0 0 5px,rgba(100, 74, 139,1) 0 0 10px, - rgba(100, 74, 139,1) 0 0 10px,rgba(100, 74, 139,1) 0 0 20px,rgba(100, 74, 139,1) 0 0 20px,black 0 0 1px; +div[data-nature="nei"], +span[data-nature="nei"], +div[data-nature="thunder"], +span[data-nature="thunder"] { + text-shadow: rgba(100, 74, 139, 1) 0 0 2px, rgba(100, 74, 139, 1) 0 0 5px, rgba(100, 74, 139, 1) 0 0 10px, + rgba(100, 74, 139, 1) 0 0 10px, rgba(100, 74, 139, 1) 0 0 20px, rgba(100, 74, 139, 1) 0 0 20px, + black 0 0 1px; } -div[data-nature='thunderm'], -span[data-nature='thunderm'] { - text-shadow: rgba(100, 74, 139,1) 0 0 2px,rgba(100, 74, 139,1) 0 0 5px,rgba(100, 74, 139,1) 0 0 5px, - rgba(100, 74, 139,1) 0 0 5px,black 0 0 1px; +div[data-nature="thunderm"], +span[data-nature="thunderm"] { + text-shadow: rgba(100, 74, 139, 1) 0 0 2px, rgba(100, 74, 139, 1) 0 0 5px, rgba(100, 74, 139, 1) 0 0 5px, + rgba(100, 74, 139, 1) 0 0 5px, black 0 0 1px; } -div[data-nature='thundermm'], -span[data-nature='thundermm'] { - text-shadow: rgba(100, 74, 139,1) 0 0 2px,rgba(100, 74, 139,1) 0 0 2px,rgba(100, 74, 139,1) 0 0 2px, - rgba(100, 74, 139,1) 0 0 2px,black 0 0 1px; +div[data-nature="thundermm"], +span[data-nature="thundermm"] { + text-shadow: rgba(100, 74, 139, 1) 0 0 2px, rgba(100, 74, 139, 1) 0 0 2px, rgba(100, 74, 139, 1) 0 0 2px, + rgba(100, 74, 139, 1) 0 0 2px, black 0 0 1px; } .player .identity[data-color="kami"], -div[data-nature='kami'], -span[data-nature='kami'] { - text-shadow: rgba(90, 118, 99,1) 0 0 2px,rgba(90, 118, 99,1) 0 0 5px,rgba(90, 118, 99,1) 0 0 10px, - rgba(90, 118, 99,1) 0 0 10px,rgba(90, 118, 99,1) 0 0 20px,rgba(90, 118, 99,1) 0 0 20px,black 0 0 1px; +div[data-nature="kami"], +span[data-nature="kami"] { + text-shadow: rgba(90, 118, 99, 1) 0 0 2px, rgba(90, 118, 99, 1) 0 0 5px, rgba(90, 118, 99, 1) 0 0 10px, + rgba(90, 118, 99, 1) 0 0 10px, rgba(90, 118, 99, 1) 0 0 20px, rgba(90, 118, 99, 1) 0 0 20px, + black 0 0 1px; } -div[data-nature='kamim'], -span[data-nature='kamim'] { - text-shadow: rgba(90, 118, 99,1) 0 0 2px,rgba(90, 118, 99,1) 0 0 5px,rgba(90, 118, 99,1) 0 0 5px, - rgba(90, 118, 99,1) 0 0 5px,black 0 0 1px; +div[data-nature="kamim"], +span[data-nature="kamim"] { + text-shadow: rgba(90, 118, 99, 1) 0 0 2px, rgba(90, 118, 99, 1) 0 0 5px, rgba(90, 118, 99, 1) 0 0 5px, + rgba(90, 118, 99, 1) 0 0 5px, black 0 0 1px; } -div[data-nature='kamimm'], -span[data-nature='kamimm'] { - text-shadow: rgba(90, 118, 99,1) 0 0 2px,rgba(90, 118, 99,1) 0 0 2px,rgba(90, 118, 99,1) 0 0 2px, - rgba(90, 118, 99,1) 0 0 2px,black 0 0 1px; +div[data-nature="kamimm"], +span[data-nature="kamimm"] { + text-shadow: rgba(90, 118, 99, 1) 0 0 2px, rgba(90, 118, 99, 1) 0 0 2px, rgba(90, 118, 99, 1) 0 0 2px, + rgba(90, 118, 99, 1) 0 0 2px, black 0 0 1px; } .player .identity[data-color="fan"], .player .identity[data-color="wu"], -div[data-nature='fan'], -span[data-nature='fan'], -div[data-nature='wood'], -span[data-nature='wood'] { - text-shadow: rgba(57, 123, 4,1) 0 0 2px,rgba(57, 123, 4,1) 0 0 5px,rgba(57, 123, 4,1) 0 0 10px, - rgba(57, 123, 4,1) 0 0 10px,rgba(57, 123, 4,1) 0 0 20px,rgba(57, 123, 4,1) 0 0 20px,black 0 0 1px; +div[data-nature="fan"], +span[data-nature="fan"], +div[data-nature="wood"], +span[data-nature="wood"] { + text-shadow: rgba(57, 123, 4, 1) 0 0 2px, rgba(57, 123, 4, 1) 0 0 5px, rgba(57, 123, 4, 1) 0 0 10px, + rgba(57, 123, 4, 1) 0 0 10px, rgba(57, 123, 4, 1) 0 0 20px, rgba(57, 123, 4, 1) 0 0 20px, + black 0 0 1px; } -div[data-nature='woodm'], -span[data-nature='woodm'] { - text-shadow: rgba(57, 123, 4,1) 0 0 2px,rgba(57, 123, 4,1) 0 0 5px,rgba(57, 123, 4,1) 0 0 5px, - rgba(57, 123, 4,1) 0 0 5px,black 0 0 1px; +div[data-nature="woodm"], +span[data-nature="woodm"] { + text-shadow: rgba(57, 123, 4, 1) 0 0 2px, rgba(57, 123, 4, 1) 0 0 5px, rgba(57, 123, 4, 1) 0 0 5px, + rgba(57, 123, 4, 1) 0 0 5px, black 0 0 1px; } -div[data-nature='woodmm'], -span[data-nature='woodmm'] { - text-shadow: rgba(57, 123, 4,1) 0 0 2px,rgba(57, 123, 4,1) 0 0 2px,rgba(57, 123, 4,1) 0 0 2px, - rgba(57, 123, 4,1) 0 0 2px,black 0 0 1px; +div[data-nature="woodmm"], +span[data-nature="woodmm"] { + text-shadow: rgba(57, 123, 4, 1) 0 0 2px, rgba(57, 123, 4, 1) 0 0 2px, rgba(57, 123, 4, 1) 0 0 2px, + rgba(57, 123, 4, 1) 0 0 2px, black 0 0 1px; } .player .identity[data-color="commoner"], -div[data-nature='commoner'], -span[data-nature='commoner'] { - text-shadow: rgb(135, 135, 135, 1) 0 0 2px,rgba(135, 135, 135, 1) 0 0 5px,rgba(135, 135, 135, 1) 0 0 10px, - rgba(135, 135, 135, 1) 0 0 10px,rgba(135, 135, 135, 1) 0 0 20px,rgba(135, 135, 135, 1) 0 0 20px,black 0 0 1px; +div[data-nature="commoner"], +span[data-nature="commoner"] { + text-shadow: rgb(135, 135, 135, 1) 0 0 2px, rgba(135, 135, 135, 1) 0 0 5px, + rgba(135, 135, 135, 1) 0 0 10px, rgba(135, 135, 135, 1) 0 0 10px, rgba(135, 135, 135, 1) 0 0 20px, + rgba(135, 135, 135, 1) 0 0 20px, black 0 0 1px; } .player .identity[data-color="cai"], @@ -4077,206 +4147,211 @@ span[data-nature='commoner'] { .player .identity[data-color="falsezhu"], .player .identity[data-color="friend"], .water, -div[data-nature='friend'], -span[data-nature='friend'], -div[data-nature='water'], -span[data-nature='water'] { - text-shadow: rgba(78, 117, 140,1) 0 0 2px,rgba(78, 117, 140,1) 0 0 5px,rgba(78, 117, 140,1) 0 0 10px, - rgba(78, 117, 140,1) 0 0 10px,rgba(78, 117, 140,1) 0 0 20px,rgba(78, 117, 140,1) 0 0 20px,black 0 0 1px; +div[data-nature="friend"], +span[data-nature="friend"], +div[data-nature="water"], +span[data-nature="water"] { + text-shadow: rgba(78, 117, 140, 1) 0 0 2px, rgba(78, 117, 140, 1) 0 0 5px, rgba(78, 117, 140, 1) 0 0 10px, + rgba(78, 117, 140, 1) 0 0 10px, rgba(78, 117, 140, 1) 0 0 20px, rgba(78, 117, 140, 1) 0 0 20px, + black 0 0 1px; } -div[data-nature='waterm'], -span[data-nature='waterm'] { - text-shadow: rgba(78, 117, 140,1) 0 0 2px,rgba(78, 117, 140,1) 0 0 5px,rgba(78, 117, 140,1) 0 0 5px, - rgba(78, 117, 140,1) 0 0 5px,black 0 0 1px; +div[data-nature="waterm"], +span[data-nature="waterm"] { + text-shadow: rgba(78, 117, 140, 1) 0 0 2px, rgba(78, 117, 140, 1) 0 0 5px, rgba(78, 117, 140, 1) 0 0 5px, + rgba(78, 117, 140, 1) 0 0 5px, black 0 0 1px; } -div[data-nature='watermm'], -span[data-nature='watermm'] { - text-shadow: rgba(78, 117, 140,1) 0 0 2px,rgba(78, 117, 140,1) 0 0 2px,rgba(78, 117, 140,1) 0 0 2px, - rgba(78, 117, 140,1) 0 0 2px,black 0 0 1px; +div[data-nature="watermm"], +span[data-nature="watermm"] { + text-shadow: rgba(78, 117, 140, 1) 0 0 2px, rgba(78, 117, 140, 1) 0 0 2px, rgba(78, 117, 140, 1) 0 0 2px, + rgba(78, 117, 140, 1) 0 0 2px, black 0 0 1px; } -div[data-nature='watermx'], -span[data-nature='watermx'] { - text-shadow: rgba(0,0,0,0.4) 0 0 1px,rgba(20, 83, 140,1) 0 0 2px,rgba(20, 83, 140,1) 0 0 2px,rgba(20, 83, 140,1) 0 0 5px, - rgba(20, 83, 140,1) 0 0 5px,black 0 0 1px; +div[data-nature="watermx"], +span[data-nature="watermx"] { + text-shadow: rgba(0, 0, 0, 0.4) 0 0 1px, rgba(20, 83, 140, 1) 0 0 2px, rgba(20, 83, 140, 1) 0 0 2px, + rgba(20, 83, 140, 1) 0 0 5px, rgba(20, 83, 140, 1) 0 0 5px, black 0 0 1px; } .player .identity[data-color="shu"], -div[data-nature='soil'], -span[data-nature='soil'] { - text-shadow: rgba(128, 59, 2,1) 0 0 2px,rgba(128, 59, 2,1) 0 0 5px,rgba(128, 59, 2,1) 0 0 10px, - rgba(128, 59, 2,1) 0 0 10px,rgba(128, 59, 2,1) 0 0 20px,rgba(128, 59, 2,1) 0 0 20px,black 0 0 1px; +div[data-nature="soil"], +span[data-nature="soil"] { + text-shadow: rgba(128, 59, 2, 1) 0 0 2px, rgba(128, 59, 2, 1) 0 0 5px, rgba(128, 59, 2, 1) 0 0 10px, + rgba(128, 59, 2, 1) 0 0 10px, rgba(128, 59, 2, 1) 0 0 20px, rgba(128, 59, 2, 1) 0 0 20px, + black 0 0 1px; } -div[data-nature='soilm'], -span[data-nature='soilm'] { - text-shadow: rgba(128, 59, 2,1) 0 0 2px,rgba(128, 59, 2,1) 0 0 5px,rgba(128, 59, 2,1) 0 0 5px, - rgba(128, 59, 2,1) 0 0 5px,black 0 0 1px; +div[data-nature="soilm"], +span[data-nature="soilm"] { + text-shadow: rgba(128, 59, 2, 1) 0 0 2px, rgba(128, 59, 2, 1) 0 0 5px, rgba(128, 59, 2, 1) 0 0 5px, + rgba(128, 59, 2, 1) 0 0 5px, black 0 0 1px; } -div[data-nature='soilmm'], -span[data-nature='soilmm'] { - text-shadow: rgba(128, 59, 2,1) 0 0 2px,rgba(128, 59, 2,1) 0 0 2px,rgba(128, 59, 2,1) 0 0 2px, - rgba(128, 59, 2,1) 0 0 2px,black 0 0 1px; +div[data-nature="soilmm"], +span[data-nature="soilmm"] { + text-shadow: rgba(128, 59, 2, 1) 0 0 2px, rgba(128, 59, 2, 1) 0 0 2px, rgba(128, 59, 2, 1) 0 0 2px, + rgba(128, 59, 2, 1) 0 0 2px, black 0 0 1px; } -div[data-nature='soilmx'], -span[data-nature='soilmx'] { - text-shadow: rgba(0,0,0,0.4) 0 0 1px,rgba(128, 59, 2,1) 0 0 2px,rgba(128, 59, 2,1) 0 0 2px,rgba(128, 59, 2,1) 0 0 5px, - rgba(128, 59, 2,1) 0 0 5px,black 0 0 1px; +div[data-nature="soilmx"], +span[data-nature="soilmx"] { + text-shadow: rgba(0, 0, 0, 0.4) 0 0 1px, rgba(128, 59, 2, 1) 0 0 2px, rgba(128, 59, 2, 1) 0 0 2px, + rgba(128, 59, 2, 1) 0 0 5px, rgba(128, 59, 2, 1) 0 0 5px, black 0 0 1px; } -div[data-nature='gray'], -span[data-nature='gray'] { - text-shadow: rgba(213, 194, 179,1) 0 0 2px,rgba(213, 194, 179,1) 0 0 5px,rgba(213, 194, 179,1) 0 0 10px, - rgba(213, 194, 179,1) 0 0 10px,rgba(213, 194, 179,1) 0 0 20px,rgba(213, 194, 179,1) 0 0 20px,black 0 0 1px; +div[data-nature="gray"], +span[data-nature="gray"] { + text-shadow: rgba(213, 194, 179, 1) 0 0 2px, rgba(213, 194, 179, 1) 0 0 5px, + rgba(213, 194, 179, 1) 0 0 10px, rgba(213, 194, 179, 1) 0 0 10px, rgba(213, 194, 179, 1) 0 0 20px, + rgba(213, 194, 179, 1) 0 0 20px, black 0 0 1px; } -div[data-nature='graym'], -span[data-nature='graym'] { - text-shadow: rgba(213, 194, 179,1) 0 0 2px,rgba(213, 194, 179,1) 0 0 5px,rgba(213, 194, 179,1) 0 0 5px, - rgba(213, 194, 179,1) 0 0 5px,black 0 0 1px; +div[data-nature="graym"], +span[data-nature="graym"] { + text-shadow: rgba(213, 194, 179, 1) 0 0 2px, rgba(213, 194, 179, 1) 0 0 5px, + rgba(213, 194, 179, 1) 0 0 5px, rgba(213, 194, 179, 1) 0 0 5px, black 0 0 1px; } -div[data-nature='graymm'], -span[data-nature='graymm'] { - text-shadow: rgba(213, 194, 179,1) 0 0 2px,rgba(213, 194, 179,1) 0 0 2px,rgba(213, 194, 179,1) 0 0 2px, - rgba(213, 194, 179,1) 0 0 2px,black 0 0 1px; +div[data-nature="graymm"], +span[data-nature="graymm"] { + text-shadow: rgba(213, 194, 179, 1) 0 0 2px, rgba(213, 194, 179, 1) 0 0 2px, + rgba(213, 194, 179, 1) 0 0 2px, rgba(213, 194, 179, 1) 0 0 2px, black 0 0 1px; } -div[data-nature='graymx'], -span[data-nature='graymx'] { - text-shadow: black 0 0 1px,rgba(213, 194, 179,0.2) 0 0 2px,rgba(213, 194, 179,1) 0 0 2px,rgba(213, 194, 179,1) 0 0 5px, - rgba(213, 194, 179,1) 0 0 5px,black 0 0 1px; +div[data-nature="graymx"], +span[data-nature="graymx"] { + text-shadow: black 0 0 1px, rgba(213, 194, 179, 0.2) 0 0 2px, rgba(213, 194, 179, 1) 0 0 2px, + rgba(213, 194, 179, 1) 0 0 5px, rgba(213, 194, 179, 1) 0 0 5px, black 0 0 1px; } -div[data-nature='ice'], -span[data-nature='ice'] { - text-shadow: rgba(213, 194, 179,1) 0 0 2px,rgba(213, 194, 179,1) 0 0 5px,rgba(213, 194, 179,1) 0 0 10px, - rgba(213, 194, 179,1) 0 0 10px,rgba(213, 194, 179,1) 0 0 20px,rgba(213, 194, 179,1) 0 0 20px,black 0 0 1px; +div[data-nature="ice"], +span[data-nature="ice"] { + text-shadow: rgba(213, 194, 179, 1) 0 0 2px, rgba(213, 194, 179, 1) 0 0 5px, + rgba(213, 194, 179, 1) 0 0 10px, rgba(213, 194, 179, 1) 0 0 10px, rgba(213, 194, 179, 1) 0 0 20px, + rgba(213, 194, 179, 1) 0 0 20px, black 0 0 1px; } -div[data-nature='icem'], -span[data-nature='icem'] { - text-shadow: rgba(213, 194, 179,1) 0 0 2px,rgba(213, 194, 179,1) 0 0 5px,rgba(213, 194, 179,1) 0 0 5px, - rgba(213, 194, 179,1) 0 0 5px,black 0 0 1px; +div[data-nature="icem"], +span[data-nature="icem"] { + text-shadow: rgba(213, 194, 179, 1) 0 0 2px, rgba(213, 194, 179, 1) 0 0 5px, + rgba(213, 194, 179, 1) 0 0 5px, rgba(213, 194, 179, 1) 0 0 5px, black 0 0 1px; } -div[data-nature='icemm'], -span[data-nature='icemm'] { - text-shadow: rgba(213, 194, 179,1) 0 0 2px,rgba(213, 194, 179,1) 0 0 2px,rgba(213, 194, 179,1) 0 0 2px, - rgba(213, 194, 179,1) 0 0 2px,black 0 0 1px; +div[data-nature="icemm"], +span[data-nature="icemm"] { + text-shadow: rgba(213, 194, 179, 1) 0 0 2px, rgba(213, 194, 179, 1) 0 0 2px, + rgba(213, 194, 179, 1) 0 0 2px, rgba(213, 194, 179, 1) 0 0 2px, black 0 0 1px; } -div[data-nature='icemx'], -span[data-nature='icemx'] { - text-shadow: black 0 0 1px,rgba(213, 194, 179,0.2) 0 0 2px,rgba(213, 194, 179,1) 0 0 2px,rgba(213, 194, 179,1) 0 0 5px, - rgba(213, 194, 179,1) 0 0 5px,black 0 0 1px; +div[data-nature="icemx"], +span[data-nature="icemx"] { + text-shadow: black 0 0 1px, rgba(213, 194, 179, 0.2) 0 0 2px, rgba(213, 194, 179, 1) 0 0 2px, + rgba(213, 194, 179, 1) 0 0 5px, rgba(213, 194, 179, 1) 0 0 5px, black 0 0 1px; } .player .identity[data-color="unknownx"], -div[data-nature='black'], -span[data-nature='black'] { - text-shadow: rgba(0,0,0,0.5) 0 0 2px,rgba(0,0,0,0.5) 0 0 5px,rgba(0,0,0,0.5) 0 0 10px, - rgba(0,0,0,0.5) 0 0 10px,rgba(0,0,0,0.5) 0 0 20px,rgba(0,0,0,0.5) 0 0 20px,black 0 0 1px; +div[data-nature="black"], +span[data-nature="black"] { + text-shadow: rgba(0, 0, 0, 0.5) 0 0 2px, rgba(0, 0, 0, 0.5) 0 0 5px, rgba(0, 0, 0, 0.5) 0 0 10px, + rgba(0, 0, 0, 0.5) 0 0 10px, rgba(0, 0, 0, 0.5) 0 0 20px, rgba(0, 0, 0, 0.5) 0 0 20px, black 0 0 1px; } div[data-color="unknownm"], span[data-color="unknownm"] { - text-shadow: rgba(0,0,0,0.5) 0 0 2px,rgba(0,0,0,0.2) 0 0 5px,rgba(0,0,0,0.2) 0 0 5px, - rgba(0,0,0,0.2) 0 0 5px,black 0 0 1px; + text-shadow: rgba(0, 0, 0, 0.5) 0 0 2px, rgba(0, 0, 0, 0.2) 0 0 5px, rgba(0, 0, 0, 0.2) 0 0 5px, + rgba(0, 0, 0, 0.2) 0 0 5px, black 0 0 1px; } div[data-nature="unknown"] { - text-shadow: rgba(0, 0, 0,0.2) 0 0 2px,rgba(0, 0, 0,0.2) 0 0 5px,rgba(0, 0, 0,0.2) 0 0 10px, - rgba(0, 0, 0,0.2) 0 0 10px,rgba(0, 0, 0,0.2) 0 0 20px,rgba(0, 0, 0,0.2) 0 0 20px,rgba(0,0,0,0.6) 0 0 1px; + text-shadow: rgba(0, 0, 0, 0.2) 0 0 2px, rgba(0, 0, 0, 0.2) 0 0 5px, rgba(0, 0, 0, 0.2) 0 0 10px, + rgba(0, 0, 0, 0.2) 0 0 10px, rgba(0, 0, 0, 0.2) 0 0 20px, rgba(0, 0, 0, 0.2) 0 0 20px, + rgba(0, 0, 0, 0.6) 0 0 1px; } div[data-decoration="gold"]::before, -#arena:not(.autoframe)[data-framedecoration="gold"] .player>.framebg::before{ - content:""; - position:absolute; - background-image:url('../../theme/style/player/gold_d1.png'); - background-size:100% 100%; - width:41px; - height:80px; - left:-13px; - top:-19px; +#arena:not(.autoframe)[data-framedecoration="gold"] .player > .framebg::before { + content: ""; + position: absolute; + background-image: url("../../theme/style/player/gold_d1.png"); + background-size: 100% 100%; + width: 41px; + height: 80px; + left: -13px; + top: -19px; } -.button[data-decoration="gold"]::before{ - transform:scale(0.75) translate(-3px,-3px); +.button[data-decoration="gold"]::before { + transform: scale(0.75) translate(-3px, -3px); } div[data-decoration="gold"]::after, -#arena:not(.autoframe)[data-framedecoration="gold"] .player>.framebg::after{ - content:""; - position:absolute; - background-image:url('../../theme/style/player/gold_d2.png'); - background-size:100% 100%; - width:75px; - height:32px; +#arena:not(.autoframe)[data-framedecoration="gold"] .player > .framebg::after { + content: ""; + position: absolute; + background-image: url("../../theme/style/player/gold_d2.png"); + background-size: 100% 100%; + width: 75px; + height: 32px; left: auto; top: auto; - right:-8px; - bottom:-8px; + right: -8px; + bottom: -8px; } -.button[data-decoration="gold"]::after{ - transform: scale(0.75) translate(10px,2px); +.button[data-decoration="gold"]::after { + transform: scale(0.75) translate(10px, 2px); } div[data-decoration="silver"]::before, -#arena:not(.autoframe)[data-framedecoration="silver"] .player>.framebg::before{ - content:""; - position:absolute; - background-image:url('../../theme/style/player/silver_d1.png'); - background-size:100% 100%; - width:41px; - height:61px; - left:-13px; - top:-14px; +#arena:not(.autoframe)[data-framedecoration="silver"] .player > .framebg::before { + content: ""; + position: absolute; + background-image: url("../../theme/style/player/silver_d1.png"); + background-size: 100% 100%; + width: 41px; + height: 61px; + left: -13px; + top: -14px; } -.button[data-decoration="silver"]::before{ - transform:scale(0.75) translate(-2px,-3px); +.button[data-decoration="silver"]::before { + transform: scale(0.75) translate(-2px, -3px); } div[data-decoration="silver"]::after, -#arena:not(.autoframe)[data-framedecoration="silver"] .player>.framebg::after{ - content:""; - position:absolute; - background-image:url('../../theme/style/player/silver_d2.png'); - background-size:100% 100%; - width:69px; - height:21px; +#arena:not(.autoframe)[data-framedecoration="silver"] .player > .framebg::after { + content: ""; + position: absolute; + background-image: url("../../theme/style/player/silver_d2.png"); + background-size: 100% 100%; + width: 69px; + height: 21px; left: auto; top: auto; - right:-8px; - bottom:-9px; + right: -8px; + bottom: -9px; } -.button[data-decoration="silver"]::after{ - transform: scale(0.75) translate(10px,0px); +.button[data-decoration="silver"]::after { + transform: scale(0.75) translate(10px, 0px); } div[data-decoration="bronze"]::before, -#arena:not(.autoframe)[data-framedecoration="bronze"] .player>.framebg::before{ - content:""; - position:absolute; - background-image:url('../../theme/style/player/bronze_d1.png'); - background-size:100% 100%; - width:40px; - height:80px; - left:-13px; - top:-18px; +#arena:not(.autoframe)[data-framedecoration="bronze"] .player > .framebg::before { + content: ""; + position: absolute; + background-image: url("../../theme/style/player/bronze_d1.png"); + background-size: 100% 100%; + width: 40px; + height: 80px; + left: -13px; + top: -18px; } -.button[data-decoration="bronze"]::before{ - transform:scale(0.75) translate(-2px,-3px); +.button[data-decoration="bronze"]::before { + transform: scale(0.75) translate(-2px, -3px); } div[data-decoration="bronze"]::after, -#arena:not(.autoframe)[data-framedecoration="bronze"] .player>.framebg::after{ - content:""; - position:absolute; - background-image:url('../../theme/style/player/bronze_d2.png'); - background-size:100% 100%; - width:69px; - height:21px; +#arena:not(.autoframe)[data-framedecoration="bronze"] .player > .framebg::after { + content: ""; + position: absolute; + background-image: url("../../theme/style/player/bronze_d2.png"); + background-size: 100% 100%; + width: 69px; + height: 21px; left: auto; top: auto; right: -8px; bottom: -5px; } -.button[data-decoration="bronze"]::after{ - transform:scale(0.75) translate(9px,2px); +.button[data-decoration="bronze"]::after { + transform: scale(0.75) translate(9px, 2px); } -.guessidentity{ +.guessidentity { display: block; position: relative; } -.guessidentity>.menubutton.large{ +.guessidentity > .menubutton.large { display: block; position: relative; } @@ -4284,25 +4359,24 @@ div[data-decoration="bronze"]::after, color:white; }*/ - div[data-decoration="gold"]::before, div[data-decoration="gold"]::after, div[data-decoration="silver"]::before, div[data-decoration="silver"]::after, div[data-decoration="bronze"]::before, -div[data-decoration="bronze"]::after{ +div[data-decoration="bronze"]::after { opacity: 1; z-index: 10; box-shadow: none !important; } -.card.fullskin>.background { - display: none !important +.card.fullskin > .background { + display: none !important; } -.card:not(.fullskin)>.image { - display: none !important +.card:not(.fullskin) > .image { + display: none !important; } -.card.fullskin>.name { +.card.fullskin > .name { top: 8px; left: 7px; /*border:1px solid #631515;*/ @@ -4316,92 +4390,93 @@ div[data-decoration="bronze"]::after{ text-align: center; line-height: 18px; } -.cardbg,.button.character.cardbg { +.cardbg, +.button.character.cardbg { color: rgb(74, 29, 1); text-shadow: none; } -.card.fullskin>.name.long { +.card.fullskin > .name.long { top: 5px; } -.card.fullskin.thunder>.name { - color: #152E63; - border: 1px solid #152E63; +.card.fullskin.thunder > .name { + color: #152e63; + border: 1px solid #152e63; } -.card.fullskin.kami>.name { - color: #1F3C38; - border: 1px solid #1F3C38; +.card.fullskin.kami > .name { + color: #1f3c38; + border: 1px solid #1f3c38; } -.card.fullskin.ice>.name { - color: #3B6273; - border: 1px solid #3B6273; +.card.fullskin.ice > .name { + color: #3b6273; + border: 1px solid #3b6273; } -.card.fullskin.fire>.name { +.card.fullskin.fire > .name { color: #631515; border: 1px solid #631515; } -.card.fullskin.poison>.name { +.card.fullskin.poison > .name { color: #00312d; border: 1px solid #00312d; } -.card.fullskin.epic>.name { +.card.fullskin.epic > .name { color: white; background: rgba(0, 66, 165, 0.6); border: 1px solid rgba(0, 66, 165, 1); - box-shadow: rgba(0,0,0,0.4) 0 0 10px inset; + box-shadow: rgba(0, 0, 0, 0.4) 0 0 10px inset; } -.card.fullskin.epic>.name2 { - color: rgb(117,186,255); +.card.fullskin.epic > .name2 { + color: rgb(117, 186, 255); } -.card.fullskin.legend>.name { +.card.fullskin.legend > .name { color: white; background: rgba(106, 27, 154, 0.6); border: 1px solid rgb(158, 102, 0); - box-shadow: rgba(0,0,0,0.4) 0 0 10px inset; + box-shadow: rgba(0, 0, 0, 0.4) 0 0 10px inset; } -.card.fullskin.legend>.name2 { +.card.fullskin.legend > .name2 { color: rgb(233, 131, 255); /*color: rgb(117,186,0);*/ } -.card.fullskin.gold>.name { +.card.fullskin.gold > .name { color: white; - text-shadow: black 0 0 1px, rgba(0,0,0,0.5) 0 0 1px; + text-shadow: black 0 0 1px, rgba(0, 0, 0, 0.5) 0 0 1px; background: rgba(234, 158, 0, 0.6); border: 1px solid rgb(134, 87, 1); box-shadow: rgba(255, 149, 0, 0.4) 0 0 10px inset; } -.card.fullskin.gold>.name2 { - color: rgb(255,235,59); +.card.fullskin.gold > .name2 { + color: rgb(255, 235, 59); } -.card.fullskin>.info { +.card.fullskin > .info { top: 5.2px; right: 7px; - color: rgba(0,0,0,0.8); + color: rgba(0, 0, 0, 0.8); white-space: nowrap; text-shadow: none; } -.card.fullskin>.info.red { - color: #A82424; +.card.fullskin > .info.red { + color: #a82424; } -.config>.toggle.onoff { +.config > .toggle.onoff { height: 100%; width: 30px; display: inline-flex; } -.config>.toggle.onoff>div { +.config > .toggle.onoff > div { height: 12px; width: 100%; border: 1px solid white; border-radius: 12px; - box-shadow: black 0 0 2px,black 0 0 1px inset; + box-shadow: black 0 0 2px, black 0 0 1px inset; margin: auto; overflow: hidden; transition-property: none; } -.config>.toggle.onoff>div>div{ +.config > .toggle.onoff > div > div { transition-property: left; } -.config>.toggle.onoff:not(.on)>div, +.config > .toggle.onoff:not(.on) > div, .config.disabled { opacity: 0.4; } @@ -4412,7 +4487,7 @@ div[data-decoration="bronze"]::after{ font-size: 22px !important; text-indent: -2px; } -.config>.toggle.onoff>div>div { +.config > .toggle.onoff > div > div { width: 8px; height: 8px; border-radius: 100%; @@ -4423,29 +4498,29 @@ div[data-decoration="bronze"]::after{ border: 1px solid white; box-shadow: black 0 0 2px; } -.config>.toggle.onoff.on>div>div { +.config > .toggle.onoff.on > div > div { left: calc(100% - 11px); } -#arena>.skillbar { +#arena > .skillbar { width: 65px; height: 65px; border-radius: 100% !important; font-size: 55px; - font-family: 'huangcao'; + font-family: "huangcao"; top: calc(50% - 110px); line-height: 65px; text-align: center; } -#arena>.skillbar.left { +#arena > .skillbar.left { left: 0; right: auto; } -#arena>.skillbar.right { +#arena > .skillbar.right { right: 0; left: auto; } -#arena>.skillbar>div { +#arena > .skillbar > div { border-radius: 100%; width: 55px; height: 55px; @@ -4456,32 +4531,32 @@ div[data-decoration="bronze"]::after{ top: 5px; overflow: hidden; } -#arena>.skillbar>.skillbarshadow { +#arena > .skillbar > .skillbarshadow { box-shadow: 0px 0px 8px #222 inset; z-index: 1; } -#arena>.skillbar>.skillbarfill>div { - box-shadow: 0px 0px 10px #555 inset,rgba(0, 0, 0, 0.05) 0 0 0 1px; +#arena > .skillbar > .skillbarfill > div { + box-shadow: 0px 0px 10px #555 inset, rgba(0, 0, 0, 0.05) 0 0 0 1px; width: 200%; height: 200%; position: absolute; margin: 0; padding: 0; - background-color: rgba(63, 119, 173,1); + background-color: rgba(63, 119, 173, 1); left: -50%; top: 100%; } -#arena>.skillbar.full>.skillbarfill>div { +#arena > .skillbar.full > .skillbarfill > div { box-shadow: none; background-color: red; } /* #arena>.skillbar.full { */ - /*transform: scale(1.1);*/ - /*box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px; +/*transform: scale(1.1);*/ +/*box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px; -webkit-animation:skillbarglow 3s infinite;*/ /* } */ -#arena>.skillbar>.skillbartext { - font-family: 'xinwei'; +#arena > .skillbar > .skillbartext { + font-family: "xinwei"; font-size: 35px; width: 100%; text-align: center; @@ -4497,56 +4572,56 @@ div[data-decoration="bronze"]::after{ } .firetext { - color: rgb(255,119,63); + color: rgb(255, 119, 63); } .yellowtext { - color: #FFFF7A; + color: #ffff7a; } .bluetext { color: rgb(150, 202, 255); } .greentext { - color: rgb(104,221,127); + color: rgb(104, 221, 127); } .icetext { color: rgb(59, 98, 115); } .thundertext, .controlthundertext { - color: rgb(117,186,255); + color: rgb(117, 186, 255); } .kamitext { - color: rgb(90,118,99); + color: rgb(90, 118, 99); } .whitetext .thundertext { color: white; } .poisontext { - color: rgb(104,221,127); + color: rgb(104, 221, 127); } .browntext { - color: rgb(195,161,223); + color: rgb(195, 161, 223); } .legendtext { color: rgb(233, 131, 255); } -#window>canvas.fun { +#window > canvas.fun { position: absolute; left: 0; top: 0; z-index: -2; pointer-events: none; } -#window.canvas_top>canvas.fun { +#window.canvas_top > canvas.fun { z-index: 20; } -.coin_menu .content>.caption>.coin_buy { +.coin_menu .content > .caption > .coin_buy { line-height: 36px; - font-family: 'xinwei'; + font-family: "xinwei"; font-size: 24px; } -.coin_menu .content>.caption>.coin_buy>.menubutton { +.coin_menu .content > .caption > .coin_buy > .menubutton { width: auto; position: relative; float: right; @@ -4556,12 +4631,12 @@ div[data-decoration="bronze"]::after{ font-size: 24px; margin-left: 10px; } -.coin_menu .content>.caption>.coin_buy>.menubutton.disabled { +.coin_menu .content > .caption > .coin_buy > .menubutton.disabled { opacity: 0.5; } .wunature { - font-family: 'huangcao','xinwei'; + font-family: "huangcao", "xinwei"; font-size: 24px; color: white !important; pointer-events: none; @@ -4572,12 +4647,12 @@ div[data-decoration="bronze"]::after{ top: auto; bottom: 14px; } -#arena>.player .wunature, -#chess>.player .wunature { +#arena > .player .wunature, +#chess > .player .wunature { display: block; } /* div:hover>.wunature { */ - /*opacity: 0.5;*/ +/*opacity: 0.5;*/ /* } */ .button.noclick .wunature, .player.treasure .wunature { @@ -4589,7 +4664,7 @@ div[data-decoration="bronze"]::after{ top: 9px; width: 20px; } -.player .actcount.hp>div { +.player .actcount.hp > div { width: 12px; height: 12px; margin-left: 4px; @@ -4624,7 +4699,7 @@ div[data-decoration="bronze"]::after{ left: 2px; width: calc(100% - 4px); height: 25px; - background-image: url('../../image/card/cardtempname_bg.png'); + background-image: url("../../image/card/cardtempname_bg.png"); background-size: 100% 100%; text-align: right; writing-mode: horizontal-tb; @@ -4634,7 +4709,7 @@ div[data-decoration="bronze"]::after{ color: black !important; text-shadow: white 0 0 2px, white 0 0 3px; } -.tempname.tempimage>div { +.tempname.tempimage > div { width: 100%; height: 100%; top: 0; @@ -4643,35 +4718,35 @@ div[data-decoration="bronze"]::after{ background-position: -20px -30px; background-repeat: no-repeat; } -.tempname.tempimage>span { +.tempname.tempimage > span { position: relative; z-index: 1; line-height: 25px; } -.button>.tempname { +.button > .tempname { font-size: 17px; } -.button>.tempname:not(.tempimage) { +.button > .tempname:not(.tempimage) { left: 5px; top: 5px; } -.button>.tempname .vertical { +.button > .tempname .vertical { left: 3px; top: 6px; } -.tempname.kami:not([data-nature])>span { - color: #1F3C38; +.tempname.kami:not([data-nature]) > span { + color: #1f3c38; } -.tempname.ice:not([data-nature])>span { - color: #3B6273; +.tempname.ice:not([data-nature]) > span { + color: #3b6273; } -.tempname.fire:not([data-nature])>span { +.tempname.fire:not([data-nature]) > span { color: #631515; } -.tempname.thunder:not([data-nature])>span { - color: #152E63; +.tempname.thunder:not([data-nature]) > span { + color: #152e63; } -.tempname.poison:not([data-nature])>span { +.tempname.poison:not([data-nature]) > span { color: #00312d; } /*.card.equip1 .wunature, @@ -4688,32 +4763,32 @@ div[data-decoration="bronze"]::after{ .button.card .wunature { top: 59px; } -#arena.oldlayout .player>.timerbar>div { +#arena.oldlayout .player > .timerbar > div { top: 100px; left: 15px; width: 90px; } -#arena.oldlayout .player>.nameol { +#arena.oldlayout .player > .nameol { left: 15px; top: 85px; - text-align: left + text-align: left; } -.timerbar>div { +.timerbar > div { left: 25px; - box-shadow: 0px 1px 3px rgba(0,0,0,0.3); + box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); border-radius: 8px; height: 5px; width: 100px; } -.timerbar>div:first-child { - background: rgba(255,255,255,0.6); +.timerbar > div:first-child { + background: rgba(255, 255, 255, 0.6); } -.timerbar>div { +.timerbar > div { top: 165px; } -.timerbar>div:last-child { - background: linear-gradient(#FFDA47, #CE0404); +.timerbar > div:last-child { + background: linear-gradient(#ffda47, #ce0404); transition-timing-function: linear; float: left; transform-origin: left; @@ -4741,19 +4816,21 @@ div[data-decoration="bronze"]::after{ opacity: 1; } -.selected:not(.tdnodes):not(.text):not(.player):not(.card):not(.button),.selectedx { - box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px,rgba(255, 0, 0, 0.4) 0 0 5px, rgba(255, 0, 0, 0.4) 0 0 12px, rgba(255, 0, 0, 0.8) 0 0 15px !important; +.selected:not(.tdnodes):not(.text):not(.player):not(.card):not(.button), +.selectedx { + box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(255, 0, 0, 0.4) 0 0 5px, rgba(255, 0, 0, 0.4) 0 0 12px, + rgba(255, 0, 0, 0.8) 0 0 15px !important; } #me .card.selected::after { - box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px,rgb(255, 0, 0) 0 0 5px, rgba(255, 0, 0, 1) 0 0 10px; + box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgb(255, 0, 0) 0 0 5px, rgba(255, 0, 0, 1) 0 0 10px; } #me .card.glow::before { - box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px,rgb(0, 133, 255) 0 0 5px, rgba(0, 133, 255,1) 0 0 10px; + box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgb(0, 133, 255) 0 0 5px, rgba(0, 133, 255, 1) 0 0 10px; } -#me>#handcards1:not(.scrollh), -#me>#handcards2:not(.scrollh) { +#me > #handcards1:not(.scrollh), +#me > #handcards2:not(.scrollh) { z-index: 3; } /*#me>div:not(.scrollh)>.handcards>.card{ @@ -4765,39 +4842,46 @@ div[data-decoration="bronze"]::after{ #me .card.glows { opacity: 1; - box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px,rgb(255, 153, 51) 0 0 5px, rgba(255, 153, 51,1) 0 0 10px; + box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgb(255, 153, 51) 0 0 5px, rgba(255, 153, 51, 1) 0 0 10px; } -.glow:not(.button):not(.card){ - box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 133, 255, 0.4) 0 0 5px, rgba(0, 133, 255, 0.5) 0 0 12px, rgba(0, 133, 255, 0.8) 0 0 15px !important; +.glow:not(.button):not(.card) { + box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 133, 255, 0.4) 0 0 5px, rgba(0, 133, 255, 0.5) 0 0 12px, + rgba(0, 133, 255, 0.8) 0 0 15px !important; } -.glow2:not(.player.glow_phase)>.avatar { +.glow2:not(.player.glow_phase) > .avatar { /*-webkit-animation:control_glow 4s infinite;*/ box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(10, 155, 67, 1) 0 0 15px, rgba(10, 155, 67, 1) 0 0 15px !important; } .glow3 { - box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1px, rgba(0, 133, 255, 0.8) 0 0 10px, rgba(0, 133, 255, 0) 0 0 40px, rgba(0, 133, 255, 0.8) 0 0 60px !important + box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1px, rgba(0, 133, 255, 0.8) 0 0 10px, rgba(0, 133, 255, 0) 0 0 40px, + rgba(0, 133, 255, 0.8) 0 0 60px !important; } .selectedx3 { - box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1px, rgba(255, 0, 0, 0.8) 0 0 10px, rgba(255, 0, 0, 0) 0 0 40px, rgba(255, 0, 0, 0.8) 0 0 60px !important + box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1px, rgba(255, 0, 0, 0.8) 0 0 10px, rgba(255, 0, 0, 0) 0 0 40px, + rgba(255, 0, 0, 0.8) 0 0 60px !important; } .glow4 { - box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1px, rgba(0, 133, 255, 0.8) 0 0 10px, rgba(0, 133, 255, 0) 0 0 40px, rgba(0, 133, 255, 0.8) 0 0 40px !important + box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1px, rgba(0, 133, 255, 0.8) 0 0 10px, rgba(0, 133, 255, 0) 0 0 40px, + rgba(0, 133, 255, 0.8) 0 0 40px !important; } .selectedx4 { - box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1px, rgba(255, 0, 0, 0.6) 0 0 10px, rgba(255, 0, 0, 0) 0 0 40px, rgba(255, 0, 0, 0.8) 0 0 40px !important + box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1px, rgba(255, 0, 0, 0.6) 0 0 10px, rgba(255, 0, 0, 0) 0 0 40px, + rgba(255, 0, 0, 0.8) 0 0 40px !important; } -.player:not(.glow_phase)>.avatar.glow2, +.player:not(.glow_phase) > .avatar.glow2, .button.glow2:not(.selected) { - box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(10, 155, 67, 1) 0 0 5px, rgba(10, 155, 67, 1) 0 0 5px, rgba(10, 155, 67, 1) 0 0 10px, rgba(10, 155, 67, 1) 0 0 10px !important + box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(10, 155, 67, 1) 0 0 5px, rgba(10, 155, 67, 1) 0 0 5px, + rgba(10, 155, 67, 1) 0 0 10px, rgba(10, 155, 67, 1) 0 0 10px !important; } .control.blue { - background-image: linear-gradient(rgba(47,101,150,1), rgba(43, 90, 132,1)); + background-image: linear-gradient(rgba(47, 101, 150, 1), rgba(43, 90, 132, 1)); } .control.red { background-image: linear-gradient(rgba(150, 47, 47, 1), rgba(132, 43, 43, 1)); } -.control.red,.control.blue { +.control.red, +.control.blue { color: white; text-shadow: black 0 0 2px; } @@ -4805,18 +4889,18 @@ div[data-decoration="bronze"]::after{ .dialog.scroll1, .dialog.scroll2, .dialog.withbg { - background: rgba(0,0,0,0.2); + background: rgba(0, 0, 0, 0.2); box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px; border-radius: 8px; min-height: 200px; } -.dice-container{ - background: rgba(0,0,0,0.3); +.dice-container { + background: rgba(0, 0, 0, 0.3); z-index: 50; perspective: 1000px; } -.dice{ +.dice { position: absolute; width: 200px; height: 200px; @@ -4826,10 +4910,10 @@ div[data-decoration="bronze"]::after{ transition: transform 2s ease; } .dice[data-side="1"] { - transform: rotateX(75deg) rotateY(0deg) rotateZ(45deg) + transform: rotateX(75deg) rotateY(0deg) rotateZ(45deg); } .dice[data-side="1"].up-front { - transform: rotateX(0deg) rotateY(0deg) rotateZ(45deg) + transform: rotateX(0deg) rotateY(0deg) rotateZ(45deg); } .dice[data-side="2"] { transform: rotateX(-15deg) rotateY(45deg); @@ -4838,38 +4922,39 @@ div[data-decoration="bronze"]::after{ transform: rotateX(-90deg) rotateY(45deg); } .dice[data-side="3"] { - transform: rotateX(165deg) rotateY(-45deg) rotateZ(90deg) + transform: rotateX(165deg) rotateY(-45deg) rotateZ(90deg); } .dice[data-side="3"].up-front { - transform: rotateX(90deg) rotateY(-45deg) rotateZ(90deg) + transform: rotateX(90deg) rotateY(-45deg) rotateZ(90deg); } .dice[data-side="4"] { - transform: rotateX(345deg) rotateY(-45deg) rotateZ(90deg) + transform: rotateX(345deg) rotateY(-45deg) rotateZ(90deg); } .dice[data-side="4"].up-front { - transform: rotateX(270deg) rotateY(-45deg) rotateZ(90deg) + transform: rotateX(270deg) rotateY(-45deg) rotateZ(90deg); } .dice[data-side="5"] { - transform: rotateX(345deg) rotateY(-45deg) rotateZ(180deg) + transform: rotateX(345deg) rotateY(-45deg) rotateZ(180deg); } .dice[data-side="5"].up-front { - transform: rotateX(270deg) rotateY(-45deg) rotateZ(180deg) + transform: rotateX(270deg) rotateY(-45deg) rotateZ(180deg); } .dice[data-side="6"] { - transform: rotateX(255deg) rotateY(0deg) rotateZ(135deg) + transform: rotateX(255deg) rotateY(0deg) rotateZ(135deg); } .dice[data-side="6"].up-front { - transform: rotateX(180deg) rotateY(0deg) rotateZ(135deg) + transform: rotateX(180deg) rotateY(0deg) rotateZ(135deg); } -.dice>div{ +.dice > div { position: absolute; width: 200px; height: 200px; background: #fff; - box-shadow:inset 0 0 40px #ccc; + box-shadow: inset 0 0 40px #ccc; border-radius: 40px; } -.dice .cover, .dice .inner { +.dice .cover, +.dice .inner { background: #e0e0e0; box-shadow: none; } @@ -4884,10 +4969,10 @@ div[data-decoration="bronze"]::after{ transform: rotateX(90deg); } -.dice .front { +.dice .front { transform: translateZ(100px); } -.dice .front.inner { +.dice .front.inner { transform: translateZ(98px); } .dice .back { @@ -4922,119 +5007,120 @@ div[data-decoration="bronze"]::after{ } .dice .dot { - position:absolute; - width:46px; - height:46px; - border-radius:23px; - background:#444; - box-shadow:inset 5px 0 10px #000; + position: absolute; + width: 46px; + height: 46px; + border-radius: 23px; + background: #444; + box-shadow: inset 5px 0 10px #000; } .dice .dot.center { - margin:77px 0 0 77px; + margin: 77px 0 0 77px; } .dice .dot.dtop { - margin-top:20px; + margin-top: 20px; } .dice .dot.dleft { - margin-left:134px; + margin-left: 134px; } .dice .dot.dright { - margin-left:20px; + margin-left: 20px; } .dice .dot.dbottom { - margin-top:134px; + margin-top: 134px; } .dice .dot.center.dleft { - margin:77px 0 0 20px; + margin: 77px 0 0 20px; } .dice .dot.center.dright { - margin:77px 0 0 134px; + margin: 77px 0 0 134px; } -#window.dicepaused>#arena, -#window.dicepaused>#system, -#window.dicepaused>#historybar { +#window.dicepaused > #arena, +#window.dicepaused > #system, +#window.dicepaused > #historybar { opacity: 0.3 !important; } -#window[data-radius_size='reduce'] .dialog.scroll1, -#window[data-radius_size='reduce'] .dialog.scroll2, -#window[data-radius_size='reduce'] .dialog.withbg { +#window[data-radius_size="reduce"] .dialog.scroll1, +#window[data-radius_size="reduce"] .dialog.scroll2, +#window[data-radius_size="reduce"] .dialog.withbg { border-radius: 4px; } -#window[data-radius_size='off'] .dialog.scroll1, -#window[data-radius_size='off'] .dialog.scroll2, -#window[data-radius_size='off'] .dialog.withbg { +#window[data-radius_size="off"] .dialog.scroll1, +#window[data-radius_size="off"] .dialog.scroll2, +#window[data-radius_size="off"] .dialog.withbg { border-radius: 0px; } -#window[data-radius_size='increase'] .dialog.scroll1, -#window[data-radius_size='increase'] .dialog.scroll2, -#window[data-radius_size='increase'] .dialog.withbg { +#window[data-radius_size="increase"] .dialog.scroll1, +#window[data-radius_size="increase"] .dialog.scroll2, +#window[data-radius_size="increase"] .dialog.withbg { border-radius: 16px; } -#window[data-radius_size='reduce'] #system>div>div, -#window[data-radius_size='reduce'] #mebg, -#window[data-radius_size='reduce'] .control, -#window[data-radius_size='reduce'] .player, -#window[data-radius_size='reduce'] .player>.turned, -#window[data-radius_size='reduce'] .player::after, -#window[data-radius_size='reduce'] .card, -#window[data-radius_size='reduce'] .card::after, -#window[data-radius_size='reduce'] .avatar, -#window[data-radius_size='reduce'] .avatar2, -#window[data-radius_size='reduce'] .button, -#window[data-radius_size='reduce'] .button,::after, -#window[data-radius_size='reduce'] #window>.dialog.popped, -#window[data-radius_size='reduce'] .player.unseen .equips:not(*:empty), -#window[data-radius_size='reduce'] .menu, -#window[data-radius_size='reduce'] .left.pane>.menubutton, -#window[data-radius_size='reduce'] #splash>div, -#window[data-radius_size='reduce'].mobile:not(.chess) .player[data-position='0'] .equips { +#window[data-radius_size="reduce"] #system > div > div, +#window[data-radius_size="reduce"] #mebg, +#window[data-radius_size="reduce"] .control, +#window[data-radius_size="reduce"] .player, +#window[data-radius_size="reduce"] .player > .turned, +#window[data-radius_size="reduce"] .player::after, +#window[data-radius_size="reduce"] .card, +#window[data-radius_size="reduce"] .card::after, +#window[data-radius_size="reduce"] .avatar, +#window[data-radius_size="reduce"] .avatar2, +#window[data-radius_size="reduce"] .button, +#window[data-radius_size="reduce"] .button, +::after, +#window[data-radius_size="reduce"] #window > .dialog.popped, +#window[data-radius_size="reduce"] .player.unseen .equips:not(*:empty), +#window[data-radius_size="reduce"] .menu, +#window[data-radius_size="reduce"] .left.pane > .menubutton, +#window[data-radius_size="reduce"] #splash > div, +#window[data-radius_size="reduce"].mobile:not(.chess) .player[data-position="0"] .equips { border-radius: 4px; } -#window[data-radius_size='off'] #system>div>div, -#window[data-radius_size='off'] #mebg, -#window[data-radius_size='off'] .control, -#window[data-radius_size='off'] .player, -#window[data-radius_size='off'] .player>.turned, -#window[data-radius_size='off'] .player::after, -#window[data-radius_size='off'] .card, -#window[data-radius_size='off'] .card::after, -#window[data-radius_size='off'] .avatar, -#window[data-radius_size='off'] .avatar2, -#window[data-radius_size='off'] .button, -#window[data-radius_size='off'] .button::after, -#window[data-radius_size='off'] #window>.dialog.popped, -#window[data-radius_size='off'] .player.unseen .equips:not(*:empty), -#window[data-radius_size='off'] .menu, -#window[data-radius_size='off'] .left.pane>.menubutton, -#window[data-radius_size='off'] #splash>div, -#window[data-radius_size='off'].mobile:not(.chess) .player[data-position='0'] .equips { +#window[data-radius_size="off"] #system > div > div, +#window[data-radius_size="off"] #mebg, +#window[data-radius_size="off"] .control, +#window[data-radius_size="off"] .player, +#window[data-radius_size="off"] .player > .turned, +#window[data-radius_size="off"] .player::after, +#window[data-radius_size="off"] .card, +#window[data-radius_size="off"] .card::after, +#window[data-radius_size="off"] .avatar, +#window[data-radius_size="off"] .avatar2, +#window[data-radius_size="off"] .button, +#window[data-radius_size="off"] .button::after, +#window[data-radius_size="off"] #window > .dialog.popped, +#window[data-radius_size="off"] .player.unseen .equips:not(*:empty), +#window[data-radius_size="off"] .menu, +#window[data-radius_size="off"] .left.pane > .menubutton, +#window[data-radius_size="off"] #splash > div, +#window[data-radius_size="off"].mobile:not(.chess) .player[data-position="0"] .equips { border-radius: 0px; } -#window[data-radius_size='increase'] #system>div>div, -#window[data-radius_size='increase'] #mebg, -#window[data-radius_size='increase'] .control, -#window[data-radius_size='increase'] .player, -#window[data-radius_size='increase'] .player>.turned, -#window[data-radius_size='increase'] .player::after, -#window[data-radius_size='increase'] .card, -#window[data-radius_size='increase'] .card::after, -#window[data-radius_size='increase'] .avatar, -#window[data-radius_size='increase'] .avatar2, -#window[data-radius_size='increase'] .button, -#window[data-radius_size='increase'] .button::after, -#window[data-radius_size='increase'] #window>.dialog.popped, -#window[data-radius_size='increase'] .player.unseen .equips:not(*:empty), -#window[data-radius_size='increase'] .menu, -#window[data-radius_size='increase'] .left.pane>.menubutton, -#window[data-radius_size='increase'] #splash>div, -#window[data-radius_size='increase'].mobile:not(.chess) .player[data-position='0'] .equips { +#window[data-radius_size="increase"] #system > div > div, +#window[data-radius_size="increase"] #mebg, +#window[data-radius_size="increase"] .control, +#window[data-radius_size="increase"] .player, +#window[data-radius_size="increase"] .player > .turned, +#window[data-radius_size="increase"] .player::after, +#window[data-radius_size="increase"] .card, +#window[data-radius_size="increase"] .card::after, +#window[data-radius_size="increase"] .avatar, +#window[data-radius_size="increase"] .avatar2, +#window[data-radius_size="increase"] .button, +#window[data-radius_size="increase"] .button::after, +#window[data-radius_size="increase"] #window > .dialog.popped, +#window[data-radius_size="increase"] .player.unseen .equips:not(*:empty), +#window[data-radius_size="increase"] .menu, +#window[data-radius_size="increase"] .left.pane > .menubutton, +#window[data-radius_size="increase"] #splash > div, +#window[data-radius_size="increase"].mobile:not(.chess) .player[data-position="0"] .equips { border-radius: 16px; } @@ -5048,131 +5134,134 @@ div[data-decoration="bronze"]::after{ /*--------动画--------*/ @keyframes shadow_thunder { 0% { - box-shadow: rgba(0, 0, 0,1) 0 0 1px, rgba(0, 0, 0,0.1) 0 0 40px, rgba(100, 74, 139,0.5) 0 0 60px, rgba(100, 74, 139, 0.5) 0 0 100px, black 0 0 1px; + box-shadow: rgba(0, 0, 0, 1) 0 0 1px, rgba(0, 0, 0, 0.1) 0 0 40px, rgba(100, 74, 139, 0.5) 0 0 60px, + rgba(100, 74, 139, 0.5) 0 0 100px, black 0 0 1px; } 50% { - box-shadow: rgba(0, 0, 0,1) 0 0 1px, rgba(0, 0, 0,0.3) 0 0 40px, rgba(100, 74, 139,1) 0 0 60px, rgba(100, 74, 139,1) 0 0 100px, black 0 0 1px; + box-shadow: rgba(0, 0, 0, 1) 0 0 1px, rgba(0, 0, 0, 0.3) 0 0 40px, rgba(100, 74, 139, 1) 0 0 60px, + rgba(100, 74, 139, 1) 0 0 100px, black 0 0 1px; } 100% { - box-shadow: rgba(0, 0, 0,1) 0 0 1px, rgba(0, 0, 0,0.1) 0 0 40px, rgba(100, 74, 139,0.5) 0 0 60px, rgba(100, 74, 139,0.5) 0 0 100px, black 0 0 1px; + box-shadow: rgba(0, 0, 0, 1) 0 0 1px, rgba(0, 0, 0, 0.1) 0 0 40px, rgba(100, 74, 139, 0.5) 0 0 60px, + rgba(100, 74, 139, 0.5) 0 0 100px, black 0 0 1px; } } @keyframes cardeffect { 0% { opacity: 0; - transform: scale(0.8) + transform: scale(0.8); } 2% { opacity: 1; - transform: scale(1) + transform: scale(1); } 50% { opacity: 1; - transform: scale(1) + transform: scale(1); } 100% { opacity: 0; - transform: scale(0.8) + transform: scale(0.8); } /*from{box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(10, 155, 67, 1) 0 0 15px, rgba(10, 155, 67, 1) 0 0 15px !important;} to{box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px !important}*/ } @keyframes control_glow { 0% { - box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px + box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px; } 30% { - box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(10, 155, 67, 1) 0 0 15px, rgba(10, 155, 67, 1) 0 0 15px + box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(10, 155, 67, 1) 0 0 15px, rgba(10, 155, 67, 1) 0 0 15px; } 70% { - box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(10, 155, 67, 1) 0 0 15px, rgba(10, 155, 67, 1) 0 0 15px + box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(10, 155, 67, 1) 0 0 15px, rgba(10, 155, 67, 1) 0 0 15px; } 100% { - box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px + box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px; } /*from{box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(10, 155, 67, 1) 0 0 15px, rgba(10, 155, 67, 1) 0 0 15px !important;} to{box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px !important}*/ } @-webkit-keyframes control_glow { 0% { - box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px + box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px; } 30% { - box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(10, 155, 67, 1) 0 0 15px, rgba(10, 155, 67, 1) 0 0 15px + box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(10, 155, 67, 1) 0 0 15px, rgba(10, 155, 67, 1) 0 0 15px; } 70% { - box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(10, 155, 67, 1) 0 0 15px, rgba(10, 155, 67, 1) 0 0 15px + box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(10, 155, 67, 1) 0 0 15px, rgba(10, 155, 67, 1) 0 0 15px; } 100% { - box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px + box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px; } /*from{box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(10, 155, 67, 1) 0 0 15px, rgba(10, 155, 67, 1) 0 0 15px !important;} to{box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px !important}*/ } @keyframes cardflip { from { - transform: perspective(600px) rotateY(-90deg) translateX(52px) + transform: perspective(600px) rotateY(-90deg) translateX(52px); } to { - transform: perspective(600px) rotateY(0deg) translateX(0) + transform: perspective(600px) rotateY(0deg) translateX(0); } } @-webkit-keyframes cardflip { from { - transform: perspective(600px) rotateY(-90deg) translateX(52px) + transform: perspective(600px) rotateY(-90deg) translateX(52px); } to { - transform: perspective(600px) rotateY(0deg) translateX(0) + transform: perspective(600px) rotateY(0deg) translateX(0); } } @keyframes playerflip { from { - transform: perspective(1200px) rotateY(-90deg) translateX(150px) + transform: perspective(1200px) rotateY(-90deg) translateX(150px); } to { - transform: perspective(1200px) rotateY(0deg) translateX(0) + transform: perspective(1200px) rotateY(0deg) translateX(0); } } @keyframes playerflip { from { - transform: perspective(1200px) rotateY(-90deg) translateX(150px) + transform: perspective(1200px) rotateY(-90deg) translateX(150px); } to { - transform: perspective(1200px) rotateY(0deg) translateX(0) + transform: perspective(1200px) rotateY(0deg) translateX(0); } } @-webkit-keyframes playerflip { from { - transform: perspective(1200px) rotateY(-90deg) translateX(150px) + transform: perspective(1200px) rotateY(-90deg) translateX(150px); } to { - transform: perspective(1200px) rotateY(0deg) translateX(0) + transform: perspective(1200px) rotateY(0deg) translateX(0); } } @keyframes splash { from { opacity: 0; - transform: translateY(-300px) + transform: translateY(-300px); } } @-webkit-keyframes splash { from { opacity: 0; - transform: translateY(-300px) + transform: translateY(-300px); } } @keyframes game_start { @@ -5226,11 +5315,11 @@ div[data-decoration="bronze"]::after{ } 50% { - opacity: 0.6 + opacity: 0.6; } 100% { - opacity: 0.3 + opacity: 0.3; } } @-webkit-keyframes equip_hover2 { @@ -5238,11 +5327,11 @@ div[data-decoration="bronze"]::after{ } 50% { - opacity: 0.6 + opacity: 0.6; } 100% { - opacity: 0.3 + opacity: 0.3; } } @keyframes dialog_start { @@ -5272,25 +5361,25 @@ div[data-decoration="bronze"]::after{ @keyframes replaceme { from { opacity: 0; - transform: translateY(120px) + transform: translateY(120px); } } @-webkit-keyframes replaceme { from { opacity: 0; - transform: translateY(120px) + transform: translateY(120px); } } @keyframes replaceenemy { from { opacity: 0; - transform: translateY(-120px) + transform: translateY(-120px); } } @-webkit-keyframes replaceenemy { from { opacity: 0; - transform: translateY(-120px) + transform: translateY(-120px); } } @keyframes drawing { @@ -5301,11 +5390,11 @@ div[data-decoration="bronze"]::after{ } 50% { - opacity: 1 + opacity: 1; } 100% { - opacity: 0 + opacity: 0; } } @-webkit-keyframes drawing { @@ -5316,37 +5405,37 @@ div[data-decoration="bronze"]::after{ } 50% { - opacity: 1 + opacity: 1; } 100% { - opacity: 0 + opacity: 0; } } @keyframes drawing2 { 0% { - opacity: 0 + opacity: 0; } 50% { - opacity: 1 + opacity: 1; } 100% { - opacity: 0 + opacity: 0; } } @-webkit-keyframes drawing2 { 0% { - opacity: 0 + opacity: 0; } 50% { - opacity: 1 + opacity: 1; } 100% { - opacity: 0 + opacity: 0; } } @keyframes card_start { @@ -5364,13 +5453,13 @@ div[data-decoration="bronze"]::after{ @keyframes history_start { from { opacity: 0; - margin-bottom: -50px + margin-bottom: -50px; } } @-webkit-keyframes history_start { from { opacity: 0; - margin-bottom: -50px + margin-bottom: -50px; } } @keyframes card_start2 { @@ -5404,13 +5493,13 @@ div[data-decoration="bronze"]::after{ @keyframes sidebar { from { left: -120px; - opacity: 0 + opacity: 0; } } @-webkit-keyframes sidebar { from { left: -120px; - opacity: 0 + opacity: 0; } } @keyframes zoom_button { @@ -5418,7 +5507,7 @@ div[data-decoration="bronze"]::after{ margin-top: -48px; margin-bottom: -48px; transform: scale(0); - opacity: 0 + opacity: 0; } } @-webkit-keyframes zoom_button { @@ -5426,19 +5515,19 @@ div[data-decoration="bronze"]::after{ margin-top: -48px; margin-bottom: -48px; transform: scale(0); - opacity: 0 + opacity: 0; } } @keyframes config { from { margin-top: -28px; - opacity: 0 + opacity: 0; } } @-webkit-keyframes config { from { margin-top: -28px; - opacity: 0 + opacity: 0; } } @keyframes zoomin { diff --git a/layout/default/menu.css b/layout/default/menu.css index c3280f8d8..507bf6a47 100644 --- a/layout/default/menu.css +++ b/layout/default/menu.css @@ -29,11 +29,11 @@ opacity: 1; } -.popup-container.filter-character.removing>div { +.popup-container.filter-character.removing > div { pointer-events: none; } -.popup-container.filter-character>div { +.popup-container.filter-character > div { left: 0; top: 0; left: 0; @@ -45,12 +45,12 @@ position: relative; } -.popup-container.filter-character>div>div { +.popup-container.filter-character > div > div { position: relative; margin: 10px; } -.popup-container.filter-character>div>.capt { +.popup-container.filter-character > div > .capt { width: 80px; height: 80px; padding: 0; @@ -83,8 +83,14 @@ width: calc(100% - 30px) !important; } -.menu.main>.menu-content>div>.right.pane>.menu-buttons.leftbutton>.config.toggle:first-child, -.menu.main>.menu-content>div>.right.pane>.menu-buttons.leftbutton>.config.toggle:first-child+.config.toggle { +.menu.main > .menu-content > div > .right.pane > .menu-buttons.leftbutton > .config.toggle:first-child, +.menu.main + > .menu-content + > div + > .right.pane + > .menu-buttons.leftbutton + > .config.toggle:first-child + + .config.toggle { margin-left: 3px !important; width: calc(100% - 15px) !important; } @@ -93,19 +99,20 @@ position: absolute; } -.menu-buttons>.glow { - box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(0, 133, 255, 0.8) 0 0 10px, rgba(0, 133, 255, 0.8) 0 0 10px, rgba(0, 133, 255, 0.8) 0 0 15px !important; +.menu-buttons > .glow { + box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(0, 133, 255, 0.8) 0 0 10px, rgba(0, 133, 255, 0.8) 0 0 10px, + rgba(0, 133, 255, 0.8) 0 0 15px !important; } -.menu-cheat>div { +.menu-cheat > div { margin: 5px; } -.menu-cheat>.selecting { - box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(255, 0, 0, 0.8) 0 0 5px, rgba(255, 0, 0, 0.8) 0 0 5px !important +.menu-cheat > .selecting { + box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(255, 0, 0, 0.8) 0 0 5px, rgba(255, 0, 0, 0.8) 0 0 5px !important; } -.menu-cheat.config>.menubutton { +.menu-cheat.config > .menubutton { height: 16px; line-height: 16px; transform: translateY(-10px); @@ -115,8 +122,8 @@ transition-property: opacity; } -.menu-buttons>.toggle, -.menu-buttons>.config.more { +.menu-buttons > .toggle, +.menu-buttons > .config.more { position: relative; margin-bottom: 10px !important; margin-left: 10px !important; @@ -125,36 +132,36 @@ display: inline-block; } -.menu-buttons>.config.more, -.menu-buttons>.toggle.cardpilecfg { +.menu-buttons > .config.more, +.menu-buttons > .toggle.cardpilecfg { margin-bottom: 0 !important; display: block; } -.menu-buttons>.config.more.pile { +.menu-buttons > .config.more.pile { margin-top: 5px !important; margin-left: 3px !important; } -.menu-buttons>.toggle.cardpilecfgadd:not(.hidden) { +.menu-buttons > .toggle.cardpilecfgadd:not(.hidden) { margin-top: 0 !important; } -.menu-buttons>.toggle.cardpilecfg:not(.nomarginleft) { +.menu-buttons > .toggle.cardpilecfg:not(.nomarginleft) { margin-left: 20px !important; width: calc(100% - 35px) !important; } -.menu-buttons>.config.more * { +.menu-buttons > .config.more * { position: relative; } -.menu-buttons>.button { +.menu-buttons > .button { zoom: 0.75; } .menu-buttons .cardpiledelete, -.toggle>.cardpiledelete { +.toggle > .cardpiledelete { position: relative; float: right; margin-right: 4px; @@ -185,33 +192,33 @@ margin-bottom: 10px !important; } -.menu-container>.menu.main { +.menu-container > .menu.main { left: 15px; top: 52px; } -.menu-container>.menu.main.center { +.menu-container > .menu.main.center { left: calc(50% - 200px); top: calc(50% - 150px); } -.menu-container.hidden>.menu.main { +.menu-container.hidden > .menu.main { transform: scale(0.5); transform-origin: 2px -35px; opacity: 0; } -.menu-container>.menu.main { +.menu-container > .menu.main { transition: all 0.3s; transform-origin: 2px -35px; } -.menu-container.hidden>.menu.main.center { +.menu-container.hidden > .menu.main.center { /*transform:translateY(300px);*/ transform-origin: center center; } -.menu-container>.menu.main.center { +.menu-container > .menu.main.center { transform-origin: center center; } @@ -223,7 +230,7 @@ padding: 0; } -.removing>.menubg.charactercard { +.removing > .menubg.charactercard { transform: scale(0.8); opacity: 0; transition: all 0.3s; @@ -238,7 +245,7 @@ -webkit-animation: dialog_start2 0.3s; } -.menubg.charactercard>.menubutton.large.ava { +.menubg.charactercard > .menubutton.large.ava { width: 180px; height: 240px; left: 10px; @@ -247,7 +254,7 @@ box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 0 5px !important; } -.menubg.charactercard>.menubutton.large { +.menubg.charactercard > .menubutton.large { width: 85px; height: 30px; bottom: 10px; @@ -256,18 +263,18 @@ font-size: 20px; } -.menubg.charactercard>.menubutton.ban { +.menubg.charactercard > .menubutton.ban { left: 10px; } -.menubg.charactercard>.menubutton.fav { +.menubg.charactercard > .menubutton.fav { left: 105px; } -.menubg.charactercard>.ava>.changeskin { +.menubg.charactercard > .ava > .changeskin { bottom: 6px; left: 6px; - font-family: 'xinwei'; + font-family: "xinwei"; font-size: 16px; z-index: 2; color: white; @@ -279,11 +286,11 @@ } #window:not(.nopointer) .menubg.charactercard .menubutton:not(.ava):not(.intro):not(.unselectable), -#window:not(.nopointer) .menubg.charactercard>.ava>.avatars>div { +#window:not(.nopointer) .menubg.charactercard > .ava > .avatars > div { cursor: pointer; } -.menubg.charactercard>.characterskill { +.menubg.charactercard > .characterskill { left: 191px; padding-left: 9px; padding-right: 10px; @@ -294,7 +301,7 @@ overflow-x: scroll; } -.menubg.charactercard>.characterskill>.menubutton.large { +.menubg.charactercard > .characterskill > .menubutton.large { height: 20px; line-height: 20px; padding: 5px; @@ -330,16 +337,16 @@ } @supports not (row-gap: 0.5em) { - .menubg.charactercard .characterintro .character-intro-table>:last-child { + .menubg.charactercard .characterintro .character-intro-table > :last-child { margin-bottom: 0.5em; margin-top: 0.5em; } - .menubg.charactercard .characterintro .character-intro-table>:not(:first-child) { + .menubg.charactercard .characterintro .character-intro-table > :not(:first-child) { margin-left: 0.5em; } - .menubg.charactercard .characterintro .character-intro-table>:not(:last-child) { + .menubg.charactercard .characterintro .character-intro-table > :not(:last-child) { margin-right: 0.5em; } } @@ -351,22 +358,22 @@ width: initial; } -.menubg.charactercard .characterintro .hp>div:first-child { +.menubg.charactercard .characterintro .hp > div:first-child { margin-left: initial; } -.menubg.charactercard .characterintro .hp>div:nth-child(odd) { +.menubg.charactercard .characterintro .hp > div:nth-child(odd) { height: 10px; width: 10px; } -.menubg.charactercard .characterintro .hp>div.text { +.menubg.charactercard .characterintro .hp > div.text { background: none !important; border: none !important; box-shadow: none !important; filter: initial !important; -webkit-filter: initial !important; - font-family: 'xinwei' !important; + font-family: "xinwei" !important; transform: initial !important; height: initial !important; width: initial !important; @@ -401,7 +408,7 @@ bottom: 10px; } -.menubg.charactercard>.ava>.avatars { +.menubg.charactercard > .ava > .avatars { opacity: 0; pointer-events: none; width: 100%; @@ -416,11 +423,11 @@ transform: scale(0.8); } -.menubg.charactercard>.ava>.avatars.scroll { +.menubg.charactercard > .ava > .avatars.scroll { overflow: scroll; } -.menubg.charactercard>.ava>.avatars>div { +.menubg.charactercard > .ava > .avatars > div { position: relative; margin: 3px; width: 81px; @@ -428,34 +435,34 @@ border-radius: 4px; background-size: cover; background-position: 50% 0; - box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 0 5px + box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 0 5px; } -.menubg.charactercard>.ava>.avatars>div:first-child, -.menubg.charactercard>.ava>.avatars>div:first-child+div { +.menubg.charactercard > .ava > .avatars > div:first-child, +.menubg.charactercard > .ava > .avatars > div:first-child + div { margin-top: 6px; } -.menubg.charactercard>.ava>.avatars>div:nth-of-type(odd) { +.menubg.charactercard > .ava > .avatars > div:nth-of-type(odd) { margin-left: 6px; } -.menubg.charactercard>.ava.scroll>.avatars { +.menubg.charactercard > .ava.scroll > .avatars { opacity: 1; pointer-events: auto; transform: scale(1); } -.menubg.charactercard>.ava.scroll>.changeskin { +.menubg.charactercard > .ava.scroll > .changeskin { opacity: 0; } -.menubg.charactercard>.ava.scroll>.avatar { +.menubg.charactercard > .ava.scroll > .avatar { transform: translateX(-200px); pointer-events: none; } -.menubg.charactercard>.ava>.avatar { +.menubg.charactercard > .ava > .avatar { left: 5px; top: 5px; width: calc(100% - 10px); @@ -466,7 +473,7 @@ box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 0 5px; } -.menu.main>.menu-tab { +.menu.main > .menu-tab { height: 37px; text-align: center; width: calc(100% - 30px); @@ -477,10 +484,17 @@ border-width: 0 0 1px; border-style: solid; - border-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.2) 10%, rgba(0, 0, 0, 0.2) 90%, transparent) 0 1 100%; + border-image: linear-gradient( + to right, + transparent, + rgba(0, 0, 0, 0.2) 10%, + rgba(0, 0, 0, 0.2) 90%, + transparent + ) + 0 1 100%; } -.menu.main>.menu-tab-bar { +.menu.main > .menu-tab-bar { width: 45px; height: 2px; top: 35px; @@ -490,7 +504,7 @@ left: 0; } -.menu.main>.menu-tab>div { +.menu.main > .menu-tab > div { display: inline-block; height: 32px; line-height: 30px; @@ -501,35 +515,35 @@ transition: color 0.5s; } -.menu.main>.menu-tab>div:not(.active):not(*:hover), -.menu.main>.menu-tab>.disabled { +.menu.main > .menu-tab > div:not(.active):not(*:hover), +.menu.main > .menu-tab > .disabled { color: rgba(255, 255, 255, 0.6); } -.menu.main>.menu-content { +.menu.main > .menu-content { height: calc(100% - 38px); position: relative; width: 100%; } -.menu.main>.menu-content>div { +.menu.main > .menu-content > div { width: 100%; height: 100%; } -.menu.main>.menu-content>div>.pane { +.menu.main > .menu-content > div > .pane { position: absolute; display: inline-block; height: 100%; } -.menu.main>.menu-content>div>.left.pane { +.menu.main > .menu-content > div > .left.pane { width: 34%; left: 0; overflow: scroll; } -.menu.main>.menu-content>div>.left.pane>div { +.menu.main > .menu-content > div > .left.pane > div { width: calc(100% - 30px); margin-top: 9px; margin-left: 10px; @@ -540,30 +554,30 @@ white-space: nowrap; } -.menu.main>.menu-content>div>.left.pane>.menubutton.off { +.menu.main > .menu-content > div > .left.pane > .menubutton.off { opacity: 0.5; } -.menu.main>.menu-content>div>.left.pane>.lefttext { - font-family: 'xinwei'; +.menu.main > .menu-content > div > .left.pane > .lefttext { + font-family: "xinwei"; font-size: 20px; } -.menu.main>.menu-content>div>.left.pane>div:last-child { +.menu.main > .menu-content > div > .left.pane > div:last-child { margin-bottom: 9px; } -.menu.main>.menu-content>div>.left.pane.dim>div:not(.active) { +.menu.main > .menu-content > div > .left.pane.dim > div:not(.active) { color: rgba(255, 255, 255, 0.5); } -.menu.main>.menu-content>div>.right.pane { +.menu.main > .menu-content > div > .right.pane { left: 34%; width: 66%; overflow: scroll; } -.menu.main>.menu-content>div>.right.pane>div { +.menu.main > .menu-content > div > .right.pane > div { width: calc(100% - 5px); position: absolute; top: 0; @@ -572,19 +586,19 @@ padding-top: 5px; } -.menu.main>.menu-content>div>.right.pane>.expanded { +.menu.main > .menu-content > div > .right.pane > .expanded { padding-bottom: 80px; } -.menu.main>.menu-content>div>.right.pane>.expanded.expanded2 { +.menu.main > .menu-content > div > .right.pane > .expanded.expanded2 { padding-bottom: 12px; } -.menu.main>.menu-content>div>.right.pane>.morenodes { +.menu.main > .menu-content > div > .right.pane > .morenodes { padding-bottom: 10px; } -.menu.main>.menu-content>div>.right.pane>div>.config { +.menu.main > .menu-content > div > .right.pane > div > .config { left: 2px; margin-top: 10px; margin-left: 3px; @@ -594,54 +608,66 @@ position: relative; } -.menu.main>.menu-content>div>.right.pane>div>.config.banskilladd { +.menu.main > .menu-content > div > .right.pane > div > .config.banskilladd { height: 50px; transition: all 0s; } -.menu.main>.menu-content>div>.right.pane>div>.config.banskilladd.hidden { +.menu.main > .menu-content > div > .right.pane > div > .config.banskilladd.hidden { margin-top: -50px !important; } -.menu.main>.menu-content>div>.right.pane>div>.config.banskilladd:not(.hidden), -.menu.main>.menu-content>div>.right.pane>div>.config.cardpileadd:not(.hidden) { +.menu.main > .menu-content > div > .right.pane > div > .config.banskilladd:not(.hidden), +.menu.main > .menu-content > div > .right.pane > div > .config.cardpileadd:not(.hidden) { margin-top: 0; } -.menu.main>.menu-content>div>.right.pane>div>.config.banskilladd>select { +.menu.main > .menu-content > div > .right.pane > div > .config.banskilladd > select { margin-right: 3px; } -.menu.main>.menu-content>div>.right.pane>div>.config.toggle { +.menu.main > .menu-content > div > .right.pane > div > .config.toggle { left: 2px !important; text-align: left !important; white-space: nowrap; } -.menu.main>.menu-content>div>.right.pane>div>.config.toggle.pointerspan.cardpilecfg { +.menu.main > .menu-content > div > .right.pane > div > .config.toggle.pointerspan.cardpilecfg { left: 0px !important; } -.menu.main>.menu-content>div>.right.pane>div>.config.indent, -.menu.main>.menu-content>div>.right.pane>div>.config.toggle.indent { +.menu.main > .menu-content > div > .right.pane > div > .config.indent, +.menu.main > .menu-content > div > .right.pane > div > .config.toggle.indent { left: 12px !important; width: calc(100% - 32px) !important; } -#window:not(.low_performance) .menu.main>.menu-content>div>.right.pane>div:not(.expanded)>.config.auto-hide, -#window:not(.low_performance) .menu.main>.menu-content>div>.right.pane>div>.config.hidden { +#window:not(.low_performance) + .menu.main + > .menu-content + > div + > .right.pane + > div:not(.expanded) + > .config.auto-hide, +#window:not(.low_performance) .menu.main > .menu-content > div > .right.pane > div > .config.hidden { margin-top: -25px; opacity: 0; z-index: -1; } -#window.low_performance .menu.main>.menu-content>div>.right.pane>div:not(.expanded)>.config.auto-hide, -#window.low_performance .menu.main>.menu-content>div>.right.pane>div>.config.hidden { +#window.low_performance + .menu.main + > .menu-content + > div + > .right.pane + > div:not(.expanded) + > .config.auto-hide, +#window.low_performance .menu.main > .menu-content > div > .right.pane > div > .config.hidden { display: none; transition-property: transform; } -.menu.main>.menu-content>div>.menubutton.round { +.menu.main > .menu-content > div > .menubutton.round { left: 335px; top: 197px; z-index: 3; @@ -650,7 +676,7 @@ position: absolute; } -.menu.main>.menu-content>div>.menubutton.round.glowing { +.menu.main > .menu-content > div > .menubutton.round.glowing { box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(0, 133, 255, 0.8) 0 0 10px, rgba(0, 133, 255, 0.8) 0 0 15px !important; } @@ -658,19 +684,19 @@ pointer-events: none; } -.popup-container>.menu { +.popup-container > .menu { position: absolute; overflow: scroll; max-height: 400px; transition-property: opacity; } -.popup-container>.menu.visual { +.popup-container > .menu.visual { padding: 5px; overflow: scroll; } -.popup-container>.menu>div { +.popup-container > .menu > div { padding-top: 5px; padding-bottom: 5px; padding-left: 10px; @@ -680,35 +706,35 @@ transition: all 0s; } -.popup-container>.menu.visual>.button.transparent { +.popup-container > .menu.visual > .button.transparent { pointer-events: none; } -.popup-container>.menu.visual>.button.transparent:not(.shown) { +.popup-container > .menu.visual > .button.transparent:not(.shown) { display: none; } -.popup-container>.menu.visual>.dashedmenubutton { +.popup-container > .menu.visual > .dashedmenubutton { box-shadow: none !important; width: 86px; height: 86px; border: 2px dashed rgb(40, 40, 40); } -.popup-container>.menu.visual>.controlbutton { +.popup-container > .menu.visual > .controlbutton { height: 26px; border-radius: 4px; } -.popup-container>.menu.visual>.controlbutton.dashedmenubutton { +.popup-container > .menu.visual > .controlbutton.dashedmenubutton { height: 22px; } -.popup-container>.menu.visual>.controlbutton.dashedmenubutton>div { +.popup-container > .menu.visual > .controlbutton.dashedmenubutton > div { line-height: 22px; } -.popup-container>.menu.visual>.controlbutton>div { +.popup-container > .menu.visual > .controlbutton > div { width: 100%; height: 100%; left: 0 !important; @@ -720,17 +746,17 @@ line-height: 26px; } -.popup-container>.menu.visual>.controlbutton>div>br { +.popup-container > .menu.visual > .controlbutton > div > br { display: none; } -.popup-container>.menu.visual>.hpbutton { +.popup-container > .menu.visual > .hpbutton { width: 60px; height: 60px; overflow: hidden; } -.popup-container>.menu.visual>.hpbutton>div { +.popup-container > .menu.visual > .hpbutton > div { width: 30px; height: 30px; margin: 0; @@ -741,31 +767,31 @@ background-position: 50% 50%; } -.popup-container>.menu.visual>.hpbutton>div:nth-child(1) { +.popup-container > .menu.visual > .hpbutton > div:nth-child(1) { left: 0; top: 0; } -.popup-container>.menu.visual>.hpbutton>div:nth-child(2) { +.popup-container > .menu.visual > .hpbutton > div:nth-child(2) { right: 0; left: auto; top: 0; } -.popup-container>.menu.visual>.hpbutton>div:nth-child(3) { +.popup-container > .menu.visual > .hpbutton > div:nth-child(3) { left: 0; bottom: 0; top: auto; } -.popup-container>.menu.visual>.hpbutton>div:nth-child(4) { +.popup-container > .menu.visual > .hpbutton > div:nth-child(4) { right: 0; left: auto; bottom: 0; top: auto; } -.popup-container>.menu.visual>.hpbutton>div>div { +.popup-container > .menu.visual > .hpbutton > div > div { width: 60%; height: 60%; margin: 0; @@ -779,27 +805,27 @@ -webkit-filter: brightness(1.5); } -.popup-container>.menu.visual>.hpbutton>div:nth-child(1)>div { +.popup-container > .menu.visual > .hpbutton > div:nth-child(1) > div { background: rgba(57, 123, 4, 1); border: 1px solid rgba(39, 79, 7, 1); } -.popup-container>.menu.visual>.hpbutton>div:nth-child(2)>div { +.popup-container > .menu.visual > .hpbutton > div:nth-child(2) > div { background: rgba(166, 140, 6, 1); border: 1px solid rgba(79, 64, 7, 1); } -.popup-container>.menu.visual>.hpbutton>div:nth-child(3)>div { +.popup-container > .menu.visual > .hpbutton > div:nth-child(3) > div { background: rgba(148, 27, 27, 1); border: 1px solid rgba(79, 7, 7, 1); } -.popup-container>.menu.visual>.hpbutton>div:nth-child(4)>div { +.popup-container > .menu.visual > .hpbutton > div:nth-child(4) > div { background: rgba(57, 123, 4, 1); border: 1px solid rgba(39, 79, 7, 1); } -.themebutton>div { +.themebutton > div { width: 50px; height: 76px; top: 7px; @@ -807,7 +833,7 @@ border-radius: 4px; } -.themebutton>div>div { +.themebutton > div > div { width: calc(100% - 10px); height: 12px; display: block; @@ -819,82 +845,82 @@ transition: all 0s; } -.themebutton>div:first-child { +.themebutton > div:first-child { z-index: 2; } .themebutton.woodden { - background: url('../../theme/woodden/grid.png'), linear-gradient(#6c7989, #434b55) fixed; + background: url("../../theme/woodden/grid.png"), linear-gradient(#6c7989, #434b55) fixed; } -.themebutton.woodden>div:not(*:first-child) { - background: url('../../theme/woodden/wood2.png'); +.themebutton.woodden > div:not(*:first-child) { + background: url("../../theme/woodden/wood2.png"); box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px; } -.themebutton.woodden>div.fakeplayer:not(*:first-child) { +.themebutton.woodden > div.fakeplayer:not(*:first-child) { box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 0px 10px; } -.themebutton.woodden>div>div { - background: url('../../theme/woodden/wood.png'); +.themebutton.woodden > div > div { + background: url("../../theme/woodden/wood.png"); } -.themebutton.woodden>div>div.active { +.themebutton.woodden > div > div.active { box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(0, 133, 255, 0.4) 0 0 0 2px, rgba(0, 133, 255, 1) 0 0 5px !important; } .themebutton.music { - background: url('../../theme/music/grid.png'), linear-gradient(#333333, #222222) fixed; + background: url("../../theme/music/grid.png"), linear-gradient(#333333, #222222) fixed; } -.themebutton.music>div:not(*:first-child) { +.themebutton.music > div:not(*:first-child) { background: linear-gradient(#4b4b4b, #464646); box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.2) 0 3px 10px; } -.themebutton.music>div>div { +.themebutton.music > div > div { background: linear-gradient(#4b4b4b, #464646); } .themebutton.ol { - background: url('../../image/background/ol_bg.jpg'); + background: url("../../image/background/ol_bg.jpg"); background-size: cover; } -.themebutton.ol>div:not(*:first-child) { +.themebutton.ol > div:not(*:first-child) { background: linear-gradient(#4b4b4b, #464646); box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.2) 0 3px 10px; } -.themebutton.ol>div>div { +.themebutton.ol > div > div { background: linear-gradient(#4b4b4b, #464646); } .themebutton.simple { - background: url('../../image/background/ol_bg.jpg'); + background: url("../../image/background/ol_bg.jpg"); background-size: cover; } -.themebutton.simple>div:not(*:first-child) { +.themebutton.simple > div:not(*:first-child) { background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)); box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1px, rgba(0, 0, 0, 0.2) 0 3px 10px; } -.themebutton.simple>div>div { +.themebutton.simple > div > div { background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)); } -.themebutton.simple>div>div.active, -.themebutton.music>div>div.active { +.themebutton.simple > div > div.active, +.themebutton.music > div > div.active { background-image: linear-gradient(rgba(47, 101, 150, 1), rgba(43, 90, 132, 1)); } -.themebutton>div>div:first-child { +.themebutton > div > div:first-child { margin-top: 5px; } -.themebutton>.fakeplayer>.avatar { +.themebutton > .fakeplayer > .avatar { width: calc(100% - 2px); height: calc(100% - 2px); left: 1px; @@ -906,11 +932,11 @@ box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px inset; } -.themebutton>.fakeplayer.oldlayout>.avatar { +.themebutton > .fakeplayer.oldlayout > .avatar { width: calc(50% - 2px); } -.themebutton>.fakeplayer.me>.avatar { +.themebutton > .fakeplayer.me > .avatar { width: 22px; height: 22px; left: 3px; @@ -919,12 +945,12 @@ border-radius: 0px; } -.themebutton>.fakeplayer.me { +.themebutton > .fakeplayer.me { clip-path: polygon(-10px 0, 32px 0, 32px 32px, -10px 32px); -webkit-clip-path: polygon(-10px 0, 32px 0, 32px 32px, -10px 32px); } -.themebutton>div>div>div { +.themebutton > div > div > div { width: 200%; height: 200%; left: 0; @@ -938,17 +964,16 @@ box-shadow: none !important; } -.themebutton.woodden>div>div>div { +.themebutton.woodden > div > div > div { color: rgba(77, 60, 51, 0.8); text-shadow: none; } - -#window:not(.nopointer) .popup-container>.menu>div { +#window:not(.nopointer) .popup-container > .menu > div { cursor: pointer; } -.popup-container>.menu.visual>div { +.popup-container > .menu.visual > div { display: inline-block; margin: 5px !important; padding: 0 !important; @@ -956,7 +981,7 @@ height: 90px; } -.popup-container>.menu.visual.withbar>div:last-child { +.popup-container > .menu.visual.withbar > div:last-child { display: block; width: calc(100% - 10px); text-align: center; @@ -964,26 +989,26 @@ cursor: default !important; } -.popup-container>.menu.visual.withbar>div:last-child>div { +.popup-container > .menu.visual.withbar > div:last-child > div { display: inline-block; position: relative; margin-left: 5px; margin-right: 5px; } -.popup-container>.menu.visual.withbar>div:not(.showdelete)>.deletebutton { +.popup-container > .menu.visual.withbar > div:not(.showdelete) > .deletebutton { display: none; } -.popup-container>.menu.visual.withbar>div.hideadd>.addbutton { +.popup-container > .menu.visual.withbar > div.hideadd > .addbutton { display: none; } -.popup-container>.menu.visual.withbar>div.showdelete>div:first-child:not(.addbutton) { +.popup-container > .menu.visual.withbar > div.showdelete > div:first-child:not(.addbutton) { display: none; } -#window:not(.nopointer) .popup-container>.menu.visual.withbar>div:last-child>div { +#window:not(.nopointer) .popup-container > .menu.visual.withbar > div:last-child > div { cursor: pointer; } @@ -1006,15 +1031,15 @@ input.fileinput::-webkit-file-upload-button { cursor: pointer; } -.popup-container>.menu.visual>.button.character>.name { +.popup-container > .menu.visual > .button.character > .name { top: 10px; } -.popup-container>.menu>div:first-child { +.popup-container > .menu > div:first-child { margin-top: 5px; } -.popup-container>.menu>div:last-child { +.popup-container > .menu > div:last-child { margin-bottom: 5px; } @@ -1024,13 +1049,13 @@ input.fileinput::-webkit-file-upload-button { position: relative; } -#window:not(.nopointer) .config.switcher>div, -#window:not(.nopointer) .config.toggle>div { +#window:not(.nopointer) .config.switcher > div, +#window:not(.nopointer) .config.toggle > div { cursor: pointer; } -.config.switcher>div, -.config.toggle>div { +.config.switcher > div, +.config.toggle > div { position: absolute; right: 0; left: auto; @@ -1039,22 +1064,22 @@ input.fileinput::-webkit-file-upload-button { height: 25px; } -.config.switcher>div { +.config.switcher > div { border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: transparent; margin-right: 4px; } -.config.switcher.on>div { +.config.switcher.on > div { border-bottom-color: rgb(0, 133, 255); } -.config.toggle>div { +.config.toggle > div { width: 60px; } -.config.toggle>div>div { +.config.toggle > div > div { display: inline-block; position: relative; width: 25px; @@ -1065,7 +1090,7 @@ input.fileinput::-webkit-file-upload-button { padding: 0; } -.config.toggle.on>div>div { +.config.toggle.on > div > div { left: calc(100% - 25px); } @@ -1073,17 +1098,17 @@ input.fileinput::-webkit-file-upload-button { z-index: 1; } -.config.more>div { +.config.more > div { display: inline-block; - transition: transform 0.3s + transition: transform 0.3s; } -.config.more>div { +.config.more > div { transform: translateY(-2px); - font-family: 'huangcao', 'xinwei'; + font-family: "huangcao", "xinwei"; } -.config.more.on>div { +.config.more.on > div { transform: rotate(90deg) translateX(-2px); } @@ -1096,7 +1121,7 @@ input.fileinput::-webkit-file-upload-button { .menubutton.large { font-size: 30px; line-height: 30px; - font-family: 'STXinwei', 'xinwei'; + font-family: "STXinwei", "xinwei"; } .menubutton.round { @@ -1105,7 +1130,7 @@ input.fileinput::-webkit-file-upload-button { border-radius: 100%; font-size: 36px; line-height: 40px; - font-family: 'xinwei' + font-family: "xinwei"; } .menubutton.left { @@ -1130,37 +1155,37 @@ input.fileinput::-webkit-file-upload-button { @keyframes fadein { from { - opacity: 0 + opacity: 0; } } @-webkit-keyframes fadein { from { - opacity: 0 + opacity: 0; } } @keyframes menuslideup { from { - top: 100% + top: 100%; } } @-webkit-keyframes menuslideup { from { - top: 100% + top: 100%; } } @keyframes menuslidedown { to { - top: 100% + top: 100%; } } @-webkit-keyframes menuslidedown { to { - top: 100% + top: 100%; } } @@ -1168,11 +1193,11 @@ input.fileinput::-webkit-file-upload-button { from { transform: scale(0.5); opacity: 0; - transform-origin: 2px -35px + transform-origin: 2px -35px; } to { - transform-origin: 2px -35px + transform-origin: 2px -35px; } } @@ -1180,56 +1205,50 @@ input.fileinput::-webkit-file-upload-button { from { transform: scale(0.5); opacity: 0; - transform-origin: 2px -35px + transform-origin: 2px -35px; } to { - transform-origin: 2px -35px + transform-origin: 2px -35px; } } @keyframes menuzoomout { from { - transform-origin: 2px -35px + transform-origin: 2px -35px; } to { transform: scale(0.5); opacity: 0; - transform-origin: 2px -35px + transform-origin: 2px -35px; } } @-webkit-keyframes menuzoomout { from { - transform-origin: 2px -35px + transform-origin: 2px -35px; } to { transform: scale(0.5); opacity: 0; - transform-origin: 2px -35px + transform-origin: 2px -35px; } } - - - - - - -.menu-buttons>.new_character { +.menu-buttons > .new_character { display: block; position: relative; width: 100%; } -.menu-buttons>.new_character>.avatar { +.menu-buttons > .new_character > .avatar { background-size: cover; } -.menu-buttons>.new_character>.avatar, -.menu-buttons>.new_character>.card { +.menu-buttons > .new_character > .avatar, +.menu-buttons > .new_character > .card { top: 8px; left: 12px; position: absolute; @@ -1238,11 +1257,11 @@ input.fileinput::-webkit-file-upload-button { margin: 0; } -.menu-buttons>.new_character>.card { +.menu-buttons > .new_character > .card { height: 100px; } -.menu-buttons>.new_character>.card:not(.fullskin) { +.menu-buttons > .new_character > .card:not(.fullskin) { color: white; text-shadow: black 0px 0px 2px; transform: translateX(0px); @@ -1250,8 +1269,8 @@ input.fileinput::-webkit-file-upload-button { background-size: cover; } -.menu-buttons>.new_character>.avatar>input, -.menu-buttons>.new_character>.card>input { +.menu-buttons > .new_character > .avatar > input, +.menu-buttons > .new_character > .card > input { z-index: 3; border-radius: 8px; opacity: 0; @@ -1262,24 +1281,24 @@ input.fileinput::-webkit-file-upload-button { position: absolute; } -#window[data-radius_size='reduce'] .menu-buttons>.new_character>.avatar>input, -#window[data-radius_size='reduce'] .menu-buttons>.new_character>.card>input { +#window[data-radius_size="reduce"] .menu-buttons > .new_character > .avatar > input, +#window[data-radius_size="reduce"] .menu-buttons > .new_character > .card > input { border-radius: 4px; } -#window[data-radius_size='off'] .menu-buttons>.new_character>.avatar>input, -#window[data-radius_size='off'] .menu-buttons>.new_character>.card>input { +#window[data-radius_size="off"] .menu-buttons > .new_character > .avatar > input, +#window[data-radius_size="off"] .menu-buttons > .new_character > .card > input { border-radius: 0px; } -#window[data-radius_size='increase'] .menu-buttons>.new_character>.avatar>input, -#window[data-radius_size='increase'] .menu-buttons>.new_character>.card>input { +#window[data-radius_size="increase"] .menu-buttons > .new_character > .avatar > input, +#window[data-radius_size="increase"] .menu-buttons > .new_character > .card > input { border-radius: 16px; } -.menu-buttons>.new_character>.avatar>.select_avatar, -.menu-buttons>.new_character>.card>.select_avatar { - font-family: 'xinwei'; +.menu-buttons > .new_character > .avatar > .select_avatar, +.menu-buttons > .new_character > .card > .select_avatar { + font-family: "xinwei"; font-size: 20px; width: 100%; height: 20px; @@ -1289,16 +1308,16 @@ input.fileinput::-webkit-file-upload-button { text-align: center; } -.menu-buttons>.new_character>.card>.select_avatar { +.menu-buttons > .new_character > .card > .select_avatar { top: 40px; } -.menu-buttons>.new_character>.avatar.inited>.select_avatar, -.menu-buttons>.new_character>.card.inited>.select_avatar { +.menu-buttons > .new_character > .avatar.inited > .select_avatar, +.menu-buttons > .new_character > .card.inited > .select_avatar { display: none; } -.menu-buttons>.new_character>.indent { +.menu-buttons > .new_character > .indent { display: block; margin-left: 123px; width: calc(100% - 135px); @@ -1308,15 +1327,15 @@ input.fileinput::-webkit-file-upload-button { white-space: nowrap; } -.menu-buttons>.new_character>.indent>input { +.menu-buttons > .new_character > .indent > input { width: 60px; } -.menu-buttons>.new_character>div>select { +.menu-buttons > .new_character > div > select { margin-right: 3px; } -.menu-buttons>.new_character>.die_audio { +.menu-buttons > .new_character > .die_audio { position: absolute; left: 12px; top: 160px; @@ -1324,15 +1343,15 @@ input.fileinput::-webkit-file-upload-button { width: calc(100% - 12px); } -.menu-buttons>.new_character>.die_audio>input { +.menu-buttons > .new_character > .die_audio > input { width: calc(100% - 100px); } -.menu-buttons>.new_character>.die_audio>button { +.menu-buttons > .new_character > .die_audio > button { margin-right: 12px; } -.menu-buttons>.new_character>.add_skill { +.menu-buttons > .new_character > .add_skill { position: absolute; left: 12px; top: 250px; @@ -1341,43 +1360,43 @@ input.fileinput::-webkit-file-upload-button { white-space: nowrap; } -.menu-buttons>.new_character>.add_skill.options { +.menu-buttons > .new_character > .add_skill.options { top: 205px; } -.menu-buttons>.new_character>.add_skill.options>span { +.menu-buttons > .new_character > .add_skill.options > span { margin-right: 10px; } -.menu-buttons>.new_character>.add_skill.create { +.menu-buttons > .new_character > .add_skill.create { top: 220px; } -.menu-buttons>.new_character>.add_skill.create>div { +.menu-buttons > .new_character > .add_skill.create > div { position: relative; } -.menu-buttons>.new_character>.add_skill.create>div.hidden { +.menu-buttons > .new_character > .add_skill.create > div.hidden { display: none; } -.menu-buttons>.new_character>.add_skill.create>div>textarea { +.menu-buttons > .new_character > .add_skill.create > div > textarea { resize: none; width: 200px; height: 100px; margin-top: 5px; } -.menu-buttons>.new_character>.add_skill.create>div>div { +.menu-buttons > .new_character > .add_skill.create > div > div { position: relative; margin-top: 5px; } -.menu-buttons>.new_character>.add_skill.create>div>div>input { +.menu-buttons > .new_character > .add_skill.create > div > div > input { width: 120px; } -.menu-buttons>.new_character>.skill_list { +.menu-buttons > .new_character > .skill_list { position: absolute; left: 12px; top: 265px; @@ -1388,7 +1407,7 @@ input.fileinput::-webkit-file-upload-button { transition: all 0s; } -.menu-buttons>.new_character>.skill_list>div { +.menu-buttons > .new_character > .skill_list > div { position: relative; width: 100%; margin: 0; @@ -1396,44 +1415,44 @@ input.fileinput::-webkit-file-upload-button { height: auto; } -.menu-buttons>.new_character>.skill_list>div>div { +.menu-buttons > .new_character > .skill_list > div > div { position: relative; } -.menu-buttons>.new_character>.skill_list>div:first-child { +.menu-buttons > .new_character > .skill_list > div:first-child { margin-bottom: 10px; } -.menu-buttons>.new_character>.skill_list>div:first-child>div { +.menu-buttons > .new_character > .skill_list > div:first-child > div { width: calc(50% - 10px); margin-right: 10px; margin-top: 6px; } -.menu-buttons>.new_character>.skill_list>div:first-child>div>div { +.menu-buttons > .new_character > .skill_list > div:first-child > div > div { position: relative; } -.menu-buttons>.new_character>.skill_list>div:first-child>div>div:last-child { +.menu-buttons > .new_character > .skill_list > div:first-child > div > div:last-child { float: right; } -.menu-buttons>.new_character.export { +.menu-buttons > .new_character.export { text-align: left; } -.menu-buttons>.new_character.export>div { +.menu-buttons > .new_character.export > div { position: relative; margin-left: 12px; margin-top: 5px; } -.menu-buttons>.new_character.export>div>input { +.menu-buttons > .new_character.export > div > input { width: 100px; margin-right: 5px; } -.menu-buttons>.new_character.export.import>div>input { +.menu-buttons > .new_character.export.import > div > input { width: 153px; } @@ -1461,7 +1480,7 @@ input.fileinput::-webkit-file-upload-button { background-image: linear-gradient(rgba(47, 101, 150, 1), rgba(43, 90, 132, 1)) !important; } -#system>div>.pressdown { +#system > div > .pressdown { transform: scale(0.97); } @@ -1473,7 +1492,7 @@ input.fileinput::-webkit-file-upload-button { transition: all 0.5s; } -#system>div>.pressdown2 { +#system > div > .pressdown2 { background-image: linear-gradient(rgba(47, 101, 150, 1), rgba(43, 90, 132, 1)); } @@ -1487,22 +1506,22 @@ input.fileinput::-webkit-file-upload-button { box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.3) 0 3px 10px; } -.config.toggle>div { +.config.toggle > div { border-radius: 25px; box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(0, 0, 0, 0.2) 0 0 10px inset; } -.config.toggle.on>div { +.config.toggle.on > div { background-color: rgba(47, 101, 150, 1); } -.config.toggle>div>div { +.config.toggle > div > div { border-radius: 25px; background-image: linear-gradient(rgba(75, 75, 75, 1), rgba(70, 70, 70, 1)); box-shadow: rgba(51, 51, 51, 1) 0 0 0 1px, rgba(0, 0, 0, 0.2) 0 3px 10px; } -.popup-container>.menu:not(.visual)>div:hover { +.popup-container > .menu:not(.visual) > div:hover { color: white; background-image: linear-gradient(rgba(47, 101, 150, 1), rgba(43, 90, 132, 1)); box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px; @@ -1527,30 +1546,34 @@ input.fileinput::-webkit-file-upload-button { max-height: 400px; } -.videonode.menubutton>div { +.videonode.menubutton > div { position: absolute; } -.videonode.menubutton.extension>div { +.videonode.menubutton.extension > div { position: relative; display: block; } -#window:not(.nopointer) .videonode.menubutton.extension>.caption>.menubutton:not(.transparent2):not(.nopointer) { +#window:not(.nopointer) + .videonode.menubutton.extension + > .caption + > .menubutton:not(.transparent2):not(.nopointer) { cursor: pointer; } -.videonode.menubutton.extension>.caption>.menubutton { +.videonode.menubutton.extension > .caption > .menubutton { position: relative; float: right; font-size: 16px; padding: 0; text-align: center; width: 80px; - font-family: 'STHeiti', 'SimHei', 'Microsoft JhengHei', 'Microsoft YaHei', 'WenQuanYi Micro Hei', Helvetica, Arial, sans-serif; + font-family: "STHeiti", "SimHei", "Microsoft JhengHei", "Microsoft YaHei", "WenQuanYi Micro Hei", + Helvetica, Arial, sans-serif; } -.videonode.menubutton.extension>.caption>.menubutton>a { +.videonode.menubutton.extension > .caption > .menubutton > a { margin: 0; padding: 0; width: 100%; @@ -1562,7 +1585,7 @@ input.fileinput::-webkit-file-upload-button { position: absolute; } -.videonode.menubutton>.videoavatar { +.videonode.menubutton > .videoavatar { width: 56px; height: 56px; top: 7px; @@ -1570,7 +1593,7 @@ input.fileinput::-webkit-file-upload-button { background-size: cover; } -.videonode.menubutton>.videoavatar2 { +.videonode.menubutton > .videoavatar2 { width: 20px; height: 20px; top: 47px; @@ -1579,7 +1602,7 @@ input.fileinput::-webkit-file-upload-button { border-radius: 100%; } -.videonode.menubutton>.caption { +.videonode.menubutton > .caption { display: inline-block; left: 84px; top: 6px; @@ -1587,28 +1610,29 @@ input.fileinput::-webkit-file-upload-button { white-space: nowrap; } -.videonode.menubutton.extension>.caption { +.videonode.menubutton.extension > .caption { left: 0; top: 0; margin-left: 2px; } -.videonode.menubutton>.text { +.videonode.menubutton > .text { font-size: 14px; left: 85px; top: 35px; line-height: 20px; text-align: left; - font-family: 'STHeiti', 'SimHei', 'Microsoft JhengHei', 'Microsoft YaHei', 'WenQuanYi Micro Hei', Helvetica, Arial, sans-serif + font-family: "STHeiti", "SimHei", "Microsoft JhengHei", "Microsoft YaHei", "WenQuanYi Micro Hei", + Helvetica, Arial, sans-serif; } -.videonode.menubutton.extension>.text { +.videonode.menubutton.extension > .text { left: 0; top: 0; margin-left: 5px; } -.videonode.menubutton.extension>.text.author>span { +.videonode.menubutton.extension > .text.author > span { /*float: right;*/ position: absolute; right: 0; @@ -1619,22 +1643,22 @@ input.fileinput::-webkit-file-upload-button { opacity: 0; } -.videonode.menubutton.extension.current>.text.author>span { +.videonode.menubutton.extension.current > .text.author > span { opacity: 1; } -.videonode.menubutton>.victory { - font-family: 'huangcao', 'xinwei'; +.videonode.menubutton > .victory { + font-family: "huangcao", "xinwei"; font-size: 25px; - text-shadow: black 0 0 1px, rgba(255, 203, 0, 1) 0 0 2px, rgba(255, 203, 0, 1) 0 0 5px, rgba(255, 203, 0, 1) 0 0 5px, - rgba(255, 203, 0, 1) 0 0 5px, black 0 0 1px; + text-shadow: black 0 0 1px, rgba(255, 203, 0, 1) 0 0 2px, rgba(255, 203, 0, 1) 0 0 5px, + rgba(255, 203, 0, 1) 0 0 5px, rgba(255, 203, 0, 1) 0 0 5px, black 0 0 1px; color: white; position: absolute; left: 48px; top: 48px; } -.videonode>.video_star { +.videonode > .video_star { opacity: 0; position: absolute; left: 196px; @@ -1646,12 +1670,12 @@ input.fileinput::-webkit-file-upload-button { text-align: center; } -.videonode:not(.starred):hover>.video_star { +.videonode:not(.starred):hover > .video_star { opacity: 0.5; } -.videonode.starred>.video_star { - opacity: 1 +.videonode.starred > .video_star { + opacity: 1; } .onlineclient .videonode { @@ -1664,7 +1688,7 @@ input.fileinput::-webkit-file-upload-button { border-bottom-left-radius: 10px; } -.onlineclient .videonode>.videoavatar { +.onlineclient .videonode > .videoavatar { padding: 0; left: -4px; top: -2px; @@ -1683,7 +1707,7 @@ input.fileinput::-webkit-file-upload-button { margin-top: 2px; } -.onlineclient .videonode>.name { +.onlineclient .videonode > .name { left: 35px; max-width: 125px; overflow: hidden; @@ -1692,14 +1716,14 @@ input.fileinput::-webkit-file-upload-button { height: 30px; line-height: 30px; font-size: 18px; - font-family: 'lishu', 'xinwei'; + font-family: "lishu", "xinwei"; } .onlineclient .videonode.videonodestatus { height: auto; } -.onlineclient .videonode.videonodestatus>.videostatus { +.onlineclient .videonode.videonodestatus > .videostatus { position: relative; display: block; margin-left: 10px; @@ -1708,7 +1732,7 @@ input.fileinput::-webkit-file-upload-button { width: calc(100% - 20px); } -.onlineevent>div { +.onlineevent > div { text-align: left; position: relative; display: block; @@ -1716,19 +1740,19 @@ input.fileinput::-webkit-file-upload-button { margin-bottom: 5px; } -.onlineevent>div.title { - font-family: 'xinwei'; +.onlineevent > div.title { + font-family: "xinwei"; font-size: 18px; } -.button-downloading>.button-progress { +.button-downloading > .button-progress { width: 100%; border-radius: 4px; z-index: 1; overflow: hidden; } -.button-downloading>.button-progress>div { +.button-downloading > .button-progress > div { width: 0; height: 100%; position: absolute; @@ -1738,16 +1762,16 @@ input.fileinput::-webkit-file-upload-button { background: linear-gradient(rgb(29, 206, 68), rgb(1, 148, 46)); } -.button-downloading>div:not(.button-progress) { +.button-downloading > div:not(.button-progress) { width: 100% !important; z-index: 2; } -.button-downloading>span { +.button-downloading > span { opacity: 0; } -.button-downloading>div { +.button-downloading > div { height: 100%; margin: 0 !important; padding: 0 !important; @@ -1767,7 +1791,7 @@ input.fileinput::-webkit-file-upload-button { overflow: scroll; } -.menu-buttons .file-container>div { +.menu-buttons .file-container > div { position: relative; left: 0; display: block; @@ -1777,12 +1801,12 @@ input.fileinput::-webkit-file-upload-button { text-align: left; } -.menu-buttons .file-container>div>span { +.menu-buttons .file-container > div > span { cursor: pointer; text-decoration: underline; } -.menu-buttons .file-container>div>img { +.menu-buttons .file-container > div > img { display: block; margin-top: 5px; } @@ -1801,18 +1825,18 @@ input.fileinput::-webkit-file-upload-button { margin-top: 10px; } -.menubutton.large.dashboard.dashboard2>div:first-child { +.menubutton.large.dashboard.dashboard2 > div:first-child { font-size: 40px; line-height: 40px; } -.menubutton.large.dashboard.dashboard2>div:last-child { +.menubutton.large.dashboard.dashboard2 > div:last-child { font-size: 16px; white-space: nowrap; } -.menubutton.large.dashboard>div:first-child { - font-family: 'lishu', 'xiaozhuan'; +.menubutton.large.dashboard > div:first-child { + font-family: "lishu", "xiaozhuan"; font-size: 60px; line-height: 60px; position: absolute; @@ -1822,7 +1846,7 @@ input.fileinput::-webkit-file-upload-button { height: 60px; } -.menubutton.large.dashboard>div:last-child { +.menubutton.large.dashboard > div:last-child { font-size: 18px; position: absolute; left: 0; @@ -1840,7 +1864,7 @@ input.fileinput::-webkit-file-upload-button { overflow: hidden; } -#create-extension>div { +#create-extension > div { position: absolute; width: 100%; height: 100%; @@ -1849,53 +1873,54 @@ input.fileinput::-webkit-file-upload-button { top: 0; } -#create-extension>.menu-buttons { +#create-extension > .menu-buttons { left: 10px; height: calc(100% - 5px); width: calc(100% - 15px) !important; } -#create-extension>.menu-buttons>.config.more { +#create-extension > .menu-buttons > .config.more { margin-left: 0px !important; margin-top: 10px !important; } -#create-extension>.menu-buttons>.config.more.margin-bottom { +#create-extension > .menu-buttons > .config.more.margin-bottom { margin-left: 0px !important; margin-top: 10px !important; margin-bottom: 5px !important; } -#create-extension>.hidden { +#create-extension > .hidden { pointer-events: none; } -#create-extension>div:not(*:first-child).hidden { +#create-extension > div:not(*:first-child).hidden { transform: translateX(200px); } -#create-extension>.menu-buttons>.new_character>.skill_list { +#create-extension > .menu-buttons > .new_character > .skill_list { top: 290px; } -#create-extension>.menu-buttons>.new_character>.skill_list>div:first-child { +#create-extension > .menu-buttons > .new_character > .skill_list > div:first-child { transition: all 0s; } -#create-extension>.menu-buttons>.new_character>.skill_list>div:first-child:not(*:empty) { +#create-extension > .menu-buttons > .new_character > .skill_list > div:first-child:not(*:empty) { margin-top: 10px; margin-bottom: 10px; } -#create-extension>.menu-buttons>.new_character>.skill_list>div:first-child>button { +#create-extension > .menu-buttons > .new_character > .skill_list > div:first-child > button { margin-right: 3px; margin-bottom: 3px; } -div.popup-container.editor,div.popup-container.editor div{ +div.popup-container.editor, +div.popup-container.editor div { transition: none; } -.popup-container.editor>div { +.popup-container.editor > div { width: 80%; height: 90%; position: absolute; @@ -1907,8 +1932,8 @@ div.popup-container.editor,div.popup-container.editor div{ overflow: hidden; } -.popup-container.editor>div>.editbutton { - font-family: 'lishu'; +.popup-container.editor > div > .editbutton { + font-family: "lishu"; font-size: 18px; color: rgb(60, 60, 60); text-shadow: none; @@ -1919,16 +1944,16 @@ div.popup-container.editor,div.popup-container.editor div{ cursor: pointer; } -.popup-container.editor>div>.editbutton:not(:first-child) { +.popup-container.editor > div > .editbutton:not(:first-child) { position: relative; } -.popup-container.editor>div>.editbutton:first-child { +.popup-container.editor > div > .editbutton:first-child { left: auto; right: 0; } -.popup-container.editor>div>div:last-child { +.popup-container.editor > div > div:last-child { width: 100%; height: calc(100% - 40px); position: absolute; @@ -1938,7 +1963,7 @@ div.popup-container.editor,div.popup-container.editor div{ border-top: 1px solid rgba(0, 0, 0, 0.2); } -.popup-container.editor>div>div:last-child>textarea { +.popup-container.editor > div > div:last-child > textarea { width: 100%; height: 100%; border: none; @@ -1964,43 +1989,43 @@ div.popup-container.editor,div.popup-container.editor div{ padding-bottom: 20px; } -.edit_pile>div:last-child { +.edit_pile > div:last-child { width: 100%; position: relative; } -.edit_pile>div:last-child>button { +.edit_pile > div:last-child > button { margin-right: 3px; margin-top: 3px; } -.new_character.new_skill>div { +.new_character.new_skill > div { position: relative; margin-top: 2px; white-space: nowrap; overflow: visible; } -.new_character.new_skill>div>button { +.new_character.new_skill > div > button { margin-right: 3px; } -.menu-buttons.new_skill>.menubutton { +.menu-buttons.new_skill > .menubutton { position: relative; margin: 5px; } -.new_character.new_skill>.menubutton.large { +.new_character.new_skill > .menubutton.large { left: 13px; position: absolute; top: 88px; } -.new_character.new_skill>.menubutton.large.new_card_delete { +.new_character.new_skill > .menubutton.large.new_card_delete { left: 155px; } -.popup-container>.prompt-container { +.popup-container > .prompt-container { display: table; width: 100%; height: 100%; @@ -2010,7 +2035,7 @@ div.popup-container.editor,div.popup-container.editor div{ padding: 0; } -.popup-container>.prompt-container>div { +.popup-container > .prompt-container > div { height: auto; display: table-cell; vertical-align: middle; @@ -2018,11 +2043,11 @@ div.popup-container.editor,div.popup-container.editor div{ position: relative; } -.popup-container>.prompt-container>div>div { +.popup-container > .prompt-container > div > div { position: relative; } -.popup-container>.prompt-container>div>div>div { +.popup-container > .prompt-container > div > div > div { display: block; width: calc(100% - 10px); margin-top: 15px; @@ -2037,11 +2062,11 @@ div.popup-container.editor,div.popup-container.editor div{ /* .popup-container>.prompt-container>div>div>div:first-child{ */ /*text-align: left;*/ /* } */ -.popup-container>.prompt-container>div>div>div:last-child { +.popup-container > .prompt-container > div > div > div:last-child { margin-bottom: 15px; } -.popup-container>.prompt-container>div>div>div>input { +.popup-container > .prompt-container > div > div > div > input { text-align: left; width: 100%; resize: none; @@ -2051,7 +2076,7 @@ div.popup-container.editor,div.popup-container.editor div{ box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 1px; } -.popup-container>.prompt-container>div>div>div>.menubutton { +.popup-container > .prompt-container > div > div > div > .menubutton { position: relative; margin-left: 6px; margin-right: 6px; @@ -2060,6 +2085,6 @@ div.popup-container.editor,div.popup-container.editor div{ padding-bottom: 2px; } -#window:not(.nopointer) .popup-container>.prompt-container>div>div>div>.menubutton { +#window:not(.nopointer) .popup-container > .prompt-container > div > div > div > .menubutton { cursor: pointer; -} \ No newline at end of file +} diff --git a/layout/default/phone.css b/layout/default/phone.css index 7bac67bcb..b5d668435 100644 --- a/layout/default/phone.css +++ b/layout/default/phone.css @@ -1,118 +1,120 @@ -#arena{ - height: calc(97% + 30px); - top:3% -} -#arena.mobile>#control{ - top:calc(100% - 205px); -} -#arena.chess.mobile>#control{ - top:calc(100% - 175px); -} -#control>div,#system>div>div{ - height: 40px; - font-family: 'xinwei'; - font-size: 30px; - line-height: 34px; -} -#historybar{ - top:14px; - height: calc(100% - 150px); -} -#window.oblongcard #historybar{ - height: calc(100% - 170px); -} -#time{ - visibility: hidden; -} -#system{ - z-index: 31 !important; -} -#window>.dialog.popped{ - z-index: 21 !important; -} -#system>div{ - position: absolute; - height: 60px; -} -#system>div:first-child{ - left:5px; -} -#system>div:last-child{ - right:5px; -} -#system>div>div{ - line-height: 40px; -} -#system{ - z-index: 5; -} -#system>div{ - transition-duration: 0.3s; -} -#system>div:not(.shown){ - transform: translateY(-80px); -} -.statusbar #system>div:not(.shown){ - transform: translateY(-120px); -} -#system>#system1{ - width: 140px; -} -#system>#system2{ - width: calc(100% - 140px); -} -#system>div:not(.shown)>div{ - pointer-events: none; -} -#pausebutton,#autobutton,#restartbutton{ - display: none !important; -} - -.menu-container>.menu.main, -.popup-container>.menu{ - zoom:1.3; -} -.popup-container>.menu{ - max-height: 307px; -} -.popup-container>.menu.visual.withbar{ - max-height: 360px; -} -.menu-container>.menu.main:not(.center){ - top: 12px !important; - left: 10px !important; -} - -#system{ - width: calc(100% - 12px) !important; - left: 0 !important; -} - -#arena.phonetop{ - top:80px !important; -} -.player>.identity{ - transform: scale(1.3); -} -#window>.dialog.popped.hoverdialog{ - transform: scale(1.3); - transform-origin: left top; -} -.player:not([data-position='0']).linked .identity, -#arena.chess .player.linked .identity{ - transform:scale(1.3) rotate(90deg); -} - -/*br.finish_game{ - display: inline !important; -}*/ -div:not(.shown)>div.finish_game{ - opacity: 0 !important; -} -div.finish_game{ - transition: all 0.2s !important; -} - -@media screen and (orientation:portrait) { - -} +#arena { + height: calc(97% + 30px); + top: 3%; +} +#arena.mobile > #control { + top: calc(100% - 205px); +} +#arena.chess.mobile > #control { + top: calc(100% - 175px); +} +#control > div, +#system > div > div { + height: 40px; + font-family: "xinwei"; + font-size: 30px; + line-height: 34px; +} +#historybar { + top: 14px; + height: calc(100% - 150px); +} +#window.oblongcard #historybar { + height: calc(100% - 170px); +} +#time { + visibility: hidden; +} +#system { + z-index: 31 !important; +} +#window > .dialog.popped { + z-index: 21 !important; +} +#system > div { + position: absolute; + height: 60px; +} +#system > div:first-child { + left: 5px; +} +#system > div:last-child { + right: 5px; +} +#system > div > div { + line-height: 40px; +} +#system { + z-index: 5; +} +#system > div { + transition-duration: 0.3s; +} +#system > div:not(.shown) { + transform: translateY(-80px); +} +.statusbar #system > div:not(.shown) { + transform: translateY(-120px); +} +#system > #system1 { + width: 140px; +} +#system > #system2 { + width: calc(100% - 140px); +} +#system > div:not(.shown) > div { + pointer-events: none; +} +#pausebutton, +#autobutton, +#restartbutton { + display: none !important; +} + +.menu-container > .menu.main, +.popup-container > .menu { + zoom: 1.3; +} +.popup-container > .menu { + max-height: 307px; +} +.popup-container > .menu.visual.withbar { + max-height: 360px; +} +.menu-container > .menu.main:not(.center) { + top: 12px !important; + left: 10px !important; +} + +#system { + width: calc(100% - 12px) !important; + left: 0 !important; +} + +#arena.phonetop { + top: 80px !important; +} +.player > .identity { + transform: scale(1.3); +} +#window > .dialog.popped.hoverdialog { + transform: scale(1.3); + transform-origin: left top; +} +.player:not([data-position="0"]).linked .identity, +#arena.chess .player.linked .identity { + transform: scale(1.3) rotate(90deg); +} + +/*br.finish_game{ + display: inline !important; +}*/ +div:not(.shown) > div.finish_game { + opacity: 0 !important; +} +div.finish_game { + transition: all 0.2s !important; +} + +@media screen and (orientation: portrait) { +} diff --git a/layout/long/layout.css b/layout/long/layout.css index 2ff295e5a..631b11d75 100644 --- a/layout/long/layout.css +++ b/layout/long/layout.css @@ -1,257 +1,410 @@ -@import "../mobile/layout.css"; - - -#window.rightbar #system, -#window.leftbar #system{ - width: calc(100% - 62px); -} -#window.leftbar #system{ - left: 50px; -} -#window.rightbar #historybar{ - left: calc(100% - 50px); -} -#window.leftbar #historybar{ - left: 0; -} -#historybar{ - left: calc(100% - 50px); - border-radius: 0; - top: 0; - height: calc(100% - 121px); - z-index: 1; -} -#window.oblongcard #historybar{ - height: calc(100% - 141px); -} - -#arena:not(.fewplayer)>.player:not(.minskin):not(*[data-position='0'])>.name.name2{ - left: auto; - right: 13px; -} - -#arena:not(.fewplayer)>.player:not(.minskin):not(*[data-position='0']){ - width: 120px !important; - height: 220px !important; -} -#arena:not(.fewplayer)>.player:not(.minskin):not(*[data-position='0'])>.marks{ - left: -15px; -} -#arena:not(.fewplayer)>.player:not(.minskin):not(*[data-position='0'])>.judges{ - right: -27px; -} -#arena:not(.fewplayer)[data-player_height='default']>.player:not(.minskin):not(*[data-position='0']){ - height: 200px !important; -} -#arena:not(.fewplayer)[data-player_height='short']>.player:not(.minskin):not(*[data-position='0']){ - height: 180px !important; -} -#arena:not(.fewplayer)>.player:not(.minskin):not(*[data-position='0'])>.equips{ - transform: scale(0.8); - transform-origin: bottom left; -} -#arena:not(.fewplayer).lslim_player .player .equips{ - left: 5px; -} -#arena:not(.fewplayer)>.player:not(.minskin):not(*[data-position='0'])>.avatar, -#arena:not(.fewplayer)>.player:not(.minskin):not(*[data-position='0'])>.avatar2{ - width: calc(100% - 14px) !important; - height: calc(100% - 14px) !important; - background-position: 50% !important; -} -#arena.uslim_player:not(.fewplayer)>.player:not(.minskin):not(*[data-position='0'])>.avatar, -#arena.uslim_player:not(.fewplayer)>.player:not(.minskin):not(*[data-position='0'])>.avatar2{ - width: calc(100% - 6px) !important; - height: calc(100% - 6px) !important; - background-position: 50% !important; -} -#arena.lslim_player:not(.fewplayer)>.player:not(.minskin):not(*[data-position='0'])>.avatar, -#arena.lslim_player:not(.fewplayer)>.player:not(.minskin):not(*[data-position='0'])>.avatar2{ - width: calc(100% - 10px) !important; - height: calc(100% - 10px) !important; - background-position: 50% !important; -} -#arena:not(.fewplayer)>.player.fullskin2:not(.minskin):not(*[data-position='0'])>.avatar, -#arena:not(.fewplayer)>.player.fullskin2:not(.minskin):not(*[data-position='0'])>.avatar2{ - height: 50% !important; - background-position: 0 0 !important; - border-radius: 8px !important; -} -#arena.uslim_player:not(.fewplayer)>.player.fullskin2:not(.minskin):not(*[data-position='0'])>.avatar, -#arena.uslim_player:not(.fewplayer)>.player.fullskin2:not(.minskin):not(*[data-position='0'])>.avatar2{ - height: calc(50% + 4px) !important; -} -#arena.lslim_player:not(.fewplayer)>.player.fullskin2:not(.minskin):not(*[data-position='0'])>.avatar, -#arena.lslim_player:not(.fewplayer)>.player.fullskin2:not(.minskin):not(*[data-position='0'])>.avatar2{ - height: calc(50% + 2px) !important; -} -#window[data-radius_size='reduce'] #arena:not(.fewplayer)>.player.fullskin2:not(.minskin):not(*[data-position='0'])>.avatar, -#window[data-radius_size='reduce'] #arena:not(.fewplayer)>.player.fullskin2:not(.minskin):not(*[data-position='0'])>.avatar2{ - border-radius: 4px !important; -} -#window[data-radius_size='off'] #arena:not(.fewplayer)>.player.fullskin2:not(.minskin):not(*[data-position='0'])>.avatar, -#window[data-radius_size='off'] #arena:not(.fewplayer)>.player.fullskin2:not(.minskin):not(*[data-position='0'])>.avatar2{ - border-radius: 0px !important; -} -#window[data-radius_size='increase'] #arena:not(.fewplayer)>.player.fullskin2:not(.minskin):not(*[data-position='0'])>.avatar, -#window[data-radius_size='increase'] #arena:not(.fewplayer)>.player.fullskin2:not(.minskin):not(*[data-position='0'])>.avatar2{ - border-radius: 16px !important; -} -#arena:not(.fewplayer)>.player.fullskin2:not(.minskin):not(.unseen2):not(*[data-position='0'])>.avatar{ - border-radius: 8px 8px 0 0 !important; - height: calc(50% + 14px) !important; - clip-path: polygon(-10px -10px, 116px -10px, 116px 92px, 106px 92px, 0px 114px, -10px 114px); - -webkit-clip-path: polygon(-10px -10px, 116px -10px, 116px 92px, 106px 92px, 0px 114px, -10px 114px); -} -#arena:not(.fewplayer)[data-player_height='default']>.player.fullskin2:not(.minskin):not(.unseen2):not(*[data-position='0'])>.avatar{ - clip-path: polygon(-10px -10px, 116px -10px, 116px 82px, 106px 82px, 0px 104px, -10px 104px); - -webkit-clip-path: polygon(-10px -10px, 116px -10px, 116px 82px, 106px 82px, 0px 104px, -10px 104px); -} -#arena:not(.fewplayer)[data-player_height='short']>.player.fullskin2:not(.minskin):not(.unseen2):not(*[data-position='0'])>.avatar{ - clip-path: polygon(-10px -10px, 116px -10px, 116px 72px, 106px 72px, 0px 94px, -10px 94px); - -webkit-clip-path: polygon(-10px -10px, 116px -10px, 116px 72px, 106px 72px, 0px 94px, -10px 94px); -} -#arena.uslim_player:not(.fewplayer)>.player.fullskin2:not(.minskin):not(.unseen2):not(*[data-position='0'])>.avatar{ - height: calc(50% + 18px) !important; - clip-path: polygon(-10px -10px, 124px -10px, 124px 96px, 114px 96px, 0px 118px, -10px 118px); - -webkit-clip-path: polygon(-10px -10px, 124px -10px, 124px 96px, 114px 96px, 0px 118px, -10px 118px); -} -#arena.uslim_player:not(.fewplayer)[data-player_height='default']>.player.fullskin2:not(.minskin):not(.unseen2):not(*[data-position='0'])>.avatar{ - clip-path: polygon(-10px -10px, 124px -10px, 124px 86px, 114px 86px, 0px 108px, -10px 108px); - -webkit-clip-path: polygon(-10px -10px, 124px -10px, 124px 86px, 114px 86px, 0px 108px, -10px 108px); -} -#arena.uslim_player:not(.fewplayer)[data-player_height='short']>.player.fullskin2:not(.minskin):not(.unseen2):not(*[data-position='0'])>.avatar{ - clip-path: polygon(-10px -10px, 124px -10px, 124px 76px, 114px 76px, 0px 98px, -10px 98px); - -webkit-clip-path: polygon(-10px -10px, 124px -10px, 124px 76px, 114px 76px, 0px 98px, -10px 98px); -} -#arena.lslim_player:not(.fewplayer)>.player.fullskin2:not(.minskin):not(.unseen2):not(*[data-position='0'])>.avatar{ - height: calc(50% + 18px) !important; - clip-path: polygon(-10px -10px, 120px -10px, 120px 94px, 110px 94px, 0px 116px, -10px 116px); - -webkit-clip-path: polygon(-10px -10px, 120px -10px, 120px 94px, 110px 94px, 0px 116px, -10px 116px); -} -#arena.lslim_player:not(.fewplayer)[data-player_height='default']>.player.fullskin2:not(.minskin):not(.unseen2):not(*[data-position='0'])>.avatar{ - clip-path: polygon(-10px -10px, 120px -10px, 120px 84px, 110px 84px, 0px 106px, -10px 106px); - -webkit-clip-path: polygon(-10px -10px, 120px -10px, 120px 84px, 110px 84px, 0px 106px, -10px 106px); -} -#arena.lslim_player:not(.fewplayer)[data-player_height='short']>.player.fullskin2:not(.minskin):not(.unseen2):not(*[data-position='0'])>.avatar{ - clip-path: polygon(-10px -10px, 120px -10px, 120px 74px, 110px 74px, 0px 96px, -10px 96px); - -webkit-clip-path: polygon(-10px -10px, 120px -10px, 120px 74px, 110px 74px, 0px 96px, -10px 96px); -} -#window[data-radius_size='reduce'] #arena:not(.fewplayer)>.player.fullskin2:not(.minskin):not(.unseen2):not(*[data-position='0'])>.avatar{ - border-radius: 4px 4px 0 0 !important; -} -#window[data-radius_size='off'] #arena:not(.fewplayer)>.player.fullskin2:not(.minskin):not(.unseen2):not(*[data-position='0'])>.avatar{ - border-radius: 0 0 0 0 !important; -} -#window[data-radius_size='increase'] #arena:not(.fewplayer)>.player.fullskin2:not(.minskin):not(.unseen2):not(*[data-position='0'])>.avatar{ - border-radius: 16px 16px 0 0 !important; -} -#arena:not(.fewplayer)>.player.fullskin2:not(.minskin):not(.unseen):not(*[data-position='0'])>.avatar2{ - border-radius: 0 0 8px 8px !important; - top: calc(50% - 21px) !important; - height: calc(50% + 14px) !important; - background-position: 0 10px !important; - clip-path: polygon(-10px 32px, 0 32px, 106px 10px, 116px 10px, 116px 134px, -10px 134px); - -webkit-clip-path: polygon(-10px 32px, 0 32px, 106px 10px, 116px 10px, 116px 134px, -10px 134px); -} -#arena.uslim_player:not(.fewplayer)>.player.fullskin2:not(.minskin):not(.unseen):not(*[data-position='0'])>.avatar2{ - top: calc(50% - 21px) !important; - height: calc(50% + 18px) !important; - clip-path: polygon(-10px 32px, 0 32px, 114px 10px, 124px 10px, 124px 138px, -10px 138px); - -webkit-clip-path: polygon(-10px 32px, 0 32px, 114px 10px, 124px 10px, 124px 138px, -10px 138px); -} -#arena.lslim_player:not(.fewplayer)>.player.fullskin2:not(.minskin):not(.unseen):not(*[data-position='0'])>.avatar2{ - top: calc(50% - 21px) !important; - height: calc(50% + 16px) !important; - clip-path: polygon(-10px 32px, 0 32px, 110px 10px, 120px 10px, 120px 136px, -10px 136px); - -webkit-clip-path: polygon(-10px 32px, 0 32px, 110px 10px, 120px 10px, 120px 136px, -10px 136px); -} -#window[data-radius_size='reduce'] #arena:not(.fewplayer)>.player.fullskin2:not(.minskin):not(.unseen):not(*[data-position='0'])>.avatar2{ - border-radius: 0 0 4px 4px !important; -} -#window[data-radius_size='off'] #arena:not(.fewplayer)>.player.fullskin2:not(.minskin):not(.unseen):not(*[data-position='0'])>.avatar2{ - border-radius: 0 0 0 0 !important; -} -#window[data-radius_size='increase'] #arena:not(.fewplayer)>.player.fullskin2:not(.minskin):not(.unseen):not(*[data-position='0'])>.avatar2{ - border-radius: 0 0 16px 16px !important; -} -#arena:not(.fewplayer)>.player.fullskin2:not(.minskin):not(*[data-position='0'])>.avatar2{ - top: calc(50% - 7px) !important; -} -#arena:not(.fewplayer)>.player:not(.minskin):not(*[data-position='0'])>.identity{ - left: 102px; -} -#arena:not(.fewplayer)>.player:not(.minskin):not(*[data-position='0'])>.hp:not(.actcount){ - left: 93px; -} -/*#arena:not(.fewplayer)>.player:not(.minskin):not(*[data-position='0'])>.hp:not(.actcount).text{ - left: 89px; -}*/ -#arena:not(.fewplayer)>.player.fullskin2 .avatar2{ - z-index: 2; -} -#arena:not(.fewplayer)>.player.unseen:not(.unseen2) .count{ - text-align: left; - border-radius:3px 0 0 3px; -} -#arena:not(.fewplayer)>.player.unseen2 .count{ - border-radius: 3px; - text-align: center; -} - -#arena:not(.fewplayer) .timerbar>div{ - top: 205px; - width: 96px; - left: 12px; -} -#arena:not(.fewplayer)[data-player_height='default'] .timerbar>div{ - top: 185px; -} -#arena:not(.fewplayer)[data-player_height='short'] .timerbar>div{ - top: 165px; -} - -/*--------位置(8人)------*/ -#arena:not(.fewplayer)[data-number='8']>.player[data-position='1']{top:calc(30% - 120px);left:calc(-300% / 94 + 4375% / 47 - 735px + 720px);} -#arena:not(.fewplayer)[data-number='8']>.player[data-position='2']{top:calc(8% - 32px);left:calc(-300% / 94 + 3750% / 47 - 630px + 600px);} -#arena:not(.fewplayer)[data-number='8']>.player[data-position='3']{top:0;left:calc(-300% / 94 + 3125% / 47 - 525px + 480px);} -#arena:not(.fewplayer)[data-number='8']>.player[data-position='4']{top:0;left:calc(-300% / 94 + 2500% / 47 - 420px + 360px);} -#arena:not(.fewplayer)[data-number='8']>.player[data-position='5']{top:0;left:calc(-300% / 94 + 1875% / 47 - 315px + 240px);} -#arena:not(.fewplayer)[data-number='8']>.player[data-position='6']{top:calc(8% - 32px);left:calc(-300% / 94 + 1250% / 47 - 210px + 120px);} -#arena:not(.fewplayer)[data-number='8']>.player[data-position='7']{top:calc(30% - 120px);left:calc(-300% / 94 + 625% / 47 - 105px);} -@media screen and (min-width: 1105px){ - #arena:not(.fewplayer)[data-number='8']>.player[data-position='1']{left:calc(100% - 120px);} - #arena:not(.fewplayer)[data-number='8']>.player[data-position='2']{left:calc(500% / 6 - 100px);} - #arena:not(.fewplayer)[data-number='8']>.player[data-position='3']{left:calc(400% / 6 - 80px);} - #arena:not(.fewplayer)[data-number='8']>.player[data-position='4']{left:calc(300% / 6 - 60px);} - #arena:not(.fewplayer)[data-number='8']>.player[data-position='5']{left:calc(200% / 6 - 40px);} - #arena:not(.fewplayer)[data-number='8']>.player[data-position='6']{left:calc(100% / 6 - 20px);} - #arena:not(.fewplayer)[data-number='8']>.player[data-position='7']{left:0;} -} -/*--------位置(7人)------*/ -#arena:not(.fewplayer)[data-number='7']>.player[data-position='1']{top:calc(30% - 120px);left:calc(100% - 120px);} -#arena:not(.fewplayer)[data-number='7']>.player[data-position='2']{top:calc(8% - 32px);left:calc(80% - 96px);} -#arena:not(.fewplayer)[data-number='7']>.player[data-position='3']{top:0;left:calc(60% - 72px);} -#arena:not(.fewplayer)[data-number='7']>.player[data-position='4']{top:0;left:calc(40% - 48px);} -#arena:not(.fewplayer)[data-number='7']>.player[data-position='5']{top:calc(8% - 32px);left:calc(20% - 24px);} -#arena:not(.fewplayer)[data-number='7']>.player[data-position='6']{top:calc(30% - 120px);left:0;} -/*--------位置(6人)------*/ -#arena:not(.fewplayer)[data-number='6']>.player[data-position='1']{top:calc(30% - 120px);left:calc(100% - 120px);} -#arena:not(.fewplayer)[data-number='6']>.player[data-position='2']{top:0px;left:calc(75% - 90px);} -#arena:not(.fewplayer)[data-number='6']>.player[data-position='3']{top:0;left:calc(50% - 60px);} -#arena:not(.fewplayer)[data-number='6']>.player[data-position='4']{top:0px;left:calc(25% - 30px);} -#arena:not(.fewplayer)[data-number='6']>.player[data-position='5']{top:calc(30% - 120px);left:0;} -/*--------位置(5人)------*/ -#arena:not(.fewplayer)[data-number='5']>.player[data-position='1']{top:calc(30% - 120px);left:calc(100% - 120px);} -#arena:not(.fewplayer)[data-number='5']>.player[data-position='2']{top:0;left:calc(200% / 3 - 80px);} -#arena:not(.fewplayer)[data-number='5']>.player[data-position='3']{top:0;left:calc(100% / 3 - 40px);} -#arena:not(.fewplayer)[data-number='5']>.player[data-position='4']{top:calc(30% - 120px);left:0;} -/*--------位置(4人)------*/ -#arena:not(.fewplayer)[data-number='4']>.player[data-position='1']{top:calc(30% - 120px);left:calc(100% - 120px);} -#arena:not(.fewplayer)[data-number='4']>.player[data-position='2']{top:0;left:calc(50% - 60px);} -#arena:not(.fewplayer)[data-number='4']>.player[data-position='3']{top:calc(30% - 120px);left:0;} -/*--------位置(3人)------*/ -#arena:not(.fewplayer)[data-number='3']>.player[data-position='1']{top:calc(60% / 3 - 88px);left:calc(75% + 80px);} -#arena:not(.fewplayer)[data-number='3']>.player[data-position='2']{top:calc(60% / 3 - 88px);left:calc(25% - 200px);} -/*--------位置(2人)------*/ -#arena:not(.fewplayer)[data-number='2']>.player[data-position='1']{top:0;left:calc(50% - 60px);} +@import "../mobile/layout.css"; + +#window.rightbar #system, +#window.leftbar #system { + width: calc(100% - 62px); +} +#window.leftbar #system { + left: 50px; +} +#window.rightbar #historybar { + left: calc(100% - 50px); +} +#window.leftbar #historybar { + left: 0; +} +#historybar { + left: calc(100% - 50px); + border-radius: 0; + top: 0; + height: calc(100% - 121px); + z-index: 1; +} +#window.oblongcard #historybar { + height: calc(100% - 141px); +} + +#arena:not(.fewplayer) > .player:not(.minskin):not(*[data-position="0"]) > .name.name2 { + left: auto; + right: 13px; +} + +#arena:not(.fewplayer) > .player:not(.minskin):not(*[data-position="0"]) { + width: 120px !important; + height: 220px !important; +} +#arena:not(.fewplayer) > .player:not(.minskin):not(*[data-position="0"]) > .marks { + left: -15px; +} +#arena:not(.fewplayer) > .player:not(.minskin):not(*[data-position="0"]) > .judges { + right: -27px; +} +#arena:not(.fewplayer)[data-player_height="default"] > .player:not(.minskin):not(*[data-position="0"]) { + height: 200px !important; +} +#arena:not(.fewplayer)[data-player_height="short"] > .player:not(.minskin):not(*[data-position="0"]) { + height: 180px !important; +} +#arena:not(.fewplayer) > .player:not(.minskin):not(*[data-position="0"]) > .equips { + transform: scale(0.8); + transform-origin: bottom left; +} +#arena:not(.fewplayer).lslim_player .player .equips { + left: 5px; +} +#arena:not(.fewplayer) > .player:not(.minskin):not(*[data-position="0"]) > .avatar, +#arena:not(.fewplayer) > .player:not(.minskin):not(*[data-position="0"]) > .avatar2 { + width: calc(100% - 14px) !important; + height: calc(100% - 14px) !important; + background-position: 50% !important; +} +#arena.uslim_player:not(.fewplayer) > .player:not(.minskin):not(*[data-position="0"]) > .avatar, +#arena.uslim_player:not(.fewplayer) > .player:not(.minskin):not(*[data-position="0"]) > .avatar2 { + width: calc(100% - 6px) !important; + height: calc(100% - 6px) !important; + background-position: 50% !important; +} +#arena.lslim_player:not(.fewplayer) > .player:not(.minskin):not(*[data-position="0"]) > .avatar, +#arena.lslim_player:not(.fewplayer) > .player:not(.minskin):not(*[data-position="0"]) > .avatar2 { + width: calc(100% - 10px) !important; + height: calc(100% - 10px) !important; + background-position: 50% !important; +} +#arena:not(.fewplayer) > .player.fullskin2:not(.minskin):not(*[data-position="0"]) > .avatar, +#arena:not(.fewplayer) > .player.fullskin2:not(.minskin):not(*[data-position="0"]) > .avatar2 { + height: 50% !important; + background-position: 0 0 !important; + border-radius: 8px !important; +} +#arena.uslim_player:not(.fewplayer) > .player.fullskin2:not(.minskin):not(*[data-position="0"]) > .avatar, +#arena.uslim_player:not(.fewplayer) > .player.fullskin2:not(.minskin):not(*[data-position="0"]) > .avatar2 { + height: calc(50% + 4px) !important; +} +#arena.lslim_player:not(.fewplayer) > .player.fullskin2:not(.minskin):not(*[data-position="0"]) > .avatar, +#arena.lslim_player:not(.fewplayer) > .player.fullskin2:not(.minskin):not(*[data-position="0"]) > .avatar2 { + height: calc(50% + 2px) !important; +} +#window[data-radius_size="reduce"] + #arena:not(.fewplayer) + > .player.fullskin2:not(.minskin):not(*[data-position="0"]) + > .avatar, +#window[data-radius_size="reduce"] + #arena:not(.fewplayer) + > .player.fullskin2:not(.minskin):not(*[data-position="0"]) + > .avatar2 { + border-radius: 4px !important; +} +#window[data-radius_size="off"] + #arena:not(.fewplayer) + > .player.fullskin2:not(.minskin):not(*[data-position="0"]) + > .avatar, +#window[data-radius_size="off"] + #arena:not(.fewplayer) + > .player.fullskin2:not(.minskin):not(*[data-position="0"]) + > .avatar2 { + border-radius: 0px !important; +} +#window[data-radius_size="increase"] + #arena:not(.fewplayer) + > .player.fullskin2:not(.minskin):not(*[data-position="0"]) + > .avatar, +#window[data-radius_size="increase"] + #arena:not(.fewplayer) + > .player.fullskin2:not(.minskin):not(*[data-position="0"]) + > .avatar2 { + border-radius: 16px !important; +} +#arena:not(.fewplayer) > .player.fullskin2:not(.minskin):not(.unseen2):not(*[data-position="0"]) > .avatar { + border-radius: 8px 8px 0 0 !important; + height: calc(50% + 14px) !important; + clip-path: polygon(-10px -10px, 116px -10px, 116px 92px, 106px 92px, 0px 114px, -10px 114px); + -webkit-clip-path: polygon(-10px -10px, 116px -10px, 116px 92px, 106px 92px, 0px 114px, -10px 114px); +} +#arena:not(.fewplayer)[data-player_height="default"] + > .player.fullskin2:not(.minskin):not(.unseen2):not(*[data-position="0"]) + > .avatar { + clip-path: polygon(-10px -10px, 116px -10px, 116px 82px, 106px 82px, 0px 104px, -10px 104px); + -webkit-clip-path: polygon(-10px -10px, 116px -10px, 116px 82px, 106px 82px, 0px 104px, -10px 104px); +} +#arena:not(.fewplayer)[data-player_height="short"] + > .player.fullskin2:not(.minskin):not(.unseen2):not(*[data-position="0"]) + > .avatar { + clip-path: polygon(-10px -10px, 116px -10px, 116px 72px, 106px 72px, 0px 94px, -10px 94px); + -webkit-clip-path: polygon(-10px -10px, 116px -10px, 116px 72px, 106px 72px, 0px 94px, -10px 94px); +} +#arena.uslim_player:not(.fewplayer) + > .player.fullskin2:not(.minskin):not(.unseen2):not(*[data-position="0"]) + > .avatar { + height: calc(50% + 18px) !important; + clip-path: polygon(-10px -10px, 124px -10px, 124px 96px, 114px 96px, 0px 118px, -10px 118px); + -webkit-clip-path: polygon(-10px -10px, 124px -10px, 124px 96px, 114px 96px, 0px 118px, -10px 118px); +} +#arena.uslim_player:not(.fewplayer)[data-player_height="default"] + > .player.fullskin2:not(.minskin):not(.unseen2):not(*[data-position="0"]) + > .avatar { + clip-path: polygon(-10px -10px, 124px -10px, 124px 86px, 114px 86px, 0px 108px, -10px 108px); + -webkit-clip-path: polygon(-10px -10px, 124px -10px, 124px 86px, 114px 86px, 0px 108px, -10px 108px); +} +#arena.uslim_player:not(.fewplayer)[data-player_height="short"] + > .player.fullskin2:not(.minskin):not(.unseen2):not(*[data-position="0"]) + > .avatar { + clip-path: polygon(-10px -10px, 124px -10px, 124px 76px, 114px 76px, 0px 98px, -10px 98px); + -webkit-clip-path: polygon(-10px -10px, 124px -10px, 124px 76px, 114px 76px, 0px 98px, -10px 98px); +} +#arena.lslim_player:not(.fewplayer) + > .player.fullskin2:not(.minskin):not(.unseen2):not(*[data-position="0"]) + > .avatar { + height: calc(50% + 18px) !important; + clip-path: polygon(-10px -10px, 120px -10px, 120px 94px, 110px 94px, 0px 116px, -10px 116px); + -webkit-clip-path: polygon(-10px -10px, 120px -10px, 120px 94px, 110px 94px, 0px 116px, -10px 116px); +} +#arena.lslim_player:not(.fewplayer)[data-player_height="default"] + > .player.fullskin2:not(.minskin):not(.unseen2):not(*[data-position="0"]) + > .avatar { + clip-path: polygon(-10px -10px, 120px -10px, 120px 84px, 110px 84px, 0px 106px, -10px 106px); + -webkit-clip-path: polygon(-10px -10px, 120px -10px, 120px 84px, 110px 84px, 0px 106px, -10px 106px); +} +#arena.lslim_player:not(.fewplayer)[data-player_height="short"] + > .player.fullskin2:not(.minskin):not(.unseen2):not(*[data-position="0"]) + > .avatar { + clip-path: polygon(-10px -10px, 120px -10px, 120px 74px, 110px 74px, 0px 96px, -10px 96px); + -webkit-clip-path: polygon(-10px -10px, 120px -10px, 120px 74px, 110px 74px, 0px 96px, -10px 96px); +} +#window[data-radius_size="reduce"] + #arena:not(.fewplayer) + > .player.fullskin2:not(.minskin):not(.unseen2):not(*[data-position="0"]) + > .avatar { + border-radius: 4px 4px 0 0 !important; +} +#window[data-radius_size="off"] + #arena:not(.fewplayer) + > .player.fullskin2:not(.minskin):not(.unseen2):not(*[data-position="0"]) + > .avatar { + border-radius: 0 0 0 0 !important; +} +#window[data-radius_size="increase"] + #arena:not(.fewplayer) + > .player.fullskin2:not(.minskin):not(.unseen2):not(*[data-position="0"]) + > .avatar { + border-radius: 16px 16px 0 0 !important; +} +#arena:not(.fewplayer) > .player.fullskin2:not(.minskin):not(.unseen):not(*[data-position="0"]) > .avatar2 { + border-radius: 0 0 8px 8px !important; + top: calc(50% - 21px) !important; + height: calc(50% + 14px) !important; + background-position: 0 10px !important; + clip-path: polygon(-10px 32px, 0 32px, 106px 10px, 116px 10px, 116px 134px, -10px 134px); + -webkit-clip-path: polygon(-10px 32px, 0 32px, 106px 10px, 116px 10px, 116px 134px, -10px 134px); +} +#arena.uslim_player:not(.fewplayer) + > .player.fullskin2:not(.minskin):not(.unseen):not(*[data-position="0"]) + > .avatar2 { + top: calc(50% - 21px) !important; + height: calc(50% + 18px) !important; + clip-path: polygon(-10px 32px, 0 32px, 114px 10px, 124px 10px, 124px 138px, -10px 138px); + -webkit-clip-path: polygon(-10px 32px, 0 32px, 114px 10px, 124px 10px, 124px 138px, -10px 138px); +} +#arena.lslim_player:not(.fewplayer) + > .player.fullskin2:not(.minskin):not(.unseen):not(*[data-position="0"]) + > .avatar2 { + top: calc(50% - 21px) !important; + height: calc(50% + 16px) !important; + clip-path: polygon(-10px 32px, 0 32px, 110px 10px, 120px 10px, 120px 136px, -10px 136px); + -webkit-clip-path: polygon(-10px 32px, 0 32px, 110px 10px, 120px 10px, 120px 136px, -10px 136px); +} +#window[data-radius_size="reduce"] + #arena:not(.fewplayer) + > .player.fullskin2:not(.minskin):not(.unseen):not(*[data-position="0"]) + > .avatar2 { + border-radius: 0 0 4px 4px !important; +} +#window[data-radius_size="off"] + #arena:not(.fewplayer) + > .player.fullskin2:not(.minskin):not(.unseen):not(*[data-position="0"]) + > .avatar2 { + border-radius: 0 0 0 0 !important; +} +#window[data-radius_size="increase"] + #arena:not(.fewplayer) + > .player.fullskin2:not(.minskin):not(.unseen):not(*[data-position="0"]) + > .avatar2 { + border-radius: 0 0 16px 16px !important; +} +#arena:not(.fewplayer) > .player.fullskin2:not(.minskin):not(*[data-position="0"]) > .avatar2 { + top: calc(50% - 7px) !important; +} +#arena:not(.fewplayer) > .player:not(.minskin):not(*[data-position="0"]) > .identity { + left: 102px; +} +#arena:not(.fewplayer) > .player:not(.minskin):not(*[data-position="0"]) > .hp:not(.actcount) { + left: 93px; +} +/*#arena:not(.fewplayer)>.player:not(.minskin):not(*[data-position='0'])>.hp:not(.actcount).text{ + left: 89px; +}*/ +#arena:not(.fewplayer) > .player.fullskin2 .avatar2 { + z-index: 2; +} +#arena:not(.fewplayer) > .player.unseen:not(.unseen2) .count { + text-align: left; + border-radius: 3px 0 0 3px; +} +#arena:not(.fewplayer) > .player.unseen2 .count { + border-radius: 3px; + text-align: center; +} + +#arena:not(.fewplayer) .timerbar > div { + top: 205px; + width: 96px; + left: 12px; +} +#arena:not(.fewplayer)[data-player_height="default"] .timerbar > div { + top: 185px; +} +#arena:not(.fewplayer)[data-player_height="short"] .timerbar > div { + top: 165px; +} + +/*--------位置(8人)------*/ +#arena:not(.fewplayer)[data-number="8"] > .player[data-position="1"] { + top: calc(30% - 120px); + left: calc(-300% / 94 + 4375% / 47 - 735px + 720px); +} +#arena:not(.fewplayer)[data-number="8"] > .player[data-position="2"] { + top: calc(8% - 32px); + left: calc(-300% / 94 + 3750% / 47 - 630px + 600px); +} +#arena:not(.fewplayer)[data-number="8"] > .player[data-position="3"] { + top: 0; + left: calc(-300% / 94 + 3125% / 47 - 525px + 480px); +} +#arena:not(.fewplayer)[data-number="8"] > .player[data-position="4"] { + top: 0; + left: calc(-300% / 94 + 2500% / 47 - 420px + 360px); +} +#arena:not(.fewplayer)[data-number="8"] > .player[data-position="5"] { + top: 0; + left: calc(-300% / 94 + 1875% / 47 - 315px + 240px); +} +#arena:not(.fewplayer)[data-number="8"] > .player[data-position="6"] { + top: calc(8% - 32px); + left: calc(-300% / 94 + 1250% / 47 - 210px + 120px); +} +#arena:not(.fewplayer)[data-number="8"] > .player[data-position="7"] { + top: calc(30% - 120px); + left: calc(-300% / 94 + 625% / 47 - 105px); +} +@media screen and (min-width: 1105px) { + #arena:not(.fewplayer)[data-number="8"] > .player[data-position="1"] { + left: calc(100% - 120px); + } + #arena:not(.fewplayer)[data-number="8"] > .player[data-position="2"] { + left: calc(500% / 6 - 100px); + } + #arena:not(.fewplayer)[data-number="8"] > .player[data-position="3"] { + left: calc(400% / 6 - 80px); + } + #arena:not(.fewplayer)[data-number="8"] > .player[data-position="4"] { + left: calc(300% / 6 - 60px); + } + #arena:not(.fewplayer)[data-number="8"] > .player[data-position="5"] { + left: calc(200% / 6 - 40px); + } + #arena:not(.fewplayer)[data-number="8"] > .player[data-position="6"] { + left: calc(100% / 6 - 20px); + } + #arena:not(.fewplayer)[data-number="8"] > .player[data-position="7"] { + left: 0; + } +} +/*--------位置(7人)------*/ +#arena:not(.fewplayer)[data-number="7"] > .player[data-position="1"] { + top: calc(30% - 120px); + left: calc(100% - 120px); +} +#arena:not(.fewplayer)[data-number="7"] > .player[data-position="2"] { + top: calc(8% - 32px); + left: calc(80% - 96px); +} +#arena:not(.fewplayer)[data-number="7"] > .player[data-position="3"] { + top: 0; + left: calc(60% - 72px); +} +#arena:not(.fewplayer)[data-number="7"] > .player[data-position="4"] { + top: 0; + left: calc(40% - 48px); +} +#arena:not(.fewplayer)[data-number="7"] > .player[data-position="5"] { + top: calc(8% - 32px); + left: calc(20% - 24px); +} +#arena:not(.fewplayer)[data-number="7"] > .player[data-position="6"] { + top: calc(30% - 120px); + left: 0; +} +/*--------位置(6人)------*/ +#arena:not(.fewplayer)[data-number="6"] > .player[data-position="1"] { + top: calc(30% - 120px); + left: calc(100% - 120px); +} +#arena:not(.fewplayer)[data-number="6"] > .player[data-position="2"] { + top: 0px; + left: calc(75% - 90px); +} +#arena:not(.fewplayer)[data-number="6"] > .player[data-position="3"] { + top: 0; + left: calc(50% - 60px); +} +#arena:not(.fewplayer)[data-number="6"] > .player[data-position="4"] { + top: 0px; + left: calc(25% - 30px); +} +#arena:not(.fewplayer)[data-number="6"] > .player[data-position="5"] { + top: calc(30% - 120px); + left: 0; +} +/*--------位置(5人)------*/ +#arena:not(.fewplayer)[data-number="5"] > .player[data-position="1"] { + top: calc(30% - 120px); + left: calc(100% - 120px); +} +#arena:not(.fewplayer)[data-number="5"] > .player[data-position="2"] { + top: 0; + left: calc(200% / 3 - 80px); +} +#arena:not(.fewplayer)[data-number="5"] > .player[data-position="3"] { + top: 0; + left: calc(100% / 3 - 40px); +} +#arena:not(.fewplayer)[data-number="5"] > .player[data-position="4"] { + top: calc(30% - 120px); + left: 0; +} +/*--------位置(4人)------*/ +#arena:not(.fewplayer)[data-number="4"] > .player[data-position="1"] { + top: calc(30% - 120px); + left: calc(100% - 120px); +} +#arena:not(.fewplayer)[data-number="4"] > .player[data-position="2"] { + top: 0; + left: calc(50% - 60px); +} +#arena:not(.fewplayer)[data-number="4"] > .player[data-position="3"] { + top: calc(30% - 120px); + left: 0; +} +/*--------位置(3人)------*/ +#arena:not(.fewplayer)[data-number="3"] > .player[data-position="1"] { + top: calc(60% / 3 - 88px); + left: calc(75% + 80px); +} +#arena:not(.fewplayer)[data-number="3"] > .player[data-position="2"] { + top: calc(60% / 3 - 88px); + left: calc(25% - 200px); +} +/*--------位置(2人)------*/ +#arena:not(.fewplayer)[data-number="2"] > .player[data-position="1"] { + top: 0; + left: calc(50% - 60px); +} diff --git a/layout/long2/layout.css b/layout/long2/layout.css index 28e905883..ed83774af 100644 --- a/layout/long2/layout.css +++ b/layout/long2/layout.css @@ -1,501 +1,630 @@ -@import "../newlayout/layout.css"; -#arena{ - height: calc(95% + 20px); -} -#control{ - width: calc(5000% / 47 - 240px); - left:calc(-150% / 47 + 120px); - bottom:150px; - height: 40px; -} -#arena.phone #control{ - bottom:160px; -} -#arena.ipad #control{ - bottom:155px; -} -#arena:not(.chess)>#me, -#arena:not(.chess)>#mebg, -#arena:not(.chess)>#autonode{ - bottom:30px; - width: calc(5000% / 47); - left:calc(-150% / 47); - top:auto; - border-radius:0 !important; - height:120px; -} -#arena.oblongcard:not(.chess)>#me, -#arena.oblongcard:not(.chess)>#mebg, -#arena.oblongcard:not(.chess)>#autonode{ - height: 140px; -} -#arena.oblongcard:not(.chess)>.card, -#arena.oblongcard:not(.chess) .handcards>.card{ - height: 120px; -} -#arena.oblongcard:not(.chess)>.card>.image, -#arena.oblongcard:not(.chess) .handcards>.card>.image{ - height: 110px; - top: 8px; - background-position-x: -3px; -} -#arena.oblongcard:not(.chess) #handcards1{ - height: 100%; - top: 2px; -} -#arena.oblongcard:not(.chess):not(.choose-character) #control{ - bottom:165px; -} -#arena.phone.oblongcard:not(.chess):not(.choose-character) #control{ - bottom:180px; -} - -#arena:not(.chess)>#autonode{ - width: calc(5000% / 47 - 240px); - left:calc(-150% / 47 + 120px); -} -#arena:not(.mobile).single-handcard #handcards1{ - width: calc(100% - 120px); -} -#window.rightbar #system, -#window.leftbar #system{ - width: calc(100% - 62px); -} -#window.leftbar #system{ - left: 50px; -} -#window.rightbar #historybar{ - left: calc(100% - 50px); - border-radius: 0; - top: 0; - height: 100%; -} -#window.leftbar #historybar{ - left: 0; - border-radius: 0; - top: 0; - height: 100%; -} - -#window.single-handcard #historybar{ - height: calc(100% - 121px); -} -#window.oblongcard.single-handcard #historybar{ - height: calc(100% - 141px); -} - -#window.leftbar #arena:not(.chess)>#me, -#window.leftbar #arena:not(.chess)>#mebg, -#window.leftbar #arena:not(.chess)>#autonode{ - width: calc(5000% / 47 + 2500px / 47); - left:calc(-150% / 47 - 50px - 75px / 47); -} -#window.leftbar #arena:not(.chess)>#autonode{ - width: calc(5000% / 47 + 2500px / 47 - 240px); - left:calc(-150% / 47 - 50px - 75px / 47 + 120px); -} -#window.rightbar #arena:not(.chess)>#me, -#window.rightbar #arena:not(.chess)>#mebg, -#window.rightbar #arena:not(.chess)>#autonode{ - width: calc(5000% / 47 + 2500px / 47); - left:calc(-150% / 47 - 75px / 47); -} -#window.rightbar #arena:not(.chess)>#autonode{ - width: calc(5000% / 47 + 2500px / 47 - 240px); - left:calc(-150% / 47 - 75px / 47 + 120px); -} -#arena:not(.chess) #handcards1{ - height:120px; - padding:0; - top:calc(100% - 120px); -} -#arena:not(.chess) #handcards1.scrollh{ - top: calc(100% - 180px); - height: 180px; -} -#arena:not(.chess).oblongcard #handcards1.scrollh{ - top: calc(100% - 200px); - height: 200px; -} -#arena:not(.chess) #handcards1.scrollh>div{ - height: 120px; - top: 60px; -} -#arena:not(.chess).oblongcard #handcards1.scrollh>div{ - top: 62px; -} -#arena:not(.chess):not(.single-handcard) #handcards1{ - width:calc(100% - 240px); - left:calc(150% / 47 - 300% / 94 + 625% / 47 - 105px + 120px); -} -#arena:not(.single-handcard):not(.chess)>#me, -#arena:not(.single-handcard):not(.chess)>#mebg, -#arena:not(.single-handcard):not(.chess)>#autonode{ - left: 0 !important; - bottom: 38px !important; - width: calc(9700% / 94) !important; -} -#arena:not(.single-handcard):not(.chess)>#mebg{ - visibility: hidden; -} -#arena:not(.single-handcard):not(.chess)>#me #handcards1{ - left: 120px !important; - width: calc(100% - 120px) !important; -} -#arena:not(.single-handcard):not(.chess)>#me #handcards1>.handcards{ - left: 0 !important; -} -#autonode{ - display: table !important; -} -@media screen and (max-width: 1105px){ - #arena[data-number='8']:not(.single-handcard):not(.chess)>#me, - #arena[data-number='8']:not(.single-handcard):not(.chess)>#mebg, - #arena[data-number='8']:not(.single-handcard):not(.chess)>#autonode{ - left: calc(-300% / 94 + 625% / 47 - 105px) !important; - width: calc(9700% / 94 + 300% / 94 - 625% / 47 + 105px) !important; - } -} -#handcards2{ - display:none; -} -.dialog{ - height:calc(100% - 370px); - bottom:170px; -} -#arena.choose-character>.dialog .placeholder+.placeholder{ - display: none; -} -#arena.choose-character>.dialog .placeholder{ - margin-bottom: 4px; - height: 0px; -} -#arena.choose-character>.dialog.noupdate .placeholder{ - margin-bottom: 0; - height: 0; -} -#arena.choose-character>.dialog{ - height:calc(100% - 280px); - bottom:80px; -} -#arena.choose-character>.dialog.scroll3{ - height:calc(100% - 240px); -} -#arena.phone.choose-character>.dialog{ - bottom:93px; -} -#arena.ipad.choose-character>.dialog{ - bottom:96px; -} -#arena.choose-to-move>#control, -#arena.discard-player-card>#control, -#arena.gain-player-card>#control, -#arena.choose-player-card>#control, -#arena.choose-character>#control{ - bottom: 30px; - transition: all 0s; -} -#arena.phone.choose-to-move>#control, -#arena.phone.discard-player-card>#control, -#arena.phone.gain-player-card>#control, -#arena.phone.choose-player-card>#control, -#arena.phone.choose-character>#control{ - bottom: 43px; -} -#arena.ipad.choose-to-move>#control, -#arena.ipad.discard-player-card>#control, -#arena.ipad.gain-player-card>#control, -#arena.ipad.choose-player-card>#control, -#arena.ipad.choose-character>#control{ - bottom: 45px; -} -.dialog.fullheight { - height: calc(100% - 123px) !important; - top: 40px !important; -} - -#me>.fakeme.avatar{ - width:120px; - height:100%; - border-radius:0px; - top:0; - left:0; - background-size:cover; - clip-path: polygon(-10px 0, 130px 0, 130px 130px, -10px 130px); - -webkit-clip-path: polygon(-10px 0, 130px 0, 130px 130px, -10px 130px); -} -#window[data-radius_size='increase'] #me>.fakeme.avatar, -#window[data-radius_size='reduce'] #me>.fakeme.avatar{ - border-radius:0px; -} -#arena>.player[data-position='0']:not(.minskin){ - top: calc(100% - 258px); -} -#arena[data-player_height='default']>.player[data-position='0']:not(.minskin){ - top: calc(100% - 238px); -} -#arena[data-player_height='short']>.player[data-position='0']:not(.minskin){ - top: calc(100% - 218px); -} - - -#arena>.player:not(.minskin)>.marks{ - left: -15px; -} -#arena>.player:not(.minskin)>.judges{ - right: -27px; -} - -#arena.lslim_player .player .equips{ - left: 5px; -} - -#arena>.player:not(.minskin)>.name.name2{ - left: auto !important; - right: 13px; -} - -#arena>.player:not(.minskin){ - width: 120px !important; - height: 220px !important; -} -#arena>.player:not(.minskin)>.damage.dieidentity{ - font-size: 60px; - transform: scale(1); -} -#arena[data-player_height='default']>.player:not(.minskin){ - height: 200px !important; -} -#arena[data-player_height='short']>.player:not(.minskin){ - height: 180px !important; -} -#arena>.player:not(.minskin)>.equips{ - transform: scale(0.8); - transform-origin: bottom left; -} -#arena>.player:not(.minskin)>.avatar, -#arena>.player:not(.minskin)>.avatar2{ - width: calc(100% - 14px) !important; - height: calc(100% - 14px) !important; - background-position: 50% !important; -} -#arena.uslim_player>.player:not(.minskin)>.avatar, -#arena.uslim_player>.player:not(.minskin)>.avatar2{ - width: calc(100% - 6px) !important; - height: calc(100% - 6px) !important; - background-position: 50% !important; -} -#arena.lslim_player>.player:not(.minskin)>.avatar, -#arena.lslim_player>.player:not(.minskin)>.avatar2{ - width: calc(100% - 10px) !important; - height: calc(100% - 10px) !important; - background-position: 50% !important; -} -#arena>.player.fullskin2:not(.minskin)>.avatar, -#arena>.player.fullskin2:not(.minskin)>.avatar2{ - height: 50% !important; - background-position: 0 0 !important; - border-radius: 8px !important; -} -#arena.uslim_player>.player.fullskin2:not(.minskin)>.avatar, -#arena.uslim_player>.player.fullskin2:not(.minskin)>.avatar2{ - height: calc(50% + 4px) !important; -} -#arena.lslim_player>.player.fullskin2:not(.minskin)>.avatar, -#arena.lslim_player>.player.fullskin2:not(.minskin)>.avatar2{ - height: calc(50% + 2px) !important; -} -#window[data-radius_size='reduce'] #arena>.player.fullskin2:not(.minskin)>.avatar, -#window[data-radius_size='reduce'] #arena>.player.fullskin2:not(.minskin)>.avatar2{ - border-radius: 4px !important; -} -#window[data-radius_size='off'] #arena>.player.fullskin2:not(.minskin)>.avatar, -#window[data-radius_size='off'] #arena>.player.fullskin2:not(.minskin)>.avatar2{ - border-radius: 0px !important; -} -#window[data-radius_size='increase'] #arena>.player.fullskin2:not(.minskin)>.avatar, -#window[data-radius_size='increase'] #arena>.player.fullskin2:not(.minskin)>.avatar2{ - border-radius: 16px !important; -} -#arena>.player.fullskin2:not(.minskin):not(.unseen2)>.avatar, -#arena>.player.fullskin2:not(.minskin).unseen2[data-position='0']>.avatar{ - border-radius: 8px 8px 0 0 !important; - height: calc(50% + 14px) !important; - clip-path: polygon(-10px -10px, 116px -10px, 116px 92px, 106px 92px, 0px 114px, -10px 114px); - -webkit-clip-path: polygon(-10px -10px, 116px -10px, 116px 92px, 106px 92px, 0px 114px, -10px 114px); -} -#arena[data-player_height='default']>.player.fullskin2:not(.minskin):not(.unseen2)>.avatar, -#arena[data-player_height='default']>.player.fullskin2:not(.minskin).unseen2[data-position='0']>.avatar{ - clip-path: polygon(-10px -10px, 116px -10px, 116px 82px, 106px 82px, 0px 104px, -10px 104px); - -webkit-clip-path: polygon(-10px -10px, 116px -10px, 116px 82px, 106px 82px, 0px 104px, -10px 104px); -} -#arena[data-player_height='short']>.player.fullskin2:not(.minskin):not(.unseen2)>.avatar, -#arena[data-player_height='short']>.player.fullskin2:not(.minskin).unseen2[data-position='0']>.avatar{ - clip-path: polygon(-10px -10px, 116px -10px, 116px 72px, 106px 72px, 0px 94px, -10px 94px); - -webkit-clip-path: polygon(-10px -10px, 116px -10px, 116px 72px, 106px 72px, 0px 94px, -10px 94px); -} -#arena.uslim_player>.player.fullskin2:not(.minskin):not(.unseen2)>.avatar, -#arena.uslim_player>.player.fullskin2:not(.minskin).unseen2[data-position='0']>.avatar{ - height: calc(50% + 18px) !important; - clip-path: polygon(-10px -10px, 124px -10px, 124px 96px, 114px 96px, 0px 118px, -10px 118px); - -webkit-clip-path: polygon(-10px -10px, 124px -10px, 124px 96px, 114px 96px, 0px 118px, -10px 118px); -} -#arena.uslim_player[data-player_height='default']>.player.fullskin2:not(.minskin):not(.unseen2)>.avatar, -#arena.uslim_player[data-player_height='default']>.player.fullskin2:not(.minskin).unseen2[data-position='0']>.avatar{ - clip-path: polygon(-10px -10px, 124px -10px, 124px 86px, 114px 86px, 0px 108px, -10px 108px); - -webkit-clip-path: polygon(-10px -10px, 124px -10px, 124px 86px, 114px 86px, 0px 108px, -10px 108px); -} -#arena.uslim_player[data-player_height='short']>.player.fullskin2:not(.minskin):not(.unseen2)>.avatar, -#arena.uslim_player[data-player_height='short']>.player.fullskin2:not(.minskin).unseen2[data-position='0']>.avatar{ - clip-path: polygon(-10px -10px, 124px -10px, 124px 76px, 114px 76px, 0px 98px, -10px 98px); - -webkit-clip-path: polygon(-10px -10px, 124px -10px, 124px 76px, 114px 76px, 0px 98px, -10px 98px); -} -#arena.lslim_player>.player.fullskin2:not(.minskin):not(.unseen2)>.avatar, -#arena.lslim_player>.player.fullskin2:not(.minskin).unseen2[data-position='0']>.avatar{ - height: calc(50% + 16px) !important; - clip-path: polygon(-10px -10px, 120px -10px, 120px 94px, 110px 94px, 0px 116px, -10px 116px); - -webkit-clip-path: polygon(-10px -10px, 120px -10px, 120px 94px, 110px 94px, 0px 116px, -10px 116px); -} -#arena.lslim_player[data-player_height='default']>.player.fullskin2:not(.minskin):not(.unseen2)>.avatar, -#arena.lslim_player[data-player_height='default']>.player.fullskin2:not(.minskin).unseen2[data-position='0']>.avatar{ - clip-path: polygon(-10px -10px, 120px -10px, 120px 84px, 110px 84px, 0px 106px, -10px 106px); - -webkit-clip-path: polygon(-10px -10px, 120px -10px, 120px 84px, 110px 84px, 0px 106px, -10px 106px); -} -#arena.lslim_player[data-player_height='short']>.player.fullskin2:not(.minskin):not(.unseen2)>.avatar, -#arena.lslim_player[data-player_height='short']>.player.fullskin2:not(.minskin).unseen2[data-position='0']>.avatar{ - clip-path: polygon(-10px -10px, 120px -10px, 120px 74px, 110px 74px, 0px 96px, -10px 96px); - -webkit-clip-path: polygon(-10px -10px, 120px -10px, 120px 74px, 110px 74px, 0px 96px, -10px 96px); -} -#window[data-radius_size='reduce'] #arena>.player.fullskin2:not(.minskin):not(.unseen2)>.avatar, -#window[data-radius_size='reduce'] #arena>.player.fullskin2:not(.minskin).unseen2[data-position='0']>.avatar{ - border-radius: 4px 4px 0 0 !important; -} -#window[data-radius_size='off'] #arena>.player.fullskin2:not(.minskin):not(.unseen2)>.avatar, -#window[data-radius_size='off'] #arena>.player.fullskin2:not(.minskin).unseen2[data-position='0']>.avatar{ - border-radius: 0 0 0 0 !important; -} -#window[data-radius_size='increase'] #arena>.player.fullskin2:not(.minskin):not(.unseen2)>.avatar, -#window[data-radius_size='increase'] #arena>.player.fullskin2:not(.minskin).unseen2[data-position='0']>.avatar{ - border-radius: 16px 16px 0 0 !important; -} -#arena>.player.fullskin2:not(.minskin):not(.unseen)>.avatar2, -#arena>.player.fullskin2:not(.minskin).unseen[data-position='0']>.avatar2{ - border-radius: 0 0 8px 8px !important; - top: calc(50% - 21px) !important; - height: calc(50% + 14px) !important; - background-position: 0 10px !important; - clip-path: polygon(-10px 32px, 0 32px, 106px 10px, 116px 10px, 116px 134px, -10px 134px); - -webkit-clip-path: polygon(-10px 32px, 0 32px, 106px 10px, 116px 10px, 116px 134px, -10px 134px); -} -#arena.uslim_player>.player.fullskin2:not(.minskin):not(.unseen)>.avatar2, -#arena.uslim_player>.player.fullskin2:not(.minskin).unseen[data-position='0']>.avatar2{ - top: calc(50% - 21px) !important; - height: calc(50% + 18px) !important; - clip-path: polygon(-10px 32px, 0 32px, 114px 10px, 124px 10px, 124px 138px, -10px 138px); - -webkit-clip-path: polygon(-10px 32px, 0 32px, 114px 10px, 124px 10px, 124px 138px, -10px 138px); -} -#arena.lslim_player>.player.fullskin2:not(.minskin):not(.unseen)>.avatar2, -#arena.lslim_player>.player.fullskin2:not(.minskin).unseen[data-position='0']>.avatar2{ - top: calc(50% - 21px) !important; - height: calc(50% + 16px) !important; - clip-path: polygon(-10px 32px, 0 32px, 110px 10px, 120px 10px, 120px 136px, -10px 136px); - -webkit-clip-path: polygon(-10px 32px, 0 32px, 110px 10px, 120px 10px, 120px 136px, -10px 136px); -} -#window[data-radius_size='reduce'] #arena>.player.fullskin2:not(.minskin):not(.unseen)>.avatar2, -#window[data-radius_size='reduce'] #arena>.player.fullskin2:not(.minskin).unseen[data-position='0']>.avatar2{ - border-radius: 0 0 4px 4px !important; -} -#window[data-radius_size='off'] #arena>.player.fullskin2:not(.minskin):not(.unseen)>.avatar2, -#window[data-radius_size='off'] #arena>.player.fullskin2:not(.minskin).unseen[data-position='0']>.avatar2{ - border-radius: 0 0 0 0 !important; -} -#window[data-radius_size='increase'] #arena>.player.fullskin2:not(.minskin):not(.unseen)>.avatar2, -#window[data-radius_size='increase'] #arena>.player.fullskin2:not(.minskin).unseen[data-position='0']>.avatar2{ - border-radius: 0 0 16px 16px !important; -} -#arena>.player.fullskin2:not(.minskin)>.avatar2{ - top: calc(50% - 7px) !important; -} -#arena>.player:not(.minskin)>.identity{ - left: 102px; -} -#arena>.player:not(.minskin)>.hp:not(.actcount){ - left: 93px; -} -/*#arena>.player:not(.minskin)>.hp:not(.actcount).text{ - left: 89px; -}*/ -#arena>.player.fullskin2 .avatar2{ - z-index: 2; -} -#arena>.player.unseen:not(.unseen2) .count{ - text-align: left; - border-radius:3px 0 0 3px; -} -#arena>.player.unseen2 .count{ - border-radius: 3px; - text-align: center; -} - -#arena .timerbar>div{ - top: 205px; - width: 96px; - left: 12px; -} -#arena[data-player_height='default'] .timerbar>div{ - top: 185px; -} -#arena[data-player_height='short'] .timerbar>div{ - top: 165px; -} -#arena .player[data-position='0']>.damage.dieidentity{ - opacity: 1 !important; -} - -/*--------位置(8人)------*/ -#arena[data-number='8']>.player[data-position='1']{top:calc(30% - 128px);left:calc(-300% / 94 + 4375% / 47 - 735px + 720px);} -#arena[data-number='8']>.player[data-position='2']{top:calc(8% - 34px);left:calc(-300% / 94 + 3750% / 47 - 630px + 600px);} -#arena[data-number='8']>.player[data-position='3']{top:0;left:calc(-300% / 94 + 3125% / 47 - 525px + 480px);} -#arena[data-number='8']>.player[data-position='4']{top:0;left:calc(-300% / 94 + 2500% / 47 - 420px + 360px);} -#arena[data-number='8']>.player[data-position='5']{top:0;left:calc(-300% / 94 + 1875% / 47 - 315px + 240px);} -#arena[data-number='8']>.player[data-position='6']{top:calc(8% - 34px);left:calc(-300% / 94 + 1250% / 47 - 210px + 120px);} -#arena[data-number='8']>.player[data-position='7']{top:calc(30% - 128px);left:calc(-300% / 94 + 625% / 47 - 105px);} -#arena[data-number='8']>.player[data-position='0']{left:calc(-300% / 94 + 625% / 47 - 105px);} -#arena>.player[data-position='0']{left:0;} -@media screen and (min-width: 1105px){ - #arena[data-number='8']>.player[data-position='1']{left:calc(100% - 120px);} - #arena[data-number='8']>.player[data-position='2']{left:calc(500% / 6 - 100px);} - #arena[data-number='8']>.player[data-position='3']{left:calc(400% / 6 - 80px);} - #arena[data-number='8']>.player[data-position='4']{left:calc(300% / 6 - 60px);} - #arena[data-number='8']>.player[data-position='5']{left:calc(200% / 6 - 40px);} - #arena[data-number='8']>.player[data-position='6']{left:calc(100% / 6 - 20px);} - #arena[data-number='8']>.player[data-position='7']{left:0;} - #arena[data-number='8']>.player[data-position='0']{left:0;} -} -/*--------位置(7人)------*/ -#arena[data-number='7']>.player[data-position='1']{top:calc(30% - 128px);left:calc(100% - 120px);} -#arena[data-number='7']>.player[data-position='2']{top:calc(8% - 34px);left:calc(80% - 96px);} -#arena[data-number='7']>.player[data-position='3']{top:0;left:calc(60% - 72px);} -#arena[data-number='7']>.player[data-position='4']{top:0;left:calc(40% - 48px);} -#arena[data-number='7']>.player[data-position='5']{top:calc(8% - 34px);left:calc(20% - 24px);} -#arena[data-number='7']>.player[data-position='6']{top:calc(30% - 128px);left:0;} -/*--------位置(6人)------*/ -#arena[data-number='6']>.player[data-position='1']{top:calc(30% - 128px);left:calc(100% - 120px);} -#arena[data-number='6']>.player[data-position='2']{top:0px;left:calc(75% - 90px);} -#arena[data-number='6']>.player[data-position='3']{top:0;left:calc(50% - 60px);} -#arena[data-number='6']>.player[data-position='4']{top:0px;left:calc(25% - 30px);} -#arena[data-number='6']>.player[data-position='5']{top:calc(30% - 128px);left:0;} -/*--------位置(5人)------*/ -#arena[data-number='5']>.player[data-position='1']{top:calc(30% - 128px);left:calc(100% - 120px);} -#arena[data-number='5']>.player[data-position='2']{top:0;left:calc(200% / 3 - 80px);} -#arena[data-number='5']>.player[data-position='3']{top:0;left:calc(100% / 3 - 40px);} -#arena[data-number='5']>.player[data-position='4']{top:calc(30% - 128px);left:0;} -/*--------位置(4人)------*/ -#arena[data-number='4']>.player[data-position='1']{top:calc(30% - 128px);left:calc(100% - 120px);} -#arena[data-number='4']>.player[data-position='2']{top:0;left:calc(50% - 60px);} -#arena[data-number='4']>.player[data-position='3']{top:calc(30% - 128px);left:0;} -/*--------位置(3人)------*/ -#arena[data-number='3']>.player[data-position='1']{top:calc(60% / 3 - 88px);left:calc(75% + 80px);} -#arena[data-number='3']>.player[data-position='2']{top:calc(60% / 3 - 88px);left:calc(25% - 200px);} -/*--------位置(2人)------*/ -#arena[data-number='2']>.player[data-position='1']{top:0;left:calc(50% - 60px);} +@import "../newlayout/layout.css"; +#arena { + height: calc(95% + 20px); +} +#control { + width: calc(5000% / 47 - 240px); + left: calc(-150% / 47 + 120px); + bottom: 150px; + height: 40px; +} +#arena.phone #control { + bottom: 160px; +} +#arena.ipad #control { + bottom: 155px; +} +#arena:not(.chess) > #me, +#arena:not(.chess) > #mebg, +#arena:not(.chess) > #autonode { + bottom: 30px; + width: calc(5000% / 47); + left: calc(-150% / 47); + top: auto; + border-radius: 0 !important; + height: 120px; +} +#arena.oblongcard:not(.chess) > #me, +#arena.oblongcard:not(.chess) > #mebg, +#arena.oblongcard:not(.chess) > #autonode { + height: 140px; +} +#arena.oblongcard:not(.chess) > .card, +#arena.oblongcard:not(.chess) .handcards > .card { + height: 120px; +} +#arena.oblongcard:not(.chess) > .card > .image, +#arena.oblongcard:not(.chess) .handcards > .card > .image { + height: 110px; + top: 8px; + background-position-x: -3px; +} +#arena.oblongcard:not(.chess) #handcards1 { + height: 100%; + top: 2px; +} +#arena.oblongcard:not(.chess):not(.choose-character) #control { + bottom: 165px; +} +#arena.phone.oblongcard:not(.chess):not(.choose-character) #control { + bottom: 180px; +} + +#arena:not(.chess) > #autonode { + width: calc(5000% / 47 - 240px); + left: calc(-150% / 47 + 120px); +} +#arena:not(.mobile).single-handcard #handcards1 { + width: calc(100% - 120px); +} +#window.rightbar #system, +#window.leftbar #system { + width: calc(100% - 62px); +} +#window.leftbar #system { + left: 50px; +} +#window.rightbar #historybar { + left: calc(100% - 50px); + border-radius: 0; + top: 0; + height: 100%; +} +#window.leftbar #historybar { + left: 0; + border-radius: 0; + top: 0; + height: 100%; +} + +#window.single-handcard #historybar { + height: calc(100% - 121px); +} +#window.oblongcard.single-handcard #historybar { + height: calc(100% - 141px); +} + +#window.leftbar #arena:not(.chess) > #me, +#window.leftbar #arena:not(.chess) > #mebg, +#window.leftbar #arena:not(.chess) > #autonode { + width: calc(5000% / 47 + 2500px / 47); + left: calc(-150% / 47 - 50px - 75px / 47); +} +#window.leftbar #arena:not(.chess) > #autonode { + width: calc(5000% / 47 + 2500px / 47 - 240px); + left: calc(-150% / 47 - 50px - 75px / 47 + 120px); +} +#window.rightbar #arena:not(.chess) > #me, +#window.rightbar #arena:not(.chess) > #mebg, +#window.rightbar #arena:not(.chess) > #autonode { + width: calc(5000% / 47 + 2500px / 47); + left: calc(-150% / 47 - 75px / 47); +} +#window.rightbar #arena:not(.chess) > #autonode { + width: calc(5000% / 47 + 2500px / 47 - 240px); + left: calc(-150% / 47 - 75px / 47 + 120px); +} +#arena:not(.chess) #handcards1 { + height: 120px; + padding: 0; + top: calc(100% - 120px); +} +#arena:not(.chess) #handcards1.scrollh { + top: calc(100% - 180px); + height: 180px; +} +#arena:not(.chess).oblongcard #handcards1.scrollh { + top: calc(100% - 200px); + height: 200px; +} +#arena:not(.chess) #handcards1.scrollh > div { + height: 120px; + top: 60px; +} +#arena:not(.chess).oblongcard #handcards1.scrollh > div { + top: 62px; +} +#arena:not(.chess):not(.single-handcard) #handcards1 { + width: calc(100% - 240px); + left: calc(150% / 47 - 300% / 94 + 625% / 47 - 105px + 120px); +} +#arena:not(.single-handcard):not(.chess) > #me, +#arena:not(.single-handcard):not(.chess) > #mebg, +#arena:not(.single-handcard):not(.chess) > #autonode { + left: 0 !important; + bottom: 38px !important; + width: calc(9700% / 94) !important; +} +#arena:not(.single-handcard):not(.chess) > #mebg { + visibility: hidden; +} +#arena:not(.single-handcard):not(.chess) > #me #handcards1 { + left: 120px !important; + width: calc(100% - 120px) !important; +} +#arena:not(.single-handcard):not(.chess) > #me #handcards1 > .handcards { + left: 0 !important; +} +#autonode { + display: table !important; +} +@media screen and (max-width: 1105px) { + #arena[data-number="8"]:not(.single-handcard):not(.chess) > #me, + #arena[data-number="8"]:not(.single-handcard):not(.chess) > #mebg, + #arena[data-number="8"]:not(.single-handcard):not(.chess) > #autonode { + left: calc(-300% / 94 + 625% / 47 - 105px) !important; + width: calc(9700% / 94 + 300% / 94 - 625% / 47 + 105px) !important; + } +} +#handcards2 { + display: none; +} +.dialog { + height: calc(100% - 370px); + bottom: 170px; +} +#arena.choose-character > .dialog .placeholder + .placeholder { + display: none; +} +#arena.choose-character > .dialog .placeholder { + margin-bottom: 4px; + height: 0px; +} +#arena.choose-character > .dialog.noupdate .placeholder { + margin-bottom: 0; + height: 0; +} +#arena.choose-character > .dialog { + height: calc(100% - 280px); + bottom: 80px; +} +#arena.choose-character > .dialog.scroll3 { + height: calc(100% - 240px); +} +#arena.phone.choose-character > .dialog { + bottom: 93px; +} +#arena.ipad.choose-character > .dialog { + bottom: 96px; +} +#arena.choose-to-move > #control, +#arena.discard-player-card > #control, +#arena.gain-player-card > #control, +#arena.choose-player-card > #control, +#arena.choose-character > #control { + bottom: 30px; + transition: all 0s; +} +#arena.phone.choose-to-move > #control, +#arena.phone.discard-player-card > #control, +#arena.phone.gain-player-card > #control, +#arena.phone.choose-player-card > #control, +#arena.phone.choose-character > #control { + bottom: 43px; +} +#arena.ipad.choose-to-move > #control, +#arena.ipad.discard-player-card > #control, +#arena.ipad.gain-player-card > #control, +#arena.ipad.choose-player-card > #control, +#arena.ipad.choose-character > #control { + bottom: 45px; +} +.dialog.fullheight { + height: calc(100% - 123px) !important; + top: 40px !important; +} + +#me > .fakeme.avatar { + width: 120px; + height: 100%; + border-radius: 0px; + top: 0; + left: 0; + background-size: cover; + clip-path: polygon(-10px 0, 130px 0, 130px 130px, -10px 130px); + -webkit-clip-path: polygon(-10px 0, 130px 0, 130px 130px, -10px 130px); +} +#window[data-radius_size="increase"] #me > .fakeme.avatar, +#window[data-radius_size="reduce"] #me > .fakeme.avatar { + border-radius: 0px; +} +#arena > .player[data-position="0"]:not(.minskin) { + top: calc(100% - 258px); +} +#arena[data-player_height="default"] > .player[data-position="0"]:not(.minskin) { + top: calc(100% - 238px); +} +#arena[data-player_height="short"] > .player[data-position="0"]:not(.minskin) { + top: calc(100% - 218px); +} + +#arena > .player:not(.minskin) > .marks { + left: -15px; +} +#arena > .player:not(.minskin) > .judges { + right: -27px; +} + +#arena.lslim_player .player .equips { + left: 5px; +} + +#arena > .player:not(.minskin) > .name.name2 { + left: auto !important; + right: 13px; +} + +#arena > .player:not(.minskin) { + width: 120px !important; + height: 220px !important; +} +#arena > .player:not(.minskin) > .damage.dieidentity { + font-size: 60px; + transform: scale(1); +} +#arena[data-player_height="default"] > .player:not(.minskin) { + height: 200px !important; +} +#arena[data-player_height="short"] > .player:not(.minskin) { + height: 180px !important; +} +#arena > .player:not(.minskin) > .equips { + transform: scale(0.8); + transform-origin: bottom left; +} +#arena > .player:not(.minskin) > .avatar, +#arena > .player:not(.minskin) > .avatar2 { + width: calc(100% - 14px) !important; + height: calc(100% - 14px) !important; + background-position: 50% !important; +} +#arena.uslim_player > .player:not(.minskin) > .avatar, +#arena.uslim_player > .player:not(.minskin) > .avatar2 { + width: calc(100% - 6px) !important; + height: calc(100% - 6px) !important; + background-position: 50% !important; +} +#arena.lslim_player > .player:not(.minskin) > .avatar, +#arena.lslim_player > .player:not(.minskin) > .avatar2 { + width: calc(100% - 10px) !important; + height: calc(100% - 10px) !important; + background-position: 50% !important; +} +#arena > .player.fullskin2:not(.minskin) > .avatar, +#arena > .player.fullskin2:not(.minskin) > .avatar2 { + height: 50% !important; + background-position: 0 0 !important; + border-radius: 8px !important; +} +#arena.uslim_player > .player.fullskin2:not(.minskin) > .avatar, +#arena.uslim_player > .player.fullskin2:not(.minskin) > .avatar2 { + height: calc(50% + 4px) !important; +} +#arena.lslim_player > .player.fullskin2:not(.minskin) > .avatar, +#arena.lslim_player > .player.fullskin2:not(.minskin) > .avatar2 { + height: calc(50% + 2px) !important; +} +#window[data-radius_size="reduce"] #arena > .player.fullskin2:not(.minskin) > .avatar, +#window[data-radius_size="reduce"] #arena > .player.fullskin2:not(.minskin) > .avatar2 { + border-radius: 4px !important; +} +#window[data-radius_size="off"] #arena > .player.fullskin2:not(.minskin) > .avatar, +#window[data-radius_size="off"] #arena > .player.fullskin2:not(.minskin) > .avatar2 { + border-radius: 0px !important; +} +#window[data-radius_size="increase"] #arena > .player.fullskin2:not(.minskin) > .avatar, +#window[data-radius_size="increase"] #arena > .player.fullskin2:not(.minskin) > .avatar2 { + border-radius: 16px !important; +} +#arena > .player.fullskin2:not(.minskin):not(.unseen2) > .avatar, +#arena > .player.fullskin2:not(.minskin).unseen2[data-position="0"] > .avatar { + border-radius: 8px 8px 0 0 !important; + height: calc(50% + 14px) !important; + clip-path: polygon(-10px -10px, 116px -10px, 116px 92px, 106px 92px, 0px 114px, -10px 114px); + -webkit-clip-path: polygon(-10px -10px, 116px -10px, 116px 92px, 106px 92px, 0px 114px, -10px 114px); +} +#arena[data-player_height="default"] > .player.fullskin2:not(.minskin):not(.unseen2) > .avatar, +#arena[data-player_height="default"] > .player.fullskin2:not(.minskin).unseen2[data-position="0"] > .avatar { + clip-path: polygon(-10px -10px, 116px -10px, 116px 82px, 106px 82px, 0px 104px, -10px 104px); + -webkit-clip-path: polygon(-10px -10px, 116px -10px, 116px 82px, 106px 82px, 0px 104px, -10px 104px); +} +#arena[data-player_height="short"] > .player.fullskin2:not(.minskin):not(.unseen2) > .avatar, +#arena[data-player_height="short"] > .player.fullskin2:not(.minskin).unseen2[data-position="0"] > .avatar { + clip-path: polygon(-10px -10px, 116px -10px, 116px 72px, 106px 72px, 0px 94px, -10px 94px); + -webkit-clip-path: polygon(-10px -10px, 116px -10px, 116px 72px, 106px 72px, 0px 94px, -10px 94px); +} +#arena.uslim_player > .player.fullskin2:not(.minskin):not(.unseen2) > .avatar, +#arena.uslim_player > .player.fullskin2:not(.minskin).unseen2[data-position="0"] > .avatar { + height: calc(50% + 18px) !important; + clip-path: polygon(-10px -10px, 124px -10px, 124px 96px, 114px 96px, 0px 118px, -10px 118px); + -webkit-clip-path: polygon(-10px -10px, 124px -10px, 124px 96px, 114px 96px, 0px 118px, -10px 118px); +} +#arena.uslim_player[data-player_height="default"] > .player.fullskin2:not(.minskin):not(.unseen2) > .avatar, +#arena.uslim_player[data-player_height="default"] + > .player.fullskin2:not(.minskin).unseen2[data-position="0"] + > .avatar { + clip-path: polygon(-10px -10px, 124px -10px, 124px 86px, 114px 86px, 0px 108px, -10px 108px); + -webkit-clip-path: polygon(-10px -10px, 124px -10px, 124px 86px, 114px 86px, 0px 108px, -10px 108px); +} +#arena.uslim_player[data-player_height="short"] > .player.fullskin2:not(.minskin):not(.unseen2) > .avatar, +#arena.uslim_player[data-player_height="short"] + > .player.fullskin2:not(.minskin).unseen2[data-position="0"] + > .avatar { + clip-path: polygon(-10px -10px, 124px -10px, 124px 76px, 114px 76px, 0px 98px, -10px 98px); + -webkit-clip-path: polygon(-10px -10px, 124px -10px, 124px 76px, 114px 76px, 0px 98px, -10px 98px); +} +#arena.lslim_player > .player.fullskin2:not(.minskin):not(.unseen2) > .avatar, +#arena.lslim_player > .player.fullskin2:not(.minskin).unseen2[data-position="0"] > .avatar { + height: calc(50% + 16px) !important; + clip-path: polygon(-10px -10px, 120px -10px, 120px 94px, 110px 94px, 0px 116px, -10px 116px); + -webkit-clip-path: polygon(-10px -10px, 120px -10px, 120px 94px, 110px 94px, 0px 116px, -10px 116px); +} +#arena.lslim_player[data-player_height="default"] > .player.fullskin2:not(.minskin):not(.unseen2) > .avatar, +#arena.lslim_player[data-player_height="default"] + > .player.fullskin2:not(.minskin).unseen2[data-position="0"] + > .avatar { + clip-path: polygon(-10px -10px, 120px -10px, 120px 84px, 110px 84px, 0px 106px, -10px 106px); + -webkit-clip-path: polygon(-10px -10px, 120px -10px, 120px 84px, 110px 84px, 0px 106px, -10px 106px); +} +#arena.lslim_player[data-player_height="short"] > .player.fullskin2:not(.minskin):not(.unseen2) > .avatar, +#arena.lslim_player[data-player_height="short"] + > .player.fullskin2:not(.minskin).unseen2[data-position="0"] + > .avatar { + clip-path: polygon(-10px -10px, 120px -10px, 120px 74px, 110px 74px, 0px 96px, -10px 96px); + -webkit-clip-path: polygon(-10px -10px, 120px -10px, 120px 74px, 110px 74px, 0px 96px, -10px 96px); +} +#window[data-radius_size="reduce"] #arena > .player.fullskin2:not(.minskin):not(.unseen2) > .avatar, +#window[data-radius_size="reduce"] + #arena + > .player.fullskin2:not(.minskin).unseen2[data-position="0"] + > .avatar { + border-radius: 4px 4px 0 0 !important; +} +#window[data-radius_size="off"] #arena > .player.fullskin2:not(.minskin):not(.unseen2) > .avatar, +#window[data-radius_size="off"] + #arena + > .player.fullskin2:not(.minskin).unseen2[data-position="0"] + > .avatar { + border-radius: 0 0 0 0 !important; +} +#window[data-radius_size="increase"] #arena > .player.fullskin2:not(.minskin):not(.unseen2) > .avatar, +#window[data-radius_size="increase"] + #arena + > .player.fullskin2:not(.minskin).unseen2[data-position="0"] + > .avatar { + border-radius: 16px 16px 0 0 !important; +} +#arena > .player.fullskin2:not(.minskin):not(.unseen) > .avatar2, +#arena > .player.fullskin2:not(.minskin).unseen[data-position="0"] > .avatar2 { + border-radius: 0 0 8px 8px !important; + top: calc(50% - 21px) !important; + height: calc(50% + 14px) !important; + background-position: 0 10px !important; + clip-path: polygon(-10px 32px, 0 32px, 106px 10px, 116px 10px, 116px 134px, -10px 134px); + -webkit-clip-path: polygon(-10px 32px, 0 32px, 106px 10px, 116px 10px, 116px 134px, -10px 134px); +} +#arena.uslim_player > .player.fullskin2:not(.minskin):not(.unseen) > .avatar2, +#arena.uslim_player > .player.fullskin2:not(.minskin).unseen[data-position="0"] > .avatar2 { + top: calc(50% - 21px) !important; + height: calc(50% + 18px) !important; + clip-path: polygon(-10px 32px, 0 32px, 114px 10px, 124px 10px, 124px 138px, -10px 138px); + -webkit-clip-path: polygon(-10px 32px, 0 32px, 114px 10px, 124px 10px, 124px 138px, -10px 138px); +} +#arena.lslim_player > .player.fullskin2:not(.minskin):not(.unseen) > .avatar2, +#arena.lslim_player > .player.fullskin2:not(.minskin).unseen[data-position="0"] > .avatar2 { + top: calc(50% - 21px) !important; + height: calc(50% + 16px) !important; + clip-path: polygon(-10px 32px, 0 32px, 110px 10px, 120px 10px, 120px 136px, -10px 136px); + -webkit-clip-path: polygon(-10px 32px, 0 32px, 110px 10px, 120px 10px, 120px 136px, -10px 136px); +} +#window[data-radius_size="reduce"] #arena > .player.fullskin2:not(.minskin):not(.unseen) > .avatar2, +#window[data-radius_size="reduce"] + #arena + > .player.fullskin2:not(.minskin).unseen[data-position="0"] + > .avatar2 { + border-radius: 0 0 4px 4px !important; +} +#window[data-radius_size="off"] #arena > .player.fullskin2:not(.minskin):not(.unseen) > .avatar2, +#window[data-radius_size="off"] + #arena + > .player.fullskin2:not(.minskin).unseen[data-position="0"] + > .avatar2 { + border-radius: 0 0 0 0 !important; +} +#window[data-radius_size="increase"] #arena > .player.fullskin2:not(.minskin):not(.unseen) > .avatar2, +#window[data-radius_size="increase"] + #arena + > .player.fullskin2:not(.minskin).unseen[data-position="0"] + > .avatar2 { + border-radius: 0 0 16px 16px !important; +} +#arena > .player.fullskin2:not(.minskin) > .avatar2 { + top: calc(50% - 7px) !important; +} +#arena > .player:not(.minskin) > .identity { + left: 102px; +} +#arena > .player:not(.minskin) > .hp:not(.actcount) { + left: 93px; +} +/*#arena>.player:not(.minskin)>.hp:not(.actcount).text{ + left: 89px; +}*/ +#arena > .player.fullskin2 .avatar2 { + z-index: 2; +} +#arena > .player.unseen:not(.unseen2) .count { + text-align: left; + border-radius: 3px 0 0 3px; +} +#arena > .player.unseen2 .count { + border-radius: 3px; + text-align: center; +} + +#arena .timerbar > div { + top: 205px; + width: 96px; + left: 12px; +} +#arena[data-player_height="default"] .timerbar > div { + top: 185px; +} +#arena[data-player_height="short"] .timerbar > div { + top: 165px; +} +#arena .player[data-position="0"] > .damage.dieidentity { + opacity: 1 !important; +} + +/*--------位置(8人)------*/ +#arena[data-number="8"] > .player[data-position="1"] { + top: calc(30% - 128px); + left: calc(-300% / 94 + 4375% / 47 - 735px + 720px); +} +#arena[data-number="8"] > .player[data-position="2"] { + top: calc(8% - 34px); + left: calc(-300% / 94 + 3750% / 47 - 630px + 600px); +} +#arena[data-number="8"] > .player[data-position="3"] { + top: 0; + left: calc(-300% / 94 + 3125% / 47 - 525px + 480px); +} +#arena[data-number="8"] > .player[data-position="4"] { + top: 0; + left: calc(-300% / 94 + 2500% / 47 - 420px + 360px); +} +#arena[data-number="8"] > .player[data-position="5"] { + top: 0; + left: calc(-300% / 94 + 1875% / 47 - 315px + 240px); +} +#arena[data-number="8"] > .player[data-position="6"] { + top: calc(8% - 34px); + left: calc(-300% / 94 + 1250% / 47 - 210px + 120px); +} +#arena[data-number="8"] > .player[data-position="7"] { + top: calc(30% - 128px); + left: calc(-300% / 94 + 625% / 47 - 105px); +} +#arena[data-number="8"] > .player[data-position="0"] { + left: calc(-300% / 94 + 625% / 47 - 105px); +} +#arena > .player[data-position="0"] { + left: 0; +} +@media screen and (min-width: 1105px) { + #arena[data-number="8"] > .player[data-position="1"] { + left: calc(100% - 120px); + } + #arena[data-number="8"] > .player[data-position="2"] { + left: calc(500% / 6 - 100px); + } + #arena[data-number="8"] > .player[data-position="3"] { + left: calc(400% / 6 - 80px); + } + #arena[data-number="8"] > .player[data-position="4"] { + left: calc(300% / 6 - 60px); + } + #arena[data-number="8"] > .player[data-position="5"] { + left: calc(200% / 6 - 40px); + } + #arena[data-number="8"] > .player[data-position="6"] { + left: calc(100% / 6 - 20px); + } + #arena[data-number="8"] > .player[data-position="7"] { + left: 0; + } + #arena[data-number="8"] > .player[data-position="0"] { + left: 0; + } +} +/*--------位置(7人)------*/ +#arena[data-number="7"] > .player[data-position="1"] { + top: calc(30% - 128px); + left: calc(100% - 120px); +} +#arena[data-number="7"] > .player[data-position="2"] { + top: calc(8% - 34px); + left: calc(80% - 96px); +} +#arena[data-number="7"] > .player[data-position="3"] { + top: 0; + left: calc(60% - 72px); +} +#arena[data-number="7"] > .player[data-position="4"] { + top: 0; + left: calc(40% - 48px); +} +#arena[data-number="7"] > .player[data-position="5"] { + top: calc(8% - 34px); + left: calc(20% - 24px); +} +#arena[data-number="7"] > .player[data-position="6"] { + top: calc(30% - 128px); + left: 0; +} +/*--------位置(6人)------*/ +#arena[data-number="6"] > .player[data-position="1"] { + top: calc(30% - 128px); + left: calc(100% - 120px); +} +#arena[data-number="6"] > .player[data-position="2"] { + top: 0px; + left: calc(75% - 90px); +} +#arena[data-number="6"] > .player[data-position="3"] { + top: 0; + left: calc(50% - 60px); +} +#arena[data-number="6"] > .player[data-position="4"] { + top: 0px; + left: calc(25% - 30px); +} +#arena[data-number="6"] > .player[data-position="5"] { + top: calc(30% - 128px); + left: 0; +} +/*--------位置(5人)------*/ +#arena[data-number="5"] > .player[data-position="1"] { + top: calc(30% - 128px); + left: calc(100% - 120px); +} +#arena[data-number="5"] > .player[data-position="2"] { + top: 0; + left: calc(200% / 3 - 80px); +} +#arena[data-number="5"] > .player[data-position="3"] { + top: 0; + left: calc(100% / 3 - 40px); +} +#arena[data-number="5"] > .player[data-position="4"] { + top: calc(30% - 128px); + left: 0; +} +/*--------位置(4人)------*/ +#arena[data-number="4"] > .player[data-position="1"] { + top: calc(30% - 128px); + left: calc(100% - 120px); +} +#arena[data-number="4"] > .player[data-position="2"] { + top: 0; + left: calc(50% - 60px); +} +#arena[data-number="4"] > .player[data-position="3"] { + top: calc(30% - 128px); + left: 0; +} +/*--------位置(3人)------*/ +#arena[data-number="3"] > .player[data-position="1"] { + top: calc(60% / 3 - 88px); + left: calc(75% + 80px); +} +#arena[data-number="3"] > .player[data-position="2"] { + top: calc(60% / 3 - 88px); + left: calc(25% - 200px); +} +/*--------位置(2人)------*/ +#arena[data-number="2"] > .player[data-position="1"] { + top: 0; + left: calc(50% - 60px); +} diff --git a/layout/mobile/equip.css b/layout/mobile/equip.css index 1d362f0b3..16d6664b6 100644 --- a/layout/mobile/equip.css +++ b/layout/mobile/equip.css @@ -1,227 +1,225 @@ -#arena:not(.chess).textequip .player[data-position='0'] .equips, -.player:not([data-position='0']) .equips, -#arena.chess .player .equips{ - width:120px; - height:auto; - top:auto; - right:auto; - bottom:18px; - left:10px; - text-align:left; -} -#arena.slim_player .player:not([data-position='0']) .equips, -#arena.chess.slim_player .player .equips{ - left:7px; -} -#arena.chess.lslim_player.slim_player .player .equips{ - left:5px; - bottom: 17px; -} -#arena.chess.lslim_player.slim_player .player.minskin.linked .equips{ - transform: rotate(90deg) translate(-98px,-5px) scale(0.73) -} -#arena.uslim_player .player:not([data-position='0']) .equips, -#arena.chess.uslim_player .player .equips{ - left:3px; -} -#arena.mslim_player .player:not([data-position='0']) .equips, -#arena.chess.mslim_player .player .equips{ - left:5px; -} -.player:not([data-position='0']).minskin .equips, -#arena.chess .player.minskin .equips{ - transform:scale(0.73); - transform-origin:bottom left; -} - - -#arena:not(.chess).textequip .player[data-position='0'] .equips>.card::after, -#arena:not(.chess).textequip .player[data-position='0'] .equips>.card::before, -.player:not([data-position='0']) .equips>.card::after, -.player:not([data-position='0']) .equips>.card::before, -#arena.chess .player .equips>.card::after, -#arena.chess .player .equips>.card::before{ - visibility: hidden; -} - -#arena:not(.chess).textequip .player[data-position='0'] .equips>.card, -.player:not([data-position='0']) .equips>.card, -#arena.chess .player .equips>.card{ - position:relative; - width:100%; - height:22px; - line-height:22px; - margin-top:0; - margin-bottom:0; - animation: card_start2x 0.5s; - -webkit-animation: card_start2x 0.5s; - display:block; - left:0; - top:0; - transition:all 0.5s; - - color:white; - border-radius:0; - text-shadow:black 0 0 2px; -} -.player:not([data-position='0']) .equips>.card, -#arena.chess .player .equips>.card{ - border-width: 1px 0 0; - border-style:solid; - border-image:linear-gradient(to right, rgba(0, 0, 0,0.4) 70%,transparent) 100% 0 0; - background:linear-gradient(to right,rgba(0,0,0,0.3),transparent), - linear-gradient(135deg,rgba(0,0,0,0.5) ,transparent 80%,transparent) !important; - box-shadow:none; -} -#arena:not(.chess).textequip .player[data-position='0'] .equips>.card>.image, -.player:not([data-position='0']) .equips>.card>.image, -#arena.chess .player .equips>.card>.image{ - display:none; -} - -/*#arena:not(.chess).textequip .player[data-position='0'].unseen .equips>.card, -.player:not([data-position='0']).unseen .equips>.card, -#arena.chess .player.unseen .equips>.card{ - background:none; - border-image:linear-gradient(to right, transparent,rgba(0,0,0,0.4) 10%,rgba(0, 0, 0,0.4) 70%,transparent) 100% 0 0; -} -#arena:not(.chess).textequip .player[data-position='0'].unseen .equips>.card, -.player:not([data-position='0']).unseen .equips>.card, -#arena.chess .player.unseen .equips>.card{ - border-image:linear-gradient(to right, transparent,rgba(0,0,0,0.4) 10%,rgba(0, 0, 0,0.4) 70%,transparent) 100% 0 0; -} -#arena:not(.chess).textequip .player[data-position='0'].unseen .equips>.card:first-child, -.player:not([data-position='0']).unseen .equips>.card:first-child, -#arena.chess .player.unseen .equips>.card:first-child{ - border-image:linear-gradient(transparent,transparent); -}*/ -.player:not([data-position='0']) .equips>.card.selected, -#arena.chess .player .equips>.card.selected{ - background:linear-gradient(to right,rgba(0, 133, 255,0.3),transparent), - linear-gradient(135deg,rgba(0, 133, 255,0.5) ,transparent 80%,transparent) !important; - box-shadow:none !important; - border-width: 1px 0 0; - border-style:solid; - border-image:linear-gradient(to right, rgba(0, 103, 205,0.4) 70%,transparent) 100% 0 0; -} -#arena:not(.chess).textequip .player[data-position='0'] .equips>.card.selected{ - background:linear-gradient(rgba(0, 133, 255,0.6),rgba(0, 133, 255,0.5)) !important; - box-shadow: rgba(0,0,0,0.4) 0 1px 0 0 !important; -} -#arena:not(.chess).textequip .player[data-position='0'] .equips>.card.fire, -.player:not([data-position='0']) .equips>.card.fire, -#arena.chess .player .equips>.card.fire{ - color: rgb(255,119,63); -} -#arena:not(.chess).textequip .player[data-position='0'] .equips>.card.thunder, -.player:not([data-position='0']) .equips>.card.thunder, -#arena.chess .player .equips>.card.thunder{ - color: rgb(117,186,255); -} -#arena:not(.chess).textequip .player[data-position='0'] .equips>.card.poison, -.player:not([data-position='0']) .equips>.card.poison, -#arena.chess .player .equips>.card.poison{ - color: rgb(104,221,127); -} -#arena:not(.chess).textequip .player[data-position='0'] .equips>.card.brown, -.player:not([data-position='0']) .equips>.card.brown, -#arena.chess .player .equips>.card.brown{ - color: rgb(195,161,223); -} - -#arena:not(.chess).textequip .player[data-position='0'] .equips>.card>.background, -.player:not([data-position='0']) .equips>.card>.background, -#arena.chess .player .equips>.card>.background{ - display:none !important; -} -#arena:not(.chess).textequip .player[data-position='0'] .equips>.card>.name2, -.player:not([data-position='0']) .equips>.card>.name2, -#arena.chess .player .equips>.card>.name2{ - display:block; - margin-left:5px; - white-space: nowrap; -} -#arena.oblongcard:not(.chess).textequip .player[data-position='0'] .equips>.card>.name2{ - line-height: 29px; -} -#arena:not(.chess).textequip .player[data-position='0'] .equips>.card>div, -.player:not([data-position='0']) .equips>.card>div, -#arena.chess .player .equips>.card>div{ - animation:none !important; - -webkit-animation:none !important; -} -#arena:not(.chess).textequip .player[data-position='0'] .equips>.card>.name, -#arena:not(.chess).textequip .player[data-position='0'] .equips>.card>.info, -.player:not([data-position='0']) .equips>.card>.name, -.player:not([data-position='0']) .equips>.card>.info, -#arena.chess .player .equips>.card>.name, -#arena.chess .player .equips>.card>.info{ - display:none !important; -} - -#arena:not(.chess).textequip .player[data-position='0'] .equips>.removing, -.player:not([data-position='0']) .equips>.removing, -#arena.chess .player .equips>.removing{ - margin-top:-12px !important; - margin-bottom:-11px !important; - transform:scale(1); -} - -#arena:not(.chess).textequip .player[data-position='0'] .equips>.removing+.removing, -.player:not([data-position='0']) .equips>.removing+.removing, -#arena.chess .player .equips>.removing+.removing{ - margin-top:-23px !important; -} - - -#arena:not(.textequip):not(.chess).textequip .player[data-position='0'].linked .equips, -.player:not([data-position='0']).linked .equips, -#arena.chess .player.linked .equips{ - transform:rotate(90deg) translate(-152px,-6px); - transform-origin:bottom left; -} -#arena.slim_player .player:not([data-position='0']).linked .equips, -#arena.chess.slim_player .player.linked .equips{ - transform:rotate(90deg) translate(-155px,-6px); -} -#arena.uslim_player .player:not([data-position='0']).linked .equips, -#arena.chess.uslim_player .player.linked .equips{ - transform:rotate(90deg) translate(-159px,-6px); -} -#arena.mslim_player .player:not([data-position='0']).linked .equips, -#arena.chess.mslim_player .player.linked .equips{ - transform:rotate(90deg) translate(-157px,-6px); -} -.player:not([data-position='0']).minskin.linked .equips, -#arena.chess .player.minskin.linked .equips{ - transform:rotate(90deg) translate(-92px,-6px) scale(0.73); -} -#arena.slim_player .player:not([data-position='0']).minskin.linked .equips, -#arena.chess.slim_player .player.minskin.linked .equips{ - transform:rotate(90deg) translate(-95px,-6px) scale(0.73); -} -#arena.uslim_player .player:not([data-position='0']).minskin.linked .equips, -#arena.chess.uslim_player .player.minskin.linked .equips{ - transform:rotate(90deg) translate(-99px,-6px) scale(0.73); -} -#arena.mslim_player .player:not([data-position='0']).minskin.linked .equips, -#arena.chess.mslim_player .player.minskin.linked .equips{ - transform:rotate(90deg) translate(-97px,-6px) scale(0.73); -} -.player:not([data-position='0']).linked .identity, -#arena.chess .player.linked .identity{ - transform:rotate(90deg); -} - -#arena:not(.chess).textequip .player[data-position='0'] .equips>.card{ - border-radius: 0px !important; - left:0 !important; - right: auto !important; - top:0 !important; - bottom: auto !important; - position: relative !important; - height: 20% !important; - - background:none !important; - box-shadow: rgba(0,0,0,0.4) 0 1px 0 0; -} +#arena:not(.chess).textequip .player[data-position="0"] .equips, +.player:not([data-position="0"]) .equips, +#arena.chess .player .equips { + width: 120px; + height: auto; + top: auto; + right: auto; + bottom: 18px; + left: 10px; + text-align: left; +} +#arena.slim_player .player:not([data-position="0"]) .equips, +#arena.chess.slim_player .player .equips { + left: 7px; +} +#arena.chess.lslim_player.slim_player .player .equips { + left: 5px; + bottom: 17px; +} +#arena.chess.lslim_player.slim_player .player.minskin.linked .equips { + transform: rotate(90deg) translate(-98px, -5px) scale(0.73); +} +#arena.uslim_player .player:not([data-position="0"]) .equips, +#arena.chess.uslim_player .player .equips { + left: 3px; +} +#arena.mslim_player .player:not([data-position="0"]) .equips, +#arena.chess.mslim_player .player .equips { + left: 5px; +} +.player:not([data-position="0"]).minskin .equips, +#arena.chess .player.minskin .equips { + transform: scale(0.73); + transform-origin: bottom left; +} + +#arena:not(.chess).textequip .player[data-position="0"] .equips > .card::after, +#arena:not(.chess).textequip .player[data-position="0"] .equips > .card::before, +.player:not([data-position="0"]) .equips > .card::after, +.player:not([data-position="0"]) .equips > .card::before, +#arena.chess .player .equips > .card::after, +#arena.chess .player .equips > .card::before { + visibility: hidden; +} + +#arena:not(.chess).textequip .player[data-position="0"] .equips > .card, +.player:not([data-position="0"]) .equips > .card, +#arena.chess .player .equips > .card { + position: relative; + width: 100%; + height: 22px; + line-height: 22px; + margin-top: 0; + margin-bottom: 0; + animation: card_start2x 0.5s; + -webkit-animation: card_start2x 0.5s; + display: block; + left: 0; + top: 0; + transition: all 0.5s; + + color: white; + border-radius: 0; + text-shadow: black 0 0 2px; +} +.player:not([data-position="0"]) .equips > .card, +#arena.chess .player .equips > .card { + border-width: 1px 0 0; + border-style: solid; + border-image: linear-gradient(to right, rgba(0, 0, 0, 0.4) 70%, transparent) 100% 0 0; + background: linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent), + linear-gradient(135deg, rgba(0, 0, 0, 0.5), transparent 80%, transparent) !important; + box-shadow: none; +} +#arena:not(.chess).textequip .player[data-position="0"] .equips > .card > .image, +.player:not([data-position="0"]) .equips > .card > .image, +#arena.chess .player .equips > .card > .image { + display: none; +} + +/*#arena:not(.chess).textequip .player[data-position='0'].unseen .equips>.card, +.player:not([data-position='0']).unseen .equips>.card, +#arena.chess .player.unseen .equips>.card{ + background:none; + border-image:linear-gradient(to right, transparent,rgba(0,0,0,0.4) 10%,rgba(0, 0, 0,0.4) 70%,transparent) 100% 0 0; +} +#arena:not(.chess).textequip .player[data-position='0'].unseen .equips>.card, +.player:not([data-position='0']).unseen .equips>.card, +#arena.chess .player.unseen .equips>.card{ + border-image:linear-gradient(to right, transparent,rgba(0,0,0,0.4) 10%,rgba(0, 0, 0,0.4) 70%,transparent) 100% 0 0; +} +#arena:not(.chess).textequip .player[data-position='0'].unseen .equips>.card:first-child, +.player:not([data-position='0']).unseen .equips>.card:first-child, +#arena.chess .player.unseen .equips>.card:first-child{ + border-image:linear-gradient(transparent,transparent); +}*/ +.player:not([data-position="0"]) .equips > .card.selected, +#arena.chess .player .equips > .card.selected { + background: linear-gradient(to right, rgba(0, 133, 255, 0.3), transparent), + linear-gradient(135deg, rgba(0, 133, 255, 0.5), transparent 80%, transparent) !important; + box-shadow: none !important; + border-width: 1px 0 0; + border-style: solid; + border-image: linear-gradient(to right, rgba(0, 103, 205, 0.4) 70%, transparent) 100% 0 0; +} +#arena:not(.chess).textequip .player[data-position="0"] .equips > .card.selected { + background: linear-gradient(rgba(0, 133, 255, 0.6), rgba(0, 133, 255, 0.5)) !important; + box-shadow: rgba(0, 0, 0, 0.4) 0 1px 0 0 !important; +} +#arena:not(.chess).textequip .player[data-position="0"] .equips > .card.fire, +.player:not([data-position="0"]) .equips > .card.fire, +#arena.chess .player .equips > .card.fire { + color: rgb(255, 119, 63); +} +#arena:not(.chess).textequip .player[data-position="0"] .equips > .card.thunder, +.player:not([data-position="0"]) .equips > .card.thunder, +#arena.chess .player .equips > .card.thunder { + color: rgb(117, 186, 255); +} +#arena:not(.chess).textequip .player[data-position="0"] .equips > .card.poison, +.player:not([data-position="0"]) .equips > .card.poison, +#arena.chess .player .equips > .card.poison { + color: rgb(104, 221, 127); +} +#arena:not(.chess).textequip .player[data-position="0"] .equips > .card.brown, +.player:not([data-position="0"]) .equips > .card.brown, +#arena.chess .player .equips > .card.brown { + color: rgb(195, 161, 223); +} + +#arena:not(.chess).textequip .player[data-position="0"] .equips > .card > .background, +.player:not([data-position="0"]) .equips > .card > .background, +#arena.chess .player .equips > .card > .background { + display: none !important; +} +#arena:not(.chess).textequip .player[data-position="0"] .equips > .card > .name2, +.player:not([data-position="0"]) .equips > .card > .name2, +#arena.chess .player .equips > .card > .name2 { + display: block; + margin-left: 5px; + white-space: nowrap; +} +#arena.oblongcard:not(.chess).textequip .player[data-position="0"] .equips > .card > .name2 { + line-height: 29px; +} +#arena:not(.chess).textequip .player[data-position="0"] .equips > .card > div, +.player:not([data-position="0"]) .equips > .card > div, +#arena.chess .player .equips > .card > div { + animation: none !important; + -webkit-animation: none !important; +} +#arena:not(.chess).textequip .player[data-position="0"] .equips > .card > .name, +#arena:not(.chess).textequip .player[data-position="0"] .equips > .card > .info, +.player:not([data-position="0"]) .equips > .card > .name, +.player:not([data-position="0"]) .equips > .card > .info, +#arena.chess .player .equips > .card > .name, +#arena.chess .player .equips > .card > .info { + display: none !important; +} + +#arena:not(.chess).textequip .player[data-position="0"] .equips > .removing, +.player:not([data-position="0"]) .equips > .removing, +#arena.chess .player .equips > .removing { + margin-top: -12px !important; + margin-bottom: -11px !important; + transform: scale(1); +} + +#arena:not(.chess).textequip .player[data-position="0"] .equips > .removing + .removing, +.player:not([data-position="0"]) .equips > .removing + .removing, +#arena.chess .player .equips > .removing + .removing { + margin-top: -23px !important; +} + +#arena:not(.textequip):not(.chess).textequip .player[data-position="0"].linked .equips, +.player:not([data-position="0"]).linked .equips, +#arena.chess .player.linked .equips { + transform: rotate(90deg) translate(-152px, -6px); + transform-origin: bottom left; +} +#arena.slim_player .player:not([data-position="0"]).linked .equips, +#arena.chess.slim_player .player.linked .equips { + transform: rotate(90deg) translate(-155px, -6px); +} +#arena.uslim_player .player:not([data-position="0"]).linked .equips, +#arena.chess.uslim_player .player.linked .equips { + transform: rotate(90deg) translate(-159px, -6px); +} +#arena.mslim_player .player:not([data-position="0"]).linked .equips, +#arena.chess.mslim_player .player.linked .equips { + transform: rotate(90deg) translate(-157px, -6px); +} +.player:not([data-position="0"]).minskin.linked .equips, +#arena.chess .player.minskin.linked .equips { + transform: rotate(90deg) translate(-92px, -6px) scale(0.73); +} +#arena.slim_player .player:not([data-position="0"]).minskin.linked .equips, +#arena.chess.slim_player .player.minskin.linked .equips { + transform: rotate(90deg) translate(-95px, -6px) scale(0.73); +} +#arena.uslim_player .player:not([data-position="0"]).minskin.linked .equips, +#arena.chess.uslim_player .player.minskin.linked .equips { + transform: rotate(90deg) translate(-99px, -6px) scale(0.73); +} +#arena.mslim_player .player:not([data-position="0"]).minskin.linked .equips, +#arena.chess.mslim_player .player.minskin.linked .equips { + transform: rotate(90deg) translate(-97px, -6px) scale(0.73); +} +.player:not([data-position="0"]).linked .identity, +#arena.chess .player.linked .identity { + transform: rotate(90deg); +} + +#arena:not(.chess).textequip .player[data-position="0"] .equips > .card { + border-radius: 0px !important; + left: 0 !important; + right: auto !important; + top: 0 !important; + bottom: auto !important; + position: relative !important; + height: 20% !important; + + background: none !important; + box-shadow: rgba(0, 0, 0, 0.4) 0 1px 0 0; +} diff --git a/layout/mobile/layout.css b/layout/mobile/layout.css index 46818aaae..67f6fa266 100644 --- a/layout/mobile/layout.css +++ b/layout/mobile/layout.css @@ -1,362 +1,373 @@ -@import "../newlayout/global.css"; -@import "equip.css"; - -#arena{ - height: calc(95% + 20px); -} -#arena.oblongcard:not(.chess):not(.nome){ - height: 95%; -} -#arena.oblongcard:not(.chess):not(.nome) #me, -#arena.oblongcard:not(.chess):not(.nome) #mebg{ - height: 140px; - bottom: 10px; -} -#historybar{ - height: calc(95% - 160px); -} -#window.oblongcard #historybar{ - height: calc(95% - 180px); -} -#control{ - width: calc(5000% / 47 - 240px); - left:calc(-150% / 47 + 120px); - bottom:150px; - height: 40px; -} -#arena.choose-to-move>#control, -#arena.discard-player-card>#control, -#arena.gain-player-card>#control, -#arena.choose-player-card>#control{ - bottom: 30px; - transition: all 0s; -} - -#arena.phone.discard-player-card>#control, -#arena.phone.gain-player-card>#control, -#arena.phone.choose-player-card>#control, -#arena.phone.choose-to-move>#control{ - bottom: 43px; -} - -#arena.ipad.discard-player-card>#control, -#arena.ipad.gain-player-card>#control, -#arena.ipad.choose-player-card>#control, -#arena.ipad.choose-to-move>#control{ - bottom: 45px; -} -#arena:not(.chess)>#me, -#arena:not(.chess)>#mebg, -#arena:not(.chess)>#autonode{ - bottom:30px; - width: calc(5000% / 47); - left:calc(-150% / 47); - top:auto; - border-radius:0 !important; - height:120px; -} -#arena:not(.chess)>#autonode{ - width: calc(5000% / 47 - 240px); - left:calc(-150% / 47 + 120px); -} -#window.leftbar #arena:not(.chess)>#me, -#window.leftbar #arena:not(.chess)>#mebg, -#window.leftbar #arena:not(.chess)>#autonode, -#window.leftbar #arena:not(.chess) .player[data-position='0']{ - width: calc(5000% / 47 + 2500px / 47); - left:calc(-150% / 47 - 50px - 75px / 47); -} -#window.leftbar #arena:not(.chess)>#autonode{ - width: calc(5000% / 47 + 2500px / 47 - 240px); - left:calc(-150% / 47 - 50px - 75px / 47 + 120px); -} -#window.rightbar #arena:not(.chess)>#me, -#window.rightbar #arena:not(.chess)>#mebg, -#window.rightbar #arena:not(.chess)>#autonode, -#window.rightbar #arena:not(.chess) .player[data-position='0']{ - width: calc(5000% / 47 + 2500px / 47); - left:calc(-150% / 47 - 75px / 47); -} -#window.rightbar #arena:not(.chess)>#autonode{ - width: calc(5000% / 47 + 2500px / 47 - 240px); - left:calc(-150% / 47 - 75px / 47 + 120px); -} -#arena:not(.chess) #handcards1{ - height:120px; - padding:0; - top:calc(100% - 120px); -} -#arena:not(.chess):not(.single-handcard) #handcards1{ - width:calc(100% - 240px); - left:120px; -} -#handcards2{ - display:none; -} -/*#arena:not(.chess) .player[data-position='0']>.playerjiu{ - width: 120px; - border-radius: 0px; -}*/ -#arena:not(.chess) .player[data-position='0'].playerfocus{ - transform: scale(1); -} -#arena:not(.chess) .player[data-position='0']>.equips>div:not(.equip5){ - width: 45px; - height: 45px; - margin: 0; - border-radius: 4px; - position: absolute; -} -#arena:not(.chess) .player[data-position='0']>.equips>div:not(.equip5)>.image{ - width: 100%; - height: 100%; - left: 0; - top: 0; -} -#arena:not(.chess) .player[data-position='0']>.equips>div:not(.equip5)>.name{ - display: block; - transform: scale(0.43) !important; - transform-origin: left top; - left: 2px; - top: 3px; -} -#arena:not(.chess) .player[data-position='0']>.equips>div:not(.equip5)>.name.long{ - top: 2px; -} -#arena:not(.chess) .player[data-position='0']>.equips>div:not(.equip5)>.info{ - display: block; - transform: scale(0.43) !important; - transform-origin: right top; - right: 3px; - top: 3px; -} -/*#arena.oblongcard:not(.chess) .player[data-position='0']>.equips>div:not(.equip5){ - height: 54px; -} -#arena.oblongcard:not(.chess) .player[data-position='0']>.equips>div:not(.equip5)>.image{ - width: 120%; - height: 100%; - left: -20%; - top: 0%; -}*/ -#arena:not(.chess):not(.textequip) .player[data-position='0']>.equips>div.legend{ - border: 1px solid rgb(192, 90, 255); -} -#arena:not(.chess):not(.textequip) .player[data-position='0']>.equips>div.epic{ - border: 1px solid rgb(90, 171, 255); -} -#arena.mobile:not(.chess) .player[data-position='0']>.equips>.equip5{ - border-radius: 100%; -} -#arena:not(.chess) .player[data-position='0']{ - width: calc(5000% / 47); - left:calc(-150% / 47); - height: 120px; - top: calc(100% - 150px); - background: none !important; - border:none !important; - border-radius: 0 !important; - pointer-events: none; -} -#arena:not(.chess) .player[data-position='0']>.turned{ - width: 120px; -} -#arena:not(.chess) .player[data-position='0']>.chain{ - width: 120px -} -#arena.oblongcard:not(.chess) .player[data-position='0']{ - height: 140px; -} - -#arena:not(.chess) .player[data-position='0'].linked>.damage{ - transform:scale(0.7) rotate(0); -} -#arena:not(.chess) .player[data-position='0'].linked>.damage.damageadded{ - transform:scale(1) rotate(0); -} -#arena:not(.chess) .player[data-position='0']:not(.selected):not(.selectedx):not(.selectable):not(.glow){ - box-shadow: none !important; -} -#arena:not(.chess) .player[data-position='0']:not(.minskin)>.avatar, -#arena:not(.chess) .player[data-position='0']:not(.minskin)>.avatar2, -#arena:not(.chess) .player[data-position='0']:not(.minskin)>.equips{ - width:120px; - height:100%; - border-radius:0px !important; - top:0; - left:0; - transition-property: opacity,transform; - transition-duration: 0.5s; - pointer-events: auto; - /*-webkit-clip-path: polygon(-10px 0, 130px 0, 130px 180px, -10px 180px);*/ -} -/*#window.compatiblemode #arena:not(.chess) .player[data-position='0']:not(.minskin)>.avatar, -#window.compatiblemode #arena:not(.chess) .player[data-position='0']:not(.minskin)>.avatar2, -#window.compatiblemode #arena:not(.chess) .player[data-position='0']:not(.minskin)>.equips{ - -webkit-clip-path: none; -}*/ -#arena:not(.chess) .player[data-position='0']:not(.minskin)>.identity{ - pointer-events: auto; -} -#arena:not(.chess) .player[data-position='0']:not(.minskin)>.judges, -#arena:not(.chess) .player[data-position='0']:not(.minskin)>.marks{ - pointer-events: auto; -} -#arena:not(.chess) .player[data-position='0']:not(.minskin)>.equips{ - left:calc(100% - 120px); -} -#arena:not(.chess) .player[data-position='0']>.equips>.equip1{top: 10px;left: 10px;} -#arena:not(.chess) .player[data-position='0']>.equips>.equip2{top: 10px;right: 10px;} -#arena:not(.chess) .player[data-position='0']>.equips>.equip3{bottom: 10px;left: 10px;} -#arena:not(.chess) .player[data-position='0']>.equips>.equip4{bottom: 10px;right: 10px;} -#arena:not(.chess) .player[data-position='0']>.equips>.equip6{bottom: 10px;right: 10px;} - -#arena:not(.chess) .player[data-position='0']>.name, -#arena:not(.chess) .player[data-position='0'].linked>.name{ - left:4px; - top:10px; - transform: none; -} -#arena:not(.chess) .player[data-position='0']>.nameol{ - display: none; -} -#arena:not(.chess) .player[data-position='0']>.name.name2, -#arena:not(.chess) .player[data-position='0'].linked>.name.name2{ - left:69px; -} -#arena:not(.chess):not(.stone) .player[data-position='0']>.identity{ - left: 0; - width: 130px; -} -#arena:not(.chess) .player[data-position='0']>.damage{ - width: 120px; -} -#arena:not(.chess) .player[data-position='0'].target{ - transform:none !important; -} -#arena:not(.chess) .player[data-position='0']>.hp:not(.actcount){ - bottom: 5px; - left: 100px; -} -#arena:not(.chess) .player[data-position='0']:not(.minskin)>.count{ - bottom:10px; - border-radius: 0 2px 2px 0; - left:-1px; - z-index: 3; - text-align: right; -} -#arena:not(.chess).slim_player .player[data-position='0']:not(.minskin)>.count{ - border-radius: 0 2px 2px 0; - left:-1px; - z-index: 3; - text-align: right; -} -#arena:not(.chess) .player[data-position='0']>.hp.actcount{ - top:10px; - left:2px; -} - -#arena:not(.chess) .player.fullskin2[data-position='0']:not(.minskin)>.avatar, -#arena:not(.chess) .player.fullskin2[data-position='0']:not(.minskin)>.avatar2{ - width:60px; - background-position:50%; -} -#arena:not(.chess) .player.fullskin2[data-position='0']:not(.minskin)>.avatar2{ - left:60px; - top:0; - z-index:1; -} - -.popup[data-position='0']{ - top:calc(100% - 187px); - left:calc(-150% / 47 + 15px); -} - -#arena:not(.chess) .player[data-position='0']>.judges{ - left: 6px; - top: -16px; - transform: none; -} -#arena:not(.chess) .player[data-position='0']>.marks { - right: -6px; - left:auto; - top: -16px; - transform: none; -} - -#arena:not(.chess) .player[data-position='0'].linked{ - transform: none; -} -#arena:not(.chess) .player[data-position='0'].linked .avatar, -#arena:not(.chess) .player[data-position='0'].linked .avatar2{ - transform: rotate(-90deg); -} -#arena:not(.chess) .player[data-position='0'].fullskin2 .avatar{ - transform-origin: right center; -} -#arena:not(.chess) .player[data-position='0'].fullskin2 .avatar2{ - transform-origin: left center; -} - -.dialog{ - height:calc(100% - 370px); - bottom:170px; -} -.dialog.fullheight { - height: calc(100% - 123px) !important; - top: 40px !important; -} - -#me>.fakeme.avatar{ - width:120px; - height:100%; - border-radius:0px; - top:0; - left:0; - background-size:cover; - clip-path: polygon(-10px 0, 130px 0, 130px 150px, -10px 150px); - -webkit-clip-path: polygon(-10px 0, 130px 0, 130px 150px, -10px 150px); -} -#window[data-radius_size='increase'] #me>.fakeme.avatar, -#window[data-radius_size='reduce'] #me>.fakeme.avatar{ - border-radius:0px; -} - -#arena.mobile.oblongcard:not(.chess):not(.textequip) .player[data-position='0']>.equips>.equip1, -#arena.mobile.oblongcard:not(.chess):not(.textequip) .player[data-position='0']>.equips>.equip2{ - top:20px; -} -#arena.mobile.oblongcard:not(.chess):not(.textequip) .player[data-position='0']>.equips>.equip3, -#arena.mobile.oblongcard:not(.chess):not(.textequip) .player[data-position='0']>.equips>.equip4, -#arena.mobile.oblongcard:not(.chess):not(.textequip) .player[data-position='0']>.equips>.equip6{ - bottom:20px; -} - - -#arena.mobile.oblongcard.textequip:not(.chess) .player[data-position='0'] .equips>.removing{ - margin-top:-14px !important; - margin-bottom:-14px !important; - transform:scale(1); -} - - - -#arena.mobile.oblongcard:not(.chess) #handcards1{ - height: 100%; - top: 2px; -} -#arena.mobile.oblongcard:not(.chess)>.card, -#arena.mobile.oblongcard:not(.chess) .handcards>.card{ - height: 120px; -} -#arena.mobile.oblongcard:not(.chess)>.card>.image, -#arena.mobile.oblongcard:not(.chess) .handcards>.card>.image{ - height: 110px; - top: 8px; - background-position-x: -3px; -} - - -#arena.phone.oblongcard:not(.chess):not(.nome){ - height: calc(97% + 10px); -} +@import "../newlayout/global.css"; +@import "equip.css"; + +#arena { + height: calc(95% + 20px); +} +#arena.oblongcard:not(.chess):not(.nome) { + height: 95%; +} +#arena.oblongcard:not(.chess):not(.nome) #me, +#arena.oblongcard:not(.chess):not(.nome) #mebg { + height: 140px; + bottom: 10px; +} +#historybar { + height: calc(95% - 160px); +} +#window.oblongcard #historybar { + height: calc(95% - 180px); +} +#control { + width: calc(5000% / 47 - 240px); + left: calc(-150% / 47 + 120px); + bottom: 150px; + height: 40px; +} +#arena.choose-to-move > #control, +#arena.discard-player-card > #control, +#arena.gain-player-card > #control, +#arena.choose-player-card > #control { + bottom: 30px; + transition: all 0s; +} + +#arena.phone.discard-player-card > #control, +#arena.phone.gain-player-card > #control, +#arena.phone.choose-player-card > #control, +#arena.phone.choose-to-move > #control { + bottom: 43px; +} + +#arena.ipad.discard-player-card > #control, +#arena.ipad.gain-player-card > #control, +#arena.ipad.choose-player-card > #control, +#arena.ipad.choose-to-move > #control { + bottom: 45px; +} +#arena:not(.chess) > #me, +#arena:not(.chess) > #mebg, +#arena:not(.chess) > #autonode { + bottom: 30px; + width: calc(5000% / 47); + left: calc(-150% / 47); + top: auto; + border-radius: 0 !important; + height: 120px; +} +#arena:not(.chess) > #autonode { + width: calc(5000% / 47 - 240px); + left: calc(-150% / 47 + 120px); +} +#window.leftbar #arena:not(.chess) > #me, +#window.leftbar #arena:not(.chess) > #mebg, +#window.leftbar #arena:not(.chess) > #autonode, +#window.leftbar #arena:not(.chess) .player[data-position="0"] { + width: calc(5000% / 47 + 2500px / 47); + left: calc(-150% / 47 - 50px - 75px / 47); +} +#window.leftbar #arena:not(.chess) > #autonode { + width: calc(5000% / 47 + 2500px / 47 - 240px); + left: calc(-150% / 47 - 50px - 75px / 47 + 120px); +} +#window.rightbar #arena:not(.chess) > #me, +#window.rightbar #arena:not(.chess) > #mebg, +#window.rightbar #arena:not(.chess) > #autonode, +#window.rightbar #arena:not(.chess) .player[data-position="0"] { + width: calc(5000% / 47 + 2500px / 47); + left: calc(-150% / 47 - 75px / 47); +} +#window.rightbar #arena:not(.chess) > #autonode { + width: calc(5000% / 47 + 2500px / 47 - 240px); + left: calc(-150% / 47 - 75px / 47 + 120px); +} +#arena:not(.chess) #handcards1 { + height: 120px; + padding: 0; + top: calc(100% - 120px); +} +#arena:not(.chess):not(.single-handcard) #handcards1 { + width: calc(100% - 240px); + left: 120px; +} +#handcards2 { + display: none; +} +/*#arena:not(.chess) .player[data-position='0']>.playerjiu{ + width: 120px; + border-radius: 0px; +}*/ +#arena:not(.chess) .player[data-position="0"].playerfocus { + transform: scale(1); +} +#arena:not(.chess) .player[data-position="0"] > .equips > div:not(.equip5) { + width: 45px; + height: 45px; + margin: 0; + border-radius: 4px; + position: absolute; +} +#arena:not(.chess) .player[data-position="0"] > .equips > div:not(.equip5) > .image { + width: 100%; + height: 100%; + left: 0; + top: 0; +} +#arena:not(.chess) .player[data-position="0"] > .equips > div:not(.equip5) > .name { + display: block; + transform: scale(0.43) !important; + transform-origin: left top; + left: 2px; + top: 3px; +} +#arena:not(.chess) .player[data-position="0"] > .equips > div:not(.equip5) > .name.long { + top: 2px; +} +#arena:not(.chess) .player[data-position="0"] > .equips > div:not(.equip5) > .info { + display: block; + transform: scale(0.43) !important; + transform-origin: right top; + right: 3px; + top: 3px; +} +/*#arena.oblongcard:not(.chess) .player[data-position='0']>.equips>div:not(.equip5){ + height: 54px; +} +#arena.oblongcard:not(.chess) .player[data-position='0']>.equips>div:not(.equip5)>.image{ + width: 120%; + height: 100%; + left: -20%; + top: 0%; +}*/ +#arena:not(.chess):not(.textequip) .player[data-position="0"] > .equips > div.legend { + border: 1px solid rgb(192, 90, 255); +} +#arena:not(.chess):not(.textequip) .player[data-position="0"] > .equips > div.epic { + border: 1px solid rgb(90, 171, 255); +} +#arena.mobile:not(.chess) .player[data-position="0"] > .equips > .equip5 { + border-radius: 100%; +} +#arena:not(.chess) .player[data-position="0"] { + width: calc(5000% / 47); + left: calc(-150% / 47); + height: 120px; + top: calc(100% - 150px); + background: none !important; + border: none !important; + border-radius: 0 !important; + pointer-events: none; +} +#arena:not(.chess) .player[data-position="0"] > .turned { + width: 120px; +} +#arena:not(.chess) .player[data-position="0"] > .chain { + width: 120px; +} +#arena.oblongcard:not(.chess) .player[data-position="0"] { + height: 140px; +} + +#arena:not(.chess) .player[data-position="0"].linked > .damage { + transform: scale(0.7) rotate(0); +} +#arena:not(.chess) .player[data-position="0"].linked > .damage.damageadded { + transform: scale(1) rotate(0); +} +#arena:not(.chess) .player[data-position="0"]:not(.selected):not(.selectedx):not(.selectable):not(.glow) { + box-shadow: none !important; +} +#arena:not(.chess) .player[data-position="0"]:not(.minskin) > .avatar, +#arena:not(.chess) .player[data-position="0"]:not(.minskin) > .avatar2, +#arena:not(.chess) .player[data-position="0"]:not(.minskin) > .equips { + width: 120px; + height: 100%; + border-radius: 0px !important; + top: 0; + left: 0; + transition-property: opacity, transform; + transition-duration: 0.5s; + pointer-events: auto; + /*-webkit-clip-path: polygon(-10px 0, 130px 0, 130px 180px, -10px 180px);*/ +} +/*#window.compatiblemode #arena:not(.chess) .player[data-position='0']:not(.minskin)>.avatar, +#window.compatiblemode #arena:not(.chess) .player[data-position='0']:not(.minskin)>.avatar2, +#window.compatiblemode #arena:not(.chess) .player[data-position='0']:not(.minskin)>.equips{ + -webkit-clip-path: none; +}*/ +#arena:not(.chess) .player[data-position="0"]:not(.minskin) > .identity { + pointer-events: auto; +} +#arena:not(.chess) .player[data-position="0"]:not(.minskin) > .judges, +#arena:not(.chess) .player[data-position="0"]:not(.minskin) > .marks { + pointer-events: auto; +} +#arena:not(.chess) .player[data-position="0"]:not(.minskin) > .equips { + left: calc(100% - 120px); +} +#arena:not(.chess) .player[data-position="0"] > .equips > .equip1 { + top: 10px; + left: 10px; +} +#arena:not(.chess) .player[data-position="0"] > .equips > .equip2 { + top: 10px; + right: 10px; +} +#arena:not(.chess) .player[data-position="0"] > .equips > .equip3 { + bottom: 10px; + left: 10px; +} +#arena:not(.chess) .player[data-position="0"] > .equips > .equip4 { + bottom: 10px; + right: 10px; +} +#arena:not(.chess) .player[data-position="0"] > .equips > .equip6 { + bottom: 10px; + right: 10px; +} + +#arena:not(.chess) .player[data-position="0"] > .name, +#arena:not(.chess) .player[data-position="0"].linked > .name { + left: 4px; + top: 10px; + transform: none; +} +#arena:not(.chess) .player[data-position="0"] > .nameol { + display: none; +} +#arena:not(.chess) .player[data-position="0"] > .name.name2, +#arena:not(.chess) .player[data-position="0"].linked > .name.name2 { + left: 69px; +} +#arena:not(.chess):not(.stone) .player[data-position="0"] > .identity { + left: 0; + width: 130px; +} +#arena:not(.chess) .player[data-position="0"] > .damage { + width: 120px; +} +#arena:not(.chess) .player[data-position="0"].target { + transform: none !important; +} +#arena:not(.chess) .player[data-position="0"] > .hp:not(.actcount) { + bottom: 5px; + left: 100px; +} +#arena:not(.chess) .player[data-position="0"]:not(.minskin) > .count { + bottom: 10px; + border-radius: 0 2px 2px 0; + left: -1px; + z-index: 3; + text-align: right; +} +#arena:not(.chess).slim_player .player[data-position="0"]:not(.minskin) > .count { + border-radius: 0 2px 2px 0; + left: -1px; + z-index: 3; + text-align: right; +} +#arena:not(.chess) .player[data-position="0"] > .hp.actcount { + top: 10px; + left: 2px; +} + +#arena:not(.chess) .player.fullskin2[data-position="0"]:not(.minskin) > .avatar, +#arena:not(.chess) .player.fullskin2[data-position="0"]:not(.minskin) > .avatar2 { + width: 60px; + background-position: 50%; +} +#arena:not(.chess) .player.fullskin2[data-position="0"]:not(.minskin) > .avatar2 { + left: 60px; + top: 0; + z-index: 1; +} + +.popup[data-position="0"] { + top: calc(100% - 187px); + left: calc(-150% / 47 + 15px); +} + +#arena:not(.chess) .player[data-position="0"] > .judges { + left: 6px; + top: -16px; + transform: none; +} +#arena:not(.chess) .player[data-position="0"] > .marks { + right: -6px; + left: auto; + top: -16px; + transform: none; +} + +#arena:not(.chess) .player[data-position="0"].linked { + transform: none; +} +#arena:not(.chess) .player[data-position="0"].linked .avatar, +#arena:not(.chess) .player[data-position="0"].linked .avatar2 { + transform: rotate(-90deg); +} +#arena:not(.chess) .player[data-position="0"].fullskin2 .avatar { + transform-origin: right center; +} +#arena:not(.chess) .player[data-position="0"].fullskin2 .avatar2 { + transform-origin: left center; +} + +.dialog { + height: calc(100% - 370px); + bottom: 170px; +} +.dialog.fullheight { + height: calc(100% - 123px) !important; + top: 40px !important; +} + +#me > .fakeme.avatar { + width: 120px; + height: 100%; + border-radius: 0px; + top: 0; + left: 0; + background-size: cover; + clip-path: polygon(-10px 0, 130px 0, 130px 150px, -10px 150px); + -webkit-clip-path: polygon(-10px 0, 130px 0, 130px 150px, -10px 150px); +} +#window[data-radius_size="increase"] #me > .fakeme.avatar, +#window[data-radius_size="reduce"] #me > .fakeme.avatar { + border-radius: 0px; +} + +#arena.mobile.oblongcard:not(.chess):not(.textequip) .player[data-position="0"] > .equips > .equip1, +#arena.mobile.oblongcard:not(.chess):not(.textequip) .player[data-position="0"] > .equips > .equip2 { + top: 20px; +} +#arena.mobile.oblongcard:not(.chess):not(.textequip) .player[data-position="0"] > .equips > .equip3, +#arena.mobile.oblongcard:not(.chess):not(.textequip) .player[data-position="0"] > .equips > .equip4, +#arena.mobile.oblongcard:not(.chess):not(.textequip) .player[data-position="0"] > .equips > .equip6 { + bottom: 20px; +} + +#arena.mobile.oblongcard.textequip:not(.chess) .player[data-position="0"] .equips > .removing { + margin-top: -14px !important; + margin-bottom: -14px !important; + transform: scale(1); +} + +#arena.mobile.oblongcard:not(.chess) #handcards1 { + height: 100%; + top: 2px; +} +#arena.mobile.oblongcard:not(.chess) > .card, +#arena.mobile.oblongcard:not(.chess) .handcards > .card { + height: 120px; +} +#arena.mobile.oblongcard:not(.chess) > .card > .image, +#arena.mobile.oblongcard:not(.chess) .handcards > .card > .image { + height: 110px; + top: 8px; + background-position-x: -3px; +} + +#arena.phone.oblongcard:not(.chess):not(.nome) { + height: calc(97% + 10px); +} diff --git a/layout/mode/boss.css b/layout/mode/boss.css index 217064848..8e1a230a2 100644 --- a/layout/mode/boss.css +++ b/layout/mode/boss.css @@ -1,184 +1,184 @@ -#bosslist { - width: 100%; - height: 260px; - text-align: center; - top: calc(50% - 200px); - top: 60px; - white-space: nowrap; - z-index: 1; - overflow-x: scroll; -} - -#window[data-radius_size='reduce'] #bosslist>.player { - border-radius: 4px; -} - -#window[data-radius_size='off'] #bosslist>.player { - border-radius: 0px; -} - -#window[data-radius_size='increase'] #bosslist>.player { - border-radius: 20px; -} - -#window #bosslist>.player { - border-radius: 10px; -} - -#window[data-player_border='normal'] #bosslist>.player>.avatar { - left: 8px; - top: 8px; - width: 164px; - height: 200px; -} - -#window[data-player_border='slim'] #bosslist>.player>.avatar { - left: 4px; - top: 4px; - width: 172px; - height: 208px; -} - -.bosspaused>#bosslist, -.bosspaused>#control, -.bosspaused>.dialog.bosscharacter { - opacity: 0.2 !important; -} - -#bosslist.hidden>.player { - transition: all 0s; -} - -#bosslist>div:first-child, -#bosslist>div:last-child { - width: 20px; - position: relative; -} - -#bosslist>.player .identity { - align-items: flex-start; - width: min-content; -} - -#bosslist>.player .identity>div { - writing-mode: vertical-rl; - -webkit-writing-mode: vertical-rl; -} - -#window:not(.nopointer) #bosslist>.player { - cursor: pointer; -} - -.dialog.bosscharacter .buttons .button.selectable { - cursor: pointer; -} - -.dialog.bosscharacter .buttons .button:not(.selectable) { - opacity: 0.6 -} - -.player.bossplayer.bossing { - position: absolute; -} - -.player.bossing .avatar { - transition: all 0.5s; -} - -.player.bossplayer.highlight { - transform: scale(1.1); - opacity: 1; -} - -#bosslist.removing>.player.bossplayer.highlight { - transition: all 0s; - opacity: 0; -} - -.player.bossplayer { - position: relative; - margin: 10px; - left: 0; - top: 4px; - width: 180px; - height: 216px; - transition: all 0.3s; - opacity: 0.6; - animation: game_start 0.5s; - -webkit-animation: game_start 0.5s; -} - -.player.bossplayer>div:not(.hp):not(.identity):not(.avatar):not(.framebg) { - display: none !important; -} - -.player.bossplayer>.identity { - left: 16px; - top: 18px; - line-height: 24px; - white-space: normal; -} - -.player.bossplayer>.hp { - top: 22px; - left: 144px; -} - -.player.bossplayer>.avatar { - width: 160px; - height: 196px; -} - -#control.bosslist { - top: calc(100% - 50px) !important; - position: fixed; -} - -.dialog.bosscharacter { - top: auto; - bottom: 65px; - height: calc(100% - 383px); - animation: dialog_start2 0.5s; - -webkit-animation: dialog_start2 0.5s; -} - -.bosschongzheng { - width: calc(100% - 20px); - white-space: nowrap; - position: relative; -} - -.bosschongzheng div { - position: relative; -} - -.bosschongzheng>div { - width: 100%; - display: block; - margin-bottom: 5px; -} - -.bosschongzheng>div>div:first-child { - text-align: left; - width: 30%; -} - -.bosschongzheng>div>div:last-child { - text-align: right; - width: 70%; -} - -@media screen and (min-height: 800px) { - .dialog.bosscharacter { - height: 417px; - bottom: calc(50% - 335px); - } - - #control.bosslist { - top: calc(50% + 350px) !important; - } - - #bosslist { - top: calc(40% - 260px); - } -} \ No newline at end of file +#bosslist { + width: 100%; + height: 260px; + text-align: center; + top: calc(50% - 200px); + top: 60px; + white-space: nowrap; + z-index: 1; + overflow-x: scroll; +} + +#window[data-radius_size="reduce"] #bosslist > .player { + border-radius: 4px; +} + +#window[data-radius_size="off"] #bosslist > .player { + border-radius: 0px; +} + +#window[data-radius_size="increase"] #bosslist > .player { + border-radius: 20px; +} + +#window #bosslist > .player { + border-radius: 10px; +} + +#window[data-player_border="normal"] #bosslist > .player > .avatar { + left: 8px; + top: 8px; + width: 164px; + height: 200px; +} + +#window[data-player_border="slim"] #bosslist > .player > .avatar { + left: 4px; + top: 4px; + width: 172px; + height: 208px; +} + +.bosspaused > #bosslist, +.bosspaused > #control, +.bosspaused > .dialog.bosscharacter { + opacity: 0.2 !important; +} + +#bosslist.hidden > .player { + transition: all 0s; +} + +#bosslist > div:first-child, +#bosslist > div:last-child { + width: 20px; + position: relative; +} + +#bosslist > .player .identity { + align-items: flex-start; + width: min-content; +} + +#bosslist > .player .identity > div { + writing-mode: vertical-rl; + -webkit-writing-mode: vertical-rl; +} + +#window:not(.nopointer) #bosslist > .player { + cursor: pointer; +} + +.dialog.bosscharacter .buttons .button.selectable { + cursor: pointer; +} + +.dialog.bosscharacter .buttons .button:not(.selectable) { + opacity: 0.6; +} + +.player.bossplayer.bossing { + position: absolute; +} + +.player.bossing .avatar { + transition: all 0.5s; +} + +.player.bossplayer.highlight { + transform: scale(1.1); + opacity: 1; +} + +#bosslist.removing > .player.bossplayer.highlight { + transition: all 0s; + opacity: 0; +} + +.player.bossplayer { + position: relative; + margin: 10px; + left: 0; + top: 4px; + width: 180px; + height: 216px; + transition: all 0.3s; + opacity: 0.6; + animation: game_start 0.5s; + -webkit-animation: game_start 0.5s; +} + +.player.bossplayer > div:not(.hp):not(.identity):not(.avatar):not(.framebg) { + display: none !important; +} + +.player.bossplayer > .identity { + left: 16px; + top: 18px; + line-height: 24px; + white-space: normal; +} + +.player.bossplayer > .hp { + top: 22px; + left: 144px; +} + +.player.bossplayer > .avatar { + width: 160px; + height: 196px; +} + +#control.bosslist { + top: calc(100% - 50px) !important; + position: fixed; +} + +.dialog.bosscharacter { + top: auto; + bottom: 65px; + height: calc(100% - 383px); + animation: dialog_start2 0.5s; + -webkit-animation: dialog_start2 0.5s; +} + +.bosschongzheng { + width: calc(100% - 20px); + white-space: nowrap; + position: relative; +} + +.bosschongzheng div { + position: relative; +} + +.bosschongzheng > div { + width: 100%; + display: block; + margin-bottom: 5px; +} + +.bosschongzheng > div > div:first-child { + text-align: left; + width: 30%; +} + +.bosschongzheng > div > div:last-child { + text-align: right; + width: 70%; +} + +@media screen and (min-height: 800px) { + .dialog.bosscharacter { + height: 417px; + bottom: calc(50% - 335px); + } + + #control.bosslist { + top: calc(50% + 350px) !important; + } + + #bosslist { + top: calc(40% - 260px); + } +} diff --git a/layout/mode/chess.css b/layout/mode/chess.css index 69b4d82c9..bbc293c54 100644 --- a/layout/mode/chess.css +++ b/layout/mode/chess.css @@ -1,345 +1,346 @@ -#arena.chess{ - width:100% !important; - height:100% !important; - left:0 !important; - top:0 !important; - transition:all 0s !important; -} -#arena.chess>#me, -#arena.chess>#mebg, -#arena.chess>#autonode{ - bottom:0; - top:auto; - border-radius:0; -} -#arena.chess>#autonode{ - width: calc(100% - 240px); - left: 120px; -} -#me>.fakeme.avatar { - width: 120px; - height: 120px; - border-radius: 0px; - top: 0; - left: 0; - background-size: cover; - clip-path: polygon(-10px 0, 130px 0, 130px 130px, -10px 130px); - -webkit-clip-path: polygon(-10px 0, 130px 0, 130px 130px, -10px 130px); -} -#window:not(.nopointer) .dialog.fullheight .buttons .button.character:not(.squarebutton):not(.selectable){ - cursor: default; -} -#window:not(.nopointer) .obstacle.glow, -#window:not(.nopointer) .player.playerblank.glow{ - cursor: pointer; -} -#chess-container{ - width:100%; - height :calc(100% - 121px); - left:0; - top:0; - overflow:hidden; - text-align:center; - position: absolute; -} -#chess{ - margin-top:36px; - margin-bottom:36px; - position: absolute; - left: 0; - top: 0; - transition: all 0s; -} -#arena .card.thrown{ - z-index:4; -} -#canvas2{ - position: absolute; - z-index: 10; - pointer-events: none; -} - -#handcards1{ - height:120px; - padding:0; - top:calc(100% - 120px); - width:calc(100% - 240px); - left:120px; -} -#handcards2{ - display:none; -} -#mebg,#me,#autonode{ - height:120px; -} -#window:not(.nopointer) .dialog.pointerbutton .buttons .button:not(.unselectable){ - cursor: pointer !important; -} -#system{ - z-index:5; -} -#arena>.dialog{ - width:400px; - height:240px; - left:calc(50% - 200px); - top:calc(50% - 120px); - background: rgba(0,0,0,0.2); - box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px; - border-radius:8px; -} -#arena.chess>.dialog{ - height: calc(50% - 20px); - max-height: 240px; -} -#window[data-radius_size='reduce']>.dialog{ - border-radius:4px; -} -#window[data-radius_size='off']>.dialog{ - border-radius:0px; -} -#window[data-radius_size='increase']>.dialog{ - border-radius:16px; -} -#arena>.dialog.slim:not(.center){ - top:40px; - pointer-events: none; -} -#control{ - top:calc(100% - 155px); -} -#arena.ipad #control{ - top:calc(100% - 165px); -} -.fakeme{ - width:120px; - height:120px; - border-radius:0px !important; - top:0; -} -#window[data-radius_size='increase'] .fakeme, -#window[data-radius_size='reduce'] .fakeme{ - border-radius:0px; -} -.fakeme.avatar{ - left:0; - background-size:cover; -} -.fakeme.player{ - left:calc(100% - 120px); - text-align:center; - transition: all 0s; - clip-path: polygon(-10px 0, 130px 0, 130px 130px, -10px 130px); - -webkit-clip-path: polygon(-10px 0, 130px 0, 130px 130px, -10px 130px); -} -.fakeme.player.zoomed{ - width: 240px; - height: 240px; - left:calc(100% - 240px); - top:calc(100% - 240px); - background-size:200%; -} -.fakeme.player>div{ - width: 100%; - height: 100%; - margin: 0; - padding: 0; - overflow: scroll; - left: 0; - top: 0; -} -.fakeme.player.zoomed>div>div{ - width: 90px; - height: 90px; - left: 0; - top: 16px; - margin-left: 8px; - margin-right: 8px; - margin-bottom: 16px; -} -.fakeme.player>div>div{ - width:45px; - height:45px; - background-size:cover; - border-radius:4px; - position:relative; - left:0; - top:8px; - margin-left: 4px; - margin-right: 4px; - margin-bottom: 8px; - transition:box-shadow 0.5s; -} -#window:not(.nopointer) .fakeme.player>div>div{ - cursor: pointer; -} - -.fakeme.player>div>.selectable{ - box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(0, 133, 255, 1) 0 0 5px, rgba(0, 133, 255, 1) 0 0 10px; -} -.fakeme.player>div>.selected{ - box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(255, 0, 0, 1) 0 0 5px, rgba(255, 0, 0, 1) 0 0 10px !important; -} -.fakeme.player>div>.dead{ - filter:grayscale(1); - -webkit-filter:grayscale(1); - opacity:0.5; -} -.card.drawing{ - animation: drawing2 1s; - animation-fill-mode: forwards; - -webkit-animation: drawing2 1s; - -webkit-animation-fill-mode: forwards; -} - -.player.playergrid,.player.obstacle{ - background: rgba(0,0,0,0.2); - box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px; - border-radius:8px; -} -#window[data-radius_size='reduce'] .player.playergrid, -#window[data-radius_size='reduce'] .player.obstacle{ - border-radius:4px; -} -#window[data-radius_size='off'] .player.playergrid, -#window[data-radius_size='off'] .player.obstacle{ - border-radius:0px; -} -#window[data-radius_size='increase'] .player.playergrid, -#window[data-radius_size='increase'] .player.obstacle{ - border-radius:16px; -} -.player.playerblank{ - background: none; -} -#window .player.obstacle{ - background: repeating-linear-gradient( - 135deg, - rgba(0,0,0,0.2), - rgba(0,0,0,0.2) 10px, - rgba(0,0,0,0.1) 10px, - rgba(0,0,0,0.1) 20px - ); -} -#window .player.obstacle[data-obscolor='blue']{ - background: repeating-linear-gradient( - 135deg, - rgba(0, 64, 162, 0.4), - rgba(0, 64, 162, 0.4) 10px, - rgba(0, 0, 0, 0) 10px, - rgba(0, 0, 0, 0) 20px - ); - box-shadow: rgba(0, 64, 162, 0.6) 0 0 0 1px; -} - -.playergrid.temp{ - opacity:0.3; -} -.chessscroll{ - height:calc(100% - 162px); - width:20px; - top:42px; - z-index:1; - position:fixed; -} -.chessscroll.left{ - left:0; -} -.chessscroll.right{ - right:0; -} -.button.forbidden{ - opacity:0.6 -} -#arena.leaderhide>*:not(canvas){ - opacity:0 !important; - transition: all 0.5s !important; - pointer-events: none; -} -#arena.leadercontrol>#control{ - transition: all 0.5s !important; -} -/* .player.treasure{ */ - /*box-shadow: none;*/ -/* } */ -.player.treasure .count, -.player.treasure .identity{ - display: none; -} -.player.treasure .avatar{ - width: 120px; - height: 120px; - left: 0; - top: 0; -} -.player.minskin .action{ - text-shadow: black 0 0 1px !important; - font-size: 16px !important; - left:0; -} -.player .action.thunder{ - color: rgb(117,186,255); -} -#arena.selecting .player .action:not(.hidden){ - opacity: 1 !important; -} -.button .intro.showintro.tafang{ - font-family: 'xinwei'; - font-size: 20px; - top: 66px; - right: 5px; - left:auto; -} -.button.newstyle .intro.showintro.tafang{ - top: 6px; -} -.dialog .buttons>.button.character.squarebutton{ - height:90px; -} -.dialog .buttons>.button.character.squarebutton>.hp.text{ - /*left:22px;*/ - right: 4px; - text-align: right; - bottom: 4px; - top: auto; - left: auto; -} -.dialog .buttons>.button.character.squarebutton>.name{ - top:8px; -} -br.finish_game{ - display: none; -} - - -#arena.chess.slim_player.lslim_player .player.minskin:not(.fakeme)>.avatar:not(.fakeme){ - left: 5px; - top: 5px; - width: calc(100% - 10px); - height: calc(100% - 10px); -} - -#arena.chess #chess>.player{ - left: 14px; - top: 14px; -} - - -#window.rightbar #system, -#window.leftbar #system{ - width: calc(100% - 62px); -} -#window.leftbar #system{ - left: 50px; -} - -#historybar { - border-radius: 0; - top: 0; - height: calc(100% - 121px); -} -#window.rightbar #historybar{ - left: calc(100% - 50px); -} -#window.leftbar #historybar{ - left: 0; -} \ No newline at end of file +#arena.chess { + width: 100% !important; + height: 100% !important; + left: 0 !important; + top: 0 !important; + transition: all 0s !important; +} +#arena.chess > #me, +#arena.chess > #mebg, +#arena.chess > #autonode { + bottom: 0; + top: auto; + border-radius: 0; +} +#arena.chess > #autonode { + width: calc(100% - 240px); + left: 120px; +} +#me > .fakeme.avatar { + width: 120px; + height: 120px; + border-radius: 0px; + top: 0; + left: 0; + background-size: cover; + clip-path: polygon(-10px 0, 130px 0, 130px 130px, -10px 130px); + -webkit-clip-path: polygon(-10px 0, 130px 0, 130px 130px, -10px 130px); +} +#window:not(.nopointer) .dialog.fullheight .buttons .button.character:not(.squarebutton):not(.selectable) { + cursor: default; +} +#window:not(.nopointer) .obstacle.glow, +#window:not(.nopointer) .player.playerblank.glow { + cursor: pointer; +} +#chess-container { + width: 100%; + height: calc(100% - 121px); + left: 0; + top: 0; + overflow: hidden; + text-align: center; + position: absolute; +} +#chess { + margin-top: 36px; + margin-bottom: 36px; + position: absolute; + left: 0; + top: 0; + transition: all 0s; +} +#arena .card.thrown { + z-index: 4; +} +#canvas2 { + position: absolute; + z-index: 10; + pointer-events: none; +} + +#handcards1 { + height: 120px; + padding: 0; + top: calc(100% - 120px); + width: calc(100% - 240px); + left: 120px; +} +#handcards2 { + display: none; +} +#mebg, +#me, +#autonode { + height: 120px; +} +#window:not(.nopointer) .dialog.pointerbutton .buttons .button:not(.unselectable) { + cursor: pointer !important; +} +#system { + z-index: 5; +} +#arena > .dialog { + width: 400px; + height: 240px; + left: calc(50% - 200px); + top: calc(50% - 120px); + background: rgba(0, 0, 0, 0.2); + box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px; + border-radius: 8px; +} +#arena.chess > .dialog { + height: calc(50% - 20px); + max-height: 240px; +} +#window[data-radius_size="reduce"] > .dialog { + border-radius: 4px; +} +#window[data-radius_size="off"] > .dialog { + border-radius: 0px; +} +#window[data-radius_size="increase"] > .dialog { + border-radius: 16px; +} +#arena > .dialog.slim:not(.center) { + top: 40px; + pointer-events: none; +} +#control { + top: calc(100% - 155px); +} +#arena.ipad #control { + top: calc(100% - 165px); +} +.fakeme { + width: 120px; + height: 120px; + border-radius: 0px !important; + top: 0; +} +#window[data-radius_size="increase"] .fakeme, +#window[data-radius_size="reduce"] .fakeme { + border-radius: 0px; +} +.fakeme.avatar { + left: 0; + background-size: cover; +} +.fakeme.player { + left: calc(100% - 120px); + text-align: center; + transition: all 0s; + clip-path: polygon(-10px 0, 130px 0, 130px 130px, -10px 130px); + -webkit-clip-path: polygon(-10px 0, 130px 0, 130px 130px, -10px 130px); +} +.fakeme.player.zoomed { + width: 240px; + height: 240px; + left: calc(100% - 240px); + top: calc(100% - 240px); + background-size: 200%; +} +.fakeme.player > div { + width: 100%; + height: 100%; + margin: 0; + padding: 0; + overflow: scroll; + left: 0; + top: 0; +} +.fakeme.player.zoomed > div > div { + width: 90px; + height: 90px; + left: 0; + top: 16px; + margin-left: 8px; + margin-right: 8px; + margin-bottom: 16px; +} +.fakeme.player > div > div { + width: 45px; + height: 45px; + background-size: cover; + border-radius: 4px; + position: relative; + left: 0; + top: 8px; + margin-left: 4px; + margin-right: 4px; + margin-bottom: 8px; + transition: box-shadow 0.5s; +} +#window:not(.nopointer) .fakeme.player > div > div { + cursor: pointer; +} + +.fakeme.player > div > .selectable { + box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(0, 133, 255, 1) 0 0 5px, rgba(0, 133, 255, 1) 0 0 10px; +} +.fakeme.player > div > .selected { + box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(255, 0, 0, 1) 0 0 5px, rgba(255, 0, 0, 1) 0 0 10px !important; +} +.fakeme.player > div > .dead { + filter: grayscale(1); + -webkit-filter: grayscale(1); + opacity: 0.5; +} +.card.drawing { + animation: drawing2 1s; + animation-fill-mode: forwards; + -webkit-animation: drawing2 1s; + -webkit-animation-fill-mode: forwards; +} + +.player.playergrid, +.player.obstacle { + background: rgba(0, 0, 0, 0.2); + box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px; + border-radius: 8px; +} +#window[data-radius_size="reduce"] .player.playergrid, +#window[data-radius_size="reduce"] .player.obstacle { + border-radius: 4px; +} +#window[data-radius_size="off"] .player.playergrid, +#window[data-radius_size="off"] .player.obstacle { + border-radius: 0px; +} +#window[data-radius_size="increase"] .player.playergrid, +#window[data-radius_size="increase"] .player.obstacle { + border-radius: 16px; +} +.player.playerblank { + background: none; +} +#window .player.obstacle { + background: repeating-linear-gradient( + 135deg, + rgba(0, 0, 0, 0.2), + rgba(0, 0, 0, 0.2) 10px, + rgba(0, 0, 0, 0.1) 10px, + rgba(0, 0, 0, 0.1) 20px + ); +} +#window .player.obstacle[data-obscolor="blue"] { + background: repeating-linear-gradient( + 135deg, + rgba(0, 64, 162, 0.4), + rgba(0, 64, 162, 0.4) 10px, + rgba(0, 0, 0, 0) 10px, + rgba(0, 0, 0, 0) 20px + ); + box-shadow: rgba(0, 64, 162, 0.6) 0 0 0 1px; +} + +.playergrid.temp { + opacity: 0.3; +} +.chessscroll { + height: calc(100% - 162px); + width: 20px; + top: 42px; + z-index: 1; + position: fixed; +} +.chessscroll.left { + left: 0; +} +.chessscroll.right { + right: 0; +} +.button.forbidden { + opacity: 0.6; +} +#arena.leaderhide > *:not(canvas) { + opacity: 0 !important; + transition: all 0.5s !important; + pointer-events: none; +} +#arena.leadercontrol > #control { + transition: all 0.5s !important; +} +/* .player.treasure{ */ +/*box-shadow: none;*/ +/* } */ +.player.treasure .count, +.player.treasure .identity { + display: none; +} +.player.treasure .avatar { + width: 120px; + height: 120px; + left: 0; + top: 0; +} +.player.minskin .action { + text-shadow: black 0 0 1px !important; + font-size: 16px !important; + left: 0; +} +.player .action.thunder { + color: rgb(117, 186, 255); +} +#arena.selecting .player .action:not(.hidden) { + opacity: 1 !important; +} +.button .intro.showintro.tafang { + font-family: "xinwei"; + font-size: 20px; + top: 66px; + right: 5px; + left: auto; +} +.button.newstyle .intro.showintro.tafang { + top: 6px; +} +.dialog .buttons > .button.character.squarebutton { + height: 90px; +} +.dialog .buttons > .button.character.squarebutton > .hp.text { + /*left:22px;*/ + right: 4px; + text-align: right; + bottom: 4px; + top: auto; + left: auto; +} +.dialog .buttons > .button.character.squarebutton > .name { + top: 8px; +} +br.finish_game { + display: none; +} + +#arena.chess.slim_player.lslim_player .player.minskin:not(.fakeme) > .avatar:not(.fakeme) { + left: 5px; + top: 5px; + width: calc(100% - 10px); + height: calc(100% - 10px); +} + +#arena.chess #chess > .player { + left: 14px; + top: 14px; +} + +#window.rightbar #system, +#window.leftbar #system { + width: calc(100% - 62px); +} +#window.leftbar #system { + left: 50px; +} + +#historybar { + border-radius: 0; + top: 0; + height: calc(100% - 121px); +} +#window.rightbar #historybar { + left: calc(100% - 50px); +} +#window.leftbar #historybar { + left: 0; +} diff --git a/layout/mode/stone.css b/layout/mode/stone.css index f43c03880..75005323b 100644 --- a/layout/mode/stone.css +++ b/layout/mode/stone.css @@ -1,514 +1,513 @@ -#arena.stone>.player.minskin[data-position='4'] { - top: calc(100% - 305px); - left: calc(100% - 120px); -} - -#arena.stone>.card[data-position='4'] { - top: calc(100% - 297px); - left: calc(100% - 112px); -} - -#arena.stone>.popup[data-position='4'] { - top: calc(100% - 340px); - left: calc(100% - 112px); -} - -#arena.stone>.player.minskin[data-position='6'] { - top: calc(100% - 305px); - left: calc(100% - 260px); -} - -#arena.stone>.card[data-position='6'] { - top: calc(100% - 297px); - left: calc(100% - 252px); -} - -#arena.stone>.popup[data-position='6'] { - top: calc(100% - 340px); - left: calc(100% - 252px); -} - -#arena.stone>.player.minskin[data-position='7'] { - top: calc(100% - 305px); - left: 140px; -} - -#arena.stone>.card[data-position='7'] { - top: calc(100% - 297px); - left: 148px; -} - -#arena.stone>.popup[data-position='7'] { - top: calc(100% - 340px); - left: 148px; -} - -#arena.stone>.player.minskin[data-position='5'] { - top: calc(100% - 305px); - left: 0; -} - -#arena.stone>.card[data-position='5'] { - top: calc(100% - 297px); - left: 8px; -} - -#arena.stone>.popup[data-position='5'] { - top: calc(100% - 340px); - left: 8px; -} - -#arena.stone>.player.minskin[data-position='9'] { - top: 30px; - left: calc(100% - 120px); -} - -#arena.stone>.card[data-position='9'] { - top: 38px; - left: calc(100% - 112px); -} - -#arena.stone>.popup[data-position='9'] { - top: 160px; - left: calc(100% - 112px); -} - -#arena.stone>.player.minskin[data-position='11'] { - top: 10px; - left: calc(100% - 260px); -} - -#arena.stone>.card[data-position='11'] { - top: 18px; - left: calc(100% - 252px); -} - -#arena.stone>.popup[data-position='11'] { - top: 140px; - left: calc(100% - 252px); -} - -#arena.stone>.player.minskin[data-position='10'] { - top: 10px; - left: 140px; -} - -#arena.stone>.card[data-position='10'] { - top: 18px; - left: 148px; -} - -#arena.stone>.popup[data-position='10'] { - top: 140px; - left: 148px; -} - -#arena.stone>.player.minskin[data-position='8'] { - top: 30px; - left: 0; -} - -#arena.stone>.card[data-position='8'] { - top: 38px; - left: 8px; -} - -#arena.stone>.popup[data-position='8'] { - top: 160px; - left: 8px; -} - -#arena:not(.chess).mobile>.player[data-position='0']>.name { - top: 30px; -} - -#arena .player>.name { - top: 36px; -} - -#arena.slim_player .player>.name { - top: 33px; -} - -#arena .player.linked>.name { - transform: rotate(90deg) translate(120px, -96px); -} - -#arena .player.linked>.name.name2 { - transform: rotate(90deg) translate(98px, -31px); -} - -#arena.oldlayout .player.linked>.name { - transform: none !important; -} - -#arena.oldlayout .player.linked>.name.name2 { - transform: none !important; -} - -.player.minskin .judges { - top: 14px; -} - -.player>.identity.menubutton.round { - padding: 0; - transform: scale(1.2) translate(-2px, 2px); -} - -.card .wunature { - top: 74px; - left: 6px; - right: auto; -} - -/* .player .equips{ */ -/*z-index: 4;*/ -/* } */ - -#arena:not(.chess).mobile .player[data-position='0']:not(.minskin)>.identity { - left: 100px; - top: -7px; -} - -#deck-builder { - overflow: hidden; -} - -#deck-builder>.shadowed.list { - width: 200px; - height: 100%; - right: 0; - top: 0; - border-radius: 0px; - transform: translateX(200px); - opacity: 0; -} - -#deck-builder.shown>.shadowed.list { - transform: none; - opacity: 1; -} - -#deck-builder>.shadowed.list>.menubutton.large.create { - position: absolute; - bottom: 10px; - left: auto; - right: 10px; - margin: 0; - padding: 0; - width: 180px; - height: 50px; - font-size: 36px; - line-height: 50px; - z-index: 2; -} - -#deck-builder>.shadowed.list>.list-container { - width: 100%; - left: 0; - height: calc(100% - 60px); - overflow-y: scroll; - overflow-x: visible; - text-align: left; -} - -#deck-builder>.shadowed.list>.list-container:not(.deck) { - z-index: 1; -} - -#deck-builder>.shadowed.list>.list-container.deck { - pointer-events: none; - opacity: 0; -} - -#deck-builder>.shadowed.list>.list-container.deck.shown { - pointer-events: auto; - opacity: 1; -} - -#deck-builder>.shadowed.list>.list-container.deck>.card { - zoom: 0.8; - margin-bottom: 15px; - margin-top: 0; - transition: all 0s; -} - -#deck-builder>.shadowed.list>.list-container.deck>.card:nth-child(2n+1) { - margin-left: 15px; -} - -#deck-builder>.shadowed.list>.list-container.deck>.card:nth-child(2n) { - margin-left: 7px; -} - -#deck-builder>.shadowed.list>.list-container.deck>.card:first-child, -#deck-builder>.shadowed.list>.list-container.deck>.card:first-child+div { - margin-top: 15px; -} - -.deckitem { - position: relative; - width: 170px; - margin-left: 15px; - margin-right: 0; - padding-left: 0; - padding-right: 0; - padding-top: 5px; - padding-bottom: 5px; - margin-top: 15px; - margin-bottom: 0px; - text-align: left; - font-size: 24px; - line-height: 30px; - font-family: 'xinwei'; - border-radius: 40px 4px 4px 40px; - background-size: cover; - white-space: nowrap; - transition: all 0s; -} - -#window:not(.nopointer) .deckitem, -#window:not(.nopointer) #deck-builder>.shadowed.list>.menubutton.large.create, -#window:not(.nopointer) #deck-builder>.controls>div:not(*:last-child) { - cursor: pointer; -} - -.dialog .deckitem { - margin-left: 8px; - margin-right: 9px; -} - -.deckitem.random { - border-radius: 4px; - text-align: center; -} - -.deckitem.random>span { - margin-left: 0; -} - -.deckitem:last-child { - margin-bottom: 15px; -} - -.deckitem>span { - margin-left: 46px; -} - -.deckitem>.menubutton.round { - position: absolute; - left: -1px; - top: -2px; - width: 34px; - height: 34px; -} - -#deck-builder>.shadowed.career { - width: 240px; - height: 240px; - right: 220px; - bottom: 20px; - opacity: 0; - transform: scale(0) translateX(300px); - transform-origin: right bottom; - transition-duration: 0.3s; - z-index: 8; -} - -#deck-builder>.shadowed.career.shown { - transform: scale(1) translateX(0); - opacity: 1; -} - -#deck-builder>.shadowed.career>div { - width: 80px; - height: 80px; - margin: 0; - padding: 0; - position: relative; - display: inline-block; -} - -#deck-builder>.shadowed.career>div>.menubutton.round { - left: 15px; - top: 5px; -} - -#deck-builder>.shadowed.career>div>.text { - font-size: 12px; - width: 100%; - text-align: center; - top: 58px; -} - -#deck-builder>.dialog.fixed { - left: auto; - right: 240px; - width: calc(100% - 280px); - /*opacity: 0;*/ - animation: none; - -webkit-animation: none; - /*transform: scale(0.8);*/ - /*pointer-events: none;*/ - /*-webkit-animation:dialog_start2 0.5s;*/ - transition: all 0.5s; -} - -#deck-builder:not(.shown)>.dialog.fixed { - opacity: 0; - transform: scale(0.8); - pointer-events: none; -} - -#deck-builder>.dialog.fixed.shown { - opacity: 1; - transform: scale(1); - pointer-events: auto; -} - -#deck-builder>.controls { - opacity: 0; - height: 50px; - width: calc(100% - 200px); - bottom: 10px; - left: 0; - text-align: right; - z-index: 9; - pointer-events: none; -} - -#deck-builder>.controls>div { - position: relative; - margin-top: 5px; - margin-left: 5px; - margin-right: 5px; -} - -#deck-builder>.controls>.card-count { - position: absolute; - width: 100px; - height: 100%; - left: calc(50% - 50px); - text-align: center; - font-family: 'xinwei'; - font-size: 24px; - line-height: 50px; - margin: 0; -} - -#deck-builder>.controls>div:last-child { - margin-right: 40px; - white-space: nowrap; - user-select: text; - -webkit-user-select: text; -} - -#deck-builder>.controls.shown { - opacity: 1; - pointer-events: auto; -} - -#arena>.player.stone_deck { - transform: scale(1) translateX(100px); - opacity: 0; - transition: all 0.5s; - left: calc(5% + 50px); - top: calc(50% - 90px); -} - -#arena>.player.stone_deck.shown { - transform: scale(0.8); - opacity: 1; -} - -#arena>.player.stone_deck.shown.removing { - transform: scale(0.6) translateX(-100px); -} - -#arena>.player.stone_deck>div:not(.avatar):not(.avatar2) { - display: none !important; -} - - -/*#arena>.skillbar>.skillbartext:hover{ - opacity: 1; -}*/ -@keyframes skillbarglow { - 0% { - box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px, rgba(255, 0, 0, 0.4) 0 0 5px - } - - 50% { - box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(255, 0, 0, 0.4) 0 0 5px, - rgba(255, 0, 0, 0.4) 0 0 12px, rgba(255, 0, 0, 1) 0 0 30px, rgba(255, 0, 0, 0.2) 0 0 30px - } - - 100% { - box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px, rgba(255, 0, 0, 0.4) 0 0 5px - } -} - -@-webkit-keyframes skillbarglow { - 0% { - box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px, rgba(255, 0, 0, 0.4) 0 0 5px - } - - 50% { - box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(255, 0, 0, 0.4) 0 0 5px, - rgba(255, 0, 0, 0.4) 0 0 12px, rgba(255, 0, 0, 1) 0 0 30px, rgba(255, 0, 0, 0.2) 0 0 30px - } - - 100% { - box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px, rgba(255, 0, 0, 0.4) 0 0 5px - } -} - -div[data-career='mage'] { - background-image: url('../../image/mode/stone/career/mage.png'); - background-size: cover; -} - -div[data-career='druid'] { - background-image: url('../../image/mode/stone/career/druid.png'); - background-size: cover; -} - -div[data-career='hunter'] { - background-image: url('../../image/mode/stone/career/hunter.png'); - background-size: cover; -} - -div[data-career='shaman'] { - background-image: url('../../image/mode/stone/career/shaman.png'); - background-size: cover; -} - -div[data-career='paladin'] { - background-image: url('../../image/mode/stone/career/paladin.png'); - background-size: cover; -} - -div[data-career='rogue'] { - background-image: url('../../image/mode/stone/career/rogue.png'); - background-size: cover; -} - -div[data-career='priest'] { - background-image: url('../../image/mode/stone/career/priest.png'); - background-size: cover; -} - -div[data-career='warrior'] { - background-image: url('../../image/mode/stone/career/warrior.png'); - background-size: cover; -} - -div[data-career='warlock'] { - background-image: url('../../image/mode/stone/career/warlock.png'); - background-size: cover; -} - -div[data-career='knight'] { - background-image: url('../../image/mode/stone/career/knight.png'); - background-size: cover; -} \ No newline at end of file +#arena.stone > .player.minskin[data-position="4"] { + top: calc(100% - 305px); + left: calc(100% - 120px); +} + +#arena.stone > .card[data-position="4"] { + top: calc(100% - 297px); + left: calc(100% - 112px); +} + +#arena.stone > .popup[data-position="4"] { + top: calc(100% - 340px); + left: calc(100% - 112px); +} + +#arena.stone > .player.minskin[data-position="6"] { + top: calc(100% - 305px); + left: calc(100% - 260px); +} + +#arena.stone > .card[data-position="6"] { + top: calc(100% - 297px); + left: calc(100% - 252px); +} + +#arena.stone > .popup[data-position="6"] { + top: calc(100% - 340px); + left: calc(100% - 252px); +} + +#arena.stone > .player.minskin[data-position="7"] { + top: calc(100% - 305px); + left: 140px; +} + +#arena.stone > .card[data-position="7"] { + top: calc(100% - 297px); + left: 148px; +} + +#arena.stone > .popup[data-position="7"] { + top: calc(100% - 340px); + left: 148px; +} + +#arena.stone > .player.minskin[data-position="5"] { + top: calc(100% - 305px); + left: 0; +} + +#arena.stone > .card[data-position="5"] { + top: calc(100% - 297px); + left: 8px; +} + +#arena.stone > .popup[data-position="5"] { + top: calc(100% - 340px); + left: 8px; +} + +#arena.stone > .player.minskin[data-position="9"] { + top: 30px; + left: calc(100% - 120px); +} + +#arena.stone > .card[data-position="9"] { + top: 38px; + left: calc(100% - 112px); +} + +#arena.stone > .popup[data-position="9"] { + top: 160px; + left: calc(100% - 112px); +} + +#arena.stone > .player.minskin[data-position="11"] { + top: 10px; + left: calc(100% - 260px); +} + +#arena.stone > .card[data-position="11"] { + top: 18px; + left: calc(100% - 252px); +} + +#arena.stone > .popup[data-position="11"] { + top: 140px; + left: calc(100% - 252px); +} + +#arena.stone > .player.minskin[data-position="10"] { + top: 10px; + left: 140px; +} + +#arena.stone > .card[data-position="10"] { + top: 18px; + left: 148px; +} + +#arena.stone > .popup[data-position="10"] { + top: 140px; + left: 148px; +} + +#arena.stone > .player.minskin[data-position="8"] { + top: 30px; + left: 0; +} + +#arena.stone > .card[data-position="8"] { + top: 38px; + left: 8px; +} + +#arena.stone > .popup[data-position="8"] { + top: 160px; + left: 8px; +} + +#arena:not(.chess).mobile > .player[data-position="0"] > .name { + top: 30px; +} + +#arena .player > .name { + top: 36px; +} + +#arena.slim_player .player > .name { + top: 33px; +} + +#arena .player.linked > .name { + transform: rotate(90deg) translate(120px, -96px); +} + +#arena .player.linked > .name.name2 { + transform: rotate(90deg) translate(98px, -31px); +} + +#arena.oldlayout .player.linked > .name { + transform: none !important; +} + +#arena.oldlayout .player.linked > .name.name2 { + transform: none !important; +} + +.player.minskin .judges { + top: 14px; +} + +.player > .identity.menubutton.round { + padding: 0; + transform: scale(1.2) translate(-2px, 2px); +} + +.card .wunature { + top: 74px; + left: 6px; + right: auto; +} + +/* .player .equips{ */ +/*z-index: 4;*/ +/* } */ + +#arena:not(.chess).mobile .player[data-position="0"]:not(.minskin) > .identity { + left: 100px; + top: -7px; +} + +#deck-builder { + overflow: hidden; +} + +#deck-builder > .shadowed.list { + width: 200px; + height: 100%; + right: 0; + top: 0; + border-radius: 0px; + transform: translateX(200px); + opacity: 0; +} + +#deck-builder.shown > .shadowed.list { + transform: none; + opacity: 1; +} + +#deck-builder > .shadowed.list > .menubutton.large.create { + position: absolute; + bottom: 10px; + left: auto; + right: 10px; + margin: 0; + padding: 0; + width: 180px; + height: 50px; + font-size: 36px; + line-height: 50px; + z-index: 2; +} + +#deck-builder > .shadowed.list > .list-container { + width: 100%; + left: 0; + height: calc(100% - 60px); + overflow-y: scroll; + overflow-x: visible; + text-align: left; +} + +#deck-builder > .shadowed.list > .list-container:not(.deck) { + z-index: 1; +} + +#deck-builder > .shadowed.list > .list-container.deck { + pointer-events: none; + opacity: 0; +} + +#deck-builder > .shadowed.list > .list-container.deck.shown { + pointer-events: auto; + opacity: 1; +} + +#deck-builder > .shadowed.list > .list-container.deck > .card { + zoom: 0.8; + margin-bottom: 15px; + margin-top: 0; + transition: all 0s; +} + +#deck-builder > .shadowed.list > .list-container.deck > .card:nth-child(2n + 1) { + margin-left: 15px; +} + +#deck-builder > .shadowed.list > .list-container.deck > .card:nth-child(2n) { + margin-left: 7px; +} + +#deck-builder > .shadowed.list > .list-container.deck > .card:first-child, +#deck-builder > .shadowed.list > .list-container.deck > .card:first-child + div { + margin-top: 15px; +} + +.deckitem { + position: relative; + width: 170px; + margin-left: 15px; + margin-right: 0; + padding-left: 0; + padding-right: 0; + padding-top: 5px; + padding-bottom: 5px; + margin-top: 15px; + margin-bottom: 0px; + text-align: left; + font-size: 24px; + line-height: 30px; + font-family: "xinwei"; + border-radius: 40px 4px 4px 40px; + background-size: cover; + white-space: nowrap; + transition: all 0s; +} + +#window:not(.nopointer) .deckitem, +#window:not(.nopointer) #deck-builder > .shadowed.list > .menubutton.large.create, +#window:not(.nopointer) #deck-builder > .controls > div:not(*:last-child) { + cursor: pointer; +} + +.dialog .deckitem { + margin-left: 8px; + margin-right: 9px; +} + +.deckitem.random { + border-radius: 4px; + text-align: center; +} + +.deckitem.random > span { + margin-left: 0; +} + +.deckitem:last-child { + margin-bottom: 15px; +} + +.deckitem > span { + margin-left: 46px; +} + +.deckitem > .menubutton.round { + position: absolute; + left: -1px; + top: -2px; + width: 34px; + height: 34px; +} + +#deck-builder > .shadowed.career { + width: 240px; + height: 240px; + right: 220px; + bottom: 20px; + opacity: 0; + transform: scale(0) translateX(300px); + transform-origin: right bottom; + transition-duration: 0.3s; + z-index: 8; +} + +#deck-builder > .shadowed.career.shown { + transform: scale(1) translateX(0); + opacity: 1; +} + +#deck-builder > .shadowed.career > div { + width: 80px; + height: 80px; + margin: 0; + padding: 0; + position: relative; + display: inline-block; +} + +#deck-builder > .shadowed.career > div > .menubutton.round { + left: 15px; + top: 5px; +} + +#deck-builder > .shadowed.career > div > .text { + font-size: 12px; + width: 100%; + text-align: center; + top: 58px; +} + +#deck-builder > .dialog.fixed { + left: auto; + right: 240px; + width: calc(100% - 280px); + /*opacity: 0;*/ + animation: none; + -webkit-animation: none; + /*transform: scale(0.8);*/ + /*pointer-events: none;*/ + /*-webkit-animation:dialog_start2 0.5s;*/ + transition: all 0.5s; +} + +#deck-builder:not(.shown) > .dialog.fixed { + opacity: 0; + transform: scale(0.8); + pointer-events: none; +} + +#deck-builder > .dialog.fixed.shown { + opacity: 1; + transform: scale(1); + pointer-events: auto; +} + +#deck-builder > .controls { + opacity: 0; + height: 50px; + width: calc(100% - 200px); + bottom: 10px; + left: 0; + text-align: right; + z-index: 9; + pointer-events: none; +} + +#deck-builder > .controls > div { + position: relative; + margin-top: 5px; + margin-left: 5px; + margin-right: 5px; +} + +#deck-builder > .controls > .card-count { + position: absolute; + width: 100px; + height: 100%; + left: calc(50% - 50px); + text-align: center; + font-family: "xinwei"; + font-size: 24px; + line-height: 50px; + margin: 0; +} + +#deck-builder > .controls > div:last-child { + margin-right: 40px; + white-space: nowrap; + user-select: text; + -webkit-user-select: text; +} + +#deck-builder > .controls.shown { + opacity: 1; + pointer-events: auto; +} + +#arena > .player.stone_deck { + transform: scale(1) translateX(100px); + opacity: 0; + transition: all 0.5s; + left: calc(5% + 50px); + top: calc(50% - 90px); +} + +#arena > .player.stone_deck.shown { + transform: scale(0.8); + opacity: 1; +} + +#arena > .player.stone_deck.shown.removing { + transform: scale(0.6) translateX(-100px); +} + +#arena > .player.stone_deck > div:not(.avatar):not(.avatar2) { + display: none !important; +} + +/*#arena>.skillbar>.skillbartext:hover{ + opacity: 1; +}*/ +@keyframes skillbarglow { + 0% { + box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px, rgba(255, 0, 0, 0.4) 0 0 5px; + } + + 50% { + box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(255, 0, 0, 0.4) 0 0 5px, rgba(255, 0, 0, 0.4) 0 0 12px, + rgba(255, 0, 0, 1) 0 0 30px, rgba(255, 0, 0, 0.2) 0 0 30px; + } + + 100% { + box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px, rgba(255, 0, 0, 0.4) 0 0 5px; + } +} + +@-webkit-keyframes skillbarglow { + 0% { + box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px, rgba(255, 0, 0, 0.4) 0 0 5px; + } + + 50% { + box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(255, 0, 0, 0.4) 0 0 5px, rgba(255, 0, 0, 0.4) 0 0 12px, + rgba(255, 0, 0, 1) 0 0 30px, rgba(255, 0, 0, 0.2) 0 0 30px; + } + + 100% { + box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px, rgba(255, 0, 0, 0.4) 0 0 5px; + } +} + +div[data-career="mage"] { + background-image: url("../../image/mode/stone/career/mage.png"); + background-size: cover; +} + +div[data-career="druid"] { + background-image: url("../../image/mode/stone/career/druid.png"); + background-size: cover; +} + +div[data-career="hunter"] { + background-image: url("../../image/mode/stone/career/hunter.png"); + background-size: cover; +} + +div[data-career="shaman"] { + background-image: url("../../image/mode/stone/career/shaman.png"); + background-size: cover; +} + +div[data-career="paladin"] { + background-image: url("../../image/mode/stone/career/paladin.png"); + background-size: cover; +} + +div[data-career="rogue"] { + background-image: url("../../image/mode/stone/career/rogue.png"); + background-size: cover; +} + +div[data-career="priest"] { + background-image: url("../../image/mode/stone/career/priest.png"); + background-size: cover; +} + +div[data-career="warrior"] { + background-image: url("../../image/mode/stone/career/warrior.png"); + background-size: cover; +} + +div[data-career="warlock"] { + background-image: url("../../image/mode/stone/career/warlock.png"); + background-size: cover; +} + +div[data-career="knight"] { + background-image: url("../../image/mode/stone/career/knight.png"); + background-size: cover; +} diff --git a/layout/mode/story.css b/layout/mode/story.css index d0beca216..51d44f593 100644 --- a/layout/mode/story.css +++ b/layout/mode/story.css @@ -1,229 +1,230 @@ -.storyscene{ - height: 500px; - top:calc(50% - 250px); - width: 100%; - position: absolute; - left: 0; - overflow-x: scroll; - overflow-y: hidden; - text-align: center; - white-space: nowrap; -} -.storyscene.removing{ - pointer-events: none; - transform: translateY(500px); -} -.storyscene.lockscroll{ - overflow-x: hidden; -} -.storyscene>.scene{ - width: 350px; - height: 420px; - position: relative; - left: 0; - top:40px; - margin-left: -40px; - margin-right: -40px; - z-index: 1; - border-radius: 16px !important; - overflow: hidden; - box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px; -} -.storyscene>.scene>.background.player{ - border-radius: 0 !important; - box-shadow: none !important; - width: 100%; - height: 100%; - left: 0; - top: 0; - z-index: 1; -} -.storyscene>.scene.unselectable{ - opacity: 1 !important; - box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px, rgba(0, 0, 0, 0.225) 0 3px 10px; -} -.storyscene>.scene.unselectable>.background{ - opacity: 0.3; -} -.storyscene>.scene.unselectable>.name{ - opacity: 0.6; -} -.storyscene>.scene.unselectable>div:not(.mask).background{ - /*opacity: 0.25;*/ -} -.storyscene>.scene>.mask{ - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; - z-index: 3; -} -.storyscene>.scene>.mask>div{ - width: 100%; - height: 240px; - top:calc(50% - 120px); - position: absolute; - left: 0; - text-align: center; - font-size: 80px; - line-height: 80px; - font-family: 'xinwei'; - opacity: 0.8; -} -.storyscene>.scene:not(.unselectable)>.mask{ - display: none; -}.storyscene>.scene.unselectable>.name{ - /*display: none;*/ -} -.storyscene>.scene.flipped{ - z-index: 2; - border-radius: 12px !important; -} -.storyscene>.scene.flipped>div:not(.menu){ - display: none !important; -} -.storyscene>.scene:not(.flipped)>.menu{ - display: none; -} -.storyscene>.scene:first-child{ - margin-left: 50px; -} -.storyscene>.scene:last-child{ - margin-right: 50px; -} -.storyscene>.scene>.name{ - font-size: 48px; - left: 25px; - top: auto; - bottom: 28px; - /*transform: rotateY(-180deg);*/ - border-radius: 16px !important; - z-index: 2; - font-family: 'xinwei' -} -.storyscene>.scene>.menu{ - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; - box-shadow: none; - overflow: scroll; -} -.storyscene>.scene>.background>.avatar{ - width: calc(100% - 26px); - height: calc(100% - 26px); - left: 13px; - top: 13px; - z-index: 2; -} -.storyscene>.scene>.menu{ - transform: rotateY(-180deg); -} -.storyscene>.scene.startscene{ - -webkit-animation: scene_start 0.5s; -} -.scene>.menu>.menubutton.enter{ - position: absolute; - top:auto; - bottom: 10px; - width: 70px; - left: calc(50% - 35px); -} -.scene>.menu>.conversation{ - display: table; - position: absolute; - left: 16px; - top: 0; - width: calc(100% - 32px); - height: 100%; - font-size: 24px; - font-family: 'xinwei'; - white-space: normal; - text-align: left; -} -.scene>.menu>.conversation.center{ - text-align: center; - font-size: 30px; -} -.scene>.menu>.avatarconversation{ - position: relative; - display: block; - width: 100%; - height: 100px; - left: 0; - margin-top: 10px; -} -.scene>.menu>.avatarconversation:last-child{ - margin-bottom: 10px; -} -.scene>.menu>.avatarconversation>div{ - height: 100%; - top:0; -} -.scene>.menu>.avatarconversation>.avatar{ - width: 100px; - height: 100px; - left: 10px; - background-size: cover; -} -.scene>.menu>.avatarconversation.swap>.avatar{ - left: auto; - right: 10px; -} -.scene>.menu>.avatarconversation>div:not(.avatar){ - width: calc(100% - 120px); - left: 120px; - top: 5px; - height: calc(100% - 5px); - text-align: left; - white-space: normal; - line-height: 18px; -} -.scene>.menu>.avatarconversation.swap>div:not(.avatar){ - left: auto; - right: 120px; - text-align: right; -} -.scene>.menu>.conversation>div{ - display: table-cell; - vertical-align: middle; - position: relative; -} -#create-player{ - width: 400px; - height: 300px; - left: calc(50% - 200px); - top: calc(50% - 150px); - position: absolute; - -webkit-animation:dialog_start2 0.5s; -} -#create-player>div{ - position: absolute; -} -#create-player>.caption{ - width: 100%; - height: 24px; - line-height: 24px; - left: 0; - top: 0; - font-family: 'xinwei'; - font-size: 24px; - text-align: center; -} - -@-webkit-keyframes scene_start{ - from{ - opacity: 0; - transform:scale(0.5); - margin-left: -175px; - margin-right: -175px; - } - to{ - opacity: 1; - transform: scale(1); - margin-left: 16px; - margin-right: 16px; - } -} +.storyscene { + height: 500px; + top: calc(50% - 250px); + width: 100%; + position: absolute; + left: 0; + overflow-x: scroll; + overflow-y: hidden; + text-align: center; + white-space: nowrap; +} +.storyscene.removing { + pointer-events: none; + transform: translateY(500px); +} +.storyscene.lockscroll { + overflow-x: hidden; +} +.storyscene > .scene { + width: 350px; + height: 420px; + position: relative; + left: 0; + top: 40px; + margin-left: -40px; + margin-right: -40px; + z-index: 1; + border-radius: 16px !important; + overflow: hidden; + box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px; +} +.storyscene > .scene > .background.player { + border-radius: 0 !important; + box-shadow: none !important; + width: 100%; + height: 100%; + left: 0; + top: 0; + z-index: 1; +} +.storyscene > .scene.unselectable { + opacity: 1 !important; + box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px, rgba(0, 0, 0, 0.225) 0 3px 10px; +} +.storyscene > .scene.unselectable > .background { + opacity: 0.3; +} +.storyscene > .scene.unselectable > .name { + opacity: 0.6; +} +.storyscene > .scene.unselectable > div:not(.mask).background { + /*opacity: 0.25;*/ +} +.storyscene > .scene > .mask { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 3; +} +.storyscene > .scene > .mask > div { + width: 100%; + height: 240px; + top: calc(50% - 120px); + position: absolute; + left: 0; + text-align: center; + font-size: 80px; + line-height: 80px; + font-family: "xinwei"; + opacity: 0.8; +} +.storyscene > .scene:not(.unselectable) > .mask { + display: none; +} +.storyscene > .scene.unselectable > .name { + /*display: none;*/ +} +.storyscene > .scene.flipped { + z-index: 2; + border-radius: 12px !important; +} +.storyscene > .scene.flipped > div:not(.menu) { + display: none !important; +} +.storyscene > .scene:not(.flipped) > .menu { + display: none; +} +.storyscene > .scene:first-child { + margin-left: 50px; +} +.storyscene > .scene:last-child { + margin-right: 50px; +} +.storyscene > .scene > .name { + font-size: 48px; + left: 25px; + top: auto; + bottom: 28px; + /*transform: rotateY(-180deg);*/ + border-radius: 16px !important; + z-index: 2; + font-family: "xinwei"; +} +.storyscene > .scene > .menu { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + box-shadow: none; + overflow: scroll; +} +.storyscene > .scene > .background > .avatar { + width: calc(100% - 26px); + height: calc(100% - 26px); + left: 13px; + top: 13px; + z-index: 2; +} +.storyscene > .scene > .menu { + transform: rotateY(-180deg); +} +.storyscene > .scene.startscene { + -webkit-animation: scene_start 0.5s; +} +.scene > .menu > .menubutton.enter { + position: absolute; + top: auto; + bottom: 10px; + width: 70px; + left: calc(50% - 35px); +} +.scene > .menu > .conversation { + display: table; + position: absolute; + left: 16px; + top: 0; + width: calc(100% - 32px); + height: 100%; + font-size: 24px; + font-family: "xinwei"; + white-space: normal; + text-align: left; +} +.scene > .menu > .conversation.center { + text-align: center; + font-size: 30px; +} +.scene > .menu > .avatarconversation { + position: relative; + display: block; + width: 100%; + height: 100px; + left: 0; + margin-top: 10px; +} +.scene > .menu > .avatarconversation:last-child { + margin-bottom: 10px; +} +.scene > .menu > .avatarconversation > div { + height: 100%; + top: 0; +} +.scene > .menu > .avatarconversation > .avatar { + width: 100px; + height: 100px; + left: 10px; + background-size: cover; +} +.scene > .menu > .avatarconversation.swap > .avatar { + left: auto; + right: 10px; +} +.scene > .menu > .avatarconversation > div:not(.avatar) { + width: calc(100% - 120px); + left: 120px; + top: 5px; + height: calc(100% - 5px); + text-align: left; + white-space: normal; + line-height: 18px; +} +.scene > .menu > .avatarconversation.swap > div:not(.avatar) { + left: auto; + right: 120px; + text-align: right; +} +.scene > .menu > .conversation > div { + display: table-cell; + vertical-align: middle; + position: relative; +} +#create-player { + width: 400px; + height: 300px; + left: calc(50% - 200px); + top: calc(50% - 150px); + position: absolute; + -webkit-animation: dialog_start2 0.5s; +} +#create-player > div { + position: absolute; +} +#create-player > .caption { + width: 100%; + height: 24px; + line-height: 24px; + left: 0; + top: 0; + font-family: "xinwei"; + font-size: 24px; + text-align: center; +} + +@-webkit-keyframes scene_start { + from { + opacity: 0; + transform: scale(0.5); + margin-left: -175px; + margin-right: -175px; + } + to { + opacity: 1; + transform: scale(1); + margin-left: 16px; + margin-right: 16px; + } +} diff --git a/layout/mode/tafang.css b/layout/mode/tafang.css index 93afebb0c..d9460824d 100644 --- a/layout/mode/tafang.css +++ b/layout/mode/tafang.css @@ -1,247 +1,247 @@ -.storyscene{ - height: 500px; - top:calc(50% - 250px); - width: 100%; - position: absolute; - left: 0; - overflow-x: scroll; - overflow-y: hidden; - text-align: center; - white-space: nowrap; -} -.storyscene.removing{ - pointer-events: none; - transform: translateY(500px); -} -.storyscene.lockscroll{ - overflow-x: hidden; -} -.storyscene>.scene{ - width: 350px; - height: 420px; - position: relative; - left: 0; - top:40px; - margin-left: -40px; - margin-right: -40px; - z-index: 1; - border-radius: 16px !important; - overflow: hidden; - box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px; -} -.storyscene>.scene>.background.player{ - border-radius: 0 !important; - box-shadow: none !important; - width: 100%; - height: 100%; - left: 0; - top: 0; - z-index: 1; -} -.storyscene>.scene.unselectable{ - opacity: 1 !important; - box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px, rgba(0, 0, 0, 0.225) 0 3px 10px; -} -.storyscene>.scene.unselectable>.background{ - opacity: 0.3; -} -.storyscene>.scene.unselectable>.name{ - opacity: 0.6; -} -/* .storyscene>.scene.unselectable>div:not(.mask).background{ */ - /*opacity: 0.25;*/ -/* } */ -.storyscene>.scene>.mask{ - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; - z-index: 3; -} -.storyscene>.scene>.mask>div{ - width: 100%; - height: 240px; - top:calc(50% - 120px); - position: absolute; - left: 0; - text-align: center; - font-size: 80px; - line-height: 80px; - font-family: 'xinwei'; - opacity: 0.8; -} -.storyscene>.scene:not(.unselectable)>.mask{ - display: none; -} -/* .storyscene>.scene.unselectable>.name{ */ - /*display: none;*/ -/* } */ -.storyscene>.scene.flipped{ - z-index: 2; - border-radius: 12px !important; -} -.storyscene>.scene.flipped>div:not(.menu){ - display: none !important; -} -.storyscene>.scene:not(.flipped)>.menu{ - display: none; -} -.storyscene>.scene:first-child{ - margin-left: 50px; -} -.storyscene>.scene:last-child{ - margin-right: 50px; -} -.storyscene>.scene>.name{ - font-size: 48px; - left: 25px; - /*top: auto;*/ - top: 28px; - /*transform: rotateY(-180deg);*/ - border-radius: 16px !important; - z-index: 2; - font-family: 'xinwei' -} -.storyscene>.scene>.menu{ - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; - box-shadow: none; - overflow: scroll; -} -.storyscene>.scene>.background>.avatar{ - width: calc(100% - 26px); - height: calc(100% - 26px); - left: 13px; - top: 13px; - z-index: 2; -} -.storyscene>.scene>.menu{ - transform: rotateY(-180deg); -} -.storyscene>.scene.startscene{ - animation: scene_start 0.5s; - -webkit-animation: scene_start 0.5s; -} -.scene>.menu>.menubutton.enter{ - position: absolute; - top:auto; - bottom: 10px; - width: 70px; - left: calc(50% - 35px); -} -.scene>.menu>.conversation{ - display: table; - position: absolute; - left: 16px; - top: 0; - width: calc(100% - 32px); - height: 100%; - font-size: 24px; - font-family: 'xinwei'; - white-space: normal; - text-align: left; -} -.scene>.menu>.conversation.center{ - text-align: center; - font-size: 30px; -} -.scene>.menu>.avatarconversation{ - position: relative; - display: block; - width: 100%; - height: 100px; - left: 0; - margin-top: 10px; -} -.scene>.menu>.avatarconversation:last-child{ - margin-bottom: 10px; -} -.scene>.menu>.avatarconversation>div{ - height: 100%; - top:0; -} -.scene>.menu>.avatarconversation>.avatar{ - width: 100px; - height: 100px; - left: 10px; - background-size: cover; -} -.scene>.menu>.avatarconversation.swap>.avatar{ - left: auto; - right: 10px; -} -.scene>.menu>.avatarconversation>div:not(.avatar){ - width: calc(100% - 120px); - left: 120px; - top: 5px; - height: calc(100% - 5px); - text-align: left; - white-space: normal; - line-height: 18px; -} -.scene>.menu>.avatarconversation.swap>div:not(.avatar){ - left: auto; - right: 120px; - text-align: right; -} -.scene>.menu>.conversation>div{ - display: table-cell; - vertical-align: middle; - position: relative; -} -#create-player{ - width: 400px; - height: 300px; - left: calc(50% - 200px); - top: calc(50% - 150px); - position: absolute; - animation:dialog_start2 0.5s; - -webkit-animation:dialog_start2 0.5s; -} -#create-player>div{ - position: absolute; -} -#create-player>.caption{ - width: 100%; - height: 24px; - line-height: 24px; - left: 0; - top: 0; - font-family: 'xinwei'; - font-size: 24px; - text-align: center; -} - -@keyframes scene_start{ - from{ - opacity: 0; - transform:scale(0.5); - margin-left: -175px; - margin-right: -175px; - } - to{ - opacity: 1; - transform: scale(1); - margin-left: 16px; - margin-right: 16px; - } -} - -@-webkit-keyframes scene_start{ - from{ - opacity: 0; - transform:scale(0.5); - margin-left: -175px; - margin-right: -175px; - } - to{ - opacity: 1; - transform: scale(1); - margin-left: 16px; - margin-right: 16px; - } -} +.storyscene { + height: 500px; + top: calc(50% - 250px); + width: 100%; + position: absolute; + left: 0; + overflow-x: scroll; + overflow-y: hidden; + text-align: center; + white-space: nowrap; +} +.storyscene.removing { + pointer-events: none; + transform: translateY(500px); +} +.storyscene.lockscroll { + overflow-x: hidden; +} +.storyscene > .scene { + width: 350px; + height: 420px; + position: relative; + left: 0; + top: 40px; + margin-left: -40px; + margin-right: -40px; + z-index: 1; + border-radius: 16px !important; + overflow: hidden; + box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px; +} +.storyscene > .scene > .background.player { + border-radius: 0 !important; + box-shadow: none !important; + width: 100%; + height: 100%; + left: 0; + top: 0; + z-index: 1; +} +.storyscene > .scene.unselectable { + opacity: 1 !important; + box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px, rgba(0, 0, 0, 0.225) 0 3px 10px; +} +.storyscene > .scene.unselectable > .background { + opacity: 0.3; +} +.storyscene > .scene.unselectable > .name { + opacity: 0.6; +} +/* .storyscene>.scene.unselectable>div:not(.mask).background{ */ +/*opacity: 0.25;*/ +/* } */ +.storyscene > .scene > .mask { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 3; +} +.storyscene > .scene > .mask > div { + width: 100%; + height: 240px; + top: calc(50% - 120px); + position: absolute; + left: 0; + text-align: center; + font-size: 80px; + line-height: 80px; + font-family: "xinwei"; + opacity: 0.8; +} +.storyscene > .scene:not(.unselectable) > .mask { + display: none; +} +/* .storyscene>.scene.unselectable>.name{ */ +/*display: none;*/ +/* } */ +.storyscene > .scene.flipped { + z-index: 2; + border-radius: 12px !important; +} +.storyscene > .scene.flipped > div:not(.menu) { + display: none !important; +} +.storyscene > .scene:not(.flipped) > .menu { + display: none; +} +.storyscene > .scene:first-child { + margin-left: 50px; +} +.storyscene > .scene:last-child { + margin-right: 50px; +} +.storyscene > .scene > .name { + font-size: 48px; + left: 25px; + /*top: auto;*/ + top: 28px; + /*transform: rotateY(-180deg);*/ + border-radius: 16px !important; + z-index: 2; + font-family: "xinwei"; +} +.storyscene > .scene > .menu { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + box-shadow: none; + overflow: scroll; +} +.storyscene > .scene > .background > .avatar { + width: calc(100% - 26px); + height: calc(100% - 26px); + left: 13px; + top: 13px; + z-index: 2; +} +.storyscene > .scene > .menu { + transform: rotateY(-180deg); +} +.storyscene > .scene.startscene { + animation: scene_start 0.5s; + -webkit-animation: scene_start 0.5s; +} +.scene > .menu > .menubutton.enter { + position: absolute; + top: auto; + bottom: 10px; + width: 70px; + left: calc(50% - 35px); +} +.scene > .menu > .conversation { + display: table; + position: absolute; + left: 16px; + top: 0; + width: calc(100% - 32px); + height: 100%; + font-size: 24px; + font-family: "xinwei"; + white-space: normal; + text-align: left; +} +.scene > .menu > .conversation.center { + text-align: center; + font-size: 30px; +} +.scene > .menu > .avatarconversation { + position: relative; + display: block; + width: 100%; + height: 100px; + left: 0; + margin-top: 10px; +} +.scene > .menu > .avatarconversation:last-child { + margin-bottom: 10px; +} +.scene > .menu > .avatarconversation > div { + height: 100%; + top: 0; +} +.scene > .menu > .avatarconversation > .avatar { + width: 100px; + height: 100px; + left: 10px; + background-size: cover; +} +.scene > .menu > .avatarconversation.swap > .avatar { + left: auto; + right: 10px; +} +.scene > .menu > .avatarconversation > div:not(.avatar) { + width: calc(100% - 120px); + left: 120px; + top: 5px; + height: calc(100% - 5px); + text-align: left; + white-space: normal; + line-height: 18px; +} +.scene > .menu > .avatarconversation.swap > div:not(.avatar) { + left: auto; + right: 120px; + text-align: right; +} +.scene > .menu > .conversation > div { + display: table-cell; + vertical-align: middle; + position: relative; +} +#create-player { + width: 400px; + height: 300px; + left: calc(50% - 200px); + top: calc(50% - 150px); + position: absolute; + animation: dialog_start2 0.5s; + -webkit-animation: dialog_start2 0.5s; +} +#create-player > div { + position: absolute; +} +#create-player > .caption { + width: 100%; + height: 24px; + line-height: 24px; + left: 0; + top: 0; + font-family: "xinwei"; + font-size: 24px; + text-align: center; +} + +@keyframes scene_start { + from { + opacity: 0; + transform: scale(0.5); + margin-left: -175px; + margin-right: -175px; + } + to { + opacity: 1; + transform: scale(1); + margin-left: 16px; + margin-right: 16px; + } +} + +@-webkit-keyframes scene_start { + from { + opacity: 0; + transform: scale(0.5); + margin-left: -175px; + margin-right: -175px; + } + to { + opacity: 1; + transform: scale(1); + margin-left: 16px; + margin-right: 16px; + } +} diff --git a/layout/newlayout/equip.css b/layout/newlayout/equip.css index 78bb8398b..900eedf9a 100644 --- a/layout/newlayout/equip.css +++ b/layout/newlayout/equip.css @@ -1,143 +1,146 @@ -.player .equips{ - width:120px; - height:auto; - top:auto; - right:auto; - bottom:18px; - left:10px; - text-align:left; -} -#arena.slim_player .player .equips{ - left: 7px; -} -#arena.uslim_player .player .equips{ - left: 3px; -} -#arena.mslim_player .player .equips{ - left: 3px; -} -.player.minskin .equips{ - transform:scale(0.73); - transform-origin:bottom left; -} -.player .equips>.card::after, -.player .equips>.card::before{ - visibility: hidden; -} -.player .equips>.card{ - position:relative; - width:100%; - height:22px; - line-height:22px; - margin-top:0; - margin-bottom:0; - background:linear-gradient(to right,rgba(0,0,0,0.3),transparent), - linear-gradient(135deg,rgba(0,0,0,0.5) ,transparent 80%,transparent) !important; - box-shadow:none; - color:white; - text-shadow:black 0 0 2px; - animation: card_start2x 0.5s; - -webkit-animation: card_start2x 0.5s; - display:block; - left:0; - top:0; - transition:all 0.5s; - - border-radius:0; - border-width: 1px 0 0; - border-style:solid; - border-image:linear-gradient(to right, rgba(0, 0, 0,0.4) 70%,transparent) 100% 0 0; -} -.player .equips>.card>.image{ - display:none; -} - - -.player.unseen .equips>.card{ - background:none; - /*border-image:linear-gradient(to right, transparent,rgba(0,0,0,0.4) 10%,rgba(0, 0, 0,0.4) 70%,transparent) 100% 0 0;*/ -} -.player.unseen .equips>.card{ - border-image:linear-gradient(to right, transparent,rgba(0,0,0,0.4) 10%,rgba(0, 0, 0,0.4) 70%,transparent) 100% 0 0; -} -.player.unseen .equips>.card:first-child{ - border-image:linear-gradient(transparent,transparent); -} -.player .equips>.card.selected{ - background:linear-gradient(to right,rgba(0, 133, 255,0.3),transparent), - linear-gradient(135deg,rgba(0, 133, 255,0.5) ,transparent 80%,transparent) !important; - box-shadow:none !important; - border-width: 1px 0 0; - border-style:solid; - border-image:linear-gradient(to right, rgba(0, 103, 205,0.4) 70%,transparent) 100% 0 0; -} -.player .equips>.card.fire{ - color: rgb(255,119,63); -} -.player .equips>.card.thunder{ - color: rgb(117,186,255); -} -.player .equips>.card.poison{ - color: rgb(104,221,127); -} -.player .equips>.card.brown{ - color: rgb(195,161,223); -} - - -.equips>.card>.background{ - display:none !important; -} -.equips>.card>.name2{ - display:block; - margin-left:5px; - white-space: nowrap; -} -.equips>.card>div{ - animation:none !important; - -webkit-animation:none !important; -} -.equips>.card>.name, -.equips>.card>.info{ - display:none !important; -} - - -.equips>.removing{ - margin-top:-12px !important; - margin-bottom:-11px !important; - transform:scale(1); -} -.equips>.removing+.removing{ - margin-top:-23px !important; -} - - -.player.linked .equips{ - transform:rotate(90deg) translate(-152px,-6px); - transform-origin:bottom left; -} -#arena.slim_player .player.linked .equips{ - transform:rotate(90deg) translate(-155px,-6px); -} -#arena.uslim_player .player.linked .equips{ - transform:rotate(90deg) translate(-159px,-6px); -} -#arena.mslim_player .player.linked .equips{ - transform:rotate(90deg) translate(-157px,-6px); -} -.player.minskin.linked .equips{ - transform:rotate(90deg) translate(-92px,-6px) scale(0.73); -} -#arena.slim_player .player.minskin.linked .equips{ - transform:rotate(90deg) translate(-95px,-6px) scale(0.73); -} -#arena.uslim_player .player.minskin.linked .equips{ - transform:rotate(90deg) translate(-99px,-6px) scale(0.73); -} -#arena.mslim_player .player.minskin.linked .equips{ - transform:rotate(90deg) translate(-97px,-6px) scale(0.73); -} -.player.linked .identity{ - transform:rotate(90deg); -} +.player .equips { + width: 120px; + height: auto; + top: auto; + right: auto; + bottom: 18px; + left: 10px; + text-align: left; +} +#arena.slim_player .player .equips { + left: 7px; +} +#arena.uslim_player .player .equips { + left: 3px; +} +#arena.mslim_player .player .equips { + left: 3px; +} +.player.minskin .equips { + transform: scale(0.73); + transform-origin: bottom left; +} +.player .equips > .card::after, +.player .equips > .card::before { + visibility: hidden; +} +.player .equips > .card { + position: relative; + width: 100%; + height: 22px; + line-height: 22px; + margin-top: 0; + margin-bottom: 0; + background: linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent), + linear-gradient(135deg, rgba(0, 0, 0, 0.5), transparent 80%, transparent) !important; + box-shadow: none; + color: white; + text-shadow: black 0 0 2px; + animation: card_start2x 0.5s; + -webkit-animation: card_start2x 0.5s; + display: block; + left: 0; + top: 0; + transition: all 0.5s; + + border-radius: 0; + border-width: 1px 0 0; + border-style: solid; + border-image: linear-gradient(to right, rgba(0, 0, 0, 0.4) 70%, transparent) 100% 0 0; +} +.player .equips > .card > .image { + display: none; +} + +.player.unseen .equips > .card { + background: none; + /*border-image:linear-gradient(to right, transparent,rgba(0,0,0,0.4) 10%,rgba(0, 0, 0,0.4) 70%,transparent) 100% 0 0;*/ +} +.player.unseen .equips > .card { + border-image: linear-gradient( + to right, + transparent, + rgba(0, 0, 0, 0.4) 10%, + rgba(0, 0, 0, 0.4) 70%, + transparent + ) + 100% 0 0; +} +.player.unseen .equips > .card:first-child { + border-image: linear-gradient(transparent, transparent); +} +.player .equips > .card.selected { + background: linear-gradient(to right, rgba(0, 133, 255, 0.3), transparent), + linear-gradient(135deg, rgba(0, 133, 255, 0.5), transparent 80%, transparent) !important; + box-shadow: none !important; + border-width: 1px 0 0; + border-style: solid; + border-image: linear-gradient(to right, rgba(0, 103, 205, 0.4) 70%, transparent) 100% 0 0; +} +.player .equips > .card.fire { + color: rgb(255, 119, 63); +} +.player .equips > .card.thunder { + color: rgb(117, 186, 255); +} +.player .equips > .card.poison { + color: rgb(104, 221, 127); +} +.player .equips > .card.brown { + color: rgb(195, 161, 223); +} + +.equips > .card > .background { + display: none !important; +} +.equips > .card > .name2 { + display: block; + margin-left: 5px; + white-space: nowrap; +} +.equips > .card > div { + animation: none !important; + -webkit-animation: none !important; +} +.equips > .card > .name, +.equips > .card > .info { + display: none !important; +} + +.equips > .removing { + margin-top: -12px !important; + margin-bottom: -11px !important; + transform: scale(1); +} +.equips > .removing + .removing { + margin-top: -23px !important; +} + +.player.linked .equips { + transform: rotate(90deg) translate(-152px, -6px); + transform-origin: bottom left; +} +#arena.slim_player .player.linked .equips { + transform: rotate(90deg) translate(-155px, -6px); +} +#arena.uslim_player .player.linked .equips { + transform: rotate(90deg) translate(-159px, -6px); +} +#arena.mslim_player .player.linked .equips { + transform: rotate(90deg) translate(-157px, -6px); +} +.player.minskin.linked .equips { + transform: rotate(90deg) translate(-92px, -6px) scale(0.73); +} +#arena.slim_player .player.minskin.linked .equips { + transform: rotate(90deg) translate(-95px, -6px) scale(0.73); +} +#arena.uslim_player .player.minskin.linked .equips { + transform: rotate(90deg) translate(-99px, -6px) scale(0.73); +} +#arena.mslim_player .player.minskin.linked .equips { + transform: rotate(90deg) translate(-97px, -6px) scale(0.73); +} +.player.linked .identity { + transform: rotate(90deg); +} diff --git a/layout/newlayout/global.css b/layout/newlayout/global.css index d80186a42..9e55c4945 100644 --- a/layout/newlayout/global.css +++ b/layout/newlayout/global.css @@ -1,579 +1,948 @@ -.player{ - width:150px; - height:180px; -} -.player .avatar{ - width:130px; - height:160px; -} -#historybar{ - height: calc(90% - 25px); -} -#window>.player:not(.minskin)>.avatar, -#arena.slim_player .player:not(.minskin):not(.fakeme) .avatar{ - width: 136px; - height: 166px; - left:7px; - top:7px; -} -#window[data-player_border='slim']>.player:not(.minskin):not(.fakeme).connect>.avatar{ - width: 142px; - height: 172px; - left:4px; - top:4px; -} -#arena.uslim_player .player:not(.minskin):not(.fakeme) .avatar{ - width: 144px; - height: 174px; - left:3px; - top:3px; -} -#arena.mslim_player .player:not(.minskin):not(.fakeme) .avatar{ - width: 140px; - height: 170px; - left:5px; - top:5px; -} -#arena.lslim_player .player:not(.minskin):not(.fakeme) .avatar{ - left:5px; - top:5px; -} -#arena:not(.mobile).uslim_player .player:not(.minskin):not(.fakeme) .avatar, -#arena.mobile.uslim_player .player:not(.minskin):not(.fakeme):not(*[data-position='0']) .avatar{ - box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px; -} -#window>.player.minskin>.avatar{ - width: 106px; - height: 106px; - left:7px; - top:7px; -} -.player.minskin{ - width:120px; - height:120px; - /*zoom:0.9;*/ -} -.player.minskin .avatar{ - height:100px; - width:100px; -} -#arena.slim_player .player.minskin:not(.fakeme) .avatar:not(.fakeme){ - width: 106px; - height: 106px; - left:7px; - top:7px; -} -#arena.uslim_player .player.minskin:not(.fakeme) .avatar:not(.fakeme){ - width: 114px; - height: 114px; - left:3px; - top:3px; - box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px; -} -#arena.mslim_player .player.minskin:not(.fakeme) .avatar:not(.fakeme){ - width: 110px; - height: 110px; - left:5px; - top:5px; -} -/*#arena.uslim_player .player.minskin:not(.fakeme) .avatar:not(.fakeme){ - left:5px; - top:5px; -}*/ -.player.minskin .hp, -.player.minskin .hp.text{ - left:88px; -} -#arena.slim_player .player.minskin .hp, -#arena.slim_player .player.minskin .hp.text{ - left:91px; -} -.player .avatar2{ - width:52px; - height:52px; - top:73px; - left:92px; -} -.player .avatar, -.player .avatar2{ - transition-property:opacity; -} -.player .actcount.hp{ - top: 18px; - left: 15px; - width: 120px; - bottom: auto; - right: auto; - text-align: left; - transform: none; -} -#arena.slim_player .player .actcount.hp{ - left: 12px; - top: 15px; -} -.player.fullskin2 .avatar, -.player.fullskin2 .avatar2{ - width:65px; - background-position:50%; -} -#arena.slim_player .player.fullskin2:not(.minskin) .avatar, -#arena.slim_player .player.fullskin2:not(.minskin) .avatar2{ - width: 68px; -} -#arena.uslim_player .player.fullskin2:not(.minskin) .avatar, -#arena.uslim_player .player.fullskin2:not(.minskin) .avatar2{ - width: 72px; -} -#arena.mslim_player .player.fullskin2:not(.minskin) .avatar, -#arena.mslim_player .player.fullskin2:not(.minskin) .avatar2{ - width: 70px; -} -.player.fullskin2 .avatar{ - border-radius:8px 0 0 8px; -} -#window[data-radius_size='reduce'] .player.fullskin2 .avatar{ - border-radius:4px 0 0 4px; -} -#window[data-radius_size='off'] .player.fullskin2 .avatar{ - border-radius:0 0 0 0; -} -#window[data-radius_size='increase'] .player.fullskin2 .avatar{ - border-radius:16px 0 0 16px; -} -#window[data-radius_size='reduce'] .player.fullskin2 .avatar2{ - border-radius:0 4px 4px 0; -} -#window[data-radius_size='off'] .player.fullskin2 .avatar2{ - border-radius:0 0 0 0; -} -#window[data-radius_size='increase'] .player.fullskin2 .avatar2{ - border-radius:0 16px 16px 0; -} -.player.fullskin2 .avatar2{ - top:10px; - left:auto; - right:10px; - height:160px; - z-index:1; - border-radius:0 8px 8px 0; -} -#arena.slim_player .player.fullskin2:not(.minskin) .avatar2{ - top:7px; - right:7px; - height: 166px; -} -#arena.uslim_player .player.fullskin2:not(.minskin) .avatar2{ - top:3px; - right:3px; - height: 174px; - box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px; -} -#arena.mslim_player .player.fullskin2:not(.minskin) .avatar2{ - top:5px; - right:5px; - height: 170px; -} -#arena.lslim_player .player.fullskin2:not(.minskin) .avatar2{ - top:5px; - right:5px; -} -.player .marks, -.player .judges{ - width:36px; - text-align:center; - padding-bottom:10px; -} -.player .marks{ - left:-21px; - top:14px; - height:auto; -} -.player .judges{ - right:-33px; - top:26px; - left:auto; -} -.player:not(.linked2) .marks>div:first-child, -#arena:not(.nolink) .player .marks>div:first-child{ - transform: scale(0.2); - opacity:0; - pointer-events: none; -} - -.player .hp>div{ - width:10px; - height:10px; - margin-left:0; -} -.player .hp{ - width:18px; - line-height: 16px; - text-align: center; - bottom: 18px; - top: auto; - left: 118px; - z-index:3; - /*transform:rotate(180deg);*/ -} -#arena.slim_player .player .hp, -#window>.player:not(.minskin) .hp{ - bottom: 15px; - left:121px; -} -#window>.player.minskin .hp{ - left: 91px; -} -.player .hp.text{ - font-family:'xinwei'; - /*font-size:22px;*/ - transform:none; - transition:all 0s; - left:114px; -} -.player .hp.text>div:last-child{ - top: 4px; -} -/*#arena.slim_player .player .hp.text{ - left:117px; -}*/ -.player .hp.long{ - bottom:12px; - max-height:160px; -} -#arena.slim_player .player .hp.long{ - bottom:9px -} -.player .hp.long>div:first-child{ - margin-top:7px; -} - -.player .intro{ - top:96px; - left:120px; -} -.player .count{ - top:auto; - bottom:30px; - left:-3px; - padding:2px; - line-height:20px; - width:8px; - text-align:left; - border-radius:2px; - z-index:1; - border-radius:3px 0 0 3px; - box-shadow: rgba(0,0,0,0.2) 1px -1px 2px inset,rgba(255,255,255,0.15) -1px 1px 5px inset; -} -.player.topcount .count{ - border-radius: 2px; - text-align: center; - z-index: 3; -} - -#arena.mobile.uslim_player .player:not([data-position='0'])>.count, -#arena.mobile.mslim_player .player:not([data-position='0'])>.count, -#arena.mobile.lslim_player .player:not([data-position='0'])>.count, -#arena.mobile.uslim_player.chess .player>.count, -#arena.mobile.mslim_player.chess .player>.count, -#arena.mobile.lslim_player.chess .player>.count, -#arena:not(.mobile).uslim_player .player>.count, -#arena:not(.mobile).mslim_player .player>.count, -#arena:not(.mobile).lslim_player .player>.count{ - z-index: 3 !important; - border-radius: 2px !important; - text-align: center !important; -} -.player.unseen .count{ - border-radius: 3px; - text-align: center; -} -#arena.slim_player .player .count{ - left: -6px; -} -#arena.mslim_player .player .count{ - left: -5px; -} -.player .count.action{ - bottom:60px; -} -.player .count[data-condition="none"]{ - background: rgba(57, 123, 4,1); - border: 1px solid rgba(39, 79, 7, 1); - filter: grayscale(1); - -webkit-filter: grayscale(1); -} -.player .count[data-condition="high"]{ - background: rgba(85, 134, 57,1); - border: 1px solid rgba(39, 79, 7, 1); -} -.player .count[data-condition="higher"]{ - background: rgba(63, 119, 173,1); - border: 1px solid rgba(31, 82, 131, 1); -} -.player .count[data-condition="mid"]{ - background: rgba(194, 167, 30,1); - border: 1px solid rgba(87, 71, 8, 1); -} -.player .count[data-condition="low"]{ - background: rgba(148, 27, 27,1); - border: 1px solid rgba(86, 9, 9, 1); -} - -.player .identity{ - right: -6px; - top: -5px; - left: auto; -} -.player.minskin .identity{ - left:102px; -} -.player.linked{ - transform:rotate(-90deg); -} -.player.linked>.judges, -.player.linked>.marks{ - transform:rotate(90deg) translateX(10px); -} -#arena[data-target_shake='shake'] .linked.target{transform: rotate(-93deg);} -#arena[data-target_shake='shake'] .linked.target2{transform: rotate(-87deg);} - -#arena[data-target_shake='zoom'] .linked.target, -#arena[data-target_shake='zoom'] .linked.target2{transform: scale(1.03) rotate(-90deg);} - - -.player.acted.linked .identity{ - transform:rotate(270deg); -} -.linked>.avatar,.linked>.avatar2{transform:rotate(0deg);} -.linked>.avatar2{top:73px;} -.linked>.identity{top: -5px;} -.linked>.count{right: auto;} - -.player.linked>.name{ - transform-origin: top center; - transform: rotate(90deg) translate(132px,-96px); -} -.player.linked>.name.name2{ - transform: rotate(90deg) translate(110px,-31px); -} -/*--------位置(n人)------*/ - -/*--------位置(8人)------*/ -[data-number='8']>.player[data-position='1']{top:calc(200% / 3 - 160px);left:calc(100% - 150px);} -[data-number='8']>.player[data-position='2']{top:calc(100% / 3 - 170px);left:calc(100% - 150px);} -[data-number='8']>.player[data-position='3']{top:0;left:calc(75% - 112.5px);} -[data-number='8']>.player[data-position='4']{top:0;left:calc(50% - 75px);} -[data-number='8']>.player[data-position='5']{top:0;left:calc(25% - 37.5px);} -[data-number='8']>.player[data-position='6']{top:calc(100% / 3 - 170px);left:0;} -[data-number='8']>.player[data-position='7']{top:calc(200% / 3 - 160px);left:0;} -[data-number='8']>.card[data-position='1']{top:calc(200% / 3 - 122px);left:calc(100% - 127px);} -[data-number='8']>.card[data-position='2']{top:calc(100% / 3 - 132px);left:calc(100% - 127px);} -[data-number='8']>.card[data-position='3']{top:38px;left:calc(75% - 89.5px);} -[data-number='8']>.card[data-position='4']{top:38px;left:calc(50% - 52px);} -[data-number='8']>.card[data-position='5']{top:38px;left:calc(25% - 14.5px);} -[data-number='8']>.card[data-position='6']{top:calc(100% / 3 - 132px);left:23px;} -[data-number='8']>.card[data-position='7']{top:calc(200% / 3 - 122px);left:23px;} -[data-number='8']>.popup[data-position='1']{top:calc(200% / 3 - 150px);left:calc(100% - 186px);} -[data-number='8']>.popup[data-position='2']{top:calc(100% / 3 - 160px);left:calc(100% - 186px);} -[data-number='8']>.popup[data-position='3']{top:190px;left:calc(75% + 10.5px);} -[data-number='8']>.popup[data-position='4']{top:190px;left:calc(50% - 61px);} -[data-number='8']>.popup[data-position='5']{top:190px;left:calc(25% - 37.5px);} -[data-number='8']>.popup[data-position='6']{top:calc(100% / 3 - 160px);left:160px;} -[data-number='8']>.popup[data-position='7']{top:calc(200% / 3 - 150px);left:160px;} -/*--------位置(7人)------*/ -[data-number='7']>.player[data-position='1']{top:calc(200% / 3 - 160px);left:calc(100% - 150px);} -[data-number='7']>.player[data-position='2']{top:calc(100% / 3 - 170px);left:calc(100% - 150px);} -[data-number='7']>.player[data-position='3']{top:0;left:calc(62.5% - 75px);} -[data-number='7']>.player[data-position='4']{top:0;left:calc(37.5% - 75px);} -[data-number='7']>.player[data-position='5']{top:calc(100% / 3 - 170px);left:0;} -[data-number='7']>.player[data-position='6']{top:calc(200% / 3 - 160px);left:0;} -[data-number='7']>.card[data-position='1']{top:calc(200% / 3 - 122px);left:calc(100% - 127px);} -[data-number='7']>.card[data-position='2']{top:calc(100% / 3 - 132px);left:calc(100% - 127px);} -[data-number='7']>.card[data-position='3']{top:38px;left:calc(62.5% - 52px);} -[data-number='7']>.card[data-position='4']{top:38px;left:calc(37.5% - 52px);} -[data-number='7']>.card[data-position='5']{top:calc(100% / 3 - 132px);left:23px;} -[data-number='7']>.card[data-position='6']{top:calc(200% / 3 - 122px);left:23px;} -[data-number='7']>.popup[data-position='1']{top:calc(200% / 3 - 150px);left:calc(100% - 186px);} -[data-number='7']>.popup[data-position='2']{top:calc(100% / 3 - 160px);left:calc(100% - 186px);} -[data-number='7']>.popup[data-position='3']{top:190px;left:calc(62.5% + 48px);} -[data-number='7']>.popup[data-position='4']{top:190px;left:calc(37.5% - 75px);} -[data-number='7']>.popup[data-position='5']{top:calc(100% / 3 - 160px);left:160px;} -[data-number='7']>.popup[data-position='6']{top:calc(200% / 3 - 150px);left:160px;} -/*--------位置(6人)------*/ -[data-number='6']>.player[data-position='1']{top:calc(200% / 3 - 160px);left:calc(100% - 150px);} -[data-number='6']>.player[data-position='2']{top:calc(100% / 3 - 170px);left:calc(100% - 150px);} -[data-number='6']>.player[data-position='3']{top:0;left:calc(50% - 75px);} -[data-number='6']>.player[data-position='4']{top:calc(100% / 3 - 170px);left:0;} -[data-number='6']>.player[data-position='5']{top:calc(200% / 3 - 160px);left:0;} -[data-number='6']>.card[data-position='1']{top:calc(200% / 3 - 122px);left:calc(100% - 127px);} -[data-number='6']>.card[data-position='2']{top:calc(100% / 3 - 132px);left:calc(100% - 127px);} -[data-number='6']>.card[data-position='3']{top:38px;left:calc(50% - 52px);} -[data-number='6']>.card[data-position='4']{top:calc(100% / 3 - 132px);left:23px;} -[data-number='6']>.card[data-position='5']{top:calc(200% / 3 - 122px);left:23px;} -[data-number='6']>.popup[data-position='1']{top:calc(200% / 3 - 150px);left:calc(100% - 186px);} -[data-number='6']>.popup[data-position='2']{top:calc(100% / 3 - 160px);left:calc(100% - 186px);} -[data-number='6']>.popup[data-position='3']{top:190px;left:calc(50% - 61px);} -[data-number='6']>.popup[data-position='4']{top:calc(100% / 3 - 160px);left:160px;} -[data-number='6']>.popup[data-position='5']{top:calc(200% / 3 - 150px);left:160px;} -/*--------位置(5人)------*/ -[data-number='5']>.player[data-position='1']{top:calc(200% / 3 - 220px);left:calc(100% - 150px);} -[data-number='5']>.player[data-position='2']{top:0;left:calc(200% / 3 - 50px);} -[data-number='5']>.player[data-position='3']{top:0;left:calc(100% / 3 - 100px);} -[data-number='5']>.player[data-position='4']{top:calc(200% / 3 - 220px);left:0;} -[data-number='5']>.card[data-position='1']{top:calc(150% / 3 - 65px);left:calc(100% - 127px);} -[data-number='5']>.card[data-position='2']{top:38px;left:calc(200% / 3 - 27px);} -[data-number='5']>.card[data-position='3']{top:38px;left:calc(100% / 3 - 77px);} -[data-number='5']>.card[data-position='4']{top:calc(150% / 3 - 65px);left:23px;} -[data-number='5']>.popup[data-position='1']{top:calc(200% / 3 - 210px);left:calc(100% - 186px);} -[data-number='5']>.popup[data-position='2']{top:190px;left:calc(200% / 3 + 73px);} -[data-number='5']>.popup[data-position='3']{top:190px;left:calc(100% / 3 - 100px);} -[data-number='5']>.popup[data-position='4']{top:calc(200% / 3 - 210px);left:160px;} -/*--------位置(4人)------*/ -[data-number='4']>.player[data-position='1']{top:calc(100% / 3 - 40px);left:calc(100% - 150px);} -[data-number='4']>.player[data-position='2']{top:0;left:calc(50% - 75px);} -[data-number='4']>.player[data-position='3']{top:calc(100% / 3 - 40px);left:0;} -[data-number='4']>.card[data-position='1']{top:calc(100% / 3 - 2px);left:calc(100% - 127px);} -[data-number='4']>.card[data-position='2']{top:38px;left:calc(50% - 52px);} -[data-number='4']>.card[data-position='3']{top:calc(100% / 3 - 2px);left:23px;} -[data-number='4']>.popup[data-position='1']{top:calc(100% / 3 - 30px);left:calc(100% - 186px);} -[data-number='4']>.popup[data-position='2']{top:190px;left:calc(50% - 61px);} -[data-number='4']>.popup[data-position='3']{top:calc(100% / 3 - 30px);left:160px;} -/*--------位置(3人)------*/ -[data-number='3']>.player[data-position='1']{top:20px;left:calc(75% + 30px);} -[data-number='3']>.player[data-position='2']{top:20px;left:calc(25% - 180px);} -[data-number='3']>.card[data-position='1']{top:58px;left:calc(75% + 53px);} -[data-number='3']>.card[data-position='2']{top:58px;left:calc(25% - 157px);} -[data-number='3']>.popup[data-position='1']{top:210px;left:calc(75% + 153px);} -[data-number='3']>.popup[data-position='2']{top:210px;left:calc(25% - 180px);} -/*--------位置(2人)------*/ -[data-number='2']>.player[data-position='1']{top:0;left:calc(50% - 75px);} -[data-number='2']>.card[data-position='1']{top:0;left:calc(50% - 52px);} -[data-number='2']>.popup[data-position='1']{top:190px;left:calc(50% - 61px);} -/*--------位置(1人)------*/ -.player[data-position='0']{top:calc(100% - 170px);left:calc(50% - 75px);} -/*--------位置(联机)------*/ -#window>.player.connect[data-position='c0']{left:calc(50% - 255px);top:calc(50% - 90px)} -#window>.player.connect[data-position='c1']{left:calc(50% - 75px);top:calc(50% - 90px)} -#window>.player.connect[data-position='c2']{left:calc(50% + 105px);top:calc(50% - 90px)} -#window>.player.connect[data-position='c3']{left:calc(50% - 255px);top:calc(50% - 90px)} -#window>.player.connect[data-position='c4']{left:calc(50% - 75px);top:calc(50% - 90px)} -#window>.player.connect[data-position='c5']{left:calc(50% + 105px);top:calc(50% - 90px)} - -#window:not(.more_room)>.player.connect[data-position='c3']{opacity:0 !important;pointer-events: none;visibility: hidden} -#window:not(.more_room)>.player.connect[data-position='c4']{opacity:0 !important;pointer-events: none;visibility: hidden} -#window:not(.more_room)>.player.connect[data-position='c5']{opacity:0 !important;pointer-events: none;visibility: hidden} - -#window.more_room>.player.connect[data-position='c0']{transform:translateY(-105px);} -#window.more_room>.player.connect[data-position='c1']{transform:translateY(-105px);} -#window.more_room>.player.connect[data-position='c2']{transform:translateY(-105px);} -#window.more_room>.player.connect[data-position='c3']{transform:translateY(105px);} -#window.more_room>.player.connect[data-position='c4']{transform:translateY(105px);} -#window.more_room>.player.connect[data-position='c5']{transform:translateY(105px);} - -#window>.player.connect{ - width: 150px; -} -.connectbutton{ - top:calc(500% / 7 + 80px + 5px); -} - - -.card[data-position='0']{top:calc(100% - 130px);left:calc(50% - 52px);} -.popup[data-position='0']{top:calc(100% - 206px);left:calc(50% - 61px);} -#me,#mebg,#autonode{top:calc(100% - 150px);} -#handcards1,#handcards2{width: calc(50% - 95px);height: 127px;padding: 10px;} -#handcards2{left: calc(50% + 75px);} -.dialog{ - width: calc(90% - 300px); - left: calc(5% + 150px); - top:auto; - bottom:185px; - height:calc(100% - 385px); - z-index:4; -} -.dialog.nobutton{ - bottom:auto !important; - top:200px !important; -} -#arena.stone:not(.choose-character) .dialog{ - width: calc(90% - 440px); - left: calc(5% + 220px); -} -.dialog.removing{ - top:auto; -} -#control{ - z-index:5; - top:auto; - bottom:210px; - width: calc(100% - 300px); - left:150px; -} -#arena.discard-player-card>#control, -#arena.gain-player-card>#control, -#arena.choose-player-card>#control, -#arena.choose-to-move>#control{ - bottom: 30px; - transition: all 0s; -} -#arena.phone.discard-player-card>#control, -#arena.phone.gain-player-card>#control, -#arena.phone.choose-player-card>#control, -#arena.phone.choose-to-move>#control{ - bottom: 43px; -} -#arena.ipad.discard-player-card>#control, -#arena.ipad.gain-player-card>#control, -#arena.ipad.choose-player-card>#control, -#arena.ipad.choose-to-move>#control{ - bottom: 45px; -} -.popup{z-index:6} -.dialog.scroll1, -.dialog.scroll2, -.dialog.withbg{ - background: rgba(0,0,0,0.2); - box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px; - min-height:200px; -} -.dialog>.bar{ - display:none !important; -} -.dialog>.content-container{ - height:100%; - top:0; -} - -.bordered{ - border:1px solid white; - box-shadow:black 0 0 2px; -} - -#window.low_performance #arena .player:not([data-position='0']) .equips>.card, -#window.low_performance #arena.chess .player .equips>.card{ - animation: game_start 0.5s !important; - -webkit-animation: game_start 0.5s !important; -} - -@media screen and (min-width: 1150px) { - .dialog{ - width: 630px; - left: calc(50% - 315px); - } - .dialog.bosscharacter{ - width: 735px; - left: calc(50% - 367.5px); - } - #arena.stone:not(.choose-character) .dialog{ - width: calc(90% - 440px); - left: calc(5% + 220px); - } -} - -@keyframes card_start2x{from {opacity: 0;margin-top: -13px;margin-bottom:-11px}} -@keyframes card_start2xx{from {opacity: 0;margin-top: -12px;margin-bottom:-12px;transform:scale(0)}} -@keyframes card_start2xxx{from {opacity: 0;margin-top: -12px;margin-bottom:-12px;transform:scale(0) rotate(90deg)}} - -@-webkit-keyframes card_start2x{from {opacity: 0;margin-top: -13px;margin-bottom:-11px}} -@-webkit-keyframes card_start2xx{from {opacity: 0;margin-top: -12px;margin-bottom:-12px;transform:scale(0)}} -@-webkit-keyframes card_start2xxx{from {opacity: 0;margin-top: -12px;margin-bottom:-12px;transform:scale(0) rotate(90deg)}} +.player { + width: 150px; + height: 180px; +} +.player .avatar { + width: 130px; + height: 160px; +} +#historybar { + height: calc(90% - 25px); +} +#window > .player:not(.minskin) > .avatar, +#arena.slim_player .player:not(.minskin):not(.fakeme) .avatar { + width: 136px; + height: 166px; + left: 7px; + top: 7px; +} +#window[data-player_border="slim"] > .player:not(.minskin):not(.fakeme).connect > .avatar { + width: 142px; + height: 172px; + left: 4px; + top: 4px; +} +#arena.uslim_player .player:not(.minskin):not(.fakeme) .avatar { + width: 144px; + height: 174px; + left: 3px; + top: 3px; +} +#arena.mslim_player .player:not(.minskin):not(.fakeme) .avatar { + width: 140px; + height: 170px; + left: 5px; + top: 5px; +} +#arena.lslim_player .player:not(.minskin):not(.fakeme) .avatar { + left: 5px; + top: 5px; +} +#arena:not(.mobile).uslim_player .player:not(.minskin):not(.fakeme) .avatar, +#arena.mobile.uslim_player .player:not(.minskin):not(.fakeme):not(*[data-position="0"]) .avatar { + box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px; +} +#window > .player.minskin > .avatar { + width: 106px; + height: 106px; + left: 7px; + top: 7px; +} +.player.minskin { + width: 120px; + height: 120px; + /*zoom:0.9;*/ +} +.player.minskin .avatar { + height: 100px; + width: 100px; +} +#arena.slim_player .player.minskin:not(.fakeme) .avatar:not(.fakeme) { + width: 106px; + height: 106px; + left: 7px; + top: 7px; +} +#arena.uslim_player .player.minskin:not(.fakeme) .avatar:not(.fakeme) { + width: 114px; + height: 114px; + left: 3px; + top: 3px; + box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px; +} +#arena.mslim_player .player.minskin:not(.fakeme) .avatar:not(.fakeme) { + width: 110px; + height: 110px; + left: 5px; + top: 5px; +} +/*#arena.uslim_player .player.minskin:not(.fakeme) .avatar:not(.fakeme){ + left:5px; + top:5px; +}*/ +.player.minskin .hp, +.player.minskin .hp.text { + left: 88px; +} +#arena.slim_player .player.minskin .hp, +#arena.slim_player .player.minskin .hp.text { + left: 91px; +} +.player .avatar2 { + width: 52px; + height: 52px; + top: 73px; + left: 92px; +} +.player .avatar, +.player .avatar2 { + transition-property: opacity; +} +.player .actcount.hp { + top: 18px; + left: 15px; + width: 120px; + bottom: auto; + right: auto; + text-align: left; + transform: none; +} +#arena.slim_player .player .actcount.hp { + left: 12px; + top: 15px; +} +.player.fullskin2 .avatar, +.player.fullskin2 .avatar2 { + width: 65px; + background-position: 50%; +} +#arena.slim_player .player.fullskin2:not(.minskin) .avatar, +#arena.slim_player .player.fullskin2:not(.minskin) .avatar2 { + width: 68px; +} +#arena.uslim_player .player.fullskin2:not(.minskin) .avatar, +#arena.uslim_player .player.fullskin2:not(.minskin) .avatar2 { + width: 72px; +} +#arena.mslim_player .player.fullskin2:not(.minskin) .avatar, +#arena.mslim_player .player.fullskin2:not(.minskin) .avatar2 { + width: 70px; +} +.player.fullskin2 .avatar { + border-radius: 8px 0 0 8px; +} +#window[data-radius_size="reduce"] .player.fullskin2 .avatar { + border-radius: 4px 0 0 4px; +} +#window[data-radius_size="off"] .player.fullskin2 .avatar { + border-radius: 0 0 0 0; +} +#window[data-radius_size="increase"] .player.fullskin2 .avatar { + border-radius: 16px 0 0 16px; +} +#window[data-radius_size="reduce"] .player.fullskin2 .avatar2 { + border-radius: 0 4px 4px 0; +} +#window[data-radius_size="off"] .player.fullskin2 .avatar2 { + border-radius: 0 0 0 0; +} +#window[data-radius_size="increase"] .player.fullskin2 .avatar2 { + border-radius: 0 16px 16px 0; +} +.player.fullskin2 .avatar2 { + top: 10px; + left: auto; + right: 10px; + height: 160px; + z-index: 1; + border-radius: 0 8px 8px 0; +} +#arena.slim_player .player.fullskin2:not(.minskin) .avatar2 { + top: 7px; + right: 7px; + height: 166px; +} +#arena.uslim_player .player.fullskin2:not(.minskin) .avatar2 { + top: 3px; + right: 3px; + height: 174px; + box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px; +} +#arena.mslim_player .player.fullskin2:not(.minskin) .avatar2 { + top: 5px; + right: 5px; + height: 170px; +} +#arena.lslim_player .player.fullskin2:not(.minskin) .avatar2 { + top: 5px; + right: 5px; +} +.player .marks, +.player .judges { + width: 36px; + text-align: center; + padding-bottom: 10px; +} +.player .marks { + left: -21px; + top: 14px; + height: auto; +} +.player .judges { + right: -33px; + top: 26px; + left: auto; +} +.player:not(.linked2) .marks > div:first-child, +#arena:not(.nolink) .player .marks > div:first-child { + transform: scale(0.2); + opacity: 0; + pointer-events: none; +} + +.player .hp > div { + width: 10px; + height: 10px; + margin-left: 0; +} +.player .hp { + width: 18px; + line-height: 16px; + text-align: center; + bottom: 18px; + top: auto; + left: 118px; + z-index: 3; + /*transform:rotate(180deg);*/ +} +#arena.slim_player .player .hp, +#window > .player:not(.minskin) .hp { + bottom: 15px; + left: 121px; +} +#window > .player.minskin .hp { + left: 91px; +} +.player .hp.text { + font-family: "xinwei"; + /*font-size:22px;*/ + transform: none; + transition: all 0s; + left: 114px; +} +.player .hp.text > div:last-child { + top: 4px; +} +/*#arena.slim_player .player .hp.text{ + left:117px; +}*/ +.player .hp.long { + bottom: 12px; + max-height: 160px; +} +#arena.slim_player .player .hp.long { + bottom: 9px; +} +.player .hp.long > div:first-child { + margin-top: 7px; +} + +.player .intro { + top: 96px; + left: 120px; +} +.player .count { + top: auto; + bottom: 30px; + left: -3px; + padding: 2px; + line-height: 20px; + width: 8px; + text-align: left; + border-radius: 2px; + z-index: 1; + border-radius: 3px 0 0 3px; + box-shadow: rgba(0, 0, 0, 0.2) 1px -1px 2px inset, rgba(255, 255, 255, 0.15) -1px 1px 5px inset; +} +.player.topcount .count { + border-radius: 2px; + text-align: center; + z-index: 3; +} + +#arena.mobile.uslim_player .player:not([data-position="0"]) > .count, +#arena.mobile.mslim_player .player:not([data-position="0"]) > .count, +#arena.mobile.lslim_player .player:not([data-position="0"]) > .count, +#arena.mobile.uslim_player.chess .player > .count, +#arena.mobile.mslim_player.chess .player > .count, +#arena.mobile.lslim_player.chess .player > .count, +#arena:not(.mobile).uslim_player .player > .count, +#arena:not(.mobile).mslim_player .player > .count, +#arena:not(.mobile).lslim_player .player > .count { + z-index: 3 !important; + border-radius: 2px !important; + text-align: center !important; +} +.player.unseen .count { + border-radius: 3px; + text-align: center; +} +#arena.slim_player .player .count { + left: -6px; +} +#arena.mslim_player .player .count { + left: -5px; +} +.player .count.action { + bottom: 60px; +} +.player .count[data-condition="none"] { + background: rgba(57, 123, 4, 1); + border: 1px solid rgba(39, 79, 7, 1); + filter: grayscale(1); + -webkit-filter: grayscale(1); +} +.player .count[data-condition="high"] { + background: rgba(85, 134, 57, 1); + border: 1px solid rgba(39, 79, 7, 1); +} +.player .count[data-condition="higher"] { + background: rgba(63, 119, 173, 1); + border: 1px solid rgba(31, 82, 131, 1); +} +.player .count[data-condition="mid"] { + background: rgba(194, 167, 30, 1); + border: 1px solid rgba(87, 71, 8, 1); +} +.player .count[data-condition="low"] { + background: rgba(148, 27, 27, 1); + border: 1px solid rgba(86, 9, 9, 1); +} + +.player .identity { + right: -6px; + top: -5px; + left: auto; +} +.player.minskin .identity { + left: 102px; +} +.player.linked { + transform: rotate(-90deg); +} +.player.linked > .judges, +.player.linked > .marks { + transform: rotate(90deg) translateX(10px); +} +#arena[data-target_shake="shake"] .linked.target { + transform: rotate(-93deg); +} +#arena[data-target_shake="shake"] .linked.target2 { + transform: rotate(-87deg); +} + +#arena[data-target_shake="zoom"] .linked.target, +#arena[data-target_shake="zoom"] .linked.target2 { + transform: scale(1.03) rotate(-90deg); +} + +.player.acted.linked .identity { + transform: rotate(270deg); +} +.linked > .avatar, +.linked > .avatar2 { + transform: rotate(0deg); +} +.linked > .avatar2 { + top: 73px; +} +.linked > .identity { + top: -5px; +} +.linked > .count { + right: auto; +} + +.player.linked > .name { + transform-origin: top center; + transform: rotate(90deg) translate(132px, -96px); +} +.player.linked > .name.name2 { + transform: rotate(90deg) translate(110px, -31px); +} +/*--------位置(n人)------*/ + +/*--------位置(8人)------*/ +[data-number="8"] > .player[data-position="1"] { + top: calc(200% / 3 - 160px); + left: calc(100% - 150px); +} +[data-number="8"] > .player[data-position="2"] { + top: calc(100% / 3 - 170px); + left: calc(100% - 150px); +} +[data-number="8"] > .player[data-position="3"] { + top: 0; + left: calc(75% - 112.5px); +} +[data-number="8"] > .player[data-position="4"] { + top: 0; + left: calc(50% - 75px); +} +[data-number="8"] > .player[data-position="5"] { + top: 0; + left: calc(25% - 37.5px); +} +[data-number="8"] > .player[data-position="6"] { + top: calc(100% / 3 - 170px); + left: 0; +} +[data-number="8"] > .player[data-position="7"] { + top: calc(200% / 3 - 160px); + left: 0; +} +[data-number="8"] > .card[data-position="1"] { + top: calc(200% / 3 - 122px); + left: calc(100% - 127px); +} +[data-number="8"] > .card[data-position="2"] { + top: calc(100% / 3 - 132px); + left: calc(100% - 127px); +} +[data-number="8"] > .card[data-position="3"] { + top: 38px; + left: calc(75% - 89.5px); +} +[data-number="8"] > .card[data-position="4"] { + top: 38px; + left: calc(50% - 52px); +} +[data-number="8"] > .card[data-position="5"] { + top: 38px; + left: calc(25% - 14.5px); +} +[data-number="8"] > .card[data-position="6"] { + top: calc(100% / 3 - 132px); + left: 23px; +} +[data-number="8"] > .card[data-position="7"] { + top: calc(200% / 3 - 122px); + left: 23px; +} +[data-number="8"] > .popup[data-position="1"] { + top: calc(200% / 3 - 150px); + left: calc(100% - 186px); +} +[data-number="8"] > .popup[data-position="2"] { + top: calc(100% / 3 - 160px); + left: calc(100% - 186px); +} +[data-number="8"] > .popup[data-position="3"] { + top: 190px; + left: calc(75% + 10.5px); +} +[data-number="8"] > .popup[data-position="4"] { + top: 190px; + left: calc(50% - 61px); +} +[data-number="8"] > .popup[data-position="5"] { + top: 190px; + left: calc(25% - 37.5px); +} +[data-number="8"] > .popup[data-position="6"] { + top: calc(100% / 3 - 160px); + left: 160px; +} +[data-number="8"] > .popup[data-position="7"] { + top: calc(200% / 3 - 150px); + left: 160px; +} +/*--------位置(7人)------*/ +[data-number="7"] > .player[data-position="1"] { + top: calc(200% / 3 - 160px); + left: calc(100% - 150px); +} +[data-number="7"] > .player[data-position="2"] { + top: calc(100% / 3 - 170px); + left: calc(100% - 150px); +} +[data-number="7"] > .player[data-position="3"] { + top: 0; + left: calc(62.5% - 75px); +} +[data-number="7"] > .player[data-position="4"] { + top: 0; + left: calc(37.5% - 75px); +} +[data-number="7"] > .player[data-position="5"] { + top: calc(100% / 3 - 170px); + left: 0; +} +[data-number="7"] > .player[data-position="6"] { + top: calc(200% / 3 - 160px); + left: 0; +} +[data-number="7"] > .card[data-position="1"] { + top: calc(200% / 3 - 122px); + left: calc(100% - 127px); +} +[data-number="7"] > .card[data-position="2"] { + top: calc(100% / 3 - 132px); + left: calc(100% - 127px); +} +[data-number="7"] > .card[data-position="3"] { + top: 38px; + left: calc(62.5% - 52px); +} +[data-number="7"] > .card[data-position="4"] { + top: 38px; + left: calc(37.5% - 52px); +} +[data-number="7"] > .card[data-position="5"] { + top: calc(100% / 3 - 132px); + left: 23px; +} +[data-number="7"] > .card[data-position="6"] { + top: calc(200% / 3 - 122px); + left: 23px; +} +[data-number="7"] > .popup[data-position="1"] { + top: calc(200% / 3 - 150px); + left: calc(100% - 186px); +} +[data-number="7"] > .popup[data-position="2"] { + top: calc(100% / 3 - 160px); + left: calc(100% - 186px); +} +[data-number="7"] > .popup[data-position="3"] { + top: 190px; + left: calc(62.5% + 48px); +} +[data-number="7"] > .popup[data-position="4"] { + top: 190px; + left: calc(37.5% - 75px); +} +[data-number="7"] > .popup[data-position="5"] { + top: calc(100% / 3 - 160px); + left: 160px; +} +[data-number="7"] > .popup[data-position="6"] { + top: calc(200% / 3 - 150px); + left: 160px; +} +/*--------位置(6人)------*/ +[data-number="6"] > .player[data-position="1"] { + top: calc(200% / 3 - 160px); + left: calc(100% - 150px); +} +[data-number="6"] > .player[data-position="2"] { + top: calc(100% / 3 - 170px); + left: calc(100% - 150px); +} +[data-number="6"] > .player[data-position="3"] { + top: 0; + left: calc(50% - 75px); +} +[data-number="6"] > .player[data-position="4"] { + top: calc(100% / 3 - 170px); + left: 0; +} +[data-number="6"] > .player[data-position="5"] { + top: calc(200% / 3 - 160px); + left: 0; +} +[data-number="6"] > .card[data-position="1"] { + top: calc(200% / 3 - 122px); + left: calc(100% - 127px); +} +[data-number="6"] > .card[data-position="2"] { + top: calc(100% / 3 - 132px); + left: calc(100% - 127px); +} +[data-number="6"] > .card[data-position="3"] { + top: 38px; + left: calc(50% - 52px); +} +[data-number="6"] > .card[data-position="4"] { + top: calc(100% / 3 - 132px); + left: 23px; +} +[data-number="6"] > .card[data-position="5"] { + top: calc(200% / 3 - 122px); + left: 23px; +} +[data-number="6"] > .popup[data-position="1"] { + top: calc(200% / 3 - 150px); + left: calc(100% - 186px); +} +[data-number="6"] > .popup[data-position="2"] { + top: calc(100% / 3 - 160px); + left: calc(100% - 186px); +} +[data-number="6"] > .popup[data-position="3"] { + top: 190px; + left: calc(50% - 61px); +} +[data-number="6"] > .popup[data-position="4"] { + top: calc(100% / 3 - 160px); + left: 160px; +} +[data-number="6"] > .popup[data-position="5"] { + top: calc(200% / 3 - 150px); + left: 160px; +} +/*--------位置(5人)------*/ +[data-number="5"] > .player[data-position="1"] { + top: calc(200% / 3 - 220px); + left: calc(100% - 150px); +} +[data-number="5"] > .player[data-position="2"] { + top: 0; + left: calc(200% / 3 - 50px); +} +[data-number="5"] > .player[data-position="3"] { + top: 0; + left: calc(100% / 3 - 100px); +} +[data-number="5"] > .player[data-position="4"] { + top: calc(200% / 3 - 220px); + left: 0; +} +[data-number="5"] > .card[data-position="1"] { + top: calc(150% / 3 - 65px); + left: calc(100% - 127px); +} +[data-number="5"] > .card[data-position="2"] { + top: 38px; + left: calc(200% / 3 - 27px); +} +[data-number="5"] > .card[data-position="3"] { + top: 38px; + left: calc(100% / 3 - 77px); +} +[data-number="5"] > .card[data-position="4"] { + top: calc(150% / 3 - 65px); + left: 23px; +} +[data-number="5"] > .popup[data-position="1"] { + top: calc(200% / 3 - 210px); + left: calc(100% - 186px); +} +[data-number="5"] > .popup[data-position="2"] { + top: 190px; + left: calc(200% / 3 + 73px); +} +[data-number="5"] > .popup[data-position="3"] { + top: 190px; + left: calc(100% / 3 - 100px); +} +[data-number="5"] > .popup[data-position="4"] { + top: calc(200% / 3 - 210px); + left: 160px; +} +/*--------位置(4人)------*/ +[data-number="4"] > .player[data-position="1"] { + top: calc(100% / 3 - 40px); + left: calc(100% - 150px); +} +[data-number="4"] > .player[data-position="2"] { + top: 0; + left: calc(50% - 75px); +} +[data-number="4"] > .player[data-position="3"] { + top: calc(100% / 3 - 40px); + left: 0; +} +[data-number="4"] > .card[data-position="1"] { + top: calc(100% / 3 - 2px); + left: calc(100% - 127px); +} +[data-number="4"] > .card[data-position="2"] { + top: 38px; + left: calc(50% - 52px); +} +[data-number="4"] > .card[data-position="3"] { + top: calc(100% / 3 - 2px); + left: 23px; +} +[data-number="4"] > .popup[data-position="1"] { + top: calc(100% / 3 - 30px); + left: calc(100% - 186px); +} +[data-number="4"] > .popup[data-position="2"] { + top: 190px; + left: calc(50% - 61px); +} +[data-number="4"] > .popup[data-position="3"] { + top: calc(100% / 3 - 30px); + left: 160px; +} +/*--------位置(3人)------*/ +[data-number="3"] > .player[data-position="1"] { + top: 20px; + left: calc(75% + 30px); +} +[data-number="3"] > .player[data-position="2"] { + top: 20px; + left: calc(25% - 180px); +} +[data-number="3"] > .card[data-position="1"] { + top: 58px; + left: calc(75% + 53px); +} +[data-number="3"] > .card[data-position="2"] { + top: 58px; + left: calc(25% - 157px); +} +[data-number="3"] > .popup[data-position="1"] { + top: 210px; + left: calc(75% + 153px); +} +[data-number="3"] > .popup[data-position="2"] { + top: 210px; + left: calc(25% - 180px); +} +/*--------位置(2人)------*/ +[data-number="2"] > .player[data-position="1"] { + top: 0; + left: calc(50% - 75px); +} +[data-number="2"] > .card[data-position="1"] { + top: 0; + left: calc(50% - 52px); +} +[data-number="2"] > .popup[data-position="1"] { + top: 190px; + left: calc(50% - 61px); +} +/*--------位置(1人)------*/ +.player[data-position="0"] { + top: calc(100% - 170px); + left: calc(50% - 75px); +} +/*--------位置(联机)------*/ +#window > .player.connect[data-position="c0"] { + left: calc(50% - 255px); + top: calc(50% - 90px); +} +#window > .player.connect[data-position="c1"] { + left: calc(50% - 75px); + top: calc(50% - 90px); +} +#window > .player.connect[data-position="c2"] { + left: calc(50% + 105px); + top: calc(50% - 90px); +} +#window > .player.connect[data-position="c3"] { + left: calc(50% - 255px); + top: calc(50% - 90px); +} +#window > .player.connect[data-position="c4"] { + left: calc(50% - 75px); + top: calc(50% - 90px); +} +#window > .player.connect[data-position="c5"] { + left: calc(50% + 105px); + top: calc(50% - 90px); +} + +#window:not(.more_room) > .player.connect[data-position="c3"] { + opacity: 0 !important; + pointer-events: none; + visibility: hidden; +} +#window:not(.more_room) > .player.connect[data-position="c4"] { + opacity: 0 !important; + pointer-events: none; + visibility: hidden; +} +#window:not(.more_room) > .player.connect[data-position="c5"] { + opacity: 0 !important; + pointer-events: none; + visibility: hidden; +} + +#window.more_room > .player.connect[data-position="c0"] { + transform: translateY(-105px); +} +#window.more_room > .player.connect[data-position="c1"] { + transform: translateY(-105px); +} +#window.more_room > .player.connect[data-position="c2"] { + transform: translateY(-105px); +} +#window.more_room > .player.connect[data-position="c3"] { + transform: translateY(105px); +} +#window.more_room > .player.connect[data-position="c4"] { + transform: translateY(105px); +} +#window.more_room > .player.connect[data-position="c5"] { + transform: translateY(105px); +} + +#window > .player.connect { + width: 150px; +} +.connectbutton { + top: calc(500% / 7 + 80px + 5px); +} + +.card[data-position="0"] { + top: calc(100% - 130px); + left: calc(50% - 52px); +} +.popup[data-position="0"] { + top: calc(100% - 206px); + left: calc(50% - 61px); +} +#me, +#mebg, +#autonode { + top: calc(100% - 150px); +} +#handcards1, +#handcards2 { + width: calc(50% - 95px); + height: 127px; + padding: 10px; +} +#handcards2 { + left: calc(50% + 75px); +} +.dialog { + width: calc(90% - 300px); + left: calc(5% + 150px); + top: auto; + bottom: 185px; + height: calc(100% - 385px); + z-index: 4; +} +.dialog.nobutton { + bottom: auto !important; + top: 200px !important; +} +#arena.stone:not(.choose-character) .dialog { + width: calc(90% - 440px); + left: calc(5% + 220px); +} +.dialog.removing { + top: auto; +} +#control { + z-index: 5; + top: auto; + bottom: 210px; + width: calc(100% - 300px); + left: 150px; +} +#arena.discard-player-card > #control, +#arena.gain-player-card > #control, +#arena.choose-player-card > #control, +#arena.choose-to-move > #control { + bottom: 30px; + transition: all 0s; +} +#arena.phone.discard-player-card > #control, +#arena.phone.gain-player-card > #control, +#arena.phone.choose-player-card > #control, +#arena.phone.choose-to-move > #control { + bottom: 43px; +} +#arena.ipad.discard-player-card > #control, +#arena.ipad.gain-player-card > #control, +#arena.ipad.choose-player-card > #control, +#arena.ipad.choose-to-move > #control { + bottom: 45px; +} +.popup { + z-index: 6; +} +.dialog.scroll1, +.dialog.scroll2, +.dialog.withbg { + background: rgba(0, 0, 0, 0.2); + box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px; + min-height: 200px; +} +.dialog > .bar { + display: none !important; +} +.dialog > .content-container { + height: 100%; + top: 0; +} + +.bordered { + border: 1px solid white; + box-shadow: black 0 0 2px; +} + +#window.low_performance #arena .player:not([data-position="0"]) .equips > .card, +#window.low_performance #arena.chess .player .equips > .card { + animation: game_start 0.5s !important; + -webkit-animation: game_start 0.5s !important; +} + +@media screen and (min-width: 1150px) { + .dialog { + width: 630px; + left: calc(50% - 315px); + } + .dialog.bosscharacter { + width: 735px; + left: calc(50% - 367.5px); + } + #arena.stone:not(.choose-character) .dialog { + width: calc(90% - 440px); + left: calc(5% + 220px); + } +} + +@keyframes card_start2x { + from { + opacity: 0; + margin-top: -13px; + margin-bottom: -11px; + } +} +@keyframes card_start2xx { + from { + opacity: 0; + margin-top: -12px; + margin-bottom: -12px; + transform: scale(0); + } +} +@keyframes card_start2xxx { + from { + opacity: 0; + margin-top: -12px; + margin-bottom: -12px; + transform: scale(0) rotate(90deg); + } +} + +@-webkit-keyframes card_start2x { + from { + opacity: 0; + margin-top: -13px; + margin-bottom: -11px; + } +} +@-webkit-keyframes card_start2xx { + from { + opacity: 0; + margin-top: -12px; + margin-bottom: -12px; + transform: scale(0); + } +} +@-webkit-keyframes card_start2xxx { + from { + opacity: 0; + margin-top: -12px; + margin-bottom: -12px; + transform: scale(0) rotate(90deg); + } +} diff --git a/layout/newlayout/layout.css b/layout/newlayout/layout.css index 82b80eeeb..85fc3a464 100644 --- a/layout/newlayout/layout.css +++ b/layout/newlayout/layout.css @@ -1,2 +1,2 @@ -@import 'global.css'; -@import 'equip.css'; +@import "global.css"; +@import "equip.css"; diff --git a/layout/nova/layout.css b/layout/nova/layout.css index 8c0f516df..6a1a2fa75 100644 --- a/layout/nova/layout.css +++ b/layout/nova/layout.css @@ -1,363 +1,448 @@ -@import "../newlayout/layout.css"; -#arena{ - height: calc(95% + 20px); -} -#control{ - width: calc(5000% / 47 - 240px); - left:calc(-150% / 47 + 120px); - bottom:150px; - height: 40px; -} -#arena.phone #control{ - bottom:160px; -} -#arena.ipad #control{ - bottom:155px; -} -#arena:not(.chess)>#me, -#arena:not(.chess)>#mebg, -#arena:not(.chess)>#autonode{ - bottom:30px; - width: calc(5000% / 47); - left:calc(-150% / 47); - top:auto; - border-radius:0 !important; - height:120px; -} -#arena.oblongcard:not(.chess)>#me, -#arena.oblongcard:not(.chess)>#mebg, -#arena.oblongcard:not(.chess)>#autonode{ - height: 140px; -} -#arena.oblongcard:not(.chess)>.card, -#arena.oblongcard:not(.chess) .handcards>.card{ - height: 120px; -} -#arena.oblongcard:not(.chess)>.card>.image, -#arena.oblongcard:not(.chess) .handcards>.card>.image{ - height: 110px; - top: 8px; - background-position-x: -3px; -} -#arena.oblongcard:not(.chess) #handcards1{ - height: 100%; - top: 2px; -} -#arena.oblongcard:not(.chess):not(.choose-character) #control{ - bottom:165px; -} -#arena.phone.oblongcard:not(.chess):not(.choose-character) #control{ - bottom:180px; -} - -#arena:not(.chess)>#autonode{ - width: calc(5000% / 47 - 240px); - left:calc(-150% / 47 + 120px); -} -#arena:not(.mobile).single-handcard #handcards1{ - width: calc(100% - 120px); -} -#window.rightbar #system, -#window.leftbar #system{ - width: calc(100% - 62px); -} -#window.leftbar #system{ - left: 50px; -} -#window.rightbar #historybar{ - left: calc(100% - 50px); - border-radius: 0; - top: 0; - height: 100%; -} -#window.leftbar #historybar{ - left: 0; - border-radius: 0; - top: 0; - height: 100%; -} - -#window.single-handcard #historybar{ - height: calc(100% - 121px); -} -#window.oblongcard.single-handcard #historybar{ - height: calc(100% - 141px); -} - -#window.leftbar #arena:not(.chess)>#me, -#window.leftbar #arena:not(.chess)>#mebg, -#window.leftbar #arena:not(.chess)>#autonode{ - width: calc(5000% / 47 + 2500px / 47); - left:calc(-150% / 47 - 50px - 75px / 47); -} -#window.leftbar #arena:not(.chess)>#autonode{ - width: calc(5000% / 47 + 2500px / 47 - 240px); - left:calc(-150% / 47 - 50px - 75px / 47 + 120px); -} -#window.rightbar #arena:not(.chess)>#me, -#window.rightbar #arena:not(.chess)>#mebg, -#window.rightbar #arena:not(.chess)>#autonode{ - width: calc(5000% / 47 + 2500px / 47); - left:calc(-150% / 47 - 75px / 47); -} -#window.rightbar #arena:not(.chess)>#autonode{ - width: calc(5000% / 47 + 2500px / 47 - 240px); - left:calc(-150% / 47 - 75px / 47 + 120px); -} -#arena:not(.chess) #handcards1{ - height:120px; - padding:0; - top:calc(100% - 120px); -} -#arena:not(.chess) #handcards1.scrollh{ - top: calc(100% - 180px); - height: 180px; -} -#arena:not(.chess).oblongcard #handcards1.scrollh{ - top: calc(100% - 200px); - height: 200px; -} -#arena:not(.chess) #handcards1.scrollh>div{ - height: 120px; - top: 60px; -} -#arena:not(.chess).oblongcard #handcards1.scrollh>div{ - top: 62px; -} -#arena:not(.chess):not(.single-handcard) #handcards1{ - width:calc(100% - 240px); - left:calc(150% / 47 - 300% / 94 + 625% / 47 - 105px + 120px); -} -#arena:not(.single-handcard):not(.chess)>#me, -#arena:not(.single-handcard):not(.chess)>#mebg, -#arena:not(.single-handcard):not(.chess)>#autonode{ - left: 0 !important; - bottom: 38px !important; - width: calc(9700% / 94) !important; -} -#arena:not(.single-handcard):not(.chess)>#mebg{ - visibility: hidden; -} -#arena:not(.single-handcard):not(.chess)>#me #handcards1{ - left: 150px !important; - width: calc(100% - 150px) !important; -} -#arena:not(.single-handcard):not(.chess)>#me #handcards1>.handcards{ - left: 0 !important; -} -#autonode{ - display: table !important; -} -@media screen and (max-width: 1105px){ - #arena[data-number='8']:not(.single-handcard):not(.chess)>#me, - #arena[data-number='8']:not(.single-handcard):not(.chess)>#mebg, - #arena[data-number='8']:not(.single-handcard):not(.chess)>#autonode{ - left: calc(-300% / 94 + 625% / 47 - 105px) !important; - width: calc(9700% / 94 + 300% / 94 - 625% / 47 + 105px) !important; - } -} -#handcards2{ - display:none; -} -.dialog{ - height:calc(100% - 370px); - bottom:170px; -} -#arena.choose-character>.dialog .placeholder+.placeholder{ - display: none; -} -#arena.choose-character>.dialog .placeholder{ - margin-bottom: 4px; - height: 0px; -} -#arena.choose-character>.dialog.noupdate .placeholder{ - margin-bottom: 0; - height: 0; -} -#arena.choose-character>.dialog{ - height:calc(100% - 280px); - bottom:80px; -} -#arena.choose-character>.dialog.scroll3{ - height:calc(100% - 240px); -} -#arena.phone.choose-character>.dialog{ - bottom:93px; -} -#arena.ipad.choose-character>.dialog{ - bottom:96px; -} -#arena.discard-player-card>#control, -#arena.gain-player-card>#control, -#arena.choose-player-card>#control, -#arena.choose-to-move>#control, -#arena.choose-character>#control{ - bottom: 30px; - transition: all 0s; -} -#arena.phone.discard-player-card>#control, -#arena.phone.gain-player-card>#control, -#arena.phone.choose-player-card>#control, -#arena.phone.choose-to-move>#control, -#arena.phone.choose-character>#control{ - bottom: 43px; -} -#arena.ipad.discard-player-card>#control, -#arena.ipad.gain-player-card>#control, -#arena.ipad.choose-player-card>#control, -#arena.ipad.choose-to-move>#control, -#arena.ipad.choose-character>#control{ - bottom: 45px; -} -.dialog.fullheight { - height: calc(100% - 123px) !important; - top: 40px !important; -} - -#me>.fakeme.avatar{ - width:120px; - height:100%; - border-radius:0px; - top:0; - left:0; - background-size:cover; - clip-path: polygon(-10px 0, 130px 0, 130px 130px, -10px 130px); - -webkit-clip-path: polygon(-10px 0, 130px 0, 130px 130px, -10px 130px); -} -#window[data-radius_size='increase'] #me>.fakeme.avatar, -#window[data-radius_size='reduce'] #me>.fakeme.avatar{ - border-radius:0px; -} - -/*--------位置(8人)------*/ -[data-number='8']>.player[data-position='1']{top:calc(55% - 135px);left:calc(100% - 150px);} -[data-number='8']>.player[data-position='2']{top:calc(10% - 50px);left:calc(100% - 150px);} -[data-number='8']>.player[data-position='3']{top:0;left:calc(75% - 112.5px);} -[data-number='8']>.player[data-position='4']{top:0;left:calc(50% - 75px);} -[data-number='8']>.player[data-position='5']{top:0;left:calc(25% - 37.5px);} -[data-number='8']>.player[data-position='6']{top:calc(10% - 50px);left:0;} -[data-number='8']>.player[data-position='7']{top:calc(55% - 135px);left:0;} -/*--------位置(7人)------*/ -[data-number='7']>.player[data-position='1']{top:calc(55% - 135px);left:calc(100% - 150px);} -[data-number='7']>.player[data-position='2']{top:calc(10% - 50px);left:calc(100% - 150px);} -[data-number='7']>.player[data-position='3']{top:0;left:calc(62.5% - 75px);} -[data-number='7']>.player[data-position='4']{top:0;left:calc(37.5% - 75px);} -[data-number='7']>.player[data-position='5']{top:calc(10% - 50px);left:0;} -[data-number='7']>.player[data-position='6']{top:calc(55% - 135px);left:0;} -/*--------位置(6人)------*/ -#arena[data-number='6']>.player[data-position='1']{top:calc(30% - 128px);left:calc(100% - 120px);} -#arena[data-number='6']>.player[data-position='2']{top:0px;left:calc(75% - 90px);} -#arena[data-number='6']>.player[data-position='3']{top:0;left:calc(50% - 60px);} -#arena[data-number='6']>.player[data-position='4']{top:0px;left:calc(25% - 30px);} -#arena[data-number='6']>.player[data-position='5']{top:calc(30% - 128px);left:0;} -/*--------位置(5人)------*/ -#arena[data-number='5']>.player[data-position='1']{top:calc(30% - 128px);left:calc(100% - 120px);} -#arena[data-number='5']>.player[data-position='2']{top:0;left:calc(200% / 3 - 80px);} -#arena[data-number='5']>.player[data-position='3']{top:0;left:calc(100% / 3 - 40px);} -#arena[data-number='5']>.player[data-position='4']{top:calc(30% - 128px);left:0;} -/*--------位置(4人)------*/ -#arena[data-number='4']>.player[data-position='1']{top:calc(30% - 128px);left:calc(100% - 120px);} -#arena[data-number='4']>.player[data-position='2']{top:0;left:calc(50% - 60px);} -#arena[data-number='4']>.player[data-position='3']{top:calc(30% - 128px);left:0;} -/*--------位置(3人)------*/ -#arena[data-number='3']>.player[data-position='1']{top:calc(60% / 3 - 88px);left:calc(75% + 80px);} -#arena[data-number='3']>.player[data-position='2']{top:calc(60% / 3 - 88px);left:calc(25% - 200px);} -/*--------位置(2人)------*/ -#arena[data-number='2']>.player[data-position='1']{top:0;left:calc(50% - 60px);} -/*--------位置(1人)------*/ -.player[data-position='0']{top:calc(100% - 220px);left:0;} - - -#arena[data-player_height_nova="default"]>.player[data-position='0']:not(.minskin){ - top: calc(100% - 236px); -} -[data-number='8'][data-player_height_nova="default"]>.player[data-position='1'], -[data-number='8'][data-player_height_nova="default"]>.player[data-position='7'], -[data-number='7'][data-player_height_nova="default"]>.player[data-position='1'], -[data-number='7'][data-player_height_nova="default"]>.player[data-position='6']{ - top:calc(55% - 143px); -} - -#arena[data-player_height_nova="default"]>.player:not(.minskin){ - height: 196px !important; -} -#arena[data-player_height_nova="default"] .timerbar>div{ - top: 181px; -} - -#arena[data-player_height_nova="default"]>.player .avatar{ - height:176px; -} -#arena.slim_player[data-player_height_nova="default"] .player:not(.minskin):not(.fakeme) .avatar{ - height: 182px; -} - -#arena.uslim_player[data-player_height_nova="default"] .player:not(.minskin):not(.fakeme) .avatar{ - height: 190px; -} -#arena.mslim_player[data-player_height_nova="default"] .player:not(.minskin):not(.fakeme) .avatar{ - height: 186px; -} -#arena[data-player_height_nova="default"]>.player.fullskin2 .avatar2{ - height:176px; -} - -#arena.slim_player[data-player_height_nova="default"]> .player.fullskin2:not(.minskin) .avatar2{ - height: 182px; -} -#arena.uslim_player[data-player_height_nova="default"]> .player.fullskin2:not(.minskin) .avatar2{ - height: 190px; -} -#arena.mslim_player[data-player_height_nova="default"]> .player.fullskin2:not(.minskin) .avatar2{ - height: 186px; -} - - -#arena[data-player_height_nova="long"]>.player[data-position='0']:not(.minskin){ - top: calc(100% - 250px); -} -[data-number='8'][data-player_height_nova="long"]>.player[data-position='1'], -[data-number='8'][data-player_height_nova="long"]>.player[data-position='7'], -[data-number='7'][data-player_height_nova="long"]>.player[data-position='1'], -[data-number='7'][data-player_height_nova="long"]>.player[data-position='6']{ - top:calc(55% - 150px); -} - -#arena[data-player_height_nova="long"]>.player:not(.minskin){ - height: 210px !important; -} -#arena[data-player_height_nova="long"] .timerbar>div{ - top: 195px; -} - -#arena[data-player_height_nova="long"]>.player .avatar{ - height:190px; -} -#arena.slim_player[data-player_height_nova="long"] .player:not(.minskin):not(.fakeme) .avatar{ - height: 196px; -} - -#arena.uslim_player[data-player_height_nova="long"] .player:not(.minskin):not(.fakeme) .avatar{ - height: 204px; -} -#arena.mslim_player[data-player_height_nova="long"] .player:not(.minskin):not(.fakeme) .avatar{ - height: 200px; -} -#arena[data-player_height_nova="long"]>.player.fullskin2 .avatar2{ - height:190px; -} - -#arena.slim_player[data-player_height_nova="long"]> .player.fullskin2:not(.minskin) .avatar2{ - height: 196px; -} -#arena.uslim_player[data-player_height_nova="long"]> .player.fullskin2:not(.minskin) .avatar2{ - height: 204px; -} -#arena.mslim_player[data-player_height_nova="long"]> .player.fullskin2:not(.minskin) .avatar2{ - height: 200px; -} - -#arena>.player:not(.minskin)>.avatar, -#arena>.player:not(.minskin)>.avatar2{ - background-position: 50% 0 !important; -} \ No newline at end of file +@import "../newlayout/layout.css"; +#arena { + height: calc(95% + 20px); +} +#control { + width: calc(5000% / 47 - 240px); + left: calc(-150% / 47 + 120px); + bottom: 150px; + height: 40px; +} +#arena.phone #control { + bottom: 160px; +} +#arena.ipad #control { + bottom: 155px; +} +#arena:not(.chess) > #me, +#arena:not(.chess) > #mebg, +#arena:not(.chess) > #autonode { + bottom: 30px; + width: calc(5000% / 47); + left: calc(-150% / 47); + top: auto; + border-radius: 0 !important; + height: 120px; +} +#arena.oblongcard:not(.chess) > #me, +#arena.oblongcard:not(.chess) > #mebg, +#arena.oblongcard:not(.chess) > #autonode { + height: 140px; +} +#arena.oblongcard:not(.chess) > .card, +#arena.oblongcard:not(.chess) .handcards > .card { + height: 120px; +} +#arena.oblongcard:not(.chess) > .card > .image, +#arena.oblongcard:not(.chess) .handcards > .card > .image { + height: 110px; + top: 8px; + background-position-x: -3px; +} +#arena.oblongcard:not(.chess) #handcards1 { + height: 100%; + top: 2px; +} +#arena.oblongcard:not(.chess):not(.choose-character) #control { + bottom: 165px; +} +#arena.phone.oblongcard:not(.chess):not(.choose-character) #control { + bottom: 180px; +} + +#arena:not(.chess) > #autonode { + width: calc(5000% / 47 - 240px); + left: calc(-150% / 47 + 120px); +} +#arena:not(.mobile).single-handcard #handcards1 { + width: calc(100% - 120px); +} +#window.rightbar #system, +#window.leftbar #system { + width: calc(100% - 62px); +} +#window.leftbar #system { + left: 50px; +} +#window.rightbar #historybar { + left: calc(100% - 50px); + border-radius: 0; + top: 0; + height: 100%; +} +#window.leftbar #historybar { + left: 0; + border-radius: 0; + top: 0; + height: 100%; +} + +#window.single-handcard #historybar { + height: calc(100% - 121px); +} +#window.oblongcard.single-handcard #historybar { + height: calc(100% - 141px); +} + +#window.leftbar #arena:not(.chess) > #me, +#window.leftbar #arena:not(.chess) > #mebg, +#window.leftbar #arena:not(.chess) > #autonode { + width: calc(5000% / 47 + 2500px / 47); + left: calc(-150% / 47 - 50px - 75px / 47); +} +#window.leftbar #arena:not(.chess) > #autonode { + width: calc(5000% / 47 + 2500px / 47 - 240px); + left: calc(-150% / 47 - 50px - 75px / 47 + 120px); +} +#window.rightbar #arena:not(.chess) > #me, +#window.rightbar #arena:not(.chess) > #mebg, +#window.rightbar #arena:not(.chess) > #autonode { + width: calc(5000% / 47 + 2500px / 47); + left: calc(-150% / 47 - 75px / 47); +} +#window.rightbar #arena:not(.chess) > #autonode { + width: calc(5000% / 47 + 2500px / 47 - 240px); + left: calc(-150% / 47 - 75px / 47 + 120px); +} +#arena:not(.chess) #handcards1 { + height: 120px; + padding: 0; + top: calc(100% - 120px); +} +#arena:not(.chess) #handcards1.scrollh { + top: calc(100% - 180px); + height: 180px; +} +#arena:not(.chess).oblongcard #handcards1.scrollh { + top: calc(100% - 200px); + height: 200px; +} +#arena:not(.chess) #handcards1.scrollh > div { + height: 120px; + top: 60px; +} +#arena:not(.chess).oblongcard #handcards1.scrollh > div { + top: 62px; +} +#arena:not(.chess):not(.single-handcard) #handcards1 { + width: calc(100% - 240px); + left: calc(150% / 47 - 300% / 94 + 625% / 47 - 105px + 120px); +} +#arena:not(.single-handcard):not(.chess) > #me, +#arena:not(.single-handcard):not(.chess) > #mebg, +#arena:not(.single-handcard):not(.chess) > #autonode { + left: 0 !important; + bottom: 38px !important; + width: calc(9700% / 94) !important; +} +#arena:not(.single-handcard):not(.chess) > #mebg { + visibility: hidden; +} +#arena:not(.single-handcard):not(.chess) > #me #handcards1 { + left: 150px !important; + width: calc(100% - 150px) !important; +} +#arena:not(.single-handcard):not(.chess) > #me #handcards1 > .handcards { + left: 0 !important; +} +#autonode { + display: table !important; +} +@media screen and (max-width: 1105px) { + #arena[data-number="8"]:not(.single-handcard):not(.chess) > #me, + #arena[data-number="8"]:not(.single-handcard):not(.chess) > #mebg, + #arena[data-number="8"]:not(.single-handcard):not(.chess) > #autonode { + left: calc(-300% / 94 + 625% / 47 - 105px) !important; + width: calc(9700% / 94 + 300% / 94 - 625% / 47 + 105px) !important; + } +} +#handcards2 { + display: none; +} +.dialog { + height: calc(100% - 370px); + bottom: 170px; +} +#arena.choose-character > .dialog .placeholder + .placeholder { + display: none; +} +#arena.choose-character > .dialog .placeholder { + margin-bottom: 4px; + height: 0px; +} +#arena.choose-character > .dialog.noupdate .placeholder { + margin-bottom: 0; + height: 0; +} +#arena.choose-character > .dialog { + height: calc(100% - 280px); + bottom: 80px; +} +#arena.choose-character > .dialog.scroll3 { + height: calc(100% - 240px); +} +#arena.phone.choose-character > .dialog { + bottom: 93px; +} +#arena.ipad.choose-character > .dialog { + bottom: 96px; +} +#arena.discard-player-card > #control, +#arena.gain-player-card > #control, +#arena.choose-player-card > #control, +#arena.choose-to-move > #control, +#arena.choose-character > #control { + bottom: 30px; + transition: all 0s; +} +#arena.phone.discard-player-card > #control, +#arena.phone.gain-player-card > #control, +#arena.phone.choose-player-card > #control, +#arena.phone.choose-to-move > #control, +#arena.phone.choose-character > #control { + bottom: 43px; +} +#arena.ipad.discard-player-card > #control, +#arena.ipad.gain-player-card > #control, +#arena.ipad.choose-player-card > #control, +#arena.ipad.choose-to-move > #control, +#arena.ipad.choose-character > #control { + bottom: 45px; +} +.dialog.fullheight { + height: calc(100% - 123px) !important; + top: 40px !important; +} + +#me > .fakeme.avatar { + width: 120px; + height: 100%; + border-radius: 0px; + top: 0; + left: 0; + background-size: cover; + clip-path: polygon(-10px 0, 130px 0, 130px 130px, -10px 130px); + -webkit-clip-path: polygon(-10px 0, 130px 0, 130px 130px, -10px 130px); +} +#window[data-radius_size="increase"] #me > .fakeme.avatar, +#window[data-radius_size="reduce"] #me > .fakeme.avatar { + border-radius: 0px; +} + +/*--------位置(8人)------*/ +[data-number="8"] > .player[data-position="1"] { + top: calc(55% - 135px); + left: calc(100% - 150px); +} +[data-number="8"] > .player[data-position="2"] { + top: calc(10% - 50px); + left: calc(100% - 150px); +} +[data-number="8"] > .player[data-position="3"] { + top: 0; + left: calc(75% - 112.5px); +} +[data-number="8"] > .player[data-position="4"] { + top: 0; + left: calc(50% - 75px); +} +[data-number="8"] > .player[data-position="5"] { + top: 0; + left: calc(25% - 37.5px); +} +[data-number="8"] > .player[data-position="6"] { + top: calc(10% - 50px); + left: 0; +} +[data-number="8"] > .player[data-position="7"] { + top: calc(55% - 135px); + left: 0; +} +/*--------位置(7人)------*/ +[data-number="7"] > .player[data-position="1"] { + top: calc(55% - 135px); + left: calc(100% - 150px); +} +[data-number="7"] > .player[data-position="2"] { + top: calc(10% - 50px); + left: calc(100% - 150px); +} +[data-number="7"] > .player[data-position="3"] { + top: 0; + left: calc(62.5% - 75px); +} +[data-number="7"] > .player[data-position="4"] { + top: 0; + left: calc(37.5% - 75px); +} +[data-number="7"] > .player[data-position="5"] { + top: calc(10% - 50px); + left: 0; +} +[data-number="7"] > .player[data-position="6"] { + top: calc(55% - 135px); + left: 0; +} +/*--------位置(6人)------*/ +#arena[data-number="6"] > .player[data-position="1"] { + top: calc(30% - 128px); + left: calc(100% - 120px); +} +#arena[data-number="6"] > .player[data-position="2"] { + top: 0px; + left: calc(75% - 90px); +} +#arena[data-number="6"] > .player[data-position="3"] { + top: 0; + left: calc(50% - 60px); +} +#arena[data-number="6"] > .player[data-position="4"] { + top: 0px; + left: calc(25% - 30px); +} +#arena[data-number="6"] > .player[data-position="5"] { + top: calc(30% - 128px); + left: 0; +} +/*--------位置(5人)------*/ +#arena[data-number="5"] > .player[data-position="1"] { + top: calc(30% - 128px); + left: calc(100% - 120px); +} +#arena[data-number="5"] > .player[data-position="2"] { + top: 0; + left: calc(200% / 3 - 80px); +} +#arena[data-number="5"] > .player[data-position="3"] { + top: 0; + left: calc(100% / 3 - 40px); +} +#arena[data-number="5"] > .player[data-position="4"] { + top: calc(30% - 128px); + left: 0; +} +/*--------位置(4人)------*/ +#arena[data-number="4"] > .player[data-position="1"] { + top: calc(30% - 128px); + left: calc(100% - 120px); +} +#arena[data-number="4"] > .player[data-position="2"] { + top: 0; + left: calc(50% - 60px); +} +#arena[data-number="4"] > .player[data-position="3"] { + top: calc(30% - 128px); + left: 0; +} +/*--------位置(3人)------*/ +#arena[data-number="3"] > .player[data-position="1"] { + top: calc(60% / 3 - 88px); + left: calc(75% + 80px); +} +#arena[data-number="3"] > .player[data-position="2"] { + top: calc(60% / 3 - 88px); + left: calc(25% - 200px); +} +/*--------位置(2人)------*/ +#arena[data-number="2"] > .player[data-position="1"] { + top: 0; + left: calc(50% - 60px); +} +/*--------位置(1人)------*/ +.player[data-position="0"] { + top: calc(100% - 220px); + left: 0; +} + +#arena[data-player_height_nova="default"] > .player[data-position="0"]:not(.minskin) { + top: calc(100% - 236px); +} +[data-number="8"][data-player_height_nova="default"] > .player[data-position="1"], +[data-number="8"][data-player_height_nova="default"] > .player[data-position="7"], +[data-number="7"][data-player_height_nova="default"] > .player[data-position="1"], +[data-number="7"][data-player_height_nova="default"] > .player[data-position="6"] { + top: calc(55% - 143px); +} + +#arena[data-player_height_nova="default"] > .player:not(.minskin) { + height: 196px !important; +} +#arena[data-player_height_nova="default"] .timerbar > div { + top: 181px; +} + +#arena[data-player_height_nova="default"] > .player .avatar { + height: 176px; +} +#arena.slim_player[data-player_height_nova="default"] .player:not(.minskin):not(.fakeme) .avatar { + height: 182px; +} + +#arena.uslim_player[data-player_height_nova="default"] .player:not(.minskin):not(.fakeme) .avatar { + height: 190px; +} +#arena.mslim_player[data-player_height_nova="default"] .player:not(.minskin):not(.fakeme) .avatar { + height: 186px; +} +#arena[data-player_height_nova="default"] > .player.fullskin2 .avatar2 { + height: 176px; +} + +#arena.slim_player[data-player_height_nova="default"] > .player.fullskin2:not(.minskin) .avatar2 { + height: 182px; +} +#arena.uslim_player[data-player_height_nova="default"] > .player.fullskin2:not(.minskin) .avatar2 { + height: 190px; +} +#arena.mslim_player[data-player_height_nova="default"] > .player.fullskin2:not(.minskin) .avatar2 { + height: 186px; +} + +#arena[data-player_height_nova="long"] > .player[data-position="0"]:not(.minskin) { + top: calc(100% - 250px); +} +[data-number="8"][data-player_height_nova="long"] > .player[data-position="1"], +[data-number="8"][data-player_height_nova="long"] > .player[data-position="7"], +[data-number="7"][data-player_height_nova="long"] > .player[data-position="1"], +[data-number="7"][data-player_height_nova="long"] > .player[data-position="6"] { + top: calc(55% - 150px); +} + +#arena[data-player_height_nova="long"] > .player:not(.minskin) { + height: 210px !important; +} +#arena[data-player_height_nova="long"] .timerbar > div { + top: 195px; +} + +#arena[data-player_height_nova="long"] > .player .avatar { + height: 190px; +} +#arena.slim_player[data-player_height_nova="long"] .player:not(.minskin):not(.fakeme) .avatar { + height: 196px; +} + +#arena.uslim_player[data-player_height_nova="long"] .player:not(.minskin):not(.fakeme) .avatar { + height: 204px; +} +#arena.mslim_player[data-player_height_nova="long"] .player:not(.minskin):not(.fakeme) .avatar { + height: 200px; +} +#arena[data-player_height_nova="long"] > .player.fullskin2 .avatar2 { + height: 190px; +} + +#arena.slim_player[data-player_height_nova="long"] > .player.fullskin2:not(.minskin) .avatar2 { + height: 196px; +} +#arena.uslim_player[data-player_height_nova="long"] > .player.fullskin2:not(.minskin) .avatar2 { + height: 204px; +} +#arena.mslim_player[data-player_height_nova="long"] > .player.fullskin2:not(.minskin) .avatar2 { + height: 200px; +} + +#arena > .player:not(.minskin) > .avatar, +#arena > .player:not(.minskin) > .avatar2 { + background-position: 50% 0 !important; +}