Repository: arc-design/arc-theme Branch: master Commit: 1fd68cc4e846 Files: 134 Total size: 996.4 KB Directory structure: gitextract_eqqzwbgu/ ├── .github/ │ └── ISSUE_TEMPLATE.md ├── .gitignore ├── .nvmrc ├── AUTHORS ├── COPYING ├── HACKING.md ├── Makefile.am ├── README.md ├── autogen.sh ├── change_color.sh ├── common/ │ ├── Makefile.am │ ├── cinnamon/ │ │ └── sass/ │ │ ├── _colors.scss │ │ ├── _common.scss │ │ ├── _drawing.scss │ │ ├── cinnamon-dark.scss │ │ └── cinnamon.scss │ ├── gnome-shell/ │ │ ├── 3.18/ │ │ │ └── sass/ │ │ │ ├── _colors.scss │ │ │ ├── _common.scss │ │ │ ├── _drawing.scss │ │ │ ├── gnome-shell-dark.scss │ │ │ └── gnome-shell.scss │ │ ├── 3.26/ │ │ │ └── sass/ │ │ │ ├── _colors.scss │ │ │ ├── _common.scss │ │ │ ├── _drawing.scss │ │ │ ├── gnome-shell-dark.scss │ │ │ └── gnome-shell.scss │ │ ├── 3.30/ │ │ │ └── sass/ │ │ │ ├── _colors.scss │ │ │ ├── _common.scss │ │ │ ├── _drawing.scss │ │ │ ├── gnome-shell-dark.scss │ │ │ └── gnome-shell.scss │ │ └── 3.32/ │ │ └── sass/ │ │ ├── _colors.scss │ │ ├── _common.scss │ │ ├── _drawing.scss │ │ ├── gnome-shell-dark.scss │ │ └── gnome-shell.scss │ ├── gtk-2.0/ │ │ ├── Makefile.am │ │ ├── apps.rc │ │ ├── assets.txt │ │ ├── dark/ │ │ │ └── gtkrc │ │ ├── darker/ │ │ │ └── gtkrc │ │ ├── light/ │ │ │ └── gtkrc │ │ ├── main.rc │ │ ├── menubar-toolbar/ │ │ │ ├── menubar-toolbar-dark.rc │ │ │ └── menubar-toolbar.rc │ │ ├── panel.rc │ │ └── xfce-notify.rc │ ├── gtk-3.0/ │ │ ├── 3.18/ │ │ │ ├── Makefile.am │ │ │ ├── assets.txt │ │ │ └── sass/ │ │ │ ├── _applications.scss │ │ │ ├── _colors-public.scss │ │ │ ├── _colors.scss │ │ │ ├── _common.scss │ │ │ ├── _drawing.scss │ │ │ ├── _granite.scss │ │ │ ├── _lightdm.scss │ │ │ ├── _transparent_widgets.scss │ │ │ ├── _unity.scss │ │ │ ├── gtk-dark.scss │ │ │ ├── gtk-darker.scss │ │ │ ├── gtk-solid-dark.scss │ │ │ ├── gtk-solid-darker.scss │ │ │ ├── gtk-solid.scss │ │ │ └── gtk.scss │ │ ├── 3.20/ │ │ │ ├── Makefile.am │ │ │ ├── assets.txt │ │ │ └── sass/ │ │ │ ├── _applications.scss │ │ │ ├── _budgie.scss │ │ │ ├── _colors-public.scss │ │ │ ├── _colors.scss │ │ │ ├── _common.scss │ │ │ ├── _drawing.scss │ │ │ ├── _granite.scss │ │ │ ├── _lightdm.scss │ │ │ ├── _transparent_widgets.scss │ │ │ ├── _unity.scss │ │ │ ├── gtk-dark.scss │ │ │ ├── gtk-darker.scss │ │ │ ├── gtk-solid-dark.scss │ │ │ ├── gtk-solid-darker.scss │ │ │ ├── gtk-solid.scss │ │ │ └── gtk.scss │ │ ├── Makefile.am │ │ ├── _colors.scss.thpl │ │ └── common.am │ ├── index/ │ │ ├── dark/ │ │ │ └── index.theme │ │ ├── darker/ │ │ │ └── index.theme │ │ └── light/ │ │ └── index.theme │ ├── metacity-1/ │ │ ├── metacity-theme-1-dark.xml │ │ ├── metacity-theme-1.xml │ │ ├── metacity-theme-2-dark.xml │ │ ├── metacity-theme-2.xml │ │ └── metacity-theme-3.xml │ ├── openbox/ │ │ ├── Arc/ │ │ │ └── openbox-3/ │ │ │ ├── close.xbm │ │ │ ├── desk.xbm │ │ │ ├── desk_toggled.xbm │ │ │ ├── iconify.xbm │ │ │ ├── max.xbm │ │ │ ├── max_toggled.xbm │ │ │ ├── shade.xbm │ │ │ ├── shade_toggled.xbm │ │ │ └── themerc │ │ ├── Arc-Dark/ │ │ │ └── openbox-3/ │ │ │ ├── close.xbm │ │ │ ├── desk.xbm │ │ │ ├── desk_toggled.xbm │ │ │ ├── iconify.xbm │ │ │ ├── max.xbm │ │ │ ├── max_toggled.xbm │ │ │ ├── shade.xbm │ │ │ ├── shade_toggled.xbm │ │ │ └── themerc │ │ └── Arc-Darker/ │ │ └── openbox-3/ │ │ ├── close.xbm │ │ ├── desk.xbm │ │ ├── desk_toggled.xbm │ │ ├── iconify.xbm │ │ ├── max.xbm │ │ ├── max_toggled.xbm │ │ ├── shade.xbm │ │ ├── shade_toggled.xbm │ │ └── themerc │ └── xfwm4/ │ ├── Makefile.am │ ├── assets.txt │ ├── dark/ │ │ └── themerc │ └── light/ │ └── themerc ├── configure.ac ├── extra/ │ ├── Arc-Plank/ │ │ └── dock.theme │ └── Makefile.am ├── m4/ │ ├── arc-enable.m4 │ ├── arc-gnome-shell.m4 │ └── arc-gtk3.m4 ├── mkrelease.sh ├── package.json └── scripts/ ├── darker.sh └── mix.sh ================================================ FILE CONTENTS ================================================ ================================================ FILE: .github/ISSUE_TEMPLATE.md ================================================ # READ CAREFULLY BEFORE SUBMITTING Whilst we are happy for issues to be raised, we do strongly recommend that you investigate as much as possible and provide a Git Pull Request with a suggested fix. **The list below is for avoiding duplicated issues; if your issue isn't listed, you should remove this and continue.** - The theme doesn't work in a distribution that have a GTK+ 3 version lower than 3.18. - Arc only supports versions since 3.18, you should update to latest versions. - The theme is broken after a major GTK+ 3 update (i.e. 3.18 to 3.20 or 3.20 to 3.22). - Update the package or install from sources. - The theme is broken after installing from sources. - Possibly a bug on GTK+ 3 version checking, use `--with-gtk3=` flag with `./autogen.sh`. - Possibly a bug with GNOME-Shell version checking, use `--with-gnome-shell=` flag with `./autogen.sh`. - Theme isn't transparent on GNOME applications without CSD (i.e. Ubuntu's applications). - Transparency isn't supported for non-CSD applications. - Theme doesn't build from AUR in Arch/Manjaro and others. - Ensure you have the `base-devel` group installed. ### Checks *Ensure you...* - **Really** read the list above and checked if your issue is or not duplicated. - **Really** read the README and there is nothing about your issue. - **Really** checked if the theme is installed or built specifically for the GTK+ 3/distribution version you're using. ### Details - Distribution (with version): - Base distribution (if have, with version): - Desktop environment (with version): - Arc version/commit (don't put "latest"): - GTK+ 3 version: - Murrine engine version: - `gnome-themes-extras` version: - Installation method (package or source): ================================================ FILE: .gitignore ================================================ node_modules Makefile Makefile.in aclocal.m4 autom4te.cache build-aux compile config.* configure install-sh missing .idea/ common/cinnamon/cinnamon-dark.css common/cinnamon/cinnamon.css common/gnome-shell/**/gnome-shell-dark.css common/gnome-shell/**/gnome-shell.css common/gtk-3.0/**/*.css common/gtk-3.0/**/light/ common/gtk-3.0/**/darker/ common/gtk-3.0/**/dark/ common/gtk-3.0/**/assets/*.png common/gtk-2.0/*/assets/*.png common/gtk-2.0/menubar-toolbar/*.png common/xfwm4/*/assets/*.png common/compile-gresources.sh ================================================ FILE: .nvmrc ================================================ stable ================================================ FILE: AUTHORS ================================================ See a list of contributors here https://github.com/arc-design/Arc-theme/graphs/contributors ================================================ FILE: COPYING ================================================ 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 . ================================================ FILE: HACKING.md ================================================ This theme uses node-sass/libsass to process the various .scss files. Never edit any of the .css files manually. #### Editing the CSS based themes in the `common` directory (cinnamon, gnome-shell, gtk-3.0) * Edit the `common/*/sass/*.scss` files * Run `make` to generate all css files using sassc (starting with version 20180114). Gulp is no longer required. -- #### Editing the GTK 2 themes * Go to `common/gtk-2.0` * The colors and includes are defined in `light/gtkrc`, `dark/gtkrc` and `darker/gtkrc` for each theme variant * `main.rc` contains the major part of the theme * `panel.rc` contains the panel styling for Xfce and MATE * `apps.rc` contains some application specific rules Because this theme is heavily based on the pixmap engine, a lot of the styling comes from the images in the `light/assets` and `dark/assets` folders. Don't edit these images directly. See the next section. -- #### Editing the images for the GTK 2 and GTK 3 themes * Go to the `common/gtk-2.0/light`, `common/gtk-2.0/dark`, or `common/gtk-3.0/$gtk-version` directory. * Open the `assets.svg` file in inkscape. Each object in the .svg file corresponds to an image in the `assets` folder. * Find the object you want to edit and make your changes. Important: Don't change the object id! * Save `assets.svg` and run `make` (or `make -j$(nproc)` if you're in a hurry) from a terminal in the parent directory. ================================================ FILE: Makefile.am ================================================ ACLOCAL_AMFLAGS = -I m4 EXTRA_DIST = \ README.md \ HACKING.md \ autogen.sh \ package.json \ .nvmrc SUBDIRS = common extra ================================================ FILE: README.md ================================================ # Arc Theme *This project needs new maintainers to continue. The current maintainers do not have the bandwidth to continue. As such this project has now been put into archive readonly mode. The theme is actively maintained under a separate project at [github.com/jnsh/arc-theme](https://github.com/jnsh/arc-theme).* Arc is a flat theme with transparent elements for GTK 3, GTK 2 and GNOME Shell which supports GTK 3 and GTK 2 based desktop environments like GNOME, Unity, Pantheon, Xfce, MATE, Cinnamon (>=3.4), Budgie Desktop (10.4 for GTK+3.22) etc. The arc-design/arc-theme repository is a fork of the horst3180/arc-theme repository which as been umaintained since March 2017. Its aim is to continue the maintenance of arc-theme. The two administrators of the project are the Arch-Linux and Debian & Ubuntu packaging maintainers. It is strongly encouraged to submit pull-requests to suggest fixes and enhancements. Those that show good quality submissions will be invited to become maintainers. ## Arc is available in three variants ##### Arc ![A screenshot of the Arc theme](http://i.imgur.com/Ph5ObOa.png) ##### Arc-Darker ![A screenshot of the Arc-Darker theme](http://i.imgur.com/NC6dqyl.png) ##### Arc-Dark ![A screenshot of the Arc-Dark theme](http://i.imgur.com/5AGlCnA.png) ## Installation ### Packages |Distro|Package Name/Link| |:----:|:----:| | Arch Linux | [`arc-gtk-theme`](https://www.archlinux.org/packages/community/any/arc-gtk-theme/), [`arc-solid-gtk-theme`](https://www.archlinux.org/packages/community/any/arc-solid-gtk-theme/) | | Debian | `arc-theme` | | Fedora | `arc-theme` | | Gentoo/Funtoo | `x11-themes/arc-theme` from the [Scriptkitties Overlay][sk-overlay] | | Sabayon | `arc-theme` | Solus | `arc-gtk-theme` | | Ubuntu 16.10 and later | `arc-theme` | Ubuntu 16.04 and later | `arc-theme` from [fossfreedom/arc-gtk-theme-daily](https://launchpad.net/~fossfreedom/+archive/ubuntu/arc-gtk-theme-daily) | | FreeBSD | `x11-themes/gtk-arc-themes` | [![Packaging status](https://repology.org/badge/vertical-allrepos/arc-theme.svg)](https://repology.org/project/arc-theme/versions) -- ### Manual Installation To build the theme the following packages are required * `autoconf` * `automake` * `sassc` for GTK 3, Cinnamon, or GNOME Shell * `pkg-config` or `pkgconfig` for Fedora * `git` to clone the source directory * `optipng` for GTK 2, GTK 3, or XFWM * `inkscape` for GTK 2, GTK 3, or XFWM The following packages are optionally required * `gnome-shell`for auto-detecting the GNOME Shell version * `libgtk-3-dev` for Debian based distros or `gtk3-devel` for RPM based distros, for auto-detecting the GTK3 version **Note:** For distributions which don't ship separate development packages, just the GTK 3 package is needed instead of the `-dev` packages. For the theme to function properly, install the following * GNOME Shell 3.18 - 3.32, GTK 3.18 - 3.24 * The `gnome-themes-extra` package * The murrine engine. This has different names depending on the distro. * `gtk-engine-murrine` (Arch Linux) * `gtk2-engines-murrine` (Debian, Ubuntu, elementary OS) * `gtk-murrine-engine` (Fedora) * `gtk2-engine-murrine` (openSUSE) * `gtk-engines-murrine` (Gentoo) Install the theme with the following commands #### 1. Get the source Clone the git repository with git clone https://github.com/arc-design/arc-theme --depth 1 && cd arc-theme #### 2. Build and install the theme ./autogen.sh --prefix=/usr sudo make install Other options to pass to autogen.sh are --disable-transparency disable transparency in the GTK3 theme --disable-light disable Arc Light support --disable-darker disable Arc Darker support --disable-dark disable Arc Dark support --disable-cinnamon disable Cinnamon support --disable-gnome-shell disable GNOME Shell support --disable-gtk2 disable GTK2 support --disable-gtk3 disable GTK3 support --disable-metacity disable Metacity support --disable-unity disable Unity support --disable-xfwm disable XFWM support --disable-plank disable Plank theme support --disable-openbox disable Openbox support --with-gnome-shell= build the gnome-shell theme for a specific version --with-gtk3= build the GTK3 theme for a specific version Note: Normally the correct version is detected automatically and these options should not be needed. After the installation is complete the theme can be activated with `gnome-tweak-tool` or a similar program by selecting `Arc`, `Arc-Darker` or `Arc-Dark` as Window/GTK+ theme and `Arc` or `Arc-Dark` as GNOME Shell/Cinnamon theme. If the `--disable-transparency` option was used, the theme will be installed as `Arc-solid`, `Arc-Darker-solid` and `Arc-Dark-solid`. ## Uninstall Run sudo make uninstall from the cloned git repository, or sudo rm -rf /usr/share/themes/{Arc,Arc-Darker,Arc-Dark} ## Extras ### Arc KDE A port of Arc for the Plasma 5 desktop with a few additions and extras. Available [here](https://github.com/PapirusDevelopmentTeam/arc-kde). ### Arc icon theme The Arc icon theme is available at https://github.com/NicoHood/arc-icon-theme ### Plank theme As of version `20180114` the plank theme will be installed along with the normal arc gtk theme. You can disable the install by passing `disable-plank` to the autogen command. Now open the Plank preferences window by executing `plank --preferences` from a terminal and select `Gtk+` as the theme. ### FirefoxColor theme Arc color palettes for FirefoxColor testpilot project 1.[Arc](https://color.firefox.com/?theme=XQAAAALsAAAAAAAAAABBqYhm849SCiazH1KEGccwS-xNVAWBveAusLC2VAlvlSjJ6UJSeqAgCYbdusEoPO6gs3O7v6uHbeft01vfMj--IcmWccV5ZVhbS5pAY21H4rQoo83UfS5UcAgLsFRnmMUloj0SFmW1HehCUMDfDxPPF1kUuA9qWMRgNi28lIsiXLMPZZcTMJdrmyjo335zNimxUcokvCK-KCKaas3H1WasbB4OVMJidW2cC2pVrAp_-pQmAA) 2.[Arc-Dark](https://color.firefox.com/?theme=XQAAAALsAAAAAAAAAABBqYhm849SCiazH1KEGccwS-xNVAVYwOBtiY0uPWyYE7WQD-5SgdZ71r2F-lXEQxrGAEzv_buK8bCyok70SsUy0GeciWa6veHgAFpeOvR5esr0TgHrmzAVtbaluSV2pYGKFkF03u_F69WpX-5y0OWddI2Y12nn6XZrfhTCe6wjAGRgrpfgKzbG8oTgp9v362NBpHcLnPzzzzC_3PGq4PfhQJimy-2PSgzHFoG6322X_-hAUAA) 3.[Arc-Darker](https://color.firefox.com/?theme=XQAAAALsAAAAAAAAAABBqYhm849SCiazH1KEGccwS-xNVAWBveAusLC2VAlvlSjJ6UJSeqAgCYbdusEoPO6gs3O7v6uHbeft01vfMkT1y4Tf1nzX1xYaRp0u6XBPage606lAwQt0F0O7Q6pf8R-lAjw8ljDMgG2fgvNk2K-ZUhapxWWNnKLb0LTrm1yLUWJYMgTx2cr9o4MWazvWLg9DPQcdumiH0qiUFROpAtIMassKweMS9iAEenpp0qT_Et_AAA) ### Arc-Dark for Ubuntu Software Center The Arc Dark theme for the Ubuntu Software Center by [mervick](https://github.com/mervick) can be installed from [here](https://github.com/mervick/arc-dark-software-center). It solves readability issues with Arc Dark and the Ubuntu Software Center. ## Troubleshooting If you get artifacts like black or invisible backgrounds under Unity, disable overlay scrollbars with gsettings set com.canonical.desktop.interface scrollbar-mode normal ## Bugs If you find a bug, please report it at https://github.com/arc-design/arc-theme/issues ## License Arc is available under the terms of the GPL-3.0. See `COPYING` for details. ## Full Preview ![A full screenshot of the Arc theme](http://i.imgur.com/tD1OBQ3.png) Screenshot Details: Icons: [Arc](https://github.com/NicoHood/arc-icon-theme) | Launcher Icons based on [White Pixel Icons](http://darkdawg.deviantart.com/art/White-Pixel-Icons-252310560) | [Wallpaper](https://pixabay.com/photo-869593/) | Font: Futura Bk bt [sk-overlay]: https://github.com/fkmclane/overlay/tree/master/x11-themes/arc-theme [NicoHood-fossfreedom]: https://launchpad.net/~fossfreedom/+archive/ubuntu/arc-gtk-theme-daily ================================================ FILE: autogen.sh ================================================ #!/bin/sh test -z "$srcdir" && srcdir=$(dirname "$0") test -z "$srcdir" && srcdir=. set -ue cwd=$(pwd) cd "$srcdir" mkdir -p m4 autoreconf --verbose --force --install cd "$cwd" # shellcheck disable=SC2068 "$srcdir/configure" $@ ================================================ FILE: change_color.sh ================================================ #!/usr/bin/env bash # shellcheck disable=SC1090 #set -x set -ueo pipefail SRC_PATH="$(readlink -f "$(dirname "$0")")" darker() { "$SRC_PATH/scripts/darker.sh" "$@" } mix() { "$SRC_PATH/scripts/mix.sh" "$@" } is_dark() { hexinput="$(tr '[:lower:]' '[:upper:]' <<< "$1")" half_darker="$(darker "$hexinput" 88)" [[ "$half_darker" == "000000" ]] } print_usage() { echo "usage: $0 [-o OUTPUT_THEME_NAME] [-a AUTOGEN_OPTS] [-j JOBS] PATH_TO_PRESET" echo echo "examples:" # shellcheck disable=SC2028 # This is meant to be usage text. echo " $0 --output my-theme-name <(echo -e \"BG=d8d8d8\\nFG=101010\\nHDR_BG=3c3c3c\\nHDR_FG=e6e6e6\\nSEL_BG=ad7fa8\\nSEL_FG=ffffff\\nTXT_BG=ffffff\\nTXT_FG=1a1a1a\\nBTN_BG=f5f5f5\\nBTN_FG=111111\\n\")" echo " $0 ../colors/retro/twg" echo " $0 --autogen-opts '--disable-cinnamon --disable-gnome-shell' --jobs 4 ../colors/retro/clearlooks" exit 1 } AUTOGEN_OPTS="" unset JOBS while [[ "$#" -gt 0 ]]; do case "$1" in -o|--output) OUTPUT_THEME_NAME="$2" shift ;; -d|--hidpi) OPTION_GTK2_HIDPI="$2" shift ;; -a|--autogen-opts) AUTOGEN_OPTS="${2}" shift ;; -j|--jobs) JOBS="${2}" shift ;; *) if [[ "$1" == -* ]] || [[ "${THEME-}" ]]; then echo "unknown option $1" print_usage exit 2 fi THEME="$1" ;; esac shift done if [[ -z "${THEME:-}" ]]; then print_usage fi OPTION_GTK2_HIDPI=$(tr '[:upper:]' '[:lower:]' <<< "${OPTION_GTK2_HIDPI-False}") export OPTION_GTK2_HIDPI if [[ "$THEME" == */* ]] || [[ "$THEME" == *.* ]]; then source "$THEME" THEME=$(basename "$THEME") else if [[ -f "$SRC_PATH/../colors/$THEME" ]]; then source "$SRC_PATH/../colors/$THEME" else echo "Theme '$THEME' not found" exit 1 fi fi if [[ $(date +"%m%d") = "0401" ]] && grep -q "no-jokes" <<< "$*"; then echo -e "\\n\\nError patching uxtheme.dll\\n\\n" ACCENT_BG=000000 BG=C0C0C0 BTN_BG=C0C0C0 BTN_FG=000000 FG=000000 HDR_BTN_BG=C0C0C0 HDR_BTN_FG=000000 HDR_BG=C0C0C0 HDR_FG=000000 SEL_BG=000080 SEL_FG=FFFFFF TXT_BG=FFFFFF TXT_FG=000000 fi # Migration: HDR_BG=${HDR_BG-$MENU_BG} HDR_FG=${HDR_FG-$MENU_FG} ARC_TRANSPARENCY=$(tr '[:upper:]' '[:lower:]' <<< "${ARC_TRANSPARENCY-True}") ARC_WIDGET_BORDER_COLOR=${ARC_WIDGET_BORDER_COLOR-$(mix ${BG} ${FG} 0.75)} TXT_FG=$FG BTN_FG=$FG HDR_BTN_FG=$HDR_FG ACCENT_BG=${ACCENT_BG-$SEL_BG} HDR_BTN_BG=${HDR_BTN_BG-$BTN_BG} # Not implemented yet: HDR_BTN_FG=${HDR_BTN_FG-$BTN_FG} WM_BORDER_FOCUS=${WM_BORDER_FOCUS-$SEL_BG} WM_BORDER_UNFOCUS=${WM_BORDER_UNFOCUS-$HDR_BG} SPACING=${SPACING-3} GRADIENT=${GRADIENT-0} ROUNDNESS=${ROUNDNESS-2} #ROUNDNESS_GTK2_HIDPI=$(( ROUNDNESS * 2 )) TERMINAL_COLOR1=${TERMINAL_COLOR1:-F04A50} TERMINAL_COLOR3=${TERMINAL_COLOR3:-F08437} TERMINAL_COLOR4=${TERMINAL_COLOR4:-1E88E5} TERMINAL_COLOR5=${TERMINAL_COLOR5:-E040FB} TERMINAL_COLOR9=${TERMINAL_COLOR9:-DD2C00} TERMINAL_COLOR10=${TERMINAL_COLOR10:-00C853} TERMINAL_COLOR11=${TERMINAL_COLOR11:-FF6D00} TERMINAL_COLOR12=${TERMINAL_COLOR12:-66BB6A} INACTIVE_FG=$(mix "$FG" "$BG" 0.75) INACTIVE_BG=$(mix "$BG" "$FG" 0.75) INACTIVE_HDR_FG=$(mix "$HDR_FG" "$HDR_BG" 0.75) INACTIVE_HDR_BG=$(mix "$HDR_BG" "$HDR_FG" 0.75) INACTIVE_TXT_MIX=$(mix "$TXT_FG" "$TXT_BG") INACTIVE_TXT_FG=$(mix "$TXT_FG" "$TXT_BG" 0.75) INACTIVE_TXT_BG=$(mix "$TXT_BG" "$BG" 0.75) OUTPUT_THEME_NAME=${OUTPUT_THEME_NAME-oomox-arc-$THEME} DEST_PATH="$HOME/.themes/${OUTPUT_THEME_NAME/\//-}" if [[ "$SRC_PATH" == "$DEST_PATH" ]]; then echo "can't do that" exit 1 fi if [[ ! -d "$(dirname "${DEST_PATH}")" ]] ; then mkdir -p "${DEST_PATH}" fi tempdir=$(mktemp -d) post_clean_up() { rm -r "$tempdir" } trap post_clean_up EXIT SIGHUP SIGINT SIGTERM cp -r "$SRC_PATH/"* "$tempdir/" cd "$tempdir" echo "== Converting theme into template..." PATHLIST=( './common/' ) for FILEPATH in "${PATHLIST[@]}"; do find "$FILEPATH" -type f -exec sed -i'' \ -e 's/#cfd6e6/%ARC_WIDGET_BORDER_COLOR%/gI' \ -e 's/#f5f6f7/%BG%/gI' \ -e 's/#dde3e9/%BG_DARKER%/gI' \ -e 's/#3b3e45/%FG%/gI' \ -e 's/#FFFFFF/%TXT_BG%/gI' \ -e 's/#3b3e45/%TXT_FG%/gI' \ -e 's/#5294e2/%SEL_BG%/gI' \ -e 's/#fcfdfd/%BTN_BG%/gI' \ -e 's/#e7e8eb/%HDR_BG%/gI' \ -e 's/#2f343f/%HDR_BG%/gI' \ -e 's/#D3DAE3/%HDR_FG%/gI' \ -e 's/#fbfcfc/%INACTIVE_BG%/gI' \ -e 's/#a9acb2/%INACTIVE_FG%/gI' \ -e 's/#e2e7ef/%BG_DARKER%/gI' \ -e 's/#F04A50/%TERMINAL_COLOR1%/gI' \ -e 's/#F08437/%TERMINAL_COLOR3%/gI' \ -e 's/#FC4138/%TERMINAL_COLOR9%/gI' \ -e 's/#73d216/%TERMINAL_COLOR10%/gI' \ -e 's/#F27835/%TERMINAL_COLOR11%/gI' \ -e 's/#4DADD4/%TERMINAL_COLOR12%/gI' \ -e 's/#353945/%HDR_BG2%/gI' \ -e 's/Name=Arc/Name=%OUTPUT_THEME_NAME%/g' \ -e 's/#f46067/%TERMINAL_COLOR9%/gI' \ -e 's/#cc575d/%TERMINAL_COLOR9%/gI' \ -e 's/#f68086/%TERMINAL_COLOR9_LIGHTER%/gI' \ -e 's/#d7787d/%TERMINAL_COLOR9_LIGHTER%/gI' \ -e 's/#f13039/%TERMINAL_COLOR9_DARKER%/gI' \ -e 's/#be3841/%TERMINAL_COLOR9_DARKER%/gI' \ -e 's/#F8F8F9/%HDR_FG%/gI' \ -e 's/#fdfdfd/%HDR_FG%/gI' \ -e 's/#454C5C/%HDR_FG%/gI' \ -e 's/#D1D3DA/%HDR_FG%/gI' \ -e 's/#90949E/%HDR_FG%/gI' \ -e 's/#90939B/%HDR_FG%/gI' \ -e 's/#B6B8C0/%INACTIVE_HDR_FG%/gI' \ -e 's/#666A74/%INACTIVE_HDR_FG%/gI' \ -e 's/#7A7F8B/%INACTIVE_HDR_FG%/gI' \ -e 's/#C4C7CC/%INACTIVE_HDR_FG%/gI' \ -e 's/#BAC3CF/%HDR_FG%/gI' \ -e 's/#4B5162/%TXT_FG%/gI' \ -e 's/#AFB8C5/%HDR_FG%/gI' \ -e 's/#404552/%HDR_BG%/gI' \ -e 's/#383C4A/%HDR_BG%/gI' \ -e 's/#5c616c/%FG%/gI' \ -e 's/#d3d8e2/%SEL_BG%/gI' \ -e 's/#b7c0d3/%SEL_BG%/gI' \ -e 's/#cbd2e3/%ARC_WIDGET_BORDER_COLOR%/gI' \ -e 's/#fcfcfc/%TXT_BG%/gI' \ -e 's/#dbdfe3/%INACTIVE_TXT_BG%/gI' \ -e 's/#eaebed/%INACTIVE_TXT_BG%/gI' \ -e 's/#b8babf/%INACTIVE_TXT_MIX%/gI' \ -e 's/#d3d4d8/%INACTIVE_TXT_FG%/gI' \ -e 's/#d7d8dd/%HDR_BG2%/gI' \ -e 's/#262932/%HDR_BG2%/gI' \ {} \; ; done #Not implemented yet: #-e 's/%HDR_BTN_FG%/'"$HDR_BTN_FG"'/g' \ #-e 's/%WM_BORDER_FOCUS%/'"$WM_BORDER_FOCUS"'/g' \ #-e 's/%WM_BORDER_UNFOCUS%/'"$WM_BORDER_UNFOCUS"'/g' \ #-e 's/%SPACING%/'"$SPACING"'/g' \ #-e 's/%INACTIVE_HDR_FG%/'"$INACTIVE_HDR_FG"'/g' \ #-e 's/#01A299/%ACCENT_BG%/g' \ #sed -i -e 's/^$material_radius: .px/$material_radius: '"$ROUNDNESS"'px/g' ./src/_sass/gtk/_variables.scss if [[ "${DEBUG:-}" ]]; then echo "You can debug TEMP DIR: $tempdir, press [Enter] when finished" read -r answer if [[ "${answer}" = "q" ]] ; then exit 125 fi fi while IFS= read -r -d '' template_file do cat "${template_file}" >> "${template_file::-5}" done < <(find ./common -name '*.thpl' -print0) ASSETS_FILES=( './common/gtk-2.0/light/assets.svg' './common/gtk-2.0/dark/assets.svg' './common/gtk-3.0/3.18/assets.svg' './common/gtk-3.0/3.20/assets.svg' ) for assets_file in "${ASSETS_FILES[@]}"; do sed -i'' -e 's/%SEL_BG%/%ACCENT_BG%/g' "${assets_file}" done echo "== Filling the template with the new colorscheme..." for FILEPATH in "${PATHLIST[@]}"; do find "$FILEPATH" -type f -exec sed -i'' \ -e 's/%ARC_WIDGET_BORDER_COLOR%/#'"$ARC_WIDGET_BORDER_COLOR"'/g' \ -e 's/%BG%/#'"$BG"'/g' \ -e 's/%BG_DARKER%/#'"$(darker $BG)"'/g' \ -e 's/%FG%/#'"$FG"'/g' \ -e 's/%ACCENT_BG%/#'"$ACCENT_BG"'/g' \ -e 's/%SEL_BG%/#'"$SEL_BG"'/g' \ -e 's/%SEL_FG%/#'"$SEL_FG"'/g' \ -e 's/%TXT_BG%/#'"$TXT_BG"'/g' \ -e 's/%TXT_FG%/#'"$TXT_FG"'/g' \ -e 's/%HDR_BG%/#'"$HDR_BG"'/g' \ -e 's/%HDR_BG2%/#'"$(mix $HDR_BG $BG 0.85)"'/g' \ -e 's/%HDR_FG%/#'"$HDR_FG"'/g' \ -e 's/%BTN_BG%/#'"$BTN_BG"'/g' \ -e 's/%BTN_FG%/#'"$BTN_FG"'/g' \ -e 's/%HDR_BTN_BG%/#'"$HDR_BTN_BG"'/g' \ -e 's/%HDR_BTN_FG%/#'"$HDR_BTN_FG"'/g' \ -e 's/%WM_BORDER_FOCUS%/#'"$WM_BORDER_FOCUS"'/g' \ -e 's/%WM_BORDER_UNFOCUS%/#'"$WM_BORDER_UNFOCUS"'/g' \ -e 's/%SPACING%/'"$SPACING"'/g' \ -e 's/%INACTIVE_FG%/#'"$INACTIVE_FG"'/g' \ -e 's/%INACTIVE_BG%/#'"$INACTIVE_BG"'/g' \ -e 's/%INACTIVE_TXT_MIX%/#'"$INACTIVE_TXT_MIX"'/g' \ -e 's/%INACTIVE_TXT_FG%/#'"$INACTIVE_TXT_FG"'/g' \ -e 's/%INACTIVE_TXT_BG%/#'"$INACTIVE_TXT_BG"'/g' \ -e 's/%INACTIVE_HDR_FG%/#'"$INACTIVE_HDR_FG"'/g' \ -e 's/%INACTIVE_HDR_BG%/#'"$INACTIVE_HDR_BG"'/g' \ -e 's/%TERMINAL_COLOR1%/#'"$TERMINAL_COLOR1"'/g' \ -e 's/%TERMINAL_COLOR3%/#'"$TERMINAL_COLOR3"'/g' \ -e 's/%TERMINAL_COLOR4%/#'"$TERMINAL_COLOR4"'/g' \ -e 's/%TERMINAL_COLOR5%/#'"$TERMINAL_COLOR5"'/g' \ -e 's/%TERMINAL_COLOR9%/#'"$TERMINAL_COLOR9"'/g' \ -e 's/%TERMINAL_COLOR9_DARKER%/#'"$(darker "$TERMINAL_COLOR9" 10)"'/g' \ -e 's/%TERMINAL_COLOR9_LIGHTER%/#'"$(darker "$TERMINAL_COLOR9" -10)"'/g' \ -e 's/%TERMINAL_COLOR10%/#'"$TERMINAL_COLOR10"'/g' \ -e 's/%TERMINAL_COLOR11%/#'"$TERMINAL_COLOR11"'/g' \ -e 's/%TERMINAL_COLOR12%/#'"$TERMINAL_COLOR12"'/g' \ -e 's/%OUTPUT_THEME_NAME%/'"$OUTPUT_THEME_NAME"'/g' \ {} \; ; done #if [[ "$OPTION_GTK2_HIDPI" == "true" ]]; then #mv ./src/gtk-2.0/main.rc.hidpi ./src/gtk-2.0/main.rc #fi #if [[ "$EXPORT_QT5CT" = 1 ]]; then #config_home=${XDG_CONFIG_HOME:-"$HOME/.config"} #qt5ct_colors_dir="$config_home/qt5ct/colors/" #test -d "$qt5ct_colors_dir" || mkdir -p "$qt5ct_colors_dir" #mv ./src/qt5ct_palette.conf "$qt5ct_colors_dir/$OUTPUT_THEME_NAME.conf" #fi if [[ "$ARC_TRANSPARENCY" == "false" ]]; then AUTOGEN_OPTS="${AUTOGEN_OPTS} --disable-transparency" fi echo "== Making theme..." mkdir distrib ./autogen.sh --prefix="$(readlink -e ./distrib/)" --disable-light --disable-dark "${AUTOGEN_OPTS}" make --jobs="${JOBS:-$(nproc || echo 1)}" install echo echo rm -fr "${DEST_PATH}" if [[ "$ARC_TRANSPARENCY" == "false" ]]; then mv ./distrib/share/themes/Arc-Darker-solid "${DEST_PATH}" if [[ -d ./distrib/share/themes/Arc-solid/cinnamon ]] ; then mv ./distrib/share/themes/Arc-solid/cinnamon "${DEST_PATH}"/cinnamon fi if [[ -d ./distrib/share/themes/Arc-solid/gnome-shell ]] ; then mv ./distrib/share/themes/Arc-solid/gnome-shell "${DEST_PATH}"/gnome-shell fi else mv ./distrib/share/themes/Arc-Darker "${DEST_PATH}" if [[ -d ./distrib/share/themes/Arc/cinnamon ]] ; then mv ./distrib/share/themes/Arc/cinnamon "${DEST_PATH}"/cinnamon fi if [[ -d ./distrib/share/themes/Arc/gnome-shell ]] ; then mv ./distrib/share/themes/Arc/gnome-shell "${DEST_PATH}"/gnome-shell fi fi cd "${DEST_PATH}" cp ./gtk-2.0/assets/focus-line.png ./gtk-2.0/assets/frame.png cp ./gtk-2.0/assets/null.png ./gtk-2.0/assets/frame-gap-start.png cp ./gtk-2.0/assets/null.png ./gtk-2.0/assets/frame-gap-end.png cp ./gtk-2.0/assets/null.png ./gtk-2.0/assets/line-v.png cp ./gtk-2.0/assets/null.png ./gtk-2.0/assets/line-h.png echo "== The theme was installed to ${DEST_PATH}" echo exit 0 ================================================ FILE: common/Makefile.am ================================================ if ENABLE_GTK2 GTK2_SUBDIR = gtk-2.0 endif if ENABLE_GTK3 GTK3_SUBDIR = gtk-3.0 endif if ENABLE_XFWM XFWM_SUBDIR = xfwm4 endif SUBDIRS = $(GTK2_SUBDIR) $(GTK3_SUBDIR) $(XFWM_SUBDIR) if ENABLE_LIGHT theme_DATA = $(srcdir)/index/light/index.theme endif if ENABLE_DARKER themedarker_DATA = $(srcdir)/index/darker/index.theme endif if ENABLE_DARK themedark_DATA = $(srcdir)/index/dark/index.theme endif ithemedir = $(DESTDIR)$(themedir) ithemedarkerdir = $(DESTDIR)$(themedarkerdir) ithemedarkdir = $(DESTDIR)$(themedarkdir) install-exec-hook: install-data-local: if ENABLE_CINNAMON $(MKDIR_P) $(ithemedir)/cinnamon cd $(srcdir)/cinnamon && cp thumbnail.png $(ithemedir)/cinnamon $(SASSC) $(srcdir)/cinnamon/sass/cinnamon.scss $(srcdir)/cinnamon/cinnamon.css; cd $(srcdir)/cinnamon && cp -R \ common-assets \ light-assets \ cinnamon.css \ $(ithemedir)/cinnamon if ENABLE_DARK $(MKDIR_P) $(ithemedarkdir)/cinnamon cd $(srcdir)/cinnamon && cp thumbnail-dark.png $(ithemedarkdir)/cinnamon/thumbnail.png $(SASSC) $(srcdir)/cinnamon/sass/cinnamon-dark.scss $(srcdir)/cinnamon/cinnamon-dark.css; cd $(srcdir)/cinnamon && cp -R \ common-assets \ dark-assets \ $(ithemedarkdir)/cinnamon cd $(srcdir)/cinnamon && cp -R \ cinnamon-dark.css \ $(ithemedarkdir)/cinnamon/cinnamon.css endif # ENABLE_DARK endif # ENABLE_GNOME_SHELL if ENABLE_GNOME_SHELL $(MKDIR_P) $(ithemedir)/gnome-shell $(SASSC) $(srcdir)/gnome-shell/$(GNOME_SHELL_VERSION)/sass/gnome-shell.scss $(srcdir)/gnome-shell/$(GNOME_SHELL_VERSION)/gnome-shell.css; cd $(srcdir)/gnome-shell/$(GNOME_SHELL_VERSION) && cp -RL \ common-assets \ light-assets \ gnome-shell.css \ $(ithemedir)/gnome-shell if ENABLE_DARK $(MKDIR_P) $(ithemedarkdir)/gnome-shell $(SASSC) $(srcdir)/gnome-shell/$(GNOME_SHELL_VERSION)/sass/gnome-shell-dark.scss $(srcdir)/gnome-shell/$(GNOME_SHELL_VERSION)/gnome-shell-dark.css; cd $(srcdir)/gnome-shell/$(GNOME_SHELL_VERSION) && cp -RL \ common-assets \ dark-assets \ $(ithemedarkdir)/gnome-shell cd $(srcdir)/gnome-shell/$(GNOME_SHELL_VERSION) && cp -R \ gnome-shell-dark.css \ $(ithemedarkdir)/gnome-shell/gnome-shell.css endif # ENABLE_DARK endif # ENABLE_GNOME_SHELL if ENABLE_METACITY if ENABLE_LIGHT cp -R $(srcdir)/metacity-1 $(ithemedir) cd $(ithemedir)/metacity-1 && rm metacity-theme-1-dark.xml metacity-theme-2-dark.xml thumbnail-dark.png endif # ENABLE_LIGHT if ENABLE_DARKER cp -R $(srcdir)/metacity-1 $(ithemedarkerdir) cd $(ithemedarkerdir)/metacity-1 && \ mv metacity-theme-1-dark.xml metacity-theme-1.xml && \ mv metacity-theme-2-dark.xml metacity-theme-2.xml && \ mv thumbnail-dark.png thumbnail.png endif # ENABLE_DARKER if ENABLE_DARK cp -R $(srcdir)/metacity-1 $(ithemedarkdir) cd $(ithemedarkdir)/metacity-1 && \ mv metacity-theme-1-dark.xml metacity-theme-1.xml && \ mv metacity-theme-2-dark.xml metacity-theme-2.xml && \ mv thumbnail-dark.png thumbnail.png endif # ENABLE_DARK endif # ENABLE_METACITY if ENABLE_OPENBOX if ENABLE_LIGHT cp -R $(srcdir)/openbox/Arc/* $(ithemedir) endif # ENABLE_LIGHT if ENABLE_DARKER cp -R $(srcdir)/openbox/Arc-Darker/* $(ithemedarkerdir) endif # ENABLE_DARKER if ENABLE_DARK cp -R $(srcdir)/openbox/Arc-Dark/* $(ithemedarkdir) endif # ENABLE_DARK endif # ENABLE_OPENBOX if ENABLE_UNITY if ENABLE_LIGHT cp -R $(srcdir)/unity $(ithemedir) cd $(ithemedir)/unity && rm -rf window-buttons-dark endif # ENABLE_LIGHT if ENABLE_DARKER cp -R $(srcdir)/unity $(ithemedarkerdir) cd $(ithemedarkerdir)/unity && \ rm -rf window-buttons && \ mv window-buttons-dark window-buttons endif # ENABLE_DARKER if ENABLE_DARK cp -R $(srcdir)/unity $(ithemedarkdir) cd $(ithemedarkdir)/unity && \ rm -rf window-buttons && \ mv window-buttons-dark window-buttons endif # ENABLE_DARK endif # ENABLE_UNITY uninstall-local: rm -rf $(ithemedir) if ENABLE_DARKER rm -rf $(ithemedarkerdir) endif # ENABLE_DARKER if ENABLE_DARK rm -rf $(ithemedarkdir) endif # ENABLE_DARK EXTRA_DIST = \ cinnamon \ gnome-shell \ index \ metacity-1 \ unity ================================================ FILE: common/cinnamon/sass/_colors.scss ================================================ // When color definition differs for dark and light variant, // it gets @if ed depending on $variant $base_color: if($variant =='light', #ffffff, #404552); $text_color: if($variant == 'light', #5c616c, #D3DAE3); $bg_color: if($variant =='light', #F5F6F7, #383C4A); $fg_color: if($variant =='light', #5c616c, #D3DAE3); $selected_fg_color: #ffffff; $selected_bg_color: #5294e2; $selected_borders_color: darken($selected_bg_color, 20%); $borders_color: if($variant =='light', darken($bg_color,9%), darken($bg_color,6%)); $link_color: if($variant == 'light', darken($selected_bg_color,10%), lighten($selected_bg_color,20%)); $link_visited_color: if($variant == 'light', darken($selected_bg_color,20%), lighten($selected_bg_color,10%)); $selection_mode_bg: if($transparency == 'true', transparentize($selected_bg_color, 0.05), $selected_bg_color); $selection_mode_fg: $selected_fg_color; $warning_color: #F27835; $error_color: #FC4138; $warning_fg_color: white; $error_fg_color: white; $success_color: #73d216; $destructive_color: #F04A50; $suggested_color: #4DADD4; $destructive_fg_color: white; $suggested_fg_color: white; $drop_target_color: #F08437; //insensitive state derived colors $insensitive_fg_color: if($variant == 'light', transparentize($fg_color, 0.45), transparentize($fg_color, 0.55)); $insensitive_bg_color: if($variant == 'light', mix($bg_color, $base_color, 40%), lighten($bg_color, 2%)); $header_bg: red; @if $transparency=='true' and $variant=='light' { $header_bg: transparentize(#e7e8eb, 0.05); } @if $transparency=='false' and $variant=='light' { $header_bg: #e7e8eb; } @if $transparency=='true' and ($variant=='dark' or $darker=='true') { $header_bg: transparentize(#2f343f, 0.03); } @if $transparency=='false' and ($variant=='dark' or $darker=='true') { $header_bg: #2f343f; } $header_bg_backdrop: if($darker == 'true' or $variant == 'dark', lighten($header_bg, 1.5%), lighten($header_bg, 3%)); $header_border: if($variant == 'light' and $darker=='false', darken($header_bg, 7%), darken($header_bg, 4%)); $header_fg: if($variant == 'light', saturate(transparentize($fg_color, 0.2), 10%), saturate(transparentize($fg_color, 0.2), 10%)); $header_fg: if($darker == 'true', saturate(transparentize(#D3DAE3, 0.2), 10%), $header_fg); $dark_sidebar_bg: if($transparency == 'true', transparentize(#353945, 0.05), #353945); $dark_sidebar_fg: #BAC3CF; $dark_sidebar_border: if($variant == 'light', $dark_sidebar_bg, darken($dark_sidebar_bg, 5%)); $osd_fg_color: $dark_sidebar_fg; $osd_bg_color: $dark_sidebar_bg; $osd_button_bg: transparentize(lighten($osd_bg_color, 22%), 0.6); $osd_button_border: transparentize(darken($osd_bg_color, 12%), 0.6); $osd_entry_bg: transparentize(lighten($osd_bg_color, 22%), 0.6); $osd_entry_border: transparentize(darken($osd_bg_color, 12%), 0.6); $osd_insensitive_bg_color: darken($osd_bg_color, 3%); $osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 30%); $osd_borders_color: transparentize(black, 0.3); $panel_bg: darken($dark_sidebar_bg, 4.7%); $panel_fg: $dark_sidebar_fg; $entry_bg: if($variant=='light', $base_color, lighten($base_color, 0%)); $entry_border: if($variant == 'light', #cfd6e6, darken($borders_color, 0%)); $header_entry_bg: if($darker == 'true' or $variant == 'dark', transparentize(lighten($header_bg, 22%), 0.6), transparentize($base_color, 0.1)); $header_entry_border: if($darker == 'true' or $variant == 'dark', transparentize(darken($header_bg, 12%), 0.6), transparentize($header_fg, 0.7)); $button_bg: if($variant == 'light', lighten($bg_color, 2%), lighten($base_color, 2%)); $button_border: $entry_border; $header_button_bg: if($darker == 'true' or $variant == 'dark', transparentize(lighten($header_bg, 22%), 0.6), transparentize($button_bg, 0.1)); $header_button_border: if($darker == 'true' or $variant == 'dark', transparentize(darken($header_bg, 12%), 0.6), transparentize($header_fg, 0.7)); //WM Buttons // Close $wm_button_close_bg: if($variant == 'light' and $darker == 'false', #f46067, #cc575d); $wm_button_close_hover_bg: if($variant == 'light' and $darker == 'false', #f68086, #d7787d); $wm_button_close_active_bg: if($variant == 'light' and $darker == 'false', #f13039, #be3841); $wm_icon_close_bg: if($variant == 'light' and $darker == 'false',#F8F8F9 , #2f343f); // Minimize, Maximize $wm_button_hover_bg: if($variant == 'light' and $darker == 'false', #fdfdfd, #454C5C); $wm_button_active_bg: $selected_bg_color; $wm_button_hover_border: if($variant == 'light' and $darker == 'false', #D1D3DA, #262932); $wm_icon_bg: if($variant == 'light' and $darker == 'false', #90949E, #90939B); $wm_icon_unfocused_bg: if($variant == 'light' and $darker == 'false', #B6B8C0, #666A74); $wm_icon_hover_bg: if($variant == 'light' and $darker == 'false', #7A7F8B, #C4C7CC); $wm_icon_active_bg: $selected_fg_color; ================================================ FILE: common/cinnamon/sass/_common.scss ================================================ $asset_path: if($variant == 'dark', dark-assets, light-assets); // // Globals // $font-size: 9; $font-family: Futura Bk bt, sans, Sans-Serif; $_bubble_bg_color: opacify($osd_bg_color,0.25); $_bubble_fg_color: $osd_fg_color; $_bubble_borders_color: transparentize($osd_fg_color,0.8); $_shell_fg_color: white; stage { font-family: $font-family; @include fontsize($font-size); color: $fg_color; } .label-shadow { color: rgba(0, 0, 0, 0); } %reset_style { background-color: transparent !important; background-gradient-direction: none !important; border: none !important; border-radius: 0 !important; } // // Buttons // %button { min-height: 20px; padding: 5px 32px; transition-duration: 0; &, &:focus, &:hover, &:hover:focus, &:active, &:active:focus, &:insensitive { border-radius: 2px; } @include button(normal); &:focus { @include button(focus); } &:hover { @include button(hover); } &:hover:focus { @include button(focus-hover); } &:active, &:active:focus { @include button(active); } &:insensitive { @include button(insensitive); } } %osd_button { min-height: 20px; padding: 5px 32px; transition-duration: 0; border-radius: 2px; @include button(osd); &:hover { @include button(osd-hover); } &:focus { color: $selected_bg_color; } &:active { @include button(osd-active); } &:insensitive { @include button(osd-insensitive); } } // // Entries // %entry { padding: 7px; caret-size: 1px; selection-background-color: $selected_bg_color; selected-color: $selected_fg_color; transition-duration: 300ms; border-radius: 3px; @include entry(normal); &:focus, &:hover { @include entry(focus); } &:insensitive { @include entry(insensitive); } StIcon.capslock-warning { icon-size: 16px; warning-color: $warning_color; padding: 0 4px; } } %osd_entry { padding: 7px; caret-size: 1px; caret-color: $osd_fg_color; selection-background-color: $selected_bg_color; selected-color: $selected_fg_color; transition-duration: 300ms; border-radius: 3px; @include entry(osd); &:focus { @include entry(osd-focus); } &:insensitive { @include entry(osd-insensitive); } } // // Scrollbars // StScrollView { &.vfade { -st-vfade-offset: 0px; } &.hfade { -st-hfade-offset: 0px; } } StScrollBar { padding: 8px; StScrollView & { min-width: 5px; min-height: 5px; } StBin#trough { background-color: transparentize($base_color, 0.9); border-radius: 8px; } StButton#vhandle, StButton#hhandle { border-radius: 2px; background-color: mix($fg_color, $bg_color, 40%); border: 0px solid; margin: 0px; &:hover { background-color: mix($fg_color, $bg_color, 30%); } &:active { background-color: $selected_bg_color; } } } .separator { -gradient-height: 1px; -gradient-start: rgba(0,0,0,0); -gradient-end: rgba(0,0,0,0); -margin-horizontal: 1.5em; height: 1em; } // // Slider // .popup-slider-menu-item, .slider { -slider-height: 4px; -slider-background-color: $button_border; //background of the trough -slider-border-color: transparentize(black, 1); //trough border color -slider-active-background-color: $selected_bg_color; //active trough fill -slider-active-border-color: transparentize(black, 1); //active trough border -slider-border-width: 0; -slider-handle-radius: 4px; height: 18px; min-width: 15em; border: 0 solid transparent; border-right-width: 1px; border-left-width: 5px; color: transparent; .popup-menu-item:active & { -slider-background-color: transparentize(black, 0.8); -slider-active-background-color: $selected_fg_color; } } // // Check Boxes // .check-box { CinnamonGenericContainer { spacing: .2em; min-height: 30px; padding-top: 2px; } StLabel { font-weight: normal; } StBin { width: 16px; height: 16px; background-image: url("#{$asset_path}/checkbox/checkbox-unchecked.svg"); } &:focus StBin { background-image: url("#{$asset_path}/checkbox/checkbox-unchecked-focused.svg"); } &:checked StBin { background-image: url("#{$asset_path}/checkbox/checkbox-checked.svg"); } &:focus:checked StBin { background-image: url("#{$asset_path}/checkbox/checkbox-checked-focused.svg"); } } // // Radio Buttons // .radiobutton { CinnamonGenericContainer { spacing: .2em; height: 26px; padding-top: 2px; } StLabel { padding-top: 4px; font-size: 0.9em; box-shadow: none; } StBin { width: 16px; height: 16px; background-image: url("#{$asset_path}/checkbox/checkbox-unchecked.svg"); } &:focus StBin { background-image: url("#{$asset_path}/checkbox/checkbox-unchecked-focused.svg"); } &:checked StBin { background-image: url("#{$asset_path}/checkbox/checkbox-checked.svg"); } &:focus:checked StBin { background-image: url("#{$asset_path}/checkbox/checkbox-checked-focused.svg"); } } // // Switches // .toggle-switch { width: 50px; height: 20px; background-size: contain; background-image: url("#{$asset_path}/switch/switch-off.svg"); &:checked { background-image: url("#{$asset_path}/switch/switch-on.svg"); } .popup-menu-item:active & { background-image: url("common-assets/switch/switch-off-selected.svg"); &:checked { background-image: url("common-assets/switch/switch-on-selected.svg"); } } } // // Links // .cinnamon-link { color: $link_color; text-decoration: underline; &:hover { color: lighten($link_color,10%); } } // // Tooltip // #Tooltip { border-radius: 3px; padding: 5px 12px; background-color: $osd_bg_color; color: $osd_fg_color; font-size: 1em; font-weight: normal; text-align: center; } // // Popvers/Menus // .menu, .popup-menu, %menu { color: $fg_color; border-image: url("#{$asset_path}/menu/menu.svg") 9 9 9 9; &-arrow { icon-size: 16px; } .popup-sub-menu { background-gradient-direction: none; box-shadow: none; border-image: url("#{$asset_path}/menu/submenu.svg") 9 9 9 9; .popup-menu-item:ltr { padding-right: 0em; } .popup-menu-item:rtl { padding-left: 0em; } StScrollBar { padding: 4px; StBin#trough, StBin#vhandle { border-width: 0; } } } .popup-menu-content { padding: 1em 1px; } .popup-menu-item { padding: .4em 1.75em; spacing: 1em; &:active { color: $selected_fg_color; background-color: transparent; border-image: url("common-assets/menu/menu-hover.svg") 9 9 1 1; } &:insensitive { color: transparentize($fg_color, 0.5); background: none; } } .popup-inactive-menu-item { //all icons and other graphical elements color: $fg_color; &:insensitive { color: $insensitive_fg_color; } } .popup-menu-item:active .popup-inactive-menu-item { color: $selected_fg_color; } &-icon { icon-size: 16px; } } .popup-menu-boxpointer { -arrow-border-radius: 3px; -arrow-background-color: rgba(0,0,0,0.0); -arrow-border-width: 1px; -arrow-border-color: rgba(0,0,0,0.0); -arrow-base: 0; -arrow-rise: 0; } .popup-combo-menu { @extend %menu; padding: 10px 1px; } .popup-image-menu-item {} .popup-combobox-item { spacing: 1em; } .popup-separator-menu-item { -gradient-height: 1px; -gradient-start: $borders_color; -gradient-end: $borders_color; -margin-horizontal: 0; height: 0.5em; } .popup-alternating-menu-item:alternate { font-weight: normal; } .popup-device-menu-item { spacing: .5em; } .popup-subtitle-menu-item { font-weight: normal; } .nm-menu-item-icons { spacing: .5em; } // // Panel // #panel { height: 27px; width: 32px; &:highlight { border-image: none; background-color: transparentize($error_color, 0.5); } &Left { spacing: 4px; &:dnd { background-gradient-direction: vertical; background-gradient-start: rgba(255,0,0,0.05); background-gradient-end: rgba(255,0,0,0.2); } &:ltr { padding-right: 4px; } &:rtl { padding-left: 4px; } &.vertical { padding: 0; &:ltr { padding-right: 0px; } &:rtl { padding-left: 0px; } } } &Right { &:dnd { background-gradient-direction: vertical; background-gradient-start: rgba(0,0,255,0.05); background-gradient-end: rgba(0,0,255,0.2); } &:ltr { padding-left: 4px; spacing: 0px; } &:rtl { padding-right: 4px; spacing: 0px; } &.vertical { padding: 0; &:ltr { padding-right: 0px; } &:rtl { padding-left: 0px; } } } &Center { spacing: 4px; &:dnd { background-gradient-direction: vertical; background-gradient-start: rgba(0,255,0,0.05); background-gradient-end: rgba(0,255,0,0.2); } } } .panel { $_panel_fg_color: $_shell_fg_color; &-top, &-bottom, &-left, &-right { color: $_panel_fg_color; font-size: 1em; padding: 0px; } &-top { border-image: url('common-assets/panel/panel-top.svg') 1 1 1 1; } &-bottom { border-image: url('common-assets/panel/panel-bottom.svg') 1 1 1 1; } &-left { border-image: url('common-assets/panel/panel-left.svg') 1 1 1 1; } &-right { border-image: url('common-assets/panel/panel-right.svg') 1 1 1 1; } &-dummy { background-color: transparentize($error_color, 0.5); &:entered { background-color: transparentize($error_color, 0.4); } } &-status-button { border-width: 0; -natural-hpadding: 3px; -minimum-hpadding: 3px; font-weight: bold; color: white; &:hover {} } &-button { -natural-hpadding: 6px; -minimum-hpadding: 2px; font-weight: bold; color: green; transition-duration: 100; &:hover {} } } .system-status-icon { icon-size: 16px; padding: 0 1px; } // // Overview // #overview { spacing: 12px; } .window-caption { background-color: $osd_bg_color; border: 1px solid $osd_bg_color; color: $osd_fg_color; spacing: 4px; border-radius: 2px; font-size: 9pt; padding: 5px 8px; -cinnamon-caption-spacing: 4px; &#selected, &:focus { background-color: $selected_bg_color; color: $selected_fg_color; border: 1px solid $selected_bg_color; } } .overview-empty-placeholder { text-align: center; font-weight: bold; spacing: 1em; padding: 16px; color: $_shell_fg_color; border-image: url("common-assets/misc/osd.svg") 9 9 9 9; } .expo-workspaces-name-entry { height: 1.5em; border-radius: 2px; font-size: 9pt; padding: 5px 8px; -cinnamon-caption-spacing: 4px; transition-duration: 300; @include entry(osd); &:focus, &#selected { border: 1px solid $selected_bg_color; background-color: $selected_bg_color; color: $selected_fg_color; font-style: italic; selection-background-color: $selected_fg_color; selected-color: $selected_bg_color; } &:hover { border: 1px solid $selected_bg_color; } } .expo-workspace-thumbnail-frame { border: 4px solid rgba(255,255,255,0.0); background-color: rgba(255,255,255,0.0); border-radius: 2px; &#active { border: 4px solid $selected_bg_color; background-color: black; border-radius: 2px; } } .expo-background { background-color: opacify($osd_bg_color, 1); } .workspace { //&-controls { visible-height: 32px; } &-thumbnails { spacing: 26px; &-background, &-background:rtl { padding: 8px; } } &-add-button { background-image: url("common-assets/misc/add-workspace.svg"); height: 200px; width: 35px; transition-duration: 100; &:hover { background-image: url("common-assets/misc/add-workspace-hover.svg"); transition-duration: 100; } &:active { background-image: url("common-assets/misc/add-workspace-active.svg"); transition-duration: 100; } } &-overview-background-shade { background-color: rgba(0,0,0,0.5); } } .workspace-close-button, .window-close { background-image: url("common-assets/misc/close.svg"); background-size: 26px; height: 26px; width: 26px; -cinnamon-close-overlap: 10px; &:hover { background-image: url("common-assets/misc/close-hover.svg"); background-size: 26px; height: 26px; width: 26px; } &:active { background-image: url("common-assets/misc/close-active.svg"); background-size: 26px; height: 26px; width: 26px; } } //.workspace-thumbnail-indicator { // outline: 2px solid red; // border: 1px solid green; //} // //.window-close:rtl { // -st-background-image-shadow: 2px 2px 6px rgba(0,0,0,0.5); //} .window-close-area { background-image: url("common-assets/misc/trash-icon.svg"); height: 120px; width: 400px; } // // About Dialog (applet.js and desklet.js) // .about { &-content { width: 550px; height: 250px; spacing: 8px; padding-bottom: 10px; } &-title { font-size: 2em; font-weight: bold; } &-uuid { font-size: 10px; color: #888; } &-icon { padding-right: 20px; padding-bottom: 14px; } &-scrollBox { border: 1px solid $borders_color; border-radius: 2px; background-color: $base_color; padding: 4px; padding-right: 0; border-radius: 0; &-innerBox { padding: 1.2em; spacing: 1.2em; } } &-description { padding-top: 4px; padding-bottom: 16px; } &-version { padding-left: 7px; font-size: 10px; color: #888; } } // // Calendar // .calendar { padding: .4em 1.75em; spacing-rows: 0px; spacing-columns: 0px; } .calendar-month-label { color: $fg_color; font-weight: bold; padding: 8px 0; } .calendar-change-month-back, .calendar-change-month-forward { width: 16px; height: 16px; } //arrow back .calendar-change-month-back { background-image: url("common-assets/misc/calendar-arrow-left.svg"); &:focus, &:hover { background-image: url("common-assets/misc/calendar-arrow-left-hover.svg"); } &:active { background-image: url("common-assets/misc/calendar-arrow-left.svg"); } &:rtl { background-image: url("common-assets/misc/calendar-arrow-right.svg"); &:focus, &:hover { background-image: url("common-assets/misc/calendar-arrow-right-hover.svg"); } &:active { background-image: url("common-assets/misc/calendar-arrow-right.svg"); } } } //arrow forward .calendar-change-month-forward { background-image: url("common-assets/misc/calendar-arrow-right.svg"); &:focus, &:hover { background-image: url("common-assets/misc/calendar-arrow-right-hover.svg"); } &:active { background-image: url("common-assets/misc/calendar-arrow-right.svg"); } &:rtl { background-image: url("common-assets/misc/calendar-arrow-left.svg"); &:focus, &:hover { background-image: url("common-assets/misc/calendar-arrow-left-hover.svg"); } &:active { background-image: url("common-assets/misc/calendar-arrow-left.svg"); } } } .datemenu-date-label { padding: .4em 1.75em; font-weight: bold; text-align: center; color: $fg_color; border-radius: 2px; } .calendar-day-base { font-size: 8pt; text-align: center; width: 2.5em; height: 2.5em; padding: 0.1em; margin: 0.1em; border-radius: 999px; } .calendar-day-heading { color: transparentize($fg_color, 0.15); margin-top: 1em; font-size: 6pt; width: 2.5em; height: 2em; } .calendar-day { border-width: 0; color: transparentize($fg_color, 0.2); } .calendar-day-top { border-top-width: 0; } .calendar-day-left { border-left-width: 0; } .calendar-nonwork-day { color: $fg_color; background-color: transparent; font-weight: bold; border-width: 0; } .calendar-today, .calendar-today:active, .calendar-today:focus, .calendar-today:hover { font-weight: bold; color: $selected_fg_color; background-color: $selected_bg_color; border-width: 0; } .calendar-other-month-day { color: transparentize($fg_color, 0.7); opacity: 1; } .calendar-week-number { color: transparentize($fg_color, 0.3); font-size: 6pt; width: 2.5em; height: 2em; padding: 1.2em 0 0; text-align: center; } // // Notifications // #notification { border-radius: 3px; border-image: url("common-assets/misc/bg.svg") 9 9 9 9; padding: 13px; spacing-rows: 10px; spacing-columns: 10px; margin-from-right-edge-of-screen: 20px; width: 34em; color: $osd_fg_color; .menu &, .popup-menu & { &, &.multi-line-notification { color: $fg_color; } border-image: url("#{$asset_path}/misc/message.svg") 9 9 9 9; .notification-button, .notification-icon-button { @extend %button; padding: 5px; } StEntry { @extend %entry; } } &.multi-line-notification { padding-bottom: 13px; color: $osd_fg_color; } &-scrollview { max-height: 10em; > .top-shadow, > .bottom-shadow { height: 1em; } &:ltr > StScrollBar { padding-left: 6px; } &:rtl > StScrollBar { padding-right: 6px; } } &-body { spacing: 5px; } &-actions { spacing: 10px; } } .notification { &-with-image { min-height: 159px; color: $osd_fg_color; } &-button, &-icon-button { @extend %osd_button; padding: 5px; } &-icon-button > StIcon { icon-size: 36px; } StEntry { @extend %osd_entry; } } // // Alt Tab /// #altTabPopup { padding: 8px; spacing: 16px; } .switcher-list { color: $osd_fg_color; background: none; border: none; border-image: url("common-assets/misc/bg.svg") 9 9 9 9; border-radius: 3px; padding: 20px; > StBoxLayout { padding: 4px; } &-item-container { spacing: 8px; } .item-box { padding: 8px; border-radius: 2px; &:outlined { padding: 8px; border: 1px solid $selected_bg_color; } &:selected { color: $selected_fg_color; background-color: $selected_bg_color; border: 0px solid $selected_bg_color; } } .thumbnail { width: 256px; } .thumbnail-box { padding: 2px; spacing: 4px; } .separator { width: 1px; background: rgba(255,255,255,0.2); } } .switcher-arrow { border-color: rgba(0,0,0,0); color: $osd_fg_color; &:highlighted { border-color: rgba(0,0,0,0); color: $_shell_fg_color; } } //.switcher-preview-backdrop { background-color: rgba(25,25,25,0.95); } .thumbnail-scroll-gradient-left { background-color: rgba(0, 0, 0, 0); border-radius: 24px; border-radius-topright: 0px; border-radius-bottomright: 0px; width: 60px; } .thumbnail-scroll-gradient-right { background-color: rgba(0, 0, 0, 0); border-radius: 24px; border-radius-topleft: 0px; border-radius-bottomleft: 0px; width: 60px; } // //Activities Ripples // .ripple-box { width: 104px; height: 104px; background-image: url("common-assets/misc/corner-ripple.svg"); background-size: contain; } // // Modal dialogs // .lightbox { background-color: rgba(0, 0, 0, 0.4); } .flashspot { background-color: white; } .modal-dialog { color: $fg_color; background-color: transparentize($bg_color, 1); border: none; border-image: url("#{$asset_path}/misc/modal.svg") 9 9 9 67; padding: 0 5px 6px 5px; > StBoxLayout:first-child { padding: 20px 10px 10px 10px; } &-button-box { spacing: 0; margin: 0px; padding: 14px 10px; background: none; border: none; border-image: url("#{$asset_path}/misc/button-box.svg") 9 9 9 9; .modal-dialog-button { padding-top: 0; padding-bottom: 0; height: 30px; @extend %osd_button; } } } // // Run dialog // .run-dialog { padding: 0px 15px 10px 15px; border-image: url("common-assets/misc/bg.svg") 9 9 9 9; > * { padding: 0; } &-label { font-size: 0; font-weight: bold; color: $osd_fg_color; padding-bottom: 0; } &-error-label { color: $error_color; } &-error-box { padding-top: 15px; spacing: 5px; } &-completion-box { padding-left: 15px; font-size: 10px; } &-entry { width: 21em; padding: 7px; border-radius: 3px; caret-color: $osd_fg_color; selected-color: $selected_fg_color; selection-background-color: $selected_bg_color; @include entry(osd); &:focus { @include entry(osd-focus); } } .modal-dialog-button-box { border: none; box-shadow: none; background: none; border-image: none; background-gradient-direction: none; } } /* CinnamonMountOperation Dialogs */ .cinnamon-mount-operation-icon { icon-size: 48px; } .mount-password-reask { color: $warning_color; } .show-processes-dialog, .mount-question-dialog { spacing: 24px; &-subject { padding-top: 10px; padding-left: 17px; padding-bottom: 6px; &:rtl { padding-left: 0px; padding-right: 17px; } } &-description { padding-left: 17px; width: 28em; &:rtl { padding-right: 17px; } } } .show-processes-dialog-app-list { max-height: 200px; padding-top: 24px; padding-left: 49px; padding-right: 32px; &:rtl { padding-right: 49px; padding-left: 32px; } &-item { color: #ccc; &:hover { color: white } &:ltr { padding-right: 1em; } &:rtl { padding-left: 1em; } &-icon:ltr { padding-right: 17px; } &-icon:rtl { padding-left: 17px; } &-name { font-size: 1.1em; } } } // // Magnifier // .magnifier-zoom-region { border: 2px solid rgba(128, 0, 0, 1); .full-screen { border-width: 0px; } } // // On-Screen Keyboard // #keyboard { background-color: $osd_bg_color; border-width: 0; border-top-width: 1px; border-color: transparentize(black, 0.6); } .keyboard-layout { spacing: 10px; padding: 10px; } .keyboard-row { spacing: 15px; } .keyboard-key { min-height: 2em; min-width: 2em; font-size: 14pt; font-weight: bold; border-radius: 3px; box-shadow: none; @include button(osd); &:hover { @include button(osd-hover); } &:active, &:checked { @include button(osd-active); } &:grayed { @include button(osd-insensitive); } } .keyboard-subkeys { //long press on a key popup color: $osd_fg_color; padding: 5px; -arrow-border-radius: 2px; -arrow-background-color: $osd_bg_color; -arrow-border-width: 1px; -arrow-border-color: transparentize(black, 0.6);; -arrow-base: 20px; -arrow-rise: 10px; -boxpointer-gap: 5px; } // // Cinnamon Specific Section // // // Menu (menu.js) // .menu { &-favorites-box { padding: 10px; transition-duration: 300; background-color: $bg_color; border: 1px solid $borders_color; spacing: 0.5em; } &-favorites-scrollbox { padding-bottom: 0.5em; border-bottom: 1px solid; border-color: $selected_bg_color; } &-favorites-button { padding: 10px; border: 1px solid rgba(0,0,0,0); &:hover { @extend %button:hover; } } &-places { &-box { padding: 10px; border: 0px solid red; } &-button { padding: 10px; } } &-categories-box { padding: 10px 30px 10px 30px; } &-applications-inner-box, &-applications-outer-box { padding: 10px 10px 0 10px; } &-application-button { padding: 7px; border: 1px solid rgba(0,0,0,0); // This style is used in menu application buttons for applications which were newly installed &:highlighted { font-weight: bold; } &-selected { padding: 7px; @extend %button:hover; &:highlighted { font-weight: bold; } } &-label:ltr { padding-left: 5px; } &-label:rtl { padding-right: 5px; } } &-category-button { padding: 7px; border: 1px solid rgba(0,0,0,0); &-selected { padding: 7px; @extend %button:hover; } &-hover { background-color: red; border-radius: 2px; } &-greyed { padding: 7px; color: $insensitive_fg_color; border: 1px solid rgba(0,0,0,0); } &-label:ltr { padding-left: 5px; } &-label:rtl { padding-right: 5px; } } // Name and description of the currently hovered item in the menu // This appears on the bottom right hand corner of the menu &-selected-app-box { padding-right: 30px; padding-left: 28px; text-align: right; height: 30px; &:rtl { padding-top: 10px; height: 30px; } } &-selected-app-title { font-weight: bold; } &-selected-app-description { max-width: 150px; } &-search-box:ltr { padding-left: 30px; } &-search-box-rtl { padding-right: 30px; } } #menu-search-entry { width: 250px; font-weight: normal; caret-color: $fg_color; @extend %entry; } .menu-search-entry-icon { icon-size: 1em; color: $fg_color; } /* Context menu (at the moment only for favorites) */ .menu-context-menu { padding: 1em 1px; } // // OSD // .info-osd { text-align: center; font-weight: bold; spacing: 1em; padding: 16px; color: $_shell_fg_color; border-image: url("common-assets/misc/osd.svg") 9 9 9 9; } .osd-window { text-align: center; font-weight: bold; spacing: 1em; padding: 20px; margin: 32px; min-width: 64px; min-height: 64px; color: $_shell_fg_color; background: none; border: none; border-radius: 5px; border-image: url("common-assets/misc/osd.svg") 9 9 9 9; .osd-monitor-label { font-size: 3em; } .level { padding: 0; height: 4px; background-color: transparentize(black, 0.5); border-radius: 2px; color: $selected_bg_color; } .level-bar { background-color: $selected_bg_color; } } // // Window list (windowList.js) // .window-list { &-box { spacing: 6px; padding-left: 10px; .panel-bottom & { padding-top: 1px; } .panel-top & { padding-bottom: 1px; } .progress { background-color: $selected_bg_color; } &.vertical { spacing: 4px; padding: 10px 0; } &:highlight { background-color: transparentize($error_color, 0.5); } } &-preview { spacing: 8px; color: $osd_fg_color; background: none; border: none; border-image: url("common-assets/misc/bg.svg") 9 9 9 9; border-radius: 3px; padding: 16px; } &-item-label { width: 15em; min-width: 5px; } &-item-box { background-image: none; padding-top: 0; padding-left: 8px; padding-right: 8px; spacing: 4px; transition-duration: 100; color: transparentize($_shell_fg_color, 0.4); &:hover, &:focus:hover { color: $_shell_fg_color; background-color: $selected_bg_color; } &:focus:hover { .panel-bottom & { box-shadow: 0 -2px 0 0 $_shell_fg_color inset; } .panel-top & { box-shadow: 0 2px 0 0 $_shell_fg_color inset; } .panel-left & { box-shadow: 2px 0 0 0 $_shell_fg_color inset; } .panel-right & { box-shadow: -2px 0 0 0 $_shell_fg_color inset; } } &:active, &:checked, &:focus { color: $_shell_fg_color; background-color: transparentize($osd_fg_color,.6); font-weight: bold; .panel-bottom & { box-shadow: 0 -2px 0 0 $selected_bg_color inset; } .panel-top & { box-shadow: 0 2px 0 0 $selected_bg_color inset; } .panel-left & { box-shadow: 2px 0 0 0 $selected_bg_color inset; } .panel-right & { box-shadow: -2px 0 0 0 $selected_bg_color inset; } } &.right, &.left { padding-left: 0px; padding-right: 0px; } } &-item-demands-attention { background-gradient-start: $warning_color; background-gradient-end: $warning_color; } } // // Grouped Window List (Cinnamon 4) // .grouped-window-list { &-thumbnail-label { padding-left: 3px; } &-number-label { z-index: 99; color: $_shell_fg_color; } /// May need to revise depending on upstream GWL developments &-button-label { padding: 1px; } &-badge { border-radius: 256px; background-color: $panel_bg; } &-thumbnail-alert { background-color: $warning_color; } &-item-box { transition-duration: 100; background-image: none; color: transparentize($_shell_fg_color, 0.4); &:hover, &:active:hover { color: $_shell_fg_color; background-color: $selected_bg_color; } &:active { background-color: rgba(0,0,0,0.01); .panel-bottom & { box-shadow: 0 -2px 0 0 $selected_bg_color inset; } .panel-top & { box-shadow: 0 2px 0 0 $selected_bg_color inset; } .panel-left & { box-shadow: 2px 0 0 0 $selected_bg_color inset; } .panel-right & { box-shadow: -2px 0 0 0 $selected_bg_color inset; } } &:active:hover { .panel-bottom & { box-shadow: 0 -2px 0 0 $_shell_fg_color inset; } .panel-top & { box-shadow: 0 2px 0 0 $_shell_fg_color inset; } .panel-left & { box-shadow: 2px 0 0 0 $_shell_fg_color inset; } .panel-right & { box-shadow: -2px 0 0 0 $_shell_fg_color inset; } } &:focus { color: $_shell_fg_color; background-color: transparentize($osd_fg_color,.6); font-weight: bold; .panel-bottom & { box-shadow: 0 -2px 0 0 $selected_bg_color inset; } .panel-top & { box-shadow: 0 2px 0 0 $selected_bg_color inset; } .panel-left & { box-shadow: 2px 0 0 0 $selected_bg_color inset; } .panel-right & { box-shadow: -2px 0 0 0 $selected_bg_color inset; } } &:focus:hover { background-color: $selected_bg_color; .panel-bottom & { box-shadow: 0 -2px 0 0 $_shell_fg_color inset; } .panel-top & { box-shadow: 0 2px 0 0 $_shell_fg_color inset; } .panel-left & { box-shadow: 2px 0 0 0 $_shell_fg_color inset; } .panel-right & { box-shadow: -2px 0 0 0 $_shell_fg_color inset; } } .progress { background-color: $selected_bg_color; } } &-item-demands-attention { background-gradient-start: $warning_color; background-gradient-end: $warning_color; } &-thumbnail-menu { color: $osd_fg_color; background: none; border: none; border-image: url("common-assets/misc/bg.svg") 9 9 9 9; border-radius: 3px; padding: 10px 20px; .item-box { margin: 8px; spacing: 4px; border-radius: 2px; border: 1px solid none; &:outlined { border: 1px solid $selected_bg_color; } &:selected { background-color: $selected_bg_color; border: 1px solid $selected_bg_color; color: $selected_fg_color; } } .thumbnail-box { padding: 2px; spacing: 4px; } .thumbnail { width: 256px; } .separator { width: 1px; background: $selected_bg_color; } } } .vertical .grouped-window-list-item-box { padding: 2px 0; } /// // Sound Applet (status/volume.js) // .sound-button { width: 22px; height: 13px; padding: 8px; @extend %button; &-container { padding-right: 3px; padding-left: 3px; } StIcon { icon-size: 1.4em; } } .sound-track { &-infos { padding: 5px; } &-info { padding-top: 2px; padding-bottom: 2px; StIcon { icon-size: 16px; } StLabel { padding-left: 5px; padding-right: 5px; } } &-box { padding-left: 15px; padding-right: 15px; max-width: 220px; } } .sound-seek-box { padding-left: 15px; StLabel { padding-top: 2px; } StIcon { icon-size: 16px; } } .sound-seek-slider { width: 140px; } .sound-volume-menu-item { padding: .4em 1.75em; StIcon { icon-size: 1.14em; padding-left: 8px; padding-right: 8px; } } .sound-playback-control { padding: 5px 10px 10px 10px; } // 2.8 .sound-player { padding: 0 4px; > StBoxLayout:first-child { padding: 5px 10px 12px 10px; spacing: 0.5em; StButton:small { width: 16px; height: 16px; padding: 1px; StIcon { icon-size: 12px; } } } &-generic-coverart { background: rgba(0,0,0,0.2); } &-overlay { width: 290px; height: 70px; padding: 15px; spacing: 0.5em; background: transparentize(darken($osd_bg_color, 5%), 0.1); border: 0px solid darken($osd_bg_color, 10%); border-bottom: 1px ; color: $osd_fg_color; StButton { width: 22px; height: 13px; padding: 5px; color: $osd_fg_color; border-radius: 2px; border: 1px solid transparentize($osd_bg_color,1); StIcon { icon-size: 16px; } &:hover{ @include button(osd-hover); } &:active { @include button(active); } } StBoxLayout { padding-top: 2px; } } .slider { height: 0.5em; padding: 0; border: none; -slider-height: 0.5em; -slider-background-color: if($variant == 'light', $button_border, darken($bg_color, 5%)); -slider-border-color: rgba(0,0,0,0); -slider-active-background-color: $selected_bg_color; -slider-active-border-color: rgba(0,0,0,0); -slider-border-width: 0px; -slider-handle-radius: 0px; } } // // Workspace Switcher applet (workspaceSwitcher.js) // #workspaceSwitcher { spacing: 0px; padding: 3px; } /* Controls the styling when using the "Simple buttons" option */ .workspace-switcher { padding-left: 3px; padding-right: 3px; } .workspace-button { width: 20px; height: 10px; color: $selected_fg_color; padding: 3px; padding-top: 4px; transition-duration: 300; &:outlined, &:outlined:hover { color: $selected_bg_color; } &:hover { color: transparentize($selected_bg_color, 0.5) } &.vertical { height: 15px; } } /* Controls the style when using the "Visual representation" option */ .workspace-graph { padding: 3px; spacing: 3px; } .workspace-graph .workspace { border: 1px solid transparentize(black, 0.6); background-gradient-direction: none; background-color: transparentize(black, 0.8); } .workspace-graph .workspace:active { border: 1px solid $selected_bg_color; background-gradient-direction: none; } .workspace-graph .workspace .windows { -active-window-background: lighten($panel_bg, 15%); -active-window-border: rgba(0, 0, 0, 0.8); -inactive-window-background: lighten($panel_bg, 15%); -inactive-window-border: rgba(0, 0, 0, 0.8); } .workspace-graph .workspace:active .windows { -active-window-background: lighten($panel_bg, 20%); -active-window-border: rgba(0, 0, 0, 0.8); -inactive-window-background: lighten($panel_bg, 5%); -inactive-window-border: rgba(0, 0, 0, 0.8); } // // Panel Launchers Applet (panelLaunchers.js) // .panel-launchers { padding: 0 4px; .launcher { padding: 0 4px; transition-duration: 200; background-image: none; } &.vertical { padding: 4px 0; .launcher { padding: 4px 0; } } .launcher:hover { background-color: $selected_bg_color; } } // // Overview corner // #overview-corner { background-image: url("common-assets/misc/overview.png"); &:hover { background-image: url("common-assets/misc/overview-hover.png"); } } // // Applets (applet.js) // .applet { &-separator { padding: 1px 4px; } &-separator-line { width: 1px; background: rgba(255,255,255, 0.12); } &-box { padding-left: 3px; padding-right: 3px; spacing: 4px; color: $_shell_fg_color; text-shadow: none; transition-duration: 100; &.vertical { padding: 3px 0; } &:hover { color: $selected_fg_color; background-color: $selected_bg_color; } &:highlight { background-image: none; border-image: none; background-color: transparentize($error_color, 0.5); } } &-label { font-weight: bold; color: $_shell_fg_color; &:hover, .applet-box:hover > & { color: $selected_fg_color; text-shadow: none; } } &-icon { color: $_shell_fg_color; icon-size: 22px; &:hover, .applet-box:hover > & { color: $selected_fg_color; text-shadow: none; } } } // // User Applet // .user-icon { width: 32px; height: 32px; background-color: transparent; border: none; border-radius: 0; } .user-label { color: $fg_color; font-size: 1em; font-weight: bold; margin: 0px; } // // Desklets (desklet.js) // .desklet { color: $osd_fg_color; &:highlight { background-color: transparentize($error_color, 0.5); } &-with-borders { border-image: url("common-assets/misc/bg.svg") 9 9 9 9; color: $osd_fg_color; padding: 12px; padding-bottom: 16px; &:highlight { background-color: transparentize($error_color, 0.5); } } &-with-borders-and-header { border-image: url("common-assets/misc/desklet.svg") 9 9 9 9; color: $osd_fg_color; border-radius: 0; border-radius-topleft: 0; border-radius-topright: 0; padding: 12px; padding-bottom: 17px; &:highlight { background-color: transparentize($error_color, 0.5); } } &-header { border-image: url("common-assets/misc/desklet-header.svg") 9 9 9 9; color: $osd_fg_color; font-size: 1em; padding: 12px; padding-bottom: 6px; } &-drag-placeholder { border: 2px solid $selected_bg_color; background-color: transparentize($selected_bg_color, 0.7); } } .photoframe-box { border-image: url("common-assets/misc/bg.svg") 9 9 9 9; color: $osd_fg_color; padding: 12px; padding-bottom: 16px; } // // Workspace OSD // .workspace-osd { text-align: center; font-weight: bold; spacing: 1em; padding: 16px; color: $_shell_fg_color; border-image: url("common-assets/misc/osd.svg") 9 9 9 9; } // // Notification Applet // .notification-applet-padding { padding: .5em 1em; } .notification-applet-container { max-height: 100px; } // // Tile Preview // .tile-preview, .tile-preview.snap, .tile-hud, .tile-hud.snap { background-color: transparentize($selected_bg_color, 0.7); border: 1px solid $selected_bg_color; } // // Xkcd Desklet // .xkcd-box { padding: 6px; border: 0px; background-color: rgba(0,0,0,0); border-radius: 0px; } ================================================ FILE: common/cinnamon/sass/_drawing.scss ================================================ // Drawing mixins // generic drawing of more complex things // provide font size in rem, with px fallback @mixin fontsize($size: 24, $base: 16) { font-size: round($size) + pt; //font-size: ($size / $base) * 1rem; } // Entries @mixin entry($t, $dark:false) { // // Entries drawing function // //@extend %reset_style; @if $t==normal { color: $text_color; background-color: $entry_bg; border: 1px solid $entry_border; box-shadow: inset 0 2px 4px transparentize($entry_bg, 0.95); } @if $t==focus { color: $fg_color; background-color: $entry_bg; border: 1px solid $selected_bg_color; box-shadow: inset 0 2px 4px transparentize($entry_bg, 0.95); } @if $t==insensitive { color: $insensitive_fg_color; background-color: mix($entry_bg, $bg_color, 55%); border-color: 1px solid mix($entry_border, $bg_color, 55%); box-shadow: inset 0 2px 4px transparentize(mix($entry_bg, $bg_color, 55%), 0.95); } @if $t==osd { color: $osd_fg_color; background-color: $osd_entry_bg; border: 1px solid $osd_entry_border; box-shadow: inset 0 2px 4px transparentize(black, 0.95); } @if $t==osd-focus { color: $selected_fg_color; background-color: $selected_bg_color; border: 1px solid $selected_bg_color; box-shadow: inset 0 2px 4px transparentize(black, 0.95); } @if $t==osd-insensitive { color: transparentize($osd_fg_color, 0.45); background-color: transparentize($osd_entry_bg, 0.15); border: 1px solid $osd_entry_border; box-shadow: inset 0 2px 4px transparentize(black, 0.95); } } // Buttons @mixin button($t) { // // Button drawing function // //@extend %reset_style; text-shadow: 0 1px transparentize($base_color, 1); @if $t==normal { // // normal button // color: $fg_color; background-color: $button_bg; border: 1px solid $button_border; box-shadow: inset 0 2px 4px transparentize($button_bg, 0.95); } @else if $t==focus { // // focused button // color: $fg_color; background-color: $button_bg; border: 1px solid $selected_bg_color; box-shadow: inset 0 2px 4px transparentize($button_bg, 0.95); } @else if $t==focus-hover { // // focused button // color: $fg_color; background-color: $button_bg; border: 1px solid $selected_bg_color; box-shadow: inset 0 2px 4px transparentize($button_bg, 0.95); } @else if $t==hover { // // hovered button // color: $fg_color; background-color: lighten($button_bg, 5%); border: 1px solid $button_border; box-shadow: inset 0 2px 4px transparentize(lighten($button_bg, 5%), 0.95); } @else if $t==active { // // pushed button // color: $selected_fg_color; background-color: $selected_bg_color; border: 1px solid $selected_bg_color; box-shadow: inset 0 2px 4px $selected_bg_color; } @else if $t==insensitive { // // insensitive button // color: $insensitive_fg_color; border: 1px solid transparentize($button_border, 0.45); background-color: transparentize($button_bg, 0.45); box-shadow: inset 0 2px 4px transparentize($button_bg, 0.95); } @else if $t==osd { // // normal osd button // color: $osd_fg_color; border: 1px solid $osd_button_border; background-color: $osd_button_bg; } @else if $t==osd-hover { // // active osd button // color: $osd_fg_color; border: 1px solid $osd_button_border; background-color: opacify(lighten($osd_button_bg, 7%), 0.1); } @else if $t==osd-active { // // active osd button // color: $selected_fg_color; border: 1px solid $selected_bg_color; background-color: $selected_bg_color; } @else if $t==osd-insensitive { // // insensitive osd button // color: $osd_insensitive_fg_color; border: 1px solid $osd_button_border; background-color: transparentize($osd_button_bg, 0.15); } } ================================================ FILE: common/cinnamon/sass/cinnamon-dark.scss ================================================ $variant: 'dark'; $transparency: 'true'; $darker: 'false'; @import "_colors"; //use gtk colors @import "_drawing"; @import "_common"; ================================================ FILE: common/cinnamon/sass/cinnamon.scss ================================================ $variant: 'light'; $transparency: 'true'; $darker: 'false'; @import "_colors"; //use gtk colors @import "_drawing"; @import "_common"; ================================================ FILE: common/gnome-shell/3.18/sass/_colors.scss ================================================ // When color definition differs for dark and light variant, // it gets @if ed depending on $variant $base_color: if($variant =='light', #ffffff, #404552); $text_color: if($variant == 'light', #5c616c, #D3DAE3); $bg_color: if($variant =='light', #F5F6F7, #383C4A); $fg_color: if($variant =='light', #5c616c, #D3DAE3); $selected_fg_color: #ffffff; $selected_bg_color: #5294e2; $selected_borders_color: darken($selected_bg_color, 20%); $borders_color: if($variant =='light', darken($bg_color,9%), darken($bg_color,6%)); $link_color: if($variant == 'light', darken($selected_bg_color,10%), lighten($selected_bg_color,20%)); $link_visited_color: if($variant == 'light', darken($selected_bg_color,20%), lighten($selected_bg_color,10%)); $selection_mode_bg: if($transparency == 'true', transparentize($selected_bg_color, 0.05), $selected_bg_color); $selection_mode_fg: $selected_fg_color; $warning_color: #F27835; $error_color: #FC4138; $warning_fg_color: white; $error_fg_color: white; $success_color: #73d216; $destructive_color: #F04A50; $suggested_color: #4DADD4; $destructive_fg_color: white; $suggested_fg_color: white; $drop_target_color: #F08437; //insensitive state derived colors $insensitive_fg_color: if($variant == 'light', transparentize($fg_color, 0.45), transparentize($fg_color, 0.55)); $insensitive_bg_color: if($variant == 'light', mix($bg_color, $base_color, 40%), lighten($bg_color, 2%)); $header_bg: red; @if $transparency=='true' and $variant=='light' { $header_bg: transparentize(#e7e8eb, 0.05); } @if $transparency=='false' and $variant=='light' { $header_bg: #e7e8eb; } @if $transparency=='true' and ($variant=='dark' or $darker=='true') { $header_bg: transparentize(#2f343f, 0.03); } @if $transparency=='false' and ($variant=='dark' or $darker=='true') { $header_bg: #2f343f; } $header_bg_backdrop: if($darker == 'true' or $variant == 'dark', lighten($header_bg, 1.5%), lighten($header_bg, 3%)); $header_border: if($variant == 'light' and $darker=='false', darken($header_bg, 7%), darken($header_bg, 4%)); $header_fg: if($variant == 'light', saturate(transparentize($fg_color, 0.2), 10%), saturate(transparentize($fg_color, 0.2), 10%)); $header_fg: if($darker == 'true', saturate(transparentize(#D3DAE3, 0.2), 10%), $header_fg); $dark_sidebar_bg: if($transparency == 'true', transparentize(#353945, 0.05), #353945); $dark_sidebar_fg: #BAC3CF; $dark_sidebar_border: if($variant == 'light', $dark_sidebar_bg, darken($dark_sidebar_bg, 5%)); $osd_fg_color: $dark_sidebar_fg; $osd_bg_color: $dark_sidebar_bg; $osd_button_bg: transparentize(lighten($osd_bg_color, 22%), 0.6); $osd_button_border: transparentize(darken($osd_bg_color, 12%), 0.6); $osd_entry_bg: transparentize(lighten($osd_bg_color, 22%), 0.6); $osd_entry_border: transparentize(darken($osd_bg_color, 12%), 0.6); $osd_insensitive_bg_color: darken($osd_bg_color, 3%); $osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 30%); $osd_borders_color: transparentize(black, 0.3); $panel_bg: darken($dark_sidebar_bg, 4.7%); $panel_fg: $dark_sidebar_fg; $entry_bg: if($variant=='light', $base_color, lighten($base_color, 0%)); $entry_border: if($variant == 'light', #cfd6e6, darken($borders_color, 0%)); $header_entry_bg: if($darker == 'true' or $variant == 'dark', transparentize(lighten($header_bg, 22%), 0.6), transparentize($base_color, 0.1)); $header_entry_border: if($darker == 'true' or $variant == 'dark', transparentize(darken($header_bg, 12%), 0.6), transparentize($header_fg, 0.7)); $button_bg: if($variant == 'light', lighten($bg_color, 2%), lighten($base_color, 2%)); $button_border: $entry_border; $header_button_bg: if($darker == 'true' or $variant == 'dark', transparentize(lighten($header_bg, 22%), 0.6), transparentize($button_bg, 0.1)); $header_button_border: if($darker == 'true' or $variant == 'dark', transparentize(darken($header_bg, 12%), 0.6), transparentize($header_fg, 0.7)); //WM Buttons // Close $wm_button_close_bg: if($variant == 'light' and $darker == 'false', #f46067, #cc575d); $wm_button_close_hover_bg: if($variant == 'light' and $darker == 'false', #f68086, #d7787d); $wm_button_close_active_bg: if($variant == 'light' and $darker == 'false', #f13039, #be3841); $wm_icon_close_bg: if($variant == 'light' and $darker == 'false',#F8F8F9 , #2f343f); // Minimize, Maximize $wm_button_hover_bg: if($variant == 'light' and $darker == 'false', #fdfdfd, #454C5C); $wm_button_active_bg: $selected_bg_color; $wm_button_hover_border: if($variant == 'light' and $darker == 'false', #D1D3DA, #262932); $wm_icon_bg: if($variant == 'light' and $darker == 'false', #90949E, #90939B); $wm_icon_unfocused_bg: if($variant == 'light' and $darker == 'false', #B6B8C0, #666A74); $wm_icon_hover_bg: if($variant == 'light' and $darker == 'false', #7A7F8B, #C4C7CC); $wm_icon_active_bg: $selected_fg_color; ================================================ FILE: common/gnome-shell/3.18/sass/_common.scss ================================================ //This is the RIGHT PLACE to edit the stylesheet $panel-corner-radius: 0px; $asset_path: if($variant == 'dark', dark-assets, light-assets); /* Copyright 2009, 2015 Red Hat, Inc. * * Portions adapted from Mx's data/style/default.css * Copyright 2009 Intel Corporation * * This program is free software; you can redistribute it and/or modify it * under the terms and conditions of the GNU Lesser General Public License, * version 2.1, as published by the Free Software Foundation. * * This program is distributed in the hope it will be useful, but WITHOUT ANY * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for * more details. * * You should have received a copy of the GNU Lesser General Public License * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA. */ // // Globals // $font-size: 9; $font-family: Futura Bk bt, Cantarell, Sans-Serif; $_bubble_bg_color: opacify($osd_bg_color,0.25); $_bubble_fg_color: $osd_fg_color; $_bubble_borders_color: transparentize($osd_fg_color,0.8); $_shell_fg_color: white; stage { font-family: $font-family; @include fontsize($font-size); color: $fg_color; } %reset_style { background-color: transparent !important; background-gradient-direction: none !important; border: none !important; border-radius: 0 !important; } // // Buttons // .button { min-height: 20px; padding: 5px 32px; transition-duration: 0; border-radius: 2px; @extend %button; } %button { @include button(normal); &:focus { @include button(focus); } &:hover { @include button(hover); } &:hover:focus { @include button(focus-hover); } &:active, &:active:focus { @include button(active); } &:insensitive { @include button(insensitive); } } %osd_button { @include button(osd); &:hover { @include button(osd-hover); } &:focus { color: $selected_bg_color; } &:active { @include button(osd-active); } &:insensitive { @include button(osd-insensitive); } } // // Entries // StEntry { padding: 7px; caret-size: 1px; caret-color: $fg_color; selection-background-color: $selected_bg_color; selected-color: $selected_fg_color; transition-duration: 300ms; border-radius: 3px; @include entry(normal); &:focus, &:hover { @include entry(focus); } &:insensitive { @include entry(insensitive); } StIcon.capslock-warning { icon-size: 16px; warning-color: $warning_color; padding: 0 4px; } } // // Scrollbars // StScrollView { &.vfade { -st-vfade-offset: 0px; } &.hfade { -st-hfade-offset: 0px; } } StScrollBar { padding: 8px; StScrollView & { min-width: 5px; min-height: 5px; } StBin#trough { background-color: transparentize($base_color, 0.9); border-radius: 8px; } StButton#vhandle, StButton#hhandle { border-radius: 4px; background-color: mix($fg_color, $bg_color, 40%); border: 0px solid; margin: 0px; &:hover { background-color: mix($fg_color, $bg_color, 30%); } &:active { background-color: $selected_bg_color; } } } // // Slider // .slider { -slider-height: 4px; -slider-background-color: $button_border; //background of the trough -slider-border-color: transparentize(black, 1); //trough border color -slider-active-background-color: $selected_bg_color; //active trough fill -slider-active-border-color: transparentize(black, 1); //active trough border -slider-border-width: 0; -slider-handle-radius: 0px; height: 18px; border: 0 solid transparent; border-right-width: 1px; border-left-width: 5px; color: transparent; .popup-menu-item.selected & { -slider-background-color: transparentize(black, 0.8); -slider-active-background-color: $selected_fg_color; } } // // Check Boxes // .check-box { StBoxLayout { spacing: .8em; } StBin { width: 16px; height: 16px; background-image: url("#{$asset_path}/checkbox/checkbox-unchecked.svg"); } &:focus StBin { background-image: url("#{$asset_path}/checkbox/checkbox-unchecked-focused.svg"); } &:checked StBin { background-image: url("#{$asset_path}/checkbox/checkbox-checked.svg"); } &:focus:checked StBin { background-image: url("#{$asset_path}/checkbox/checkbox-checked-focused.svg"); } } // // Switches // .toggle-switch { width: 50px; height: 20px; background-size: contain; background-image: url("#{$asset_path}/switch/switch-off.svg"); &:checked { background-image: url("#{$asset_path}/switch/switch-on.svg"); } .popup-menu-item.selected & { background-image: url("common-assets/switch/switch-off-selected.svg"); &:checked { background-image: url("common-assets/switch/switch-on-selected.svg"); } } } // // Links // .shell-link { color: $link_color; &:hover { color: lighten($link_color,10%); } } // // Modal Dialogs // .headline { font-size: 110%; } .lightbox { background-color: black; } .flashspot { background-color: white; } .modal-dialog { color: $fg_color; background-color: transparentize($bg_color, 1); border: none; border-image: url("#{$asset_path}/misc/modal.svg") 9 9 9 67; padding: 0 5px 6px 5px; .modal-dialog-content-box { padding: 20px 10px 10px 10px; } &-linked-button { height: if($variant=='light', 39px, 38px); padding: 0; box-shadow: inset 0 0 black; border-top-width: if($variant=='light', 0px, 1px); border-bottom-width: 0; color: $osd_fg_color; background-color: $osd_bg_color; border-color: if($variant=='light', darken($osd_bg_color, 5%), darken($osd_bg_color, 8%)); &:hover { background-color: lighten($osd_bg_color, 5%); } &:focus { color: $selected_bg_color; } &:active { color: $selected_fg_color; background-color: $selected_bg_color; } &:insensitive { color: transparentize($osd_fg_color, 0.5); background-color: darken($osd_bg_color, 2%); } &:first-child { border-radius: 0px 0px 0px 2px; } &:last-child { border-right-width: 0px; border-radius: 0px 0px 2px 0px; } &:first-child:last-child { border-right-width: 0px; border-radius: 0px 0px 2px 2px; } } .run-dialog-entry { width: 21em; } .run-dialog-error-box { padding-top: 5px; spacing: 5px; } //.run-dialog-button-box { padding-top: 1em; } .run-dialog-label { font-size: 0; } } .show-processes-dialog-subject, .mount-question-dialog-subject, .end-session-dialog-subject { //this should be a generic header class @include fontsize($font-size * 1.2); font-weight: bold; color: $fg_color; } // // End Session Dialog // .end-session-dialog { spacing: 42px; //border: 3px solid $_bubble_borders_color; &-list { padding-top: 20px; } &-layout { padding-left: 17px; &:rtl { padding-right: 17px; } } &-description { width: 28em; padding-bottom: 10px; &:rtl { text-align: right; } } &-warning { width: 28em; color: $warning_color; padding-top: 6px; &:rtl { text-align: right; } } &-logout-icon { border: 0px solid transparent; border-radius: 2px; width: 48px; height: 48px; background-size: contain; } &-shutdown-icon { color: $fg_color; width: 48px; height: 48px; } &-inhibitor-layout { spacing: 16px; max-height: 200px; padding-right: 10px; padding-left: 10px; } &-session-list, &-app-list { spacing: 1em; } &-list-header { font-weight: bold; &:rtl { text-align: right; } } &-app-list-item, &-session-list-item { spacing: 1em; } &-app-list-item-name, &-session-list-item-name { font-weight: bold; } &-app-list-item-description { color: lighten($fg_color,5%); @include fontsize($font-size * 0.9); } .modal-dialog-linked-button:last-child { color: $destructive_fg_color; background-color: $destructive_color; &:hover { color: $destructive_fg_color; background-color: lighten($destructive_color, 9%); } &:active { color: $destructive_fg_color; background-color: darken($destructive_color, 5%); } } } // // ShellMountOperation Dialogs // .shell-mount-operation-icon { icon-size: 48px; } .show-processes-dialog, .mount-question-dialog { spacing: 24px; } .show-processes-dialog-subject, .mount-question-dialog-subject { padding-top: 10px; padding-left: 17px; padding-bottom: 6px; &:rtl { padding-left: 0px; padding-right: 17px; } } .mount-question-dialog-subject { max-width: 500px; } .show-processes-dialog-description, .mount-question-dialog-description { padding-left: 17px; width: 28em; &:rtl { padding-right: 17px; } } .show-processes-dialog-app-list { @include fontsize($font-size * 1.1); max-height: 200px; padding-top: 24px; padding-left: 49px; padding-right: 32px; &:rtl { padding-right: 49px; padding-left: 32px; } } .show-processes-dialog-app-list-item { color: darken($fg_color,10%); &:hover { color: $fg_color; } &:ltr { padding-right: 1em; } &:rtl { padding-left: 1em; } } .show-processes-dialog-app-list-item-icon { &:ltr { padding-right: 17px; } &:rtl { padding-left: 17px; } } .show-processes-dialog-app-list-item-name { @include fontsize($font-size * 1.1); } // // Password or Authentication Dialog // .prompt-dialog { //this is the width of the entire modal popup width: 500px; //border: 3px solid $_bubble_borders_color; &-main-layout { spacing: 24px; padding: 10px; } &-message-layout { spacing: 16px; } &-headline { @include fontsize($font-size * 1.3); font-weight: bold; color: $fg_color; } &-descritption:rtl { text-align: right; } &-password-box { spacing: 1em; padding-bottom: 1em; } &-error-label { @include fontsize($font-size); color: $error_color; padding-bottom: 8px; } &-info-label { @include fontsize($font-size); padding-bottom: 8px; } &-null-label { @include fontsize($font-size); padding-bottom: 8px; } } .hidden { color: transparentize(black, 1); } // // Polkit Dialog // .polkit-dialog-user { &-layout { padding-left: 10px; spacing: 10px; &:rtl { padding-left: 0px; padding-right: 10px; } } &-root-label { color: $warning_color; } &-user-icon { border-radius: 2px; background-size: contain; width: 48px; height: 48px; } } // // Audio selection dialog // .audio-device-selection-dialog { spacing: 30px; } .audio-selection { &-content { spacing: 20px; padding: 24px; } &-title { font-weight: bold; text-align: center; } &-box { spacing: 20px; } &-device { border: 1px solid $borders_color; border-radius: 3px; &:active,&:hover,&:focus { background-color: $selected_bg_color; border-color: $selected_bg_color; } } &-device-box { padding: 20px; spacing: 20px; } &-device-icon { icon-size: 64px; } } // // Access Dialog // .access-dialog { spacing: 30px; &-main-layout { padding: 12px 20px 0; spacing: 12px; } &-content { max-width: 28em; spacing: 20px; } &-icon { min-width: 48px; icon-size: 48px; } &-title { font-weight: bold; } &-subtitle { color: $fg_color; font-weight: bold; } } // // Geolocation Dialog // .geolocation-dialog { spacing: 30px; &-main-layout { spacing: 12px; } &-content { spacing: 20px; } &-icon { icon-size: 48px; } &-title { font-weight: bold; } &-reason { color: $fg_color; font-weight: bold; } } // // Network Agent Dialog // .network-dialog-secret-table { spacing-rows: 15px; spacing-columns: 1em; } .keyring-dialog-control-table { spacing-rows: 15px; spacing-columns: 1em; } // // Popvers/Menus // .popup-menu { min-width: 15em; color: $fg_color; border-image: url("#{$asset_path}/menu/menu.svg") 9 9 9 9; .popup-menu-arrow { } //defined globally in the TOP BAR .popup-sub-menu { background: none; box-shadow: none; border-image: url("#{$asset_path}/menu/submenu.svg") 9 9 9 9; } .popup-menu-content { padding: 1em 0em 1em 0em; } .popup-menu-item { spacing: 12px; &:ltr { padding: .4em 3em .4em 0em; } &:rtl { padding: .4em 0em .4em 3em; } &:checked { font-weight: normal; background: none; box-shadow: none; border-image: url("#{$asset_path}/menu/submenu-open.svg") 9 9 9 9; } &:active, &.selected { color: $selected_fg_color; background-color: transparent; border-image: url("common-assets/menu/menu-hover.svg") 9 9 1 1; } &:insensitive { color: transparentize($fg_color, 0.5); background: none; } } .popup-inactive-menu-item { //all icons and other graphical elements color: $fg_color; &:insensitive { color: $insensitive_fg_color; } } //.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is &.panel-menu { -boxpointer-gap: 0px; margin-bottom: 1.75em; } } .popup-menu-ornament { text-align: right; margin-left: 10px; width: 16px; } .popup-menu-boxpointer { -arrow-border-radius: 2px; -arrow-background-color: rgba(0,0,0,0.0); -arrow-border-width: 1px; -arrow-border-color: rgba(0,0,0,0.0); -arrow-base: 0; -arrow-rise: 0; } .candidate-popup-boxpointer { -arrow-border-radius: 2px; -arrow-background-color: $osd_bg_color; -arrow-border-width: 1px; -arrow-border-color: transparentize(black, 0.6); -arrow-base: 5; -arrow-rise: 5; } .popup-separator-menu-item { //-margin-horizontal: 24px; height: 2px; //not really the whole box margin: 0; background-color: transparent; border: none; border-image: url("common-assets/menu/menu-separator.svg") 1 1 1 1; } // Background menu .background-menu { -boxpointer-gap: 4px; -arrow-rise: 0px; } // fallback menu //- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled // app menu inside the main app window itself rather than the top bar // // // OSD // .osd-window { text-align: center; font-weight: bold; spacing: 1em; padding: 20px; margin: 32px; min-width: 64px; min-height: 64px; color: $_shell_fg_color; background: none; border: none; border-radius: 5px; border-image: url("common-assets/misc/osd.svg") 9 9 9 9; .osd-monitor-label { font-size: 3em; } .level { padding: 0; height: 4px; background-color: transparentize(black, 0.5); border-radius: 2px; color: $selected_bg_color; } .level-bar { background-color: $selected_bg_color; border-radius: 2px; } } .resize-popup { color: $osd_fg_color; background: none; border: none; border-radius: 5px; border-image: url("common-assets/misc/osd.svg") 9 9 9 9; padding: 12px; } // // Alt Tab Switcher // .switcher-popup { padding: 8px; spacing: 16px; } .switcher-list { background: none; border: none; border-image: url("common-assets/misc/bg.svg") 9 9 9 9; border-radius: 3px; padding: 20px; &-item-container { spacing: 8px; } .item-box { padding: 8px; border-radius: 2px; border: 1px solid transparent; &:outlined { padding: 8px; border: 1px solid $selected_bg_color; } &:selected { color: $selected_fg_color; background-color: $selected_bg_color; border: 1px solid $selected_bg_color; } } .thumbnail-box { padding: 2px; spacing: 4px; } .thumbnail { width: 256px; } .separator { width: 1px; background: transparentize($fg_color, 0.67); } } .switcher-arrow { border-color: rgba(0,0,0,0); color: $osd_fg_color; &:highlighted { color: $_shell_fg_color; } } .input-source-switcher-symbol { font-size: 34pt; width: 96px; height: 96px; } // //Window Cycler // .cycler-highlight { border: 5px solid $selected_bg_color; } // // Workspace Switcher // .workspace-switcher { background: transparent; border: 0px; border-radius: 0px; padding: 0px; spacing: 8px; &-group { padding: 12px; } &-container { border-image: url("common-assets/misc/bg.svg") 9 9 9 9; border-radius: 3px; padding: 20px; padding-bottom: 24px; } } .ws-switcher-active-up, .ws-switcher-active-down { height: 30px; background-color: $selected_bg_color; background-size: 96px; border-radius: 2px; border: 1px solid $selected_bg_color; } .ws-switcher-active-up { background-image: url("common-assets/misc/ws-switch-arrow-up.png"); } .ws-switcher-active-down { background-image: url("common-assets/misc/ws-switch-arrow-down.png"); } .ws-switcher-box { height: 96px; background-color: transparentize(black, 0.67); border-color: transparentize(black, 0.67); border-radius: 2px; } // // Tiled window previews // .tile-preview { background-color: transparentize($selected_bg_color, 0.65); border: 1px solid $selected_bg_color; &-left.on-primary { border-radius: $panel-corner-radius 0 0 0; } &-right.on-primary { border-radius: 0 $panel-corner-radius 0 0; } &-left.tile-preview-right.on-primary { border-radius: $panel-corner-radius $panel-corner-radius 0 0; } } // // Top Bar // #panel { $_panel_fg_color: $_shell_fg_color; font-weight: bold; height: 2.1em; min-height: 27px; background-gradient-direction: none; background-color: transparent; border-bottom-width: 0; border-image: url('common-assets/panel/panel.svg') 1 1 1 1; // Fix dynamic top bar extension &.dynamic-top-bar-white-btn { border-image: none; } &.unlock-screen, &.login-screen, &.lock-screen { background-color: transparent; border-image: none; } &:overview { border-image: url('common-assets/panel/panel-overview.svg') 1 1 1 1; } #panelLeft, #panelCenter { // spacing between activities<>app menu and such spacing: 8px; } .panel-corner { -panel-corner-radius: $panel-corner-radius; -panel-corner-background-color: transparentize(black, 1); -panel-corner-border-width: 0px; -panel-corner-border-color: black; &:active, &:overview, &:focus { -panel-corner-border-color: black; } &.lock-screen, &.login-screen, &unlock-screen { -panel-corner-radius: 0; -panel-corner-background-color: transparent; -panel-corner-border-color: transparent; } } .panel-button { -natural-hpadding: 10px; -minimum-hpadding: 6px; font-weight: bold; color: $_panel_fg_color; text-shadow: none; transition-duration: 100ms; border-bottom-width: 1px; border-color: transparent; .app-menu-icon { width: 0; height: 0; margin-left: 0px; margin-right: 0px; } .system-status-icon, .app-menu-icon > StIcon, .popup-menu-arrow { icon-shadow: none; } &:hover { color: $_panel_fg_color; background-color: transparentize(black, 0.83); border-bottom-width: 1px; border-color: transparent; .system-status-icon, .app-menu-icon > StIcon, .popup-menu-arrow { icon-shadow: none; } } &:active, &:overview, &:focus, &:checked { color: $selected_fg_color; background-color: $selected_bg_color; box-shadow: none; border-bottom-width: 1px; border-color: black; & > .system-status-icon { icon-shadow: none; } } .system-status-icon { color: $selected_fg_color; icon-size: 16px; padding: 0 4px; } .unlock-screen &, .login-screen &, .lock-screen & { color: lighten($fg_color, 10%); &:focus, &:hover, &:active { color: lighten($fg_color, 10%); } } } .panel-button > *{ color: $selected_fg_color; } #panelActivities.panel-button { -natural-hpadding: 12px; } .panel-status-indicators-box, .panel-status-menu-box { spacing: 2px; color: $selected_fg_color; } // spacing between power icon and (optional) percentage label .power-status.panel-status-indicators-box { spacing: 0; } .screencast-indicator { color: $error_color; } .clock-display > * > *:last-child { color: $selected_bg_color; margin-left: .3em; } .popup-menu-arrow { width: 0; } } // Activities button #panel #panelActivities.panel-button { > * { background-image: url("common-assets/panel/activities.svg"); background-position: center top; width: 24px; height: 24px; background-color: transparent !important; background-gradient-direction: none !important; border: 0 solid transparent !important; text-shadow: 0 0 transparent !important; transition-duration: 0ms !important; box-shadow: none !important; color: transparent; } &:active, &:overview, &:focus, &:checked { background-color: transparent; box-shadow: none; border-bottom-width: 1px; border-color: transparent; > * { background-image: url("common-assets/panel/activities-active.svg"); } } } // a little unstructured mess: .system-switch-user-submenu-icon { icon-size: 20px; padding: 0 2px; } .system-switch-user-submenu-icon.default-icon { icon-size: 16px; padding: 0 4px; } #appMenu { spinner-image: url("common-assets/misc/process-working.svg"); spacing: 4px; padding: 0 8px; .label-shadow { color: transparent; } } .aggregate-menu { min-width: 23.5em; .popup-menu-icon { padding: 0 4px; } } .system-menu-action { padding: 13px; color: $fg_color; border-radius: 32px; /* wish we could do 50% */ border: 1px solid transparent; &:hover, &:focus { transition-duration: 100ms; padding: 13px; color: $fg_color; background-color: transparent; border: 1px solid $selected_bg_color; } &:active { color: $selected_fg_color; background-color: $selected_bg_color; border: 1px solid $selected_bg_color; } & > StIcon { icon-size: 16px; } } // // Calendar popover // #calendarArea { padding: 0.75em 1.0em; } .calendar { margin-bottom: 1em; } .calendar, .datemenu-today-button, .datemenu-displays-box, .message-list-sections { margin: 0 0.4em; } .datemenu-calendar-column { spacing: 0.5em; border: none; } .datemenu-displays-section { padding-bottom: 3em; } .datemenu-today-button, .world-clocks-button, .weather-button, .message-list-section-title, .events-section-title { border-radius: 3px; padding: .4em; } .message-list-section-list:ltr { padding-left: .4em; } .message-list-section-list:rtl { padding-right: .4em; } .datemenu-today-button, .world-clocks-button, .weather-button, .message-list-section-title, .events-section-title { padding: 7px 10px 7px 10px; border: 1px solid transparentize($base_color, 1); &:hover, &:focus { @include button(hover); } &:active { @include button(active); } } .datemenu-today-button .day-label { } .datemenu-today-button .date-label { font-size: 1.5em; } .world-clocks-header, .weather-header, .message-list-section-title, .events-section-title { color: transparentize($fg_color, 0.6); font-weight: bold; } .world-clocks-button:active .world-clocks-header, .weather-button:active .weather-header { color: $selected_fg_color; } .world-clocks-grid { spacing-rows: 0.4em; } .weather-box { spacing: 0.4em; } .calendar-month-label { color: $fg_color; font-weight: bold; padding: 8px 0; &:focus {} } .pager-button { color: transparent; background-color: transparent; width: 32px; border-radius: 2px; &:focus, &:hover, &:active { background-color: transparent; } } //arrow back .calendar-change-month-back { background-image: url("#{$asset_path}/misc/calendar-arrow-left.svg"); &:focus, &:hover { background-image: url("#{$asset_path}/misc/calendar-arrow-left-hover.svg"); } &:active { background-image: url("#{$asset_path}/misc/calendar-arrow-left.svg"); } &:rtl { background-image: url("#{$asset_path}/misc/calendar-arrow-right.svg"); &:focus, &:hover { background-image: url("#{$asset_path}/misc/calendar-arrow-right-hover.svg"); } &:active { background-image: url("#{$asset_path}/misc/calendar-arrow-right.svg"); } } } //arrow forward .calendar-change-month-forward { background-image: url("#{$asset_path}/misc/calendar-arrow-right.svg"); &:focus, &:hover { background-image: url("#{$asset_path}/misc/calendar-arrow-right-hover.svg"); } &:active { background-image: url("#{$asset_path}/misc/calendar-arrow-right.svg"); } &:rtl { background-image: url("#{$asset_path}/misc/calendar-arrow-left.svg"); &:focus, &:hover { background-image: url("#{$asset_path}/misc/calendar-arrow-left-hover.svg"); } &:active { background-image: url("#{$asset_path}/misc/calendar-arrow-left.svg"); } } } .calendar-day-base { font-size: 80%; text-align: center; width: 25px; height: 25px; padding: 0.1em; margin: 2px; border-radius: 12.5px; &:hover, &:focus { background-color: transparentize(black, 0.9); } &:active, &:selected { color: $fg_color; background-color: transparentize(black, 0.85); border-width: 0; //avoid jumparound due to today } &.calendar-day-heading { //day of week heading color: transparentize($fg_color, 0.15); margin-top: 1em; font-size: 70%; } } .calendar-day { //border collapse hack - see calendar.js border-width: 0; color: transparentize($fg_color, 0.2); } .calendar-day-top { border-top-width: 0; } .calendar-day-left { border-left-width: 0; } .calendar-work-day {} .calendar-nonwork-day { color: $fg_color; font-weight: bold; } .calendar-today, .calendar-today:active, .calendar-today:selected, .calendar-today:focus, .calendar-today:hover { font-weight: bold; color: $selected_fg_color; background-color: $selected_bg_color; border-width: 0; } .calendar-day-with-events { font-weight: bold; background-image: url("common-assets/misc/calendar-today.svg"); } .calendar-today.calendar-day-with-events { color: $selected_fg_color; } .calendar-other-month-day { color: transparentize($fg_color, 0.7); opacity: 1; } .calendar-week-number { font-size: 70%; font-weight: bold; width: 2.3em; height: 1.8em; border-radius: 2px; padding: 0.5em 0 0; margin: 6px; background-color: transparentize($fg_color,0.7); color: $bg_color; } // // Message list // .message-list { width: 31.5em; &-sections { spacing: 1.5em; } &-section, &-section-list { spacing: 0.7em; } &-section-list-title-box { spacing: 0.4em; } &-placeholder { StIcon { width: 0; height: 0; } StLabel { color: $insensitive_fg_color; } } &-clear-button.button { margin: 1.5em 1.5em 0; padding: 4px 12px; } &-section-close { > StIcon { icon-size: 18px; border-radius: 0px; color: transparent; background-color: transparent; background-image: url('#{$asset_path}/misc/message-close.svg'); } &:hover > StIcon { color: transparent; background-color: transparent; background-image: url('#{$asset_path}/misc/message-close-hover.svg'); } &:active > StIcon { color: transparent; background-color: transparent; background-image: url('#{$asset_path}/misc/message-close-active.svg'); } } } .message { padding: 4px; color: $fg_color; border-image: url("#{$asset_path}/misc/message.svg") 9 9 9 9; &:hover, &:focus { color: $fg_color; border-image: url("#{$asset_path}/misc/message-hover.svg") 9 9 9 9; } &:active { color: $selected_fg_color; border-image: url("#{$asset_path}/misc/message-active.svg") 9 9 9 9; } &-icon-bin { padding: 8px 0px 8px 8px; &:rtl { padding: 8px 8px 8px 0px; } > StIcon { //icon-size: 32px; color: inherit; } } &-secondary-bin, &-secondary-bin > .event-time { color: transparentize($fg_color, 0.4); font-size: 0.9em; &:ltr { padding-left: 8px; } &:rtl { padding-right: 8px; } } &:active .message-secondary-bin, &:active .message-secondary-bin > .event-time { color: transparentize($selected_fg_color, 0.4); } &-secondary-bin > StIcon { icon-size: 16px; } &-title { color: inherit; font-weight: bold; font-size: 1em; padding: 2px 0 2px 0; } &-content { color: inherit; padding: 8px; font-size: 1em; } } .message-media-control { padding: 6px; color: $fg_color; &:last-child:ltr { padding-right: 18px; } &:last-child:rtl { padding-left: 18px; } &:hover { color: transparentize($fg_color, 0.3); } &:active { color: $selected_bg_color; } &:insensitive { color: $insensitive_fg_color; } } .message:active .message-media-control { color: $selected_fg_color; } .media-message-cover-icon { icon-size: 32px; &.fallback { color: $insensitive_fg_color; background-color: $bg_color; border-radius: 2px; icon-size: 16px; padding: 8px; border: 1px solid $borders_color; } } // //Activities Ripples // .ripple-box { width: 52px; height: 52px; background-image: url("common-assets/misc/corner-ripple-ltr.svg"); background-size: contain; &:rtl { background-image: url("common-assets/misc/corner-ripple-rtl.svg"); } } // not really top bar only .popup-menu-arrow { width: 16px; height: 16px; } .popup-menu-icon { icon-size: 16px; } // //Close buttons // .window-close { background-image: url("common-assets/misc/close.svg"); background-size: 26px; height: 26px; width: 26px; &:hover { background-image: url("common-assets/misc/close-hover.svg"); background-size: 26px; height: 26px; width: 26px; } &:active { background-image: url("common-assets/misc/close-active.svg"); background-size: 26px; height: 26px; width: 26px; } } .window-close { -shell-close-overlap: 11px; } // // Network Dialogs // .nm-dialog { max-height: 500px; min-height: 450px; min-width: 470px; &-content { spacing: 20px; padding: 10px; } &-header-hbox { spacing: 10px; } &-airplane-box { spacing: 12px; } &-airplane-headline { font-size: 1.1em; font-weight: bold; text-align: center; } &-airplane-text { color: $fg_color; } &-header-icon { icon-size: 32px; } &-scroll-view { border: 1px solid $borders_color; border-radius: 2px; background-color: $base_color; } &-header { font-weight: bold; font-size: 1.2em; } &-item { font-size: 1em; border-bottom: 0px solid; padding: 12px; spacing: 0px; &:selected { background-color: $selected_bg_color; color: $selected_fg_color; } } &-icons { spacing: .5em; } &-icon { icon-size: 16px; } } .no-networks-label { color: $insensitive_fg_color; } .no-networks-box { spacing: 12px; } // // Overview // #overview { spacing: 24px; } .overview-controls { padding-bottom: 32px; } .window-picker { //container around window thumbnails -horizontal-spacing: 32px; -vertical-spacing: 32px; padding-left: 32px; padding-right: 32px; padding-bottom: 48px; &.external-monitor { padding: 32px; } } .window-clone-border { border: 3px solid transparentize($selected_bg_color, 0.2); border-radius: 4px; box-shadow: inset 0px 0px 0px 1px transparentize($selected_bg_color, 1); } .window-caption, .window-caption:hover { spacing: 25px; color: $osd_fg_color; background-color: transparentize(black, 0.3); border-radius: 2px; padding: 4px 12px; -shell-caption-spacing: 12px; } // // Search Entry // .search-entry { width: 320px; padding: 7px 9px; border-radius: 20px; border: 1px solid transparentize(black, 0.75); background-color: transparentize($entry_bg, 0.1); &:focus { padding: 7px 9px; } .search-entry-icon { icon-size: 16px; padding: 0 4px; color: $fg_color; } &:hover, &:focus { color: $selected_fg_color; caret-color: $selected_fg_color; background-color: $selected_bg_color; selection-background-color: $selected_fg_color; selected-color: $selected_bg_color; .search-entry-icon { color: $selected_fg_color; } } } // // Search Results // #searchResultsBin { max-width: 1000px; } #searchResultsContent { padding-left: 20px; padding-right: 20px; spacing: 16px; } // This should be equal to #searchResultsContent spacing .search-section { spacing: 16px; } // This is the space between the provider icon and the results container .search-section-content { spacing: 32px; } // "no results" .search-statustext { @extend %status_text; } .list-search-results { spacing: 3px; } .search-section-separator { background-color: transparentize(white, 0.8); -margin-horizontal: 1.5em; height: 1px; } .list-search-result-content { spacing: 12px; padding: 12px; } .list-search-result-title { font-size: 1.5em; color: $_shell_fg_color; } .list-search-result-description { color: darken($_shell_fg_color, 20%); } .search-provider-icon { padding: 15px; } .search-provider-icon-more { width: 16px; height: 16px; background-image: url("common-assets/misc/more-results.svg"); } // // Dash // #dash { font-size: 1em; color: $osd_fg_color; background-color: $dark_sidebar_bg; border-color: rgba(0,0,0,0.4); padding: 4px 0; border-radius: 0 3px 3px 0; &:rtl { border-radius: 3px 0 0 3px; } .right &, &:rtl { padding: 4px 0; } .top &, .bottom & { padding: 0; } .placeholder { background-image: url("common-assets/dash/dash-placeholder.svg"); background-size: contain; height: 24px; } .empty-dash-drop-target { width: 24px; height: 24px; } } .dash-item-container > StWidget { &, &:rtl, .right & { padding: 4px 8px; } .top &, .bottom & { padding: 6px; } } //osd tooltip .dash-label { border-radius: 3px; padding: 4px 12px; color: $_shell_fg_color; background-color: transparentize(black, 0.3); text-align: center; -x-offset: 3px; .bottom &, .top & { -y-offset: 3px; -x-offset: 0; } } // Dash Buttons #dash .app-well-app { &:hover .overview-icon, .right &:hover .overview-icon, .bottom &:hover .overview-icon, .top &:hover .overview-icon { background-color: $selected_bg_color; } &:active .overview-icon, .right &:active .overview-icon, .bottom &:active .overview-icon, .top &:active .overview-icon { box-shadow: none; background-color: darken($selected_bg_color, 10%); } &-running-dot { width: 11px; height: 2px; margin-bottom: 2px; background-color: $selected_bg_color; } } #dashtodockContainer { .app-well-app-running-dot { background: none; width: 28px; height: 4px; } // Add missing 1px margin for finer .show-apps-icon alignment // via margin property instead to keep 1px smaller .show-apps-icon size // like standard #dash styling. Better than 1px transparent border. .show-apps .overview-icon { margin: 1px; } @each $var in 1, 2, 3, 4 { .running#{$var} .app-well-app-running-dot { background-image: url("common-assets/dash/running#{$var}.svg"); } } } .show-apps { .overview-icon { background-color: transparentize(black, 0.5); border-radius: 2px; border: 0px solid; } &:hover .overview-icon { background-color: transparentize(black, 0.3); color: $selected_bg_color; } &:active .overview-icon, &:active .show-apps-icon, &:checked .overview-icon, &:checked .show-apps-icon { color: $selected_fg_color; background-color: $selected_bg_color; box-shadow: none; transition-duration: 0ms; } } // // App Vault/Grid // .icon-grid { spacing: 30px; -shell-grid-horizontal-item-size: 136px; -shell-grid-vertical-item-size: 136px; .overview-icon { icon-size: 96px; } } //.app-display { spacing: 20px; } //favorties | all toggle container .app-view-controls { padding-bottom: 32px; } //favorties | all toggle button .app-view-control { padding: 4px 32px; @include button(osd); &:hover { @include button(osd-hover); } &:checked { color: $selected_fg_color; background-color: $selected_bg_color; } &:first-child:ltr, &:last-child:rtl { border-radius: 2px 0 0 2px; border-right-width: 0; } &:last-child:ltr, &:first-child:rtl { border-radius: 0 2px 2px 0; border-left-width: 0;} } // // Icon Tile // .search-provider-icon, .list-search-result { @extend %icon_tile; &:active, &:checked { background-color: transparentize(darken($osd_bg_color,10%),.1); } &:focus, &:selected, &:hover { background-color: transparentize($osd_fg_color,.6); transition-duration: 200ms; } } .app-well-app, .app-well-app.app-folder, .grid-search-result { .overview-icon { @extend %icon_tile; } &:active .overview-icon, &:checked .overview-icon { background-color: transparentize(darken($osd_bg_color,10%),.1); box-shadow: inset 0 0 $selected_bg_color; } &:hover .overview-icon, &:focus .overview-icon, &:selected .overview-icon { background-color: transparentize($osd_fg_color,.6); transition-duration: 0ms; border-image: none; background-image: none; } } .app-well-app-running-dot { //running apps indicator width: 20px; height: 2px; margin-bottom: 4px; background-color: $selected_bg_color; } %icon_tile { color: $_shell_fg_color; border-radius: 2px; padding: 6px; border: 1px solid transparent; transition-duration: 0ms; text-align: center; } // // Collections // .app-well-app.app-folder { > .overview-icon { background-color: darken($dark_sidebar_bg, 8%); border: 1px solid transparentize(darken($dark_sidebar_bg, 25%), 0.5); } &:hover > .overview-icon { background-color: lighten($dark_sidebar_bg, 3%); } &:active > .overview-icon, &:checked > .overview-icon { color: $selected_fg_color; background-color: $selected_bg_color; box-shadow: none; } &:focus > .overview-icon { background-color: $selected_bg_color; } } .app-folder-popup { //expanded collection -arrow-border-radius: 2px; -arrow-background-color: darken($dark_sidebar_bg, 8%); -arrow-border-color: transparentize(darken($dark_sidebar_bg, 25%), 0.5); -arrow-border-width: 1px; -arrow-base: 5; -arrow-rise: 5; } .app-folder-popup-bin { padding: 5px; } .app-folder-icon { padding: 5px; spacing-rows: 5px; spacing-columns: 5px; } .page-indicator { padding: 15px 20px; .page-indicator-icon { width: 18px; height: 18px; background-image: url(common-assets/misc/page-indicator-inactive.svg); } &:hover .page-indicator-icon { background-image: url(common-assets/misc/page-indicator-hover.svg); } &:active .page-indicator-icon { background-image: url(common-assets/misc/page-indicator-active.svg); } &:checked .page-indicator-icon, &:checked:active { background-image: url(common-assets/misc/page-indicator-checked.svg); } } .no-frequent-applications-label { @extend %status_text; } .app-well-app > .overview-icon.overview-icon-with-label, .grid-search-result .overview-icon.overview-icon-with-label { padding: 10px 8px 5px 8px; spacing: 4px; } // // Workspace pager // .workspace-thumbnails, .workspace-thumbnails-left { &, &:rtl { visible-width: 40px; //amount visible before hover spacing: 11px; padding: 12px; } } .workspace-thumbnails, .workspace-thumbnails-left:rtl { padding-right: 7px; border-image: url("common-assets/dash/dash-right.svg") 9 9 9 9; } .workspace-thumbnails:rtl, .workspace-thumbnails-left { padding-left: 7px; border-image: url("common-assets/dash/dash-left.svg") 9 9 9 9; } .workspace-thumbnail-indicator { border: 4px solid transparentize($selected_bg_color, 0.2); border-radius: 1px; padding: 1px; } //Some hacks I don't even .search-display > StBoxLayout, .all-apps, .frequent-apps > StBoxLayout { // horizontal padding to make sure scrollbars or dash don't overlap content padding: 0px 88px 10px 88px; } %status_text { font-size: 2em; font-weight: bold; color: $fg_color; } // // Notifications & Message Tray // .url-highlighter { link-color: $link_color; } // Banners .notification-banner, .notification-banner:hover, .notification-banner:focus { font-size: 1em; width: 34em; margin: 5px; padding: 10px; color: $fg_color; background-color: transparent; border: 1px solid transparent; border-image: url("#{$asset_path}/menu/menu.svg") 9 9 9 9; .notification-icon { padding: 5px; } .notification-content { padding: 5px; spacing: 5px; } .secondary-icon { icon-size: 1.09em; } .notification-actions { background-color: transparent; padding: 2px 2px 0 2px; spacing: 3px; } .notification-button { padding: 4px 4px 5px; @extend %button; &:first-child, &:last-child { border-radius: 2px; } } } .secondary-icon { icon-size: 1.09em; } // Chat Bubbles .chat-body { spacing: 5px; } .chat-response { margin: 5px; } .chat-log-message { color: $fg_color; } .chat-new-group { padding-top: 1em; } .chat-received { padding-left: 4px; &:rtl { padding-left: 0px; padding-right: 4px; } } .chat-sent { padding-left: 18pt; color: $selected_bg_color; &:rtl { padding-left: 0; padding-right: 18pt; } } .chat-meta-message { padding-left: 4px; font-size: 9pt; font-weight: bold; color: transparentize($fg_color, 0.4); &:rtl { padding-left: 0; padding-right: 4px; } } .subscription-message { font-style: italic; } // Hotplug .hotplug-transient-box { spacing: 6px; padding: 2px 72px 2px 12px; } .hotplug-notification-item { padding: 2px 10px; @extend %button; &:focus { padding: 2px 10px; } } .hotplug-notification-item-icon { icon-size: 24px; padding: 2px 5px; } .hotplug-resident-box { spacing: 8px; } .hotplug-resident-mount { spacing: 8px; border-radius: 4px; &:hover { background-color: transparentize($bg_color,0.7); } } .hotplug-resident-mount-label { color: inherit; padding-left: 6px; } .hotplug-resident-mount-icon { icon-size: 24px; padding-left: 6px; } .hotplug-resident-eject-icon { icon-size: 16px; } .hotplug-resident-eject-button { padding: 7px; border-radius: 5px; color: pink; } // Eeeky things $legacy_icon_size: 24px; .legacy-tray { background-color: $panel_bg; &:ltr { border-radius: 0 2px 0 0; border-left-width: 0; } &:rtl { border-radius: 2px 0 0 0; border-right-width: 0; } } .legacy-tray-handle, .legacy-tray-icon { padding: 6px; & StIcon { icon-size: $legacy_icon_size; } &:hover, &:focus { background-color: transparentize($fg_color,0.9); } } .legacy-tray-icon-box { spacing: 12px; &:ltr { padding-left: 12px; } &:rtl { padding-right: 12px; } & StButton { width: $legacy_icon_size; height: $legacy_icon_size } } .masterslider.smaller .masterlabel, .masterslider.smaller .slider { min-width: 155px; } // Magnifier .magnifier-zoom-region { border: 2px solid $selected_bg_color; &.full-screen { border-width: 0; } } // // On-Screen Keyboard // #keyboard { background-color: $osd_bg_color; border-width: 0; border-top-width: 1px; border-color: transparentize(black, 0.8); } .keyboard-layout { spacing: 10px; padding: 10px; } .keyboard-row { spacing: 15px; } .keyboard-key { min-height: 2em; min-width: 2em; font-size: 14pt; font-weight: bold; border-radius: 3px; box-shadow: none; @include button(osd); &:hover { @include button(osd-hover); } &:active, &:checked { @include button(osd-active); } &:grayed { @include button(osd-insensitive); } } .keyboard-subkeys { //long press on a key popup color: $osd_fg_color; padding: 5px; -arrow-border-radius: 2px; -arrow-background-color: $osd_bg_color; -arrow-border-width: 1px; -arrow-border-color: transparentize(black, 0.6);; -arrow-base: 20px; -arrow-rise: 10px; -boxpointer-gap: 5px; } // // IBus Candidate Popup // .candidate-popup-content { padding: 0.5em; spacing: 0.3em; color: $osd_fg_color; font-size: 1.15em; } .candidate-index { padding: 0 0.5em 0 0; color: lighten($osd_fg_color, 10%); } .candidate-box { padding: 0.3em 0.5em 0.3em 0.5em; border-radius: 2px; color: $osd_fg_color; &:selected,&:hover { background-color: $selected_bg_color; color: $selected_fg_color; } } .candidate-page-button-box { height: 2em; .vertical & { padding-top: 0.5em; } .horizontal & { padding-left: 0.5em; } } .candidate-page-button { padding: 4px; } .candidate-page-button-previous { border-radius: 2px 0px 0px 2px; border-right-width: 0; } .candidate-page-button-next { border-radius: 0px 2px 2px 0px; } .candidate-page-button-icon { icon-size: 1em; } // // Auth Dialogs & Screen Shield // .framed-user-icon { background-size: contain; border: 0px solid transparent; color: $fg_color; border-radius: 2px; &:hover { border-color: transparent; color: lighten($osd_fg_color,30%); } } // // Login Dialog // .login-dialog-banner-view { padding-top: 24px; max-width: 23em; } .login-dialog { //reset border: none; background-color: transparent; .modal-dialog-button-box { spacing: 3px; } .modal-dialog-button { padding: 3px 18px; &:default { @include button(normal); &:hover,&:focus { @include button(hover); } &:active { @include button(active); } &:insensitive { @include button(insensitive); } } } } .login-dialog-logo-bin { padding: 24px 0px; } .login-dialog-banner { color: darken($osd_fg_color,10%); } .login-dialog-button-box { spacing: 5px; } .login-dialog-message-warning { color: $warning_color; } .login-dialog-message-hint { padding-top: 0; padding-bottom: 20px; } .login-dialog-user-selection-box { padding: 100px 0px; .login-dialog-not-listed-label { padding-left: 2px; .login-dialog-not-listed-button:focus &, .login-dialog-not-listed-button:hover & { color: $osd_fg_color; } } } .login-dialog-not-listed-label { font-size: 90%; font-weight: bold; color: darken($osd_fg_color,30%); padding-top: 1em; } .login-dialog-user-list-view { -st-vfade-offset: 1em; } .login-dialog-user-list { spacing: 12px; padding: .2em; width: 23em; &:expanded .login-dialog-user-list-item:focus { background-color: $selected_bg_color; color: $selected_fg_color; } &:expanded .login-dialog-user-list-item:logged-in { border-right: 2px solid $selected_bg_color; } } .login-dialog-user-list-item { border-radius: 5px; padding: .2em; color: darken($osd_fg_color,30%); &:ltr { padding-right: 1em; } &:rtl { padding-left: 1em; } &:hover { background-color: $selected_bg_color; color: $selected_fg_color; } .login-dialog-timed-login-indicator { height: 2px; margin: 2px 0 0 0; background-color: $osd_fg_color; } &:focus .login-dialog-timed-login-indicator { background-color: $selected_fg_color; } } .login-dialog-username, .user-widget-label { color: $osd_fg_color; font-size: 120%; font-weight: bold; text-align: left; padding-left: 15px; } .user-widget-label { &:ltr { padding-left: 18px; } &:rtl { padding-right: 18px; } } .login-dialog-prompt-layout { padding-top: 24px; padding-bottom: 12px; spacing: 8px; width: 23em; } .login-dialog-prompt-label { color: darken($osd_fg_color, 20%); font-size: 110%; padding-top: 1em; } .login-dialog-session-list-button StIcon { icon-size: 1.25em; } .login-dialog-session-list-button { color: darken($osd_fg_color,30%); &:hover,&:focus { color: $osd_fg_color; } &:active { color: darken($osd_fg_color, 50%); } } // // Screen Shield // .screen-shield-arrows { padding-bottom: 3em; } .screen-shield-arrows Gjs_Arrow { color: white; width: 80px; height: 48px; -arrow-thickness: 12px; -arrow-shadow: 0 1px 1px rgba(0,0,0,0.4); } .screen-shield-clock { color: white; text-shadow: 0px 1px 2px rgba(0,0,0,0.6); font-weight: bold; text-align: center; padding-bottom: 1.5em; } .screen-shield-clock-time { font-size: 72pt; text-shadow: 0px 2px 2px rgba(0,0,0,0.4); } .screen-shield-clock-date { font-size: 28pt; } .screen-shield-notifications-container { spacing: 6px; width: 30em; background-color: transparent; max-height: 500px; .summary-notification-stack-scrollview { padding-top: 0; padding-bottom: 0; } .notification, .screen-shield-notification-source { padding: 12px 6px; border: 1px solid $_bubble_borders_color; background-color: transparentize($osd_bg_color,0.5); color: $_bubble_fg_color; border-radius: 4px; } .notification { margin-right: 15px; } //compensate for space allocated to the scrollbar } .screen-shield-notification-label { font-weight: bold; padding: 0px 0px 0px 12px; } .screen-shield-notification-count-text { padding: 0px 0px 0px 12px; } #panel.lock-screen { background-color: transparentize($_bubble_bg_color, 0.5); } .screen-shield-background { //just the shadow, really background: black; box-shadow: 0px 2px 4px transparentize(black,0.6); } #lockDialogGroup { background: #2e3436 url(misc/noise-texture.png); background-repeat: repeat; } #screenShieldNotifications { StButton#vhandle, StButton#hhandle { background-color: transparentize($bg_color,0.7); &:hover, &:focus { background-color: transparentize($bg_color,0.5); } &:active { background-color: transparentize($selected_bg_color,0.5); } } } // // Looking Glass // #LookingGlassDialog { spacing: 4px; padding: 8px 8px 10px 8px; background-color: transparentize(black, 0.3); border: 1px solid black; border-image: url("common-assets/misc/bg.svg") 9 9 9 9; border-radius: 2px; color: $osd_fg_color; & > #Toolbar { padding: 3px; border: none; background-color: transparent; border-radius: 0px; } .labels { spacing: 4px; } .notebook-tab { -natural-hpadding: 12px; -minimum-hpadding: 6px; font-weight: bold; color: $osd_fg_color; transition-duration: 100ms; padding-left: .3em; padding-right: .3em; &:hover { color: $_shell_fg_color; text-shadow: black 0px 2px 2px; } &:selected { border-bottom-width: 0px; color: $selected_bg_color; text-shadow: black 0px 2px 2px; } } StBoxLayout#EvalBox { padding: 4px; spacing: 4px; } StBoxLayout#ResultsArea { spacing: 4px; } } .lg-dialog { StEntry { caret-color: $selected_fg_color; selection-background-color: $selected_bg_color; selected-color: $selected_fg_color; @include entry(osd); &:focus { @include entry(osd-focus); selection-background-color: $selected_fg_color; selected-color: $selected_bg_color; } } .shell-link { color: $link_color; &:hover { color: lighten($link_color,10%); } } } .lg-completions-text { font-size: .9em; font-style: italic; } .lg-obj-inspector-title { spacing: 4px; } .lg-obj-inspector-button { border: 1px solid gray; padding: 4px; border-radius: 4px; &:hover { border: 1px solid #ffffff; } } #lookingGlassExtensions { padding: 4px; } .lg-extensions-list { padding: 4px; spacing: 6px; } .lg-extension { border: 1px solid $osd_borders_color; border-radius: 2px; background-color: $osd_bg_color; padding: 4px; } .lg-extension-name { font-weight: bold; } .lg-extension-meta { spacing: 6px; } #LookingGlassPropertyInspector { background: transparentize(black, 0.3); border: 1px solid grey; border-radius: 2px; padding: 6px; } ================================================ FILE: common/gnome-shell/3.18/sass/_drawing.scss ================================================ // Drawing mixins // generic drawing of more complex things // provide font size in rem, with px fallback @mixin fontsize($size: 24, $base: 16) { font-size: round($size) + pt; //font-size: ($size / $base) * 1rem; } // Entries @mixin entry($t, $dark:false) { // // Entries drawing function // //@extend %reset_style; @if $t==normal { color: $text_color; background-color: $entry_bg; border: 1px solid $entry_border; box-shadow: inset 0 2px 4px transparentize($entry_bg, 0.95); } @if $t==focus { color: $fg_color; background-color: $entry_bg; border: 1px solid $selected_bg_color; box-shadow: inset 0 2px 4px transparentize($entry_bg, 0.95); } @if $t==insensitive { color: $insensitive_fg_color; background-color: mix($entry_bg, $bg_color, 55%); border-color: 1px solid mix($entry_border, $bg_color, 55%); box-shadow: inset 0 2px 4px transparentize(mix($entry_bg, $bg_color, 55%), 0.95); } @if $t==osd { color: $osd_fg_color; background-color: $osd_entry_bg; border: 1px solid $osd_entry_border; box-shadow: inset 0 2px 4px transparentize(black, 0.95); } @if $t==osd-focus { color: $selected_fg_color; background-color: $selected_bg_color; border: 1px solid $osd_entry_border; box-shadow: inset 0 2px 4px transparentize(black, 0.95); } @if $t==osd-insensitive { color: transparentize($osd_fg_color, 0.45); background-color: transparentize($osd_entry_bg, 0.15); border: 1px solid $osd_entry_border; box-shadow: inset 0 2px 4px transparentize(black, 0.95); } } // Buttons @mixin button($t) { // // Button drawing function // //@extend %reset_style; text-shadow: 0 1px transparentize($base_color, 1); @if $t==normal { // // normal button // color: $fg_color; background-color: $button_bg; border: 1px solid $button_border; box-shadow: inset 0 1px transparentize($button_bg, 0.95); } @else if $t==focus { // // focused button // color: $fg_color; background-color: $button_bg; border: 1px solid $selected_bg_color; box-shadow: inset 0 1px transparentize($button_bg, 0.95); } @else if $t==focus-hover { // // focused button // color: $fg_color; background-color: $button_bg; border: 1px solid $selected_bg_color; box-shadow: inset 0 1px transparentize($button_bg, 0.95); } @else if $t==hover { // // hovered button // color: $fg_color; background-color: lighten($button_bg, 5%); border: 1px solid $button_border; box-shadow: inset 0 1px transparentize(lighten($button_bg, 5%), 0.95); } @else if $t==active { // // pushed button // color: $selected_fg_color; background-color: $selected_bg_color; border: 1px solid if($variant=='light', $selected_bg_color, $button_border); box-shadow: inset 0 1px transparentize($selected_bg_color, 0.95); } @else if $t==insensitive { // // insensitive button // color: $insensitive_fg_color; border: 1px solid transparentize($button_border, 0.45); background-color: transparentize($button_bg, 0.45); box-shadow: inset 0 1px transparentize($button_bg, 0.95); } @else if $t==osd { // // normal osd button // color: $osd_fg_color; border: 1px solid $osd_button_border; background-color: $osd_button_bg; box-shadow: inset 0 1px transparentize(black, 0.95); } @else if $t==osd-hover { // // active osd button // color: $osd_fg_color; border: 1px solid $osd_button_border; background-color: opacify(lighten($osd_button_bg, 7%), 0.1); box-shadow: inset 0 1px transparentize(black, 0.95); } @else if $t==osd-active { // // active osd button // color: $selected_fg_color; border: 1px solid $osd_button_border; background-color: $selected_bg_color; box-shadow: inset 0 1px transparentize($selected_bg_color, 0.95); } @else if $t==osd-insensitive { // // insensitive osd button // color: $osd_insensitive_fg_color; border: 1px solid $osd_button_border; background-color: transparentize($osd_button_bg, 0.15); box-shadow: inset 0 1px transparentize(black, 0.95); } } ================================================ FILE: common/gnome-shell/3.18/sass/gnome-shell-dark.scss ================================================ $variant: 'dark'; $transparency: 'true'; $darker: 'false'; @import "_colors"; //use gtk colors @import "_drawing"; @import "_common"; ================================================ FILE: common/gnome-shell/3.18/sass/gnome-shell.scss ================================================ $variant: 'light'; $transparency: 'true'; $darker: 'false'; @import "_colors"; //use gtk colors @import "_drawing"; @import "_common"; ================================================ FILE: common/gnome-shell/3.26/sass/_colors.scss ================================================ // When color definition differs for dark and light variant, // it gets @if ed depending on $variant $base_color: if($variant =='light', #ffffff, #404552); $text_color: if($variant == 'light', #5c616c, #D3DAE3); $bg_color: if($variant =='light', #F5F6F7, #383C4A); $fg_color: if($variant =='light', #5c616c, #D3DAE3); $selected_fg_color: #ffffff; $selected_bg_color: #5294e2; $selected_borders_color: darken($selected_bg_color, 20%); $borders_color: if($variant =='light', darken($bg_color,9%), darken($bg_color,6%)); $link_color: if($variant == 'light', darken($selected_bg_color,10%), lighten($selected_bg_color,20%)); $link_visited_color: if($variant == 'light', darken($selected_bg_color,20%), lighten($selected_bg_color,10%)); $selection_mode_bg: if($transparency == 'true', transparentize($selected_bg_color, 0.05), $selected_bg_color); $selection_mode_fg: $selected_fg_color; $warning_color: #F27835; $error_color: #FC4138; $warning_fg_color: white; $error_fg_color: white; $success_color: #73d216; $destructive_color: #F04A50; $suggested_color: #4DADD4; $destructive_fg_color: white; $suggested_fg_color: white; $drop_target_color: #F08437; //insensitive state derived colors $insensitive_fg_color: if($variant == 'light', transparentize($fg_color, 0.45), transparentize($fg_color, 0.55)); $insensitive_bg_color: if($variant == 'light', mix($bg_color, $base_color, 40%), lighten($bg_color, 2%)); $header_bg: red; @if $transparency=='true' and $variant=='light' { $header_bg: transparentize(#e7e8eb, 0.05); } @if $transparency=='false' and $variant=='light' { $header_bg: #e7e8eb; } @if $transparency=='true' and ($variant=='dark' or $darker=='true') { $header_bg: transparentize(#2f343f, 0.03); } @if $transparency=='false' and ($variant=='dark' or $darker=='true') { $header_bg: #2f343f; } $header_bg_backdrop: if($darker == 'true' or $variant == 'dark', lighten($header_bg, 1.5%), lighten($header_bg, 3%)); $header_border: if($variant == 'light' and $darker=='false', darken($header_bg, 7%), darken($header_bg, 4%)); $header_fg: if($variant == 'light', saturate(transparentize($fg_color, 0.2), 10%), saturate(transparentize($fg_color, 0.2), 10%)); $header_fg: if($darker == 'true', saturate(transparentize(#D3DAE3, 0.2), 10%), $header_fg); $dark_sidebar_bg: if($transparency == 'true', transparentize(#353945, 0.05), #353945); $dark_sidebar_fg: #BAC3CF; $dark_sidebar_border: if($variant == 'light', $dark_sidebar_bg, darken($dark_sidebar_bg, 5%)); $osd_fg_color: $dark_sidebar_fg; $osd_bg_color: $dark_sidebar_bg; $osd_button_bg: transparentize(lighten($osd_bg_color, 22%), 0.6); $osd_button_border: transparentize(darken($osd_bg_color, 12%), 0.6); $osd_entry_bg: transparentize(lighten($osd_bg_color, 22%), 0.6); $osd_entry_border: transparentize(darken($osd_bg_color, 12%), 0.6); $osd_insensitive_bg_color: darken($osd_bg_color, 3%); $osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 30%); $osd_borders_color: transparentize(black, 0.3); $panel_bg: darken($dark_sidebar_bg, 4.7%); $panel_fg: $dark_sidebar_fg; $entry_bg: if($variant=='light', $base_color, lighten($base_color, 0%)); $entry_border: if($variant == 'light', #cfd6e6, darken($borders_color, 0%)); $header_entry_bg: if($darker == 'true' or $variant == 'dark', transparentize(lighten($header_bg, 22%), 0.6), transparentize($base_color, 0.1)); $header_entry_border: if($darker == 'true' or $variant == 'dark', transparentize(darken($header_bg, 12%), 0.6), transparentize($header_fg, 0.7)); $button_bg: if($variant == 'light', lighten($bg_color, 2%), lighten($base_color, 2%)); $button_border: $entry_border; $header_button_bg: if($darker == 'true' or $variant == 'dark', transparentize(lighten($header_bg, 22%), 0.6), transparentize($button_bg, 0.1)); $header_button_border: if($darker == 'true' or $variant == 'dark', transparentize(darken($header_bg, 12%), 0.6), transparentize($header_fg, 0.7)); //WM Buttons // Close $wm_button_close_bg: if($variant == 'light' and $darker == 'false', #f46067, #cc575d); $wm_button_close_hover_bg: if($variant == 'light' and $darker == 'false', #f68086, #d7787d); $wm_button_close_active_bg: if($variant == 'light' and $darker == 'false', #f13039, #be3841); $wm_icon_close_bg: if($variant == 'light' and $darker == 'false',#F8F8F9 , #2f343f); // Minimize, Maximize $wm_button_hover_bg: if($variant == 'light' and $darker == 'false', #fdfdfd, #454C5C); $wm_button_active_bg: $selected_bg_color; $wm_button_hover_border: if($variant == 'light' and $darker == 'false', #D1D3DA, #262932); $wm_icon_bg: if($variant == 'light' and $darker == 'false', #90949E, #90939B); $wm_icon_unfocused_bg: if($variant == 'light' and $darker == 'false', #B6B8C0, #666A74); $wm_icon_hover_bg: if($variant == 'light' and $darker == 'false', #7A7F8B, #C4C7CC); $wm_icon_active_bg: $selected_fg_color; ================================================ FILE: common/gnome-shell/3.26/sass/_common.scss ================================================ //This is the RIGHT PLACE to edit the stylesheet $panel-corner-radius: 0px; $asset_path: if($variant == 'dark', dark-assets, light-assets); /* Copyright 2009, 2015 Red Hat, Inc. * * Portions adapted from Mx's data/style/default.css * Copyright 2009 Intel Corporation * * This program is free software; you can redistribute it and/or modify it * under the terms and conditions of the GNU Lesser General Public License, * version 2.1, as published by the Free Software Foundation. * * This program is distributed in the hope it will be useful, but WITHOUT ANY * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for * more details. * * You should have received a copy of the GNU Lesser General Public License * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA. */ // // Globals // $font-size: 9; $font-family: Futura Bk bt, Cantarell, Sans-Serif; $_bubble_bg_color: opacify($osd_bg_color,0.25); $_bubble_fg_color: $osd_fg_color; $_bubble_borders_color: transparentize($osd_fg_color,0.8); $_shell_fg_color: white; stage { font-family: $font-family; @include fontsize($font-size); color: $fg_color; } %reset_style { background-color: transparent !important; background-gradient-direction: none !important; border: none !important; border-radius: 0 !important; } // // Buttons // .button { min-height: 20px; padding: 5px 32px; transition-duration: 0; border-radius: 2px; @extend %button; } %button { @include button(normal); &:focus { @include button(focus); } &:hover { @include button(hover); } &:hover:focus { @include button(focus-hover); } &:active, &:active:focus { @include button(active); } &:insensitive { @include button(insensitive); } } %osd_button { @include button(osd); &:hover { @include button(osd-hover); } &:focus { color: $selected_bg_color; } &:active { @include button(osd-active); } &:insensitive { @include button(osd-insensitive); } } // // Entries // StEntry { padding: 7px; caret-size: 1px; caret-color: $fg_color; selection-background-color: $selected_bg_color; selected-color: $selected_fg_color; transition-duration: 300ms; border-radius: 3px; @include entry(normal); &:focus, &:hover { @include entry(focus); } &:insensitive { @include entry(insensitive); } StIcon.capslock-warning { icon-size: 16px; warning-color: $warning_color; padding: 0 4px; } } // // Scrollbars // StScrollView { &.vfade { -st-vfade-offset: 0px; } &.hfade { -st-hfade-offset: 0px; } } StScrollBar { padding: 8px; StScrollView & { min-width: 5px; min-height: 5px; } StBin#trough { background-color: transparentize($base_color, 0.9); border-radius: 8px; } StButton#vhandle, StButton#hhandle { border-radius: 4px; background-color: mix($fg_color, $bg_color, 40%); border: 0px solid; margin: 0px; &:hover { background-color: mix($fg_color, $bg_color, 30%); } &:active { background-color: $selected_bg_color; } } } // // Slider // .slider { -slider-height: 4px; -slider-background-color: $button_border; //background of the trough -slider-border-color: transparentize(black, 1); //trough border color -slider-active-background-color: $selected_bg_color; //active trough fill -slider-active-border-color: transparentize(black, 1); //active trough border -slider-border-width: 0; -slider-handle-radius: 0px; height: 18px; border: 0 solid transparent; border-right-width: 1px; border-left-width: 5px; color: transparent; .popup-menu-item.selected & { -slider-background-color: transparentize(black, 0.8); -slider-active-background-color: $selected_fg_color; } } // // Check Boxes // .check-box { StBoxLayout { spacing: .8em; } StBin { width: 16px; height: 16px; background-image: url("#{$asset_path}/checkbox/checkbox-unchecked.svg"); } &:focus StBin { background-image: url("#{$asset_path}/checkbox/checkbox-unchecked-focused.svg"); } &:checked StBin { background-image: url("#{$asset_path}/checkbox/checkbox-checked.svg"); } &:focus:checked StBin { background-image: url("#{$asset_path}/checkbox/checkbox-checked-focused.svg"); } } // // Switches // .toggle-switch { width: 50px; height: 20px; background-size: contain; background-image: url("#{$asset_path}/switch/switch-off.svg"); &:checked { background-image: url("#{$asset_path}/switch/switch-on.svg"); } .popup-menu-item.selected & { background-image: url("common-assets/switch/switch-off-selected.svg"); &:checked { background-image: url("common-assets/switch/switch-on-selected.svg"); } } } // // Links // .shell-link { color: $link_color; &:hover { color: lighten($link_color,10%); } } // // Modal Dialogs // .headline { font-size: 110%; } .lightbox { background-color: black; } .flashspot { background-color: white; } .modal-dialog { color: $fg_color; background-color: transparentize($bg_color, 1); border: none; border-image: url("#{$asset_path}/misc/modal.svg") 9 9 9 67; padding: 0 5px 6px 5px; .modal-dialog-content-box { padding: 20px 10px 10px 10px; } &-linked-button { height: if($variant=='light', 39px, 38px); padding: 0; box-shadow: inset 0 0 black; border-top-width: if($variant=='light', 0px, 1px); border-bottom-width: 0; color: $osd_fg_color; background-color: $osd_bg_color; border-color: if($variant=='light', darken($osd_bg_color, 5%), darken($osd_bg_color, 8%)); &:hover { background-color: lighten($osd_bg_color, 5%); } &:focus { color: $selected_bg_color; } &:active { color: $selected_fg_color; background-color: $selected_bg_color; } &:insensitive { color: transparentize($osd_fg_color, 0.5); background-color: darken($osd_bg_color, 2%); } &:first-child { border-radius: 0px 0px 0px 2px; } &:last-child { border-right-width: 0px; border-radius: 0px 0px 2px 0px; } &:first-child:last-child { border-right-width: 0px; border-radius: 0px 0px 2px 2px; } } .run-dialog-entry { width: 21em; } .run-dialog-error-box { padding-top: 5px; spacing: 5px; } //.run-dialog-button-box { padding-top: 1em; } .run-dialog-label { font-size: 0; } } .show-processes-dialog-subject, .mount-question-dialog-subject, .end-session-dialog-subject { //this should be a generic header class @include fontsize($font-size * 1.2); font-weight: bold; color: $fg_color; } // // End Session Dialog // .end-session-dialog { spacing: 42px; //border: 3px solid $_bubble_borders_color; &-list { padding-top: 20px; } &-layout { padding-left: 17px; &:rtl { padding-right: 17px; } } &-description { width: 28em; padding-bottom: 10px; &:rtl { text-align: right; } } &-warning { width: 28em; color: $warning_color; padding-top: 6px; &:rtl { text-align: right; } } &-logout-icon { border: 0px solid transparent; border-radius: 2px; width: 48px; height: 48px; background-size: contain; } &-shutdown-icon { color: $fg_color; width: 48px; height: 48px; } &-inhibitor-layout { spacing: 16px; max-height: 200px; padding-right: 10px; padding-left: 10px; } &-session-list, &-app-list { spacing: 1em; } &-list-header { font-weight: bold; &:rtl { text-align: right; } } &-app-list-item, &-session-list-item { spacing: 1em; } &-app-list-item-name, &-session-list-item-name { font-weight: bold; } &-app-list-item-description { color: lighten($fg_color,5%); @include fontsize($font-size * 0.9); } .modal-dialog-linked-button:last-child { color: $destructive_fg_color; background-color: $destructive_color; &:hover { color: $destructive_fg_color; background-color: lighten($destructive_color, 9%); } &:active { color: $destructive_fg_color; background-color: darken($destructive_color, 5%); } } } // // ShellMountOperation Dialogs // .shell-mount-operation-icon { icon-size: 48px; } .show-processes-dialog, .mount-question-dialog { spacing: 24px; } .show-processes-dialog-subject, .mount-question-dialog-subject { padding-top: 10px; padding-left: 17px; padding-bottom: 6px; &:rtl { padding-left: 0px; padding-right: 17px; } } .mount-question-dialog-subject { max-width: 500px; } .show-processes-dialog-description, .mount-question-dialog-description { padding-left: 17px; width: 28em; &:rtl { padding-right: 17px; } } .show-processes-dialog-app-list { @include fontsize($font-size * 1.1); max-height: 200px; padding-top: 24px; padding-left: 49px; padding-right: 32px; &:rtl { padding-right: 49px; padding-left: 32px; } } .show-processes-dialog-app-list-item { color: darken($fg_color,10%); &:hover { color: $fg_color; } &:ltr { padding-right: 1em; } &:rtl { padding-left: 1em; } } .show-processes-dialog-app-list-item-icon { &:ltr { padding-right: 17px; } &:rtl { padding-left: 17px; } } .show-processes-dialog-app-list-item-name { @include fontsize($font-size * 1.1); } // // Password or Authentication Dialog // .prompt-dialog { //this is the width of the entire modal popup width: 500px; //border: 3px solid $_bubble_borders_color; &-main-layout { spacing: 24px; padding: 10px; } &-message-layout { spacing: 16px; } &-headline { @include fontsize($font-size * 1.3); font-weight: bold; color: $fg_color; } &-descritption:rtl { text-align: right; } &-password-box { spacing: 1em; padding-bottom: 1em; } &-error-label { @include fontsize($font-size); color: $error_color; padding-bottom: 8px; } &-info-label { @include fontsize($font-size); padding-bottom: 8px; } &-null-label { @include fontsize($font-size); padding-bottom: 8px; } } .hidden { color: transparentize(black, 1); } // // Polkit Dialog // .polkit-dialog-user { &-layout { padding-left: 10px; spacing: 10px; &:rtl { padding-left: 0px; padding-right: 10px; } } &-root-label { color: $warning_color; } &-user-icon { border-radius: 2px; background-size: contain; width: 48px; height: 48px; } } // // Audio selection dialog // .audio-device-selection-dialog { spacing: 30px; } .audio-selection { &-content { spacing: 20px; padding: 24px; } &-title { font-weight: bold; text-align: center; } &-box { spacing: 20px; } &-device { border: 1px solid $borders_color; border-radius: 3px; &:active,&:hover,&:focus { background-color: $selected_bg_color; border-color: $selected_bg_color; } } &-device-box { padding: 20px; spacing: 20px; } &-device-icon { icon-size: 64px; } } // // Access Dialog // .access-dialog { spacing: 30px; &-main-layout { padding: 12px 20px 0; spacing: 12px; } &-content { max-width: 28em; spacing: 20px; } &-icon { min-width: 48px; icon-size: 48px; } &-title { font-weight: bold; } &-subtitle { color: $fg_color; font-weight: bold; } } // // Geolocation Dialog // .geolocation-dialog { spacing: 30px; &-main-layout { spacing: 12px; } &-content { spacing: 20px; } &-icon { icon-size: 48px; } &-title { font-weight: bold; } &-reason { color: $fg_color; font-weight: bold; } } // // Network Agent Dialog // .network-dialog-secret-table { spacing-rows: 15px; spacing-columns: 1em; } .keyring-dialog-control-table { spacing-rows: 15px; spacing-columns: 1em; } // // Popvers/Menus // .popup-menu { min-width: 15em; color: $fg_color; border-image: url("#{$asset_path}/menu/menu.svg") 9 9 9 9; .popup-menu-arrow { } //defined globally in the TOP BAR .popup-sub-menu { background: none; box-shadow: none; border-image: url("#{$asset_path}/menu/submenu.svg") 9 9 9 9; } .popup-menu-content { padding: 1em 0em 1em 0em; } .popup-menu-item { spacing: 12px; &:ltr { padding: .4em 3em .4em 0em; } &:rtl { padding: .4em 0em .4em 3em; } &:checked { font-weight: normal; background: none; box-shadow: none; border-image: url("#{$asset_path}/menu/submenu-open.svg") 9 9 9 9; } &:active, &.selected { color: $selected_fg_color; background-color: transparent; border-image: url("common-assets/menu/menu-hover.svg") 9 9 1 1; } &:insensitive { color: transparentize($fg_color, 0.5); background: none; } } .popup-inactive-menu-item { //all icons and other graphical elements color: $fg_color; &:insensitive { color: $insensitive_fg_color; } } //.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is &.panel-menu { -boxpointer-gap: 0px; margin-bottom: 1.75em; } } .popup-menu-ornament { text-align: right; margin-left: 10px; width: 16px; } .popup-menu-boxpointer { -arrow-border-radius: 2px; -arrow-background-color: rgba(0,0,0,0.0); -arrow-border-width: 1px; -arrow-border-color: rgba(0,0,0,0.0); -arrow-base: 0; -arrow-rise: 0; } .candidate-popup-boxpointer { -arrow-border-radius: 2px; -arrow-background-color: $osd_bg_color; -arrow-border-width: 1px; -arrow-border-color: transparentize(black, 0.6); -arrow-base: 5; -arrow-rise: 5; } .popup-separator-menu-item { //-margin-horizontal: 24px; height: 2px; //not really the whole box margin: 0; background-color: transparent; border: none; border-image: url("common-assets/menu/menu-separator.svg") 1 1 1 1; } // Background menu .background-menu { -boxpointer-gap: 4px; -arrow-rise: 0px; } // fallback menu //- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled // app menu inside the main app window itself rather than the top bar // // // OSD // .osd-window { text-align: center; font-weight: bold; spacing: 1em; padding: 20px; margin: 32px; min-width: 64px; min-height: 64px; color: $_shell_fg_color; background: none; border: none; border-radius: 5px; border-image: url("common-assets/misc/osd.svg") 9 9 9 9; .osd-monitor-label { font-size: 3em; } .level { padding: 0; height: 4px; background-color: transparentize(black, 0.5); border-radius: 2px; color: $selected_bg_color; } .level-bar { background-color: $selected_bg_color; border-radius: 2px; } } .resize-popup { color: $osd_fg_color; background: none; border: none; border-radius: 5px; border-image: url("common-assets/misc/osd.svg") 9 9 9 9; padding: 12px; } // // Alt Tab Switcher // .switcher-popup { padding: 8px; spacing: 16px; } .switcher-list { background: none; border: none; border-image: url("common-assets/misc/bg.svg") 9 9 9 9; border-radius: 3px; padding: 20px; &-item-container { spacing: 8px; } .item-box { padding: 8px; border-radius: 2px; border: 1px solid transparent; &:outlined { padding: 8px; border: 1px solid $selected_bg_color; } &:selected { color: $selected_fg_color; background-color: $selected_bg_color; border: 1px solid $selected_bg_color; } } .thumbnail-box { padding: 2px; spacing: 4px; } .thumbnail { width: 256px; } .separator { width: 1px; background: transparentize($fg_color, 0.67); } } .switcher-arrow { border-color: rgba(0,0,0,0); color: $osd_fg_color; &:highlighted { color: $_shell_fg_color; } } .input-source-switcher-symbol { font-size: 34pt; width: 96px; height: 96px; } // //Window Cycler // .cycler-highlight { border: 5px solid $selected_bg_color; } // // Workspace Switcher // .workspace-switcher { background: transparent; border: 0px; border-radius: 0px; padding: 0px; spacing: 8px; &-group { padding: 12px; } &-container { border-image: url("common-assets/misc/bg.svg") 9 9 9 9; border-radius: 3px; padding: 20px; padding-bottom: 24px; } } .ws-switcher-active-up, .ws-switcher-active-down { height: 30px; background-color: $selected_bg_color; background-size: 96px; border-radius: 2px; border: 1px solid $selected_bg_color; } .ws-switcher-active-up { background-image: url("common-assets/misc/ws-switch-arrow-up.png"); } .ws-switcher-active-down { background-image: url("common-assets/misc/ws-switch-arrow-down.png"); } .ws-switcher-box { height: 96px; background-color: transparentize(black, 0.67); border-color: transparentize(black, 0.67); border-radius: 2px; } // // Tiled window previews // .tile-preview { background-color: transparentize($selected_bg_color, 0.65); border: 1px solid $selected_bg_color; &-left.on-primary { border-radius: $panel-corner-radius 0 0 0; } &-right.on-primary { border-radius: 0 $panel-corner-radius 0 0; } &-left.tile-preview-right.on-primary { border-radius: $panel-corner-radius $panel-corner-radius 0 0; } } // // Top Bar // #panel { $_panel_fg_color: $_shell_fg_color; font-weight: bold; height: 2.1em; min-height: 27px; background-gradient-direction: none; background-color: transparent; border-bottom-width: 0; border-image: url('common-assets/panel/panel.svg') 1 1 1 1; // Fix dynamic top bar extension &.dynamic-top-bar-white-btn { border-image: none; } &.unlock-screen, &.login-screen, &.lock-screen { background-color: transparent; border-image: none; } &:overview { border-image: url('common-assets/panel/panel-overview.svg') 1 1 1 1; } #panelLeft, #panelCenter { // spacing between activities<>app menu and such spacing: 8px; } .panel-corner { -panel-corner-radius: $panel-corner-radius; -panel-corner-background-color: transparentize(black, 1); -panel-corner-border-width: 0px; -panel-corner-border-color: black; &:active, &:overview, &:focus { -panel-corner-border-color: black; } &.lock-screen, &.login-screen, &unlock-screen { -panel-corner-radius: 0; -panel-corner-background-color: transparent; -panel-corner-border-color: transparent; } } .panel-button { -natural-hpadding: 10px; -minimum-hpadding: 6px; font-weight: bold; color: $_panel_fg_color; text-shadow: none; transition-duration: 100ms; border-bottom-width: 1px; border-color: transparent; .app-menu-icon { width: 0; height: 0; margin-left: 0px; margin-right: 0px; } .system-status-icon, .app-menu-icon > StIcon, .popup-menu-arrow { icon-shadow: none; } &:hover { color: $_panel_fg_color; background-color: transparentize(black, 0.83); border-bottom-width: 1px; border-color: transparent; .system-status-icon, .app-menu-icon > StIcon, .popup-menu-arrow { icon-shadow: none; } } &:active, &:overview, &:focus, &:checked { color: $selected_fg_color; background-color: $selected_bg_color; box-shadow: none; border-bottom-width: 1px; border-color: black; & > .system-status-icon { icon-shadow: none; } } .system-status-icon { color: $selected_fg_color; icon-size: 16px; padding: 0 4px; } .unlock-screen &, .login-screen &, .lock-screen & { color: lighten($fg_color, 10%); &:focus, &:hover, &:active { color: lighten($fg_color, 10%); } } } .panel-button > *{ color: $selected_fg_color; } #panelActivities.panel-button { -natural-hpadding: 12px; } .panel-status-indicators-box, .panel-status-menu-box { spacing: 2px; color: $selected_fg_color; } // spacing between power icon and (optional) percentage label .power-status.panel-status-indicators-box { spacing: 0; } .screencast-indicator { color: $error_color; } .clock-display > * > *:last-child { color: $selected_bg_color; margin-left: .3em; } .popup-menu-arrow { width: 0; } } // Activities button #panel #panelActivities.panel-button { > * { background-image: url("common-assets/panel/activities.svg"); background-position: center top; width: 24px; height: 24px; background-color: transparent !important; background-gradient-direction: none !important; border: 0 solid transparent !important; text-shadow: 0 0 transparent !important; transition-duration: 0ms !important; box-shadow: none !important; color: transparent; } &:active, &:overview, &:focus, &:checked { background-color: transparent; box-shadow: none; border-bottom-width: 1px; border-color: transparent; > * { background-image: url("common-assets/panel/activities-active.svg"); } } } // a little unstructured mess: .system-switch-user-submenu-icon { icon-size: 20px; padding: 0 2px; } .system-switch-user-submenu-icon.default-icon { icon-size: 16px; padding: 0 4px; } #appMenu { spinner-image: url("common-assets/misc/process-working.svg"); spacing: 4px; padding: 0 8px; .label-shadow { color: transparent; } } .aggregate-menu { min-width: 23.5em; .popup-menu-icon { padding: 0 4px; } } .system-menu-action { padding: 13px; color: $fg_color; border-radius: 32px; /* wish we could do 50% */ border: 1px solid transparent; &:hover, &:focus { transition-duration: 100ms; padding: 13px; color: $fg_color; background-color: transparent; border: 1px solid $selected_bg_color; } &:active { color: $selected_fg_color; background-color: $selected_bg_color; border: 1px solid $selected_bg_color; } & > StIcon { icon-size: 16px; } } // // Calendar popover // #calendarArea { padding: 0.75em 1.0em; } .calendar { margin-bottom: 1em; } .calendar, .datemenu-today-button, .datemenu-displays-box, .message-list-sections { margin: 0 0.4em; } .datemenu-calendar-column { spacing: 0.5em; border: none; } .datemenu-displays-section { padding-bottom: 3em; } .datemenu-today-button, .world-clocks-button, .weather-button, .message-list-section-title, .events-section-title { border-radius: 3px; padding: .4em; } .message-list-section-list:ltr { padding-left: .4em; } .message-list-section-list:rtl { padding-right: .4em; } .datemenu-today-button, .world-clocks-button, .weather-button, .message-list-section-title, .events-section-title { padding: 7px 10px 7px 10px; border: 1px solid transparentize($base_color, 1); &:hover, &:focus { @include button(hover); } &:active { @include button(active); } } .datemenu-today-button .day-label { } .datemenu-today-button .date-label { font-size: 1.5em; } .world-clocks-header, .weather-header, .message-list-section-title, .events-section-title { color: transparentize($fg_color, 0.6); font-weight: bold; } .world-clocks-button:active .world-clocks-header, .weather-button:active .weather-header { color: $selected_fg_color; } .world-clocks-grid { spacing-rows: 0.4em; } .weather-box { spacing: 0.4em; } .calendar-month-label { color: $fg_color; font-weight: bold; padding: 8px 0; &:focus {} } .pager-button { color: transparent; background-color: transparent; width: 32px; border-radius: 2px; &:focus, &:hover, &:active { background-color: transparent; } } //arrow back .calendar-change-month-back { background-image: url("#{$asset_path}/misc/calendar-arrow-left.svg"); &:focus, &:hover { background-image: url("#{$asset_path}/misc/calendar-arrow-left-hover.svg"); } &:active { background-image: url("#{$asset_path}/misc/calendar-arrow-left.svg"); } &:rtl { background-image: url("#{$asset_path}/misc/calendar-arrow-right.svg"); &:focus, &:hover { background-image: url("#{$asset_path}/misc/calendar-arrow-right-hover.svg"); } &:active { background-image: url("#{$asset_path}/misc/calendar-arrow-right.svg"); } } } //arrow forward .calendar-change-month-forward { background-image: url("#{$asset_path}/misc/calendar-arrow-right.svg"); &:focus, &:hover { background-image: url("#{$asset_path}/misc/calendar-arrow-right-hover.svg"); } &:active { background-image: url("#{$asset_path}/misc/calendar-arrow-right.svg"); } &:rtl { background-image: url("#{$asset_path}/misc/calendar-arrow-left.svg"); &:focus, &:hover { background-image: url("#{$asset_path}/misc/calendar-arrow-left-hover.svg"); } &:active { background-image: url("#{$asset_path}/misc/calendar-arrow-left.svg"); } } } .calendar-day-base { font-size: 80%; text-align: center; width: 25px; height: 25px; padding: 0.1em; margin: 2px; border-radius: 12.5px; &:hover, &:focus { background-color: transparentize(black, 0.9); } &:active, &:selected { color: $fg_color; background-color: transparentize(black, 0.85); border-width: 0; //avoid jumparound due to today } &.calendar-day-heading { //day of week heading color: transparentize($fg_color, 0.15); margin-top: 1em; font-size: 70%; } } .calendar-day { //border collapse hack - see calendar.js border-width: 0; color: transparentize($fg_color, 0.2); } .calendar-day-top { border-top-width: 0; } .calendar-day-left { border-left-width: 0; } .calendar-work-day {} .calendar-nonwork-day { color: $fg_color; font-weight: bold; } .calendar-today, .calendar-today:active, .calendar-today:selected, .calendar-today:focus, .calendar-today:hover { font-weight: bold; color: $selected_fg_color; background-color: $selected_bg_color; border-width: 0; } .calendar-day-with-events { font-weight: bold; background-image: url("common-assets/misc/calendar-today.svg"); } .calendar-today.calendar-day-with-events { color: $selected_fg_color; } .calendar-other-month-day { color: transparentize($fg_color, 0.7); opacity: 1; } .calendar-week-number { font-size: 70%; font-weight: bold; width: 2.3em; height: 1.8em; border-radius: 2px; padding: 0.5em 0 0; margin: 6px; background-color: transparentize($fg_color,0.7); color: $bg_color; } // // Message list // .message-list { width: 31.5em; &-sections { spacing: 1.5em; } &-section, &-section-list { spacing: 0.7em; } &-section-list-title-box { spacing: 0.4em; } &-placeholder { StIcon { width: 0; height: 0; } StLabel { color: $insensitive_fg_color; } } &-clear-button.button { margin: 1.5em 1.5em 0; padding: 4px 12px; } &-section-close { > StIcon { icon-size: 18px; border-radius: 0px; color: transparent; background-color: transparent; background-image: url('#{$asset_path}/misc/message-close.svg'); } &:hover > StIcon { color: transparent; background-color: transparent; background-image: url('#{$asset_path}/misc/message-close-hover.svg'); } &:active > StIcon { color: transparent; background-color: transparent; background-image: url('#{$asset_path}/misc/message-close-active.svg'); } } } .message { padding: 4px; color: $fg_color; border-image: url("#{$asset_path}/misc/message.svg") 9 9 9 9; &:hover, &:focus { color: $fg_color; border-image: url("#{$asset_path}/misc/message-hover.svg") 9 9 9 9; } &:active { color: $selected_fg_color; border-image: url("#{$asset_path}/misc/message-active.svg") 9 9 9 9; } &-icon-bin { padding: 8px 0px 8px 8px; &:rtl { padding: 8px 8px 8px 0px; } > StIcon { //icon-size: 32px; color: inherit; } } &-secondary-bin, &-secondary-bin > .event-time { color: transparentize($fg_color, 0.4); font-size: 0.9em; &:ltr { padding-left: 8px; } &:rtl { padding-right: 8px; } } &:active .message-secondary-bin, &:active .message-secondary-bin > .event-time { color: transparentize($selected_fg_color, 0.4); } &-secondary-bin > StIcon { icon-size: 16px; } &-title { color: inherit; font-weight: bold; font-size: 1em; padding: 2px 0 2px 0; } &-content { color: inherit; padding: 8px; font-size: 1em; } } .message-media-control { padding: 6px; color: $fg_color; &:last-child:ltr { padding-right: 18px; } &:last-child:rtl { padding-left: 18px; } &:hover { color: transparentize($fg_color, 0.3); } &:active { color: $selected_bg_color; } &:insensitive { color: $insensitive_fg_color; } } .message:active .message-media-control { color: $selected_fg_color; } .media-message-cover-icon { icon-size: 32px; &.fallback { color: $insensitive_fg_color; background-color: $bg_color; border-radius: 2px; icon-size: 16px; padding: 8px; border: 1px solid $borders_color; } } // //Activities Ripples // .ripple-box { width: 52px; height: 52px; background-image: url("common-assets/misc/corner-ripple-ltr.svg"); background-size: contain; &:rtl { background-image: url("common-assets/misc/corner-ripple-rtl.svg"); } } // not really top bar only .popup-menu-arrow { width: 16px; height: 16px; } .popup-menu-icon { icon-size: 16px; } // //Close buttons // .window-close { background-image: url("common-assets/misc/close.svg"); background-size: 26px; height: 26px; width: 26px; &:hover { background-image: url("common-assets/misc/close-hover.svg"); background-size: 26px; height: 26px; width: 26px; } &:active { background-image: url("common-assets/misc/close-active.svg"); background-size: 26px; height: 26px; width: 26px; } } .window-close { -shell-close-overlap: 11px; } // // Network Dialogs // .nm-dialog { max-height: 500px; min-height: 450px; min-width: 470px; &-content { spacing: 20px; padding: 10px; } &-header-hbox { spacing: 10px; } &-airplane-box { spacing: 12px; } &-airplane-headline { font-size: 1.1em; font-weight: bold; text-align: center; } &-airplane-text { color: $fg_color; } &-header-icon { icon-size: 32px; } &-scroll-view { border: 1px solid $borders_color; border-radius: 2px; background-color: $base_color; } &-header { font-weight: bold; font-size: 1.2em; } &-item { font-size: 1em; border-bottom: 0px solid; padding: 12px; spacing: 0px; &:selected { background-color: $selected_bg_color; color: $selected_fg_color; } } &-icons { spacing: .5em; } &-icon { icon-size: 16px; } } .no-networks-label { color: $insensitive_fg_color; } .no-networks-box { spacing: 12px; } // // Overview // #overview { spacing: 24px; } .overview-controls { padding-bottom: 32px; } .window-picker { //container around window thumbnails -horizontal-spacing: 32px; -vertical-spacing: 32px; padding-left: 32px; padding-right: 32px; padding-bottom: 48px; &.external-monitor { padding: 32px; } } .window-clone-border { border: 3px solid transparentize($selected_bg_color, 0.2); border-radius: 4px; box-shadow: inset 0px 0px 0px 1px transparentize($selected_bg_color, 1); } .window-caption, .window-caption:hover { spacing: 25px; color: $selected_fg_color; background-color: $selected_bg_color; border-radius: 2px; padding: 4px 12px; } // // Search Entry // .search-entry { width: 320px; padding: 7px 9px; border-radius: 20px; border: 1px solid transparentize(black, 0.75); background-color: transparentize($entry_bg, 0.1); &:focus { padding: 7px 9px; } .search-entry-icon { icon-size: 16px; padding: 0 4px; color: $fg_color; } &:hover, &:focus { color: $selected_fg_color; caret-color: $selected_fg_color; background-color: $selected_bg_color; selection-background-color: $selected_fg_color; selected-color: $selected_bg_color; .search-entry-icon { color: $selected_fg_color; } } } // // Search Results // #searchResultsBin { max-width: 1000px; } #searchResultsContent { padding-left: 20px; padding-right: 20px; spacing: 16px; } // This should be equal to #searchResultsContent spacing .search-section { spacing: 16px; } // This is the space between the provider icon and the results container .search-section-content { spacing: 32px; } // "no results" .search-statustext { @extend %status_text; } .list-search-results { spacing: 3px; } .search-section-separator { background-color: transparentize(white, 0.8); -margin-horizontal: 1.5em; height: 1px; } .list-search-result-content { spacing: 12px; padding: 12px; } .list-search-result-title { font-size: 1.5em; color: $_shell_fg_color; } .list-search-result-description { color: darken($_shell_fg_color, 20%); } .search-provider-icon { padding: 15px; } .search-provider-icon-more { width: 16px; height: 16px; background-image: url("common-assets/misc/more-results.svg"); } // // Dash // #dash { font-size: 1em; color: $osd_fg_color; background-color: $dark_sidebar_bg; border-color: rgba(0,0,0,0.4); padding: 4px 0; border-radius: 0 3px 3px 0; &:rtl { border-radius: 3px 0 0 3px; } .right &, &:rtl { padding: 4px 0; } .top &, .bottom & { padding: 0; } .placeholder { background-image: url("common-assets/dash/dash-placeholder.svg"); background-size: contain; height: 24px; } .empty-dash-drop-target { width: 24px; height: 24px; } } .dash-item-container > StWidget { &, &:rtl, .right & { padding: 4px 8px; } .top &, .bottom & { padding: 6px; } } //osd tooltip .dash-label { border-radius: 3px; padding: 4px 12px; color: $_shell_fg_color; background-color: transparentize(black, 0.3); text-align: center; -x-offset: 3px; .bottom &, .top & { -y-offset: 3px; -x-offset: 0; } } // Dash Buttons #dash .app-well-app { &:hover .overview-icon, .right &:hover .overview-icon, .bottom &:hover .overview-icon, .top &:hover .overview-icon { background-color: $selected_bg_color; } &:active .overview-icon, .right &:active .overview-icon, .bottom &:active .overview-icon, .top &:active .overview-icon { box-shadow: none; background-color: darken($selected_bg_color, 10%); } &-running-dot { width: 11px; height: 2px; margin-bottom: 2px; background-color: $selected_bg_color; } } #dashtodockContainer { .app-well-app-running-dot { background: none; width: 28px; height: 4px; } // Add missing 1px margin for finer .show-apps-icon alignment // via margin property instead to keep 1px smaller .show-apps-icon size // like standard #dash styling. Better than 1px transparent border. .show-apps .overview-icon { margin: 1px; } @each $var in 1, 2, 3, 4 { .running#{$var} .app-well-app-running-dot { background-image: url("common-assets/dash/running#{$var}.svg"); } } } .show-apps { .overview-icon { background-color: transparentize(black, 0.5); border-radius: 2px; border: 0px solid; } &:hover .overview-icon { background-color: transparentize(black, 0.3); color: $selected_bg_color; } &:active .overview-icon, &:active .show-apps-icon, &:checked .overview-icon, &:checked .show-apps-icon { color: $selected_fg_color; background-color: $selected_bg_color; box-shadow: none; transition-duration: 0ms; } } // // App Vault/Grid // .icon-grid { spacing: 30px; -shell-grid-horizontal-item-size: 136px; -shell-grid-vertical-item-size: 136px; .overview-icon { icon-size: 96px; } } //.app-display { spacing: 20px; } //favorties | all toggle container .app-view-controls { padding-bottom: 32px; } //favorties | all toggle button .app-view-control { padding: 4px 32px; @include button(osd); &:hover { @include button(osd-hover); } &:checked { color: $selected_fg_color; background-color: $selected_bg_color; } &:first-child:ltr, &:last-child:rtl { border-radius: 2px 0 0 2px; border-right-width: 0; } &:last-child:ltr, &:first-child:rtl { border-radius: 0 2px 2px 0; border-left-width: 0;} } // // Icon Tile // .search-provider-icon, .list-search-result { @extend %icon_tile; &:active, &:checked { background-color: transparentize(darken($osd_bg_color,10%),.1); } &:focus, &:selected, &:hover { background-color: transparentize($osd_fg_color,.6); transition-duration: 200ms; } } .app-well-app, .app-well-app.app-folder, .grid-search-result { .overview-icon { @extend %icon_tile; } &:active .overview-icon, &:checked .overview-icon { background-color: transparentize(darken($osd_bg_color,10%),.1); box-shadow: inset 0 0 $selected_bg_color; } &:hover .overview-icon, &:focus .overview-icon, &:selected .overview-icon { background-color: transparentize($osd_fg_color,.6); transition-duration: 0ms; border-image: none; background-image: none; } } .app-well-app-running-dot { //running apps indicator width: 20px; height: 2px; margin-bottom: 4px; background-color: $selected_bg_color; } %icon_tile { color: $_shell_fg_color; border-radius: 2px; padding: 6px; border: 1px solid transparent; transition-duration: 0ms; text-align: center; } // // Collections // .app-well-app.app-folder { > .overview-icon { background-color: darken($dark_sidebar_bg, 8%); border: 1px solid transparentize(darken($dark_sidebar_bg, 25%), 0.5); } &:hover > .overview-icon { background-color: lighten($dark_sidebar_bg, 3%); } &:active > .overview-icon, &:checked > .overview-icon { color: $selected_fg_color; background-color: $selected_bg_color; box-shadow: none; } &:focus > .overview-icon { background-color: $selected_bg_color; } } .app-folder-popup { //expanded collection -arrow-border-radius: 2px; -arrow-background-color: darken($dark_sidebar_bg, 8%); -arrow-border-color: transparentize(darken($dark_sidebar_bg, 25%), 0.5); -arrow-border-width: 1px; -arrow-base: 5; -arrow-rise: 5; } .app-folder-popup-bin { padding: 5px; } .app-folder-icon { padding: 5px; spacing-rows: 5px; spacing-columns: 5px; } .page-indicator { padding: 15px 20px; .page-indicator-icon { width: 18px; height: 18px; background-image: url(common-assets/misc/page-indicator-inactive.svg); } &:hover .page-indicator-icon { background-image: url(common-assets/misc/page-indicator-hover.svg); } &:active .page-indicator-icon { background-image: url(common-assets/misc/page-indicator-active.svg); } &:checked .page-indicator-icon, &:checked:active { background-image: url(common-assets/misc/page-indicator-checked.svg); } } .no-frequent-applications-label { @extend %status_text; } .app-well-app > .overview-icon.overview-icon-with-label, .grid-search-result .overview-icon.overview-icon-with-label { padding: 10px 8px 5px 8px; spacing: 4px; } // // Workspace pager // .workspace-thumbnails, .workspace-thumbnails-left { &, &:rtl { visible-width: 40px; //amount visible before hover spacing: 11px; padding: 12px; } } .workspace-thumbnails, .workspace-thumbnails-left:rtl { padding-right: 7px; border-image: url("common-assets/dash/dash-right.svg") 9 9 9 9; } .workspace-thumbnails:rtl, .workspace-thumbnails-left { padding-left: 7px; border-image: url("common-assets/dash/dash-left.svg") 9 9 9 9; } .workspace-thumbnail-indicator { border: 4px solid transparentize($selected_bg_color, 0.2); border-radius: 1px; padding: 1px; } //Some hacks I don't even .search-display > StBoxLayout, .all-apps, .frequent-apps > StBoxLayout { // horizontal padding to make sure scrollbars or dash don't overlap content padding: 0px 88px 10px 88px; } %status_text { font-size: 2em; font-weight: bold; color: $fg_color; } // // Notifications & Message Tray // .url-highlighter { link-color: $link_color; } // Banners .notification-banner, .notification-banner:hover, .notification-banner:focus { font-size: 1em; width: 34em; margin: 5px; padding: 10px; color: $fg_color; background-color: transparent; border: 1px solid transparent; border-image: url("#{$asset_path}/menu/menu.svg") 9 9 9 9; .notification-icon { padding: 5px; } .notification-content { padding: 5px; spacing: 5px; } .secondary-icon { icon-size: 1.09em; } .notification-actions { background-color: transparent; padding: 2px 2px 0 2px; spacing: 3px; } .notification-button { padding: 4px 4px 5px; @extend %button; &:first-child, &:last-child { border-radius: 2px; } } } .secondary-icon { icon-size: 1.09em; } // Chat Bubbles .chat-body { spacing: 5px; } .chat-response { margin: 5px; } .chat-log-message { color: $fg_color; } .chat-new-group { padding-top: 1em; } .chat-received { padding-left: 4px; &:rtl { padding-left: 0px; padding-right: 4px; } } .chat-sent { padding-left: 18pt; color: $selected_bg_color; &:rtl { padding-left: 0; padding-right: 18pt; } } .chat-meta-message { padding-left: 4px; font-size: 9pt; font-weight: bold; color: transparentize($fg_color, 0.4); &:rtl { padding-left: 0; padding-right: 4px; } } .subscription-message { font-style: italic; } // Hotplug .hotplug-transient-box { spacing: 6px; padding: 2px 72px 2px 12px; } .hotplug-notification-item { padding: 2px 10px; @extend %button; &:focus { padding: 2px 10px; } } .hotplug-notification-item-icon { icon-size: 24px; padding: 2px 5px; } .hotplug-resident-box { spacing: 8px; } .hotplug-resident-mount { spacing: 8px; border-radius: 4px; &:hover { background-color: transparentize($bg_color,0.7); } } .hotplug-resident-mount-label { color: inherit; padding-left: 6px; } .hotplug-resident-mount-icon { icon-size: 24px; padding-left: 6px; } .hotplug-resident-eject-icon { icon-size: 16px; } .hotplug-resident-eject-button { padding: 7px; border-radius: 5px; color: pink; } // Eeeky things $legacy_icon_size: 24px; .legacy-tray { background-color: $panel_bg; &:ltr { border-radius: 0 2px 0 0; border-left-width: 0; } &:rtl { border-radius: 2px 0 0 0; border-right-width: 0; } } .legacy-tray-handle, .legacy-tray-icon { padding: 6px; & StIcon { icon-size: $legacy_icon_size; } &:hover, &:focus { background-color: transparentize($fg_color,0.9); } } .legacy-tray-icon-box { spacing: 12px; &:ltr { padding-left: 12px; } &:rtl { padding-right: 12px; } & StButton { width: $legacy_icon_size; height: $legacy_icon_size } } .masterslider.smaller .masterlabel, .masterslider.smaller .slider { min-width: 155px; } // Magnifier .magnifier-zoom-region { border: 2px solid $selected_bg_color; &.full-screen { border-width: 0; } } // // On-Screen Keyboard // #keyboard { background-color: $osd_bg_color; border-width: 0; border-top-width: 1px; border-color: transparentize(black, 0.8); } .keyboard-layout { spacing: 10px; padding: 10px; } .keyboard-row { spacing: 15px; } .keyboard-key { min-height: 2em; min-width: 2em; font-size: 14pt; font-weight: bold; border-radius: 3px; box-shadow: none; @include button(osd); &:hover { @include button(osd-hover); } &:active, &:checked { @include button(osd-active); } &:grayed { @include button(osd-insensitive); } } .keyboard-subkeys { //long press on a key popup color: $osd_fg_color; padding: 5px; -arrow-border-radius: 2px; -arrow-background-color: $osd_bg_color; -arrow-border-width: 1px; -arrow-border-color: transparentize(black, 0.6);; -arrow-base: 20px; -arrow-rise: 10px; -boxpointer-gap: 5px; } // // IBus Candidate Popup // .candidate-popup-content { padding: 0.5em; spacing: 0.3em; color: $osd_fg_color; font-size: 1.15em; } .candidate-index { padding: 0 0.5em 0 0; color: lighten($osd_fg_color, 10%); } .candidate-box { padding: 0.3em 0.5em 0.3em 0.5em; border-radius: 2px; color: $osd_fg_color; &:selected,&:hover { background-color: $selected_bg_color; color: $selected_fg_color; } } .candidate-page-button-box { height: 2em; .vertical & { padding-top: 0.5em; } .horizontal & { padding-left: 0.5em; } } .candidate-page-button { padding: 4px; } .candidate-page-button-previous { border-radius: 2px 0px 0px 2px; border-right-width: 0; } .candidate-page-button-next { border-radius: 0px 2px 2px 0px; } .candidate-page-button-icon { icon-size: 1em; } // // Auth Dialogs & Screen Shield // .framed-user-icon { background-size: contain; border: 0px solid transparent; color: $fg_color; border-radius: 2px; &:hover { border-color: transparent; color: lighten($osd_fg_color,30%); } } // // Login Dialog // .login-dialog-banner-view { padding-top: 24px; max-width: 23em; } .login-dialog { //reset border: none; background-color: transparent; .modal-dialog-button-box { spacing: 3px; } .modal-dialog-button { padding: 3px 18px; &:default { @include button(normal); &:hover,&:focus { @include button(hover); } &:active { @include button(active); } &:insensitive { @include button(insensitive); } } } } .login-dialog-logo-bin { padding: 24px 0px; } .login-dialog-banner { color: darken($osd_fg_color,10%); } .login-dialog-button-box { spacing: 5px; } .login-dialog-message-warning { color: $warning_color; } .login-dialog-message-hint { padding-top: 0; padding-bottom: 20px; } .login-dialog-user-selection-box { padding: 100px 0px; .login-dialog-not-listed-label { padding-left: 2px; .login-dialog-not-listed-button:focus &, .login-dialog-not-listed-button:hover & { color: $osd_fg_color; } } } .login-dialog-not-listed-label { font-size: 90%; font-weight: bold; color: darken($osd_fg_color,30%); padding-top: 1em; } .login-dialog-user-list-view { -st-vfade-offset: 1em; } .login-dialog-user-list { spacing: 12px; padding: .2em; width: 23em; &:expanded .login-dialog-user-list-item:focus { background-color: $selected_bg_color; color: $selected_fg_color; } &:expanded .login-dialog-user-list-item:logged-in { border-right: 2px solid $selected_bg_color; } } .login-dialog-user-list-item { border-radius: 5px; padding: .2em; color: darken($osd_fg_color,30%); &:ltr { padding-right: 1em; } &:rtl { padding-left: 1em; } &:hover { background-color: $selected_bg_color; color: $selected_fg_color; } .login-dialog-timed-login-indicator { height: 2px; margin: 2px 0 0 0; background-color: $osd_fg_color; } &:focus .login-dialog-timed-login-indicator { background-color: $selected_fg_color; } } .login-dialog-username, .user-widget-label { color: $osd_fg_color; font-size: 120%; font-weight: bold; text-align: left; padding-left: 15px; } .user-widget-label { &:ltr { padding-left: 18px; } &:rtl { padding-right: 18px; } } .login-dialog-prompt-layout { padding-top: 24px; padding-bottom: 12px; spacing: 8px; width: 23em; } .login-dialog-prompt-label { color: darken($osd_fg_color, 20%); font-size: 110%; padding-top: 1em; } .login-dialog-session-list-button StIcon { icon-size: 1.25em; } .login-dialog-session-list-button { color: darken($osd_fg_color,30%); &:hover,&:focus { color: $osd_fg_color; } &:active { color: darken($osd_fg_color, 50%); } } // // Screen Shield // .screen-shield-arrows { padding-bottom: 3em; } .screen-shield-arrows Gjs_Arrow { color: white; width: 80px; height: 48px; -arrow-thickness: 12px; -arrow-shadow: 0 1px 1px rgba(0,0,0,0.4); } .screen-shield-clock { color: white; text-shadow: 0px 1px 2px rgba(0,0,0,0.6); font-weight: bold; text-align: center; padding-bottom: 1.5em; } .screen-shield-clock-time { font-size: 72pt; text-shadow: 0px 2px 2px rgba(0,0,0,0.4); } .screen-shield-clock-date { font-size: 28pt; } .screen-shield-notifications-container { spacing: 6px; width: 30em; background-color: transparent; max-height: 500px; .summary-notification-stack-scrollview { padding-top: 0; padding-bottom: 0; } .notification, .screen-shield-notification-source { padding: 12px 6px; border: 1px solid $_bubble_borders_color; background-color: transparentize($osd_bg_color,0.5); color: $_bubble_fg_color; border-radius: 4px; } .notification { margin-right: 15px; } //compensate for space allocated to the scrollbar } .screen-shield-notification-label { font-weight: bold; padding: 0px 0px 0px 12px; } .screen-shield-notification-count-text { padding: 0px 0px 0px 12px; } #panel.lock-screen { background-color: transparentize($_bubble_bg_color, 0.5); } .screen-shield-background { //just the shadow, really background: black; box-shadow: 0px 2px 4px transparentize(black,0.6); } #lockDialogGroup { background: #2e3436 url(misc/noise-texture.png); background-repeat: repeat; } #screenShieldNotifications { StButton#vhandle, StButton#hhandle { background-color: transparentize($bg_color,0.7); &:hover, &:focus { background-color: transparentize($bg_color,0.5); } &:active { background-color: transparentize($selected_bg_color,0.5); } } } // // Looking Glass // #LookingGlassDialog { spacing: 4px; padding: 8px 8px 10px 8px; background-color: transparentize(black, 0.3); border: 1px solid black; border-image: url("common-assets/misc/bg.svg") 9 9 9 9; border-radius: 2px; color: $osd_fg_color; & > #Toolbar { padding: 3px; border: none; background-color: transparent; border-radius: 0px; } .labels { spacing: 4px; } .notebook-tab { -natural-hpadding: 12px; -minimum-hpadding: 6px; font-weight: bold; color: $osd_fg_color; transition-duration: 100ms; padding-left: .3em; padding-right: .3em; &:hover { color: $_shell_fg_color; text-shadow: black 0px 2px 2px; } &:selected { border-bottom-width: 0px; color: $selected_bg_color; text-shadow: black 0px 2px 2px; } } StBoxLayout#EvalBox { padding: 4px; spacing: 4px; } StBoxLayout#ResultsArea { spacing: 4px; } } .lg-dialog { StEntry { caret-color: $selected_fg_color; selection-background-color: $selected_bg_color; selected-color: $selected_fg_color; @include entry(osd); &:focus { @include entry(osd-focus); selection-background-color: $selected_fg_color; selected-color: $selected_bg_color; } } .shell-link { color: $link_color; &:hover { color: lighten($link_color,10%); } } } .lg-completions-text { font-size: .9em; font-style: italic; } .lg-obj-inspector-title { spacing: 4px; } .lg-obj-inspector-button { border: 1px solid gray; padding: 4px; border-radius: 4px; &:hover { border: 1px solid #ffffff; } } #lookingGlassExtensions { padding: 4px; } .lg-extensions-list { padding: 4px; spacing: 6px; } .lg-extension { border: 1px solid $osd_borders_color; border-radius: 2px; background-color: $osd_bg_color; padding: 4px; } .lg-extension-name { font-weight: bold; } .lg-extension-meta { spacing: 6px; } #LookingGlassPropertyInspector { background: transparentize(black, 0.3); border: 1px solid grey; border-radius: 2px; padding: 6px; } ================================================ FILE: common/gnome-shell/3.26/sass/_drawing.scss ================================================ // Drawing mixins // generic drawing of more complex things // provide font size in rem, with px fallback @mixin fontsize($size: 24, $base: 16) { font-size: round($size) + pt; //font-size: ($size / $base) * 1rem; } // Entries @mixin entry($t, $dark:false) { // // Entries drawing function // //@extend %reset_style; @if $t==normal { color: $text_color; background-color: $entry_bg; border: 1px solid $entry_border; box-shadow: inset 0 2px 4px transparentize($entry_bg, 0.95); } @if $t==focus { color: $fg_color; background-color: $entry_bg; border: 1px solid $selected_bg_color; box-shadow: inset 0 2px 4px transparentize($entry_bg, 0.95); } @if $t==insensitive { color: $insensitive_fg_color; background-color: mix($entry_bg, $bg_color, 55%); border-color: 1px solid mix($entry_border, $bg_color, 55%); box-shadow: inset 0 2px 4px transparentize(mix($entry_bg, $bg_color, 55%), 0.95); } @if $t==osd { color: $osd_fg_color; background-color: $osd_entry_bg; border: 1px solid $osd_entry_border; box-shadow: inset 0 2px 4px transparentize(black, 0.95); } @if $t==osd-focus { color: $selected_fg_color; background-color: $selected_bg_color; border: 1px solid $osd_entry_border; box-shadow: inset 0 2px 4px transparentize(black, 0.95); } @if $t==osd-insensitive { color: transparentize($osd_fg_color, 0.45); background-color: transparentize($osd_entry_bg, 0.15); border: 1px solid $osd_entry_border; box-shadow: inset 0 2px 4px transparentize(black, 0.95); } } // Buttons @mixin button($t) { // // Button drawing function // //@extend %reset_style; text-shadow: 0 1px transparentize($base_color, 1); @if $t==normal { // // normal button // color: $fg_color; background-color: $button_bg; border: 1px solid $button_border; box-shadow: inset 0 1px transparentize($button_bg, 0.95); } @else if $t==focus { // // focused button // color: $fg_color; background-color: $button_bg; border: 1px solid $selected_bg_color; box-shadow: inset 0 1px transparentize($button_bg, 0.95); } @else if $t==focus-hover { // // focused button // color: $fg_color; background-color: $button_bg; border: 1px solid $selected_bg_color; box-shadow: inset 0 1px transparentize($button_bg, 0.95); } @else if $t==hover { // // hovered button // color: $fg_color; background-color: lighten($button_bg, 5%); border: 1px solid $button_border; box-shadow: inset 0 1px transparentize(lighten($button_bg, 5%), 0.95); } @else if $t==active { // // pushed button // color: $selected_fg_color; background-color: $selected_bg_color; border: 1px solid if($variant=='light', $selected_bg_color, $button_border); box-shadow: inset 0 1px transparentize($selected_bg_color, 0.95); } @else if $t==insensitive { // // insensitive button // color: $insensitive_fg_color; border: 1px solid transparentize($button_border, 0.45); background-color: transparentize($button_bg, 0.45); box-shadow: inset 0 1px transparentize($button_bg, 0.95); } @else if $t==osd { // // normal osd button // color: $osd_fg_color; border: 1px solid $osd_button_border; background-color: $osd_button_bg; box-shadow: inset 0 1px transparentize(black, 0.95); } @else if $t==osd-hover { // // active osd button // color: $osd_fg_color; border: 1px solid $osd_button_border; background-color: opacify(lighten($osd_button_bg, 7%), 0.1); box-shadow: inset 0 1px transparentize(black, 0.95); } @else if $t==osd-active { // // active osd button // color: $selected_fg_color; border: 1px solid $osd_button_border; background-color: $selected_bg_color; box-shadow: inset 0 1px transparentize($selected_bg_color, 0.95); } @else if $t==osd-insensitive { // // insensitive osd button // color: $osd_insensitive_fg_color; border: 1px solid $osd_button_border; background-color: transparentize($osd_button_bg, 0.15); box-shadow: inset 0 1px transparentize(black, 0.95); } } ================================================ FILE: common/gnome-shell/3.26/sass/gnome-shell-dark.scss ================================================ $variant: 'dark'; $transparency: 'true'; $darker: 'false'; @import "_colors"; //use gtk colors @import "_drawing"; @import "_common"; ================================================ FILE: common/gnome-shell/3.26/sass/gnome-shell.scss ================================================ $variant: 'light'; $transparency: 'true'; $darker: 'false'; @import "_colors"; //use gtk colors @import "_drawing"; @import "_common"; ================================================ FILE: common/gnome-shell/3.30/sass/_colors.scss ================================================ // When color definition differs for dark and light variant, // it gets @if ed depending on $variant $base_color: if($variant =='light', #ffffff, #404552); $text_color: if($variant == 'light', #5c616c, #D3DAE3); $bg_color: if($variant =='light', #F5F6F7, #383C4A); $fg_color: if($variant =='light', #5c616c, #D3DAE3); $selected_fg_color: #ffffff; $selected_bg_color: #5294e2; $selected_borders_color: darken($selected_bg_color, 20%); $borders_color: if($variant =='light', darken($bg_color,9%), darken($bg_color,6%)); $link_color: if($variant == 'light', darken($selected_bg_color,10%), lighten($selected_bg_color,20%)); $link_visited_color: if($variant == 'light', darken($selected_bg_color,20%), lighten($selected_bg_color,10%)); $selection_mode_bg: if($transparency == 'true', transparentize($selected_bg_color, 0.05), $selected_bg_color); $selection_mode_fg: $selected_fg_color; $warning_color: #F27835; $error_color: #FC4138; $warning_fg_color: white; $error_fg_color: white; $success_color: #73d216; $destructive_color: #F04A50; $suggested_color: #4DADD4; $destructive_fg_color: white; $suggested_fg_color: white; $drop_target_color: #F08437; //insensitive state derived colors $insensitive_fg_color: if($variant == 'light', transparentize($fg_color, 0.45), transparentize($fg_color, 0.55)); $insensitive_bg_color: if($variant == 'light', mix($bg_color, $base_color, 40%), lighten($bg_color, 2%)); $header_bg: red; @if $transparency=='true' and $variant=='light' { $header_bg: transparentize(#e7e8eb, 0.05); } @if $transparency=='false' and $variant=='light' { $header_bg: #e7e8eb; } @if $transparency=='true' and ($variant=='dark' or $darker=='true') { $header_bg: transparentize(#2f343f, 0.03); } @if $transparency=='false' and ($variant=='dark' or $darker=='true') { $header_bg: #2f343f; } $header_bg_backdrop: if($darker == 'true' or $variant == 'dark', lighten($header_bg, 1.5%), lighten($header_bg, 3%)); $header_border: if($variant == 'light' and $darker=='false', darken($header_bg, 7%), darken($header_bg, 4%)); $header_fg: if($variant == 'light', saturate(transparentize($fg_color, 0.2), 10%), saturate(transparentize($fg_color, 0.2), 10%)); $header_fg: if($darker == 'true', saturate(transparentize(#D3DAE3, 0.2), 10%), $header_fg); $dark_sidebar_bg: if($transparency == 'true', transparentize(#353945, 0.05), #353945); $dark_sidebar_fg: #BAC3CF; $dark_sidebar_border: if($variant == 'light', $dark_sidebar_bg, darken($dark_sidebar_bg, 5%)); $osd_fg_color: $dark_sidebar_fg; $osd_bg_color: $dark_sidebar_bg; $osd_button_bg: transparentize(lighten($osd_bg_color, 22%), 0.6); $osd_button_border: transparentize(darken($osd_bg_color, 12%), 0.6); $osd_entry_bg: transparentize(lighten($osd_bg_color, 22%), 0.6); $osd_entry_border: transparentize(darken($osd_bg_color, 12%), 0.6); $osd_insensitive_bg_color: darken($osd_bg_color, 3%); $osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 30%); $osd_borders_color: transparentize(black, 0.3); $panel_bg: darken($dark_sidebar_bg, 4.7%); $panel_fg: $dark_sidebar_fg; $entry_bg: if($variant=='light', $base_color, lighten($base_color, 0%)); $entry_border: if($variant == 'light', #cfd6e6, darken($borders_color, 0%)); $header_entry_bg: if($darker == 'true' or $variant == 'dark', transparentize(lighten($header_bg, 22%), 0.6), transparentize($base_color, 0.1)); $header_entry_border: if($darker == 'true' or $variant == 'dark', transparentize(darken($header_bg, 12%), 0.6), transparentize($header_fg, 0.7)); $button_bg: if($variant == 'light', lighten($bg_color, 2%), lighten($base_color, 2%)); $button_border: $entry_border; $header_button_bg: if($darker == 'true' or $variant == 'dark', transparentize(lighten($header_bg, 22%), 0.6), transparentize($button_bg, 0.1)); $header_button_border: if($darker == 'true' or $variant == 'dark', transparentize(darken($header_bg, 12%), 0.6), transparentize($header_fg, 0.7)); //WM Buttons // Close $wm_button_close_bg: if($variant == 'light' and $darker == 'false', #f46067, #cc575d); $wm_button_close_hover_bg: if($variant == 'light' and $darker == 'false', #f68086, #d7787d); $wm_button_close_active_bg: if($variant == 'light' and $darker == 'false', #f13039, #be3841); $wm_icon_close_bg: if($variant == 'light' and $darker == 'false',#F8F8F9 , #2f343f); // Minimize, Maximize $wm_button_hover_bg: if($variant == 'light' and $darker == 'false', #fdfdfd, #454C5C); $wm_button_active_bg: $selected_bg_color; $wm_button_hover_border: if($variant == 'light' and $darker == 'false', #D1D3DA, #262932); $wm_icon_bg: if($variant == 'light' and $darker == 'false', #90949E, #90939B); $wm_icon_unfocused_bg: if($variant == 'light' and $darker == 'false', #B6B8C0, #666A74); $wm_icon_hover_bg: if($variant == 'light' and $darker == 'false', #7A7F8B, #C4C7CC); $wm_icon_active_bg: $selected_fg_color; // Modal dialog colors $modal_bg_color: if($variant =='light', #f5f6f7, #323644); $modal_borders_color: $borders_color; // Panel button dropdown menu colors $panelmenu_bg_color: if($variant =='light', #ffffff, #383C4A); $panelmenu_borders_color: $borders_color; // OSD popup colors $popup_bg_color: transparentize(#252A36, 0.05); $popup_borders_color: transparentize(#0F1016, 0.3); // Switcher colors $switcher_bg_color: transparentize(#363945, 0.05); $switcher_borders_color: transparentize(#161A26, 0.3); ================================================ FILE: common/gnome-shell/3.30/sass/_common.scss ================================================ //This is the RIGHT PLACE to edit the stylesheet $panel-corner-radius: 0px; $asset_path: if($variant == 'dark', dark-assets, light-assets); /* Copyright 2009, 2015 Red Hat, Inc. * * Portions adapted from Mx's data/style/default.css * Copyright 2009 Intel Corporation * * This program is free software; you can redistribute it and/or modify it * under the terms and conditions of the GNU Lesser General Public License, * version 2.1, as published by the Free Software Foundation. * * This program is distributed in the hope it will be useful, but WITHOUT ANY * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for * more details. * * You should have received a copy of the GNU Lesser General Public License * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA. */ // // Globals // $font-size: 10; $font-family: Futura Bk bt, Cantarell, Sans-Serif; $_bubble_bg_color: opacify($osd_bg_color,0.25); $_bubble_fg_color: $osd_fg_color; $_bubble_borders_color: transparentize($osd_fg_color,0.8); $_shell_fg_color: white; stage { font-family: $font-family; @include fontsize($font-size); color: $fg_color; } %reset_style { background-color: transparent !important; background-gradient-direction: none !important; border: none !important; border-radius: 0 !important; } // // Buttons // .button { min-height: 20px; padding: 5px 32px; transition-duration: 0; border-radius: 2px; @extend %button; } %button { @include button(normal); &:focus { @include button(focus); } &:hover { @include button(hover); } &:hover:focus { @include button(focus-hover); } &:active, &:active:focus { @include button(active); } &:insensitive { @include button(insensitive); } } %osd_button { @include button(osd); &:hover { @include button(osd-hover); } &:focus { color: $selected_bg_color; } &:active { @include button(osd-active); } &:insensitive { @include button(osd-insensitive); } } // // Entries // StEntry { padding: 7px; caret-size: 1px; caret-color: $fg_color; selection-background-color: $selected_bg_color; selected-color: $selected_fg_color; transition-duration: 300ms; border-radius: 3px; @include entry(normal); &:focus, &:hover { @include entry(focus); } &:insensitive { @include entry(insensitive); } StIcon.capslock-warning { icon-size: 16px; warning-color: $warning_color; padding: 0 4px; } } // // Scrollbars // StScrollView { &.vfade { -st-vfade-offset: 0px; } &.hfade { -st-hfade-offset: 0px; } } StScrollBar { padding: 8px; StScrollView & { min-width: 5px; min-height: 5px; } StBin#trough { background-color: transparentize($base_color, 0.9); border-radius: 8px; } StButton#vhandle, StButton#hhandle { border-radius: 4px; background-color: mix($fg_color, $bg_color, 40%); border: 0px; margin: 0px; &:hover { background-color: mix($fg_color, $bg_color, 30%); } &:active { background-color: $selected_bg_color; } } } // // Slider // .slider { -barlevel-height: 4px; -barlevel-background-color: $button_border; //background of the trough -barlevel-border-color: transparentize(black, 1); //trough border color -barlevel-active-background-color: $selected_bg_color; //active trough fill -barlevel-active-border-color: transparentize(black, 1); //active trough border -barlevel-overdrive-color: $destructive_color; -barlevel-overdrive-border-color: transparentize(black, 1); -barlevel-overdrive-separator-width: 1px; -barlevel-border-width: 0; -slider-handle-radius: 0px; height: 18px; border: 0 solid transparent; border-right-width: 1px; border-left-width: 5px; color: transparent; .popup-menu-item.selected & { -barlevel-background-color: transparentize(black, 0.8); -barlevel-active-background-color: $selected_fg_color; } } // // Check Boxes // .check-box { StBoxLayout { spacing: .8em; } StBin { width: 16px; height: 16px; background-image: url("#{$asset_path}/checkbox/checkbox-unchecked.svg"); } &:focus StBin { background-image: url("#{$asset_path}/checkbox/checkbox-unchecked-focused.svg"); } &:checked StBin { background-image: url("#{$asset_path}/checkbox/checkbox-checked.svg"); } &:focus:checked StBin { background-image: url("#{$asset_path}/checkbox/checkbox-checked-focused.svg"); } } // // Switches // .toggle-switch { width: 50px; height: 20px; background-size: contain; background-image: url("#{$asset_path}/switch/switch-off.svg"); &:checked { background-image: url("#{$asset_path}/switch/switch-on.svg"); } .popup-menu-item.selected & { background-image: url("common-assets/switch/switch-off-selected.svg"); &:checked { background-image: url("common-assets/switch/switch-on-selected.svg"); } } } // // Links // .shell-link { color: $link_color; &:hover { color: lighten($link_color,10%); } } // // Modal Dialogs // .headline { @include fontsize($font-size * 1.1); } .lightbox { background-color: black; } .flashspot { background-color: white; } .modal-dialog { border-radius: 3px; color: $fg_color; background-color: $modal_bg_color; border: 1px solid $modal_borders_color; box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2); .modal-dialog-content-box { padding: 20px 10px 10px 10px; } &-linked-button { height: if($variant=='light', 39px, 38px); padding: 0; box-shadow: inset 0 0 black; border-top-width: if($variant=='light', 0px, 1px); border-right-width: 1px; border-bottom-width: 0; color: $osd_fg_color; background-color: $osd_bg_color; border-color: if($variant=='light', darken($osd_bg_color, 5%), darken($osd_bg_color, 8%)); &:hover { background-color: lighten($osd_bg_color, 5%); } &:focus { color: $selected_bg_color; } &:active { color: $selected_fg_color; background-color: $selected_bg_color; } &:insensitive { color: transparentize($osd_fg_color, 0.5); background-color: darken($osd_bg_color, 2%); } &:first-child { border-radius: 0px 0px 0px 2px; } &:last-child { border-right-width: 0px; border-radius: 0px 0px 2px 0px; } &:first-child:last-child { border-right-width: 0px; border-radius: 0px 0px 2px 2px; } } .run-dialog-entry { width: 21em; margin-bottom: 6px; } .run-dialog-error-box { padding-top: 5px; spacing: 5px; } .run-dialog-button-box { padding-top: 1em; } //.run-dialog-button-box { padding-top: 1em; } .run-dialog-label { font-size: 0; } } .mount-dialog-subject, .end-session-dialog-subject { //this should be a generic header class @include fontsize($font-size * 1.2); font-weight: bold; color: $fg_color; } // // Message Dialog // .message-dialog { &-main-layout { padding: 12px 20px 0; spacing: 12px; } &-content { max-width: 28em; spacing: 20px; } &-icon { min-width: 48px; icon-size: 48px; } &-title { font-weight: bold; } &-subtitle { color: $fg_color; font-weight: bold; } } // // End Session Dialog // .end-session-dialog { spacing: 42px; //border: 3px solid $_bubble_borders_color; &-list { padding-top: 20px; } &-layout { padding-left: 17px; &:rtl { padding-right: 17px; } } &-description { width: 28em; padding-bottom: 10px; &:rtl { text-align: right; } } &-warning { width: 28em; color: $warning_color; padding-top: 6px; &:rtl { text-align: right; } } &-logout-icon { border: 0px solid transparent; border-radius: 99px; width: 48px; height: 48px; background-size: contain; } &-shutdown-icon { color: $fg_color; width: 48px; height: 48px; } &-inhibitor-layout { spacing: 16px; max-height: 200px; padding-right: 10px; padding-left: 10px; } &-session-list, &-app-list { spacing: 1em; } &-list-header { font-weight: bold; &:rtl { text-align: right; } } &-app-list-item, &-session-list-item { spacing: 1em; } &-app-list-item-name, &-session-list-item-name { font-weight: bold; } &-app-list-item-description { color: lighten($fg_color,5%); @include fontsize($font-size * 0.9); } .modal-dialog-linked-button:last-child { color: $destructive_fg_color; background-color: $destructive_color; &:hover { color: $destructive_fg_color; background-color: lighten($destructive_color, 9%); } &:active { color: $destructive_fg_color; background-color: darken($destructive_color, 5%); } } } // // ShellMountOperation Dialogs // .shell-mount-operation-icon { icon-size: 48px; } .mount-dialog { spacing: 24px; .message-dialog-title { padding-top: 10px; padding-left: 17px; padding-bottom: 6px; max-width: 34em; &:rtl { padding-left: 0px; padding-right: 17px; } } .message-dialog-body { padding-left: 17px; width: 28em; &:rtl { padding-left: 0px; padding-right: 17px; } } } .mount-dialog-app-list { @include fontsize($font-size * 1.1); max-height: 200px; padding-top: 24px; padding-left: 49px; padding-right: 32px; &:rtl { padding-right: 49px; padding-left: 32px; } } .mount-dialog-app-list-item { color: darken($fg_color,10%); &:hover { color: $fg_color; } &:ltr { padding-right: 1em; } &:rtl { padding-left: 1em; } } .mount-dialog-app-list-item-icon { &:ltr { padding-right: 17px; } &:rtl { padding-left: 17px; } } .mount-dialog-app-list-item-name { @include fontsize($font-size * 1.1); } // // Password or Authentication Dialog // .prompt-dialog { //this is the width of the entire modal popup width: 34em; //border: 3px solid $_bubble_borders_color; .message-dialog-main-layout { spacing: 24px; padding: 10px; } .message-dialog-content { spacing: 16px; } .message-dialog-title { @include fontsize($font-size * 1.3); font-weight: bold; color: $fg_color; } &-description:rtl { text-align: right; } &-password-box { spacing: 1em; padding-bottom: 1em; } &-error-label { @include fontsize($font-size); color: $error_color; padding-bottom: 8px; } &-info-label { @include fontsize($font-size); padding-bottom: 8px; } &-null-label { @include fontsize($font-size); padding-bottom: 8px; } } .hidden { color: transparentize(black, 1); } // // Polkit Dialog // .polkit-dialog-user { &-layout { padding-left: 10px; spacing: 10px; &:rtl { padding-left: 0px; padding-right: 10px; } } &-root-label { color: $warning_color; } &-icon { border-radius: 99px; background-size: contain; width: 48px; height: 48px; } } // // Audio selection dialog // .audio-device-selection-dialog { spacing: 30px; } .audio-selection { &-content { spacing: 20px; padding: 24px; } &-title { font-weight: bold; text-align: center; } &-box { spacing: 20px; } &-device { border: 1px solid $borders_color; border-radius: 3px; &:active,&:hover,&:focus { background-color: $selected_bg_color; border-color: $selected_bg_color; } } &-device-box { padding: 20px; spacing: 20px; } &-device-icon { icon-size: 64px; } } // // Access Dialog // .access-dialog { spacing: 30px; } // // Geolocation Dialog // .geolocation-dialog { spacing: 30px; } // // Extension Dialog // .extension-dialog { .message-dialog-main-layout { spacing: 24px; padding: 10px; } .message-dialog-title { color: $fg_color; } } // // Inhibit Shortcuts Dialog // .inhibit-shortcuts-dialog { spacing: 30px; } // // Network Agent Dialog // .network-dialog-secret-table { spacing-rows: 15px; spacing-columns: 1em; } .keyring-dialog-control-table { spacing-rows: 15px; spacing-columns: 1em; } // // Popvers/Menus // .popup-menu { min-width: 15em; color: $fg_color; border-radius: 3px; .popup-menu-arrow { } //defined globally in the TOP BAR .popup-sub-menu { padding-bottom: 1px; background: if($variant=='light', rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.15)); box-shadow: inset 0 -1px if($variant=='light', rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.15)); margin: 0; .popup-menu-item.selected { background-color: $selected_bg_color; border-image: none; margin: 0; } } .popup-menu-content { padding: 1em 0em 1em 0em; } .popup-menu-item { spacing: 12px; &:ltr { padding: .4em 2em .4em 0em; } &:rtl { padding: .4em 0em .4em 2em; } &:checked { font-weight: normal; background: if($variant=='light', rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.15)); box-shadow: inset 0 1px if($variant=='light', rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.15)); } &:active, &.selected { color: $selected_fg_color; background-color: $selected_bg_color; box-shadow: none; } &:insensitive { color: transparentize($fg_color, 0.5); background: none; } } .popup-inactive-menu-item { //all icons and other graphical elements color: $fg_color; &:insensitive { color: $insensitive_fg_color; } } //.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is &.panel-menu { -boxpointer-gap: 0px; margin-bottom: 1.75em; } } .popup-menu-ornament { text-align: right; margin-left: 10px; width: 16px; } .popup-menu-boxpointer { -arrow-border-radius: 3px; -arrow-background-color: transparent; -arrow-border-width: 0; -arrow-border-color: transparent; -arrow-base: 26px; -arrow-rise: 0; .popup-menu-content { margin: 5px; border-radius: 3px; border: 1px solid $panelmenu_borders_color; background-color: $panelmenu_bg_color; box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2); } } .candidate-popup-boxpointer { -arrow-border-radius: 2px; -arrow-background-color: $osd_bg_color; -arrow-border-width: 1px; -arrow-border-color: transparentize(black, 0.6); -arrow-base: 5; -arrow-rise: 5; } .popup-separator-menu-item { //-margin-horizontal: 24px; height: 2px; //not really the whole box margin: 0; background-color: transparent; border: none; border-image: url("common-assets/menu/menu-separator.svg") 1 1 1 1; } // Background menu .background-menu { -boxpointer-gap: 4px; -arrow-rise: 0px; } // fallback menu //- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled // app menu inside the main app window itself rather than the top bar // // // OSD // .osd-window { text-align: center; font-weight: bold; spacing: 1em; padding: 20px; margin: 32px; min-width: 64px; min-height: 64px; color: $_shell_fg_color; background: $popup_bg_color; border: 1px solid $popup_borders_color; border-radius: 5px; box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2); .osd-monitor-label { @include fontsize($font-size * 3); } .level { padding: 0; height: 4px; -barlevel-height: 4px; -barlevel-background-color: transparentize(black, 0.5); -barlevel-active-background-color: $selected_bg_color; -barlevel-overdrive-color: $destructive_color; -barlevel-overdrive-separator-width: 1px; } } .resize-popup { color: $osd_fg_color; background: $popup_bg_color; border: 1px solid $popup_borders_color; border-radius: 5px; box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2); padding: 12px; } // // Pad OSD // .pad-osd-window { padding: 32px; background-color: $popup_bg_color; border: 1px solid $popup_borders_color; .pad-osd-title-box { spacing: 12px; } .pad-osd-title-menu-box { spacing: 6px; } } .combo-box-label { width: 15em; } // // Alt Tab Switcher // .switcher-popup { padding: 8px; spacing: 16px; } .switcher-list { background: $switcher_bg_color; border: 1px solid $switcher_borders_color; border-radius: 3px; box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2); padding: 20px; &-item-container { spacing: 8px; } .item-box { padding: 8px; border-radius: 2px; border: 1px solid transparent; &:outlined { padding: 8px; border: 1px solid $selected_bg_color; } &:selected { color: $selected_fg_color; background-color: $selected_bg_color; border: 1px solid $selected_bg_color; } } .thumbnail-box { padding: 2px; spacing: 4px; } .thumbnail { width: 256px; } .separator { width: 1px; background: transparentize($fg_color, 0.67); } } .switcher-arrow { border-color: rgba(0,0,0,0); color: $osd_fg_color; &:highlighted { color: $_shell_fg_color; } } .input-source-switcher-symbol { @include fontsize($font-size * 4); width: 96px; height: 96px; } // //Window Cycler // .cycler-highlight { border: 5px solid $selected_bg_color; } // // Workspace Switcher // .workspace-switcher { background: transparent; border: 0px; border-radius: 0px; padding: 0px; spacing: 8px; &-group { padding: 12px; } &-container { background-color: $switcher_bg_color; border: 1px solid $switcher_borders_color; border-radius: 3px; box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2); padding: 20px; padding-bottom: 24px; } } .ws-switcher-active-up, .ws-switcher-active-down { height: 30px; background-color: $selected_bg_color; background-size: 96px; border-radius: 2px; border: 1px solid $selected_bg_color; } .ws-switcher-active-up { background-image: url("common-assets/misc/ws-switch-arrow-up.png"); } .ws-switcher-active-down { background-image: url("common-assets/misc/ws-switch-arrow-down.png"); } .ws-switcher-box { height: 96px; background-color: transparentize(black, 0.67); border: 1px solid transparentize(black, 0.67); border-radius: 2px; } // // Tiled window previews // .tile-preview { background-color: transparentize($selected_bg_color, 0.65); border: 1px solid $selected_bg_color; &-left.on-primary { border-radius: $panel-corner-radius 0 0 0; } &-right.on-primary { border-radius: 0 $panel-corner-radius 0 0; } &-left.tile-preview-right.on-primary { border-radius: $panel-corner-radius $panel-corner-radius 0 0; } } // // Top Bar // #panel { $_panel_fg_color: $_shell_fg_color; font-weight: bold; font-feature-settings: "tnum"; height: 2.1em; min-height: 27px; background-gradient-direction: none; background-color: transparent; border-bottom-width: 0; border-image: url('common-assets/panel/panel.svg') 1 1 1 1; // Fix dynamic top bar extension &.dynamic-top-bar-white-btn { border-image: none; } &.unlock-screen, &.login-screen, &.lock-screen { background-color: transparent; border-image: none; } &:overview { border-image: url('common-assets/panel/panel-overview.svg') 1 1 1 1; } #panelLeft, #panelCenter { // spacing between activities<>app menu and such spacing: 8px; } .panel-corner { -panel-corner-radius: $panel-corner-radius; -panel-corner-background-color: transparentize(black, 1); -panel-corner-border-width: 0px; -panel-corner-border-color: black; &:active, &:overview, &:focus { -panel-corner-border-color: black; } &.lock-screen, &.login-screen, &.unlock-screen { -panel-corner-radius: 0; -panel-corner-background-color: transparent; -panel-corner-border-color: transparent; } } .panel-button { -natural-hpadding: 10px; -minimum-hpadding: 6px; font-weight: bold; color: $_panel_fg_color; text-shadow: none; transition-duration: 100ms; border-bottom-width: 1px; border-color: transparent; .app-menu-icon { -st-icon-style: symbolic; width: 0; height: 0; margin-left: 0px; margin-right: 0px; } .system-status-icon, .app-menu-icon > StIcon, .popup-menu-arrow { icon-shadow: none; } &:hover { color: $_panel_fg_color; background-color: transparentize(black, 0.83); border-bottom-width: 1px; border-color: transparent; .system-status-icon, .app-menu-icon > StIcon, .popup-menu-arrow { icon-shadow: none; } } &:active, &:overview, &:focus, &:checked { color: $selected_fg_color; background-color: $selected_bg_color; box-shadow: none; border-bottom-width: 1px; border-color: black; & > .system-status-icon { icon-shadow: none; } } .system-status-icon { color: $selected_fg_color; icon-size: 16px; padding: 0 4px; } .unlock-screen &, .login-screen &, .lock-screen & { color: lighten($fg_color, 10%); &:focus, &:hover, &:active { color: lighten($fg_color, 10%); } } } .panel-button > *{ color: $selected_fg_color; } #panelActivities.panel-button { -natural-hpadding: 12px; } .panel-status-indicators-box, .panel-status-menu-box { spacing: 2px; color: $selected_fg_color; } // spacing between power icon and (optional) percentage label .power-status.panel-status-indicators-box { spacing: 0; } .screencast-indicator { color: $error_color; } .remote-access-indicator { color: $error_color; } .popup-menu-arrow { width: 0; } } // Activities button #panel #panelActivities.panel-button { > * { background-image: url("common-assets/panel/activities.svg"); background-position: center top; width: 24px; height: 24px; background-color: transparent !important; background-gradient-direction: none !important; border: 0 solid transparent !important; text-shadow: 0 0 transparent !important; transition-duration: 0ms !important; box-shadow: none !important; color: transparent; } &:active, &:overview, &:focus, &:checked { background-color: transparent; box-shadow: none; border-bottom-width: 1px; border-color: transparent; > * { background-image: url("common-assets/panel/activities-active.svg"); } } } // a little unstructured mess: .system-switch-user-submenu-icon { icon-size: 20px; padding: 0 2px; } .system-switch-user-submenu-icon.default-icon { icon-size: 16px; padding: 0 4px; } #appMenu { spinner-image: url("common-assets/misc/process-working.svg"); spacing: 4px; padding: 0 8px; .label-shadow { color: transparent; } } .aggregate-menu { min-width: 23.5em; .popup-menu-icon { padding: 0 4px; } .popup-sub-menu .popup-menu-item > :first-child { &:ltr { padding-left: 20px; margin-left: 26px; } &:rtl { padding-right: 20px; margin-right: 26px; } } } .system-menu-action { -st-icon-style: symbolic; padding: 13px; color: $fg_color; border-radius: 32px; /* wish we could do 50% */ border: 1px solid transparent; &:hover, &:focus { transition-duration: 100ms; padding: 13px; color: $fg_color; background-color: transparent; border: 1px solid $selected_bg_color; } &:active { color: $selected_fg_color; background-color: $selected_bg_color; border: 1px solid $selected_bg_color; } & > StIcon { icon-size: 16px; } } // // Calendar popover // #calendarArea { padding: 0.75em 1.0em; } .calendar { margin-bottom: 1em; } .calendar, .datemenu-today-button, .datemenu-displays-box, .message-list-sections { margin: 0 0.4em; } .datemenu-calendar-column { spacing: 0.5em; border: none; } .datemenu-displays-section { padding-bottom: 3em; } .datemenu-today-button, .world-clocks-button, .weather-button, .events-section-title { border-radius: 3px; padding: .4em; } .message-list-section-list:ltr { padding-left: .4em; } .message-list-section-list:rtl { padding-right: .4em; } .datemenu-today-button, .world-clocks-button, .weather-button, .events-section-title { padding: 7px 10px 7px 10px; border: 1px solid transparentize($base_color, 1); &:hover, &:focus { @include button(hover); } &:active { @include button(active); } } .datemenu-today-button .day-label { } .datemenu-today-button .date-label { @include fontsize($font-size * 1.5); } .world-clocks-header, .weather-header, .events-section-title { color: transparentize($fg_color, 0.6); font-weight: bold; } .world-clocks-button:active .world-clocks-header, .weather-button:active .weather-header { color: transparentize($fg_color, 0.4); } .world-clocks-grid { spacing-rows: 0.4em; } .weather-box { spacing: 0.4em; } .calendar-month-label { color: $fg_color; font-weight: bold; padding: 8px 0; &:focus {} } .pager-button { color: transparent; background-color: transparent; width: 32px; border-radius: 2px; &:focus, &:hover, &:active { background-color: transparent; } } //arrow back .calendar-change-month-back { background-image: url("#{$asset_path}/misc/calendar-arrow-left.svg"); &:focus, &:hover { background-image: url("#{$asset_path}/misc/calendar-arrow-left-hover.svg"); } &:active { background-image: url("#{$asset_path}/misc/calendar-arrow-left.svg"); } &:rtl { background-image: url("#{$asset_path}/misc/calendar-arrow-right.svg"); &:focus, &:hover { background-image: url("#{$asset_path}/misc/calendar-arrow-right-hover.svg"); } &:active { background-image: url("#{$asset_path}/misc/calendar-arrow-right.svg"); } } } //arrow forward .calendar-change-month-forward { background-image: url("#{$asset_path}/misc/calendar-arrow-right.svg"); &:focus, &:hover { background-image: url("#{$asset_path}/misc/calendar-arrow-right-hover.svg"); } &:active { background-image: url("#{$asset_path}/misc/calendar-arrow-right.svg"); } &:rtl { background-image: url("#{$asset_path}/misc/calendar-arrow-left.svg"); &:focus, &:hover { background-image: url("#{$asset_path}/misc/calendar-arrow-left-hover.svg"); } &:active { background-image: url("#{$asset_path}/misc/calendar-arrow-left.svg"); } } } .calendar-day-base { @include fontsize($font-size * 0.875); text-align: center; width: 25px; height: 25px; padding: 0.1em; margin: 2px; border-radius: 12.5px; font-feature-settings: "tnum"; &:hover, &:focus { background-color: transparentize(black, 0.9); } &:active, &:selected { color: $fg_color; background-color: transparentize(black, 0.85); border-width: 0; //avoid jumparound due to today } &.calendar-day-heading { //day of week heading color: transparentize($fg_color, 0.15); margin-top: 1em; @include fontsize($font-size * 0.75); } } .calendar-day { //border collapse hack - see calendar.js border-width: 0; color: transparentize($fg_color, 0.2); } .calendar-day-top { border-top-width: 0; } .calendar-day-left { border-left-width: 0; } .calendar-work-day {} .calendar-nonwork-day { color: $fg_color; font-weight: bold; } .calendar-today, .calendar-today:active, .calendar-today:selected, .calendar-today:focus, .calendar-today:hover { font-weight: bold; color: $selected_fg_color; background-color: $selected_bg_color; border-width: 0; } .calendar-day-with-events { font-weight: bold; background-image: url("common-assets/misc/calendar-today.svg"); } .calendar-today.calendar-day-with-events { color: $selected_fg_color; } .calendar-other-month-day { color: transparentize($fg_color, 0.7); opacity: 1; } .calendar-week-number { @include fontsize($font-size * 0.75); font-weight: bold; width: 2.0em; height: 1.5em; border-radius: 2px; padding: 0.4em 0 0; margin: 2px 6px; background-color: transparentize($fg_color,0.7); color: $bg_color; &:focus { background-color: transparentize($fg_color,0.6); } } // // Message list // .message-list { width: 31.5em; &-sections { spacing: 1.5em; } &-section, &-section-list { spacing: 0.7em; } &-placeholder { StIcon { width: 0; height: 0; } StLabel { color: $insensitive_fg_color; } } &-clear-button.button { margin: 1.5em 1.5em 0; padding: 4px 12px; } } .message { padding: 0; color: $fg_color; background-color: if($variant=='light', rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.15)); border: 1px solid if($variant=='light', rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.30)); border-radius: 3px; &:hover, &:focus { color: $fg_color; border-color: $selected_bg_color; } &:active { color: $selected_fg_color; background-color: $selected_bg_color; border-color: $selected_bg_color; } &-icon-bin { padding: 12px 0px 12px 12px; border-image: url("common-assets/misc/message-icon.svg") 9 9 9 9; &:rtl { padding: 12px 12px 12px 0px; } > StIcon { //icon-size: 32px; color: inherit; icon-size: 1.09em; -st-icon-style: symbolic; } } &-secondary-bin { padding: 0 0.82em; } &-secondary-bin > .event-time { padding-bottom: 0.13em; } &-secondary-bin, &-secondary-bin > .event-time { color: transparentize($fg_color, 0.4); @include fontsize($font-size * 0.9); &:ltr { padding-left: 8px; } &:rtl { padding-right: 8px; } } &:active .message-secondary-bin, &:active .message-secondary-bin > .event-time { color: transparentize($selected_fg_color, 0.4); } &-secondary-bin > StIcon { icon-size: 16px; } &-title { color: inherit; font-weight: bold; @include fontsize($font-size); padding: 2px 0 2px 0; } &-content { color: inherit; padding: 8px; @include fontsize($font-size); } } .message-media-control { padding: 6px; color: $fg_color; &:last-child:ltr { padding-right: 18px; } &:last-child:rtl { padding-left: 18px; } &:hover { color: transparentize($fg_color, 0.3); } &:active { color: $selected_bg_color; } &:insensitive { color: $insensitive_fg_color; } } .message:active .message-media-control { color: $selected_fg_color; } .media-message-cover-icon { icon-size: 32px !important; &.fallback { color: $insensitive_fg_color; background-color: $bg_color; border-radius: 2px; icon-size: 16px !important; padding: 8px; border: 1px solid $borders_color; } } // //Activities Ripples // .ripple-box { width: 52px; height: 52px; background-image: url("common-assets/misc/corner-ripple-ltr.svg"); background-size: contain; &:rtl { background-image: url("common-assets/misc/corner-ripple-rtl.svg"); } } // not really top bar only .popup-menu-arrow { width: 16px; height: 16px; } .popup-menu-icon { icon-size: 16px; } // //Close buttons // .window-close { background-image: url("common-assets/misc/close.svg"); background-size: 26px; height: 26px; width: 26px; border: 0px; box-shadow: none; background-color: transparent; color: transparent; -shell-close-overlap: 12px; &:hover { background-image: url("common-assets/misc/close-hover.svg"); } &:active { background-image: url("common-assets/misc/close-active.svg"); } } // // Network Dialogs // .nm-dialog { max-height: 34em; min-height: 31em; min-width: 32em; &-content { spacing: 20px; padding: 10px; } &-header-hbox { spacing: 10px; } &-airplane-box { spacing: 12px; } &-airplane-headline { @include fontsize($font-size * 1.1); font-weight: bold; text-align: center; } &-airplane-text { color: $fg_color; } &-header-icon { icon-size: 32px; } &-scroll-view { border: 1px solid $borders_color; border-radius: 2px; background-color: $base_color; } &-header { font-weight: bold; @include fontsize($font-size * 1.2); } &-item { @include fontsize($font-size); border-bottom: 0px solid; padding: 12px; spacing: 0px; &:selected { background-color: $selected_bg_color; color: $selected_fg_color; } } &-icons { spacing: .5em; } &-icon { icon-size: 16px; } } .no-networks-label { color: $insensitive_fg_color; } .no-networks-box { spacing: 12px; } // // Overview // #overview { spacing: 24px; } .overview-controls { padding-bottom: 32px; } .window-picker { //container around window thumbnails -horizontal-spacing: 32px; -vertical-spacing: 32px; padding-left: 32px; padding-right: 32px; padding-bottom: 48px; &.external-monitor { padding: 32px; } } .window-clone-border { border: 3px solid transparentize($selected_bg_color, 0.2); border-radius: 4px; box-shadow: inset 0px 0px 0px 1px transparentize($selected_bg_color, 1); } .window-caption, .window-caption:hover { spacing: 25px; color: $selected_fg_color; background-color: $selected_bg_color; border-radius: 2px; padding: 4px 12px; } // // Search Entry // .search-entry { width: 320px; padding: 7px 9px; border-radius: 20px; border: 1px solid transparentize(black, 0.75); background-color: transparentize($entry_bg, 0.1); &:focus { padding: 7px 9px; } .search-entry-icon { icon-size: 16px; padding: 0 4px; color: $fg_color; } &:hover, &:focus { color: $selected_fg_color; caret-color: $selected_fg_color; background-color: $selected_bg_color; selection-background-color: $selected_fg_color; selected-color: $selected_bg_color; .search-entry-icon { color: $selected_fg_color; } } } // // Search Results // #searchResultsBin { max-width: 1000px; } #searchResultsContent { padding-left: 20px; padding-right: 20px; spacing: 16px; } // This should be equal to #searchResultsContent spacing .search-section { spacing: 16px; } // This is the space between the provider icon and the results container .search-section-content { spacing: 32px; } // "no results" .search-statustext { @extend %status_text; } .list-search-results { spacing: 3px; } .search-section-separator { background-color: transparentize(white, 0.8); height: 1px; .search-section:last-child & { background-color: transparent; } } .list-search-result-content { spacing: 30px; padding: 1px; } .list-search-result-title { font-size: 1.5em; spacing: 12px; color: $_shell_fg_color; } .list-search-result-description { color: darken($_shell_fg_color, 20%); } .list-search-provider-details { width: 150px; color: darken($_shell_fg_color, 12%); margin-top: 0.24em; } .list-search-provider-content { spacing: 20px; } .search-provider-icon { padding: 15px; } // // Dash // .app-menu, .app-well-menu { max-width: 27.25em; } #dash { @include fontsize($font-size); color: $osd_fg_color; background-color: $dark_sidebar_bg; border: 1px solid rgba(0,0,0,0.4); border-left: 0px; padding: 4px 0; border-radius: 0 3px 3px 0; &:rtl { border-radius: 3px 0 0 3px; } .right &, &:rtl { border-left: 1px; border-right: 0px; padding: 4px 0; } .top &, .bottom & { padding: 0; } .placeholder { background-image: url("common-assets/dash/dash-placeholder.svg"); background-size: contain; height: 24px; } .empty-dash-drop-target { width: 24px; height: 24px; } } .dash-item-container > StWidget { &, &:rtl, .right & { padding: 4px 8px; } .top &, .bottom & { padding: 6px; } } //osd tooltip .dash-label { border-radius: 3px; padding: 4px 12px; color: $_shell_fg_color; background-color: transparentize(black, 0.3); text-align: center; -x-offset: 3px; .bottom &, .top & { -y-offset: 3px; -x-offset: 0; } } // Dash Buttons #dash .app-well-app { &:hover .overview-icon, .right &:hover .overview-icon, .bottom &:hover .overview-icon, .top &:hover .overview-icon { background-color: $selected_bg_color; } &:active .overview-icon, .right &:active .overview-icon, .bottom &:active .overview-icon, .top &:active .overview-icon { box-shadow: none; background-color: darken($selected_bg_color, 10%); } &-running-dot { width: 11px; height: 2px; margin-bottom: 2px; background-color: $selected_bg_color; } } #dashtodockContainer { .app-well-app-running-dot { background: none; width: 28px; height: 4px; } // Add missing 1px margin for finer .show-apps-icon alignment // via margin property instead to keep 1px smaller .show-apps-icon size // like standard #dash styling. Better than 1px transparent border. .show-apps .overview-icon { margin: 1px; } @each $var in 1, 2, 3, 4 { .running#{$var} .app-well-app-running-dot { background-image: url("common-assets/dash/running#{$var}.svg"); } } } .show-apps { .overview-icon { background-color: transparentize(black, 0.5); border-radius: 2px; padding: 6px; border: 0px; transition-duration: 0ms; text-align: center; } &:hover .overview-icon, &:focus .overview-icon, &:selected .overview-icon { background-color: transparentize(black, 0.3); color: $selected_bg_color; transition-duration: 0ms; border-image: none; background-image: none; } &:active .overview-icon, &:active .show-apps-icon, &:checked .overview-icon, &:checked .show-apps-icon { color: $selected_fg_color; background-color: $selected_bg_color; box-shadow: none; transition-duration: 0ms; } } // // App Vault/Grid // .icon-grid { spacing: 30px; -shell-grid-horizontal-item-size: 136px; -shell-grid-vertical-item-size: 136px; .overview-icon { icon-size: 96px; } } .system-action-icon { background-color: $selected_bg_color; color: $selected_fg_color; border-radius: 99px; icon-size: 48px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } //.app-display { spacing: 20px; } //favorties | all toggle container .app-view-controls { padding-bottom: 32px; } //favorties | all toggle button .app-view-control { padding: 4px 32px; @include button(osd); &:hover { @include button(osd-hover); } &:checked { color: $selected_fg_color; background-color: $selected_bg_color; } &:first-child:ltr, &:last-child:rtl { border-radius: 2px 0 0 2px; border-right-width: 0; } &:last-child:ltr, &:first-child:rtl { border-radius: 0 2px 2px 0; border-left-width: 0;} } // // Icon Tile // .search-provider-icon, .list-search-result { @extend %icon_tile; &:active, &:checked { background-color: transparentize(darken($osd_bg_color,10%),.1); } &:focus, &:selected, &:hover { background-color: transparentize($osd_fg_color,.6); transition-duration: 200ms; } } .app-well-app, .app-well-app.app-folder, .grid-search-result { .overview-icon { @extend %icon_tile; } &:active .overview-icon, &:checked .overview-icon { background-color: transparentize(darken($osd_bg_color,10%),.1); box-shadow: inset 0 0 $selected_bg_color; } &:hover .overview-icon, &:focus .overview-icon, &:selected .overview-icon { background-color: transparentize($osd_fg_color,.6); transition-duration: 0ms; border-image: none; background-image: none; } } .app-well-app-running-dot { //running apps indicator width: 20px; height: 2px; margin-bottom: 4px; background-color: $selected_bg_color; } %icon_tile { color: $_shell_fg_color; border-radius: 2px; padding: 6px; border: 1px solid transparent; transition-duration: 0ms; text-align: center; } // // Collections // .app-well-app.app-folder { > .overview-icon { background-color: darken($dark_sidebar_bg, 8%); border: 1px solid transparentize(darken($dark_sidebar_bg, 25%), 0.5); } &:hover > .overview-icon { background-color: lighten($dark_sidebar_bg, 3%); } &:active > .overview-icon, &:checked > .overview-icon { color: $selected_fg_color; background-color: $selected_bg_color; box-shadow: none; } &:focus > .overview-icon { background-color: lighten($dark_sidebar_bg, 3%); } } .app-folder-popup { //expanded collection -arrow-border-radius: 2px; -arrow-background-color: darken($dark_sidebar_bg, 8%); -arrow-border-color: transparentize(darken($dark_sidebar_bg, 25%), 0.5); -arrow-border-width: 1px; -arrow-base: 24px; -arrow-rise: 11px; } .app-folder-popup-bin { padding: 5px; } .app-folder-icon { padding: 5px; spacing-rows: 5px; spacing-columns: 5px; } .page-indicator { padding: 15px 20px; .page-indicator-icon { width: 18px; height: 18px; border: none; background-color: transparent; background-image: url(common-assets/misc/page-indicator-inactive.svg); } &:hover .page-indicator-icon { background-image: url(common-assets/misc/page-indicator-hover.svg); } &:active .page-indicator-icon { margin: 0; background-color: transparent; background-image: url(common-assets/misc/page-indicator-active.svg); } &:checked .page-indicator-icon, &:checked:active .page-indicator-icon { background-color: transparent; background-image: url(common-assets/misc/page-indicator-checked.svg); } } .no-frequent-applications-label { @extend %status_text; } .app-well-app > .overview-icon.overview-icon-with-label, .grid-search-result .overview-icon.overview-icon-with-label { padding: 10px 8px 5px 8px; spacing: 4px; } // // Workspace pager // .workspace-thumbnails, .workspace-thumbnails-left { &, &:rtl { visible-width: 40px; //amount visible before hover spacing: 11px; padding: 12px; } } .workspace-thumbnails, .workspace-thumbnails-left:rtl { padding-right: 7px; border-image: url("common-assets/dash/dash-right.svg") 9 9 9 9; } .workspace-thumbnails:rtl, .workspace-thumbnails-left { padding-left: 7px; border-image: url("common-assets/dash/dash-left.svg") 9 9 9 9; } .workspace-thumbnails .placeholder { background-image: url("common-assets/dash/dash-placeholder.svg"); background-size: contain; height: 24px; } .workspace-thumbnail-indicator { border: 4px solid transparentize($selected_bg_color, 0.2); border-radius: 1px; padding: 1px; } //Some hacks I don't even .search-display > StBoxLayout, .all-apps, .frequent-apps > StBoxLayout { // horizontal padding to make sure scrollbars or dash don't overlap content padding: 0px 88px 10px 88px; } %status_text { @include fontsize($font-size * 2); font-weight: bold; color: $fg_color; } // // Notifications & Message Tray // .url-highlighter { link-color: $link_color; } // Banners .notification-banner, .notification-banner:hover, .notification-banner:focus { @include fontsize($font-size); width: 34em; margin: 10px; padding: 6px 4px; color: $fg_color; background-color: $panelmenu_bg_color; border: 1px solid $panelmenu_borders_color; box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2); .notification-icon { padding: 5px; } .notification-content { padding: 5px; spacing: 5px; } .secondary-icon { icon-size: 1.09em; } .notification-actions { background-color: transparent; padding: 2px 2px 0 2px; spacing: 3px; } .notification-button { padding: 4px 4px 5px; @extend %button; &:first-child, &:last-child { border-radius: 2px; } } } .summary-source-counter { @include fontsize($font-size); font-weight: bold; height: 16px; width: 16px; -shell-counter-overlap-x: 3px; -shell-counter-overlap-y: 3px; background-color: $selected_bg_color; color: $selected_fg_color; border: 2px solid #eeeeec; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); border-radius: 9px; } .secondary-icon { icon-size: 1.09em; } // Chat Bubbles .chat-body { spacing: 5px; } .chat-response { margin: 5px; } .chat-log-message { color: $fg_color; } .chat-new-group { padding-top: 1em; } .chat-received { padding-left: 4px; &:rtl { padding-left: 0px; padding-right: 4px; } } .chat-sent { padding-left: 18pt; color: $selected_bg_color; &:rtl { padding-left: 0; padding-right: 18pt; } } .chat-meta-message { padding-left: 4px; @include fontsize($font-size); font-weight: bold; color: transparentize($fg_color, 0.4); &:rtl { padding-left: 0; padding-right: 4px; } } .subscription-message { font-style: italic; } // Hotplug .hotplug-transient-box { spacing: 6px; padding: 2px 72px 2px 12px; } .hotplug-notification-item { padding: 2px 10px; @extend %button; &:focus { padding: 2px 10px; } } .hotplug-notification-item-icon { icon-size: 24px; padding: 2px 5px; } .hotplug-resident-box { spacing: 8px; } .hotplug-resident-mount { spacing: 8px; border-radius: 4px; &:hover { background-color: transparentize($bg_color,0.7); } } .hotplug-resident-mount-label { color: inherit; padding-left: 6px; } .hotplug-resident-mount-icon { icon-size: 24px; padding-left: 6px; } .hotplug-resident-eject-icon { icon-size: 16px; } .hotplug-resident-eject-button { padding: 7px; border-radius: 5px; color: pink; } // Magnifier .magnifier-zoom-region { border: 2px solid $selected_bg_color; &.full-screen { border-width: 0; } } // // On-Screen Keyboard // .word-suggestions { font-size: 13pt; spacing: 12px; min-height: 22pt; StButton { padding: 0.1em 0.5em; border-radius: 2px; color: #BAC3CF; &:hover, &:focus, &:active { background-color: #5294e2; color: #ffffff; } } } #keyboard { background-color: $osd_bg_color; border-width: 0; border-top-width: 1px; border-color: transparentize(black, 0.8); } .key-container { padding: 4px; spacing: 4px; } .keyboard-layout { spacing: 10px; padding: 10px; } .keyboard-row { spacing: 15px; } .keyboard-key { min-height: 2em; min-width: 2em; @include fontsize($font-size * 1.56); font-weight: bold; border-radius: 3px; @include button(osd); &:hover { @include button(osd-hover); } &:active, &:checked { @include button(osd-active); } &:grayed { @include button(osd-insensitive); } &.enter-key { background-image: url("common-assets/keyboard/key-enter.svg"); &:active, &:checked { background-image: url("common-assets/keyboard/key-enter-active.svg"); } } &.shift-key-lowercase { background-image: url("common-assets/keyboard/key-shift.svg"); } &.shift-key-uppercase { @include button(osd-active); background-image: url("common-assets/keyboard/key-shift-uppercase.svg"); } &.shift-key-uppercase:latched { @include button(osd-active); background-image: url("common-assets/keyboard/key-shift-latched-uppercase.svg"); } &.hide-key { background-image: url("common-assets/keyboard/key-hide.svg"); &:active, &:checked { background-image: url("common-assets/keyboard/key-hide-active.svg"); } } &.layout-key { background-image: url("common-assets/keyboard/key-layout.svg"); &:active, &:checked { background-image: url("common-assets/keyboard/key-layout-active.svg"); } } } .keyboard-subkeys { //long press on a key popup color: $osd_fg_color; padding: 5px; -arrow-border-radius: 2px; -arrow-background-color: $osd_bg_color; -arrow-border-width: 1px; -arrow-border-color: transparentize(black, 0.6);; -arrow-base: 20px; -arrow-rise: 10px; -boxpointer-gap: 5px; } // // IBus Candidate Popup // .candidate-popup-content { padding: 0.5em; spacing: 0.3em; color: $osd_fg_color; @include fontsize($font-size * 1.15); } .candidate-index { padding: 0 0.5em 0 0; color: lighten($osd_fg_color, 10%); } .candidate-box { padding: 0.3em 0.5em 0.3em 0.5em; border-radius: 2px; color: $osd_fg_color; &:selected,&:hover { background-color: $selected_bg_color; color: $selected_fg_color; } } .candidate-page-button-box { height: 2em; .vertical & { padding-top: 0.5em; } .horizontal & { padding-left: 0.5em; } } .candidate-page-button { padding: 4px; } .candidate-page-button-previous { border-radius: 2px 0px 0px 2px; border-right-width: 0; } .candidate-page-button-next { border-radius: 0px 2px 2px 0px; } .candidate-page-button-icon { icon-size: 1em; } // // Auth Dialogs & Screen Shield // .framed-user-icon { background-size: contain; border: 0px solid transparent; color: $fg_color; border-radius: 2px; &:hover { border-color: transparent; color: lighten($osd_fg_color,30%); } } // // Login Dialog // .login-dialog-banner-view { padding-top: 24px; max-width: 23em; } .login-dialog { //reset border: none; background-color: transparent; .modal-dialog-button-box { spacing: 3px; } .modal-dialog-button { padding: 3px 18px; &:default { @include button(normal); &:hover,&:focus { @include button(hover); } &:active { @include button(active); } &:insensitive { @include button(insensitive); } } } } .login-dialog-logo-bin { padding: 24px 0px; } .login-dialog-banner { color: darken($osd_fg_color,10%); } .login-dialog-button-box { spacing: 5px; } .login-dialog-message-warning { color: $warning_color; } .login-dialog-message-hint { padding-top: 0; padding-bottom: 20px; } .login-dialog-user-selection-box { padding: 100px 0px; .login-dialog-not-listed-label { padding-left: 2px; .login-dialog-not-listed-button:focus &, .login-dialog-not-listed-button:hover & { color: $osd_fg_color; } } } .login-dialog-not-listed-label { @include fontsize($font-size * 0.9); font-weight: bold; color: darken($osd_fg_color,30%); padding-top: 1em; } .login-dialog-user-list-view { -st-vfade-offset: 1em; } .login-dialog-user-list { spacing: 12px; padding: .2em; width: 23em; &:expanded .login-dialog-user-list-item:focus { background-color: $selected_bg_color; color: $selected_fg_color; } &:expanded .login-dialog-user-list-item:logged-in { border-right: 2px solid $selected_bg_color; } } .login-dialog-user-list-item { border-radius: 5px; padding: .2em; color: darken($osd_fg_color,30%); &:ltr .user-widget { padding-right: 1em; } &:rtl .user-widget { padding-left: 1em; } &:hover { background-color: $selected_bg_color; color: $selected_fg_color; } .login-dialog-timed-login-indicator { height: 2px; margin: 2px 0 0 0; background-color: $osd_fg_color; } &:focus .login-dialog-timed-login-indicator { background-color: $selected_fg_color; } } .login-dialog-username, .user-widget-label { color: $osd_fg_color; @include fontsize($font-size * 1.2); font-weight: bold; text-align: left; padding-left: 15px; } .user-widget-label { &:ltr { padding-left: 18px; } &:rtl { padding-right: 18px; } } .login-dialog-prompt-layout { padding-top: 24px; padding-bottom: 12px; spacing: 8px; width: 23em; } .login-dialog-prompt-label { color: darken($osd_fg_color, 20%); @include fontsize($font-size * 1.1); padding-top: 1em; } .login-dialog-session-list-button StIcon { icon-size: 1.25em; } .login-dialog-session-list-button { color: darken($osd_fg_color,30%); &:hover,&:focus { color: $osd_fg_color; } &:active { color: darken($osd_fg_color, 50%); } } // // Screen Shield // .screen-shield-arrows { padding-bottom: 3em; } .screen-shield-arrows Gjs_Arrow { color: white; width: 80px; height: 48px; -arrow-thickness: 12px; -arrow-shadow: 0 1px 1px rgba(0,0,0,0.4); } .screen-shield-clock { color: white; text-shadow: 0px 1px 2px rgba(0,0,0,0.6); font-weight: bold; text-align: center; padding-bottom: 1.5em; } .screen-shield-clock-time { @include fontsize($font-size * 8); text-shadow: 0px 2px 2px rgba(0,0,0,0.4); font-feature-settings: "tnum"; } .screen-shield-clock-date { @include fontsize($font-size * 3); } .screen-shield-notifications-container { spacing: 6px; width: 30em; background-color: transparent; max-height: 500px; .summary-notification-stack-scrollview { padding-top: 0; padding-bottom: 0; } .notification, .screen-shield-notification-source { padding: 12px 6px; border: 1px solid $_bubble_borders_color; background-color: transparentize($osd_bg_color,0.5); color: $_bubble_fg_color; border-radius: 4px; } .notification { margin-right: 15px; } //compensate for space allocated to the scrollbar } .screen-shield-notification-label { font-weight: bold; padding: 0px 0px 0px 12px; } .screen-shield-notification-count-text { padding: 0px 0px 0px 12px; } #panel.lock-screen { background-color: transparentize($_bubble_bg_color, 0.5); } .screen-shield-background { //just the shadow, really background: black; box-shadow: 0px 2px 4px transparentize(black,0.6); } #lockDialogGroup { background: $bg_color url("common-assets/misc/noise-texture.png"); background-repeat: repeat; } #screenShieldNotifications { StButton#vhandle, StButton#hhandle { background-color: transparentize($bg_color,0.7); &:hover, &:focus { background-color: transparentize($bg_color,0.5); } &:active { background-color: transparentize($selected_bg_color,0.5); } } } // // Looking Glass // #LookingGlassDialog { margin-top: 4px; spacing: 4px; padding: 8px 8px 10px 8px; background-color: $switcher_bg_color; border: 1px solid $switcher_borders_color; border-radius: 2px; box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2); color: $osd_fg_color; & > #Toolbar { padding: 3px; border: none; background-color: transparent; border-radius: 0px; } .labels { spacing: 4px; } .notebook-tab { -natural-hpadding: 12px; -minimum-hpadding: 6px; font-weight: bold; color: $osd_fg_color; transition-duration: 100ms; padding-left: .3em; padding-right: .3em; &:hover { color: $_shell_fg_color; text-shadow: black 0px 2px 2px; } &:selected { border-bottom-width: 0px; color: $selected_bg_color; text-shadow: black 0px 2px 2px; } } StBoxLayout#EvalBox { padding: 4px; spacing: 4px; } StBoxLayout#ResultsArea { spacing: 4px; } } .lg-dialog { StEntry { caret-color: $selected_fg_color; selection-background-color: $selected_bg_color; selected-color: $selected_fg_color; @include entry(osd); &:focus { @include entry(osd-focus); selection-background-color: $selected_fg_color; selected-color: $selected_bg_color; } } .shell-link { color: $link_color; &:hover { color: lighten($link_color,10%); } } } .lg-completions-text { @include fontsize($font-size * 0.9); font-style: italic; } .lg-obj-inspector-title { spacing: 4px; } .lg-obj-inspector-button { border: 1px solid gray; padding: 4px; border-radius: 4px; &:hover { border: 1px solid #ffffff; } } #lookingGlassExtensions { padding: 4px; } .lg-extensions-list { padding: 4px; spacing: 6px; } .lg-extension { border: 1px solid $osd_borders_color; border-radius: 2px; background-color: $osd_bg_color; padding: 4px; } .lg-extension-name { font-weight: bold; } .lg-extension-meta { spacing: 6px; } #LookingGlassPropertyInspector { background: transparentize(black, 0.3); border: 1px solid grey; border-radius: 2px; padding: 6px; } ================================================ FILE: common/gnome-shell/3.30/sass/_drawing.scss ================================================ // Drawing mixins // generic drawing of more complex things // provide font size in rem, with px fallback @mixin fontsize($size: 24, $base: 16) { font-size: round($size) + pt; //font-size: ($size / $base) * 1rem; } // Entries @mixin entry($t, $dark:false) { // // Entries drawing function // //@extend %reset_style; @if $t==normal { color: $text_color; background-color: $entry_bg; border: 1px solid $entry_border; box-shadow: inset 0 2px 4px transparentize($entry_bg, 0.95); } @if $t==focus { color: $fg_color; background-color: $entry_bg; border: 1px solid $selected_bg_color; box-shadow: inset 0 2px 4px transparentize($entry_bg, 0.95); } @if $t==insensitive { color: $insensitive_fg_color; background-color: mix($entry_bg, $bg_color, 55%); border: 1px solid mix($entry_border, $bg_color, 55%); box-shadow: inset 0 2px 4px transparentize(mix($entry_bg, $bg_color, 55%), 0.95); } @if $t==osd { color: $osd_fg_color; background-color: $osd_entry_bg; border: 1px solid $osd_entry_border; box-shadow: inset 0 2px 4px transparentize(black, 0.95); } @if $t==osd-focus { color: $selected_fg_color; background-color: $selected_bg_color; border: 1px solid $osd_entry_border; box-shadow: inset 0 2px 4px transparentize(black, 0.95); } @if $t==osd-insensitive { color: transparentize($osd_fg_color, 0.45); background-color: transparentize($osd_entry_bg, 0.15); border: 1px solid $osd_entry_border; box-shadow: inset 0 2px 4px transparentize(black, 0.95); } } // Buttons @mixin button($t) { // // Button drawing function // //@extend %reset_style; text-shadow: 0 1px transparentize($base_color, 1); @if $t==normal { // // normal button // color: $fg_color; background-color: $button_bg; border: 1px solid $button_border; box-shadow: inset 0 1px transparentize($button_bg, 0.95); } @else if $t==focus { // // focused button // color: $fg_color; background-color: $button_bg; border: 1px solid $selected_bg_color; box-shadow: inset 0 1px transparentize($button_bg, 0.95); } @else if $t==focus-hover { // // focused button // color: $fg_color; background-color: $button_bg; border: 1px solid $selected_bg_color; box-shadow: inset 0 1px transparentize($button_bg, 0.95); } @else if $t==hover { // // hovered button // color: $fg_color; background-color: lighten($button_bg, 5%); border: 1px solid $button_border; box-shadow: inset 0 1px transparentize(lighten($button_bg, 5%), 0.95); } @else if $t==active { // // pushed button // color: $selected_fg_color; background-color: $selected_bg_color; border: 1px solid if($variant=='light', $selected_bg_color, $button_border); box-shadow: inset 0 1px transparentize($selected_bg_color, 0.95); } @else if $t==insensitive { // // insensitive button // color: $insensitive_fg_color; border: 1px solid transparentize($button_border, 0.45); background-color: transparentize($button_bg, 0.45); box-shadow: inset 0 1px transparentize($button_bg, 0.95); } @else if $t==osd { // // normal osd button // color: $osd_fg_color; border: 1px solid $osd_button_border; background-color: $osd_button_bg; box-shadow: inset 0 1px transparentize(black, 0.95); } @else if $t==osd-hover { // // active osd button // color: $osd_fg_color; border: 1px solid $osd_button_border; background-color: opacify(lighten($osd_button_bg, 7%), 0.1); box-shadow: inset 0 1px transparentize(black, 0.95); } @else if $t==osd-active { // // active osd button // color: $selected_fg_color; border: 1px solid $osd_button_border; background-color: $selected_bg_color; box-shadow: inset 0 1px transparentize($selected_bg_color, 0.95); } @else if $t==osd-insensitive { // // insensitive osd button // color: $osd_insensitive_fg_color; border: 1px solid $osd_button_border; background-color: transparentize($osd_button_bg, 0.15); box-shadow: inset 0 1px transparentize(black, 0.95); } } ================================================ FILE: common/gnome-shell/3.30/sass/gnome-shell-dark.scss ================================================ $variant: 'dark'; $transparency: 'true'; $darker: 'false'; @import "_colors"; //use gtk colors @import "_drawing"; @import "_common"; ================================================ FILE: common/gnome-shell/3.30/sass/gnome-shell.scss ================================================ $variant: 'light'; $transparency: 'true'; $darker: 'false'; @import "_colors"; //use gtk colors @import "_drawing"; @import "_common"; ================================================ FILE: common/gnome-shell/3.32/sass/_colors.scss ================================================ // When color definition differs for dark and light variant, // it gets @if ed depending on $variant $base_color: if($variant =='light', #ffffff, #404552); $text_color: if($variant == 'light', #5c616c, #D3DAE3); $bg_color: if($variant =='light', #F5F6F7, #383C4A); $fg_color: if($variant =='light', #5c616c, #D3DAE3); $selected_fg_color: #ffffff; $selected_bg_color: #5294e2; $selected_borders_color: darken($selected_bg_color, 20%); $borders_color: if($variant =='light', darken($bg_color,9%), darken($bg_color,6%)); $link_color: if($variant == 'light', darken($selected_bg_color,10%), lighten($selected_bg_color,20%)); $link_visited_color: if($variant == 'light', darken($selected_bg_color,20%), lighten($selected_bg_color,10%)); $selection_mode_bg: if($transparency == 'true', transparentize($selected_bg_color, 0.05), $selected_bg_color); $selection_mode_fg: $selected_fg_color; $warning_color: #F27835; $error_color: #FC4138; $warning_fg_color: white; $error_fg_color: white; $success_color: #73d216; $destructive_color: #F04A50; $suggested_color: #4DADD4; $destructive_fg_color: white; $suggested_fg_color: white; $drop_target_color: #F08437; //insensitive state derived colors $insensitive_fg_color: if($variant == 'light', transparentize($fg_color, 0.45), transparentize($fg_color, 0.55)); $insensitive_bg_color: if($variant == 'light', mix($bg_color, $base_color, 40%), lighten($bg_color, 2%)); $header_bg: red; @if $transparency=='true' and $variant=='light' { $header_bg: transparentize(#e7e8eb, 0.05); } @if $transparency=='false' and $variant=='light' { $header_bg: #e7e8eb; } @if $transparency=='true' and ($variant=='dark' or $darker=='true') { $header_bg: transparentize(#2f343f, 0.03); } @if $transparency=='false' and ($variant=='dark' or $darker=='true') { $header_bg: #2f343f; } $header_bg_backdrop: if($darker == 'true' or $variant == 'dark', lighten($header_bg, 1.5%), lighten($header_bg, 3%)); $header_border: if($variant == 'light' and $darker=='false', darken($header_bg, 7%), darken($header_bg, 4%)); $header_fg: if($variant == 'light', saturate(transparentize($fg_color, 0.2), 10%), saturate(transparentize($fg_color, 0.2), 10%)); $header_fg: if($darker == 'true', saturate(transparentize(#D3DAE3, 0.2), 10%), $header_fg); $dark_sidebar_bg: if($transparency == 'true', transparentize(#353945, 0.05), #353945); $dark_sidebar_fg: #BAC3CF; $dark_sidebar_border: if($variant == 'light', $dark_sidebar_bg, darken($dark_sidebar_bg, 5%)); $osd_fg_color: $dark_sidebar_fg; $osd_bg_color: $dark_sidebar_bg; $osd_button_bg: transparentize(lighten($osd_bg_color, 22%), 0.6); $osd_button_border: transparentize(darken($osd_bg_color, 12%), 0.6); $osd_entry_bg: transparentize(lighten($osd_bg_color, 22%), 0.6); $osd_entry_border: transparentize(darken($osd_bg_color, 12%), 0.6); $osd_insensitive_bg_color: darken($osd_bg_color, 3%); $osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 30%); $osd_borders_color: transparentize(black, 0.3); $panel_bg: darken($dark_sidebar_bg, 4.7%); $panel_fg: $dark_sidebar_fg; $entry_bg: if($variant=='light', $base_color, lighten($base_color, 0%)); $entry_border: if($variant == 'light', #cfd6e6, darken($borders_color, 0%)); $header_entry_bg: if($darker == 'true' or $variant == 'dark', transparentize(lighten($header_bg, 22%), 0.6), transparentize($base_color, 0.1)); $header_entry_border: if($darker == 'true' or $variant == 'dark', transparentize(darken($header_bg, 12%), 0.6), transparentize($header_fg, 0.7)); $button_bg: if($variant == 'light', lighten($bg_color, 2%), lighten($base_color, 2%)); $button_border: $entry_border; $header_button_bg: if($darker == 'true' or $variant == 'dark', transparentize(lighten($header_bg, 22%), 0.6), transparentize($button_bg, 0.1)); $header_button_border: if($darker == 'true' or $variant == 'dark', transparentize(darken($header_bg, 12%), 0.6), transparentize($header_fg, 0.7)); //WM Buttons // Close $wm_button_close_bg: if($variant == 'light' and $darker == 'false', #f46067, #cc575d); $wm_button_close_hover_bg: if($variant == 'light' and $darker == 'false', #f68086, #d7787d); $wm_button_close_active_bg: if($variant == 'light' and $darker == 'false', #f13039, #be3841); $wm_icon_close_bg: if($variant == 'light' and $darker == 'false',#F8F8F9 , #2f343f); // Minimize, Maximize $wm_button_hover_bg: if($variant == 'light' and $darker == 'false', #fdfdfd, #454C5C); $wm_button_active_bg: $selected_bg_color; $wm_button_hover_border: if($variant == 'light' and $darker == 'false', #D1D3DA, #262932); $wm_icon_bg: if($variant == 'light' and $darker == 'false', #90949E, #90939B); $wm_icon_unfocused_bg: if($variant == 'light' and $darker == 'false', #B6B8C0, #666A74); $wm_icon_hover_bg: if($variant == 'light' and $darker == 'false', #7A7F8B, #C4C7CC); $wm_icon_active_bg: $selected_fg_color; // Modal dialog colors $modal_bg_color: if($variant =='light', #f5f6f7, #323644); $modal_borders_color: $borders_color; // Panel button dropdown menu colors $panelmenu_bg_color: if($variant =='light', #ffffff, #383C4A); $panelmenu_borders_color: $borders_color; // OSD popup colors $popup_bg_color: transparentize(#252A36, 0.05); $popup_borders_color: transparentize(#0F1016, 0.3); // Switcher colors $switcher_bg_color: transparentize(#363945, 0.05); $switcher_borders_color: transparentize(#161A26, 0.3); ================================================ FILE: common/gnome-shell/3.32/sass/_common.scss ================================================ //This is the RIGHT PLACE to edit the stylesheet $panel-corner-radius: 0px; $asset_path: if($variant == 'dark', dark-assets, light-assets); /* Copyright 2009, 2015 Red Hat, Inc. * * Portions adapted from Mx's data/style/default.css * Copyright 2009 Intel Corporation * * This program is free software; you can redistribute it and/or modify it * under the terms and conditions of the GNU Lesser General Public License, * version 2.1, as published by the Free Software Foundation. * * This program is distributed in the hope it will be useful, but WITHOUT ANY * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for * more details. * * You should have received a copy of the GNU Lesser General Public License * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA. */ // // Globals // $font-size: 10; $font-family: Futura Bk bt, Cantarell, Sans-Serif; $_bubble_bg_color: opacify($osd_bg_color,0.25); $_bubble_fg_color: $osd_fg_color; $_bubble_borders_color: transparentize($osd_fg_color,0.8); $_shell_fg_color: white; stage { font-family: $font-family; @include fontsize($font-size); color: $fg_color; } %reset_style { background-color: transparent !important; background-gradient-direction: none !important; border: none !important; border-radius: 0 !important; } // // Buttons // .button { min-height: 20px; padding: 5px 32px; transition-duration: 0; border-radius: 2px; @extend %button; } %button { @include button(normal); &:focus { @include button(focus); } &:hover { @include button(hover); } &:hover:focus { @include button(focus-hover); } &:active, &:active:focus { @include button(active); } &:insensitive { @include button(insensitive); } } %osd_button { @include button(osd); &:hover { @include button(osd-hover); } &:focus { color: $selected_bg_color; } &:active { @include button(osd-active); } &:insensitive { @include button(osd-insensitive); } } // // Entries // StEntry { padding: 7px; caret-size: 1px; caret-color: $fg_color; selection-background-color: $selected_bg_color; selected-color: $selected_fg_color; transition-duration: 300ms; border-radius: 3px; @include entry(normal); &:focus, &:hover { @include entry(focus); } &:insensitive { @include entry(insensitive); } StIcon.capslock-warning { icon-size: 16px; warning-color: $warning_color; padding: 0 4px; } } // // Scrollbars // StScrollView { &.vfade { -st-vfade-offset: 0px; } &.hfade { -st-hfade-offset: 0px; } } StScrollBar { padding: 8px; StScrollView & { min-width: 5px; min-height: 5px; } StBin#trough { background-color: transparentize($base_color, 0.9); border-radius: 8px; } StButton#vhandle, StButton#hhandle { border-radius: 4px; background-color: mix($fg_color, $bg_color, 40%); border: 0px; margin: 0px; &:hover { background-color: mix($fg_color, $bg_color, 30%); } &:active { background-color: $selected_bg_color; } } } // // Slider // .slider { -barlevel-height: 4px; -barlevel-background-color: $button_border; //background of the trough -barlevel-border-color: transparentize(black, 1); //trough border color -barlevel-active-background-color: $selected_bg_color; //active trough fill -barlevel-active-border-color: transparentize(black, 1); //active trough border -barlevel-overdrive-color: $destructive_color; -barlevel-overdrive-border-color: transparentize(black, 1); -barlevel-overdrive-separator-width: 1px; -barlevel-border-width: 0; -slider-handle-radius: 0px; height: 18px; border: 0 solid transparent; border-right-width: 1px; border-left-width: 5px; color: transparent; .popup-menu-item.selected & { -barlevel-background-color: transparentize(black, 0.8); -barlevel-active-background-color: $selected_fg_color; } } // // Check Boxes // .check-box { StBoxLayout { spacing: .8em; } StBin { width: 16px; height: 16px; background-image: url("#{$asset_path}/checkbox/checkbox-unchecked.svg"); } &:focus StBin { background-image: url("#{$asset_path}/checkbox/checkbox-unchecked-focused.svg"); } &:checked StBin { background-image: url("#{$asset_path}/checkbox/checkbox-checked.svg"); } &:focus:checked StBin { background-image: url("#{$asset_path}/checkbox/checkbox-checked-focused.svg"); } } // // Switches // .toggle-switch { width: 50px; height: 20px; background-size: contain; background-image: url("#{$asset_path}/switch/switch-off.svg"); &:checked { background-image: url("#{$asset_path}/switch/switch-on.svg"); } .popup-menu-item.selected & { background-image: url("common-assets/switch/switch-off-selected.svg"); &:checked { background-image: url("common-assets/switch/switch-on-selected.svg"); } } } // // Links // .shell-link { color: $link_color; &:hover { color: lighten($link_color,10%); } } // // Modal Dialogs // .headline { @include fontsize($font-size * 1.1); } .lightbox { background-color: black; } .flashspot { background-color: white; } .modal-dialog { border-radius: 3px; color: $fg_color; background-color: $modal_bg_color; border: 1px solid $modal_borders_color; box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2); .modal-dialog-content-box { padding: 20px 10px 10px 10px; } &-linked-button { height: if($variant=='light', 39px, 38px); padding: 0; box-shadow: inset 0 0 black; border-top-width: if($variant=='light', 0px, 1px); border-right-width: 1px; border-bottom-width: 0; color: $osd_fg_color; background-color: $osd_bg_color; border-color: if($variant=='light', darken($osd_bg_color, 5%), darken($osd_bg_color, 8%)); &:hover { background-color: lighten($osd_bg_color, 5%); } &:focus { color: $selected_bg_color; } &:active { color: $selected_fg_color; background-color: $selected_bg_color; } &:insensitive { color: transparentize($osd_fg_color, 0.5); background-color: darken($osd_bg_color, 2%); } &:first-child { border-radius: 0px 0px 0px 2px; } &:last-child { border-right-width: 0px; border-radius: 0px 0px 2px 0px; } &:first-child:last-child { border-right-width: 0px; border-radius: 0px 0px 2px 2px; } } .run-dialog-entry { width: 21em; margin-bottom: 6px; } .run-dialog-error-box { padding-top: 5px; spacing: 5px; } .run-dialog-button-box { padding-top: 1em; } //.run-dialog-button-box { padding-top: 1em; } .run-dialog-label { font-size: 0; } } .mount-dialog-subject, .end-session-dialog-subject { //this should be a generic header class @include fontsize($font-size * 1.2); font-weight: bold; color: $fg_color; } // // Message Dialog // .message-dialog { &-main-layout { padding: 12px 20px 0; spacing: 12px; } &-content { max-width: 28em; spacing: 20px; } &-icon { min-width: 48px; icon-size: 48px; } &-title { font-weight: bold; } &-subtitle { color: $fg_color; font-weight: bold; } } // // End Session Dialog // .end-session-dialog { spacing: 42px; //border: 3px solid $_bubble_borders_color; &-list { padding-top: 20px; } &-layout { padding-left: 17px; &:rtl { padding-right: 17px; } } &-description { width: 28em; padding-bottom: 10px; &:rtl { text-align: right; } } &-warning { width: 28em; color: $warning_color; padding-top: 6px; &:rtl { text-align: right; } } &-logout-icon { border: 0px solid transparent; border-radius: 99px; width: 48px; height: 48px; background-size: contain; } &-shutdown-icon { color: $fg_color; width: 48px; height: 48px; } &-inhibitor-layout { spacing: 16px; max-height: 200px; padding-right: 10px; padding-left: 10px; } &-session-list, &-app-list { spacing: 1em; } &-list-header { font-weight: bold; &:rtl { text-align: right; } } &-app-list-item, &-session-list-item { spacing: 1em; } &-app-list-item-name, &-session-list-item-name { font-weight: bold; } &-app-list-item-description { color: lighten($fg_color,5%); @include fontsize($font-size * 0.9); } .modal-dialog-linked-button:last-child { color: $destructive_fg_color; background-color: $destructive_color; &:hover { color: $destructive_fg_color; background-color: lighten($destructive_color, 9%); } &:active { color: $destructive_fg_color; background-color: darken($destructive_color, 5%); } } } // // ShellMountOperation Dialogs // .shell-mount-operation-icon { icon-size: 48px; } .mount-dialog { spacing: 24px; .message-dialog-title { padding-top: 10px; padding-left: 17px; padding-bottom: 6px; max-width: 34em; &:rtl { padding-left: 0px; padding-right: 17px; } } .message-dialog-body { padding-left: 17px; width: 28em; &:rtl { padding-left: 0px; padding-right: 17px; } } } .mount-dialog-app-list { @include fontsize($font-size * 1.1); max-height: 200px; padding-top: 24px; padding-left: 49px; padding-right: 32px; &:rtl { padding-right: 49px; padding-left: 32px; } } .mount-dialog-app-list-item { color: darken($fg_color,10%); &:hover { color: $fg_color; } &:ltr { padding-right: 1em; } &:rtl { padding-left: 1em; } } .mount-dialog-app-list-item-icon { &:ltr { padding-right: 17px; } &:rtl { padding-left: 17px; } } .mount-dialog-app-list-item-name { @include fontsize($font-size * 1.1); } // // Password or Authentication Dialog // .prompt-dialog { //this is the width of the entire modal popup width: 34em; //border: 3px solid $_bubble_borders_color; .message-dialog-main-layout { spacing: 24px; padding: 10px; } .message-dialog-content { spacing: 16px; } .message-dialog-title { @include fontsize($font-size * 1.3); font-weight: bold; color: $fg_color; } &-description:rtl { text-align: right; } &-password-box { spacing: 1em; padding-bottom: 1em; } &-error-label { @include fontsize($font-size); color: $error_color; padding-bottom: 8px; } &-info-label { @include fontsize($font-size); padding-bottom: 8px; } &-null-label { @include fontsize($font-size); padding-bottom: 8px; } } .hidden { color: transparentize(black, 1); } // // Polkit Dialog // .polkit-dialog-user { &-layout { padding-left: 10px; spacing: 10px; &:rtl { padding-left: 0px; padding-right: 10px; } } &-root-label { color: $warning_color; } &-icon { border-radius: 99px; background-size: contain; width: 48px; height: 48px; } } // // Audio selection dialog // .audio-device-selection-dialog { spacing: 30px; } .audio-selection { &-content { spacing: 20px; padding: 24px; } &-title { font-weight: bold; text-align: center; } &-box { spacing: 20px; } &-device { border: 1px solid $borders_color; border-radius: 3px; &:active,&:hover,&:focus { background-color: $selected_bg_color; border-color: $selected_bg_color; } } &-device-box { padding: 20px; spacing: 20px; } &-device-icon { icon-size: 64px; } } // // Access Dialog // .access-dialog { spacing: 30px; } // // Geolocation Dialog // .geolocation-dialog { spacing: 30px; } // // Extension Dialog // .extension-dialog { .message-dialog-main-layout { spacing: 24px; padding: 10px; } .message-dialog-title { color: $fg_color; } } // // Inhibit Shortcuts Dialog // .inhibit-shortcuts-dialog { spacing: 30px; } // // Network Agent Dialog // .network-dialog-secret-table { spacing-rows: 15px; spacing-columns: 1em; } .keyring-dialog-control-table { spacing-rows: 15px; spacing-columns: 1em; } // // Popvers/Menus // .popup-menu { min-width: 15em; color: $fg_color; border-radius: 3px; .popup-menu-arrow { } //defined globally in the TOP BAR .popup-sub-menu { padding-bottom: 1px; background: if($variant=='light', rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.15)); box-shadow: inset 0 -1px if($variant=='light', rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.15)); margin: 0; .popup-menu-item.selected { background-color: $selected_bg_color; border-image: none; margin: 0; } } .popup-menu-content { padding: 1em 0em 1em 0em; } .popup-menu-item { spacing: 12px; &:ltr { padding: .4em 2em .4em 0em; } &:rtl { padding: .4em 0em .4em 2em; } &:checked { font-weight: normal; background: if($variant=='light', rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.15)); box-shadow: inset 0 1px if($variant=='light', rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.15)); } &:active, &.selected { color: $selected_fg_color; background-color: $selected_bg_color; box-shadow: none; } &:insensitive { color: transparentize($fg_color, 0.5); background: none; } } .popup-inactive-menu-item { //all icons and other graphical elements color: $fg_color; &:insensitive { color: $insensitive_fg_color; } } //.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is &.panel-menu { -boxpointer-gap: 0px; margin-bottom: 1.75em; } } .popup-menu-ornament { text-align: right; margin-left: 10px; width: 16px; } .popup-menu-boxpointer { -arrow-border-radius: 3px; -arrow-background-color: transparent; -arrow-border-width: 0; -arrow-border-color: transparent; -arrow-base: 26px; -arrow-rise: 0; .popup-menu-content { margin: 5px; border-radius: 3px; border: 1px solid $panelmenu_borders_color; background-color: $panelmenu_bg_color; box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2); } } .candidate-popup-boxpointer { -arrow-border-radius: 2px; -arrow-background-color: $osd_bg_color; -arrow-border-width: 1px; -arrow-border-color: transparentize(black, 0.6); -arrow-base: 5; -arrow-rise: 5; } .popup-separator-menu-item { //-margin-horizontal: 24px; height: 2px; //not really the whole box margin: 0; background-color: transparent; border: none; border-image: url("common-assets/menu/menu-separator.svg") 1 1 1 1; } // Background menu .background-menu { -boxpointer-gap: 4px; -arrow-rise: 0px; } // fallback menu //- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled // app menu inside the main app window itself rather than the top bar // // // OSD // .osd-window { text-align: center; font-weight: bold; spacing: 1em; padding: 20px; margin: 32px; min-width: 64px; min-height: 64px; color: $_shell_fg_color; background: $popup_bg_color; border: 1px solid $popup_borders_color; border-radius: 5px; box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2); .osd-monitor-label { @include fontsize($font-size * 3); } .level { padding: 0; height: 4px; -barlevel-height: 4px; -barlevel-background-color: transparentize(black, 0.5); -barlevel-active-background-color: $selected_bg_color; -barlevel-overdrive-color: $destructive_color; -barlevel-overdrive-separator-width: 1px; } } .resize-popup { color: $osd_fg_color; background: $popup_bg_color; border: 1px solid $popup_borders_color; border-radius: 5px; box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2); padding: 12px; } // // Pad OSD // .pad-osd-window { padding: 32px; background-color: $popup_bg_color; border: 1px solid $popup_borders_color; .pad-osd-title-box { spacing: 12px; } .pad-osd-title-menu-box { spacing: 6px; } } .combo-box-label { width: 15em; } // // Alt Tab Switcher // .switcher-popup { padding: 8px; spacing: 16px; } .switcher-list { background: $switcher_bg_color; border: 1px solid $switcher_borders_color; border-radius: 3px; box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2); padding: 20px; &-item-container { spacing: 8px; } .item-box { padding: 8px; border-radius: 2px; border: 1px solid transparent; &:outlined { padding: 8px; border: 1px solid $selected_bg_color; } &:selected { color: $selected_fg_color; background-color: $selected_bg_color; border: 1px solid $selected_bg_color; } } .thumbnail-box { padding: 2px; spacing: 4px; } .thumbnail { width: 256px; } .separator { width: 1px; background: transparentize($fg_color, 0.67); } } .switcher-arrow { border-color: rgba(0,0,0,0); color: $osd_fg_color; &:highlighted { color: $_shell_fg_color; } } .input-source-switcher-symbol { @include fontsize($font-size * 4); width: 96px; height: 96px; } // //Window Cycler // .cycler-highlight { border: 5px solid $selected_bg_color; } // // Workspace Switcher // .workspace-switcher { background: transparent; border: 0px; border-radius: 0px; padding: 0px; spacing: 8px; &-group { padding: 12px; } &-container { background-color: $switcher_bg_color; border: 1px solid $switcher_borders_color; border-radius: 3px; box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2); padding: 20px; padding-bottom: 24px; } } .ws-switcher-active-up, .ws-switcher-active-down { height: 30px; background-color: $selected_bg_color; background-size: 96px; border-radius: 2px; border: 1px solid $selected_bg_color; } .ws-switcher-active-up { background-image: url("common-assets/misc/ws-switch-arrow-up.png"); } .ws-switcher-active-down { background-image: url("common-assets/misc/ws-switch-arrow-down.png"); } .ws-switcher-box { height: 96px; background-color: transparentize(black, 0.67); border: 1px solid transparentize(black, 0.67); border-radius: 2px; } // // Tiled window previews // .tile-preview { background-color: transparentize($selected_bg_color, 0.65); border: 1px solid $selected_bg_color; &-left.on-primary { border-radius: $panel-corner-radius 0 0 0; } &-right.on-primary { border-radius: 0 $panel-corner-radius 0 0; } &-left.tile-preview-right.on-primary { border-radius: $panel-corner-radius $panel-corner-radius 0 0; } } // // Top Bar // #panel { $_panel_fg_color: $_shell_fg_color; font-weight: bold; font-feature-settings: "tnum"; height: 2.1em; min-height: 27px; background-gradient-direction: none; background-color: transparent; border-bottom-width: 0; border-image: url('common-assets/panel/panel.svg') 1 1 1 1; // Fix dynamic top bar extension &.dynamic-top-bar-white-btn { border-image: none; } &.unlock-screen, &.login-screen, &.lock-screen { background-color: transparent; border-image: none; } &:overview { border-image: url('common-assets/panel/panel-overview.svg') 1 1 1 1; } #panelLeft, #panelCenter { // spacing between activities<>app menu and such spacing: 8px; } .panel-corner { -panel-corner-radius: $panel-corner-radius; -panel-corner-background-color: transparentize(black, 1); -panel-corner-border-width: 0px; -panel-corner-border-color: black; &:active, &:overview, &:focus { -panel-corner-border-color: black; } &.lock-screen, &.login-screen, &.unlock-screen { -panel-corner-radius: 0; -panel-corner-background-color: transparent; -panel-corner-border-color: transparent; } } .panel-button { -natural-hpadding: 10px; -minimum-hpadding: 6px; font-weight: bold; color: $_panel_fg_color; text-shadow: none; transition-duration: 100ms; border-bottom-width: 1px; border-color: transparent; .app-menu-icon { -st-icon-style: symbolic; width: 0; height: 0; margin-left: 0px; margin-right: 0px; } .system-status-icon, .app-menu-icon > StIcon, .popup-menu-arrow { icon-shadow: none; } &:hover { color: $_panel_fg_color; background-color: transparentize(black, 0.83); border-bottom-width: 1px; border-color: transparent; .system-status-icon, .app-menu-icon > StIcon, .popup-menu-arrow { icon-shadow: none; } } &:active, &:overview, &:focus, &:checked { color: $selected_fg_color; background-color: $selected_bg_color; box-shadow: none; border-bottom-width: 1px; border-color: black; & > .system-status-icon { icon-shadow: none; } } .system-status-icon { color: $selected_fg_color; icon-size: 16px; padding: 0 4px; } .unlock-screen &, .login-screen &, .lock-screen & { color: lighten($fg_color, 10%); &:focus, &:hover, &:active { color: lighten($fg_color, 10%); } } } .panel-button > *{ color: $selected_fg_color; } #panelActivities.panel-button { -natural-hpadding: 12px; } .panel-status-indicators-box, .panel-status-menu-box { spacing: 2px; color: $selected_fg_color; } // spacing between power icon and (optional) percentage label .power-status.panel-status-indicators-box { spacing: 0; } .screencast-indicator { color: $error_color; } .remote-access-indicator { color: $error_color; } .popup-menu-arrow { width: 0; } } // Activities button #panel #panelActivities.panel-button { > * { background-image: url("common-assets/panel/activities.svg"); background-position: center top; width: 24px; height: 24px; background-color: transparent !important; background-gradient-direction: none !important; border: 0 solid transparent !important; text-shadow: 0 0 transparent !important; transition-duration: 0ms !important; box-shadow: none !important; color: transparent; } &:active, &:overview, &:focus, &:checked { background-color: transparent; box-shadow: none; border-bottom-width: 1px; border-color: transparent; > * { background-image: url("common-assets/panel/activities-active.svg"); } } } // a little unstructured mess: .system-switch-user-submenu-icon { icon-size: 16px; padding: 0 4px; } #appMenu { spinner-image: url("common-assets/misc/process-working.svg"); spacing: 4px; padding: 0 8px; .label-shadow { color: transparent; } } .aggregate-menu { min-width: 23.5em; .popup-menu-icon { padding: 0 4px; } .popup-sub-menu .popup-menu-item > :first-child { &:ltr { padding-left: 20px; margin-left: 26px; } &:rtl { padding-right: 20px; margin-right: 26px; } } } .system-menu-action { -st-icon-style: symbolic; padding: 13px; color: $fg_color; border-radius: 32px; /* wish we could do 50% */ border: 1px solid transparent; &:hover, &:focus { transition-duration: 100ms; padding: 13px; color: $fg_color; background-color: transparent; border: 1px solid $selected_bg_color; } &:active { color: $selected_fg_color; background-color: $selected_bg_color; border: 1px solid $selected_bg_color; } & > StIcon { icon-size: 16px; } } // // Calendar popover // #calendarArea { padding: 0.75em 1.0em; } .calendar { margin-bottom: 1em; } .calendar, .datemenu-today-button, .datemenu-displays-box, .message-list-sections { margin: 0 0.4em; } .datemenu-calendar-column { spacing: 0.5em; border: none; } .datemenu-displays-section { padding-bottom: 3em; } .datemenu-today-button, .world-clocks-button, .weather-button, .events-section-title { border-radius: 3px; padding: .4em; } .message-list-section-list:ltr { padding-left: .4em; } .message-list-section-list:rtl { padding-right: .4em; } .datemenu-today-button, .world-clocks-button, .weather-button, .events-section-title { padding: 7px 10px 7px 10px; border: 1px solid transparentize($base_color, 1); &:hover, &:focus { @include button(hover); } &:active { @include button(active); } } .datemenu-today-button .day-label { } .datemenu-today-button .date-label { @include fontsize($font-size * 1.5); } .world-clocks-header, .weather-header, .events-section-title { color: transparentize($fg_color, 0.6); font-weight: bold; } .weather-header.location { font-weight: bold; @include fontsize($font-size * 0.875); } .world-clocks-button:active .world-clocks-header, .weather-button:active .weather-header { color: transparentize($fg_color, 0.4); } .world-clocks-grid, .weather-grid { spacing-rows: 0.4em; spacing-columns: 0.8em; } .weather-grid { @include fontsize($font-size * 0.875); } .weather-box { spacing: 0.4em; } .world-clocks { &-city { font-weight: bold; @include fontsize($font-size * 0.875); } &-time { color: transparentize($fg_color, 0.2); font-feature-settings: "tnum"; @include fontsize($font-size * 1.2); } &-timezone { color: transparentize($fg_color, 0.4); font-feature-settings: "tnum"; @include fontsize($font-size * 0.875); } } .world-clocks-button:active { .world-clocks-time { color: transparentize($fg_color, 0.2); } .world-clocks-timezone { color: transparentize($fg_color, 0.4); } } .weather { &-forecast-icon { icon-size: 2.18em; } &-forecast-time { color: transparentize($fg_color, 0.4); @include fontsize($font-size * 0.75); } } .weather-button:active .weather-forecast-time { color: transparentize($fg_color, 0.4); } .calendar-month-label { color: $fg_color; font-weight: bold; padding: 8px 0; &:focus {} } .pager-button { color: transparent; background-color: transparent; width: 32px; border-radius: 2px; &:focus, &:hover, &:active { background-color: transparent; } } //arrow back .calendar-change-month-back { background-image: url("#{$asset_path}/misc/calendar-arrow-left.svg"); &:focus, &:hover { background-image: url("#{$asset_path}/misc/calendar-arrow-left-hover.svg"); } &:active { background-image: url("#{$asset_path}/misc/calendar-arrow-left.svg"); } &:rtl { background-image: url("#{$asset_path}/misc/calendar-arrow-right.svg"); &:focus, &:hover { background-image: url("#{$asset_path}/misc/calendar-arrow-right-hover.svg"); } &:active { background-image: url("#{$asset_path}/misc/calendar-arrow-right.svg"); } } } //arrow forward .calendar-change-month-forward { background-image: url("#{$asset_path}/misc/calendar-arrow-right.svg"); &:focus, &:hover { background-image: url("#{$asset_path}/misc/calendar-arrow-right-hover.svg"); } &:active { background-image: url("#{$asset_path}/misc/calendar-arrow-right.svg"); } &:rtl { background-image: url("#{$asset_path}/misc/calendar-arrow-left.svg"); &:focus, &:hover { background-image: url("#{$asset_path}/misc/calendar-arrow-left-hover.svg"); } &:active { background-image: url("#{$asset_path}/misc/calendar-arrow-left.svg"); } } } .calendar-day-base { @include fontsize($font-size * 0.875); text-align: center; width: 25px; height: 25px; padding: 0.1em; margin: 2px; border-radius: 12.5px; font-feature-settings: "tnum"; &:hover, &:focus { background-color: transparentize(black, 0.9); } &:active, &:selected { color: $fg_color; background-color: transparentize(black, 0.85); border-width: 0; //avoid jumparound due to today } &.calendar-day-heading { //day of week heading color: transparentize($fg_color, 0.15); margin-top: 1em; @include fontsize($font-size * 0.75); } } .calendar-day { //border collapse hack - see calendar.js border-width: 0; color: transparentize($fg_color, 0.2); } .calendar-day-top { border-top-width: 0; } .calendar-day-left { border-left-width: 0; } .calendar-work-day {} .calendar-nonwork-day { color: $fg_color; font-weight: bold; } .calendar-today, .calendar-today:active, .calendar-today:selected, .calendar-today:focus, .calendar-today:hover { font-weight: bold; color: $selected_fg_color; background-color: $selected_bg_color; border-width: 0; } .calendar-day-with-events { font-weight: bold; background-image: url("common-assets/misc/calendar-today.svg"); } .calendar-today.calendar-day-with-events { color: $selected_fg_color; } .calendar-other-month-day { color: transparentize($fg_color, 0.7); opacity: 1; } .calendar-week-number { @include fontsize($font-size * 0.75); font-weight: bold; width: 2.0em; height: 1.5em; border-radius: 2px; padding: 0.4em 0 0; margin: 2px 6px; background-color: transparentize($fg_color,0.7); color: $bg_color; &:focus { background-color: transparentize($fg_color,0.6); } } // // Message list // .message-list { width: 31.5em; &-sections { spacing: 1.5em; } &-section, &-section-list { spacing: 0.7em; } &-placeholder { StIcon { width: 0; height: 0; } StLabel { color: $insensitive_fg_color; } } &-clear-button.button { margin: 1.5em 1.5em 0; padding: 4px 12px; } } .message { padding: 0; color: $fg_color; background-color: if($variant=='light', rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.15)); border: 1px solid if($variant=='light', rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.30)); border-radius: 3px; &:hover, &:focus { color: $fg_color; border-color: $selected_bg_color; } &:active { color: $selected_fg_color; background-color: $selected_bg_color; border-color: $selected_bg_color; } &-icon-bin { padding: 12px 0px 12px 12px; border-image: url("common-assets/misc/message-icon.svg") 9 9 9 9; &:rtl { padding: 12px 12px 12px 0px; } > StIcon { //icon-size: 32px; color: inherit; icon-size: 1.09em; -st-icon-style: symbolic; } > .fallback-window-icon { width: 1.09em; height: 1.09em; } } &-secondary-bin { padding: 0 0.82em; } &-secondary-bin > .event-time { padding-bottom: 0.13em; } &-secondary-bin, &-secondary-bin > .event-time { color: transparentize($fg_color, 0.4); @include fontsize($font-size * 0.9); &:ltr { padding-left: 8px; } &:rtl { padding-right: 8px; } } &:active .message-secondary-bin, &:active .message-secondary-bin > .event-time { color: transparentize($selected_fg_color, 0.4); } &-secondary-bin > StIcon { icon-size: 16px; } &-title { color: inherit; font-weight: bold; @include fontsize($font-size); padding: 2px 0 2px 0; } &-content { color: inherit; padding: 8px; @include fontsize($font-size); } } .message-media-control { padding: 6px; color: $fg_color; &:last-child:ltr { padding-right: 18px; } &:last-child:rtl { padding-left: 18px; } &:hover { color: transparentize($fg_color, 0.3); } &:active { color: $selected_bg_color; } &:insensitive { color: $insensitive_fg_color; } } .message:active .message-media-control { color: $selected_fg_color; } .media-message-cover-icon { icon-size: 32px !important; &.fallback { color: $insensitive_fg_color; background-color: $bg_color; border-radius: 2px; icon-size: 16px !important; padding: 8px; border: 1px solid $borders_color; } } // //Activities Ripples // .ripple-box { width: 52px; height: 52px; background-image: url("common-assets/misc/corner-ripple-ltr.svg"); background-size: contain; &:rtl { background-image: url("common-assets/misc/corner-ripple-rtl.svg"); } } // not really top bar only .popup-menu-arrow { icon-size: 16px; } .popup-menu-icon { icon-size: 16px; } // //Rubberband // .select-area-rubberband { background-color: transparentize($selected_bg_color, 0.7); border: 1px solid $selected_bg_color; } // //Close buttons // .window-close { background-image: url("common-assets/misc/close.svg"); background-size: 26px; height: 26px; width: 26px; border: 0px; box-shadow: none; background-color: transparent; color: transparent; -shell-close-overlap: 12px; &:hover { background-image: url("common-assets/misc/close-hover.svg"); } &:active { background-image: url("common-assets/misc/close-active.svg"); } } // // Network Dialogs // .nm-dialog { max-height: 34em; min-height: 31em; min-width: 32em; &-content { spacing: 20px; padding: 10px; } &-header-hbox { spacing: 10px; } &-airplane-box { spacing: 12px; } &-airplane-headline { @include fontsize($font-size * 1.1); font-weight: bold; text-align: center; } &-airplane-text { color: $fg_color; } &-header-icon { icon-size: 32px; } &-scroll-view { border: 1px solid $borders_color; border-radius: 2px; background-color: $base_color; } &-header { font-weight: bold; @include fontsize($font-size * 1.2); } &-item { @include fontsize($font-size); border-bottom: 0px solid; padding: 12px; spacing: 0px; &:selected { background-color: $selected_bg_color; color: $selected_fg_color; } } &-icons { spacing: .5em; } &-icon { icon-size: 16px; } } .no-networks-label { color: $insensitive_fg_color; } .no-networks-box { spacing: 12px; } // // Overview // #overview { spacing: 24px; } .overview-controls { padding-bottom: 32px; } .window-picker { //container around window thumbnails -horizontal-spacing: 32px; -vertical-spacing: 32px; padding-left: 32px; padding-right: 32px; padding-bottom: 48px; &.external-monitor { padding: 32px; } } .window-clone-border { border: 3px solid transparentize($selected_bg_color, 0.2); border-radius: 4px; box-shadow: inset 0px 0px 0px 1px transparentize($selected_bg_color, 1); } .window-caption, .window-caption:hover { spacing: 25px; color: $selected_fg_color; background-color: $selected_bg_color; border-radius: 2px; padding: 4px 12px; } // // Search Entry // .search-entry { width: 320px; padding: 7px 9px; border-radius: 20px; border: 1px solid transparentize(black, 0.75); background-color: transparentize($entry_bg, 0.1); &:focus { padding: 7px 9px; } .search-entry-icon { icon-size: 16px; padding: 0 4px; color: $fg_color; } &:hover, &:focus { color: $selected_fg_color; caret-color: $selected_fg_color; background-color: $selected_bg_color; selection-background-color: $selected_fg_color; selected-color: $selected_bg_color; .search-entry-icon { color: $selected_fg_color; } } } // // Search Results // #searchResultsBin { max-width: 1000px; } #searchResultsContent { max-width: 1000px; padding-left: 20px; padding-right: 20px; spacing: 16px; } // This should be equal to #searchResultsContent spacing .search-section { spacing: 16px; } // This is the space between the provider icon and the results container .search-section-content { spacing: 32px; } // "no results" .search-statustext { @extend %status_text; } .list-search-results { spacing: 3px; } .search-section-separator { background-color: transparentize(white, 0.8); height: 1px; .search-section:last-child & { background-color: transparent; } } .list-search-result-content { spacing: 30px; padding: 1px; } .list-search-result-title { font-size: 1.5em; spacing: 12px; color: $_shell_fg_color; } .list-search-result-description { color: darken($_shell_fg_color, 20%); } .list-search-provider-details { width: 150px; color: darken($_shell_fg_color, 12%); margin-top: 0.24em; } .list-search-provider-content { spacing: 20px; } .search-provider-icon { padding: 15px; } // // Dash // .app-menu, .app-well-menu { max-width: 27.25em; } #dash { @include fontsize($font-size); color: $osd_fg_color; background-color: $dark_sidebar_bg; border: 1px solid rgba(0,0,0,0.4); border-left: 0px; padding: 4px 0; border-radius: 0 3px 3px 0; &:rtl { border-radius: 3px 0 0 3px; } .right &, &:rtl { border-left: 1px; border-right: 0px; padding: 4px 0; } .top &, .bottom & { padding: 0; } .placeholder { background-image: url("common-assets/dash/dash-placeholder.svg"); background-size: contain; height: 24px; } .empty-dash-drop-target { width: 24px; height: 24px; } } .dash-item-container > StWidget { &, &:rtl, .right & { padding: 4px 8px; } .top &, .bottom & { padding: 6px; } } //osd tooltip .dash-label { border-radius: 3px; padding: 4px 12px; color: $_shell_fg_color; background-color: transparentize(black, 0.3); text-align: center; -x-offset: 3px; .bottom &, .top & { -y-offset: 3px; -x-offset: 0; } } // Dash Buttons #dash .app-well-app { &:hover .overview-icon, .right &:hover .overview-icon, .bottom &:hover .overview-icon, .top &:hover .overview-icon { background-color: $selected_bg_color; } &:active .overview-icon, .right &:active .overview-icon, .bottom &:active .overview-icon, .top &:active .overview-icon { box-shadow: none; background-color: darken($selected_bg_color, 10%); } &-running-dot { width: 11px; height: 2px; margin-bottom: 2px; background-color: $selected_bg_color; } } #dashtodockContainer { .app-well-app-running-dot { background: none; width: 28px; height: 4px; } // Add missing 1px margin for finer .show-apps-icon alignment // via margin property instead to keep 1px smaller .show-apps-icon size // like standard #dash styling. Better than 1px transparent border. .show-apps .overview-icon { margin: 1px; } @each $var in 1, 2, 3, 4 { .running#{$var} .app-well-app-running-dot { background-image: url("common-assets/dash/running#{$var}.svg"); } } } .show-apps { .overview-icon { background-color: transparentize(black, 0.5); border-radius: 2px; padding: 6px; border: 0px; transition-duration: 0ms; text-align: center; } &:hover .overview-icon, &:focus .overview-icon, &:selected .overview-icon { background-color: transparentize(black, 0.3); color: $selected_bg_color; transition-duration: 0ms; border-image: none; background-image: none; } &:active .overview-icon, &:active .show-apps-icon, &:checked .overview-icon, &:checked .show-apps-icon { color: $selected_fg_color; background-color: $selected_bg_color; box-shadow: none; transition-duration: 0ms; } } // // App Vault/Grid // .icon-grid { spacing: 30px; -shell-grid-horizontal-item-size: 136px; -shell-grid-vertical-item-size: 136px; .overview-icon { icon-size: 96px; } } .system-action-icon { background-color: $selected_bg_color; color: $selected_fg_color; border-radius: 99px; icon-size: 48px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } //.app-display { spacing: 20px; } //favorties | all toggle container .app-view-controls { padding-bottom: 32px; } //favorties | all toggle button .app-view-control { padding: 4px 32px; @include button(osd); &:hover { @include button(osd-hover); } &:checked { color: $selected_fg_color; background-color: $selected_bg_color; } &:first-child:ltr, &:last-child:rtl { border-radius: 2px 0 0 2px; border-right-width: 0; } &:last-child:ltr, &:first-child:rtl { border-radius: 0 2px 2px 0; border-left-width: 0;} } // // Icon Tile // .search-provider-icon, .list-search-result { @extend %icon_tile; &:active, &:checked { background-color: transparentize(darken($osd_bg_color,10%),.1); } &:focus, &:selected, &:hover { background-color: transparentize($osd_fg_color,.6); transition-duration: 200ms; } } .app-well-app, .app-well-app.app-folder, .grid-search-result { .overview-icon { @extend %icon_tile; } &:active .overview-icon, &:checked .overview-icon { background-color: transparentize(darken($osd_bg_color,10%),.1); box-shadow: inset 0 0 $selected_bg_color; } &:hover .overview-icon, &:focus .overview-icon, &:selected .overview-icon { background-color: transparentize($osd_fg_color,.6); transition-duration: 0ms; border-image: none; background-image: none; } } .app-well-app-running-dot { //running apps indicator width: 20px; height: 2px; margin-bottom: 4px; background-color: $selected_bg_color; } %icon_tile { color: $_shell_fg_color; border-radius: 2px; padding: 6px; border: 1px solid transparent; transition-duration: 0ms; text-align: center; } // // Collections // .app-well-app.app-folder { > .overview-icon { background-color: darken($dark_sidebar_bg, 8%); border: 1px solid transparentize(darken($dark_sidebar_bg, 25%), 0.5); } &:hover > .overview-icon { background-color: lighten($dark_sidebar_bg, 3%); } &:active > .overview-icon, &:checked > .overview-icon { color: $selected_fg_color; background-color: $selected_bg_color; box-shadow: none; } &:focus > .overview-icon { background-color: lighten($dark_sidebar_bg, 3%); } } .app-folder-popup { //expanded collection -arrow-border-radius: 2px; -arrow-background-color: darken($dark_sidebar_bg, 8%); -arrow-border-color: transparentize(darken($dark_sidebar_bg, 25%), 0.5); -arrow-border-width: 1px; -arrow-base: 24px; -arrow-rise: 11px; } .app-folder-popup-bin { padding: 5px; } .app-folder-icon { padding: 5px; spacing-rows: 5px; spacing-columns: 5px; } .page-indicator { padding: 15px 20px; .page-indicator-icon { width: 18px; height: 18px; border: none; background-color: transparent; background-image: url(common-assets/misc/page-indicator-inactive.svg); } &:hover .page-indicator-icon { background-image: url(common-assets/misc/page-indicator-hover.svg); } &:active .page-indicator-icon { margin: 0; background-color: transparent; background-image: url(common-assets/misc/page-indicator-active.svg); } &:checked .page-indicator-icon, &:checked:active .page-indicator-icon { background-color: transparent; background-image: url(common-assets/misc/page-indicator-checked.svg); } } .no-frequent-applications-label { @extend %status_text; } .app-well-app > .overview-icon.overview-icon-with-label, .grid-search-result .overview-icon.overview-icon-with-label { padding: 10px 8px 5px 8px; spacing: 4px; } // // Workspace pager // .workspace-thumbnails, .workspace-thumbnails-left { &, &:rtl { visible-width: 40px; //amount visible before hover spacing: 11px; padding: 12px; } } .workspace-thumbnails, .workspace-thumbnails-left:rtl { padding-right: 7px; border-image: url("common-assets/dash/dash-right.svg") 9 9 9 9; } .workspace-thumbnails:rtl, .workspace-thumbnails-left { padding-left: 7px; border-image: url("common-assets/dash/dash-left.svg") 9 9 9 9; } .workspace-thumbnails .placeholder { background-image: url("common-assets/dash/dash-placeholder.svg"); background-size: contain; height: 24px; } .workspace-thumbnail-indicator { border: 4px solid transparentize($selected_bg_color, 0.2); border-radius: 1px; padding: 1px; } //Some hacks I don't even .search-display > StBoxLayout, .all-apps, .frequent-apps > StBoxLayout { // horizontal padding to make sure scrollbars or dash don't overlap content padding: 0px 88px 10px 88px; } %status_text { @include fontsize($font-size * 2); font-weight: bold; color: $fg_color; } // // Notifications & Message Tray // .url-highlighter { link-color: $link_color; } // Banners .notification-banner, .notification-banner:hover, .notification-banner:focus { @include fontsize($font-size); width: 34em; margin: 10px; padding: 6px 4px; color: $fg_color; background-color: $panelmenu_bg_color; border: 1px solid $panelmenu_borders_color; box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2); .notification-icon { padding: 5px; } .notification-content { padding: 5px; spacing: 5px; } .secondary-icon { icon-size: 1.09em; } .notification-actions { background-color: transparent; padding: 2px 2px 0 2px; spacing: 3px; } .notification-button { padding: 4px 4px 5px; @extend %button; &:first-child, &:last-child { border-radius: 2px; } } } .summary-source-counter { @include fontsize($font-size); font-weight: bold; height: 16px; width: 16px; -shell-counter-overlap-x: 3px; -shell-counter-overlap-y: 3px; background-color: $selected_bg_color; color: $selected_fg_color; border: 2px solid #eeeeec; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); border-radius: 9px; } .secondary-icon { icon-size: 1.09em; } // Chat Bubbles .chat-body { spacing: 5px; } .chat-response { margin: 5px; } .chat-log-message { color: $fg_color; } .chat-new-group { padding-top: 1em; } .chat-received { padding-left: 4px; &:rtl { padding-left: 0px; padding-right: 4px; } } .chat-sent { padding-left: 18pt; color: $selected_bg_color; &:rtl { padding-left: 0; padding-right: 18pt; } } .chat-meta-message { padding-left: 4px; @include fontsize($font-size); font-weight: bold; color: transparentize($fg_color, 0.4); &:rtl { padding-left: 0; padding-right: 4px; } } .subscription-message { font-style: italic; } // Hotplug .hotplug-transient-box { spacing: 6px; padding: 2px 72px 2px 12px; } .hotplug-notification-item { padding: 2px 10px; @extend %button; &:focus { padding: 2px 10px; } } .hotplug-notification-item-icon { icon-size: 24px; padding: 2px 5px; } .hotplug-resident-box { spacing: 8px; } .hotplug-resident-mount { spacing: 8px; border-radius: 4px; &:hover { background-color: transparentize($bg_color,0.7); } } .hotplug-resident-mount-label { color: inherit; padding-left: 6px; } .hotplug-resident-mount-icon { icon-size: 24px; padding-left: 6px; } .hotplug-resident-eject-icon { icon-size: 16px; } .hotplug-resident-eject-button { padding: 7px; border-radius: 5px; color: pink; } // Magnifier .magnifier-zoom-region { border: 2px solid $selected_bg_color; &.full-screen { border-width: 0; } } // // On-Screen Keyboard // .word-suggestions { font-size: 13pt; spacing: 12px; min-height: 22pt; StButton { padding: 0.1em 0.5em; border-radius: 2px; color: #BAC3CF; &:hover, &:focus, &:active { background-color: #5294e2; color: #ffffff; } } } #keyboard { background-color: $osd_bg_color; border-width: 0; border-top-width: 1px; border-color: transparentize(black, 0.8); .page-indicator { padding: 4px 4px 8px; .page-indicator-icon { width: 18px; height: 18px; } } } .key-container { padding: 4px; spacing: 4px; } .keyboard-layout { spacing: 10px; padding: 10px; } .keyboard-row { spacing: 15px; } .keyboard-key { min-height: 2em; min-width: 2em; @include fontsize($font-size * 1.56); font-weight: bold; border-radius: 3px; @include button(osd); &:hover { @include button(osd-hover); } &:active, &:checked { @include button(osd-active); } &:grayed { @include button(osd-insensitive); } &.enter-key { background-image: url("common-assets/keyboard/key-enter.svg"); &:active, &:checked { background-image: url("common-assets/keyboard/key-enter-active.svg"); } } &.shift-key-lowercase { background-image: url("common-assets/keyboard/key-shift.svg"); } &.shift-key-uppercase { @include button(osd-active); background-image: url("common-assets/keyboard/key-shift-uppercase.svg"); } &.shift-key-uppercase:latched { @include button(osd-active); background-image: url("common-assets/keyboard/key-shift-latched-uppercase.svg"); } &.hide-key { background-image: url("common-assets/keyboard/key-hide.svg"); &:active, &:checked { background-image: url("common-assets/keyboard/key-hide-active.svg"); } } &.layout-key { background-image: url("common-assets/keyboard/key-layout.svg"); &:active, &:checked { background-image: url("common-assets/keyboard/key-layout-active.svg"); } } } .keyboard-subkeys { //long press on a key popup color: $osd_fg_color; padding: 5px; -arrow-border-radius: 2px; -arrow-background-color: $osd_bg_color; -arrow-border-width: 1px; -arrow-border-color: transparentize(black, 0.6);; -arrow-base: 20px; -arrow-rise: 10px; -boxpointer-gap: 5px; } .emoji-panel .keyboard-key:latched { @include button(osd-active); } // // IBus Candidate Popup // .candidate-popup-content { padding: 0.5em; spacing: 0.3em; color: $osd_fg_color; @include fontsize($font-size * 1.15); } .candidate-index { padding: 0 0.5em 0 0; color: lighten($osd_fg_color, 10%); } .candidate-box { padding: 0.3em 0.5em 0.3em 0.5em; border-radius: 2px; color: $osd_fg_color; &:selected,&:hover { background-color: $selected_bg_color; color: $selected_fg_color; } } .candidate-page-button-box { height: 2em; .vertical & { padding-top: 0.5em; } .horizontal & { padding-left: 0.5em; } } .candidate-page-button { padding: 4px; } .candidate-page-button-previous { border-radius: 2px 0px 0px 2px; border-right-width: 0; } .candidate-page-button-next { border-radius: 0px 2px 2px 0px; } .candidate-page-button-icon { icon-size: 1em; } // // Auth Dialogs & Screen Shield // .user-icon { background-size: contain; border: 0px solid transparent; color: $fg_color; border-radius: 99px; &:hover { border-color: transparent; color: lighten($osd_fg_color,30%); } } // // Login Dialog // .login-dialog-banner-view { padding-top: 24px; max-width: 23em; } .login-dialog { //reset border: none; background-color: transparent; .modal-dialog-button-box { spacing: 3px; } .modal-dialog-button { padding: 3px 18px; &:default { @include button(normal); &:hover,&:focus { @include button(hover); } &:active { @include button(active); } &:insensitive { @include button(insensitive); } } } } .login-dialog-logo-bin { padding: 24px 0px; } .login-dialog-banner { color: darken($osd_fg_color,10%); } .login-dialog-button-box { spacing: 5px; } .login-dialog-message-warning { color: $warning_color; } .login-dialog-message-hint { padding-top: 0; padding-bottom: 20px; } .login-dialog-user-selection-box { padding: 100px 0px; .login-dialog-not-listed-label { padding-left: 2px; .login-dialog-not-listed-button:focus &, .login-dialog-not-listed-button:hover & { color: $osd_fg_color; } } } .login-dialog-not-listed-label { @include fontsize($font-size * 0.9); font-weight: bold; color: darken($osd_fg_color,30%); padding-top: 1em; } .login-dialog-user-list-view { -st-vfade-offset: 1em; } .login-dialog-user-list { spacing: 12px; padding: .2em; width: 23em; &:expanded .login-dialog-user-list-item:focus { background-color: $selected_bg_color; color: $selected_fg_color; } &:expanded .login-dialog-user-list-item:logged-in { border-right: 2px solid $selected_bg_color; } } .login-dialog-user-list-item { border-radius: 5px; padding: .2em; color: darken($osd_fg_color,30%); &:ltr .user-widget { padding-right: 1em; } &:rtl .user-widget { padding-left: 1em; } &:hover { background-color: $selected_bg_color; color: $selected_fg_color; } .login-dialog-timed-login-indicator { height: 2px; margin: 2px 0 0 0; background-color: $osd_fg_color; } &:focus .login-dialog-timed-login-indicator { background-color: $selected_fg_color; } } .login-dialog-username, .user-widget-label { color: $osd_fg_color; @include fontsize($font-size * 1.2); font-weight: bold; text-align: left; padding-left: 15px; } .user-widget-label { &:ltr { padding-left: 18px; } &:rtl { padding-right: 18px; } } .login-dialog-prompt-layout { padding-top: 24px; padding-bottom: 12px; spacing: 8px; width: 23em; } .login-dialog-prompt-label { color: darken($osd_fg_color, 20%); @include fontsize($font-size * 1.1); padding-top: 1em; } .login-dialog-session-list-button StIcon { icon-size: 1.25em; } .login-dialog-session-list-button { color: darken($osd_fg_color,30%); &:hover,&:focus { color: $osd_fg_color; } &:active { color: darken($osd_fg_color, 50%); } } // // Screen Shield // .screen-shield-arrows { padding-bottom: 3em; } .screen-shield-arrows Gjs_Arrow { color: white; width: 80px; height: 48px; -arrow-thickness: 12px; -arrow-shadow: 0 1px 1px rgba(0,0,0,0.4); } .screen-shield-clock { color: white; text-shadow: 0px 1px 2px rgba(0,0,0,0.6); font-weight: bold; text-align: center; padding-bottom: 1.5em; } .screen-shield-clock-time { @include fontsize($font-size * 8); text-shadow: 0px 2px 2px rgba(0,0,0,0.4); font-feature-settings: "tnum"; } .screen-shield-clock-date { @include fontsize($font-size * 3); } .screen-shield-notifications-container { spacing: 6px; width: 30em; background-color: transparent; max-height: 500px; .summary-notification-stack-scrollview { padding-top: 0; padding-bottom: 0; } .notification, .screen-shield-notification-source { padding: 12px 6px; border: 1px solid $_bubble_borders_color; background-color: transparentize($osd_bg_color,0.5); color: $_bubble_fg_color; border-radius: 4px; } .notification { margin-right: 15px; } //compensate for space allocated to the scrollbar } .screen-shield-notification-label { font-weight: bold; padding: 0px 0px 0px 12px; } .screen-shield-notification-count-text { padding: 0px 0px 0px 12px; } #panel.lock-screen { background-color: transparentize($_bubble_bg_color, 0.5); } .screen-shield-background { //just the shadow, really background: black; box-shadow: 0px 2px 4px transparentize(black,0.6); } #lockDialogGroup { background: $bg_color url("common-assets/misc/noise-texture.png"); background-repeat: repeat; } #screenShieldNotifications { StButton#vhandle, StButton#hhandle { background-color: transparentize($bg_color,0.7); &:hover, &:focus { background-color: transparentize($bg_color,0.5); } &:active { background-color: transparentize($selected_bg_color,0.5); } } } // // Looking Glass // #LookingGlassDialog { margin-top: 4px; spacing: 4px; padding: 8px 8px 10px 8px; background-color: $switcher_bg_color; border: 1px solid $switcher_borders_color; border-radius: 2px; box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2); color: $osd_fg_color; & > #Toolbar { padding: 3px; border: none; background-color: transparent; border-radius: 0px; } .labels { spacing: 4px; } .notebook-tab { -natural-hpadding: 12px; -minimum-hpadding: 6px; font-weight: bold; color: $osd_fg_color; transition-duration: 100ms; padding-left: .3em; padding-right: .3em; &:hover { color: $_shell_fg_color; text-shadow: black 0px 2px 2px; } &:selected { border-bottom-width: 0px; color: $selected_bg_color; text-shadow: black 0px 2px 2px; } } StBoxLayout#EvalBox { padding: 4px; spacing: 4px; } StBoxLayout#ResultsArea { spacing: 4px; } } .lg-dialog { StEntry { caret-color: $selected_fg_color; selection-background-color: $selected_bg_color; selected-color: $selected_fg_color; @include entry(osd); &:focus { @include entry(osd-focus); selection-background-color: $selected_fg_color; selected-color: $selected_bg_color; } } .shell-link { color: $link_color; &:hover { color: lighten($link_color,10%); } } } .lg-completions-text { @include fontsize($font-size * 0.9); font-style: italic; } .lg-obj-inspector-title { spacing: 4px; } .lg-obj-inspector-button { border: 1px solid gray; padding: 4px; border-radius: 4px; &:hover { border: 1px solid #ffffff; } } #lookingGlassExtensions { padding: 4px; } .lg-extensions-list { padding: 4px; spacing: 6px; } .lg-extension { border: 1px solid $osd_borders_color; border-radius: 2px; background-color: $osd_bg_color; padding: 4px; } .lg-extension-name { font-weight: bold; } .lg-extension-meta { spacing: 6px; } #LookingGlassPropertyInspector { background: transparentize(black, 0.3); border: 1px solid grey; border-radius: 2px; padding: 6px; } ================================================ FILE: common/gnome-shell/3.32/sass/_drawing.scss ================================================ // Drawing mixins // generic drawing of more complex things // provide font size in rem, with px fallback @mixin fontsize($size: 24, $base: 16) { font-size: round($size) + pt; //font-size: ($size / $base) * 1rem; } // Entries @mixin entry($t, $dark:false) { // // Entries drawing function // //@extend %reset_style; @if $t==normal { color: $text_color; background-color: $entry_bg; border: 1px solid $entry_border; box-shadow: inset 0 2px 4px transparentize($entry_bg, 0.95); } @if $t==focus { color: $fg_color; background-color: $entry_bg; border: 1px solid $selected_bg_color; box-shadow: inset 0 2px 4px transparentize($entry_bg, 0.95); } @if $t==insensitive { color: $insensitive_fg_color; background-color: mix($entry_bg, $bg_color, 55%); border: 1px solid mix($entry_border, $bg_color, 55%); box-shadow: inset 0 2px 4px transparentize(mix($entry_bg, $bg_color, 55%), 0.95); } @if $t==osd { color: $osd_fg_color; background-color: $osd_entry_bg; border: 1px solid $osd_entry_border; box-shadow: inset 0 2px 4px transparentize(black, 0.95); } @if $t==osd-focus { color: $selected_fg_color; background-color: $selected_bg_color; border: 1px solid $osd_entry_border; box-shadow: inset 0 2px 4px transparentize(black, 0.95); } @if $t==osd-insensitive { color: transparentize($osd_fg_color, 0.45); background-color: transparentize($osd_entry_bg, 0.15); border: 1px solid $osd_entry_border; box-shadow: inset 0 2px 4px transparentize(black, 0.95); } } // Buttons @mixin button($t) { // // Button drawing function // //@extend %reset_style; text-shadow: 0 1px transparentize($base_color, 1); @if $t==normal { // // normal button // color: $fg_color; background-color: $button_bg; border: 1px solid $button_border; box-shadow: inset 0 1px transparentize($button_bg, 0.95); } @else if $t==focus { // // focused button // color: $fg_color; background-color: $button_bg; border: 1px solid $selected_bg_color; box-shadow: inset 0 1px transparentize($button_bg, 0.95); } @else if $t==focus-hover { // // focused button // color: $fg_color; background-color: $button_bg; border: 1px solid $selected_bg_color; box-shadow: inset 0 1px transparentize($button_bg, 0.95); } @else if $t==hover { // // hovered button // color: $fg_color; background-color: lighten($button_bg, 5%); border: 1px solid $button_border; box-shadow: inset 0 1px transparentize(lighten($button_bg, 5%), 0.95); } @else if $t==active { // // pushed button // color: $selected_fg_color; background-color: $selected_bg_color; border: 1px solid if($variant=='light', $selected_bg_color, $button_border); box-shadow: inset 0 1px transparentize($selected_bg_color, 0.95); } @else if $t==insensitive { // // insensitive button // color: $insensitive_fg_color; border: 1px solid transparentize($button_border, 0.45); background-color: transparentize($button_bg, 0.45); box-shadow: inset 0 1px transparentize($button_bg, 0.95); } @else if $t==osd { // // normal osd button // color: $osd_fg_color; border: 1px solid $osd_button_border; background-color: $osd_button_bg; box-shadow: inset 0 1px transparentize(black, 0.95); } @else if $t==osd-hover { // // active osd button // color: $osd_fg_color; border: 1px solid $osd_button_border; background-color: opacify(lighten($osd_button_bg, 7%), 0.1); box-shadow: inset 0 1px transparentize(black, 0.95); } @else if $t==osd-active { // // active osd button // color: $selected_fg_color; border: 1px solid $osd_button_border; background-color: $selected_bg_color; box-shadow: inset 0 1px transparentize($selected_bg_color, 0.95); } @else if $t==osd-insensitive { // // insensitive osd button // color: $osd_insensitive_fg_color; border: 1px solid $osd_button_border; background-color: transparentize($osd_button_bg, 0.15); box-shadow: inset 0 1px transparentize(black, 0.95); } } ================================================ FILE: common/gnome-shell/3.32/sass/gnome-shell-dark.scss ================================================ $variant: 'dark'; $transparency: 'true'; $darker: 'false'; @import "_colors"; //use gtk colors @import "_drawing"; @import "_common"; ================================================ FILE: common/gnome-shell/3.32/sass/gnome-shell.scss ================================================ $variant: 'light'; $transparency: 'true'; $darker: 'false'; @import "_colors"; //use gtk colors @import "_drawing"; @import "_common"; ================================================ FILE: common/gtk-2.0/Makefile.am ================================================ VPATH = targets := $(shell cat $(srcdir)/assets.txt) light := $(patsubst %,light/assets/%.png,$(targets)) dark := $(patsubst %,dark/assets/%.png,$(targets)) mbt_entry := $(filter entry-%toolbar,$(targets)) mbt_menubar := $(filter menubar%,$(targets)) mbt_button := $(filter button%,$(targets)) mbt_light := \ $(srcdir)/menubar-toolbar/menubar-toolbar.rc \ $(patsubst %,menubar-toolbar/%.png,$(mbt_entry) $(mbt_menubar)) mbt_dark := \ $(srcdir)/menubar-toolbar/menubar-toolbar-dark.rc \ $(patsubst %,menubar-toolbar/%-dark.png,$(mbt_entry) $(mbt_menubar)) \ $(patsubst %,menubar-toolbar/%.png,$(mbt_button)) rc := apps main panel xfce-notify srcrc := $(patsubst %,$(srcdir)/%.rc,$(rc)) light: $(light) dark: $(dark) mbt_light: $(mbt_light) mbt_dark: $(mbt_dark) light/assets dark/assets menubar-toolbar: $(MKDIR_P) "$@"/ clean: rm -rf light/assets/ dark/assets/ menubar-toolbar/*.png $(light): $(srcdir)/light/assets.svg | light/assets $(dark): $(srcdir)/dark/assets.svg | dark/assets if RENDERSVG $(light) $(dark): $(RENDERSVG) --export-id "$(basename $(notdir $@))" --dpi $(if $(filter $(OPTION_GTK2_HIDPI),true),192,96) --zoom $(if $(filter $(OPTION_GTK2_HIDPI),true),2,1) "$<" "$@" if OPTIPNG $(OPTIPNG) -o7 --quiet "$@" endif else $(light) $(dark): $(INKSCAPE) --export-id-only --export-png="$@" --export-id="$(basename $(notdir $@))" --export-dpi=$(if $(filter $(OPTION_GTK2_HIDPI),true),192,96) "$<" >/dev/null if OPTIPNG $(OPTIPNG) -o7 --quiet "$@" endif endif menubar-toolbar/%-dark.png: dark/assets/%.png | menubar-toolbar cp "$<" "$@" menubar-toolbar/%.png: light/assets/%.png | menubar-toolbar cp "$<" "$@" .PHONY: light dark mbt_light mbt_dark clean if ENABLE_LIGHT gtk2themedir = $(themedir)/gtk-2.0 gtk2themeassetsdir = $(gtk2themedir)/assets gtk2theme_DATA = $(srcrc) $(srcdir)/light/gtkrc gtk2themeassets_DATA = $(light) nobase_gtk2theme_DATA = $(mbt_light) endif if ENABLE_DARKER gtk2themedarkerdir = $(themedarkerdir)/gtk-2.0 gtk2themedarkerassetsdir = $(gtk2themedarkerdir)/assets gtk2themedarker_DATA = $(srcrc) $(srcdir)/darker/gtkrc gtk2themedarkerassets_DATA = $(light) nobase_gtk2themedarker_DATA = $(mbt_dark) endif if ENABLE_DARK gtk2themedarkdir = $(themedarkdir)/gtk-2.0 gtk2themedarkassetsdir = $(gtk2themedarkdir)/assets gtk2themedark_DATA = $(srcrc) $(srcdir)/dark/gtkrc gtk2themedarkassets_DATA = $(dark) nobase_gtk2themedark_DATA = $(mbt_dark) endif EXTRA_DIST = \ assets.txt \ $(srcrc) \ $(patsubst %,%/assets.svg,light dark) \ $(patsubst %,%/gtkrc,light darker dark) \ $(patsubst %,menubar-toolbar/menubar-toolbar%,.rc -dark.rc) ================================================ FILE: common/gtk-2.0/apps.rc ================================================ # # Thunar # style "thunar-handle" { GtkPaned::handle-size = 2 } style "dark-sidebar" { GtkTreeView::odd_row_color = @dark_sidebar_bg GtkTreeView::even_row_color = @dark_sidebar_bg base[NORMAL] = @dark_sidebar_bg base[INSENSITIVE] = @dark_sidebar_bg text[NORMAL] = "#BAC3CF" text[ACTIVE] = @selected_fg_color text[SELECTED] = @selected_fg_color } style "thunar-frame" { xthickness = 0 ythickness = 0 } widget_class "*ThunarWindow*." style "thunar-frame" widget_class "*ThunarShortcutsView*" style "dark-sidebar" widget_class "*ThunarTreeView*" style "dark-sidebar" widget_class "*ThunarWindow*." style "thunar-handle" # # Workaround for colored entries # style "entry_border" { xthickness = 7 ythickness = 5 engine "pixmap" { image { function = SHADOW state = NORMAL detail = "entry" file = "assets/entry-border-bg.png" border = {6, 6, 6, 6} stretch = TRUE } image { function = SHADOW state = ACTIVE detail = "entry" file = "assets/entry-border-active-bg.png" border = {6, 6, 6, 6} stretch = TRUE } image { function = FLAT_BOX state = ACTIVE detail = "entry_bg" file = "assets/null.png" } image { function = FLAT_BOX state = INSENSITIVE detail = "entry_bg" file = "assets/null.png" } image { function = FLAT_BOX detail = "entry_bg" file = "assets/null.png" } } } style "combobox_entry_border" = "combobox_entry" { engine "pixmap" { image { function = SHADOW detail = "entry" state = NORMAL shadow = IN file = "assets/combo-entry-border.png" border = { 4, 4, 12, 12 } stretch = TRUE direction = LTR } image { function = SHADOW detail = "entry" state = ACTIVE file = "assets/combo-entry-border-focus.png" border = { 4, 4, 12, 12 } stretch = TRUE direction = LTR } image { function = SHADOW detail = "entry" state = NORMAL shadow = IN file = "assets/combo-entry-border-rtl.png" border = { 4, 4, 12, 12 } stretch = TRUE direction = RTL } image { function = SHADOW detail = "entry" state = ACTIVE file = "assets/combo-entry-border-focus-rtl.png" border = { 4, 4, 12, 12 } stretch = TRUE direction = RTL } image { function = FLAT_BOX state = INSENSITIVE detail = "entry_bg" file = "assets/null.png" } image { function = FLAT_BOX detail = "entry_bg" file = "assets/null.png" } } } # Mousepad search entry widget_class "*MousepadSearchBar*." style "entry_border" # Mousepad find and replace widget_class "*MousepadReplaceDialog*." style "entry_border" # Thunar bulk rename widget_class "*ThunarRenamerDialog*." style "entry_border" # Hexchat input box class "SexySpellEntry" style:highest "entry_border" # Geany search entries widget "*GeanyToolbar.*geany-search-entry-no-match*" style "entry_border" widget "*GeanyToolbar.*GtkEntry*" style "entry_border" widget "GeanyDialogSearch.*GtkComboBoxEntry*.*geany-search-entry-no-match*" style "combobox_entry_border" ================================================ FILE: common/gtk-2.0/assets.txt ================================================ arrow-down arrow-down-insens arrow-down-prelight arrow-left arrow-left-insens arrow-left-prelight arrow-right arrow-right-insens arrow-right-prelight arrow-up arrow-up-insens arrow-up-prelight arrow-down-small arrow-down-small-insens arrow-down-small-prelight arrow-up-small arrow-up-small-insens arrow-up-small-prelight menu-arrow menu-arrow-prelight button button-hover button-active button-insensitive checkbox-checked checkbox-checked-insensitive checkbox-unchecked checkbox-unchecked-insensitive radio-checked radio-checked-insensitive radio-unchecked radio-unchecked-insensitive menu-checkbox-checked menu-checkbox-checked-selected menu-checkbox-checked-insensitive menu-checkbox-unchecked menu-checkbox-unchecked-selected menu-checkbox-unchecked-insensitive menu-radio-checked menu-radio-checked-selected menu-radio-checked-insensitive menu-radio-unchecked menu-radio-unchecked-selected menu-radio-unchecked-insensitive entry-background entry-background-disabled entry-border-bg entry-border-active-bg entry-bg entry-active-bg entry-disabled-bg entry-notebook entry-active-notebook entry-disabled-notebook entry-toolbar entry-active-toolbar entry-disabled-toolbar combo-entry combo-entry-border combo-entry-focus combo-entry-border-focus combo-entry-insensitive combo-entry-notebook combo-entry-focus-notebook combo-entry-insensitive-notebook combo-entry-rtl combo-entry-border-rtl combo-entry-focus-rtl combo-entry-border-focus-rtl combo-entry-insensitive-rtl combo-entry-notebook-rtl combo-entry-focus-notebook-rtl combo-entry-insensitive-notebook-rtl combo-entry-button combo-entry-button-insensitive combo-entry-button-active combo-entry-button-rtl combo-entry-button-insensitive-rtl combo-entry-button-active-rtl down-background up-background down-background-disable up-background-disable down-background-rtl up-background-rtl down-background-disable-rtl up-background-disable-rtl plus minus handle-h handle-v line-h line-v menuitem menubar_button null tree_header progressbar progressbar_v trough-progressbar trough-progressbar_v slider slider-insensitive slider-prelight trough-horizontal trough-vertical trough-horizontal-active trough-vertical-active slider-horiz slider-horiz-active slider-horiz-insens slider-horiz-prelight slider-vert slider-vert-active slider-vert-insens slider-vert-prelight trough-scrollbar-horiz trough-scrollbar-vert frame frame-gap-end frame-gap-start notebook notebook-gap-horiz notebook-gap-vert tab-bottom-active tab-top-active tab-left-active tab-right-active inline-toolbar toolbar menubar focus-line ================================================ FILE: common/gtk-2.0/dark/gtkrc ================================================ gtk-color-scheme = "base_color: #404552" gtk-color-scheme = "text_color: #d3dae3" gtk-color-scheme = "bg_color: #383c4a" gtk-color-scheme = "fg_color: #d3dae3" gtk-color-scheme = "tooltip_bg_color: #4B5162" gtk-color-scheme = "tooltip_fg_color: #ffffff" gtk-color-scheme = "selected_bg_color: #5294e2" gtk-color-scheme = "selected_fg_color: #ffffff" gtk-color-scheme = "insensitive_bg_color: #3e4350" gtk-color-scheme = "insensitive_fg_color: #7c818c" gtk-color-scheme = "notebook_bg: #404552" gtk-color-scheme = "dark_sidebar_bg: #353945" gtk-color-scheme = "link_color: #5294e2" gtk-color-scheme = "menu_bg: #383c4a" gtk-icon-sizes = "gtk-button=16,16" # This makes button icons smaller. gtk-auto-mnemonics = 1 gtk-primary-button-warps-slider = 1 include "main.rc" include "apps.rc" include "panel.rc" include "xfce-notify.rc" include "menubar-toolbar/menubar-toolbar-dark.rc" ================================================ FILE: common/gtk-2.0/darker/gtkrc ================================================ gtk-color-scheme = "base_color: #ffffff" gtk-color-scheme = "text_color: #3b3e45" gtk-color-scheme = "bg_color: #f5f6f7" gtk-color-scheme = "fg_color: #3b3e45" gtk-color-scheme = "tooltip_bg_color: #4B5162" gtk-color-scheme = "tooltip_fg_color: #ffffff" gtk-color-scheme = "selected_bg_color: #5294e2" gtk-color-scheme = "selected_fg_color: #ffffff" gtk-color-scheme = "insensitive_bg_color: #fbfcfc" gtk-color-scheme = "insensitive_fg_color: #a9acb2" gtk-color-scheme = "notebook_bg: #ffffff" gtk-color-scheme = "dark_sidebar_bg: #353945" gtk-color-scheme = "link_color: #5294e2" gtk-color-scheme = "menu_bg: #ffffff" gtk-icon-sizes = "gtk-button=16,16" # This makes button icons smaller. gtk-auto-mnemonics = 1 gtk-primary-button-warps-slider = 1 include "main.rc" include "apps.rc" include "panel.rc" include "xfce-notify.rc" include "menubar-toolbar/menubar-toolbar-dark.rc" ================================================ FILE: common/gtk-2.0/light/gtkrc ================================================ gtk-color-scheme = "base_color: #ffffff" gtk-color-scheme = "text_color: #3b3e45" gtk-color-scheme = "bg_color: #f5f6f7" gtk-color-scheme = "fg_color: #3b3e45" gtk-color-scheme = "tooltip_bg_color: #4B5162" gtk-color-scheme = "tooltip_fg_color: #ffffff" gtk-color-scheme = "selected_bg_color: #5294e2" gtk-color-scheme = "selected_fg_color: #ffffff" gtk-color-scheme = "insensitive_bg_color: #fbfcfc" gtk-color-scheme = "insensitive_fg_color: #a9acb2" gtk-color-scheme = "notebook_bg: #ffffff" gtk-color-scheme = "dark_sidebar_bg: #353945" gtk-color-scheme = "link_color: #5294e2" gtk-color-scheme = "menu_bg: #ffffff" gtk-icon-sizes = "gtk-button=16,16" # This makes button icons smaller. gtk-auto-mnemonics = 1 gtk-primary-button-warps-slider = 1 include "main.rc" include "apps.rc" include "panel.rc" include "xfce-notify.rc" include "menubar-toolbar/menubar-toolbar.rc" ================================================ FILE: common/gtk-2.0/main.rc ================================================ style "default" { xthickness = 1 ythickness = 1 # Style Properties GtkWidget::focus-line-width = 1 GtkMenuBar::window-dragging = 1 GtkToolbar::window-dragging = 1 GtkToolbar::internal-padding = 4 GtkToolButton::icon-spacing = 4 GtkWidget::tooltip-radius = 2 GtkWidget::tooltip-alpha = 235 GtkWidget::new-tooltip-style = 1 #for compatibility GtkSeparatorMenuItem::horizontal-padding = 3 GtkSeparatorMenuItem::wide-separators = 1 GtkSeparatorMenuItem::separator-height = 1 GtkButton::child-displacement-y = 0 GtkButton::default-border = { 0, 0, 0, 0 } GtkButton::default-outside_border = { 0, 0, 0, 0 } GtkEntry::state-hint = 1 GtkScrollbar::trough-border = 0 GtkRange::trough-border = 0 GtkRange::slider-width = 13 GtkRange::stepper-size = 0 GtkScrollbar::activate-slider = 1 GtkScrollbar::has-backward-stepper = 0 GtkScrollbar::has-forward-stepper = 0 GtkScrollbar::min-slider-length = 32 GtkScrolledWindow::scrollbar-spacing = 0 GtkScrolledWindow::scrollbars-within-bevel = 1 GtkScale::slider_length = 15 GtkScale::slider_width = 15 GtkScale::trough-side-details = 1 GtkProgressBar::min-horizontal-bar-height = 8 GtkProgressBar::min-vertical-bar-width = 8 GtkStatusbar::shadow_type = GTK_SHADOW_NONE GtkSpinButton::shadow_type = GTK_SHADOW_NONE GtkMenuBar::shadow-type = GTK_SHADOW_NONE GtkToolbar::shadow-type = GTK_SHADOW_NONE GtkMenuBar::internal-padding = 0 #( every window is misaligned for the sake of menus ): GtkMenu::horizontal-padding = 0 GtkMenu::vertical-padding = 0 GtkCheckButton::indicator_spacing = 3 GtkOptionMenu::indicator_spacing = { 8, 2, 0, 0 } GtkTreeView::row_ending_details = 0 GtkTreeView::expander-size = 11 GtkTreeView::vertical-separator = 4 GtkTreeView::horizontal-separator = 4 GtkTreeView::allow-rules = 1 GtkTreeView::odd_row_color = shade(0.98, @base_color) GtkExpander::expander-size = 11 GnomeHRef::link_color = @link_color GtkHTML::link-color = @link_color GtkIMHtmlr::hyperlink-color = @link_color GtkIMHtml::hyperlink-color = @link_color GtkWidget::link-color = @link_color GtkWidget::visited-link-color = @text_color # Colors bg[NORMAL] = @bg_color bg[PRELIGHT] = shade (1.02, @bg_color) bg[SELECTED] = @selected_bg_color bg[INSENSITIVE] = @insensitive_bg_color bg[ACTIVE] = shade (0.9, @bg_color) fg[NORMAL] = @text_color fg[PRELIGHT] = @fg_color fg[SELECTED] = @selected_fg_color fg[INSENSITIVE] = @insensitive_fg_color fg[ACTIVE] = @fg_color text[NORMAL] = @text_color text[PRELIGHT] = @text_color text[SELECTED] = @selected_fg_color text[INSENSITIVE] = @insensitive_fg_color text[ACTIVE] = @selected_fg_color base[NORMAL] = @base_color base[PRELIGHT] = shade (0.95, @bg_color) base[SELECTED] = @selected_bg_color base[INSENSITIVE] = @bg_color base[ACTIVE] = shade (0.9, @selected_bg_color) # For succinctness, all reasonable pixmap options remain here engine "pixmap" { # Check Buttons image { function = CHECK recolorable = TRUE state = NORMAL shadow = OUT overlay_file = "assets/checkbox-unchecked.png" overlay_stretch = FALSE } image { function = CHECK recolorable = TRUE state = PRELIGHT shadow = OUT overlay_file = "assets/checkbox-unchecked.png" overlay_stretch = FALSE } image { function = CHECK recolorable = TRUE state = ACTIVE shadow = OUT overlay_file = "assets/checkbox-unchecked.png" overlay_stretch = FALSE } image { function = CHECK recolorable = TRUE state = SELECTED shadow = OUT overlay_file = "assets/checkbox-unchecked.png" overlay_stretch = FALSE } image { function = CHECK recolorable = TRUE state = INSENSITIVE shadow = OUT overlay_file = "assets/checkbox-unchecked-insensitive.png" overlay_stretch = FALSE } image { function = CHECK recolorable = TRUE state = NORMAL shadow = IN overlay_file = "assets/checkbox-checked.png" overlay_stretch = FALSE } image { function = CHECK recolorable = TRUE state = PRELIGHT shadow = IN overlay_file = "assets/checkbox-checked.png" overlay_stretch = FALSE } image { function = CHECK recolorable = TRUE state = ACTIVE shadow = IN overlay_file = "assets/checkbox-checked.png" overlay_stretch = FALSE } image { function = CHECK recolorable = TRUE state = SELECTED shadow = IN overlay_file = "assets/checkbox-checked.png" overlay_stretch = FALSE } image { function = CHECK recolorable = TRUE state = INSENSITIVE shadow = IN overlay_file = "assets/checkbox-checked-insensitive.png" overlay_stretch = FALSE } # Radio Buttons image { function = OPTION state = NORMAL shadow = OUT overlay_file = "assets/radio-unchecked.png" overlay_stretch = FALSE } image { function = OPTION state = PRELIGHT shadow = OUT overlay_file = "assets/radio-unchecked.png" overlay_stretch = FALSE } image { function = OPTION state = ACTIVE shadow = OUT overlay_file = "assets/radio-unchecked.png" overlay_stretch = FALSE } image { function = OPTION state = SELECTED shadow = OUT overlay_file = "assets/radio-unchecked.png" overlay_stretch = FALSE } image { function = OPTION state = INSENSITIVE shadow = OUT overlay_file = "assets/radio-unchecked-insensitive.png" overlay_stretch = FALSE } image { function = OPTION state = NORMAL shadow = IN overlay_file = "assets/radio-checked.png" overlay_stretch = FALSE } image { function = OPTION state = PRELIGHT shadow = IN overlay_file = "assets/radio-checked.png" overlay_stretch = FALSE } image { function = OPTION state = ACTIVE shadow = IN overlay_file = "assets/radio-checked.png" overlay_stretch = FALSE } image { function = OPTION state = SELECTED shadow = IN overlay_file = "assets/radio-checked.png" overlay_stretch = FALSE } image { function = OPTION state = INSENSITIVE shadow = IN overlay_file = "assets/radio-checked-insensitive.png" overlay_stretch = FALSE } # Arrows image { function = ARROW overlay_file = "assets/arrow-up.png" overlay_border = { 0, 0, 0, 0 } overlay_stretch = FALSE arrow_direction = UP } image { function = ARROW state = PRELIGHT overlay_file = "assets/arrow-up-prelight.png" overlay_border = { 0, 0, 0, 0 } overlay_stretch = FALSE arrow_direction = UP } image { function = ARROW state = ACTIVE overlay_file = "assets/arrow-up-prelight.png" overlay_border = { 0, 0, 0, 0 } overlay_stretch = FALSE arrow_direction = UP } image { function = ARROW state = INSENSITIVE overlay_file = "assets/arrow-up-insens.png" overlay_border = { 0, 0, 0, 0 } overlay_stretch = FALSE arrow_direction = UP } image { function = ARROW state = NORMAL overlay_file = "assets/arrow-down.png" overlay_border = { 0, 0, 0, 0 } overlay_stretch = FALSE arrow_direction = DOWN } image { function = ARROW state = PRELIGHT overlay_file = "assets/arrow-down-prelight.png" overlay_border = { 0, 0, 0, 0 } overlay_stretch = FALSE arrow_direction = DOWN } image { function = ARROW state = ACTIVE overlay_file = "assets/arrow-down-prelight.png" overlay_border = { 0, 0, 0, 0 } overlay_stretch = FALSE arrow_direction = DOWN } image { function = ARROW state = INSENSITIVE overlay_file = "assets/arrow-down-insens.png" overlay_border = { 0, 0, 0, 0 } overlay_stretch = FALSE arrow_direction = DOWN } image { function = ARROW overlay_file = "assets/arrow-left.png" overlay_border = { 0, 0, 0, 0 } overlay_stretch = FALSE arrow_direction = LEFT } image { function = ARROW state= PRELIGHT overlay_file = "assets/arrow-left-prelight.png" overlay_border = { 0, 0, 0, 0 } overlay_stretch = FALSE arrow_direction = LEFT } image { function = ARROW state = ACTIVE overlay_file = "assets/arrow-left-prelight.png" overlay_border = { 0, 0, 0, 0 } overlay_stretch = FALSE arrow_direction = LEFT } image { function = ARROW state = INSENSITIVE overlay_file = "assets/arrow-left-insens.png" overlay_border = { 0, 0, 0, 0 } overlay_stretch = FALSE arrow_direction = LEFT } image { function = ARROW overlay_file = "assets/arrow-right.png" overlay_border = { 0, 0, 0, 0 } overlay_stretch = FALSE arrow_direction = RIGHT } image { function = ARROW state = PRELIGHT overlay_file = "assets/arrow-right-prelight.png" overlay_border = { 0, 0, 0, 0 } overlay_stretch = FALSE arrow_direction = RIGHT } image { function = ARROW state = ACTIVE overlay_file = "assets/arrow-right-prelight.png" overlay_border = { 0, 0, 0, 0 } overlay_stretch = FALSE arrow_direction = RIGHT } image { function = ARROW state = INSENSITIVE overlay_file = "assets/arrow-right-insens.png" overlay_border = { 0, 0, 0, 0 } overlay_stretch = FALSE arrow_direction = RIGHT } # Option Menu Arrows image { function = TAB state = INSENSITIVE overlay_file = "assets/arrow-down-insens.png" overlay_stretch = FALSE } image { function = TAB state = NORMAL overlay_file = "assets/arrow-down.png" overlay_border = { 0, 0, 0, 0 } overlay_stretch = FALSE } image { function = TAB state = PRELIGHT overlay_file = "assets/arrow-down-prelight.png" overlay_border = { 0, 0, 0, 0 } overlay_stretch = FALSE } # Lines image { function = VLINE file = "assets/line-v.png" border = { 0, 0, 0, 0 } stretch = TRUE } image { function = HLINE file = "assets/line-h.png" border = { 0, 0, 0, 0 } stretch = TRUE } # Focuslines image { function = FOCUS file = "assets/focus-line.png" border = { 1, 1, 1, 1 } stretch = TRUE } # Handles image { function = HANDLE overlay_file = "assets/handle-h.png" overlay_stretch = FALSE orientation = HORIZONTAL } image { function = HANDLE overlay_file = "assets/handle-v.png" overlay_stretch = FALSE orientation = VERTICAL } # Expanders image { function = EXPANDER expander_style = COLLAPSED file = "assets/plus.png" } image { function = EXPANDER expander_style = EXPANDED file = "assets/minus.png" } image { function = EXPANDER expander_style = SEMI_EXPANDED file = "assets/minus.png" } image { function = EXPANDER expander_style = SEMI_COLLAPSED file = "assets/plus.png" } image { function = RESIZE_GRIP state = NORMAL detail = "statusbar" overlay_file = "assets/null.png" overlay_border = { 0,0,0,0 } overlay_stretch = FALSE } # Shadows ( this area needs help :P ) image { function = SHADOW_GAP file = "assets/null.png" border = { 4, 4, 4, 4 } stretch = TRUE } } } style "toplevel_hack" { engine "adwaita" { } } style "ooo_stepper_hack" { GtkScrollbar::stepper-size = 0 GtkScrollbar::has-backward-stepper = 0 GtkScrollbar::has-forward-stepper = 0 } style "scrollbar" { engine "pixmap" { image { function = BOX detail = "trough" file = "assets/trough-scrollbar-horiz.png" border = { 2, 2, 3, 3 } stretch = TRUE orientation = HORIZONTAL } image { function = BOX detail = "trough" file = "assets/trough-scrollbar-vert.png" border = { 3, 3, 2, 2 } stretch = TRUE orientation = VERTICAL } image { function = ARROW overlay_file = "assets/null.png" overlay_border = { 0, 0, 0, 0 } overlay_stretch = FALSE arrow_direction = UP } image { function = ARROW overlay_file = "assets/null.png" overlay_border = { 0, 0, 0, 0 } overlay_stretch = FALSE arrow_direction = DOWN } image { function = ARROW overlay_file = "assets/null.png" overlay_border = { 0, 0, 0, 0 } overlay_stretch = FALSE arrow_direction = LEFT } image { function = ARROW overlay_file = "assets/null.png" overlay_border = { 0, 0, 0, 0 } overlay_stretch = FALSE arrow_direction = RIGHT } # Sliders image { function = SLIDER state = NORMAL file = "assets/slider-horiz.png" border = { 5, 5, 3, 3 } stretch = TRUE orientation = HORIZONTAL } image { function = SLIDER state = ACTIVE file = "assets/slider-horiz-active.png" border = { 5, 5, 3, 3 } stretch = TRUE orientation = HORIZONTAL } image { function = SLIDER state = PRELIGHT file = "assets/slider-horiz-prelight.png" border = { 5, 5, 3, 3 } stretch = TRUE orientation = HORIZONTAL } image { function = SLIDER state = INSENSITIVE file = "assets/slider-horiz-insens.png" border = { 5, 5, 3, 3 } stretch = TRUE orientation = HORIZONTAL } # X Verticals image { function = SLIDER state = NORMAL file = "assets/slider-vert.png" border = { 3, 3, 5, 5 } stretch = TRUE orientation = VERTICAL } image { function = SLIDER state = ACTIVE file = "assets/slider-vert-active.png" border = { 3, 3, 5, 5 } stretch = TRUE orientation = VERTICAL } image { function = SLIDER state = PRELIGHT file = "assets/slider-vert-prelight.png" border = { 3, 3, 5, 5 } stretch = TRUE orientation = VERTICAL } image { function = SLIDER state = INSENSITIVE file = "assets/slider-vert-insens.png" border = { 3, 3, 5, 5 } stretch = TRUE orientation = VERTICAL } } } style "menu" { xthickness = 0 ythickness = 0 GtkMenuItem::arrow-scaling = 0.4 bg[NORMAL] = @menu_bg bg[INSENSITIVE] = @menu_bg bg[PRELIGHT] = @menu_bg engine "pixmap" { # For menus that use horizontal lines rather than gtkseparator image { function = HLINE file = "assets/null.png" border = { 0, 0, 0, 0 } stretch = TRUE } } } style "menu_framed_box" { engine "adwaita" { } } style "menu_item" { xthickness = 2 ythickness = 5 # HACK: Gtk doesn't actually read this value # while rendering the menu items, but Libreoffice # does; setting this value equal to the one in # fg[PRELIGHT] ensures a code path in the LO theming code # that falls back to a dark text color for menu item text # highlight. The price to pay is black text on menus as well, # but at least it's readable. # See https://bugs.freedesktop.org/show_bug.cgi?id=38038 bg[SELECTED] = @selected_fg_color fg[NORMAL] = @fg_color fg[SELECTED] = @selected_fg_color fg[PRELIGHT] = @selected_fg_color text[PRELIGHT] = @selected_fg_color engine "pixmap" { image { function = BOX state = PRELIGHT file = "assets/menuitem.png" border = { 1, 0, 1, 0 } stretch = TRUE } # Fix invisible scale trough on selected menuitems image { function = BOX detail = "trough-lower" file = "assets/trough-horizontal.png" border = { 8, 8, 0, 0 } stretch = TRUE orientation = HORIZONTAL } image { function = SLIDER state = PRELIGHT file = "assets/null.png" border = { 0, 0, 0, 0 } stretch = TRUE overlay_file = "assets/slider.png" overlay_stretch = FALSE orientation = HORIZONTAL } # Check Buttons image { function = CHECK recolorable = TRUE state = NORMAL shadow = OUT overlay_file = "assets/menu-checkbox-unchecked.png" overlay_stretch = FALSE } image { function = CHECK recolorable = TRUE state = PRELIGHT shadow = OUT overlay_file = "assets/menu-checkbox-unchecked-selected.png" overlay_stretch = FALSE } image { function = CHECK recolorable = TRUE state = ACTIVE shadow = OUT overlay_file = "assets/menu-checkbox-unchecked.png" overlay_stretch = FALSE } image { function = CHECK recolorable = TRUE state = INSENSITIVE shadow = OUT overlay_file = "assets/menu-checkbox-unchecked-insensitive.png" overlay_stretch = FALSE } image { function = CHECK recolorable = TRUE state = NORMAL shadow = IN overlay_file = "assets/menu-checkbox-checked.png" overlay_stretch = FALSE } image { function = CHECK recolorable = TRUE state = PRELIGHT shadow = IN overlay_file = "assets/menu-checkbox-checked-selected.png" overlay_stretch = FALSE } image { function = CHECK recolorable = TRUE state = ACTIVE shadow = IN overlay_file = "assets/menu-checkbox-checked.png" overlay_stretch = FALSE } image { function = CHECK recolorable = TRUE state = INSENSITIVE shadow = IN overlay_file = "assets/menu-checkbox-checked-insensitive.png" overlay_stretch = FALSE } # Radio Buttons image { function = OPTION state = NORMAL shadow = OUT overlay_file = "assets/menu-radio-unchecked.png" overlay_stretch = FALSE } image { function = OPTION state = PRELIGHT shadow = OUT overlay_file = "assets/menu-radio-unchecked-selected.png" overlay_stretch = FALSE } image { function = OPTION state = ACTIVE shadow = OUT overlay_file = "assets/menu-radio-unchecked.png" overlay_stretch = FALSE } image { function = OPTION state = INSENSITIVE shadow = OUT overlay_file = "assets/menu-radio-unchecked-insensitive.png" overlay_stretch = FALSE } image { function = OPTION state = NORMAL shadow = IN overlay_file = "assets/menu-radio-checked.png" overlay_stretch = FALSE } image { function = OPTION state = PRELIGHT shadow = IN overlay_file = "assets/menu-radio-checked-selected.png" overlay_stretch = FALSE } image { function = OPTION state = ACTIVE shadow = IN overlay_file = "assets/menu-radio-checked.png" overlay_stretch = FALSE } image { function = OPTION state = INSENSITIVE shadow = IN overlay_file = "assets/menu-radio-checked-insensitive.png" overlay_stretch = FALSE } image { function = SHADOW # This fixes boxy Qt menu items file = "assets/null.png" border = { 4, 4, 4, 4 } stretch = TRUE } # Arrow Buttons image { function = ARROW state = NORMAL overlay_file = "assets/menu-arrow.png" overlay_border = { 0, 0, 0, 0 } overlay_stretch = FALSE arrow_direction = RIGHT } image { function = ARROW state = PRELIGHT overlay_file = "assets/menu-arrow-prelight.png" overlay_border = { 0, 0, 0, 0 } overlay_stretch = FALSE arrow_direction = RIGHT } } } style "button" { xthickness = 4 ythickness = 4 engine "pixmap" { image { function = BOX state = NORMAL file = "assets/button.png" border = { 4, 4, 4, 4 } stretch = TRUE } image { function = BOX state = PRELIGHT file = "assets/button-hover.png" border = { 4, 4, 4, 4 } stretch = TRUE } image { function = BOX state = ACTIVE file = "assets/button-active.png" border = { 4, 4, 4, 4 } stretch = TRUE } image { function = BOX state = INSENSITIVE file = "assets/button-insensitive.png" border = { 4, 4, 4, 4 } stretch = TRUE } } } style "checkbutton" { fg[PRELIGHT] = @text_color fg[ACTIVE] = @text_color } style "entry" { xthickness = 6 ythickness = 4 engine "pixmap" { image { function = SHADOW state = NORMAL detail = "entry" file = "assets/entry-bg.png" border = {6, 6, 6, 6} stretch = TRUE } image { function = SHADOW state = ACTIVE detail = "entry" file = "assets/entry-active-bg.png" border = {6, 6, 6, 6} stretch = TRUE } image { function = SHADOW state = INSENSITIVE detail = "entry" file = "assets/entry-disabled-bg.png" border = {6, 6, 6, 6} stretch = TRUE } image { function = FLAT_BOX state = ACTIVE detail = "entry_bg" file = "assets/entry-background.png" } image { function = FLAT_BOX state = INSENSITIVE detail = "entry_bg" file = "assets/entry-background-disabled.png" } image { function = FLAT_BOX detail = "entry_bg" file = "assets/entry-background.png" } } } style "notebook_entry" { engine "pixmap" { image { function = SHADOW state = NORMAL detail = "entry" file = "assets/entry-notebook.png" border = {6, 6, 6, 6} stretch = TRUE } image { function = SHADOW state = ACTIVE detail = "entry" file = "assets/entry-active-notebook.png" border = {6, 6, 6, 6} stretch = TRUE } image { function = SHADOW state = INSENSITIVE detail = "entry" file = "assets/entry-disabled-notebook.png" border = {6, 6, 6, 6} stretch = TRUE } } } style "notebook_tab_label" { fg[ACTIVE] = @text_color } style "combobox_entry" { xthickness = 3 ythickness = 4 engine "pixmap" { # LTR version image { function = SHADOW detail = "entry" state = NORMAL shadow = IN file = "assets/combo-entry.png" border = { 4, 4, 5, 4 } stretch = TRUE direction = LTR } image { function = SHADOW detail = "entry" state = INSENSITIVE shadow = IN file = "assets/combo-entry-insensitive.png" border = { 4, 4, 5, 4 } stretch = TRUE direction = LTR } image { function = SHADOW detail = "entry" state = ACTIVE file = "assets/combo-entry-focus.png" border = { 4, 4, 5, 4 } stretch = TRUE direction = LTR } # RTL version image { function = SHADOW detail = "entry" state = NORMAL shadow = IN file = "assets/combo-entry-rtl.png" border = { 4, 4, 5, 4 } stretch = TRUE direction = RTL } image { function = SHADOW detail = "entry" state = INSENSITIVE shadow = IN file = "assets/combo-entry-insensitive-rtl.png" border = { 4, 4, 5, 4 } stretch = TRUE direction = RTL } image { function = SHADOW detail = "entry" state = ACTIVE file = "assets/combo-entry-focus-rtl.png" border = { 4, 4, 5, 4 } stretch = TRUE direction = RTL } } } style "notebook_combobox_entry" { engine "pixmap" { # LTR version image { function = SHADOW detail = "entry" state = NORMAL shadow = IN file = "assets/combo-entry-notebook.png" border = { 4, 4, 5, 4 } stretch = TRUE direction = LTR } image { function = SHADOW detail = "entry" state = INSENSITIVE shadow = IN file = "assets/combo-entry-insensitive-notebook.png" border = { 4, 4, 5, 4 } stretch = TRUE direction = LTR } image { function = SHADOW detail = "entry" state = ACTIVE file = "assets/combo-entry-focus-notebook.png" border = { 4, 4, 5, 4 } stretch = TRUE direction = LTR } # RTL version image { function = SHADOW detail = "entry" state = NORMAL shadow = IN file = "assets/combo-entry-notebook-rtl.png" border = { 4, 4, 5, 4 } stretch = TRUE direction = RTL } image { function = SHADOW detail = "entry" state = INSENSITIVE shadow = IN file = "assets/combo-entry-insensitive-notebook-rtl.png" border = { 4, 4, 5, 4 } stretch = TRUE direction = RTL } image { function = SHADOW detail = "entry" state = ACTIVE file = "assets/combo-entry-focus-notebook-rtl.png" border = { 4, 4, 5, 4 } stretch = TRUE direction = RTL } } } style "combobox_entry_button" { xthickness = 6 fg[ACTIVE] = @text_color engine "pixmap" { # LTR version image { function = BOX state = NORMAL file = "assets/combo-entry-button.png" border = { 4, 4, 5, 4 } stretch = TRUE direction = LTR } image { function = BOX state = PRELIGHT file = "assets/combo-entry-button.png" border = { 4, 4, 5, 4 } stretch = TRUE direction = LTR } image { function = BOX state = INSENSITIVE file = "assets/combo-entry-button-insensitive.png" border = { 4, 4, 5, 4 } stretch = TRUE direction = LTR } image { function = BOX state = ACTIVE file = "assets/combo-entry-button-active.png" border = { 4, 4, 5, 4 } stretch = TRUE direction = LTR } # RTL version image { function = BOX state = NORMAL file = "assets/combo-entry-button-rtl.png" border = { 4, 4, 5, 4 } stretch = TRUE direction = RTL } image { function = BOX state = PRELIGHT file = "assets/combo-entry-button-rtl.png" border = { 4, 4, 5, 4 } stretch = TRUE direction = RTL } image { function = BOX state = INSENSITIVE file = "assets/combo-entry-button-insensitive-rtl.png" border = { 4, 4, 5, 4 } stretch = TRUE direction = RTL } image { function = BOX state = ACTIVE file = "assets/combo-entry-button-active-rtl.png" border = { 4, 4, 5, 4 } stretch = TRUE direction = RTL } } } style "spinbutton" { bg[NORMAL] = @bg_color xthickness = 6 ythickness = 4 engine "pixmap" { image { function = ARROW } # Spin-Up LTR image { function = BOX state = NORMAL detail = "spinbutton_up" file = "assets/up-background.png" border = { 1, 4, 5, 0 } stretch = TRUE overlay_file = "assets/arrow-up-small.png" overlay_stretch = FALSE direction = LTR } image { function = BOX state = PRELIGHT detail = "spinbutton_up" file = "assets/up-background.png" border = { 1, 4, 5, 0 } stretch = TRUE overlay_file = "assets/arrow-up-small-prelight.png" overlay_stretch = FALSE direction = LTR } image { function = BOX state = INSENSITIVE detail = "spinbutton_up" file = "assets/up-background-disable.png" border = { 1, 4, 5, 0 } stretch = TRUE overlay_file = "assets/arrow-up-small-insens.png" overlay_stretch = FALSE direction = LTR } image { function = BOX state = ACTIVE detail = "spinbutton_up" file = "assets/up-background.png" border = { 1, 4, 5, 0 } stretch = TRUE overlay_file = "assets/arrow-up-small-prelight.png" overlay_stretch = FALSE direction = LTR } # Spin-Up RTL image { function = BOX state = NORMAL detail = "spinbutton_up" file = "assets/up-background-rtl.png" border = { 4, 1, 5, 0 } stretch = TRUE overlay_file = "assets/arrow-up-small.png" overlay_stretch = FALSE direction = RTL } image { function = BOX state = PRELIGHT detail = "spinbutton_up" file = "assets/up-background-rtl.png" border = { 4, 1, 5, 0 } stretch = TRUE overlay_file = "assets/arrow-up-small-prelight.png" overlay_stretch = FALSE direction = RTL } image { function = BOX state = INSENSITIVE detail = "spinbutton_up" file = "assets/up-background-disable-rtl.png" border = { 4, 1, 5, 0 } stretch = TRUE overlay_file = "assets/arrow-up-small-insens.png" overlay_stretch = FALSE direction = RTL } image { function = BOX state = ACTIVE detail = "spinbutton_up" file = "assets/up-background-rtl.png" border = { 4, 1, 5, 0 } stretch = TRUE overlay_file = "assets/arrow-up-small-prelight.png" overlay_stretch = FALSE direction = RTL } # Spin-Down LTR image { function = BOX state = NORMAL detail = "spinbutton_down" file = "assets/down-background.png" border = { 1, 4, 1, 4 } stretch = TRUE overlay_file = "assets/arrow-down-small.png" overlay_stretch = FALSE direction = LTR } image { function = BOX state = PRELIGHT detail = "spinbutton_down" file = "assets/down-background.png" border = { 1, 4, 1, 4 } stretch = TRUE overlay_file = "assets/arrow-down-small-prelight.png" overlay_stretch = FALSE direction = LTR } image { function = BOX state = INSENSITIVE detail = "spinbutton_down" file = "assets/down-background-disable.png" border = { 1, 4, 1, 4 } stretch = TRUE overlay_file = "assets/arrow-down-small-insens.png" overlay_stretch = FALSE direction = LTR } image { function = BOX state = ACTIVE detail = "spinbutton_down" file = "assets/down-background.png" border = { 1, 4, 1, 4 } stretch = TRUE overlay_file = "assets/arrow-down-small-prelight.png" overlay_stretch = FALSE direction = LTR } # Spin-Down RTL image { function = BOX state = NORMAL detail = "spinbutton_down" file = "assets/down-background-rtl.png" border = { 4, 1, 1, 4 } stretch = TRUE overlay_file = "assets/arrow-down-small.png" overlay_stretch = FALSE direction = RTL } image { function = BOX state = PRELIGHT detail = "spinbutton_down" file = "assets/down-background-rtl.png" border = { 4, 1, 1, 4 } stretch = TRUE overlay_file = "assets/arrow-down-small-prelight.png" overlay_stretch = FALSE direction = RTL } image { function = BOX state = INSENSITIVE detail = "spinbutton_down" file = "assets/down-background-disable-rtl.png" border = { 4, 1, 1, 4 } stretch = TRUE overlay_file = "assets/arrow-down-small-insens.png" overlay_stretch = FALSE direction = RTL } image { function = BOX state = ACTIVE detail = "spinbutton_down" file = "assets/down-background-rtl.png" border = { 4, 1, 1, 4 } stretch = TRUE overlay_file = "assets/arrow-down-small-prelight.png" overlay_stretch = FALSE direction = RTL } } } style "gimp_spin_scale" { bg[NORMAL] = @base_color engine "pixmap" { image { function = FLAT_BOX detail = "entry_bg" state = NORMAL } image { function = FLAT_BOX detail = "entry_bg" state = ACTIVE } image { function = BOX state = NORMAL detail = "spinbutton_up" overlay_file = "assets/arrow-up-small.png" overlay_stretch = FALSE } image { function = BOX state = PRELIGHT detail = "spinbutton_up" overlay_file = "assets/arrow-up-small-prelight.png" overlay_stretch = FALSE } image { function = BOX state = ACTIVE detail = "spinbutton_up" overlay_file = "assets/arrow-up-small-prelight.png" overlay_stretch = FALSE } image { function = BOX state = INSENSITIVE detail = "spinbutton_up" overlay_file = "assets/arrow-up-small-insens.png" overlay_stretch = FALSE } image { function = BOX state = NORMAL detail = "spinbutton_down" overlay_file = "assets/arrow-down-small.png" overlay_stretch = FALSE } image { function = BOX state = PRELIGHT detail = "spinbutton_down" overlay_file = "assets/arrow-down-small-prelight.png" overlay_stretch = FALSE } image { function = BOX state = ACTIVE detail = "spinbutton_down" overlay_file = "assets/arrow-down-small-prelight.png" overlay_stretch = FALSE } image { function = BOX state = INSENSITIVE detail = "spinbutton_down" overlay_file = "assets/arrow-down-small-insens.png" overlay_stretch = FALSE } } } style "notebook" { xthickness = 5 ythickness = 2 engine "pixmap" { image { function = EXTENSION state = ACTIVE file = "assets/null.png" border = { 0,0,0,0 } stretch = TRUE gap_side = TOP } image { function = EXTENSION state = ACTIVE file = "assets/null.png" border = { 0,0,0,0 } stretch = TRUE gap_side = BOTTOM } image { function = EXTENSION state = ACTIVE file = "assets/null.png" border = { 0,0,0,0 } stretch = TRUE gap_side = RIGHT } image { function = EXTENSION state = ACTIVE file = "assets/null.png" border = { 0,0,0,0 } stretch = TRUE gap_side = LEFT } image { function = EXTENSION file = "assets/tab-top-active.png" border = { 3,3,3,3 } stretch = TRUE gap_side = BOTTOM } image { function = EXTENSION file = "assets/tab-bottom-active.png" border = { 3,3,3,3 } stretch = TRUE gap_side = TOP } image { function = EXTENSION file = "assets/tab-left-active.png" border = { 3,3,3,3 } stretch = TRUE gap_side = RIGHT } image { function = EXTENSION file = "assets/tab-right-active.png" border = { 3,3,3,3 } stretch = TRUE gap_side = LEFT } # How to draw boxes with a gap on one side (ie the page of a notebook) image { function = BOX_GAP file = "assets/notebook.png" border = { 4, 4, 4, 4 } stretch = TRUE gap_file = "assets/notebook-gap-horiz.png" gap_border = { 1, 1, 0, 0 } gap_side = TOP } image { function = BOX_GAP file = "assets/notebook.png" border = { 4, 4, 4, 4 } stretch = TRUE gap_file = "assets/notebook-gap-horiz.png" gap_border = { 1, 1, 0, 0 } gap_side = BOTTOM } image { function = BOX_GAP file = "assets/notebook.png" border = { 4, 4, 4, 4 } stretch = TRUE gap_file = "assets/notebook-gap-vert.png" gap_border = { 0, 0, 1, 1 } gap_side = LEFT } image { function = BOX_GAP file = "assets/notebook.png" border = { 4, 4, 4, 4 } stretch = TRUE gap_file = "assets/notebook-gap-vert.png" gap_border = { 0, 0, 1, 1 } gap_side = RIGHT } # How to draw the box of a notebook when it isnt attached to a tab image { function = BOX file = "assets/notebook.png" border = { 4, 4, 4, 4 } stretch = TRUE } } } style "handlebox" { engine "pixmap" { image { function = BOX file = "assets/null.png" border = { 4, 4, 4, 4 } stretch = TRUE detail = "handlebox_bin" shadow = IN } image { function = BOX file = "assets/null.png" border = { 4, 4, 4, 4 } stretch = TRUE detail = "handlebox_bin" shadow = OUT } } } style "combobox_separator" { xthickness = 0 ythickness = 0 GtkWidget::wide-separators = 1 } style "combobox" { xthickness = 0 ythickness = 0 } style "combobox_button" { xthickness = 3 ythickness = 3 } style "range" { engine "pixmap" { image { function = BOX detail = "trough-upper" file = "assets/trough-horizontal.png" border = { 8, 8, 0, 0 } stretch = TRUE orientation = HORIZONTAL } image { function = BOX detail = "trough-lower" file = "assets/trough-horizontal-active.png" border = { 8, 8, 0, 0 } stretch = TRUE orientation = HORIZONTAL } image { function = BOX detail = "trough-upper" file = "assets/trough-vertical.png" border = { 0, 0, 8, 8 } stretch = TRUE orientation = VERTICAL } image { function = BOX detail = "trough-lower" file = "assets/trough-vertical-active.png" border = { 0, 0, 8, 8 } stretch = TRUE orientation = VERTICAL } # Horizontal image { function = SLIDER state = NORMAL file = "assets/null.png" border = { 0, 0, 0, 0 } stretch = TRUE overlay_file = "assets/slider.png" overlay_stretch = FALSE orientation = HORIZONTAL } image { function = SLIDER state = PRELIGHT file = "assets/null.png" border = { 0, 0, 0, 0 } stretch = TRUE overlay_file = "assets/slider-prelight.png" overlay_stretch = FALSE orientation = HORIZONTAL } image { function = SLIDER state = INSENSITIVE file = "assets/null.png" border = { 0, 0, 0, 0 } stretch = TRUE overlay_file = "assets/slider-insensitive.png" overlay_stretch = FALSE orientation = HORIZONTAL } # Vertical image { function = SLIDER state = NORMAL file = "assets/null.png" border = { 0, 0, 0, 0 } stretch = TRUE overlay_file = "assets/slider.png" overlay_stretch = FALSE orientation = VERTICAL } image { function = SLIDER state = PRELIGHT file = "assets/null.png" border = { 0, 0, 0, 0 } stretch = TRUE overlay_file = "assets/slider-prelight.png" overlay_stretch = FALSE orientation = VERTICAL } image { function = SLIDER state = INSENSITIVE file = "assets/null.png" border = { 0, 0, 0, 0 } stretch = TRUE overlay_file = "assets/slider-insensitive.png" overlay_stretch = FALSE orientation = VERTICAL } # Function below removes ugly boxes image { function = BOX file = "assets/null.png" border = { 3, 3, 3, 3 } stretch = TRUE } } } style "progressbar" { xthickness = 1 ythickness = 1 fg[NORMAL] = @fg_color fg[PRELIGHT] = @selected_fg_color engine "pixmap" { image { function = BOX detail = "trough" file = "assets/trough-progressbar.png" border = { 4, 4, 4, 4 } stretch = TRUE orientation = HORIZONTAL } image { function = BOX detail = "bar" file = "assets/progressbar.png" stretch = TRUE border = { 3, 3, 3, 3 } orientation = HORIZONTAL } image { function = BOX detail = "trough" file = "assets/trough-progressbar_v.png" border = { 4, 4, 4, 4 } stretch = TRUE orientation = VERTICAL } image { function = BOX detail = "bar" file = "assets/progressbar_v.png" stretch = TRUE border = { 3, 3, 3, 3 } orientation = VERTICAL } } } style "separator_menu_item" { engine "pixmap" { image { function = BOX file = "assets/null.png" border = { 0, 0, 1, 0 } stretch = TRUE } } } style "treeview_header" { ythickness = 1 fg[PRELIGHT] = mix(0.70, @text_color, @base_color) font_name = "Bold" engine "pixmap" { image { function = BOX file = "assets/tree_header.png" border = { 1, 1, 1, 1 } stretch = TRUE } } } # Treeview Rows style "treeview" { xthickness = 2 ythickness = 0 } style "scrolled_window" { xthickness = 1 ythickness = 1 engine "pixmap" { image { function = SHADOW file = "assets/frame.png" border = { 5, 5, 5, 5 } stretch = TRUE } } } style "frame" { xthickness = 1 ythickness = 1 engine "pixmap" { image { function = SHADOW file = "assets/frame.png" border = { 1, 1, 1, 1 } stretch = TRUE shadow = IN } image { function = SHADOW_GAP file = "assets/frame.png" border = { 1, 1, 1, 1 } stretch = TRUE gap_start_file = "assets/frame-gap-start.png" gap_start_border = { 1, 0, 0, 0 } gap_end_file = "assets/frame-gap-end.png" gap_end_border = { 0, 1, 0, 0 } shadow = IN } image { function = SHADOW file = "assets/frame.png" border = { 1, 1, 1, 1 } stretch = TRUE shadow = OUT } image { function = SHADOW_GAP file = "assets/frame.png" border = { 1, 1, 1, 1 } stretch = TRUE gap_start_file = "assets/frame-gap-start.png" gap_start_border = { 1, 0, 0, 0 } gap_end_file = "assets/frame-gap-end.png" gap_end_border = { 0, 1, 0, 0 } shadow = OUT } image { function = SHADOW file = "assets/frame.png" border = { 1, 1, 1, 1 } stretch = TRUE shadow = ETCHED_IN } image { function = SHADOW_GAP file = "assets/frame.png" border = { 1, 1, 1, 1 } stretch = TRUE gap_start_file = "assets/frame-gap-start.png" gap_start_border = { 1, 0, 0, 0 } gap_end_file = "assets/frame-gap-end.png" gap_end_border = { 0, 1, 0, 0 } shadow = ETCHED_IN } image { function = SHADOW file = "assets/frame.png" border = { 1, 1, 1, 1 } stretch = TRUE shadow = ETCHED_OUT } image { function = SHADOW_GAP file = "assets/frame.png" border = { 1, 1, 1, 1 } stretch = TRUE gap_start_file = "assets/frame-gap-start.png" gap_start_border = { 1, 0, 0, 0 } gap_end_file = "assets/frame-gap-end.png" gap_end_border = { 0, 1, 0, 0 } shadow = ETCHED_OUT } } } style "gimp_toolbox_frame" { engine "pixmap" { image { function = SHADOW } } } style "toolbar" { engine "pixmap" { image { function = BOX file = "assets/toolbar.png" stretch = TRUE border = { 1, 1, 1, 1 } } image { function = HANDLE overlay_file = "assets/handle-h.png" overlay_stretch = FALSE orientation = HORIZONTAL } image { function = HANDLE overlay_file = "assets/handle-v.png" overlay_stretch = FALSE orientation = VERTICAL } image { function = VLINE recolorable = TRUE file = "assets/null.png" } image { function = HLINE recolorable = TRUE file = "assets/null.png" } } } style "inline_toolbar" { GtkToolbar::button-relief = GTK_RELIEF_NORMAL engine "pixmap" { image { function = BOX file = "assets/inline-toolbar.png" stretch = TRUE border = { 1, 1, 1, 1 } } } } style "notebook_viewport" { bg[NORMAL] = @notebook_bg } style "notebook_eventbox" { bg[NORMAL] = @notebook_bg bg[ACTIVE] = @bg_color } style "tooltips" { xthickness = 8 ythickness = 4 bg[NORMAL] = @tooltip_bg_color fg[NORMAL] = @tooltip_fg_color bg[SELECTED] = @tooltip_bg_color } style "eclipse-tooltips" { xthickness = 8 ythickness = 4 bg[NORMAL] = shade(1.05, @bg_color) fg[NORMAL] = @text_color bg[SELECTED] = shade(1.05, @bg_color) } style "xfdesktop-icon-view" { XfdesktopIconView::label-alpha = 0 XfdesktopIconView::selected-label-alpha = 100 XfdesktopIconView::shadow-x-offset = 0 XfdesktopIconView::shadow-y-offset = 1 XfdesktopIconView::selected-shadow-x-offset = 0 XfdesktopIconView::selected-shadow-y-offset = 1 XfdesktopIconView::shadow-color = "#000000" XfdesktopIconView::selected-shadow-color = "#000000" XfdesktopIconView::shadow-blur-radius = 2 XfdesktopIconView::cell-spacing = 2 XfdesktopIconView::cell-padding = 6 XfdesktopIconView::cell-text-width-proportion = 1.9 fg[NORMAL] = @selected_fg_color fg[ACTIVE] = @selected_fg_color } style "xfwm-tabwin" { Xfwm4TabwinWidget::border-width = 1 Xfwm4TabwinWidget::border-alpha = 1.0 Xfwm4TabwinWidget::icon-size = 64 Xfwm4TabwinWidget::alpha = 1.0 Xfwm4TabwinWidget::border-radius = 2 bg[NORMAL] = @bg_color bg[SELECTED] = @bg_color fg[NORMAL] = @fg_color engine "murrine" { contrast = 0.7 glazestyle = 0 glowstyle = 0 highlight_shade = 1.0 gradient_shades = {1.0,1.0,1.0,1.0} border_shades = { 0.8, 0.8 } } } style "xfwm-tabwin-button" { font_name = "bold" bg[SELECTED] = @selected_bg_color } # Chromium style "chrome_menu_item" { bg[SELECTED] = @selected_bg_color } # Text Style style "text" = "default" { engine "murrine" { textstyle = 0 } } style "menu_text" = "menu_item" { engine "murrine" { textstyle = 0 } } style "null" { engine "pixmap" { image { function = BOX file = "assets/null.png" stretch = TRUE } } } class "GtkWidget" style "default" class "GtkScrollbar" style "scrollbar" class "GtkButton" style "button" class "GtkEntry" style "entry" class "GtkOldEditable" style "entry" class "GtkSpinButton" style "spinbutton" class "GtkNotebook" style "notebook" class "GtkRange" style "range" class "GtkProgressBar" style "progressbar" class "GtkSeparatorMenuItem" style "separator_menu_item" class "GtkScrolledWindow" style "scrolled_window" class "GtkFrame" style "frame" class "GtkTreeView" style "treeview" class "GtkToolbar" style "toolbar" class "*HandleBox" style "toolbar" widget_class "**" style "menu" widget_class "**" style "menu_framed_box" widget_class "**" style "menu_item" widget_class "**" style "checkbutton" widget_class "*" style "combobox" widget_class "**" style "combobox_button" widget_class "**" style "combobox_separator" widget_class "***" style "treeview_header" widget_class "**" style "inline_toolbar" widget_class "**" style "combobox_entry" widget_class "**" style "combobox_entry_button" widget_class "***" style "notebook_viewport" widget_class "*HandleBox" style "toolbar" # Entries in notebooks draw with notebook's base color, but not if there's # something else in the middle that draws gray again widget_class "**" style "notebook_entry" widget_class "***" style "entry" widget_class "***" style "notebook_combobox_entry" widget_class "****" style "combobox_entry" # We also need to avoid changing fg color for the inactive notebook tab labels widget_class "*." style "notebook_tab_label" # GTK tooltips widget "gtk-tooltip*" style "tooltips" #Fix GVim tabs widget_class "**" style "notebook_eventbox" # Xchat special cases widget "*xchat-inputbox" style "entry" # GIMP # Disable gradients completely for GimpSpinScale #class "GimpSpinScale" style "gimp_spin_scale" # Remove borders from "Wilbert frame" in Gimp widget_class "**" style "gimp_toolbox_frame" # Chrome/Chromium widget_class "*Chrom*Button*" style "button" widget_class "***" style "chrome_menu_item" # Eclipse/SWT widget "gtk-tooltips*" style "eclipse-tooltips" widget "*swt-toolbar-flat" style "null" # Openoffice, Libreoffice class "GtkWindow" style "toplevel_hack" widget "*openoffice-toplevel*" style "ooo_stepper_hack" # Xfce widget_class "*XfdesktopIconView*" style "xfdesktop-icon-view" widget "xfwm4-tabwin*" style "xfwm-tabwin" widget "xfwm4-tabwin*GtkButton*" style "xfwm-tabwin-button" # Fixes ugly text shadows for insensitive text widget_class "*" style "text" widget_class "**" style "menu_text" widget_class "**" style "text" widget_class "**" style "text" widget_class "**" style "text" ================================================ FILE: common/gtk-2.0/menubar-toolbar/menubar-toolbar-dark.rc ================================================ style "menubar" { bg[NORMAL] = "#2f343f" fg[NORMAL] = "#afb8c5" fg[PRELIGHT] = "#afb8c5" fg[ACTIVE] = "#afb8c5" fg[SELECTED] = @selected_fg_color fg[INSENSITIVE] = shade(0.7, "#afb8c5") xthickness = 0 ythickness = 0 engine "pixmap" { image { function = BOX file = "menubar-toolbar/menubar-dark.png" stretch = TRUE border = { 1, 1, 1, 1 } } } } style "menubar-borderless" { bg[NORMAL] = "#2f343f" fg[NORMAL] = "#afb8c5" fg[SELECTED] = @selected_fg_color fg[INSENSITIVE] = shade(0.7, "#afb8c5") xthickness = 0 ythickness = 0 engine "pixmap" { image { function = BOX file = "assets/null.png" stretch = TRUE border = { 1, 1, 1, 1 } } } } style "menubar_item" { xthickness = 2 ythickness = 4 fg[PRELIGHT] = @selected_fg_color engine "pixmap" { image { function = BOX state = PRELIGHT file = "menubar-toolbar/menubar_button-dark.png" border = { 2, 2, 2, 2 } stretch = TRUE } } } # Text Style Menubar style "menubar-text" { engine "murrine" { text_shade = 0.0 textstyle = 0 } } style "toolbar_text" { fg[NORMAL] = "#afb8c5" fg[PRELIGHT] = "#afb8c5" fg[INSENSITIVE] = shade(0.7, "#afb8c5") fg[ACTIVE] = "#afb8c5" text[NORMAL] = "#afb8c5" text[PRELIGHT] = "#afb8c5" text[INSENSITIVE] = shade(0.7, "#afb8c5") text[ACTIVE] = "#afb8c5" } style "toolbar_button" { xthickness = 4 ythickness = 4 engine "pixmap" { image { function = BOX state = NORMAL file = "menubar-toolbar/button.png" border = { 4, 4, 4, 4 } stretch = TRUE } image { function = BOX state = PRELIGHT file = "menubar-toolbar/button-hover.png" border = { 4, 4, 4, 4 } stretch = TRUE } image { function = BOX state = ACTIVE file = "menubar-toolbar/button-active.png" border = { 4, 4, 4, 4 } stretch = TRUE } image { function = BOX state = INSENSITIVE file = "menubar-toolbar/button-insensitive.png" border = { 4, 4, 4, 4 } stretch = TRUE } } } style "toolbar_entry" { base[NORMAL] = "#404552" base[ACTIVE] = "#404552" base[INSENSITIVE] = "#39404d" text[NORMAL] = "#afb8c5" engine "pixmap" { image { function = SHADOW state = NORMAL detail = "entry" file = "menubar-toolbar/entry-toolbar-dark.png" border = {6, 6, 6, 6} stretch = TRUE } image { function = SHADOW state = ACTIVE detail = "entry" file = "menubar-toolbar/entry-active-toolbar-dark.png" border = {6, 6, 6, 6} stretch = TRUE } image { function = SHADOW state = INSENSITIVE detail = "entry" file = "menubar-toolbar/entry-disabled-toolbar-dark.png" border = {6, 6, 6, 6} stretch = TRUE } image { function = FLAT_BOX state = ACTIVE detail = "entry_bg" file = "assets/null.png" } image { function = FLAT_BOX state = INSENSITIVE detail = "entry_bg" file = "assets/null.png" } image { function = FLAT_BOX detail = "entry_bg" file = "assets/null.png" } } } #Chromium style "chrome-gtk-frame" { ChromeGtkFrame::frame-color = "#2f343f" ChromeGtkFrame::inactive-frame-color = "#2f343f" ChromeGtkFrame::frame-gradient-size = 0 ChromeGtkFrame::frame-gradient-color = shade(0.5, @bg_color) ChromeGtkFrame::incognito-frame-color = shade(0.85, @bg_color) ChromeGtkFrame::incognito-inactive-frame-color = @bg_color ChromeGtkFrame::incognito-frame-gradient-color = @bg_color ChromeGtkFrame::scrollbar-trough-color = shade(0.912, @bg_color) ChromeGtkFrame::scrollbar-slider-prelight-color = shade(1.04, @bg_color) ChromeGtkFrame::scrollbar-slider-normal-color = @bg_color } widget_class "**" style "menubar" widget_class "*.*" style "menubar_item" widget_class "*ThunarWindow*" style "menubar" class "ChromeGtkFrame" style "chrome-gtk-frame" widget_class "***" style "menubar-text" # Whitelist for dark toolbars widget_class "*ThunarWindow*" style "menubar-borderless" widget_class "*ThunarWindow**" style "toolbar_entry" widget_class "*ThunarWindow**" style "toolbar_button" widget_class "*ThunarWindow**" style "toolbar_text" widget_class "*ThunarWindow***" style "menubar-text" ================================================ FILE: common/gtk-2.0/menubar-toolbar/menubar-toolbar.rc ================================================ style "menubar" { bg[NORMAL] = "#e7e8eb" fg[NORMAL] = "#70788d" fg[PRELIGHT] = "#70788d" fg[ACTIVE] = "#70788d" fg[SELECTED] = @selected_fg_color fg[INSENSITIVE] = shade(1.3, "#70788d") xthickness = 0 ythickness = 0 engine "pixmap" { image { function = BOX file = "menubar-toolbar/menubar.png" stretch = TRUE border = { 1, 1, 1, 1 } } } } style "menubar-borderless" { bg[NORMAL] = "#e7e8eb" fg[NORMAL] = "#70788d" fg[SELECTED] = @fg_color fg[INSENSITIVE] = shade(1.3, "#70788d") xthickness = 0 ythickness = 0 engine "pixmap" { image { function = BOX file = "assets/null.png" stretch = TRUE border = { 1, 1, 1, 1 } } } } style "menubar_item" { xthickness = 2 ythickness = 4 fg[PRELIGHT] = @selected_fg_color engine "pixmap" { image { function = BOX state = PRELIGHT file = "menubar-toolbar/menubar_button.png" border = { 2, 2, 2, 2 } stretch = TRUE } } } # Text Style Menubar style "menubar-text" { engine "murrine" { text_shade = 0.0 textstyle = 0 } } style "toolbar_entry" { text[NORMAL] = "#70788d" engine "pixmap" { image { function = SHADOW state = NORMAL detail = "entry" file = "menubar-toolbar/entry-toolbar.png" border = {6, 6, 6, 6} stretch = TRUE } image { function = SHADOW state = ACTIVE detail = "entry" file = "menubar-toolbar/entry-active-toolbar.png" border = {6, 6, 6, 6} stretch = TRUE } image { function = SHADOW state = INSENSITIVE detail = "entry" file = "menubar-toolbar/entry-disabled-toolbar.png" border = {6, 6, 6, 6} stretch = TRUE } image { function = FLAT_BOX state = ACTIVE detail = "entry_bg" file = "assets/null.png" } image { function = FLAT_BOX state = INSENSITIVE detail = "entry_bg" file = "assets/null.png" } image { function = FLAT_BOX detail = "entry_bg" file = "assets/null.png" } } } #Chromium style "chrome-gtk-frame" { ChromeGtkFrame::frame-color = "#e7e8eb" ChromeGtkFrame::inactive-frame-color = "#e7e8eb" ChromeGtkFrame::frame-gradient-size = 0 ChromeGtkFrame::frame-gradient-color = shade(0.5, @bg_color) ChromeGtkFrame::incognito-frame-color = shade(0.85, @bg_color) ChromeGtkFrame::incognito-inactive-frame-color = @bg_color ChromeGtkFrame::incognito-frame-gradient-color = @bg_color ChromeGtkFrame::scrollbar-trough-color = shade(0.912, @bg_color) ChromeGtkFrame::scrollbar-slider-prelight-color = shade(1.04, @bg_color) ChromeGtkFrame::scrollbar-slider-normal-color = @bg_color } widget_class "**" style "menubar" widget_class "*.*" style "menubar_item" widget_class "*ThunarWindow*" style "menubar" widget_class "*CajaNavigationWindow*" style "menubar" class "ChromeGtkFrame" style "chrome-gtk-frame" widget_class "***" style "menubar-text" # Whitelist for dark toolbars widget_class "*ThunarWindow*" style "menubar-borderless" widget_class "*CajaNavigationWindow*" style "menubar-borderless" widget_class "*ThunarWindow**" style "toolbar_entry" widget_class "*CajaNavigationWindow**" style "toolbar_entry" ================================================ FILE: common/gtk-2.0/panel.rc ================================================ style "theme-panel" { xthickness = 2 ythickness = 0 bg[NORMAL] = "#2B2E37" bg[ACTIVE] = @selected_bg_color bg[PRELIGHT] = "#3f4453" bg[SELECTED] = @selected_bg_color fg[NORMAL] = "#BAC3CF" fg[PRELIGHT] = @selected_fg_color fg[ACTIVE] = @selected_fg_color fg[SELECTED] = @selected_fg_color text[NORMAL] = "#BAC3CF" text[PRELIGHT] = "#BAC3CF" text[ACTIVE] = "#BAC3CF" text[SELECTED] = "#BAC3CF" engine "murrine" { reliefstyle = 0 glazestyle = 0 glow_shade = 1.0 highlight_shade = 1.0 roundness = 0 gradient_shades = {1.0,1.0,1.0,1.0} textstyle = 0 contrast = 0.0 } } style "theme-panel-progressbar" { bg[ACTIVE] = "#1D1F26" } style "panelbar" { fg[NORMAL] = "#edf5fb" fg[ACTIVE] = "#edf5fb" fg[PRELIGHT] = "#edf5fb" fg[SELECTED] = @selected_fg_color bg[SELECTED] = @selected_bg_color engine "murrine" {} } style "panelbuttons" { xthickness = 4 ythickness = 0 engine "murrine" { textstyle = 0 } } style "theme-panel-text" { fg[NORMAL] = "#edf5fb" fg[PRELIGHT] = @selected_fg_color fg[ACTIVE] = "#edf5fb" text[NORMAL] = "#edf5fb" text[PRELIGHT] = @selected_fg_color text[ACTIVE] = "#edf5fb" engine "murrine" { textstyle = 0 text_shade = 0.2 } } style "panel-entry" { fg[NORMAL] = @text_color fg[PRELIGHT] = @text_color fg[ACTIVE] = @text_color fg[SELECTED] = @text_color fg[INSENSITIVE] = @text_color text[NORMAL] = @text_color text[PRELIGHT] = @text_color text[ACTIVE] = @text_color text[SELECTED] = @text_color text[INSENSITIVE] = @text_color } style "theme-main-menu-text" = "theme-panel-text" { fg[PRELIGHT] = @selected_fg_color text[PRELIGHT] = @selected_fg_color } style "workspace-switcher" = "theme-panel" { bg[SELECTED] = @selected_bg_color } style "indicator" = "theme-panel" { xthickness = 0 ythickness = 0 } widget "*tasklist*" style "panelbuttons" widget_class "*Xfce*Panel*.GtkToggleButton" style "panelbuttons" widget_class "*Xfce*NetkTasklist*GtkToggleButton" style "panelbuttons" widget_class "*PanelToplevel*Button" style "panelbuttons" widget_class "*Panel*GtkToggleButton" style "panelbuttons" widget_class "*Xfce*Panel*Button*" style "panelbuttons" widget_class "*" style "panelbuttons" widget_class "**" style "panelbuttons" widget_class "*XfcePanelPlugin.GtkButton" style "panelbuttons" widget "*dict*Applet*" style "panelbuttons" widget_class "*Xfce*NetkTasklist*GtkToggleButton" style "panelbuttons" widget_class "*Tasklist*" style:highest "panelbuttons" class "*Panel*MenuBar*" style "panelbar" widget_class "*Panel*MenuBar*" style "panelbar" widget_class "*Panel*MenuBar*Item*" style:highest "panelbar" widget "*PanelWidget*" style "theme-panel" widget "*PanelApplet*" style "theme-panel" widget "*fast-user-switch*" style "theme-panel" widget "*CPUFreq*Applet*" style "theme-panel" class "PanelApp*" style "theme-panel" class "PanelToplevel*" style "theme-panel" widget_class "*PanelToplevel*" style "theme-panel" widget_class "*notif*" style "theme-panel" widget_class "*Notif*" style "theme-panel" widget_class "*Tray*" style "theme-panel" widget_class "*tray*" style "theme-panel" widget_class "*computertemp*" style "theme-panel" widget_class "*Applet*Tomboy*" style "theme-panel" widget_class "*Applet*Netstatus*" style "theme-panel" # Fixes for tooltip text in some apps. widget_class "*Notif*Beagle*" style "theme-panel" widget_class "*Notif*Brasero*" style "theme-panel" # XFCE panel theming. widget "*Xfce*Panel*" style "theme-panel" class "*Xfce*Panel*" style "theme-panel" widget "*Xfce*Panel*GtkProgressBar" style "theme-panel-progressbar" widget "*WnckPager*" style "workspace-switcher" widget "*TopMenu*" style "theme-panel" widget "*XfceTasklist*" style "panelbuttons" # Fix gtk-entries in the panel widget "*bookmark*GtkEntry" style "panel-entry" # fixes smartbookmark-plugin # Make sure panel text color doesn't change widget_class "*Panel*MenuBar*" style "theme-main-menu-text" widget_class "*Panel**" style "theme-main-menu-text" widget "*.clock-applet-button.*" style "theme-panel-text" widget "*PanelApplet*" style "theme-panel-text" # Override general panel-style with specific plugin-styles widget "*indicator-applet*" style "indicator" widget "*indicator-button*" style "indicator" ================================================ FILE: common/gtk-2.0/xfce-notify.rc ================================================ gtk-color-scheme = "selected_bg_color:#5294E2\nselected_fg_color:#ffffff" style "notify-window" { XfceNotifyWindow::summary-bold = 1 XfceNotifyWindow::border-color = "#17191F" XfceNotifyWindow::border-color-hover = "#17191F" XfceNotifyWindow::border-radius = 3.0 XfceNotifyWindow::border-width = 1.0 XfceNotifyWindow::border-width-hover = 1.0 bg[NORMAL] = "#292C36" } style "notify-button" { bg[NORMAL] = "#434652" bg[PRELIGHT] = "#5C6070" bg[ACTIVE] = @selected_bg_color fg[NORMAL] = "#BAC3CF" fg[PRELIGHT] = "#BAC3CF" fg[ACTIVE] = @selected_fg_color engine "murrine" { gradient_shades = { 1.0, 1.0, 1.0, 1.0 } border_shades = { 1.0, 1.0 } roundness = 2 textstyle = 0 } } style "notify-text" { GtkWidget::link-color = @selected_bg_color fg[NORMAL] = "#BAC3CF" fg[PRELIGHT] = "#BAC3CF" fg[ACTIVE] = "#BAC3CF" engine "murrine" { textstyle = 0 } } style "notify-summary" { font_name = "Bold" } style "notify-progressbar" { GtkProgressBar::min-horizontal-bar-height = 4 xthickness = 0 ythickness = 0 fg[PRELIGHT] = "#000000" bg[NORMAL] = @selected_bg_color bg[ACTIVE] = "#1D1F26" bg[SELECTED] = @selected_bg_color engine "murrine" { gradient_shades = { 1.0, 1.0, 1.0, 1.0 } border_shades = { 1.0, 1.0 } trough_shades = { 1.0, 1.0 } trough_border_shades = { 1.0, 1.0 } progressbarstyle = 0 roundness = 2 textstyle = 0 } } class "XfceNotifyWindow" style "notify-window" widget "XfceNotifyWindow.*.summary" style "notify-summary" widget_class "XfceNotifyWindow.*" style "notify-button" widget_class "XfceNotifyWindow.*." style "notify-text" widget_class "XfceNotifyWindow.*." style "notify-progressbar" widget_class "XfceNotifyWindow.*." style "notify-progressbar" ================================================ FILE: common/gtk-3.0/3.18/Makefile.am ================================================ include ../common.am light/gtk.css: gtk.css | light cp "$<" "$@" light/gtk-dark.css: gtk-dark.css | light cp "$<" "$@" darker/gtk.css: gtk-darker.css | darker cp "$<" "$@" darker/gtk-dark.css: gtk-dark.css | darker cp "$<" "$@" dark/gtk.css: gtk-dark.css | dark cp "$<" "$@" gtk3themeassetsdir = $(gtk3themedir)/assets gtk3themedarkerassetsdir = $(gtk3themedarkerdir)/assets gtk3themedarkassetsdir = $(gtk3themedarkdir)/assets if ENABLE_LIGHT gtk3theme_DATA = light/gtk.css light/gtk-dark.css gtk3themeassets_DATA = $(normal) $(hidpi) endif if ENABLE_DARKER gtk3themedarker_DATA = darker/gtk.css darker/gtk-dark.css gtk3themedarkerassets_DATA = $(normal) $(hidpi) endif if ENABLE_DARK gtk3themedark_DATA = dark/gtk.css gtk3themedarkassets_DATA = $(normal) $(hidpi) endif ================================================ FILE: common/gtk-3.0/3.18/assets.txt ================================================ checkbox-checked checkbox-checked-insensitive checkbox-unchecked checkbox-unchecked-insensitive checkbox-mixed checkbox-mixed-insensitive radio-checked radio-checked-insensitive radio-unchecked radio-unchecked-insensitive radio-mixed radio-mixed-insensitive checkbox-checked-selected checkbox-checked-insensitive-selected checkbox-unchecked-selected checkbox-unchecked-insensitive-selected checkbox-mixed-selected checkbox-mixed-insensitive-selected checkbox-checked-selectionmode checkbox-selectionmode radio-checked-selected radio-checked-insensitive-selected radio-unchecked-selected radio-unchecked-insensitive-selected radio-mixed-selected radio-mixed-insensitive-selected switch switch-active switch-insensitive switch-active-insensitive switch-header switch-active-header switch-insensitive-header switch-active-insensitive-header switch-selected switch-active-selected switch-insensitive-selected switch-active-insensitive-selected titlebutton-close titlebutton-close-backdrop titlebutton-close-hover titlebutton-close-active titlebutton-maximize titlebutton-maximize-backdrop titlebutton-maximize-hover titlebutton-maximize-active titlebutton-unmaximize titlebutton-unmaximize-backdrop titlebutton-unmaximize-hover titlebutton-unmaximize-active titlebutton-minimize titlebutton-minimize-backdrop titlebutton-minimize-hover titlebutton-minimize-active checkbox-checked-dark checkbox-checked-insensitive-dark checkbox-unchecked-dark checkbox-unchecked-insensitive-dark checkbox-mixed-dark checkbox-mixed-insensitive-dark checkbox-checked-selectionmode-dark checkbox-selectionmode-dark radio-checked-dark radio-checked-insensitive-dark radio-unchecked-dark radio-unchecked-insensitive-dark radio-mixed-dark radio-mixed-insensitive-dark switch-dark switch-active-dark switch-insensitive-dark switch-active-insensitive-dark switch-header-dark switch-active-header-dark switch-insensitive-header-dark switch-active-insensitive-header-dark titlebutton-close-dark titlebutton-close-backdrop-dark titlebutton-close-hover-dark titlebutton-close-active-dark titlebutton-maximize-dark titlebutton-maximize-backdrop-dark titlebutton-maximize-hover-dark titlebutton-maximize-active-dark titlebutton-unmaximize-dark titlebutton-unmaximize-backdrop-dark titlebutton-unmaximize-hover-dark titlebutton-unmaximize-active-dark titlebutton-minimize-dark titlebutton-minimize-backdrop-dark titlebutton-minimize-hover-dark titlebutton-minimize-active-dark ================================================ FILE: common/gtk-3.0/3.18/sass/_applications.scss ================================================ // // Tab overrides // GeditNotebook.notebook, ScratchMainWindow .notebook, EphyNotebook.notebook, MidoriNotebook .notebook, TerminalWindow .notebook { tab.reorderable-page.top, tab.top { &:active, &.active-page, &.active-page:hover { box-shadow: inset 0 1px $borders_color, inset 0 -1px $borders_color, inset 1px 0 $borders_color, inset -1px 0 $borders_color; } } } TerminalWindow .notebook { tab.reorderable-page.top, tab.top { padding-top: 7px; border-top-width: 3px; } &.header.top { box-shadow: inset 0 1px opacify($header_border, 1), inset 0 -1px $borders_color; } } // // Evolution // // needed for webkit/GtkStyle/Evolution compatibility GtkHTML { background-color: $base_color; color: $text_color; &:active { color: $selected_fg_color; background-color: $selected_bg_color; } } // // Sushi // // used by gnome-font-viewer and sushi SushiFontWidget { padding: 6px 12px; } // // GNOME Terminal // TerminalWindow { .background { background-color: transparent; } .scrollbar { &.vertical .slider { margin-left: 3px; } &.trough { border-width: 0; } } .notebook { tab .button { color: mix($bg_color, $fg_color, 35%); &:hover { color: $fg_color; border-color: $button_border; background-color: $button_bg; } } .active-page, .prelight-page { .button { @extend %undecorated_button; &:hover { color: lighten(red, 15%); @extend %undecorated_button;} &:active { color: $selected_bg_color; @extend %undecorated_button;} } } } } // // Nautilus // EelEditableLabel.entry { transition: none; } // Workaround for invisible text in rename entry .nautilus-canvas-item { border-radius: 2px; } .nautilus-desktop.nautilus-canvas-item { color: white; text-shadow: 1px 1px transparentize(black, 0.4); &:active { color: $fg_color; } &:selected { color: $selected_fg_color; } } .nautilus-canvas-item.dim-label, .nautilus-list-dim-label { color: mix($fg_color, $bg_color, 50%); &:selected, &:selected:focus { color: mix($selected_fg_color, $selected_bg_color, 80%); } } NautilusNotebook.notebook { background-color: $base_color; tab { border-width: 0; border-style: solid; border-color: transparent; background-color: transparent; } } NautilusQueryEditor .search-bar.toolbar { padding: 5px; box-shadow: none; background-color: $base_color; } .nautilus-circular-button.image-button.button { border-radius: 50%; outline-radius: 50%; padding: 8px; } $disk_space_unknown: transparentize($fg_color, 0.5); $disk_space_used: transparentize($selected_bg_color, 0.2); $disk_space_free: darken($bg_color, 3%); .disk-space-display { border-style: solid; border-width: 1px; &.unknown { background-color: $disk_space_unknown; border-color: darken($disk_space_unknown, 10%); } &.used { background-color: $disk_space_used; border-color: darken($disk_space_used, 10%); } &.free { background-color: $disk_space_free; border-color: darken($disk_space_free, 10%); } } // // Nemo // .nemo-desktop.nemo-canvas-item { @extend .nautilus-desktop.nautilus-canvas-item; } NemoWindow { .sidebar .frame { border-width: 0; } GtkSeparator.separator.horizontal { color: $borders_color; } .primary-toolbar NemoPathBar.linked:not(.vertical):not(.path-bar) > .button { @include button(header-hover); &:hover { background-color: lighten($header_button_bg, 15%); } &:active, &:checked { @include button(header-active); } &:insensitive { color: transparentize($header_fg, 0.4); } } .primary-toolbar NemoPathBar.linked:not(.vertical):not(.path-bar) > .button, .primary-toolbar NemoPathBar.linked:not(.vertical):not(.path-bar) > .button:hover, .primary-toolbar NemoPathBar.linked:not(.vertical):not(.path-bar) > .button:active, .primary-toolbar NemoPathBar.linked:not(.vertical):not(.path-bar) > .button:checked, .primary-toolbar NemoPathBar.linked:not(.vertical):not(.path-bar) > .button:insensitive { @extend %linked; } .primary-toolbar NemoPathBar.linked:not(.vertical):not(.path-bar) { $_linked_separator_color: $header_button_border; > .button:hover:not(:checked):not(:active):not(:only-child) { &:hover { box-shadow: inset 1px 0 $_linked_separator_color, inset -1px 0 $_linked_separator_color; } &:first-child:hover { box-shadow: inset -1px 0 $_linked_separator_color; } &:last-child:hover { box-shadow: inset 1px 0 $_linked_separator_color; } } } .nemo-inactive-pane .view, .nemo-inactive-pane iconview { color: $insensitive_fg_color; background-color: $base_color; } } // // Gedit // .gedit-headerbar-paned { color: $header_border; } .open-document-selector-treeview.view { padding: 3px 6px 3px 6px; border-color: $base_color; // disable borders, making them transparent doesn't work for some reason &:prelight { background-color: mix($fg_color, $base_color, 7%); &:selected { color: $selected_fg_color; background-color: $selected_bg_color; } } } .open-document-selector-name-label { color: $fg_color; } .open-document-selector-path-label { color: mix($fg_color, $base_color, 50%); font-size: smaller; &:selected { color: transparentize($selected_fg_color, 0.1); } } .gedit-document-panel { .list-row .button { color: transparent; background-image: none; background-color: transparent; border: none; box-shadow: none; padding: 4px; & GtkImage { color: inherit; } } .prelight-row .button { color: mix($bg_color, $fg_color, 35%); } .list-row .button:hover, .prelight-row .button:hover { color: lighten(red, 15%); } .prelight-row:selected .button:hover { color: lighten(red, 20%); background-image: none; background-color: transparent; border: none; box-shadow: none; &:active { color: $selected_fg_color; } } .prelight-row .button:active { color: $fg_color; } } .gedit-document-panel-dragged-row { border: 1px solid $borders_color; background-color: darken($bg_color, 10%); color: $fg_color; } //.gedit-document-panel-placeholder-row { //} GeditStatusbar { border-top: 1px solid $borders_color; background-color: $bg_color; } GeditStatusMenuButton.button.flat, GeditStatusMenuButton:prelight.button.flat, GeditStatusMenuButton:checked.button.flat { border-bottom-style: none; border-radius: 0; } GeditViewFrame .gedit-search-slider { @extend %search_slider } GeditFileBrowserWidget .toolbar { border-bottom: 1px solid $borders_color; } .gedit-map-frame { @if $variant=='light' { border-color: transparentize(black, 0.7); } } .gedit-search-entry-occurrences-tag { color: transparentize($fg_color, 0.4); border: none; margin: 2px; padding: 2px; } %search_slider { background-color: lighten($bg_color, 2%); padding: 6px; border-color: $borders_color; border-radius: 0 0 2px 2px; border-width: 0 1px 1px 1px; border-style: solid; } // // Gnome Builder // GbWorkbench .floating-bar { color: $fg_color; } GbSearchBox.linked:not(.vertical) { > GtkMenuButton.button:last-child:dir(ltr), > GtkMenuButton.button:first-child:dir(rtl) { padding: 0 10px; @include entry(header-normal); &:hover { @include entry(header-focus); } &:active, &:checked { @include entry(header-focus); } &:insensitive { @include entry(header-insensitive); } } > GtkMenuButton.button:last-child:dir(ltr), > GtkMenuButton.button:last-child:dir(ltr):hover, > GtkMenuButton.button:last-child:dir(ltr):active, > GtkMenuButton.button:last-child:dir(ltr):checked { border-left-style: none; border-radius: 0 3px 3px 0; outline-radius: 0 1px 1px 0; } > GtkMenuButton.button:last-child:dir(rtl), > GtkMenuButton.button:last-child:dir(rtl):hover, > GtkMenuButton.button:last-child:dir(rtl):active, > GtkMenuButton.button:last-child:dir(rtl):checked { border-right-style: none; border-radius: 3px 0 0 3px; outline-radius: 1px 0 0 1px; } } // Preference page language style GbPreferencesPageLanguage { .entry { border-radius: 3px 3px 0 0; } .frame { border-top-width: 0 } } // Editor tweak widget GbEditorTweakWidget { .linked.vertical > .entry { border-bottom-style: solid; } GtkScrolledWindow { border-top: none; } } // View stack styling GbViewStack GtkBox.header.notebook { border-bottom: 1px solid $borders_color; } GbViewStack.focused GtkBox.header.notebook, #project_sidebar_header.focused { background-color: $base_color; } GbEditorWorkspace > GtkPaned > GtkBox > GtkBox.header.notebook { border-bottom: 1px solid $borders_color; } GbNewProjectDialog GtkFileChooserButton.linked-on-right .button { border-radius: 3px 0 0 3px; } // Workspace pane header styling GbWorkspacePane GtkBox.header.notebook { border-bottom: 1px solid $borders_color; } GbWorkspacePane:not(.focused) GtkBox.header.notebook { background-color: $bg_color; } // Adjust devehlp and symbol panel styling DhSidebar GtkSearchEntry.entry, SymbolTree GtkSearchEntry.entry { border-left: none; border-right: none; border-top: none; border-radius: 0px; } // Command Bar styling GtkEntry.gb-command-bar-entry.entry.flat, GtkEntry.gb-command-bar-entry.entry.flat:focus { font-family: Monospace; color: $osd_fg_color; background-image: none; background-color: opacify($osd_bg_color, 1); padding: 6px 6px 6px 6px; border: none; &:selected, &:selected:focus { @extend %selected_items; } } GbTerminalView { background-color: $base_color; color: $fg_color; } GbSourceStyleSchemeWidget GtkSourceView { font-family: Monospace; } GtkScrolledWindow.gb-linked-scroller { border-top: none; } // Disable various animatinos that are enabled by default and really annoying // to the overall flow of Builder. GbSearchDisplayGroup GtkListBox .list-row, GbDocumentStack .button { transition: none; } GbViewStack GtkBox.header.notebook, GbEditorWorkspace > GtkPaned > GtkBox > GtkBox.header.notebook { border-bottom: 1px solid $borders_color; } GbViewStack.focused GtkBox.header.notebook { background-color: $base_color; .button.dim-label { opacity: 1; } } // // Epiphany // EphyWindow .floating-bar { // Epiphany overrides the floating-bar style, so reset it color: $fg_color; } // // Gnome Documents // .documents-load-more.button { border-width: 1px 0 0; border-radius: 0; } .documents-icon-bg { background-color: $selected_bg_color; color: $selected_fg_color; border-radius: 2px; } .documents-collection-icon { background-color: transparentize($fg_color, 0.7); border-radius: 2px; } .documents-favorite.button:active, .documents-favorite.button:active:hover { color: lighten($selected_bg_color, 20%); } .documents-entry-tag { background-color: $selected_bg_color; color: $selected_fg_color; border-radius: 2px; border-width: 0; margin: 2px; padding: 4px; &:hover { color: $selected_fg_color; background-color: lighten($selected_bg_color, 4%); } &:active { color: $selected_fg_color; background-color: darken($selected_bg_color, 4%); } .toolbar .linked &.button { background: none; border: none; box-shadow: none; icon-shadow: none; &:hover { color: transparentize($selected_fg_color, 0.3) } } } .content-view.document-page { border-style: solid; border-width: 3px 3px 6px 4px; border-image: url("assets/thumbnail-frame.png") 3 3 6 4; } // // Totem // TotemGrilo.vertical GdMainView.frame { border-width: 0; } // // Synapse // SynapseGuiSelectionContainer *:selected, SynapseGuiViewVirgilio *:selected { background-color: $selected_bg_color; } // // Transmission // .tr-workarea .undershoot, .tr-workarea .overshoot { border-color: transparent; // Remove black border on over- and undershoot } // // Fallback Mode/Budgie Panel // .gnome-panel-menu-bar.menubar, PanelApplet > GtkMenuBar.menubar, PanelToplevel, PanelWidget, PanelAppletFrame, PanelApplet { color: $panel_fg; background-color: opacify($panel_bg, 1); } PanelApplet .button, PanelApplet .button:backdrop { padding: 4px; border: 2px solid transparent; border-radius: 0; background-image: none; background-color: transparent; color: $panel_fg; } PanelApplet .button:hover { color: lighten($panel_fg, 10%); background-color: transparentize(black, 0.83); border-color: transparentize(black, 0.83); } PanelApplet .button:active, PanelApplet .button:active:backdrop, PanelApplet .button:checked, PanelApplet .button:checked:backdrop { background-clip: padding-box; color: white; background-color: transparentize(black, 0.75); border-radius: 0; border-color: transparentize(black, 0.75); box-shadow: inset 0 -2px $selected_bg_color; } PanelApplet:hover { color: white; } PanelApplet:active, PanelApplet:hover:active { color: $selected_bg_color; } WnckPager { color: mix($panel_fg, black, 50%); &:selected { color: $selected_bg_color } } NaTrayApplet { -NaTrayApplet-icon-padding: 0; -NaTrayApplet-icon-size: 16; } ClockBox { color: $panel_fg; } // Xfce Panel .xfce4-panel.panel { background-color: $panel_bg; text-shadow: none; icon-shadow: none; .button.flat { color: $panel_fg; background-color: transparentize($panel_bg, 1); border-radius: 0; border: none; &:hover { border: none; background-color: lighten($panel_bg, 10%); } &:active, &:checked { color: $selected_fg_color; border: none; background-color: $selected_bg_color; } } } // // Floating Bar // .floating-bar { background-color: $selected_bg_color; color: $selected_fg_color; &.top { border-radius: 0 0 2px 2px; } &.right { border-radius: 2px 0 0 2px; } &.bottom { border-radius: 2px 2px 0 0; } &.left { border-radius: 0 2px 2px 0; } .button { -GtkButton-image-spacing: 0; -GtkButton-inner-border: 0; background-color: transparent; box-shadow: none; border: none; } } // Elementary Apps // // Birdie // BirdieWidgetsTweetList * { background-image: none; background-color: transparent; } // // Marlin / Pantheon Files // MarlinViewWindow { *:selected, *:selected:focus { color: $selected_fg_color; background-color: $selected_bg_color; outline-color: transparent; } GtkIconView.view:selected { &, &:focus, &:hover, &:focus:hover { background-color: transparent; } } FMListView, FMColumnView { outline-color: transparent; } } .marlin-pathbar.pathbar { border-radius: 3px; padding-left: 4px; padding-right: 4px; @include entry(header-normal); &:focus { @include entry(header-focus) } &:insensitive { @include entry(header-insensitive) } &:active, &:checked { color: $selected_bg_color; } } // // Gala // .gala-notification { border: 1px solid rgba(0, 0, 0, 0.35); border-radius: 3px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); background-image: linear-gradient(to bottom, white); background-color: transparent; .title, .label { color: #5c616c; } } // // Wingpanel // .panel { background-color: transparent; color: white; font-weight: bold; text-shadow: 0 1px 2px transparentize(black, 0.4); icon-shadow: 0 1px 2px transparentize(black, 0.4); .maximized { background-color: $panel_bg; box-shadow: inset 0 -1px darken($panel_bg, 7%); } &-shadow { background-image: none; background-color: transparent; } .menu { box-shadow: none; .menuitem { font-weight: normal; text-shadow: none; icon-shadow: none; } .window-frame.menu.csd, .window-frame.popup.csd { box-shadow: 0 0 0 1px transparentize(black, 0.8), 0 10px 20px transparentize(black, 0.81), 0 6px 6px transparentize(black, 0.77); } } .menubar > .menuitem { padding: 3px 6px; &:hover { background-color: transparent; } } .window-frame.menu.csd, .window-frame.popup.csd { box-shadow: none; } } .composited-indicator { background-color: transparent; color: white; text-shadow: 0 1px 2px transparentize(black, 0.4); icon-shadow: 0 1px 2px transparentize(black, 0.4); > GtkWidget > GtkWidget:first-child { padding: 0 2px; } .menuitem:active, .menuitem:prelight { border-style: none; background-image: none; box-shadow: none; } > .popup > .menu { padding-top: 8px; padding-bottom: 8px; } .color-light & { color: transparentize(black, 0.35); text-shadow: 0 0 2px transparentize(white, 0.7), 0 1px 0 transparentize(white, 0.75); icon-shadow: 0 0 2px transparentize(white, 0.7), 0 1px 0 transparentize(white, 0.75); } } .panel-app-button > GtkWidget > GtkWidget:first-child { padding: 0 2px 0 4px; } .panel .menu .spinner, .menu .spinner { opacity: 1 } // Fixes sound indicator buttons // // Wingpanel Popover // WingpanelWidgetsIndicatorPopover.popover { padding: 0; font: initial; text-shadow: none; icon-shadow: none; .sidebar { background: none; } .menuitem { padding: 5px; outline-color: transparent; text-shadow: none; icon-shadow: none; GtkLabel, GtkImage { padding: 0 3px; } &:hover, &:active { color: $selected_fg_color; background-color: $selected_bg_color; } *:insensitive { color: $insensitive_fg_color; } } } // // Pantheon Terminal // PantheonTerminalPantheonTerminalWindow.background { background-color: transparent; } // // Switchboard // SwitchboardCategoryView .view:selected, SwitchboardCategoryView .view:selected:focus { color: $fg_color; } // // Chromium // GtkWindow.background.chromium { // See details in nav_button_provider_gtk3.cc .header-bar.titlebar .button.titlebutton { // move button spacing from padding to margin margin: 0px ((24px - 16px) / 2); padding: 0px; } } ================================================ FILE: common/gtk-3.0/3.18/sass/_colors-public.scss ================================================ //apps rely on some named colors to be exported // Sass thinks we're using the colors in the variables as strings and may shoot // warning, it's innocuous and can be defeated by using "" + $var @define-color theme_fg_color #{"" + $fg_color}; @define-color theme_text_color #{"" + $text_color}; @define-color theme_bg_color #{"" + $bg_color}; @define-color theme_base_color #{"" + $base_color}; @define-color theme_selected_bg_color #{"" + $selected_bg_color}; @define-color theme_selected_fg_color #{"" + $selected_fg_color}; @define-color fg_color #{"" + $fg_color}; @define-color text_color #{"" + $text_color}; @define-color bg_color #{"" + $bg_color}; @define-color base_color #{"" + $base_color}; @define-color selected_bg_color #{"" + $selected_bg_color}; @define-color selected_fg_color #{"" + $selected_fg_color}; @define-color insensitive_bg_color #{"" + $insensitive_bg_color}; @define-color insensitive_fg_color alpha(#{"" + opacify($insensitive_fg_color, 1)}, 0.5); @define-color insensitive_base_color #{"" + $base_color}; @define-color theme_unfocused_fg_color #{"" + $fg_color}; @define-color theme_unfocused_text_color #{"" + $text_color}; @define-color theme_unfocused_bg_color #{"" + $bg_color}; @define-color theme_unfocused_base_color #{"" + $base_color}; @define-color borders #{"" + $borders_color}; @define-color unfocused_borders #{"" + $borders_color}; @define-color warning_color #{"" + $warning_color}; @define-color error_color #{"" + $error_color}; @define-color success_color #{"" + $success_color}; @define-color placeholder_text_color #{#A8A8A8}; @define-color link_color #{"" + $link_color}; @define-color content_view_bg #{"" + $base_color}; //WM $wm_highlight: lighten(opacify($header_bg, 1), 3%); $wm_bg_unfocused: opacify($header_bg_backdrop, 1); @define-color wm_title alpha(#{"" + opacify($header_fg, 1)}, 0.8); @define-color wm_unfocused_title alpha(#{"" + opacify($header_fg, 1)}, 0.5); @define-color wm_bg #{"" + opacify($header_bg, 1)}; @define-color wm_bg_unfocused #{"" + $wm_bg_unfocused}; @define-color wm_highlight #{"" + $wm_highlight}; @define-color wm_shadow alpha(#{black}, 0.35); //WM Buttons // Close @define-color wm_button_close_bg #{"" + $wm_button_close_bg}; @define-color wm_button_close_hover_bg #{"" + $wm_button_close_hover_bg}; @define-color wm_button_close_active_bg #{"" + $wm_button_close_active_bg}; @define-color wm_icon_close_bg #{"" + $wm_icon_close_bg}; // Minimize, Maximize @define-color wm_button_hover_bg #{"" + $wm_button_hover_bg}; @define-color wm_button_active_bg #{"" + $wm_button_active_bg}; @define-color wm_button_hover_border #{"" + $wm_button_hover_border}; @define-color wm_icon_bg #{"" + $wm_icon_bg}; @define-color wm_icon_unfocused_bg #{"" + $wm_icon_unfocused_bg}; @define-color wm_icon_hover_bg #{"" + $wm_icon_hover_bg}; @define-color wm_icon_active_bg #{"" + $wm_icon_active_bg}; ================================================ FILE: common/gtk-3.0/3.18/sass/_colors.scss ================================================ // When color definition differs for dark and light variant, // it gets @if ed depending on $variant $base_color: if($variant =='light', #ffffff, #404552); $text_color: if($variant == 'light', #3b3e45, #D3DAE3); $bg_color: if($variant =='light', #F5F6F7, #383C4A); $fg_color: if($variant =='light', #3b3e45, #D3DAE3); $selected_fg_color: #ffffff; $selected_bg_color: #5294e2; $selected_borders_color: darken($selected_bg_color, 20%); $borders_color: if($variant =='light', darken($bg_color,9%), darken($bg_color,6%)); $link_color: if($variant == 'light', darken($selected_bg_color,10%), lighten($selected_bg_color,20%)); $link_visited_color: if($variant == 'light', darken($selected_bg_color,20%), lighten($selected_bg_color,10%)); $selection_mode_bg: if($transparency == 'true', transparentize($selected_bg_color, 0.05), $selected_bg_color); $selection_mode_fg: $selected_fg_color; $warning_color: #F27835; $error_color: #FC4138; $warning_fg_color: white; $error_fg_color: white; $success_color: #73d216; $destructive_color: #F04A50; $suggested_color: #4DADD4; $destructive_fg_color: white; $suggested_fg_color: white; $drop_target_color: #F08437; //insensitive state derived colors $insensitive_fg_color: if($variant == 'light', transparentize($fg_color, 0.45), transparentize($fg_color, 0.55)); $insensitive_bg_color: if($variant == 'light', mix($bg_color, $base_color, 40%), lighten($bg_color, 2%)); $header_bg: red; @if $transparency=='true' and $variant=='light' { $header_bg: transparentize(#e7e8eb, 0.05); } @if $transparency=='false' and $variant=='light' { $header_bg: #e7e8eb; } @if $transparency=='true' and ($variant=='dark' or $darker=='true') { $header_bg: transparentize(#2f343f, 0.03); } @if $transparency=='false' and ($variant=='dark' or $darker=='true') { $header_bg: #2f343f; } $header_bg_backdrop: if($darker == 'true' or $variant == 'dark', lighten($header_bg, 1.5%), lighten($header_bg, 3%)); $header_border: if($variant == 'light' and $darker=='false', darken($header_bg, 7%), darken($header_bg, 4%)); $header_fg: if($variant == 'light', saturate(transparentize($fg_color, 0.2), 10%), saturate(transparentize($fg_color, 0.2), 10%)); $header_fg: if($darker == 'true', saturate(transparentize(#D3DAE3, 0.2), 10%), $header_fg); $dark_sidebar_bg: if($transparency == 'true', transparentize(#353945, 0.05), #353945); $dark_sidebar_fg: #BAC3CF; $dark_sidebar_border: if($variant == 'light', $dark_sidebar_bg, darken($dark_sidebar_bg, 5%)); $osd_fg_color: $dark_sidebar_fg; $osd_bg_color: $dark_sidebar_bg; $osd_button_bg: transparentize(lighten($osd_bg_color, 22%), 0.6); $osd_button_border: transparentize(darken($osd_bg_color, 12%), 0.6); $osd_entry_bg: transparentize(lighten($osd_bg_color, 22%), 0.6); $osd_entry_border: transparentize(darken($osd_bg_color, 12%), 0.6); $osd_insensitive_bg_color: darken($osd_bg_color, 3%); $osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 30%); $osd_borders_color: transparentize(black, 0.3); $panel_bg: darken($dark_sidebar_bg, 4.7%); $panel_fg: $dark_sidebar_fg; $entry_bg: if($variant=='light', $base_color, lighten($base_color, 0%)); $entry_border: if($variant == 'light', #cfd6e6, darken($borders_color, 0%)); $header_entry_bg: if($darker == 'true' or $variant == 'dark', transparentize(lighten($header_bg, 22%), 0.6), transparentize($base_color, 0.1)); $header_entry_border: if($darker == 'true' or $variant == 'dark', transparentize(darken($header_bg, 12%), 0.6), transparentize($header_fg, 0.7)); $button_bg: if($variant == 'light', lighten($bg_color, 2%), lighten($base_color, 2%)); $button_border: $entry_border; $header_button_bg: if($darker == 'true' or $variant == 'dark', transparentize(lighten($header_bg, 22%), 0.6), transparentize($button_bg, 0.1)); $header_button_border: if($darker == 'true' or $variant == 'dark', transparentize(darken($header_bg, 12%), 0.6), transparentize($header_fg, 0.7)); //WM Buttons // Close $wm_button_close_bg: if($variant == 'light' and $darker == 'false', #f46067, #cc575d); $wm_button_close_hover_bg: if($variant == 'light' and $darker == 'false', #f68086, #d7787d); $wm_button_close_active_bg: if($variant == 'light' and $darker == 'false', #f13039, #be3841); $wm_icon_close_bg: if($variant == 'light' and $darker == 'false',#F8F8F9 , #2f343f); // Minimize, Maximize $wm_button_hover_bg: if($variant == 'light' and $darker == 'false', #fdfdfd, #454C5C); $wm_button_active_bg: $selected_bg_color; $wm_button_hover_border: if($variant == 'light' and $darker == 'false', #D1D3DA, #262932); $wm_icon_bg: if($variant == 'light' and $darker == 'false', #90949E, #90939B); $wm_icon_unfocused_bg: if($variant == 'light' and $darker == 'false', #B6B8C0, #666A74); $wm_icon_hover_bg: if($variant == 'light' and $darker == 'false', #7A7F8B, #C4C7CC); $wm_icon_active_bg: $selected_fg_color; ================================================ FILE: common/gtk-3.0/3.18/sass/_common.scss ================================================ @function gtkalpha($c,$a) { @return unquote("alpha(#{$c},#{$a})"); } $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); $asset_suffix: if($variant=='dark', '-dark', ''); // use dark assets in dark variant $darker_asset_suffix: if($darker=='true', '-dark', $asset_suffix); * { background-clip: padding-box; -GtkToolButton-icon-spacing: 4; -GtkTextView-error-underline-color: $error_color; -GtkCheckButton-indicator-size: 16; -GtkCheckMenuItem-indicator-size: 16; -GtkScrolledWindow-scrollbar-spacing: 0; -GtkScrolledWindow-scrollbars-within-bevel: 1; -GtkToolItemGroup-expander-size: 11; -GtkExpander-expander-size: 16; -GtkTreeView-expander-size: 11; -GtkTreeView-horizontal-separator: 4; -GtkMenu-horizontal-padding: 0; -GtkMenu-vertical-padding: 0; -GtkWidget-link-color: $link_color; -GtkWidget-visited-link-color: $link_visited_color; -GtkWidget-focus-padding: 2; // FIXME: do we still need these? -GtkWidget-focus-line-width: 1; // -GtkWidget-text-handle-width: 20; -GtkWidget-text-handle-height: 20; -GtkDialog-button-spacing: 4; -GtkDialog-action-area-border: 0; -GtkStatusbar-shadow-type: none; // We use the outline properties to signal the focus properties outline-color: transparentize($fg_color, 0.7); outline-style: dashed; outline-offset: -3px; outline-width: 1px; outline-radius: 2px; } // // Base States // .background { color: $fg_color; background-color: if($transparency == 'true', transparentize($bg_color, 0.001), $bg_color); // without this headerbar transparency doesn't seem to work } *:insensitive { -gtk-image-effect: dim; } .gtkstyle-fallback { background-color: $bg_color; color: $fg_color; &:prelight { background-color: lighten($bg_color, 10%); color: $fg_color; } &:active { background-color: darken($bg_color, 10%); color: $fg_color; } &:insensitive { background-color: $insensitive_bg_color; color: $insensitive_fg_color; } &:selected { background-color: $selected_bg_color; color: $selected_fg_color; } } .view { color: $text_color; background-color: $base_color; &:selected, &:selected:focus, &:selected:hover { @extend %selected_items; } &.dim-label { color: transparentize($text_color, 0.45); &:selected, &:selected:focus { color: transparentize($selected_fg_color, 0.35); text-shadow: none; } } } .rubberband { border: 1px solid darken($selected_bg_color, 10%); background-color: transparentize(darken($selected_bg_color, 10%), 0.8); } .label { &.separator { color: $fg_color; @extend .dim-label; } &:selected, &:selected:focus, &:selected:hover { @extend %selected_items; } &:insensitive { color: $insensitive_fg_color; } } .dim-label { opacity: 0.55; } GtkAssistant { .sidebar { background-color: $base_color; border-top: 1px solid $borders_color; &:dir(ltr) { border-right: 1px solid $borders_color; } &:dir(rtl) { border-left: 1px solid $borders_color; } } &.csd .sidebar { border-top-style: none; } .sidebar .label { padding: 6px 12px; } .sidebar .label.highlight { background-color: $selected_bg_color; color: $selected_fg_color; } } GtkTextView { // This will get overridden by .view, needed by gedit line numbers background-color: mix($bg_color, $base_color, 50%); } .grid-child { padding: 3px; border-radius: 3px; &:selected { @extend %selected_items; outline-offset: -2px; } } %osd, .osd { color: $osd_fg_color; border: none; background-color: $osd_bg_color; background-clip: padding-box; outline-color: transparentize($osd_fg_color, 0.7); box-shadow: none; } // // Spinner Animations // @keyframes spin { to { -gtk-icon-transform: rotate(1turn); } } .spinner { background-image: none; background-color: blue; opacity: 0; // non spinning spinner makes no sense -gtk-icon-source: -gtk-icontheme('process-working-symbolic'); &:active { opacity: 1; animation: spin 1s linear infinite; &:insensitive { opacity: 0.5; } } } $vert_padding: 5px; // // Text Entries // .entry { border: 1px solid; padding: $vert_padding 8px; border-radius: 3px; transition: all 200ms $ease-out-quad; @include entry(normal); &.image { // icons inside the entry color: mix($fg_color,$base_color,80%); &.left { padding-left: 0; } &.right { padding-right: 0; } } &.flat, &.flat:focus { padding: 2px; @include entry(normal); border: none; border-radius: 0; } &:focus { background-clip: border-box; @include entry(focus); } &:insensitive { @include entry(insensitive); } &:selected, &:selected:focus { background-color: $selected_bg_color; color: $selected_fg_color; } &.progressbar { margin: 2px 12px; border-radius: 0; border-width: 0 0 2px; border-color: $selected_bg_color; border-style: solid; background-image: none; background-color: transparent; box-shadow: none; } @each $e_type, $e_color, $e_fg_color in (warning, $warning_color, $warning_fg_color), (error, $error_color, $error_fg_color) { &.#{$e_type} { color: $selected_fg_color; border-color: if($variant=='light', $e_color, $entry_border); background-image: linear-gradient(to bottom, mix($e_color, $base_color, 60%)); &:focus { color: $e_fg_color; background-image: linear-gradient(to bottom, $e_color); box-shadow: none; } &:selected, &:selected:focus { background-color: $e_fg_color; color: $e_color; } } } .osd & { @include entry(osd); &:focus { @include entry(osd-focus); } &:insensitive { @include entry(osd-insensitive); } } .linked:not(.vertical) > &, .linked:not(.vertical) > &:focus { @extend %linked; } .linked.vertical > &, .linked.vertical > &:focus { @extend %linked_vertical; } } GtkSearchEntry.entry { border-radius: 20px; } // // Buttons // // stuff for .needs-attention $_dot_color: $selected_bg_color; @keyframes needs_attention { from { background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to($_dot_color), to(transparent)); } to { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to($selected_bg_color), to(transparent)); } } .button { $_button_transition: all 200ms $ease-out-quad; transition: $_button_transition; border: 1px solid; border-radius: 3px; padding: $vert_padding 8px; @include button(normal); &.flat { @include button(undecorated); background-color: transparentize($button_bg, 1); border-color: transparentize($button_border, 1); // to avoid adiacent buttons borders clashing when transitioning, the transition on the normal state is set // to none, while it's added back in the hover state, so the button decoration will fade in on hover, but // it won't fade out when the pointer leave the button allocation area. To make the transition more evident // in this case the duration is increased. transition: none; &:hover { transition: $_button_transition; transition-duration: 350ms; &:active { transition: $_button_transition; } } } &:hover { @include button(hover); -gtk-image-effect: highlight; } &:active, &:checked { background-clip: if($variant=='light', border-box, padding-box); @include button(active); transition-duration: 50ms; &:not(:insensitive) .label:insensitive { color: inherit; opacity: 0.6; } } //Webkitgtk workaround start &:active { color: $fg_color; } &:active:hover, &:checked { color: $selected_fg_color; } //Webkitgtk workaround end &.flat:insensitive { @include button(undecorated); } &:insensitive { @include button(insensitive); &:active, &:checked { @include button(insensitive-active); } } // big standalone buttons like in Documents pager &.osd { color: $osd_fg_color; outline-color: transparentize($osd_fg_color, 0.7); background-color: $osd_bg_color; border-color: darken($osd_bg_color, 8%); &.image-button { padding: 10px; } &:hover { color: $selected_bg_color; } &:active, &:checked { @include button(osd-active); } &:insensitive { @include button(osd-insensitive); } } //overlay / OSD style .osd & { @include button(osd); &:hover { @include button(osd-hover); } &:active, &:checked { background-clip: padding-box; @include button(osd-active); } &:insensitive { @include button(osd-insensitive); } &, &:hover, &:active, &:checked, &:insensitive { @extend %linked; } &.flat { @include button(undecorated); box-shadow: none; &:hover { @include button(osd-hover); } &:insensitive { @include button(osd-insensitive); background-image: none; } &:active, &:checked { @include button(osd-active); } } } .osd .linked:not(.vertical):not(.path-bar) > &:hover:not(:checked):not(:active):not(:only-child), .osd .linked:not(.vertical):not(.path-bar) > &:hover:not(:checked):not(:active) + &:not(:checked):not(:active) { box-shadow: none; } // Suggested and Destructive Action buttons @each $b_type, $b_color, $b_fg in (suggested-action, $suggested_color, $suggested_fg_color), (destructive-action, $destructive_color, $destructive_fg_color) { &.#{$b_type} { @include button(suggested_destructive, $b_color, $b_fg); &.flat { @include button(undecorated); color: $b_color; outline-color: transparentize($b_color, 0.7); } &:hover { @include button(suggested_destructive, lighten($b_color, 10%), $b_fg); } &:active, &:checked { @include button(suggested_destructive, darken($b_color, 10%), $b_fg); } &.flat:insensitive { @include button(undecorated); color: $insensitive_fg_color; } &:insensitive { @include button(insensitive); } } } &.image-button { padding: 2px + $vert_padding; } .header-bar &.image-button { padding: 2px + $vert_padding 10px; } &.text-button { padding-left: 16px; padding-right: 16px; } &.text-button.image-button { // those buttons needs uneven horizontal padding, we want the icon side // to have the image-button padding, while the text side the text-button // one, so we're adding the missing padding to the label depending on // its position inside the button padding: $vert_padding 8px; // same as .button GtkLabel:first-child { padding-left: 8px; } GtkLabel:last-child { padding-right: 8px; } } .stack-switcher > & { // to position the needs attention dot, padding is added to the button // child, a label needs just lateral padding while an icon needs vertical // padding added too. outline-offset: -3px; // needs to be set or it gets overridden by GtkRadioButton outline-offset > GtkLabel { padding-left: 6px; // label padding padding-right: 6px; // } > GtkImage { padding-left: 6px; padding-right: 6px; padding-top: $vert_padding - 2px; padding-bottom: $vert_padding - 2px; } &.text-button { padding: $vert_padding 10px; } // needed or it will get overridden &.image-button { padding: $vert_padding - 3px 4px; } &.needs-attention > .label, &.needs-attention > GtkImage { @extend %needs_attention; } &.needs-attention:active > .label, &.needs-attention:active > GtkImage, &.needs-attention:checked > .label, &.needs-attention:checked > GtkImage { animation: none; background-image: none; } } %needs_attention { animation: needs_attention 150ms ease-in; background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to($_dot_color), to(transparent)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; @if $variant == 'light' { background-position: right 3px, right 4px; } @else { background-position: right 3px, right 2px; } &:dir(rtl) { @if $variant == 'light' { background-position: left 3px, left 4px; } @else { background-position: left 3px, left 2px; } } } //inline-toolbar buttons .inline-toolbar &, .inline-toolbar &:backdrop { border-radius: 2px; border-width: 1px; @extend %linked; } .linked:not(.vertical) > &, .linked:not(.vertical) > &:hover, .linked:not(.vertical) > &:active, .linked:not(.vertical) > &:checked { @extend %linked; } .linked.vertical > &, .linked.vertical > &:hover, .linked.vertical > &:active, .linked.vertical > &:checked { @extend %linked_vertical; } } // all the following is for the +|- buttons on inline toolbars, that way // should really be deprecated... .inline-toolbar GtkToolButton > .button { // redefining the button look is // needed since those are flat... @include button(normal); &:hover { @include button(hover); } &:active, &:checked{ @include button(active); } &:insensitive { @include button(insensitive); } &:insensitive:active, &:insensitive:checked { @include button(insensitive-active); } } // More inline toolbar buttons .inline-toolbar.toolbar GtkToolButton { & > .button.flat { @extend %linked_middle; } &:first-child > .button.flat { @extend %linked:first-child; } &:last-child > .button.flat { @extend %linked:last-child; } &:only-child > .button.flat { @extend %linked:only-child; } } // Some crazy linking stuff @mixin linking_rules($a:0.7, $var:$variant, $vert:'false', $entry_rules:'true', $button_rules:'true', $e_border:$entry_border, $b_border:$button_border) { $_border: if($vert=='false', left, top); @if $entry_rules=='true' { > .entry + .entry { border-#{$_border}-color: transparentize($e_border, $a); } > .entry.error + .entry, > .entry + .entry.error { border-#{$_border}-color: if($var=='light', $error_color, transparentize($e_border, $a)); } > .entry.warning + .entry, > .entry + .entry.warning { border-#{$_border}-color: if($var=='light', $warning_color, transparentize($e_border, $a)); } > .entry.error + .entry.warning, > .entry.warning + .entry.error { border-#{$_border}-color: if($var=='light', mix($error_color, $warning_color, 50%), transparentize($e_border, $a));} @each $e_type, $e_color in ('',$selected_bg_color), ('.warning', $warning_color), ('.error', $error_color) { > .entry + .entry#{$e_type}:focus:not(:last-child), > .entry + .entry#{$e_type}:focus:last-child { border-#{$_border}-color: if($var=='light', $e_color, $e_border); } > .entry#{$e_type}:focus:not(:only-child) { + .entry, + .button, + GtkComboBox > .the-button-in-the-combobox, + GtkComboBoxText > .the-button-in-the-combobox { border-#{$_border}-color: if($var=='light', $e_color, $e_border); } } } > .button:active + .entry, > .button:checked + .entry { border-#{$_border}-color: if($var=='light', $selected_bg_color, $e_border); } } @if $button_rules=='true' { $_uncolored_button: '.button:not(:checked):not(:active):not(.suggested-action):not(.destructive-action)'; > .button + .button { border-#{$_border}-style: none; } > #{$_uncolored_button}:hover:not(:only-child), > #{$_uncolored_button}:hover + #{$_uncolored_button} { box-shadow: inset if($vert=='false', 1px 0, 0 1px) $b_border; } > #{$_uncolored_button}:first-child:hover, > .button:active + #{$_uncolored_button}:hover, > .button:checked + #{$_uncolored_button}:hover, > .button.suggested-action + #{$_uncolored_button}:hover, > .button.destructive-action + #{$_uncolored_button}:hover, > .entry + #{$_uncolored_button}:hover:not(:only-child) { box-shadow: none; } } } // special case, because path-bars are bugged @mixin pathbar_linking_rules($sep_color:if($variant=='light', transparentize($button_border, 0.6), transparentize($button_border, 0.5))) { > .button + .button { border-left-style: none; } > .button:hover:not(:checked):not(:active):not(:only-child) { &:hover { box-shadow: inset 1px 0 $sep_color, inset -1px 0 $sep_color; } &:first-child:hover { box-shadow: inset -1px 0 $sep_color; } &:last-child:hover { box-shadow: inset 1px 0 $sep_color; } } } // Apply the rules defined above .linked:not(.vertical) { &:not(.path-bar) { @include linking_rules(); } &.path-bar { @include pathbar_linking_rules(); } } .linked.vertical { @include linking_rules($vert:'true'); } %linked_middle { border-radius: 0; border-right-style: none; } %linked { @extend %linked_middle; &:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } &:last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-right-style: solid; } &:only-child { border-radius: 3px; border-style: solid; } } %linked_vertical_middle { border-radius: 0; border-bottom-style: none; } %linked_vertical{ @extend %linked_vertical_middle; &:first-child { border-top-left-radius: 3px; border-top-right-radius: 3px; } &:last-child { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-bottom-style: solid; } &:only-child { border-radius: 3px; border-style: solid; } } %undecorated_button { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; } // menu buttons .menuitem.button.flat { transition: none; @extend %undecorated_button; outline-offset: -1px; border-radius: 2px; &:hover { background-color: if($variant=='light', mix($fg_color,$bg_color,5%), mix($fg_color,$bg_color,10%)); } &:active, &:selected { @extend %selected_items; } &:checked { color: $fg_color; } } // // Links // *:link { color: $link_color; &:visited { color: $link_visited_color; *:selected & { color: mix($selected_fg_color, $selected_bg_color, 60%); } } &:hover { color: lighten($link_color,10%); *:selected & { color: mix($selected_fg_color, $selected_bg_color, 90%); } } &:active { color: $link_color; *:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); } } &:selected, *:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); } } .button:link, .button:visited { @extend %undecorated_button; @extend *:link; &:hover, &:active, &:checked { @extend %undecorated_button; } > .label { text-decoration-line: underline; } } // // Spinbuttons // .spinbutton { border-radius: 3px; .button { background-image: none; border: 1px solid transparentize($borders_color,0.4); border-style: none none none solid; color: mix($fg_color,$base_color,95%); border-radius: 0; box-shadow: none; &:dir(rtl) { border-style: none solid none none; } &:first-child { color: red; } &:insensitive { color: $insensitive_fg_color; } &:active { background-color: $selected_bg_color; color: $selected_fg_color; } } // .osd & { // .button { // @include button(undecorated); // color: $osd_fg_color; // border-style: none none none solid; // border-color: transparentize($osd_borders_color, 0.3); // border-radius: 0; // box-shadow: none; // &:dir(rtl) { border-style: none solid none none; } // &:hover { // @include button(undecorated); // color: $osd_fg_color; // border-color: transparentize(opacify($osd_borders_color, 1), 0.5); // background-color: transparentize($osd_fg_color, 0.9); // box-shadow: none; // } // &:insensitive { // @include button(undecorated); // color: $osd_insensitive_fg_color; // border-color: transparentize(opacify($osd_borders_color, 1), 0.5); // box-shadow: none; // } // &:last-child { border-radius: 0 2px 2px 0; } // &:dir(rtl):first-child { border-radius: 2px 0 0 2px; } // } // } &.vertical, &.vertical:dir(rtl) { .button { &:first-child { @extend %top_button; @include button(normal); &:active { @extend %top_button; @include button(active); } &:hover { @extend %top_button; @include button(hover); } &:insensitive { @extend %top_button; @include button(insensitive); } } &:last-child { @extend %bottom_button; @include button(normal); &:active { @extend %bottom_button; @include button(active); } &:hover { @extend %bottom_button; @include button(hover); } &:insensitive { @extend %bottom_button; @include button(insensitive); } } } &.entry { border-radius: 0; padding-left: 5px; padding-right: 5px; } %top_button { border-radius: 2px 2px 0 0; border-style: solid solid none solid; } %bottom_button { border-radius: 0 0 2px 2px; border-style: none solid solid solid; } } GtkTreeView & { &.entry, &.entry:focus { padding: 1px; border-width: 1px 0; border-color: $selected_bg_color; border-radius: 0; box-shadow: none; } } } // // Comboboxes // GtkComboBox { -GtkComboBox-arrow-scaling: 0.5; -GtkComboBox-shadow-type: none; > .the-button-in-the-combobox { // Otherwise combos padding-top: $vert_padding - 2px; // are bigger than padding-bottom: $vert_padding - 2px; // buttons } &:insensitive { color: $insensitive_fg_color; } .separator.vertical { -GtkWidget-wide-separators: true; } &.combobox-entry .entry { &:dir(ltr) { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-style: none; @if $variant=='light' { &:focus { box-shadow: 1px 0 $selected_bg_color; } } } &:dir(rtl) { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-style: none; @if $variant=='light' { &:focus { box-shadow: -1px 0 $selected_bg_color; } } } } &.combobox-entry .button { &:dir(ltr) { border-top-left-radius: 0; border-bottom-left-radius: 0; } &:dir(rtl) { border-top-right-radius: 0; border-bottom-right-radius: 0; } } } .linked > GtkComboBox > .the-button-in-the-combobox, .linked > GtkComboBoxText > .the-button-in-the-combobox { // the combo is a composite widget so the way we do button linkind doesn't // work, special case needed. See // https://bugzilla.gnome.org/show_bug.cgi?id=733979 &:dir(ltr), &:dir(rtl) { @extend %linked_middle; } // specificity bump } .linked > GtkComboBox:first-child > .the-button-in-the-combobox, .linked > GtkComboBoxText:first-child > .the-button-in-the-combobox { @extend %linked:first-child; } .linked > GtkComboBox:last-child > .the-button-in-the-combobox, .linked > GtkComboBoxText:last-child > .the-button-in-the-combobox { @extend %linked:last-child; } .linked > GtkComboBox:only-child > .the-button-in-the-combobox, .linked > GtkComboBoxText:only-child > .the-button-in-the-combobox { @extend %linked:only-child; } .linked.vertical > GtkComboBoxText > .the-button-in-the-combobox, .linked.vertical > GtkComboBox > .the-button-in-the-combobox { @extend %linked_vertical_middle; } .linked.vertical > GtkComboBoxText:first-child > .the-button-in-the-combobox, .linked.vertical > GtkComboBox:first-child > .the-button-in-the-combobox { @extend %linked_vertical:first-child; } .linked.vertical > GtkComboBoxText:last-child > .the-button-in-the-combobox, .linked.vertical > GtkComboBox:last-child > .the-button-in-the-combobox { @extend %linked_vertical:last-child; } .linked.vertical > GtkComboBoxText:only-child > .the-button-in-the-combobox, .linked.vertical > GtkComboBox:only-child > .the-button-in-the-combobox { @extend %linked_vertical:only-child; } // // Toolbars // .toolbar { -GtkWidget-window-dragging: true; padding: 4px; background-color: $bg_color; .osd &, &.osd { padding: 7px; border: 1px solid transparentize(black, 0.5); border-radius: 3px; background-color: transparentize($osd_bg_color, 0.1); } } .primary-toolbar { color: $header_fg; background-color: opacify($header_bg, 1); box-shadow: none; border-width: 0 0 1px 0; border-style: solid; border-image: linear-gradient(to bottom, opacify($header_bg, 1), darken($header_bg, 7%)) 1 0 1 0; //temporary hack for rhythmbox 3.1 //&:backdrop { background-color: opacify($header_bg_backdrop, 1); } .separator { @extend %header_separator; } @extend %header_widgets; } .inline-toolbar { @extend .toolbar; background-color: darken($bg_color, 3%); border-style: solid; border-color: $borders_color; border-width: 0 1px 1px; padding: 3px; border-radius: 0 0 3px 3px; } .search-bar { background-color: $bg_color; border-style: solid; border-color: $borders_color; border-width: 0 0 1px; padding: 3px; //box-shadow: inset 0 1px 2px rgba(0,0,0,0.25); } .action-bar { background-color: darken($bg_color, 3%) } // // Headerbars // .header-bar { padding: 5px 5px 4px 5px; border-width: 0 0 1px; border-style: solid; border-radius: 0; border-color: opacify($header_border, 1); color: $header_fg; background-color: opacify($header_bg, 1); .csd & { // Transparent header-bars only in csd windows background-color: $header_bg; border-color: $header_border; } &:backdrop { color: transparentize($header_fg, 0.3); } .title { padding-left: 12px; padding-right: 12px; } .subtitle { font-size: smaller; padding-left: 12px; padding-right: 12px; @extend .dim-label; } // Selectionmode &.selection-mode, &.titlebar.selection-mode { color: $selection_mode_fg; background-color: $selection_mode_bg; border-color: darken($selection_mode_bg, 4%); box-shadow: none; &:backdrop { background-color: $selection_mode_bg; color: transparentize($selection_mode_fg, 0.4); } .subtitle:link { @extend *:link:selected; } .button { color: $selected_fg_color; outline-color: transparentize($selected_fg_color, 0.7); background-color: transparentize($selected_fg_color, 1); border-color: transparentize($selected_fg_color, 1); &.flat { @include button(undecorated); color: $selected_fg_color; background-color: transparentize($selected_fg_color, 1); } &:hover { color: $selected_fg_color; outline-color: transparentize($selected_fg_color, 0.7); background-color: transparentize($selected_fg_color, 0.95); border-color: transparentize($selected_fg_color, 0.5); } &:active, &:checked { color: $selection_mode_bg; outline-color: transparentize($selection_mode_bg, 0.7); background-color: $selected_fg_color; border-color: $selected_fg_color; } &:insensitive { color: transparentize($selected_fg_color, 0.6); background-color: transparentize($selected_fg_color, 1); border-color: transparentize($selected_fg_color, 1); &:active, &:checked { color: transparentize($selection_mode_bg, 0.6); background-color: transparentize($selected_fg_color, 0.85); border-color: transparentize($selected_fg_color, 0.85); } } } .selection-menu { box-shadow: none; padding-left: 10px; padding-right: 10px; GtkArrow { -GtkArrow-arrow-scaling: 1; } .arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } } .maximized & { background-color: opacify($selection_mode_bg, 1); } } .tiled &, .tiled &:backdrop, .maximized &, .maximized &:backdrop { border-radius: 0; // squared corners when the window is max'd or tiled } .maximized & { background-color: opacify($header_bg, 1); border-color: opacify($header_border, 1); } &.default-decoration, .csd &.default-decoration, // needed under wayland, since all gtk3 windows are csd windows &.default-decoration:backdrop, .csd &.default-decoration:backdrop { padding-top: 5px; padding-bottom: 5px; background-color: opacify($header_bg, 1); border-bottom-width: 0; .maximized & { background-color: opacify($header_bg, 1); } } } .titlebar { padding-left: 7px; padding-right: 7px; border-radius: if($darker=='false' and $variant=='light', 4px 4px 0 0, 3px 3px 0 0); color: $header_fg; background-color: opacify($header_bg, 1); box-shadow: inset 0 1px lighten($header_bg, 3%); .csd & { background-color: $header_bg; } &:backdrop { color: transparentize($header_fg, 0.3); background-color: opacify($header_bg_backdrop, 1); .csd & { background-color: $header_bg_backdrop; } } .maximized & { background-color: opacify($header_bg, 1); &:backdrop, .csd &:backdrop { background-color: opacify($header_bg_backdrop, 1); } } } .titlebar .titlebar, .titlebar .titlebar:backdrop { background-color: transparent; } // Only extending .header-bar avoids some problems (Gnome Documents searchbar) .header-bar { .header-bar-separator, & > GtkBox > .separator.vertical { @extend %header_separator; } @extend %header_widgets; } .csd headerbar headerbar, .csd headerbar headerbar:backdrop { background-color: transparent; } %header_separator { -GtkWidget-wide-separators: true; -GtkWidget-separator-width: 1px; border-width: 0 1px; border-image: linear-gradient(to bottom, transparentize($header_fg, 1) 25%, transparentize($header_fg, 0.65) 25%, transparentize($header_fg, 0.65) 75%, transparentize($header_fg, 1) 75%) 0 1/0 1px stretch; &:backdrop { opacity: 0.6; } } %header_widgets { // Headerbar Entries .entry { @include entry(header-normal); &:backdrop { opacity: 0.85; } &:focus { @include entry(header-focus); background-clip: if($darker=='false' and $variant=='light', border-box, padding-box); &.image { color: $selected_fg_color; } } &:insensitive { @include entry(header-insensitive); } &:selected:focus { background-color: $selected_fg_color; color: $selected_bg_color; } &.progressbar { border-color: $selected_bg_color; background-image: none; background-color: transparent; } @each $e_type, $e_color, $e_fg_color in (warning, $warning_color, $warning_fg_color), (error, $error_color, $error_fg_color) { &.#{$e_type} { color: $e_fg_color; border-color: if($darker=='false' and $variant=='light', $e_color, $header_entry_border); background-image: linear-gradient(to bottom, mix($e_color, $header_bg, 60%)); &:focus { color: $e_fg_color; background-image: linear-gradient(to bottom, $e_color); } &:selected, &:selected:focus { background-color: $e_fg_color; color: $e_color; } } } } // Headerbar Buttons .button { @include button(header-normal); &:backdrop { opacity: 0.7; } &:hover { @include button(header-hover); } &:active, &:checked { @include button(header-active); background-clip: if($darker=='false' and $variant=='light', border-box, padding-box); } &:insensitive { @include button(header-insensitive); } &:insensitive:active, &:insensitive:checked { @include button(header-insensitive-active); } } // Linking stuff // Reset buttons .linked:not(.vertical):not(.path-bar) > .button { &, &:hover, &:active, &:checked, &:insensitive { border-radius: 3px; border-style: solid; } } .linked:not(.vertical):not(.path-bar) { $_uncolored_button: '.button:not(:checked):not(:active):not(.suggested-action):not(.destructive-action)'; > #{$_uncolored_button}:hover:not(:only-child), > #{$_uncolored_button}:hover + #{$_uncolored_button} { box-shadow: none; } } // special case for path-bars and stack-switchers .linked:not(.vertical):not(.path-bar).stack-switcher, .linked:not(.vertical).path-bar { > .button { @include button(header-hover); &:hover { background-color: lighten($header_button_bg, 15%); } &:active, &:checked { @include button(header-active); } &:insensitive { color: transparentize($header_fg, 0.4); } &, &:hover, &:active, &:checked, &:insensitive { @extend %linked; } } @include pathbar_linking_rules($sep_color:$header_button_border); } // use linking rules for entries only .linked:not(.vertical):not(.path-bar) { @include linking_rules( $a:0.5, $var:if($variant=='light' and $darker=='false', 'light', 'dark'), $button_rules:'false', $e_border:$header_entry_border, $b_border:$header_button_border ); } // Headerbar Suggested and Destructive Action buttons @each $b_type, $b_color, $b_fg in (suggested-action, $suggested_color, $suggested_fg_color), (destructive-action, $destructive_color, $destructive_fg_color) { .button.#{$b_type} { @include button(suggested_destructive, $b_color, $b_fg); &.flat { @include button(undecorated); color: $b_color; outline-color: transparentize($b_color, 0.7); } &:hover { @include button(suggested_destructive, lighten($b_color, 10%), $b_fg); } &:active, &:checked { @include button(suggested_destructive, darken($b_color, 10%), $b_fg); } &.flat:insensitive, &:insensitive { @include button(header-insensitive); } } .button.#{$b_type}:backdrop, .button.#{$b_type}:backdrop { opacity: 0.8; } } // Headerbar Spinbuttons & .spinbutton { &:focus .button { color: $selected_fg_color; &:hover { background-color: transparentize($selected_fg_color, 0.9); border-color: transparent; } &:insensitive { color: transparentize($selected_fg_color, 0.6); } } .button { color: $header_fg; &:hover { background-color: transparentize($header_fg, 0.75); border-color: transparent; } &:insensitive { color: transparentize($header_fg, 0.3); } &:active { background-color: rgba(0,0,0,0.1); } } } // Headerbar ComboBoxes & GtkComboBox{ &:insensitive { color: transparentize($header_fg, 0.6); } &.combobox-entry .button { @include entry(header-normal); &:hover { @include entry(header-focus); box-shadow: none; } &:insensitive { @include entry(header-insensitive); } } &.combobox-entry .entry { &:dir(ltr) { border-right-style: none; &:focus { box-shadow: none; } @if $variant=='light' and $darker=='false' { &:focus { box-shadow: 1px 0 $selected_bg_color; } } } &:dir(rtl) { border-left-style: none; &:focus { box-shadow: none; } @if $variant=='light' and $darker=='false' { &:focus { box-shadow: -1px 0 $selected_bg_color; } } } } } // Headerbar Switches GtkSwitch { &:backdrop { opacity: 0.75; } } GtkProgressBar { &.trough { background-color: if($variant=='light' and $darker=='false', opacify($header_button_border, 0.05), $header_button_border); } &:backdrop { opacity: 0.75; } } // Headerbar Scale .scale { &:backdrop { opacity: 0.75; } &.trough { $_trough_bg: if($variant=='light' and $darker=='false', opacify($header_button_border, 0.05), $header_button_border); background-image: linear-gradient(to bottom, $_trough_bg); &:insensitive { background-image: linear-gradient(to bottom, if($variant=='light' and $darker=='false', transparentize($_trough_bg, 0.05), transparentize($_trough_bg, 0.1))); } } &.slider { $_slider_border: if($variant=='light' and $darker=='false', opacify($header_button_border, 0.2), opacify($header_button_border, 0.3)); $_slider_bg: if($variant=='light' and $darker=='false', opacify($header_button_bg,1), lighten(opacify($header_bg,1), 10%)); background-image: linear-gradient(to bottom, $_slider_bg); border-color: $_slider_border; &:hover { background-image: linear-gradient(to bottom, lighten($_slider_bg, 5%)); border-color: $_slider_border; } &:active { background-image: linear-gradient(to bottom, $selected_bg_color); border-color: $selected_bg_color; } &:insensitive { background-image: linear-gradient(to bottom, mix($_slider_bg, $header_bg, 70%)); border-color: $_slider_border; } } } } // // Pathbars // .path-bar .button { padding: 5px 10px; &:first-child { padding-left: 10px; } &:last-child { padding-right: 10px; } &:only-child { padding-left: 14px; padding-right: 14px; } // the following is for spacing the icon and the label inside the home button GtkLabel:last-child { padding-left: 4px; } GtkLabel:first-child { padding-right: 4px; } GtkLabel:only-child, GtkLabel { padding-right: 0; padding-left: 0; } GtkImage { padding-top: 2px; padding-bottom: 1px; } } // // Tree Views // GtkTreeView.view { // treeview grid lines and expanders, unfortunatelly // the tree lines color can't be set -GtkTreeView-grid-line-width: 1; -GtkTreeView-grid-line-pattern: ''; -GtkTreeView-tree-line-width: 1; -GtkTreeView-tree-line-pattern: ''; -GtkTreeView-expander-size: 16; border-left-color: transparentize($fg_color, 0.85); // this is actually the tree lines color, border-top-color: transparentize(black, 0.9); // while this is the grid lines color, better then nothing &.rubberband { @extend .rubberband; } // to avoid borders being overridden by the previously set props &:selected { border-radius: 0; border-left-color: mix($selected_fg_color, $selected_bg_color, 50%); border-top-color: transparentize($fg_color, 0.9); // doesn't work unfortunatelly } &:insensitive { color: $insensitive_fg_color; &:selected { color: mix($selected_fg_color, $selected_bg_color, 40%); } } &.dnd { border-style: solid none; border-width: 1px; border-color: mix($fg_color, $selected_bg_color, 50%); } &.expander { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } color: mix($fg_color, $base_color, 50%); &:hover { color: $fg_color; } &:selected { color: mix($selected_fg_color, $selected_bg_color, 70%); &:hover { color: $selected_fg_color; } } &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } } &.progressbar, &.progressbar:focus { // progress bar in treeviews color: $selected_fg_color; border-radius: 3px; background-image: linear-gradient(to bottom, $selected_bg_color); &:selected, &:selected:focus { color: $selected_bg_color; box-shadow: none; background-image: linear-gradient(to bottom, $selected_fg_color); } } &.trough { // progress bar trough in treeviews color: $fg_color; background-image: linear-gradient(to bottom, $button_border); border-radius: 3px; border-width: 0; &:selected, &:selected:focus { color: $selected_fg_color; background-image: linear-gradient(to bottom, transparentize(black, 0.8)); border-radius: 3px; border-width: 0; } } } column-header { .button { @extend %column_header_button; $_column_header_color: mix($fg_color,$base_color,80%); color: $_column_header_color; background-color: $base_color; &:hover { @extend %column_header_button; color: $selected_bg_color; box-shadow: none; transition: none; //I shouldn't need this } &:active { @extend %column_header_button; color: $fg_color; transition: none; //I shouldn't need this } &.dnd { @extend column-header.button.dnd; } } &:last-child .button, &:last-child.button { //treeview-like derived widgets in Banshee and Evolution border-right-style: none; border-image: none; } } column-header.button.dnd { // for treeview-like derive widgets transition: none; color: $selected_bg_color; box-shadow: inset 1px 1px 0 1px $selected_bg_color, inset -1px 0 0 1px $selected_bg_color, inset 1px 1px $base_color, inset -1px 0 $base_color;; &:active { @extend column-header.button.dnd; } &:selected { @extend column-header.button.dnd; } &:hover { @extend column-header.button.dnd; } } %column_header_button { padding: 3px 6px; background-image: none; border-style: none solid none none; border-radius: 0; border-image: linear-gradient(to bottom, transparentize(if($variant == 'light', black, white), 1) 20%, transparentize(if($variant == 'light', black, white), 0.89) 20%, transparentize(if($variant == 'light', black, white), 0.89) 80%, transparentize(if($variant == 'light', black, white), 1) 80%) 0 1 0 0 / 0 1px 0 0 stretch; &:active, &:hover { background-color: $base_color; } &:active:hover { color: $fg_color; } &:insensitive { border-color: $bg_color; background-image: none; } } // // Menus // .menubar { -GtkWidget-window-dragging: true; padding: 0px; background-color: opacify($header_bg, 1); color: $header_fg; &:backdrop { color: transparentize($header_fg, 0.3); //background-color: opacify($header_bg_backdrop, 1); } & > .menuitem { padding: 4px 8px; border: solid transparent; border-width: 0; &:hover { //Seems like it :hover even with keyboard focus background-color: $selected_bg_color; color: $selected_fg_color; } &:insensitive { color: transparentize($header_fg, 0.6); border-color: transparent; } } } .menu { margin: 4px; padding: 0; border-radius: 0; background-color: if($variant=='light', $base_color, $bg_color); border: 1px solid $borders_color; .csd & { padding: 4px 0px; border-radius: 2px; border: none; } .menuitem { padding: 5px; &:hover { color: $selected_fg_color; background-color: $selected_bg_color; } &:insensitive { color: $insensitive_fg_color; } &.separator { color: transparentize($base_color, 1); } //submenu indicators &.arrow { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); } &.arrow:dir(rtl) {-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl'); } } &.button { // overlow buttons @extend %undecorated_button; border-style: none; border-radius: 0; &.top { border-bottom: 1px solid mix($fg_color, $base_color, 10%); } &.bottom { border-top: 1px solid mix($fg_color, $base_color, 10%); } &:hover { background-color: mix($fg_color, $base_color, 10%); } &:insensitive { color: transparent; background-color: transparent; border-color: transparent ; } } } .csd .popup { border-radius: 2px; } .menuitem .accelerator { color: gtkalpha(currentColor,0.55); } // // Popovers // .popover { padding: 2px; border: 1px solid darken($borders_color, 5%); border-radius: 3px; background-clip: border-box; background-color: if($variant=='light', $base_color, $bg_color); box-shadow: 0 2px 6px 1px if($variant=='light', transparentize(black, 0.93), transparentize(black, 0.65)); & .separator { color: transparentize($base_color, 1); } .label.separator { @extend .label.separator; } // Noice > .list, > .view, > .toolbar, &.osd > .toolbar { border-style: none; background-color: transparent; } &.osd { @extend %osd; } } //touch selection handlebars for the Popover.osd above .entry.cursor-handle, .cursor-handle { background-color: transparent; background-image: none; box-shadow: none; border-style: none; &.top { -gtk-icon-source: -gtk-icontheme('selection-start-symbolic'); } &.bottom { -gtk-icon-source: -gtk-icontheme('selection-end-symbolic'); } } // // Notebooks and Tabs // .notebook { padding: 0; background-color: $base_color; -GtkNotebook-initial-gap: 4; -GtkNotebook-arrow-spacing: 5; -GtkNotebook-tab-curvature: 0; -GtkNotebook-tab-overlap: 1; -GtkNotebook-has-tab-gap: false; -GtkWidget-focus-padding: 0; -GtkWidget-focus-line-width: 0; transition: all 200ms $ease-out-quad; &.frame { border: 1px solid $borders_color; &.top { border-top-width: 0; } &.bottom { border-bottom-width: 0; } &.right { border-right-width: 0; } &.left { border-left-width: 0; } } &.header { background-color: $bg_color; // this is the shading of the header behind the tabs &.frame { border: 0px solid $borders_color; &.top { border-bottom-width: 0; } &.bottom { border-top-width: 0; } &.right { border-left-width: 0; } &.left { border-right-width: 0; } } $_header_border: $borders_color; &.top { box-shadow: inset 0 -1px $_header_border; } &.bottom { box-shadow: inset 0 1px $_header_border; } &.right { box-shadow: inset 1px 0 $_header_border; } &.left { box-shadow: inset -1px 0 $_header_border; } } tab { border-width: 0; border-style: solid; border-color: transparent; background-color: transparent; outline-color: transparent; outline-offset: 0; // tab sizing $vpadding: 4px; $hpadding: 15px; //FIXME: we get double border in some cases, not considering the broken //notebook content frame... &.top, &.bottom { padding: $vpadding $hpadding; } &.left, &.right { padding: $vpadding $hpadding; } &.reorderable-page { &.top, &.bottom { padding-left: 12px; // for a nicer close button padding-right: 12px; // placement } } @each $_tab in (top, bottom, right, left) { &.reorderable-page.#{$_tab}, &.#{$_tab} { @if $_tab==top or $_tab==bottom { padding-#{$_tab}: $vpadding + 2; } @else if $_tab==left or $_tab==right { padding-#{$_tab}: $hpadding + 2; } @if $_tab==top { border-radius: 3.5px 2px 0 0; } @else if $_tab==bottom { border-radius: 0 0 2px 3.5px; } @else if $_tab==left { border-radius: 3.5px 0 0 3.5px; } @else if $_tab==right { border-radius: 0 3.5px 3.5px 0; } border-width: 0; border-#{$_tab}-width: 2px; border-color: transparent; background-color: transparentize($base_color, 1); &:hover, &.prelight-page { background-color: transparentize($base_color, 0.5); box-shadow: inset 0 1px $borders_color, inset 0 -1px $borders_color, inset 1px 0 $borders_color, inset -1px 0 $borders_color; } &:active, &.active-page, &.active-page:hover { background-color: $base_color; @if $_tab==top { box-shadow: inset 0 1px $borders_color, inset 0 -1px $base_color, inset 1px 0 $borders_color, inset -1px 0 $borders_color; } @else if $_tab==bottom { box-shadow: inset 0 -1px $base_color, inset 0 -1px $borders_color, inset 1px 0 $borders_color, inset -1px 0 $borders_color; } @else if $_tab==left { box-shadow: inset 0 1px $borders_color, inset 0 -1px $borders_color, inset 1px 0 $borders_color, inset -1px 0 $base_color; } @else if $_tab==right { box-shadow: inset 0 1px $borders_color, inset 0 -1px $borders_color, inset 1px 0 $base_color, inset -1px 0 $borders_color; } } } } GtkLabel { //tab text padding: 0 2px; // needed for a nicer focus ring color: $insensitive_fg_color; } .prelight-page GtkLabel, GtkLabel.prelight-page { // prelight tab text color: mix($fg_color, $insensitive_fg_color, 50%); } .active-page GtkLabel, GtkLabel.active-page { // active tab text color: $fg_color; } .button { //tab close button padding: 0; @extend %undecorated_button; color: mix($bg_color, $fg_color, 35%); &:hover { color: lighten(red, 15%); } &:active { color: $selected_bg_color; } & > GtkImage { // this is a hack which makes tabs grow padding: 2px; } } } &.arrow { color: $insensitive_fg_color; &:hover { color: mix($fg_color, $insensitive_fg_color, 50%); } &:active { color: $fg_color; } &:insensitive { color: transparentize($insensitive_fg_color,0.3); } } } // // Scrollbars // $_scrollbar_bg_color: darken($base_color, 1%); .scrollbar { -GtkRange-slider-width: 13; -GtkRange-trough-border: 0; -GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-forward-stepper: false; -GtkScrollbar-min-slider-length: 42; // minimum size for the slider. // sadly can't be in '.slider' // where it belongs -GtkRange-stepper-spacing: 0; -GtkRange-trough-under-steppers: 1; $_slider_margin: 3px; $_slider_fine_tune_margin: 4px; .button { border: none; } &.overlay-indicator { &:not(.dragging):not(.hovering) { // Overlay scrolling indicator opacity: 0.4; -GtkRange-slider-width: 6px; .slider { margin: 0; background-color: mix($fg_color, $bg_color, 70%); border: 1px solid if($variant == 'light', transparentize(white, 0.4), transparentize(black, 0.7)); background-clip: padding-box; } .trough { border-style: none; background-color: transparent; } // w/o the following margin tweaks the slider shrinks when hovering/dragging &.vertical .slider { margin-top: $_slider_margin - 1px; margin-bottom: $_slider_margin - 1px; } &.horizontal .slider { margin-left: $_slider_margin - 1px; margin-right: $_slider_margin - 1px; } } &.dragging, &.hovering { opacity: 0.99; } } // trough coloring .trough { background-color: $_scrollbar_bg_color; border: 1px none $borders_color; } // slider coloring .slider { background-color: mix($fg_color, $bg_color, 40%); &:hover { background-color: mix($fg_color, $bg_color, 30%); } &:prelight:active, &:active { background-color: $selected_bg_color;} &:insensitive { background-color: transparent; } } // sizing .slider { border-radius: 100px; margin: $_slider_margin; } &.fine-tune .slider { margin: $_slider_fine_tune_margin; } &.vertical { .slider { margin-left: 1px + $_slider_margin; &:dir(rtl) { margin-left: $_slider_margin; margin-right: 1px + $_slider_margin; } } &.fine-tune .slider { margin-left: 1px + $_slider_fine_tune_margin; &:dir(rtl) { margin-left: $_slider_fine_tune_margin; margin-right: 1px + $_slider_fine_tune_margin; } } .trough { border-left-style: solid; &:dir(rtl) { border-left-style: none; border-right-style: solid; } } } &.horizontal { .slider { margin-top: 1px + $_slider_margin; } &.fine-tune .slider { margin-top: 1px + $_slider_fine_tune_margin; } .trough { border-top-style: solid; } } } .scrollbars-junction, .scrollbars-junction.frame { // the small square between two scrollbars border-color: transparent; // the border image is used to add the missing dot between the borders, details, details, details... border-image: linear-gradient(to bottom, $borders_color 1px, transparent 1px) 0 0 0 1 / 0 1px stretch; background-color: $_scrollbar_bg_color; &:dir(rtl) { border-image-slice: 0 1 0 0; } } // // Switches // GtkSwitch { font: 1; -GtkSwitch-slider-width: 52; -GtkSwitch-slider-height: 24; outline-color: transparent; &.trough, &.slider { background-size: 52px 24px; background-repeat: no-repeat; background-position: right center; color: transparent; border-color: transparent; border-image: none; border-style: none; box-shadow: none; &:dir(rtl) { background-position: left center; } } } @each $k,$l in ('',''), (':active','-active'), (':insensitive','-insensitive'), (':active:insensitive','-active-insensitive') { // load switch troughs from .png files in assets directory GtkSwitch.trough#{$k} { background-image: -gtk-scaled(url("assets/switch#{$l}#{$asset_suffix}.png"),url("assets/switch#{$l}#{$asset_suffix}@2.png")); } WingpanelWidgetsIndicatorPopover.popover .menuitem:hover GtkSwitch.trough#{$k}, .menu .menuitem:hover GtkSwitch.trough#{$k}, .list-row:selected GtkSwitch.trough#{$k}, GtkInfoBar GtkSwitch.trough#{$k} { background-image: -gtk-scaled(url("assets/switch#{$l}-selected.png"),url("assets/switch#{$l}-selected@2.png")); } .header-bar GtkSwitch.trough#{$k}, .primary-toolbar GtkSwitch.trough#{$k} { background-image: -gtk-scaled(url("assets/switch#{$l}-header#{$darker_asset_suffix}.png"),url("assets/switch#{$l}-header#{$darker_asset_suffix}@2.png")); } } // // Check and Radio items * // @each $w,$a in ('check', 'checkbox'), ('radio','radio') { //standard checks and radios @each $s,$as in ('','-unchecked'), (':insensitive','-unchecked-insensitive'), (':inconsistent', '-mixed'), (':inconsistent:insensitive', '-mixed-insensitive'), (':checked', '-checked'), (':checked:insensitive','-checked-insensitive') { .#{$w}#{$s} { -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}#{$asset_suffix}.png"), url("assets/#{$a}#{$as}#{$asset_suffix}@2.png")); } %osd_check_radio { .#{$w}#{$s} { -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}-dark.png"), url("assets/#{$a}#{$as}-dark@2.png")); } } // the borders of checks and radios are // too similar in luminosity to the selected background color, hence // we need special casing. WingpanelWidgetsIndicatorPopover.popover .menuitem:hover .#{$w}#{$s}, .menu .menuitem.#{$w}#{$s}:hover, GtkTreeView.view.#{$w}#{$s}:selected, .list-row:selected .#{$w}#{$s}, GtkInfoBar .#{$w}#{$s} { -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}-selected.png"), url("assets/#{$a}#{$as}-selected@2.png")); } } } // Selectionmode @each $s,$as in ('','-selectionmode'), (':checked', '-checked-selectionmode') { .view.content-view.check#{$s}:not(.list) { -gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"), url("assets/checkbox#{$as}#{$asset_suffix}@2.png")); background-color: transparent; } } GtkCheckButton.text-button, GtkRadioButton.text-button { // this is for a nice focus on check and radios text padding: 1px 2px 4px; outline-offset: 0; &:insensitive, &:insensitive:active, &:insensitive:inconsistent { // set insensitive color, which is overriden otherwise color: $insensitive_fg_color; } } // // GtkScale // .scale { -GtkScale-slider-length: 15; -GtkRange-slider-width: 15; -GtkRange-trough-border: 0; outline-offset: -1px; outline-radius: 2px; color: gtkalpha(currentColor, 0.7); &.trough { margin: 5px; } &.fine-tune { &.trough { border-radius: 5px; margin: 3px; } } &.slider { $_slider_border: if($variant=='light', transparentize(darken($button_border,25%), 0.5), darken($button_border,2%)); background-clip: border-box; background-image: linear-gradient(to bottom, $button_bg); border: 1px solid $_slider_border; border-radius: 50%; box-shadow: none; &:hover { background-image: linear-gradient(to bottom, lighten($button_bg, 5%)); border-color: $_slider_border; } &:insensitive { background-image: linear-gradient(to bottom, mix($entry_bg, $bg_color, 55%)); border-color: transparentize($_slider_border, 0.2); } &:active { background-image: linear-gradient(to bottom, $selected_bg_color); border-color: $selected_bg_color; } //OSD sliders .osd & { background-image: linear-gradient(to bottom, $osd_bg_color); border-color: $selected_bg_color; &:hover { background-image: linear-gradient(to bottom, $selected_bg_color); } &:active { background-image: linear-gradient(to bottom, darken($selected_bg_color, 10%)); border-color: darken($selected_bg_color, 10%); } } //selected list-row and infobar sliders WingpanelWidgetsIndicatorPopover.popover .menuitem:hover &, .menu .menuitem:hover &, .list-row:selected &, GtkInfoBar & { background-image: linear-gradient(to bottom, $selected_fg_color); border-color: $selected_fg_color; &:hover { background-image: linear-gradient(to bottom, mix($selected_fg_color, $selected_bg_color, 85%)); border-color: mix($selected_fg_color, $selected_bg_color, 85%); } &:active { background-image: linear-gradient(to bottom, mix($selected_fg_color, $selected_bg_color, 50%)); border-color: mix($selected_fg_color, $selected_bg_color, 50%); } &:insensitive{ background-image: linear-gradient(to bottom, mix($selected_fg_color, $selected_bg_color, 55%)); border-color: mix($selected_fg_color, $selected_bg_color, 55%); } } } &.trough { $_scale_trough_bg: if($variant == 'light', $button_border, darken($bg_color, 5%)); border: none; border-radius: 2.5px; background-image: linear-gradient(to bottom, $_scale_trough_bg); &.highlight { background-image: linear-gradient(to bottom, $selected_bg_color); &:insensitive { background-image: linear-gradient(to bottom, transparentize($selected_bg_color, 0.45)); } } &:insensitive { background-image: linear-gradient(to bottom, transparentize($_scale_trough_bg, 0.45)); } //OSD troughs .osd & { background-image: linear-gradient(to bottom, lighten($osd_bg_color, 7%)); outline-color: transparentize($osd_fg_color, 0.8); &.highlight { background-image: none; background-image: linear-gradient(to bottom, $selected_bg_color); } &:insensitive { } } // troughs in selected list-rows and infobars WingpanelWidgetsIndicatorPopover.popover .menuitem:hover &, .menu .menuitem:hover &, .list-row:selected &, GtkInfoBar & { background-image: linear-gradient(to bottom, transparentize(black, 0.8)); &.highlight { background-image: linear-gradient(to bottom, $selected_fg_color); &:insensitive { background-image: linear-gradient(to bottom, mix($selected_fg_color, $selected_bg_color, 55%)); } } &:insensitive { background-image: linear-gradient(to bottom, transparentize(black, 0.9)); } } } } // // Progress bars // GtkProgressBar { padding: 0; font-size: smaller; color: transparentize($fg_color, 0.3); &.osd { -GtkProgressBar-xspacing: 0; -GtkProgressBar-yspacing: 0; -GtkProgressBar-min-horizontal-bar-height: 3; } } // moving bit .progressbar { background-color: $selected_bg_color; border: none; border-radius: 3px; box-shadow: none; //needed for clipping &.left.right { } &.osd { background-color: $selected_bg_color; } .list-row:selected &, GtkInfoBar & { background-color: $selected_fg_color; } } .osd .scale.progressbar { background-color: $selected_bg_color; } // background GtkProgressBar.trough { border: none; border-radius: 3px; background-color: if($variant == 'light', $button_border, darken($bg_color, 5%)); &.osd { border-style: none; background-color: transparent; box-shadow: none; } .list-row:selected &, GtkInfoBar & { background-color: transparentize(black, 0.8); } } // // Level Bar // GtkLevelBar { -GtkLevelBar-min-block-width: 34; -GtkLevelBar-min-block-height: 3; &.vertical { -GtkLevelBar-min-block-width: 3; -GtkLevelBar-min-block-height: 34; } } .level-bar { &.trough { @extend GtkProgressBar.trough; padding: 3px; border-radius: 4px; } &.fill-block { // FIXME: it would be nice to set make fill blocks bigger, but we'd need // :nth-child working on discrete indicators border: 1px solid $selected_bg_color; background-color: $selected_bg_color; border-radius: 2px; &.indicator-discrete { &.horizontal { margin: 0 1px; } &.vertical { margin: 1px 0; } } &.level-high { border-color: $success_color; background-color: $success_color; } &.level-low { border-color: $warning_color; background-color: $warning_color; } &.empty-fill-block { background-color: if($variant=='light', transparentize($fg_color,0.8), $base_color); border-color: if($variant=='light', transparentize($fg_color,0.8), $base_color); } } } // // Frames // .frame { border: 1px solid $borders_color; &.flat { border-style: none; } padding: 0; &.action-bar { padding: 6px; border-width: 1px 0 0; } } GtkScrolledWindow { GtkViewport.frame { // avoid double borders when viewport inside // scrolled window border-style: none; } } //vbox and hbox separators .separator { // always disable separators // -GtkWidget-wide-separators: true; color: transparentize(black, 0.9); // Font and File button separators GtkFileChooserButton &, GtkFontButton &, GtkFileChooserButton &.vertical, GtkFontButton &.vertical { // always disable separators -GtkWidget-wide-separators: true; } } // // Lists // .list { background-color: $base_color; border-color: $borders_color; } .list-row, .grid-child { padding: 2px; } .list-row.activatable { // let's take care of background colors &:hover { background-color: if($variant == 'light', transparentize(black, 0.95), transparentize(white, 0.97)); } &:active { color: $fg_color; } &:selected { &:active { color: $selected_fg_color; } &:hover { background-color: mix(black, $selected_bg_color, 10%); } &:insensitive { color: transparentize($selected_fg_color, 0.3); background-color: transparentize($selected_bg_color, 0.3); .label { color: inherit; } } } } .list-row:selected { @extend %selected_items; .button { @extend %selected-button } } // transition .list-row, list-row.activatable { transition: all 150ms $ease-out-quad; &:hover { transition: none; } } // // App Notifications // .app-notification, .app-notification.frame { padding: 10px; color: $dark_sidebar_fg; background-color: $dark_sidebar_bg; background-clip: border-box; border-radius: 0 0 2px 2px; border-width: 0 1px 1px 1px; border-style: solid; border-color: darken($dark_sidebar_bg, 10%); .button { @include button(osd); &.flat { @extend %undecorated_button; border-color: transparentize($selected_bg_color, 1); &:insensitive { @extend %undecorated_button; } } &:hover { @include button(osd-hover); } &:active, &:checked { @include button(osd-active); background-clip: padding-box; } &:insensitive { @include button(osd-insensitive); } } } // // Expanders // .expander { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } &:hover { color: lighten($fg_color,30%); } //only lightens the arrow &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } } // // Calendar // GtkCalendar { color: $fg_color; border: 1px solid $borders_color; border-radius: 3px; padding: 2px; &:selected { background-color: $selected_bg_color; color: $selected_fg_color; border-radius: 1.5px; } &.header { color: $fg_color; border: none; border-radius: 0; } &.button, &.button:focus { color: transparentize($fg_color,0.55); @include button(undecorated); &:hover { color: $fg_color; } &:insensitive { color: $insensitive_fg_color; background-color: transparent; background-image: none; } } &:inconsistent { color: gtkalpha(currentColor,0.55); } &.highlight { color: $fg_color; } } // // Dialogs // .message-dialog .dialog-action-area .button { padding: 8px; } .message-dialog { // Message Dialog styling -GtkDialog-button-spacing: 0; .titlebar { background-color: $header_bg; border-bottom: 1px solid darken($header_bg, 7%) } &.csd { // rounded bottom border styling for csd version &.background { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border: none; } .dialog-action-area .button { padding: 8px; border-radius: 0; @extend %middle_button; &:hover, &:active, &:insensitive { @extend %middle_button; } &:first-child{ @extend %first_button; } &:last-child { @extend %last_button; } } %middle_button { border-right-style: none; border-bottom-style: none; } %last_button { border-bottom-right-radius: 3px; } %first_button { border-left-style: none; border-bottom-left-radius: 3px; } } } GtkFileChooserDialog { .search-bar { background-color: $bg_color; border-color: $borders_color; box-shadow: none; } .dialog-action-box { border-top: 1px solid $borders_color; } } // // Sidebar // .sidebar, .sidebar .view { border: none; background-color: lighten($bg_color, 2%); &:selected { @extend %selected_items; } &.separator { @extend .separator; } } GtkSidebarRow { // Needs overriding of the GtkListBoxRow padding &.list-row { padding: 0px; } // Using margins/padding directly in the SidebarRow // will make the animation of the new bookmark row jump .sidebar-revealer { padding: 3px 14px 3px 12px; } .sidebar-icon { &:dir(ltr) { padding-right: 8px; } &:dir(rtl) { padding-left: 8px; } } .sidebar-label { &:dir(ltr) { padding-right: 2px; } &:dir(rtl) { padding-left: 2px; } } } GtkPlacesSidebar.sidebar { .sidebar-placeholder-row { border: solid 1px $selected_bg_color; } .sidebar-new-bookmark-row { background-color: darken($bg_color, 10%); } // Preserve everything else of the list-row class .list-row.activatable { color: transparentize($fg_color, 0.2); border-width: 0; border-style: solid; &:selected { @extend %selected_items; } } @at-root .sidebar-button.button { // @at-root needded to not change the specificity making button styling inheritance broken // so istead of "GtkPlacesSidebar.sidebar .sidebar-button.button" [specificity 0,0,3,1] // the extended selector ".sidebar-button.button" [specificity 0,0,2,0] &.image-button { padding: 3px; } outline-radius: 50%; border-radius: 50%; @extend .button.flat; &:not(:hover):not(:active) > GtkImage { opacity: 0.5 }; } // this is for indicating which sidebar row generated a popover // see https://bugzilla.gnome.org/show_bug.cgi?id=754411 .has-open-popup { @extend .list-row.activatable:hover; } } .sidebar-item { padding: 10px 4px; > GtkLabel { padding-left: 6px; padding-right: 6px; } &.needs-attention > GtkLabel { @extend %needs_attention; background-size: 6px 6px, 0 0; } } // // File chooser // GtkPlacesView { .server-list-button > GtkImage { transition: 200ms $ease-out-quad; -gtk-icon-transform: rotate(0turn); } .server-list-button:checked > GtkImage { transition: 200ms $ease-out-quad; -gtk-icon-transform: rotate(-0.5turn); } .list-row.activatable:hover { background-color: transparent; } } // // Paned // GtkPaned { // this is for the standard paned separator -GtkPaned-handle-size: 1; // sets separator width -gtk-icon-source: none; // removes handle decoration margin: 0 8px 8px 0; // drag area of the separator, not a real margin &:dir(rtl) { margin-right: 0; margin-left: 8px; } .pane-separator { background-color: $borders_color; } } GtkPaned.wide { // this is for the paned with wide separator -GtkPaned-handle-size: 5; // wider separator here margin: 0; // no need of the invisible drag area so, reset margin .pane-separator { background-color: transparent; border-style: none solid; border-color: $borders_color; border-width: 1px; } &.vertical .pane-separator { border-style: solid none;} } // // GtkInfoBar // GtkInfoBar { border-style: none; .button { @extend %selected-button } } .info, .question, .warning, .error, GtkInfoBar { background-color: $selected_bg_color; color: $selected_fg_color; } // // Buttons on selected backgrounds // %selected-button { color: $selected_fg_color; outline-color: transparentize($selected_fg_color, 0.7); background-color: transparentize($selected_fg_color, 1); border-color: transparentize($selected_fg_color, 0.5); &.flat { @include button(undecorated); color: $selected_fg_color; background-color: transparentize($selected_fg_color, 1); } &:hover { color: $selected_fg_color; outline-color: transparentize($selected_fg_color, 0.7); background-color: transparentize($selected_fg_color, 0.8); border-color: transparentize($selected_fg_color, 0.2); } &:active, &:active:hover, &:checked { color: $selected_bg_color; outline-color: transparentize($selected_bg_color, 0.7); background-color: $selected_fg_color; border-color: $selected_fg_color; } &:insensitive { color: transparentize($selected_fg_color, 0.6); background-color: transparentize($selected_fg_color, 1); border-color: transparentize($selected_fg_color, 0.8); &:active, &:checked { color: transparentize($selected_bg_color, 0.6); background-color: transparentize($selected_fg_color, 0.8); border-color: transparentize($selected_fg_color, 0.8); } } } // // Tooltips // .tooltip { &.background { // background-color needs to be set this way otherwise it gets drawn twice // see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details. background-color: lighten($osd_bg_color, 10%); background-clip: padding-box; } color: $osd_fg_color; border-radius: 2px; &.window-frame.csd { background-color: transparent; } } .tooltip * { //Yeah this is ugly padding: 4px; background-color: transparent; color: inherit; // just to be sure } // // Color Chooser // GtkColorSwatch { // This widget is made of two boxes one on top of the other, the lower box is GtkColorSwatch {} the other one // is GtkColorSwatch .overlay {}, GtkColorSwatch has the programmatically set background, so most of the style // is applied to the overlay box. // take care of colorswatches on selected elements :selected & { box-shadow: none; &.overlay, &.overlay:hover { border-color: $selected_fg_color; } } // border rounding &.top { border-top-left-radius: 3px; border-top-right-radius: 3px; } &.bottom { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } &.left, &:first-child, &:first-child .overlay { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } &.right, &:last-child, &:last-child .overlay { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } &:only-child, &:only-child .overlay { border-radius: 3px; } // nth-child works just on the custom colors row // hover effect &:hover, &:hover:selected { background-image: linear-gradient(to bottom, transparentize(white, 0.8)); } // no hover effect for the colorswatch in the color editor GtkColorEditor & { border-radius: 3px; // same radius as the entry &:hover { background-image: none; } } // indicator and keynav outline colors, color-dark is a color with luminosity lower then 50% &.color-dark { color: white; outline-color: transparentize(black, 0.7); } &.color-light { color: black; outline-color: transparentize(white, 0.5); } // border color &.overlay, &.overlay:selected { border: 1px solid transparentize(black, 0.85); &:hover { border-color: transparentize(black, 0.75); } } // make the add color button looks like, well, a button &#add-color-button { border-style: solid; // the borders are drawn by the overlay for standard colorswatches to have them semi border-width: 1px; // translucent on the colored background, here it's not necessary so they need to be set @include button(normal); &:hover { @include button(hover); } .overlay { @include button(undecorated); } // reset the overlay to not cover the button style underneath } } GtkColorButton.button { padding: 5px; // Uniform padding on the GtkColorButton GtkColorSwatch { border-radius: 0; } } // // Misc // //content view (grid/list) .content-view { background-color: $base_color; &:hover { -gtk-image-effect: highlight; } &.rubberband { @extend .rubberband; } } .scale-popup .button { // +/- buttons on GtkVolumeButton popup padding: 6px; &:hover { @include button(hover); } } GtkVolumeButton.button { padding: 8px; } // Decouple the font of context menus from their entry/textview .touch-selection, .context-menu { font: initial;} .monospace { font: Monospace; } // // Overshoot // // This is used by GtkScrolledWindow, when content is touch-dragged past boundaries. // This draws a box on top of the content, the size changes programmatically. .overshoot { &.top { @include overshoot(top); } &.bottom { @include overshoot(bottom); } &.left { @include overshoot(left); } &.right { @include overshoot(right); } } // // Undershoot // // Overflow indication, works similarly to the overshoot, the size if fixed tho. .undershoot { &.top { @include undershoot(top); } &.bottom { @include undershoot(bottom); } &.left { @include undershoot(left); } &.right { @include undershoot(right); } } // // Window Decorations // .window-frame { border-radius: if($darker=='false' and $variant=='light', 4px 4px 0 0, 3px 3px 0 0); border-width: 0px; $_wm_border: if($variant=='light', transparentize(black, 0.9), transparentize(black, 0.45)); box-shadow: 0 0 0 1px if($darker=='true' or $variant == 'dark', darken($header_bg, 7%), $_wm_border), 0 8px 8px 0 if($variant == 'light', opacify($_wm_border, 0.1), transparentize($_wm_border, 0.2)); // this is used for the resize cursor area margin: 10px; &:backdrop { box-shadow: 0 0 0 1px if($darker=='true' or $variant == 'dark', transparentize(darken($header_bg, 7%), 0.1), $_wm_border), 0 5px 5px 0 if($variant == 'light', opacify($_wm_border, 0.1), transparentize($_wm_border, 0.2)); } &.tiled { border-radius: 0; } &.popup { box-shadow: none; border-radius: 0; } // server-side decorations as used by mutter &.ssd { border-radius: if($darker=='false' and $variant=='light', 4px 4px 0 0, 3px 3px 0 0); box-shadow: 0 0 0 1px if($darker=='true' or $variant == 'dark', transparentize(black, 0.35), $_wm_border); &.maximized { border-radius: 0; } } &.csd { &.popup { border-radius: 2px; box-shadow: 0 3px 6px if($variant == 'light', $_wm_border, transparentize($_wm_border, 0.1)), 0 0 0 1px if($variant == 'light', $_wm_border, darken($bg_color, 10%)); } &.tooltip { border-radius: 2px; box-shadow: 0 1px 3px 1px if($variant == 'light', $_wm_border, transparentize($_wm_border, 0.3)); } &.message-dialog { border-radius: 3px; } } &.solid-csd { border-radius: 0; margin: 1px; background-color: $header_bg; box-shadow: none; } } // // Titlebuttons // .header-bar, .titlebar { &.default-decoration .button.titlebutton { // no vertical padding for ssd buttons padding-top: 0px; // already handled by the titlebar-padding padding-bottom: 0px; } .button.titlebutton { @extend .image-button; &:not(GtkMenuButton) { padding-top: 8px; padding-bottom: 8px; } padding-left: 4px; padding-right: 4px; @include button(undecorated); background-color: transparentize($header_bg, 1); &:hover { @include button(header-hover); } &:active, &:checked { @include button(header-active); } &.close, &.maximize, &.minimize { color: transparent; background-color: transparent; background-position: center; background-repeat: no-repeat; border-width: 0; &:backdrop { opacity: 1; } } // Load png assets for each button @each $k in ('close','maximize', 'minimize') { @each $l, $m in ('',''), (':backdrop','-backdrop'), (':hover','-hover'), (':active','-active') { &.#{$k}#{$l} { background-image: -gtk-scaled(url('assets/titlebutton-#{$k}#{$m}#{$darker_asset_suffix}.png'), url('assets/titlebutton-#{$k}#{$m}#{$darker_asset_suffix}@2.png')); } } } .maximized & { button.titlebutton { padding: 0; min-width: 24px; @include button(undecorated); background-color: transparentize($header_bg, 1); &:hover { @include button(header-hover); } &:active, &:checked { @include button(header-active); } &.close, &.maximize, &.minimize { color: transparent; background-color: transparent; background-position: center; background-repeat: no-repeat; border-width: 0; &:backdrop { opacity: 1; } } // Load png assets for each button @each $k in ('close', 'minimize') { @each $l, $m in ('',''), (':backdrop','-backdrop'), (':hover','-hover'), (':active','-active') { &.#{$k}#{$l} { background-image: -gtk-scaled(url('assets/titlebutton-#{$k}#{$m}#{$darker_asset_suffix}.png'), url('assets/titlebutton-#{$k}#{$m}#{$darker_asset_suffix}@2.png')); } &.maximize#{$l} { background-image: -gtk-scaled(url('assets/titlebutton-unmaximize#{$m}#{$darker_asset_suffix}.png'), url('assets/titlebutton-unmaximize#{$m}#{$darker_asset_suffix}@2.png')); } } } } } } } // catch all extend %selected_items { background-image: none; background-color: $selected_bg_color; color: $selected_fg_color; outline-color: transparentize($selected_fg_color, 0.7); } ================================================ FILE: common/gtk-3.0/3.18/sass/_drawing.scss ================================================ // Drawing mixins // Entries @mixin entry($t) { // // Entries drawing function // // $t: entry type // @if $t==normal { // // normal entry // color: $text_color; border-color: $entry_border; background-color: $entry_bg; background-image: linear-gradient(to bottom, $entry_bg); } @if $t==focus { // // focused entry // color: $text_color; border-color: if($variant=='light', $selected_bg_color, $button_border); background-color: $entry_bg; background-image: linear-gradient(to bottom, $entry_bg); @if $variant == 'dark' { box-shadow: inset 1px 0 $selected_bg_color, inset -1px 0 $selected_bg_color, inset 0 1px $selected_bg_color, inset 0 -1px $selected_bg_color; } } @if $t==insensitive { // // insensitive entry // color: $insensitive_fg_color; border-color: transparentize($entry_border, 0.45); background-color: transparentize($entry_bg, 0.45); background-image: linear-gradient(to bottom, transparentize($entry_bg, 0.45)); } @if $t==header-normal { // // normal header-bar entry // color: $header_fg; border-color: $header_entry_border; background-image: linear-gradient(to bottom, $header_entry_bg); background-color: transparent; &.image, &.image:hover { color: inherit; } } @if $t==header-focus { // // focused header-bar entry // color: $selected_fg_color; border-color: if($darker=='false' and $variant=='light', $selected_bg_color, transparent); background-image: linear-gradient(to bottom, $selected_bg_color); } @if $t==header-insensitive { // // insensitive header-bar entry // color: transparentize($header_fg, 0.45); background-image: linear-gradient(to bottom, transparentize($header_entry_bg, 0.15)); } @else if $t==osd { // // normal osd entry // color: $osd_fg_color; border-color: $osd_entry_border; background-image: linear-gradient(to bottom, $osd_entry_bg); background-color: transparent; &.image, &.image:hover { color: inherit; } } @else if $t==osd-focus { // // active osd entry // color: $selected_fg_color; border-color: $osd_entry_border; background-image: linear-gradient(to bottom, $selected_bg_color); } @else if $t==osd-insensitive { // // insensitive osd entry // color: transparentize($osd_fg_color, 0.45); background-image: linear-gradient(to bottom, transparentize($osd_entry_bg, 0.15)); } } // Buttons @mixin button($t, $actionb_bg:red, $actionb_fg: green) { // // Button drawing function // // $t: button type, // $actionb_bg, $actionb_fg: used for destructive and suggested action buttons @if $t==normal { // // normal button // color: $fg_color; outline-color: transparentize($fg_color, 0.7); border-color: $button_border; background-color: $button_bg; } @else if $t==hover { // // hovered button // color: $fg_color; outline-color: transparentize($fg_color, 0.7); border-color: $button_border; background-color: lighten($button_bg, 5%); } @else if $t==active { // // pushed button // color: $selected_fg_color; outline-color: transparentize($selected_fg_color, 0.7); border-color: if($variant=='light', $selected_bg_color, $button_border); background-color: $selected_bg_color; } @else if $t==insensitive { // // insensitive button // color: $insensitive_fg_color; border-color: transparentize($button_border, 0.45); background-color: transparentize($button_bg, 0.45); > GtkLabel { color: inherit; } } @else if $t==insensitive-active { // // insensitive pushed button // color: transparentize($selected_fg_color, 0.2); border-color: transparentize($selected_bg_color, 0.25); background-color: transparentize($selected_bg_color, 0.25); opacity: 0.6; > GtkLabel { color: inherit; } } @if $t==header-normal { // // normal header-bar button // color: $header_fg; outline-color: transparentize($header_fg, 0.7); outline-offset: -3px; background-color: transparentize($header_bg, 1); border-color: transparentize($header_bg, 1); } @else if $t==header-hover { // // hovered header-bar button // color: $header_fg; outline-color: transparentize($header_fg, 0.7); border-color: $header_button_border; background-color: $header_button_bg; } @else if $t==header-active { // // pushed header-bar button // color: $selected_fg_color; outline-color: transparentize($selected_fg_color, 0.7); border-color: if($darker=='false' and $variant=='light', $selected_bg_color, transparent); background-color: $selected_bg_color; } @else if $t==header-insensitive { // // insensitive header-bar button // color: transparentize($header_fg, 0.45); background-color: transparentize($header_bg, 1); border-color: transparentize($header_bg, 1); > GtkLabel { color: inherit; } } @else if $t==header-insensitive-active { // // header-bar insensitive pushed button // color: transparentize($selected_fg_color, 0.25); border-color: transparentize($selected_bg_color, 0.35); background-color: transparentize($selected_bg_color, 0.35); } @else if $t==osd { // // normal osd button // color: $osd_fg_color; outline-color: transparentize($osd_fg_color, 0.7); border-color: $osd_button_border; background-color: $osd_button_bg; } @else if $t==osd-hover { // // active osd button // color: $osd_fg_color; outline-color: transparentize($osd_fg_color, 0.7); border-color: $osd_button_border; background-color: opacify(lighten($osd_button_bg, 7%), 0.1); } @else if $t==osd-active { // // active osd button // color: $selected_fg_color; outline-color: transparentize($selected_fg_color, 0.7); border-color: $osd_button_border; background-color: $selected_bg_color; } @else if $t==osd-insensitive { // // insensitive osd button // color: $osd_insensitive_fg_color; border-color: $osd_button_border; background-color: transparentize($osd_button_bg, 0.15); } @else if $t==suggested_destructive { // // suggested or destructive action buttons // background-clip: border-box; color: $actionb_fg; outline-color: transparentize($actionb_fg, 0.7); background-color: $actionb_bg; border-color: $actionb_bg; } @else if $t==undecorated { // // reset // border-color: transparent; background-color: transparent; background-image: none; } } // // Overshoot // @mixin overshoot($p, $c:$selected_bg_color) { // $p: position // $c: base color // // possible $p values: // top, bottom, right, left // $_big_gradient_length: 60%; $_position: center top; $_big_gradient_size: 100% $_big_gradient_length; @if $p==bottom { $_position: center bottom; } @else if $p==right { $_position: right center; $_big_gradient_size: $_big_gradient_length 100%; } @else if $p==left { $_position: left center; $_big_gradient_size: $_big_gradient_length 100%; } background-image: -gtk-gradient(radial, $_position, 0, $_position, 0.6, from(transparentize($c, 0.8)), to(transparentize($c, 1))); background-size: $_big_gradient_size; background-repeat: no-repeat; background-position: $_position; background-color: transparent; // reset some properties to be sure to not inherit them somehow border: none; // box-shadow: none; // } // // Undershoot // @mixin undershoot($p) { // $p: position // // possible $p values: // top, bottom, right, left // $_undershoot_color_dark: transparentize(black, 0.8); $_undershoot_color_light: transparentize(white, 0.8); $_gradient_dir: left; $_dash_bg_size: 10px 1px; $_gradient_repeat: repeat-x; $_bg_pos: center $p; background-color: transparent; // shouldn't be needed, but better to be sure; @if ($p == left) or ($p == right) { $_gradient_dir: top; $_dash_bg_size: 1px 10px; $_gradient_repeat: repeat-y; $_bg_pos: $p center; } background-image: linear-gradient(to $_gradient_dir, // this is the dashed line $_undershoot_color_light 50%, $_undershoot_color_dark 50%); padding-#{$p}: 1px; background-size: $_dash_bg_size; background-repeat: $_gradient_repeat; background-origin: content-box; background-position: $_bg_pos; } ================================================ FILE: common/gtk-3.0/3.18/sass/_granite.scss ================================================ // Granite Widgets // // Overlay Bar // .overlay-bar { background-color: $selected_bg_color; border-color: $selected_bg_color; border-radius: 2px; padding: 3px 6px; margin: 3px; GtkLabel { color: $selected_fg_color; } } // // Thin Pane Separator // GraniteWidgetsThinPaned { background-color: transparent; background-image: none; margin: 0; border-left: 1px solid $borders_color; border-right: 1px solid $borders_color; } // avoid borders when a viewport is // packed into a Static Notebook, or Popover GraniteWidgetsPopOver .frame, GraniteWidgetsStaticNotebook .frame { border: none; } // // Help Button // .help_button { border-radius: 100px; padding: 3px 9px; } // // Secondary Toolbars // .secondary-toolbar.toolbar { padding: 3px; border-bottom: 1px solid $borders_color; .button { padding: 0 3px 0 3px; } } // // Bottom Toolbars // .bottom-toolbar.toolbar { padding: 5px; border-width: 1px 0 0 0; border-style: solid; border-color: $borders_color; background-color: $bg_color; .button { padding: 2px 3px 2px 3px; } } // // Sidebar & Source List // .source-list { -GtkTreeView-horizontal-separator: 1px; -GtkTreeView-vertical-separator: 6px; } .source-list, .source-list.view { background-color: $bg_color; color: $fg_color; -gtk-icon-style: regular; } .source-list.category-expander { color: transparent; } .source-list.view:prelight { background-color: lighten($bg_color, 5%); } .source-list.view:selected, .source-list.view:prelight:selected, .source-list.view:selected:focus, .source-list.category-expander:hover { color: $selected_fg_color; background-color: $selected_bg_color; } .source-list .scrollbar.trough, .source-list .scrollbars-junction { border-image: none; border-color: transparent; background-color: $bg_color; background-image: none; } .source-list.badge, .source-list.badge:prelight, .source-list.badge:selected, .source-list.badge:selected:focus, .source-list.badge:prelight:selected { background-image: none; background-color: $selected_bg_color; color: $selected_fg_color; border-radius: 10px; padding: 0 6px; margin: 0 3px; border-width: 0; } .source-list.badge:selected, .source-list.badge:selected:focus, .source-list.badge:prelight:selected { background-color: $selected_fg_color; color: $selected_bg_color; } // // Expander // .source-list.category-expander { color: $fg_color; -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); -GtkTreeView-expander-size: 16; } .source-list.category-expander, .source-list.category-expander:backdrop { color: transparent; border: none; } .source-list.category-expander:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } // // Notebook // .dynamic-notebook .notebook tab { .button > GtkImage { padding: 0; } } // // Welcome // GraniteWidgetsWelcome { background-color: $base_color; } GraniteWidgetsWelcome GtkLabel { color: mix($fg_color, $bg_color, 50%); font: open sans 11; text-shadow: none; } GraniteWidgetsWelcome .h1, GraniteWidgetsWelcome .h3 { color: transparentize($fg_color, 0.2); } // // Help Button // .help_button { border-radius: 0; } // // Popover // GraniteWidgetsPopOver { -GraniteWidgetsPopOver-arrow-width: 21; -GraniteWidgetsPopOver-arrow-height: 10; -GraniteWidgetsPopOver-border-radius: 2px; -GraniteWidgetsPopOver-border-width: 1; -GraniteWidgetsPopOver-shadow-size: 12; border: 1px solid transparentize(black, 0.7); margin: 0; } .popover_bg { background-image: linear-gradient(to bottom, $base_color); border: 1px solid transparentize(black, 0.7); } GraniteWidgetsPopOver .sidebar.view, GraniteWidgetsPopOver * { background-color: transparent; } // // Xs Entry // GraniteWidgetsXsEntry.entry { padding: 4px; } // // Text Styles // .h1 { font: open sans 24px; } .h2 { font: open sans light 18px; } .h3 { font: open sans 11px; } .h4, .category-label { color: mix($bg_color, $text_color, 30%); font-weight: 600; } .h4 { padding-bottom: 6px; padding-top: 6px; } GtkListBox .h4{ padding-left: 6px; } ================================================ FILE: common/gtk-3.0/3.18/sass/_lightdm.scss ================================================ // the panel widget at the top #panel_window { background-color: $panel_bg; color: $panel_fg; font: bold; box-shadow: inset 0 -1px darken($panel_bg, 7%); // the menubars/menus of the panel, i.e. indicators .menubar { padding-left: 5px; &, > .menuitem { background-color: transparent; color: $panel_fg; font: bold; } } .menubar .menuitem:insensitive { color: transparentize($panel_fg, 0.5); GtkLabel { color: inherit; } } .menubar .menu .menuitem { font: normal; } } // the login window #login_window, #shutdown_dialog, #restart_dialog { font: normal; border-style: none; background-color: transparent; color: $fg_color; } // the top half of the login-window, in GtkDialog terms, the content #content_frame { padding-bottom: 14px; background-color: $bg_color; border-top-left-radius: 2px; border-top-right-radius: 2px; border: solid transparentize(black, 0.9); border-width: 1px 1px 0 1px; } #content_frame .button { @include button(normal); &:hover { @include button(hover); } &:active, &:checked { @include button(active); } &:insensitive { @include button(insensitive); } } // the lower half of the login-window, in GtkDialog terms the buttonbox or action area #buttonbox_frame { padding-top: 20px; padding-bottom: 0px; border-style: none; background-color: if($variant=='light', $osd_bg_color, $header_bg); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border: solid transparentize(black, 0.9); border-width: 0 1px 1px 1px; box-shadow: inset 0 1px if($variant=="light", $dark_sidebar_border, $header_border); } #buttonbox_frame .button{ @include button(osd); &:hover { @include button(osd-hover); } &:active, &:checked { @include button(osd-active); } &:insensitive { @include button(osd-insensitive); } } #login_window #user_combobox { color: $fg_color; .menu { font: normal; } .arrow {} } // the user's avatar box #user_image { padding: 3px; border-radius: 2px; } // the border around the user's avatar box #user_image_border {} // the shutdown button #shutdown_button.button { @include button(suggested_destructive, $destructive_color); &:hover { @include button(suggested_destructive, lighten($destructive_color, 10%)); } &:active, &:checked { @include button(suggested_destructive, darken($destructive_color, 10%)); } } // the restart button #restart_button.button { @include button(suggested_destructive, $suggested_color); &:hover { @include button(suggested_destructive, lighten($suggested_color, 10%)); } &:active, &:checked { @include button(suggested_destructive, darken($suggested_color, 10%)); } } // the warning, in case a wrong password is entered or something else goes wrong according to PAM #greeter_infobar { border-bottom-width: 0; font: bold; } ================================================ FILE: common/gtk-3.0/3.18/sass/_transparent_widgets.scss ================================================ .titlebar .separator { color: $header_border; //fixes separator in gnome-tweak-tool } NemoWindow GtkEventBox { background-color: $bg_color; } // fixes nemo statusbar GtkFileChooserDialog *, NautilusWindow *, NemoWindow { -GtkPaned-handle-size: 0; } @if $variant==dark { GtkFileChooserDialog, NautilusWindow , NemoWindow { .sidebar { border-right: 1px solid $dark_sidebar_border; } .sidebar:dir(rtl) { border-left: 1px solid $dark_sidebar_border; } } } // Dark transparent sidebars GtkFileChooserDialog, NautilusWindow { &.csd.background, .list.sidebar { background-color: transparent; } GtkPlacesSidebar.sidebar { background-color: $dark_sidebar_bg; .sidebar-placeholder-row.list-row.activatable { border: 1px solid $selected_bg_color; } .sidebar-new-bookmark-row { background-color: lighten($dark_sidebar_bg, 10%); } .list-row.activatable { border: none; color: $dark_sidebar_fg; .sidebar-icon { color: transparentize($dark_sidebar_fg, 0.4); } &:hover { background-color: transparentize($dark_sidebar_fg, 0.85); } &:selected, &:selected:hover, &:active:hover { @extend %selected_items; .sidebar-icon { color: inherit; } } } .sidebar-button.button { color: $dark_sidebar_fg; &:hover { @include button(osd-hover); } &:active { background-clip: padding-box; @include button(osd-active); } &:not(:hover):not(:active) > GtkImage { opacity: 0.5 }; } .separator { color: transparent; } .scrollbar { @extend %dark_sidebar_scrollbar } } &.maximized GtkPlacesSidebar.sidebar { background-color: opacify($dark_sidebar_bg, 1); } } NemoWindow, MarlinViewWindow { &.csd.background, .source-list, .source-list.view, .source-list.view:prelight { background-color: transparent; } .sidebar, .source-list.sidebar.view { background-color: $dark_sidebar_bg; .view, row { background-color: transparent; color: $dark_sidebar_fg; &.image { color: transparentize($dark_sidebar_fg, 0.3); } &.cell:selected { background-color: $selected_bg_color; color: $selected_fg_color; } } &.frame { color: $dark_sidebar_fg; } .separator { color: transparent; } .scrollbar { @extend %dark_sidebar_scrollbar } } &.maximized .sidebar { background-color: opacify($dark_sidebar_bg, 1); } } NemoWindow.background > GtkGrid > GtkPaned > .pane-separator, MarlinViewWindow.background > GtkBox > GtkPaned > .pane-separator { background-color: $dark_sidebar_border } // Fix Nautilus transparency issues NautilusWindow NautilusWindowSlot { background-color: $base_color; } NautilusDesktopWindow NautilusWindowSlot { background-color: transparent; } GtkFileChooserDialog { &.background.csd, &.background { background-color: $dark_sidebar_bg } GtkPlacesSidebar.sidebar { background-color: transparent } // Yeah, this is ugly, but prevents a transparent background in the image preview box GtkPaned > .vertical > .horizontal { background-color: $bg_color; } // fix for non gnome environments .dialog-action-box { background-color: $bg_color } .dialog-vbox > .frame { color: $dark_sidebar_fg; border-color: transparent; } GtkFileChooserWidget > GtkActionBar > GtkRevealer > .action-bar.frame { background-color: transparent; border-color: if($variant =='light', darken($dark_sidebar_bg, 7%), darken($dark_sidebar_bg, 15%)); } GtkFileChooserWidget > GtkActionBar > GtkRevealer > .action-bar.frame, .dialog-vbox > .frame { .button { @extend %dark_sidebar_button; } .entry { @extend %dark_sidebar_entry; } @extend %osd_check_radio; GtkLabel, GtkComboBox { color: $dark_sidebar_fg; } } } // // Paned Headerbars // FeedReaderreaderUI.background.csd, GeditWindow.background.csd { > .titlebar .pane-separator, &.maximized > .titlebar .pane-separator, > .titlebar .pane-separator:backdrop, &.maximized > .titlebar .pane-separator:backdrop { background-color: $header_border; } > .titlebar > GtkHeaderBar.header-bar.titlebar { background-color: $header_bg; &:backdrop { background-color: $header_bg_backdrop; } } &.maximized > .titlebar > GtkHeaderBar.header-bar.titlebar { background-color: opacify($header_bg, 1); &:backdrop { background-color: opacify($header_bg_backdrop, 1); } } } FeedReaderreaderUI.background.csd > FeedReaderreaderHeaderbar.titlebar, GeditWindow.background.csd > .titlebar { background-color: transparent; } // Gedit GeditWindow.background { &.csd { background-color: transparent; } .gedit-side-panel-paned .pane-separator { background-color: $dark_sidebar_border; } .gedit-bottom-panel-paned .pane-separator { background-color: $borders_color; } } .gedit-bottom-panel-paned { background-color: $base_color; } .gedit-document-panel { background-color: $dark_sidebar_bg; .maximized & { background-color: opacify($dark_sidebar_bg, 1); } .list-row { color: $dark_sidebar_fg; } .list-row { background-color: transparentize($dark_sidebar_fg, 1); border: solid transparentize($dark_sidebar_fg, 1); border-width: 3px 2px 3px 2px; } .list-row:hover { border: solid transparentize($dark_sidebar_fg, 0.85); border-width: 3px 2px 3px 2px; background-color: transparentize($dark_sidebar_fg, 0.85); } .list-row:active { color: $selected_fg_color; background-color: $selected_bg_color; border: solid $selected_bg_color; border-width: 3px 2px 3px 2px; .button { color: $selected_fg_color; } } .list-row:selected, .list-row:selected:hover { color: $selected_fg_color; background-color: $selected_bg_color; border: solid $selected_bg_color; border-width: 3px 2px 3px 2px; } .prelight-row .button:active { color: $dark_sidebar_fg; } } GeditFileBrowserWidget { background-color: $dark_sidebar_bg; .maximized & { background-color: opacify($dark_sidebar_bg, 1); } .scrollbar { @extend %dark_sidebar_scrollbar; } .horizontal { background-color: transparent; border-color: darken($dark_sidebar_bg, 7%); .button { @extend %dark_sidebar_button; } GtkComboBox { color: $dark_sidebar_fg; } } } GeditWindow.background.csd GeditFileBrowserView.view { background-color: transparent; color: $dark_sidebar_fg; &.expander { color: $dark_sidebar_fg; &:hover { color: $selected_bg_color; } } } %dark_sidebar_button { @include button(osd); &:hover { @include button(osd-hover); } &:active, &:checked { @include button(osd-active); } &:insensitive { @include button(osd-insensitive); } } %dark_sidebar_entry { @include entry(osd); &:focus { @include entry(osd-focus); } &:insensitive { @include entry(osd-insensitive); } } %dark_sidebar_scrollbar { &.overlay-indicator:not(.dragging):not(.hovering) .slider { background-color: lighten($dark_sidebar_fg, 15%); border: 1px solid transparentize(black, 0.7); } // trough coloring .trough { background-color: transparentize(black, 0.8); border: none; } // slider coloring .slider { background-color: transparentize(lighten($dark_sidebar_fg, 15%), 0.3); &:hover { background-color: lighten($dark_sidebar_fg, 20%); } &:prelight:active { background-color: $selected_bg_color; } &:insensitive { background-color: transparent; } } } ================================================ FILE: common/gtk-3.0/3.18/sass/_unity.scss ================================================ // Decorations UnityDecoration { -UnityDecoration-extents: 28px 1 1 1; -UnityDecoration-input-extents: 10px; -UnityDecoration-shadow-offset-x: 0px; -UnityDecoration-shadow-offset-y: 3px; -UnityDecoration-active-shadow-color: rgba(0, 0, 0, 0.2); -UnityDecoration-active-shadow-radius: 12px; -UnityDecoration-inactive-shadow-color: rgba(0, 0, 0, 0.07); -UnityDecoration-inactive-shadow-radius: 7px; -UnityDecoration-glow-size: 10px; -UnityDecoration-glow-color: $selected_bg_color; -UnityDecoration-title-indent: 10px; -UnityDecoration-title-fade: 35px; -UnityDecoration-title-alignment: 0.0; &.top { border: 1px solid if($darker=='true' or $variant == 'dark', darken($header_bg, 7%), transparentize(black, 0.9)); border-bottom-width: 0; border-radius: 4px 4px 0 0; padding: 1px 6px 0 6px; background-image: linear-gradient(to bottom, opacify($header_bg, 1)); color: $header_fg; // The foreground color will be used to paint the text box-shadow: inset 0 1px lighten($header_bg, 3%); &:backdrop { border-bottom-width: 0; //background-image: linear-gradient(to bottom, opacify($header_bg_backdrop, 1)); color: transparentize($header_fg, 0.3); } } &.left, &.right, &.bottom, &.left:backdrop, &.right:backdrop, &.bottom:backdrop { background-color: transparent; background-image: linear-gradient(to bottom, if($darker=='true' or $variant == 'dark', darken($header_bg, 7%), transparentize(black, 0.9))); } } // Panel Style UnityPanelWidget, .unity-panel { background-image: linear-gradient(to bottom, #2f343f); color: lighten($panel_fg, 20%); box-shadow: none; &:backdrop { color: lighten($panel_fg, 1%); } } .unity-panel.menubar.menuitem:hover, .unity-panel.menubar .menuitem *:hover { border-radius: 0; color: $selected_fg_color; background-image: linear-gradient(to bottom, $selected_bg_color); border-bottom: none; } // Unity Greeter .lightdm.menu { background-image: none; background-color: transparentize(black, 0.6); border-color: transparentize(white, 0.2); border-radius: 4px; padding: 1px; color: white; } .lightdm-combo .menu { background-color: lighten($header_bg, 8); border-radius: 0px; padding: 0px; color: white; } .lightdm.menu .menuitem *, .lightdm.menu .menuitem.check:active, .lightdm.menu .menuitem.radio:active { color: white; } .lightdm.menubar { color: transparentize(white, 0.2); background-image: none; background-color: transparentize(black, 0.5); & > .menuitem { padding: 2px 6px; } } .lightdm-combo.combobox-entry .button, .lightdm-combo .cell, .lightdm-combo .button, .lightdm-combo .entry, .lightdm.button, .lightdm.entry { background-image: none; background-color: transparentize(black, 0.7); border-color: transparentize(white, 0.6); border-radius: 10px; padding: 7px; color: white; text-shadow: none; } .lightdm.button, .lightdm.button:hover, .lightdm.button:active, .lightdm.button:active:focused, .lightdm.entry, .lightdm.entry:hover, .lightdm.entry:active, .lightdm.entry:active:focused { background-image: none; border-image: none; } .lightdm.button:focused, .lightdm.entry:focused { border-color: transparentize(white, 0.9); border-width: 1px; border-style: solid; color: white; } .lightdm.entry:selected { background-color: transparentize(white, 0.2); } .lightdm.entry:active { -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); animation: dashentry_spinner 1s infinite linear; } .lightdm.option-button { padding: 2px; background: none; border: 0; } .lightdm.toggle-button { background: none; border-width: 0; &.selected { background-color: transparentize(black, 0.3); border-width: 1px; } } @keyframes dashentry_spinner { to { -gtk-icon-transform: rotate(1turn); } } ================================================ FILE: common/gtk-3.0/3.18/sass/gtk-dark.scss ================================================ $variant: 'dark'; $darker: 'false'; $transparency: 'true'; @import 'colors'; @import 'drawing'; @import 'common'; @import 'applications'; @import 'unity'; @import 'granite'; @import 'lightdm'; @import 'transparent_widgets'; @import 'colors-public'; ================================================ FILE: common/gtk-3.0/3.18/sass/gtk-darker.scss ================================================ $variant: 'light'; $darker: 'true'; $transparency: 'true'; @import 'colors'; @import 'drawing'; @import 'common'; @import 'applications'; @import 'unity'; @import 'granite'; @import 'lightdm'; @import 'transparent_widgets'; @import 'colors-public'; ================================================ FILE: common/gtk-3.0/3.18/sass/gtk-solid-dark.scss ================================================ $variant: 'dark'; $darker: 'false'; $transparency: 'false'; @import 'colors'; @import 'drawing'; @import 'common'; @import 'applications'; @import 'unity'; @import 'granite'; @import 'lightdm'; @import 'transparent_widgets'; @import 'colors-public'; ================================================ FILE: common/gtk-3.0/3.18/sass/gtk-solid-darker.scss ================================================ $variant: 'light'; $darker: 'true'; $transparency: 'false'; @import 'colors'; @import 'drawing'; @import 'common'; @import 'applications'; @import 'unity'; @import 'granite'; @import 'lightdm'; @import 'transparent_widgets'; @import 'colors-public'; ================================================ FILE: common/gtk-3.0/3.18/sass/gtk-solid.scss ================================================ $variant: 'light'; $darker: 'false'; $transparency: 'false'; @import 'colors'; @import 'drawing'; @import 'common'; @import 'applications'; @import 'unity'; @import 'granite'; @import 'lightdm'; @import 'transparent_widgets'; @import 'colors-public'; ================================================ FILE: common/gtk-3.0/3.18/sass/gtk.scss ================================================ $variant: 'light'; $darker: 'false'; $transparency: 'true'; @import 'colors'; @import 'drawing'; @import 'common'; @import 'applications'; @import 'unity'; @import 'granite'; @import 'lightdm'; @import 'transparent_widgets'; @import 'colors-public'; ================================================ FILE: common/gtk-3.0/3.20/Makefile.am ================================================ include ../common.am light/gtk-main.css: gtk.css | light cp "$<" "$@" light/gtk-main-dark.css: gtk-dark.css | light cp "$<" "$@" darker/gtk-main.css: gtk-darker.css | darker cp "$<" "$@" darker/gtk-main-dark.css: gtk-dark.css | darker cp "$<" "$@" dark/gtk-main.css: gtk-dark.css | dark cp "$<" "$@" dark/gtk-main-dark.css: | dark touch "$@" %/gtk.css %/gtk-dark.css: | % echo '@import url("resource:///org/gnome/arc-theme/$(subst gtk,gtk-main,$(notdir $@))");' > "$@" %/assets: | % (cd "$(dir $@)" && $(LN_S) ../assets assets) %/gtk.gresource.xml: | %/assets echo "$(patsubst %,%,$(normal) $(hidpi))gtk-main.css$(if $(filter $(dir $@),dark/),,gtk-main-dark.css)" > "$@" %/gtk.gresource: %/gtk.gresource.xml %/gtk-main.css %/gtk-main-dark.css $(normal) $(hidpi) glib-compile-resources --sourcedir="$(dir $<)" --target="$@" "$<" if ENABLE_LIGHT gtk3theme_DATA = light/gtk.css light/gtk-dark.css light/gtk.gresource endif if ENABLE_DARKER gtk3themedarker_DATA = darker/gtk.css darker/gtk-dark.css darker/gtk.gresource endif if ENABLE_DARK gtk3themedark_DATA = dark/gtk.css dark/gtk.gresource endif ================================================ FILE: common/gtk-3.0/3.20/assets.txt ================================================ checkbox-checked checkbox-checked-insensitive checkbox-unchecked checkbox-unchecked-insensitive checkbox-mixed checkbox-mixed-insensitive radio-checked radio-checked-insensitive radio-unchecked radio-unchecked-insensitive radio-mixed radio-mixed-insensitive checkbox-checked-selected checkbox-checked-insensitive-selected checkbox-unchecked-selected checkbox-unchecked-insensitive-selected checkbox-mixed-selected checkbox-mixed-insensitive-selected checkbox-checked-selectionmode checkbox-selectionmode radio-checked-selected radio-checked-insensitive-selected radio-unchecked-selected radio-unchecked-insensitive-selected radio-mixed-selected radio-mixed-insensitive-selected switch switch-active switch-insensitive switch-active-insensitive switch-header switch-active-header switch-insensitive-header switch-active-insensitive-header switch-selected switch-active-selected switch-insensitive-selected switch-active-insensitive-selected titlebutton-close titlebutton-close-backdrop titlebutton-close-hover titlebutton-close-active titlebutton-maximize titlebutton-maximize-backdrop titlebutton-maximize-hover titlebutton-maximize-active titlebutton-unmaximize titlebutton-unmaximize-backdrop titlebutton-unmaximize-hover titlebutton-unmaximize-active titlebutton-minimize titlebutton-minimize-backdrop titlebutton-minimize-hover titlebutton-minimize-active checkbox-checked-dark checkbox-checked-insensitive-dark checkbox-unchecked-dark checkbox-unchecked-insensitive-dark checkbox-mixed-dark checkbox-mixed-insensitive-dark checkbox-checked-selectionmode-dark checkbox-selectionmode-dark radio-checked-dark radio-checked-insensitive-dark radio-unchecked-dark radio-unchecked-insensitive-dark radio-mixed-dark radio-mixed-insensitive-dark switch-dark switch-active-dark switch-insensitive-dark switch-active-insensitive-dark switch-header-dark switch-active-header-dark switch-insensitive-header-dark switch-active-insensitive-header-dark titlebutton-close-dark titlebutton-close-backdrop-dark titlebutton-close-hover-dark titlebutton-close-active-dark titlebutton-maximize-dark titlebutton-maximize-backdrop-dark titlebutton-maximize-hover-dark titlebutton-maximize-active-dark titlebutton-unmaximize-dark titlebutton-unmaximize-backdrop-dark titlebutton-unmaximize-hover-dark titlebutton-unmaximize-active-dark titlebutton-minimize-dark titlebutton-minimize-backdrop-dark titlebutton-minimize-hover-dark titlebutton-minimize-active-dark ================================================ FILE: common/gtk-3.0/3.20/sass/_applications.scss ================================================ // // Tab overrides // .gedit-bottom-panel-paned notebook, terminal-window notebook { > header.top > tabs > tab:checked { box-shadow: inset 0 -1px $borders_color; } } // // GNOME Terminal, MATE Terminal // terminal-window, .mate-terminal { notebook { > header.top { padding-top: 3px; box-shadow: inset 0 1px opacify($header_border, 1), inset 0 -1px $borders_color; button { padding: 0; min-width: 24px; min-height: 24px; } } } } // // Nautilus // .nautilus-canvas-item { border-radius: 2px; } .nautilus-desktop.nautilus-canvas-item { color: white; text-shadow: 1px 1px transparentize(black, 0.4); &:active { color: $fg_color; } &:selected { color: $selected_fg_color; text-shadow: none; } } .nautilus-canvas-item.dim-label, .nautilus-list-dim-label { color: mix($fg_color, $bg_color, 50%); &:selected, &:selected:focus { color: mix($selected_fg_color, $selected_bg_color, 80%); } } .nautilus-window { // Workaround for https://bugzilla.gnome.org/show_bug.cgi?id=724096 searchbar { border-top: 1px solid $borders_color; } .searchbar-container { margin-top: -1px; } } .nautilus-window notebook, .nautilus-window notebook > stack:not(:only-child) searchbar { background-color: $base_color; } // Pathbar for nautilus >=3.30 .nautilus-window .path-bar-box { border-radius: 3px; &.width-maximized { border: 1px $header_button_border solid; transition: border $backdrop_transition; transition: background-color $backdrop_transition; &:not(:backdrop) { background-color: $header_button_bg; } } } // path-bar buttons for nautilus 3.30 .nautilus-window .path-bar > box > button { background-color: transparent; border-color: transparent; border-radius: 0; color: $header_fg; margin: 0 2px; padding: 1px; &:not(:backdrop):hover { box-shadow: 0 -3px $selected_bg_color inset; } } // path-bar buttons for nautilus >=3.32 .nautilus-path-bar > button { margin: 0; border: 1px $header_button_border solid; background-color: $header_button_bg; @extend %linked; // from .linked:not(.vertical).path-bar > button:hover in _common.scss &:hover { background-color: lighten($header_button_bg, 15%); } &:active, &:checked { @include button(header-active); } .nautilus-window .path-bar-box.width-maximized > & { border-width: 0; &:last-child { border-width: 0px 1px 0px 0px; } &:only-child { border-radius: 3px 0px 0px 3px; } &:not(:first-child) { border-radius: 0; } } // workaround jumpy button labels & > box > label { padding: 0 1px; } &:only-child > box > label { padding: 0 2px; } } button.nautilus-circular-button.image-button { @extend button.circular; } $disk_space_unknown: transparentize($fg_color, 0.5); $disk_space_used: transparentize($selected_bg_color, 0.2); $disk_space_free: darken($bg_color, 3%); .disk-space-display { border-style: solid; border-width: 1px; &.unknown { background-color: $disk_space_unknown; border-color: darken($disk_space_unknown, 10%); } &.used { background-color: $disk_space_used; border-color: darken($disk_space_used, 10%); } &.free { background-color: $disk_space_free; border-color: darken($disk_space_free, 10%); } } @keyframes needs_attention_keyframes { 0% { @include button(header-hover); } 100% { @include button(header-active) } } .nautilus-operations-button-needs-attention { animation: needs_attention_keyframes 2s ease-in-out; } .nautilus-operations-button-needs-attention-multiple { animation: needs_attention_keyframes 3s ease-in-out; animation-iteration-count: 3; } // Batch renaming dialog .conflict-row.activatable { &, &:active { color: $error_fg_color; background-color: $error_color; } &:hover { background-color: lighten($error_color, 10%); } &:selected { color: $selected_fg_color; background-color: $selected_bg_color; } } // // Nemo // .nemo-desktop.nemo-canvas-item { @extend .nautilus-desktop.nautilus-canvas-item; } .nemo-window { .nemo-places-sidebar.frame { border-width: 0; } notebook { background-color: $base_color; } // Rename entry .nemo-window-pane widget.entry { border: 1px solid; border-radius: 3px; @include entry(focus); &:selected { &:focus, & { @extend %selected_items; }} } // Pathbar .primary-toolbar widget.raised.linked:not(.vertical):not(.path-bar) { > button { &:not(:last-child):not(:only-child) { margin: 0 0 1px 0; } @include button(header-hover); &:hover { background-color: lighten($header_button_bg, 15%); } &:active, &:checked { @include button(header-active); } &:disabled { color: transparentize($header_fg, 0.4); } &, &:hover, &:active, &:checked, &:disabled { @extend %linked; } } @include pathbar_linking_rules($sep_color:$header_button_border); } // Nemo dual pane inactive pane .nemo-inactive-pane .view { color: $insensitive_fg_color; background-color: $base_color; } } // // Thunar // .thunar { toolbar.horizontal button image { -gtk-icon-transform: scale(0.75); } scrolledwindow.standard-view { border-top-width: 0; } toolbar { color: $header_fg; background-color: opacify($header_bg, 1); box-shadow: none; border-width: 0 0 1px 0; border-style: solid; border-image: linear-gradient(to bottom, opacify($header_bg, 1), darken($header_bg, 7%)) 1 0 1 0; //temporary hack for rhythmbox 3.1 @extend %header_widgets; } scrolledwindow.sidebar { border-top-color: darken($dark_sidebar_bg, 6%); } scrolledwindow.sidebar treeview.view { background: $dark_sidebar_bg; color: $dark_sidebar_fg; &:selected, &:active { background: $selected_bg_color; color: $selected_fg_color; } } } // // Caja // .caja-desktop { @extend .nautilus-desktop.nautilus-canvas-item; } .caja-notebook { border-top: 1px solid $borders_color; } .caja-side-pane .frame { border-width: 1px 0 0; } .caja-notebook .frame { border-width: 0 0 1px; } // // Gedit // .open-document-selector-treeview.view { padding: 3px 6px 3px 6px; border-color: $base_color; // disable borders, making them transparent doesn't work for some reason &:hover { background-color: mix($fg_color, $base_color, 7%); &:selected { color: $selected_fg_color; background-color: $selected_bg_color; } } } .open-document-selector-name-label { color: $fg_color; } .open-document-selector-path-label { color: mix($fg_color, $base_color, 50%); font-size: smaller; &:selected { color: transparentize($selected_fg_color, 0.1); } } .gedit-document-panel { row button { min-width: 22px; min-height: 22px; padding: 0; color: transparent; background: none; border: none; box-shadow: none; image { color: inherit; } } row:hover:not(:selected) button { color: mix($bg_color, $fg_color, 35%); &:hover { color: lighten(red, 15%); } &:active { color: $fg_color; } } row:hover:selected button:hover { color: lighten(red, 20%); background: none; border: none; box-shadow: none; &:active { color: $selected_fg_color; } } } .gedit-document-panel-dragged-row { border: 1px solid $borders_color; background-color: darken($bg_color, 10%); color: $fg_color; } .gedit-side-panel-paned statusbar { border-top: 1px solid $borders_color; background-color: $bg_color; } .gedit-search-slider { background-color: lighten($bg_color, 2%); padding: 6px; border-color: $borders_color; border-radius: 0 0 2px 2px; border-width: 0 1px 1px 1px; border-style: solid; } .gedit-search-entry-occurrences-tag { color: transparentize($fg_color, 0.4); border: none; margin: 2px; padding: 2px; } .gedit-map-frame { border { @if $variant=='light' { border-color: transparentize(black, 0.7); } border-width: 0; &:dir(ltr) { border-left-width: 1px; } &:dir(rtl) { border-right-width: 1px; } } } // // Pluma // .pluma-window statusbar frame > border { border: none; } .pluma-window notebook > stack scrolledwindow { border-width: 0 0 1px 0; } #pluma-status-combo-button { min-height: 0; padding: 0; border-top: none; border-bottom: none; border-radius: 0; } // // Gnome Builder // // TODO: Merge this with the upstream stylesheet .gb-search-entry-occurrences-tag { background: none; } workbench.csd > stack.titlebar:not(headerbar) { padding: 0; background: none; border: none; box-shadow: none; headerbar { &, &:first-child, &:last-child { border-radius: $_header_radius $_header_radius 0 0; } } } editortweak .linked > entry.search:focus + .gb-linked-scroller { border-top-color: $selected_bg_color; } layouttab { background-color: $base_color; } layout { border: 1px solid $borders_color; -PnlDockBin-handle-size: 1; } eggsearchbar box.search-bar { border-bottom: 1px solid $borders_color; } pillbox { color: $selected_fg_color; background-color: $selected_bg_color; border-radius: 3px; &:disabled label { color: transparentize($selected_fg_color, 0.5) } } docktabstrip { padding: 0 6px; background-color: $bg_color; border-bottom: 1px solid $borders_color; docktab { min-height: 28px; border: solid transparent; border-width: 0 1px; label { opacity: 0.5; } &:checked, &:hover { label { opacity: 1; }} &:checked { border-color: $borders_color; background-color: $base_color; } } } dockbin { border: 1px solid $borders_color; -PnlDockBin-handle-size: 1; } dockpaned { border: 1px solid $borders_color; } dockoverlayedge { background-color: $bg_color; docktabstrip { padding: 0; border: none; } &.left-edge tab:checked, &.right-edge tab:checked { border-width: 1px 0; } } popover.messagepopover { &.background { padding: 0; } .popover-content-area { margin: 16px; } .popover-action-area { margin: 8px; button:not(:first-child):not(:last-child) { margin: 0 4px; } } } popover.popover-selector { padding: 0; list { row { padding: 5px 0; } row image { margin-left: 3px; margin-right: 10px; } } } entry.search.preferences-search { border: none; border-right: 1px solid $borders_color; border-bottom: 1px solid $borders_color; border-radius: 0; } preferences stacksidebar.sidebar { list { background-image: _solid($base_color); } list separator { background-color: transparent; } } devhelppanel entry:focus, symboltreepanel entry:focus { border-color: $borders_color } button.run-arrow-button { min-width: 12px; } omnibar.linked > entry:not(:only-child) { border-style: solid; border-radius: 3px; margin-left: 1px; margin-right: 1px; } gstyleslidein { #scale_box, #strings_controls, #palette_controls, #components_controls { button.toggle:checked { color: $fg_color; } } } configurationview { entry.flat { background: none; } list { border-width: 0; } } // // Epiphany // //EphyWindow .floating-bar { // Epiphany overrides the floating-bar style, so reset it // color: $fg_color; //} // // Gnome Documents // .documents-scrolledwin.frame { border-width: 0; } button.documents-load-more { border-width: 1px 0 0; border-radius: 0; } .documents-icon-bg { background-color: $selected_bg_color; color: $selected_fg_color; border-radius: 2px; } .documents-collection-icon { background-color: transparentize($fg_color, 0.7); border-radius: 2px; } button.documents-favorite:active, button.documents-favorite:active:hover { color: lighten($selected_bg_color, 20%); } .documents-entry-tag { color: $selected_fg_color; background: $selected_bg_color; border-radius: 2px; border-width: 0; margin: 2px; padding: 4px; &:hover { color: $selected_fg_color; background: lighten($selected_bg_color, 4%); } &:active { color: $selected_fg_color; background: darken($selected_bg_color, 4%); } } .content-view.document-page { border-style: solid; border-width: 3px 3px 6px 4px; border-image: url("assets/thumbnail-frame.png") 3 3 6 4; } // // Gnome Photos // .photos-entry-tag { @extend .documents-entry-tag; } .photos-collection-icon { @extend .documents-collection-icon; } .photos-fade-in { opacity: 1.0; transition: opacity 0.2s ease-out; } .photos-fade-out { opacity: 0.0; transition: opacity 0.2s ease-out; } // // Gnome Tweak Tool // .tweak-categories, .tweak-category:not(:selected):not(:hover) { background-image: _solid($base_color); } // // Transmission // .tr-workarea undershoot, .tr-workarea overshoot { border-color: transparent; // Remove black border on over- and undershoot } // // Atril (MATE pdf viewer) // .atril-window .primary-toolbar toolbar { background: none; } // // Gnome Flashback // #gf-bubble, #gf-osd-window, #gf-input-source-popup, #gf-candidate-popup { &, &.solid { color: lighten($osd_fg_color, 7%); background-color: $osd_bg_color; border: 1px solid darken($osd_bg_color, 8%); border-radius: 2px; } levelbar { block { &.low, &.high, &.full { background-color: $selected_bg_color; border-color: $selected_bg_color; } &.empty { background-color: darken($osd_bg_color, 5%); } } trough { background: none; } } // FIXME still needs button styling } #gf-input-source { min-height: 32px; min-width: 40px; &:selected { color: $selected_fg_color; background-color: $selected_bg_color; border-radius: 2px; } } gf-candidate-box { label { padding: 3px; } &:hover, &:selected { color: $selected_fg_color; background-color: $selected_bg_color; border-radius: 2px; } } // // Mate OSD Window // MsdOsdWindow.background.osd { border-radius: 2px; border: 1px solid darken($osd_bg_color, 8%); .progressbar { background-color: $selected_bg_color; border: none; border-color: red; border-radius: 5px; } .trough { background-color: darken($osd_bg_color, 5%); border: none; border-radius: 5px; } } // // Mate/Gnome Flashback Panel // .mate-panel-menu-bar, panel-toplevel.background { &, menubar { background-color: opacify($panel_bg, 1); } menubar, #PanelApplet label, #PanelApplet image { color: $panel_fg; } // Panel buttons button:not(#tasklist-button) { @extend %panelbutton; } button, #tasklist-button { label, image { color: inherit; } } .wnck-pager { color: mix($panel_fg, black, 50%); background-color: darken($panel_bg, 10%); &:hover { background-color: lighten($panel_bg, 5%); } &:selected { color: lighten($selected_bg_color, 20%); background-color: $selected_bg_color; } } na-tray-applet { -NaTrayApplet-icon-padding: 0; -NaTrayApplet-icon-size: 16px; } } // Xfce Panel .xfce4-panel.panel { background-color: $panel_bg; font-weight: normal; text-shadow: none; -gtk-icon-shadow: none; frame > border { border: 0; } label { font-weight: normal; } button { @extend %panelbutton; } } .xfce4-panel.panel menu { font-weight: normal; } #tasklist-button { color: transparentize($panel_fg, 0.2); border-radius: 0; border: none; background-color: transparentize($panel_bg, 1); &:hover { color: lighten($panel_fg, 10%); background-color: transparentize(black, 0.83); } &:checked { color: white; background-color: transparentize(black, 0.75); box-shadow: inset 0 -2px $selected_bg_color; } } %panelbutton { color: $panel_fg; border-radius: 0; border: none; background-color: transparentize($panel_bg, 1); &:hover { border: none; background-color: lighten($panel_bg, 10%); } &:active, &:checked { color: $selected_fg_color; border: none; background-color: $selected_bg_color; label, image { color: inherit; } } } // // Floating Bar // .nautilus-window .floating-bar, .nemo-window .floating-bar { padding: 1px; background-color: $selected_bg_color; color: $selected_fg_color; border-radius: 2px 2px 0 0; &.bottom.left { border-top-left-radius: 0; } &.bottom.right { border-top-right-radius: 0; } button { border: none; border-radius: 0; min-height: 0; @extend %selected-button; } } // Elementary Apps // // Birdie // //BirdieWidgetsTweetList * { // background-image: none; // background-color: transparent; //} // // Marlin / Pantheon Files // //MarlinViewWindow { // // *:selected, *:selected:focus { // color: $selected_fg_color; // background-color: $selected_bg_color; // outline-color: transparent; // } // GtkIconView.view:selected { // &, &:focus, &:hover, &:focus:hover { background-color: transparent; } // } // FMListView, FMColumnView { outline-color: transparent; } //} .marlin-pathbar.pathbar { border-radius: 3px; padding-left: 4px; padding-right: 4px; @include entry(header-normal); &:focus { @include entry(header-focus) } &:disabled { @include entry(header-insensitive) } &:active, &:checked { color: $selected_bg_color; } } // // Gala // .gala-notification { border: 1px solid rgba(0, 0, 0, 0.35); border-radius: 3px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); background-image: _solid(white); background-color: transparent; .title, .label { color: #5c616c; } } // // Wingpanel // .panel { background-color: transparent; color: white; font-weight: bold; &-shadow { background-image: none; background-color: transparent; } .menu { box-shadow: none; .menuitem { font-weight: normal; text-shadow: none; -gtk-icon-shadow: none; } .window-frame.menu.csd, .window-frame.popup.csd { box-shadow: 0 0 0 1px transparentize(black, 0.8), 0 10px 20px transparentize(black, 0.81), 0 6px 6px transparentize(black, 0.77); } } .menubar > .menuitem { padding: 3px 6px; &:hover { background-color: transparent; } } .window-frame.menu.csd, .window-frame.popup.csd { box-shadow: none; } } .composited-indicator { background-color: transparent; color: white; text-shadow: 0 1px 2px transparentize(black, 0.4); -gtk-icon-shadow: 0 1px 2px transparentize(black, 0.4); > GtkWidget > GtkWidget:first-child { padding: 0 2px; } .menuitem:active, .menuitem:hover { border-style: none; background-image: none; box-shadow: none; } > .popup > .menu { padding-top: 8px; padding-bottom: 8px; } } .panel-app-button > GtkWidget > GtkWidget:first-child { padding: 0 2px 0 4px; } .panel .menu .spinner, .menu .spinner { opacity: 1 } // Fixes sound indicator buttons /******************** * Mate-Screensaver * ********************/ .lock-dialog { background-color: $panel_bg; color: white; & entry, entry:focus textview text { background-color: transparent; color: white; border-style: none; border-bottom: 1px solid $borders_color; border-radius: 1px; } frame > border { border-style: none; border-width: 0px; } & notebook { color: white; background-color: transparentize($panel_bg, 0.8); } & button { @extend %selected-button; } } // // Wingpanel Popover // //WingpanelWidgetsIndicatorPopover.popover { // padding: 0; // // text-shadow: none; // -gtk-icon-shadow: none; // // menuitem { // padding: 5px; // outline-color: transparent; // text-shadow: none; // -gtk-icon-shadow: none; // border: solid transparent; // border-width: 1px 0; // // label, image { padding: 0 3px; } // // &:hover, &:active { // background-color: if($variant == 'light', transparentize(black, 0.96), transparentize(white, 0.95)); // border: solid if($variant == 'light', transparentize(black, 0.92), transparentize(white, 0.93)); // border-width: 1px 0; // } // *:disabled { color: $insensitive_fg_color; } // } //} // // Pantheon Terminal // //PantheonTerminalPantheonTerminalWindow.background { // background-color: transparent; //} // // Switchboard // //SwitchboardCategoryView .view:selected, //SwitchboardCategoryView .view:selected:focus { // color: $fg_color; //} // // Chromium // window.background.chromium { // See details in nav_button_provider_gtk3.cc headerbar.titlebar button.titlebutton { min-width: 16px; min-height: 16px; // move button spacing from padding to margin margin: 0px ((24px - 16px) / 2); padding: 0px; } } ================================================ FILE: common/gtk-3.0/3.20/sass/_budgie.scss ================================================ // main container .budgie-container { background-color: transparent; } $menuitem_size: 28px; $medium_size: 32px; $large_size: 44px; $container_padding: 6px; $z-depth-2: rgba(0, 0, 0, 0.28); $z-depth-4: rgba(0, 0, 0, 0.34); *:drop(active):focus, *:drop(active) { box-shadow: inset 0 0 0 1px $selected_bg_color } .budgie-panel { // solid-mode // always use dark-color of dark variant background-color: $panel_bg; color: $selected_fg_color; font-weight: normal; // used to indicate unread notifications .alert { color: $suggested_color; } &:backdrop { color: $selected_fg_color; background-color: $panel_bg; } // transparent-mode &.transparent { color: $selected_fg_color; background-color: transparentize($panel_bg, 0.6); } button { @extend button; min-height: 16px; min-width: 16px; padding: 0; border-radius: 0; color: $selected_fg_color; &:hover { box-shadow: gtkalpha($panel_bg, 0.4); background-color: transparentize($panel_bg, 0.6); border-color: transparentize($panel_bg, 0.6); } } &.horizontal button { padding: 0 4px; } &.vertical button { padding: 4px 0; } separator { background-color: transparentize($fg_color, 0.6); } &.vertical #tasklist-button { min-height: 32px; } .end-region { background-color: rgba(0,0,0,0.3); border-radius: 0px; separator { background-color: transparentize($selected_fg_color, 0.85); } label { font-weight: 700; color: $selected_fg_color; } } } .budgie-panel { button.flat.launcher { padding: 0; border-radius: 0; border: none; background-image: radial-gradient(circle farthest-corner at center, gtkalpha($fg_color, 0) 100%, transparent 0%), image(gtkalpha($fg_color, 0)); background-position: center center; > image { opacity: 0.87; } &:hover { -gtk-icon-effect: highlight; > image { opacity: 1.0; } } &:active { > image { opacity: 1.0; } } &:checked { background-color: transparent; &:hover { -gtk-icon-effect: highlight; } > image { opacity: 1.0; } } } .unpinned button.flat.launcher, .pinned button.flat.launcher.running { &:hover { -gtk-icon-effect: highlight; } > image { background-size: 2px 2px; background-repeat: no-repeat; opacity: 1.0; } &:hover, &:active, &:checked { > image { background-image: none; } } } } // draw underscores and dots @each $position, $_line in (top, 0 2px), (bottom, 0 -2px), (left, 2px 0), (right, -2px 0) { .#{$position} .budgie-panel { button#tasklist-button, button.flat.launcher { &:hover { box-shadow: inset #{$_line} gtkalpha($fg_color, 0.4); background-color: transparentize($fg_color, 0.6); border: none; } &:active, &:checked { box-shadow: inset #{$_line} $selected_bg_color; } } .unpinned button.flat.launcher, .pinned button.flat.launcher.running { > image { background-image: image($selected_bg_color); background-position: #{$position} center; } &:hover, &:active, &:checked { box-shadow: inset #{$_line} $selected_bg_color; } } } } @each $along_side, $opp_side in (top, bottom), (bottom, top), (left, right), (right, left) { // panel shadow styling .#{$along_side} .shadow-block { background-color: transparent; background-image: linear-gradient(to #{$opp_side}, gtkalpha(#000000, 0.23), gtkalpha(#000000, 0.08), transparent); } } // budgie specific popover widgets .budgie-popover { border-style: none; border-width: 1px; border-color: $z-depth-2; border-radius: 1px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.28); background-color: $bg_color; .container { padding: 2px; } border { border: none; } list { background-color: transparent; } row { padding: 0; &:hover { box-shadow: none; } } &:not(.budgie-menu) button.flat:not(.image-button) { min-height: $menuitem_size; padding: 0 8px; color: $fg_color; font-weight: normal; &:disabled { color: $insensitive_fg_color; } } &.budgie-menu { .container { padding: 0; } } &.user-menu { .container { padding: 8px; } separator { margin: 4px 0; } } &.sound-popover { separator { margin: 3px 0; } } &.night-light-indicator { .container { padding: 8px; } } &.places-menu { .container { padding: 8px; } .places-list:not(.always-expand) { margin-top: 4px; padding-top: 4px; border-top: 1px solid $borders_color; } // I guess this really should be hard-coded as well as other dim-labels. .alternative-label { padding: 3px; font-size: 15px; } } &.workspace-popover { .container { padding: 2px 8px 8px; } separator { margin: 4px 0; } flowboxchild { padding: 0; } } } // main menu styling .workspace-switcher { .workspace-layout { border: 0 solid $panel_bg; .top &, .bottom & { &:dir(ltr) { border-left-width: 1px; } &:dir(rtl) { border-right-width: 1px; } } .left &, .right & { border-top-width: 1px; } } .workspace-item, .workspace-add-button { border: 0 solid darken($panel_bg, 5%); .top &, .bottom & { &:dir(ltr) { border-right-width: 1px; } &:dir(rtl) { border-left-width: 1px; } } .left &, .right & { border-bottom-width: 1px; } } .workspace-item { &.current-workspace { background-color: darken($panel_bg, 5%); } } .workspace-add-button { &:hover { box-shadow: none; } &:active { background-image: none; } &:active image { margin: 1px 0 -1px; } } .workspace-icon-button { .budgie-panel & { // to overwrite the .budgie-panel button style below min-height: 24px; min-width: 24px; padding: 0; border-radius: 2px; } } } // Budgie Menu .budgie-menu { &.background { padding: 0; background-color: $base_color; } scrollbar, entry.search { background-color: transparent; } entry.search { border-style: none; border-bottom: 1px solid $borders_color; border-radius: 1px; box-shadow: none; font-size: 120%; padding-top: 6px; padding-bottom: 6px; } button { @extend row.activatable; min-height: 32px; padding: 0 8px; border-radius: 0; color: $fg_color; font-weight: normal; } row { padding: 0; &:hover { box-shadow: none; } } } // Menu Button button.budgie-menu-launcher { // padding: 0 2px; color: white; border: none; &:hover { background-color: transparentize($fg_color, 0.6); border: none; } } // User Menu popover.background.user-menu { padding: 8px; .content-box { background-color: transparent; } separator { margin: 4px 0; } row { padding: 0; box-shadow: none; background-image: none; } } // Raven Trigger button.raven-trigger { color: $selected_fg_color; border: none; &:hover { background-color: transparentize($fg_color, 0.6); border: none; } } // Places Menu popover.background.places-menu { padding: 8px; // FIXME: untested .message-bar { // margin-bottom: 4px; } .name-button.text-button { // padding: 4px 8px; padding-left: 8px; padding-right: 8px; image { &:dir(ltr) { margin-right: 8px - 5px; } &:dir(rtl) { margin-left: 8px - 5px; } } } // FIXME: untested .unmount-button { // padding: ($medium_size - 24px) / 2; } .places-section-header > image { &:dir(ltr) { margin: 0 8px - 10px 0 8px - 3px; } &:dir(rtl) { margin: 0 8px - 3px 0 8px - 10px; } } .places-list { margin-top: 4px; padding-top: 4px; border-top: 1px solid $borders_color; background-color: transparent; } row { padding: 0; box-shadow: none; background-image: none; } // FIXME: untested .unlock-area { entry { } button { } } } frame.raven-frame > border { border-style: none; box-shadow: none; } // Raven .raven { background-color: $bg_color; color: $fg_color; padding: $container_padding 0 0 0; border: none; .raven-header { min-height: $medium_size; padding: 3px; &.top { padding: 2px 0; background-color: $bg_color; color: $fg_color; stackswitcher button { margin: -$container_padding 0; min-height: $medium_size; } } &.bottom { border-top: 1px solid $borders_color; } } viewport.frame .raven-header { margin-top: -8px; } .raven-background { border-style: solid none; border-width: 1px; border-color: $borders_color; background-color: $base_color; // &.middle { border-bottom-style: none; } // applet background between two headers } scrolledwindow.raven-background { border-bottom-style: none; } .powerstrip button { margin: 2px 0 1px; padding: ($large_size - 24px) / 2; } .option-subtitle { font-size: smaller; } } // Calendar calendar.raven-calendar { // padding: 3px; border-style: none; background-color: transparent; &:selected { border-radius: 2px; background-color: $bg_color; } } // MPRIS Applet .raven-mpris { background-color: rgba($bg_color, 0.8); color: $fg_color; label { min-height: 24px; } } // Notifications .budgie-notification-window { background-color: transparent; color: $osd_fg_color; border-radius: 2px; // draw actual backgrounds .drop-shadow { background-color: $osd_bg_color; } } .budgie-notification { .notification-title { font-size: 110%; color: $osd_fg_color; } .notification-body { @extend .dim-label; color: $osd_fg_color; } background-color: $osd_bg_color; color: $osd_fg_color; } // On Screen Display in Budgie .budgie-osd-window { @extend .budgie-notification-window; } // Internal part of the OSD .budgie-osd { @extend .budgie-notification; .budgie-osd-text { font-size: 120%; } } // Alt+tab switcher in Budgie .budgie-switcher-window { @extend .budgie-notification; .drop-shadow { margin: 8px 8px 16px; // reserve area for shadows border-radius: 2px; background-color: $osd_bg_color; box-shadow: $z-depth-2; label.budgie-switcher-title { color: $osd_fg_color; &:dir(ltr) { padding: 0 0 0 6px; } &:dir(rtl) { padding: 0 6px 0 0; } } } } // Internal part of the Switcher .budgie-switcher { @extend .budgie-notification; } .drop-shadow { margin: 5px 9px; padding: 3px; border-radius: 2px; box-shadow: none; background-color: $bg_color; .linked > button { border-radius: 2px; } } %budgie_dialog { border-radius: 2px; background-color: $bg_color; decoration { border-radius: 2px; } } // Session Dialog .budgie-session-dialog { @extend %budgie_dialog; label:not(:last-child), .dialog-title { font-size: 120%; } .linked.horizontal > button { padding: 8px 16px; border-top: 1px solid $borders_color; border-radius: 0; &:first-child { border-bottom-left-radius: 2px; } &:last-child { border-bottom-right-radius: 2px; } } } // PolKit Dialog .budgie-polkit-dialog { @extend %budgie_dialog; .message { color: $fg_color; } .failure { color: $destructive_color; } } // Run Dialog .budgie-run-dialog { @extend %budgie_dialog; background-color: $base_color; border-style: none; entry.search { font-size: 120%; box-shadow: none; background-color: transparent; border-style: none; border-bottom: 1px solid $borders_color; border-radius: 1px; padding-top: 6px; padding-bottom: 6px; } list .dim-label { opacity: 1; } scrolledwindow { border-top: 1px solid $borders_color; } } ================================================ FILE: common/gtk-3.0/3.20/sass/_colors-public.scss ================================================ //apps rely on some named colors to be exported // Sass thinks we're using the colors in the variables as strings and may shoot // warning, it's innocuous and can be defeated by using "" + $var @define-color theme_fg_color #{"" + $fg_color}; @define-color theme_text_color #{"" + $text_color}; @define-color theme_bg_color #{"" + $bg_color}; @define-color theme_base_color #{"" + $base_color}; @define-color theme_selected_bg_color #{"" + $selected_bg_color}; @define-color theme_selected_fg_color #{"" + $selected_fg_color}; @define-color fg_color #{"" + $fg_color}; @define-color text_color #{"" + $text_color}; @define-color bg_color #{"" + $bg_color}; @define-color base_color #{"" + $base_color}; @define-color selected_bg_color #{"" + $selected_bg_color}; @define-color selected_fg_color #{"" + $selected_fg_color}; @define-color insensitive_bg_color #{"" + $insensitive_bg_color}; @define-color insensitive_fg_color alpha(#{"" + opacify($insensitive_fg_color, 1)}, 0.5); @define-color insensitive_base_color #{"" + $base_color}; @define-color theme_unfocused_fg_color #{"" + $fg_color}; @define-color theme_unfocused_text_color #{"" + $text_color}; @define-color theme_unfocused_bg_color #{"" + $bg_color}; @define-color theme_unfocused_base_color #{"" + $base_color}; @define-color borders #{"" + $borders_color}; @define-color unfocused_borders #{"" + $borders_color}; @define-color warning_color #{"" + $warning_color}; @define-color error_color #{"" + $error_color}; @define-color success_color #{"" + $success_color}; @define-color placeholder_text_color #{#A8A8A8}; @define-color link_color #{"" + $link_color}; @define-color content_view_bg #{"" + $base_color}; //WM $wm_highlight: lighten(opacify($header_bg, 1), 3%); $wm_bg_unfocused: opacify($header_bg_backdrop, 1); @define-color wm_title alpha(#{"" + opacify($header_fg, 1)}, 0.8); @define-color wm_unfocused_title alpha(#{"" + opacify($header_fg, 1)}, 0.5); @define-color wm_bg #{"" + opacify($header_bg, 1)}; @define-color wm_bg_unfocused #{"" + $wm_bg_unfocused}; @define-color wm_highlight #{"" + $wm_highlight}; @define-color wm_shadow alpha(#{black}, 0.35); //WM Buttons // Close @define-color wm_button_close_bg #{"" + $wm_button_close_bg}; @define-color wm_button_close_hover_bg #{"" + $wm_button_close_hover_bg}; @define-color wm_button_close_active_bg #{"" + $wm_button_close_active_bg}; @define-color wm_icon_close_bg #{"" + $wm_icon_close_bg}; // Minimize, Maximize @define-color wm_button_hover_bg #{"" + $wm_button_hover_bg}; @define-color wm_button_active_bg #{"" + $wm_button_active_bg}; @define-color wm_button_hover_border #{"" + $wm_button_hover_border}; @define-color wm_icon_bg #{"" + $wm_icon_bg}; @define-color wm_icon_unfocused_bg #{"" + $wm_icon_unfocused_bg}; @define-color wm_icon_hover_bg #{"" + $wm_icon_hover_bg}; @define-color wm_icon_active_bg #{"" + $wm_icon_active_bg}; ================================================ FILE: common/gtk-3.0/3.20/sass/_colors.scss ================================================ // When color definition differs for dark and light variant, // it gets @if ed depending on $variant $base_color: if($variant =='light', #ffffff, #404552); $text_color: if($variant == 'light', #5c616c, #D3DAE3); $bg_color: if($variant =='light', #F5F6F7, #383C4A); $fg_color: if($variant =='light', #5c616c, #D3DAE3); $selected_fg_color: #ffffff; $selected_bg_color: #5294e2; $selected_borders_color: darken($selected_bg_color, 20%); $borders_color: if($variant =='light', darken($bg_color,9%), darken($bg_color,6%)); $horizontal_separators_color: if($variant == 'light', $borders_color, darken($fg_color,50%)); $link_color: if($variant == 'light', darken($selected_bg_color,10%), lighten($selected_bg_color,20%)); $link_visited_color: if($variant == 'light', darken($selected_bg_color,20%), lighten($selected_bg_color,10%)); $selection_mode_bg: if($transparency == 'true', transparentize($selected_bg_color, 0.05), $selected_bg_color); $selection_mode_fg: $selected_fg_color; $warning_color: #F27835; $error_color: #FC4138; $warning_fg_color: white; $error_fg_color: white; $success_color: #73d216; $destructive_color: #F04A50; $suggested_color: #4DADD4; $destructive_fg_color: white; $suggested_fg_color: white; $drop_target_color: #F08437; //insensitive state derived colors $insensitive_fg_color: if($variant == 'light', transparentize($fg_color, 0.45), transparentize($fg_color, 0.55)); $insensitive_bg_color: if($variant == 'light', mix($bg_color, $base_color, 40%), lighten($bg_color, 2%)); $header_bg: red; @if $transparency=='true' and $variant=='light' { $header_bg: transparentize(#e7e8eb, 0.05); } @if $transparency=='false' and $variant=='light' { $header_bg: #e7e8eb; } @if $transparency=='true' and ($variant=='dark' or $darker=='true') { $header_bg: transparentize(#2f343f, 0.03); } @if $transparency=='false' and ($variant=='dark' or $darker=='true') { $header_bg: #2f343f; } $header_bg_backdrop: if($darker == 'true' or $variant == 'dark', lighten($header_bg, 1.5%), lighten($header_bg, 3%)); $header_border: if($variant == 'light' and $darker=='false', darken($header_bg, 7%), darken($header_bg, 4%)); $header_fg: if($variant == 'light', saturate(transparentize($fg_color, 0.2), 10%), saturate(transparentize($fg_color, 0.2), 10%)); $header_fg: if($darker == 'true', saturate(transparentize(#D3DAE3, 0.2), 10%), $header_fg); $dark_sidebar_bg: if($transparency == 'true', transparentize(#353945, 0.05), #353945); $dark_sidebar_fg: #BAC3CF; $dark_sidebar_border: if($variant == 'light', $dark_sidebar_bg, darken($dark_sidebar_bg, 5%)); $osd_fg_color: $dark_sidebar_fg; $osd_bg_color: $dark_sidebar_bg; $osd_button_bg: transparentize(lighten($osd_bg_color, 22%), 0.6); $osd_button_border: transparentize(darken($osd_bg_color, 12%), 0.6); $osd_entry_bg: transparentize(lighten($osd_bg_color, 22%), 0.6); $osd_entry_border: transparentize(darken($osd_bg_color, 12%), 0.6); $osd_insensitive_bg_color: darken($osd_bg_color, 3%); $osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 30%); $osd_borders_color: transparentize(black, 0.3); $panel_bg: darken($dark_sidebar_bg, 4.7%); $panel_fg: $dark_sidebar_fg; $entry_bg: if($variant=='light', $base_color, lighten($base_color, 0%)); $entry_border: if($variant == 'light', #cfd6e6, darken($borders_color, 0%)); $header_entry_bg: if($darker == 'true' or $variant == 'dark', transparentize(lighten($header_bg, 22%), 0.6), transparentize($base_color, 0.1)); $header_entry_border: if($darker == 'true' or $variant == 'dark', transparentize(darken($header_bg, 12%), 0.6), transparentize($header_fg, 0.7)); $button_bg: if($variant == 'light', lighten($bg_color, 2%), lighten($base_color, 2%)); $button_border: $entry_border; $header_button_bg: if($darker == 'true' or $variant == 'dark', transparentize(lighten($header_bg, 22%), 0.6), transparentize($button_bg, 0.1)); $header_button_border: if($darker == 'true' or $variant == 'dark', transparentize(darken($header_bg, 12%), 0.6), transparentize($header_fg, 0.7)); //WM Buttons // Close $wm_button_close_bg: if($variant == 'light' and $darker == 'false', #f46067, #cc575d); $wm_button_close_hover_bg: if($variant == 'light' and $darker == 'false', #f68086, #d7787d); $wm_button_close_active_bg: if($variant == 'light' and $darker == 'false', #f13039, #be3841); $wm_icon_close_bg: if($variant == 'light' and $darker == 'false',#F8F8F9 , #2f343f); // Minimize, Maximize $wm_button_hover_bg: if($variant == 'light' and $darker == 'false', #fdfdfd, #454C5C); $wm_button_active_bg: $selected_bg_color; $wm_button_hover_border: if($variant == 'light' and $darker == 'false', #D1D3DA, #262932); $wm_icon_bg: if($variant == 'light' and $darker == 'false', #90949E, #90939B); $wm_icon_unfocused_bg: if($variant == 'light' and $darker == 'false', #B6B8C0, #666A74); $wm_icon_hover_bg: if($variant == 'light' and $darker == 'false', #7A7F8B, #C4C7CC); $wm_icon_active_bg: $selected_fg_color; ================================================ FILE: common/gtk-3.0/3.20/sass/_common.scss ================================================ @function gtkalpha($c,$a) { @return unquote("alpha(#{$c},#{$a})"); } $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); $backdrop_transition: 200ms ease-out; $asset_suffix: if($variant=='dark', '-dark', ''); // use dark assets in dark variant $darker_asset_suffix: if($darker=='true', '-dark', $asset_suffix); * { background-clip: padding-box; -GtkToolButton-icon-spacing: 4; -GtkTextView-error-underline-color: $error_color; -GtkScrolledWindow-scrollbar-spacing: 0; -GtkToolItemGroup-expander-size: 11; -GtkWidget-text-handle-width: 20; -GtkWidget-text-handle-height: 20; -GtkDialog-button-spacing: 4; -GtkDialog-action-area-border: 0; // We use the outline properties to signal the focus properties outline-color: gtkalpha(currentColor, 0.3); outline-style: dashed; outline-offset: -3px; outline-width: 1px; -gtk-outline-radius: 2px; } // // Base States // .background { color: $fg_color; background-color: if($transparency == 'true', transparentize($bg_color, 0.001), $bg_color); // without this headerbar transparency doesn't seem to work } *:disabled { -gtk-icon-effect: dim; } .gtkstyle-fallback { background-color: $bg_color; color: $fg_color; &:hover { background-color: lighten($bg_color, 10%); color: $fg_color; } &:active { background-color: darken($bg_color, 10%); color: $fg_color; } &:disabled { background-color: $insensitive_bg_color; color: $insensitive_fg_color; } &:selected { background-color: $selected_bg_color; color: $selected_fg_color; } } .view, %view { color: $text_color; background-color: $base_color; &:selected { &, &:focus { @extend %selected_items; border-radius: 2px; } } } .view, textview { text { @extend %view; selection { &:focus, & { @extend %selected_items; }} } } textview border { background-color: mix($bg_color, $base_color, 50%); } iconview { @extend .view; } rubberband, .rubberband { border: 1px solid darken($selected_bg_color, 10%); background-color: transparentize(darken($selected_bg_color, 10%), 0.8); } flowbox { rubberband { @extend rubberband } flowboxchild { padding: 3px; border-radius: 2px; &:selected { @extend %selected_items; outline-offset: -2px; } } } label { &.separator { @extend .dim-label; color: $fg_color; } row:selected &, &:selected { @extend %nobg_selected_items; } selection { color: $selected_fg_color; background-color: $selected_bg_color; } &:disabled { color: $insensitive_fg_color; selection { @extend %selected_items:disabled; } } } .dim-label { opacity: 0.55; } assistant { .sidebar { background-color: $base_color; border-top: 1px solid $borders_color; } &.csd .sidebar { border-top-style: none; } .sidebar label { padding: 6px 12px; } .sidebar label.highlight { background-color: $selected_bg_color; color: $selected_fg_color; } } textview { // This will get overridden by .view, needed by gedit line numbers background-color: $base_color; } %osd, .osd { color: $osd_fg_color; border: none; background-color: $osd_bg_color; background-clip: padding-box; box-shadow: none; } // // Spinner Animations // @keyframes spin { to { -gtk-icon-transform: rotate(1turn); } } spinner { background: none; opacity: 0; // non spinning spinner makes no sense -gtk-icon-source: -gtk-icontheme('process-working-symbolic'); &:checked { opacity: 1; animation: spin 1s linear infinite; &:disabled { opacity: 0.5; } } } // // Text Entries // entry { min-height: 22px; border: 1px solid; padding: 2px 8px; caret-color: currentColor; border-radius: 3px; transition: all 200ms $ease-out-quad; &.search { border-radius: 20px; } @include entry(normal); image { // icons inside the entry color: mix($fg_color,$base_color,80%); &.left { padding-left: 0; padding-right: 5px; } &.right { padding-right: 0; padding-left: 5px; } } &.flat { &, &:focus { min-height: 0; padding: 2px; background-image: none; border-color: transparent; border-radius: 0; } } &:focus { background-clip: border-box; @include entry(focus); } &:disabled { @include entry(insensitive); } selection { &:focus, & { @extend %selected_items; }} // error and warning style @each $e_type, $e_color, $e_fg_color in (warning, $warning_color, $warning_fg_color), (error, $error_color, $error_fg_color), // entry.search-missing for Gnome-Builder (search-missing, $error_color, $error_fg_color) { &.#{$e_type} { color: $e_fg_color; border-color: if($variant=='light', $e_color, $entry_border); background-color: mix($e_color, $base_color, 60%); image { color: $e_fg_color; } &:focus { color: $e_fg_color; background-color: $e_color; box-shadow: none; } selection, selection:focus { background-color: $e_fg_color; color: $e_color; } } } &:drop(active) { &:focus, & { border-color: $drop_target_color; box-shadow: none; } } .osd & { @include entry(osd); &:focus { @include entry(osd-focus); } &:disabled { @include entry(osd-insensitive); } selection { &:focus, & { color: $selected_bg_color; background-color: $selected_fg_color; } } } progress { margin: 0 -6px; border-radius: 0; border-width: 0 0 2px; border-color: $selected_bg_color; border-style: solid; background-image: none; background-color: transparent; box-shadow: none; } // linked entries .linked:not(.vertical) > &, .linked:not(.vertical) > &:focus { @extend %linked; } .linked.vertical > &, .linked.vertical > &:focus { @extend %linked_vertical; } } treeview entry { &.flat, & { border-radius: 0; background-image: none; background-color: $base_color; &:focus { border-color: $selected_bg_color; } } } // // Buttons // // stuff for .needs-attention $_dot_color: $selected_bg_color; @keyframes needs_attention { from { background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to($_dot_color), to(transparent)); } to { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to($selected_bg_color), to(transparent)); } } $button_transition: all 200ms $ease-out-quad; button { min-height: 22px; min-width: 20px; transition: $button_transition; border: 1px solid; border-radius: 3px; padding: 2px 6px; @include button(normal); separator { margin: 4px 1px; } &.flat { @include button(undecorated); // to avoid adiacent buttons borders clashing when transitioning, the transition on the normal state is set // to none, while it's added back in the hover state, so the button decoration will fade in on hover, but // it won't fade out when the pointer leave the button allocation area. To make the transition more evident // in this case the duration is increased. transition: none; &:hover { transition: $button_transition; transition-duration: 350ms; &:active { transition: $button_transition; } } } &:hover { @include button(hover); -gtk-icon-effect: highlight; } &:active, &:checked { @include button(active); background-clip: if($variant=='light', border-box, padding-box); transition-duration: 50ms; &:not(:disabled) label:disabled { color: inherit; opacity: 0.6; } } //Webkitgtk workaround start &:active { color: $fg_color; } &:active:hover, &:checked { color: $selected_fg_color; } //Webkitgtk workaround end &.flat:disabled { @include button(undecorated); } &:disabled { @include button(insensitive); &:active, &:checked { @include button(insensitive-active); } } &.image-button { min-width: 24px; padding-left: 5px; padding-right: 5px; } &.text-button { padding-left: 12px; padding-right: 12px; } &.text-button.image-button { padding-left: 5px; padding-right: 5px; label { &:first-child { padding-left: 8px; padding-right: 2px; } &:last-child { padding-right: 8px; padding-left: 2px; } &:only-child { padding-left: 8px; padding-right: 8px; } } &.popup { padding-right: 8px; padding-left: 8px; } } &:drop(active) { color: $drop_target_color; border-color: $drop_target_color; box-shadow: none; } // big standalone buttons like in Documents pager &.osd { color: $osd_fg_color; background-color: $osd_bg_color; border-color: darken($osd_bg_color, 8%); &.image-button { padding: 0; min-height: 36px; min-width: 36px; } &:hover { color: $selected_bg_color; } &:active, &:checked { @include button(osd-active); } &:disabled { @include button(osd-insensitive); } } //overlay / OSD style .osd & { @include button(osd); &:hover { @include button(osd-hover); } &:active, &:checked { background-clip: padding-box; @include button(osd-active); } &:disabled { @include button(osd-insensitive); } &.flat { @include button(undecorated); box-shadow: none; &:hover { @include button(osd-hover); } &:disabled { @include button(osd-insensitive); background-image: none; } &:active, &:checked { @include button(osd-active); } } } .osd .linked:not(.vertical):not(.path-bar) > &:hover:not(:checked):not(:active):not(:only-child), .osd .linked:not(.vertical):not(.path-bar) > &:hover:not(:checked):not(:active) + &:not(:checked):not(:active) { box-shadow: none; } // Suggested and Destructive Action buttons @each $b_type, $b_color, $b_fg in (suggested-action, $suggested_color, $suggested_fg_color), (destructive-action, $destructive_color, $destructive_fg_color) { &.#{$b_type} { @include button(suggested_destructive, $b_color, $b_fg); &.flat { @include button(undecorated); color: $b_color; } &:hover { @include button(suggested_destructive, lighten($b_color, 10%), $b_fg); } &:active, &:checked { @include button(suggested_destructive, darken($b_color, 10%), $b_fg); } &.flat:disabled { @include button(undecorated); color: $insensitive_fg_color; } &:disabled { @include button(insensitive); } } } .stack-switcher > & { // to position the needs attention dot, padding is added to the button // child, a label needs just lateral padding while an icon needs vertical // padding added too. outline-offset: -3px; // needs to be set or it gets overridden by GtkRadioButton outline-offset > label { padding-left: 6px; // label padding padding-right: 6px; // } > image { padding-left: 6px; padding-right: 6px; padding-top: 3px; padding-bottom: 3px; } &.text-button { padding-left: 10px; padding-right: 10px; } &.image-button { padding-left: 2px; padding-right: 2px; } &.needs-attention { > label, > image { @extend %needs_attention; } &:active, &:checked { > label, > image { animation: none; background-image: none; } } } } %needs_attention { animation: needs_attention 150ms ease-in; background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to($_dot_color), to(transparent)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; @if $variant == 'light' { background-position: right 3px, right 4px; } @else { background-position: right 3px, right 2px; } &:dir(rtl) { @if $variant == 'light' { background-position: left 3px, left 4px; } @else { background-position: left 3px, left 2px; } } } // hide separators &.font, &.file { separator { background-color: transparent; }} //inline-toolbar buttons .inline-toolbar &, .inline-toolbar &:backdrop { border-radius: 2px; border-width: 1px; @extend %linked; } .linked:not(.vertical) > &, .linked:not(.vertical) > &:hover, .linked:not(.vertical) > &:active, .linked:not(.vertical) > &:checked { @extend %linked; } .linked.vertical > &, .linked.vertical > &:hover, .linked.vertical > &:active, .linked.vertical > &:checked { @extend %linked_vertical; } } // all the following is for the +|- buttons on inline toolbars, that way // should really be deprecated... .inline-toolbar toolbutton > button { // redefining the button look is // needed since those are flat... @include button(normal); &:hover { @include button(hover); } &:active, &:checked{ @include button(active); } &:disabled { @include button(insensitive); } &:disabled:active, &:disabled:checked { @include button(insensitive-active); } } // More inline toolbar buttons toolbar.inline-toolbar toolbutton { & > button.flat { @extend %linked_middle; } &:first-child > button.flat { @extend %linked:first-child; } &:last-child > button.flat { @extend %linked:last-child; } &:only-child > button.flat { @extend %linked:only-child; } } // Some crazy linking stuff @mixin linking_rules($a:0.7, $var:$variant, $vert:'false', $entry_rules:'true', $button_rules:'true', $e_border:$entry_border, $b_border:$button_border) { $_border: if($vert=='false', left, top); @if $entry_rules=='true' { > entry + entry { border-#{$_border}-color: transparentize($e_border, $a); } > entry.error + entry, > entry + entry.error { border-#{$_border}-color: if($var=='light', $error_color, transparentize($e_border, $a)); } > entry.warning + entry, > entry + entry.warning { border-#{$_border}-color: if($var=='light', $warning_color, transparentize($e_border, $a)); } > entry.error + entry.warning, > entry.warning + entry.error { border-#{$_border}-color: if($var=='light', mix($error_color, $warning_color, 50%), transparentize($e_border, $a));} @each $e_type, $e_color in (':focus',$selected_bg_color), (':drop(active)', $drop_target_color), ('.warning:focus', $warning_color), ('.error:focus', $error_color) { > entry + entry#{$e_type}:not(:last-child), > entry + entry#{$e_type}:last-child { border-#{$_border}-color: if($var=='light', $e_color, $e_border); } > entry#{$e_type}:not(:only-child) { + entry, + button, + combobox > box > button.combo { border-#{$_border}-color: if($var=='light', $e_color, $e_border); } } } > button:active + entry, > button:checked + entry { border-#{$_border}-color: if($var=='light', $selected_bg_color, $e_border); } } @if $button_rules=='true' { $_uncolored_button: 'button:not(:checked):not(:active):not(.suggested-action):not(.destructive-action)'; > button + button { border-#{$_border}-style: none; } > #{$_uncolored_button}:hover:not(:only-child), > #{$_uncolored_button}:hover + #{$_uncolored_button} { box-shadow: inset if($vert=='false', 1px 0, 0 1px) $b_border; } > #{$_uncolored_button}:disabled:not(:only-child), > #{$_uncolored_button}:disabled + #{$_uncolored_button}:not(:hover) { box-shadow: inset if($vert=='false', 1px 0, 0 1px) transparentize($b_border, 0.5); } > button:active + #{$_uncolored_button}:hover, > button:checked + #{$_uncolored_button}:hover, > button.suggested-action + #{$_uncolored_button}:hover, > button.destructive-action + #{$_uncolored_button}:hover, > entry + #{$_uncolored_button}:hover:not(:only-child), > #{$_uncolored_button}:first-child:disabled, > #{$_uncolored_button}:disabled + #{$_uncolored_button}:disabled, > #{$_uncolored_button}:first-child:hover, > button:active + #{$_uncolored_button}:disabled, > button:checked + #{$_uncolored_button}:disabled, > button.suggested-action + #{$_uncolored_button}:disabled, > button.destructive-action + #{$_uncolored_button}:disabled, > entry + #{$_uncolored_button}:disabled:not(:only-child), { box-shadow: none; } } } // special case, because path-bars are bugged @mixin pathbar_linking_rules($sep_color:if($variant=='light', transparentize($button_border, 0.6), transparentize($button_border, 0.5))) { > button + button { border-left-style: none; } > button:hover:not(:checked):not(:active):not(:only-child) { &:hover { box-shadow: inset 1px 0 $sep_color, inset -1px 0 $sep_color; } &:first-child:hover { box-shadow: inset -1px 0 $sep_color; } &:last-child:hover { box-shadow: inset 1px 0 $sep_color; } } } // Apply the rules defined above .linked:not(.vertical) { &:not(.path-bar) { @include linking_rules(); } &.path-bar { @include pathbar_linking_rules(); } } .linked.vertical { @include linking_rules($vert:'true'); } %linked_middle { border-radius: 0; border-right-style: none; } %linked { @extend %linked_middle; &:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } &:last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-right-style: solid; } &:only-child { border-radius: 3px; border-style: solid; } } %linked_vertical_middle { border-radius: 0; border-bottom-style: none; } %linked_vertical{ @extend %linked_vertical_middle; &:first-child { border-top-left-radius: 3px; border-top-right-radius: 3px; } &:last-child { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-bottom-style: solid; } &:only-child { border-radius: 3px; border-style: solid; } } %undecorated_button { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; } // menu buttons menuitem.button.flat, modelbutton.flat { transition: none; min-height: 24px; padding-left: 8px; padding-right: 8px; outline-offset: -3px; border-radius: 2px; @extend %undecorated_button; &:hover { background-color: if($variant=='light', mix($fg_color,$bg_color,5%), mix($fg_color,$bg_color,10%)); } &:active, &:selected { &, arrow { @extend %selected_items; } } &:checked { color: $fg_color; } // FIXME: temporary workaround check:last-child, radio:last-child { margin-left: 8px; } check:first-child, radio:first-child { margin-right: 8px; } } modelbutton.flat arrow { &.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } &.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } } // // Links // *:link { color: $link_color; &:visited { color: $link_visited_color; *:selected & { color: mix($selected_fg_color, $selected_bg_color, 60%); } } &:hover { color: lighten($link_color,10%); *:selected & { color: mix($selected_fg_color, $selected_bg_color, 90%); } } &:active { color: $link_color; *:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); } } @at-root %link_selected, &:selected, *:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); } } button:link, button:visited { @extend %undecorated_button; @extend *:link; &:hover, &:active, &:checked { @extend %undecorated_button; } > label { text-decoration-line: underline; } } // // Spinbuttons // spinbutton { &:drop(active) { box-shadow: none; } button:active { color: $selected_fg_color; } &:disabled { color: $insensitive_fg_color; } &:not(.vertical) { entry { min-width: 28px; } button, entry { @extend %linked; } &:dir(ltr) entry, &:dir(rtl) button.up { border-radius: 3px 0 0 3px; } > button + button { border-left-style: none; } > button:hover:not(:active), > button:hover + button { box-shadow: inset 1px 0 $button_border; } > button:disabled + button:not(:disabled):not(:active):not(:checked):not(:hover), > button:not(:disabled):not(:active):not(:checked):not(:hover) + button:disabled { box-shadow: inset 1px 0 transparentize($button_border, 0.5); } > button:first-child:hover:not(:active), > button.up:dir(rtl):hover:not(:active), > entry + button:not(:active):hover { box-shadow: none; } > entry:focus + button { border-left-color: if($variant=='light', $selected_bg_color, $entry_border); } > entry:drop(active) + button { border-left-color: $drop_target_color; } .osd & { > button:hover:not(:active), > button:hover + button { box-shadow: inset 1px 0 $osd_button_border; } > button:first-child:hover:not(:active), > button.up:dir(rtl):hover:not(:active), > entry + button:not(:active):hover { box-shadow: none; } > entry:focus + button { border-left-color: $osd_button_border; } } } &.vertical { button, entry { padding-left: 4px; padding-right: 4px; min-width: 0; @extend %linked_vertical; } button.up { border-radius: 3px 3px 0 0; } > entry:focus + button { border-top-color: if($variant=='light', $selected_bg_color, $entry_border); } > entry:drop(active) + button { border-top-color: $drop_target_color; } } } // // Comboboxes // combobox { button.combo { min-width: 0; // otherwise the arrow placement is unsymmetric padding-left: 8px; // padding-right: 8px // } arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); min-height: 16px; min-width: 16px; } &:drop(active) button.combo { @extend button:drop(active); } .linked:not(.vertical) > & > box > button.combo { // the combobox is a composite widget so the way we do button linking doesn't // work, special case needed. &:dir(ltr), &:dir(rtl) { @extend %linked_middle; } // specificity bump } .linked:not(.vertical) > &:first-child > box > button.combo { @extend %linked:first-child; } .linked:not(.vertical) > &:last-child > box > button.combo { @extend %linked:last-child; } .linked:not(.vertical) > &:only-child > box > button.combo { @extend %linked:only-child; } .linked.vertical > & > box > button.combo { @extend %linked_vertical_middle; } .linked.vertical > &:first-child > box > button.combo { @extend %linked_vertical:first-child; } .linked.vertical > &:last-child > box > button.combo { @extend %linked_vertical:last-child; } .linked.vertical > &:only-child > box > button.combo { @extend %linked_vertical:only-child; } } // // Toolbars // toolbar { -GtkWidget-window-dragging: true; padding: 4px; background-color: $bg_color; separator { background: none; } &.horizontal separator { margin: 0 6px; } &.vertical separator { margin: 6px 0; } .osd & { background-color: transparent; } &.osd { padding: 7px; border: 1px solid transparentize(black, 0.5); border-radius: 3px; background-color: transparentize($osd_bg_color, 0.1); &.left, &.right, &.top, &.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars &.top { border-width: 0 0 1px 0; } &.bottom { border-width: 1px 0 0 0; } &.left { border-width: 0 1px 0 0; } &.right { border-width: 0 0 0 1px; } } &:not(.inline-toolbar) { switch, scale, entry, spinbutton, button { margin-right: 1px; margin-bottom: 1px; } .linked > button, .linked > entry { margin-right:0; } } } .primary-toolbar:not(.libreoffice-toolbar) { // LO messes up the toolbar styling, so exclude LO toolbars color: $header_fg; background-color: opacify($header_bg, 1); box-shadow: none; border-width: 0 0 1px 0; border-style: solid; border-image: linear-gradient(to bottom, opacify($header_bg, 1), darken($header_bg, 7%)) 1 0 1 0; //temporary hack for rhythmbox 3.1 //&:backdrop { background-color: opacify($header_bg_backdrop, 1); } separator { @extend %header_separator; } } .primary-toolbar { @extend %header_widgets; } .inline-toolbar { @extend toolbar; background-color: darken($bg_color, 3%); border-style: solid; border-color: $borders_color; border-width: 0 1px 1px; padding: 3px; border-radius: 0 0 3px 3px; } searchbar { background-color: $bg_color; border-style: solid; border-color: $borders_color; border-width: 0 0 1px; padding: 3px; } actionbar { padding: 6px; border-top: 1px solid $borders_color; background-color: darken($bg_color, 3%); } // // Headerbars // $_header_radius: if($darker=='false' and $variant=='light', 4px, 3px); headerbar, %titlebar { min-height: 42px; padding: 0 7px; border-width: 0 0 1px; border-style: solid; border-color: opacify($header_border, 1); color: $header_fg; background-color: opacify($header_bg, 1); box-shadow: inset 0 1px lighten($header_bg, 3%); .csd & { // Transparent header-bars only in csd windows background-color: $header_bg; border-color: $header_border; } &:backdrop { transition: $backdrop_transition; color: transparentize($header_fg, 0.3); background-color: opacify($header_bg_backdrop, 1); .csd & { background-color: $header_bg_backdrop; } } .title { padding-left: 12px; padding-right: 12px; } .subtitle { font-size: smaller; padding-left: 12px; padding-right: 12px; @extend .dim-label; } // Selectionmode &.selection-mode { color: $selection_mode_fg; background-color: $selection_mode_bg; border-color: darken($selection_mode_bg, 4%); box-shadow: none; &:backdrop { background-color: $selection_mode_bg; color: transparentize($selection_mode_fg, 0.4); } .subtitle:link { @extend *:link:selected; } .selection-menu { box-shadow: none; padding-left: 10px; padding-right: 10px; GtkArrow { -GtkArrow-arrow-scaling: 1; } .arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } } .maximized & { background-color: opacify($selection_mode_bg, 1); } } .tiled &, .tiled &:backdrop, .maximized &, .maximized &:backdrop { border-radius: 0; // squared corners when the window is max'd or tiled } .maximized & { background-color: opacify($header_bg, 1); border-color: opacify($header_border, 1); &:backdrop { background-color: opacify($header_bg_backdrop, 1); } } &.default-decoration, .csd &.default-decoration, // needed under wayland, since all gtk3 windows are csd windows &.default-decoration:backdrop, .csd &.default-decoration:backdrop { min-height: 28px; padding: 0 3px; background-color: opacify($header_bg, 1); border-bottom-width: 0; .maximized & { background-color: opacify($header_bg, 1); } } separator.titlebutton { @extend %header_separator; } } .titlebar { border-radius: $_header_radius $_header_radius 0 0; } headerbar { @extend %header_widgets; entry, button, separator { margin-top: 6px; margin-bottom: 6px; } // Fixes split headerbars separator:first-child + &, &:first-child { &, &:backdrop { border-top-left-radius: $_header_radius; .maximized &, .tiled & { border-radius: 0; } } } &:last-child { &, &:backdrop { border-top-right-radius: $_header_radius; .maximized &, .tiled & { border-radius: 0; } } } } // Fixes split headerbars too .titlebar:not(headerbar) { window > &, window.csd > & { &, &:backdrop { padding: 0; background: none; border: none; box-shadow: none; } } > separator { background-image: _solid($header_border); } @extend %titlebar; } .titlebar separator.sidebar { background-color: transparent; border: 0 solid $header_border; box-shadow: inset 0 1px lighten($header_bg, 3%); margin: 0; &:dir(ltr) { border-width: 0 1px 1px 0; } &:dir(rtl) { border-width: 0 0 1px 1px; } } .csd headerbar headerbar, .csd headerbar headerbar:backdrop { background-color: transparent; } %header_separator { min-width: 1px; min-height: 1px; background: none; border-width: 0 1px; border-image: linear-gradient(to bottom, transparentize($header_fg, 1) 25%, transparentize($header_fg, 0.65) 25%, transparentize($header_fg, 0.65) 75%, transparentize($header_fg, 1) 75%) 0 1/0 1px stretch; &:backdrop { opacity: 0.6; } } %header_widgets { // Headerbar Entries entry { @include entry(header-normal); &:backdrop { opacity: 0.85; } &:focus { @include entry(header-focus); background-clip: if($darker=='false' and $variant=='light', border-box, padding-box); image { color: $selected_fg_color; } } &:disabled { @include entry(header-insensitive); } selection:focus { background-color: $selected_fg_color; color: $selected_bg_color; } progress { border-color: $selected_bg_color; background-image: none; background-color: transparent; } @each $e_type, $e_color, $e_fg_color in (warning, $warning_color, $warning_fg_color), (error, $error_color, $error_fg_color) { &.#{$e_type} { color: $e_fg_color; border-color: if($darker=='false' and $variant=='light', $e_color, $header_entry_border); background-color: mix($e_color, $header_bg, 60%); &:focus { color: $e_fg_color; background-color: $e_color; } selection, selection:focus { background-color: $e_fg_color; color: $e_color; } } } } // Headerbar Buttons button { @include button(header-normal); &:backdrop { opacity: 0.7; } &:hover { @include button(header-hover); } &:active, &:checked { @include button(header-active); background-clip: if($darker=='false' and $variant=='light', border-box, padding-box); } &:disabled { @include button(header-insensitive); } &:disabled:active, &:disabled:checked { @include button(header-insensitive-active); } } &.selection-mode button { &, &.flat { @include button(undecorated); color: $selection_mode_fg; background-color: transparentize($selection_mode_fg, 1); } &:hover { @extend %normal_selected_button; } &:active, &:checked { @extend %selected-button:active; } &:disabled { @extend %selected-button.flat:disabled; &:checked, &:active { @extend %selected-button:disabled:checked; } } } // Linking stuff // Disconnect linked buttons .linked:not(.vertical):not(.path-bar):not(.nautilus-path-bar):not(.stack-switcher) { button:not(:last-child):not(:only-child) { margin-right: 1px; } } // Reset buttons .linked:not(.vertical):not(.path-bar):not(.nautilus-path-bar):not(.stack-switcher) > button { &, &:hover, &:active, &:checked, &:disabled { border-radius: 3px; border-style: solid; } } .linked:not(.vertical):not(.path-bar) { $_uncolored_button: 'button:not(:checked):not(:active):not(.suggested-action):not(.destructive-action)'; > #{$_uncolored_button}:hover:not(:only-child), > #{$_uncolored_button}:hover + #{$_uncolored_button}, > #{$_uncolored_button}:disabled:not(:only-child), > #{$_uncolored_button}:disabled + #{$_uncolored_button}:not(:hover) { box-shadow: none; } } // special case for path-bars and stack-switchers .linked:not(.vertical):not(.path-bar).stack-switcher, .linked:not(.vertical).path-bar { > button { @include button(header-hover); &:hover { background-color: lighten($header_button_bg, 15%); } &:active, &:checked { @include button(header-active); } &:disabled { color: transparentize($header_fg, 0.4); } &, &:hover, &:active, &:checked, &:disabled { @extend %linked; } } @include pathbar_linking_rules($sep_color:$header_button_border); } // use linking rules for entries only .linked:not(.vertical):not(.path-bar) { @include linking_rules( $a:0.5, $var:if($variant=='light' and $darker=='false', 'light', 'dark'), $button_rules:'false', $e_border:$header_entry_border, $b_border:$header_button_border ); } // Headerbar Suggested and Destructive Action buttons @each $b_type, $b_color, $b_fg in (suggested-action, $suggested_color, $suggested_fg_color), (destructive-action, $destructive_color, $destructive_fg_color) { button.#{$b_type} { @include button(suggested_destructive, $b_color, $b_fg); &.flat { @include button(undecorated); color: $b_color; } &:hover { @include button(suggested_destructive, lighten($b_color, 10%), $b_fg); } &:active, &:checked { @include button(suggested_destructive, darken($b_color, 10%), $b_fg); } &.flat:disabled, &:disabled { @include button(header-insensitive); } } button.#{$b_type}:backdrop, button.#{$b_type}:backdrop { opacity: 0.8; } } // Headerbar Spinbuttons spinbutton:not(.vertical) { &:focus { color: $selected_fg_color; caret-color: $selected_fg_color; } button { &,&:disabled { @include button(header-hover); } &:hover { background-color: lighten($header_button_bg, 15%); } &:active, &:checked { @include button(header-active); } &:disabled { color: transparentize($header_fg, 0.4); } } > button + button { border-left-style: none; } > button:hover:not(:active), > button:hover + button { box-shadow: inset 1px 0 $header_button_border; } > button:disabled + button:not(:disabled):not(:active):not(:checked):not(:hover), > button:not(:disabled):not(:active):not(:checked):not(:hover) + button:disabled { box-shadow: inset 1px 0 $header_button_border; } > button:first-child:hover:not(:active), > entry + button:not(:active):hover { box-shadow: none; } > entry:focus + button { border-left-color: if($variant=='light' and $darker=='false', $selected_bg_color, $header_entry_border); } } // Headerbar ComboBoxes combobox { &:disabled { color: transparentize($header_fg, 0.6); } > .linked > button.combo { @include entry(header-normal); &:hover { @include entry(header-focus); box-shadow: none; } &:disabled { @include entry(header-insensitive); } } > .linked > entry.combo { &:dir(ltr) { border-right-style: none; &:focus { box-shadow: none; } @if $variant=='light' and $darker=='false' { &:focus { box-shadow: 1px 0 $selected_bg_color; } } } &:dir(rtl) { border-left-style: none; &:focus { box-shadow: none; } @if $variant=='light' and $darker=='false' { &:focus { box-shadow: -1px 0 $selected_bg_color; } } } } > .linked > button.combo { &:dir(ltr) { &, &:hover, &:active, &:checked, &:disabled { border-top-left-radius: 0; border-bottom-left-radius: 0; } } &:dir(rtl) { &, &:hover, &:active, &:checked, &:disabled { border-top-right-radius: 0; border-bottom-right-radius: 0; } } } } // Headerbar Switches switch { &:backdrop { opacity: 0.75; } } progressbar { trough { background-color: if($variant=='light' and $darker=='false', opacify($header_button_border, 0.05), $header_button_border); } &:backdrop { opacity: 0.75; } } // Headerbar Scale scale { $_trough_bg: if($variant=='light' and $darker=='false', opacify($header_button_border, 0.05), $header_button_border); &:backdrop { opacity: 0.75; } slider { $_slider_border: if($variant=='light' and $darker=='false', opacify($header_button_border, 0.2), opacify($header_button_border, 0.3)); $_slider_bg: if($variant=='light' and $darker=='false', opacify($header_button_bg,1), lighten(opacify($header_bg,1), 10%)); background-color: $_slider_bg; border-color: $_slider_border; &:hover { background-color: lighten($_slider_bg, 5%); border-color: $_slider_border; } &:active { background-color: $selected_bg_color; border-color: $selected_bg_color; } &:disabled { background-color: mix($_slider_bg, $header_bg, 70%); border-color: $_slider_border; } } trough { background-color: $_trough_bg; &:disabled { background-color: if($variant=='light' and $darker=='false', transparentize($_trough_bg, 0.05), transparentize($_trough_bg, 0.1)); } } } } // // Pathbars // .path-bar button { &.text-button, &.image-button, & { padding-left: 6px; padding-right: 6px; } &.text-button.image-button label { padding-left: 0; padding-right: 0; } &.text-button.image-button, & { label:last-child { padding-right: 10px; } label:first-child { padding-left: 10px; } } &.slider-button, &:not(.image-button):not(.text-button) { padding-left: 1px; padding-right: 1px; } image { padding-left: 4px; padding-right: 4px; } } // // Tree Views // treeview.view { @at-root * { -GtkTreeView-horizontal-separator: 4; -GtkTreeView-grid-line-width: 1; -GtkTreeView-grid-line-pattern: ''; -GtkTreeView-tree-line-width: 1; -GtkTreeView-tree-line-pattern: ''; -GtkTreeView-expander-size: 16; } border-left-color: transparentize($fg_color, 0.85); // this is actually the tree lines color, border-top-color: transparentize(black, 0.9); // while this is the grid lines color, better then nothing rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props acceleditor > label { background-color: $selected_bg_color; } &:selected { &, &:focus { border-radius: 0; border-left-color: mix($selected_fg_color, $selected_bg_color, 50%); border-top-color: transparentize($fg_color, 0.9); // doesn't work unfortunately @extend %selected_items; } } &:disabled { color: $insensitive_fg_color; &:selected { color: mix($selected_fg_color, $selected_bg_color, 40%); } } &.separator { min-height: 2px; color: transparentize(black, 0.9); } &:drop(active) { border-style: solid none; border-width: 1px; border-color: mix($fg_color, $selected_bg_color, 50%); &.after { border-top-style: none; } &.before { border-bottom-style: none; } } &.expander { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } color: mix($fg_color, $base_color, 50%); &:hover { color: $fg_color; } &:selected { color: mix($selected_fg_color, $selected_bg_color, 70%); &:hover { color: $selected_fg_color; } } &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } } &.progressbar, &.progressbar:focus { // progress bar in treeviews color: $selected_fg_color; border-radius: 3px; background-color: $selected_bg_color; &:selected, &:selected:focus { color: $selected_bg_color; box-shadow: none; background-color: $selected_fg_color; } } &.trough { // progress bar trough in treeviews color: $fg_color; background-color: $button_border; border-radius: 3px; border-width: 0; &:selected, &:selected:focus { color: $selected_fg_color; background-color: transparentize(black, 0.8); border-radius: 3px; border-width: 0; } } header { button { $_column_header_color: mix($fg_color,$base_color,80%); min-height: 0; min-width: 0; padding: 3px 6px; font-weight: bold; color: $_column_header_color; background-color: $base_color; background-image: none; border-style: none solid none none; border-radius: 0; border-image: linear-gradient(to bottom, $base_color 20%, transparentize(if($variant == 'light', black, white), 0.89) 20%, transparentize(if($variant == 'light', black, white), 0.89) 80%, $base_color 80%) 0 1 0 0 / 0 1px 0 0 stretch; &:hover { color: $selected_bg_color; } &:active { color: $fg_color; } &:active, &:hover { background-color: $base_color; } &:active:hover { color: $fg_color; } &:disabled { border-color: $bg_color; background-image: none; } &:last-child { border-right-style: none; border-image: none; } } } button.dnd, header.button.dnd { &, &:selected, &:hover, &:active { padding: 0 6px; transition: none; color: $selected_fg_color; background-color: $selected_bg_color; border-radius: 0; border-style: none; } } } // // Menus // menubar, .menubar { -GtkWidget-window-dragging: true; padding: 0px; background-color: opacify($header_bg, 1); color: $header_fg; &:backdrop { color: transparentize($header_fg, 0.3); //background-color: opacify($header_bg_backdrop, 1); } > menuitem { padding: 4px 8px; border: solid transparent; border-width: 0; &:hover { //Seems like it :hover even with keyboard focus background-color: $selected_bg_color; color: $selected_fg_color; } &:disabled { color: transparentize($header_fg, 0.6); border-color: transparent; } } } menu, .menu { $_menu_bg: if($variant=='light', $base_color, $bg_color); margin: 4px; padding: 0; border-radius: 0; background-color: $_menu_bg; border: 1px solid $borders_color; .csd & { padding: 4px 0px; border-radius: 2px; border: none; } separator, .csd & separator { margin: 2px 0; background-color: $horizontal_separators_color; } menuitem { min-height: 16px; min-width: 40px; padding: 5px; &:hover { color: $selected_fg_color; background-color: $selected_bg_color; } &:disabled { color: $insensitive_fg_color; } //submenu indicators arrow { min-height: 16px; min-width: 16px; &:dir(ltr) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); margin-left: 10px; } &:dir(rtl) { -gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl'); margin-right: 10px; } } @at-root menuitem { accelerator { color: gtkalpha(currentColor,0.55); } check, radio { min-height: 16px; min-width: 16px; &:dir(ltr) { margin-right: 6px; margin-left: 2px; } &:dir(rtl) { margin-left: 6px; margin-right: 2px; } } } } // overflow buttons > arrow { @include button(undecorated); min-width: 16px; min-height: 16px; padding: 4px; background-color: $_menu_bg; border-radius: 0; &.top { margin-top: -6px; border-bottom: 1px solid mix($fg_color, $base_color, 10%); -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); } &.bottom { margin-bottom: -6px; border-top: 1px solid mix($fg_color, $base_color, 10%); -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } &:hover { background-color: mix($fg_color, $base_color, 10%); } &:disabled { color: transparent; background-color: transparent; border-color: transparent ; } } } // // Popovers // popover, popover.background { $_popover_bg: if($variant=='light', $base_color, $bg_color); padding: 2px; border-radius: 3px; background-clip: border-box; background-color: $_popover_bg; box-shadow: 0 2px 6px 1px if($variant=='light', transparentize(black, 0.93), transparentize(black, 0.65)); .csd &, & { border: 1px solid darken($borders_color, 5%); } & separator { background-color: $_popover_bg; } label.separator { @extend label.separator; } // Noice > list, > .view, > toolbar { border-style: none; background-color: transparent; } &, .csd & { &.osd, &.magnifier { @extend %osd; } &.touch-selection { @extend .context-menu } &.osd { @extend %osd; } } } //touch selection handlebars for the Popover.osd above cursor-handle { background-color: transparent; background-image: none; box-shadow: none; border-style: none; &.top { -gtk-icon-source: -gtk-icontheme('selection-start-symbolic'); } &.bottom { -gtk-icon-source: -gtk-icontheme('selection-end-symbolic'); } } // // Notebooks and Tabs // notebook { padding: 0; &.frame { border: 1px solid $borders_color; > header { // ugly hack to hide the borders around the header margin: -1px; &.top { margin-bottom: 0; } &.bottom { margin-top: 0; } &.left { margin-right: 0; } &.right { margin-left: 0; } &.top, &.bottom { padding-left: 0; padding-right: 0; } &.left, &.right { padding-top: 0; padding-bottom: 0; } } } > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks background-color: $base_color; } > header { padding: 2px; background-color: $bg_color; &.top { box-shadow: inset 0 -1px $borders_color; } &.bottom { box-shadow: inset 0 1px $borders_color; } &.right { box-shadow: inset 1px 0 $borders_color; } &.left { box-shadow: inset -1px 0 $borders_color; } @each $_pos, $_bpos in (top, bottom), (bottom, top), (right, left), (left, right) { // sizing and borders &.#{$_pos} { padding-#{$_bpos}: 0; > tabs > tab { padding: 2px 10px; min-width: 20px; min-height: 20px; outline-offset: -4px; border: 1px solid transparent; border-#{$_bpos}: none; // tab overlap + tab { @if $_pos==top or $_pos==bottom { margin-left: -1px; } @else { margin-top: -1px; } } // tab border radius @if $_pos==top { border-radius: 1px 1px 0 0; } @else if $_pos==bottom { border-radius: 0 0 1px 1px; } @else if $_pos==left { border-radius: 1px 0 0 1px; } @else if $_pos==right { border-radius: 0 1px 1px 0; } } } } // overflow arrows &.top, &.bottom { > tabs > arrow.up { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); &:last-child { margin-left: 2px; } } > tabs > arrow.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); &:first-child { margin-right: 2px; } } } &.left, &.right { > tabs > arrow.up { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); &:last-child { margin-top: 2px; } } > tabs > arrow.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); &:first-child { margin-bottom: 2px; } } } > tabs > arrow { color: $insensitive_fg_color; &:hover { color: mix($fg_color, $insensitive_fg_color, 50%); } &:active { color: $fg_color; } &:disabled { color: transparentize($insensitive_fg_color,0.3); } } // tab colors &.top > tabs > tab:hover:not(:checked) { box-shadow: inset 0 -1px $borders_color; } &.bottom > tabs > tab:hover:not(:checked) { box-shadow: inset 0 1px $borders_color; } &.left > tabs > tab:hover:not(:checked) { box-shadow: inset -1px 0 $borders_color; } &.right > tabs > tab:hover:not(:checked) { box-shadow: inset 1px 0 $borders_color; } > tabs > tab { color: $insensitive_fg_color; background-color: transparentize($base_color, 1); &:hover:not(:checked) { color: mix($fg_color, $insensitive_fg_color, 50%); background-color: transparentize($base_color, 0.5); border-color: $borders_color; } &:checked { color: $fg_color; background-color: $base_color; border-color: $borders_color; } // close button button.flat { min-height: 22px; min-width: 16px; padding: 0; color: mix($bg_color, $fg_color, 35%); &:hover { @extend %undecorated_button; color: lighten(red, 15%); } &:active, &:active:hover { @extend %undecorated_button; color: $selected_bg_color; } } } } } // // Scrollbars // $_scrollbar_bg_color: darken($base_color, 1%); scrollbar { $_slider_min_length: 40px; // disable steppers @at-root * { -GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-forward-stepper: false; } background-color: $_scrollbar_bg_color; transition: 300ms $ease-out-quad; // scrollbar border &.top { border-bottom: 1px solid $borders_color; } &.bottom { border-top: 1px solid $borders_color; } &.left { border-right: 1px solid $borders_color; } &.right { border-left: 1px solid $borders_color; } button { border: none; } &.vertical button { &.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } &.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); } } &.horizontal button { &.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); } &.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); } } // slider slider { min-width: 6px; min-height: 6px; margin: -1px; border: 4px solid transparent; border-radius: 8px; background-clip: padding-box; background-color: mix($fg_color, $bg_color, 40%); &:hover { background-color: mix($fg_color, $bg_color, 30%); } &:hover:active { background-color: $selected_bg_color;} &:disabled { background-color: transparent; } } &.fine-tune { slider { min-width: 4px; min-height: 4px; } &.horizontal slider { border-width: 5px 4px; } &.vertical slider { border-width: 4px 5px; } } &.overlay-indicator { &:not(.dragging):not(.hovering) { opacity: 0.4; border-color: transparent; background-color: transparent; slider { margin: 0; min-width: 4px; min-height: 4px; background-color: mix($fg_color, $bg_color, 70%); border: 1px solid if($variant == 'light', transparentize(white, 0.4), transparentize(black, 0.7)); } &.horizontal slider { margin: 0 2px; min-width: $_slider_min_length; } &.vertical slider { margin: 2px 0; min-height: $_slider_min_length; } } &.dragging, &.hovering { opacity: 0.99; } } &.horizontal slider { min-width: $_slider_min_length; } &.vertical slider { min-height: $_slider_min_length; } } // // Switches // switch { font-size: 1px; min-width: 52px; min-height: 24px; background-size: 52px 24px; background-repeat: no-repeat; background-position: center center; slider { min-width: 1px; min-height: 1px; } &, slider { outline-color: transparent; color: transparent; border: none; box-shadow: none; } } @each $k,$l in ('',''), (':checked','-active'), (':disabled','-insensitive'), (':checked:disabled','-active-insensitive') { // load switch troughs from .png files in assets directory switch#{$k} { background-image: -gtk-scaled(url("assets/switch#{$l}#{$asset_suffix}.png"),url("assets/switch#{$l}#{$asset_suffix}@2.png")); } menuitem:hover switch#{$k}, row:selected switch#{$k}, infobar switch#{$k} { background-image: -gtk-scaled(url("assets/switch#{$l}-selected.png"),url("assets/switch#{$l}-selected@2.png")); } headerbar switch#{$k}, .primary-toolbar switch#{$k} { background-image: -gtk-scaled(url("assets/switch#{$l}-header#{$darker_asset_suffix}.png"),url("assets/switch#{$l}-header#{$darker_asset_suffix}@2.png")); } } // // Check and Radio items // @each $w,$a in ('check', 'checkbox'), ('radio','radio') { //standard checks and radios @each $s,$as in ('','-unchecked'), (':disabled','-unchecked-insensitive'), (':indeterminate', '-mixed'), (':indeterminate:disabled', '-mixed-insensitive'), (':checked', '-checked'), (':checked:disabled','-checked-insensitive') { .#{$w}#{$s}, #{$w}#{$s}, treeview.#{$w}#{$s} { -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}#{$asset_suffix}.png"), url("assets/#{$a}#{$as}#{$asset_suffix}@2.png")); } .osd, %osd_check_radio { #{$w}#{$s} { -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}-dark.png"), url("assets/#{$a}#{$as}-dark@2.png")); } } // the borders of checks and radios are // too similar in luminosity to the selected background color, hence // we need special casing. menuitem #{$w}#{$s}:hover, .view #{$w}#{$s}:selected, treeview.#{$w}#{$s}:selected, row:selected #{$w}#{$s}, infobar #{$w}#{$s} { -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}-selected.png"), url("assets/#{$a}#{$as}-selected@2.png")); } } } // Selectionmode @each $s,$as in ('','-selectionmode'), (':checked', '-checked-selectionmode') { .view.content-view.check#{$s}:not(list) { -gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"), url("assets/checkbox#{$as}#{$asset_suffix}@2.png")); background-color: transparent; } } checkbutton, radiobutton { // this is for a nice focus on check and radios text &.text-button { padding: 2px 0; outline-offset: 0; } label:not(:only-child) { &:first-child { margin-left: 4px; } &:last-child { margin-right: 4px; } } } check, radio { min-width: 16px; min-height: 16px; margin: 0 2px; &:only-child, menu menuitem & { margin: 0; } } // // GtkScale // scale { $_marks_length: 3px; $_marks_distance: 1px; min-height: 15px; min-width: 15px; padding: 3px; &.horizontal { trough { padding: 0 4px; } highlight, fill { margin: 0 -4px; } } &.vertical { trough { padding: 4px 0; } highlight, fill { margin: -4px 0; } } // The slider is inside the trough, negative margin to make it bigger slider { min-height: 15px; min-width: 15px; margin: -6px; } // Click-and-hold the slider to activate &.fine-tune { // Make the trough grow in fine-tune mode slider { margin: -4px; } fill, highlight, trough { border-radius: 5px; -gtk-outline-radius: 7px; } } // Trough trough { $_scale_trough_bg: if($variant == 'light', $button_border, darken($bg_color, 5%)); outline-offset: 2px; -gtk-outline-radius: 4.5px; border-radius: 2.5px; background-color: $_scale_trough_bg; &:disabled { background-color: transparentize($_scale_trough_bg, 0.45); } //OSD troughs .osd & { background-color: lighten($osd_bg_color, 7%); highlight { background-color: $selected_bg_color; &:disabled { } } &:disabled { } } // Troughs in selected list-rows and infobars menuitem:hover &, row:selected &, infobar & { background-color: transparentize(black, 0.8); highlight { background-color: $selected_fg_color; &:disabled { background-color: mix($selected_fg_color, $selected_bg_color, 55%); } } &:disabled { background-color: transparentize(black, 0.9); } } } // The colored part of trough highlight { border-radius: 2.5px; background-color: $selected_bg_color; &:disabled { background-color: transparentize($selected_bg_color, 0.45); } } // this is another differently styled part of the trough, the most relevant use case is for example // in media player to indicate how much video stream as been cached fill { border-radius: 2.5px; background-color: transparentize($selected_bg_color, 0.5); &:disabled { background-color: transparent; } } slider { $_slider_border: if($variant=='light', transparentize(darken($button_border,25%), 0.5), darken($button_border,2%)); background-color: $button_bg; border: 1px solid $_slider_border; border-radius: 100%; transition: $button_transition; transition-property: background, border; &:hover { background-color: lighten($button_bg, 5%); } &:active { background-clip: border-box; background-color: $selected_bg_color; border-color: $selected_bg_color; } &:disabled { background-color: mix($entry_bg, $bg_color, 55%); border-color: transparentize($_slider_border, 0.2); } // Selected list-row and infobar sliders menuitem:hover &, row:selected &, infobar & { background-clip: border-box; background-color: $selected_fg_color; border-color: $selected_fg_color; &:hover { background-color: mix($selected_fg_color, $selected_bg_color, 85%); border-color: mix($selected_fg_color, $selected_bg_color, 85%); } &:active { background-color: mix($selected_fg_color, $selected_bg_color, 50%); border-color: mix($selected_fg_color, $selected_bg_color, 50%); } &:disabled{ background-color: mix($selected_fg_color, $selected_bg_color, 55%); border-color: mix($selected_fg_color, $selected_bg_color, 55%); } } // OSD sliders .osd & { background-clip: border-box; background-color: $selected_bg_color; border-color: $selected_bg_color; &:hover { background-color: lighten($selected_bg_color, 10%); border-color: lighten($selected_bg_color, 10%) } &:active { background-color: darken($selected_bg_color, 10%); border-color: darken($selected_bg_color, 10%); } &:disabled { } } } value { color: gtkalpha(currentColor, 0.4); } marks { color: gtkalpha(currentColor, 0.4); @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom), (bottom, bottom, top), (top, left, right), (bottom, right, left) { &.#{$marks_class} { margin-#{$marks_margin}: $_marks_distance; margin-#{$marks_pos}: -($_marks_distance + $_marks_length); } } } &.fine-tune marks { @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom), (bottom, bottom, top), (top, left, right), (bottom, right, left) { &.#{$marks_class} { margin-#{$marks_margin}: ($_marks_distance - 1px); margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 2px); } } } &.horizontal { indicator { min-height: $_marks_length; min-width: 1px; } &.fine-tune indicator { min-height: ($_marks_length - 1px); } } &.vertical { indicator { min-height: 1px; min-width: $_marks_length; } &.fine-tune indicator { min-width: ($_marks_length - 1px); } } } // // Progress bars // progressbar { padding: 0; font-size: smaller; color: transparentize($fg_color, 0.3); &.osd { min-width: 3px; min-height: 3px; background-color: transparent; trough { border-style: none; background-color: transparent; box-shadow: none; } } // Moving bit progress { background-color: $selected_bg_color; border: none; border-radius: 3px; box-shadow: none; //needed for clipping row:selected &, infobar & { background-color: $selected_fg_color; } } // Trough trough { border: none; border-radius: 3px; background-color: if($variant == 'light', $button_border, darken($bg_color, 5%)); row:selected &, infobar & { background-color: transparentize(black, 0.8); } } } // // Level Bar // levelbar { block { min-width: 1px; min-height: 1px; } &.vertical block { min-width: 1px; min-height: 1px; } trough { border: none; padding: 3px; border-radius: 3px; background-color: if($variant == 'light', $button_border, darken($bg_color, 5%)); } &.horizontal.discrete block { margin: 0 1px; } &.vertical.discrete block { margin: 1px 0; } block:not(.empty) { border: 1px solid $selected_bg_color; background-color: $selected_bg_color; border-radius: 2px; } block.low { border-color: $warning_color; background-color: $warning_color; } block.high { border-color: $selected_bg_color; background-color: $selected_bg_color; } block.full { border-color: $success_color; background-color: $success_color; } block.empty { background-color: if($variant=='light', transparentize($fg_color,0.8), $base_color); border-color: if($variant=='light', transparentize($fg_color,0.8), $base_color); } } // // Print dialog // printdialog { paper { border: 1px solid $borders_color; background: $base_color; padding: 0; } .dialog-action-box { margin: 12px; } } // // Frames // frame > border, .frame { margin: 0; padding: 0; border-radius: 0; border: 1px solid $borders_color; } frame.flat > border, frame > border.flat, .frame.flat { border-style: none; } scrolledwindow { viewport.frame { // avoid double borders when viewport inside scrolled window border-style: none; } // This is used by GtkScrolledWindow, when content is touch-dragged past boundaries. // This draws a box on top of the content, the size changes programmatically. overshoot { &.top { @include overshoot(top); } &.bottom { @include overshoot(bottom); } &.left { @include overshoot(left); } &.right { @include overshoot(right); } } // Overflow indication, works similarly to the overshoot, the size if fixed tho. undershoot { &.top { @include undershoot(top); } &.bottom { @include undershoot(bottom); } &.left { @include undershoot(left); } &.right { @include undershoot(right); } } junction { // the small square between two scrollbars border-color: transparent; // the border image is used to add the missing dot between the borders, details, details, details... border-image: linear-gradient(to bottom, $borders_color 1px, transparent 1px) 0 0 0 1 / 0 1px stretch; background-color: $_scrollbar_bg_color; &:dir(rtl) { border-image-slice: 0 1 0 0; } } } //vbox and hbox separators separator { background-color: transparentize(black, 0.9); min-width: 1px; min-height: 1px; } // // Lists // list { background-color: $base_color; border-color: $borders_color; row { padding: 2px; } } row { &:not(:hover) { transition: all 150ms $ease-out-quad; } &:selected { @extend %selected_items; button { @extend %selected-button; } } &.activatable { &.has-open-popup, &:hover { background-color: if($variant == 'light', transparentize(black, 0.95), transparentize(white, 0.97)); } &:active { color: $fg_color; } &:disabled { color: $insensitive_fg_color; image { color: inherit; } } &:selected { &:active { color: $selected_fg_color; } &.has-open-popup, &:hover { background-color: mix(black, $selected_bg_color, 10%); } } } } // // App Notifications // .app-notification { padding: 10px; color: $dark_sidebar_fg; background-color: $dark_sidebar_bg; background-clip: border-box; border-radius: 0 0 2px 2px; border-width: 0 1px 1px 1px; border-style: solid; border-color: darken($dark_sidebar_bg, 10%); border { border: none; } button { @include button(osd); &.flat { @extend %undecorated_button; border-color: transparentize($selected_bg_color, 1); &:disabled { @extend %undecorated_button; } } &:hover { @include button(osd-hover); } &:active, &:checked { @include button(osd-active); background-clip: padding-box; } &:disabled { @include button(osd-insensitive); } } } // // Expanders // expander { arrow { min-width: 16px; min-height: 16px; -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } &:hover { color: lighten($fg_color,30%); } //only lightens the arrow &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } } } // // Calendar // calendar { color: $fg_color; border: 1px solid $borders_color; border-radius: 3px; padding: 2px; &:selected { @extend %selected_items; border-radius: 1.5px; } &.header { color: $fg_color; border: none; } &.button { @extend %undecorated_button; color: transparentize($fg_color,0.55); &:hover { color: $fg_color; } &:disabled { color: $insensitive_fg_color; } } &:indeterminate { color: gtkalpha(currentColor,0.55); } &.highlight { color: $fg_color; } } // // Dialogs // messagedialog { // Message Dialog styling .titlebar { min-height: 20px; background-color: $header_bg; border-bottom: 1px solid darken($header_bg, 7%); } .dialog-action-area button { padding: 8px; min-height: 0; } &.csd { // rounded bottom border styling for csd version &.background { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border: none; } .dialog-action-area button { border-bottom-style: none; @extend %middle_button; &:first-child{ @extend %first_button; } &:last-child { @extend %last_button; } &:only-child { @extend %single_button; } } %middle_button { border-radius: 0; border-right-style: none; } %last_button { border-radius: 0 0 3px 0; border-right-style: none; } %first_button { border-radius: 0 0 0 3px; border-left-style: none; } %single_button { border-radius: 0 0 3px 3px; border-left-style: none; border-right-style: none; } } } // // Filechooser // filechooser { #pathbarbox { border-bottom: 1px solid transparentize($borders_color, 0.5); } } filechooserbutton:drop(active) { box-shadow: none; border-color: transparent; } // // Sidebar // .sidebar { border-style: none; background-color: lighten($bg_color, 2%); @at-root %sidebar_left, &:dir(ltr), &.left, &.left:dir(rtl) { border-right: 1px solid $borders_color; border-left-style: none; } @at-root %sidebar_right, &:dir(rtl), &.right { border-left: 1px solid $borders_color; border-right-style: none; } list { background-color: transparent; } paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }} } stacksidebar { &.sidebar { &:dir(ltr) list, &.left list, &.left:dir(rtl) list { @extend %sidebar_left; } &:dir(rtl) list, &.right list { @extend %sidebar_right; } } row { padding: 10px 4px; > label { padding-left: 6px; padding-right: 6px; } &.needs-attention > label { @extend %needs_attention; background-size: 6px 6px, 0 0; } } } placessidebar { > viewport.frame { border-style: none; } row { // Needs overriding of the GtkListBoxRow padding min-height: 30px; padding: 0px; // Using margins/padding directly in the SidebarRow // will make the animation of the new bookmark row jump > revealer { padding: 0 10px; } image.sidebar-icon { &:dir(ltr) { padding-right: 8px; } &:dir(rtl) { padding-left: 8px; } } label.sidebar-label { &:dir(ltr) { padding-right: 2px; } &:dir(rtl) { padding-left: 2px; } } @at-root button.sidebar-button { min-width: 22px; min-height: 22px; margin-top: 2px; margin-bottom: 2px; padding: 0; @extend button.flat; border-radius: 100%; -gtk-outline-radius: 100%; &:not(:hover):not(:active) > image { opacity: 0.5 }; } &.sidebar-placeholder-row { padding: 0 8px; min-height: 2px; background-image: _solid($drop_target_color); background-clip: content-box; } &.sidebar-new-bookmark-row { color: $selected_bg_color; } &:drop(active):not(:disabled) { &, label, image { color: $drop_target_color; } box-shadow: inset 0 1px $drop_target_color, inset 0 -1px $drop_target_color; &:selected { &, label, image { color: $selected_fg_color; } background-color: $drop_target_color; } } } } // // Placesview // placesview { .server-list-button > image { -gtk-icon-transform: rotate(0turn); } .server-list-button:checked > image { transition: 200ms $ease-out-quad; -gtk-icon-transform: rotate(-0.5turn); } // this selects the "connect to server" label > actionbar > revealer > box > label { padding-left: 8px; padding-right: 8px; } } // // Paned // paned { > separator { min-width: 1px; min-height: 1px; -gtk-icon-source: none; border-style: none; background-color: transparent; background-image: _solid($borders_color); background-size: 1px 1px; &:selected { background-image: _solid($selected_bg_color); } &.wide { min-width: 5px; min-height: 5px; background-color: $bg_color; background-image: _solid($borders_color), _solid($borders_color); background-size: 1px 1px, 1px 1px; } } &.horizontal > separator { background-repeat: repeat-y; &:dir(ltr) { margin: 0 -8px 0 0; padding: 0 8px 0 0; background-position: left; } &:dir(rtl) { margin: 0 0 0 -8px; padding: 0 0 0 8px; background-position: right; } &.wide { margin: 0; padding: 0; background-repeat: repeat-y, repeat-y; background-position: left, right; } } &.vertical > separator { margin: 0 0 -8px 0; padding: 0 0 8px 0; background-repeat: repeat-x; background-position: top; &.wide { margin: 0; padding: 0; background-repeat: repeat-x, repeat-x; background-position: bottom, top; } } } // // GtkInfoBar // infobar { border-style: none; &.info { background-color: $selected_bg_color; } &.question { background-color: $suggested_color; } &.warning { background-color: $warning_color; } &.error { background-color: $error_color; } &.info, &.question, &.warning, &.error { color: $selected_fg_color; caret-color: currentColor; button { @extend %selected-button } selection { color: $selected_bg_color; background-color: $selected_fg_color; } *:link { @extend %link_selected; } } } // // Buttons on selected backgrounds // %selected-button { @at-root %normal_selected_button, & { color: $selected_fg_color; background-color: transparentize($selected_fg_color, 1); border-color: transparentize($selected_fg_color, 0.5); } &.flat { @include button(undecorated); color: $selected_fg_color; background-color: transparentize($selected_fg_color, 1); &:disabled { &, label { color: transparentize($selected_fg_color, 0.6); } } } &:hover { color: $selected_fg_color; background-color: transparentize($selected_fg_color, 0.8); border-color: transparentize($selected_fg_color, 0.2); } &:active, &:active:hover, &:checked { color: $selected_bg_color; background-color: $selected_fg_color; border-color: $selected_fg_color; } &:disabled { &, label { color: transparentize($selected_fg_color, 0.5); } background-color: transparentize($selected_fg_color, 1); border-color: transparentize($selected_fg_color, 0.6); &:active, &:checked { color: $selected_bg_color; background-color: transparentize($selected_fg_color, 0.5); border-color: transparentize($selected_fg_color, 0.6); } } } // // Tooltips // tooltip { &.background { // background-color needs to be set this way otherwise it gets drawn twice // see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details. background-color: lighten($osd_bg_color, 10%); background-clip: padding-box; label { padding: 4px; } } border-radius: 2px; box-shadow: none; decoration { background-color: transparent; } * { //Yeah this is ugly background-color: transparent; color: $osd_fg_color; // just to be sure } } // // Color Chooser // colorswatch { // This widget is made of two boxes one on top of the other, the lower box is GtkColorSwatch {} the other one // is GtkColorSwatch .overlay {}, GtkColorSwatch has the programmatically set background, so most of the style // is applied to the overlay box. $_colorswatch-radius: 2px; &, &:drop(active) { border-style: none; } // border rounding &.top { border-top-left-radius: $_colorswatch-radius + 0.5px; border-top-right-radius: $_colorswatch-radius + 0.5; overlay { border-top-left-radius: $_colorswatch-radius; border-top-right-radius: $_colorswatch-radius; } } &.bottom { border-bottom-left-radius: $_colorswatch-radius + 0.5px; border-bottom-right-radius: $_colorswatch-radius + 0.5; overlay { border-bottom-left-radius: $_colorswatch-radius; border-bottom-right-radius: $_colorswatch-radius; } } &.left, &:first-child:not(.top) { border-top-left-radius: $_colorswatch_radius + 0.5px; border-bottom-left-radius: $_colorswatch_radius + 0.5px; overlay { border-top-left-radius: $_colorswatch_radius; border-bottom-left-radius: $_colorswatch_radius; } } &.right, &:last-child:not(.bottom) { border-top-right-radius: $_colorswatch_radius + 0.5px; border-bottom-right-radius: $_colorswatch_radius + 0.5px; overlay { border-top-right-radius: $_colorswatch_radius; border-bottom-right-radius: $_colorswatch_radius; } } &.dark overlay { color: transparentize(white, 0.3); &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color); } } &.light overlay { color: transparentize(black, 0.3); &:hover { border-color: if($variant == 'light', transparentize(black, 0.7), $borders_color); } } overlay { border: 1px solid if($variant == 'light', transparentize(black, 0.85), $borders_color); &:hover { background-color: transparentize(white, 0.8) } } &:disabled { opacity: 0.5; overlay { border-color: transparentize(black, 0.4); box-shadow: none; } } &#add-color-button { border-style: solid; // the borders are drawn by the overlay for standard colorswatches to have them semi border-width: 1px; // translucent on the colored background, here it's not necessary so they need to be set @include button(normal); &:hover { @include button(hover); } overlay { @include button(undecorated); } // reset the overlay to not cover the button style underneath } } button.color { padding: 0; colorswatch:first-child:last-child { &, overlay { margin: 4px; border-radius: 0; } } } // colorscale popup colorchooser .popover.osd { border-radius: 3px; } // // Misc // //content view (grid/list) .content-view { background-color: $base_color; &:hover { -gtk-icon-effect: highlight; } rubberband { @extend rubberband; } } .scale-popup { .osd & { @extend %osd; } button { // +/- buttons on GtkVolumeButton popup &:hover { @include button(hover); } } } // Decouple the font of context menus from their entry/textview .context-menu { font: initial; } .monospace { font-family: Monospace; } // // Shortcuts Help // button.circular, button.circular-button { padding: 0; min-width: 16px; min-height: 24px; padding: 2px 6px; border-radius: 50%; -gtk-outline-radius: 50%; label { padding: 0; } } .keycap { min-width: 16px; min-height: 20px; padding: 3px 6px 4px 6px; color: $fg_color; background-color: $base_color; border: 1px solid $borders_color; border-radius: 2.5px; box-shadow: inset 0px -2px 0px if($variant=='light', transparentize(black, 0.95), transparentize(black, 0.85)); } stackswitcher button { &.text-button { min-width: 80px; } &.circular { min-width: 0; } } // // Dnd // *:drop(active):focus, *:drop(active) { box-shadow: inset 0 0 0 1px $drop_target_color; } // // Window Decorations // decoration { border-radius: if($darker=='false' and $variant=='light', 4px 4px 0 0, 3px 3px 0 0); border-width: 0px; $_wm_border: if($variant=='light', transparentize(black, 0.9), transparentize(black, 0.45)); box-shadow: 0 0 0 1px if($darker=='true' or $variant == 'dark', darken($header_bg, 7%), $_wm_border), 0 8px 8px 0 if($variant == 'light', opacify($_wm_border, 0.1), transparentize($_wm_border, 0.2)); // this is used for the resize cursor area margin: 10px; &:backdrop { // the transparent shadow here is to enforce that the shadow extents don't // change when we go to backdrop, to prevent jumping windows box-shadow: 0 0 0 1px if($darker=='true' or $variant == 'dark', transparentize(darken($header_bg, 7%), 0.1), $_wm_border), 0 8px 8px 0 transparent, 0 5px 5px 0 if($variant == 'light', opacify($_wm_border, 0.1), transparentize($_wm_border, 0.2)); transition: $backdrop_transition; } .fullscreen &, .tiled & { border-radius: 0; } .popup & { box-shadow: none; border-radius: 0; } // server-side decorations as used by mutter .ssd & { border-radius: if($darker=='false' and $variant=='light', 4px 4px 0 0, 3px 3px 0 0); box-shadow: 0 0 0 1px if($darker=='true' or $variant == 'dark', transparentize(black, 0.35), $_wm_border); &.maximized { border-radius: 0; } } .csd.popup & { border-radius: 2px; box-shadow: 0 3px 6px if($variant == 'light', $_wm_border, transparentize($_wm_border, 0.1)), 0 0 0 1px if($variant == 'light', $_wm_border, darken($bg_color, 10%)); } tooltip.csd & { border-radius: 2px; box-shadow: 0 1px 3px 1px if($variant == 'light', $_wm_border, transparentize($_wm_border, 0.3)); } messagedialog.csd & { border-radius: 3px; } .solid-csd & { border-radius: 0; margin: 1px; background-color: $header_bg; box-shadow: none; } } // // Titlebuttons // headerbar, .titlebar { &.default-decoration button.titlebutton { // no vertical padding for ssd buttons padding: 0 4px; // already handled by the titlebar-padding min-width: 0; min-height: 0; margin: 0; } button.titlebutton { padding: 0; min-width: 24px; @include button(undecorated); background-color: transparentize($header_bg, 1); &:hover { @include button(header-hover); } &:active, &:checked { @include button(header-active); } &.close, &.maximize, &.minimize { color: transparent; background-color: transparent; background-position: center; background-repeat: no-repeat; border-width: 0; &:backdrop { opacity: 1; } } // Load png assets for each button @each $k in ('close','maximize', 'minimize') { @each $l, $m in ('',''), (':backdrop','-backdrop'), (':hover','-hover'), (':active','-active') { &.#{$k}#{$l} { background-image: -gtk-scaled(url('assets/titlebutton-#{$k}#{$m}#{$darker_asset_suffix}.png'), url('assets/titlebutton-#{$k}#{$m}#{$darker_asset_suffix}@2.png')); } } } } .maximized & { button.titlebutton { padding: 0; min-width: 24px; @include button(undecorated); background-color: transparentize($header_bg, 1); &:hover { @include button(header-hover); } &:active, &:checked { @include button(header-active); } &.close, &.maximize, &.minimize { color: transparent; background-color: transparent; background-position: center; background-repeat: no-repeat; border-width: 0; &:backdrop { opacity: 1; } } // Load png assets for each button @each $k in ('close', 'minimize') { @each $l, $m in ('',''), (':backdrop','-backdrop'), (':hover','-hover'), (':active','-active') { &.#{$k}#{$l} { background-image: -gtk-scaled(url('assets/titlebutton-#{$k}#{$m}#{$darker_asset_suffix}.png'), url('assets/titlebutton-#{$k}#{$m}#{$darker_asset_suffix}@2.png')); } &.maximize#{$l} { background-image: -gtk-scaled(url('assets/titlebutton-unmaximize#{$m}#{$darker_asset_suffix}.png'), url('assets/titlebutton-unmaximize#{$m}#{$darker_asset_suffix}@2.png')); } } } } } } // catch all extend %selected_items { background-color: $selected_bg_color; @at-root %nobg_selected_items, & { color: $selected_fg_color; &:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); } } } ================================================ FILE: common/gtk-3.0/3.20/sass/_drawing.scss ================================================ // Drawing mixins // Solid color image @function _solid($c) { @return linear-gradient(to bottom, $c, $c); } // Entries @mixin entry($t) { // // Entries drawing function // // $t: entry type // @if $t==normal { // // normal entry // color: $text_color; border-color: $entry_border; background-color: $entry_bg; } @if $t==focus { // // focused entry // color: $text_color; border-color: if($variant=='light', $selected_bg_color, $button_border); background-color: $entry_bg; @if $variant == 'dark' { box-shadow: inset 1px 0 $selected_bg_color, inset -1px 0 $selected_bg_color, inset 0 1px $selected_bg_color, inset 0 -1px $selected_bg_color; } } @if $t==insensitive { // // insensitive entry // color: $insensitive_fg_color; border-color: transparentize($entry_border, 0.45); background-color: transparentize($entry_bg, 0.45); } @if $t==header-normal { // // normal header-bar entry // color: $header_fg; border-color: $header_entry_border; background-color: $header_entry_bg; image, image:hover { color: inherit; } } @if $t==header-focus { // // focused header-bar entry // color: $selected_fg_color; border-color: if($darker=='false' and $variant=='light', $selected_bg_color, transparent); background-color: $selected_bg_color; } @if $t==header-insensitive { // // insensitive header-bar entry // color: transparentize($header_fg, 0.45); border-color: $header_entry_border; background-color: transparentize($header_entry_bg, 0.15); } @else if $t==osd { // // normal osd entry // color: $osd_fg_color; border-color: $osd_entry_border; background-color: $osd_entry_bg; image, image:hover { color: inherit; } } @else if $t==osd-focus { // // active osd entry // color: $selected_fg_color; border-color: $osd_entry_border; background-color: $selected_bg_color; } @else if $t==osd-insensitive { // // insensitive osd entry // color: transparentize($osd_fg_color, 0.45); background-color: transparentize($osd_entry_bg, 0.15); } } // Buttons @mixin button($t, $actionb_bg:red, $actionb_fg: green) { // // Button drawing function // // $t: button type, // $actionb_bg, $actionb_fg: used for destructive and suggested action buttons @if $t==normal { // // normal button // color: $fg_color; border-color: $button_border; background-color: $button_bg; } @else if $t==hover { // // hovered button // color: $fg_color; border-color: $button_border; background-color: lighten($button_bg, 5%); } @else if $t==active { // // pushed button // color: $selected_fg_color; border-color: if($variant=='light', $selected_bg_color, $button_border); background-color: $selected_bg_color; } @else if $t==insensitive { // // insensitive button // label, & { color: $insensitive_fg_color; } border-color: transparentize($button_border, 0.45); background-color: transparentize($button_bg, 0.45); } @else if $t==insensitive-active { // // insensitive pushed button // label, & { color: transparentize($selected_fg_color, 0.2); } border-color: transparentize($selected_bg_color, 0.25); background-color: transparentize($selected_bg_color, 0.25); opacity: 0.6; } @if $t==header-normal { // // normal header-bar button // color: $header_fg; outline-offset: -3px; background-color: transparentize($header_bg, 1); border-color: transparentize($header_bg, 1); } @else if $t==header-hover { // // hovered header-bar button // color: $header_fg; border-color: $header_button_border; background-color: $header_button_bg; } @else if $t==header-active { // // pushed header-bar button // color: $selected_fg_color; border-color: if($darker=='false' and $variant=='light', $selected_bg_color, transparent); background-color: $selected_bg_color; } @else if $t==header-insensitive { // // insensitive header-bar button // label, & { color: transparentize($header_fg, 0.45); } background-color: transparentize($header_bg, 1); border-color: transparentize($header_bg, 1); } @else if $t==header-insensitive-active { // // header-bar insensitive pushed button // color: transparentize($selected_fg_color, 0.25); border-color: transparentize($selected_bg_color, 0.35); background-color: transparentize($selected_bg_color, 0.35); } @else if $t==osd { // // normal osd button // color: $osd_fg_color; border-color: $osd_button_border; background-color: $osd_button_bg; } @else if $t==osd-hover { // // active osd button // color: $osd_fg_color; border-color: $osd_button_border; background-color: opacify(lighten($osd_button_bg, 7%), 0.1); } @else if $t==osd-active { // // active osd button // color: $selected_fg_color; border-color: $osd_button_border; background-color: $selected_bg_color; } @else if $t==osd-insensitive { // // insensitive osd button // color: $osd_insensitive_fg_color; border-color: $osd_button_border; background-color: transparentize($osd_button_bg, 0.15); } @else if $t==suggested_destructive { // // suggested or destructive action buttons // background-clip: border-box; color: $actionb_fg; background-color: $actionb_bg; border-color: $actionb_bg; } @else if $t==undecorated { // // reset // border-color: transparent; background-color: transparent; background-image: none; } } // // Overshoot // @mixin overshoot($p, $c:$selected_bg_color) { // $p: position // $c: base color // // possible $p values: // top, bottom, right, left // $_big_gradient_length: 60%; $_position: center top; $_big_gradient_size: 100% $_big_gradient_length; @if $p==bottom { $_position: center bottom; } @else if $p==right { $_position: right center; $_big_gradient_size: $_big_gradient_length 100%; } @else if $p==left { $_position: left center; $_big_gradient_size: $_big_gradient_length 100%; } background-image: -gtk-gradient(radial, $_position, 0, $_position, 0.6, from(transparentize($c, 0.8)), to(transparentize($c, 1))); background-size: $_big_gradient_size; background-repeat: no-repeat; background-position: $_position; background-color: transparent; // reset some properties to be sure to not inherit them somehow border: none; // box-shadow: none; // } // // Undershoot // @mixin undershoot($p) { // $p: position // // possible $p values: // top, bottom, right, left // $_undershoot_color_dark: transparentize(black, 0.8); $_undershoot_color_light: transparentize(white, 0.8); $_gradient_dir: left; $_dash_bg_size: 10px 1px; $_gradient_repeat: repeat-x; $_bg_pos: center $p; background-color: transparent; // shouldn't be needed, but better to be sure; @if ($p == left) or ($p == right) { $_gradient_dir: top; $_dash_bg_size: 1px 10px; $_gradient_repeat: repeat-y; $_bg_pos: $p center; } background-image: linear-gradient(to $_gradient_dir, // this is the dashed line $_undershoot_color_light 50%, $_undershoot_color_dark 50%); padding-#{$p}: 1px; background-size: $_dash_bg_size; background-repeat: $_gradient_repeat; background-origin: content-box; background-position: $_bg_pos; border: none; } ================================================ FILE: common/gtk-3.0/3.20/sass/_granite.scss ================================================ // Granite Widgets // // Overlay Bar // .overlay-bar { background-color: $selected_bg_color; border-color: $selected_bg_color; border-radius: 2px; padding: 3px 6px; margin: 3px; label { color: $selected_fg_color; } } // // Thin Pane Separator // GraniteWidgetsThinPaned { background-color: transparent; background-image: none; margin: 0; border-left: 1px solid $borders_color; border-right: 1px solid $borders_color; } // avoid borders when a viewport is // packed into a Static Notebook, or Popover GraniteWidgetsPopOver .frame, GraniteWidgetsStaticNotebook .frame { border: none; } // // Help Button // .help_button { border-radius: 100px; padding: 3px 9px; } // // Secondary Toolbars // toolbar.secondary-toolbar { padding: 3px; border-bottom: 1px solid $borders_color; button { padding: 0 3px 0 3px; } } // // Bottom Toolbars // toolbar.bottom-toolbar { padding: 5px; border-width: 1px 0 0 0; border-style: solid; border-color: $borders_color; background-color: $bg_color; button { padding: 2px 3px 2px 3px; } } // // Sidebar & Source List // .source-list { -GtkTreeView-horizontal-separator: 1px; -GtkTreeView-vertical-separator: 6px; } .source-list, .source-list.view { background-color: $bg_color; color: $fg_color; -gtk-icon-style: regular; } .source-list.category-expander { color: transparent; } .source-list.view:hover { background-color: lighten($bg_color, 5%); } .source-list.view:selected, .source-list.view:hover:selected, .source-list.view:selected:focus, .source-list.category-expander:hover { color: $selected_fg_color; background-color: $selected_bg_color; } .source-list scrollbar, .source-list junction { border-image: none; border-color: transparent; background-color: $bg_color; background-image: none; } .source-list.badge, .source-list.badge:hover, .source-list.badge:selected, .source-list.badge:selected:focus, .source-list.badge:hover:selected { background-image: none; background-color: $selected_bg_color; color: $selected_fg_color; border-radius: 10px; padding: 0 6px; margin: 0 3px; border-width: 0; } .source-list.badge:selected, .source-list.badge:selected:focus, .source-list.badge:hover:selected { background-color: $selected_fg_color; color: $selected_bg_color; } // // Expander // .source-list.category-expander { color: $fg_color; -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); -GtkTreeView-expander-size: 16; } .source-list.category-expander, .source-list.category-expander:backdrop { color: transparent; border: none; } .source-list.category-expander:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } // // Welcome // GraniteWidgetsWelcome { background-color: $base_color; } GraniteWidgetsWelcome label { color: mix($fg_color, $bg_color, 50%); font-size: 11px; text-shadow: none; } GraniteWidgetsWelcome .h1, GraniteWidgetsWelcome .h3 { color: transparentize($fg_color, 0.2); } // // Help Button // .help_button { border-radius: 0; } // // Popover // GraniteWidgetsPopOver { -GraniteWidgetsPopOver-arrow-width: 21; -GraniteWidgetsPopOver-arrow-height: 10; -GraniteWidgetsPopOver-border-radius: 2px; -GraniteWidgetsPopOver-border-width: 1; -GraniteWidgetsPopOver-shadow-size: 12; border: 1px solid transparentize(black, 0.7); margin: 0; } .popover_bg { background-image: _solid($base_color); border: 1px solid transparentize(black, 0.7); } GraniteWidgetsPopOver .sidebar.view, GraniteWidgetsPopOver * { background-color: transparent; } // // Xs Entry // GraniteWidgetsXsEntry entry { padding: 4px; } // // Text Styles // .h1 { font-size: 24px; } .h2 { font-size: 18px; } .h3 { font-size: 11px; } .h4, .category-label { color: mix($bg_color, $text_color, 30%); font-weight: 600; } .h4 { padding-bottom: 6px; padding-top: 6px; } GtkListBox .h4{ padding-left: 6px; } ================================================ FILE: common/gtk-3.0/3.20/sass/_lightdm.scss ================================================ // the panel widget at the top #panel_window { background-color: $panel_bg; color: $panel_fg; font-weight: bold; box-shadow: inset 0 -1px darken($panel_bg, 7%); // the menubars/menus of the panel, i.e. indicators menubar { padding-left: 5px; &, > menuitem { background-color: transparent; color: $panel_fg; font-weight: bold; } } menubar menuitem:disabled { color: transparentize($panel_fg, 0.5); label { color: inherit; } } menubar menu > menuitem { font-weight: normal; } } // the login window #login_window, #shutdown_dialog, #restart_dialog { font-weight: normal; border-style: none; background-color: transparent; color: $fg_color; } // the top half of the login-window, in GtkDialog terms, the content #content_frame { padding-bottom: 14px; background-color: $bg_color; border-top-left-radius: 2px; border-top-right-radius: 2px; border: solid transparentize(black, 0.9); border-width: 1px 1px 0 1px; } #content_frame button { @include button(normal); &:hover { @include button(hover); } &:active, &:checked { @include button(active); } &:disabled { @include button(insensitive); } } // the lower half of the login-window, in GtkDialog terms the buttonbox or action area #buttonbox_frame { padding-top: 20px; padding-bottom: 0px; border-style: none; background-color: if($variant=='light', $osd_bg_color, $header_bg); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border: solid transparentize(black, 0.9); border-width: 0 1px 1px 1px; box-shadow: inset 0 1px if($variant=="light", $dark_sidebar_border, $header_border); } #buttonbox_frame button{ @include button(osd); &:hover { @include button(osd-hover); } &:active, &:checked { @include button(osd-active); } &:disabled { @include button(osd-insensitive); } } #login_window #user_combobox { color: $fg_color; menu { font-weight: normal; } } // the user's avatar box #user_image { padding: 3px; border-radius: 2px; } // the shutdown button #shutdown_button.button { @include button(suggested_destructive, $destructive_color); &:hover { @include button(suggested_destructive, lighten($destructive_color, 10%)); } &:active, &:checked { @include button(suggested_destructive, darken($destructive_color, 10%)); } } // the restart button #restart_button.button { @include button(suggested_destructive, $suggested_color); &:hover { @include button(suggested_destructive, lighten($suggested_color, 10%)); } &:active, &:checked { @include button(suggested_destructive, darken($suggested_color, 10%)); } } // the warning, in case a wrong password is entered or something else goes wrong according to PAM #greeter_infobar { border-bottom-width: 0; font-weight: bold; } ================================================ FILE: common/gtk-3.0/3.20/sass/_transparent_widgets.scss ================================================ //.nemo-window GtkEventBox { background-color: $bg_color; } // fixes nemo statusbar //.nemo-window, .nautilus-window { paned > separator { background-image: _solid($dark_sidebar_border); @if $variant=='light' { &:dir(ltr) { margin-left: -1px; } &:dir(rtl) { margin-right: -1px; } } } } filechooser paned > separator { background-image: _solid($dark_sidebar_border); } // Dark transparent sidebars filechooser, .nautilus-window { &.csd.background, placessidebar list { background-color: transparent; } placessidebar.sidebar { background-color: $dark_sidebar_bg; row.sidebar-row { border: none; color: $dark_sidebar_fg; .sidebar-icon { color: transparentize($dark_sidebar_fg, 0.4); } &.has-open-popup, &:hover { background-color: transparentize($dark_sidebar_fg, 0.85); } &:disabled { &, label, image { color: transparentize($dark_sidebar_fg, 0.6); } } &:selected.has-open-popup, &:selected, &:selected:hover, &:active:hover { @extend %selected_items; .sidebar-icon { color: inherit; } } &:not(:selected) button.sidebar-button { color: $dark_sidebar_fg; &:hover { @include button(osd-hover); } &:active { @include button(active); } &:not(:hover):not(:active) > image { opacity: 0.5 }; } &.sidebar-new-bookmark-row { color: $selected_bg_color; .sidebar-icon { color: inherit; } } &:drop(active):not(:disabled) { &, label, .sidebar-icon { color: $drop_target_color; } &:selected { &, label, .sidebar-icon { color: $selected_fg_color; } background-color: $drop_target_color; } } } separator { background-color: transparent; } scrollbar { @extend %dark_sidebar_scrollbar } } &.maximized placessidebar.sidebar { background-color: opacify($dark_sidebar_bg, 1); } } .nemo-window { .sidebar { color: $dark_sidebar_fg; background-color: $dark_sidebar_bg; .view, row { background-color: transparent; color: $dark_sidebar_fg; &.cell:selected { background-color: $selected_bg_color; color: $selected_fg_color; } &.expander { color: mix($dark_sidebar_fg, $dark_sidebar_bg, 50%); &:hover { color: $dark_sidebar_fg; } } } separator { background-color: transparent; } scrollbar { @extend %dark_sidebar_scrollbar } } } .caja-side-pane { &, > notebook > stack > widget > box, text, treeview { color: $dark_sidebar_fg; caret-color: $dark_sidebar_fg; background-color: opacify($dark_sidebar_bg, 1); } > box button { &:not(:active):not(:checked) { color: $dark_sidebar_fg; } &:hover:not(:active) { @extend %dark_sidebar_button:hover; } } .frame { border-color: darken(opacify($dark_sidebar_bg, 1), 5%); } scrollbar { @extend %dark_sidebar_scrollbar; } junction { background-color: darken($dark_sidebar_bg, 5%); } } filechooser { actionbar { color: $dark_sidebar_fg; background-color: $dark_sidebar_bg; border-color: if($variant =='light', darken($dark_sidebar_bg, 7%), darken($dark_sidebar_bg, 15%)); button { @extend %dark_sidebar_button; } entry { @extend %dark_sidebar_entry; } @extend %osd_check_radio; label, combobox { color: $dark_sidebar_fg; } } } // Gedit .gedit-bottom-panel-paned { background-color: $base_color; } .gedit-side-panel-paned > separator { background-image: _solid($dark_sidebar_border); } .gedit-bottom-panel-paned > separator { background-image: _solid($borders_color); } .gedit-document-panel { background-color: $dark_sidebar_bg; .maximized & { background-color: opacify($dark_sidebar_bg, 1); } row { color: $dark_sidebar_fg; background-color: transparentize($dark_sidebar_fg, 1); &:hover { background-color: transparentize($dark_sidebar_fg, 0.85); } &:active { color: $selected_fg_color; background-color: $selected_bg_color; button { color: $selected_fg_color; } } &:selected, &:selected:hover { color: $selected_fg_color; background-color: $selected_bg_color; } &:hover:not(:selected) button:active { color: $dark_sidebar_fg; } } } %dark_sidebar_button { @include button(osd); &:hover { @include button(osd-hover); } &:active, &:checked { @include button(osd-active); } &:disabled { @include button(osd-insensitive); } } %dark_sidebar_entry { @include entry(osd); &:focus { @include entry(osd-focus); } &:disabled { @include entry(osd-insensitive); } } %dark_sidebar_scrollbar { border-color: darken($dark_sidebar_bg, 5%); &.overlay-indicator:not(.dragging):not(.hovering) slider { background-color: lighten($dark_sidebar_fg, 15%); border: 1px solid transparentize(black, 0.7); } slider { background-color: transparentize(lighten($dark_sidebar_fg, 15%), 0.3); &:hover { background-color: lighten($dark_sidebar_fg, 20%); } &:hover:active { background-color: $selected_bg_color; } &:disabled { background-color: transparent; } } trough { background-color: darken($dark_sidebar_bg, 5%); } } ================================================ FILE: common/gtk-3.0/3.20/sass/_unity.scss ================================================ // Decorations UnityDecoration { -UnityDecoration-extents: 28px 1 1 1; -UnityDecoration-input-extents: 10px; -UnityDecoration-shadow-offset-x: 0px; -UnityDecoration-shadow-offset-y: 3px; -UnityDecoration-active-shadow-color: rgba(0, 0, 0, 0.2); -UnityDecoration-active-shadow-radius: 12px; -UnityDecoration-inactive-shadow-color: rgba(0, 0, 0, 0.07); -UnityDecoration-inactive-shadow-radius: 7px; -UnityDecoration-glow-size: 10px; -UnityDecoration-glow-color: $selected_bg_color; -UnityDecoration-title-indent: 10px; -UnityDecoration-title-fade: 35px; -UnityDecoration-title-alignment: 0.0; .top { border: 1px solid if($darker=='true' or $variant == 'dark', darken($header_bg, 7%), transparentize(black, 0.9)); border-bottom-width: 0; border-radius: 4px 4px 0 0; padding: 1px 6px 0 6px; background-image: _solid(opacify($header_bg, 1)); color: $header_fg; // The foreground color will be used to paint the text box-shadow: inset 0 1px lighten($header_bg, 3%); &:backdrop { border-bottom-width: 0; //background-image: _solid(opacify($header_bg_backdrop, 1)); color: transparentize($header_fg, 0.3); } } .left, .right, .bottom, .left:backdrop, .right:backdrop, .bottom:backdrop { background-color: transparent; background-image: _solid(if($darker=='true' or $variant == 'dark', darken($header_bg, 7%), transparentize(black, 0.9))); } } // Panel Style UnityPanelWidget, .unity-panel { background-image: _solid(#2f343f); color: lighten($panel_fg, 20%); box-shadow: none; &:backdrop { color: lighten($panel_fg, 1%); } } .unity-panel.menubar.menuitem:hover, .unity-panel.menubar .menuitem *:hover { border-radius: 0; color: $selected_fg_color; background-image: _solid($selected_bg_color); border-bottom: none; } // Unity Greeter .lightdm.menu { background-image: none; background-color: transparentize(black, 0.6); border-color: transparentize(white, 0.2); border-radius: 4px; padding: 1px; color: white; } .lightdm-combo .menu { background-color: lighten($header_bg, 8); border-radius: 0px; padding: 0px; color: white; } .lightdm.menu .menuitem *, .lightdm.menu .menuitem.check:active, .lightdm.menu .menuitem.radio:active { color: white; } .lightdm.menubar { color: transparentize(white, 0.2); background-image: none; background-color: transparentize(black, 0.5); & > .menuitem { padding: 2px 6px; } } .lightdm-combo.combobox-entry .button, .lightdm-combo .cell, .lightdm-combo .button, .lightdm-combo .entry, .lightdm.button, .lightdm.entry { background-image: none; background-color: transparentize(black, 0.7); border-color: transparentize(white, 0.6); border-radius: 10px; padding: 7px; color: white; text-shadow: none; } .lightdm.button, .lightdm.button:hover, .lightdm.button:active, .lightdm.button:active:focus, .lightdm.entry, .lightdm.entry:hover, .lightdm.entry:active, .lightdm.entry:active:focus { background-image: none; border-image: none; } .lightdm.button:focus, .lightdm.entry:focus { border-color: transparentize(white, 0.9); border-width: 1px; border-style: solid; color: white; } .lightdm.entry:selected { background-color: transparentize(white, 0.2); } .lightdm.entry:active { -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); animation: dashentry_spinner 1s infinite linear; } .lightdm.option-button { padding: 2px; background: none; border: 0; } .lightdm.toggle-button { background: none; border-width: 0; &.selected { background-color: transparentize(black, 0.3); border-width: 1px; } } @keyframes dashentry_spinner { to { -gtk-icon-transform: rotate(1turn); } } ================================================ FILE: common/gtk-3.0/3.20/sass/gtk-dark.scss ================================================ $variant: 'dark'; $darker: 'false'; $transparency: 'true'; @import 'colors'; @import 'drawing'; @import 'common'; @import 'applications'; @import 'unity'; @import 'granite'; @import 'lightdm'; @import 'transparent_widgets'; @import 'colors-public'; @import 'budgie'; ================================================ FILE: common/gtk-3.0/3.20/sass/gtk-darker.scss ================================================ $variant: 'light'; $darker: 'true'; $transparency: 'true'; @import 'colors'; @import 'drawing'; @import 'common'; @import 'applications'; @import 'unity'; @import 'granite'; @import 'lightdm'; @import 'transparent_widgets'; @import 'colors-public'; @import 'budgie'; ================================================ FILE: common/gtk-3.0/3.20/sass/gtk-solid-dark.scss ================================================ $variant: 'dark'; $darker: 'false'; $transparency: 'false'; @import 'colors'; @import 'drawing'; @import 'common'; @import 'applications'; @import 'unity'; @import 'granite'; @import 'lightdm'; @import 'transparent_widgets'; @import 'colors-public'; @import 'budgie'; ================================================ FILE: common/gtk-3.0/3.20/sass/gtk-solid-darker.scss ================================================ $variant: 'light'; $darker: 'true'; $transparency: 'false'; @import 'colors'; @import 'drawing'; @import 'common'; @import 'applications'; @import 'unity'; @import 'granite'; @import 'lightdm'; @import 'transparent_widgets'; @import 'colors-public'; @import 'budgie'; ================================================ FILE: common/gtk-3.0/3.20/sass/gtk-solid.scss ================================================ $variant: 'light'; $darker: 'false'; $transparency: 'false'; @import 'colors'; @import 'drawing'; @import 'common'; @import 'applications'; @import 'unity'; @import 'granite'; @import 'lightdm'; @import 'transparent_widgets'; @import 'colors-public'; @import 'budgie'; ================================================ FILE: common/gtk-3.0/3.20/sass/gtk.scss ================================================ $variant: 'light'; $darker: 'false'; $transparency: 'true'; @import 'colors'; @import 'drawing'; @import 'common'; @import 'applications'; @import 'unity'; @import 'granite'; @import 'lightdm'; @import 'transparent_widgets'; @import 'colors-public'; @import 'budgie'; ================================================ FILE: common/gtk-3.0/Makefile.am ================================================ if ENABLE_LIGHT gtk3theme_DATA = light/thumbnail.png endif if ENABLE_DARKER gtk3themedarker_DATA = light/thumbnail.png endif if ENABLE_DARK gtk3themedark_DATA = dark/thumbnail.png endif EXTRA_DIST = \ light \ dark \ _colors.scss.thpl SUBDIRS = $(GTK3_VERSION) DIST_SUBDIRS = 3.18 3.20 ================================================ FILE: common/gtk-3.0/_colors.scss.thpl ================================================ // When color definition differs for dark and light variant, // it gets @if ed depending on $variant $base_color: if($variant =='light', %TXT_BG%, %HDR_BG2%); $base_bg_color: %BG%; // not implemented for GTK+2 theme: //$text_color: if($variant == 'light', %TXT_FG%, %HDR_FG%); $text_color: if($variant == 'light', %FG%, %HDR_FG%); $bg_color: if($variant =='light', $base_bg_color, %HDR_BG%); $fg_color: if($variant =='light', %FG%, %HDR_FG%); $selected_fg_color: %SEL_FG%; $selected_bg_color: %SEL_BG%; $selected_borders_color: darken($selected_bg_color, 20%); $borders_color: if($variant =='light', darken($bg_color,9%), darken($bg_color,6%)); $horizontal_separators_color: if($variant == 'light', $borders_color, darken($fg_color,50%)); $link_color: if($variant == 'light', darken($selected_bg_color,10%), lighten($selected_bg_color,20%)); $link_visited_color: if($variant == 'light', darken($selected_bg_color,20%), lighten($selected_bg_color,10%)); $selection_mode_bg: if($transparency == 'true', transparentize($selected_bg_color, 0.05), $selected_bg_color); $selection_mode_fg: $selected_fg_color; $warning_color: %TERMINAL_COLOR11%; $error_color: %TERMINAL_COLOR9%; $warning_fg_color: white; $error_fg_color: white; $success_color: %TERMINAL_COLOR10%; $destructive_color: %TERMINAL_COLOR1%; $suggested_color: %TERMINAL_COLOR12%; $destructive_fg_color: white; $suggested_fg_color: white; $drop_target_color: %TERMINAL_COLOR3%; //insensitive state derived colors $insensitive_fg_color: if($variant == 'light', transparentize($fg_color, 0.45), transparentize($fg_color, 0.55)); $insensitive_bg_color: if($variant == 'light', mix($bg_color, $base_color, 40%), lighten($bg_color, 2%)); $header_bg: red; @if $transparency=='true' and $variant=='light' { $header_bg: transparentize(%HDR_BG%, 0.05); } @if $transparency=='false' and $variant=='light' { $header_bg: %HDR_BG%; } @if $transparency=='true' and ($variant=='dark' or $darker=='true') { $header_bg: transparentize(%HDR_BG%, 0.03); } @if $transparency=='false' and ($variant=='dark' or $darker=='true') { $header_bg: %HDR_BG%; } $header_bg_backdrop: if($darker == 'true' or $variant == 'dark', lighten($header_bg, 1.5%), lighten($header_bg, 3%)); $header_border: if($variant == 'light' and $darker=='false', darken($header_bg, 7%), darken($header_bg, 4%)); $header_fg: if($variant == 'light', saturate(transparentize($fg_color, 0.2), 10%), saturate(transparentize($fg_color, 0.2), 10%)); $header_fg: if($darker == 'true', saturate(transparentize(%HDR_FG%, 0.2), 10%), $header_fg); $dark_sidebar_bg: if($transparency == 'true', transparentize(%HDR_BG2%, 0.05), %HDR_BG2%); $dark_sidebar_fg: %HDR_FG%; $dark_sidebar_border: if($variant == 'light', $dark_sidebar_bg, darken($dark_sidebar_bg, 5%)); $osd_fg_color: $dark_sidebar_fg; $osd_bg_color: $dark_sidebar_bg; $osd_button_bg: transparentize(lighten($osd_bg_color, 22%), 0.6); $osd_button_border: transparentize(darken($osd_bg_color, 12%), 0.6); $osd_entry_bg: transparentize(lighten($osd_bg_color, 22%), 0.6); $osd_entry_border: transparentize(darken($osd_bg_color, 12%), 0.6); $osd_insensitive_bg_color: darken($osd_bg_color, 3%); $osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 30%); $osd_borders_color: transparentize(black, 0.3); $panel_bg: darken($dark_sidebar_bg, 4.7%); $panel_fg: $dark_sidebar_fg; $entry_bg: if($variant=='light', $base_color, lighten($base_color, 0%)); $entry_border: if($variant == 'light', %ARC_WIDGET_BORDER_COLOR%, darken($borders_color, 0%)); $header_entry_bg: if($darker == 'true' or $variant == 'dark', transparentize(lighten($header_bg, 22%), 0.6), transparentize($base_color, 0.1)); $header_entry_border: if($darker == 'true' or $variant == 'dark', transparentize(darken($header_bg, 12%), 0.6), transparentize($header_fg, 0.7)); $button_bg: if($variant=='light', %BTN_BG%, %HDR_BTN_BG%); $button_border: $entry_border; $header_button_bg: %HDR_BTN_BG%; $header_button_border: if($darker == 'true' or $variant == 'dark', transparentize(darken($header_bg, 12%), 0.6), transparentize($header_fg, 0.7)); //WM Buttons // Close $wm_button_close_bg: if($variant == 'light' and $darker == 'false', %TERMINAL_COLOR9%, %TERMINAL_COLOR9%); $wm_button_close_hover_bg: if($variant == 'light' and $darker == 'false', %TERMINAL_COLOR9_LIGHTER%, %TERMINAL_COLOR9_LIGHTER%); $wm_button_close_active_bg: if($variant == 'light' and $darker == 'false', %TERMINAL_COLOR9_DARKER%, %TERMINAL_COLOR9_DARKER%); $wm_icon_close_bg: if($variant == 'light' and $darker == 'false',%HDR_FG% , %HDR_BG%); // Minimize, Maximize $wm_button_hover_bg: if($variant == 'light' and $darker == 'false', %HDR_FG%, %HDR_FG%); $wm_button_active_bg: $selected_bg_color; $wm_button_hover_border: if($variant == 'light' and $darker == 'false', %HDR_FG%, %HDR_FG%); $wm_icon_bg: if($variant == 'light' and $darker == 'false', %HDR_FG%, %HDR_FG%); $wm_icon_unfocused_bg: if($variant == 'light' and $darker == 'false', %INACTIVE_HDR_FG%, %INACTIVE_HDR_FG%); $wm_icon_hover_bg: if($variant == 'light' and $darker == 'false', %INACTIVE_HDR_FG%, %INACTIVE_HDR_FG%); $wm_icon_active_bg: $selected_fg_color; /* vim: set ft=scss: */ ================================================ FILE: common/gtk-3.0/common.am ================================================ VPATH = targets := $(shell cat $(srcdir)/assets.txt) normal := $(patsubst %,assets/%.png,$(targets)) hidpi := $(patsubst %,assets/%@2.png,$(targets)) normal: $(normal) hidpi: $(hidpi) assets light dark darker: $(MKDIR_P) "$@"/ clean: rm -rf assets/ light/ dark/ darker/ if RENDERSVG $(normal): $(srcdir)/assets.svg | assets $(RENDERSVG) --export-id "$(basename $(notdir $@))" --dpi 96 "$<" "$@" if OPTIPNG $(OPTIPNG) -o7 --quiet "$@" endif $(hidpi): $(srcdir)/assets.svg | assets $(RENDERSVG) --export-id "$(patsubst %@2,%,$(basename $(notdir $@)))" --dpi 192 --zoom 2 "$<" "$@" if OPTIPNG $(OPTIPNG) -o7 --quiet "$@" endif else $(normal): $(srcdir)/assets.svg | assets $(INKSCAPE) --export-id-only --export-png="$@" --export-id="$(basename $(notdir $@))" --export-dpi=96 "$<" >/dev/null if OPTIPNG $(OPTIPNG) -o7 --quiet "$@" endif $(hidpi): $(srcdir)/assets.svg | assets $(INKSCAPE) --export-id-only --export-png="$@" --export-id="$(patsubst %@2,%,$(basename $(notdir $@)))" --export-dpi=192 "$<" >/dev/null if OPTIPNG $(OPTIPNG) -o7 --quiet "$@" endif endif .PHONY: normal hidpi clean if ENABLE_TRANSPARENCY %.css: $(srcdir)/sass/%.scss $(SASSC) "$<" "$@" else gtk.css: $(srcdir)/sass/gtk-solid.scss $(SASSC) "$<" "$@" gtk-%.css: $(srcdir)/sass/gtk-solid-%.scss $(SASSC) "$<" "$@" endif EXTRA_DIST = \ assets.txt \ assets.svg \ sass ================================================ FILE: common/index/dark/index.theme ================================================ [Desktop Entry] Type=X-GNOME-Metatheme Name=Arc-Dark Comment=A flat theme with transparent elements Encoding=UTF-8 [X-GNOME-Metatheme] GtkTheme=Arc-Dark MetacityTheme=Arc-Dark IconTheme=gnome CursorTheme=DMZ-Black ButtonLayout=menu:minimize,maximize,close ================================================ FILE: common/index/darker/index.theme ================================================ [Desktop Entry] Type=X-GNOME-Metatheme Name=Arc-Darker Comment=A flat theme with transparent elements Encoding=UTF-8 [X-GNOME-Metatheme] GtkTheme=Arc-Darker MetacityTheme=Arc-Darker IconTheme=gnome CursorTheme=DMZ-Black ButtonLayout=menu:minimize,maximize,close ================================================ FILE: common/index/light/index.theme ================================================ [Desktop Entry] Type=X-GNOME-Metatheme Name=Arc Comment=A flat theme with transparent elements Encoding=UTF-8 [X-GNOME-Metatheme] GtkTheme=Arc MetacityTheme=Arc IconTheme=gnome CursorTheme=DMZ-Black ButtonLayout=menu:minimize,maximize,close ================================================ FILE: common/metacity-1/metacity-theme-1-dark.xml ================================================ Arc horst3180 horst3180 2015 Arc Metacity theme </draw_ops> <draw_ops name="title_unfocused"> <title x="(0 `max` ((width - title_width) / 2)) + 2" y="(0 `max` ((height - title_height) / 2)) + 1" color="C_title_unfocused"/> </draw_ops> <!-- window decorations --> <draw_ops name="entire_background_focused"> <rectangle color="C_wm_bg_focused" x="0" y="0" width="width" height="height" filled="true" /> </draw_ops> <draw_ops name="entire_background_unfocused"> <rectangle color="C_wm_bg_unfocused" x="0" y="0" width="width" height="height" filled="true" /> </draw_ops> <draw_ops name="titlebar_focused"> <rectangle color="C_wm_bg_focused" x="0" y="0" width="width" height="height" filled="true" /> <rectangle color="C_wm_highlight" x="0" y="0" width="width" height="1" filled="true" /> </draw_ops> <draw_ops name="titlebar_unfocused"> <rectangle color="C_wm_bg_unfocused" x="0" y="0" width="width" height="height" filled="true" /> <rectangle color="C_wm_highlight" x="0" y="0" width="width" height="1" filled="true" /> </draw_ops> <draw_ops name="titlebar_max"> </draw_ops> <draw_ops name="titlebar_small_focused"> </draw_ops> <draw_ops name="titlebar_small_unfocused"> </draw_ops> <draw_ops name="border_focused"> <rectangle color="C_wm_bg_focused" x="0" y="0" width="width" height="height" filled="false" /> </draw_ops> <draw_ops name="border_unfocused"> <rectangle color="C_wm_bg_unfocused" x="0" y="0" width="width" height="height" filled="false" /> </draw_ops> <!--close--> <draw_ops name="close_focused"> <image filename="button-bg.svg" colorize="C_button_close_bg_focused" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="close-icon.svg" colorize="C_icon_close_bg" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="close_focused_pressed"> <image filename="button-bg.svg" colorize="C_button_close_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="close-icon.svg" colorize="C_icon_close_bg" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="close_focused_prelight"> <image filename="button-bg.svg" colorize="C_button_close_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="close-icon.svg" colorize="C_icon_close_bg" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="close_unfocused"> <image filename="button-bg.svg" colorize="C_icon_bg_unfocused" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="close-icon.svg" colorize="C_icon_close_bg" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="close_unfocused_prelight"> <image filename="button-bg.svg" colorize="C_button_close_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="close-icon.svg" colorize="C_icon_close_bg" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="close_unfocused_pressed"> <image filename="button-bg.svg" colorize="C_button_close_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="close-icon.svg" colorize="C_icon_close_bg" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <!--maximize--> <draw_ops name="maximize_focused"> <image filename="max-icon.svg" colorize="C_icon_bg_focused" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="maximize_focused_pressed"> <image filename="button-bg.svg" colorize="C_button_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="max-icon.svg" colorize="C_icon_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="maximize_focused_prelight"> <image filename="button-bg.svg" colorize="C_button_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="button-border.svg" colorize="C_button_border_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="max-icon.svg" colorize="C_icon_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="maximize_unfocused"> <image filename="max-icon.svg" colorize="C_icon_bg_unfocused" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="maximize_unfocused_prelight"> <image filename="button-bg.svg" colorize="C_button_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="button-border.svg" colorize="C_button_border_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="max-icon.svg" colorize="C_icon_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="maximize_unfocused_pressed"> <image filename="button-bg.svg" colorize="C_button_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="max-icon.svg" colorize="C_icon_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <!--minimize--> <draw_ops name="minimize_focused"> <image filename="min-icon.svg" colorize="C_icon_bg_focused" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="minimize_focused_pressed"> <image filename="button-bg.svg" colorize="C_button_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="min-icon.svg" colorize="C_icon_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="minimize_focused_prelight"> <image filename="button-bg.svg" colorize="C_button_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="button-border.svg" colorize="C_button_border_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="min-icon.svg" colorize="C_icon_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="minimize_unfocused"> <image filename="min-icon.svg" colorize="C_icon_bg_unfocused" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="minimize_unfocused_prelight"> <image filename="button-bg.svg" colorize="C_button_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="button-border.svg" colorize="C_button_border_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="min-icon.svg" colorize="C_icon_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="minimize_unfocused_pressed"> <image filename="button-bg.svg" colorize="C_button_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="min-icon.svg" colorize="C_icon_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <!--Todo--> <draw_ops name="menu_focused"></draw_ops> <draw_ops name="menu_focused_pressed"></draw_ops> <draw_ops name="menu_unfocused"></draw_ops> <draw_ops name="menu_unfocused_prelight"></draw_ops> <draw_ops name="menu_unfocused_pressed"></draw_ops> <draw_ops name="shade_focused"></draw_ops> <draw_ops name="shade_focused_pressed"></draw_ops> <draw_ops name="shade_unfocused"></draw_ops> <draw_ops name="shade_unfocused_prelight"></draw_ops> <draw_ops name="shade_unfocused_pressed"></draw_ops> <!-- frame styles --> <frame_style name="normal_focused" geometry="normal"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="titlebar" draw_ops="titlebar_focused" /> <piece position="title" draw_ops="title_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_focused" /> <button function="unshade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="normal_unfocused" geometry="normal_unfocused"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="titlebar" draw_ops="titlebar_unfocused" /> <piece position="title" draw_ops="title_unfocused" /> <button function="close" state="normal" draw_ops="close_unfocused"/> <button function="close" state="prelight" draw_ops="close_unfocused_prelight"/> <button function="close" state="pressed" draw_ops="close_unfocused_pressed"/> <button function="maximize" state="normal" draw_ops="maximize_unfocused"/> <button function="maximize" state="prelight" draw_ops="maximize_unfocused_prelight"/> <button function="maximize" state="pressed" draw_ops="maximize_unfocused_pressed"/> <button function="minimize" state="normal" draw_ops="minimize_unfocused"/> <button function="minimize" state="prelight" draw_ops="minimize_unfocused_prelight"/> <button function="minimize" state="pressed" draw_ops="minimize_unfocused_pressed"/> <button function="menu" state="normal" draw_ops="menu_unfocused" /> <button function="menu" state="prelight" draw_ops="menu_unfocused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_unfocused_pressed" /> <button function="shade" state="normal" draw_ops="shade_unfocused" /> <button function="shade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_unfocused" /> <button function="unshade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="normal_max_focused" geometry="max"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="titlebar" draw_ops="titlebar_max" /> <piece position="title" draw_ops="title_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_focused" /> <button function="unshade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="normal_max_unfocused" geometry="max"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="titlebar" draw_ops="titlebar_max" /> <piece position="title" draw_ops="title_unfocused" /> <button function="close" state="normal" draw_ops="close_unfocused"/> <button function="close" state="prelight" draw_ops="close_unfocused_prelight"/> <button function="close" state="pressed" draw_ops="close_unfocused_pressed"/> <button function="maximize" state="normal" draw_ops="maximize_unfocused"/> <button function="maximize" state="prelight" draw_ops="maximize_unfocused_prelight"/> <button function="maximize" state="pressed" draw_ops="maximize_unfocused_pressed"/> <button function="minimize" state="normal" draw_ops="minimize_unfocused"/> <button function="minimize" state="prelight" draw_ops="minimize_unfocused_prelight"/> <button function="minimize" state="pressed" draw_ops="minimize_unfocused_pressed"/> <button function="menu" state="normal" draw_ops="menu_unfocused" /> <button function="menu" state="prelight" draw_ops="menu_unfocused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_unfocused_pressed" /> <button function="shade" state="normal" draw_ops="shade_unfocused" /> <button function="shade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_unfocused" /> <button function="unshade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="normal_max_shaded_focused" geometry="max"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="titlebar" draw_ops="titlebar_max" /> <piece position="title" draw_ops="title_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_focused" /> <button function="unshade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="normal_max_shaded_unfocused" geometry="max"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="titlebar" draw_ops="titlebar_max" /> <piece position="title" draw_ops="title_unfocused" /> <button function="close" state="normal" draw_ops="close_unfocused"/> <button function="close" state="prelight" draw_ops="close_unfocused_prelight"/> <button function="close" state="pressed" draw_ops="close_unfocused_pressed"/> <button function="maximize" state="normal" draw_ops="maximize_unfocused"/> <button function="maximize" state="prelight" draw_ops="maximize_unfocused_prelight"/> <button function="maximize" state="pressed" draw_ops="maximize_unfocused_pressed"/> <button function="minimize" state="normal" draw_ops="minimize_unfocused"/> <button function="minimize" state="prelight" draw_ops="minimize_unfocused_prelight"/> <button function="minimize" state="pressed" draw_ops="minimize_unfocused_pressed"/> <button function="menu" state="normal" draw_ops="menu_unfocused" /> <button function="menu" state="prelight" draw_ops="menu_unfocused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_unfocused_pressed" /> <button function="shade" state="normal" draw_ops="shade_unfocused" /> <button function="shade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_unfocused" /> <button function="unshade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="dialog_focused" geometry="normal"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="titlebar" draw_ops="titlebar_focused" /> <piece position="title" draw_ops="title_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_focused" /> <button function="unshade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="dialog_unfocused" geometry="normal"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="titlebar" draw_ops="titlebar_unfocused" /> <piece position="title" draw_ops="title_unfocused" /> <button function="close" state="normal" draw_ops="close_unfocused"/> <button function="close" state="prelight" draw_ops="close_unfocused_prelight"/> <button function="close" state="pressed" draw_ops="close_unfocused_pressed"/> <button function="maximize" state="normal" draw_ops="maximize_unfocused"/> <button function="maximize" state="prelight" draw_ops="maximize_unfocused_prelight"/> <button function="maximize" state="pressed" draw_ops="maximize_unfocused_pressed"/> <button function="minimize" state="normal" draw_ops="minimize_unfocused"/> <button function="minimize" state="prelight" draw_ops="minimize_unfocused_prelight"/> <button function="minimize" state="pressed" draw_ops="minimize_unfocused_pressed"/> <button function="menu" state="normal" draw_ops="menu_unfocused" /> <button function="menu" state="prelight" draw_ops="menu_unfocused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_unfocused_pressed" /> <button function="shade" state="normal"><draw_ops></draw_ops></button> <button function="shade" state="pressed"><draw_ops></draw_ops></button> <button function="unshade" state="normal"><draw_ops></draw_ops></button> <button function="unshade" state="pressed"><draw_ops></draw_ops></button> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="modal_dialog_focused" geometry="modal"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="titlebar" draw_ops="titlebar_focused" /> <piece position="title" draw_ops="title_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_focused" /> <button function="unshade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button><button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="modal_dialog_unfocused" geometry="modal"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="titlebar" draw_ops="titlebar_focused" /> <piece position="title" draw_ops="title_unfocused" /> <button function="close" state="normal" draw_ops="close_unfocused"/> <button function="close" state="prelight" draw_ops="close_unfocused_prelight"/> <button function="close" state="pressed" draw_ops="close_unfocused_pressed"/> <button function="maximize" state="normal" draw_ops="maximize_unfocused"/> <button function="maximize" state="prelight" draw_ops="maximize_unfocused_prelight"/> <button function="maximize" state="pressed" draw_ops="maximize_unfocused_pressed"/> <button function="minimize" state="normal" draw_ops="minimize_unfocused"/> <button function="minimize" state="prelight" draw_ops="minimize_unfocused_prelight"/> <button function="minimize" state="pressed" draw_ops="minimize_unfocused_pressed"/> <button function="menu" state="normal" draw_ops="menu_unfocused" /> <button function="menu" state="prelight" draw_ops="menu_unfocused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_unfocused_pressed" /> <button function="shade" state="normal" draw_ops="shade_unfocused" /> <button function="shade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_unfocused" /> <button function="unshade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="utility_focused" geometry="small"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="titlebar" draw_ops="titlebar_small_focused" /> <piece position="title" draw_ops="title_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_focused" /> <button function="unshade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="utility_unfocused" geometry="small_unfocused"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="titlebar" draw_ops="titlebar_small_unfocused" /> <piece position="title" draw_ops="title_unfocused" /> <button function="close" state="normal" draw_ops="close_unfocused"/> <button function="close" state="prelight" draw_ops="close_unfocused_prelight"/> <button function="close" state="pressed" draw_ops="close_unfocused_pressed"/> <button function="maximize" state="normal" draw_ops="maximize_unfocused"/> <button function="maximize" state="prelight" draw_ops="maximize_unfocused_prelight"/> <button function="maximize" state="pressed" draw_ops="maximize_unfocused_pressed"/> <button function="minimize" state="normal" draw_ops="minimize_unfocused"/> <button function="minimize" state="prelight" draw_ops="minimize_unfocused_prelight"/> <button function="minimize" state="pressed" draw_ops="minimize_unfocused_pressed"/> <button function="menu" state="normal" draw_ops="menu_unfocused" /> <button function="menu" state="prelight" draw_ops="menu_unfocused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_unfocused_pressed" /> <button function="shade" state="normal" draw_ops="shade_unfocused" /> <button function="shade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_unfocused" /> <button function="unshade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="border_focused" geometry="borderless"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="overlay" draw_ops="border_focused" /> <button function="close" state="normal"><draw_ops></draw_ops></button> <button function="close" state="pressed"><draw_ops></draw_ops></button> <button function="maximize" state="normal"><draw_ops></draw_ops></button> <button function="maximize" state="pressed"><draw_ops></draw_ops></button> <button function="minimize" state="normal"><draw_ops></draw_ops></button> <button function="minimize" state="pressed"><draw_ops></draw_ops></button> <button function="menu" state="normal"><draw_ops></draw_ops></button> <button function="menu" state="pressed"><draw_ops></draw_ops></button> <button function="shade" state="normal"><draw_ops></draw_ops></button> <button function="shade" state="pressed"><draw_ops></draw_ops></button> <button function="unshade" state="normal"><draw_ops></draw_ops></button> <button function="unshade" state="pressed"><draw_ops></draw_ops></button> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="border_unfocused" geometry="borderless"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="overlay" draw_ops="border_unfocused" /> <button function="close" state="normal"><draw_ops></draw_ops></button> <button function="close" state="pressed"><draw_ops></draw_ops></button> <button function="maximize" state="normal"><draw_ops></draw_ops></button> <button function="maximize" state="pressed"><draw_ops></draw_ops></button> <button function="minimize" state="normal"><draw_ops></draw_ops></button> <button function="minimize" state="pressed"><draw_ops></draw_ops></button> <button function="menu" state="normal"><draw_ops></draw_ops></button> <button function="menu" state="pressed"><draw_ops></draw_ops></button> <button function="shade" state="normal"><draw_ops></draw_ops></button> <button function="shade" state="pressed"><draw_ops></draw_ops></button> <button function="unshade" state="normal"><draw_ops></draw_ops></button> <button function="unshade" state="pressed"><draw_ops></draw_ops></button> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <!-- placeholder for unimplementated styles--> <frame_style name="blank" geometry="normal"> <button function="close" state="normal"><draw_ops></draw_ops></button> <button function="close" state="pressed"><draw_ops></draw_ops></button> <button function="maximize" state="normal"><draw_ops></draw_ops></button> <button function="maximize" state="pressed"><draw_ops></draw_ops></button> <button function="minimize" state="normal"><draw_ops></draw_ops></button> <button function="minimize" state="pressed"><draw_ops></draw_ops></button> <button function="menu" state="normal"><draw_ops></draw_ops></button> <button function="menu" state="pressed"><draw_ops></draw_ops></button> <button function="shade" state="normal"><draw_ops></draw_ops></button> <button function="shade" state="pressed"><draw_ops></draw_ops></button> <button function="unshade" state="normal"><draw_ops></draw_ops></button> <button function="unshade" state="pressed"><draw_ops></draw_ops></button> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <!-- frame style sets --> <frame_style_set name="normal_style_set"> <frame focus="yes" state="normal" resize="both" style="normal_focused"/> <frame focus="no" state="normal" resize="both" style="normal_unfocused"/> <frame focus="yes" state="maximized" style="normal_max_focused"/> <frame focus="no" state="maximized" style="normal_max_unfocused"/> <frame focus="yes" state="shaded" style="normal_focused"/> <frame focus="no" state="shaded" style="normal_unfocused"/> <frame focus="yes" state="maximized_and_shaded" style="normal_max_shaded_focused"/> <frame focus="no" state="maximized_and_shaded" style="normal_max_shaded_unfocused"/> </frame_style_set> <frame_style_set name="dialog_style_set"> <frame focus="yes" state="normal" resize="both" style="dialog_focused"/> <frame focus="no" state="normal" resize="both" style="dialog_unfocused"/> <frame focus="yes" state="maximized" style="blank"/> <frame focus="no" state="maximized" style="blank"/> <frame focus="yes" state="shaded" style="dialog_focused"/> <frame focus="no" state="shaded" style="dialog_unfocused"/> <frame focus="yes" state="maximized_and_shaded" style="blank"/> <frame focus="no" state="maximized_and_shaded" style="blank"/> </frame_style_set> <frame_style_set name="modal_dialog_style_set"> <frame focus="yes" state="normal" resize="both" style="modal_dialog_focused"/> <frame focus="no" state="normal" resize="both" style="modal_dialog_unfocused"/> <frame focus="yes" state="maximized" style="blank"/> <frame focus="no" state="maximized" style="blank"/> <frame focus="yes" state="shaded" style="modal_dialog_focused"/> <frame focus="no" state="shaded" style="modal_dialog_unfocused"/> <frame focus="yes" state="maximized_and_shaded" style="blank"/> <frame focus="no" state="maximized_and_shaded" style="blank"/> </frame_style_set> <frame_style_set name="utility_style_set"> <frame focus="yes" state="normal" resize="both" style="utility_focused"/> <frame focus="no" state="normal" resize="both" style="utility_unfocused"/> <frame focus="yes" state="maximized" style="blank"/> <frame focus="no" state="maximized" style="blank"/> <frame focus="yes" state="shaded" style="utility_focused"/> <frame focus="no" state="shaded" style="utility_unfocused"/> <frame focus="yes" state="maximized_and_shaded" style="blank"/> <frame focus="no" state="maximized_and_shaded" style="blank"/> </frame_style_set> <frame_style_set name="border_style_set"> <frame focus="yes" state="normal" resize="both" style="border_focused"/> <frame focus="no" state="normal" resize="both" style="border_unfocused"/> <frame focus="yes" state="maximized" style="blank"/> <frame focus="no" state="maximized" style="blank"/> <frame focus="yes" state="shaded" style="blank"/> <frame focus="no" state="shaded" style="blank"/> <frame focus="yes" state="maximized_and_shaded" style="blank"/> <frame focus="no" state="maximized_and_shaded" style="blank"/> </frame_style_set> <!-- windows --> <window type="normal" style_set="normal_style_set"/> <window type="dialog" style_set="dialog_style_set"/> <window type="modal_dialog" style_set="modal_dialog_style_set"/> <window type="menu" style_set="utility_style_set"/> <window type="utility" style_set="utility_style_set"/> <window type="border" style_set="border_style_set"/> </metacity_theme> ================================================ FILE: common/metacity-1/metacity-theme-1.xml ================================================ <?xml version="1.0"?> <metacity_theme> <info> <name>Arc</name> <author>horst3180</author> <copyright>horst3180</copyright> <date>2015</date> <description>Arc Metacity theme</description> </info> <!-- meaningfull constants --> <constant name="C_title_focused" value="#70788d" /> <constant name="C_title_unfocused" value="#979dac" /> <constant name="C_wm_bg_focused" value="#e7e8eb" /> <constant name="C_wm_bg_unfocused" value="#e7e8eb" /> <constant name="C_wm_highlight" value="#eeeff1" /> <!-- window button colors --> <!-- close --> <constant name="C_button_close_bg_focused" value="#f46067" /> <constant name="C_button_close_bg_hover" value="#f68086" /> <constant name="C_button_close_bg_active" value="#f13039" /> <constant name="C_icon_close_bg" value="#F8F8F9" /> <!-- minimize, maximize --> <constant name="C_button_bg_hover" value="#fdfdfd" /> <constant name="C_button_bg_active" value="#5294e2" /> <constant name="C_button_border_hover" value="#D1D3DA" /> <constant name="C_icon_bg_focused" value="#90949E" /> <constant name="C_icon_bg_unfocused" value="#B6B8C0" /> <constant name="C_icon_bg_hover" value="#7A7F8B" /> <constant name="C_icon_bg_active" value="#5294e2" /> <!-- geometries --> <frame_geometry name="normal" title_scale="medium" rounded_top_left="1" rounded_top_right="1"> <distance name="left_width" value="1" /> <distance name="right_width" value="1" /> <distance name="bottom_height" value="3" /> <distance name="left_titlebar_edge" value="2"/> <distance name="right_titlebar_edge" value="2"/> <distance name="title_vertical_pad" value="3"/> <border name="title_border" left="10" right="10" top="3" bottom="3"/> <border name="button_border" left="3" right="3" top="0" bottom="0"/> <aspect_ratio name="button" value="1.0" /> </frame_geometry> <frame_geometry name="normal_unfocused" title_scale="medium" rounded_top_left="1" rounded_top_right="1" parent="normal"> </frame_geometry> <frame_geometry name="max" title_scale="medium" parent="normal" rounded_top_left="false" rounded_top_right="false"> <distance name="left_width" value="0" /> <distance name="right_width" value="0" /> <distance name="bottom_height" value="0" /> <distance name="left_titlebar_edge" value="0"/> <distance name="right_titlebar_edge" value="0"/> <distance name="title_vertical_pad" value="2"/> <!-- This needs to be 1 less then the title_vertical_pad on normal state or you'll have bigger buttons --> <distance name="bottom_height" value="0" /> </frame_geometry> <frame_geometry name="small" title_scale="small" parent="normal" hide_buttons="true" rounded_top_left="1" rounded_top_right="1"> <distance name="title_vertical_pad" value="7"/> <border name="title_border" left="10" right="10" top="0" bottom="1"/> </frame_geometry> <frame_geometry name="small_unfocused" parent="small"> <distance name="left_titlebar_edge" value="1"/> <distance name="right_titlebar_edge" value="1"/> </frame_geometry> <frame_geometry name="borderless" has_title="false" rounded_top_left="false" rounded_top_right="false" parent="normal" > <distance name="left_width" value="0" /> <distance name="right_width" value="0" /> <distance name="bottom_height" value="0" /> <distance name="title_vertical_pad" value="0" /> <border name="title_border" left="10" right="10" top="0" bottom="0" /> </frame_geometry> <frame_geometry name="modal" title_scale="small" hide_buttons="true" rounded_top_left="1" rounded_top_right="1" parent="small"> <distance name="title_vertical_pad" value="5"/> </frame_geometry> <!-- drawing operations --> <!-- title --> <draw_ops name="title_focused"> <title x="(0 `max` ((width - title_width) / 2)) + 2" y="(0 `max` ((height - title_height) / 2)) + 1" color="C_title_focused" /> </draw_ops> <draw_ops name="title_unfocused"> <title x="(0 `max` ((width - title_width) / 2)) + 2" y="(0 `max` ((height - title_height) / 2)) + 1" color="C_title_unfocused"/> </draw_ops> <!-- window decorations --> <draw_ops name="entire_background_focused"> <rectangle color="C_wm_bg_focused" x="0" y="0" width="width" height="height" filled="true" /> </draw_ops> <draw_ops name="entire_background_unfocused"> <rectangle color="C_wm_bg_unfocused" x="0" y="0" width="width" height="height" filled="true" /> </draw_ops> <draw_ops name="titlebar_focused"> <rectangle color="C_wm_bg_focused" x="0" y="0" width="width" height="height" filled="true" /> <rectangle color="C_wm_highlight" x="0" y="0" width="width" height="1" filled="true" /> </draw_ops> <draw_ops name="titlebar_unfocused"> <rectangle color="C_wm_bg_unfocused" x="0" y="0" width="width" height="height" filled="true" /> <rectangle color="C_wm_highlight" x="0" y="0" width="width" height="1" filled="true" /> </draw_ops> <draw_ops name="titlebar_max"> </draw_ops> <draw_ops name="titlebar_small_focused"> </draw_ops> <draw_ops name="titlebar_small_unfocused"> </draw_ops> <draw_ops name="border_focused"> <rectangle color="C_wm_bg_focused" x="0" y="0" width="width" height="height" filled="false" /> </draw_ops> <draw_ops name="border_unfocused"> <rectangle color="C_wm_bg_unfocused" x="0" y="0" width="width" height="height" filled="false" /> </draw_ops> <!--close--> <draw_ops name="close_focused"> <image filename="button-bg.svg" colorize="C_button_close_bg_focused" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="close-icon.svg" colorize="C_icon_close_bg" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="close_focused_pressed"> <image filename="button-bg.svg" colorize="C_button_close_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="close-icon.svg" colorize="C_icon_close_bg" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="close_focused_prelight"> <image filename="button-bg.svg" colorize="C_button_close_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="close-icon.svg" colorize="C_icon_close_bg" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="close_unfocused"> <image filename="button-bg.svg" colorize="C_icon_bg_unfocused" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="close-icon.svg" colorize="C_icon_close_bg" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="close_unfocused_prelight"> <image filename="button-bg.svg" colorize="C_button_close_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="close-icon.svg" colorize="C_icon_close_bg" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="close_unfocused_pressed"> <image filename="button-bg.svg" colorize="C_button_close_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="close-icon.svg" colorize="C_icon_close_bg" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <!--maximize--> <draw_ops name="maximize_focused"> <image filename="max-icon.svg" colorize="C_icon_bg_focused" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="maximize_focused_pressed"> <image filename="button-bg.svg" colorize="C_button_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="max-icon.svg" colorize="C_icon_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="maximize_focused_prelight"> <image filename="button-bg.svg" colorize="C_button_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="button-border.svg" colorize="C_button_border_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="max-icon.svg" colorize="C_icon_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="maximize_unfocused"> <image filename="max-icon.svg" colorize="C_icon_bg_unfocused" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="maximize_unfocused_prelight"> <image filename="button-bg.svg" colorize="C_button_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="button-border.svg" colorize="C_button_border_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="max-icon.svg" colorize="C_icon_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="maximize_unfocused_pressed"> <image filename="button-bg.svg" colorize="C_button_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="max-icon.svg" colorize="C_icon_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <!--minimize--> <draw_ops name="minimize_focused"> <image filename="min-icon.svg" colorize="C_icon_bg_focused" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="minimize_focused_pressed"> <image filename="button-bg.svg" colorize="C_button_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="min-icon.svg" colorize="C_icon_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="minimize_focused_prelight"> <image filename="button-bg.svg" colorize="C_button_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="button-border.svg" colorize="C_button_border_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="min-icon.svg" colorize="C_icon_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="minimize_unfocused"> <image filename="min-icon.svg" colorize="C_icon_bg_unfocused" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="minimize_unfocused_prelight"> <image filename="button-bg.svg" colorize="C_button_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="button-border.svg" colorize="C_button_border_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="min-icon.svg" colorize="C_icon_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="minimize_unfocused_pressed"> <image filename="button-bg.svg" colorize="C_button_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="min-icon.svg" colorize="C_icon_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <!--Todo--> <draw_ops name="menu_focused"></draw_ops> <draw_ops name="menu_focused_pressed"></draw_ops> <draw_ops name="menu_unfocused"></draw_ops> <draw_ops name="menu_unfocused_prelight"></draw_ops> <draw_ops name="menu_unfocused_pressed"></draw_ops> <draw_ops name="shade_focused"></draw_ops> <draw_ops name="shade_focused_pressed"></draw_ops> <draw_ops name="shade_unfocused"></draw_ops> <draw_ops name="shade_unfocused_prelight"></draw_ops> <draw_ops name="shade_unfocused_pressed"></draw_ops> <!-- frame styles --> <frame_style name="normal_focused" geometry="normal"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="titlebar" draw_ops="titlebar_focused" /> <piece position="title" draw_ops="title_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_focused" /> <button function="unshade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="normal_unfocused" geometry="normal_unfocused"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="titlebar" draw_ops="titlebar_unfocused" /> <piece position="title" draw_ops="title_unfocused" /> <button function="close" state="normal" draw_ops="close_unfocused"/> <button function="close" state="prelight" draw_ops="close_unfocused_prelight"/> <button function="close" state="pressed" draw_ops="close_unfocused_pressed"/> <button function="maximize" state="normal" draw_ops="maximize_unfocused"/> <button function="maximize" state="prelight" draw_ops="maximize_unfocused_prelight"/> <button function="maximize" state="pressed" draw_ops="maximize_unfocused_pressed"/> <button function="minimize" state="normal" draw_ops="minimize_unfocused"/> <button function="minimize" state="prelight" draw_ops="minimize_unfocused_prelight"/> <button function="minimize" state="pressed" draw_ops="minimize_unfocused_pressed"/> <button function="menu" state="normal" draw_ops="menu_unfocused" /> <button function="menu" state="prelight" draw_ops="menu_unfocused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_unfocused_pressed" /> <button function="shade" state="normal" draw_ops="shade_unfocused" /> <button function="shade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_unfocused" /> <button function="unshade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="normal_max_focused" geometry="max"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="titlebar" draw_ops="titlebar_max" /> <piece position="title" draw_ops="title_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_focused" /> <button function="unshade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="normal_max_unfocused" geometry="max"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="titlebar" draw_ops="titlebar_max" /> <piece position="title" draw_ops="title_unfocused" /> <button function="close" state="normal" draw_ops="close_unfocused"/> <button function="close" state="prelight" draw_ops="close_unfocused_prelight"/> <button function="close" state="pressed" draw_ops="close_unfocused_pressed"/> <button function="maximize" state="normal" draw_ops="maximize_unfocused"/> <button function="maximize" state="prelight" draw_ops="maximize_unfocused_prelight"/> <button function="maximize" state="pressed" draw_ops="maximize_unfocused_pressed"/> <button function="minimize" state="normal" draw_ops="minimize_unfocused"/> <button function="minimize" state="prelight" draw_ops="minimize_unfocused_prelight"/> <button function="minimize" state="pressed" draw_ops="minimize_unfocused_pressed"/> <button function="menu" state="normal" draw_ops="menu_unfocused" /> <button function="menu" state="prelight" draw_ops="menu_unfocused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_unfocused_pressed" /> <button function="shade" state="normal" draw_ops="shade_unfocused" /> <button function="shade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_unfocused" /> <button function="unshade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="normal_max_shaded_focused" geometry="max"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="titlebar" draw_ops="titlebar_max" /> <piece position="title" draw_ops="title_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_focused" /> <button function="unshade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="normal_max_shaded_unfocused" geometry="max"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="titlebar" draw_ops="titlebar_max" /> <piece position="title" draw_ops="title_unfocused" /> <button function="close" state="normal" draw_ops="close_unfocused"/> <button function="close" state="prelight" draw_ops="close_unfocused_prelight"/> <button function="close" state="pressed" draw_ops="close_unfocused_pressed"/> <button function="maximize" state="normal" draw_ops="maximize_unfocused"/> <button function="maximize" state="prelight" draw_ops="maximize_unfocused_prelight"/> <button function="maximize" state="pressed" draw_ops="maximize_unfocused_pressed"/> <button function="minimize" state="normal" draw_ops="minimize_unfocused"/> <button function="minimize" state="prelight" draw_ops="minimize_unfocused_prelight"/> <button function="minimize" state="pressed" draw_ops="minimize_unfocused_pressed"/> <button function="menu" state="normal" draw_ops="menu_unfocused" /> <button function="menu" state="prelight" draw_ops="menu_unfocused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_unfocused_pressed" /> <button function="shade" state="normal" draw_ops="shade_unfocused" /> <button function="shade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_unfocused" /> <button function="unshade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="dialog_focused" geometry="normal"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="titlebar" draw_ops="titlebar_focused" /> <piece position="title" draw_ops="title_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_focused" /> <button function="unshade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="dialog_unfocused" geometry="normal"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="titlebar" draw_ops="titlebar_unfocused" /> <piece position="title" draw_ops="title_unfocused" /> <button function="close" state="normal" draw_ops="close_unfocused"/> <button function="close" state="prelight" draw_ops="close_unfocused_prelight"/> <button function="close" state="pressed" draw_ops="close_unfocused_pressed"/> <button function="maximize" state="normal" draw_ops="maximize_unfocused"/> <button function="maximize" state="prelight" draw_ops="maximize_unfocused_prelight"/> <button function="maximize" state="pressed" draw_ops="maximize_unfocused_pressed"/> <button function="minimize" state="normal" draw_ops="minimize_unfocused"/> <button function="minimize" state="prelight" draw_ops="minimize_unfocused_prelight"/> <button function="minimize" state="pressed" draw_ops="minimize_unfocused_pressed"/> <button function="menu" state="normal" draw_ops="menu_unfocused" /> <button function="menu" state="prelight" draw_ops="menu_unfocused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_unfocused_pressed" /> <button function="shade" state="normal"><draw_ops></draw_ops></button> <button function="shade" state="pressed"><draw_ops></draw_ops></button> <button function="unshade" state="normal"><draw_ops></draw_ops></button> <button function="unshade" state="pressed"><draw_ops></draw_ops></button> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="modal_dialog_focused" geometry="modal"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="titlebar" draw_ops="titlebar_focused" /> <piece position="title" draw_ops="title_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_focused" /> <button function="unshade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button><button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="modal_dialog_unfocused" geometry="modal"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="titlebar" draw_ops="titlebar_focused" /> <piece position="title" draw_ops="title_unfocused" /> <button function="close" state="normal" draw_ops="close_unfocused"/> <button function="close" state="prelight" draw_ops="close_unfocused_prelight"/> <button function="close" state="pressed" draw_ops="close_unfocused_pressed"/> <button function="maximize" state="normal" draw_ops="maximize_unfocused"/> <button function="maximize" state="prelight" draw_ops="maximize_unfocused_prelight"/> <button function="maximize" state="pressed" draw_ops="maximize_unfocused_pressed"/> <button function="minimize" state="normal" draw_ops="minimize_unfocused"/> <button function="minimize" state="prelight" draw_ops="minimize_unfocused_prelight"/> <button function="minimize" state="pressed" draw_ops="minimize_unfocused_pressed"/> <button function="menu" state="normal" draw_ops="menu_unfocused" /> <button function="menu" state="prelight" draw_ops="menu_unfocused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_unfocused_pressed" /> <button function="shade" state="normal" draw_ops="shade_unfocused" /> <button function="shade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_unfocused" /> <button function="unshade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="utility_focused" geometry="small"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="titlebar" draw_ops="titlebar_small_focused" /> <piece position="title" draw_ops="title_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_focused" /> <button function="unshade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="utility_unfocused" geometry="small_unfocused"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="titlebar" draw_ops="titlebar_small_unfocused" /> <piece position="title" draw_ops="title_unfocused" /> <button function="close" state="normal" draw_ops="close_unfocused"/> <button function="close" state="prelight" draw_ops="close_unfocused_prelight"/> <button function="close" state="pressed" draw_ops="close_unfocused_pressed"/> <button function="maximize" state="normal" draw_ops="maximize_unfocused"/> <button function="maximize" state="prelight" draw_ops="maximize_unfocused_prelight"/> <button function="maximize" state="pressed" draw_ops="maximize_unfocused_pressed"/> <button function="minimize" state="normal" draw_ops="minimize_unfocused"/> <button function="minimize" state="prelight" draw_ops="minimize_unfocused_prelight"/> <button function="minimize" state="pressed" draw_ops="minimize_unfocused_pressed"/> <button function="menu" state="normal" draw_ops="menu_unfocused" /> <button function="menu" state="prelight" draw_ops="menu_unfocused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_unfocused_pressed" /> <button function="shade" state="normal" draw_ops="shade_unfocused" /> <button function="shade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_unfocused" /> <button function="unshade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="border_focused" geometry="borderless"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="overlay" draw_ops="border_focused" /> <button function="close" state="normal"><draw_ops></draw_ops></button> <button function="close" state="pressed"><draw_ops></draw_ops></button> <button function="maximize" state="normal"><draw_ops></draw_ops></button> <button function="maximize" state="pressed"><draw_ops></draw_ops></button> <button function="minimize" state="normal"><draw_ops></draw_ops></button> <button function="minimize" state="pressed"><draw_ops></draw_ops></button> <button function="menu" state="normal"><draw_ops></draw_ops></button> <button function="menu" state="pressed"><draw_ops></draw_ops></button> <button function="shade" state="normal"><draw_ops></draw_ops></button> <button function="shade" state="pressed"><draw_ops></draw_ops></button> <button function="unshade" state="normal"><draw_ops></draw_ops></button> <button function="unshade" state="pressed"><draw_ops></draw_ops></button> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="border_unfocused" geometry="borderless"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="overlay" draw_ops="border_unfocused" /> <button function="close" state="normal"><draw_ops></draw_ops></button> <button function="close" state="pressed"><draw_ops></draw_ops></button> <button function="maximize" state="normal"><draw_ops></draw_ops></button> <button function="maximize" state="pressed"><draw_ops></draw_ops></button> <button function="minimize" state="normal"><draw_ops></draw_ops></button> <button function="minimize" state="pressed"><draw_ops></draw_ops></button> <button function="menu" state="normal"><draw_ops></draw_ops></button> <button function="menu" state="pressed"><draw_ops></draw_ops></button> <button function="shade" state="normal"><draw_ops></draw_ops></button> <button function="shade" state="pressed"><draw_ops></draw_ops></button> <button function="unshade" state="normal"><draw_ops></draw_ops></button> <button function="unshade" state="pressed"><draw_ops></draw_ops></button> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <!-- placeholder for unimplementated styles--> <frame_style name="blank" geometry="normal"> <button function="close" state="normal"><draw_ops></draw_ops></button> <button function="close" state="pressed"><draw_ops></draw_ops></button> <button function="maximize" state="normal"><draw_ops></draw_ops></button> <button function="maximize" state="pressed"><draw_ops></draw_ops></button> <button function="minimize" state="normal"><draw_ops></draw_ops></button> <button function="minimize" state="pressed"><draw_ops></draw_ops></button> <button function="menu" state="normal"><draw_ops></draw_ops></button> <button function="menu" state="pressed"><draw_ops></draw_ops></button> <button function="shade" state="normal"><draw_ops></draw_ops></button> <button function="shade" state="pressed"><draw_ops></draw_ops></button> <button function="unshade" state="normal"><draw_ops></draw_ops></button> <button function="unshade" state="pressed"><draw_ops></draw_ops></button> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <!-- frame style sets --> <frame_style_set name="normal_style_set"> <frame focus="yes" state="normal" resize="both" style="normal_focused"/> <frame focus="no" state="normal" resize="both" style="normal_unfocused"/> <frame focus="yes" state="maximized" style="normal_max_focused"/> <frame focus="no" state="maximized" style="normal_max_unfocused"/> <frame focus="yes" state="shaded" style="normal_focused"/> <frame focus="no" state="shaded" style="normal_unfocused"/> <frame focus="yes" state="maximized_and_shaded" style="normal_max_shaded_focused"/> <frame focus="no" state="maximized_and_shaded" style="normal_max_shaded_unfocused"/> </frame_style_set> <frame_style_set name="dialog_style_set"> <frame focus="yes" state="normal" resize="both" style="dialog_focused"/> <frame focus="no" state="normal" resize="both" style="dialog_unfocused"/> <frame focus="yes" state="maximized" style="blank"/> <frame focus="no" state="maximized" style="blank"/> <frame focus="yes" state="shaded" style="dialog_focused"/> <frame focus="no" state="shaded" style="dialog_unfocused"/> <frame focus="yes" state="maximized_and_shaded" style="blank"/> <frame focus="no" state="maximized_and_shaded" style="blank"/> </frame_style_set> <frame_style_set name="modal_dialog_style_set"> <frame focus="yes" state="normal" resize="both" style="modal_dialog_focused"/> <frame focus="no" state="normal" resize="both" style="modal_dialog_unfocused"/> <frame focus="yes" state="maximized" style="blank"/> <frame focus="no" state="maximized" style="blank"/> <frame focus="yes" state="shaded" style="modal_dialog_focused"/> <frame focus="no" state="shaded" style="modal_dialog_unfocused"/> <frame focus="yes" state="maximized_and_shaded" style="blank"/> <frame focus="no" state="maximized_and_shaded" style="blank"/> </frame_style_set> <frame_style_set name="utility_style_set"> <frame focus="yes" state="normal" resize="both" style="utility_focused"/> <frame focus="no" state="normal" resize="both" style="utility_unfocused"/> <frame focus="yes" state="maximized" style="blank"/> <frame focus="no" state="maximized" style="blank"/> <frame focus="yes" state="shaded" style="utility_focused"/> <frame focus="no" state="shaded" style="utility_unfocused"/> <frame focus="yes" state="maximized_and_shaded" style="blank"/> <frame focus="no" state="maximized_and_shaded" style="blank"/> </frame_style_set> <frame_style_set name="border_style_set"> <frame focus="yes" state="normal" resize="both" style="border_focused"/> <frame focus="no" state="normal" resize="both" style="border_unfocused"/> <frame focus="yes" state="maximized" style="blank"/> <frame focus="no" state="maximized" style="blank"/> <frame focus="yes" state="shaded" style="blank"/> <frame focus="no" state="shaded" style="blank"/> <frame focus="yes" state="maximized_and_shaded" style="blank"/> <frame focus="no" state="maximized_and_shaded" style="blank"/> </frame_style_set> <!-- windows --> <window type="normal" style_set="normal_style_set"/> <window type="dialog" style_set="dialog_style_set"/> <window type="modal_dialog" style_set="modal_dialog_style_set"/> <window type="menu" style_set="utility_style_set"/> <window type="utility" style_set="utility_style_set"/> <window type="border" style_set="border_style_set"/> </metacity_theme> ================================================ FILE: common/metacity-1/metacity-theme-2-dark.xml ================================================ <?xml version="1.0"?> <metacity_theme> <info> <name>Arc</name> <author>horst3180</author> <copyright>horst3180</copyright> <date>2015</date> <description>Arc Metacity theme</description> </info> <!-- meaningfull constants --> <constant name="C_title_focused" value="#afb8c6" /> <constant name="C_title_unfocused" value="#8a939f" /> <constant name="C_wm_bg_focused" value="#2f343f" /> <constant name="C_wm_bg_unfocused" value="#2f343f" /> <constant name="C_wm_highlight" value="#353a48" /> <!-- window button colors --> <!-- close --> <constant name="C_button_close_bg_focused" value="#cc575d" /> <constant name="C_button_close_bg_hover" value="#d7787d" /> <constant name="C_button_close_bg_active" value="#be3841" /> <constant name="C_icon_close_bg" value="#2f343f" /> <!-- minimize, maximize --> <constant name="C_button_bg_hover" value="#454C5C" /> <constant name="C_button_bg_active" value="#5294e2" /> <constant name="C_button_border_hover" value="#262932" /> <constant name="C_icon_bg_focused" value="#90939B" /> <constant name="C_icon_bg_unfocused" value="#666A74" /> <constant name="C_icon_bg_hover" value="#C4C7CC" /> <constant name="C_icon_bg_active" value="#5294e2" /> <!-- geometries --> <frame_geometry name="normal" title_scale="medium" rounded_top_left="1" rounded_top_right="1"> <distance name="left_width" value="1" /> <distance name="right_width" value="1" /> <distance name="bottom_height" value="3" /> <distance name="left_titlebar_edge" value="2"/> <distance name="right_titlebar_edge" value="2"/> <distance name="title_vertical_pad" value="3"/> <border name="title_border" left="10" right="10" top="3" bottom="3"/> <border name="button_border" left="3" right="3" top="0" bottom="0"/> <aspect_ratio name="button" value="1.0" /> </frame_geometry> <frame_geometry name="normal_unfocused" title_scale="medium" rounded_top_left="1" rounded_top_right="1" parent="normal"> </frame_geometry> <frame_geometry name="max" title_scale="medium" parent="normal" rounded_top_left="false" rounded_top_right="false"> <distance name="left_width" value="0" /> <distance name="right_width" value="0" /> <distance name="bottom_height" value="0" /> <distance name="left_titlebar_edge" value="0"/> <distance name="right_titlebar_edge" value="0"/> <distance name="title_vertical_pad" value="2"/> <!-- This needs to be 1 less then the title_vertical_pad on normal state or you'll have bigger buttons --> <distance name="bottom_height" value="0" /> </frame_geometry> <frame_geometry name="small" title_scale="small" parent="normal" hide_buttons="true" rounded_top_left="1" rounded_top_right="1"> <distance name="title_vertical_pad" value="7"/> <border name="title_border" left="10" right="10" top="0" bottom="1"/> </frame_geometry> <frame_geometry name="small_unfocused" parent="small"> <distance name="left_titlebar_edge" value="1"/> <distance name="right_titlebar_edge" value="1"/> </frame_geometry> <frame_geometry name="borderless" has_title="false" rounded_top_left="false" rounded_top_right="false" parent="normal" > <distance name="left_width" value="0" /> <distance name="right_width" value="0" /> <distance name="bottom_height" value="0" /> <distance name="title_vertical_pad" value="0" /> <border name="title_border" left="10" right="10" top="0" bottom="0" /> </frame_geometry> <frame_geometry name="modal" title_scale="small" hide_buttons="true" rounded_top_left="1" rounded_top_right="1" parent="small"> <distance name="title_vertical_pad" value="5"/> </frame_geometry> <!-- drawing operations --> <!-- title --> <draw_ops name="title_focused"> <title x="(0 `max` ((width - title_width) / 2)) + 2" y="(0 `max` ((height - title_height) / 2)) + 1" color="C_title_focused" /> </draw_ops> <draw_ops name="title_unfocused"> <title x="(0 `max` ((width - title_width) / 2)) + 2" y="(0 `max` ((height - title_height) / 2)) + 1" color="C_title_unfocused"/> </draw_ops> <!-- window decorations --> <draw_ops name="entire_background_focused"> <rectangle color="C_wm_bg_focused" x="0" y="0" width="width" height="height" filled="true" /> </draw_ops> <draw_ops name="entire_background_unfocused"> <rectangle color="C_wm_bg_unfocused" x="0" y="0" width="width" height="height" filled="true" /> </draw_ops> <draw_ops name="titlebar_focused"> <rectangle color="C_wm_bg_focused" x="0" y="0" width="width" height="height" filled="true" /> <rectangle color="C_wm_highlight" x="0" y="0" width="width" height="1" filled="true" /> </draw_ops> <draw_ops name="titlebar_unfocused"> <rectangle color="C_wm_bg_unfocused" x="0" y="0" width="width" height="height" filled="true" /> <rectangle color="C_wm_highlight" x="0" y="0" width="width" height="1" filled="true" /> </draw_ops> <draw_ops name="titlebar_max"> </draw_ops> <draw_ops name="titlebar_small_focused"> </draw_ops> <draw_ops name="titlebar_small_unfocused"> </draw_ops> <draw_ops name="border_focused"> <rectangle color="C_wm_bg_focused" x="0" y="0" width="width" height="height" filled="false" /> </draw_ops> <draw_ops name="border_unfocused"> <rectangle color="C_wm_bg_unfocused" x="0" y="0" width="width" height="height" filled="false" /> </draw_ops> <!--close--> <draw_ops name="close_focused"> <image filename="button-bg.svg" colorize="C_button_close_bg_focused" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="close-icon.svg" colorize="C_icon_close_bg" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="close_focused_pressed"> <image filename="button-bg.svg" colorize="C_button_close_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="close-icon.svg" colorize="C_icon_close_bg" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="close_focused_prelight"> <image filename="button-bg.svg" colorize="C_button_close_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="close-icon.svg" colorize="C_icon_close_bg" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="close_unfocused"> <image filename="button-bg.svg" colorize="C_icon_bg_unfocused" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="close-icon.svg" colorize="C_icon_close_bg" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="close_unfocused_prelight"> <image filename="button-bg.svg" colorize="C_button_close_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="close-icon.svg" colorize="C_icon_close_bg" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="close_unfocused_pressed"> <image filename="button-bg.svg" colorize="C_button_close_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="close-icon.svg" colorize="C_icon_close_bg" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <!--maximize--> <draw_ops name="maximize_focused"> <image filename="max-icon.svg" colorize="C_icon_bg_focused" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="maximize_focused_pressed"> <image filename="button-bg.svg" colorize="C_button_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="max-icon.svg" colorize="C_icon_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="maximize_focused_prelight"> <image filename="button-bg.svg" colorize="C_button_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="button-border.svg" colorize="C_button_border_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="max-icon.svg" colorize="C_icon_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="maximize_unfocused"> <image filename="max-icon.svg" colorize="C_icon_bg_unfocused" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="maximize_unfocused_prelight"> <image filename="button-bg.svg" colorize="C_button_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="button-border.svg" colorize="C_button_border_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="max-icon.svg" colorize="C_icon_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="maximize_unfocused_pressed"> <image filename="button-bg.svg" colorize="C_button_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="max-icon.svg" colorize="C_icon_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <!--minimize--> <draw_ops name="minimize_focused"> <image filename="min-icon.svg" colorize="C_icon_bg_focused" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="minimize_focused_pressed"> <image filename="button-bg.svg" colorize="C_button_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="min-icon.svg" colorize="C_icon_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="minimize_focused_prelight"> <image filename="button-bg.svg" colorize="C_button_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="button-border.svg" colorize="C_button_border_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="min-icon.svg" colorize="C_icon_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="minimize_unfocused"> <image filename="min-icon.svg" colorize="C_icon_bg_unfocused" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="minimize_unfocused_prelight"> <image filename="button-bg.svg" colorize="C_button_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="button-border.svg" colorize="C_button_border_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="min-icon.svg" colorize="C_icon_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="minimize_unfocused_pressed"> <image filename="button-bg.svg" colorize="C_button_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="min-icon.svg" colorize="C_icon_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <!--Todo--> <draw_ops name="menu_focused"></draw_ops> <draw_ops name="menu_focused_pressed"></draw_ops> <draw_ops name="menu_unfocused"></draw_ops> <draw_ops name="menu_unfocused_prelight"></draw_ops> <draw_ops name="menu_unfocused_pressed"></draw_ops> <draw_ops name="shade_focused"></draw_ops> <draw_ops name="shade_focused_pressed"></draw_ops> <draw_ops name="shade_unfocused"></draw_ops> <draw_ops name="shade_unfocused_prelight"></draw_ops> <draw_ops name="shade_unfocused_pressed"></draw_ops> <!-- frame styles --> <frame_style name="normal_focused" geometry="normal"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="titlebar" draw_ops="titlebar_focused" /> <piece position="title" draw_ops="title_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_focused" /> <button function="unshade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="normal_unfocused" geometry="normal_unfocused"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="titlebar" draw_ops="titlebar_unfocused" /> <piece position="title" draw_ops="title_unfocused" /> <button function="close" state="normal" draw_ops="close_unfocused"/> <button function="close" state="prelight" draw_ops="close_unfocused_prelight"/> <button function="close" state="pressed" draw_ops="close_unfocused_pressed"/> <button function="maximize" state="normal" draw_ops="maximize_unfocused"/> <button function="maximize" state="prelight" draw_ops="maximize_unfocused_prelight"/> <button function="maximize" state="pressed" draw_ops="maximize_unfocused_pressed"/> <button function="minimize" state="normal" draw_ops="minimize_unfocused"/> <button function="minimize" state="prelight" draw_ops="minimize_unfocused_prelight"/> <button function="minimize" state="pressed" draw_ops="minimize_unfocused_pressed"/> <button function="menu" state="normal" draw_ops="menu_unfocused" /> <button function="menu" state="prelight" draw_ops="menu_unfocused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_unfocused_pressed" /> <button function="shade" state="normal" draw_ops="shade_unfocused" /> <button function="shade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_unfocused" /> <button function="unshade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="normal_max_focused" geometry="max"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="titlebar" draw_ops="titlebar_max" /> <piece position="title" draw_ops="title_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_focused" /> <button function="unshade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="normal_max_unfocused" geometry="max"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="titlebar" draw_ops="titlebar_max" /> <piece position="title" draw_ops="title_unfocused" /> <button function="close" state="normal" draw_ops="close_unfocused"/> <button function="close" state="prelight" draw_ops="close_unfocused_prelight"/> <button function="close" state="pressed" draw_ops="close_unfocused_pressed"/> <button function="maximize" state="normal" draw_ops="maximize_unfocused"/> <button function="maximize" state="prelight" draw_ops="maximize_unfocused_prelight"/> <button function="maximize" state="pressed" draw_ops="maximize_unfocused_pressed"/> <button function="minimize" state="normal" draw_ops="minimize_unfocused"/> <button function="minimize" state="prelight" draw_ops="minimize_unfocused_prelight"/> <button function="minimize" state="pressed" draw_ops="minimize_unfocused_pressed"/> <button function="menu" state="normal" draw_ops="menu_unfocused" /> <button function="menu" state="prelight" draw_ops="menu_unfocused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_unfocused_pressed" /> <button function="shade" state="normal" draw_ops="shade_unfocused" /> <button function="shade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_unfocused" /> <button function="unshade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="normal_max_shaded_focused" geometry="max"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="titlebar" draw_ops="titlebar_max" /> <piece position="title" draw_ops="title_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_focused" /> <button function="unshade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="normal_max_shaded_unfocused" geometry="max"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="titlebar" draw_ops="titlebar_max" /> <piece position="title" draw_ops="title_unfocused" /> <button function="close" state="normal" draw_ops="close_unfocused"/> <button function="close" state="prelight" draw_ops="close_unfocused_prelight"/> <button function="close" state="pressed" draw_ops="close_unfocused_pressed"/> <button function="maximize" state="normal" draw_ops="maximize_unfocused"/> <button function="maximize" state="prelight" draw_ops="maximize_unfocused_prelight"/> <button function="maximize" state="pressed" draw_ops="maximize_unfocused_pressed"/> <button function="minimize" state="normal" draw_ops="minimize_unfocused"/> <button function="minimize" state="prelight" draw_ops="minimize_unfocused_prelight"/> <button function="minimize" state="pressed" draw_ops="minimize_unfocused_pressed"/> <button function="menu" state="normal" draw_ops="menu_unfocused" /> <button function="menu" state="prelight" draw_ops="menu_unfocused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_unfocused_pressed" /> <button function="shade" state="normal" draw_ops="shade_unfocused" /> <button function="shade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_unfocused" /> <button function="unshade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="dialog_focused" geometry="normal"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="titlebar" draw_ops="titlebar_focused" /> <piece position="title" draw_ops="title_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_focused" /> <button function="unshade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="dialog_unfocused" geometry="normal"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="titlebar" draw_ops="titlebar_unfocused" /> <piece position="title" draw_ops="title_unfocused" /> <button function="close" state="normal" draw_ops="close_unfocused"/> <button function="close" state="prelight" draw_ops="close_unfocused_prelight"/> <button function="close" state="pressed" draw_ops="close_unfocused_pressed"/> <button function="maximize" state="normal" draw_ops="maximize_unfocused"/> <button function="maximize" state="prelight" draw_ops="maximize_unfocused_prelight"/> <button function="maximize" state="pressed" draw_ops="maximize_unfocused_pressed"/> <button function="minimize" state="normal" draw_ops="minimize_unfocused"/> <button function="minimize" state="prelight" draw_ops="minimize_unfocused_prelight"/> <button function="minimize" state="pressed" draw_ops="minimize_unfocused_pressed"/> <button function="menu" state="normal" draw_ops="menu_unfocused" /> <button function="menu" state="prelight" draw_ops="menu_unfocused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_unfocused_pressed" /> <button function="shade" state="normal"><draw_ops></draw_ops></button> <button function="shade" state="pressed"><draw_ops></draw_ops></button> <button function="unshade" state="normal"><draw_ops></draw_ops></button> <button function="unshade" state="pressed"><draw_ops></draw_ops></button> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="modal_dialog_focused" geometry="normal"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="titlebar" draw_ops="titlebar_focused" /> <piece position="title" draw_ops="title_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_focused" /> <button function="unshade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button><button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="modal_dialog_unfocused" geometry="normal"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="titlebar" draw_ops="titlebar_focused" /> <piece position="title" draw_ops="title_unfocused" /> <button function="close" state="normal" draw_ops="close_unfocused"/> <button function="close" state="prelight" draw_ops="close_unfocused_prelight"/> <button function="close" state="pressed" draw_ops="close_unfocused_pressed"/> <button function="maximize" state="normal" draw_ops="maximize_unfocused"/> <button function="maximize" state="prelight" draw_ops="maximize_unfocused_prelight"/> <button function="maximize" state="pressed" draw_ops="maximize_unfocused_pressed"/> <button function="minimize" state="normal" draw_ops="minimize_unfocused"/> <button function="minimize" state="prelight" draw_ops="minimize_unfocused_prelight"/> <button function="minimize" state="pressed" draw_ops="minimize_unfocused_pressed"/> <button function="menu" state="normal" draw_ops="menu_unfocused" /> <button function="menu" state="prelight" draw_ops="menu_unfocused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_unfocused_pressed" /> <button function="shade" state="normal" draw_ops="shade_unfocused" /> <button function="shade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_unfocused" /> <button function="unshade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="utility_focused" geometry="small"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="titlebar" draw_ops="titlebar_small_focused" /> <piece position="title" draw_ops="title_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_focused" /> <button function="unshade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="utility_unfocused" geometry="small_unfocused"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="titlebar" draw_ops="titlebar_small_unfocused" /> <piece position="title" draw_ops="title_unfocused" /> <button function="close" state="normal" draw_ops="close_unfocused"/> <button function="close" state="prelight" draw_ops="close_unfocused_prelight"/> <button function="close" state="pressed" draw_ops="close_unfocused_pressed"/> <button function="maximize" state="normal" draw_ops="maximize_unfocused"/> <button function="maximize" state="prelight" draw_ops="maximize_unfocused_prelight"/> <button function="maximize" state="pressed" draw_ops="maximize_unfocused_pressed"/> <button function="minimize" state="normal" draw_ops="minimize_unfocused"/> <button function="minimize" state="prelight" draw_ops="minimize_unfocused_prelight"/> <button function="minimize" state="pressed" draw_ops="minimize_unfocused_pressed"/> <button function="menu" state="normal" draw_ops="menu_unfocused" /> <button function="menu" state="prelight" draw_ops="menu_unfocused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_unfocused_pressed" /> <button function="shade" state="normal" draw_ops="shade_unfocused" /> <button function="shade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_unfocused" /> <button function="unshade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="border_focused" geometry="borderless"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="overlay" draw_ops="border_focused" /> <button function="close" state="normal"><draw_ops></draw_ops></button> <button function="close" state="pressed"><draw_ops></draw_ops></button> <button function="maximize" state="normal"><draw_ops></draw_ops></button> <button function="maximize" state="pressed"><draw_ops></draw_ops></button> <button function="minimize" state="normal"><draw_ops></draw_ops></button> <button function="minimize" state="pressed"><draw_ops></draw_ops></button> <button function="menu" state="normal"><draw_ops></draw_ops></button> <button function="menu" state="pressed"><draw_ops></draw_ops></button> <button function="shade" state="normal"><draw_ops></draw_ops></button> <button function="shade" state="pressed"><draw_ops></draw_ops></button> <button function="unshade" state="normal"><draw_ops></draw_ops></button> <button function="unshade" state="pressed"><draw_ops></draw_ops></button> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="border_unfocused" geometry="borderless"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="overlay" draw_ops="border_unfocused" /> <button function="close" state="normal"><draw_ops></draw_ops></button> <button function="close" state="pressed"><draw_ops></draw_ops></button> <button function="maximize" state="normal"><draw_ops></draw_ops></button> <button function="maximize" state="pressed"><draw_ops></draw_ops></button> <button function="minimize" state="normal"><draw_ops></draw_ops></button> <button function="minimize" state="pressed"><draw_ops></draw_ops></button> <button function="menu" state="normal"><draw_ops></draw_ops></button> <button function="menu" state="pressed"><draw_ops></draw_ops></button> <button function="shade" state="normal"><draw_ops></draw_ops></button> <button function="shade" state="pressed"><draw_ops></draw_ops></button> <button function="unshade" state="normal"><draw_ops></draw_ops></button> <button function="unshade" state="pressed"><draw_ops></draw_ops></button> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <!-- placeholder for unimplementated styles--> <frame_style name="blank" geometry="normal"> <button function="close" state="normal"><draw_ops></draw_ops></button> <button function="close" state="pressed"><draw_ops></draw_ops></button> <button function="maximize" state="normal"><draw_ops></draw_ops></button> <button function="maximize" state="pressed"><draw_ops></draw_ops></button> <button function="minimize" state="normal"><draw_ops></draw_ops></button> <button function="minimize" state="pressed"><draw_ops></draw_ops></button> <button function="menu" state="normal"><draw_ops></draw_ops></button> <button function="menu" state="pressed"><draw_ops></draw_ops></button> <button function="shade" state="normal"><draw_ops></draw_ops></button> <button function="shade" state="pressed"><draw_ops></draw_ops></button> <button function="unshade" state="normal"><draw_ops></draw_ops></button> <button function="unshade" state="pressed"><draw_ops></draw_ops></button> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <!-- frame style sets --> <frame_style_set name="normal_style_set"> <frame focus="yes" state="normal" resize="both" style="normal_focused"/> <frame focus="no" state="normal" resize="both" style="normal_unfocused"/> <frame focus="yes" state="maximized" style="normal_max_focused"/> <frame focus="no" state="maximized" style="normal_max_unfocused"/> <frame focus="yes" state="shaded" style="normal_focused"/> <frame focus="no" state="shaded" style="normal_unfocused"/> <frame focus="yes" state="maximized_and_shaded" style="normal_max_shaded_focused"/> <frame focus="no" state="maximized_and_shaded" style="normal_max_shaded_unfocused"/> </frame_style_set> <frame_style_set name="dialog_style_set"> <frame focus="yes" state="normal" resize="both" style="dialog_focused"/> <frame focus="no" state="normal" resize="both" style="dialog_unfocused"/> <frame focus="yes" state="maximized" style="blank"/> <frame focus="no" state="maximized" style="blank"/> <frame focus="yes" state="shaded" style="dialog_focused"/> <frame focus="no" state="shaded" style="dialog_unfocused"/> <frame focus="yes" state="maximized_and_shaded" style="blank"/> <frame focus="no" state="maximized_and_shaded" style="blank"/> </frame_style_set> <frame_style_set name="modal_dialog_style_set"> <frame focus="yes" state="normal" resize="both" style="modal_dialog_focused"/> <frame focus="no" state="normal" resize="both" style="modal_dialog_unfocused"/> <frame focus="yes" state="maximized" style="blank"/> <frame focus="no" state="maximized" style="blank"/> <frame focus="yes" state="shaded" style="modal_dialog_focused"/> <frame focus="no" state="shaded" style="modal_dialog_unfocused"/> <frame focus="yes" state="maximized_and_shaded" style="blank"/> <frame focus="no" state="maximized_and_shaded" style="blank"/> </frame_style_set> <frame_style_set name="utility_style_set"> <frame focus="yes" state="normal" resize="both" style="utility_focused"/> <frame focus="no" state="normal" resize="both" style="utility_unfocused"/> <frame focus="yes" state="maximized" style="blank"/> <frame focus="no" state="maximized" style="blank"/> <frame focus="yes" state="shaded" style="utility_focused"/> <frame focus="no" state="shaded" style="utility_unfocused"/> <frame focus="yes" state="maximized_and_shaded" style="blank"/> <frame focus="no" state="maximized_and_shaded" style="blank"/> </frame_style_set> <frame_style_set name="border_style_set"> <frame focus="yes" state="normal" resize="both" style="border_focused"/> <frame focus="no" state="normal" resize="both" style="border_unfocused"/> <frame focus="yes" state="maximized" style="blank"/> <frame focus="no" state="maximized" style="blank"/> <frame focus="yes" state="shaded" style="blank"/> <frame focus="no" state="shaded" style="blank"/> <frame focus="yes" state="maximized_and_shaded" style="blank"/> <frame focus="no" state="maximized_and_shaded" style="blank"/> </frame_style_set> <!-- windows --> <window type="normal" style_set="normal_style_set"/> <window type="dialog" style_set="dialog_style_set"/> <window type="modal_dialog" style_set="modal_dialog_style_set"/> <window type="menu" style_set="utility_style_set"/> <window type="utility" style_set="utility_style_set"/> <window type="border" style_set="border_style_set"/> </metacity_theme> ================================================ FILE: common/metacity-1/metacity-theme-2.xml ================================================ <?xml version="1.0"?> <metacity_theme> <info> <name>Arc</name> <author>horst3180</author> <copyright>horst3180</copyright> <date>2015</date> <description>Arc Metacity theme</description> </info> <!-- meaningfull constants --> <constant name="C_title_focused" value="#70788d" /> <constant name="C_title_unfocused" value="#979dac" /> <constant name="C_wm_bg_focused" value="#e7e8eb" /> <constant name="C_wm_bg_unfocused" value="#e7e8eb" /> <constant name="C_wm_highlight" value="#eeeff1" /> <!-- window button colors --> <!-- close --> <constant name="C_button_close_bg_focused" value="#f46067" /> <constant name="C_button_close_bg_hover" value="#f68086" /> <constant name="C_button_close_bg_active" value="#f13039" /> <constant name="C_icon_close_bg" value="#F8F8F9" /> <!-- minimize, maximize --> <constant name="C_button_bg_hover" value="#fdfdfd" /> <constant name="C_button_bg_active" value="#5294e2" /> <constant name="C_button_border_hover" value="#D1D3DA" /> <constant name="C_icon_bg_focused" value="#90949E" /> <constant name="C_icon_bg_unfocused" value="#B6B8C0" /> <constant name="C_icon_bg_hover" value="#7A7F8B" /> <constant name="C_icon_bg_active" value="#5294e2" /> <!-- geometries --> <frame_geometry name="normal" title_scale="medium" rounded_top_left="1" rounded_top_right="1"> <distance name="left_width" value="1" /> <distance name="right_width" value="1" /> <distance name="bottom_height" value="3" /> <distance name="left_titlebar_edge" value="2"/> <distance name="right_titlebar_edge" value="2"/> <distance name="title_vertical_pad" value="3"/> <border name="title_border" left="10" right="10" top="3" bottom="3"/> <border name="button_border" left="3" right="3" top="0" bottom="0"/> <aspect_ratio name="button" value="1.0" /> </frame_geometry> <frame_geometry name="normal_unfocused" title_scale="medium" rounded_top_left="1" rounded_top_right="1" parent="normal"> </frame_geometry> <frame_geometry name="max" title_scale="medium" parent="normal" rounded_top_left="false" rounded_top_right="false"> <distance name="left_width" value="0" /> <distance name="right_width" value="0" /> <distance name="bottom_height" value="0" /> <distance name="left_titlebar_edge" value="0"/> <distance name="right_titlebar_edge" value="0"/> <distance name="title_vertical_pad" value="2"/> <!-- This needs to be 1 less then the title_vertical_pad on normal state or you'll have bigger buttons --> <distance name="bottom_height" value="0" /> </frame_geometry> <frame_geometry name="small" title_scale="small" parent="normal" hide_buttons="true" rounded_top_left="1" rounded_top_right="1"> <distance name="title_vertical_pad" value="7"/> <border name="title_border" left="10" right="10" top="0" bottom="1"/> </frame_geometry> <frame_geometry name="small_unfocused" parent="small"> <distance name="left_titlebar_edge" value="1"/> <distance name="right_titlebar_edge" value="1"/> </frame_geometry> <frame_geometry name="borderless" has_title="false" rounded_top_left="false" rounded_top_right="false" parent="normal" > <distance name="left_width" value="0" /> <distance name="right_width" value="0" /> <distance name="bottom_height" value="0" /> <distance name="title_vertical_pad" value="0" /> <border name="title_border" left="10" right="10" top="0" bottom="0" /> </frame_geometry> <frame_geometry name="modal" title_scale="small" hide_buttons="false" rounded_top_left="1" rounded_top_right="1" parent="small"> <distance name="title_vertical_pad" value="5"/> </frame_geometry> <!-- drawing operations --> <!-- title --> <draw_ops name="title_focused"> <title x="(0 `max` ((width - title_width) / 2)) + 2" y="(0 `max` ((height - title_height) / 2)) + 1" color="C_title_focused" /> </draw_ops> <draw_ops name="title_unfocused"> <title x="(0 `max` ((width - title_width) / 2)) + 2" y="(0 `max` ((height - title_height) / 2)) + 1" color="C_title_unfocused"/> </draw_ops> <!-- window decorations --> <draw_ops name="entire_background_focused"> <rectangle color="C_wm_bg_focused" x="0" y="0" width="width" height="height" filled="true" /> </draw_ops> <draw_ops name="entire_background_unfocused"> <rectangle color="C_wm_bg_unfocused" x="0" y="0" width="width" height="height" filled="true" /> </draw_ops> <draw_ops name="titlebar_focused"> <rectangle color="C_wm_bg_focused" x="0" y="0" width="width" height="height" filled="true" /> <rectangle color="C_wm_highlight" x="0" y="0" width="width" height="1" filled="true" /> </draw_ops> <draw_ops name="titlebar_unfocused"> <rectangle color="C_wm_bg_unfocused" x="0" y="0" width="width" height="height" filled="true" /> <rectangle color="C_wm_highlight" x="0" y="0" width="width" height="1" filled="true" /> </draw_ops> <draw_ops name="titlebar_max"> </draw_ops> <draw_ops name="titlebar_small_focused"> </draw_ops> <draw_ops name="titlebar_small_unfocused"> </draw_ops> <draw_ops name="border_focused"> <rectangle color="C_wm_bg_focused" x="0" y="0" width="width" height="height" filled="false" /> </draw_ops> <draw_ops name="border_unfocused"> <rectangle color="C_wm_bg_unfocused" x="0" y="0" width="width" height="height" filled="false" /> </draw_ops> <!--close--> <draw_ops name="close_focused"> <image filename="button-bg.svg" colorize="C_button_close_bg_focused" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="close-icon.svg" colorize="C_icon_close_bg" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="close_focused_pressed"> <image filename="button-bg.svg" colorize="C_button_close_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="close-icon.svg" colorize="C_icon_close_bg" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="close_focused_prelight"> <image filename="button-bg.svg" colorize="C_button_close_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="close-icon.svg" colorize="C_icon_close_bg" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="close_unfocused"> <image filename="button-bg.svg" colorize="C_icon_bg_unfocused" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="close-icon.svg" colorize="C_icon_close_bg" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="close_unfocused_prelight"> <image filename="button-bg.svg" colorize="C_button_close_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="close-icon.svg" colorize="C_icon_close_bg" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="close_unfocused_pressed"> <image filename="button-bg.svg" colorize="C_button_close_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="close-icon.svg" colorize="C_icon_close_bg" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <!--maximize--> <draw_ops name="maximize_focused"> <image filename="max-icon.svg" colorize="C_icon_bg_focused" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="maximize_focused_pressed"> <image filename="button-bg.svg" colorize="C_button_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="max-icon.svg" colorize="C_icon_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="maximize_focused_prelight"> <image filename="button-bg.svg" colorize="C_button_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="button-border.svg" colorize="C_button_border_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="max-icon.svg" colorize="C_icon_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="maximize_unfocused"> <image filename="max-icon.svg" colorize="C_icon_bg_unfocused" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="maximize_unfocused_prelight"> <image filename="button-bg.svg" colorize="C_button_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="button-border.svg" colorize="C_button_border_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="max-icon.svg" colorize="C_icon_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="maximize_unfocused_pressed"> <image filename="button-bg.svg" colorize="C_button_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="max-icon.svg" colorize="C_icon_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <!--minimize--> <draw_ops name="minimize_focused"> <image filename="min-icon.svg" colorize="C_icon_bg_focused" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="minimize_focused_pressed"> <image filename="button-bg.svg" colorize="C_button_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="min-icon.svg" colorize="C_icon_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="minimize_focused_prelight"> <image filename="button-bg.svg" colorize="C_button_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="button-border.svg" colorize="C_button_border_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="min-icon.svg" colorize="C_icon_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="minimize_unfocused"> <image filename="min-icon.svg" colorize="C_icon_bg_unfocused" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="minimize_unfocused_prelight"> <image filename="button-bg.svg" colorize="C_button_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="button-border.svg" colorize="C_button_border_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="min-icon.svg" colorize="C_icon_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="minimize_unfocused_pressed"> <image filename="button-bg.svg" colorize="C_button_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="min-icon.svg" colorize="C_icon_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <!--Todo--> <draw_ops name="menu_focused"></draw_ops> <draw_ops name="menu_focused_pressed"></draw_ops> <draw_ops name="menu_unfocused"></draw_ops> <draw_ops name="menu_unfocused_prelight"></draw_ops> <draw_ops name="menu_unfocused_pressed"></draw_ops> <draw_ops name="shade_focused"></draw_ops> <draw_ops name="shade_focused_pressed"></draw_ops> <draw_ops name="shade_unfocused"></draw_ops> <draw_ops name="shade_unfocused_prelight"></draw_ops> <draw_ops name="shade_unfocused_pressed"></draw_ops> <!-- frame styles --> <frame_style name="normal_focused" geometry="normal"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="titlebar" draw_ops="titlebar_focused" /> <piece position="title" draw_ops="title_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_focused" /> <button function="unshade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="normal_unfocused" geometry="normal_unfocused"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="titlebar" draw_ops="titlebar_unfocused" /> <piece position="title" draw_ops="title_unfocused" /> <button function="close" state="normal" draw_ops="close_unfocused"/> <button function="close" state="prelight" draw_ops="close_unfocused_prelight"/> <button function="close" state="pressed" draw_ops="close_unfocused_pressed"/> <button function="maximize" state="normal" draw_ops="maximize_unfocused"/> <button function="maximize" state="prelight" draw_ops="maximize_unfocused_prelight"/> <button function="maximize" state="pressed" draw_ops="maximize_unfocused_pressed"/> <button function="minimize" state="normal" draw_ops="minimize_unfocused"/> <button function="minimize" state="prelight" draw_ops="minimize_unfocused_prelight"/> <button function="minimize" state="pressed" draw_ops="minimize_unfocused_pressed"/> <button function="menu" state="normal" draw_ops="menu_unfocused" /> <button function="menu" state="prelight" draw_ops="menu_unfocused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_unfocused_pressed" /> <button function="shade" state="normal" draw_ops="shade_unfocused" /> <button function="shade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_unfocused" /> <button function="unshade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="normal_max_focused" geometry="max"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="titlebar" draw_ops="titlebar_max" /> <piece position="title" draw_ops="title_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_focused" /> <button function="unshade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="normal_max_unfocused" geometry="max"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="titlebar" draw_ops="titlebar_max" /> <piece position="title" draw_ops="title_unfocused" /> <button function="close" state="normal" draw_ops="close_unfocused"/> <button function="close" state="prelight" draw_ops="close_unfocused_prelight"/> <button function="close" state="pressed" draw_ops="close_unfocused_pressed"/> <button function="maximize" state="normal" draw_ops="maximize_unfocused"/> <button function="maximize" state="prelight" draw_ops="maximize_unfocused_prelight"/> <button function="maximize" state="pressed" draw_ops="maximize_unfocused_pressed"/> <button function="minimize" state="normal" draw_ops="minimize_unfocused"/> <button function="minimize" state="prelight" draw_ops="minimize_unfocused_prelight"/> <button function="minimize" state="pressed" draw_ops="minimize_unfocused_pressed"/> <button function="menu" state="normal" draw_ops="menu_unfocused" /> <button function="menu" state="prelight" draw_ops="menu_unfocused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_unfocused_pressed" /> <button function="shade" state="normal" draw_ops="shade_unfocused" /> <button function="shade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_unfocused" /> <button function="unshade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="normal_max_shaded_focused" geometry="max"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="titlebar" draw_ops="titlebar_max" /> <piece position="title" draw_ops="title_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_focused" /> <button function="unshade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="normal_max_shaded_unfocused" geometry="max"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="titlebar" draw_ops="titlebar_max" /> <piece position="title" draw_ops="title_unfocused" /> <button function="close" state="normal" draw_ops="close_unfocused"/> <button function="close" state="prelight" draw_ops="close_unfocused_prelight"/> <button function="close" state="pressed" draw_ops="close_unfocused_pressed"/> <button function="maximize" state="normal" draw_ops="maximize_unfocused"/> <button function="maximize" state="prelight" draw_ops="maximize_unfocused_prelight"/> <button function="maximize" state="pressed" draw_ops="maximize_unfocused_pressed"/> <button function="minimize" state="normal" draw_ops="minimize_unfocused"/> <button function="minimize" state="prelight" draw_ops="minimize_unfocused_prelight"/> <button function="minimize" state="pressed" draw_ops="minimize_unfocused_pressed"/> <button function="menu" state="normal" draw_ops="menu_unfocused" /> <button function="menu" state="prelight" draw_ops="menu_unfocused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_unfocused_pressed" /> <button function="shade" state="normal" draw_ops="shade_unfocused" /> <button function="shade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_unfocused" /> <button function="unshade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="dialog_focused" geometry="normal"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="titlebar" draw_ops="titlebar_focused" /> <piece position="title" draw_ops="title_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_focused" /> <button function="unshade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="dialog_unfocused" geometry="normal"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="titlebar" draw_ops="titlebar_unfocused" /> <piece position="title" draw_ops="title_unfocused" /> <button function="close" state="normal" draw_ops="close_unfocused"/> <button function="close" state="prelight" draw_ops="close_unfocused_prelight"/> <button function="close" state="pressed" draw_ops="close_unfocused_pressed"/> <button function="maximize" state="normal" draw_ops="maximize_unfocused"/> <button function="maximize" state="prelight" draw_ops="maximize_unfocused_prelight"/> <button function="maximize" state="pressed" draw_ops="maximize_unfocused_pressed"/> <button function="minimize" state="normal" draw_ops="minimize_unfocused"/> <button function="minimize" state="prelight" draw_ops="minimize_unfocused_prelight"/> <button function="minimize" state="pressed" draw_ops="minimize_unfocused_pressed"/> <button function="menu" state="normal" draw_ops="menu_unfocused" /> <button function="menu" state="prelight" draw_ops="menu_unfocused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_unfocused_pressed" /> <button function="shade" state="normal"><draw_ops></draw_ops></button> <button function="shade" state="pressed"><draw_ops></draw_ops></button> <button function="unshade" state="normal"><draw_ops></draw_ops></button> <button function="unshade" state="pressed"><draw_ops></draw_ops></button> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="modal_dialog_focused" geometry="modal"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="titlebar" draw_ops="titlebar_focused" /> <piece position="title" draw_ops="title_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_focused" /> <button function="unshade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button><button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="modal_dialog_unfocused" geometry="modal"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="titlebar" draw_ops="titlebar_focused" /> <piece position="title" draw_ops="title_unfocused" /> <button function="close" state="normal" draw_ops="close_unfocused"/> <button function="close" state="prelight" draw_ops="close_unfocused_prelight"/> <button function="close" state="pressed" draw_ops="close_unfocused_pressed"/> <button function="maximize" state="normal" draw_ops="maximize_unfocused"/> <button function="maximize" state="prelight" draw_ops="maximize_unfocused_prelight"/> <button function="maximize" state="pressed" draw_ops="maximize_unfocused_pressed"/> <button function="minimize" state="normal" draw_ops="minimize_unfocused"/> <button function="minimize" state="prelight" draw_ops="minimize_unfocused_prelight"/> <button function="minimize" state="pressed" draw_ops="minimize_unfocused_pressed"/> <button function="menu" state="normal" draw_ops="menu_unfocused" /> <button function="menu" state="prelight" draw_ops="menu_unfocused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_unfocused_pressed" /> <button function="shade" state="normal" draw_ops="shade_unfocused" /> <button function="shade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_unfocused" /> <button function="unshade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="utility_focused" geometry="small"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="titlebar" draw_ops="titlebar_small_focused" /> <piece position="title" draw_ops="title_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_focused" /> <button function="unshade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="utility_unfocused" geometry="small_unfocused"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="titlebar" draw_ops="titlebar_small_unfocused" /> <piece position="title" draw_ops="title_unfocused" /> <button function="close" state="normal" draw_ops="close_unfocused"/> <button function="close" state="prelight" draw_ops="close_unfocused_prelight"/> <button function="close" state="pressed" draw_ops="close_unfocused_pressed"/> <button function="maximize" state="normal" draw_ops="maximize_unfocused"/> <button function="maximize" state="prelight" draw_ops="maximize_unfocused_prelight"/> <button function="maximize" state="pressed" draw_ops="maximize_unfocused_pressed"/> <button function="minimize" state="normal" draw_ops="minimize_unfocused"/> <button function="minimize" state="prelight" draw_ops="minimize_unfocused_prelight"/> <button function="minimize" state="pressed" draw_ops="minimize_unfocused_pressed"/> <button function="menu" state="normal" draw_ops="menu_unfocused" /> <button function="menu" state="prelight" draw_ops="menu_unfocused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_unfocused_pressed" /> <button function="shade" state="normal" draw_ops="shade_unfocused" /> <button function="shade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_unfocused" /> <button function="unshade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="border_focused" geometry="borderless"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="overlay" draw_ops="border_focused" /> <button function="close" state="normal"><draw_ops></draw_ops></button> <button function="close" state="pressed"><draw_ops></draw_ops></button> <button function="maximize" state="normal"><draw_ops></draw_ops></button> <button function="maximize" state="pressed"><draw_ops></draw_ops></button> <button function="minimize" state="normal"><draw_ops></draw_ops></button> <button function="minimize" state="pressed"><draw_ops></draw_ops></button> <button function="menu" state="normal"><draw_ops></draw_ops></button> <button function="menu" state="pressed"><draw_ops></draw_ops></button> <button function="shade" state="normal"><draw_ops></draw_ops></button> <button function="shade" state="pressed"><draw_ops></draw_ops></button> <button function="unshade" state="normal"><draw_ops></draw_ops></button> <button function="unshade" state="pressed"><draw_ops></draw_ops></button> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="border_unfocused" geometry="borderless"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="overlay" draw_ops="border_unfocused" /> <button function="close" state="normal"><draw_ops></draw_ops></button> <button function="close" state="pressed"><draw_ops></draw_ops></button> <button function="maximize" state="normal"><draw_ops></draw_ops></button> <button function="maximize" state="pressed"><draw_ops></draw_ops></button> <button function="minimize" state="normal"><draw_ops></draw_ops></button> <button function="minimize" state="pressed"><draw_ops></draw_ops></button> <button function="menu" state="normal"><draw_ops></draw_ops></button> <button function="menu" state="pressed"><draw_ops></draw_ops></button> <button function="shade" state="normal"><draw_ops></draw_ops></button> <button function="shade" state="pressed"><draw_ops></draw_ops></button> <button function="unshade" state="normal"><draw_ops></draw_ops></button> <button function="unshade" state="pressed"><draw_ops></draw_ops></button> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <!-- placeholder for unimplementated styles--> <frame_style name="blank" geometry="normal"> <button function="close" state="normal"><draw_ops></draw_ops></button> <button function="close" state="pressed"><draw_ops></draw_ops></button> <button function="maximize" state="normal"><draw_ops></draw_ops></button> <button function="maximize" state="pressed"><draw_ops></draw_ops></button> <button function="minimize" state="normal"><draw_ops></draw_ops></button> <button function="minimize" state="pressed"><draw_ops></draw_ops></button> <button function="menu" state="normal"><draw_ops></draw_ops></button> <button function="menu" state="pressed"><draw_ops></draw_ops></button> <button function="shade" state="normal"><draw_ops></draw_ops></button> <button function="shade" state="pressed"><draw_ops></draw_ops></button> <button function="unshade" state="normal"><draw_ops></draw_ops></button> <button function="unshade" state="pressed"><draw_ops></draw_ops></button> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <!-- frame style sets --> <frame_style_set name="normal_style_set"> <frame focus="yes" state="normal" resize="both" style="normal_focused"/> <frame focus="no" state="normal" resize="both" style="normal_unfocused"/> <frame focus="yes" state="maximized" style="normal_max_focused"/> <frame focus="no" state="maximized" style="normal_max_unfocused"/> <frame focus="yes" state="shaded" style="normal_focused"/> <frame focus="no" state="shaded" style="normal_unfocused"/> <frame focus="yes" state="maximized_and_shaded" style="normal_max_shaded_focused"/> <frame focus="no" state="maximized_and_shaded" style="normal_max_shaded_unfocused"/> </frame_style_set> <frame_style_set name="dialog_style_set"> <frame focus="yes" state="normal" resize="both" style="dialog_focused"/> <frame focus="no" state="normal" resize="both" style="dialog_unfocused"/> <frame focus="yes" state="maximized" style="blank"/> <frame focus="no" state="maximized" style="blank"/> <frame focus="yes" state="shaded" style="dialog_focused"/> <frame focus="no" state="shaded" style="dialog_unfocused"/> <frame focus="yes" state="maximized_and_shaded" style="blank"/> <frame focus="no" state="maximized_and_shaded" style="blank"/> </frame_style_set> <frame_style_set name="modal_dialog_style_set"> <frame focus="yes" state="normal" resize="both" style="modal_dialog_focused"/> <frame focus="no" state="normal" resize="both" style="modal_dialog_unfocused"/> <frame focus="yes" state="maximized" style="blank"/> <frame focus="no" state="maximized" style="blank"/> <frame focus="yes" state="shaded" style="modal_dialog_focused"/> <frame focus="no" state="shaded" style="modal_dialog_unfocused"/> <frame focus="yes" state="maximized_and_shaded" style="blank"/> <frame focus="no" state="maximized_and_shaded" style="blank"/> </frame_style_set> <frame_style_set name="utility_style_set"> <frame focus="yes" state="normal" resize="both" style="utility_focused"/> <frame focus="no" state="normal" resize="both" style="utility_unfocused"/> <frame focus="yes" state="maximized" style="blank"/> <frame focus="no" state="maximized" style="blank"/> <frame focus="yes" state="shaded" style="utility_focused"/> <frame focus="no" state="shaded" style="utility_unfocused"/> <frame focus="yes" state="maximized_and_shaded" style="blank"/> <frame focus="no" state="maximized_and_shaded" style="blank"/> </frame_style_set> <frame_style_set name="border_style_set"> <frame focus="yes" state="normal" resize="both" style="border_focused"/> <frame focus="no" state="normal" resize="both" style="border_unfocused"/> <frame focus="yes" state="maximized" style="blank"/> <frame focus="no" state="maximized" style="blank"/> <frame focus="yes" state="shaded" style="blank"/> <frame focus="no" state="shaded" style="blank"/> <frame focus="yes" state="maximized_and_shaded" style="blank"/> <frame focus="no" state="maximized_and_shaded" style="blank"/> </frame_style_set> <!-- windows --> <window type="normal" style_set="normal_style_set"/> <window type="dialog" style_set="dialog_style_set"/> <window type="modal_dialog" style_set="modal_dialog_style_set"/> <window type="menu" style_set="utility_style_set"/> <window type="utility" style_set="utility_style_set"/> <window type="border" style_set="border_style_set"/> </metacity_theme> ================================================ FILE: common/metacity-1/metacity-theme-3.xml ================================================ <?xml version="1.0"?> <metacity_theme> <info> <name>Arc</name> <author>horst3180</author> <copyright>horst3180</copyright> <date>2015</date> <description>Arc Metacity theme</description> </info> <!-- meaningfull constants --> <constant name="C_title_focused" value="gtk:custom(wm_title,#70788d)" /> <constant name="C_title_unfocused" value="gtk:custom(wm_unfocused_title,#979dac)" /> <constant name="C_wm_bg_focused" value="gtk:custom(wm_bg,#e7e8eb)" /> <constant name="C_wm_bg_unfocused" value="gtk:custom(wm_bg,#e7e8eb)" /> <constant name="C_wm_highlight" value="gtk:custom(wm_highlight,#eeeff1)" /> <!-- window button colors --> <!-- close --> <constant name="C_button_close_bg_focused" value="gtk:custom(wm_button_close_bg,#f46067)" /> <constant name="C_button_close_bg_hover" value="gtk:custom(wm_button_close_hover_bg,#f68086)" /> <constant name="C_button_close_bg_active" value="gtk:custom(wm_button_close_active_bg,#f13039)" /> <constant name="C_icon_close_bg" value="gtk:custom(wm_icon_close_bg,#F8F8F9)" /> <!-- minimize, maximize --> <constant name="C_button_bg_hover" value="gtk:custom(wm_button_hover_bg,#fdfdfd)" /> <constant name="C_button_bg_active" value="gtk:custom(wm_button_active_bg,#5294E2)" /> <constant name="C_button_border_hover" value="gtk:custom(wm_button_hover_border,#D1D3DA)" /> <constant name="C_icon_bg_focused" value="gtk:custom(wm_icon_bg,#90949E)" /> <constant name="C_icon_bg_unfocused" value="gtk:custom(wm_icon_unfocused_bg,#B6B8C0)" /> <constant name="C_icon_bg_hover" value="gtk:custom(wm_icon_hover_bg,#7A7F8B)" /> <constant name="C_icon_bg_active" value="gtk:custom(wm_icon_active_bg,#ffffff)" /> <!-- geometries --> <frame_geometry name="normal" title_scale="medium" rounded_top_left="1" rounded_top_right="1"> <distance name="left_width" value="0" /> <distance name="right_width" value="0" /> <distance name="bottom_height" value="0" /> <distance name="left_titlebar_edge" value="2"/> <distance name="right_titlebar_edge" value="2"/> <distance name="title_vertical_pad" value="3"/> <border name="title_border" left="10" right="10" top="3" bottom="3"/> <border name="button_border" left="0" right="0" top="0" bottom="0"/> <distance name="button_width" value="30"/> <distance name="button_height" value="16"/> </frame_geometry> <frame_geometry name="normal_unfocused" title_scale="medium" rounded_top_left="1" rounded_top_right="1" parent="normal"> </frame_geometry> <frame_geometry name="max" title_scale="medium" parent="normal" rounded_top_left="false" rounded_top_right="false"> <distance name="left_width" value="0" /> <distance name="right_width" value="0" /> <distance name="left_titlebar_edge" value="0"/> <distance name="right_titlebar_edge" value="0"/> <distance name="title_vertical_pad" value="2"/> <!-- This needs to be 1 less then the title_vertical_pad on normal state or you'll have bigger buttons --> <distance name="bottom_height" value="0" /> </frame_geometry> <frame_geometry name="tiled_left" title_scale="medium" rounded_top_left="false" rounded_top_right="1" parent="normal"> <distance name="right_width" value="0" /> </frame_geometry> <frame_geometry name="tiled_right" title_scale="medium" rounded_top_left="1" rounded_top_right="false" parent="normal"> <distance name="left_width" value="0" /> </frame_geometry> <frame_geometry name="small" title_scale="small" parent="normal" rounded_top_left="1" rounded_top_right="1"> <distance name="title_vertical_pad" value="7"/> <distance name="left_titlebar_edge" value="1"/> <distance name="right_titlebar_edge" value="1"/> <border name="title_border" left="10" right="10" top="0" bottom="1"/> </frame_geometry> <frame_geometry name="small_unfocused" parent="small"> </frame_geometry> <frame_geometry name="border" has_title="false" rounded_top_left="false" rounded_top_right="false" parent="normal" > <distance name="left_width" value="1" /> <distance name="right_width" value="1" /> <distance name="bottom_height" value="1" /> <border name="title_border" left="10" right="10" top="0" bottom="0" /> <distance name="title_vertical_pad" value="1" /> <distance name="button_height" value="0"/> </frame_geometry> <frame_geometry name="borderless" has_title="false" rounded_top_left="false" rounded_top_right="false" parent="normal" > <distance name="left_width" value="0" /> <distance name="right_width" value="0" /> <distance name="bottom_height" value="0" /> <distance name="title_vertical_pad" value="0" /> <border name="title_border" left="10" right="10" top="0" bottom="0" /> <distance name="button_height" value="0"/> </frame_geometry> <frame_geometry name="modal" title_scale="small" hide_buttons="false" rounded_top_left="1" rounded_top_right="1" parent="small"> <distance name="title_vertical_pad" value="5"/> </frame_geometry> <frame_geometry name="attached" title_scale="small" hide_buttons="true" rounded_top_left="1" rounded_top_right="1" parent="small"> </frame_geometry> <!-- drawing operations --> <!-- title --> <draw_ops name="title_focused"> <title version="< 3.1" x="(0 `max` ((width - title_width) / 2))" y="(0 `max` ((height - title_height) / 2)) + 1" color="C_title_focused" /> <title version=">= 3.1" x="(0 `max` ((frame_x_center - title_width / 2) `min` (width - title_width)))" y="(0 `max` ((height - title_height) / 2)) + 1" ellipsize_width="width" color="C_title_focused" /> </draw_ops> <draw_ops name="title_unfocused"> <title version="< 3.1" x="(0 `max` ((width - title_width) / 2))" y="(0 `max` ((height - title_height) / 2)) + 1" color="C_title_unfocused" /> <title version=">= 3.1" x="(0 `max` ((frame_x_center - title_width / 2) `min` (width - title_width)))" y="(0 `max` ((height - title_height) / 2)) + 1" ellipsize_width="width" color="C_title_unfocused" /> </draw_ops> <!-- window decorations --> <draw_ops name="entire_background_focused"> <rectangle color="C_wm_bg_focused" x="0" y="0" width="width" height="height" filled="true" /> </draw_ops> <draw_ops name="entire_background_unfocused"> <rectangle color="C_wm_bg_unfocused" x="0" y="0" width="width" height="height" filled="true" /> </draw_ops> <draw_ops name="titlebar_focused"> <rectangle color="C_wm_bg_focused" x="0" y="0" width="width" height="height" filled="true" /> <rectangle color="C_wm_highlight" x="0" y="0" width="width" height="1" filled="true" /> </draw_ops> <draw_ops name="titlebar_unfocused"> <rectangle color="C_wm_bg_unfocused" x="0" y="0" width="width" height="height" filled="true" /> <rectangle color="C_wm_highlight" x="0" y="0" width="width" height="1" filled="true" /> </draw_ops> <draw_ops name="titlebar_max"> </draw_ops> <draw_ops name="titlebar_small_focused"> </draw_ops> <draw_ops name="titlebar_small_unfocused"> </draw_ops> <draw_ops name="border_focused"> <rectangle color="C_wm_bg_focused" x="0" y="0" width="width" height="height" filled="false" /> </draw_ops> <draw_ops name="border_unfocused"> <rectangle color="C_wm_bg_unfocused" x="0" y="0" width="width" height="height" filled="false" /> </draw_ops> <!--close--> <draw_ops name="close_focused"> <image filename="button-bg.svg" colorize="C_button_close_bg_focused" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="close-icon.svg" colorize="C_icon_close_bg" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="close_focused_pressed"> <image filename="button-bg.svg" colorize="C_button_close_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="close-icon.svg" colorize="C_icon_close_bg" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="close_focused_prelight"> <image filename="button-bg.svg" colorize="C_button_close_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="close-icon.svg" colorize="C_icon_close_bg" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="close_unfocused"> <image filename="button-bg.svg" colorize="C_icon_bg_unfocused" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="close-icon.svg" colorize="C_icon_close_bg" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="close_unfocused_prelight"> <image filename="button-bg.svg" colorize="C_button_close_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="close-icon.svg" colorize="C_icon_close_bg" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="close_unfocused_pressed"> <image filename="button-bg.svg" colorize="C_button_close_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="close-icon.svg" colorize="C_icon_close_bg" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <!--maximize--> <draw_ops name="maximize_focused"> <image filename="max-icon.svg" colorize="C_icon_bg_focused" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="maximize_focused_pressed"> <image filename="button-bg.svg" colorize="C_button_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="max-icon.svg" colorize="C_icon_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="maximize_focused_prelight"> <image filename="button-bg.svg" colorize="C_button_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="button-border.svg" colorize="C_button_border_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="max-icon.svg" colorize="C_icon_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="maximize_unfocused"> <image filename="max-icon.svg" colorize="C_icon_bg_unfocused" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="maximize_unfocused_prelight"> <image filename="button-bg.svg" colorize="C_button_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="button-border.svg" colorize="C_button_border_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="max-icon.svg" colorize="C_icon_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="maximize_unfocused_pressed"> <image filename="button-bg.svg" colorize="C_button_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="max-icon.svg" colorize="C_icon_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <!--minimize--> <draw_ops name="minimize_focused"> <image filename="min-icon.svg" colorize="C_icon_bg_focused" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="minimize_focused_pressed"> <image filename="button-bg.svg" colorize="C_button_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="min-icon.svg" colorize="C_icon_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="minimize_focused_prelight"> <image filename="button-bg.svg" colorize="C_button_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="button-border.svg" colorize="C_button_border_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="min-icon.svg" colorize="C_icon_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="minimize_unfocused"> <image filename="min-icon.svg" colorize="C_icon_bg_unfocused" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="minimize_unfocused_prelight"> <image filename="button-bg.svg" colorize="C_button_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="button-border.svg" colorize="C_button_border_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="min-icon.svg" colorize="C_icon_bg_hover" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <draw_ops name="minimize_unfocused_pressed"> <image filename="button-bg.svg" colorize="C_button_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> <image filename="min-icon.svg" colorize="C_icon_bg_active" x="(width-object_width)/2" y="(height-object_height)/2" width="object_width" height="object_height"/> </draw_ops> <!--Todo--> <draw_ops name="menu_focused"></draw_ops> <draw_ops name="menu_focused_pressed"></draw_ops> <draw_ops name="menu_unfocused"></draw_ops> <draw_ops name="menu_unfocused_prelight"></draw_ops> <draw_ops name="menu_unfocused_pressed"></draw_ops> <draw_ops name="shade_focused"></draw_ops> <draw_ops name="shade_focused_pressed"></draw_ops> <draw_ops name="shade_unfocused"></draw_ops> <draw_ops name="shade_unfocused_prelight"></draw_ops> <draw_ops name="shade_unfocused_pressed"></draw_ops> <!-- frame styles --> <frame_style name="normal_focused" geometry="normal"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="titlebar" draw_ops="titlebar_focused" /> <piece position="title" draw_ops="title_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_focused" /> <button function="unshade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="normal_unfocused" geometry="normal_unfocused"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="titlebar" draw_ops="titlebar_unfocused" /> <piece position="title" draw_ops="title_unfocused" /> <button function="close" state="normal" draw_ops="close_unfocused"/> <button function="close" state="prelight" draw_ops="close_unfocused_prelight"/> <button function="close" state="pressed" draw_ops="close_unfocused_pressed"/> <button function="maximize" state="normal" draw_ops="maximize_unfocused"/> <button function="maximize" state="prelight" draw_ops="maximize_unfocused_prelight"/> <button function="maximize" state="pressed" draw_ops="maximize_unfocused_pressed"/> <button function="minimize" state="normal" draw_ops="minimize_unfocused"/> <button function="minimize" state="prelight" draw_ops="minimize_unfocused_prelight"/> <button function="minimize" state="pressed" draw_ops="minimize_unfocused_pressed"/> <button function="menu" state="normal" draw_ops="menu_unfocused" /> <button function="menu" state="prelight" draw_ops="menu_unfocused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_unfocused_pressed" /> <button function="shade" state="normal" draw_ops="shade_unfocused" /> <button function="shade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_unfocused" /> <button function="unshade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="normal_max_focused" geometry="max"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="titlebar" draw_ops="titlebar_max" /> <piece position="title" draw_ops="title_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_focused" /> <button function="unshade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="normal_max_unfocused" geometry="max"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="titlebar" draw_ops="titlebar_max" /> <piece position="title" draw_ops="title_unfocused" /> <button function="close" state="normal" draw_ops="close_unfocused"/> <button function="close" state="prelight" draw_ops="close_unfocused_prelight"/> <button function="close" state="pressed" draw_ops="close_unfocused_pressed"/> <button function="maximize" state="normal" draw_ops="maximize_unfocused"/> <button function="maximize" state="prelight" draw_ops="maximize_unfocused_prelight"/> <button function="maximize" state="pressed" draw_ops="maximize_unfocused_pressed"/> <button function="minimize" state="normal" draw_ops="minimize_unfocused"/> <button function="minimize" state="prelight" draw_ops="minimize_unfocused_prelight"/> <button function="minimize" state="pressed" draw_ops="minimize_unfocused_pressed"/> <button function="menu" state="normal" draw_ops="menu_unfocused" /> <button function="menu" state="prelight" draw_ops="menu_unfocused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_unfocused_pressed" /> <button function="shade" state="normal" draw_ops="shade_unfocused" /> <button function="shade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_unfocused" /> <button function="unshade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="normal_max_shaded_focused" geometry="max"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="titlebar" draw_ops="titlebar_max" /> <piece position="title" draw_ops="title_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_focused" /> <button function="unshade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="normal_max_shaded_unfocused" geometry="max"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="titlebar" draw_ops="titlebar_max" /> <piece position="title" draw_ops="title_unfocused" /> <button function="close" state="normal" draw_ops="close_unfocused"/> <button function="close" state="prelight" draw_ops="close_unfocused_prelight"/> <button function="close" state="pressed" draw_ops="close_unfocused_pressed"/> <button function="maximize" state="normal" draw_ops="maximize_unfocused"/> <button function="maximize" state="prelight" draw_ops="maximize_unfocused_prelight"/> <button function="maximize" state="pressed" draw_ops="maximize_unfocused_pressed"/> <button function="minimize" state="normal" draw_ops="minimize_unfocused"/> <button function="minimize" state="prelight" draw_ops="minimize_unfocused_prelight"/> <button function="minimize" state="pressed" draw_ops="minimize_unfocused_pressed"/> <button function="menu" state="normal" draw_ops="menu_unfocused" /> <button function="menu" state="prelight" draw_ops="menu_unfocused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_unfocused_pressed" /> <button function="shade" state="normal" draw_ops="shade_unfocused" /> <button function="shade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_unfocused" /> <button function="unshade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="dialog_focused" geometry="normal"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="titlebar" draw_ops="titlebar_focused" /> <piece position="title" draw_ops="title_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_focused" /> <button function="unshade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="dialog_unfocused" geometry="normal"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="titlebar" draw_ops="titlebar_unfocused" /> <piece position="title" draw_ops="title_unfocused" /> <button function="close" state="normal" draw_ops="close_unfocused"/> <button function="close" state="prelight" draw_ops="close_unfocused_prelight"/> <button function="close" state="pressed" draw_ops="close_unfocused_pressed"/> <button function="maximize" state="normal" draw_ops="maximize_unfocused"/> <button function="maximize" state="prelight" draw_ops="maximize_unfocused_prelight"/> <button function="maximize" state="pressed" draw_ops="maximize_unfocused_pressed"/> <button function="minimize" state="normal" draw_ops="minimize_unfocused"/> <button function="minimize" state="prelight" draw_ops="minimize_unfocused_prelight"/> <button function="minimize" state="pressed" draw_ops="minimize_unfocused_pressed"/> <button function="menu" state="normal" draw_ops="menu_unfocused" /> <button function="menu" state="prelight" draw_ops="menu_unfocused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_unfocused_pressed" /> <button function="shade" state="normal"><draw_ops></draw_ops></button> <button function="shade" state="pressed"><draw_ops></draw_ops></button> <button function="unshade" state="normal"><draw_ops></draw_ops></button> <button function="unshade" state="pressed"><draw_ops></draw_ops></button> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="modal_dialog_focused" geometry="modal"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="titlebar" draw_ops="titlebar_focused" /> <piece position="title" draw_ops="title_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_focused" /> <button function="unshade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button><button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="modal_dialog_unfocused" geometry="modal"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="titlebar" draw_ops="titlebar_focused" /> <piece position="title" draw_ops="title_unfocused" /> <button function="close" state="normal" draw_ops="close_unfocused"/> <button function="close" state="prelight" draw_ops="close_unfocused_prelight"/> <button function="close" state="pressed" draw_ops="close_unfocused_pressed"/> <button function="maximize" state="normal" draw_ops="maximize_unfocused"/> <button function="maximize" state="prelight" draw_ops="maximize_unfocused_prelight"/> <button function="maximize" state="pressed" draw_ops="maximize_unfocused_pressed"/> <button function="minimize" state="normal" draw_ops="minimize_unfocused"/> <button function="minimize" state="prelight" draw_ops="minimize_unfocused_prelight"/> <button function="minimize" state="pressed" draw_ops="minimize_unfocused_pressed"/> <button function="menu" state="normal" draw_ops="menu_unfocused" /> <button function="menu" state="prelight" draw_ops="menu_unfocused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_unfocused_pressed" /> <button function="shade" state="normal" draw_ops="shade_unfocused" /> <button function="shade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_unfocused" /> <button function="unshade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="utility_focused" geometry="small"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="titlebar" draw_ops="titlebar_small_focused" /> <piece position="title" draw_ops="title_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_focused" /> <button function="unshade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="utility_unfocused" geometry="small_unfocused"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="titlebar" draw_ops="titlebar_small_unfocused" /> <piece position="title" draw_ops="title_unfocused" /> <button function="close" state="normal" draw_ops="close_unfocused"/> <button function="close" state="prelight" draw_ops="close_unfocused_prelight"/> <button function="close" state="pressed" draw_ops="close_unfocused_pressed"/> <button function="maximize" state="normal" draw_ops="maximize_unfocused"/> <button function="maximize" state="prelight" draw_ops="maximize_unfocused_prelight"/> <button function="maximize" state="pressed" draw_ops="maximize_unfocused_pressed"/> <button function="minimize" state="normal" draw_ops="minimize_unfocused"/> <button function="minimize" state="prelight" draw_ops="minimize_unfocused_prelight"/> <button function="minimize" state="pressed" draw_ops="minimize_unfocused_pressed"/> <button function="menu" state="normal" draw_ops="menu_unfocused" /> <button function="menu" state="prelight" draw_ops="menu_unfocused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_unfocused_pressed" /> <button function="shade" state="normal" draw_ops="shade_unfocused" /> <button function="shade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_unfocused" /> <button function="unshade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="border_focused" geometry="border"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="overlay" draw_ops="border_focused" /> <button function="close" state="normal"><draw_ops></draw_ops></button> <button function="close" state="pressed"><draw_ops></draw_ops></button> <button function="maximize" state="normal"><draw_ops></draw_ops></button> <button function="maximize" state="pressed"><draw_ops></draw_ops></button> <button function="minimize" state="normal"><draw_ops></draw_ops></button> <button function="minimize" state="pressed"><draw_ops></draw_ops></button> <button function="menu" state="normal"><draw_ops></draw_ops></button> <button function="menu" state="pressed"><draw_ops></draw_ops></button> <button function="shade" state="normal"><draw_ops></draw_ops></button> <button function="shade" state="pressed"><draw_ops></draw_ops></button> <button function="unshade" state="normal"><draw_ops></draw_ops></button> <button function="unshade" state="pressed"><draw_ops></draw_ops></button> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="border_unfocused" geometry="border"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="overlay" draw_ops="border_unfocused" /> <button function="close" state="normal"><draw_ops></draw_ops></button> <button function="close" state="pressed"><draw_ops></draw_ops></button> <button function="maximize" state="normal"><draw_ops></draw_ops></button> <button function="maximize" state="pressed"><draw_ops></draw_ops></button> <button function="minimize" state="normal"><draw_ops></draw_ops></button> <button function="minimize" state="pressed"><draw_ops></draw_ops></button> <button function="menu" state="normal"><draw_ops></draw_ops></button> <button function="menu" state="pressed"><draw_ops></draw_ops></button> <button function="shade" state="normal"><draw_ops></draw_ops></button> <button function="shade" state="pressed"><draw_ops></draw_ops></button> <button function="unshade" state="normal"><draw_ops></draw_ops></button> <button function="unshade" state="pressed"><draw_ops></draw_ops></button> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="borderless" geometry="borderless"> <button function="close" state="normal"><draw_ops></draw_ops></button> <button function="close" state="pressed"><draw_ops></draw_ops></button> <button function="maximize" state="normal"><draw_ops></draw_ops></button> <button function="maximize" state="pressed"><draw_ops></draw_ops></button> <button function="minimize" state="normal"><draw_ops></draw_ops></button> <button function="minimize" state="pressed"><draw_ops></draw_ops></button> <button function="menu" state="normal"><draw_ops></draw_ops></button> <button function="menu" state="pressed"><draw_ops></draw_ops></button> <button function="shade" state="normal"><draw_ops></draw_ops></button> <button function="shade" state="pressed"><draw_ops></draw_ops></button> <button function="unshade" state="normal"><draw_ops></draw_ops></button> <button function="unshade" state="pressed"><draw_ops></draw_ops></button> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="attached_focused" geometry="attached"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="titlebar" draw_ops="titlebar_focused" /> <piece position="title" draw_ops="title_focused" /> <piece position="overlay" draw_ops="border_focused" /> <button function="close" state="normal"><draw_ops></draw_ops></button> <button function="close" state="pressed"><draw_ops></draw_ops></button> <button function="maximize" state="normal"><draw_ops></draw_ops></button> <button function="maximize" state="pressed"><draw_ops></draw_ops></button> <button function="minimize" state="normal"><draw_ops></draw_ops></button> <button function="minimize" state="pressed"><draw_ops></draw_ops></button> <button function="menu" state="normal"><draw_ops></draw_ops></button> <button function="menu" state="pressed"><draw_ops></draw_ops></button> <button function="shade" state="normal"><draw_ops></draw_ops></button> <button function="shade" state="pressed"><draw_ops></draw_ops></button> <button function="unshade" state="normal"><draw_ops></draw_ops></button> <button function="unshade" state="pressed"><draw_ops></draw_ops></button> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="attached_unfocused" geometry="attached"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="titlebar" draw_ops="titlebar_unfocused" /> <piece position="title" draw_ops="title_unfocused" /> <piece position="overlay" draw_ops="border_unfocused" /> <button function="close" state="normal"><draw_ops></draw_ops></button> <button function="close" state="pressed"><draw_ops></draw_ops></button> <button function="maximize" state="normal"><draw_ops></draw_ops></button> <button function="maximize" state="pressed"><draw_ops></draw_ops></button> <button function="minimize" state="normal"><draw_ops></draw_ops></button> <button function="minimize" state="pressed"><draw_ops></draw_ops></button> <button function="menu" state="normal"><draw_ops></draw_ops></button> <button function="menu" state="pressed"><draw_ops></draw_ops></button> <button function="shade" state="normal"><draw_ops></draw_ops></button> <button function="shade" state="pressed"><draw_ops></draw_ops></button> <button function="unshade" state="normal"><draw_ops></draw_ops></button> <button function="unshade" state="pressed"><draw_ops></draw_ops></button> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="tiled_left_focused" geometry="tiled_left"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="titlebar" draw_ops="titlebar_focused" /> <piece position="title" draw_ops="title_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_focused" /> <button function="unshade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="tiled_left_unfocused" geometry="tiled_left"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="titlebar" draw_ops="titlebar_unfocused" /> <piece position="title" draw_ops="title_unfocused" /> <button function="close" state="normal" draw_ops="close_unfocused"/> <button function="close" state="prelight" draw_ops="close_unfocused_prelight"/> <button function="close" state="pressed" draw_ops="close_unfocused_pressed"/> <button function="maximize" state="normal" draw_ops="maximize_unfocused"/> <button function="maximize" state="prelight" draw_ops="maximize_unfocused_prelight"/> <button function="maximize" state="pressed" draw_ops="maximize_unfocused_pressed"/> <button function="minimize" state="normal" draw_ops="minimize_unfocused"/> <button function="minimize" state="prelight" draw_ops="minimize_unfocused_prelight"/> <button function="minimize" state="pressed" draw_ops="minimize_unfocused_pressed"/> <button function="menu" state="normal" draw_ops="menu_unfocused" /> <button function="menu" state="prelight" draw_ops="menu_unfocused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_unfocused_pressed" /> <button function="shade" state="normal" draw_ops="shade_unfocused" /> <button function="shade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_unfocused" /> <button function="unshade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="tiled_right_focused" geometry="tiled_right"> <piece position="entire_background" draw_ops="entire_background_focused" /> <piece position="titlebar" draw_ops="titlebar_focused" /> <piece position="title" draw_ops="title_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_focused" /> <button function="unshade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <frame_style name="tiled_right_unfocused" geometry="tiled_right"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="titlebar" draw_ops="titlebar_unfocused" /> <piece position="title" draw_ops="title_unfocused" /> <button function="close" state="normal" draw_ops="close_unfocused"/> <button function="close" state="prelight" draw_ops="close_unfocused_prelight"/> <button function="close" state="pressed" draw_ops="close_unfocused_pressed"/> <button function="maximize" state="normal" draw_ops="maximize_unfocused"/> <button function="maximize" state="prelight" draw_ops="maximize_unfocused_prelight"/> <button function="maximize" state="pressed" draw_ops="maximize_unfocused_pressed"/> <button function="minimize" state="normal" draw_ops="minimize_unfocused"/> <button function="minimize" state="prelight" draw_ops="minimize_unfocused_prelight"/> <button function="minimize" state="pressed" draw_ops="minimize_unfocused_pressed"/> <button function="menu" state="normal" draw_ops="menu_unfocused" /> <button function="menu" state="prelight" draw_ops="menu_unfocused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_unfocused_pressed" /> <button function="shade" state="normal" draw_ops="shade_unfocused" /> <button function="shade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="unshade" state="normal" draw_ops="shade_unfocused" /> <button function="unshade" state="prelight" draw_ops="shade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="shade_unfocused_pressed" /> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <!-- placeholder for unimplementated styles--> <frame_style name="blank" geometry="normal"> <button function="close" state="normal"><draw_ops></draw_ops></button> <button function="close" state="pressed"><draw_ops></draw_ops></button> <button function="maximize" state="normal"><draw_ops></draw_ops></button> <button function="maximize" state="pressed"><draw_ops></draw_ops></button> <button function="minimize" state="normal"><draw_ops></draw_ops></button> <button function="minimize" state="pressed"><draw_ops></draw_ops></button> <button function="menu" state="normal"><draw_ops></draw_ops></button> <button function="menu" state="pressed"><draw_ops></draw_ops></button> <button function="shade" state="normal"><draw_ops></draw_ops></button> <button function="shade" state="pressed"><draw_ops></draw_ops></button> <button function="unshade" state="normal"><draw_ops></draw_ops></button> <button function="unshade" state="pressed"><draw_ops></draw_ops></button> <button function="above" state="normal"><draw_ops></draw_ops></button> <button function="above" state="pressed"><draw_ops></draw_ops></button> <button function="unabove" state="normal"><draw_ops></draw_ops></button> <button function="unabove" state="pressed"><draw_ops></draw_ops></button> <button function="stick" state="normal"><draw_ops></draw_ops></button> <button function="stick" state="pressed"><draw_ops></draw_ops></button> <button function="unstick" state="normal"><draw_ops></draw_ops></button> <button function="unstick" state="pressed"><draw_ops></draw_ops></button> </frame_style> <!-- frame style sets --> <frame_style_set name="normal_style_set"> <frame focus="yes" state="normal" resize="both" style="normal_focused"/> <frame focus="no" state="normal" resize="both" style="normal_unfocused"/> <frame focus="yes" state="maximized" style="normal_max_focused"/> <frame focus="no" state="maximized" style="normal_max_unfocused"/> <frame focus="yes" state="shaded" style="normal_focused"/> <frame focus="no" state="shaded" style="normal_unfocused"/> <frame focus="yes" state="maximized_and_shaded" style="normal_max_shaded_focused"/> <frame focus="no" state="maximized_and_shaded" style="normal_max_shaded_unfocused"/> <frame version=">= 3.3" focus="yes" state="tiled_left" style="tiled_left_focused"/> <frame version=">= 3.3" focus="no" state="tiled_left" style="tiled_left_unfocused"/> <frame version=">= 3.3" focus="yes" state="tiled_right" style="tiled_right_focused"/> <frame version=">= 3.3" focus="no" state="tiled_right" style="tiled_right_unfocused"/> <frame version=">= 3.3" focus="yes" state="tiled_left_and_shaded" style="tiled_left_focused"/> <frame version=">= 3.3" focus="no" state="tiled_left_and_shaded" style="tiled_left_unfocused"/> <frame version=">= 3.3" focus="yes" state="tiled_right_and_shaded" style="tiled_right_focused"/> <frame version=">= 3.3" focus="no" state="tiled_right_and_shaded" style="tiled_right_unfocused"/> </frame_style_set> <frame_style_set name="dialog_style_set"> <frame focus="yes" state="normal" resize="both" style="dialog_focused"/> <frame focus="no" state="normal" resize="both" style="dialog_unfocused"/> <frame focus="yes" state="maximized" style="blank"/> <frame focus="no" state="maximized" style="blank"/> <frame focus="yes" state="shaded" style="dialog_focused"/> <frame focus="no" state="shaded" style="dialog_unfocused"/> <frame focus="yes" state="maximized_and_shaded" style="blank"/> <frame focus="no" state="maximized_and_shaded" style="blank"/> </frame_style_set> <frame_style_set name="modal_dialog_style_set"> <frame focus="yes" state="normal" resize="both" style="modal_dialog_focused"/> <frame focus="no" state="normal" resize="both" style="modal_dialog_unfocused"/> <frame focus="yes" state="maximized" style="blank"/> <frame focus="no" state="maximized" style="blank"/> <frame focus="yes" state="shaded" style="modal_dialog_focused"/> <frame focus="no" state="shaded" style="modal_dialog_unfocused"/> <frame focus="yes" state="maximized_and_shaded" style="blank"/> <frame focus="no" state="maximized_and_shaded" style="blank"/> </frame_style_set> <frame_style_set name="utility_style_set"> <frame focus="yes" state="normal" resize="both" style="utility_focused"/> <frame focus="no" state="normal" resize="both" style="utility_unfocused"/> <frame focus="yes" state="maximized" style="blank"/> <frame focus="no" state="maximized" style="blank"/> <frame focus="yes" state="shaded" style="utility_focused"/> <frame focus="no" state="shaded" style="utility_unfocused"/> <frame focus="yes" state="maximized_and_shaded" style="blank"/> <frame focus="no" state="maximized_and_shaded" style="blank"/> </frame_style_set> <frame_style_set name="border_style_set"> <frame focus="yes" state="normal" resize="both" style="border_focused"/> <frame focus="no" state="normal" resize="both" style="border_unfocused"/> <frame focus="yes" state="maximized" style="borderless"/> <frame focus="no" state="maximized" style="borderless"/> <frame focus="yes" state="shaded" style="blank"/> <frame focus="no" state="shaded" style="blank"/> <frame focus="yes" state="maximized_and_shaded" style="blank"/> <frame focus="no" state="maximized_and_shaded" style="blank"/> </frame_style_set> <frame_style_set name="attached_style_set"> <frame focus="yes" state="normal" resize="both" style="attached_focused"/> <frame focus="no" state="normal" resize="both" style="attached_unfocused"/> <frame focus="yes" state="maximized" style="blank"/> <frame focus="no" state="maximized" style="blank"/> <frame focus="yes" state="shaded" style="blank"/> <frame focus="no" state="shaded" style="blank"/> <frame focus="yes" state="maximized_and_shaded" style="blank"/> <frame focus="no" state="maximized_and_shaded" style="blank"/> </frame_style_set> <!-- windows --> <window type="normal" style_set="normal_style_set"/> <window type="dialog" style_set="dialog_style_set"/> <window type="modal_dialog" style_set="modal_dialog_style_set"/> <window type="menu" style_set="utility_style_set"/> <window type="utility" style_set="utility_style_set"/> <window type="border" style_set="border_style_set"/> <window version=">= 3.2" type="attached" style_set="attached_style_set"/> </metacity_theme> ================================================ FILE: common/openbox/Arc/openbox-3/close.xbm ================================================ #define close_width 8 #define close_height 8 static unsigned char close_bits[] = { 0xc3, 0xe7, 0x7e, 0x3c, 0x3c, 0x7e, 0xe7, 0xc3 }; ================================================ FILE: common/openbox/Arc/openbox-3/desk.xbm ================================================ #define desk_toggled_width 8 #define desk_toggled_height 8 static unsigned char desk_toggled_bits[] = { 0xe7, 0xe7, 0xe7, 0x00, 0x00, 0xe7, 0xe7, 0xe7 }; ================================================ FILE: common/openbox/Arc/openbox-3/desk_toggled.xbm ================================================ #define desk_width 8 #define desk_height 8 static unsigned char desk_bits[] = { 0x04, 0x0e, 0x3f, 0x1e, 0x1c, 0x24, 0x40, 0x80 }; ================================================ FILE: common/openbox/Arc/openbox-3/iconify.xbm ================================================ #define iconify_width 8 #define iconify_height 8 static unsigned char iconify_bits[] = { 0x00, 0x00, 0x00, 0xff, 0xff, 0x00, 0x00, 0x00 }; ================================================ FILE: common/openbox/Arc/openbox-3/max.xbm ================================================ #define titlebutton_max_2_width 8 #define titlebutton_max_2_height 8 static unsigned char titlebutton_max_2_bits[] = { 0xf8, 0xf0, 0xe0, 0xc1, 0x83, 0x07, 0x0f, 0x1f }; ================================================ FILE: common/openbox/Arc/openbox-3/max_toggled.xbm ================================================ #define titlebutton_max_2_width 8 #define titlebutton_max_2_height 8 static unsigned char titlebutton_max_2_bits[] = { 0xf8, 0xf0, 0xe0, 0xc1, 0x83, 0x07, 0x0f, 0x1f }; ================================================ FILE: common/openbox/Arc/openbox-3/shade.xbm ================================================ #define shade_width 8 #define shade_height 8 static unsigned char shade_bits[] = { 0x18, 0x3c, 0x7e, 0xff, 0xdb, 0x18, 0x18, 0x18 }; ================================================ FILE: common/openbox/Arc/openbox-3/shade_toggled.xbm ================================================ #define shade_toggled_width 8 #define shade_toggled_height 8 static unsigned char shade_toggled_bits[] = { 0x18, 0x18, 0x18, 0xdb, 0xff, 0x7e, 0x3c, 0x18 }; ================================================ FILE: common/openbox/Arc/openbox-3/themerc ================================================ # Arc Openbox theme # Copyright (C) 2015 Dino Duratović <dinomol at mail dot com> # # Inspired by and made for horst3180's Arc GTK theme # https://github.com/horst3180/Arc-theme # # 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 <http://www.gnu.org/licenses/>. ### WINDOW border.width: 1 window.client.padding.width: 0 window.client.padding.height: 0 window.handle.width: 0 padding.width: 4 padding.height: 4 window.active.border.color: #dbdfe3 window.inactive.border.color: #dbdfe3 window.active.title.separator.color: #e7e8eb window.inactive.title.separator.color: #e7e8eb window.active.client.color: #dbdfe3 window.inactive.client.color: #dbdfe3 window.active.label.text.color: #5c616c window.inactive.label.text.color: #979dac window.active.button.unpressed.image.color: #5c616c window.active.button.pressed.image.color: #5294E2 window.active.button.disabled.image.color: #dbdfe3 window.active.button.hover.image.color: #70788d window.active.button.toggled.unpressed.image.color: #5c616c window.active.button.toggled.pressed.image.color: #5294E2 window.active.button.toggled.hover.image.color: #70788d window.inactive.button.unpressed.image.color: #dddee2 window.inactive.button.pressed.image.color: #5294E2 window.inactive.button.disabled.image.color: #dbdfe3 window.inactive.button.hover.image.color: #70788d window.inactive.button.toggled.unpressed.image.color: #dddee2 window.inactive.button.toggled.pressed.image.color: #5294E2 window.inactive.button.toggled.hover.image.color: #70788d window.active.title.bg: flat solid window.active.title.bg.color: #e7e8eb window.active.label.bg: flat solid window.active.label.bg.color: #e7e8eb #window.active.handle.bg: texture #window.active.grip.bg: texture window.inactive.title.bg: flat solid window.inactive.title.bg.color: #e7e8eb window.inactive.label.bg: flat solid window.inactive.label.bg.color: #e7e8eb #window.inactive.handle.bg: texture #window.inactive.grip.bg: texture window.active.button.unpressed.bg: parentrelative window.active.button.pressed.bg: parentrelative window.active.button.hover.bg: parentrelative window.active.button.disabled.bg: parentrelative window.active.button.toggled.unpressed.bg: parentrelative window.active.button.toggled.pressed.bg: parentrelative window.active.button.toggled.hover.bg: parentrelative window.inactive.button.unpressed.bg: parentrelative window.inactive.button.pressed.bg: parentrelative window.inactive.button.hover.bg: parentrelative window.inactive.button.disabled.bg: parentrelative window.inactive.button.toggled.unpressed.bg: parentrelative window.inactive.button.toggled.pressed.bg: parentrelative window.inactive.button.toggled.hover.bg: parentrelative window.label.text.justify: center #window.active.label.text.font: text shadow #window.inactive.label.text.font: text shadow ### MENU menu.border.width: 0 menu.separator.width: 1 menu.separator.padding.width: 10 menu.separator.padding.height: 2 menu.overlap.x: 0 menu.overlap.y: 0 menu.border.color: #aeb0b6 menu.separator.color: #a8adb5 menu.title.text.color: #5c616c menu.items.text.color: #a8adb5 menu.items.disabled.text.color: #76797F menu.items.active.text.color: #ffffff menu.items.active.disabled.text.color: #aeb0b6 menu.items.bg: flat solid menu.items.bg.color: #3c4049 menu.items.active.bg: flat solid menu.items.active.bg.color: #5294E2 menu.title.bg: flat solid menu.title.bg.color: #dbdfe3 menu.title.text.justify: center #menu.items.font: text shadow #menu.title.text.font: text shadow ### OSD osd.border.width: 1 osd.border.color: #dbdfe3 osd.label.text.color: #5c616c osd.bg: flat solid osd.bg.color: #e7e8eb osd.label.bg: flat solid osd.label.bg.color: #e7e8eb osd.hilight.bg: flat solid osd.hilight.bg.color: #5294E2 osd.unhilight.bg: flat solid osd.unhilight.bg.color: #ffffff #osd.label.text.font: text shadow ================================================ FILE: common/openbox/Arc-Dark/openbox-3/close.xbm ================================================ #define close_width 8 #define close_height 8 static unsigned char close_bits[] = { 0xc3, 0xe7, 0x7e, 0x3c, 0x3c, 0x7e, 0xe7, 0xc3 }; ================================================ FILE: common/openbox/Arc-Dark/openbox-3/desk.xbm ================================================ #define desk_toggled_width 8 #define desk_toggled_height 8 static unsigned char desk_toggled_bits[] = { 0xe7, 0xe7, 0xe7, 0x00, 0x00, 0xe7, 0xe7, 0xe7 }; ================================================ FILE: common/openbox/Arc-Dark/openbox-3/desk_toggled.xbm ================================================ #define desk_width 8 #define desk_height 8 static unsigned char desk_bits[] = { 0x04, 0x0e, 0x3f, 0x1e, 0x1c, 0x24, 0x40, 0x80 }; ================================================ FILE: common/openbox/Arc-Dark/openbox-3/iconify.xbm ================================================ #define iconify_width 8 #define iconify_height 8 static unsigned char iconify_bits[] = { 0x00, 0x00, 0x00, 0xff, 0xff, 0x00, 0x00, 0x00 }; ================================================ FILE: common/openbox/Arc-Dark/openbox-3/max.xbm ================================================ #define titlebutton_max_2_width 8 #define titlebutton_max_2_height 8 static unsigned char titlebutton_max_2_bits[] = { 0xf8, 0xf0, 0xe0, 0xc1, 0x83, 0x07, 0x0f, 0x1f }; ================================================ FILE: common/openbox/Arc-Dark/openbox-3/max_toggled.xbm ================================================ #define titlebutton_max_2_width 8 #define titlebutton_max_2_height 8 static unsigned char titlebutton_max_2_bits[] = { 0xf8, 0xf0, 0xe0, 0xc1, 0x83, 0x07, 0x0f, 0x1f }; ================================================ FILE: common/openbox/Arc-Dark/openbox-3/shade.xbm ================================================ #define shade_width 8 #define shade_height 8 static unsigned char shade_bits[] = { 0x18, 0x3c, 0x7e, 0xff, 0xdb, 0x18, 0x18, 0x18 }; ================================================ FILE: common/openbox/Arc-Dark/openbox-3/shade_toggled.xbm ================================================ #define shade_toggled_width 8 #define shade_toggled_height 8 static unsigned char shade_toggled_bits[] = { 0x18, 0x18, 0x18, 0xdb, 0xff, 0x7e, 0x3c, 0x18 }; ================================================ FILE: common/openbox/Arc-Dark/openbox-3/themerc ================================================ # Arc Openbox theme # Copyright (C) 2015 Dino Duratović <dinomol at mail dot com> # # Inspired by and made for horst3180's Arc GTK theme # https://github.com/horst3180/Arc-theme # # 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 <http://www.gnu.org/licenses/>. ### WINDOW border.width: 1 window.client.padding.width: 0 window.client.padding.height: 0 window.handle.width: 0 padding.width: 4 padding.height: 4 window.active.border.color: #2d3036 window.inactive.border.color: #2d3036 window.active.title.separator.color: #2f343f window.inactive.title.separator.color: #2f343f window.active.client.color: #2d3036 window.inactive.client.color: #2d3036 window.active.label.text.color: #D3DAE3 window.inactive.label.text.color: #7F8388 window.active.button.unpressed.image.color: #D3DAE3 window.active.button.pressed.image.color: #5294E2 window.active.button.disabled.image.color: #2d3036 window.active.button.hover.image.color: #afb8c5 window.active.button.toggled.unpressed.image.color: #D3DAE3 window.active.button.toggled.pressed.image.color: #5294E2 window.active.button.toggled.hover.image.color: #afb8c5 window.inactive.button.unpressed.image.color: #1F2328 window.inactive.button.pressed.image.color: #5294E2 window.inactive.button.disabled.image.color: #2d3036 window.inactive.button.hover.image.color: #afb8c5 window.inactive.button.toggled.unpressed.image.color: #1F2328 window.inactive.button.toggled.pressed.image.color: #5294E2 window.inactive.button.toggled.hover.image.color: #afb8c5 window.active.title.bg: flat solid window.active.title.bg.color: #2f343f window.active.label.bg: flat solid window.active.label.bg.color: #2f343f #window.active.handle.bg: texture #window.active.grip.bg: texture window.inactive.title.bg: flat solid window.inactive.title.bg.color: #2f343f window.inactive.label.bg: flat solid window.inactive.label.bg.color: #2f343f #window.inactive.handle.bg: texture #window.inactive.grip.bg: texture window.active.button.unpressed.bg: parentrelative window.active.button.pressed.bg: parentrelative window.active.button.hover.bg: parentrelative window.active.button.disabled.bg: parentrelative window.active.button.toggled.unpressed.bg: parentrelative window.active.button.toggled.pressed.bg: parentrelative window.active.button.toggled.hover.bg: parentrelative window.inactive.button.unpressed.bg: parentrelative window.inactive.button.pressed.bg: parentrelative window.inactive.button.hover.bg: parentrelative window.inactive.button.disabled.bg: parentrelative window.inactive.button.toggled.unpressed.bg: parentrelative window.inactive.button.toggled.pressed.bg: parentrelative window.inactive.button.toggled.hover.bg: parentrelative window.label.text.justify: center #window.active.label.text.font: text shadow #window.inactive.label.text.font: text shadow ### MENU menu.border.width: 0 menu.separator.width: 1 menu.separator.padding.width: 10 menu.separator.padding.height: 2 menu.overlap.x: 0 menu.overlap.y: 0 menu.border.color: #aeb0b6 menu.separator.color: #a8adb5 menu.title.text.color: #D3DAE3 menu.items.text.color: #a8adb5 menu.items.disabled.text.color: #76797F menu.items.active.text.color: #ffffff menu.items.active.disabled.text.color: #aeb0b6 menu.items.bg: flat solid menu.items.bg.color: #454a54 menu.items.active.bg: flat solid menu.items.active.bg.color: #5294E2 menu.title.bg: flat solid menu.title.bg.color: #2d3036 menu.title.text.justify: center #menu.items.font: text shadow #menu.title.text.font: text shadow ### OSD osd.border.width: 1 osd.border.color: #2d3036 osd.label.text.color: #D3DAE3 osd.bg: flat solid osd.bg.color: #2f343f osd.label.bg: flat solid osd.label.bg.color: #2f343f osd.hilight.bg: flat solid osd.hilight.bg.color: #5294E2 osd.unhilight.bg: flat solid osd.unhilight.bg.color: #000000 #osd.label.text.font: text shadow ================================================ FILE: common/openbox/Arc-Darker/openbox-3/close.xbm ================================================ #define close_width 8 #define close_height 8 static unsigned char close_bits[] = { 0xc3, 0xe7, 0x7e, 0x3c, 0x3c, 0x7e, 0xe7, 0xc3 }; ================================================ FILE: common/openbox/Arc-Darker/openbox-3/desk.xbm ================================================ #define desk_toggled_width 8 #define desk_toggled_height 8 static unsigned char desk_toggled_bits[] = { 0xe7, 0xe7, 0xe7, 0x00, 0x00, 0xe7, 0xe7, 0xe7 }; ================================================ FILE: common/openbox/Arc-Darker/openbox-3/desk_toggled.xbm ================================================ #define desk_width 8 #define desk_height 8 static unsigned char desk_bits[] = { 0x04, 0x0e, 0x3f, 0x1e, 0x1c, 0x24, 0x40, 0x80 }; ================================================ FILE: common/openbox/Arc-Darker/openbox-3/iconify.xbm ================================================ #define iconify_width 8 #define iconify_height 8 static unsigned char iconify_bits[] = { 0x00, 0x00, 0x00, 0xff, 0xff, 0x00, 0x00, 0x00 }; ================================================ FILE: common/openbox/Arc-Darker/openbox-3/max.xbm ================================================ #define titlebutton_max_2_width 8 #define titlebutton_max_2_height 8 static unsigned char titlebutton_max_2_bits[] = { 0xf8, 0xf0, 0xe0, 0xc1, 0x83, 0x07, 0x0f, 0x1f }; ================================================ FILE: common/openbox/Arc-Darker/openbox-3/max_toggled.xbm ================================================ #define titlebutton_max_2_width 8 #define titlebutton_max_2_height 8 static unsigned char titlebutton_max_2_bits[] = { 0xf8, 0xf0, 0xe0, 0xc1, 0x83, 0x07, 0x0f, 0x1f }; ================================================ FILE: common/openbox/Arc-Darker/openbox-3/shade.xbm ================================================ #define shade_width 8 #define shade_height 8 static unsigned char shade_bits[] = { 0x18, 0x3c, 0x7e, 0xff, 0xdb, 0x18, 0x18, 0x18 }; ================================================ FILE: common/openbox/Arc-Darker/openbox-3/shade_toggled.xbm ================================================ #define shade_toggled_width 8 #define shade_toggled_height 8 static unsigned char shade_toggled_bits[] = { 0x18, 0x18, 0x18, 0xdb, 0xff, 0x7e, 0x3c, 0x18 }; ================================================ FILE: common/openbox/Arc-Darker/openbox-3/themerc ================================================ # Arc Openbox theme # Copyright (C) 2015 Dino Duratović <dinomol at mail dot com> # # Inspired by and made for horst3180's Arc GTK theme # https://github.com/horst3180/Arc-theme # # 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 <http://www.gnu.org/licenses/>. ### WINDOW border.width: 1 window.client.padding.width: 0 window.client.padding.height: 0 window.handle.width: 0 padding.width: 4 padding.height: 4 window.active.border.color: #2d3036 window.inactive.border.color: #2d3036 window.active.title.separator.color: #2f343f window.inactive.title.separator.color: #2f343f window.active.client.color: #2d3036 window.inactive.client.color: #2d3036 window.active.label.text.color: #D3DAE3 window.inactive.label.text.color: #7F8388 window.active.button.unpressed.image.color: #D3DAE3 window.active.button.pressed.image.color: #5294E2 window.active.button.disabled.image.color: #2d3036 window.active.button.hover.image.color: #afb8c5 window.active.button.toggled.unpressed.image.color: #D3DAE3 window.active.button.toggled.pressed.image.color: #5294E2 window.active.button.toggled.hover.image.color: #afb8c5 window.inactive.button.unpressed.image.color: #1F2328 window.inactive.button.pressed.image.color: #5294E2 window.inactive.button.disabled.image.color: #2d3036 window.inactive.button.hover.image.color: #afb8c5 window.inactive.button.toggled.unpressed.image.color: #1F2328 window.inactive.button.toggled.pressed.image.color: #5294E2 window.inactive.button.toggled.hover.image.color: #afb8c5 window.active.title.bg: flat solid window.active.title.bg.color: #2f343f window.active.label.bg: flat solid window.active.label.bg.color: #2f343f #window.active.handle.bg: texture #window.active.grip.bg: texture window.inactive.title.bg: flat solid window.inactive.title.bg.color: #2f343f window.inactive.label.bg: flat solid window.inactive.label.bg.color: #2f343f #window.inactive.handle.bg: texture #window.inactive.grip.bg: texture window.active.button.unpressed.bg: parentrelative window.active.button.pressed.bg: parentrelative window.active.button.hover.bg: parentrelative window.active.button.disabled.bg: parentrelative window.active.button.toggled.unpressed.bg: parentrelative window.active.button.toggled.pressed.bg: parentrelative window.active.button.toggled.hover.bg: parentrelative window.inactive.button.unpressed.bg: parentrelative window.inactive.button.pressed.bg: parentrelative window.inactive.button.hover.bg: parentrelative window.inactive.button.disabled.bg: parentrelative window.inactive.button.toggled.unpressed.bg: parentrelative window.inactive.button.toggled.pressed.bg: parentrelative window.inactive.button.toggled.hover.bg: parentrelative window.label.text.justify: center #window.active.label.text.font: text shadow #window.inactive.label.text.font: text shadow ### MENU menu.border.width: 0 menu.separator.width: 1 menu.separator.padding.width: 10 menu.separator.padding.height: 2 menu.overlap.x: 0 menu.overlap.y: 0 menu.border.color: #aeb0b6 menu.separator.color: #a8adb5 menu.title.text.color: #D3DAE3 menu.items.text.color: #2d3036 menu.items.disabled.text.color: #76797F menu.items.active.text.color: #ffffff menu.items.active.disabled.text.color: #aeb0b6 menu.items.bg: flat solid menu.items.bg.color: #f5f6f7 menu.items.active.bg: flat solid menu.items.active.bg.color: #5294E2 menu.title.bg: flat solid menu.title.bg.color: #2d3036 menu.title.text.justify: center #menu.items.font: text shadow #menu.title.text.font: text shadow ### OSD osd.border.width: 1 osd.border.color: #2d3036 osd.label.text.color: #D3DAE3 osd.bg: flat solid osd.bg.color: #2f343f osd.label.bg: flat solid osd.label.bg.color: #2f343f osd.hilight.bg: flat solid osd.hilight.bg.color: #5294E2 osd.unhilight.bg: flat solid osd.unhilight.bg.color: #D3DAE3 #osd.label.text.font: text shadow ================================================ FILE: common/xfwm4/Makefile.am ================================================ VPATH = targets := $(shell cat $(srcdir)/assets.txt) light := $(patsubst %,light/assets/%.png,$(targets)) dark := $(patsubst %,dark/assets/%.png,$(targets)) light: $(light) dark: $(dark) light/assets dark/assets: $(MKDIR_P) "$@"/ clean: rm -rf light/assets/ dark/assets/ $(light): $(srcdir)/light/assets.svg | light/assets $(dark): $(srcdir)/dark/assets.svg | dark/assets if RENDERSVG $(light) $(dark): $(RENDERSVG) --export-id "$(basename $(notdir $@))" --dpi $(if $(filter $(OPTION_GTK2_HIDPI),true),192,96) "$<" "$@" if OPTIPNG $(OPTIPNG) -o7 --quiet "$@" endif else $(light) $(dark): $(INKSCAPE) --export-id-only --export-png="$@" --export-id="$(basename $(notdir $@))" --export-dpi=$(if $(filter $(OPTION_GTK2_HIDPI),true),192,96) "$<" >/dev/null if OPTIPNG $(OPTIPNG) -o7 --quiet "$@" endif endif .PHONY: light dark clean if ENABLE_LIGHT xfwm4themedir = $(themedir)/xfwm4 xfwm4theme_DATA = $(srcdir)/light/themerc $(light) endif if ENABLE_DARKER xfwm4themedarkerdir = $(themedarkerdir)/xfwm4 xfwm4themedarker_DATA = $(srcdir)/dark/themerc $(dark) endif if ENABLE_DARK xfwm4themedarkdir = $(themedarkdir)/xfwm4 xfwm4themedark_DATA = $(srcdir)/dark/themerc $(dark) endif EXTRA_DIST = \ assets.txt \ $(patsubst %,%/assets.svg,light dark) \ $(patsubst %,%/themerc,light dark) ================================================ FILE: common/xfwm4/assets.txt ================================================ close-active close-inactive close-prelight close-pressed hide-active hide-inactive hide-prelight hide-pressed maximize-active maximize-inactive maximize-prelight maximize-pressed menu-active menu-inactive menu-pressed shade-active shade-inactive shade-pressed stick-active stick-inactive stick-pressed title-1-active title-1-inactive title-2-active title-2-inactive title-3-active title-3-inactive title-4-active title-4-inactive title-5-active title-5-inactive top-left-active top-left-inactive top-right-active top-right-inactive left-active left-inactive right-active right-inactive bottom-active bottom-inactive bottom-left-active bottom-left-inactive bottom-right-active bottom-right-inactive ================================================ FILE: common/xfwm4/dark/themerc ================================================ button_offset=2 button_spacing=4 show_app_icon=true full_width_title=true title_shadow_active=false title_shadow_inactive=false title_horizontal_offset=3 active_text_color=#afb8c5 active_text_shadow_color=#2f343b inactive_text_color=#808791 inactive_text_shadow_color=#2f343b shadow_delta_height=2 shadow_delta_width=0 shadow_delta_x=0 shadow_delta_y=-5 shadow_opacity=40 ================================================ FILE: common/xfwm4/light/themerc ================================================ button_offset=2 button_spacing=4 show_app_icon=true full_width_title=true title_shadow_active=false title_shadow_inactive=false title_horizontal_offset=3 active_text_color=#70788d active_text_shadow_color=#e7e8eb inactive_text_color=#979dac inactive_text_shadow_color=#e7e8eb shadow_delta_height=2 shadow_delta_width=0 shadow_delta_x=0 shadow_delta_y=-5 shadow_opacity=40 ================================================ FILE: configure.ac ================================================ AC_INIT( [arc-theme], [20190917], [https://github.com/arc-design/arc-theme/issues], [arc-theme], [https://github.com/arc-design/arc-theme], [] ) AC_CONFIG_AUX_DIR([build-aux]) AC_CONFIG_MACRO_DIR([m4]) AM_INIT_AUTOMAKE([no-dist-gzip dist-xz foreign]) AC_PROG_LN_S AC_PROG_MKDIR_P ARC_ENABLE([LIGHT], [light], [Arc Light], [disable]) ARC_ENABLE([DARKER], [darker], [Arc Darker], [disable]) ARC_ENABLE([DARK], [dark], [Arc Dark], [disable]) ARC_ENABLE([CINNAMON], [cinnamon], [Cinnamon], [disable]) ARC_ENABLE([GNOME_SHELL], [gnome-shell], [GNOME Shell], [disable]) ARC_ENABLE([GTK2], [gtk2], [GTK2], [disable]) ARC_ENABLE([GTK3], [gtk3], [GTK3], [disable]) ARC_ENABLE([METACITY], [metacity], [Metacity], [disable]) ARC_ENABLE([UNITY], [unity], [Unity], [disable]) ARC_ENABLE([XFWM], [xfwm], [XFWM], [disable]) ARC_ENABLE([TRANSPARENCY], [transparency], [transparency], [disable]) ARC_ENABLE([PLANK], [plank], [Plank theme], [disable]) ARC_ENABLE([OPENBOX], [openbox], [Openbox], [disable]) AS_IF([test "x$ENABLE_TRANSPARENCY" != xno], [ AC_SUBST([themedir], [${datadir}/themes/Arc]) AC_SUBST([themedarkerdir], [${datadir}/themes/Arc-Darker]) AC_SUBST([themedarkdir], [${datadir}/themes/Arc-Dark]) ], [ AC_SUBST([themedir], [${datadir}/themes/Arc-solid]) AC_SUBST([themedarkerdir], [${datadir}/themes/Arc-Darker-solid]) AC_SUBST([themedarkdir], [${datadir}/themes/Arc-Dark-solid]) ]) AS_IF([test "x$ENABLE_GTK3" != xno], [ARC_GTK3]) AS_IF([test "x$ENABLE_GNOME_SHELL" != xno], [ARC_GNOME_SHELL]) AS_IF([test "x$ENABLE_GTK2" != xno -o "x$ENABLE_GTK3" != xno -o "x$ENABLE_XFWM" != xno], [ AC_PATH_PROG([RENDERSVG], [rendersvg]) AS_IF([test "x$ac_cv_path_RENDERSVG" = x], [AC_MSG_WARN([rendersvg not found, using inkscape instead])]) AM_CONDITIONAL([RENDERSVG], [test ! "x$ac_cv_path_RENDERSVG" = x]) AC_PATH_PROG([INKSCAPE], [inkscape]) AS_IF([test "x$ac_cv_path_INKSCAPE" = x -a "x$RENDERSVG" = x], [AC_MSG_ERROR([inkscape not found])]) AM_CONDITIONAL([INKSCAPE], [test ! "x$ac_cv_path_INKSCAPE" = x]) AC_PATH_PROG([OPTIPNG], [optipng]) AS_IF([test "x$ac_cv_path_OPTIPNG" = x], [AC_MSG_WARN([optipng not found, PNG assets won't be optimized])]) AM_CONDITIONAL([OPTIPNG], [test ! "x$ac_cv_path_OPTIPNG" = x]) ]) AS_IF([test "x$ENABLE_GTK3" != xno -o "x$ENABLE_CINNAMON" != xno -o "x$ENABLE_GNOME_SHELL" != xno], [ AC_PATH_PROG([SASSC], [sassc]) AS_IF([test "x$ac_cv_path_SASSC" = x], [AC_MSG_ERROR([sassc not found])]) ]) AC_CONFIG_FILES([ common/gtk-2.0/Makefile common/gtk-3.0/Makefile common/gtk-3.0/3.18/Makefile common/gtk-3.0/3.20/Makefile common/xfwm4/Makefile common/Makefile extra/Makefile Makefile ]) AC_OUTPUT ================================================ FILE: extra/Arc-Plank/dock.theme ================================================ # Arc theme for Plank # Author: Horst3180 # Adapted from the default Plank theme [PlankDrawingTheme] #The roundness of the top corners. TopRoundness=2 #The roundness of the bottom corners. BottomRoundness=0 #The thickness (in pixels) of lines drawn. LineWidth=1 #The color (RGBA) of the outer stroke. OuterStrokeColor=22;;26;;38;;255 #The starting color (RGBA) of the fill gradient. FillStartColor=53;;57;;69;;242 #The ending color (RGBA) of the fill gradient. FillEndColor=53;;57;;69;;242 #The color (RGBA) of the inner stroke. InnerStrokeColor=53;;57;;69;;0 [PlankDrawingDockTheme] #The padding on the left/right dock edges, in tenths of a percent of IconSize. HorizPadding=1 #The padding on the top dock edge, in tenths of a percent of IconSize. TopPadding= 1 #The padding on the bottom dock edge, in tenths of a percent of IconSize. BottomPadding=1 #The padding between items on the dock, in tenths of a percent of IconSize. ItemPadding=2 #The size of item indicators, in tenths of a percent of IconSize. IndicatorSize=3 #The size of the icon-shadow behind every item, in tenths of a percent of IconSize. IconShadowSize=0 #The height (in percent of IconSize) to bounce an icon when the application sets urgent. UrgentBounceHeight=1.6666666666666667 #The height (in percent of IconSize) to bounce an icon when launching an application. LaunchBounceHeight=0.625 #The opacity value (0 to 1) to fade the dock to when hiding it. FadeOpacity=1 #The amount of time (in ms) for click animations. ClickTime=300 #The amount of time (in ms) to bounce an urgent icon. UrgentBounceTime=600 #The amount of time (in ms) to bounce an icon when launching an application. LaunchBounceTime=600 #The amount of time (in ms) for active window indicator animations. ActiveTime=300 #The amount of time (in ms) to slide icons into/out of the dock. SlideTime=300 #The time (in ms) to fade the dock in/out on a hide (if FadeOpacity is < 1). FadeTime=250 #The time (in ms) to slide the dock in/out on a hide (if FadeOpacity is 1). HideTime=150 #The size of the urgent glow (shown when dock is hidden), in tenths of a percent of IconSize. GlowSize=30 #The total time (in ms) to show the hidden-dock urgent glow. GlowTime=10000 #The time (in ms) of each pulse of the hidden-dock urgent glow. GlowPulseTime=2000 #The hue-shift (-180 to 180) of the urgent indicator color. UrgentHueShift=150 #The time (in ms) to move an item to its new position or its addition/removal to/from the dock. ItemMoveTime=450 ================================================ FILE: extra/Makefile.am ================================================ ithemedir = $(DESTDIR)$(themedir) ithemedarkerdir = $(DESTDIR)$(themedarkerdir) ithemedarkdir = $(DESTDIR)$(themedarkdir) install-exec-hook: install-data-local: if ENABLE_PLANK if ENABLE_LIGHT $(MKDIR_P) $(ithemedir) cp -R $(srcdir)/Arc-Plank/. $(ithemedir)/plank endif # ENABLE_LIGHT if ENABLE_DARKER $(MKDIR_P) $(ithemedarkerdir) cp -R $(srcdir)/Arc-Plank/. $(ithemedarkerdir)/plank endif # ENABLE_DARKER if ENABLE_DARK $(MKDIR_P) $(ithemedarkdir) cp -R $(srcdir)/Arc-Plank/. $(ithemedarkdir)/plank endif # ENABLE_DARK endif # ENABLE_PLANK uninstall-local: EXTRA_DIST = \ Arc-Plank ================================================ FILE: m4/arc-enable.m4 ================================================ # ARC_ENABLE(VARIABLE, FEATURE, HELP-NAME, DISABLE/ENABLE) # ----------------------------------------------------------- AC_DEFUN([ARC_ENABLE], [ AC_ARG_ENABLE( [$2], [AS_HELP_STRING( [--$4-$2], [$4 $3 support] )], [ENABLE_$1="$enableval"], [AS_IF( [test "x$4" = "xdisable"], [ENABLE_$1="yes"], [ENABLE_$1="no"] )] ) AM_CONDITIONAL([ENABLE_$1], [test "x$ENABLE_$1" = "xyes"]) AC_SUBST([ENABLE_$1]) ]) ================================================ FILE: m4/arc-gnome-shell.m4 ================================================ # ARC_GNOME_SHELL() # --------------- AC_DEFUN([ARC_GNOME_SHELL], [ GNOME_SHELL_DIR="$srcdir/common/gnome-shell" AC_ARG_WITH( [gnome-shell], [AS_HELP_STRING( [--with-gnome-shell], [gnome-shell minor version] )], [GNOME_SHELL_VERSION="$withval"], [AC_CHECK_PROG( [GNOME_SHELL_FOUND], [gnome-shell], [yes], [no] ) AS_IF( # Couldn't find gnome-shell from $PATH [test "x$GNOME_SHELL_FOUND" = xyes], [GNOME_SHELL_VERSION=`gnome-shell --version | cut -d' ' -f3`], [AC_MSG_ERROR([Could not determine GNOME Shell version. Install gnome-shell, or specify the version using '--with-gnome-shell=<version>' option.])] ) AS_IF( # Found gnome-shell, but couldn't determine the version [test -z "$GNOME_SHELL_VERSION"], [AC_MSG_ERROR([Could not determine GNOME Shell version. Try specifying the version using '--with-gnome-shell=<version>' option.])] )] ) # Trim version extras GNOME_SHELL_VERSION=`echo $GNOME_SHELL_VERSION | cut -d. -f-2` # Extra major and minor version components GNOME_SHELL_VERSMJR=`echo $GNOME_SHELL_VERSION | cut -d. -f1` GNOME_SHELL_VERSMNR=`echo $GNOME_SHELL_VERSION | cut -d. -f2` # Evenize the minor version for stable versions AS_IF( [test `expr $GNOME_SHELL_VERSMNR % 2` != "0"], [GNOME_SHELL_VERSION="$GNOME_SHELL_VERSMJR.`expr $GNOME_SHELL_VERSMNR + 1`"] ) AS_IF( [! test -e "$GNOME_SHELL_DIR/$GNOME_SHELL_VERSION"], [AC_MSG_ERROR([Invalid gnome-shell version: $GNOME_SHELL_VERSION])] ) AC_SUBST([GNOME_SHELL_VERSION]) AC_MSG_RESULT([Building for gnome-shell $GNOME_SHELL_VERSION]) ]) ================================================ FILE: m4/arc-gtk3.m4 ================================================ # ARC_GTK3() # --------------- AC_DEFUN([ARC_GTK3], [ GTK3DIR="$srcdir/common/gtk-3.0" PKG_PROG_PKG_CONFIG() AC_ARG_WITH( [gtk3], [AS_HELP_STRING( [--with-gtk3], [GTK3 minor version] )], [GTK3_VERSION="$withval"], [PKG_CHECK_EXISTS( [gtk+-3.0], [GTK3_VERSION=`$PKG_CONFIG --modversion gtk+-3.0`], [AC_MSG_ERROR([Could not determine GTK3 version. Install GTK3 and its development files (libgtk-3-dev for Debian/Ubuntu based distros and gtk3-devel for RPM based distros), or specify the version using '--with-gtk3=<version>' option.])] )] ) # Trim version extras GTK3_VERSION=`echo $GTK3_VERSION | cut -d. -f-2` # Extra major and minor version components GTK3_VERSMJR=`echo $GTK3_VERSION | cut -d. -f1` GTK3_VERSMNR=`echo $GTK3_VERSION | cut -d. -f2` AS_IF( [test "x$GTK3_VERSMJR" != x3], [AC_MSG_ERROR([Invalid GTK3 version: $GTK3_VERSION])], [test "0$GTK3_VERSMNR" -lt 17], [AC_MSG_ERROR([GTK3 version too old: $GTK3_VERSION])], [test "0$GTK3_VERSMNR" -lt 19], [GTK3_VERSION=3.18], [test "0$GTK3_VERSMNR" -lt 25], [GTK3_VERSION=3.20], [AC_MSG_ERROR([GTK3 version too new: $GTK3_VERSION])] ) AC_SUBST([GTK3_VERSION]) AC_SUBST([gtk3themedir], [${themedir}/gtk-3.0]) AC_SUBST([gtk3themedarkerdir], [${themedarkerdir}/gtk-3.0]) AC_SUBST([gtk3themedarkdir], [${themedarkdir}/gtk-3.0]) AC_MSG_RESULT([Building for GTK3 $GTK3_VERSION]) ]) ================================================ FILE: mkrelease.sh ================================================ #!/bin/bash set -e VERSION="20190917" NAME="arc-theme" git-archive-all.sh --format tar --prefix ${NAME}-${VERSION}/ --verbose -t HEAD ${NAME}-${VERSION}.tar xz -9 "${NAME}-${VERSION}.tar" gpg --default-key 1E1FB0017C998A8AE2C498A6C2EAA8A26ADC59EE --armor --detach-sign "${NAME}-${VERSION}.tar.xz" gpg --verify "${NAME}-${VERSION}.tar.xz.asc" ================================================ FILE: package.json ================================================ { "devDependencies": { "gulp": "~3.9.1", "gulp-sass": "~2.2.0", "gulp-rename": "~1.2.2" } } ================================================ FILE: scripts/darker.sh ================================================ #!/usr/bin/env bash set -ueo pipefail #set -x darker_channel() { value="$1" light_delta="$2" result="$(bc <<< "ibase=16; $value - $light_delta")" if [[ "$result" -lt 0 ]]; then result=0 fi if [[ "$result" -gt 255 ]]; then result=255 fi echo "$result" } darker() { hexinput="$(tr '[:lower:]' '[:upper:]' <<< "$1")" light_delta="${2-10}" a="$(cut -c-2 <<< "$hexinput")" b="$(cut -c3-4 <<< "$hexinput")" c="$(cut -c5-6 <<< "$hexinput")" r="$(darker_channel "$a" "$light_delta")" g="$(darker_channel "$b" "$light_delta")" b="$(darker_channel "$c" "$light_delta")" printf '%02x%02x%02x\n' "$r" "$g" "$b" } darker "$@" ================================================ FILE: scripts/mix.sh ================================================ #!/usr/bin/env bash set -ueo pipefail #set -x mix_channel() { value1="$(printf '%03d' "0x$1")" value2="$(printf '%03d' "0x$2")" ratio="$3" result="$(bc <<< "scale=0; ($value1 * 100 * $ratio + $value2 * 100 * (1 - $ratio)) / 100")" if [[ "$result" -lt 0 ]]; then result=0 elif [[ "$result" -gt 255 ]]; then result=255 fi echo "$result" } mix() { hexinput1="$(tr '[:lower:]' '[:upper:]' <<< "$1")" hexinput2="$(tr '[:lower:]' '[:upper:]' <<< "$2")" ratio="${3-0.5}" a="$(cut -c-2 <<< "$hexinput1")" b="$(cut -c3-4 <<< "$hexinput1")" c="$(cut -c5-6 <<< "$hexinput1")" d="$(cut -c-2 <<< "$hexinput2")" e="$(cut -c3-4 <<< "$hexinput2")" f="$(cut -c5-6 <<< "$hexinput2")" r="$(mix_channel "$a" "$d" "$ratio")" g="$(mix_channel "$b" "$e" "$ratio")" b="$(mix_channel "$c" "$f" "$ratio")" printf '%02x%02x%02x\n' "$r" "$g" "$b" } mix "$@"