From f161bd8c43c96d6cc0f1e5e727bf8949197eac02 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Sat, 6 Nov 2021 18:14:46 +0530 Subject: [PATCH] started CC overhaul --- .gitignore | 2 - Content Collaboration.html | 10316 ----------------------- LICENSE | 674 -- README.md | 19 - blockchainCloud_client.html | 9479 --------------------- components.js | 4682 +++++------ css/main.css | 1362 ++-- css/main.min.css | 2 +- css/main.scss | 1455 ++-- index.html | 14959 ++++++---------------------------- purify.min.js | 3 + reports.html | 10665 ------------------------ 12 files changed, 5752 insertions(+), 47866 deletions(-) delete mode 100644 .gitignore delete mode 100644 Content Collaboration.html delete mode 100644 LICENSE delete mode 100644 README.md delete mode 100644 blockchainCloud_client.html create mode 100644 purify.min.js delete mode 100644 reports.html diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 1346928..0000000 --- a/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -playground/ -combo.html \ No newline at end of file diff --git a/Content Collaboration.html b/Content Collaboration.html deleted file mode 100644 index b577287..0000000 --- a/Content Collaboration.html +++ /dev/null @@ -1,10316 +0,0 @@ - - - - Content Collaboration - - - - - - - - - - - - -
-
- - -
-
- - -
- - -
- - - - - - - -

Loading the latest content

- -
- -
-
-
- - - - - - - - - - - - - - - -
\ No newline at end of file diff --git a/LICENSE b/LICENSE deleted file mode 100644 index f288702..0000000 --- a/LICENSE +++ /dev/null @@ -1,674 +0,0 @@ - GNU GENERAL PUBLIC LICENSE - Version 3, 29 June 2007 - - Copyright (C) 2007 Free Software Foundation, Inc. - Everyone is permitted to copy and distribute verbatim copies - of this license document, but changing it is not allowed. - - Preamble - - The GNU General Public License is a free, copyleft license for -software and other kinds of works. - - The licenses for most software and other practical works are designed -to take away your freedom to share and change the works. By contrast, -the GNU General Public License is intended to guarantee your freedom to -share and change all versions of a program--to make sure it remains free -software for all its users. We, the Free Software Foundation, use the -GNU General Public License for most of our software; it applies also to -any other work released this way by its authors. You can apply it to -your programs, too. - - When we speak of free software, we are referring to freedom, not -price. Our General Public Licenses are designed to make sure that you -have the freedom to distribute copies of free software (and charge for -them if you wish), that you receive source code or can get it if you -want it, that you can change the software or use pieces of it in new -free programs, and that you know you can do these things. - - To protect your rights, we need to prevent others from denying you -these rights or asking you to surrender the rights. Therefore, you have -certain responsibilities if you distribute copies of the software, or if -you modify it: responsibilities to respect the freedom of others. - - For example, if you distribute copies of such a program, whether -gratis or for a fee, you must pass on to the recipients the same -freedoms that you received. You must make sure that they, too, receive -or can get the source code. And you must show them these terms so they -know their rights. - - Developers that use the GNU GPL protect your rights with two steps: -(1) assert copyright on the software, and (2) offer you this License -giving you legal permission to copy, distribute and/or modify it. - - For the developers' and authors' protection, the GPL clearly explains -that there is no warranty for this free software. For both users' and -authors' sake, the GPL requires that modified versions be marked as -changed, so that their problems will not be attributed erroneously to -authors of previous versions. - - Some devices are designed to deny users access to install or run -modified versions of the software inside them, although the manufacturer -can do so. This is fundamentally incompatible with the aim of -protecting users' freedom to change the software. The systematic -pattern of such abuse occurs in the area of products for individuals to -use, which is precisely where it is most unacceptable. Therefore, we -have designed this version of the GPL to prohibit the practice for those -products. If such problems arise substantially in other domains, we -stand ready to extend this provision to those domains in future versions -of the GPL, as needed to protect the freedom of users. - - Finally, every program is threatened constantly by software patents. -States should not allow patents to restrict development and use of -software on general-purpose computers, but in those that do, we wish to -avoid the special danger that patents applied to a free program could -make it effectively proprietary. To prevent this, the GPL assures that -patents cannot be used to render the program non-free. - - The precise terms and conditions for copying, distribution and -modification follow. - - TERMS AND CONDITIONS - - 0. Definitions. - - "This License" refers to version 3 of the GNU General Public License. - - "Copyright" also means copyright-like laws that apply to other kinds of -works, such as semiconductor masks. - - "The Program" refers to any copyrightable work licensed under this -License. Each licensee is addressed as "you". "Licensees" and -"recipients" may be individuals or organizations. - - To "modify" a work means to copy from or adapt all or part of the work -in a fashion requiring copyright permission, other than the making of an -exact copy. The resulting work is called a "modified version" of the -earlier work or a work "based on" the earlier work. - - A "covered work" means either the unmodified Program or a work based -on the Program. - - To "propagate" a work means to do anything with it that, without -permission, would make you directly or secondarily liable for -infringement under applicable copyright law, except executing it on a -computer or modifying a private copy. Propagation includes copying, -distribution (with or without modification), making available to the -public, and in some countries other activities as well. - - To "convey" a work means any kind of propagation that enables other -parties to make or receive copies. Mere interaction with a user through -a computer network, with no transfer of a copy, is not conveying. - - An interactive user interface displays "Appropriate Legal Notices" -to the extent that it includes a convenient and prominently visible -feature that (1) displays an appropriate copyright notice, and (2) -tells the user that there is no warranty for the work (except to the -extent that warranties are provided), that licensees may convey the -work under this License, and how to view a copy of this License. If -the interface presents a list of user commands or options, such as a -menu, a prominent item in the list meets this criterion. - - 1. Source Code. - - The "source code" for a work means the preferred form of the work -for making modifications to it. "Object code" means any non-source -form of a work. - - A "Standard Interface" means an interface that either is an official -standard defined by a recognized standards body, or, in the case of -interfaces specified for a particular programming language, one that -is widely used among developers working in that language. - - The "System Libraries" of an executable work include anything, other -than the work as a whole, that (a) is included in the normal form of -packaging a Major Component, but which is not part of that Major -Component, and (b) serves only to enable use of the work with that -Major Component, or to implement a Standard Interface for which an -implementation is available to the public in source code form. A -"Major Component", in this context, means a major essential component -(kernel, window system, and so on) of the specific operating system -(if any) on which the executable work runs, or a compiler used to -produce the work, or an object code interpreter used to run it. - - The "Corresponding Source" for a work in object code form means all -the source code needed to generate, install, and (for an executable -work) run the object code and to modify the work, including scripts to -control those activities. However, it does not include the work's -System Libraries, or general-purpose tools or generally available free -programs which are used unmodified in performing those activities but -which are not part of the work. For example, Corresponding Source -includes interface definition files associated with source files for -the work, and the source code for shared libraries and dynamically -linked subprograms that the work is specifically designed to require, -such as by intimate data communication or control flow between those -subprograms and other parts of the work. - - The Corresponding Source need not include anything that users -can regenerate automatically from other parts of the Corresponding -Source. - - The Corresponding Source for a work in source code form is that -same work. - - 2. Basic Permissions. - - All rights granted under this License are granted for the term of -copyright on the Program, and are irrevocable provided the stated -conditions are met. This License explicitly affirms your unlimited -permission to run the unmodified Program. The output from running a -covered work is covered by this License only if the output, given its -content, constitutes a covered work. This License acknowledges your -rights of fair use or other equivalent, as provided by copyright law. - - You may make, run and propagate covered works that you do not -convey, without conditions so long as your license otherwise remains -in force. You may convey covered works to others for the sole purpose -of having them make modifications exclusively for you, or provide you -with facilities for running those works, provided that you comply with -the terms of this License in conveying all material for which you do -not control copyright. Those thus making or running the covered works -for you must do so exclusively on your behalf, under your direction -and control, on terms that prohibit them from making any copies of -your copyrighted material outside their relationship with you. - - Conveying under any other circumstances is permitted solely under -the conditions stated below. Sublicensing is not allowed; section 10 -makes it unnecessary. - - 3. Protecting Users' Legal Rights From Anti-Circumvention Law. - - No covered work shall be deemed part of an effective technological -measure under any applicable law fulfilling obligations under article -11 of the WIPO copyright treaty adopted on 20 December 1996, or -similar laws prohibiting or restricting circumvention of such -measures. - - When you convey a covered work, you waive any legal power to forbid -circumvention of technological measures to the extent such circumvention -is effected by exercising rights under this License with respect to -the covered work, and you disclaim any intention to limit operation or -modification of the work as a means of enforcing, against the work's -users, your or third parties' legal rights to forbid circumvention of -technological measures. - - 4. Conveying Verbatim Copies. - - You may convey verbatim copies of the Program's source code as you -receive it, in any medium, provided that you conspicuously and -appropriately publish on each copy an appropriate copyright notice; -keep intact all notices stating that this License and any -non-permissive terms added in accord with section 7 apply to the code; -keep intact all notices of the absence of any warranty; and give all -recipients a copy of this License along with the Program. - - You may charge any price or no price for each copy that you convey, -and you may offer support or warranty protection for a fee. - - 5. Conveying Modified Source Versions. - - You may convey a work based on the Program, or the modifications to -produce it from the Program, in the form of source code under the -terms of section 4, provided that you also meet all of these conditions: - - a) The work must carry prominent notices stating that you modified - it, and giving a relevant date. - - b) The work must carry prominent notices stating that it is - released under this License and any conditions added under section - 7. This requirement modifies the requirement in section 4 to - "keep intact all notices". - - c) You must license the entire work, as a whole, under this - License to anyone who comes into possession of a copy. This - License will therefore apply, along with any applicable section 7 - additional terms, to the whole of the work, and all its parts, - regardless of how they are packaged. This License gives no - permission to license the work in any other way, but it does not - invalidate such permission if you have separately received it. - - d) If the work has interactive user interfaces, each must display - Appropriate Legal Notices; however, if the Program has interactive - interfaces that do not display Appropriate Legal Notices, your - work need not make them do so. - - A compilation of a covered work with other separate and independent -works, which are not by their nature extensions of the covered work, -and which are not combined with it such as to form a larger program, -in or on a volume of a storage or distribution medium, is called an -"aggregate" if the compilation and its resulting copyright are not -used to limit the access or legal rights of the compilation's users -beyond what the individual works permit. Inclusion of a covered work -in an aggregate does not cause this License to apply to the other -parts of the aggregate. - - 6. Conveying Non-Source Forms. - - You may convey a covered work in object code form under the terms -of sections 4 and 5, provided that you also convey the -machine-readable Corresponding Source under the terms of this License, -in one of these ways: - - a) Convey the object code in, or embodied in, a physical product - (including a physical distribution medium), accompanied by the - Corresponding Source fixed on a durable physical medium - customarily used for software interchange. - - b) Convey the object code in, or embodied in, a physical product - (including a physical distribution medium), accompanied by a - written offer, valid for at least three years and valid for as - long as you offer spare parts or customer support for that product - model, to give anyone who possesses the object code either (1) a - copy of the Corresponding Source for all the software in the - product that is covered by this License, on a durable physical - medium customarily used for software interchange, for a price no - more than your reasonable cost of physically performing this - conveying of source, or (2) access to copy the - Corresponding Source from a network server at no charge. - - c) Convey individual copies of the object code with a copy of the - written offer to provide the Corresponding Source. This - alternative is allowed only occasionally and noncommercially, and - only if you received the object code with such an offer, in accord - with subsection 6b. - - d) Convey the object code by offering access from a designated - place (gratis or for a charge), and offer equivalent access to the - Corresponding Source in the same way through the same place at no - further charge. You need not require recipients to copy the - Corresponding Source along with the object code. If the place to - copy the object code is a network server, the Corresponding Source - may be on a different server (operated by you or a third party) - that supports equivalent copying facilities, provided you maintain - clear directions next to the object code saying where to find the - Corresponding Source. Regardless of what server hosts the - Corresponding Source, you remain obligated to ensure that it is - available for as long as needed to satisfy these requirements. - - e) Convey the object code using peer-to-peer transmission, provided - you inform other peers where the object code and Corresponding - Source of the work are being offered to the general public at no - charge under subsection 6d. - - A separable portion of the object code, whose source code is excluded -from the Corresponding Source as a System Library, need not be -included in conveying the object code work. - - A "User Product" is either (1) a "consumer product", which means any -tangible personal property which is normally used for personal, family, -or household purposes, or (2) anything designed or sold for incorporation -into a dwelling. In determining whether a product is a consumer product, -doubtful cases shall be resolved in favor of coverage. For a particular -product received by a particular user, "normally used" refers to a -typical or common use of that class of product, regardless of the status -of the particular user or of the way in which the particular user -actually uses, or expects or is expected to use, the product. A product -is a consumer product regardless of whether the product has substantial -commercial, industrial or non-consumer uses, unless such uses represent -the only significant mode of use of the product. - - "Installation Information" for a User Product means any methods, -procedures, authorization keys, or other information required to install -and execute modified versions of a covered work in that User Product from -a modified version of its Corresponding Source. The information must -suffice to ensure that the continued functioning of the modified object -code is in no case prevented or interfered with solely because -modification has been made. - - If you convey an object code work under this section in, or with, or -specifically for use in, a User Product, and the conveying occurs as -part of a transaction in which the right of possession and use of the -User Product is transferred to the recipient in perpetuity or for a -fixed term (regardless of how the transaction is characterized), the -Corresponding Source conveyed under this section must be accompanied -by the Installation Information. But this requirement does not apply -if neither you nor any third party retains the ability to install -modified object code on the User Product (for example, the work has -been installed in ROM). - - The requirement to provide Installation Information does not include a -requirement to continue to provide support service, warranty, or updates -for a work that has been modified or installed by the recipient, or for -the User Product in which it has been modified or installed. Access to a -network may be denied when the modification itself materially and -adversely affects the operation of the network or violates the rules and -protocols for communication across the network. - - Corresponding Source conveyed, and Installation Information provided, -in accord with this section must be in a format that is publicly -documented (and with an implementation available to the public in -source code form), and must require no special password or key for -unpacking, reading or copying. - - 7. Additional Terms. - - "Additional permissions" are terms that supplement the terms of this -License by making exceptions from one or more of its conditions. -Additional permissions that are applicable to the entire Program shall -be treated as though they were included in this License, to the extent -that they are valid under applicable law. If additional permissions -apply only to part of the Program, that part may be used separately -under those permissions, but the entire Program remains governed by -this License without regard to the additional permissions. - - When you convey a copy of a covered work, you may at your option -remove any additional permissions from that copy, or from any part of -it. (Additional permissions may be written to require their own -removal in certain cases when you modify the work.) You may place -additional permissions on material, added by you to a covered work, -for which you have or can give appropriate copyright permission. - - Notwithstanding any other provision of this License, for material you -add to a covered work, you may (if authorized by the copyright holders of -that material) supplement the terms of this License with terms: - - a) Disclaiming warranty or limiting liability differently from the - terms of sections 15 and 16 of this License; or - - b) Requiring preservation of specified reasonable legal notices or - author attributions in that material or in the Appropriate Legal - Notices displayed by works containing it; or - - c) Prohibiting misrepresentation of the origin of that material, or - requiring that modified versions of such material be marked in - reasonable ways as different from the original version; or - - d) Limiting the use for publicity purposes of names of licensors or - authors of the material; or - - e) Declining to grant rights under trademark law for use of some - trade names, trademarks, or service marks; or - - f) Requiring indemnification of licensors and authors of that - material by anyone who conveys the material (or modified versions of - it) with contractual assumptions of liability to the recipient, for - any liability that these contractual assumptions directly impose on - those licensors and authors. - - All other non-permissive additional terms are considered "further -restrictions" within the meaning of section 10. If the Program as you -received it, or any part of it, contains a notice stating that it is -governed by this License along with a term that is a further -restriction, you may remove that term. If a license document contains -a further restriction but permits relicensing or conveying under this -License, you may add to a covered work material governed by the terms -of that license document, provided that the further restriction does -not survive such relicensing or conveying. - - If you add terms to a covered work in accord with this section, you -must place, in the relevant source files, a statement of the -additional terms that apply to those files, or a notice indicating -where to find the applicable terms. - - Additional terms, permissive or non-permissive, may be stated in the -form of a separately written license, or stated as exceptions; -the above requirements apply either way. - - 8. Termination. - - You may not propagate or modify a covered work except as expressly -provided under this License. Any attempt otherwise to propagate or -modify it is void, and will automatically terminate your rights under -this License (including any patent licenses granted under the third -paragraph of section 11). - - However, if you cease all violation of this License, then your -license from a particular copyright holder is reinstated (a) -provisionally, unless and until the copyright holder explicitly and -finally terminates your license, and (b) permanently, if the copyright -holder fails to notify you of the violation by some reasonable means -prior to 60 days after the cessation. - - Moreover, your license from a particular copyright holder is -reinstated permanently if the copyright holder notifies you of the -violation by some reasonable means, this is the first time you have -received notice of violation of this License (for any work) from that -copyright holder, and you cure the violation prior to 30 days after -your receipt of the notice. - - Termination of your rights under this section does not terminate the -licenses of parties who have received copies or rights from you under -this License. If your rights have been terminated and not permanently -reinstated, you do not qualify to receive new licenses for the same -material under section 10. - - 9. Acceptance Not Required for Having Copies. - - You are not required to accept this License in order to receive or -run a copy of the Program. Ancillary propagation of a covered work -occurring solely as a consequence of using peer-to-peer transmission -to receive a copy likewise does not require acceptance. However, -nothing other than this License grants you permission to propagate or -modify any covered work. These actions infringe copyright if you do -not accept this License. Therefore, by modifying or propagating a -covered work, you indicate your acceptance of this License to do so. - - 10. Automatic Licensing of Downstream Recipients. - - Each time you convey a covered work, the recipient automatically -receives a license from the original licensors, to run, modify and -propagate that work, subject to this License. You are not responsible -for enforcing compliance by third parties with this License. - - An "entity transaction" is a transaction transferring control of an -organization, or substantially all assets of one, or subdividing an -organization, or merging organizations. If propagation of a covered -work results from an entity transaction, each party to that -transaction who receives a copy of the work also receives whatever -licenses to the work the party's predecessor in interest had or could -give under the previous paragraph, plus a right to possession of the -Corresponding Source of the work from the predecessor in interest, if -the predecessor has it or can get it with reasonable efforts. - - You may not impose any further restrictions on the exercise of the -rights granted or affirmed under this License. For example, you may -not impose a license fee, royalty, or other charge for exercise of -rights granted under this License, and you may not initiate litigation -(including a cross-claim or counterclaim in a lawsuit) alleging that -any patent claim is infringed by making, using, selling, offering for -sale, or importing the Program or any portion of it. - - 11. Patents. - - A "contributor" is a copyright holder who authorizes use under this -License of the Program or a work on which the Program is based. The -work thus licensed is called the contributor's "contributor version". - - A contributor's "essential patent claims" are all patent claims -owned or controlled by the contributor, whether already acquired or -hereafter acquired, that would be infringed by some manner, permitted -by this License, of making, using, or selling its contributor version, -but do not include claims that would be infringed only as a -consequence of further modification of the contributor version. For -purposes of this definition, "control" includes the right to grant -patent sublicenses in a manner consistent with the requirements of -this License. - - Each contributor grants you a non-exclusive, worldwide, royalty-free -patent license under the contributor's essential patent claims, to -make, use, sell, offer for sale, import and otherwise run, modify and -propagate the contents of its contributor version. - - In the following three paragraphs, a "patent license" is any express -agreement or commitment, however denominated, not to enforce a patent -(such as an express permission to practice a patent or covenant not to -sue for patent infringement). To "grant" such a patent license to a -party means to make such an agreement or commitment not to enforce a -patent against the party. - - If you convey a covered work, knowingly relying on a patent license, -and the Corresponding Source of the work is not available for anyone -to copy, free of charge and under the terms of this License, through a -publicly available network server or other readily accessible means, -then you must either (1) cause the Corresponding Source to be so -available, or (2) arrange to deprive yourself of the benefit of the -patent license for this particular work, or (3) arrange, in a manner -consistent with the requirements of this License, to extend the patent -license to downstream recipients. "Knowingly relying" means you have -actual knowledge that, but for the patent license, your conveying the -covered work in a country, or your recipient's use of the covered work -in a country, would infringe one or more identifiable patents in that -country that you have reason to believe are valid. - - If, pursuant to or in connection with a single transaction or -arrangement, you convey, or propagate by procuring conveyance of, a -covered work, and grant a patent license to some of the parties -receiving the covered work authorizing them to use, propagate, modify -or convey a specific copy of the covered work, then the patent license -you grant is automatically extended to all recipients of the covered -work and works based on it. - - A patent license is "discriminatory" if it does not include within -the scope of its coverage, prohibits the exercise of, or is -conditioned on the non-exercise of one or more of the rights that are -specifically granted under this License. You may not convey a covered -work if you are a party to an arrangement with a third party that is -in the business of distributing software, under which you make payment -to the third party based on the extent of your activity of conveying -the work, and under which the third party grants, to any of the -parties who would receive the covered work from you, a discriminatory -patent license (a) in connection with copies of the covered work -conveyed by you (or copies made from those copies), or (b) primarily -for and in connection with specific products or compilations that -contain the covered work, unless you entered into that arrangement, -or that patent license was granted, prior to 28 March 2007. - - Nothing in this License shall be construed as excluding or limiting -any implied license or other defenses to infringement that may -otherwise be available to you under applicable patent law. - - 12. No Surrender of Others' Freedom. - - If conditions are imposed on you (whether by court order, agreement or -otherwise) that contradict the conditions of this License, they do not -excuse you from the conditions of this License. If you cannot convey a -covered work so as to satisfy simultaneously your obligations under this -License and any other pertinent obligations, then as a consequence you may -not convey it at all. For example, if you agree to terms that obligate you -to collect a royalty for further conveying from those to whom you convey -the Program, the only way you could satisfy both those terms and this -License would be to refrain entirely from conveying the Program. - - 13. Use with the GNU Affero General Public License. - - Notwithstanding any other provision of this License, you have -permission to link or combine any covered work with a work licensed -under version 3 of the GNU Affero General Public License into a single -combined work, and to convey the resulting work. The terms of this -License will continue to apply to the part which is the covered work, -but the special requirements of the GNU Affero General Public License, -section 13, concerning interaction through a network will apply to the -combination as such. - - 14. Revised Versions of this License. - - The Free Software Foundation may publish revised and/or new versions of -the GNU General Public License from time to time. Such new versions will -be similar in spirit to the present version, but may differ in detail to -address new problems or concerns. - - Each version is given a distinguishing version number. If the -Program specifies that a certain numbered version of the GNU General -Public License "or any later version" applies to it, you have the -option of following the terms and conditions either of that numbered -version or of any later version published by the Free Software -Foundation. If the Program does not specify a version number of the -GNU General Public License, you may choose any version ever published -by the Free Software Foundation. - - If the Program specifies that a proxy can decide which future -versions of the GNU General Public License can be used, that proxy's -public statement of acceptance of a version permanently authorizes you -to choose that version for the Program. - - Later license versions may give you additional or different -permissions. However, no additional obligations are imposed on any -author or copyright holder as a result of your choosing to follow a -later version. - - 15. Disclaimer of Warranty. - - THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY -APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT -HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY -OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, -THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR -PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM -IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF -ALL NECESSARY SERVICING, REPAIR OR CORRECTION. - - 16. Limitation of Liability. - - IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING -WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS -THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY -GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE -USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF -DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD -PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), -EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF -SUCH DAMAGES. - - 17. Interpretation of Sections 15 and 16. - - If the disclaimer of warranty and limitation of liability provided -above cannot be given local legal effect according to their terms, -reviewing courts shall apply local law that most closely approximates -an absolute waiver of all civil liability in connection with the -Program, unless a warranty or assumption of liability accompanies a -copy of the Program in return for a fee. - - END OF TERMS AND CONDITIONS - - How to Apply These Terms to Your New Programs - - If you develop a new program, and you want it to be of the greatest -possible use to the public, the best way to achieve this is to make it -free software which everyone can redistribute and change under these terms. - - To do so, attach the following notices to the program. It is safest -to attach them to the start of each source file to most effectively -state the exclusion of warranty; and each file should have at least -the "copyright" line and a pointer to where the full notice is found. - - - Copyright (C) - - This program is free software: you can redistribute it and/or modify - it under the terms of the GNU General Public License as published by - the Free Software Foundation, either version 3 of the License, or - (at your option) any later version. - - This program is distributed in the hope that it will be useful, - but WITHOUT ANY WARRANTY; without even the implied warranty of - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - GNU General Public License for more details. - - You should have received a copy of the GNU General Public License - along with this program. If not, see . - -Also add information on how to contact you by electronic and paper mail. - - If the program does terminal interaction, make it output a short -notice like this when it starts in an interactive mode: - - Copyright (C) - This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'. - This is free software, and you are welcome to redistribute it - under certain conditions; type `show c' for details. - -The hypothetical commands `show w' and `show c' should show the appropriate -parts of the General Public License. Of course, your program's commands -might be different; for a GUI interface, you would use an "about box". - - You should also get your employer (if you work as a programmer) or school, -if any, to sign a "copyright disclaimer" for the program, if necessary. -For more information on this, and how to apply and follow the GNU GPL, see -. - - The GNU General Public License does not permit incorporating your program -into proprietary programs. If your program is a subroutine library, you -may consider it more useful to permit linking proprietary applications with -the library. If this is what you want to do, use the GNU Lesser General -Public License instead of this License. But first, please read -. diff --git a/README.md b/README.md deleted file mode 100644 index 65a00ce..0000000 --- a/README.md +++ /dev/null @@ -1,19 +0,0 @@ -# p2p-content-collaboration - -This is a peer to peer FLO Blockchain based content collaboration software that runs on a single HTML file. - -## How to run this software - -1. Download and run the HTML file on any browser (Google Chrome is preferred) -2. It will ask for a FLO private key. If you do not have one please generate it from flo-webwallet.duckdns.org -3. Once you provide your private keys you are logged in forever -4. To add your suggestions please write inside the boxes under respective sections -5. You can also chose to edit any content by adding/deleting contents -6. To submit your views just click outside the box anywhere. Your views will be recorded -7. The respective admins can score the content to choose the best ones -8. To score the content please click on the star icon and provide a score. Score will be recorded. - -Any user running the file gets to edit a shared content. Hence, this application can be used for multiple purposes -like create shared content, write book by multiple authors or reach a consensus through collaborative discussion. - -Please fork the project and contribute. diff --git a/blockchainCloud_client.html b/blockchainCloud_client.html deleted file mode 100644 index 5a4d7a6..0000000 --- a/blockchainCloud_client.html +++ /dev/null @@ -1,9479 +0,0 @@ - - - - Content Collaboration - - - - - - - - - - - -
-
- - -
-
- - -
- - -
- - - - - - - -

