From 58514a17c01e09f839b6edf6441466e31559b1ad Mon Sep 17 00:00:00 2001 From: Malthbern Date: Fri, 4 Apr 2025 00:46:29 +0000 Subject: [PATCH 01/14] 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/14] 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/14] 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/14] 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/14] 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/14] 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/14] 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/14] 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/14] 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/14] 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/14] 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 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 12/14] 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 8bcd811c053d41158839d74edd80dc93fae3e61f Mon Sep 17 00:00:00 2001 From: Malthbern Date: Wed, 27 Aug 2025 11:44:58 +0000 Subject: [PATCH 13/14] 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 8d8bc68ea50fb3b89cd34528edb2c56525a68432 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 14/14] 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