From 58514a17c01e09f839b6edf6441466e31559b1ad Mon Sep 17 00:00:00 2001 From: Malthbern Date: Fri, 4 Apr 2025 00:46:29 +0000 Subject: [PATCH 01/18] Initial commit --- LICENSE | 319 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ README.md | 2 + 2 files changed, 321 insertions(+) create mode 100644 LICENSE create mode 100644 README.md diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..1a16e05 --- /dev/null +++ b/LICENSE @@ -0,0 +1,319 @@ +Creative Commons Legal Code + +Attribution 3.0 Unported + + CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE + LEGAL SERVICES. DISTRIBUTION OF THIS LICENSE DOES NOT CREATE AN + ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS + INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES + REGARDING THE INFORMATION PROVIDED, AND DISCLAIMS LIABILITY FOR + DAMAGES RESULTING FROM ITS USE. + +License + +THE WORK (AS DEFINED BELOW) IS PROVIDED UNDER THE TERMS OF THIS CREATIVE +COMMONS PUBLIC LICENSE ("CCPL" OR "LICENSE"). THE WORK IS PROTECTED BY +COPYRIGHT AND/OR OTHER APPLICABLE LAW. ANY USE OF THE WORK OTHER THAN AS +AUTHORIZED UNDER THIS LICENSE OR COPYRIGHT LAW IS PROHIBITED. + +BY EXERCISING ANY RIGHTS TO THE WORK PROVIDED HERE, YOU ACCEPT AND AGREE +TO BE BOUND BY THE TERMS OF THIS LICENSE. TO THE EXTENT THIS LICENSE MAY +BE CONSIDERED TO BE A CONTRACT, THE LICENSOR GRANTS YOU THE RIGHTS +CONTAINED HERE IN CONSIDERATION OF YOUR ACCEPTANCE OF SUCH TERMS AND +CONDITIONS. + +1. Definitions + + a. "Adaptation" means a work based upon the Work, or upon the Work and + other pre-existing works, such as a translation, adaptation, + derivative work, arrangement of music or other alterations of a + literary or artistic work, or phonogram or performance and includes + cinematographic adaptations or any other form in which the Work may be + recast, transformed, or adapted including in any form recognizably + derived from the original, except that a work that constitutes a + Collection will not be considered an Adaptation for the purpose of + this License. For the avoidance of doubt, where the Work is a musical + work, performance or phonogram, the synchronization of the Work in + timed-relation with a moving image ("synching") will be considered an + Adaptation for the purpose of this License. + b. "Collection" means a collection of literary or artistic works, such as + encyclopedias and anthologies, or performances, phonograms or + broadcasts, or other works or subject matter other than works listed + in Section 1(f) below, which, by reason of the selection and + arrangement of their contents, constitute intellectual creations, in + which the Work is included in its entirety in unmodified form along + with one or more other contributions, each constituting separate and + independent works in themselves, which together are assembled into a + collective whole. A work that constitutes a Collection will not be + considered an Adaptation (as defined above) for the purposes of this + License. + c. "Distribute" means to make available to the public the original and + copies of the Work or Adaptation, as appropriate, through sale or + other transfer of ownership. + d. "Licensor" means the individual, individuals, entity or entities that + offer(s) the Work under the terms of this License. + e. "Original Author" means, in the case of a literary or artistic work, + the individual, individuals, entity or entities who created the Work + or if no individual or entity can be identified, the publisher; and in + addition (i) in the case of a performance the actors, singers, + musicians, dancers, and other persons who act, sing, deliver, declaim, + play in, interpret or otherwise perform literary or artistic works or + expressions of folklore; (ii) in the case of a phonogram the producer + being the person or legal entity who first fixes the sounds of a + performance or other sounds; and, (iii) in the case of broadcasts, the + organization that transmits the broadcast. + f. "Work" means the literary and/or artistic work offered under the terms + of this License including without limitation any production in the + literary, scientific and artistic domain, whatever may be the mode or + form of its expression including digital form, such as a book, + pamphlet and other writing; a lecture, address, sermon or other work + of the same nature; a dramatic or dramatico-musical work; a + choreographic work or entertainment in dumb show; a musical + composition with or without words; a cinematographic work to which are + assimilated works expressed by a process analogous to cinematography; + a work of drawing, painting, architecture, sculpture, engraving or + lithography; a photographic work to which are assimilated works + expressed by a process analogous to photography; a work of applied + art; an illustration, map, plan, sketch or three-dimensional work + relative to geography, topography, architecture or science; a + performance; a broadcast; a phonogram; a compilation of data to the + extent it is protected as a copyrightable work; or a work performed by + a variety or circus performer to the extent it is not otherwise + considered a literary or artistic work. + g. "You" means an individual or entity exercising rights under this + License who has not previously violated the terms of this License with + respect to the Work, or who has received express permission from the + Licensor to exercise rights under this License despite a previous + violation. + h. "Publicly Perform" means to perform public recitations of the Work and + to communicate to the public those public recitations, by any means or + process, including by wire or wireless means or public digital + performances; to make available to the public Works in such a way that + members of the public may access these Works from a place and at a + place individually chosen by them; to perform the Work to the public + by any means or process and the communication to the public of the + performances of the Work, including by public digital performance; to + broadcast and rebroadcast the Work by any means including signs, + sounds or images. + i. "Reproduce" means to make copies of the Work by any means including + without limitation by sound or visual recordings and the right of + fixation and reproducing fixations of the Work, including storage of a + protected performance or phonogram in digital form or other electronic + medium. + +2. Fair Dealing Rights. Nothing in this License is intended to reduce, +limit, or restrict any uses free from copyright or rights arising from +limitations or exceptions that are provided for in connection with the +copyright protection under copyright law or other applicable laws. + +3. License Grant. Subject to the terms and conditions of this License, +Licensor hereby grants You a worldwide, royalty-free, non-exclusive, +perpetual (for the duration of the applicable copyright) license to +exercise the rights in the Work as stated below: + + a. to Reproduce the Work, to incorporate the Work into one or more + Collections, and to Reproduce the Work as incorporated in the + Collections; + b. to create and Reproduce Adaptations provided that any such Adaptation, + including any translation in any medium, takes reasonable steps to + clearly label, demarcate or otherwise identify that changes were made + to the original Work. For example, a translation could be marked "The + original work was translated from English to Spanish," or a + modification could indicate "The original work has been modified."; + c. to Distribute and Publicly Perform the Work including as incorporated + in Collections; and, + d. to Distribute and Publicly Perform Adaptations. + e. For the avoidance of doubt: + + i. Non-waivable Compulsory License Schemes. In those jurisdictions in + which the right to collect royalties through any statutory or + compulsory licensing scheme cannot be waived, the Licensor + reserves the exclusive right to collect such royalties for any + exercise by You of the rights granted under this License; + ii. Waivable Compulsory License Schemes. In those jurisdictions in + which the right to collect royalties through any statutory or + compulsory licensing scheme can be waived, the Licensor waives the + exclusive right to collect such royalties for any exercise by You + of the rights granted under this License; and, + iii. Voluntary License Schemes. The Licensor waives the right to + collect royalties, whether individually or, in the event that the + Licensor is a member of a collecting society that administers + voluntary licensing schemes, via that society, from any exercise + by You of the rights granted under this License. + +The above rights may be exercised in all media and formats whether now +known or hereafter devised. The above rights include the right to make +such modifications as are technically necessary to exercise the rights in +other media and formats. Subject to Section 8(f), all rights not expressly +granted by Licensor are hereby reserved. + +4. Restrictions. The license granted in Section 3 above is expressly made +subject to and limited by the following restrictions: + + a. You may Distribute or Publicly Perform the Work only under the terms + of this License. You must include a copy of, or the Uniform Resource + Identifier (URI) for, this License with every copy of the Work You + Distribute or Publicly Perform. You may not offer or impose any terms + on the Work that restrict the terms of this License or the ability of + the recipient of the Work to exercise the rights granted to that + recipient under the terms of the License. You may not sublicense the + Work. You must keep intact all notices that refer to this License and + to the disclaimer of warranties with every copy of the Work You + Distribute or Publicly Perform. When You Distribute or Publicly + Perform the Work, You may not impose any effective technological + measures on the Work that restrict the ability of a recipient of the + Work from You to exercise the rights granted to that recipient under + the terms of the License. This Section 4(a) applies to the Work as + incorporated in a Collection, but this does not require the Collection + apart from the Work itself to be made subject to the terms of this + License. If You create a Collection, upon notice from any Licensor You + must, to the extent practicable, remove from the Collection any credit + as required by Section 4(b), as requested. If You create an + Adaptation, upon notice from any Licensor You must, to the extent + practicable, remove from the Adaptation any credit as required by + Section 4(b), as requested. + b. If You Distribute, or Publicly Perform the Work or any Adaptations or + Collections, You must, unless a request has been made pursuant to + Section 4(a), keep intact all copyright notices for the Work and + provide, reasonable to the medium or means You are utilizing: (i) the + name of the Original Author (or pseudonym, if applicable) if supplied, + and/or if the Original Author and/or Licensor designate another party + or parties (e.g., a sponsor institute, publishing entity, journal) for + attribution ("Attribution Parties") in Licensor's copyright notice, + terms of service or by other reasonable means, the name of such party + or parties; (ii) the title of the Work if supplied; (iii) to the + extent reasonably practicable, the URI, if any, that Licensor + specifies to be associated with the Work, unless such URI does not + refer to the copyright notice or licensing information for the Work; + and (iv) , consistent with Section 3(b), in the case of an Adaptation, + a credit identifying the use of the Work in the Adaptation (e.g., + "French translation of the Work by Original Author," or "Screenplay + based on original Work by Original Author"). The credit required by + this Section 4 (b) may be implemented in any reasonable manner; + provided, however, that in the case of a Adaptation or Collection, at + a minimum such credit will appear, if a credit for all contributing + authors of the Adaptation or Collection appears, then as part of these + credits and in a manner at least as prominent as the credits for the + other contributing authors. For the avoidance of doubt, You may only + use the credit required by this Section for the purpose of attribution + in the manner set out above and, by exercising Your rights under this + License, You may not implicitly or explicitly assert or imply any + connection with, sponsorship or endorsement by the Original Author, + Licensor and/or Attribution Parties, as appropriate, of You or Your + use of the Work, without the separate, express prior written + permission of the Original Author, Licensor and/or Attribution + Parties. + c. Except as otherwise agreed in writing by the Licensor or as may be + otherwise permitted by applicable law, if You Reproduce, Distribute or + Publicly Perform the Work either by itself or as part of any + Adaptations or Collections, You must not distort, mutilate, modify or + take other derogatory action in relation to the Work which would be + prejudicial to the Original Author's honor or reputation. Licensor + agrees that in those jurisdictions (e.g. Japan), in which any exercise + of the right granted in Section 3(b) of this License (the right to + make Adaptations) would be deemed to be a distortion, mutilation, + modification or other derogatory action prejudicial to the Original + Author's honor and reputation, the Licensor will waive or not assert, + as appropriate, this Section, to the fullest extent permitted by the + applicable national law, to enable You to reasonably exercise Your + right under Section 3(b) of this License (right to make Adaptations) + but not otherwise. + +5. Representations, Warranties and Disclaimer + +UNLESS OTHERWISE MUTUALLY AGREED TO BY THE PARTIES IN WRITING, LICENSOR +OFFERS THE WORK AS-IS AND MAKES NO REPRESENTATIONS OR WARRANTIES OF ANY +KIND CONCERNING THE WORK, EXPRESS, IMPLIED, STATUTORY OR OTHERWISE, +INCLUDING, WITHOUT LIMITATION, WARRANTIES OF TITLE, MERCHANTIBILITY, +FITNESS FOR A PARTICULAR PURPOSE, NONINFRINGEMENT, OR THE ABSENCE OF +LATENT OR OTHER DEFECTS, ACCURACY, OR THE PRESENCE OF ABSENCE OF ERRORS, +WHETHER OR NOT DISCOVERABLE. SOME JURISDICTIONS DO NOT ALLOW THE EXCLUSION +OF IMPLIED WARRANTIES, SO SUCH EXCLUSION MAY NOT APPLY TO YOU. + +6. Limitation on Liability. EXCEPT TO THE EXTENT REQUIRED BY APPLICABLE +LAW, IN NO EVENT WILL LICENSOR BE LIABLE TO YOU ON ANY LEGAL THEORY FOR +ANY SPECIAL, INCIDENTAL, CONSEQUENTIAL, PUNITIVE OR EXEMPLARY DAMAGES +ARISING OUT OF THIS LICENSE OR THE USE OF THE WORK, EVEN IF LICENSOR HAS +BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. + +7. Termination + + a. This License and the rights granted hereunder will terminate + automatically upon any breach by You of the terms of this License. + Individuals or entities who have received Adaptations or Collections + from You under this License, however, will not have their licenses + terminated provided such individuals or entities remain in full + compliance with those licenses. Sections 1, 2, 5, 6, 7, and 8 will + survive any termination of this License. + b. Subject to the above terms and conditions, the license granted here is + perpetual (for the duration of the applicable copyright in the Work). + Notwithstanding the above, Licensor reserves the right to release the + Work under different license terms or to stop distributing the Work at + any time; provided, however that any such election will not serve to + withdraw this License (or any other license that has been, or is + required to be, granted under the terms of this License), and this + License will continue in full force and effect unless terminated as + stated above. + +8. Miscellaneous + + a. Each time You Distribute or Publicly Perform the Work or a Collection, + the Licensor offers to the recipient a license to the Work on the same + terms and conditions as the license granted to You under this License. + b. Each time You Distribute or Publicly Perform an Adaptation, Licensor + offers to the recipient a license to the original Work on the same + terms and conditions as the license granted to You under this License. + c. If any provision of this License is invalid or unenforceable under + applicable law, it shall not affect the validity or enforceability of + the remainder of the terms of this License, and without further action + by the parties to this agreement, such provision shall be reformed to + the minimum extent necessary to make such provision valid and + enforceable. + d. No term or provision of this License shall be deemed waived and no + breach consented to unless such waiver or consent shall be in writing + and signed by the party to be charged with such waiver or consent. + e. This License constitutes the entire agreement between the parties with + respect to the Work licensed here. There are no understandings, + agreements or representations with respect to the Work not specified + here. Licensor shall not be bound by any additional provisions that + may appear in any communication from You. This License may not be + modified without the mutual written agreement of the Licensor and You. + f. The rights granted under, and the subject matter referenced, in this + License were drafted utilizing the terminology of the Berne Convention + for the Protection of Literary and Artistic Works (as amended on + September 28, 1979), the Rome Convention of 1961, the WIPO Copyright + Treaty of 1996, the WIPO Performances and Phonograms Treaty of 1996 + and the Universal Copyright Convention (as revised on July 24, 1971). + These rights and subject matter take effect in the relevant + jurisdiction in which the License terms are sought to be enforced + according to the corresponding provisions of the implementation of + those treaty provisions in the applicable national law. If the + standard suite of rights granted under applicable copyright law + includes additional rights not granted under this License, such + additional rights are deemed to be included in the License; this + License is not intended to restrict the license of any rights under + applicable law. + + +Creative Commons Notice + + Creative Commons is not a party to this License, and makes no warranty + whatsoever in connection with the Work. Creative Commons will not be + liable to You or any party on any legal theory for any damages + whatsoever, including without limitation any general, special, + incidental or consequential damages arising in connection to this + license. Notwithstanding the foregoing two (2) sentences, if Creative + Commons has expressly identified itself as the Licensor hereunder, it + shall have all rights and obligations of Licensor. + + Except for the limited purpose of indicating to the public that the + Work is licensed under the CCPL, Creative Commons does not authorize + the use by either party of the trademark "Creative Commons" or any + related trademark or logo of Creative Commons without the prior + written consent of Creative Commons. Any permitted use will be in + compliance with Creative Commons' then-current trademark usage + guidelines, as may be published on its website or otherwise made + available upon request from time to time. For the avoidance of doubt, + this trademark restriction does not form part of this License. + + Creative Commons may be contacted at https://creativecommons.org/. diff --git a/README.md b/README.md new file mode 100644 index 0000000..5a3d194 --- /dev/null +++ b/README.md @@ -0,0 +1,2 @@ +# CVR_Return-green-UI + -- 2.49.1 From 34986e1a6c9385f416968e7e3d491b83bb07692b Mon Sep 17 00:00:00 2001 From: Malthbern Date: Thu, 3 Apr 2025 20:50:47 -0500 Subject: [PATCH 02/18] CVR UIv1 stable update made the menu gray, and i took that personally --- ui.css | 2928 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 2928 insertions(+) create mode 100755 ui.css diff --git a/ui.css b/ui.css new file mode 100755 index 0000000..c98f694 --- /dev/null +++ b/ui.css @@ -0,0 +1,2928 @@ +/* +2560 * 1440 + +1/12 + +213,333333 + +14,814% +*/ + +html { + font-size: 2em; +} + +body { + margin: 0; + width: 100%; + height: 100%; + + overflow: hidden; + + /*font-family: 'Droid Sans';*/ + font-size: 32px; + color: #FFF; +} + +h1 { + font-weight: normal; +} + +.settings-subcategory { + display: flex; + flex-direction: column; + margin-top: 1em; + margin-bottom: 1em; + position: relative; + padding-top: 50px; +} + +/* When subcategory is first element on Settings page */ +.settings-subcategory.first { + margin-top: 0px; + padding-top: 0px; +} + +.settings-subcategory .subcategory-row-wrapper { + position: relative; + width: 100%; +} + +.settings-subcategory .subcategory-name { + font-size: 2em; + display: inline-block; + margin-bottom: 20px; + text-align: center; /* Centering categories is ugly */ +} + +.settings-subcategory .subcategory-selector { + position: absolute; + top: 10; + right: 0; +} + +.settings-subcategory .subcategory-description { + border-top: 2px solid white; + font-size: 1.2em; + margin-top: 0.1em; + color: #AAA; + padding-top: 10px; +} + +.color-primary { + background-color: #E43600; +} + +.color-primary:hover { + background-color: #E43600; +} + +/* Note: We are defining :hover and .active separately because :active:not(.active) isn't working, and to avoid using !important */ + +.button:hover { + background-color: rgb(27, 80, 55); +} + +.button:active { + background-color: rgb(45, 128, 89); +} +.button.active { + background-color: rgb(27, 80, 55); +} + +.button:disabled, .button.disabled { + background: #3c3c3c; +} + +.button.color-primary:hover { + background-color: #f56b40; +} + +.button.color-primary.disabled:hover { + background: #3c3c3c; +} + +.button.color-primary:active { + background-color: #be0b04; +} + +.button.color-primary.active { + background-color: #f56b40; +} + +#GeneralPlayerHeight { + height: 2.5em; +} + + + +.wrapper { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; +} + +.content { + position: absolute; + width: 100%; + top: 0; + height: 80%; + + border-radius: 0.25em; + overflow: hidden; + + box-sizing: border-box; + border: 3px solid #17452f; + + background-color: #373021; + + display: flex; + + left: -100%; + transition: left 0.2s linear; +} +.content.in { + left: 0%; + transition: left 0.2s linear; +} +.content.out { + left: 100%; + transition: left 0.2s linear; +} + +.content.hidden { + visibility: hidden; +} + +.list-filter { + width: 25%; + padding: 1%; +} + +.list-filter .option-caption { + font-size: 32px; + margin-top: 10px; + margin-bottom: 10px; +} + +.list-filter .content-btn { + left: 5%; +} + +.list-filter h1 { + text-align: center; + color: #FFF; + margin-top: 0; +} + +.list-content { + width: 75%; + border-left: 3px solid #59885d; + + padding: 1%; + + overflow: scroll; + + position: relative; +} + +.content-row { + display: flex; +} + +.content-cell { + width: 22.7%; + + padding: 1%; + + box-sizing: border-box; + + margin: 0 3% 3% 0; + + border: 3px solid #59885d; + + position: relative; + + border-radius: 0.25em; +} + +.content-cell-formatter { + padding-top: 100%; + margin-top: 7em; +} + +.list-filter .scroll-content { + position: absolute; + width: 100%; + left: 5%; + top: 6.5em; + bottom: 6em; +} +#props .list-filter .scroll-content { + bottom: 10.5em; +} + +.filter-option { + border: 3px solid #59885d; + border-radius: 0.25em; + padding: 0.5em; + margin-bottom: 0.5em; + position: relative; +} + +.friend .content-cell-formatter { + padding-top: 100%; + margin-top: 5em; +} + +.content-cell.friend { + width: 18.8%; + margin-right: 1.5%; + margin-bottom: 1.5%; +} +.friend .content-cell-content { + left: 7%; +} + +.friend .online-state { + position: absolute; + width: 2em; + height: 2em; + border-radius: 50%; + border: 1px solid #FFF; + margin: 0.5em; + + z-index: 1; + + background: #cc0000; +} + +.friend .online-state.online { + background: #00cc00; +} + +.friend .content-name { + bottom: 3em; +} + +.friend .content-image { + bottom: 5em; +} + +.content-cell-content { + position: absolute; + width: 100.000000%; + height: 100.000000%; + left: 5.000000%; + top: 5.000000%; +} + +.content-image { + position: absolute; + width: 100%; + height: auto; + bottom: 7em; + top: 0; + + border-radius: 0.25em; +} + +.content-name { + position: absolute; + width: 100%; + height: 1.1em; + bottom: 5.5em; + + text-align: center; + + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.content-btn { + position: absolute; + width: 100%; + height: 2em; + line-height: 1.7em; + text-align: center; + + border-radius: 0.25em; + + border: 3px solid #59885d; +} + +.content-btn.first { + bottom: 3em; +} + +.content-btn.second { + bottom: 0.5em; +} + +.content-btn.zero { + bottom: 5.5em; +} +.content-btn.neg-one { + bottom: 8em; +} + +.content-cell.world .content-cell-formatter { + margin-top: 5em; +} +.content-cell.world .content-image { + bottom: 5em; +} +.content-cell.world .content-name { + bottom: 3.2em; +} + +.content-cell.prop .content-cell-formatter { + margin-top: 9em; +} + +.content-cell.prop .content-name { + bottom: 8em; +} + +.content-cell.prop .content-image { + bottom: 9.5em; +} + +/*Home*/ +#home h1 { + text-align: center; + width: 100%; + margin-top: 0.2em; +} + +.content-shortcuts { + position: absolute; + top: 10%; + width: 24%; + padding: 1%; + height: 58%; + left: 1%; + + border-radius: 0.25em; + border: 3px solid #59885d; +} + +#home .content-shortcuts .action-btn { + padding: 0.5em 0em; + width: 5.5em; + height: 5.5em; + + text-align: center; +} +#home .content-shortcuts .action-btn img { + margin-bottom: 0.5em; +} + +.content-debug { + position: absolute; + top: 71%; + width: 24%; + padding: 1% 0.5em; + height: 26%; + left: 1%; + + border-radius: 0.25em; + border: 3px solid #59885d; +} + +.content-feed { + position: absolute; + top: 10%; + width: 52%; + padding: 1%; + height: 19%; + left: 26%; + + border-radius: 0.25em; + border: 3px solid #59885d; +} + +.content-avatar-functions { + position: absolute; + top: 31%; + width: 52%; + padding: 1%; + height: 37%; + left: 26%; + + border-radius: 0.25em; + border: 3px solid #59885d; +} + +.content-panic { + position: absolute; + top: 71%; + width: 52%; + padding: 1%; + height: 26%; + left: 26%; + + border-radius: 0.25em; + border: 3px solid #59885d; +} + +.content-panic .action-btn { + padding: 0.5em; + width: 9.5em; + height: 6em; + text-align: center; +} +.content-panic .action-btn img { + width: 3em; + height: 3em; + margin-bottom: 0.5em; +} + +.content-shortcuts-2 { + position: absolute; + top: 10%; + width: 20%; + padding: 1%; + height: 36.5%; + left: 79%; + + border-radius: 0.25em; + border: 3px solid #59885d; +} + +#home .content-shortcuts-2 .action-btn { + padding: 0.5em 0em; + width: 4.75em; + height: 4.75em; + + text-align: center; +} +#home .content-shortcuts-2 .action-btn img { + width: 2em; + height: 2em; + margin-bottom: 0.5em; +} + +.content-call { + position: absolute; + top: 49%; + width: 20%; + padding: 1%; + height: 48%; + left: 79%; + + border-radius: 0.25em; + border: 3px solid #59885d; + + text-align: center; +} + +@keyframes calling { + 0% {box-shadow: 0 0 0 1em #0AA48E} + 100% {box-shadow: 0 0 2em 1em #0AA48E} +} + +.call-profile { + width: 8em; + height: 8em; + border-radius: 50%; + margin: 2em 0; + background: #333333; +} + +.call-profile.calling { + animation: calling 2s infinite alternate; +} + +.call-name { + font-size: 1.5em; + margin-bottom: 0.5em; +} + +.call-duration { + font-size: 1.5em; + margin-bottom: 0.5em; +} + + +.content-caption { + width: 100%; + text-align: center; + margin-bottom: 0.3em; +} + +.btn-row-wrapper { + display: flex; + justify-content: space-between; + + margin-top: 0.3em; + padding: 0 0.3em; +} + + +.btn-row-wrapper.actions { + margin-bottom: 0.3em; +} + +.action-btn { + width: 4em; + height: 4em; + border-radius: 0.25em; + border: 3px solid #59885d; + padding: 0 0.2em 0 0; +} + +.action-btn img { + width: 2.6em; + height: 2.6em; +} + +/*World Detail*/ +#world-detail { + background-color: #373021; +} + +#world-detail h1 { + text-align: left; + margin-top: 0.3em; + margin-left: 0.5em; + margin-right: 4em; +} + +.close-btn { + position: absolute; + top: 1%; + right: 1%; + + border-radius: 0.25em; + border: 3px solid #59885d; + padding: 0.5em; + + width: 8em; + + text-align: center; +} + +.content-world-information { + position: absolute; + top: 10%; + width: 24%; + padding: 1%; + height: 59%; + left: 1%; + + border-radius: 0.25em; + border: 3px solid #59885d; +} + +.content-world-actions { + position: absolute; + top: 10%; + width: 48%; + padding: 1%; + height: 59%; + left: 26%; + + border-radius: 0.25em; + border: 3px solid #59885d; +} + +.content-world-author { + position: absolute; + top: 10%; + width: 24%; + padding: 1%; + height: 22%; + left: 75%; + + border-radius: 0.25em; + border: 3px solid #59885d; +} + +.content-world-author-worlds { + position: absolute; + top: 35%; + width: 24%; + padding: 1%; + height: 34%; + left: 75%; + + border-radius: 0.25em; + border: 3px solid #59885d; +} + +.content-world-instances { + position: absolute; + top: 72%; + width: 98%; + padding: 0.25%; + height: 25%; + left: 1%; + + border-radius: 0.25em; + border: 3px solid #59885d; +} + +.content-world-instances .action-btn { + margin-top: 0.3em; + margin-left: 0.5em; + height: 6em; + width: 6em; + text-align: center; + padding: 0; +} +.content-world-instances .action-btn img { + height: 60%; + width: 60%; + margin-top: 5%; + margin-bottom: 5%; +} +.content-world-instances .scroll-content { + left: 7.5em; +} + +.scroll-content { + overflow: scroll; + position: absolute; + top: 2em; + left: 0.5em; + right: 0.5em; + bottom: 0.5em; + height: auto; + width: auto; +} + +.row-wrapper { + display: flex; +} + +.content-world-actions .world-fileSize { + position: absolute; + top: 7.4em; + left: 17em; +} + +.content-world-actions .world-uploaded { + position: absolute; + top: 8.9em; + left: 17em; +} + +.content-world-actions .world-updated { + position: absolute; + top: 10.4em; + left: 17em; +} + +.cell-name { + width: 6em; +} +.cell-value { + flex: 1; +} + +.row-wrapper.even-spacing { + justify-content: space-between; +} + +.world-image { + width: 14em; + height: 14em; +} + +.content-world-actions .action-btn { + width: 6em; + height: 6em; + padding: 0.5em 0 0 0; + position: relative; + text-align: center; +} + +.content-world-actions .action-btn img { + width: 3em; + height: 3em; +} + +.content-world-actions .action-btn span { + position: absolute; + left: 0; + right: 0; + bottom: 0.5em; + width: auto; + text-align: center; + display: block; +} + +.data-worldCreateInstance { + background: rgb(0, 51, 204); +} +.data-worldCreateInstance:hover { + background: rgb(0, 102, 255); +} + +.content-world-actions .data-worldFavorite { + background: rgb(255, 153, 0); +} +.content-world-actions .data-worldFavorite:hover { + background: rgb(255, 204, 0); +} + +.content-world-actions .data-worldReport { + background: rgb(204, 0, 0); +} +.content-world-actions .data-worldReport:hover { + background: rgb(255, 51, 0); +} + +.content-world-actions .action-btn { + position: absolute; +} +.content-world-actions .action-btn.row1 { + top: 0.5em; +} +.content-world-actions .action-btn.row2 { + bottom: -0.5em; +} +.content-world-actions .action-btn.col1 { + left: 15.8em; +} +.content-world-actions .action-btn.col2 { + left: 23.3em; +} +.content-world-actions .action-btn.col3 { + left: 30.8em; +} +.world-author-image { + width: 5em; + height: 5em; + margin-right: 0.5em; +} +.data-author-profile { + position: absolute; + left: 6em; + right: 0; + width: auto; + height: 2em; + bottom: -1.9em; + line-height: 1.6em; + text-align: center; +} + +.world-authorWorld img { + width: 4em; + height: 4em; + margin-right: 0.5em; + margin-bottom: 1em; +} + +.author-world-btn { + line-height: 1.6em; + height: 2em; + text-align: center; + width: 100%; + margin-top: 0.8em; +} + +.world-instance { + width: 15%; + + margin-right: 1em; + + border-radius: 0.25em; + border: 3px solid #59885d; + + position: relative; + + height: 6em; + + padding: 0.5em; + + overflow: hidden; +} + +.world-instance.new { + border-color: #E43600; +} + +.world-instance .instance-image { + position: absolute; + top: 0px; + left: 0px; + bottom: 0px; + right: 0px; + width: auto; + height: auto; + + filter: blur(3px); + + background-position: center; + background-size: cover; +} +.world-instance:hover .instance-image { + filter: blur(3px) brightness(130%); +} + +.world-instance .playerCount { + position: absolute; + left: 0.5em; + right: 0.5em; + top: 0.5em; + width: auto; + text-align: right; + text-shadow: 0 0 1px #000; +} + +.world-instance .instanceRegion { + position: absolute; + left: 0.5em; + top: 0.5em; + width: auto; + text-align: right; + text-shadow: 0 0 1px #000; +} + +.world-instance .instanceName { + position:absolute; + left: 0.5em; + right: 0.5em; + bottom: 0.5em; + width: auto; + text-shadow: 0 0 3px #000; +} + +/*Instancing*/ +.world-instancing { + position: absolute; + background-color: #373021; + top: 6%; + bottom: 9%; + left: -100%; + width: 30%; + height: 81%; + + border-radius: 0.25em; + border: 3px solid #59885d; + + padding: 0.5em; +} +.world-instancing.in { + left: 35%; + transition: left 0.2s linear; +} +.world-instancing.out { + left: 100%; + transition: left 0.2s linear; +} +.world-instancing.hidden { + visibility: hidden; +} + +.world-instancing h2, .world-instancing h3 { + margin-top: 0; + text-align: center; +} + +.world-instancing .content-btn { + position: relative; + margin-bottom: 0.5em; +} + +.world-instancing .btn-region, +.world-instancing .btn-rule { + display: flex; + margin-bottom: 1em; +} + +.btn-region .region-select { + width: 33.333333%; + background-color: #373021; +} +.btn-rule .rule-select { + width: 50%; + background-color: #373021; +} +.btn-region .region-select + .region-select, +.btn-rule .rule-select + .rule-select { + border-left: 3px solid #59885d; +} +.btn-region .region-select.active, +.btn-region .region-select:hover, +.btn-rule .rule-select.active, +.btn-rule .rule-select:hover { + background-color: rgba(27, 80, 55, 1); +} + +.inp-hidden { + display: none; +} + +/*Avatar Categories*/ +.favorite-category-selection { + position: absolute; + background-color: #373021; + top: 6%; + bottom: 9%; + left: -100%; + width: 30%; + height: 81%; + + border-radius: 0.25em; + border: 3px solid #59885d; + + padding: 0.5em; +} +.favorite-category-selection.in { + left: 35%; + transition: left 0.2s linear; +} +.favorite-category-selection.out { + left: 100%; + transition: left 0.2s linear; +} +.favorite-category-selection.hidden { + visibility: hidden; +} +.favorite-category-selection .scroll-content { + top: 4em; + bottom: 4em; +} +.favorite-category-selection .favorite-category { + display: flex; + margin-bottom: 0.25em; + padding: 0.5em; +} +.favorite-category-selection .close-btn { + height: 2.5em; + top: 1em; + right: 1em; +} +.favorite-category-selection .apply-btn { + height: 2.5em; + bottom: 1em; + position: absolute; + left: 1em; + width: 8em; + text-align: center; + padding: 0.5em; +} +.favorite-category-selection span { + position: relative; + margin-left: 1em; + top: 0.4em; +} + +/*Instance Detail*/ +#instance-detail { + background-color: #373021; +} + +#instance-detail h1 { + text-align: left; + margin-top: 0.3em; + margin-left: 0.5em; + margin-right: 4em; +} + +.content-instance-owner { + position: absolute; + top: 10%; + width: 20%; + padding: 0.5em; + height: 87.5%; + left: 1%; + + border-radius: 0.25em; + border: 3px solid #59885d; +} + +.content-instance-owner .profile-image { + width: 13.5em; + height: 13.5em; + margin-left: 0.5em; +} + +.content-instance-owner h2 { + font-weight: normal; + margin-bottom: 0; + text-align: center; + margin-top: 0.2em; +} + +.content-instance-owner h3 { + font-weight: normal; + margin-top: 0; + text-align: center; + margin-bottom: 0.8em; +} + +.content-instance-owner p { + margin: 0; + margin-top: 0.5em; +} + +.content-instance-world { + position: absolute; + top: 10%; + width: 20%; + padding: 0.5em; + height: 65%; + left: 22%; + + border-radius: 0.25em; + border: 3px solid #59885d; +} + +.content-instance-world .world-image { + width: 13.5em; + height: 13.5em; + margin-left: 0.5em; +} + +.content-instance-world h2 { + font-weight: normal; + margin-bottom: 0; + text-align: center; + margin-top: 0.2em; +} + +.content-instance-information { + position: absolute; + top: 10%; + width: 25%; + padding: 0.5em; + height: 65%; + left: 43%; + + border-radius: 0.25em; + border: 3px solid #59885d; +} +.content-instance-information .cell-name { + width: 8.000000em; +} + +.content-instance-buttons { + position: absolute; + top: 77%; + width: 46%; + padding: 0; + height: 20.5%; + left: 22%; + + border-radius: 0.25em; + border: 3px solid #59885d; + + display: flex; +} +.content-instance-buttons .instance-btn { + width: 20%; + position: relative; + text-align: center; +} +.content-instance-buttons .instance-btn img { + width: 70%; + height: 70%; + margin-top: 3%; + margin-left: 15%; + margin-right: 15%; + margin-bottom: 3%; +} +.content-instance-buttons .instance-btn.disabled { + background: rgba(80, 80, 80, 1); +} +.content-instance-buttons .instance-btn + .instance-btn { + border-left: 3px solid #59885d; +} + +.content-instance-players { + position: absolute; + top: 10%; + width: 30%; + padding: 0.5em; + height: 87.5%; + left: 69%; + + border-radius: 0.25em; + border: 3px solid #59885d; +} +.content-instance-players .instancePlayer { + display: flex; +} +.content-instance-players .instancePlayer .instancePlayerImage { + width: 4em; + height: 4em; + margin-right: 1em; + margin-bottom: 0.5em; +} +.content-instance-players .instancePlayer .instancePlayerName { + flex: 1; + font-size: 1.2em; +} + +/*User Detail*/ +#user-detail { + background-color: #373021; +} +#user-detail h1 { + text-align: left; + margin-top: 0.3em; + margin-left: 0.5em; + margin-right: 4em; +} +.user-sidebar { + position: absolute; + top: 10%; + width: 20%; + padding: 0.5em; + height: 88%; + left: 1%; + + border-radius: 0.25em; + border: 3px solid #59885d; +} +#user-detail .online-state { + position: absolute; + width: 2em; + height: 2em; + border-radius: 50%; + border: 2px solid #FFF; + margin: 1em; + + z-index: 1; + + background: #cc0000; +} + +#user-detail .online-state.online { + background: #00cc00; +} +.profile-image { + width: 14.5em; + height: 14.5em; +} +.user-sidebar h2, .user-sidebar h3 { + font-weight: normal; + margin-bottom: 0; + text-align: center; + margin-top: 0.2em; +} +.user-sidebar h3 { + margin-top: 0; + margin-bottom: 0.8em; +} +.profile-extra-image { + width: 3em; + height: 3em; + margin-right: 0.25em; + margin-bottom: 0.75em; + + border-radius: 0.25em; +} +.user-sidebar p { + margin: 0; + margin-top: 0.5em; +} + +.user-tabview { + position: absolute; + top: 10%; + width: 77%; + height: 70%; + left: 22%; + + /*border-radius: 0.25em; + border: 3px solid #59885d;*/ +} +.tab-list { + display: flex; + justify-content: space-between; + + position: absolute; + z-index: 1; + width: 100%; +} +.tab-btn { + border-radius: 0.25em 0.25em 0 0; + border: 3px solid #59885d; + width: 11.5%; + padding: 0.2em 0; + text-align: center; + height: 2.1em; + position: relative; +} +.tab-btn:hover { + background-color: #59885d; +} +.tab-btn.active .active-overlay { + position: absolute; + bottom: -6px; + height: 6px; + width: 100%; + + background-color: #373021; +} +.tab-contents { + border-radius: 0 0 0.25em 0.25em; + border: 3px solid #59885d; + + position: absolute; + top: 2em; + width: 100%; + left: 0; + bottom: 0; + height: auto; + + background-color: #373021; +} + +.tab-content { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: none; +} +.tab-content.active { + display: block; +} + +.user-toolbar { + position: absolute; + top: 82%; + width: 77%; + height: 16%; + left: 22%; + + border-radius: 0.25em; + border: 3px solid #59885d; + + display: flex; +} + +.user-toolbar .toolbar-btn { + width: 11.111111%; +} + +.activityDataAvailable, +.activityDataUnavailable, +.activityDataPrivate, +.activityDataOffline, +.activityDataNoInstance, +.activityDataLoading, +.activityDataNoNone, +.activityIncompatibleWorld { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.activityDataAvailable.hidden, +.activityDataUnavailable.hidden, +.activityDataPrivate.hidden, +.activityDataOffline.hidden, +.activityDataNoInstance.hidden, +.activityDataLoading.hidden, +.activityDataNone.hidden, +.activityIncompatibleWorld.hidden { + display: none; +} + +.activityDataUnavailableInfo, +.activityDataNone { + position: absolute; + + border-radius: 0.25em; + border: 3px solid #59885d; + + display: flex; + + top: 30%; + bottom: 30%; + height: auto; + + left: 20%; + width: 60%; + + padding: 1.2em; +} + +.activityDataUnavailableInfo img, +.activityDataNone img{ + width: 6em; + height: 6em; + margin-right: 2em; +} + +@keyframes antiClockwiseSpin { + from { + transform: rotate(360deg); + } + to { + transform: rotate(0deg); + } +} + +.activityDataLoading img { + width: 3em; + height: 3em; + margin-right: 2em; + + animation-duration: 10s; + animation-iteration-count: infinite; + animation-name: antiClockwiseSpin; + animation-timing-function: linear; +} + +.activityDataUnavailableInfo div, +.activityDataNone div, +.activityDataLoading div { + flex: 1; + font-size: 1.5em; + padding-top: 0.8em; +} + +#tab-content-activity .player-instance-world-image { + width: 12em; + height: 12em; + background: red; + margin: 0.5em 0 0 0.5em; +} + +#tab-content-activity .player-instance-details { + position: absolute; + left: 13em; + top: 0.5em; + overflow: hidden; + width: 22em; +} +#tab-content-activity .player-instance-details h2 { + margin-top: 0; + height: 1.2em; + text-overflow: ellipsis; + overflow: hidden; +} +#tab-content-activity .player-instance-details .cell-name { + width: 8em; +} +#tab-content-activity .player-instance-rules { + position: absolute; + left: 0.5em; + top: 13em; + bottom: 0.5em; + height: auto; + width: 35em; + + box-sizing: border-box; + border: 3px solid #59885d; + + border-radius: 0.25em; + + padding: 0.5em; +} +#tab-content-activity .data-instancedetails { + position: relative; + width: inherit; + height: inherit; + margin-top: 1em; + text-align: center; +} + +#tab-content-activity .player-instance-players { + position: absolute; + left: 36em; + top: 0.5em; + bottom: 0.5em; + right: 0.5em; + height: auto; + width: auto; + + box-sizing: border-box; + border: 3px solid #59885d; + + border-radius: 0.25em; + + padding: 0.5em; +} + +.player-instance-players .instancePlayer { + display: flex; +} +.player-instance-players .instancePlayer .instancePlayerImage { + width: 4em; + height: 4em; + margin-right: 1em; + margin-bottom: 0.5em; +} +.player-instance-players .instancePlayer .instancePlayerName { + flex: 1; + font-size: 1.2em; +} + +.user-settings-dialog { + position: absolute; + top: 9%; + left: 34%; + width: 50%; + height: 79%; + + border-radius: 0.25em; + overflow: hidden; + + box-sizing: border-box; + border: 3px solid #59885d; + + background-color: #373021; + + padding: 1em; + + left: -100%; + transition: left 0.2s linear; + + z-index: 100; +} + +.user-settings-dialog p { + padding: 0; + margin: 0; + text-align: center; + margin-bottom: 1em; + text-align: center; + font-size: 1.500000em; +} + +.user-settings-dialog .action-btn { + height: 2em; + width: 6em; + position: absolute; + top: 1em; + right: 1em; + text-align: center; + padding-top: 0.25em; +} + +.user-settings-dialog.in { + left: 34%; + transition: left 0.2s linear; +} +.user-settings-dialog.out { + left: 100%; + transition: left 0.2s linear; +} + +.user-settings-dialog.hidden { + visibility: hidden; +} + +.user-settings-dialog .content-btn { + position: relative; +} + +/*Exit Menu*/ +#exit h1 { + width: 100%; + text-align: center; +} +.exit-spacer { + position:absolute; + left: 0; + width: 100%; + height: 2em; + + background: url(gfx/warning.svg); +} +.exit-spacer.exit-top { + top: 5em; + border-bottom: 3px solid #000; +} +.exit-spacer.exit-bottom { + bottom: 0; + border-top: 3px solid #000; +} + +#exit .content-btn { + height: 7.5em; + display: flex; + padding: 0.5em; +} +#exit .content-btn .exit-icon { + height: 6em; + width: 6em; + margin-right: 1em; +} +#exit .content-btn .text-group { + flex: 1; + text-align: left; +} + +#exit .content-btn .text-group h2 { + margin-top: 0; + margin-bottom: 0.5em; +} +#exit .content-btn .text-group p { + margin-top: 0; +} + +#exit .content-btn.exit-first { + top: 7.5em; +} +#exit .content-btn.exit-second { + top: 16.5em; +} +#exit .content-btn.exit-third { + top: 25.5em; +} + +/*Toolbar*/ +.toolbar { + position: absolute; + width: 100%; + height: 14.814814814%; + bottom: 0; + left: 0; + + border-radius: 0.25em; + overflow: hidden; + + box-sizing: border-box; + border: 3px solid #59885d; + + background-color: rgba(27, 80, 55, 0.5); + + display: flex; +} + +.toolbar-btn { + height: 100%; + width: 8.333333333%; + box-sizing: border-box; + + text-align: center; + font-weight: normal; + color: #FFF; + font-size: 1.3em; +} + +.toolbar-btn.deactivated { + background-color: rgba(14, 40, 27, 1); +} + +.toolbar-btn + .toolbar-btn { + border-left: 3px solid #59885d; +} + +.toolbar-btn-double { + height: 100%; + flex: 1; + box-sizing: border-box; + + text-align: center; + font-weight: bold; + color: #FFF; + font-size: 1.3em; + + border-left: 3px solid #59885d; + border-right: 3px solid #59885d; +} + +.toolbar-btn > img { + width: 50%; + height: 50%; + margin: 10% 25% 5%; +} + +.time-display { + margin-top: 0.1em; + font-size: 72px; +} + +/*Alert Box, Message Box*/ +.message-box { + position: absolute; + width: 40%; + height: 40%; + top: 20%; + left: -100%; + + border-radius: 0.25em; + overflow: hidden; + + box-sizing: border-box; + border: 3px solid #59885d; + + background-color: #373021; + + text-align: center; +} + +.message-box.alert-timed-box { + height: 50%; +} + +.message-box.in { + left: 30%; + transition: left 0.2s linear; +} +.message-box.out { + left: 100%; + transition: left 0.2s linear; +} + +.message-box.push-box { + left: 20%; + width: 60%; + top: 100%; + height: 10%; +} +.message-box.push-box.in { + left: 20%; + top: 70%; + transition: top 0.2s linear; +} +.message-box.push-box.out { + left: 20%; + top: 100%; + transition: top 0.2s linear; +} + +.message-box.hidden { + visibility: hidden; +} + +.message-box h2 { + font-size: 1.7em; +} + +.message-box p { + font-size: 1.3em; +} + +.message-box .action-btn { + position: absolute; + + width: 4em; + height: 2em; + + padding: 0; + + font-size: 1.5em; + line-height: 1.8em; + + bottom: 0.5em; +} +.message-box.alert-timed-box .action-btn { + bottom: 2em; +} +.message-box.alert-timed-box .message-time { + bottom: 0.5em; + position: absolute; + left: 0.5em; + right: 0.5em; + height: 2em; + border: 3px solid #59885d; + border-radius: 0.25em; +} +.message-box.alert-timed-box .message-time .message-time-bar { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 0; + background: #FFFFFF; + border: 0.25em solid rgb(128, 128, 128); +} + +.message-box .action-btn.yes-btn { + left: 2.5em; +} + +.message-box .action-btn.no-btn { + right: 2.5em; +} + +/*Settings*/ +.settings-categorie { + display: none; +} +.settings-categorie.active { + display: block; +} +.settings-categorie h1 { + margin-top: 0; +} + +/*Messages*/ +.message-categorie { + display: none; +} +.message-categorie.active { + display: block; +} +.message-categorie h1 { + margin-top: 0; +} +.message-categorie .scroll-content { + left: 0; + width: 100%; + top: 4em; + bottom: 1em; + height: auto; +} + +.message-content { + border: 3px solid #59885d; + border-radius: 0.25em; + + margin-bottom: 1em; + + display: flex; +} + +.message-image { + width: 5em; + height: 5em; + + border-right: 3px solid #59885d; + + margin-right: 1em; +} + +.message-text-wrapper { + flex: 1; + padding: 0.5em 0; +} + +.message-btn { + width: 5em; + height: 5em; + + text-align: center; + + border-left: 3px solid #59885d; +} + +.message-btn img { + width: 3.5em; + height: 3.5em; + padding-top: 0.2em; +} + +.noMessagesWrapper { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 79vh; +} +.noMessagesInfo { + position: absolute; + + border-radius: 0.25em; + border: 3px solid #59885d; + + display: flex; + + top: 38%; + bottom: 38%; + height: auto; + + left: 20%; + width: 60%; + + padding: 1.2em; +} + +.noMessagesInfo img { + width: 6em; + height: 6em; + margin-right: 2em; +} + +.noMessagesInfo div { + flex: 1; + font-size: 1.5em; + padding-top: 0.8em; +} + +/*General*/ +.filter-number { + position: absolute; + top: 0.5em; + right: 0.5em; +} + +/*Inputs*/ +.inp_slider { + border: 1px solid #59885d; + width: 100%; + height: 2em; + position: relative; + margin-bottom: 1em; +} +.inp_slider .valueBar { + position: absolute; + height: 100%; + background: white; + overflow-x: hidden; +} +.inp_slider .valueLabel { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + text-align: center; + /*text-shadow: 0 0 2px #000;*/ + line-height: 1.333333em; + font-size: 1.5em; + display: flex; + justify-content: center; + align-items: center; +} +.inp_slider .valueLabel.background { + color: white; +} +.inp_slider .valueLabel.foreground { + color: black; +} + +.inp_slider.color { + width: 80%; +} +.color-preview { + width: 18%; + position: absolute; + top: 0; + right: 0; + height: 8em; +} +.inp_dropdown { + border: 1px solid #59885d; + width: 15em; + height: 2em; + position: relative; + margin-bottom: 1em; +} +.inp_dropdown.open { + z-index: 10; +} +.inp_dropdown:hover { + background-color: rgba(180, 180, 180, 1); +} +.inp_dropdown.dropdown-full-width { + width: 100%; +} +.inp_dropdown_large { + border: 1px solid #59885d; + width: 30em; + height: 2em; + position: relative; + margin-bottom: 1em; +} +.inp_dropdown_large.open { + z-index: 10; +} +.inp_dropdown_large:hover { + background-color: rgba(180, 180, 180, 1); +} +.inp_dropdown_large.dropdown-full-width { + width: 100%; +} +.dropdown-value { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + line-height: 1.333333em; + font-size: 1.5em; + text-align: center; +} +.valueList { + position: absolute; + top: 2em; + left: 0; + width: 100%; + display: none; + border: 1px solid #59885d; + + background-color: #373021; +} +.inp_dropdown.open .valueList { + display: block; +} +.inp_dropdown_large.open .valueList { + display: block; +} +.valueList .listValue { + line-height: 1.333333em; + font-size: 1.5em; + text-align: center; +} +.valueList .listValue + .listValue { + border-top: 1px solid #59885d; +} +.inp_dropdown .valueList .listValue:hover { + background-color: rgba(180, 180, 180, 1); + color: rgba(60, 60, 60, 1); +} +.inp_dropdown_large .valueList .listValue:hover { + background-color: rgba(180, 180, 180, 1); + color: rgba(60, 60, 60, 1); +} + +.inp_toggle { + height: 2em; + width: 2em; + border: 1px solid #59885d; + margin-bottom: 1em +} +.inp_toggle.checked { + background: white; +} + +.option-caption { + margin-right: 0.5em; + font-size: 1.5em; + line-height: 1.333333em; + width: 14em; +} +.option-input { + flex: 1; + position: relative; + display: flex; + align-items: flex-end; +} + +.vertical-pack { + flex-direction: column; +} + +.vertical-pack * { + margin-bottom: 0px; +} + +.settings-categorie .inp_number { + width: 15em; +} + +.settings-categorie .content-btn { + width: 15em; + position: relative; +} + +.inp_search { + width: 100%; + border: 3px solid #59885d; + background: transparent; + border-radius: 0.25em; + padding: 0.5em; + margin-left: -0.05em; + color: #FFFFFF; +} + +/*Quick Menu*/ +.quick-menu .action-btn { + font-size: 0.5em; +} +.quick-menu-wrapper { + width: 600px; + height: 800px; + + border-radius: 0.25em; + overflow: hidden; + + box-sizing: border-box; + border: 3px solid #59885d; + + background-color: rgba(128, 128, 128, 0.8); + + position: absolute; + + top: 140px; + left: 140px; + + padding: 0.25em 0; +} + +.quick-menu-wrapper .action-btn { + width: 10em; + height: 10em; + + padding: 1em; + margin: 0.5em 1em; + + text-align: center; +} +.quick-menu-wrapper .action-btn img { + width: 7.2em; + height: 7.2em; +} + +.quick-menu-sidebar { + position: absolute; + top: 140px; + left: 20px; +} + +.quick-menu-sidebar .action-btn { + width: 6em; + height: 6em; + + padding: 0; + margin: 0 0 1em; + + text-align: center; +} + +.quick-menu-sidebar .action-btn img { + width: 10em; + height: 10em; +} + +.quick-menu-sidebar .action-btn.media.next { + margin-bottom: 5.5em; +} +.quick-menu-sidebar .action-btn.hide-names { + margin-bottom: 5.5em; +} + +.quick-menu-top { + position: absolute; + + top: 70px; + left: 140px; +} + +.menu-top-date { + position: absolute; + top: 15px; + left: 50px; +} +.quick-menu-top .time-display { + position: absolute; + left: 350px; + font-size: 1.5em; + top: 0; +} + +.quick-menu-content { + width: 1100px; + height: 800px; + + border-radius: 0.25em; + overflow: hidden; + + box-sizing: border-box; + border: 3px solid #59885d; + + background-color: rgba(128, 128, 128, 0.8); + + position: absolute; + + top: 140px; + left: 770px; + + padding: 0.25em 0; +} + +/*Keyboard*/ +#keyboard { + position: absolute; + width: 90%; + height: 70%; + top: 5%; + left: -100%; + + border-radius: 0.25em; + overflow: hidden; + + box-sizing: border-box; + border: 3px solid #59885d; + + background-color: #373021; + + text-align: center; +} +#keyboard.in { + left: 5%; + transition: left 0.2s linear; +} +#keyboard.out { + left: 100%; + transition: left 0.2s linear; +} +.keyboard-row { + width: 100%; + height: 18%; + position: absolute; + top: 0; + left: 0; + + display: flex; +} +.keyboard-row + .keyboard-row { + border-top: 3px solid #59885d; +} +.keyboard-row.r1 { + height: 10%; +} +.keyboard-row.r2 { + top: 10%; +} +.keyboard-row.r3 { + top: 28%; +} +.keyboard-row.r4 { + top: 46%; +} +.keyboard-row.r5 { + top: 64%; +} +.keyboard-row.r6 { + top: 82%; +} +#keyoard-input { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: 0; + + text-align: center; + font-size: 2em; + line-height: 1.5em; +} +.keyboard-key, +.keyboard-mod, +.keyboard-func { + flex: 1; + padding-top: 1.3em; + font-size: 1.5em; +} +.keyboard-key:hover, +.keyboard-mod:hover, +.keyboard-func:hover, +.keyboard-key.active, +.keyboard-mod.active, +.keyboard-func.active { + background-color: rgba(27, 80, 55, 1); +} +.keyboard-key + .keyboard-key, +.keyboard-key + .keyboard-mod, +.keyboard-key + .keyboard-func, +.keyboard-mod + .keyboard-key, +.keyboard-mod + .keyboard-mod, +.keyboard-mod + .keyboard-func, +.keyboard-func + .keyboard-key, +.keyboard-func + .keyboard-mod, +.keyboard-func + .keyboard-func { + border-left: 3px solid #59885d; +} +.keyboard-key.wide, +.keyboard-mod.wide, +.keyboard-func.wide { + flex: 1.5; +} +.keyboard-key.wider, +.keyboard-mod.wider, +.keyboard-func.wider { + flex: 2; +} +.keyboard-key.widest, +.keyboard-mod.widest, +.keyboard-func.widest { + flex: 2.5; +} +.keyboard-key.space { + flex: 6; +} +.cancel-key { + background: #E43600; +} +.cancel-key:hover { + background: #f56b40; +} + +.content-avatar-functions .action-btn { + padding: 40px 0; + text-align: center; +} + +.inp_button_bar { + width: 100%; + position: relative; + margin-bottom: 1em; + display: flex; +} + +.inp_button { + width: 10%; + border: 1px solid #59885d; + text-align: center; + line-height: 1.333333em; + font-size: 1.5em; + color: rgb(60,60,60); + background: #EADA4C; +} +.imperialDisplay { + width: 30%; + border: 1px solid #59885d; + text-align: center; + line-height: 1.333333em; + font-size: 1.5em; + color: white; +} + +.inp_btn_action { + width: 30%; + border: 1px solid #59885d; + text-align: center; + line-height: 1.333333em; + font-size: 1.5em; + color: white; + background: #00CC00; +} + +.inp_joystick { + width: 12em; + height: 12em; + border: 1px solid #59885d; + margin-bottom: 1em; + position: relative; + background-image: url(gfx/Joystick_bg.svg); + background-size: 100% 100%; +} +.pointer { + position: absolute; + height: 1em; + width: 1em; + border-radius: 50%; + border: 1px solid #59885d; + background: white; + margin-left: -0.5em; + margin-top: -0.5em; +} + +.inp_sliderH { + width: 4em; + height: 12em; + border: 1px solid #59885d; + position: absolute; + left: 13em; +} +.inp_sliderH .valueBar { + position: absolute; + width: 100%; + background: white; + bottom: 0; +} +.inp_sliderH .valueLabel { + position: absolute; + top: 3.1em; + left: 0; + width: 100%; + height: 100%; + text-align: center; + line-height: 1.333333em; + font-size: 1.5em; + color: #FFFFFF; +} +.inp_number { + border: 1px solid #59885d; + width: 100%; + height: 1.333em; + position: relative; + margin-bottom: 1em; + + text-align: center; + line-height: 1.333333em; + font-size: 1.5em; + color: #FFFFFF; +} + +#avatar-settings { + background-color: #373021; +} +.advAvtrProfile { + width: 100%; + height: 2em; + position: relative; + margin-bottom: 0.2em; + font-size: 1.3em; + padding: 0.2em; + text-align: center; + display: flex; +} +.advAvtrProfName { + flex: 1; + border: 2px solid #59885d; + + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.advAvtrProfSave { + width: 1.3em; + border: 2px solid #59885d; + margin-left: 0.3em; +} +.advAvtrProfDelete { + width: 1.3em; + border: 2px solid #59885d; + margin-left: 0.3em; +} + + + +/*Keyboard*/ +#numpad { + position: absolute; + width: 40%; + height: 70%; + top: 5%; + left: -100%; + + border-radius: 0.25em; + overflow: hidden; + + box-sizing: border-box; + border: 3px solid #59885d; + + background-color: #373021; + + text-align: center; +} +#numpad.in { + left: 30%; + transition: left 0.2s linear; +} +#numpad.out { + left: 100%; + transition: left 0.2s linear; +} +.mainRows { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; +} +.numpad-row { + width: 75%; + height: 20%; + position: absolute; + top: 0; + left: 0; + + display: flex; +} +.numpad-row + .numpad-row { + border-top: 3px solid #59885d; +} +.numpad-row.r1 { + top: 0; + height: 20%; +} +.numpad-row.r2 { + top: 20%; +} +.numpad-row.r3 { + top: 40%; +} +.numpad-row.r4 { + top: 60%; +} +.numpad-row.r5 { + top: 80%; +} +#numpad-input { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: 0; + + text-align: center; + font-size: 2em; + line-height: 3em; +} +#numpad-input.placeholder { + color: #777777; +} +.numpadButton { + flex: 1; + padding-top: 1.3em; + font-size: 1.5em; +} +.numpadButton.doubleWide { + flex: 2; +} +.numpadButton + .numpadButton { + border-left: 3px solid #59885d; +} + +.numpadButton.horizontal { + position: absolute; + border-left: 3px solid #59885d; + width: 25%; + height: 40%; + right: 0; +} +.numpadButton.horizontal.single { + height: 20%; +} +.numpadButton.horizontal + .numpadButton.horizontal { + border-top: 3px solid #59885d; +} + +.numpadButton.btn-back { + top: 0; + background: #E43600; +} +.numpadButton.btn-back:hover { + background: #f56b40; +} + +.numpadButton.btn-clear { + top: 20%; +} +.numpadButton.btn-minus { + top: 40%; +} +.numpadButton.btn-enter { + top: 60%; +} + +/*Avatar Details*/ +#avatar-detail { + background-color: #373021; +} + +#avatar-detail h1 { + text-align: left; + margin-top: 0.3em; + margin-left: 0.5em; + margin-right: 4em; +} +.avatar-sidebar { + position: absolute; + top: 10%; + width: 20%; + padding: 0.5em; + height: 88%; + left: 1%; + + border-radius: 0.25em; + border: 3px solid #59885d; +} +.avatar-image { + width: 14.5em; + height: 14.5em; +} +.avatar-sidebar h2, .avatar-sidebar h3 { + font-weight: normal; + margin-bottom: 0; + text-align: center; + margin-top: 0.2em; +} +.avatar-sidebar h3 { + margin-top: 0; + margin-bottom: 0.8em; +} + +.avatar-maininformation { + position: absolute; + top: 10%; + width: 77%; + height: 70%; + left: 22%; + + border-radius: 0.25em; + border: 3px solid #59885d; +} + +.avatar-toolbar { + position: absolute; + top: 82%; + width: 77%; + height: 16%; + left: 22%; + + border-radius: 0.25em; + border: 3px solid #59885d; + + display: flex; +} + +.avatar-toolbar .toolbar-btn { + width: 11.111111%; +} + +.avatar-maininformation { + padding: 0 1em; +} + +/*Prop Detail*/ +/*Avatar Details*/ +#prop-detail { + background-color: #373021; +} + +#prop-detail h1 { + text-align: left; + margin-top: 0.3em; + margin-left: 0.5em; + margin-right: 4em; +} +.prop-sidebar { + position: absolute; + top: 10%; + width: 20%; + padding: 0.5em; + height: 88%; + left: 1%; + + border-radius: 0.25em; + border: 3px solid #59885d; +} +.prop-image { + width: 14.5em; + height: 14.5em; +} +.prop-sidebar h2, .prop-sidebar h3 { + font-weight: normal; + margin-bottom: 0; + text-align: center; + margin-top: 0.2em; +} +.prop-sidebar h3 { + margin-top: 0; + margin-bottom: 0.8em; +} + +.prop-maininformation { + position: absolute; + top: 10%; + width: 77%; + height: 70%; + left: 22%; + + border-radius: 0.25em; + border: 3px solid #59885d; +} + +.prop-toolbar { + position: absolute; + top: 82%; + width: 77%; + height: 16%; + left: 22%; + + border-radius: 0.25em; + border: 3px solid #59885d; + + display: flex; +} + +.prop-toolbar .toolbar-btn { + width: 11.111111%; +} + +.prop-maininformation { + padding: 0 1em; +} + +#search .scroll-content { + top: 8em; +} + +#friend .list-content, #avatars .list-content, #worlds .list-content, #props .list-content { + padding-right: 0; + width: 76%; +} +.flex-list { + display: flex; + width: 100%; + flex-wrap: wrap; +} +.content-cell { + width: 22.000000%; +} +.content-cell.friend { + width: 18.5%; + margin-right: 1.5%; + margin-bottom: 1.5%; +} + + + +.settings-categorie p { + margin-top: 0; + margin-bottom: 0; + font-size: 1.25em; +} + +.settings-categorie .text-center { + text-align: center; +} + +.settings-categorie .contact-icons { + position: relative; + display: flex; + margin-bottom: 1em; + text-align: center; +} +.settings-categorie .contact-icons .contact-icon { + position: relative; + width: 33.3333%; +} +.settings-categorie .contact-icons .contact-icon img { + width: 150px; + height: 150px; +} +.settings-categorie .text-wrapper { + position: relative; + display: flex; +} +.settings-categorie .text-left-half { + width: 49%; + margin-right: 2%; +} +.settings-categorie .text-right-half { + width: 49%; +} + +tr { + display: flex; + border: 2px solid white; + border-bottom: 0; + text-align: center; +} +tr.first { + background: white; +} +tr.last { + border-bottom: 2px solid white; +} +th { + color: #666666; +} +th, td { + padding: 15px; + width: 50%; +} +th.first, td.first { + border-right: 2px solid white; +} + +td div { + text-align: center; + display: flex; + width: 100%; +} + +#settings-support .content-btn { + padding-top: 20px; + height: 3em; +} + +.support-code-display { + position: relative; + width: 100%; + top: 32px; + height: 96px; + font-size: 70px; + line-height: 96px; + text-align: center; + + border-radius: 8px; + + border: 3px solid #59885d; +} + +.support-code-hint { + position: relative; + top: 50px; +} + +.warning-box { + padding: 0.5em; + border: 3px solid #CCCC00; + margin-bottom: 1em; +} + +/*Search*/ +#search .list-content .hidden { + display: none; +} +.result-count { + position: absolute; + right: 10px; + top: 10px; +} +.filter-option .result-count { + top: 15px; +} +.search-results-header { + margin-bottom: 35px; + margin-right: 25px; + padding: 10px; + position: relative; + border-radius: 8px; + border: 3px solid #59885d; +} +.inp_search { + height: 70px; + font-size: 30px; + color: #333333; + background: #FFFFFF; +} + +.option-caption.nsfw-toggle-caption { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + align-items: center; + width: 100%; +} + +.nsfw-toggle-caption.hidden { + display: none; +} + +.nsfw-toggle-caption .inp_toggle { + margin: initial; +} + +#search .content-cell.avatar, #search .content-cell.world, #search .content-cell.prop { + width: 22.4%; + + padding: 1%; + + box-sizing: border-box; + + margin: 0 3% 3% 0; +} +/* +#search .content-cell.prop .content-cell-formatter { + margin-top: 7em; +}*/ + +.message-box.loading-box { + left: 20%; + width: 60%; + top: 100%; + height: 10%; + + z-index: 10000; +} +.message-box.loading-box.in { + left: 20%; + top: 70%; + transition: top 0.2s linear; +} +.message-box.loading-box.out { + left: 20%; + top: 100%; + transition: top 0.2s linear; +} + +.content-count { + z-index: 10; + position: absolute; + margin: 10px; + background: url("gfx/nav-friends.svg") no-repeat; + background-color: #222222; + background-size: 60px 34px; + background-position: 0 10px; + padding: 10px; + padding-left: 60px; + border-radius: 20px; +} + +.noflex { + display: block; +} + +.invite-request-btn { + font-size: 0.8em; + line-height: 1.700000em; +} + +#settings .filter-option { + padding: 0.35em 0.5em; +} + +.settings-categorie .row-wrapper p { + margin-top: -0.75em; + margin-bottom: 1.5em; + font-size: 1em; +} + +.row-wrapper.has-preview { + position: relative; +} +.row-wrapper.has-preview .color-preview { + position: absolute; + top: 0; + left: 330px; + width: 12%; +} + +/*Public User Content*/ +.user-public-content { + width: 22%; + margin: 0 1.5% 3%; + padding: 1em; + border: 3px solid #59885d; + border-radius: 10px; +} +.user-public-content img { + width: 11em; + height: 11em; +} +.user-public-content .name { + text-align: center; + margin: 5px 0; +} +.user-public-content .detail-btn { + border: 3px solid #59885d; + border-radius: 5px; + padding: 5px; + text-align: center; +} +.user-public-content .detail-btn:hover { + background: #59885d; +} + +img[data-loading-url] { + background: url(gfx/loading_placeholder.png) center no-repeat; + background-size: 100% 100%; +} +#search-btn { + width: 80%; + height: 40%; + font-size: 58px; + margin-top: 8px; +} + +.color-indicator { + width: 48px; + height: 48px; + margin-right: 12px; + float: left; + + display: flex; + justify-content: space-between; + + overflow: hidden; +} +.color-indicator.half { + width: 24px !important; +} +.color-indicator .color-indicator { + width: 48px; + height: 48px; + margin-right: 0; + display: inline-block; + float: left; +} +.color-indicator.round { + border-radius: 24px; +} +.color-indicator.arrow { + clip-path: polygon(0% 50%, 50% 0%, 100% 50%, 66% 50%, 66% 100%, 33% 100%, 33% 50%); +} +.option-input.pull-1{ + margin-left: -60px; +} +.option-input.pull-2{ + margin-left: -120px; +} +.option-input.pull-3{ + margin-left: -180px; +} +.log-entry { + position: relative; + display: flex; +} +.log-time { + width: 100px; +} +.log-message { + +} +.log-level-ERROR { + color: #BB0000; +} +.log-level-WARNING { + color: #BBBB00; +} \ No newline at end of file -- 2.49.1 From 1233864981b541ec81c7681a72df351f1ea2b165 Mon Sep 17 00:00:00 2001 From: Malthbern Date: Thu, 3 Apr 2025 21:11:27 -0500 Subject: [PATCH 03/18] Updated README --- README.md | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 5a3d194..3ec9515 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,12 @@ -# CVR_Return-green-UI +# Return Green UI +## Description +Just a repo where i'll keep updated CSS to return the green UI colors to the current iteration of CVR's UI + +## usage +replace ui.css you download from [here](https://gitea.malthbern.com/Malthbern/CVR_Return-green-UI/raw/branch/main/ui.css) + +in < Steam Root >/common/ChilloutVR/ChilloutVR_Data/StreamingAssets/Cohtml/UIResources/CVRTest/ + +### Obligatory disclaimer +I, Malthbern and this modification are in no affiliation with ABI and not supported by ABI. -- 2.49.1 From 4f9ffdf709773db4e42757a5098ddd079c4bd477 Mon Sep 17 00:00:00 2001 From: Malthbern Date: Thu, 15 May 2025 03:45:20 -0500 Subject: [PATCH 04/18] Updated major UI overhaul --- ui.css | 516 +++++++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 388 insertions(+), 128 deletions(-) diff --git a/ui.css b/ui.css index c98f694..1aec4b1 100755 --- a/ui.css +++ b/ui.css @@ -21,7 +21,7 @@ body { /*font-family: 'Droid Sans';*/ font-size: 32px; - color: #FFF; + color: #ffffff; } h1 { @@ -67,6 +67,7 @@ h1 { margin-top: 0.1em; color: #AAA; padding-top: 10px; + text-align: center; } .color-primary { @@ -80,14 +81,14 @@ h1 { /* Note: We are defining :hover and .active separately because :active:not(.active) isn't working, and to avoid using !important */ .button:hover { - background-color: rgb(27, 80, 55); + background-color: #1b5037; } .button:active { - background-color: rgb(45, 128, 89); + background-color: #2d8059; } .button.active { - background-color: rgb(27, 80, 55); + background-color: #1b5037; } .button:disabled, .button.disabled { @@ -134,15 +135,46 @@ h1 { overflow: hidden; box-sizing: border-box; - border: 3px solid #17452f; - - background-color: #373021; + //border: 3px solid #17452f; + background-color: rgba(55, 48, 33, 0.8); display: flex; left: -100%; transition: left 0.2s linear; } + +.home-container { + background-color: rgba(0,0,0,0); +} + +.flex-container { + display: flex; + flex-direction: column; +} + +.home-right { + width: 22%; + align-self: center; + position: relative; +} +.home-left { + width: 22%; + align-self: center; + position: relative; +} +.home-center { + width: auto; + display: flex; + flex-direction: column; + align-self: center; + position: relative; +} + +.home-background { + background-color: rgba(55, 48, 33, 0.8); +} + .content.in { left: 0%; transition: left 0.2s linear; @@ -156,6 +188,19 @@ h1 { visibility: hidden; } +.contentNoBG.in { + left: 0%; + transition: left 0.2s linear; +} +.contentNoBG.out { + left: 100%; + transition: left 0.2s linear; +} + +.contentNoBG.hidden { + visibility: hidden; +} + .list-filter { width: 25%; padding: 1%; @@ -173,7 +218,7 @@ h1 { .list-filter h1 { text-align: center; - color: #FFF; + color: #ffffff; margin-top: 0; } @@ -251,7 +296,7 @@ h1 { width: 2em; height: 2em; border-radius: 50%; - border: 1px solid #FFF; + border: 1px solid #ffffff; margin: 0.5em; z-index: 1; @@ -356,16 +401,153 @@ h1 { text-align: center; width: 100%; margin-top: 0.2em; + margin-bottom: 0.2em; +} + +/* Animated Circles CSS */ + +.hexagons { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; +} + +.hexagons li { + position: absolute; + display: block; + list-style: none; + width: 20px; + height: 20px; + background: rgba(96, 183, 199, 0.5); + animation: animate 25s linear infinite; + bottom: calc(-150px - 40vh); +} + +.hexagons li:nth-child(1) { + left: 25%; + width: 80px; + height: 80px; + animation-delay: 0s; + animation-duration: 20s; + clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%); + background: rgba(47, 44, 92, 0.5); +} + +.hexagons li:nth-child(2) { + left: 10%; + width: 20px; + height: 20px; + animation-delay: 0s; + animation-duration: 25s; + clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%); + background: rgba(96, 183, 199, 0.5); +} + +.hexagons li:nth-child(3) { + left: 70%; + width: 20px; + height: 20px; + animation-delay: 0s; + animation-duration: 20s; + clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%); + background: rgba(47, 44, 92, 0.5); +} + +.hexagons li:nth-child(4) { + left: 40%; + width: 60px; + height: 60px; + animation-delay: 0s; + animation-duration: 15s; + clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%); + background: rgba(114, 63, 145, 0.5); +} + +.hexagons li:nth-child(5) { + left: 65%; + width: 20px; + height: 20px; + animation-delay: 0s; + animation-duration: 20s; + clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%); + background: rgba(96, 183, 199, 0.5); +} + +.hexagons li:nth-child(6) { + left: 75%; + width: 90px; + height: 90px; + animation-delay: 0s; + animation-duration: 25s; + clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%); + background: rgba(114, 63, 145, 0.5); +} + +.hexagons li:nth-child(7) { + left: 35%; + width: 50px; + height: 50px; + animation-delay: 0s; + animation-duration: 30s; + clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%); + background: rgba(47, 44, 92, 0.5); +} + +.hexagons li:nth-child(8) { + left: 50%; + width: 25px; + height: 25px; + animation-delay: 0s; + animation-duration: 35s; + clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%); + background: rgba(114, 63, 145, 0.5); +} + +.hexagons li:nth-child(9) { + left: 20%; + width: 15px; + height: 15px; + animation-delay: 0s; + animation-duration: 40s; + clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%); + background: rgba(47, 44, 92, 0.5); +} + +.hexagons li:nth-child(10) { + left: 85%; + width: 50px; + height: 50px; + animation-delay: 0s; + animation-duration: 45s; + clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%); + background: rgba(96, 183, 199, 0.5); +} + +@keyframes animate { + 0% { + transform: translateY(0) rotate(0deg); + opacity: 0; + } + 50% { + transform: translateY(-60vh) rotate(360deg); + opacity: 1; + } + 100% { + transform: translateY(-120vh) rotate(720deg); + opacity: 0; + } +} + +.home-content-root { + display: flex; + flex-direction: row; + justify-content: space-around; } .content-shortcuts { - position: absolute; - top: 10%; - width: 24%; - padding: 1%; - height: 58%; - left: 1%; - border-radius: 0.25em; border: 3px solid #59885d; } @@ -382,51 +564,28 @@ h1 { } .content-debug { - position: absolute; - top: 71%; - width: 24%; - padding: 1% 0.5em; - height: 26%; - left: 1%; - - border-radius: 0.25em; - border: 3px solid #59885d; -} - -.content-feed { - position: absolute; - top: 10%; - width: 52%; - padding: 1%; - height: 19%; - left: 26%; - border-radius: 0.25em; border: 3px solid #59885d; + padding: 0.5em; + margin-bottom: 10px; } .content-avatar-functions { - position: absolute; - top: 31%; - width: 52%; - padding: 1%; - height: 37%; - left: 26%; - border-radius: 0.25em; border: 3px solid #59885d; } .content-panic { - position: absolute; - top: 71%; - width: 52%; - padding: 1%; - height: 26%; - left: 26%; - border-radius: 0.25em; border: 3px solid #59885d; + margin-bottom: 10px; +} + +.content-feed { + border-radius: 0.25em; + border: 3px solid #59885d; + margin-bottom: 10px; + height: 74%; } .content-panic .action-btn { @@ -442,13 +601,6 @@ h1 { } .content-shortcuts-2 { - position: absolute; - top: 10%; - width: 20%; - padding: 1%; - height: 36.5%; - left: 79%; - border-radius: 0.25em; border: 3px solid #59885d; } @@ -461,23 +613,49 @@ h1 { text-align: center; } #home .content-shortcuts-2 .action-btn img { - width: 2em; + width: 2em; height: 2em; margin-bottom: 0.5em; } -.content-call { - position: absolute; - top: 49%; - width: 20%; - padding: 1%; - height: 48%; - left: 79%; - +.content-profile { border-radius: 0.25em; border: 3px solid #59885d; - text-align: center; + padding: 0.5em 0 0.5em 0; + margin-bottom: 10px; +} + +.content-profile .button-root { + margin-top: 20px; +} + +.content-profile .profile-btn { + padding: 0.5em 0em; + text-align: center; + border-radius: 0.25em; + border: 3px solid #59885d; + display: flex; + min-width: 45%; + justify-content: center; + margin-left: 10px; + margin-right: 10px; + z-index: 1; +} + +.content-profile .profile-btn img { + width: 2em; + height: 2em; +} + +.content-profile .profile-btn p { + align-self: center; + margin-top: 0; + margin-bottom: 0; +} + +.content-profile p { + margin: 0; } @keyframes calling { @@ -485,28 +663,39 @@ h1 { 100% {box-shadow: 0 0 2em 1em #0AA48E} } -.call-profile { - width: 8em; - height: 8em; - border-radius: 50%; - margin: 2em 0; +.profile-icon { + height: 1em; + width: 1em; + margin-right: 10px; +} + +.profile-pic { + width: 10.5em; + height: 10em; + margin: 0.5em 0; background: #333333; + aspect-ratio: 1/cos(30deg); + clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%); } -.call-profile.calling { - animation: calling 2s infinite alternate; -} - -.call-name { +.profile-username { font-size: 1.5em; - margin-bottom: 0.5em; } -.call-duration { - font-size: 1.5em; - margin-bottom: 0.5em; +.profile-rank { + display: flex; + flex-direction: row; } +.profile-title { + display: flex; + flex-direction: row; +} + +.profile-group { + display: flex; + flex-direction: row; +} .content-caption { width: 100%; @@ -659,6 +848,11 @@ h1 { display: flex; } +.row-wrapper { + display: flex; + flex-direction: row; +} + .content-world-actions .world-fileSize { position: absolute; top: 7.4em; @@ -868,6 +1062,9 @@ h1 { padding: 0.5em; } +.world-instancing.group { + height: 89%; +} .world-instancing.in { left: 35%; transition: left 0.2s linear; @@ -895,6 +1092,14 @@ h1 { display: flex; margin-bottom: 1em; } +#instance_group { + width: 100%; + display: none; + z-index: 10; +} +.group #instance_group { + display: block; +} .btn-region .region-select { width: 33.333333%; @@ -912,7 +1117,7 @@ h1 { .btn-region .region-select:hover, .btn-rule .rule-select.active, .btn-rule .rule-select:hover { - background-color: rgba(27, 80, 55, 1); + background-color: #1b5037; } .inp-hidden { @@ -1063,6 +1268,10 @@ h1 { width: 8.000000em; } +.content-instance-information .hidden { + display: none; +} + .content-instance-buttons { position: absolute; top: 77%; @@ -1073,7 +1282,7 @@ h1 { border-radius: 0.25em; border: 3px solid #59885d; - + display: flex; } .content-instance-buttons .instance-btn { @@ -1147,7 +1356,7 @@ h1 { width: 2em; height: 2em; border-radius: 50%; - border: 2px solid #FFF; + border: 2px solid #ffffff; margin: 1em; z-index: 1; @@ -1437,12 +1646,12 @@ h1 { border: 3px solid #59885d; background-color: #373021; - + padding: 1em; left: -100%; transition: left 0.2s linear; - + z-index: 100; } @@ -1551,7 +1760,7 @@ h1 { box-sizing: border-box; border: 3px solid #59885d; - background-color: rgba(27, 80, 55, 0.5); + background-color: rgba(27, 80, 55, 0.8); display: flex; } @@ -1563,12 +1772,12 @@ h1 { text-align: center; font-weight: normal; - color: #FFF; + color: #ffffff; font-size: 1.3em; } .toolbar-btn.deactivated { - background-color: rgba(14, 40, 27, 1); + background-color: rgba(14, 40, 27, 0.4); } .toolbar-btn + .toolbar-btn { @@ -1582,7 +1791,7 @@ h1 { text-align: center; font-weight: bold; - color: #FFF; + color: #ffffff; font-size: 1.3em; border-left: 3px solid #59885d; @@ -1692,7 +1901,7 @@ h1 { left: 0; height: 100%; width: 0; - background: #FFFFFF; + background: #ffffff; border: 0.25em solid rgb(128, 128, 128); } @@ -1706,10 +1915,10 @@ h1 { /*Settings*/ .settings-categorie { - display: none; + display: none; } .settings-categorie.active { - display: block; + display: block; } .settings-categorie h1 { margin-top: 0; @@ -1740,20 +1949,37 @@ h1 { margin-bottom: 1em; display: flex; + align-items: center; } .message-image { width: 5em; - height: 5em; + height: 100%; border-right: 3px solid #59885d; - margin-right: 1em; + margin-right: 0.6em; } .message-text-wrapper { flex: 1; padding: 0.5em 0; + align-self: flex-start; +} + +.message-name { + font-size: 1.3em; + font-weight: bold; +} + +.message-text { + margin-right: 0.6em; + padding-left: 0.4em; + padding-top: 0.4em; +} + +.button-root { + display: flex; } .message-btn { @@ -1779,21 +2005,21 @@ h1 { height: 79vh; } .noMessagesInfo { - position: absolute; + position: absolute; - border-radius: 0.25em; - border: 3px solid #59885d; + border-radius: 0.25em; + border: 3px solid #59885d; - display: flex; + display: flex; - top: 38%; - bottom: 38%; - height: auto; + top: 38%; + bottom: 38%; + height: auto; - left: 20%; - width: 60%; + left: 20%; + width: 60%; - padding: 1.2em; + padding: 1.2em; } .noMessagesInfo img { @@ -1982,7 +2208,7 @@ h1 { border-radius: 0.25em; padding: 0.5em; margin-left: -0.05em; - color: #FFFFFF; + color: #ffffff; } /*Quick Menu*/ @@ -2002,21 +2228,21 @@ h1 { background-color: rgba(128, 128, 128, 0.8); position: absolute; - + top: 140px; left: 140px; - + padding: 0.25em 0; } .quick-menu-wrapper .action-btn { - width: 10em; - height: 10em; + width: 10em; + height: 10em; - padding: 1em; - margin: 0.5em 1em; + padding: 1em; + margin: 0.5em 1em; - text-align: center; + text-align: center; } .quick-menu-wrapper .action-btn img { width: 7.2em; @@ -2122,7 +2348,7 @@ h1 { position: absolute; top: 0; left: 0; - + display: flex; } .keyboard-row + .keyboard-row { @@ -2153,7 +2379,7 @@ h1 { width: 100%; height: 100%; border: 0; - + text-align: center; font-size: 2em; line-height: 1.5em; @@ -2171,7 +2397,7 @@ h1 { .keyboard-key.active, .keyboard-mod.active, .keyboard-func.active { - background-color: rgba(27, 80, 55, 1); + background-color: #1b5037; } .keyboard-key + .keyboard-key, .keyboard-key + .keyboard-mod, @@ -2291,7 +2517,7 @@ h1 { text-align: center; line-height: 1.333333em; font-size: 1.5em; - color: #FFFFFF; + color: #ffffff; } .inp_number { border: 1px solid #59885d; @@ -2303,7 +2529,7 @@ h1 { text-align: center; line-height: 1.333333em; font-size: 1.5em; - color: #FFFFFF; + color: #ffffff; } #avatar-settings { @@ -2322,7 +2548,7 @@ h1 { .advAvtrProfName { flex: 1; border: 2px solid #59885d; - + white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -2443,8 +2669,8 @@ h1 { } .numpadButton.btn-back { - top: 0; - background: #E43600; + top: 0; + background: #E43600; } .numpadButton.btn-back:hover { background: #f56b40; @@ -2636,7 +2862,6 @@ h1 { .settings-categorie .contact-icons { position: relative; display: flex; - margin-bottom: 1em; text-align: center; } .settings-categorie .contact-icons .contact-icon { @@ -2646,7 +2871,25 @@ h1 { .settings-categorie .contact-icons .contact-icon img { width: 150px; height: 150px; + margin-bottom: 1em; } + +.settings-categorie .contact-icons-center { + position: relative; + display: flex; + justify-content: center; + text-align: center; +} +.settings-categorie .contact-icons-center .contact-icon { + position: relative; + width: 33.3333%; +} +.settings-categorie .contact-icons-center .contact-icon img { + width: 150px; + height: 150px; + margin-bottom: 1em; +} + .settings-categorie .text-wrapper { position: relative; display: flex; @@ -2742,7 +2985,7 @@ td div { height: 70px; font-size: 30px; color: #333333; - background: #FFFFFF; + background: #ffffff; } .option-caption.nsfw-toggle-caption { @@ -2781,7 +3024,7 @@ td div { width: 60%; top: 100%; height: 10%; - + z-index: 10000; } .message-box.loading-box.in { @@ -2800,7 +3043,7 @@ td div { position: absolute; margin: 10px; background: url("gfx/nav-friends.svg") no-repeat; - background-color: #222222; + background-color: #373021; background-size: 60px 34px; background-position: 0 10px; padding: 10px; @@ -2882,7 +3125,7 @@ img[data-loading-url] { display: flex; justify-content: space-between; - + overflow: hidden; } .color-indicator.half { @@ -2911,18 +3154,35 @@ img[data-loading-url] { margin-left: -180px; } .log-entry { - position: relative; display: flex; + align-items: flex-start; + padding: 5px 10px; } + .log-time { width: 100px; + flex-shrink: 0; + font-weight: bold; } + .log-message { - + flex-grow: 1; + width: 95%; + white-space: pre-wrap; + word-break: break-word; } + +.log-divider { + border: 0; + height: 1px; + background: rgba(255, 255, 255, 0.2); + margin: 5px 0; +} + .log-level-ERROR { color: #BB0000; } + .log-level-WARNING { color: #BBBB00; -} \ No newline at end of file +} -- 2.49.1 From 5ef42ac4f89290e04f7a5cfad6a1caeb07edde7f Mon Sep 17 00:00:00 2001 From: Malthbern Date: Sat, 17 May 2025 21:28:28 -0500 Subject: [PATCH 05/18] Updated to work with latest UI changes --- ui.css | 291 ++++++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 205 insertions(+), 86 deletions(-) diff --git a/ui.css b/ui.css index 1aec4b1..e9f09da 100755 --- a/ui.css +++ b/ui.css @@ -8,6 +8,12 @@ 14,814% */ +:root { + --menu-opacity: 0.8; + /* Malth is a nerd btw */ + --menu-bg-colour: 55, 48, 33; +} + html { font-size: 2em; } @@ -22,6 +28,8 @@ body { /*font-family: 'Droid Sans';*/ font-size: 32px; color: #ffffff; + + text-shadow: 2px 2px 8px #000; } h1 { @@ -100,7 +108,7 @@ h1 { } .button.color-primary.disabled:hover { - background: #3c3c3c; + background: #1b5037; } .button.color-primary:active { @@ -135,8 +143,7 @@ h1 { overflow: hidden; box-sizing: border-box; - //border: 3px solid #17452f; - background-color: rgba(55, 48, 33, 0.8); + background-color: rgba(var(--menu-bg-colour), var(--menu-opacity)); display: flex; @@ -172,7 +179,7 @@ h1 { } .home-background { - background-color: rgba(55, 48, 33, 0.8); + background-color: rgba(var(--menu-bg-colour), var(--menu-opacity)); } .content.in { @@ -296,7 +303,6 @@ h1 { width: 2em; height: 2em; border-radius: 50%; - border: 1px solid #ffffff; margin: 0.5em; z-index: 1; @@ -421,7 +427,7 @@ h1 { list-style: none; width: 20px; height: 20px; - background: rgba(96, 183, 199, 0.5); + background: rgba(228, 54, 0, 0.7); animation: animate 25s linear infinite; bottom: calc(-150px - 40vh); } @@ -432,8 +438,10 @@ h1 { height: 80px; animation-delay: 0s; animation-duration: 20s; - clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%); - background: rgba(47, 44, 92, 0.5); + mask-image: url("gfx/HexagonMask.svg"); + mask-size: contain; + mask-position: center; + background: rgba(158, 66, 38, 0.7); } .hexagons li:nth-child(2) { @@ -442,8 +450,10 @@ h1 { height: 20px; animation-delay: 0s; animation-duration: 25s; - clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%); - background: rgba(96, 183, 199, 0.5); + mask-image: url("gfx/hexagonMask.svg"); + mask-size: contain; + mask-position: center; + background: rgba(228, 54, 0, 0.7); } .hexagons li:nth-child(3) { @@ -452,8 +462,10 @@ h1 { height: 20px; animation-delay: 0s; animation-duration: 20s; - clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%); - background: rgba(47, 44, 92, 0.5); + mask-image: url("gfx/HexagonMask.svg"); + mask-size: contain; + mask-position: center; + background: rgba(158, 66, 38, 0.7); } .hexagons li:nth-child(4) { @@ -462,8 +474,10 @@ h1 { height: 60px; animation-delay: 0s; animation-duration: 15s; - clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%); - background: rgba(114, 63, 145, 0.5); + mask-image: url("gfx/HexagonMask.svg"); + mask-size: contain; + mask-position: center; + background: rgba(201, 123, 99, 0.7); } .hexagons li:nth-child(5) { @@ -472,8 +486,10 @@ h1 { height: 20px; animation-delay: 0s; animation-duration: 20s; - clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%); - background: rgba(96, 183, 199, 0.5); + mask-image: url("gfx/HexagonMask.svg"); + mask-size: contain; + mask-position: center; + background: rgba(228, 54, 0, 0.7); } .hexagons li:nth-child(6) { @@ -482,8 +498,10 @@ h1 { height: 90px; animation-delay: 0s; animation-duration: 25s; - clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%); - background: rgba(114, 63, 145, 0.5); + mask-image: url("gfx/HexagonMask.svg"); + mask-size: contain; + mask-position: center; + background: rgba(201, 123, 99, 0.7); } .hexagons li:nth-child(7) { @@ -492,8 +510,10 @@ h1 { height: 50px; animation-delay: 0s; animation-duration: 30s; - clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%); - background: rgba(47, 44, 92, 0.5); + mask-image: url("gfx/HexagonMask.svg"); + mask-size: contain; + mask-position: center; + background: rgba(158, 66, 38, 0.7); } .hexagons li:nth-child(8) { @@ -502,8 +522,10 @@ h1 { height: 25px; animation-delay: 0s; animation-duration: 35s; - clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%); - background: rgba(114, 63, 145, 0.5); + mask-image: url("gfx/HexagonMask.svg"); + mask-size: contain; + mask-position: center; + background: rgba(201, 123, 99, 0.7); } .hexagons li:nth-child(9) { @@ -512,8 +534,10 @@ h1 { height: 15px; animation-delay: 0s; animation-duration: 40s; - clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%); - background: rgba(47, 44, 92, 0.5); + mask-image: url("gfx/HexagonMask.svg"); + mask-size: contain; + mask-position: center; + background: rgba(158, 66, 38, 0.7); } .hexagons li:nth-child(10) { @@ -522,8 +546,10 @@ h1 { height: 50px; animation-delay: 0s; animation-duration: 45s; - clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%); - background: rgba(96, 183, 199, 0.5); + mask-image: url("gfx/HexagonMask.svg"); + mask-size: contain; + mask-position: center; + background: rgba(228, 54, 0, 0.7); } @keyframes animate { @@ -535,6 +561,9 @@ h1 { transform: translateY(-60vh) rotate(360deg); opacity: 1; } + 80% { + opacity: 1; + } 100% { transform: translateY(-120vh) rotate(720deg); opacity: 0; @@ -549,7 +578,6 @@ h1 { .content-shortcuts { border-radius: 0.25em; - border: 3px solid #59885d; } #home .content-shortcuts .action-btn { @@ -565,7 +593,6 @@ h1 { .content-debug { border-radius: 0.25em; - border: 3px solid #59885d; padding: 0.5em; margin-bottom: 10px; } @@ -577,15 +604,14 @@ h1 { .content-panic { border-radius: 0.25em; - border: 3px solid #59885d; margin-bottom: 10px; } .content-feed { border-radius: 0.25em; - border: 3px solid #59885d; margin-bottom: 10px; height: 74%; + position: relative; } .content-panic .action-btn { @@ -602,7 +628,6 @@ h1 { .content-shortcuts-2 { border-radius: 0.25em; - border: 3px solid #59885d; } #home .content-shortcuts-2 .action-btn { @@ -620,7 +645,6 @@ h1 { .content-profile { border-radius: 0.25em; - border: 3px solid #59885d; text-align: center; padding: 0.5em 0 0.5em 0; margin-bottom: 10px; @@ -670,12 +694,17 @@ h1 { } .profile-pic { - width: 10.5em; - height: 10em; - margin: 0.5em 0; + width: 11em; + height: 11em; background: #333333; aspect-ratio: 1/cos(30deg); - clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%); + mask-image: url("gfx/HexagonMask.svg"); + mask-size: contain; + mask-position: center; +} + +.profile-pic:hover { + filter: brightness(75%); } .profile-username { @@ -731,7 +760,7 @@ h1 { /*World Detail*/ #world-detail { - background-color: #373021; + background-color: #222222; } #world-detail h1 { @@ -1050,7 +1079,7 @@ h1 { /*Instancing*/ .world-instancing { position: absolute; - background-color: #373021; + background-color: #222222; top: 6%; bottom: 9%; left: -100%; @@ -1103,11 +1132,11 @@ h1 { .btn-region .region-select { width: 33.333333%; - background-color: #373021; + background-color: #222222; } .btn-rule .rule-select { width: 50%; - background-color: #373021; + background-color: #222222; } .btn-region .region-select + .region-select, .btn-rule .rule-select + .rule-select { @@ -1127,7 +1156,7 @@ h1 { /*Avatar Categories*/ .favorite-category-selection { position: absolute; - background-color: #373021; + background-color: #222222; top: 6%; bottom: 9%; left: -100%; @@ -1181,7 +1210,7 @@ h1 { /*Instance Detail*/ #instance-detail { - background-color: #373021; + background-color: #222222; } #instance-detail h1 { @@ -1191,6 +1220,18 @@ h1 { margin-right: 4em; } +/*Group Detail*/ +#group-detail { + background-color: #222222; +} + +#group-detail h1 { + text-align: left; + margin-top: 0.3em; + margin-left: 0.5em; + margin-right: 4em; +} + .content-instance-owner { position: absolute; top: 10%; @@ -1207,6 +1248,10 @@ h1 { width: 13.5em; height: 13.5em; margin-left: 0.5em; + mask-image: url("gfx/HexagonMask.svg"); + mask-size: contain; + mask-position: center; + align-self: center; } .content-instance-owner h2 { @@ -1332,7 +1377,7 @@ h1 { /*User Detail*/ #user-detail { - background-color: #373021; + background-color: #222222; } #user-detail h1 { text-align: left; @@ -1340,6 +1385,15 @@ h1 { margin-left: 0.5em; margin-right: 4em; } +#our-user-detail { + background-color: #222222; +} +#our-user-detail h1 { + text-align: left; + margin-top: 0.3em; + margin-left: 0.5em; + margin-right: 4em; +} .user-sidebar { position: absolute; top: 10%; @@ -1352,24 +1406,32 @@ h1 { border: 3px solid #59885d; } #user-detail .online-state { - position: absolute; - width: 2em; - height: 2em; - border-radius: 50%; - border: 2px solid #ffffff; - margin: 1em; - - z-index: 1; - - background: #cc0000; + z-index: 0; + width: 15em; + height: 15em; + mask-image: url("gfx/HexagonMask.svg"); + mask-size: contain; + mask-position: center; + align-self: center; + display: flex; + justify-content: center; } #user-detail .online-state.online { background: #00cc00; } + +#user-detail .online-state.offline { + background: #7c0000; +} + .profile-image { width: 14.5em; height: 14.5em; + mask-image: url("gfx/HexagonMask.svg"); + mask-size: contain; + mask-position: center; + align-self: center; } .user-sidebar h2, .user-sidebar h3 { font-weight: normal; @@ -1377,6 +1439,13 @@ h1 { text-align: center; margin-top: 0.2em; } + +.user-sidebar h1 { + text-align: center !important; + margin: 0 !important; + coh-font-fit-mode: shrink; +} + .user-sidebar h3 { margin-top: 0; margin-bottom: 0.8em; @@ -1406,7 +1475,7 @@ h1 { } .tab-list { display: flex; - justify-content: space-between; + justify-content: flex-start; position: absolute; z-index: 1; @@ -1430,7 +1499,7 @@ h1 { height: 6px; width: 100%; - background-color: #373021; + background-color: #222222; } .tab-contents { border-radius: 0 0 0.25em 0.25em; @@ -1443,7 +1512,7 @@ h1 { bottom: 0; height: auto; - background-color: #373021; + background-color: #222222; } .tab-content { @@ -1555,30 +1624,30 @@ h1 { padding-top: 0.8em; } -#tab-content-activity .player-instance-world-image { +.tab-content-activity .player-instance-world-image { width: 12em; height: 12em; background: red; margin: 0.5em 0 0 0.5em; } -#tab-content-activity .player-instance-details { +.tab-content-activity .player-instance-details { position: absolute; left: 13em; top: 0.5em; overflow: hidden; width: 22em; } -#tab-content-activity .player-instance-details h2 { +.tab-content-activity .player-instance-details h2 { margin-top: 0; height: 1.2em; text-overflow: ellipsis; overflow: hidden; } -#tab-content-activity .player-instance-details .cell-name { +.tab-content-activity .player-instance-details .cell-name { width: 8em; } -#tab-content-activity .player-instance-rules { +.tab-content-activity .player-instance-rules { position: absolute; left: 0.5em; top: 13em; @@ -1593,7 +1662,7 @@ h1 { padding: 0.5em; } -#tab-content-activity .data-instancedetails { +.tab-content-activity .data-instancedetails { position: relative; width: inherit; height: inherit; @@ -1601,7 +1670,7 @@ h1 { text-align: center; } -#tab-content-activity .player-instance-players { +.tab-content-activity .player-instance-players { position: absolute; left: 36em; top: 0.5em; @@ -1645,7 +1714,7 @@ h1 { box-sizing: border-box; border: 3px solid #59885d; - background-color: #373021; + background-color: #222222; padding: 1em; @@ -1760,7 +1829,7 @@ h1 { box-sizing: border-box; border: 3px solid #59885d; - background-color: rgba(27, 80, 55, 0.8); + background-color: rgba(var(--menu-bg-colour), var(--menu-opacity)); display: flex; } @@ -1777,7 +1846,7 @@ h1 { } .toolbar-btn.deactivated { - background-color: rgba(14, 40, 27, 0.4); + background-color: rgba(30, 31, 34, 0.4); } .toolbar-btn + .toolbar-btn { @@ -1823,7 +1892,7 @@ h1 { box-sizing: border-box; border: 3px solid #59885d; - background-color: #373021; + background-color: #222222; text-align: center; } @@ -1978,6 +2047,56 @@ h1 { padding-top: 0.4em; } +.content-feed .scroll-content { + mask-image: linear-gradient(to bottom, black 80%, transparent 100%); + top: 1.5em; + left: 0; + right: 0; + bottom: 0; + height: 93%; + overflow-x: hidden; + margin-left: 10px; + margin-right: 10px; + margin-bottom: 5px; +} + +.feed-content { + border: 3px solid #59885d; + border-radius: 0.25em; + + margin-bottom: 0.2em; + + display: flex; + align-items: center; + width: 100%; +} + +.feed-image { + width: 4em; + height: 4em; + + border-right: 3px solid #59885d; + + margin-right: 0.6em; +} + +.feed-text-wrapper { + flex: 1; + padding: 0.5em 0; + align-self: flex-start; +} + +.feed-name { + font-size: 1.3em; + font-weight: bold; +} + +.feed-text { + margin-right: 0.6em; + padding-left: 0.4em; + padding-top: 0.4em; +} + .button-root { display: flex; } @@ -2043,7 +2162,7 @@ h1 { /*Inputs*/ .inp_slider { - border: 1px solid #59885d; + border: 4px solid #59885d; width: 100%; height: 2em; position: relative; @@ -2087,7 +2206,7 @@ h1 { height: 8em; } .inp_dropdown { - border: 1px solid #59885d; + border: 4px solid #59885d; width: 15em; height: 2em; position: relative; @@ -2103,7 +2222,7 @@ h1 { width: 100%; } .inp_dropdown_large { - border: 1px solid #59885d; + border: 4px solid #59885d; width: 30em; height: 2em; position: relative; @@ -2134,9 +2253,9 @@ h1 { left: 0; width: 100%; display: none; - border: 1px solid #59885d; + border: 4px solid #59885d; - background-color: #373021; + background-color: #222222; } .inp_dropdown.open .valueList { display: block; @@ -2164,7 +2283,7 @@ h1 { .inp_toggle { height: 2em; width: 2em; - border: 1px solid #59885d; + border: 4px solid #59885d; margin-bottom: 1em } .inp_toggle.checked { @@ -2330,7 +2449,7 @@ h1 { box-sizing: border-box; border: 3px solid #59885d; - background-color: #373021; + background-color: #222222; text-align: center; } @@ -2449,7 +2568,7 @@ h1 { .inp_button { width: 10%; - border: 1px solid #59885d; + border: 4px solid #59885d; text-align: center; line-height: 1.333333em; font-size: 1.5em; @@ -2458,7 +2577,7 @@ h1 { } .imperialDisplay { width: 30%; - border: 1px solid #59885d; + border: 4px solid #59885d; text-align: center; line-height: 1.333333em; font-size: 1.5em; @@ -2467,7 +2586,7 @@ h1 { .inp_btn_action { width: 30%; - border: 1px solid #59885d; + border: 4px solid #59885d; text-align: center; line-height: 1.333333em; font-size: 1.5em; @@ -2478,7 +2597,7 @@ h1 { .inp_joystick { width: 12em; height: 12em; - border: 1px solid #59885d; + border: 4px solid #59885d; margin-bottom: 1em; position: relative; background-image: url(gfx/Joystick_bg.svg); @@ -2489,7 +2608,7 @@ h1 { height: 1em; width: 1em; border-radius: 50%; - border: 1px solid #59885d; + border: 4px solid #59885d; background: white; margin-left: -0.5em; margin-top: -0.5em; @@ -2498,7 +2617,7 @@ h1 { .inp_sliderH { width: 4em; height: 12em; - border: 1px solid #59885d; + border: 4px solid #59885d; position: absolute; left: 13em; } @@ -2520,7 +2639,7 @@ h1 { color: #ffffff; } .inp_number { - border: 1px solid #59885d; + border: 4px solid #59885d; width: 100%; height: 1.333em; position: relative; @@ -2533,7 +2652,7 @@ h1 { } #avatar-settings { - background-color: #373021; + background-color: #222222; } .advAvtrProfile { width: 100%; @@ -2580,7 +2699,7 @@ h1 { box-sizing: border-box; border: 3px solid #59885d; - background-color: #373021; + background-color: #222222; text-align: center; } @@ -2688,7 +2807,7 @@ h1 { /*Avatar Details*/ #avatar-detail { - background-color: #373021; + background-color: #222222; } #avatar-detail h1 { @@ -2758,7 +2877,7 @@ h1 { /*Prop Detail*/ /*Avatar Details*/ #prop-detail { - background-color: #373021; + background-color: #222222; } #prop-detail h1 { @@ -3043,7 +3162,7 @@ td div { position: absolute; margin: 10px; background: url("gfx/nav-friends.svg") no-repeat; - background-color: #373021; + background-color: #222222; background-size: 60px 34px; background-position: 0 10px; padding: 10px; -- 2.49.1 From e66c354ee47a8dc393d361506911a97b3d48b234 Mon Sep 17 00:00:00 2001 From: Malthbern Date: Sun, 18 May 2025 02:29:42 +0000 Subject: [PATCH 06/18] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 3ec9515..82a6a69 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ Just a repo where i'll keep updated CSS to return the green UI colors to the current iteration of CVR's UI ## usage -replace ui.css you download from [here](https://gitea.malthbern.com/Malthbern/CVR_Return-green-UI/raw/branch/main/ui.css) +replace ui.css you download from [here](https://gitea.malthbern.com/Malthbern/CVR_Return-green-UI/raw/branch/nerdbranch-dev/ui.css) in < Steam Root >/common/ChilloutVR/ChilloutVR_Data/StreamingAssets/Cohtml/UIResources/CVRTest/ -- 2.49.1 From 0dc27c05b36984f2eb4b20cbc7cace429ecf3803 Mon Sep 17 00:00:00 2001 From: Malthbern Date: Sun, 18 May 2025 06:52:48 -0500 Subject: [PATCH 07/18] Updated for build 18506920 --- ui.css | 183 +++++++++++++++------------------------------------------ 1 file changed, 46 insertions(+), 137 deletions(-) diff --git a/ui.css b/ui.css index e9f09da..b1e3d47 100755 --- a/ui.css +++ b/ui.css @@ -100,7 +100,8 @@ h1 { } .button:disabled, .button.disabled { - background: #3c3c3c; + background: #3c3c3c !important; + pointer-events: none; } .button.color-primary:hover { @@ -615,17 +616,19 @@ h1 { } .content-panic .action-btn { - padding: 0.5em; width: 9.5em; - height: 6em; + height: 6.5em; text-align: center; + display: flex; + flex-direction: column; + justify-content: flex-end; } .content-panic .action-btn img { - width: 3em; - height: 3em; - margin-bottom: 0.5em; + align-self: center; +} +.content-panic .action-btn p { + align-self: center; } - .content-shortcuts-2 { border-radius: 0.25em; } @@ -709,6 +712,9 @@ h1 { .profile-username { font-size: 1.5em; + coh-font-fit-mode: shrink; + padding-left: 10px; + padding-right: 10px; } .profile-rank { @@ -727,9 +733,13 @@ h1 { } .content-caption { - width: 100%; + width: 95%; text-align: center; margin-bottom: 0.3em; + border-bottom-color: rgba(89, 136, 93, 1.000000); + border-bottom-width: 2px; + border-bottom-style: solid; + align-self: center; } .btn-row-wrapper { @@ -760,7 +770,7 @@ h1 { /*World Detail*/ #world-detail { - background-color: #222222; + background-color: #373021; } #world-detail h1 { @@ -1079,7 +1089,7 @@ h1 { /*Instancing*/ .world-instancing { position: absolute; - background-color: #222222; + background-color: #373021; top: 6%; bottom: 9%; left: -100%; @@ -1132,11 +1142,11 @@ h1 { .btn-region .region-select { width: 33.333333%; - background-color: #222222; + background-color: #373021; } .btn-rule .rule-select { width: 50%; - background-color: #222222; + background-color: #373021; } .btn-region .region-select + .region-select, .btn-rule .rule-select + .rule-select { @@ -1156,7 +1166,7 @@ h1 { /*Avatar Categories*/ .favorite-category-selection { position: absolute; - background-color: #222222; + background-color: #373021; top: 6%; bottom: 9%; left: -100%; @@ -1210,7 +1220,7 @@ h1 { /*Instance Detail*/ #instance-detail { - background-color: #222222; + background-color: #373021; } #instance-detail h1 { @@ -1222,7 +1232,7 @@ h1 { /*Group Detail*/ #group-detail { - background-color: #222222; + background-color: #373021; } #group-detail h1 { @@ -1377,7 +1387,7 @@ h1 { /*User Detail*/ #user-detail { - background-color: #222222; + background-color: #373021; } #user-detail h1 { text-align: left; @@ -1386,7 +1396,7 @@ h1 { margin-right: 4em; } #our-user-detail { - background-color: #222222; + background-color: #373021; } #our-user-detail h1 { text-align: left; @@ -1499,7 +1509,7 @@ h1 { height: 6px; width: 100%; - background-color: #222222; + background-color: #373021; } .tab-contents { border-radius: 0 0 0.25em 0.25em; @@ -1512,7 +1522,7 @@ h1 { bottom: 0; height: auto; - background-color: #222222; + background-color: #373021; } .tab-content { @@ -1714,7 +1724,7 @@ h1 { box-sizing: border-box; border: 3px solid #59885d; - background-color: #222222; + background-color: #373021; padding: 1em; @@ -1892,7 +1902,7 @@ h1 { box-sizing: border-box; border: 3px solid #59885d; - background-color: #222222; + background-color: #373021; text-align: center; } @@ -2071,6 +2081,10 @@ h1 { width: 100%; } +.feed-content:hover { + filter: brightness(80%); +} + .feed-image { width: 4em; height: 4em; @@ -2216,7 +2230,7 @@ h1 { z-index: 10; } .inp_dropdown:hover { - background-color: rgba(180, 180, 180, 1); + background-color: rgba(55, 48, 33, 1); } .inp_dropdown.dropdown-full-width { width: 100%; @@ -2232,7 +2246,7 @@ h1 { z-index: 10; } .inp_dropdown_large:hover { - background-color: rgba(180, 180, 180, 1); + background-color: rgba(55, 48, 33, 1); } .inp_dropdown_large.dropdown-full-width { width: 100%; @@ -2255,7 +2269,7 @@ h1 { display: none; border: 4px solid #59885d; - background-color: #222222; + background-color: #373021; } .inp_dropdown.open .valueList { display: block; @@ -2272,11 +2286,11 @@ h1 { border-top: 1px solid #59885d; } .inp_dropdown .valueList .listValue:hover { - background-color: rgba(180, 180, 180, 1); + background-color: rgba(55, 48, 33, 1); color: rgba(60, 60, 60, 1); } .inp_dropdown_large .valueList .listValue:hover { - background-color: rgba(180, 180, 180, 1); + background-color: rgba(55, 48, 33, 1); color: rgba(60, 60, 60, 1); } @@ -2330,111 +2344,6 @@ h1 { color: #ffffff; } -/*Quick Menu*/ -.quick-menu .action-btn { - font-size: 0.5em; -} -.quick-menu-wrapper { - width: 600px; - height: 800px; - - border-radius: 0.25em; - overflow: hidden; - - box-sizing: border-box; - border: 3px solid #59885d; - - background-color: rgba(128, 128, 128, 0.8); - - position: absolute; - - top: 140px; - left: 140px; - - padding: 0.25em 0; -} - -.quick-menu-wrapper .action-btn { - width: 10em; - height: 10em; - - padding: 1em; - margin: 0.5em 1em; - - text-align: center; -} -.quick-menu-wrapper .action-btn img { - width: 7.2em; - height: 7.2em; -} - -.quick-menu-sidebar { - position: absolute; - top: 140px; - left: 20px; -} - -.quick-menu-sidebar .action-btn { - width: 6em; - height: 6em; - - padding: 0; - margin: 0 0 1em; - - text-align: center; -} - -.quick-menu-sidebar .action-btn img { - width: 10em; - height: 10em; -} - -.quick-menu-sidebar .action-btn.media.next { - margin-bottom: 5.5em; -} -.quick-menu-sidebar .action-btn.hide-names { - margin-bottom: 5.5em; -} - -.quick-menu-top { - position: absolute; - - top: 70px; - left: 140px; -} - -.menu-top-date { - position: absolute; - top: 15px; - left: 50px; -} -.quick-menu-top .time-display { - position: absolute; - left: 350px; - font-size: 1.5em; - top: 0; -} - -.quick-menu-content { - width: 1100px; - height: 800px; - - border-radius: 0.25em; - overflow: hidden; - - box-sizing: border-box; - border: 3px solid #59885d; - - background-color: rgba(128, 128, 128, 0.8); - - position: absolute; - - top: 140px; - left: 770px; - - padding: 0.25em 0; -} - /*Keyboard*/ #keyboard { position: absolute; @@ -2449,7 +2358,7 @@ h1 { box-sizing: border-box; border: 3px solid #59885d; - background-color: #222222; + background-color: #373021; text-align: center; } @@ -2652,7 +2561,7 @@ h1 { } #avatar-settings { - background-color: #222222; + background-color: #373021; } .advAvtrProfile { width: 100%; @@ -2699,7 +2608,7 @@ h1 { box-sizing: border-box; border: 3px solid #59885d; - background-color: #222222; + background-color: #373021; text-align: center; } @@ -2807,7 +2716,7 @@ h1 { /*Avatar Details*/ #avatar-detail { - background-color: #222222; + background-color: #373021; } #avatar-detail h1 { @@ -2877,7 +2786,7 @@ h1 { /*Prop Detail*/ /*Avatar Details*/ #prop-detail { - background-color: #222222; + background-color: #373021; } #prop-detail h1 { @@ -3162,7 +3071,7 @@ td div { position: absolute; margin: 10px; background: url("gfx/nav-friends.svg") no-repeat; - background-color: #222222; + background-color: #373021; background-size: 60px 34px; background-position: 0 10px; padding: 10px; -- 2.49.1 From 379d4ea588563bf9fb40b4e5c50ba3f82eeef595 Mon Sep 17 00:00:00 2001 From: Malthbern Date: Mon, 19 May 2025 21:10:33 -0500 Subject: [PATCH 08/18] Updated for builds 18526923 and 18526782 --- ui.css | 93 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 90 insertions(+), 3 deletions(-) diff --git a/ui.css b/ui.css index b1e3d47..7c30470 100755 --- a/ui.css +++ b/ui.css @@ -89,7 +89,7 @@ h1 { /* Note: We are defining :hover and .active separately because :active:not(.active) isn't working, and to avoid using !important */ .button:hover { - background-color: #1b5037; + background-color: #373021; } .button:active { @@ -109,7 +109,7 @@ h1 { } .button.color-primary.disabled:hover { - background: #1b5037; + background: #373021; } .button.color-primary:active { @@ -352,6 +352,7 @@ h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + coh-font-fit-mode: shrink; } .content-btn { @@ -673,6 +674,7 @@ h1 { .content-profile .profile-btn img { width: 2em; height: 2em; + margin-right: 20px; } .content-profile .profile-btn p { @@ -1385,6 +1387,53 @@ h1 { font-size: 1.2em; } +.content-instance-players .content-list-pagination { + display: flex; + justify-content: space-around; + position: relative; + top: 25em; +} + +#group-detail .scroll-content { + bottom: 4.5em; +} + +.content-list-pagination .page-arrow { + background-image: url("gfx/next-page.svg"); + background-size: contain; + height: 4em; + width: 4em; +} + +.content-list-pagination p { + font-size: 1.2em; +} + +.content-list-pagination .previous-page { + transform: rotate(180deg); +} + +.content-list-pagination .next-page { + +} + +.content-list-pagination .disabled { + pointer-events: none !important; + filter: brightness(0.5) !important; +} + +.content-list-pagination .page-arrow:hover { + filter: brightness(0.8); +} + +.profile-avatar:hover { + filter: brightness(0.8); +} + +.profile-group:hover { + filter: brightness(0.8); +} + /*User Detail*/ #user-detail { background-color: #373021; @@ -1425,6 +1474,7 @@ h1 { align-self: center; display: flex; justify-content: center; + position: relative; } #user-detail .online-state.online { @@ -1442,7 +1492,17 @@ h1 { mask-size: contain; mask-position: center; align-self: center; + z-index: 2; } + +.profile-bg { + padding:0.5em; + align-self: center; + z-index: 1; + position: absolute; + filter: brightness(0); +} + .user-sidebar h2, .user-sidebar h3 { font-weight: normal; margin-bottom: 0; @@ -1454,6 +1514,7 @@ h1 { text-align: center !important; margin: 0 !important; coh-font-fit-mode: shrink; + max-height: 85px; } .user-sidebar h3 { @@ -1796,7 +1857,32 @@ h1 { height: 7.5em; display: flex; padding: 0.5em; + position: relative; + width: auto; } + +#exit .flex-container { + flex-direction: row; + justify-content: space-around; + width: 100%; +} + +#exit .flex-container .content-btn { + width: 50%; +} + +#exit .button-container { + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + position: absolute; + padding-top: 7em; + padding-bottom: 2em; + width: 100%; + min-width: 0; +} + #exit .content-btn .exit-icon { height: 6em; width: 6em; @@ -1995,6 +2081,7 @@ h1 { /*Settings*/ .settings-categorie { display: none; + padding-bottom: 100px; } .settings-categorie.active { display: block; @@ -2081,7 +2168,7 @@ h1 { width: 100%; } -.feed-content:hover { +.feed-image:hover { filter: brightness(80%); } -- 2.49.1 From df2e6f029a563b56e1e61335767cec3530b000a4 Mon Sep 17 00:00:00 2001 From: Malthbern Date: Thu, 29 May 2025 02:16:26 -0500 Subject: [PATCH 09/18] update for build 18651133 --- ui.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/ui.css b/ui.css index 7c30470..3ba398e 100755 --- a/ui.css +++ b/ui.css @@ -1271,6 +1271,7 @@ h1 { margin-bottom: 0; text-align: center; margin-top: 0.2em; + coh-font-fit-mode: shrink; } .content-instance-owner h3 { @@ -2198,6 +2199,11 @@ h1 { padding-top: 0.4em; } +.feed-time-block { + align-self: flex-start; + margin: 10px; +} + .button-root { display: flex; } @@ -2347,6 +2353,7 @@ h1 { line-height: 1.333333em; font-size: 1.5em; text-align: center; + coh-font-fit-mode: shrink; } .valueList { position: absolute; -- 2.49.1 From 3e25ae8920a1d76c1d3debc5ac96d533b99d6280 Mon Sep 17 00:00:00 2001 From: Malthbern Date: Mon, 2 Jun 2025 22:07:42 -0500 Subject: [PATCH 10/18] update for build 18683461 --- ui.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/ui.css b/ui.css index 3ba398e..85aa562 100755 --- a/ui.css +++ b/ui.css @@ -2411,6 +2411,22 @@ h1 { align-items: flex-end; } +.option-input.flex-row { + flex-direction: column; + align-items: flex-start; +} + +.option-input .visualized-slider { + margin-bottom: 0; +} + +.option-input .slider-visualizer-level { + border-bottom: 5px solid #e43600; + width: 50%; + margin-bottom: 1em; + margin-top: 2px; +} + .vertical-pack { flex-direction: column; } -- 2.49.1 From d6e0917dfa0e81525a57ad5bd7361f3c6ea1a298 Mon Sep 17 00:00:00 2001 From: Malthbern Date: Tue, 10 Jun 2025 19:44:54 -0500 Subject: [PATCH 11/18] updated for 18802864 --- ui.css | 431 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 431 insertions(+) diff --git a/ui.css b/ui.css index 85aa562..e7008e7 100755 --- a/ui.css +++ b/ui.css @@ -3324,3 +3324,434 @@ img[data-loading-url] { .log-level-WARNING { color: #BBBB00; } + +/* Content Share: Base */ + +.content-sharing-base-dialog { + position: fixed; + background-color: #373021; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 800px; + min-width: 500px; + border: 3px solid #59885d; + padding: 20px; + z-index: 100000; + opacity: 0; + transition: opacity 0.2s linear; +} + +.content-sharing-base-dialog.in { + opacity: 1; +} + +.content-sharing-base-dialog.out { + opacity: 0; +} + +.content-sharing-base-dialog.hidden { + display: none; +} + +.content-sharing-base-dialog h2, +.content-sharing-base-dialog h3 { + margin-top: 0; + margin-bottom: 0.5em; + text-align: left; +} + +.content-sharing-base-dialog .description { + margin-bottom: 1em; + text-align: left; + font-size: 0.9em; + color: #aaa; +} + +.content-sharing-base-dialog .close-btn { + position: absolute; + top: 1%; + right: 1%; + border-radius: 0.25em; + border: 3px solid #59885d; + padding: 0.5em; + width: 8em; + text-align: center; +} + +.page-btn { + border-radius: 0.25em; + border: 3px solid #59885d; + padding: 0.5em; + width: 8em; + text-align: center; +} + +.page-btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.inp-hidden { + display: none; +} + +/* Content Share: Share Bubble */ + +.share-bubble-dialog { + max-width: 800px; + transform: translate(-50%, -60%); +} + +.share-bubble-dialog .content-btn { + position: relative; + margin-bottom: 0.5em; +} + +.share-bubble-dialog .btn-group { + display: flex; + margin-bottom: 1em; +} + +.share-bubble-dialog .option-select { + flex: 1 1 0; + min-width: 0; + background-color: inherit; + text-align: center; + padding: 0.5em; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid inherit; +} + +.share-bubble-dialog .option-select + .option-select { + margin-left: -1px; +} + +.share-bubble-dialog .option-select.active { + background-color: #1b5037; +} +.share-bubble-dialog .option-select:hover { + background-color: #373021; +} + +.share-bubble-dialog .action-buttons { + margin-top: 1em; + display: flex; + justify-content: space-between; +} + +.share-bubble-dialog .action-btn { + flex: 1; + text-align: center; + padding: 0.5em; + border-radius: 0.25em; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + margin-right: 0.5em; +} + +.share-bubble-dialog .action-btn:last-child { + margin-right: 0; +} + +/* Content Share: Share Select */ + +.share-select-dialog { + width: 650px; + height: 480px; + transform: translate(-50%, -80%); +} + +.share-select-dialog .share-options { + display: flex; + flex-direction: column; + gap: 15px; + margin-top: 20px; +} + +.share-select-dialog .share-option { + padding: 20px; + text-align: left; + cursor: pointer; + background: rgba(0, 0, 0, 0.2); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 4px; + transition: background-color 0.2s ease; +} + +.share-select-dialog .share-option:hover { + background-color: #373021; + border-color: rgba(255, 255, 255, 0.2); +} + +.share-select-dialog h3 { + margin: 0 0 8px 0; + font-size: 1.2em; +} + +.share-select-dialog p { + margin: 0; + opacity: 0.8; + font-size: 0.95em; + line-height: 1.4; +} + +/* Content Share: Direct Share */ + +.direct-share-dialog { + width: 800px; + height: 1000px; + transform: translate(-50%, -60%); + display: flex; + flex-direction: column; +} + +.direct-share-dialog .search-container { + margin: 20px 0; + padding: 10px; + background: rgba(0, 0, 0, 0.2); + border-radius: 4px; +} + +.direct-share-dialog .search-input { + width: 100%; + padding: 10px; + border: none; + background: transparent; + color: inherit; + font-size: 1.1em; +} + +.direct-share-dialog .source-indicator { + padding: 10px; + text-align: center; + opacity: 0.8; + background: rgba(0, 0, 0, 0.1); + border-radius: 4px; + margin-bottom: 20px; +} + +.direct-share-dialog .users-container { + flex: 1; + overflow-y: auto; + margin-bottom: 20px; + min-height: 0; +} + +.direct-share-dialog .user-item { + display: flex; + align-items: center; + padding: 15px; + border: 1px solid rgba(255, 255, 255, 0.1); + margin-bottom: 10px; + background: rgba(0, 0, 0, 0.2); + border-radius: 4px; + min-height: 96px; +} + +.direct-share-dialog .user-item img { + width: 96px; + height: 96px; + margin-right: 15px; + cursor: pointer; + border-radius: 4px; +} + +.direct-share-dialog .user-item .user-name { + flex: 1; + font-size: 1.3em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-right: 15px; + cursor: pointer; +} + +.direct-share-dialog .user-item .action-btn { + width: 140px; + height: 50px; + font-size: 1.2em; + color: white; + background-color: #373021; + border-radius: 4px; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.direct-share-dialog .user-item .action-btn:disabled { + opacity: 0.5; + cursor: not-allowed; + background-color: #4a9eff; +} + +.direct-share-dialog .pagination { + border-top: 1px solid rgba(255, 255, 255, 0.1); + padding-top: 20px; +} + +.direct-share-dialog .page-info { + font-size: 1.1em; + opacity: 0.8; + margin-bottom: 15px; + text-align: center; +} + +.direct-share-dialog .page-buttons { + display: flex; + justify-content: center; + gap: 20px; +} + +.direct-share-dialog .user-item .action-btn { + width: 180px; + height: 60px; + font-size: 1.2em; + color: white; + border-radius: 4px; + display: inline-flex; + align-items: center; + justify-content: center; + margin-left: 10px; + padding: 0 20px; + text-align: center; + background-color: #373021; +} + +.direct-share-dialog .user-item .action-btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.direct-share-dialog .user-item .action-btn.shared { + background-color: #4a9eff; +} + +.direct-share-dialog .user-item .action-btn.failed { + background-color: #ff6b6b; +} + +.direct-share-dialog #users-loading, +.direct-share-dialog #users-error, +.direct-share-dialog #users-empty { + text-align: center; + padding: 2em; + font-size: 1.1em; +} + +.direct-share-dialog #shares-error { + color: #ff6b6b; +} + +/* Content Share: Unshare */ + +.unshare-dialog { + width: 800px; + height: 1000px; + transform: translate(-50%, -60%); + display: flex; + flex-direction: column; +} + +.unshare-dialog .shares-container { + flex: 1; + overflow-y: auto; + margin: 20px 0; + min-height: 0; +} + +.unshare-dialog #shares-loading, +.unshare-dialog #shares-error, +.unshare-dialog #shares-empty { + text-align: center; + padding: 2em; + font-size: 1.1em; +} + +.unshare-dialog #shares-error { + color: #ff6b6b; +} + +.unshare-dialog .share-item { + display: flex; + align-items: center; + padding: 15px; + border: 1px solid rgba(255, 255, 255, 0.1); + margin-bottom: 10px; + background: rgba(0, 0, 0, 0.2); + border-radius: 4px; + min-height: 120px; +} + +.unshare-dialog .share-item img { + width: 96px; + height: 96px; + border-radius: 4px; + margin-right: 15px; + cursor: pointer; +} + +.unshare-dialog .share-item .user-name { + flex: 1; + font-size: 1.3em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-right: 15px; + cursor: pointer; +} + +.unshare-dialog .action-btn { + width: 180px; + height: 60px; + font-size: 1.2em; + color: white; + border-radius: 4px; + display: inline-flex; + align-items: center; + justify-content: center; + margin-left: 10px; + padding: 0 20px; + text-align: center; +} + +.unshare-dialog .revoke-btn { + background-color: #ff6b6b; +} + +.unshare-dialog .undo-btn { + background-color: #4a9eff; +} + +.unshare-dialog .action-btn:disabled { + opacity: 0.5; + cursor: not-allowed; + background-color: #666; +} + +.unshare-dialog .pagination { + border-top: 1px solid rgba(255, 255, 255, 0.1); + padding-top: 20px; +} + +.unshare-dialog .page-info { + font-size: 1.1em; + opacity: 0.8; + margin-bottom: 15px; + text-align: center; +} + +.unshare-dialog .page-buttons { + display: flex; + justify-content: center; + gap: 20px; +} + +.unshare-dialog .share-item.revoked { + opacity: 0.7; +} -- 2.49.1 From 685234046e23e8b0dd65c83accaaff6338c6b0b0 Mon Sep 17 00:00:00 2001 From: Malthbern Date: Sun, 15 Jun 2025 21:05:54 -0500 Subject: [PATCH 12/18] inital Commit --- Keyboard.css | 245 +++++++++++++++++++++++++++++++++++++++++++ Keyboard.less | 284 ++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 529 insertions(+) create mode 100755 Keyboard.css create mode 100755 Keyboard.less diff --git a/Keyboard.css b/Keyboard.css new file mode 100755 index 0000000..cbe027f --- /dev/null +++ b/Keyboard.css @@ -0,0 +1,245 @@ +:root { + --menu-bg-colour: 55, 48, 33; + --keyboard-key-colour: 55, 48, 33; + --menu-opacity: 0.9; +} +body { + margin: 0; +} +.wrapper { + width: 100%; + height: 100%; + display: flex; + coh-partitioned: on; + text-shadow: 2px 2px 8px #000; + color: white; + font-family: "Noto Sans", "Noto Sans Symbols", sans-serif; +} +.wrapper .keyboard { + width: 100%; + border-radius: 0.5em; + box-sizing: border-box; + padding: 5px; + background-color: rgb(var(--menu-bg-colour)); + text-align: center; + display: flex; + flex-direction: column; + align-self: flex-end; +} +.wrapper .keyboard .in { + left: 5%; + transition: left 0.2s linear; +} +.wrapper .keyboard .out { + left: 100%; + transition: left 0.2s linear; +} +.wrapper .keyboard .keyboard-row { + width: 100%; + display: flex; +} +.wrapper .keyboard .keyboard-row .spacer { + flex: 1.55; +} +.wrapper .keyboard .keyboard-row .special-keys { + flex: 0.5 !important; + border: 0 !important; + background-color: transparent !important; +} +.wrapper .keyboard .keyboard-row .special-keys:hover { + filter: brightness(0.8) !important; +} +.wrapper .keyboard .keyboard-row .keyboard-key, +.wrapper .keyboard .keyboard-row .keyboard-mod, +.wrapper .keyboard .keyboard-row .keyboard-func { + flex: 1; + min-height: 2.5em; + font-size: 1.61em; + display: flex; + align-items: center; + justify-content: center; + border: 2px solid #59885d; + margin: 2px; + border-radius: 0.25em; + background-color: rgb(var(--keyboard-key-colour)); +} +.wrapper .keyboard .keyboard-row .keyboard-key span, +.wrapper .keyboard .keyboard-row .keyboard-mod span, +.wrapper .keyboard .keyboard-row .keyboard-func span { + width: 1em; + display: block; +} +.wrapper .keyboard .keyboard-row .keyboard-key:hover, +.wrapper .keyboard .keyboard-row .keyboard-mod:hover, +.wrapper .keyboard .keyboard-row .keyboard-func:hover, +.wrapper .keyboard .keyboard-row .keyboard-key:active, +.wrapper .keyboard .keyboard-row .keyboard-mod:active, +.wrapper .keyboard .keyboard-row .keyboard-func:active { + background-color: #1b5037; +} +.wrapper .keyboard .keyboard-row .wide { + flex: 1.5; +} +.wrapper .keyboard .keyboard-row .wider { + flex: 2; +} +.wrapper .keyboard .keyboard-row .widest { + flex: 2.5; +} +.wrapper .keyboard .keyboard-row .space { + flex: 10; +} +.wrapper .keyboard .keyboard-row .cancel-key { + background: #E43600; +} +.wrapper .keyboard .keyboard-row .cancel-key:hover { + background-color: #E43600; + filter: brightness(80%); +} +.wrapper .keyboard .keyboard-row .submit-key { + background: #37BD3C; +} +.wrapper .keyboard .keyboard-row .submit-key span { + width: 4em; + display: block; +} +.wrapper .keyboard .keyboard-row .submit-key:hover { + background-color: #37BD3C; + filter: brightness(80%); +} +.wrapper .keyboard .keyboard-input-block { + width: unset; + flex: 10; + position: relative; + margin-left: 4px; + margin-right: 4px; +} +.wrapper .keyboard .keyboard-input-block .textarea-info { + position: absolute; + background-color: rgb(var(--menu-bg-colour)); + border-top-left-radius: 0.5em; + border-top-right-radius: 0.5em; + right: 10px; + top: -20px; + padding: 5px; +} +.wrapper .keyboard .keyboard-input-block .textarea-background { + position: absolute; + bottom: 0; + width: 100%; + height: auto; + background-color: rgb(var(--menu-bg-colour)); + border-radius: 0.5em; +} +.wrapper .keyboard .keyboard-input-block .textarea-container { + padding-top: 8px; + padding-left: 8px; + padding-right: 8px; + padding-bottom: 12px; + bottom: 0; + width: 100%; +} +.wrapper .keyboard .keyboard-input-block .textarea-container .input-container { + background-color: white; + border-radius: 0.5em; + border-top-width: initial; + border-left-width: initial; + border-bottom-width: initial; + border-right-width: initial; + border-top-style: solid; + border-left-style: solid; + border-right-style: solid; + border-bottom-style: solid; + border-top-color: #999999; + border-left-color: #999999; + border-right-color: #ededed; + border-bottom-color: #ededed; + background-color: #ffffff; + position: relative; + display: block; + padding-left: 4px; + padding-right: 4px; + width: 100%; + overflow-x: auto; +} +.wrapper .keyboard .keyboard-input-block .textarea-container .input-container .inputLineBlock { + text-align: left; + font-size: 2em; + color: black; + background-color: transparent; + width: 100%; + white-space: pre-wrap; + text-shadow: 0 0 0 #00000000; +} +.wrapper .keyboard .keyboard-input-block .textarea-container .input-container .input { + text-align: left; + font-size: 2em; + color: black; + margin: 0; + border: 0; + background-color: transparent; + position: relative; + white-space: nowrap; + overflow-wrap: normal; + height: inherit; + display: flex; + min-height: 0; + min-width: 0; + width: initial; + overflow-x: auto; + caret-color: transparent; + font-family: "Noto Sans", "Noto Sans Symbols", sans-serif; +} +.wrapper .keyboard .keyboard-input-block .textarea-container .input_mirror { + text-align: left; + height: 100%; + width: 100%; + color: transparent !important; + display: flex; + font-size: 2em; + padding-left: 6px; + padding-right: 4px; + text-shadow: 0 0 0 #00000000; + position: absolute; + white-space: pre-wrap; + top: 10px; + pointer-events: none; + overflow: auto; + z-index: 2; +} +.wrapper .keyboard .keyboard-input-block .textarea-container .input_mirror span { + margin: 0; + display: inline; +} +.wrapper .keyboard .keyboard-input-block .textarea-container .input_mirror .cursor { + font-size: 1em; + color: black; + border: 0.1px solid transparent; + margin-left: -8px; + display: block; + position: relative; + align-self: flex-end; + padding-bottom: 6px; +} +@keyframes blink-animation { + to { + visibility: hidden; + } +} +@-webkit-keyframes blink-animation { + to { + visibility: hidden; + } +} +.wrapper .keyboard .keyboard-input-block .placeholder { + display: block; + font-size: 2em; + color: dimgrey; + z-index: 2; + position: absolute; + text-shadow: 0 0 0 rgba(0, 0, 0, 0); + height: 100%; + padding-top: 8%; + align-self: flex-start; + padding-left: 12px; +} diff --git a/Keyboard.less b/Keyboard.less new file mode 100755 index 0000000..42757fd --- /dev/null +++ b/Keyboard.less @@ -0,0 +1,284 @@ +@menu-bg-colour: 55,48,33; +@menu-opacity: 0.9; +@keyboard-key-colour: 55, 48, 33; + +:root { + --menu-bg-colour: @menu-bg-colour; + --keyboard-key-colour: @keyboard-key-colour; + --menu-opacity: @menu-opacity; +} + +body{ + margin: 0; +} + +.wrapper { + width: 100%; + height: 100%; + display: flex; + coh-partitioned: on; + text-shadow: 2px 2px 8px #000; + color: white; + font-family: "Noto Sans", "Noto Sans Symbols", sans-serif; + + .keyboard { + width: 100%; + + border-radius: 0.5em; + + box-sizing: border-box; + //border: 3px solid #404040; + padding: 5px; + + background-color: rgb(var(--menu-bg-colour)); + + text-align: center; + display: flex; + flex-direction: column; + align-self: flex-end; + + .in { + left: 5%; + transition: left 0.2s linear; + } + + .out { + left: 100%; + transition: left 0.2s linear; + } + + .keyboard-row { + width: 100%; + display: flex; + //border-top: 3px solid #404040; + + .spacer { + flex: 1.55; + } + + .special-keys { + flex: .5 !important; + border: 0 !important; + background-color: transparent !important; + + &:hover { + filter: brightness(0.8) !important; + } + } + + .keyboard-key, + .keyboard-mod, + .keyboard-func { + flex: 1; + min-height: 2.5em; + font-size: 1.61em; + display: flex; + align-items: center; + justify-content: center; + border: 2px solid #59885d; + margin: 2px; + border-radius: 0.25em; + background-color: rgb(var(--keyboard-key-colour)); + + span { + width: 1em; + display: block; + } + + &:hover, + &:active { + background-color: #1b5037; + } + } + + .wide { + flex: 1.5; + } + + .wider { + flex: 2; + } + + .widest { + flex: 2.5; + } + + .space { + flex: 10; + } + + .cancel-key { + background: #E43600; + + &:hover { + background-color: #E43600; + filter: brightness(80%); + } + } + .submit-key { + background: #37BD3C; + + span { + width: 4em; + display: block; + } + + &:hover{ + background-color: #37BD3C; + filter: brightness(80%); + } + } + } + + .keyboard-input-block{ + width: unset; + flex: 10; + position: relative; + margin-left: 4px; + margin-right: 4px; + + .textarea-info { + position: absolute; + background-color: rgb(var(--menu-bg-colour)); + border-top-left-radius: 0.5em; + border-top-right-radius: 0.5em; + right: 10px; + top: -20px; + padding: 5px; + } + + .textarea-background { + position: absolute; + bottom: 0; + width: 100%; + height: auto; + background-color: rgb(var(--menu-bg-colour)); + border-radius: 0.5em; + } + + .textarea-container { + padding-top: 8px; + padding-left: 8px; + padding-right: 8px; + padding-bottom: 12px; + bottom: 0; + width: 100%; + + .input-container { + background-color: white; + border-radius: 0.5em; + border-top-width: initial; + border-left-width: initial; + border-bottom-width: initial; + border-right-width: initial; + border-top-style: solid; + border-left-style: solid; + border-right-style: solid; + border-bottom-style: solid; + border-top-color: rgba(153, 153, 153, 1.000000); + border-left-color: rgba(153, 153, 153, 1.000000); + border-right-color: rgba(237, 237, 237, 1.000000); + border-bottom-color: rgba(237, 237, 237, 1.000000); + background-color: rgba(255, 255, 255, 1.000000); + position: relative; + display: block; + padding-left: 4px; + padding-right: 4px; + width: 100%; + overflow-x: auto; + + .inputLineBlock { + text-align: left; + font-size: 2em; + color: black; + background-color: transparent; + width: 100%; + white-space: pre-wrap; + text-shadow: 0 0 0 #00000000; + } + + .input { + text-align: left; + font-size: 2em; + color: black; + margin: 0; + border: 0; + background-color: transparent; + position: relative; + white-space: nowrap; + overflow-wrap: normal; + height: inherit; + display: flex; + min-height: 0; + min-width: 0; + width: initial; + overflow-x: auto; + caret-color: transparent; + font-family: "Noto Sans", "Noto Sans Symbols", sans-serif; + } + } + + .input_mirror { + text-align: left; + height: 100%; + width: 100%; + color: transparent !important; + display: flex; + font-size: 2em; + padding-left: 6px; + padding-right: 4px; + text-shadow: 0 0 0 #00000000; + position: absolute; + white-space: pre-wrap; + top:10px; + pointer-events: none; + overflow: auto; + z-index: 2; + + span { + margin: 0; + display: inline; + } + + .cursor { + font-size: 1em; + color: black; + border:0.1px solid transparent; + margin-left: -8px; + display: block; + position: relative; + align-self: flex-end; + padding-bottom: 6px; + + //animation: blink-animation 1s steps(5, start) infinite; + //-webkit-animation: blink-animation 1s steps(5, start) infinite; + + @keyframes blink-animation { + to { + visibility: hidden; + } + } + @-webkit-keyframes blink-animation { + to { + visibility: hidden; + } + } + } + } + } + + .placeholder { + display: block; + font-size: 2em; + color: dimgrey; + z-index: 2; + position: absolute; + text-shadow: 0 0 0 rgba(0, 0, 0, 0); + height: 100%; + padding-top: 8%; + align-self: flex-start; + padding-left: 12px; + } + } + } +} -- 2.49.1 From 203afa46f8c8f426f008b322661b37ff82608ebd Mon Sep 17 00:00:00 2001 From: Malthbern <61102919+Malthbern@users.noreply.github.com> Date: Wed, 27 Aug 2025 06:19:16 -0500 Subject: [PATCH 13/18] 2025r180 --- ui.css | 787 ++++++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 615 insertions(+), 172 deletions(-) diff --git a/ui.css b/ui.css index e7008e7..312a2f7 100755 --- a/ui.css +++ b/ui.css @@ -9,7 +9,7 @@ */ :root { - --menu-opacity: 0.8; + --menu-opacity: 0.9; /* Malth is a nerd btw */ --menu-bg-colour: 55, 48, 33; } @@ -30,12 +30,18 @@ body { color: #ffffff; text-shadow: 2px 2px 8px #000; + + font-family: "Noto Sans", "Noto Sans Symbols", "Noto Sans JP", "Noto Sans TC", "Noto Sans KR", "Noto Sans Arabic", "Noto Sans SC", sans-serif; } h1 { font-weight: normal; } +.input { + font-family: "Noto Sans", "Noto Sans Symbols", "Noto Sans JP", "Noto Sans TC", "Noto Sans KR", "Noto Sans Arabic", "Noto Sans SC", sans-serif; +} + .settings-subcategory { display: flex; flex-direction: column; @@ -99,8 +105,12 @@ h1 { background-color: #1b5037; } +.button.noaction { + pointer-events: none; +} + .button:disabled, .button.disabled { - background: #3c3c3c !important; + filter: brightness(50%) grayscale(1); pointer-events: none; } @@ -134,6 +144,12 @@ h1 { left: 0; } +.root-container { + position: absolute; + width: 100%; + height: 80%; +} + .content { position: absolute; width: 100%; @@ -150,6 +166,11 @@ h1 { left: -100%; transition: left 0.2s linear; + z-index: 200; +} + +.root-content { + height: 100%; } .home-container { @@ -211,7 +232,10 @@ h1 { .list-filter { width: 25%; - padding: 1%; + padding: 0.5em; + display: flex; + justify-content: flex-start; + flex-direction: column; } .list-filter .option-caption { @@ -220,29 +244,60 @@ h1 { margin-bottom: 10px; } -.list-filter .content-btn { - left: 5%; -} - .list-filter h1 { text-align: center; color: #ffffff; margin-top: 0; + margin-bottom: 0.5em; } .list-content { width: 75%; border-left: 3px solid #59885d; - padding: 1%; + padding: 0.5em; overflow: scroll; position: relative; } +.root-content .invite-banner{ + position: absolute; + width: 75%; + height: 10%; + top: 0; + right: 0; + z-index: 10; + background-color: rgba(255, 69, 0, 0.5); +} + +.invite-banner.hidden { + display: none !important; +} + +.invite-banner span { + display: block; + height: auto; + font-size: 1.5em; +} + +.invite-banner .content-btn { + position: relative; + width: 20%; + font-size: 1.2em; +} + +.invite-banner.flex-row-container { + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; +} + .content-row { display: flex; + width: 100%; } .content-cell { @@ -267,14 +322,13 @@ h1 { } .list-filter .scroll-content { - position: absolute; width: 100%; - left: 5%; - top: 6.5em; - bottom: 6em; + flex: 100; } -#props .list-filter .scroll-content { - bottom: 10.5em; + +.list-filter .content-btn { + position: relative; + margin-top: 0.5em; } .filter-option { @@ -344,15 +398,14 @@ h1 { .content-name { position: absolute; width: 100%; - height: 1.1em; - bottom: 5.5em; + height: auto; + bottom: 5.4em; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - coh-font-fit-mode: shrink; } .content-btn { @@ -389,7 +442,7 @@ h1 { bottom: 5em; } .content-cell.world .content-name { - bottom: 3.2em; + bottom: 3em; } .content-cell.prop .content-cell-formatter { @@ -397,7 +450,7 @@ h1 { } .content-cell.prop .content-name { - bottom: 8em; + bottom: 7.7em; } .content-cell.prop .content-image { @@ -762,7 +815,6 @@ h1 { height: 4em; border-radius: 0.25em; border: 3px solid #59885d; - padding: 0 0.2em 0 0; } .action-btn img { @@ -770,6 +822,19 @@ h1 { height: 2.6em; } +.action-btn .img-inverted { + filter: invert(1); +} + +.action-btn.sm-exit { + height: auto; + width: auto; + border: 0 none; + position: absolute; + top: 1%; + right: 1%; +} + /*World Detail*/ #world-detail { background-color: #373021; @@ -782,6 +847,18 @@ h1 { margin-right: 4em; } +/* let's customize the dropdown a bit in world instance creation */ +#world-detail .valueList { + max-height: 500px; +} + +#world-detail .listValue { + text-overflow: ellipsis; + height: auto; + white-space: nowrap; + overflow: hidden; +} + .close-btn { position: absolute; top: 1%; @@ -885,6 +962,14 @@ h1 { width: auto; } +.list-filter .scroll-content { + position: relative; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + .row-wrapper { display: flex; } @@ -926,6 +1011,8 @@ h1 { .world-image { width: 14em; height: 14em; + align-self: center; + border-radius: 0.25em; } .content-world-actions .action-btn { @@ -1095,19 +1182,20 @@ h1 { top: 6%; bottom: 9%; left: -100%; - width: 30%; + width: 50%; height: 81%; + display: flex; + flex-direction: column; + border-radius: 0.25em; border: 3px solid #59885d; padding: 0.5em; } -.world-instancing.group { - height: 89%; -} + .world-instancing.in { - left: 35%; + left: 25%; transition: left 0.2s linear; } .world-instancing.out { @@ -1118,11 +1206,35 @@ h1 { visibility: hidden; } +.world-instancing .flex-row-container { + display: flex; + flex-direction: row; +} + +.world-instancing .flex-col-container { + display: flex; + flex-direction: column; + width: 50%; + align-items: center; +} + +.world-instancing .flex-col-container.bottom { + align-self: center; + width: 60%; + margin-top: 2em; +} + .world-instancing h2, .world-instancing h3 { margin-top: 0; text-align: center; } +.world-instancing .flex-col-container .content-btn { + position: relative; + margin-bottom: 0.5em; + min-width: 15em; +} + .world-instancing .content-btn { position: relative; margin-bottom: 0.5em; @@ -1134,12 +1246,23 @@ h1 { margin-bottom: 1em; } #instance_group { - width: 100%; display: none; z-index: 10; + border-radius: 0.25em; +} +#instance_group_title { + width: 100%; + display: none; + margin-top: 0.2em; + margin-bottom: 0.5em; + text-align: center; } .group #instance_group { display: block; + margin-bottom: 0; +} +.group #instance_group_title { + display: block; } .btn-region .region-select { @@ -1179,6 +1302,7 @@ h1 { border: 3px solid #59885d; padding: 0.5em; + z-index: 500; } .favorite-category-selection.in { left: 35%; @@ -1190,6 +1314,7 @@ h1 { } .favorite-category-selection.hidden { visibility: hidden; + display: block !important; } .favorite-category-selection .scroll-content { top: 4em; @@ -1202,8 +1327,11 @@ h1 { } .favorite-category-selection .close-btn { height: 2.5em; - top: 1em; + bottom: 1em; right: 1em; + top: auto; + position: absolute; + text-align: center; } .favorite-category-selection .apply-btn { height: 2.5em; @@ -1220,6 +1348,31 @@ h1 { top: 0.4em; } +.favorite-category-selection h3 { + text-align: center; + margin-bottom: 0.3em; + margin-top: 0.3em; +} + +.favorite-category-selection .big-button { + width: 80%; + height: auto; + font-size: 1.5em; + margin-top: 20px; + text-align: center; + padding: 10px; +} +.favorite-category-selection .big-button:hover { + filter: brightness(0.75); +} +.favorite-category-selection .big-button.danger{ + background-color: #b00000; +} +.favorite-category-selection .big-button.warning{ + background-color: #c4c400; + color: black; +} + /*Instance Detail*/ #instance-detail { background-color: #373021; @@ -1237,6 +1390,84 @@ h1 { background-color: #373021; } +#create-group-modal p { + text-align: center; + align-self: center; +} + +#group-detail .flex-col-container { + display: flex; + flex-direction: column; + align-items: center; +} + +#group-detail .hidden { + display: none; +} + +#group-detail .content-instance-information { + overflow-x: hidden; +} + +.editable { + position: relative; + border-radius: 0.25em; + min-height: 5em; + pointer-events: none; +} + +.editable-enable { + background-color: rbga(var(--menu-bg-colour), var(--menu-opacity)); + pointer-events: auto; +} + +.edit-icon { + position: absolute; + height: 3em; + width: 3em; + right: 0; + background-image: url("gfx/Group/icons8-edit.svg"); + /*filter: drop-shadow(0 0 1rem #1b5037); apparently drop shadow on these causes them to flicker, why? idk. Blame cohtml I guesss..... */ + display: none; + z-index: 100; +} + +.editable-enable:hover { + filter: brightness(0.75); + backdrop-filter: brightness(0.75); +} + +.upload-overlay{ + z-index: 10000; + position: absolute; + background-color: rgba(var(--menu-bg-colour), 0.8); + justify-content: center; + align-items: center; + display: none; + width: 100%; + height: 100%; + bottom: 0; + left: 0; + flex-direction: column; +} + +.upload-overlay p { + font-size: 2.5em; +} + +.upload-overlay .upload-button { + height: 2.5em; + font-size: 2.5em; + width: 8em; + text-align: center; + border: grey solid 2px; + border-radius: 0.25em; + align-self: center; + display: flex; + align-items: center; + justify-content: center; +} + #group-detail h1 { text-align: left; margin-top: 0.3em; @@ -1244,6 +1475,24 @@ h1 { margin-right: 4em; } +.group-description { + white-space: pre-wrap; +} + +.pagination-button { + height: 1.5em; + font-size: 1.5em; + width: 6em; + text-align: center; + border: grey solid 2px; + border-radius: 0.25em; + align-self: center; +} + +.pagination-button:hover{ + filter: brightness(80%); +} + .content-instance-owner { position: absolute; top: 10%; @@ -1284,6 +1533,60 @@ h1 { .content-instance-owner p { margin: 0; margin-top: 0.5em; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + height: auto; + display: block; + width: 100%; +} + +.content-instance-group { + position: absolute; + top: 10%; + width: 20%; + padding: 0.5em; + height: 65%; + left: 1%; + + border-radius: 0.25em; + border: 3px solid #59885d; +} + +.content-instance-group .profile-image { + width: 13.5em; + height: 13.5em; + margin-left: 0.5em; + mask-image: url("gfx/HexagonMask.svg"); + mask-size: contain; + mask-position: center; + align-self: center; +} + +.content-instance-group h2 { + font-weight: normal; + margin-bottom: 0; + text-align: center; + margin-top: 0.2em; + coh-font-fit-mode: shrink; +} + +.content-instance-group h3 { + font-weight: normal; + margin-top: 0; + text-align: center; + margin-bottom: 0.8em; +} + +.content-instance-group p { + margin: 0; + margin-top: 0.5em; +} + +.content-instance-group .world-image { + width: 14.5em; + height: 14.5em; + pointer-events: auto; } .content-instance-world { @@ -1330,6 +1633,11 @@ h1 { display: none; } +.content-instance-information p { + margin-bottom: 0; + margin-top: 0; +} + .content-instance-buttons { position: absolute; top: 77%; @@ -1349,6 +1657,51 @@ h1 { text-align: center; } .content-instance-buttons .instance-btn img { + width: 60%; + height: 65%; + margin-top: 3%; + margin-left: 15%; + margin-right: 15%; + margin-bottom: 3%; +} +.content-instance-buttons .instance-btn.disabled { + filter: brightness(50%) grayscale(1); + pointer-events: none; +} +.content-instance-buttons .instance-btn.noaction { + pointer-events: none; +} +.content-instance-buttons .instance-btn + .instance-btn { + border-left: 3px solid #59885d; + border-right: 3px solid #59885d; +} + +.content-group-buttons { + position: absolute; + top: 77%; + width: 67%; + padding: 0; + height: 20.5%; + left: 1%; + + border-radius: 0.25em; + border: 3px solid #59885d; + + display: flex; +} +.content-group-buttons p{ + font-size: 1.5em; + text-align: center; + display: block; + align-self: center; + flex: 100; +} +.content-group-buttons .instance-btn { + width: 14%; + position: relative; + text-align: center; +} +.content-group-buttons .instance-btn img { width: 70%; height: 70%; margin-top: 3%; @@ -1356,11 +1709,20 @@ h1 { margin-right: 15%; margin-bottom: 3%; } -.content-instance-buttons .instance-btn.disabled { - background: rgba(80, 80, 80, 1); +.content-group-buttons .instance-btn.disabled { + filter: brightness(50%) grayscale(1); + pointer-events: none; } -.content-instance-buttons .instance-btn + .instance-btn { +.content-group-buttons .instance-btn.noaction { + pointer-events: none; +} +.content-group-buttons .instance-btn + .instance-btn { border-left: 3px solid #59885d; + border-right: 3px solid #59885d; +} + +.content-group-buttons .hidden { + display: none; } .content-instance-players { @@ -1395,8 +1757,88 @@ h1 { top: 25em; } +.content-group-players { + position: absolute; + top: 10%; + width: 30%; + padding: 0.5em; + height: 87.5%; + left: 69%; + + border-radius: 0.25em; + border: 3px solid #59885d; +} +.content-group-players .instancePlayer { + display: flex; +} +.content-group-players .instancePlayer .instancePlayerImage { + width: 4em; + height: 4em; + margin-right: 1em; + margin-bottom: 0.5em; +} +.content-group-players .instancePlayer .instancePlayerName { + flex: 1; + font-size: 1.2em; + overflow: hidden; +} + +.content-group-players .instancePlayer .manageButton { + border-radius: 0.25em; + border: 2px solid #59885d; + align-self: center; + z-index: 5; + pointer-events: all; +} + +.content-group-players .instancePlayer .manageButton img { + height: 100px; + width: 100px; +} + +.content-group-players .instancePlayer .manageButton:hover { + filter: brightness(0.75); +} + +.content-group-players .content-list-pagination { + display: flex; + justify-content: space-around; + position: relative; + top: 25em; +} + #group-detail .scroll-content { bottom: 4.5em; + z-index: 300; +} + +#group-detail .instancePlayer { + display: flex; + margin-top: 10px; +} +#group-detail .instancePlayer .instancePlayerImage { + width: 4em; + height: 4em; + margin-right: 1em; + margin-bottom: 0; +} +#group-detail .instancePlayer .player-name-container { + display: flex; + flex-direction: column; + flex: 100; +} + +#group-detail .instancePlayer .instancePlayerName { + flex: 1; + font-size: 1.2em; +} +#group-detail .instancePlayer .instancePlayerRank { + flex: 1; + font-size: 1em; +} + +#group-detail .favorite-category-selection { + z-index: 0; } .content-list-pagination .page-arrow { @@ -1411,7 +1853,7 @@ h1 { } .content-list-pagination .previous-page { - transform: rotate(180deg); + } .content-list-pagination .next-page { @@ -1420,7 +1862,7 @@ h1 { .content-list-pagination .disabled { pointer-events: none !important; - filter: brightness(0.5) !important; + filter: brightness(50%) grayscale(1) !important; } .content-list-pagination .page-arrow:hover { @@ -1454,6 +1896,14 @@ h1 { margin-left: 0.5em; margin-right: 4em; } + +#our-user-detail .toolbar-btn { + font-size: 1em !important; + border-right-width: 3px; + border-right-color: rgba(89, 136, 93, 1.000000); + border-right-style: solid; +} + .user-sidebar { position: absolute; top: 10%; @@ -1494,6 +1944,7 @@ h1 { mask-position: center; align-self: center; z-index: 2; + border-radius: 0.25em; } .profile-bg { @@ -1533,6 +1984,12 @@ h1 { .user-sidebar p { margin: 0; margin-top: 0.5em; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + height: auto; + display: block; + width: 100%; } .user-tabview { @@ -1612,10 +2069,23 @@ h1 { display: flex; } -.user-toolbar .toolbar-btn { +.group-toolbar .toolbar-btn { width: 11.111111%; } +.group-toolbar { + position: absolute; + top: 82%; + width: 77%; + height: 16%; + left: 22%; + + border-radius: 0.25em; + border: 3px solid #59885d; + + display: flex; +} + .activityDataAvailable, .activityDataUnavailable, .activityDataPrivate, @@ -1677,6 +2147,53 @@ h1 { } } +.note-block { + width: 100%; + height: 100%; + white-space: pre-wrap; + font-size: 1.5em; + overflow-wrap: break-word; +} + +.note-block-label { + margin: 10px; + font-size: 1.5em; + text-decoration: underline; + text-decoration-color: white; +} + +.note-block-scroll { + top: 2.5em; +} + +.note-edit-btn { + position: absolute; + font-size: 2.0em; + text-align: center; + top: 0; + left: 0; + height: 100%; + width: 100%; + border: 0; + opacity: 0; +} + +.note-edit-btn:hover { + animation-duration: 0.3s; + animation-name: noteEditAppear; + animation-fill-mode: forwards; + background-color: rgba(var(--menu-bg-colour), 0.2); +} + +@keyframes noteEditAppear { + 0%{ + opacity: 0; + } + 100%{ + opacity: 1; + } +} + .activityDataLoading img { width: 3em; height: 3em; @@ -1970,6 +2487,11 @@ h1 { margin: 10% 25% 5%; } +.user-toolbar .toolbar-btn { + font-size: 0.9em; + width: 10%; +} + .time-display { margin-top: 0.1em; font-size: 72px; @@ -1979,7 +2501,7 @@ h1 { .message-box { position: absolute; width: 40%; - height: 40%; + min-height: 20em; top: 20%; left: -100%; @@ -1992,6 +2514,11 @@ h1 { background-color: #373021; text-align: center; + z-index: 500; + justify-content: center; + align-items: center; + display: flex; + flex-direction: column; } .message-box.alert-timed-box { @@ -2008,11 +2535,18 @@ h1 { } .message-box.push-box { + z-index: 500; left: 20%; width: 60%; top: 100%; height: 10%; + min-height: 0; } + +.message-box.push-box p { + flex: 0; +} + .message-box.push-box.in { left: 20%; top: 70%; @@ -2034,11 +2568,14 @@ h1 { .message-box p { font-size: 1.3em; + margin-top: 0; + margin-bottom: 0; + flex: 100; + padding-left: 0.5em; + padding-right: 0.5em; } .message-box .action-btn { - position: absolute; - width: 4em; height: 2em; @@ -2047,7 +2584,8 @@ h1 { font-size: 1.5em; line-height: 1.8em; - bottom: 0.5em; + margin-top: 1em; + margin-bottom: 1em; } .message-box.alert-timed-box .action-btn { bottom: 2em; @@ -2079,10 +2617,16 @@ h1 { right: 2.5em; } +.message-box .flex-row-container { + display: flex; + flex-direction: row; + width: 100%; + justify-content: space-around; +} + /*Settings*/ .settings-categorie { display: none; - padding-bottom: 100px; } .settings-categorie.active { display: block; @@ -2184,8 +2728,11 @@ h1 { .feed-text-wrapper { flex: 1; - padding: 0.5em 0; + display: flex; + flex-direction: column; align-self: flex-start; + height: 100%; + justify-content: space-around; } .feed-name { @@ -2196,7 +2743,10 @@ h1 { .feed-text { margin-right: 0.6em; padding-left: 0.4em; - padding-top: 0.4em; + overflow: hidden; + white-space: nowrap; + overflow-wrap: anywhere; + text-overflow: ellipsis; } .feed-time-block { @@ -2364,6 +2914,7 @@ h1 { border: 4px solid #59885d; background-color: #373021; + z-index: 10; } .inp_dropdown.open .valueList { display: block; @@ -2442,6 +2993,7 @@ h1 { .settings-categorie .content-btn { width: 15em; position: relative; + margin-bottom: 50px; } .inp_search { @@ -2449,128 +3001,13 @@ h1 { border: 3px solid #59885d; background: transparent; border-radius: 0.25em; - padding: 0.5em; - margin-left: -0.05em; - color: #ffffff; -} - -/*Keyboard*/ -#keyboard { - position: absolute; - width: 90%; - height: 70%; - top: 5%; - left: -100%; - - border-radius: 0.25em; - overflow: hidden; - - box-sizing: border-box; - border: 3px solid #59885d; - - background-color: #373021; - - text-align: center; -} -#keyboard.in { - left: 5%; - transition: left 0.2s linear; -} -#keyboard.out { - left: 100%; - transition: left 0.2s linear; -} -.keyboard-row { - width: 100%; - height: 18%; - position: absolute; - top: 0; - left: 0; - - display: flex; -} -.keyboard-row + .keyboard-row { - border-top: 3px solid #59885d; -} -.keyboard-row.r1 { - height: 10%; -} -.keyboard-row.r2 { - top: 10%; -} -.keyboard-row.r3 { - top: 28%; -} -.keyboard-row.r4 { - top: 46%; -} -.keyboard-row.r5 { - top: 64%; -} -.keyboard-row.r6 { - top: 82%; -} -#keyoard-input { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border: 0; - - text-align: center; - font-size: 2em; - line-height: 1.5em; -} -.keyboard-key, -.keyboard-mod, -.keyboard-func { - flex: 1; - padding-top: 1.3em; - font-size: 1.5em; -} -.keyboard-key:hover, -.keyboard-mod:hover, -.keyboard-func:hover, -.keyboard-key.active, -.keyboard-mod.active, -.keyboard-func.active { - background-color: #1b5037; -} -.keyboard-key + .keyboard-key, -.keyboard-key + .keyboard-mod, -.keyboard-key + .keyboard-func, -.keyboard-mod + .keyboard-key, -.keyboard-mod + .keyboard-mod, -.keyboard-mod + .keyboard-func, -.keyboard-func + .keyboard-key, -.keyboard-func + .keyboard-mod, -.keyboard-func + .keyboard-func { - border-left: 3px solid #59885d; -} -.keyboard-key.wide, -.keyboard-mod.wide, -.keyboard-func.wide { - flex: 1.5; -} -.keyboard-key.wider, -.keyboard-mod.wider, -.keyboard-func.wider { - flex: 2; -} -.keyboard-key.widest, -.keyboard-mod.widest, -.keyboard-func.widest { - flex: 2.5; -} -.keyboard-key.space { - flex: 6; -} -.cancel-key { - background: #E43600; -} -.cancel-key:hover { - background: #f56b40; + padding-left: 0.5em; + padding-right: 0.5em; + font-family: "Noto Sans", "Noto Sans Symbols", "Noto Sans JP", "Noto Sans TC", "Noto Sans KR", "Noto Sans Arabic", "Noto Sans SC", sans-serif; + height: 70px; + font-size: 45px; + color: #000000; + background: #ffffff; } .content-avatar-functions .action-btn { @@ -2905,6 +3342,10 @@ h1 { margin-left: 0.5em; margin-right: 4em; } +.prop-maininformation .description { + white-space: normal; + overflow-wrap: break-word; +} .prop-sidebar { position: absolute; top: 10%; @@ -2963,10 +3404,6 @@ h1 { padding: 0 1em; } -#search .scroll-content { - top: 8em; -} - #friend .list-content, #avatars .list-content, #worlds .list-content, #props .list-content { padding-right: 0; width: 76%; @@ -3119,12 +3556,6 @@ td div { border-radius: 8px; border: 3px solid #59885d; } -.inp_search { - height: 70px; - font-size: 30px; - color: #333333; - background: #ffffff; -} .option-caption.nsfw-toggle-caption { display: flex; @@ -3162,9 +3593,13 @@ td div { width: 60%; top: 100%; height: 10%; + min-height: 0; z-index: 10000; } +.message-box.loading-box p { + flex: 0; +} .message-box.loading-box.in { left: 20%; top: 70%; @@ -3200,6 +3635,7 @@ td div { #settings .filter-option { padding: 0.35em 0.5em; + font-size: 30px; } .settings-categorie .row-wrapper p { @@ -3225,6 +3661,8 @@ td div { padding: 1em; border: 3px solid #59885d; border-radius: 10px; + display: flex; + flex-direction: column; } .user-public-content img { width: 11em; @@ -3233,6 +3671,7 @@ td div { .user-public-content .name { text-align: center; margin: 5px 0; + flex: 1; } .user-public-content .detail-btn { border: 3px solid #59885d; @@ -3399,6 +3838,7 @@ img[data-loading-url] { /* Content Share: Share Bubble */ .share-bubble-dialog { + z-index: 1002; max-width: 800px; transform: translate(-50%, -60%); } @@ -3462,6 +3902,7 @@ img[data-loading-url] { /* Content Share: Share Select */ .share-select-dialog { + z-index: 1001; width: 650px; height: 480px; transform: translate(-50%, -80%); @@ -3504,6 +3945,7 @@ img[data-loading-url] { /* Content Share: Direct Share */ .direct-share-dialog { + z-index: 1003; width: 800px; height: 1000px; transform: translate(-50%, -60%); @@ -3651,6 +4093,7 @@ img[data-loading-url] { /* Content Share: Unshare */ .unshare-dialog { + z-index:1000; width: 800px; height: 1000px; transform: translate(-50%, -60%); -- 2.49.1 From d6662b40505d21ff4cc656b189e680b353bab0ac Mon Sep 17 00:00:00 2001 From: Malthbern <61102919+Malthbern@users.noreply.github.com> Date: Wed, 27 Aug 2025 06:31:43 -0500 Subject: [PATCH 14/18] 2025r180 --- Keyboard.css | 191 ++++++++++++++++++++++++++++++++++++++++-- Keyboard.less | 225 +++++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 399 insertions(+), 17 deletions(-) diff --git a/Keyboard.css b/Keyboard.css index cbe027f..a5461c6 100755 --- a/Keyboard.css +++ b/Keyboard.css @@ -1,10 +1,14 @@ +@import "../Common/vars.css"; :root { --menu-bg-colour: 55, 48, 33; --keyboard-key-colour: 55, 48, 33; - --menu-opacity: 0.9; + --menu-opacity: 1; + --collapsed: flex; } body { margin: 0; + background-color: transparent !important; + opacity: var(--menu-opacity); } .wrapper { width: 100%; @@ -13,7 +17,7 @@ body { coh-partitioned: on; text-shadow: 2px 2px 8px #000; color: white; - font-family: "Noto Sans", "Noto Sans Symbols", sans-serif; + font-family: var(--standard-font-family); } .wrapper .keyboard { width: 100%; @@ -21,10 +25,152 @@ body { box-sizing: border-box; padding: 5px; background-color: rgb(var(--menu-bg-colour)); + filter: drop-shadow(0 0 2rem black); text-align: center; display: flex; flex-direction: column; align-self: flex-end; + position: relative; +} +.wrapper .keyboard .hide { + visibility: hidden; + animation-name: fadeOut; + animation-duration: 0.1s; +} +@keyframes fadeOut { + from { + opacity: 1; + visibility: visible; + } + to { + opacity: 0; + } +} +.wrapper .keyboard .show { + visibility: visible; + animation-name: fadeIn; + animation-duration: 0.1s; +} +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +.wrapper .keyboard .settings { + width: 60%; + height: 325px; + z-index: 10; + position: absolute; + bottom: 50px; + left: 20%; + background-color: rgb(var(--menu-bg-colour)); + border-radius: 0.5em; + filter: drop-shadow(0 0 2rem black); + display: flex; + flex-direction: column; + justify-content: flex-start; + padding: 0.5em; + /* The switch - the box around the slider */ +} +.wrapper .keyboard .settings .guic-horizontal-rangeslider-wrapper { + margin: 2.1em 0 0 !important; +} +.wrapper .keyboard .settings .guic-horizontal-rangeslider-wrapper .guic-horizontal-rangeslider { + background-color: rgba(255, 255, 255, 0.3) !important; +} +.wrapper .keyboard .settings .guic-horizontal-rangeslider-wrapper .guic-rangeslider-horizontal-grid-pol { + background-color: white; +} +.wrapper .keyboard .settings .guic-horizontal-rangeslider-wrapper .guic-rangeslider-horizontal-grid-text { + visibility: hidden; +} +.wrapper .keyboard .settings .setting-container { + display: flex; + margin-bottom: 5px; +} +.wrapper .keyboard .settings .setting-container h3 { + flex: 1; + text-align: left; + margin-bottom: 0.2em; + margin-top: 0.2em; + align-self: center; +} +.wrapper .keyboard .settings .switch { + position: relative; + display: inline-block; + width: 60px; + height: 34px; + /* The slider */ + /* Rounded sliders */ +} +.wrapper .keyboard .settings .switch input { + opacity: 0; + width: 0; + height: 0; +} +.wrapper .keyboard .settings .switch .checked { + background-color: #2196F3 !important; + box-shadow: 0 0 1px #2196F3; +} +.wrapper .keyboard .settings .switch .checked:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); +} +.wrapper .keyboard .settings .switch .slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; +} +.wrapper .keyboard .settings .switch .slider:before { + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; +} +.wrapper .keyboard .settings .switch .round { + border-radius: 34px; +} +.wrapper .keyboard .settings .switch .round:before { + border-radius: 50%; +} +.wrapper .keyboard .settings .separator { + border-top: 5px solid #bbb; + border-radius: 5px; + margin-top: 0.5em; + margin-bottom: 0.5em; +} +.wrapper .keyboard .settings .header { + text-align: left; + width: 100%; + display: flex; +} +.wrapper .keyboard .settings .header .close-btn { + width: 2em; +} +.wrapper .keyboard .settings .header .close-btn:hover { + filter: brightness(0.8) !important; +} +.wrapper .keyboard .settings .header .close-btn img { + position: relative; + width: 2em; + height: 2em; + filter: invert(1); +} +.wrapper .keyboard .settings .header h2 { + margin-top: 0; + margin-bottom: 0; + flex: 1; } .wrapper .keyboard .in { left: 5%; @@ -34,12 +180,15 @@ body { left: 100%; transition: left 0.2s linear; } +.wrapper .keyboard .collapsible { + display: var(--collapsed) !important; +} .wrapper .keyboard .keyboard-row { width: 100%; display: flex; } .wrapper .keyboard .keyboard-row .spacer { - flex: 1.55; + flex: 1.4; } .wrapper .keyboard .keyboard-row .special-keys { flex: 0.5 !important; @@ -68,6 +217,23 @@ body { .wrapper .keyboard .keyboard-row .keyboard-func span { width: 1em; display: block; + pointer-events: none; +} +.wrapper .keyboard .keyboard-row .keyboard-key img, +.wrapper .keyboard .keyboard-row .keyboard-mod img, +.wrapper .keyboard .keyboard-row .keyboard-func img { + position: relative; + width: 1.5em; + height: 1.5em; + margin-left: -0.5em; + margin-right: -0.5em; + filter: invert(1); + pointer-events: none; +} +.wrapper .keyboard .keyboard-row .keyboard-key .flip-icon, +.wrapper .keyboard .keyboard-row .keyboard-mod .flip-icon, +.wrapper .keyboard .keyboard-row .keyboard-func .flip-icon { + transform: rotate(180deg); } .wrapper .keyboard .keyboard-row .keyboard-key:hover, .wrapper .keyboard .keyboard-row .keyboard-mod:hover, @@ -77,6 +243,9 @@ body { .wrapper .keyboard .keyboard-row .keyboard-func:active { background-color: #1b5037; } +.wrapper .keyboard .keyboard-row .active { + background-color: #1b5037; +} .wrapper .keyboard .keyboard-row .wide { flex: 1.5; } @@ -123,6 +292,16 @@ body { top: -20px; padding: 5px; } +.wrapper .keyboard .keyboard-input-block .textarea-title { + position: absolute; + display: none; + background-color: rgb(var(--menu-bg-colour)); + border-top-left-radius: 0.5em; + border-top-right-radius: 0.5em; + left: 10px; + top: -20px; + padding: 5px; +} .wrapper .keyboard .keyboard-input-block .textarea-background { position: absolute; bottom: 0; @@ -188,7 +367,7 @@ body { width: initial; overflow-x: auto; caret-color: transparent; - font-family: "Noto Sans", "Noto Sans Symbols", sans-serif; + font-family: "Noto Sans", "Noto Sans Symbols", "Noto Sans JP", "Noto Sans TC", "Noto Sans KR", "Noto Sans Arabic", "Noto Sans SC", sans-serif; } .wrapper .keyboard .keyboard-input-block .textarea-container .input_mirror { text-align: left; @@ -238,8 +417,8 @@ body { z-index: 2; position: absolute; text-shadow: 0 0 0 rgba(0, 0, 0, 0); - height: 100%; - padding-top: 8%; + padding-bottom: 8%; align-self: flex-start; padding-left: 12px; + bottom: 0; } diff --git a/Keyboard.less b/Keyboard.less index 42757fd..e69a238 100755 --- a/Keyboard.less +++ b/Keyboard.less @@ -1,15 +1,20 @@ -@menu-bg-colour: 55,48,33; -@menu-opacity: 0.9; -@keyboard-key-colour: 55, 48, 33; +@import "../Common/vars.css"; + +@menu-bg-colour: 55,48,33; +@menu-opacity: 1; +@keyboard-key-colour: 55,48,33; :root { --menu-bg-colour: @menu-bg-colour; --keyboard-key-colour: @keyboard-key-colour; --menu-opacity: @menu-opacity; + --collapsed: flex; } body{ margin: 0; + background-color: transparent !important; + opacity: var(--menu-opacity); } .wrapper { @@ -19,7 +24,7 @@ body{ coh-partitioned: on; text-shadow: 2px 2px 8px #000; color: white; - font-family: "Noto Sans", "Noto Sans Symbols", sans-serif; + font-family: var(--standard-font-family); .keyboard { width: 100%; @@ -27,15 +32,179 @@ body{ border-radius: 0.5em; box-sizing: border-box; - //border: 3px solid #404040; + //border: 3px solid #59885d; padding: 5px; background-color: rgb(var(--menu-bg-colour)); + filter: drop-shadow(0 0 2rem black); text-align: center; display: flex; flex-direction: column; align-self: flex-end; + position: relative; + + .hide { + visibility: hidden; + animation-name: fadeOut; + animation-duration: 0.1s; + + @keyframes fadeOut { + from { + opacity: 1; + visibility: visible; + } + to { + opacity: 0; + } + } + } + + .show { + visibility: visible; + animation-name: fadeIn; + animation-duration: 0.1s; + + @keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } + } + } + + .settings { + width: 60%; + height: 325px; + z-index: 10; + position: absolute; + bottom: 50px; + left: 20%; + background-color: rgb(var(--menu-bg-colour)); + border-radius: 0.5em; + filter: drop-shadow(0 0 2rem black); + display: flex; + flex-direction: column; + justify-content: flex-start; + padding: 0.5em; + + //Restyle the rangeslider a bit cause it's dark + .guic-horizontal-rangeslider-wrapper { + margin: 2.1em 0 0 !important; + + .guic-horizontal-rangeslider { + background-color: rgba(255,255,255,0.3) !important; + } + + .guic-rangeslider-horizontal-grid-pol { + background-color: white; + } + + .guic-rangeslider-horizontal-grid-text { + visibility: hidden; + } + } + + .setting-container { + display: flex; + margin-bottom: 5px; + + h3 { + flex: 1; + text-align: left; + margin-bottom: 0.2em; + margin-top: 0.2em; + align-self: center; + } + } + + /* The switch - the box around the slider */ + .switch { + position: relative; + display: inline-block; + width: 60px; + height: 34px; + + input { + opacity: 0; + width: 0; + height: 0; + } + + .checked { + background-color: #2196F3 !important; + box-shadow: 0 0 1px #2196F3; + + &:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); + } + } + + /* The slider */ + .slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + + &:before { + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + } + } + + /* Rounded sliders */ + .round { + border-radius: 34px; + + &:before { + border-radius: 50%; + } + } + } + + .separator { + border-top: 5px solid #bbb; + border-radius: 5px; + margin-top: 0.5em; + margin-bottom: 0.5em; + } + + .header { + text-align: left; + width: 100%; + display: flex; + + .close-btn { + width: 2em; + + &:hover { + filter: brightness(0.8) !important; + } + + img { + position: relative; + width: 2em; + height: 2em; + filter: invert(1); + } + } + + h2 { + margin-top: 0; + margin-bottom: 0; + flex: 1; + } + } + } .in { left: 5%; @@ -47,13 +216,17 @@ body{ transition: left 0.2s linear; } + .collapsible { + display: var(--collapsed) !important; + } + .keyboard-row { width: 100%; display: flex; - //border-top: 3px solid #404040; + //border-top: 3px solid #59885d; .spacer { - flex: 1.55; + flex: 1.4; } .special-keys { @@ -83,6 +256,21 @@ body{ span { width: 1em; display: block; + pointer-events: none; + } + + img { + position: relative; + width: 1.5em; + height: 1.5em; + margin-left: -0.5em; + margin-right: -0.5em; + filter: invert(1); + pointer-events: none; + } + + .flip-icon { + transform: rotate(180deg); } &:hover, @@ -91,6 +279,10 @@ body{ } } + .active { + background-color: #1b5037; + } + .wide { flex: 1.5; } @@ -147,6 +339,17 @@ body{ padding: 5px; } + .textarea-title { + position: absolute; + display: none; + background-color: rgb(var(--menu-bg-colour)); + border-top-left-radius: 0.5em; + border-top-right-radius: 0.5em; + left: 10px; + top: -20px; + padding: 5px; + } + .textarea-background { position: absolute; bottom: 0; @@ -214,7 +417,7 @@ body{ width: initial; overflow-x: auto; caret-color: transparent; - font-family: "Noto Sans", "Noto Sans Symbols", sans-serif; + font-family: "Noto Sans", "Noto Sans Symbols", "Noto Sans JP", "Noto Sans TC", "Noto Sans KR", "Noto Sans Arabic", "Noto Sans SC", sans-serif; } } @@ -251,7 +454,7 @@ body{ padding-bottom: 6px; //animation: blink-animation 1s steps(5, start) infinite; - //-webkit-animation: blink-animation 1s steps(5, start) infinite; + //-webkit-animation: blink-animation 1s steps(5, start) infinite @keyframes blink-animation { to { @@ -274,10 +477,10 @@ body{ z-index: 2; position: absolute; text-shadow: 0 0 0 rgba(0, 0, 0, 0); - height: 100%; - padding-top: 8%; + padding-bottom: 8%; align-self: flex-start; padding-left: 12px; + bottom: 0; } } } -- 2.49.1 From 8bcd811c053d41158839d74edd80dc93fae3e61f Mon Sep 17 00:00:00 2001 From: Malthbern Date: Wed, 27 Aug 2025 11:44:58 +0000 Subject: [PATCH 15/18] Update README.md --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index 82a6a69..899e8f6 100644 --- a/README.md +++ b/README.md @@ -8,5 +8,9 @@ replace ui.css you download from [here](https://gitea.malthbern.com/Malthbern/CV in < Steam Root >/common/ChilloutVR/ChilloutVR_Data/StreamingAssets/Cohtml/UIResources/CVRTest/ +also replace Keyboard.css from the [Keyboard](https://gitea.malthbern.com/Malthbern/CVR_Return-green-UI/src/branch/keyboard/) branch or [here](https://gitea.malthbern.com/Malthbern/CVR_Return-green-UI/src/branch/keyboard/Keyboard.css) + +place this into < Steam Root >/common/ChilloutVR/ChilloutVR_Data/StreamingAssets/Cohtml/UIResources/KeyboardUI/ + ### Obligatory disclaimer I, Malthbern and this modification are in no affiliation with ABI and not supported by ABI. -- 2.49.1 From c84f48ef09214959f02cb4974aad2f28e0b1a7e0 Mon Sep 17 00:00:00 2001 From: Malthbern <61102919+Malthbern@users.noreply.github.com> Date: Wed, 27 Aug 2025 18:49:27 -0500 Subject: [PATCH 16/18] MenuCSSLoader prep --- Keyboard/OGGreen.css | 1 + MainMenu/OGGreen.css | 1 + 2 files changed, 2 insertions(+) create mode 120000 Keyboard/OGGreen.css create mode 120000 MainMenu/OGGreen.css diff --git a/Keyboard/OGGreen.css b/Keyboard/OGGreen.css new file mode 120000 index 0000000..aded066 --- /dev/null +++ b/Keyboard/OGGreen.css @@ -0,0 +1 @@ +/run/media/malthbern/8C56615A566145D4/SteamLibrary/steamapps/common/ChilloutVR/ChilloutVR_Data/StreamingAssets/Cohtml/UIResources/KeyboardUI/Keyboard.css \ No newline at end of file diff --git a/MainMenu/OGGreen.css b/MainMenu/OGGreen.css new file mode 120000 index 0000000..ccc1599 --- /dev/null +++ b/MainMenu/OGGreen.css @@ -0,0 +1 @@ +/run/media/malthbern/8C56615A566145D4/SteamLibrary/steamapps/common/ChilloutVR/ChilloutVR_Data/StreamingAssets/Cohtml/UIResources/CVRTest/ui.css \ No newline at end of file -- 2.49.1 From eb596354ede3882238d056196adb4ec4a050f3d3 Mon Sep 17 00:00:00 2001 From: Malthbern Date: Wed, 27 Aug 2025 23:52:56 +0000 Subject: [PATCH 17/18] Delete ui.css --- ui.css | 4200 -------------------------------------------------------- 1 file changed, 4200 deletions(-) delete mode 100755 ui.css diff --git a/ui.css b/ui.css deleted file mode 100755 index 312a2f7..0000000 --- a/ui.css +++ /dev/null @@ -1,4200 +0,0 @@ -/* -2560 * 1440 - -1/12 - -213,333333 - -14,814% -*/ - -:root { - --menu-opacity: 0.9; - /* Malth is a nerd btw */ - --menu-bg-colour: 55, 48, 33; -} - -html { - font-size: 2em; -} - -body { - margin: 0; - width: 100%; - height: 100%; - - overflow: hidden; - - /*font-family: 'Droid Sans';*/ - font-size: 32px; - color: #ffffff; - - text-shadow: 2px 2px 8px #000; - - font-family: "Noto Sans", "Noto Sans Symbols", "Noto Sans JP", "Noto Sans TC", "Noto Sans KR", "Noto Sans Arabic", "Noto Sans SC", sans-serif; -} - -h1 { - font-weight: normal; -} - -.input { - font-family: "Noto Sans", "Noto Sans Symbols", "Noto Sans JP", "Noto Sans TC", "Noto Sans KR", "Noto Sans Arabic", "Noto Sans SC", sans-serif; -} - -.settings-subcategory { - display: flex; - flex-direction: column; - margin-top: 1em; - margin-bottom: 1em; - position: relative; - padding-top: 50px; -} - -/* When subcategory is first element on Settings page */ -.settings-subcategory.first { - margin-top: 0px; - padding-top: 0px; -} - -.settings-subcategory .subcategory-row-wrapper { - position: relative; - width: 100%; -} - -.settings-subcategory .subcategory-name { - font-size: 2em; - display: inline-block; - margin-bottom: 20px; - text-align: center; /* Centering categories is ugly */ -} - -.settings-subcategory .subcategory-selector { - position: absolute; - top: 10; - right: 0; -} - -.settings-subcategory .subcategory-description { - border-top: 2px solid white; - font-size: 1.2em; - margin-top: 0.1em; - color: #AAA; - padding-top: 10px; - text-align: center; -} - -.color-primary { - background-color: #E43600; -} - -.color-primary:hover { - background-color: #E43600; -} - -/* Note: We are defining :hover and .active separately because :active:not(.active) isn't working, and to avoid using !important */ - -.button:hover { - background-color: #373021; -} - -.button:active { - background-color: #2d8059; -} -.button.active { - background-color: #1b5037; -} - -.button.noaction { - pointer-events: none; -} - -.button:disabled, .button.disabled { - filter: brightness(50%) grayscale(1); - pointer-events: none; -} - -.button.color-primary:hover { - background-color: #f56b40; -} - -.button.color-primary.disabled:hover { - background: #373021; -} - -.button.color-primary:active { - background-color: #be0b04; -} - -.button.color-primary.active { - background-color: #f56b40; -} - -#GeneralPlayerHeight { - height: 2.5em; -} - - - -.wrapper { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; -} - -.root-container { - position: absolute; - width: 100%; - height: 80%; -} - -.content { - position: absolute; - width: 100%; - top: 0; - height: 80%; - - border-radius: 0.25em; - overflow: hidden; - - box-sizing: border-box; - background-color: rgba(var(--menu-bg-colour), var(--menu-opacity)); - - display: flex; - - left: -100%; - transition: left 0.2s linear; - z-index: 200; -} - -.root-content { - height: 100%; -} - -.home-container { - background-color: rgba(0,0,0,0); -} - -.flex-container { - display: flex; - flex-direction: column; -} - -.home-right { - width: 22%; - align-self: center; - position: relative; -} -.home-left { - width: 22%; - align-self: center; - position: relative; -} -.home-center { - width: auto; - display: flex; - flex-direction: column; - align-self: center; - position: relative; -} - -.home-background { - background-color: rgba(var(--menu-bg-colour), var(--menu-opacity)); -} - -.content.in { - left: 0%; - transition: left 0.2s linear; -} -.content.out { - left: 100%; - transition: left 0.2s linear; -} - -.content.hidden { - visibility: hidden; -} - -.contentNoBG.in { - left: 0%; - transition: left 0.2s linear; -} -.contentNoBG.out { - left: 100%; - transition: left 0.2s linear; -} - -.contentNoBG.hidden { - visibility: hidden; -} - -.list-filter { - width: 25%; - padding: 0.5em; - display: flex; - justify-content: flex-start; - flex-direction: column; -} - -.list-filter .option-caption { - font-size: 32px; - margin-top: 10px; - margin-bottom: 10px; -} - -.list-filter h1 { - text-align: center; - color: #ffffff; - margin-top: 0; - margin-bottom: 0.5em; -} - -.list-content { - width: 75%; - border-left: 3px solid #59885d; - - padding: 0.5em; - - overflow: scroll; - - position: relative; -} - -.root-content .invite-banner{ - position: absolute; - width: 75%; - height: 10%; - top: 0; - right: 0; - z-index: 10; - background-color: rgba(255, 69, 0, 0.5); -} - -.invite-banner.hidden { - display: none !important; -} - -.invite-banner span { - display: block; - height: auto; - font-size: 1.5em; -} - -.invite-banner .content-btn { - position: relative; - width: 20%; - font-size: 1.2em; -} - -.invite-banner.flex-row-container { - display: flex; - flex-direction: row; - justify-content: space-around; - align-items: center; -} - -.content-row { - display: flex; - width: 100%; -} - -.content-cell { - width: 22.7%; - - padding: 1%; - - box-sizing: border-box; - - margin: 0 3% 3% 0; - - border: 3px solid #59885d; - - position: relative; - - border-radius: 0.25em; -} - -.content-cell-formatter { - padding-top: 100%; - margin-top: 7em; -} - -.list-filter .scroll-content { - width: 100%; - flex: 100; -} - -.list-filter .content-btn { - position: relative; - margin-top: 0.5em; -} - -.filter-option { - border: 3px solid #59885d; - border-radius: 0.25em; - padding: 0.5em; - margin-bottom: 0.5em; - position: relative; -} - -.friend .content-cell-formatter { - padding-top: 100%; - margin-top: 5em; -} - -.content-cell.friend { - width: 18.8%; - margin-right: 1.5%; - margin-bottom: 1.5%; -} -.friend .content-cell-content { - left: 7%; -} - -.friend .online-state { - position: absolute; - width: 2em; - height: 2em; - border-radius: 50%; - margin: 0.5em; - - z-index: 1; - - background: #cc0000; -} - -.friend .online-state.online { - background: #00cc00; -} - -.friend .content-name { - bottom: 3em; -} - -.friend .content-image { - bottom: 5em; -} - -.content-cell-content { - position: absolute; - width: 100.000000%; - height: 100.000000%; - left: 5.000000%; - top: 5.000000%; -} - -.content-image { - position: absolute; - width: 100%; - height: auto; - bottom: 7em; - top: 0; - - border-radius: 0.25em; -} - -.content-name { - position: absolute; - width: 100%; - height: auto; - bottom: 5.4em; - - text-align: center; - - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.content-btn { - position: absolute; - width: 100%; - height: 2em; - line-height: 1.7em; - text-align: center; - - border-radius: 0.25em; - - border: 3px solid #59885d; -} - -.content-btn.first { - bottom: 3em; -} - -.content-btn.second { - bottom: 0.5em; -} - -.content-btn.zero { - bottom: 5.5em; -} -.content-btn.neg-one { - bottom: 8em; -} - -.content-cell.world .content-cell-formatter { - margin-top: 5em; -} -.content-cell.world .content-image { - bottom: 5em; -} -.content-cell.world .content-name { - bottom: 3em; -} - -.content-cell.prop .content-cell-formatter { - margin-top: 9em; -} - -.content-cell.prop .content-name { - bottom: 7.7em; -} - -.content-cell.prop .content-image { - bottom: 9.5em; -} - -/*Home*/ -#home h1 { - text-align: center; - width: 100%; - margin-top: 0.2em; - margin-bottom: 0.2em; -} - -/* Animated Circles CSS */ - -.hexagons { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - z-index: -1; -} - -.hexagons li { - position: absolute; - display: block; - list-style: none; - width: 20px; - height: 20px; - background: rgba(228, 54, 0, 0.7); - animation: animate 25s linear infinite; - bottom: calc(-150px - 40vh); -} - -.hexagons li:nth-child(1) { - left: 25%; - width: 80px; - height: 80px; - animation-delay: 0s; - animation-duration: 20s; - mask-image: url("gfx/HexagonMask.svg"); - mask-size: contain; - mask-position: center; - background: rgba(158, 66, 38, 0.7); -} - -.hexagons li:nth-child(2) { - left: 10%; - width: 20px; - height: 20px; - animation-delay: 0s; - animation-duration: 25s; - mask-image: url("gfx/hexagonMask.svg"); - mask-size: contain; - mask-position: center; - background: rgba(228, 54, 0, 0.7); -} - -.hexagons li:nth-child(3) { - left: 70%; - width: 20px; - height: 20px; - animation-delay: 0s; - animation-duration: 20s; - mask-image: url("gfx/HexagonMask.svg"); - mask-size: contain; - mask-position: center; - background: rgba(158, 66, 38, 0.7); -} - -.hexagons li:nth-child(4) { - left: 40%; - width: 60px; - height: 60px; - animation-delay: 0s; - animation-duration: 15s; - mask-image: url("gfx/HexagonMask.svg"); - mask-size: contain; - mask-position: center; - background: rgba(201, 123, 99, 0.7); -} - -.hexagons li:nth-child(5) { - left: 65%; - width: 20px; - height: 20px; - animation-delay: 0s; - animation-duration: 20s; - mask-image: url("gfx/HexagonMask.svg"); - mask-size: contain; - mask-position: center; - background: rgba(228, 54, 0, 0.7); -} - -.hexagons li:nth-child(6) { - left: 75%; - width: 90px; - height: 90px; - animation-delay: 0s; - animation-duration: 25s; - mask-image: url("gfx/HexagonMask.svg"); - mask-size: contain; - mask-position: center; - background: rgba(201, 123, 99, 0.7); -} - -.hexagons li:nth-child(7) { - left: 35%; - width: 50px; - height: 50px; - animation-delay: 0s; - animation-duration: 30s; - mask-image: url("gfx/HexagonMask.svg"); - mask-size: contain; - mask-position: center; - background: rgba(158, 66, 38, 0.7); -} - -.hexagons li:nth-child(8) { - left: 50%; - width: 25px; - height: 25px; - animation-delay: 0s; - animation-duration: 35s; - mask-image: url("gfx/HexagonMask.svg"); - mask-size: contain; - mask-position: center; - background: rgba(201, 123, 99, 0.7); -} - -.hexagons li:nth-child(9) { - left: 20%; - width: 15px; - height: 15px; - animation-delay: 0s; - animation-duration: 40s; - mask-image: url("gfx/HexagonMask.svg"); - mask-size: contain; - mask-position: center; - background: rgba(158, 66, 38, 0.7); -} - -.hexagons li:nth-child(10) { - left: 85%; - width: 50px; - height: 50px; - animation-delay: 0s; - animation-duration: 45s; - mask-image: url("gfx/HexagonMask.svg"); - mask-size: contain; - mask-position: center; - background: rgba(228, 54, 0, 0.7); -} - -@keyframes animate { - 0% { - transform: translateY(0) rotate(0deg); - opacity: 0; - } - 50% { - transform: translateY(-60vh) rotate(360deg); - opacity: 1; - } - 80% { - opacity: 1; - } - 100% { - transform: translateY(-120vh) rotate(720deg); - opacity: 0; - } -} - -.home-content-root { - display: flex; - flex-direction: row; - justify-content: space-around; -} - -.content-shortcuts { - border-radius: 0.25em; -} - -#home .content-shortcuts .action-btn { - padding: 0.5em 0em; - width: 5.5em; - height: 5.5em; - - text-align: center; -} -#home .content-shortcuts .action-btn img { - margin-bottom: 0.5em; -} - -.content-debug { - border-radius: 0.25em; - padding: 0.5em; - margin-bottom: 10px; -} - -.content-avatar-functions { - border-radius: 0.25em; - border: 3px solid #59885d; -} - -.content-panic { - border-radius: 0.25em; - margin-bottom: 10px; -} - -.content-feed { - border-radius: 0.25em; - margin-bottom: 10px; - height: 74%; - position: relative; -} - -.content-panic .action-btn { - width: 9.5em; - height: 6.5em; - text-align: center; - display: flex; - flex-direction: column; - justify-content: flex-end; -} -.content-panic .action-btn img { - align-self: center; -} -.content-panic .action-btn p { - align-self: center; -} -.content-shortcuts-2 { - border-radius: 0.25em; -} - -#home .content-shortcuts-2 .action-btn { - padding: 0.5em 0em; - width: 4.75em; - height: 4.75em; - - text-align: center; -} -#home .content-shortcuts-2 .action-btn img { - width: 2em; - height: 2em; - margin-bottom: 0.5em; -} - -.content-profile { - border-radius: 0.25em; - text-align: center; - padding: 0.5em 0 0.5em 0; - margin-bottom: 10px; -} - -.content-profile .button-root { - margin-top: 20px; -} - -.content-profile .profile-btn { - padding: 0.5em 0em; - text-align: center; - border-radius: 0.25em; - border: 3px solid #59885d; - display: flex; - min-width: 45%; - justify-content: center; - margin-left: 10px; - margin-right: 10px; - z-index: 1; -} - -.content-profile .profile-btn img { - width: 2em; - height: 2em; - margin-right: 20px; -} - -.content-profile .profile-btn p { - align-self: center; - margin-top: 0; - margin-bottom: 0; -} - -.content-profile p { - margin: 0; -} - -@keyframes calling { - 0% {box-shadow: 0 0 0 1em #0AA48E} - 100% {box-shadow: 0 0 2em 1em #0AA48E} -} - -.profile-icon { - height: 1em; - width: 1em; - margin-right: 10px; -} - -.profile-pic { - width: 11em; - height: 11em; - background: #333333; - aspect-ratio: 1/cos(30deg); - mask-image: url("gfx/HexagonMask.svg"); - mask-size: contain; - mask-position: center; -} - -.profile-pic:hover { - filter: brightness(75%); -} - -.profile-username { - font-size: 1.5em; - coh-font-fit-mode: shrink; - padding-left: 10px; - padding-right: 10px; -} - -.profile-rank { - display: flex; - flex-direction: row; -} - -.profile-title { - display: flex; - flex-direction: row; -} - -.profile-group { - display: flex; - flex-direction: row; -} - -.content-caption { - width: 95%; - text-align: center; - margin-bottom: 0.3em; - border-bottom-color: rgba(89, 136, 93, 1.000000); - border-bottom-width: 2px; - border-bottom-style: solid; - align-self: center; -} - -.btn-row-wrapper { - display: flex; - justify-content: space-between; - - margin-top: 0.3em; - padding: 0 0.3em; -} - - -.btn-row-wrapper.actions { - margin-bottom: 0.3em; -} - -.action-btn { - width: 4em; - height: 4em; - border-radius: 0.25em; - border: 3px solid #59885d; -} - -.action-btn img { - width: 2.6em; - height: 2.6em; -} - -.action-btn .img-inverted { - filter: invert(1); -} - -.action-btn.sm-exit { - height: auto; - width: auto; - border: 0 none; - position: absolute; - top: 1%; - right: 1%; -} - -/*World Detail*/ -#world-detail { - background-color: #373021; -} - -#world-detail h1 { - text-align: left; - margin-top: 0.3em; - margin-left: 0.5em; - margin-right: 4em; -} - -/* let's customize the dropdown a bit in world instance creation */ -#world-detail .valueList { - max-height: 500px; -} - -#world-detail .listValue { - text-overflow: ellipsis; - height: auto; - white-space: nowrap; - overflow: hidden; -} - -.close-btn { - position: absolute; - top: 1%; - right: 1%; - - border-radius: 0.25em; - border: 3px solid #59885d; - padding: 0.5em; - - width: 8em; - - text-align: center; -} - -.content-world-information { - position: absolute; - top: 10%; - width: 24%; - padding: 1%; - height: 59%; - left: 1%; - - border-radius: 0.25em; - border: 3px solid #59885d; -} - -.content-world-actions { - position: absolute; - top: 10%; - width: 48%; - padding: 1%; - height: 59%; - left: 26%; - - border-radius: 0.25em; - border: 3px solid #59885d; -} - -.content-world-author { - position: absolute; - top: 10%; - width: 24%; - padding: 1%; - height: 22%; - left: 75%; - - border-radius: 0.25em; - border: 3px solid #59885d; -} - -.content-world-author-worlds { - position: absolute; - top: 35%; - width: 24%; - padding: 1%; - height: 34%; - left: 75%; - - border-radius: 0.25em; - border: 3px solid #59885d; -} - -.content-world-instances { - position: absolute; - top: 72%; - width: 98%; - padding: 0.25%; - height: 25%; - left: 1%; - - border-radius: 0.25em; - border: 3px solid #59885d; -} - -.content-world-instances .action-btn { - margin-top: 0.3em; - margin-left: 0.5em; - height: 6em; - width: 6em; - text-align: center; - padding: 0; -} -.content-world-instances .action-btn img { - height: 60%; - width: 60%; - margin-top: 5%; - margin-bottom: 5%; -} -.content-world-instances .scroll-content { - left: 7.5em; -} - -.scroll-content { - overflow: scroll; - position: absolute; - top: 2em; - left: 0.5em; - right: 0.5em; - bottom: 0.5em; - height: auto; - width: auto; -} - -.list-filter .scroll-content { - position: relative; - top: 0; - left: 0; - right: 0; - bottom: 0; -} - -.row-wrapper { - display: flex; -} - -.row-wrapper { - display: flex; - flex-direction: row; -} - -.content-world-actions .world-fileSize { - position: absolute; - top: 7.4em; - left: 17em; -} - -.content-world-actions .world-uploaded { - position: absolute; - top: 8.9em; - left: 17em; -} - -.content-world-actions .world-updated { - position: absolute; - top: 10.4em; - left: 17em; -} - -.cell-name { - width: 6em; -} -.cell-value { - flex: 1; -} - -.row-wrapper.even-spacing { - justify-content: space-between; -} - -.world-image { - width: 14em; - height: 14em; - align-self: center; - border-radius: 0.25em; -} - -.content-world-actions .action-btn { - width: 6em; - height: 6em; - padding: 0.5em 0 0 0; - position: relative; - text-align: center; -} - -.content-world-actions .action-btn img { - width: 3em; - height: 3em; -} - -.content-world-actions .action-btn span { - position: absolute; - left: 0; - right: 0; - bottom: 0.5em; - width: auto; - text-align: center; - display: block; -} - -.data-worldCreateInstance { - background: rgb(0, 51, 204); -} -.data-worldCreateInstance:hover { - background: rgb(0, 102, 255); -} - -.content-world-actions .data-worldFavorite { - background: rgb(255, 153, 0); -} -.content-world-actions .data-worldFavorite:hover { - background: rgb(255, 204, 0); -} - -.content-world-actions .data-worldReport { - background: rgb(204, 0, 0); -} -.content-world-actions .data-worldReport:hover { - background: rgb(255, 51, 0); -} - -.content-world-actions .action-btn { - position: absolute; -} -.content-world-actions .action-btn.row1 { - top: 0.5em; -} -.content-world-actions .action-btn.row2 { - bottom: -0.5em; -} -.content-world-actions .action-btn.col1 { - left: 15.8em; -} -.content-world-actions .action-btn.col2 { - left: 23.3em; -} -.content-world-actions .action-btn.col3 { - left: 30.8em; -} -.world-author-image { - width: 5em; - height: 5em; - margin-right: 0.5em; -} -.data-author-profile { - position: absolute; - left: 6em; - right: 0; - width: auto; - height: 2em; - bottom: -1.9em; - line-height: 1.6em; - text-align: center; -} - -.world-authorWorld img { - width: 4em; - height: 4em; - margin-right: 0.5em; - margin-bottom: 1em; -} - -.author-world-btn { - line-height: 1.6em; - height: 2em; - text-align: center; - width: 100%; - margin-top: 0.8em; -} - -.world-instance { - width: 15%; - - margin-right: 1em; - - border-radius: 0.25em; - border: 3px solid #59885d; - - position: relative; - - height: 6em; - - padding: 0.5em; - - overflow: hidden; -} - -.world-instance.new { - border-color: #E43600; -} - -.world-instance .instance-image { - position: absolute; - top: 0px; - left: 0px; - bottom: 0px; - right: 0px; - width: auto; - height: auto; - - filter: blur(3px); - - background-position: center; - background-size: cover; -} -.world-instance:hover .instance-image { - filter: blur(3px) brightness(130%); -} - -.world-instance .playerCount { - position: absolute; - left: 0.5em; - right: 0.5em; - top: 0.5em; - width: auto; - text-align: right; - text-shadow: 0 0 1px #000; -} - -.world-instance .instanceRegion { - position: absolute; - left: 0.5em; - top: 0.5em; - width: auto; - text-align: right; - text-shadow: 0 0 1px #000; -} - -.world-instance .instanceName { - position:absolute; - left: 0.5em; - right: 0.5em; - bottom: 0.5em; - width: auto; - text-shadow: 0 0 3px #000; -} - -/*Instancing*/ -.world-instancing { - position: absolute; - background-color: #373021; - top: 6%; - bottom: 9%; - left: -100%; - width: 50%; - height: 81%; - - display: flex; - flex-direction: column; - - border-radius: 0.25em; - border: 3px solid #59885d; - - padding: 0.5em; -} - -.world-instancing.in { - left: 25%; - transition: left 0.2s linear; -} -.world-instancing.out { - left: 100%; - transition: left 0.2s linear; -} -.world-instancing.hidden { - visibility: hidden; -} - -.world-instancing .flex-row-container { - display: flex; - flex-direction: row; -} - -.world-instancing .flex-col-container { - display: flex; - flex-direction: column; - width: 50%; - align-items: center; -} - -.world-instancing .flex-col-container.bottom { - align-self: center; - width: 60%; - margin-top: 2em; -} - -.world-instancing h2, .world-instancing h3 { - margin-top: 0; - text-align: center; -} - -.world-instancing .flex-col-container .content-btn { - position: relative; - margin-bottom: 0.5em; - min-width: 15em; -} - -.world-instancing .content-btn { - position: relative; - margin-bottom: 0.5em; -} - -.world-instancing .btn-region, -.world-instancing .btn-rule { - display: flex; - margin-bottom: 1em; -} -#instance_group { - display: none; - z-index: 10; - border-radius: 0.25em; -} -#instance_group_title { - width: 100%; - display: none; - margin-top: 0.2em; - margin-bottom: 0.5em; - text-align: center; -} -.group #instance_group { - display: block; - margin-bottom: 0; -} -.group #instance_group_title { - display: block; -} - -.btn-region .region-select { - width: 33.333333%; - background-color: #373021; -} -.btn-rule .rule-select { - width: 50%; - background-color: #373021; -} -.btn-region .region-select + .region-select, -.btn-rule .rule-select + .rule-select { - border-left: 3px solid #59885d; -} -.btn-region .region-select.active, -.btn-region .region-select:hover, -.btn-rule .rule-select.active, -.btn-rule .rule-select:hover { - background-color: #1b5037; -} - -.inp-hidden { - display: none; -} - -/*Avatar Categories*/ -.favorite-category-selection { - position: absolute; - background-color: #373021; - top: 6%; - bottom: 9%; - left: -100%; - width: 30%; - height: 81%; - - border-radius: 0.25em; - border: 3px solid #59885d; - - padding: 0.5em; - z-index: 500; -} -.favorite-category-selection.in { - left: 35%; - transition: left 0.2s linear; -} -.favorite-category-selection.out { - left: 100%; - transition: left 0.2s linear; -} -.favorite-category-selection.hidden { - visibility: hidden; - display: block !important; -} -.favorite-category-selection .scroll-content { - top: 4em; - bottom: 4em; -} -.favorite-category-selection .favorite-category { - display: flex; - margin-bottom: 0.25em; - padding: 0.5em; -} -.favorite-category-selection .close-btn { - height: 2.5em; - bottom: 1em; - right: 1em; - top: auto; - position: absolute; - text-align: center; -} -.favorite-category-selection .apply-btn { - height: 2.5em; - bottom: 1em; - position: absolute; - left: 1em; - width: 8em; - text-align: center; - padding: 0.5em; -} -.favorite-category-selection span { - position: relative; - margin-left: 1em; - top: 0.4em; -} - -.favorite-category-selection h3 { - text-align: center; - margin-bottom: 0.3em; - margin-top: 0.3em; -} - -.favorite-category-selection .big-button { - width: 80%; - height: auto; - font-size: 1.5em; - margin-top: 20px; - text-align: center; - padding: 10px; -} -.favorite-category-selection .big-button:hover { - filter: brightness(0.75); -} -.favorite-category-selection .big-button.danger{ - background-color: #b00000; -} -.favorite-category-selection .big-button.warning{ - background-color: #c4c400; - color: black; -} - -/*Instance Detail*/ -#instance-detail { - background-color: #373021; -} - -#instance-detail h1 { - text-align: left; - margin-top: 0.3em; - margin-left: 0.5em; - margin-right: 4em; -} - -/*Group Detail*/ -#group-detail { - background-color: #373021; -} - -#create-group-modal p { - text-align: center; - align-self: center; -} - -#group-detail .flex-col-container { - display: flex; - flex-direction: column; - align-items: center; -} - -#group-detail .hidden { - display: none; -} - -#group-detail .content-instance-information { - overflow-x: hidden; -} - -.editable { - position: relative; - border-radius: 0.25em; - min-height: 5em; - pointer-events: none; -} - -.editable-enable { - background-color: rbga(var(--menu-bg-colour), var(--menu-opacity)); - pointer-events: auto; -} - -.edit-icon { - position: absolute; - height: 3em; - width: 3em; - right: 0; - background-image: url("gfx/Group/icons8-edit.svg"); - /*filter: drop-shadow(0 0 1rem #1b5037); apparently drop shadow on these causes them to flicker, why? idk. Blame cohtml I guesss..... */ - display: none; - z-index: 100; -} - -.editable-enable:hover { - filter: brightness(0.75); - backdrop-filter: brightness(0.75); -} - -.upload-overlay{ - z-index: 10000; - position: absolute; - background-color: rgba(var(--menu-bg-colour), 0.8); - justify-content: center; - align-items: center; - display: none; - width: 100%; - height: 100%; - bottom: 0; - left: 0; - flex-direction: column; -} - -.upload-overlay p { - font-size: 2.5em; -} - -.upload-overlay .upload-button { - height: 2.5em; - font-size: 2.5em; - width: 8em; - text-align: center; - border: grey solid 2px; - border-radius: 0.25em; - align-self: center; - display: flex; - align-items: center; - justify-content: center; -} - -#group-detail h1 { - text-align: left; - margin-top: 0.3em; - margin-left: 0.5em; - margin-right: 4em; -} - -.group-description { - white-space: pre-wrap; -} - -.pagination-button { - height: 1.5em; - font-size: 1.5em; - width: 6em; - text-align: center; - border: grey solid 2px; - border-radius: 0.25em; - align-self: center; -} - -.pagination-button:hover{ - filter: brightness(80%); -} - -.content-instance-owner { - position: absolute; - top: 10%; - width: 20%; - padding: 0.5em; - height: 87.5%; - left: 1%; - - border-radius: 0.25em; - border: 3px solid #59885d; -} - -.content-instance-owner .profile-image { - width: 13.5em; - height: 13.5em; - margin-left: 0.5em; - mask-image: url("gfx/HexagonMask.svg"); - mask-size: contain; - mask-position: center; - align-self: center; -} - -.content-instance-owner h2 { - font-weight: normal; - margin-bottom: 0; - text-align: center; - margin-top: 0.2em; - coh-font-fit-mode: shrink; -} - -.content-instance-owner h3 { - font-weight: normal; - margin-top: 0; - text-align: center; - margin-bottom: 0.8em; -} - -.content-instance-owner p { - margin: 0; - margin-top: 0.5em; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - height: auto; - display: block; - width: 100%; -} - -.content-instance-group { - position: absolute; - top: 10%; - width: 20%; - padding: 0.5em; - height: 65%; - left: 1%; - - border-radius: 0.25em; - border: 3px solid #59885d; -} - -.content-instance-group .profile-image { - width: 13.5em; - height: 13.5em; - margin-left: 0.5em; - mask-image: url("gfx/HexagonMask.svg"); - mask-size: contain; - mask-position: center; - align-self: center; -} - -.content-instance-group h2 { - font-weight: normal; - margin-bottom: 0; - text-align: center; - margin-top: 0.2em; - coh-font-fit-mode: shrink; -} - -.content-instance-group h3 { - font-weight: normal; - margin-top: 0; - text-align: center; - margin-bottom: 0.8em; -} - -.content-instance-group p { - margin: 0; - margin-top: 0.5em; -} - -.content-instance-group .world-image { - width: 14.5em; - height: 14.5em; - pointer-events: auto; -} - -.content-instance-world { - position: absolute; - top: 10%; - width: 20%; - padding: 0.5em; - height: 65%; - left: 22%; - - border-radius: 0.25em; - border: 3px solid #59885d; -} - -.content-instance-world .world-image { - width: 13.5em; - height: 13.5em; - margin-left: 0.5em; -} - -.content-instance-world h2 { - font-weight: normal; - margin-bottom: 0; - text-align: center; - margin-top: 0.2em; -} - -.content-instance-information { - position: absolute; - top: 10%; - width: 25%; - padding: 0.5em; - height: 65%; - left: 43%; - - border-radius: 0.25em; - border: 3px solid #59885d; -} -.content-instance-information .cell-name { - width: 8.000000em; -} - -.content-instance-information .hidden { - display: none; -} - -.content-instance-information p { - margin-bottom: 0; - margin-top: 0; -} - -.content-instance-buttons { - position: absolute; - top: 77%; - width: 46%; - padding: 0; - height: 20.5%; - left: 22%; - - border-radius: 0.25em; - border: 3px solid #59885d; - - display: flex; -} -.content-instance-buttons .instance-btn { - width: 20%; - position: relative; - text-align: center; -} -.content-instance-buttons .instance-btn img { - width: 60%; - height: 65%; - margin-top: 3%; - margin-left: 15%; - margin-right: 15%; - margin-bottom: 3%; -} -.content-instance-buttons .instance-btn.disabled { - filter: brightness(50%) grayscale(1); - pointer-events: none; -} -.content-instance-buttons .instance-btn.noaction { - pointer-events: none; -} -.content-instance-buttons .instance-btn + .instance-btn { - border-left: 3px solid #59885d; - border-right: 3px solid #59885d; -} - -.content-group-buttons { - position: absolute; - top: 77%; - width: 67%; - padding: 0; - height: 20.5%; - left: 1%; - - border-radius: 0.25em; - border: 3px solid #59885d; - - display: flex; -} -.content-group-buttons p{ - font-size: 1.5em; - text-align: center; - display: block; - align-self: center; - flex: 100; -} -.content-group-buttons .instance-btn { - width: 14%; - position: relative; - text-align: center; -} -.content-group-buttons .instance-btn img { - width: 70%; - height: 70%; - margin-top: 3%; - margin-left: 15%; - margin-right: 15%; - margin-bottom: 3%; -} -.content-group-buttons .instance-btn.disabled { - filter: brightness(50%) grayscale(1); - pointer-events: none; -} -.content-group-buttons .instance-btn.noaction { - pointer-events: none; -} -.content-group-buttons .instance-btn + .instance-btn { - border-left: 3px solid #59885d; - border-right: 3px solid #59885d; -} - -.content-group-buttons .hidden { - display: none; -} - -.content-instance-players { - position: absolute; - top: 10%; - width: 30%; - padding: 0.5em; - height: 87.5%; - left: 69%; - - border-radius: 0.25em; - border: 3px solid #59885d; -} -.content-instance-players .instancePlayer { - display: flex; -} -.content-instance-players .instancePlayer .instancePlayerImage { - width: 4em; - height: 4em; - margin-right: 1em; - margin-bottom: 0.5em; -} -.content-instance-players .instancePlayer .instancePlayerName { - flex: 1; - font-size: 1.2em; -} - -.content-instance-players .content-list-pagination { - display: flex; - justify-content: space-around; - position: relative; - top: 25em; -} - -.content-group-players { - position: absolute; - top: 10%; - width: 30%; - padding: 0.5em; - height: 87.5%; - left: 69%; - - border-radius: 0.25em; - border: 3px solid #59885d; -} -.content-group-players .instancePlayer { - display: flex; -} -.content-group-players .instancePlayer .instancePlayerImage { - width: 4em; - height: 4em; - margin-right: 1em; - margin-bottom: 0.5em; -} -.content-group-players .instancePlayer .instancePlayerName { - flex: 1; - font-size: 1.2em; - overflow: hidden; -} - -.content-group-players .instancePlayer .manageButton { - border-radius: 0.25em; - border: 2px solid #59885d; - align-self: center; - z-index: 5; - pointer-events: all; -} - -.content-group-players .instancePlayer .manageButton img { - height: 100px; - width: 100px; -} - -.content-group-players .instancePlayer .manageButton:hover { - filter: brightness(0.75); -} - -.content-group-players .content-list-pagination { - display: flex; - justify-content: space-around; - position: relative; - top: 25em; -} - -#group-detail .scroll-content { - bottom: 4.5em; - z-index: 300; -} - -#group-detail .instancePlayer { - display: flex; - margin-top: 10px; -} -#group-detail .instancePlayer .instancePlayerImage { - width: 4em; - height: 4em; - margin-right: 1em; - margin-bottom: 0; -} -#group-detail .instancePlayer .player-name-container { - display: flex; - flex-direction: column; - flex: 100; -} - -#group-detail .instancePlayer .instancePlayerName { - flex: 1; - font-size: 1.2em; -} -#group-detail .instancePlayer .instancePlayerRank { - flex: 1; - font-size: 1em; -} - -#group-detail .favorite-category-selection { - z-index: 0; -} - -.content-list-pagination .page-arrow { - background-image: url("gfx/next-page.svg"); - background-size: contain; - height: 4em; - width: 4em; -} - -.content-list-pagination p { - font-size: 1.2em; -} - -.content-list-pagination .previous-page { - -} - -.content-list-pagination .next-page { - -} - -.content-list-pagination .disabled { - pointer-events: none !important; - filter: brightness(50%) grayscale(1) !important; -} - -.content-list-pagination .page-arrow:hover { - filter: brightness(0.8); -} - -.profile-avatar:hover { - filter: brightness(0.8); -} - -.profile-group:hover { - filter: brightness(0.8); -} - -/*User Detail*/ -#user-detail { - background-color: #373021; -} -#user-detail h1 { - text-align: left; - margin-top: 0.3em; - margin-left: 0.5em; - margin-right: 4em; -} -#our-user-detail { - background-color: #373021; -} -#our-user-detail h1 { - text-align: left; - margin-top: 0.3em; - margin-left: 0.5em; - margin-right: 4em; -} - -#our-user-detail .toolbar-btn { - font-size: 1em !important; - border-right-width: 3px; - border-right-color: rgba(89, 136, 93, 1.000000); - border-right-style: solid; -} - -.user-sidebar { - position: absolute; - top: 10%; - width: 20%; - padding: 0.5em; - height: 88%; - left: 1%; - - border-radius: 0.25em; - border: 3px solid #59885d; -} -#user-detail .online-state { - z-index: 0; - width: 15em; - height: 15em; - mask-image: url("gfx/HexagonMask.svg"); - mask-size: contain; - mask-position: center; - align-self: center; - display: flex; - justify-content: center; - position: relative; -} - -#user-detail .online-state.online { - background: #00cc00; -} - -#user-detail .online-state.offline { - background: #7c0000; -} - -.profile-image { - width: 14.5em; - height: 14.5em; - mask-image: url("gfx/HexagonMask.svg"); - mask-size: contain; - mask-position: center; - align-self: center; - z-index: 2; - border-radius: 0.25em; -} - -.profile-bg { - padding:0.5em; - align-self: center; - z-index: 1; - position: absolute; - filter: brightness(0); -} - -.user-sidebar h2, .user-sidebar h3 { - font-weight: normal; - margin-bottom: 0; - text-align: center; - margin-top: 0.2em; -} - -.user-sidebar h1 { - text-align: center !important; - margin: 0 !important; - coh-font-fit-mode: shrink; - max-height: 85px; -} - -.user-sidebar h3 { - margin-top: 0; - margin-bottom: 0.8em; -} -.profile-extra-image { - width: 3em; - height: 3em; - margin-right: 0.25em; - margin-bottom: 0.75em; - - border-radius: 0.25em; -} -.user-sidebar p { - margin: 0; - margin-top: 0.5em; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - height: auto; - display: block; - width: 100%; -} - -.user-tabview { - position: absolute; - top: 10%; - width: 77%; - height: 70%; - left: 22%; - - /*border-radius: 0.25em; - border: 3px solid #59885d;*/ -} -.tab-list { - display: flex; - justify-content: flex-start; - - position: absolute; - z-index: 1; - width: 100%; -} -.tab-btn { - border-radius: 0.25em 0.25em 0 0; - border: 3px solid #59885d; - width: 11.5%; - padding: 0.2em 0; - text-align: center; - height: 2.1em; - position: relative; -} -.tab-btn:hover { - background-color: #59885d; -} -.tab-btn.active .active-overlay { - position: absolute; - bottom: -6px; - height: 6px; - width: 100%; - - background-color: #373021; -} -.tab-contents { - border-radius: 0 0 0.25em 0.25em; - border: 3px solid #59885d; - - position: absolute; - top: 2em; - width: 100%; - left: 0; - bottom: 0; - height: auto; - - background-color: #373021; -} - -.tab-content { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: none; -} -.tab-content.active { - display: block; -} - -.user-toolbar { - position: absolute; - top: 82%; - width: 77%; - height: 16%; - left: 22%; - - border-radius: 0.25em; - border: 3px solid #59885d; - - display: flex; -} - -.group-toolbar .toolbar-btn { - width: 11.111111%; -} - -.group-toolbar { - position: absolute; - top: 82%; - width: 77%; - height: 16%; - left: 22%; - - border-radius: 0.25em; - border: 3px solid #59885d; - - display: flex; -} - -.activityDataAvailable, -.activityDataUnavailable, -.activityDataPrivate, -.activityDataOffline, -.activityDataNoInstance, -.activityDataLoading, -.activityDataNoNone, -.activityIncompatibleWorld { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - -.activityDataAvailable.hidden, -.activityDataUnavailable.hidden, -.activityDataPrivate.hidden, -.activityDataOffline.hidden, -.activityDataNoInstance.hidden, -.activityDataLoading.hidden, -.activityDataNone.hidden, -.activityIncompatibleWorld.hidden { - display: none; -} - -.activityDataUnavailableInfo, -.activityDataNone { - position: absolute; - - border-radius: 0.25em; - border: 3px solid #59885d; - - display: flex; - - top: 30%; - bottom: 30%; - height: auto; - - left: 20%; - width: 60%; - - padding: 1.2em; -} - -.activityDataUnavailableInfo img, -.activityDataNone img{ - width: 6em; - height: 6em; - margin-right: 2em; -} - -@keyframes antiClockwiseSpin { - from { - transform: rotate(360deg); - } - to { - transform: rotate(0deg); - } -} - -.note-block { - width: 100%; - height: 100%; - white-space: pre-wrap; - font-size: 1.5em; - overflow-wrap: break-word; -} - -.note-block-label { - margin: 10px; - font-size: 1.5em; - text-decoration: underline; - text-decoration-color: white; -} - -.note-block-scroll { - top: 2.5em; -} - -.note-edit-btn { - position: absolute; - font-size: 2.0em; - text-align: center; - top: 0; - left: 0; - height: 100%; - width: 100%; - border: 0; - opacity: 0; -} - -.note-edit-btn:hover { - animation-duration: 0.3s; - animation-name: noteEditAppear; - animation-fill-mode: forwards; - background-color: rgba(var(--menu-bg-colour), 0.2); -} - -@keyframes noteEditAppear { - 0%{ - opacity: 0; - } - 100%{ - opacity: 1; - } -} - -.activityDataLoading img { - width: 3em; - height: 3em; - margin-right: 2em; - - animation-duration: 10s; - animation-iteration-count: infinite; - animation-name: antiClockwiseSpin; - animation-timing-function: linear; -} - -.activityDataUnavailableInfo div, -.activityDataNone div, -.activityDataLoading div { - flex: 1; - font-size: 1.5em; - padding-top: 0.8em; -} - -.tab-content-activity .player-instance-world-image { - width: 12em; - height: 12em; - background: red; - margin: 0.5em 0 0 0.5em; -} - -.tab-content-activity .player-instance-details { - position: absolute; - left: 13em; - top: 0.5em; - overflow: hidden; - width: 22em; -} -.tab-content-activity .player-instance-details h2 { - margin-top: 0; - height: 1.2em; - text-overflow: ellipsis; - overflow: hidden; -} -.tab-content-activity .player-instance-details .cell-name { - width: 8em; -} -.tab-content-activity .player-instance-rules { - position: absolute; - left: 0.5em; - top: 13em; - bottom: 0.5em; - height: auto; - width: 35em; - - box-sizing: border-box; - border: 3px solid #59885d; - - border-radius: 0.25em; - - padding: 0.5em; -} -.tab-content-activity .data-instancedetails { - position: relative; - width: inherit; - height: inherit; - margin-top: 1em; - text-align: center; -} - -.tab-content-activity .player-instance-players { - position: absolute; - left: 36em; - top: 0.5em; - bottom: 0.5em; - right: 0.5em; - height: auto; - width: auto; - - box-sizing: border-box; - border: 3px solid #59885d; - - border-radius: 0.25em; - - padding: 0.5em; -} - -.player-instance-players .instancePlayer { - display: flex; -} -.player-instance-players .instancePlayer .instancePlayerImage { - width: 4em; - height: 4em; - margin-right: 1em; - margin-bottom: 0.5em; -} -.player-instance-players .instancePlayer .instancePlayerName { - flex: 1; - font-size: 1.2em; -} - -.user-settings-dialog { - position: absolute; - top: 9%; - left: 34%; - width: 50%; - height: 79%; - - border-radius: 0.25em; - overflow: hidden; - - box-sizing: border-box; - border: 3px solid #59885d; - - background-color: #373021; - - padding: 1em; - - left: -100%; - transition: left 0.2s linear; - - z-index: 100; -} - -.user-settings-dialog p { - padding: 0; - margin: 0; - text-align: center; - margin-bottom: 1em; - text-align: center; - font-size: 1.500000em; -} - -.user-settings-dialog .action-btn { - height: 2em; - width: 6em; - position: absolute; - top: 1em; - right: 1em; - text-align: center; - padding-top: 0.25em; -} - -.user-settings-dialog.in { - left: 34%; - transition: left 0.2s linear; -} -.user-settings-dialog.out { - left: 100%; - transition: left 0.2s linear; -} - -.user-settings-dialog.hidden { - visibility: hidden; -} - -.user-settings-dialog .content-btn { - position: relative; -} - -/*Exit Menu*/ -#exit h1 { - width: 100%; - text-align: center; -} -.exit-spacer { - position:absolute; - left: 0; - width: 100%; - height: 2em; - - background: url(gfx/warning.svg); -} -.exit-spacer.exit-top { - top: 5em; - border-bottom: 3px solid #000; -} -.exit-spacer.exit-bottom { - bottom: 0; - border-top: 3px solid #000; -} - -#exit .content-btn { - height: 7.5em; - display: flex; - padding: 0.5em; - position: relative; - width: auto; -} - -#exit .flex-container { - flex-direction: row; - justify-content: space-around; - width: 100%; -} - -#exit .flex-container .content-btn { - width: 50%; -} - -#exit .button-container { - height: 100%; - display: flex; - flex-direction: column; - justify-content: space-between; - position: absolute; - padding-top: 7em; - padding-bottom: 2em; - width: 100%; - min-width: 0; -} - -#exit .content-btn .exit-icon { - height: 6em; - width: 6em; - margin-right: 1em; -} -#exit .content-btn .text-group { - flex: 1; - text-align: left; -} - -#exit .content-btn .text-group h2 { - margin-top: 0; - margin-bottom: 0.5em; -} -#exit .content-btn .text-group p { - margin-top: 0; -} - -#exit .content-btn.exit-first { - top: 7.5em; -} -#exit .content-btn.exit-second { - top: 16.5em; -} -#exit .content-btn.exit-third { - top: 25.5em; -} - -/*Toolbar*/ -.toolbar { - position: absolute; - width: 100%; - height: 14.814814814%; - bottom: 0; - left: 0; - - border-radius: 0.25em; - overflow: hidden; - - box-sizing: border-box; - border: 3px solid #59885d; - - background-color: rgba(var(--menu-bg-colour), var(--menu-opacity)); - - display: flex; -} - -.toolbar-btn { - height: 100%; - width: 8.333333333%; - box-sizing: border-box; - - text-align: center; - font-weight: normal; - color: #ffffff; - font-size: 1.3em; -} - -.toolbar-btn.deactivated { - background-color: rgba(30, 31, 34, 0.4); -} - -.toolbar-btn + .toolbar-btn { - border-left: 3px solid #59885d; -} - -.toolbar-btn-double { - height: 100%; - flex: 1; - box-sizing: border-box; - - text-align: center; - font-weight: bold; - color: #ffffff; - font-size: 1.3em; - - border-left: 3px solid #59885d; - border-right: 3px solid #59885d; -} - -.toolbar-btn > img { - width: 50%; - height: 50%; - margin: 10% 25% 5%; -} - -.user-toolbar .toolbar-btn { - font-size: 0.9em; - width: 10%; -} - -.time-display { - margin-top: 0.1em; - font-size: 72px; -} - -/*Alert Box, Message Box*/ -.message-box { - position: absolute; - width: 40%; - min-height: 20em; - top: 20%; - left: -100%; - - border-radius: 0.25em; - overflow: hidden; - - box-sizing: border-box; - border: 3px solid #59885d; - - background-color: #373021; - - text-align: center; - z-index: 500; - justify-content: center; - align-items: center; - display: flex; - flex-direction: column; -} - -.message-box.alert-timed-box { - height: 50%; -} - -.message-box.in { - left: 30%; - transition: left 0.2s linear; -} -.message-box.out { - left: 100%; - transition: left 0.2s linear; -} - -.message-box.push-box { - z-index: 500; - left: 20%; - width: 60%; - top: 100%; - height: 10%; - min-height: 0; -} - -.message-box.push-box p { - flex: 0; -} - -.message-box.push-box.in { - left: 20%; - top: 70%; - transition: top 0.2s linear; -} -.message-box.push-box.out { - left: 20%; - top: 100%; - transition: top 0.2s linear; -} - -.message-box.hidden { - visibility: hidden; -} - -.message-box h2 { - font-size: 1.7em; -} - -.message-box p { - font-size: 1.3em; - margin-top: 0; - margin-bottom: 0; - flex: 100; - padding-left: 0.5em; - padding-right: 0.5em; -} - -.message-box .action-btn { - width: 4em; - height: 2em; - - padding: 0; - - font-size: 1.5em; - line-height: 1.8em; - - margin-top: 1em; - margin-bottom: 1em; -} -.message-box.alert-timed-box .action-btn { - bottom: 2em; -} -.message-box.alert-timed-box .message-time { - bottom: 0.5em; - position: absolute; - left: 0.5em; - right: 0.5em; - height: 2em; - border: 3px solid #59885d; - border-radius: 0.25em; -} -.message-box.alert-timed-box .message-time .message-time-bar { - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 0; - background: #ffffff; - border: 0.25em solid rgb(128, 128, 128); -} - -.message-box .action-btn.yes-btn { - left: 2.5em; -} - -.message-box .action-btn.no-btn { - right: 2.5em; -} - -.message-box .flex-row-container { - display: flex; - flex-direction: row; - width: 100%; - justify-content: space-around; -} - -/*Settings*/ -.settings-categorie { - display: none; -} -.settings-categorie.active { - display: block; -} -.settings-categorie h1 { - margin-top: 0; -} - -/*Messages*/ -.message-categorie { - display: none; -} -.message-categorie.active { - display: block; -} -.message-categorie h1 { - margin-top: 0; -} -.message-categorie .scroll-content { - left: 0; - width: 100%; - top: 4em; - bottom: 1em; - height: auto; -} - -.message-content { - border: 3px solid #59885d; - border-radius: 0.25em; - - margin-bottom: 1em; - - display: flex; - align-items: center; -} - -.message-image { - width: 5em; - height: 100%; - - border-right: 3px solid #59885d; - - margin-right: 0.6em; -} - -.message-text-wrapper { - flex: 1; - padding: 0.5em 0; - align-self: flex-start; -} - -.message-name { - font-size: 1.3em; - font-weight: bold; -} - -.message-text { - margin-right: 0.6em; - padding-left: 0.4em; - padding-top: 0.4em; -} - -.content-feed .scroll-content { - mask-image: linear-gradient(to bottom, black 80%, transparent 100%); - top: 1.5em; - left: 0; - right: 0; - bottom: 0; - height: 93%; - overflow-x: hidden; - margin-left: 10px; - margin-right: 10px; - margin-bottom: 5px; -} - -.feed-content { - border: 3px solid #59885d; - border-radius: 0.25em; - - margin-bottom: 0.2em; - - display: flex; - align-items: center; - width: 100%; -} - -.feed-image:hover { - filter: brightness(80%); -} - -.feed-image { - width: 4em; - height: 4em; - - border-right: 3px solid #59885d; - - margin-right: 0.6em; -} - -.feed-text-wrapper { - flex: 1; - display: flex; - flex-direction: column; - align-self: flex-start; - height: 100%; - justify-content: space-around; -} - -.feed-name { - font-size: 1.3em; - font-weight: bold; -} - -.feed-text { - margin-right: 0.6em; - padding-left: 0.4em; - overflow: hidden; - white-space: nowrap; - overflow-wrap: anywhere; - text-overflow: ellipsis; -} - -.feed-time-block { - align-self: flex-start; - margin: 10px; -} - -.button-root { - display: flex; -} - -.message-btn { - width: 5em; - height: 5em; - - text-align: center; - - border-left: 3px solid #59885d; -} - -.message-btn img { - width: 3.5em; - height: 3.5em; - padding-top: 0.2em; -} - -.noMessagesWrapper { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 79vh; -} -.noMessagesInfo { - position: absolute; - - border-radius: 0.25em; - border: 3px solid #59885d; - - display: flex; - - top: 38%; - bottom: 38%; - height: auto; - - left: 20%; - width: 60%; - - padding: 1.2em; -} - -.noMessagesInfo img { - width: 6em; - height: 6em; - margin-right: 2em; -} - -.noMessagesInfo div { - flex: 1; - font-size: 1.5em; - padding-top: 0.8em; -} - -/*General*/ -.filter-number { - position: absolute; - top: 0.5em; - right: 0.5em; -} - -/*Inputs*/ -.inp_slider { - border: 4px solid #59885d; - width: 100%; - height: 2em; - position: relative; - margin-bottom: 1em; -} -.inp_slider .valueBar { - position: absolute; - height: 100%; - background: white; - overflow-x: hidden; -} -.inp_slider .valueLabel { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - text-align: center; - /*text-shadow: 0 0 2px #000;*/ - line-height: 1.333333em; - font-size: 1.5em; - display: flex; - justify-content: center; - align-items: center; -} -.inp_slider .valueLabel.background { - color: white; -} -.inp_slider .valueLabel.foreground { - color: black; -} - -.inp_slider.color { - width: 80%; -} -.color-preview { - width: 18%; - position: absolute; - top: 0; - right: 0; - height: 8em; -} -.inp_dropdown { - border: 4px solid #59885d; - width: 15em; - height: 2em; - position: relative; - margin-bottom: 1em; -} -.inp_dropdown.open { - z-index: 10; -} -.inp_dropdown:hover { - background-color: rgba(55, 48, 33, 1); -} -.inp_dropdown.dropdown-full-width { - width: 100%; -} -.inp_dropdown_large { - border: 4px solid #59885d; - width: 30em; - height: 2em; - position: relative; - margin-bottom: 1em; -} -.inp_dropdown_large.open { - z-index: 10; -} -.inp_dropdown_large:hover { - background-color: rgba(55, 48, 33, 1); -} -.inp_dropdown_large.dropdown-full-width { - width: 100%; -} -.dropdown-value { - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - line-height: 1.333333em; - font-size: 1.5em; - text-align: center; - coh-font-fit-mode: shrink; -} -.valueList { - position: absolute; - top: 2em; - left: 0; - width: 100%; - display: none; - border: 4px solid #59885d; - - background-color: #373021; - z-index: 10; -} -.inp_dropdown.open .valueList { - display: block; -} -.inp_dropdown_large.open .valueList { - display: block; -} -.valueList .listValue { - line-height: 1.333333em; - font-size: 1.5em; - text-align: center; -} -.valueList .listValue + .listValue { - border-top: 1px solid #59885d; -} -.inp_dropdown .valueList .listValue:hover { - background-color: rgba(55, 48, 33, 1); - color: rgba(60, 60, 60, 1); -} -.inp_dropdown_large .valueList .listValue:hover { - background-color: rgba(55, 48, 33, 1); - color: rgba(60, 60, 60, 1); -} - -.inp_toggle { - height: 2em; - width: 2em; - border: 4px solid #59885d; - margin-bottom: 1em -} -.inp_toggle.checked { - background: white; -} - -.option-caption { - margin-right: 0.5em; - font-size: 1.5em; - line-height: 1.333333em; - width: 14em; -} -.option-input { - flex: 1; - position: relative; - display: flex; - align-items: flex-end; -} - -.option-input.flex-row { - flex-direction: column; - align-items: flex-start; -} - -.option-input .visualized-slider { - margin-bottom: 0; -} - -.option-input .slider-visualizer-level { - border-bottom: 5px solid #e43600; - width: 50%; - margin-bottom: 1em; - margin-top: 2px; -} - -.vertical-pack { - flex-direction: column; -} - -.vertical-pack * { - margin-bottom: 0px; -} - -.settings-categorie .inp_number { - width: 15em; -} - -.settings-categorie .content-btn { - width: 15em; - position: relative; - margin-bottom: 50px; -} - -.inp_search { - width: 100%; - border: 3px solid #59885d; - background: transparent; - border-radius: 0.25em; - padding-left: 0.5em; - padding-right: 0.5em; - font-family: "Noto Sans", "Noto Sans Symbols", "Noto Sans JP", "Noto Sans TC", "Noto Sans KR", "Noto Sans Arabic", "Noto Sans SC", sans-serif; - height: 70px; - font-size: 45px; - color: #000000; - background: #ffffff; -} - -.content-avatar-functions .action-btn { - padding: 40px 0; - text-align: center; -} - -.inp_button_bar { - width: 100%; - position: relative; - margin-bottom: 1em; - display: flex; -} - -.inp_button { - width: 10%; - border: 4px solid #59885d; - text-align: center; - line-height: 1.333333em; - font-size: 1.5em; - color: rgb(60,60,60); - background: #EADA4C; -} -.imperialDisplay { - width: 30%; - border: 4px solid #59885d; - text-align: center; - line-height: 1.333333em; - font-size: 1.5em; - color: white; -} - -.inp_btn_action { - width: 30%; - border: 4px solid #59885d; - text-align: center; - line-height: 1.333333em; - font-size: 1.5em; - color: white; - background: #00CC00; -} - -.inp_joystick { - width: 12em; - height: 12em; - border: 4px solid #59885d; - margin-bottom: 1em; - position: relative; - background-image: url(gfx/Joystick_bg.svg); - background-size: 100% 100%; -} -.pointer { - position: absolute; - height: 1em; - width: 1em; - border-radius: 50%; - border: 4px solid #59885d; - background: white; - margin-left: -0.5em; - margin-top: -0.5em; -} - -.inp_sliderH { - width: 4em; - height: 12em; - border: 4px solid #59885d; - position: absolute; - left: 13em; -} -.inp_sliderH .valueBar { - position: absolute; - width: 100%; - background: white; - bottom: 0; -} -.inp_sliderH .valueLabel { - position: absolute; - top: 3.1em; - left: 0; - width: 100%; - height: 100%; - text-align: center; - line-height: 1.333333em; - font-size: 1.5em; - color: #ffffff; -} -.inp_number { - border: 4px solid #59885d; - width: 100%; - height: 1.333em; - position: relative; - margin-bottom: 1em; - - text-align: center; - line-height: 1.333333em; - font-size: 1.5em; - color: #ffffff; -} - -#avatar-settings { - background-color: #373021; -} -.advAvtrProfile { - width: 100%; - height: 2em; - position: relative; - margin-bottom: 0.2em; - font-size: 1.3em; - padding: 0.2em; - text-align: center; - display: flex; -} -.advAvtrProfName { - flex: 1; - border: 2px solid #59885d; - - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} -.advAvtrProfSave { - width: 1.3em; - border: 2px solid #59885d; - margin-left: 0.3em; -} -.advAvtrProfDelete { - width: 1.3em; - border: 2px solid #59885d; - margin-left: 0.3em; -} - - - -/*Keyboard*/ -#numpad { - position: absolute; - width: 40%; - height: 70%; - top: 5%; - left: -100%; - - border-radius: 0.25em; - overflow: hidden; - - box-sizing: border-box; - border: 3px solid #59885d; - - background-color: #373021; - - text-align: center; -} -#numpad.in { - left: 30%; - transition: left 0.2s linear; -} -#numpad.out { - left: 100%; - transition: left 0.2s linear; -} -.mainRows { - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; -} -.numpad-row { - width: 75%; - height: 20%; - position: absolute; - top: 0; - left: 0; - - display: flex; -} -.numpad-row + .numpad-row { - border-top: 3px solid #59885d; -} -.numpad-row.r1 { - top: 0; - height: 20%; -} -.numpad-row.r2 { - top: 20%; -} -.numpad-row.r3 { - top: 40%; -} -.numpad-row.r4 { - top: 60%; -} -.numpad-row.r5 { - top: 80%; -} -#numpad-input { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border: 0; - - text-align: center; - font-size: 2em; - line-height: 3em; -} -#numpad-input.placeholder { - color: #777777; -} -.numpadButton { - flex: 1; - padding-top: 1.3em; - font-size: 1.5em; -} -.numpadButton.doubleWide { - flex: 2; -} -.numpadButton + .numpadButton { - border-left: 3px solid #59885d; -} - -.numpadButton.horizontal { - position: absolute; - border-left: 3px solid #59885d; - width: 25%; - height: 40%; - right: 0; -} -.numpadButton.horizontal.single { - height: 20%; -} -.numpadButton.horizontal + .numpadButton.horizontal { - border-top: 3px solid #59885d; -} - -.numpadButton.btn-back { - top: 0; - background: #E43600; -} -.numpadButton.btn-back:hover { - background: #f56b40; -} - -.numpadButton.btn-clear { - top: 20%; -} -.numpadButton.btn-minus { - top: 40%; -} -.numpadButton.btn-enter { - top: 60%; -} - -/*Avatar Details*/ -#avatar-detail { - background-color: #373021; -} - -#avatar-detail h1 { - text-align: left; - margin-top: 0.3em; - margin-left: 0.5em; - margin-right: 4em; -} -.avatar-sidebar { - position: absolute; - top: 10%; - width: 20%; - padding: 0.5em; - height: 88%; - left: 1%; - - border-radius: 0.25em; - border: 3px solid #59885d; -} -.avatar-image { - width: 14.5em; - height: 14.5em; -} -.avatar-sidebar h2, .avatar-sidebar h3 { - font-weight: normal; - margin-bottom: 0; - text-align: center; - margin-top: 0.2em; -} -.avatar-sidebar h3 { - margin-top: 0; - margin-bottom: 0.8em; -} - -.avatar-maininformation { - position: absolute; - top: 10%; - width: 77%; - height: 70%; - left: 22%; - - border-radius: 0.25em; - border: 3px solid #59885d; -} - -.avatar-toolbar { - position: absolute; - top: 82%; - width: 77%; - height: 16%; - left: 22%; - - border-radius: 0.25em; - border: 3px solid #59885d; - - display: flex; -} - -.avatar-toolbar .toolbar-btn { - width: 11.111111%; -} - -.avatar-maininformation { - padding: 0 1em; -} - -/*Prop Detail*/ -/*Avatar Details*/ -#prop-detail { - background-color: #373021; -} - -#prop-detail h1 { - text-align: left; - margin-top: 0.3em; - margin-left: 0.5em; - margin-right: 4em; -} -.prop-maininformation .description { - white-space: normal; - overflow-wrap: break-word; -} -.prop-sidebar { - position: absolute; - top: 10%; - width: 20%; - padding: 0.5em; - height: 88%; - left: 1%; - - border-radius: 0.25em; - border: 3px solid #59885d; -} -.prop-image { - width: 14.5em; - height: 14.5em; -} -.prop-sidebar h2, .prop-sidebar h3 { - font-weight: normal; - margin-bottom: 0; - text-align: center; - margin-top: 0.2em; -} -.prop-sidebar h3 { - margin-top: 0; - margin-bottom: 0.8em; -} - -.prop-maininformation { - position: absolute; - top: 10%; - width: 77%; - height: 70%; - left: 22%; - - border-radius: 0.25em; - border: 3px solid #59885d; -} - -.prop-toolbar { - position: absolute; - top: 82%; - width: 77%; - height: 16%; - left: 22%; - - border-radius: 0.25em; - border: 3px solid #59885d; - - display: flex; -} - -.prop-toolbar .toolbar-btn { - width: 11.111111%; -} - -.prop-maininformation { - padding: 0 1em; -} - -#friend .list-content, #avatars .list-content, #worlds .list-content, #props .list-content { - padding-right: 0; - width: 76%; -} -.flex-list { - display: flex; - width: 100%; - flex-wrap: wrap; -} -.content-cell { - width: 22.000000%; -} -.content-cell.friend { - width: 18.5%; - margin-right: 1.5%; - margin-bottom: 1.5%; -} - - - -.settings-categorie p { - margin-top: 0; - margin-bottom: 0; - font-size: 1.25em; -} - -.settings-categorie .text-center { - text-align: center; -} - -.settings-categorie .contact-icons { - position: relative; - display: flex; - text-align: center; -} -.settings-categorie .contact-icons .contact-icon { - position: relative; - width: 33.3333%; -} -.settings-categorie .contact-icons .contact-icon img { - width: 150px; - height: 150px; - margin-bottom: 1em; -} - -.settings-categorie .contact-icons-center { - position: relative; - display: flex; - justify-content: center; - text-align: center; -} -.settings-categorie .contact-icons-center .contact-icon { - position: relative; - width: 33.3333%; -} -.settings-categorie .contact-icons-center .contact-icon img { - width: 150px; - height: 150px; - margin-bottom: 1em; -} - -.settings-categorie .text-wrapper { - position: relative; - display: flex; -} -.settings-categorie .text-left-half { - width: 49%; - margin-right: 2%; -} -.settings-categorie .text-right-half { - width: 49%; -} - -tr { - display: flex; - border: 2px solid white; - border-bottom: 0; - text-align: center; -} -tr.first { - background: white; -} -tr.last { - border-bottom: 2px solid white; -} -th { - color: #666666; -} -th, td { - padding: 15px; - width: 50%; -} -th.first, td.first { - border-right: 2px solid white; -} - -td div { - text-align: center; - display: flex; - width: 100%; -} - -#settings-support .content-btn { - padding-top: 20px; - height: 3em; -} - -.support-code-display { - position: relative; - width: 100%; - top: 32px; - height: 96px; - font-size: 70px; - line-height: 96px; - text-align: center; - - border-radius: 8px; - - border: 3px solid #59885d; -} - -.support-code-hint { - position: relative; - top: 50px; -} - -.warning-box { - padding: 0.5em; - border: 3px solid #CCCC00; - margin-bottom: 1em; -} - -/*Search*/ -#search .list-content .hidden { - display: none; -} -.result-count { - position: absolute; - right: 10px; - top: 10px; -} -.filter-option .result-count { - top: 15px; -} -.search-results-header { - margin-bottom: 35px; - margin-right: 25px; - padding: 10px; - position: relative; - border-radius: 8px; - border: 3px solid #59885d; -} - -.option-caption.nsfw-toggle-caption { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - align-items: center; - width: 100%; -} - -.nsfw-toggle-caption.hidden { - display: none; -} - -.nsfw-toggle-caption .inp_toggle { - margin: initial; -} - -#search .content-cell.avatar, #search .content-cell.world, #search .content-cell.prop { - width: 22.4%; - - padding: 1%; - - box-sizing: border-box; - - margin: 0 3% 3% 0; -} -/* -#search .content-cell.prop .content-cell-formatter { - margin-top: 7em; -}*/ - -.message-box.loading-box { - left: 20%; - width: 60%; - top: 100%; - height: 10%; - min-height: 0; - - z-index: 10000; -} -.message-box.loading-box p { - flex: 0; -} -.message-box.loading-box.in { - left: 20%; - top: 70%; - transition: top 0.2s linear; -} -.message-box.loading-box.out { - left: 20%; - top: 100%; - transition: top 0.2s linear; -} - -.content-count { - z-index: 10; - position: absolute; - margin: 10px; - background: url("gfx/nav-friends.svg") no-repeat; - background-color: #373021; - background-size: 60px 34px; - background-position: 0 10px; - padding: 10px; - padding-left: 60px; - border-radius: 20px; -} - -.noflex { - display: block; -} - -.invite-request-btn { - font-size: 0.8em; - line-height: 1.700000em; -} - -#settings .filter-option { - padding: 0.35em 0.5em; - font-size: 30px; -} - -.settings-categorie .row-wrapper p { - margin-top: -0.75em; - margin-bottom: 1.5em; - font-size: 1em; -} - -.row-wrapper.has-preview { - position: relative; -} -.row-wrapper.has-preview .color-preview { - position: absolute; - top: 0; - left: 330px; - width: 12%; -} - -/*Public User Content*/ -.user-public-content { - width: 22%; - margin: 0 1.5% 3%; - padding: 1em; - border: 3px solid #59885d; - border-radius: 10px; - display: flex; - flex-direction: column; -} -.user-public-content img { - width: 11em; - height: 11em; -} -.user-public-content .name { - text-align: center; - margin: 5px 0; - flex: 1; -} -.user-public-content .detail-btn { - border: 3px solid #59885d; - border-radius: 5px; - padding: 5px; - text-align: center; -} -.user-public-content .detail-btn:hover { - background: #59885d; -} - -img[data-loading-url] { - background: url(gfx/loading_placeholder.png) center no-repeat; - background-size: 100% 100%; -} -#search-btn { - width: 80%; - height: 40%; - font-size: 58px; - margin-top: 8px; -} - -.color-indicator { - width: 48px; - height: 48px; - margin-right: 12px; - float: left; - - display: flex; - justify-content: space-between; - - overflow: hidden; -} -.color-indicator.half { - width: 24px !important; -} -.color-indicator .color-indicator { - width: 48px; - height: 48px; - margin-right: 0; - display: inline-block; - float: left; -} -.color-indicator.round { - border-radius: 24px; -} -.color-indicator.arrow { - clip-path: polygon(0% 50%, 50% 0%, 100% 50%, 66% 50%, 66% 100%, 33% 100%, 33% 50%); -} -.option-input.pull-1{ - margin-left: -60px; -} -.option-input.pull-2{ - margin-left: -120px; -} -.option-input.pull-3{ - margin-left: -180px; -} -.log-entry { - display: flex; - align-items: flex-start; - padding: 5px 10px; -} - -.log-time { - width: 100px; - flex-shrink: 0; - font-weight: bold; -} - -.log-message { - flex-grow: 1; - width: 95%; - white-space: pre-wrap; - word-break: break-word; -} - -.log-divider { - border: 0; - height: 1px; - background: rgba(255, 255, 255, 0.2); - margin: 5px 0; -} - -.log-level-ERROR { - color: #BB0000; -} - -.log-level-WARNING { - color: #BBBB00; -} - -/* Content Share: Base */ - -.content-sharing-base-dialog { - position: fixed; - background-color: #373021; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 800px; - min-width: 500px; - border: 3px solid #59885d; - padding: 20px; - z-index: 100000; - opacity: 0; - transition: opacity 0.2s linear; -} - -.content-sharing-base-dialog.in { - opacity: 1; -} - -.content-sharing-base-dialog.out { - opacity: 0; -} - -.content-sharing-base-dialog.hidden { - display: none; -} - -.content-sharing-base-dialog h2, -.content-sharing-base-dialog h3 { - margin-top: 0; - margin-bottom: 0.5em; - text-align: left; -} - -.content-sharing-base-dialog .description { - margin-bottom: 1em; - text-align: left; - font-size: 0.9em; - color: #aaa; -} - -.content-sharing-base-dialog .close-btn { - position: absolute; - top: 1%; - right: 1%; - border-radius: 0.25em; - border: 3px solid #59885d; - padding: 0.5em; - width: 8em; - text-align: center; -} - -.page-btn { - border-radius: 0.25em; - border: 3px solid #59885d; - padding: 0.5em; - width: 8em; - text-align: center; -} - -.page-btn:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -.inp-hidden { - display: none; -} - -/* Content Share: Share Bubble */ - -.share-bubble-dialog { - z-index: 1002; - max-width: 800px; - transform: translate(-50%, -60%); -} - -.share-bubble-dialog .content-btn { - position: relative; - margin-bottom: 0.5em; -} - -.share-bubble-dialog .btn-group { - display: flex; - margin-bottom: 1em; -} - -.share-bubble-dialog .option-select { - flex: 1 1 0; - min-width: 0; - background-color: inherit; - text-align: center; - padding: 0.5em; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - border: 1px solid inherit; -} - -.share-bubble-dialog .option-select + .option-select { - margin-left: -1px; -} - -.share-bubble-dialog .option-select.active { - background-color: #1b5037; -} -.share-bubble-dialog .option-select:hover { - background-color: #373021; -} - -.share-bubble-dialog .action-buttons { - margin-top: 1em; - display: flex; - justify-content: space-between; -} - -.share-bubble-dialog .action-btn { - flex: 1; - text-align: center; - padding: 0.5em; - border-radius: 0.25em; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - margin-right: 0.5em; -} - -.share-bubble-dialog .action-btn:last-child { - margin-right: 0; -} - -/* Content Share: Share Select */ - -.share-select-dialog { - z-index: 1001; - width: 650px; - height: 480px; - transform: translate(-50%, -80%); -} - -.share-select-dialog .share-options { - display: flex; - flex-direction: column; - gap: 15px; - margin-top: 20px; -} - -.share-select-dialog .share-option { - padding: 20px; - text-align: left; - cursor: pointer; - background: rgba(0, 0, 0, 0.2); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 4px; - transition: background-color 0.2s ease; -} - -.share-select-dialog .share-option:hover { - background-color: #373021; - border-color: rgba(255, 255, 255, 0.2); -} - -.share-select-dialog h3 { - margin: 0 0 8px 0; - font-size: 1.2em; -} - -.share-select-dialog p { - margin: 0; - opacity: 0.8; - font-size: 0.95em; - line-height: 1.4; -} - -/* Content Share: Direct Share */ - -.direct-share-dialog { - z-index: 1003; - width: 800px; - height: 1000px; - transform: translate(-50%, -60%); - display: flex; - flex-direction: column; -} - -.direct-share-dialog .search-container { - margin: 20px 0; - padding: 10px; - background: rgba(0, 0, 0, 0.2); - border-radius: 4px; -} - -.direct-share-dialog .search-input { - width: 100%; - padding: 10px; - border: none; - background: transparent; - color: inherit; - font-size: 1.1em; -} - -.direct-share-dialog .source-indicator { - padding: 10px; - text-align: center; - opacity: 0.8; - background: rgba(0, 0, 0, 0.1); - border-radius: 4px; - margin-bottom: 20px; -} - -.direct-share-dialog .users-container { - flex: 1; - overflow-y: auto; - margin-bottom: 20px; - min-height: 0; -} - -.direct-share-dialog .user-item { - display: flex; - align-items: center; - padding: 15px; - border: 1px solid rgba(255, 255, 255, 0.1); - margin-bottom: 10px; - background: rgba(0, 0, 0, 0.2); - border-radius: 4px; - min-height: 96px; -} - -.direct-share-dialog .user-item img { - width: 96px; - height: 96px; - margin-right: 15px; - cursor: pointer; - border-radius: 4px; -} - -.direct-share-dialog .user-item .user-name { - flex: 1; - font-size: 1.3em; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - margin-right: 15px; - cursor: pointer; -} - -.direct-share-dialog .user-item .action-btn { - width: 140px; - height: 50px; - font-size: 1.2em; - color: white; - background-color: #373021; - border-radius: 4px; - display: inline-flex; - align-items: center; - justify-content: center; -} - -.direct-share-dialog .user-item .action-btn:disabled { - opacity: 0.5; - cursor: not-allowed; - background-color: #4a9eff; -} - -.direct-share-dialog .pagination { - border-top: 1px solid rgba(255, 255, 255, 0.1); - padding-top: 20px; -} - -.direct-share-dialog .page-info { - font-size: 1.1em; - opacity: 0.8; - margin-bottom: 15px; - text-align: center; -} - -.direct-share-dialog .page-buttons { - display: flex; - justify-content: center; - gap: 20px; -} - -.direct-share-dialog .user-item .action-btn { - width: 180px; - height: 60px; - font-size: 1.2em; - color: white; - border-radius: 4px; - display: inline-flex; - align-items: center; - justify-content: center; - margin-left: 10px; - padding: 0 20px; - text-align: center; - background-color: #373021; -} - -.direct-share-dialog .user-item .action-btn:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -.direct-share-dialog .user-item .action-btn.shared { - background-color: #4a9eff; -} - -.direct-share-dialog .user-item .action-btn.failed { - background-color: #ff6b6b; -} - -.direct-share-dialog #users-loading, -.direct-share-dialog #users-error, -.direct-share-dialog #users-empty { - text-align: center; - padding: 2em; - font-size: 1.1em; -} - -.direct-share-dialog #shares-error { - color: #ff6b6b; -} - -/* Content Share: Unshare */ - -.unshare-dialog { - z-index:1000; - width: 800px; - height: 1000px; - transform: translate(-50%, -60%); - display: flex; - flex-direction: column; -} - -.unshare-dialog .shares-container { - flex: 1; - overflow-y: auto; - margin: 20px 0; - min-height: 0; -} - -.unshare-dialog #shares-loading, -.unshare-dialog #shares-error, -.unshare-dialog #shares-empty { - text-align: center; - padding: 2em; - font-size: 1.1em; -} - -.unshare-dialog #shares-error { - color: #ff6b6b; -} - -.unshare-dialog .share-item { - display: flex; - align-items: center; - padding: 15px; - border: 1px solid rgba(255, 255, 255, 0.1); - margin-bottom: 10px; - background: rgba(0, 0, 0, 0.2); - border-radius: 4px; - min-height: 120px; -} - -.unshare-dialog .share-item img { - width: 96px; - height: 96px; - border-radius: 4px; - margin-right: 15px; - cursor: pointer; -} - -.unshare-dialog .share-item .user-name { - flex: 1; - font-size: 1.3em; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - margin-right: 15px; - cursor: pointer; -} - -.unshare-dialog .action-btn { - width: 180px; - height: 60px; - font-size: 1.2em; - color: white; - border-radius: 4px; - display: inline-flex; - align-items: center; - justify-content: center; - margin-left: 10px; - padding: 0 20px; - text-align: center; -} - -.unshare-dialog .revoke-btn { - background-color: #ff6b6b; -} - -.unshare-dialog .undo-btn { - background-color: #4a9eff; -} - -.unshare-dialog .action-btn:disabled { - opacity: 0.5; - cursor: not-allowed; - background-color: #666; -} - -.unshare-dialog .pagination { - border-top: 1px solid rgba(255, 255, 255, 0.1); - padding-top: 20px; -} - -.unshare-dialog .page-info { - font-size: 1.1em; - opacity: 0.8; - margin-bottom: 15px; - text-align: center; -} - -.unshare-dialog .page-buttons { - display: flex; - justify-content: center; - gap: 20px; -} - -.unshare-dialog .share-item.revoked { - opacity: 0.7; -} -- 2.49.1 From 7daa84abd51eab0be57e1fad5a7b468aacfbb08d Mon Sep 17 00:00:00 2001 From: Malthbern Date: Wed, 27 Aug 2025 23:53:45 +0000 Subject: [PATCH 18/18] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 899e8f6..19265be 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ Just a repo where i'll keep updated CSS to return the green UI colors to the current iteration of CVR's UI ## usage -replace ui.css you download from [here](https://gitea.malthbern.com/Malthbern/CVR_Return-green-UI/raw/branch/nerdbranch-dev/ui.css) +replace ui.css you download from [here](https://gitea.malthbern.com/Malthbern/CVR_Return-green-UI/src/branch/bigmenu/ui.css) in < Steam Root >/common/ChilloutVR/ChilloutVR_Data/StreamingAssets/Cohtml/UIResources/CVRTest/ -- 2.49.1