- -
- -
-
-
- - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/components.js b/components.js index ed0f281..369eb45 100644 --- a/components.js +++ b/components.js @@ -1,4 +1,4 @@ -//Button +/*jshint esversion: 6 */ const smButton = document.createElement('template') smButton.innerHTML = ` -`; +`; customElements.define('sm-button', class extends HTMLElement { constructor() { - super() + super(); this.attachShadow({ mode: 'open' - }).append(smButton.content.cloneNode(true)) + }).append(smButton.content.cloneNode(true)); + } + static get observedAttributes() { + return ['disabled']; } get disabled() { - return this.isDisabled + return this.hasAttribute('disabled'); } set disabled(value) { - if (value && !this.isDisabled) { - this.isDisabled = true - this.setAttribute('disabled', '') - this.button.removeAttribute('tabindex') - } else if (!value && this.isDisabled) { - this.isDisabled = false - this.removeAttribute('disabled') + if (value) { + this.setAttribute('disabled', ''); + } else { + this.removeAttribute('disabled'); } } - dispatch() { - if (this.isDisabled) { - this.dispatchEvent(new CustomEvent('disabled', { - bubbles: true, - composed: true - })) - } else { - this.dispatchEvent(new CustomEvent('clicked', { - bubbles: true, - composed: true - })) + handleKeyDown(e) { + if (!this.hasAttribute('disabled') && (e.key === 'Enter' || e.code === 'Space')) { + e.preventDefault(); + this.click(); } } connectedCallback() { - this.isDisabled = false - this.button = this.shadowRoot.querySelector('.button') - if (this.hasAttribute('disabled') && !this.isDisabled) - this.isDisabled = true - this.addEventListener('click', (e) => { - this.dispatch() - }) + if (!this.hasAttribute('disabled')) { + this.setAttribute('tabindex', '0'); + } + this.setAttribute('role', 'button'); + this.addEventListener('keydown', this.handleKeyDown); + } + attributeChangedCallback(name) { + if (name === 'disabled') { + if (this.hasAttribute('disabled')) { + this.removeAttribute('tabindex'); + } else { + this.setAttribute('tabindex', '0'); + } + this.setAttribute('aria-disabled', this.hasAttribute('disabled')); + } } }) +const smForm = document.createElement('template'); +smForm.innerHTML = ` + +
+ +
+`; + +customElements.define('sm-form', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smForm.content.cloneNode(true)) + + this.form = this.shadowRoot.querySelector('form'); + this.formElements + this.requiredElements + this.submitButton + this.resetButton + this.allRequiredValid = false; + + this.debounce = this.debounce.bind(this) + this._checkValidity = this._checkValidity.bind(this) + this.handleKeydown = this.handleKeydown.bind(this) + this.reset = this.reset.bind(this) + this.elementsChanged = this.elementsChanged.bind(this) + } + debounce(callback, wait) { + let timeoutId = null; + return (...args) => { + window.clearTimeout(timeoutId); + timeoutId = window.setTimeout(() => { + callback.apply(null, args); + }, wait); + }; + } + _checkValidity() { + this.allRequiredValid = this.requiredElements.every(elem => elem.isValid) + if (!this.submitButton) return; + if (this.allRequiredValid) { + this.submitButton.disabled = false; + } + else { + this.submitButton.disabled = true; + } + } + handleKeydown(e) { + if (e.key === 'Enter' && e.target.tagName !== 'SM-TEXTAREA') { + if (this.allRequiredValid) { + if (this.submitButton && this.submitButton.tagName === 'SM-BUTTON') { + this.submitButton.click() + } + this.dispatchEvent(new CustomEvent('submit', { + bubbles: true, + composed: true, + })) + } + else { + this.requiredElements.find(elem => !elem.isValid).vibrate() + } + } + } + reset() { + this.formElements.forEach(elem => elem.reset()) + } + elementsChanged() { + this.formElements = [...this.querySelectorAll('sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio')] + this.requiredElements = this.formElements.filter(elem => elem.hasAttribute('required')); + this.submitButton = this.querySelector('[variant="primary"], [type="submit"]'); + this.resetButton = this.querySelector('[type="reset"]'); + if (this.resetButton) { + this.resetButton.addEventListener('click', this.reset); + } + this._checkValidity() + } + connectedCallback() { + const slot = this.shadowRoot.querySelector('slot') + slot.addEventListener('slotchange', this.elementsChanged) + this.addEventListener('input', this.debounce(this._checkValidity, 100)); + this.addEventListener('keydown', this.debounce(this.handleKeydown, 100)); + } + disconnectedCallback() { + this.removeEventListener('input', this.debounce(this._checkValidity, 100)); + this.removeEventListener('keydown', this.debounce(this.handleKeydown, 100)); + } +}) -//Input const smInput = document.createElement('template') smInput.innerHTML = ` - -`; -customElements.define('sm-textarea', - class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smTextarea.content.cloneNode(true)) - this.textarea = this.shadowRoot.querySelector('textarea') + focusIn() { + this.input.focus(); } - get value() { - return this.textarea.value - } - set value(val) { - this.textarea.value = val; - this.textareaBox.dataset.value = val - this.checkInput() - this.fireEvent() - } - focusIn = () => { - this.textarea.focus() + + focusOut() { + this.input.blur(); } + fireEvent() { let event = new Event('input', { bubbles: true, @@ -686,45 +613,121 @@ customElements.define('sm-textarea', }); this.dispatchEvent(event); } - checkInput = () => { - if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '') - return; - if (this.textarea.value !== '') { - this.placeholder.classList.add('hide') + + checkInput(e) { + if (!this.hasAttribute('readonly')) { + if (this.input.value.trim() !== '') { + this.clearBtn.classList.remove('hide'); + } else { + this.clearBtn.classList.add('hide'); + if (this.isRequired && !this.hideRequired) { + this.feedbackText.textContent = '*required'; + } + } + } + if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder').trim() === '') return; + if (this.input.value !== '') { + if (this.animate) + this.inputParent.classList.add('animate-label'); + else + this.label.classList.add('hide'); } else { - this.placeholder.classList.remove('hide') + if (this.animate) + this.inputParent.classList.remove('animate-label'); + else + this.label.classList.remove('hide'); } } + vibrate() { + this.outerContainer.animate([ + { transform: 'translateX(-1rem)' }, + { transform: 'translateX(1rem)' }, + { transform: 'translateX(-0.5rem)' }, + { transform: 'translateX(0.5rem)' }, + { transform: 'translateX(0)' }, + ], { + duration: 300, + easing: 'ease' + }); + } + + connectedCallback() { - this.textareaBox = this.shadowRoot.querySelector('.textarea') - this.placeholder = this.shadowRoot.querySelector('.placeholder') + this.animate = this.hasAttribute('animate'); + this.setAttribute('role', 'textbox'); + this.input.addEventListener('input', this.checkInput); + this.clearBtn.addEventListener('click', this.reset); + } - if(this.hasAttribute('placeholder')) - this.placeholder.textContent = this.getAttribute('placeholder') - - if (this.hasAttribute('value')) { - this.textarea.value = this.getAttribute('value') - this.checkInput() + attributeChangedCallback(name, oldValue, newValue) { + if (oldValue !== newValue) { + if (this.reflectedAttributes.includes(name)) { + if (this.hasAttribute(name)) { + this.input.setAttribute(name, this.getAttribute(name) ? this.getAttribute(name) : ''); + } + else { + this.input.removeAttribute(name); + } + } + if (name === 'placeholder') { + this.label.textContent = newValue; + this.setAttribute('aria-label', newValue); + } + else if (this.hasAttribute('value')) { + this.checkInput(); + } + else if (name === 'type') { + if (this.hasAttribute('type') && this.getAttribute('type') === 'number') { + this.input.setAttribute('inputmode', 'numeric'); + } + } + else if (name === 'helper-text') { + this._helperText = this.getAttribute('helper-text'); + } + else if (name === 'error-text') { + this._errorText = this.getAttribute('error-text'); + } + else if (name === 'required') { + this.isRequired = this.hasAttribute('required'); + if (this.isRequired && !this.hideRequired) { + this.feedbackText.textContent = ''; + } else { + this.feedbackText.textContent = '*required'; + } + if (this.isRequired) { + this.setAttribute('aria-required', 'true'); + } + else { + this.setAttribute('aria-required', 'false'); + } + } + else if (name === 'hiderequired') { + this.hideRequired = this.hasAttribute('hiderequired') + } + else if (name === 'readonly') { + if (this.hasAttribute('readonly')) { + this.inputParent.classList.add('readonly'); + } else { + this.inputParent.classList.remove('readonly'); + } + } + else if (name === 'disabled') { + if (this.hasAttribute('disabled')) { + this.inputParent.classList.add('disabled'); + } + else { + this.inputParent.classList.remove('disabled'); + } + } } - if (this.hasAttribute('required')) { - this.textarea.setAttribute('required', '') - } - if (this.hasAttribute('readonly')) { - this.textarea.setAttribute('readonly', '') - } - if (this.hasAttribute('rows')) { - this.textarea.setAttribute('rows', this.getAttribute('rows')) - } - this.textarea.addEventListener('input', e => { - this.textareaBox.dataset.value = this.textarea.value - this.checkInput() - }) + } + disconnectedCallback() { + this.input.removeEventListener('input', this.checkInput); + this.clearBtn.removeEventListener('click', this.reset); } }) - -// tab -const smTab = document.createElement('template') -smTab.innerHTML = ` +const smNotifications = document.createElement('template') +smNotifications.innerHTML = ` -
- -
-`; - -customElements.define('sm-tab', class extends HTMLElement { - constructor() { - super() - this.shadow = this.attachShadow({ - mode: 'open' - }).append(smTab.content.cloneNode(true)) - } -}) - -//chcekbox - -const smCheckbox = document.createElement('template') -smCheckbox.innerHTML = ` - -` -customElements.define('sm-checkbox', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smCheckbox.content.cloneNode(true)) - - this.checkbox = this.shadowRoot.querySelector('.checkbox'); - this.input = this.shadowRoot.querySelector('input') - - this.isChecked = false - this.isDisabled = false - } - - static get observedAttributes() { - return ['disabled', 'checked'] - } - - get disabled() { - return this.isDisabled - } - - set disabled(val) { - if (val) { - this.setAttribute('disabled', '') - } else { - this.removeAttribute('disabled') - } - } - - get checked() { - return this.isChecked - } - - set checked(value) { - if (value) { - this.setAttribute('checked', '') - } - else { - this.removeAttribute('checked') - } - } - - set value(val) { - this.val = val - this.setAttribute('value', value) - } - - get value() { - return getAttribute('value') - } - - dispatch = () => { - this.dispatchEvent(new CustomEvent('change', { - bubbles: true, - composed: true - })) - } - handleKeyup = e => { - if ((e.code === "Enter" || e.code === "Space") && this.isDisabled == false) { - if (this.hasAttribute('checked')) { - this.input.checked = false - this.removeAttribute('checked') - } - else { - this.input.checked = true - this.setAttribute('checked', '') - } - } - } - handleChange = e => { - if (this.input.checked) { - this.setAttribute('checked', '') - } - else { - this.removeAttribute('checked') - } - } - - connectedCallback() { - this.val = '' - this.addEventListener('keyup', this.handleKeyup) - this.input.addEventListener('change', this.handleChange) - } - attributeChangedCallback(name, oldValue, newValue) { - if (oldValue !== newValue) { - if (name === 'disabled') { - if (newValue === 'true') { - this.isDisabled = true - } else { - this.isDisabled = false - } - } - else if (name === 'checked') { - if (this.hasAttribute('checked')) { - this.isChecked = true - this.input.checked = true - } - else { - this.input.checked = false - this.isChecked = false - } - this.dispatch() - } - } - } - disconnectedCallback() { - this.removeEventListener('keyup', this.handleKeyup) - this.removeEventListener('change', this.handleChange) - } -}) - -//switch - -const smSwitch = document.createElement('template') -smSwitch.innerHTML = ` - -` - -customElements.define('sm-switch', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smSwitch.content.cloneNode(true)) - this.switch = this.shadowRoot.querySelector('.switch'); - this.input = this.shadowRoot.querySelector('input') - this.isChecked = false - this.isDisabled = false + h4{ + font-weight: 400; } - - static get observedAttributes() { - return ['disabled', 'checked'] + p{ + line-height: 1.6; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + color: rgba(var(--text-color), 0.9); + overflow-wrap: break-word; + overflow-wrap: break-word; + word-wrap: break-word; + -ms-word-break: break-all; + word-break: break-all; + word-break: break-word; + -ms-hyphens: auto; + -webkit-hyphens: auto; + hyphens: auto; + max-width: 100%; } - - get disabled() { - return this.isDisabled + .notification:last-of-type{ + margin-bottom: 0; } - - set disabled(val) { - if (val) { - this.setAttribute('disabled', '') - } else { - this.removeAttribute('disabled') - } + .icon { + height: 100%; + width: 100%; + fill: rgba(var(--text-color), 0.7); } - - get checked() { - return this.isChecked - } - - set checked(value) { - if (value) { - this.setAttribute('checked', '') - } else { - this.removeAttribute('checked') - } - } - - dispatch = () => { - this.dispatchEvent(new CustomEvent('change', { - bubbles: true, - composed: true - })) - } - - connectedCallback() { - this.addEventListener('keyup', e => { - if ((e.code === "Enter" || e.code === "Space") && !this.isDisabled) { - this.input.click() - } - }) - this.input.addEventListener('click', e => { - if (this.input.checked) - this.checked = true - else - this.checked = false - this.dispatch() - }) - } - attributeChangedCallback(name, oldValue, newValue) { - if (oldValue !== newValue) { - if (name === 'disabled') { - if (this.hasAttribute('disabled')) { - this.disabled = true - } - else { - this.disabled = false - } - } - else if (name === 'checked') { - if (this.hasAttribute('checked')) { - this.isChecked = true - this.input.checked = true - } - else { - this.isChecked = false - this.input.checked = false - } - } - } - } - -}) - -// select -const smSelect = document.createElement('template') -smSelect.innerHTML = ` - -
-
-
- - - -
-
- -
-
`; -customElements.define('sm-select', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smSelect.content.cloneNode(true)) - } - static get observedAttributes() { - return ['value'] - } - get value() { - return this.getAttribute('value') - } - set value(val) { - this.setAttribute('value', val) - } - - collapse() { - this.optionList.animate(this.slideUp, this.animationOptions) - this.optionList.classList.add('hide') - this.chevron.classList.remove('rotate') - this.open = false - } - connectedCallback() { - this.availableOptions - this.optionList = this.shadowRoot.querySelector('.options') - this.chevron = this.shadowRoot.querySelector('.toggle') - let slot = this.shadowRoot.querySelector('.options slot'), - selection = this.shadowRoot.querySelector('.selection'), - previousOption - this.open = false; - this.slideDown = [{ - transform: `translateY(-0.5rem)` - }, - { - transform: `translateY(0)` - } - ], - this.slideUp = [{ - transform: `translateY(0)` - }, - { - transform: `translateY(-0.5rem)` - } - ], - this.animationOptions = { - duration: 300, - fill: "forwards", - easing: 'ease' - } - selection.addEventListener('click', e => { - if (!this.open) { - this.optionList.classList.remove('hide') - this.optionList.animate(this.slideDown, this.animationOptions) - this.chevron.classList.add('rotate') - this.open = true - } else { - this.collapse() - } - }) - selection.addEventListener('keydown', e => { - if (e.code === 'ArrowDown' || e.code === 'ArrowRight') { - e.preventDefault() - this.availableOptions[0].focus() - } - if (e.code === 'Enter' || e.code === 'Space') - if (!this.open) { - this.optionList.classList.remove('hide') - this.optionList.animate(this.slideDown, this.animationOptions) - this.chevron.classList.add('rotate') - this.open = true - } else { - this.collapse() - } - }) - this.optionList.addEventListener('keydown', e => { - if (e.code === 'ArrowUp' || e.code === 'ArrowRight') { - e.preventDefault() - if (document.activeElement.previousElementSibling) { - document.activeElement.previousElementSibling.focus() - } - } - if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') { - e.preventDefault() - if (document.activeElement.nextElementSibling) - document.activeElement.nextElementSibling.focus() - } - }) - this.addEventListener('optionSelected', e => { - if (previousOption !== e.target) { - this.setAttribute('value', e.detail.value) - this.shadowRoot.querySelector('.option-text').textContent = e.detail.text; - this.dispatchEvent(new CustomEvent('change', { - bubbles: true, - composed: true, - detail: { - value: e.detail.value - } - })) - if (previousOption) { - previousOption.classList.remove('check-selected') - } - previousOption = e.target; - } - if (!e.detail.switching) - this.collapse() - - e.target.classList.add('check-selected') - }) - slot.addEventListener('slotchange', e => { - this.availableOptions = slot.assignedElements() - if (this.availableOptions[0]) { - let firstElement = this.availableOptions[0]; - previousOption = firstElement; - firstElement.classList.add('check-selected') - this.setAttribute('value', firstElement.getAttribute('value')) - this.shadowRoot.querySelector('.option-text').textContent = firstElement.textContent - this.availableOptions.forEach((element, index) => { - element.setAttribute('data-rank', index + 1); - element.setAttribute('tabindex', "0"); - }) - } - }); - document.addEventListener('mousedown', e => { - if (!this.contains(e.target) && this.open) { - this.collapse() - } - }) - } -}) - -// option -const smOption = document.createElement('template') -smOption.innerHTML = ` - -
- - - - -
`; -customElements.define('sm-option', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smOption.content.cloneNode(true)) - } - - sendDetails(switching) { - let optionSelected = new CustomEvent('optionSelected', { - bubbles: true, - composed: true, - detail: { - text: this.textContent, - value: this.getAttribute('value'), - switching: switching - } - }) - this.dispatchEvent(optionSelected) - } - - connectedCallback() { - let validKey = [ - 'ArrowUp', - 'ArrowDown', - 'ArrowLeft', - 'ArrowRight' - ] - this.addEventListener('click', e => { - this.sendDetails() - }) - this.addEventListener('keyup', e => { - if (e.code === 'Enter' || e.code === 'Space') { - e.preventDefault() - this.sendDetails(false) - } - if (validKey.includes(e.code)) { - e.preventDefault() - this.sendDetails(true) - } - }) - if (this.hasAttribute('default')) { - setTimeout(() => { - this.sendDetails() - }, 0); - } - } -}) - -// select -const smStripSelect = document.createElement('template') -smStripSelect.innerHTML = ` - -
-
- - Previous - - -
- -
- - Next - - -
-
`; -customElements.define('sm-strip-select', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smStripSelect.content.cloneNode(true)) - } - static get observedAttributes() { - return ['value'] - } - get value() { - return this.getAttribute('value') - } - set value(val) { - this.setAttribute('value', val) - } - scrollLeft = () => { - this.select.scrollBy({ - top: 0, - left: -this.scrollDistance, - behavior: 'smooth' - }) - } - - scrollRight = () => { - this.select.scrollBy({ - top: 0, - left: this.scrollDistance, - behavior: 'smooth' - }) - } - connectedCallback() { - let previousOption, - slot = this.shadowRoot.querySelector('slot'); - this.selectContainer = this.shadowRoot.querySelector('.select-container') - this.select = this.shadowRoot.querySelector('.select') - this.nextArrow = this.shadowRoot.querySelector('.next-item') - this.previousArrow = this.shadowRoot.querySelector('.previous-item') - this.nextGradient = this.shadowRoot.querySelector('.right') - this.previousGradient = this.shadowRoot.querySelector('.left') - this.selectOptions - this.scrollDistance = this.selectContainer.getBoundingClientRect().width - const firstElementObserver = new IntersectionObserver(entries => { - if (entries[0].isIntersecting) { - this.previousArrow.classList.add('hide') - this.previousGradient.classList.add('hide') - } else { - this.previousArrow.classList.remove('hide') - this.previousGradient.classList.remove('hide') - } - }, { - root: this.selectContainer, - threshold: 0.95 - }) - const lastElementObserver = new IntersectionObserver(entries => { - if (entries[0].isIntersecting) { - this.nextArrow.classList.add('hide') - this.nextGradient.classList.add('hide') - } else { - this.nextArrow.classList.remove('hide') - this.nextGradient.classList.remove('hide') - } - }, { - root: this.selectContainer, - threshold: 0.95 - }) - - const selectObserver = new IntersectionObserver(entries => { - if (entries[0].isIntersecting) { - this.scrollDistance = this.selectContainer.getBoundingClientRect().width - } - }) - - selectObserver.observe(this.selectContainer) - this.addEventListener('optionSelected', e => { - if (previousOption === e.target) return; - if (previousOption) - previousOption.classList.remove('active') - e.target.classList.add('active') - e.target.scrollIntoView({ - behavior: 'smooth', - inline: 'center', - block: 'nearest' - }) - this.setAttribute('value', e.detail.value) - this.dispatchEvent(new CustomEvent('change', { - bubbles: true, - composed: true - })) - previousOption = e.target; - }) - slot.addEventListener('slotchange', e => { - this.selectOptions = slot.assignedElements() - firstElementObserver.observe(this.selectOptions[0]) - lastElementObserver.observe(this.selectOptions[this.selectOptions.length - 1]) - if (this.selectOptions[0]) { - let firstElement = this.selectOptions[0]; - this.setAttribute('value', firstElement.getAttribute('value')) - firstElement.classList.add('active') - previousOption = firstElement; - } - }); - this.nextArrow.addEventListener('click', this.scrollRight) - this.previousArrow.addEventListener('click', this.scrollLeft) - } - - disconnectedCallback() { - this.nextArrow.removeEventListener('click', this.scrollRight) - this.previousArrow.removeEventListener('click', this.scrollLeft) - } -}) - -// option -const smStripOption = document.createElement('template') -smStripOption.innerHTML = ` - -
- -
`; -customElements.define('sm-strip-option', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smStripOption.content.cloneNode(true)) - } - sendDetails() { - let optionSelected = new CustomEvent('optionSelected', { - bubbles: true, - composed: true, - detail: { - text: this.textContent, - value: this.getAttribute('value') - } - }) - this.dispatchEvent(optionSelected) - } - - connectedCallback() { - this.addEventListener('click', e => { - this.sendDetails() - }) - this.addEventListener('keyup', e => { - if (e.code === 'Enter' || e.code === 'Space') { - e.preventDefault() - this.sendDetails(false) - } - }) - if (this.hasAttribute('default')) { - setTimeout(() => { - this.sendDetails() - }, 0); + @media screen and (min-width: 640px){ + .notification-panel{ + max-width: 28rem; + width: max-content; + } + .notification{ + width: auto; + border: solid 1px rgba(var(--text-color), 0.2); } } -}) + @media (any-hover: hover){ + ::-webkit-scrollbar{ + width: 0.5rem; + } + + ::-webkit-scrollbar-thumb{ + background: rgba(var(--text-color), 0.3); + border-radius: 1rem; + &:hover{ + background: rgba(var(--text-color), 0.5); + } + } + .close:hover{ + background-color: rgba(var(--text-color), 0.1); + } + } + +
+` -//popup -const smPopup = document.createElement('template') +customElements.define('sm-notifications', class extends HTMLElement { + constructor() { + super(); + this.shadow = this.attachShadow({ + mode: 'open' + }).append(smNotifications.content.cloneNode(true)) + + this.notificationPanel = this.shadowRoot.querySelector('.notification-panel') + this.animationOptions = { + duration: 300, + fill: "forwards", + easing: "cubic-bezier(0.175, 0.885, 0.32, 1.275)" + } + + this.push = this.push.bind(this) + this.createNotification = this.createNotification.bind(this) + this.removeNotification = this.removeNotification.bind(this) + this.clearAll = this.clearAll.bind(this) + + } + + randString(length) { + let result = ''; + const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; + for (let i = 0; i < length; i++) + result += characters.charAt(Math.floor(Math.random() * characters.length)); + return result; + } + + createNotification(message, options = {}) { + const { pinned = false, icon = '' } = options; + const notification = document.createElement('div') + notification.id = this.randString(8) + notification.classList.add('notification'); + let composition = ``; + composition += ` +
${icon}
+

${message}

+ `; + if (pinned) { + notification.classList.add('pinned'); + composition += ` + + `; + } + notification.innerHTML = composition; + return notification; + } + + push(message, options = {}) { + const notification = this.createNotification(message, options); + this.notificationPanel.append(notification); + notification.animate([ + { + transform: `translateY(1rem)`, + opacity: '0' + }, + { + transform: `none`, + opacity: '1' + }, + ], this.animationOptions); + return notification.id; + } + + removeNotification(notification) { + notification.animate([ + { + transform: `none`, + opacity: '1' + }, + { + transform: `translateY(0.5rem)`, + opacity: '0' + } + ], this.animationOptions).onfinish = () => { + notification.remove(); + }; + } + + clearAll() { + Array.from(this.notificationPanel.children).forEach(child => { + this.removeNotification(child); + }); + } + + connectedCallback() { + this.notificationPanel.addEventListener('click', e => { + if (e.target.closest('.close')) { + this.removeNotification(e.target.closest('.notification')); + } + }); + + const observer = new MutationObserver(mutationList => { + mutationList.forEach(mutation => { + if (mutation.type === 'childList') { + if (mutation.addedNodes.length && !mutation.addedNodes[0].classList.contains('pinned')) { + setTimeout(() => { + this.removeNotification(mutation.addedNodes[0]); + }, 5000); + } + } + }); + }); + observer.observe(this.notificationPanel, { + childList: true, + }); + } +}); +const smPopup = document.createElement('template'); smPopup.innerHTML = ` -
- - Previous - - -
- -
- - Next - - -
-
-`; + -customElements.define('sm-carousel', class extends HTMLElement { +`; +class SquareLoader extends HTMLElement { constructor() { - super() + super(); this.attachShadow({ mode: 'open' - }).append(smCarousel.content.cloneNode(true)) + }).append(spinner.content.cloneNode(true)); } +} +window.customElements.define('sm-spinner', SquareLoader); +const themeToggle = document.createElement('template'); +themeToggle.innerHTML = ` + + +`; + +class ThemeToggle extends HTMLElement { + constructor() { + super(); + + this.attachShadow({ + mode: 'open' + }).append(themeToggle.content.cloneNode(true)); + + this.isChecked = false; + this.hasTheme = 'light'; + + this.toggleState = this.toggleState.bind(this); + this.fireEvent = this.fireEvent.bind(this); + this.handleThemeChange = this.handleThemeChange.bind(this); + } static get observedAttributes() { - return ['indicator'] + return ['checked']; } - scrollLeft = () => { - this.carousel.scrollBy({ - top: 0, - left: -this.scrollDistance, - behavior: 'smooth' - }) + daylight() { + this.hasTheme = 'light'; + document.body.dataset.theme = 'light'; + this.setAttribute('aria-checked', 'false'); } - scrollRight = () => { - this.carousel.scrollBy({ - top: 0, - left: this.scrollDistance, - behavior: 'smooth' - }) + nightlight() { + this.hasTheme = 'dark'; + document.body.dataset.theme = 'dark'; + this.setAttribute('aria-checked', 'true'); } - connectedCallback() { - this.carousel = this.shadowRoot.querySelector('.carousel') - this.carouselContainer = this.shadowRoot.querySelector('.carousel-container') - this.carouselSlot = this.shadowRoot.querySelector('slot') - this.nextArrow = this.shadowRoot.querySelector('.next-item') - this.previousArrow = this.shadowRoot.querySelector('.previous-item') - this.indicatorsContainer = this.shadowRoot.querySelector('.indicators') - this.carouselItems - this.indicators - this.showIndicator = false - this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3 - let frag = document.createDocumentFragment(); - if (this.hasAttribute('indicator')) - this.showIndicator = true - - - let firstVisible = false, - lastVisible = false - const allElementsObserver = new IntersectionObserver(entries => { - entries.forEach(entry => { - if (this.showIndicator) - if (entry.isIntersecting) { - this.indicators[parseInt(entry.target.attributes.rank.textContent)].classList.add('active') - } - else - this.indicators[parseInt(entry.target.attributes.rank.textContent)].classList.remove('active') - if (!entry.target.previousElementSibling) - if (entry.isIntersecting) { - this.previousArrow.classList.remove('expand') - firstVisible = true - } - else { - this.previousArrow.classList.add('expand') - firstVisible = false - } - if (!entry.target.nextElementSibling) - if (entry.isIntersecting) { - this.nextArrow.classList.remove('expand') - lastVisible = true - } - else { - this.nextArrow.classList.add('expand') - - lastVisible = false - } - if (firstVisible && lastVisible) - this.indicatorsContainer.classList.add('hide') - else - this.indicatorsContainer.classList.remove('hide') - }) - }, { - root: this.carouselContainer, - threshold: 0.9 - }) - - const carouselObserver = new IntersectionObserver(entries => { - if (entries[0].isIntersecting) { - this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3 + toggleState() { + this.toggleAttribute('checked'); + this.fireEvent(); + } + handleKeyDown(e) { + if (e.code === 'Space') { + this.toggleState(); + } + } + handleThemeChange(e) { + if (e.detail.theme !== this.hasTheme) { + if (e.detail.theme === 'dark') { + this.setAttribute('checked', ''); } - }) - - carouselObserver.observe(this.carouselContainer) - - this.carouselSlot.addEventListener('slotchange', e => { - this.carouselItems = this.carouselSlot.assignedElements() - this.carouselItems.forEach(item => allElementsObserver.observe(item)) - if (this.showIndicator) { - this.indicatorsContainer.innerHTML = `` - this.carouselItems.forEach((item, index) => { - let dot = document.createElement('div') - dot.classList.add('dot') - frag.append(dot) - item.setAttribute('rank', index) - }) - this.indicatorsContainer.append(frag) - this.indicators = this.indicatorsContainer.children + else { + this.removeAttribute('checked'); } - }) - - this.addEventListener('keyup', e => { - if (e.code === 'ArrowLeft') - this.scrollRight() - else - this.scrollRight() - }) - - this.nextArrow.addEventListener('click', this.scrollRight) - this.previousArrow.addEventListener('click', this.scrollLeft) - } - - attributeChangedCallback(name, oldValue, newValue) { - if (name === 'indicator') { - if (this.hasAttribute('indicator')) - this.showIndicator = true - else - this.showIndicator = false } } - disconnectedCallback() { - this.nextArrow.removeEventListener('click', this.scrollRight) - this.previousArrow.removeEventListener('click', this.scrollLeft) + fireEvent() { + this.dispatchEvent( + new CustomEvent('themechange', { + bubbles: true, + composed: true, + detail: { + theme: this.hasTheme + } + }) + ); } -}) -//notifications + connectedCallback() { + this.setAttribute('role', 'switch'); + this.setAttribute('aria-label', 'theme toggle'); + if (localStorage.getItem(`${window.location.hostname}-theme`) === "dark") { + this.nightlight(); + this.setAttribute('checked', ''); + } else if (localStorage.getItem(`${window.location.hostname}-theme`) === "light") { + this.daylight(); + this.removeAttribute('checked'); + } + else { + if (window.matchMedia(`(prefers-color-scheme: dark)`).matches) { + this.nightlight(); + this.setAttribute('checked', ''); + } else { + this.daylight(); + this.removeAttribute('checked'); + } + } + this.addEventListener("click", this.toggleState); + this.addEventListener("keydown", this.handleKeyDown); + document.addEventListener('themechange', this.handleThemeChange); + } -const smNotifications = document.createElement('template') -smNotifications.innerHTML = ` + disconnectedCallback() { + this.removeEventListener("click", this.toggleState); + this.removeEventListener("keydown", this.handleKeyDown); + document.removeEventListener('themechange', this.handleThemeChange); + } + + attributeChangedCallback(name, oldVal, newVal) { + if (name === 'checked') { + if (this.hasAttribute('checked')) { + this.nightlight(); + localStorage.setItem(`${window.location.hostname}-theme`, "dark"); + } else { + this.daylight(); + localStorage.setItem(`${window.location.hostname}-theme`, "light"); + } + } + } +} + +window.customElements.define('theme-toggle', ThemeToggle); + +const smCopy = document.createElement('template'); +smCopy.innerHTML = ` + +
+

+ +
+`; +customElements.define('sm-copy', + class extends HTMLElement { + constructor() { + super(); + this.attachShadow({ + mode: 'open' + }).append(smCopy.content.cloneNode(true)); + + this.copyContent = this.shadowRoot.querySelector('.copy-content'); + this.copyButton = this.shadowRoot.querySelector('.copy-button'); + + this.copy = this.copy.bind(this); + } + static get observedAttributes() { + return ['value']; + } + set value(val) { + this.setAttribute('value', val); + } + get value() { + return this.getAttribute('value'); + } + fireEvent() { + this.dispatchEvent( + new CustomEvent('copy', { + composed: true, + bubbles: true, + cancelable: true, + }) + ); + } + copy() { + navigator.clipboard.writeText(this.copyContent.textContent) + .then(res => this.fireEvent()) + .catch(err => console.error(err)); + } + connectedCallback() { + this.copyButton.addEventListener('click', this.copy); + } + attributeChangedCallback(name, oldValue, newValue) { + if (name === 'value') { + this.copyContent.textContent = newValue; + } + } + disconnectedCallback() { + this.copyButton.removeEventListener('click', this.copy); + } + }); +const stripSelect = document.createElement('template'); +stripSelect.innerHTML = ` -
-` +
+
+ +
+ +
+ +
+
-customElements.define('sm-notifications', class extends HTMLElement { +`; +customElements.define('strip-select', class extends HTMLElement { constructor() { - super() - this.shadow = this.attachShadow({ + super(); + this.attachShadow({ mode: 'open' - }).append(smNotifications.content.cloneNode(true)) + }).append(stripSelect.content.cloneNode(true)); + this.stripSelect = this.shadowRoot.querySelector('.strip-select'); + this.slottedOptions = undefined; + this._value = undefined; + this.scrollDistance = 0; + + this.scrollLeft = this.scrollLeft.bind(this); + this.scrollRight = this.scrollRight.bind(this); + this.fireEvent = this.fireEvent.bind(this); + } + get value() { + return this._value; + } + scrollLeft() { + this.stripSelect.scrollBy({ + left: -this.scrollDistance, + behavior: 'smooth' + }); } - handleTouchStart = (e) => { - this.notification = e.target.closest('.notification') - this.touchStartX = e.changedTouches[0].clientX - this.notification.style.transition = 'initial' - this.touchStartTime = e.timeStamp + scrollRight() { + this.stripSelect.scrollBy({ + left: this.scrollDistance, + behavior: 'smooth' + }); } - - handleTouchMove = (e) => { - e.preventDefault() - if (this.touchStartX < e.changedTouches[0].clientX) { - this.offset = e.changedTouches[0].clientX - this.touchStartX; - this.touchEndAnimataion = requestAnimationFrame(this.movePopup) - } else { - this.offset = -(this.touchStartX - e.changedTouches[0].clientX); - this.touchEndAnimataion = requestAnimationFrame(this.movePopup) - } - } - - handleTouchEnd = (e) => { - this.notification.style.transition = 'transform 0.3s, opacity 0.3s' - this.touchEndTime = e.timeStamp - cancelAnimationFrame(this.touchEndAnimataion) - this.touchEndX = e.changedTouches[0].clientX - if (this.touchEndTime - this.touchStartTime > 200) { - if (this.touchEndX - this.touchStartX > this.threshold) { - this.removeNotification(this.notification) - } else if (this.touchStartX - this.touchEndX > this.threshold) { - this.removeNotification(this.notification, true) - } else { - this.resetPosition() - } - } else { - if (this.touchEndX > this.touchStartX) { - this.removeNotification(this.notification) - } else { - this.removeNotification(this.notification, true) - } - } - } - - movePopup = () => { - this.notification.style.transform = `translateX(${this.offset}px)` - } - - resetPosition = () => { - this.notification.style.transform = `translateX(0)` - } - - push = (messageBody, type, pinned) => { - let notification = document.createElement('div'), - composition = `` - notification.classList.add('notification') - if (pinned) - notification.classList.add('pinned') - if (type === 'error') { - composition += ` - - - - - ` - } else if (type === 'success') { - composition += ` - - - ` - } - composition += ` -

${messageBody}

- - Close - - - ` - notification.innerHTML = composition - this.notificationPanel.prepend(notification) - if (window.innerWidth > 640) { - notification.animate([{ - transform: `translateX(1rem)`, - opacity: '0' - }, - { - transform: 'translateX(0)', - opacity: '1' + fireEvent() { + this.dispatchEvent( + new CustomEvent("change", { + bubbles: true, + composed: true, + detail: { + value: this._value + } + }) + ); + } + connectedCallback() { + this.setAttribute('role', 'listbox'); + + const slot = this.shadowRoot.querySelector('slot'); + const coverLeft = this.shadowRoot.querySelector('.cover--left'); + const coverRight = this.shadowRoot.querySelector('.cover--right'); + const navButtonLeft = this.shadowRoot.querySelector('.nav-button--left'); + const navButtonRight = this.shadowRoot.querySelector('.nav-button--right'); + slot.addEventListener('slotchange', e => { + const assignedElements = slot.assignedElements(); + assignedElements.forEach(elem => { + if (elem.hasAttribute('selected')) { + elem.setAttribute('active', ''); + this._value = elem.value; + } + }); + if (!this.hasAttribute('multiline')) { + if (assignedElements.length > 0) { + firstOptionObserver.observe(slot.assignedElements()[0]); + lastOptionObserver.observe(slot.assignedElements()[slot.assignedElements().length - 1]); + } + else { + navButtonLeft.classList.add('hide'); + navButtonRight.classList.add('hide'); + coverLeft.classList.add('hide'); + coverRight.classList.add('hide'); + firstOptionObserver.disconnect(); + lastOptionObserver.disconnect(); } - ], this.animationOptions).onfinish = () => { - notification.setAttribute('style', `transform: none;`); } + }); + const resObs = new ResizeObserver(entries => { + entries.forEach(entry => { + if (entry.contentBoxSize) { + // Firefox implements `contentBoxSize` as a single content rect, rather than an array + const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize; + + this.scrollDistance = contentBoxSize.inlineSize * 0.6; + } else { + this.scrollDistance = entry.contentRect.width * 0.6; + } + }); + }); + resObs.observe(this); + this.stripSelect.addEventListener('option-clicked', e => { + if (this._value !== e.target.value) { + this._value = e.target.value; + slot.assignedElements().forEach(elem => elem.removeAttribute('active')); + e.target.setAttribute('active', ''); + e.target.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" }); + this.fireEvent(); + } + }); + const firstOptionObserver = new IntersectionObserver(entries => { + entries.forEach(entry => { + if (entry.isIntersecting) { + navButtonLeft.classList.add('hide'); + coverLeft.classList.add('hide'); + } + else { + navButtonLeft.classList.remove('hide'); + coverLeft.classList.remove('hide'); + } + }); + }, + { + threshold: 0.9, + root: this + }); + const lastOptionObserver = new IntersectionObserver(entries => { + entries.forEach(entry => { + if (entry.isIntersecting) { + navButtonRight.classList.add('hide'); + coverRight.classList.add('hide'); + } + else { + navButtonRight.classList.remove('hide'); + coverRight.classList.remove('hide'); + } + }); + }, + { + threshold: 0.9, + root: this + }); + navButtonLeft.addEventListener('click', this.scrollLeft); + navButtonRight.addEventListener('click', this.scrollRight); + } + disconnectedCallback() { + navButtonLeft.removeEventListener('click', this.scrollLeft); + navButtonRight.removeEventListener('click', this.scrollRight); + } +}); + +//Strip option +const stripOption = document.createElement('template'); +stripOption.innerHTML = ` + + +`; +customElements.define('strip-option', class extends HTMLElement { + constructor() { + super(); + this.attachShadow({ + mode: 'open' + }).append(stripOption.content.cloneNode(true)); + this._value = undefined; + this.radioButton = this.shadowRoot.querySelector('input'); + + this.fireEvent = this.fireEvent.bind(this); + this.handleKeyDown = this.handleKeyDown.bind(this); + } + get value() { + return this._value; + } + fireEvent() { + this.dispatchEvent( + new CustomEvent("option-clicked", { + bubbles: true, + composed: true, + detail: { + value: this._value + } + }) + ); + } + handleKeyDown(e) { + if (e.key === 'Enter' || e.key === 'Space') { + this.fireEvent(); + } + } + connectedCallback() { + this.setAttribute('role', 'option'); + this.setAttribute('tabindex', '0'); + this._value = this.getAttribute('value'); + this.addEventListener('click', this.fireEvent); + this.addEventListener('keydown', this.handleKeyDown); + } + disconnectedCallback() { + this.removeEventListener('click', this.fireEvent); + this.removeEventListener('keydown', this.handleKeyDown); + } +}); + +const slideButton = document.createElement('template') +slideButton.innerHTML = ` + +
+
+ + + +
+

Slide to confirm

+
+`; +class SlideButton extends HTMLElement { + constructor() { + super(); + this.attachShadow({ + mode: 'open' + }).append(slideButton.content.cloneNode(true)); + + this.handleTouchStart = this.handleTouchStart.bind(this); + this.handleTouchMove = this.handleTouchMove.bind(this); + this.handleTouchEnd = this.handleTouchEnd.bind(this); + this.reset = this.reset.bind(this); + this.fireEvent = this.fireEvent.bind(this); + this.thumb = this.shadowRoot.querySelector('.slide-thumb'); + + this.startX = 0; + this.threshold = 0; + this.bound = 0; + } + get disabled() { + return this.hasAttribute('disabled'); + } + + set disabled(value) { + if (value) { + this.setAttribute('disabled', ''); } else { - notification.setAttribute('style', `transform: translateY(0); opacity: 1`) - } - notification.addEventListener('touchstart', this.handleTouchStart) - notification.addEventListener('touchmove', this.handleTouchMove) - notification.addEventListener('touchend', this.handleTouchEnd) - } - - removeNotification = (notification, toLeft) => { - if (!this.offset) - this.offset = 0; - - if (toLeft) - notification.animate([{ - transform: `translateX(${this.offset}px)`, - opacity: '1' - }, - { - transform: `translateX(-100%)`, - opacity: '0' - } - ], this.animationOptions).onfinish = () => { - notification.remove() - } - else { - notification.animate([{ - transform: `translateX(${this.offset}px)`, - opacity: '1' - }, - { - transform: `translateX(100%)`, - opacity: '0' - } - ], this.animationOptions).onfinish = () => { - notification.remove() - } + this.removeAttribute('disabled'); } } - clearAll = () => { - Array.from(this.notificationPanel.children).forEach(child => { - this.removeNotification(child) + reset() { + this.thumb.setAttribute('style', `transform: translateX(0)`); + } + + fireEvent() { + this.dispatchEvent(new CustomEvent('confirmed', { + bubbles: true, + composed: true, + })); + } + + handleTouchStart(e) { + this.thumb.classList.remove('transition') + const thumbDimensions = this.thumb.getBoundingClientRect(); + const buttonDimensions = this.getBoundingClientRect(); + this.bound = buttonDimensions.width - thumbDimensions.width; + this.startX = e.clientX; + this.threshold = this.bound / 2; + this.thumb.setPointerCapture(e.pointerId); + this.thumb.addEventListener('pointermove', this.handleTouchMove); + this.thumb.addEventListener('pointerup', this.handleTouchEnd); + } + handleTouchMove(e) { + requestAnimationFrame(() => { + this.thumb.setAttribute('style', `transform: translateX(${Math.max(0, Math.min((this.bound), e.clientX - this.startX))}px)`); }) } + handleTouchEnd(e) { + this.thumb.classList.add('transition'); + if (e.clientX > this.threshold) { + this.fireEvent(); + this.thumb.setAttribute('style', `transform: translateX(${this.bound}px)`); + } else { + this.reset(); + } + this.thumb.releasePointerCapture(e.pointerId); + this.thumb.removeEventListener('pointermove', this.handleTouchMove); + this.thumb.removeEventListener('pointerup', this.handleTouchEnd); + } connectedCallback() { - this.notificationPanel = this.shadowRoot.querySelector('.notification-panel') - this.animationOptions = { - duration: 300, - fill: "forwards", - easing: "ease" - } - this.fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0]) - this.notification - this.offset - this.touchStartX = 0 - this.touchEndX = 0 - this.touchStartTime = 0 - this.touchEndTime = 0 - this.threshold = this.notificationPanel.getBoundingClientRect().width * 0.3 - this.touchEndAnimataion; - - this.notificationPanel.addEventListener('click', e => { - if (e.target.closest('.close'))( - this.removeNotification(e.target.closest('.notification')) - ) - }) - - const observer = new MutationObserver(mutationList => { - mutationList.forEach(mutation => { - if (mutation.type === 'childList') { - if (mutation.addedNodes.length) { - if (!mutation.addedNodes[0].classList.contains('pinned')) - setTimeout(() => { - this.removeNotification(mutation.addedNodes[0]) - }, 5000); - if (window.innerWidth > 640) - this.notificationPanel.style.padding = '1.5rem 0 3rem 1.5rem'; - else - this.notificationPanel.style.padding = '1rem 1rem 2rem 1rem'; - } else if (mutation.removedNodes.length && !this.notificationPanel.children.length) { - this.notificationPanel.style.padding = 0; - } - } - }) - }) - observer.observe(this.notificationPanel, { - attributes: true, - childList: true, - subtree: true - }) + this.thumb.addEventListener('pointerdown', this.handleTouchStart); } -}) + disconnectedCallback() { + this.thumb.removeEventListener('pointerdown', this.handleTouchStart); + } +} +window.customElements.define('slide-button', SlideButton); -// sm-menu -const smMenu = document.createElement('template') -smMenu.innerHTML = ` +const smSelect = document.createElement('template') +smSelect.innerHTML = ` -
-
- - options - - - - +
+
+
+
-
+
`; -customElements.define('sm-menu', class extends HTMLElement { +customElements.define('sm-select', class extends HTMLElement { constructor() { super() this.attachShadow({ mode: 'open' - }).append(smMenu.content.cloneNode(true)) + }).append(smSelect.content.cloneNode(true)) + + this.reset = this.reset.bind(this) + this.open = this.open.bind(this) + this.collapse = this.collapse.bind(this) + this.toggle = this.toggle.bind(this) + this.handleOptionsNavigation = this.handleOptionsNavigation.bind(this) + this.handleOptionSelection = this.handleOptionSelection.bind(this) + this.handleKeydown = this.handleKeydown.bind(this) + this.handleClickOutside = this.handleClickOutside.bind(this) + + this.availableOptions + this.previousOption + this.isOpen = false; + this.slideDown = [{ + transform: `translateY(-0.5rem)`, + opacity: 0 + }, + { + transform: `translateY(0)`, + opacity: 1 + } + ] + this.slideUp = [{ + transform: `translateY(0)`, + opacity: 1 + }, + { + transform: `translateY(-0.5rem)`, + opacity: 0 + } + ] + this.animationOptions = { + duration: 300, + fill: "forwards", + easing: 'ease' + } + + this.optionList = this.shadowRoot.querySelector('.options') + this.chevron = this.shadowRoot.querySelector('.toggle') + this.selection = this.shadowRoot.querySelector('.selection') + this.selectedOptionText = this.shadowRoot.querySelector('.selected-option-text') } static get observedAttributes() { - return ['value'] + return ['value', 'disabled'] } get value() { return this.getAttribute('value') @@ -3052,88 +2394,153 @@ customElements.define('sm-menu', class extends HTMLElement { set value(val) { this.setAttribute('value', val) } - expand = () => { - if (!this.open) { - this.optionList.classList.remove('hide') - this.optionList.classList.add('no-transformations') - this.open = true - this.icon.classList.add('focused') - this.availableOptions.forEach(option => { - option.setAttribute('tabindex', '0') - }) + + reset(fire = true) { + if (this.availableOptions[0] && this.previousOption !== this.availableOptions[0]) { + const firstElement = this.availableOptions[0]; + if (this.previousOption) { + this.previousOption.classList.remove('check-selected') + } + firstElement.classList.add('check-selected') + this.value = firstElement.getAttribute('value') + this.selectedOptionText.textContent = firstElement.textContent + this.previousOption = firstElement; + if (fire) { + this.fireEvent() + } } } + + open() { + this.optionList.classList.remove('hide') + this.optionList.animate(this.slideDown, this.animationOptions) + this.chevron.classList.add('rotate') + this.isOpen = true + } collapse() { - if (this.open) { - this.open = false - this.icon.classList.remove('focused') - this.optionList.classList.add('hide') - this.optionList.classList.remove('no-transformations') - this.availableOptions.forEach(option => { - option.removeAttribute('tabindex') - }) + this.chevron.classList.remove('rotate') + this.optionList.animate(this.slideUp, this.animationOptions) + .onfinish = () => { + this.optionList.classList.add('hide') + this.isOpen = false + } + } + toggle() { + if (!this.isOpen && !this.hasAttribute('disabled')) { + this.open() + } else { + this.collapse() + } + } + + fireEvent() { + this.dispatchEvent(new CustomEvent('change', { + bubbles: true, + composed: true, + detail: { + value: this.value + } + })) + } + + handleOptionsNavigation(e) { + if (e.code === 'ArrowUp') { + e.preventDefault() + if (document.activeElement.previousElementSibling) { + document.activeElement.previousElementSibling.focus() + } else { + this.availableOptions[this.availableOptions.length - 1].focus() + } + } + else if (e.code === 'ArrowDown') { + e.preventDefault() + if (document.activeElement.nextElementSibling) { + document.activeElement.nextElementSibling.focus() + } else { + this.availableOptions[0].focus() + } + } + } + handleOptionSelection(e) { + if (this.previousOption !== document.activeElement) { + this.value = document.activeElement.getAttribute('value') + this.selectedOptionText.textContent = document.activeElement.textContent; + this.fireEvent() + if (this.previousOption) { + this.previousOption.classList.remove('check-selected') + } + document.activeElement.classList.add('check-selected') + this.previousOption = document.activeElement + } + } + handleClick(e) { + if (e.target === this) { + this.toggle() + } + else { + this.handleOptionSelection() + this.collapse() + } + } + handleKeydown(e) { + if (e.target === this) { + if (this.isOpen && e.code === 'ArrowDown') { + e.preventDefault() + this.availableOptions[0].focus() + this.handleOptionSelection(e) + } + else if (e.code === 'Enter' || e.code === 'Space') { + e.preventDefault() + this.toggle() + } + } + else { + this.handleOptionsNavigation(e) + this.handleOptionSelection(e) + if (e.code === 'Enter' || e.code === 'Space') { + e.preventDefault() + this.collapse() + } + } + } + handleClickOutside(e) { + if (this.isOpen && !this.contains(e.target)) { + this.collapse() } } connectedCallback() { - this.availableOptions - this.containerDimensions - this.optionList = this.shadowRoot.querySelector('.options') - let slot = this.shadowRoot.querySelector('.options slot'), - menu = this.shadowRoot.querySelector('.menu') - this.icon = this.shadowRoot.querySelector('.icon') - this.open = false; - menu.addEventListener('click', e => { - if (!this.open) { - this.expand() - } else { - this.collapse() - } - }) - menu.addEventListener('keydown', e => { - if (e.code === 'ArrowDown' || e.code === 'ArrowRight') { - e.preventDefault() - this.availableOptions[0].focus() - } - if (e.code === 'Enter' || e.code === 'Space') { - e.preventDefault() - if (!this.open) { - this.expand() - } else { - this.collapse() - } - } - }) - this.optionList.addEventListener('keydown', e => { - if (e.code === 'ArrowUp' || e.code === 'ArrowRight') { - e.preventDefault() - if (document.activeElement.previousElementSibling) { - document.activeElement.previousElementSibling.focus() - } - } - if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') { - e.preventDefault() - if (document.activeElement.nextElementSibling) - document.activeElement.nextElementSibling.focus() - } - }) - this.optionList.addEventListener('click', e => { - this.collapse() - }) + this.setAttribute('role', 'listbox') + if (!this.hasAttribute('disabled')) { + this.selection.setAttribute('tabindex', '0') + } + let slot = this.shadowRoot.querySelector('slot') slot.addEventListener('slotchange', e => { this.availableOptions = slot.assignedElements() - this.containerDimensions = this.optionList.getBoundingClientRect() + this.reset(false) }); - window.addEventListener('mousedown', e => { - if (!this.contains(e.target) && e.button !== 2) { - this.collapse() + this.addEventListener('click', this.handleClick) + this.addEventListener('keydown', this.handleKeydown) + document.addEventListener('mousedown', this.handleClickOutside) + } + disconnectedCallback() { + this.removeEventListener('click', this.toggle) + this.removeEventListener('keydown', this.handleKeydown) + document.removeEventListener('mousedown', this.handleClickOutside) + } + attributeChangedCallback(name) { + if (name === "disabled") { + if (this.hasAttribute('disabled')) { + this.selection.removeAttribute('tabindex') + } else { + this.selection.setAttribute('tabindex', '0') } - }) + } } }) // option -const smMenuOption = document.createElement('template') -smMenuOption.innerHTML = ` +const smOption = document.createElement('template') +smOption.innerHTML = `
+
`; -customElements.define('sm-menu-option', class extends HTMLElement { +customElements.define('sm-option', class extends HTMLElement { constructor() { super() this.attachShadow({ mode: 'open' - }).append(smMenuOption.content.cloneNode(true)) + }).append(smOption.content.cloneNode(true)) } connectedCallback() { - this.addEventListener('keyup', e => { - if (e.code === 'Enter' || e.code === 'Space') { - e.preventDefault() - this.click() - } - }) + this.setAttribute('role', 'option') + this.setAttribute('tabindex', '0') } }) -// tab-header +const smCheckbox = document.createElement('template') +smCheckbox.innerHTML = ` + +` +customElements.define('sm-checkbox', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smCheckbox.content.cloneNode(true)) + this.checkbox = this.shadowRoot.querySelector('.checkbox'); + + this.reset = this.reset.bind(this) + this.dispatch = this.dispatch.bind(this) + this.handleKeyDown = this.handleKeyDown.bind(this) + this.handleClick = this.handleClick.bind(this) + } + + static get observedAttributes() { + return ['value', 'disabled', 'checked'] + } + + get disabled() { + return this.hasAttribute('disabled') + } + + set disabled(val) { + if (val) { + this.setAttribute('disabled', '') + } else { + this.removeAttribute('disabled') + } + } + + get checked() { + return this.hasAttribute('checked') + } + + set checked(value) { + if (value) { + this.setAttribute('checked', '') + } + else { + this.removeAttribute('checked') + } + } + + set value(val) { + this.setAttribute('value', val) + } + + get value() { + return this.getAttribute('value') + } + + reset() { + this.removeAttribute('checked') + } + + dispatch() { + this.dispatchEvent(new CustomEvent('change', { + bubbles: true, + composed: true + })) + } + handleKeyDown(e) { + if (e.code === "Space") { + e.preventDefault() + this.click() + } + } + handleClick(e) { + this.toggleAttribute('checked') + } + + connectedCallback() { + if (!this.hasAttribute('disabled')) { + this.setAttribute('tabindex', '0') + } + this.setAttribute('role', 'checkbox') + if (!this.hasAttribute('checked')) { + this.setAttribute('aria-checked', 'false') + } + this.addEventListener('keydown', this.handleKeyDown) + this.addEventListener('click', this.handleClick) + } + attributeChangedCallback(name, oldValue, newValue) { + if (oldValue !== newValue) { + if (name === 'checked') { + this.setAttribute('aria-checked', this.hasAttribute('checked')) + this.dispatch() + } + else if (name === 'disabled') { + if (this.hasAttribute('disabled')) { + this.removeAttribute('tabindex') + } + else { + this.setAttribute('tabindex', '0') + } + } + } + } + disconnectedCallback() { + this.removeEventListener('keydown', this.handleKeyDown) + this.removeEventListener('change', this.handleClick) + } +}) const smTabHeader = document.createElement('template') smTabHeader.innerHTML = `
@@ -3296,66 +2911,76 @@ customElements.define('sm-tab-header', class extends HTMLElement { mode: 'open' }).append(smTabHeader.content.cloneNode(true)) + this.prevTab + this.allTabs + this.activeTab + this.indicator = this.shadowRoot.querySelector('.indicator'); this.tabSlot = this.shadowRoot.querySelector('slot'); this.tabHeader = this.shadowRoot.querySelector('.tab-header'); + + this.changeTab = this.changeTab.bind(this) + this.handleClick = this.handleClick.bind(this) + this.handlePanelChange = this.handlePanelChange.bind(this) + this.moveIndiactor = this.moveIndiactor.bind(this) } - sendDetails(element) { + fireEvent(index) { this.dispatchEvent( - new CustomEvent("switchtab", { + new CustomEvent(`switchedtab${this.target}`, { bubbles: true, detail: { - target: this.target, - rank: parseInt(element.getAttribute('rank')) + index: parseInt(index) } }) ) } moveIndiactor(tabDimensions) { - //if(this.isTab) this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`) - //else - //this.indicator.setAttribute('style', `width: calc(${tabDimensions.width}px - 1.6rem); transform: translateX(calc(${ tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px + 0.8rem)`) + } + + + changeTab(target) { + if (target === this.prevTab || !target.closest('sm-tab')) + return + if (this.prevTab) + this.prevTab.classList.remove('active') + target.classList.add('active') + + this.tabHeader.scrollTo({ + behavior: 'smooth', + left: target.getBoundingClientRect().left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft + }) + this.moveIndiactor(target.getBoundingClientRect()) + this.prevTab = target; + this.activeTab = target; + } + handleClick(e) { + if (e.target.closest('sm-tab')) { + this.changeTab(e.target) + this.fireEvent(e.target.dataset.index) + } + } + + handlePanelChange(e) { + this.changeTab(this.allTabs[e.detail.index]) } connectedCallback() { if (!this.hasAttribute('target') || this.getAttribute('target').value === '') return; - this.prevTab - this.allTabs - this.activeTab - this.isTab = false this.target = this.getAttribute('target') - if (this.hasAttribute('variant') && this.getAttribute('variant') === 'tab') { - this.isTab = true - } - this.tabSlot.addEventListener('slotchange', () => { - this.tabSlot.assignedElements().forEach((tab, index) => { - tab.setAttribute('rank', index) + this.allTabs = this.tabSlot.assignedElements(); + this.allTabs.forEach((tab, index) => { + tab.dataset.index = index }) }) - this.allTabs = this.tabSlot.assignedElements(); - this.tabSlot.addEventListener('click', e => { - if (e.target === this.prevTab || !e.target.closest('sm-tab')) - return - if (this.prevTab) - this.prevTab.classList.remove('active') - e.target.classList.add('active') + this.addEventListener('click', this.handleClick) + document.addEventListener(`switchedpanel${this.target}`, this.handlePanelChange) - e.target.scrollIntoView({ - behavior: 'smooth', - block: 'nearest', - inline: 'center' - }) - this.moveIndiactor(e.target.getBoundingClientRect()) - this.sendDetails(e.target) - this.prevTab = e.target; - this.activeTab = e.target; - }) let resizeObserver = new ResizeObserver(entries => { entries.forEach((entry) => { if (this.prevTab) { @@ -3376,7 +3001,7 @@ customElements.define('sm-tab-header', class extends HTMLElement { this.allTabs[0].classList.add('active') let tabDimensions = this.allTabs[0].getBoundingClientRect(); this.moveIndiactor(tabDimensions) - this.sendDetails(this.allTabs[0]) + this.fireEvent(0) this.prevTab = this.tabSlot.assignedElements()[0]; this.activeTab = this.prevTab; } @@ -3387,6 +3012,76 @@ customElements.define('sm-tab-header', class extends HTMLElement { }) observer.observe(this) } + disconnectedCallback() { + this.removeEventListener('click', this.handleClick) + document.removeEventListener(`switchedpanel${this.target}`, this.handlePanelChange) + } +}) + +// tab +const smTab = document.createElement('template') +smTab.innerHTML = ` + +
+ +
+`; + +customElements.define('sm-tab', class extends HTMLElement { + constructor() { + super() + this.shadow = this.attachShadow({ + mode: 'open' + }).append(smTab.content.cloneNode(true)) + } }) // tab-panels @@ -3410,21 +3105,27 @@ smTabPanels.innerHTML = ` display: flex; width: 100%; height: 100%; - overflow: hidden auto; + overflow: hidden; + scroll-snap-type: x mandatory; + content-visibility: auto; } -slot::slotted(.hide-completely){ - display: none; +::slotted(*){ + min-width: 100%; + scroll-snap-align: center; } -@media (hover: none){ - .tab-header::-webkit-scrollbar-track { - -webkit-box-shadow: none !important; - background-color: transparent !important; +@media (any-hover: none) { + .panel-container{ + overflow-x: auto; + scrollbar-width: none; } - .tab-header::-webkit-scrollbar { + .container { + overflow-y: scroll; + } + ::-webkit-scrollbar { + width: 0; height: 0; - background-color: transparent; } -} +}
Nothing to see here. @@ -3437,109 +3138,56 @@ customElements.define('sm-tab-panels', class extends HTMLElement { this.attachShadow({ mode: 'open' }).append(smTabPanels.content.cloneNode(true)) - this.panelSlot = this.shadowRoot.querySelector('slot'); + + this.isTransitioning = false + + this.panelContainer = this.shadowRoot.querySelector('.panel-container'); + this.handleTabChange = this.handleTabChange.bind(this) + } + handleTabChange(e) { + this.isTransitioning = true + this.panelContainer.scrollTo({ + left: this.allPanels[e.detail.index].getBoundingClientRect().left - this.panelContainer.getBoundingClientRect().left + this.panelContainer.scrollLeft, + behavior: 'smooth' + }) + setTimeout(() => { + this.isTransitioning = false + }, 300); + } + fireEvent(index) { + this.dispatchEvent( + new CustomEvent(`switchedpanel${this.id}`, { + bubbles: true, + detail: { + index: parseInt(index) + } + }) + ) } connectedCallback() { - - //animations - let flyInLeft = [{ - opacity: 0, - transform: 'translateX(-1rem)' - }, - { - opacity: 1, - transform: 'none' - } - ], - flyInRight = [{ - opacity: 0, - transform: 'translateX(1rem)' - }, - { - opacity: 1, - transform: 'none' - } - ], - flyOutLeft = [{ - opacity: 1, - transform: 'none' - }, - { - opacity: 0, - transform: 'translateX(-1rem)' - } - ], - flyOutRight = [{ - opacity: 1, - transform: 'none' - }, - { - opacity: 0, - transform: 'translateX(1rem)' - } - ], - animationOptions = { - duration: 300, - fill: 'forwards', - easing: 'ease' - } - this.prevPanel - this.allPanels - this.previousRank - - this.panelSlot.addEventListener('slotchange', () => { - this.panelSlot.assignedElements().forEach((panel) => { - panel.classList.add('hide-completely') + const slot = this.shadowRoot.querySelector('slot'); + slot.addEventListener('slotchange', (e) => { + this.allPanels = e.target.assignedElements() + this.allPanels.forEach((panel, index) => { + panel.dataset.index = index + intersectionObserver.observe(panel) }) }) - this.allPanels = this.panelSlot.assignedElements() - this._targetBodyFlyRight = (targetBody) => { - targetBody.classList.remove('hide-completely') - targetBody.animate(flyInRight, animationOptions) - } - this._targetBodyFlyLeft = (targetBody) => { - targetBody.classList.remove('hide-completely') - targetBody.animate(flyInLeft, animationOptions) - } - document.addEventListener('switchtab', e => { - if (e.detail.target !== this.id) - return + document.addEventListener(`switchedtab${this.id}`, this.handleTabChange) - if (this.prevPanel) { - let targetBody = this.allPanels[e.detail.rank], - currentBody = this.prevPanel; - if (this.previousRank < e.detail.rank) { - if (currentBody && !targetBody) - currentBody.animate(flyOutLeft, animationOptions).onfinish = () => { - currentBody.classList.add('hide-completely') - } - else if (targetBody && !currentBody) { - this._targetBodyFlyRight(targetBody) - } else if (currentBody && targetBody) { - currentBody.animate(flyOutLeft, animationOptions).onfinish = () => { - currentBody.classList.add('hide-completely') - this._targetBodyFlyRight(targetBody) - } - } - } else { - if (currentBody && !targetBody) - currentBody.animate(flyOutRight, animationOptions).onfinish = () => { - currentBody.classList.add('hide-completely') - } - else if (targetBody && !currentBody) { - this._targetBodyFlyLeft(targetBody) - } else if (currentBody && targetBody) { - currentBody.animate(flyOutRight, animationOptions).onfinish = () => { - currentBody.classList.add('hide-completely') - this._targetBodyFlyLeft(targetBody) - } - } + const intersectionObserver = new IntersectionObserver(entries => { + + entries.forEach(entry => { + if (!this.isTransitioning && entry.isIntersecting) { + this.fireEvent(entry.target.dataset.index) } - } else { - this.allPanels[e.detail.rank].classList.remove('hide-completely') - } - this.previousRank = e.detail.rank - this.prevPanel = this.allPanels[e.detail.rank]; + }) + }, { + threshold: 0.6 }) } -}) + disconnectedCallback() { + intersectionObserver.disconnect() + document.removeEventListener(`switchedtab${this.id}`, this.handleTabChange) + } +}) \ No newline at end of file diff --git a/css/main.css b/css/main.css index 3519ced..729c463 100644 --- a/css/main.css +++ b/css/main.css @@ -1,81 +1,160 @@ -@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap"); * { padding: 0; margin: 0; -webkit-box-sizing: border-box; - box-sizing: border-box; - font-family: "Roboto", sans-serif; + box-sizing: border-box; + font-family: "Inter", sans-serif; } -html { +:root { + font-size: clamp(1rem, 1.2vmax, 1.2rem); +} + +html, +body { + height: 100%; scroll-behavior: smooth; } body { - --accent-color: #00a566; - --light-shade: rgba(var(--text-color), 0.06); - --text-color: 17, 17, 17; - --text-color-light: 100, 100, 100; - --foreground-color: 255, 255, 255; - --background-color: #efefef; - --error-color: red; color: rgba(var(--text-color), 1); - height: calc(100%); - font-size: clamp(1rem, 1.2vmax, 3rem); - background: rgba(var(--foreground-color), 1); + background: rgba(var(--background-color), 1); +} +body, +body * { + --accent-color: #504dff; + --accent-color--light: #eeeeff; + --text-color: 36, 36, 36; + --background-color: 248, 248, 248; + --foreground-color: rgb(255, 255, 255); + --danger-color: rgb(255, 75, 75); + --green: #1cad59; + --yellow: #f3a600; + --loan-color: rgb(255, 171, 93); + scrollbar-width: thin; } -body[data-theme=dark] { - --accent-color:#00fa9a; - --text-color: 240, 240, 240; +body[data-theme=dark], +body[data-theme=dark] * { + --accent-color: #a3a1ff; + --accent-color--light: rgba(142, 140, 255, 0.06); + --text-color: 230, 230, 230; --text-color-light: 170, 170, 170; - --foreground-color: 20, 20, 20; - --error-color: rgb(255, 106, 106); + --background-color: 10, 10, 10; + --foreground-color: rgb(24, 24, 24); + --danger-color: rgb(255, 106, 106); + --green: #00e676; + --yellow: #ffd13a; + --loan-color: rgb(255, 232, 170); +} +body[data-theme=dark] sm-popup::part(popup) { + background-color: var(--foreground-color); } -button { +p, +strong { + font-size: 0.9rem; + max-width: 70ch; + line-height: 1.7; + color: rgba(var(--text-color), 0.8); +} +p:not(:last-of-type), +strong:not(:last-of-type) { + margin-bottom: 1.5rem; +} + +a:where([class]) { + color: inherit; + text-decoration: none; +} +a:where([class]):focus-visible { + -webkit-box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset; + box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset; +} + +a { + color: var(--accent-color); +} + +button, +.button { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; position: relative; - overflow: hidden; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; + border: none; + background-color: transparent; + overflow: hidden; + color: inherit; + cursor: pointer; + -webkit-transition: -webkit-transform 0.3s; + transition: -webkit-transform 0.3s; + transition: transform 0.3s; + transition: transform 0.3s, -webkit-transform 0.3s; + -webkit-tap-highlight-color: transparent; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - border: none; - background: none; - cursor: pointer; - outline: none; - color: inherit; + font-size: 0.9rem; font-weight: 500; - -webkit-tap-highlight-color: transparent; } .button { - border-radius: 0.2rem; - padding: 0.5rem 0.6rem; + white-space: nowrap; + padding: 0.6rem 1rem; + border-radius: 0.3rem; + background-color: rgba(var(--text-color), 0.06); + color: rgba(var(--text-color), 0.8); + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } - .button--primary { - background: var(--accent-color); - color: rgba(var(--foreground-color), 1); -} -.button--primary .icon { - fill: rgba(var(--foreground-color), 1); + background-color: var(--accent-color); + color: rgba(var(--background-color), 1); } -button:focus-visible { +button:disabled { + opacity: 0.5; +} + +a:-webkit-any-link:focus-visible { outline: rgba(var(--text-color), 1) 0.1rem solid; } -sm-input, -sm-textarea { - --border-radius: 0.2rem; - --background: rgba(var(--text-color), 0.06); +a:-moz-any-link:focus-visible { + outline: rgba(var(--text-color), 1) 0.1rem solid; +} + +a:any-link:focus-visible { + outline: rgba(var(--text-color), 1) 0.1rem solid; +} + +sm-input { + font-size: 0.9rem; + --border-radius: 0.3rem; + --background: var(--accent-color--light); } sm-button { - --border-radius: 0.2rem; + --padding: 0.7rem 1rem; +} +sm-button[variant=primary] .icon { + fill: rgba(var(--background-color), 1); +} +sm-button[disabled] .icon { + fill: rgba(var(--text-color), 0.6); +} +sm-button.uppercase { + letter-spacing: 0.05em; +} +sm-button.danger { + --background: var(--danger-color); + color: rgba(var(--background-color), 1); } ul { @@ -92,24 +171,155 @@ ul { display: grid; } +.hide { + opacity: 0; + pointer-events: none; +} + +.hide-completely { + display: none !important; +} + +.overflow-ellipsis { + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.breakable { + overflow-wrap: break-word; + word-wrap: break-word; + -ms-word-break: break-all; + word-break: break-word; + -ms-hyphens: auto; + -webkit-hyphens: auto; + hyphens: auto; +} + +.full-bleed { + grid-column: 1/4; +} + +.h1 { + font-size: 1.5rem; +} + +.h2 { + font-size: 1.2rem; +} + +.h3 { + font-size: 1rem; +} + +.h4 { + font-size: 0.9rem; +} + +.h5 { + font-size: 0.8rem; +} + +.uppercase { + text-transform: uppercase; +} + +.capitalize { + text-transform: capitalize; +} + +.flex { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +.grid { + display: grid; +} + +.grid-3 { + grid-template-columns: 1fr auto auto; +} + .flow-column { grid-auto-flow: column; } -.gap-1r { +.gap-0-5 { + gap: 0.5rem; +} + +.gap-1 { gap: 1rem; } +.gap-1-5 { + gap: 1.5rem; +} + +.gap-2 { + gap: 2rem; +} + +.gap-3 { + gap: 3rem; +} + +.text-align-right { + text-align: right; +} + +.align-start { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; +} + .align-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } +.text-center { + text-align: center; +} + +.justify-start { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: start; +} + +.justify-center { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} + .justify-right { margin-left: auto; } +.align-self-center { + -ms-flex-item-align: center; + align-self: center; +} + +.justify-self-center { + justify-self: center; +} + +.justify-self-start { + justify-self: start; +} + +.justify-self-end { + justify-self: end; +} + .direction-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; @@ -123,99 +333,65 @@ ul { justify-content: space-between; } -.full-width { +.w-100 { width: 100%; } -.margin-top-1-5 { - margin-top: 1.5rem; -} - -.margin-bottom-1-5 { - margin-bottom: 1.5rem; -} - -.margin-left-0-5 { - margin-left: 0.5rem; -} - -.margin-right-0-5 { - margin-right: 0.5rem; -} - -.hide { - opacity: 0; - pointer-events: none; -} - -.hide-completely { - display: none !important; -} - -.no-transformations { - -webkit-transform: none !important; - transform: none !important; -} - -.overflow-ellipsis { - width: 100%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} - -.ripple { - position: absolute; - border-radius: 50%; - -webkit-transform: scale(0); - transform: scale(0); - background: rgba(var(--text-color), 0.16); - pointer-events: none; -} - .interact { position: relative; - overflow: hidden; cursor: pointer; + -webkit-transition: -webkit-transform 0.3s; + transition: -webkit-transform 0.3s; + transition: transform 0.3s; + transition: transform 0.3s, -webkit-transform 0.3s; -webkit-tap-highlight-color: transparent; } +.empty-state { + display: grid; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + text-align: center; + width: 100%; + padding: 1.5rem; +} + .observe-empty-state:empty { display: none; } -.observe-empty-state:not(:empty) ~ .empty-state { +.observe-empty-state:not(:empty) + .empty-state { display: none; } .icon { - width: 1.5rem; - height: 1.5rem; - fill: rgba(var(--text-color), 0.9); + width: 1.2rem; + height: 1.2rem; + fill: rgba(var(--text-color), 0.8); } -.icon-only { - height: 2.6rem; - width: 2.6rem; - padding: 0.6rem; -} - -.close-icon { - padding: 0.3rem; -} - -.close-button { - left: -0.5rem; -} - -.option__icon { +.button__icon { height: 1.2rem; width: 1.2rem; - margin-right: 0.8rem; +} +.button__icon--left { + margin-right: 0.5rem; +} +.button__icon--right { + margin-left: 0.5rem; } -.option__label { - font-size: 1rem; +.icon-button { + padding: 0.6rem; + border-radius: 0.8rem; + background-color: var(--accent-color--light); + height: -webkit-max-content; + height: -moz-max-content; + height: max-content; +} +.icon-button .icon { + fill: var(--accent-color); } #confirmation_popup, @@ -245,15 +421,26 @@ ul { margin-left: auto; } +#prompt_message { + margin-bottom: 1.5rem; +} + +button:active, +.button:active, +.interact:active { + -webkit-transform: scale(0.96); + transform: scale(0.96); +} + .popup__header { - padding: 0.5rem 1.5rem 0 1rem; display: grid; - grid-template-columns: auto 1fr auto; gap: 0.5rem; + width: 100%; + padding: 0 1.5rem 0 0.5rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - width: 100%; + grid-template-columns: auto 1fr auto; } .popup__header__close { @@ -261,771 +448,305 @@ ul { cursor: pointer; } -h1, -h2, -h3, -h4, -h5 { - font-family: "Roboto Slab", sans-serif; -} - -p { - line-height: 1.6; -} - -button:focus { - outline: none; -} - -button:focus-visible { - outline: auto; -} - -button:first-of-type { - margin-left: auto; -} - -button[disabled] { - opacity: 0.5 !important; - cursor: default; - color: rgba(var(--text-color), 1); -} - -textarea { - background: var(--light-shade); - color: rgba(var(--text-color), 1); +#main_page { padding: 1.5rem; - max-width: 100%; - font-size: 1rem; +} +#main_page > section:nth-of-type(1) { + -ms-flex-line-pack: start; + align-content: flex-start; } -.checkbox__label { - margin-left: 1rem; +.logo { + display: grid; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: 100%; + grid-template-columns: auto 1fr; + gap: 0 0.3rem; + margin-right: 1rem; +} +.logo h4 { + text-transform: capitalize; + font-size: 0.9rem; + font-weight: 600; +} +.logo .main-logo { + height: 1.4rem; + width: 1.4rem; + fill: rgba(var(--text-color), 1); + stroke: none; } -.spacer { - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; -} - -.solid-background { - background: var(--background-color); -} - -#context_menu { - display: none; -} - -.article__header { +details summary { display: -webkit-box; display: -ms-flexbox; display: flex; - width: 100%; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - margin-bottom: 2rem; -} - -#article__title { - font-size: 1.2rem; -} - -#articles_list__button { - width: 3rem; - height: 3rem; - margin-left: -0.8rem; - margin-right: 0.5rem; - fill: rgba(var(--text-color), 1); + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; cursor: pointer; } -#articles_list__button .icon-only { - height: 4rem; - width: 4rem; +details[open] > summary { + margin-bottom: 1rem; +} +details[open] > summary .icon { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); } -.gallery-name { - padding: 0.2rem 0; - margin: 1rem 0; - font-size: 1.1rem; - color: rgba(var(--text-color), 1); +strip-select { + --gap: 0; + background-color: var(--accent-color--light); + border-radius: 0.3rem; +} + +strip-option { font-weight: 500; - line-height: 1.5; + font-size: 0.8rem; + --border-radius: 0; + --active-option-color: rgba(var(--background-color), 1); + --active-option-background-color: var(--accent-color); +} +strip-option:first-of-type { + --border-radius: 0.3rem 0 0 0.3rem; +} +strip-option:last-of-type { + --border-radius: 0 0.3rem 0.3rem 0; } -.edit-article { - margin-left: auto; -} - -#edit_article_popup label { +sm-select, +sm-option { font-size: 0.9rem; } -#edit_article_popup input:not([type=checkbox]) { - margin-bottom: 2rem; - margin-top: 0.5rem; - width: 100%; +sm-checkbox { + --height: 1rem; + --width: 1rem; + -webkit-tap-highlight-color: transparent; } -#edit_section_container { - gap: 1.5rem; - padding: 1rem 0; -} - -.gallery-container { - position: relative; - overflow: hidden; -} - -.navigation-arrows { - -webkit-transition: opacity 0.2s ease; - transition: opacity 0.2s ease; - cursor: pointer; +.warning { + background-color: khaki; + color: rgba(0, 0, 0, 0.7); padding: 1rem; - height: 4rem; - width: 4rem; - z-index: 2; - position: absolute; - top: 50%; - fill: rgba(var(--text-color), 1); - -webkit-transition: -webkit-transform 0.3s; - transition: -webkit-transform 0.3s; - transition: transform 0.3s; - transition: transform 0.3s, -webkit-transform 0.3s; - background: rgba(var(--foreground-color), 0.9); - -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.16); - box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.16); + border-radius: 0.5rem; + line-height: 1.5; } -.navigation-arrows:nth-of-type(1) { - border-radius: 0 50% 50% 0; - -webkit-transform: translate(-1rem, -50%); - transform: translate(-1rem, -50%); +.page-layout { + display: grid; + grid-template-columns: 1rem minmax(0, 1fr) 1rem; } -.navigation-arrows:nth-of-type(1):hover { - -webkit-transform: translate(0, -50%); - transform: translate(0, -50%); +.page-layout > * { + grid-column: 2/3; } -.navigation-arrows:nth-of-type(2) { - right: 0; - border-radius: 50% 0 0 50%; - -webkit-transform: translate(1rem, -50%); - transform: translate(1rem, -50%); -} -.navigation-arrows:nth-of-type(2):hover { - -webkit-transform: translate(0, -50%); - transform: translate(0, -50%); +.page { + height: 100%; } -.gallery { - position: relative; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - overflow-x: auto; - -ms-scroll-snap-type: x mandatory; - scroll-snap-type: x mandatory; - margin-bottom: 4rem !important; -} - -.article-body { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - scroll-snap-align: start; - min-width: 30%; - background-color: rgba(var(--text-color), 0.06); - color: rgba(var(--text-color), 1); - margin: 0 1rem 1rem 0; - border-radius: 0.2rem; -} - -.article-body .article-header { - padding: 1.5rem; - word-break: break-all; -} - -.article__author { - display: -webkit-inline-box; - display: -ms-inline-flexbox; - display: inline-flex; - font-weight: normal; - font-size: 0.8rem; - color: #a7c5eb; -} - -.article-body .card-body { - position: relative; - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; -} - -.article-body .card-body .content-div { - padding: 0 1.5rem 4rem 1.5rem; - min-height: 16rem; - line-height: 1.7; - max-height: 50vh; - overflow-y: auto; - font-weight: 400; - overflow-wrap: break-word; -} - -.article-body .card-body .content-div * { - overflow-wrap: break-word; -} - -.article-body .card-body button { - position: absolute; - bottom: 0; - right: 0; - margin-right: 1rem; -} - -.article-body .card-body .submit-btn { - background: var(--light-shade); -} - -.article-body .card-footer { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - padding: 1rem 1.5rem; -} - -.article-body .card-footer h5 { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - font-weight: normal; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; +#main_header { + display: grid; + gap: 1rem; + padding: 1rem; -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - color: var(--accent-color); - cursor: pointer; + -ms-flex-align: center; + align-items: center; + grid-template-columns: auto 1fr auto auto; + grid-column: 1/-1; + background-color: var(--foreground-color); + border-radius: 0 0 1rem 1rem; + border: solid thin rgba(var(--text-color), 0.16); } -.article-body .card-footer h5:nth-of-type(2) { - margin-left: auto; -} - -.article-body .card-footer h5:nth-of-type(2):hover svg { - fill: var(--accent-color); -} - -.article-body .card-footer h5 svg { - stroke: var(--accent-color); - width: 1.2rem; - margin-right: 0.5rem; -} - -.show { - opacity: 1; - pointer-events: all; -} - -.hide { - opacity: 0; - pointer-events: none; -} - -#article_container { - padding: 1rem 2rem; - width: 100%; -} - -.select-for-export { - padding: 0.2rem 0.4rem; - border-radius: 0.1rem; -} - -.snippet-selected { - -webkit-box-shadow: 0 0 0 0.1rem var(--accent-color); - box-shadow: 0 0 0 0.1rem var(--accent-color); -} - -.no-transformations { - -webkit-transform: none !important; - transform: none !important; -} - -:-webkit-any-link { - color: var(--accent-color); - text-decoration: none; -} - -:-moz-any-link { - color: var(--accent-color); - text-decoration: none; -} - -:any-link { - color: var(--accent-color); - text-decoration: none; -} - -#sign_in { - --backdrop: rgba(var(--foreground-color), 1); -} - -#sign_in h2 { - margin-bottom: 1rem; - z-index: 3; -} - -#sign_in p:first-of-type { - margin-bottom: 4rem; - z-index: 3; +.label { + font-size: 0.8rem; color: rgba(var(--text-color), 0.8); -} - -#sign_in .back-btn { - margin-bottom: 2rem; - padding-left: 0; - color: rgba(var(--text-color), 1); -} - -.sign-in-mode__button { - height: 8rem; - width: 8rem; -} - -.big-icon { - fill: none; - stroke: rgba(var(--text-color), 1); -} - -#sign_in div:first-of-type { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - margin-bottom: 4rem; - z-index: 3; -} - -#sign_in div:first-of-type .icon { - height: 3rem; - width: 3rem; - stroke-width: 4; - margin-bottom: 1rem; - margin-right: 0; -} - -#sign_in div:first-of-type button { - margin: initial; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - text-align: center; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - margin: 0.5rem; - width: 8rem; - color: rgba(var(--text-color), 1); - background: rgba(var(--foreground), 1); -} - -#sign_in div:first-of-type button:hover { - color: var(--accent-color); -} - -#sign_in div:first-of-type button:hover .icon { - stroke: var(--accent-color); -} - -#sign_in #priv_key_sign_in { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-flow: column wrap; - flex-flow: column wrap; - z-index: 3; -} - -#sign_in_button { - margin: 1rem 0 2rem 0; - width: 100%; - background: rgba(var(--text-color), 0.06); - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; -} - -#navbar { - position: -webkit-sticky; - position: sticky; - top: 0; - width: 100%; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - color: rgba(var(--text-color), 1); - background: rgba(var(--foreground-color), 1); - padding: 1rem; - z-index: 5; -} - -#navbar h5 { - font-size: 0.8rem; - font-weight: normal; margin-bottom: 0.2rem; } -.app-name { - font-size: 1rem; - font-weight: 700; +.icon--success { + fill: var(--green); } -#icon { - width: 2rem; - height: 2rem; - margin: 0 0.5rem; +.icon--failure, +.icon--error { + fill: var(--danger-color); } -#export_option_list { - gap: 1rem; - grid-auto-flow: column; - margin-right: 1rem; -} - -.floating-btn { - display: none; -} - -#loader_container { - position: fixed; - height: 100vh; - width: 100vw; - top: 0; - background: rgba(var(--foreground-color), 1); - -webkit-transition: opacity 0.6s ease; - transition: opacity 0.6s ease; - display: -ms-grid; - display: grid; - place-content: center; - z-index: 8; - text-align: center; -} - -#loader_container #spinner { - position: relative; - height: 2rem; - fill: teal; - overflow: visible; - -ms-grid-column-align: center; +#article_wrapper { justify-self: center; - margin-bottom: 2rem; + padding: 1rem 0; + gap: 0.5rem 0; } -#loader_container h4 { - font-weight: normal; - color: rgba(var(--text-color), 1); +.heading { + display: -webkit-box; + display: -ms-flexbox; + display: flex; } - -#loader_container button { - margin: 1rem auto auto auto; -} - -.pulse .first-orb { - -webkit-animation: pulse 1s infinite ease; - animation: pulse 1s infinite ease; -} - -.pulse .second-orb { - -webkit-animation: pulse 1s 0.1s infinite ease; - animation: pulse 1s 0.1s infinite ease; -} - -.pulse .third-orb { - -webkit-animation: pulse 1s 0.2s infinite ease; - animation: pulse 1s 0.2s infinite ease; -} - -@-webkit-keyframes pulse { - 0% { - -webkit-transform: scale(1); - transform: scale(1); - } - 60% { - -webkit-transform: scale(1.5); - transform: scale(1.5); - } - 100% { - -webkit-transform: scale(1); - transform: scale(1); - } -} -@keyframes pulse { - 0% { - -webkit-transform: scale(1); - transform: scale(1); - } - 60% { - -webkit-transform: scale(1.5); - transform: scale(1.5); - } - 100% { - -webkit-transform: scale(1); - transform: scale(1); - } -} -.spin svg { - -webkit-animation: spin 0.6s ease infinite; - animation: spin 0.6s ease infinite; - -webkit-transform-origin: center; - transform-origin: center; -} - -@-webkit-keyframes spin { - 0% { - -webkit-transform: rotate(0); - transform: rotate(0); - } - 100% { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); - } -} -@keyframes spin { - 0% { - -webkit-transform: rotate(0); - transform: rotate(0); - } - 100% { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); - } -} -#section_plot_popup p { - margin: 1rem 0; - font-weight: 400; -} - -#section_plot_popup details { - margin-bottom: 1rem; - cursor: pointer; -} - -#section_plot_popup summary { - outline: none; -} - -#inc_section { - gap: 1rem; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; -} - -#article_list_popup { - --height: 80vh; - --min-height: 80vh; - --body-padding: 0; -} - -#article_list__header { - grid-template-columns: auto 1fr; -} - -#article_list { - display: grid; - margin-bottom: 1.5rem; - list-style: none; - grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr)); -} - -.article-list__item { - width: 100%; +.heading::before { + content: ""; + width: 0.3rem; height: 100%; - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; - font-size: 1rem; - text-transform: none; - text-align: left; - font-weight: 400; + margin-right: 0.7rem; + border-radius: 0.5rem; + background-color: var(--accent-color); +} + +.section-wrapper { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + gap: 1rem; +} + +.content-card { + width: min(70ch, 100%); + border-radius: 0.5rem; + background-color: var(--foreground-color); + border: solid thin rgba(var(--text-color), 0.16); +} + +.content__area { + border-radius: inherit; + padding: 1rem; + line-height: 1.7; + white-space: pre-line; + font-size: 0.9rem !important; + color: rgba(var(--text-color), 0.8); + background-color: rgba(var(--text-color), 0.02); + border-radius: 0.5rem; + -webkit-transition: -webkit-box-shadow 0.1s; + transition: -webkit-box-shadow 0.1s; + transition: box-shadow 0.1s; + transition: box-shadow 0.1s, -webkit-box-shadow 0.1s; +} +.content__area:focus-within { + outline: none; + -webkit-box-shadow: 0 0 0 0.1rem var(--accent-color) inset; + box-shadow: 0 0 0 0.1rem var(--accent-color) inset; +} + +.content__options { + gap: 1rem; + padding: 0.5rem 1rem; + grid-template-columns: auto auto 1fr auto; +} + +.actionable-button { + padding: 0.5rem 0.8rem; + background-color: rgba(var(--text-color), 0.1); + border-radius: 2rem; + border: solid thin rgba(var(--text-color), 0.3); +} +.actionable-button__title { + font-size: 0.8rem; + margin-left: 0.3rem; +} + +.formatting-button { + padding: 0.2rem; border-radius: 0.3rem; - line-height: 1.6; - letter-spacing: normal; - word-spacing: normal; - padding: 1rem 1.5rem; - color: rgba(var(--text-color), 0.9); } -.search__icon { - height: 1.2rem; - width: 1.2rem; +.active { + background-color: var(--accent-color); +} +.active .icon { + fill: white; } -#article_list__empty-state { - width: 100%; - padding: 3rem 0; - font-size: 1.2rem; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; +.quote-template { + position: relative; + padding: 1rem; + margin: 1rem; + background-color: var(--foreground-color); + -webkit-box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.1); + box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.1); + border-radius: 0.5rem; + justify-self: center; +} +.quote-template .icon { + fill: var(--accent-color); + height: 4rem; + width: 4rem; + -webkit-transform: scaleX(-1); + transform: scaleX(-1); +} +.quote-template figcaption { + margin-top: 0.5rem; + color: rgba(var(--text-color), 0.8); + font-size: 0.8rem; +} +.quote-template figcaption::before { + content: "- "; } -@media screen and (min-width: 640px) { +@media screen and (max-width: 40rem) and (any-hover: none) { + .cancel-order span { + display: none; + } +} +@media screen and (max-width: 40rem) { + sm-button { + --padding: 0.9rem 1.6rem; + } + + .hide-on-mobile { + display: none; + } +} +@media screen and (min-width: 40rem) { sm-popup { --width: 24rem; } - #sign_in { - width: 24rem; - height: auto; - border-radius: 0.4rem; - } - - #edit_article_popup { - --width: 32rem; - } - - #article__title { - width: 100%; - text-align: center; + .h1 { font-size: 2rem; } - .gallery-name { - max-width: 40rem; + .h2 { + font-size: 1.8rem; } - #section_plot_popup { - --width: 42rem; + .h3 { + font-size: 1.3rem; } - #article_list__header { - grid-template-columns: auto 1fr auto; - padding: 1rem 1.5rem; + .h4 { + font-size: 1rem; } - #article_list_popup { - --width: 80vw; + .popup__header { + padding: 1rem 1.5rem 0 0.5rem; } -} -@media screen and (min-width: 1920px) { - .article-body { - min-width: 20%; - } -} -.label { - margin-bottom: 0.4rem; - font-weight: 500; -} -@media only screen and (max-width: 640px) { - .hide-on-mobile { + #confirmation_popup { + --width: 24rem; + } + + .page-layout { + grid-template-columns: 1fr 90vw 1fr; + } + + .hide-on-desktop { display: none; } - - .article-body { - min-width: calc(100% - 2em) !important; - } - - #export_option_list { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - padding: 0.5rem; - z-index: 2; - background: rgba(var(--foreground-color), 1); - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - } - - .floating-btn { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - margin: 2rem; - background: rgba(var(--foreground-color), 1); - position: fixed; - -webkit-box-shadow: 0.2rem 0.4rem 0.6rem rgba(0, 0, 0, 0.24), -0.1rem -0.2rem 0.4rem rgba(0, 0, 0, 0.16); - box-shadow: 0.2rem 0.4rem 0.6rem rgba(0, 0, 0, 0.24), -0.1rem -0.2rem 0.4rem rgba(0, 0, 0, 0.16); - z-index: 3; - } - - .floating-btn button { - width: 100%; - } - - .floating-btn { - background: #282828; - bottom: 0; - right: 0; - border-radius: 5rem; - overflow: hidden; - } - - .floating-btn button { - padding: 1rem; - } - - .floating-btn button .icon { - margin-right: 0; - } - - #article_container { - padding: 1.5rem 1.5rem 6rem 1.5rem; - } - - .navigation-arrows { - opacity: 0; - pointer-events: none; - } - - #article_list__header { - padding-bottom: 1rem; - } - - #article_list__search { - width: 100%; - grid-column: 1/3; +} +@media screen and (min-width: 72rem) { + .page-layout { + grid-template-columns: 1fr 90vw 1fr; } } -@media only screen and (max-width: 1280px) { - .article-body { - min-width: 50%; - } - - .hide-on-medium { - display: none; +@media screen and (min-width: 120rem) { + .page-layout { + grid-template-columns: 1fr 90vw 1fr; } } @media (any-hover: hover) { @@ -1042,7 +763,24 @@ textarea { background: rgba(var(--text-color), 0.5); } - .gallery { - overflow-x: hidden; + .interact, +button { + -webkit-transition: background-color 0.3s, -webkit-transform 0.3s; + transition: background-color 0.3s, -webkit-transform 0.3s; + transition: background-color 0.3s, transform 0.3s; + transition: background-color 0.3s, transform 0.3s, -webkit-transform 0.3s; + } + .interact:hover, +button:hover { + background-color: var(--accent-color--light); + } + + .transaction-card button { + opacity: 0; + -webkit-transition: opacity 0.3s; + transition: opacity 0.3s; + } + .transaction-card:hover button { + opacity: 1; } } \ No newline at end of file diff --git a/css/main.min.css b/css/main.min.css index 2d38acb..c8165fc 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -@import"https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap";*{padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Roboto",sans-serif}html{scroll-behavior:smooth}body{--accent-color: #00a566;--light-shade: rgba(var(--text-color), 0.06);--text-color: 17, 17, 17;--text-color-light: 100, 100, 100;--foreground-color: 255, 255, 255;--background-color: #efefef;--error-color: red;color:rgba(var(--text-color), 1);height:calc(100%);font-size:clamp(1rem, 1.2vmax, 3rem);background:rgba(var(--foreground-color), 1)}body[data-theme=dark]{--accent-color:#00fa9a;--text-color: 240, 240, 240;--text-color-light: 170, 170, 170;--foreground-color: 20, 20, 20;--error-color: rgb(255, 106, 106)}button{position:relative;overflow:hidden;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:none;background:none;cursor:pointer;outline:none;color:inherit;font-weight:500;-webkit-tap-highlight-color:transparent}.button{border-radius:.2rem;padding:.5rem .6rem}.button--primary{background:var(--accent-color);color:rgba(var(--foreground-color), 1)}.button--primary .icon{fill:rgba(var(--foreground-color), 1)}button:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-input,sm-textarea{--border-radius: 0.2rem;--background: rgba(var(--text-color), 0.06)}sm-button{--border-radius: 0.2rem}ul{list-style:none}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-1r{gap:1rem}.align-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.justify-right{margin-left:auto}.direction-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.space-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.full-width{width:100%}.margin-top-1-5{margin-top:1.5rem}.margin-bottom-1-5{margin-bottom:1.5rem}.margin-left-0-5{margin-left:.5rem}.margin-right-0-5{margin-right:.5rem}.hide{opacity:0;pointer-events:none}.hide-completely{display:none !important}.no-transformations{-webkit-transform:none !important;transform:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ripple{position:absolute;border-radius:50%;-webkit-transform:scale(0);transform:scale(0);background:rgba(var(--text-color), 0.16);pointer-events:none}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color), 0.9)}.icon-only{height:2.6rem;width:2.6rem;padding:.6rem}.close-icon{padding:.3rem}.close-button{left:-0.5rem}.option__icon{height:1.2rem;width:1.2rem;margin-right:.8rem}.option__label{font-size:1rem}#confirmation_popup,#prompt_popup{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}.popup__header{padding:.5rem 1.5rem 0 1rem;display:grid;grid-template-columns:auto 1fr auto;gap:.5rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.popup__header__close{padding:.5rem;cursor:pointer}h1,h2,h3,h4,h5{font-family:"Roboto Slab",sans-serif}p{line-height:1.6}button:focus{outline:none}button:focus-visible{outline:auto}button:first-of-type{margin-left:auto}button[disabled]{opacity:.5 !important;cursor:default;color:rgba(var(--text-color), 1)}textarea{background:var(--light-shade);color:rgba(var(--text-color), 1);padding:1.5rem;max-width:100%;font-size:1rem}.checkbox__label{margin-left:1rem}.spacer{-webkit-box-flex:1;-ms-flex:1;flex:1}.solid-background{background:var(--background-color)}#context_menu{display:none}.article__header{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin-bottom:2rem}#article__title{font-size:1.2rem}#articles_list__button{width:3rem;height:3rem;margin-left:-0.8rem;margin-right:.5rem;fill:rgba(var(--text-color), 1);cursor:pointer}#articles_list__button .icon-only{height:4rem;width:4rem}.gallery-name{padding:.2rem 0;margin:1rem 0;font-size:1.1rem;color:rgba(var(--text-color), 1);font-weight:500;line-height:1.5}.edit-article{margin-left:auto}#edit_article_popup label{font-size:.9rem}#edit_article_popup input:not([type=checkbox]){margin-bottom:2rem;margin-top:.5rem;width:100%}#edit_section_container{gap:1.5rem;padding:1rem 0}.gallery-container{position:relative;overflow:hidden}.navigation-arrows{-webkit-transition:opacity .2s ease;transition:opacity .2s ease;cursor:pointer;padding:1rem;height:4rem;width:4rem;z-index:2;position:absolute;top:50%;fill:rgba(var(--text-color), 1);-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s;background:rgba(var(--foreground-color), 0.9);-webkit-box-shadow:0 .5rem 1rem rgba(0,0,0,.16);box-shadow:0 .5rem 1rem rgba(0,0,0,.16)}.navigation-arrows:nth-of-type(1){border-radius:0 50% 50% 0;-webkit-transform:translate(-1rem, -50%);transform:translate(-1rem, -50%)}.navigation-arrows:nth-of-type(1):hover{-webkit-transform:translate(0, -50%);transform:translate(0, -50%)}.navigation-arrows:nth-of-type(2){right:0;border-radius:50% 0 0 50%;-webkit-transform:translate(1rem, -50%);transform:translate(1rem, -50%)}.navigation-arrows:nth-of-type(2):hover{-webkit-transform:translate(0, -50%);transform:translate(0, -50%)}.gallery{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;overflow-x:auto;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;margin-bottom:4rem !important}.article-body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;scroll-snap-align:start;min-width:30%;background-color:rgba(var(--text-color), 0.06);color:rgba(var(--text-color), 1);margin:0 1rem 1rem 0;border-radius:.2rem}.article-body .article-header{padding:1.5rem;word-break:break-all}.article__author{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-weight:normal;font-size:.8rem;color:#a7c5eb}.article-body .card-body{position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1}.article-body .card-body .content-div{padding:0 1.5rem 4rem 1.5rem;min-height:16rem;line-height:1.7;max-height:50vh;overflow-y:auto;font-weight:400;overflow-wrap:break-word}.article-body .card-body .content-div *{overflow-wrap:break-word}.article-body .card-body button{position:absolute;bottom:0;right:0;margin-right:1rem}.article-body .card-body .submit-btn{background:var(--light-shade)}.article-body .card-footer{display:-webkit-box;display:-ms-flexbox;display:flex;padding:1rem 1.5rem}.article-body .card-footer h5{display:-webkit-box;display:-ms-flexbox;display:flex;font-weight:normal;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--accent-color);cursor:pointer}.article-body .card-footer h5:nth-of-type(2){margin-left:auto}.article-body .card-footer h5:nth-of-type(2):hover svg{fill:var(--accent-color)}.article-body .card-footer h5 svg{stroke:var(--accent-color);width:1.2rem;margin-right:.5rem}.show{opacity:1;pointer-events:all}.hide{opacity:0;pointer-events:none}#article_container{padding:1rem 2rem;width:100%}.select-for-export{padding:.2rem .4rem;border-radius:.1rem}.snippet-selected{-webkit-box-shadow:0 0 0 .1rem var(--accent-color);box-shadow:0 0 0 .1rem var(--accent-color)}.no-transformations{-webkit-transform:none !important;transform:none !important}:-webkit-any-link{color:var(--accent-color);text-decoration:none}:-moz-any-link{color:var(--accent-color);text-decoration:none}:any-link{color:var(--accent-color);text-decoration:none}#sign_in{--backdrop: rgba(var(--foreground-color), 1)}#sign_in h2{margin-bottom:1rem;z-index:3}#sign_in p:first-of-type{margin-bottom:4rem;z-index:3;color:rgba(var(--text-color), 0.8)}#sign_in .back-btn{margin-bottom:2rem;padding-left:0;color:rgba(var(--text-color), 1)}.sign-in-mode__button{height:8rem;width:8rem}.big-icon{fill:none;stroke:rgba(var(--text-color), 1)}#sign_in div:first-of-type{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-bottom:4rem;z-index:3}#sign_in div:first-of-type .icon{height:3rem;width:3rem;stroke-width:4;margin-bottom:1rem;margin-right:0}#sign_in div:first-of-type button{margin:initial;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:.5rem;width:8rem;color:rgba(var(--text-color), 1);background:rgba(var(--foreground), 1)}#sign_in div:first-of-type button:hover{color:var(--accent-color)}#sign_in div:first-of-type button:hover .icon{stroke:var(--accent-color)}#sign_in #priv_key_sign_in{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column wrap;flex-flow:column wrap;z-index:3}#sign_in_button{margin:1rem 0 2rem 0;width:100%;background:rgba(var(--text-color), 0.06);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}#navbar{position:-webkit-sticky;position:sticky;top:0;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:rgba(var(--text-color), 1);background:rgba(var(--foreground-color), 1);padding:1rem;z-index:5}#navbar h5{font-size:.8rem;font-weight:normal;margin-bottom:.2rem}.app-name{font-size:1rem;font-weight:700}#icon{width:2rem;height:2rem;margin:0 .5rem}#export_option_list{gap:1rem;grid-auto-flow:column;margin-right:1rem}.floating-btn{display:none}#loader_container{position:fixed;height:100vh;width:100vw;top:0;background:rgba(var(--foreground-color), 1);-webkit-transition:opacity .6s ease;transition:opacity .6s ease;display:-ms-grid;display:grid;place-content:center;z-index:8;text-align:center}#loader_container #spinner{position:relative;height:2rem;fill:teal;overflow:visible;-ms-grid-column-align:center;justify-self:center;margin-bottom:2rem}#loader_container h4{font-weight:normal;color:rgba(var(--text-color), 1)}#loader_container button{margin:1rem auto auto auto}.pulse .first-orb{-webkit-animation:pulse 1s infinite ease;animation:pulse 1s infinite ease}.pulse .second-orb{-webkit-animation:pulse 1s .1s infinite ease;animation:pulse 1s .1s infinite ease}.pulse .third-orb{-webkit-animation:pulse 1s .2s infinite ease;animation:pulse 1s .2s infinite ease}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);transform:scale(1)}60%{-webkit-transform:scale(1.5);transform:scale(1.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);transform:scale(1)}60%{-webkit-transform:scale(1.5);transform:scale(1.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}.spin svg{-webkit-animation:spin .6s ease infinite;animation:spin .6s ease infinite;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}#section_plot_popup p{margin:1rem 0;font-weight:400}#section_plot_popup details{margin-bottom:1rem;cursor:pointer}#section_plot_popup summary{outline:none}#inc_section{gap:1rem;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}#article_list_popup{--height: 80vh;--min-height: 80vh;--body-padding: 0}#article_list__header{grid-template-columns:auto 1fr}#article_list{display:grid;margin-bottom:1.5rem;list-style:none;grid-template-columns:repeat(auto-fill, minmax(30ch, 1fr))}.article-list__item{width:100%;height:100%;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;font-size:1rem;text-transform:none;text-align:left;font-weight:400;border-radius:.3rem;line-height:1.6;letter-spacing:normal;word-spacing:normal;padding:1rem 1.5rem;color:rgba(var(--text-color), 0.9)}.search__icon{height:1.2rem;width:1.2rem}#article_list__empty-state{width:100%;padding:3rem 0;font-size:1.2rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media screen and (min-width: 640px){sm-popup{--width: 24rem}#sign_in{width:24rem;height:auto;border-radius:.4rem}#edit_article_popup{--width: 32rem}#article__title{width:100%;text-align:center;font-size:2rem}.gallery-name{max-width:40rem}#section_plot_popup{--width: 42rem}#article_list__header{grid-template-columns:auto 1fr auto;padding:1rem 1.5rem}#article_list_popup{--width: 80vw}}@media screen and (min-width: 1920px){.article-body{min-width:20%}}.label{margin-bottom:.4rem;font-weight:500}@media only screen and (max-width: 640px){.hide-on-mobile{display:none}.article-body{min-width:calc(100% - 2em) !important}#export_option_list{position:absolute;top:0;left:0;width:100%;height:100%;padding:.5rem;z-index:2;background:rgba(var(--foreground-color), 1);-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.floating-btn{display:-webkit-box;display:-ms-flexbox;display:flex;margin:2rem;background:rgba(var(--foreground-color), 1);position:fixed;-webkit-box-shadow:.2rem .4rem .6rem rgba(0,0,0,.24),-0.1rem -0.2rem .4rem rgba(0,0,0,.16);box-shadow:.2rem .4rem .6rem rgba(0,0,0,.24),-0.1rem -0.2rem .4rem rgba(0,0,0,.16);z-index:3}.floating-btn button{width:100%}.floating-btn{background:#282828;bottom:0;right:0;border-radius:5rem;overflow:hidden}.floating-btn button{padding:1rem}.floating-btn button .icon{margin-right:0}#article_container{padding:1.5rem 1.5rem 6rem 1.5rem}.navigation-arrows{opacity:0;pointer-events:none}#article_list__header{padding-bottom:1rem}#article_list__search{width:100%;grid-column:1/3}}@media only screen and (max-width: 1280px){.article-body{min-width:50%}.hide-on-medium{display:none}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.gallery{overflow-x:hidden}} \ No newline at end of file +*{padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Inter",sans-serif}:root{font-size:clamp(1rem, 1.2vmax, 1.2rem)}html,body{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color), 1);background:rgba(var(--background-color), 1)}body,body *{--accent-color: #504dff;--accent-color--light: #eeeeff;--text-color: 36, 36, 36;--background-color: 248, 248, 248;--foreground-color: rgb(255, 255, 255);--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: #f3a600;--loan-color: rgb(255, 171, 93);scrollbar-width:thin}body[data-theme=dark],body[data-theme=dark] *{--accent-color: #a3a1ff;--accent-color--light: rgba(142, 140, 255, 0.06);--text-color: 230, 230, 230;--text-color-light: 170, 170, 170;--background-color: 10, 10, 10;--foreground-color: rgb(24, 24, 24);--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: #ffd13a;--loan-color: rgb(255, 232, 170)}body[data-theme=dark] sm-popup::part(popup){background-color:var(--foreground-color)}p,strong{font-size:.9rem;max-width:70ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{-webkit-box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset;box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a{color:var(--accent-color)}button,.button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s;-webkit-tap-highlight-color:transparent;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:.9rem;font-weight:500}.button{white-space:nowrap;padding:.6rem 1rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06);color:rgba(var(--text-color), 0.8);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.button--primary{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-input{font-size:.9rem;--border-radius: 0.3rem;--background: var(--accent-color--light)}sm-button{--padding: 0.7rem 1rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.uppercase{letter-spacing:.05em}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}ul{list-style:none}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.grid{display:grid}.hide{opacity:0;pointer-events:none}.hide-completely{display:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:1.5rem}.h2{font-size:1.2rem}.h3{font-size:1rem}.h4{font-size:.9rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.align-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.text-center{text-align:center}.justify-start{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start}.justify-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.justify-right{margin-left:auto}.align-self-center{-ms-flex-item-align:center;align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.space-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.w-100{width:100%}.interact{position:relative;cursor:pointer;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s;-webkit-tap-highlight-color:transparent}.empty-state{display:grid;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center;width:100%;padding:1.5rem}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)+.empty-state{display:none}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}#confirmation_popup,#prompt_popup{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}button:active,.button:active,.interact:active{-webkit-transform:scale(0.96);transform:scale(0.96)}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{padding:1.5rem}#main_page>section:nth-of-type(1){-ms-flex-line-pack:start;align-content:flex-start}.logo{display:grid;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .3rem;margin-right:1rem}.logo h4{text-transform:capitalize;font-size:.9rem;font-weight:600}.logo .main-logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color), 1);stroke:none}details summary{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}details[open]>summary{margin-bottom:1rem}details[open]>summary .icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}strip-select{--gap: 0;background-color:var(--accent-color--light);border-radius:.3rem}strip-option{font-weight:500;font-size:.8rem;--border-radius: 0;--active-option-color: rgba(var(--background-color), 1);--active-option-background-color: var(--accent-color)}strip-option:first-of-type{--border-radius: 0.3rem 0 0 0.3rem}strip-option:last-of-type{--border-radius: 0 0.3rem 0.3rem 0}sm-select,sm-option{font-size:.9rem}sm-checkbox{--height: 1rem;--width: 1rem;-webkit-tap-highlight-color:transparent}.warning{background-color:khaki;color:rgba(0,0,0,.7);padding:1rem;border-radius:.5rem;line-height:1.5}.page-layout{display:grid;grid-template-columns:1rem minmax(0, 1fr) 1rem}.page-layout>*{grid-column:2/3}.page{height:100%}#main_header{display:grid;gap:1rem;padding:1rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;grid-template-columns:auto 1fr auto auto;grid-column:1/-1;background-color:var(--foreground-color);border-radius:0 0 1rem 1rem;border:solid thin rgba(var(--text-color), 0.16)}.label{font-size:.8rem;color:rgba(var(--text-color), 0.8);margin-bottom:.2rem}.icon--success{fill:var(--green)}.icon--failure,.icon--error{fill:var(--danger-color)}#article_wrapper{justify-self:center;padding:1rem 0;gap:.5rem 0}.heading{display:-webkit-box;display:-ms-flexbox;display:flex}.heading::before{content:"";width:.3rem;height:100%;margin-right:.7rem;border-radius:.5rem;background-color:var(--accent-color)}.section-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;gap:1rem}.content-card{width:min(70ch, 100%);border-radius:.5rem;background-color:var(--foreground-color);border:solid thin rgba(var(--text-color), 0.16)}.content__area{border-radius:inherit;padding:1rem;line-height:1.7;white-space:pre-line;font-size:.9rem !important;color:rgba(var(--text-color), 0.8);background-color:rgba(var(--text-color), 0.02);border-radius:.5rem;-webkit-transition:-webkit-box-shadow .1s;transition:-webkit-box-shadow .1s;transition:box-shadow .1s;transition:box-shadow .1s, -webkit-box-shadow .1s}.content__area:focus-within{outline:none;-webkit-box-shadow:0 0 0 .1rem var(--accent-color) inset;box-shadow:0 0 0 .1rem var(--accent-color) inset}.content__options{gap:1rem;padding:.5rem 1rem;grid-template-columns:auto auto 1fr auto}.actionable-button{padding:.5rem .8rem;background-color:rgba(var(--text-color), 0.1);border-radius:2rem;border:solid thin rgba(var(--text-color), 0.3)}.actionable-button__title{font-size:.8rem;margin-left:.3rem}.formatting-button{padding:.2rem;border-radius:.3rem}.active{background-color:var(--accent-color)}.active .icon{fill:#fff}.quote-template{position:relative;padding:1rem;margin:1rem;background-color:var(--foreground-color);-webkit-box-shadow:0 .5rem 1rem -0.5rem rgba(0,0,0,.1);box-shadow:0 .5rem 1rem -0.5rem rgba(0,0,0,.1);border-radius:.5rem;justify-self:center}.quote-template .icon{fill:var(--accent-color);height:4rem;width:4rem;-webkit-transform:scaleX(-1);transform:scaleX(-1)}.quote-template figcaption{margin-top:.5rem;color:rgba(var(--text-color), 0.8);font-size:.8rem}.quote-template figcaption::before{content:"- "}@media screen and (max-width: 40rem)and (any-hover: none){.cancel-order span{display:none}}@media screen and (max-width: 40rem){sm-button{--padding: 0.9rem 1.6rem}.hide-on-mobile{display:none}}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.h1{font-size:2rem}.h2{font-size:1.8rem}.h3{font-size:1.3rem}.h4{font-size:1rem}.popup__header{padding:1rem 1.5rem 0 .5rem}#confirmation_popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.hide-on-desktop{display:none}}@media screen and (min-width: 72rem){.page-layout{grid-template-columns:1fr 90vw 1fr}}@media screen and (min-width: 120rem){.page-layout{grid-template-columns:1fr 90vw 1fr}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.interact,button{-webkit-transition:background-color .3s,-webkit-transform .3s;transition:background-color .3s,-webkit-transform .3s;transition:background-color .3s,transform .3s;transition:background-color .3s,transform .3s,-webkit-transform .3s}.interact:hover,button:hover{background-color:var(--accent-color--light)}.transaction-card button{opacity:0;-webkit-transition:opacity .3s;transition:opacity .3s}.transaction-card:hover button{opacity:1}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index 854ac07..356a8ab 100644 --- a/css/main.scss +++ b/css/main.scss @@ -1,984 +1,701 @@ -@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap'); - * { - padding: 0; - margin: 0; - -webkit-box-sizing: border-box; - box-sizing: border-box; - font-family: 'Roboto', sans-serif; + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: "Inter", sans-serif; } -html { - scroll-behavior: smooth; + +:root { + font-size: clamp(1rem, 1.2vmax, 1.2rem); +} + +html, +body { + height: 100%; + scroll-behavior: smooth; } body { - --accent-color: #00a566; - --light-shade: rgba(var(--text-color), 0.06); - --text-color: 17, 17, 17; - --text-color-light: 100, 100, 100; - --foreground-color: 255, 255, 255; - --background-color: #efefef; - --error-color: red; - color: rgba(var(--text-color), 1); - height: calc(100%); - font-size: clamp(1rem, 1.2vmax, 3rem); - background: rgba(var(--foreground-color), 1); + &, + * { + --accent-color: #504dff; + --accent-color--light: #eeeeff; + --text-color: 36, 36, 36; + --background-color: 248, 248, 248; + --foreground-color: rgb(255, 255, 255); + --danger-color: rgb(255, 75, 75); + --green: #1cad59; + --yellow: #f3a600; + --loan-color: rgb(255, 171, 93); + scrollbar-width: thin; + } + + color: rgba(var(--text-color), 1); + background: rgba(var(--background-color), 1); } -body[data-theme='dark']{ - --accent-color:#00fa9a; - --text-color: 240, 240, 240; + +body[data-theme="dark"] { + &, + * { + --accent-color: #a3a1ff; + --accent-color--light: rgba(142, 140, 255, 0.06); + --text-color: 230, 230, 230; --text-color-light: 170, 170, 170; - --foreground-color: 20, 20, 20; - --error-color: rgb(255, 106, 106); + --background-color: 10, 10, 10; + --foreground-color: rgb(24, 24, 24); + --danger-color: rgb(255, 106, 106); + --green: #00e676; + --yellow: #ffd13a; + --loan-color: rgb(255, 232, 170); + } + sm-popup::part(popup) { + background-color: var(--foreground-color); + } } -button{ - position: relative; - overflow: hidden; - display: inline-flex; - align-items: center; - border: none; - background: none; - cursor: pointer; - outline: none; - color: inherit; - font-weight: 500; - -webkit-tap-highlight-color: transparent; -} -.button{ - border-radius: 0.2rem; - padding: 0.5rem 0.6rem; -} -.button--primary{ - background: var(--accent-color); - color: rgba(var(--foreground-color), 1); - .icon{ - fill: rgba(var(--foreground-color), 1); - } -} -button:focus-visible{ - outline: rgba(var(--text-color), 1) 0.1rem solid; -} -sm-input, -sm-textarea{ - --border-radius: 0.2rem; - --background: rgba(var(--text-color), 0.06); -} -sm-button{ - --border-radius: 0.2rem; -} -ul{ - list-style: none; -} -.flex{ - display: flex; -} -.grid{ - display: grid; -} -.flow-column{ - grid-auto-flow: column; -} -.gap-1r{ - gap: 1rem; -} -.align-center{ - align-items: center; -} -.justify-right{ - margin-left: auto; -} -.direction-column{ - flex-direction: column; -} -.space-between{ - justify-content: space-between; -} -.full-width{ - width: 100%; -} -.margin-top-1-5{ - margin-top: 1.5rem; -} -.margin-bottom-1-5{ +p, +strong { + font-size: 0.9rem; + max-width: 70ch; + line-height: 1.7; + color: rgba(var(--text-color), 0.8); + + &:not(:last-of-type) { margin-bottom: 1.5rem; -} -.margin-left-0-5{ - margin-left: 0.5rem; -} -.margin-right-0-5{ - margin-right: 0.5rem; -} -.hide{ - opacity: 0; - pointer-events: none; -} -.hide-completely{ - display: none !important; -} -.no-transformations{ - transform: none !important; -} -.overflow-ellipsis{ - width: 100%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} -.ripple{ - position: absolute; - border-radius: 50%; - transform: scale(0); - background: rgba(var(--text-color), 0.16); - pointer-events: none; -} -.interact{ - position: relative; - overflow: hidden; - cursor: pointer; - -webkit-tap-highlight-color: transparent; -} -.observe-empty-state:empty{ - display: none; -} -.observe-empty-state:not(:empty) ~ .empty-state{ - display: none; -} -.icon{ - width: 1.5rem; - height: 1.5rem; - fill: rgba(var(--text-color), 0.9); -} -.icon-only{ - height: 2.6rem; - width: 2.6rem; - padding: 0.6rem; -} -.close-icon{ - padding: 0.3rem; -} -.close-button{ - left: -0.5rem; + } } -.option__icon{ - height: 1.2rem; - width: 1.2rem; - margin-right: 0.8rem; -} -.option__label{ - font-size: 1rem; +a:where([class]) { + color: inherit; + text-decoration: none; + + &:focus-visible { + box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset; + } } -#confirmation_popup, -#prompt_popup { - flex-direction: column; - h4 { - font-weight: 500; - margin-bottom: 0.5rem; +a { + color: var(--accent-color); +} + +button, +.button { + user-select: none; + position: relative; + display: inline-flex; + border: none; + background-color: transparent; + overflow: hidden; + color: inherit; + cursor: pointer; + transition: transform 0.3s; + -webkit-tap-highlight-color: transparent; + align-items: center; + font-size: 0.9rem; + font-weight: 500; +} +.button { + white-space: nowrap; + padding: 0.6rem 1rem; + border-radius: 0.3rem; + background-color: rgba(var(--text-color), 0.06); + color: rgba(var(--text-color), 0.8); + justify-content: center; + &--primary { + background-color: var(--accent-color); + color: rgba(var(--background-color), 1); + } +} + +button:disabled { + opacity: 0.5; +} + +a:any-link:focus-visible { + outline: rgba(var(--text-color), 1) 0.1rem solid; +} + +sm-input { + font-size: 0.9rem; + --border-radius: 0.3rem; + --background: var(--accent-color--light); +} +sm-button { + --padding: 0.7rem 1rem; + &[variant="primary"] { + .icon { + fill: rgba(var(--background-color), 1); } - sm-button{ - margin: 0; - } - .flex { - padding: 0; - margin-top: 1rem; - sm-button:first-of-type { - margin-right: 0.6rem; - margin-left: auto; - } + } + + &[disabled] { + .icon { + fill: rgba(var(--text-color), 0.6); } + } + &.uppercase { + letter-spacing: 0.05em; + } + &.danger { + --background: var(--danger-color); + color: rgba(var(--background-color), 1); + } } -.popup__header{ - padding: 0.5rem 1.5rem 0 1rem; - display: grid; - grid-template-columns: auto 1fr auto; - gap: 0.5rem; - align-items: center; - width: 100%; -} -.popup__header__close{ - padding: 0.5rem; - cursor: pointer; +ul { + list-style: none; } - -h1, -h2, -h3, -h4, -h5 { - font-family: 'Roboto Slab', sans-serif; +.flex { + display: flex; } -p { - line-height: 1.6; -} - -button:focus { - outline: none; -} -button:focus-visible{ - outline: auto; -} - -button:first-of-type { - margin-left: auto; -} - - -button[disabled] { - opacity: 0.5 !important; - cursor: default; - color: rgba(var(--text-color), 1); -} - -textarea { - background: var(--light-shade); - color: rgba(var(--text-color), 1); - padding: 1.5rem; - max-width: 100%; - font-size: 1rem; -} - -.checkbox__label{ - margin-left: 1rem; -} - -.spacer { - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; -} - -.solid-background { - background: var(--background-color); -} - -#context_menu { - display: none; -} - -.article__header { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - width: 100%; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - margin-bottom: 2rem; -} - -#article__title{ - font-size: 1.2rem; -} - -#articles_list__button{ - width: 3rem; - height: 3rem; - margin-left: -0.8rem; - margin-right: 0.5rem; - fill: rgba(var(--text-color), 1); - cursor: pointer; - .icon-only{ - height: 4rem; - width: 4rem; - } -} - -.gallery-name { - padding: 0.2rem 0; - margin: 1rem 0; - font-size: 1.1rem; - color: rgba(var(--text-color), 1); - font-weight: 500; - line-height: 1.5; -} - -.edit-article { - margin-left: auto; -} - -#edit_article_popup label { - font-size: 0.9rem; -} - -#edit_article_popup input:not([type="checkbox"]) { - margin-bottom: 2rem; - margin-top: 0.5rem; - width: 100%; -} - -#edit_section_container { - gap: 1.5rem; - padding: 1rem 0; -} - -.gallery-container { - position: relative; - overflow: hidden; -} - -.navigation-arrows { - -webkit-transition: opacity 0.2s ease; - transition: opacity 0.2s ease; - cursor: pointer; - padding: 1rem; - height: 4rem; - width: 4rem; - z-index: 2; - position: absolute; - top: 50%; - fill: rgba(var(--text-color), 1); - transition: transform 0.3s; - background: rgba(var(--foreground-color), 0.9); - box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.16); -} - -.navigation-arrows:nth-of-type(1) { - border-radius: 0 50% 50% 0; - transform: translate(-1rem, -50%); - &:hover{ - transform: translate(0, -50%); - } -} - -.navigation-arrows:nth-of-type(2) { - right: 0; - border-radius: 50% 0 0 50%; - transform: translate(1rem, -50%); - &:hover{ - transform: translate(0, -50%); - } -} - -.gallery { - position: relative; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - overflow-x: auto; - -ms-scroll-snap-type: x mandatory; - scroll-snap-type: x mandatory; - margin-bottom: 4rem !important; -} - -.article-body { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - scroll-snap-align: start; - min-width: 30%; - background-color: rgba(var(--text-color), 0.06); - color: rgba(var(--text-color), 1); - margin: 0 1rem 1rem 0; - border-radius: 0.2rem; -} - -.article-body .article-header { - padding: 1.5rem; - word-break: break-all; -} - -.article__author { - display: inline-flex; - font-weight: normal; - font-size: 0.8rem; - color: #a7c5eb; -} - -.article-body .card-body { - position: relative; - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; -} - -.article-body .card-body .content-div { - padding: 0 1.5rem 4rem 1.5rem; - min-height: 16rem; - line-height: 1.7; - max-height: 50vh; - overflow-y: auto; - font-weight: 400; - overflow-wrap: break-word; -} - -.article-body .card-body .content-div * { - overflow-wrap: break-word; -} - -.article-body .card-body button { - position: absolute; - bottom: 0; - right: 0; - margin-right: 1rem; -} - -.article-body .card-body .submit-btn { - background: var(--light-shade); -} - -.article-body .card-footer { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - padding: 1rem 1.5rem; -} - -.article-body .card-footer h5 { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - font-weight: normal; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - color: var(--accent-color); - cursor: pointer; -} - -.article-body .card-footer h5:nth-of-type(2) { - margin-left: auto; -} - -.article-body .card-footer h5:nth-of-type(2):hover svg { - fill: var(--accent-color); -} - -.article-body .card-footer h5 svg { - stroke: var(--accent-color); - width: 1.2rem; - margin-right: 0.5rem; -} - -.show { - opacity: 1; - pointer-events: all; +.grid { + display: grid; } .hide { - opacity: 0; - pointer-events: none; + opacity: 0; + pointer-events: none; } -#article_container { - padding: 1rem 2rem; - width: 100%; +.hide-completely { + display: none !important; } -.select-for-export{ - padding: 0.2rem 0.4rem; - border-radius: 0.1rem; +.overflow-ellipsis { + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } -.snippet-selected { - box-shadow: 0 0 0 0.1rem var(--accent-color); +.breakable { + overflow-wrap: break-word; + word-wrap: break-word; + -ms-word-break: break-all; + word-break: break-word; + -ms-hyphens: auto; + -moz-hyphens: auto; + -webkit-hyphens: auto; + hyphens: auto; } -.no-transformations { - -webkit-transform: none !important; - transform: none !important; +.full-bleed { + grid-column: 1/4; } -:-webkit-any-link { - color: var(--accent-color); - text-decoration: none; +.h1 { + font-size: 1.5rem; } -:-moz-any-link { - color: var(--accent-color); - text-decoration: none; +.h2 { + font-size: 1.2rem; } -:any-link { - color: var(--accent-color); - text-decoration: none; +.h3 { + font-size: 1rem; } -#sign_in { - --backdrop: rgba(var(--foreground-color), 1); +.h4 { + font-size: 0.9rem; } -#sign_in h2 { - margin-bottom: 1rem; - z-index: 3; +.h5 { + font-size: 0.8rem; } -#sign_in p:first-of-type { - margin-bottom: 4rem; - z-index: 3; - color: rgba(var(--text-color), 0.8); +.uppercase { + text-transform: uppercase; } -#sign_in .back-btn { - margin-bottom: 2rem; - padding-left: 0; - color: rgba(var(--text-color), 1); -} -.sign-in-mode__button{ - height: 8rem; - width: 8rem; -} -.big-icon{ - fill: none; - stroke: rgba(var(--text-color), 1); +.capitalize { + text-transform: capitalize; } -#sign_in div:first-of-type { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - margin-bottom: 4rem; - z-index: 3; +.flex { + display: flex; } -#sign_in div:first-of-type .icon { - height: 3rem; - width: 3rem; - stroke-width: 4; - margin-bottom: 1rem; - margin-right: 0; +.grid { + display: grid; } -#sign_in div:first-of-type button { - margin: initial; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - text-align: center; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - margin: 0.5rem; - width: 8rem; - color: rgba(var(--text-color), 1); - background: rgba(var(--foreground), 1); +.grid-3 { + grid-template-columns: 1fr auto auto; } -#sign_in div:first-of-type button:hover { - color: var(--accent-color); +.flow-column { + grid-auto-flow: column; } -#sign_in div:first-of-type button:hover .icon { - stroke: var(--accent-color); +.gap-0-5 { + gap: 0.5rem; } -#sign_in #priv_key_sign_in { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-flow: column wrap; - flex-flow: column wrap; - z-index: 3; +.gap-1 { + gap: 1rem; } - -#sign_in_button{ - margin: 1rem 0 2rem 0; - width: 100%; - background: rgba(var(--text-color), 0.06); - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; +.gap-1-5 { + gap: 1.5rem; } -#navbar { - position: sticky; - top: 0; - width: 100%; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - color: rgba(var(--text-color), 1); - background: rgba(var(--foreground-color), 1); - padding: 1rem; - z-index: 5; +.gap-2 { + gap: 2rem; } -#navbar h5 { - font-size: 0.8rem; - font-weight: normal; - margin-bottom: 0.2rem; +.gap-3 { + gap: 3rem; } -.app-name{ - font-size: 1rem; - font-weight: 700; +.text-align-right { + text-align: right; } -#icon { - width: 2rem; - height: 2rem; - margin: 0 0.5rem; +.align-start { + align-items: flex-start; } -#export_option_list{ - gap: 1rem; - grid-auto-flow: column; - margin-right: 1rem; +.align-center { + align-items: center; } -.floating-btn { - display: none; +.text-center { + text-align: center; } -#loader_container { - position: fixed; - height: 100vh; - width: 100vw; - top: 0; - background: rgba(var(--foreground-color), 1); - -webkit-transition: opacity 0.6s ease; - transition: opacity 0.6s ease; - display: -ms-grid; - display: grid; - place-content: center; - z-index: 8; - text-align: center; +.justify-start { + justify-content: start; } -#loader_container #spinner { - position: relative; - height: 2rem; - fill: teal; - overflow: visible; - -ms-grid-column-align: center; - justify-self: center; - margin-bottom: 2rem; +.justify-center { + justify-content: center; } -#loader_container h4 { - font-weight: normal; - color: rgba(var(--text-color), 1); +.justify-right { + margin-left: auto; } -#loader_container button { - margin: 1rem auto auto auto; +.align-self-center { + align-self: center; } -.pulse .first-orb { - -webkit-animation: pulse 1s infinite ease; - animation: pulse 1s infinite ease; +.justify-self-center { + justify-self: center; } -.pulse .second-orb { - -webkit-animation: pulse 1s 0.1s infinite ease; - animation: pulse 1s 0.1s infinite ease; +.justify-self-start { + justify-self: start; } -.pulse .third-orb { - -webkit-animation: pulse 1s 0.2s infinite ease; - animation: pulse 1s 0.2s infinite ease; +.justify-self-end { + justify-self: end; } -@-webkit-keyframes pulse { - 0% { - -webkit-transform: scale(1); - transform: scale(1); - } - - 60% { - -webkit-transform: scale(1.5); - transform: scale(1.5); - } - - 100% { - -webkit-transform: scale(1); - transform: scale(1); - } +.direction-column { + flex-direction: column; } -@keyframes pulse { - 0% { - -webkit-transform: scale(1); - transform: scale(1); - } - - 60% { - -webkit-transform: scale(1.5); - transform: scale(1.5); - } - - 100% { - -webkit-transform: scale(1); - transform: scale(1); - } +.space-between { + justify-content: space-between; } -.spin svg { - -webkit-animation: spin 0.6s ease infinite; - animation: spin 0.6s ease infinite; - -webkit-transform-origin: center; - transform-origin: center; +.w-100 { + width: 100%; } -@-webkit-keyframes spin { - 0% { - -webkit-transform: rotate(0); - transform: rotate(0); - } - - 100% { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); - } +.interact { + position: relative; + cursor: pointer; + transition: transform 0.3s; + -webkit-tap-highlight-color: transparent; +} +.empty-state { + display: grid; + justify-content: center; + text-align: center; + width: 100%; + padding: 1.5rem; } -@keyframes spin { - 0% { - -webkit-transform: rotate(0); - transform: rotate(0); - } - - 100% { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); - } +.observe-empty-state:empty { + display: none; } -#section_plot_popup p { - margin: 1rem 0; - font-weight: 400; +.observe-empty-state:not(:empty) + .empty-state { + display: none; } -#section_plot_popup details { - margin-bottom: 1rem; - cursor: pointer; +.icon { + width: 1.2rem; + height: 1.2rem; + fill: rgba(var(--text-color), 0.8); } -#section_plot_popup summary { - outline: none; +.button__icon { + height: 1.2rem; + width: 1.2rem; + + &--left { + margin-right: 0.5rem; + } + + &--right { + margin-left: 0.5rem; + } } -#scoring_popup{ - +.icon-button { + padding: 0.6rem; + border-radius: 0.8rem; + background-color: var(--accent-color--light); + height: max-content; + .icon { + fill: var(--accent-color); + } } - -#inc_section{ - gap: 1rem; - justify-content: flex-start; -} - - -#article_list_popup { - --height: 80vh; - --min-height: 80vh; - --body-padding: 0; -} - -#article_list__header{ - grid-template-columns: auto 1fr; -} - -#article_list{ - display: grid; - margin-bottom: 1.5rem; - list-style: none; - grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr)); -} - -.article-list__item{ - width: 100%; - height: 100%; - align-items: flex-start; - font-size: 1rem; - text-transform: none; - text-align: left; - font-weight: 400; - border-radius: 0.3rem; - line-height: 1.6; - letter-spacing: normal; - word-spacing: normal; - padding: 1rem 1.5rem; - color: rgba(var(--text-color), 0.9); -} - -.search__icon{ - height: 1.2rem; - width: 1.2rem; -} - -#article_list__empty-state{ - width: 100%; - padding: 3rem 0; - font-size: 1.2rem; - justify-content: center; -} - -@media screen and (min-width: 640px) { - sm-popup{ - --width: 24rem; - } - #sign_in { - width: 24rem; - height: auto; - border-radius: 0.4rem; - } - #edit_article_popup{ - --width: 32rem; - } - - #article__title{ - width: 100%; - text-align: center; - font-size: 2rem; - } - - .gallery-name { - max-width: 40rem; - } - - #section_plot_popup { - --width: 42rem; - } - - - #article_list__header{ - grid-template-columns: auto 1fr auto; - padding: 1rem 1.5rem; - } - #article_list_popup { - --width: 80vw; - } -} - -@media screen and (min-width: 1920px) { - .article-body { - min-width: 20%; - } -} -.label { - margin-bottom: 0.4rem; +#confirmation_popup, +#prompt_popup { + flex-direction: column; + h4 { font-weight: 500; + margin-bottom: 0.5rem; + } + sm-button { + margin: 0; + } + .flex { + padding: 0; + margin-top: 1rem; + sm-button:first-of-type { + margin-right: 0.6rem; + margin-left: auto; + } + } +} +#prompt_message { + margin-bottom: 1.5rem; } -@media only screen and (max-width: 640px) { - .hide-on-mobile { - display: none; - } - - .article-body { - min-width: calc(100% - 2em) !important; - } - - #export_option_list{ - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - padding: 0.5rem; - z-index: 2; - background: rgba(var(--foreground-color), 1); - justify-content: space-between; - } - - .floating-btn { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - margin: 2rem; - background: rgba(var(--foreground-color), 1); - position: fixed; - -webkit-box-shadow: 0.2rem 0.4rem 0.6rem rgba(0, 0, 0, 0.24), -0.1rem -0.2rem 0.4rem rgba(0, 0, 0, 0.16); - box-shadow: 0.2rem 0.4rem 0.6rem rgba(0, 0, 0, 0.24), -0.1rem -0.2rem 0.4rem rgba(0, 0, 0, 0.16); - z-index: 3; - } - - .floating-btn button { - width: 100%; - } - - .floating-btn { - background: #282828; - bottom: 0; - right: 0; - border-radius: 5rem; - overflow: hidden; - } - - .floating-btn button { - padding: 1rem; - } - - .floating-btn button .icon { - margin-right: 0; - } - - - #article_container { - padding: 1.5rem 1.5rem 6rem 1.5rem; - } - - .navigation-arrows { - opacity: 0; - pointer-events: none; - } - - #article_list__header{ - padding-bottom: 1rem; - } - #article_list__search{ - width: 100%; - grid-column: 1/3; - } +button:active, +.button:active, +.interact:active { + transform: scale(0.96); } -@media only screen and (max-width: 1280px) { - .article-body { - min-width: 50%; - } - - .hide-on-medium { - display: none; - } +.popup__header { + display: grid; + gap: 0.5rem; + width: 100%; + padding: 0 1.5rem 0 0.5rem; + align-items: center; + grid-template-columns: auto 1fr auto; } -@media (any-hover: hover){ - ::-webkit-scrollbar{ - width: 0.5rem; - height: 0.5rem; +.popup__header__close { + padding: 0.5rem; + cursor: pointer; +} + +#main_page { + padding: 1.5rem; + + & > section:nth-of-type(1) { + align-content: flex-start; + } +} +.logo { + display: grid; + align-items: center; + width: 100%; + grid-template-columns: auto 1fr; + gap: 0 0.3rem; + margin-right: 1rem; + + h4 { + text-transform: capitalize; + font-size: 0.9rem; + font-weight: 600; + } + + .main-logo { + height: 1.4rem; + width: 1.4rem; + fill: rgba(var(--text-color), 1); + stroke: none; + } +} +details { + summary { + display: flex; + justify-content: space-between; + user-select: none; + cursor: pointer; + } + + &[open] > summary { + margin-bottom: 1rem; + .icon { + transform: rotate(180deg); } - - ::-webkit-scrollbar-thumb{ - background: rgba(var(--text-color), 0.3); - border-radius: 1rem; - &:hover{ - background: rgba(var(--text-color), 0.5); - } + } +} +strip-select { + --gap: 0; + background-color: var(--accent-color--light); + border-radius: 0.3rem; +} +strip-option { + font-weight: 500; + font-size: 0.8rem; + --border-radius: 0; + --active-option-color: rgba(var(--background-color), 1); + --active-option-background-color: var(--accent-color); + &:first-of-type { + --border-radius: 0.3rem 0 0 0.3rem; + } + &:last-of-type { + --border-radius: 0 0.3rem 0.3rem 0; + } +} +sm-select, +sm-option { + font-size: 0.9rem; +} +sm-checkbox { + --height: 1rem; + --width: 1rem; + -webkit-tap-highlight-color: transparent; +} +.warning { + background-color: khaki; + color: rgba(0, 0, 0, 0.7); + padding: 1rem; + border-radius: 0.5rem; + line-height: 1.5; +} +.page-layout { + display: grid; + grid-template-columns: 1rem minmax(0, 1fr) 1rem; + & > * { + grid-column: 2/3; + } +} +.page { + height: 100%; +} + +#main_header { + display: grid; + gap: 1rem; + padding: 1rem; + align-items: center; + grid-template-columns: auto 1fr auto auto; + grid-column: 1/-1; + background-color: var(--foreground-color); + border-radius: 0 0 1rem 1rem; + border: solid thin rgba(var(--text-color), 0.16); +} + +.label { + font-size: 0.8rem; + color: rgba(var(--text-color), 0.8); + margin-bottom: 0.2rem; +} +.icon--success { + fill: var(--green); +} +.icon--failure, +.icon--error { + fill: var(--danger-color); +} + +#article_wrapper { + justify-self: center; + padding: 1rem 0; + gap: 0.5rem 0; +} + +.heading { + display: flex; + &::before { + content: ""; + width: 0.3rem; + height: 100%; + margin-right: 0.7rem; + border-radius: 0.5rem; + background-color: var(--accent-color); + } +} + +.section-wrapper { + display: flex; + gap: 1rem; +} + +.content-card { + width: min(70ch, 100%); + border-radius: 0.5rem; + background-color: var(--foreground-color); + border: solid thin rgba(var(--text-color), 0.16); +} +.content__area { + border-radius: inherit; + padding: 1rem; + line-height: 1.7; + white-space: pre-line; + font-size: 0.9rem !important; + color: rgba(var(--text-color), 0.8); + background-color: rgba(var(--text-color), 0.02); + border-radius: 0.5rem; + transition: box-shadow 0.1s; + &:focus-within { + outline: none; + box-shadow: 0 0 0 0.1rem var(--accent-color) inset; + } +} +.content__options { + gap: 1rem; + padding: 0.5rem 1rem; + grid-template-columns: auto auto 1fr auto; +} + +.actionable-button { + padding: 0.5rem 0.8rem; + background-color: rgba(var(--text-color), 0.1); + border-radius: 2rem; + border: solid thin rgba(var(--text-color), 0.3); + &__title { + font-size: 0.8rem; + margin-left: 0.3rem; + } +} +.formatting-button { + padding: 0.2rem; + border-radius: 0.3rem; +} +.active { + background-color: var(--accent-color); + .icon { + fill: white; + } +} + +.quote-template { + position: relative; + padding: 1rem; + margin: 1rem; + background-color: var(--foreground-color); + box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.1); + border-radius: 0.5rem; + justify-self: center; + .icon { + fill: var(--accent-color); + height: 4rem; + width: 4rem; + transform: scaleX(-1); + } + .quote { + } + figcaption { + margin-top: 0.5rem; + color: rgba(var(--text-color), 0.8); + font-size: 0.8rem; + &::before { + content: "- "; } - .gallery { - overflow-x: hidden; + } +} + +@media screen and (max-width: 40rem) and (any-hover: none) { + .cancel-order { + span { + display: none; } -} \ No newline at end of file + } +} +@media screen and (max-width: 40rem) { + sm-button { + --padding: 0.9rem 1.6rem; + } + .hide-on-mobile { + display: none; + } +} +@media screen and (min-width: 40rem) { + sm-popup { + --width: 24rem; + } + .h1 { + font-size: 2rem; + } + + .h2 { + font-size: 1.8rem; + } + + .h3 { + font-size: 1.3rem; + } + + .h4 { + font-size: 1rem; + } + .popup__header { + padding: 1rem 1.5rem 0 0.5rem; + } + #confirmation_popup { + --width: 24rem; + } + .page-layout { + grid-template-columns: 1fr 90vw 1fr; + } + .hide-on-desktop { + display: none; + } +} +@media screen and (min-width: 48rem) { +} +@media screen and (max-width: 64rem) { +} +@media screen and (min-width: 72rem) { + .page-layout { + grid-template-columns: 1fr 90vw 1fr; + } +} +@media screen and (min-width: 120rem) { + .page-layout { + grid-template-columns: 1fr 90vw 1fr; + } +} +@media (any-hover: hover) { + ::-webkit-scrollbar { + width: 0.5rem; + height: 0.5rem; + } + + ::-webkit-scrollbar-thumb { + background: rgba(var(--text-color), 0.3); + border-radius: 1rem; + + &:hover { + background: rgba(var(--text-color), 0.5); + } + } + .interact, + button { + transition: background-color 0.3s, transform 0.3s; + &:hover { + background-color: var(--accent-color--light); + } + } + .transaction-card { + button { + opacity: 0; + transition: opacity 0.3s; + } + &:hover button { + opacity: 1; + } + } +} diff --git a/index.html b/index.html index 5f2e1d3..2cd29f8 100644 --- a/index.html +++ b/index.html @@ -1,237 +1,17 @@ - + - Content Collaboration - - - + + + CC + - - - - - -

-

-
- Cancel - OK -
- - -

-

- -
- Cancel - OK -
- - - -
- -

Sign In

-
-

Welcome to Content Collaboration.
- Please enter your FLO private key to continue. -

-
- - -
-
- - continue -
-

Don't have a private key? get it here
or you can sign as guest.

- - -
- -

Update score

-
- -
- + 0.1 - + 1 - + 5 -
-
- Update -
- - -
- -

All Articles

- - - -
- -
    -
    - No articles found -
    -     -
    -
    -
    - - - - -
    - - - - - - - -

    - Logout - Back -
    - -
    -
    -
    - - + + + + - - + - - - - - - - - - - \ No newline at end of file diff --git a/purify.min.js b/purify.min.js new file mode 100644 index 0000000..375bd27 --- /dev/null +++ b/purify.min.js @@ -0,0 +1,3 @@ +/*! @license DOMPurify 2.3.3 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/2.3.3/LICENSE */ +!function (e, t) { "object" == typeof exports && "undefined" != typeof module ? module.exports = t() : "function" == typeof define && define.amd ? define(t) : (e = e || self).DOMPurify = t() }(this, (function () { "use strict"; var e = Object.hasOwnProperty, t = Object.setPrototypeOf, n = Object.isFrozen, r = Object.getPrototypeOf, o = Object.getOwnPropertyDescriptor, i = Object.freeze, a = Object.seal, l = Object.create, c = "undefined" != typeof Reflect && Reflect, s = c.apply, u = c.construct; s || (s = function (e, t, n) { return e.apply(t, n) }), i || (i = function (e) { return e }), a || (a = function (e) { return e }), u || (u = function (e, t) { return new (Function.prototype.bind.apply(e, [null].concat(function (e) { if (Array.isArray(e)) { for (var t = 0, n = Array(e.length); t < e.length; t++)n[t] = e[t]; return n } return Array.from(e) }(t)))) }); var m, f = x(Array.prototype.forEach), d = x(Array.prototype.pop), p = x(Array.prototype.push), h = x(String.prototype.toLowerCase), g = x(String.prototype.match), y = x(String.prototype.replace), v = x(String.prototype.indexOf), b = x(String.prototype.trim), T = x(RegExp.prototype.test), A = (m = TypeError, function () { for (var e = arguments.length, t = Array(e), n = 0; n < e; n++)t[n] = arguments[n]; return u(m, t) }); function x(e) { return function (t) { for (var n = arguments.length, r = Array(n > 1 ? n - 1 : 0), o = 1; o < n; o++)r[o - 1] = arguments[o]; return s(e, t, r) } } function S(e, r) { t && t(e, null); for (var o = r.length; o--;) { var i = r[o]; if ("string" == typeof i) { var a = h(i); a !== i && (n(r) || (r[o] = a), i = a) } e[i] = !0 } return e } function w(t) { var n = l(null), r = void 0; for (r in t) s(e, t, [r]) && (n[r] = t[r]); return n } function E(e, t) { for (; null !== e;) { var n = o(e, t); if (n) { if (n.get) return x(n.get); if ("function" == typeof n.value) return x(n.value) } e = r(e) } return function (e) { return console.warn("fallback value for", e), null } } var R = i(["a", "abbr", "acronym", "address", "area", "article", "aside", "audio", "b", "bdi", "bdo", "big", "blink", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "content", "data", "datalist", "dd", "decorator", "del", "details", "dfn", "dialog", "dir", "div", "dl", "dt", "element", "em", "fieldset", "figcaption", "figure", "font", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "img", "input", "ins", "kbd", "label", "legend", "li", "main", "map", "mark", "marquee", "menu", "menuitem", "meter", "nav", "nobr", "ol", "optgroup", "option", "output", "p", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "section", "select", "shadow", "small", "source", "spacer", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "tr", "track", "tt", "u", "ul", "var", "video", "wbr"]), _ = i(["svg", "a", "altglyph", "altglyphdef", "altglyphitem", "animatecolor", "animatemotion", "animatetransform", "circle", "clippath", "defs", "desc", "ellipse", "filter", "font", "g", "glyph", "glyphref", "hkern", "image", "line", "lineargradient", "marker", "mask", "metadata", "mpath", "path", "pattern", "polygon", "polyline", "radialgradient", "rect", "stop", "style", "switch", "symbol", "text", "textpath", "title", "tref", "tspan", "view", "vkern"]), N = i(["feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence"]), D = i(["animate", "color-profile", "cursor", "discard", "fedropshadow", "font-face", "font-face-format", "font-face-name", "font-face-src", "font-face-uri", "foreignobject", "hatch", "hatchpath", "mesh", "meshgradient", "meshpatch", "meshrow", "missing-glyph", "script", "set", "solidcolor", "unknown", "use"]), k = i(["math", "menclose", "merror", "mfenced", "mfrac", "mglyph", "mi", "mlabeledtr", "mmultiscripts", "mn", "mo", "mover", "mpadded", "mphantom", "mroot", "mrow", "ms", "mspace", "msqrt", "mstyle", "msub", "msup", "msubsup", "mtable", "mtd", "mtext", "mtr", "munder", "munderover"]), O = i(["maction", "maligngroup", "malignmark", "mlongdiv", "mscarries", "mscarry", "msgroup", "mstack", "msline", "msrow", "semantics", "annotation", "annotation-xml", "mprescripts", "none"]), M = i(["#text"]), L = i(["accept", "action", "align", "alt", "autocapitalize", "autocomplete", "autopictureinpicture", "autoplay", "background", "bgcolor", "border", "capture", "cellpadding", "cellspacing", "checked", "cite", "class", "clear", "color", "cols", "colspan", "controls", "controlslist", "coords", "crossorigin", "datetime", "decoding", "default", "dir", "disabled", "disablepictureinpicture", "disableremoteplayback", "download", "draggable", "enctype", "enterkeyhint", "face", "for", "headers", "height", "hidden", "high", "href", "hreflang", "id", "inputmode", "integrity", "ismap", "kind", "label", "lang", "list", "loading", "loop", "low", "max", "maxlength", "media", "method", "min", "minlength", "multiple", "muted", "name", "noshade", "novalidate", "nowrap", "open", "optimum", "pattern", "placeholder", "playsinline", "poster", "preload", "pubdate", "radiogroup", "readonly", "rel", "required", "rev", "reversed", "role", "rows", "rowspan", "spellcheck", "scope", "selected", "shape", "size", "sizes", "span", "srclang", "start", "src", "srcset", "step", "style", "summary", "tabindex", "title", "translate", "type", "usemap", "valign", "value", "width", "xmlns", "slot"]), F = i(["accent-height", "accumulate", "additive", "alignment-baseline", "ascent", "attributename", "attributetype", "azimuth", "basefrequency", "baseline-shift", "begin", "bias", "by", "class", "clip", "clippathunits", "clip-path", "clip-rule", "color", "color-interpolation", "color-interpolation-filters", "color-profile", "color-rendering", "cx", "cy", "d", "dx", "dy", "diffuseconstant", "direction", "display", "divisor", "dur", "edgemode", "elevation", "end", "fill", "fill-opacity", "fill-rule", "filter", "filterunits", "flood-color", "flood-opacity", "font-family", "font-size", "font-size-adjust", "font-stretch", "font-style", "font-variant", "font-weight", "fx", "fy", "g1", "g2", "glyph-name", "glyphref", "gradientunits", "gradienttransform", "height", "href", "id", "image-rendering", "in", "in2", "k", "k1", "k2", "k3", "k4", "kerning", "keypoints", "keysplines", "keytimes", "lang", "lengthadjust", "letter-spacing", "kernelmatrix", "kernelunitlength", "lighting-color", "local", "marker-end", "marker-mid", "marker-start", "markerheight", "markerunits", "markerwidth", "maskcontentunits", "maskunits", "max", "mask", "media", "method", "mode", "min", "name", "numoctaves", "offset", "operator", "opacity", "order", "orient", "orientation", "origin", "overflow", "paint-order", "path", "pathlength", "patterncontentunits", "patterntransform", "patternunits", "points", "preservealpha", "preserveaspectratio", "primitiveunits", "r", "rx", "ry", "radius", "refx", "refy", "repeatcount", "repeatdur", "restart", "result", "rotate", "scale", "seed", "shape-rendering", "specularconstant", "specularexponent", "spreadmethod", "startoffset", "stddeviation", "stitchtiles", "stop-color", "stop-opacity", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke", "stroke-width", "style", "surfacescale", "systemlanguage", "tabindex", "targetx", "targety", "transform", "text-anchor", "text-decoration", "text-rendering", "textlength", "type", "u1", "u2", "unicode", "values", "viewbox", "visibility", "version", "vert-adv-y", "vert-origin-x", "vert-origin-y", "width", "word-spacing", "wrap", "writing-mode", "xchannelselector", "ychannelselector", "x", "x1", "x2", "xmlns", "y", "y1", "y2", "z", "zoomandpan"]), I = i(["accent", "accentunder", "align", "bevelled", "close", "columnsalign", "columnlines", "columnspan", "denomalign", "depth", "dir", "display", "displaystyle", "encoding", "fence", "frame", "height", "href", "id", "largeop", "length", "linethickness", "lspace", "lquote", "mathbackground", "mathcolor", "mathsize", "mathvariant", "maxsize", "minsize", "movablelimits", "notation", "numalign", "open", "rowalign", "rowlines", "rowspacing", "rowspan", "rspace", "rquote", "scriptlevel", "scriptminsize", "scriptsizemultiplier", "selection", "separator", "separators", "stretchy", "subscriptshift", "supscriptshift", "symmetric", "voffset", "width", "xmlns"]), C = i(["xlink:href", "xml:id", "xlink:title", "xml:space", "xmlns:xlink"]), z = a(/\{\{[\s\S]*|[\s\S]*\}\}/gm), H = a(/<%[\s\S]*|[\s\S]*%>/gm), U = a(/^data-[\-\w.\u00B7-\uFFFF]/), P = a(/^aria-[\-\w]+$/), j = a(/^(?:(?:(?:f|ht)tps?|mailto|tel|callto|cid|xmpp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i), B = a(/^(?:\w+script|data):/i), W = a(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g), G = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (e) { return typeof e } : function (e) { return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e }; function q(e) { if (Array.isArray(e)) { for (var t = 0, n = Array(e.length); t < e.length; t++)n[t] = e[t]; return n } return Array.from(e) } var Y = function () { return "undefined" == typeof window ? null : window }, K = function (e, t) { if ("object" !== (void 0 === e ? "undefined" : G(e)) || "function" != typeof e.createPolicy) return null; var n = null, r = "data-tt-policy-suffix"; t.currentScript && t.currentScript.hasAttribute(r) && (n = t.currentScript.getAttribute(r)); var o = "dompurify" + (n ? "#" + n : ""); try { return e.createPolicy(o, { createHTML: function (e) { return e } }) } catch (e) { return console.warn("TrustedTypes policy " + o + " could not be created."), null } }; return function e() { var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : Y(), n = function (t) { return e(t) }; if (n.version = "2.3.3", n.removed = [], !t || !t.document || 9 !== t.document.nodeType) return n.isSupported = !1, n; var r = t.document, o = t.document, a = t.DocumentFragment, l = t.HTMLTemplateElement, c = t.Node, s = t.Element, u = t.NodeFilter, m = t.NamedNodeMap, x = void 0 === m ? t.NamedNodeMap || t.MozNamedAttrMap : m, V = t.Text, X = t.Comment, $ = t.DOMParser, Z = t.trustedTypes, J = s.prototype, Q = E(J, "cloneNode"), ee = E(J, "nextSibling"), te = E(J, "childNodes"), ne = E(J, "parentNode"); if ("function" == typeof l) { var re = o.createElement("template"); re.content && re.content.ownerDocument && (o = re.content.ownerDocument) } var oe = K(Z, r), ie = oe && ze ? oe.createHTML("") : "", ae = o, le = ae.implementation, ce = ae.createNodeIterator, se = ae.createDocumentFragment, ue = ae.getElementsByTagName, me = r.importNode, fe = {}; try { fe = w(o).documentMode ? o.documentMode : {} } catch (e) { } var de = {}; n.isSupported = "function" == typeof ne && le && void 0 !== le.createHTMLDocument && 9 !== fe; var pe = z, he = H, ge = U, ye = P, ve = B, be = W, Te = j, Ae = null, xe = S({}, [].concat(q(R), q(_), q(N), q(k), q(M))), Se = null, we = S({}, [].concat(q(L), q(F), q(I), q(C))), Ee = null, Re = null, _e = !0, Ne = !0, De = !1, ke = !1, Oe = !1, Me = !1, Le = !1, Fe = !1, Ie = !1, Ce = !0, ze = !1, He = !0, Ue = !0, Pe = !1, je = {}, Be = null, We = S({}, ["annotation-xml", "audio", "colgroup", "desc", "foreignobject", "head", "iframe", "math", "mi", "mn", "mo", "ms", "mtext", "noembed", "noframes", "noscript", "plaintext", "script", "style", "svg", "template", "thead", "title", "video", "xmp"]), Ge = null, qe = S({}, ["audio", "video", "img", "source", "image", "track"]), Ye = null, Ke = S({}, ["alt", "class", "for", "id", "label", "name", "pattern", "placeholder", "role", "summary", "title", "value", "style", "xmlns"]), Ve = "http://www.w3.org/1998/Math/MathML", Xe = "http://www.w3.org/2000/svg", $e = "http://www.w3.org/1999/xhtml", Ze = $e, Je = !1, Qe = void 0, et = ["application/xhtml+xml", "text/html"], tt = "text/html", nt = void 0, rt = null, ot = o.createElement("form"), it = function (e) { rt && rt === e || (e && "object" === (void 0 === e ? "undefined" : G(e)) || (e = {}), e = w(e), Ae = "ALLOWED_TAGS" in e ? S({}, e.ALLOWED_TAGS) : xe, Se = "ALLOWED_ATTR" in e ? S({}, e.ALLOWED_ATTR) : we, Ye = "ADD_URI_SAFE_ATTR" in e ? S(w(Ke), e.ADD_URI_SAFE_ATTR) : Ke, Ge = "ADD_DATA_URI_TAGS" in e ? S(w(qe), e.ADD_DATA_URI_TAGS) : qe, Be = "FORBID_CONTENTS" in e ? S({}, e.FORBID_CONTENTS) : We, Ee = "FORBID_TAGS" in e ? S({}, e.FORBID_TAGS) : {}, Re = "FORBID_ATTR" in e ? S({}, e.FORBID_ATTR) : {}, je = "USE_PROFILES" in e && e.USE_PROFILES, _e = !1 !== e.ALLOW_ARIA_ATTR, Ne = !1 !== e.ALLOW_DATA_ATTR, De = e.ALLOW_UNKNOWN_PROTOCOLS || !1, ke = e.SAFE_FOR_TEMPLATES || !1, Oe = e.WHOLE_DOCUMENT || !1, Fe = e.RETURN_DOM || !1, Ie = e.RETURN_DOM_FRAGMENT || !1, Ce = !1 !== e.RETURN_DOM_IMPORT, ze = e.RETURN_TRUSTED_TYPE || !1, Le = e.FORCE_BODY || !1, He = !1 !== e.SANITIZE_DOM, Ue = !1 !== e.KEEP_CONTENT, Pe = e.IN_PLACE || !1, Te = e.ALLOWED_URI_REGEXP || Te, Ze = e.NAMESPACE || $e, Qe = Qe = -1 === et.indexOf(e.PARSER_MEDIA_TYPE) ? tt : e.PARSER_MEDIA_TYPE, nt = "application/xhtml+xml" === Qe ? function (e) { return e } : h, ke && (Ne = !1), Ie && (Fe = !0), je && (Ae = S({}, [].concat(q(M))), Se = [], !0 === je.html && (S(Ae, R), S(Se, L)), !0 === je.svg && (S(Ae, _), S(Se, F), S(Se, C)), !0 === je.svgFilters && (S(Ae, N), S(Se, F), S(Se, C)), !0 === je.mathMl && (S(Ae, k), S(Se, I), S(Se, C))), e.ADD_TAGS && (Ae === xe && (Ae = w(Ae)), S(Ae, e.ADD_TAGS)), e.ADD_ATTR && (Se === we && (Se = w(Se)), S(Se, e.ADD_ATTR)), e.ADD_URI_SAFE_ATTR && S(Ye, e.ADD_URI_SAFE_ATTR), e.FORBID_CONTENTS && (Be === We && (Be = w(Be)), S(Be, e.FORBID_CONTENTS)), Ue && (Ae["#text"] = !0), Oe && S(Ae, ["html", "head", "body"]), Ae.table && (S(Ae, ["tbody"]), delete Ee.tbody), i && i(e), rt = e) }, at = S({}, ["mi", "mo", "mn", "ms", "mtext"]), lt = S({}, ["foreignobject", "desc", "title", "annotation-xml"]), ct = S({}, _); S(ct, N), S(ct, D); var st = S({}, k); S(st, O); var ut = function (e) { var t = ne(e); t && t.tagName || (t = { namespaceURI: $e, tagName: "template" }); var n = h(e.tagName), r = h(t.tagName); if (e.namespaceURI === Xe) return t.namespaceURI === $e ? "svg" === n : t.namespaceURI === Ve ? "svg" === n && ("annotation-xml" === r || at[r]) : Boolean(ct[n]); if (e.namespaceURI === Ve) return t.namespaceURI === $e ? "math" === n : t.namespaceURI === Xe ? "math" === n && lt[r] : Boolean(st[n]); if (e.namespaceURI === $e) { if (t.namespaceURI === Xe && !lt[r]) return !1; if (t.namespaceURI === Ve && !at[r]) return !1; var o = S({}, ["title", "style", "font", "a", "script"]); return !st[n] && (o[n] || !ct[n]) } return !1 }, mt = function (e) { p(n.removed, { element: e }); try { e.parentNode.removeChild(e) } catch (t) { try { e.outerHTML = ie } catch (t) { e.remove() } } }, ft = function (e, t) { try { p(n.removed, { attribute: t.getAttributeNode(e), from: t }) } catch (e) { p(n.removed, { attribute: null, from: t }) } if (t.removeAttribute(e), "is" === e && !Se[e]) if (Fe || Ie) try { mt(t) } catch (e) { } else try { t.setAttribute(e, "") } catch (e) { } }, dt = function (e) { var t = void 0, n = void 0; if (Le) e = "" + e; else { var r = g(e, /^[\r\n\t ]+/); n = r && r[0] } "application/xhtml+xml" === Qe && (e = '' + e + ""); var i = oe ? oe.createHTML(e) : e; if (Ze === $e) try { t = (new $).parseFromString(i, Qe) } catch (e) { } if (!t || !t.documentElement) { t = le.createDocument(Ze, "template", null); try { t.documentElement.innerHTML = Je ? "" : i } catch (e) { } } var a = t.body || t.documentElement; return e && n && a.insertBefore(o.createTextNode(n), a.childNodes[0] || null), Ze === $e ? ue.call(t, Oe ? "html" : "body")[0] : Oe ? t.documentElement : a }, pt = function (e) { return ce.call(e.ownerDocument || e, e, u.SHOW_ELEMENT | u.SHOW_COMMENT | u.SHOW_TEXT, null, !1) }, ht = function (e) { return !(e instanceof V || e instanceof X) && !("string" == typeof e.nodeName && "string" == typeof e.textContent && "function" == typeof e.removeChild && e.attributes instanceof x && "function" == typeof e.removeAttribute && "function" == typeof e.setAttribute && "string" == typeof e.namespaceURI && "function" == typeof e.insertBefore) }, gt = function (e) { return "object" === (void 0 === c ? "undefined" : G(c)) ? e instanceof c : e && "object" === (void 0 === e ? "undefined" : G(e)) && "number" == typeof e.nodeType && "string" == typeof e.nodeName }, yt = function (e, t, r) { de[e] && f(de[e], (function (e) { e.call(n, t, r, rt) })) }, vt = function (e) { var t = void 0; if (yt("beforeSanitizeElements", e, null), ht(e)) return mt(e), !0; if (g(e.nodeName, /[\u0080-\uFFFF]/)) return mt(e), !0; var r = nt(e.nodeName); if (yt("uponSanitizeElement", e, { tagName: r, allowedTags: Ae }), !gt(e.firstElementChild) && (!gt(e.content) || !gt(e.content.firstElementChild)) && T(/<[/\w]/g, e.innerHTML) && T(/<[/\w]/g, e.textContent)) return mt(e), !0; if ("select" === r && T(/