Repository: EliverLara/Nordic-Polar Branch: master Commit: 2d484d28515f Files: 167 Total size: 2.1 MB Directory structure: gitextract_yijxp545/ ├── .gitignore ├── Gulpfile.js ├── LICENSE ├── README.md ├── cinnamon/ │ ├── _colors.scss │ ├── _common.scss │ ├── _dialogs.scss │ ├── _drawing.scss │ ├── cinnamon-dark.css │ ├── cinnamon-dark.scss │ ├── cinnamon.css │ └── cinnamon.scss ├── gnome-shell/ │ ├── _colors.scss │ ├── _common.scss │ ├── _cosmic.scss │ ├── _drawing.scss │ ├── _extensions.scss │ ├── earlier-versions/ │ │ ├── _common.scss │ │ ├── gnome-shell.css │ │ └── gnome-shell.scss │ ├── extensions/ │ │ └── _openweather.scss │ ├── gnome-shell.css │ └── gnome-shell.scss ├── gtk-2.0/ │ ├── apps/ │ │ ├── chrome.rc │ │ ├── gimp.rc │ │ ├── libreoffice.rc │ │ ├── terminal.rc │ │ ├── thunar.rc │ │ └── xfce.rc │ ├── assets.txt │ ├── gtkrc │ ├── links.fish │ ├── main.rc │ └── render-assets.sh ├── gtk-3.0/ │ ├── _apps.scss │ ├── _colors-public.scss │ ├── _colors.scss │ ├── _common.scss │ ├── _drawing.scss │ ├── _elementary-colors.scss │ ├── _nord.scss │ ├── _widgets.scss │ ├── apps/ │ │ ├── _budgie.scss │ │ ├── _geary.scss │ │ ├── _gnome.scss │ │ ├── _lightdm.scss │ │ ├── _mate.scss │ │ ├── _nemo.scss │ │ ├── _pantheon.scss │ │ ├── _thunar.scss │ │ ├── _unity.scss │ │ └── _xfce.scss │ ├── gtk-dark.css │ ├── gtk-dark.scss │ ├── gtk.css │ ├── gtk.scss │ └── widgets/ │ ├── _action-bars.scss │ ├── _app-notifications.scss │ ├── _base-states.scss │ ├── _buttons.scss │ ├── _calendar.scss │ ├── _checks-radios.scss │ ├── _color-chooser.scss │ ├── _comboboxes.scss │ ├── _dialogs.scss │ ├── _entries.scss │ ├── _expanders.scss │ ├── _file-chooser.scss │ ├── _floating-bar.scss │ ├── _frames.scss │ ├── _granite.scss │ ├── _header-bars.scss │ ├── _infobars.scss │ ├── _level-bars.scss │ ├── _links.scss │ ├── _lists.scss │ ├── _menus.scss │ ├── _misc.scss │ ├── _notebooks.scss │ ├── _paned.scss │ ├── _pathbars.scss │ ├── _popovers.scss │ ├── _print-dialog.scss │ ├── _progress-bars.scss │ ├── _scales.scss │ ├── _scrollbars.scss │ ├── _sidebar.scss │ ├── _spinbuttons.scss │ ├── _spinner.scss │ ├── _switches.scss │ ├── _toolbars.scss │ ├── _tooltips.scss │ ├── _touch-copy-paste.scss │ ├── _treeviews.scss │ └── _windows.scss ├── gtk-4.0/ │ ├── _apps.scss │ ├── _common.scss │ ├── _drawing.scss │ ├── _widgets.scss │ ├── apps/ │ │ ├── _budgie.scss │ │ ├── _geary.scss │ │ ├── _gnome.scss │ │ ├── _lightdm.scss │ │ ├── _mate.scss │ │ ├── _nemo.scss │ │ ├── _pantheon.scss │ │ ├── _rnote.scss │ │ ├── _thunar.scss │ │ ├── _unity.scss │ │ └── _xfce.scss │ ├── gtk-dark.css │ ├── gtk-dark.scss │ ├── gtk.css │ ├── gtk.scss │ └── widgets/ │ ├── _action-bars.scss │ ├── _app-notifications.scss │ ├── _base-states.scss │ ├── _buttons.scss │ ├── _calendar.scss │ ├── _checks-radios.scss │ ├── _color-chooser.scss │ ├── _comboboxes.scss │ ├── _dialogs.scss │ ├── _entries.scss │ ├── _expanders.scss │ ├── _file-chooser.scss │ ├── _floating-bar.scss │ ├── _frames.scss │ ├── _granite.scss │ ├── _header-bars.scss │ ├── _infobars.scss │ ├── _level-bars.scss │ ├── _links.scss │ ├── _lists.scss │ ├── _menus.scss │ ├── _misc.scss │ ├── _notebooks.scss │ ├── _paned.scss │ ├── _pathbars.scss │ ├── _popovers.scss │ ├── _print-dialog.scss │ ├── _progress-bars.scss │ ├── _scales.scss │ ├── _scrollbars.scss │ ├── _sidebar.scss │ ├── _spinbuttons.scss │ ├── _spinner.scss │ ├── _switches.scss │ ├── _toolbars.scss │ ├── _tooltips.scss │ ├── _touch-copy-paste.scss │ ├── _treeviews.scss │ └── _windows.scss ├── index.theme ├── metacity-1/ │ ├── metacity-theme-3.xml │ └── metacity-theme.xml ├── package.json ├── src/ │ ├── render-gtk3-assets-hidpi.py │ ├── render-gtk3-assets.py │ ├── render-wm-assets-hidpi.py │ ├── render-wm-assets.py │ └── wm_controls.fish └── xfwm4/ ├── Nordic-Polar-hdpi/ │ └── xfwm4/ │ └── themerc ├── Nordic-Polar-xhdpi/ │ └── xfwm4/ │ └── themerc ├── render-assets.sh ├── render_assets.fish └── themerc ================================================ FILE CONTENTS ================================================ ================================================ FILE: .gitignore ================================================ # Dependency directories node_modules/ # Sass .sass-cache/ *.css.map _gnome-shell/ install.sh ================================================ FILE: Gulpfile.js ================================================ var gulp = require('gulp'); var sass = require('gulp-sass'); var exec = require('gulp-exec'); gulp.task('styles', function(done) { gulp.src('gtk-3.0/**/*.scss') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('./gtk-3.0/')) .pipe(exec(' gsettings set org.gnome.desktop.interface gtk-theme "Nordic-Polar"')) done(); }); gulp.task('shell-style', function(done) { gulp.src('gnome-shell/**/*.scss') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('./gnome-shell/')) .pipe(exec('gsettings set org.gnome.shell.extensions.user-theme name "Nordic-Polar"')) done(); }); //Watch task gulp.task('default',function() { gulp.watch('gtk-3.0/**/*.scss', gulp.series('styles')); }); gulp.task('shell',function() { gulp.watch('gnome-shell/**/*.scss', gulp.series('shell-style')); }); ================================================ FILE: LICENSE ================================================ 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. {one line to give the program's name and a brief idea of what it does.} Copyright (C) {year} {name of author} 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: {project} Copyright (C) {year} {fullname} 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: README.md ================================================ ![](Art/nordic.png) > Nordic Polar is a Gtk3.20+ theme created using the awesome [Nord](https://github.com/arcticicestudio/nord) color palette. #### Installation Extract the zip file to the themes directory i.e. `/usr/share/themes/` or `~/.themes/` (create it if necessary). To set the theme on Gnome, run the following commands in Terminal: ``` gsettings set org.gnome.desktop.interface gtk-theme "Nordic-Polar" gsettings set org.gnome.desktop.wm.preferences theme "Nordic-Polar" ``` or Change via distribution specific tool. ================================================ FILE: cinnamon/_colors.scss ================================================ // When color definition differs for dark and light variant, // it gets @if ed depending on $variant $base_color: $nord1; $text_color: $nord4; $bg_color: $nord2; $fg_color: $nord4; $main_dark_color: $nord0; $lime: $nord7; $red: $nord11; $orange: $nord12; $yellow: $nord13; $purple: $nord15; $darkpurple: #7b7bbd; $blue: $nord10; $cyan: $nord8; $selected_fg_color: $nord4; $selected_bg_color: if($accent == 'blue', $nord9, $nord7); $selected_borders_color: darken($selected_bg_color, 20%); $borders_color: darken($main_dark_color, 5%); $link_color: $blue; $link_visited_color:transparentize($link_color,0.5); $selection_mode_bg: if($transparency == 'true', transparentize($selected_bg_color, 0.05), $selected_bg_color); $selection_mode_fg: $selected_fg_color; $warning_color: darken($orange, 10%); $error_color: darken($red,5%); $warning_fg_color: white; $error_fg_color: white; $success_color: darken($cyan,10%); $destructive_color: darken($red,5%); $suggested_color: darken($cyan,10%); $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: mix($base_color, darken($bg_color, 8%), 30%); $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: $main_dark_color; $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: $main_dark_color; $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: cinnamon/_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: $fg_color; stage { 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: 6px; @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: 0.3em; -slider-background-color: lighten($base_color, 8%); //background of the trough -slider-border-color: transparentize($bg_color, 0.7); //trough border color -slider-active-background-color: $selected_bg_color; //active trough fill -slider-active-border-color: transparentize($bg_color, 0.7); //active trough border -slider-border-width: 1px; -slider-handle-radius: 0.5em; height: 1em; min-width: 15em; border: 0 solid transparent; border-right-width: 1px; border-left-width: 5px; color: $selected_bg_color; .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: 1px solid $borders_color; border-radius: 5px; background-color: transparentize($panel_bg, 0.01); &.top { border-radius: 0 0 5px 5px; } &.bottom { border-radius: 5px 5px 0 0; } &.left { border-radius: 0 5px 5px 0; } &.right { border-radius: 5px 0 0 5px; } &-arrow { icon-size: 16px; } .popup-sub-menu { box-shadow: none; background-color: $base_color; .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 0em 1em 0em; } .popup-menu-item { padding: .4em 1.75em; spacing: 1em; // border: 1px solid transparent; border-left-width: 0; border-right-width: 0; &:active { color: $selected_fg_color; // border-color: transparentize($fg_color, 0.89); background-color: $selected_bg_color; } &: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: 2px; -gradient-start: transparent; -gradient-end: transparent; -margin-horizontal: 1.5em; height: 1em; } .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 { // font-size: 10pt; height: 28px; width: 32px; font-weight: 700; background-color: $panel_bg; color: $fg_color; &: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; } &-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; height: 22px; &:hover {} } &-button { -natural-hpadding: 6px; -minimum-hpadding: 2px; font-weight: bold; color: $fg_color; 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: 25px; border-radius: 2px; font-size: 9pt; padding: 5px 8px; -cinnamon-caption-spacing: 4px; &#selected { background-color: $selected_bg_color; color: $selected_fg_color; border: 1px solid $selected_bg_color; spacing: 25px; } } .expo-workspaces-name-entry, .expo-workspaces-name-entry#selected { height: 15px; border-radius: 2px; font-size: 9pt; padding: 5px 8px; -cinnamon-caption-spacing: 4px; @include entry(osd); &:focus { border: 1px solid $selected_bg_color; background-color: $selected_bg_color; color: $selected_fg_color; font-style: italic; transition-duration: 300; selection-background-color: $selected_fg_color; selected-color: $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 { spacing-rows: 0; spacing-columns: 0; padding: .4em 1.75em; } .datemenu-date-label { padding: .5em 0em 1em 0em; font-weight: bold; text-align: center; color: $fg_color; } .calendar-main-box { margin: 0 .8em .5em .8em; } .calendar-events-main-box { height: 300px; margin-right: .5em; padding: .5em; min-width: 350px; border: 1px solid $borders_color; background-color: $base_color; } .calendar-events-no-events-box { } .calendar-events-no-events-button { margin: 6px 0 6px 0; padding: 6px; &:hover { background-color: $selected_bg_color; .calendar-events-no-events-icon, .calendar-events-no-events-label { color: $selected_fg_color; } } } .calendar-events-no-events-icon, .calendar-events-no-events-label { font-weight: bold; color: $fg_color; text-align: center; } .calendar-events-date-label { padding: .1em .1em .5em .1em; color: $fg_color; font-weight: bold; text-align: center; } .calendar-events-event-container { padding: 0; } .calendar-event-button { border: 1px solid rgba(0,0,0,0); .calendar-event-time-past { color: transparentize($fg_color, 0.6); font-weight: bold; text-align: left; margin-bottom: .2em; } .calendar-event-time-present { color: $fg_color; font-weight: bold; text-align: left; margin-bottom: .2em; &:all-day { color: $selected_bg_color; } } .calendar-event-time-future { color: $fg_color; font-weight: bold; text-align: left; margin-bottom: .2em; } .calendar-event-summary { color: $fg_color; text-align: left; width: 200px; } .calendar-event-countdown { text-align: right; margin-bottom: .6em; color: $fg_color; &:soon { font-weight: bold; } &:imminent { font-weight: bold; color: $warning_color; } &:current { font-weight: bold; color: $selected_bg_color; } } &:hover { background-color: $selected_bg_color; border: 1px solid $borders_color; .calendar-event-time-past, .calendar-event-time-present, .calendar-event-time-future, .calendar-event-summary { color: $selected_fg_color } .calendar-event-countdown { text-align: right; margin-bottom: .6em; color: $selected_fg_color; &:soon { font-weight: bold; } &:imminent { font-weight: bold; } &:current { font-weight: bold; } } } } .calendar-event-row-content { } .calendar-event-color-strip { width: 2px; } .calendar-today-home-button { padding: 6px; } .calendar-today-day-label { font-size: 1.75em; color: $fg_color; font-weight: bold; text-align: center; padding-bottom: .1em; } .calendar-today-date-label { font-size: 1.1em; color: $fg_color; font-weight: bold; text-align: center; } .calendar-today-home-button-enabled { padding: 6px; &:hover { background-color: $selected_bg_color; .calendar-today-day-label { color: $selected_fg_color } .calendar-today-date-label { color: $selected-fg-color } } } .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"); } } } .calendar-day-event-dot-box { margin-top: 1.7em; max-rows: 1; } .calendar-day-event-dot { margin: 1px; border-radius: 2px; width: 4px; height: 4px; } .calendar-day-base { font-size: 1em; text-align: center; width: 2.2em; height: 2.2em; padding: 0.1em; &:hover { font-weight: bold; color: $selected_fg_color; background-color: $selected_bg_color; } } .calendar-day-heading { color: transparentize($fg_color, 0.15); margin-top: 1em; font-size: 1.05em; } .calendar-day { border-width: 0; color: transparentize($fg_color, 0.1); } .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; } .calendar-today { color: $fg_color; background-color:$selected_bg_color; border-width: 0; &:selected { font-weight: bold; } } .calendar-not-today { color: $fg_color; &:selected { font-weight: bold; background-color: if($variant == 'light', transparentize($fg_color, 0.7), transparentize($fg_color, 0.6)); &:hover { font-weight: bold; color: $fg_color; } } } .calendar-other-month-day { color: transparentize($fg_color, 0.5); } .calendar-other-month-day:hover { color: $selected_fg_color; } .calendar-week-number { color: transparentize($fg_color, 0.15); font-size: 0.8em; margin-top: 0.8em; } // // Notifications // #notification { box-shadow: 0 1px 15px 4px $borders_color; border-top-color: $selected_bg_color; border-top: 4px; border-radius: 5px; background-color: $osd_bg_color; padding: 13px; spacing-rows: 5px; spacing-columns: 5px; margin-from-right-edge-of-screen: 20px; width: 34em; color: $osd_fg_color; .popup-menu & { 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: $osd_bg_color; border: 1px solid $borders_color; border-radius: 5px; box-shadow: 0px 0px 7px transparentize($borders_color, 0.2); padding: 20px; > StBoxLayout { padding: 4px; } &-item-container { spacing: 8px; } .item-box { padding: 8px; border-radius: 5px; &: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 { background-color: $bg_color; border: 1px solid $borders_color; border-radius: 5px; padding: 5px 10px; > StBoxLayout:first-child { padding: 10px; } &-button-box { spacing: 0; margin: 0px; padding: 10px; border: none; background-color: $bg_color; .modal-dialog-button { padding-top: 0; padding-bottom: 0; height: 30px; @extend %button; } } .confirm-dialog-title { text-align: center; font-weight: bold; font-size: 1.3em; padding-bottom: 12px; } } // // Run dialog // .run-dialog { padding: 10px 15px 10px 15px; border: 1px solid $borders_color; border-radius: 5px; background-color: $bg_color; > * { padding: 0; } &-label { font-size: 1.3em; font-weight: bold; color: $fg_color; padding-bottom: 15px; text-align: center; } &-description { color: $fg_color; padding-top: 15px; text-align: center; &.error { color: $error_color; } } // &-error-label { color: $error_color; } // &-error-box { // padding-top: 15px; // spacing: 5px; // } &-completion-box { padding-top: 5px; padding-left: 15px; font-size: 1em; } &-entry { width: 21em; height: 1.2em; 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(focus); } } .modal-dialog-button-box { border: none; box-shadow: none; background: 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 { margin: auto; padding: 10px; transition-duration: 300; background-color: lighten($panel_bg, 4%); border: 1px solid $borders_color; } &-favorites-button { padding: 10px; border: 1px solid rgba(0,0,0,0); &:hover { @extend %button:hover; } } &-places { &-box { margin: auto; 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: transparentize($selected_bg_color, 0.7); 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; min-height: 15px; 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 { } // New menu (since Cinnamon 6.6) $appmenu_small_padding: 5px; $appmenu_padding: 10px; $appmenu_large_padding: 15px; $base_padding: 7px; $radius: 6px; %appmenu_button { padding: $base_padding; spacing: 5px; border-radius: $radius; } .appmenu { // this can be used to color the entire menu background but we aren't using it here &-background { // using this to override the default padding on menus so widgets can span edge // to edge. The side effect is that some of our internal container widgets // will need to have a border-radius added to them or the corners will poke out // the edges of the menu. .popup-menu-content { padding: 0; } } &-main-box { spacing: $appmenu_padding; } &-right-box { spacing: $appmenu_small_padding; padding: $appmenu_padding $appmenu_padding; } &-categories-applications-box { spacing: $appmenu_large_padding; &:top { // Extra padding at the top of the categories/apps // when the search box is at the bottom padding-top: $appmenu_small_padding; } } &-applications-box { // Extra gap between the highlighted app and the scroll handle padding-right: $appmenu_small_padding; } &-search-box { spacing: $appmenu_padding; } &-sidebar { padding: $appmenu_large_padding 0px; background-color: darken($base_color, 3%); border-radius: $radius 0 0 0; @at-root .menu-top #{&} { border-radius: 0 0 0 $radius; } @at-root .menu-bottom #{&} { border-radius: $radius 0 0 0; } @at-root .menu-left #{&} { border-radius: 0; } @at-root .menu-right #{&} { border-radius: 0; } border-right-width: 1px; border-color: $borders_color; &-user-box { .user-widget-label { @extend %title_4; color: $fg_color; text-align: center; } } .appmenu-system-button { background-color: lighten($button_bg, 5%); border: none; &-lock:hover { background-color: lighten($button_bg, 15%); } &-logout:hover { background-color: lighten($button_bg, 15%); } &-shutdown { color: white; background-color: $destructive_color; } &-shutdown:hover { color: white; background-color: lighten($destructive_color, 5%); } } } &-system-box { spacing: $appmenu_padding; } &-sidebar-button { @extend %appmenu_button; padding: 4px $base_padding; margin: 0 $appmenu_padding; &:hover { background-color: lighten($button_bg, 5%); border-color: $borders_color; } } &-system-button { padding: $base_padding * 1.2; border: 1px solid $borders_color; border-radius: 9999px; background-color: lighten($button_bg, 5%); // &-shutdown { color: white; background-color: $osd_destructive_color; } // &-lock:hover { background-color: lighten($bg_color2, 10%); } // &-logout:hover { background-color: lighten($bg_color2, 10%); } // &-shutdown:hover { color: white; background-color: lighten($osd_destructive_color, 5%); } } &-application-button { @extend %appmenu_button; &-label { padding: 0; } &-description { @extend %caption; color: $insensitive_fg_color; } &:highlighted { font-weight: bold; } &-selected { @extend %appmenu_button; background-color: lighten($button_bg, 5%); &:highlighted { font-weight: bold; } } } &-category-button { @extend %appmenu_button; &-label { padding: 0; } &:hover { background-color: lighten($button_bg, 5%); } &-selected { @extend %appmenu_button; background-color: lighten($button_bg, 5%); } &-greyed { @extend %appmenu_button; color: $insensitive_fg_color; font-style: italic; StIcon { opacity: 0.5; } } } &-search-entry-icon { icon-size: 1em; } } #appmenu-search-entry { @extend %entry; } // // OSD // .info-osd { text-align: center; font-weight: bold; spacing: 1em; padding: 16px; color: $_shell_fg_color; background-color: $osd_bg_color; } .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: $osd_bg_color; border: 1px solid $borders_color; border-radius: 5px; box-shadow: 0px 0px 7px transparentize($borders_color, 0.2); .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; padding-top: 1px; &.vertical { spacing: 2px; padding-left: 0px; padding-right: 0px; padding-top: 10px; padding-bottom: 10px; } &:highlight { background-color: transparentize($error_color, 0.5); } } &-item-label { font-weight: normal; width: 15em; min-width: 5px; } &-item-box { font-weight: normal; background-image: none; padding-top: 0; padding-left: 8px; padding-right: 8px; transition-duration: 100; color: transparentize($panel_fg, 0.3); &.top, &.bottom { border-bottom-width: 2px; & StLabel { padding-left: 2px; } } &.right { padding-left: 0px; padding-right: 0px; border-right-width: 2px; & StBin { padding-right: 0; } } &.left { padding-left: 0px; padding-right: 0px; border-left-width: 2px; & StBin { padding-left: 1px; } } &:hover, &:groupFocus { color: $fg_color; border-color: lighten($button_bg, 10%); } &:active, &:checked, &:focus, &:running { color: $blue; border-color: $selected_bg_color; background-color: transparentize($blue, 0.7); } & .progress { background-color: transparentize($blue, 0.2); } } &-item-demands-attention { background-gradient-direction: vertical; background-gradient-start: $destructive_color; background-gradient-end: $destructive_color; } &-preview { spacing: 6px; color: $fg_color; border: 1px solid $borders_color; background-color: $bg_color; border-radius: 3px; padding: 6px 12px 12px 12px; font-size: 1em; } } // // Grouped window list // .grouped-window-list { &-item-label { font-weight: normal; width: 15em; min-width: 5px; } &-item-box { text-align: left; font-weight: normal; background-image: none; padding-top: 0; padding-left: 8px; padding-right: 8px; transition-duration: 100; color: transparentize($selected_fg_color, 0.4); &.top, &.bottom { border-bottom-width: 2px; & StLabel { padding-left: 2px; } } &.right { padding-left: 0px; padding-right: 0px; border-right-width: 2px; & StBin { padding-right: 0; } } &.left { padding-left: 0px; padding-right: 0px; border-left-width: 2px; & StBin { padding-left: 1px; } } &:active, &:checked { color: $fg_color; border-color: lighten($button_bg, 10%); } &:hover, &:active:hover, &:focus, &:active:focus, &:focus:hover, &:active:focus:hover { color: $selected_fg_color; border-color: $blue; background-color: transparentize($blue, 0.7); } & .progress { background-color: transparentize($blue, 0.2); } } &-item-demands-attention { background-gradient-direction: vertical; background-gradient-start: $destructive_color; background-gradient-end: $destructive_color; } &-thumbnail-label { padding-left: 4px; } &-number-label { z-index: 99; color: $fg_color; } &-badge { border-radius: 256px; background-color: $panel_bg; } &-button-label { padding-left: 4px; } &-thumbnail-alert { background: rgba(255,52,52,0.3); } &-thumbnail-menu { color: $fg_color; border: 1px solid $borders_color; background-color: $bg_color; border-radius: 3px; padding: 0px; > StBoxLayout { padding: 4px; } .item-box { padding: 10px; border-radius: 2px; spacing: 4px; &:outlined { padding: 8px; border: 1px solid $selected_bg_color; } &:selected { border: 1px solid $selected_bg_color; } } .thumbnail { width: 256px; } .separator { width: 1px; background: rgba(255,255,255,0.2); } } } /// // 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: 20px; height: 20px; border: 1px solid transparent; StIcon { icon-size: 12px; } &:hover { @include button(hover); } &:active { @include button(active); } } } &-generic-coverart { background: rgba(0,0,0,0.2); } &-overlay { width: 290px; padding: 15px; spacing: 0.5em; background: transparentize($osd_bg_color, 0.1); border-top: 1px solid $borders_color; // background: transparentize(darken($osd_bg_color, 5%), 0.1); // border: 0px solid darken($osd_bg_color, 10%); // border-bottom: 1px ; color: $fg_color; StButton { width: 22px; height: 13px; padding: 5px; color: $fg_color; border-radius: 2px; border: 1px solid transparent; StIcon { icon-size: 16px; } &:hover{ @include button(osd-hover); } &:active { @include button(active); } } StBoxLayout { padding-top: 2px; } > StBoxLayout { spacing: 5px; } } .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 { background-color: $button_bg; color: $selected_fg_color; } &:hover { color: $blue; } } /* 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-left: 7px; spacing: 2px; & .launcher { padding-left: 2px; padding-right: 2px; padding-bottom: 2px; // border-bottom-width: 1px; transition-duration: 200; &:hover { background-color: transparentize($panel_fg, 0.9); } } &.vertical { padding-top: 2px; padding-bottom: 2px; padding-left:0px; padding-right: 0px; spacing: 1px; & .launcher { padding-top: 2px; padding-bottom: 2px; } } } // // 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; 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: $fg_color; &:highlight { background-color: transparentize($error_color, 0.5); } &-with-borders { border: 1px solid $borders_color; border-radius: 5px; background-color: $bg_color; color: $fg_color; padding: 12px; padding-bottom: 16px; &:highlight { background-color: transparentize($error_color, 0.5); } } &-with-borders-and-header { border: 1px solid $borders_color; border-top-width: 0; border-radius: 0 0 5px 5px; background-color: $bg_color; color: $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: 1px solid $borders_color; border-radius: 5px 5px 0 0; background-color: darken($bg_color, 3%); color: $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: 1px solid $borders_color; border-radius: 5px; background-color: $bg_color; color: $fg_color; padding: 12px; padding-bottom: 16px; } // // Workspace OSD // /*FIXME*/ .workspace-osd { /*color: red;*/ text-shadow: none; font-weight: bold; font-size: 38pt; background-color: $osd_bg_color; border-radius: 20px; border: 1px solid $borders_color; box-shadow: 0px 0px 38px $borders_color; } // // 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: cinnamon/_dialogs.scss ================================================ // Modal dialogs $base_padding: 6px; $base_margin: 4px; $dialog_radius: 18px; $osd_radius: 18px; $radius: 6px; // Mixin to convert provided font size in pt to em units @mixin fontsize($size, $base: 16px, $unit: pt) { // if pt, convert into unitless value with the assumption: 1pt = 1.091px $adjusted_size: if($unit == pt, $size * 1.091, $size) * 1000; $rounded_size: round($adjusted_size / $base) / 1000; font-size: $rounded_size * 1em; } // Button drawing function @mixin styled_button($type, $tc:$fg_color, $c:$bg_color, $style: null) { // // $type: button type, possible values: // - normal, focus, hover, active, checked, insensitive, default, undecorated // $c: button bg color, derived from bg_color // $tc: button text color, derived from fg_color // $style: button style, possible values: flat, default // // mix input colors to get button background color $button_bg_color: $button_bg; // background color mix override for flat style; the button bg color is the background color input @if $style == 'flat' { $button_bg_color: $c;} // background color mix override for default button style @if $style == 'default' { $button_bg_color: $c;} // button base state background colors $hover_button_bg_color: if($variant =='light', darken($button_bg_color, 10%), lighten($button_bg_color, 10%)); $active_button_bg_color: if($variant =='light', lighten($hover_button_bg_color, 5%), darken($hover_button_bg_color, 5%)); $checked_button_bg_color: if($variant =='light', lighten($hover_button_bg_color, 5%), darken($hover_button_bg_color, 5%)); $insensitive_button_bg_color: if($variant =='light', lighten($button_bg_color, 3%), darken($button_bg_color, 3%)); $focus_button_bg_border_color: if($variant =='light', darken($button_bg_color, 30%), lighten($button_bg_color, 15%)); border: 1px solid $button_bg_color; // flat style overrides @if $style == 'flat' { $insensitive_button_bg_color: $button_bg_color; } // normal style @if $type == 'normal' { color: $tc; background-color: $button_bg_color; } @if $type == 'focus' { color: $tc; background-color: $button_bg_color; border: 1px solid $focus_button_bg_border_color; } // hover button @else if $type == 'hover' { color: $tc; background-color: $hover_button_bg_color; } // active button @else if $type == 'active' { color: $tc; background-color: $active_button_bg_color; } // checked button @else if $type == 'checked' { color: $tc; background-color: $checked_button_bg_color; } // insensitive button @else if $type == 'insensitive' { $insensitive_button_fg_color: transparentize($tc, .5); color: $insensitive_button_fg_color; background-color: $insensitive_button_bg_color; } // reset (unstyled button) @else if $type == 'undecorated' { background-color: transparent; border-color: transparent; box-shadow: none; &:insensitive { background-color: transparent !important; } } } %caption_heading { font-weight: 700; @include fontsize(9pt); } %caption { font-weight: 400; @include fontsize(9pt); } %title_2 { font-weight: 800; @include fontsize(15pt); } %title_4 { font-weight: 700; @include fontsize(13pt); } %heading { font-weight: 700; @include fontsize(11pt); } %flat_styled_button { @include styled_button(normal, $style: flat); &:focus { @include styled_button(focus, $style: flat); } &:hover { @include styled_button(hover, $style: flat); } &:insensitive { @include styled_button(insensitive, $style: flat); } &:selected, &:active { @include styled_button(active, $style: flat); } &:checked { @include styled_button(checked, $style: flat); } } %dialog_button { font-weight: bold; padding: $base_padding * 2; border-radius: $radius; @include styled_button(normal); &:focus { @include styled_button(focus); } &:hover { @include styled_button(hover); } &:active { @include styled_button(active); } &:checked { @include styled_button(checked); } &:insensitive { @include styled_button(insensitive); } } %dialog_button_default { @extend %dialog_button; @include styled_button(normal, $c: $selected_bg_color, $style: default); &:focus { @include styled_button(focus, $c: $selected_bg_color, $style: default); } &:hover { @include styled_button(hover, $c: $selected_bg_color, $style: default); } &:active { @include styled_button(active, $c: $selected_bg_color, $style: default); } &:checked { @include styled_button(checked, $c: $selected_bg_color, $style: default); } &:insensitive { border-color: $borders_color; @include styled_button(insensitive); } } %dialog_button_destructive { @extend %dialog_button; @include styled_button(normal, $c: $destructive_color, $style: default); &:focus { @include styled_button(focus, $c: $destructive_color, $style: default); //border-color: darken($destructive_color, 15%); } &:hover { @include styled_button(hover, $c: $destructive_color, $style: default); } &:active { @include styled_button(active, $c: $destructive_color, $style: default); } &:checked { @include styled_button(checked, $c: $destructive_color, $style: default); } &:insensitive { border-color: $borders_color; @include styled_button(insensitive); } } .dialog { background-color: $panel_bg; border-radius: $dialog_radius; border: 1px solid $borders_color; padding: $base_padding * 3; .dialog-content-box { margin-top: $base_margin * 2; margin-bottom: $base_margin * 4; spacing: $base_margin * 8; max-width: 28em; } .dialog-button { @extend %dialog_button; &:default { @extend %dialog_button_default; } &:destructive-action { @extend %dialog_button_destructive; } } .confirm-dialog-title { @extend %title_2; text-align: center; } } // Lists in dialogs .dialog-list { spacing: $base_padding * 3; .dialog-list-title { @extend %heading; text-align: center; } .dialog-list-scrollview { max-height: 200px; } .dialog-list-box { spacing: 1em; .dialog-list-item { spacing: 1em; .dialog-list-item-title { font-weight: bold; } .dialog-list-item-description { @extend %caption; color: darken($fg_color, 5%); } } } } // End session dialog .end-session-dialog { min-width: 40em; .dialog-content-box { spacing: 0; } .dialog-list { spacing: 0; .dialog-list-title { color: $warning_color; background-color: tranparentize($warning_color, 0.9); padding: $base_padding * 1.5; border-radius: $osd_radius; margin: $base_margin 0; } } } // message dialog .message-dialog-content { spacing: $base_padding * 3; .message-dialog-title { text-align: center; @extend %title_2; &.lightweight { @extend %title_4; } } .message-dialog-description { text-align: center; } .message-dialog-caption { @extend %caption; text-align: center; } } // run dialog .run-dialog { .dialog-content-box { margin: $base_margin; } &-description { @extend %caption; text-align: center; color: darken($fg_color, 20%); &.error { color: $error_color; } } &-completion-box { padding-top: $base_padding; padding-left: $base_padding * 2; } &-entry { @extend %entry; width: 20em; height: 1.2em; } } // password or authentication dialog .prompt-dialog { width: 28em; .dialog-content-box { spacing: $base_margin * 4; margin-bottom: $base_margin * 3; } &-password-entry { @extend %entry; width: 20em; } &-password-layout { spacing: $base_margin * 2;} &-error-label, &-info-label, &-null-label { text-align: center; @extend %caption; } &-error-label { color: $error_color; } } // polkit dialog .polkit-dialog { &-user-layout { text-align: center; spacing: 2px; } &-user-combo { @extend %flat_styled_button; @extend %heading; border-radius: $radius; padding: $base_padding $base_padding * 6; // special case the :insensitive button sinc we want // the label to be the normal color when there are // not multiple users &:insensitive { color: $fg_color; } } } // Audio selection dialog .audio-device-selection-dialog { min-width: 24em; .audio-selection-box { spacing: $base_padding *2; .audio-selection-device { @extend %flat_styled_button; border-radius: $osd_radius; .audio-selection-device-box { padding: $base_padding * 2; spacing: $base_padding * 2; } .audio-selection-device-icon { icon-size: 64px;} } } } // various on screen popups %osd_base { background-color: $panel_bg; border: 1px solid $borders_color; border-radius: $osd_radius; text-align: center; padding: $base_padding * 4; } // media keys osd .media-keys-osd { @extend %osd_base; @extend %title_4; margin-bottom: 1em; border-radius: $osd_radius; font-weight: bold; spacing: $base_padding * 2; padding: $base_padding * 2 $base_padding * 4; & > * { spacing: $base_padding * 2; } StIcon { icon-size: 32px; } StLabel { &:ltr { margin-right: $base_padding; } &:rtl { margin-left: $base_padding; } } .level { min-width: 160px; -barlevel-height: 6px; -barlevel-background-color: lighten($base_color, 8%); -barlevel-active-background-color: $selected_bg_color; -barlevel-amplify-color: $warning_color; -barlevel-amplify-separator-width: $base_padding * 0.5; &:ltr { margin-right: $base_padding; } &:rtl { margin-left: $base_padding; } } .level-bar { border-radius: $osd_radius; background-color: $fg_color; } } .info-osd { @extend %osd_base; font-size: 1.2em; font-weight: 700; text-align: center; } .workspace-switch-osd { @extend %osd_base; @extend %title_4; min-width: 140px; margin-bottom: 1em; border-radius: $osd_radius; font-weight: bold; padding: $base_padding * 2 $base_padding * 6 0 $base_padding * 6; &-indicator-box { spacing: $base_padding * 2; } &-indicator { background-color: transparentize($fg_color, 0.5); padding: 3px; margin: 15px; border-radius: 36px; &:active { background-color: $selected_bg_color; padding: 6px; margin: 12px; } } } .monitor-label { border-radius: 0; color: black; padding: $base_padding * 2; text-align: center; } // resize popup .resize-popup { color: $fg_color; background-color: $bg_color; border-radius: $radius; padding: $base_padding * 2; } ================================================ FILE: cinnamon/_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: cinnamon/cinnamon-dark.css ================================================ stage { color: #d8dee9; } .label-shadow { color: rgba(0, 0, 0, 0); } .popup-menu #notification .notification-button, .popup-menu #notification .notification-icon-button, .modal-dialog-button-box .modal-dialog-button, .sound-button { min-height: 20px; padding: 5px 32px; transition-duration: 0; text-shadow: 0 1px rgba(59, 66, 82, 0); color: #d8dee9; background-color: #3f4758; border: 1px solid #232831; box-shadow: inset 0 2px 4px rgba(63, 71, 88, 0.05); } .popup-menu #notification .notification-button, .popup-menu #notification .notification-icon-button, .modal-dialog-button-box .modal-dialog-button, .sound-button, .popup-menu #notification .notification-button:focus, .popup-menu #notification .notification-icon-button:focus, .modal-dialog-button-box .modal-dialog-button:focus, .sound-button:focus, .popup-menu #notification .notification-button:hover, .popup-menu #notification .notification-icon-button:hover, .modal-dialog-button-box .modal-dialog-button:hover, .menu-favorites-button:hover, .menu-application-button-selected, .menu-category-button-selected, .sound-button:hover, .popup-menu #notification .notification-button:hover:focus, .popup-menu #notification .notification-icon-button:hover:focus, .modal-dialog-button-box .modal-dialog-button:hover:focus, .menu-favorites-button:focus:hover, .menu-application-button-selected:focus, .menu-category-button-selected:focus, .sound-button:hover:focus, .popup-menu #notification .notification-button:active, .popup-menu #notification .notification-icon-button:active, .modal-dialog-button-box .modal-dialog-button:active, .sound-button:active, .popup-menu #notification .notification-button:active:focus, .popup-menu #notification .notification-icon-button:active:focus, .modal-dialog-button-box .modal-dialog-button:active:focus, .sound-button:active:focus, .popup-menu #notification .notification-button:insensitive, .popup-menu #notification .notification-icon-button:insensitive, .modal-dialog-button-box .modal-dialog-button:insensitive, .sound-button:insensitive { border-radius: 2px; } .popup-menu #notification .notification-button:focus, .popup-menu #notification .notification-icon-button:focus, .modal-dialog-button-box .modal-dialog-button:focus, .sound-button:focus { text-shadow: 0 1px rgba(59, 66, 82, 0); color: #d8dee9; background-color: #3f4758; border: 1px solid #8fbcbb; box-shadow: inset 0 2px 4px rgba(63, 71, 88, 0.05); } .popup-menu #notification .notification-button:hover, .popup-menu #notification .notification-icon-button:hover, .modal-dialog-button-box .modal-dialog-button:hover, .menu-favorites-button:hover, .menu-application-button-selected, .menu-category-button-selected, .sound-button:hover { text-shadow: 0 1px rgba(59, 66, 82, 0); color: #d8dee9; background-color: #4a5367; border: 1px solid #232831; box-shadow: inset 0 2px 4px rgba(74, 83, 103, 0.05); } .popup-menu #notification .notification-button:hover:focus, .popup-menu #notification .notification-icon-button:hover:focus, .modal-dialog-button-box .modal-dialog-button:hover:focus, .menu-favorites-button:focus:hover, .menu-application-button-selected:focus, .menu-category-button-selected:focus, .sound-button:hover:focus { text-shadow: 0 1px rgba(59, 66, 82, 0); color: #d8dee9; background-color: #3f4758; border: 1px solid #8fbcbb; box-shadow: inset 0 2px 4px rgba(63, 71, 88, 0.05); } .popup-menu #notification .notification-button:active, .popup-menu #notification .notification-icon-button:active, .modal-dialog-button-box .modal-dialog-button:active, .sound-button:active, .popup-menu #notification .notification-button:active:focus, .popup-menu #notification .notification-icon-button:active:focus, .modal-dialog-button-box .modal-dialog-button:active:focus, .sound-button:active:focus { text-shadow: 0 1px rgba(59, 66, 82, 0); color: #d8dee9; background-color: #8fbcbb; border: 1px solid #8fbcbb; box-shadow: inset 0 2px 4px #8fbcbb; } .popup-menu #notification .notification-button:insensitive, .popup-menu #notification .notification-icon-button:insensitive, .modal-dialog-button-box .modal-dialog-button:insensitive, .sound-button:insensitive { text-shadow: 0 1px rgba(59, 66, 82, 0); color: rgba(216, 222, 233, 0.45); border: 1px solid rgba(35, 40, 49, 0.55); background-color: rgba(63, 71, 88, 0.55); box-shadow: inset 0 2px 4px rgba(63, 71, 88, 0.05); } .notification-button, .notification-icon-button { min-height: 20px; padding: 5px 32px; transition-duration: 0; border-radius: 2px; text-shadow: 0 1px rgba(59, 66, 82, 0); color: #BAC3CF; border: 1px solid rgba(20, 23, 28, 0.4); background-color: rgba(93, 105, 129, 0.4); } .notification-button:hover, .notification-icon-button:hover { text-shadow: 0 1px rgba(59, 66, 82, 0); color: #BAC3CF; border: 1px solid rgba(20, 23, 28, 0.4); background-color: rgba(108, 122, 150, 0.5); } .notification-button:focus, .notification-icon-button:focus { color: #8fbcbb; } .notification-button:active, .notification-icon-button:active { text-shadow: 0 1px rgba(59, 66, 82, 0); color: #d8dee9; border: 1px solid #8fbcbb; background-color: #8fbcbb; } .notification-button:insensitive, .notification-icon-button:insensitive { text-shadow: 0 1px rgba(59, 66, 82, 0); color: #585f6b; border: 1px solid rgba(20, 23, 28, 0.4); background-color: rgba(93, 105, 129, 0.25); } .popup-menu #notification StEntry, #menu-search-entry, #appmenu-search-entry, .run-dialog-entry, .prompt-dialog-password-entry { padding: 7px; caret-size: 1px; selection-background-color: #8fbcbb; selected-color: #d8dee9; transition-duration: 300ms; border-radius: 6px; color: #d8dee9; background-color: #3b4252; border: 1px solid #232831; box-shadow: inset 0 2px 4px rgba(59, 66, 82, 0.05); } .popup-menu #notification StEntry:focus, #menu-search-entry:focus, #appmenu-search-entry:focus, .run-dialog-entry:focus, .prompt-dialog-password-entry:focus, .popup-menu #notification StEntry:hover, #menu-search-entry:hover, #appmenu-search-entry:hover, .run-dialog-entry:hover, .prompt-dialog-password-entry:hover { color: #d8dee9; background-color: #3b4252; border: 1px solid #8fbcbb; box-shadow: inset 0 2px 4px rgba(59, 66, 82, 0.05); } .popup-menu #notification StEntry:insensitive, #menu-search-entry:insensitive, #appmenu-search-entry:insensitive, .run-dialog-entry:insensitive, .prompt-dialog-password-entry:insensitive { color: rgba(216, 222, 233, 0.45); background-color: #3f4757; border-color: 1px solid #313845; box-shadow: inset 0 2px 4px rgba(63, 71, 87, 0.05); } .popup-menu #notification StEntry StIcon.capslock-warning, #menu-search-entry StIcon.capslock-warning, #appmenu-search-entry StIcon.capslock-warning, .run-dialog-entry StIcon.capslock-warning, .prompt-dialog-password-entry StIcon.capslock-warning { icon-size: 16px; warning-color: #c3674a; padding: 0 4px; } .notification StEntry { padding: 7px; caret-size: 1px; caret-color: #BAC3CF; selection-background-color: #8fbcbb; selected-color: #d8dee9; transition-duration: 300ms; border-radius: 3px; color: #BAC3CF; background-color: rgba(93, 105, 129, 0.4); border: 1px solid rgba(20, 23, 28, 0.4); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } .notification StEntry:focus { color: #d8dee9; background-color: #8fbcbb; border: 1px solid #8fbcbb; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } .notification StEntry:insensitive { color: rgba(186, 195, 207, 0.55); background-color: rgba(93, 105, 129, 0.25); border: 1px solid rgba(20, 23, 28, 0.4); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } StScrollView.vfade { -st-vfade-offset: 0px; } StScrollView.hfade { -st-hfade-offset: 0px; } StScrollBar { padding: 8px; } StScrollView StScrollBar { min-width: 5px; min-height: 5px; } StScrollBar StBin#trough { background-color: rgba(59, 66, 82, 0.1); border-radius: 8px; } StScrollBar StButton#vhandle, StScrollBar StButton#hhandle { border-radius: 2px; background-color: #7f8696; border: 0px solid; margin: 0px; } StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover { background-color: #707888; } StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { background-color: #8fbcbb; } .separator { -gradient-height: 1px; -gradient-start: rgba(0, 0, 0, 0); -gradient-end: rgba(0, 0, 0, 0); -margin-horizontal: 1.5em; height: 1em; } .popup-slider-menu-item, .slider { -slider-height: 0.3em; -slider-background-color: #4c556a; -slider-border-color: rgba(67, 76, 94, 0.3); -slider-active-background-color: #8fbcbb; -slider-active-border-color: rgba(67, 76, 94, 0.3); -slider-border-width: 1px; -slider-handle-radius: 0.5em; height: 1em; min-width: 15em; border: 0 solid transparent; border-right-width: 1px; border-left-width: 5px; color: #8fbcbb; } .popup-menu-item:active .popup-slider-menu-item, .popup-menu-item:active .slider { -slider-background-color: rgba(0, 0, 0, 0.2); -slider-active-background-color: #d8dee9; } .check-box CinnamonGenericContainer { spacing: .2em; min-height: 30px; padding-top: 2px; } .check-box StLabel { font-weight: normal; } .check-box StBin { width: 16px; height: 16px; background-image: url("dark-assets/checkbox/checkbox-unchecked.svg"); } .check-box:focus StBin { background-image: url("dark-assets/checkbox/checkbox-unchecked-focused.svg"); } .check-box:checked StBin { background-image: url("dark-assets/checkbox/checkbox-checked.svg"); } .check-box:focus:checked StBin { background-image: url("dark-assets/checkbox/checkbox-checked-focused.svg"); } .radiobutton CinnamonGenericContainer { spacing: .2em; height: 26px; padding-top: 2px; } .radiobutton StLabel { padding-top: 4px; font-size: 0.9em; box-shadow: none; } .radiobutton StBin { width: 16px; height: 16px; background-image: url("dark-assets/checkbox/checkbox-unchecked.svg"); } .radiobutton:focus StBin { background-image: url("dark-assets/checkbox/checkbox-unchecked-focused.svg"); } .radiobutton:checked StBin { background-image: url("dark-assets/checkbox/checkbox-checked.svg"); } .radiobutton:focus:checked StBin { background-image: url("dark-assets/checkbox/checkbox-checked-focused.svg"); } .toggle-switch { width: 50px; height: 20px; background-size: contain; background-image: url("dark-assets/switch/switch-off.svg"); } .toggle-switch:checked { background-image: url("dark-assets/switch/switch-on.svg"); } .popup-menu-item:active .toggle-switch { background-image: url("common-assets/switch/switch-off-selected.svg"); } .popup-menu-item:active .toggle-switch:checked { background-image: url("common-assets/switch/switch-on-selected.svg"); } .cinnamon-link { color: #5e81ac; text-decoration: underline; } .cinnamon-link:hover { color: #809bbd; } #Tooltip { border-radius: 3px; padding: 5px 12px; background-color: #2e3440; color: #BAC3CF; font-size: 1em; font-weight: normal; text-align: center; } .menu, .popup-menu, .popup-combo-menu { color: #d8dee9; border: 1px solid #232831; border-radius: 5px; background-color: rgba(46, 52, 64, 0.99); } .menu.top, .popup-menu.top, .top.popup-combo-menu { border-radius: 0 0 5px 5px; } .menu.bottom, .popup-menu.bottom, .bottom.popup-combo-menu { border-radius: 5px 5px 0 0; } .menu.left, .popup-menu.left, .left.popup-combo-menu { border-radius: 0 5px 5px 0; } .menu.right, .popup-menu.right, .right.popup-combo-menu { border-radius: 5px 0 0 5px; } .menu-arrow, .popup-menu-arrow { icon-size: 16px; } .menu .popup-sub-menu, .popup-menu .popup-sub-menu, .popup-combo-menu .popup-sub-menu { box-shadow: none; background-color: #3b4252; } .menu .popup-sub-menu .popup-menu-item:ltr, .popup-menu .popup-sub-menu .popup-menu-item:ltr, .popup-combo-menu .popup-sub-menu .popup-menu-item:ltr { padding-right: 0em; } .menu .popup-sub-menu .popup-menu-item:rtl, .popup-menu .popup-sub-menu .popup-menu-item:rtl, .popup-combo-menu .popup-sub-menu .popup-menu-item:rtl { padding-left: 0em; } .menu .popup-sub-menu StScrollBar, .popup-menu .popup-sub-menu StScrollBar, .popup-combo-menu .popup-sub-menu StScrollBar { padding: 4px; } .menu .popup-sub-menu StScrollBar StBin#trough, .menu .popup-sub-menu StScrollBar StBin#vhandle, .popup-menu .popup-sub-menu StScrollBar StBin#trough, .popup-menu .popup-sub-menu StScrollBar StBin#vhandle, .popup-combo-menu .popup-sub-menu StScrollBar StBin#trough, .popup-combo-menu .popup-sub-menu StScrollBar StBin#vhandle { border-width: 0; } .menu .popup-menu-content, .popup-menu .popup-menu-content, .popup-combo-menu .popup-menu-content { padding: 1em 0em 1em 0em; } .menu .popup-menu-item, .popup-menu .popup-menu-item, .popup-combo-menu .popup-menu-item { padding: .4em 1.75em; spacing: 1em; border-left-width: 0; border-right-width: 0; } .menu .popup-menu-item:active, .popup-menu .popup-menu-item:active, .popup-combo-menu .popup-menu-item:active { color: #d8dee9; background-color: #8fbcbb; } .menu .popup-menu-item:insensitive, .popup-menu .popup-menu-item:insensitive, .popup-combo-menu .popup-menu-item:insensitive { color: rgba(216, 222, 233, 0.5); background: none; } .menu .popup-inactive-menu-item, .popup-menu .popup-inactive-menu-item, .popup-combo-menu .popup-inactive-menu-item { color: #d8dee9; } .menu .popup-inactive-menu-item:insensitive, .popup-menu .popup-inactive-menu-item:insensitive, .popup-combo-menu .popup-inactive-menu-item:insensitive { color: rgba(216, 222, 233, 0.45); } .menu .popup-menu-item:active .popup-inactive-menu-item, .popup-menu .popup-menu-item:active .popup-inactive-menu-item, .popup-combo-menu .popup-menu-item:active .popup-inactive-menu-item { color: #d8dee9; } .menu-icon, .popup-menu-icon { icon-size: 16px; } .popup-menu-boxpointer { -arrow-border-radius: 3px; -arrow-background-color: rgba(0, 0, 0, 0); -arrow-border-width: 1px; -arrow-border-color: rgba(0, 0, 0, 0); -arrow-base: 0; -arrow-rise: 0; } .popup-combo-menu { padding: 10px 1px; } .popup-combobox-item { spacing: 1em; } .popup-separator-menu-item { -gradient-height: 2px; -gradient-start: transparent; -gradient-end: transparent; -margin-horizontal: 1.5em; height: 1em; } .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 { height: 28px; width: 32px; font-weight: 700; background-color: #2e3440; color: #d8dee9; } #panel:highlight { border-image: none; background-color: rgba(184, 79, 89, 0.5); } #panelLeft { spacing: 4px; } #panelLeft:dnd { background-gradient-direction: vertical; background-gradient-start: rgba(255, 0, 0, 0.05); background-gradient-end: rgba(255, 0, 0, 0.2); } #panelLeft:ltr { padding-right: 4px; } #panelLeft:rtl { padding-left: 4px; } #panelLeft.vertical { padding: 0; } #panelLeft.vertical:ltr { padding-right: 0px; } #panelLeft.vertical:rtl { padding-left: 0px; } #panelRight:dnd { background-gradient-direction: vertical; background-gradient-start: rgba(0, 0, 255, 0.05); background-gradient-end: rgba(0, 0, 255, 0.2); } #panelRight:ltr { padding-left: 4px; spacing: 0px; } #panelRight:rtl { padding-right: 4px; spacing: 0px; } #panelRight.vertical { padding: 0; } #panelRight.vertical:ltr { padding-right: 0px; } #panelRight.vertical:rtl { padding-left: 0px; } #panelCenter { spacing: 4px; } #panelCenter:dnd { background-gradient-direction: vertical; background-gradient-start: rgba(0, 255, 0, 0.05); background-gradient-end: rgba(0, 255, 0, 0.2); } .panel-top, .panel-bottom, .panel-left, .panel-right { color: #d8dee9; font-size: 1em; padding: 0px; } .panel-dummy { background-color: rgba(184, 79, 89, 0.5); } .panel-dummy:entered { background-color: rgba(184, 79, 89, 0.6); } .panel-status-button { border-width: 0; -natural-hpadding: 3px; -minimum-hpadding: 3px; font-weight: bold; color: white; height: 22px; } .panel-button { -natural-hpadding: 6px; -minimum-hpadding: 2px; font-weight: bold; color: #d8dee9; transition-duration: 100; } .system-status-icon { icon-size: 16px; padding: 0 1px; } #overview { spacing: 12px; } .window-caption { background-color: #2e3440; border: 1px solid #2e3440; color: #BAC3CF; spacing: 25px; border-radius: 2px; font-size: 9pt; padding: 5px 8px; -cinnamon-caption-spacing: 4px; } .window-caption#selected { background-color: #8fbcbb; color: #d8dee9; border: 1px solid #8fbcbb; spacing: 25px; } .expo-workspaces-name-entry, .expo-workspaces-name-entry#selected { height: 15px; border-radius: 2px; font-size: 9pt; padding: 5px 8px; -cinnamon-caption-spacing: 4px; color: #BAC3CF; background-color: rgba(93, 105, 129, 0.4); border: 1px solid rgba(20, 23, 28, 0.4); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } .expo-workspaces-name-entry:focus, .expo-workspaces-name-entry#selected:focus { border: 1px solid #8fbcbb; background-color: #8fbcbb; color: #d8dee9; font-style: italic; transition-duration: 300; selection-background-color: #d8dee9; selected-color: #8fbcbb; } .expo-workspace-thumbnail-frame { border: 4px solid rgba(255, 255, 255, 0); background-color: rgba(255, 255, 255, 0); border-radius: 2px; } .expo-workspace-thumbnail-frame#active { border: 4px solid #8fbcbb; background-color: black; border-radius: 2px; } .expo-background { background-color: #2e3440; } .workspace-thumbnails { spacing: 26px; } .workspace-thumbnails-background, .workspace-thumbnails-background:rtl { padding: 8px; } .workspace-add-button { background-image: url("common-assets/misc/add-workspace.svg"); height: 200px; width: 35px; transition-duration: 100; } .workspace-add-button:hover { background-image: url("common-assets/misc/add-workspace-hover.svg"); transition-duration: 100; } .workspace-add-button:active { background-image: url("common-assets/misc/add-workspace-active.svg"); transition-duration: 100; } .workspace-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; } .workspace-close-button:hover, .window-close:hover { background-image: url("common-assets/misc/close-hover.svg"); background-size: 26px; height: 26px; width: 26px; } .workspace-close-button:active, .window-close:active { background-image: url("common-assets/misc/close-active.svg"); background-size: 26px; height: 26px; width: 26px; } .window-close-area { background-image: url("common-assets/misc/trash-icon.svg"); height: 120px; width: 400px; } .about-content { width: 550px; height: 250px; spacing: 8px; padding-bottom: 10px; } .about-title { font-size: 2em; font-weight: bold; } .about-uuid { font-size: 10px; color: #888; } .about-icon { padding-right: 20px; padding-bottom: 14px; } .about-scrollBox { border: 1px solid #232831; border-radius: 2px; background-color: #3b4252; padding: 4px; padding-right: 0; border-radius: 0; } .about-scrollBox-innerBox { padding: 1.2em; spacing: 1.2em; } .about-description { padding-top: 4px; padding-bottom: 16px; } .about-version { padding-left: 7px; font-size: 10px; color: #888; } .calendar { spacing-rows: 0; spacing-columns: 0; padding: .4em 1.75em; } .datemenu-date-label { padding: .5em 0em 1em 0em; font-weight: bold; text-align: center; color: #d8dee9; } .calendar-main-box { margin: 0 .8em .5em .8em; } .calendar-events-main-box { height: 300px; margin-right: .5em; padding: .5em; min-width: 350px; border: 1px solid #232831; background-color: #3b4252; } .calendar-events-no-events-button { margin: 6px 0 6px 0; padding: 6px; } .calendar-events-no-events-button:hover { background-color: #8fbcbb; } .calendar-events-no-events-button:hover .calendar-events-no-events-icon, .calendar-events-no-events-button:hover .calendar-events-no-events-label { color: #d8dee9; } .calendar-events-no-events-icon, .calendar-events-no-events-label { font-weight: bold; color: #d8dee9; text-align: center; } .calendar-events-date-label { padding: .1em .1em .5em .1em; color: #d8dee9; font-weight: bold; text-align: center; } .calendar-events-event-container { padding: 0; } .calendar-event-button { border: 1px solid rgba(0, 0, 0, 0); } .calendar-event-button .calendar-event-time-past { color: rgba(216, 222, 233, 0.4); font-weight: bold; text-align: left; margin-bottom: .2em; } .calendar-event-button .calendar-event-time-present { color: #d8dee9; font-weight: bold; text-align: left; margin-bottom: .2em; } .calendar-event-button .calendar-event-time-present:all-day { color: #8fbcbb; } .calendar-event-button .calendar-event-time-future { color: #d8dee9; font-weight: bold; text-align: left; margin-bottom: .2em; } .calendar-event-button .calendar-event-summary { color: #d8dee9; text-align: left; width: 200px; } .calendar-event-button .calendar-event-countdown { text-align: right; margin-bottom: .6em; color: #d8dee9; } .calendar-event-button .calendar-event-countdown:soon { font-weight: bold; } .calendar-event-button .calendar-event-countdown:imminent { font-weight: bold; color: #c3674a; } .calendar-event-button .calendar-event-countdown:current { font-weight: bold; color: #8fbcbb; } .calendar-event-button:hover { background-color: #8fbcbb; border: 1px solid #232831; } .calendar-event-button:hover .calendar-event-time-past, .calendar-event-button:hover .calendar-event-time-present, .calendar-event-button:hover .calendar-event-time-future, .calendar-event-button:hover .calendar-event-summary { color: #d8dee9; } .calendar-event-button:hover .calendar-event-countdown { text-align: right; margin-bottom: .6em; color: #d8dee9; } .calendar-event-button:hover .calendar-event-countdown:soon { font-weight: bold; } .calendar-event-button:hover .calendar-event-countdown:imminent { font-weight: bold; } .calendar-event-button:hover .calendar-event-countdown:current { font-weight: bold; } .calendar-event-color-strip { width: 2px; } .calendar-today-home-button { padding: 6px; } .calendar-today-day-label { font-size: 1.75em; color: #d8dee9; font-weight: bold; text-align: center; padding-bottom: .1em; } .calendar-today-date-label { font-size: 1.1em; color: #d8dee9; font-weight: bold; text-align: center; } .calendar-today-home-button-enabled { padding: 6px; } .calendar-today-home-button-enabled:hover { background-color: #8fbcbb; } .calendar-today-home-button-enabled:hover .calendar-today-day-label { color: #d8dee9; } .calendar-today-home-button-enabled:hover .calendar-today-date-label { color: #d8dee9; } .calendar-month-label { color: #d8dee9; font-weight: bold; padding: 8px 0; } .calendar-change-month-back, .calendar-change-month-forward { width: 16px; height: 16px; } .calendar-change-month-back { background-image: url("common-assets/misc/calendar-arrow-left.svg"); } .calendar-change-month-back:focus, .calendar-change-month-back:hover { background-image: url("common-assets/misc/calendar-arrow-left-hover.svg"); } .calendar-change-month-back:active { background-image: url("common-assets/misc/calendar-arrow-left.svg"); } .calendar-change-month-back:rtl { background-image: url("common-assets/misc/calendar-arrow-right.svg"); } .calendar-change-month-back:rtl:focus, .calendar-change-month-back:rtl:hover { background-image: url("common-assets/misc/calendar-arrow-right-hover.svg"); } .calendar-change-month-back:rtl:active { background-image: url("common-assets/misc/calendar-arrow-right.svg"); } .calendar-change-month-forward { background-image: url("common-assets/misc/calendar-arrow-right.svg"); } .calendar-change-month-forward:focus, .calendar-change-month-forward:hover { background-image: url("common-assets/misc/calendar-arrow-right-hover.svg"); } .calendar-change-month-forward:active { background-image: url("common-assets/misc/calendar-arrow-right.svg"); } .calendar-change-month-forward:rtl { background-image: url("common-assets/misc/calendar-arrow-left.svg"); } .calendar-change-month-forward:rtl:focus, .calendar-change-month-forward:rtl:hover { background-image: url("common-assets/misc/calendar-arrow-left-hover.svg"); } .calendar-change-month-forward:rtl:active { background-image: url("common-assets/misc/calendar-arrow-left.svg"); } .calendar-day-event-dot-box { margin-top: 1.7em; max-rows: 1; } .calendar-day-event-dot { margin: 1px; border-radius: 2px; width: 4px; height: 4px; } .calendar-day-base { font-size: 1em; text-align: center; width: 2.2em; height: 2.2em; padding: 0.1em; } .calendar-day-base:hover { font-weight: bold; color: #d8dee9; background-color: #8fbcbb; } .calendar-day-heading { color: rgba(216, 222, 233, 0.85); margin-top: 1em; font-size: 1.05em; } .calendar-day { border-width: 0; color: rgba(216, 222, 233, 0.9); } .calendar-day-top { border-top-width: 0; } .calendar-day-left { border-left-width: 0; } .calendar-nonwork-day { color: #d8dee9; background-color: transparent; font-weight: bold; } .calendar-today { color: #d8dee9; background-color: #8fbcbb; border-width: 0; } .calendar-today:selected { font-weight: bold; } .calendar-not-today { color: #d8dee9; } .calendar-not-today:selected { font-weight: bold; background-color: rgba(216, 222, 233, 0.4); } .calendar-not-today:selected:hover { font-weight: bold; color: #d8dee9; } .calendar-other-month-day { color: rgba(216, 222, 233, 0.5); } .calendar-other-month-day:hover { color: #d8dee9; } .calendar-week-number { color: rgba(216, 222, 233, 0.85); font-size: 0.8em; margin-top: 0.8em; } #notification { box-shadow: 0 1px 15px 4px #232831; border-top-color: #8fbcbb; border-top: 4px; border-radius: 5px; background-color: #2e3440; padding: 13px; spacing-rows: 5px; spacing-columns: 5px; margin-from-right-edge-of-screen: 20px; width: 34em; color: #BAC3CF; } .popup-menu #notification { color: #d8dee9; border-image: url("dark-assets/misc/message.svg") 9 9 9 9; } .popup-menu #notification .notification-button, .popup-menu #notification .notification-icon-button { padding: 5px; } #notification.multi-line-notification { padding-bottom: 13px; color: #BAC3CF; } #notification-scrollview { max-height: 10em; } #notification-scrollview > .top-shadow, #notification-scrollview > .bottom-shadow { height: 1em; } #notification-scrollview:ltr > StScrollBar { padding-left: 6px; } #notification-scrollview:rtl > StScrollBar { padding-right: 6px; } #notification-body { spacing: 5px; } #notification-actions { spacing: 10px; } .notification-with-image { min-height: 159px; color: #BAC3CF; } .notification-button, .notification-icon-button { padding: 5px; } .notification-icon-button > StIcon { icon-size: 36px; } #altTabPopup { padding: 8px; spacing: 16px; } .switcher-list { color: #BAC3CF; background: #2e3440; border: 1px solid #232831; border-radius: 5px; box-shadow: 0px 0px 7px rgba(35, 40, 49, 0.8); padding: 20px; } .switcher-list > StBoxLayout { padding: 4px; } .switcher-list-item-container { spacing: 8px; } .switcher-list .item-box { padding: 8px; border-radius: 5px; } .switcher-list .item-box:outlined { padding: 8px; border: 1px solid #8fbcbb; } .switcher-list .item-box:selected { color: #d8dee9; background-color: #8fbcbb; border: 0px solid #8fbcbb; } .switcher-list .thumbnail { width: 256px; } .switcher-list .thumbnail-box { padding: 2px; spacing: 4px; } .switcher-list .separator { width: 1px; background: rgba(255, 255, 255, 0.2); } .switcher-arrow { border-color: rgba(0, 0, 0, 0); color: #BAC3CF; } .switcher-arrow:highlighted { border-color: rgba(0, 0, 0, 0); color: #d8dee9; } .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; } .ripple-box { width: 104px; height: 104px; background-image: url("common-assets/misc/corner-ripple.svg"); background-size: contain; } .lightbox { background-color: rgba(0, 0, 0, 0.4); } .flashspot { background-color: white; } .modal-dialog { background-color: #434c5e; border: 1px solid #232831; border-radius: 5px; padding: 5px 10px; } .modal-dialog > StBoxLayout:first-child { padding: 10px; } .modal-dialog-button-box { spacing: 0; margin: 0px; padding: 10px; border: none; background-color: #434c5e; } .modal-dialog-button-box .modal-dialog-button { padding-top: 0; padding-bottom: 0; height: 30px; } .modal-dialog .confirm-dialog-title { text-align: center; font-weight: bold; font-size: 1.3em; padding-bottom: 12px; } .run-dialog { padding: 10px 15px 10px 15px; border: 1px solid #232831; border-radius: 5px; background-color: #434c5e; } .run-dialog > * { padding: 0; } .run-dialog-label { font-size: 1.3em; font-weight: bold; color: #d8dee9; padding-bottom: 15px; text-align: center; } .run-dialog-description { color: #d8dee9; padding-top: 15px; text-align: center; } .run-dialog-description.error { color: #b84f59; } .run-dialog-completion-box { padding-top: 5px; padding-left: 15px; font-size: 1em; } .run-dialog-entry { width: 21em; height: 1.2em; padding: 7px; border-radius: 3px; caret-color: #BAC3CF; selected-color: #d8dee9; selection-background-color: #8fbcbb; color: #BAC3CF; background-color: rgba(93, 105, 129, 0.4); border: 1px solid rgba(20, 23, 28, 0.4); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } .run-dialog-entry:focus { color: #d8dee9; background-color: #3b4252; border: 1px solid #8fbcbb; box-shadow: inset 0 2px 4px rgba(59, 66, 82, 0.05); } .run-dialog .modal-dialog-button-box { border: none; box-shadow: none; background: none; } /* CinnamonMountOperation Dialogs */ .cinnamon-mount-operation-icon { icon-size: 48px; } .mount-password-reask { color: #c3674a; } .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; } .show-processes-dialog-subject:rtl, .mount-question-dialog-subject:rtl { padding-left: 0px; padding-right: 17px; } .show-processes-dialog-description, .mount-question-dialog-description { padding-left: 17px; width: 28em; } .show-processes-dialog-description:rtl, .mount-question-dialog-description:rtl { padding-right: 17px; } .show-processes-dialog-app-list { max-height: 200px; padding-top: 24px; padding-left: 49px; padding-right: 32px; } .show-processes-dialog-app-list:rtl { padding-right: 49px; padding-left: 32px; } .show-processes-dialog-app-list-item { color: #ccc; } .show-processes-dialog-app-list-item:hover { color: white; } .show-processes-dialog-app-list-item:ltr { padding-right: 1em; } .show-processes-dialog-app-list-item:rtl { padding-left: 1em; } .show-processes-dialog-app-list-item-icon:ltr { padding-right: 17px; } .show-processes-dialog-app-list-item-icon:rtl { padding-left: 17px; } .show-processes-dialog-app-list-item-name { font-size: 1.1em; } .magnifier-zoom-region { border: 2px solid maroon; } .magnifier-zoom-region .full-screen { border-width: 0px; } #keyboard { background-color: #2e3440; border-width: 0; border-top-width: 1px; border-color: rgba(0, 0, 0, 0.4); } .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; text-shadow: 0 1px rgba(59, 66, 82, 0); color: #BAC3CF; border: 1px solid rgba(20, 23, 28, 0.4); background-color: rgba(93, 105, 129, 0.4); } .keyboard-key:hover { text-shadow: 0 1px rgba(59, 66, 82, 0); color: #BAC3CF; border: 1px solid rgba(20, 23, 28, 0.4); background-color: rgba(108, 122, 150, 0.5); } .keyboard-key:active, .keyboard-key:checked { text-shadow: 0 1px rgba(59, 66, 82, 0); color: #d8dee9; border: 1px solid #8fbcbb; background-color: #8fbcbb; } .keyboard-key:grayed { text-shadow: 0 1px rgba(59, 66, 82, 0); color: #585f6b; border: 1px solid rgba(20, 23, 28, 0.4); background-color: rgba(93, 105, 129, 0.25); } .keyboard-subkeys { color: #BAC3CF; padding: 5px; -arrow-border-radius: 2px; -arrow-background-color: #2e3440; -arrow-border-width: 1px; -arrow-border-color: rgba(0, 0, 0, 0.4); -arrow-base: 20px; -arrow-rise: 10px; -boxpointer-gap: 5px; } .menu-favorites-box { margin: auto; padding: 10px; transition-duration: 300; background-color: #373e4c; border: 1px solid #232831; } .menu-favorites-button { padding: 10px; border: 1px solid rgba(0, 0, 0, 0); } .menu-places-box { margin: auto; padding: 10px; border: 0px solid red; } .menu-places-button { padding: 10px; } .menu-categories-box { padding: 10px 30px 10px 30px; } .menu-applications-inner-box, .menu-applications-outer-box { padding: 10px 10px 0 10px; } .menu-application-button { padding: 7px; border: 1px solid rgba(0, 0, 0, 0); } .menu-application-button:highlighted { font-weight: bold; } .menu-application-button-selected { padding: 7px; } .menu-application-button-selected:highlighted { font-weight: bold; } .menu-application-button-label:ltr { padding-left: 5px; } .menu-application-button-label:rtl { padding-right: 5px; } .menu-category-button { padding: 7px; border: 1px solid rgba(0, 0, 0, 0); } .menu-category-button-selected { padding: 7px; } .menu-category-button-hover { background-color: rgba(143, 188, 187, 0.3); border-radius: 2px; } .menu-category-button-greyed { padding: 7px; color: rgba(216, 222, 233, 0.45); border: 1px solid rgba(0, 0, 0, 0); } .menu-category-button-label:ltr { padding-left: 5px; } .menu-category-button-label:rtl { padding-right: 5px; } .menu-selected-app-box { padding-right: 30px; padding-left: 28px; text-align: right; height: 30px; } .menu-selected-app-box:rtl { padding-top: 10px; height: 30px; } .menu-selected-app-title { font-weight: bold; } .menu-selected-app-description { max-width: 150px; } .menu-search-box:ltr { padding-left: 30px; } .menu-search-box-rtl { padding-right: 30px; } #menu-search-entry { width: 250px; min-height: 15px; font-weight: normal; caret-color: #d8dee9; } .menu-search-entry-icon { icon-size: 1em; color: #d8dee9; } /* Context menu (at the moment only for favorites) */ .appmenu-sidebar-button, .appmenu-application-button, .appmenu-application-button-selected, .appmenu-category-button, .appmenu-category-button-selected, .appmenu-category-button-greyed { padding: 7px; spacing: 5px; border-radius: 6px; } .appmenu-background .popup-menu-content { padding: 0; } .appmenu-main-box { spacing: 10px; } .appmenu-right-box { spacing: 5px; padding: 10px 10px; } .appmenu-categories-applications-box { spacing: 15px; } .appmenu-categories-applications-box:top { padding-top: 5px; } .appmenu-applications-box { padding-right: 5px; } .appmenu-search-box { spacing: 10px; } .appmenu-sidebar { padding: 15px 0px; background-color: #353b49; border-radius: 6px 0 0 0; border-right-width: 1px; border-color: #232831; } .menu-top .appmenu-sidebar { border-radius: 0 0 0 6px; } .menu-bottom .appmenu-sidebar { border-radius: 6px 0 0 0; } .menu-left .appmenu-sidebar { border-radius: 0; } .menu-right .appmenu-sidebar { border-radius: 0; } .appmenu-sidebar-user-box .user-widget-label { color: #d8dee9; text-align: center; } .appmenu-sidebar .appmenu-system-button { background-color: #4a5367; border: none; } .appmenu-sidebar .appmenu-system-button-lock:hover { background-color: #5f6b84; } .appmenu-sidebar .appmenu-system-button-logout:hover { background-color: #5f6b84; } .appmenu-sidebar .appmenu-system-button-shutdown { color: white; background-color: #b84f59; } .appmenu-sidebar .appmenu-system-button-shutdown:hover { color: white; background-color: #bf616a; } .appmenu-system-box { spacing: 10px; } .appmenu-sidebar-button { padding: 4px 7px; margin: 0 10px; } .appmenu-sidebar-button:hover { background-color: #4a5367; border-color: #232831; } .appmenu-system-button { padding: 8.4px; border: 1px solid #232831; border-radius: 9999px; background-color: #4a5367; } .appmenu-application-button-label { padding: 0; } .appmenu-application-button-description { color: rgba(216, 222, 233, 0.45); } .appmenu-application-button:highlighted { font-weight: bold; } .appmenu-application-button-selected { background-color: #4a5367; } .appmenu-application-button-selected:highlighted { font-weight: bold; } .appmenu-category-button-label { padding: 0; } .appmenu-category-button:hover { background-color: #4a5367; } .appmenu-category-button-selected { background-color: #4a5367; } .appmenu-category-button-greyed { color: rgba(216, 222, 233, 0.45); font-style: italic; } .appmenu-category-button-greyed StIcon { opacity: 0.5; } .appmenu-search-entry-icon { icon-size: 1em; } .info-osd { text-align: center; font-weight: bold; spacing: 1em; padding: 16px; color: #d8dee9; background-color: #2e3440; } .osd-window { text-align: center; font-weight: bold; spacing: 1em; padding: 20px; margin: 32px; min-width: 64px; min-height: 64px; color: #d8dee9; background: #2e3440; border: 1px solid #232831; border-radius: 5px; box-shadow: 0px 0px 7px rgba(35, 40, 49, 0.8); } .osd-window .osd-monitor-label { font-size: 3em; } .osd-window .level { padding: 0; height: 4px; background-color: rgba(0, 0, 0, 0.5); border-radius: 2px; color: #8fbcbb; } .osd-window .level-bar { background-color: #8fbcbb; } .window-list-box { spacing: 6px; padding-left: 10px; padding-top: 1px; } .window-list-box.vertical { spacing: 2px; padding-left: 0px; padding-right: 0px; padding-top: 10px; padding-bottom: 10px; } .window-list-box:highlight { background-color: rgba(184, 79, 89, 0.5); } .window-list-item-label { font-weight: normal; width: 15em; min-width: 5px; } .window-list-item-box { font-weight: normal; background-image: none; padding-top: 0; padding-left: 8px; padding-right: 8px; transition-duration: 100; color: rgba(186, 195, 207, 0.7); } .window-list-item-box.top, .window-list-item-box.bottom { border-bottom-width: 2px; } .window-list-item-box.top StLabel, .window-list-item-box.bottom StLabel { padding-left: 2px; } .window-list-item-box.right { padding-left: 0px; padding-right: 0px; border-right-width: 2px; } .window-list-item-box.right StBin { padding-right: 0; } .window-list-item-box.left { padding-left: 0px; padding-right: 0px; border-left-width: 2px; } .window-list-item-box.left StBin { padding-left: 1px; } .window-list-item-box:hover, .window-list-item-box:groupFocus { color: #d8dee9; border-color: #555f76; } .window-list-item-box:active, .window-list-item-box:checked, .window-list-item-box:focus, .window-list-item-box:running { color: #5e81ac; border-color: #8fbcbb; background-color: rgba(94, 129, 172, 0.3); } .window-list-item-box .progress { background-color: rgba(94, 129, 172, 0.8); } .window-list-item-demands-attention { background-gradient-direction: vertical; background-gradient-start: #b84f59; background-gradient-end: #b84f59; } .window-list-preview { spacing: 6px; color: #d8dee9; border: 1px solid #232831; background-color: #434c5e; border-radius: 3px; padding: 6px 12px 12px 12px; font-size: 1em; } .grouped-window-list-item-label { font-weight: normal; width: 15em; min-width: 5px; } .grouped-window-list-item-box { text-align: left; font-weight: normal; background-image: none; padding-top: 0; padding-left: 8px; padding-right: 8px; transition-duration: 100; color: rgba(216, 222, 233, 0.6); } .grouped-window-list-item-box.top, .grouped-window-list-item-box.bottom { border-bottom-width: 2px; } .grouped-window-list-item-box.top StLabel, .grouped-window-list-item-box.bottom StLabel { padding-left: 2px; } .grouped-window-list-item-box.right { padding-left: 0px; padding-right: 0px; border-right-width: 2px; } .grouped-window-list-item-box.right StBin { padding-right: 0; } .grouped-window-list-item-box.left { padding-left: 0px; padding-right: 0px; border-left-width: 2px; } .grouped-window-list-item-box.left StBin { padding-left: 1px; } .grouped-window-list-item-box:active, .grouped-window-list-item-box:checked { color: #d8dee9; border-color: #555f76; } .grouped-window-list-item-box:hover, .grouped-window-list-item-box:active:hover, .grouped-window-list-item-box:focus, .grouped-window-list-item-box:active:focus, .grouped-window-list-item-box:focus:hover, .grouped-window-list-item-box:active:focus:hover { color: #d8dee9; border-color: #5e81ac; background-color: rgba(94, 129, 172, 0.3); } .grouped-window-list-item-box .progress { background-color: rgba(94, 129, 172, 0.8); } .grouped-window-list-item-demands-attention { background-gradient-direction: vertical; background-gradient-start: #b84f59; background-gradient-end: #b84f59; } .grouped-window-list-thumbnail-label { padding-left: 4px; } .grouped-window-list-number-label { z-index: 99; color: #d8dee9; } .grouped-window-list-badge { border-radius: 256px; background-color: #2e3440; } .grouped-window-list-button-label { padding-left: 4px; } .grouped-window-list-thumbnail-alert { background: rgba(255, 52, 52, 0.3); } .grouped-window-list-thumbnail-menu { color: #d8dee9; border: 1px solid #232831; background-color: #434c5e; border-radius: 3px; padding: 0px; } .grouped-window-list-thumbnail-menu > StBoxLayout { padding: 4px; } .grouped-window-list-thumbnail-menu .item-box { padding: 10px; border-radius: 2px; spacing: 4px; } .grouped-window-list-thumbnail-menu .item-box:outlined { padding: 8px; border: 1px solid #8fbcbb; } .grouped-window-list-thumbnail-menu .item-box:selected { border: 1px solid #8fbcbb; } .grouped-window-list-thumbnail-menu .thumbnail { width: 256px; } .grouped-window-list-thumbnail-menu .separator { width: 1px; background: rgba(255, 255, 255, 0.2); } .sound-button { width: 22px; height: 13px; padding: 8px; } .sound-button-container { padding-right: 3px; padding-left: 3px; } .sound-button StIcon { icon-size: 1.4em; } .sound-track-infos { padding: 5px; } .sound-track-info { padding-top: 2px; padding-bottom: 2px; } .sound-track-info StIcon { icon-size: 16px; } .sound-track-info StLabel { padding-left: 5px; padding-right: 5px; } .sound-track-box { padding-left: 15px; padding-right: 15px; max-width: 220px; } .sound-seek-box { padding-left: 15px; } .sound-seek-box StLabel { padding-top: 2px; } .sound-seek-box StIcon { icon-size: 16px; } .sound-seek-slider { width: 140px; } .sound-volume-menu-item { padding: .4em 1.75em; } .sound-volume-menu-item StIcon { icon-size: 1.14em; padding-left: 8px; padding-right: 8px; } .sound-playback-control { padding: 5px 10px 10px 10px; } .sound-player > StBoxLayout:first-child { padding: 5px 10px 12px 10px; spacing: 0.5em; } .sound-player > StBoxLayout:first-child StButton:small { width: 20px; height: 20px; border: 1px solid transparent; } .sound-player > StBoxLayout:first-child StButton:small StIcon { icon-size: 12px; } .sound-player > StBoxLayout:first-child StButton:small:hover { text-shadow: 0 1px rgba(59, 66, 82, 0); color: #d8dee9; background-color: #4a5367; border: 1px solid #232831; box-shadow: inset 0 2px 4px rgba(74, 83, 103, 0.05); } .sound-player > StBoxLayout:first-child StButton:small:active { text-shadow: 0 1px rgba(59, 66, 82, 0); color: #d8dee9; background-color: #8fbcbb; border: 1px solid #8fbcbb; box-shadow: inset 0 2px 4px #8fbcbb; } .sound-player-generic-coverart { background: rgba(0, 0, 0, 0.2); } .sound-player-overlay { width: 290px; padding: 15px; spacing: 0.5em; background: rgba(46, 52, 64, 0.9); border-top: 1px solid #232831; color: #d8dee9; } .sound-player-overlay StButton { width: 22px; height: 13px; padding: 5px; color: #d8dee9; border-radius: 2px; border: 1px solid transparent; } .sound-player-overlay StButton StIcon { icon-size: 16px; } .sound-player-overlay StButton:hover { text-shadow: 0 1px rgba(59, 66, 82, 0); color: #BAC3CF; border: 1px solid rgba(20, 23, 28, 0.4); background-color: rgba(108, 122, 150, 0.5); } .sound-player-overlay StButton:active { text-shadow: 0 1px rgba(59, 66, 82, 0); color: #d8dee9; background-color: #8fbcbb; border: 1px solid #8fbcbb; box-shadow: inset 0 2px 4px #8fbcbb; } .sound-player-overlay StBoxLayout { padding-top: 2px; } .sound-player-overlay > StBoxLayout { spacing: 5px; } .sound-player .slider { height: 0.5em; padding: 0; border: none; -slider-height: 0.5em; -slider-background-color: #38404f; -slider-border-color: rgba(0, 0, 0, 0); -slider-active-background-color: #8fbcbb; -slider-active-border-color: rgba(0, 0, 0, 0); -slider-border-width: 0px; -slider-handle-radius: 0px; } #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: #d8dee9; padding: 3px; padding-top: 4px; transition-duration: 300; } .workspace-button:outlined, .workspace-button:outlined:hover { background-color: #3f4758; color: #d8dee9; } .workspace-button:hover { color: #5e81ac; } /* Controls the style when using the "Visual representation" option */ .workspace-graph { padding: 3px; spacing: 3px; } .workspace-graph .workspace { border: 1px solid rgba(0, 0, 0, 0.4); background-gradient-direction: none; background-color: rgba(0, 0, 0, 0.2); } .workspace-graph .workspace:active { border: 1px solid #8fbcbb; background-gradient-direction: none; } .workspace-graph .workspace .windows { -active-window-background: #4e586d; -active-window-border: rgba(0, 0, 0, 0.8); -inactive-window-background: #4e586d; -inactive-window-border: rgba(0, 0, 0, 0.8); } .workspace-graph .workspace:active .windows { -active-window-background: #59647b; -active-window-border: rgba(0, 0, 0, 0.8); -inactive-window-background: #39404f; -inactive-window-border: rgba(0, 0, 0, 0.8); } .panel-launchers { padding-left: 7px; spacing: 2px; } .panel-launchers .launcher { padding-left: 2px; padding-right: 2px; padding-bottom: 2px; transition-duration: 200; } .panel-launchers .launcher:hover { background-color: rgba(186, 195, 207, 0.1); } .panel-launchers.vertical { padding-top: 2px; padding-bottom: 2px; padding-left: 0px; padding-right: 0px; spacing: 1px; } .panel-launchers.vertical .launcher { padding-top: 2px; padding-bottom: 2px; } #overview-corner { background-image: url("common-assets/misc/overview.png"); } #overview-corner:hover { background-image: url("common-assets/misc/overview-hover.png"); } .applet-separator { padding: 1px 4px; } .applet-separator-line { width: 1px; background: rgba(255, 255, 255, 0.12); } .applet-box { padding-left: 3px; padding-right: 3px; color: #d8dee9; text-shadow: none; transition-duration: 100; } .applet-box.vertical { padding: 3px 0; } .applet-box:hover { color: #d8dee9; background-color: #8fbcbb; } .applet-box:highlight { background-image: none; border-image: none; background-color: rgba(184, 79, 89, 0.5); } .applet-label { font-weight: bold; color: #d8dee9; } .applet-label:hover, .applet-box:hover > .applet-label { color: #d8dee9; text-shadow: none; } .applet-icon { color: #d8dee9; icon-size: 22px; } .applet-icon:hover, .applet-box:hover > .applet-icon { color: #d8dee9; text-shadow: none; } .user-icon { width: 32px; height: 32px; background-color: transparent; border: none; border-radius: 0; } .user-label { color: #d8dee9; font-size: 1em; font-weight: bold; margin: 0px; } .desklet { color: #d8dee9; } .desklet:highlight { background-color: rgba(184, 79, 89, 0.5); } .desklet-with-borders { border: 1px solid #232831; border-radius: 5px; background-color: #434c5e; color: #d8dee9; padding: 12px; padding-bottom: 16px; } .desklet-with-borders:highlight { background-color: rgba(184, 79, 89, 0.5); } .desklet-with-borders-and-header { border: 1px solid #232831; border-top-width: 0; border-radius: 0 0 5px 5px; background-color: #434c5e; color: #d8dee9; border-radius: 0; border-radius-topleft: 0; border-radius-topright: 0; padding: 12px; padding-bottom: 17px; } .desklet-with-borders-and-header:highlight { background-color: rgba(184, 79, 89, 0.5); } .desklet-header { border: 1px solid #232831; border-radius: 5px 5px 0 0; background-color: #3d4555; color: #d8dee9; font-size: 1em; padding: 12px; padding-bottom: 6px; } .desklet-drag-placeholder { border: 2px solid #8fbcbb; background-color: rgba(143, 188, 187, 0.3); } .photoframe-box { border: 1px solid #232831; border-radius: 5px; background-color: #434c5e; color: #d8dee9; padding: 12px; padding-bottom: 16px; } /*FIXME*/ .workspace-osd { /*color: red;*/ text-shadow: none; font-weight: bold; font-size: 38pt; background-color: #2e3440; border-radius: 20px; border: 1px solid #232831; box-shadow: 0px 0px 38px #232831; } .notification-applet-padding { padding: .5em 1em; } .notification-applet-container { max-height: 100px; } .tile-preview, .tile-preview.snap, .tile-hud, .tile-hud.snap { background-color: rgba(143, 188, 187, 0.3); border: 1px solid #8fbcbb; } .xkcd-box { padding: 6px; border: 0px; background-color: rgba(0, 0, 0, 0); border-radius: 0px; } .appmenu-application-button-description, .dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description, .message-dialog-content .message-dialog-caption, .run-dialog-description, .prompt-dialog-error-label, .prompt-dialog-info-label, .prompt-dialog-null-label { font-weight: 400; font-size: 0.818em; } .dialog .confirm-dialog-title, .message-dialog-content .message-dialog-title { font-weight: 800; font-size: 1.364em; } .appmenu-sidebar-user-box .user-widget-label, .message-dialog-content .message-dialog-title.lightweight, .media-keys-osd, .workspace-switch-osd { font-weight: 700; font-size: 1.182em; } .dialog-list .dialog-list-title, .polkit-dialog-user-combo { font-weight: 700; font-size: 1em; } .polkit-dialog-user-combo, .audio-device-selection-dialog .audio-selection-box .audio-selection-device { border: 1px solid #434c5e; color: #d8dee9; background-color: #434c5e; } .polkit-dialog-user-combo:focus, .audio-device-selection-dialog .audio-selection-box .audio-selection-device:focus { border: 1px solid #434c5e; color: #d8dee9; background-color: #434c5e; border: 1px solid #63708b; } .polkit-dialog-user-combo:hover, .audio-device-selection-dialog .audio-selection-box .audio-selection-device:hover { border: 1px solid #434c5e; color: #d8dee9; background-color: #58647c; } .polkit-dialog-user-combo:insensitive, .audio-device-selection-dialog .audio-selection-box .audio-selection-device:insensitive { border: 1px solid #434c5e; color: rgba(216, 222, 233, 0.5); background-color: #434c5e; } .polkit-dialog-user-combo:selected, .audio-device-selection-dialog .audio-selection-box .audio-selection-device:selected, .polkit-dialog-user-combo:active, .audio-device-selection-dialog .audio-selection-box .audio-selection-device:active { border: 1px solid #434c5e; color: #d8dee9; background-color: #4e586d; } .polkit-dialog-user-combo:checked, .audio-device-selection-dialog .audio-selection-box .audio-selection-device:checked { border: 1px solid #434c5e; color: #d8dee9; background-color: #4e586d; } .dialog .dialog-button:default, .dialog .dialog-button:destructive-action, .dialog .dialog-button { font-weight: bold; padding: 12px; border-radius: 6px; border: 1px solid #3f4758; color: #d8dee9; background-color: #3f4758; } .dialog .dialog-button:focus { border: 1px solid #3f4758; color: #d8dee9; background-color: #3f4758; border: 1px solid #5f6b84; } .dialog .dialog-button:hover { border: 1px solid #3f4758; color: #d8dee9; background-color: #555f76; } .dialog .dialog-button:active { border: 1px solid #3f4758; color: #d8dee9; background-color: #4a5367; } .dialog .dialog-button:checked { border: 1px solid #3f4758; color: #d8dee9; background-color: #4a5367; } .dialog .dialog-button:insensitive { border: 1px solid #3f4758; color: rgba(216, 222, 233, 0.5); background-color: #39404f; } .dialog .dialog-button:default { border: 1px solid #8fbcbb; color: #d8dee9; background-color: #8fbcbb; } .dialog .dialog-button:focus:default { border: 1px solid #8fbcbb; color: #d8dee9; background-color: #8fbcbb; border: 1px solid #bfd9d8; } .dialog .dialog-button:hover:default { border: 1px solid #8fbcbb; color: #d8dee9; background-color: #afcfce; } .dialog .dialog-button:active:default { border: 1px solid #8fbcbb; color: #d8dee9; background-color: #9fc6c5; } .dialog .dialog-button:checked:default { border: 1px solid #8fbcbb; color: #d8dee9; background-color: #9fc6c5; } .dialog .dialog-button:insensitive:default { border-color: #232831; border: 1px solid #3f4758; color: rgba(216, 222, 233, 0.5); background-color: #39404f; } .dialog .dialog-button:destructive-action { border: 1px solid #b84f59; color: #d8dee9; background-color: #b84f59; } .dialog .dialog-button:focus:destructive-action { border: 1px solid #b84f59; color: #d8dee9; background-color: #b84f59; border: 1px solid #ce858c; } .dialog .dialog-button:hover:destructive-action { border: 1px solid #b84f59; color: #d8dee9; background-color: #c6737b; } .dialog .dialog-button:active:destructive-action { border: 1px solid #b84f59; color: #d8dee9; background-color: #bf616a; } .dialog .dialog-button:checked:destructive-action { border: 1px solid #b84f59; color: #d8dee9; background-color: #bf616a; } .dialog .dialog-button:insensitive:destructive-action { border-color: #232831; border: 1px solid #3f4758; color: rgba(216, 222, 233, 0.5); background-color: #39404f; } .dialog { background-color: #2e3440; border-radius: 18px; border: 1px solid #232831; padding: 18px; } .dialog .dialog-content-box { margin-top: 8px; margin-bottom: 16px; spacing: 32px; max-width: 28em; } .dialog .confirm-dialog-title { text-align: center; } .dialog-list { spacing: 18px; } .dialog-list .dialog-list-title { text-align: center; } .dialog-list .dialog-list-scrollview { max-height: 200px; } .dialog-list .dialog-list-box { spacing: 1em; } .dialog-list .dialog-list-box .dialog-list-item { spacing: 1em; } .dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-title { font-weight: bold; } .dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description { color: #c8d0e0; } .end-session-dialog { min-width: 40em; } .end-session-dialog .dialog-content-box { spacing: 0; } .end-session-dialog .dialog-list { spacing: 0; } .end-session-dialog .dialog-list .dialog-list-title { color: #c3674a; background-color: tranparentize(#c3674a, 0.9); padding: 9px; border-radius: 18px; margin: 4px 0; } .message-dialog-content { spacing: 18px; } .message-dialog-content .message-dialog-title { text-align: center; } .message-dialog-content .message-dialog-description { text-align: center; } .message-dialog-content .message-dialog-caption { text-align: center; } .run-dialog .dialog-content-box { margin: 4px; } .run-dialog-description { text-align: center; color: #97a7c4; } .run-dialog-description.error { color: #b84f59; } .run-dialog-completion-box { padding-top: 6px; padding-left: 12px; } .run-dialog-entry { width: 20em; height: 1.2em; } .prompt-dialog { width: 28em; } .prompt-dialog .dialog-content-box { spacing: 16px; margin-bottom: 12px; } .prompt-dialog-password-entry { width: 20em; } .prompt-dialog-password-layout { spacing: 8px; } .prompt-dialog-error-label, .prompt-dialog-info-label, .prompt-dialog-null-label { text-align: center; } .prompt-dialog-error-label { color: #b84f59; } .polkit-dialog-user-layout { text-align: center; spacing: 2px; } .polkit-dialog-user-combo { border-radius: 6px; padding: 6px 36px; } .polkit-dialog-user-combo:insensitive { color: #d8dee9; } .audio-device-selection-dialog { min-width: 24em; } .audio-device-selection-dialog .audio-selection-box { spacing: 12px; } .audio-device-selection-dialog .audio-selection-box .audio-selection-device { border-radius: 18px; } .audio-device-selection-dialog .audio-selection-box .audio-selection-device .audio-selection-device-box { padding: 12px; spacing: 12px; } .audio-device-selection-dialog .audio-selection-box .audio-selection-device .audio-selection-device-icon { icon-size: 64px; } .media-keys-osd, .info-osd, .workspace-switch-osd { background-color: #2e3440; border: 1px solid #232831; border-radius: 18px; text-align: center; padding: 24px; } .media-keys-osd { margin-bottom: 1em; border-radius: 18px; font-weight: bold; spacing: 12px; padding: 12px 24px; } .media-keys-osd > * { spacing: 12px; } .media-keys-osd StIcon { icon-size: 32px; } .media-keys-osd StLabel:ltr { margin-right: 6px; } .media-keys-osd StLabel:rtl { margin-left: 6px; } .media-keys-osd .level { min-width: 160px; -barlevel-height: 6px; -barlevel-background-color: #4c556a; -barlevel-active-background-color: #8fbcbb; -barlevel-amplify-color: #c3674a; -barlevel-amplify-separator-width: 3px; } .media-keys-osd .level:ltr { margin-right: 6px; } .media-keys-osd .level:rtl { margin-left: 6px; } .media-keys-osd .level-bar { border-radius: 18px; background-color: #d8dee9; } .info-osd { font-size: 1.2em; font-weight: 700; text-align: center; } .workspace-switch-osd { min-width: 140px; margin-bottom: 1em; border-radius: 18px; font-weight: bold; padding: 12px 36px 0 36px; } .workspace-switch-osd-indicator-box { spacing: 12px; } .workspace-switch-osd-indicator { background-color: rgba(216, 222, 233, 0.5); padding: 3px; margin: 15px; border-radius: 36px; } .workspace-switch-osd-indicator:active { background-color: #8fbcbb; padding: 6px; margin: 12px; } .monitor-label { border-radius: 0; color: black; padding: 12px; text-align: center; } .resize-popup { color: #d8dee9; background-color: #434c5e; border-radius: 6px; padding: 12px; } /*# sourceMappingURL=cinnamon-dark.css.map */ ================================================ FILE: cinnamon/cinnamon-dark.scss ================================================ $variant: 'dark'; $transparency: 'true'; $darker: 'false'; $accent: 'green'; @import "../gtk-3.0/_nord"; @import "_colors"; //use gtk colors @import "_drawing"; @import "_common"; @import "_dialogs"; ================================================ FILE: cinnamon/cinnamon.css ================================================ stage { color: #d8dee9; } .label-shadow { color: rgba(0, 0, 0, 0); } .popup-menu #notification .notification-button, .popup-menu #notification .notification-icon-button, .modal-dialog-button-box .modal-dialog-button, .sound-button { min-height: 20px; padding: 5px 32px; transition-duration: 0; text-shadow: 0 1px rgba(59, 66, 82, 0); color: #d8dee9; background-color: #3f4758; border: 1px solid #232831; box-shadow: inset 0 2px 4px rgba(63, 71, 88, 0.05); } .popup-menu #notification .notification-button, .popup-menu #notification .notification-icon-button, .modal-dialog-button-box .modal-dialog-button, .sound-button, .popup-menu #notification .notification-button:focus, .popup-menu #notification .notification-icon-button:focus, .modal-dialog-button-box .modal-dialog-button:focus, .sound-button:focus, .popup-menu #notification .notification-button:hover, .popup-menu #notification .notification-icon-button:hover, .modal-dialog-button-box .modal-dialog-button:hover, .menu-favorites-button:hover, .menu-application-button-selected, .menu-category-button-selected, .sound-button:hover, .popup-menu #notification .notification-button:hover:focus, .popup-menu #notification .notification-icon-button:hover:focus, .modal-dialog-button-box .modal-dialog-button:hover:focus, .menu-favorites-button:focus:hover, .menu-application-button-selected:focus, .menu-category-button-selected:focus, .sound-button:hover:focus, .popup-menu #notification .notification-button:active, .popup-menu #notification .notification-icon-button:active, .modal-dialog-button-box .modal-dialog-button:active, .sound-button:active, .popup-menu #notification .notification-button:active:focus, .popup-menu #notification .notification-icon-button:active:focus, .modal-dialog-button-box .modal-dialog-button:active:focus, .sound-button:active:focus, .popup-menu #notification .notification-button:insensitive, .popup-menu #notification .notification-icon-button:insensitive, .modal-dialog-button-box .modal-dialog-button:insensitive, .sound-button:insensitive { border-radius: 2px; } .popup-menu #notification .notification-button:focus, .popup-menu #notification .notification-icon-button:focus, .modal-dialog-button-box .modal-dialog-button:focus, .sound-button:focus { text-shadow: 0 1px rgba(59, 66, 82, 0); color: #d8dee9; background-color: #3f4758; border: 1px solid #81a1c1; box-shadow: inset 0 2px 4px rgba(63, 71, 88, 0.05); } .popup-menu #notification .notification-button:hover, .popup-menu #notification .notification-icon-button:hover, .modal-dialog-button-box .modal-dialog-button:hover, .menu-favorites-button:hover, .menu-application-button-selected, .menu-category-button-selected, .sound-button:hover { text-shadow: 0 1px rgba(59, 66, 82, 0); color: #d8dee9; background-color: #4a5367; border: 1px solid #232831; box-shadow: inset 0 2px 4px rgba(74, 83, 103, 0.05); } .popup-menu #notification .notification-button:hover:focus, .popup-menu #notification .notification-icon-button:hover:focus, .modal-dialog-button-box .modal-dialog-button:hover:focus, .menu-favorites-button:focus:hover, .menu-application-button-selected:focus, .menu-category-button-selected:focus, .sound-button:hover:focus { text-shadow: 0 1px rgba(59, 66, 82, 0); color: #d8dee9; background-color: #3f4758; border: 1px solid #81a1c1; box-shadow: inset 0 2px 4px rgba(63, 71, 88, 0.05); } .popup-menu #notification .notification-button:active, .popup-menu #notification .notification-icon-button:active, .modal-dialog-button-box .modal-dialog-button:active, .sound-button:active, .popup-menu #notification .notification-button:active:focus, .popup-menu #notification .notification-icon-button:active:focus, .modal-dialog-button-box .modal-dialog-button:active:focus, .sound-button:active:focus { text-shadow: 0 1px rgba(59, 66, 82, 0); color: #d8dee9; background-color: #81a1c1; border: 1px solid #81a1c1; box-shadow: inset 0 2px 4px #81a1c1; } .popup-menu #notification .notification-button:insensitive, .popup-menu #notification .notification-icon-button:insensitive, .modal-dialog-button-box .modal-dialog-button:insensitive, .sound-button:insensitive { text-shadow: 0 1px rgba(59, 66, 82, 0); color: rgba(216, 222, 233, 0.45); border: 1px solid rgba(35, 40, 49, 0.55); background-color: rgba(63, 71, 88, 0.55); box-shadow: inset 0 2px 4px rgba(63, 71, 88, 0.05); } .notification-button, .notification-icon-button { min-height: 20px; padding: 5px 32px; transition-duration: 0; border-radius: 2px; text-shadow: 0 1px rgba(59, 66, 82, 0); color: #BAC3CF; border: 1px solid rgba(20, 23, 28, 0.4); background-color: rgba(93, 105, 129, 0.4); } .notification-button:hover, .notification-icon-button:hover { text-shadow: 0 1px rgba(59, 66, 82, 0); color: #BAC3CF; border: 1px solid rgba(20, 23, 28, 0.4); background-color: rgba(108, 122, 150, 0.5); } .notification-button:focus, .notification-icon-button:focus { color: #81a1c1; } .notification-button:active, .notification-icon-button:active { text-shadow: 0 1px rgba(59, 66, 82, 0); color: #d8dee9; border: 1px solid #81a1c1; background-color: #81a1c1; } .notification-button:insensitive, .notification-icon-button:insensitive { text-shadow: 0 1px rgba(59, 66, 82, 0); color: #585f6b; border: 1px solid rgba(20, 23, 28, 0.4); background-color: rgba(93, 105, 129, 0.25); } .popup-menu #notification StEntry, #menu-search-entry, #appmenu-search-entry, .run-dialog-entry, .prompt-dialog-password-entry { padding: 7px; caret-size: 1px; selection-background-color: #81a1c1; selected-color: #d8dee9; transition-duration: 300ms; border-radius: 6px; color: #d8dee9; background-color: #3b4252; border: 1px solid #232831; box-shadow: inset 0 2px 4px rgba(59, 66, 82, 0.05); } .popup-menu #notification StEntry:focus, #menu-search-entry:focus, #appmenu-search-entry:focus, .run-dialog-entry:focus, .prompt-dialog-password-entry:focus, .popup-menu #notification StEntry:hover, #menu-search-entry:hover, #appmenu-search-entry:hover, .run-dialog-entry:hover, .prompt-dialog-password-entry:hover { color: #d8dee9; background-color: #3b4252; border: 1px solid #81a1c1; box-shadow: inset 0 2px 4px rgba(59, 66, 82, 0.05); } .popup-menu #notification StEntry:insensitive, #menu-search-entry:insensitive, #appmenu-search-entry:insensitive, .run-dialog-entry:insensitive, .prompt-dialog-password-entry:insensitive { color: rgba(216, 222, 233, 0.45); background-color: #3f4757; border-color: 1px solid #313845; box-shadow: inset 0 2px 4px rgba(63, 71, 87, 0.05); } .popup-menu #notification StEntry StIcon.capslock-warning, #menu-search-entry StIcon.capslock-warning, #appmenu-search-entry StIcon.capslock-warning, .run-dialog-entry StIcon.capslock-warning, .prompt-dialog-password-entry StIcon.capslock-warning { icon-size: 16px; warning-color: #c3674a; padding: 0 4px; } .notification StEntry { padding: 7px; caret-size: 1px; caret-color: #BAC3CF; selection-background-color: #81a1c1; selected-color: #d8dee9; transition-duration: 300ms; border-radius: 3px; color: #BAC3CF; background-color: rgba(93, 105, 129, 0.4); border: 1px solid rgba(20, 23, 28, 0.4); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } .notification StEntry:focus { color: #d8dee9; background-color: #81a1c1; border: 1px solid #81a1c1; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } .notification StEntry:insensitive { color: rgba(186, 195, 207, 0.55); background-color: rgba(93, 105, 129, 0.25); border: 1px solid rgba(20, 23, 28, 0.4); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } StScrollView.vfade { -st-vfade-offset: 0px; } StScrollView.hfade { -st-hfade-offset: 0px; } StScrollBar { padding: 8px; } StScrollView StScrollBar { min-width: 5px; min-height: 5px; } StScrollBar StBin#trough { background-color: rgba(59, 66, 82, 0.1); border-radius: 8px; } StScrollBar StButton#vhandle, StScrollBar StButton#hhandle { border-radius: 2px; background-color: #7f8696; border: 0px solid; margin: 0px; } StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover { background-color: #707888; } StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { background-color: #81a1c1; } .separator { -gradient-height: 1px; -gradient-start: rgba(0, 0, 0, 0); -gradient-end: rgba(0, 0, 0, 0); -margin-horizontal: 1.5em; height: 1em; } .popup-slider-menu-item, .slider { -slider-height: 0.3em; -slider-background-color: #4c556a; -slider-border-color: rgba(67, 76, 94, 0.3); -slider-active-background-color: #81a1c1; -slider-active-border-color: rgba(67, 76, 94, 0.3); -slider-border-width: 1px; -slider-handle-radius: 0.5em; height: 1em; min-width: 15em; border: 0 solid transparent; border-right-width: 1px; border-left-width: 5px; color: #81a1c1; } .popup-menu-item:active .popup-slider-menu-item, .popup-menu-item:active .slider { -slider-background-color: rgba(0, 0, 0, 0.2); -slider-active-background-color: #d8dee9; } .check-box CinnamonGenericContainer { spacing: .2em; min-height: 30px; padding-top: 2px; } .check-box StLabel { font-weight: normal; } .check-box StBin { width: 16px; height: 16px; background-image: url("dark-assets/checkbox/checkbox-unchecked.svg"); } .check-box:focus StBin { background-image: url("dark-assets/checkbox/checkbox-unchecked-focused.svg"); } .check-box:checked StBin { background-image: url("dark-assets/checkbox/checkbox-checked.svg"); } .check-box:focus:checked StBin { background-image: url("dark-assets/checkbox/checkbox-checked-focused.svg"); } .radiobutton CinnamonGenericContainer { spacing: .2em; height: 26px; padding-top: 2px; } .radiobutton StLabel { padding-top: 4px; font-size: 0.9em; box-shadow: none; } .radiobutton StBin { width: 16px; height: 16px; background-image: url("dark-assets/checkbox/checkbox-unchecked.svg"); } .radiobutton:focus StBin { background-image: url("dark-assets/checkbox/checkbox-unchecked-focused.svg"); } .radiobutton:checked StBin { background-image: url("dark-assets/checkbox/checkbox-checked.svg"); } .radiobutton:focus:checked StBin { background-image: url("dark-assets/checkbox/checkbox-checked-focused.svg"); } .toggle-switch { width: 50px; height: 20px; background-size: contain; background-image: url("dark-assets/switch/switch-off.svg"); } .toggle-switch:checked { background-image: url("dark-assets/switch/switch-on.svg"); } .popup-menu-item:active .toggle-switch { background-image: url("common-assets/switch/switch-off-selected.svg"); } .popup-menu-item:active .toggle-switch:checked { background-image: url("common-assets/switch/switch-on-selected.svg"); } .cinnamon-link { color: #5e81ac; text-decoration: underline; } .cinnamon-link:hover { color: #809bbd; } #Tooltip { border-radius: 3px; padding: 5px 12px; background-color: #2e3440; color: #BAC3CF; font-size: 1em; font-weight: normal; text-align: center; } .menu, .popup-menu, .popup-combo-menu { color: #d8dee9; border: 1px solid #232831; border-radius: 5px; background-color: rgba(46, 52, 64, 0.99); } .menu.top, .popup-menu.top, .top.popup-combo-menu { border-radius: 0 0 5px 5px; } .menu.bottom, .popup-menu.bottom, .bottom.popup-combo-menu { border-radius: 5px 5px 0 0; } .menu.left, .popup-menu.left, .left.popup-combo-menu { border-radius: 0 5px 5px 0; } .menu.right, .popup-menu.right, .right.popup-combo-menu { border-radius: 5px 0 0 5px; } .menu-arrow, .popup-menu-arrow { icon-size: 16px; } .menu .popup-sub-menu, .popup-menu .popup-sub-menu, .popup-combo-menu .popup-sub-menu { box-shadow: none; background-color: #3b4252; } .menu .popup-sub-menu .popup-menu-item:ltr, .popup-menu .popup-sub-menu .popup-menu-item:ltr, .popup-combo-menu .popup-sub-menu .popup-menu-item:ltr { padding-right: 0em; } .menu .popup-sub-menu .popup-menu-item:rtl, .popup-menu .popup-sub-menu .popup-menu-item:rtl, .popup-combo-menu .popup-sub-menu .popup-menu-item:rtl { padding-left: 0em; } .menu .popup-sub-menu StScrollBar, .popup-menu .popup-sub-menu StScrollBar, .popup-combo-menu .popup-sub-menu StScrollBar { padding: 4px; } .menu .popup-sub-menu StScrollBar StBin#trough, .menu .popup-sub-menu StScrollBar StBin#vhandle, .popup-menu .popup-sub-menu StScrollBar StBin#trough, .popup-menu .popup-sub-menu StScrollBar StBin#vhandle, .popup-combo-menu .popup-sub-menu StScrollBar StBin#trough, .popup-combo-menu .popup-sub-menu StScrollBar StBin#vhandle { border-width: 0; } .menu .popup-menu-content, .popup-menu .popup-menu-content, .popup-combo-menu .popup-menu-content { padding: 1em 0em 1em 0em; } .menu .popup-menu-item, .popup-menu .popup-menu-item, .popup-combo-menu .popup-menu-item { padding: .4em 1.75em; spacing: 1em; border-left-width: 0; border-right-width: 0; } .menu .popup-menu-item:active, .popup-menu .popup-menu-item:active, .popup-combo-menu .popup-menu-item:active { color: #d8dee9; background-color: #81a1c1; } .menu .popup-menu-item:insensitive, .popup-menu .popup-menu-item:insensitive, .popup-combo-menu .popup-menu-item:insensitive { color: rgba(216, 222, 233, 0.5); background: none; } .menu .popup-inactive-menu-item, .popup-menu .popup-inactive-menu-item, .popup-combo-menu .popup-inactive-menu-item { color: #d8dee9; } .menu .popup-inactive-menu-item:insensitive, .popup-menu .popup-inactive-menu-item:insensitive, .popup-combo-menu .popup-inactive-menu-item:insensitive { color: rgba(216, 222, 233, 0.45); } .menu .popup-menu-item:active .popup-inactive-menu-item, .popup-menu .popup-menu-item:active .popup-inactive-menu-item, .popup-combo-menu .popup-menu-item:active .popup-inactive-menu-item { color: #d8dee9; } .menu-icon, .popup-menu-icon { icon-size: 16px; } .popup-menu-boxpointer { -arrow-border-radius: 3px; -arrow-background-color: rgba(0, 0, 0, 0); -arrow-border-width: 1px; -arrow-border-color: rgba(0, 0, 0, 0); -arrow-base: 0; -arrow-rise: 0; } .popup-combo-menu { padding: 10px 1px; } .popup-combobox-item { spacing: 1em; } .popup-separator-menu-item { -gradient-height: 2px; -gradient-start: transparent; -gradient-end: transparent; -margin-horizontal: 1.5em; height: 1em; } .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 { height: 28px; width: 32px; font-weight: 700; background-color: #2e3440; color: #d8dee9; } #panel:highlight { border-image: none; background-color: rgba(184, 79, 89, 0.5); } #panelLeft { spacing: 4px; } #panelLeft:dnd { background-gradient-direction: vertical; background-gradient-start: rgba(255, 0, 0, 0.05); background-gradient-end: rgba(255, 0, 0, 0.2); } #panelLeft:ltr { padding-right: 4px; } #panelLeft:rtl { padding-left: 4px; } #panelLeft.vertical { padding: 0; } #panelLeft.vertical:ltr { padding-right: 0px; } #panelLeft.vertical:rtl { padding-left: 0px; } #panelRight:dnd { background-gradient-direction: vertical; background-gradient-start: rgba(0, 0, 255, 0.05); background-gradient-end: rgba(0, 0, 255, 0.2); } #panelRight:ltr { padding-left: 4px; spacing: 0px; } #panelRight:rtl { padding-right: 4px; spacing: 0px; } #panelRight.vertical { padding: 0; } #panelRight.vertical:ltr { padding-right: 0px; } #panelRight.vertical:rtl { padding-left: 0px; } #panelCenter { spacing: 4px; } #panelCenter:dnd { background-gradient-direction: vertical; background-gradient-start: rgba(0, 255, 0, 0.05); background-gradient-end: rgba(0, 255, 0, 0.2); } .panel-top, .panel-bottom, .panel-left, .panel-right { color: #d8dee9; font-size: 1em; padding: 0px; } .panel-dummy { background-color: rgba(184, 79, 89, 0.5); } .panel-dummy:entered { background-color: rgba(184, 79, 89, 0.6); } .panel-status-button { border-width: 0; -natural-hpadding: 3px; -minimum-hpadding: 3px; font-weight: bold; color: white; height: 22px; } .panel-button { -natural-hpadding: 6px; -minimum-hpadding: 2px; font-weight: bold; color: #d8dee9; transition-duration: 100; } .system-status-icon { icon-size: 16px; padding: 0 1px; } #overview { spacing: 12px; } .window-caption { background-color: #2e3440; border: 1px solid #2e3440; color: #BAC3CF; spacing: 25px; border-radius: 2px; font-size: 9pt; padding: 5px 8px; -cinnamon-caption-spacing: 4px; } .window-caption#selected { background-color: #81a1c1; color: #d8dee9; border: 1px solid #81a1c1; spacing: 25px; } .expo-workspaces-name-entry, .expo-workspaces-name-entry#selected { height: 15px; border-radius: 2px; font-size: 9pt; padding: 5px 8px; -cinnamon-caption-spacing: 4px; color: #BAC3CF; background-color: rgba(93, 105, 129, 0.4); border: 1px solid rgba(20, 23, 28, 0.4); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } .expo-workspaces-name-entry:focus, .expo-workspaces-name-entry#selected:focus { border: 1px solid #81a1c1; background-color: #81a1c1; color: #d8dee9; font-style: italic; transition-duration: 300; selection-background-color: #d8dee9; selected-color: #81a1c1; } .expo-workspace-thumbnail-frame { border: 4px solid rgba(255, 255, 255, 0); background-color: rgba(255, 255, 255, 0); border-radius: 2px; } .expo-workspace-thumbnail-frame#active { border: 4px solid #81a1c1; background-color: black; border-radius: 2px; } .expo-background { background-color: #2e3440; } .workspace-thumbnails { spacing: 26px; } .workspace-thumbnails-background, .workspace-thumbnails-background:rtl { padding: 8px; } .workspace-add-button { background-image: url("common-assets/misc/add-workspace.svg"); height: 200px; width: 35px; transition-duration: 100; } .workspace-add-button:hover { background-image: url("common-assets/misc/add-workspace-hover.svg"); transition-duration: 100; } .workspace-add-button:active { background-image: url("common-assets/misc/add-workspace-active.svg"); transition-duration: 100; } .workspace-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; } .workspace-close-button:hover, .window-close:hover { background-image: url("common-assets/misc/close-hover.svg"); background-size: 26px; height: 26px; width: 26px; } .workspace-close-button:active, .window-close:active { background-image: url("common-assets/misc/close-active.svg"); background-size: 26px; height: 26px; width: 26px; } .window-close-area { background-image: url("common-assets/misc/trash-icon.svg"); height: 120px; width: 400px; } .about-content { width: 550px; height: 250px; spacing: 8px; padding-bottom: 10px; } .about-title { font-size: 2em; font-weight: bold; } .about-uuid { font-size: 10px; color: #888; } .about-icon { padding-right: 20px; padding-bottom: 14px; } .about-scrollBox { border: 1px solid #232831; border-radius: 2px; background-color: #3b4252; padding: 4px; padding-right: 0; border-radius: 0; } .about-scrollBox-innerBox { padding: 1.2em; spacing: 1.2em; } .about-description { padding-top: 4px; padding-bottom: 16px; } .about-version { padding-left: 7px; font-size: 10px; color: #888; } .calendar { spacing-rows: 0; spacing-columns: 0; padding: .4em 1.75em; } .datemenu-date-label { padding: .5em 0em 1em 0em; font-weight: bold; text-align: center; color: #d8dee9; } .calendar-main-box { margin: 0 .8em .5em .8em; } .calendar-events-main-box { height: 300px; margin-right: .5em; padding: .5em; min-width: 350px; border: 1px solid #232831; background-color: #3b4252; } .calendar-events-no-events-button { margin: 6px 0 6px 0; padding: 6px; } .calendar-events-no-events-button:hover { background-color: #81a1c1; } .calendar-events-no-events-button:hover .calendar-events-no-events-icon, .calendar-events-no-events-button:hover .calendar-events-no-events-label { color: #d8dee9; } .calendar-events-no-events-icon, .calendar-events-no-events-label { font-weight: bold; color: #d8dee9; text-align: center; } .calendar-events-date-label { padding: .1em .1em .5em .1em; color: #d8dee9; font-weight: bold; text-align: center; } .calendar-events-event-container { padding: 0; } .calendar-event-button { border: 1px solid rgba(0, 0, 0, 0); } .calendar-event-button .calendar-event-time-past { color: rgba(216, 222, 233, 0.4); font-weight: bold; text-align: left; margin-bottom: .2em; } .calendar-event-button .calendar-event-time-present { color: #d8dee9; font-weight: bold; text-align: left; margin-bottom: .2em; } .calendar-event-button .calendar-event-time-present:all-day { color: #81a1c1; } .calendar-event-button .calendar-event-time-future { color: #d8dee9; font-weight: bold; text-align: left; margin-bottom: .2em; } .calendar-event-button .calendar-event-summary { color: #d8dee9; text-align: left; width: 200px; } .calendar-event-button .calendar-event-countdown { text-align: right; margin-bottom: .6em; color: #d8dee9; } .calendar-event-button .calendar-event-countdown:soon { font-weight: bold; } .calendar-event-button .calendar-event-countdown:imminent { font-weight: bold; color: #c3674a; } .calendar-event-button .calendar-event-countdown:current { font-weight: bold; color: #81a1c1; } .calendar-event-button:hover { background-color: #81a1c1; border: 1px solid #232831; } .calendar-event-button:hover .calendar-event-time-past, .calendar-event-button:hover .calendar-event-time-present, .calendar-event-button:hover .calendar-event-time-future, .calendar-event-button:hover .calendar-event-summary { color: #d8dee9; } .calendar-event-button:hover .calendar-event-countdown { text-align: right; margin-bottom: .6em; color: #d8dee9; } .calendar-event-button:hover .calendar-event-countdown:soon { font-weight: bold; } .calendar-event-button:hover .calendar-event-countdown:imminent { font-weight: bold; } .calendar-event-button:hover .calendar-event-countdown:current { font-weight: bold; } .calendar-event-color-strip { width: 2px; } .calendar-today-home-button { padding: 6px; } .calendar-today-day-label { font-size: 1.75em; color: #d8dee9; font-weight: bold; text-align: center; padding-bottom: .1em; } .calendar-today-date-label { font-size: 1.1em; color: #d8dee9; font-weight: bold; text-align: center; } .calendar-today-home-button-enabled { padding: 6px; } .calendar-today-home-button-enabled:hover { background-color: #81a1c1; } .calendar-today-home-button-enabled:hover .calendar-today-day-label { color: #d8dee9; } .calendar-today-home-button-enabled:hover .calendar-today-date-label { color: #d8dee9; } .calendar-month-label { color: #d8dee9; font-weight: bold; padding: 8px 0; } .calendar-change-month-back, .calendar-change-month-forward { width: 16px; height: 16px; } .calendar-change-month-back { background-image: url("common-assets/misc/calendar-arrow-left.svg"); } .calendar-change-month-back:focus, .calendar-change-month-back:hover { background-image: url("common-assets/misc/calendar-arrow-left-hover.svg"); } .calendar-change-month-back:active { background-image: url("common-assets/misc/calendar-arrow-left.svg"); } .calendar-change-month-back:rtl { background-image: url("common-assets/misc/calendar-arrow-right.svg"); } .calendar-change-month-back:rtl:focus, .calendar-change-month-back:rtl:hover { background-image: url("common-assets/misc/calendar-arrow-right-hover.svg"); } .calendar-change-month-back:rtl:active { background-image: url("common-assets/misc/calendar-arrow-right.svg"); } .calendar-change-month-forward { background-image: url("common-assets/misc/calendar-arrow-right.svg"); } .calendar-change-month-forward:focus, .calendar-change-month-forward:hover { background-image: url("common-assets/misc/calendar-arrow-right-hover.svg"); } .calendar-change-month-forward:active { background-image: url("common-assets/misc/calendar-arrow-right.svg"); } .calendar-change-month-forward:rtl { background-image: url("common-assets/misc/calendar-arrow-left.svg"); } .calendar-change-month-forward:rtl:focus, .calendar-change-month-forward:rtl:hover { background-image: url("common-assets/misc/calendar-arrow-left-hover.svg"); } .calendar-change-month-forward:rtl:active { background-image: url("common-assets/misc/calendar-arrow-left.svg"); } .calendar-day-event-dot-box { margin-top: 1.7em; max-rows: 1; } .calendar-day-event-dot { margin: 1px; border-radius: 2px; width: 4px; height: 4px; } .calendar-day-base { font-size: 1em; text-align: center; width: 2.2em; height: 2.2em; padding: 0.1em; } .calendar-day-base:hover { font-weight: bold; color: #d8dee9; background-color: #81a1c1; } .calendar-day-heading { color: rgba(216, 222, 233, 0.85); margin-top: 1em; font-size: 1.05em; } .calendar-day { border-width: 0; color: rgba(216, 222, 233, 0.9); } .calendar-day-top { border-top-width: 0; } .calendar-day-left { border-left-width: 0; } .calendar-nonwork-day { color: #d8dee9; background-color: transparent; font-weight: bold; } .calendar-today { color: #d8dee9; background-color: #81a1c1; border-width: 0; } .calendar-today:selected { font-weight: bold; } .calendar-not-today { color: #d8dee9; } .calendar-not-today:selected { font-weight: bold; background-color: rgba(216, 222, 233, 0.4); } .calendar-not-today:selected:hover { font-weight: bold; color: #d8dee9; } .calendar-other-month-day { color: rgba(216, 222, 233, 0.5); } .calendar-other-month-day:hover { color: #d8dee9; } .calendar-week-number { color: rgba(216, 222, 233, 0.85); font-size: 0.8em; margin-top: 0.8em; } #notification { box-shadow: 0 1px 15px 4px #232831; border-top-color: #81a1c1; border-top: 4px; border-radius: 5px; background-color: #2e3440; padding: 13px; spacing-rows: 5px; spacing-columns: 5px; margin-from-right-edge-of-screen: 20px; width: 34em; color: #BAC3CF; } .popup-menu #notification { color: #d8dee9; border-image: url("dark-assets/misc/message.svg") 9 9 9 9; } .popup-menu #notification .notification-button, .popup-menu #notification .notification-icon-button { padding: 5px; } #notification.multi-line-notification { padding-bottom: 13px; color: #BAC3CF; } #notification-scrollview { max-height: 10em; } #notification-scrollview > .top-shadow, #notification-scrollview > .bottom-shadow { height: 1em; } #notification-scrollview:ltr > StScrollBar { padding-left: 6px; } #notification-scrollview:rtl > StScrollBar { padding-right: 6px; } #notification-body { spacing: 5px; } #notification-actions { spacing: 10px; } .notification-with-image { min-height: 159px; color: #BAC3CF; } .notification-button, .notification-icon-button { padding: 5px; } .notification-icon-button > StIcon { icon-size: 36px; } #altTabPopup { padding: 8px; spacing: 16px; } .switcher-list { color: #BAC3CF; background: #2e3440; border: 1px solid #232831; border-radius: 5px; box-shadow: 0px 0px 7px rgba(35, 40, 49, 0.8); padding: 20px; } .switcher-list > StBoxLayout { padding: 4px; } .switcher-list-item-container { spacing: 8px; } .switcher-list .item-box { padding: 8px; border-radius: 5px; } .switcher-list .item-box:outlined { padding: 8px; border: 1px solid #81a1c1; } .switcher-list .item-box:selected { color: #d8dee9; background-color: #81a1c1; border: 0px solid #81a1c1; } .switcher-list .thumbnail { width: 256px; } .switcher-list .thumbnail-box { padding: 2px; spacing: 4px; } .switcher-list .separator { width: 1px; background: rgba(255, 255, 255, 0.2); } .switcher-arrow { border-color: rgba(0, 0, 0, 0); color: #BAC3CF; } .switcher-arrow:highlighted { border-color: rgba(0, 0, 0, 0); color: #d8dee9; } .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; } .ripple-box { width: 104px; height: 104px; background-image: url("common-assets/misc/corner-ripple.svg"); background-size: contain; } .lightbox { background-color: rgba(0, 0, 0, 0.4); } .flashspot { background-color: white; } .modal-dialog { background-color: #434c5e; border: 1px solid #232831; border-radius: 5px; padding: 5px 10px; } .modal-dialog > StBoxLayout:first-child { padding: 10px; } .modal-dialog-button-box { spacing: 0; margin: 0px; padding: 10px; border: none; background-color: #434c5e; } .modal-dialog-button-box .modal-dialog-button { padding-top: 0; padding-bottom: 0; height: 30px; } .modal-dialog .confirm-dialog-title { text-align: center; font-weight: bold; font-size: 1.3em; padding-bottom: 12px; } .run-dialog { padding: 10px 15px 10px 15px; border: 1px solid #232831; border-radius: 5px; background-color: #434c5e; } .run-dialog > * { padding: 0; } .run-dialog-label { font-size: 1.3em; font-weight: bold; color: #d8dee9; padding-bottom: 15px; text-align: center; } .run-dialog-description { color: #d8dee9; padding-top: 15px; text-align: center; } .run-dialog-description.error { color: #b84f59; } .run-dialog-completion-box { padding-top: 5px; padding-left: 15px; font-size: 1em; } .run-dialog-entry { width: 21em; height: 1.2em; padding: 7px; border-radius: 3px; caret-color: #BAC3CF; selected-color: #d8dee9; selection-background-color: #81a1c1; color: #BAC3CF; background-color: rgba(93, 105, 129, 0.4); border: 1px solid rgba(20, 23, 28, 0.4); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } .run-dialog-entry:focus { color: #d8dee9; background-color: #3b4252; border: 1px solid #81a1c1; box-shadow: inset 0 2px 4px rgba(59, 66, 82, 0.05); } .run-dialog .modal-dialog-button-box { border: none; box-shadow: none; background: none; } /* CinnamonMountOperation Dialogs */ .cinnamon-mount-operation-icon { icon-size: 48px; } .mount-password-reask { color: #c3674a; } .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; } .show-processes-dialog-subject:rtl, .mount-question-dialog-subject:rtl { padding-left: 0px; padding-right: 17px; } .show-processes-dialog-description, .mount-question-dialog-description { padding-left: 17px; width: 28em; } .show-processes-dialog-description:rtl, .mount-question-dialog-description:rtl { padding-right: 17px; } .show-processes-dialog-app-list { max-height: 200px; padding-top: 24px; padding-left: 49px; padding-right: 32px; } .show-processes-dialog-app-list:rtl { padding-right: 49px; padding-left: 32px; } .show-processes-dialog-app-list-item { color: #ccc; } .show-processes-dialog-app-list-item:hover { color: white; } .show-processes-dialog-app-list-item:ltr { padding-right: 1em; } .show-processes-dialog-app-list-item:rtl { padding-left: 1em; } .show-processes-dialog-app-list-item-icon:ltr { padding-right: 17px; } .show-processes-dialog-app-list-item-icon:rtl { padding-left: 17px; } .show-processes-dialog-app-list-item-name { font-size: 1.1em; } .magnifier-zoom-region { border: 2px solid maroon; } .magnifier-zoom-region .full-screen { border-width: 0px; } #keyboard { background-color: #2e3440; border-width: 0; border-top-width: 1px; border-color: rgba(0, 0, 0, 0.4); } .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; text-shadow: 0 1px rgba(59, 66, 82, 0); color: #BAC3CF; border: 1px solid rgba(20, 23, 28, 0.4); background-color: rgba(93, 105, 129, 0.4); } .keyboard-key:hover { text-shadow: 0 1px rgba(59, 66, 82, 0); color: #BAC3CF; border: 1px solid rgba(20, 23, 28, 0.4); background-color: rgba(108, 122, 150, 0.5); } .keyboard-key:active, .keyboard-key:checked { text-shadow: 0 1px rgba(59, 66, 82, 0); color: #d8dee9; border: 1px solid #81a1c1; background-color: #81a1c1; } .keyboard-key:grayed { text-shadow: 0 1px rgba(59, 66, 82, 0); color: #585f6b; border: 1px solid rgba(20, 23, 28, 0.4); background-color: rgba(93, 105, 129, 0.25); } .keyboard-subkeys { color: #BAC3CF; padding: 5px; -arrow-border-radius: 2px; -arrow-background-color: #2e3440; -arrow-border-width: 1px; -arrow-border-color: rgba(0, 0, 0, 0.4); -arrow-base: 20px; -arrow-rise: 10px; -boxpointer-gap: 5px; } .menu-favorites-box { margin: auto; padding: 10px; transition-duration: 300; background-color: #373e4c; border: 1px solid #232831; } .menu-favorites-button { padding: 10px; border: 1px solid rgba(0, 0, 0, 0); } .menu-places-box { margin: auto; padding: 10px; border: 0px solid red; } .menu-places-button { padding: 10px; } .menu-categories-box { padding: 10px 30px 10px 30px; } .menu-applications-inner-box, .menu-applications-outer-box { padding: 10px 10px 0 10px; } .menu-application-button { padding: 7px; border: 1px solid rgba(0, 0, 0, 0); } .menu-application-button:highlighted { font-weight: bold; } .menu-application-button-selected { padding: 7px; } .menu-application-button-selected:highlighted { font-weight: bold; } .menu-application-button-label:ltr { padding-left: 5px; } .menu-application-button-label:rtl { padding-right: 5px; } .menu-category-button { padding: 7px; border: 1px solid rgba(0, 0, 0, 0); } .menu-category-button-selected { padding: 7px; } .menu-category-button-hover { background-color: rgba(129, 161, 193, 0.3); border-radius: 2px; } .menu-category-button-greyed { padding: 7px; color: rgba(216, 222, 233, 0.45); border: 1px solid rgba(0, 0, 0, 0); } .menu-category-button-label:ltr { padding-left: 5px; } .menu-category-button-label:rtl { padding-right: 5px; } .menu-selected-app-box { padding-right: 30px; padding-left: 28px; text-align: right; height: 30px; } .menu-selected-app-box:rtl { padding-top: 10px; height: 30px; } .menu-selected-app-title { font-weight: bold; } .menu-selected-app-description { max-width: 150px; } .menu-search-box:ltr { padding-left: 30px; } .menu-search-box-rtl { padding-right: 30px; } #menu-search-entry { width: 250px; min-height: 15px; font-weight: normal; caret-color: #d8dee9; } .menu-search-entry-icon { icon-size: 1em; color: #d8dee9; } /* Context menu (at the moment only for favorites) */ .appmenu-sidebar-button, .appmenu-application-button, .appmenu-application-button-selected, .appmenu-category-button, .appmenu-category-button-selected, .appmenu-category-button-greyed { padding: 7px; spacing: 5px; border-radius: 6px; } .appmenu-background .popup-menu-content { padding: 0; } .appmenu-main-box { spacing: 10px; } .appmenu-right-box { spacing: 5px; padding: 10px 10px; } .appmenu-categories-applications-box { spacing: 15px; } .appmenu-categories-applications-box:top { padding-top: 5px; } .appmenu-applications-box { padding-right: 5px; } .appmenu-search-box { spacing: 10px; } .appmenu-sidebar { padding: 15px 0px; background-color: #353b49; border-radius: 6px 0 0 0; border-right-width: 1px; border-color: #232831; } .menu-top .appmenu-sidebar { border-radius: 0 0 0 6px; } .menu-bottom .appmenu-sidebar { border-radius: 6px 0 0 0; } .menu-left .appmenu-sidebar { border-radius: 0; } .menu-right .appmenu-sidebar { border-radius: 0; } .appmenu-sidebar-user-box .user-widget-label { color: #d8dee9; text-align: center; } .appmenu-sidebar .appmenu-system-button { background-color: #4a5367; border: none; } .appmenu-sidebar .appmenu-system-button-lock:hover { background-color: #5f6b84; } .appmenu-sidebar .appmenu-system-button-logout:hover { background-color: #5f6b84; } .appmenu-sidebar .appmenu-system-button-shutdown { color: white; background-color: #b84f59; } .appmenu-sidebar .appmenu-system-button-shutdown:hover { color: white; background-color: #bf616a; } .appmenu-system-box { spacing: 10px; } .appmenu-sidebar-button { padding: 4px 7px; margin: 0 10px; } .appmenu-sidebar-button:hover { background-color: #4a5367; border-color: #232831; } .appmenu-system-button { padding: 8.4px; border: 1px solid #232831; border-radius: 9999px; background-color: #4a5367; } .appmenu-application-button-label { padding: 0; } .appmenu-application-button-description { color: rgba(216, 222, 233, 0.45); } .appmenu-application-button:highlighted { font-weight: bold; } .appmenu-application-button-selected { background-color: #4a5367; } .appmenu-application-button-selected:highlighted { font-weight: bold; } .appmenu-category-button-label { padding: 0; } .appmenu-category-button:hover { background-color: #4a5367; } .appmenu-category-button-selected { background-color: #4a5367; } .appmenu-category-button-greyed { color: rgba(216, 222, 233, 0.45); font-style: italic; } .appmenu-category-button-greyed StIcon { opacity: 0.5; } .appmenu-search-entry-icon { icon-size: 1em; } .info-osd { text-align: center; font-weight: bold; spacing: 1em; padding: 16px; color: #d8dee9; background-color: #2e3440; } .osd-window { text-align: center; font-weight: bold; spacing: 1em; padding: 20px; margin: 32px; min-width: 64px; min-height: 64px; color: #d8dee9; background: #2e3440; border: 1px solid #232831; border-radius: 5px; box-shadow: 0px 0px 7px rgba(35, 40, 49, 0.8); } .osd-window .osd-monitor-label { font-size: 3em; } .osd-window .level { padding: 0; height: 4px; background-color: rgba(0, 0, 0, 0.5); border-radius: 2px; color: #81a1c1; } .osd-window .level-bar { background-color: #81a1c1; } .window-list-box { spacing: 6px; padding-left: 10px; padding-top: 1px; } .window-list-box.vertical { spacing: 2px; padding-left: 0px; padding-right: 0px; padding-top: 10px; padding-bottom: 10px; } .window-list-box:highlight { background-color: rgba(184, 79, 89, 0.5); } .window-list-item-label { font-weight: normal; width: 15em; min-width: 5px; } .window-list-item-box { font-weight: normal; background-image: none; padding-top: 0; padding-left: 8px; padding-right: 8px; transition-duration: 100; color: rgba(186, 195, 207, 0.7); } .window-list-item-box.top, .window-list-item-box.bottom { border-bottom-width: 2px; } .window-list-item-box.top StLabel, .window-list-item-box.bottom StLabel { padding-left: 2px; } .window-list-item-box.right { padding-left: 0px; padding-right: 0px; border-right-width: 2px; } .window-list-item-box.right StBin { padding-right: 0; } .window-list-item-box.left { padding-left: 0px; padding-right: 0px; border-left-width: 2px; } .window-list-item-box.left StBin { padding-left: 1px; } .window-list-item-box:hover, .window-list-item-box:groupFocus { color: #d8dee9; border-color: #555f76; } .window-list-item-box:active, .window-list-item-box:checked, .window-list-item-box:focus, .window-list-item-box:running { color: #5e81ac; border-color: #81a1c1; background-color: rgba(94, 129, 172, 0.3); } .window-list-item-box .progress { background-color: rgba(94, 129, 172, 0.8); } .window-list-item-demands-attention { background-gradient-direction: vertical; background-gradient-start: #b84f59; background-gradient-end: #b84f59; } .window-list-preview { spacing: 6px; color: #d8dee9; border: 1px solid #232831; background-color: #434c5e; border-radius: 3px; padding: 6px 12px 12px 12px; font-size: 1em; } .grouped-window-list-item-label { font-weight: normal; width: 15em; min-width: 5px; } .grouped-window-list-item-box { text-align: left; font-weight: normal; background-image: none; padding-top: 0; padding-left: 8px; padding-right: 8px; transition-duration: 100; color: rgba(216, 222, 233, 0.6); } .grouped-window-list-item-box.top, .grouped-window-list-item-box.bottom { border-bottom-width: 2px; } .grouped-window-list-item-box.top StLabel, .grouped-window-list-item-box.bottom StLabel { padding-left: 2px; } .grouped-window-list-item-box.right { padding-left: 0px; padding-right: 0px; border-right-width: 2px; } .grouped-window-list-item-box.right StBin { padding-right: 0; } .grouped-window-list-item-box.left { padding-left: 0px; padding-right: 0px; border-left-width: 2px; } .grouped-window-list-item-box.left StBin { padding-left: 1px; } .grouped-window-list-item-box:active, .grouped-window-list-item-box:checked { color: #d8dee9; border-color: #555f76; } .grouped-window-list-item-box:hover, .grouped-window-list-item-box:active:hover, .grouped-window-list-item-box:focus, .grouped-window-list-item-box:active:focus, .grouped-window-list-item-box:focus:hover, .grouped-window-list-item-box:active:focus:hover { color: #d8dee9; border-color: #5e81ac; background-color: rgba(94, 129, 172, 0.3); } .grouped-window-list-item-box .progress { background-color: rgba(94, 129, 172, 0.8); } .grouped-window-list-item-demands-attention { background-gradient-direction: vertical; background-gradient-start: #b84f59; background-gradient-end: #b84f59; } .grouped-window-list-thumbnail-label { padding-left: 4px; } .grouped-window-list-number-label { z-index: 99; color: #d8dee9; } .grouped-window-list-badge { border-radius: 256px; background-color: #2e3440; } .grouped-window-list-button-label { padding-left: 4px; } .grouped-window-list-thumbnail-alert { background: rgba(255, 52, 52, 0.3); } .grouped-window-list-thumbnail-menu { color: #d8dee9; border: 1px solid #232831; background-color: #434c5e; border-radius: 3px; padding: 0px; } .grouped-window-list-thumbnail-menu > StBoxLayout { padding: 4px; } .grouped-window-list-thumbnail-menu .item-box { padding: 10px; border-radius: 2px; spacing: 4px; } .grouped-window-list-thumbnail-menu .item-box:outlined { padding: 8px; border: 1px solid #81a1c1; } .grouped-window-list-thumbnail-menu .item-box:selected { border: 1px solid #81a1c1; } .grouped-window-list-thumbnail-menu .thumbnail { width: 256px; } .grouped-window-list-thumbnail-menu .separator { width: 1px; background: rgba(255, 255, 255, 0.2); } .sound-button { width: 22px; height: 13px; padding: 8px; } .sound-button-container { padding-right: 3px; padding-left: 3px; } .sound-button StIcon { icon-size: 1.4em; } .sound-track-infos { padding: 5px; } .sound-track-info { padding-top: 2px; padding-bottom: 2px; } .sound-track-info StIcon { icon-size: 16px; } .sound-track-info StLabel { padding-left: 5px; padding-right: 5px; } .sound-track-box { padding-left: 15px; padding-right: 15px; max-width: 220px; } .sound-seek-box { padding-left: 15px; } .sound-seek-box StLabel { padding-top: 2px; } .sound-seek-box StIcon { icon-size: 16px; } .sound-seek-slider { width: 140px; } .sound-volume-menu-item { padding: .4em 1.75em; } .sound-volume-menu-item StIcon { icon-size: 1.14em; padding-left: 8px; padding-right: 8px; } .sound-playback-control { padding: 5px 10px 10px 10px; } .sound-player > StBoxLayout:first-child { padding: 5px 10px 12px 10px; spacing: 0.5em; } .sound-player > StBoxLayout:first-child StButton:small { width: 20px; height: 20px; border: 1px solid transparent; } .sound-player > StBoxLayout:first-child StButton:small StIcon { icon-size: 12px; } .sound-player > StBoxLayout:first-child StButton:small:hover { text-shadow: 0 1px rgba(59, 66, 82, 0); color: #d8dee9; background-color: #4a5367; border: 1px solid #232831; box-shadow: inset 0 2px 4px rgba(74, 83, 103, 0.05); } .sound-player > StBoxLayout:first-child StButton:small:active { text-shadow: 0 1px rgba(59, 66, 82, 0); color: #d8dee9; background-color: #81a1c1; border: 1px solid #81a1c1; box-shadow: inset 0 2px 4px #81a1c1; } .sound-player-generic-coverart { background: rgba(0, 0, 0, 0.2); } .sound-player-overlay { width: 290px; padding: 15px; spacing: 0.5em; background: rgba(46, 52, 64, 0.9); border-top: 1px solid #232831; color: #d8dee9; } .sound-player-overlay StButton { width: 22px; height: 13px; padding: 5px; color: #d8dee9; border-radius: 2px; border: 1px solid transparent; } .sound-player-overlay StButton StIcon { icon-size: 16px; } .sound-player-overlay StButton:hover { text-shadow: 0 1px rgba(59, 66, 82, 0); color: #BAC3CF; border: 1px solid rgba(20, 23, 28, 0.4); background-color: rgba(108, 122, 150, 0.5); } .sound-player-overlay StButton:active { text-shadow: 0 1px rgba(59, 66, 82, 0); color: #d8dee9; background-color: #81a1c1; border: 1px solid #81a1c1; box-shadow: inset 0 2px 4px #81a1c1; } .sound-player-overlay StBoxLayout { padding-top: 2px; } .sound-player-overlay > StBoxLayout { spacing: 5px; } .sound-player .slider { height: 0.5em; padding: 0; border: none; -slider-height: 0.5em; -slider-background-color: #38404f; -slider-border-color: rgba(0, 0, 0, 0); -slider-active-background-color: #81a1c1; -slider-active-border-color: rgba(0, 0, 0, 0); -slider-border-width: 0px; -slider-handle-radius: 0px; } #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: #d8dee9; padding: 3px; padding-top: 4px; transition-duration: 300; } .workspace-button:outlined, .workspace-button:outlined:hover { background-color: #3f4758; color: #d8dee9; } .workspace-button:hover { color: #5e81ac; } /* Controls the style when using the "Visual representation" option */ .workspace-graph { padding: 3px; spacing: 3px; } .workspace-graph .workspace { border: 1px solid rgba(0, 0, 0, 0.4); background-gradient-direction: none; background-color: rgba(0, 0, 0, 0.2); } .workspace-graph .workspace:active { border: 1px solid #81a1c1; background-gradient-direction: none; } .workspace-graph .workspace .windows { -active-window-background: #4e586d; -active-window-border: rgba(0, 0, 0, 0.8); -inactive-window-background: #4e586d; -inactive-window-border: rgba(0, 0, 0, 0.8); } .workspace-graph .workspace:active .windows { -active-window-background: #59647b; -active-window-border: rgba(0, 0, 0, 0.8); -inactive-window-background: #39404f; -inactive-window-border: rgba(0, 0, 0, 0.8); } .panel-launchers { padding-left: 7px; spacing: 2px; } .panel-launchers .launcher { padding-left: 2px; padding-right: 2px; padding-bottom: 2px; transition-duration: 200; } .panel-launchers .launcher:hover { background-color: rgba(186, 195, 207, 0.1); } .panel-launchers.vertical { padding-top: 2px; padding-bottom: 2px; padding-left: 0px; padding-right: 0px; spacing: 1px; } .panel-launchers.vertical .launcher { padding-top: 2px; padding-bottom: 2px; } #overview-corner { background-image: url("common-assets/misc/overview.png"); } #overview-corner:hover { background-image: url("common-assets/misc/overview-hover.png"); } .applet-separator { padding: 1px 4px; } .applet-separator-line { width: 1px; background: rgba(255, 255, 255, 0.12); } .applet-box { padding-left: 3px; padding-right: 3px; color: #d8dee9; text-shadow: none; transition-duration: 100; } .applet-box.vertical { padding: 3px 0; } .applet-box:hover { color: #d8dee9; background-color: #81a1c1; } .applet-box:highlight { background-image: none; border-image: none; background-color: rgba(184, 79, 89, 0.5); } .applet-label { font-weight: bold; color: #d8dee9; } .applet-label:hover, .applet-box:hover > .applet-label { color: #d8dee9; text-shadow: none; } .applet-icon { color: #d8dee9; icon-size: 22px; } .applet-icon:hover, .applet-box:hover > .applet-icon { color: #d8dee9; text-shadow: none; } .user-icon { width: 32px; height: 32px; background-color: transparent; border: none; border-radius: 0; } .user-label { color: #d8dee9; font-size: 1em; font-weight: bold; margin: 0px; } .desklet { color: #d8dee9; } .desklet:highlight { background-color: rgba(184, 79, 89, 0.5); } .desklet-with-borders { border: 1px solid #232831; border-radius: 5px; background-color: #434c5e; color: #d8dee9; padding: 12px; padding-bottom: 16px; } .desklet-with-borders:highlight { background-color: rgba(184, 79, 89, 0.5); } .desklet-with-borders-and-header { border: 1px solid #232831; border-top-width: 0; border-radius: 0 0 5px 5px; background-color: #434c5e; color: #d8dee9; border-radius: 0; border-radius-topleft: 0; border-radius-topright: 0; padding: 12px; padding-bottom: 17px; } .desklet-with-borders-and-header:highlight { background-color: rgba(184, 79, 89, 0.5); } .desklet-header { border: 1px solid #232831; border-radius: 5px 5px 0 0; background-color: #3d4555; color: #d8dee9; font-size: 1em; padding: 12px; padding-bottom: 6px; } .desklet-drag-placeholder { border: 2px solid #81a1c1; background-color: rgba(129, 161, 193, 0.3); } .photoframe-box { border: 1px solid #232831; border-radius: 5px; background-color: #434c5e; color: #d8dee9; padding: 12px; padding-bottom: 16px; } /*FIXME*/ .workspace-osd { /*color: red;*/ text-shadow: none; font-weight: bold; font-size: 38pt; background-color: #2e3440; border-radius: 20px; border: 1px solid #232831; box-shadow: 0px 0px 38px #232831; } .notification-applet-padding { padding: .5em 1em; } .notification-applet-container { max-height: 100px; } .tile-preview, .tile-preview.snap, .tile-hud, .tile-hud.snap { background-color: rgba(129, 161, 193, 0.3); border: 1px solid #81a1c1; } .xkcd-box { padding: 6px; border: 0px; background-color: rgba(0, 0, 0, 0); border-radius: 0px; } .appmenu-application-button-description, .dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description, .message-dialog-content .message-dialog-caption, .run-dialog-description, .prompt-dialog-error-label, .prompt-dialog-info-label, .prompt-dialog-null-label { font-weight: 400; font-size: 0.818em; } .dialog .confirm-dialog-title, .message-dialog-content .message-dialog-title { font-weight: 800; font-size: 1.364em; } .appmenu-sidebar-user-box .user-widget-label, .message-dialog-content .message-dialog-title.lightweight, .media-keys-osd, .workspace-switch-osd { font-weight: 700; font-size: 1.182em; } .dialog-list .dialog-list-title, .polkit-dialog-user-combo { font-weight: 700; font-size: 1em; } .polkit-dialog-user-combo, .audio-device-selection-dialog .audio-selection-box .audio-selection-device { border: 1px solid #434c5e; color: #d8dee9; background-color: #434c5e; } .polkit-dialog-user-combo:focus, .audio-device-selection-dialog .audio-selection-box .audio-selection-device:focus { border: 1px solid #434c5e; color: #d8dee9; background-color: #434c5e; border: 1px solid #63708b; } .polkit-dialog-user-combo:hover, .audio-device-selection-dialog .audio-selection-box .audio-selection-device:hover { border: 1px solid #434c5e; color: #d8dee9; background-color: #58647c; } .polkit-dialog-user-combo:insensitive, .audio-device-selection-dialog .audio-selection-box .audio-selection-device:insensitive { border: 1px solid #434c5e; color: rgba(216, 222, 233, 0.5); background-color: #434c5e; } .polkit-dialog-user-combo:selected, .audio-device-selection-dialog .audio-selection-box .audio-selection-device:selected, .polkit-dialog-user-combo:active, .audio-device-selection-dialog .audio-selection-box .audio-selection-device:active { border: 1px solid #434c5e; color: #d8dee9; background-color: #4e586d; } .polkit-dialog-user-combo:checked, .audio-device-selection-dialog .audio-selection-box .audio-selection-device:checked { border: 1px solid #434c5e; color: #d8dee9; background-color: #4e586d; } .dialog .dialog-button:default, .dialog .dialog-button:destructive-action, .dialog .dialog-button { font-weight: bold; padding: 12px; border-radius: 6px; border: 1px solid #3f4758; color: #d8dee9; background-color: #3f4758; } .dialog .dialog-button:focus { border: 1px solid #3f4758; color: #d8dee9; background-color: #3f4758; border: 1px solid #5f6b84; } .dialog .dialog-button:hover { border: 1px solid #3f4758; color: #d8dee9; background-color: #555f76; } .dialog .dialog-button:active { border: 1px solid #3f4758; color: #d8dee9; background-color: #4a5367; } .dialog .dialog-button:checked { border: 1px solid #3f4758; color: #d8dee9; background-color: #4a5367; } .dialog .dialog-button:insensitive { border: 1px solid #3f4758; color: rgba(216, 222, 233, 0.5); background-color: #39404f; } .dialog .dialog-button:default { border: 1px solid #81a1c1; color: #d8dee9; background-color: #81a1c1; } .dialog .dialog-button:focus:default { border: 1px solid #81a1c1; color: #d8dee9; background-color: #81a1c1; border: 1px solid #b4c7da; } .dialog .dialog-button:hover:default { border: 1px solid #81a1c1; color: #d8dee9; background-color: #a3bbd2; } .dialog .dialog-button:active:default { border: 1px solid #81a1c1; color: #d8dee9; background-color: #92aec9; } .dialog .dialog-button:checked:default { border: 1px solid #81a1c1; color: #d8dee9; background-color: #92aec9; } .dialog .dialog-button:insensitive:default { border-color: #232831; border: 1px solid #3f4758; color: rgba(216, 222, 233, 0.5); background-color: #39404f; } .dialog .dialog-button:destructive-action { border: 1px solid #b84f59; color: #d8dee9; background-color: #b84f59; } .dialog .dialog-button:focus:destructive-action { border: 1px solid #b84f59; color: #d8dee9; background-color: #b84f59; border: 1px solid #ce858c; } .dialog .dialog-button:hover:destructive-action { border: 1px solid #b84f59; color: #d8dee9; background-color: #c6737b; } .dialog .dialog-button:active:destructive-action { border: 1px solid #b84f59; color: #d8dee9; background-color: #bf616a; } .dialog .dialog-button:checked:destructive-action { border: 1px solid #b84f59; color: #d8dee9; background-color: #bf616a; } .dialog .dialog-button:insensitive:destructive-action { border-color: #232831; border: 1px solid #3f4758; color: rgba(216, 222, 233, 0.5); background-color: #39404f; } .dialog { background-color: #2e3440; border-radius: 18px; border: 1px solid #232831; padding: 18px; } .dialog .dialog-content-box { margin-top: 8px; margin-bottom: 16px; spacing: 32px; max-width: 28em; } .dialog .confirm-dialog-title { text-align: center; } .dialog-list { spacing: 18px; } .dialog-list .dialog-list-title { text-align: center; } .dialog-list .dialog-list-scrollview { max-height: 200px; } .dialog-list .dialog-list-box { spacing: 1em; } .dialog-list .dialog-list-box .dialog-list-item { spacing: 1em; } .dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-title { font-weight: bold; } .dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description { color: #c8d0e0; } .end-session-dialog { min-width: 40em; } .end-session-dialog .dialog-content-box { spacing: 0; } .end-session-dialog .dialog-list { spacing: 0; } .end-session-dialog .dialog-list .dialog-list-title { color: #c3674a; background-color: tranparentize(#c3674a, 0.9); padding: 9px; border-radius: 18px; margin: 4px 0; } .message-dialog-content { spacing: 18px; } .message-dialog-content .message-dialog-title { text-align: center; } .message-dialog-content .message-dialog-description { text-align: center; } .message-dialog-content .message-dialog-caption { text-align: center; } .run-dialog .dialog-content-box { margin: 4px; } .run-dialog-description { text-align: center; color: #97a7c4; } .run-dialog-description.error { color: #b84f59; } .run-dialog-completion-box { padding-top: 6px; padding-left: 12px; } .run-dialog-entry { width: 20em; height: 1.2em; } .prompt-dialog { width: 28em; } .prompt-dialog .dialog-content-box { spacing: 16px; margin-bottom: 12px; } .prompt-dialog-password-entry { width: 20em; } .prompt-dialog-password-layout { spacing: 8px; } .prompt-dialog-error-label, .prompt-dialog-info-label, .prompt-dialog-null-label { text-align: center; } .prompt-dialog-error-label { color: #b84f59; } .polkit-dialog-user-layout { text-align: center; spacing: 2px; } .polkit-dialog-user-combo { border-radius: 6px; padding: 6px 36px; } .polkit-dialog-user-combo:insensitive { color: #d8dee9; } .audio-device-selection-dialog { min-width: 24em; } .audio-device-selection-dialog .audio-selection-box { spacing: 12px; } .audio-device-selection-dialog .audio-selection-box .audio-selection-device { border-radius: 18px; } .audio-device-selection-dialog .audio-selection-box .audio-selection-device .audio-selection-device-box { padding: 12px; spacing: 12px; } .audio-device-selection-dialog .audio-selection-box .audio-selection-device .audio-selection-device-icon { icon-size: 64px; } .media-keys-osd, .info-osd, .workspace-switch-osd { background-color: #2e3440; border: 1px solid #232831; border-radius: 18px; text-align: center; padding: 24px; } .media-keys-osd { margin-bottom: 1em; border-radius: 18px; font-weight: bold; spacing: 12px; padding: 12px 24px; } .media-keys-osd > * { spacing: 12px; } .media-keys-osd StIcon { icon-size: 32px; } .media-keys-osd StLabel:ltr { margin-right: 6px; } .media-keys-osd StLabel:rtl { margin-left: 6px; } .media-keys-osd .level { min-width: 160px; -barlevel-height: 6px; -barlevel-background-color: #4c556a; -barlevel-active-background-color: #81a1c1; -barlevel-amplify-color: #c3674a; -barlevel-amplify-separator-width: 3px; } .media-keys-osd .level:ltr { margin-right: 6px; } .media-keys-osd .level:rtl { margin-left: 6px; } .media-keys-osd .level-bar { border-radius: 18px; background-color: #d8dee9; } .info-osd { font-size: 1.2em; font-weight: 700; text-align: center; } .workspace-switch-osd { min-width: 140px; margin-bottom: 1em; border-radius: 18px; font-weight: bold; padding: 12px 36px 0 36px; } .workspace-switch-osd-indicator-box { spacing: 12px; } .workspace-switch-osd-indicator { background-color: rgba(216, 222, 233, 0.5); padding: 3px; margin: 15px; border-radius: 36px; } .workspace-switch-osd-indicator:active { background-color: #81a1c1; padding: 6px; margin: 12px; } .monitor-label { border-radius: 0; color: black; padding: 12px; text-align: center; } .resize-popup { color: #d8dee9; background-color: #434c5e; border-radius: 6px; padding: 12px; } /*# sourceMappingURL=cinnamon.css.map */ ================================================ FILE: cinnamon/cinnamon.scss ================================================ $variant: 'dark'; $transparency: 'true'; $darker: 'false'; $accent: 'blue'; @import "../gtk-3.0/_nord"; @import "_colors"; //use gtk colors @import "_drawing"; @import "_common"; @import "_dialogs"; ================================================ FILE: gnome-shell/_colors.scss ================================================ $base_color:#2e3440; $bg_color: #2e3440; $main_dark: darken($bg_color, 5%); $gray: lighten(#2e3440, 15%); $fg_color: #d8dee9; $dracula: darken(#2e3440, 8%); $topbar_color: #d8dee9; $lime: #a3be8c; $red: #bf616a; $purple: #b48ead; $cyan: #88c0d0; $selected_fg_color: #fefefe; $selected_bg_color:#81a1c1; $selected_borders_color: darken($selected_bg_color, 10%); $borders_color: darken(#2e3440, 7%); $borders_edge: transparentize(white, 0.9); $link_color: $cyan; $link_visited_color: transparentize($link_color,0.5); $top_hilight: $borders_edge; $top_highlight: transparentize(white, 0.9); $bottom_highlight: transparentize(black, 0.9); $warning_color: darken(#d08770,10%); $error_color: darken( $red,5%); $success_color: darken($cyan,10%); $destructive_color: darken( #c72240,10%); $osd_fg_color: $fg_color; $osd_bg_color: transparentize($bg_color, 0.05); $osd_borders_color: transparentize(black, 0.3); $osd_outer_borders_color: transparentize(white, 0.9); $tooltip_borders_color: $osd_outer_borders_color; //insensitive state derived colors $insensitive_fg_color: mix($fg_color, $bg_color, 50%); $insensitive_bg_color: mix($bg_color, $base_color, 60%); $insensitive_borders_color: $borders_color; //colors for the backdrop state, derived from the main colors. $backdrop_base_color: lighten($base_color,1%); $backdrop_bg_color: $bg_color; $backdrop_fg_color: transparentize($fg_color, 0.2); $backdrop_insensitive_color: lighten($backdrop_bg_color, 15%); $backdrop_borders_color: mix($borders_color, $bg_color, 90%); $backdrop_dark_fill: mix($backdrop_borders_color,$backdrop_bg_color, 35%); ================================================ FILE: gnome-shell/_common.scss ================================================ $corner-radius: 2px; /* GLOBALS */ $font-size: 11; $_bubble_bg_color: $osd_bg_color; $_bubble_fg_color: $fg_color; $_bubble_borders_color: $fg_color; $_bubble_transparent: transparentize($osd_bg_color, 0.17); $topbar_bg_color: transparentize($dracula,0); stage { @include fontsize($font-size); color: $fg_color; } /* WIDGETS */ /* Buttons */ .button, .icon-button, %button { @include button(normal); &:focus { @include button(focus); } &:insensitive { @include button(insensitive); } &:active, &:checked { @include button(active); } &:hover { @include button(hover); } } .button { border-radius: 6px; padding: 4px 32px; } .modal-dialog-linked-button { padding: 10px; border: 1px solid $borders_color; color: $fg_color; background: $main_dark; text-shadow: none; icon-shadow: none; box-shadow: none; &:insensitive { @include button(insensitive); } &:active { @include button(active); } &:focus { @include button(focus); &:hover { @include button(focus); } } &:hover { @include button(hover); } &:first-child { border-radius: 0px 0px 0px 10px; } &:last-child { border-radius: 0px 0px 10px 0px; } &:first-child:last-child { border-radius: 0px 0px 10px 10px; } } /* Entries */ StEntry { @include entry(normal); border-radius: 6px; padding: 4px; border-width: 2px; color: $fg_color; &:hover { @include entry(hover);} &:focus { @include entry(focus,$fc:transparentize($fg_color,0.5));} &:insensitive { @include entry(insensitive);} selection-background-color: $selected_bg_color; selected-color: $selected_fg_color; StIcon.capslock-warning { icon-size: 16px; warning-color: $warning_color; padding: 0 4px; } StLabel.hint-text { color: transparentize($fg_color, 0.3); } } /* Scrollbars */ StScrollView { &.vfade { -st-vfade-offset: 68px; } &.hfade { -st-hfade-offset: 68px; } } StScrollBar { padding: 0; StScrollView & { min-width: 14px; min-height: 14px; } StBin#trough { border-radius: 0; background-color: transparent; } StButton#vhandle, StButton#hhandle { border-radius: 8px; background-color: mix($fg_color, $bg_color, 20%); //border: 3px solid transparent; //would be nice to margin or at least to transparent margin: 3px; &:hover { background-color: mix($fg_color, $bg_color, 80%); } &:active { background-color: $selected_bg_color; } } } /* Slider */ $slider_size: 19px; .slider { color: $fg_color; height: 20px; border-radius: 16px; // slider trough -barlevel-height: 19px; -barlevel-background-color: lighten($base_color, 8%); //background of the trough -barlevel-border-width: 2px; -barlevel-border-color: transparent; // trough border color // fill style -barlevel-active-background-color: transparentize($selected_bg_color, 0.1); -barlevel-active-border-color: transparent; // overfill style (red in this case) -barlevel-overdrive-color: $destructive_color; -barlevel-overdrive-border-color: transparent; //trough border when red; -barlevel-overdrive-separator-width: 0px; // slider handler -slider-handle-radius: $slider_size * 0.5; // half the size of the size -slider-handle-border-width: 0; -slider-handle-border-color: transparent; // because 0 width } /* Check Boxes */ .check-box { StBoxLayout { spacing: .8em; } StBin { width: 24px; height: 22px; background-image: url("assets/checkbox-off.svg"); } &:focus, &:hover StBin { background-image: url("assets/checkbox-off-focused.svg"); } &:checked StBin { background-image: url("assets/checkbox.svg"); } &:focus:checked StBin { background-image: url("assets/checkbox-focused.svg"); } } /* Switches */ .toggle-switch { width: 65px; height: 22px; background-color: transparent !important; background-size: contain; //Gnome 3.32// background-image: url("assets/toggle-off.svg"); &:checked { background-image: url("assets/toggle-on.svg"); } .handle { background: none !important; box-shadow: none !important; } } @each $v in us, intl { .toggle-switch-#{$v} { background-image: url("assets/toggle-off.svg"); &:checked { background-image: url("assets/toggle-on.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 { border: 1px solid $borders_color; border-radius: 10px; color: $osd_fg_color; background-color: darken($osd_bg_color,5%); box-shadow: $depth6; padding: 0 !important; .modal-dialog-content-box { margin: 20px 40px; spacing: 32px; max-width: 28em; } .modal-dialog-button-box { padding: 6px; .modal-dialog-button { @extend %button; border-radius: 10px; } } .run-dialog-entry { width: 20em; margin-bottom: 6px; } .run-dialog-error-box { color: $error_color; padding-top: 16px; spacing: 6px; } .run-dialog-button-box { padding-top: 1em; } .run-dialog-label { @include fontsize($font-size + 1.1); font-weight: bold; color: darken($osd_fg_color,10%); padding-bottom: .4em; } .run-dialog-description { color: $fg_color; } } .mount-dialog-subject, .end-session-dialog-subject { //this should be a generic header class @include fontsize($font-size * 1.3); } /* Message Dialog */ .message-dialog-main-layout { padding: 12px 20px 0; spacing: 12px; } .message-dialog-content { max-width: 28em; spacing: 20px; } .message-dialog-icon { min-width: 48px; icon-size: 48px; } .message-dialog-title { font-weight: bold; } .message-dialog-subtitle { color: darken($fg_color,40%); font-weight: bold; } /* End Session Dialog */ .end-session-dialog { border: none; & .modal-dialog-linked-button:last-child, & .modal-dialog-button:last-child { background: $error_color; &:hover, &:focus { background: lighten($error_color, 3%); color: #fff; } } } .end-session-dialog-list { padding-top: 20px; } .end-session-dialog-layout { padding-left: 17px; &:rtl { padding-right: 17px; } } .end-session-dialog-description { width: 28em; padding-bottom: 10px; &:rtl { text-align: right; } } .end-session-dialog-warning { width: 28em; color: $warning_color; padding-top: 6px; &:rtl { text-align: right; } } .end-session-dialog-logout-icon { //border: 2px solid #8b8b8b; border-radius: 3px; width: 48px; height: 48px; background-size: contain; } .end-session-dialog-shutdown-icon { color: $error_color; width: 48px; height: 48px; } .end-session-dialog-inhibitor-layout { spacing: 16px; max-height: 200px; padding-right: 65px; padding-left: 65px; } .end-session-dialog-session-list, .end-session-dialog-app-list { spacing: 1em; } .end-session-dialog-list-header { font-weight: bold; &:rtl { text-align: right; } } .end-session-dialog-app-list-item, .end-session-dialog-session-list-item { spacing: 1em; } .end-session-dialog-app-list-item-name, .end-session-dialog-session-list-item-name { font-weight: bold; } .end-session-dialog-app-list-item-description { color: darken($fg_color,5%); font-size: 10pt; } /* 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; } .message-dialog-title:rtl { padding-left: 0px; padding-right: 17px; } .message-dialog-body { padding-left: 17px; width: 28em; } .message-dialog-body:rtl { padding-left: 0px; padding-right: 17px; } } .mount-dialog-app-list { max-height: 200px; padding-top: 24px; padding-left: 49px; padding-right: 32px; } .mount-dialog-app-list: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 { font-size: 10pt; } /* Password or Authentication Dialog */ .prompt-dialog { //this is the width of the entire modal popup width: 28em; border: none; border-radius: 10px; .message-dialog-main-layout { spacing: 24px; padding: 10px; } .message-dialog-content { spacing: 16px; } .message-dialog-title { color: darken($osd_fg_color,25%); } } .prompt-dialog-description:rtl { text-align: right; } .prompt-dialog-password-box { spacing: 1em; padding-bottom: 1em; } .prompt-dialog-error-label { font-size: 10pt; color: $error_color; padding-bottom: 8px; } .prompt-dialog-info-label { font-size: 10pt; padding-bottom: 8px; } .hidden { color: rgba(0,0,0,0); } .prompt-dialog-null-label { font-size: 10pt; padding-bottom: 8px; } /* Polkit Dialog */ .polkit-dialog-user-layout { padding-left: 10px; spacing: 10px; &:rtl { padding-left: 0px; padding-right: 10px; } } .polkit-dialog-user-root-label { color: $warning_color; } .polkit-dialog-user-icon { border-radius: 3px; background-size: contain; width: 48px; height: 48px; } /* Audio selection dialog */ .audio-device-selection-dialog { spacing: 30px; } .audio-selection-content { spacing: 20px; padding: 24px; } .audio-selection-title { font-weight: bold; text-align: center; } .audio-selection-box { spacing: 20px; } .audio-selection-device { border: 1px solid $_bubble_borders_color; border-radius: 12px; &:active,&:hover,&:focus { background-color: $selected_bg_color; } } .audio-selection-device-box { padding: 20px; spacing: 20px; } .audio-selection-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: darken($osd_fg_color,25%); } } /* 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; } /* Popovers/Menus */ .popup-menu { min-width: 15em; background-color: transparent; color: $fg_color; //.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is &.panel-menu { -boxpointer-gap: 4px; margin-bottom: 1.75em; } } .popup-menu-arrow { } //defined globally in the TOP BAR .popup-sub-menu { background-color: lighten($bg_color, 4%); box-shadow: $depth6; border: none; border-radius: 0px 0px 6px 6px; .popup-menu-item { border-radius: 0; margin: 0; background-color: lighten($bg_color, 4%) !important; &:last-child { border-radius: 0 0 6px 6px; } &:active, &.selected, &:hover, &:focus { background-color: lighten($bg_color, 9%) !important; color: $fg_color; } } } .popup-menu-content { padding: 6px; background: darken($bg_color, 2%); border-radius: 12px; border: 1px solid $borders_color; } .popup-menu-item { spacing: 6px; border-radius: 6px; background-gradient-direction: none; color: $fg_color !important; &:ltr {padding-left: 6px;} &:rtl {padding-right: 6px;} &:active, &.selected, &:hover, &:focus { background-color: lighten($bg_color, 6%) !important; color: $fg_color !important; } &:checked { background-color: transparentize($selected_bg_color, 0.5) !important; font-weight: bold; color: $selected_fg_color !important; border-radius: 6px 6px 0px 0px; box-shadow: none; } &:insensitive { color: transparentize($fg_color,.5); } } .popup-inactive-menu-item { //all icons and other graphical elements color: $fg_color; &:insensitive { color: transparentize($fg_color,0.5); } } // symbolic icons in popover .popup-menu-arrow, .popup-menu-icon { icon-size: 16px !important; // for some reason the variable doesn't work here } .popup-menu-ornament { text-align: right; width: 1.2em; } // separator .popup-separator-menu-item { margin: 6px 0; padding:0 !important; &:ltr { margin-right: 6px;} &:rtl { margin-left: 6px;} .popup-separator-menu-item-separator { height: 1px; //not really the whole box background-color: $gray; } .popup-menu-ornament { width: 0 !important; } // separators in submenus .popup-sub-menu & { background-color: transparent; // account for ornament &:ltr { margin-right: 2.5em;} &:rtl { margin-left: 2.5em;} .popup-separator-menu-item-separator { background-color: lighten($gray, 7%); } } } // 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; .osd-monitor-label { font-size: 3em; } .level { height: 0.4em; border-radius: 0.3em; color: $osd_fg_color; -barlevel-height: 0.4em; -barlevel-background-color: $gray; -barlevel-active-background-color: $selected_bg_color; -barlevel-overdrive-color: $red; -barlevel-overdrive-separator-width: 0.2em; } .level-bar { background-color: $selected_bg_color; border-radius: 0.3em; } } /* Pad OSD */ .pad-osd-window { padding: 32px; background-color: transparentize(black, 0.2); .pad-osd-title-box { spacing: 12px; } .pad-osd-title-menu-box { spacing: 6px; } } .combo-box-label { width: 15em; } /* App Switcher */ .switcher-popup { padding: 8px; spacing: 16px; } .osd-window, .resize-popup, .switcher-list { @extend %osd-panel; } .switcher-list-item-container { spacing: 8px; } .switcher-list .item-box { padding: 8px; border-radius: 16px; background-color: transparent; } .switcher-list .item-box:outlined { padding: 6px; border: 2px solid darken($borders_color,10%); } .switcher-list .item-box:selected { background-color: $selected_bg_color; color: $selected_fg_color; } .switcher-list .thumbnail-box { padding: 2px; spacing: 4px; } .switcher-list .thumbnail { width: 256px; } .switcher-list .separator { width: 1px; background: $borders_color; } .switcher-arrow { border-color: rgba(0,0,0,0); color: transparentize($fg_color,0.2); &:highlighted { color: $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-group { padding: 12px; } .workspace-switcher-container { @extend %osd-panel; } .workspace-switcher { background: transparent; border: 0px; border-radius: 0px; padding: 0px; spacing: 8px; } .ws-switcher-active-up, .ws-switcher-active-down, .ws-switcher-active-left, .ws-switcher-active-right { height: 50px; background-color: $selected_bg_color; color: $selected_fg_color; background-size: 32px; border-radius: 8px; border-color: $selected_bg_color; } .ws-switcher-active-up { background-image: url("assets/ws-switch-arrow-up.png"); } .ws-switcher-active-down { background-image: url("assets/ws-switch-arrow-down.png"); } .ws-switcher-box { height: 50px; border: 1px solid transparentize($osd_fg_color,0.9); background: darken($_bubble_bg_color, 10%); border-radius: 8px; } %osd-panel { color: $_bubble_fg_color; background-color: $_bubble_bg_color; border: 1px solid $borders_color; box-shadow: 0px 0px 5px $borders_color; border-radius: 18px; padding: 12px; } /* Tiled window previews */ .tile-preview { background-color: transparentize($selected_bg_color,0.5); border: 1px solid $selected_bg_color; } .tile-preview-left.on-primary { border-radius: $corner-radius $corner-radius 0 0; } .tile-preview-right.on-primary { border-radius: 0 $corner-radius 0 0; } .tile-preview-left.tile-preview-right.on-primary { border-radius: $corner-radius $corner-radius 0 0; } /* TOP BAR */ #panel { background-gradient-direction: none; background-color: $topbar_bg_color; /* transition from solid to transparent */ transition-duration: 500ms; font-weight: bold; height: 2.1em; padding: 0px 0px; &.unlock-screen, &.login-screen, &.lock-screen { background-color: transparent; } #panelLeft, #panelCenter { // spacing between activities<>app menu and such spacing: 4px; } .panel-corner { -panel-corner-radius: 0px; -panel-corner-background-color: rgba(0, 0, 0, 0.2); -panel-corner-border-width: 2px; -panel-corner-border-color: transparent; &:active, &:overview, &:focus { -panel-corner-border-color: lighten($selected_bg_color,5%); } &.lock-screen, &.login-screen, &.unlock-screen { -panel-corner-radius: 0; -panel-corner-background-color: transparent; -panel-corner-border-color: transparent; } } .panel-button { -natural-hpadding: 12px; -minimum-hpadding: 6px; font-weight: bold; color: $topbar_color; transition-duration: 100ms; .app-menu-icon { -st-icon-style: symbolic; margin-left: 4px; margin-right: 4px; //dimensions of the icon are hardcoded } &:hover { box-shadow: inset 0 0 0 100px lighten($topbar_bg_color, 10%); color: lighten($topbar_color, 10%); &.clock-display { box-shadow: none; .clock { box-shadow: inset 0 0 0 100px lighten($topbar_bg_color, 10%); } } } &:active, &:overview, &:focus, &:checked { // Trick due to St limitations. It needs a background to draw // a box-shadow box-shadow: inset 0 0 0 100px $selected_bg_color; color: #fff; &.clock-display { box-shadow: none; .clock { box-shadow: inset 0 0 0 100px $selected_bg_color; } } } .system-status-icon { icon-size: 1.09em; padding: 0 5px; } .unlock-screen &, .login-screen &, .lock-screen & { color: lighten($fg_color, 10%); &:focus, &:hover, &:active { color: lighten($fg_color, 10%); } } } .panel-status-indicators-box, .panel-status-menu-box { spacing: 2px; } // spacing between power icon and (optional) percentage label .power-status.panel-status-indicators-box { spacing: 0; } .screencast-indicator { color: $warning_color; } &.solid { background-color: $dracula; /* transition from transparent to solid */ transition-duration: 300ms; .panel-corner { -panel-corner-background-color: black; } .system-status-icon, .app-menu-icon > StIcon, .popup-menu-arrow { icon-shadow: none; } } } // calendar popover .calendar { background: transparent; border: none; box-shadow: none; } .world-clocks-button, .weather-button, .events-button { background: $bg_color; border-radius: 7px; padding: 12px; color: $fg_color; } .datemenu-calendar-column { border: 0 solid transparent; } .datemenu-today-button, .events-section-title, .message-list-section-title { border-radius: 4px; color: $fg_color; padding: .4em; } .datemenu-today-button, .world-clocks-button, .weather-button, .events-section-title, .message-list-section-title, .events-button { &:hover,&:focus { background-color: lighten($bg_color,5%); } &:active { color: lighten($selected_fg_color,5%); background-color: $selected_bg_color; } } .datemenu-today-button .day-label { } .datemenu-today-button .date-label { font-size: 1.5em; } .world-clocks-header, .weather-header, .events-section-title, .message-list-section-title, .events-title { color: $fg_color; font-weight: bold; } .events-button .event-time { color: lighten($fg_color, 4%); } .world-clocks-grid { spacing-rows: 0.4em; } .weather-box { spacing: 0.4em; } .calendar-month-label { background-color: transparent; color: darken($fg_color,5%); font-weight: bold; padding: 8px 0; &:focus {} } .pager-button { color: white; background-color: transparent; width: 32px; border-radius: 4px; &:hover, &:focus { background-color: transparentize($fg_color,0.95); } &:active { background-color: transparentize($bg_color,0.95); } } .calendar-change-month-back { //arrow back background-image: url("assets/calendar-arrow-left.svg"); &:rtl { background-image: url("assets/calendar-arrow-right.svg"); } } .calendar-change-month-forward { //arrow foreward background-image: url("assets/calendar-arrow-right.svg"); &:rtl { background-image: url("assets/calendar-arrow-left.svg"); } } .calendar-change-month-back StIcon, .calendar-change-month-forward StIcon { color:darken($fg_color, 7%); } .calendar-day-base, .calendar-day { font-size: 80%; text-align: center; width: 2.4em; height: 2.4em; padding: 0.1em; margin: 2px; border-radius: 99px; color: $fg_color; background-gradient-direction: none; background-color: transparent; &:hover, &:focus { background-color: lighten($bg_color, 7%); box-shadow: none; } &:active,&:selected { color: lighten($selected_fg_color,5%); background-color: $selected_bg_color; border-color: transparent; //avoid jumparound due to today box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4) !important; } } .calendar-day-heading { //day of week heading background-color: transparent; color: $fg_color; margin-top: 1em; font-size: 70%; } .calendar-day { //border collapse hack - see calendar.js border-width: 0; } .calendar-day-top { border-top-width: 1px; } .calendar-day-left { border-left-width: 1px; } .calendar-work-day { } .calendar-nonwork-day { color: $insensitive_fg_color; } .calendar-today { font-weight: bold; border: 1px solid $selected_bg_color; background-color: transparent; color: $selected_fg_color; &:hover,&:focus { background-color:lighten($selected_bg_color, 3%); color: $selected_fg_color; } &:active,&:selected { background-color: $selected_bg_color; color: $selected_fg_color; &:hover,&:focus { background-color:lighten($selected_bg_color, 3%); color: $selected_fg_color; } } } .calendar-day-with-events { color: lighten($fg_color,10%); font-weight: bold; background-image: url("assets/calendar-today.svg"); } .calendar-other-month-day { color: $insensitive_fg_color; opacity: 0.5; } .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 { border-color: lighten($base_color, 4%); } .message-title, .message-content, .message-body { color: darken($fg_color, 5%); } .message-list-sections { spacing: 1em; } .message-list-section, .message-list-section-list { spacing: 0.4em; } .message-list-section-close{ & > StIcon { icon-size: 16px; border-radius: 16px; padding: 8px; color: $fg_color; background-color: transparent; } &:hover > StIcon, &:focus > StIcon &:active > StIcon{ color: $red; background: transparent; } } .message { &:hover,&:focus { background-color: lighten($bg_color, 4%); box-shadow: 2px 0px 0px 0px $selected_bg_color inset; border-radius: 1px 7px 7px 1px; } border-radius: 7px; background: lighten($bg_color, 2%); box-shadow: none; } .message-secondary-bin > .event-time { color: darken($fg_color, 15%); font-size: 0.7em; /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */ padding-bottom: 0.13em; } .message-secondary-bin > StIcon { icon-size: 16px; } .message-title { //color: darken($fg_color,5%); } .message-content { // color: darken($fg_color,20%); padding: 10px; } // close button .message-close-button { color: $fg_color; background-color: transparentize($fg_color, 0.9); border-radius: 99px; &:hover { background-color: transparentize($red, 0.1); > StIcon { color: $selected_fg_color; } } &:active { background-color: transparentize($red, 0.5); > StIcon { color: $selected_fg_color; } } } /* Media Controls */ .message-media-control { color: $fg_color; // colors are lightened since the media controls are in a card &:hover { background-color: lighten($base_color, 8%); color: $selected_fg_color; } &:active { background-color: lighten($base_color, 12%); color: $selected_fg_color; } &:insensitive { color: lighten($insensitive_fg_color, 5%); } } .media-message-cover-icon { icon-size: 48px !important; &.fallback { color: lighten($bg_color,10%); background-color: $bg_color; border: 2px solid $bg_color; border-radius: 2px; icon-size: 16px; padding: 8px; } } /* World clocks */ .world-clocks-button { // city label .world-clocks-city { color: $fg_color; font-weight: normal; } // timezone time .world-clocks-time { font-weight: bold; color: $fg_color; font-feature-settings: "lnum"; text-align: right; } // timezone offset label .world-clocks-timezone { color: darken($fg_color,20%); font-feature-settings: "tnum"; } } /* Weather */ .weather-button { .weather-header { color: darken($fg_color, 10%); font-weight: bold; &.location { font-weight: normal; } } .weather-forecast-time { color: darken($fg_color, 10%); font-feature-settings: "tnum"; font-weight: normal; padding-top: 0.2em; padding-bottom: 0.4em; } .weather-forecast-temp { font-weight: bold; } } // a little unstructured mess: .system-switch-user-submenu-icon.user-icon { icon-size: 20px; padding: 0 2px; } .system-switch-user-submenu-icon.default-icon { icon-size: 16px; padding: 0 4px; } #appMenu { spinner-image: url("assets/process-working.svg"); spacing: 4px; .label-shadow { color: transparent; } } .aggregate-menu { min-width: 21em; .popup-menu-icon { padding: 0 4px; } } .system-menu-action { color: $fg_color; border-radius: 32px; /* wish we could do 50% */ border: 1px solid $borders_color; background: darken($bg_color, 3%); padding: 13px; &:hover, &:focus { border: 1px solid $selected_bg_color; color: $selected_bg_color; background: transparent; } &:active { background-color: darken($selected_bg_color, 10%); color: $selected_fg_color;} & > StIcon { icon-size: 16px; } } //Activities Ripples .ripple-box { width: 52px; height: 52px; background-image: url("assets/corner-ripple-ltr.png"); background-size: contain; } .ripple-box:rtl { background-image: url("assets/corner-ripple-rtl.png"); } // not really top bar only .popup-menu-arrow { width: 16px; height: 16px; } .popup-menu-icon { icon-size: 1.09em; } //close buttons .window-close { background-color: $red; color: $topbar_color; border-radius: 30px * 0.5 + 3px * 2; padding: 2px; height: 30px; width: 30px; border: 2px solid darken($red, 4%); transition-duration: 300ms; & StIcon { icon-size: 23px; } &:hover { background-color: lighten($red, 3%); } &:active { background-color: darken($red, 5%); } } .window-close { -shell-close-overlap: 16px; &:rtl { -st-background-image-shadow: 2px 2px 6px rgba(0,0,0,0.5); } } /* NETWORK DIALOGS */ .nm-dialog { max-height: 34em; min-height: 31em; min-width: 32em; } .nm-dialog-content { spacing: 20px; padding: 24px; } .nm-dialog-header-hbox { spacing: 10px; } .nm-dialog-airplane-box { spacing: 12px; } .nm-dialog-airplane-headline { font-weight: bold; text-align: center; } .nm-dialog-airplane-text { color: $fg_color; } .nm-dialog-header-icon { icon-size: 32px; } .nm-dialog-scroll-view { border: 2px solid $borders_color; background: $bg_color; } .nm-dialog-header { font-weight: bold; } .nm-dialog-item { font-size: 110%; border-bottom: 1px solid $borders_color; padding: 12px; spacing: 20px; } .nm-dialog-item:selected { background-color: $selected_bg_color; color: $selected_fg_color; } .nm-dialog-icons { spacing: .5em; } .nm-dialog-icon { icon-size: 16px; } .no-networks-label { color: #999999; } .no-networks-box { spacing: 12px; } /* OVERVIEW */ #overview,.controls-manager, .secondary-monitor-workspaces { spacing: 24px; // } #overviewGroup { background-color: $bg_color; } .overview-controls { padding-bottom: 32px; } .window-picker { //container around window thumbnails -horizontal-spacing: 16px; -vertical-spacing: 16px; &.external-monitor { padding: 16px; } } .window-clone-border { border: 4px solid transparentize($selected_bg_color, .7); border-radius: 0px; // For window decorations with round corners we can't match // the exact shape when the window is scaled. So apply a shadow // to fix that case box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); } .window-caption { spacing: 20px; color: $fg_color; background-color: $topbar_bg_color; border-radius: 7px; padding: 4px 8px; } //search entry .search-entry { width: 320px; padding: 9px; border-radius: 10px; border-color: transparent; .search-entry-icon { icon-size: 1em; padding: 0 4px; color: transparentize($fg_color,.3); } } //search results %search-section-content-item { background-color: transparent; &:focus, &:hover, &:selected { background-color: transparentize($osd_fg_color, .9); transition-duration: 200ms; } &:focus { box-shadow: 0px 0px 2px 2px $selected_bg_color inset !important; } &:active, &:checked { background-color: transparentize(darken($osd_bg_color, 10%), .1); } } #searchResultsBin { max-width: 1000px; } #searchResultsContent { padding-left: 20px; padding-right: 20px; spacing: 16px; } .search-section { spacing: 16px; } // This should be equal to #searchResultsContent spacing .search-section-content { background-color: transparent; border-radius: 0; border: none; box-shadow: none; // This is the space between the provider icon and the results container spacing: 32px; } .search-statustext { // "no results" @extend %status_text; } .list-search-results { spacing: 3px; } .search-section-separator { height: 2px; background-color: $gray; } .list-search-result-content { spacing: 30px; } .list-search-result-title { color: lighten($topbar_color,5%); spacing: 12px; } .list-search-result-description { color: transparentize(lighten($topbar_color,15%), 0.5); } .list-search-provider-details { width: 150px; color: lighten($topbar_color,5%); margin-top: 0.24em; } .list-search-provider-content { spacing: 20px; } .search-provider-icon { padding: 15px; } //Icon tile .search-provider-icon, .list-search-result { @extend %search-section-content-item; } /* DASHBOARD */ .dash-background { background-color: $main_dark; } .dash-separator { width: 1px; background-color: $gray; } .dash-label { //osd tooltip border-radius: 7px; padding: 4px 12px; color: $topbar_color; background-color: $topbar_bg_color; text-align: center; -x-offset: 8px; } /* 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; } .system-action-icon { background-color: black; color: white; border-radius: 99px; icon-size: 48px; } .app-view-controls { //favorties | all toggle container padding-bottom: 32px; } .app-view-control { //favorties | all toggle button padding: 4px 32px; &:checked { @include button(active); } &:first-child { border-right-width: 0; border-radius: 3px 0 0 3px; } &:last-child { border-radius: 0 3px 3px 0; } } .app-well-app, .app-well-app.app-folder, .show-apps, .grid-search-result, .overview-tile { background-color: transparent; border: none; @extend %icon_tile; &:hover, &:focus, &:selected { background-color: lighten($bg_color, 7%); transition-duration: 0ms; border-image: none; background-image: none; } &:focus { box-shadow: 0px 0px 2px 2px $selected_bg_color inset !important; } &:active, &:checked { background-color: lighten($bg_color, 7%); box-shadow: inset $depth2; color: $fg_color; } } // items on the dash .dash-item-container { .show-apps, .overview-tile { &, .overview-icon { @extend %icon_tile; } &:hover .overview-icon, &:focus .overview-icon, &:selected .overview-icon, &:active .overview-icon, &:checked .overview-icon{ background-color: lighten($bg_color, 7%); } } } .app-well-app-running-dot, .app-grid-running-dot { //running apps indicator width: 5px; height: 5px; background-color: $selected_bg_color; border-radius: 5px !important; box-shadow: 0px 0px 5px 4px transparentize($selected_bg_color,0.2); } %icon_tile { background-color: transparent; color: $selected_fg_color; border: none; transition-duration: 100ms; text-align: center; box-shadow: none; border-radius: 18px; } /* App Folders */ .app-well-app.app-folder, .app-folder { background-color: lighten($bg_color, 5%); border-radius: 18px; } // expanded folder .app-folder-dialog { //style like the dash background-color: darken($osd_bg_color,5%); border: none; box-shadow: none; border-radius: 30px; .edit-folder-button { @extend %button; padding: 0; width: 36px; height: 36px; border-radius: 18px; & > StIcon { icon-size: 16px } } } .app-well-app.app-folder > .overview-icon { background-color: transparentize($osd_bg_color,.6); } .show-apps .show-apps-icon { color: $topbar_color; } .show-apps:checked .show-apps-icon, .show-apps:focus .show-apps-icon { color: $fg_color; transition-duration: 100ms; } // Collections .app-folder-popup { //expanded collection -arrow-border-radius: 8px; -arrow-background-color: transparentize($bg_color,0.5); -arrow-base: 24px; -arrow-rise: 11px; } .app-folder-popup-bin { padding: 5px; background: transparentize($bg_color,.5);;} .app-folder-icon { padding: 5px; spacing-rows: 5px; spacing-columns: 5px; } .page-indicator { padding: 6px 12px; .page-indicator-icon { width: 12px; height: 12px; border-radius: 12px; background-image: none; background-color: lighten($base_color, 30%); } &:hover .page-indicator-icon { background-image: none; background-color: rgba(255, 255, 255, 0.5); } &:active .page-indicator-icon { background-image: none; background-color: rgba(255, 255, 255, 0.7); } &:checked .page-indicator-icon{ background-image: none; background-color: #FFFFFF; transition-duration: 0s; } } .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 { //container ala dash @extend %overview-panel; visible-width: 32px; //amount visible before hover spacing: 11px; padding: 8px; border-radius: 0; //border-width: 1px 0 1px 1px; //fixme: can't have non unoform borders :( &:rtl { border-radius: 0;} } .workspace-thumbnail-indicator { border: 4px solid transparentize($selected_bg_color, .2); box-shadow: $depth; padding: 0; } //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; } .page-navigation-arrow { background-color: transparent; margin: 6px; padding: 18px; width: 24px; height: 24px; border-radius: 99px; &:insensitive { @include button(undecorated, $osd_fg_color, transparentize($osd_bg_color, 0.5));} &:hover { background-color: transparentize($selected_bg_color, 0.5);} &:active {background-color: $selected_bg_color;} } %overview-panel { color: $_bubble_fg_color; background-color: transparent; border: none; } %status_text { font-size: 2em; font-weight: bold; color: $fg_color; } /* NOTIFICATIONS & MESSAGE TRAY */ .url-highlighter { link-color: lighten($selected_bg_color,10%); } // Banners .notification-banner { font-size: 11pt; width: 34em; margin: 5px; border-radius: 12px; color: $topbar_color; background-color: darken($bg_color, 2%); border: 1px solid $borders_color; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3); &:hover, &:focus { background-color: $bg_color; border-radius: 12px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); } *{ color: $topbar_color; } .notification-icon { padding: 5px; } .notification-content { padding: 5px; spacing: 5px; } .secondary-icon { icon-size: 1.09em; } .notification-actions { background-color: darken($bg_color, 2%); padding-top: 2px; spacing: 1px; border-radius: 0px 0px 12px 12px; } .notification-button { padding: 7px; @extend %button; border-color: transparent; &:first-child { border-radius: 0 0 0 12px; } &:last-child { border-radius: 0 0 12px 0; } &:hover, &:focus { border-color: transparent !important;} } } .notification-buttons-bin .notification-button { border-radius: 10px !important; } .summary-source-counter { font-size: 10pt; font-weight: bold; height: 1.6em; width: 1.6em; -shell-counter-overlap-x: 3px; -shell-counter-overlap-y: 3px; background-color: $selected_bg_color; color: $selected_fg_color; border: 2px solid $osd_fg_color; box-shadow: 0 2px 2px rgba(0,0,0,0.5); border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%; } .secondary-icon { icon-size: 1.09em; } //chat bubbles .chat-body { spacing: 5px; } .chat-response { margin: 5px; } .chat-log-message { color: darken($fg_color,10%); } .chat-new-group { padding-top: 1em; } .chat-received { padding-left: 4px; &:rtl { padding-left: 0px; padding-right: 4px; } } .chat-sent { padding-left: 18pt; color: darken($fg_color, 15%); &:rtl { padding-left: 0; padding-right: 18pt; } } .chat-meta-message { padding-left: 4px; font-size: 9pt; font-weight: bold; color: darken($fg_color,20%); &:rtl { padding-left: 0; padding-right: 4px; } } //hotplug .hotplug-transient-box { spacing: 6px; padding: 2px 72px 2px 12px; } .hotplug-notification-item { padding: 2px 10px; &:focus { padding: 1px 71px 1px 11px; } } .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 */ //magnifier .magnifier-zoom-region { border: 2px solid $selected_bg_color; &.full-screen { border-width: 0; } } //Keyboard /* On-screen Keyboard */ #keyboard { background-color: transparentize($osd_bg_color, 0.3); } .keyboard-layout { spacing: 10px; padding: 10px; } .keyboard-row { spacing: 15px; } .keyboard-key { @include button(normal); background-color: $base_color; min-height: 2em; min-width: 2em; font-size: 14pt; font-weight: bold; border-radius: 5px; &:focus { @include button(focus); } &:hover,&:checked { @include button(hover); } &:active { @include button(active);} &:grayed { //FIXME background-color: $osd_bg_color; color: $osd_fg_color; border-color: $osd_borders_color; } } .keyboard-subkeys { //long press on a key popup color: white; padding: 5px; -arrow-border-radius: 10px; -arrow-background-color: transparentize($osd_bg_color, 0.3); -arrow-border-width: 2px; -arrow-border-color: $_bubble_borders_color; -arrow-base: 20px; -arrow-rise: 10px; -boxpointer-gap: 5px; } // IBus Candidate Popup .candidate-popup-content { padding: 0.5em; spacing: 0.3em; } .candidate-index { padding: 0 0.5em 0 0; color: darken($fg_color,10%); } .candidate-box { padding: 0.3em 0.5em 0.3em 0.5em; border-radius: 4px; &: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: 4px 0px 0px 4px; border-right-width: 0; } .candidate-page-button-next { border-radius: 0px 4px 4px 0px; } .candidate-page-button-icon { icon-size: 1em; } /* Auth Dialogs & Screen Shield */ .framed-user-icon { background-size: contain; border: 2px solid $osd_fg_color; color: $osd_fg_color; border-radius: 3px; &:hover { border-color: lighten($osd_fg_color,30%); 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,$c:$selected_bg_color); &:hover,&:focus { @include button(hover,$c:$selected_bg_color); } &:active { @include button(active,$c:$selected_bg_color); } &: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:selected { 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; } .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(resource:///org/gnome/shell/theme/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 { background-color: rgba(0,0,0,0.80); spacing: 4px; padding: 4px; border: 2px solid grey; border-radius: 4px; & > #Toolbar { border: 1px solid grey; border-radius: 4px; } .labels { spacing: 4px; } .notebook-tab { -natural-hpadding: 12px; -minimum-hpadding: 6px; font-weight: bold; color: #ccc; transition-duration: 100ms; padding-left: .3em; padding-right: .3em; &:hover { color: white; text-shadow: black 0px 2px 2px; } &:selected { border-bottom-width: 2px; border-color: lighten($selected_bg_color,5%); color: white; text-shadow: black 0px 2px 2px; } } StBoxLayout#EvalBox { padding: 4px; spacing: 4px; } StBoxLayout#ResultsArea { spacing: 4px; } } .lg-dialog { StEntry { selection-background-color: #bbbbbb; selected-color: #333333; } .shell-link { color: #999999; &:hover { color: #dddddd; } } } .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 #6f6f6f; border-radius: 4px; padding: 4px; } .lg-extension-name { font-weight: bold; } .lg-extension-meta { spacing: 6px; } #LookingGlassPropertyInspector { background: rgba(0, 0, 0, 0.8); border: 2px solid grey; border-radius: 4px; padding: 6px; } .quick-settings { padding: 14px; border-radius: 12px; .icon-button, .button { padding: 6px*1.75; color: $fg_color; } } $base_padding: 6px; .quick-toggle { border-radius: 99px; &:checked { @include button(active, transparentize($selected_bg_color, 0.4)); &:hover { @include button(active, transparentize(lighten($selected_bg_color, 6%), 0.4)); } &, &:hover { color: $selected_fg_color; } } &, &:hover, &:checked, &:checked:hover { border: none; } & > StBoxLayout { spacing: $base_padding; } /* Move padding into the box; this is to allow menu arrows to extend to the border */ &.button { padding: 0; } & > StBoxLayout { padding: 0 6px*2; } &:ltr > StBoxLayout { padding-left: $base_padding*2.5; } &:rtl > StBoxLayout { padding-right: $base_padding*2.5; } .quick-toggle-label { font-weight: bold; } //.quick-toggle-icon, .quick-toggle-arrow { icon-size: $base_icon_size; } } .quick-menu-toggle, .quick-toggle-has-menu { &:ltr > StBoxLayout { padding-right: 0; } &:rtl > StBoxLayout { padding-left: 0; } & .quick-toggle { min-width: auto; max-width: auto; &:ltr { border-radius: 99px 0 0 99px; } &:rtl { border-radius: 0 99px 99px 0; } &:ltr:last-child { border-radius: 99px; } &:rtl:last-child { border-radius: 99px; } } & .quick-toggle-arrow, & .quick-toggle-menu-button { background-color: transparentize(lighten($base_color, 5%), 0.4); padding: $base_padding $base_padding*1.75; border-width: 0; color: $fg_color; &:checked { @include button(active, transparentize($selected_bg_color, 0.1)); &:hover { @include button(active, transparentize(lighten($selected_bg_color, 5%), 0.1)); } &, &:hover { color: $selected_fg_color; border-width: 0; } } &:hover { background-color: lighten($base_color, 7%); } &:ltr { border-radius: 0 99px 99px 0; } &:rtl { border-radius: 99px 0 0 99px; } } & .quick-toggle-menu-button { background-color: lighten($base_color, 5%); } & .quick-toggle-separator { width: 0; } } .quick-toggle-menu { background-color: $base_color !important; border-radius: 12px; padding: $base_padding*2; margin: $base_padding*2 $base_padding*3 0; color: $fg_color; .popup-menu-item > StIcon { -st-icon-style: symbolic; } & .header { spacing-rows: 0.5 * $base_padding; spacing-columns: $base_padding*2; padding-bottom: 2 * $base_padding; & .icon { // icon-size: $base_icon_size*1.5; // a non-standard symbolic size but ok border-radius: 999px; padding: 1.5 * $base_padding; background-color: lighten($bg_color, 10%); &.active { background-color: $selected_bg_color; color: $selected_fg_color; } } } } .quick-settings-system-item { & > StBoxLayout { spacing: 2 * $base_padding; } .icon-button { @extend %button; border-radius: 50px; } } .quick-slider .icon-button:hover { @include button(hover); } // Screenshot UI .screenshot-ui-panel { @extend %osd-panel; } .screenshot-ui-close-button { background-color: $red; &:hover, &:active { background-color: lighten($red, 3%); } } .screenshot-ui-type-button, .screenshot-ui-show-pointer-button { @extend %button; } .screenshot-ui-window-selector { background-color: $bg_color; } .screenshot-ui-window-selector-window { &:hover { .screenshot-ui-window-selector-window-border { border-color: darken($selected_bg_color, 15%); } } &:checked { .screenshot-ui-window-selector-window-border { border-color: $selected_bg_color; background-color: transparentize($selected_bg_color, 0.8); } .screenshot-ui-window-selector-check { color: $bg_color; background-color: $selected_bg_color; } } } ================================================ FILE: gnome-shell/_cosmic.scss ================================================ /* Pop_OS COSMIC Widget styling. */ /* Pop_OS COSMIC Dock styling, append !important to any changed rules */ .cosmic-dock #dock { border-radius: 12px 12px 12px 12px !important; border: 0 !important; background-color: #2e3440; margin: 4px !important; } .cosmic-dock.extended #dock { border-radius: 0px !important; margin: 0 !important; } .cosmic-dock.extended.side #dock { border-top-width: 0 !important; border-bottom-width: 0 !important; } .cosmic-dock.extended.side.left #dock { border-left-width: 0 !important; } .cosmic-dock.extended.side.right #dock { border-right-width: 0 !important; } .cosmic-dock.extended.bottom #dock { border-bottom-width: 0 !important; border-left-width: 0 !important; border-right-width: 0 !important; } .cosmic-dock .app-well-app:hover .overview-icon, .cosmic-dock .app-well-app:focus .overview-icon, .cosmic-dock .app-well-app:selected .overview-icon { border-radius: 11px; } ================================================ FILE: gnome-shell/_drawing.scss ================================================ /***************** * Drawing mixins * *****************/ // drawing of depth/shadows $depth: 0 1px 2px rgba(0, 0, 0, 0.10); $depth2: 0 1px 2px rgba(0, 0, 0, 0.15); $depth3: inset 0 1px 1px rgba(0, 0, 0, 0.06); $depth4: inset 0 1px 2px rgba(0, 0, 0, 0.10); $depth5: inset 0 1px 2px rgba(0, 0, 0, 0.15); $depth6: 0 2px 4px 2px transparentize(black, 0.8); // generic drawing of more complex things @function _widget_edge($c:$borders_edge) { // outer highlight "used" on most widgets @return 0 1px $c; } // provide font size in rem, with px fallback @mixin fontsize($size: 24, $base: 16) { font-size: round($size) + pt; //font-size: ($size / $base) * 1rem; } @mixin _shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) { // // Helper function to stack up to 4 box-shadows; // @if $shadow4!=none { box-shadow: $shadow1, $shadow2, $shadow3, $shadow4; } @else if $shadow3!=none { box-shadow: $shadow1, $shadow2, $shadow3; } @else if $shadow2!=none { box-shadow: $shadow1, $shadow2; } @else { box-shadow: $shadow1; } } // entries @mixin entry($t, $fc:$selected_bg_color, $edge: $borders_edge) { // // Entries drawing function // // $t: entry type // $fc: focus color // $edge: set to none to not draw the bottom edge or specify a color to not // use the default one // // possible $t values: // normal, focus, insensitive // @if $t==normal { background-color: lighten($base_color, 4%); border-color: $borders_color; } @if $t==focus { border-color: transparentize($selected_bg_color, 0.2); box-shadow: none !important; } @if $t==hover { @include _shadows($depth); background-color: lighten($base_color, 7%); } @if $t==insensitive { color: $insensitive_fg_color; box-shadow: $depth; } } // buttons @function _border_color ($c) { @return darken($c,25%); } // colored buttons want // the border form the // base color @function _text_shadow_color ($tc:$fg_color, $bg:$bg_color) { // // calculate the color of text shadows // // $tc is the text color // $bg is the background color // $_lbg: lightness($bg)/100%; @if lightness($tc)<50% { @return transparentize(white,1-$_lbg/($_lbg*1.3)); } @else { @return transparentize(black,$_lbg*0.8); } } @function _button_hilight_color($c) { // // calculate the right top hilight color for buttons // // $c: base color; // @if lightness($c)>90% { @return white; } @else if lightness($c)>80% { @return transparentize(white, 0.3); } @else if lightness($c)>50% { @return transparentize(white, 0.5); } @else if lightness($c)>40% { @return transparentize(white, 0.7); } @else { @return transparentize(white, 0.9); } } @mixin _button_text_shadow ($tc:$fg_color, $bg:$bg_color) { // // helper function for the text emboss effect // // $tc is the optional text color, not the shadow color // // TODO: this functions needs a way to deal with special cases // $_shadow: _text_shadow_color($tc, $bg); @if lightness($tc)<50% { text-shadow: 0 1px $_shadow; icon-shadow: 0 1px $_shadow; } @else { text-shadow: 0 -1px $_shadow; icon-shadow: 0 -1px $_shadow; } } @mixin button($t, $c:$osd_bg_color, $tc:$fg_color, $edge: $borders_edge) { // // Button drawing function // // $t: button type, // $c: base button color for colored* types // $tc: optional text color for colored* types // $edge: set to none to not draw the bottom edge or specify a color to not // use the default one // // possible $t values: // normal, hover, active, insensitive, insensitive-active, // backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active, // osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated // $_hilight_color: _button_hilight_color($c); $_button_edge: if($edge == none, none, _widget_edge($edge)); $_blank_edge: if($edge == none, none, _widget_edge(transparentize($edge,1))); @if $t==normal { // // normal button // color: $fg_color; background-color: lighten($base_color, 3%); box-shadow: none; border: 1px solid lighten($base_color, 3%); } @if $t==focus { // // focused button // $_bg: lighten($base_color, 6%); background-color: $_bg; color: $selected_fg_color; box-shadow: none !important; border: 1px solid $_bg; } @else if $t==hover { // // active osd button // $_bg: lighten($base_color, 6%); background-color: $_bg; color: $selected_fg_color; border: 1px solid $_bg; } @else if $t==active { // // active osd button // $_bg: if($c!=$osd_bg_color, $c, $selected_bg_color); color: $selected_fg_color; background-color: $_bg; // This should be none, but it's creating some issues with borders, so to // workaround it for now, use inset wich goes through a different code path. // see https://bugzilla.gnome.org/show_bug.cgi?id=752934 border: 1px solid $borders_color; text-shadow: none; icon-shadow: none; } @else if $t==insensitive { // // insensitive osd button // $_bg: transparentize(mix($insensitive_fg_color,$osd_bg_color,20%),0.3); color: $insensitive_fg_color; background-color: $_bg; box-shadow: $depth4; border: none; text-shadow: none; icon-shadow: none; } @else if $t==undecorated { // // reset // border-color: transparent; background-color: transparent; background-image: none; @include _shadows(inset 0 1px transparentize(white,1), $_blank_edge); text-shadow: none; icon-shadow: none; } } ================================================ FILE: gnome-shell/_extensions.scss ================================================ @import "extensions/_openweather" ; ================================================ FILE: gnome-shell/earlier-versions/_common.scss ================================================ $corner-radius: 2px; /* GLOBALS */ $font-size: 11; $_bubble_bg_color: $osd_bg_color; $_bubble_fg_color: $fg_color; $_bubble_borders_color: $fg_color; $_bubble_transparent: transparentize($osd_bg_color, 0.17); $topbar_bg_color: transparentize($dracula,0); stage { @include fontsize($font-size); color: $fg_color; } /* WIDGETS */ /* Buttons */ .button { @include button(normal); border-radius: 4px; border-width: 0; padding: 4px 32px; &:focus { @include button(focus); } &:insensitive { @include button(insensitive); } &:active { @include button(active); } &:hover { @include button(hover); } } .modal-dialog-linked-button { padding: 10px; border: 1px solid $borders_color; color: $fg_color; background: $main_dark; text-shadow: none; icon-shadow: none; box-shadow: none; &:insensitive { @include button(insensitive); } &:active { @include button(active); } &:focus { @include button(focus); &:hover { @include button(focus); } } &:hover { @include button(hover); } &:first-child { border-radius: 0px 0px 0px 2px; } &:last-child { border-radius: 0px 0px 2px 0px; } &:first-child:last-child { border-radius: 0px 0px 2px 2px; } } /* Entries */ StEntry { @include entry(normal); border-radius: 2px; padding: 4px; border-width: 0; color: $fg_color; //&:hover { @include entry(hover);} &:focus { @include entry(focus,$fc:transparentize($fg_color,0.5));} &:insensitive { @include entry(insensitive);} selection-background-color: $selected_bg_color; selected-color: $selected_fg_color; StIcon.capslock-warning { icon-size: 16px; warning-color: $warning_color; padding: 0 4px; } StLabel.hint-text { color: transparentize($fg_color, 0.3); } } /* Scrollbars */ StScrollView { &.vfade { -st-vfade-offset: 68px; } &.hfade { -st-hfade-offset: 68px; } } StScrollBar { padding: 0; StScrollView & { min-width: 14px; min-height: 14px; } StBin#trough { border-radius: 0; background-color: transparent; } StButton#vhandle, StButton#hhandle { border-radius: 8px; background-color: mix($fg_color, $bg_color, 20%); //border: 3px solid transparent; //would be nice to margin or at least to transparent margin: 3px; &:hover { background-color: mix($fg_color, $bg_color, 80%); } &:active { background-color: $selected_bg_color; } } } /* Slider */ .slider { height: 1em; color: $selected_fg_color; border-color: black; -slider-height: 0.3em; -slider-background-color: $gray; //background of the trough -slider-border-color: black; //trough border color -slider-active-background-color: $selected_bg_color; //active trough fill -slider-active-border-color: $lime; //active trough border -slider-border-width: 0; -slider-handle-radius: 6px; -barlevel-height: 0.3em; -barlevel-background-color: $gray; -barlevel-border-color: black; -barlevel-active-background-color: $selected_bg_color; -barlevel-active-border-color: $lime; -barlevel-border-width: 0; -barlevel-handle-radius: 6px; -barlevel-overdrive-color: $selected_bg_color; -barlevel-overdrive-border-color: transparent; -barlevel-overdrive-separator-width: 0px; } /* Check Boxes */ .check-box { StBoxLayout { spacing: .8em; } StBin { width: 24px; height: 22px; background-image: url("assets/checkbox-off.svg"); } &:focus, &:hover StBin { background-image: url("assets/checkbox-off-focused.svg"); } &:checked StBin { background-image: url("assets/checkbox.svg"); } &:focus:checked StBin { background-image: url("assets/checkbox-focused.svg"); } } /* Switches */ .toggle-switch { width: 65px; height: 22px; background-size: contain; //Gnome 3.32// background-image: url("assets/toggle-off.svg"); &:checked { background-image: url("assets/toggle-on.svg"); } } @each $v in us, intl { .toggle-switch-#{$v} { background-image: url("assets/toggle-off.svg"); &:checked { background-image: url("assets/toggle-on.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 { border: none; border-radius: 2px; color: $osd_fg_color; background-color: darken($osd_bg_color,5%); box-shadow: $depth6; .modal-dialog-content-box { padding: 24px; } .run-dialog-entry { width: 20em; margin-bottom: 6px; } .run-dialog-error-box { color: $error_color; padding-top: 16px; spacing: 6px; } .run-dialog-button-box { padding-top: 1em; } .run-dialog-label { @include fontsize($font-size + 1.1); font-weight: bold; color: darken($osd_fg_color,10%); padding-bottom: .4em; } .run-dialog-description { color: $fg_color; } } .mount-dialog-subject, .end-session-dialog-subject { //this should be a generic header class @include fontsize($font-size * 1.3); } /* Message Dialog */ .message-dialog-main-layout { padding: 12px 20px 0; spacing: 12px; } .message-dialog-content { max-width: 28em; spacing: 20px; } .message-dialog-icon { min-width: 48px; icon-size: 48px; } .message-dialog-title { font-weight: bold; } .message-dialog-subtitle { color: darken($fg_color,40%); font-weight: bold; } /* End Session Dialog */ .end-session-dialog { spacing: 42px; border: none; & .modal-dialog-linked-button:last-child { background: $error_color; &:hover, &:focus { background: lighten($error_color, 3%); color: #fff; } } } .end-session-dialog-list { padding-top: 20px; } .end-session-dialog-layout { padding-left: 17px; &:rtl { padding-right: 17px; } } .end-session-dialog-description { width: 28em; padding-bottom: 10px; &:rtl { text-align: right; } } .end-session-dialog-warning { width: 28em; color: $warning_color; padding-top: 6px; &:rtl { text-align: right; } } .end-session-dialog-logout-icon { //border: 2px solid #8b8b8b; border-radius: 3px; width: 48px; height: 48px; background-size: contain; } .end-session-dialog-shutdown-icon { color: $error_color; width: 48px; height: 48px; } .end-session-dialog-inhibitor-layout { spacing: 16px; max-height: 200px; padding-right: 65px; padding-left: 65px; } .end-session-dialog-session-list, .end-session-dialog-app-list { spacing: 1em; } .end-session-dialog-list-header { font-weight: bold; &:rtl { text-align: right; } } .end-session-dialog-app-list-item, .end-session-dialog-session-list-item { spacing: 1em; } .end-session-dialog-app-list-item-name, .end-session-dialog-session-list-item-name { font-weight: bold; } .end-session-dialog-app-list-item-description { color: darken($fg_color,5%); font-size: 10pt; } /* 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; } .message-dialog-title:rtl { padding-left: 0px; padding-right: 17px; } .message-dialog-body { padding-left: 17px; width: 28em; } .message-dialog-body:rtl { padding-left: 0px; padding-right: 17px; } } .mount-dialog-app-list { max-height: 200px; padding-top: 24px; padding-left: 49px; padding-right: 32px; } .mount-dialog-app-list: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 { font-size: 10pt; } /* Password or Authentication Dialog */ .prompt-dialog { //this is the width of the entire modal popup width: 34em; border: none; border-radius: 2px; .message-dialog-main-layout { spacing: 24px; padding: 10px; } .message-dialog-content { spacing: 16px; } .message-dialog-title { color: darken($osd_fg_color,25%); } } .prompt-dialog-description:rtl { text-align: right; } .prompt-dialog-password-box { spacing: 1em; padding-bottom: 1em; } .prompt-dialog-error-label { font-size: 10pt; color: $error_color; padding-bottom: 8px; } .prompt-dialog-info-label { font-size: 10pt; padding-bottom: 8px; } .hidden { color: rgba(0,0,0,0); } .prompt-dialog-null-label { font-size: 10pt; padding-bottom: 8px; } /* Polkit Dialog */ .polkit-dialog-user-layout { padding-left: 10px; spacing: 10px; &:rtl { padding-left: 0px; padding-right: 10px; } } .polkit-dialog-user-root-label { color: $warning_color; } .polkit-dialog-user-icon { border-radius: 3px; background-size: contain; width: 48px; height: 48px; } /* Audio selection dialog */ .audio-device-selection-dialog { spacing: 30px; } .audio-selection-content { spacing: 20px; padding: 24px; } .audio-selection-title { font-weight: bold; text-align: center; } .audio-selection-box { spacing: 20px; } .audio-selection-device { border: 1px solid $_bubble_borders_color; border-radius: 12px; &:active,&:hover,&:focus { background-color: $selected_bg_color; } } .audio-selection-device-box { padding: 20px; spacing: 20px; } .audio-selection-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: darken($osd_fg_color,25%); } } /* 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; } /* Popovers/Menus */ .popup-menu { min-width: 15em; background-color: transparent; color: $fg_color; .popup-menu-arrow { } //defined globally in the TOP BAR .popup-sub-menu { background-color: transparentize(darken($main_dark,57%), 0.8); box-shadow: $depth6; } .popup-menu-content { padding: 16px 0; background-color: $bg_color; border-radius: 5px; } .popup-menu-item { spacing: 6px; padding: 6px; &:ltr { padding-right: 1.75em; padding-left: 0; } &:rtl { padding-right: 0; padding-left: 1.75em; } &:checked { background-color: transparentize($selected_bg_color,0.1); color: $selected_fg_color; box-shadow: inset 0 1px 0px lighten($borders_color,5%); font-weight: bold; &:hover{ background-color: transparentize($selected_bg_color,0.1); color: $selected_fg_color; } } &.selected { background-color: transparentize($fg_color,0.9); color: $fg_color; } &:active { background-color: $selected_bg_color; color: $selected_fg_color; } &:insensitive { color: transparentize($fg_color,.5); } } .popup-inactive-menu-item { //all icons and other graphical elements color: $fg_color; &:insensitive { color: transparentize($fg_color,0.5); } } //.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is &.panel-menu { -boxpointer-gap: 4px; margin-bottom: 1.75em; } } .popup-menu-ornament { text-align: right; width: 1.2em; } .popup-menu-boxpointer, .candidate-popup-boxpointer { -arrow-border-radius: 5px; -arrow-background-color: $bg_color; -arrow-border-width: 1px; -arrow-border-color: $borders_color; -arrow-base: 24px; -arrow-rise: 11px; -arrow-box-shadow: 0 1px 3px black; //dreaming. bug #689995 } .popup-separator-menu-item { &-separator { //-margin-horizontal: 24px; height: 1px; //not really the whole box margin: 6px 64px; background-color: transparent; border-color: transparent; border-bottom-width: 1px; border-bottom-style: solid; } .popup-sub-menu & &-separator { //submenu separators margin: 0 64px 0 32px; background: transparent; } } // 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; margin: 32px; min-width: 64px; min-height: 64px; .osd-monitor-label { font-size: 3em; } .level { height: 0.4em; border-radius: 0.3em; color: $osd_fg_color; border: 1px solid $borders_color; -barlevel-height: 0.4em; -barlevel-background-color: transparentize(darken($main_dark,15%),0.5); -barlevel-active-background-color: $selected_bg_color; -barlevel-overdrive-color: $red; -barlevel-overdrive-separator-width: 0.2em; } .level-bar { background-color: $selected_bg_color; border-radius: 0.3em; } } /* Pad OSD */ .pad-osd-window { padding: 32px; background-color: transparentize(black, 0.2); .pad-osd-title-box { spacing: 12px; } .pad-osd-title-menu-box { spacing: 6px; } } .combo-box-label { width: 15em; } /* App Switcher */ .switcher-popup { padding: 8px; spacing: 16px; } .osd-window, .resize-popup, .switcher-list { @extend %osd-panel; } .switcher-list-item-container { spacing: 8px; } .switcher-list .item-box { padding: 8px; border-radius: 4px; } .switcher-list .item-box:outlined { padding: 6px; border: 2px solid darken($borders_color,10%); } .switcher-list .item-box:selected { background-color: $selected_bg_color; color: $selected_fg_color; } .switcher-list .thumbnail-box { padding: 2px; spacing: 4px; } .switcher-list .thumbnail { width: 256px; } .switcher-list .separator { width: 1px; background: $borders_color; } .switcher-arrow { border-color: rgba(0,0,0,0); color: transparentize($fg_color,0.2); &:highlighted { color: $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-group { padding: 12px; } .workspace-switcher-container { @extend %osd-panel; } .workspace-switcher { background: transparent; border: 0px; border-radius: 0px; padding: 0px; spacing: 8px; } .ws-switcher-active-up, .ws-switcher-active-down, .ws-switcher-active-left, .ws-switcher-active-right { height: 50px; background-color: $selected_bg_color; color: $selected_fg_color; //background-image: url("resource:///org/gnome/shell/theme/assets/ws-switch-arrow-up.png"); background-size: 32px; border-radius: 8px; border-color: $selected_bg_color; } .ws-switcher-active-up { background-image: url("assets/ws-switch-arrow-up.png"); } .ws-switcher-active-down { background-image: url("assets/ws-switch-arrow-down.png"); } .ws-switcher-box { height: 50px; border: 1px solid transparentize($osd_fg_color,0.9); background: darken($_bubble_bg_color, 10%); border-radius: 8px; } %osd-panel { color: $_bubble_fg_color; background-color: $_bubble_bg_color; border: 1px solid $borders_color; box-shadow: 0px 0px 5px $borders_color; border-radius: 5px; padding: 12px; } /* Tiled window previews */ .tile-preview { background-color: transparentize($selected_bg_color,0.5); border: 1px solid $selected_bg_color; } .tile-preview-left.on-primary { border-radius: $corner-radius $corner-radius 0 0; } .tile-preview-right.on-primary { border-radius: 0 $corner-radius 0 0; } .tile-preview-left.tile-preview-right.on-primary { border-radius: $corner-radius $corner-radius 0 0; } /* TOP BAR */ #panel { background-gradient-direction: none; background-color: $topbar_bg_color; /* transition from solid to transparent */ transition-duration: 500ms; font-weight: bold; height: 1.86em; padding: 0px 0px; &.unlock-screen, &.login-screen, &.lock-screen { background-color: transparent; } #panelLeft, #panelCenter { // spacing between activities<>app menu and such spacing: 4px; } .panel-corner { -panel-corner-radius: 0px; -panel-corner-background-color: rgba(0, 0, 0, 0.2); -panel-corner-border-width: 2px; -panel-corner-border-color: transparent; &:active, &:overview, &:focus { -panel-corner-border-color: lighten($selected_bg_color,5%); } &.lock-screen, &.login-screen, &.unlock-screen { -panel-corner-radius: 0; -panel-corner-background-color: transparent; -panel-corner-border-color: transparent; } } .panel-button { -natural-hpadding: 12px; -minimum-hpadding: 6px; font-weight: bold; color: $topbar_color; transition-duration: 100ms; .app-menu-icon { -st-icon-style: symbolic; margin-left: 4px; margin-right: 4px; //dimensions of the icon are hardcoded } &:hover { background: lighten($topbar_bg_color, 10%); color: lighten($topbar_color, 10%); } &:active, &:overview, &:focus, &:checked { // Trick due to St limitations. It needs a background to draw // a box-shadow background: $selected_bg_color; box-shadow: inset 0 -2px 0px lighten($selected_bg_color,5%); color: #fff; } .system-status-icon { icon-size: 1.09em; padding: 0 5px; } .unlock-screen &, .login-screen &, .lock-screen & { color: lighten($fg_color, 10%); &:focus, &:hover, &:active { color: lighten($fg_color, 10%); } } // Remove default bottom border &.clock-display { &:active, &:overview, &:focus, &:checked { box-shadow: none; .clock { box-shadow: none; } } } } .panel-status-indicators-box, .panel-status-menu-box { spacing: 2px; } // spacing between power icon and (optional) percentage label .power-status.panel-status-indicators-box { spacing: 0; } .screencast-indicator { color: $warning_color; } &.solid { background-color: $dracula; /* transition from transparent to solid */ transition-duration: 300ms; .panel-corner { -panel-corner-background-color: black; } .system-status-icon, .app-menu-icon > StIcon, .popup-menu-arrow { icon-shadow: none; } } } // calendar popover #calendarArea { padding: 0.75em 1.0em; } .calendar { margin-bottom: 1em; } .calendar, .world-clocks-button, .weather-button, .events-button { background: transparent; border: none; } .calendar, .datemenu-today-button, .datemenu-displays-box, .message-list-sections { margin: 0 1.5em; } .datemenu-calendar-column { spacing: 0.5em; } .datemenu-displays-section { padding-bottom: 3em; } .datemenu-displays-box { spacing: 1em; } .datemenu-calendar-column { border: 0 solid transparent; &:ltr { border-left-width: 1px; } &:rtl { border-right-width: 1px; } } .datemenu-today-button, .world-clocks-button, .weather-button, .events-section-title, .message-list-section-title, .events-button { border-radius: 4px; color: $fg_color; 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, .message-list-section-title, .events-button { &:hover,&:focus { background-color: lighten($bg_color,5%); } &:active { color: lighten($selected_fg_color,5%); background-color: $selected_bg_color; } } .datemenu-today-button .day-label { } .datemenu-today-button .date-label { font-size: 1.5em; } .world-clocks-header, .weather-header, .events-section-title, .message-list-section-title, .events-title { color: darken($fg_color, 40%); font-weight: bold; } .events-button .event-time { color: darken($fg_color, 4%); } .world-clocks-grid { spacing-rows: 0.4em; } .weather-box { spacing: 0.4em; } .calendar-month-label { color: darken($fg_color,5%); font-weight: bold; padding: 8px 0; &:focus {} } .pager-button { color: white; background-color: transparent; width: 32px; border-radius: 4px; &:hover, &:focus { background-color: transparentize($fg_color,0.95); } &:active { background-color: transparentize($bg_color,0.95); } } .calendar-change-month-back { //arrow back background-image: url("assets/calendar-arrow-left.svg"); &:rtl { background-image: url("assets/calendar-arrow-right.svg"); } } .calendar-change-month-forward { //arrow foreward background-image: url("assets/calendar-arrow-right.svg"); &:rtl { background-image: url("assets/calendar-arrow-left.svg"); } } .calendar-change-month-back StIcon, .calendar-change-month-forward StIcon { color:darken($fg_color, 7%); } .calendar-day-base { font-size: 80%; text-align: center; width: 2.4em; height: 2.4em; padding: 0.1em; margin: 2px; border-radius: 1.4em; color: $fg_color; &:hover,&:focus { background-color: lighten($bg_color,5%); } &:active,&:selected { color: lighten($selected_fg_color,5%); background-color: $selected_bg_color; border-color: transparent; //avoid jumparound due to today } &.calendar-day-heading { //day of week heading color: darken($fg_color,40%); margin-top: 1em; font-size: 70%; } } .calendar-day { //border collapse hack - see calendar.js border-width: 0; } .calendar-day-top { border-top-width: 1px; } .calendar-day-left { border-left-width: 1px; } .calendar-work-day { } .calendar-nonwork-day { color: $insensitive_fg_color; } .calendar-today { font-weight: bold; //color: lighten($fg_color,10%); //background-color: darken($bg_color,5%); border: 1px solid transparentize($borders_color,0.5); } .calendar-day-with-events { color: lighten($fg_color,10%); font-weight: bold; background-image: url("assets/calendar-today.svg"); } .calendar-other-month-day { color: $insensitive_fg_color; opacity: 0.5; } .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; .message-title, .message-content, .message-body { color: darken($fg_color, 5%); } } .message-list-clear-button.button { // background-color: transparent; border: 1px solid $borders_color; box-shadow: none; &:hover,&:focus { background-color: lighten($bg_color,5%); } margin: 1.5em 1.5em 0; } .message-list-sections { spacing: 1em; } .message-list-section, .message-list-section-list { spacing: 0.4em; } .message-list-section-close{ & > StIcon { icon-size: 16px; border-radius: 16px; padding: 8px; color: $fg_color; background-color: transparent; } &:hover > StIcon, &:focus > StIcon &:active > StIcon{ color: $red; background: transparent; } } .message { &:hover,&:focus { background-color: lighten($bg_color,2%); box-shadow: 3px 0px 0px 0px $selected_bg_color inset; } border: 1px solid $borders_color; border-radius: 3px; background: darken($bg_color, 0.7%); box-shadow: none; } .message-icon-bin { padding: 10px 3px 10px 10px; &:rtl { padding: 10px 10px 10px 3px; } } .message-icon-bin > StIcon { icon-size: 16px; -st-icon-style: symbolic; } .message-secondary-bin { padding: 0 12px; } .message-secondary-bin > .event-time { color: darken($fg_color, 15%); font-size: 0.7em; /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */ padding-bottom: 0.13em; } .message-secondary-bin > StIcon { icon-size: 16px; } .message-title { //color: darken($fg_color,5%); } .message-content { // color: darken($fg_color,20%); padding: 10px; *:hover > StIcon, *:focus > StIcon, { color: $red; } } .message-media-control { padding: 12px; color: darken($fg_color, 20%); &:last-child:ltr { padding-right: 18px; } &:last-child:rtl { padding-left: 18px; } &:hover { color: $fg_color; } &:insensitive { color: darken($fg_color,40%); } } .media-message-cover-icon { icon-size: 48px !important; &.fallback { color: lighten($bg_color,10%); background-color: $bg_color; border: 2px solid $bg_color; border-radius: 2px; icon-size: 16px; padding: 8px; } } /* World clocks */ .world-clocks-button { // city label .world-clocks-city { color: $fg_color; font-weight: normal; } // timezone time .world-clocks-time { font-weight: bold; color: $fg_color; font-feature-settings: "lnum"; text-align: right; } // timezone offset label .world-clocks-timezone { color: darken($fg_color,20%); font-feature-settings: "tnum"; } } /* Weather */ .weather-button { .weather-header { color: darken($fg_color, 10%); font-weight: bold; &.location { font-weight: normal; } } .weather-forecast-time { color: darken($fg_color, 10%); font-feature-settings: "tnum"; font-weight: normal; padding-top: 0.2em; padding-bottom: 0.4em; } .weather-forecast-temp { font-weight: bold; } } // a little unstructured mess: .system-switch-user-submenu-icon.user-icon { icon-size: 20px; padding: 0 2px; } .system-switch-user-submenu-icon.default-icon { icon-size: 16px; padding: 0 4px; } #appMenu { spinner-image: url("assets/process-working.svg"); spacing: 4px; .label-shadow { color: transparent; } } .aggregate-menu { min-width: 21em; .popup-menu-icon { padding: 0 4px; } } .system-menu-action { color: $fg_color; border-radius: 32px; /* wish we could do 50% */ border: 1px solid $borders_color; background: darken($bg_color, 3%); padding: 13px; &:hover, &:focus { border: 1px solid $selected_bg_color; color: $selected_bg_color; background: transparent; } &:active { background-color: darken($selected_bg_color, 10%); color: $selected_fg_color;} & > StIcon { icon-size: 16px; } } //Activities Ripples .ripple-box { width: 52px; height: 52px; background-image: url("assets/corner-ripple-ltr.png"); background-size: contain; } .ripple-box:rtl { background-image: url("assets/corner-ripple-rtl.png"); } // not really top bar only .popup-menu-arrow { width: 16px; height: 16px; } .popup-menu-icon { icon-size: 1.09em; } //close buttons .window-close { background-color: transparent; background-image: url("assets/close-window.svg"); background-size: 32px; border: none; box-shadow: none; color: transparent; height: 32px; width: 32px; } .window-close { -shell-close-overlap: 16px; &:rtl { -st-background-image-shadow: 2px 2px 6px rgba(0,0,0,0.5); } } /* NETWORK DIALOGS */ .nm-dialog { max-height: 34em; min-height: 31em; min-width: 32em; } .nm-dialog-content { spacing: 20px; padding: 24px; } .nm-dialog-header-hbox { spacing: 10px; } .nm-dialog-airplane-box { spacing: 12px; } .nm-dialog-airplane-headline { font-weight: bold; text-align: center; } .nm-dialog-airplane-text { color: $fg_color; } .nm-dialog-header-icon { icon-size: 32px; } .nm-dialog-scroll-view { border: 2px solid $borders_color; background: transparent; } .nm-dialog-header { font-weight: bold; } .nm-dialog-item { font-size: 110%; border-bottom: 1px solid $borders_color; padding: 12px; spacing: 20px; } .nm-dialog-item:selected { background-color: $selected_bg_color; color: $selected_fg_color; } .nm-dialog-icons { spacing: .5em; } .nm-dialog-icon { icon-size: 16px; } .no-networks-label { color: #999999; } .no-networks-box { spacing: 12px; } /* OVERVIEW */ #overview { spacing: 24px; // } #overview.cosmic-solid-bg { background-color: $topbar_bg_color !important; } .overview-controls { padding-bottom: 32px; } .window-picker { //container around window thumbnails -horizontal-spacing: 16px; -vertical-spacing: 16px; padding: 0 16px 16px; &.external-monitor { padding: 16px; } } .window-clone-border { border: 4px solid transparentize($selected_bg_color, .7); border-radius: 0px; // For window decorations with round corners we can't match // the exact shape when the window is scaled. So apply a shadow // to fix that case box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); } .window-caption { spacing: 20px; color: $fg_color; background-color: transparentize($osd_bg_color,.3); border-radius: 2px; padding: 4px 8px; } //search entry .search-entry { width: 320px; padding: 9px; border-radius: 2px; border: none; color: $fg_color; background-color: transparentize($bg_color, 0.4); box-shadow: $depth; &:focus { border-width: 0; color: $fg_color; background-color: transparentize($bg_color, 0.2); box-shadow: $depth2; } .search-entry-icon { icon-size: 1em; padding: 0 4px; color: transparentize($fg_color,.3); } &:hover, &:focus { background-color: transparentize($bg_color, 0.2); .search-entry-icon { color: $fg_color; } } } //search results %search-section-content-item { &:focus, &:hover, &:selected { background-color: transparentize($osd_fg_color, .9); transition-duration: 200ms; } &:active, &:checked { background-color: transparentize(darken($osd_bg_color, 10%), .1); } } #searchResultsBin { max-width: 1000px; } #searchResultsContent { padding-left: 20px; padding-right: 20px; spacing: 16px; } .search-section { spacing: 16px; } // This should be equal to #searchResultsContent spacing .search-section-content { background-color: transparent; border-radius: 0; border: none; box-shadow: none; // This is the space between the provider icon and the results container spacing: 32px; } .search-statustext { // "no results" @extend %status_text; } .list-search-results { spacing: 3px; } .search-section-separator { height: 2px; background-color: $gray; } .list-search-result-content { spacing: 30px; } .list-search-result-title { color: lighten($topbar_color,5%); spacing: 12px; } .list-search-result-description { color: transparentize(lighten($topbar_color,15%), 0.5); } .list-search-provider-details { width: 150px; color: lighten($topbar_color,5%); margin-top: 0.24em; } .list-search-provider-content { spacing: 20px; } .search-provider-icon { padding: 15px; } //Icon tile .search-provider-icon, .list-search-result { @extend %search-section-content-item; } /* DASHBOARD */ #dash { font-size: 9pt; color: $topbar_color; background-color: $topbar_bg_color; padding: 6px 0; border: 1px solid $borders_color; border-left: 0px; border-radius: 0px 5px 5px 0px; &:rtl { border-radius: 9px 0 0 9px; } .placeholder { background-image: url("assets/dash-placeholder.svg"); background-size: contain; height: 24px; } .empty-dash-drop-target { width: 24px; height: 24px; } } .dash-item-container > StWidget { padding: 4px 8px; } .dash-label { //osd tooltip border-radius: 7px; padding: 4px 12px; color: $topbar_color; background-color: $topbar_bg_color; text-align: center; -x-offset: 8px; } /* 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; } .system-action-icon { background-color: black; color: white; border-radius: 99px; icon-size: 48px; } .app-view-controls { //favorties | all toggle container padding-bottom: 32px; } .app-view-control { //favorties | all toggle button padding: 4px 32px; &:checked { @include button(active); } &:first-child { border-right-width: 0; border-radius: 3px 0 0 3px; } &:last-child { border-radius: 0 3px 3px 0; } } .app-well-app, .app-well-app.app-folder, .show-apps, .grid-search-result { border: none; & .overview-icon { @extend %icon_tile; } &:active .overview-icon, &:checked .overview-icon { background-color: transparentize(darken($osd_bg_color,7%),.1); box-shadow: inset $depth2; color: $fg_color; } &:hover .overview-icon, &:focus .overview-icon, &:selected .overview-icon { background-color: transparentize($bg_color,.5); transition-duration: 0ms; border-image: none; background-image: none; } } .app-well-app-running-dot { //running apps indicator width: 4px; height: 4px; background-color: $selected_bg_color; border-radius: 10px !important; box-shadow: 0px 0px 5px 4px transparentize($selected_bg_color,0.2); margin-bottom: 0px; } %icon_tile { color: $selected_fg_color; border-radius: 2px; padding: 7px 6px; border: none; transition-duration: 100ms; text-align: center; box-shadow: $depth; } .app-well-app.app-folder > .overview-icon { background-color: transparentize($osd_bg_color,.6); } .show-apps .show-apps-icon { color: $topbar_color; } .show-apps:checked .show-apps-icon, .show-apps:focus .show-apps-icon { color: $fg_color; transition-duration: 100ms; } // Collections .app-folder-popup { //expanded collection -arrow-border-radius: 8px; -arrow-background-color: transparentize($bg_color,0.5); -arrow-base: 24px; -arrow-rise: 11px; } .app-folder-popup-bin { padding: 5px; background: transparentize($bg_color,.5);;} .app-folder-icon { padding: 5px; spacing-rows: 5px; spacing-columns: 5px; } .page-indicator { padding: 15px 20px; .page-indicator-icon { width: 12px; height: 12px; border-radius: 12px; background-image: none; background-color: rgba(255, 255, 255, 0.3); } &:hover .page-indicator-icon { background-image: none; background-color: rgba(255, 255, 255, 0.5); } &:active .page-indicator-icon { background-image: none; background-color: rgba(255, 255, 255, 0.7); } &:checked .page-indicator-icon{ background-image: none; background-color: #FFFFFF; transition-duration: 0s; } } .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 { //container ala dash @extend %overview-panel; visible-width: 32px; //amount visible before hover spacing: 11px; padding: 8px; border-radius: 0; //border-width: 1px 0 1px 1px; //fixme: can't have non unoform borders :( &:rtl { border-radius: 0;} } .workspace-thumbnail-indicator { border: 4px solid transparentize($selected_bg_color, .2); box-shadow: $depth; padding: 0; } //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; } %overview-panel { color: $_bubble_fg_color; background-color: transparent; border: none; } %status_text { font-size: 2em; font-weight: bold; color: $fg_color; } /* NOTIFICATIONS & MESSAGE TRAY */ .url-highlighter { link-color: lighten($selected_bg_color,10%); } // Banners .notification-banner { font-size: 11pt; width: 34em; margin: 5px; border-radius: 3px; color: $topbar_color; background-color: $bg_color; border: 1px solid $borders_color; box-shadow: 0 1px 4px black; &:hover { background-color: transparentize($bg_color, 0.04); } &:focus { background-color: transparentize($bg_color, 0.04); } *{ color: $topbar_color; } .notification-icon { padding: 5px; } .notification-content { padding: 5px; spacing: 5px; } .secondary-icon { icon-size: 1.09em; } .notification-actions { background-color: darken($bg_color, 2%); padding-top: 2px; spacing: 1px; } .notification-button { padding: 5px; background-color: transparentize($bg_color, 0.1); box-shadow: none; &:first-child { border-radius: 0 0 0 3px; } &:last-child { border-radius: 0 0 3px 0; } &:hover, &focus { background-color: darken($bg_color,2%); color: $selected_bg_color;} } } .summary-source-counter { font-size: 10pt; font-weight: bold; height: 1.6em; width: 1.6em; -shell-counter-overlap-x: 3px; -shell-counter-overlap-y: 3px; background-color: $selected_bg_color; color: $selected_fg_color; border: 2px solid $osd_fg_color; box-shadow: 0 2px 2px rgba(0,0,0,0.5); border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%; } .secondary-icon { icon-size: 1.09em; } //chat bubbles .chat-body { spacing: 5px; } .chat-response { margin: 5px; } .chat-log-message { color: darken($fg_color,10%); } .chat-new-group { padding-top: 1em; } .chat-received { padding-left: 4px; &:rtl { padding-left: 0px; padding-right: 4px; } } .chat-sent { padding-left: 18pt; color: darken($fg_color, 15%); &:rtl { padding-left: 0; padding-right: 18pt; } } .chat-meta-message { padding-left: 4px; font-size: 9pt; font-weight: bold; color: darken($fg_color,20%); &:rtl { padding-left: 0; padding-right: 4px; } } //hotplug .hotplug-transient-box { spacing: 6px; padding: 2px 72px 2px 12px; } .hotplug-notification-item { padding: 2px 10px; &:focus { padding: 1px 71px 1px 11px; } } .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 */ //magnifier .magnifier-zoom-region { border: 2px solid $selected_bg_color; &.full-screen { border-width: 0; } } //Keyboard /* On-screen Keyboard */ #keyboard { background-color: transparentize($osd_bg_color, 0.3); } .keyboard-layout { spacing: 10px; padding: 10px; } .keyboard-row { spacing: 15px; } .keyboard-key { @include button(normal); background-color: $base_color; min-height: 2em; min-width: 2em; font-size: 14pt; font-weight: bold; border-radius: 5px; &:focus { @include button(focus); } &:hover,&:checked { @include button(hover); } &:active { @include button(active);} &:grayed { //FIXME background-color: $osd_bg_color; color: $osd_fg_color; border-color: $osd_borders_color; } } .keyboard-subkeys { //long press on a key popup color: white; padding: 5px; -arrow-border-radius: 10px; -arrow-background-color: transparentize($osd_bg_color, 0.3); -arrow-border-width: 2px; -arrow-border-color: $_bubble_borders_color; -arrow-base: 20px; -arrow-rise: 10px; -boxpointer-gap: 5px; } // IBus Candidate Popup .candidate-popup-content { padding: 0.5em; spacing: 0.3em; } .candidate-index { padding: 0 0.5em 0 0; color: darken($fg_color,10%); } .candidate-box { padding: 0.3em 0.5em 0.3em 0.5em; border-radius: 4px; &: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: 4px 0px 0px 4px; border-right-width: 0; } .candidate-page-button-next { border-radius: 0px 4px 4px 0px; } .candidate-page-button-icon { icon-size: 1em; } /* Auth Dialogs & Screen Shield */ .framed-user-icon { background-size: contain; border: 2px solid $osd_fg_color; color: $osd_fg_color; border-radius: 3px; &:hover { border-color: lighten($osd_fg_color,30%); 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,$c:$selected_bg_color); &:hover,&:focus { @include button(hover,$c:$selected_bg_color); } &:active { @include button(active,$c:$selected_bg_color); } &: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:selected { 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; } .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(resource:///org/gnome/shell/theme/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 { background-color: rgba(0,0,0,0.80); spacing: 4px; padding: 4px; border: 2px solid grey; border-radius: 4px; & > #Toolbar { border: 1px solid grey; border-radius: 4px; } .labels { spacing: 4px; } .notebook-tab { -natural-hpadding: 12px; -minimum-hpadding: 6px; font-weight: bold; color: #ccc; transition-duration: 100ms; padding-left: .3em; padding-right: .3em; &:hover { color: white; text-shadow: black 0px 2px 2px; } &:selected { border-bottom-width: 2px; border-color: lighten($selected_bg_color,5%); color: white; text-shadow: black 0px 2px 2px; } } StBoxLayout#EvalBox { padding: 4px; spacing: 4px; } StBoxLayout#ResultsArea { spacing: 4px; } } .lg-dialog { StEntry { selection-background-color: #bbbbbb; selected-color: #333333; } .shell-link { color: #999999; &:hover { color: #dddddd; } } } .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 #6f6f6f; border-radius: 4px; padding: 4px; } .lg-extension-name { font-weight: bold; } .lg-extension-meta { spacing: 6px; } #LookingGlassPropertyInspector { background: rgba(0, 0, 0, 0.8); border: 2px solid grey; border-radius: 4px; padding: 6px; } ================================================ FILE: gnome-shell/earlier-versions/gnome-shell.css ================================================ /***************** * Drawing mixins * *****************/ /* GLOBALS */ stage { font-size: 11pt; color: #d8dee9; } /* WIDGETS */ /* Buttons */ .button { color: #d8dee9; background-color: #343b49; box-shadow: none; border: 1px solid #343b49; border-radius: 4px; border-width: 0; padding: 4px 32px; } .button:focus { background-color: #3b4252; color: #fefefe; box-shadow: none !important; border: 1px solid #3b4252; } .button:insensitive { color: #838995; background-color: rgba(64, 70, 82, 0.66); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); border: none; text-shadow: none; icon-shadow: none; } .button:active { color: #fefefe; background-color: #81a1c1; border: 1px solid #1f232b; text-shadow: none; icon-shadow: none; } .button:hover { background-color: #3b4252; color: #fefefe; border: 1px solid #3b4252; } .modal-dialog-linked-button { padding: 10px; border: 1px solid #1f232b; color: #d8dee9; background: #232831; text-shadow: none; icon-shadow: none; box-shadow: none; } .modal-dialog-linked-button:insensitive { color: #838995; background-color: rgba(64, 70, 82, 0.66); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); border: none; text-shadow: none; icon-shadow: none; } .modal-dialog-linked-button:active { color: #fefefe; background-color: #81a1c1; border: 1px solid #1f232b; text-shadow: none; icon-shadow: none; } .modal-dialog-linked-button:focus { background-color: #3b4252; color: #fefefe; box-shadow: none !important; border: 1px solid #3b4252; } .modal-dialog-linked-button:focus:hover { background-color: #3b4252; color: #fefefe; box-shadow: none !important; border: 1px solid #3b4252; } .modal-dialog-linked-button:hover { background-color: #3b4252; color: #fefefe; border: 1px solid #3b4252; } .modal-dialog-linked-button:first-child { border-radius: 0px 0px 0px 2px; } .modal-dialog-linked-button:last-child { border-radius: 0px 0px 2px 0px; } .modal-dialog-linked-button:first-child:last-child { border-radius: 0px 0px 2px 2px; } /* Entries */ StEntry { background-color: #373e4c; border-color: #1f232b; border-radius: 2px; padding: 4px; border-width: 0; color: #d8dee9; selection-background-color: #81a1c1; selected-color: #fefefe; } StEntry:focus { border-color: rgba(129, 161, 193, 0.8); box-shadow: none !important; } StEntry:insensitive { color: #838995; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } StEntry StIcon.capslock-warning { icon-size: 16px; warning-color: #c3674a; padding: 0 4px; } StEntry StLabel.hint-text { color: rgba(216, 222, 233, 0.7); } /* Scrollbars */ StScrollView.vfade { -st-vfade-offset: 68px; } StScrollView.hfade { -st-hfade-offset: 68px; } StScrollBar { padding: 0; } StScrollView StScrollBar { min-width: 14px; min-height: 14px; } StScrollBar StBin#trough { border-radius: 0; background-color: transparent; } StScrollBar StButton#vhandle, StScrollBar StButton#hhandle { border-radius: 8px; background-color: #505662; margin: 3px; } StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover { background-color: #b6bcc7; } StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { background-color: #81a1c1; } /* Slider */ .slider { height: 1em; color: #fefefe; border-color: black; -slider-height: 0.3em; -slider-background-color: #4e586d; -slider-border-color: black; -slider-active-background-color: #81a1c1; -slider-active-border-color: #a3be8c; -slider-border-width: 0; -slider-handle-radius: 6px; -barlevel-height: 0.3em; -barlevel-background-color: #4e586d; -barlevel-border-color: black; -barlevel-active-background-color: #81a1c1; -barlevel-active-border-color: #a3be8c; -barlevel-border-width: 0; -barlevel-handle-radius: 6px; -barlevel-overdrive-color: #81a1c1; -barlevel-overdrive-border-color: transparent; -barlevel-overdrive-separator-width: 0px; } /* Check Boxes */ .check-box StBoxLayout { spacing: .8em; } .check-box StBin { width: 24px; height: 22px; background-image: url("assets/checkbox-off.svg"); } .check-box:focus, .check-box:hover StBin { background-image: url("assets/checkbox-off-focused.svg"); } .check-box:checked StBin { background-image: url("assets/checkbox.svg"); } .check-box:focus:checked StBin { background-image: url("assets/checkbox-focused.svg"); } /* Switches */ .toggle-switch { width: 65px; height: 22px; background-size: contain; background-image: url("assets/toggle-off.svg"); } .toggle-switch:checked { background-image: url("assets/toggle-on.svg"); } .toggle-switch-us { background-image: url("assets/toggle-off.svg"); } .toggle-switch-us:checked { background-image: url("assets/toggle-on.svg"); } .toggle-switch-intl { background-image: url("assets/toggle-off.svg"); } .toggle-switch-intl:checked { background-image: url("assets/toggle-on.svg"); } /* links */ .shell-link { color: #88c0d0; } .shell-link:hover { color: #add3de; } /* Modal Dialogs */ .headline { font-size: 110%; } .lightbox { background-color: black; } .flashspot { background-color: white; } .modal-dialog { border: none; border-radius: 2px; color: #d8dee9; background-color: rgba(35, 40, 49, 0.95); box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.2); } .modal-dialog .modal-dialog-content-box { padding: 24px; } .modal-dialog .run-dialog-entry { width: 20em; margin-bottom: 6px; } .modal-dialog .run-dialog-error-box { color: #b84f59; padding-top: 16px; spacing: 6px; } .modal-dialog .run-dialog-button-box { padding-top: 1em; } .modal-dialog .run-dialog-label { font-size: 12pt; font-weight: bold; color: #b7c2d7; padding-bottom: .4em; } .modal-dialog .run-dialog-description { color: #d8dee9; } .mount-dialog-subject, .end-session-dialog-subject { font-size: 14pt; } /* Message Dialog */ .message-dialog-main-layout { padding: 12px 20px 0; spacing: 12px; } .message-dialog-content { max-width: 28em; spacing: 20px; } .message-dialog-icon { min-width: 48px; icon-size: 48px; } .message-dialog-title { font-weight: bold; } .message-dialog-subtitle { color: #58709d; font-weight: bold; } /* End Session Dialog */ .end-session-dialog { spacing: 42px; border: none; } .end-session-dialog .modal-dialog-linked-button:last-child { background: #b84f59; } .end-session-dialog .modal-dialog-linked-button:last-child:hover, .end-session-dialog .modal-dialog-linked-button:last-child:focus { background: #bc5a63; color: #fff; } .end-session-dialog-list { padding-top: 20px; } .end-session-dialog-layout { padding-left: 17px; } .end-session-dialog-layout:rtl { padding-right: 17px; } .end-session-dialog-description { width: 28em; padding-bottom: 10px; } .end-session-dialog-description:rtl { text-align: right; } .end-session-dialog-warning { width: 28em; color: #c3674a; padding-top: 6px; } .end-session-dialog-warning:rtl { text-align: right; } .end-session-dialog-logout-icon { border-radius: 3px; width: 48px; height: 48px; background-size: contain; } .end-session-dialog-shutdown-icon { color: #b84f59; width: 48px; height: 48px; } .end-session-dialog-inhibitor-layout { spacing: 16px; max-height: 200px; padding-right: 65px; padding-left: 65px; } .end-session-dialog-session-list, .end-session-dialog-app-list { spacing: 1em; } .end-session-dialog-list-header { font-weight: bold; } .end-session-dialog-list-header:rtl { text-align: right; } .end-session-dialog-app-list-item, .end-session-dialog-session-list-item { spacing: 1em; } .end-session-dialog-app-list-item-name, .end-session-dialog-session-list-item-name { font-weight: bold; } .end-session-dialog-app-list-item-description { color: #c8d0e0; font-size: 10pt; } /* ShellMountOperation Dialogs */ .shell-mount-operation-icon { icon-size: 48px; } .mount-dialog { spacing: 24px; } .mount-dialog .message-dialog-title { padding-top: 10px; padding-left: 17px; padding-bottom: 6px; max-width: 34em; } .mount-dialog .message-dialog-title:rtl { padding-left: 0px; padding-right: 17px; } .mount-dialog .message-dialog-body { padding-left: 17px; width: 28em; } .mount-dialog .message-dialog-body:rtl { padding-left: 0px; padding-right: 17px; } .mount-dialog-app-list { max-height: 200px; padding-top: 24px; padding-left: 49px; padding-right: 32px; } .mount-dialog-app-list:rtl { padding-right: 49px; padding-left: 32px; } .mount-dialog-app-list-item { color: #b7c2d7; } .mount-dialog-app-list-item:hover { color: #d8dee9; } .mount-dialog-app-list-item:ltr { padding-right: 1em; } .mount-dialog-app-list-item:rtl { padding-left: 1em; } .mount-dialog-app-list-item-icon:ltr { padding-right: 17px; } .mount-dialog-app-list-item-icon:rtl { padding-left: 17px; } .mount-dialog-app-list-item-name { font-size: 10pt; } /* Password or Authentication Dialog */ .prompt-dialog { width: 34em; border: none; border-radius: 2px; } .prompt-dialog .message-dialog-main-layout { spacing: 24px; padding: 10px; } .prompt-dialog .message-dialog-content { spacing: 16px; } .prompt-dialog .message-dialog-title { color: #8699bb; } .prompt-dialog-description:rtl { text-align: right; } .prompt-dialog-password-box { spacing: 1em; padding-bottom: 1em; } .prompt-dialog-error-label { font-size: 10pt; color: #b84f59; padding-bottom: 8px; } .prompt-dialog-info-label { font-size: 10pt; padding-bottom: 8px; } .hidden { color: rgba(0, 0, 0, 0); } .prompt-dialog-null-label { font-size: 10pt; padding-bottom: 8px; } /* Polkit Dialog */ .polkit-dialog-user-layout { padding-left: 10px; spacing: 10px; } .polkit-dialog-user-layout:rtl { padding-left: 0px; padding-right: 10px; } .polkit-dialog-user-root-label { color: #c3674a; } .polkit-dialog-user-icon { border-radius: 3px; background-size: contain; width: 48px; height: 48px; } /* Audio selection dialog */ .audio-device-selection-dialog { spacing: 30px; } .audio-selection-content { spacing: 20px; padding: 24px; } .audio-selection-title { font-weight: bold; text-align: center; } .audio-selection-box { spacing: 20px; } .audio-selection-device { border: 1px solid #d8dee9; border-radius: 12px; } .audio-selection-device:active, .audio-selection-device:hover, .audio-selection-device:focus { background-color: #81a1c1; } .audio-selection-device-box { padding: 20px; spacing: 20px; } .audio-selection-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; } .extension-dialog .message-dialog-title { color: #8699bb; } /* 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; } /* Popovers/Menus */ .popup-menu { min-width: 15em; background-color: transparent; color: #d8dee9; } .popup-menu .popup-sub-menu { background-color: rgba(0, 0, 0, 0.2); box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.2); } .popup-menu .popup-menu-content { padding: 16px 0; background-color: #2e3440; border-radius: 5px; } .popup-menu .popup-menu-item { spacing: 6px; padding: 6px; } .popup-menu .popup-menu-item:ltr { padding-right: 1.75em; padding-left: 0; } .popup-menu .popup-menu-item:rtl { padding-right: 0; padding-left: 1.75em; } .popup-menu .popup-menu-item:checked { background-color: rgba(129, 161, 193, 0.9); color: #fefefe; box-shadow: inset 0 1px 0px #2a2f3a; font-weight: bold; } .popup-menu .popup-menu-item:checked:hover { background-color: rgba(129, 161, 193, 0.9); color: #fefefe; } .popup-menu .popup-menu-item.selected { background-color: rgba(216, 222, 233, 0.1); color: #d8dee9; } .popup-menu .popup-menu-item:active { background-color: #81a1c1; color: #fefefe; } .popup-menu .popup-menu-item:insensitive { color: rgba(216, 222, 233, 0.5); } .popup-menu .popup-inactive-menu-item { color: #d8dee9; } .popup-menu .popup-inactive-menu-item:insensitive { color: rgba(216, 222, 233, 0.5); } .popup-menu.panel-menu { -boxpointer-gap: 4px; margin-bottom: 1.75em; } .popup-menu-ornament { text-align: right; width: 1.2em; } .popup-menu-boxpointer, .candidate-popup-boxpointer { -arrow-border-radius: 5px; -arrow-background-color: #2e3440; -arrow-border-width: 1px; -arrow-border-color: #1f232b; -arrow-base: 24px; -arrow-rise: 11px; -arrow-box-shadow: 0 1px 3px black; } .popup-separator-menu-item-separator { height: 1px; margin: 6px 64px; background-color: transparent; border-color: transparent; border-bottom-width: 1px; border-bottom-style: solid; } .popup-sub-menu .popup-separator-menu-item .popup-separator-menu-item-separator { margin: 0 64px 0 32px; background: transparent; } .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; margin: 32px; min-width: 64px; min-height: 64px; } .osd-window .osd-monitor-label { font-size: 3em; } .osd-window .level { height: 0.4em; border-radius: 0.3em; color: #d8dee9; border: 1px solid #1f232b; -barlevel-height: 0.4em; -barlevel-background-color: rgba(3, 4, 5, 0.5); -barlevel-active-background-color: #81a1c1; -barlevel-overdrive-color: #bf616a; -barlevel-overdrive-separator-width: 0.2em; } .osd-window .level-bar { background-color: #81a1c1; border-radius: 0.3em; } /* Pad OSD */ .pad-osd-window { padding: 32px; background-color: rgba(0, 0, 0, 0.8); } .pad-osd-window .pad-osd-title-box { spacing: 12px; } .pad-osd-window .pad-osd-title-menu-box { spacing: 6px; } .combo-box-label { width: 15em; } /* App Switcher */ .switcher-popup { padding: 8px; spacing: 16px; } .switcher-list-item-container { spacing: 8px; } .switcher-list .item-box { padding: 8px; border-radius: 4px; } .switcher-list .item-box:outlined { padding: 6px; border: 2px solid #0a0b0e; } .switcher-list .item-box:selected { background-color: #81a1c1; color: #fefefe; } .switcher-list .thumbnail-box { padding: 2px; spacing: 4px; } .switcher-list .thumbnail { width: 256px; } .switcher-list .separator { width: 1px; background: #1f232b; } .switcher-arrow { border-color: rgba(0, 0, 0, 0); color: rgba(216, 222, 233, 0.8); } .switcher-arrow:highlighted { color: #d8dee9; } .input-source-switcher-symbol { font-size: 34pt; width: 96px; height: 96px; } /* Window Cycler */ .cycler-highlight { border: 5px solid #81a1c1; } /* Workspace Switcher */ .workspace-switcher-group { padding: 12px; } .workspace-switcher { background: transparent; border: 0px; border-radius: 0px; padding: 0px; spacing: 8px; } .ws-switcher-active-up, .ws-switcher-active-down, .ws-switcher-active-left, .ws-switcher-active-right { height: 50px; background-color: #81a1c1; color: #fefefe; background-size: 32px; border-radius: 8px; border-color: #81a1c1; } .ws-switcher-active-up { background-image: url("assets/ws-switch-arrow-up.png"); } .ws-switcher-active-down { background-image: url("assets/ws-switch-arrow-down.png"); } .ws-switcher-box { height: 50px; border: 1px solid rgba(216, 222, 233, 0.1); background: rgba(25, 28, 34, 0.95); border-radius: 8px; } .osd-window, .resize-popup, .switcher-list, .workspace-switcher-container { color: #d8dee9; background-color: rgba(46, 52, 64, 0.95); border: 1px solid #1f232b; box-shadow: 0px 0px 5px #1f232b; border-radius: 5px; padding: 12px; } /* Tiled window previews */ .tile-preview { background-color: rgba(129, 161, 193, 0.5); border: 1px solid #81a1c1; } .tile-preview-left.on-primary { border-radius: 2px 2px 0 0; } .tile-preview-right.on-primary { border-radius: 0 2px 0 0; } .tile-preview-left.tile-preview-right.on-primary { border-radius: 2px 2px 0 0; } /* TOP BAR */ #panel { background-gradient-direction: none; background-color: #1d2128; /* transition from solid to transparent */ transition-duration: 500ms; font-weight: bold; height: 1.86em; padding: 0px 0px; } #panel.unlock-screen, #panel.login-screen, #panel.lock-screen { background-color: transparent; } #panel #panelLeft, #panel #panelCenter { spacing: 4px; } #panel .panel-corner { -panel-corner-radius: 0px; -panel-corner-background-color: rgba(0, 0, 0, 0.2); -panel-corner-border-width: 2px; -panel-corner-border-color: transparent; } #panel .panel-corner:active, #panel .panel-corner:overview, #panel .panel-corner:focus { -panel-corner-border-color: #92aec9; } #panel .panel-corner.lock-screen, #panel .panel-corner.login-screen, #panel .panel-corner.unlock-screen { -panel-corner-radius: 0; -panel-corner-background-color: transparent; -panel-corner-border-color: transparent; } #panel .panel-button { -natural-hpadding: 12px; -minimum-hpadding: 6px; font-weight: bold; color: #d8dee9; transition-duration: 100ms; } #panel .panel-button .app-menu-icon { -st-icon-style: symbolic; margin-left: 4px; margin-right: 4px; } #panel .panel-button:hover { background: #323946; color: #f9fafb; } #panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked { background: #81a1c1; box-shadow: inset 0 -2px 0px #92aec9; color: #fff; } #panel .panel-button .system-status-icon { icon-size: 1.09em; padding: 0 5px; } .unlock-screen #panel .panel-button, .login-screen #panel .panel-button, .lock-screen #panel .panel-button { color: #f9fafb; } .unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen #panel .panel-button:active, .login-screen #panel .panel-button:focus, .login-screen #panel .panel-button:hover, .login-screen #panel .panel-button:active, .lock-screen #panel .panel-button:focus, .lock-screen #panel .panel-button:hover, .lock-screen #panel .panel-button:active { color: #f9fafb; } #panel .panel-button.clock-display:active, #panel .panel-button.clock-display:overview, #panel .panel-button.clock-display:focus, #panel .panel-button.clock-display:checked { box-shadow: none; } #panel .panel-button.clock-display:active .clock, #panel .panel-button.clock-display:overview .clock, #panel .panel-button.clock-display:focus .clock, #panel .panel-button.clock-display:checked .clock { box-shadow: none; } #panel .panel-status-indicators-box, #panel .panel-status-menu-box { spacing: 2px; } #panel .power-status.panel-status-indicators-box { spacing: 0; } #panel .screencast-indicator { color: #c3674a; } #panel.solid { background-color: #1d2128; /* transition from transparent to solid */ transition-duration: 300ms; } #panel.solid .panel-corner { -panel-corner-background-color: black; } #panel.solid .system-status-icon, #panel.solid .app-menu-icon > StIcon, #panel.solid .popup-menu-arrow { icon-shadow: none; } #calendarArea { padding: 0.75em 1.0em; } .calendar { margin-bottom: 1em; } .calendar, .world-clocks-button, .weather-button, .events-button { background: transparent; border: none; } .calendar, .datemenu-today-button, .datemenu-displays-box, .message-list-sections { margin: 0 1.5em; } .datemenu-calendar-column { spacing: 0.5em; } .datemenu-displays-section { padding-bottom: 3em; } .datemenu-displays-box { spacing: 1em; } .datemenu-calendar-column { border: 0 solid transparent; } .datemenu-calendar-column:ltr { border-left-width: 1px; } .datemenu-calendar-column:rtl { border-right-width: 1px; } .datemenu-today-button, .world-clocks-button, .weather-button, .events-section-title, .message-list-section-title, .events-button { border-radius: 4px; color: #d8dee9; padding: .4em; } .message-list-section-list:ltr { padding-left: .4em; } .message-list-section-list:rtl { padding-right: .4em; } .datemenu-today-button:hover, .datemenu-today-button:focus, .world-clocks-button:hover, .world-clocks-button:focus, .weather-button:hover, .weather-button:focus, .events-section-title:hover, .events-section-title:focus, .message-list-section-title:hover, .message-list-section-title:focus, .events-button:hover, .events-button:focus { background-color: #39404f; } .datemenu-today-button:active, .world-clocks-button:active, .weather-button:active, .events-section-title:active, .message-list-section-title:active, .events-button:active { color: white; background-color: #81a1c1; } .datemenu-today-button .date-label { font-size: 1.5em; } .world-clocks-header, .weather-header, .events-section-title, .message-list-section-title, .events-title { color: #58709d; font-weight: bold; } .events-button .event-time { color: #cbd3e2; } .world-clocks-grid { spacing-rows: 0.4em; } .weather-box { spacing: 0.4em; } .calendar-month-label { color: #c8d0e0; font-weight: bold; padding: 8px 0; } .pager-button { color: white; background-color: transparent; width: 32px; border-radius: 4px; } .pager-button:hover, .pager-button:focus { background-color: rgba(216, 222, 233, 0.05); } .pager-button:active { background-color: rgba(46, 52, 64, 0.05); } .calendar-change-month-back { background-image: url("assets/calendar-arrow-left.svg"); } .calendar-change-month-back:rtl { background-image: url("assets/calendar-arrow-right.svg"); } .calendar-change-month-forward { background-image: url("assets/calendar-arrow-right.svg"); } .calendar-change-month-forward:rtl { background-image: url("assets/calendar-arrow-left.svg"); } .calendar-change-month-back StIcon, .calendar-change-month-forward StIcon { color: #c1cbdc; } .calendar-day-base { font-size: 80%; text-align: center; width: 2.4em; height: 2.4em; padding: 0.1em; margin: 2px; border-radius: 1.4em; color: #d8dee9; } .calendar-day-base:hover, .calendar-day-base:focus { background-color: #39404f; } .calendar-day-base:active, .calendar-day-base:selected { color: white; background-color: #81a1c1; border-color: transparent; } .calendar-day-base.calendar-day-heading { color: #58709d; margin-top: 1em; font-size: 70%; } .calendar-day { border-width: 0; } .calendar-day-top { border-top-width: 1px; } .calendar-day-left { border-left-width: 1px; } .calendar-nonwork-day { color: #838995; } .calendar-today { font-weight: bold; border: 1px solid rgba(31, 35, 43, 0.5); } .calendar-day-with-events { color: #f9fafb; font-weight: bold; background-image: url("assets/calendar-today.svg"); } .calendar-other-month-day { color: #838995; opacity: 0.5; } .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: rgba(216, 222, 233, 0.3); color: #2e3440; } /* Message list */ .message-list { width: 31.5em; } .message-list .message-title, .message-list .message-content, .message-list .message-body { color: #c8d0e0; } .message-list-clear-button.button { border: 1px solid #1f232b; box-shadow: none; margin: 1.5em 1.5em 0; } .message-list-clear-button.button:hover, .message-list-clear-button.button:focus { background-color: #39404f; } .message-list-sections { spacing: 1em; } .message-list-section, .message-list-section-list { spacing: 0.4em; } .message-list-section-close > StIcon { icon-size: 16px; border-radius: 16px; padding: 8px; color: #d8dee9; background-color: transparent; } .message-list-section-close:hover > StIcon, .message-list-section-close:focus > StIcon .message-list-section-close:active > StIcon { color: #bf616a; background: transparent; } .message { border: 1px solid #1f232b; border-radius: 3px; background: #2d323e; box-shadow: none; } .message:hover, .message:focus { background-color: #323946; box-shadow: 3px 0px 0px 0px #81a1c1 inset; } .message-icon-bin { padding: 10px 3px 10px 10px; } .message-icon-bin:rtl { padding: 10px 10px 10px 3px; } .message-icon-bin > StIcon { icon-size: 16px; -st-icon-style: symbolic; } .message-secondary-bin { padding: 0 12px; } .message-secondary-bin > .event-time { color: #a7b5cd; font-size: 0.7em; /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */ padding-bottom: 0.13em; } .message-secondary-bin > StIcon { icon-size: 16px; } .message-content { padding: 10px; } .message-content *:hover > StIcon, .message-content *:focus > StIcon { color: #bf616a; } .message-media-control { padding: 12px; color: #97a7c4; } .message-media-control:last-child:ltr { padding-right: 18px; } .message-media-control:last-child:rtl { padding-left: 18px; } .message-media-control:hover { color: #d8dee9; } .message-media-control:insensitive { color: #58709d; } .media-message-cover-icon { icon-size: 48px !important; } .media-message-cover-icon.fallback { color: #434c5e; background-color: #2e3440; border: 2px solid #2e3440; border-radius: 2px; icon-size: 16px; padding: 8px; } /* World clocks */ .world-clocks-button .world-clocks-city { color: #d8dee9; font-weight: normal; } .world-clocks-button .world-clocks-time { font-weight: bold; color: #d8dee9; font-feature-settings: "lnum"; text-align: right; } .world-clocks-button .world-clocks-timezone { color: #97a7c4; font-feature-settings: "tnum"; } /* Weather */ .weather-button .weather-header { color: #b7c2d7; font-weight: bold; } .weather-button .weather-header.location { font-weight: normal; } .weather-button .weather-forecast-time { color: #b7c2d7; font-feature-settings: "tnum"; font-weight: normal; padding-top: 0.2em; padding-bottom: 0.4em; } .weather-button .weather-forecast-temp { font-weight: bold; } .system-switch-user-submenu-icon.user-icon { icon-size: 20px; padding: 0 2px; } .system-switch-user-submenu-icon.default-icon { icon-size: 16px; padding: 0 4px; } #appMenu { spinner-image: url("assets/process-working.svg"); spacing: 4px; } #appMenu .label-shadow { color: transparent; } .aggregate-menu { min-width: 21em; } .aggregate-menu .popup-menu-icon { padding: 0 4px; } .system-menu-action { color: #d8dee9; border-radius: 32px; /* wish we could do 50% */ border: 1px solid #1f232b; background: #282d37; padding: 13px; } .system-menu-action:hover, .system-menu-action:focus { border: 1px solid #81a1c1; color: #81a1c1; background: transparent; } .system-menu-action:active { background-color: #5f88b0; color: #fefefe; } .system-menu-action > StIcon { icon-size: 16px; } .ripple-box { width: 52px; height: 52px; background-image: url("assets/corner-ripple-ltr.png"); background-size: contain; } .ripple-box:rtl { background-image: url("assets/corner-ripple-rtl.png"); } .popup-menu-arrow { width: 16px; height: 16px; } .popup-menu-icon { icon-size: 1.09em; } .window-close { background-color: transparent; background-image: url("assets/close-window.svg"); background-size: 32px; border: none; box-shadow: none; color: transparent; height: 32px; width: 32px; } .window-close { -shell-close-overlap: 16px; } .window-close:rtl { -st-background-image-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5); } /* NETWORK DIALOGS */ .nm-dialog { max-height: 34em; min-height: 31em; min-width: 32em; } .nm-dialog-content { spacing: 20px; padding: 24px; } .nm-dialog-header-hbox { spacing: 10px; } .nm-dialog-airplane-box { spacing: 12px; } .nm-dialog-airplane-headline { font-weight: bold; text-align: center; } .nm-dialog-airplane-text { color: #d8dee9; } .nm-dialog-header-icon { icon-size: 32px; } .nm-dialog-scroll-view { border: 2px solid #1f232b; background: transparent; } .nm-dialog-header { font-weight: bold; } .nm-dialog-item { font-size: 110%; border-bottom: 1px solid #1f232b; padding: 12px; spacing: 20px; } .nm-dialog-item:selected { background-color: #81a1c1; color: #fefefe; } .nm-dialog-icons { spacing: .5em; } .nm-dialog-icon { icon-size: 16px; } .no-networks-label { color: #999999; } .no-networks-box { spacing: 12px; } /* OVERVIEW */ #overview { spacing: 24px; } #overview.cosmic-solid-bg { background-color: #1d2128 !important; } .overview-controls { padding-bottom: 32px; } .window-picker { -horizontal-spacing: 16px; -vertical-spacing: 16px; padding: 0 16px 16px; } .window-picker.external-monitor { padding: 16px; } .window-clone-border { border: 4px solid rgba(129, 161, 193, 0.3); border-radius: 0px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); } .window-caption { spacing: 20px; color: #d8dee9; background-color: rgba(46, 52, 64, 0.65); border-radius: 2px; padding: 4px 8px; } .search-entry { width: 320px; padding: 9px; border-radius: 2px; border: none; color: #d8dee9; background-color: rgba(46, 52, 64, 0.6); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .search-entry:focus { border-width: 0; color: #d8dee9; background-color: rgba(46, 52, 64, 0.8); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } .search-entry .search-entry-icon { icon-size: 1em; padding: 0 4px; color: rgba(216, 222, 233, 0.7); } .search-entry:hover, .search-entry:focus { background-color: rgba(46, 52, 64, 0.8); } .search-entry:hover .search-entry-icon, .search-entry:focus .search-entry-icon { color: #d8dee9; } .search-provider-icon:focus, .list-search-result:focus, .search-provider-icon:hover, .list-search-result:hover, .search-provider-icon:selected, .list-search-result:selected { background-color: rgba(216, 222, 233, 0.1); transition-duration: 200ms; } .search-provider-icon:active, .list-search-result:active, .search-provider-icon:checked, .list-search-result:checked { background-color: rgba(25, 28, 34, 0.85); } #searchResultsBin { max-width: 1000px; } #searchResultsContent { padding-left: 20px; padding-right: 20px; spacing: 16px; } .search-section { spacing: 16px; } .search-section-content { background-color: transparent; border-radius: 0; border: none; box-shadow: none; spacing: 32px; } .list-search-results { spacing: 3px; } .search-section-separator { height: 2px; background-color: #4e586d; } .list-search-result-content { spacing: 30px; } .list-search-result-title { color: #e8ecf2; spacing: 12px; } .list-search-result-description { color: rgba(255, 255, 255, 0.5); } .list-search-provider-details { width: 150px; color: #e8ecf2; margin-top: 0.24em; } .list-search-provider-content { spacing: 20px; } .search-provider-icon { padding: 15px; } /* DASHBOARD */ #dash { font-size: 9pt; color: #d8dee9; background-color: #1d2128; padding: 6px 0; border: 1px solid #1f232b; border-left: 0px; border-radius: 0px 5px 5px 0px; } #dash:rtl { border-radius: 9px 0 0 9px; } #dash .placeholder { background-image: url("assets/dash-placeholder.svg"); background-size: contain; height: 24px; } #dash .empty-dash-drop-target { width: 24px; height: 24px; } .dash-item-container > StWidget { padding: 4px 8px; } .dash-label { border-radius: 7px; padding: 4px 12px; color: #d8dee9; background-color: #1d2128; text-align: center; -x-offset: 8px; } /* App Vault/Grid */ .icon-grid { spacing: 30px; -shell-grid-horizontal-item-size: 136px; -shell-grid-vertical-item-size: 136px; } .icon-grid .overview-icon { icon-size: 96px; } .system-action-icon { background-color: black; color: white; border-radius: 99px; icon-size: 48px; } .app-view-controls { padding-bottom: 32px; } .app-view-control { padding: 4px 32px; } .app-view-control:checked { color: #fefefe; background-color: #81a1c1; border: 1px solid #1f232b; text-shadow: none; icon-shadow: none; } .app-view-control:first-child { border-right-width: 0; border-radius: 3px 0 0 3px; } .app-view-control:last-child { border-radius: 0 3px 3px 0; } .app-well-app, .app-well-app.app-folder, .show-apps, .grid-search-result { border: none; } .app-well-app:active .overview-icon, .app-well-app:checked .overview-icon, .app-well-app.app-folder:active .overview-icon, .app-well-app.app-folder:checked .overview-icon, .show-apps:active .overview-icon, .show-apps:checked .overview-icon, .grid-search-result:active .overview-icon, .grid-search-result:checked .overview-icon { background-color: rgba(31, 35, 43, 0.85); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); color: #d8dee9; } .app-well-app:hover .overview-icon, .app-well-app:focus .overview-icon, .app-well-app:selected .overview-icon, .app-well-app.app-folder:hover .overview-icon, .app-well-app.app-folder:focus .overview-icon, .app-well-app.app-folder:selected .overview-icon, .show-apps:hover .overview-icon, .show-apps:focus .overview-icon, .show-apps:selected .overview-icon, .grid-search-result:hover .overview-icon, .grid-search-result:focus .overview-icon, .grid-search-result:selected .overview-icon { background-color: rgba(46, 52, 64, 0.5); transition-duration: 0ms; border-image: none; background-image: none; } .app-well-app-running-dot { width: 4px; height: 4px; background-color: #81a1c1; border-radius: 10px !important; box-shadow: 0px 0px 5px 4px rgba(129, 161, 193, 0.8); margin-bottom: 0px; } .app-well-app .overview-icon, .app-well-app.app-folder .overview-icon, .show-apps .overview-icon, .grid-search-result .overview-icon { color: #fefefe; border-radius: 2px; padding: 7px 6px; border: none; transition-duration: 100ms; text-align: center; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .app-well-app.app-folder > .overview-icon { background-color: rgba(46, 52, 64, 0.35); } .show-apps .show-apps-icon { color: #d8dee9; } .show-apps:checked .show-apps-icon, .show-apps:focus .show-apps-icon { color: #d8dee9; transition-duration: 100ms; } .app-folder-popup { -arrow-border-radius: 8px; -arrow-background-color: rgba(46, 52, 64, 0.5); -arrow-base: 24px; -arrow-rise: 11px; } .app-folder-popup-bin { padding: 5px; background: rgba(46, 52, 64, 0.5); } .app-folder-icon { padding: 5px; spacing-rows: 5px; spacing-columns: 5px; } .page-indicator { padding: 15px 20px; } .page-indicator .page-indicator-icon { width: 12px; height: 12px; border-radius: 12px; background-image: none; background-color: rgba(255, 255, 255, 0.3); } .page-indicator:hover .page-indicator-icon { background-image: none; background-color: rgba(255, 255, 255, 0.5); } .page-indicator:active .page-indicator-icon { background-image: none; background-color: rgba(255, 255, 255, 0.7); } .page-indicator:checked .page-indicator-icon { background-image: none; background-color: #FFFFFF; transition-duration: 0s; } .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-thumbnails { visible-width: 32px; spacing: 11px; padding: 8px; border-radius: 0; } .workspace-thumbnails:rtl { border-radius: 0; } .workspace-thumbnail-indicator { border: 4px solid rgba(129, 161, 193, 0.8); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); padding: 0; } .search-display > StBoxLayout, .all-apps, .frequent-apps > StBoxLayout { padding: 0px 88px 10px 88px; } .workspace-thumbnails { color: #d8dee9; background-color: transparent; border: none; } .search-statustext, .no-frequent-applications-label { font-size: 2em; font-weight: bold; color: #d8dee9; } /* NOTIFICATIONS & MESSAGE TRAY */ .url-highlighter { link-color: #a3bbd2; } .notification-banner { font-size: 11pt; width: 34em; margin: 5px; border-radius: 3px; color: #d8dee9; background-color: #2e3440; border: 1px solid #1f232b; box-shadow: 0 1px 4px black; } .notification-banner:hover { background-color: rgba(46, 52, 64, 0.96); } .notification-banner:focus { background-color: rgba(46, 52, 64, 0.96); } .notification-banner * { color: #d8dee9; } .notification-banner .notification-icon { padding: 5px; } .notification-banner .notification-content { padding: 5px; spacing: 5px; } .notification-banner .secondary-icon { icon-size: 1.09em; } .notification-banner .notification-actions { background-color: #2a2f3a; padding-top: 2px; spacing: 1px; } .notification-banner .notification-button { padding: 5px; background-color: rgba(46, 52, 64, 0.9); box-shadow: none; } .notification-banner .notification-button:first-child { border-radius: 0 0 0 3px; } .notification-banner .notification-button:last-child { border-radius: 0 0 3px 0; } .notification-banner .notification-button:hover, .notification-banner .notification-buttonfocus { background-color: #2a2f3a; color: #81a1c1; } .summary-source-counter { font-size: 10pt; font-weight: bold; height: 1.6em; width: 1.6em; -shell-counter-overlap-x: 3px; -shell-counter-overlap-y: 3px; background-color: #81a1c1; color: #fefefe; border: 2px solid #d8dee9; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); border-radius: 0.9em; } .secondary-icon { icon-size: 1.09em; } .chat-body { spacing: 5px; } .chat-response { margin: 5px; } .chat-log-message { color: #b7c2d7; } .chat-new-group { padding-top: 1em; } .chat-received { padding-left: 4px; } .chat-received:rtl { padding-left: 0px; padding-right: 4px; } .chat-sent { padding-left: 18pt; color: #a7b5cd; } .chat-sent:rtl { padding-left: 0; padding-right: 18pt; } .chat-meta-message { padding-left: 4px; font-size: 9pt; font-weight: bold; color: #97a7c4; } .chat-meta-message:rtl { padding-left: 0; padding-right: 4px; } .hotplug-transient-box { spacing: 6px; padding: 2px 72px 2px 12px; } .hotplug-notification-item { padding: 2px 10px; } .hotplug-notification-item:focus { padding: 1px 71px 1px 11px; } .hotplug-notification-item-icon { icon-size: 24px; padding: 2px 5px; } .hotplug-resident-box { spacing: 8px; } .hotplug-resident-mount { spacing: 8px; border-radius: 4px; } .hotplug-resident-mount:hover { background-color: rgba(46, 52, 64, 0.3); } .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 */ .magnifier-zoom-region { border: 2px solid #81a1c1; } .magnifier-zoom-region.full-screen { border-width: 0; } /* On-screen Keyboard */ #keyboard { background-color: rgba(46, 52, 64, 0.65); } .keyboard-layout { spacing: 10px; padding: 10px; } .keyboard-row { spacing: 15px; } .keyboard-key { color: #d8dee9; background-color: #343b49; box-shadow: none; border: 1px solid #343b49; background-color: #2e3440; min-height: 2em; min-width: 2em; font-size: 14pt; font-weight: bold; border-radius: 5px; } .keyboard-key:focus { background-color: #3b4252; color: #fefefe; box-shadow: none !important; border: 1px solid #3b4252; } .keyboard-key:hover, .keyboard-key:checked { background-color: #3b4252; color: #fefefe; border: 1px solid #3b4252; } .keyboard-key:active { color: #fefefe; background-color: #81a1c1; border: 1px solid #1f232b; text-shadow: none; icon-shadow: none; } .keyboard-key:grayed { background-color: rgba(46, 52, 64, 0.95); color: #d8dee9; border-color: rgba(0, 0, 0, 0.7); } .keyboard-subkeys { color: white; padding: 5px; -arrow-border-radius: 10px; -arrow-background-color: rgba(46, 52, 64, 0.65); -arrow-border-width: 2px; -arrow-border-color: #d8dee9; -arrow-base: 20px; -arrow-rise: 10px; -boxpointer-gap: 5px; } .candidate-popup-content { padding: 0.5em; spacing: 0.3em; } .candidate-index { padding: 0 0.5em 0 0; color: #b7c2d7; } .candidate-box { padding: 0.3em 0.5em 0.3em 0.5em; border-radius: 4px; } .candidate-box:selected, .candidate-box:hover { background-color: #81a1c1; color: #fefefe; } .candidate-page-button-box { height: 2em; } .vertical .candidate-page-button-box { padding-top: 0.5em; } .horizontal .candidate-page-button-box { padding-left: 0.5em; } .candidate-page-button { padding: 4px; } .candidate-page-button-previous { border-radius: 4px 0px 0px 4px; border-right-width: 0; } .candidate-page-button-next { border-radius: 0px 4px 4px 0px; } .candidate-page-button-icon { icon-size: 1em; } /* Auth Dialogs & Screen Shield */ .framed-user-icon { background-size: contain; border: 2px solid #d8dee9; color: #d8dee9; border-radius: 3px; } .framed-user-icon:hover { border-color: white; color: white; } .login-dialog-banner-view { padding-top: 24px; max-width: 23em; } .login-dialog { border: none; background-color: transparent; } .login-dialog .modal-dialog-button-box { spacing: 3px; } .login-dialog .modal-dialog-button { padding: 3px 18px; } .login-dialog .modal-dialog-button:default { color: #d8dee9; background-color: #343b49; box-shadow: none; border: 1px solid #343b49; } .login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus { background-color: #3b4252; color: #fefefe; border: 1px solid #3b4252; } .login-dialog .modal-dialog-button:default:active { color: #fefefe; background-color: #81a1c1; border: 1px solid #1f232b; text-shadow: none; icon-shadow: none; } .login-dialog .modal-dialog-button:default:insensitive { color: #838995; background-color: rgba(64, 70, 82, 0.66); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); border: none; text-shadow: none; icon-shadow: none; } .login-dialog-logo-bin { padding: 24px 0px; } .login-dialog-banner { color: #b7c2d7; } .login-dialog-button-box { spacing: 5px; } .login-dialog-message-warning { color: #c3674a; } .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-label, .login-dialog-not-listed-button:hover .login-dialog-not-listed-label { color: #d8dee9; } .login-dialog-not-listed-label { font-size: 90%; font-weight: bold; color: #768bb2; padding-top: 1em; } .login-dialog-user-list-view { -st-vfade-offset: 1em; } .login-dialog-user-list { spacing: 12px; padding: .2em; width: 23em; } .login-dialog-user-list:expanded .login-dialog-user-list-item:selected { background-color: #81a1c1; color: #fefefe; } .login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in { border-right: 2px solid #81a1c1; } .login-dialog-user-list-item { border-radius: 5px; padding: .2em; color: #768bb2; } .login-dialog-user-list-item:ltr { padding-right: 1em; } .login-dialog-user-list-item:rtl { padding-left: 1em; } .login-dialog-user-list-item .login-dialog-timed-login-indicator { height: 2px; margin: 2px 0 0 0; background-color: #d8dee9; } .login-dialog-user-list-item:focus .login-dialog-timed-login-indicator { background-color: #fefefe; } .login-dialog-username, .user-widget-label { color: #d8dee9; font-size: 120%; font-weight: bold; text-align: left; padding-left: 15px; } .user-widget-label:ltr { padding-left: 18px; } .user-widget-label:rtl { padding-right: 18px; } .login-dialog-prompt-layout { padding-top: 24px; padding-bottom: 12px; spacing: 8px; width: 23em; } .login-dialog-prompt-label { color: #97a7c4; font-size: 110%; padding-top: 1em; } .login-dialog-session-list-button StIcon { icon-size: 1.25em; } .login-dialog-session-list-button { color: #768bb2; } .login-dialog-session-list-button:hover, .login-dialog-session-list-button:focus { color: #d8dee9; } .login-dialog-session-list-button:active { color: #46597c; } .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; } .screen-shield-notifications-container .summary-notification-stack-scrollview { padding-top: 0; padding-bottom: 0; } .screen-shield-notifications-container .notification, .screen-shield-notifications-container .screen-shield-notification-source { padding: 12px 6px; border: 1px solid #d8dee9; background-color: rgba(46, 52, 64, 0.45); color: #d8dee9; border-radius: 4px; } .screen-shield-notifications-container .notification { margin-right: 15px; } .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: rgba(46, 52, 64, 0.45); } .screen-shield-background { background: black; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4); } #lockDialogGroup { background: #2e3436 url(resource:///org/gnome/shell/theme/noise-texture.png); background-repeat: repeat; } #screenShieldNotifications StButton#vhandle, #screenShieldNotifications StButton#hhandle { background-color: rgba(46, 52, 64, 0.3); } #screenShieldNotifications StButton#vhandle:hover, #screenShieldNotifications StButton#vhandle:focus, #screenShieldNotifications StButton#hhandle:hover, #screenShieldNotifications StButton#hhandle:focus { background-color: rgba(46, 52, 64, 0.5); } #screenShieldNotifications StButton#vhandle:active, #screenShieldNotifications StButton#hhandle:active { background-color: rgba(129, 161, 193, 0.5); } #LookingGlassDialog { background-color: rgba(0, 0, 0, 0.8); spacing: 4px; padding: 4px; border: 2px solid grey; border-radius: 4px; } #LookingGlassDialog > #Toolbar { border: 1px solid grey; border-radius: 4px; } #LookingGlassDialog .labels { spacing: 4px; } #LookingGlassDialog .notebook-tab { -natural-hpadding: 12px; -minimum-hpadding: 6px; font-weight: bold; color: #ccc; transition-duration: 100ms; padding-left: .3em; padding-right: .3em; } #LookingGlassDialog .notebook-tab:hover { color: white; text-shadow: black 0px 2px 2px; } #LookingGlassDialog .notebook-tab:selected { border-bottom-width: 2px; border-color: #92aec9; color: white; text-shadow: black 0px 2px 2px; } #LookingGlassDialog StBoxLayout#EvalBox { padding: 4px; spacing: 4px; } #LookingGlassDialog StBoxLayout#ResultsArea { spacing: 4px; } .lg-dialog StEntry { selection-background-color: #bbbbbb; selected-color: #333333; } .lg-dialog .shell-link { color: #999999; } .lg-dialog .shell-link:hover { color: #dddddd; } .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; } .lg-obj-inspector-button:hover { border: 1px solid #ffffff; } #lookingGlassExtensions { padding: 4px; } .lg-extensions-list { padding: 4px; spacing: 6px; } .lg-extension { border: 1px solid #6f6f6f; border-radius: 4px; padding: 4px; } .lg-extension-name { font-weight: bold; } .lg-extension-meta { spacing: 6px; } #LookingGlassPropertyInspector { background: rgba(0, 0, 0, 0.8); border: 2px solid grey; border-radius: 4px; padding: 6px; } .openweather-current-summarybox, .openweather-forecast-icon, .openweather-current-databox-captions, .openweather-current-databox-values, .openweather-current-icon, .openweather-forecast-summary, .openweather-forecast-temperature { background: transparent; } .openweather-current-databox-captions, .openweather-forecast-day { color: #81a1c1; } /* Pop_OS COSMIC Widget styling. */ /* Pop_OS COSMIC Dock styling, append !important to any changed rules */ .cosmic-dock #dock { border-radius: 12px 12px 12px 12px !important; border: 0 !important; background-color: #2e3440; margin: 4px !important; } .cosmic-dock.extended #dock { border-radius: 0px !important; margin: 0 !important; } .cosmic-dock.extended.side #dock { border-top-width: 0 !important; border-bottom-width: 0 !important; } .cosmic-dock.extended.side.left #dock { border-left-width: 0 !important; } .cosmic-dock.extended.side.right #dock { border-right-width: 0 !important; } .cosmic-dock.extended.bottom #dock { border-bottom-width: 0 !important; border-left-width: 0 !important; border-right-width: 0 !important; } .cosmic-dock .app-well-app:hover .overview-icon, .cosmic-dock .app-well-app:focus .overview-icon, .cosmic-dock .app-well-app:selected .overview-icon { border-radius: 11px; } /*# sourceMappingURL=gnome-shell.css.map */ ================================================ FILE: gnome-shell/earlier-versions/gnome-shell.scss ================================================ $subtheme: 'main'; @import "../colors"; //use gtk colors @import "../drawing"; @import "common"; @import "../extensions"; @import "../cosmic"; ================================================ FILE: gnome-shell/extensions/_openweather.scss ================================================ .openweather-current-summarybox, .openweather-forecast-icon, .openweather-current-databox-captions, .openweather-current-databox-values, .openweather-current-icon, .openweather-forecast-summary, .openweather-forecast-temperature{ background: transparent; } .openweather-current-databox-captions, .openweather-forecast-day { color: $selected_bg_color; } ================================================ FILE: gnome-shell/gnome-shell.css ================================================ /***************** * Drawing mixins * *****************/ /* GLOBALS */ stage { font-size: 11pt; color: #d8dee9; } /* WIDGETS */ /* Buttons */ .button, .icon-button, .modal-dialog .modal-dialog-button-box .modal-dialog-button, .app-folder-dialog .edit-folder-button, .notification-banner .notification-button, .quick-settings-system-item .icon-button, .screenshot-ui-type-button, .screenshot-ui-show-pointer-button { color: #d8dee9; background-color: #343b49; box-shadow: none; border: 1px solid #343b49; } .button:focus, .icon-button:focus, .modal-dialog .modal-dialog-button-box .modal-dialog-button:focus, .app-folder-dialog .edit-folder-button:focus, .notification-banner .notification-button:focus, .quick-settings-system-item .icon-button:focus, .screenshot-ui-type-button:focus, .screenshot-ui-show-pointer-button:focus { background-color: #3b4252; color: #fefefe; box-shadow: none !important; border: 1px solid #3b4252; } .button:insensitive, .icon-button:insensitive, .modal-dialog .modal-dialog-button-box .modal-dialog-button:insensitive, .app-folder-dialog .edit-folder-button:insensitive, .notification-banner .notification-button:insensitive, .quick-settings-system-item .icon-button:insensitive, .screenshot-ui-type-button:insensitive, .screenshot-ui-show-pointer-button:insensitive { color: #838995; background-color: rgba(64, 70, 82, 0.66); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); border: none; text-shadow: none; icon-shadow: none; } .button:active, .button:checked, .icon-button:active, .icon-button:checked, .modal-dialog .modal-dialog-button-box .modal-dialog-button:active, .app-folder-dialog .edit-folder-button:active, .notification-banner .notification-button:active, .quick-settings-system-item .icon-button:active, .screenshot-ui-type-button:active, .screenshot-ui-show-pointer-button:active, .modal-dialog .modal-dialog-button-box .modal-dialog-button:checked, .app-folder-dialog .edit-folder-button:checked, .notification-banner .notification-button:checked, .quick-settings-system-item .icon-button:checked, .screenshot-ui-type-button:checked, .screenshot-ui-show-pointer-button:checked { color: #fefefe; background-color: #81a1c1; border: 1px solid #1f232b; text-shadow: none; icon-shadow: none; } .button:hover, .icon-button:hover, .modal-dialog .modal-dialog-button-box .modal-dialog-button:hover, .app-folder-dialog .edit-folder-button:hover, .notification-banner .notification-button:hover, .quick-settings-system-item .icon-button:hover, .screenshot-ui-type-button:hover, .screenshot-ui-show-pointer-button:hover { background-color: #3b4252; color: #fefefe; border: 1px solid #3b4252; } .button { border-radius: 6px; padding: 4px 32px; } .modal-dialog-linked-button { padding: 10px; border: 1px solid #1f232b; color: #d8dee9; background: #232831; text-shadow: none; icon-shadow: none; box-shadow: none; } .modal-dialog-linked-button:insensitive { color: #838995; background-color: rgba(64, 70, 82, 0.66); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); border: none; text-shadow: none; icon-shadow: none; } .modal-dialog-linked-button:active { color: #fefefe; background-color: #81a1c1; border: 1px solid #1f232b; text-shadow: none; icon-shadow: none; } .modal-dialog-linked-button:focus { background-color: #3b4252; color: #fefefe; box-shadow: none !important; border: 1px solid #3b4252; } .modal-dialog-linked-button:focus:hover { background-color: #3b4252; color: #fefefe; box-shadow: none !important; border: 1px solid #3b4252; } .modal-dialog-linked-button:hover { background-color: #3b4252; color: #fefefe; border: 1px solid #3b4252; } .modal-dialog-linked-button:first-child { border-radius: 0px 0px 0px 10px; } .modal-dialog-linked-button:last-child { border-radius: 0px 0px 10px 0px; } .modal-dialog-linked-button:first-child:last-child { border-radius: 0px 0px 10px 10px; } /* Entries */ StEntry { background-color: #373e4c; border-color: #1f232b; border-radius: 6px; padding: 4px; border-width: 2px; color: #d8dee9; selection-background-color: #81a1c1; selected-color: #fefefe; } StEntry:hover { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); background-color: #3d4555; } StEntry:focus { border-color: rgba(129, 161, 193, 0.8); box-shadow: none !important; } StEntry:insensitive { color: #838995; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } StEntry StIcon.capslock-warning { icon-size: 16px; warning-color: #c3674a; padding: 0 4px; } StEntry StLabel.hint-text { color: rgba(216, 222, 233, 0.7); } /* Scrollbars */ StScrollView.vfade { -st-vfade-offset: 68px; } StScrollView.hfade { -st-hfade-offset: 68px; } StScrollBar { padding: 0; } StScrollView StScrollBar { min-width: 14px; min-height: 14px; } StScrollBar StBin#trough { border-radius: 0; background-color: transparent; } StScrollBar StButton#vhandle, StScrollBar StButton#hhandle { border-radius: 8px; background-color: #505662; margin: 3px; } StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover { background-color: #b6bcc7; } StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { background-color: #81a1c1; } /* Slider */ .slider { color: #d8dee9; height: 20px; border-radius: 16px; -barlevel-height: 19px; -barlevel-background-color: #3f4758; -barlevel-border-width: 2px; -barlevel-border-color: transparent; -barlevel-active-background-color: rgba(129, 161, 193, 0.9); -barlevel-active-border-color: transparent; -barlevel-overdrive-color: #9b1b32; -barlevel-overdrive-border-color: transparent; -barlevel-overdrive-separator-width: 0px; -slider-handle-radius: 9.5px; -slider-handle-border-width: 0; -slider-handle-border-color: transparent; } /* Check Boxes */ .check-box StBoxLayout { spacing: .8em; } .check-box StBin { width: 24px; height: 22px; background-image: url("assets/checkbox-off.svg"); } .check-box:focus, .check-box:hover StBin { background-image: url("assets/checkbox-off-focused.svg"); } .check-box:checked StBin { background-image: url("assets/checkbox.svg"); } .check-box:focus:checked StBin { background-image: url("assets/checkbox-focused.svg"); } /* Switches */ .toggle-switch { width: 65px; height: 22px; background-color: transparent !important; background-size: contain; background-image: url("assets/toggle-off.svg"); } .toggle-switch:checked { background-image: url("assets/toggle-on.svg"); } .toggle-switch .handle { background: none !important; box-shadow: none !important; } .toggle-switch-us { background-image: url("assets/toggle-off.svg"); } .toggle-switch-us:checked { background-image: url("assets/toggle-on.svg"); } .toggle-switch-intl { background-image: url("assets/toggle-off.svg"); } .toggle-switch-intl:checked { background-image: url("assets/toggle-on.svg"); } /* links */ .shell-link { color: #88c0d0; } .shell-link:hover { color: #add3de; } /* Modal Dialogs */ .headline { font-size: 110%; } .lightbox { background-color: black; } .flashspot { background-color: white; } .modal-dialog { border: 1px solid #1f232b; border-radius: 10px; color: #d8dee9; background-color: rgba(35, 40, 49, 0.95); box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.2); padding: 0 !important; } .modal-dialog .modal-dialog-content-box { margin: 20px 40px; spacing: 32px; max-width: 28em; } .modal-dialog .modal-dialog-button-box { padding: 6px; } .modal-dialog .modal-dialog-button-box .modal-dialog-button { border-radius: 10px; } .modal-dialog .run-dialog-entry { width: 20em; margin-bottom: 6px; } .modal-dialog .run-dialog-error-box { color: #b84f59; padding-top: 16px; spacing: 6px; } .modal-dialog .run-dialog-button-box { padding-top: 1em; } .modal-dialog .run-dialog-label { font-size: 12pt; font-weight: bold; color: #b7c2d7; padding-bottom: .4em; } .modal-dialog .run-dialog-description { color: #d8dee9; } .mount-dialog-subject, .end-session-dialog-subject { font-size: 14pt; } /* Message Dialog */ .message-dialog-main-layout { padding: 12px 20px 0; spacing: 12px; } .message-dialog-content { max-width: 28em; spacing: 20px; } .message-dialog-icon { min-width: 48px; icon-size: 48px; } .message-dialog-title { font-weight: bold; } .message-dialog-subtitle { color: #58709d; font-weight: bold; } /* End Session Dialog */ .end-session-dialog { border: none; } .end-session-dialog .modal-dialog-linked-button:last-child, .end-session-dialog .modal-dialog-button:last-child { background: #b84f59; } .end-session-dialog .modal-dialog-linked-button:last-child:hover, .end-session-dialog .modal-dialog-linked-button:last-child:focus, .end-session-dialog .modal-dialog-button:last-child:hover, .end-session-dialog .modal-dialog-button:last-child:focus { background: #bc5a63; color: #fff; } .end-session-dialog-list { padding-top: 20px; } .end-session-dialog-layout { padding-left: 17px; } .end-session-dialog-layout:rtl { padding-right: 17px; } .end-session-dialog-description { width: 28em; padding-bottom: 10px; } .end-session-dialog-description:rtl { text-align: right; } .end-session-dialog-warning { width: 28em; color: #c3674a; padding-top: 6px; } .end-session-dialog-warning:rtl { text-align: right; } .end-session-dialog-logout-icon { border-radius: 3px; width: 48px; height: 48px; background-size: contain; } .end-session-dialog-shutdown-icon { color: #b84f59; width: 48px; height: 48px; } .end-session-dialog-inhibitor-layout { spacing: 16px; max-height: 200px; padding-right: 65px; padding-left: 65px; } .end-session-dialog-session-list, .end-session-dialog-app-list { spacing: 1em; } .end-session-dialog-list-header { font-weight: bold; } .end-session-dialog-list-header:rtl { text-align: right; } .end-session-dialog-app-list-item, .end-session-dialog-session-list-item { spacing: 1em; } .end-session-dialog-app-list-item-name, .end-session-dialog-session-list-item-name { font-weight: bold; } .end-session-dialog-app-list-item-description { color: #c8d0e0; font-size: 10pt; } /* ShellMountOperation Dialogs */ .shell-mount-operation-icon { icon-size: 48px; } .mount-dialog { spacing: 24px; } .mount-dialog .message-dialog-title { padding-top: 10px; padding-left: 17px; padding-bottom: 6px; max-width: 34em; } .mount-dialog .message-dialog-title:rtl { padding-left: 0px; padding-right: 17px; } .mount-dialog .message-dialog-body { padding-left: 17px; width: 28em; } .mount-dialog .message-dialog-body:rtl { padding-left: 0px; padding-right: 17px; } .mount-dialog-app-list { max-height: 200px; padding-top: 24px; padding-left: 49px; padding-right: 32px; } .mount-dialog-app-list:rtl { padding-right: 49px; padding-left: 32px; } .mount-dialog-app-list-item { color: #b7c2d7; } .mount-dialog-app-list-item:hover { color: #d8dee9; } .mount-dialog-app-list-item:ltr { padding-right: 1em; } .mount-dialog-app-list-item:rtl { padding-left: 1em; } .mount-dialog-app-list-item-icon:ltr { padding-right: 17px; } .mount-dialog-app-list-item-icon:rtl { padding-left: 17px; } .mount-dialog-app-list-item-name { font-size: 10pt; } /* Password or Authentication Dialog */ .prompt-dialog { width: 28em; border: none; border-radius: 10px; } .prompt-dialog .message-dialog-main-layout { spacing: 24px; padding: 10px; } .prompt-dialog .message-dialog-content { spacing: 16px; } .prompt-dialog .message-dialog-title { color: #8699bb; } .prompt-dialog-description:rtl { text-align: right; } .prompt-dialog-password-box { spacing: 1em; padding-bottom: 1em; } .prompt-dialog-error-label { font-size: 10pt; color: #b84f59; padding-bottom: 8px; } .prompt-dialog-info-label { font-size: 10pt; padding-bottom: 8px; } .hidden { color: rgba(0, 0, 0, 0); } .prompt-dialog-null-label { font-size: 10pt; padding-bottom: 8px; } /* Polkit Dialog */ .polkit-dialog-user-layout { padding-left: 10px; spacing: 10px; } .polkit-dialog-user-layout:rtl { padding-left: 0px; padding-right: 10px; } .polkit-dialog-user-root-label { color: #c3674a; } .polkit-dialog-user-icon { border-radius: 3px; background-size: contain; width: 48px; height: 48px; } /* Audio selection dialog */ .audio-device-selection-dialog { spacing: 30px; } .audio-selection-content { spacing: 20px; padding: 24px; } .audio-selection-title { font-weight: bold; text-align: center; } .audio-selection-box { spacing: 20px; } .audio-selection-device { border: 1px solid #d8dee9; border-radius: 12px; } .audio-selection-device:active, .audio-selection-device:hover, .audio-selection-device:focus { background-color: #81a1c1; } .audio-selection-device-box { padding: 20px; spacing: 20px; } .audio-selection-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; } .extension-dialog .message-dialog-title { color: #8699bb; } /* 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; } /* Popovers/Menus */ .popup-menu { min-width: 15em; background-color: transparent; color: #d8dee9; } .popup-menu.panel-menu { -boxpointer-gap: 4px; margin-bottom: 1.75em; } .popup-sub-menu { background-color: #373e4c; box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.2); border: none; border-radius: 0px 0px 6px 6px; } .popup-sub-menu .popup-menu-item { border-radius: 0; margin: 0; background-color: #373e4c !important; } .popup-sub-menu .popup-menu-item:last-child { border-radius: 0 0 6px 6px; } .popup-sub-menu .popup-menu-item:active, .popup-sub-menu .popup-menu-item.selected, .popup-sub-menu .popup-menu-item:hover, .popup-sub-menu .popup-menu-item:focus { background-color: #414a5b !important; color: #d8dee9; } .popup-menu-content { padding: 6px; background: #2a2f3a; border-radius: 12px; border: 1px solid #1f232b; } .popup-menu-item { spacing: 6px; border-radius: 6px; background-gradient-direction: none; color: #d8dee9 !important; } .popup-menu-item:ltr { padding-left: 6px; } .popup-menu-item:rtl { padding-right: 6px; } .popup-menu-item:active, .popup-menu-item.selected, .popup-menu-item:hover, .popup-menu-item:focus { background-color: #3b4252 !important; color: #d8dee9 !important; } .popup-menu-item:checked { background-color: rgba(129, 161, 193, 0.5) !important; font-weight: bold; color: #fefefe !important; border-radius: 6px 6px 0px 0px; box-shadow: none; } .popup-menu-item:insensitive { color: rgba(216, 222, 233, 0.5); } .popup-inactive-menu-item { color: #d8dee9; } .popup-inactive-menu-item:insensitive { color: rgba(216, 222, 233, 0.5); } .popup-menu-arrow, .popup-menu-icon { icon-size: 16px !important; } .popup-menu-ornament { text-align: right; width: 1.2em; } .popup-separator-menu-item { margin: 6px 0; padding: 0 !important; } .popup-separator-menu-item:ltr { margin-right: 6px; } .popup-separator-menu-item:rtl { margin-left: 6px; } .popup-separator-menu-item .popup-separator-menu-item-separator { height: 1px; background-color: #4e586d; } .popup-separator-menu-item .popup-menu-ornament { width: 0 !important; } .popup-sub-menu .popup-separator-menu-item { background-color: transparent; } .popup-sub-menu .popup-separator-menu-item:ltr { margin-right: 2.5em; } .popup-sub-menu .popup-separator-menu-item:rtl { margin-left: 2.5em; } .popup-sub-menu .popup-separator-menu-item .popup-separator-menu-item-separator { background-color: #5d6981; } .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; } .osd-window .osd-monitor-label { font-size: 3em; } .osd-window .level { height: 0.4em; border-radius: 0.3em; color: #d8dee9; -barlevel-height: 0.4em; -barlevel-background-color: #4e586d; -barlevel-active-background-color: #81a1c1; -barlevel-overdrive-color: #bf616a; -barlevel-overdrive-separator-width: 0.2em; } .osd-window .level-bar { background-color: #81a1c1; border-radius: 0.3em; } /* Pad OSD */ .pad-osd-window { padding: 32px; background-color: rgba(0, 0, 0, 0.8); } .pad-osd-window .pad-osd-title-box { spacing: 12px; } .pad-osd-window .pad-osd-title-menu-box { spacing: 6px; } .combo-box-label { width: 15em; } /* App Switcher */ .switcher-popup { padding: 8px; spacing: 16px; } .switcher-list-item-container { spacing: 8px; } .switcher-list .item-box { padding: 8px; border-radius: 16px; background-color: transparent; } .switcher-list .item-box:outlined { padding: 6px; border: 2px solid #0a0b0e; } .switcher-list .item-box:selected { background-color: #81a1c1; color: #fefefe; } .switcher-list .thumbnail-box { padding: 2px; spacing: 4px; } .switcher-list .thumbnail { width: 256px; } .switcher-list .separator { width: 1px; background: #1f232b; } .switcher-arrow { border-color: rgba(0, 0, 0, 0); color: rgba(216, 222, 233, 0.8); } .switcher-arrow:highlighted { color: #d8dee9; } .input-source-switcher-symbol { font-size: 34pt; width: 96px; height: 96px; } /* Window Cycler */ .cycler-highlight { border: 5px solid #81a1c1; } /* Workspace Switcher */ .workspace-switcher-group { padding: 12px; } .workspace-switcher { background: transparent; border: 0px; border-radius: 0px; padding: 0px; spacing: 8px; } .ws-switcher-active-up, .ws-switcher-active-down, .ws-switcher-active-left, .ws-switcher-active-right { height: 50px; background-color: #81a1c1; color: #fefefe; background-size: 32px; border-radius: 8px; border-color: #81a1c1; } .ws-switcher-active-up { background-image: url("assets/ws-switch-arrow-up.png"); } .ws-switcher-active-down { background-image: url("assets/ws-switch-arrow-down.png"); } .ws-switcher-box { height: 50px; border: 1px solid rgba(216, 222, 233, 0.1); background: rgba(25, 28, 34, 0.95); border-radius: 8px; } .osd-window, .resize-popup, .switcher-list, .workspace-switcher-container, .screenshot-ui-panel { color: #d8dee9; background-color: rgba(46, 52, 64, 0.95); border: 1px solid #1f232b; box-shadow: 0px 0px 5px #1f232b; border-radius: 18px; padding: 12px; } /* Tiled window previews */ .tile-preview { background-color: rgba(129, 161, 193, 0.5); border: 1px solid #81a1c1; } .tile-preview-left.on-primary { border-radius: 2px 2px 0 0; } .tile-preview-right.on-primary { border-radius: 0 2px 0 0; } .tile-preview-left.tile-preview-right.on-primary { border-radius: 2px 2px 0 0; } /* TOP BAR */ #panel { background-gradient-direction: none; background-color: #1d2128; /* transition from solid to transparent */ transition-duration: 500ms; font-weight: bold; height: 2.1em; padding: 0px 0px; } #panel.unlock-screen, #panel.login-screen, #panel.lock-screen { background-color: transparent; } #panel #panelLeft, #panel #panelCenter { spacing: 4px; } #panel .panel-corner { -panel-corner-radius: 0px; -panel-corner-background-color: rgba(0, 0, 0, 0.2); -panel-corner-border-width: 2px; -panel-corner-border-color: transparent; } #panel .panel-corner:active, #panel .panel-corner:overview, #panel .panel-corner:focus { -panel-corner-border-color: #92aec9; } #panel .panel-corner.lock-screen, #panel .panel-corner.login-screen, #panel .panel-corner.unlock-screen { -panel-corner-radius: 0; -panel-corner-background-color: transparent; -panel-corner-border-color: transparent; } #panel .panel-button { -natural-hpadding: 12px; -minimum-hpadding: 6px; font-weight: bold; color: #d8dee9; transition-duration: 100ms; } #panel .panel-button .app-menu-icon { -st-icon-style: symbolic; margin-left: 4px; margin-right: 4px; } #panel .panel-button:hover { box-shadow: inset 0 0 0 100px #323946; color: #f9fafb; } #panel .panel-button:hover.clock-display { box-shadow: none; } #panel .panel-button:hover.clock-display .clock { box-shadow: inset 0 0 0 100px #323946; } #panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked { box-shadow: inset 0 0 0 100px #81a1c1; color: #fff; } #panel .panel-button:active.clock-display, #panel .panel-button:overview.clock-display, #panel .panel-button:focus.clock-display, #panel .panel-button:checked.clock-display { box-shadow: none; } #panel .panel-button:active.clock-display .clock, #panel .panel-button:overview.clock-display .clock, #panel .panel-button:focus.clock-display .clock, #panel .panel-button:checked.clock-display .clock { box-shadow: inset 0 0 0 100px #81a1c1; } #panel .panel-button .system-status-icon { icon-size: 1.09em; padding: 0 5px; } .unlock-screen #panel .panel-button, .login-screen #panel .panel-button, .lock-screen #panel .panel-button { color: #f9fafb; } .unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen #panel .panel-button:active, .login-screen #panel .panel-button:focus, .login-screen #panel .panel-button:hover, .login-screen #panel .panel-button:active, .lock-screen #panel .panel-button:focus, .lock-screen #panel .panel-button:hover, .lock-screen #panel .panel-button:active { color: #f9fafb; } #panel .panel-status-indicators-box, #panel .panel-status-menu-box { spacing: 2px; } #panel .power-status.panel-status-indicators-box { spacing: 0; } #panel .screencast-indicator { color: #c3674a; } #panel.solid { background-color: #1d2128; /* transition from transparent to solid */ transition-duration: 300ms; } #panel.solid .panel-corner { -panel-corner-background-color: black; } #panel.solid .system-status-icon, #panel.solid .app-menu-icon > StIcon, #panel.solid .popup-menu-arrow { icon-shadow: none; } .calendar { background: transparent; border: none; box-shadow: none; } .world-clocks-button, .weather-button, .events-button { background: #2e3440; border-radius: 7px; padding: 12px; color: #d8dee9; } .datemenu-calendar-column { border: 0 solid transparent; } .datemenu-today-button, .events-section-title, .message-list-section-title { border-radius: 4px; color: #d8dee9; padding: .4em; } .datemenu-today-button:hover, .datemenu-today-button:focus, .world-clocks-button:hover, .world-clocks-button:focus, .weather-button:hover, .weather-button:focus, .events-section-title:hover, .events-section-title:focus, .message-list-section-title:hover, .message-list-section-title:focus, .events-button:hover, .events-button:focus { background-color: #39404f; } .datemenu-today-button:active, .world-clocks-button:active, .weather-button:active, .events-section-title:active, .message-list-section-title:active, .events-button:active { color: white; background-color: #81a1c1; } .datemenu-today-button .date-label { font-size: 1.5em; } .world-clocks-header, .weather-header, .events-section-title, .message-list-section-title, .events-title { color: #d8dee9; font-weight: bold; } .events-button .event-time { color: #e5e9f0; } .world-clocks-grid { spacing-rows: 0.4em; } .weather-box { spacing: 0.4em; } .calendar-month-label { background-color: transparent; color: #c8d0e0; font-weight: bold; padding: 8px 0; } .pager-button { color: white; background-color: transparent; width: 32px; border-radius: 4px; } .pager-button:hover, .pager-button:focus { background-color: rgba(216, 222, 233, 0.05); } .pager-button:active { background-color: rgba(46, 52, 64, 0.05); } .calendar-change-month-back { background-image: url("assets/calendar-arrow-left.svg"); } .calendar-change-month-back:rtl { background-image: url("assets/calendar-arrow-right.svg"); } .calendar-change-month-forward { background-image: url("assets/calendar-arrow-right.svg"); } .calendar-change-month-forward:rtl { background-image: url("assets/calendar-arrow-left.svg"); } .calendar-change-month-back StIcon, .calendar-change-month-forward StIcon { color: #c1cbdc; } .calendar-day-base, .calendar-day { font-size: 80%; text-align: center; width: 2.4em; height: 2.4em; padding: 0.1em; margin: 2px; border-radius: 99px; color: #d8dee9; background-gradient-direction: none; background-color: transparent; } .calendar-day-base:hover, .calendar-day-base:focus, .calendar-day:hover, .calendar-day:focus { background-color: #3d4555; box-shadow: none; } .calendar-day-base:active, .calendar-day-base:selected, .calendar-day:active, .calendar-day:selected { color: white; background-color: #81a1c1; border-color: transparent; box-shadow: inset 0 0 0 2px rgba(129, 161, 193, 0.6) !important; } .calendar-day-heading { background-color: transparent; color: #d8dee9; margin-top: 1em; font-size: 70%; } .calendar-day { border-width: 0; } .calendar-day-top { border-top-width: 1px; } .calendar-day-left { border-left-width: 1px; } .calendar-nonwork-day { color: #838995; } .calendar-today { font-weight: bold; border: 1px solid #81a1c1; background-color: transparent; color: #fefefe; } .calendar-today:hover, .calendar-today:focus { background-color: #8ba9c6; color: #fefefe; } .calendar-today:active, .calendar-today:selected { background-color: #81a1c1; color: #fefefe; } .calendar-today:active:hover, .calendar-today:active:focus, .calendar-today:selected:hover, .calendar-today:selected:focus { background-color: #8ba9c6; color: #fefefe; } .calendar-day-with-events { color: #f9fafb; font-weight: bold; background-image: url("assets/calendar-today.svg"); } .calendar-other-month-day { color: #838995; opacity: 0.5; } .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: rgba(216, 222, 233, 0.3); color: #2e3440; } /* Message list */ .message-list { border-color: #373e4c; } .message-title, .message-content, .message-body { color: #c8d0e0; } .message-list-sections { spacing: 1em; } .message-list-section, .message-list-section-list { spacing: 0.4em; } .message-list-section-close > StIcon { icon-size: 16px; border-radius: 16px; padding: 8px; color: #d8dee9; background-color: transparent; } .message-list-section-close:hover > StIcon, .message-list-section-close:focus > StIcon .message-list-section-close:active > StIcon { color: #bf616a; background: transparent; } .message { border-radius: 7px; background: #323946; box-shadow: none; } .message:hover, .message:focus { background-color: #373e4c; box-shadow: 2px 0px 0px 0px #81a1c1 inset; border-radius: 1px 7px 7px 1px; } .message-secondary-bin > .event-time { color: #a7b5cd; font-size: 0.7em; /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */ padding-bottom: 0.13em; } .message-secondary-bin > StIcon { icon-size: 16px; } .message-content { padding: 10px; } .message-close-button { color: #d8dee9; background-color: rgba(216, 222, 233, 0.1); border-radius: 99px; } .message-close-button:hover { background-color: rgba(191, 97, 106, 0.9); } .message-close-button:hover > StIcon { color: #fefefe; } .message-close-button:active { background-color: rgba(191, 97, 106, 0.5); } .message-close-button:active > StIcon { color: #fefefe; } /* Media Controls */ .message-media-control { color: #d8dee9; } .message-media-control:hover { background-color: #3f4758; color: #fefefe; } .message-media-control:active { background-color: #485164; color: #fefefe; } .message-media-control:insensitive { color: #9196a1; } .media-message-cover-icon { icon-size: 48px !important; } .media-message-cover-icon.fallback { color: #434c5e; background-color: #2e3440; border: 2px solid #2e3440; border-radius: 2px; icon-size: 16px; padding: 8px; } /* World clocks */ .world-clocks-button .world-clocks-city { color: #d8dee9; font-weight: normal; } .world-clocks-button .world-clocks-time { font-weight: bold; color: #d8dee9; font-feature-settings: "lnum"; text-align: right; } .world-clocks-button .world-clocks-timezone { color: #97a7c4; font-feature-settings: "tnum"; } /* Weather */ .weather-button .weather-header { color: #b7c2d7; font-weight: bold; } .weather-button .weather-header.location { font-weight: normal; } .weather-button .weather-forecast-time { color: #b7c2d7; font-feature-settings: "tnum"; font-weight: normal; padding-top: 0.2em; padding-bottom: 0.4em; } .weather-button .weather-forecast-temp { font-weight: bold; } .system-switch-user-submenu-icon.user-icon { icon-size: 20px; padding: 0 2px; } .system-switch-user-submenu-icon.default-icon { icon-size: 16px; padding: 0 4px; } #appMenu { spinner-image: url("assets/process-working.svg"); spacing: 4px; } #appMenu .label-shadow { color: transparent; } .aggregate-menu { min-width: 21em; } .aggregate-menu .popup-menu-icon { padding: 0 4px; } .system-menu-action { color: #d8dee9; border-radius: 32px; /* wish we could do 50% */ border: 1px solid #1f232b; background: #282d37; padding: 13px; } .system-menu-action:hover, .system-menu-action:focus { border: 1px solid #81a1c1; color: #81a1c1; background: transparent; } .system-menu-action:active { background-color: #5f88b0; color: #fefefe; } .system-menu-action > StIcon { icon-size: 16px; } .ripple-box { width: 52px; height: 52px; background-image: url("assets/corner-ripple-ltr.png"); background-size: contain; } .ripple-box:rtl { background-image: url("assets/corner-ripple-rtl.png"); } .popup-menu-arrow { width: 16px; height: 16px; } .popup-menu-icon { icon-size: 1.09em; } .window-close { background-color: #bf616a; color: #d8dee9; border-radius: 21px; padding: 2px; height: 30px; width: 30px; border: 2px solid #b9525c; transition-duration: 300ms; } .window-close StIcon { icon-size: 23px; } .window-close:hover { background-color: #c36c74; } .window-close:active { background-color: #b84f59; } .window-close { -shell-close-overlap: 16px; } .window-close:rtl { -st-background-image-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5); } /* NETWORK DIALOGS */ .nm-dialog { max-height: 34em; min-height: 31em; min-width: 32em; } .nm-dialog-content { spacing: 20px; padding: 24px; } .nm-dialog-header-hbox { spacing: 10px; } .nm-dialog-airplane-box { spacing: 12px; } .nm-dialog-airplane-headline { font-weight: bold; text-align: center; } .nm-dialog-airplane-text { color: #d8dee9; } .nm-dialog-header-icon { icon-size: 32px; } .nm-dialog-scroll-view { border: 2px solid #1f232b; background: #2e3440; } .nm-dialog-header { font-weight: bold; } .nm-dialog-item { font-size: 110%; border-bottom: 1px solid #1f232b; padding: 12px; spacing: 20px; } .nm-dialog-item:selected { background-color: #81a1c1; color: #fefefe; } .nm-dialog-icons { spacing: .5em; } .nm-dialog-icon { icon-size: 16px; } .no-networks-label { color: #999999; } .no-networks-box { spacing: 12px; } /* OVERVIEW */ #overview, .controls-manager, .secondary-monitor-workspaces { spacing: 24px; } #overviewGroup { background-color: #2e3440; } .overview-controls { padding-bottom: 32px; } .window-picker { -horizontal-spacing: 16px; -vertical-spacing: 16px; } .window-picker.external-monitor { padding: 16px; } .window-clone-border { border: 4px solid rgba(129, 161, 193, 0.3); border-radius: 0px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); } .window-caption { spacing: 20px; color: #d8dee9; background-color: #1d2128; border-radius: 7px; padding: 4px 8px; } .search-entry { width: 320px; padding: 9px; border-radius: 10px; border-color: transparent; } .search-entry .search-entry-icon { icon-size: 1em; padding: 0 4px; color: rgba(216, 222, 233, 0.7); } .search-provider-icon, .list-search-result { background-color: transparent; } .search-provider-icon:focus, .list-search-result:focus, .search-provider-icon:hover, .list-search-result:hover, .search-provider-icon:selected, .list-search-result:selected { background-color: rgba(216, 222, 233, 0.1); transition-duration: 200ms; } .search-provider-icon:focus, .list-search-result:focus { box-shadow: 0px 0px 2px 2px #81a1c1 inset !important; } .search-provider-icon:active, .list-search-result:active, .search-provider-icon:checked, .list-search-result:checked { background-color: rgba(25, 28, 34, 0.85); } #searchResultsBin { max-width: 1000px; } #searchResultsContent { padding-left: 20px; padding-right: 20px; spacing: 16px; } .search-section { spacing: 16px; } .search-section-content { background-color: transparent; border-radius: 0; border: none; box-shadow: none; spacing: 32px; } .list-search-results { spacing: 3px; } .search-section-separator { height: 2px; background-color: #4e586d; } .list-search-result-content { spacing: 30px; } .list-search-result-title { color: #e8ecf2; spacing: 12px; } .list-search-result-description { color: rgba(255, 255, 255, 0.5); } .list-search-provider-details { width: 150px; color: #e8ecf2; margin-top: 0.24em; } .list-search-provider-content { spacing: 20px; } .search-provider-icon { padding: 15px; } /* DASHBOARD */ .dash-background { background-color: #232831; } .dash-separator { width: 1px; background-color: #4e586d; } .dash-label { border-radius: 7px; padding: 4px 12px; color: #d8dee9; background-color: #1d2128; text-align: center; -x-offset: 8px; } /* App Vault/Grid */ .icon-grid { spacing: 30px; -shell-grid-horizontal-item-size: 136px; -shell-grid-vertical-item-size: 136px; } .icon-grid .overview-icon { icon-size: 96px; } .system-action-icon { background-color: black; color: white; border-radius: 99px; icon-size: 48px; } .app-view-controls { padding-bottom: 32px; } .app-view-control { padding: 4px 32px; } .app-view-control:checked { color: #fefefe; background-color: #81a1c1; border: 1px solid #1f232b; text-shadow: none; icon-shadow: none; } .app-view-control:first-child { border-right-width: 0; border-radius: 3px 0 0 3px; } .app-view-control:last-child { border-radius: 0 3px 3px 0; } .app-well-app, .app-well-app.app-folder, .show-apps, .grid-search-result, .overview-tile { background-color: transparent; border: none; } .app-well-app:hover, .app-well-app:focus, .app-well-app:selected, .app-well-app.app-folder:hover, .app-well-app.app-folder:focus, .app-well-app.app-folder:selected, .show-apps:hover, .show-apps:focus, .show-apps:selected, .grid-search-result:hover, .grid-search-result:focus, .grid-search-result:selected, .overview-tile:hover, .overview-tile:focus, .overview-tile:selected { background-color: #3d4555; transition-duration: 0ms; border-image: none; background-image: none; } .app-well-app:focus, .app-well-app.app-folder:focus, .show-apps:focus, .grid-search-result:focus, .overview-tile:focus { box-shadow: 0px 0px 2px 2px #81a1c1 inset !important; } .app-well-app:active, .app-well-app:checked, .app-well-app.app-folder:active, .app-well-app.app-folder:checked, .show-apps:active, .show-apps:checked, .grid-search-result:active, .grid-search-result:checked, .overview-tile:active, .overview-tile:checked { background-color: #3d4555; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); color: #d8dee9; } .dash-item-container .show-apps:hover .overview-icon, .dash-item-container .show-apps:focus .overview-icon, .dash-item-container .show-apps:selected .overview-icon, .dash-item-container .show-apps:active .overview-icon, .dash-item-container .show-apps:checked .overview-icon, .dash-item-container .overview-tile:hover .overview-icon, .dash-item-container .overview-tile:focus .overview-icon, .dash-item-container .overview-tile:selected .overview-icon, .dash-item-container .overview-tile:active .overview-icon, .dash-item-container .overview-tile:checked .overview-icon { background-color: #3d4555; } .app-well-app-running-dot, .app-grid-running-dot { width: 5px; height: 5px; background-color: #81a1c1; border-radius: 5px !important; box-shadow: 0px 0px 5px 4px rgba(129, 161, 193, 0.8); } .app-well-app, .app-well-app.app-folder, .show-apps, .grid-search-result, .overview-tile, .dash-item-container .show-apps, .dash-item-container .show-apps .overview-icon, .dash-item-container .overview-tile, .dash-item-container .overview-tile .overview-icon { background-color: transparent; color: #fefefe; border: none; transition-duration: 100ms; text-align: center; box-shadow: none; border-radius: 18px; } /* App Folders */ .app-well-app.app-folder, .app-folder { background-color: #39404f; border-radius: 18px; } .app-folder-dialog { background-color: rgba(35, 40, 49, 0.95); border: none; box-shadow: none; border-radius: 30px; } .app-folder-dialog .edit-folder-button { padding: 0; width: 36px; height: 36px; border-radius: 18px; } .app-folder-dialog .edit-folder-button > StIcon { icon-size: 16px; } .app-well-app.app-folder > .overview-icon { background-color: rgba(46, 52, 64, 0.35); } .show-apps .show-apps-icon { color: #d8dee9; } .show-apps:checked .show-apps-icon, .show-apps:focus .show-apps-icon { color: #d8dee9; transition-duration: 100ms; } .app-folder-popup { -arrow-border-radius: 8px; -arrow-background-color: rgba(46, 52, 64, 0.5); -arrow-base: 24px; -arrow-rise: 11px; } .app-folder-popup-bin { padding: 5px; background: rgba(46, 52, 64, 0.5); } .app-folder-icon { padding: 5px; spacing-rows: 5px; spacing-columns: 5px; } .page-indicator { padding: 6px 12px; } .page-indicator .page-indicator-icon { width: 12px; height: 12px; border-radius: 12px; background-image: none; background-color: #6f7d98; } .page-indicator:hover .page-indicator-icon { background-image: none; background-color: rgba(255, 255, 255, 0.5); } .page-indicator:active .page-indicator-icon { background-image: none; background-color: rgba(255, 255, 255, 0.7); } .page-indicator:checked .page-indicator-icon { background-image: none; background-color: #FFFFFF; transition-duration: 0s; } .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-thumbnails { visible-width: 32px; spacing: 11px; padding: 8px; border-radius: 0; } .workspace-thumbnails:rtl { border-radius: 0; } .workspace-thumbnail-indicator { border: 4px solid rgba(129, 161, 193, 0.8); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); padding: 0; } .search-display > StBoxLayout, .all-apps, .frequent-apps > StBoxLayout { padding: 0px 88px 10px 88px; } .page-navigation-arrow { background-color: transparent; margin: 6px; padding: 18px; width: 24px; height: 24px; border-radius: 99px; } .page-navigation-arrow:insensitive { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); text-shadow: none; icon-shadow: none; } .page-navigation-arrow:hover { background-color: rgba(129, 161, 193, 0.5); } .page-navigation-arrow:active { background-color: #81a1c1; } .workspace-thumbnails { color: #d8dee9; background-color: transparent; border: none; } .search-statustext, .no-frequent-applications-label { font-size: 2em; font-weight: bold; color: #d8dee9; } /* NOTIFICATIONS & MESSAGE TRAY */ .url-highlighter { link-color: #a3bbd2; } .notification-banner { font-size: 11pt; width: 34em; margin: 5px; border-radius: 12px; color: #d8dee9; background-color: #2a2f3a; border: 1px solid #1f232b; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3); } .notification-banner:hover, .notification-banner:focus { background-color: #2e3440; border-radius: 12px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); } .notification-banner * { color: #d8dee9; } .notification-banner .notification-icon { padding: 5px; } .notification-banner .notification-content { padding: 5px; spacing: 5px; } .notification-banner .secondary-icon { icon-size: 1.09em; } .notification-banner .notification-actions { background-color: #2a2f3a; padding-top: 2px; spacing: 1px; border-radius: 0px 0px 12px 12px; } .notification-banner .notification-button { padding: 7px; border-color: transparent; } .notification-banner .notification-button:first-child { border-radius: 0 0 0 12px; } .notification-banner .notification-button:last-child { border-radius: 0 0 12px 0; } .notification-banner .notification-button:hover, .notification-banner .notification-button:focus { border-color: transparent !important; } .notification-buttons-bin .notification-button { border-radius: 10px !important; } .summary-source-counter { font-size: 10pt; font-weight: bold; height: 1.6em; width: 1.6em; -shell-counter-overlap-x: 3px; -shell-counter-overlap-y: 3px; background-color: #81a1c1; color: #fefefe; border: 2px solid #d8dee9; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); border-radius: 0.9em; } .secondary-icon { icon-size: 1.09em; } .chat-body { spacing: 5px; } .chat-response { margin: 5px; } .chat-log-message { color: #b7c2d7; } .chat-new-group { padding-top: 1em; } .chat-received { padding-left: 4px; } .chat-received:rtl { padding-left: 0px; padding-right: 4px; } .chat-sent { padding-left: 18pt; color: #a7b5cd; } .chat-sent:rtl { padding-left: 0; padding-right: 18pt; } .chat-meta-message { padding-left: 4px; font-size: 9pt; font-weight: bold; color: #97a7c4; } .chat-meta-message:rtl { padding-left: 0; padding-right: 4px; } .hotplug-transient-box { spacing: 6px; padding: 2px 72px 2px 12px; } .hotplug-notification-item { padding: 2px 10px; } .hotplug-notification-item:focus { padding: 1px 71px 1px 11px; } .hotplug-notification-item-icon { icon-size: 24px; padding: 2px 5px; } .hotplug-resident-box { spacing: 8px; } .hotplug-resident-mount { spacing: 8px; border-radius: 4px; } .hotplug-resident-mount:hover { background-color: rgba(46, 52, 64, 0.3); } .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 */ .magnifier-zoom-region { border: 2px solid #81a1c1; } .magnifier-zoom-region.full-screen { border-width: 0; } /* On-screen Keyboard */ #keyboard { background-color: rgba(46, 52, 64, 0.65); } .keyboard-layout { spacing: 10px; padding: 10px; } .keyboard-row { spacing: 15px; } .keyboard-key { color: #d8dee9; background-color: #343b49; box-shadow: none; border: 1px solid #343b49; background-color: #2e3440; min-height: 2em; min-width: 2em; font-size: 14pt; font-weight: bold; border-radius: 5px; } .keyboard-key:focus { background-color: #3b4252; color: #fefefe; box-shadow: none !important; border: 1px solid #3b4252; } .keyboard-key:hover, .keyboard-key:checked { background-color: #3b4252; color: #fefefe; border: 1px solid #3b4252; } .keyboard-key:active { color: #fefefe; background-color: #81a1c1; border: 1px solid #1f232b; text-shadow: none; icon-shadow: none; } .keyboard-key:grayed { background-color: rgba(46, 52, 64, 0.95); color: #d8dee9; border-color: rgba(0, 0, 0, 0.7); } .keyboard-subkeys { color: white; padding: 5px; -arrow-border-radius: 10px; -arrow-background-color: rgba(46, 52, 64, 0.65); -arrow-border-width: 2px; -arrow-border-color: #d8dee9; -arrow-base: 20px; -arrow-rise: 10px; -boxpointer-gap: 5px; } .candidate-popup-content { padding: 0.5em; spacing: 0.3em; } .candidate-index { padding: 0 0.5em 0 0; color: #b7c2d7; } .candidate-box { padding: 0.3em 0.5em 0.3em 0.5em; border-radius: 4px; } .candidate-box:selected, .candidate-box:hover { background-color: #81a1c1; color: #fefefe; } .candidate-page-button-box { height: 2em; } .vertical .candidate-page-button-box { padding-top: 0.5em; } .horizontal .candidate-page-button-box { padding-left: 0.5em; } .candidate-page-button { padding: 4px; } .candidate-page-button-previous { border-radius: 4px 0px 0px 4px; border-right-width: 0; } .candidate-page-button-next { border-radius: 0px 4px 4px 0px; } .candidate-page-button-icon { icon-size: 1em; } /* Auth Dialogs & Screen Shield */ .framed-user-icon { background-size: contain; border: 2px solid #d8dee9; color: #d8dee9; border-radius: 3px; } .framed-user-icon:hover { border-color: white; color: white; } .login-dialog-banner-view { padding-top: 24px; max-width: 23em; } .login-dialog { border: none; background-color: transparent; } .login-dialog .modal-dialog-button-box { spacing: 3px; } .login-dialog .modal-dialog-button { padding: 3px 18px; } .login-dialog .modal-dialog-button:default { color: #d8dee9; background-color: #343b49; box-shadow: none; border: 1px solid #343b49; } .login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus { background-color: #3b4252; color: #fefefe; border: 1px solid #3b4252; } .login-dialog .modal-dialog-button:default:active { color: #fefefe; background-color: #81a1c1; border: 1px solid #1f232b; text-shadow: none; icon-shadow: none; } .login-dialog .modal-dialog-button:default:insensitive { color: #838995; background-color: rgba(64, 70, 82, 0.66); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); border: none; text-shadow: none; icon-shadow: none; } .login-dialog-logo-bin { padding: 24px 0px; } .login-dialog-banner { color: #b7c2d7; } .login-dialog-button-box { spacing: 5px; } .login-dialog-message-warning { color: #c3674a; } .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-label, .login-dialog-not-listed-button:hover .login-dialog-not-listed-label { color: #d8dee9; } .login-dialog-not-listed-label { font-size: 90%; font-weight: bold; color: #768bb2; padding-top: 1em; } .login-dialog-user-list-view { -st-vfade-offset: 1em; } .login-dialog-user-list { spacing: 12px; padding: .2em; width: 23em; } .login-dialog-user-list:expanded .login-dialog-user-list-item:selected { background-color: #81a1c1; color: #fefefe; } .login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in { border-right: 2px solid #81a1c1; } .login-dialog-user-list-item { border-radius: 5px; padding: .2em; color: #768bb2; } .login-dialog-user-list-item:ltr { padding-right: 1em; } .login-dialog-user-list-item:rtl { padding-left: 1em; } .login-dialog-user-list-item .login-dialog-timed-login-indicator { height: 2px; margin: 2px 0 0 0; background-color: #d8dee9; } .login-dialog-user-list-item:focus .login-dialog-timed-login-indicator { background-color: #fefefe; } .login-dialog-username, .user-widget-label { color: #d8dee9; font-size: 120%; font-weight: bold; text-align: left; padding-left: 15px; } .user-widget-label:ltr { padding-left: 18px; } .user-widget-label:rtl { padding-right: 18px; } .login-dialog-prompt-layout { padding-top: 24px; padding-bottom: 12px; spacing: 8px; width: 23em; } .login-dialog-prompt-label { color: #97a7c4; font-size: 110%; padding-top: 1em; } .login-dialog-session-list-button StIcon { icon-size: 1.25em; } .login-dialog-session-list-button { color: #768bb2; } .login-dialog-session-list-button:hover, .login-dialog-session-list-button:focus { color: #d8dee9; } .login-dialog-session-list-button:active { color: #46597c; } .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; } .screen-shield-notifications-container .summary-notification-stack-scrollview { padding-top: 0; padding-bottom: 0; } .screen-shield-notifications-container .notification, .screen-shield-notifications-container .screen-shield-notification-source { padding: 12px 6px; border: 1px solid #d8dee9; background-color: rgba(46, 52, 64, 0.45); color: #d8dee9; border-radius: 4px; } .screen-shield-notifications-container .notification { margin-right: 15px; } .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: rgba(46, 52, 64, 0.45); } .screen-shield-background { background: black; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4); } #lockDialogGroup { background: #2e3436 url(resource:///org/gnome/shell/theme/noise-texture.png); background-repeat: repeat; } #screenShieldNotifications StButton#vhandle, #screenShieldNotifications StButton#hhandle { background-color: rgba(46, 52, 64, 0.3); } #screenShieldNotifications StButton#vhandle:hover, #screenShieldNotifications StButton#vhandle:focus, #screenShieldNotifications StButton#hhandle:hover, #screenShieldNotifications StButton#hhandle:focus { background-color: rgba(46, 52, 64, 0.5); } #screenShieldNotifications StButton#vhandle:active, #screenShieldNotifications StButton#hhandle:active { background-color: rgba(129, 161, 193, 0.5); } #LookingGlassDialog { background-color: rgba(0, 0, 0, 0.8); spacing: 4px; padding: 4px; border: 2px solid grey; border-radius: 4px; } #LookingGlassDialog > #Toolbar { border: 1px solid grey; border-radius: 4px; } #LookingGlassDialog .labels { spacing: 4px; } #LookingGlassDialog .notebook-tab { -natural-hpadding: 12px; -minimum-hpadding: 6px; font-weight: bold; color: #ccc; transition-duration: 100ms; padding-left: .3em; padding-right: .3em; } #LookingGlassDialog .notebook-tab:hover { color: white; text-shadow: black 0px 2px 2px; } #LookingGlassDialog .notebook-tab:selected { border-bottom-width: 2px; border-color: #92aec9; color: white; text-shadow: black 0px 2px 2px; } #LookingGlassDialog StBoxLayout#EvalBox { padding: 4px; spacing: 4px; } #LookingGlassDialog StBoxLayout#ResultsArea { spacing: 4px; } .lg-dialog StEntry { selection-background-color: #bbbbbb; selected-color: #333333; } .lg-dialog .shell-link { color: #999999; } .lg-dialog .shell-link:hover { color: #dddddd; } .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; } .lg-obj-inspector-button:hover { border: 1px solid #ffffff; } #lookingGlassExtensions { padding: 4px; } .lg-extensions-list { padding: 4px; spacing: 6px; } .lg-extension { border: 1px solid #6f6f6f; border-radius: 4px; padding: 4px; } .lg-extension-name { font-weight: bold; } .lg-extension-meta { spacing: 6px; } #LookingGlassPropertyInspector { background: rgba(0, 0, 0, 0.8); border: 2px solid grey; border-radius: 4px; padding: 6px; } .quick-settings { padding: 14px; border-radius: 12px; } .quick-settings .icon-button, .quick-settings .button { padding: 10.5px; color: #d8dee9; } .quick-toggle { border-radius: 99px; /* Move padding into the box; this is to allow menu arrows to extend to the border */ } .quick-toggle:checked { color: #fefefe; background-color: rgba(129, 161, 193, 0.6); border: 1px solid #1f232b; text-shadow: none; icon-shadow: none; } .quick-toggle:checked:hover { color: #fefefe; background-color: rgba(150, 176, 203, 0.6); border: 1px solid #1f232b; text-shadow: none; icon-shadow: none; } .quick-toggle:checked, .quick-toggle:checked:hover { color: #fefefe; } .quick-toggle, .quick-toggle:hover, .quick-toggle:checked, .quick-toggle:checked:hover { border: none; } .quick-toggle > StBoxLayout { spacing: 6px; } .quick-toggle.button { padding: 0; } .quick-toggle > StBoxLayout { padding: 0 12px; } .quick-toggle:ltr > StBoxLayout { padding-left: 15px; } .quick-toggle:rtl > StBoxLayout { padding-right: 15px; } .quick-toggle .quick-toggle-label { font-weight: bold; } .quick-menu-toggle:ltr > StBoxLayout, .quick-toggle-has-menu:ltr > StBoxLayout { padding-right: 0; } .quick-menu-toggle:rtl > StBoxLayout, .quick-toggle-has-menu:rtl > StBoxLayout { padding-left: 0; } .quick-menu-toggle .quick-toggle, .quick-toggle-has-menu .quick-toggle { min-width: auto; max-width: auto; } .quick-menu-toggle .quick-toggle:ltr, .quick-toggle-has-menu .quick-toggle:ltr { border-radius: 99px 0 0 99px; } .quick-menu-toggle .quick-toggle:rtl, .quick-toggle-has-menu .quick-toggle:rtl { border-radius: 0 99px 99px 0; } .quick-menu-toggle .quick-toggle:ltr:last-child, .quick-toggle-has-menu .quick-toggle:ltr:last-child { border-radius: 99px; } .quick-menu-toggle .quick-toggle:rtl:last-child, .quick-toggle-has-menu .quick-toggle:rtl:last-child { border-radius: 99px; } .quick-menu-toggle .quick-toggle-arrow, .quick-menu-toggle .quick-toggle-menu-button, .quick-toggle-has-menu .quick-toggle-arrow, .quick-toggle-has-menu .quick-toggle-menu-button { background-color: rgba(57, 64, 79, 0.6); padding: 6px 10.5px; border-width: 0; color: #d8dee9; } .quick-menu-toggle .quick-toggle-arrow:checked, .quick-menu-toggle .quick-toggle-menu-button:checked, .quick-toggle-has-menu .quick-toggle-arrow:checked, .quick-toggle-has-menu .quick-toggle-menu-button:checked { color: #fefefe; background-color: rgba(129, 161, 193, 0.9); border: 1px solid #1f232b; text-shadow: none; icon-shadow: none; } .quick-menu-toggle .quick-toggle-arrow:checked:hover, .quick-menu-toggle .quick-toggle-menu-button:checked:hover, .quick-toggle-has-menu .quick-toggle-arrow:checked:hover, .quick-toggle-has-menu .quick-toggle-menu-button:checked:hover { color: #fefefe; background-color: rgba(146, 174, 201, 0.9); border: 1px solid #1f232b; text-shadow: none; icon-shadow: none; } .quick-menu-toggle .quick-toggle-arrow:checked, .quick-menu-toggle .quick-toggle-arrow:checked:hover, .quick-menu-toggle .quick-toggle-menu-button:checked, .quick-menu-toggle .quick-toggle-menu-button:checked:hover, .quick-toggle-has-menu .quick-toggle-arrow:checked, .quick-toggle-has-menu .quick-toggle-arrow:checked:hover, .quick-toggle-has-menu .quick-toggle-menu-button:checked, .quick-toggle-has-menu .quick-toggle-menu-button:checked:hover { color: #fefefe; border-width: 0; } .quick-menu-toggle .quick-toggle-arrow:hover, .quick-menu-toggle .quick-toggle-menu-button:hover, .quick-toggle-has-menu .quick-toggle-arrow:hover, .quick-toggle-has-menu .quick-toggle-menu-button:hover { background-color: #3d4555; } .quick-menu-toggle .quick-toggle-arrow:ltr, .quick-menu-toggle .quick-toggle-menu-button:ltr, .quick-toggle-has-menu .quick-toggle-arrow:ltr, .quick-toggle-has-menu .quick-toggle-menu-button:ltr { border-radius: 0 99px 99px 0; } .quick-menu-toggle .quick-toggle-arrow:rtl, .quick-menu-toggle .quick-toggle-menu-button:rtl, .quick-toggle-has-menu .quick-toggle-arrow:rtl, .quick-toggle-has-menu .quick-toggle-menu-button:rtl { border-radius: 99px 0 0 99px; } .quick-menu-toggle .quick-toggle-menu-button, .quick-toggle-has-menu .quick-toggle-menu-button { background-color: #39404f; } .quick-menu-toggle .quick-toggle-separator, .quick-toggle-has-menu .quick-toggle-separator { width: 0; } .quick-toggle-menu { background-color: #2e3440 !important; border-radius: 12px; padding: 12px; margin: 12px 18px 0; color: #d8dee9; } .quick-toggle-menu .popup-menu-item > StIcon { -st-icon-style: symbolic; } .quick-toggle-menu .header { spacing-rows: 3px; spacing-columns: 12px; padding-bottom: 12px; } .quick-toggle-menu .header .icon { border-radius: 999px; padding: 9px; background-color: #434c5e; } .quick-toggle-menu .header .icon.active { background-color: #81a1c1; color: #fefefe; } .quick-settings-system-item > StBoxLayout { spacing: 12px; } .quick-settings-system-item .icon-button { border-radius: 50px; } .quick-slider .icon-button:hover { background-color: #3b4252; color: #fefefe; border: 1px solid #3b4252; } .screenshot-ui-close-button { background-color: #bf616a; } .screenshot-ui-close-button:hover, .screenshot-ui-close-button:active { background-color: #c36c74; } .screenshot-ui-window-selector { background-color: #2e3440; } .screenshot-ui-window-selector-window:hover .screenshot-ui-window-selector-window-border { border-color: #517ba5; } .screenshot-ui-window-selector-window:checked .screenshot-ui-window-selector-window-border { border-color: #81a1c1; background-color: rgba(129, 161, 193, 0.2); } .screenshot-ui-window-selector-window:checked .screenshot-ui-window-selector-check { color: #2e3440; background-color: #81a1c1; } .openweather-current-summarybox, .openweather-forecast-icon, .openweather-current-databox-captions, .openweather-current-databox-values, .openweather-current-icon, .openweather-forecast-summary, .openweather-forecast-temperature { background: transparent; } .openweather-current-databox-captions, .openweather-forecast-day { color: #81a1c1; } /*# sourceMappingURL=gnome-shell.css.map */ ================================================ FILE: gnome-shell/gnome-shell.scss ================================================ $subtheme: 'main'; @import "colors"; //use gtk colors @import "drawing"; @import "common"; @import "extensions" ================================================ FILE: gtk-2.0/apps/chrome.rc ================================================ # ============================================================================== # CHROME/-UIM SPECIFIC SETTINGS # ============================================================================== # Chromium lets us define some colours and settings for better integration style "chrome-gtk-frame" { ChromeGtkFrame::frame-color = @wm_color ChromeGtkFrame::inactive-frame-color = @unfocused_wm_color ChromeGtkFrame::frame-gradient-size = 16 ChromeGtkFrame::frame-gradient-color = shade(1.07, @wm_color) ChromeGtkFrame::incognito-frame-color = shade(0.85, @wm_color) ChromeGtkFrame::incognito-inactive-frame-color = @wm_color ChromeGtkFrame::incognito-frame-gradient-color = @wm_color ChromeGtkFrame::scrollbar-trough-color = shade(0.912, @wm_color) ChromeGtkFrame::scrollbar-slider-prelight-color = shade(1.04, @wm_color) ChromeGtkFrame::scrollbar-slider-normal-color = @wm_color } class "ChromeGtkFrame" style "chrome-gtk-frame" # Chromium uses base as the fill colour of its own entries # This would be fine but Gtk+ uses it to fill the surrounding space, so its set to bg # That results in Chromium using it for the fill, so we need to handle that style "chrome_entry" { base[NORMAL] = @base_color base[INSENSITIVE] = @base_color } widget_class "*Chrom*" style "chrome_entry" # Chrome Menu item background style "chrome_menu_item" { bg[SELECTED] = @wm_color } widget_class "***" style "chrome_menu_item" # Chrome buttons widget_class "*Chrom*Button*" style "button" ================================================ FILE: gtk-2.0/apps/gimp.rc ================================================ # ============================================================================== # GIMP SPECIFIC SETTINGS # ============================================================================== # TODO: This could really look nicer style "gimp_spin_scale" { # Spin background bg[NORMAL] = @base_color engine "pixmap" { image { function = BOX state = NORMAL detail = "spinbutton_up" overlay_file = "assets/spin-up.png" overlay_stretch = FALSE } image { function = BOX state = PRELIGHT detail = "spinbutton_up" overlay_file = "assets/spin-up.png" overlay_stretch = FALSE } image { function = BOX state = ACTIVE detail = "spinbutton_up" overlay_file = "assets/spin-up.png" overlay_stretch = FALSE } image { function = BOX state = INSENSITIVE detail = "spinbutton_up" overlay_file = "assets/spin-up-insensitive.png" overlay_stretch = FALSE } image { function = BOX state = NORMAL detail = "spinbutton_down" overlay_file = "assets/spin-down.png" overlay_stretch = FALSE } image { function = BOX state = PRELIGHT detail = "spinbutton_down" overlay_file = "assets/spin-down.png" overlay_stretch = FALSE } image { function = BOX state = ACTIVE detail = "spinbutton_down" overlay_file = "assets/spin-down.png" overlay_stretch = FALSE } image { function = BOX state = INSENSITIVE detail = "spinbutton_down" overlay_file = "assets/spin-down-insensitive.png" overlay_stretch = FALSE } } } # Disable spin button assets for GimpSpinScale class "GimpSpinScale" style "gimp_spin_scale" ================================================ FILE: gtk-2.0/apps/libreoffice.rc ================================================ # ============================================================================== # OPEN/LIBREOFFICE SPECIFIC SETTINGS # ============================================================================== style "ooo_stepper_hack" { GtkScrollbar::stepper-size = 13 GtkScrollbar::has-backward-stepper = 1 GtkScrollbar::has-forward-stepper = 1 } widget "*openoffice-toplevel*" style "ooo_stepper_hack" ================================================ FILE: gtk-2.0/apps/terminal.rc ================================================ # ============================================================================== # GNOME TERMINAL SPECIFIC SETTINGS # ============================================================================== style "terminal_window" = "dark" { } style "terminal_menubar" { engine "murrine" { } } style "terminal_notebook" = "dark" { fg[ACTIVE] = mix (0.8, "#DADBDB", "#DADBDB") engine "murrine" { } } style "terminal_scrollbar" = "scrollbar" { bg[NORMAL] = "#263238" bg[PRELIGHT] = shade(1.08, "#263238") bg[ACTIVE] = shade(0.94, "#263238") bg[SELECTED] = shade(1.0, @selected_bg_color) bg[INSENSITIVE] = "#263238" engine "murrine" { } } style "terminal_screen" { text[NORMAL] = "#DADBDB" base[NORMAL] = "#384952" TerminalScreen::background-darkness = 0.95 } widget "*TerminalWindow*" style "terminal_window" #widget "*TerminalWindow.*.*enu?ar" style "terminal_menubar" widget "*TerminalWindow.*.GtkNotebook*" style "terminal_notebook" widget "*TerminalWindow.*.GtkNotebook.*.GtkVScrollbar*" style "terminal_scrollbar" #widget "*TerminalWindow.*.GtkNotebook*utton*" style "terminal_button" widget "*TerminalWindow.*.TerminalScreen*" style "terminal_screen" ================================================ FILE: gtk-2.0/apps/thunar.rc ================================================ # ============================================================================== # THUNAR SPECIFIC SETTINGS # ============================================================================== style "sidepane" { base[NORMAL] = @bg_color base[INSENSITIVE] = mix(0.4, shade(1.35, @selected_bg_color), shade(0.9, @base_color)) bg[NORMAL] = @bg_color text[NORMAL] = mix(0.9, @fg_color, @bg_color) } widget_class "*ThunarShortcutsView*" style "sidepane" widget_class "*ThunarTreeView*" style "sidepane" ================================================ FILE: gtk-2.0/apps/xfce.rc ================================================ style "theme-panel" = "dark" { xthickness = 1 ythickness = 1 bg[NORMAL] = @panel_bg_color fg[NORMAL] = @panel_fg_color } style "xfdesktop-icon-view" { XfdesktopIconView::label-alpha = 0 XfdesktopIconView::selected-label-alpha = 80 XfdesktopIconView::shadow-x-offset = 0 XfdesktopIconView::shadow-y-offset = 0 XfdesktopIconView::selected-shadow-x-offset = 0 XfdesktopIconView::selected-shadow-y-offset = 0 XfdesktopIconView::shadow-color = @tooltip_bg_color XfdesktopIconView::selected-shadow-color = @tooltip_bg_color XfdesktopIconView::cell-spacing = 2 XfdesktopIconView::cell-padding = 6 XfdesktopIconView::cell-text-width-proportion = 1.9 fg[NORMAL] = shade (0.9, @selected_fg_color) fg[ACTIVE] = @selected_fg_color } style "theme-panel-text" = "dark" { } style "panel-entry" = "dark" { } style "theme-main-menu-text" = "theme-panel-text" { fg[PRELIGHT] = "#ffffff" text[PRELIGHT] = "#ffffff" } style "workspace-switcher" = "dark" { bg[SELECTED] = shade (0.8, @selected_bg_color) } style "window-buttons" = "dark" { } style "indicator" = "theme-panel" { xthickness = 0 ythickness = 0 } 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 "*WnckPager*" style "workspace-switcher" widget "*XfdesktopIconView*" style "xfdesktop-icon-view" # Fix gtk-entries in the panel class "*SexyIconEntry*" style:highest "entry" # fixes dict-plugin widget "*xfce4-verve-plugin*GtkEntry" style:highest "entry" # fixes verve-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" #widget "*XfceTasklist*" style "dark_button" ================================================ FILE: gtk-2.0/assets.txt ================================================ menu-checkbox menu-checkbox-hover menu-checkbox-insensitive menu-checkbox-checked menu-checkbox-checked-hover menu-checkbox-checked-insensitive menu-checkbox-mixed menu-checkbox-mixed-hover menu-checkbox-mixed-insensitive menu-radio menu-radio-hover menu-radio-insensitive menu-radio-checked menu-radio-checked-hover menu-radio-checked-insensitive menu-radio-mixed menu-radio-mixed-hover menu-radio-mixed-insensitive menu-pan-left menu-pan-left-hover menu-pan-left-insensitive menu-pan-right menu-pan-right-hover menu-pan-right-insensitive menu-pan-up menu-pan-up-insensitive menu-pan-down menu-pan-down-insensitive button button-hover button-active button-insensitive toolbar-button-hover toolbar-button-active combo-entry-ltr-entry combo-entry-ltr-entry-active combo-entry-ltr-entry-insensitive combo-entry-ltr-button combo-entry-ltr-button-hover combo-entry-ltr-button-active combo-entry-ltr-button-insensitive combo-entry-rtl-entry combo-entry-rtl-entry-active combo-entry-rtl-entry-insensitive combo-entry-rtl-button combo-entry-rtl-button-hover combo-entry-rtl-button-active combo-entry-rtl-button-insensitive entry entry-active entry-insensitive entry-background entry-background-insensitive border frame frame-inline frame-notebook line focus handle handle-horz handle-vert menu-border menubar-item-active notebook-entry notebook-entry-active notebook-entry-insensitive notebook-combo-entry-ltr-entry notebook-combo-entry-ltr-entry-active notebook-combo-entry-ltr-entry-insensitive notebook-combo-entry-rtl-entry notebook-combo-entry-rtl-entry-active notebook-combo-entry-rtl-entry-insensitive pan-left pan-left-semi pan-left-insensitive pan-right pan-right-semi pan-right-insensitive pan-up pan-up-insensitive pan-down pan-down-insensitive progressbar-horz progressbar-horz-trough progressbar-vert progressbar-vert-trough scrollbar-horz-slider scrollbar-horz-slider-hover scrollbar-horz-slider-active scrollbar-horz-trough scrollbar-vert-slider scrollbar-vert-slider-hover scrollbar-vert-slider-active scrollbar-vert-trough scrollbar-vert-slider-rtl scrollbar-vert-slider-hover-rtl scrollbar-vert-slider-active-rtl scrollbar-vert-trough-rtl spin-ltr-down spin-ltr-down-hover spin-ltr-down-active spin-ltr-down-insensitive spin-ltr-up spin-ltr-up-hover spin-ltr-up-active spin-ltr-up-insensitive spin-rtl-down spin-rtl-down-hover spin-rtl-down-active spin-rtl-down-insensitive spin-rtl-up spin-rtl-up-hover spin-rtl-up-active spin-rtl-up-insensitive spin-up spin-down spin-up-insensitive spin-down-insensitive scale-slider scale-slider-hover scale-slider-active scale-slider-insensitive scale-horz-focus scale-horz-trough scale-horz-trough-active scale-vert-trough scale-vert-trough-active tab-left tab-left-active tab-right tab-right-active tab-up tab-up-active tab-down tab-down-active tab-horz-gap tab-vert-gap treeview-pan-up treeview-pan-up-hover treeview-pan-up-active treeview-pan-down treeview-pan-down-hover treeview-pan-down-active treeview-separator-ltr treeview-separator-rtl ================================================ FILE: gtk-2.0/gtkrc ================================================ # Text/base colors gtk-color-scheme = "text_color:#3b4252\nbase_color:#e5e9f0" # Foreground/background colors gtk-color-scheme = "fg_color:#3b4252\nbg_color:#d8dee9" # Selection colors gtk-color-scheme = "selected_fg_color:#fefefe\nselected_bg_color:#81a1c1" # Tooltip colors gtk-color-scheme = "tooltip_fg_color:#ffffff\ntooltip_bg_color:#282d37" # Window colors gtk-color-scheme = "wm_color:#31363d\nunfocused_wm_color:#31363d" # Panel colors gtk-color-scheme = "panel_bg_color:#2e3440\npanel_fg_color:#d8dee9" # Dark Theme - Text/base colors gtk-color-scheme = "dark_text_color:#3b4252\ndark_base_color:#e5e9f0" # Dark Theme - Foreground/background colors gtk-color-scheme = "dark_fg_color:#3b4252\ndark_bg_color:#d8dee9" gtk-auto-mnemonics = 1 gtk-primary-button-warps-slider = 1 include "main.rc" # App stylings include "apps/chrome.rc" include "apps/gimp.rc" include "apps/libreoffice.rc" include "apps/terminal.rc" include "apps/thunar.rc" include "apps/xfce.rc" ================================================ FILE: gtk-2.0/links.fish ================================================ set -l files 'checkbox' 'radio' set -l states 'unchecked' 'checked' 'mixed' set -l sub_states 'active' 'hover' 'insensitive' for f in $files; for s in $states; ln -sf ../../assets/$f-$s.png ./assets/$f-$s.png for i in $sub_states; ln -sf ../../assets/$f-$s-$i.png ./assets/$f-$s-$i.png ;end ;end ;end ================================================ FILE: gtk-2.0/main.rc ================================================ style "default" { xthickness = 1 ythickness = 1 #################### # Style Properties # #################### GtkWidget::focus-line-width = 1 GtkWidget::focus-line-pattern = "\2\1" GtkToolbar::internal-padding = 4 GtkToolButton::icon-spacing = 4 GtkWidget::tooltip-radius = 3 GtkWidget::tooltip-alpha = 235 GtkWidget::new-tooltip-style = 1 #for compatibility GtkWidget::link-color = shade(0.9, @selected_bg_color) GtkWidget::visited-link-color = shade(0.8, @selected_bg_color) GnomeHRef::link_color = shade(0.9, @selected_bg_color) GtkHTML::link-color = shade(0.9, @selected_bg_color) GtkHTML::vlink-color = shade(0.8, @selected_bg_color) GtkIMHtml::hyperlink-color = shade(0.9, @selected_bg_color) GtkIMHtml::hyperlink-visited-color = shade(0.8, @selected_bg_color) GtkSeparatorMenuItem::horizontal-padding = 0 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} GtkButton::inner-border = {4, 4, 4, 4} GtkEntry::state-hint = 1 GtkEntry::inner-border = {7, 7, 4, 5} GtkPaned::handle-size = 2 GtkHPaned::handle-size = 2 GtkVPaned::handle-size = 2 GtkScrollbar::trough-border = 0 GtkRange::trough-border = 0 GtkRange::slider-width = 13 GtkRange::stepper-size = 0 GtkRange::activate-slider = 1 GtkScrollbar::activate-slider = 1 GtkScrollbar::stepper-size = 0 GtkScrollbar::has-backward-stepper = 0 GtkScrollbar::has-forward-stepper = 0 GtkScrollbar::min-slider-length = 48 # 42 + 2*3 (margins) GtkScrolledWindow::scrollbar-spacing = 0 GtkScrolledWindow::scrollbars-within-bevel = 1 GtkScale::slider_length = 26 GtkScale::slider_width = 26 GtkScale::trough-side-details = 1 GtkProgressBar::min-horizontal-bar-height = 6 GtkProgressBar::min-vertical-bar-width = 6 # Making this bigger than the min[height,width]-2*[y,x]spacing makes the # whole progressbar thicker, so by setting it to the exact above value # we get the maximum spacing between the text and the edges without # doing so. GtkProgressBar::xspacing = 4 GtkProgressBar::yspacing = 4 GtkStatusbar::shadow_type = GTK_SHADOW_NONE GtkSpinButton::shadow_type = GTK_SHADOW_NONE GtkMenuBar::shadow-type = GTK_SHADOW_NONE GtkToolbar::shadow-type = GTK_SHADOW_NONE # TODO: find out what this comment means: # ( every window is misaligned for the sake of menus ): GtkMenuBar::internal-padding = 0 GtkMenu::horizontal-padding = 0 GtkMenu::vertical-padding = 2 GtkMenu::double-arrows = 0 GtkMenuItem::arrow-scaling = 1 GtkMenuItem::toggle-spacing = 10 GtkCheckButton::indicator_spacing = 3 GtkOptionMenu::indicator_spacing = {13, 13, 5, 8} GtkTreeView::expander-size = 16 GtkTreeView::vertical-separator = 0 GtkTreeView::horizontal-separator = 4 GtkTreeView::allow-rules = 1 # Set this because some apps read it GtkTreeView::odd-row-color = @base_color GtkTreeView::even-row-color = @base_color GtkTreeView::odd_row_color = shade(0.97, @base_color) GtkExpander::expander-size = 16 GtkNotebook::tab-overlap = 4 ########## # Colors # ########## bg[NORMAL] = @bg_color bg[PRELIGHT] = @bg_color bg[SELECTED] = @selected_bg_color bg[INSENSITIVE] = mix (0.6, @bg_color, @base_color) bg[ACTIVE] = @bg_color fg[NORMAL] = @fg_color fg[PRELIGHT] = @fg_color fg[SELECTED] = @selected_fg_color fg[INSENSITIVE] = mix (0.5, @fg_color, @bg_color) fg[ACTIVE] = @fg_color text[NORMAL] = @text_color text[PRELIGHT] = @text_color text[SELECTED] = @selected_fg_color text[INSENSITIVE] = darker (@bg_color) text[ACTIVE] = @selected_fg_color base[NORMAL] = @base_color base[PRELIGHT] = shade (0.95, @bg_color) base[SELECTED] = @selected_bg_color base[INSENSITIVE] = mix (0.5, @fg_color, @bg_color) base[ACTIVE] = @selected_bg_color # For succinctness, all reasonable pixmap options remain here # Draw frame around menu in a non-compositied environment # This needs to go before pixmap because we need to override some stuff engine "adwaita" {} engine "pixmap" { ################# # Check Buttons # ################# image { function = CHECK state = NORMAL shadow = OUT overlay_file = "assets/checkbox-unchecked.png" overlay_stretch = FALSE } image { function = CHECK state = PRELIGHT shadow = OUT overlay_file = "assets/checkbox-unchecked-hover.png" overlay_stretch = FALSE } image { function = CHECK state = ACTIVE shadow = OUT overlay_file = "assets/checkbox-unchecked-active.png" overlay_stretch = FALSE } image { function = CHECK state = SELECTED shadow = OUT overlay_file = "assets/checkbox-unchecked.png" overlay_stretch = FALSE } image { function = CHECK state = INSENSITIVE shadow = OUT overlay_file = "assets/checkbox-unchecked-insensitive.png" overlay_stretch = FALSE } image { function = CHECK state = NORMAL shadow = IN overlay_file = "assets/checkbox-checked.png" overlay_stretch = FALSE } image { function = CHECK state = PRELIGHT shadow = IN overlay_file = "assets/checkbox-checked-hover.png" overlay_stretch = FALSE } image { function = CHECK state = ACTIVE shadow = IN overlay_file = "assets/checkbox-checked-active.png" overlay_stretch = FALSE } image { function = CHECK state = SELECTED shadow = IN overlay_file = "assets/checkbox-checked.png" overlay_stretch = FALSE } image { function = CHECK state = INSENSITIVE shadow = IN overlay_file = "assets/checkbox-checked-insensitive.png" overlay_stretch = FALSE } image { function = CHECK state = NORMAL shadow = ETCHED_IN overlay_file = "assets/checkbox-mixed.png" overlay_stretch = FALSE } image { function = CHECK state = PRELIGHT shadow = ETCHED_IN overlay_file = "assets/checkbox-mixed-hover.png" overlay_stretch = FALSE } image { function = CHECK state = ACTIVE shadow = ETCHED_IN overlay_file = "assets/checkbox-mixed-active.png" overlay_stretch = FALSE } image { function = CHECK state = SELECTED shadow = ETCHED_IN overlay_file = "assets/checkbox-mixed.png" overlay_stretch = FALSE } image { function = CHECK state = INSENSITIVE shadow = ETCHED_IN overlay_file = "assets/checkbox-mixed-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-hover.png" overlay_stretch = FALSE } image { function = OPTION state = ACTIVE shadow = OUT overlay_file = "assets/radio-unchecked-active.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-hover.png" overlay_stretch = FALSE } image { function = OPTION state = ACTIVE shadow = IN overlay_file = "assets/radio-checked-active.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 } image { function = OPTION state = NORMAL shadow = ETCHED_IN overlay_file = "assets/radio-mixed.png" overlay_stretch = FALSE } image { function = OPTION state = PRELIGHT shadow = ETCHED_IN overlay_file = "assets/radio-mixed-hover.png" overlay_stretch = FALSE } image { function = OPTION state = ACTIVE shadow = ETCHED_IN overlay_file = "assets/radio-mixed-active.png" overlay_stretch = FALSE } image { function = OPTION state = SELECTED shadow = ETCHED_IN overlay_file = "assets/radio-mixed.png" overlay_stretch = FALSE } image { function = OPTION state = INSENSITIVE shadow = ETCHED_IN overlay_file = "assets/radio-mixed-insensitive.png" overlay_stretch = FALSE } ########## # Arrows # ########## # Overrides # Disable arrows in spinbuttons image { function = ARROW detail = "spinbutton" } # Disable arrows for qt in scrollbars image { function = ARROW detail = "vscrollbar" } image { function = ARROW detail = "hscrollbar" } # Menu arrows image { function = ARROW state = NORMAL detail = "menuitem" overlay_file = "assets/menu-pan-left.png" overlay_stretch = FALSE arrow_direction = LEFT } image { function = ARROW state = PRELIGHT detail = "menuitem" overlay_file = "assets/menu-pan-left-hover.png" overlay_stretch = FALSE arrow_direction = LEFT } image { function = ARROW state = INSENSITIVE detail = "menuitem" overlay_file = "assets/menu-pan-left-insensitive.png" overlay_stretch = FALSE arrow_direction = LEFT } image { function = ARROW state = NORMAL detail = "menuitem" overlay_file = "assets/menu-pan-right.png" overlay_stretch = FALSE arrow_direction = RIGHT } image { function = ARROW state = PRELIGHT detail = "menuitem" overlay_file = "assets/menu-pan-right-hover.png" overlay_stretch = FALSE arrow_direction = RIGHT } image { function = ARROW state = INSENSITIVE detail = "menuitem" overlay_file = "assets/menu-pan-right-insensitive.png" overlay_stretch = FALSE arrow_direction = RIGHT } image { function = ARROW state = INSENSITIVE detail = "menu_scroll_arrow_up" overlay_file = "assets/menu-pan-up-insensitive.png" overlay_stretch = FALSE } image { function = ARROW detail = "menu_scroll_arrow_up" overlay_file = "assets/menu-pan-up.png" overlay_stretch = FALSE } image { function = ARROW state = INSENSITIVE detail = "menu_scroll_arrow_down" overlay_file = "assets/menu-pan-down-insensitive.png" overlay_stretch = FALSE } image { function = ARROW detail = "menu_scroll_arrow_down" overlay_file = "assets/menu-pan-down.png" overlay_stretch = FALSE } # Regular arrows image { function = ARROW state = NORMAL overlay_file = "assets/pan-up.png" overlay_stretch = FALSE arrow_direction = UP } image { function = ARROW state = PRELIGHT overlay_file = "assets/pan-up.png" overlay_stretch = FALSE arrow_direction = UP } image { function = ARROW state = ACTIVE overlay_file = "assets/pan-up.png" overlay_stretch = FALSE arrow_direction = UP } image { function = ARROW state = INSENSITIVE overlay_file = "assets/pan-up-insensitive.png" overlay_stretch = FALSE arrow_direction = UP } image { function = ARROW state = NORMAL overlay_file = "assets/pan-down.png" overlay_stretch = FALSE arrow_direction = DOWN } image { function = ARROW state = PRELIGHT overlay_file = "assets/pan-down.png" overlay_stretch = FALSE arrow_direction = DOWN } image { function = ARROW state = ACTIVE overlay_file = "assets/pan-down.png" overlay_stretch = FALSE arrow_direction = DOWN } image { function = ARROW state = INSENSITIVE overlay_file = "assets/pan-down-insensitive.png" overlay_stretch = FALSE arrow_direction = DOWN } image { function = ARROW state = NORMAL overlay_file = "assets/pan-left.png" overlay_stretch = FALSE arrow_direction = LEFT } image { function = ARROW state = PRELIGHT overlay_file = "assets/pan-left.png" overlay_stretch = FALSE arrow_direction = LEFT } image { function = ARROW state = ACTIVE overlay_file = "assets/pan-left.png" overlay_stretch = FALSE arrow_direction = LEFT } image { function = ARROW state = INSENSITIVE overlay_file = "assets/pan-left-insensitive.png" overlay_stretch = FALSE arrow_direction = LEFT } image { function = ARROW state = NORMAL overlay_file = "assets/pan-right.png" overlay_stretch = FALSE arrow_direction = RIGHT } image { function = ARROW state = PRELIGHT overlay_file = "assets/pan-right.png" overlay_stretch = FALSE arrow_direction = RIGHT } image { function = ARROW state = ACTIVE overlay_file = "assets/pan-right.png" overlay_stretch = FALSE arrow_direction = RIGHT } image { function = ARROW state = INSENSITIVE overlay_file = "assets/pan-right-insensitive.png" overlay_stretch = FALSE arrow_direction = RIGHT } ###################### # Option Menu Arrows # ###################### image { function = TAB state = NORMAL overlay_file = "assets/pan-down.png" overlay_stretch = FALSE } image { function = TAB state = PRELIGHT overlay_file = "assets/pan-down.png" overlay_stretch = FALSE } image { function = TAB state = ACTIVE overlay_file = "assets/pan-down.png" overlay_stretch = FALSE } image { function = TAB state = INSENSITIVE overlay_file = "assets/pan-down-insensitive.png" overlay_stretch = FALSE } ######### # Lines # ######### image { function = VLINE file = "assets/line.png" border = {1, 0, 0, 0} } image { function = HLINE file = "assets/line.png" border = {0, 0, 1, 0} } ######### # Focus # ######### image { function = FOCUS file = "assets/focus.png" border = {1, 1, 1, 1} stretch = TRUE } ########### # Handles # ########### image { function = HANDLE detail = "handlebox" overlay_file = "assets/handle.png" overlay_stretch = FALSE } image { function = HANDLE overlay_file = "assets/handle-horz.png" #border = {0, 0, 4, 4} orientation = HORIZONTAL } image { function = HANDLE overlay_file = "assets/handle-vert.png" #border = {4, 4, 0, 0} orientation = VERTICAL } image { function = RESIZE_GRIP } ############# # Expanders # ############# image { function = EXPANDER expander_style = EXPANDED file = "assets/pan-down.png" } # LTR image { function = EXPANDER expander_style = COLLAPSED file = "assets/pan-right.png" direction = LTR } image { function = EXPANDER expander_style = SEMI_COLLAPSED file = "assets/pan-right-semi.png" direction = LTR } image { function = EXPANDER expander_style = SEMI_EXPANDED file = "assets/pan-right-semi.png" direction = LTR } # RTL image { function = EXPANDER expander_style = COLLAPSED file = "assets/pan-left.png" direction = RTL } image { function = EXPANDER expander_style = SEMI_COLLAPSED file = "assets/pan-left-semi.png" direction = RTL } image { function = EXPANDER expander_style = SEMI_EXPANDED file = "assets/pan-left-semi.png" direction = RTL } ############# # Notebooks # ############# # Left image { function = EXTENSION state = NORMAL file = "assets/tab-left-active.png" border = { 3,3,3,3 } stretch = TRUE gap_side = RIGHT } image { function = EXTENSION file = "assets/tab-left.png" border = { 3,3,3,3 } stretch = TRUE gap_side = RIGHT } # Right image { function = EXTENSION state = NORMAL file = "assets/tab-right-active.png" border = { 3,3,3,3 } stretch = TRUE gap_side = LEFT } image { function = EXTENSION file = "assets/tab-right.png" border = { 3,3,3,3 } stretch = TRUE gap_side = LEFT } # Up image { function = EXTENSION state = NORMAL file = "assets/tab-up-active.png" border = { 3,3,5,3 } stretch = TRUE gap_side = BOTTOM } image { function = EXTENSION file = "assets/tab-up.png" border = { 3,3,3,3 } stretch = TRUE gap_side = BOTTOM } # Down image { function = EXTENSION state = NORMAL file = "assets/tab-down-active.png" border = { 3,3,3,5 } stretch = TRUE gap_side = TOP } image { function = EXTENSION file = "assets/tab-down.png" border = { 3,3,3,3 } stretch = TRUE gap_side = TOP } # Inner frame image { function = BOX_GAP detail = "notebook" file = "assets/frame-notebook.png" border = {1, 1, 1, 1} stretch = TRUE gap_file = "assets/tab-vert-gap.png" gap_border = {1, 0, 1, 1} gap_side = LEFT } image { function = BOX_GAP detail = "notebook" file = "assets/frame-notebook.png" border = {1, 1, 1, 1} stretch = TRUE gap_file = "assets/tab-vert-gap.png" gap_border = {0, 1, 1, 1} gap_side = RIGHT } image { function = BOX_GAP detail = "notebook" file = "assets/frame-notebook.png" border = {1, 1, 1, 1} stretch = TRUE gap_file = "assets/tab-horz-gap.png" gap_border = {1, 1, 1, 0} gap_side = TOP } image { function = BOX_GAP detail = "notebook" file = "assets/frame-notebook.png" border = {1, 1, 1, 1} stretch = TRUE gap_file = "assets/tab-horz-gap.png" gap_border = {1, 1, 0, 1} gap_side = BOTTOM } # Standalone frame image { function = BOX detail = "notebook" file = "assets/frame-notebook.png" border = {1, 1, 1, 1} stretch = TRUE } ############## # Scrollbars # ############## image { function = BOX detail = "trough" file = "assets/scrollbar-horz-trough.png" border = {0, 0, 1, 0} orientation = HORIZONTAL } image { function = BOX detail = "trough" file = "assets/scrollbar-vert-trough.png" border = {1, 0, 0, 0} orientation = VERTICAL direction = LTR } image { function = BOX detail = "trough" file = "assets/scrollbar-vert-trough-rtl.png" border = {0, 1, 0, 0} orientation = VERTICAL direction = RTL } # Disable insensitive sliders image { function = SLIDER state = INSENSITIVE detail = "slider" } # Horizontal sliders image { function = SLIDER state = NORMAL detail = "slider" file = "assets/scrollbar-horz-slider.png" border = {6, 6, 7, 6 } stretch = TRUE orientation = HORIZONTAL } image { function = SLIDER state = PRELIGHT detail = "slider" file = "assets/scrollbar-horz-slider-hover.png" border = {6, 6, 7, 6 } stretch = TRUE orientation = HORIZONTAL } image { function = SLIDER state = ACTIVE detail = "slider" file = "assets/scrollbar-horz-slider-active.png" border = {6, 6, 7, 6 } stretch = TRUE orientation = HORIZONTAL } # Vertical sliders image { function = SLIDER state = NORMAL detail = "slider" file = "assets/scrollbar-vert-slider.png" border = {7, 6, 6, 6} stretch = TRUE orientation = VERTICAL direction = LTR } image { function = SLIDER state = PRELIGHT detail = "slider" file = "assets/scrollbar-vert-slider-hover.png" border = {7, 6, 6, 6} stretch = TRUE orientation = VERTICAL direction = LTR } image { function = SLIDER state = ACTIVE detail = "slider" file = "assets/scrollbar-vert-slider-active.png" border = {7, 6, 6, 6} stretch = TRUE orientation = VERTICAL direction = LTR } # RTL image { function = SLIDER state = NORMAL detail = "slider" file = "assets/scrollbar-vert-slider-rtl.png" border = {6, 7, 6, 6} stretch = TRUE orientation = VERTICAL direction = RTL } image { function = SLIDER state = PRELIGHT detail = "slider" file = "assets/scrollbar-vert-slider-hover-rtl.png" border = {6, 7, 6, 6} stretch = TRUE orientation = VERTICAL direction = RTL } image { function = SLIDER state = ACTIVE detail = "slider" file = "assets/scrollbar-vert-slider-active-rtl.png" border = {6, 7, 6, 6} stretch = TRUE orientation = VERTICAL direction = RTL } ########## # Scales # ########## # Troughs # They are overrided later on # We set them here too because some widgets don't specify their orientation image { function = BOX detail = "trough-upper" file = "assets/scale-horz-trough.png" border = {10, 10, 0, 0} stretch = TRUE orientation = HORIZONTAL } image { function = BOX detail = "trough-lower" file = "assets/scale-horz-trough-active.png" border = {10, 10, 0, 0} stretch = TRUE orientation = HORIZONTAL } image { function = BOX detail = "trough-upper" file = "assets/scale-vert-trough.png" border = {0, 0, 10, 10} stretch = TRUE orientation = VERTICAL } image { function = BOX detail = "trough-lower" file = "assets/scale-vert-trough-active.png" border = {0, 0, 10, 10} stretch = TRUE orientation = VERTICAL } # Sliders image { function = SLIDER state = NORMAL detail = "hscale" file = "assets/scale-slider.png" } image { function = SLIDER state = PRELIGHT detail = "hscale" file = "assets/scale-slider-hover.png" } image { function = SLIDER state = ACTIVE detail = "hscale" file = "assets/scale-slider-active.png" } image { function = SLIDER state = INSENSITIVE detail = "hscale" file = "assets/scale-slider-insensitive.png" } image { function = SLIDER state = NORMAL detail = "vscale" file = "assets/scale-slider.png" } image { function = SLIDER state = PRELIGHT detail = "vscale" file = "assets/scale-slider-hover.png" } image { function = SLIDER state = ACTIVE detail = "vscale" file = "assets/scale-slider-active.png" } image { function = SLIDER state = INSENSITIVE detail = "vscale" file = "assets/scale-slider-insensitive.png" } ########### # Menubar # ########### image { function = BOX detail = "menubar" file = "assets/line.png" border = {0, 0, 0, 1} } ######### # Menus # ######### image { function = BOX state = PRELIGHT detail = "menu_scroll_arrow_up" file = "assets/line.png" } image { function = BOX detail = "menu_scroll_arrow_up" file = "assets/line.png" border = {0, 0, 0, 1} } image { function = BOX state = PRELIGHT detail = "menu_scroll_arrow_down" file = "assets/line.png" } image { function = BOX detail = "menu_scroll_arrow_down" file = "assets/line.png" border = {0, 0, 1, 0} } ########### # Entries # ########### image { function = SHADOW state = ACTIVE detail = "entry" file = "assets/entry-active.png" border = {4, 4, 4, 4} stretch = TRUE } image { function = SHADOW state = INSENSITIVE detail = "entry" file = "assets/entry-insensitive.png" border = {4, 4, 4, 4} stretch = TRUE } image { function = SHADOW detail = "entry" file = "assets/entry.png" border = {4, 4, 4, 4} 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-insensitive.png" } image { function = FLAT_BOX detail = "entry_bg" file = "assets/entry-background.png" } ######### # Spins # ######### # Spin-Up LTR image { function = BOX state = NORMAL detail = "spinbutton_up" file = "assets/spin-ltr-up.png" border = {1, 4, 4, 0} stretch = TRUE overlay_file = "assets/spin-up.png" overlay_stretch = FALSE direction = LTR } image { function = BOX state = PRELIGHT detail = "spinbutton_up" file = "assets/spin-ltr-up-hover.png" border = {1, 4, 4, 0} stretch = TRUE overlay_file = "assets/spin-up.png" overlay_stretch = FALSE direction = LTR } image { function = BOX state = ACTIVE detail = "spinbutton_up" file = "assets/spin-ltr-up-active.png" border = {1, 4, 4, 0} stretch = TRUE overlay_file = "assets/spin-up.png" overlay_stretch = FALSE direction = LTR } image { function = BOX state = INSENSITIVE detail = "spinbutton_up" file = "assets/spin-ltr-up-insensitive.png" border = {1, 4, 4, 0} stretch = TRUE overlay_file = "assets/spin-up-insensitive.png" overlay_stretch = FALSE direction = LTR } # Spin-Up RTL image { function = BOX state = NORMAL detail = "spinbutton_up" file = "assets/spin-rtl-up.png" border = {4, 1, 4, 0} stretch = TRUE overlay_file = "assets/spin-up.png" overlay_stretch = FALSE direction = RTL } image { function = BOX state = PRELIGHT detail = "spinbutton_up" file = "assets/spin-rtl-up-hover.png" border = {4, 1, 4, 0} stretch = TRUE overlay_file = "assets/spin-up.png" overlay_stretch = FALSE direction = RTL } image { function = BOX state = ACTIVE detail = "spinbutton_up" file = "assets/spin-rtl-up-hover.png" border = {4, 1, 4, 0} stretch = TRUE overlay_file = "assets/spin-up.png" overlay_stretch = FALSE direction = RTL } image { function = BOX state = INSENSITIVE detail = "spinbutton_up" file = "assets/spin-rtl-up-insensitive.png" border = {4, 1, 4, 0} stretch = TRUE overlay_file = "assets/spin-up-insensitive.png" overlay_stretch = FALSE direction = RTL } # Spin-Down LTR image { function = BOX state = NORMAL detail = "spinbutton_down" file = "assets/spin-ltr-down.png" border = {1, 4, 1, 4} stretch = TRUE overlay_file = "assets/spin-down.png" overlay_stretch = FALSE direction = LTR } image { function = BOX state = PRELIGHT detail = "spinbutton_down" file = "assets/spin-ltr-down-hover.png" border = {1, 4, 1, 4} stretch = TRUE overlay_file = "assets/spin-down.png" overlay_stretch = FALSE direction = LTR } image { function = BOX state = ACTIVE detail = "spinbutton_down" file = "assets/spin-ltr-down-active.png" border = {1, 4, 1, 4} stretch = TRUE overlay_file = "assets/spin-down.png" overlay_stretch = FALSE direction = LTR } image { function = BOX state = INSENSITIVE detail = "spinbutton_down" file = "assets/spin-ltr-down-insensitive.png" border = {1, 4, 1, 4} stretch = TRUE overlay_file = "assets/spin-down-insensitive.png" overlay_stretch = FALSE direction = LTR } # Spin-Down RTL image { function = BOX state = NORMAL detail = "spinbutton_down" file = "assets/spin-rtl-down.png" border = {4, 1, 1, 4} stretch = TRUE overlay_file = "assets/spin-down.png" overlay_stretch = FALSE direction = RTL } image { function = BOX state = PRELIGHT detail = "spinbutton_down" file = "assets/spin-rtl-down-hover.png" border = {4, 1, 1, 4} stretch = TRUE overlay_file = "assets/spin-down.png" overlay_stretch = FALSE direction = RTL } image { function = BOX state = ACTIVE detail = "spinbutton_down" file = "assets/spin-rtl-down-active.png" border = {4, 1, 1, 4} stretch = TRUE overlay_file = "assets/spin-down.png" overlay_stretch = FALSE direction = RTL } image { function = BOX state = INSENSITIVE detail = "spinbutton_down" file = "assets/spin-rtl-down-insensitive.png" border = {4, 1, 1, 4} stretch = TRUE overlay_file = "assets/spin-down-insensitive.png" overlay_stretch = FALSE direction = RTL } ############## # Scrollbars # ############## image { function = BOX detail = "bar" file = "assets/progressbar-horz.png" stretch = TRUE border = {2, 2, 1, 1} orientation = HORIZONTAL } image { function = BOX detail = "bar" file = "assets/progressbar-vert.png" stretch = TRUE border = {1, 1, 2, 2} orientation = VERTICAL } ############# # Treeviews # ############# # Disable active the column highlight # We need to match specific cells or we break stuff # Looking at you deadbeef image { function = FLAT_BOX detail = "cell_even_sorted" state = NORMAL } image { function = FLAT_BOX detail = "cell_odd_sorted" state = NORMAL } # Disable all the other shadows # This prevents the Raleigh effect image { function = SHADOW } } } style "menubar" { # Needed to fix Firefox's menubar text bg[NORMAL] = @dark_bg_color text[NORMAL] = @dark_fg_color fg[NORMAL] = @dark_fg_color bg[SELECTED] = @dark_bg_color fg[SELECTED] = shade(0.9, @dark_fg_color) } style "menubar_item" { xthickness = 3 ythickness = 4 fg[NORMAL] = @dark_fg_color fg[PRELIGHT] = @dark_fg_color text[NORMAL] = @dark_fg_color engine "pixmap" { image { function = BOX state = PRELIGHT file = "assets/menubar-item-active.png" border = {0, 0, 0, 3} } } } style "menu" { xthickness = 0 ythickness = 0 bg[NORMAL] = @base_color bg[INSENSITIVE] = @base_color bg[PRELIGHT] = @base_color bg[SELECTED] = @selected_bg_color } style "menu_item" { xthickness = 3 ythickness = 4 bg[PRELIGHT] = @selected_bg_color # Chromium uses this setting bg[SELECTED] = @selected_bg_color fg[PRELIGHT] = @selected_fg_color # Some widgets use text, we need to handle that text[NORMAL] = @fg_color text[PRELIGHT] = @selected_fg_color # Unfortunately we can't tell regular and menu checks/radios apart # Without the heirarchy engine "pixmap" { ################# # Check Buttons # ################# image { function = CHECK state = NORMAL shadow = OUT overlay_file = "assets/menu-checkbox.png" overlay_stretch = FALSE } image { function = CHECK state = PRELIGHT shadow = OUT overlay_file = "assets/menu-checkbox-hover.png" overlay_stretch = FALSE } image { function = CHECK state = ACTIVE shadow = OUT overlay_file = "assets/menu-checkbox.png" overlay_stretch = FALSE } image { function = CHECK state = INSENSITIVE shadow = OUT overlay_file = "assets/menu-checkbox-insensitive.png" overlay_stretch = FALSE } image { function = CHECK state = NORMAL shadow = IN overlay_file = "assets/menu-checkbox-checked.png" overlay_stretch = FALSE } image { function = CHECK state = PRELIGHT shadow = IN overlay_file = "assets/menu-checkbox-checked-hover.png" overlay_stretch = FALSE } image { function = CHECK state = ACTIVE shadow = IN overlay_file = "assets/menu-checkbox-checked.png" overlay_stretch = FALSE } image { function = CHECK state = INSENSITIVE shadow = IN overlay_file = "assets/menu-checkbox-checked-insensitive.png" overlay_stretch = FALSE } image { function = CHECK state = NORMAL shadow = ETCHED_IN overlay_file = "assets/menu-checkbox-mixed.png" overlay_stretch = FALSE } image { function = CHECK state = PRELIGHT shadow = ETCHED_IN overlay_file = "assets/menu-checkbox-mixed-hover.png" overlay_stretch = FALSE } image { function = CHECK state = ACTIVE shadow = ETCHED_IN overlay_file = "assets/menu-checkbox-mixed.png" overlay_stretch = FALSE } image { function = CHECK state = INSENSITIVE shadow = ETCHED_IN overlay_file = "assets/menu-checkbox-mixed-insensitive.png" overlay_stretch = FALSE } ################# # Radio Buttons # ################# image { function = OPTION state = NORMAL shadow = OUT overlay_file = "assets/menu-radio.png" overlay_stretch = FALSE } image { function = OPTION state = PRELIGHT shadow = OUT overlay_file = "assets/menu-radio-hover.png" overlay_stretch = FALSE } image { function = OPTION state = ACTIVE shadow = OUT overlay_file = "assets/menu-radio.png" overlay_stretch = FALSE } image { function = OPTION state = INSENSITIVE shadow = OUT overlay_file = "assets/menu-radio-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-hover.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 = OPTION state = NORMAL shadow = ETCHED_IN overlay_file = "assets/menu-radio-mixed.png" overlay_stretch = FALSE } image { function = OPTION state = PRELIGHT shadow = ETCHED_IN overlay_file = "assets/menu-radio-mixed-hover.png" overlay_stretch = FALSE } image { function = OPTION state = ACTIVE shadow = ETCHED_IN overlay_file = "assets/menu-radio-mixed.png" overlay_stretch = FALSE } image { function = OPTION state = INSENSITIVE shadow = ETCHED_IN overlay_file = "assets/menu-radio-mixed-insensitive.png" overlay_stretch = FALSE } } } style "separator_menu_item" { xthickness = 0 ythickness = 0 engine "pixmap" { image { function = BOX file = "assets/line.png" } } } style "button_label" { fg[PRELIGHT] = @selected_fg_color fg[ACTIVE] = @selected_fg_color } style "misc_button_label" { fg[PRELIGHT] = @fg_color fg[ACTIVE] = @fg_color } style "button" { xthickness = 2 ythickness = 2 fg[PRELIGHT] = @selected_fg_color fg[ACTIVE] = @selected_fg_color font_name = "Bold" # For the sake of sanity style buttons this way engine "pixmap" { ########### # Buttons # ########### image { function = BOX state = NORMAL file = "assets/button.png" border = {4, 4, 4, 4} stretch = TRUE } image { function = BOX state = PRELIGHT shadow = OUT file = "assets/button-hover.png" border = {4, 4, 4, 4} stretch = TRUE } # Don't add hover effect on pressed buttons image { function = BOX state = PRELIGHT shadow = IN file = "assets/button-active.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 "link_button" { # Disable the button effect, leave just the link engine "pixmap" { image { function = BOX } } } style "entry" { # We set this same as the border of the border of the entry # This way theres no overlap xthickness = 4 ythickness = 4 } style "combobox" { xthickness = 6 ythickness = 4 # This affects only the button beside an entry GtkButton::inner-border = {0, 0, 0, 0} } style "combobox_cellview" { text[NORMAL] = @fg_color text[PRELIGHT] = @fg_color } style "combobox_entry" { # Since one side of the button is missing, we need to shift the arrow a little to the right GtkButton::inner-border = {0, 1, 0, 0} engine "pixmap" { ############# # LTR entry # ############# image { function = SHADOW state = NORMAL detail = "entry" file = "assets/combo-entry-ltr-entry.png" border = {4, 4, 4, 4} stretch = TRUE direction = LTR } image { function = SHADOW state = ACTIVE detail = "entry" file = "assets/combo-entry-ltr-entry-active.png" border = {4, 4, 4, 4} stretch = TRUE direction = LTR } image { function = SHADOW state = INSENSITIVE detail = "entry" file = "assets/combo-entry-ltr-entry-insensitive.png" border = {4, 4, 4, 4} stretch = TRUE direction = LTR } ############# # RTL entry # ############# image { function = SHADOW state = NORMAL detail = "entry" file = "assets/combo-entry-rtl-entry.png" border = {4, 4, 4, 4} stretch = TRUE direction = RTL } image { function = SHADOW state = ACTIVE detail = "entry" file = "assets/combo-entry-rtl-entry-active.png" border = {4, 4, 4, 4} stretch = TRUE direction = RTL } image { function = SHADOW state = INSENSITIVE detail = "entry" file = "assets/combo-entry-rtl-entry-insensitive.png" border = {4, 4, 4, 4} stretch = TRUE direction = RTL } ############## # LTR button # ############## image { function = BOX state = NORMAL detail = "button" file = "assets/combo-entry-ltr-button.png" border = {0, 4, 4, 4} stretch = TRUE direction = LTR } image { function = BOX state = PRELIGHT detail = "button" file = "assets/combo-entry-ltr-button-hover.png" border = {0, 4, 4, 4} stretch = TRUE direction = LTR } image { function = BOX state = ACTIVE detail = "button" file = "assets/combo-entry-ltr-button-active.png" border = {0, 4, 4, 4} stretch = TRUE direction = LTR } image { function = BOX state = INSENSITIVE detail = "button" file = "assets/combo-entry-ltr-button-insensitive.png" border = {0, 4, 4, 4} stretch = TRUE direction = LTR } ############## # RTL button # ############## image { function = BOX state = NORMAL detail = "button" file = "assets/combo-entry-rtl-button.png" border = {4, 0, 4, 4} stretch = TRUE direction = RTL } image { function = BOX state = PRELIGHT detail = "button" file = "assets/combo-entry-rtl-button-hover.png" border = {4, 0, 4, 4} stretch = TRUE direction = RTL } image { function = BOX state = ACTIVE detail = "button" file = "assets/combo-entry-rtl-button-active.png" border = {4, 0, 4, 4} stretch = TRUE direction = RTL } image { function = BOX state = INSENSITIVE detail = "button" file = "assets/combo-entry-rtl-button-insensitive.png" border = {4, 0, 4, 4} stretch = TRUE direction = RTL } } } style "combo_button_padding" { # Since one side of the button is missing, we need to shift the arrow a little to the right # This is the same thing we've done above but the combo, unlike the combobox, # uses padding the same way as a button GtkButton::inner-border = {6, 8, 4, 4} } style "notebook" { xthickness = 5 ythickness = 2 } style "notebook_viewport" { bg[NORMAL] = @base_color } style "notebook_bg" { bg[NORMAL] = @base_color bg[PRELIGHT] = @base_color bg[INSENSITIVE] = @base_color } style "notebook_entry" { engine "pixmap" { image { function = SHADOW state = ACTIVE detail = "entry" file = "assets/notebook-entry-active.png" border = {4, 4, 4, 4} stretch = TRUE } image { function = SHADOW state = INSENSITIVE detail = "entry" file = "assets/notebook-entry-insensitive.png" border = {4, 4, 4, 4} stretch = TRUE } image { function = SHADOW detail = "entry" file = "assets/notebook-entry.png" border = {4, 4, 4, 4} stretch = TRUE } } } style "normal_bg" { bg[NORMAL] = @bg_color bg[PRELIGHT] = @bg_color bg[INSENSITIVE] = mix (0.6, @bg_color, @base_color) } style "normal_entry" { engine "pixmap" { image { function = SHADOW state = ACTIVE detail = "entry" file = "assets/entry-active.png" border = {4, 4, 4, 4} stretch = TRUE } image { function = SHADOW state = INSENSITIVE detail = "entry" file = "assets/entry-insensitive.png" border = {4, 4, 4, 4} stretch = TRUE } image { function = SHADOW detail = "entry" file = "assets/entry.png" border = {4, 4, 4, 4} stretch = TRUE } } } style "notebook_combo" { engine "pixmap" { ############# # LTR entry # ############# image { function = SHADOW state = NORMAL detail = "entry" file = "assets/notebook-combo-entry-ltr-entry.png" border = {4, 4, 4, 4} stretch = TRUE direction = LTR } image { function = SHADOW state = ACTIVE detail = "entry" file = "assets/notebook-combo-entry-ltr-entry-active.png" border = {4, 4, 4, 4} stretch = TRUE direction = LTR } image { function = SHADOW state = INSENSITIVE detail = "entry" file = "assets/notebook-combo-entry-ltr-entry-insensitive.png" border = {4, 4, 4, 4} stretch = TRUE direction = LTR } ############# # RTL entry # ############# image { function = SHADOW state = NORMAL detail = "entry" file = "assets/notebook-combo-entry-rtl-entry.png" border = {4, 4, 4, 4} stretch = TRUE direction = RTL } image { function = SHADOW state = ACTIVE detail = "entry" file = "assets/notebook-combo-entry-rtl-entry-active.png" border = {4, 4, 4, 4} stretch = TRUE direction = RTL } image { function = SHADOW state = INSENSITIVE detail = "entry" file = "assets/notebook-combo-entry-rtl-entry-insensitive.png" border = {4, 4, 4, 4} stretch = TRUE direction = RTL } } } style "textview" { bg[NORMAL] = @base_color } style "scale_horz" { engine "pixmap" { image { function = BOX detail = "trough-upper" file = "assets/scale-horz-trough.png" border = {10, 10, 0, 0} stretch = TRUE } image { function = BOX detail = "trough-lower" file = "assets/scale-horz-trough-active.png" border = {10, 10, 0, 0} stretch = TRUE } } } style "scale_vert" { engine "pixmap" { image { function = BOX detail = "trough-upper" file = "assets/scale-vert-trough.png" border = {0, 0, 10, 10} stretch = TRUE } image { function = BOX detail = "trough-lower" file = "assets/scale-vert-trough-active.png" border = {0, 0, 10, 10} stretch = TRUE } } } style "progressbar" { xthickness = 1 ythickness = 1 fg[PRELIGHT] = @selected_fg_color engine "pixmap" { image { function = BOX detail = "trough" file = "assets/progressbar-horz-trough.png" border = {3, 3, 2, 2} stretch = TRUE orientation = HORIZONTAL } image { function = BOX detail = "trough" file = "assets/progressbar-vert-trough.png" border = {2, 2, 3, 3} stretch = TRUE orientation = VERTICAL } } } style "treeview_header" { xthickness = 1 ythickness = 0 fg[NORMAL] = mix(0.5, @fg_color, @base_color) fg[PRELIGHT] = mix(0.5, mix(0.5, @fg_color, @base_color), @fg_color) font_name = "Bold" GtkButton::inner-border = {5, 5, 0, 1} engine "pixmap" { image { function = BOX file = "assets/treeview-separator-ltr.png" border = {0, 1, 0, 1} stretch = TRUE direction = LTR } image { function = BOX file = "assets/treeview-separator-rtl.png" border = {1, 0, 0, 1} stretch = TRUE direction = RTL } image { function = ARROW state = NORMAL overlay_file = "assets/treeview-pan-up.png" overlay_stretch = FALSE arrow_direction = UP } image { function = ARROW state = PRELIGHT overlay_file = "assets/treeview-pan-up-hover.png" overlay_stretch = FALSE arrow_direction = UP } image { function = ARROW state = ACTIVE overlay_file = "assets/treeview-pan-up-active.png" overlay_stretch = FALSE arrow_direction = UP } image { function = ARROW state = NORMAL overlay_file = "assets/treeview-pan-down.png" overlay_stretch = FALSE arrow_direction = DOWN } image { function = ARROW state = PRELIGHT overlay_file = "assets/treeview-pan-down-hover.png" overlay_stretch = FALSE arrow_direction = DOWN } image { function = ARROW state = ACTIVE overlay_file = "assets/treeview-pan-down-active.png" overlay_stretch = FALSE arrow_direction = DOWN } } } style "scrolled_window" { engine "pixmap" { image { function = SHADOW file = "assets/frame.png" border = {1, 1, 1, 1} stretch = TRUE } } } style "frame" { engine "pixmap" { image { function = SHADOW file = "assets/frame.png" border = {0, 0, 0, 0} stretch = TRUE } image { function = SHADOW_GAP file = "assets/frame.png" border = {0, 0, 0, 0} stretch = TRUE gap_start_file = "assets/border.png" gap_end_file = "assets/border.png" } } } style "toolbar_button" { xthickness = 2 ythickness = 2 GtkButton::inner-border = {2, 2, 2, 2} engine "pixmap" { image { function = BOX state = PRELIGHT shadow = OUT file = "assets/toolbar-button-hover.png" border = {4, 4, 4, 4} stretch = TRUE } # Don't add hover effect on pressed buttons image { function = BOX state = PRELIGHT shadow = IN file = "assets/toolbar-button-active.png" border = {4, 4, 4, 4} stretch = TRUE } image { function = BOX state = ACTIVE file = "assets/toolbar-button-active.png" border = {4, 4, 4, 4} stretch = TRUE } } } style "toolbar_separator" { GtkWidget::wide-separators = 1 GtkWidget::separator-width = 1 GtkWidget::separator-height = 1 engine "pixmap" { image { function = BOX file = "assets/line.png" } } } style "inline_toolbar" { GtkToolbar::button-relief = GTK_RELIEF_NORMAL engine "pixmap" { image { function = SHADOW file = "assets/frame-inline.png" border = {1, 1, 0, 1} stretch = TRUE } } } style "tooltip" { xthickness = 13 ythickness = 13 bg[NORMAL] = @tooltip_bg_color fg[NORMAL] = @tooltip_fg_color bg[SELECTED] = @tooltip_bg_color } style "disable_shadow" { engine "pixmap" { image { function = SHADOW } } } style "disable_separator" { xthickness = 0 ythickness = 0 GtkWidget::wide-separators = 1 } # Default style, containing most of the stuff class "GtkWidget" style "default" # Override padding, style and colour class "GtkButton" style "button" class "GtkLinkButton" style "link_button" class "GtkEntry" style "entry" class "GtkOldEditable" style "entry" class "GtkNotebook" style "notebook" class "GtkHScale" style "scale_horz" class "GtkVScale" style "scale_vert" class "GtkProgressBar" style "progressbar" class "GtkScrolledWindow" style "scrolled_window" class "GtkFrame" style "frame" class "GtkSeparatorToolItem" style "toolbar_separator" class "GtkMenuBar" style "menubar" class "GtkMenu" style "menu" class "GtkTextView" style "textview" widget_class "**" style "button_label" widget_class "**" style "misc_button_label" # Menu and menubar items widget_class "**" style "menu_item" widget_class "*.*" style "menubar_item" widget_class "**" style "separator_menu_item" # Frames in statusbars look ugly, let's disable them widget_class "**" style "disable_shadow" # Disable the frame around poor Wilbert too widget_class "**" style "disable_shadow" # Treeview buttons widget_class "***" style "treeview_header" # Give the file chooser toolbar a border widget_class "**" style "inline_toolbar" # Fix padding on regular comboboxes widget_class "*." style "combobox" # And disable separators on them widget_class "*.*" style "disable_separator" # Join together the ComboBoxEntry entry and button widget_class "**" style "combobox_entry" # Join the Combo entry and button widget_class "**" style "combobox_entry" # Tweak the padding on the button a little bit because it uses it a bit differently widget_class "*." style "combo_button_padding" # Alas we cannot do the same for ComboBoxText because there isn't a way to apply the style to only # the comboboxes that have an entry inside # Toolbar buttons have different paddings widget_class "**" style "toolbar_button" # Notebooks are white, act accordingly widget_class "**" style "notebook_entry" widget_class "**" style "notebook_bg" widget_class "**" style "notebook_bg" widget_class "***" style "notebook_bg" widget_class "**" style "notebook_bg" widget_class "*.*" style "notebook_bg" widget_class "***" style "notebook_combo" widget_class "***" style "notebook_combo" # However, stuff inside eventboxes inside notebooks is grey again, react widget_class "***" style "normal_entry" widget_class "***" style "normal_bg" widget_class "***" style "normal_bg" widget_class "****" style "combobox_entry" widget_class "****" style "combobox_entry" widget_class "***." style "combo_button_padding" # ComboBoxes tend to draw the button label with text[] instead of fg[], we need to fix that widget_class "**" style "combobox_cellview" # GTK tooltips widget "gtk-tooltip*" style "tooltip" ================================================ FILE: gtk-2.0/render-assets.sh ================================================ #! /bin/bash INKSCAPE="/usr/bin/inkscape" OPTIPNG="/usr/bin/optipng" SRC_FILE="assets.svg" ASSETS_DIR="assets" INDEX="assets.txt" for i in `cat $INDEX` do if [ -f $ASSETS_DIR/$i.png ]; then echo $ASSETS_DIR/$i.png exists. else echo echo Rendering $ASSETS_DIR/$i.png $INKSCAPE --export-id=$i \ --export-id-only \ --export-background-opacity=0 \ --export-png=$ASSETS_DIR/$i.png $SRC_FILE >/dev/null \ && $OPTIPNG -o7 --quiet $ASSETS_DIR/$i.png fi done exit 0 ================================================ FILE: gtk-3.0/_apps.scss ================================================ /********************** * DE-Specific Styles * **********************/ @import 'apps/budgie'; @import 'apps/gnome'; @import 'apps/pantheon'; @import 'apps/xfce'; @import 'apps/unity'; @import 'apps/mate'; /*********************** * App-Specific Styles * ***********************/ @import 'apps/geary'; @import 'apps/lightdm'; @import 'apps/nemo'; @import 'apps/thunar'; ================================================ FILE: gtk-3.0/_colors-public.scss ================================================ //apps rely on some named colors to be exported /* GTK NAMED COLORS ---------------- use responsibly! */ // 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 /* widget text/foreground color */ @define-color theme_fg_color #{"" +$fg_color}; /* text color for entries, views and content in general */ @define-color theme_text_color #{"" +$text_color}; /* widget base background color */ @define-color theme_bg_color #{"" +$bg_color}; /* text widgets and the like base background color */ @define-color theme_base_color #{"" +$base_color}; /* base background color of selections */ @define-color theme_selected_bg_color #{"" +$selected_bg_color}; /* text/foreground color of selections */ @define-color theme_selected_fg_color #{"" +$selected_fg_color}; /* base background color of disabled widgets */ @define-color insensitive_bg_color #{"" +$insensitive_bg_color}; /* text foreground color of disabled widgets */ @define-color insensitive_fg_color #{"" +$insensitive_fg_color}; /* disabled text widgets and the like base background color */ @define-color insensitive_base_color #{"" +$base_color}; /* widget text/foreground color on backdrop windows */ @define-color theme_unfocused_fg_color #{"" +$backdrop_fg_color}; /* text color for entries, views and content in general on backdrop windows */ @define-color theme_unfocused_text_color #{"" +$text_color}; /* widget base background color on backdrop windows */ @define-color theme_unfocused_bg_color #{"" +$backdrop_bg_color}; /* text widgets and the like base background color on backdrop windows */ @define-color theme_unfocused_base_color #{"" +$backdrop_base_color}; /* base background color of selections on backdrop windows */ @define-color theme_unfocused_selected_bg_color #{"" +$selected_bg_color}; /* text/foreground color of selections on backdrop windows */ @define-color theme_unfocused_selected_fg_color #{"" + $selected_fg_color}; /* widgets main borders color */ @define-color borders #{"" +$borders_color}; /* widgets main borders color on backdrop windows */ @define-color unfocused_borders #{"" +$backdrop_borders_color}; /* these are pretty self explicative */ @define-color warning_color #{"" +$warning_color}; @define-color error_color #{"" +$error_color}; @define-color success_color #{"" +$success_color}; //@define-color destructive_color #{$destructive_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 unfocused_fg_color #{"" +$backdrop_fg_color}; @define-color unfocused_text_color #{"" +$text_color}; @define-color unfocused_bg_color #{"" +$backdrop_bg_color}; @define-color unfocused_base_color #{"" +$backdrop_base_color}; @define-color unfocused_selected_bg_color #{"" +$selected_bg_color}; @define-color unfocused_selected_fg_color #{"" + $selected_fg_color}; //WM $_wm_highlight: if($variant=='light', $top_highlight, // Sass gets mad if this is transparentize(black,1)); // done directly in the // color definition /* these colors are exported for the window manager and shouldn't be used in applications, read if you used those and something break with a version upgrade you're on your own... */ @define-color wm_title shade(#{$fg_color}, 1.8); @define-color wm_unfocused_title #{$backdrop_fg_color}; @define-color wm_highlight #{"" + $_wm_highlight}; @define-color wm_borders_edge #{"" + $borders_edge}; @define-color wm_bg_a shade(#{$bg_color}, 1.2); @define-color wm_bg_b #{$bg_color}; @define-color wm_shadow alpha(black, 0.35); @define-color wm_border alpha(black, 0.18); @define-color wm_button_hover_color_a shade(#{$bg_color}, 1.3); @define-color wm_button_hover_color_b #{$bg_color}; @define-color wm_button_active_color_a shade(#{$bg_color}, 0.85); @define-color wm_button_active_color_b shade(#{$bg_color}, 0.89); @define-color wm_button_active_color_c shade(#{$bg_color}, 0.9); //FIXME this is really an API @define-color content_view_bg #{"" + $base_color}; @define-color text_view_bg #{"" + $base_color}; //Budgie desktop @define-color budgie_tasklist_indicator_color #{"" +$selected_bg_color}; @define-color budgie_tasklist_indicator_color_active #{"" +$selected_bg_color}; // Elementary OS colors @define-color STRAWBERRY_100 #{$STRAWBERRY_100}; @define-color STRAWBERRY_300 #{$STRAWBERRY_300}; @define-color STRAWBERRY_500 #{$STRAWBERRY_500}; @define-color STRAWBERRY_700 #{$STRAWBERRY_700}; @define-color STRAWBERRY_900 #{$STRAWBERRY_900}; @define-color ORANGE_100 #{$ORANGE_100}; @define-color ORANGE_300 #{$ORANGE_300}; @define-color ORANGE_500 #{$ORANGE_500}; @define-color ORANGE_700 #{$ORANGE_700}; @define-color ORANGE_900 #{$ORANGE_900}; @define-color BANANA_100 #{$BANANA_100}; @define-color BANANA_300 #{$BANANA_300}; @define-color BANANA_500 #{$BANANA_500}; @define-color BANANA_700 #{$BANANA_700}; @define-color BANANA_900 #{$BANANA_900}; @define-color LIME_100 #{$LIME_100}; @define-color LIME_300 #{$LIME_300}; @define-color LIME_500 #{$LIME_500}; @define-color LIME_700 #{$LIME_700}; @define-color LIME_900 #{$LIME_900}; @define-color MINT_100 #{$MINT_100}; @define-color MINT_300 #{$MINT_300}; @define-color MINT_500 #{$MINT_500}; @define-color MINT_700 #{$MINT_700}; @define-color MINT_900 #{$MINT_900}; @define-color BLUEBERRY_100 #{$BLUEBERRY_100}; @define-color BLUEBERRY_300 #{$BLUEBERRY_300}; @define-color BLUEBERRY_500 #{$BLUEBERRY_500}; @define-color BLUEBERRY_700 #{$BLUEBERRY_700}; @define-color BLUEBERRY_900 #{$BLUEBERRY_900}; @define-color BUBBLEGUM_100 #{$BUBBLEGUM_100}; @define-color BUBBLEGUM_300 #{$BUBBLEGUM_300}; @define-color BUBBLEGUM_500 #{$BUBBLEGUM_500}; @define-color BUBBLEGUM_700 #{$BUBBLEGUM_700}; @define-color BUBBLEGUM_900 #{$BUBBLEGUM_900}; @define-color GRAPE_100 #{$GRAPE_100}; @define-color GRAPE_300 #{$GRAPE_300}; @define-color GRAPE_500 #{$GRAPE_500}; @define-color GRAPE_700 #{$GRAPE_700}; @define-color GRAPE_900 #{$GRAPE_900}; @define-color COCOA_100 #{$COCOA_100}; @define-color COCOA_300 #{$COCOA_300}; @define-color COCOA_500 #{$COCOA_500}; @define-color COCOA_700 #{$COCOA_700}; @define-color COCOA_900 #{$COCOA_900}; @define-color SILVER_100 #{$SILVER_100}; @define-color SILVER_300 #{$SILVER_300}; @define-color SILVER_500 #{$SILVER_500}; @define-color SILVER_700 #{$SILVER_700}; @define-color SILVER_900 #{$SILVER_900}; @define-color SLATE_100 #{$SLATE_100}; @define-color SLATE_300 #{$SLATE_300}; @define-color SLATE_500 #{$SLATE_500}; @define-color SLATE_700 #{$SLATE_700}; @define-color SLATE_900 #{$SLATE_900}; @define-color BLACK_100 #{$BLACK_100}; @define-color BLACK_300 #{$BLACK_300}; @define-color BLACK_500 #{$BLACK_500}; @define-color BLACK_700 #{$BLACK_700}; @define-color BLACK_900 #{"" + $BLACK_900}; ================================================ FILE: gtk-3.0/_colors.scss ================================================ // When color definition differs for dark and light variant // it gets @if ed depending on $variant // Main definitions $base_color: if($variant == 'light', $nord5, $nord1 ); $text_color: if($variant == 'light', $nord1, $nord4 ); $bg_color: if($variant == 'light', $nord4, $nord2); $fg_color: if($variant == 'light', $nord1, $nord4 ); $switch_bg: if($variant == 'light', #ffffff, transparentize(black,1)); $shadow_color: rgba(162, 162, 165, 0.21); $main_dark_color: $nord0; $_sidebar_color: if($variant == 'light', darken($main_dark_color, 3%), $main_dark_color); // Primary colors $lime: $nord7; $red: $nord11; $orange: $nord12; $yellow: $nord13; $purple: $nord15; $darkpurple: #7b7bbd; $blue: $nord10; $cyan: $nord8; $slider: #7b7bbd; $teal: $nord14; $selected_fg_color: #fefefe; $selected_bg_color: $nord9; /*$selected_bg_color: #00e8c6;06d6a0*/ $selected_borders_color: darken($selected_bg_color, 10%); $borders_color: darken($base_color, 10%); $dark_borders_color: darken($main_dark_color, 7%); $borders_edge: if($variant == 'light', transparentize(white, 0.8), transparentize(white, 0.9)); $link_color: $blue; $link_visited_color:transparentize($link_color,0.5); $top_highlight: if($variant == 'light', transparentize(white, 0.8), transparentize(white, 0.9)); $bottom_highlight: if($variant == 'light', transparentize(black, 0.8), transparentize(black, 0.9)); $dark_fill: mix($borders_color, $bg_color, 35%); $headerbar_color: mix($nord0, darken($nord1, 8%), 30%); $headerbar_fg_color: $nord4; $menu_color: if($variant == 'light', $base_color, $main_dark_color); $popover_bg_color: if($variant == 'light', $base_color, $main_dark_color); $popover_hover_color: darken($bg_color, 2%); $scrollbar_bg_color: mix($base_color, $bg_color, 50%); $scrollbar_slider_color: mix($fg_color, $bg_color, 60%); $scrollbar_slider_hover_color: mix($fg_color, $bg_color, 80%); $scrollbar_slider_active_color: if($variant=='light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 10%)); $warning_color: if($variant == 'light', $orange, darken($orange,10%)); $error_color: if($variant == 'light', $red, darken($red,5%)); $success_color: if($variant == 'light', $cyan, darken($cyan,10%)); $destructive_color: if($variant == 'light', darken($red,5%), darken($red,10%)); $suggested_color: if($variant == 'light', $selected_bg_color, darken($selected_bg_color,10%)); $osd_fg_color: $nord4; $osd_text_color: $nord4; $osd_bg_color: transparentize(darken($main_dark_color, 3%), 0.07); $osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5); $osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%); $osd_borders_color: $dark_borders_color; $sidebar_bg_color: mix($bg_color, $base_color, 50%); $base_hover_color: transparentize($fg_color, 0.95); $tooltip_borders_color: $dark_borders_color; $shadow_color: transparentize(black, 0.9); $drop_target_color: #a1ce4b; $text_shadow_color: if($variant == 'dark', $shadow_color, transparentize(white, 0.9)); $icon_shadow_color: $text_shadow_color; $drop_target_color: $teal; // Infobar colors $info_color: $lime; $question_color: $cyan; // Panel colors $panel_bg_color: transparentize($main_dark_color, 0); $panel_fg_color: $nord4; $panel_borders_color: transparentize($main_dark_color, 0.8); // Disabled state colors $insensitive_fg_color: mix($fg_color, $bg_color, 50%); $insensitive_bg_color: mix($bg_color, $base_color, 60%); $insensitive_base_color: darken($base_color, 5%); $insensitive_borders_color: $borders_color; // Backdrop state colors $backdrop_base_color: if($variant == 'light', darken($base_color, 1%), lighten($base_color, 1%)); $backdrop_text_color: mix($text_color, $backdrop_base_color, 80%); $backdrop_bg_color: $bg_color; $backdrop_headerbar_bg_color: $headerbar_color; $backdrop_headerbar_fg_color: if($variant == 'light', transparentize($headerbar_fg_color, 0.5), transparentize($headerbar_fg_color, 0.2)); $backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 50%); $backdrop_insensitive_color: if($variant == 'light', darken($backdrop_bg_color, 15%), lighten($backdrop_bg_color, 15%)); $backdrop_selected_bg_color: transparentize($selected_bg_color, 0.4); $backdrop_selected_fg_color: if($variant == 'light', $selected_fg_color, transparentize($selected_fg_color, 0.5)); $backdrop_borders_color: mix($borders_color, $bg_color, 90%); $backdrop_dark_fill: mix($backdrop_borders_color, $backdrop_bg_color, 35%); $backdrop_sidebar_bg_color: mix($backdrop_bg_color, $backdrop_base_color, 50%); $backdrop_scrollbar_bg_color: darken($backdrop_bg_color, 3%); $backdrop_scrollbar_slider_color: mix($backdrop_fg_color, $backdrop_bg_color, 40%); $backdrop_menu_color: if($variant == 'light', $backdrop_base_color, mix($backdrop_bg_color, $backdrop_base_color, 20%)); $scale_bg: if($variant == 'light', transparentize(black,0.86) ,transparentize(white,0.86)); $scale_disabled_bg: if($variant == 'light', transparentize(black, 0.94) ,transparentize(white, 0.94)); $suggested_bg_color: linear-gradient(to right, $cyan 0%, $cyan 100%); $destructive_bg_color: linear-gradient(to right, $red, $red); $menu_shadow_color: if($variant == 'light', transparentize(rgb(112, 112, 112), 0.6), $borders_color); ================================================ FILE: gtk-3.0/_common.scss ================================================ /********* * Common * *********/ @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', ''); $backdrop_transition: 200ms ease-out; $button_transition: all 200ms $ease-out-quad; * { padding: 0; -GtkToolButton-icon-spacing: 4; -GtkTextView-error-underline-color: $error_color; // The size for scrollbars. The slider is 2px smaller, but we keep it // up so that the whole area is sensitive to button presses for the // slider. The stepper button is larger in both directions, the slider // only in the width -GtkScrolledWindow-scrollbar-spacing: 0; -GtkToolItemGroup-expander-size: 11; -GtkWidget-text-handle-width: 20; -GtkWidget-text-handle-height: 24; -GtkDialog-button-spacing: 4; -GtkDialog-action-area-border: 0; // We use the outline properties to signal the focus properties // to the adwaita engine: using real CSS properties is faster, // and we don't use any outlines for now. outline-color: transparentize($fg_color, 0.7); outline-style: dashed; outline-offset: -3px; outline-width: 1px; -gtk-outline-radius: 2px; -gtk-secondary-caret-color: $selected_bg_color; } ================================================ FILE: gtk-3.0/_drawing.scss ================================================ /***************** * Drawing mixins * *****************/ // generic drawing of more complex things @function _widget_edge($c:$borders_edge) { // outer highlight "used" on most widgets @if $c == none { @return none; } @else { @return 0 1px $c; } } @mixin lines($t, $c:$selected_bg_color) { @if $t==up { box-shadow: inset 0 -3px 0 0 darken($c,5%); } @if $t==down { box-shadow: inset 0 3px 0 0 darken($c,5%); } @if $t==both { box-shadow: inset 0 -3px 0 0 darken($c,5%), inset 0 3px 0 0 darken($c,5%); } } @mixin _shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) { // // Helper function to stack up to 4 box-shadows; // @if $shadow4!=none { box-shadow: $shadow1, $shadow2, $shadow3, $shadow4; } @else if $shadow3!=none { box-shadow: $shadow1, $shadow2, $shadow3; } @else if $shadow2!=none { box-shadow: $shadow1, $shadow2; } @else { box-shadow: $shadow1; } } // entries @function entry_focus_border($fc:$selected_bg_color) { @if $variant == 'light' { @return $fc; } @else { @return if($fc==$selected_bg_color, $selected_borders_color, darken($fc, 35%)); } } @function entry_gradient($c) { @if $variant=='light' { @return linear-gradient(to bottom, mix($borders_color, $c, 45%), mix($borders_color, $c, 3%) 2px, $c 90%); } @else { @return linear-gradient(to bottom, mix($borders_color, $c, 95%), mix($borders_color, $c, 40%) 3px, $c 90%); } } @mixin entry($t, $fc:$selected_bg_color, $edge: none) { // // Entries drawing function // // $t: entry type // $fc: focus color // $edge: set to none to not draw the bottom edge or specify a color to not // use the default one // // possible $t values: // normal, focus, insensitive, backdrop, backdrop-insensitive, osd, osd-focus, osd-backdrop; // $_blank_edge: if($edge == none, none, 0 1px transparentize($edge, 1)); $_entry_edge: if($edge == none, none, _widget_edge($edge)); @if $t==normal { color: $text_color; border-color: $borders_color; background-color: $base_color; // for the transition to work the number of shadows in different states needs to match, hence the transparent shadow here. } @if $t==focus { border-color: entry_focus_border($fc); } @if $t==insensitive { color: $insensitive_fg_color; border-color: $borders_color; background-color: $insensitive_bg_color; box-shadow: $_entry_edge; } @if $t==backdrop { color: $backdrop_text_color; border-color: $backdrop_borders_color; background-color: $backdrop_base_color; box-shadow: $_blank_edge; } @if $t==backdrop-insensitive { color: $backdrop_insensitive_color; border-color: $backdrop_borders_color; background-color: $insensitive_bg_color; box-shadow: $_blank_edge; } @if $t==osd { color: $osd_text_color; border-color: $osd_borders_color; background-color: transparentize(opacify($osd_borders_color, 1), 0.5); box-shadow: none; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; } @if $t==osd-focus { color: $osd_text_color; border-color: $selected_bg_color; background-color: transparentize(opacify($osd_borders_color, 1), 0.5); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; } @if $t==osd-insensitive { color: $osd_insensitive_fg_color; border-color: $osd_borders_color; background-color: $osd_insensitive_bg_color; background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } @if $t==osd-backdrop { color: $osd_text_color; border-color: $osd_borders_color; background-color: transparentize(opacify($osd_borders_color, 1), 0.5); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } } // buttons @function _border_color ($c) { @return darken($c, 25%); } // colored buttons want // the border form the // base color @function _text_shadow_color ($tc: $fg_color, $bg: $bg_color) { // // calculate the color of text shadows // // $tc is the text color // $bg is the background color // $_lbg: lightness($bg)/100%; @if lightness($tc)<50% { @return transparentize(white, 1-$_lbg/($_lbg*1.3)); } @else { @return transparentize(black, $_lbg*0.8); } } @function _button_hilight_color($c) { // // calculate the right top hilight color for buttons // // $c: base color; // @if lightness($c)>95% { @return white; } @else if lightness($c)>90% { @return transparentize(white, 0.2); } @else if lightness($c)>80% { @return transparentize(white, 0.4); } @else if lightness($c)>50% { @return transparentize(white, 0.6); } @else if lightness($c)>40% { @return transparentize(white, 0.8); } @else { @return transparentize(white, 0.95); } } @mixin _button_text_shadow ($tc:$fg_color, $bg:$bg_color) { // // helper function for the text emboss effect // // $tc is the optional text color, not the shadow color // // TODO: this functions needs a way to deal with special cases // $_shadow: _text_shadow_color($tc, $bg); @if lightness($tc)<50% { text-shadow: 0 1px $_shadow; -gtk-icon-shadow: 0 1px $_shadow; } @else { text-shadow: 0 -1px $_shadow; -gtk-icon-shadow: 0 -1px $_shadow; } } @mixin button($t, $c:$base_color, $tc:$text_color, $edge: none) { // // Button drawing function // // $t: button type, // $c: base button color for colored* types // $tc: optional text color for colored* types // $edge: set to none to not draw the bottom edge or specify a color to not // use the default one // // possible $t values: // normal, hover, active, insensitive, insensitive-active, // backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active, // osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated // $_hilight_color: _button_hilight_color($c); $_button_edge: if($edge == none, none, _widget_edge($edge)); $_blank_edge: if($edge == none, none, _widget_edge(transparentize($edge,1))); @if $t==rounded { box-shadow: none; // border: 1px solid $c; color: white; border-radius: 4px; background: $suggested_bg_color; } @if $t==rounded-red { box-shadow: none; // border: 1px solid $c; color: white; border-radius: 4px; background: $destructive_bg_color; } @if $t==normal { // // normal button // font-weight: normal; color: $tc; // outline-color: transparentize($tc, 0.7); background-color: mix($bg_color, $base_color, 15%); text-shadow: none; } @else if $t==hover { // // hovered button // color: $tc; outline-color: transparentize($tc, 0.7); background-color: $c; text-shadow: none; //@include _shadows(inset 0px 1px 0px 0px $top_highlight,inset 0px -1px 0px 0px $bottom_highlight); } @if $t==normal-header { // // normal button headerbar look // color: if($tc==$text_color, $headerbar_fg_color, $tc); border-radius: 4px; text-shadow: none; box-shadow: none; border: 1px solid $dark_borders_color; background-color: lighten($headerbar_color, 4%); } @else if $t==hover-header { // // hovered button headerbar look // color: if($tc==$text_color, $selected_bg_color, $tc); text-shadow: none; background-color: transparentize($c, 0.2); border-color: $dark_borders_color; } @else if $t==backdrop-header { // // backdrop button headerbar look // color: if($tc==$text_color, transparentize($tc, 0.6), $tc); background-color: $c; border-color: $dark_borders_color; text-shadow: none; box-shadow: none; } @else if $t==active { // // pushed button // color: $tc; outline-color: transparentize($tc, 0.7); background-color: if($c==$base_color, $selected_bg_color, $c); text-shadow: none; // @include _shadows(inset 0px 1px 0px 0px $top_highlight,inset 0px -1px 0px 0px $bottom_highlight); } @else if $t==insensitive { // // insensitive button // color: if($tc==$text_color, $backdrop_text_color, $tc); outline-color: transparentize($tc, 0.7); background-color: if($c==$base_color, $insensitive_bg_color, $c); text-shadow: none; } @else if $t==insensitive-active { // // insensitive pushed button // color: transparentize($selected_fg_color, 0.3); outline-color: transparentize($tc, 0.7); background-color: if($c==$base_color, $selected_bg_color, $c); text-shadow: none; label { color: transparentize($selected_fg_color, 0.3); } } @else if $t==backdrop { // // backdrop button // color: if($tc==$text_color, $backdrop_text_color, transparentize($tc, 0.6)); outline-color: transparentize($tc, 0.7); background-color: if($c==$base_color, $backdrop_base_color, $c); text-shadow: none; } @else if $t==backdrop-active { // // backdrop pushed button FIXME no colors here! // color: transparentize($selected_fg_color, 0.3); outline-color: transparentize($tc, 0.7); background-color: $selected_bg_color; text-shadow: none; label { color: transparentize($selected_fg_color, 0.3); } } @else if $t==backdrop-insensitive { // // backdrop insensitive button // color: if($tc==$text_color, $backdrop_text_color, $tc); outline-color: transparentize($tc, 0.7); background-color: if($c==$base_color, $insensitive_bg_color, $c); text-shadow: none; } @else if $t==backdrop-insensitive-active { // // backdrop insensitive pushed button // color: transparentize($selected_fg_color, 0.3); outline-color: transparentize($tc, 0.7); background-color: $selected_bg_color; text-shadow: none; } @else if $t==osd { // // normal osd button // $_bg: if($c!=$base_color, transparentize($c, 0.5), $osd_bg_color); color: $osd_fg_color; border-color: $osd_borders_color; background-color: $_bg; background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: transparentize($osd_fg_color, 0.7); } @else if $t==osd-hover { // // active osd button // $_bg: if($c!=$base_color, transparentize($c, 0.3), lighten($osd_bg_color, 12%)); color: white; border-color: $osd_borders_color; background-image: linear-gradient(to bottom, $_bg, $_bg); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: transparentize($osd_fg_color, 0.7); } @else if $t==osd-active { // // active osd button // $_bg: if($c!=$base_color, $c, lighten($osd_bg_color, 6%)); color: white; border-color: $osd_borders_color; background-image: linear-gradient(to bottom, $_bg, $_bg); background-clip: padding-box; text-shadow: none; -gtk-icon-shadow: none; outline-color: transparentize($osd_fg_color, 0.7); } @else if $t==osd-insensitive { // // insensitive osd button // color: $osd_insensitive_fg_color; border-color: $osd_borders_color; background-image: linear-gradient(to bottom, $osd_insensitive_bg_color, $osd_insensitive_bg_color); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } @else if $t==osd-backdrop { // // backdrop osd button // $_bg: if($c!=$base_color, transparentize($c, 0.5), $osd_bg_color); color: $osd_fg_color; border-color: $osd_borders_color; background-image: linear-gradient(to bottom, $_bg, $_bg); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } @else if $t==undecorated { // // reset // border-color: transparent; background-color: transparent; background-image: none; @include _shadows(inset 0 1px transparentize(white, 1), $_blank_edge); text-shadow: none; -gtk-icon-shadow: none; } } @mixin trough($flat:false, $c:$bg_color, $tc:$fg_color, $noedge:true) { color: mix($tc, $bg_color, 80%); @if $flat { background-image: linear-gradient(to bottom, $c, $c); } @else { background-image: linear-gradient(to bottom, mix(black,$c,15%) 5%, mix(black,$c,10%) 20%, mix(black,$c,10%) 90%, $c); } border-color: if($c!=$bg_color, _border_color($c), $border_color); @if not($noedge) { @if lightness($c) > 60% { box-shadow: inset 0 -1px $borders_edge, 0 1px $borders_edge; } @else { box-shadow: inset 0 -1px transparentize($borders_edge, 0.5), 0 1px transparentize($borders_edge, 0.5); } } @else { box-shadow: none; } } @mixin headerbar_fill($c:$headerbar_color, $hc:$top_highlight, $ov: none) { // // headerbar fill // // $c: base color // $hc: top highlight color // $ov: a background layer for background shorthand (hence no commas!) // $gradient: linear-gradient(to top, darken($c, 13%), darken($c, 2%) 2px, $c 3px); @if $variant == 'dark' { $gradient: linear-gradient(to top, darken($c, 3%), darken($c, 1%) 2px, $c 3px); } @if $ov != none { background: $c $ov, $gradient; } @else { background: $c $gradient; } box-shadow: inset 0 1px $hc; // top highlight } @mixin overshoot($p, $t:normal, $c:$fg_color) { // // overshoot // // $p: position // $t: type // $c: base color // // possible $p values: // top, bottom, right, left // // possible $t values: // normal, backdrop // $_small_gradient_length: 5%; $_big_gradient_length: 100%; $_position: center top; $_small_gradient_size: 100% $_small_gradient_length; $_big_gradient_size: 100% $_big_gradient_length; @if $p==bottom { $_position: center bottom; $_linear_gradient_direction: to top; } @else if $p==right { $_position: right center; $_small_gradient_size: $_small_gradient_length 100%; $_big_gradient_size: $_big_gradient_length 100%; } @else if $p==left { $_position: left center; $_small_gradient_size: $_small_gradient_length 100%; $_big_gradient_size: $_big_gradient_length 100%; } $_small_gradient_color: $c; $_big_gradient_color: $c; @if $c==$fg_color { $_small_gradient_color: darken($borders_color, 10%); $_big_gradient_color: $fg_color; @if $t==backdrop { $_small_gradient_color: $backdrop_borders_color; } } $_small_gradient: -gtk-gradient(radial, $_position, 0, $_position, 0.5, to($_small_gradient_color), to(transparentize($_small_gradient_color, 1))); $_big_gradient: -gtk-gradient(radial, $_position, 0, $_position, 0.6, from(transparentize($_big_gradient_color, 0.87)), to(transparentize($_big_gradient_color, 1))); @if $t==normal { background-image: $_small_gradient, $_big_gradient; background-size: $_small_gradient_size, $_big_gradient_size; } @else if $t==backdrop { background-image: $_small_gradient; background-size: $_small_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; // } @mixin undershoot($p) { // // undershoot // // $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; box-shadow: none; } @mixin sidebar_bg ($dir, $c1, $c2) { background-image: linear-gradient(to $dir, $c1 40px, $c2 35px,$c2 36px, $c2 36px,$c2 99%, $c2 100%); } ================================================ FILE: gtk-3.0/_elementary-colors.scss ================================================ $STRAWBERRY_100: #ff8c82; $STRAWBERRY_300: #ed5353; $STRAWBERRY_500: #c6262e; $STRAWBERRY_700: #a10705; $STRAWBERRY_900: #7a0000; $ORANGE_100: #ffc27d; $ORANGE_300: #ffa154; $ORANGE_500: #f37329; $ORANGE_700: #cc3b02; $ORANGE_900: #a62100; $BANANA_100: #fff394; $BANANA_300: #ffe16b; $BANANA_500: #f9c440; $BANANA_700: #d48e15; $BANANA_900: #ad5f00; $LIME_100: #d1ff82; $LIME_300: #9bdb4d; $LIME_500: #68b723; $LIME_700: #3a9104; $LIME_900: #206b00; $MINT_100: #89ffdd; $MINT_300: #43d6b5; $MINT_500: #28bca3; $MINT_700: #0e9a83; $MINT_900: #007367; $BLUEBERRY_100: #8cd5ff; $BLUEBERRY_300: #64baff; $BLUEBERRY_500: #3689e6; $BLUEBERRY_700: #0d52bf; $BLUEBERRY_900: #002e99; $BUBBLEGUM_100: #fe9ab8; $BUBBLEGUM_300: #f4679d; $BUBBLEGUM_500: #de3e80; $BUBBLEGUM_700: #bc245d; $BUBBLEGUM_900: #910e38; $GRAPE_100: #e4c6fa; $GRAPE_300: #cd9ef7; $GRAPE_500: #a56de2; $GRAPE_700: #7239b3; $GRAPE_900: #452981; $COCOA_100: #a3907c; $COCOA_300: #8a715e; $COCOA_500: #715344; $COCOA_700: #57392d; $COCOA_900: #3d211b; $SILVER_100: #fafafa; $SILVER_300: #d4d4d4; $SILVER_500: #abacae; $SILVER_700: #7e8087; $SILVER_900: #555761; $SLATE_100: #95a3ab; $SLATE_300: #667885; $SLATE_500: #485a6c; $SLATE_700: #273445; $SLATE_900: #0e141f; $BLACK_100: #666; $BLACK_300: #4d4d4d; $BLACK_500: #333; $BLACK_700: #1a1a1a; $BLACK_900: #000; ================================================ FILE: gtk-3.0/_nord.scss ================================================ // Copyright (c) 2016-present Arctic Ice Studio // Copyright (c) 2016-present Sven Greb // Project: Nord // Version: 0.2.0 // Repository: https://github.com/arcticicestudio/nord // License: MIT // References: // http://sass-lang.com // http://sassdoc.com //// /// An arctic, north-bluish color palette. /// Created for the clean- and minimal flat design pattern to achieve a optimal focus and readability for code syntax /// highlighting and UI. /// It consists of a total of sixteen, carefully selected, dimmed pastel colors for a eye-comfortable, but yet colorful /// ambiance. /// /// @author Arctic Ice Studio //// /// Base component color of "Polar Night". /// /// Used for texts, backgrounds, carets and structuring characters like curly- and square brackets. /// /// @access public /// @example scss - SCSS /// /* For dark ambiance themes */ /// .background { /// background-color: $nord0; /// } /// /* For light ambiance themes */ /// .text { /// color: $nord0; /// } /// @group polarnight /// @since 0.1.0 $nord0: #2e3440; /// Lighter shade color of the base component color. /// /// Used as a lighter background color for UI elements like status bars. /// /// @access public /// @group polarnight /// @see $nord0 /// @since 0.1.0 $nord1: #3b4252; /// Lighter shade color of the base component color. /// /// Used as line highlighting in the editor. /// In the UI scope it may be used as selection- and highlight color. /// /// @access public /// @example scss - SCSS /// /* Code Syntax Highlighting scope */ /// .editor { /// &.line { /// background-color: $nord2; /// } /// } /// /// /* UI scope */ /// button { /// &:selected { /// background-color: $nord2; /// } /// } /// @group polarnight /// @see $nord0 /// @since 0.1.0 $nord2: #434c5e; /// Lighter shade color of the base component color. /// /// Used for comments, invisibles, indent- and wrap guide marker. /// In the UI scope used as pseudoclass color for disabled elements. /// /// @access public /// @example scss - SCSS /// /* Code Syntax Highlighting scope */ /// .editor { /// &.indent-guide, /// &.wrap-guide { /// &.marker { /// color: $nord3; /// } /// } /// } /// .comment, /// .invisible { /// color: $nord3; /// } /// /// /* UI scope */ /// button { /// &:disabled { /// background-color: $nord3; /// } /// } /// @group polarnight /// @see $nord0 /// @since 0.1.0 $nord3: #4c566a; /// Base component color of "Snow Storm". /// /// Main color for text, variables, constants and attributes. /// In the UI scope used as semi-light background depending on the theme shading design. /// /// @access public /// @example scss - SCSS /// /* For light ambiance themes */ /// .background { /// background-color: $nord4; /// } /// /* For dark ambiance themes */ /// .text { /// color: $nord4; /// } /// @group snowstorm /// @since 0.1.0 $nord4: #d8dee9; /// Lighter shade color of the base component color. /// /// Used as a lighter background color for UI elements like status bars. /// Used as semi-light background depending on the theme shading design. /// /// @access public /// @group snowstorm /// @see $nord4 /// @since 0.1.0 $nord5: #e5e9f0; /// Lighter shade color of the base component color. /// /// Used for punctuations, carets and structuring characters like curly- and square brackets. /// In the UI scope used as background, selection- and highlight color depending on the theme shading design. /// /// @access public /// @group snowstorm /// @see $nord4 /// @since 0.1.0 $nord6: #eceff4; /// Bluish core color. /// /// Used for classes, types and documentation tags. /// /// @access public /// @group frost /// @since 0.1.0 $nord7: #8fbcbb; /// Bluish core accent color. /// /// Represents the accent color of the color palette. /// Main color for primary UI elements and methods/functions. /// /// Can be used for /// - Markup quotes /// - Markup link URLs /// /// @access public /// @group frost /// @since 0.1.0 $nord8: #88c0d0; /// Bluish core color. /// /// Used for language-specific syntactic/reserved support characters and keywords, operators, tags, units and /// punctuations like (semi)colons,commas and braces. /// /// @access public /// @group frost /// @since 0.1.0 $nord9: #81a1c1; /// Bluish core color. /// /// Used for markup doctypes, import/include/require statements, pre-processor statements and at-rules (`@`). /// /// @access public /// @group frost /// @since 0.1.0 $nord10: #5e81ac; /// Colorful component color. /// /// Used for errors, git/diff deletion and linter marker. /// /// @access public /// @group aurora /// @since 0.1.0 $nord11: #bf616a; /// Colorful component color. /// /// Used for annotations. /// /// @access public /// @group aurora /// @since 0.1.0 $nord12: #d08770; /// Colorful component color. /// /// Used for escape characters, regular expressions and markup entities. /// In the UI scope used for warnings and git/diff renamings. /// /// @access public /// @group aurora /// @since 0.1.0 $nord13: #ebcb8b; /// Colorful component color. /// /// Main color for strings and attribute values. /// In the UI scope used for git/diff additions and success visualizations. /// /// @access public /// @group aurora /// @since 0.1.0 $nord14: #a3be8c; /// Colorful component color. /// /// Used for numbers. /// /// @access public /// @group aurora /// @since 0.1.0 $nord15: #b48ead; ================================================ FILE: gtk-3.0/_widgets.scss ================================================ /*********** * Widgets * ***********/ @import 'widgets/action-bars'; @import 'widgets/app-notifications'; @import 'widgets/base-states'; @import 'widgets/buttons'; @import 'widgets/calendar'; @import 'widgets/checks-radios'; @import 'widgets/color-chooser'; @import 'widgets/comboboxes'; @import 'widgets/dialogs'; @import 'widgets/entries'; @import 'widgets/expanders'; @import 'widgets/floating-bar'; @import 'widgets/frames'; @import 'widgets/granite'; @import 'widgets/header-bars'; @import 'widgets/infobars'; @import 'widgets/level-bars'; @import 'widgets/links'; @import 'widgets/lists'; @import 'widgets/menus'; @import 'widgets/misc'; @import 'widgets/notebooks'; @import 'widgets/paned'; @import 'widgets/pathbars'; @import 'widgets/popovers'; @import 'widgets/progress-bars'; @import 'widgets/scales'; @import 'widgets/scrollbars'; @import 'widgets/sidebar'; @import 'widgets/spinbuttons'; @import 'widgets/spinner'; @import 'widgets/switches'; @import 'widgets/toolbars'; @import 'widgets/tooltips'; @import 'widgets/treeviews'; @import 'widgets/windows'; ================================================ FILE: gtk-3.0/apps/_budgie.scss ================================================ /********* * Budgie * *********/ $alert_color: $red; $button_bg: transparent; $entry_border: transparent; $mpris_overlay_fg: $fg_color; $mpris_overlay_bg: transparentize(if($variant=='light',$base_color, darken($bg_color, 10%)), 0.1); $mpris_overlay_border: $top_highlight; $panel_bg: darken($nord0, 8%); $panel_color: $headerbar_fg_color; $panel_border: transparentize(darken($headerbar_color, 7%), 0.08); $panel_shadow: transparentize(black, 0.7); $raven_bg: darken($nord0, 2%); $raven_expander_border: transparentize($borders_color, 0.05); $raven_border: transparentize($borders_color, 0.08); $raven_expander_bg: transparentize(lighten($panel_bg, 15%), 0.5); $raven_background_bg: transparent; $raven_background_border: transparent; $depth: 0 1px 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.20), inset 0px 1px 0px 0px $top_highlight; @function gtkalpha($c,$a) { @return unquote("alpha(#{$c},#{$a})"); } $roundness: 8px; $border_width: 1px; $pos_list: ((top, bottom),(bottom,top),(left,right),(right,left)); // Container for both the "panel" area and the shadow. Wise to keep // this transparent.. .budgie-container { background-color: transparent; &:backdrop { background-color: transparent; } popover list, popover row { border: none; background: none; padding: 0; margin: 0; } } .budgie-popover .container, .budgie-popover border, .budgie-popover list, .budgie-popover row { @extend %reset_style } %reset_style { padding: 0; margin: 0; background: none; border: none; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; opacity: 1; min-width: 0; min-height: 0; } .budgie-popover, .budgie-popover.background { border-radius: 10px; padding: 0; background: darken($nord0, 2%); background-clip: border-box; box-shadow: 0 2px 3px 1px transparentize(black, 0.65); border: 1px solid $borders_color; list, row { &:hover { background: none; } } > frame.container { margin: 0 -1px -1px; // remove gap padding: 2px 0 0; } button { color: $panel_color; border: none; background: transparent; // @include button(normal-header); &:hover { @include button(hover-header, $selected_bg_color, $selected_fg_color); } } } .budgie-popover > .container { padding: 2px; } // Budgie Menu .budgie-menu { color: $panel_color; .container { padding: 0; } button:hover { -gtk-icon-effect: none; } entry.search { border: none; background: none; padding: 5px 2px; border-bottom: 1px solid $borders_color; border-radius: 0; font-size: 120%; box-shadow: none; color:$panel_color; image { &:dir(ltr) { padding-left: 8px; padding-right: 12px; } &:dir(rtl) { padding-left: 12px; padding-right: 8px; } } } .categories { border-width: 0; margin-left: 3px; background: transparent; &:dir(ltr) { border-right: 1px solid $borders_color; } &:dir(rtl) { border-left: 1px solid $borders_color; } } .category-button { padding: 7px; border-radius: 2px 0 0 2px; &:hover { background-color: transparent; color: $fg_color; } &:active { box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); } &:checked { color: $selected_fg_color; background: $selected_bg_color; &:hover { color: transparentize($selected_fg_color, 0.4); } } &:checked:disabled { opacity: 0.5; label { color: transparentize($selected_fg_color, 0.3); } } } scrollbar { background-color: transparent; border-color: $borders_color; } button:not(.category-button) { padding-top: 5px; padding-bottom: 5px; border-radius: 0; box-shadow: none; background:transparent; &:hover { @include button(hover-header, $selected_bg_color, #fff); } } button{ border: none; background: transparent; } undershoot, overshoot { background: none; } list { color: transparentize($panel_color, 0.3); } } // Menu Button button.budgie-menu-launcher { padding: 0 2px; color: $headerbar_fg_color; box-shadow: none; background-color: transparent; &:hover { color: $headerbar_fg_color; } &:active, &:checked { color: $headerbar_fg_color; } &:backdrop { color: $headerbar_fg_color; background-color: transparent; &:hover { color: $headerbar_fg_color; } &:active, &:checked { color: $selected_bg_color; box-shadow: none; background-color: mix($bg_color, $base_color, 20%); } } } // User Menu .user-menu { .content-box separator { margin-left: 6px; margin-right: 6px; background-color: transparentize($fg_color, 0.9); } button { margin: 5px; } // top-row (user-name and avatar) > box.vertical row.activatable:first-child, > frame.container > box.vertical row.activatable:first-child { .indicator-item { box-shadow: $depth; background-color: $selected_bg_color; transition-duration: 0.2s; &:dir(ltr) { // mask avatar's background padding-left: 7px; // non-scaling unit background-position: left center; background-repeat: no-repeat; background-size: 38px auto; // non-scaling unit } &:dir(rtl) { padding-right: 7px; background-position: right center; background-repeat: no-repeat; background-size: 38px auto; } label { color: $selected_fg_color; &:dir(ltr) { padding-left: 5px; } &:dir(rtl) { padding-right: 5px; } } image { color: $selected_fg_color; &:first-child { // avatar image min-width: 24px; min-height: 20px; } } } } } // Raven Trigger button.raven-trigger { padding-left: 2px; padding-right: 2px; color: $headerbar_fg_color; box-shadow: none; &:hover { color: $headerbar_fg_color; background-color: transparent; } &:active, &:checked { box-shadow: none; background-color: transparent; color: $selected_bg_color; } &:backdrop { color: $headerbar_fg_color; &:hover { color: $headerbar_fg_color; } &:active, &:checked { box-shadow: none; color: $selected_bg_color; background-color: transparent; } } } // Places Menu .places-menu { .container { padding: 0; } .message-bar { border-top-left-radius: 3px; border-top-right-radius: 3px; } .name-button { border: 0; border-radius: 0; padding: 4px 6px; } .unmount-button { padding: 4px 4px; border: 0; border-radius: 0; } .places-section-header { padding: 0px; border-bottom: 1px solid $raven_expander_border; box-shadow: 0px 1px 1px #{"alpha(@theme_fg_color, 0.03)"}; } .places-section-header > button { padding: 8px; border: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } .places-list { background: transparentize($fg_color, 0.96); border-bottom: 1px solid $raven_expander_border; } .unlock-area { border-top: 1px solid transparentize($raven_expander_border, 0.1); border-bottom: 1px solid transparentize($raven_expander_border, 0.1); } .unlock-area entry { border-radius: 0; border: 0; } .unlock-area button { border-radius: 0; border: 0; border-left: 1px solid transparentize($raven_expander_border, 0.1); } .alternative-label { font-size: 15px; padding: 3px; } .always-expand { background: transparent; border-bottom: none; } } // Night Light indicator .night-light-indicator { .container { padding: 0; } .view-header { font-size: 14px; padding: 10px; border-bottom: #{"1px solid mix(@theme_base_color, #000000, 0.35);"}; box-shadow: #{"0px 1px 1px alpha(@theme_fg_color, 0.04);"}; } .display-settings-button { border-top-left-radius: 0px; border-top-right-radius: 0px; border: none; padding: 3px; border-top: #{"1px solid mix(@theme_base_color, #000000, 0.35);"}; box-shadow: #{"inset 0px 1px 1px alpha(@theme_fg_color, 0.04);"}; } } // Panel .budgie-panel { color: $headerbar_fg_color; background-color: $panel_bg; background-image: none; box-shadow: none; border: none; transition: all 150ms ease-in; .alert { color: $alert_color; } &:backdrop { color: $headerbar_fg_color; background-color: $panel_bg; } button { border-top-width: 0; border-bottom-width: 0; border-radius: 0; &.flat { background: transparent; border: none; &:hover, &:active, &:checked { background: transparentize($selected_bg_color, 0.3); color: lighten($fg_color, 5%); } } } popover list, popover row { padding: 0; margin: 0; } label { color: $headerbar_fg_color; font-weight: 700; } &.transparent { background-color: transparentize($panel_bg, 0.15); .top & { border-bottom-color: transparent; } .bottom & { border-top-color: transparent; } .left & { border-right-color: transparent; } .right & { border-left-color: transparent; } &:backdrop, label, button.raven-trigger:backdrop, button.budgie-menu-launcher { color: lighten($headerbar_fg_color, 10%); } } .end-region { // background-color: rgba(0,0,0,0.3); border-radius: 0px; separator { background-color: transparentize($headerbar_fg_color, 0.85); } label { font-weight: 700; color: $headerbar_fg_color; } } } // Tasklist .budgie-panel #tasklist-button, .budgie-panel #tasklist-button:backdrop { outline-color: transparent; transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); border-color: transparentize($panel_bg,1); // fixes the transition border-radius: 0; background-color: transparent; box-shadow: none; background-clip: padding-box; @extend %underscores; } // Icon Tasklist .budgie-panel { button.flat.launcher { outline-color: transparent; transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); border-color: transparentize($panel_bg,1); // fixes the transition border-radius: 0; padding: 0; background-clip: padding-box; background-color: transparent; & { box-shadow: none; } } .unpinned button.flat.launcher, .pinned button.flat.launcher.running { @extend %underscores; } } %underscores { &:hover { box-shadow: none; } &:active, &:checked { box-shadow: none; } @each $pos, $b_pos in $pos_list { .#{$pos} & { padding-#{$b_pos}: 2px; border-#{$pos}: 2px solid transparent; @at-root { .#{$pos} .budgie-panel .pinned button.flat.launcher:not(.running) { border-#{$pos}: 2px solid transparent; } .#{$pos} .budgie-panel .pinned button.flat.launcher:not(.running):hover { border-#{$pos}: 2px solid transparentize(white, 0.9); } .#{$pos} .budgie-panel .unpinned button.flat.launcher, .#{$pos} .budgie-panel .pinned button.flat.launcher.running { border-#{$pos}: 2px solid transparentize(white, 0.9); } } &:hover { border-#{$pos}: 2px solid transparentize(white, 0.75); } &:active, &:checked { border-#{$pos}: 2px solid $selected_bg_color; } } } } @each $pos, $b_pos in $pos_list { // Panel borders .#{$pos} .budgie-panel { border-#{$b_pos}: $border_width solid $panel_border; } // Raven borders .#{$pos} .raven-frame { padding: 0; background: none; border { border: none; border-#{$b_pos}: $border_width solid $raven_border; } } // Shadows .#{$pos} .shadow-block { background-color: transparent; background-image: linear-gradient(to $b_pos, $panel_shadow, transparent); } } // Raven .raven { padding: 0; color: $panel_color; background: $raven_bg; transition: 170ms ease-out; list { color: $panel_color; background-color: transparent; &:selected { background-color: transparentize($selected_bg_color,0.1); } row, row.activatable { background-color: transparent; &:hover { background-color: transparentize(lighten($panel_bg, 15%), 0.7);} &:selected { background-color: transparentize($selected_bg_color,0.1); } } } .raven-background { color: $panel_color; background-color: transparent; border-color: transparent; &.middle { border-bottom-style: none; } // applet background between two headers } .powerstrip { background-color: transparent; border-top-color: transparent; } .powerstrip button.image-button { border-radius:50%; padding: 5px; min-width: 32px; min-height: 32px; margin-bottom: 3px; background: $purple; color: $selected_fg_color; box-shadow: $depth; border: none; font-size: 100%; &:hover { background: transparentize($purple,0.15); color: $selected_fg_color; } &:active { background: $purple; color: $selected_fg_color; } &:first-child { background: $suggested_bg_color; &:hover { background: transparentize($selected_bg_color, 0.15); } &:active { background: $selected_bg_color; } } &:last-child { background: $destructive_bg_color; &:hover { background: transparentize($red, 0.15); } &:active { background: $red; } } } .option-subtitle { font-size: 13px; } } // Calendar calendar.raven-calendar { padding: 4px; color: $panel_color; background: transparent; border-color: transparent; &:indeterminate { color: gtkalpha(currentColor,0.3); } &:selected { background: transparentize($selected_bg_color, 0.4); color:$panel_color; font-weight: bold; } &:backdrop { background-color: transparent; } &.header { color: $panel_color; border: none; border-radius: 0; background-color: transparent; } & button, & button:focus { color: gtkalpha(currentColor,0.5); background-color: transparent; &:hover { color: $fg_color; background-color: transparent; } } } // MPRIS Applet .raven-mpris { color: $mpris_overlay_fg; background-color: $mpris_overlay_bg; border: solid $mpris_overlay_border; border-width: 1px 0; border-bottom-color: $bottom_highlight; button.image-button { padding: 10px; background-color: $base_color; box-shadow: $depth; &:hover { background-color: $selected_bg_color; } &:active { background-color: darken($selected_bg_color,5%); } &:first-child { margin-right: 4px; } &:last-child { margin-left: 4px; } &:last-child, &:first-child { padding: 4px; margin-top: 6px; margin-bottom: 6px; } } } // Notifications .budgie-notification-window { background: none; border-radius: 1px; button { background-color: $selected_bg_color; color: $selected_fg_color; border: none; &:hover { background-color: darken($selected_bg_color, 5%); border: none; } &:active, &:checked { background-color: darken($selected_bg_color, 5%); } } } .budgie-notification { &.background { border-radius: 1px; } .notification-title { font-size: 110%; color: $headerbar_fg_color; } .notification-body { color: transparentize($headerbar_fg_color, 0.3); } button { background-color: transparent; color: $selected_fg_color; &:hover { background-color: transparent; color: $red; box-shadow: none; } &:active, &:checked { background-color: transparent; color: darken($red, 5%); } } } .drop-shadow { color: $headerbar_fg_color; background-color: transparentize(if($variant=='light', $headerbar_color, $bg_color), 0.05); box-shadow: 0 1px 2px 0 transparentize(black, 0.8); border-radius: 2px; } // On Screen Display in Budgie .budgie-osd-window { @extend .budgie-notification-window; } // Internal part of the OSD .budgie-osd { @extend .budgie-notification; } // Alt+tab switcher in Budgie .budgie-switcher-window { @extend .budgie-notification-window; // Flowbox flowbox { color: $fg_color; } flowboxchild { padding: 3px; margin: 3px; color: $fg_color; &:hover { background-color: $button_bg; } &:active { color: $fg_color; } &:selected { color: $selected_fg_color; background-color: transparentize($selected_bg_color,0.5); &:active { color: $selected_fg_color; } &:hover { background-color: mix(black, $selected_bg_color, 10%); } &:disabled { color: transparentize($selected_fg_color, 0.3); background-color: transparentize($selected_bg_color, 0.3); label { color: transparentize($selected_fg_color, 0.3); } } } } } // Internal part of the Switcher .budgie-switcher { @extend .budgie-notification; } // Session Dialog .budgie-session-dialog { color: $headerbar_fg_color; background-color: $panel_bg; label:backdrop { color: $backdrop_headerbar_fg_color; } &.background { @extend .drop-shadow; } .dialog-title { font-size: 120%; } .linked.horizontal > button { margin-bottom: 0; min-height: 32px; border-bottom: none; border-color:$borders_color; border-radius: 0; color: $headerbar_fg_color; background-color: transparent; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), inset 0 1px 2px rgba(0, 0, 0, 0.20); label { font-weight: 700; } &:first-child { border-left: none; border-bottom-left-radius: 2px; } &:last-child { border-right: none; border-bottom-right-radius: 2px; background:transparent;} &:hover { background-color: transparentize($selected_bg_color, 0.1); color: $selected_fg_color; &:backdrop { label { color: transparentize($selected_fg_color, 0.5); } } } @each $b_type, $b_color in (suggested-action, $selected_bg_color), (destructive-action, $destructive_color) { &.#{$b_type} { background-color: transparentize($b_color, 0.1); &:hover { background-color: transparentize(lighten($b_color,5%), 0.1); } &:active, &:checked { background-color: transparentize(lighten($b_color,5%), 0.1); } } } } entry { background-color: #505359; color: $headerbar_fg_color; &:focus { background-color: #505359; } &:backdrop { background-color: #505359; } } } // PolKit Dialog .budgie-polkit-dialog { @extend .budgie-session-dialog; .message { color: transparentize($headerbar_fg_color, 0.3); } .failure { color: $alert_color; } } // Run Dialog .budgie-run-dialog { @extend .budgie-session-dialog; entry.search, entry.search:focus { font-size: 120%; padding: 8px 5px; border: none; box-shadow: none; image { color: $headerbar_fg_color; &:dir(ltr) { padding-left: 8px; padding-right: 12px; } &:dir(rtl) { padding-left: 12px; padding-right: 8px; } } } list row:selected .dim-label { opacity: 1; } scrolledwindow { border-top: 1px solid darken($entry_border, 5%); } } // Budgie styled Gtk Menus .budgie-menubar { menu { margin: 4px; padding: 5px; border-radius: 0; background-color: $panel_bg; menuitem:hover { background-color: $selected_bg_color; color: $selected_fg_color; } } arrow { border:none; min-width:16px; min-height:16px; &.top { -gtk-icon-source:-gtk-icontheme("pan-up-symbolic"); border-bottom: 1px solid mix($fg_color, $raven_bg, 10%); } &.bottom { -gtk-icon-source:-gtk-icontheme("pan-down-symbolic"); border-top: 1px solid mix($fg_color, $raven_bg, 10%); } } menuitem { accelerator { color: transparentize($fg_color, 0.65); } check, radio { min-height: 16px; min-width: 16px; } } } // settings-window window.background.budgie-settings-window.csd { > box.horizontal > stack > scrolledwindow { // hide double-borders buttonbox.inline-toolbar { border-style: none none solid; } } } // 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 lighten($panel_bg, 10%); .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 { border: none; background: transparent; &: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; } } } ================================================ FILE: gtk-3.0/apps/_geary.scss ================================================ /********* * Geary * *********/ .geary-titlebar-left, .geary-titlebar-right { .separator { opacity: 0; } } ConversationListView { -GtkTreeView-grid-line-width: 0; .view { &:active, &:selected { background-color: $selected_bg_color; color: $selected_fg_color; &:backdrop { background-color: $backdrop_selected_bg_color; color: $backdrop_selected_fg_color; } } .cell { border: solid transparentize(black, 0.8); border-width: 0 0 1px 0; &:selected { color: $selected_fg_color; border: 0px solid darken($selected_bg_color, 10% ); } } } } ================================================ FILE: gtk-3.0/apps/_gnome.scss ================================================ /************ * Nautilus * ************/ .nautilus-window { .frame{ *:selected, *:selected:backdrop{ background: transparent; color: $selected_bg_color; label { color: $selected_bg_color; } } } paned { > separator { background-image: none; } } .sidebar { background-color: transparent; // background-image: none; &:backdrop { background-color: transparent; // background-image: none; } .list-row { button { border: none; background-color: transparentize(darken($base_color,3%),0.05); &:active { background-color: transparentize($selected_bg_color,0.25); } } &:selected { background-color: transparentize($selected_bg_color,0.25); &:hover { background-color: transparentize($selected_bg_color,0.1); } } &:hover { background-color: transparentize($base_color,0.5); &:active { background-color: transparentize($selected_bg_color,0.1); } } } } &.background { background-color: transparentize(darken($base_color,3%),0.05); &:backdrop { background-color: transparentize(darken($base_color,3%),0.05); } } notebook { > stack:only-child { // the :not(:only-child) is for "hidden" notebooks background-color: $base_color; &:backdrop { background-color: $backdrop_base_color; } } } searchbar { border-top: 1px solid rgba(0, 0, 0, 0.12); } .searchbar-container { margin-top: -1px; } } .nautilus-circular-button { border-radius: 20px; -gtk-outline-radius: 20px; } .disk-space-display { border: 2px solid; .unknown { background-color: #888a85; border-color: darken(#888a85, 20%); } .used { background-color: #9FB0B9; border-color: darken(#9FB0B9, 20%); } .free { background-color: #D8D8D8; border-color: darken(#D8D8D8, 20%); } } .nautilus-desktop { color: $fg_color; .nautilus-canvas-item { border-radius: 5px; color: $selected_fg_color; text-shadow: 1px 1px transparentize(black, 0.4); &:active { color: $fg_color; text-shadow: none; } &:hover { color: $fg_color; text-shadow: none; } &:selected { color: $selected_fg_color; text-shadow: none; } .dim-label { &:selected { color: $selected_fg_color; } } } .nautilus-list { .dim-label { &:selected { color: $selected_fg_color; } } } } /********* * Gedit * *********/ .gedit-search-slider { padding: 4px; border-radius: 0 0 3px 3px; border: 0; background-color: $bg_color; } /********* * Gnucash * *********/ .GncMainWindow entry.register-foreground { background: transparent; border: none; } /******************* * Calendar events * ********************/ .color-light { &.timed label { color: $fg_color; opacity: 1; } .week-view &.timed label, & label, .year-view &:not(.timed) label { color: $fg_color; opacity: 1; } } ================================================ FILE: gtk-3.0/apps/_lightdm.scss ================================================ /*********** * LightDm * ***********/ // the panel widget at the top #panel_window { background-color: $panel_bg_color; color: $panel_fg_color; font-weight: bold; box-shadow: inset 0 -1px darken($panel_bg_color, 7%); // the menubars/menus of the panel, i.e. indicators .menubar, .menubar > .menuitem menubar, menubar > menuitem { background-color: transparent; color: $panel_fg_color; font-weight: bold; } .menubar .menuitem:disabled, menubar menuitem:disabled { color: transparentize($panel_fg_color, 0.5); GtkLabel { color: inherit; } label { color: inherit; } } .menubar .menu > .menuitem, 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, $headerbar_color); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border: solid transparentize(black, 0.9); border-width: 0 1px 1px 1px; } #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; font-size: 13px; .menu, 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: gtk-3.0/apps/_mate.scss ================================================ .mate-panel-menu-bar, panel-toplevel.background { border-radius: 0; &, menubar { background-color: opacify($panel_bg_color, 1); } menubar, #PanelApplet label, #PanelApplet image { color: $panel_fg_color; } // Panel buttons button:not(#tasklist-button) { @extend %panelbutton; } button, #tasklist-button { label, image { color: inherit; } } .wnck-pager { color: mix($panel_fg_color, black, 50%); background-color: darken($panel_bg_color, 3%); &:hover { background-color: lighten($panel_bg_color, 5%); } &:selected { color: lighten($selected_bg_color, 20%); background-color: $selected_bg_color; } } na-tray-applet { -NaTrayApplet-icon-padding: 0; -NaTrayApplet-icon-size: 16px; } } // // Mate OSD Window // MsdOsdWindow.background.osd { border-radius: 2px; border: 1px solid $borders_color; .progressbar { background-color: $selected_bg_color; border: none; border-color: $selected_bg_color; border-radius: 5px; } .trough { background-color: darken($osd_bg_color, 5%); border: none; border-radius: 5px; } } // // Caja file manager // .caja-notebook { .frame { border-width: 0 0 1px; } .entry { background: $bg_color; color: $fg_color; border-color: $borders_color; &:selected { background: $selected_bg_color; color: $selected_fg_color; } } } /************** * Caja sidebar * **************/ .caja-side-pane { .frame { border-width: 0px; } background: $_sidebar_color; button { &, label { color:$headerbar_fg_color; } } treeview.view, textview.view text, viewport.frame, widget .vertical { background: $_sidebar_color; padding: 3px 2px; color: $headerbar_fg_color; &:hover { background-color: transparentize(lighten($_sidebar_color, 5%), 0.05); } &:selected { background: transparentize(lighten($_sidebar_color, 5%), 0.07); &:hover { background: transparentize(lighten($_sidebar_color, 5%), 0.07); color: #fff; } } } } /************** * Caja pathbar * **************/ .caja-navigation-window paned { background: $base_color; } .caja-navigation-window .primary-toolbar { background: $headerbar_color; button { &, label { color:$headerbar_fg_color; } &, &:backdrop { @include button(undecorated); } &:hover, &:active, &:backdrop:active, &:backdrop:checked { background: $selected_bg_color; box-shadow: none; &, & label { color: $selected_fg_color; } } } } .caja-pathbar button { @include button(normal); border-radius: 0px; border-right: 1px solid $borders_color; border-left: none; box-shadow: none; min-height: 20px; padding: 3px 5px; margin-right: -3px; &:first-child { border-left: 1px solid $borders_color; } &:hover { @include button(active, transparentize($selected_bg_color, 0.3), #fff); } &:checked { @include button(active, $selected_bg_color, #fff); } } ================================================ FILE: gtk-3.0/apps/_nemo.scss ================================================ .nemo-window { .places-treeview { -NemoPlacesTreeView-disk-full-bg-color: lighten($_sidebar_color, 15%); -NemoPlacesTreeView-disk-full-fg-color: $yellow; -GtkTreeView-vertical-separator: 10; .view.cell, iconview.cell { &:hover { background: transparentize(darken($_sidebar_color, 3%), 0.3); } &:selected { background: $selected_bg_color; color: $selected_fg_color; } } } .sidebar { background-color: $_sidebar_color; .view, .iconview, row { color: $headerbar_fg_color; background-color: transparent; } } .nemo-window-pane widget.entry { background-clip: padding-box; min-height: 28px; padding: 5px; color: $fg_color; border: 1px solid $selected_bg_color; border-radius: 4px; box-shadow: 0px 0px 1px 1px $selected_bg_color inset; &:selected { background-color: $selected_bg_color; color: $selected_fg_color; } } toolbar.primary-toolbar { margin-bottom: -1px; background: $headerbar_color; button, .horizontal > button.flat.image-button { @include button(normal-header); &:hover { @include button(hover-header, $selected_bg_color, $selected_fg_color); } &:selected, &:active, &:checked { @include button(active, $selected_bg_color, $selected_fg_color); &:backdrop { @include button(backdrop-header, $backdrop_selected_bg_color, $backdrop_selected_fg_color); } } &:backdrop, &:disabled, &:backdrop:disabled { @include button(backdrop-header, $main_dark_color, transparentize($headerbar_fg_color, 0.8)); } } .path-bar button { border-radius: 0; margin-right: -1px; &:first-child { border-radius: 4px 0px 0px 4px; } &:last-child { border-radius: 0px 4px 4px 0px; } } .horizontal > button.flat.image-button { background: transparent; border: none; } } .nemo-inactive-pane .view, .nemo-inactive-pane iconview { background-color: darken($base_color, 3%); } } ================================================ FILE: gtk-3.0/apps/_pantheon.scss ================================================ /******** * Gala * *******/ .gala-notification { border-width: 0; border-radius: 2px; color: white; border: 1px solid $base_color; background-color: $base_color; .title, .label { color: $fg_color; } } .gala-button { padding: 3px; color: $base_color; border: none; border-radius: 50%; background-image: linear-gradient(to bottom, #7e7e7e, #3e3e3e ); box-shadow: inset 0 0 0 1px transparentize(white, 0.02), inset 0 1px 0 0 transparentize(white, 0.07), inset 0 -1px 0 0 transparentize(white, 0.01), 0 0 0 1px transparentize(black, 0.40), 0 3px 6px transparentize(black, 0.16), 0 3px 6px transparentize(black, 0.23); text-shadow: 0 1px 1px transparentize(black, 0.6); } /********** * Notify * *********/ .notify { /*-notify-shadow: 0px 2px 18px transparentize(black, 0.60);*/ border-radius: 5px; border: 1px solid transparentize(black, 0.30); background-color: transparentize($base_color, 0.95); .low {} .critical {} } /*************** * SwitchBoard * ***************/ .category-label { font-weight: bold; color: $fg_color; } /************* * Slingshot * ************/ .button.app { border: none; border-radius: 0; box-shadow: none; background-image: none; .app { &:hover{ border-radius: 8px; border: none; background-color: transparentize($selected_bg_color, 0.7); color: white; } &:focus{ /*background-color: transparentize(black, 0.20);*/ } } } .search-item { border-radius: 0; border: none; color: $fg_color; background: none; &:hover, &:focus { border-radius: 0; background-color: transparentize($selected_bg_color, 0.7); color: $selected_fg_color; } } .search-entry-large, .search-entry-large:focus { border: none; font-size: 18px; font-weight: 300; background-image: none; background: none; box-shadow: none; border-radius: 0; } .search-category-header { font-weight: bold; color: $fg_color; } /********* * Panel * ********/ .composited-indicator { > revealer, > revealer image, > revealer label, > revealer spinner { color: $panel_fg_color; font-weight: bold; text-shadow: 0 1px 2px transparentize(black, 0.7), 0 1px 2px transparentize(black, 0.5); transition: all 200ms ease-in-out; -gtk-icon-shadow: 0 1px 2px transparentize(black, 0.7), 0 1px 2px transparentize(black, 0.5); } > revealer image:first-child + label { margin-left: 5px; } } .panel.color-light .composited-indicator { > revealer, > revealer image, > revealer label, > revealer spinner { color: transparentize(black, 0.4); text-shadow: 0 1px transparentize(white, 0.9); -gtk-icon-shadow: 0 1px transparentize(white, 0.9); } } /************** * Calculator * **************/ PantheonCalculatorMainWindow { border-radius: 0 0 4px 4px; .window-frame { border-radius:3px; } } /********* * Cards * *********/ .deck { background-color: darken($bg_color, 8%); } .card { background-color: $base_color; border: none; box-shadow: 0 0 0 1px transparentize(black, 0.95), 0 3px 3px transparentize(black, 0.8); transition: all 150ms ease-in-out; } .card.collapsed { background-color: darken($base_color, 5%); box-shadow: 0 0 0 1px transparentize(black, 0.95), 0 1px 2px transparentize(black, 0.8); } /********* * Noise * *********/ NoiseLibraryWindow { border-radius: 0 0 4px 4px; .action-bar { border-radius: 0 0 4px 4px; } .window-frame { border-radius:3px; } } /******** * Snap * ********/ SnapMainWindow, SnapSnapWindow { .take-button { border-radius: 0; } } /******************* * Photos/Shotwell * *******************/ DirectWindow, LibraryWindow { .the-button-in-the-combobox { background: none; } } .checkerboard-layout { background-color: $bg_color; background-image: linear-gradient(45deg, transparentize(black, 0.9) 25%, transparent 25%, transparent 75%, transparentize(black, 0.9) 75%, transparentize(black, 0.9)), linear-gradient(45deg, transparentize(black, 0.9) 25%, transparent 25%, transparent 75%, transparentize(black, 0.9) 75%, transparentize(black, 0.9)); background-size: 24px 24px; background-position: 0 0, 12px 12px } .checkboard-layout .item { background-color: $fg_color; } /********* * Avatar * *********/ .avatar { border: 1px solid transparentize(#000, 0.77); border-radius: 50%; box-shadow: inset 0 0 0 1px transparentize(#fff, 0.95), inset 0 1px 0 0 transparentize(#fff, 0.55), inset 0 -1px 0 0 transparentize(#fff, 0.85), 0 1px 3px transparentize(#000, 0.88), 0 1px 2px transparentize(#000, 0.77); } /**level bars**/ .sidebar .source-list{ &.view { &.level-bar { &,&:selected,&:selected:focus{ background: linear-gradient(to right, lighten($_sidebar_color, 15%),lighten($_sidebar_color, 15%)); border: 1px solid transparentize(black, 0.86); box-shadow: 0 1px 0 transparentize(#000, 0.75); border-radius: 2px; } &.fill-block{ border: none; } } &.fill-block{ &,&:hover,&:selected,&:selected:focus{ background: linear-gradient(to right, $yellow, $yellow); } } } } /************************** * Colors in context menu * **************************/ checkbutton.color-button { border: 1px solid $borders_color; border-radius: 100px; background-clip: border-box; padding: 0; margin: 2px 1px; > check { -gtk-icon-source: none; background: none; margin-right: 0; padding: 2px; } &.none { > check { background-color: transparent; border-radius: 100px; -gtk-icon-source: -gtk-icontheme("close-symbolic"); } } } radiobutton.color-button { > radio { -gtk-icon-source: none; margin-right: 0; border: 1px solid rgba(black, 0.15); border-radius: 100px; background-clip: border-box; } &:active > radio { border: 1px solid rgba(black, 0.35); } } .color-button { check, check:checked, radio, radio:checked, { background-image: none; border: 1px solid rgba(black, 0.2); border-radius: 50%; color: $base_color; -gtk-icon-source: -gtk-icontheme("check-active-symbolic"); } &.red check, &.red radio, &.strawberry check, &.strawberry radio { background-color: #{'@STRAWBERRY_300'}; -gtk-icon-shadow: 0 1px 1px #{'@STRAWBERRY_500'}; } &.orange check, &.orange radio { background-color: #{'@ORANGE_300'}; -gtk-icon-shadow: 0 1px 1px #{'@ORANGE_500'}; } &.yellow check, &.yellow radio, &.banana check, &.banana radio { background-color: #{'@BANANA_500'}; -gtk-icon-shadow: 0 1px 1px #{'@BANANA_700'}; } &.green check, &.green radio, &.lime check, &.lime radio { background-color: #{'@LIME_500'}; -gtk-icon-shadow: 0 1px 1px #{'@LIME_700'}; } &.blue check, &.blue radio, &.blueberry check, &.blueberry radio { background-color: #{'@BLUEBERRY_500'}; -gtk-icon-shadow: 0 1px 1px #{'@BLUEBERRY_700'}; } &.purple check, &.purple radio, &.grape check, &.grape radio { background-color: #{'@GRAPE_500'}; -gtk-icon-shadow: 0 1px 1px #{'@GRAPE_700'}; } &.brown check, &.brown radio, &.cocoa check, &.cocoa radio { background-color: #{'@COCOA_300'}; -gtk-icon-shadow: 0 1px 1px #{'@COCOA_500'}; } &.mint check, &.mint radio { background-color: #{'@MINT_500'}; -gtk-icon-shadow: 0 1px 1px #{'@MINT_700'}; } &.pink check, &.pink radio, &.bubblegum check, &.bubblegum radio { background-color: #{'@BUBBLEGUM_500'}; -gtk-icon-shadow: 0 1px 1px #{'@BUBBLEGUM_700'}; } &.slate check, &.slate radio { background-color: #{'@SLATE_300'}; -gtk-icon-shadow: 0 1px 1px #{'@SLATE_500'}; } &.auto radio { background-image: url("assets/color-button-auto.png"); background-position: -1px -1px; background-repeat: no-repeat; background-size: calc(100% + 2px); } } ================================================ FILE: gtk-3.0/apps/_thunar.scss ================================================ /* thunar */ .thunar toolbar { background-color: $headerbar_color; .flat { color:$headerbar_fg_color; } } /* buttons in toolbar */ .thunar toolbar.horizontal button image { -gtk-icon-transform:scale(0.72); } /* path-bar of thunar */ window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar, .thunar toolbar { .path-bar-button { @include button(normal-header); border-radius: 0; border-right: 0.5px solid $dark_borders_color; box-shadow: none; min-height: 20px; padding: 3px 4px; &:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } &:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-right-style: solid; } &:only-child { border-radius: 4px; border-style: solid; } &:hover { color: $selected_bg_color; } &:checked { @include button(active, transparentize($selected_bg_color, 0.3), #fff); } } .toggle.path-bar-button:hover { @include button(active, transparentize($selected_bg_color, 0.3), #fff); } } /* thunar sidepane */ .thunar scrolledwindow.sidebar treeview.view { background: darken($_sidebar_color, 2%); color: #98abb2; padding: 1.5px; &:hover, &:selected { background: transparentize($selected_bg_color, 0.1); color: $selected_fg_color; border-radius: 0; box-shadow: none; } } ================================================ FILE: gtk-3.0/apps/_unity.scss ================================================ /******** * Unity * *********/ $unity_color: #eeeeee; /* Unity window border color */ $unity_text_color: #31363D; /* Unity window text color */ $backdrop_unity_text_color: darken($unity_text_color,10%); /* Backdrop Unity window text color */ $unity_panel_color: darken($unity_color, 10%); /* Unity panel color #454D50 */ UnityDecoration { /* Border properties (top, right, bottom, left) */ -UnityDecoration-extents: 28px 1px 1px 1px;/* the size of the decorations */ -UnityDecoration-input-extents: 10px;/* the extra size of the input areas */ /* Shadows settings */ -UnityDecoration-shadow-offset-x: 1px;/* Size property, the shadow x offset */ -UnityDecoration-shadow-offset-y: 1px;/* Size property, the shadow y offset */ -UnityDecoration-active-shadow-color: rgba (0, 0, 0, 0.647);/* Color property, active window shadow color */ -UnityDecoration-active-shadow-radius: 8px;/* Size property, active window shadow radius */ -UnityDecoration-inactive-shadow-color: rgba (0, 0, 0, 0.647);/* Color property, inactive windows shadow color */ -UnityDecoration-inactive-shadow-radius: 5px;/* Size property, inactive windows shadow radius */ /* Glow applied to the selected scaled window */ -UnityDecoration-glow-size: 8px;/* Size property, size of glow */ -UnityDecoration-glow-color: $selected_bg_color;/* Color property of the glow */ /* Title settings */ -UnityDecoration-title-indent: 10px;/* Size property, left indent of the title */ -UnityDecoration-title-fade: 35px;/* Size property, space of the title that can be faded */ -UnityDecoration-title-alignment: 0.0;/* Float from 0.0 to 1.0, to align the title */ background-color: $unity_color; color: $unity_text_color; .top { padding: 0 5px 0 5px; border-radius: 4px 4px 0px 0px; box-shadow: none; border: 1px solid $unity_color; border-bottom-width: 0; background-color: $unity_color; color: $unity_text_color; border-top: 1px solid rgba(255,255,255,0.1); &:backdrop { border-bottom-width: 0; color: $backdrop_unity_text_color; border-top: 1px solid rgba(255,255,255,0.1); } .menuitem { color: $unity_text_color; &:backdrop { color: $backdrop_unity_text_color; } } } } UnityDecoration.left, UnityDecoration.right { background-repeat: repeat-x; background-color: darken($unity_color, 0.6); background-size: 1px 120px; background-clip: border-box; background-image: linear-gradient(to bottom, $unity_color, darken($unity_color, 0.6) ); } UnityDecoration.bottom { background-size: 1px; background-repeat: repeat-x; background-color: darken($unity_color, 0.6); } UnityDecoration.left:backdrop, UnityDecoration.right:backdrop, UnityDecoration.bottom:backdrop { background-size: 1px; background-repeat: repeat-x; } /************** * Unity Panel * ***************/ UnityPanelWidget, .unity-panel { background-color: $unity_panel_color; color: $unity_text_color; } UnityPanelWidget:backdrop, .unity-panel:backdrop { color: $backdrop_unity_text_color; } .unity-panel.menuitem, .unity-panel .menuitem { border-width: 0 1px; color: $unity_text_color; } .unity-panel.menubar, .unity-panel .menubar { color: $unity_text_color; } .unity-panel.menu.menubar, .unity-panel .menu .menubar { background-color: $unity_panel_color; color: $unity_text_color; } .unity-panel.menubar:backdrop, .unity-panel .menubar *:backdrop { color: $backdrop_fg_color; } .unity-panel.menubar.menuitem, .unity-panel.menubar .menuitem { padding: 3px 5px; border-width: 1px; border-style: solid; border: none; background: none; color: $unity_text_color; box-shadow: none; } .unity-panel.menubar.menuitem:hover, .unity-panel.menubar .menuitem:hover { border-radius: 0; background-color: darken($unity_color, 1.05); color: $unity_text_color; box-shadow: none; } .unity-panel.menubar .menuitem *:hover { color: white; box-shadow: none; } .unity-panel.menubar .menuitem.separator, .unity-panel.menubar.menuitem.separator { border: none; color: $borders_color; } /* Force Quit */ SheetStyleDialog.unity-force-quit { background-color: $base_color; } @keyframes playbackmenuitem_spinner { to { -gtk-icon-transform: rotate(1turn); } } .menu IdoPlaybackMenuItem.menuitem:active { -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); animation: playbackmenuitem_spinner 1s infinite linear; color: $selected_bg_color; } ================================================ FILE: gtk-3.0/apps/_xfce.scss ================================================ .xfce4-panel { border-radius: 0; &.panel { background-color: $panel_bg_color; color: $panel_fg_color; text-shadow: none; -gtk-icon-shadow: none; button.flat:not(.open_group) { @extend %panelbutton; } progressbar trough { background-color: transparentize(white, 0.86); } } } #tasklist-button { color: transparentize($panel_fg_color, 0.2); border-radius: 0; border: none; background-color: $panel_bg_color; &:hover { color: lighten($panel_fg_color, 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_color; border-radius: 0; border: none; background-color: $panel_bg_color; &:hover { border: none; background-color: lighten($panel_bg_color, 10%); } &:active, &:checked { color: $panel_fg_color; border: none; background-color: transparentize($selected_bg_color, 0.9); box-shadow: 0px -2px $selected_bg_color inset; label, image { color: inherit; } } } #whiskermenu-window button { background-color:transparent; border: none; border-radius: 0; font-weight: normal; padding: 3px; margin: 1px 2px; &:hover, &:checked { background-color: $selected_bg_color; } } /* Vala-appmenu-plugin*/ .-vala-panel-appmenu-core scrolledwindow, .-vala-panel-appmenu-private > menuitem, .-vala-panel-appmenu-private > menuitem:first-child > label { color: $panel_fg_color; } ================================================ FILE: gtk-3.0/gtk-dark.css ================================================ /*$selected_bg_color: #00e8c6;06d6a0*/ /* GTK NAMED COLORS ---------------- use responsibly! */ /* widget text/foreground color */ @define-color theme_fg_color #d8dee9; /* text color for entries, views and content in general */ @define-color theme_text_color #d8dee9; /* widget base background color */ @define-color theme_bg_color #434c5e; /* text widgets and the like base background color */ @define-color theme_base_color #3b4252; /* base background color of selections */ @define-color theme_selected_bg_color #81a1c1; /* text/foreground color of selections */ @define-color theme_selected_fg_color #fefefe; /* base background color of disabled widgets */ @define-color insensitive_bg_color #404859; /* text foreground color of disabled widgets */ @define-color insensitive_fg_color #8e95a4; /* disabled text widgets and the like base background color */ @define-color insensitive_base_color #3b4252; /* widget text/foreground color on backdrop windows */ @define-color theme_unfocused_fg_color #8e95a4; /* text color for entries, views and content in general on backdrop windows */ @define-color theme_unfocused_text_color #d8dee9; /* widget base background color on backdrop windows */ @define-color theme_unfocused_bg_color #434c5e; /* text widgets and the like base background color on backdrop windows */ @define-color theme_unfocused_base_color #3d4455; /* base background color of selections on backdrop windows */ @define-color theme_unfocused_selected_bg_color #81a1c1; /* text/foreground color of selections on backdrop windows */ @define-color theme_unfocused_selected_fg_color #fefefe; /* widgets main borders color */ @define-color borders #262a34; /* widgets main borders color on backdrop windows */ @define-color unfocused_borders #292d38; /* these are pretty self explicative */ @define-color warning_color #c3674a; @define-color error_color #b84f59; @define-color success_color #63adc2; @define-color fg_color #d8dee9; @define-color text_color #d8dee9; @define-color bg_color #434c5e; @define-color base_color #3b4252; @define-color selected_bg_color #81a1c1; @define-color selected_fg_color #fefefe; @define-color unfocused_fg_color #8e95a4; @define-color unfocused_text_color #d8dee9; @define-color unfocused_bg_color #434c5e; @define-color unfocused_base_color #3d4455; @define-color unfocused_selected_bg_color #81a1c1; @define-color unfocused_selected_fg_color #fefefe; /* these colors are exported for the window manager and shouldn't be used in applications, read if you used those and something break with a version upgrade you're on your own... */ @define-color wm_title shade(#d8dee9, 1.8); @define-color wm_unfocused_title #8e95a4; @define-color wm_highlight rgba(0, 0, 0, 0); @define-color wm_borders_edge rgba(255, 255, 255, 0.1); @define-color wm_bg_a shade(#434c5e, 1.2); @define-color wm_bg_b #434c5e; @define-color wm_shadow alpha(black, 0.35); @define-color wm_border alpha(black, 0.18); @define-color wm_button_hover_color_a shade(#434c5e, 1.3); @define-color wm_button_hover_color_b #434c5e; @define-color wm_button_active_color_a shade(#434c5e, 0.85); @define-color wm_button_active_color_b shade(#434c5e, 0.89); @define-color wm_button_active_color_c shade(#434c5e, 0.9); @define-color content_view_bg #3b4252; @define-color text_view_bg #3b4252; @define-color budgie_tasklist_indicator_color #81a1c1; @define-color budgie_tasklist_indicator_color_active #81a1c1; @define-color STRAWBERRY_100 #ff8c82; @define-color STRAWBERRY_300 #ed5353; @define-color STRAWBERRY_500 #c6262e; @define-color STRAWBERRY_700 #a10705; @define-color STRAWBERRY_900 #7a0000; @define-color ORANGE_100 #ffc27d; @define-color ORANGE_300 #ffa154; @define-color ORANGE_500 #f37329; @define-color ORANGE_700 #cc3b02; @define-color ORANGE_900 #a62100; @define-color BANANA_100 #fff394; @define-color BANANA_300 #ffe16b; @define-color BANANA_500 #f9c440; @define-color BANANA_700 #d48e15; @define-color BANANA_900 #ad5f00; @define-color LIME_100 #d1ff82; @define-color LIME_300 #9bdb4d; @define-color LIME_500 #68b723; @define-color LIME_700 #3a9104; @define-color LIME_900 #206b00; @define-color MINT_100 #89ffdd; @define-color MINT_300 #43d6b5; @define-color MINT_500 #28bca3; @define-color MINT_700 #0e9a83; @define-color MINT_900 #007367; @define-color BLUEBERRY_100 #8cd5ff; @define-color BLUEBERRY_300 #64baff; @define-color BLUEBERRY_500 #3689e6; @define-color BLUEBERRY_700 #0d52bf; @define-color BLUEBERRY_900 #002e99; @define-color BUBBLEGUM_100 #fe9ab8; @define-color BUBBLEGUM_300 #f4679d; @define-color BUBBLEGUM_500 #de3e80; @define-color BUBBLEGUM_700 #bc245d; @define-color BUBBLEGUM_900 #910e38; @define-color GRAPE_100 #e4c6fa; @define-color GRAPE_300 #cd9ef7; @define-color GRAPE_500 #a56de2; @define-color GRAPE_700 #7239b3; @define-color GRAPE_900 #452981; @define-color COCOA_100 #a3907c; @define-color COCOA_300 #8a715e; @define-color COCOA_500 #715344; @define-color COCOA_700 #57392d; @define-color COCOA_900 #3d211b; @define-color SILVER_100 #fafafa; @define-color SILVER_300 #d4d4d4; @define-color SILVER_500 #abacae; @define-color SILVER_700 #7e8087; @define-color SILVER_900 #555761; @define-color SLATE_100 #95a3ab; @define-color SLATE_300 #667885; @define-color SLATE_500 #485a6c; @define-color SLATE_700 #273445; @define-color SLATE_900 #0e141f; @define-color BLACK_100 #666; @define-color BLACK_300 #4d4d4d; @define-color BLACK_500 #333; @define-color BLACK_700 #1a1a1a; @define-color BLACK_900 #000; /***************** * Drawing mixins * *****************/ /********* * Common * *********/ * { padding: 0; -GtkToolButton-icon-spacing: 4; -GtkTextView-error-underline-color: #b84f59; -GtkScrolledWindow-scrollbar-spacing: 0; -GtkToolItemGroup-expander-size: 11; -GtkWidget-text-handle-width: 20; -GtkWidget-text-handle-height: 24; -GtkDialog-button-spacing: 4; -GtkDialog-action-area-border: 0; outline-color: rgba(216, 222, 233, 0.3); outline-style: dashed; outline-offset: -3px; outline-width: 1px; -gtk-outline-radius: 2px; -gtk-secondary-caret-color: #81a1c1; } /*********** * Widgets * ***********/ /*************** * Action bars * ***************/ .action-bar { background-color: #2e3440; border: solid #262a34; border-width: 1px 0 0 0; color: #d8dee9; box-shadow: none; } .action-bar:backdrop { background-color: #2e3440; box-shadow: none; -gtk-icon-effect: dim; } .action-bar:first-child { border-radius: 6px 6px 0px 0px; border-width: 1px 1px 0px 1px; } .action-bar:last-child { border-radius: 0 0 6px 6px; border-width: 0px 1px 1px 1px; } /********************* * App Notifications * *********************/ .app-notification, .app-notification.frame { padding: 10px; border-radius: 0 0 5px 5px; background-color: rgba(40, 45, 55, 0.93); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px); background-clip: padding-box; } .app-notification:backdrop, .app-notification.frame:backdrop { background-image: none; transition: 200ms ease-out; } .app-notification border, .app-notification.frame border { border: none; } /*************** * Base States * ***************/ .background { color: #d8dee9; background-color: #434c5e; } .background:backdrop { color: #8e95a4; background-color: #434c5e; text-shadow: none; -gtk-icon-shadow: none; } /* These wildcard seems unavoidable, need to investigate. Wildcards are bad and troublesome, use them with care, or better, just don't. Everytime a wildcard is used a kitten dies, painfully. */ selection { background-color: #81a1c1; color: #fefefe; } *:disabled { -gtk-icon-effect: dim; } .gtkstyle-fallback { color: #d8dee9; background-color: #434c5e; } .gtkstyle-fallback:hover { color: #d8dee9; background-color: #58647c; } .gtkstyle-fallback:active { color: #d8dee9; background-color: #2e3440; } .gtkstyle-fallback:disabled { color: #8e95a4; background-color: #404859; } .gtkstyle-fallback:selected { color: #fefefe; background-color: #81a1c1; } .view, iconview, .view text, iconview text, textview text { color: #d8dee9; background-color: #3b4252; } .view:backdrop, iconview:backdrop, .view text:backdrop, iconview text:backdrop, textview text:backdrop { color: #b9bfcb; background-color: #3d4455; } .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, .view text:selected:focus, iconview text:selected:focus, textview text:selected:focus, .view text:selected, iconview text:selected, textview text:selected { border-radius: 3px; } textview border { background-color: #3f4758; } .rubberband, rubberband, flowbox rubberband, .content-view rubberband, treeview.view rubberband { border: 1px solid #5f88b0; background-color: rgba(95, 136, 176, 0.2); } flowbox flowboxchild { padding: 3px; border-radius: 3px; } flowbox flowboxchild:selected { outline-offset: -2px; } label { caret-color: currentColor; } label.separator { color: #d8dee9; } label.separator:backdrop { color: #8e95a4; } label selection { background-color: #81a1c1; color: #fefefe; } label:disabled { color: #8e95a4; } label:disabled:backdrop { color: #63708b; } label:backdrop { color: #8e95a4; } .dim-label, label.separator, .titlebar .subtitle, headerbar .subtitle { opacity: 0.55; text-shadow: none; } assistant .sidebar { background-color: #3b4252; border-top: 1px solid #262a34; } assistant .sidebar:backdrop { background-color: #3d4455; border-color: #292d38; } assistant.csd .sidebar { border-top-style: none; } assistant .sidebar label { padding: 6px 12px; } assistant .sidebar label.highlight { background-color: #61697a; } .app-notification, .app-notification.frame, .osd .scale-popup, .csd popover.background.touch-selection, .csd popover.background.magnifier, popover.background.touch-selection, popover.background.magnifier, .csd popover.background.osd, popover.background.osd, .osd { color: #d8dee9; border: none; background-color: rgba(40, 45, 55, 0.93); background-clip: padding-box; outline-color: rgba(216, 222, 233, 0.3); text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; } .app-notification:backdrop, .osd .scale-popup:backdrop, popover.background.touch-selection:backdrop, popover.background.magnifier:backdrop, popover.background.osd:backdrop, .osd:backdrop { text-shadow: none; -gtk-icon-shadow: none; } *:selected { background: #81a1c1; color: #fefefe; } /*********** * Buttons * ***********/ @keyframes needs_attention { from { background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#b4c7da), to(transparent)); } to { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#81a1c1), to(transparent)); } } notebook > header > tabs > arrow, button { min-height: 20px; min-width: 16px; padding: 2px 6px; border: 1px solid #262a34; border-radius: 4px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); font-weight: normal; color: #d8dee9; background-color: #3c4454; text-shadow: none; } notebook > header > tabs > arrow, button.flat { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; transition: none; } notebook > header > tabs > arrow:hover, button.flat:hover { transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-duration: 500ms; color: #fefefe; outline-color: rgba(254, 254, 254, 0.3); background-color: #81a1c1; text-shadow: none; } notebook > header > tabs > arrow:hover:active, button.flat:hover:active { transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } notebook > header > tabs > arrow:hover, button:hover { color: #fefefe; outline-color: rgba(254, 254, 254, 0.3); background-color: #81a1c1; text-shadow: none; -gtk-icon-effect: highlight; } notebook > header > tabs > arrow:active, notebook > header > tabs > arrow:checked, button:active, button:checked { color: #fefefe; outline-color: rgba(254, 254, 254, 0.3); background-color: #7094b9; text-shadow: none; transition-duration: 50ms; } notebook > header > tabs > arrow:backdrop, notebook > header > tabs > arrow:backdrop, button:backdrop.flat, button:backdrop { color: #b9bfcb; outline-color: rgba(216, 222, 233, 0.3); background-color: #3d4455; text-shadow: none; transition: 200ms ease-out; -gtk-icon-effect: none; } notebook > header > tabs > arrow:backdrop:active, notebook > header > tabs > arrow:backdrop:checked, notebook > header > tabs > arrow:backdrop:active, notebook > header > tabs > arrow:backdrop:checked, button:backdrop.flat:active, button:backdrop.flat:checked, button:backdrop:active, button:backdrop:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(216, 222, 233, 0.3); background-color: #81a1c1; text-shadow: none; } notebook > header > tabs > arrow:backdrop:active label, notebook > header > tabs > arrow:backdrop:checked label, notebook > header > tabs > arrow:backdrop:active label, notebook > header > tabs > arrow:backdrop:checked label, button:backdrop.flat:active label, button:backdrop.flat:checked label, button:backdrop:active label, button:backdrop:checked label { color: rgba(254, 254, 254, 0.7); } notebook > header > tabs > arrow:backdrop:disabled, notebook > header > tabs > arrow:backdrop:disabled, button:backdrop.flat:disabled, button:backdrop:disabled { color: #b9bfcb; outline-color: rgba(216, 222, 233, 0.3); background-color: #404859; text-shadow: none; } notebook > header > tabs > arrow:backdrop:disabled:active, notebook > header > tabs > arrow:backdrop:disabled:checked, notebook > header > tabs > arrow:backdrop:disabled:active, notebook > header > tabs > arrow:backdrop:disabled:checked, button:backdrop.flat:disabled:active, button:backdrop.flat:disabled:checked, button:backdrop:disabled:active, button:backdrop:disabled:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(216, 222, 233, 0.3); background-color: #81a1c1; text-shadow: none; } notebook > header > tabs > arrow:backdrop, notebook > header > tabs > arrow:disabled, notebook > header > tabs > arrow:backdrop:disabled, button.flat:backdrop, button.flat:disabled, button.flat:backdrop:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } notebook > header > tabs > arrow:disabled, button:disabled { color: #b9bfcb; outline-color: rgba(216, 222, 233, 0.3); background-color: #404859; text-shadow: none; } notebook > header > tabs > arrow:disabled:active, notebook > header > tabs > arrow:disabled:checked, button:disabled:active, button:disabled:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(216, 222, 233, 0.3); background-color: #81a1c1; text-shadow: none; } notebook > header > tabs > arrow:disabled:active label, notebook > header > tabs > arrow:disabled:checked label, button:disabled:active label, button:disabled:checked label { color: rgba(254, 254, 254, 0.7); } notebook > header > tabs > arrow.image-button, button.image-button { min-width: 24px; padding-left: 4px; padding-right: 4px; } notebook > header > tabs > arrow.image-button.circular, notebook > header > tabs > arrow.image-button.sidebar-button, button.image-button.circular, button.image-button.sidebar-button { padding: 6px 4px; border-radius: 50px; box-shadow: none; } notebook > header > tabs > arrow.text-button, button.text-button { padding-left: 16px; padding-right: 16px; } notebook > header > tabs > arrow.text-button.image-button, button.text-button.image-button { padding-left: 8px; padding-right: 8px; border-radius: 2px; } notebook > header > tabs > arrow.text-button.image-button label, button.text-button.image-button label { padding-left: 8px; padding-right: 8px; } combobox:drop(active) button.combo, notebook > header > tabs > arrow:drop(active), button:drop(active) { color: #a3be8c; border-color: #a3be8c; box-shadow: inset 0 0 0 1px #a3be8c; } row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled) { color: #fefefe; border-color: transparent; } row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled):backdrop { color: #8e95a4; } button.osd { min-width: 24px; min-height: 20px; color: #d8dee9; border-radius: 5px; outline-color: rgba(216, 222, 233, 0.3); color: #d8dee9; border-color: #1f232b; background-color: rgba(40, 45, 55, 0.93); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); border: none; box-shadow: none; } button.osd.image-button { min-width: 32px; } button.osd:hover { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(65, 74, 91, 0.93), rgba(65, 74, 91, 0.93)); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); border: none; box-shadow: none; } button.osd:active, button.osd:checked { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(52, 59, 73, 0.93), rgba(52, 59, 73, 0.93)); background-clip: padding-box; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(216, 222, 233, 0.3); border: none; box-shadow: none; } button.osd:disabled:backdrop, button.osd:disabled { color: #808690; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(58, 63, 73, 0.5), rgba(58, 63, 73, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; border: none; } button.osd:backdrop { color: #d8dee9; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(40, 45, 55, 0.93), rgba(40, 45, 55, 0.93)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; border: none; } .app-notification button, .app-notification.frame button, .csd popover.background.touch-selection button, .csd popover.background.magnifier button, popover.background.touch-selection button, popover.background.magnifier button, .osd button { color: #d8dee9; border-color: #1f232b; background-color: rgba(40, 45, 55, 0.93); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } .app-notification button:hover, popover.background.touch-selection button:hover, popover.background.magnifier button:hover, .osd button:hover { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(65, 74, 91, 0.93), rgba(65, 74, 91, 0.93)); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } .app-notification button:active:backdrop, popover.background.touch-selection button:active:backdrop, popover.background.magnifier button:active:backdrop, .app-notification button:active, popover.background.touch-selection button:active, popover.background.magnifier button:active, .app-notification button:checked:backdrop, popover.background.touch-selection button:checked:backdrop, popover.background.magnifier button:checked:backdrop, .app-notification button:checked, popover.background.touch-selection button:checked, popover.background.magnifier button:checked, .osd button:active:backdrop, .osd button:active, .osd button:checked:backdrop, .osd button:checked { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(52, 59, 73, 0.93), rgba(52, 59, 73, 0.93)); background-clip: padding-box; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(216, 222, 233, 0.3); } .app-notification button:disabled:backdrop, popover.background.touch-selection button:disabled:backdrop, popover.background.magnifier button:disabled:backdrop, .app-notification button:disabled, popover.background.touch-selection button:disabled, popover.background.magnifier button:disabled, .osd button:disabled:backdrop, .osd button:disabled { color: #808690; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(58, 63, 73, 0.5), rgba(58, 63, 73, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } .app-notification button:backdrop, popover.background.touch-selection button:backdrop, popover.background.magnifier button:backdrop, .osd button:backdrop { color: #d8dee9; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(40, 45, 55, 0.93), rgba(40, 45, 55, 0.93)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } .app-notification button.flat, popover.background.touch-selection button.flat, popover.background.magnifier button.flat, .osd button.flat { color: #d8dee9; border-color: #1f232b; background-color: rgba(40, 45, 55, 0.93); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); box-shadow: none; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; } .app-notification button.flat:hover, popover.background.touch-selection button.flat:hover, popover.background.magnifier button.flat:hover, .osd button.flat:hover { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(65, 74, 91, 0.93), rgba(65, 74, 91, 0.93)); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } .app-notification button.flat:disabled, popover.background.touch-selection button.flat:disabled, popover.background.magnifier button.flat:disabled, .osd button.flat:disabled { color: #808690; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(58, 63, 73, 0.5), rgba(58, 63, 73, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; background-image: none; border-color: transparent; box-shadow: none; } .app-notification button.flat:backdrop, popover.background.touch-selection button.flat:backdrop, popover.background.magnifier button.flat:backdrop, .osd button.flat:backdrop { color: #d8dee9; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(40, 45, 55, 0.93), rgba(40, 45, 55, 0.93)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } .app-notification button.flat:active, popover.background.touch-selection button.flat:active, popover.background.magnifier button.flat:active, .app-notification button.flat:checked, popover.background.touch-selection button.flat:checked, popover.background.magnifier button.flat:checked, .osd button.flat:active, .osd button.flat:checked { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(52, 59, 73, 0.93), rgba(52, 59, 73, 0.93)); background-clip: padding-box; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(216, 222, 233, 0.3); } button.suggested-action { border: none; box-shadow: none; color: white; border-radius: 4px; background: linear-gradient(to right, #88c0d0 0%, #88c0d0 100%); } .selection-mode button.titlebutton, button.suggested-action.flat { box-shadow: none; color: white; border-radius: 4px; background: linear-gradient(to right, #88c0d0 0%, #88c0d0 100%); } button.suggested-action:hover { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #88c0d0; text-shadow: none; } button.suggested-action:active, button.suggested-action:checked { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #88c0d0; text-shadow: none; } .selection-mode button.titlebutton:backdrop, button.suggested-action:backdrop, button.suggested-action.flat:backdrop { color: rgba(255, 255, 255, 0.4); outline-color: rgba(255, 255, 255, 0.3); background-color: #88c0d0; text-shadow: none; } .selection-mode button.titlebutton:backdrop label, button.suggested-action:backdrop label, button.suggested-action.flat:backdrop label { color: rgba(255, 255, 255, 0.5); } .selection-mode button.titlebutton:backdrop:active, .selection-mode button.titlebutton:backdrop:checked, button.suggested-action:backdrop:active, button.suggested-action:backdrop:checked, button.suggested-action.flat:backdrop:active, button.suggested-action.flat:backdrop:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(255, 255, 255, 0.3); background-color: #81a1c1; text-shadow: none; } .selection-mode button.titlebutton:backdrop:active label, .selection-mode button.titlebutton:backdrop:checked label, button.suggested-action:backdrop:active label, button.suggested-action:backdrop:checked label, button.suggested-action.flat:backdrop:active label, button.suggested-action.flat:backdrop:checked label { color: rgba(254, 254, 254, 0.7); } .selection-mode button.titlebutton:backdrop:disabled, button.suggested-action:backdrop:disabled, button.suggested-action.flat:backdrop:disabled { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #88c0d0; text-shadow: none; } .selection-mode button.titlebutton:backdrop:disabled label, button.suggested-action:backdrop:disabled label, button.suggested-action.flat:backdrop:disabled label { color: rgba(255, 255, 255, 0.5); } .selection-mode button.titlebutton:backdrop:disabled:active, .selection-mode button.titlebutton:backdrop:disabled:checked, button.suggested-action:backdrop:disabled:active, button.suggested-action:backdrop:disabled:checked, button.suggested-action.flat:backdrop:disabled:active, button.suggested-action.flat:backdrop:disabled:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(255, 255, 255, 0.3); background-color: #81a1c1; text-shadow: none; } .selection-mode button.titlebutton:backdrop, .selection-mode button.titlebutton:disabled, .selection-mode button.titlebutton:backdrop:disabled, button.suggested-action.flat:backdrop, button.suggested-action.flat:disabled, button.suggested-action.flat:backdrop:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: rgba(136, 192, 208, 0.8); } button.suggested-action:disabled { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #88c0d0; text-shadow: none; } button.suggested-action:disabled:active, button.suggested-action:disabled:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(255, 255, 255, 0.3); background-color: #88c0d0; text-shadow: none; } button.suggested-action:disabled:active label, button.suggested-action:disabled:checked label { color: rgba(254, 254, 254, 0.7); } .osd button.suggested-action { color: #d8dee9; border-color: #1f232b; background-color: rgba(136, 192, 208, 0.5); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } .osd button.suggested-action:hover { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(136, 192, 208, 0.7), rgba(136, 192, 208, 0.7)); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } .osd button.suggested-action:active:backdrop, .osd button.suggested-action:active, .osd button.suggested-action:checked:backdrop, .osd button.suggested-action:checked { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, #88c0d0, #88c0d0); background-clip: padding-box; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(216, 222, 233, 0.3); } .osd button.suggested-action:disabled:backdrop, .osd button.suggested-action:disabled { color: #808690; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(58, 63, 73, 0.5), rgba(58, 63, 73, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } .osd button.suggested-action:backdrop { color: #d8dee9; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(136, 192, 208, 0.5), rgba(136, 192, 208, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } button.destructive-action { border: none; box-shadow: none; color: white; border-radius: 4px; background: linear-gradient(to right, #bf616a, #bf616a); } button.destructive-action.flat { box-shadow: none; color: white; border-radius: 4px; background: linear-gradient(to right, #88c0d0 0%, #88c0d0 100%); } button.destructive-action:hover { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #a9444e; text-shadow: none; } button.destructive-action:active, button.destructive-action:checked { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #a9444e; text-shadow: none; } button.destructive-action:backdrop, button.destructive-action.flat:backdrop { color: rgba(255, 255, 255, 0.4); outline-color: rgba(255, 255, 255, 0.3); background-color: #a9444e; text-shadow: none; } button.destructive-action:backdrop label, button.destructive-action.flat:backdrop label { color: rgba(255, 255, 255, 0.5); } button.destructive-action:backdrop:active, button.destructive-action:backdrop:checked, button.destructive-action.flat:backdrop:active, button.destructive-action.flat:backdrop:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(255, 255, 255, 0.3); background-color: #81a1c1; text-shadow: none; } button.destructive-action:backdrop:active label, button.destructive-action:backdrop:checked label, button.destructive-action.flat:backdrop:active label, button.destructive-action.flat:backdrop:checked label { color: rgba(254, 254, 254, 0.7); } button.destructive-action:backdrop:disabled, button.destructive-action.flat:backdrop:disabled { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #a9444e; text-shadow: none; } button.destructive-action:backdrop:disabled label, button.destructive-action.flat:backdrop:disabled label { color: rgba(255, 255, 255, 0.5); } button.destructive-action:backdrop:disabled:active, button.destructive-action:backdrop:disabled:checked, button.destructive-action.flat:backdrop:disabled:active, button.destructive-action.flat:backdrop:disabled:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(255, 255, 255, 0.3); background-color: #81a1c1; text-shadow: none; } button.destructive-action.flat:backdrop, button.destructive-action.flat:disabled, button.destructive-action.flat:backdrop:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: rgba(169, 68, 78, 0.8); } button.destructive-action:disabled { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #a9444e; text-shadow: none; } button.destructive-action:disabled:active, button.destructive-action:disabled:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(255, 255, 255, 0.3); background-color: #a9444e; text-shadow: none; } button.destructive-action:disabled:active label, button.destructive-action:disabled:checked label { color: rgba(254, 254, 254, 0.7); } .osd button.destructive-action { color: #d8dee9; border-color: #1f232b; background-color: rgba(169, 68, 78, 0.5); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } .osd button.destructive-action:hover { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(169, 68, 78, 0.7), rgba(169, 68, 78, 0.7)); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } .osd button.destructive-action:active:backdrop, .osd button.destructive-action:active, .osd button.destructive-action:checked:backdrop, .osd button.destructive-action:checked { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, #a9444e, #a9444e); background-clip: padding-box; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(216, 222, 233, 0.3); } .osd button.destructive-action:disabled:backdrop, .osd button.destructive-action:disabled { color: #808690; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(58, 63, 73, 0.5), rgba(58, 63, 73, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } .osd button.destructive-action:backdrop { color: #d8dee9; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(169, 68, 78, 0.5), rgba(169, 68, 78, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } .stack-switcher > button { outline-offset: -3px; } .stack-switcher > button > label { padding-left: 6px; padding-right: 6px; } .stack-switcher > button > image { padding-left: 6px; padding-right: 6px; padding-top: 3px; padding-bottom: 3px; } .stack-switcher > button.text-button { padding-left: 10px; padding-right: 10px; } .stack-switcher > button.image-button { padding-left: 2px; padding-right: 2px; } .stack-switcher > button.needs-attention:active > label, .stack-switcher > button.needs-attention:active > image, .stack-switcher > button.needs-attention:checked > label, .stack-switcher > button.needs-attention:checked > image { animation: none; background-image: none; } .inline-toolbar button, .inline-toolbar button:backdrop { border-radius: 2px; border-width: 1px; } .primary-toolbar button, .primary-toolbar .raised button { -gtk-icon-shadow: none; } .primary-toolbar button:hover, .primary-toolbar button:focus, .primary-toolbar .raised button:hover, .primary-toolbar .raised button:focus { color: #fefefe; outline-color: rgba(254, 254, 254, 0.3); background-color: #81a1c1; text-shadow: none; } .stack-switcher > button.needs-attention > label, .stack-switcher > button.needs-attention > image, stacksidebar row.needs-attention > label { animation: needs_attention 150ms ease-in; background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#b4c7da), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.45, to(rgba(0, 0, 0, 0.7474509804)), to(transparent)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 2px; } .stack-switcher > button.needs-attention > label:backdrop, .stack-switcher > button.needs-attention > image:backdrop, stacksidebar row.needs-attention > label:backdrop { background-size: 6px 6px, 0 0; } .stack-switcher > button.needs-attention > label:dir(rtl), .stack-switcher > button.needs-attention > image:dir(rtl), stacksidebar row.needs-attention > label:dir(rtl) { background-position: left 3px, left 2px; } toolbar button:hover { font-weight: normal; color: #d8dee9; background-color: #3c4454; text-shadow: none; } toolbar button:active { font-weight: normal; color: #d8dee9; background-color: #3c4454; text-shadow: none; } toolbar.osd .linked button { border-color: #1f232b; box-shadow: none; } .inline-toolbar toolbutton > button { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } .inline-toolbar toolbutton > button:hover { color: #fefefe; } .inline-toolbar toolbutton > button:active, .inline-toolbar toolbutton > button:checked { color: #f1f1f1; } .inline-toolbar toolbutton > button:disabled { color: #b9bfcb; } .inline-toolbar toolbutton > button:disabled:active, .inline-toolbar toolbutton > button:disabled:checked { color: rgba(241, 241, 241, 0.3); } .inline-toolbar toolbutton > button:backdrop { color: #b9bfcb; } .inline-toolbar toolbutton > button:backdrop:active, .inline-toolbar toolbutton > button:backdrop:checked { color: #f1f1f1; } .inline-toolbar toolbutton > button:backdrop:disabled { color: #b9bfcb; } .inline-toolbar toolbutton > button:backdrop:disabled:active, .inline-toolbar toolbutton > button:backdrop:disabled:checked { color: rgba(241, 241, 241, 0.3); } toolbar.inline-toolbar toolbutton > button.flat:backdrop, toolbar.inline-toolbar toolbutton:backdrop > button.flat:backdrop { border-color: transparent; box-shadow: none; } .inline-toolbar button, .inline-toolbar button:backdrop, .linked > button, .linked > button:hover, .linked > button:active, .linked > button:checked, .linked > button:backdrop, .linked:not(.vertical) > spinbutton:not(.vertical), .linked:not(.vertical) > entry, .linked > combobox > box > button.combo:dir(ltr), .linked > combobox > box > button.combo:dir(rtl) { border: 1px solid #262a34; border-radius: 0; border-right-style: none; box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1); } .inline-toolbar button:first-child, .linked > button:first-child, combobox.linked button:nth-child(2):dir(rtl), .linked:not(.vertical) > combobox:first-child > box > button.combo, .linked:not(.vertical) > spinbutton:first-child:not(.vertical), .linked:not(.vertical) > entry:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .inline-toolbar button:last-child, .linked > button:last-child, combobox.linked button:nth-child(2):dir(ltr), .linked:not(.vertical) > combobox:last-child > box > button.combo, .linked:not(.vertical) > spinbutton:last-child:not(.vertical), .linked:not(.vertical) > entry:last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-right-style: solid; } .inline-toolbar button:only-child, .linked > button:only-child, .linked:not(.vertical) > combobox:only-child > box > button.combo, .linked:not(.vertical) > spinbutton:only-child:not(.vertical), .linked:not(.vertical) > entry:only-child { border-radius: 3px; border-style: solid; } .linked.vertical > button, .linked.vertical > button:hover, .linked.vertical > button:active, .linked.vertical > button:checked, .linked.vertical > button:backdrop, .linked.vertical > spinbutton:not(.vertical), .linked.vertical > entry, .linked.vertical > combobox > box > button.combo { border-style: solid solid none solid; border-radius: 0; } .linked.vertical > button:first-child, .linked.vertical > combobox:first-child > box > button.combo, .linked.vertical > spinbutton:first-child:not(.vertical), .linked.vertical > entry:first-child { border-top-left-radius: 3px; border-top-right-radius: 3px; } .linked.vertical > button:last-child, .linked.vertical > combobox:last-child > box > button.combo, .linked.vertical > spinbutton:last-child:not(.vertical), .linked.vertical > entry:last-child { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-style: solid; } .linked.vertical > button:only-child, .linked.vertical > combobox:only-child > box > button.combo, .linked.vertical > spinbutton:only-child:not(.vertical), .linked.vertical > entry:only-child { border-radius: 3px; border-style: solid; } modelbutton.flat, popover.background checkbutton, popover.background radiobutton, .menuitem.button.flat, modelbutton.flat:backdrop, popover.background checkbutton:backdrop, popover.background radiobutton:backdrop, modelbutton.flat:backdrop:hover, popover.background checkbutton:backdrop:hover, popover.background radiobutton:backdrop:hover, .menuitem.button.flat:backdrop, .menuitem.button.flat:backdrop:hover, calendar.button, calendar.button:hover, calendar.button:backdrop, calendar.button:disabled, button:link, button:visited, button:link:hover, button:link:active, button:link:checked, button:visited:hover, button:visited:active, button:visited:checked, .scale-popup button:hover, .scale-popup button:backdrop:hover, .scale-popup button:backdrop:disabled, .scale-popup button:backdrop { background-color: transparent; background-image: none; border-color: transparent; box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } /* menu buttons */ modelbutton.flat, popover.background checkbutton, popover.background radiobutton, .menuitem.button.flat { min-height: 26px; padding-left: 5px; padding-right: 5px; border-radius: 3px; outline-offset: -2px; } modelbutton.flat:hover, popover.background checkbutton:hover, popover.background radiobutton:hover, .menuitem.button.flat:hover { background-color: #3f4758; } modelbutton.flat check:last-child, popover.background checkbutton check:last-child, popover.background radiobutton check:last-child, modelbutton.flat radio:last-child, popover.background checkbutton radio:last-child, popover.background radiobutton radio:last-child, .menuitem.button.flat check:last-child, .menuitem.button.flat radio:last-child { margin-left: 8px; } modelbutton.flat check:first-child, popover.background checkbutton check:first-child, popover.background radiobutton check:first-child, modelbutton.flat radio:first-child, popover.background checkbutton radio:first-child, popover.background radiobutton radio:first-child, .menuitem.button.flat check:first-child, .menuitem.button.flat radio:first-child { margin-right: 8px; } modelbutton.flat arrow, popover.background checkbutton arrow, popover.background radiobutton arrow { background: none; } modelbutton.flat arrow:hover, popover.background checkbutton arrow:hover, popover.background radiobutton arrow:hover { background: none; } modelbutton.flat arrow.left, popover.background checkbutton arrow.left, popover.background radiobutton arrow.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } modelbutton.flat arrow.right, popover.background checkbutton arrow.right, popover.background radiobutton arrow.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } button.color { padding: 4px; } button.color colorswatch:only-child, button.color colorswatch:only-child overlay { border-radius: 0; } notebook button, list button, .view button, iconview button, popover button { box-shadow: none; } notebook button:backdrop, list button:backdrop, .view button:backdrop, iconview button:backdrop, popover button:backdrop { box-shadow: none; } notebook .linked > button, list .linked > button, .view .linked > button, iconview .linked > button, popover .linked > button { box-shadow: none; } /************ * Calendar * ***********/ calendar { color: #d8dee9; border: 1px solid #262a34; } calendar:selected { border-radius: 3px; } calendar.header { border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-radius: 0; } calendar.header:backdrop { border-color: rgba(0, 0, 0, 0.1); } calendar.button { color: rgba(216, 222, 233, 0.45); } calendar.button:hover { color: #d8dee9; } calendar.button:backdrop { color: rgba(142, 149, 164, 0.45); } calendar.button:disabled { color: rgba(142, 149, 164, 0.45); } calendar:indeterminate, calendar:indeterminate:backdrop { color: alpha(currentColor,0.55); } calendar.highlight, calendar.highlight:backdrop { font-size: smaller; color: #d8dee9; } calendar:backdrop { color: #b9bfcb; border-color: #292d38; } /************************* * Check and Radio Items * *************************/ check { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-dark.png"), url("../assets/checkbox-unchecked@2.png")); -gtk-icon-shadow: none; } radio { -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked-dark.png"), url("../assets/radio-unchecked@2.png")); -gtk-icon-shadow: none; } check:hover { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-hover-dark.png"), url("../assets/checkbox-unchecked-hover@2.png")); -gtk-icon-shadow: none; } radio:hover { -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked-hover-dark.png"), url("../assets/radio-unchecked-hover@2.png")); -gtk-icon-shadow: none; } check:active { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-active-dark.png"), url("../assets/checkbox-unchecked-active@2.png")); -gtk-icon-shadow: none; } radio:active { -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked-active-dark.png"), url("../assets/radio-unchecked-active@2.png")); -gtk-icon-shadow: none; } check:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-backdrop-dark.png"), url("../assets/checkbox-unchecked-backdrop@2.png")); -gtk-icon-shadow: none; } radio:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked-backdrop-dark.png"), url("../assets/radio-unchecked-backdrop@2.png")); -gtk-icon-shadow: none; } check:disabled { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-insensitive-dark.png"), url("../assets/checkbox-unchecked-insensitive@2.png")); -gtk-icon-shadow: none; } radio:disabled { -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked-insensitive-dark.png"), url("../assets/radio-unchecked-insensitive@2.png")); -gtk-icon-shadow: none; } check:disabled:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-insensitive-dark.png"), url("../assets/checkbox-unchecked-insensitive@2.png")); -gtk-icon-shadow: none; } radio:disabled:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked-insensitive-dark.png"), url("../assets/radio-unchecked-insensitive@2.png")); -gtk-icon-shadow: none; } check:checked { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-dark.png"), url("../assets/checkbox-checked@2.png")); -gtk-icon-shadow: none; } radio:checked { -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-dark.png"), url("../assets/radio-checked@2.png")); -gtk-icon-shadow: none; } check:checked:hover { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-hover-dark.png"), url("../assets/checkbox-checked-hover@2.png")); -gtk-icon-shadow: none; } radio:checked:hover { -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-hover-dark.png"), url("../assets/radio-checked-hover@2.png")); -gtk-icon-shadow: none; } check:checked:active { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-active-dark.png"), url("../assets/checkbox-checked-active@2.png")); -gtk-icon-shadow: none; } radio:checked:active { -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-active-dark.png"), url("../assets/radio-checked-active@2.png")); -gtk-icon-shadow: none; } check:checked:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-backdrop-dark.png"), url("../assets/checkbox-checked-backdrop@2.png")); -gtk-icon-shadow: none; } radio:checked:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-backdrop-dark.png"), url("../assets/radio-checked-backdrop@2.png")); -gtk-icon-shadow: none; } check:checked:disabled { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-insensitive-dark.png"), url("../assets/checkbox-checked-insensitive@2.png")); -gtk-icon-shadow: none; } radio:checked:disabled { -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-insensitive-dark.png"), url("../assets/radio-checked-insensitive@2.png")); -gtk-icon-shadow: none; } check:checked:disabled:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-insensitive-dark.png"), url("../assets/checkbox-checked-insensitive@2.png")); -gtk-icon-shadow: none; } radio:checked:disabled:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-insensitive-dark.png"), url("../assets/radio-checked-insensitive@2.png")); -gtk-icon-shadow: none; } check:indeterminate { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-mixed.png"), url("../assets/checkbox-mixed@2.png")); -gtk-icon-shadow: none; } radio:indeterminate { -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed.png"), url("../assets/radio-mixed@2.png")); -gtk-icon-shadow: none; } check:indeterminate:hover { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-mixed-hover.png"), url("../assets/checkbox-mixed-hover@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:hover { -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed-hover.png"), url("../assets/radio-mixed-hover@2.png")); -gtk-icon-shadow: none; } check:indeterminate:active { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-mixed-active.png"), url("../assets/checkbox-mixed-active@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:active { -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed-active.png"), url("../assets/radio-mixed-active@2.png")); -gtk-icon-shadow: none; } check:indeterminate:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-mixed-backdrop.png"), url("../assets/checkbox-mixed-backdrop@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed-backdrop.png"), url("../assets/radio-mixed-backdrop@2.png")); -gtk-icon-shadow: none; } check:indeterminate:disabled { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-mixed-insensitive.png"), url("../assets/checkbox-mixed-insensitive@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:disabled { -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed-insensitive.png"), url("../assets/radio-mixed-insensitive@2.png")); -gtk-icon-shadow: none; } check:indeterminate:disabled:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-mixed-insensitive.png"), url("../assets/checkbox-mixed-insensitive@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:disabled:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed-insensitive.png"), url("../assets/radio-mixed-insensitive@2.png")); -gtk-icon-shadow: none; } check:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-dark.png"), url("../assets/checkbox-unchecked@2.png")); -gtk-icon-shadow: none; } radio:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-unchecked-dark.png"), url("../assets/selected-radio-unchecked@2.png")); -gtk-icon-shadow: none; } check:hover:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-dark.png"), url("../assets/checkbox-unchecked@2.png")); -gtk-icon-shadow: none; } radio:hover:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-unchecked-dark.png"), url("../assets/selected-radio-unchecked@2.png")); -gtk-icon-shadow: none; } check:active:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-dark.png"), url("../assets/checkbox-unchecked@2.png")); -gtk-icon-shadow: none; } radio:active:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-unchecked-dark.png"), url("../assets/selected-radio-unchecked@2.png")); -gtk-icon-shadow: none; } check:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-dark.png"), url("../assets/checkbox-unchecked@2.png")); -gtk-icon-shadow: none; } radio:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-unchecked-dark.png"), url("../assets/selected-radio-unchecked@2.png")); -gtk-icon-shadow: none; } check:disabled:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-dark.png"), url("../assets/checkbox-unchecked@2.png")); -gtk-icon-shadow: none; } radio:disabled:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-unchecked-dark.png"), url("../assets/selected-radio-unchecked@2.png")); -gtk-icon-shadow: none; } check:disabled:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-dark.png"), url("../assets/checkbox-unchecked@2.png")); -gtk-icon-shadow: none; } radio:disabled:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-unchecked-dark.png"), url("../assets/selected-radio-unchecked@2.png")); -gtk-icon-shadow: none; } check:checked:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-dark.png"), url("../assets/checkbox-checked@2.png")); -gtk-icon-shadow: none; } radio:checked:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-checked-dark.png"), url("../assets/selected-radio-checked@2.png")); -gtk-icon-shadow: none; } check:checked:hover:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-dark.png"), url("../assets/checkbox-checked@2.png")); -gtk-icon-shadow: none; } radio:checked:hover:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-checked-dark.png"), url("../assets/selected-radio-checked@2.png")); -gtk-icon-shadow: none; } check:checked:active:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-dark.png"), url("../assets/checkbox-checked@2.png")); -gtk-icon-shadow: none; } radio:checked:active:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-checked-dark.png"), url("../assets/selected-radio-checked@2.png")); -gtk-icon-shadow: none; } check:checked:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-dark.png"), url("../assets/checkbox-checked@2.png")); -gtk-icon-shadow: none; } radio:checked:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-checked-dark.png"), url("../assets/selected-radio-checked@2.png")); -gtk-icon-shadow: none; } check:checked:disabled:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-dark.png"), url("../assets/checkbox-checked@2.png")); -gtk-icon-shadow: none; } radio:checked:disabled:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-checked-dark.png"), url("../assets/selected-radio-checked@2.png")); -gtk-icon-shadow: none; } check:checked:disabled:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-dark.png"), url("../assets/checkbox-checked@2.png")); -gtk-icon-shadow: none; } radio:checked:disabled:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-checked-dark.png"), url("../assets/selected-radio-checked@2.png")); -gtk-icon-shadow: none; } check:indeterminate:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-checkbox-mixed.png"), url("../assets/selected-checkbox-mixed@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-mixed.png"), url("../assets/selected-radio-mixed@2.png")); -gtk-icon-shadow: none; } check:indeterminate:hover:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-checkbox-mixed.png"), url("../assets/selected-checkbox-mixed@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:hover:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-mixed.png"), url("../assets/selected-radio-mixed@2.png")); -gtk-icon-shadow: none; } check:indeterminate:active:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-checkbox-mixed.png"), url("../assets/selected-checkbox-mixed@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:active:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-mixed.png"), url("../assets/selected-radio-mixed@2.png")); -gtk-icon-shadow: none; } check:indeterminate:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-checkbox-mixed.png"), url("../assets/selected-checkbox-mixed@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-mixed.png"), url("../assets/selected-radio-mixed@2.png")); -gtk-icon-shadow: none; } check:indeterminate:disabled:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-checkbox-mixed.png"), url("../assets/selected-checkbox-mixed@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:disabled:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-mixed.png"), url("../assets/selected-radio-mixed@2.png")); -gtk-icon-shadow: none; } check:indeterminate:disabled:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-checkbox-mixed.png"), url("../assets/selected-checkbox-mixed@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:disabled:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-mixed.png"), url("../assets/selected-radio-mixed@2.png")); -gtk-icon-shadow: none; } .view.content-view check, iconview.content-view check, .view.content-view.check, iconview.content-view.check { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox-unchecked.png"), url("../assets/checkbox-unchecked@2.png")); -gtk-icon-shadow: none; } .view.content-view radio, iconview.content-view radio, .view.content-view.radio, iconview.content-view.radio { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio-unchecked.png"), url("../assets/radio-unchecked@2.png")); -gtk-icon-shadow: none; } .view.content-view check:hover, iconview.content-view check:hover, .view.content-view.check:hover, iconview.content-view.check:hover { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox-unchecked-hover.png"), url("../assets/checkbox-unchecked-hover@2.png")); -gtk-icon-shadow: none; } .view.content-view radio:hover, iconview.content-view radio:hover, .view.content-view.radio:hover, iconview.content-view.radio:hover { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio-unchecked-hover.png"), url("../assets/radio-unchecked-hover@2.png")); -gtk-icon-shadow: none; } .view.content-view check:active, iconview.content-view check:active, .view.content-view.check:active, iconview.content-view.check:active { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox-unchecked-active.png"), url("../assets/checkbox-unchecked-active@2.png")); -gtk-icon-shadow: none; } .view.content-view radio:active, iconview.content-view radio:active, .view.content-view.radio:active, iconview.content-view.radio:active { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio-unchecked-active.png"), url("../assets/radio-unchecked-active@2.png")); -gtk-icon-shadow: none; } .view.content-view check:backdrop, iconview.content-view check:backdrop, .view.content-view.check:backdrop, iconview.content-view.check:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox-unchecked-backdrop.png"), url("../assets/checkbox-unchecked-backdrop@2.png")); -gtk-icon-shadow: none; } .view.content-view radio:backdrop, iconview.content-view radio:backdrop, .view.content-view.radio:backdrop, iconview.content-view.radio:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio-unchecked-backdrop.png"), url("../assets/radio-unchecked-backdrop@2.png")); -gtk-icon-shadow: none; } .view.content-view check:disabled, iconview.content-view check:disabled, .view.content-view.check:disabled, iconview.content-view.check:disabled { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox-unchecked-insensitive.png"), url("../assets/checkbox-unchecked-insensitive@2.png")); -gtk-icon-shadow: none; } .view.content-view radio:disabled, iconview.content-view radio:disabled, .view.content-view.radio:disabled, iconview.content-view.radio:disabled { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio-unchecked-insensitive.png"), url("../assets/radio-unchecked-insensitive@2.png")); -gtk-icon-shadow: none; } .view.content-view check:disabled:backdrop, iconview.content-view check:disabled:backdrop, .view.content-view.check:disabled:backdrop, iconview.content-view.check:disabled:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox-unchecked-backdrop-insensitive.png"), url("../assets/checkbox-unchecked-backdrop-insensitive@2.png")); -gtk-icon-shadow: none; } .view.content-view radio:disabled:backdrop, iconview.content-view radio:disabled:backdrop, .view.content-view.radio:disabled:backdrop, iconview.content-view.radio:disabled:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio-unchecked-backdrop-insensitive.png"), url("../assets/radio-unchecked-backdrop-insensitive@2.png")); -gtk-icon-shadow: none; } checkbutton.text-button, radiobutton.text-button { padding: 2px 0; outline-offset: 0; } checkbutton.text-button label:not(:only-child):first-child, radiobutton.text-button label:not(:only-child):first-child { margin-left: 4px; } checkbutton.text-button label:not(:only-child):last-child, radiobutton.text-button label:not(:only-child):last-child { margin-right: 4px; } check, radio { margin: 0 4px; min-height: 16px; min-width: 16px; border: none; } menu menuitem check, menu menuitem radio { margin: 0; } menu menuitem check, menu menuitem check:hover, menu menuitem check:disabled, menu menuitem radio, menu menuitem radio:hover, menu menuitem radio:disabled { min-height: 14px; min-width: 14px; background-image: none; background-color: transparent; box-shadow: none; -gtk-icon-shadow: none; color: inherit; border-color: currentColor; animation: none; } /***************** * Color Chooser * *****************/ colorswatch, colorswatch:drop(active) { border-style: none; } colorswatch.top { border-top-left-radius: 5.5px; border-top-right-radius: 5.5px; } colorswatch.top overlay { border-top-left-radius: 5px; border-top-right-radius: 5px; } colorswatch.bottom { border-bottom-left-radius: 5.5px; border-bottom-right-radius: 5.5px; } colorswatch.bottom overlay { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } colorswatch.left, colorswatch:first-child:not(.top) { border-top-left-radius: 5.5px; border-bottom-left-radius: 5.5px; } colorswatch.left overlay, colorswatch:first-child:not(.top) overlay { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } colorswatch.right, colorswatch:last-child:not(.bottom) { border-top-right-radius: 5.5px; border-bottom-right-radius: 5.5px; } colorswatch.right overlay, colorswatch:last-child:not(.bottom) overlay { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } colorswatch.dark overlay { color: #fefefe; } colorswatch.dark overlay:hover { border-color: #262a34; } colorswatch.dark overlay:backdrop { color: rgba(254, 254, 254, 0.5); } colorswatch.light overlay { color: #d8dee9; } colorswatch.light overlay:hover { border-color: #262a34; } colorswatch.light overlay:backdrop { color: #b9bfcb; } colorswatch:drop(active) { box-shadow: none; } colorswatch:drop(active).light overlay { border-color: #a3be8c; box-shadow: inset 0 0 0 2px #262a34, inset 0 0 0 1px #a3be8c; } colorswatch:drop(active).dark overlay { border-color: #a3be8c; box-shadow: inset 0 0 0 2px #262a34, inset 0 0 0 1px #a3be8c; } colorswatch overlay { box-shadow: inset 0 3px 2px -2px rgba(0, 0, 0, 0.5); border: 1px solid #262a34; } colorswatch overlay:hover { box-shadow: inset 0 1px rgba(255, 255, 255, 0.3); } colorswatch overlay:backdrop, colorswatch overlay:backdrop:hover { border-color: #262a34; box-shadow: none; } colorswatch#add-color-button { border-radius: 5px 5px 0 0; } colorswatch#add-color-button:only-child { border-radius: 5px; } colorswatch#add-color-button overlay { font-weight: normal; color: #d8dee9; background-color: #3c4454; text-shadow: none; } colorswatch#add-color-button overlay:hover { color: #d8dee9; outline-color: rgba(216, 222, 233, 0.3); background-color: #3b4252; text-shadow: none; } colorswatch#add-color-button overlay:backdrop { color: #b9bfcb; outline-color: rgba(216, 222, 233, 0.3); background-color: #3d4455; text-shadow: none; } colorswatch:disabled { opacity: 0.5; } colorswatch:disabled overlay { border-color: rgba(0, 0, 0, 0.6); box-shadow: none; } row:selected colorswatch { box-shadow: 0 0 0 2px #fefefe; } colorswatch#editor-color-sample { border-radius: 4px; } colorswatch#editor-color-sample overlay { border-radius: 4.5px; } colorchooser .popover.osd { border-radius: 5px; } /************** * ComboBoxes * **************/ combobox arrow { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); min-height: 16px; min-width: 16px; } combobox:drop(active) { box-shadow: none; } /*********** * Dialogs * ***********/ messagedialog .titlebar:not(headerbar) { background-color: rgba(67, 76, 94, 0.95); } messagedialog .titlebar { min-height: 20px; background-image: none; background-color: rgba(67, 76, 94, 0.95); border-style: none; border-top-left-radius: 4px; border-top-right-radius: 4px; } messagedialog.csd.background { background-color: rgba(67, 76, 94, 0.95); color: #d8dee9; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } messagedialog.csd .dialog-action-area button { padding: 10px 14px; border-radius: 0; border-left-style: solid; border-right-style: none; border-bottom-style: none; background-color: transparent; color: #d8dee9; box-shadow: none; } messagedialog.csd .dialog-action-area button:hover { background-color: rgba(129, 161, 193, 0.9); color: white; } messagedialog.csd .dialog-action-area button:first-child { border-left-style: none; border-bottom-left-radius: 4px; } messagedialog.csd .dialog-action-area button:last-child { border-bottom-right-radius: 4px; } messagedialog.csd .dialog-action-area button.destructive-action, messagedialog.csd .dialog-action-area button.suggested-action { color: white; } filechooser .dialog-action-box { border-top: 1px solid #262a34; } filechooser .dialog-action-box:backdrop { border-top-color: #292d38; } filechooser #pathbarbox { border-bottom: 1px solid #434c5e; } filechooserbutton:drop(active) { box-shadow: none; border-color: transparent; } /**************** * Text Entries * ****************/ spinbutton:not(.vertical), entry { min-height: 28px; padding-left: 8px; padding-right: 8px; border: 1px solid; border-radius: 3px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #d8dee9; border-color: #262a34; background-color: #3b4252; } spinbutton:not(.vertical) image.left, entry image.left { padding-left: 0; padding-right: 6px; } spinbutton:not(.vertical) image.right, entry image.right { padding-left: 6px; padding-right: 0; } spinbutton:not(.vertical) undershoot.left, entry undershoot.left { background-color: transparent; background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); padding-left: 1px; background-size: 1px 10px; background-repeat: repeat-y; background-origin: content-box; background-position: left center; border: none; box-shadow: none; } spinbutton:not(.vertical) undershoot.right, entry undershoot.right { background-color: transparent; background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); padding-right: 1px; background-size: 1px 10px; background-repeat: repeat-y; background-origin: content-box; background-position: right center; border: none; box-shadow: none; } spinbutton.flat:focus:not(.vertical), spinbutton.flat:not(.vertical), entry.flat:focus, entry.flat { min-height: 0; padding: 2px; background-image: none; border-color: transparent; box-shadow: none; border-radius: 0; } spinbutton:focus:not(.vertical), entry:focus { border-color: #5f88b0; } spinbutton:disabled:not(.vertical), entry:disabled { color: #8e95a4; border-color: #262a34; background-color: #404859; box-shadow: none; } spinbutton:backdrop:not(.vertical), entry:backdrop { color: #b9bfcb; border-color: #292d38; background-color: #3d4455; box-shadow: none; transition: 200ms ease-out; } spinbutton:backdrop:disabled:not(.vertical), entry:backdrop:disabled { color: #63708b; border-color: #292d38; background-color: #404859; box-shadow: none; } spinbutton.error:not(.vertical), entry.error { color: #d8dee9; border-color: #262a34; background-color: #3b4252; color: #b84f59; border-color: #3c181c; } spinbutton.error:focus:not(.vertical), entry.error:focus { border-color: #3c181c; } spinbutton.error:selected:focus:not(.vertical), spinbutton.error:selected:not(.vertical), entry.error:selected:focus, entry.error:selected { background-color: #b84f59; } spinbutton.warning:not(.vertical), entry.warning { color: #d8dee9; border-color: #262a34; background-color: #3b4252; color: #c3674a; border-color: #442116; } spinbutton.warning:focus:not(.vertical), entry.warning:focus { border-color: #442116; } spinbutton.warning:selected:focus:not(.vertical), spinbutton.warning:selected:not(.vertical), entry.warning:selected:focus, entry.warning:selected { background-color: #c3674a; } spinbutton:not(.vertical) image, entry image { color: #b9bfcb; } spinbutton:not(.vertical) image:hover, entry image:hover { color: #d8dee9; } spinbutton:not(.vertical) image:active, entry image:active { color: #81a1c1; } spinbutton:not(.vertical) image:backdrop, entry image:backdrop { color: #7e8594; } spinbutton:drop(active):focus:not(.vertical), spinbutton:drop(active):not(.vertical), entry:drop(active):focus, entry:drop(active) { border-color: #a3be8c; box-shadow: inset 0 0 0 1px #a3be8c; } .osd spinbutton:not(.vertical), .osd entry { color: #d8dee9; border-color: #1f232b; background-color: rgba(31, 35, 43, 0.5); box-shadow: none; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; } .osd spinbutton:focus:not(.vertical), .osd entry:focus { color: #d8dee9; border-color: #81a1c1; background-color: rgba(31, 35, 43, 0.5); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; } .osd spinbutton:backdrop:not(.vertical), .osd entry:backdrop { color: #d8dee9; border-color: #1f232b; background-color: rgba(31, 35, 43, 0.5); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } .osd spinbutton:disabled:not(.vertical), .osd entry:disabled { color: #808690; border-color: #1f232b; background-color: rgba(58, 63, 73, 0.5); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } spinbutton:not(.vertical) progress, entry progress { margin: 2px -6px; background-color: transparent; background-image: none; border-radius: 0; border-width: 0 0 2px; border-color: #81a1c1; border-style: solid; box-shadow: none; } spinbutton:not(.vertical) progress:backdrop, entry progress:backdrop { background-color: transparent; } .linked:not(.vertical) > spinbutton:focus:not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:focus:not(.vertical) + button, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + combobox > box > button.combo, .linked:not(.vertical) > entry:focus + spinbutton:not(.vertical), .linked:not(.vertical) > entry:focus + button, .linked:not(.vertical) > entry:focus + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + entry, .linked:not(.vertical) > entry:focus + entry { border-left-color: #5f88b0; } .linked:not(.vertical) > spinbutton:focus:not(.vertical), .linked:not(.vertical) > entry:focus { border-color: #5f88b0; } .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + combobox > box > button.combo, .linked:not(.vertical) > entry:drop(active) + spinbutton:not(.vertical), .linked:not(.vertical) > entry:drop(active) + button, .linked:not(.vertical) > entry:drop(active) + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + entry, .linked:not(.vertical) > entry:drop(active) + entry { border-left-color: #a3be8c; } .linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):not(.vertical), .linked.vertical > entry:not(:disabled) + entry:not(:disabled), .linked.vertical > entry:not(:disabled) + spinbutton:not(:disabled):not(.vertical) { border-top-color: #353b49; background-image: linear-gradient(to bottom, #3b4252, #3b4252); } .linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled):backdrop, .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):backdrop:not(.vertical), .linked.vertical > entry:not(:disabled) + entry:not(:disabled):backdrop, .linked.vertical > entry:not(:disabled) + spinbutton:not(:disabled):backdrop:not(.vertical) { border-top-color: #373d4c; background-image: linear-gradient(to bottom, #3d4455, #3d4455); } .linked.vertical > spinbutton:disabled:not(.vertical) + spinbutton:disabled:not(.vertical), .linked.vertical > spinbutton:disabled:not(.vertical) + entry:disabled, .linked.vertical > entry:disabled + spinbutton:disabled:not(.vertical), .linked.vertical > entry:disabled + entry:disabled { border-top-color: #353b49; } .linked.vertical > spinbutton:not(.vertical) + spinbutton:focus:not(:only-child):not(.vertical), .linked.vertical > spinbutton:not(.vertical) + entry:focus:not(:only-child), .linked.vertical > entry + spinbutton:focus:not(:only-child):not(.vertical), .linked.vertical > entry + entry:focus:not(:only-child) { border-top-color: #5f88b0; } .linked.vertical > spinbutton:not(.vertical) + spinbutton:drop(active):not(:only-child):not(.vertical), .linked.vertical > spinbutton:not(.vertical) + entry:drop(active):not(:only-child), .linked.vertical > entry + spinbutton:drop(active):not(:only-child):not(.vertical), .linked.vertical > entry + entry:drop(active):not(:only-child) { border-top-color: #a3be8c; } .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + spinbutton:not(.vertical), .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + entry, .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + button, .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + combobox > box > button.combo, .linked.vertical > entry:focus:not(:only-child) + spinbutton:not(.vertical), .linked.vertical > entry:focus:not(:only-child) + entry, .linked.vertical > entry:focus:not(:only-child) + button, .linked.vertical > entry:focus:not(:only-child) + combobox > box > button.combo { border-top-color: #5f88b0; } .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + spinbutton:not(.vertical), .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + entry, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + button, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + combobox > box > button.combo, .linked.vertical > entry:drop(active):not(:only-child) + spinbutton:not(.vertical), .linked.vertical > entry:drop(active):not(:only-child) + entry, .linked.vertical > entry:drop(active):not(:only-child) + button, .linked.vertical > entry:drop(active):not(:only-child) + combobox > box > button.combo { border-top-color: #a3be8c; } treeview entry:focus:dir(rtl), treeview entry:focus:dir(ltr) { background-color: #3b4252; transition-property: color, background; } treeview entry.flat, treeview entry { border-radius: 0; background-image: none; background-color: #3b4252; } treeview entry.flat:focus, treeview entry:focus { border-color: #81a1c1; } /************* * Expanders * *************/ expander arrow { min-width: 16px; min-height: 16px; -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } expander arrow:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); } expander arrow:hover { color: white; } expander arrow:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } /**************** * Floating Bar * ****************/ .floating-bar { background-color: #434c5e; border-width: 1px; border-style: solid solid none; border-color: #262a34; border-radius: 3px 3px 0 0; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } .floating-bar.bottom.left { border-left-style: none; border-top-left-radius: 0; } .floating-bar.bottom.right { border-right-style: none; border-top-right-radius: 0; } .floating-bar > button { padding: 4px; } .floating-bar:backdrop { background-color: #434c5e; border-color: #292d38; } /********** * Frames * **********/ frame > border, .frame { box-shadow: none; margin: 0; padding: 0; border-radius: 0; border: 1px solid #262a34; } frame > border.flat, .frame.flat { border-style: none; } frame > border:backdrop, .frame:backdrop { border-color: #292d38; } actionbar > revealer > box { padding: 6px; border-top: 1px solid #262a34; } actionbar > revealer > box:backdrop { border-color: #292d38; } scrolledwindow viewport.frame { border-style: none; } scrolledwindow overshoot.top { background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#101217), to(rgba(16, 18, 23, 0))), -gtk-gradient(radial, center top, 0, center top, 0.6, from(rgba(216, 222, 233, 0.13)), to(rgba(216, 222, 233, 0))); background-size: 100% 5%, 100% 100%; background-repeat: no-repeat; background-position: center top; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.top:backdrop { background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#292d38), to(rgba(41, 45, 56, 0))); background-size: 100% 5%; background-repeat: no-repeat; background-position: center top; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.bottom { background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#101217), to(rgba(16, 18, 23, 0))), -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(rgba(216, 222, 233, 0.13)), to(rgba(216, 222, 233, 0))); background-size: 100% 5%, 100% 100%; background-repeat: no-repeat; background-position: center bottom; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.bottom:backdrop { background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#292d38), to(rgba(41, 45, 56, 0))); background-size: 100% 5%; background-repeat: no-repeat; background-position: center bottom; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.left { background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#101217), to(rgba(16, 18, 23, 0))), -gtk-gradient(radial, left center, 0, left center, 0.6, from(rgba(216, 222, 233, 0.13)), to(rgba(216, 222, 233, 0))); background-size: 5% 100%, 100% 100%; background-repeat: no-repeat; background-position: left center; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.left:backdrop { background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#292d38), to(rgba(41, 45, 56, 0))); background-size: 5% 100%; background-repeat: no-repeat; background-position: left center; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.right { background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#101217), to(rgba(16, 18, 23, 0))), -gtk-gradient(radial, right center, 0, right center, 0.6, from(rgba(216, 222, 233, 0.13)), to(rgba(216, 222, 233, 0))); background-size: 5% 100%, 100% 100%; background-repeat: no-repeat; background-position: right center; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.right:backdrop { background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#292d38), to(rgba(41, 45, 56, 0))); background-size: 5% 100%; background-repeat: no-repeat; background-position: right center; background-color: transparent; border: none; box-shadow: none; } scrolledwindow undershoot.top { background-color: transparent; background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); padding-top: 1px; background-size: 10px 1px; background-repeat: repeat-x; background-origin: content-box; background-position: center top; border: none; box-shadow: none; } scrolledwindow undershoot.bottom { background-color: transparent; background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); padding-bottom: 1px; background-size: 10px 1px; background-repeat: repeat-x; background-origin: content-box; background-position: center bottom; border: none; box-shadow: none; } scrolledwindow undershoot.left { background-color: transparent; background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); padding-left: 1px; background-size: 1px 10px; background-repeat: repeat-y; background-origin: content-box; background-position: left center; border: none; box-shadow: none; } scrolledwindow undershoot.right { background-color: transparent; background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); padding-right: 1px; background-size: 1px 10px; background-repeat: repeat-y; background-origin: content-box; background-position: right center; border: none; box-shadow: none; } scrolledwindow junction { border-color: transparent; border-image: linear-gradient(to bottom, #262a34 1px, transparent 1px) 0 0 0 1/0 1px stretch; background-color: #3f4758; } scrolledwindow junction:dir(rtl) { border-image-slice: 0 1 0 0; } scrolledwindow junction:backdrop { border-image-source: linear-gradient(to bottom, #292d38 1px, transparent 1px); background-color: #3d4555; transition: 200ms ease-out; } separator { background: rgba(0, 0, 0, 0.1); } /************ * Popovers * ************/ GraniteWidgetsPopOver { -GraniteWidgetsPopOver-arrow-width: 21; -GraniteWidgetsPopOver-arrow-height: 10; -GraniteWidgetsPopOver-border-radius: 8px; -GraniteWidgetsPopOver-border-width: 0; -GraniteWidgetsPopOver-shadow-size: 12; border: 1px solid #3b4252; background: #3b4252; color: #d8dee9; } GraniteWidgetsPopOver .button { background-image: none; background: none; border: none; } GraniteWidgetsPopOver .button:active, GraniteWidgetsPopOver .button:active:hover { color: #81a1c1; } GraniteWidgetsPopOver > .frame { border: none; } GraniteWidgetsPopOver .sidebar.view, GraniteWidgetsPopOver iconview.sidebar { border: none; background: none; } GraniteWidgetsStaticNotebook .frame { border: none; } .popover_bg { background-color: #3b4252; background-image: none; border: 1px solid #3b4252; color: #d8dee9; } /*********** * Welcome * **********/ GraniteWidgetsWelcome { background-color: #3b4252; } GraniteWidgetsWelcome GtkLabel { color: #d8dee9; } GraniteWidgetsWelcome .h1, GraniteWidgetsWelcome .h3 { color: rgba(216, 222, 233, 0.8); } /************** * Source List * ***************/ .source-list { -GtkTreeView-horizontal-separator: 1px; -GtkTreeView-vertical-separator: 6px; background-color: #434c5e; border: solid #262a34; color: #d8dee9; border-right-width: 1px; } .source-list .category-expander { color: transparent; } .source-list .badge { background-image: none; background-color: rgba(0, 0, 0, 0.4); color: #434c5e; border-radius: 10px; padding: 0 6px; margin: 0 3px; border-width: 0; } .source-list .badge:selected:backdrop, .source-list .badge:selected:hover:backdrop { background-color: rgba(0, 0, 0, 0.2); color: #38404f; } .source-list row, .source-list .list-row { border: none; padding: 0; } .source-list row > GtkLabel, .source-list row > label, .source-list .list-row > GtkLabel, .source-list .list-row > label { padding-left: 6px; padding-right: 6px; } /************** * Text Styles * **************/ .h1 { font-size: 24px; } .h2 { font-weight: 300; font-size: 18px; } .h3 { font-size: 11px; } .h4, .category-label { font-size: 12px; padding: 6px; color: rgba(216, 222, 233, 0.3); font-weight: bold; text-shadow: 0 1px rgba(255, 255, 255, 0.2); } /************** * Storage Bar * **************/ .storage-bar .trough { border: none; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1); background-image: none; background-color: transparent; padding: 8px 6px; } .storage-bar .fill-block { background-color: #ebcb8b; border: none; box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); transition: all 200ms ease-in-out; padding: 8px 6px; } .storage-bar .fill-block:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-left-width: 1px; box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1), inset 1px 0 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); } .storage-bar .fill-block:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1), inset -1px 0 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); } .storage-bar .fill-block.empty-block { background-color: #3b4252; } .storage-bar .fill-block.app { background-color: #5e81ac; } .storage-bar .fill-block.audio { background-color: #d08770; } .storage-bar .fill-block.photo { background-color: #bf616a; } .storage-bar .fill-block.video { background-color: #b48ead; } .storage-bar .fill-block .legend { padding: 12px; border-radius: 4px; } /*************** * Header bars * ***************/ .titlebar:not(headerbar), .titlebar, headerbar { padding: 0 13px; min-height: 34px; background: #2b313c; color: #d8dee9; border-radius: 0; } .titlebar:backdrop, headerbar:backdrop { border-color: #292d38; transition: 200ms ease-out; } .titlebar .title, headerbar .title { font-weight: bold; padding-left: 12px; padding-right: 12px; } .titlebar .subtitle, headerbar .subtitle { font-size: smaller; padding-left: 12px; padding-right: 12px; } .titlebar entry, headerbar entry { min-height: 24px; } .titlebar button, headerbar button { color: #d8dee9; border-radius: 4px; text-shadow: none; box-shadow: none; border: 1px solid #1f232b; background-color: #343b48; min-height: 20px; margin-top: 5px; margin-bottom: 5px; box-shadow: none; } .titlebar button.image-button, headerbar button.image-button { padding: 3px 4px; } .titlebar button.appmenu, headerbar button.appmenu { background: transparent; } .titlebar button.appmenu:backdrop, headerbar button.appmenu:backdrop { background: transparent; } .titlebar button:hover, headerbar button:hover { color: #fff; text-shadow: none; background-color: rgba(129, 161, 193, 0.8); border-color: #1f232b; } .titlebar button:active, .titlebar button:checked, headerbar button:active, headerbar button:checked { color: #fff; outline-color: rgba(255, 255, 255, 0.3); background-color: #81a1c1; text-shadow: none; border-color: #1f232b; } .titlebar button:backdrop, .titlebar button:disabled, .titlebar button:backdrop:disabled, headerbar button:backdrop, headerbar button:disabled, headerbar button:backdrop:disabled { color: rgba(216, 222, 233, 0.2); background-color: #282d37; border-color: #1f232b; text-shadow: none; box-shadow: none; } .titlebar button:backdrop:hover, .titlebar button:backdrop:active, .titlebar button:backdrop:checked, headerbar button:backdrop:hover, headerbar button:backdrop:active, headerbar button:backdrop:checked { color: #81a1c1; background-color: rgba(129, 161, 193, 0.6); border-color: #1f232b; text-shadow: none; box-shadow: none; } .titlebar button.suggested-action, headerbar button.suggested-action { box-shadow: none; border: none; background-image: linear-gradient(to right, #88c0d0 0%, #88c0d0 100%); } .titlebar button.suggested-action:disabled, .titlebar button.suggested-action:disabled:backdrop, .titlebar button.suggested-action:backdrop, headerbar button.suggested-action:disabled, headerbar button.suggested-action:disabled:backdrop, headerbar button.suggested-action:backdrop { border: none; background-image: linear-gradient(to right, #88c0d0 0%, #88c0d0 100%); } .titlebar button.suggested-action:disabled:hover, .titlebar button.suggested-action:disabled:active, .titlebar button.suggested-action:disabled:checked, .titlebar button.suggested-action:disabled:backdrop:hover, .titlebar button.suggested-action:disabled:backdrop:active, .titlebar button.suggested-action:disabled:backdrop:checked, .titlebar button.suggested-action:backdrop:hover, .titlebar button.suggested-action:backdrop:active, .titlebar button.suggested-action:backdrop:checked, headerbar button.suggested-action:disabled:hover, headerbar button.suggested-action:disabled:active, headerbar button.suggested-action:disabled:checked, headerbar button.suggested-action:disabled:backdrop:hover, headerbar button.suggested-action:disabled:backdrop:active, headerbar button.suggested-action:disabled:backdrop:checked, headerbar button.suggested-action:backdrop:hover, headerbar button.suggested-action:backdrop:active, headerbar button.suggested-action:backdrop:checked { border: none; background-image: linear-gradient(to right, #88c0d0 0%, #88c0d0 100%); } .titlebar button.suggested-action, headerbar button.suggested-action { font-weight: bold; min-height: 14px; margin-top: 5px; margin-bottom: 5px; border-radius: 4px; font-weight: normal; color: white; background-color: #3c4454; text-shadow: none; box-shadow: none; } .titlebar button.suggested-action:hover, headerbar button.suggested-action:hover { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #88c0d0; text-shadow: none; } .titlebar button.suggested-action:active, headerbar button.suggested-action:active { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #88c0d0; text-shadow: none; } .titlebar button.suggested-action:disabled, headerbar button.suggested-action:disabled { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #88c0d0; text-shadow: none; } .titlebar button.suggested-action:disabled label, headerbar button.suggested-action:disabled label { color: rgba(255, 255, 255, 0.5); } .titlebar button.suggested-action:backdrop, headerbar button.suggested-action:backdrop { color: rgba(255, 255, 255, 0.4); outline-color: rgba(255, 255, 255, 0.3); background-color: #88c0d0; text-shadow: none; border-radius: 3px; } .titlebar button.suggested-action:backdrop:disabled, headerbar button.suggested-action:backdrop:disabled { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #88c0d0; text-shadow: none; } .titlebar button.destructive-action, headerbar button.destructive-action { font-weight: bold; min-height: 14px; margin-top: 5px; margin-bottom: 5px; border-radius: 4px; font-weight: normal; color: white; background-color: #3c4454; text-shadow: none; box-shadow: none; } .titlebar button.destructive-action:hover, headerbar button.destructive-action:hover { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #a9444e; text-shadow: none; } .titlebar button.destructive-action:active, headerbar button.destructive-action:active { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #a9444e; text-shadow: none; } .titlebar button.destructive-action:disabled, headerbar button.destructive-action:disabled { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #a9444e; text-shadow: none; } .titlebar button.destructive-action:disabled label, headerbar button.destructive-action:disabled label { color: rgba(255, 255, 255, 0.5); } .titlebar button.destructive-action:backdrop, headerbar button.destructive-action:backdrop { color: rgba(255, 255, 255, 0.4); outline-color: rgba(255, 255, 255, 0.3); background-color: #a9444e; text-shadow: none; border-radius: 3px; } .titlebar button.destructive-action:backdrop:disabled, headerbar button.destructive-action:backdrop:disabled { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #a9444e; text-shadow: none; } .titlebar button.titlebutton, headerbar button.titlebutton { color: transparent; box-shadow: none; border: none; background-color: transparent; background-repeat: no-repeat; } .titlebar button.titlebutton:hover, .titlebar button.titlebutton:active, .titlebar button.titlebutton:checked, .titlebar button.titlebutton:backdrop, .titlebar button.titlebutton:backdrop:hover, .titlebar button.titlebutton *, headerbar button.titlebutton:hover, headerbar button.titlebutton:active, headerbar button.titlebutton:checked, headerbar button.titlebutton:backdrop, headerbar button.titlebutton:backdrop:hover, headerbar button.titlebutton * { color: transparent; box-shadow: none; background-color: transparent; } .titlebar .linked > button, .titlebar .path-bar-box button, .titlebar headerbar .linked > button, headerbar .path-bar-box .titlebar button, .titlebar .linked > button:hover, .titlebar .linked > button:backdrop, .titlebar headerbar .linked > button, headerbar .path-bar-box .titlebar button, headerbar .titlebar .linked > button, headerbar .linked > button, headerbar .titlebar .path-bar-box button, .titlebar .path-bar-box headerbar button, headerbar .path-bar-box button, headerbar .titlebar .linked > button:hover, .titlebar headerbar .linked > button:hover, headerbar .titlebar .linked > button:backdrop, .titlebar headerbar .linked > button:backdrop, headerbar .linked > button:hover, headerbar .linked > button:backdrop { border-radius: 0; border-right-style: none; box-shadow: none; margin: 5px 0px; min-height: 20px; } .titlebar .linked > button:first-child, .titlebar .path-bar-box button:first-child, .titlebar headerbar .linked > button:first-child, headerbar .path-bar-box .titlebar button:first-child, headerbar .titlebar .linked > button:first-child, headerbar .linked > button:first-child, .titlebar .path-bar-box headerbar button:first-child, headerbar .path-bar-box button:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .titlebar .linked > button:last-child, .titlebar .path-bar-box button:last-child, .titlebar headerbar .linked > button:last-child, headerbar .path-bar-box .titlebar button:last-child, headerbar .titlebar .linked > button:last-child, headerbar .linked > button:last-child, .titlebar .path-bar-box headerbar button:last-child, headerbar .path-bar-box button:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-right-style: solid; } .titlebar .linked > button:only-child, .titlebar .path-bar-box button:only-child, .titlebar headerbar .linked > button:only-child, headerbar .path-bar-box .titlebar button:only-child, headerbar .titlebar .linked > button:only-child, headerbar .linked > button:only-child, .titlebar .path-bar-box headerbar button:only-child, headerbar .path-bar-box button:only-child { border-radius: 4px; border-style: solid; } .titlebar .linked > button:active, .titlebar headerbar .linked > button:active, .titlebar .path-bar-box button:active, headerbar .path-bar-box .titlebar button:active, .titlebar .linked > button:checked, .titlebar headerbar .linked > button:checked, .titlebar .path-bar-box button:checked, headerbar .path-bar-box .titlebar button:checked, headerbar .titlebar .linked > button:active, headerbar .linked > button:active, .titlebar .path-bar-box headerbar button:active, headerbar .path-bar-box button:active, headerbar .titlebar .linked > button:checked, headerbar .linked > button:checked, .titlebar .path-bar-box headerbar button:checked, headerbar .path-bar-box button:checked { color: #fff; outline-color: rgba(255, 255, 255, 0.3); background-color: #81a1c1; text-shadow: none; } .titlebar .linked > button:active:backdrop, .titlebar headerbar .linked > button:active:backdrop, .titlebar .path-bar-box button:active:backdrop, headerbar .path-bar-box .titlebar button:active:backdrop, .titlebar .linked > button:checked:backdrop, .titlebar headerbar .linked > button:checked:backdrop, .titlebar .path-bar-box button:checked:backdrop, headerbar .path-bar-box .titlebar button:checked:backdrop, headerbar .titlebar .linked > button:active:backdrop, headerbar .linked > button:active:backdrop, .titlebar .path-bar-box headerbar button:active:backdrop, headerbar .path-bar-box button:active:backdrop, headerbar .titlebar .linked > button:checked:backdrop, headerbar .linked > button:checked:backdrop, .titlebar .path-bar-box headerbar button:checked:backdrop, headerbar .path-bar-box button:checked:backdrop { background-color: rgba(129, 161, 193, 0.6); color: #81a1c1; } .titlebar .linked > button:active:backdrop label, .titlebar .path-bar-box button:active:backdrop label, headerbar .path-bar-box .titlebar button:active:backdrop label, .titlebar .linked > button:checked:backdrop label, .titlebar .path-bar-box button:checked:backdrop label, headerbar .path-bar-box .titlebar button:checked:backdrop label, headerbar .linked > button:active:backdrop label, .titlebar .path-bar-box headerbar button:active:backdrop label, headerbar .path-bar-box button:active:backdrop label, headerbar .linked > button:checked:backdrop label, .titlebar .path-bar-box headerbar button:checked:backdrop label, headerbar .path-bar-box button:checked:backdrop label { color: #81a1c1; } .titlebar .linked:not(.vertical) > entry, headerbar .linked:not(.vertical) > entry { border-color: #1f232b; box-shadow: none; background: #2f3642; color: #d8dee9; caret-color: #d8dee9; } .titlebar .linked:not(.vertical) > entry *, headerbar .linked:not(.vertical) > entry * { color: #d8dee9; } .titlebar .linked:not(.vertical) > entry:focus, headerbar .linked:not(.vertical) > entry:focus { border-color: #5f88b0; } .titlebar .path-bar-box .dim-label, .titlebar .path-bar-box label.separator, .titlebar .path-bar-box .subtitle, headerbar .path-bar-box .dim-label, headerbar .path-bar-box label.separator, headerbar .path-bar-box .subtitle { color: transparent; margin-right: -6px; } .titlebar .path-bar-box button:last-child, headerbar .path-bar-box button:last-child { margin-left: -1px; border-radius: 0px; } .titlebar .path-bar-box button:last-child:active, .titlebar .path-bar-box button:last-child:checked, headerbar .path-bar-box button:last-child:active, headerbar .path-bar-box button:last-child:checked { border-radius: 0px 4px 4px 0px; } .titlebar .path-bar-box button:first-child, headerbar .path-bar-box button:first-child { border-radius: 4px 0px 0px 4px; } .titlebar .path-bar-box button:first-child:active, .titlebar .path-bar-box button:first-child:checked, headerbar .path-bar-box button:first-child:active, headerbar .path-bar-box button:first-child:checked { border-radius: 4px; } .titlebar .path-bar-box widget > .text-button:last-child, headerbar .path-bar-box widget > .text-button:last-child { border-radius: 0px 4px 4px 0px; color: #fff; outline-color: rgba(255, 255, 255, 0.3); background-color: #81a1c1; text-shadow: none; } .titlebar .path-bar-box widget > .text-button:last-child:backdrop, headerbar .path-bar-box widget > .text-button:last-child:backdrop { background: rgba(129, 161, 193, 0.6); } .titlebar .path-bar-box widget > .text-button:last-child:backdrop, .titlebar .path-bar-box widget > .text-button:last-child:backdrop label, headerbar .path-bar-box widget > .text-button:last-child:backdrop, headerbar .path-bar-box widget > .text-button:last-child:backdrop label { color: #81a1c1; } .titlebar .path-bar-box widget > .text-button:last-child:only-child, headerbar .path-bar-box widget > .text-button:last-child:only-child { border-radius: 4px; } .titlebar .path-buttons-box, headerbar .path-buttons-box { background-color: #434c5e; border: 1px solid #262a34; min-height: 20px; margin-top: 5px; margin-bottom: 5px; color: #d8dee9; border-radius: 4px; text-shadow: none; box-shadow: none; border: 1px solid #1f232b; background-color: #343b48; border-radius: 4px 0px 0px 4px; } .titlebar .path-buttons-box .dim-label, .titlebar .path-buttons-box label.separator, .titlebar .path-buttons-box .subtitle, headerbar .path-buttons-box .dim-label, headerbar .path-buttons-box label.separator, headerbar .path-buttons-box .subtitle { color: transparent; margin-right: -5px; } .titlebar .path-buttons-box button > .horizontal > .dim-label, .titlebar .path-buttons-box button > .horizontal > label.separator, .titlebar .path-buttons-box button > .horizontal > .subtitle, headerbar .path-buttons-box button > .horizontal > .dim-label, headerbar .path-buttons-box button > .horizontal > label.separator, headerbar .path-buttons-box button > .horizontal > .subtitle { color: #d8dee9; padding: 3px 12px; margin: 0; border-right: 1px solid #1f232b; } .titlebar .path-buttons-box button > .horizontal > image.dim-label, .titlebar .path-buttons-box button > .horizontal > image.subtitle, headerbar .path-buttons-box button > .horizontal > image.dim-label, headerbar .path-buttons-box button > .horizontal > image.subtitle { padding: 3px 0px 3px 12px; border-right: none; } .titlebar .path-buttons-box button, headerbar .path-buttons-box button { background: transparent; border: none; margin: 0; padding: 0; } .titlebar .path-buttons-box .current-dir label, headerbar .path-buttons-box .current-dir label { padding: 3px 12px; } .titlebar .path-buttons-box .current-dir label, .titlebar .path-buttons-box .current-dir image, headerbar .path-buttons-box .current-dir label, headerbar .path-buttons-box .current-dir image { color: #fff; outline-color: rgba(255, 255, 255, 0.3); background-color: #81a1c1; text-shadow: none; } .titlebar .path-buttons-box button.current-dir:only-child image, headerbar .path-buttons-box button.current-dir:only-child image { margin-right: -6px; padding: 0px 6px 0px 12px; border-radius: 4px 0px 0px 4px; } .selection-mode.titlebar button:backdrop.flat:active, .selection-mode.titlebar button:backdrop.flat:checked, .selection-mode.titlebar button:backdrop:active, .selection-mode.titlebar button:backdrop:checked, headerbar.selection-mode button:backdrop.flat:active, headerbar.selection-mode button:backdrop.flat:checked, headerbar.selection-mode button:backdrop:active, headerbar.selection-mode button:backdrop:checked { border-color: #5f88b0; } .selection-mode.titlebar button:backdrop.flat:active label, .selection-mode.titlebar button:backdrop.flat:checked label, .selection-mode.titlebar button:backdrop:active label, .selection-mode.titlebar button:backdrop:checked label, headerbar.selection-mode button:backdrop.flat:active label, headerbar.selection-mode button:backdrop.flat:checked label, headerbar.selection-mode button:backdrop:active label, headerbar.selection-mode button:backdrop:checked label { color: rgba(129, 161, 193, 0.6); } .tiled .titlebar, .maximized .titlebar, .tiled headerbar.titlebar, .maximized headerbar.titlebar { box-shadow: inset 0 -1px rgba(0, 0, 0, 0.1); } .tiled .titlebar:backdrop, .tiled .titlebar, .maximized .titlebar:backdrop, .maximized .titlebar, .tiled headerbar:backdrop, .tiled headerbar, .maximized headerbar:backdrop, .maximized headerbar { border-radius: 0; } .default-decoration.titlebar, headerbar.default-decoration { padding: 5px 4px; min-height: 20px; } .default-decoration.titlebar button.titlebutton, headerbar.default-decoration button.titlebutton { min-height: 20px; min-width: 20px; margin: 0; padding: 0; } headerbar entry, headerbar spinbutton, headerbar separator { margin-top: 5px; margin-bottom: 5px; } headerbar switch { margin-top: 5px; margin-bottom: 5px; } headerbar separator { background: transparent; } headerbar viewswitcher > box.horizontal > button.radio, headerbar switcher > box.horizontal > button.radio { margin: 0; padding: 0; border-radius: 0; } headerbar viewswitcher > box.horizontal > button.radio image, headerbar switcher > box.horizontal > button.radio image { margin-left: 7px; } headerbar viewswitcher > box.horizontal > button.radio label, headerbar switcher > box.horizontal > button.radio label { margin-right: 7px; } .background:not(.tiled):not(.maximized) .titlebar { box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 -1px rgba(0, 0, 0, 0.1); } .background:not(.tiled):not(.maximized) .titlebar:backdrop, .background:not(.tiled):not(.maximized) .titlebar { border-top-left-radius: 4px; border-top-right-radius: 4px; } window:not(.tiled):not(.maximized) separator:first-child + headerbar:backdrop, window:not(.tiled):not(.maximized) separator:first-child + headerbar, window:not(.tiled):not(.maximized) headerbar:first-child:backdrop, window:not(.tiled):not(.maximized) headerbar:first-child { border-top-left-radius: 4px; } window:not(.tiled):not(.maximized) headerbar:last-child:backdrop, window:not(.tiled):not(.maximized) headerbar:last-child { border-top-right-radius: 4px; } window.csd > .titlebar:not(headerbar) { padding: 0; background-color: transparent; background-image: none; border-style: none; border-color: transparent; box-shadow: none; } .titlebar:not(headerbar) > separator, .titlebar:not(headerbar) > separator:backdrop { background: #2b313c; } /************** * GtkInfoBar * **************/ .info, .warning, .question, .error, infobar { text-shadow: none; color: #d8dee9; background-color: #434c5e; border-bottom: 1px solid #2e3440; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.15); } .info, .warning, .question, .error { text-shadow: none; color: #fefefe; border: none; } .info .label, .warning .label, .question .label, .error .label { color: #fefefe; } .info .label:backdrop, .warning .label:backdrop, .question .label:backdrop, .error .label:backdrop { color: rgba(254, 254, 254, 0.5); } .info button, .warning button, .question button, .error button { border-radius: 2px; border: none; background: rgba(59, 66, 82, 0.98); color: #d8dee9; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2); } .info button .label, .warning button .label, .question button .label, .error button .label { color: #d8dee9; } .info button:active, .warning button:active, .question button:active, .error button:active { background: #3b4252; color: #d8dee9; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); } .info button:active:backdrop, .warning button:active:backdrop, .question button:active:backdrop, .error button:active:backdrop { background: rgba(59, 66, 82, 0.8); color: rgba(216, 222, 233, 0.5); box-shadow: none; } .info button:hover, .warning button:hover, .question button:hover, .error button:hover, .info button:focus, .warning button:focus, .question button:focus, .error button:focus { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); } .info button:disabled, .warning button:disabled, .question button:disabled, .error button:disabled { background: rgba(59, 66, 82, 0.6); color: rgba(216, 222, 233, 0.5); box-shadow: none; } .info button:disabled:backdrop, .warning button:disabled:backdrop, .question button:disabled:backdrop, .error button:disabled:backdrop { background: rgba(59, 66, 82, 0.5); color: rgba(216, 222, 233, 0.5); box-shadow: none; } .info button:backdrop, .warning button:backdrop, .question button:backdrop, .error button:backdrop { background: rgba(59, 66, 82, 0.8); color: rgba(216, 222, 233, 0.5); box-shadow: none; } .info { background-color: #8fbcbb; } .info:backdrop { background-color: #afcfce; color: rgba(254, 254, 254, 0.5); } .warning { background-color: #c3674a; } .warning:backdrop { background-color: #d08770; color: rgba(254, 254, 254, 0.5); } .question { background-color: #88c0d0; } .question:backdrop { background-color: #add3de; color: rgba(254, 254, 254, 0.5); } .error { background-color: #b84f59; } .error:backdrop { background-color: #c6737b; color: rgba(254, 254, 254, 0.5); } /************* * Level Bar * *************/ levelbar block { min-width: 32px; min-height: 6px; } levelbar.vertical block { min-width: 6px; min-height: 32px; } levelbar:backdrop { transition: 200ms ease-out; } levelbar trough { padding: 3px; border-radius: 3px; background-color: rgba(255, 255, 255, 0.2); box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); } levelbar trough:backdrop { background-color: rgba(255, 255, 255, 0.06); box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); } levelbar.horizontal.discrete block { margin: 0 1px; } levelbar.vertical.discrete block { margin: 1px 0; } levelbar block { border-radius: 2px; } levelbar block:backdrop { box-shadow: none; } levelbar block.low { background-color: #c3674a; } levelbar block.low:backdrop { border-color: #c3674a; } levelbar block.high, levelbar block:not(.empty) { background-color: #88c0d0; } levelbar block.high:backdrop, levelbar block:not(.empty):backdrop { border-color: #88c0d0; } levelbar block.full { background-color: #63adc2; } levelbar block.full:backdrop { border-color: #63adc2; } levelbar block.empty { background-color: rgba(0, 0, 0, 0.35); box-shadow: none; } /********* * Links * *********/ *:link, button:link, button:visited { color: #5e81ac; } *:link:visited, button:visited { color: rgba(94, 129, 172, 0.5); } *:selected *:link:visited, *:selected button:visited:link, *:selected button:visited { color: #ccd9e6; } *:link:hover, button:hover:link, button:hover:visited { color: #809bbd; } *:selected *:link:hover, *:selected button:hover:link, *:selected button:hover:visited { color: #f2f5f8; } *:link:active, button:active:link, button:active:visited { color: #5e81ac; } *:selected *:link:active, *:selected button:active:link, *:selected button:active:visited { color: #e5ebf2; } *:link:backdrop:backdrop:hover, button:backdrop:backdrop:hover:link, button:backdrop:backdrop:hover:visited, *:link:backdrop:backdrop:hover:selected, button:backdrop:backdrop:hover:selected:link, button:backdrop:backdrop:hover:selected:visited, *:link:backdrop, button:backdrop:link, button:backdrop:visited { color: #81a1c1; } *:link:selected, button:selected:link, button:selected:visited, *:selected *:link, *:selected button:link, *:selected button:visited { color: #e5ebf2; } button:link, button:visited { text-shadow: none; } button:link:hover, button:link:active, button:link:checked, button:visited:hover, button:visited:active, button:visited:checked { text-shadow: none; } button:link > label, button:visited > label { text-decoration-line: underline; } /********* * Lists * *********/ list { color: #d8dee9; background-color: #3b4252; border-color: #262a34; } list:backdrop { background-color: #3d4455; border-color: #292d38; } row { background-color: transparent; border-color: #262a34; } row:hover { transition: none; } row:backdrop { transition: 200ms ease-out; } row.activatable.has-open-popup, row.activatable:hover { background-color: rgba(216, 222, 233, 0.05); } row.activatable:active { box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); } row.activatable:backdrop:hover { background-color: transparent; } row.activatable button.flat { background-color: transparent; } row.activatable:selected:active { box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); } row.activatable:selected.has-open-popup, row.activatable:selected:hover { background-color: rgba(129, 161, 193, 0.5); } row.activatable:selected:backdrop { background-color: rgba(129, 161, 193, 0.6); } /********* * Menus * *********/ menubar, .menubar { background-color: #2b313c; color: #d8dee9; -GtkWidget-window-dragging: true; padding: 0px; box-shadow: inset 0 -1px rgba(0, 0, 0, 0.1); } menubar > menuitem, .menubar > menuitem { min-height: 16px; padding: 4px 8px; } menubar > menuitem:hover, .menubar > menuitem:hover { box-shadow: inset 0 -3px #81a1c1; } menubar > menuitem:disabled, .menubar > menuitem:disabled { color: #8e95a4; box-shadow: none; } menu, .menu, .context-menu { margin: 4px; padding: 2px 0px; background: #2e3440; border: 1px solid #262a34; border-radius: 5px; font: initial; } .csd menu, .csd .menu, .csd .context-menu { border: none; } menu:backdrop, .menu:backdrop, .context-menu:backdrop { background-color: #3e4657; } menu menuitem, .menu menuitem, .context-menu menuitem { min-height: 17px; min-width: 40px; padding: 4px 6px; text-shadow: none; } menu menuitem:hover, .menu menuitem:hover, .context-menu menuitem:hover { color: #fefefe; background-color: #81a1c1; } menu menuitem:disabled, .menu menuitem:disabled, .context-menu menuitem:disabled { color: #8e95a4; } menu menuitem:disabled:backdrop, .menu menuitem:disabled:backdrop, .context-menu menuitem:disabled:backdrop { color: #63708b; } menu menuitem:backdrop, menu menuitem:backdrop:hover, .menu menuitem:backdrop, .menu menuitem:backdrop:hover, .context-menu menuitem:backdrop, .context-menu menuitem:backdrop:hover { color: #8e95a4; background-color: transparent; } menu menuitem arrow, .menu menuitem arrow, .context-menu menuitem arrow { min-height: 16px; min-width: 16px; } menu menuitem arrow:dir(ltr), .menu menuitem arrow:dir(ltr), .context-menu menuitem arrow:dir(ltr) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); margin-left: 10px; } menu menuitem arrow:dir(rtl), .menu menuitem arrow:dir(rtl), .context-menu menuitem arrow:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); margin-right: 10px; } menu menuitem label:dir(rtl), menu menuitem label:dir(ltr), .menu menuitem label:dir(rtl), .menu menuitem label:dir(ltr), .context-menu menuitem label:dir(rtl), .context-menu menuitem label:dir(ltr) { color: inherit; } menuitem accelerator { color: alpha(currentColor,0.55); } menuitem check, menuitem radio { min-height: 16px; min-width: 16px; } menuitem check:dir(ltr), menuitem radio:dir(ltr) { margin-right: 7px; } menuitem check:dir(rtl), menuitem radio:dir(rtl) { margin-left: 7px; } .csd.popup { background-color: transparent; } /******** * Misc * ********/ .content-view { background-color: #343b49; } .content-view:hover { -gtk-icon-effect: highlight; } .content-view:backdrop { background-color: #343b49; } .osd .scale-popup button.flat { border-style: none; border-radius: 5px; } .scale-popup button:hover { background-color: rgba(216, 222, 233, 0.1); border-radius: 5px; } /************ * Assistant * *************/ assistant { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } assistant .sidebar { background-color: #3b4252; border-top: 1px solid #262a34; border-bottom-left-radius: 4px; } assistant .sidebar:backdrop { background-color: #3d4455; border-color: #292d38; } assistant.csd .sidebar { border-top-style: none; } assistant .sidebar GtkLabel, assistant .sidebar label { padding: 6px 12px; } assistant .sidebar GtkLabel.highlight, assistant .sidebar label.highlight { background-color: #61697a; } /************* * Notebooks * *************/ notebook > header { padding: 1px; border-color: #262a34; border-width: 1px; background-color: #303643; } notebook > header:backdrop { border-color: #292d38; background-color: #434c5e; } notebook > header tabs { margin: 0px; } notebook > header.top { border-bottom-style: solid; } notebook > header.top > tabs { margin-bottom: -2px; } notebook > header.top > tabs > tab:backdrop { box-shadow: none; } notebook > header.top > tabs > tab:checked { background-color: #3b4252; } notebook > header.top > tabs > tab:checked:hover { background-color: #3b4252; } notebook > header.bottom { border-top-style: solid; } notebook > header.bottom > tabs { margin-top: -2px; } notebook > header.bottom > tabs > tab:backdrop { box-shadow: none; } notebook > header.bottom > tabs > tab:checked { background-color: #3b4252; box-shadow: -1px 0 0 #262a34, 0px 1px 0 #262a34, 1px 0 0 #262a34; } notebook > header.left { border-right-style: solid; } notebook > header.left > tabs { margin-right: -2px; } notebook > header.left > tabs > tab:backdrop { box-shadow: none; } notebook > header.left > tabs > tab:checked { background-color: #3b4252; box-shadow: 0px 1px 0 #262a34, 0px -1px 0 #262a34, 0px 1px 0 #262a34; } notebook > header.right { border-left-style: solid; } notebook > header.right > tabs { margin-left: -2px; } notebook > header.right > tabs > tab:backdrop { box-shadow: none; } notebook > header.right > tabs > tab:checked { background-color: #3b4252; box-shadow: 0px 1px 0 #262a34, 0px -1px 0 #262a34, 1px 0 0 #262a34; } notebook > header.top > tabs > arrow { border-top-style: none; } notebook > header.bottom > tabs > arrow { border-bottom-style: none; } notebook > header.top > tabs > arrow, notebook > header.bottom > tabs > arrow { margin-left: -5px; margin-right: -5px; padding-left: 4px; padding-right: 4px; } notebook > header.top > tabs > arrow.down, notebook > header.bottom > tabs > arrow.down { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } notebook > header.top > tabs > arrow.up, notebook > header.bottom > tabs > arrow.up { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } notebook > header.left > tabs > arrow { border-left-style: none; } notebook > header.right > tabs > arrow { border-right-style: none; } notebook > header.left > tabs > arrow, notebook > header.right > tabs > arrow { margin-top: -5px; margin-bottom: -5px; padding-top: 4px; padding-bottom: 4px; } notebook > header.left > tabs > arrow.down, notebook > header.right > tabs > arrow.down { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow.up { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } notebook > header > tabs > arrow { min-height: 14px; min-width: 14px; border-radius: 0; } notebook > header > tabs > arrow:hover:not(:active):not(:backdrop) { background-clip: padding-box; background-image: none; background-color: rgba(255, 255, 255, 0.3); border-color: transparent; box-shadow: none; } notebook > header > tabs > arrow:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } notebook > header tab { min-height: 24px; min-width: 24px; padding: 1px 12px; outline-offset: -5px; color: #8e95a4; font-weight: normal; border-width: 1px; border-color: transparent; } notebook > header tab:hover { color: #b3bac7; } notebook > header tab:hover.reorderable-page { border-color: rgba(38, 42, 52, 0.3); background-color: rgba(67, 76, 94, 0.2); } notebook > header tab:backdrop { color: #707888; } notebook > header tab:backdrop.reorderable-page { border-color: transparent; background-color: transparent; } notebook > header tab:checked { color: #d8dee9; box-shadow: -1px 0 0 #262a34, 0px -1px 0 #262a34, 1px 0 0 #262a34; } notebook > header tab:checked.reorderable-page { border-color: rgba(38, 42, 52, 0.5); background-color: rgba(67, 76, 94, 0.5); } notebook > header tab:checked.reorderable-page:hover { background-color: rgba(67, 76, 94, 0.7); } notebook > header tab:backdrop:checked { color: #8e95a4; } notebook > header tab:backdrop:checked.reorderable-page { border-color: #292d38; background-color: #3d4455; } notebook > header tab button.flat { padding: 0; margin-top: 4px; margin-bottom: 4px; min-width: 20px; min-height: 20px; } notebook > header tab button.flat:hover { background: transparent; box-shadow: none; color: #bf616a; } notebook > header tab button.flat, notebook > header tab button.flat:backdrop { background: transparent; border: none; color: alpha(currentColor,0.3); } notebook > header tab button.flat:last-child { margin-left: 4px; margin-right: -4px; } notebook > header tab button.flat:first-child { margin-left: -4px; margin-right: 4px; } notebook > header.top tabs, notebook > header.bottom tabs { padding-left: 0px; padding-right: 0px; } notebook > header.top tabs:not(:only-child), notebook > header.bottom tabs:not(:only-child) { margin-left: 0.5px; margin-right: 0.5px; } notebook > header.top tabs:not(:only-child):first-child, notebook > header.bottom tabs:not(:only-child):first-child { margin-left: -1px; } notebook > header.top tabs:not(:only-child):last-child, notebook > header.bottom tabs:not(:only-child):last-child { margin-right: -1px; } notebook > header.top tabs tab, notebook > header.bottom tabs tab { margin-left: 0.5px; margin-right: 0.5px; } notebook > header.top tabs tab.reorderable-page, notebook > header.bottom tabs tab.reorderable-page { border-style: none solid; } notebook > header.left tabs, notebook > header.right tabs { padding-top: 4px; padding-bottom: 4px; } notebook > header.left tabs:not(:only-child), notebook > header.right tabs:not(:only-child) { margin-top: 3px; margin-bottom: 3px; } notebook > header.left tabs:not(:only-child):first-child, notebook > header.right tabs:not(:only-child):first-child { margin-top: -1px; } notebook > header.left tabs:not(:only-child):last-child, notebook > header.right tabs:not(:only-child):last-child { margin-bottom: -1px; } notebook > header.left tabs tab, notebook > header.right tabs tab { margin-top: 4px; margin-bottom: 4px; } notebook > header.left tabs tab.reorderable-page, notebook > header.right tabs tab.reorderable-page { border-style: solid none; } notebook > header.top tab { padding-bottom: 1px; } notebook > header.bottom tab { padding-top: 1px; } notebook > stack:not(:only-child) { background-color: #3b4252; } notebook > stack:not(:only-child):backdrop { background-color: #3d4455; } /********* * Paned * *********/ paned > separator { min-width: 1px; min-height: 1px; -gtk-icon-source: none; border-style: none; background-color: transparent; background-image: image(#262a34); background-size: 1px 1px; } paned > separator:selected { background-image: image(#81a1c1); } paned > separator:backdrop { background-image: image(#292d38); } paned > separator.wide { min-width: 5px; min-height: 5px; background-color: #434c5e; background-image: image(#262a34), image(#262a34); background-size: 1px 1px, 1px 1px; } paned > separator.wide:backdrop { background-color: #434c5e; background-image: image(#292d38), image(#292d38); } paned.horizontal > separator { background-repeat: repeat-y; } paned.horizontal > separator:dir(ltr) { margin: 0 -8px 0 0; padding: 0 8px 0 0; background-position: left; } paned.horizontal > separator:dir(rtl) { margin: 0 0 0 -8px; padding: 0 0 0 8px; background-position: right; } paned.horizontal > separator.wide { margin: 0; padding: 0; background-repeat: repeat-y, repeat-y; background-position: left, right; } paned.vertical > separator { margin: 0 0 -8px 0; padding: 0 0 8px 0; background-repeat: repeat-x; background-position: top; } paned.vertical > separator.wide { margin: 0; padding: 0; background-repeat: repeat-x, repeat-x; background-position: bottom, top; } /************ * Pathbars * ************/ .path-bar button.text-button, .path-bar button.image-button, .path-bar button { padding-left: 4px; padding-right: 4px; } .path-bar button.text-button.image-button label { padding-left: 0; padding-right: 0; } .path-bar button.text-button.image-button label:last-child, .path-bar button label:last-child { padding-right: 8px; } .path-bar button.text-button.image-button label:first-child, .path-bar button label:first-child { padding-left: 8px; } .path-bar button image { padding-left: 4px; padding-right: 4px; } .path-bar button.slider-button { padding-left: 0; padding-right: 0; } /*************** * Popovers * ***************/ popover.background { padding: 2px; border-radius: 5px; background: #2e3440; box-shadow: 0 4px 6px #262a34; } .csd popover.background, popover.background { border: 1px solid #262a34; } popover.background:backdrop { background-color: #434c5e; box-shadow: none; } popover.background > list, popover.background > .view, popover.background > iconview, popover.background > toolbar { border-style: none; background-color: transparent; } .csd popover.background.touch-selection, .csd popover.background.magnifier, popover.background.touch-selection, popover.background.magnifier { border: 1px solid rgba(255, 255, 255, 0.1); } popover.background separator { margin: 3px; } popover.background list separator { margin: 0px; } popover.background list row { padding: 8px; } /***************** * Progress bars * *****************/ progressbar { font-size: smaller; color: rgba(216, 222, 233, 0.4); } progressbar.horizontal trough, progressbar.horizontal progress { min-height: 6px; } progressbar.vertical trough, progressbar.vertical progress { min-width: 6px; } progressbar.horizontal progress { margin: 0; } progressbar.vertical progress { margin: 0; } progressbar:backdrop { box-shadow: none; transition: 200ms ease-out; } progressbar.osd { min-width: 3px; min-height: 3px; background-color: transparent; } progressbar.osd trough { border-style: none; border-radius: 0; background-color: transparent; box-shadow: none; } progressbar.osd progress { border-style: none; border-radius: 0; } /************ * GtkScale * ************/ progressbar trough, scale trough, scale fill { background-color: rgba(255, 255, 255, 0.14); border: none; border-radius: 3px; margin: 0; } progressbar trough:disabled, scale trough:disabled, scale fill:disabled { background-color: rgba(255, 255, 255, 0.06); } progressbar trough:backdrop, progressbar:backdrop trough, scale trough:backdrop, scale fill:backdrop { background-color: rgba(255, 255, 255, 0.06); transition: 200ms ease-out; } progressbar trough:backdrop:disabled, progressbar:backdrop trough:disabled, scale trough:backdrop:disabled, scale fill:backdrop:disabled { background-color: rgba(255, 255, 255, 0.06); } progressbar progress, scale highlight { border: none; background-color: #81a1c1; border-radius: 3px; margin: 0; } progressbar progress:disabled, scale highlight:disabled { border: none; background-color: rgba(255, 255, 255, 0.14); } progressbar progress:backdrop, progressbar:backdrop progress, scale highlight:backdrop, progressbar progress:active:backdrop, progressbar:backdrop progress:active, scale highlight:active:backdrop { border-color: #92aec9; background-color: #92aec9; } progressbar progress:backdrop:disabled, progressbar:backdrop progress:disabled, scale highlight:backdrop:disabled, progressbar progress:active:backdrop:disabled, progressbar:backdrop progress:active:disabled, scale highlight:active:backdrop:disabled { background-color: rgba(255, 255, 255, 0.06); } scale { min-height: 16px; min-width: 16px; padding: 8px; } scale.horizontal trough, scale.horizontal progress { min-height: 6px; } scale.vertical trough, scale.vertical progress { min-width: 6px; } scale slider { min-height: 16px; min-width: 16px; margin: -7px; background-color: #3b4252; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0px 0px 1px 1px rgba(0, 0, 0, 0.1); border-radius: 12px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-property: background, border, box-shadow; } scale slider:active { background-color: #81a1c1; } scale slider:active:disabled { background-color: #404859; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0px 0px 1px 1px rgba(0, 0, 0, 0.05); } scale.fine-tune.horizontal { padding-top: 9px; padding-bottom: 9px; min-height: 16px; } scale.fine-tune.vertical { padding-left: 9px; padding-right: 9px; min-width: 16px; } scale.fine-tune slider { margin: -6px; } scale.fine-tune fill, scale.fine-tune highlight, scale.fine-tune trough { border-radius: 5px; -gtk-outline-radius: 7px; } scale trough { outline-offset: 2px; -gtk-outline-radius: 5px; outline-color: transparent; } scale fill:backdrop, scale fill { background-color: #262a34; } scale fill:disabled:backdrop, scale fill:disabled { border-color: transparent; background-color: transparent; } .osd scale fill { background-color: #4d525b; } .osd scale fill:disabled:backdrop, .osd scale fill:disabled { border-color: transparent; background-color: transparent; } scale slider { border-color: #59647b; border: none; border-radius: 12px; background-color: #59647b; } scale slider:active { border-color: #5f88b0; } scale slider:disabled { background-color: #4a5367; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0px 0px 1px 1px rgba(0, 0, 0, 0.1); } scale slider:backdrop, scale slider:backdrop:disabled { transition: 200ms ease-out; background-color: #4a5367; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0px 0px 1px 1px rgba(0, 0, 0, 0.1); } row:selected scale slider:disabled, row:selected scale slider { border-color: #5f88b0; } scale value { color: alpha(currentColor,0.4); } scale marks { color: alpha(currentColor,0.4); } scale marks.top { margin-bottom: 6px; margin-top: -12px; } scale marks.bottom { margin-top: 6px; margin-bottom: -12px; } scale marks.top { margin-right: 6px; margin-left: -12px; } scale marks.bottom { margin-left: 6px; margin-right: -12px; } scale.fine-tune marks.top { margin-bottom: 6px; margin-top: -9px; } scale.fine-tune marks.bottom { margin-top: 6px; margin-bottom: -9px; } scale.fine-tune marks.top { margin-right: 6px; margin-left: -9px; } scale.fine-tune marks.bottom { margin-left: 6px; margin-right: -9px; } scale.horizontal indicator { min-height: 6px; min-width: 1px; } scale.horizontal.fine-tune indicator { min-height: 3px; } scale.vertical indicator { min-height: 1px; min-width: 6px; } scale.vertical.fine-tune indicator { min-width: 3px; } scale.horizontal.marks-before:not(.marks-after) slider { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.horizontal.marks-before:not(.marks-after) slider:hover { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.horizontal.marks-before:not(.marks-after) slider:active { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.horizontal.marks-before:not(.marks-after) slider:disabled { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.horizontal.marks-before:not(.marks-after) slider:backdrop { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.horizontal.marks-before:not(.marks-after) slider:backdrop:disabled { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.horizontal.marks-after:not(.marks-before) slider { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.horizontal.marks-after:not(.marks-before) slider:hover { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.horizontal.marks-after:not(.marks-before) slider:active { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.horizontal.marks-after:not(.marks-before) slider:disabled { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.horizontal.marks-after:not(.marks-before) slider:backdrop { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.horizontal.marks-after:not(.marks-before) slider:backdrop:disabled { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.vertical.marks-before:not(.marks-after) slider { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.vertical.marks-before:not(.marks-after) slider:hover { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.vertical.marks-before:not(.marks-after) slider:active { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.vertical.marks-before:not(.marks-after) slider:disabled { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.vertical.marks-before:not(.marks-after) slider:backdrop { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.vertical.marks-before:not(.marks-after) slider:backdrop:disabled { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.vertical.marks-after:not(.marks-before) slider { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.vertical.marks-after:not(.marks-before) slider:hover { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.vertical.marks-after:not(.marks-before) slider:active { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.vertical.marks-after:not(.marks-before) slider:disabled { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.vertical.marks-after:not(.marks-before) slider:backdrop { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.vertical.marks-after:not(.marks-before) slider:backdrop:disabled { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.color { min-height: 0; min-width: 0; } scale.color trough { background-image: image(#262a34); background-repeat: no-repeat; } scale.color.horizontal { padding: 0 0 15px 0; } scale.color.horizontal trough { padding-bottom: 4px; background-position: 0 -3px; border-top-left-radius: 0; border-top-right-radius: 0; } scale.color.horizontal slider:dir(ltr):hover, scale.color.horizontal slider:dir(ltr):backdrop, scale.color.horizontal slider:dir(ltr):disabled, scale.color.horizontal slider:dir(ltr):backdrop:disabled, scale.color.horizontal slider:dir(ltr), scale.color.horizontal slider:dir(rtl):hover, scale.color.horizontal slider:dir(rtl):backdrop, scale.color.horizontal slider:dir(rtl):disabled, scale.color.horizontal slider:dir(rtl):backdrop:disabled, scale.color.horizontal slider:dir(rtl) { margin-bottom: -15px; margin-top: 6px; } scale.color.vertical:dir(ltr) { padding: 0 0 0 15px; } scale.color.vertical:dir(ltr) trough { padding-left: 4px; background-position: 3px 0; border-bottom-right-radius: 0; border-top-right-radius: 0; } scale.color.vertical:dir(ltr) slider:hover, scale.color.vertical:dir(ltr) slider:backdrop, scale.color.vertical:dir(ltr) slider:disabled, scale.color.vertical:dir(ltr) slider:backdrop:disabled, scale.color.vertical:dir(ltr) slider { margin-left: -15px; margin-right: 6px; } scale.color.vertical:dir(rtl) { padding: 0 15px 0 0; } scale.color.vertical:dir(rtl) trough { padding-right: 4px; background-position: -3px 0; border-bottom-left-radius: 0; border-top-left-radius: 0; } scale.color.vertical:dir(rtl) slider:hover, scale.color.vertical:dir(rtl) slider:backdrop, scale.color.vertical:dir(rtl) slider:disabled, scale.color.vertical:dir(rtl) slider:backdrop:disabled, scale.color.vertical:dir(rtl) slider { margin-right: -15px; margin-left: 6px; } scale.color.fine-tune.horizontal:dir(ltr), scale.color.fine-tune.horizontal:dir(rtl) { padding: 0 0 12px 0; } scale.color.fine-tune.horizontal:dir(ltr) trough, scale.color.fine-tune.horizontal:dir(rtl) trough { padding-bottom: 7px; background-position: 0 -6px; } scale.color.fine-tune.horizontal:dir(ltr) slider, scale.color.fine-tune.horizontal:dir(rtl) slider { margin-bottom: -15px; margin-top: 6px; } scale.color.fine-tune.vertical:dir(ltr) { padding: 0 0 0 12px; } scale.color.fine-tune.vertical:dir(ltr) trough { padding-left: 7px; background-position: 6px 0; } scale.color.fine-tune.vertical:dir(ltr) slider { margin-left: -15px; margin-right: 6px; } scale.color.fine-tune.vertical:dir(rtl) { padding: 0 12px 0 0; } scale.color.fine-tune.vertical:dir(rtl) trough { padding-right: 7px; background-position: -6px 0; } scale.color.fine-tune.vertical:dir(rtl) slider { margin-right: -15px; margin-left: 6px; } /************** * Scrollbars * **************/ scrollbar { background-color: #3f4758; transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } * { -GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-forward-stepper: false; } scrollbar.top { border-bottom: 1px solid #262a34; } scrollbar.bottom { border-top: 1px solid #262a34; } scrollbar.left { border-right: 1px solid #262a34; } scrollbar.right { border-left: 1px solid #262a34; } scrollbar:backdrop { background-color: #3d4555; border-color: #292d38; transition: 200ms ease-out; } scrollbar slider { min-width: 6px; min-height: 6px; margin: -1px; border: 4px solid transparent; border-radius: 8px; background-clip: padding-box; background-color: #9ca4b1; } scrollbar slider:hover { background-color: #bac1cd; } scrollbar slider:hover:active { background-color: #a3bbd2; } scrollbar slider:backdrop { background-color: #61697a; } scrollbar slider:disabled { background-color: transparent; } scrollbar.fine-tune slider { min-width: 4px; min-height: 4px; } scrollbar.fine-tune.horizontal slider { border-width: 5px 4px; } scrollbar.fine-tune.vertical slider { border-width: 4px 5px; } scrollbar.overlay-indicator:not(.dragging):not(.hovering) { border-color: transparent; opacity: 0.4; background-color: transparent; } scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider { margin: 0; min-width: 3px; min-height: 3px; background-color: #d8dee9; border: 1px solid black; } scrollbar.overlay-indicator:not(.dragging):not(.hovering) button { min-width: 5px; min-height: 5px; background-color: #d8dee9; background-clip: padding-box; border-radius: 100%; border: 1px solid black; -gtk-icon-source: none; } scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider { margin: 0 2px; min-width: 40px; } scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal button { margin: 1px 2px; min-width: 5px; } scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider { margin: 2px 0; min-height: 40px; } scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical button { margin: 2px 1px; min-height: 5px; } scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering { opacity: 0.8; } scrollbar.horizontal slider { min-width: 40px; } scrollbar.vertical slider { min-height: 40px; } scrollbar button { padding: 0; min-width: 12px; min-height: 12px; border-style: none; border-radius: 0; transition-property: min-height, min-width, color; border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #9ca4b1; } scrollbar button:hover { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #bac1cd; } scrollbar button:active, scrollbar button:checked { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #a3bbd2; } scrollbar button:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: rgba(156, 164, 177, 0.2); } scrollbar button:backdrop { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #61697a; } scrollbar button:backdrop:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: rgba(97, 105, 122, 0.2); } scrollbar.vertical button.down { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } scrollbar.vertical button.up { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } scrollbar.horizontal button.down { -gtk-icon-source: -gtk-icontheme("pan-right-symbolic"); } scrollbar.horizontal button.up { -gtk-icon-source: -gtk-icontheme("pan-left-symbolic"); } treeview ~ scrollbar.vertical { border-top: 1px solid #262a34; margin-top: -1px; } /*********** * Sidebar * ***********/ .sidebar { border-style: none; border-width: 0; background-color: #3f4758; } .sidebar .frame { border: none; } stacksidebar.sidebar:dir(ltr) list, stacksidebar.sidebar.left list, stacksidebar.sidebar.left:dir(rtl) list, .sidebar:dir(ltr), .sidebar.left, .sidebar.left:dir(rtl) { border-right: none; border-left-style: none; } stacksidebar.sidebar:dir(rtl) list .sidebar:dir(rtl), stacksidebar.sidebar.right list .sidebar:dir(rtl), .sidebar.right { border-left: 1px solid #262a34; border-right-style: none; } .sidebar:backdrop { background-color: #40485a; border-color: #292d38; } .sidebar row { padding: 8px 12px; transition: all .12s ease-in; } .sidebar row label { color: #d8dee9; } .sidebar row:selected { color: #fefefe; } .sidebar row:selected:backdrop { color: rgba(254, 254, 254, 0.5); background: rgba(129, 161, 193, 0.6); } .sidebar row:selected:backdrop label { color: #fefefe; } .sidebar row:selected label { color: #fefefe; } .sidebar.source-list { background: #2e3440; color: #d8dee9; padding: 4px 0px; } .sidebar.source-list.view, iconview.sidebar.source-list { transition: all .12s ease-in; } .sidebar.source-list.view:selected, iconview.sidebar.source-list:selected { padding-left: 4px; background: #81a1c1; color: #fefefe; } .sidebar.source-list.view:selected:active, iconview.sidebar.source-list:selected:active { box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); } .sidebar.source-list.view:selected.has-open-popup, iconview.sidebar.source-list:selected.has-open-popup, .sidebar.source-list.view:selected:hover, iconview.sidebar.source-list:selected:hover { background-color: rgba(129, 161, 193, 0.9); } .sidebar.source-list.view:selected:backdrop, iconview.sidebar.source-list:selected:backdrop { background-color: rgba(129, 161, 193, 0.6); } .sidebar.source-list.view:hover, iconview.sidebar.source-list:hover, .sidebar.source-list.view iconview.source-list:hover, iconview.sidebar.source-list iconview.source-list:hover { background-color: rgba(46, 52, 64, 0.95); } paned .sidebar.left, paned .sidebar.right, paned .sidebar.left:dir(rtl), paned .sidebar:dir(rtl), paned .sidebar:dir(ltr), paned .sidebar { border-style: none; border-color: #262a34; } stacksidebar row { padding: 10px 4px; } stacksidebar row > label { padding-left: 6px; padding-right: 6px; } stacksidebar row.needs-attention > label { background-size: 6px 6px, 0 0; } /*******************************************************************/ /* PLACESSIDEBAR */ /*******************************************************************/ placessidebar.sidebar { background-color: transparent; background-image: linear-gradient(to right, #232831 40px, #2e3440 35px, #2e3440 36px, #2e3440 36px, #2e3440 99%, #2e3440 100%); } placessidebar.sidebar:dir(rtl) { background-image: linear-gradient(to left, #232831 40px, #2e3440 35px, #2e3440 36px, #2e3440 36px, #2e3440 99%, #2e3440 100%); } placessidebar.sidebar row.sidebar-row label { color: #d8dee9; } placessidebar.sidebar row.sidebar-row.sidebar-row .sidebar-icon { margin-left: -14px; margin-right: 12px; padding-left: 14px; padding-right: 12px; color: #d8dee9; } placessidebar.sidebar row.sidebar-row.sidebar-row .sidebar-icon:dir(rtl) { margin-right: -14px; margin-left: 12px; padding-right: 14px; padding-left: 12px; } placessidebar.sidebar row.sidebar-row:hover { transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: rgba(0, 0, 0, 0.76); background-color: transparent; background-image: linear-gradient(to right, rgba(65, 67, 75, 0) 40px, rgba(0, 0, 0, 0.12) 35px, rgba(0, 0, 0, 0.12) 36px, rgba(0, 0, 0, 0.12) 36px, rgba(0, 0, 0, 0.12) 99%, rgba(0, 0, 0, 0.12) 100%); } placessidebar.sidebar row.sidebar-row:hover:dir(rtl) { background-image: linear-gradient(to left, rgba(65, 67, 75, 0) 40px, rgba(0, 0, 0, 0.12) 35px, rgba(0, 0, 0, 0.12) 36px, rgba(0, 0, 0, 0.12) 36px, rgba(0, 0, 0, 0.12) 99%, rgba(0, 0, 0, 0.12) 100%); } placessidebar.sidebar row.sidebar-row:active:hover { color: rgba(0, 0, 0, 0.76); background-color: rgba(0, 0, 0, 0.23); } placessidebar.sidebar row.sidebar-row:selected { color: #fff; background-color: transparent; background-image: linear-gradient(to right, #81a1c1 40px, rgba(65, 67, 75, 0) 35px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 99%, rgba(65, 67, 75, 0) 100%); } placessidebar.sidebar row.sidebar-row:selected label { color: #81a1c1; } placessidebar.sidebar row.sidebar-row:selected:dir(rtl) { background-image: linear-gradient(to left, rgba(129, 161, 193, 0.7) 40px, rgba(65, 67, 75, 0) 35px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 99%, rgba(65, 67, 75, 0) 100%); } placessidebar.sidebar row.sidebar-row:selected:hover { color: #ffffff; background-color: rgba(0, 0, 0, 0.24); } placessidebar.sidebar row.sidebar-row:selected:hover .sidebar-icon { color: #ffffff; } placessidebar.sidebar row.sidebar-row:selected:backdrop { color: rgba(254, 254, 254, 0.5); } placessidebar.sidebar row.sidebar-row:selected:backdrop .sidebar-icon { -gtk-icon-shadow: none; color: inherit; } placessidebar.sidebar row.sidebar-row:selected .sidebar-icon { -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.8); color: inherit; } placessidebar.sidebar row.sidebar-row.sidebar-new-bookmark-row, placessidebar.sidebar row.sidebar-row.sidebar-new-bookmark-row label, placessidebar.sidebar row.sidebar-row.sidebar-new-bookmark-row .sidebar-icon { color: #ebcb8b; } placessidebar.sidebar row.sidebar-row:drop(active):not(:disabled) { box-shadow: inset 0 1px #a3be8c, inset 0 -1px #a3be8c; } placessidebar.sidebar row.sidebar-row:drop(active):not(:disabled), placessidebar.sidebar row.sidebar-row:drop(active):not(:disabled) label, placessidebar.sidebar row.sidebar-row:drop(active):not(:disabled) image { color: #a3be8c; } placessidebar.sidebar row.sidebar-row:drop(active):not(:disabled):selected { background: #a3be8c; } placessidebar.sidebar row.sidebar-row:drop(active):not(:disabled):selected, placessidebar.sidebar row.sidebar-row:drop(active):not(:disabled):selected label, placessidebar.sidebar row.sidebar-row:drop(active):not(:disabled):selected image { color: #fefefe; } placessidebar list { background-color: transparent; } placessidebar list:backdrop { background-color: transparent; } /***************** * GtkSpinButton * *****************/ spinbutton:not(.vertical) { padding: 0; } spinbutton:not(.vertical) entry { min-width: 28px; margin: 0; background: none; background-color: transparent; border: none; border-radius: 0; box-shadow: none; } spinbutton:not(.vertical) button { min-height: 16px; margin: 0; padding-bottom: 0; padding-top: 0; color: #c8ceda; background-image: none; border-style: none none none solid; border-color: rgba(38, 42, 52, 0.3); border-radius: 0; box-shadow: inset 1px 0px 0px 0px rgba(0, 0, 0, 0.07); } spinbutton:not(.vertical) button:dir(rtl) { border-style: none solid none none; } spinbutton:not(.vertical) button:hover { color: #d8dee9; background-color: rgba(216, 222, 233, 0.05); } spinbutton:not(.vertical) button:disabled { color: rgba(142, 149, 164, 0.3); } spinbutton:not(.vertical) button:active { background-color: rgba(0, 0, 0, 0.1); box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2); } spinbutton:not(.vertical) button:backdrop { color: #868d9c; background-color: transparent; border-color: rgba(41, 45, 56, 0.3); transition: 200ms ease-out; } spinbutton:not(.vertical) button:backdrop:disabled { color: rgba(99, 112, 139, 0.3); background-image: none; border-style: none none none solid; box-shadow: inset 1px 0px 0px 0px rgba(0, 0, 0, 0.07); } spinbutton:not(.vertical) button:backdrop:disabled:dir(rtl) { border-style: none solid none none; } spinbutton:not(.vertical) button:last-child { border-top-right-radius: 2px; border-bottom-right-radius: 2px; } .osd spinbutton:not(.vertical) button { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #d8dee9; border-style: none none none solid; border-color: rgba(31, 35, 43, 0.7); border-radius: 0; box-shadow: none; -gtk-icon-shadow: 0 1px black; } .osd spinbutton:not(.vertical) button:dir(rtl) { border-style: none solid none none; } .osd spinbutton:not(.vertical) button:hover { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #d8dee9; border-color: rgba(31, 35, 43, 0.5); background-color: rgba(216, 222, 233, 0.1); -gtk-icon-shadow: 0 1px black; box-shadow: none; } .osd spinbutton:not(.vertical) button:backdrop { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #d8dee9; border-color: rgba(31, 35, 43, 0.5); -gtk-icon-shadow: none; box-shadow: none; } .osd spinbutton:not(.vertical) button:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #808690; border-color: rgba(31, 35, 43, 0.5); -gtk-icon-shadow: none; box-shadow: none; } .osd spinbutton:not(.vertical) button:last-child { border-radius: 0 3px 3px 0; } .osd spinbutton:not(.vertical) button:dir(rtl):first-child { border-radius: 3px 0 0 3px; } spinbutton.vertical:disabled { color: #8e95a4; } spinbutton.vertical:backdrop:disabled { color: #63708b; } spinbutton.vertical:drop(active) { border-color: transparent; box-shadow: none; } spinbutton.vertical entry { min-height: 32px; min-width: 32px; padding: 0; border-radius: 0; } spinbutton.vertical button { min-height: 32px; min-width: 32px; padding: 0; border-width: 1px; border-color: #262a34; box-shadow: 0 1px rgba(255, 255, 255, 0.1); } spinbutton.vertical button.up { border-radius: 3px 3px 0 0; border-style: solid solid none solid; } spinbutton.vertical button.down { border-radius: 0 0 3px 3px; border-style: none solid solid solid; } .osd spinbutton.vertical button:first-child { color: #d8dee9; border-color: #1f232b; background-color: rgba(40, 45, 55, 0.93); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } .osd spinbutton.vertical button:first-child:hover { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(65, 74, 91, 0.93), rgba(65, 74, 91, 0.93)); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } .osd spinbutton.vertical button:first-child:active { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(52, 59, 73, 0.93), rgba(52, 59, 73, 0.93)); background-clip: padding-box; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(216, 222, 233, 0.3); } .osd spinbutton.vertical button:first-child:disabled { color: #808690; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(58, 63, 73, 0.5), rgba(58, 63, 73, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } .osd spinbutton.vertical button:first-child:backdrop { color: #d8dee9; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(40, 45, 55, 0.93), rgba(40, 45, 55, 0.93)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } treeview spinbutton:not(.vertical) { min-height: 0; border-style: none; border-radius: 0; } treeview spinbutton:not(.vertical) entry { min-height: 0; padding: 1px 2px; } /*********** * Spinner * ***********/ menu spinner { color: #81a1c1; } /********************* * Spinner Animation * *********************/ @keyframes spin { to { -gtk-icon-transform: rotate(1turn); } } spinner { background: none; opacity: 0; -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); } spinner:checked { opacity: 1; animation: spin 1s linear infinite; } spinner:checked:disabled { opacity: 0.5; } /********** * Switch * **********/ switch { font-size: 1px; min-width: 40px; min-height: 25px; background-size: 40px 24px; background-repeat: no-repeat; background-position: center center; background-image: -gtk-scaled(url("../assets/switch-off.svg"), url("../assets/switch-off.svg")); } switch:disabled { background-image: -gtk-scaled(url("../assets/switch-insensitive.svg"), url("../assets/switch-insensitive.svg")); } switch:disabled slider { background-image: -gtk-scaled(url("../assets/switch-slider-insensitive.svg"), url("../assets/switch-slider-insensitive@2.png")); } switch, switch slider { outline-color: transparent; color: transparent; border: none; box-shadow: none; } switch:checked { background-image: -gtk-scaled(url("../assets/switch-on.svg"), url("../assets/switch-on.svg")); } switch:checked slider { background-image: -gtk-scaled(url("../assets/switch-slider-on.svg"), url("../assets/switch-slider-on@2.png")); } switch:checked:disabled { background-image: -gtk-scaled(url("../assets/switch-on-insensitive.svg"), url("../assets/switch-on-insensitive.svg")); } switch:checked:disabled slider { background-image: -gtk-scaled(url("../assets/switch-slider-on-insensitive.svg"), url("../assets/switch-slider-on-insensitive@2.png")); } switch slider { min-width: 1px; min-height: 1px; background-repeat: no-repeat; background-position: left center; background-color: transparent; background-image: -gtk-scaled(url("../assets/switch-slider-off.svg"), url("../assets/switch-slider-off@2.png")); } row:selected switch:checked { background-image: -gtk-scaled(url("../assets/switch-off.svg"), url("../assets/switch-off.svg")); } row:selected switch:checked slider { background-image: -gtk-scaled(url("../assets/switch-slider-on-selected.svg"), url("../assets/switch-slider-on-selected@2.png")); } switch trough:active, switch trough:checked { background-color: #81a1c1; } switch trough:active:backdrop, switch trough:checked:backdrop { background-color: rgba(129, 161, 193, 0.6); } /************ * Toolbars * ************/ toolbar, .inline-toolbar, searchbar, .location-bar { -GtkWidget-window-dragging: true; padding: 4px; background-color: #434c5e; } toolbar { padding: 4px 3px 3px 4px; } .osd toolbar { background-color: transparent; } toolbar.osd { padding: 13px; border: none; border-radius: 5px; background-color: rgba(40, 45, 55, 0.93); } toolbar.osd.left, toolbar.osd.right, toolbar.osd.top, toolbar.osd.bottom { border-radius: 0; } toolbar.horizontal separator { margin: 0 7px 1px 6px; } toolbar.vertical separator { margin: 6px 1px 7px 0; } toolbar:not(.inline-toolbar):not(.osd) switch, toolbar:not(.inline-toolbar):not(.osd) scale, toolbar:not(.inline-toolbar):not(.osd) entry, toolbar:not(.inline-toolbar):not(.osd) spinbutton, toolbar:not(.inline-toolbar):not(.osd) button { margin-right: 1px; margin-bottom: 1px; } .inline-toolbar { padding: 3px; border-width: 0 1px 1px; border-radius: 0 0 5px 5px; } searchbar, .location-bar { border-width: 0 0 1px; padding: 3px; } .inline-toolbar, searchbar, .location-bar { border-style: solid; border-color: #262a34; background-color: #3a4251; } .inline-toolbar:backdrop, searchbar:backdrop, .location-bar:backdrop { border-color: #292d38; background-color: #3a4151; box-shadow: none; transition: 200ms ease-out; } searchbar { background: #3b4252; } /************ * Tooltips * ************/ tooltip { padding: 4px; /* not working */ border-radius: 5px; box-shadow: none; text-shadow: 0 1px black; } tooltip.background { background-color: rgba(40, 45, 55, 0.93); background-clip: padding-box; border: 1px solid #1f232b; } tooltip decoration { background-color: transparent; } tooltip * { padding: 4px; background-color: transparent; color: white; } /************** * Tree Views * **************/ treeview.view { border-left-color: #8a909e; border-top-color: #434c5e; } * { -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; } treeview.view:selected:focus, treeview.view:selected { border-radius: 0; } treeview.view:selected:backdrop, treeview.view:selected { border-left-color: #c0d0e0; border-top-color: rgba(216, 222, 233, 0.1); } treeview.view:disabled { color: #8e95a4; } treeview.view:disabled:selected { color: #b3c6d9; } treeview.view:disabled:selected:backdrop { color: rgba(145, 173, 201, 0.85); } treeview.view:disabled:backdrop { color: #63708b; } treeview.view.separator { min-height: 2px; color: #434c5e; } treeview.view.separator:backdrop { color: rgba(67, 76, 94, 0.1); } treeview.view:backdrop { border-left-color: #697181; border-top: #434c5e; } treeview.view:drop(active) { border-style: solid none; border-width: 1px; border-color: #5f88b0; } treeview.view:drop(active).after { border-top-style: none; } treeview.view:drop(active).before { border-bottom-style: none; } treeview.view.expander { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); color: #a9afbc; } treeview.view.expander:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); } treeview.view.expander:hover { color: #d8dee9; } treeview.view.expander:selected { color: #d9e2ec; } treeview.view.expander:selected:hover { color: #fefefe; } treeview.view.expander:selected:backdrop { color: rgba(184, 202, 220, 0.65); } treeview.view.expander:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } treeview.view.expander:backdrop { color: #767d8c; } treeview.view.progressbar { border: 1px solid #5f88b0; border-radius: 4px; background-color: #81a1c1; background-image: linear-gradient(to bottom, #81a1c1, #5f88b0); box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), 0 1px rgba(0, 0, 0, 0.1); } treeview.view.progressbar:selected:focus, treeview.view.progressbar:selected { border-radius: 4px; box-shadow: inset 0 1px rgba(255, 255, 255, 0.05); background-image: linear-gradient(to bottom, #3b4252, #262a34); } treeview.view.progressbar:selected:focus:backdrop, treeview.view.progressbar:selected:backdrop { border-color: #3d4455; background-color: #3d4455; } treeview.view.progressbar:backdrop { border-color: #3d4455; background-image: none; box-shadow: none; } treeview.view.trough { background-color: rgba(216, 222, 233, 0.1); border-radius: 4px; } treeview.view.trough:selected:focus, treeview.view.trough:selected { background-color: #5f88b0; border-radius: 4px; } treeview.view header button { color: #8a909e; background-color: #3b4252; font-weight: bold; text-shadow: none; box-shadow: none; } treeview.view header button:hover { color: #b1b7c4; box-shadow: none; transition: none; } treeview.view header button:active { color: #d8dee9; transition: none; } treeview.view header button:last-child:backdrop, treeview.view header button:last-child { border-right-style: none; } treeview.view button.dnd:active, treeview.view button.dnd:selected, treeview.view button.dnd:hover, treeview.view button.dnd, treeview.view header.button.dnd:active, treeview.view header.button.dnd:selected, treeview.view header.button.dnd:hover, treeview.view header.button.dnd { padding: 0 6px; transition: none; background-image: none; background-color: #81a1c1; color: #3b4252; border-radius: 0; border-style: none; box-shadow: inset 0 0 0 1px #3b4252; text-shadow: none; } treeview.view acceleditor > label { background-color: #81a1c1; } treeview.view header button, treeview.view header button:hover, treeview.view header button:active { padding: 0 6px; border-radius: 0; background-image: none; text-shadow: none; border-width: 1px; border-style: none solid solid none; border-color: #434c5e; } treeview.view header button:disabled { border-color: #434c5e; background-image: none; } treeview.view header button:backdrop { border-color: #434c5e; border-style: none solid solid none; color: #697181; background-image: none; background-color: #3d4455; } treeview.view header button:backdrop:disabled { border-color: #434c5e; background-image: none; } /********************** * Window Decorations * *********************/ decoration { border-radius: 4px 4px 0 0; border-width: 0px; border-width: 0px; box-shadow: 0 4px 10px 2px rgba(33, 26, 30, 0.4); margin: 10px; } decoration:backdrop { box-shadow: 0 4px 10px 2px rgba(33, 26, 30, 0.2); transition: 200ms ease-out; } .maximized decoration, .fullscreen decoration, .tiled decoration { border-radius: 0; } .popup decoration { box-shadow: none; } .ssd decoration { box-shadow: none; } .csd.popup decoration { border-radius: 7px; box-shadow: 0 4px 8px #262a34; border: 1px solid #262a34; } tooltip.csd decoration { border-radius: 5px; box-shadow: none; } messagedialog.csd decoration { border-radius: 7px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(38, 42, 52, 0.8); } .solid-csd decoration { border-radius: 0; margin: 0px; background-color: #434c5e; border: solid 1px #292d38; box-shadow: none; } button.titlebutton { background-repeat: no-repeat; background-position: center; min-height: 20px; padding: 0 1px; box-shadow: none; } button.titlebutton.close { background-image: -gtk-scaled(url("../assets/close.png"), url("../assets/close@2.png")); } button.titlebutton.close:hover, button.titlebutton.close:active { background-image: -gtk-scaled(url("../assets/close_prelight.png"), url("../assets/close_prelight@2.png")); } button.titlebutton.maximize { background-image: -gtk-scaled(url("../assets/maximize.png"), url("../assets/maximize@2.png")); } button.titlebutton.maximize:hover, button.titlebutton.maximize:active { background-image: -gtk-scaled(url("../assets/maximize_prelight.png"), url("../assets/maximize_prelight@2.png")); } button.titlebutton.minimize { background-image: -gtk-scaled(url("../assets/min.png"), url("../assets/min@2.png")); } button.titlebutton.minimize:hover, button.titlebutton.minimize:active { background-image: -gtk-scaled(url("../assets/min_prelight.png"), url("../assets/min_prelight@2.png")); } button.titlebutton:backdrop { -gtk-icon-shadow: none; background-image: -gtk-scaled(url("../assets/close_unfocused.png"), url("../assets/close_unfocused@2.png")); } headerbar.selection-mode button.titlebutton, .titlebar.selection-mode button.titlebutton { text-shadow: 0 -1px rgba(0, 0, 0, 0.4949019608); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.4949019608); } headerbar.selection-mode button.titlebutton:backdrop, .titlebar.selection-mode button.titlebutton:backdrop { -gtk-icon-shadow: none; } .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, .view text:selected:focus, iconview text:selected:focus, textview text:selected:focus, .view text:selected, iconview text:selected, textview text:selected, .view text selection:focus, iconview text selection:focus, .view text selection, iconview text selection, textview text selection:focus, textview text selection, flowbox flowboxchild:selected, modelbutton.flat:selected, popover.background checkbutton:selected, popover.background radiobutton:selected, .menuitem.button.flat:selected, calendar:selected, spinbutton:not(.vertical) selection:focus, spinbutton:not(.vertical) selection, entry selection:focus, entry selection, row:selected, treeview.view:selected:focus, treeview.view:selected { background-color: #81a1c1; } row:selected label, label:selected, .selection-mode button.titlebutton, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, .view text:selected:focus, iconview text:selected:focus, textview text:selected:focus, .view text:selected, iconview text:selected, textview text:selected, .view text selection:focus, iconview text selection:focus, .view text selection, iconview text selection, textview text selection:focus, textview text selection, flowbox flowboxchild:selected, modelbutton.flat:selected, popover.background checkbutton:selected, popover.background radiobutton:selected, .menuitem.button.flat:selected, calendar:selected, spinbutton:not(.vertical) selection:focus, spinbutton:not(.vertical) selection, entry selection:focus, entry selection, row:selected, treeview.view:selected:focus, treeview.view:selected { color: #fefefe; font-weight: bold; } row:selected label:disabled, label:disabled:selected, .selection-mode button.titlebutton:disabled, iconview:disabled:selected:focus, .view:disabled:selected, iconview:disabled:selected, iconview text:disabled:selected:focus, textview text:disabled:selected:focus, .view text:disabled:selected, iconview text:disabled:selected, textview text:disabled:selected, iconview text selection:disabled:focus, .view text selection:disabled, iconview text selection:disabled, textview text selection:disabled, flowbox flowboxchild:disabled:selected, label:disabled selection, modelbutton.flat:disabled:selected, popover.background checkbutton:disabled:selected, popover.background radiobutton:disabled:selected, .menuitem.button.flat:disabled:selected, calendar:disabled:selected, spinbutton:not(.vertical) selection:disabled, entry selection:disabled, row:disabled:selected { color: #c0d0e0; } row:selected label:backdrop, label:backdrop:selected, .selection-mode button.titlebutton:backdrop, iconview:backdrop:selected:focus, .view:backdrop:selected, iconview:backdrop:selected, iconview text:backdrop:selected:focus, textview text:backdrop:selected:focus, .view text:backdrop:selected, iconview text:backdrop:selected, textview text:backdrop:selected, iconview text selection:backdrop:focus, .view text selection:backdrop, iconview text selection:backdrop, textview text selection:backdrop, flowbox flowboxchild:backdrop:selected, label:backdrop selection, modelbutton.flat:backdrop:selected, popover.background checkbutton:backdrop:selected, popover.background radiobutton:backdrop:selected, .menuitem.button.flat:backdrop:selected, calendar:backdrop:selected, spinbutton:not(.vertical) selection:backdrop, entry selection:backdrop, row:backdrop:selected { color: rgba(254, 254, 254, 0.5); } row:selected label:backdrop:disabled, label:backdrop:disabled:selected, .selection-mode button.titlebutton:backdrop:disabled, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, .view text:backdrop:disabled:selected, iconview text:backdrop:disabled:selected, textview text:backdrop:disabled:selected, .view text selection:backdrop:disabled, iconview text selection:backdrop:disabled, textview text selection:backdrop:disabled, flowbox flowboxchild:backdrop:disabled:selected, label:disabled selection:backdrop, label:backdrop selection:disabled, modelbutton.flat:backdrop:disabled:selected, popover.background checkbutton:backdrop:disabled:selected, popover.background radiobutton:backdrop:disabled:selected, .menuitem.button.flat:backdrop:disabled:selected, calendar:backdrop:disabled:selected, spinbutton:not(.vertical) selection:backdrop:disabled, entry selection:backdrop:disabled, row:backdrop:disabled:selected { color: rgba(145, 173, 201, 0.85); } .monospace { font-family: Monospace; } /********************** * DE-Specific Styles * **********************/ /********* * Budgie * *********/ .budgie-container { background-color: transparent; } .budgie-container:backdrop { background-color: transparent; } .budgie-container popover list, .budgie-container popover row { border: none; background: none; padding: 0; margin: 0; } .budgie-popover .container, .budgie-popover border, .budgie-popover list, .budgie-popover row { padding: 0; margin: 0; background: none; border: none; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; opacity: 1; min-width: 0; min-height: 0; } .budgie-popover, .budgie-popover.background { border-radius: 10px; padding: 0; background: #2a2f3a; background-clip: border-box; box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.35); border: 1px solid #262a34; } .budgie-popover list:hover, .budgie-popover row:hover, .budgie-popover.background list:hover, .budgie-popover.background row:hover { background: none; } .budgie-popover > frame.container, .budgie-popover.background > frame.container { margin: 0 -1px -1px; padding: 2px 0 0; } .budgie-popover button, .budgie-popover.background button { color: #d8dee9; border: none; background: transparent; } .budgie-popover button:hover, .budgie-popover.background button:hover { color: #fefefe; text-shadow: none; background-color: rgba(129, 161, 193, 0.8); border-color: #1f232b; } .budgie-popover > .container { padding: 2px; } .budgie-menu { color: #d8dee9; } .budgie-menu .container { padding: 0; } .budgie-menu button:hover { -gtk-icon-effect: none; } .budgie-menu entry.search { border: none; background: none; padding: 5px 2px; border-bottom: 1px solid #262a34; border-radius: 0; font-size: 120%; box-shadow: none; color: #d8dee9; } .budgie-menu entry.search image:dir(ltr) { padding-left: 8px; padding-right: 12px; } .budgie-menu entry.search image:dir(rtl) { padding-left: 12px; padding-right: 8px; } .budgie-menu .categories { border-width: 0; margin-left: 3px; background: transparent; } .budgie-menu .categories:dir(ltr) { border-right: 1px solid #262a34; } .budgie-menu .categories:dir(rtl) { border-left: 1px solid #262a34; } .budgie-menu .category-button { padding: 7px; border-radius: 2px 0 0 2px; } .budgie-menu .category-button:hover { background-color: transparent; color: #d8dee9; } .budgie-menu .category-button:active { box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); } .budgie-menu .category-button:checked { color: #fefefe; background: #81a1c1; } .budgie-menu .category-button:checked:hover { color: rgba(254, 254, 254, 0.6); } .budgie-menu .category-button:checked:disabled { opacity: 0.5; } .budgie-menu .category-button:checked:disabled label { color: rgba(254, 254, 254, 0.7); } .budgie-menu scrollbar { background-color: transparent; border-color: #262a34; } .budgie-menu button:not(.category-button) { padding-top: 5px; padding-bottom: 5px; border-radius: 0; box-shadow: none; background: transparent; } .budgie-menu button:not(.category-button):hover { color: #fff; text-shadow: none; background-color: rgba(129, 161, 193, 0.8); border-color: #1f232b; } .budgie-menu button { border: none; background: transparent; } .budgie-menu undershoot, .budgie-menu overshoot { background: none; } .budgie-menu list { color: rgba(216, 222, 233, 0.7); } button.budgie-menu-launcher { padding: 0 2px; color: #d8dee9; box-shadow: none; background-color: transparent; } button.budgie-menu-launcher:hover { color: #d8dee9; } button.budgie-menu-launcher:active, button.budgie-menu-launcher:checked { color: #d8dee9; } button.budgie-menu-launcher:backdrop { color: #d8dee9; background-color: transparent; } button.budgie-menu-launcher:backdrop:hover { color: #d8dee9; } button.budgie-menu-launcher:backdrop:active, button.budgie-menu-launcher:backdrop:checked { color: #81a1c1; box-shadow: none; background-color: #3d4454; } .user-menu .content-box separator { margin-left: 6px; margin-right: 6px; background-color: rgba(216, 222, 233, 0.1); } .user-menu button { margin: 5px; } .user-menu > box.vertical row.activatable:first-child .indicator-item, .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1); background-color: #81a1c1; transition-duration: 0.2s; } .user-menu > box.vertical row.activatable:first-child .indicator-item:dir(ltr), .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item:dir(ltr) { padding-left: 7px; background-position: left center; background-repeat: no-repeat; background-size: 38px auto; } .user-menu > box.vertical row.activatable:first-child .indicator-item:dir(rtl), .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item:dir(rtl) { padding-right: 7px; background-position: right center; background-repeat: no-repeat; background-size: 38px auto; } .user-menu > box.vertical row.activatable:first-child .indicator-item label, .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item label { color: #fefefe; } .user-menu > box.vertical row.activatable:first-child .indicator-item label:dir(ltr), .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item label:dir(ltr) { padding-left: 5px; } .user-menu > box.vertical row.activatable:first-child .indicator-item label:dir(rtl), .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item label:dir(rtl) { padding-right: 5px; } .user-menu > box.vertical row.activatable:first-child .indicator-item image, .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item image { color: #fefefe; } .user-menu > box.vertical row.activatable:first-child .indicator-item image:first-child, .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item image:first-child { min-width: 24px; min-height: 20px; } button.raven-trigger { padding-left: 2px; padding-right: 2px; color: #d8dee9; box-shadow: none; } button.raven-trigger:hover { color: #d8dee9; background-color: transparent; } button.raven-trigger:active, button.raven-trigger:checked { box-shadow: none; background-color: transparent; color: #81a1c1; } button.raven-trigger:backdrop { color: #d8dee9; } button.raven-trigger:backdrop:hover { color: #d8dee9; } button.raven-trigger:backdrop:active, button.raven-trigger:backdrop:checked { box-shadow: none; color: #81a1c1; background-color: transparent; } .places-menu .container { padding: 0; } .places-menu .message-bar { border-top-left-radius: 3px; border-top-right-radius: 3px; } .places-menu .name-button { border: 0; border-radius: 0; padding: 4px 6px; } .places-menu .unmount-button { padding: 4px 4px; border: 0; border-radius: 0; } .places-menu .places-section-header { padding: 0px; border-bottom: 1px solid rgba(38, 42, 52, 0.95); box-shadow: 0px 1px 1px alpha(@theme_fg_color, 0.03); } .places-menu .places-section-header > button { padding: 8px; border: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } .places-menu .places-list { background: rgba(216, 222, 233, 0.04); border-bottom: 1px solid rgba(38, 42, 52, 0.95); } .places-menu .unlock-area { border-top: 1px solid rgba(38, 42, 52, 0.85); border-bottom: 1px solid rgba(38, 42, 52, 0.85); } .places-menu .unlock-area entry { border-radius: 0; border: 0; } .places-menu .unlock-area button { border-radius: 0; border: 0; border-left: 1px solid rgba(38, 42, 52, 0.85); } .places-menu .alternative-label { font-size: 15px; padding: 3px; } .places-menu .always-expand { background: transparent; border-bottom: none; } .night-light-indicator .container { padding: 0; } .night-light-indicator .view-header { font-size: 14px; padding: 10px; border-bottom: 1px solid mix(@theme_base_color, #000000, 0.35);; box-shadow: 0px 1px 1px alpha(@theme_fg_color, 0.04);; } .night-light-indicator .display-settings-button { border-top-left-radius: 0px; border-top-right-radius: 0px; border: none; padding: 3px; border-top: 1px solid mix(@theme_base_color, #000000, 0.35);; box-shadow: inset 0px 1px 1px alpha(@theme_fg_color, 0.04);; } .budgie-panel { color: #d8dee9; background-color: #1d2128; background-image: none; box-shadow: none; border: none; transition: all 150ms ease-in; } .budgie-panel .alert { color: #bf616a; } .budgie-panel:backdrop { color: #d8dee9; background-color: #1d2128; } .budgie-panel button { border-top-width: 0; border-bottom-width: 0; border-radius: 0; } .budgie-panel button.flat { background: transparent; border: none; } .budgie-panel button.flat:hover, .budgie-panel button.flat:active, .budgie-panel button.flat:checked { background: rgba(129, 161, 193, 0.7); color: #e8ecf2; } .budgie-panel popover list, .budgie-panel popover row { padding: 0; margin: 0; } .budgie-panel label { color: #d8dee9; font-weight: 700; } .budgie-panel.transparent { background-color: rgba(29, 33, 40, 0.85); } .top .budgie-panel.transparent { border-bottom-color: transparent; } .bottom .budgie-panel.transparent { border-top-color: transparent; } .left .budgie-panel.transparent { border-right-color: transparent; } .right .budgie-panel.transparent { border-left-color: transparent; } .budgie-panel.transparent:backdrop, .budgie-panel.transparent label, .budgie-panel.transparent button.raven-trigger:backdrop, .budgie-panel.transparent button.budgie-menu-launcher { color: #f9fafb; } .budgie-panel .end-region { border-radius: 0px; } .budgie-panel .end-region separator { background-color: rgba(216, 222, 233, 0.15); } .budgie-panel .end-region label { font-weight: 700; color: #d8dee9; } .budgie-panel #tasklist-button, .budgie-panel #tasklist-button:backdrop { outline-color: transparent; transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); border-color: rgba(29, 33, 40, 0); border-radius: 0; background-color: transparent; box-shadow: none; background-clip: padding-box; } .budgie-panel button.flat.launcher { outline-color: transparent; transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); border-color: rgba(29, 33, 40, 0); border-radius: 0; padding: 0; background-clip: padding-box; background-color: transparent; } .budgie-panel button.flat.launcher { box-shadow: none; } .budgie-panel #tasklist-button:hover, .budgie-panel .unpinned button.flat.launcher:hover, .budgie-panel .pinned button.flat.launcher.running:hover { box-shadow: none; } .budgie-panel #tasklist-button:active, .budgie-panel .unpinned button.flat.launcher:active, .budgie-panel .pinned button.flat.launcher.running:active, .budgie-panel #tasklist-button:checked, .budgie-panel .unpinned button.flat.launcher:checked, .budgie-panel .pinned button.flat.launcher.running:checked { box-shadow: none; } .top .budgie-panel #tasklist-button, .budgie-panel .top #tasklist-button, .top .budgie-panel .unpinned button.flat.launcher, .budgie-panel .unpinned .top button.flat.launcher, .top .budgie-panel .pinned button.flat.launcher.running, .budgie-panel .pinned .top button.flat.launcher.running { padding-bottom: 2px; border-top: 2px solid transparent; } .top .budgie-panel .pinned button.flat.launcher:not(.running) { border-top: 2px solid transparent; } .top .budgie-panel .pinned button.flat.launcher:not(.running):hover { border-top: 2px solid rgba(255, 255, 255, 0.1); } .top .budgie-panel .unpinned button.flat.launcher, .top .budgie-panel .pinned button.flat.launcher.running { border-top: 2px solid rgba(255, 255, 255, 0.1); } .top .budgie-panel #tasklist-button:hover, .budgie-panel .top #tasklist-button:hover, .top .budgie-panel .unpinned button.flat.launcher:hover, .budgie-panel .unpinned .top button.flat.launcher:hover, .top .budgie-panel .pinned button.flat.launcher.running:hover, .budgie-panel .pinned .top button.flat.launcher.running:hover { border-top: 2px solid rgba(255, 255, 255, 0.25); } .top .budgie-panel #tasklist-button:active, .budgie-panel .top #tasklist-button:active, .top .budgie-panel .unpinned button.flat.launcher:active, .budgie-panel .unpinned .top button.flat.launcher:active, .top .budgie-panel .pinned button.flat.launcher.running:active, .budgie-panel .pinned .top button.flat.launcher.running:active, .top .budgie-panel #tasklist-button:checked, .budgie-panel .top #tasklist-button:checked, .top .budgie-panel .unpinned button.flat.launcher:checked, .budgie-panel .unpinned .top button.flat.launcher:checked, .top .budgie-panel .pinned button.flat.launcher.running:checked, .budgie-panel .pinned .top button.flat.launcher.running:checked { border-top: 2px solid #81a1c1; } .bottom .budgie-panel #tasklist-button, .budgie-panel .bottom #tasklist-button, .bottom .budgie-panel .unpinned button.flat.launcher, .budgie-panel .unpinned .bottom button.flat.launcher, .bottom .budgie-panel .pinned button.flat.launcher.running, .budgie-panel .pinned .bottom button.flat.launcher.running { padding-top: 2px; border-bottom: 2px solid transparent; } .bottom .budgie-panel .pinned button.flat.launcher:not(.running) { border-bottom: 2px solid transparent; } .bottom .budgie-panel .pinned button.flat.launcher:not(.running):hover { border-bottom: 2px solid rgba(255, 255, 255, 0.1); } .bottom .budgie-panel .unpinned button.flat.launcher, .bottom .budgie-panel .pinned button.flat.launcher.running { border-bottom: 2px solid rgba(255, 255, 255, 0.1); } .bottom .budgie-panel #tasklist-button:hover, .budgie-panel .bottom #tasklist-button:hover, .bottom .budgie-panel .unpinned button.flat.launcher:hover, .budgie-panel .unpinned .bottom button.flat.launcher:hover, .bottom .budgie-panel .pinned button.flat.launcher.running:hover, .budgie-panel .pinned .bottom button.flat.launcher.running:hover { border-bottom: 2px solid rgba(255, 255, 255, 0.25); } .bottom .budgie-panel #tasklist-button:active, .budgie-panel .bottom #tasklist-button:active, .bottom .budgie-panel .unpinned button.flat.launcher:active, .budgie-panel .unpinned .bottom button.flat.launcher:active, .bottom .budgie-panel .pinned button.flat.launcher.running:active, .budgie-panel .pinned .bottom button.flat.launcher.running:active, .bottom .budgie-panel #tasklist-button:checked, .budgie-panel .bottom #tasklist-button:checked, .bottom .budgie-panel .unpinned button.flat.launcher:checked, .budgie-panel .unpinned .bottom button.flat.launcher:checked, .bottom .budgie-panel .pinned button.flat.launcher.running:checked, .budgie-panel .pinned .bottom button.flat.launcher.running:checked { border-bottom: 2px solid #81a1c1; } .left .budgie-panel #tasklist-button, .budgie-panel .left #tasklist-button, .left .budgie-panel .unpinned button.flat.launcher, .budgie-panel .unpinned .left button.flat.launcher, .left .budgie-panel .pinned button.flat.launcher.running, .budgie-panel .pinned .left button.flat.launcher.running { padding-right: 2px; border-left: 2px solid transparent; } .left .budgie-panel .pinned button.flat.launcher:not(.running) { border-left: 2px solid transparent; } .left .budgie-panel .pinned button.flat.launcher:not(.running):hover { border-left: 2px solid rgba(255, 255, 255, 0.1); } .left .budgie-panel .unpinned button.flat.launcher, .left .budgie-panel .pinned button.flat.launcher.running { border-left: 2px solid rgba(255, 255, 255, 0.1); } .left .budgie-panel #tasklist-button:hover, .budgie-panel .left #tasklist-button:hover, .left .budgie-panel .unpinned button.flat.launcher:hover, .budgie-panel .unpinned .left button.flat.launcher:hover, .left .budgie-panel .pinned button.flat.launcher.running:hover, .budgie-panel .pinned .left button.flat.launcher.running:hover { border-left: 2px solid rgba(255, 255, 255, 0.25); } .left .budgie-panel #tasklist-button:active, .budgie-panel .left #tasklist-button:active, .left .budgie-panel .unpinned button.flat.launcher:active, .budgie-panel .unpinned .left button.flat.launcher:active, .left .budgie-panel .pinned button.flat.launcher.running:active, .budgie-panel .pinned .left button.flat.launcher.running:active, .left .budgie-panel #tasklist-button:checked, .budgie-panel .left #tasklist-button:checked, .left .budgie-panel .unpinned button.flat.launcher:checked, .budgie-panel .unpinned .left button.flat.launcher:checked, .left .budgie-panel .pinned button.flat.launcher.running:checked, .budgie-panel .pinned .left button.flat.launcher.running:checked { border-left: 2px solid #81a1c1; } .right .budgie-panel #tasklist-button, .budgie-panel .right #tasklist-button, .right .budgie-panel .unpinned button.flat.launcher, .budgie-panel .unpinned .right button.flat.launcher, .right .budgie-panel .pinned button.flat.launcher.running, .budgie-panel .pinned .right button.flat.launcher.running { padding-left: 2px; border-right: 2px solid transparent; } .right .budgie-panel .pinned button.flat.launcher:not(.running) { border-right: 2px solid transparent; } .right .budgie-panel .pinned button.flat.launcher:not(.running):hover { border-right: 2px solid rgba(255, 255, 255, 0.1); } .right .budgie-panel .unpinned button.flat.launcher, .right .budgie-panel .pinned button.flat.launcher.running { border-right: 2px solid rgba(255, 255, 255, 0.1); } .right .budgie-panel #tasklist-button:hover, .budgie-panel .right #tasklist-button:hover, .right .budgie-panel .unpinned button.flat.launcher:hover, .budgie-panel .unpinned .right button.flat.launcher:hover, .right .budgie-panel .pinned button.flat.launcher.running:hover, .budgie-panel .pinned .right button.flat.launcher.running:hover { border-right: 2px solid rgba(255, 255, 255, 0.25); } .right .budgie-panel #tasklist-button:active, .budgie-panel .right #tasklist-button:active, .right .budgie-panel .unpinned button.flat.launcher:active, .budgie-panel .unpinned .right button.flat.launcher:active, .right .budgie-panel .pinned button.flat.launcher.running:active, .budgie-panel .pinned .right button.flat.launcher.running:active, .right .budgie-panel #tasklist-button:checked, .budgie-panel .right #tasklist-button:checked, .right .budgie-panel .unpinned button.flat.launcher:checked, .budgie-panel .unpinned .right button.flat.launcher:checked, .right .budgie-panel .pinned button.flat.launcher.running:checked, .budgie-panel .pinned .right button.flat.launcher.running:checked { border-right: 2px solid #81a1c1; } .top .budgie-panel { border-bottom: 1px solid rgba(28, 32, 39, 0.92); } .top .raven-frame { padding: 0; background: none; } .top .raven-frame border { border: none; border-bottom: 1px solid rgba(38, 42, 52, 0.92); } .top .shadow-block { background-color: transparent; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent); } .bottom .budgie-panel { border-top: 1px solid rgba(28, 32, 39, 0.92); } .bottom .raven-frame { padding: 0; background: none; } .bottom .raven-frame border { border: none; border-top: 1px solid rgba(38, 42, 52, 0.92); } .bottom .shadow-block { background-color: transparent; background-image: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent); } .left .budgie-panel { border-right: 1px solid rgba(28, 32, 39, 0.92); } .left .raven-frame { padding: 0; background: none; } .left .raven-frame border { border: none; border-right: 1px solid rgba(38, 42, 52, 0.92); } .left .shadow-block { background-color: transparent; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent); } .right .budgie-panel { border-left: 1px solid rgba(28, 32, 39, 0.92); } .right .raven-frame { padding: 0; background: none; } .right .raven-frame border { border: none; border-left: 1px solid rgba(38, 42, 52, 0.92); } .right .shadow-block { background-color: transparent; background-image: linear-gradient(to left, rgba(0, 0, 0, 0.3), transparent); } .raven { padding: 0; color: #d8dee9; background: #2a2f3a; transition: 170ms ease-out; } .raven list { color: #d8dee9; background-color: transparent; } .raven list:selected { background-color: rgba(129, 161, 193, 0.9); } .raven list row, .raven list row.activatable { background-color: transparent; } .raven list row:hover, .raven list row.activatable:hover { background-color: rgba(61, 69, 85, 0.3); } .raven list row:selected, .raven list row.activatable:selected { background-color: rgba(129, 161, 193, 0.9); } .raven .raven-background { color: #d8dee9; background-color: transparent; border-color: transparent; } .raven .raven-background.middle { border-bottom-style: none; } .raven .powerstrip { background-color: transparent; border-top-color: transparent; } .raven .powerstrip button.image-button { border-radius: 50%; padding: 5px; min-width: 32px; min-height: 32px; margin-bottom: 3px; background: #b48ead; color: #fefefe; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1); border: none; font-size: 100%; } .raven .powerstrip button.image-button:hover { background: rgba(180, 142, 173, 0.85); color: #fefefe; } .raven .powerstrip button.image-button:active { background: #b48ead; color: #fefefe; } .raven .powerstrip button.image-button:first-child { background: linear-gradient(to right, #88c0d0 0%, #88c0d0 100%); } .raven .powerstrip button.image-button:first-child:hover { background: rgba(129, 161, 193, 0.85); } .raven .powerstrip button.image-button:first-child:active { background: #81a1c1; } .raven .powerstrip button.image-button:last-child { background: linear-gradient(to right, #bf616a, #bf616a); } .raven .powerstrip button.image-button:last-child:hover { background: rgba(191, 97, 106, 0.85); } .raven .powerstrip button.image-button:last-child:active { background: #bf616a; } .raven .option-subtitle { font-size: 13px; } calendar.raven-calendar { padding: 4px; color: #d8dee9; background: transparent; border-color: transparent; } calendar.raven-calendar:indeterminate { color: alpha(currentColor,0.3); } calendar.raven-calendar:selected { background: rgba(129, 161, 193, 0.6); color: #d8dee9; font-weight: bold; } calendar.raven-calendar:backdrop { background-color: transparent; } calendar.raven-calendar.header { color: #d8dee9; border: none; border-radius: 0; background-color: transparent; } calendar.raven-calendar button, calendar.raven-calendar button:focus { color: alpha(currentColor,0.5); background-color: transparent; } calendar.raven-calendar button:hover, calendar.raven-calendar button:focus:hover { color: #d8dee9; background-color: transparent; } .raven-mpris { color: #d8dee9; background-color: rgba(46, 52, 64, 0.9); border: solid rgba(255, 255, 255, 0.1); border-width: 1px 0; border-bottom-color: rgba(0, 0, 0, 0.1); } .raven-mpris button.image-button { padding: 10px; background-color: #3b4252; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1); } .raven-mpris button.image-button:hover { background-color: #81a1c1; } .raven-mpris button.image-button:active { background-color: #7094b9; } .raven-mpris button.image-button:first-child { margin-right: 4px; } .raven-mpris button.image-button:last-child { margin-left: 4px; } .raven-mpris button.image-button:last-child, .raven-mpris button.image-button:first-child { padding: 4px; margin-top: 6px; margin-bottom: 6px; } .budgie-notification-window, .budgie-osd-window, .budgie-switcher-window { background: none; border-radius: 1px; } .budgie-notification-window button, .budgie-osd-window button, .budgie-switcher-window button { background-color: #81a1c1; color: #fefefe; border: none; } .budgie-notification-window button:hover, .budgie-osd-window button:hover, .budgie-switcher-window button:hover { background-color: #7094b9; border: none; } .budgie-notification-window button:active, .budgie-osd-window button:active, .budgie-switcher-window button:active, .budgie-notification-window button:checked, .budgie-osd-window button:checked, .budgie-switcher-window button:checked { background-color: #7094b9; } .budgie-notification.background, .background.budgie-osd, .background.budgie-switcher { border-radius: 1px; } .budgie-notification .notification-title, .budgie-osd .notification-title, .budgie-switcher .notification-title { font-size: 110%; color: #d8dee9; } .budgie-notification .notification-body, .budgie-osd .notification-body, .budgie-switcher .notification-body { color: rgba(216, 222, 233, 0.7); } .budgie-notification button, .budgie-osd button, .budgie-switcher button { background-color: transparent; color: #fefefe; } .budgie-notification button:hover, .budgie-osd button:hover, .budgie-switcher button:hover { background-color: transparent; color: #bf616a; box-shadow: none; } .budgie-notification button:active, .budgie-osd button:active, .budgie-switcher button:active, .budgie-notification button:checked, .budgie-osd button:checked, .budgie-switcher button:checked { background-color: transparent; color: #b84f59; } .drop-shadow, .budgie-session-dialog.background, .background.budgie-polkit-dialog, .background.budgie-run-dialog { color: #d8dee9; background-color: rgba(67, 76, 94, 0.95); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); border-radius: 2px; } .budgie-switcher-window flowbox { color: #d8dee9; } .budgie-switcher-window flowboxchild { padding: 3px; margin: 3px; color: #d8dee9; } .budgie-switcher-window flowboxchild:hover { background-color: transparent; } .budgie-switcher-window flowboxchild:active { color: #d8dee9; } .budgie-switcher-window flowboxchild:selected { color: #fefefe; background-color: rgba(129, 161, 193, 0.5); } .budgie-switcher-window flowboxchild:selected:active { color: #fefefe; } .budgie-switcher-window flowboxchild:selected:hover { background-color: #7491ae; } .budgie-switcher-window flowboxchild:selected:disabled { color: rgba(254, 254, 254, 0.7); background-color: rgba(129, 161, 193, 0.7); } .budgie-switcher-window flowboxchild:selected:disabled label { color: rgba(254, 254, 254, 0.7); } .budgie-session-dialog, .budgie-polkit-dialog, .budgie-run-dialog { color: #d8dee9; background-color: #1d2128; } .budgie-session-dialog label:backdrop, .budgie-polkit-dialog label:backdrop, .budgie-run-dialog label:backdrop { color: rgba(216, 222, 233, 0.8); } .budgie-session-dialog .dialog-title, .budgie-polkit-dialog .dialog-title, .budgie-run-dialog .dialog-title { font-size: 120%; } .budgie-session-dialog .linked.horizontal > button, .budgie-polkit-dialog .linked.horizontal > button, .budgie-run-dialog .linked.horizontal > button { margin-bottom: 0; min-height: 32px; border-bottom: none; border-color: #262a34; border-radius: 0; color: #d8dee9; background-color: transparent; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), inset 0 1px 2px rgba(0, 0, 0, 0.2); } .budgie-session-dialog .linked.horizontal > button label, .budgie-polkit-dialog .linked.horizontal > button label, .budgie-run-dialog .linked.horizontal > button label { font-weight: 700; } .budgie-session-dialog .linked.horizontal > button:first-child, .budgie-polkit-dialog .linked.horizontal > button:first-child, .budgie-run-dialog .linked.horizontal > button:first-child { border-left: none; border-bottom-left-radius: 2px; } .budgie-session-dialog .linked.horizontal > button:last-child, .budgie-polkit-dialog .linked.horizontal > button:last-child, .budgie-run-dialog .linked.horizontal > button:last-child { border-right: none; border-bottom-right-radius: 2px; background: transparent; } .budgie-session-dialog .linked.horizontal > button:hover, .budgie-polkit-dialog .linked.horizontal > button:hover, .budgie-run-dialog .linked.horizontal > button:hover { background-color: rgba(129, 161, 193, 0.9); color: #fefefe; } .budgie-session-dialog .linked.horizontal > button:hover:backdrop label, .budgie-polkit-dialog .linked.horizontal > button:hover:backdrop label, .budgie-run-dialog .linked.horizontal > button:hover:backdrop label { color: rgba(254, 254, 254, 0.5); } .budgie-session-dialog .linked.horizontal > button.suggested-action, .budgie-polkit-dialog .linked.horizontal > button.suggested-action, .budgie-run-dialog .linked.horizontal > button.suggested-action { background-color: rgba(129, 161, 193, 0.9); } .budgie-session-dialog .linked.horizontal > button.suggested-action:hover, .budgie-polkit-dialog .linked.horizontal > button.suggested-action:hover, .budgie-run-dialog .linked.horizontal > button.suggested-action:hover { background-color: rgba(146, 174, 201, 0.9); } .budgie-session-dialog .linked.horizontal > button.suggested-action:active, .budgie-polkit-dialog .linked.horizontal > button.suggested-action:active, .budgie-run-dialog .linked.horizontal > button.suggested-action:active, .budgie-session-dialog .linked.horizontal > button.suggested-action:checked, .budgie-polkit-dialog .linked.horizontal > button.suggested-action:checked, .budgie-run-dialog .linked.horizontal > button.suggested-action:checked { background-color: rgba(146, 174, 201, 0.9); } .budgie-session-dialog .linked.horizontal > button.destructive-action, .budgie-polkit-dialog .linked.horizontal > button.destructive-action, .budgie-run-dialog .linked.horizontal > button.destructive-action { background-color: rgba(169, 68, 78, 0.9); } .budgie-session-dialog .linked.horizontal > button.destructive-action:hover, .budgie-polkit-dialog .linked.horizontal > button.destructive-action:hover, .budgie-run-dialog .linked.horizontal > button.destructive-action:hover { background-color: rgba(184, 79, 89, 0.9); } .budgie-session-dialog .linked.horizontal > button.destructive-action:active, .budgie-polkit-dialog .linked.horizontal > button.destructive-action:active, .budgie-run-dialog .linked.horizontal > button.destructive-action:active, .budgie-session-dialog .linked.horizontal > button.destructive-action:checked, .budgie-polkit-dialog .linked.horizontal > button.destructive-action:checked, .budgie-run-dialog .linked.horizontal > button.destructive-action:checked { background-color: rgba(184, 79, 89, 0.9); } .budgie-session-dialog entry, .budgie-polkit-dialog entry, .budgie-run-dialog entry { background-color: #505359; color: #d8dee9; } .budgie-session-dialog entry:focus, .budgie-polkit-dialog entry:focus, .budgie-run-dialog entry:focus { background-color: #505359; } .budgie-session-dialog entry:backdrop, .budgie-polkit-dialog entry:backdrop, .budgie-run-dialog entry:backdrop { background-color: #505359; } .budgie-polkit-dialog .message { color: rgba(216, 222, 233, 0.7); } .budgie-polkit-dialog .failure { color: #bf616a; } .budgie-run-dialog entry.search, .budgie-run-dialog entry.search:focus { font-size: 120%; padding: 8px 5px; border: none; box-shadow: none; } .budgie-run-dialog entry.search image, .budgie-run-dialog entry.search:focus image { color: #d8dee9; } .budgie-run-dialog entry.search image:dir(ltr), .budgie-run-dialog entry.search:focus image:dir(ltr) { padding-left: 8px; padding-right: 12px; } .budgie-run-dialog entry.search image:dir(rtl), .budgie-run-dialog entry.search:focus image:dir(rtl) { padding-left: 12px; padding-right: 8px; } .budgie-run-dialog list row:selected .dim-label, .budgie-run-dialog list row:selected label.separator, .budgie-run-dialog list row:selected .titlebar .subtitle, .titlebar .budgie-run-dialog list row:selected .subtitle, .budgie-run-dialog list row:selected headerbar .subtitle, headerbar .budgie-run-dialog list row:selected .subtitle { opacity: 1; } .budgie-run-dialog scrolledwindow { border-top: 1px solid rgba(0, 0, 0, 0); } .budgie-menubar menu { margin: 4px; padding: 5px; border-radius: 0; background-color: #1d2128; } .budgie-menubar menu menuitem:hover { background-color: #81a1c1; color: #fefefe; } .budgie-menubar arrow { border: none; min-width: 16px; min-height: 16px; } .budgie-menubar arrow.top { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); border-bottom: 1px solid #3b414c; } .budgie-menubar arrow.bottom { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); border-top: 1px solid #3b414c; } .budgie-menubar menuitem accelerator { color: rgba(216, 222, 233, 0.35); } .budgie-menubar menuitem check, .budgie-menubar menuitem radio { min-height: 16px; min-width: 16px; } window.background.budgie-settings-window.csd > box.horizontal > stack > scrolledwindow buttonbox.inline-toolbar { border-style: none none solid; } .workspace-switcher .workspace-layout { border: 0 solid #1d2128; } .top .workspace-switcher .workspace-layout:dir(ltr), .bottom .workspace-switcher .workspace-layout:dir(ltr) { border-left-width: 1px; } .top .workspace-switcher .workspace-layout:dir(rtl), .bottom .workspace-switcher .workspace-layout:dir(rtl) { border-right-width: 1px; } .left .workspace-switcher .workspace-layout, .right .workspace-switcher .workspace-layout { border-top-width: 1px; } .workspace-switcher .workspace-item, .workspace-switcher .workspace-add-button { border: 0 solid #323946; } .top .workspace-switcher .workspace-item:dir(ltr), .bottom .workspace-switcher .workspace-item:dir(ltr), .top .workspace-switcher .workspace-add-button:dir(ltr), .bottom .workspace-switcher .workspace-add-button:dir(ltr) { border-right-width: 1px; } .top .workspace-switcher .workspace-item:dir(rtl), .bottom .workspace-switcher .workspace-item:dir(rtl), .top .workspace-switcher .workspace-add-button:dir(rtl), .bottom .workspace-switcher .workspace-add-button:dir(rtl) { border-left-width: 1px; } .left .workspace-switcher .workspace-item, .right .workspace-switcher .workspace-item, .left .workspace-switcher .workspace-add-button, .right .workspace-switcher .workspace-add-button { border-bottom-width: 1px; } .workspace-switcher .workspace-item.current-workspace { background-color: #121519; } .workspace-switcher .workspace-add-button { border: none; background: transparent; } .workspace-switcher .workspace-add-button:hover { box-shadow: none; } .workspace-switcher .workspace-add-button:active { background-image: none; } .workspace-switcher .workspace-add-button:active image { margin: 1px 0 -1px; } .budgie-panel .workspace-switcher .workspace-icon-button { min-height: 24px; min-width: 24px; padding: 0; border-radius: 2px; } /************ * Nautilus * ************/ .nautilus-window .frame *:selected, .nautilus-window .frame *:selected:backdrop { background: transparent; color: #81a1c1; } .nautilus-window .frame *:selected label, .nautilus-window .frame *:selected:backdrop label { color: #81a1c1; } .nautilus-window paned > separator { background-image: none; } .nautilus-window .sidebar { background-color: transparent; } .nautilus-window .sidebar:backdrop { background-color: transparent; } .nautilus-window .sidebar .list-row button { border: none; background-color: rgba(53, 59, 73, 0.95); } .nautilus-window .sidebar .list-row button:active { background-color: rgba(129, 161, 193, 0.75); } .nautilus-window .sidebar .list-row:selected { background-color: rgba(129, 161, 193, 0.75); } .nautilus-window .sidebar .list-row:selected:hover { background-color: rgba(129, 161, 193, 0.9); } .nautilus-window .sidebar .list-row:hover { background-color: rgba(59, 66, 82, 0.5); } .nautilus-window .sidebar .list-row:hover:active { background-color: rgba(129, 161, 193, 0.9); } .nautilus-window.background { background-color: rgba(53, 59, 73, 0.95); } .nautilus-window.background:backdrop { background-color: rgba(53, 59, 73, 0.95); } .nautilus-window notebook > stack:only-child { background-color: #3b4252; } .nautilus-window notebook > stack:only-child:backdrop { background-color: #3d4455; } .nautilus-window searchbar { border-top: 1px solid rgba(0, 0, 0, 0.12); } .nautilus-window .searchbar-container { margin-top: -1px; } .nautilus-circular-button { border-radius: 20px; -gtk-outline-radius: 20px; } .disk-space-display { border: 2px solid; } .disk-space-display .unknown { background-color: #888a85; border-color: #555653; } .disk-space-display .used { background-color: #9FB0B9; border-color: #667f8c; } .disk-space-display .free { background-color: #D8D8D8; border-color: #a5a5a5; } .nautilus-desktop { color: #d8dee9; } .nautilus-desktop .nautilus-canvas-item { border-radius: 5px; color: #fefefe; text-shadow: 1px 1px rgba(0, 0, 0, 0.6); } .nautilus-desktop .nautilus-canvas-item:active { color: #d8dee9; text-shadow: none; } .nautilus-desktop .nautilus-canvas-item:hover { color: #d8dee9; text-shadow: none; } .nautilus-desktop .nautilus-canvas-item:selected { color: #fefefe; text-shadow: none; } .nautilus-desktop .nautilus-canvas-item .dim-label:selected, .nautilus-desktop .nautilus-canvas-item label.separator:selected, .nautilus-desktop .nautilus-canvas-item .titlebar .subtitle:selected, .titlebar .nautilus-desktop .nautilus-canvas-item .subtitle:selected, .nautilus-desktop .nautilus-canvas-item headerbar .subtitle:selected, headerbar .nautilus-desktop .nautilus-canvas-item .subtitle:selected { color: #fefefe; } .nautilus-desktop .nautilus-list .dim-label:selected, .nautilus-desktop .nautilus-list label.separator:selected, .nautilus-desktop .nautilus-list .titlebar .subtitle:selected, .titlebar .nautilus-desktop .nautilus-list .subtitle:selected, .nautilus-desktop .nautilus-list headerbar .subtitle:selected, headerbar .nautilus-desktop .nautilus-list .subtitle:selected { color: #fefefe; } /********* * Gedit * *********/ .gedit-search-slider { padding: 4px; border-radius: 0 0 3px 3px; border: 0; background-color: #434c5e; } /********* * Gnucash * *********/ .GncMainWindow entry.register-foreground { background: transparent; border: none; } /******************* * Calendar events * ********************/ .color-light.timed label { color: #d8dee9; opacity: 1; } .week-view .color-light.timed label, .color-light label, .year-view .color-light:not(.timed) label { color: #d8dee9; opacity: 1; } /******** * Gala * *******/ .gala-notification { border-width: 0; border-radius: 2px; color: white; border: 1px solid #3b4252; background-color: #3b4252; } .gala-notification .title, .gala-notification .label { color: #d8dee9; } .gala-button { padding: 3px; color: #3b4252; border: none; border-radius: 50%; background-image: linear-gradient(to bottom, #7e7e7e, #3e3e3e); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.98), inset 0 1px 0 0 rgba(255, 255, 255, 0.93), inset 0 -1px 0 0 rgba(255, 255, 255, 0.99), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 3px 6px rgba(0, 0, 0, 0.84), 0 3px 6px rgba(0, 0, 0, 0.77); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); } /********** * Notify * *********/ .notify { /*-notify-shadow: 0px 2px 18px transparentize(black, 0.60);*/ border-radius: 5px; border: 1px solid rgba(0, 0, 0, 0.7); background-color: rgba(59, 66, 82, 0.05); } /*************** * SwitchBoard * ***************/ .category-label { font-weight: bold; color: #d8dee9; } /************* * Slingshot * ************/ .button.app { border: none; border-radius: 0; box-shadow: none; background-image: none; } .button.app .app:hover { border-radius: 8px; border: none; background-color: rgba(129, 161, 193, 0.3); color: white; } .button.app .app:focus { /*background-color: transparentize(black, 0.20);*/ } .search-item { border-radius: 0; border: none; color: #d8dee9; background: none; } .search-item:hover, .search-item:focus { border-radius: 0; background-color: rgba(129, 161, 193, 0.3); color: #fefefe; } .search-entry-large, .search-entry-large:focus { border: none; font-size: 18px; font-weight: 300; background-image: none; background: none; box-shadow: none; border-radius: 0; } .search-category-header { font-weight: bold; color: #d8dee9; } /********* * Panel * ********/ .composited-indicator > revealer, .composited-indicator > revealer image, .composited-indicator > revealer label, .composited-indicator > revealer spinner { color: #d8dee9; font-weight: bold; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5); transition: all 200ms ease-in-out; -gtk-icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5); } .composited-indicator > revealer image:first-child + label { margin-left: 5px; } .panel.color-light .composited-indicator > revealer, .panel.color-light .composited-indicator > revealer image, .panel.color-light .composited-indicator > revealer label, .panel.color-light .composited-indicator > revealer spinner { color: rgba(0, 0, 0, 0.6); text-shadow: 0 1px rgba(255, 255, 255, 0.1); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.1); } /************** * Calculator * **************/ PantheonCalculatorMainWindow { border-radius: 0 0 4px 4px; } PantheonCalculatorMainWindow .window-frame { border-radius: 3px; } /********* * Cards * *********/ .deck { background-color: #323946; } .card { background-color: #3b4252; border: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 3px 3px rgba(0, 0, 0, 0.2); transition: all 150ms ease-in-out; } .card.collapsed { background-color: #303643; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.2); } /********* * Noise * *********/ NoiseLibraryWindow { border-radius: 0 0 4px 4px; } NoiseLibraryWindow .action-bar { border-radius: 0 0 4px 4px; } NoiseLibraryWindow .window-frame { border-radius: 3px; } /******** * Snap * ********/ SnapMainWindow .take-button, SnapSnapWindow .take-button { border-radius: 0; } /******************* * Photos/Shotwell * *******************/ DirectWindow .the-button-in-the-combobox, LibraryWindow .the-button-in-the-combobox { background: none; } .checkerboard-layout { background-color: #434c5e; background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1)), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1)); background-size: 24px 24px; background-position: 0 0, 12px 12px; } .checkboard-layout .item { background-color: #d8dee9; } /********* * Avatar * *********/ .avatar { border: 1px solid rgba(0, 0, 0, 0.23); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 0 rgba(255, 255, 255, 0.15), 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.23); } /**level bars**/ .sidebar .source-list.view.level-bar, .sidebar iconview.source-list.level-bar, .sidebar .source-list.view.level-bar:selected, .sidebar iconview.source-list.level-bar:selected, .sidebar .source-list.view.level-bar:selected:focus, .sidebar iconview.source-list.level-bar:selected:focus { background: linear-gradient(to right, #4e586d, #4e586d); border: 1px solid rgba(0, 0, 0, 0.14); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); border-radius: 2px; } .sidebar .source-list.view.level-bar.fill-block, .sidebar iconview.source-list.level-bar.fill-block { border: none; } .sidebar .source-list.view.fill-block, .sidebar iconview.source-list.fill-block, .sidebar .source-list.view.fill-block:hover, .sidebar iconview.source-list.fill-block:hover, .sidebar .source-list.view.fill-block:selected, .sidebar iconview.source-list.fill-block:selected, .sidebar .source-list.view.fill-block:selected:focus, .sidebar iconview.source-list.fill-block:selected:focus { background: linear-gradient(to right, #ebcb8b, #ebcb8b); } /************************** * Colors in context menu * **************************/ checkbutton.color-button { border: 1px solid #262a34; border-radius: 100px; background-clip: border-box; padding: 0; margin: 2px 1px; } checkbutton.color-button > check { -gtk-icon-source: none; background: none; margin-right: 0; padding: 2px; } checkbutton.color-button.none > check { background-color: transparent; border-radius: 100px; -gtk-icon-source: -gtk-icontheme("close-symbolic"); } radiobutton.color-button > radio { -gtk-icon-source: none; margin-right: 0; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 100px; background-clip: border-box; } radiobutton.color-button:active > radio { border: 1px solid rgba(0, 0, 0, 0.35); } .color-button check, .color-button check:checked, .color-button radio, .color-button radio:checked { background-image: none; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 50%; color: #3b4252; -gtk-icon-source: -gtk-icontheme("check-active-symbolic"); } .color-button.red check, .color-button.red radio, .color-button.strawberry check, .color-button.strawberry radio { background-color: @STRAWBERRY_300; -gtk-icon-shadow: 0 1px 1px @STRAWBERRY_500; } .color-button.orange check, .color-button.orange radio { background-color: @ORANGE_300; -gtk-icon-shadow: 0 1px 1px @ORANGE_500; } .color-button.yellow check, .color-button.yellow radio, .color-button.banana check, .color-button.banana radio { background-color: @BANANA_500; -gtk-icon-shadow: 0 1px 1px @BANANA_700; } .color-button.green check, .color-button.green radio, .color-button.lime check, .color-button.lime radio { background-color: @LIME_500; -gtk-icon-shadow: 0 1px 1px @LIME_700; } .color-button.blue check, .color-button.blue radio, .color-button.blueberry check, .color-button.blueberry radio { background-color: @BLUEBERRY_500; -gtk-icon-shadow: 0 1px 1px @BLUEBERRY_700; } .color-button.purple check, .color-button.purple radio, .color-button.grape check, .color-button.grape radio { background-color: @GRAPE_500; -gtk-icon-shadow: 0 1px 1px @GRAPE_700; } .color-button.brown check, .color-button.brown radio, .color-button.cocoa check, .color-button.cocoa radio { background-color: @COCOA_300; -gtk-icon-shadow: 0 1px 1px @COCOA_500; } .color-button.mint check, .color-button.mint radio { background-color: @MINT_500; -gtk-icon-shadow: 0 1px 1px @MINT_700; } .color-button.pink check, .color-button.pink radio, .color-button.bubblegum check, .color-button.bubblegum radio { background-color: @BUBBLEGUM_500; -gtk-icon-shadow: 0 1px 1px @BUBBLEGUM_700; } .color-button.slate check, .color-button.slate radio { background-color: @SLATE_300; -gtk-icon-shadow: 0 1px 1px @SLATE_500; } .color-button.auto radio { background-image: url("assets/color-button-auto.png"); background-position: -1px -1px; background-repeat: no-repeat; background-size: calc(100% + 2px); } .xfce4-panel { border-radius: 0; } .xfce4-panel.panel { background-color: #2e3440; color: #d8dee9; text-shadow: none; -gtk-icon-shadow: none; } .xfce4-panel.panel progressbar trough { background-color: rgba(255, 255, 255, 0.14); } #tasklist-button { color: rgba(216, 222, 233, 0.8); border-radius: 0; border: none; background-color: #2e3440; } #tasklist-button:hover { color: #f9fafb; background-color: rgba(0, 0, 0, 0.17); } #tasklist-button:checked { color: white; background-color: rgba(0, 0, 0, 0.25); box-shadow: inset 0 -2px #81a1c1; } .xfce4-panel.panel button.flat:not(.open_group), .mate-panel-menu-bar button:not(#tasklist-button), panel-toplevel.background button:not(#tasklist-button) { color: #d8dee9; border-radius: 0; border: none; background-color: #2e3440; } .xfce4-panel.panel button.flat:hover:not(.open_group), .mate-panel-menu-bar button:hover:not(#tasklist-button), panel-toplevel.background button:hover:not(#tasklist-button) { border: none; background-color: #434c5e; } .xfce4-panel.panel button.flat:active:not(.open_group), .mate-panel-menu-bar button:active:not(#tasklist-button), panel-toplevel.background button:active:not(#tasklist-button), .xfce4-panel.panel button.flat:checked:not(.open_group), .mate-panel-menu-bar button:checked:not(#tasklist-button), panel-toplevel.background button:checked:not(#tasklist-button) { color: #d8dee9; border: none; background-color: rgba(129, 161, 193, 0.1); box-shadow: 0px -2px #81a1c1 inset; } .xfce4-panel.panel button.flat:active:not(.open_group) label, .mate-panel-menu-bar button:active:not(#tasklist-button) label, panel-toplevel.background button:active:not(#tasklist-button) label, .xfce4-panel.panel button.flat:active:not(.open_group) image, .mate-panel-menu-bar button:active:not(#tasklist-button) image, panel-toplevel.background button:active:not(#tasklist-button) image, .xfce4-panel.panel button.flat:checked:not(.open_group) label, .mate-panel-menu-bar button:checked:not(#tasklist-button) label, panel-toplevel.background button:checked:not(#tasklist-button) label, .xfce4-panel.panel button.flat:checked:not(.open_group) image, .mate-panel-menu-bar button:checked:not(#tasklist-button) image, panel-toplevel.background button:checked:not(#tasklist-button) image { color: inherit; } #whiskermenu-window button { background-color: transparent; border: none; border-radius: 0; font-weight: normal; padding: 3px; margin: 1px 2px; } #whiskermenu-window button:hover, #whiskermenu-window button:checked { background-color: #81a1c1; } /* Vala-appmenu-plugin*/ .-vala-panel-appmenu-core scrolledwindow, .-vala-panel-appmenu-private > menuitem, .-vala-panel-appmenu-private > menuitem:first-child > label { color: #d8dee9; } /******** * Unity * *********/ /* Unity window border color */ /* Unity window text color */ /* Backdrop Unity window text color */ /* Unity panel color #454D50 */ UnityDecoration { /* Border properties (top, right, bottom, left) */ -UnityDecoration-extents: 28px 1px 1px 1px; /* the size of the decorations */ -UnityDecoration-input-extents: 10px; /* the extra size of the input areas */ /* Shadows settings */ -UnityDecoration-shadow-offset-x: 1px; /* Size property, the shadow x offset */ -UnityDecoration-shadow-offset-y: 1px; /* Size property, the shadow y offset */ -UnityDecoration-active-shadow-color: rgba 0, 0, 0, 0.647; /* Color property, active window shadow color */ -UnityDecoration-active-shadow-radius: 8px; /* Size property, active window shadow radius */ -UnityDecoration-inactive-shadow-color: rgba 0, 0, 0, 0.647; /* Color property, inactive windows shadow color */ -UnityDecoration-inactive-shadow-radius: 5px; /* Size property, inactive windows shadow radius */ /* Glow applied to the selected scaled window */ -UnityDecoration-glow-size: 8px; /* Size property, size of glow */ -UnityDecoration-glow-color: #81a1c1; /* Color property of the glow */ /* Title settings */ -UnityDecoration-title-indent: 10px; /* Size property, left indent of the title */ -UnityDecoration-title-fade: 35px; /* Size property, space of the title that can be faded */ -UnityDecoration-title-alignment: 0.0; /* Float from 0.0 to 1.0, to align the title */ background-color: #eeeeee; color: #31363D; } UnityDecoration .top { padding: 0 5px 0 5px; border-radius: 4px 4px 0px 0px; box-shadow: none; border: 1px solid #eeeeee; border-bottom-width: 0; background-color: #eeeeee; color: #31363D; border-top: 1px solid rgba(255, 255, 255, 0.1); } UnityDecoration .top:backdrop { border-bottom-width: 0; color: #1a1d21; border-top: 1px solid rgba(255, 255, 255, 0.1); } UnityDecoration .top .menuitem { color: #31363D; } UnityDecoration .top .menuitem:backdrop { color: #1a1d21; } UnityDecoration.left, UnityDecoration.right { background-repeat: repeat-x; background-color: #ececec; background-size: 1px 120px; background-clip: border-box; background-image: linear-gradient(to bottom, #eeeeee, #ececec); } UnityDecoration.bottom { background-size: 1px; background-repeat: repeat-x; background-color: #ececec; } UnityDecoration.left:backdrop, UnityDecoration.right:backdrop, UnityDecoration.bottom:backdrop { background-size: 1px; background-repeat: repeat-x; } /************** * Unity Panel * ***************/ UnityPanelWidget, .unity-panel { background-color: #d5d5d5; color: #31363D; } UnityPanelWidget:backdrop, .unity-panel:backdrop { color: #1a1d21; } .unity-panel.menuitem, .unity-panel .menuitem { border-width: 0 1px; color: #31363D; } .unity-panel.menubar, .unity-panel .menubar { color: #31363D; } .unity-panel.menu.menubar, .unity-panel .menu .menubar { background-color: #d5d5d5; color: #31363D; } .unity-panel.menubar:backdrop, .unity-panel .menubar *:backdrop { color: #8e95a4; } .unity-panel.menubar.menuitem, .unity-panel.menubar .menuitem { padding: 3px 5px; border-width: 1px; border-style: solid; border: none; background: none; color: #31363D; box-shadow: none; } .unity-panel.menubar.menuitem:hover, .unity-panel.menubar .menuitem:hover { border-radius: 0; background-color: #ebebeb; color: #31363D; box-shadow: none; } .unity-panel.menubar .menuitem *:hover { color: white; box-shadow: none; } .unity-panel.menubar .menuitem.separator, .unity-panel.menubar.menuitem.separator { border: none; color: #262a34; } /* Force Quit */ SheetStyleDialog.unity-force-quit { background-color: #3b4252; } @keyframes playbackmenuitem_spinner { to { -gtk-icon-transform: rotate(1turn); } } .menu IdoPlaybackMenuItem.menuitem:active { -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); animation: playbackmenuitem_spinner 1s infinite linear; color: #81a1c1; } .mate-panel-menu-bar, panel-toplevel.background { border-radius: 0; } .mate-panel-menu-bar, .mate-panel-menu-bar menubar, panel-toplevel.background, panel-toplevel.background menubar { background-color: #2e3440; } .mate-panel-menu-bar menubar, .mate-panel-menu-bar #PanelApplet label, .mate-panel-menu-bar #PanelApplet image, panel-toplevel.background menubar, panel-toplevel.background #PanelApplet label, panel-toplevel.background #PanelApplet image { color: #d8dee9; } .mate-panel-menu-bar button label, .mate-panel-menu-bar button image, .mate-panel-menu-bar #tasklist-button label, .mate-panel-menu-bar #tasklist-button image, panel-toplevel.background button label, panel-toplevel.background button image, panel-toplevel.background #tasklist-button label, panel-toplevel.background #tasklist-button image { color: inherit; } .mate-panel-menu-bar .wnck-pager, panel-toplevel.background .wnck-pager { color: #6c6f75; background-color: #282d37; } .mate-panel-menu-bar .wnck-pager:hover, panel-toplevel.background .wnck-pager:hover { background-color: #39404f; } .mate-panel-menu-bar .wnck-pager:selected, panel-toplevel.background .wnck-pager:selected { color: #c5d4e3; background-color: #81a1c1; } .mate-panel-menu-bar na-tray-applet, panel-toplevel.background na-tray-applet { -NaTrayApplet-icon-padding: 0; -NaTrayApplet-icon-size: 16px; } MsdOsdWindow.background.osd { border-radius: 2px; border: 1px solid #262a34; } MsdOsdWindow.background.osd .progressbar { background-color: #81a1c1; border: none; border-color: #81a1c1; border-radius: 5px; } MsdOsdWindow.background.osd .trough { background-color: rgba(29, 33, 40, 0.93); border: none; border-radius: 5px; } .caja-notebook .frame { border-width: 0 0 1px; } .caja-notebook .entry { background: #434c5e; color: #d8dee9; border-color: #262a34; } .caja-notebook .entry:selected { background: #81a1c1; color: #fefefe; } /************** * Caja sidebar * **************/ .caja-side-pane { background: #2e3440; } .caja-side-pane .frame { border-width: 0px; } .caja-side-pane button, .caja-side-pane button label { color: #d8dee9; } .caja-side-pane treeview.view, .caja-side-pane textview.view text, .caja-side-pane viewport.frame, .caja-side-pane widget .vertical { background: #2e3440; padding: 3px 2px; color: #d8dee9; } .caja-side-pane treeview.view:hover, .caja-side-pane textview.view text:hover, .caja-side-pane viewport.frame:hover, .caja-side-pane widget .vertical:hover { background-color: rgba(57, 64, 79, 0.95); } .caja-side-pane treeview.view:selected, .caja-side-pane textview.view text:selected, .caja-side-pane viewport.frame:selected, .caja-side-pane widget .vertical:selected { background: rgba(57, 64, 79, 0.93); } .caja-side-pane treeview.view:selected:hover, .caja-side-pane textview.view text:selected:hover, .caja-side-pane viewport.frame:selected:hover, .caja-side-pane widget .vertical:selected:hover { background: rgba(57, 64, 79, 0.93); color: #fff; } /************** * Caja pathbar * **************/ .caja-navigation-window paned { background: #3b4252; } .caja-navigation-window .primary-toolbar { background: #2b313c; } .caja-navigation-window .primary-toolbar button, .caja-navigation-window .primary-toolbar button label { color: #d8dee9; } .caja-navigation-window .primary-toolbar button, .caja-navigation-window .primary-toolbar button:backdrop { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } .caja-navigation-window .primary-toolbar button:hover, .caja-navigation-window .primary-toolbar button:active, .caja-navigation-window .primary-toolbar button:backdrop:active, .caja-navigation-window .primary-toolbar button:backdrop:checked { background: #81a1c1; box-shadow: none; } .caja-navigation-window .primary-toolbar button:hover, .caja-navigation-window .primary-toolbar button:hover label, .caja-navigation-window .primary-toolbar button:active, .caja-navigation-window .primary-toolbar button:active label, .caja-navigation-window .primary-toolbar button:backdrop:active, .caja-navigation-window .primary-toolbar button:backdrop:active label, .caja-navigation-window .primary-toolbar button:backdrop:checked, .caja-navigation-window .primary-toolbar button:backdrop:checked label { color: #fefefe; } .caja-pathbar button { font-weight: normal; color: #d8dee9; background-color: #3c4454; text-shadow: none; border-radius: 0px; border-right: 1px solid #262a34; border-left: none; box-shadow: none; min-height: 20px; padding: 3px 5px; margin-right: -3px; } .caja-pathbar button:first-child { border-left: 1px solid #262a34; } .caja-pathbar button:hover { color: #fff; outline-color: rgba(255, 255, 255, 0.3); background-color: rgba(129, 161, 193, 0.7); text-shadow: none; } .caja-pathbar button:checked { color: #fff; outline-color: rgba(255, 255, 255, 0.3); background-color: #81a1c1; text-shadow: none; } /*********************** * App-Specific Styles * ***********************/ /********* * Geary * *********/ .geary-titlebar-left .separator, .geary-titlebar-right .separator { opacity: 0; } ConversationListView { -GtkTreeView-grid-line-width: 0; } ConversationListView .view:active, ConversationListView iconview:active, ConversationListView .view:selected, ConversationListView iconview:selected { background-color: #81a1c1; color: #fefefe; } ConversationListView .view:active:backdrop, ConversationListView iconview:active:backdrop, ConversationListView .view:selected:backdrop, ConversationListView iconview:selected:backdrop { background-color: rgba(129, 161, 193, 0.6); color: rgba(254, 254, 254, 0.5); } ConversationListView .view .cell, ConversationListView iconview .cell { border: solid rgba(0, 0, 0, 0.2); border-width: 0 0 1px 0; } ConversationListView .view .cell:selected, ConversationListView iconview .cell:selected { color: #fefefe; border: 0px solid #5f88b0; } /*********** * LightDm * ***********/ #panel_window { background-color: #2e3440; color: #d8dee9; font-weight: bold; box-shadow: inset 0 -1px #1f232b; } #panel_window .menubar, #panel_window .menubar > .menuitem menubar, #panel_window menubar > menuitem { background-color: transparent; color: #d8dee9; font-weight: bold; } #panel_window .menubar .menuitem:disabled, #panel_window menubar menuitem:disabled { color: rgba(216, 222, 233, 0.5); } #panel_window .menubar .menuitem:disabled GtkLabel, #panel_window menubar menuitem:disabled GtkLabel { color: inherit; } #panel_window .menubar .menuitem:disabled label, #panel_window menubar menuitem:disabled label { color: inherit; } #panel_window .menubar .menu > .menuitem, #panel_window menubar menu > menuitem { font-weight: normal; } #login_window, #shutdown_dialog, #restart_dialog { font-weight: normal; border-style: none; background-color: transparent; color: #d8dee9; } #content_frame { padding-bottom: 14px; background-color: #434c5e; border-top-left-radius: 2px; border-top-right-radius: 2px; border: solid rgba(0, 0, 0, 0.1); border-width: 1px 1px 0 1px; } #content_frame button { font-weight: normal; color: #d8dee9; background-color: #3c4454; text-shadow: none; } #content_frame button:hover { color: #d8dee9; outline-color: rgba(216, 222, 233, 0.3); background-color: #3b4252; text-shadow: none; } #content_frame button:active, #content_frame button:checked { color: #d8dee9; outline-color: rgba(216, 222, 233, 0.3); background-color: #81a1c1; text-shadow: none; } #content_frame button:disabled { color: #b9bfcb; outline-color: rgba(216, 222, 233, 0.3); background-color: #404859; text-shadow: none; } #buttonbox_frame { padding-top: 20px; padding-bottom: 0px; border-style: none; background-color: #2b313c; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border: solid rgba(0, 0, 0, 0.1); border-width: 0 1px 1px 1px; } #buttonbox_frame button { color: #d8dee9; border-color: #1f232b; background-color: rgba(40, 45, 55, 0.93); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } #buttonbox_frame button:hover { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(65, 74, 91, 0.93), rgba(65, 74, 91, 0.93)); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } #buttonbox_frame button:active, #buttonbox_frame button:checked { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(52, 59, 73, 0.93), rgba(52, 59, 73, 0.93)); background-clip: padding-box; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(216, 222, 233, 0.3); } #buttonbox_frame button:disabled { color: #808690; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(58, 63, 73, 0.5), rgba(58, 63, 73, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } #login_window #user_combobox { color: #d8dee9; font-size: 13px; } #login_window #user_combobox .menu, #login_window #user_combobox menu { font-weight: normal; } #user_image { padding: 3px; border-radius: 2px; } #greeter_infobar { border-bottom-width: 0; font-weight: bold; } .nemo-window .places-treeview { -NemoPlacesTreeView-disk-full-bg-color: #4e586d; -NemoPlacesTreeView-disk-full-fg-color: #ebcb8b; -GtkTreeView-vertical-separator: 10; } .nemo-window .places-treeview .view.cell:hover, .nemo-window .places-treeview iconview.cell:hover, .nemo-window .places-treeview iconview.cell:hover { background: rgba(40, 45, 55, 0.7); } .nemo-window .places-treeview .view.cell:selected, .nemo-window .places-treeview iconview.cell:selected, .nemo-window .places-treeview iconview.cell:selected { background: #81a1c1; color: #fefefe; } .nemo-window .sidebar { background-color: #2e3440; } .nemo-window .sidebar .view, .nemo-window .sidebar iconview, .nemo-window .sidebar .iconview, .nemo-window .sidebar row { color: #d8dee9; background-color: transparent; } .nemo-window .nemo-window-pane widget.entry { background-clip: padding-box; min-height: 28px; padding: 5px; color: #d8dee9; border: 1px solid #81a1c1; border-radius: 4px; box-shadow: 0px 0px 1px 1px #81a1c1 inset; } .nemo-window .nemo-window-pane widget.entry:selected { background-color: #81a1c1; color: #fefefe; } .nemo-window toolbar.primary-toolbar { margin-bottom: -1px; background: #2b313c; } .nemo-window toolbar.primary-toolbar button, .nemo-window toolbar.primary-toolbar .horizontal > button.flat.image-button { color: #d8dee9; border-radius: 4px; text-shadow: none; box-shadow: none; border: 1px solid #1f232b; background-color: #343b48; } .nemo-window toolbar.primary-toolbar button:hover, .nemo-window toolbar.primary-toolbar .horizontal > button.flat.image-button:hover { color: #fefefe; text-shadow: none; background-color: rgba(129, 161, 193, 0.8); border-color: #1f232b; } .nemo-window toolbar.primary-toolbar button:selected, .nemo-window toolbar.primary-toolbar button:active, .nemo-window toolbar.primary-toolbar button:checked, .nemo-window toolbar.primary-toolbar .horizontal > button.flat.image-button:selected, .nemo-window toolbar.primary-toolbar .horizontal > button.flat.image-button:active, .nemo-window toolbar.primary-toolbar .horizontal > button.flat.image-button:checked { color: #fefefe; outline-color: rgba(254, 254, 254, 0.3); background-color: #81a1c1; text-shadow: none; } .nemo-window toolbar.primary-toolbar button:selected:backdrop, .nemo-window toolbar.primary-toolbar button:active:backdrop, .nemo-window toolbar.primary-toolbar button:checked:backdrop, .nemo-window toolbar.primary-toolbar .horizontal > button.flat.image-button:selected:backdrop, .nemo-window toolbar.primary-toolbar .horizontal > button.flat.image-button:active:backdrop, .nemo-window toolbar.primary-toolbar .horizontal > button.flat.image-button:checked:backdrop { color: rgba(254, 254, 254, 0.5); background-color: rgba(129, 161, 193, 0.6); border-color: #1f232b; text-shadow: none; box-shadow: none; } .nemo-window toolbar.primary-toolbar button:backdrop, .nemo-window toolbar.primary-toolbar button:disabled, .nemo-window toolbar.primary-toolbar button:backdrop:disabled, .nemo-window toolbar.primary-toolbar .horizontal > button.flat.image-button:backdrop, .nemo-window toolbar.primary-toolbar .horizontal > button.flat.image-button:disabled, .nemo-window toolbar.primary-toolbar .horizontal > button.flat.image-button:backdrop:disabled { color: rgba(216, 222, 233, 0.2); background-color: #2e3440; border-color: #1f232b; text-shadow: none; box-shadow: none; } .nemo-window toolbar.primary-toolbar .path-bar button { border-radius: 0; margin-right: -1px; } .nemo-window toolbar.primary-toolbar .path-bar button:first-child { border-radius: 4px 0px 0px 4px; } .nemo-window toolbar.primary-toolbar .path-bar button:last-child { border-radius: 0px 4px 4px 0px; } .nemo-window toolbar.primary-toolbar .horizontal > button.flat.image-button { background: transparent; border: none; } .nemo-window .nemo-inactive-pane .view, .nemo-window .nemo-inactive-pane iconview, .nemo-window .nemo-inactive-pane iconview { background-color: #353b49; } /* thunar */ .thunar toolbar { background-color: #2b313c; } .thunar toolbar .flat { color: #d8dee9; } /* buttons in toolbar */ .thunar toolbar.horizontal button image { -gtk-icon-transform: scale(0.72); } /* path-bar of thunar */ window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar .path-bar-button, .thunar toolbar .path-bar-button { color: #d8dee9; border-radius: 4px; text-shadow: none; box-shadow: none; border: 1px solid #1f232b; background-color: #343b48; border-radius: 0; border-right: 0.5px solid #1f232b; box-shadow: none; min-height: 20px; padding: 3px 4px; } window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar .path-bar-button:first-child, .thunar toolbar .path-bar-button:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar .path-bar-button:last-child, .thunar toolbar .path-bar-button:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-right-style: solid; } window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar .path-bar-button:only-child, .thunar toolbar .path-bar-button:only-child { border-radius: 4px; border-style: solid; } window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar .path-bar-button:hover, .thunar toolbar .path-bar-button:hover { color: #81a1c1; } window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar .path-bar-button:checked, .thunar toolbar .path-bar-button:checked { color: #fff; outline-color: rgba(255, 255, 255, 0.3); background-color: rgba(129, 161, 193, 0.7); text-shadow: none; } window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar .toggle.path-bar-button:hover, .thunar toolbar .toggle.path-bar-button:hover { color: #fff; outline-color: rgba(255, 255, 255, 0.3); background-color: rgba(129, 161, 193, 0.7); text-shadow: none; } /* thunar sidepane */ .thunar scrolledwindow.sidebar treeview.view { background: #2a2f3a; color: #98abb2; padding: 1.5px; } .thunar scrolledwindow.sidebar treeview.view:hover, .thunar scrolledwindow.sidebar treeview.view:selected { background: rgba(129, 161, 193, 0.9); color: #fefefe; border-radius: 0; box-shadow: none; } /*# sourceMappingURL=gtk-dark.css.map */ ================================================ FILE: gtk-3.0/gtk-dark.scss ================================================ $variant: 'dark'; @import 'nord'; @import 'colors'; @import 'elementary-colors'; @import 'colors-public'; @import 'drawing'; @import 'common'; @import 'widgets'; @import 'apps'; ================================================ FILE: gtk-3.0/gtk.css ================================================ /*$selected_bg_color: #00e8c6;06d6a0*/ /* GTK NAMED COLORS ---------------- use responsibly! */ /* widget text/foreground color */ @define-color theme_fg_color #3b4252; /* text color for entries, views and content in general */ @define-color theme_text_color #3b4252; /* widget base background color */ @define-color theme_bg_color #d8dee9; /* text widgets and the like base background color */ @define-color theme_base_color #e5e9f0; /* base background color of selections */ @define-color theme_selected_bg_color #81a1c1; /* text/foreground color of selections */ @define-color theme_selected_fg_color #fefefe; /* base background color of disabled widgets */ @define-color insensitive_bg_color #dde2ec; /* text foreground color of disabled widgets */ @define-color insensitive_fg_color #8a909e; /* disabled text widgets and the like base background color */ @define-color insensitive_base_color #e5e9f0; /* widget text/foreground color on backdrop windows */ @define-color theme_unfocused_fg_color #8a909e; /* text color for entries, views and content in general on backdrop windows */ @define-color theme_unfocused_text_color #3b4252; /* widget base background color on backdrop windows */ @define-color theme_unfocused_bg_color #d8dee9; /* text widgets and the like base background color on backdrop windows */ @define-color theme_unfocused_base_color #e2e6ee; /* base background color of selections on backdrop windows */ @define-color theme_unfocused_selected_bg_color #81a1c1; /* text/foreground color of selections on backdrop windows */ @define-color theme_unfocused_selected_fg_color #fefefe; /* widgets main borders color */ @define-color borders #c5cedd; /* widgets main borders color on backdrop windows */ @define-color unfocused_borders #c7d0de; /* these are pretty self explicative */ @define-color warning_color #d08770; @define-color error_color #bf616a; @define-color success_color #88c0d0; @define-color fg_color #3b4252; @define-color text_color #3b4252; @define-color bg_color #d8dee9; @define-color base_color #e5e9f0; @define-color selected_bg_color #81a1c1; @define-color selected_fg_color #fefefe; @define-color unfocused_fg_color #8a909e; @define-color unfocused_text_color #3b4252; @define-color unfocused_bg_color #d8dee9; @define-color unfocused_base_color #e2e6ee; @define-color unfocused_selected_bg_color #81a1c1; @define-color unfocused_selected_fg_color #fefefe; /* these colors are exported for the window manager and shouldn't be used in applications, read if you used those and something break with a version upgrade you're on your own... */ @define-color wm_title shade(#3b4252, 1.8); @define-color wm_unfocused_title #8a909e; @define-color wm_highlight rgba(255, 255, 255, 0.2); @define-color wm_borders_edge rgba(255, 255, 255, 0.2); @define-color wm_bg_a shade(#d8dee9, 1.2); @define-color wm_bg_b #d8dee9; @define-color wm_shadow alpha(black, 0.35); @define-color wm_border alpha(black, 0.18); @define-color wm_button_hover_color_a shade(#d8dee9, 1.3); @define-color wm_button_hover_color_b #d8dee9; @define-color wm_button_active_color_a shade(#d8dee9, 0.85); @define-color wm_button_active_color_b shade(#d8dee9, 0.89); @define-color wm_button_active_color_c shade(#d8dee9, 0.9); @define-color content_view_bg #e5e9f0; @define-color text_view_bg #e5e9f0; @define-color budgie_tasklist_indicator_color #81a1c1; @define-color budgie_tasklist_indicator_color_active #81a1c1; @define-color STRAWBERRY_100 #ff8c82; @define-color STRAWBERRY_300 #ed5353; @define-color STRAWBERRY_500 #c6262e; @define-color STRAWBERRY_700 #a10705; @define-color STRAWBERRY_900 #7a0000; @define-color ORANGE_100 #ffc27d; @define-color ORANGE_300 #ffa154; @define-color ORANGE_500 #f37329; @define-color ORANGE_700 #cc3b02; @define-color ORANGE_900 #a62100; @define-color BANANA_100 #fff394; @define-color BANANA_300 #ffe16b; @define-color BANANA_500 #f9c440; @define-color BANANA_700 #d48e15; @define-color BANANA_900 #ad5f00; @define-color LIME_100 #d1ff82; @define-color LIME_300 #9bdb4d; @define-color LIME_500 #68b723; @define-color LIME_700 #3a9104; @define-color LIME_900 #206b00; @define-color MINT_100 #89ffdd; @define-color MINT_300 #43d6b5; @define-color MINT_500 #28bca3; @define-color MINT_700 #0e9a83; @define-color MINT_900 #007367; @define-color BLUEBERRY_100 #8cd5ff; @define-color BLUEBERRY_300 #64baff; @define-color BLUEBERRY_500 #3689e6; @define-color BLUEBERRY_700 #0d52bf; @define-color BLUEBERRY_900 #002e99; @define-color BUBBLEGUM_100 #fe9ab8; @define-color BUBBLEGUM_300 #f4679d; @define-color BUBBLEGUM_500 #de3e80; @define-color BUBBLEGUM_700 #bc245d; @define-color BUBBLEGUM_900 #910e38; @define-color GRAPE_100 #e4c6fa; @define-color GRAPE_300 #cd9ef7; @define-color GRAPE_500 #a56de2; @define-color GRAPE_700 #7239b3; @define-color GRAPE_900 #452981; @define-color COCOA_100 #a3907c; @define-color COCOA_300 #8a715e; @define-color COCOA_500 #715344; @define-color COCOA_700 #57392d; @define-color COCOA_900 #3d211b; @define-color SILVER_100 #fafafa; @define-color SILVER_300 #d4d4d4; @define-color SILVER_500 #abacae; @define-color SILVER_700 #7e8087; @define-color SILVER_900 #555761; @define-color SLATE_100 #95a3ab; @define-color SLATE_300 #667885; @define-color SLATE_500 #485a6c; @define-color SLATE_700 #273445; @define-color SLATE_900 #0e141f; @define-color BLACK_100 #666; @define-color BLACK_300 #4d4d4d; @define-color BLACK_500 #333; @define-color BLACK_700 #1a1a1a; @define-color BLACK_900 #000; /***************** * Drawing mixins * *****************/ /********* * Common * *********/ * { padding: 0; -GtkToolButton-icon-spacing: 4; -GtkTextView-error-underline-color: #bf616a; -GtkScrolledWindow-scrollbar-spacing: 0; -GtkToolItemGroup-expander-size: 11; -GtkWidget-text-handle-width: 20; -GtkWidget-text-handle-height: 24; -GtkDialog-button-spacing: 4; -GtkDialog-action-area-border: 0; outline-color: rgba(59, 66, 82, 0.3); outline-style: dashed; outline-offset: -3px; outline-width: 1px; -gtk-outline-radius: 2px; -gtk-secondary-caret-color: #81a1c1; } /*********** * Widgets * ***********/ /*************** * Action bars * ***************/ .action-bar { background-color: #b7c2d7; border: solid #c5cedd; border-width: 1px 0 0 0; color: #3b4252; box-shadow: none; } .action-bar:backdrop { background-color: #b7c2d7; box-shadow: none; -gtk-icon-effect: dim; } .action-bar:first-child { border-radius: 6px 6px 0px 0px; border-width: 1px 1px 0px 1px; } .action-bar:last-child { border-radius: 0 0 6px 6px; border-width: 0px 1px 1px 1px; } /********************* * App Notifications * *********************/ .app-notification, .app-notification.frame { padding: 10px; border-radius: 0 0 5px 5px; background-color: rgba(40, 45, 55, 0.93); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px); background-clip: padding-box; } .app-notification:backdrop, .app-notification.frame:backdrop { background-image: none; transition: 200ms ease-out; } .app-notification border, .app-notification.frame border { border: none; } /*************** * Base States * ***************/ .background { color: #3b4252; background-color: #d8dee9; } .background:backdrop { color: #8a909e; background-color: #d8dee9; text-shadow: none; -gtk-icon-shadow: none; } /* These wildcard seems unavoidable, need to investigate. Wildcards are bad and troublesome, use them with care, or better, just don't. Everytime a wildcard is used a kitten dies, painfully. */ selection { background-color: #81a1c1; color: #fefefe; } *:disabled { -gtk-icon-effect: dim; } .gtkstyle-fallback { color: #3b4252; background-color: #d8dee9; } .gtkstyle-fallback:hover { color: #3b4252; background-color: #f9fafb; } .gtkstyle-fallback:active { color: #3b4252; background-color: #b7c2d7; } .gtkstyle-fallback:disabled { color: #8a909e; background-color: #dde2ec; } .gtkstyle-fallback:selected { color: #fefefe; background-color: #81a1c1; } .view, iconview, .view text, iconview text, textview text { color: #3b4252; background-color: #e5e9f0; } .view:backdrop, iconview:backdrop, .view text:backdrop, iconview text:backdrop, textview text:backdrop { color: #5c6371; background-color: #e2e6ee; } .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, .view text:selected:focus, iconview text:selected:focus, textview text:selected:focus, .view text:selected, iconview text:selected, textview text:selected { border-radius: 3px; } textview border { background-color: #dfe4ed; } .rubberband, rubberband, flowbox rubberband, .content-view rubberband, treeview.view rubberband { border: 1px solid #5f88b0; background-color: rgba(95, 136, 176, 0.2); } flowbox flowboxchild { padding: 3px; border-radius: 3px; } flowbox flowboxchild:selected { outline-offset: -2px; } label { caret-color: currentColor; } label.separator { color: #3b4252; } label.separator:backdrop { color: #8a909e; } label selection { background-color: #81a1c1; color: #fefefe; } label:disabled { color: #8a909e; } label:disabled:backdrop { color: #a7b5cd; } label:backdrop { color: #8a909e; } .dim-label, label.separator, .titlebar .subtitle, headerbar .subtitle { opacity: 0.55; text-shadow: none; } assistant .sidebar { background-color: #e5e9f0; border-top: 1px solid #c5cedd; } assistant .sidebar:backdrop { background-color: #e2e6ee; border-color: #c7d0de; } assistant.csd .sidebar { border-top-style: none; } assistant .sidebar label { padding: 6px 12px; } assistant .sidebar label.highlight { background-color: #b9bfcb; } .app-notification, .app-notification.frame, .osd .scale-popup, .csd popover.background.touch-selection, .csd popover.background.magnifier, popover.background.touch-selection, popover.background.magnifier, .csd popover.background.osd, popover.background.osd, .osd { color: #d8dee9; border: none; background-color: rgba(40, 45, 55, 0.93); background-clip: padding-box; outline-color: rgba(216, 222, 233, 0.3); text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; } .app-notification:backdrop, .osd .scale-popup:backdrop, popover.background.touch-selection:backdrop, popover.background.magnifier:backdrop, popover.background.osd:backdrop, .osd:backdrop { text-shadow: none; -gtk-icon-shadow: none; } *:selected { background: #81a1c1; color: #fefefe; } /*********** * Buttons * ***********/ @keyframes needs_attention { from { background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#81a1c1), to(transparent)); } to { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#81a1c1), to(transparent)); } } notebook > header > tabs > arrow, button { min-height: 20px; min-width: 16px; padding: 2px 6px; border: 1px solid #c5cedd; border-radius: 4px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); font-weight: normal; color: #3b4252; background-color: #e3e7ef; text-shadow: none; } notebook > header > tabs > arrow, button.flat { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; transition: none; } notebook > header > tabs > arrow:hover, button.flat:hover { transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-duration: 500ms; color: #fefefe; outline-color: rgba(254, 254, 254, 0.3); background-color: #81a1c1; text-shadow: none; } notebook > header > tabs > arrow:hover:active, button.flat:hover:active { transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } notebook > header > tabs > arrow:hover, button:hover { color: #fefefe; outline-color: rgba(254, 254, 254, 0.3); background-color: #81a1c1; text-shadow: none; -gtk-icon-effect: highlight; } notebook > header > tabs > arrow:active, notebook > header > tabs > arrow:checked, button:active, button:checked { color: #fefefe; outline-color: rgba(254, 254, 254, 0.3); background-color: #7094b9; text-shadow: none; transition-duration: 50ms; } notebook > header > tabs > arrow:backdrop, notebook > header > tabs > arrow:backdrop, button:backdrop.flat, button:backdrop { color: #5c6371; outline-color: rgba(59, 66, 82, 0.3); background-color: #e2e6ee; text-shadow: none; transition: 200ms ease-out; -gtk-icon-effect: none; } notebook > header > tabs > arrow:backdrop:active, notebook > header > tabs > arrow:backdrop:checked, notebook > header > tabs > arrow:backdrop:active, notebook > header > tabs > arrow:backdrop:checked, button:backdrop.flat:active, button:backdrop.flat:checked, button:backdrop:active, button:backdrop:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(59, 66, 82, 0.3); background-color: #81a1c1; text-shadow: none; } notebook > header > tabs > arrow:backdrop:active label, notebook > header > tabs > arrow:backdrop:checked label, notebook > header > tabs > arrow:backdrop:active label, notebook > header > tabs > arrow:backdrop:checked label, button:backdrop.flat:active label, button:backdrop.flat:checked label, button:backdrop:active label, button:backdrop:checked label { color: rgba(254, 254, 254, 0.7); } notebook > header > tabs > arrow:backdrop:disabled, notebook > header > tabs > arrow:backdrop:disabled, button:backdrop.flat:disabled, button:backdrop:disabled { color: #5c6371; outline-color: rgba(59, 66, 82, 0.3); background-color: #dde2ec; text-shadow: none; } notebook > header > tabs > arrow:backdrop:disabled:active, notebook > header > tabs > arrow:backdrop:disabled:checked, notebook > header > tabs > arrow:backdrop:disabled:active, notebook > header > tabs > arrow:backdrop:disabled:checked, button:backdrop.flat:disabled:active, button:backdrop.flat:disabled:checked, button:backdrop:disabled:active, button:backdrop:disabled:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(59, 66, 82, 0.3); background-color: #81a1c1; text-shadow: none; } notebook > header > tabs > arrow:backdrop, notebook > header > tabs > arrow:disabled, notebook > header > tabs > arrow:backdrop:disabled, button.flat:backdrop, button.flat:disabled, button.flat:backdrop:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } notebook > header > tabs > arrow:disabled, button:disabled { color: #5c6371; outline-color: rgba(59, 66, 82, 0.3); background-color: #dde2ec; text-shadow: none; } notebook > header > tabs > arrow:disabled:active, notebook > header > tabs > arrow:disabled:checked, button:disabled:active, button:disabled:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(59, 66, 82, 0.3); background-color: #81a1c1; text-shadow: none; } notebook > header > tabs > arrow:disabled:active label, notebook > header > tabs > arrow:disabled:checked label, button:disabled:active label, button:disabled:checked label { color: rgba(254, 254, 254, 0.7); } notebook > header > tabs > arrow.image-button, button.image-button { min-width: 24px; padding-left: 4px; padding-right: 4px; } notebook > header > tabs > arrow.image-button.circular, notebook > header > tabs > arrow.image-button.sidebar-button, button.image-button.circular, button.image-button.sidebar-button { padding: 6px 4px; border-radius: 50px; box-shadow: none; } notebook > header > tabs > arrow.text-button, button.text-button { padding-left: 16px; padding-right: 16px; } notebook > header > tabs > arrow.text-button.image-button, button.text-button.image-button { padding-left: 8px; padding-right: 8px; border-radius: 2px; } notebook > header > tabs > arrow.text-button.image-button label, button.text-button.image-button label { padding-left: 8px; padding-right: 8px; } combobox:drop(active) button.combo, notebook > header > tabs > arrow:drop(active), button:drop(active) { color: #a3be8c; border-color: #a3be8c; box-shadow: inset 0 0 0 1px #a3be8c; } row:selected button { border-color: #5f88b0; } row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled) { color: #fefefe; border-color: transparent; } row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled):backdrop { color: #e2e6ee; } button.osd { min-width: 24px; min-height: 20px; color: #d8dee9; border-radius: 5px; outline-color: rgba(216, 222, 233, 0.3); color: #d8dee9; border-color: #1f232b; background-color: rgba(40, 45, 55, 0.93); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); border: none; box-shadow: none; } button.osd.image-button { min-width: 32px; } button.osd:hover { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(65, 74, 91, 0.93), rgba(65, 74, 91, 0.93)); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); border: none; box-shadow: none; } button.osd:active, button.osd:checked { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(52, 59, 73, 0.93), rgba(52, 59, 73, 0.93)); background-clip: padding-box; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(216, 222, 233, 0.3); border: none; box-shadow: none; } button.osd:disabled:backdrop, button.osd:disabled { color: #808690; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(58, 63, 73, 0.5), rgba(58, 63, 73, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; border: none; } button.osd:backdrop { color: #d8dee9; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(40, 45, 55, 0.93), rgba(40, 45, 55, 0.93)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; border: none; } .app-notification button, .app-notification.frame button, .csd popover.background.touch-selection button, .csd popover.background.magnifier button, popover.background.touch-selection button, popover.background.magnifier button, .osd button { color: #d8dee9; border-color: #1f232b; background-color: rgba(40, 45, 55, 0.93); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } .app-notification button:hover, popover.background.touch-selection button:hover, popover.background.magnifier button:hover, .osd button:hover { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(65, 74, 91, 0.93), rgba(65, 74, 91, 0.93)); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } .app-notification button:active:backdrop, popover.background.touch-selection button:active:backdrop, popover.background.magnifier button:active:backdrop, .app-notification button:active, popover.background.touch-selection button:active, popover.background.magnifier button:active, .app-notification button:checked:backdrop, popover.background.touch-selection button:checked:backdrop, popover.background.magnifier button:checked:backdrop, .app-notification button:checked, popover.background.touch-selection button:checked, popover.background.magnifier button:checked, .osd button:active:backdrop, .osd button:active, .osd button:checked:backdrop, .osd button:checked { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(52, 59, 73, 0.93), rgba(52, 59, 73, 0.93)); background-clip: padding-box; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(216, 222, 233, 0.3); } .app-notification button:disabled:backdrop, popover.background.touch-selection button:disabled:backdrop, popover.background.magnifier button:disabled:backdrop, .app-notification button:disabled, popover.background.touch-selection button:disabled, popover.background.magnifier button:disabled, .osd button:disabled:backdrop, .osd button:disabled { color: #808690; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(58, 63, 73, 0.5), rgba(58, 63, 73, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } .app-notification button:backdrop, popover.background.touch-selection button:backdrop, popover.background.magnifier button:backdrop, .osd button:backdrop { color: #d8dee9; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(40, 45, 55, 0.93), rgba(40, 45, 55, 0.93)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } .app-notification button.flat, popover.background.touch-selection button.flat, popover.background.magnifier button.flat, .osd button.flat { color: #d8dee9; border-color: #1f232b; background-color: rgba(40, 45, 55, 0.93); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); box-shadow: none; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; } .app-notification button.flat:hover, popover.background.touch-selection button.flat:hover, popover.background.magnifier button.flat:hover, .osd button.flat:hover { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(65, 74, 91, 0.93), rgba(65, 74, 91, 0.93)); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } .app-notification button.flat:disabled, popover.background.touch-selection button.flat:disabled, popover.background.magnifier button.flat:disabled, .osd button.flat:disabled { color: #808690; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(58, 63, 73, 0.5), rgba(58, 63, 73, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; background-image: none; border-color: transparent; box-shadow: none; } .app-notification button.flat:backdrop, popover.background.touch-selection button.flat:backdrop, popover.background.magnifier button.flat:backdrop, .osd button.flat:backdrop { color: #d8dee9; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(40, 45, 55, 0.93), rgba(40, 45, 55, 0.93)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } .app-notification button.flat:active, popover.background.touch-selection button.flat:active, popover.background.magnifier button.flat:active, .app-notification button.flat:checked, popover.background.touch-selection button.flat:checked, popover.background.magnifier button.flat:checked, .osd button.flat:active, .osd button.flat:checked { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(52, 59, 73, 0.93), rgba(52, 59, 73, 0.93)); background-clip: padding-box; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(216, 222, 233, 0.3); } button.suggested-action { border: none; box-shadow: none; color: white; border-radius: 4px; background: linear-gradient(to right, #88c0d0 0%, #88c0d0 100%); } .selection-mode button.titlebutton, button.suggested-action.flat { box-shadow: none; color: white; border-radius: 4px; background: linear-gradient(to right, #88c0d0 0%, #88c0d0 100%); } button.suggested-action:hover { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #88c0d0; text-shadow: none; } button.suggested-action:active, button.suggested-action:checked { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #88c0d0; text-shadow: none; } .selection-mode button.titlebutton:backdrop, button.suggested-action:backdrop, button.suggested-action.flat:backdrop { color: rgba(255, 255, 255, 0.4); outline-color: rgba(255, 255, 255, 0.3); background-color: #88c0d0; text-shadow: none; } .selection-mode button.titlebutton:backdrop label, button.suggested-action:backdrop label, button.suggested-action.flat:backdrop label { color: rgba(255, 255, 255, 0.5); } .selection-mode button.titlebutton:backdrop:active, .selection-mode button.titlebutton:backdrop:checked, button.suggested-action:backdrop:active, button.suggested-action:backdrop:checked, button.suggested-action.flat:backdrop:active, button.suggested-action.flat:backdrop:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(255, 255, 255, 0.3); background-color: #81a1c1; text-shadow: none; } .selection-mode button.titlebutton:backdrop:active label, .selection-mode button.titlebutton:backdrop:checked label, button.suggested-action:backdrop:active label, button.suggested-action:backdrop:checked label, button.suggested-action.flat:backdrop:active label, button.suggested-action.flat:backdrop:checked label { color: rgba(254, 254, 254, 0.7); } .selection-mode button.titlebutton:backdrop:disabled, button.suggested-action:backdrop:disabled, button.suggested-action.flat:backdrop:disabled { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #88c0d0; text-shadow: none; } .selection-mode button.titlebutton:backdrop:disabled label, button.suggested-action:backdrop:disabled label, button.suggested-action.flat:backdrop:disabled label { color: rgba(255, 255, 255, 0.5); } .selection-mode button.titlebutton:backdrop:disabled:active, .selection-mode button.titlebutton:backdrop:disabled:checked, button.suggested-action:backdrop:disabled:active, button.suggested-action:backdrop:disabled:checked, button.suggested-action.flat:backdrop:disabled:active, button.suggested-action.flat:backdrop:disabled:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(255, 255, 255, 0.3); background-color: #81a1c1; text-shadow: none; } .selection-mode button.titlebutton:backdrop, .selection-mode button.titlebutton:disabled, .selection-mode button.titlebutton:backdrop:disabled, button.suggested-action.flat:backdrop, button.suggested-action.flat:disabled, button.suggested-action.flat:backdrop:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: rgba(136, 192, 208, 0.8); } button.suggested-action:disabled { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #88c0d0; text-shadow: none; } button.suggested-action:disabled:active, button.suggested-action:disabled:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(255, 255, 255, 0.3); background-color: #88c0d0; text-shadow: none; } button.suggested-action:disabled:active label, button.suggested-action:disabled:checked label { color: rgba(254, 254, 254, 0.7); } .osd button.suggested-action { color: #d8dee9; border-color: #1f232b; background-color: rgba(136, 192, 208, 0.5); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } .osd button.suggested-action:hover { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(136, 192, 208, 0.7), rgba(136, 192, 208, 0.7)); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } .osd button.suggested-action:active:backdrop, .osd button.suggested-action:active, .osd button.suggested-action:checked:backdrop, .osd button.suggested-action:checked { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, #88c0d0, #88c0d0); background-clip: padding-box; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(216, 222, 233, 0.3); } .osd button.suggested-action:disabled:backdrop, .osd button.suggested-action:disabled { color: #808690; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(58, 63, 73, 0.5), rgba(58, 63, 73, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } .osd button.suggested-action:backdrop { color: #d8dee9; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(136, 192, 208, 0.5), rgba(136, 192, 208, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } button.destructive-action { border: none; box-shadow: none; color: white; border-radius: 4px; background: linear-gradient(to right, #bf616a, #bf616a); } button.destructive-action.flat { box-shadow: none; color: white; border-radius: 4px; background: linear-gradient(to right, #88c0d0 0%, #88c0d0 100%); } button.destructive-action:hover { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #b84f59; text-shadow: none; } button.destructive-action:active, button.destructive-action:checked { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #b84f59; text-shadow: none; } button.destructive-action:backdrop, button.destructive-action.flat:backdrop { color: rgba(255, 255, 255, 0.4); outline-color: rgba(255, 255, 255, 0.3); background-color: #b84f59; text-shadow: none; } button.destructive-action:backdrop label, button.destructive-action.flat:backdrop label { color: rgba(255, 255, 255, 0.5); } button.destructive-action:backdrop:active, button.destructive-action:backdrop:checked, button.destructive-action.flat:backdrop:active, button.destructive-action.flat:backdrop:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(255, 255, 255, 0.3); background-color: #81a1c1; text-shadow: none; } button.destructive-action:backdrop:active label, button.destructive-action:backdrop:checked label, button.destructive-action.flat:backdrop:active label, button.destructive-action.flat:backdrop:checked label { color: rgba(254, 254, 254, 0.7); } button.destructive-action:backdrop:disabled, button.destructive-action.flat:backdrop:disabled { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #b84f59; text-shadow: none; } button.destructive-action:backdrop:disabled label, button.destructive-action.flat:backdrop:disabled label { color: rgba(255, 255, 255, 0.5); } button.destructive-action:backdrop:disabled:active, button.destructive-action:backdrop:disabled:checked, button.destructive-action.flat:backdrop:disabled:active, button.destructive-action.flat:backdrop:disabled:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(255, 255, 255, 0.3); background-color: #81a1c1; text-shadow: none; } button.destructive-action.flat:backdrop, button.destructive-action.flat:disabled, button.destructive-action.flat:backdrop:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: rgba(184, 79, 89, 0.8); } button.destructive-action:disabled { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #b84f59; text-shadow: none; } button.destructive-action:disabled:active, button.destructive-action:disabled:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(255, 255, 255, 0.3); background-color: #b84f59; text-shadow: none; } button.destructive-action:disabled:active label, button.destructive-action:disabled:checked label { color: rgba(254, 254, 254, 0.7); } .osd button.destructive-action { color: #d8dee9; border-color: #1f232b; background-color: rgba(184, 79, 89, 0.5); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } .osd button.destructive-action:hover { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(184, 79, 89, 0.7), rgba(184, 79, 89, 0.7)); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } .osd button.destructive-action:active:backdrop, .osd button.destructive-action:active, .osd button.destructive-action:checked:backdrop, .osd button.destructive-action:checked { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, #b84f59, #b84f59); background-clip: padding-box; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(216, 222, 233, 0.3); } .osd button.destructive-action:disabled:backdrop, .osd button.destructive-action:disabled { color: #808690; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(58, 63, 73, 0.5), rgba(58, 63, 73, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } .osd button.destructive-action:backdrop { color: #d8dee9; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(184, 79, 89, 0.5), rgba(184, 79, 89, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } .stack-switcher > button { outline-offset: -3px; } .stack-switcher > button > label { padding-left: 6px; padding-right: 6px; } .stack-switcher > button > image { padding-left: 6px; padding-right: 6px; padding-top: 3px; padding-bottom: 3px; } .stack-switcher > button.text-button { padding-left: 10px; padding-right: 10px; } .stack-switcher > button.image-button { padding-left: 2px; padding-right: 2px; } .stack-switcher > button.needs-attention:active > label, .stack-switcher > button.needs-attention:active > image, .stack-switcher > button.needs-attention:checked > label, .stack-switcher > button.needs-attention:checked > image { animation: none; background-image: none; } .inline-toolbar button, .inline-toolbar button:backdrop { border-radius: 2px; border-width: 1px; } .primary-toolbar button, .primary-toolbar .raised button { -gtk-icon-shadow: none; } .primary-toolbar button:hover, .primary-toolbar button:focus, .primary-toolbar .raised button:hover, .primary-toolbar .raised button:focus { color: #fefefe; outline-color: rgba(254, 254, 254, 0.3); background-color: #81a1c1; text-shadow: none; } .stack-switcher > button.needs-attention > label, .stack-switcher > button.needs-attention > image, stacksidebar row.needs-attention > label { animation: needs_attention 150ms ease-in; background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#81a1c1), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.7692307692)), to(transparent)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 4px; } .stack-switcher > button.needs-attention > label:backdrop, .stack-switcher > button.needs-attention > image:backdrop, stacksidebar row.needs-attention > label:backdrop { background-size: 6px 6px, 0 0; } .stack-switcher > button.needs-attention > label:dir(rtl), .stack-switcher > button.needs-attention > image:dir(rtl), stacksidebar row.needs-attention > label:dir(rtl) { background-position: left 3px, left 4px; } toolbar button:hover { font-weight: normal; color: #3b4252; background-color: #e3e7ef; text-shadow: none; } toolbar button:active { font-weight: normal; color: #3b4252; background-color: #e3e7ef; text-shadow: none; } toolbar.osd .linked button { border-color: #1f232b; box-shadow: none; } .inline-toolbar toolbutton > button { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } .inline-toolbar toolbutton > button:hover { color: #fefefe; } .inline-toolbar toolbutton > button:active, .inline-toolbar toolbutton > button:checked { color: #f1f1f1; } .inline-toolbar toolbutton > button:disabled { color: #5c6371; } .inline-toolbar toolbutton > button:disabled:active, .inline-toolbar toolbutton > button:disabled:checked { color: rgba(241, 241, 241, 0.3); } .inline-toolbar toolbutton > button:backdrop { color: #5c6371; } .inline-toolbar toolbutton > button:backdrop:active, .inline-toolbar toolbutton > button:backdrop:checked { color: #f1f1f1; } .inline-toolbar toolbutton > button:backdrop:disabled { color: #5c6371; } .inline-toolbar toolbutton > button:backdrop:disabled:active, .inline-toolbar toolbutton > button:backdrop:disabled:checked { color: rgba(241, 241, 241, 0.3); } toolbar.inline-toolbar toolbutton > button.flat:backdrop, toolbar.inline-toolbar toolbutton:backdrop > button.flat:backdrop { border-color: transparent; box-shadow: none; } .inline-toolbar button, .inline-toolbar button:backdrop, .linked > button, .linked > button:hover, .linked > button:active, .linked > button:checked, .linked > button:backdrop, .linked:not(.vertical) > spinbutton:not(.vertical), .linked:not(.vertical) > entry, .linked > combobox > box > button.combo:dir(ltr), .linked > combobox > box > button.combo:dir(rtl) { border: 1px solid #c5cedd; border-radius: 0; border-right-style: none; box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.2); } .inline-toolbar button:first-child, .linked > button:first-child, combobox.linked button:nth-child(2):dir(rtl), .linked:not(.vertical) > combobox:first-child > box > button.combo, .linked:not(.vertical) > spinbutton:first-child:not(.vertical), .linked:not(.vertical) > entry:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .inline-toolbar button:last-child, .linked > button:last-child, combobox.linked button:nth-child(2):dir(ltr), .linked:not(.vertical) > combobox:last-child > box > button.combo, .linked:not(.vertical) > spinbutton:last-child:not(.vertical), .linked:not(.vertical) > entry:last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-right-style: solid; } .inline-toolbar button:only-child, .linked > button:only-child, .linked:not(.vertical) > combobox:only-child > box > button.combo, .linked:not(.vertical) > spinbutton:only-child:not(.vertical), .linked:not(.vertical) > entry:only-child { border-radius: 3px; border-style: solid; } .linked.vertical > button, .linked.vertical > button:hover, .linked.vertical > button:active, .linked.vertical > button:checked, .linked.vertical > button:backdrop, .linked.vertical > spinbutton:not(.vertical), .linked.vertical > entry, .linked.vertical > combobox > box > button.combo { border-style: solid solid none solid; border-radius: 0; } .linked.vertical > button:first-child, .linked.vertical > combobox:first-child > box > button.combo, .linked.vertical > spinbutton:first-child:not(.vertical), .linked.vertical > entry:first-child { border-top-left-radius: 3px; border-top-right-radius: 3px; } .linked.vertical > button:last-child, .linked.vertical > combobox:last-child > box > button.combo, .linked.vertical > spinbutton:last-child:not(.vertical), .linked.vertical > entry:last-child { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-style: solid; } .linked.vertical > button:only-child, .linked.vertical > combobox:only-child > box > button.combo, .linked.vertical > spinbutton:only-child:not(.vertical), .linked.vertical > entry:only-child { border-radius: 3px; border-style: solid; } modelbutton.flat, popover.background checkbutton, popover.background radiobutton, .menuitem.button.flat, modelbutton.flat:backdrop, popover.background checkbutton:backdrop, popover.background radiobutton:backdrop, modelbutton.flat:backdrop:hover, popover.background checkbutton:backdrop:hover, popover.background radiobutton:backdrop:hover, .menuitem.button.flat:backdrop, .menuitem.button.flat:backdrop:hover, calendar.button, calendar.button:hover, calendar.button:backdrop, calendar.button:disabled, button:link, button:visited, button:link:hover, button:link:active, button:link:checked, button:visited:hover, button:visited:active, button:visited:checked, .scale-popup button:hover, .scale-popup button:backdrop:hover, .scale-popup button:backdrop:disabled, .scale-popup button:backdrop { background-color: transparent; background-image: none; border-color: transparent; box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } /* menu buttons */ modelbutton.flat, popover.background checkbutton, popover.background radiobutton, .menuitem.button.flat { min-height: 26px; padding-left: 5px; padding-right: 5px; border-radius: 3px; outline-offset: -2px; } modelbutton.flat:hover, popover.background checkbutton:hover, popover.background radiobutton:hover, .menuitem.button.flat:hover { background-color: #d1d8e5; } modelbutton.flat check:last-child, popover.background checkbutton check:last-child, popover.background radiobutton check:last-child, modelbutton.flat radio:last-child, popover.background checkbutton radio:last-child, popover.background radiobutton radio:last-child, .menuitem.button.flat check:last-child, .menuitem.button.flat radio:last-child { margin-left: 8px; } modelbutton.flat check:first-child, popover.background checkbutton check:first-child, popover.background radiobutton check:first-child, modelbutton.flat radio:first-child, popover.background checkbutton radio:first-child, popover.background radiobutton radio:first-child, .menuitem.button.flat check:first-child, .menuitem.button.flat radio:first-child { margin-right: 8px; } modelbutton.flat arrow, popover.background checkbutton arrow, popover.background radiobutton arrow { background: none; } modelbutton.flat arrow:hover, popover.background checkbutton arrow:hover, popover.background radiobutton arrow:hover { background: none; } modelbutton.flat arrow.left, popover.background checkbutton arrow.left, popover.background radiobutton arrow.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } modelbutton.flat arrow.right, popover.background checkbutton arrow.right, popover.background radiobutton arrow.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } button.color { padding: 4px; } button.color colorswatch:only-child { box-shadow: none; } button.color colorswatch:only-child, button.color colorswatch:only-child overlay { border-radius: 0; } button.color colorswatch:only-child:disabled, button.color colorswatch:only-child:backdrop { box-shadow: none; } notebook button, list button, .view button, iconview button, popover button { box-shadow: none; } notebook button:backdrop, list button:backdrop, .view button:backdrop, iconview button:backdrop, popover button:backdrop { box-shadow: none; } notebook .linked > button, list .linked > button, .view .linked > button, iconview .linked > button, popover .linked > button { box-shadow: none; } /************ * Calendar * ***********/ calendar { color: #3b4252; border: 1px solid #c5cedd; } calendar:selected { border-radius: 3px; } calendar.header { border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-radius: 0; } calendar.header:backdrop { border-color: rgba(0, 0, 0, 0.1); } calendar.button { color: rgba(59, 66, 82, 0.45); } calendar.button:hover { color: #3b4252; } calendar.button:backdrop { color: rgba(138, 144, 158, 0.45); } calendar.button:disabled { color: rgba(138, 144, 158, 0.45); } calendar:indeterminate, calendar:indeterminate:backdrop { color: alpha(currentColor,0.55); } calendar.highlight, calendar.highlight:backdrop { font-size: smaller; color: #3b4252; } calendar:backdrop { color: #5c6371; border-color: #c7d0de; } /************************* * Check and Radio Items * *************************/ check { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked.png"), url("../assets/checkbox-unchecked@2.png")); -gtk-icon-shadow: none; } radio { -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked.png"), url("../assets/radio-unchecked@2.png")); -gtk-icon-shadow: none; } check:hover { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-hover.png"), url("../assets/checkbox-unchecked-hover@2.png")); -gtk-icon-shadow: none; } radio:hover { -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked-hover.png"), url("../assets/radio-unchecked-hover@2.png")); -gtk-icon-shadow: none; } check:active { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-active.png"), url("../assets/checkbox-unchecked-active@2.png")); -gtk-icon-shadow: none; } radio:active { -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked-active.png"), url("../assets/radio-unchecked-active@2.png")); -gtk-icon-shadow: none; } check:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-backdrop.png"), url("../assets/checkbox-unchecked-backdrop@2.png")); -gtk-icon-shadow: none; } radio:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked-backdrop.png"), url("../assets/radio-unchecked-backdrop@2.png")); -gtk-icon-shadow: none; } check:disabled { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-insensitive.png"), url("../assets/checkbox-unchecked-insensitive@2.png")); -gtk-icon-shadow: none; } radio:disabled { -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked-insensitive.png"), url("../assets/radio-unchecked-insensitive@2.png")); -gtk-icon-shadow: none; } check:disabled:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-insensitive.png"), url("../assets/checkbox-unchecked-insensitive@2.png")); -gtk-icon-shadow: none; } radio:disabled:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked-insensitive.png"), url("../assets/radio-unchecked-insensitive@2.png")); -gtk-icon-shadow: none; } check:checked { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked.png"), url("../assets/checkbox-checked@2.png")); -gtk-icon-shadow: none; } radio:checked { -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked.png"), url("../assets/radio-checked@2.png")); -gtk-icon-shadow: none; } check:checked:hover { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-hover.png"), url("../assets/checkbox-checked-hover@2.png")); -gtk-icon-shadow: none; } radio:checked:hover { -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-hover.png"), url("../assets/radio-checked-hover@2.png")); -gtk-icon-shadow: none; } check:checked:active { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-active.png"), url("../assets/checkbox-checked-active@2.png")); -gtk-icon-shadow: none; } radio:checked:active { -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-active.png"), url("../assets/radio-checked-active@2.png")); -gtk-icon-shadow: none; } check:checked:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-backdrop.png"), url("../assets/checkbox-checked-backdrop@2.png")); -gtk-icon-shadow: none; } radio:checked:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-backdrop.png"), url("../assets/radio-checked-backdrop@2.png")); -gtk-icon-shadow: none; } check:checked:disabled { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-insensitive.png"), url("../assets/checkbox-checked-insensitive@2.png")); -gtk-icon-shadow: none; } radio:checked:disabled { -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-insensitive.png"), url("../assets/radio-checked-insensitive@2.png")); -gtk-icon-shadow: none; } check:checked:disabled:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-insensitive.png"), url("../assets/checkbox-checked-insensitive@2.png")); -gtk-icon-shadow: none; } radio:checked:disabled:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-insensitive.png"), url("../assets/radio-checked-insensitive@2.png")); -gtk-icon-shadow: none; } check:indeterminate { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-mixed.png"), url("../assets/checkbox-mixed@2.png")); -gtk-icon-shadow: none; } radio:indeterminate { -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed.png"), url("../assets/radio-mixed@2.png")); -gtk-icon-shadow: none; } check:indeterminate:hover { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-mixed-hover.png"), url("../assets/checkbox-mixed-hover@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:hover { -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed-hover.png"), url("../assets/radio-mixed-hover@2.png")); -gtk-icon-shadow: none; } check:indeterminate:active { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-mixed-active.png"), url("../assets/checkbox-mixed-active@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:active { -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed-active.png"), url("../assets/radio-mixed-active@2.png")); -gtk-icon-shadow: none; } check:indeterminate:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-mixed-backdrop.png"), url("../assets/checkbox-mixed-backdrop@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed-backdrop.png"), url("../assets/radio-mixed-backdrop@2.png")); -gtk-icon-shadow: none; } check:indeterminate:disabled { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-mixed-insensitive.png"), url("../assets/checkbox-mixed-insensitive@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:disabled { -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed-insensitive.png"), url("../assets/radio-mixed-insensitive@2.png")); -gtk-icon-shadow: none; } check:indeterminate:disabled:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-mixed-insensitive.png"), url("../assets/checkbox-mixed-insensitive@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:disabled:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed-insensitive.png"), url("../assets/radio-mixed-insensitive@2.png")); -gtk-icon-shadow: none; } check:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked.png"), url("../assets/checkbox-unchecked@2.png")); -gtk-icon-shadow: none; } radio:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-unchecked.png"), url("../assets/selected-radio-unchecked@2.png")); -gtk-icon-shadow: none; } check:hover:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked.png"), url("../assets/checkbox-unchecked@2.png")); -gtk-icon-shadow: none; } radio:hover:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-unchecked.png"), url("../assets/selected-radio-unchecked@2.png")); -gtk-icon-shadow: none; } check:active:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked.png"), url("../assets/checkbox-unchecked@2.png")); -gtk-icon-shadow: none; } radio:active:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-unchecked.png"), url("../assets/selected-radio-unchecked@2.png")); -gtk-icon-shadow: none; } check:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked.png"), url("../assets/checkbox-unchecked@2.png")); -gtk-icon-shadow: none; } radio:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-unchecked.png"), url("../assets/selected-radio-unchecked@2.png")); -gtk-icon-shadow: none; } check:disabled:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked.png"), url("../assets/checkbox-unchecked@2.png")); -gtk-icon-shadow: none; } radio:disabled:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-unchecked.png"), url("../assets/selected-radio-unchecked@2.png")); -gtk-icon-shadow: none; } check:disabled:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked.png"), url("../assets/checkbox-unchecked@2.png")); -gtk-icon-shadow: none; } radio:disabled:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-unchecked.png"), url("../assets/selected-radio-unchecked@2.png")); -gtk-icon-shadow: none; } check:checked:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked.png"), url("../assets/checkbox-checked@2.png")); -gtk-icon-shadow: none; } radio:checked:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-checked.png"), url("../assets/selected-radio-checked@2.png")); -gtk-icon-shadow: none; } check:checked:hover:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked.png"), url("../assets/checkbox-checked@2.png")); -gtk-icon-shadow: none; } radio:checked:hover:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-checked.png"), url("../assets/selected-radio-checked@2.png")); -gtk-icon-shadow: none; } check:checked:active:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked.png"), url("../assets/checkbox-checked@2.png")); -gtk-icon-shadow: none; } radio:checked:active:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-checked.png"), url("../assets/selected-radio-checked@2.png")); -gtk-icon-shadow: none; } check:checked:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked.png"), url("../assets/checkbox-checked@2.png")); -gtk-icon-shadow: none; } radio:checked:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-checked.png"), url("../assets/selected-radio-checked@2.png")); -gtk-icon-shadow: none; } check:checked:disabled:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked.png"), url("../assets/checkbox-checked@2.png")); -gtk-icon-shadow: none; } radio:checked:disabled:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-checked.png"), url("../assets/selected-radio-checked@2.png")); -gtk-icon-shadow: none; } check:checked:disabled:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked.png"), url("../assets/checkbox-checked@2.png")); -gtk-icon-shadow: none; } radio:checked:disabled:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-checked.png"), url("../assets/selected-radio-checked@2.png")); -gtk-icon-shadow: none; } check:indeterminate:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-checkbox-mixed.png"), url("../assets/selected-checkbox-mixed@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-mixed.png"), url("../assets/selected-radio-mixed@2.png")); -gtk-icon-shadow: none; } check:indeterminate:hover:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-checkbox-mixed.png"), url("../assets/selected-checkbox-mixed@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:hover:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-mixed.png"), url("../assets/selected-radio-mixed@2.png")); -gtk-icon-shadow: none; } check:indeterminate:active:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-checkbox-mixed.png"), url("../assets/selected-checkbox-mixed@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:active:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-mixed.png"), url("../assets/selected-radio-mixed@2.png")); -gtk-icon-shadow: none; } check:indeterminate:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-checkbox-mixed.png"), url("../assets/selected-checkbox-mixed@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-mixed.png"), url("../assets/selected-radio-mixed@2.png")); -gtk-icon-shadow: none; } check:indeterminate:disabled:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-checkbox-mixed.png"), url("../assets/selected-checkbox-mixed@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:disabled:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-mixed.png"), url("../assets/selected-radio-mixed@2.png")); -gtk-icon-shadow: none; } check:indeterminate:disabled:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-checkbox-mixed.png"), url("../assets/selected-checkbox-mixed@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:disabled:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-mixed.png"), url("../assets/selected-radio-mixed@2.png")); -gtk-icon-shadow: none; } .view.content-view check, iconview.content-view check, .view.content-view.check, iconview.content-view.check { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox-unchecked.png"), url("../assets/checkbox-unchecked@2.png")); -gtk-icon-shadow: none; } .view.content-view radio, iconview.content-view radio, .view.content-view.radio, iconview.content-view.radio { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio-unchecked.png"), url("../assets/radio-unchecked@2.png")); -gtk-icon-shadow: none; } .view.content-view check:hover, iconview.content-view check:hover, .view.content-view.check:hover, iconview.content-view.check:hover { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox-unchecked-hover.png"), url("../assets/checkbox-unchecked-hover@2.png")); -gtk-icon-shadow: none; } .view.content-view radio:hover, iconview.content-view radio:hover, .view.content-view.radio:hover, iconview.content-view.radio:hover { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio-unchecked-hover.png"), url("../assets/radio-unchecked-hover@2.png")); -gtk-icon-shadow: none; } .view.content-view check:active, iconview.content-view check:active, .view.content-view.check:active, iconview.content-view.check:active { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox-unchecked-active.png"), url("../assets/checkbox-unchecked-active@2.png")); -gtk-icon-shadow: none; } .view.content-view radio:active, iconview.content-view radio:active, .view.content-view.radio:active, iconview.content-view.radio:active { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio-unchecked-active.png"), url("../assets/radio-unchecked-active@2.png")); -gtk-icon-shadow: none; } .view.content-view check:backdrop, iconview.content-view check:backdrop, .view.content-view.check:backdrop, iconview.content-view.check:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox-unchecked-backdrop.png"), url("../assets/checkbox-unchecked-backdrop@2.png")); -gtk-icon-shadow: none; } .view.content-view radio:backdrop, iconview.content-view radio:backdrop, .view.content-view.radio:backdrop, iconview.content-view.radio:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio-unchecked-backdrop.png"), url("../assets/radio-unchecked-backdrop@2.png")); -gtk-icon-shadow: none; } .view.content-view check:disabled, iconview.content-view check:disabled, .view.content-view.check:disabled, iconview.content-view.check:disabled { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox-unchecked-insensitive.png"), url("../assets/checkbox-unchecked-insensitive@2.png")); -gtk-icon-shadow: none; } .view.content-view radio:disabled, iconview.content-view radio:disabled, .view.content-view.radio:disabled, iconview.content-view.radio:disabled { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio-unchecked-insensitive.png"), url("../assets/radio-unchecked-insensitive@2.png")); -gtk-icon-shadow: none; } .view.content-view check:disabled:backdrop, iconview.content-view check:disabled:backdrop, .view.content-view.check:disabled:backdrop, iconview.content-view.check:disabled:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox-unchecked-backdrop-insensitive.png"), url("../assets/checkbox-unchecked-backdrop-insensitive@2.png")); -gtk-icon-shadow: none; } .view.content-view radio:disabled:backdrop, iconview.content-view radio:disabled:backdrop, .view.content-view.radio:disabled:backdrop, iconview.content-view.radio:disabled:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio-unchecked-backdrop-insensitive.png"), url("../assets/radio-unchecked-backdrop-insensitive@2.png")); -gtk-icon-shadow: none; } checkbutton.text-button, radiobutton.text-button { padding: 2px 0; outline-offset: 0; } checkbutton.text-button label:not(:only-child):first-child, radiobutton.text-button label:not(:only-child):first-child { margin-left: 4px; } checkbutton.text-button label:not(:only-child):last-child, radiobutton.text-button label:not(:only-child):last-child { margin-right: 4px; } check, radio { margin: 0 4px; min-height: 16px; min-width: 16px; border: none; } menu menuitem check, menu menuitem radio { margin: 0; } menu menuitem check, menu menuitem check:hover, menu menuitem check:disabled, menu menuitem radio, menu menuitem radio:hover, menu menuitem radio:disabled { min-height: 14px; min-width: 14px; background-image: none; background-color: transparent; box-shadow: none; -gtk-icon-shadow: none; color: inherit; border-color: currentColor; animation: none; } /***************** * Color Chooser * *****************/ colorswatch, colorswatch:drop(active) { border-style: none; } colorswatch.top { border-top-left-radius: 5.5px; border-top-right-radius: 5.5px; } colorswatch.top overlay { border-top-left-radius: 5px; border-top-right-radius: 5px; } colorswatch.bottom { border-bottom-left-radius: 5.5px; border-bottom-right-radius: 5.5px; } colorswatch.bottom overlay { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } colorswatch.left, colorswatch:first-child:not(.top) { border-top-left-radius: 5.5px; border-bottom-left-radius: 5.5px; } colorswatch.left overlay, colorswatch:first-child:not(.top) overlay { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } colorswatch.right, colorswatch:last-child:not(.bottom) { border-top-right-radius: 5.5px; border-bottom-right-radius: 5.5px; } colorswatch.right overlay, colorswatch:last-child:not(.bottom) overlay { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } colorswatch.dark overlay { color: #fefefe; } colorswatch.dark overlay:hover { border-color: rgba(0, 0, 0, 0.8); } colorswatch.dark overlay:backdrop { color: #fefefe; } colorswatch.light overlay { color: #3b4252; } colorswatch.light overlay:hover { border-color: rgba(0, 0, 0, 0.5); } colorswatch.light overlay:backdrop { color: #5c6371; } colorswatch:drop(active) { box-shadow: none; } colorswatch:drop(active).light overlay { border-color: #a3be8c; box-shadow: inset 0 0 0 2px #91b175, inset 0 0 0 1px #a3be8c; } colorswatch:drop(active).dark overlay { border-color: #a3be8c; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.3), inset 0 0 0 1px #a3be8c; } colorswatch overlay { box-shadow: inset 0 2px 2px -3px rgba(0, 0, 0, 0.7); border: 1px solid rgba(0, 0, 0, 0.3); } colorswatch overlay:hover { box-shadow: inset 0 1px rgba(255, 255, 255, 0.3); } colorswatch overlay:backdrop, colorswatch overlay:backdrop:hover { border-color: rgba(0, 0, 0, 0.3); box-shadow: none; } colorswatch#add-color-button { border-radius: 5px 5px 0 0; } colorswatch#add-color-button:only-child { border-radius: 5px; } colorswatch#add-color-button overlay { font-weight: normal; color: #3b4252; background-color: #e3e7ef; text-shadow: none; } colorswatch#add-color-button overlay:hover { color: #3b4252; outline-color: rgba(59, 66, 82, 0.3); background-color: #e5e9f0; text-shadow: none; } colorswatch#add-color-button overlay:backdrop { color: #5c6371; outline-color: rgba(59, 66, 82, 0.3); background-color: #e2e6ee; text-shadow: none; } colorswatch:disabled { opacity: 0.5; } colorswatch:disabled overlay { border-color: rgba(0, 0, 0, 0.6); box-shadow: none; } row:selected colorswatch { box-shadow: 0 0 0 2px #fefefe; } colorswatch#editor-color-sample { border-radius: 4px; } colorswatch#editor-color-sample overlay { border-radius: 4.5px; } colorchooser .popover.osd { border-radius: 5px; } /************** * ComboBoxes * **************/ combobox arrow { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); min-height: 16px; min-width: 16px; } combobox:drop(active) { box-shadow: none; } /*********** * Dialogs * ***********/ messagedialog .titlebar:not(headerbar) { background-color: rgba(216, 222, 233, 0.95); } messagedialog .titlebar { min-height: 20px; background-image: none; background-color: rgba(216, 222, 233, 0.95); border-style: none; border-top-left-radius: 4px; border-top-right-radius: 4px; } messagedialog.csd.background { background-color: rgba(216, 222, 233, 0.95); color: #3b4252; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } messagedialog.csd .dialog-action-area button { padding: 10px 14px; border-radius: 0; border-left-style: solid; border-right-style: none; border-bottom-style: none; background-color: transparent; color: #3b4252; box-shadow: none; } messagedialog.csd .dialog-action-area button:hover { background-color: rgba(129, 161, 193, 0.9); color: white; } messagedialog.csd .dialog-action-area button:first-child { border-left-style: none; border-bottom-left-radius: 4px; } messagedialog.csd .dialog-action-area button:last-child { border-bottom-right-radius: 4px; } messagedialog.csd .dialog-action-area button.destructive-action, messagedialog.csd .dialog-action-area button.suggested-action { color: white; } filechooser .dialog-action-box { border-top: 1px solid #c5cedd; } filechooser .dialog-action-box:backdrop { border-top-color: #c7d0de; } filechooser #pathbarbox { border-bottom: 1px solid #d8dee9; } filechooserbutton:drop(active) { box-shadow: none; border-color: transparent; } /**************** * Text Entries * ****************/ spinbutton:not(.vertical), entry { min-height: 28px; padding-left: 8px; padding-right: 8px; border: 1px solid; border-radius: 3px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #3b4252; border-color: #c5cedd; background-color: #e5e9f0; } spinbutton:not(.vertical) image.left, entry image.left { padding-left: 0; padding-right: 6px; } spinbutton:not(.vertical) image.right, entry image.right { padding-left: 6px; padding-right: 0; } spinbutton:not(.vertical) undershoot.left, entry undershoot.left { background-color: transparent; background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); padding-left: 1px; background-size: 1px 10px; background-repeat: repeat-y; background-origin: content-box; background-position: left center; border: none; box-shadow: none; } spinbutton:not(.vertical) undershoot.right, entry undershoot.right { background-color: transparent; background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); padding-right: 1px; background-size: 1px 10px; background-repeat: repeat-y; background-origin: content-box; background-position: right center; border: none; box-shadow: none; } spinbutton.flat:focus:not(.vertical), spinbutton.flat:not(.vertical), entry.flat:focus, entry.flat { min-height: 0; padding: 2px; background-image: none; border-color: transparent; box-shadow: none; border-radius: 0; } spinbutton:focus:not(.vertical), entry:focus { border-color: #81a1c1; } spinbutton:disabled:not(.vertical), entry:disabled { color: #8a909e; border-color: #c5cedd; background-color: #dde2ec; box-shadow: none; } spinbutton:backdrop:not(.vertical), entry:backdrop { color: #5c6371; border-color: #c7d0de; background-color: #e2e6ee; box-shadow: none; transition: 200ms ease-out; } spinbutton:backdrop:disabled:not(.vertical), entry:backdrop:disabled { color: #a7b5cd; border-color: #c7d0de; background-color: #dde2ec; box-shadow: none; } spinbutton.error:not(.vertical), entry.error { color: #3b4252; border-color: #c5cedd; background-color: #e5e9f0; color: #bf616a; border-color: #bf616a; } spinbutton.error:focus:not(.vertical), entry.error:focus { border-color: #bf616a; } spinbutton.error:selected:focus:not(.vertical), spinbutton.error:selected:not(.vertical), entry.error:selected:focus, entry.error:selected { background-color: #bf616a; } spinbutton.warning:not(.vertical), entry.warning { color: #3b4252; border-color: #c5cedd; background-color: #e5e9f0; color: #d08770; border-color: #d08770; } spinbutton.warning:focus:not(.vertical), entry.warning:focus { border-color: #d08770; } spinbutton.warning:selected:focus:not(.vertical), spinbutton.warning:selected:not(.vertical), entry.warning:selected:focus, entry.warning:selected { background-color: #d08770; } spinbutton:not(.vertical) image, entry image { color: #5d6372; } spinbutton:not(.vertical) image:hover, entry image:hover { color: #3b4252; } spinbutton:not(.vertical) image:active, entry image:active { color: #81a1c1; } spinbutton:not(.vertical) image:backdrop, entry image:backdrop { color: #9ca1ae; } spinbutton:drop(active):focus:not(.vertical), spinbutton:drop(active):not(.vertical), entry:drop(active):focus, entry:drop(active) { border-color: #a3be8c; box-shadow: inset 0 0 0 1px #a3be8c; } .osd spinbutton:not(.vertical), .osd entry { color: #d8dee9; border-color: #1f232b; background-color: rgba(31, 35, 43, 0.5); box-shadow: none; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; } .osd spinbutton:focus:not(.vertical), .osd entry:focus { color: #d8dee9; border-color: #81a1c1; background-color: rgba(31, 35, 43, 0.5); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; } .osd spinbutton:backdrop:not(.vertical), .osd entry:backdrop { color: #d8dee9; border-color: #1f232b; background-color: rgba(31, 35, 43, 0.5); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } .osd spinbutton:disabled:not(.vertical), .osd entry:disabled { color: #808690; border-color: #1f232b; background-color: rgba(58, 63, 73, 0.5); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } spinbutton:not(.vertical) progress, entry progress { margin: 2px -6px; background-color: transparent; background-image: none; border-radius: 0; border-width: 0 0 2px; border-color: #81a1c1; border-style: solid; box-shadow: none; } spinbutton:not(.vertical) progress:backdrop, entry progress:backdrop { background-color: transparent; } .linked:not(.vertical) > spinbutton:focus:not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:focus:not(.vertical) + button, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + combobox > box > button.combo, .linked:not(.vertical) > entry:focus + spinbutton:not(.vertical), .linked:not(.vertical) > entry:focus + button, .linked:not(.vertical) > entry:focus + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + entry, .linked:not(.vertical) > entry:focus + entry { border-left-color: #81a1c1; } .linked:not(.vertical) > spinbutton:focus:not(.vertical), .linked:not(.vertical) > entry:focus { border-color: #81a1c1; } .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + combobox > box > button.combo, .linked:not(.vertical) > entry:drop(active) + spinbutton:not(.vertical), .linked:not(.vertical) > entry:drop(active) + button, .linked:not(.vertical) > entry:drop(active) + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + entry, .linked:not(.vertical) > entry:drop(active) + entry { border-left-color: #a3be8c; } .linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):not(.vertical), .linked.vertical > entry:not(:disabled) + entry:not(:disabled), .linked.vertical > entry:not(:disabled) + spinbutton:not(:disabled):not(.vertical) { border-top-color: #dbe1ea; background-image: linear-gradient(to bottom, #e5e9f0, #e5e9f0); } .linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled):backdrop, .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):backdrop:not(.vertical), .linked.vertical > entry:not(:disabled) + entry:not(:disabled):backdrop, .linked.vertical > entry:not(:disabled) + spinbutton:not(:disabled):backdrop:not(.vertical) { border-top-color: #dadfe9; background-image: linear-gradient(to bottom, #e2e6ee, #e2e6ee); } .linked.vertical > spinbutton:disabled:not(.vertical) + spinbutton:disabled:not(.vertical), .linked.vertical > spinbutton:disabled:not(.vertical) + entry:disabled, .linked.vertical > entry:disabled + spinbutton:disabled:not(.vertical), .linked.vertical > entry:disabled + entry:disabled { border-top-color: #dbe1ea; } .linked.vertical > spinbutton:not(.vertical) + spinbutton:focus:not(:only-child):not(.vertical), .linked.vertical > spinbutton:not(.vertical) + entry:focus:not(:only-child), .linked.vertical > entry + spinbutton:focus:not(:only-child):not(.vertical), .linked.vertical > entry + entry:focus:not(:only-child) { border-top-color: #81a1c1; } .linked.vertical > spinbutton:not(.vertical) + spinbutton:drop(active):not(:only-child):not(.vertical), .linked.vertical > spinbutton:not(.vertical) + entry:drop(active):not(:only-child), .linked.vertical > entry + spinbutton:drop(active):not(:only-child):not(.vertical), .linked.vertical > entry + entry:drop(active):not(:only-child) { border-top-color: #a3be8c; } .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + spinbutton:not(.vertical), .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + entry, .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + button, .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + combobox > box > button.combo, .linked.vertical > entry:focus:not(:only-child) + spinbutton:not(.vertical), .linked.vertical > entry:focus:not(:only-child) + entry, .linked.vertical > entry:focus:not(:only-child) + button, .linked.vertical > entry:focus:not(:only-child) + combobox > box > button.combo { border-top-color: #81a1c1; } .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + spinbutton:not(.vertical), .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + entry, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + button, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + combobox > box > button.combo, .linked.vertical > entry:drop(active):not(:only-child) + spinbutton:not(.vertical), .linked.vertical > entry:drop(active):not(:only-child) + entry, .linked.vertical > entry:drop(active):not(:only-child) + button, .linked.vertical > entry:drop(active):not(:only-child) + combobox > box > button.combo { border-top-color: #a3be8c; } treeview entry:focus:dir(rtl), treeview entry:focus:dir(ltr) { background-color: #e5e9f0; transition-property: color, background; } treeview entry.flat, treeview entry { border-radius: 0; background-image: none; background-color: #e5e9f0; } treeview entry.flat:focus, treeview entry:focus { border-color: #81a1c1; } /************* * Expanders * *************/ expander arrow { min-width: 16px; min-height: 16px; -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } expander arrow:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); } expander arrow:hover { color: #818ca5; } expander arrow:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } /**************** * Floating Bar * ****************/ .floating-bar { background-color: #d8dee9; border-width: 1px; border-style: solid solid none; border-color: #c5cedd; border-radius: 3px 3px 0 0; box-shadow: inset 0 1px rgba(255, 255, 255, 0.2); } .floating-bar.bottom.left { border-left-style: none; border-top-left-radius: 0; } .floating-bar.bottom.right { border-right-style: none; border-top-right-radius: 0; } .floating-bar > button { padding: 4px; } .floating-bar:backdrop { background-color: #d8dee9; border-color: #c7d0de; } /********** * Frames * **********/ frame > border, .frame { box-shadow: none; margin: 0; padding: 0; border-radius: 0; border: 1px solid #c5cedd; } frame > border.flat, .frame.flat { border-style: none; } frame > border:backdrop, .frame:backdrop { border-color: #c7d0de; } actionbar > revealer > box { padding: 6px; border-top: 1px solid #c5cedd; } actionbar > revealer > box:backdrop { border-color: #c7d0de; } scrolledwindow viewport.frame { border-style: none; } scrolledwindow overshoot.top { background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#a4b2cb), to(rgba(164, 178, 203, 0))), -gtk-gradient(radial, center top, 0, center top, 0.6, from(rgba(59, 66, 82, 0.13)), to(rgba(59, 66, 82, 0))); background-size: 100% 5%, 100% 100%; background-repeat: no-repeat; background-position: center top; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.top:backdrop { background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#c7d0de), to(rgba(199, 208, 222, 0))); background-size: 100% 5%; background-repeat: no-repeat; background-position: center top; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.bottom { background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#a4b2cb), to(rgba(164, 178, 203, 0))), -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(rgba(59, 66, 82, 0.13)), to(rgba(59, 66, 82, 0))); background-size: 100% 5%, 100% 100%; background-repeat: no-repeat; background-position: center bottom; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.bottom:backdrop { background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#c7d0de), to(rgba(199, 208, 222, 0))); background-size: 100% 5%; background-repeat: no-repeat; background-position: center bottom; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.left { background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#a4b2cb), to(rgba(164, 178, 203, 0))), -gtk-gradient(radial, left center, 0, left center, 0.6, from(rgba(59, 66, 82, 0.13)), to(rgba(59, 66, 82, 0))); background-size: 5% 100%, 100% 100%; background-repeat: no-repeat; background-position: left center; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.left:backdrop { background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#c7d0de), to(rgba(199, 208, 222, 0))); background-size: 5% 100%; background-repeat: no-repeat; background-position: left center; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.right { background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#a4b2cb), to(rgba(164, 178, 203, 0))), -gtk-gradient(radial, right center, 0, right center, 0.6, from(rgba(59, 66, 82, 0.13)), to(rgba(59, 66, 82, 0))); background-size: 5% 100%, 100% 100%; background-repeat: no-repeat; background-position: right center; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.right:backdrop { background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#c7d0de), to(rgba(199, 208, 222, 0))); background-size: 5% 100%; background-repeat: no-repeat; background-position: right center; background-color: transparent; border: none; box-shadow: none; } scrolledwindow undershoot.top { background-color: transparent; background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); padding-top: 1px; background-size: 10px 1px; background-repeat: repeat-x; background-origin: content-box; background-position: center top; border: none; box-shadow: none; } scrolledwindow undershoot.bottom { background-color: transparent; background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); padding-bottom: 1px; background-size: 10px 1px; background-repeat: repeat-x; background-origin: content-box; background-position: center bottom; border: none; box-shadow: none; } scrolledwindow undershoot.left { background-color: transparent; background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); padding-left: 1px; background-size: 1px 10px; background-repeat: repeat-y; background-origin: content-box; background-position: left center; border: none; box-shadow: none; } scrolledwindow undershoot.right { background-color: transparent; background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); padding-right: 1px; background-size: 1px 10px; background-repeat: repeat-y; background-origin: content-box; background-position: right center; border: none; box-shadow: none; } scrolledwindow junction { border-color: transparent; border-image: linear-gradient(to bottom, #c5cedd 1px, transparent 1px) 0 0 0 1/0 1px stretch; background-color: #dfe4ed; } scrolledwindow junction:dir(rtl) { border-image-slice: 0 1 0 0; } scrolledwindow junction:backdrop { border-image-source: linear-gradient(to bottom, #c7d0de 1px, transparent 1px); background-color: #ced6e3; transition: 200ms ease-out; } separator { background: rgba(0, 0, 0, 0.1); } /************ * Popovers * ************/ GraniteWidgetsPopOver { -GraniteWidgetsPopOver-arrow-width: 21; -GraniteWidgetsPopOver-arrow-height: 10; -GraniteWidgetsPopOver-border-radius: 8px; -GraniteWidgetsPopOver-border-width: 0; -GraniteWidgetsPopOver-shadow-size: 12; border: 1px solid #e5e9f0; background: #e5e9f0; color: #3b4252; } GraniteWidgetsPopOver .button { background-image: none; background: none; border: none; } GraniteWidgetsPopOver .button:active, GraniteWidgetsPopOver .button:active:hover { color: #81a1c1; } GraniteWidgetsPopOver > .frame { border: none; } GraniteWidgetsPopOver .sidebar.view, GraniteWidgetsPopOver iconview.sidebar { border: none; background: none; } GraniteWidgetsStaticNotebook .frame { border: none; } .popover_bg { background-color: #e5e9f0; background-image: none; border: 1px solid #e5e9f0; color: #3b4252; } /*********** * Welcome * **********/ GraniteWidgetsWelcome { background-color: #e5e9f0; } GraniteWidgetsWelcome GtkLabel { color: #3b4252; } GraniteWidgetsWelcome .h1, GraniteWidgetsWelcome .h3 { color: rgba(59, 66, 82, 0.8); } /************** * Source List * ***************/ .source-list { -GtkTreeView-horizontal-separator: 1px; -GtkTreeView-vertical-separator: 6px; background-color: #d8dee9; border: solid #c5cedd; color: #3b4252; border-right-width: 1px; } .source-list .category-expander { color: transparent; } .source-list .badge { background-image: none; background-color: rgba(0, 0, 0, 0.4); color: #d8dee9; border-radius: 10px; padding: 0 6px; margin: 0 3px; border-width: 0; } .source-list .badge:selected:backdrop, .source-list .badge:selected:hover:backdrop { background-color: rgba(0, 0, 0, 0.2); color: #c8d0e0; } .source-list row, .source-list .list-row { border: none; padding: 0; } .source-list row > GtkLabel, .source-list row > label, .source-list .list-row > GtkLabel, .source-list .list-row > label { padding-left: 6px; padding-right: 6px; } /************** * Text Styles * **************/ .h1 { font-size: 24px; } .h2 { font-weight: 300; font-size: 18px; } .h3 { font-size: 11px; } .h4, .category-label { font-size: 12px; padding: 6px; color: rgba(59, 66, 82, 0.3); font-weight: bold; text-shadow: 0 1px rgba(255, 255, 255, 0.2); } /************** * Storage Bar * **************/ .storage-bar .trough { border: none; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2); background-image: none; background-color: transparent; padding: 8px 6px; } .storage-bar .fill-block { background-color: #ebcb8b; border: none; box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); transition: all 200ms ease-in-out; padding: 8px 6px; } .storage-bar .fill-block:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-left-width: 1px; box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1), inset 1px 0 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); } .storage-bar .fill-block:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1), inset -1px 0 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); } .storage-bar .fill-block.empty-block { background-color: #e5e9f0; } .storage-bar .fill-block.app { background-color: #5e81ac; } .storage-bar .fill-block.audio { background-color: #d08770; } .storage-bar .fill-block.photo { background-color: #bf616a; } .storage-bar .fill-block.video { background-color: #b48ead; } .storage-bar .fill-block .legend { padding: 12px; border-radius: 4px; } /*************** * Header bars * ***************/ .titlebar:not(headerbar), .titlebar, headerbar { padding: 0 13px; min-height: 34px; background: #2b313c; color: #d8dee9; border-radius: 0; } .titlebar:backdrop, headerbar:backdrop { border-color: #c7d0de; transition: 200ms ease-out; } .titlebar .title, headerbar .title { font-weight: bold; padding-left: 12px; padding-right: 12px; } .titlebar .subtitle, headerbar .subtitle { font-size: smaller; padding-left: 12px; padding-right: 12px; } .titlebar entry, headerbar entry { min-height: 24px; } .titlebar button, headerbar button { color: #d8dee9; border-radius: 4px; text-shadow: none; box-shadow: none; border: 1px solid #1f232b; background-color: #343b48; min-height: 20px; margin-top: 5px; margin-bottom: 5px; box-shadow: none; } .titlebar button.image-button, headerbar button.image-button { padding: 3px 4px; } .titlebar button.appmenu, headerbar button.appmenu { background: transparent; } .titlebar button.appmenu:backdrop, headerbar button.appmenu:backdrop { background: transparent; } .titlebar button:hover, headerbar button:hover { color: #fff; text-shadow: none; background-color: rgba(129, 161, 193, 0.8); border-color: #1f232b; } .titlebar button:active, .titlebar button:checked, headerbar button:active, headerbar button:checked { color: #fff; outline-color: rgba(255, 255, 255, 0.3); background-color: #81a1c1; text-shadow: none; border-color: #1f232b; } .titlebar button:backdrop, .titlebar button:disabled, .titlebar button:backdrop:disabled, headerbar button:backdrop, headerbar button:disabled, headerbar button:backdrop:disabled { color: rgba(216, 222, 233, 0.2); background-color: #282d37; border-color: #1f232b; text-shadow: none; box-shadow: none; } .titlebar button:backdrop:hover, .titlebar button:backdrop:active, .titlebar button:backdrop:checked, headerbar button:backdrop:hover, headerbar button:backdrop:active, headerbar button:backdrop:checked { color: #81a1c1; background-color: rgba(129, 161, 193, 0.6); border-color: #1f232b; text-shadow: none; box-shadow: none; } .titlebar button.suggested-action, headerbar button.suggested-action { box-shadow: none; border: none; background-image: linear-gradient(to right, #88c0d0 0%, #88c0d0 100%); } .titlebar button.suggested-action:disabled, .titlebar button.suggested-action:disabled:backdrop, .titlebar button.suggested-action:backdrop, headerbar button.suggested-action:disabled, headerbar button.suggested-action:disabled:backdrop, headerbar button.suggested-action:backdrop { border: none; background-image: linear-gradient(to right, #88c0d0 0%, #88c0d0 100%); } .titlebar button.suggested-action:disabled:hover, .titlebar button.suggested-action:disabled:active, .titlebar button.suggested-action:disabled:checked, .titlebar button.suggested-action:disabled:backdrop:hover, .titlebar button.suggested-action:disabled:backdrop:active, .titlebar button.suggested-action:disabled:backdrop:checked, .titlebar button.suggested-action:backdrop:hover, .titlebar button.suggested-action:backdrop:active, .titlebar button.suggested-action:backdrop:checked, headerbar button.suggested-action:disabled:hover, headerbar button.suggested-action:disabled:active, headerbar button.suggested-action:disabled:checked, headerbar button.suggested-action:disabled:backdrop:hover, headerbar button.suggested-action:disabled:backdrop:active, headerbar button.suggested-action:disabled:backdrop:checked, headerbar button.suggested-action:backdrop:hover, headerbar button.suggested-action:backdrop:active, headerbar button.suggested-action:backdrop:checked { border: none; background-image: linear-gradient(to right, #88c0d0 0%, #88c0d0 100%); } .titlebar button.suggested-action, headerbar button.suggested-action { font-weight: bold; min-height: 14px; margin-top: 5px; margin-bottom: 5px; border-radius: 4px; font-weight: normal; color: white; background-color: #e3e7ef; text-shadow: none; box-shadow: none; } .titlebar button.suggested-action:hover, headerbar button.suggested-action:hover { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #88c0d0; text-shadow: none; } .titlebar button.suggested-action:active, headerbar button.suggested-action:active { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #88c0d0; text-shadow: none; } .titlebar button.suggested-action:disabled, headerbar button.suggested-action:disabled { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #88c0d0; text-shadow: none; } .titlebar button.suggested-action:disabled label, headerbar button.suggested-action:disabled label { color: rgba(255, 255, 255, 0.5); } .titlebar button.suggested-action:backdrop, headerbar button.suggested-action:backdrop { color: rgba(255, 255, 255, 0.4); outline-color: rgba(255, 255, 255, 0.3); background-color: #88c0d0; text-shadow: none; border-radius: 3px; } .titlebar button.suggested-action:backdrop:disabled, headerbar button.suggested-action:backdrop:disabled { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #88c0d0; text-shadow: none; } .titlebar button.destructive-action, headerbar button.destructive-action { font-weight: bold; min-height: 14px; margin-top: 5px; margin-bottom: 5px; border-radius: 4px; font-weight: normal; color: white; background-color: #e3e7ef; text-shadow: none; box-shadow: none; } .titlebar button.destructive-action:hover, headerbar button.destructive-action:hover { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #b84f59; text-shadow: none; } .titlebar button.destructive-action:active, headerbar button.destructive-action:active { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #b84f59; text-shadow: none; } .titlebar button.destructive-action:disabled, headerbar button.destructive-action:disabled { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #b84f59; text-shadow: none; } .titlebar button.destructive-action:disabled label, headerbar button.destructive-action:disabled label { color: rgba(255, 255, 255, 0.5); } .titlebar button.destructive-action:backdrop, headerbar button.destructive-action:backdrop { color: rgba(255, 255, 255, 0.4); outline-color: rgba(255, 255, 255, 0.3); background-color: #b84f59; text-shadow: none; border-radius: 3px; } .titlebar button.destructive-action:backdrop:disabled, headerbar button.destructive-action:backdrop:disabled { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #b84f59; text-shadow: none; } .titlebar button.titlebutton, headerbar button.titlebutton { color: transparent; box-shadow: none; border: none; background-color: transparent; background-repeat: no-repeat; } .titlebar button.titlebutton:hover, .titlebar button.titlebutton:active, .titlebar button.titlebutton:checked, .titlebar button.titlebutton:backdrop, .titlebar button.titlebutton:backdrop:hover, .titlebar button.titlebutton *, headerbar button.titlebutton:hover, headerbar button.titlebutton:active, headerbar button.titlebutton:checked, headerbar button.titlebutton:backdrop, headerbar button.titlebutton:backdrop:hover, headerbar button.titlebutton * { color: transparent; box-shadow: none; background-color: transparent; } .titlebar .linked > button, .titlebar .path-bar-box button, .titlebar headerbar .linked > button, headerbar .path-bar-box .titlebar button, .titlebar .linked > button:hover, .titlebar .linked > button:backdrop, .titlebar headerbar .linked > button, headerbar .path-bar-box .titlebar button, headerbar .titlebar .linked > button, headerbar .linked > button, headerbar .titlebar .path-bar-box button, .titlebar .path-bar-box headerbar button, headerbar .path-bar-box button, headerbar .titlebar .linked > button:hover, .titlebar headerbar .linked > button:hover, headerbar .titlebar .linked > button:backdrop, .titlebar headerbar .linked > button:backdrop, headerbar .linked > button:hover, headerbar .linked > button:backdrop { border-radius: 0; border-right-style: none; box-shadow: none; margin: 5px 0px; min-height: 20px; } .titlebar .linked > button:first-child, .titlebar .path-bar-box button:first-child, .titlebar headerbar .linked > button:first-child, headerbar .path-bar-box .titlebar button:first-child, headerbar .titlebar .linked > button:first-child, headerbar .linked > button:first-child, .titlebar .path-bar-box headerbar button:first-child, headerbar .path-bar-box button:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .titlebar .linked > button:last-child, .titlebar .path-bar-box button:last-child, .titlebar headerbar .linked > button:last-child, headerbar .path-bar-box .titlebar button:last-child, headerbar .titlebar .linked > button:last-child, headerbar .linked > button:last-child, .titlebar .path-bar-box headerbar button:last-child, headerbar .path-bar-box button:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-right-style: solid; } .titlebar .linked > button:only-child, .titlebar .path-bar-box button:only-child, .titlebar headerbar .linked > button:only-child, headerbar .path-bar-box .titlebar button:only-child, headerbar .titlebar .linked > button:only-child, headerbar .linked > button:only-child, .titlebar .path-bar-box headerbar button:only-child, headerbar .path-bar-box button:only-child { border-radius: 4px; border-style: solid; } .titlebar .linked > button:active, .titlebar headerbar .linked > button:active, .titlebar .path-bar-box button:active, headerbar .path-bar-box .titlebar button:active, .titlebar .linked > button:checked, .titlebar headerbar .linked > button:checked, .titlebar .path-bar-box button:checked, headerbar .path-bar-box .titlebar button:checked, headerbar .titlebar .linked > button:active, headerbar .linked > button:active, .titlebar .path-bar-box headerbar button:active, headerbar .path-bar-box button:active, headerbar .titlebar .linked > button:checked, headerbar .linked > button:checked, .titlebar .path-bar-box headerbar button:checked, headerbar .path-bar-box button:checked { color: #fff; outline-color: rgba(255, 255, 255, 0.3); background-color: #81a1c1; text-shadow: none; } .titlebar .linked > button:active:backdrop, .titlebar headerbar .linked > button:active:backdrop, .titlebar .path-bar-box button:active:backdrop, headerbar .path-bar-box .titlebar button:active:backdrop, .titlebar .linked > button:checked:backdrop, .titlebar headerbar .linked > button:checked:backdrop, .titlebar .path-bar-box button:checked:backdrop, headerbar .path-bar-box .titlebar button:checked:backdrop, headerbar .titlebar .linked > button:active:backdrop, headerbar .linked > button:active:backdrop, .titlebar .path-bar-box headerbar button:active:backdrop, headerbar .path-bar-box button:active:backdrop, headerbar .titlebar .linked > button:checked:backdrop, headerbar .linked > button:checked:backdrop, .titlebar .path-bar-box headerbar button:checked:backdrop, headerbar .path-bar-box button:checked:backdrop { background-color: rgba(129, 161, 193, 0.6); color: #81a1c1; } .titlebar .linked > button:active:backdrop label, .titlebar .path-bar-box button:active:backdrop label, headerbar .path-bar-box .titlebar button:active:backdrop label, .titlebar .linked > button:checked:backdrop label, .titlebar .path-bar-box button:checked:backdrop label, headerbar .path-bar-box .titlebar button:checked:backdrop label, headerbar .linked > button:active:backdrop label, .titlebar .path-bar-box headerbar button:active:backdrop label, headerbar .path-bar-box button:active:backdrop label, headerbar .linked > button:checked:backdrop label, .titlebar .path-bar-box headerbar button:checked:backdrop label, headerbar .path-bar-box button:checked:backdrop label { color: #81a1c1; } .titlebar .linked:not(.vertical) > entry, headerbar .linked:not(.vertical) > entry { border-color: #1f232b; box-shadow: none; background: #2f3642; color: #d8dee9; caret-color: #d8dee9; } .titlebar .linked:not(.vertical) > entry *, headerbar .linked:not(.vertical) > entry * { color: #d8dee9; } .titlebar .linked:not(.vertical) > entry:focus, headerbar .linked:not(.vertical) > entry:focus { border-color: #81a1c1; } .titlebar .path-bar-box .dim-label, .titlebar .path-bar-box label.separator, .titlebar .path-bar-box .subtitle, headerbar .path-bar-box .dim-label, headerbar .path-bar-box label.separator, headerbar .path-bar-box .subtitle { color: transparent; margin-right: -6px; } .titlebar .path-bar-box button:last-child, headerbar .path-bar-box button:last-child { margin-left: -1px; border-radius: 0px; } .titlebar .path-bar-box button:last-child:active, .titlebar .path-bar-box button:last-child:checked, headerbar .path-bar-box button:last-child:active, headerbar .path-bar-box button:last-child:checked { border-radius: 0px 4px 4px 0px; } .titlebar .path-bar-box button:first-child, headerbar .path-bar-box button:first-child { border-radius: 4px 0px 0px 4px; } .titlebar .path-bar-box button:first-child:active, .titlebar .path-bar-box button:first-child:checked, headerbar .path-bar-box button:first-child:active, headerbar .path-bar-box button:first-child:checked { border-radius: 4px; } .titlebar .path-bar-box widget > .text-button:last-child, headerbar .path-bar-box widget > .text-button:last-child { border-radius: 0px 4px 4px 0px; color: #fff; outline-color: rgba(255, 255, 255, 0.3); background-color: #81a1c1; text-shadow: none; } .titlebar .path-bar-box widget > .text-button:last-child:backdrop, headerbar .path-bar-box widget > .text-button:last-child:backdrop { background: rgba(129, 161, 193, 0.6); } .titlebar .path-bar-box widget > .text-button:last-child:backdrop, .titlebar .path-bar-box widget > .text-button:last-child:backdrop label, headerbar .path-bar-box widget > .text-button:last-child:backdrop, headerbar .path-bar-box widget > .text-button:last-child:backdrop label { color: #81a1c1; } .titlebar .path-bar-box widget > .text-button:last-child:only-child, headerbar .path-bar-box widget > .text-button:last-child:only-child { border-radius: 4px; } .titlebar .path-buttons-box, headerbar .path-buttons-box { background-color: #d8dee9; border: 1px solid #c5cedd; min-height: 20px; margin-top: 5px; margin-bottom: 5px; color: #d8dee9; border-radius: 4px; text-shadow: none; box-shadow: none; border: 1px solid #1f232b; background-color: #343b48; border-radius: 4px 0px 0px 4px; } .titlebar .path-buttons-box .dim-label, .titlebar .path-buttons-box label.separator, .titlebar .path-buttons-box .subtitle, headerbar .path-buttons-box .dim-label, headerbar .path-buttons-box label.separator, headerbar .path-buttons-box .subtitle { color: transparent; margin-right: -5px; } .titlebar .path-buttons-box button > .horizontal > .dim-label, .titlebar .path-buttons-box button > .horizontal > label.separator, .titlebar .path-buttons-box button > .horizontal > .subtitle, headerbar .path-buttons-box button > .horizontal > .dim-label, headerbar .path-buttons-box button > .horizontal > label.separator, headerbar .path-buttons-box button > .horizontal > .subtitle { color: #d8dee9; padding: 3px 12px; margin: 0; border-right: 1px solid #1f232b; } .titlebar .path-buttons-box button > .horizontal > image.dim-label, .titlebar .path-buttons-box button > .horizontal > image.subtitle, headerbar .path-buttons-box button > .horizontal > image.dim-label, headerbar .path-buttons-box button > .horizontal > image.subtitle { padding: 3px 0px 3px 12px; border-right: none; } .titlebar .path-buttons-box button, headerbar .path-buttons-box button { background: transparent; border: none; margin: 0; padding: 0; } .titlebar .path-buttons-box .current-dir label, headerbar .path-buttons-box .current-dir label { padding: 3px 12px; } .titlebar .path-buttons-box .current-dir label, .titlebar .path-buttons-box .current-dir image, headerbar .path-buttons-box .current-dir label, headerbar .path-buttons-box .current-dir image { color: #fff; outline-color: rgba(255, 255, 255, 0.3); background-color: #81a1c1; text-shadow: none; } .titlebar .path-buttons-box button.current-dir:only-child image, headerbar .path-buttons-box button.current-dir:only-child image { margin-right: -6px; padding: 0px 6px 0px 12px; border-radius: 4px 0px 0px 4px; } .selection-mode.titlebar button:backdrop.flat:active, .selection-mode.titlebar button:backdrop.flat:checked, .selection-mode.titlebar button:backdrop:active, .selection-mode.titlebar button:backdrop:checked, headerbar.selection-mode button:backdrop.flat:active, headerbar.selection-mode button:backdrop.flat:checked, headerbar.selection-mode button:backdrop:active, headerbar.selection-mode button:backdrop:checked { border-color: #5f88b0; } .selection-mode.titlebar button:backdrop.flat:active label, .selection-mode.titlebar button:backdrop.flat:checked label, .selection-mode.titlebar button:backdrop:active label, .selection-mode.titlebar button:backdrop:checked label, headerbar.selection-mode button:backdrop.flat:active label, headerbar.selection-mode button:backdrop.flat:checked label, headerbar.selection-mode button:backdrop:active label, headerbar.selection-mode button:backdrop:checked label { color: rgba(129, 161, 193, 0.6); } .tiled .titlebar, .maximized .titlebar, .tiled headerbar.titlebar, .maximized headerbar.titlebar { box-shadow: none; } .tiled .titlebar:backdrop, .tiled .titlebar, .maximized .titlebar:backdrop, .maximized .titlebar, .tiled headerbar:backdrop, .tiled headerbar, .maximized headerbar:backdrop, .maximized headerbar { border-radius: 0; } .default-decoration.titlebar, headerbar.default-decoration { padding: 5px 4px; min-height: 20px; } .default-decoration.titlebar button.titlebutton, headerbar.default-decoration button.titlebutton { min-height: 20px; min-width: 20px; margin: 0; padding: 0; } headerbar entry, headerbar spinbutton, headerbar separator { margin-top: 5px; margin-bottom: 5px; } headerbar switch { margin-top: 5px; margin-bottom: 5px; } headerbar separator { background: transparent; } headerbar viewswitcher > box.horizontal > button.radio, headerbar switcher > box.horizontal > button.radio { margin: 0; padding: 0; border-radius: 0; } headerbar viewswitcher > box.horizontal > button.radio image, headerbar switcher > box.horizontal > button.radio image { margin-left: 7px; } headerbar viewswitcher > box.horizontal > button.radio label, headerbar switcher > box.horizontal > button.radio label { margin-right: 7px; } .background:not(.tiled):not(.maximized) .titlebar { box-shadow: inset 0 1px rgba(255, 255, 255, 0.2); } .background:not(.tiled):not(.maximized) .titlebar:backdrop, .background:not(.tiled):not(.maximized) .titlebar { border-top-left-radius: 4px; border-top-right-radius: 4px; } window:not(.tiled):not(.maximized) separator:first-child + headerbar:backdrop, window:not(.tiled):not(.maximized) separator:first-child + headerbar, window:not(.tiled):not(.maximized) headerbar:first-child:backdrop, window:not(.tiled):not(.maximized) headerbar:first-child { border-top-left-radius: 4px; } window:not(.tiled):not(.maximized) headerbar:last-child:backdrop, window:not(.tiled):not(.maximized) headerbar:last-child { border-top-right-radius: 4px; } window.csd > .titlebar:not(headerbar) { padding: 0; background-color: transparent; background-image: none; border-style: none; border-color: transparent; box-shadow: none; } .titlebar:not(headerbar) > separator, .titlebar:not(headerbar) > separator:backdrop { background: #2b313c; } /************** * GtkInfoBar * **************/ .info, .warning, .question, .error, infobar { text-shadow: none; color: #3b4252; background-color: #d8dee9; border-bottom: 1px solid #b7c2d7; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.15); } .info, .warning, .question, .error { text-shadow: none; color: #fefefe; border: none; } .info .label, .warning .label, .question .label, .error .label { color: #fefefe; } .info .label:backdrop, .warning .label:backdrop, .question .label:backdrop, .error .label:backdrop { color: #fefefe; } .info button, .warning button, .question button, .error button { border-radius: 2px; border: none; background: rgba(229, 233, 240, 0.98); color: #3b4252; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2); } .info button .label, .warning button .label, .question button .label, .error button .label { color: #3b4252; } .info button:active, .warning button:active, .question button:active, .error button:active { background: #e5e9f0; color: #3b4252; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); } .info button:active:backdrop, .warning button:active:backdrop, .question button:active:backdrop, .error button:active:backdrop { background: rgba(229, 233, 240, 0.8); color: rgba(59, 66, 82, 0.5); box-shadow: none; } .info button:hover, .warning button:hover, .question button:hover, .error button:hover, .info button:focus, .warning button:focus, .question button:focus, .error button:focus { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); } .info button:disabled, .warning button:disabled, .question button:disabled, .error button:disabled { background: rgba(229, 233, 240, 0.6); color: rgba(59, 66, 82, 0.5); box-shadow: none; } .info button:disabled:backdrop, .warning button:disabled:backdrop, .question button:disabled:backdrop, .error button:disabled:backdrop { background: rgba(229, 233, 240, 0.5); color: rgba(59, 66, 82, 0.5); box-shadow: none; } .info button:backdrop, .warning button:backdrop, .question button:backdrop, .error button:backdrop { background: rgba(229, 233, 240, 0.8); color: rgba(59, 66, 82, 0.5); box-shadow: none; } .info { background-color: #8fbcbb; } .info:backdrop { background-color: #afcfce; color: #fefefe; } .warning { background-color: #d08770; } .warning:backdrop { background-color: #dda796; color: #fefefe; } .question { background-color: #88c0d0; } .question:backdrop { background-color: #add3de; color: #fefefe; } .error { background-color: #bf616a; } .error:backdrop { background-color: #ce858c; color: #fefefe; } /************* * Level Bar * *************/ levelbar block { min-width: 32px; min-height: 6px; } levelbar.vertical block { min-width: 6px; min-height: 32px; } levelbar:backdrop { transition: 200ms ease-out; } levelbar trough { padding: 3px; border-radius: 3px; background-color: rgba(255, 255, 255, 0.8); box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); } levelbar trough:backdrop { background-color: rgba(255, 255, 255, 0.6); box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); } levelbar.horizontal.discrete block { margin: 0 1px; } levelbar.vertical.discrete block { margin: 1px 0; } levelbar block { border-radius: 2px; } levelbar block:backdrop { box-shadow: none; } levelbar block.low { background-color: #d08770; } levelbar block.low:backdrop { border-color: #d08770; } levelbar block.high, levelbar block:not(.empty) { background-color: #88c0d0; } levelbar block.high:backdrop, levelbar block:not(.empty):backdrop { border-color: #88c0d0; } levelbar block.full { background-color: #88c0d0; } levelbar block.full:backdrop { border-color: #88c0d0; } levelbar block.empty { background-color: rgba(0, 0, 0, 0.14); box-shadow: none; } /********* * Links * *********/ *:link, button:link, button:visited { color: #5e81ac; } *:link:visited, button:visited { color: rgba(94, 129, 172, 0.5); } *:selected *:link:visited, *:selected button:visited:link, *:selected button:visited { color: #ccd9e6; } *:link:hover, button:hover:link, button:hover:visited { color: #809bbd; } *:selected *:link:hover, *:selected button:hover:link, *:selected button:hover:visited { color: #f2f5f8; } *:link:active, button:active:link, button:active:visited { color: #5e81ac; } *:selected *:link:active, *:selected button:active:link, *:selected button:active:visited { color: #e5ebf2; } *:link:backdrop:backdrop:hover, button:backdrop:backdrop:hover:link, button:backdrop:backdrop:hover:visited, *:link:backdrop:backdrop:hover:selected, button:backdrop:backdrop:hover:selected:link, button:backdrop:backdrop:hover:selected:visited, *:link:backdrop, button:backdrop:link, button:backdrop:visited { color: #81a1c1; } *:link:selected, button:selected:link, button:selected:visited, *:selected *:link, *:selected button:link, *:selected button:visited { color: #e5ebf2; } button:link, button:visited { text-shadow: none; } button:link:hover, button:link:active, button:link:checked, button:visited:hover, button:visited:active, button:visited:checked { text-shadow: none; } button:link > label, button:visited > label { text-decoration-line: underline; } /********* * Lists * *********/ list { color: #3b4252; background-color: #e5e9f0; border-color: #c5cedd; } list:backdrop { background-color: #e2e6ee; border-color: #c7d0de; } row { background-color: transparent; border-color: #c5cedd; } row:hover { transition: none; } row:backdrop { transition: 200ms ease-out; } row.activatable.has-open-popup, row.activatable:hover { background-color: rgba(59, 66, 82, 0.05); } row.activatable:active { box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); } row.activatable:backdrop:hover { background-color: transparent; } row.activatable button.flat { background-color: transparent; } row.activatable:selected:active { box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); } row.activatable:selected.has-open-popup, row.activatable:selected:hover { background-color: rgba(129, 161, 193, 0.5); } row.activatable:selected:backdrop { background-color: rgba(129, 161, 193, 0.6); } /********* * Menus * *********/ menubar, .menubar { background-color: #2b313c; color: #d8dee9; -GtkWidget-window-dragging: true; padding: 0px; box-shadow: inset 0 -1px rgba(0, 0, 0, 0.1); } menubar > menuitem, .menubar > menuitem { min-height: 16px; padding: 4px 8px; } menubar > menuitem:hover, .menubar > menuitem:hover { box-shadow: inset 0 -3px #81a1c1; } menubar > menuitem:disabled, .menubar > menuitem:disabled { color: #8a909e; box-shadow: none; } menu, .menu, .context-menu { margin: 4px; padding: 2px 0px; background: #e5e9f0; border: 1px solid #c5cedd; border-radius: 5px; font: initial; } .csd menu, .csd .menu, .csd .context-menu { border: none; } menu:backdrop, .menu:backdrop, .context-menu:backdrop { background-color: #e2e6ee; } menu menuitem, .menu menuitem, .context-menu menuitem { min-height: 17px; min-width: 40px; padding: 4px 6px; text-shadow: none; } menu menuitem:hover, .menu menuitem:hover, .context-menu menuitem:hover { color: #fefefe; background-color: #81a1c1; } menu menuitem:disabled, .menu menuitem:disabled, .context-menu menuitem:disabled { color: #8a909e; } menu menuitem:disabled:backdrop, .menu menuitem:disabled:backdrop, .context-menu menuitem:disabled:backdrop { color: #a7b5cd; } menu menuitem:backdrop, menu menuitem:backdrop:hover, .menu menuitem:backdrop, .menu menuitem:backdrop:hover, .context-menu menuitem:backdrop, .context-menu menuitem:backdrop:hover { color: #8a909e; background-color: transparent; } menu menuitem arrow, .menu menuitem arrow, .context-menu menuitem arrow { min-height: 16px; min-width: 16px; } menu menuitem arrow:dir(ltr), .menu menuitem arrow:dir(ltr), .context-menu menuitem arrow:dir(ltr) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); margin-left: 10px; } menu menuitem arrow:dir(rtl), .menu menuitem arrow:dir(rtl), .context-menu menuitem arrow:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); margin-right: 10px; } menu menuitem label:dir(rtl), menu menuitem label:dir(ltr), .menu menuitem label:dir(rtl), .menu menuitem label:dir(ltr), .context-menu menuitem label:dir(rtl), .context-menu menuitem label:dir(ltr) { color: inherit; } menuitem accelerator { color: alpha(currentColor,0.55); } menuitem check, menuitem radio { min-height: 16px; min-width: 16px; } menuitem check:dir(ltr), menuitem radio:dir(ltr) { margin-right: 7px; } menuitem check:dir(rtl), menuitem radio:dir(rtl) { margin-left: 7px; } .csd.popup { background-color: transparent; } /******** * Misc * ********/ .content-view { background-color: #c1cbdc; } .content-view:hover { -gtk-icon-effect: highlight; } .content-view:backdrop { background-color: #c1cbdc; } .osd .scale-popup button.flat { border-style: none; border-radius: 5px; } .scale-popup button:hover { background-color: rgba(59, 66, 82, 0.1); border-radius: 5px; } /************ * Assistant * *************/ assistant { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } assistant .sidebar { background-color: #e5e9f0; border-top: 1px solid #c5cedd; border-bottom-left-radius: 4px; } assistant .sidebar:backdrop { background-color: #e2e6ee; border-color: #c7d0de; } assistant.csd .sidebar { border-top-style: none; } assistant .sidebar GtkLabel, assistant .sidebar label { padding: 6px 12px; } assistant .sidebar GtkLabel.highlight, assistant .sidebar label.highlight { background-color: #b9bfcb; } /************* * Notebooks * *************/ notebook > header { padding: 1px; border-color: #c5cedd; border-width: 1px; background-color: #d5dbe7; } notebook > header:backdrop { border-color: #c7d0de; background-color: #d8dee9; } notebook > header tabs { margin: 0px; } notebook > header.top { border-bottom-style: solid; } notebook > header.top > tabs { margin-bottom: -2px; } notebook > header.top > tabs > tab:backdrop { box-shadow: none; } notebook > header.top > tabs > tab:checked { background-color: #e5e9f0; } notebook > header.top > tabs > tab:checked:hover { background-color: #e5e9f0; } notebook > header.bottom { border-top-style: solid; } notebook > header.bottom > tabs { margin-top: -2px; } notebook > header.bottom > tabs > tab:backdrop { box-shadow: none; } notebook > header.bottom > tabs > tab:checked { background-color: #e5e9f0; box-shadow: -1px 0 0 #c5cedd, 0px 1px 0 #c5cedd, 1px 0 0 #c5cedd; } notebook > header.left { border-right-style: solid; } notebook > header.left > tabs { margin-right: -2px; } notebook > header.left > tabs > tab:backdrop { box-shadow: none; } notebook > header.left > tabs > tab:checked { background-color: #e5e9f0; box-shadow: 0px 1px 0 #c5cedd, 0px -1px 0 #c5cedd, 0px 1px 0 #c5cedd; } notebook > header.right { border-left-style: solid; } notebook > header.right > tabs { margin-left: -2px; } notebook > header.right > tabs > tab:backdrop { box-shadow: none; } notebook > header.right > tabs > tab:checked { background-color: #e5e9f0; box-shadow: 0px 1px 0 #c5cedd, 0px -1px 0 #c5cedd, 1px 0 0 #c5cedd; } notebook > header.top > tabs > arrow { border-top-style: none; } notebook > header.bottom > tabs > arrow { border-bottom-style: none; } notebook > header.top > tabs > arrow, notebook > header.bottom > tabs > arrow { margin-left: -5px; margin-right: -5px; padding-left: 4px; padding-right: 4px; } notebook > header.top > tabs > arrow.down, notebook > header.bottom > tabs > arrow.down { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } notebook > header.top > tabs > arrow.up, notebook > header.bottom > tabs > arrow.up { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } notebook > header.left > tabs > arrow { border-left-style: none; } notebook > header.right > tabs > arrow { border-right-style: none; } notebook > header.left > tabs > arrow, notebook > header.right > tabs > arrow { margin-top: -5px; margin-bottom: -5px; padding-top: 4px; padding-bottom: 4px; } notebook > header.left > tabs > arrow.down, notebook > header.right > tabs > arrow.down { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow.up { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } notebook > header > tabs > arrow { min-height: 14px; min-width: 14px; border-radius: 0; } notebook > header > tabs > arrow:hover:not(:active):not(:backdrop) { background-clip: padding-box; background-image: none; background-color: rgba(255, 255, 255, 0.3); border-color: transparent; box-shadow: none; } notebook > header > tabs > arrow:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } notebook > header tab { min-height: 24px; min-width: 24px; padding: 1px 12px; outline-offset: -5px; color: #8a909e; font-weight: normal; border-width: 1px; border-color: transparent; } notebook > header tab:hover { color: #636978; } notebook > header tab:hover.reorderable-page { border-color: rgba(197, 206, 221, 0.3); background-color: rgba(216, 222, 233, 0.2); } notebook > header tab:backdrop { color: #a9afbc; } notebook > header tab:backdrop.reorderable-page { border-color: transparent; background-color: transparent; } notebook > header tab:checked { color: #3b4252; box-shadow: -1px 0 0 #c5cedd, 0px -1px 0 #c5cedd, 1px 0 0 #c5cedd; } notebook > header tab:checked.reorderable-page { border-color: rgba(197, 206, 221, 0.5); background-color: rgba(216, 222, 233, 0.5); } notebook > header tab:checked.reorderable-page:hover { background-color: rgba(216, 222, 233, 0.7); } notebook > header tab:backdrop:checked { color: #8a909e; } notebook > header tab:backdrop:checked.reorderable-page { border-color: #c7d0de; background-color: #e2e6ee; } notebook > header tab button.flat { padding: 0; margin-top: 4px; margin-bottom: 4px; min-width: 20px; min-height: 20px; } notebook > header tab button.flat:hover { background: transparent; box-shadow: none; color: #bf616a; } notebook > header tab button.flat, notebook > header tab button.flat:backdrop { background: transparent; border: none; color: alpha(currentColor,0.3); } notebook > header tab button.flat:last-child { margin-left: 4px; margin-right: -4px; } notebook > header tab button.flat:first-child { margin-left: -4px; margin-right: 4px; } notebook > header.top tabs, notebook > header.bottom tabs { padding-left: 0px; padding-right: 0px; } notebook > header.top tabs:not(:only-child), notebook > header.bottom tabs:not(:only-child) { margin-left: 0.5px; margin-right: 0.5px; } notebook > header.top tabs:not(:only-child):first-child, notebook > header.bottom tabs:not(:only-child):first-child { margin-left: -1px; } notebook > header.top tabs:not(:only-child):last-child, notebook > header.bottom tabs:not(:only-child):last-child { margin-right: -1px; } notebook > header.top tabs tab, notebook > header.bottom tabs tab { margin-left: 0.5px; margin-right: 0.5px; } notebook > header.top tabs tab.reorderable-page, notebook > header.bottom tabs tab.reorderable-page { border-style: none solid; } notebook > header.left tabs, notebook > header.right tabs { padding-top: 4px; padding-bottom: 4px; } notebook > header.left tabs:not(:only-child), notebook > header.right tabs:not(:only-child) { margin-top: 3px; margin-bottom: 3px; } notebook > header.left tabs:not(:only-child):first-child, notebook > header.right tabs:not(:only-child):first-child { margin-top: -1px; } notebook > header.left tabs:not(:only-child):last-child, notebook > header.right tabs:not(:only-child):last-child { margin-bottom: -1px; } notebook > header.left tabs tab, notebook > header.right tabs tab { margin-top: 4px; margin-bottom: 4px; } notebook > header.left tabs tab.reorderable-page, notebook > header.right tabs tab.reorderable-page { border-style: solid none; } notebook > header.top tab { padding-bottom: 1px; } notebook > header.bottom tab { padding-top: 1px; } notebook > stack:not(:only-child) { background-color: #e5e9f0; } notebook > stack:not(:only-child):backdrop { background-color: #e2e6ee; } /********* * Paned * *********/ paned > separator { min-width: 1px; min-height: 1px; -gtk-icon-source: none; border-style: none; background-color: transparent; background-image: image(#c5cedd); background-size: 1px 1px; } paned > separator:selected { background-image: image(#81a1c1); } paned > separator:backdrop { background-image: image(#c7d0de); } paned > separator.wide { min-width: 5px; min-height: 5px; background-color: #d8dee9; background-image: image(#c5cedd), image(#c5cedd); background-size: 1px 1px, 1px 1px; } paned > separator.wide:backdrop { background-color: #d8dee9; background-image: image(#c7d0de), image(#c7d0de); } paned.horizontal > separator { background-repeat: repeat-y; } paned.horizontal > separator:dir(ltr) { margin: 0 -8px 0 0; padding: 0 8px 0 0; background-position: left; } paned.horizontal > separator:dir(rtl) { margin: 0 0 0 -8px; padding: 0 0 0 8px; background-position: right; } paned.horizontal > separator.wide { margin: 0; padding: 0; background-repeat: repeat-y, repeat-y; background-position: left, right; } paned.vertical > separator { margin: 0 0 -8px 0; padding: 0 0 8px 0; background-repeat: repeat-x; background-position: top; } paned.vertical > separator.wide { margin: 0; padding: 0; background-repeat: repeat-x, repeat-x; background-position: bottom, top; } /************ * Pathbars * ************/ .path-bar button.text-button, .path-bar button.image-button, .path-bar button { padding-left: 4px; padding-right: 4px; } .path-bar button.text-button.image-button label { padding-left: 0; padding-right: 0; } .path-bar button.text-button.image-button label:last-child, .path-bar button label:last-child { padding-right: 8px; } .path-bar button.text-button.image-button label:first-child, .path-bar button label:first-child { padding-left: 8px; } .path-bar button image { padding-left: 4px; padding-right: 4px; } .path-bar button.slider-button { padding-left: 0; padding-right: 0; } /*************** * Popovers * ***************/ popover.background { padding: 2px; border-radius: 5px; background: #e5e9f0; box-shadow: 0 4px 6px rgba(112, 112, 112, 0.4); } .csd popover.background, popover.background { border: 1px solid #c5cedd; } popover.background:backdrop { background-color: #d8dee9; box-shadow: none; } popover.background > list, popover.background > .view, popover.background > iconview, popover.background > toolbar { border-style: none; background-color: transparent; } .csd popover.background.touch-selection, .csd popover.background.magnifier, popover.background.touch-selection, popover.background.magnifier { border: 1px solid rgba(255, 255, 255, 0.1); } popover.background separator { margin: 3px; } popover.background list separator { margin: 0px; } popover.background list row { padding: 8px; } /***************** * Progress bars * *****************/ progressbar { font-size: smaller; color: rgba(59, 66, 82, 0.4); } progressbar.horizontal trough, progressbar.horizontal progress { min-height: 6px; } progressbar.vertical trough, progressbar.vertical progress { min-width: 6px; } progressbar.horizontal progress { margin: 0; } progressbar.vertical progress { margin: 0; } progressbar:backdrop { box-shadow: none; transition: 200ms ease-out; } progressbar.osd { min-width: 3px; min-height: 3px; background-color: transparent; } progressbar.osd trough { border-style: none; border-radius: 0; background-color: transparent; box-shadow: none; } progressbar.osd progress { border-style: none; border-radius: 0; } /************ * GtkScale * ************/ progressbar trough, scale trough, scale fill { background-color: rgba(0, 0, 0, 0.14); border: none; border-radius: 3px; margin: 0; } progressbar trough:disabled, scale trough:disabled, scale fill:disabled { background-color: rgba(0, 0, 0, 0.06); } progressbar trough:backdrop, progressbar:backdrop trough, scale trough:backdrop, scale fill:backdrop { background-color: rgba(0, 0, 0, 0.06); transition: 200ms ease-out; } progressbar trough:backdrop:disabled, progressbar:backdrop trough:disabled, scale trough:backdrop:disabled, scale fill:backdrop:disabled { background-color: rgba(0, 0, 0, 0.06); } progressbar progress, scale highlight { border: none; background-color: #81a1c1; border-radius: 3px; margin: 0; } progressbar progress:disabled, scale highlight:disabled { border: none; background-color: rgba(0, 0, 0, 0.14); } progressbar progress:backdrop, progressbar:backdrop progress, scale highlight:backdrop, progressbar progress:active:backdrop, progressbar:backdrop progress:active, scale highlight:active:backdrop { border-color: #92aec9; background-color: #92aec9; } progressbar progress:backdrop:disabled, progressbar:backdrop progress:disabled, scale highlight:backdrop:disabled, progressbar progress:active:backdrop:disabled, progressbar:backdrop progress:active:disabled, scale highlight:active:backdrop:disabled { background-color: rgba(0, 0, 0, 0.06); } scale { min-height: 16px; min-width: 16px; padding: 8px; } scale.horizontal trough, scale.horizontal progress { min-height: 6px; } scale.vertical trough, scale.vertical progress { min-width: 6px; } scale slider { min-height: 16px; min-width: 16px; margin: -7px; background-color: #e5e9f0; box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0px 0px 1px 1px rgba(0, 0, 0, 0.1); border-radius: 12px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-property: background, border, box-shadow; } scale slider:active { background-color: #81a1c1; } scale slider:active:disabled { background-color: #dde2ec; box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0px 0px 1px 1px rgba(0, 0, 0, 0.05); } scale.fine-tune.horizontal { padding-top: 9px; padding-bottom: 9px; min-height: 16px; } scale.fine-tune.vertical { padding-left: 9px; padding-right: 9px; min-width: 16px; } scale.fine-tune slider { margin: -6px; } scale.fine-tune fill, scale.fine-tune highlight, scale.fine-tune trough { border-radius: 5px; -gtk-outline-radius: 7px; } scale trough { outline-offset: 2px; -gtk-outline-radius: 5px; outline-color: transparent; } scale fill:backdrop, scale fill { background-color: #c5cedd; } scale fill:disabled:backdrop, scale fill:disabled { border-color: transparent; background-color: transparent; } .osd scale fill { background-color: #4d525b; } .osd scale fill:disabled:backdrop, .osd scale fill:disabled { border-color: transparent; background-color: transparent; } scale slider { border-color: #fff; border: none; border-radius: 12px; background-color: #fff; } scale slider:active { border-color: #5f88b0; } scale slider:disabled { background-color: #ededed; box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0px 0px 1px 1px rgba(0, 0, 0, 0.1); } scale slider:backdrop, scale slider:backdrop:disabled { transition: 200ms ease-out; background-color: #ededed; box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0px 0px 1px 1px rgba(0, 0, 0, 0.1); } row:selected scale slider:disabled, row:selected scale slider { border-color: #5f88b0; } scale value { color: alpha(currentColor,0.4); } scale marks { color: alpha(currentColor,0.4); } scale marks.top { margin-bottom: 6px; margin-top: -12px; } scale marks.bottom { margin-top: 6px; margin-bottom: -12px; } scale marks.top { margin-right: 6px; margin-left: -12px; } scale marks.bottom { margin-left: 6px; margin-right: -12px; } scale.fine-tune marks.top { margin-bottom: 6px; margin-top: -9px; } scale.fine-tune marks.bottom { margin-top: 6px; margin-bottom: -9px; } scale.fine-tune marks.top { margin-right: 6px; margin-left: -9px; } scale.fine-tune marks.bottom { margin-left: 6px; margin-right: -9px; } scale.horizontal indicator { min-height: 6px; min-width: 1px; } scale.horizontal.fine-tune indicator { min-height: 3px; } scale.vertical indicator { min-height: 1px; min-width: 6px; } scale.vertical.fine-tune indicator { min-width: 3px; } scale.horizontal.marks-before:not(.marks-after) slider { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.horizontal.marks-before:not(.marks-after) slider:hover { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.horizontal.marks-before:not(.marks-after) slider:active { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.horizontal.marks-before:not(.marks-after) slider:disabled { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.horizontal.marks-before:not(.marks-after) slider:backdrop { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.horizontal.marks-before:not(.marks-after) slider:backdrop:disabled { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.horizontal.marks-after:not(.marks-before) slider { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.horizontal.marks-after:not(.marks-before) slider:hover { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.horizontal.marks-after:not(.marks-before) slider:active { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.horizontal.marks-after:not(.marks-before) slider:disabled { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.horizontal.marks-after:not(.marks-before) slider:backdrop { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.horizontal.marks-after:not(.marks-before) slider:backdrop:disabled { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.vertical.marks-before:not(.marks-after) slider { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.vertical.marks-before:not(.marks-after) slider:hover { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.vertical.marks-before:not(.marks-after) slider:active { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.vertical.marks-before:not(.marks-after) slider:disabled { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.vertical.marks-before:not(.marks-after) slider:backdrop { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.vertical.marks-before:not(.marks-after) slider:backdrop:disabled { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.vertical.marks-after:not(.marks-before) slider { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.vertical.marks-after:not(.marks-before) slider:hover { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.vertical.marks-after:not(.marks-before) slider:active { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.vertical.marks-after:not(.marks-before) slider:disabled { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.vertical.marks-after:not(.marks-before) slider:backdrop { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.vertical.marks-after:not(.marks-before) slider:backdrop:disabled { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.color { min-height: 0; min-width: 0; } scale.color trough { background-image: image(#c5cedd); background-repeat: no-repeat; } scale.color.horizontal { padding: 0 0 15px 0; } scale.color.horizontal trough { padding-bottom: 4px; background-position: 0 -3px; border-top-left-radius: 0; border-top-right-radius: 0; } scale.color.horizontal slider:dir(ltr):hover, scale.color.horizontal slider:dir(ltr):backdrop, scale.color.horizontal slider:dir(ltr):disabled, scale.color.horizontal slider:dir(ltr):backdrop:disabled, scale.color.horizontal slider:dir(ltr), scale.color.horizontal slider:dir(rtl):hover, scale.color.horizontal slider:dir(rtl):backdrop, scale.color.horizontal slider:dir(rtl):disabled, scale.color.horizontal slider:dir(rtl):backdrop:disabled, scale.color.horizontal slider:dir(rtl) { margin-bottom: -15px; margin-top: 6px; } scale.color.vertical:dir(ltr) { padding: 0 0 0 15px; } scale.color.vertical:dir(ltr) trough { padding-left: 4px; background-position: 3px 0; border-bottom-right-radius: 0; border-top-right-radius: 0; } scale.color.vertical:dir(ltr) slider:hover, scale.color.vertical:dir(ltr) slider:backdrop, scale.color.vertical:dir(ltr) slider:disabled, scale.color.vertical:dir(ltr) slider:backdrop:disabled, scale.color.vertical:dir(ltr) slider { margin-left: -15px; margin-right: 6px; } scale.color.vertical:dir(rtl) { padding: 0 15px 0 0; } scale.color.vertical:dir(rtl) trough { padding-right: 4px; background-position: -3px 0; border-bottom-left-radius: 0; border-top-left-radius: 0; } scale.color.vertical:dir(rtl) slider:hover, scale.color.vertical:dir(rtl) slider:backdrop, scale.color.vertical:dir(rtl) slider:disabled, scale.color.vertical:dir(rtl) slider:backdrop:disabled, scale.color.vertical:dir(rtl) slider { margin-right: -15px; margin-left: 6px; } scale.color.fine-tune.horizontal:dir(ltr), scale.color.fine-tune.horizontal:dir(rtl) { padding: 0 0 12px 0; } scale.color.fine-tune.horizontal:dir(ltr) trough, scale.color.fine-tune.horizontal:dir(rtl) trough { padding-bottom: 7px; background-position: 0 -6px; } scale.color.fine-tune.horizontal:dir(ltr) slider, scale.color.fine-tune.horizontal:dir(rtl) slider { margin-bottom: -15px; margin-top: 6px; } scale.color.fine-tune.vertical:dir(ltr) { padding: 0 0 0 12px; } scale.color.fine-tune.vertical:dir(ltr) trough { padding-left: 7px; background-position: 6px 0; } scale.color.fine-tune.vertical:dir(ltr) slider { margin-left: -15px; margin-right: 6px; } scale.color.fine-tune.vertical:dir(rtl) { padding: 0 12px 0 0; } scale.color.fine-tune.vertical:dir(rtl) trough { padding-right: 7px; background-position: -6px 0; } scale.color.fine-tune.vertical:dir(rtl) slider { margin-right: -15px; margin-left: 6px; } /************** * Scrollbars * **************/ scrollbar { background-color: #dfe4ed; transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } * { -GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-forward-stepper: false; } scrollbar.top { border-bottom: 1px solid #c5cedd; } scrollbar.bottom { border-top: 1px solid #c5cedd; } scrollbar.left { border-right: 1px solid #c5cedd; } scrollbar.right { border-left: 1px solid #c5cedd; } scrollbar:backdrop { background-color: #ced6e3; border-color: #c7d0de; transition: 200ms ease-out; } scrollbar slider { min-width: 6px; min-height: 6px; margin: -1px; border: 4px solid transparent; border-radius: 8px; background-clip: padding-box; background-color: #7a808e; } scrollbar slider:hover { background-color: #5a6170; } scrollbar slider:hover:active { background-color: #5f88b0; } scrollbar slider:backdrop { background-color: #b9bfcb; } scrollbar slider:disabled { background-color: transparent; } scrollbar.fine-tune slider { min-width: 4px; min-height: 4px; } scrollbar.fine-tune.horizontal slider { border-width: 5px 4px; } scrollbar.fine-tune.vertical slider { border-width: 4px 5px; } scrollbar.overlay-indicator:not(.dragging):not(.hovering) { border-color: transparent; opacity: 0.4; background-color: transparent; } scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider { margin: 0; min-width: 3px; min-height: 3px; background-color: #3b4252; border: 1px solid white; } scrollbar.overlay-indicator:not(.dragging):not(.hovering) button { min-width: 5px; min-height: 5px; background-color: #3b4252; background-clip: padding-box; border-radius: 100%; border: 1px solid white; -gtk-icon-source: none; } scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider { margin: 0 2px; min-width: 40px; } scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal button { margin: 1px 2px; min-width: 5px; } scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider { margin: 2px 0; min-height: 40px; } scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical button { margin: 2px 1px; min-height: 5px; } scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering { opacity: 0.8; } scrollbar.horizontal slider { min-width: 40px; } scrollbar.vertical slider { min-height: 40px; } scrollbar button { padding: 0; min-width: 12px; min-height: 12px; border-style: none; border-radius: 0; transition-property: min-height, min-width, color; border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #7a808e; } scrollbar button:hover { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #5a6170; } scrollbar button:active, scrollbar button:checked { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #5f88b0; } scrollbar button:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: rgba(122, 128, 142, 0.2); } scrollbar button:backdrop { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #b9bfcb; } scrollbar button:backdrop:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: rgba(185, 191, 203, 0.2); } scrollbar.vertical button.down { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } scrollbar.vertical button.up { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } scrollbar.horizontal button.down { -gtk-icon-source: -gtk-icontheme("pan-right-symbolic"); } scrollbar.horizontal button.up { -gtk-icon-source: -gtk-icontheme("pan-left-symbolic"); } treeview ~ scrollbar.vertical { border-top: 1px solid #c5cedd; margin-top: -1px; } /*********** * Sidebar * ***********/ .sidebar { border-style: none; border-width: 0; background-color: #dfe4ed; } .sidebar .frame { border: none; } stacksidebar.sidebar:dir(ltr) list, stacksidebar.sidebar.left list, stacksidebar.sidebar.left:dir(rtl) list, .sidebar:dir(ltr), .sidebar.left, .sidebar.left:dir(rtl) { border-right: none; border-left-style: none; } stacksidebar.sidebar:dir(rtl) list .sidebar:dir(rtl), stacksidebar.sidebar.right list .sidebar:dir(rtl), .sidebar.right { border-left: 1px solid #c5cedd; border-right-style: none; } .sidebar:backdrop { background-color: #dde2ec; border-color: #c7d0de; } .sidebar row { padding: 8px 12px; transition: all .12s ease-in; } .sidebar row label { color: #3b4252; } .sidebar row:selected { color: #fefefe; } .sidebar row:selected:backdrop { color: #fefefe; background: rgba(129, 161, 193, 0.6); } .sidebar row:selected:backdrop label { color: #fefefe; } .sidebar row:selected label { color: #fefefe; } .sidebar.source-list { background: #282d37; color: #d8dee9; padding: 4px 0px; } .sidebar.source-list.view, iconview.sidebar.source-list { transition: all .12s ease-in; } .sidebar.source-list.view:selected, iconview.sidebar.source-list:selected { padding-left: 4px; background: #81a1c1; color: #fefefe; } .sidebar.source-list.view:selected:active, iconview.sidebar.source-list:selected:active { box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); } .sidebar.source-list.view:selected.has-open-popup, iconview.sidebar.source-list:selected.has-open-popup, .sidebar.source-list.view:selected:hover, iconview.sidebar.source-list:selected:hover { background-color: rgba(129, 161, 193, 0.9); } .sidebar.source-list.view:selected:backdrop, iconview.sidebar.source-list:selected:backdrop { background-color: rgba(129, 161, 193, 0.6); } .sidebar.source-list.view:hover, iconview.sidebar.source-list:hover, .sidebar.source-list.view iconview.source-list:hover, iconview.sidebar.source-list iconview.source-list:hover { background-color: rgba(40, 45, 55, 0.95); } paned .sidebar.left, paned .sidebar.right, paned .sidebar.left:dir(rtl), paned .sidebar:dir(rtl), paned .sidebar:dir(ltr), paned .sidebar { border-style: none; border-color: #c5cedd; } stacksidebar row { padding: 10px 4px; } stacksidebar row > label { padding-left: 6px; padding-right: 6px; } stacksidebar row.needs-attention > label { background-size: 6px 6px, 0 0; } /*******************************************************************/ /* PLACESSIDEBAR */ /*******************************************************************/ placessidebar.sidebar { background-color: transparent; background-image: linear-gradient(to right, #232831 40px, #282d37 35px, #282d37 36px, #282d37 36px, #282d37 99%, #282d37 100%); } placessidebar.sidebar:dir(rtl) { background-image: linear-gradient(to left, #232831 40px, #282d37 35px, #282d37 36px, #282d37 36px, #282d37 99%, #282d37 100%); } placessidebar.sidebar row.sidebar-row label { color: #d8dee9; } placessidebar.sidebar row.sidebar-row.sidebar-row .sidebar-icon { margin-left: -14px; margin-right: 12px; padding-left: 14px; padding-right: 12px; color: #d8dee9; } placessidebar.sidebar row.sidebar-row.sidebar-row .sidebar-icon:dir(rtl) { margin-right: -14px; margin-left: 12px; padding-right: 14px; padding-left: 12px; } placessidebar.sidebar row.sidebar-row:hover { transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: rgba(0, 0, 0, 0.76); background-color: transparent; background-image: linear-gradient(to right, rgba(65, 67, 75, 0) 40px, rgba(0, 0, 0, 0.12) 35px, rgba(0, 0, 0, 0.12) 36px, rgba(0, 0, 0, 0.12) 36px, rgba(0, 0, 0, 0.12) 99%, rgba(0, 0, 0, 0.12) 100%); } placessidebar.sidebar row.sidebar-row:hover:dir(rtl) { background-image: linear-gradient(to left, rgba(65, 67, 75, 0) 40px, rgba(0, 0, 0, 0.12) 35px, rgba(0, 0, 0, 0.12) 36px, rgba(0, 0, 0, 0.12) 36px, rgba(0, 0, 0, 0.12) 99%, rgba(0, 0, 0, 0.12) 100%); } placessidebar.sidebar row.sidebar-row:active:hover { color: rgba(0, 0, 0, 0.76); background-color: rgba(0, 0, 0, 0.23); } placessidebar.sidebar row.sidebar-row:selected { color: #fff; background-color: transparent; background-image: linear-gradient(to right, #81a1c1 40px, rgba(65, 67, 75, 0) 35px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 99%, rgba(65, 67, 75, 0) 100%); } placessidebar.sidebar row.sidebar-row:selected label { color: #81a1c1; } placessidebar.sidebar row.sidebar-row:selected:dir(rtl) { background-image: linear-gradient(to left, rgba(129, 161, 193, 0.7) 40px, rgba(65, 67, 75, 0) 35px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 99%, rgba(65, 67, 75, 0) 100%); } placessidebar.sidebar row.sidebar-row:selected:hover { color: #ffffff; background-color: rgba(0, 0, 0, 0.24); } placessidebar.sidebar row.sidebar-row:selected:hover .sidebar-icon { color: #ffffff; } placessidebar.sidebar row.sidebar-row:selected:backdrop { color: #fefefe; } placessidebar.sidebar row.sidebar-row:selected:backdrop .sidebar-icon { -gtk-icon-shadow: none; color: inherit; } placessidebar.sidebar row.sidebar-row:selected .sidebar-icon { -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.8); color: inherit; } placessidebar.sidebar row.sidebar-row.sidebar-new-bookmark-row, placessidebar.sidebar row.sidebar-row.sidebar-new-bookmark-row label, placessidebar.sidebar row.sidebar-row.sidebar-new-bookmark-row .sidebar-icon { color: #ebcb8b; } placessidebar.sidebar row.sidebar-row:drop(active):not(:disabled) { box-shadow: inset 0 1px #a3be8c, inset 0 -1px #a3be8c; } placessidebar.sidebar row.sidebar-row:drop(active):not(:disabled), placessidebar.sidebar row.sidebar-row:drop(active):not(:disabled) label, placessidebar.sidebar row.sidebar-row:drop(active):not(:disabled) image { color: #a3be8c; } placessidebar.sidebar row.sidebar-row:drop(active):not(:disabled):selected { background: #a3be8c; } placessidebar.sidebar row.sidebar-row:drop(active):not(:disabled):selected, placessidebar.sidebar row.sidebar-row:drop(active):not(:disabled):selected label, placessidebar.sidebar row.sidebar-row:drop(active):not(:disabled):selected image { color: #fefefe; } placessidebar list { background-color: transparent; } placessidebar list:backdrop { background-color: transparent; } /***************** * GtkSpinButton * *****************/ spinbutton:not(.vertical) { padding: 0; } spinbutton:not(.vertical) entry { min-width: 28px; margin: 0; background: none; background-color: transparent; border: none; border-radius: 0; box-shadow: none; } spinbutton:not(.vertical) button { min-height: 16px; margin: 0; padding-bottom: 0; padding-top: 0; color: #4c5362; background-image: none; border-style: none none none solid; border-color: rgba(197, 206, 221, 0.3); border-radius: 0; box-shadow: inset 1px 0px 0px 0px rgba(0, 0, 0, 0.07); } spinbutton:not(.vertical) button:dir(rtl) { border-style: none solid none none; } spinbutton:not(.vertical) button:hover { color: #3b4252; background-color: rgba(59, 66, 82, 0.05); } spinbutton:not(.vertical) button:disabled { color: rgba(138, 144, 158, 0.3); } spinbutton:not(.vertical) button:active { background-color: rgba(0, 0, 0, 0.1); box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2); } spinbutton:not(.vertical) button:backdrop { color: #9399a6; background-color: transparent; border-color: rgba(199, 208, 222, 0.3); transition: 200ms ease-out; } spinbutton:not(.vertical) button:backdrop:disabled { color: rgba(167, 181, 205, 0.3); background-image: none; border-style: none none none solid; box-shadow: inset 1px 0px 0px 0px rgba(0, 0, 0, 0.07); } spinbutton:not(.vertical) button:backdrop:disabled:dir(rtl) { border-style: none solid none none; } spinbutton:not(.vertical) button:last-child { border-top-right-radius: 2px; border-bottom-right-radius: 2px; } .osd spinbutton:not(.vertical) button { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #d8dee9; border-style: none none none solid; border-color: rgba(31, 35, 43, 0.7); border-radius: 0; box-shadow: none; -gtk-icon-shadow: 0 1px black; } .osd spinbutton:not(.vertical) button:dir(rtl) { border-style: none solid none none; } .osd spinbutton:not(.vertical) button:hover { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #d8dee9; border-color: rgba(31, 35, 43, 0.5); background-color: rgba(216, 222, 233, 0.1); -gtk-icon-shadow: 0 1px black; box-shadow: none; } .osd spinbutton:not(.vertical) button:backdrop { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #d8dee9; border-color: rgba(31, 35, 43, 0.5); -gtk-icon-shadow: none; box-shadow: none; } .osd spinbutton:not(.vertical) button:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #808690; border-color: rgba(31, 35, 43, 0.5); -gtk-icon-shadow: none; box-shadow: none; } .osd spinbutton:not(.vertical) button:last-child { border-radius: 0 3px 3px 0; } .osd spinbutton:not(.vertical) button:dir(rtl):first-child { border-radius: 3px 0 0 3px; } spinbutton.vertical:disabled { color: #8a909e; } spinbutton.vertical:backdrop:disabled { color: #a7b5cd; } spinbutton.vertical:drop(active) { border-color: transparent; box-shadow: none; } spinbutton.vertical entry { min-height: 32px; min-width: 32px; padding: 0; border-radius: 0; } spinbutton.vertical button { min-height: 32px; min-width: 32px; padding: 0; border-width: 1px; border-color: #c5cedd; box-shadow: 0 1px rgba(255, 255, 255, 0.2); } spinbutton.vertical button.up { border-radius: 3px 3px 0 0; border-style: solid solid none solid; } spinbutton.vertical button.down { border-radius: 0 0 3px 3px; border-style: none solid solid solid; } .osd spinbutton.vertical button:first-child { color: #d8dee9; border-color: #1f232b; background-color: rgba(40, 45, 55, 0.93); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } .osd spinbutton.vertical button:first-child:hover { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(65, 74, 91, 0.93), rgba(65, 74, 91, 0.93)); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } .osd spinbutton.vertical button:first-child:active { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(52, 59, 73, 0.93), rgba(52, 59, 73, 0.93)); background-clip: padding-box; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(216, 222, 233, 0.3); } .osd spinbutton.vertical button:first-child:disabled { color: #808690; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(58, 63, 73, 0.5), rgba(58, 63, 73, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } .osd spinbutton.vertical button:first-child:backdrop { color: #d8dee9; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(40, 45, 55, 0.93), rgba(40, 45, 55, 0.93)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } treeview spinbutton:not(.vertical) { min-height: 0; border-style: none; border-radius: 0; } treeview spinbutton:not(.vertical) entry { min-height: 0; padding: 1px 2px; } /*********** * Spinner * ***********/ menu spinner { color: #81a1c1; } /********************* * Spinner Animation * *********************/ @keyframes spin { to { -gtk-icon-transform: rotate(1turn); } } spinner { background: none; opacity: 0; -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); } spinner:checked { opacity: 1; animation: spin 1s linear infinite; } spinner:checked:disabled { opacity: 0.5; } /********** * Switch * **********/ switch { font-size: 1px; min-width: 40px; min-height: 25px; background-size: 40px 24px; background-repeat: no-repeat; background-position: center center; background-image: -gtk-scaled(url("../assets/switch-off.svg"), url("../assets/switch-off.svg")); } switch:disabled { background-image: -gtk-scaled(url("../assets/switch-insensitive.svg"), url("../assets/switch-insensitive.svg")); } switch:disabled slider { background-image: -gtk-scaled(url("../assets/switch-slider-insensitive.svg"), url("../assets/switch-slider-insensitive@2.png")); } switch, switch slider { outline-color: transparent; color: transparent; border: none; box-shadow: none; } switch:checked { background-image: -gtk-scaled(url("../assets/switch-on.svg"), url("../assets/switch-on.svg")); } switch:checked slider { background-image: -gtk-scaled(url("../assets/switch-slider-on.svg"), url("../assets/switch-slider-on@2.png")); } switch:checked:disabled { background-image: -gtk-scaled(url("../assets/switch-on-insensitive.svg"), url("../assets/switch-on-insensitive.svg")); } switch:checked:disabled slider { background-image: -gtk-scaled(url("../assets/switch-slider-on-insensitive.svg"), url("../assets/switch-slider-on-insensitive@2.png")); } switch slider { min-width: 1px; min-height: 1px; background-repeat: no-repeat; background-position: left center; background-color: transparent; background-image: -gtk-scaled(url("../assets/switch-slider-off.svg"), url("../assets/switch-slider-off@2.png")); } row:selected switch:checked { background-image: -gtk-scaled(url("../assets/switch-off.svg"), url("../assets/switch-off.svg")); } row:selected switch:checked slider { background-image: -gtk-scaled(url("../assets/switch-slider-on-selected.svg"), url("../assets/switch-slider-on-selected@2.png")); } switch trough:active, switch trough:checked { background-color: #81a1c1; } switch trough:active:backdrop, switch trough:checked:backdrop { background-color: rgba(129, 161, 193, 0.6); } /************ * Toolbars * ************/ toolbar, .inline-toolbar, searchbar, .location-bar { -GtkWidget-window-dragging: true; padding: 4px; background-color: #d8dee9; } toolbar { padding: 4px 3px 3px 4px; } .osd toolbar { background-color: transparent; } toolbar.osd { padding: 13px; border: none; border-radius: 5px; background-color: rgba(40, 45, 55, 0.93); } toolbar.osd.left, toolbar.osd.right, toolbar.osd.top, toolbar.osd.bottom { border-radius: 0; } toolbar.horizontal separator { margin: 0 7px 1px 6px; } toolbar.vertical separator { margin: 6px 1px 7px 0; } toolbar:not(.inline-toolbar):not(.osd) switch, toolbar:not(.inline-toolbar):not(.osd) scale, toolbar:not(.inline-toolbar):not(.osd) entry, toolbar:not(.inline-toolbar):not(.osd) spinbutton, toolbar:not(.inline-toolbar):not(.osd) button { margin-right: 1px; margin-bottom: 1px; } .inline-toolbar { padding: 3px; border-width: 0 1px 1px; border-radius: 0 0 5px 5px; } searchbar, .location-bar { border-width: 0 0 1px; padding: 3px; } .inline-toolbar, searchbar, .location-bar { border-style: solid; border-color: #c5cedd; background-color: #d2d9e5; } .inline-toolbar:backdrop, searchbar:backdrop, .location-bar:backdrop { border-color: #c7d0de; background-color: #d2d9e5; box-shadow: none; transition: 200ms ease-out; } searchbar { background: #e5e9f0; } /************ * Tooltips * ************/ tooltip { padding: 4px; /* not working */ border-radius: 5px; box-shadow: none; text-shadow: 0 1px black; } tooltip.background { background-color: rgba(40, 45, 55, 0.93); background-clip: padding-box; border: 1px solid #1f232b; } tooltip decoration { background-color: transparent; } tooltip * { padding: 4px; background-color: transparent; color: white; } /************** * Tree Views * **************/ treeview.view { border-left-color: #9096a1; border-top-color: #d8dee9; } * { -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; } treeview.view:selected:focus, treeview.view:selected { border-radius: 0; } treeview.view:selected:backdrop, treeview.view:selected { border-left-color: #c0d0e0; border-top-color: rgba(59, 66, 82, 0.1); } treeview.view:disabled { color: #8a909e; } treeview.view:disabled:selected { color: #b3c6d9; } treeview.view:disabled:selected:backdrop { color: #a7bdd3; } treeview.view:disabled:backdrop { color: #a7b5cd; } treeview.view.separator { min-height: 2px; color: #d8dee9; } treeview.view.separator:backdrop { color: rgba(216, 222, 233, 0.1); } treeview.view:backdrop { border-left-color: #b1b7c4; border-top: #d8dee9; } treeview.view:drop(active) { border-style: solid none; border-width: 1px; border-color: #5f88b0; } treeview.view:drop(active).after { border-top-style: none; } treeview.view:drop(active).before { border-bottom-style: none; } treeview.view.expander { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); color: #6e7481; } treeview.view.expander:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); } treeview.view.expander:hover { color: #3b4252; } treeview.view.expander:selected { color: #d9e2ec; } treeview.view.expander:selected:hover { color: #fefefe; } treeview.view.expander:selected:backdrop { color: #d9e2ec; } treeview.view.expander:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } treeview.view.expander:backdrop { color: #a4aab6; } treeview.view.progressbar { color: #e5e9f0; border: 1px solid #5f88b0; border-radius: 4px; background-color: #81a1c1; background-image: linear-gradient(to bottom, #81a1c1, #5f88b0); box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px rgba(0, 0, 0, 0.2); } treeview.view.progressbar:selected:focus, treeview.view.progressbar:selected { border-radius: 4px; color: #81a1c1; box-shadow: none; background-image: linear-gradient(to bottom, #e5e9f0, #c5cedd); } treeview.view.progressbar:selected:focus:backdrop, treeview.view.progressbar:selected:backdrop { color: #81a1c1; border-color: #5f88b0; background-color: #e2e6ee; } treeview.view.progressbar:backdrop { color: #e2e6ee; background-image: none; box-shadow: none; } treeview.view.trough { background-color: rgba(59, 66, 82, 0.1); border-radius: 4px; } treeview.view.trough:selected:focus, treeview.view.trough:selected { background-color: rgba(254, 254, 254, 0.3); border-radius: 4px; border-width: 1px 0; border-style: solid; border-color: #81a1c1; } treeview.view header button { color: #9096a1; background-color: #e5e9f0; font-weight: bold; text-shadow: none; box-shadow: none; } treeview.view header button:hover { color: #666c7a; box-shadow: none; transition: none; } treeview.view header button:active { color: #3b4252; transition: none; } treeview.view header button:last-child:backdrop, treeview.view header button:last-child { border-right-style: none; } treeview.view button.dnd:active, treeview.view button.dnd:selected, treeview.view button.dnd:hover, treeview.view button.dnd, treeview.view header.button.dnd:active, treeview.view header.button.dnd:selected, treeview.view header.button.dnd:hover, treeview.view header.button.dnd { padding: 0 6px; transition: none; background-image: none; background-color: #81a1c1; color: #e5e9f0; border-radius: 0; border-style: none; box-shadow: inset 0 0 0 1px #e5e9f0; text-shadow: none; } treeview.view acceleditor > label { background-color: #81a1c1; } treeview.view header button, treeview.view header button:hover, treeview.view header button:active { padding: 0 6px; border-radius: 0; background-image: none; text-shadow: none; border-width: 1px; border-style: none solid solid none; border-color: #d8dee9; } treeview.view header button:disabled { border-color: #d8dee9; background-image: none; } treeview.view header button:backdrop { border-color: #d8dee9; border-style: none solid solid none; color: #b1b7c4; background-image: none; background-color: #e2e6ee; } treeview.view header button:backdrop:disabled { border-color: #d8dee9; background-image: none; } /********************** * Window Decorations * *********************/ decoration { border-radius: 4px 4px 0 0; border-width: 0px; border-width: 0px; box-shadow: 0 4px 10px 2px rgba(33, 26, 30, 0.4); margin: 10px; } decoration:backdrop { box-shadow: 0 4px 10px 2px rgba(33, 26, 30, 0.2); transition: 200ms ease-out; } .maximized decoration, .fullscreen decoration, .tiled decoration { border-radius: 0; } .popup decoration { box-shadow: none; } .ssd decoration { box-shadow: none; } .csd.popup decoration { border-radius: 7px; box-shadow: 0 4px 8px rgba(112, 112, 112, 0.4); border: 1px solid #c5cedd; } tooltip.csd decoration { border-radius: 5px; box-shadow: none; } messagedialog.csd decoration { border-radius: 7px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.13); } .solid-csd decoration { border-radius: 0; margin: 0px; background-color: #d8dee9; border: solid 1px #c7d0de; box-shadow: none; } button.titlebutton { background-repeat: no-repeat; background-position: center; min-height: 20px; padding: 0 1px; box-shadow: none; } button.titlebutton.close { background-image: -gtk-scaled(url("../assets/close.png"), url("../assets/close@2.png")); } button.titlebutton.close:hover, button.titlebutton.close:active { background-image: -gtk-scaled(url("../assets/close_prelight.png"), url("../assets/close_prelight@2.png")); } button.titlebutton.maximize { background-image: -gtk-scaled(url("../assets/maximize.png"), url("../assets/maximize@2.png")); } button.titlebutton.maximize:hover, button.titlebutton.maximize:active { background-image: -gtk-scaled(url("../assets/maximize_prelight.png"), url("../assets/maximize_prelight@2.png")); } button.titlebutton.minimize { background-image: -gtk-scaled(url("../assets/min.png"), url("../assets/min@2.png")); } button.titlebutton.minimize:hover, button.titlebutton.minimize:active { background-image: -gtk-scaled(url("../assets/min_prelight.png"), url("../assets/min_prelight@2.png")); } button.titlebutton:backdrop { -gtk-icon-shadow: none; background-image: -gtk-scaled(url("../assets/close_unfocused.png"), url("../assets/close_unfocused@2.png")); } headerbar.selection-mode button.titlebutton, .titlebar.selection-mode button.titlebutton { text-shadow: 0 -1px rgba(0, 0, 0, 0.4949019608); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.4949019608); } headerbar.selection-mode button.titlebutton:backdrop, .titlebar.selection-mode button.titlebutton:backdrop { -gtk-icon-shadow: none; } .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, .view text:selected:focus, iconview text:selected:focus, textview text:selected:focus, .view text:selected, iconview text:selected, textview text:selected, .view text selection:focus, iconview text selection:focus, .view text selection, iconview text selection, textview text selection:focus, textview text selection, flowbox flowboxchild:selected, modelbutton.flat:selected, popover.background checkbutton:selected, popover.background radiobutton:selected, .menuitem.button.flat:selected, calendar:selected, spinbutton:not(.vertical) selection:focus, spinbutton:not(.vertical) selection, entry selection:focus, entry selection, row:selected, treeview.view:selected:focus, treeview.view:selected { background-color: #81a1c1; } row:selected label, label:selected, .selection-mode button.titlebutton, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, .view text:selected:focus, iconview text:selected:focus, textview text:selected:focus, .view text:selected, iconview text:selected, textview text:selected, .view text selection:focus, iconview text selection:focus, .view text selection, iconview text selection, textview text selection:focus, textview text selection, flowbox flowboxchild:selected, modelbutton.flat:selected, popover.background checkbutton:selected, popover.background radiobutton:selected, .menuitem.button.flat:selected, calendar:selected, spinbutton:not(.vertical) selection:focus, spinbutton:not(.vertical) selection, entry selection:focus, entry selection, row:selected, treeview.view:selected:focus, treeview.view:selected { color: #fefefe; font-weight: bold; outline-color: rgba(254, 254, 254, 0.3); } row:selected label:disabled, label:disabled:selected, .selection-mode button.titlebutton:disabled, iconview:disabled:selected:focus, .view:disabled:selected, iconview:disabled:selected, iconview text:disabled:selected:focus, textview text:disabled:selected:focus, .view text:disabled:selected, iconview text:disabled:selected, textview text:disabled:selected, iconview text selection:disabled:focus, .view text selection:disabled, iconview text selection:disabled, textview text selection:disabled, flowbox flowboxchild:disabled:selected, label:disabled selection, modelbutton.flat:disabled:selected, popover.background checkbutton:disabled:selected, popover.background radiobutton:disabled:selected, .menuitem.button.flat:disabled:selected, calendar:disabled:selected, spinbutton:not(.vertical) selection:disabled, entry selection:disabled, row:disabled:selected { color: #c0d0e0; } row:selected label:backdrop, label:backdrop:selected, .selection-mode button.titlebutton:backdrop, iconview:backdrop:selected:focus, .view:backdrop:selected, iconview:backdrop:selected, iconview text:backdrop:selected:focus, textview text:backdrop:selected:focus, .view text:backdrop:selected, iconview text:backdrop:selected, textview text:backdrop:selected, iconview text selection:backdrop:focus, .view text selection:backdrop, iconview text selection:backdrop, textview text selection:backdrop, flowbox flowboxchild:backdrop:selected, label:backdrop selection, modelbutton.flat:backdrop:selected, popover.background checkbutton:backdrop:selected, popover.background radiobutton:backdrop:selected, .menuitem.button.flat:backdrop:selected, calendar:backdrop:selected, spinbutton:not(.vertical) selection:backdrop, entry selection:backdrop, row:backdrop:selected { color: #fefefe; } row:selected label:backdrop:disabled, label:backdrop:disabled:selected, .selection-mode button.titlebutton:backdrop:disabled, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, .view text:backdrop:disabled:selected, iconview text:backdrop:disabled:selected, textview text:backdrop:disabled:selected, .view text selection:backdrop:disabled, iconview text selection:backdrop:disabled, textview text selection:backdrop:disabled, flowbox flowboxchild:backdrop:disabled:selected, label:disabled selection:backdrop, label:backdrop selection:disabled, modelbutton.flat:backdrop:disabled:selected, popover.background checkbutton:backdrop:disabled:selected, popover.background radiobutton:backdrop:disabled:selected, .menuitem.button.flat:backdrop:disabled:selected, calendar:backdrop:disabled:selected, spinbutton:not(.vertical) selection:backdrop:disabled, entry selection:backdrop:disabled, row:backdrop:disabled:selected { color: #a7bdd3; } .monospace { font-family: Monospace; } /********************** * DE-Specific Styles * **********************/ /********* * Budgie * *********/ .budgie-container { background-color: transparent; } .budgie-container:backdrop { background-color: transparent; } .budgie-container popover list, .budgie-container popover row { border: none; background: none; padding: 0; margin: 0; } .budgie-popover .container, .budgie-popover border, .budgie-popover list, .budgie-popover row { padding: 0; margin: 0; background: none; border: none; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; opacity: 1; min-width: 0; min-height: 0; } .budgie-popover, .budgie-popover.background { border-radius: 10px; padding: 0; background: #2a2f3a; background-clip: border-box; box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.35); border: 1px solid #c5cedd; } .budgie-popover list:hover, .budgie-popover row:hover, .budgie-popover.background list:hover, .budgie-popover.background row:hover { background: none; } .budgie-popover > frame.container, .budgie-popover.background > frame.container { margin: 0 -1px -1px; padding: 2px 0 0; } .budgie-popover button, .budgie-popover.background button { color: #d8dee9; border: none; background: transparent; } .budgie-popover button:hover, .budgie-popover.background button:hover { color: #fefefe; text-shadow: none; background-color: rgba(129, 161, 193, 0.8); border-color: #1f232b; } .budgie-popover > .container { padding: 2px; } .budgie-menu { color: #d8dee9; } .budgie-menu .container { padding: 0; } .budgie-menu button:hover { -gtk-icon-effect: none; } .budgie-menu entry.search { border: none; background: none; padding: 5px 2px; border-bottom: 1px solid #c5cedd; border-radius: 0; font-size: 120%; box-shadow: none; color: #d8dee9; } .budgie-menu entry.search image:dir(ltr) { padding-left: 8px; padding-right: 12px; } .budgie-menu entry.search image:dir(rtl) { padding-left: 12px; padding-right: 8px; } .budgie-menu .categories { border-width: 0; margin-left: 3px; background: transparent; } .budgie-menu .categories:dir(ltr) { border-right: 1px solid #c5cedd; } .budgie-menu .categories:dir(rtl) { border-left: 1px solid #c5cedd; } .budgie-menu .category-button { padding: 7px; border-radius: 2px 0 0 2px; } .budgie-menu .category-button:hover { background-color: transparent; color: #3b4252; } .budgie-menu .category-button:active { box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); } .budgie-menu .category-button:checked { color: #fefefe; background: #81a1c1; } .budgie-menu .category-button:checked:hover { color: rgba(254, 254, 254, 0.6); } .budgie-menu .category-button:checked:disabled { opacity: 0.5; } .budgie-menu .category-button:checked:disabled label { color: rgba(254, 254, 254, 0.7); } .budgie-menu scrollbar { background-color: transparent; border-color: #c5cedd; } .budgie-menu button:not(.category-button) { padding-top: 5px; padding-bottom: 5px; border-radius: 0; box-shadow: none; background: transparent; } .budgie-menu button:not(.category-button):hover { color: #fff; text-shadow: none; background-color: rgba(129, 161, 193, 0.8); border-color: #1f232b; } .budgie-menu button { border: none; background: transparent; } .budgie-menu undershoot, .budgie-menu overshoot { background: none; } .budgie-menu list { color: rgba(216, 222, 233, 0.7); } button.budgie-menu-launcher { padding: 0 2px; color: #d8dee9; box-shadow: none; background-color: transparent; } button.budgie-menu-launcher:hover { color: #d8dee9; } button.budgie-menu-launcher:active, button.budgie-menu-launcher:checked { color: #d8dee9; } button.budgie-menu-launcher:backdrop { color: #d8dee9; background-color: transparent; } button.budgie-menu-launcher:backdrop:hover { color: #d8dee9; } button.budgie-menu-launcher:backdrop:active, button.budgie-menu-launcher:backdrop:checked { color: #81a1c1; box-shadow: none; background-color: #e2e7ef; } .user-menu .content-box separator { margin-left: 6px; margin-right: 6px; background-color: rgba(59, 66, 82, 0.1); } .user-menu button { margin: 5px; } .user-menu > box.vertical row.activatable:first-child .indicator-item, .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.2); background-color: #81a1c1; transition-duration: 0.2s; } .user-menu > box.vertical row.activatable:first-child .indicator-item:dir(ltr), .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item:dir(ltr) { padding-left: 7px; background-position: left center; background-repeat: no-repeat; background-size: 38px auto; } .user-menu > box.vertical row.activatable:first-child .indicator-item:dir(rtl), .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item:dir(rtl) { padding-right: 7px; background-position: right center; background-repeat: no-repeat; background-size: 38px auto; } .user-menu > box.vertical row.activatable:first-child .indicator-item label, .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item label { color: #fefefe; } .user-menu > box.vertical row.activatable:first-child .indicator-item label:dir(ltr), .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item label:dir(ltr) { padding-left: 5px; } .user-menu > box.vertical row.activatable:first-child .indicator-item label:dir(rtl), .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item label:dir(rtl) { padding-right: 5px; } .user-menu > box.vertical row.activatable:first-child .indicator-item image, .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item image { color: #fefefe; } .user-menu > box.vertical row.activatable:first-child .indicator-item image:first-child, .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item image:first-child { min-width: 24px; min-height: 20px; } button.raven-trigger { padding-left: 2px; padding-right: 2px; color: #d8dee9; box-shadow: none; } button.raven-trigger:hover { color: #d8dee9; background-color: transparent; } button.raven-trigger:active, button.raven-trigger:checked { box-shadow: none; background-color: transparent; color: #81a1c1; } button.raven-trigger:backdrop { color: #d8dee9; } button.raven-trigger:backdrop:hover { color: #d8dee9; } button.raven-trigger:backdrop:active, button.raven-trigger:backdrop:checked { box-shadow: none; color: #81a1c1; background-color: transparent; } .places-menu .container { padding: 0; } .places-menu .message-bar { border-top-left-radius: 3px; border-top-right-radius: 3px; } .places-menu .name-button { border: 0; border-radius: 0; padding: 4px 6px; } .places-menu .unmount-button { padding: 4px 4px; border: 0; border-radius: 0; } .places-menu .places-section-header { padding: 0px; border-bottom: 1px solid rgba(197, 206, 221, 0.95); box-shadow: 0px 1px 1px alpha(@theme_fg_color, 0.03); } .places-menu .places-section-header > button { padding: 8px; border: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } .places-menu .places-list { background: rgba(59, 66, 82, 0.04); border-bottom: 1px solid rgba(197, 206, 221, 0.95); } .places-menu .unlock-area { border-top: 1px solid rgba(197, 206, 221, 0.85); border-bottom: 1px solid rgba(197, 206, 221, 0.85); } .places-menu .unlock-area entry { border-radius: 0; border: 0; } .places-menu .unlock-area button { border-radius: 0; border: 0; border-left: 1px solid rgba(197, 206, 221, 0.85); } .places-menu .alternative-label { font-size: 15px; padding: 3px; } .places-menu .always-expand { background: transparent; border-bottom: none; } .night-light-indicator .container { padding: 0; } .night-light-indicator .view-header { font-size: 14px; padding: 10px; border-bottom: 1px solid mix(@theme_base_color, #000000, 0.35);; box-shadow: 0px 1px 1px alpha(@theme_fg_color, 0.04);; } .night-light-indicator .display-settings-button { border-top-left-radius: 0px; border-top-right-radius: 0px; border: none; padding: 3px; border-top: 1px solid mix(@theme_base_color, #000000, 0.35);; box-shadow: inset 0px 1px 1px alpha(@theme_fg_color, 0.04);; } .budgie-panel { color: #d8dee9; background-color: #1d2128; background-image: none; box-shadow: none; border: none; transition: all 150ms ease-in; } .budgie-panel .alert { color: #bf616a; } .budgie-panel:backdrop { color: #d8dee9; background-color: #1d2128; } .budgie-panel button { border-top-width: 0; border-bottom-width: 0; border-radius: 0; } .budgie-panel button.flat { background: transparent; border: none; } .budgie-panel button.flat:hover, .budgie-panel button.flat:active, .budgie-panel button.flat:checked { background: rgba(129, 161, 193, 0.7); color: #464e61; } .budgie-panel popover list, .budgie-panel popover row { padding: 0; margin: 0; } .budgie-panel label { color: #d8dee9; font-weight: 700; } .budgie-panel.transparent { background-color: rgba(29, 33, 40, 0.85); } .top .budgie-panel.transparent { border-bottom-color: transparent; } .bottom .budgie-panel.transparent { border-top-color: transparent; } .left .budgie-panel.transparent { border-right-color: transparent; } .right .budgie-panel.transparent { border-left-color: transparent; } .budgie-panel.transparent:backdrop, .budgie-panel.transparent label, .budgie-panel.transparent button.raven-trigger:backdrop, .budgie-panel.transparent button.budgie-menu-launcher { color: #f9fafb; } .budgie-panel .end-region { border-radius: 0px; } .budgie-panel .end-region separator { background-color: rgba(216, 222, 233, 0.15); } .budgie-panel .end-region label { font-weight: 700; color: #d8dee9; } .budgie-panel #tasklist-button, .budgie-panel #tasklist-button:backdrop { outline-color: transparent; transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); border-color: rgba(29, 33, 40, 0); border-radius: 0; background-color: transparent; box-shadow: none; background-clip: padding-box; } .budgie-panel button.flat.launcher { outline-color: transparent; transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); border-color: rgba(29, 33, 40, 0); border-radius: 0; padding: 0; background-clip: padding-box; background-color: transparent; } .budgie-panel button.flat.launcher { box-shadow: none; } .budgie-panel #tasklist-button:hover, .budgie-panel .unpinned button.flat.launcher:hover, .budgie-panel .pinned button.flat.launcher.running:hover { box-shadow: none; } .budgie-panel #tasklist-button:active, .budgie-panel .unpinned button.flat.launcher:active, .budgie-panel .pinned button.flat.launcher.running:active, .budgie-panel #tasklist-button:checked, .budgie-panel .unpinned button.flat.launcher:checked, .budgie-panel .pinned button.flat.launcher.running:checked { box-shadow: none; } .top .budgie-panel #tasklist-button, .budgie-panel .top #tasklist-button, .top .budgie-panel .unpinned button.flat.launcher, .budgie-panel .unpinned .top button.flat.launcher, .top .budgie-panel .pinned button.flat.launcher.running, .budgie-panel .pinned .top button.flat.launcher.running { padding-bottom: 2px; border-top: 2px solid transparent; } .top .budgie-panel .pinned button.flat.launcher:not(.running) { border-top: 2px solid transparent; } .top .budgie-panel .pinned button.flat.launcher:not(.running):hover { border-top: 2px solid rgba(255, 255, 255, 0.1); } .top .budgie-panel .unpinned button.flat.launcher, .top .budgie-panel .pinned button.flat.launcher.running { border-top: 2px solid rgba(255, 255, 255, 0.1); } .top .budgie-panel #tasklist-button:hover, .budgie-panel .top #tasklist-button:hover, .top .budgie-panel .unpinned button.flat.launcher:hover, .budgie-panel .unpinned .top button.flat.launcher:hover, .top .budgie-panel .pinned button.flat.launcher.running:hover, .budgie-panel .pinned .top button.flat.launcher.running:hover { border-top: 2px solid rgba(255, 255, 255, 0.25); } .top .budgie-panel #tasklist-button:active, .budgie-panel .top #tasklist-button:active, .top .budgie-panel .unpinned button.flat.launcher:active, .budgie-panel .unpinned .top button.flat.launcher:active, .top .budgie-panel .pinned button.flat.launcher.running:active, .budgie-panel .pinned .top button.flat.launcher.running:active, .top .budgie-panel #tasklist-button:checked, .budgie-panel .top #tasklist-button:checked, .top .budgie-panel .unpinned button.flat.launcher:checked, .budgie-panel .unpinned .top button.flat.launcher:checked, .top .budgie-panel .pinned button.flat.launcher.running:checked, .budgie-panel .pinned .top button.flat.launcher.running:checked { border-top: 2px solid #81a1c1; } .bottom .budgie-panel #tasklist-button, .budgie-panel .bottom #tasklist-button, .bottom .budgie-panel .unpinned button.flat.launcher, .budgie-panel .unpinned .bottom button.flat.launcher, .bottom .budgie-panel .pinned button.flat.launcher.running, .budgie-panel .pinned .bottom button.flat.launcher.running { padding-top: 2px; border-bottom: 2px solid transparent; } .bottom .budgie-panel .pinned button.flat.launcher:not(.running) { border-bottom: 2px solid transparent; } .bottom .budgie-panel .pinned button.flat.launcher:not(.running):hover { border-bottom: 2px solid rgba(255, 255, 255, 0.1); } .bottom .budgie-panel .unpinned button.flat.launcher, .bottom .budgie-panel .pinned button.flat.launcher.running { border-bottom: 2px solid rgba(255, 255, 255, 0.1); } .bottom .budgie-panel #tasklist-button:hover, .budgie-panel .bottom #tasklist-button:hover, .bottom .budgie-panel .unpinned button.flat.launcher:hover, .budgie-panel .unpinned .bottom button.flat.launcher:hover, .bottom .budgie-panel .pinned button.flat.launcher.running:hover, .budgie-panel .pinned .bottom button.flat.launcher.running:hover { border-bottom: 2px solid rgba(255, 255, 255, 0.25); } .bottom .budgie-panel #tasklist-button:active, .budgie-panel .bottom #tasklist-button:active, .bottom .budgie-panel .unpinned button.flat.launcher:active, .budgie-panel .unpinned .bottom button.flat.launcher:active, .bottom .budgie-panel .pinned button.flat.launcher.running:active, .budgie-panel .pinned .bottom button.flat.launcher.running:active, .bottom .budgie-panel #tasklist-button:checked, .budgie-panel .bottom #tasklist-button:checked, .bottom .budgie-panel .unpinned button.flat.launcher:checked, .budgie-panel .unpinned .bottom button.flat.launcher:checked, .bottom .budgie-panel .pinned button.flat.launcher.running:checked, .budgie-panel .pinned .bottom button.flat.launcher.running:checked { border-bottom: 2px solid #81a1c1; } .left .budgie-panel #tasklist-button, .budgie-panel .left #tasklist-button, .left .budgie-panel .unpinned button.flat.launcher, .budgie-panel .unpinned .left button.flat.launcher, .left .budgie-panel .pinned button.flat.launcher.running, .budgie-panel .pinned .left button.flat.launcher.running { padding-right: 2px; border-left: 2px solid transparent; } .left .budgie-panel .pinned button.flat.launcher:not(.running) { border-left: 2px solid transparent; } .left .budgie-panel .pinned button.flat.launcher:not(.running):hover { border-left: 2px solid rgba(255, 255, 255, 0.1); } .left .budgie-panel .unpinned button.flat.launcher, .left .budgie-panel .pinned button.flat.launcher.running { border-left: 2px solid rgba(255, 255, 255, 0.1); } .left .budgie-panel #tasklist-button:hover, .budgie-panel .left #tasklist-button:hover, .left .budgie-panel .unpinned button.flat.launcher:hover, .budgie-panel .unpinned .left button.flat.launcher:hover, .left .budgie-panel .pinned button.flat.launcher.running:hover, .budgie-panel .pinned .left button.flat.launcher.running:hover { border-left: 2px solid rgba(255, 255, 255, 0.25); } .left .budgie-panel #tasklist-button:active, .budgie-panel .left #tasklist-button:active, .left .budgie-panel .unpinned button.flat.launcher:active, .budgie-panel .unpinned .left button.flat.launcher:active, .left .budgie-panel .pinned button.flat.launcher.running:active, .budgie-panel .pinned .left button.flat.launcher.running:active, .left .budgie-panel #tasklist-button:checked, .budgie-panel .left #tasklist-button:checked, .left .budgie-panel .unpinned button.flat.launcher:checked, .budgie-panel .unpinned .left button.flat.launcher:checked, .left .budgie-panel .pinned button.flat.launcher.running:checked, .budgie-panel .pinned .left button.flat.launcher.running:checked { border-left: 2px solid #81a1c1; } .right .budgie-panel #tasklist-button, .budgie-panel .right #tasklist-button, .right .budgie-panel .unpinned button.flat.launcher, .budgie-panel .unpinned .right button.flat.launcher, .right .budgie-panel .pinned button.flat.launcher.running, .budgie-panel .pinned .right button.flat.launcher.running { padding-left: 2px; border-right: 2px solid transparent; } .right .budgie-panel .pinned button.flat.launcher:not(.running) { border-right: 2px solid transparent; } .right .budgie-panel .pinned button.flat.launcher:not(.running):hover { border-right: 2px solid rgba(255, 255, 255, 0.1); } .right .budgie-panel .unpinned button.flat.launcher, .right .budgie-panel .pinned button.flat.launcher.running { border-right: 2px solid rgba(255, 255, 255, 0.1); } .right .budgie-panel #tasklist-button:hover, .budgie-panel .right #tasklist-button:hover, .right .budgie-panel .unpinned button.flat.launcher:hover, .budgie-panel .unpinned .right button.flat.launcher:hover, .right .budgie-panel .pinned button.flat.launcher.running:hover, .budgie-panel .pinned .right button.flat.launcher.running:hover { border-right: 2px solid rgba(255, 255, 255, 0.25); } .right .budgie-panel #tasklist-button:active, .budgie-panel .right #tasklist-button:active, .right .budgie-panel .unpinned button.flat.launcher:active, .budgie-panel .unpinned .right button.flat.launcher:active, .right .budgie-panel .pinned button.flat.launcher.running:active, .budgie-panel .pinned .right button.flat.launcher.running:active, .right .budgie-panel #tasklist-button:checked, .budgie-panel .right #tasklist-button:checked, .right .budgie-panel .unpinned button.flat.launcher:checked, .budgie-panel .unpinned .right button.flat.launcher:checked, .right .budgie-panel .pinned button.flat.launcher.running:checked, .budgie-panel .pinned .right button.flat.launcher.running:checked { border-right: 2px solid #81a1c1; } .top .budgie-panel { border-bottom: 1px solid rgba(28, 32, 39, 0.92); } .top .raven-frame { padding: 0; background: none; } .top .raven-frame border { border: none; border-bottom: 1px solid rgba(197, 206, 221, 0.92); } .top .shadow-block { background-color: transparent; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent); } .bottom .budgie-panel { border-top: 1px solid rgba(28, 32, 39, 0.92); } .bottom .raven-frame { padding: 0; background: none; } .bottom .raven-frame border { border: none; border-top: 1px solid rgba(197, 206, 221, 0.92); } .bottom .shadow-block { background-color: transparent; background-image: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent); } .left .budgie-panel { border-right: 1px solid rgba(28, 32, 39, 0.92); } .left .raven-frame { padding: 0; background: none; } .left .raven-frame border { border: none; border-right: 1px solid rgba(197, 206, 221, 0.92); } .left .shadow-block { background-color: transparent; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent); } .right .budgie-panel { border-left: 1px solid rgba(28, 32, 39, 0.92); } .right .raven-frame { padding: 0; background: none; } .right .raven-frame border { border: none; border-left: 1px solid rgba(197, 206, 221, 0.92); } .right .shadow-block { background-color: transparent; background-image: linear-gradient(to left, rgba(0, 0, 0, 0.3), transparent); } .raven { padding: 0; color: #d8dee9; background: #2a2f3a; transition: 170ms ease-out; } .raven list { color: #d8dee9; background-color: transparent; } .raven list:selected { background-color: rgba(129, 161, 193, 0.9); } .raven list row, .raven list row.activatable { background-color: transparent; } .raven list row:hover, .raven list row.activatable:hover { background-color: rgba(61, 69, 85, 0.3); } .raven list row:selected, .raven list row.activatable:selected { background-color: rgba(129, 161, 193, 0.9); } .raven .raven-background { color: #d8dee9; background-color: transparent; border-color: transparent; } .raven .raven-background.middle { border-bottom-style: none; } .raven .powerstrip { background-color: transparent; border-top-color: transparent; } .raven .powerstrip button.image-button { border-radius: 50%; padding: 5px; min-width: 32px; min-height: 32px; margin-bottom: 3px; background: #b48ead; color: #fefefe; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.2); border: none; font-size: 100%; } .raven .powerstrip button.image-button:hover { background: rgba(180, 142, 173, 0.85); color: #fefefe; } .raven .powerstrip button.image-button:active { background: #b48ead; color: #fefefe; } .raven .powerstrip button.image-button:first-child { background: linear-gradient(to right, #88c0d0 0%, #88c0d0 100%); } .raven .powerstrip button.image-button:first-child:hover { background: rgba(129, 161, 193, 0.85); } .raven .powerstrip button.image-button:first-child:active { background: #81a1c1; } .raven .powerstrip button.image-button:last-child { background: linear-gradient(to right, #bf616a, #bf616a); } .raven .powerstrip button.image-button:last-child:hover { background: rgba(191, 97, 106, 0.85); } .raven .powerstrip button.image-button:last-child:active { background: #bf616a; } .raven .option-subtitle { font-size: 13px; } calendar.raven-calendar { padding: 4px; color: #d8dee9; background: transparent; border-color: transparent; } calendar.raven-calendar:indeterminate { color: alpha(currentColor,0.3); } calendar.raven-calendar:selected { background: rgba(129, 161, 193, 0.6); color: #d8dee9; font-weight: bold; } calendar.raven-calendar:backdrop { background-color: transparent; } calendar.raven-calendar.header { color: #d8dee9; border: none; border-radius: 0; background-color: transparent; } calendar.raven-calendar button, calendar.raven-calendar button:focus { color: alpha(currentColor,0.5); background-color: transparent; } calendar.raven-calendar button:hover, calendar.raven-calendar button:focus:hover { color: #3b4252; background-color: transparent; } .raven-mpris { color: #3b4252; background-color: rgba(229, 233, 240, 0.9); border: solid rgba(255, 255, 255, 0.2); border-width: 1px 0; border-bottom-color: rgba(0, 0, 0, 0.2); } .raven-mpris button.image-button { padding: 10px; background-color: #e5e9f0; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.2); } .raven-mpris button.image-button:hover { background-color: #81a1c1; } .raven-mpris button.image-button:active { background-color: #7094b9; } .raven-mpris button.image-button:first-child { margin-right: 4px; } .raven-mpris button.image-button:last-child { margin-left: 4px; } .raven-mpris button.image-button:last-child, .raven-mpris button.image-button:first-child { padding: 4px; margin-top: 6px; margin-bottom: 6px; } .budgie-notification-window, .budgie-osd-window, .budgie-switcher-window { background: none; border-radius: 1px; } .budgie-notification-window button, .budgie-osd-window button, .budgie-switcher-window button { background-color: #81a1c1; color: #fefefe; border: none; } .budgie-notification-window button:hover, .budgie-osd-window button:hover, .budgie-switcher-window button:hover { background-color: #7094b9; border: none; } .budgie-notification-window button:active, .budgie-osd-window button:active, .budgie-switcher-window button:active, .budgie-notification-window button:checked, .budgie-osd-window button:checked, .budgie-switcher-window button:checked { background-color: #7094b9; } .budgie-notification.background, .background.budgie-osd, .background.budgie-switcher { border-radius: 1px; } .budgie-notification .notification-title, .budgie-osd .notification-title, .budgie-switcher .notification-title { font-size: 110%; color: #d8dee9; } .budgie-notification .notification-body, .budgie-osd .notification-body, .budgie-switcher .notification-body { color: rgba(216, 222, 233, 0.7); } .budgie-notification button, .budgie-osd button, .budgie-switcher button { background-color: transparent; color: #fefefe; } .budgie-notification button:hover, .budgie-osd button:hover, .budgie-switcher button:hover { background-color: transparent; color: #bf616a; box-shadow: none; } .budgie-notification button:active, .budgie-osd button:active, .budgie-switcher button:active, .budgie-notification button:checked, .budgie-osd button:checked, .budgie-switcher button:checked { background-color: transparent; color: #b84f59; } .drop-shadow, .budgie-session-dialog.background, .background.budgie-polkit-dialog, .background.budgie-run-dialog { color: #d8dee9; background-color: rgba(43, 49, 60, 0.95); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); border-radius: 2px; } .budgie-switcher-window flowbox { color: #3b4252; } .budgie-switcher-window flowboxchild { padding: 3px; margin: 3px; color: #3b4252; } .budgie-switcher-window flowboxchild:hover { background-color: transparent; } .budgie-switcher-window flowboxchild:active { color: #3b4252; } .budgie-switcher-window flowboxchild:selected { color: #fefefe; background-color: rgba(129, 161, 193, 0.5); } .budgie-switcher-window flowboxchild:selected:active { color: #fefefe; } .budgie-switcher-window flowboxchild:selected:hover { background-color: #7491ae; } .budgie-switcher-window flowboxchild:selected:disabled { color: rgba(254, 254, 254, 0.7); background-color: rgba(129, 161, 193, 0.7); } .budgie-switcher-window flowboxchild:selected:disabled label { color: rgba(254, 254, 254, 0.7); } .budgie-session-dialog, .budgie-polkit-dialog, .budgie-run-dialog { color: #d8dee9; background-color: #1d2128; } .budgie-session-dialog label:backdrop, .budgie-polkit-dialog label:backdrop, .budgie-run-dialog label:backdrop { color: rgba(216, 222, 233, 0.5); } .budgie-session-dialog .dialog-title, .budgie-polkit-dialog .dialog-title, .budgie-run-dialog .dialog-title { font-size: 120%; } .budgie-session-dialog .linked.horizontal > button, .budgie-polkit-dialog .linked.horizontal > button, .budgie-run-dialog .linked.horizontal > button { margin-bottom: 0; min-height: 32px; border-bottom: none; border-color: #c5cedd; border-radius: 0; color: #d8dee9; background-color: transparent; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), inset 0 1px 2px rgba(0, 0, 0, 0.2); } .budgie-session-dialog .linked.horizontal > button label, .budgie-polkit-dialog .linked.horizontal > button label, .budgie-run-dialog .linked.horizontal > button label { font-weight: 700; } .budgie-session-dialog .linked.horizontal > button:first-child, .budgie-polkit-dialog .linked.horizontal > button:first-child, .budgie-run-dialog .linked.horizontal > button:first-child { border-left: none; border-bottom-left-radius: 2px; } .budgie-session-dialog .linked.horizontal > button:last-child, .budgie-polkit-dialog .linked.horizontal > button:last-child, .budgie-run-dialog .linked.horizontal > button:last-child { border-right: none; border-bottom-right-radius: 2px; background: transparent; } .budgie-session-dialog .linked.horizontal > button:hover, .budgie-polkit-dialog .linked.horizontal > button:hover, .budgie-run-dialog .linked.horizontal > button:hover { background-color: rgba(129, 161, 193, 0.9); color: #fefefe; } .budgie-session-dialog .linked.horizontal > button:hover:backdrop label, .budgie-polkit-dialog .linked.horizontal > button:hover:backdrop label, .budgie-run-dialog .linked.horizontal > button:hover:backdrop label { color: rgba(254, 254, 254, 0.5); } .budgie-session-dialog .linked.horizontal > button.suggested-action, .budgie-polkit-dialog .linked.horizontal > button.suggested-action, .budgie-run-dialog .linked.horizontal > button.suggested-action { background-color: rgba(129, 161, 193, 0.9); } .budgie-session-dialog .linked.horizontal > button.suggested-action:hover, .budgie-polkit-dialog .linked.horizontal > button.suggested-action:hover, .budgie-run-dialog .linked.horizontal > button.suggested-action:hover { background-color: rgba(146, 174, 201, 0.9); } .budgie-session-dialog .linked.horizontal > button.suggested-action:active, .budgie-polkit-dialog .linked.horizontal > button.suggested-action:active, .budgie-run-dialog .linked.horizontal > button.suggested-action:active, .budgie-session-dialog .linked.horizontal > button.suggested-action:checked, .budgie-polkit-dialog .linked.horizontal > button.suggested-action:checked, .budgie-run-dialog .linked.horizontal > button.suggested-action:checked { background-color: rgba(146, 174, 201, 0.9); } .budgie-session-dialog .linked.horizontal > button.destructive-action, .budgie-polkit-dialog .linked.horizontal > button.destructive-action, .budgie-run-dialog .linked.horizontal > button.destructive-action { background-color: rgba(184, 79, 89, 0.9); } .budgie-session-dialog .linked.horizontal > button.destructive-action:hover, .budgie-polkit-dialog .linked.horizontal > button.destructive-action:hover, .budgie-run-dialog .linked.horizontal > button.destructive-action:hover { background-color: rgba(191, 97, 106, 0.9); } .budgie-session-dialog .linked.horizontal > button.destructive-action:active, .budgie-polkit-dialog .linked.horizontal > button.destructive-action:active, .budgie-run-dialog .linked.horizontal > button.destructive-action:active, .budgie-session-dialog .linked.horizontal > button.destructive-action:checked, .budgie-polkit-dialog .linked.horizontal > button.destructive-action:checked, .budgie-run-dialog .linked.horizontal > button.destructive-action:checked { background-color: rgba(191, 97, 106, 0.9); } .budgie-session-dialog entry, .budgie-polkit-dialog entry, .budgie-run-dialog entry { background-color: #505359; color: #d8dee9; } .budgie-session-dialog entry:focus, .budgie-polkit-dialog entry:focus, .budgie-run-dialog entry:focus { background-color: #505359; } .budgie-session-dialog entry:backdrop, .budgie-polkit-dialog entry:backdrop, .budgie-run-dialog entry:backdrop { background-color: #505359; } .budgie-polkit-dialog .message { color: rgba(216, 222, 233, 0.7); } .budgie-polkit-dialog .failure { color: #bf616a; } .budgie-run-dialog entry.search, .budgie-run-dialog entry.search:focus { font-size: 120%; padding: 8px 5px; border: none; box-shadow: none; } .budgie-run-dialog entry.search image, .budgie-run-dialog entry.search:focus image { color: #d8dee9; } .budgie-run-dialog entry.search image:dir(ltr), .budgie-run-dialog entry.search:focus image:dir(ltr) { padding-left: 8px; padding-right: 12px; } .budgie-run-dialog entry.search image:dir(rtl), .budgie-run-dialog entry.search:focus image:dir(rtl) { padding-left: 12px; padding-right: 8px; } .budgie-run-dialog list row:selected .dim-label, .budgie-run-dialog list row:selected label.separator, .budgie-run-dialog list row:selected .titlebar .subtitle, .titlebar .budgie-run-dialog list row:selected .subtitle, .budgie-run-dialog list row:selected headerbar .subtitle, headerbar .budgie-run-dialog list row:selected .subtitle { opacity: 1; } .budgie-run-dialog scrolledwindow { border-top: 1px solid rgba(0, 0, 0, 0); } .budgie-menubar menu { margin: 4px; padding: 5px; border-radius: 0; background-color: #1d2128; } .budgie-menubar menu menuitem:hover { background-color: #81a1c1; color: #fefefe; } .budgie-menubar arrow { border: none; min-width: 16px; min-height: 16px; } .budgie-menubar arrow.top { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); border-bottom: 1px solid #2c313c; } .budgie-menubar arrow.bottom { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); border-top: 1px solid #2c313c; } .budgie-menubar menuitem accelerator { color: rgba(59, 66, 82, 0.35); } .budgie-menubar menuitem check, .budgie-menubar menuitem radio { min-height: 16px; min-width: 16px; } window.background.budgie-settings-window.csd > box.horizontal > stack > scrolledwindow buttonbox.inline-toolbar { border-style: none none solid; } .workspace-switcher .workspace-layout { border: 0 solid #1d2128; } .top .workspace-switcher .workspace-layout:dir(ltr), .bottom .workspace-switcher .workspace-layout:dir(ltr) { border-left-width: 1px; } .top .workspace-switcher .workspace-layout:dir(rtl), .bottom .workspace-switcher .workspace-layout:dir(rtl) { border-right-width: 1px; } .left .workspace-switcher .workspace-layout, .right .workspace-switcher .workspace-layout { border-top-width: 1px; } .workspace-switcher .workspace-item, .workspace-switcher .workspace-add-button { border: 0 solid #323946; } .top .workspace-switcher .workspace-item:dir(ltr), .bottom .workspace-switcher .workspace-item:dir(ltr), .top .workspace-switcher .workspace-add-button:dir(ltr), .bottom .workspace-switcher .workspace-add-button:dir(ltr) { border-right-width: 1px; } .top .workspace-switcher .workspace-item:dir(rtl), .bottom .workspace-switcher .workspace-item:dir(rtl), .top .workspace-switcher .workspace-add-button:dir(rtl), .bottom .workspace-switcher .workspace-add-button:dir(rtl) { border-left-width: 1px; } .left .workspace-switcher .workspace-item, .right .workspace-switcher .workspace-item, .left .workspace-switcher .workspace-add-button, .right .workspace-switcher .workspace-add-button { border-bottom-width: 1px; } .workspace-switcher .workspace-item.current-workspace { background-color: #121519; } .workspace-switcher .workspace-add-button { border: none; background: transparent; } .workspace-switcher .workspace-add-button:hover { box-shadow: none; } .workspace-switcher .workspace-add-button:active { background-image: none; } .workspace-switcher .workspace-add-button:active image { margin: 1px 0 -1px; } .budgie-panel .workspace-switcher .workspace-icon-button { min-height: 24px; min-width: 24px; padding: 0; border-radius: 2px; } /************ * Nautilus * ************/ .nautilus-window .frame *:selected, .nautilus-window .frame *:selected:backdrop { background: transparent; color: #81a1c1; } .nautilus-window .frame *:selected label, .nautilus-window .frame *:selected:backdrop label { color: #81a1c1; } .nautilus-window paned > separator { background-image: none; } .nautilus-window .sidebar { background-color: transparent; } .nautilus-window .sidebar:backdrop { background-color: transparent; } .nautilus-window .sidebar .list-row button { border: none; background-color: rgba(219, 225, 234, 0.95); } .nautilus-window .sidebar .list-row button:active { background-color: rgba(129, 161, 193, 0.75); } .nautilus-window .sidebar .list-row:selected { background-color: rgba(129, 161, 193, 0.75); } .nautilus-window .sidebar .list-row:selected:hover { background-color: rgba(129, 161, 193, 0.9); } .nautilus-window .sidebar .list-row:hover { background-color: rgba(229, 233, 240, 0.5); } .nautilus-window .sidebar .list-row:hover:active { background-color: rgba(129, 161, 193, 0.9); } .nautilus-window.background { background-color: rgba(219, 225, 234, 0.95); } .nautilus-window.background:backdrop { background-color: rgba(219, 225, 234, 0.95); } .nautilus-window notebook > stack:only-child { background-color: #e5e9f0; } .nautilus-window notebook > stack:only-child:backdrop { background-color: #e2e6ee; } .nautilus-window searchbar { border-top: 1px solid rgba(0, 0, 0, 0.12); } .nautilus-window .searchbar-container { margin-top: -1px; } .nautilus-circular-button { border-radius: 20px; -gtk-outline-radius: 20px; } .disk-space-display { border: 2px solid; } .disk-space-display .unknown { background-color: #888a85; border-color: #555653; } .disk-space-display .used { background-color: #9FB0B9; border-color: #667f8c; } .disk-space-display .free { background-color: #D8D8D8; border-color: #a5a5a5; } .nautilus-desktop { color: #3b4252; } .nautilus-desktop .nautilus-canvas-item { border-radius: 5px; color: #fefefe; text-shadow: 1px 1px rgba(0, 0, 0, 0.6); } .nautilus-desktop .nautilus-canvas-item:active { color: #3b4252; text-shadow: none; } .nautilus-desktop .nautilus-canvas-item:hover { color: #3b4252; text-shadow: none; } .nautilus-desktop .nautilus-canvas-item:selected { color: #fefefe; text-shadow: none; } .nautilus-desktop .nautilus-canvas-item .dim-label:selected, .nautilus-desktop .nautilus-canvas-item label.separator:selected, .nautilus-desktop .nautilus-canvas-item .titlebar .subtitle:selected, .titlebar .nautilus-desktop .nautilus-canvas-item .subtitle:selected, .nautilus-desktop .nautilus-canvas-item headerbar .subtitle:selected, headerbar .nautilus-desktop .nautilus-canvas-item .subtitle:selected { color: #fefefe; } .nautilus-desktop .nautilus-list .dim-label:selected, .nautilus-desktop .nautilus-list label.separator:selected, .nautilus-desktop .nautilus-list .titlebar .subtitle:selected, .titlebar .nautilus-desktop .nautilus-list .subtitle:selected, .nautilus-desktop .nautilus-list headerbar .subtitle:selected, headerbar .nautilus-desktop .nautilus-list .subtitle:selected { color: #fefefe; } /********* * Gedit * *********/ .gedit-search-slider { padding: 4px; border-radius: 0 0 3px 3px; border: 0; background-color: #d8dee9; } /********* * Gnucash * *********/ .GncMainWindow entry.register-foreground { background: transparent; border: none; } /******************* * Calendar events * ********************/ .color-light.timed label { color: #3b4252; opacity: 1; } .week-view .color-light.timed label, .color-light label, .year-view .color-light:not(.timed) label { color: #3b4252; opacity: 1; } /******** * Gala * *******/ .gala-notification { border-width: 0; border-radius: 2px; color: white; border: 1px solid #e5e9f0; background-color: #e5e9f0; } .gala-notification .title, .gala-notification .label { color: #3b4252; } .gala-button { padding: 3px; color: #e5e9f0; border: none; border-radius: 50%; background-image: linear-gradient(to bottom, #7e7e7e, #3e3e3e); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.98), inset 0 1px 0 0 rgba(255, 255, 255, 0.93), inset 0 -1px 0 0 rgba(255, 255, 255, 0.99), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 3px 6px rgba(0, 0, 0, 0.84), 0 3px 6px rgba(0, 0, 0, 0.77); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); } /********** * Notify * *********/ .notify { /*-notify-shadow: 0px 2px 18px transparentize(black, 0.60);*/ border-radius: 5px; border: 1px solid rgba(0, 0, 0, 0.7); background-color: rgba(229, 233, 240, 0.05); } /*************** * SwitchBoard * ***************/ .category-label { font-weight: bold; color: #3b4252; } /************* * Slingshot * ************/ .button.app { border: none; border-radius: 0; box-shadow: none; background-image: none; } .button.app .app:hover { border-radius: 8px; border: none; background-color: rgba(129, 161, 193, 0.3); color: white; } .button.app .app:focus { /*background-color: transparentize(black, 0.20);*/ } .search-item { border-radius: 0; border: none; color: #3b4252; background: none; } .search-item:hover, .search-item:focus { border-radius: 0; background-color: rgba(129, 161, 193, 0.3); color: #fefefe; } .search-entry-large, .search-entry-large:focus { border: none; font-size: 18px; font-weight: 300; background-image: none; background: none; box-shadow: none; border-radius: 0; } .search-category-header { font-weight: bold; color: #3b4252; } /********* * Panel * ********/ .composited-indicator > revealer, .composited-indicator > revealer image, .composited-indicator > revealer label, .composited-indicator > revealer spinner { color: #d8dee9; font-weight: bold; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5); transition: all 200ms ease-in-out; -gtk-icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5); } .composited-indicator > revealer image:first-child + label { margin-left: 5px; } .panel.color-light .composited-indicator > revealer, .panel.color-light .composited-indicator > revealer image, .panel.color-light .composited-indicator > revealer label, .panel.color-light .composited-indicator > revealer spinner { color: rgba(0, 0, 0, 0.6); text-shadow: 0 1px rgba(255, 255, 255, 0.1); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.1); } /************** * Calculator * **************/ PantheonCalculatorMainWindow { border-radius: 0 0 4px 4px; } PantheonCalculatorMainWindow .window-frame { border-radius: 3px; } /********* * Cards * *********/ .deck { background-color: #bec8da; } .card { background-color: #e5e9f0; border: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 3px 3px rgba(0, 0, 0, 0.2); transition: all 150ms ease-in-out; } .card.collapsed { background-color: #d5dbe7; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.2); } /********* * Noise * *********/ NoiseLibraryWindow { border-radius: 0 0 4px 4px; } NoiseLibraryWindow .action-bar { border-radius: 0 0 4px 4px; } NoiseLibraryWindow .window-frame { border-radius: 3px; } /******** * Snap * ********/ SnapMainWindow .take-button, SnapSnapWindow .take-button { border-radius: 0; } /******************* * Photos/Shotwell * *******************/ DirectWindow .the-button-in-the-combobox, LibraryWindow .the-button-in-the-combobox { background: none; } .checkerboard-layout { background-color: #d8dee9; background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1)), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1)); background-size: 24px 24px; background-position: 0 0, 12px 12px; } .checkboard-layout .item { background-color: #3b4252; } /********* * Avatar * *********/ .avatar { border: 1px solid rgba(0, 0, 0, 0.23); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 0 rgba(255, 255, 255, 0.15), 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.23); } /**level bars**/ .sidebar .source-list.view.level-bar, .sidebar iconview.source-list.level-bar, .sidebar .source-list.view.level-bar:selected, .sidebar iconview.source-list.level-bar:selected, .sidebar .source-list.view.level-bar:selected:focus, .sidebar iconview.source-list.level-bar:selected:focus { background: linear-gradient(to right, #485164, #485164); border: 1px solid rgba(0, 0, 0, 0.14); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); border-radius: 2px; } .sidebar .source-list.view.level-bar.fill-block, .sidebar iconview.source-list.level-bar.fill-block { border: none; } .sidebar .source-list.view.fill-block, .sidebar iconview.source-list.fill-block, .sidebar .source-list.view.fill-block:hover, .sidebar iconview.source-list.fill-block:hover, .sidebar .source-list.view.fill-block:selected, .sidebar iconview.source-list.fill-block:selected, .sidebar .source-list.view.fill-block:selected:focus, .sidebar iconview.source-list.fill-block:selected:focus { background: linear-gradient(to right, #ebcb8b, #ebcb8b); } /************************** * Colors in context menu * **************************/ checkbutton.color-button { border: 1px solid #c5cedd; border-radius: 100px; background-clip: border-box; padding: 0; margin: 2px 1px; } checkbutton.color-button > check { -gtk-icon-source: none; background: none; margin-right: 0; padding: 2px; } checkbutton.color-button.none > check { background-color: transparent; border-radius: 100px; -gtk-icon-source: -gtk-icontheme("close-symbolic"); } radiobutton.color-button > radio { -gtk-icon-source: none; margin-right: 0; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 100px; background-clip: border-box; } radiobutton.color-button:active > radio { border: 1px solid rgba(0, 0, 0, 0.35); } .color-button check, .color-button check:checked, .color-button radio, .color-button radio:checked { background-image: none; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 50%; color: #e5e9f0; -gtk-icon-source: -gtk-icontheme("check-active-symbolic"); } .color-button.red check, .color-button.red radio, .color-button.strawberry check, .color-button.strawberry radio { background-color: @STRAWBERRY_300; -gtk-icon-shadow: 0 1px 1px @STRAWBERRY_500; } .color-button.orange check, .color-button.orange radio { background-color: @ORANGE_300; -gtk-icon-shadow: 0 1px 1px @ORANGE_500; } .color-button.yellow check, .color-button.yellow radio, .color-button.banana check, .color-button.banana radio { background-color: @BANANA_500; -gtk-icon-shadow: 0 1px 1px @BANANA_700; } .color-button.green check, .color-button.green radio, .color-button.lime check, .color-button.lime radio { background-color: @LIME_500; -gtk-icon-shadow: 0 1px 1px @LIME_700; } .color-button.blue check, .color-button.blue radio, .color-button.blueberry check, .color-button.blueberry radio { background-color: @BLUEBERRY_500; -gtk-icon-shadow: 0 1px 1px @BLUEBERRY_700; } .color-button.purple check, .color-button.purple radio, .color-button.grape check, .color-button.grape radio { background-color: @GRAPE_500; -gtk-icon-shadow: 0 1px 1px @GRAPE_700; } .color-button.brown check, .color-button.brown radio, .color-button.cocoa check, .color-button.cocoa radio { background-color: @COCOA_300; -gtk-icon-shadow: 0 1px 1px @COCOA_500; } .color-button.mint check, .color-button.mint radio { background-color: @MINT_500; -gtk-icon-shadow: 0 1px 1px @MINT_700; } .color-button.pink check, .color-button.pink radio, .color-button.bubblegum check, .color-button.bubblegum radio { background-color: @BUBBLEGUM_500; -gtk-icon-shadow: 0 1px 1px @BUBBLEGUM_700; } .color-button.slate check, .color-button.slate radio { background-color: @SLATE_300; -gtk-icon-shadow: 0 1px 1px @SLATE_500; } .color-button.auto radio { background-image: url("assets/color-button-auto.png"); background-position: -1px -1px; background-repeat: no-repeat; background-size: calc(100% + 2px); } .xfce4-panel { border-radius: 0; } .xfce4-panel.panel { background-color: #2e3440; color: #d8dee9; text-shadow: none; -gtk-icon-shadow: none; } .xfce4-panel.panel progressbar trough { background-color: rgba(255, 255, 255, 0.14); } #tasklist-button { color: rgba(216, 222, 233, 0.8); border-radius: 0; border: none; background-color: #2e3440; } #tasklist-button:hover { color: #f9fafb; background-color: rgba(0, 0, 0, 0.17); } #tasklist-button:checked { color: white; background-color: rgba(0, 0, 0, 0.25); box-shadow: inset 0 -2px #81a1c1; } .xfce4-panel.panel button.flat:not(.open_group), .mate-panel-menu-bar button:not(#tasklist-button), panel-toplevel.background button:not(#tasklist-button) { color: #d8dee9; border-radius: 0; border: none; background-color: #2e3440; } .xfce4-panel.panel button.flat:hover:not(.open_group), .mate-panel-menu-bar button:hover:not(#tasklist-button), panel-toplevel.background button:hover:not(#tasklist-button) { border: none; background-color: #434c5e; } .xfce4-panel.panel button.flat:active:not(.open_group), .mate-panel-menu-bar button:active:not(#tasklist-button), panel-toplevel.background button:active:not(#tasklist-button), .xfce4-panel.panel button.flat:checked:not(.open_group), .mate-panel-menu-bar button:checked:not(#tasklist-button), panel-toplevel.background button:checked:not(#tasklist-button) { color: #d8dee9; border: none; background-color: rgba(129, 161, 193, 0.1); box-shadow: 0px -2px #81a1c1 inset; } .xfce4-panel.panel button.flat:active:not(.open_group) label, .mate-panel-menu-bar button:active:not(#tasklist-button) label, panel-toplevel.background button:active:not(#tasklist-button) label, .xfce4-panel.panel button.flat:active:not(.open_group) image, .mate-panel-menu-bar button:active:not(#tasklist-button) image, panel-toplevel.background button:active:not(#tasklist-button) image, .xfce4-panel.panel button.flat:checked:not(.open_group) label, .mate-panel-menu-bar button:checked:not(#tasklist-button) label, panel-toplevel.background button:checked:not(#tasklist-button) label, .xfce4-panel.panel button.flat:checked:not(.open_group) image, .mate-panel-menu-bar button:checked:not(#tasklist-button) image, panel-toplevel.background button:checked:not(#tasklist-button) image { color: inherit; } #whiskermenu-window button { background-color: transparent; border: none; border-radius: 0; font-weight: normal; padding: 3px; margin: 1px 2px; } #whiskermenu-window button:hover, #whiskermenu-window button:checked { background-color: #81a1c1; } /* Vala-appmenu-plugin*/ .-vala-panel-appmenu-core scrolledwindow, .-vala-panel-appmenu-private > menuitem, .-vala-panel-appmenu-private > menuitem:first-child > label { color: #d8dee9; } /******** * Unity * *********/ /* Unity window border color */ /* Unity window text color */ /* Backdrop Unity window text color */ /* Unity panel color #454D50 */ UnityDecoration { /* Border properties (top, right, bottom, left) */ -UnityDecoration-extents: 28px 1px 1px 1px; /* the size of the decorations */ -UnityDecoration-input-extents: 10px; /* the extra size of the input areas */ /* Shadows settings */ -UnityDecoration-shadow-offset-x: 1px; /* Size property, the shadow x offset */ -UnityDecoration-shadow-offset-y: 1px; /* Size property, the shadow y offset */ -UnityDecoration-active-shadow-color: rgba 0, 0, 0, 0.647; /* Color property, active window shadow color */ -UnityDecoration-active-shadow-radius: 8px; /* Size property, active window shadow radius */ -UnityDecoration-inactive-shadow-color: rgba 0, 0, 0, 0.647; /* Color property, inactive windows shadow color */ -UnityDecoration-inactive-shadow-radius: 5px; /* Size property, inactive windows shadow radius */ /* Glow applied to the selected scaled window */ -UnityDecoration-glow-size: 8px; /* Size property, size of glow */ -UnityDecoration-glow-color: #81a1c1; /* Color property of the glow */ /* Title settings */ -UnityDecoration-title-indent: 10px; /* Size property, left indent of the title */ -UnityDecoration-title-fade: 35px; /* Size property, space of the title that can be faded */ -UnityDecoration-title-alignment: 0.0; /* Float from 0.0 to 1.0, to align the title */ background-color: #eeeeee; color: #31363D; } UnityDecoration .top { padding: 0 5px 0 5px; border-radius: 4px 4px 0px 0px; box-shadow: none; border: 1px solid #eeeeee; border-bottom-width: 0; background-color: #eeeeee; color: #31363D; border-top: 1px solid rgba(255, 255, 255, 0.1); } UnityDecoration .top:backdrop { border-bottom-width: 0; color: #1a1d21; border-top: 1px solid rgba(255, 255, 255, 0.1); } UnityDecoration .top .menuitem { color: #31363D; } UnityDecoration .top .menuitem:backdrop { color: #1a1d21; } UnityDecoration.left, UnityDecoration.right { background-repeat: repeat-x; background-color: #ececec; background-size: 1px 120px; background-clip: border-box; background-image: linear-gradient(to bottom, #eeeeee, #ececec); } UnityDecoration.bottom { background-size: 1px; background-repeat: repeat-x; background-color: #ececec; } UnityDecoration.left:backdrop, UnityDecoration.right:backdrop, UnityDecoration.bottom:backdrop { background-size: 1px; background-repeat: repeat-x; } /************** * Unity Panel * ***************/ UnityPanelWidget, .unity-panel { background-color: #d5d5d5; color: #31363D; } UnityPanelWidget:backdrop, .unity-panel:backdrop { color: #1a1d21; } .unity-panel.menuitem, .unity-panel .menuitem { border-width: 0 1px; color: #31363D; } .unity-panel.menubar, .unity-panel .menubar { color: #31363D; } .unity-panel.menu.menubar, .unity-panel .menu .menubar { background-color: #d5d5d5; color: #31363D; } .unity-panel.menubar:backdrop, .unity-panel .menubar *:backdrop { color: #8a909e; } .unity-panel.menubar.menuitem, .unity-panel.menubar .menuitem { padding: 3px 5px; border-width: 1px; border-style: solid; border: none; background: none; color: #31363D; box-shadow: none; } .unity-panel.menubar.menuitem:hover, .unity-panel.menubar .menuitem:hover { border-radius: 0; background-color: #ebebeb; color: #31363D; box-shadow: none; } .unity-panel.menubar .menuitem *:hover { color: white; box-shadow: none; } .unity-panel.menubar .menuitem.separator, .unity-panel.menubar.menuitem.separator { border: none; color: #c5cedd; } /* Force Quit */ SheetStyleDialog.unity-force-quit { background-color: #e5e9f0; } @keyframes playbackmenuitem_spinner { to { -gtk-icon-transform: rotate(1turn); } } .menu IdoPlaybackMenuItem.menuitem:active { -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); animation: playbackmenuitem_spinner 1s infinite linear; color: #81a1c1; } .mate-panel-menu-bar, panel-toplevel.background { border-radius: 0; } .mate-panel-menu-bar, .mate-panel-menu-bar menubar, panel-toplevel.background, panel-toplevel.background menubar { background-color: #2e3440; } .mate-panel-menu-bar menubar, .mate-panel-menu-bar #PanelApplet label, .mate-panel-menu-bar #PanelApplet image, panel-toplevel.background menubar, panel-toplevel.background #PanelApplet label, panel-toplevel.background #PanelApplet image { color: #d8dee9; } .mate-panel-menu-bar button label, .mate-panel-menu-bar button image, .mate-panel-menu-bar #tasklist-button label, .mate-panel-menu-bar #tasklist-button image, panel-toplevel.background button label, panel-toplevel.background button image, panel-toplevel.background #tasklist-button label, panel-toplevel.background #tasklist-button image { color: inherit; } .mate-panel-menu-bar .wnck-pager, panel-toplevel.background .wnck-pager { color: #6c6f75; background-color: #282d37; } .mate-panel-menu-bar .wnck-pager:hover, panel-toplevel.background .wnck-pager:hover { background-color: #39404f; } .mate-panel-menu-bar .wnck-pager:selected, panel-toplevel.background .wnck-pager:selected { color: #c5d4e3; background-color: #81a1c1; } .mate-panel-menu-bar na-tray-applet, panel-toplevel.background na-tray-applet { -NaTrayApplet-icon-padding: 0; -NaTrayApplet-icon-size: 16px; } MsdOsdWindow.background.osd { border-radius: 2px; border: 1px solid #c5cedd; } MsdOsdWindow.background.osd .progressbar { background-color: #81a1c1; border: none; border-color: #81a1c1; border-radius: 5px; } MsdOsdWindow.background.osd .trough { background-color: rgba(29, 33, 40, 0.93); border: none; border-radius: 5px; } .caja-notebook .frame { border-width: 0 0 1px; } .caja-notebook .entry { background: #d8dee9; color: #3b4252; border-color: #c5cedd; } .caja-notebook .entry:selected { background: #81a1c1; color: #fefefe; } /************** * Caja sidebar * **************/ .caja-side-pane { background: #282d37; } .caja-side-pane .frame { border-width: 0px; } .caja-side-pane button, .caja-side-pane button label { color: #d8dee9; } .caja-side-pane treeview.view, .caja-side-pane textview.view text, .caja-side-pane viewport.frame, .caja-side-pane widget .vertical { background: #282d37; padding: 3px 2px; color: #d8dee9; } .caja-side-pane treeview.view:hover, .caja-side-pane textview.view text:hover, .caja-side-pane viewport.frame:hover, .caja-side-pane widget .vertical:hover { background-color: rgba(50, 57, 70, 0.95); } .caja-side-pane treeview.view:selected, .caja-side-pane textview.view text:selected, .caja-side-pane viewport.frame:selected, .caja-side-pane widget .vertical:selected { background: rgba(50, 57, 70, 0.93); } .caja-side-pane treeview.view:selected:hover, .caja-side-pane textview.view text:selected:hover, .caja-side-pane viewport.frame:selected:hover, .caja-side-pane widget .vertical:selected:hover { background: rgba(50, 57, 70, 0.93); color: #fff; } /************** * Caja pathbar * **************/ .caja-navigation-window paned { background: #e5e9f0; } .caja-navigation-window .primary-toolbar { background: #2b313c; } .caja-navigation-window .primary-toolbar button, .caja-navigation-window .primary-toolbar button label { color: #d8dee9; } .caja-navigation-window .primary-toolbar button, .caja-navigation-window .primary-toolbar button:backdrop { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } .caja-navigation-window .primary-toolbar button:hover, .caja-navigation-window .primary-toolbar button:active, .caja-navigation-window .primary-toolbar button:backdrop:active, .caja-navigation-window .primary-toolbar button:backdrop:checked { background: #81a1c1; box-shadow: none; } .caja-navigation-window .primary-toolbar button:hover, .caja-navigation-window .primary-toolbar button:hover label, .caja-navigation-window .primary-toolbar button:active, .caja-navigation-window .primary-toolbar button:active label, .caja-navigation-window .primary-toolbar button:backdrop:active, .caja-navigation-window .primary-toolbar button:backdrop:active label, .caja-navigation-window .primary-toolbar button:backdrop:checked, .caja-navigation-window .primary-toolbar button:backdrop:checked label { color: #fefefe; } .caja-pathbar button { font-weight: normal; color: #3b4252; background-color: #e3e7ef; text-shadow: none; border-radius: 0px; border-right: 1px solid #c5cedd; border-left: none; box-shadow: none; min-height: 20px; padding: 3px 5px; margin-right: -3px; } .caja-pathbar button:first-child { border-left: 1px solid #c5cedd; } .caja-pathbar button:hover { color: #fff; outline-color: rgba(255, 255, 255, 0.3); background-color: rgba(129, 161, 193, 0.7); text-shadow: none; } .caja-pathbar button:checked { color: #fff; outline-color: rgba(255, 255, 255, 0.3); background-color: #81a1c1; text-shadow: none; } /*********************** * App-Specific Styles * ***********************/ /********* * Geary * *********/ .geary-titlebar-left .separator, .geary-titlebar-right .separator { opacity: 0; } ConversationListView { -GtkTreeView-grid-line-width: 0; } ConversationListView .view:active, ConversationListView iconview:active, ConversationListView .view:selected, ConversationListView iconview:selected { background-color: #81a1c1; color: #fefefe; } ConversationListView .view:active:backdrop, ConversationListView iconview:active:backdrop, ConversationListView .view:selected:backdrop, ConversationListView iconview:selected:backdrop { background-color: rgba(129, 161, 193, 0.6); color: #fefefe; } ConversationListView .view .cell, ConversationListView iconview .cell { border: solid rgba(0, 0, 0, 0.2); border-width: 0 0 1px 0; } ConversationListView .view .cell:selected, ConversationListView iconview .cell:selected { color: #fefefe; border: 0px solid #5f88b0; } /*********** * LightDm * ***********/ #panel_window { background-color: #2e3440; color: #d8dee9; font-weight: bold; box-shadow: inset 0 -1px #1f232b; } #panel_window .menubar, #panel_window .menubar > .menuitem menubar, #panel_window menubar > menuitem { background-color: transparent; color: #d8dee9; font-weight: bold; } #panel_window .menubar .menuitem:disabled, #panel_window menubar menuitem:disabled { color: rgba(216, 222, 233, 0.5); } #panel_window .menubar .menuitem:disabled GtkLabel, #panel_window menubar menuitem:disabled GtkLabel { color: inherit; } #panel_window .menubar .menuitem:disabled label, #panel_window menubar menuitem:disabled label { color: inherit; } #panel_window .menubar .menu > .menuitem, #panel_window menubar menu > menuitem { font-weight: normal; } #login_window, #shutdown_dialog, #restart_dialog { font-weight: normal; border-style: none; background-color: transparent; color: #3b4252; } #content_frame { padding-bottom: 14px; background-color: #d8dee9; border-top-left-radius: 2px; border-top-right-radius: 2px; border: solid rgba(0, 0, 0, 0.1); border-width: 1px 1px 0 1px; } #content_frame button { font-weight: normal; color: #3b4252; background-color: #e3e7ef; text-shadow: none; } #content_frame button:hover { color: #3b4252; outline-color: rgba(59, 66, 82, 0.3); background-color: #e5e9f0; text-shadow: none; } #content_frame button:active, #content_frame button:checked { color: #3b4252; outline-color: rgba(59, 66, 82, 0.3); background-color: #81a1c1; text-shadow: none; } #content_frame button:disabled { color: #5c6371; outline-color: rgba(59, 66, 82, 0.3); background-color: #dde2ec; text-shadow: none; } #buttonbox_frame { padding-top: 20px; padding-bottom: 0px; border-style: none; background-color: rgba(40, 45, 55, 0.93); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border: solid rgba(0, 0, 0, 0.1); border-width: 0 1px 1px 1px; } #buttonbox_frame button { color: #d8dee9; border-color: #1f232b; background-color: rgba(40, 45, 55, 0.93); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } #buttonbox_frame button:hover { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(65, 74, 91, 0.93), rgba(65, 74, 91, 0.93)); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } #buttonbox_frame button:active, #buttonbox_frame button:checked { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(52, 59, 73, 0.93), rgba(52, 59, 73, 0.93)); background-clip: padding-box; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(216, 222, 233, 0.3); } #buttonbox_frame button:disabled { color: #808690; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(58, 63, 73, 0.5), rgba(58, 63, 73, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } #login_window #user_combobox { color: #3b4252; font-size: 13px; } #login_window #user_combobox .menu, #login_window #user_combobox menu { font-weight: normal; } #user_image { padding: 3px; border-radius: 2px; } #greeter_infobar { border-bottom-width: 0; font-weight: bold; } .nemo-window .places-treeview { -NemoPlacesTreeView-disk-full-bg-color: #485164; -NemoPlacesTreeView-disk-full-fg-color: #ebcb8b; -GtkTreeView-vertical-separator: 10; } .nemo-window .places-treeview .view.cell:hover, .nemo-window .places-treeview iconview.cell:hover, .nemo-window .places-treeview iconview.cell:hover { background: rgba(33, 38, 46, 0.7); } .nemo-window .places-treeview .view.cell:selected, .nemo-window .places-treeview iconview.cell:selected, .nemo-window .places-treeview iconview.cell:selected { background: #81a1c1; color: #fefefe; } .nemo-window .sidebar { background-color: #282d37; } .nemo-window .sidebar .view, .nemo-window .sidebar iconview, .nemo-window .sidebar .iconview, .nemo-window .sidebar row { color: #d8dee9; background-color: transparent; } .nemo-window .nemo-window-pane widget.entry { background-clip: padding-box; min-height: 28px; padding: 5px; color: #3b4252; border: 1px solid #81a1c1; border-radius: 4px; box-shadow: 0px 0px 1px 1px #81a1c1 inset; } .nemo-window .nemo-window-pane widget.entry:selected { background-color: #81a1c1; color: #fefefe; } .nemo-window toolbar.primary-toolbar { margin-bottom: -1px; background: #2b313c; } .nemo-window toolbar.primary-toolbar button, .nemo-window toolbar.primary-toolbar .horizontal > button.flat.image-button { color: #d8dee9; border-radius: 4px; text-shadow: none; box-shadow: none; border: 1px solid #1f232b; background-color: #343b48; } .nemo-window toolbar.primary-toolbar button:hover, .nemo-window toolbar.primary-toolbar .horizontal > button.flat.image-button:hover { color: #fefefe; text-shadow: none; background-color: rgba(129, 161, 193, 0.8); border-color: #1f232b; } .nemo-window toolbar.primary-toolbar button:selected, .nemo-window toolbar.primary-toolbar button:active, .nemo-window toolbar.primary-toolbar button:checked, .nemo-window toolbar.primary-toolbar .horizontal > button.flat.image-button:selected, .nemo-window toolbar.primary-toolbar .horizontal > button.flat.image-button:active, .nemo-window toolbar.primary-toolbar .horizontal > button.flat.image-button:checked { color: #fefefe; outline-color: rgba(254, 254, 254, 0.3); background-color: #81a1c1; text-shadow: none; } .nemo-window toolbar.primary-toolbar button:selected:backdrop, .nemo-window toolbar.primary-toolbar button:active:backdrop, .nemo-window toolbar.primary-toolbar button:checked:backdrop, .nemo-window toolbar.primary-toolbar .horizontal > button.flat.image-button:selected:backdrop, .nemo-window toolbar.primary-toolbar .horizontal > button.flat.image-button:active:backdrop, .nemo-window toolbar.primary-toolbar .horizontal > button.flat.image-button:checked:backdrop { color: #fefefe; background-color: rgba(129, 161, 193, 0.6); border-color: #1f232b; text-shadow: none; box-shadow: none; } .nemo-window toolbar.primary-toolbar button:backdrop, .nemo-window toolbar.primary-toolbar button:disabled, .nemo-window toolbar.primary-toolbar button:backdrop:disabled, .nemo-window toolbar.primary-toolbar .horizontal > button.flat.image-button:backdrop, .nemo-window toolbar.primary-toolbar .horizontal > button.flat.image-button:disabled, .nemo-window toolbar.primary-toolbar .horizontal > button.flat.image-button:backdrop:disabled { color: rgba(216, 222, 233, 0.2); background-color: #2e3440; border-color: #1f232b; text-shadow: none; box-shadow: none; } .nemo-window toolbar.primary-toolbar .path-bar button { border-radius: 0; margin-right: -1px; } .nemo-window toolbar.primary-toolbar .path-bar button:first-child { border-radius: 4px 0px 0px 4px; } .nemo-window toolbar.primary-toolbar .path-bar button:last-child { border-radius: 0px 4px 4px 0px; } .nemo-window toolbar.primary-toolbar .horizontal > button.flat.image-button { background: transparent; border: none; } .nemo-window .nemo-inactive-pane .view, .nemo-window .nemo-inactive-pane iconview, .nemo-window .nemo-inactive-pane iconview { background-color: #dbe1ea; } /* thunar */ .thunar toolbar { background-color: #2b313c; } .thunar toolbar .flat { color: #d8dee9; } /* buttons in toolbar */ .thunar toolbar.horizontal button image { -gtk-icon-transform: scale(0.72); } /* path-bar of thunar */ window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar .path-bar-button, .thunar toolbar .path-bar-button { color: #d8dee9; border-radius: 4px; text-shadow: none; box-shadow: none; border: 1px solid #1f232b; background-color: #343b48; border-radius: 0; border-right: 0.5px solid #1f232b; box-shadow: none; min-height: 20px; padding: 3px 4px; } window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar .path-bar-button:first-child, .thunar toolbar .path-bar-button:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar .path-bar-button:last-child, .thunar toolbar .path-bar-button:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-right-style: solid; } window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar .path-bar-button:only-child, .thunar toolbar .path-bar-button:only-child { border-radius: 4px; border-style: solid; } window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar .path-bar-button:hover, .thunar toolbar .path-bar-button:hover { color: #81a1c1; } window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar .path-bar-button:checked, .thunar toolbar .path-bar-button:checked { color: #fff; outline-color: rgba(255, 255, 255, 0.3); background-color: rgba(129, 161, 193, 0.7); text-shadow: none; } window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar .toggle.path-bar-button:hover, .thunar toolbar .toggle.path-bar-button:hover { color: #fff; outline-color: rgba(255, 255, 255, 0.3); background-color: rgba(129, 161, 193, 0.7); text-shadow: none; } /* thunar sidepane */ .thunar scrolledwindow.sidebar treeview.view { background: #232831; color: #98abb2; padding: 1.5px; } .thunar scrolledwindow.sidebar treeview.view:hover, .thunar scrolledwindow.sidebar treeview.view:selected { background: rgba(129, 161, 193, 0.9); color: #fefefe; border-radius: 0; box-shadow: none; } /*# sourceMappingURL=gtk.css.map */ ================================================ FILE: gtk-3.0/gtk.scss ================================================ $variant: 'light'; @import 'nord'; @import 'colors'; @import 'elementary-colors'; @import 'colors-public'; @import 'drawing'; @import 'common'; @import 'widgets'; @import 'apps'; ================================================ FILE: gtk-3.0/widgets/_action-bars.scss ================================================ /*************** * Action bars * ***************/ .action-bar { background-color: darken($bg_color, 10%); border: solid $borders_color; border-width: 1px 0 0 0; color: $fg_color; box-shadow: none; &:backdrop { background-color: darken($backdrop_bg_color, 10%); box-shadow: none; -gtk-icon-effect: dim; } &:first-child { border-radius: 6px 6px 0px 0px; border-width: 1px 1px 0px 1px; } &:last-child { border-radius: 0 0 6px 6px; border-width: 0px 1px 1px 1px; } } ================================================ FILE: gtk-3.0/widgets/_app-notifications.scss ================================================ /********************* * App Notifications * *********************/ .app-notification, .app-notification.frame { @extend %osd; padding: 10px; border-radius: 0 0 5px 5px; background-color: $osd_bg_color; background-image: linear-gradient(to bottom, transparentize(black, 0.8), transparent 2px); background-clip: padding-box; &:backdrop { background-image: none; transition: $backdrop_transition; } button { @extend %osd_button; } border { border: none; } } ================================================ FILE: gtk-3.0/widgets/_base-states.scss ================================================ /*************** * Base States * ***************/ .background { color: $fg_color; background-color: $bg_color; &:backdrop { color: $backdrop_fg_color; background-color: $backdrop_bg_color; text-shadow: none; -gtk-icon-shadow: none; } } /* These wildcard seems unavoidable, need to investigate. Wildcards are bad and troublesome, use them with care, or better, just don't. Everytime a wildcard is used a kitten dies, painfully. */ selection { background-color: $selected_bg_color; color: $selected_fg_color; } *:disabled { -gtk-icon-effect: dim; } .gtkstyle-fallback { color: $fg_color; background-color: $bg_color; &:hover { color: $fg_color; background-color: lighten($bg_color, 10%); } &:active { color: $fg_color; background-color: darken($bg_color, 10%); } &:disabled { color: $insensitive_fg_color; background-color: $insensitive_bg_color; } &:selected { color: $selected_fg_color; background-color: $selected_bg_color; } } .view, %view { color: $text_color; background-color: $base_color; &:backdrop { color: $backdrop_text_color; background-color: $backdrop_base_color; } &:selected { &:focus, & { @extend %selected_items; border-radius: 3px; } } } .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: 3px; &:selected { @extend %selected_items; outline-offset: -2px; } } } label { caret-color: currentColor; // this shouldn't be needed. &.separator { @extend .dim-label; color: $fg_color; &:backdrop { color: $backdrop_fg_color; } } row:selected &, &:selected { @extend %nobg_selected_items; } selection { background-color: $selected_bg_color; color: $selected_fg_color; } &:disabled { color: $insensitive_fg_color; selection { @extend %selected_items:disabled; } &:backdrop { color: $backdrop_insensitive_color; } } &:backdrop { color: $backdrop_fg_color; selection { @extend %selected_items:backdrop; } } } .dim-label { opacity: 0.55; text-shadow: none; } assistant { .sidebar { background-color: $base_color; border-top: 1px solid $borders_color; &:backdrop { background-color: $backdrop_base_color; border-color: $backdrop_borders_color; } } &.csd .sidebar { border-top-style: none; } .sidebar label { padding: 6px 12px; } .sidebar label.highlight { background-color: mix($bg_color, $fg_color, 80%); } } %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); text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; &:backdrop { text-shadow: none; -gtk-icon-shadow: none; } } *:selected { background: $selected_bg_color; color: $selected_fg_color; } ================================================ FILE: gtk-3.0/widgets/_buttons.scss ================================================ /*********** * Buttons * ***********/ // stuff for .needs-attention $_dot_color: if($variant=='light', $selected_bg_color, lighten($selected_bg_color,15%)); @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 { @at-root %button_basic, & { min-height: 20px; min-width: 16px; padding: 2px 6px; border: 1px solid $borders_color; border-radius: 4px; transition: $button_transition; @include button(normal); &.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: 500ms; @include button(hover,$selected_bg_color,$selected_fg_color); &:active { transition: $button_transition; } } } &:hover { @include button(hover,$selected_bg_color,$selected_fg_color); -gtk-icon-effect: highlight; } &:active, &:checked { @include button(active,darken($selected_bg_color,5%),$selected_fg_color); transition-duration: 50ms; } &:backdrop { &.flat, & { @include button(backdrop); transition: $backdrop_transition; -gtk-icon-effect: none; &:active, &:checked { @include button(backdrop-active); } &:disabled { @include button(backdrop-insensitive); &:active, &:checked { @include button(backdrop-insensitive-active); } } } } &.flat { &:backdrop, &:disabled, &:backdrop:disabled { @include button(undecorated); }} &:disabled { @include button(insensitive); &:active, &:checked { @include button(insensitive-active); } } &.image-button { min-width: 24px; padding-left: 4px; padding-right: 4px; } &.image-button.circular,&.image-button.sidebar-button{ padding: 6px 4px; border-radius: 50px; box-shadow: none; } &.text-button { padding-left: 16px; padding-right: 16px; } &.text-button.image-button { padding-left: 8px; padding-right: 8px; border-radius: 2px; label { padding-left: 8px; padding-right: 8px; } } &:drop(active) { color: $drop_target_color; border-color: $drop_target_color; box-shadow: inset 0 0 0 1px $drop_target_color; } } @at-root %button_selected, & { row:selected & { @if $variant == 'light' { border-color: $selected_borders_color; } &.flat:not(:active):not(:checked):not(:hover):not(disabled) { color: $selected_fg_color; border-color: transparent; &:backdrop { color: if($variant=='light', $backdrop_base_color, $backdrop_fg_color); } } } } // big standalone buttons like in Documents pager &.osd { min-width: 24px; min-height: 20px; &.image-button { min-width: 32px; } color: $osd_fg_color; border-radius: 5px; outline-color: transparentize($osd_fg_color, 0.7); //FIXME: define a color var? @include button(osd); border: none; box-shadow: none; &:hover { @include button(osd-hover); border: none; box-shadow: none; } &:active, &:checked { @include button(osd-active); border: none; box-shadow: none; } &:disabled { &:backdrop, & { @include button(osd-insensitive); border: none; } } &:backdrop { @include button(osd-backdrop); border: none; } } //overlay / OSD style @at-root %osd_button, .osd & { @include button(osd); &:hover { @include button(osd-hover); } &:active, &:checked { &:backdrop, & { @include button(osd-active); }} &:disabled { &:backdrop, & { @include button(osd-insensitive); }} &:backdrop { @include button(osd-backdrop); } &.flat { @include button(osd); box-shadow: none; //FIXME respect no edge on the button mixin text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; &:hover { @include button(osd-hover); } &:disabled { @include button(osd-insensitive); background-image: none; border-color: transparent; box-shadow: none; } &:backdrop { @include button(osd-backdrop); } &:active, &:checked { @include button(osd-active); } } } // Suggested and Destructive Action buttons @each $b_type, $b_color in (suggested-action, $cyan), (destructive-action, $destructive_color) { &.#{$b_type} { border: none; @if $b_type == suggested-action { @include button(rounded, $b_color, white); } @else { @include button(rounded-red, $b_color, white); } &.flat { // @include button(undecorated); @include button(rounded, $b_color, white); //color: $b_color; //FIXME: does it work on the dark variant? } &:hover { @include button(hover, $b_color, white); } &:active, &:checked { @include button(active, $b_color, white); } &:backdrop, &.flat:backdrop { @include button(backdrop, $b_color, white); label { color: transparentize(white, 0.5);} &:active, &:checked { @include button(backdrop-active, $b_color, white); } &:disabled { @include button(backdrop-insensitive, $b_color, white); label { color: transparentize(white, 0.5);} &:active, &:checked { @include button(backdrop-insensitive-active, $b_color, white); } } } &.flat { &:backdrop, &:disabled, &:backdrop:disabled { @include button(undecorated); color: transparentize($b_color, 0.2); } } &:disabled { @include button(insensitive, $b_color, white); &:active, &:checked { @include button(insensitive-active, $b_color, white); } } .osd & { @include button(osd, $b_color); &:hover { @include button(osd-hover, $b_color); } &:active, &:checked { &:backdrop, & { @include button(osd-active, $b_color); }} &:disabled { &:backdrop, & { @include button(osd-insensitive, $b_color); }} &:backdrop { @include button(osd-backdrop, $b_color); } } } } .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 overriden by GtkRadioButton outline-offset > label { padding-left: 6px; // label padding padding-right: 6px; // } > image { padding-left: 6px; // image padding padding-right: 6px; // padding-top: 3px; // padding-bottom: 3px; // } &.text-button { // compensate text-button paddings padding-left: 10px; padding-right: 10px; } &.image-button { // we want image buttons to have a 1:1 aspect ratio, so compensation // of the padding added to the GtkImage is needed padding-left: 2px; padding-right: 2px; } &.needs-attention { > label, > image { @extend %needs_attention; } &:active, &:checked { > label, > image { animation: none; background-image: none; } } } } //inline-toolbar buttons .inline-toolbar &, .inline-toolbar &:backdrop { border-radius: 2px; border-width: 1px; @extend %linked; } .primary-toolbar &, .primary-toolbar .raised & { // tango icons don't need shadows -gtk-icon-shadow: none; &:hover, &:focus { @include button(hover,$selected_bg_color,$selected_fg_color); } } .linked > &, .linked > &:hover, .linked > &:active, .linked > &:checked, .linked > &:backdrop { @extend %linked; } .linked.vertical > &, .linked.vertical > &:hover, .linked.vertical > &:active, .linked.vertical > &:checked, .linked.vertical > &:backdrop { @extend %linked_vertical; } } %needs_attention { animation: needs_attention 150ms ease-in; $_dot_shadow: _text_shadow_color(); $_dot_shadow_r: if($variant=='light',0.5,0.45); background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to($_dot_color), to(transparent)), -gtk-gradient(radial, center center, 0, center center, $_dot_shadow_r, to($_dot_shadow), 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; } &:backdrop { background-size: 6px 6px, 0 0;} &:dir(rtl) { @if $variant == 'light' { background-position: left 3px, left 4px; } @else { background-position: left 3px, left 2px; } } } toolbar { button { &:hover { @include button(normal,darken($bg_color,7%));} &:active { @include button(normal,darken($bg_color,12%));} } &.osd { .linked { button{ border-color: $dark_borders_color; box-shadow: none; } } } } // 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(undecorated); &:hover { color: $selected_fg_color; } &:active, &:checked{ color: darken($selected_fg_color, 5%); } &:disabled { color: $backdrop_text_color; &:active, &:checked { color: transparentize(darken($selected_fg_color, 5%),0.7); } } &:backdrop { color: $backdrop_text_color; &:active, &:checked { color: darken($selected_fg_color, 5%); } &:disabled { color: $backdrop_text_color; &:active, &:checked { color: transparentize(darken($selected_fg_color, 5%),0.7); } } } } // More inline toolbar buttons toolbar.inline-toolbar toolbutton, toolbar.inline-toolbar toolbutton:backdrop { > button.flat { &:backdrop { border-color: transparent; box-shadow: none; } } } %linked_middle { border: 1px solid $borders_color; border-radius: 0; border-right-style: none; box-shadow: inset 0px 1px 0px 0px $top_highlight; } %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-style: solid solid none solid; border-radius: 0; } %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-style: solid; } &:only-child { border-radius: 3px; border-style: solid; } } %undecorated_button { background-color: transparent; background-image: none; border-color: transparent; box-shadow: inset 0 1px transparentize(white,1), 0 1px transparentize(white, 1); text-shadow: none; -gtk-icon-shadow: none; } /* menu buttons */ modelbutton.flat, .menuitem.button.flat { min-height: 26px; padding-left: 5px; padding-right: 5px; border-radius: 3px; outline-offset: -2px; @extend %undecorated_button; &:hover { background-color: $popover_hover_color; } &:selected { @extend %selected_items; } &:backdrop, &:backdrop:hover { @extend %undecorated_button; } // FIXME: remove the following when the checks/radios rewrite lands check:last-child, radio:last-child { margin-left: 8px; } check:first-child, radio:first-child { margin-right: 8px; } } modelbutton.flat arrow { background: none; &:hover { background: none; } &.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } &.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } } button.color { padding: 4px; colorswatch:only-child { &, overlay { border-radius: 0; } @if $variant == 'light' { box-shadow: none; &:disabled, &:backdrop { box-shadow: none; } } } } notebook, list, .view, popover { button { box-shadow: none; &:backdrop { box-shadow: none; } } .linked > button { box-shadow: none; } } ================================================ FILE: gtk-3.0/widgets/_calendar.scss ================================================ /************ * Calendar * ***********/ calendar { color: $text_color; border: 1px solid $borders_color; &:selected { @extend %selected_items; border-radius: 3px; } &.header { border-bottom: 1px solid transparentize(black, 0.9); border-radius: 0; &:backdrop { border-color: transparentize(black, 0.9); } } &.button { @extend %undecorated_button; color: transparentize($fg_color, 0.55); &:hover { @extend %undecorated_button; color: $fg_color; } &:backdrop { @extend %undecorated_button; color: transparentize($backdrop_fg_color,0.55); } &:disabled { @extend %undecorated_button; color: transparentize($insensitive_fg_color,0.55); } } &:indeterminate, &:indeterminate:backdrop { color: gtkalpha(currentColor, 0.55); } &.highlight, &.highlight:backdrop { font-size: smaller; color: $fg_color; } &:backdrop { color: $backdrop_text_color; border-color: $backdrop_borders_color; } } ================================================ FILE: gtk-3.0/widgets/_checks-radios.scss ================================================ /************************* * Check and Radio Items * *************************/ // draw regular check and radio items using our PNG assets // all assets are rendered from assets.svg. never add pngs directly // unchecked @each $s,$un in ('','-unchecked'), (':hover', '-unchecked-hover'), (':active', '-unchecked-active'), (':backdrop', '-unchecked-backdrop'), (':disabled', '-unchecked-insensitive'), (':disabled:backdrop', '-unchecked-insensitive') { check#{$s}{ -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/checkbox#{$un}.png"),url("../assets/checkbox#{$un}@2.png")), -gtk-scaled(url("../assets/checkbox#{$un}-dark.png"),url("../assets/checkbox#{$un}@2.png"))); -gtk-icon-shadow: none; } radio#{$s}{ -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/radio#{$un}.png"),url("../assets/radio#{$un}@2.png")), -gtk-scaled(url("../assets/radio#{$un}-dark.png"),url("../assets/radio#{$un}@2.png"))); -gtk-icon-shadow: none; } } // checked @each $s,$ch in (':checked', '-checked'), (':checked:hover', '-checked-hover'), (':checked:active', '-checked-active'), (':checked:backdrop', '-checked-backdrop'), (':checked:disabled', '-checked-insensitive'), (':checked:disabled:backdrop', '-checked-insensitive') { check#{$s}{ -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/checkbox#{$ch}.png"),url("../assets/checkbox#{$ch}@2.png")), -gtk-scaled(url("../assets/checkbox#{$ch}-dark.png"),url("../assets/checkbox#{$ch}@2.png"))); -gtk-icon-shadow: none; } radio#{$s}{ -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/radio#{$ch}.png"),url("../assets/radio#{$ch}@2.png")), -gtk-scaled(url("../assets/radio#{$ch}-dark.png"),url("../assets/radio#{$ch}@2.png"))); -gtk-icon-shadow: none; } } // mixed @each $s,$mx in (':indeterminate', '-mixed'), (':indeterminate:hover', '-mixed-hover'), (':indeterminate:active', '-mixed-active'), (':indeterminate:backdrop', '-mixed-backdrop'), (':indeterminate:disabled', '-mixed-insensitive'), (':indeterminate:disabled:backdrop', '-mixed-insensitive') { check#{$s}{ -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/checkbox#{$mx}.png"),url("../assets/checkbox#{$mx}@2.png")), -gtk-scaled(url("../assets/checkbox#{$mx}.png"),url("../assets/checkbox#{$mx}@2.png"))); -gtk-icon-shadow: none; } radio#{$s}{ -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/radio#{$mx}.png"),url("../assets/radio#{$mx}@2.png")), -gtk-scaled(url("../assets/radio#{$mx}.png"),url("../assets/radio#{$mx}@2.png"))); -gtk-icon-shadow: none; } } // unchecked:selected @each $s,$un in (':selected','-unchecked'), (':hover:selected', '-unchecked'), (':active:selected', '-unchecked'), (':backdrop:selected', '-unchecked'), (':disabled:selected', '-unchecked'), (':disabled:backdrop:selected', '-unchecked') { check#{$s}{ -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/checkbox#{$un}.png"),url("../assets/checkbox#{$un}@2.png")), -gtk-scaled(url("../assets/checkbox#{$un}-dark.png"),url("../assets/checkbox#{$un}@2.png"))); -gtk-icon-shadow: none; } radio#{$s}{ -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/selected-radio#{$un}.png"),url("../assets/selected-radio#{$un}@2.png")), -gtk-scaled(url("../assets/selected-radio#{$un}-dark.png"),url("../assets/selected-radio#{$un}@2.png"))); -gtk-icon-shadow: none; } } // checked:selected @each $s,$ch in (':checked:selected', '-checked'), (':checked:hover:selected', '-checked'), (':checked:active:selected', '-checked'), (':checked:backdrop:selected', '-checked'), (':checked:disabled:selected', '-checked'), (':checked:disabled:backdrop:selected', '-checked') { check#{$s}{ -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/checkbox#{$ch}.png"),url("../assets/checkbox#{$ch}@2.png")), -gtk-scaled(url("../assets/checkbox#{$ch}-dark.png"),url("../assets/checkbox#{$ch}@2.png"))); -gtk-icon-shadow: none; } radio#{$s}{ -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/selected-radio#{$ch}.png"),url("../assets/selected-radio#{$ch}@2.png")), -gtk-scaled(url("../assets/selected-radio#{$ch}-dark.png"),url("../assets/selected-radio#{$ch}@2.png"))); -gtk-icon-shadow: none; } } // mixed:selected @each $s,$mx in (':indeterminate:selected', '-mixed'), (':indeterminate:hover:selected', '-mixed'), (':indeterminate:active:selected', '-mixed'), (':indeterminate:backdrop:selected', '-mixed'), (':indeterminate:disabled:selected', '-mixed'), (':indeterminate:disabled:backdrop:selected', '-mixed') { check#{$s}{ -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/selected-checkbox#{$mx}.png"),url("../assets/selected-checkbox#{$mx}@2.png")), -gtk-scaled(url("../assets/selected-checkbox#{$mx}.png"),url("../assets/selected-checkbox#{$mx}@2.png"))); -gtk-icon-shadow: none; } radio#{$s}{ -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/selected-radio#{$mx}.png"),url("../assets/selected-radio#{$mx}@2.png")), -gtk-scaled(url("../assets/selected-radio#{$mx}.png"),url("../assets/selected-radio#{$mx}@2.png"))); -gtk-icon-shadow: none; } } // selection-mode unchecked @each $s,$un in ('','-unchecked'), (':hover', '-unchecked-hover'), (':active', '-unchecked-active'), (':backdrop', '-unchecked-backdrop'), (':disabled', '-unchecked-insensitive'), (':disabled:backdrop', '-unchecked-backdrop-insensitive') { .view.content-view check#{$s}, .view.content-view.check#{$s}{ -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox#{$un}.png"),url("../assets/checkbox#{$un}@2.png")); -gtk-icon-shadow: none; } .view.content-view radio#{$s}, .view.content-view.radio#{$s}{ -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio#{$un}.png"),url("../assets/radio#{$un}@2.png")); -gtk-icon-shadow: none; } } checkbutton.text-button, radiobutton.text-button { // this is for a nice focus on check and radios text padding: 2px 0; outline-offset: 0; label:not(:only-child) { &:first-child { margin-left: 4px; } &:last-child { margin-right: 4px; } } } check, radio { margin: 0 4px; min-height: 16px; min-width: 16px; border: none; menu menuitem & { margin: 0; // this is a workaround for a menu check/radio size allocation issue &, &:hover, &:disabled { //FIXME use button reset mixin min-height: 14px; min-width: 14px; background-image: none; background-color: transparent; box-shadow: none; -gtk-icon-shadow: none; color: inherit; border-color: currentColor; animation: none; } } } ================================================ FILE: gtk-3.0/widgets/_color-chooser.scss ================================================ /***************** * Color Chooser * *****************/ colorswatch { // This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one // is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is // applied to the overlay box. &, &:drop(active) { border-style: none; } // FIXME: implement a proper drop(active) state $_colorswatch_radius: 5px; $_colorswatch_overlay_shadow: if($variant == 'light', inset 0 2px 2px -3px transparentize(black, 0.3), inset 0 3px 2px -2px transparentize(black, 0.5)); // base color corners rounding // to avoid the artifacts caused by rounded corner anti-aliasing the base color // sports a bigger radius. // nth-child is needed by the custom color strip. &.top { border-top-left-radius: $_colorswatch_radius + 0.5px; border-top-right-radius: $_colorswatch_radius + 0.5px; 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.5px; 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: $selected_fg_color; &:hover { border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color); } &:backdrop { color: $backdrop_selected_fg_color; } } &.light overlay { color: $text_color; &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color); } &:backdrop { color: $backdrop_text_color; } } &:drop(active) { box-shadow: none; &.light overlay { border-color: $drop_target_color; box-shadow: inset 0 0 0 2px if($variant == 'light', darken($drop_target_color, 7%), $borders_color), inset 0 0 0 1px $drop_target_color; } &.dark overlay { border-color: $drop_target_color; box-shadow: inset 0 0 0 2px if($variant == 'light', transparentize(black, 0.7), $borders_color), inset 0 0 0 1px $drop_target_color; } } overlay { box-shadow: $_colorswatch_overlay_shadow; border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color); &:hover { box-shadow: inset 0 1px transparentize(white, 0.7); } &:backdrop, &:backdrop:hover { border-color: if($variant == 'light', transparentize(black, 0.7), $borders_color); box-shadow: none; } } &#add-color-button { border-radius: $_colorswatch_radius $_colorswatch_radius 0 0; &:only-child { border-radius: $_colorswatch_radius; } overlay { @include button(normal); &:hover { @include button(hover); } &:backdrop { @include button(backdrop); } } } &:disabled { opacity: 0.5; overlay { border-color: transparentize(black, 0.4); box-shadow: none; } } row:selected & { box-shadow: 0 0 0 2px $selected_fg_color; } &#editor-color-sample { border-radius: 4px; overlay { border-radius: 4.5px; } } } // colorscale popup colorchooser .popover.osd { border-radius: 5px; } ================================================ FILE: gtk-3.0/widgets/_comboboxes.scss ================================================ /************** * ComboBoxes * **************/ combobox { arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); min-height: 16px; min-width: 16px; } &.linked { button:nth-child(2) { &:dir(ltr) { @extend %linked:last-child; } &:dir(rtl) { @extend %linked:first-child; } } } &:drop(active) { // FIXME: untested box-shadow: none; button.combo { @extend %button_basic:drop(active); } } } .linked > combobox > box > button.combo { // the combo is a composite widget so the way we do button linking 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:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; } .linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; } .linked:not(.vertical) > combobox:only-child > box > button.combo {@extend %linked:only-child; } .linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; } .linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;} .linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; } .linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; } ================================================ FILE: gtk-3.0/widgets/_dialogs.scss ================================================ /*********** * Dialogs * ***********/ messagedialog { // Message Dialog styling .titlebar:not(headerbar) { background-color: transparentize(if($variant=='light', $bg_color, $bg_color), 0.05); } .titlebar { min-height: 20px; background-image: none; background-color: transparentize(if($variant=='light', $bg_color, $bg_color), 0.05); border-style: none; border-top-left-radius: 4px; border-top-right-radius: 4px; } &.csd { // rounded bottom border styling for csd version &.background { background-color: transparentize(if($variant=='light', $bg_color, $bg_color), 0.05); color: if($variant=='light', $fg_color, $fg_color); // bigger radius for better antialiasing border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .dialog-action-area button { padding: 10px 14px; // labels are not vertically centered on message dialog, this is a workaround border-radius: 0; border-left-style: solid; border-right-style: none; border-bottom-style: none; background-color: transparent; color: if($variant=='light', $fg_color, $fg_color); box-shadow: none; &:hover { background-color: transparentize($selected_bg_color, 0.1); color: white; } &:first-child{ border-left-style: none; border-bottom-left-radius: 4px; } &:last-child { border-bottom-right-radius: 4px; } &.destructive-action, &.suggested-action{ color:white; } } } } filechooser { .dialog-action-box { border-top: 1px solid $borders_color; &:backdrop { border-top-color: $backdrop_borders_color; } } #pathbarbox { border-bottom: 1px solid $bg_color; } } filechooserbutton:drop(active) { box-shadow: none; border-color: transparent; } ================================================ FILE: gtk-3.0/widgets/_entries.scss ================================================ /**************** * Text Entries * ****************/ %entry, entry { %entry_basic, & { min-height: 28px; padding-left: 8px; padding-right: 8px; border: 1px solid; border-radius: 3px; transition: all 200ms $ease-out-quad; @include entry(normal); image { // icons inside the entry &.left { padding-left: 0; padding-right: 6px; } &.right { padding-left: 6px; padding-right: 0; } } undershoot { &.left { @include undershoot(left); } &.right { @include undershoot(right); } } &.flat { &:focus, & { min-height: 0; padding: 2px; background-image: none; border-color: transparent; box-shadow: none; border-radius: 0; } } &:focus { @include entry(focus); } &:disabled { @include entry(insensitive); } &:backdrop { @include entry(backdrop); transition: $backdrop_transition; } &:backdrop:disabled { @include entry(backdrop-insensitive); } selection { &:focus, & { @extend %selected_items; }} // entry error and warning style @each $e_type, $e_color in (error, $error_color), (warning, $warning_color) { &.#{$e_type} { @include entry(normal); color: $e_color; border-color: entry_focus_border($e_color); &:focus { @include entry(focus, $e_color); } &:selected { &:focus, & { background-color: $e_color; }} } } & image { // entry icons colors color: mix($fg_color, $base_color, 80%); &:hover { color: $fg_color; } &:active { color: $selected_bg_color; } &:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 80%); } } &:drop(active) { &:focus, & { border-color: $drop_target_color; box-shadow: inset 0 0 0 1px $drop_target_color; } } .osd & { @include entry(osd); &:focus { @include entry(osd-focus); } &:backdrop { @include entry(osd-backdrop); } &:disabled { @include entry(osd-insensitive); } } } progress { margin: 2px -6px; background-color: transparent; background-image: none; border-radius: 0; border-width: 0 0 2px; border-color: $selected_bg_color; border-style: solid; box-shadow: none; &:backdrop { background-color: transparent; } } // linked entries .linked:not(.vertical) > & { @extend %linked; } .linked:not(.vertical) > &:focus + &, .linked:not(.vertical) > &:focus + button, .linked:not(.vertical) > &:focus + combobox > box > button.combo { border-left-color: entry_focus_border(); } .linked:not(.vertical) > &:focus { border-color: entry_focus_border(); } .linked:not(.vertical) > &:drop(active) + &, .linked:not(.vertical) > &:drop(active) + button, .linked:not(.vertical) > &:drop(active) + combobox > box > button.combo { border-left-color: $drop_target_color; } // Vertically linked entries // FIXME: take care of "colored" entries .linked.vertical > & { @extend %linked_vertical; // brighter border between linked entries &:not(:disabled) + entry:not(:disabled), &:not(:disabled) + %entry:not(:disabled) { border-top-color: mix($borders_color, $base_color, 30%); background-image: linear-gradient(to bottom, $base_color, $base_color); &:backdrop { border-top-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); background-image: linear-gradient(to bottom, $backdrop_base_color, $backdrop_base_color); } } // brighter border between linked insensitive entries &:disabled + %entry:disabled, &:disabled + entry:disabled { border-top-color: mix($borders_color, $base_color, 30%); } // color back the top border of a linked focused entry following another entry and add back the focus shadow. // :not(:only-child) is a specificity bump hack. + %entry:focus:not(:only-child), + entry:focus:not(:only-child) { border-top-color: entry_focus_border(); } + %entry:drop(active):not(:only-child), + entry:drop(active):not(:only-child) { border-top-color: $drop_target_color; } // this takes care of coloring the top border of the focused entry subsequent widget. // :not(:only-child) is a specificity bump hack. &:focus:not(:only-child) { + %entry, + entry, + button, + combobox > box > button.combo { border-top-color: entry_focus_border(); } } &:drop(active):not(:only-child) { + %entry, + entry, + button, + combobox > box > button.combo { border-top-color: $drop_target_color; } } } } treeview entry { &:focus { &:dir(rtl), &:dir(ltr) { // specificity bump hack background-color: $base_color; transition-property: color, background; } } &.flat, & { border-radius: 0; background-image: none; background-color: $base_color; &:focus { border-color: $selected_bg_color; } } } ================================================ FILE: gtk-3.0/widgets/_expanders.scss ================================================ /************* * 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'); } } } ================================================ FILE: gtk-3.0/widgets/_file-chooser.scss ================================================ /**************** * File chooser * ****************/ $_placesidebar_icons_opacity: 0.7; placessidebar { > viewport.frame { border-style: none; } row { // Needs overriding of the GtkListBoxRow padding min-height: 36px; padding: 0px; // Using margins/padding directly in the SidebarRow // will make the animation of the new bookmark row jump > revealer { padding: 0 14px; } &:selected { color: $selected_fg_color; } &:disabled { color: $insensitive_fg_color; } &:backdrop { color: $backdrop_fg_color; &:selected { color: $backdrop_selected_fg_color; } &:disabled { color: $backdrop_insensitive_color; } } image.sidebar-icon { opacity: $_placesidebar_icons_opacity; // dim the device icons &: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 { @extend %button_basic.flat; @extend %button_selected.flat; min-height: 26px; min-width: 26px; margin-top: 3px; margin-bottom: 3px; padding: 0; border-radius: 100%; -gtk-outline-radius: 100%; &:not(:hover):not(:active), &:backdrop { > image { opacity: $_placesidebar_icons_opacity; }} } // in the sidebar case it makes no sense to click the selected row &:selected:active { box-shadow: none; } &.sidebar-placeholder-row { padding: 0 8px; min-height: 2px; background-image: image($drop_target_color); background-clip: content-box; } &.sidebar-new-bookmark-row { color: $selected_bg_color; } &:drop(active):not(:disabled) { color: $drop_target_color; box-shadow: inset 0 1px $drop_target_color, inset 0 -1px $drop_target_color; &:selected { color: $selected_fg_color; background-color: $drop_target_color; } } } } placesview { .server-list-button > image { transition: 200ms $ease-out-quad; -gtk-icon-transform: rotate(0turn); } .server-list-button:checked > image { transition: 200ms $ease-out-quad; -gtk-icon-transform: rotate(-0.5turn); } row.activatable:hover { background-color: transparent; } // this selects the "connect to server" label > actionbar > revealer > box > label { padding-left: 8px; padding-right: 8px; } } ================================================ FILE: gtk-3.0/widgets/_floating-bar.scss ================================================ /**************** * Floating Bar * ****************/ .floating-bar { background-color: $bg_color; border-width: 1px; border-style: solid solid none; border-color: $borders_color; border-radius: 3px 3px 0 0; box-shadow: inset 0 1px $top_highlight; &.bottom { &.left { border-left-style: none; border-top-left-radius: 0; } &.right { border-right-style: none; border-top-right-radius: 0; } } > button { padding:4px; } &:backdrop { background-color: $backdrop_bg_color; border-color: $backdrop_borders_color; } } ================================================ FILE: gtk-3.0/widgets/_frames.scss ================================================ /********** * Frames * **********/ frame > border, .frame { box-shadow: none; margin: 0; padding: 0; border-radius: 0; border: 1px solid $borders_color; &.flat { border-style: none; } &:backdrop { border-color: $backdrop_borders_color; } } actionbar > revealer > box { padding: 6px; border-top: 1px solid $borders_color; &:backdrop { border-color: $backdrop_borders_color; } } scrolledwindow { viewport.frame { // avoid double borders when viewport inside scrolled window border-style: none; } // This is used when content is touch-dragged past boundaries. // draws a box on top of the content, the size changes programmatically. overshoot { &.top { @include overshoot(top); &:backdrop { @include overshoot(top, backdrop); } } &.bottom { @include overshoot(bottom); &:backdrop { @include overshoot(bottom, backdrop); } } &.left { @include overshoot(left); &:backdrop { @include overshoot(left, backdrop); } } &.right { @include overshoot(right); &:backdrop { @include overshoot(right, backdrop); } } } // 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; } &:backdrop { border-image-source: linear-gradient(to bottom, $backdrop_borders_color 1px, transparent 1px); background-color: $backdrop_scrollbar_bg_color; transition: $backdrop_transition; } } } //vbox and hbox separators separator { background: transparentize(black, 0.9); } ================================================ FILE: gtk-3.0/widgets/_granite.scss ================================================ /************ * Popovers * ************/ GraniteWidgetsPopOver { -GraniteWidgetsPopOver-arrow-width: 21; -GraniteWidgetsPopOver-arrow-height: 10; -GraniteWidgetsPopOver-border-radius: 8px; -GraniteWidgetsPopOver-border-width: 0; -GraniteWidgetsPopOver-shadow-size: 12; border: 1px solid $base_color; background: $base_color; color: $fg_color; .button { background-image: none; background: none; border: none; &:active, &:active:hover, { color: $selected_bg_color; } } > .frame { border:none; } .sidebar.view { border: none; background: none; } } GraniteWidgetsStaticNotebook .frame { border: none; } .popover_bg { background-color: $base_color; background-image: none; border: 1px solid $base_color; color: $fg_color; } /*********** * Welcome * **********/ GraniteWidgetsWelcome { background-color: $base_color; GtkLabel { color: $fg_color; } .h1,.h3 { color: transparentize($fg_color, 0.2); } } /************** * Source List * ***************/ .source-list { -GtkTreeView-horizontal-separator: 1px; -GtkTreeView-vertical-separator: 6px; background-color: $bg_color; border: solid $borders_color; color: $fg_color; border-right-width: 1px; &:backdrop {} .category-expander { color: transparent; } .badge { background-image: none; background-color: transparentize(black, 0.6); color: $bg_color; border-radius: 10px; padding: 0 6px; margin: 0 3px; border-width: 0; &:selected:backdrop, &:selected:hover:backdrop { background-color: transparentize(black, 0.8); color: darken($bg_color, 5%); } } row, .list-row { border:none; padding: 0; > GtkLabel, > label { padding-left: 6px; padding-right: 6px; } } } /************** * Text Styles * **************/ .h1 { font-size: 24px; } .h2 { font-weight: 300; font-size: 18px; } .h3 { font-size: 11px; } .h4, .category-label { font-size: 12px; padding: 6px; color: transparentize($fg_color, 0.7); font-weight: bold; text-shadow: 0 1px transparentize(white,0.8); } /************** * Storage Bar * **************/ .storage-bar { .trough { border: none; box-shadow:0 1px 0 0 $bottom_highlight; background-image: none; background-color: transparent; padding: 8px 6px; } .fill-block { background-color: $yellow; border:none; box-shadow: inset 0 1px 0 0 transparentize(black, 0.9), inset 0 -1px 0 0 transparentize(black, 0.9); transition: all 200ms ease-in-out; padding: 8px 6px; &:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-left-width: 1px; box-shadow: inset 0 1px 0 0 transparentize(black, 0.9), inset 1px 0 0 transparentize(black, 0.9), inset 0 -1px 0 0 transparentize(black, 0.9); } &:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; box-shadow: inset 0 1px 0 0 transparentize(black, 0.9), inset -1px 0 0 transparentize(black, 0.9), inset 0 -1px 0 0 transparentize(black, 0.9); } &.empty-block { background-color: $base_color; } &.app { background-color: $blue; } &.audio { background-color: $orange; } &.photo { background-color: $red; } &.video { background-color: $purple; } .legend { padding: 12px; border-radius: 4px; } } } ================================================ FILE: gtk-3.0/widgets/_header-bars.scss ================================================ /*************** * Header bars * ***************/ %titlebar, headerbar { padding: 0 13px; min-height: 34px; background: $headerbar_color;; color: $headerbar_fg_color; border-radius: 0; &:backdrop { border-color: $backdrop_borders_color; // background-image: none; transition: $backdrop_transition; } .title { font-weight: bold; padding-left: 12px; padding-right: 12px; } .subtitle { font-size: smaller; padding-left: 12px; padding-right: 12px; @extend .dim-label; } entry { min-height: 24px; } button { @include button(normal-header); min-height: 20px; margin-top: 5px; margin-bottom: 5px; box-shadow: none; &.image-button{ padding: 3px 4px; } &.appmenu{ background: transparent; &:backdrop{background: transparent;} } &:hover { @include button(hover-header, $selected_bg_color, #fff); } &:active, &:checked { @include button(active, $selected_bg_color, #fff); border-color: $dark_borders_color; } &:backdrop, &:disabled, &:backdrop:disabled { @include button(backdrop-header, darken($main_dark_color, 3%), transparentize($headerbar_fg_color,0.8)); } &:backdrop { &:hover, &:active, &:checked { @include button(backdrop-header, $backdrop_selected_bg_color, $selected_bg_color); } } &.suggested-action{ box-shadow: none; border: none; background-image: $suggested_bg_color; &:disabled, &:disabled:backdrop, &:backdrop { border: none; background-image: $suggested_bg_color; &:hover, &:active, &:checked { border: none; background-image: $suggested_bg_color; } } } @each $b_type, $b_color in (suggested-action, $cyan), (destructive-action, $destructive_color) { &.#{$b_type} { font-weight: bold; min-height: 14px; margin-top: 5px; margin-bottom: 5px; border-radius: 4px; @include button(normal, $b_color, white); box-shadow: none; &:hover { @include button(hover, $b_color, white); } &:active { @include button(active, $b_color, white); } &:disabled { @include button(insensitive, $b_color, white); label {color: transparentize(white,0.5);} } &:backdrop { @include button(backdrop, $b_color, white); border-radius: 3px; } &:backdrop:disabled { @include button(backdrop-insensitive, $b_color, white); } } } //Reset style &.titlebutton { color: transparent; box-shadow: none; border: none; background-color: transparent; background-repeat: no-repeat; &:hover, &:active, &:checked, &:backdrop, &:backdrop:hover,* { color: transparent; box-shadow: none; background-color: transparent; } } } %linked-header { border-radius: 0; border-right-style: none; box-shadow: none; margin: 5px 0px; min-height: 20px; &:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } &:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-right-style: solid; } &:only-child { border-radius: 4px; border-style: solid; } } %linked-button { @extend %linked-header; &:active, &:checked { @include button(active, $selected_bg_color, #fff); &:backdrop{ background-color: $backdrop_selected_bg_color; color:$selected_bg_color; label{ color: $selected_bg_color; } } } } .linked > button { @extend %linked-button; } .linked > button:hover, .linked > button:backdrop { @extend %linked-header; } .linked:not(.vertical) > entry { border-color: $dark_borders_color; box-shadow: none; background: lighten($headerbar_color, 2%); color: $headerbar_fg_color; caret-color: $headerbar_fg_color; *{ color: $headerbar_fg_color; } &:focus { border-color: entry_focus_border(); } } // End reset style .path-bar-box { .dim-label { color: transparent; margin-right: -6px; } button { @extend %linked-button; &:last-child { margin-left: -1px; border-radius: 0px; &:active, &:checked { border-radius: 0px 4px 4px 0px; } } &:first-child { border-radius: 4px 0px 0px 4px; &:active, &:checked { border-radius: 4px; } } } widget > .text-button:last-child{ border-radius: 0px 4px 4px 0px; @include button(active, $selected_bg_color, #fff); &:backdrop { background: $backdrop_selected_bg_color; &, label { color: $selected_bg_color; } } &:only-child{ border-radius: 4px; } } } // Gnome 42 path-bar .path-buttons-box { background-color: $bg_color; border: 1px solid $borders_color; min-height: 20px; margin-top: 5px; margin-bottom: 5px; @include button(normal-header); border-radius: 4px 0px 0px 4px; .dim-label { color: transparent; margin-right: -5px; } //Buttons before current path button > .horizontal > .dim-label { color: $headerbar_fg_color; padding: 3px 12px; margin: 0; border-right: 1px solid $dark_borders_color; } button > .horizontal > image.dim-label { padding: 3px 0px 3px 12px; border-right: none; } button { background: transparent; border: none; margin: 0; padding: 0; } .current-dir { label { padding: 3px 12px; } label, image { @include button(active, $selected_bg_color, #fff); } } button.current-dir:only-child { image { margin-right: -6px; padding: 0px 6px 0px 12px; border-radius: 4px 0px 0px 4px; } } } &.selection-mode { button { &:backdrop { &.flat, & { &:active, &:checked { //@include button(backdrop-active, $selected_bg_color, $selected_fg_color); label{ color:$backdrop_selected_bg_color; } border-color: $selected_borders_color; } } } } } .tiled &, .maximized & { &.titlebar { @if $variant == 'light' { box-shadow: none; } @else { box-shadow: inset 0 -1px $bottom_highlight; } } &:backdrop, & { border-radius: 0; } } // squared corners when the window is maximized or tiled &.default-decoration { padding: 5px 4px; min-height: 20px; button.titlebutton { min-height: 20px; min-width: 20px; margin: 0; padding: 0; } } } headerbar { // add vertical margins to common widget on the headerbar to avoid them spanning the whole height entry, spinbutton, separator { margin-top: 5px; margin-bottom: 5px; } switch { margin-top: 5px; margin-bottom: 5px; } separator { background: transparent; } viewswitcher, switcher { > box.horizontal { > button.radio { image { margin-left: 7px; } label { margin-right: 7px; } margin: 0; padding: 0; border-radius: 0; } } } } .background:not(.tiled):not(.maximized) .titlebar { @if $variant == 'light' { box-shadow: inset 0 1px $top_highlight; } @else { box-shadow: inset 0 1px $top_highlight,inset 0 -1px $bottom_highlight; } &:backdrop, & { border-top-left-radius: 4px; border-top-right-radius: 4px; } } headerbar { window:not(.tiled):not(.maximized) separator:first-child + &, // tackles the paned container case window:not(.tiled):not(.maximized) &:first-child { &:backdrop, & { border-top-left-radius: 4px; }} window:not(.tiled):not(.maximized) &:last-child { &:backdrop, & { border-top-right-radius: 4px; }} } .titlebar:not(headerbar) { window.csd > & { // in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases padding: 0; background-color: transparent; background-image: none; border-style: none; border-color: transparent; box-shadow: none; } > separator { &, &:backdrop { background: $headerbar_color; } } @extend %titlebar; } .titlebar{ @extend %titlebar; } ================================================ FILE: gtk-3.0/widgets/_infobars.scss ================================================ /************** * GtkInfoBar * **************/ %infobar, infobar { text-shadow: none; color: $fg_color; background-color: $bg_color; border-bottom:1px solid darken($bg_color,10%); box-shadow: 0 1px 0 0 transparentize(black, 0.95), 0 1px 2px 0 transparentize(black, 0.85); } %color_infobar { @extend %infobar; text-shadow: none; color: $selected_fg_color; border:none; .label { color: $selected_fg_color; &:backdrop { color: $backdrop_selected_fg_color; } } button { border-radius: 2px; border: none; background: transparentize($base_color, 0.02); color: $fg_color; box-shadow: 0 1px 0 0 transparentize(black, 0.8); .label { color: $fg_color; } &:active { background: $base_color; color: $fg_color; box-shadow: 0 1px 2px 0 transparentize(black, 0.6); &:backdrop { background: transparentize($base_color, 0.2); color: transparentize($fg_color, 0.5); box-shadow: none; } } &:hover, &:focus { box-shadow: 0 1px 2px 0 transparentize(black, 0.6); } &:disabled { background: transparentize($base_color, 0.4); color: transparentize($fg_color, 0.5); box-shadow: none; &:backdrop { background: transparentize($base_color, 0.5); color: transparentize($fg_color, 0.5); box-shadow: none; } } &:backdrop { background: transparentize($base_color, 0.2); color: transparentize($fg_color, 0.5); box-shadow: none; } } } .info { @extend %color_infobar; background-color: $info_color; &:backdrop { background-color:lighten($info_color,10%); color: $backdrop_selected_fg_color; } } .warning { @extend %color_infobar; background-color: $warning_color; &:backdrop { background-color:lighten($warning_color,10%); color: $backdrop_selected_fg_color; } } .question { @extend %color_infobar; background-color: $question_color; &:backdrop { background-color:lighten($question_color,10%); color: $backdrop_selected_fg_color; } } .error { @extend %color_infobar; background-color: $error_color; &:backdrop { background-color:lighten($error_color,10%); color: $backdrop_selected_fg_color; } } ================================================ FILE: gtk-3.0/widgets/_level-bars.scss ================================================ /************* * Level Bar * *************/ levelbar { block { min-width: 32px; min-height: 6px; } &.vertical block { min-width: 6px; min-height: 32px; } &:backdrop { transition: $backdrop_transition; } trough { padding: 3px; border-radius: 3px; background-color: if($variant == 'light' ,transparentize(white,0.2),transparentize(white,0.8)); box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1); &:backdrop { background-color: if($variant == 'light' ,transparentize(white,0.4),transparentize(white,0.94)); box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1); } } &.horizontal.discrete block { margin: 0 1px; } &.vertical.discrete block { margin: 1px 0; } block { border-radius: 2px; &:backdrop { box-shadow: none; } &.low { background-color: $warning_color; &:backdrop { border-color: $warning_color; }; } &.high, &:not(.empty) { background-color: $cyan; &:backdrop { border-color: $cyan; } } &.full { background-color: $success_color; &:backdrop { border-color: $success_color; }; } &.empty { background-color: if($variant == 'light' ,transparentize(black, 0.86),transparentize(black,0.65)); box-shadow: none; } } } ================================================ FILE: gtk-3.0/widgets/_links.scss ================================================ /********* * 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%); } } &:backdrop { &:backdrop:hover, &:backdrop:hover:selected, & { color: $selected_bg_color; }} @at-root %link_selected, &:selected, *:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); } } button:link, button:visited { @extend %undecorated_button; @extend *:link; text-shadow: none; &:hover, &:active, &:checked { @extend %undecorated_button; text-shadow: none; } > label { text-decoration-line: underline; } } ================================================ FILE: gtk-3.0/widgets/_lists.scss ================================================ /********* * Lists * *********/ list { color: $text_color; background-color: $base_color; border-color: $borders_color; &:backdrop { background-color: $backdrop_base_color; border-color: $backdrop_borders_color; } } row { background-color: transparent; border-color: $borders_color; &:hover { transition: none; } &:backdrop { transition: $backdrop_transition; } &.activatable { &.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411 &:hover { background-color: if(variant == light, transparentize($fg_color, 0.9), transparentize($fg_color, 0.95)); } &:active { box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); } &:backdrop:hover { background-color: transparent; } button.flat{ background-color: transparent; } &:selected { &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); } &.has-open-popup, &:hover { background-color: transparentize($selected_bg_color, 0.5); } &:backdrop { background-color: $backdrop_selected_bg_color; } } } &:selected { @extend %selected_items; } } ================================================ FILE: gtk-3.0/widgets/_menus.scss ================================================ /********* * Menus * *********/ menubar, .menubar { background-color: $headerbar_color; color: $headerbar_fg_color; -GtkWidget-window-dragging: true; padding: 0px; box-shadow: inset 0 -1px transparentize(black, 0.9); > menuitem { min-height: 16px; padding: 4px 8px; &:hover { //Seems like it :hover even with keyboard focus box-shadow: inset 0 -3px $selected_bg_color; } &:disabled { color: $insensitive_fg_color; box-shadow: none; } } } menu, .menu, .context-menu { margin: 4px; padding: 2px 0px; background: $menu_color; border: 1px solid $borders_color; // adds borders in a non composited env border-radius: 5px; font: initial; .csd & { border: none; } // axes borders in a composited env &:backdrop { background-color: $backdrop_menu_color; } menuitem { min-height: 17px; min-width: 40px; padding: 4px 6px; text-shadow: none; &:hover { color: $selected_fg_color; background-color: $selected_bg_color; } &:disabled { color: $insensitive_fg_color; &:backdrop { color: $backdrop_insensitive_color; } } &:backdrop, &:backdrop:hover { color: $backdrop_fg_color; background-color: transparent; } // 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; } } // avoids labels color being overridden, see // https://bugzilla.gnome.org/show_bug.cgi?id=767058 label { &:dir(rtl), &:dir(ltr) { color: inherit; }} } // overflow arrows // > arrow { // @include button(undecorated); // min-height: 16px; // min-width: 16px; // padding: 4px; // background-color: $menu_color; // 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%); } // &:backdrop { background-color: $backdrop_menu_color; } // &:disabled { // color: transparent; // background-color: transparent; // border-color: transparent ; // } // } } menuitem { accelerator { color: gtkalpha(currentColor,0.55); } check, radio { min-height: 16px; min-width: 16px; &:dir(ltr) { margin-right: 7px; } &:dir(rtl) { margin-left: 7px; } } } .csd.popup { background-color: transparent; } ================================================ FILE: gtk-3.0/widgets/_misc.scss ================================================ /******** * Misc * ********/ //content view (grid/list) .content-view { background-color: darken($bg_color,7%); &:hover { -gtk-icon-effect: highlight; } &:backdrop { background-color: darken($bg_color,7%); } rubberband { @extend rubberband; } } .scale-popup { .osd & { @extend %osd; } .osd & button.flat { //FIXME: quick hack, redo properly border-style: none; border-radius: 5px; } button { // +/- buttons on GtkVolumeButton popup &:hover { @extend %undecorated_button; background-color: transparentize($fg_color,0.9); border-radius: 5px; } &:backdrop { &:hover, &:disabled, & { @extend %undecorated_button; }} } } /************ * Assistant * *************/ assistant { border-bottom-left-radius:4px; border-bottom-right-radius:4px; .sidebar { background-color: $base_color; border-top: 1px solid $borders_color; border-bottom-left-radius:4px; &:backdrop { background-color: $backdrop_base_color; border-color: $backdrop_borders_color; } } &.csd .sidebar { border-top-style: none; } .sidebar GtkLabel, .sidebar label { padding: 6px 12px; } .sidebar GtkLabel.highlight, .sidebar label.highlight { background-color: mix($bg_color, $fg_color, 80%); } } ================================================ FILE: gtk-3.0/widgets/_notebooks.scss ================================================ /************* * Notebooks * *************/ notebook { > header { padding: 1px; border-color: $borders_color; border-width: 1px; background-color: darken($base_color, 5%); &:backdrop { border-color: $backdrop_borders_color; background-color: $backdrop_bg_color; } tabs { margin: 0px; } &.top { border-bottom-style: solid; > tabs { margin-bottom: -2px; > tab { &:backdrop { box-shadow: none; } &:checked { background-color: $base_color; &:hover{background-color: $base_color;} } } } } &.bottom { border-top-style: solid; > tabs { margin-top: -2px; > tab { &:backdrop { box-shadow: none; } &:checked { background-color: $base_color; box-shadow: -1px 0 0 $borders_color, 0px 1px 0 $borders_color, 1px 0 0 $borders_color; } } } } &.left { border-right-style: solid; > tabs { margin-right: -2px; > tab { &:backdrop { box-shadow: none; } &:checked { background-color: $base_color; box-shadow: 0px 1px 0 $borders_color, 0px -1px 0 $borders_color, 0px 1px 0 $borders_color; } } } } &.right { border-left-style: solid; > tabs { margin-left: -2px; > tab { &:backdrop { box-shadow: none; } &:checked { background-color: $base_color; box-shadow: 0px 1px 0 $borders_color, 0px -1px 0 $borders_color, 1px 0 0 $borders_color; } } } } &.top > tabs > arrow { @extend %notebook_vert_arrows; border-top-style: none; } &.bottom > tabs > arrow { @extend %notebook_vert_arrows; border-bottom-style: none; } @at-root %notebook_vert_arrows { margin-left: -5px; margin-right: -5px; padding-left: 4px; padding-right: 4px; &.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); } &.up { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); } } &.left > tabs > arrow { @extend %notebook_horz_arrows; border-left-style: none; } &.right > tabs > arrow { @extend %notebook_horz_arrows; border-right-style: none; } @at-root %notebook_horz_arrows { margin-top: -5px; margin-bottom: -5px; padding-top: 4px; padding-bottom: 4px; &.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); } &.up { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } } > tabs > arrow { @extend %button_basic; @extend %button_basic.flat; min-height: 14px; min-width: 14px; border-radius: 0; &:hover:not(:active):not(:backdrop) { background-clip: padding-box; background-image: none; background-color: transparentize(white, 0.7); border-color: transparent; box-shadow: none; } &:disabled { @include button(undecorated); } } tab { min-height: 24px; min-width: 24px; padding: 1px 12px; outline-offset: -5px; color: $insensitive_fg_color; font-weight: normal; border-width: 1px; // for reorderable tabs border-color: transparent; // &:hover { color: mix($insensitive_fg_color, $fg_color, 50%); &.reorderable-page { border-color: transparentize($borders_color, 0.7); background-color: transparentize($bg_color, 0.8); } } &:backdrop { color: mix($backdrop_fg_color, $backdrop_bg_color, 60%); &.reorderable-page { border-color: transparent; background-color: transparent; } } &:checked { color: $fg_color; box-shadow: -1px 0 0 $borders_color, 0px -1px 0 $borders_color, 1px 0 0 $borders_color; &.reorderable-page { border-color: transparentize($borders_color, 0.5); background-color: transparentize($bg_color, 0.5); &:hover { background-color: transparentize($bg_color, 0.3); } } } &:backdrop:checked { color: $backdrop_fg_color; &.reorderable-page { border-color: $backdrop_borders_color; background-color: $backdrop_base_color; } } // colors the button like the label, overridden otherwise button.flat { &:hover { background: transparent; box-shadow: none; color: $red; } &, &:backdrop { background: transparent; border: none; color: gtkalpha(currentColor, 0.3); } padding: 0; margin-top: 4px; margin-bottom: 4px; // FIXME: generalize .small-button? min-width: 20px; min-height: 20px; &:last-child { margin-left: 4px; margin-right: -4px; } &:first-child { margin-left: -4px; margin-right: 4px; } } } &.top, &.bottom { tabs { padding-left: 0px; padding-right: 0px; &:not(:only-child) { margin-left: 0.5px; margin-right: 0.5px; &:first-child { margin-left: -1px; } &:last-child { margin-right: -1px; } } tab { margin-left: 0.5px; margin-right: 0.5px; &.reorderable-page { border-style: none solid; } } } } &.left, &.right { tabs { padding-top: 4px; padding-bottom: 4px; &:not(:only-child) { margin-top: 3px; margin-bottom: 3px; &:first-child { margin-top: -1px; } &:last-child { margin-bottom: -1px; } } tab { margin-top: 4px; margin-bottom: 4px; &.reorderable-page { border-style: solid none; } } } } &.top tab { padding-bottom: 1px; } &.bottom tab { padding-top: 1px; } } > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks background-color: $base_color; &:backdrop { background-color: $backdrop_base_color; } } } ================================================ FILE: gtk-3.0/widgets/_paned.scss ================================================ /********* * Paned * *********/ paned { > separator { min-width: 1px; min-height: 1px; -gtk-icon-source: none; // defeats the ugly default handle decoration border-style: none; // just to be sure background-color: transparent; // workaround, using background istead of a border since the border will get rendered twice (?) background-image: image($borders_color); background-size: 1px 1px; &:selected { background-image: image($selected_bg_color); } // FIXME is this needed? &:backdrop { background-image: image($backdrop_borders_color); } &.wide { min-width: 5px; min-height: 5px; background-color: $bg_color; background-image: image($borders_color), image($borders_color); background-size: 1px 1px, 1px 1px; &:backdrop { background-color: $backdrop_bg_color; background-image: image($backdrop_borders_color), image($backdrop_borders_color); } } } &.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; } } } ================================================ FILE: gtk-3.0/widgets/_pathbars.scss ================================================ /************ * Pathbars * ************/ .path-bar button { &.text-button, &.image-button, & { padding-left: 4px; padding-right: 4px; } &.text-button.image-button label { padding-left: 0; padding-right: 0; } &.text-button.image-button, & { label:last-child { padding-right: 8px; } label:first-child { padding-left: 8px; } } image { padding-left: 4px; padding-right: 4px; } &.slider-button { padding-left: 0; padding-right: 0; } } ================================================ FILE: gtk-3.0/widgets/_popovers.scss ================================================ /*************** * Popovers * ***************/ popover.background { padding: 2px; border-radius: 5px; background: $popover_bg_color; .csd &, & { border: 1px solid $borders_color; } box-shadow: 0 4px 6px $menu_shadow_color; &:backdrop { background-color: $backdrop_bg_color; box-shadow: none; } > list, > .view, > toolbar { border-style: none; background-color: transparent; } .csd &, & { &.touch-selection, &.magnifier { @extend %osd; border: 1px solid transparentize(white, 0.9); button { @extend %osd_button }; } &.osd { @extend %osd; } } separator { margin: 3px; } list separator { margin: 0px; } list row { padding: 8px; } checkbutton, radiobutton { @extend modelbutton.flat; } } ================================================ FILE: gtk-3.0/widgets/_print-dialog.scss ================================================ /**************** * Print dialog * *****************/ printdialog { paper { color: $fg_color; border: 1px solid $borders_color; background: white; padding: 0; &:backdrop { color: $backdrop_fg_color; border-color: $backdrop_borders_color; } } .dialog-action-box { margin: 12px; } } ================================================ FILE: gtk-3.0/widgets/_progress-bars.scss ================================================ /***************** * Progress bars * *****************/ progressbar { // sizing &.horizontal { trough, progress { min-height: 6px; } } &.vertical { trough, progress { min-width: 6px; } } &.horizontal progress { margin: 0; } // the progress node is positioned after the trough border &.vertical progress { margin: 0; } // this moves it over it. // FIXME: insensitive state missing and some other state should be set probably font-size: smaller; color: transparentize($fg_color, 0.6); &:backdrop { box-shadow: none; transition: $backdrop_transition; } trough { @extend %scale_trough; } &:backdrop trough { @extend %scale_trough:backdrop; } // looks like states are not passed to the trough component here progress { @extend %scale_highlight; } &:backdrop progress { @extend %scale_highlight:backdrop; } // states not passed here as well &.osd { // progressbar.osd used for epiphany page loading progress min-width: 3px; min-height: 3px; background-color: transparent; trough { border-style: none; border-radius: 0; background-color: transparent; box-shadow: none; } progress { border-style: none; border-radius: 0; } } } ================================================ FILE: gtk-3.0/widgets/_scales.scss ================================================ /************ * GtkScale * ************/ %scale_trough { background-color: $scale_bg; border: none; border-radius: 3px; margin: 0; &:disabled { background-color: $scale_disabled_bg; } &:backdrop { background-color: $scale_disabled_bg; transition: $backdrop_transition; &:disabled { background-color: $scale_disabled_bg; } } } %scale_highlight { border: none; background-color: $selected_bg_color; border-radius: 3px; margin: 0; &:disabled { border: none; background-color: $scale_bg; } &:backdrop, &:active:backdrop { border-color: lighten($selected_bg_color, 5%); background-color: lighten($selected_bg_color, 5%); &:disabled { background-color: $scale_disabled_bg; } } } scale { // sizing $_marks_lenght: 6px; $_marks_distance: 6px; min-height: 16px; min-width: 16px; padding: 8px; &.horizontal { trough, progress { min-height: 6px; } } &.vertical { trough, progress { min-width: 6px; } } // the slider is inside the trough, so to have make it bigger there's a negative margin slider { min-height: 16px; min-width: 16px; margin: -7px; background-color: $base_color; box-shadow: inset 0 1px $top_highlight, 0px 0px 1px 1px rgba(0,0,0,0.1); border-radius: 12px; transition: $button_transition; transition-property: background, border, box-shadow; &:active { background-color: $selected_bg_color; &:disabled { background-color: $insensitive_bg_color; box-shadow: inset 0 1px $top_highlight, 0px 0px 1px 1px rgba(0,0,0,0.05); } } } // click-and-hold the slider to activate &.fine-tune { &.horizontal { padding-top: 9px; padding-bottom: 9px; min-height: 16px; } &.vertical { padding-left: 9px; padding-right: 9px; min-width: 16px; } // to make the trough grow in fine-tune mode slider { margin: -6px; } fill, highlight, trough { border-radius: 5px; -gtk-outline-radius: 7px; } } // the backing bit trough { @extend %scale_trough; outline-offset: 2px; -gtk-outline-radius: 5px; outline-color: transparent; } // the colored part of the backing bit highlight { @extend %scale_highlight; } // this is another differently styled part of the backing bit, the most relevant use case is for example // in media player to indicate how much video stream as been cached fill { @extend %scale_trough; &:backdrop, & { background-color: $borders_color; } &:disabled { &:backdrop, & { border-color: transparent; background-color: transparent; } } // OSD .osd & { background-color: mix($osd_fg_color, $osd_borders_color, 25%); &:disabled { &:backdrop, & { border-color: transparent; background-color: transparent; } } } } $_scale_bg: if($variant == 'light', #fff, lighten($main_dark_color, 20%)); $_scale_disabled_bg: darken($_scale_bg, 7%); slider { border-color: $_scale_bg; border: none; border-radius: 12px; background-color: $_scale_bg; &:hover { @include button(hover-alt, $edge: $shadow_color); } &:active { border-color: $selected_borders_color; } &:disabled { background-color: $_scale_disabled_bg; box-shadow: inset 0 1px $top_highlight, 0px 0px 1px 1px rgba(0,0,0,0.1); } &:backdrop, &:backdrop:disabled { transition: $backdrop_transition; background-color: $_scale_disabled_bg; box-shadow: inset 0 1px $top_highlight, 0px 0px 1px 1px rgba(0,0,0,0.1); } // ...on selected list rows row:selected & { &:disabled, & { border-color: $selected_borders_color; } } } 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_lenght); } } } &.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; margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght - 3px); } } } &.horizontal { indicator { min-height: $_marks_lenght; min-width: 1px; } &.fine-tune indicator { min-height: ($_marks_lenght - 3px); } } &.vertical { indicator { min-height: 1px; min-width: $_marks_lenght; } &.fine-tune indicator { min-width: ($_marks_lenght - 3px); } } // *WARNING* scale with marks madness following // FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those... $suffix: if($variant == 'light', '', '-dark'); @each $dir_class, $dir_infix in ('horizontal', 'horz'), ('vertical', 'vert') { @each $marks_infix, $marks_class in ('scale-has-marks-above', 'marks-before:not(.marks-after)'), ('scale-has-marks-below', 'marks-after:not(.marks-before)') { @each $state, $state_infix in ('', ''), (':hover', '-hover'), (':active', '-active'), (':disabled', '-insensitive'), (':backdrop', '-backdrop'), (':backdrop:disabled', '-backdrop-insensitive') { &.#{$dir_class}.#{$marks_class} { slider { &#{$state} { // an asymmetric slider asset is used here, so the margins are uneven, the smaller // margin is set on the point side. min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: $_scale_bg; box-shadow: inset 0 1px darken($bg_color, 10%), 0px 0px 1px 1px darken($bg_color, 10%); } } &.fine-tune slider { // bigger negative margins to make the trough grow here as well margin: -7px; } } } } } &.color { min-height: 0; min-width: 0; trough { background-image: image($borders_color); background-repeat: no-repeat; } &.horizontal { padding: 0 0 15px 0; trough { padding-bottom: 4px; background-position: 0 -3px; border-top-left-radius: 0; border-top-right-radius: 0; } slider { &:dir(ltr), &:dir(rtl) { // specificity bumb &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & { margin-bottom: -15px; margin-top: 6px; } } } } &.vertical { &:dir(ltr) { padding: 0 0 0 15px; trough { padding-left: 4px; background-position: 3px 0; border-bottom-right-radius: 0; border-top-right-radius: 0; } slider { &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & { margin-left: -15px; margin-right: 6px; } } } &:dir(rtl) { padding: 0 15px 0 0; trough { padding-right: 4px; background-position: -3px 0; border-bottom-left-radius: 0; border-top-left-radius: 0; } slider { &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & { margin-right: -15px; margin-left: 6px; } } } } &.fine-tune { &.horizontal { &:dir(ltr), &:dir(rtl) { // specificity bump padding: 0 0 12px 0; trough { padding-bottom: 7px; background-position: 0 -6px; } slider { margin-bottom: -15px; margin-top: 6px; } } } &.vertical { &:dir(ltr) { padding: 0 0 0 12px; trough { padding-left: 7px; background-position: 6px 0; } slider { margin-left: -15px; margin-right: 6px; } } &:dir(rtl) { padding: 0 12px 0 0; trough { padding-right: 7px; background-position: -6px 0; } slider { margin-right: -15px; margin-left: 6px; } } } } } } ================================================ FILE: gtk-3.0/widgets/_scrollbars.scss ================================================ /************** * Scrollbars * **************/ 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; } &:backdrop { background-color: $backdrop_scrollbar_bg_color; border-color: $backdrop_borders_color; transition: $backdrop_transition; } // slider slider { min-width: 6px; min-height: 6px; margin: -1px; border: 4px solid transparent; border-radius: 8px; background-clip: padding-box; background-color: $scrollbar_slider_color; &:hover { background-color: $scrollbar_slider_hover_color; } &:hover:active { background-color: $scrollbar_slider_active_color; } &:backdrop { background-color: $backdrop_scrollbar_slider_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) { border-color: transparent; opacity: 0.4; background-color: transparent; slider { margin: 0; min-width: 3px; min-height: 3px; background-color: $fg_color; border: 1px solid if($variant == 'light', white, black); } button { min-width: 5px; min-height: 5px; background-color: $fg_color; background-clip: padding-box; border-radius: 100%; border: 1px solid if($variant == 'light', white, black); -gtk-icon-source: none; } &.horizontal { slider { margin: 0 2px; min-width: $_slider_min_length; } button { margin: 1px 2px; min-width: 5px; } } &.vertical { slider { margin: 2px 0; min-height: $_slider_min_length; } button { margin: 2px 1px; min-height: 5px; } } } &.dragging, &.hovering { opacity: 0.8; } } &.horizontal slider { min-width: $_slider_min_length; } &.vertical slider { min-height: $_slider_min_length; } // button styling button { padding: 0; min-width: 12px; min-height: 12px; border-style: none; border-radius: 0; transition-property: min-height, min-width, color; @include button(undecorated); color: $scrollbar_slider_color; &:hover { @include button(undecorated); color: $scrollbar_slider_hover_color; } &:active, &:checked { @include button(undecorated); color: $scrollbar_slider_active_color; } &:disabled { @include button(undecorated); color: transparentize($scrollbar_slider_color, 0.8); } &:backdrop { @include button(undecorated); color: $backdrop_scrollbar_slider_color; &:disabled { @include button(undecorated); color: transparentize($backdrop_scrollbar_slider_color, 0.8); } } } // button icons &.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-right-symbolic'); } &.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); } } } } treeview ~ scrollbar.vertical { border-top: 1px solid $borders_color; margin-top: -1px; } ================================================ FILE: gtk-3.0/widgets/_sidebar.scss ================================================ /*********** * Sidebar * ***********/ .sidebar { border-style: none; border-width: 0; background-color: mix($bg_color, $base_color, 50%); .frame{ border: none; } @at-root %sidebar_left, &:dir(ltr), &.left, &.left:dir(rtl) { border-right: none; border-left-style: none; } @at-root %sidebar_right &:dir(rtl), &.right { border-left: 1px solid $borders_color; border-right-style: none; } &:backdrop { background-color: $backdrop_sidebar_bg_color; border-color: $backdrop_borders_color; } row{ padding: 8px 12px; transition: all .12s ease-in; label{ color: $text_color; } &:selected{ color: $selected_fg_color; // border-left: 4px solid $selected_bg_color; &:backdrop{ color: $backdrop_selected_fg_color; background: $backdrop_selected_bg_color; label{ color: $selected_fg_color; } } &:hover{ // background-color: transparentize($selected_bg_color, 0.8); } label{ color: $selected_fg_color; } } } //elementary os file manager &.source-list{ background: $_sidebar_color; color: $headerbar_fg_color; padding: 4px 0px; &.view{ transition: all .12s ease-in; &:selected { padding-left: 4px; background: $selected_bg_color; color: $selected_fg_color; &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); } &.has-open-popup, &:hover { background-color: transparentize($selected_bg_color, 0.1); } &:backdrop { background-color: $backdrop_selected_bg_color; } } &:hover, iconview.source-list:hover { background-color: transparentize($_sidebar_color, 0.05); } } } paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; border-color: $borders_color; } } } stacksidebar { &.sidebar { &:dir(ltr), &.left, &.left:dir(rtl) { list { @extend %sidebar_left; }} &:dir(rtl), &.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 */ /*******************************************************************/ placessidebar{ &.sidebar{ background-color: transparent; @include sidebar_bg(right, darken($main_dark_color, 5%), $_sidebar_color); &:dir(rtl) { @include sidebar_bg(left, darken($main_dark_color, 5%), $_sidebar_color); } row{ &.sidebar-row { label { color: $headerbar_fg_color; } &.sidebar-row{ .sidebar-icon { margin-left:-14px; margin-right: 12px; padding-left: 14px; padding-right: 12px; color: $headerbar_fg_color; &:dir(rtl) { margin-right:-14px; margin-left: 12px; padding-right: 14px; padding-left: 12px; } } } &:hover{ transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: rgba(0,0,0,0.76); background-color: transparent; @include sidebar_bg(right,rgba(65,67,75,0), rgba(0,0,0,0.12)); &:dir(rtl) { @include sidebar_bg(left,rgba(65,67,75,0), rgba(0,0,0,0.12)); } } &:active{ &:hover{ color: rgba(0,0,0,0.76); background-color: rgba(0,0,0,0.23); } } &:selected{ color: #fff; label { color: $selected_bg_color; } background-color: transparent; @include sidebar_bg(right, $selected_bg_color, rgba(65,67,75,0)); &:dir(rtl) { @include sidebar_bg(left, transparentize($selected_bg_color, 0.3), rgba(65,67,75,0)); } &:hover{ color: #ffffff; background-color: rgba(0,0,0,0.24); .sidebar-icon { color: #ffffff; } } &:backdrop{ color: $backdrop_selected_fg_color; .sidebar-icon { -gtk-icon-shadow: none; color: inherit; } } .sidebar-icon { -gtk-icon-shadow: 0 1px transparentize(#fff, 0.2); color: inherit; } } &.sidebar-new-bookmark-row { &, label, .sidebar-icon { color: $yellow; } } &: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: $drop_target_color; } } } } } list{ background-color: transparent; &:backdrop { background-color: transparent; } } } ================================================ FILE: gtk-3.0/widgets/_spinbuttons.scss ================================================ /***************** * GtkSpinButton * *****************/ spinbutton { &:not(.vertical) { // in this horizontal configuration, the whole spinbutton // behaves as the entry, so we extend the entry styling // and nuke the style on the internal entry @extend %entry; padding: 0; entry { min-width: 28px; // reset all the other props since the spinbutton node is styled here margin: 0; background: none; background-color: transparent; border: none; border-radius: 0; box-shadow: none; } button { min-height: 16px; margin: 0; padding-bottom: 0; padding-top: 0; color: mix($fg_color, $base_color, 90%); background-image: none; border-style: none none none solid; border-color: transparentize($borders_color, 0.7); border-radius: 0; box-shadow: inset 1px 0px 0px 0px rgba(0,0,0,0.07); &:dir(rtl) { border-style: none solid none none; } &:hover { color: $fg_color; background-color: $base_hover_color; } &:disabled { color: transparentize($insensitive_fg_color, 0.7); } &:active { background-color: transparentize(black, 0.9); box-shadow: inset 0 2px 3px -1px transparentize(black, 0.8); } &:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 90%); background-color: transparent; border-color: transparentize($backdrop_borders_color, 0.7); transition: $backdrop_transition; } &:backdrop:disabled { color: transparentize($backdrop_insensitive_color,0.7); background-image: none; border-style: none none none solid; // It is needed or it gets overridden box-shadow: inset 1px 0px 0px 0px rgba(0,0,0,0.07); &:dir(rtl) { border-style: none solid none none; } } &:last-child { border-top-right-radius: 2px; border-bottom-right-radius: 2px; } } } // OSD horizontal .osd &:not(.vertical) { 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; -gtk-icon-shadow: 0 1px black; &: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); -gtk-icon-shadow: 0 1px black; box-shadow: none; } &:backdrop { @include button(undecorated); color: $osd_fg_color; border-color: transparentize(opacify($osd_borders_color, 1), 0.5); -gtk-icon-shadow: none; box-shadow: none; } &:disabled { @include button(undecorated); color: $osd_insensitive_fg_color; border-color: transparentize(opacify($osd_borders_color, 1), 0.5); -gtk-icon-shadow: none; box-shadow: none; } &:last-child { border-radius: 0 3px 3px 0; } &:dir(rtl):first-child { border-radius: 3px 0 0 3px; } } } // Vertical &.vertical { // in the vertical configuration, we treat the spinbutton // as a box, and tweak the style of the entry in the middle // so that it's linked // FIXME: this should not be set at all, but otherwise it gets the wrong // color &:disabled { color: $insensitive_fg_color; } &:backdrop:disabled { color: $backdrop_insensitive_color; } &:drop(active) { border-color: transparent; box-shadow: none; } entry { min-height: 32px; min-width: 32px; padding: 0; border-radius: 0; } button { min-height: 32px; min-width: 32px; padding: 0; border-width: 1px; border-color: $borders_color; box-shadow: 0 1px $top_highlight; &.up { @extend %top_button; } &.down { @extend %bottom_button; } } %top_button { border-radius: 3px 3px 0 0; border-style: solid solid none solid; } %bottom_button { border-radius: 0 0 3px 3px; border-style: none solid solid solid; } } // OSD vertical .osd &.vertical button:first-child { @include button(osd); &:hover { @include button(osd-hover);} &:active { @include button(osd-active); } &:disabled { @include button(osd-insensitive); } &:backdrop { @include button(osd-backdrop); } } // Misc treeview &:not(.vertical) { min-height: 0; border-style: none; border-radius: 0; entry { min-height: 0; padding: 1px 2px; } } } ================================================ FILE: gtk-3.0/widgets/_spinner.scss ================================================ /*********** * Spinner * ***********/ menu spinner { color: $selected_bg_color; } /********************* * Spinner Animation * *********************/ @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; } } } ================================================ FILE: gtk-3.0/widgets/_switches.scss ================================================ /********** * Switch * **********/ switch { font-size: 1px; min-width: 40px; min-height: 25px; background-size: 40px 24px; background-repeat: no-repeat; background-position: center center; background-image: -gtk-scaled(url("../assets/switch-off.svg"),url("../assets/switch-off.svg")); &:disabled { background-image: -gtk-scaled(url("../assets/switch-insensitive.svg"),url("../assets/switch-insensitive.svg")); slider { background-image: -gtk-scaled(url("../assets/switch-slider-insensitive.svg"),url("../assets/switch-slider-insensitive@2.png")); } } &, & slider { outline-color: transparent; color: transparent; border: none; box-shadow: none; } // &:active, &:checked { background-image: -gtk-scaled(url("../assets/switch-on.svg"),url("../assets/switch-on.svg")); slider { background-image: -gtk-scaled(url("../assets/switch-slider-on.svg"),url("../assets/switch-slider-on@2.png")); } &:disabled { background-image: -gtk-scaled(url("../assets/switch-on-insensitive.svg"),url("../assets/switch-on-insensitive.svg")); slider { background-image: -gtk-scaled(url("../assets/switch-slider-on-insensitive.svg"),url("../assets/switch-slider-on-insensitive@2.png")); } } } // Handle slider { min-width: 1px; min-height: 1px; background-repeat: no-repeat; background-position: left center; background-color: transparent; background-image: -gtk-scaled(url("../assets/switch-slider-off.svg"),url("../assets/switch-slider-off@2.png")); } &:checked slider { } &:backdrop { } row:selected & { &:checked { background-image: -gtk-scaled(url("../assets/switch-off.svg"),url("../assets/switch-off.svg")); slider { background-image: -gtk-scaled(url("../assets/switch-slider-on-selected.svg"),url("../assets/switch-slider-on-selected@2.png")); } } } // Trough trough { &:active, &:checked { background-color: $selected_bg_color; &:backdrop { background-color: $backdrop_selected_bg_color; } } } } ================================================ FILE: gtk-3.0/widgets/_toolbars.scss ================================================ /************ * Toolbars * ************/ %toolbar { -GtkWidget-window-dragging: true; padding: 4px; background-color: $bg_color; } toolbar { @extend %toolbar; padding: 4px 3px 3px 4px; // on OSD .osd & { background-color: transparent; } // stand-alone OSD toolbars &.osd { padding: 13px; border: none; border-radius: 5px; background-color: $osd_bg_color; &.left, &.right, &.top, &.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars } // toolbar separators &.horizontal separator { margin: 0 7px 1px 6px; } &.vertical separator { margin: 6px 1px 7px 0; } &:not(.inline-toolbar):not(.osd) { switch, scale, entry, spinbutton, button { margin-right: 1px; margin-bottom: 1px; } } } //searchbar, location-bar & inline-toolbar .inline-toolbar { @extend %toolbar; @extend %darkbar; padding: 3px; border-width: 0 1px 1px; border-radius: 0 0 5px 5px; } searchbar, .location-bar { @extend %toolbar; @extend %darkbar; border-width: 0 0 1px; padding: 3px; } %darkbar { border-style: solid; border-color: $borders_color; $_bg: mix($bg_color, $borders_color, 70%); background-color: $_bg; &:backdrop { border-color: $backdrop_borders_color; background-color: $backdrop_dark_fill; box-shadow: none; transition: $backdrop_transition; } } searchbar{ background: $base_color; } ================================================ FILE: gtk-3.0/widgets/_tooltips.scss ================================================ /************ * 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: $osd_bg_color; background-clip: padding-box; border: 1px solid $tooltip_borders_color; // this suble border is meant to // not make the tooltip melt with // very dark backgrounds } padding: 4px; /* not working */ border-radius: 5px; box-shadow: none; // otherwise it gets inherited by windowframe.csd text-shadow: 0 1px black; // FIXME: we need a border or tooltips vanish on black background. decoration { background-color: transparent; } * { // Yeah this is ugly padding: 4px; background-color: transparent; color: white; } } ================================================ FILE: gtk-3.0/widgets/_touch-copy-paste.scss ================================================ /********************** * Touch Copy & Paste * *********************/ //touch selection handlebars for the Popover.osd above cursor-handle { background-color: transparent; background-image: none; box-shadow: none; border-style: none; @each $s,$as in ('',''), (':hover','-hover'), (':active','-active') { //no need for insensitive and backdrop &.top#{$s}:dir(ltr), &.bottom#{$s}:dir(rtl) { $_url: 'assets/text-select-start#{$as}#{$asset_suffix}'; -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')); padding-left: 10px; } &.bottom#{$s}:dir(ltr), &.top#{$s}:dir(rtl) { $_url: 'assets/text-select-end#{$as}#{$asset_suffix}'; -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')); padding-right: 10px; } &.insertion-cursor#{$s}:dir(ltr), &.insertion-cursor#{$s}:dir(rtl) { $_url: 'assets/slider-horz-scale-has-marks-above#{$as}#{$asset_suffix}'; -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')); } } } .context-menu { font: initial; } // Decouple the font of context menus from their entry/textview button.circular { // FIXME: aggregate to buttons border-radius: 20px; -gtk-outline-radius: 20px; label { padding: 0; } } // shortcut window keys .keycap { min-width: 20px; min-height: 25px; margin-top: 2px; padding-bottom: 3px; padding-left: 6px; padding-right: 6px; color: $fg_color; background-color: $base_color; border: 1px solid; border-color: if($variant == 'light', mix($borders_color, $bg_color, 50%), $borders_color); border-radius: 5px; box-shadow: if($variant == 'light', inset 0 -3px mix($base_color, $bg_color, 20%), inset 0 -3px mix($borders_color, $base_color, 60%)); font-size: smaller; &:backdrop { background-color: $backdrop_base_color; color: $backdrop_fg_color; transition: $backdrop_transition; } } *:drop(active):focus, *:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die border-color: $drop_target_color; box-shadow: inset 0 0 0 1px $drop_target_color; } stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons stackswitcher button.circular, stackswitcher button.text-button.circular { // FIXME aggregate with buttons min-width: 32px; min-height: 32px; padding: 0; } ================================================ FILE: gtk-3.0/widgets/_treeviews.scss ================================================ /************** * 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: mix($fg_color, $base_color, 50%); // this is actually the tree lines color, border-top-color: $bg_color; // while this is the grid lines color, better then nothing rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props &:selected { &:focus, & { border-radius: 0; @extend %selected_items; } &:backdrop, & { border-left-color: mix($selected_fg_color, $selected_bg_color, 50%); border-top-color: transparentize($fg_color, 0.9); // doesn't work unfortunatelly } } &:disabled { color: $insensitive_fg_color; &:selected { color: mix($selected_fg_color, $selected_bg_color, 40%); &:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); } } &:backdrop { color: $backdrop_insensitive_color; } } &.separator { min-height: 2px; color: $bg_color; &:backdrop { color: transparentize($bg_color, 0.9); } } &:backdrop { border-left-color: mix($backdrop_fg_color, $backdrop_bg_color, 50%); border-top: $backdrop_bg_color; } &:drop(active) { border-style: solid none; border-width: 1px; border-color: $selected_borders_color; &.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, 70%); &:hover { color: $fg_color; } &:selected { color: mix($selected_fg_color, $selected_bg_color, 70%); &:hover { color: $selected_fg_color; } &:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 70%); } } &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } &:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 70%); } } &.progressbar { // progress bar in treeviews @if $variant == light { color: $base_color; } border: 1px solid $selected_borders_color; border-radius: 4px; background-color: $selected_bg_color; background-image: linear-gradient(to bottom, $selected_bg_color, darken($selected_bg_color,10%)); box-shadow: inset 0 1px if($variant=='light', transparentize(white,0.7), transparentize(white,0.85)), 0 1px if($variant=='light', transparentize(black, 0.8), transparentize(black,0.9)); &:selected { &:focus, & { border-radius: 4px; @if $variant == 'light' { color: $selected_bg_color; box-shadow: none; } @else { box-shadow: inset 0 1px transparentize(white, 0.95); } background-image: linear-gradient(to bottom, $base_color, darken($base_color,10%)); &:backdrop { @if $variant == 'light' { color: $selected_bg_color; border-color: $selected_borders_color; // otherwise it gets inherited by .view(?!?) } @else { border-color: $backdrop_base_color; } background-color: $backdrop_base_color; } } } &:backdrop { @if $variant == 'light' { color: $backdrop_base_color; } @else { border-color: $backdrop_base_color; } background-image: none; box-shadow: none; } } &.trough { // progress bar trough in treeviews background-color: transparentize($fg_color,0.9); border-radius: 4px; &:selected { &:focus, & { background-color: if($variant == 'light', transparentize($selected_fg_color, 0.7), darken($selected_bg_color, 10%)); border-radius: 4px; @if $variant == 'light' { border-width: 1px 0; border-style: solid; border-color: $selected_bg_color; } } } } header { button { $_column_header_color: mix($fg_color, $base_color, 50%); @extend %column_header_button; color: $_column_header_color; background-color: $base_color; font-weight: bold; text-shadow: none; box-shadow: none; &:hover { @extend %column_header_button; color: mix($_column_header_color, $fg_color, 50%); 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 } } button:last-child { &:backdrop, & { border-right-style: none; }} } button.dnd, header.button.dnd { // for treeview-like derive widgets &:active, &:selected, &:hover, & { padding: 0 6px; transition: none; background-image: none; background-color: $selected_bg_color; color: $base_color; border-radius: 0; border-style: none; box-shadow: inset 0 0 0 1px $base_color; text-shadow: none; } } acceleditor > label { background-color: $selected_bg_color; } // see tests/testaccel to test } %column_header_button { padding: 0 6px; border-radius: 0; background-image: none; text-shadow: none; border-width: 1px; border-style: none solid solid none; border-color: $bg_color; &:disabled { border-color: $bg_color; background-image: none; } &:backdrop { border-color: $backdrop_bg_color; border-style: none solid solid none; color: mix($backdrop_fg_color, $backdrop_bg_color, 50%); background-image: none; background-color: $backdrop_base_color; &:disabled { border-color: $backdrop_bg_color; background-image: none; } } } ================================================ FILE: gtk-3.0/widgets/_windows.scss ================================================ /********************** * Window Decorations * *********************/ decoration { border-radius: 4px 4px 0 0; // lamefun trick to get rounded borders regardless of CSD use border-width: 0px; // this needs to be transparent // see bug #722563 $_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 0.1)); $_wm_border_backdrop: if($variant=='light', transparentize(black, 0.82), transparentize($borders_color, 0.1)); // lamefun trick to get rounded borders regardless of CSD use border-width: 0px; box-shadow: 0 4px 10px 2px transparentize(#211A1E, 0.6); // FIXME rationalize shadows // 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. // The biggest shadow should be in the same order then in the active state // or the jumping will happen during the transition. box-shadow: 0 4px 10px 2px transparentize(#211A1E, 0.8); transition: $backdrop_transition; } .maximized &, .fullscreen &, .tiled & { border-radius: 0; } .popup & { box-shadow: none; } // server-side decorations as used by mutter .ssd & { box-shadow: none; } //just doing borders, wm draws actual shadows .csd.popup & { border-radius: 7px; box-shadow:0 4px 8px $menu_shadow_color; border: 1px solid $borders_color; } tooltip.csd & { border-radius: 5px; box-shadow: none; } messagedialog.csd & { border-radius: 7px; box-shadow: 0 1px 2px transparentize(black, 0.8), 0 0 0 1px transparentize($_wm_border,0.1); } .solid-csd & { border-radius: 0; margin: 0px; background-color: $backdrop_bg_color; border: solid 1px $backdrop_borders_color; box-shadow: none; } } // Window Close button button.titlebutton { background-repeat: no-repeat; background-position: center; min-height: 20px; padding: 0 1px; box-shadow: none; &.close { background-image: -gtk-scaled(url("../assets/close.png"),url("../assets/close@2.png")); &:hover,&:active { background-image: -gtk-scaled(url("../assets/close_prelight.png"),url("../assets/close_prelight@2.png")); } } &.maximize { background-image: -gtk-scaled(url("../assets/maximize.png"),url("../assets/maximize@2.png")); &:hover,&:active { background-image: -gtk-scaled(url("../assets/maximize_prelight.png"),url("../assets/maximize_prelight@2.png")); } } &.minimize { background-image: -gtk-scaled(url("../assets/min.png"),url("../assets/min@2.png")); &:hover,&:active { background-image: -gtk-scaled(url("../assets/min_prelight.png"),url("../assets/min_prelight@2.png")); } } .selection-mode & { @extend %button.flat.suggested-action; @extend %nobg_selected_items; } &:backdrop { -gtk-icon-shadow: none; background-image: -gtk-scaled(url("../assets/close_unfocused.png"),url("../assets/close_unfocused@2.png")); } } headerbar.selection-mode button.titlebutton, .titlebar.selection-mode button.titlebutton { @include _button_text_shadow(white, $selected_bg_color); &:backdrop { -gtk-icon-shadow: none; } } // catch all extend :) %selected_items { background-color: $selected_bg_color; @at-root %nobg_selected_items, & { color: $selected_fg_color; font-weight: bold; //&:hover{background-color: transparent;} @if $variant == 'light' { outline-color: transparentize($selected_fg_color, 0.7); } &:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); } &:backdrop { color: $backdrop_selected_fg_color; &:disabled { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); } } } } .monospace { font-family: Monospace; } ================================================ FILE: gtk-4.0/_apps.scss ================================================ /********************** * DE-Specific Styles * **********************/ @import 'apps/budgie'; @import 'apps/gnome'; @import 'apps/pantheon'; @import 'apps/xfce'; @import 'apps/unity'; @import 'apps/mate'; /*********************** * App-Specific Styles * ***********************/ @import 'apps/geary'; @import 'apps/lightdm'; @import 'apps/nemo'; @import 'apps/thunar'; @import 'apps/rnote'; ================================================ FILE: gtk-4.0/_common.scss ================================================ /********* * Common * *********/ @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', ''); $backdrop_transition: 200ms ease-out; $button_transition: all 200ms $ease-out-quad; * { padding: 0; // We use the outline properties to signal the focus properties // to the adwaita engine: using real CSS properties is faster, // and we don't use any outlines for now. outline-color: transparentize($fg_color, 0.7); outline-style: dashed; outline-offset: -3px; outline-width: 0px; -gtk-secondary-caret-color: $selected_bg_color; } ================================================ FILE: gtk-4.0/_drawing.scss ================================================ /***************** * Drawing mixins * *****************/ // generic drawing of more complex things @function _widget_edge($c:$borders_edge) { // outer highlight "used" on most widgets @if $c == none { @return none; } @else { @return 0 1px $c; } } @mixin lines($t, $c:$selected_bg_color) { @if $t==up { box-shadow: inset 0 -3px 0 0 darken($c,5%); } @if $t==down { box-shadow: inset 0 3px 0 0 darken($c,5%); } @if $t==both { box-shadow: inset 0 -3px 0 0 darken($c,5%), inset 0 3px 0 0 darken($c,5%); } } @mixin _shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) { // // Helper function to stack up to 4 box-shadows; // @if $shadow4!=none { box-shadow: $shadow1, $shadow2, $shadow3, $shadow4; } @else if $shadow3!=none { box-shadow: $shadow1, $shadow2, $shadow3; } @else if $shadow2!=none { box-shadow: $shadow1, $shadow2; } @else { box-shadow: $shadow1; } } // entries @function entry_focus_border($fc:$selected_bg_color) { @if $variant == 'light' { @return $fc; } @else { @return if($fc==$selected_bg_color, $selected_borders_color, darken($fc, 35%)); } } @function entry_gradient($c) { @if $variant=='light' { @return linear-gradient(to bottom, mix($borders_color, $c, 45%), mix($borders_color, $c, 3%) 2px, $c 90%); } @else { @return linear-gradient(to bottom, mix($borders_color, $c, 95%), mix($borders_color, $c, 40%) 3px, $c 90%); } } @mixin entry($t, $fc:$selected_bg_color, $edge: none) { // // Entries drawing function // // $t: entry type // $fc: focus color // $edge: set to none to not draw the bottom edge or specify a color to not // use the default one // // possible $t values: // normal, focus, insensitive, backdrop, backdrop-insensitive, osd, osd-focus, osd-backdrop; // $_blank_edge: if($edge == none, none, 0 1px transparentize($edge, 1)); $_entry_edge: if($edge == none, none, _widget_edge($edge)); @if $t==normal { color: $text_color; border-color: $borders_color; background-color: $base_color; // for the transition to work the number of shadows in different states needs to match, hence the transparent shadow here. } @if $t==focus { border-color: entry_focus_border($fc); box-shadow: 0px 0px 1px 1px $selected_bg_color inset; } @if $t==insensitive { color: $insensitive_fg_color; border-color: $borders_color; background-color: $insensitive_bg_color; box-shadow: $_entry_edge; } @if $t==backdrop { color: $backdrop_text_color; border-color: $backdrop_borders_color; background-color: $backdrop_base_color; box-shadow: $_blank_edge; } @if $t==backdrop-insensitive { color: $backdrop_insensitive_color; border-color: $backdrop_borders_color; background-color: $insensitive_bg_color; box-shadow: $_blank_edge; } @if $t==osd { color: $osd_text_color; border-color: $osd_borders_color; background-color: transparentize(opacify($osd_borders_color, 1), 0.5); box-shadow: none; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; } @if $t==osd-focus { color: $osd_text_color; border-color: $selected_bg_color; background-color: transparentize(opacify($osd_borders_color, 1), 0.5); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; } @if $t==osd-insensitive { color: $osd_insensitive_fg_color; border-color: $osd_borders_color; background-color: $osd_insensitive_bg_color; background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } @if $t==osd-backdrop { color: $osd_text_color; border-color: $osd_borders_color; background-color: transparentize(opacify($osd_borders_color, 1), 0.5); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } } // buttons @function _border_color ($c) { @return darken($c, 25%); } // colored buttons want // the border form the // base color @function _text_shadow_color ($tc: $fg_color, $bg: $bg_color) { // // calculate the color of text shadows // // $tc is the text color // $bg is the background color // $_lbg: lightness($bg)/100%; @if lightness($tc)<50% { @return transparentize(white, 1-$_lbg/($_lbg*1.3)); } @else { @return transparentize(black, $_lbg*0.8); } } @function _button_hilight_color($c) { // // calculate the right top hilight color for buttons // // $c: base color; // @if lightness($c)>95% { @return white; } @else if lightness($c)>90% { @return transparentize(white, 0.2); } @else if lightness($c)>80% { @return transparentize(white, 0.4); } @else if lightness($c)>50% { @return transparentize(white, 0.6); } @else if lightness($c)>40% { @return transparentize(white, 0.8); } @else { @return transparentize(white, 0.95); } } @mixin _button_text_shadow ($tc:$fg_color, $bg:$bg_color) { // // helper function for the text emboss effect // // $tc is the optional text color, not the shadow color // // TODO: this functions needs a way to deal with special cases // $_shadow: _text_shadow_color($tc, $bg); @if lightness($tc)<50% { text-shadow: 0 1px $_shadow; -gtk-icon-shadow: 0 1px $_shadow; } @else { text-shadow: 0 -1px $_shadow; -gtk-icon-shadow: 0 -1px $_shadow; } } @mixin button($t, $c:$base_color, $tc:$text_color, $edge: none) { // // Button drawing function // // $t: button type, // $c: base button color for colored* types // $tc: optional text color for colored* types // $edge: set to none to not draw the bottom edge or specify a color to not // use the default one // // possible $t values: // normal, hover, active, insensitive, insensitive-active, // backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active, // osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated // $_hilight_color: _button_hilight_color($c); $_button_edge: if($edge == none, none, _widget_edge($edge)); $_blank_edge: if($edge == none, none, _widget_edge(transparentize($edge,1))); @if $t==rounded { box-shadow: none; // border: 1px solid $c; color: #fff; label { color: #fff; } border-radius: 6px; background: $suggested_bg_color; } @if $t==rounded-red { box-shadow: none; // border: 1px solid $c; color: #fff; label { color: #fff; } border-radius: 6px; background: $destructive_bg_color; } @if $t==normal { // // normal button // font-weight: normal; color: $tc; // outline-color: transparentize($tc, 0.7); background-color: mix($bg_color, $base_color, 15%); text-shadow: none; } @else if $t==hover { // // hovered button // color: $tc; outline-color: transparentize($tc, 0.7); background-color: $c; text-shadow: none; //@include _shadows(inset 0px 1px 0px 0px $top_highlight,inset 0px -1px 0px 0px $bottom_highlight); } @if $t==normal-header { // // normal button headerbar look // color: if($tc==$text_color, $headerbar_fg_color, $tc); border-radius: 6px; text-shadow: none; box-shadow: none; border: 1px solid $dark_borders_color; background-color: lighten($headerbar_color, 4%); } @else if $t==hover-header { // // hovered button headerbar look // color: if($tc==$text_color, $selected_bg_color, $tc); text-shadow: none; background-color: transparentize($c, 0.2); border-color: $dark_borders_color; } @else if $t==backdrop-header { // // backdrop button headerbar look // color: if($tc==$text_color, transparentize($tc, 0.6), $tc); background-color: $c; border-color: $dark_borders_color; text-shadow: none; box-shadow: none; } @else if $t==active { // // pushed button // color: $tc; outline-color: transparentize($tc, 0.7); background-color: if($c==$base_color, $selected_bg_color, $c); text-shadow: none; // @include _shadows(inset 0px 1px 0px 0px $top_highlight,inset 0px -1px 0px 0px $bottom_highlight); } @else if $t==insensitive { // // insensitive button // color: if($tc==$text_color, $backdrop_text_color, $tc); outline-color: transparentize($tc, 0.7); background-color: if($c==$base_color, $insensitive_bg_color, $c); text-shadow: none; } @else if $t==insensitive-active { // // insensitive pushed button // color: transparentize($selected_fg_color, 0.3); outline-color: transparentize($tc, 0.7); background-color: if($c==$base_color, $selected_bg_color, $c); text-shadow: none; label { color: transparentize($selected_fg_color, 0.3); } } @else if $t==backdrop { // // backdrop button // color: if($tc==$text_color, $backdrop_text_color, transparentize($tc, 0.6)); outline-color: transparentize($tc, 0.7); background-color: if($c==$base_color, $backdrop_base_color, $c); text-shadow: none; } @else if $t==backdrop-active { // // backdrop pushed button FIXME no colors here! // color: transparentize($selected_fg_color, 0.3); outline-color: transparentize($tc, 0.7); background-color: $selected_bg_color; text-shadow: none; label { color: transparentize($selected_fg_color, 0.3); } } @else if $t==backdrop-insensitive { // // backdrop insensitive button // color: if($tc==$text_color, $backdrop_text_color, $tc); outline-color: transparentize($tc, 0.7); background-color: if($c==$base_color, $insensitive_bg_color, $c); text-shadow: none; } @else if $t==backdrop-insensitive-active { // // backdrop insensitive pushed button // color: transparentize($selected_fg_color, 0.3); outline-color: transparentize($tc, 0.7); background-color: $selected_bg_color; text-shadow: none; } @else if $t==osd { // // normal osd button // $_bg: if($c!=$base_color, transparentize($c, 0.5), $osd_bg_color); color: $osd_fg_color; border-color: $osd_borders_color; background-color: $_bg; background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: transparentize($osd_fg_color, 0.7); } @else if $t==osd-hover { // // active osd button // $_bg: if($c!=$base_color, transparentize($c, 0.3), lighten($osd_bg_color, 12%)); color: white; border-color: $osd_borders_color; background-image: linear-gradient(to bottom, $_bg, $_bg); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: transparentize($osd_fg_color, 0.7); } @else if $t==osd-active { // // active osd button // $_bg: if($c!=$base_color, $c, lighten($osd_bg_color, 6%)); color: white; border-color: $osd_borders_color; background-image: linear-gradient(to bottom, $_bg, $_bg); background-clip: padding-box; text-shadow: none; -gtk-icon-shadow: none; outline-color: transparentize($osd_fg_color, 0.7); } @else if $t==osd-insensitive { // // insensitive osd button // color: $osd_insensitive_fg_color; border-color: $osd_borders_color; background-image: linear-gradient(to bottom, $osd_insensitive_bg_color, $osd_insensitive_bg_color); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } @else if $t==osd-backdrop { // // backdrop osd button // $_bg: if($c!=$base_color, transparentize($c, 0.5), $osd_bg_color); color: $osd_fg_color; border-color: $osd_borders_color; background-image: linear-gradient(to bottom, $_bg, $_bg); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } @else if $t==undecorated { // // reset // border-color: transparent; background-color: transparent; background-image: none; @include _shadows(inset 0 1px transparentize(white, 1), $_blank_edge); text-shadow: none; -gtk-icon-shadow: none; } } @mixin trough($flat:false, $c:$bg_color, $tc:$fg_color, $noedge:true) { color: mix($tc, $bg_color, 80%); @if $flat { background-image: linear-gradient(to bottom, $c, $c); } @else { background-image: linear-gradient(to bottom, mix(black,$c,15%) 5%, mix(black,$c,10%) 20%, mix(black,$c,10%) 90%, $c); } border-color: if($c!=$bg_color, _border_color($c), $border_color); @if not($noedge) { @if lightness($c) > 60% { box-shadow: inset 0 -1px $borders_edge, 0 1px $borders_edge; } @else { box-shadow: inset 0 -1px transparentize($borders_edge, 0.5), 0 1px transparentize($borders_edge, 0.5); } } @else { box-shadow: none; } } @mixin headerbar_fill($c:$headerbar_color, $hc:$top_highlight, $ov: none) { // // headerbar fill // // $c: base color // $hc: top highlight color // $ov: a background layer for background shorthand (hence no commas!) // $gradient: linear-gradient(to top, darken($c, 13%), darken($c, 2%) 2px, $c 3px); @if $variant == 'dark' { $gradient: linear-gradient(to top, darken($c, 3%), darken($c, 1%) 2px, $c 3px); } @if $ov != none { background: $c $ov, $gradient; } @else { background: $c $gradient; } box-shadow: inset 0 1px $hc; // top highlight } @mixin overshoot($p, $t:normal, $c:$fg_color) { // // overshoot // // $p: position // $t: type // $c: base color // // possible $p values: // top, bottom, right, left // // possible $t values: // normal, backdrop // $_small_gradient_length: 3%; $_big_gradient_length: 50%; $_small_gradient_size: 100% $_small_gradient_length; $_big_gradient_size: 100% $_big_gradient_length; @if $p==right or $p==left { $_small_gradient_size: $_small_gradient_length 100%; $_big_gradient_size: $_big_gradient_length 100%; } $_small_gradient_color: $c; $_big_gradient_color: transparentize($c, 0.93); @if $c==$fg_color { $_small_gradient_color: darken($borders_color, 10%); $_big_gradient_color: transparentize($fg_color, 0.93); @if $t==backdrop { $_small_gradient_color: $backdrop_borders_color; } } $_small_gradient: radial-gradient(farthest-side at $p, $_small_gradient_color 85%, transparentize($_small_gradient_color, 1)); $_big_gradient: radial-gradient(farthest-side at $p, $_big_gradient_color, transparentize($_big_gradient_color, 1)); @if $t==normal { background-image: $_small_gradient, $_big_gradient; background-size: $_small_gradient_size, $_big_gradient_size; } @else if $t==backdrop { background-image: $_small_gradient; background-size: $_small_gradient_size; } background-repeat: no-repeat; background-position: $p; background-color: transparent; // reset some properties to be sure to not inherit them somehow border: none; // box-shadow: none; // } @mixin undershoot($p) { // // undershoot // // $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; box-shadow: none; } ================================================ FILE: gtk-4.0/_widgets.scss ================================================ /*********** * Widgets * ***********/ @import 'widgets/action-bars'; @import 'widgets/app-notifications'; @import 'widgets/base-states'; @import 'widgets/buttons'; @import 'widgets/calendar'; @import 'widgets/checks-radios'; @import 'widgets/color-chooser'; @import 'widgets/comboboxes'; @import 'widgets/dialogs'; @import 'widgets/entries'; @import 'widgets/expanders'; @import 'widgets/floating-bar'; @import 'widgets/frames'; @import 'widgets/granite'; @import 'widgets/header-bars'; @import 'widgets/infobars'; @import 'widgets/level-bars'; @import 'widgets/links'; @import 'widgets/lists'; @import 'widgets/menus'; @import 'widgets/misc'; @import 'widgets/notebooks'; @import 'widgets/paned'; @import 'widgets/pathbars'; @import 'widgets/popovers'; @import 'widgets/progress-bars'; @import 'widgets/scales'; @import 'widgets/scrollbars'; @import 'widgets/sidebar'; @import 'widgets/spinbuttons'; @import 'widgets/spinner'; @import 'widgets/switches'; @import 'widgets/toolbars'; @import 'widgets/tooltips'; @import 'widgets/treeviews'; @import 'widgets/windows'; ================================================ FILE: gtk-4.0/apps/_budgie.scss ================================================ /********* * Budgie * *********/ $alert_color: $red; $button_bg: transparent; $entry_border: transparent; $mpris_overlay_fg: $fg_color; $mpris_overlay_bg: transparentize(if($variant=='light',$base_color, darken($bg_color, 10%)), 0.1); $mpris_overlay_border: $top_highlight; $panel_bg: transparentize( darken($headerbar_color,10%),0.05); $panel_color: $headerbar_fg_color; $panel_border: transparentize(darken($headerbar_color, 7%), 0.08); $panel_shadow: transparentize(black, 0.7); $raven_bg: transparentize($headerbar_color, 0.08); $raven_expander_border: transparentize($dark_borders_color, 0.05); $raven_border: transparentize($dark_borders_color, 0.08); $raven_expander_bg: transparentize(lighten($panel_bg, 15%), 0.5); $raven_background_bg: transparent; $raven_background_border: transparent; $depth: 0 1px 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.20), inset 0px 1px 0px 0px $top_highlight; @function gtkalpha($c,$a) { @return unquote("alpha(#{$c},#{$a})"); } $roundness: 2px; $border_width: 1px; $pos_list: ((top, bottom),(bottom,top),(left,right),(right,left)); // Container for both the "panel" area and the shadow. Wise to keep // this transparent.. .budgie-container { background-color: transparent; &:backdrop { background-color: transparent; } popover list, popover row { border: none; background: none; padding: 0; margin: 0; } } .budgie-popover .container, .budgie-popover border, .budgie-popover list, .budgie-popover row { @extend %reset_style } %reset_style { padding: 0; margin: 0; background: none; border: none; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; opacity: 1; min-width: 0; min-height: 0; } .budgie-popover, .budgie-popover.background { border-radius: 2px; padding: 0; background: $panel_bg; background-clip: border-box; box-shadow: 0 2px 3px 1px transparentize(black, 0.65); border: 1px solid $dark_borders_color; list, row { &:hover { background: none; } } > frame.container { margin: 0 -1px -1px; // remove gap padding: 2px 0 0; } button { color: $panel_color; border: none; background: transparent; // @include button(normal-header); &:hover { color: $selected_bg_color; } } } .budgie-popover > .container { padding: 2px; } // Budgie Menu .budgie-menu { color: $panel_color; .container { padding: 0; } button:hover { -gtk-icon-filter: none; } entry.search { border: none; background: none; padding: 5px 2px; border-bottom: 1px solid $dark_borders_color; border-radius: 0; font-size: 120%; box-shadow: none; color:$panel_color; image { &:dir(ltr) { padding-left: 8px; padding-right: 12px; } &:dir(rtl) { padding-left: 12px; padding-right: 8px; } } } .categories { border-width: 0; margin-left: 3px; background: transparent; &:dir(ltr) { border-right: 1px solid $dark_borders_color; } &:dir(rtl) { border-left: 1px solid $dark_borders_color; } } .category-button { padding: 7px; border-radius: 2px 0 0 2px; &:hover { background-color: if(variant == light, transparentize($fg_color, 0.9), transparentize($fg_color, 0.95)); color: $fg_color; } &:active { box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); } &:checked { color: $selected_fg_color; background: $suggested_bg_color; } &:checked:disabled { opacity: 0.5; label { color: transparentize($selected_fg_color, 0.3); } } } scrollbar { background-color: transparent; border-color: $dark_borders_color; } button:not(.category-button) { padding-top: 5px; padding-bottom: 5px; border-radius: 0; box-shadow: none; background:yellow; } button{ border: none; background: transparent; } undershoot, overshoot { background: none; } list { color: transparentize($panel_color, 0.3); } } // Menu Button button.budgie-menu-launcher { padding: 0 2px; color: $headerbar_fg_color; box-shadow: none; background-color: transparent; &:hover { color: $headerbar_fg_color; } &:active, &:checked { color: $headerbar_fg_color; } &:backdrop { color: $headerbar_fg_color; background-color: transparent; &:hover { color: $headerbar_fg_color; } &:active, &:checked { color: $selected_bg_color; box-shadow: none; background-color: mix($bg_color, $base_color, 20%); } } } // User Menu .user-menu { .content-box separator { margin-left: 6px; margin-right: 6px; background-color: transparentize($fg_color, 0.9); } button { margin: 5px; } // top-row (user-name and avatar) > box.vertical row.activatable:first-child, > frame.container > box.vertical row.activatable:first-child { .indicator-item { box-shadow: $depth; background-color: $selected_bg_color; transition-duration: 0.2s; &:dir(ltr) { // mask avatar's background padding-left: 7px; // non-scaling unit background-position: left center; background-repeat: no-repeat; background-size: 38px auto; // non-scaling unit } &:dir(rtl) { padding-right: 7px; background-position: right center; background-repeat: no-repeat; background-size: 38px auto; } label { color: $selected_fg_color; &:dir(ltr) { padding-left: 5px; } &:dir(rtl) { padding-right: 5px; } } image { color: $selected_fg_color; &:first-child { // avatar image min-width: 24px; min-height: 20px; } } } } } // Raven Trigger button.raven-trigger { padding-left: 2px; padding-right: 2px; color: $headerbar_fg_color; box-shadow: none; &:hover { color: $headerbar_fg_color; background-color: transparent; } &:active, &:checked { box-shadow: none; background-color: transparent; color: $selected_bg_color; } &:backdrop { color: $headerbar_fg_color; &:hover { color: $headerbar_fg_color; } &:active, &:checked { box-shadow: none; color: $selected_bg_color; background-color: transparent; } } } // Places Menu .places-menu { .container { padding: 0; } .message-bar { border-top-left-radius: 3px; border-top-right-radius: 3px; } .name-button { border: 0; border-radius: 0; padding: 4px 6px; } .unmount-button { padding: 4px 4px; border: 0; border-radius: 0; } .places-section-header { padding: 0px; border-bottom: 1px solid $raven_expander_border; box-shadow: 0px 1px 1px #{"alpha(@theme_fg_color, 0.03)"}; } .places-section-header > button { padding: 8px; border: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } .places-list { background: transparentize($fg_color, 0.96); border-bottom: 1px solid $raven_expander_border; } .unlock-area { border-top: 1px solid transparentize($raven_expander_border, 0.1); border-bottom: 1px solid transparentize($raven_expander_border, 0.1); } .unlock-area entry { border-radius: 0; border: 0; } .unlock-area button { border-radius: 0; border: 0; border-left: 1px solid transparentize($raven_expander_border, 0.1); } .alternative-label { font-size: 15px; padding: 3px; } .always-expand { background: transparent; border-bottom: none; } } // Night Light indicator .night-light-indicator { .container { padding: 0; } .view-header { font-size: 14px; padding: 10px; border-bottom: #{"1px solid mix(@theme_base_color, #000000, 0.35)"}; box-shadow: #{"0px 1px 1px alpha(@theme_fg_color, 0.04)"}; } .display-settings-button { border-top-left-radius: 0px; border-top-right-radius: 0px; border: none; padding: 3px; border-top: #{"1px solid mix(@theme_base_color, #000000, 0.35)"}; box-shadow: #{"inset 0px 1px 1px alpha(@theme_fg_color, 0.04)"}; } } // Panel .budgie-panel { color: $headerbar_fg_color; background-color: $panel_bg; background-image: none; box-shadow: none; border: none; transition: all 150ms ease-in; .alert { color: $alert_color; } &:backdrop { color: $headerbar_fg_color; background-color: $panel_bg; } button { border-top-width: 0; border-bottom-width: 0; border-radius: 0; &.flat { background: transparent; border: none; &:hover, &:active, &:checked { background: transparent; color: $selected_bg_color; } } } popover list, popover row { padding: 0; margin: 0; } label { color: $headerbar_fg_color; font-weight: 700; } &.transparent { background-color: transparentize($panel_bg, 0.75); .top & { border-bottom-color: transparent; } .bottom & { border-top-color: transparent; } .left & { border-right-color: transparent; } .right & { border-left-color: transparent; } &:backdrop, label, button.raven-trigger:backdrop, button.budgie-menu-launcher { color: lighten($headerbar_fg_color, 10%); } } .end-region { // background-color: rgba(0,0,0,0.3); border-radius: 0px; separator { background-color: transparentize($headerbar_fg_color, 0.85); } label { font-weight: 700; color: $headerbar_fg_color; } } } // Tasklist .budgie-panel #tasklist-button, .budgie-panel #tasklist-button:backdrop { outline-color: transparent; transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); border-color: transparentize($panel_bg,1); // fixes the transition border-radius: 0; background-color: transparent; box-shadow: none; background-clip: padding-box; @extend %underscores; } // Icon Tasklist .budgie-panel { button.flat.launcher { outline-color: transparent; transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); border-color: transparentize($panel_bg,1); // fixes the transition border-radius: 0; padding: 0; background-clip: padding-box; background-color: transparent; & { box-shadow: none; } } .unpinned button.flat.launcher, .pinned button.flat.launcher.running { @extend %underscores; } } %underscores { &:hover { box-shadow: none; } &:active, &:checked { box-shadow: none; } @each $pos, $b_pos in $pos_list { .#{$pos} & { padding-#{$b_pos}: 2px; border-#{$pos}: 2px solid transparent; @at-root { .#{$pos} .budgie-panel .pinned button.flat.launcher:not(.running) { border-#{$pos}: 2px solid transparent; } .#{$pos} .budgie-panel .pinned button.flat.launcher:not(.running):hover { border-#{$pos}: 2px solid transparentize(white, 0.9); } .#{$pos} .budgie-panel .unpinned button.flat.launcher, .#{$pos} .budgie-panel .pinned button.flat.launcher.running { border-#{$pos}: 2px solid transparentize(white, 0.9); } } &:hover { border-#{$pos}: 2px solid transparentize(white, 0.75); } &:active, &:checked { border-#{$pos}: 2px solid $selected_bg_color; } } } } @each $pos, $b_pos in $pos_list { // Panel borders .#{$pos} .budgie-panel { border-#{$b_pos}: $border_width solid $panel_border; } // Raven borders .#{$pos} .raven-frame { padding: 0; background: none; border { border: none; border-#{$b_pos}: $border_width solid $raven_border; } } // Shadows .#{$pos} .shadow-block { background-color: transparent; background-image: linear-gradient(to $b_pos, $panel_shadow, transparent); } } // Raven .raven { padding: 0; color: $red; background: $panel_bg; transition: 170ms ease-out; .raven-header { * { padding-top: 0; padding-bottom: 0; } min-height: 32px; color: $panel_color; border: solid $raven_expander_border; border-width: 1px 0; background-color: $raven_expander_bg; &.top { border-top-style: none; border-color: transparent; margin-top: 3px; min-height: 32px; button.image-button { &:hover { color: darken($selected_bg_color,5%); box-shadow: none; } } } > button.text-button { border-radius: 2px; color: $selected_fg_color; background-color: transparentize(darken($red,5%), 0.1); @include _shadows(inset 0px 1px 0px 0px $top_highlight,inset 0px -1px 0px 0px $bottom_highlight); &:hover { border-radius: 2px; color: $selected_fg_color; background-color: transparentize($red, 0.1); @include _shadows(inset 0px 1px 0px 0px $top_highlight,inset 0px -1px 0px 0px $bottom_highlight); } &:active { color: $selected_fg_color; background-color: transparentize(lighten($red,5%), 0.1); @include _shadows(inset 0px 1px 0px 0px $top_highlight,inset 0px -1px 0px 0px $bottom_highlight); } } &.bottom { border-bottom-style: none; } button { @include button(normal-header); border-radius: 0; &:hover { @include button(hover-header); border-radius: 0; } &:active, &:checked { color: $selected_bg_color; background-color: darken($main_dark_color, 2%); } &:disabled { color: $insensitive_fg_color; } } } list { color: $panel_color; background-color: transparent; &:selected { background-color: transparentize($selected_bg_color,0.1); } row, row.activatable { background-color: transparent; &:hover { background-color: transparentize(lighten($panel_bg, 15%), 0.7);} &:selected { background-color: transparentize($selected_bg_color,0.1); } } } .raven-background { color: $panel_color; background-color: transparent; border-color: transparent; &.middle { border-bottom-style: none; } // applet background between two headers } .powerstrip { background-color: transparent; border-top-color: transparent; } .powerstrip button.image-button { border-radius:50%; padding: 5px; min-width: 32px; min-height: 32px; margin-bottom: 3px; background: $purple; color: $selected_fg_color; box-shadow: $depth; border: none; font-size: 100%; &:hover { background: transparentize($purple,0.15); color: $selected_fg_color; } &:active { background: $purple; color: $selected_fg_color; } &:first-child { background: $suggested_bg_color; &:hover { background: transparentize($selected_bg_color, 0.15); } &:active { background: $selected_bg_color; } } &:last-child { background: $destructive_bg_color; &:hover { background: transparentize($red, 0.15); } &:active { background: $red; } } } .option-subtitle { font-size: 13px; } } // Calendar calendar.raven-calendar { padding: 6px; color: $panel_color; background: transparent; border-color: transparent; &:indeterminate { color: gtkalpha(currentColor,0.3); } &:selected { background: transparent; color: darken($selected_bg_color, 4%); font-weight: bold; } &:backdrop { background-color: transparent; } &.header { color: $panel_color; border: none; border-radius: 0; background-color: transparent; } & button, & button:focus { color: gtkalpha(currentColor,0.5); background-color: transparent; &:hover { color: $fg_color; background-color: transparent; } } } // MPRIS Applet .raven-mpris { color: $mpris_overlay_fg; background-color: $mpris_overlay_bg; border: solid $mpris_overlay_border; border-width: 1px 0; border-bottom-color: $bottom_highlight; button.image-button { padding: 10px; background-color: $base_color; box-shadow: $depth; &:hover { background-color: $selected_bg_color; } &:active { background-color: darken($selected_bg_color,5%); } &:first-child { margin-right: 4px; } &:last-child { margin-left: 4px; } &:last-child, &:first-child { padding: 4px; margin-top: 6px; margin-bottom: 6px; } } } // Notifications .budgie-notification-window { background: none; border-radius: 1px; button { background-color: $selected_bg_color; color: $selected_fg_color; border: none; &:hover { background-color: darken($selected_bg_color, 5%); border: none; } &:active, &:checked { background-color: darken($selected_bg_color, 5%); } } } .budgie-notification { &.background { border-radius: 1px; } .notification-title { font-size: 110%; color: $headerbar_fg_color; } .notification-body { color: transparentize($headerbar_fg_color, 0.3); } button { background-color: transparent; color: $selected_fg_color; &:hover { background-color: transparent; color: $red; box-shadow: none; } &:active, &:checked { background-color: transparent; color: darken($red, 5%); } } } .drop-shadow { color: $headerbar_fg_color; background-color: transparentize(if($variant=='light', $headerbar_color, $bg_color), 0.05); box-shadow: 0 1px 2px 0 transparentize(black, 0.8); border-radius: 2px; } // On Screen Display in Budgie .budgie-osd-window { @extend .budgie-notification-window; } // Internal part of the OSD .budgie-osd { @extend .budgie-notification; } // Alt+tab switcher in Budgie .budgie-switcher-window { @extend .budgie-notification-window; // Flowbox flowbox { color: $fg_color; } flowboxchild { padding: 3px; margin: 3px; color: $fg_color; &:hover { background-color: $button_bg; } &:active { color: $fg_color; } &:selected { color: $selected_fg_color; background-color: transparentize($selected_bg_color,0.5); &:active { color: $selected_fg_color; } &:hover { background-color: mix(black, $selected_bg_color, 10%); } &:disabled { color: transparentize($selected_fg_color, 0.3); background-color: transparentize($selected_bg_color, 0.3); label { color: transparentize($selected_fg_color, 0.3); } } } } } // Internal part of the Switcher .budgie-switcher { @extend .budgie-notification; } // Session Dialog .budgie-session-dialog { color: $headerbar_fg_color; background-color: $panel_bg; label:backdrop { color: $backdrop_headerbar_fg_color; } &.background { @extend .drop-shadow; } .dialog-title { font-size: 120%; } .linked.horizontal > button { margin-bottom: 0; min-height: 32px; border-bottom: none; border-color:$dark_borders_color; border-radius: 0; color: $headerbar_fg_color; background-color: transparent; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), inset 0 1px 2px rgba(0, 0, 0, 0.20); label { font-weight: 700; } &:first-child { border-left: none; border-bottom-left-radius: 2px; } &:last-child { border-right: none; border-bottom-right-radius: 2px; } &:hover { background-color: transparentize($selected_bg_color, 0.1); &:backdrop { label { color: transparentize(white, 0.5); } } } @each $b_type, $b_color in (suggested-action, $selected_bg_color), (destructive-action, $destructive_color) { &.#{$b_type} { background-color: transparentize($b_color, 0.1); &:hover { background-color: transparentize(lighten($b_color,5%), 0.1); } &:active, &:checked { background-color: transparentize(lighten($b_color,5%), 0.1); } } } } entry { background-color: #505359; color: $headerbar_fg_color; &:focus { background-color: #505359; } &:backdrop { background-color: #505359; } } } // PolKit Dialog .budgie-polkit-dialog { @extend .budgie-session-dialog; .message { color: transparentize($headerbar_fg_color, 0.3); } .failure { color: $alert_color; } } // Run Dialog .budgie-run-dialog { @extend .budgie-session-dialog; entry.search, entry.search:focus { font-size: 120%; padding: 8px 5px; border: none; box-shadow: none; image { color: $headerbar_fg_color; &:dir(ltr) { padding-left: 8px; padding-right: 12px; } &:dir(rtl) { padding-left: 12px; padding-right: 8px; } } } list row:selected .dim-label { opacity: 1; } scrolledwindow { border-top: 1px solid darken($entry_border, 5%); } } // Budgie styled Gtk Menus .budgie-menubar { menu { margin: 4px; padding: 5px; border-radius: 0; background-color: $panel_bg; menuitem:hover { background-color: $selected_bg_color; color: $selected_fg_color; } } arrow { border:none; min-width:16px; min-height:16px; &.top { -gtk-icon-source:-gtk-icontheme("pan-up-symbolic"); border-bottom: 1px solid mix($fg_color, $raven_bg, 10%); } &.bottom { -gtk-icon-source:-gtk-icontheme("pan-down-symbolic"); border-top: 1px solid mix($fg_color, $raven_bg, 10%); } } menuitem { accelerator { color: transparentize($fg_color, 0.65); } check, radio { min-height: 16px; min-width: 16px; } } } // settings-window window.background.budgie-settings-window.csd { > box.horizontal > stack > scrolledwindow { // hide double-borders buttonbox.inline-toolbar { border-style: none none solid; } } } // 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 lighten($panel_bg, 10%); .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 { border: none; background: transparent; &: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; } } } ================================================ FILE: gtk-4.0/apps/_geary.scss ================================================ /********* * Geary * *********/ .geary-titlebar-left, .geary-titlebar-right { .separator { opacity: 0; } } ConversationListView { .view { &:active, &:selected { background-color: $selected_bg_color; color: $selected_fg_color; &:backdrop { background-color: $backdrop_selected_bg_color; color: $backdrop_selected_fg_color; } } .cell { border: solid transparentize(black, 0.8); border-width: 0 0 1px 0; &:selected { color: $selected_fg_color; border: 0px solid darken($selected_bg_color, 10% ); } } } } ================================================ FILE: gtk-4.0/apps/_gnome.scss ================================================ /************ * Nautilus * ************/ .nautilus-window { .frame{ *:selected, *:selected:backdrop{ background: transparent; color: $selected_bg_color; label { color: $selected_bg_color; } } } paned { > separator { background-image: none; } } .sidebar { background-color: transparent; // background-image: none; &:backdrop { background-color: transparent; // background-image: none; } .list-row { button { border: none; background-color: transparentize(darken($base_color,3%),0.05); &:active { background-color: transparentize($selected_bg_color,0.25); } } &:selected { background-color: transparentize($selected_bg_color,0.25); &:hover { background-color: transparentize($selected_bg_color,0.1); } } &:hover { background-color: transparentize($base_color,0.5); &:active { background-color: transparentize($selected_bg_color,0.1); } } } } notebook { > stack:only-child { // the :not(:only-child) is for "hidden" notebooks background-color: $base_color; &:backdrop { background-color: $backdrop_base_color; } } } searchbar { border-top: 1px solid rgba(0, 0, 0, 0.12); } .searchbar-container { margin-top: -1px; } } .nautilus-circular-button { border-radius: 20px; } .disk-space-display { border: 2px solid; .unknown { background-color: #888a85; border-color: darken(#888a85, 20%); } .used { background-color: #9FB0B9; border-color: darken(#9FB0B9, 20%); } .free { background-color: #D8D8D8; border-color: darken(#D8D8D8, 20%); } } .nautilus-desktop { color: $fg_color; .nautilus-canvas-item { border-radius: 5px; color: $selected_fg_color; text-shadow: 1px 1px transparentize(black, 0.4); &:active { color: $fg_color; text-shadow: none; } &:hover { color: $fg_color; text-shadow: none; } &:selected { color: $selected_fg_color; text-shadow: none; } .dim-label { &:selected { color: $selected_fg_color; } } } .nautilus-list { .dim-label { &:selected { color: $selected_fg_color; } } } } /********* * Gedit * *********/ .gedit-search-slider { padding: 4px; border-radius: 0 0 3px 3px; border: 0; background-color: $bg_color; } /********* * Gnucash * *********/ .GncMainWindow entry.register-foreground { background: transparent; border: none; } /******************* * Calendar events * ********************/ .color-light { &.timed label, .event-popover label { color: $fg_color; opacity: 1; } // & label { // color: $nord0; // opacity: 1; // } } /******************* * Calendar sidebar * ********************/ datechooser { button { color: $headerbar_fg_color;} .circular.day.text-button{ padding: 6px; border-radius: 50%; min-height: 22px; min-width: 22px; border: none; color: $headerbar_fg_color; &.flat.other-month, &.flat.non-workday { color: $insensitive_fg_color; } &.today { color: $blue; } &:active, &:selected { @include button(active, $selected_bg_color, $selected_fg_color); font-weight: bold; } } .weekday, .weeknum { color: $insensitive_fg_color;} .weeknum { background-color: lighten($_sidebar_color, 4%);} .current-week { background-color: transparentize($insensitive_fg_color, 0.9);} } // Calendar popover on Gnome 49 popover datechooser { background-color: $base_color; button { color: $fg_color;} .circular.day.text-button{ color: $fg_color; } .weeknum { background-color: darken($base_color, 4%);} } agenda-view list.background { padding: 8px; .caption-heading, .dim-label.no-events { color: $headerbar_fg_color; } } datechooser, agenda-view list.background, .calendar-list { &, &:backdrop { background-color: $_sidebar_color; } } // List of calendars on Gnome 49 .calendar-list { row, label {color: $headerbar_fg_color; } row:hover { background-color: lighten($_sidebar_color, 4%);} } /****************************** * Gnome system monitor graph * ******************************/ #gnome-system-monitor .loadgraph { background: $bg_color; color: $text_color; } ================================================ FILE: gtk-4.0/apps/_lightdm.scss ================================================ /*********** * LightDm * ***********/ // the panel widget at the top #panel_window { background-color: $panel_bg_color; color: $panel_fg_color; font-weight: bold; box-shadow: inset 0 -1px darken($panel_bg_color, 7%); // the menubars/menus of the panel, i.e. indicators .menubar, .menubar > .menuitem menubar, menubar > menuitem { background-color: transparent; color: $panel_fg_color; font-weight: bold; } .menubar .menuitem:disabled, menubar menuitem:disabled { color: transparentize($panel_fg_color, 0.5); GtkLabel { color: inherit; } label { color: inherit; } } .menubar .menu > .menuitem, 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, $headerbar_color); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border: solid transparentize(black, 0.9); border-width: 0 1px 1px 1px; } #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; font-size: 13px; .menu, 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: gtk-4.0/apps/_mate.scss ================================================ .mate-panel-menu-bar, panel-toplevel.background { &, menubar { background-color: opacify($panel_bg_color, 1); } menubar, #PanelApplet label, #PanelApplet image { color: $panel_fg_color; } // Panel buttons button:not(#tasklist-button) { @extend %panelbutton; } button, #tasklist-button { label, image { color: inherit; } } .wnck-pager { color: mix($panel_fg_color, black, 50%); background-color: darken($panel_bg_color, 3%); &:hover { background-color: lighten($panel_bg_color, 5%); } &:selected { color: lighten($selected_bg_color, 20%); background-color: $selected_bg_color; } } } // // Mate OSD Window // MsdOsdWindow.background.osd { border-radius: 2px; border: 1px solid $borders_color; .progressbar { background-color: $selected_bg_color; border: none; border-color: $selected_bg_color; border-radius: 5px; } .trough { background-color: darken($osd_bg_color, 5%); border: none; border-radius: 5px; } } ================================================ FILE: gtk-4.0/apps/_nemo.scss ================================================ .nemo-window { .places-treeview { .view.cell, iconview.cell { &:hover { background: transparentize(darken($_sidebar_color, 3%), 0.3); } &:selected { background: $selected_bg_color; color: $selected_fg_color; } } } .sidebar { background-color: $_sidebar_color; .view, .iconview, row { color: #98abb2; background-color: transparent; } } .nemo-window-pane { widget.entry { background-clip: padding-box; min-height: 28px; padding: 5px; color: $fg_color; border: 1px solid $borders_color; border-radius: 3px; box-shadow: inset 0 1px transparentize(black, 0.1), inset 1px 0 transparentize(black, 0.04), inset -1px 0 transparentize(black, 0.04), inset 0 -1px transparentize(black, 0.02), 0 1px transparentize(white, 0.4); &:selected { background-color: $selected_bg_color; color: $selected_fg_color; } } } toolbar.primary-toolbar { margin-bottom: -1px; background: $headerbar_color; button { @include button(normal-header); min-height: 24px; padding: 3px; &:hover { @include button(hover-header, $selected_bg_color, $selected_fg_color); } &:selected, &:active, &:checked { @include button(active, $selected_bg_color, $selected_fg_color); &:backdrop { @include button(backdrop-header, $backdrop_selected_bg_color, $backdrop_selected_fg_color); } } &:backdrop, &:disabled, &:backdrop:disabled { @include button(backdrop-header, $main_dark_color, transparentize($headerbar_fg_color, 0.8)); } } } .nemo-inactive-pane .view, .nemo-inactive-pane iconview { background-color: darken($base_color, 3%); } } ================================================ FILE: gtk-4.0/apps/_pantheon.scss ================================================ /******** * Gala * *******/ .gala-notification { border-width: 0; border-radius: 2px; color: white; border: 1px solid $base_color; background-color: $base_color; .title, .label { color: $fg_color; } } .gala-button { padding: 3px; color: $base_color; border: none; border-radius: 50%; background-image: linear-gradient(to bottom, #7e7e7e, #3e3e3e ); box-shadow: inset 0 0 0 1px transparentize(white, 0.02), inset 0 1px 0 0 transparentize(white, 0.07), inset 0 -1px 0 0 transparentize(white, 0.01), 0 0 0 1px transparentize(black, 0.40), 0 3px 6px transparentize(black, 0.16), 0 3px 6px transparentize(black, 0.23); text-shadow: 0 1px 1px transparentize(black, 0.6); } /********** * Notify * *********/ .notify { /*-notify-shadow: 0px 2px 18px transparentize(black, 0.60);*/ border-radius: 5px; border: 1px solid transparentize(black, 0.30); background-color: transparentize($base_color, 0.95); .low {} .critical {} } /*************** * SwitchBoard * ***************/ .category-label { font-weight: bold; color: $fg_color; } /************* * Slingshot * ************/ .button.app { border: none; border-radius: 0; box-shadow: none; background-image: none; .app { &:hover{ border-radius: 8px; border: none; background-color: transparentize($selected_bg_color, 0.7); color: white; } &:focus{ /*background-color: transparentize(black, 0.20);*/ } } } .search-item { border-radius: 0; border: none; color: $fg_color; background: none; &:hover, &:focus { border-radius: 0; background-color: transparentize($selected_bg_color, 0.7); color: $selected_fg_color; } } .search-entry-large, .search-entry-large:focus { border: none; font-size: 18px; font-weight: 300; background-image: none; background: none; box-shadow: none; border-radius: 0; } .search-category-header { font-weight: bold; color: $fg_color; } /********* * Panel * ********/ .composited-indicator { > revealer, > revealer image, > revealer label, > revealer spinner { color: $panel_fg_color; font-weight: bold; text-shadow: 0 1px 2px transparentize(black, 0.7), 0 1px 2px transparentize(black, 0.5); transition: all 200ms ease-in-out; -gtk-icon-shadow: 0 1px 2px transparentize(black, 0.7), 0 1px 2px transparentize(black, 0.5); } > revealer image:first-child + label { margin-left: 5px; } } .panel.color-light .composited-indicator { > revealer, > revealer image, > revealer label, > revealer spinner { color: transparentize(black, 0.4); text-shadow: 0 1px transparentize(white, 0.9); -gtk-icon-shadow: 0 1px transparentize(white, 0.9); } } /************** * Calculator * **************/ PantheonCalculatorMainWindow { border-radius: 0 0 4px 4px; .window-frame { border-radius:3px; } } /********* * Cards * *********/ .deck { background-color: darken($bg_color, 8%); } .card { background-color: $base_color; border: none; box-shadow: 0 0 0 1px transparentize(black, 0.95), 0 3px 3px transparentize(black, 0.8); transition: all 150ms ease-in-out; } .card.collapsed { background-color: darken($base_color, 5%); box-shadow: 0 0 0 1px transparentize(black, 0.95), 0 1px 2px transparentize(black, 0.8); } /********* * Noise * *********/ NoiseLibraryWindow { border-radius: 0 0 4px 4px; .action-bar { border-radius: 0 0 4px 4px; } .window-frame { border-radius:3px; } } /******** * Snap * ********/ SnapMainWindow, SnapSnapWindow { .take-button { border-radius: 0; } } /******************* * Photos/Shotwell * *******************/ DirectWindow, LibraryWindow { .the-button-in-the-combobox { background: none; } } .checkerboard-layout { background-color: $bg_color; background-image: linear-gradient(45deg, transparentize(black, 0.9) 25%, transparent 25%, transparent 75%, transparentize(black, 0.9) 75%, transparentize(black, 0.9)), linear-gradient(45deg, transparentize(black, 0.9) 25%, transparent 25%, transparent 75%, transparentize(black, 0.9) 75%, transparentize(black, 0.9)); background-size: 24px 24px; background-position: 0 0, 12px 12px } .checkboard-layout .item { background-color: $fg_color; } /********* * Avatar * *********/ .avatar { border: 1px solid transparentize(#000, 0.77); border-radius: 50%; box-shadow: inset 0 0 0 1px transparentize(#fff, 0.95), inset 0 1px 0 0 transparentize(#fff, 0.55), inset 0 -1px 0 0 transparentize(#fff, 0.85), 0 1px 3px transparentize(#000, 0.88), 0 1px 2px transparentize(#000, 0.77); } /**level bars**/ .sidebar .source-list{ &.view { &.level-bar { &,&:selected,&:selected:focus{ background: linear-gradient(to right, lighten($_sidebar_color, 15%),lighten($_sidebar_color, 15%)); border: 1px solid transparentize(black, 0.86); box-shadow: 0 1px 0 transparentize(#000, 0.75); border-radius: 2px; } &.fill-block{ border: none; } } &.fill-block{ &,&:hover,&:selected,&:selected:focus{ background: linear-gradient(to right, $yellow, $yellow); } } } } /************************** * Colors in context menu * **************************/ checkbutton.color-button { border: 1px solid $borders_color; border-radius: 100px; background-clip: border-box; padding: 0; margin: 2px 1px; > check { -gtk-icon-source: none; background: none; margin-right: 0; padding: 2px; } &.none { > check { background-color: transparent; border-radius: 100px; -gtk-icon-source: -gtk-icontheme("close-symbolic"); } } } radiobutton.color-button { > radio { -gtk-icon-source: none; margin-right: 0; border: 1px solid rgba(black, 0.15); border-radius: 100px; background-clip: border-box; } &:active > radio { border: 1px solid rgba(black, 0.35); } } .color-button { check, check:checked, radio, radio:checked, { background-image: none; border: 1px solid rgba(black, 0.2); border-radius: 50%; color: $base_color; -gtk-icon-source: -gtk-icontheme("check-active-symbolic"); } &.red check, &.red radio, &.strawberry check, &.strawberry radio { background-color: #{'@STRAWBERRY_300'}; -gtk-icon-shadow: 0 1px 1px #{'@STRAWBERRY_500'}; } &.orange check, &.orange radio { background-color: #{'@ORANGE_300'}; -gtk-icon-shadow: 0 1px 1px #{'@ORANGE_500'}; } &.yellow check, &.yellow radio, &.banana check, &.banana radio { background-color: #{'@BANANA_500'}; -gtk-icon-shadow: 0 1px 1px #{'@BANANA_700'}; } &.green check, &.green radio, &.lime check, &.lime radio { background-color: #{'@LIME_500'}; -gtk-icon-shadow: 0 1px 1px #{'@LIME_700'}; } &.blue check, &.blue radio, &.blueberry check, &.blueberry radio { background-color: #{'@BLUEBERRY_500'}; -gtk-icon-shadow: 0 1px 1px #{'@BLUEBERRY_700'}; } &.purple check, &.purple radio, &.grape check, &.grape radio { background-color: #{'@GRAPE_500'}; -gtk-icon-shadow: 0 1px 1px #{'@GRAPE_700'}; } &.brown check, &.brown radio, &.cocoa check, &.cocoa radio { background-color: #{'@COCOA_300'}; -gtk-icon-shadow: 0 1px 1px #{'@COCOA_500'}; } &.mint check, &.mint radio { background-color: #{'@MINT_500'}; -gtk-icon-shadow: 0 1px 1px #{'@MINT_700'}; } &.pink check, &.pink radio, &.bubblegum check, &.bubblegum radio { background-color: #{'@BUBBLEGUM_500'}; -gtk-icon-shadow: 0 1px 1px #{'@BUBBLEGUM_700'}; } &.slate check, &.slate radio { background-color: #{'@SLATE_300'}; -gtk-icon-shadow: 0 1px 1px #{'@SLATE_500'}; } &.auto radio { background-image: url("assets/color-button-auto.png"); background-position: -1px -1px; background-repeat: no-repeat; background-size: calc(100% + 2px); } } ================================================ FILE: gtk-4.0/apps/_rnote.scss ================================================ .colorpad { &, &:hover, &:active, &:checked { &, &:backdrop { background-color: #{'@colorpad_color'}; } } color: #{'@colorpad_fg_color'}; &:hover { filter: brightness(93%); } &:active { filter: brightness(86%); } &:checked { filter: brightness(100%); box-shadow: 0px 0px 0px 1.5px $selected_bg_color, inset 0px -3px 0px 0px #{'@colorpad_fg_color'}; } } .colorsetter { &, &:hover, &:active, &:checked { &, &:backdrop { background-color: #{'@colorsetter_color'}; } } color: #{'@colorsetter_fg_color'}; &:hover { filter: brightness(93%); } &:active { filter: brightness(86%); } &:checked { filter: brightness(100%); } } .overlay_toolbar, .overlay_toolbar_scrollable { background: lighten($base_color, 5%);; padding: 10px; } ================================================ FILE: gtk-4.0/apps/_thunar.scss ================================================ /* thunar */ .thunar toolbar { background-color: $headerbar_color; .flat { color:$headerbar_fg_color; } } /* buttons in toolbar */ .thunar toolbar.horizontal button image { -gtk-icon-transform:scale(0.72); } scrolledwindow.sidebar treeview.view { background: darken($_sidebar_color, 2%); padding: 1.5px; } /* path-bar of thunar */ window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar, .thunar toolbar { .path-bar-button { @include button(normal-header); border-radius: 0; border-right: 0.5px solid $dark_borders_color; box-shadow: none; min-height: 20px; padding: 3px 4px; &:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } &:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-right-style: solid; } &:only-child { border-radius: 4px; border-style: solid; } &:hover { color: $selected_bg_color; } &:checked { @include button(active, transparentize($selected_bg_color, 0.3), #fff); } } .toggle.path-bar-button:hover { @include button(active, transparentize($selected_bg_color, 0.3), #fff); } } /* thunar sidepane */ window.thunar paned > scrolledwindow treeview.view { color: #98abb2; &:hover, &:selected { background: transparentize($selected_bg_color, 0); color: $selected_fg_color; border-radius: 0; box-shadow: none; } } ================================================ FILE: gtk-4.0/apps/_unity.scss ================================================ /******** * Unity * *********/ $unity_color: #eeeeee; /* Unity window border color */ $unity_text_color: #31363D; /* Unity window text color */ $backdrop_unity_text_color: darken($unity_text_color,10%); /* Backdrop Unity window text color */ $unity_panel_color: darken($unity_color, 10%); /* Unity panel color #454D50 */ UnityDecoration { background-color: $unity_color; color: $unity_text_color; .top { padding: 0 5px 0 5px; border-radius: 4px 4px 0px 0px; box-shadow: none; border: 1px solid $unity_color; border-bottom-width: 0; background-color: $unity_color; color: $unity_text_color; border-top: 1px solid rgba(255,255,255,0.1); &:backdrop { border-bottom-width: 0; color: $backdrop_unity_text_color; border-top: 1px solid rgba(255,255,255,0.1); } .menuitem { color: $unity_text_color; &:backdrop { color: $backdrop_unity_text_color; } } } } UnityDecoration.left, UnityDecoration.right { background-repeat: repeat-x; background-color: darken($unity_color, 0.6); background-size: 1px 120px; background-clip: border-box; background-image: linear-gradient(to bottom, $unity_color, darken($unity_color, 0.6) ); } UnityDecoration.bottom { background-size: 1px; background-repeat: repeat-x; background-color: darken($unity_color, 0.6); } UnityDecoration.left:backdrop, UnityDecoration.right:backdrop, UnityDecoration.bottom:backdrop { background-size: 1px; background-repeat: repeat-x; } /************** * Unity Panel * ***************/ UnityPanelWidget, .unity-panel { background-color: $unity_panel_color; color: $unity_text_color; } UnityPanelWidget:backdrop, .unity-panel:backdrop { color: $backdrop_unity_text_color; } .unity-panel.menuitem, .unity-panel .menuitem { border-width: 0 1px; color: $unity_text_color; } .unity-panel.menubar, .unity-panel .menubar { color: $unity_text_color; } .unity-panel.menu.menubar, .unity-panel .menu .menubar { background-color: $unity_panel_color; color: $unity_text_color; } .unity-panel.menubar:backdrop, .unity-panel .menubar *:backdrop { color: $backdrop_fg_color; } .unity-panel.menubar.menuitem, .unity-panel.menubar .menuitem { padding: 3px 5px; border-width: 1px; border-style: solid; border: none; background: none; color: $unity_text_color; box-shadow: none; } .unity-panel.menubar.menuitem:hover, .unity-panel.menubar .menuitem:hover { border-radius: 0; background-color: darken($unity_color, 1.05); color: $unity_text_color; box-shadow: none; } .unity-panel.menubar .menuitem *:hover { color: white; box-shadow: none; } .unity-panel.menubar .menuitem.separator, .unity-panel.menubar.menuitem.separator { border: none; color: $borders_color; } /* Force Quit */ SheetStyleDialog.unity-force-quit { background-color: $base_color; } @keyframes playbackmenuitem_spinner { to { -gtk-icon-transform: rotate(1turn); } } .menu IdoPlaybackMenuItem.menuitem:active { -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); animation: playbackmenuitem_spinner 1s infinite linear; color: $selected_bg_color; } ================================================ FILE: gtk-4.0/apps/_xfce.scss ================================================ .xfce4-panel.panel { background-color: $panel_bg_color; text-shadow: none; -gtk-icon-shadow: none; button.flat:not(.open_group) { @extend %panelbutton; } } #tasklist-button { color: transparentize($panel_fg_color, 0.2); border-radius: 0; border: none; background-color: transparentize($panel_bg_color, 1); &:hover { color: lighten($panel_fg_color, 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_color; border-radius: 0; border: none; background-color: transparentize($panel_bg_color, 1); &:hover { border: none; background-color: lighten($panel_bg_color, 10%); } &:active, &:checked { color: $selected_fg_color; border: none; background-color: $selected_bg_color; label, image { color: inherit; } } } #whiskermenu-window button { background-color:transparent; border: none; border-radius: 0; font-weight: normal; padding: 3px; margin: 1px 2px; &:hover, &:checked { background-color: $selected_bg_color; } } /* Vala-appmenu-plugin*/ .-vala-panel-appmenu-core scrolledwindow, .-vala-panel-appmenu-private > menuitem, .-vala-panel-appmenu-private > menuitem:first-child > label { color: $panel_fg_color; } // Notifications #XfceNotifyWindow { background-color: darken($panel_bg_color, 2%); border-radius: 12px; border-width: 1px; border: 1px solid $dark_borders_color; color: $fg_color; padding: 40px; &:hover, &:focus { background-color: $panel_bg_color; } label, image { color: $panel_fg_color; } button { @include button(normal-header); &:hover { @include button(hover, $selected_bg_color); label { color:$selected_fg_color; } } } } ================================================ FILE: gtk-4.0/gtk-dark.css ================================================ /*$selected_bg_color: #00e8c6;06d6a0*/ /* GTK NAMED COLORS ---------------- use responsibly! */ /* widget text/foreground color */ @define-color theme_fg_color #d8dee9; /* text color for entries, views and content in general */ @define-color theme_text_color #d8dee9; /* widget base background color */ @define-color theme_bg_color #434c5e; /* text widgets and the like base background color */ @define-color theme_base_color #3b4252; /* base background color of selections */ @define-color theme_selected_bg_color #81a1c1; /* text/foreground color of selections */ @define-color theme_selected_fg_color #fefefe; /* base background color of disabled widgets */ @define-color insensitive_bg_color #404859; /* text foreground color of disabled widgets */ @define-color insensitive_fg_color #8e95a4; /* disabled text widgets and the like base background color */ @define-color insensitive_base_color #3b4252; /* widget text/foreground color on backdrop windows */ @define-color theme_unfocused_fg_color #8e95a4; /* text color for entries, views and content in general on backdrop windows */ @define-color theme_unfocused_text_color #d8dee9; /* widget base background color on backdrop windows */ @define-color theme_unfocused_bg_color #434c5e; /* text widgets and the like base background color on backdrop windows */ @define-color theme_unfocused_base_color #3d4455; /* base background color of selections on backdrop windows */ @define-color theme_unfocused_selected_bg_color #81a1c1; /* text/foreground color of selections on backdrop windows */ @define-color theme_unfocused_selected_fg_color #fefefe; /* widgets main borders color */ @define-color borders #262a34; /* widgets main borders color on backdrop windows */ @define-color unfocused_borders #292d38; /* these are pretty self explicative */ @define-color warning_color #c3674a; @define-color error_color #b84f59; @define-color success_color #63adc2; @define-color fg_color #d8dee9; @define-color text_color #d8dee9; @define-color bg_color #434c5e; @define-color base_color #3b4252; @define-color selected_bg_color #81a1c1; @define-color selected_fg_color #fefefe; @define-color unfocused_fg_color #8e95a4; @define-color unfocused_text_color #d8dee9; @define-color unfocused_bg_color #434c5e; @define-color unfocused_base_color #3d4455; @define-color unfocused_selected_bg_color #81a1c1; @define-color unfocused_selected_fg_color #fefefe; /* these colors are exported for the window manager and shouldn't be used in applications, read if you used those and something break with a version upgrade you're on your own... */ @define-color wm_title shade(#d8dee9, 1.8); @define-color wm_unfocused_title #8e95a4; @define-color wm_highlight rgba(0, 0, 0, 0); @define-color wm_borders_edge rgba(255, 255, 255, 0.1); @define-color wm_bg_a shade(#434c5e, 1.2); @define-color wm_bg_b #434c5e; @define-color wm_shadow alpha(black, 0.35); @define-color wm_border alpha(black, 0.18); @define-color wm_button_hover_color_a shade(#434c5e, 1.3); @define-color wm_button_hover_color_b #434c5e; @define-color wm_button_active_color_a shade(#434c5e, 0.85); @define-color wm_button_active_color_b shade(#434c5e, 0.89); @define-color wm_button_active_color_c shade(#434c5e, 0.9); @define-color content_view_bg #3b4252; @define-color text_view_bg #3b4252; @define-color budgie_tasklist_indicator_color #81a1c1; @define-color budgie_tasklist_indicator_color_active #81a1c1; @define-color STRAWBERRY_100 #ff8c82; @define-color STRAWBERRY_300 #ed5353; @define-color STRAWBERRY_500 #c6262e; @define-color STRAWBERRY_700 #a10705; @define-color STRAWBERRY_900 #7a0000; @define-color ORANGE_100 #ffc27d; @define-color ORANGE_300 #ffa154; @define-color ORANGE_500 #f37329; @define-color ORANGE_700 #cc3b02; @define-color ORANGE_900 #a62100; @define-color BANANA_100 #fff394; @define-color BANANA_300 #ffe16b; @define-color BANANA_500 #f9c440; @define-color BANANA_700 #d48e15; @define-color BANANA_900 #ad5f00; @define-color LIME_100 #d1ff82; @define-color LIME_300 #9bdb4d; @define-color LIME_500 #68b723; @define-color LIME_700 #3a9104; @define-color LIME_900 #206b00; @define-color MINT_100 #89ffdd; @define-color MINT_300 #43d6b5; @define-color MINT_500 #28bca3; @define-color MINT_700 #0e9a83; @define-color MINT_900 #007367; @define-color BLUEBERRY_100 #8cd5ff; @define-color BLUEBERRY_300 #64baff; @define-color BLUEBERRY_500 #3689e6; @define-color BLUEBERRY_700 #0d52bf; @define-color BLUEBERRY_900 #002e99; @define-color BUBBLEGUM_100 #fe9ab8; @define-color BUBBLEGUM_300 #f4679d; @define-color BUBBLEGUM_500 #de3e80; @define-color BUBBLEGUM_700 #bc245d; @define-color BUBBLEGUM_900 #910e38; @define-color GRAPE_100 #e4c6fa; @define-color GRAPE_300 #cd9ef7; @define-color GRAPE_500 #a56de2; @define-color GRAPE_700 #7239b3; @define-color GRAPE_900 #452981; @define-color COCOA_100 #a3907c; @define-color COCOA_300 #8a715e; @define-color COCOA_500 #715344; @define-color COCOA_700 #57392d; @define-color COCOA_900 #3d211b; @define-color SILVER_100 #fafafa; @define-color SILVER_300 #d4d4d4; @define-color SILVER_500 #abacae; @define-color SILVER_700 #7e8087; @define-color SILVER_900 #555761; @define-color SLATE_100 #95a3ab; @define-color SLATE_300 #667885; @define-color SLATE_500 #485a6c; @define-color SLATE_700 #273445; @define-color SLATE_900 #0e141f; @define-color BLACK_100 #666; @define-color BLACK_300 #4d4d4d; @define-color BLACK_500 #333; @define-color BLACK_700 #1a1a1a; @define-color BLACK_900 #000; /***************** * Drawing mixins * *****************/ /********* * Common * *********/ * { padding: 0; outline-color: rgba(216, 222, 233, 0.3); outline-style: dashed; outline-offset: -3px; outline-width: 0px; -gtk-secondary-caret-color: #81a1c1; } /*********** * Widgets * ***********/ /*************** * Action bars * ***************/ .action-bar, actionbar > revealer > box { background-color: #262a34; border: solid #262a34; border-width: 1px 0 0 0; color: #d8dee9; box-shadow: none; } .action-bar:backdrop, actionbar > revealer > box:backdrop { background-color: #2e3440; box-shadow: none; } .action-bar:first-child, actionbar > revealer > box:first-child { border-radius: 6px 6px 0px 0px; border-width: 1px 1px 0px 1px; } .action-bar:last-child, actionbar > revealer > box:last-child { border-radius: 0 0 6px 6px; border-width: 0px 1px 1px 1px; } /********************* * App Notifications * *********************/ .app-notification, .app-notification.frame { padding: 10px; border-radius: 0 0 5px 5px; background-color: rgba(40, 45, 55, 0.93); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px); background-clip: padding-box; } .app-notification:backdrop, .app-notification.frame:backdrop { background-image: none; transition: 200ms ease-out; } .app-notification border, .app-notification.frame border { border: none; } toast { padding: 5px; background-color: #3b4252; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.35); color: #d8dee9; } toast:backdrop { background-image: none; transition: 200ms ease-out; } toast button { padding: 2px; } toast button.circular.flat.image-button { padding: 2px; } toast button.circular.flat.image-button:hover { color: #fefefe; outline-color: rgba(254, 254, 254, 0.3); background-color: #bf616a; text-shadow: none; } /*************** * Base States * ***************/ .background { color: #d8dee9; background-color: #434c5e; } .background:backdrop { color: #8e95a4; background-color: #434c5e; text-shadow: none; -gtk-icon-shadow: none; } /* These wildcard seems unavoidable, need to investigate. Wildcards are bad and troublesome, use them with care, or better, just don't. Everytime a wildcard is used a kitten dies, painfully. */ .gtkstyle-fallback { color: #d8dee9; background-color: #434c5e; } .gtkstyle-fallback:hover { color: #d8dee9; background-color: #58647c; } .gtkstyle-fallback:active { color: #d8dee9; background-color: #2e3440; } .gtkstyle-fallback:disabled { color: #8e95a4; background-color: #404859; } .gtkstyle-fallback:selected { color: #fefefe; background-color: #81a1c1; } .history-view, .view, iconview, textview > text { color: #d8dee9; background-color: #3b4252; } .history-view:backdrop, .view:backdrop, iconview:backdrop, textview > text:backdrop { color: #b9bfcb; background-color: #3d4455; } .history-view:selected:focus, .history-view:selected, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, textview > text:selected:focus, textview > text:selected { border-radius: 3px; } textview > text { background-color: transparent; } textview border { background-color: #3f4758; } .rubberband, rubberband, flowbox rubberband, .content-view rubberband, columnview.view > rubberband, treeview.view > rubberband { border: 1px solid #5f88b0; background-color: rgba(95, 136, 176, 0.2); } flowbox flowboxchild { padding: 3px; border-radius: 3px; } flowbox flowboxchild:selected { outline-offset: -2px; } gridview { padding: 10px; } gridview > child { padding: 7px; } gridview > child box { border-spacing: 5px; } label { caret-color: currentColor; } label.separator { color: #d8dee9; } label.separator:backdrop { color: #8e95a4; } label selection { background-color: #81a1c1; color: #fefefe; } label:disabled { color: #8e95a4; } label:disabled:backdrop { color: #63708b; } label:backdrop { color: #8e95a4; } .dim-label, label.separator, .titlebar .subtitle, headerbar .subtitle { opacity: 0.55; text-shadow: none; } window.assistant .sidebar { background-color: #3b4252; border-top: 1px solid #262a34; } window.assistant .sidebar:backdrop { background-color: #3d4455; border-color: #292d38; } window.assistant.csd .sidebar { border-top-style: none; } window.assistant .sidebar label { padding: 6px 12px; } window.assistant .sidebar label.highlight { background-color: #81a1c1; color: #fefefe; } window.aboutdialog image.large-icons { -gtk-icon-size: 128px; } .app-notification, .app-notification.frame, .osd .scale-popup, .osd popover.background > arrow, .osd popover.background > contents, popover.background.touch-selection > arrow, popover.background.touch-selection > contents, popover.background.magnifier > arrow, popover.background.magnifier > contents, .osd { color: #d8dee9; border: none; background-color: rgba(40, 45, 55, 0.93); background-clip: padding-box; outline-color: rgba(216, 222, 233, 0.3); text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; } .app-notification:backdrop, .osd .scale-popup:backdrop, .osd popover.background > arrow:backdrop, .osd popover.background > contents:backdrop, popover.background.touch-selection > arrow:backdrop, popover.background.touch-selection > contents:backdrop, popover.background.magnifier > arrow:backdrop, popover.background.magnifier > contents:backdrop, .osd:backdrop { text-shadow: none; -gtk-icon-shadow: none; } /*********** * Buttons * ***********/ @keyframes needs_attention { from { background-image: radial-gradient(farthest-side, #b4c7da 0%, rgba(180, 199, 218, 0) 0%); } to { background-image: radial-gradient(farthest-side, #b4c7da 95%, rgba(180, 199, 218, 0)); } } notebook > header > tabs > arrow, .sidebar-pane .top-bar popover.background button, .content-pane .top-bar popover.background button, button { min-height: 22px; min-width: 16px; padding: 4px 6px; border: 1px solid #262a34; border-radius: 6px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); font-weight: normal; color: #d8dee9; background-color: #3c4454; text-shadow: none; } notebook > header > tabs > arrow, .sidebar-pane .top-bar popover.background button.flat, .content-pane .top-bar popover.background button.flat, button.flat { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; transition: none; } notebook > header > tabs > arrow:hover, .sidebar-pane .top-bar popover.background button.flat:hover, .content-pane .top-bar popover.background button.flat:hover, button.flat:hover { transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-duration: 500ms; color: #fefefe; outline-color: rgba(254, 254, 254, 0.3); background-color: #81a1c1; text-shadow: none; } notebook > header > tabs > arrow:hover:active, .sidebar-pane .top-bar popover.background button.flat:hover:active, .content-pane .top-bar popover.background button.flat:hover:active, button.flat:hover:active { transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } notebook > header > tabs > arrow:hover, .sidebar-pane .top-bar popover.background button:hover, .content-pane .top-bar popover.background button:hover, button:hover { color: #fefefe; outline-color: rgba(254, 254, 254, 0.3); background-color: #81a1c1; text-shadow: none; -gtk-icon-filter: brightness(1.2); } notebook > header > tabs > arrow:active, notebook > header > tabs > arrow:checked, .sidebar-pane .top-bar popover.background button:active, .content-pane .top-bar popover.background button:active, .sidebar-pane .top-bar popover.background button:checked, .content-pane .top-bar popover.background button:checked, button:active, button:checked { color: #fefefe; outline-color: rgba(254, 254, 254, 0.3); background-color: #7094b9; text-shadow: none; transition-duration: 50ms; } notebook > header > tabs > arrow:backdrop, notebook > header > tabs > arrow:backdrop, .sidebar-pane .top-bar popover.background button:backdrop.flat, .content-pane .top-bar popover.background button:backdrop.flat, .sidebar-pane .top-bar popover.background button:backdrop, .content-pane .top-bar popover.background button:backdrop, button:backdrop.flat, button:backdrop { color: #b9bfcb; outline-color: rgba(216, 222, 233, 0.3); background-color: #3d4455; text-shadow: none; transition: 200ms ease-out; -gtk-icon-filter: none; } notebook > header > tabs > arrow:backdrop:active, notebook > header > tabs > arrow:backdrop:checked, notebook > header > tabs > arrow:backdrop:active, notebook > header > tabs > arrow:backdrop:checked, .sidebar-pane .top-bar popover.background button:backdrop.flat:active, .content-pane .top-bar popover.background button:backdrop.flat:active, .sidebar-pane .top-bar popover.background button:backdrop.flat:checked, .content-pane .top-bar popover.background button:backdrop.flat:checked, .sidebar-pane .top-bar popover.background button:backdrop:active, .content-pane .top-bar popover.background button:backdrop:active, .sidebar-pane .top-bar popover.background button:backdrop:checked, .content-pane .top-bar popover.background button:backdrop:checked, button:backdrop.flat:active, button:backdrop.flat:checked, button:backdrop:active, button:backdrop:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(216, 222, 233, 0.3); background-color: #81a1c1; text-shadow: none; } notebook > header > tabs > arrow:backdrop:active label, notebook > header > tabs > arrow:backdrop:checked label, notebook > header > tabs > arrow:backdrop:active label, notebook > header > tabs > arrow:backdrop:checked label, .sidebar-pane .top-bar popover.background button:backdrop.flat:active label, .content-pane .top-bar popover.background button:backdrop.flat:active label, .sidebar-pane .top-bar popover.background button:backdrop.flat:checked label, .content-pane .top-bar popover.background button:backdrop.flat:checked label, .sidebar-pane .top-bar popover.background button:backdrop:active label, .content-pane .top-bar popover.background button:backdrop:active label, .sidebar-pane .top-bar popover.background button:backdrop:checked label, .content-pane .top-bar popover.background button:backdrop:checked label, button:backdrop.flat:active label, button:backdrop.flat:checked label, button:backdrop:active label, button:backdrop:checked label { color: rgba(254, 254, 254, 0.7); } notebook > header > tabs > arrow:backdrop:disabled, notebook > header > tabs > arrow:backdrop:disabled, .sidebar-pane .top-bar popover.background button:backdrop.flat:disabled, .content-pane .top-bar popover.background button:backdrop.flat:disabled, .sidebar-pane .top-bar popover.background button:backdrop:disabled, .content-pane .top-bar popover.background button:backdrop:disabled, button:backdrop.flat:disabled, button:backdrop:disabled { color: #b9bfcb; outline-color: rgba(216, 222, 233, 0.3); background-color: #404859; text-shadow: none; } notebook > header > tabs > arrow:backdrop:disabled:active, notebook > header > tabs > arrow:backdrop:disabled:checked, notebook > header > tabs > arrow:backdrop:disabled:active, notebook > header > tabs > arrow:backdrop:disabled:checked, .sidebar-pane .top-bar popover.background button:backdrop.flat:disabled:active, .content-pane .top-bar popover.background button:backdrop.flat:disabled:active, .sidebar-pane .top-bar popover.background button:backdrop.flat:disabled:checked, .content-pane .top-bar popover.background button:backdrop.flat:disabled:checked, .sidebar-pane .top-bar popover.background button:backdrop:disabled:active, .content-pane .top-bar popover.background button:backdrop:disabled:active, .sidebar-pane .top-bar popover.background button:backdrop:disabled:checked, .content-pane .top-bar popover.background button:backdrop:disabled:checked, button:backdrop.flat:disabled:active, button:backdrop.flat:disabled:checked, button:backdrop:disabled:active, button:backdrop:disabled:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(216, 222, 233, 0.3); background-color: #81a1c1; text-shadow: none; } notebook > header > tabs > arrow:backdrop, notebook > header > tabs > arrow:disabled, notebook > header > tabs > arrow:backdrop:disabled, .sidebar-pane .top-bar popover.background button.flat:backdrop, .content-pane .top-bar popover.background button.flat:backdrop, .sidebar-pane .top-bar popover.background button.flat:disabled, .content-pane .top-bar popover.background button.flat:disabled, .sidebar-pane .top-bar popover.background button.flat:backdrop:disabled, .content-pane .top-bar popover.background button.flat:backdrop:disabled, button.flat:backdrop, button.flat:disabled, button.flat:backdrop:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } notebook > header > tabs > arrow:disabled, .sidebar-pane .top-bar popover.background button:disabled, .content-pane .top-bar popover.background button:disabled, button:disabled { color: #b9bfcb; outline-color: rgba(216, 222, 233, 0.3); background-color: #404859; text-shadow: none; } notebook > header > tabs > arrow:disabled:active, notebook > header > tabs > arrow:disabled:checked, .sidebar-pane .top-bar popover.background button:disabled:active, .content-pane .top-bar popover.background button:disabled:active, .sidebar-pane .top-bar popover.background button:disabled:checked, .content-pane .top-bar popover.background button:disabled:checked, button:disabled:active, button:disabled:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(216, 222, 233, 0.3); background-color: #81a1c1; text-shadow: none; } notebook > header > tabs > arrow:disabled:active label, notebook > header > tabs > arrow:disabled:checked label, .sidebar-pane .top-bar popover.background button:disabled:active label, .content-pane .top-bar popover.background button:disabled:active label, .sidebar-pane .top-bar popover.background button:disabled:checked label, .content-pane .top-bar popover.background button:disabled:checked label, button:disabled:active label, button:disabled:checked label { color: rgba(254, 254, 254, 0.7); } notebook > header > tabs > arrow.image-button, .sidebar-pane .top-bar popover.background button.image-button, .content-pane .top-bar popover.background button.image-button, button.image-button { min-width: 24px; padding-left: 4px; padding-right: 4px; } notebook > header > tabs > arrow.image-button.circular, notebook > header > tabs > arrow.image-button.sidebar-button, .sidebar-pane .top-bar popover.background button.image-button.circular, .content-pane .top-bar popover.background button.image-button.circular, .sidebar-pane .top-bar popover.background button.image-button.sidebar-button, .content-pane .top-bar popover.background button.image-button.sidebar-button, button.image-button.circular, button.image-button.sidebar-button { padding: 6px 4px; border-radius: 50px; box-shadow: none; } notebook > header > tabs > arrow.text-button, .sidebar-pane .top-bar popover.background button.text-button, .content-pane .top-bar popover.background button.text-button, button.text-button { padding-left: 16px; padding-right: 16px; } notebook > header > tabs > arrow.text-button.image-button, .sidebar-pane .top-bar popover.background button.text-button.image-button, .content-pane .top-bar popover.background button.text-button.image-button, button.text-button.image-button { padding-left: 8px; padding-right: 8px; border-radius: 6px; } notebook > header > tabs > arrow.text-button.image-button label, .sidebar-pane .top-bar popover.background button.text-button.image-button label, .content-pane .top-bar popover.background button.text-button.image-button label, button.text-button.image-button label { padding-left: 8px; padding-right: 8px; } combobox:drop(active) button.combo, notebook > header > tabs > arrow:drop(active), .sidebar-pane .top-bar popover.background button:drop(active), .content-pane .top-bar popover.background button:drop(active), button:drop(active) { color: #a3be8c; border-color: #a3be8c; box-shadow: inset 0 0 0 1px #a3be8c; } row:selected .sidebar-pane .top-bar popover.background button.flat:not(:active):not(:checked):not(:hover):not(disabled), .sidebar-pane .top-bar popover.background row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled), row:selected .content-pane .top-bar popover.background button.flat:not(:active):not(:checked):not(:hover):not(disabled), .content-pane .top-bar popover.background row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled), row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled) { color: #fefefe; border-color: transparent; } row:selected .sidebar-pane .top-bar popover.background button.flat:not(:active):not(:checked):not(:hover):not(disabled):backdrop, .sidebar-pane .top-bar popover.background row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled):backdrop, row:selected .content-pane .top-bar popover.background button.flat:not(:active):not(:checked):not(:hover):not(disabled):backdrop, .content-pane .top-bar popover.background row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled):backdrop, row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled):backdrop { color: #8e95a4; } .sidebar-pane .top-bar popover.background button.osd, .content-pane .top-bar popover.background button.osd, button.osd { min-width: 24px; min-height: 20px; color: #d8dee9; border-radius: 6px; outline-color: rgba(216, 222, 233, 0.3); color: #d8dee9; border-color: #1f232b; background-color: rgba(40, 45, 55, 0.93); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); border: none; box-shadow: none; } .sidebar-pane .top-bar popover.background button.osd.image-button, .content-pane .top-bar popover.background button.osd.image-button, button.osd.image-button { min-width: 32px; } .sidebar-pane .top-bar popover.background button.osd:hover, .content-pane .top-bar popover.background button.osd:hover, button.osd:hover { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(65, 74, 91, 0.93), rgba(65, 74, 91, 0.93)); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); border: none; box-shadow: none; } .sidebar-pane .top-bar popover.background button.osd:active, .content-pane .top-bar popover.background button.osd:active, .sidebar-pane .top-bar popover.background button.osd:checked, .content-pane .top-bar popover.background button.osd:checked, button.osd:active, button.osd:checked { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(52, 59, 73, 0.93), rgba(52, 59, 73, 0.93)); background-clip: padding-box; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(216, 222, 233, 0.3); border: none; box-shadow: none; } .sidebar-pane .top-bar popover.background button.osd:disabled:backdrop, .content-pane .top-bar popover.background button.osd:disabled:backdrop, .sidebar-pane .top-bar popover.background button.osd:disabled, .content-pane .top-bar popover.background button.osd:disabled, button.osd:disabled:backdrop, button.osd:disabled { color: #808690; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(58, 63, 73, 0.5), rgba(58, 63, 73, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; border: none; } .sidebar-pane .top-bar popover.background button.osd:backdrop, .content-pane .top-bar popover.background button.osd:backdrop, button.osd:backdrop { color: #d8dee9; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(40, 45, 55, 0.93), rgba(40, 45, 55, 0.93)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; border: none; } .app-notification button, .app-notification.frame button, popover.background.touch-selection button, popover.background.magnifier button, .osd .sidebar-pane .top-bar popover.background button, .sidebar-pane .top-bar popover.background .osd button, .osd .content-pane .top-bar popover.background button, .content-pane .top-bar popover.background .osd button, .osd button { color: #d8dee9; border-color: #1f232b; background-color: rgba(40, 45, 55, 0.93); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } .app-notification button:hover, popover.background.touch-selection button:hover, popover.background.magnifier button:hover, .osd .sidebar-pane .top-bar popover.background button:hover, .sidebar-pane .top-bar popover.background .osd button:hover, .osd .content-pane .top-bar popover.background button:hover, .content-pane .top-bar popover.background .osd button:hover, .osd button:hover { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(65, 74, 91, 0.93), rgba(65, 74, 91, 0.93)); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } .app-notification button:active:backdrop, popover.background.touch-selection button:active:backdrop, popover.background.magnifier button:active:backdrop, .app-notification button:active, popover.background.touch-selection button:active, popover.background.magnifier button:active, .app-notification button:checked:backdrop, popover.background.touch-selection button:checked:backdrop, popover.background.magnifier button:checked:backdrop, .app-notification button:checked, popover.background.touch-selection button:checked, popover.background.magnifier button:checked, .osd .sidebar-pane .top-bar popover.background button:active:backdrop, .sidebar-pane .top-bar popover.background .osd button:active:backdrop, .osd .content-pane .top-bar popover.background button:active:backdrop, .content-pane .top-bar popover.background .osd button:active:backdrop, .osd .sidebar-pane .top-bar popover.background button:active, .sidebar-pane .top-bar popover.background .osd button:active, .osd .content-pane .top-bar popover.background button:active, .content-pane .top-bar popover.background .osd button:active, .osd .sidebar-pane .top-bar popover.background button:checked:backdrop, .sidebar-pane .top-bar popover.background .osd button:checked:backdrop, .osd .content-pane .top-bar popover.background button:checked:backdrop, .content-pane .top-bar popover.background .osd button:checked:backdrop, .osd .sidebar-pane .top-bar popover.background button:checked, .sidebar-pane .top-bar popover.background .osd button:checked, .osd .content-pane .top-bar popover.background button:checked, .content-pane .top-bar popover.background .osd button:checked, .osd button:active:backdrop, .osd button:active, .osd button:checked:backdrop, .osd button:checked { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(52, 59, 73, 0.93), rgba(52, 59, 73, 0.93)); background-clip: padding-box; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(216, 222, 233, 0.3); } .app-notification button:disabled:backdrop, popover.background.touch-selection button:disabled:backdrop, popover.background.magnifier button:disabled:backdrop, .app-notification button:disabled, popover.background.touch-selection button:disabled, popover.background.magnifier button:disabled, .osd .sidebar-pane .top-bar popover.background button:disabled:backdrop, .sidebar-pane .top-bar popover.background .osd button:disabled:backdrop, .osd .content-pane .top-bar popover.background button:disabled:backdrop, .content-pane .top-bar popover.background .osd button:disabled:backdrop, .osd .sidebar-pane .top-bar popover.background button:disabled, .sidebar-pane .top-bar popover.background .osd button:disabled, .osd .content-pane .top-bar popover.background button:disabled, .content-pane .top-bar popover.background .osd button:disabled, .osd button:disabled:backdrop, .osd button:disabled { color: #808690; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(58, 63, 73, 0.5), rgba(58, 63, 73, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } .app-notification button:backdrop, popover.background.touch-selection button:backdrop, popover.background.magnifier button:backdrop, .osd .sidebar-pane .top-bar popover.background button:backdrop, .sidebar-pane .top-bar popover.background .osd button:backdrop, .osd .content-pane .top-bar popover.background button:backdrop, .content-pane .top-bar popover.background .osd button:backdrop, .osd button:backdrop { color: #d8dee9; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(40, 45, 55, 0.93), rgba(40, 45, 55, 0.93)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } .app-notification button.flat, popover.background.touch-selection button.flat, popover.background.magnifier button.flat, .osd .sidebar-pane .top-bar popover.background button.flat, .sidebar-pane .top-bar popover.background .osd button.flat, .osd .content-pane .top-bar popover.background button.flat, .content-pane .top-bar popover.background .osd button.flat, .osd button.flat { color: #d8dee9; border-color: #1f232b; background-color: rgba(40, 45, 55, 0.93); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); box-shadow: none; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; } .app-notification button.flat:hover, popover.background.touch-selection button.flat:hover, popover.background.magnifier button.flat:hover, .osd .sidebar-pane .top-bar popover.background button.flat:hover, .sidebar-pane .top-bar popover.background .osd button.flat:hover, .osd .content-pane .top-bar popover.background button.flat:hover, .content-pane .top-bar popover.background .osd button.flat:hover, .osd button.flat:hover { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(65, 74, 91, 0.93), rgba(65, 74, 91, 0.93)); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } .app-notification button.flat:disabled, popover.background.touch-selection button.flat:disabled, popover.background.magnifier button.flat:disabled, .osd .sidebar-pane .top-bar popover.background button.flat:disabled, .sidebar-pane .top-bar popover.background .osd button.flat:disabled, .osd .content-pane .top-bar popover.background button.flat:disabled, .content-pane .top-bar popover.background .osd button.flat:disabled, .osd button.flat:disabled { color: #808690; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(58, 63, 73, 0.5), rgba(58, 63, 73, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; background-image: none; border-color: transparent; box-shadow: none; } .app-notification button.flat:backdrop, popover.background.touch-selection button.flat:backdrop, popover.background.magnifier button.flat:backdrop, .osd .sidebar-pane .top-bar popover.background button.flat:backdrop, .sidebar-pane .top-bar popover.background .osd button.flat:backdrop, .osd .content-pane .top-bar popover.background button.flat:backdrop, .content-pane .top-bar popover.background .osd button.flat:backdrop, .osd button.flat:backdrop { color: #d8dee9; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(40, 45, 55, 0.93), rgba(40, 45, 55, 0.93)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } .app-notification button.flat:active, popover.background.touch-selection button.flat:active, popover.background.magnifier button.flat:active, .app-notification button.flat:checked, popover.background.touch-selection button.flat:checked, popover.background.magnifier button.flat:checked, .osd .sidebar-pane .top-bar popover.background button.flat:active, .sidebar-pane .top-bar popover.background .osd button.flat:active, .osd .content-pane .top-bar popover.background button.flat:active, .content-pane .top-bar popover.background .osd button.flat:active, .osd .sidebar-pane .top-bar popover.background button.flat:checked, .sidebar-pane .top-bar popover.background .osd button.flat:checked, .osd .content-pane .top-bar popover.background button.flat:checked, .content-pane .top-bar popover.background .osd button.flat:checked, .osd button.flat:active, .osd button.flat:checked { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(52, 59, 73, 0.93), rgba(52, 59, 73, 0.93)); background-clip: padding-box; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(216, 222, 233, 0.3); } .sidebar-pane .top-bar popover.background button.suggested-action, .content-pane .top-bar popover.background button.suggested-action, button.suggested-action { border: none; box-shadow: none; color: #fff; border-radius: 6px; background: linear-gradient(to right, #88c0d0 0%, #88c0d0 100%); } .sidebar-pane .top-bar popover.background button.suggested-action label, .content-pane .top-bar popover.background button.suggested-action label, button.suggested-action label { color: #fff; } .sidebar-pane .top-bar popover.background button.suggested-action.flat, .content-pane .top-bar popover.background button.suggested-action.flat, .selection-mode windowcontrols button, button.suggested-action.flat { box-shadow: none; color: #fff; border-radius: 6px; background: linear-gradient(to right, #88c0d0 0%, #88c0d0 100%); } .sidebar-pane .top-bar popover.background button.suggested-action.flat label, .content-pane .top-bar popover.background button.suggested-action.flat label, .selection-mode windowcontrols button label, button.suggested-action.flat label { color: #fff; } .sidebar-pane .top-bar popover.background button.suggested-action:hover, .content-pane .top-bar popover.background button.suggested-action:hover, button.suggested-action:hover { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #88c0d0; text-shadow: none; opacity: 0.85; } .sidebar-pane .top-bar popover.background button.suggested-action:active, .content-pane .top-bar popover.background button.suggested-action:active, .sidebar-pane .top-bar popover.background button.suggested-action:checked, .content-pane .top-bar popover.background button.suggested-action:checked, button.suggested-action:active, button.suggested-action:checked { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #88c0d0; text-shadow: none; } .sidebar-pane .top-bar popover.background button.suggested-action:backdrop, .content-pane .top-bar popover.background button.suggested-action:backdrop, .sidebar-pane .top-bar popover.background button.suggested-action.flat:backdrop, .content-pane .top-bar popover.background button.suggested-action.flat:backdrop, .selection-mode windowcontrols button:backdrop, button.suggested-action:backdrop, button.suggested-action.flat:backdrop { color: rgba(255, 255, 255, 0.4); outline-color: rgba(255, 255, 255, 0.3); background-color: #88c0d0; text-shadow: none; } .sidebar-pane .top-bar popover.background button.suggested-action:backdrop label, .content-pane .top-bar popover.background button.suggested-action:backdrop label, .sidebar-pane .top-bar popover.background button.suggested-action.flat:backdrop label, .content-pane .top-bar popover.background button.suggested-action.flat:backdrop label, .selection-mode windowcontrols button:backdrop label, button.suggested-action:backdrop label, button.suggested-action.flat:backdrop label { color: rgba(255, 255, 255, 0.5); } .sidebar-pane .top-bar popover.background button.suggested-action:backdrop:active, .content-pane .top-bar popover.background button.suggested-action:backdrop:active, .sidebar-pane .top-bar popover.background button.suggested-action:backdrop:checked, .content-pane .top-bar popover.background button.suggested-action:backdrop:checked, .sidebar-pane .top-bar popover.background button.suggested-action.flat:backdrop:active, .content-pane .top-bar popover.background button.suggested-action.flat:backdrop:active, .selection-mode windowcontrols button:backdrop:active, .sidebar-pane .top-bar popover.background button.suggested-action.flat:backdrop:checked, .content-pane .top-bar popover.background button.suggested-action.flat:backdrop:checked, .selection-mode windowcontrols button:backdrop:checked, button.suggested-action:backdrop:active, button.suggested-action:backdrop:checked, button.suggested-action.flat:backdrop:active, button.suggested-action.flat:backdrop:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(255, 255, 255, 0.3); background-color: #81a1c1; text-shadow: none; } .sidebar-pane .top-bar popover.background button.suggested-action:backdrop:active label, .content-pane .top-bar popover.background button.suggested-action:backdrop:active label, .sidebar-pane .top-bar popover.background button.suggested-action:backdrop:checked label, .content-pane .top-bar popover.background button.suggested-action:backdrop:checked label, .sidebar-pane .top-bar popover.background button.suggested-action.flat:backdrop:active label, .content-pane .top-bar popover.background button.suggested-action.flat:backdrop:active label, .selection-mode windowcontrols button:backdrop:active label, .sidebar-pane .top-bar popover.background button.suggested-action.flat:backdrop:checked label, .content-pane .top-bar popover.background button.suggested-action.flat:backdrop:checked label, .selection-mode windowcontrols button:backdrop:checked label, button.suggested-action:backdrop:active label, button.suggested-action:backdrop:checked label, button.suggested-action.flat:backdrop:active label, button.suggested-action.flat:backdrop:checked label { color: rgba(254, 254, 254, 0.7); } .sidebar-pane .top-bar popover.background button.suggested-action:backdrop:disabled, .content-pane .top-bar popover.background button.suggested-action:backdrop:disabled, .sidebar-pane .top-bar popover.background button.suggested-action.flat:backdrop:disabled, .content-pane .top-bar popover.background button.suggested-action.flat:backdrop:disabled, .selection-mode windowcontrols button:backdrop:disabled, button.suggested-action:backdrop:disabled, button.suggested-action.flat:backdrop:disabled { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #88c0d0; text-shadow: none; } .sidebar-pane .top-bar popover.background button.suggested-action:backdrop:disabled label, .content-pane .top-bar popover.background button.suggested-action:backdrop:disabled label, .sidebar-pane .top-bar popover.background button.suggested-action.flat:backdrop:disabled label, .content-pane .top-bar popover.background button.suggested-action.flat:backdrop:disabled label, .selection-mode windowcontrols button:backdrop:disabled label, button.suggested-action:backdrop:disabled label, button.suggested-action.flat:backdrop:disabled label { color: rgba(255, 255, 255, 0.5); } .sidebar-pane .top-bar popover.background button.suggested-action:backdrop:disabled:active, .content-pane .top-bar popover.background button.suggested-action:backdrop:disabled:active, .sidebar-pane .top-bar popover.background button.suggested-action:backdrop:disabled:checked, .content-pane .top-bar popover.background button.suggested-action:backdrop:disabled:checked, .sidebar-pane .top-bar popover.background button.suggested-action.flat:backdrop:disabled:active, .content-pane .top-bar popover.background button.suggested-action.flat:backdrop:disabled:active, .selection-mode windowcontrols button:backdrop:disabled:active, .sidebar-pane .top-bar popover.background button.suggested-action.flat:backdrop:disabled:checked, .content-pane .top-bar popover.background button.suggested-action.flat:backdrop:disabled:checked, .selection-mode windowcontrols button:backdrop:disabled:checked, button.suggested-action:backdrop:disabled:active, button.suggested-action:backdrop:disabled:checked, button.suggested-action.flat:backdrop:disabled:active, button.suggested-action.flat:backdrop:disabled:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(255, 255, 255, 0.3); background-color: #81a1c1; text-shadow: none; } .sidebar-pane .top-bar popover.background button.suggested-action.flat:backdrop, .content-pane .top-bar popover.background button.suggested-action.flat:backdrop, .selection-mode windowcontrols button:backdrop, .sidebar-pane .top-bar popover.background button.suggested-action.flat:disabled, .content-pane .top-bar popover.background button.suggested-action.flat:disabled, .selection-mode windowcontrols button:disabled, .sidebar-pane .top-bar popover.background button.suggested-action.flat:backdrop:disabled, .content-pane .top-bar popover.background button.suggested-action.flat:backdrop:disabled, .selection-mode windowcontrols button:backdrop:disabled, button.suggested-action.flat:backdrop, button.suggested-action.flat:disabled, button.suggested-action.flat:backdrop:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: rgba(136, 192, 208, 0.8); } .sidebar-pane .top-bar popover.background button.suggested-action:disabled, .content-pane .top-bar popover.background button.suggested-action:disabled, button.suggested-action:disabled { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #88c0d0; text-shadow: none; opacity: 0.75; } .sidebar-pane .top-bar popover.background button.suggested-action:disabled:active, .content-pane .top-bar popover.background button.suggested-action:disabled:active, .sidebar-pane .top-bar popover.background button.suggested-action:disabled:checked, .content-pane .top-bar popover.background button.suggested-action:disabled:checked, button.suggested-action:disabled:active, button.suggested-action:disabled:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(255, 255, 255, 0.3); background-color: #88c0d0; text-shadow: none; } .sidebar-pane .top-bar popover.background button.suggested-action:disabled:active label, .content-pane .top-bar popover.background button.suggested-action:disabled:active label, .sidebar-pane .top-bar popover.background button.suggested-action:disabled:checked label, .content-pane .top-bar popover.background button.suggested-action:disabled:checked label, button.suggested-action:disabled:active label, button.suggested-action:disabled:checked label { color: rgba(254, 254, 254, 0.7); } .osd .sidebar-pane .top-bar popover.background button.suggested-action, .sidebar-pane .top-bar popover.background .osd button.suggested-action, .osd .content-pane .top-bar popover.background button.suggested-action, .content-pane .top-bar popover.background .osd button.suggested-action, .osd button.suggested-action { color: #d8dee9; border-color: #1f232b; background-color: rgba(136, 192, 208, 0.5); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } .osd .sidebar-pane .top-bar popover.background button.suggested-action:hover, .sidebar-pane .top-bar popover.background .osd button.suggested-action:hover, .osd .content-pane .top-bar popover.background button.suggested-action:hover, .content-pane .top-bar popover.background .osd button.suggested-action:hover, .osd button.suggested-action:hover { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(136, 192, 208, 0.7), rgba(136, 192, 208, 0.7)); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } .osd .sidebar-pane .top-bar popover.background button.suggested-action:active:backdrop, .sidebar-pane .top-bar popover.background .osd button.suggested-action:active:backdrop, .osd .content-pane .top-bar popover.background button.suggested-action:active:backdrop, .content-pane .top-bar popover.background .osd button.suggested-action:active:backdrop, .osd .sidebar-pane .top-bar popover.background button.suggested-action:active, .sidebar-pane .top-bar popover.background .osd button.suggested-action:active, .osd .content-pane .top-bar popover.background button.suggested-action:active, .content-pane .top-bar popover.background .osd button.suggested-action:active, .osd .sidebar-pane .top-bar popover.background button.suggested-action:checked:backdrop, .sidebar-pane .top-bar popover.background .osd button.suggested-action:checked:backdrop, .osd .content-pane .top-bar popover.background button.suggested-action:checked:backdrop, .content-pane .top-bar popover.background .osd button.suggested-action:checked:backdrop, .osd .sidebar-pane .top-bar popover.background button.suggested-action:checked, .sidebar-pane .top-bar popover.background .osd button.suggested-action:checked, .osd .content-pane .top-bar popover.background button.suggested-action:checked, .content-pane .top-bar popover.background .osd button.suggested-action:checked, .osd button.suggested-action:active:backdrop, .osd button.suggested-action:active, .osd button.suggested-action:checked:backdrop, .osd button.suggested-action:checked { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, #88c0d0, #88c0d0); background-clip: padding-box; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(216, 222, 233, 0.3); } .osd .sidebar-pane .top-bar popover.background button.suggested-action:disabled:backdrop, .sidebar-pane .top-bar popover.background .osd button.suggested-action:disabled:backdrop, .osd .content-pane .top-bar popover.background button.suggested-action:disabled:backdrop, .content-pane .top-bar popover.background .osd button.suggested-action:disabled:backdrop, .osd .sidebar-pane .top-bar popover.background button.suggested-action:disabled, .sidebar-pane .top-bar popover.background .osd button.suggested-action:disabled, .osd .content-pane .top-bar popover.background button.suggested-action:disabled, .content-pane .top-bar popover.background .osd button.suggested-action:disabled, .osd button.suggested-action:disabled:backdrop, .osd button.suggested-action:disabled { color: #808690; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(58, 63, 73, 0.5), rgba(58, 63, 73, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } .osd .sidebar-pane .top-bar popover.background button.suggested-action:backdrop, .sidebar-pane .top-bar popover.background .osd button.suggested-action:backdrop, .osd .content-pane .top-bar popover.background button.suggested-action:backdrop, .content-pane .top-bar popover.background .osd button.suggested-action:backdrop, .osd button.suggested-action:backdrop { color: #d8dee9; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(136, 192, 208, 0.5), rgba(136, 192, 208, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } .sidebar-pane .top-bar popover.background button.destructive-action, .content-pane .top-bar popover.background button.destructive-action, button.destructive-action { border: none; box-shadow: none; color: #fff; border-radius: 6px; background: linear-gradient(to right, #bf616a, #bf616a); } .sidebar-pane .top-bar popover.background button.destructive-action label, .content-pane .top-bar popover.background button.destructive-action label, button.destructive-action label { color: #fff; } .sidebar-pane .top-bar popover.background button.destructive-action.flat, .content-pane .top-bar popover.background button.destructive-action.flat, button.destructive-action.flat { box-shadow: none; color: #fff; border-radius: 6px; background: linear-gradient(to right, #88c0d0 0%, #88c0d0 100%); } .sidebar-pane .top-bar popover.background button.destructive-action.flat label, .content-pane .top-bar popover.background button.destructive-action.flat label, button.destructive-action.flat label { color: #fff; } .sidebar-pane .top-bar popover.background button.destructive-action:hover, .content-pane .top-bar popover.background button.destructive-action:hover, button.destructive-action:hover { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #a9444e; text-shadow: none; opacity: 0.85; } .sidebar-pane .top-bar popover.background button.destructive-action:active, .content-pane .top-bar popover.background button.destructive-action:active, .sidebar-pane .top-bar popover.background button.destructive-action:checked, .content-pane .top-bar popover.background button.destructive-action:checked, button.destructive-action:active, button.destructive-action:checked { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #a9444e; text-shadow: none; } .sidebar-pane .top-bar popover.background button.destructive-action:backdrop, .content-pane .top-bar popover.background button.destructive-action:backdrop, .sidebar-pane .top-bar popover.background button.destructive-action.flat:backdrop, .content-pane .top-bar popover.background button.destructive-action.flat:backdrop, button.destructive-action:backdrop, button.destructive-action.flat:backdrop { color: rgba(255, 255, 255, 0.4); outline-color: rgba(255, 255, 255, 0.3); background-color: #a9444e; text-shadow: none; } .sidebar-pane .top-bar popover.background button.destructive-action:backdrop label, .content-pane .top-bar popover.background button.destructive-action:backdrop label, .sidebar-pane .top-bar popover.background button.destructive-action.flat:backdrop label, .content-pane .top-bar popover.background button.destructive-action.flat:backdrop label, button.destructive-action:backdrop label, button.destructive-action.flat:backdrop label { color: rgba(255, 255, 255, 0.5); } .sidebar-pane .top-bar popover.background button.destructive-action:backdrop:active, .content-pane .top-bar popover.background button.destructive-action:backdrop:active, .sidebar-pane .top-bar popover.background button.destructive-action:backdrop:checked, .content-pane .top-bar popover.background button.destructive-action:backdrop:checked, .sidebar-pane .top-bar popover.background button.destructive-action.flat:backdrop:active, .content-pane .top-bar popover.background button.destructive-action.flat:backdrop:active, .sidebar-pane .top-bar popover.background button.destructive-action.flat:backdrop:checked, .content-pane .top-bar popover.background button.destructive-action.flat:backdrop:checked, button.destructive-action:backdrop:active, button.destructive-action:backdrop:checked, button.destructive-action.flat:backdrop:active, button.destructive-action.flat:backdrop:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(255, 255, 255, 0.3); background-color: #81a1c1; text-shadow: none; } .sidebar-pane .top-bar popover.background button.destructive-action:backdrop:active label, .content-pane .top-bar popover.background button.destructive-action:backdrop:active label, .sidebar-pane .top-bar popover.background button.destructive-action:backdrop:checked label, .content-pane .top-bar popover.background button.destructive-action:backdrop:checked label, .sidebar-pane .top-bar popover.background button.destructive-action.flat:backdrop:active label, .content-pane .top-bar popover.background button.destructive-action.flat:backdrop:active label, .sidebar-pane .top-bar popover.background button.destructive-action.flat:backdrop:checked label, .content-pane .top-bar popover.background button.destructive-action.flat:backdrop:checked label, button.destructive-action:backdrop:active label, button.destructive-action:backdrop:checked label, button.destructive-action.flat:backdrop:active label, button.destructive-action.flat:backdrop:checked label { color: rgba(254, 254, 254, 0.7); } .sidebar-pane .top-bar popover.background button.destructive-action:backdrop:disabled, .content-pane .top-bar popover.background button.destructive-action:backdrop:disabled, .sidebar-pane .top-bar popover.background button.destructive-action.flat:backdrop:disabled, .content-pane .top-bar popover.background button.destructive-action.flat:backdrop:disabled, button.destructive-action:backdrop:disabled, button.destructive-action.flat:backdrop:disabled { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #a9444e; text-shadow: none; } .sidebar-pane .top-bar popover.background button.destructive-action:backdrop:disabled label, .content-pane .top-bar popover.background button.destructive-action:backdrop:disabled label, .sidebar-pane .top-bar popover.background button.destructive-action.flat:backdrop:disabled label, .content-pane .top-bar popover.background button.destructive-action.flat:backdrop:disabled label, button.destructive-action:backdrop:disabled label, button.destructive-action.flat:backdrop:disabled label { color: rgba(255, 255, 255, 0.5); } .sidebar-pane .top-bar popover.background button.destructive-action:backdrop:disabled:active, .content-pane .top-bar popover.background button.destructive-action:backdrop:disabled:active, .sidebar-pane .top-bar popover.background button.destructive-action:backdrop:disabled:checked, .content-pane .top-bar popover.background button.destructive-action:backdrop:disabled:checked, .sidebar-pane .top-bar popover.background button.destructive-action.flat:backdrop:disabled:active, .content-pane .top-bar popover.background button.destructive-action.flat:backdrop:disabled:active, .sidebar-pane .top-bar popover.background button.destructive-action.flat:backdrop:disabled:checked, .content-pane .top-bar popover.background button.destructive-action.flat:backdrop:disabled:checked, button.destructive-action:backdrop:disabled:active, button.destructive-action:backdrop:disabled:checked, button.destructive-action.flat:backdrop:disabled:active, button.destructive-action.flat:backdrop:disabled:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(255, 255, 255, 0.3); background-color: #81a1c1; text-shadow: none; } .sidebar-pane .top-bar popover.background button.destructive-action.flat:backdrop, .content-pane .top-bar popover.background button.destructive-action.flat:backdrop, .sidebar-pane .top-bar popover.background button.destructive-action.flat:disabled, .content-pane .top-bar popover.background button.destructive-action.flat:disabled, .sidebar-pane .top-bar popover.background button.destructive-action.flat:backdrop:disabled, .content-pane .top-bar popover.background button.destructive-action.flat:backdrop:disabled, button.destructive-action.flat:backdrop, button.destructive-action.flat:disabled, button.destructive-action.flat:backdrop:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: rgba(169, 68, 78, 0.8); } .sidebar-pane .top-bar popover.background button.destructive-action:disabled, .content-pane .top-bar popover.background button.destructive-action:disabled, button.destructive-action:disabled { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #a9444e; text-shadow: none; opacity: 0.75; } .sidebar-pane .top-bar popover.background button.destructive-action:disabled:active, .content-pane .top-bar popover.background button.destructive-action:disabled:active, .sidebar-pane .top-bar popover.background button.destructive-action:disabled:checked, .content-pane .top-bar popover.background button.destructive-action:disabled:checked, button.destructive-action:disabled:active, button.destructive-action:disabled:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(255, 255, 255, 0.3); background-color: #a9444e; text-shadow: none; } .sidebar-pane .top-bar popover.background button.destructive-action:disabled:active label, .content-pane .top-bar popover.background button.destructive-action:disabled:active label, .sidebar-pane .top-bar popover.background button.destructive-action:disabled:checked label, .content-pane .top-bar popover.background button.destructive-action:disabled:checked label, button.destructive-action:disabled:active label, button.destructive-action:disabled:checked label { color: rgba(254, 254, 254, 0.7); } .osd .sidebar-pane .top-bar popover.background button.destructive-action, .sidebar-pane .top-bar popover.background .osd button.destructive-action, .osd .content-pane .top-bar popover.background button.destructive-action, .content-pane .top-bar popover.background .osd button.destructive-action, .osd button.destructive-action { color: #d8dee9; border-color: #1f232b; background-color: rgba(169, 68, 78, 0.5); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } .osd .sidebar-pane .top-bar popover.background button.destructive-action:hover, .sidebar-pane .top-bar popover.background .osd button.destructive-action:hover, .osd .content-pane .top-bar popover.background button.destructive-action:hover, .content-pane .top-bar popover.background .osd button.destructive-action:hover, .osd button.destructive-action:hover { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(169, 68, 78, 0.7), rgba(169, 68, 78, 0.7)); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } .osd .sidebar-pane .top-bar popover.background button.destructive-action:active:backdrop, .sidebar-pane .top-bar popover.background .osd button.destructive-action:active:backdrop, .osd .content-pane .top-bar popover.background button.destructive-action:active:backdrop, .content-pane .top-bar popover.background .osd button.destructive-action:active:backdrop, .osd .sidebar-pane .top-bar popover.background button.destructive-action:active, .sidebar-pane .top-bar popover.background .osd button.destructive-action:active, .osd .content-pane .top-bar popover.background button.destructive-action:active, .content-pane .top-bar popover.background .osd button.destructive-action:active, .osd .sidebar-pane .top-bar popover.background button.destructive-action:checked:backdrop, .sidebar-pane .top-bar popover.background .osd button.destructive-action:checked:backdrop, .osd .content-pane .top-bar popover.background button.destructive-action:checked:backdrop, .content-pane .top-bar popover.background .osd button.destructive-action:checked:backdrop, .osd .sidebar-pane .top-bar popover.background button.destructive-action:checked, .sidebar-pane .top-bar popover.background .osd button.destructive-action:checked, .osd .content-pane .top-bar popover.background button.destructive-action:checked, .content-pane .top-bar popover.background .osd button.destructive-action:checked, .osd button.destructive-action:active:backdrop, .osd button.destructive-action:active, .osd button.destructive-action:checked:backdrop, .osd button.destructive-action:checked { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, #a9444e, #a9444e); background-clip: padding-box; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(216, 222, 233, 0.3); } .osd .sidebar-pane .top-bar popover.background button.destructive-action:disabled:backdrop, .sidebar-pane .top-bar popover.background .osd button.destructive-action:disabled:backdrop, .osd .content-pane .top-bar popover.background button.destructive-action:disabled:backdrop, .content-pane .top-bar popover.background .osd button.destructive-action:disabled:backdrop, .osd .sidebar-pane .top-bar popover.background button.destructive-action:disabled, .sidebar-pane .top-bar popover.background .osd button.destructive-action:disabled, .osd .content-pane .top-bar popover.background button.destructive-action:disabled, .content-pane .top-bar popover.background .osd button.destructive-action:disabled, .osd button.destructive-action:disabled:backdrop, .osd button.destructive-action:disabled { color: #808690; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(58, 63, 73, 0.5), rgba(58, 63, 73, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } .osd .sidebar-pane .top-bar popover.background button.destructive-action:backdrop, .sidebar-pane .top-bar popover.background .osd button.destructive-action:backdrop, .osd .content-pane .top-bar popover.background button.destructive-action:backdrop, .content-pane .top-bar popover.background .osd button.destructive-action:backdrop, .osd button.destructive-action:backdrop { color: #d8dee9; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(169, 68, 78, 0.5), rgba(169, 68, 78, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } .sidebar-pane .top-bar popover.background .stack-switcher > button, .content-pane .top-bar popover.background .stack-switcher > button, .stack-switcher > button { outline-offset: -3px; } .sidebar-pane .top-bar popover.background .stack-switcher > button > label, .content-pane .top-bar popover.background .stack-switcher > button > label, .stack-switcher > button > label { padding-left: 6px; padding-right: 6px; } .sidebar-pane .top-bar popover.background .stack-switcher > button > image, .content-pane .top-bar popover.background .stack-switcher > button > image, .stack-switcher > button > image { padding-left: 6px; padding-right: 6px; padding-top: 3px; padding-bottom: 3px; } .sidebar-pane .top-bar popover.background .stack-switcher > button.text-button, .content-pane .top-bar popover.background .stack-switcher > button.text-button, .stack-switcher > button.text-button { padding-left: 10px; padding-right: 10px; } .sidebar-pane .top-bar popover.background .stack-switcher > button.image-button, .content-pane .top-bar popover.background .stack-switcher > button.image-button, .stack-switcher > button.image-button { padding-left: 2px; padding-right: 2px; } .sidebar-pane .top-bar popover.background .stack-switcher > button.needs-attention:active > label, .content-pane .top-bar popover.background .stack-switcher > button.needs-attention:active > label, .sidebar-pane .top-bar popover.background .stack-switcher > button.needs-attention:active > image, .content-pane .top-bar popover.background .stack-switcher > button.needs-attention:active > image, .sidebar-pane .top-bar popover.background .stack-switcher > button.needs-attention:checked > label, .content-pane .top-bar popover.background .stack-switcher > button.needs-attention:checked > label, .sidebar-pane .top-bar popover.background .stack-switcher > button.needs-attention:checked > image, .content-pane .top-bar popover.background .stack-switcher > button.needs-attention:checked > image, .stack-switcher > button.needs-attention:active > label, .stack-switcher > button.needs-attention:active > image, .stack-switcher > button.needs-attention:checked > label, .stack-switcher > button.needs-attention:checked > image { animation: none; background-image: none; } .inline-toolbar .sidebar-pane .top-bar popover.background button, .sidebar-pane .top-bar popover.background .inline-toolbar button, .inline-toolbar .content-pane .top-bar popover.background button, .content-pane .top-bar popover.background .inline-toolbar button, .inline-toolbar .sidebar-pane .top-bar popover.background button:backdrop, .sidebar-pane .top-bar popover.background .inline-toolbar button:backdrop, .inline-toolbar .content-pane .top-bar popover.background button:backdrop, .content-pane .top-bar popover.background .inline-toolbar button:backdrop, .inline-toolbar button, .inline-toolbar button:backdrop { border-radius: 6px; border-width: 1px; } .primary-toolbar .sidebar-pane .top-bar popover.background button, .sidebar-pane .top-bar popover.background .primary-toolbar button, .primary-toolbar .content-pane .top-bar popover.background button, .content-pane .top-bar popover.background .primary-toolbar button, .primary-toolbar .raised .sidebar-pane .top-bar popover.background button, .sidebar-pane .top-bar popover.background .primary-toolbar .raised button, .primary-toolbar .raised .content-pane .top-bar popover.background button, .content-pane .top-bar popover.background .primary-toolbar .raised button, .primary-toolbar button, .primary-toolbar .raised button { -gtk-icon-shadow: none; } .primary-toolbar .sidebar-pane .top-bar popover.background button:hover, .sidebar-pane .top-bar popover.background .primary-toolbar button:hover, .primary-toolbar .content-pane .top-bar popover.background button:hover, .content-pane .top-bar popover.background .primary-toolbar button:hover, .primary-toolbar .sidebar-pane .top-bar popover.background button:focus, .sidebar-pane .top-bar popover.background .primary-toolbar button:focus, .primary-toolbar .content-pane .top-bar popover.background button:focus, .content-pane .top-bar popover.background .primary-toolbar button:focus, .primary-toolbar .raised .sidebar-pane .top-bar popover.background button:hover, .sidebar-pane .top-bar popover.background .primary-toolbar .raised button:hover, .primary-toolbar .raised .content-pane .top-bar popover.background button:hover, .content-pane .top-bar popover.background .primary-toolbar .raised button:hover, .primary-toolbar .raised .sidebar-pane .top-bar popover.background button:focus, .sidebar-pane .top-bar popover.background .primary-toolbar .raised button:focus, .primary-toolbar .raised .content-pane .top-bar popover.background button:focus, .content-pane .top-bar popover.background .primary-toolbar .raised button:focus, .primary-toolbar button:hover, .primary-toolbar button:focus, .primary-toolbar .raised button:hover, .primary-toolbar .raised button:focus { color: #fefefe; outline-color: rgba(254, 254, 254, 0.3); background-color: #81a1c1; text-shadow: none; } .sidebar-pane .top-bar popover.background .stack-switcher > button.needs-attention > label, .content-pane .top-bar popover.background .stack-switcher > button.needs-attention > label, .sidebar-pane .top-bar popover.background .stack-switcher > button.needs-attention > image, .content-pane .top-bar popover.background .stack-switcher > button.needs-attention > image, .stack-switcher > button.needs-attention > label, .stack-switcher > button.needs-attention > image, stacksidebar row.needs-attention > label { animation: needs_attention 150ms ease-in; background-image: radial-gradient(farthest-side, #b4c7da 96%, rgba(180, 199, 218, 0)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 2px; } .stack-switcher > button.needs-attention > label:backdrop, .stack-switcher > button.needs-attention > image:backdrop, stacksidebar row.needs-attention > label:backdrop { background-size: 6px 6px, 0 0; } .stack-switcher > button.needs-attention > label:dir(rtl), .stack-switcher > button.needs-attention > image:dir(rtl), stacksidebar row.needs-attention > label:dir(rtl) { background-position: left 3px, left 2px; } /* oldstyle toolbar buttons */ .toolbar > button, .toolbar > :not(.linked) > button, .toolbar :not(.linked) > menubutton > button, .toolbar :not(.linked) > scalebutton > button, .toolbar :not(.linked) > dropdown > button, .toolbar :not(.linked) > colorbutton > button, .toolbar :not(.linked) > fontbutton > button, .toolbar :not(.linked) > appchooserbutton > button, .toolbar :not(.linked) > combobox > box > button { margin: 1px; border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } .toolbar > button:hover, .toolbar > button:active, .toolbar > button:checked, .toolbar > :not(.linked) > button:hover, .toolbar > :not(.linked) > button:active, .toolbar > :not(.linked) > button:checked, .toolbar :not(.linked) > menubutton > button:hover, .toolbar :not(.linked) > menubutton > button:active, .toolbar :not(.linked) > menubutton > button:checked, .toolbar :not(.linked) > scalebutton > button:hover, .toolbar :not(.linked) > scalebutton > button:active, .toolbar :not(.linked) > scalebutton > button:checked, .toolbar :not(.linked) > dropdown > button:hover, .toolbar :not(.linked) > dropdown > button:active, .toolbar :not(.linked) > dropdown > button:checked, .toolbar :not(.linked) > colorbutton > button:hover, .toolbar :not(.linked) > colorbutton > button:active, .toolbar :not(.linked) > colorbutton > button:checked, .toolbar :not(.linked) > fontbutton > button:hover, .toolbar :not(.linked) > fontbutton > button:active, .toolbar :not(.linked) > fontbutton > button:checked, .toolbar :not(.linked) > appchooserbutton > button:hover, .toolbar :not(.linked) > appchooserbutton > button:active, .toolbar :not(.linked) > appchooserbutton > button:checked, .toolbar :not(.linked) > combobox > box > button:hover, .toolbar :not(.linked) > combobox > box > button:active, .toolbar :not(.linked) > combobox > box > button:checked { color: #d8dee9; outline-color: rgba(216, 222, 233, 0.3); background-color: #2e3440; text-shadow: none; } .toolbar > button:disabled, .toolbar > :not(.linked) > button:disabled, .toolbar :not(.linked) > menubutton > button:disabled, .toolbar :not(.linked) > scalebutton > button:disabled, .toolbar :not(.linked) > dropdown > button:disabled, .toolbar :not(.linked) > colorbutton > button:disabled, .toolbar :not(.linked) > fontbutton > button:disabled, .toolbar :not(.linked) > appchooserbutton > button:disabled, .toolbar :not(.linked) > combobox > box > button:disabled { opacity: 0.5; } .inline-toolbar .sidebar-pane .top-bar popover.background button, .sidebar-pane .top-bar popover.background .inline-toolbar button, .inline-toolbar .content-pane .top-bar popover.background button, .content-pane .top-bar popover.background .inline-toolbar button, .inline-toolbar button, .inline-toolbar button:backdrop, .sidebar-pane .top-bar popover.background .linked > button, .content-pane .top-bar popover.background .linked > button, .linked > button, .linked > button:hover, .linked > button:active, .linked > button:checked, .linked > button:backdrop, .linked:not(.vertical) > spinbutton:not(.vertical), spinbutton.vertical.linked:not(.vertical) > text, .linked:not(.vertical) > entry, .linked > combobox > box > button.combo:dir(ltr), .linked > combobox > box > button.combo:dir(rtl) { border: 1px solid #262a34; border-radius: 0; border-right-style: none; box-shadow: none; } .inline-toolbar .sidebar-pane .top-bar popover.background button:disabled, .sidebar-pane .top-bar popover.background .inline-toolbar button:disabled, .inline-toolbar .content-pane .top-bar popover.background button:disabled, .content-pane .top-bar popover.background .inline-toolbar button:disabled, .inline-toolbar button:disabled, .sidebar-pane .top-bar popover.background .linked > button:disabled, .content-pane .top-bar popover.background .linked > button:disabled, .linked > button:disabled, .linked:not(.vertical) > spinbutton:disabled:not(.vertical), spinbutton.vertical.linked:not(.vertical) > text:disabled, .linked:not(.vertical) > entry:disabled, .linked > combobox > box > button.combo:disabled:dir(ltr), .linked > combobox > box > button.combo:disabled:dir(rtl) { color: #b9bfcb; outline-color: rgba(216, 222, 233, 0.3); background-color: #404859; text-shadow: none; color: #8e95a4; } .inline-toolbar .sidebar-pane .top-bar popover.background button:first-child, .sidebar-pane .top-bar popover.background .inline-toolbar button:first-child, .inline-toolbar .content-pane .top-bar popover.background button:first-child, .content-pane .top-bar popover.background .inline-toolbar button:first-child, .inline-toolbar button:first-child, .sidebar-pane .top-bar popover.background .linked > button:first-child, .content-pane .top-bar popover.background .linked > button:first-child, .linked > button:first-child, combobox.linked button:nth-child(2):dir(rtl), .linked:not(.vertical) > combobox:first-child > box > button.combo, .linked:not(.vertical) > spinbutton:first-child:not(.vertical), spinbutton.vertical.linked:not(.vertical) > text:first-child, .linked:not(.vertical) > entry:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .inline-toolbar .sidebar-pane .top-bar popover.background button:last-child, .sidebar-pane .top-bar popover.background .inline-toolbar button:last-child, .inline-toolbar .content-pane .top-bar popover.background button:last-child, .content-pane .top-bar popover.background .inline-toolbar button:last-child, .inline-toolbar button:last-child, .sidebar-pane .top-bar popover.background .linked > button:last-child, .content-pane .top-bar popover.background .linked > button:last-child, .linked > button:last-child, combobox.linked button:nth-child(2):dir(ltr), .linked:not(.vertical) > combobox:last-child > box > button.combo, .linked:not(.vertical) > spinbutton:last-child:not(.vertical), spinbutton.vertical.linked:not(.vertical) > text:last-child, .linked:not(.vertical) > entry:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; border-right-style: solid; } .inline-toolbar .sidebar-pane .top-bar popover.background button:only-child, .sidebar-pane .top-bar popover.background .inline-toolbar button:only-child, .inline-toolbar .content-pane .top-bar popover.background button:only-child, .content-pane .top-bar popover.background .inline-toolbar button:only-child, .inline-toolbar button:only-child, .sidebar-pane .top-bar popover.background .linked > button:only-child, .content-pane .top-bar popover.background .linked > button:only-child, .linked > button:only-child, .linked:not(.vertical) > combobox:only-child > box > button.combo, .linked:not(.vertical) > spinbutton:only-child:not(.vertical), spinbutton.vertical.linked:not(.vertical) > text:only-child, .linked:not(.vertical) > entry:only-child { border-radius: 6px; border-style: solid; } .sidebar-pane .top-bar popover.background .linked.vertical > button, .content-pane .top-bar popover.background .linked.vertical > button, .linked.vertical > button, .linked.vertical > button:hover, .linked.vertical > button:active, .linked.vertical > button:checked, .linked.vertical > button:backdrop, .linked.vertical > spinbutton:not(.vertical), spinbutton.vertical.linked > text, .linked.vertical > entry, .linked.vertical > combobox > box > button.combo { border-style: solid solid none solid; border-radius: 0; } .sidebar-pane .top-bar popover.background .linked.vertical > button:first-child, .content-pane .top-bar popover.background .linked.vertical > button:first-child, .linked.vertical > button:first-child, .linked.vertical > combobox:first-child > box > button.combo, .linked.vertical > spinbutton:first-child:not(.vertical), spinbutton.vertical.linked > text:first-child, .linked.vertical > entry:first-child { border-top-left-radius: 6px; border-top-right-radius: 6px; } .sidebar-pane .top-bar popover.background .linked.vertical > button:last-child, .content-pane .top-bar popover.background .linked.vertical > button:last-child, .linked.vertical > button:last-child, .linked.vertical > combobox:last-child > box > button.combo, .linked.vertical > spinbutton:last-child:not(.vertical), spinbutton.vertical.linked > text:last-child, .linked.vertical > entry:last-child { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-style: solid; } .sidebar-pane .top-bar popover.background .linked.vertical > button:only-child, .content-pane .top-bar popover.background .linked.vertical > button:only-child, .linked.vertical > button:only-child, .linked.vertical > combobox:only-child > box > button.combo, .linked.vertical > spinbutton:only-child:not(.vertical), spinbutton.vertical.linked > text:only-child, .linked.vertical > entry:only-child { border-radius: 6px; border-style: solid; } modelbutton.flat, .menuitem.button.flat, modelbutton.flat:backdrop, modelbutton.flat:backdrop:hover, .menuitem.button.flat:backdrop, .menuitem.button.flat:backdrop:hover, button:link, button:visited, button:link:hover, button:link:active, button:link:checked, button:visited:hover, button:visited:active, button:visited:checked, .scale-popup button:hover, .scale-popup button:backdrop:hover, .scale-popup button:backdrop:disabled, .scale-popup button:backdrop { background-color: transparent; background-image: none; border-color: transparent; box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } /* menu buttons */ modelbutton.flat, .menuitem.button.flat { min-height: 26px; padding-left: 5px; padding-right: 5px; border-radius: 6px; outline-offset: -2px; } modelbutton.flat:hover, .menuitem.button.flat:hover { background-color: #3f4758; } modelbutton.flat check:last-child, modelbutton.flat radio:last-child, .menuitem.button.flat check:last-child, .menuitem.button.flat radio:last-child { margin-left: 8px; } modelbutton.flat check:first-child, modelbutton.flat radio:first-child, .menuitem.button.flat check:first-child, .menuitem.button.flat radio:first-child { margin-right: 8px; } modelbutton.flat arrow { background: none; } modelbutton.flat arrow:hover { background: none; } modelbutton.flat arrow.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } modelbutton.flat arrow.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } button.color { padding: 4px; } button.color colorswatch:only-child, button.color colorswatch:only-child overlay { border-radius: 0; } notebook button, list button, .view button, iconview button, popover button { box-shadow: none; } notebook button:backdrop, list button:backdrop, .view button:backdrop, iconview button:backdrop, popover button:backdrop { box-shadow: none; } notebook .linked > button, list .linked > button, .view .linked > button, iconview .linked > button, popover .linked > button { box-shadow: none; } toggle-group { padding: 3px; } toggle-group toggle { padding: 0 4px; } toggle-group toggle:checked { background-color: #81a1c1; } toggle-group toggle:checked, toggle-group toggle:checked label { color: #fefefe; } /* * Gnome 48 accent color buttons * Gnome papers - buttons in context menu */ button.accent-button, button.accent-button:backdrop, button.color-button, button.color-button:backdrop { min-height: 24px; min-width: 24px; padding: 3px; border-radius: 100%; background: var(--accent-bg-color); outline: none; background-clip: content-box; box-shadow: none; border: none; } button.accent-button:hover, button.color-button:hover { box-shadow: 0 0 0 3px #303643; background-color: var(--accent-bg-color); } button.accent-button:checked, button.accent-button:checked:backdrop, button.color-button:checked, button.color-button:checked:backdrop { box-shadow: 0 0 0 3px var(--accent-bg-color); background-color: var(--accent-bg-color); } /************ * Calendar * ***********/ calendar { color: #d8dee9; border: 1px solid #262a34; font-feature-settings: "tnum"; } calendar > header { border-bottom: 1px solid #262a34; } calendar > header > button { border: none; box-shadow: none; background: none; border-radius: 0; } calendar > header > button:backdrop { background: none; } calendar > grid > label.today { box-shadow: inset 0px -2px #81a1c1; } calendar > grid > label.today:selected { box-shadow: none; } calendar > grid > label:focus { outline-color: #81a1c1; outline-offset: -2px; outline-width: 2px; outline-style: solid; } calendar > grid > label.day-number { padding: 4px; } calendar > grid > label.day-number:selected { border-radius: 3px; } calendar > grid > label.day-number:checked { background-color: alpha(#81a1c1,0.3); } calendar > grid > label.day-number.other-month { color: alpha(currentColor,0.3); } /************************* * Check and Radio Items * *************************/ check { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-dark.png"), url("../assets/checkbox-unchecked@2.png")); -gtk-icon-shadow: none; } radio { -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked-dark.png"), url("../assets/radio-unchecked@2.png")); -gtk-icon-shadow: none; } check:hover { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-hover-dark.png"), url("../assets/checkbox-unchecked-hover@2.png")); -gtk-icon-shadow: none; } radio:hover { -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked-hover-dark.png"), url("../assets/radio-unchecked-hover@2.png")); -gtk-icon-shadow: none; } check:active { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-active-dark.png"), url("../assets/checkbox-unchecked-active@2.png")); -gtk-icon-shadow: none; } radio:active { -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked-active-dark.png"), url("../assets/radio-unchecked-active@2.png")); -gtk-icon-shadow: none; } check:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-backdrop-dark.png"), url("../assets/checkbox-unchecked-backdrop@2.png")); -gtk-icon-shadow: none; } radio:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked-backdrop-dark.png"), url("../assets/radio-unchecked-backdrop@2.png")); -gtk-icon-shadow: none; } check:disabled { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-insensitive-dark.png"), url("../assets/checkbox-unchecked-insensitive@2.png")); -gtk-icon-shadow: none; } radio:disabled { -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked-insensitive-dark.png"), url("../assets/radio-unchecked-insensitive@2.png")); -gtk-icon-shadow: none; } check:disabled:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-insensitive-dark.png"), url("../assets/checkbox-unchecked-insensitive@2.png")); -gtk-icon-shadow: none; } radio:disabled:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked-insensitive-dark.png"), url("../assets/radio-unchecked-insensitive@2.png")); -gtk-icon-shadow: none; } check:checked { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-dark.png"), url("../assets/checkbox-checked@2.png")); -gtk-icon-shadow: none; } radio:checked { -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-dark.png"), url("../assets/radio-checked@2.png")); -gtk-icon-shadow: none; background: none; } check:checked:hover { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-hover-dark.png"), url("../assets/checkbox-checked-hover@2.png")); -gtk-icon-shadow: none; } radio:checked:hover { -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-hover-dark.png"), url("../assets/radio-checked-hover@2.png")); -gtk-icon-shadow: none; background: none; } check:checked:active { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-active-dark.png"), url("../assets/checkbox-checked-active@2.png")); -gtk-icon-shadow: none; } radio:checked:active { -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-active-dark.png"), url("../assets/radio-checked-active@2.png")); -gtk-icon-shadow: none; background: none; } check:checked:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-backdrop-dark.png"), url("../assets/checkbox-checked-backdrop@2.png")); -gtk-icon-shadow: none; } radio:checked:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-backdrop-dark.png"), url("../assets/radio-checked-backdrop@2.png")); -gtk-icon-shadow: none; background: none; } check:checked:disabled { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-insensitive-dark.png"), url("../assets/checkbox-checked-insensitive@2.png")); -gtk-icon-shadow: none; } radio:checked:disabled { -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-insensitive-dark.png"), url("../assets/radio-checked-insensitive@2.png")); -gtk-icon-shadow: none; background: none; } check:checked:disabled:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-insensitive-dark.png"), url("../assets/checkbox-checked-insensitive@2.png")); -gtk-icon-shadow: none; } radio:checked:disabled:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-insensitive-dark.png"), url("../assets/radio-checked-insensitive@2.png")); -gtk-icon-shadow: none; background: none; } check:indeterminate { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-mixed.png"), url("../assets/checkbox-mixed@2.png")); -gtk-icon-shadow: none; } radio:indeterminate { -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed.png"), url("../assets/radio-mixed@2.png")); -gtk-icon-shadow: none; } check:indeterminate:hover { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-mixed-hover.png"), url("../assets/checkbox-mixed-hover@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:hover { -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed-hover.png"), url("../assets/radio-mixed-hover@2.png")); -gtk-icon-shadow: none; } check:indeterminate:active { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-mixed-active.png"), url("../assets/checkbox-mixed-active@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:active { -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed-active.png"), url("../assets/radio-mixed-active@2.png")); -gtk-icon-shadow: none; } check:indeterminate:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-mixed-backdrop.png"), url("../assets/checkbox-mixed-backdrop@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed-backdrop.png"), url("../assets/radio-mixed-backdrop@2.png")); -gtk-icon-shadow: none; } check:indeterminate:disabled { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-mixed-insensitive.png"), url("../assets/checkbox-mixed-insensitive@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:disabled { -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed-insensitive.png"), url("../assets/radio-mixed-insensitive@2.png")); -gtk-icon-shadow: none; } check:indeterminate:disabled:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-mixed-insensitive.png"), url("../assets/checkbox-mixed-insensitive@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:disabled:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed-insensitive.png"), url("../assets/radio-mixed-insensitive@2.png")); -gtk-icon-shadow: none; } check:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-dark.png"), url("../assets/checkbox-unchecked@2.png")); -gtk-icon-shadow: none; } radio:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-unchecked-dark.png"), url("../assets/selected-radio-unchecked@2.png")); -gtk-icon-shadow: none; } check:hover:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-dark.png"), url("../assets/checkbox-unchecked@2.png")); -gtk-icon-shadow: none; } radio:hover:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-unchecked-dark.png"), url("../assets/selected-radio-unchecked@2.png")); -gtk-icon-shadow: none; } check:active:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-dark.png"), url("../assets/checkbox-unchecked@2.png")); -gtk-icon-shadow: none; } radio:active:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-unchecked-dark.png"), url("../assets/selected-radio-unchecked@2.png")); -gtk-icon-shadow: none; } check:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-dark.png"), url("../assets/checkbox-unchecked@2.png")); -gtk-icon-shadow: none; } radio:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-unchecked-dark.png"), url("../assets/selected-radio-unchecked@2.png")); -gtk-icon-shadow: none; } check:disabled:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-dark.png"), url("../assets/checkbox-unchecked@2.png")); -gtk-icon-shadow: none; } radio:disabled:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-unchecked-dark.png"), url("../assets/selected-radio-unchecked@2.png")); -gtk-icon-shadow: none; } check:disabled:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-dark.png"), url("../assets/checkbox-unchecked@2.png")); -gtk-icon-shadow: none; } radio:disabled:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-unchecked-dark.png"), url("../assets/selected-radio-unchecked@2.png")); -gtk-icon-shadow: none; } check:checked:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-dark.png"), url("../assets/checkbox-checked@2.png")); -gtk-icon-shadow: none; } radio:checked:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-checked-dark.png"), url("../assets/selected-radio-checked@2.png")); -gtk-icon-shadow: none; } check:checked:hover:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-dark.png"), url("../assets/checkbox-checked@2.png")); -gtk-icon-shadow: none; } radio:checked:hover:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-checked-dark.png"), url("../assets/selected-radio-checked@2.png")); -gtk-icon-shadow: none; } check:checked:active:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-dark.png"), url("../assets/checkbox-checked@2.png")); -gtk-icon-shadow: none; } radio:checked:active:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-checked-dark.png"), url("../assets/selected-radio-checked@2.png")); -gtk-icon-shadow: none; } check:checked:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-dark.png"), url("../assets/checkbox-checked@2.png")); -gtk-icon-shadow: none; } radio:checked:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-checked-dark.png"), url("../assets/selected-radio-checked@2.png")); -gtk-icon-shadow: none; } check:checked:disabled:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-dark.png"), url("../assets/checkbox-checked@2.png")); -gtk-icon-shadow: none; } radio:checked:disabled:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-checked-dark.png"), url("../assets/selected-radio-checked@2.png")); -gtk-icon-shadow: none; } check:checked:disabled:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-dark.png"), url("../assets/checkbox-checked@2.png")); -gtk-icon-shadow: none; } radio:checked:disabled:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-checked-dark.png"), url("../assets/selected-radio-checked@2.png")); -gtk-icon-shadow: none; } check:indeterminate:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-checkbox-mixed.png"), url("../assets/selected-checkbox-mixed@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-mixed.png"), url("../assets/selected-radio-mixed@2.png")); -gtk-icon-shadow: none; } check:indeterminate:hover:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-checkbox-mixed.png"), url("../assets/selected-checkbox-mixed@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:hover:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-mixed.png"), url("../assets/selected-radio-mixed@2.png")); -gtk-icon-shadow: none; } check:indeterminate:active:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-checkbox-mixed.png"), url("../assets/selected-checkbox-mixed@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:active:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-mixed.png"), url("../assets/selected-radio-mixed@2.png")); -gtk-icon-shadow: none; } check:indeterminate:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-checkbox-mixed.png"), url("../assets/selected-checkbox-mixed@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-mixed.png"), url("../assets/selected-radio-mixed@2.png")); -gtk-icon-shadow: none; } check:indeterminate:disabled:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-checkbox-mixed.png"), url("../assets/selected-checkbox-mixed@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:disabled:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-mixed.png"), url("../assets/selected-radio-mixed@2.png")); -gtk-icon-shadow: none; } check:indeterminate:disabled:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-checkbox-mixed.png"), url("../assets/selected-checkbox-mixed@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:disabled:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-mixed.png"), url("../assets/selected-radio-mixed@2.png")); -gtk-icon-shadow: none; } .view.content-view check, iconview.content-view check, .view.content-view.check, iconview.content-view.check { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox-unchecked.png"), url("../assets/checkbox-unchecked@2.png")); -gtk-icon-shadow: none; } .view.content-view radio, iconview.content-view radio, .view.content-view.radio, iconview.content-view.radio { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio-unchecked.png"), url("../assets/radio-unchecked@2.png")); -gtk-icon-shadow: none; } .view.content-view check:hover, iconview.content-view check:hover, .view.content-view.check:hover, iconview.content-view.check:hover { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox-unchecked-hover.png"), url("../assets/checkbox-unchecked-hover@2.png")); -gtk-icon-shadow: none; } .view.content-view radio:hover, iconview.content-view radio:hover, .view.content-view.radio:hover, iconview.content-view.radio:hover { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio-unchecked-hover.png"), url("../assets/radio-unchecked-hover@2.png")); -gtk-icon-shadow: none; } .view.content-view check:active, iconview.content-view check:active, .view.content-view.check:active, iconview.content-view.check:active { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox-unchecked-active.png"), url("../assets/checkbox-unchecked-active@2.png")); -gtk-icon-shadow: none; } .view.content-view radio:active, iconview.content-view radio:active, .view.content-view.radio:active, iconview.content-view.radio:active { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio-unchecked-active.png"), url("../assets/radio-unchecked-active@2.png")); -gtk-icon-shadow: none; } .view.content-view check:backdrop, iconview.content-view check:backdrop, .view.content-view.check:backdrop, iconview.content-view.check:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox-unchecked-backdrop.png"), url("../assets/checkbox-unchecked-backdrop@2.png")); -gtk-icon-shadow: none; } .view.content-view radio:backdrop, iconview.content-view radio:backdrop, .view.content-view.radio:backdrop, iconview.content-view.radio:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio-unchecked-backdrop.png"), url("../assets/radio-unchecked-backdrop@2.png")); -gtk-icon-shadow: none; } .view.content-view check:disabled, iconview.content-view check:disabled, .view.content-view.check:disabled, iconview.content-view.check:disabled { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox-unchecked-insensitive.png"), url("../assets/checkbox-unchecked-insensitive@2.png")); -gtk-icon-shadow: none; } .view.content-view radio:disabled, iconview.content-view radio:disabled, .view.content-view.radio:disabled, iconview.content-view.radio:disabled { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio-unchecked-insensitive.png"), url("../assets/radio-unchecked-insensitive@2.png")); -gtk-icon-shadow: none; } .view.content-view check:disabled:backdrop, iconview.content-view check:disabled:backdrop, .view.content-view.check:disabled:backdrop, iconview.content-view.check:disabled:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox-unchecked-backdrop-insensitive.png"), url("../assets/checkbox-unchecked-backdrop-insensitive@2.png")); -gtk-icon-shadow: none; } .view.content-view radio:disabled:backdrop, iconview.content-view radio:disabled:backdrop, .view.content-view.radio:disabled:backdrop, iconview.content-view.radio:disabled:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio-unchecked-backdrop-insensitive.png"), url("../assets/radio-unchecked-backdrop-insensitive@2.png")); -gtk-icon-shadow: none; } checkbutton.text-button, radiobutton.text-button { padding: 2px 0; outline-offset: 0; } checkbutton.text-button label:not(:only-child):first-child, radiobutton.text-button label:not(:only-child):first-child { margin-left: 4px; } checkbutton.text-button label:not(:only-child):last-child, radiobutton.text-button label:not(:only-child):last-child { margin-right: 4px; } check, radio { margin: 0 4px; min-height: 16px; min-width: 16px; border: none; } menu menuitem check, menu menuitem radio { margin: 0; } menu menuitem check, menu menuitem check:hover, menu menuitem check:disabled, menu menuitem radio, menu menuitem radio:hover, menu menuitem radio:disabled { min-height: 14px; min-width: 14px; background-image: none; background-color: transparent; box-shadow: none; -gtk-icon-shadow: none; color: inherit; border-color: currentColor; animation: none; } /***************** * Color Chooser * *****************/ colorswatch, colorswatch:drop(active) { border-style: none; } colorswatch.top { border-top-left-radius: 5.5px; border-top-right-radius: 5.5px; } colorswatch.top overlay { border-top-left-radius: 5px; border-top-right-radius: 5px; } colorswatch.bottom { border-bottom-left-radius: 5.5px; border-bottom-right-radius: 5.5px; } colorswatch.bottom overlay { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } colorswatch.left, colorswatch:first-child:not(.top) { border-top-left-radius: 5.5px; border-bottom-left-radius: 5.5px; } colorswatch.left overlay, colorswatch:first-child:not(.top) overlay { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } colorswatch.right, colorswatch:last-child:not(.bottom) { border-top-right-radius: 5.5px; border-bottom-right-radius: 5.5px; } colorswatch.right overlay, colorswatch:last-child:not(.bottom) overlay { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } colorswatch.dark overlay { color: #fefefe; } colorswatch.dark overlay:hover { border-color: #262a34; } colorswatch.dark overlay:backdrop { color: rgba(254, 254, 254, 0.5); } colorswatch.light overlay { color: #d8dee9; } colorswatch.light overlay:hover { border-color: #262a34; } colorswatch.light overlay:backdrop { color: #b9bfcb; } colorswatch:drop(active) { box-shadow: none; } colorswatch:drop(active).light overlay { border-color: #a3be8c; box-shadow: inset 0 0 0 2px #262a34, inset 0 0 0 1px #a3be8c; } colorswatch:drop(active).dark overlay { border-color: #a3be8c; box-shadow: inset 0 0 0 2px #262a34, inset 0 0 0 1px #a3be8c; } colorswatch overlay { box-shadow: inset 0 3px 2px -2px rgba(0, 0, 0, 0.5); border: 1px solid #262a34; } colorswatch overlay:hover { box-shadow: inset 0 1px rgba(255, 255, 255, 0.3); } colorswatch overlay:backdrop, colorswatch overlay:backdrop:hover { border-color: #262a34; box-shadow: none; } colorswatch#add-color-button { border-radius: 5px 5px 0 0; } colorswatch#add-color-button:only-child { border-radius: 5px; } colorswatch#add-color-button overlay { font-weight: normal; color: #d8dee9; background-color: #3c4454; text-shadow: none; } colorswatch#add-color-button overlay:hover { color: #d8dee9; outline-color: rgba(216, 222, 233, 0.3); background-color: #3b4252; text-shadow: none; } colorswatch#add-color-button overlay:backdrop { color: #b9bfcb; outline-color: rgba(216, 222, 233, 0.3); background-color: #3d4455; text-shadow: none; } colorswatch:disabled { opacity: 0.5; } colorswatch:disabled overlay { border-color: rgba(0, 0, 0, 0.6); box-shadow: none; } row:selected colorswatch { box-shadow: 0 0 0 2px #fefefe; } colorswatch#editor-color-sample { border-radius: 4px; } colorswatch#editor-color-sample overlay { border-radius: 4.5px; } colorchooser .popover.osd { border-radius: 5px; } /************** * ComboBoxes * **************/ combobox arrow { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); min-height: 16px; min-width: 16px; } combobox:drop(active) { box-shadow: none; } /*********** * Dialogs * ***********/ messagedialog, .messagedialog, .dialog { background-color: #2e3440; } messagedialog .titlebar:not(headerbar), .messagedialog .titlebar:not(headerbar), .dialog .titlebar:not(headerbar) { background-color: rgba(67, 76, 94, 0.95); } messagedialog .titlebar, .messagedialog .titlebar, .dialog .titlebar { min-height: 20px; background-image: none; background-color: rgba(67, 76, 94, 0.95); border-style: none; border-top-left-radius: 4px; border-top-right-radius: 4px; } messagedialog.csd.background, .messagedialog.csd.background, .dialog.csd.background { background-color: rgba(35, 40, 49, 0.95); color: #d8dee9; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .messagedialog .message-area, .messagedialog .response-area, .dialog .dialog-action-area, .alert.floating .response-area, .alert.floating .body-scrolled-window { padding: 26px; } filechooser .dialog-action-box { border-top: 1px solid #262a34; } filechooser .dialog-action-box:backdrop { border-top-color: #292d38; } filechooser #pathbarbox { border-bottom: 1px solid #434c5e; } filechooserbutton:drop(active) { box-shadow: none; border-color: transparent; } /**************** * Text Entries * ****************/ spinbutton:not(.vertical), spinbutton.vertical > text, entry { min-height: 28px; padding-left: 8px; padding-right: 8px; border: 1px solid; border-radius: 6px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #d8dee9; border-color: #262a34; background-color: #3b4252; } spinbutton:not(.vertical) image.left, spinbutton.vertical > text image.left, entry image.left { padding-left: 0; padding-right: 6px; } spinbutton:not(.vertical) image.right, spinbutton.vertical > text image.right, entry image.right { padding-left: 6px; padding-right: 0; } spinbutton:not(.vertical) undershoot.left, spinbutton.vertical > text undershoot.left, entry undershoot.left { background-color: transparent; background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); padding-left: 1px; background-size: 1px 10px; background-repeat: repeat-y; background-origin: content-box; background-position: left center; border: none; box-shadow: none; } spinbutton:not(.vertical) undershoot.right, spinbutton.vertical > text undershoot.right, entry undershoot.right { background-color: transparent; background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); padding-right: 1px; background-size: 1px 10px; background-repeat: repeat-y; background-origin: content-box; background-position: right center; border: none; box-shadow: none; } spinbutton.flat:focus-within:not(.vertical), spinbutton.vertical > text.flat:focus-within, spinbutton.flat:not(.vertical), spinbutton.vertical > text.flat, entry.flat:focus-within, entry.flat { min-height: 0; padding: 2px; background-image: none; border-color: transparent; box-shadow: none; border-radius: 0; } spinbutton:focus-within:not(.vertical), spinbutton.vertical > text:focus-within, entry:focus-within { border-color: #5f88b0; box-shadow: 0px 0px 1px 1px #81a1c1 inset; } spinbutton:disabled:not(.vertical), spinbutton.vertical > text:disabled, entry:disabled { color: #8e95a4; border-color: #262a34; background-color: #404859; box-shadow: none; } spinbutton:backdrop:not(.vertical), spinbutton.vertical > text:backdrop, entry:backdrop { color: #b9bfcb; border-color: #292d38; background-color: #3d4455; box-shadow: none; transition: 200ms ease-out; } spinbutton:backdrop:disabled:not(.vertical), spinbutton.vertical > text:backdrop:disabled, entry:backdrop:disabled { color: #63708b; border-color: #292d38; background-color: #404859; box-shadow: none; } spinbutton.error:not(.vertical), spinbutton.vertical > text.error, entry.error { color: #d8dee9; border-color: #262a34; background-color: #3b4252; color: #b84f59; border-color: #3c181c; } spinbutton.error:focus-within:not(.vertical), spinbutton.vertical > text.error:focus-within, entry.error:focus-within { border-color: #3c181c; box-shadow: 0px 0px 1px 1px #81a1c1 inset; } spinbutton.error:selected:focus:not(.vertical), spinbutton.vertical > text.error:selected:focus, spinbutton.error:selected:not(.vertical), spinbutton.vertical > text.error:selected, entry.error:selected:focus, entry.error:selected { background-color: #b84f59; } spinbutton.warning:not(.vertical), spinbutton.vertical > text.warning, entry.warning { color: #d8dee9; border-color: #262a34; background-color: #3b4252; color: #c3674a; border-color: #442116; } spinbutton.warning:focus-within:not(.vertical), spinbutton.vertical > text.warning:focus-within, entry.warning:focus-within { border-color: #442116; box-shadow: 0px 0px 1px 1px #81a1c1 inset; } spinbutton.warning:selected:focus:not(.vertical), spinbutton.vertical > text.warning:selected:focus, spinbutton.warning:selected:not(.vertical), spinbutton.vertical > text.warning:selected, entry.warning:selected:focus, entry.warning:selected { background-color: #c3674a; } spinbutton:not(.vertical) image, spinbutton.vertical > text image, entry image { color: #b9bfcb; } spinbutton:not(.vertical) image:hover, spinbutton.vertical > text image:hover, entry image:hover { color: #d8dee9; } spinbutton:not(.vertical) image:active, spinbutton.vertical > text image:active, entry image:active { color: #81a1c1; } spinbutton:not(.vertical) image:backdrop, spinbutton.vertical > text image:backdrop, entry image:backdrop { color: #7e8594; } spinbutton:drop(active):focus-within:not(.vertical), spinbutton.vertical > text:drop(active):focus-within, spinbutton:drop(active):not(.vertical), spinbutton.vertical > text:drop(active), entry:drop(active):focus-within, entry:drop(active) { border-color: #a3be8c; box-shadow: inset 0 0 0 1px #a3be8c; } .osd spinbutton:not(.vertical), .osd spinbutton.vertical > text, .osd entry { color: #d8dee9; border-color: #1f232b; background-color: rgba(31, 35, 43, 0.5); box-shadow: none; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; } .osd spinbutton:focus-within:not(.vertical), .osd spinbutton.vertical > text:focus-within, .osd entry:focus-within { color: #d8dee9; border-color: #81a1c1; background-color: rgba(31, 35, 43, 0.5); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; } .osd spinbutton:backdrop:not(.vertical), .osd spinbutton.vertical > text:backdrop, .osd entry:backdrop { color: #d8dee9; border-color: #1f232b; background-color: rgba(31, 35, 43, 0.5); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } .osd spinbutton:disabled:not(.vertical), .osd spinbutton.vertical > text:disabled, .osd entry:disabled { color: #808690; border-color: #1f232b; background-color: rgba(58, 63, 73, 0.5); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } spinbutton:not(.vertical) progress, spinbutton.vertical > text progress, entry progress { margin: 2px -6px; background-color: transparent; background-image: none; border-radius: 0; border-width: 0 0 2px; border-color: #81a1c1; border-style: solid; box-shadow: none; } spinbutton:not(.vertical) progress:backdrop, spinbutton.vertical > text progress:backdrop, entry progress:backdrop { background-color: transparent; } .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + spinbutton:not(.vertical), spinbutton.vertical.linked:not(.vertical) > text:drop(active) + spinbutton:not(.vertical), spinbutton.vertical.linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + text, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + text, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + menubutton > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + menubutton > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + dropdown > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + dropdown > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + colorbutton > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + colorbutton > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + fontbutton > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + fontbutton > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + filechooserbutton > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + filechooserbutton > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + filechooserbutton > combobox > box > button.combo, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + filechooserbutton > combobox > box > button.combo, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + appchooserbutton > combobox > box > button.combo, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + appchooserbutton > combobox > box > button.combo, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + combobox > box > button.combo, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + combobox > box > button.combo, .linked:not(.vertical) > entry:drop(active) + spinbutton:not(.vertical), spinbutton.vertical.linked:not(.vertical) > entry:drop(active) + text, .linked:not(.vertical) > entry:drop(active) + button, .linked:not(.vertical) > entry:drop(active) + menubutton > button, .linked:not(.vertical) > entry:drop(active) + dropdown > button, .linked:not(.vertical) > entry:drop(active) + colorbutton > button, .linked:not(.vertical) > entry:drop(active) + fontbutton > button, .linked:not(.vertical) > entry:drop(active) + filechooserbutton > button, .linked:not(.vertical) > entry:drop(active) + filechooserbutton > combobox > box > button.combo, .linked:not(.vertical) > entry:drop(active) + appchooserbutton > combobox > box > button.combo, .linked:not(.vertical) > entry:drop(active) + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + entry, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + entry, .linked:not(.vertical) > entry:drop(active) + entry { border-left-color: #a3be8c; } .linked:not(.vertical) > spinbutton:focus-within:not(.vertical), spinbutton.vertical.linked:not(.vertical) > text:focus-within, .linked:not(.vertical) > entry:focus-within { border-color: #5f88b0; box-shadow: 0px 0px 1px 1px #81a1c1 inset; border-right-style: solid; } .linked:not(.vertical) > spinbutton:focus-within:not(.vertical) + .popup button, spinbutton.vertical.linked:not(.vertical) > text:focus-within + .popup button, .linked:not(.vertical) > entry:focus-within + .popup button { border-left-color: #81a1c1; } .linked:not(.vertical) > spinbutton:not(.vertical) + .popup button, spinbutton.vertical.linked:not(.vertical) > text + .popup button, .linked:not(.vertical) > entry + .popup button { border-radius: 0px 6px 6px 0px; } .linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled), spinbutton.vertical.linked > text:not(:disabled) + entry:not(:disabled), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):not(.vertical), spinbutton.vertical.linked > text:not(:disabled) + spinbutton:not(:disabled):not(.vertical), spinbutton.vertical.linked > spinbutton:not(:disabled):not(.vertical) + text:not(:disabled), spinbutton.vertical.linked > text:not(:disabled) + text:not(:disabled), .linked.vertical > entry:not(:disabled) + entry:not(:disabled), .linked.vertical > entry:not(:disabled) + spinbutton:not(:disabled):not(.vertical), spinbutton.vertical.linked > entry:not(:disabled) + text:not(:disabled) { border-top-color: #353b49; background-image: linear-gradient(to bottom, #3b4252, #3b4252); } .linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled):backdrop, spinbutton.vertical.linked > text:not(:disabled) + entry:not(:disabled):backdrop, .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):backdrop:not(.vertical), spinbutton.vertical.linked > text:not(:disabled) + spinbutton:not(:disabled):backdrop:not(.vertical), spinbutton.vertical.linked > spinbutton:not(:disabled):not(.vertical) + text:not(:disabled):backdrop, spinbutton.vertical.linked > text:not(:disabled) + text:not(:disabled):backdrop, .linked.vertical > entry:not(:disabled) + entry:not(:disabled):backdrop, .linked.vertical > entry:not(:disabled) + spinbutton:not(:disabled):backdrop:not(.vertical), spinbutton.vertical.linked > entry:not(:disabled) + text:not(:disabled):backdrop { border-top-color: #373d4c; background-image: linear-gradient(to bottom, #3d4455, #3d4455); } .linked.vertical > spinbutton:disabled:not(.vertical) + spinbutton:disabled:not(.vertical), spinbutton.vertical.linked > text:disabled + spinbutton:disabled:not(.vertical), spinbutton.vertical.linked > spinbutton:disabled:not(.vertical) + text:disabled, spinbutton.vertical.linked > text:disabled + text:disabled, .linked.vertical > spinbutton:disabled:not(.vertical) + entry:disabled, spinbutton.vertical.linked > text:disabled + entry:disabled, .linked.vertical > entry:disabled + spinbutton:disabled:not(.vertical), spinbutton.vertical.linked > entry:disabled + text:disabled, .linked.vertical > entry:disabled + entry:disabled { border-top-color: #353b49; } .linked.vertical > spinbutton:not(.vertical) + spinbutton:focus:not(:only-child):not(.vertical), spinbutton.vertical.linked > text + spinbutton:focus:not(:only-child):not(.vertical), spinbutton.vertical.linked > spinbutton:not(.vertical) + text:focus:not(:only-child), spinbutton.vertical.linked > text + text:focus:not(:only-child), .linked.vertical > spinbutton:not(.vertical) + entry:focus:not(:only-child), spinbutton.vertical.linked > text + entry:focus:not(:only-child), .linked.vertical > entry + spinbutton:focus:not(:only-child):not(.vertical), spinbutton.vertical.linked > entry + text:focus:not(:only-child), .linked.vertical > entry + entry:focus:not(:only-child) { border-top-color: #5f88b0; } .linked.vertical > spinbutton:not(.vertical) + spinbutton:drop(active):not(:only-child):not(.vertical), spinbutton.vertical.linked > text + spinbutton:drop(active):not(:only-child):not(.vertical), spinbutton.vertical.linked > spinbutton:not(.vertical) + text:drop(active):not(:only-child), spinbutton.vertical.linked > text + text:drop(active):not(:only-child), .linked.vertical > spinbutton:not(.vertical) + entry:drop(active):not(:only-child), spinbutton.vertical.linked > text + entry:drop(active):not(:only-child), .linked.vertical > entry + spinbutton:drop(active):not(:only-child):not(.vertical), spinbutton.vertical.linked > entry + text:drop(active):not(:only-child), .linked.vertical > entry + entry:drop(active):not(:only-child) { border-top-color: #a3be8c; } .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + spinbutton:not(.vertical), spinbutton.vertical.linked > text:focus:not(:only-child) + spinbutton:not(.vertical), spinbutton.vertical.linked > spinbutton:focus:not(:only-child):not(.vertical) + text, spinbutton.vertical.linked > text:focus:not(:only-child) + text, .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + entry, spinbutton.vertical.linked > text:focus:not(:only-child) + entry, .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + button, spinbutton.vertical.linked > text:focus:not(:only-child) + button, .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + combobox > box > button.combo, spinbutton.vertical.linked > text:focus:not(:only-child) + combobox > box > button.combo, .linked.vertical > entry:focus:not(:only-child) + spinbutton:not(.vertical), spinbutton.vertical.linked > entry:focus:not(:only-child) + text, .linked.vertical > entry:focus:not(:only-child) + entry, .linked.vertical > entry:focus:not(:only-child) + button, .linked.vertical > entry:focus:not(:only-child) + combobox > box > button.combo { border-top-color: #5f88b0; } .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + spinbutton:not(.vertical), spinbutton.vertical.linked > text:drop(active):not(:only-child) + spinbutton:not(.vertical), spinbutton.vertical.linked > spinbutton:drop(active):not(:only-child):not(.vertical) + text, spinbutton.vertical.linked > text:drop(active):not(:only-child) + text, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + entry, spinbutton.vertical.linked > text:drop(active):not(:only-child) + entry, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + button, spinbutton.vertical.linked > text:drop(active):not(:only-child) + button, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + combobox > box > button.combo, spinbutton.vertical.linked > text:drop(active):not(:only-child) + combobox > box > button.combo, .linked.vertical > entry:drop(active):not(:only-child) + spinbutton:not(.vertical), spinbutton.vertical.linked > entry:drop(active):not(:only-child) + text, .linked.vertical > entry:drop(active):not(:only-child) + entry, .linked.vertical > entry:drop(active):not(:only-child) + button, .linked.vertical > entry:drop(active):not(:only-child) + combobox > box > button.combo { border-top-color: #a3be8c; } treeview entry:focus-within:dir(rtl), treeview entry:focus-within:dir(ltr) { background-color: #3b4252; transition-property: color, background; } treeview entry.flat, treeview entry { border-radius: 0; background-image: none; background-color: #3b4252; } treeview entry.flat:focus-within, treeview entry:focus-within { border-color: #81a1c1; } /************* * Expanders * *************/ expander { min-width: 16px; min-height: 16px; -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } expander:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); } expander:hover { color: white; } expander:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } /**************** * Floating Bar * ****************/ .floating-bar { background-color: #434c5e; border-width: 1px; border-style: solid solid none; border-color: #262a34; border-radius: 3px 3px 0 0; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } .floating-bar.bottom.left { border-left-style: none; border-top-left-radius: 0; } .floating-bar.bottom.right { border-right-style: none; border-top-right-radius: 0; } .floating-bar > button { padding: 4px; } .floating-bar:backdrop { background-color: #434c5e; border-color: #292d38; } /********** * Frames * **********/ frame > border, .frame { box-shadow: none; margin: 0; padding: 0; border-radius: 0; border: 1px solid #262a34; } frame > border.flat, .frame.flat { border-style: none; } frame > border:backdrop, .frame:backdrop { border-color: #292d38; } actionbar > revealer > box { padding: 6px; border-top: 1px solid #262a34; } actionbar > revealer > box:backdrop { border-color: #292d38; } scrolledwindow viewport.frame { border-style: none; } scrolledwindow overshoot.top { background-image: radial-gradient(farthest-side at top, #101217 85%, rgba(16, 18, 23, 0)), radial-gradient(farthest-side at top, rgba(216, 222, 233, 0.07), rgba(216, 222, 233, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: top; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.top:backdrop { background-image: radial-gradient(farthest-side at top, #292d38 85%, rgba(41, 45, 56, 0)); background-size: 100% 3%; background-repeat: no-repeat; background-position: top; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.bottom { background-image: radial-gradient(farthest-side at bottom, #101217 85%, rgba(16, 18, 23, 0)), radial-gradient(farthest-side at bottom, rgba(216, 222, 233, 0.07), rgba(216, 222, 233, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: bottom; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.bottom:backdrop { background-image: radial-gradient(farthest-side at bottom, #292d38 85%, rgba(41, 45, 56, 0)); background-size: 100% 3%; background-repeat: no-repeat; background-position: bottom; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.left { background-image: radial-gradient(farthest-side at left, #101217 85%, rgba(16, 18, 23, 0)), radial-gradient(farthest-side at left, rgba(216, 222, 233, 0.07), rgba(216, 222, 233, 0)); background-size: 3% 100%, 50% 100%; background-repeat: no-repeat; background-position: left; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.left:backdrop { background-image: radial-gradient(farthest-side at left, #292d38 85%, rgba(41, 45, 56, 0)); background-size: 3% 100%; background-repeat: no-repeat; background-position: left; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.right { background-image: radial-gradient(farthest-side at right, #101217 85%, rgba(16, 18, 23, 0)), radial-gradient(farthest-side at right, rgba(216, 222, 233, 0.07), rgba(216, 222, 233, 0)); background-size: 3% 100%, 50% 100%; background-repeat: no-repeat; background-position: right; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.right:backdrop { background-image: radial-gradient(farthest-side at right, #292d38 85%, rgba(41, 45, 56, 0)); background-size: 3% 100%; background-repeat: no-repeat; background-position: right; background-color: transparent; border: none; box-shadow: none; } scrolledwindow undershoot.top { background-color: transparent; background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); padding-top: 1px; background-size: 10px 1px; background-repeat: repeat-x; background-origin: content-box; background-position: center top; border: none; box-shadow: none; } scrolledwindow undershoot.bottom { background-color: transparent; background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); padding-bottom: 1px; background-size: 10px 1px; background-repeat: repeat-x; background-origin: content-box; background-position: center bottom; border: none; box-shadow: none; } scrolledwindow undershoot.left { background-color: transparent; background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); padding-left: 1px; background-size: 1px 10px; background-repeat: repeat-y; background-origin: content-box; background-position: left center; border: none; box-shadow: none; } scrolledwindow undershoot.right { background-color: transparent; background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); padding-right: 1px; background-size: 1px 10px; background-repeat: repeat-y; background-origin: content-box; background-position: right center; border: none; box-shadow: none; } scrolledwindow junction { border-color: transparent; border-image: linear-gradient(to bottom, #262a34 1px, transparent 1px) 0 0 0 1/0 1px stretch; background-color: #3f4758; } scrolledwindow junction:dir(rtl) { border-image-slice: 0 1 0 0; } scrolledwindow junction:backdrop { border-image-source: linear-gradient(to bottom, #292d38 1px, transparent 1px); background-color: #3d4555; transition: 200ms ease-out; } separator { background: rgba(0, 0, 0, 0.1); } /************ * Popovers * ************/ GraniteWidgetsPopOver { border: 1px solid #3b4252; background: #3b4252; color: #d8dee9; } GraniteWidgetsPopOver .button { background-image: none; background: none; border: none; } GraniteWidgetsPopOver .button:active, GraniteWidgetsPopOver .button:active:hover { color: #81a1c1; } GraniteWidgetsPopOver > .frame { border: none; } GraniteWidgetsPopOver .sidebar.view, GraniteWidgetsPopOver iconview.sidebar { border: none; background: none; } GraniteWidgetsStaticNotebook .frame { border: none; } .popover_bg { background-color: #3b4252; background-image: none; border: 1px solid #3b4252; color: #d8dee9; } /*********** * Welcome * **********/ GraniteWidgetsWelcome { background-color: #3b4252; } GraniteWidgetsWelcome GtkLabel { color: #d8dee9; } GraniteWidgetsWelcome .h1, GraniteWidgetsWelcome .h3 { color: rgba(216, 222, 233, 0.8); } /************** * Source List * ***************/ .source-list { background-color: #434c5e; border: solid #262a34; color: #d8dee9; border-right-width: 1px; } .source-list .category-expander { color: transparent; } .source-list .badge { background-image: none; background-color: rgba(0, 0, 0, 0.4); color: #434c5e; border-radius: 10px; padding: 0 6px; margin: 0 3px; border-width: 0; } .source-list .badge:selected:backdrop, .source-list .badge:selected:hover:backdrop { background-color: rgba(0, 0, 0, 0.2); color: #38404f; } .source-list row, .source-list .list-row { border: none; padding: 0; } .source-list row > GtkLabel, .source-list row > label, .source-list .list-row > GtkLabel, .source-list .list-row > label { padding-left: 6px; padding-right: 6px; } /************** * Text Styles * **************/ .h1 { font-size: 24px; } .h2 { font-weight: 300; font-size: 18px; } .h3 { font-size: 11px; } .h4, .category-label { font-size: 12px; padding: 6px; color: rgba(216, 222, 233, 0.3); font-weight: bold; text-shadow: 0 1px rgba(255, 255, 255, 0.2); } /************** * Storage Bar * **************/ .storage-bar .trough { border: none; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1); background-image: none; background-color: transparent; padding: 8px 6px; } .storage-bar .fill-block { background-color: #ebcb8b; border: none; box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); transition: all 200ms ease-in-out; padding: 8px 6px; } .storage-bar .fill-block:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-left-width: 1px; box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1), inset 1px 0 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); } .storage-bar .fill-block:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1), inset -1px 0 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); } .storage-bar .fill-block.empty-block { background-color: #3b4252; } .storage-bar .fill-block.app { background-color: #5e81ac; } .storage-bar .fill-block.audio { background-color: #d08770; } .storage-bar .fill-block.photo { background-color: #bf616a; } .storage-bar .fill-block.video { background-color: #b48ead; } .storage-bar .fill-block .legend { padding: 12px; border-radius: 4px; } /*************** * Header bars * ***************/ .titlebar:not(headerbar), .titlebar, headerbar { padding: 0 6px; min-height: 38px; background: #2b313c; color: #d8dee9; border-radius: 0; } .titlebar:backdrop, headerbar:backdrop { border-color: #292d38; transition: 200ms ease-out; } .titlebar .title, headerbar .title { font-weight: bold; padding-left: 12px; padding-right: 12px; } .titlebar .subtitle, headerbar .subtitle { font-size: smaller; padding-left: 12px; padding-right: 12px; } .titlebar entry, headerbar entry { min-height: 24px; } .titlebar button, headerbar button { color: #d8dee9; border-radius: 6px; text-shadow: none; box-shadow: none; border: 1px solid #1f232b; background-color: #343b48; border-color: #1f232b; } .titlebar button:active, .titlebar button:checked, headerbar button:active, headerbar button:checked { color: #fff; outline-color: rgba(255, 255, 255, 0.3); background-color: #81a1c1; text-shadow: none; border-color: #1f232b; } .titlebar button:backdrop, .titlebar button:disabled, .titlebar button:backdrop:disabled, headerbar button:backdrop, headerbar button:disabled, headerbar button:backdrop:disabled { color: rgba(216, 222, 233, 0.2); background-color: #282d37; border-color: #1f232b; text-shadow: none; box-shadow: none; } .titlebar .linked > button, .titlebar .path-bar-box button, .titlebar headerbar .linked > button, headerbar .path-bar-box .titlebar button, .titlebar .linked > button:hover, .titlebar .linked > button:backdrop, .titlebar headerbar .linked > button, headerbar .path-bar-box .titlebar button, headerbar .titlebar .linked > button, headerbar .linked > button, headerbar .titlebar .path-bar-box button, .titlebar .path-bar-box headerbar button, headerbar .path-bar-box button, headerbar .titlebar .linked > button:hover, .titlebar headerbar .linked > button:hover, headerbar .titlebar .linked > button:backdrop, .titlebar headerbar .linked > button:backdrop, headerbar .linked > button:hover, headerbar .linked > button:backdrop { border-radius: 0; border-right-style: none; box-shadow: none; } .titlebar .linked > button:first-child, .titlebar .path-bar-box button:first-child, .titlebar headerbar .linked > button:first-child, headerbar .path-bar-box .titlebar button:first-child, headerbar .titlebar .linked > button:first-child, headerbar .linked > button:first-child, .titlebar .path-bar-box headerbar button:first-child, headerbar .path-bar-box button:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .titlebar .linked > button:last-child, .titlebar .path-bar-box button:last-child, .titlebar headerbar .linked > button:last-child, headerbar .path-bar-box .titlebar button:last-child, headerbar .titlebar .linked > button:last-child, headerbar .linked > button:last-child, .titlebar .path-bar-box headerbar button:last-child, headerbar .path-bar-box button:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; border-right-style: solid; } .titlebar .linked > button:only-child, .titlebar .path-bar-box button:only-child, .titlebar headerbar .linked > button:only-child, headerbar .path-bar-box .titlebar button:only-child, headerbar .titlebar .linked > button:only-child, headerbar .linked > button:only-child, .titlebar .path-bar-box headerbar button:only-child, headerbar .path-bar-box button:only-child { border-radius: 6px; border-style: solid; } .titlebar .linked > button, .titlebar headerbar .linked > button, .titlebar .path-bar-box button, headerbar .path-bar-box .titlebar button, headerbar .titlebar .linked > button, .titlebar headerbar .linked > button, headerbar .linked > button, headerbar .titlebar .path-bar-box button, .titlebar .path-bar-box headerbar button, headerbar .path-bar-box button { border-color: #1f232b; } .titlebar .linked > button:active, .titlebar headerbar .linked > button:active, .titlebar .path-bar-box button:active, headerbar .path-bar-box .titlebar button:active, .titlebar .linked > button:checked, .titlebar headerbar .linked > button:checked, .titlebar .path-bar-box button:checked, headerbar .path-bar-box .titlebar button:checked, headerbar .titlebar .linked > button:active, headerbar .linked > button:active, .titlebar .path-bar-box headerbar button:active, headerbar .path-bar-box button:active, headerbar .titlebar .linked > button:checked, headerbar .linked > button:checked, .titlebar .path-bar-box headerbar button:checked, headerbar .path-bar-box button:checked { color: #fff; outline-color: rgba(255, 255, 255, 0.3); background-color: #81a1c1; text-shadow: none; } .titlebar .linked > button:active:backdrop, .titlebar headerbar .linked > button:active:backdrop, .titlebar .path-bar-box button:active:backdrop, headerbar .path-bar-box .titlebar button:active:backdrop, .titlebar .linked > button:checked:backdrop, .titlebar headerbar .linked > button:checked:backdrop, .titlebar .path-bar-box button:checked:backdrop, headerbar .path-bar-box .titlebar button:checked:backdrop, headerbar .titlebar .linked > button:active:backdrop, headerbar .linked > button:active:backdrop, .titlebar .path-bar-box headerbar button:active:backdrop, headerbar .path-bar-box button:active:backdrop, headerbar .titlebar .linked > button:checked:backdrop, headerbar .linked > button:checked:backdrop, .titlebar .path-bar-box headerbar button:checked:backdrop, headerbar .path-bar-box button:checked:backdrop { background-color: rgba(129, 161, 193, 0.6); color: #81a1c1; } .titlebar .linked > button:active:backdrop label, .titlebar .path-bar-box button:active:backdrop label, headerbar .path-bar-box .titlebar button:active:backdrop label, .titlebar .linked > button:checked:backdrop label, .titlebar .path-bar-box button:checked:backdrop label, headerbar .path-bar-box .titlebar button:checked:backdrop label, headerbar .linked > button:active:backdrop label, .titlebar .path-bar-box headerbar button:active:backdrop label, headerbar .path-bar-box button:active:backdrop label, headerbar .linked > button:checked:backdrop label, .titlebar .path-bar-box headerbar button:checked:backdrop label, headerbar .path-bar-box button:checked:backdrop label { color: #81a1c1; } .titlebar .linked:not(.vertical) > entry, headerbar .linked:not(.vertical) > entry { border-color: #1f232b; box-shadow: none; background: #2f3642; color: #d8dee9; caret-color: #d8dee9; } .titlebar .linked:not(.vertical) > entry *, headerbar .linked:not(.vertical) > entry * { color: #d8dee9; } .titlebar .linked:not(.vertical) > entry:focus, headerbar .linked:not(.vertical) > entry:focus { border-color: #5f88b0; } .titlebar splitbutton.image-button > button:not(.toggle), headerbar splitbutton.image-button > button:not(.toggle) { border-radius: 6px 0px 0px 6px; } .titlebar splitbutton.image-button menubutton.popup button.toggle, headerbar splitbutton.image-button menubutton.popup button.toggle { border-radius: 0px 6px 6px 0px; } .titlebar .path-bar-box .dim-label, .titlebar .path-bar-box label.separator, .titlebar .path-bar-box .subtitle, headerbar .path-bar-box .dim-label, headerbar .path-bar-box label.separator, headerbar .path-bar-box .subtitle { color: transparent; margin-right: -6px; } .titlebar .path-bar-box button:last-child, headerbar .path-bar-box button:last-child { margin-left: -1px; border-radius: 0px; } .titlebar .path-bar-box button:last-child:active, .titlebar .path-bar-box button:last-child:checked, headerbar .path-bar-box button:last-child:active, headerbar .path-bar-box button:last-child:checked { border-radius: 0px 6px 6px 0px; } .titlebar .path-bar-box button:first-child, headerbar .path-bar-box button:first-child { border-radius: 6px 0px 0px 6px; } .titlebar .path-bar-box button:first-child:active, .titlebar .path-bar-box button:first-child:checked, headerbar .path-bar-box button:first-child:active, headerbar .path-bar-box button:first-child:checked { border-radius: 6px; } .titlebar .path-bar-box widget > .text-button:last-child, headerbar .path-bar-box widget > .text-button:last-child { border-radius: 0px 6px 6px 0px; color: #fff; outline-color: rgba(255, 255, 255, 0.3); background-color: #81a1c1; text-shadow: none; } .titlebar .path-bar-box widget > .text-button:last-child:backdrop, headerbar .path-bar-box widget > .text-button:last-child:backdrop { background: rgba(129, 161, 193, 0.6); } .titlebar .path-bar-box widget > .text-button:last-child:backdrop, .titlebar .path-bar-box widget > .text-button:last-child:backdrop label, headerbar .path-bar-box widget > .text-button:last-child:backdrop, headerbar .path-bar-box widget > .text-button:last-child:backdrop label { color: #81a1c1; } .titlebar .path-bar-box widget > .text-button:last-child:only-child, headerbar .path-bar-box widget > .text-button:last-child:only-child { border-radius: 6px; } .selection-mode.titlebar button:backdrop.flat:active, .selection-mode.titlebar button:backdrop.flat:checked, .selection-mode.titlebar button:backdrop:active, .selection-mode.titlebar button:backdrop:checked, headerbar.selection-mode button:backdrop.flat:active, headerbar.selection-mode button:backdrop.flat:checked, headerbar.selection-mode button:backdrop:active, headerbar.selection-mode button:backdrop:checked { border-color: #5f88b0; } .selection-mode.titlebar button:backdrop.flat:active label, .selection-mode.titlebar button:backdrop.flat:checked label, .selection-mode.titlebar button:backdrop:active label, .selection-mode.titlebar button:backdrop:checked label, headerbar.selection-mode button:backdrop.flat:active label, headerbar.selection-mode button:backdrop.flat:checked label, headerbar.selection-mode button:backdrop:active label, headerbar.selection-mode button:backdrop:checked label { color: rgba(129, 161, 193, 0.6); } .tiled .titlebar, .maximized .titlebar, .tiled headerbar.titlebar, .maximized headerbar.titlebar { box-shadow: inset 0 -1px rgba(0, 0, 0, 0.1); } .tiled .titlebar:backdrop, .tiled .titlebar, .maximized .titlebar:backdrop, .maximized .titlebar, .tiled headerbar:backdrop, .tiled headerbar, .maximized headerbar:backdrop, .maximized headerbar { border-radius: 0; } .default-decoration.titlebar, headerbar.default-decoration { padding: 5px 4px; min-height: 20px; } .default-decoration.titlebar button.titlebutton, headerbar.default-decoration button.titlebutton { min-height: 20px; min-width: 20px; margin: 0; padding: 0; } headerbar entry, headerbar spinbutton, headerbar separator:not(.sidebar), headerbar button, headerbar menubutton { margin-top: 3px; margin-bottom: 3px; } headerbar menubutton > button, headerbar spinbutton > button, headerbar splitbutton > button, headerbar splitbutton > menubutton, headerbar entry > menubutton { margin-top: 0px; margin-bottom: 0px; } headerbar switch { margin-top: 0; margin-bottom: 0; } headerbar separator { background: transparent; } .background:not(.tiled):not(.maximized) .titlebar { box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 -1px rgba(0, 0, 0, 0.1); } .background:not(.tiled):not(.maximized) .titlebar:backdrop, .background:not(.tiled):not(.maximized) .titlebar { border-top-left-radius: 6px; border-top-right-radius: 6px; } window:not(.tiled):not(.maximized) separator:first-child + headerbar:backdrop, window:not(.tiled):not(.maximized) separator:first-child + headerbar, window:not(.tiled):not(.maximized) headerbar:first-child:backdrop, window:not(.tiled):not(.maximized) headerbar:first-child { border-top-left-radius: 6px; } window:not(.tiled):not(.maximized) headerbar:last-child:backdrop, window:not(.tiled):not(.maximized) headerbar:last-child { border-top-right-radius: 6px; } window.csd > .titlebar:not(headerbar) { padding: 0; background-color: transparent; background-image: none; border-style: none; border-color: transparent; box-shadow: none; } .titlebar:not(headerbar) > separator, .titlebar:not(headerbar) > separator:backdrop { background: #2b313c; } .sidebar-pane .top-bar, .sidebar-pane .top-bar headerbar, .content-pane .top-bar, .content-pane .top-bar headerbar { background-color: #2b313c; } .raised.top-bar { background-color: #2b313c; } /************** * GtkInfoBar * **************/ .info, .warning, .question, .error, infobar { text-shadow: none; color: #d8dee9; background-color: #434c5e; border-bottom: 1px solid #2e3440; box-shadow: none; } .info, .warning, .question, .error { text-shadow: none; color: #fefefe; border: none; } .info .label, .warning .label, .question .label, .error .label { color: #fefefe; } .info .label:backdrop, .warning .label:backdrop, .question .label:backdrop, .error .label:backdrop { color: rgba(254, 254, 254, 0.5); } .info button, .warning button, .question button, .error button { border-radius: 2px; border: none; background: rgba(59, 66, 82, 0.98); color: #d8dee9; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2); } .info button .label, .warning button .label, .question button .label, .error button .label { color: #d8dee9; } .info button:active, .warning button:active, .question button:active, .error button:active { background: #3b4252; color: #d8dee9; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); } .info button:active:backdrop, .warning button:active:backdrop, .question button:active:backdrop, .error button:active:backdrop { background: rgba(59, 66, 82, 0.8); color: rgba(216, 222, 233, 0.5); box-shadow: none; } .info button:hover, .warning button:hover, .question button:hover, .error button:hover, .info button:focus, .warning button:focus, .question button:focus, .error button:focus { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); } .info button:disabled, .warning button:disabled, .question button:disabled, .error button:disabled { background: rgba(59, 66, 82, 0.6); color: rgba(216, 222, 233, 0.5); box-shadow: none; } .info button:disabled:backdrop, .warning button:disabled:backdrop, .question button:disabled:backdrop, .error button:disabled:backdrop { background: rgba(59, 66, 82, 0.5); color: rgba(216, 222, 233, 0.5); box-shadow: none; } .info button:backdrop, .warning button:backdrop, .question button:backdrop, .error button:backdrop { background: rgba(59, 66, 82, 0.8); color: rgba(216, 222, 233, 0.5); box-shadow: none; } .info, .info:backdrop { color: #8fbcbb; background-color: transparent; } .warning, .warning:backdrop { color: #c3674a; background-color: transparent; } .question, .question:backdrop { color: #88c0d0; background-color: transparent; } .error, .error:backdrop { color: #b84f59; background-color: transparent; } banner revealer widget { background: linear-gradient(to right, #88c0d0 0%, #88c0d0 100%); padding: 5px; color: #3b4252; } levelbar.horizontal trough > block { min-height: 5px; border-radius: 5px; } levelbar.horizontal trough > block:dir(rtl) { border-radius: 0 5px 5px 0; } levelbar.horizontal trough > block:dir(ltr) { border-radius: 5px 0 0 5px; } levelbar.horizontal trough > block.empty, levelbar.horizontal trough > block.full { border-radius: 5px; } levelbar.horizontal.discrete trough > block { min-height: 2px; margin: 1px; min-width: 24px; border-radius: 0; } levelbar.horizontal.discrete trough > block:first-child { border-radius: 2px 0 0 2px; } levelbar.horizontal.discrete trough > block:last-child { border-radius: 0 2px 2px 0; } levelbar.vertical trough > block { min-width: 5px; border-radius: 5px; } levelbar.vertical.discrete > trough > block { min-width: 2px; margin: 1px 0; min-height: 32px; } levelbar > trough { padding: 0; } levelbar > trough > block { border: 1px solid; } levelbar > trough > block.low { border-color: #c3674a; background-color: #c3674a; } levelbar > trough > block.high, levelbar > trough > block:not(.empty) { border-color: #81a1c1; background-color: #81a1c1; } levelbar > trough > block.full { border-color: #63adc2; background-color: #63adc2; } levelbar > trough > block.empty { background-color: #262a34; border-color: #262a34; } /********* * Links * *********/ *:link, button:link, button:visited { color: #5e81ac; } *:link:visited, button:visited { color: rgba(94, 129, 172, 0.5); } *:selected *:link:visited, *:selected button:visited:link, *:selected button:visited { color: #ccd9e6; } *:link:hover, button:hover:link, button:hover:visited { color: #809bbd; } *:selected *:link:hover, *:selected button:hover:link, *:selected button:hover:visited { color: #f2f5f8; } *:link:active, button:active:link, button:active:visited { color: #5e81ac; } *:selected *:link:active, *:selected button:active:link, *:selected button:active:visited { color: #e5ebf2; } *:link:backdrop:backdrop:hover, button:backdrop:backdrop:hover:link, button:backdrop:backdrop:hover:visited, *:link:backdrop:backdrop:hover:selected, button:backdrop:backdrop:hover:selected:link, button:backdrop:backdrop:hover:selected:visited, *:link:backdrop, button:backdrop:link, button:backdrop:visited { color: #81a1c1; } *:link:selected, button:selected:link, button:selected:visited, *:selected *:link, *:selected button:link, *:selected button:visited { color: #e5ebf2; } button:link, button:visited { text-shadow: none; } button:link:hover, button:link:active, button:link:checked, button:visited:hover, button:visited:active, button:visited:checked { text-shadow: none; } button:link > label, button:visited > label { text-decoration-line: underline; } /********* * Lists * *********/ list, listview { background-color: #3b4252; border-color: #262a34; } list, list label, listview, listview label { color: #d8dee9; } list:backdrop, listview:backdrop { background-color: #3d4455; border-color: #292d38; } list.horizontal row.separator, list.separators.horizontal > row:not(.separator), listview.horizontal row.separator, listview.separators.horizontal > row:not(.separator) { border-left: 1px solid #262a34; } list:not(.horizontal) row.separator, list.separators:not(.horizontal) > row:not(.separator), listview:not(.horizontal) row.separator, listview.separators:not(.horizontal) > row:not(.separator) { border-bottom: 1px solid #262a34; } row:hover { transition: none; } row:backdrop { transition: 200ms ease-out; } row.activatable.has-open-popup, row.activatable:hover { background-color: rgba(216, 222, 233, 0.05); } row.activatable:active { box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); } row.activatable:backdrop:hover { background-color: transparent; } row.activatable:selected:active { box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); } row.activatable:selected.has-open-popup, row.activatable:selected:hover { background-color: rgba(129, 161, 193, 0.5); } row.activatable:selected:backdrop { background-color: rgba(129, 161, 193, 0.6); } row.activatable.button { font-weight: normal; color: #d8dee9; background-color: #3c4454; text-shadow: none; } row .view, row iconview { background-color: transparent; } columnview > listview > row { padding: 0; } columnview > listview > row > cell { padding: 0px 6px; } columnview > listview > row > cell:not(:first-child) { border-left: 1px solid transparent; } columnview.column-separators > listview > row > cell { border-left-color: #262a34; } columnview.data-table > listview > row > cell { padding-top: 2px; padding-bottom: 2px; } treeexpander { border-spacing: 4px; } /******************************************************** * Data Tables * * treeview like tables with individual focusable cells * * https://gitlab.gnome.org/GNOME/gtk/-/issues/2929 * ********************************************************/ columnview row:not(:selected) cell editablelabel:not(.editing):focus-within { outline: 2px solid #262a34; } columnview row:not(:selected) cell editablelabel.editing:focus-within { outline: 2px solid #81a1c1; } columnview row:not(:selected) cell editablelabel.editing text selection { background-color: rgba(129, 161, 193, 0.6); color: transparent; } columnview row:not(:selected) cell editablelabel.editing text selection:focus-within { background-color: #81a1c1; color: #d8dee9; } /******************************************************* * Rich Lists * * Large list usually containing lots of widgets * * https://gitlab.gnome.org/GNOME/gtk/-/issues/3073 * *******************************************************/ .rich-list { /* rich lists usually containing other widgets than just labels/text */ } .rich-list > row { padding: 8px 12px; min-height: 32px; /* should be tall even when only containing a label */ } .rich-list > row > box { border-spacing: 12px; } /******************************************************** * Complex Lists * * Put padding on the cell content so event controllers * * can cover the whole area. * ********************************************************/ columnview.complex > listview > row > cell { padding: 0; } columnview.complex > listview > row > cell > * { padding: 8px 6px; } columnview.complex.data-table > listview > row > cell { padding: 0; } columnview.complex.data-table > listview > row > cell > * { padding-top: 2px; padding-bottom: 2px; } .boxed-list-separate, .boxed-list-separate:backdrop { background-color: transparent; } /********* * Menus * *********/ menubar, .menubar { background-color: #2b313c; color: #d8dee9; padding: 0px; box-shadow: inset 0 -1px rgba(0, 0, 0, 0.1); } menubar > item, .menubar > item { min-height: 16px; padding: 4px 8px; } menubar > item:hover, .menubar > item:hover { box-shadow: inset 0 -3px #81a1c1; } menubar > item:disabled, .menubar > item:disabled { color: #8e95a4; box-shadow: none; } menu, .menu, .context-menu { padding: 2px 0px; background: #2e3440; border: none; border-radius: 5px; font: initial; } .csd menu, .csd .menu, .csd .context-menu { border: none; } menu:backdrop, .menu:backdrop, .context-menu:backdrop { background-color: #3e4657; } menu menuitem, .menu menuitem, .context-menu menuitem { min-height: 17px; min-width: 40px; padding: 4px 6px; text-shadow: none; } menu menuitem:hover, .menu menuitem:hover, .context-menu menuitem:hover { color: #fefefe; background-color: #81a1c1; } menu menuitem:disabled, .menu menuitem:disabled, .context-menu menuitem:disabled { color: #8e95a4; } menu menuitem:disabled:backdrop, .menu menuitem:disabled:backdrop, .context-menu menuitem:disabled:backdrop { color: #63708b; } menu menuitem:backdrop, menu menuitem:backdrop:hover, .menu menuitem:backdrop, .menu menuitem:backdrop:hover, .context-menu menuitem:backdrop, .context-menu menuitem:backdrop:hover { color: #8e95a4; background-color: transparent; } menu menuitem arrow, .menu menuitem arrow, .context-menu menuitem arrow { min-height: 16px; min-width: 16px; } menu menuitem arrow:dir(ltr), .menu menuitem arrow:dir(ltr), .context-menu menuitem arrow:dir(ltr) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); margin-left: 10px; } menu menuitem arrow:dir(rtl), .menu menuitem arrow:dir(rtl), .context-menu menuitem arrow:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); margin-right: 10px; } menu menuitem label:dir(rtl), menu menuitem label:dir(ltr), .menu menuitem label:dir(rtl), .menu menuitem label:dir(ltr), .context-menu menuitem label:dir(rtl), .context-menu menuitem label:dir(ltr) { color: inherit; } menu > arrow, .menu > arrow, .context-menu > arrow { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; min-height: 16px; min-width: 16px; padding: 4px; background-color: #2e3440; border-radius: 0; } menu > arrow.top, .menu > arrow.top, .context-menu > arrow.top { margin-top: -6px; border-bottom: 1px solid #4b5261; -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } menu > arrow.bottom, .menu > arrow.bottom, .context-menu > arrow.bottom { margin-bottom: -6px; border-top: 1px solid #4b5261; -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } menu > arrow:hover, .menu > arrow:hover, .context-menu > arrow:hover { background-color: #4b5261; } menu > arrow:backdrop, .menu > arrow:backdrop, .context-menu > arrow:backdrop { background-color: #3e4657; } menu > arrow:disabled, .menu > arrow:disabled, .context-menu > arrow:disabled { color: transparent; background-color: transparent; border-color: transparent; } menuitem accelerator { color: alpha(currentColor,0.55); } menuitem check, menuitem radio { min-height: 16px; min-width: 16px; } menuitem check:dir(ltr), menuitem radio:dir(ltr) { margin-right: 7px; } menuitem check:dir(rtl), menuitem radio:dir(rtl) { margin-left: 7px; } .csd.popup { background-color: transparent; } /******** * Misc * ********/ .content-view { background-color: #343b49; } .content-view:hover { -gtk-icon-filter: brightness(1.2); } .content-view:backdrop { background-color: #343b49; } .osd .scale-popup button.flat { border-style: none; border-radius: 5px; } .scale-popup button:hover { background-color: rgba(216, 222, 233, 0.1); border-radius: 5px; } /************ * Assistant * *************/ assistant { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } assistant .sidebar { background-color: #3b4252; border-top: 1px solid #262a34; border-bottom-left-radius: 4px; } assistant .sidebar:backdrop { background-color: #3d4455; border-color: #292d38; } assistant.csd .sidebar { border-top-style: none; } assistant .sidebar GtkLabel, assistant .sidebar label { padding: 6px 12px; } assistant .sidebar GtkLabel.highlight, assistant .sidebar label.highlight { background-color: #61697a; } /************* * Notebooks * *************/ notebook > header { padding: 1px; border-color: #262a34; border-width: 1px; background-color: #303643; } notebook > header:backdrop { border-color: #292d38; background-color: #434c5e; } notebook > header tabs { margin: 0px; } notebook > header.top { border-bottom-style: solid; } notebook > header.top > tabs { margin-bottom: -2px; } notebook > header.top > tabs > tab:backdrop { box-shadow: none; } notebook > header.top > tabs > tab:checked { background-color: #3b4252; } notebook > header.top > tabs > tab:checked:hover { background-color: #3b4252; } notebook > header.bottom { border-top-style: solid; } notebook > header.bottom > tabs { margin-top: -2px; } notebook > header.bottom > tabs > tab:backdrop { box-shadow: none; } notebook > header.bottom > tabs > tab:checked { background-color: #3b4252; box-shadow: -1px 0 0 #262a34, 0px 1px 0 #262a34, 1px 0 0 #262a34; } notebook > header.left { border-right-style: solid; } notebook > header.left > tabs { margin-right: -2px; } notebook > header.left > tabs > tab:backdrop { box-shadow: none; } notebook > header.left > tabs > tab:checked { background-color: #3b4252; box-shadow: 0px 1px 0 #262a34, 0px -1px 0 #262a34, 0px 1px 0 #262a34; } notebook > header.right { border-left-style: solid; } notebook > header.right > tabs { margin-left: -2px; } notebook > header.right > tabs > tab:backdrop { box-shadow: none; } notebook > header.right > tabs > tab:checked { background-color: #3b4252; box-shadow: 0px 1px 0 #262a34, 0px -1px 0 #262a34, 1px 0 0 #262a34; } notebook > header.top > tabs > arrow { border-top-style: none; } notebook > header.bottom > tabs > arrow { border-bottom-style: none; } notebook > header.top > tabs > arrow, notebook > header.bottom > tabs > arrow { margin-left: -5px; margin-right: -5px; padding-left: 4px; padding-right: 4px; } notebook > header.top > tabs > arrow.down, notebook > header.bottom > tabs > arrow.down { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } notebook > header.top > tabs > arrow.up, notebook > header.bottom > tabs > arrow.up { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } notebook > header.left > tabs > arrow { border-left-style: none; } notebook > header.right > tabs > arrow { border-right-style: none; } notebook > header.left > tabs > arrow, notebook > header.right > tabs > arrow { margin-top: -5px; margin-bottom: -5px; padding-top: 4px; padding-bottom: 4px; } notebook > header.left > tabs > arrow.down, notebook > header.right > tabs > arrow.down { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow.up { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } notebook > header > tabs > arrow { min-height: 14px; min-width: 14px; border-radius: 0; } notebook > header > tabs > arrow:hover:not(:active):not(:backdrop) { background-clip: padding-box; background-image: none; background-color: rgba(255, 255, 255, 0.3); border-color: transparent; box-shadow: none; } notebook > header > tabs > arrow:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } notebook > header tab { min-height: 24px; min-width: 24px; padding: 1px 12px; outline-offset: -5px; color: #8e95a4; font-weight: normal; border-width: 1px; border-color: transparent; } notebook > header tab:hover { color: #b3bac7; } notebook > header tab:hover.reorderable-page { border-color: rgba(38, 42, 52, 0.3); background-color: rgba(67, 76, 94, 0.2); } notebook > header tab:backdrop { color: #707888; } notebook > header tab:backdrop.reorderable-page { border-color: transparent; background-color: transparent; } notebook > header tab:checked { color: #d8dee9; box-shadow: -1px 0 0 #262a34, 0px -1px 0 #262a34, 1px 0 0 #262a34; } notebook > header tab:checked.reorderable-page { border-color: rgba(38, 42, 52, 0.5); background-color: rgba(67, 76, 94, 0.5); } notebook > header tab:checked.reorderable-page:hover { background-color: rgba(67, 76, 94, 0.7); } notebook > header tab:backdrop:checked { color: #8e95a4; } notebook > header tab:backdrop:checked.reorderable-page { border-color: #292d38; background-color: #3d4455; } notebook > header tab button.flat { padding: 0; margin-top: 4px; margin-bottom: 4px; min-width: 20px; min-height: 20px; } notebook > header tab button.flat:hover { background: transparent; box-shadow: none; color: #bf616a; } notebook > header tab button.flat, notebook > header tab button.flat:backdrop { background: transparent; border: none; color: alpha(currentColor,0.3); } notebook > header tab button.flat:last-child { margin-left: 4px; margin-right: -4px; } notebook > header tab button.flat:first-child { margin-left: -4px; margin-right: 4px; } notebook > header.top tabs, notebook > header.bottom tabs { padding-left: 0px; padding-right: 0px; } notebook > header.top tabs:not(:only-child), notebook > header.bottom tabs:not(:only-child) { margin-left: 0.5px; margin-right: 0.5px; } notebook > header.top tabs:not(:only-child):first-child, notebook > header.bottom tabs:not(:only-child):first-child { margin-left: -1px; } notebook > header.top tabs:not(:only-child):last-child, notebook > header.bottom tabs:not(:only-child):last-child { margin-right: -1px; } notebook > header.top tabs tab, notebook > header.bottom tabs tab { margin-left: 0.5px; margin-right: 0.5px; } notebook > header.top tabs tab.reorderable-page, notebook > header.bottom tabs tab.reorderable-page { border-style: none solid; } notebook > header.left tabs, notebook > header.right tabs { padding-top: 4px; padding-bottom: 4px; } notebook > header.left tabs:not(:only-child), notebook > header.right tabs:not(:only-child) { margin-top: 3px; margin-bottom: 3px; } notebook > header.left tabs:not(:only-child):first-child, notebook > header.right tabs:not(:only-child):first-child { margin-top: -1px; } notebook > header.left tabs:not(:only-child):last-child, notebook > header.right tabs:not(:only-child):last-child { margin-bottom: -1px; } notebook > header.left tabs tab, notebook > header.right tabs tab { margin-top: 4px; margin-bottom: 4px; } notebook > header.left tabs tab.reorderable-page, notebook > header.right tabs tab.reorderable-page { border-style: solid none; } notebook > header.top tab { padding-bottom: 1px; } notebook > header.bottom tab { padding-top: 1px; } notebook > stack:not(:only-child) { background-color: #3b4252; } notebook > stack:not(:only-child):backdrop { background-color: #3d4455; } tabbar:backdrop .box > scrolledwindow, tabbar:backdrop .box > .start-action, tabbar:backdrop .box > .end-action { filter: opacity(1); } tabbar tabbox { background-color: #303643; padding: 0px; color: white; } tabbar tabbox > tabboxchild { margin: 0 -3px; border-radius: 0; } tabbar tabbox > tab, tabbar tabbox > tabboxchild > tab { border-radius: 0; } tabbar tabbox > tab button.flat, tabbar tabbox > tabboxchild > tab button.flat { padding: 0; margin: 4px; min-width: 20px; min-height: 20px; border-radius: 10px; } tabbar tabbox > tab button.flat:hover, tabbar tabbox > tabboxchild > tab button.flat:hover { color: #fefefe; } tabbar tabbox > tab:checked, tabbar tabbox > tab:selected, tabbar tabbox > tabboxchild > tab:checked, tabbar tabbox > tabboxchild > tab:selected { background-color: #3b4252; color: #a7b5cd; } /********* * Paned * *********/ paned > separator { min-width: 1px; min-height: 1px; -gtk-icon-source: none; border-style: none; background-color: transparent; background-image: image(#262a34); background-size: 1px 1px; } paned > separator:selected { background-image: image(#81a1c1); } paned > separator:backdrop { background-image: image(#292d38); } paned > separator.wide { min-width: 5px; min-height: 5px; background-color: #434c5e; background-image: image(#262a34), image(#262a34); background-size: 1px 1px, 1px 1px; } paned > separator.wide:backdrop { background-color: #434c5e; background-image: image(#292d38), image(#292d38); } paned.horizontal > separator { background-repeat: repeat-y; } paned.horizontal > separator:dir(ltr) { margin: 0 -8px 0 0; padding: 0 8px 0 0; background-position: left; } paned.horizontal > separator:dir(rtl) { margin: 0 0 0 -8px; padding: 0 0 0 8px; background-position: right; } paned.horizontal > separator.wide { margin: 0; padding: 0; background-repeat: repeat-y, repeat-y; background-position: left, right; } paned.vertical > separator { margin: 0 0 -8px 0; padding: 0 0 8px 0; background-repeat: repeat-x; background-position: top; } paned.vertical > separator.wide { margin: 0; padding: 0; background-repeat: repeat-x, repeat-x; background-position: bottom, top; } /************ * Pathbars * ************/ .path-bar button.text-button, .path-bar button.image-button, .path-bar button { padding-left: 4px; padding-right: 4px; } .path-bar button.text-button.image-button label { padding-left: 0; padding-right: 0; } .path-bar button.text-button.image-button label:last-child, .path-bar button label:last-child { padding-right: 8px; } .path-bar button.text-button.image-button label:first-child, .path-bar button label:first-child { padding-left: 8px; } .path-bar button image { padding-left: 4px; padding-right: 4px; } .path-bar button.slider-button { padding-left: 0; padding-right: 0; } #NautilusPathBar, .pathbar { color: #d8dee9; border-radius: 6px; text-shadow: none; box-shadow: none; border: 1px solid #1f232b; background-color: #343b48; } #NautilusPathBar .dim-label, #NautilusPathBar label.separator, #NautilusPathBar .titlebar .subtitle, .titlebar #NautilusPathBar .subtitle, #NautilusPathBar headerbar .subtitle, headerbar #NautilusPathBar .subtitle, .pathbar .dim-label, .pathbar label.separator, .pathbar .titlebar .subtitle, .titlebar .pathbar .subtitle, .pathbar headerbar .subtitle, headerbar .pathbar .subtitle { color: transparent; margin-right: -5px; } #NautilusPathBar button .horizontal > .dim-label, #NautilusPathBar button .horizontal > label.separator, #NautilusPathBar button .titlebar .horizontal > .subtitle, .titlebar #NautilusPathBar button .horizontal > .subtitle, #NautilusPathBar button headerbar .horizontal > .subtitle, headerbar #NautilusPathBar button .horizontal > .subtitle, .pathbar button .horizontal > .dim-label, .pathbar button .horizontal > label.separator, .pathbar button .titlebar .horizontal > .subtitle, .titlebar .pathbar button .horizontal > .subtitle, .pathbar button headerbar .horizontal > .subtitle, headerbar .pathbar button .horizontal > .subtitle { color: #d8dee9; padding: 5.5px 12px; margin: 0; border-right: 1px solid #1f232b; } #NautilusPathBar button:hover .dim-label, #NautilusPathBar button:hover label.separator, #NautilusPathBar button:hover .titlebar .subtitle, .titlebar #NautilusPathBar button:hover .subtitle, #NautilusPathBar button:hover headerbar .subtitle, headerbar #NautilusPathBar button:hover .subtitle, #NautilusPathBar button:focus .dim-label, #NautilusPathBar button:focus label.separator, #NautilusPathBar button:focus .titlebar .subtitle, .titlebar #NautilusPathBar button:focus .subtitle, #NautilusPathBar button:focus headerbar .subtitle, headerbar #NautilusPathBar button:focus .subtitle, .pathbar button:hover .dim-label, .pathbar button:hover label.separator, .pathbar button:hover .titlebar .subtitle, .titlebar .pathbar button:hover .subtitle, .pathbar button:hover headerbar .subtitle, headerbar .pathbar button:hover .subtitle, .pathbar button:focus .dim-label, .pathbar button:focus label.separator, .pathbar button:focus .titlebar .subtitle, .titlebar .pathbar button:focus .subtitle, .pathbar button:focus headerbar .subtitle, headerbar .pathbar button:focus .subtitle { color: #fff; text-shadow: none; background-color: rgba(129, 161, 193, 0.8); border-color: #1f232b; } #NautilusPathBar button > .horizontal > image.dim-label, #NautilusPathBar .titlebar button > .horizontal > image.subtitle, .titlebar #NautilusPathBar button > .horizontal > image.subtitle, #NautilusPathBar headerbar button > .horizontal > image.subtitle, headerbar #NautilusPathBar button > .horizontal > image.subtitle, .pathbar button > .horizontal > image.dim-label, .pathbar .titlebar button > .horizontal > image.subtitle, .titlebar .pathbar button > .horizontal > image.subtitle, .pathbar headerbar button > .horizontal > image.subtitle, headerbar .pathbar button > .horizontal > image.subtitle { padding: 3px 0px 3px 12px; border-right: none; margin-right: -6px; border-radius: 6px 0px 0px 6px; } #NautilusPathBar button, .pathbar button { background: transparent; border: none; margin: 0; padding: 0; } #NautilusPathBar .flat.popup, .pathbar .flat.popup { margin: 0; } #NautilusPathBar .flat.popup button, .pathbar .flat.popup button { padding: 4px 6px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; } #NautilusPathBar .flat.popup button:hover, #NautilusPathBar .flat.popup button:active, #NautilusPathBar .flat.popup button:checked, .pathbar .flat.popup button:hover, .pathbar .flat.popup button:active, .pathbar .flat.popup button:checked { color: #d8dee9; outline-color: rgba(216, 222, 233, 0.3); background-color: #81a1c1; text-shadow: none; } #NautilusPathBar .current-dir label, .pathbar .current-dir label { padding: 5.5px 12px; } #NautilusPathBar .current-dir label, #NautilusPathBar .current-dir image, .pathbar .current-dir label, .pathbar .current-dir image { color: #fff; outline-color: rgba(255, 255, 255, 0.3); background-color: rgba(129, 161, 193, 0.7); text-shadow: none; } #NautilusPathBar button.current-dir:only-child image, .pathbar button.current-dir:only-child image { margin-right: -6px; padding: 0px 0px 0px 12px; border-radius: 6px 0px 0px 6px; } #NautilusQueryEditor { background: #2f3642; color: #d8dee9; caret-color: #d8dee9; border-color: #1f232b; } #NautilusQueryEditor:focus-within { border-color: #5f88b0; box-shadow: 0px 0px 1px 1px #81a1c1 inset; } #NautilusQueryEditor #NautilusQueryEditorTag > button { margin: 0; } #NautilusQueryEditor > text { background-color: transparent; } #NautilusQueryEditor image { color: #d8dee9; } #NautilusQueryEditor > menubutton > button { margin-right: -7px; -gtk-icon-size: 12px; border: none; background-color: transparent; } #NautilusQueryEditor > menubutton > button:hover image, #NautilusQueryEditor > menubutton > button:active image, #NautilusQueryEditor > menubutton > button:focus image, #NautilusQueryEditor > menubutton > button:checked image { color: #fefefe; } #NautilusQueryEditor > text, #NautilusQueryEditor > image { margin: 0; } /*************** * Popovers * ***************/ popover.background { background-color: transparent; font: initial; } popover.background > arrow, popover.background > contents { background-color: #2e3440; background-clip: padding-box; border: 1px solid #262a34; box-shadow: 0 4px 6px #262a34; color: #d8dee9; } popover.background:backdrop { background-color: transparent; box-shadow: none; } popover.background > contents { padding: 8px; border-radius: 5px; } popover.background > contents > list, popover.background > contents > .view, popover.background > contents > iconview, popover.background > contents > toolbar { border-style: none; background-color: transparent; } popover.background > contents separator { background-color: #2f3441; margin: 3px; } popover.background > contents list separator { margin: 0; } .osd popover.background, popover.background.touch-selection, popover.background.magnifier { background-color: transparent; } .osd popover.background > arrow, .osd popover.background > contents, popover.background.touch-selection > arrow, popover.background.touch-selection > contents, popover.background.magnifier > arrow, popover.background.magnifier > contents { border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: none; } magnifier { background-color: #3b4252; } /********************** * Popover Base Menus * **********************/ popover.menu { padding: 0; } popover.menu box.inline-buttons { padding: 0 12px; } popover.menu box.inline-buttons button.image-button.model { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; min-height: 30px; min-width: 30px; padding: 0; border: none; outline: none; transition: none; } popover.menu box.inline-buttons button.image-button.model:selected { background: image(#3f4758); } popover.menu box.circular-buttons { padding: 12px 12px 6px; } popover.menu box.circular-buttons button.circular.image-button.model { padding: 11px; } popover.menu box.circular-buttons button.circular.image-button.model:focus { background-color: #3f4758; border-color: #3f4758; } popover.menu > arrow, popover.menu.background > contents { background-color: #2e3440; color: #d8dee9; padding: 5px; } popover.menu > arrow .view, popover.menu > arrow iconview, popover.menu.background > contents .view, popover.menu.background > contents iconview { background-color: transparent; } popover.menu > arrow .view row, popover.menu > arrow iconview row, popover.menu.background > contents .view row, popover.menu.background > contents iconview row { margin: 0; } popover.menu.background separator { margin: 6px 0; } popover.menu accelerator { color: alpha(currentColor,0.55); } popover.menu accelerator:dir(ltr) { margin-left: 12px; } popover.menu accelerator:dir(rtl) { margin-right: 12px; } popover.menu check:hover, popover.menu check:active, popover.menu radio:hover, popover.menu radio:active { background-color: transparent; } popover.menu radio { border-color: #262a34; } popover.menu radio:active { border-color: rgba(38, 42, 52, 0.5); } popover.menu arrow.left, popover.menu radio.left, popover.menu check.left { margin-left: -2px; margin-right: 6px; } popover.menu arrow.right, popover.menu radio.right, popover.menu check.right { margin-left: 6px; margin-right: -2px; } popover.menu modelbutton, popover.menu.background > contents .view row, popover.menu.background > contents iconview row { min-height: 30px; min-width: 40px; padding: 0 12px; border-radius: 5px; } popover.menu modelbutton:selected, popover.menu.background > contents .view row:selected, popover.menu.background > contents iconview row:selected { background-color: #3f4758; } popover.menu modelbutton:selected, popover.menu modelbutton:selected label, popover.menu.background > contents .view row:selected, popover.menu.background > contents iconview row:selected, popover.menu.background > contents .view row:selected label, popover.menu.background > contents iconview row:selected label { color: #d8dee9; } popover.menu modelbutton:selected:active, popover.menu.background > contents .view row:selected:active, popover.menu.background > contents iconview row:selected:active { background-color: #2a2f3a; } popover.menu label.title { font-weight: bold; padding: 4px 32px; } /***************** * Progress bars * *****************/ progressbar { font-size: smaller; color: rgba(216, 222, 233, 0.4); } progressbar.horizontal trough, progressbar.horizontal progress { min-height: 6px; } progressbar.vertical trough, progressbar.vertical progress { min-width: 6px; } progressbar.horizontal progress { margin: 0; } progressbar.vertical progress { margin: 0; } progressbar:backdrop { box-shadow: none; transition: 200ms ease-out; } progressbar.osd { min-width: 3px; min-height: 3px; background-color: transparent; } progressbar.osd trough { border-style: none; border-radius: 0; background-color: transparent; box-shadow: none; } progressbar.osd progress { border-style: none; border-radius: 0; } /************ * GtkScale * ************/ progressbar trough, scale trough, scale fill { background-color: rgba(255, 255, 255, 0.14); border: none; border-radius: 3px; margin: 0; } progressbar trough:disabled, scale trough:disabled, scale fill:disabled { background-color: rgba(255, 255, 255, 0.06); } progressbar trough:backdrop, progressbar:backdrop trough, scale trough:backdrop, scale fill:backdrop { background-color: rgba(255, 255, 255, 0.06); transition: 200ms ease-out; } progressbar trough:backdrop:disabled, progressbar:backdrop trough:disabled, scale trough:backdrop:disabled, scale fill:backdrop:disabled { background-color: rgba(255, 255, 255, 0.06); } progressbar progress, scale highlight { border: none; background-color: #81a1c1; border-radius: 3px; margin: 0; } progressbar progress:disabled, scale highlight:disabled { border: none; background-color: rgba(255, 255, 255, 0.14); } progressbar progress:backdrop, progressbar:backdrop progress, scale highlight:backdrop, progressbar progress:active:backdrop, progressbar:backdrop progress:active, scale highlight:active:backdrop { border-color: #92aec9; background-color: #92aec9; } progressbar progress:backdrop:disabled, progressbar:backdrop progress:disabled, scale highlight:backdrop:disabled, progressbar progress:active:backdrop:disabled, progressbar:backdrop progress:active:disabled, scale highlight:active:backdrop:disabled { background-color: rgba(255, 255, 255, 0.06); } scale { min-height: 16px; min-width: 16px; padding: 8px; } scale.horizontal trough, scale.horizontal progress { min-height: 6px; } scale.vertical trough, scale.vertical progress { min-width: 6px; } scale slider { min-height: 16px; min-width: 16px; margin: -7px; background-color: #3b4252; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0px 0px 1px 1px rgba(0, 0, 0, 0.1); border-radius: 12px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-property: background, border, box-shadow; } scale slider:active { background-color: #81a1c1; } scale slider:active:disabled { background-color: #404859; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0px 0px 1px 1px rgba(0, 0, 0, 0.05); } scale.fine-tune.horizontal { padding-top: 9px; padding-bottom: 9px; min-height: 16px; } scale.fine-tune.vertical { padding-left: 9px; padding-right: 9px; min-width: 16px; } scale.fine-tune slider { margin: -6px; } scale.fine-tune fill, scale.fine-tune highlight, scale.fine-tune trough { border-radius: 5px; } scale trough { outline-offset: 2px; outline-color: transparent; } scale fill:backdrop, scale fill { background-color: #262a34; } scale fill:disabled:backdrop, scale fill:disabled { border-color: transparent; background-color: transparent; } .osd scale fill { background-color: #4d525b; } .osd scale fill:disabled:backdrop, .osd scale fill:disabled { border-color: transparent; background-color: transparent; } scale slider { border-color: #59647b; border: none; border-radius: 12px; background-color: #59647b; } scale slider:active { border-color: #5f88b0; } scale slider:disabled { background-color: #4a5367; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0px 0px 1px 1px rgba(0, 0, 0, 0.1); } scale slider:backdrop, scale slider:backdrop:disabled { transition: 200ms ease-out; background-color: #4a5367; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0px 0px 1px 1px rgba(0, 0, 0, 0.1); } row:selected scale slider:disabled, row:selected scale slider { border-color: #5f88b0; } scale value { color: alpha(currentColor,0.4); } scale.horizontal > marks { color: alpha(currentColor,0.55); } scale.horizontal > marks.top { margin-bottom: 6px; } scale.horizontal > marks.bottom { margin-top: 6px; } scale.horizontal > marks indicator { background-color: currentColor; min-height: 6px; min-width: 1px; } scale.horizontal > value.left { margin-right: 9px; } scale.horizontal > value.right { margin-left: 9px; } scale.horizontal.fine-tune > marks.top { margin-top: 3px; } scale.horizontal.fine-tune > marks.bottom { margin-bottom: 3px; } scale.horizontal.fine-tune > marks indicator { min-height: 3px; } scale.vertical > marks { color: alpha(currentColor,0.55); } scale.vertical > marks.top { margin-right: 6px; } scale.vertical > marks.bottom { margin-left: 6px; } scale.vertical > marks indicator { background-color: currentColor; min-height: 1px; min-width: 6px; } scale.vertical > value.top { margin-bottom: 9px; } scale.vertical > value.bottom { margin-top: 9px; } scale.vertical.fine-tune > marks.top { margin-left: 3px; } scale.vertical.fine-tune > marks.bottom { margin-right: 3px; } scale.vertical.fine-tune > marks indicator { min-height: 3px; } scale.horizontal indicator { min-height: 6px; min-width: 1px; } scale.horizontal.fine-tune indicator { min-height: 3px; } scale.vertical indicator { min-height: 1px; min-width: 6px; } scale.vertical.fine-tune indicator { min-width: 3px; } scale.horizontal.marks-before:not(.marks-after) slider { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.horizontal.marks-before:not(.marks-after) slider:hover { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.horizontal.marks-before:not(.marks-after) slider:active { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.horizontal.marks-before:not(.marks-after) slider:disabled { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.horizontal.marks-before:not(.marks-after) slider:backdrop { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.horizontal.marks-before:not(.marks-after) slider:backdrop:disabled { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.horizontal.marks-after:not(.marks-before) slider { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.horizontal.marks-after:not(.marks-before) slider:hover { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.horizontal.marks-after:not(.marks-before) slider:active { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.horizontal.marks-after:not(.marks-before) slider:disabled { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.horizontal.marks-after:not(.marks-before) slider:backdrop { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.horizontal.marks-after:not(.marks-before) slider:backdrop:disabled { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.vertical.marks-before:not(.marks-after) slider { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.vertical.marks-before:not(.marks-after) slider:hover { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.vertical.marks-before:not(.marks-after) slider:active { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.vertical.marks-before:not(.marks-after) slider:disabled { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.vertical.marks-before:not(.marks-after) slider:backdrop { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.vertical.marks-before:not(.marks-after) slider:backdrop:disabled { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.vertical.marks-after:not(.marks-before) slider { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.vertical.marks-after:not(.marks-before) slider:hover { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.vertical.marks-after:not(.marks-before) slider:active { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.vertical.marks-after:not(.marks-before) slider:disabled { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.vertical.marks-after:not(.marks-before) slider:backdrop { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.vertical.marks-after:not(.marks-before) slider:backdrop:disabled { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #59647b; box-shadow: inset 0 1px #2e3440, 0px 0px 1px 1px #2e3440; } scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.color { min-height: 0; min-width: 0; } scale.color trough { background-image: image(#262a34); background-repeat: no-repeat; } scale.color.horizontal { padding: 0 0 15px 0; } scale.color.horizontal trough { padding-bottom: 4px; background-position: 0 -3px; border-top-left-radius: 0; border-top-right-radius: 0; } scale.color.horizontal slider:dir(ltr):hover, scale.color.horizontal slider:dir(ltr):backdrop, scale.color.horizontal slider:dir(ltr):disabled, scale.color.horizontal slider:dir(ltr):backdrop:disabled, scale.color.horizontal slider:dir(ltr), scale.color.horizontal slider:dir(rtl):hover, scale.color.horizontal slider:dir(rtl):backdrop, scale.color.horizontal slider:dir(rtl):disabled, scale.color.horizontal slider:dir(rtl):backdrop:disabled, scale.color.horizontal slider:dir(rtl) { margin-bottom: -15px; margin-top: 6px; } scale.color.vertical:dir(ltr) { padding: 0 0 0 15px; } scale.color.vertical:dir(ltr) trough { padding-left: 4px; background-position: 3px 0; border-bottom-right-radius: 0; border-top-right-radius: 0; } scale.color.vertical:dir(ltr) slider:hover, scale.color.vertical:dir(ltr) slider:backdrop, scale.color.vertical:dir(ltr) slider:disabled, scale.color.vertical:dir(ltr) slider:backdrop:disabled, scale.color.vertical:dir(ltr) slider { margin-left: -15px; margin-right: 6px; } scale.color.vertical:dir(rtl) { padding: 0 15px 0 0; } scale.color.vertical:dir(rtl) trough { padding-right: 4px; background-position: -3px 0; border-bottom-left-radius: 0; border-top-left-radius: 0; } scale.color.vertical:dir(rtl) slider:hover, scale.color.vertical:dir(rtl) slider:backdrop, scale.color.vertical:dir(rtl) slider:disabled, scale.color.vertical:dir(rtl) slider:backdrop:disabled, scale.color.vertical:dir(rtl) slider { margin-right: -15px; margin-left: 6px; } scale.color.fine-tune.horizontal:dir(ltr), scale.color.fine-tune.horizontal:dir(rtl) { padding: 0 0 12px 0; } scale.color.fine-tune.horizontal:dir(ltr) trough, scale.color.fine-tune.horizontal:dir(rtl) trough { padding-bottom: 7px; background-position: 0 -6px; } scale.color.fine-tune.horizontal:dir(ltr) slider, scale.color.fine-tune.horizontal:dir(rtl) slider { margin-bottom: -15px; margin-top: 6px; } scale.color.fine-tune.vertical:dir(ltr) { padding: 0 0 0 12px; } scale.color.fine-tune.vertical:dir(ltr) trough { padding-left: 7px; background-position: 6px 0; } scale.color.fine-tune.vertical:dir(ltr) slider { margin-left: -15px; margin-right: 6px; } scale.color.fine-tune.vertical:dir(rtl) { padding: 0 12px 0 0; } scale.color.fine-tune.vertical:dir(rtl) trough { padding-right: 7px; background-position: -6px 0; } scale.color.fine-tune.vertical:dir(rtl) slider { margin-right: -15px; margin-left: 6px; } /************** * Scrollbars * **************/ scrollbar { background-color: #3f4758; transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } scrollbar.top { border-bottom: 1px solid #262a34; } scrollbar.bottom { border-top: 1px solid #262a34; } scrollbar.left { border-right: 1px solid #262a34; } scrollbar.right { border-left: 1px solid #262a34; } scrollbar:backdrop { background-color: #3d4555; border-color: #292d38; transition: 200ms ease-out; } scrollbar slider { min-width: 6px; min-height: 6px; margin: -1px; border: 4px solid transparent; border-radius: 8px; background-clip: padding-box; background-color: #9ca4b1; } scrollbar slider:hover { background-color: #bac1cd; } scrollbar slider:hover:active { background-color: #a3bbd2; } scrollbar slider:backdrop { background-color: #61697a; } scrollbar slider:disabled { background-color: transparent; } scrollbar.fine-tune slider { min-width: 4px; min-height: 4px; } scrollbar.fine-tune.horizontal slider { border-width: 5px 4px; } scrollbar.fine-tune.vertical slider { border-width: 4px 5px; } scrollbar.overlay-indicator:not(.dragging):not(.hovering) { border-color: transparent; opacity: 0.4; background-color: transparent; } scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider { margin: 0; min-width: 3px; min-height: 3px; background-color: #d8dee9; border: 1px solid black; } scrollbar.overlay-indicator:not(.dragging):not(.hovering) button { min-width: 5px; min-height: 5px; background-color: #d8dee9; background-clip: padding-box; border-radius: 100%; border: 1px solid black; -gtk-icon-source: none; } scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider { margin: 0 2px; min-width: 40px; } scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal button { margin: 1px 2px; min-width: 5px; } scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider { margin: 2px 0; min-height: 40px; } scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical button { margin: 2px 1px; min-height: 5px; } scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering { opacity: 0.8; } scrollbar.horizontal slider { min-width: 40px; } scrollbar.vertical slider { min-height: 40px; } scrollbar button { padding: 0; min-width: 12px; min-height: 12px; border-style: none; border-radius: 0; transition-property: min-height, min-width, color; border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #9ca4b1; } scrollbar button:hover { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #bac1cd; } scrollbar button:active, scrollbar button:checked { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #a3bbd2; } scrollbar button:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: rgba(156, 164, 177, 0.2); } scrollbar button:backdrop { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #61697a; } scrollbar button:backdrop:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: rgba(97, 105, 122, 0.2); } scrollbar.vertical button.down { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } scrollbar.vertical button.up { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } scrollbar.horizontal button.down { -gtk-icon-source: -gtk-icontheme("pan-right-symbolic"); } scrollbar.horizontal button.up { -gtk-icon-source: -gtk-icontheme("pan-left-symbolic"); } treeview ~ scrollbar.vertical { border-top: 1px solid #262a34; margin-top: -1px; } /*********** * Sidebar * ***********/ .sidebar { border-style: none; border-width: 0; background-color: #3f4758; } .sidebar .frame { border: none; } stacksidebar.sidebar:dir(ltr) list, stacksidebar.sidebar.left list, stacksidebar.sidebar.left:dir(rtl) list, .sidebar:dir(ltr), .sidebar.left, .sidebar.left:dir(rtl) { border-right: none; border-left-style: none; } stacksidebar.sidebar:dir(rtl) list .sidebar:dir(rtl), stacksidebar.sidebar.right list .sidebar:dir(rtl), .sidebar.right { border-left: 1px solid #262a34; border-right-style: none; } .sidebar:backdrop { background-color: #40485a; border-color: #292d38; } .sidebar row { padding: 8px 12px; transition: all .12s ease-in; } .sidebar row label { color: #d8dee9; } .sidebar row:selected { color: #fefefe; } .sidebar row:selected:backdrop { color: rgba(254, 254, 254, 0.5); background: rgba(129, 161, 193, 0.6); } .sidebar row:selected:backdrop label { color: #fefefe; } .sidebar row:selected label { color: #fefefe; } .sidebar.source-list { background: #2e3440; color: #d8dee9; padding: 4px 0px; } .sidebar.source-list.view, iconview.sidebar.source-list { transition: all .12s ease-in; } .sidebar.source-list.view:selected, iconview.sidebar.source-list:selected { padding-left: 4px; background: #81a1c1; color: #fefefe; } .sidebar.source-list.view:selected:active, iconview.sidebar.source-list:selected:active { box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); } .sidebar.source-list.view:selected.has-open-popup, iconview.sidebar.source-list:selected.has-open-popup, .sidebar.source-list.view:selected:hover, iconview.sidebar.source-list:selected:hover { background-color: rgba(129, 161, 193, 0.9); } .sidebar.source-list.view:selected:backdrop, iconview.sidebar.source-list:selected:backdrop { background-color: rgba(129, 161, 193, 0.6); } .sidebar.source-list.view:hover, iconview.sidebar.source-list:hover, .sidebar.source-list.view iconview.source-list:hover, iconview.sidebar.source-list iconview.source-list:hover { background-color: rgba(46, 52, 64, 0.95); } paned .sidebar.left, paned .sidebar.right, paned .sidebar.left:dir(rtl), paned .sidebar:dir(rtl), paned .sidebar:dir(ltr), paned .sidebar { border-style: none; border-color: #262a34; } stacksidebar row { padding: 10px 4px; } stacksidebar row > label { padding-left: 6px; padding-right: 6px; } stacksidebar row.needs-attention > label { background-size: 6px 6px, 0 0; } /*******************************************************************/ /* PLACESSIDEBAR */ /*******************************************************************/ /*--*/ placessidebar { background-color: transparent; background-image: linear-gradient(to right, #232831 40px, #2e3440 35px, #2e3440 36px, #2e3440 36px, #2e3440 99%, #2e3440 100%); } placessidebar row { padding: 1px 11px; } placessidebar row.sidebar-row { margin: 0; border-radius: 0; color: #d8dee9; } placessidebar row.sidebar-row label { color: #d8dee9; padding-left: 30px; } placessidebar row.sidebar-row:hover { transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); background-color: transparent; /*rgba(65,67,75,0.4); */ background-image: linear-gradient(to right, rgba(65, 67, 75, 0) 40px, rgba(0, 0, 0, 0.12) 40px, rgba(0, 0, 0, 0.12) 97%); } placessidebar row.sidebar-row:active:hover { background-color: rgba(0, 0, 0, 0.23); } placessidebar row.sidebar-row:selected { color: #fff; background-color: transparent; background-image: linear-gradient(to right, #81a1c1 40px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 97%); } placessidebar row.sidebar-row:selected label { color: #81a1c1; } placessidebar row.sidebar-row:selected:hover { color: #ffffff; background-color: rgba(0, 0, 0, 0.24); } placessidebar row.sidebar-row:selected:hover .sidebar-icon { color: #ffffff; } placessidebar row.sidebar-row:selected:backdrop { color: rgba(0, 0, 0, 0.54); background-color: transparent; background-image: linear-gradient(to right, #81a1c1 40px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 97%); } placessidebar row.sidebar-row:selected:backdrop .sidebar-icon { -gtk-icon-shadow: none; color: inherit; } placessidebar row.sidebar-row:selected .sidebar-icon { -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.8); color: inherit; } placessidebar row.sidebar-row.sidebar-new-bookmark-row, placessidebar row.sidebar-row.sidebar-new-bookmark-row label, placessidebar row.sidebar-row.sidebar-new-bookmark-row .sidebar-icon { color: #ebcb8b; } placessidebar row.sidebar-row:drop(active):not(:disabled) { box-shadow: inset 0 1px #a3be8c, inset 0 -1px #a3be8c; } placessidebar row.sidebar-row:drop(active):not(:disabled), placessidebar row.sidebar-row:drop(active):not(:disabled) label, placessidebar row.sidebar-row:drop(active):not(:disabled) image { color: #a3be8c; } placessidebar row.sidebar-row:drop(active):not(:disabled):selected { background: #a3be8c; } placessidebar row.sidebar-row:drop(active):not(:disabled):selected, placessidebar row.sidebar-row:drop(active):not(:disabled):selected label, placessidebar row.sidebar-row:drop(active):not(:disabled):selected image { color: #fefefe; } placessidebar list { background-color: transparent; } placessidebar list:backdrop { background-color: transparent; } .sidebar-pane, .sidebar-pane .bottom-bar { background-color: #2e3440; } .sidebar-pane .bottom-bar button { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } .sidebar-pane .bottom-bar button label { color: #d8dee9; } .sidebar-pane .bottom-bar button .view, .sidebar-pane .bottom-bar button iconview { background-color: transparent; } /***************** * GtkSpinButton * *****************/ spinbutton { font-feature-settings: "tnum"; } spinbutton:not(.vertical) { padding: 0; border-spacing: 0; /* :not here just to bump specificity above that of the list button styling */ } spinbutton:not(.vertical) > text, .osd spinbutton:not(.vertical) > text { min-width: 28px; margin: 0; background: none; background-color: transparent; border: none; border-radius: 0; box-shadow: none; padding: 6px; } spinbutton:not(.vertical) > text:backdrop:disabled, .osd spinbutton:not(.vertical) > text:backdrop:disabled { background-color: transparent; } spinbutton:not(.vertical) > button.image-button.up:not(.flat), spinbutton:not(.vertical) > button.image-button.down:not(.flat) { min-height: 16px; margin: 0; padding-bottom: 0; padding-top: 0; color: #c8ceda; background-image: none; border-style: none none none solid; border-color: rgba(38, 42, 52, 0.3); border-radius: 0; box-shadow: none; background-color: transparent; } spinbutton:not(.vertical) > button.image-button.up:not(.flat):dir(rtl), spinbutton:not(.vertical) > button.image-button.down:not(.flat):dir(rtl) { border-style: none solid none none; } spinbutton:not(.vertical) > button.image-button.up:not(.flat):hover, spinbutton:not(.vertical) > button.image-button.down:not(.flat):hover { color: #d8dee9; background-color: #38404f; } spinbutton:not(.vertical) > button.image-button.up:not(.flat):disabled, spinbutton:not(.vertical) > button.image-button.down:not(.flat):disabled { color: rgba(142, 149, 164, 0.3); background-color: transparent; } spinbutton:not(.vertical) > button.image-button.up:not(.flat):active, spinbutton:not(.vertical) > button.image-button.down:not(.flat):active { background-color: rgba(0, 0, 0, 0.1); box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2); } spinbutton:not(.vertical) > button.image-button.up:not(.flat):dir(ltr):last-child, spinbutton:not(.vertical) > button.image-button.down:not(.flat):dir(ltr):last-child { border-radius: 0 6px 6px 0; } spinbutton:not(.vertical) > button.image-button.up:not(.flat):dir(rtl):first-child, spinbutton:not(.vertical) > button.image-button.down:not(.flat):dir(rtl):first-child { border-radius: 6px 0 0 6px; } .osd spinbutton:not(.vertical) > button.image-button.up:not(.flat), .osd spinbutton:not(.vertical) > button.image-button.down:not(.flat) { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #d8dee9; border-style: none none none solid; border-color: rgba(31, 35, 43, 0.7); border-radius: 0; box-shadow: none; -gtk-icon-shadow: 0 1px black; } .osd spinbutton:not(.vertical) > button.image-button.up:not(.flat):dir(rtl), .osd spinbutton:not(.vertical) > button.image-button.down:not(.flat):dir(rtl) { border-style: none solid none none; } .osd spinbutton:not(.vertical) > button.image-button.up:not(.flat):hover, .osd spinbutton:not(.vertical) > button.image-button.down:not(.flat):hover { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #d8dee9; border-color: rgba(31, 35, 43, 0.5); background-color: rgba(18, 21, 25, 0.93); -gtk-icon-shadow: 0 1px black; box-shadow: none; } .osd spinbutton:not(.vertical) > button.image-button.up:not(.flat):disabled, .osd spinbutton:not(.vertical) > button.image-button.down:not(.flat):disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #808690; border-color: rgba(31, 35, 43, 0.5); -gtk-icon-shadow: none; box-shadow: none; } .osd spinbutton:not(.vertical) > button.image-button.up:not(.flat):dir(ltr):last-child, .osd spinbutton:not(.vertical) > button.image-button.down:not(.flat):dir(ltr):last-child { border-radius: 0 6px 6px 0; } .osd spinbutton:not(.vertical) > button.image-button.up:not(.flat):dir(rtl):first-child, .osd spinbutton:not(.vertical) > button.image-button.down:not(.flat):dir(rtl):first-child { border-radius: 6px 0 0 6px; } spinbutton.vertical:disabled { color: #8e95a4; } spinbutton.vertical:drop(active) { border-color: transparent; box-shadow: none; } spinbutton.vertical > text { min-height: 32px; min-width: 32px; padding: 0; border-radius: 0; } spinbutton.vertical > text > selection { background-color: rgba(129, 161, 193, 0.6); color: transparent; } spinbutton.vertical > text > selection:focus-within { color: #d8dee9; } spinbutton.vertical > button { min-height: 32px; min-width: 32px; padding: 0; } spinbutton.vertical > button.up { border-bottom-style: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } spinbutton.vertical > button.down { border-top-style: none; border-top-left-radius: 0; border-top-right-radius: 0; } .osd spinbutton.vertical > button:first-child { color: #d8dee9; border-color: #1f232b; background-color: rgba(40, 45, 55, 0.93); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } .osd spinbutton.vertical > button:first-child:hover { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(65, 74, 91, 0.93), rgba(65, 74, 91, 0.93)); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } .osd spinbutton.vertical > button:first-child:active { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(52, 59, 73, 0.93), rgba(52, 59, 73, 0.93)); background-clip: padding-box; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(216, 222, 233, 0.3); } .osd spinbutton.vertical > button:first-child:disabled { color: #808690; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(58, 63, 73, 0.5), rgba(58, 63, 73, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } treeview spinbutton:not(.vertical) { min-height: 0; border-style: none; border-radius: 0; } treeview spinbutton:not(.vertical) > text { min-height: 0; padding: 1px 2px; } /*********** * Spinner * ***********/ menu spinner { color: #81a1c1; } /********************* * Spinner Animation * *********************/ @keyframes spin { to { -gtk-icon-transform: rotate(1turn); } } spinner { background: none; opacity: 0; -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); } spinner:checked { opacity: 1; animation: spin 1s linear infinite; } spinner:checked:disabled { opacity: 0.5; } /********** * Switch * **********/ switch { font-size: 1px; min-width: 40px; min-height: 25px; background-color: transparent; background-size: 40px 24px; background-repeat: no-repeat; background-position: center center; background-image: -gtk-scaled(url("../assets/switch-off.svg"), url("../assets/switch-off.svg")); } switch:disabled { background-image: -gtk-scaled(url("../assets/switch-insensitive.svg"), url("../assets/switch-insensitive.svg")); } switch:disabled slider { background-image: -gtk-scaled(url("../assets/switch-slider-insensitive.svg"), url("../assets/switch-slider-insensitive@2.png")); } switch, switch slider { outline-color: transparent; color: transparent; border: none; box-shadow: none; } switch:checked { background-image: -gtk-scaled(url("../assets/switch-on.svg"), url("../assets/switch-on.svg")); } switch:checked slider { background-image: -gtk-scaled(url("../assets/switch-slider-on.svg"), url("../assets/switch-slider-on@2.png")); } switch:checked:disabled { background-image: -gtk-scaled(url("../assets/switch-on-insensitive.svg"), url("../assets/switch-on-insensitive.svg")); } switch:checked:disabled slider { background-image: -gtk-scaled(url("../assets/switch-slider-on-insensitive.svg"), url("../assets/switch-slider-on-insensitive@2.png")); } switch slider { min-width: 1px; min-height: 1px; background-repeat: no-repeat; background-position: left center; background-color: transparent; background-image: -gtk-scaled(url("../assets/switch-slider-off.svg"), url("../assets/switch-slider-off@2.png")); } row:selected switch:checked { background-image: -gtk-scaled(url("../assets/switch-off.svg"), url("../assets/switch-off.svg")); } row:selected switch:checked slider { background-image: -gtk-scaled(url("../assets/switch-slider-on-selected.svg"), url("../assets/switch-slider-on-selected@2.png")); } switch trough:active, switch trough:checked { background-color: #81a1c1; } switch trough:active:backdrop, switch trough:checked:backdrop { background-color: rgba(129, 161, 193, 0.6); } /************ * Toolbars * ************/ toolbar, .inline-toolbar, searchbar > revealer > box { padding: 4px; background-color: #434c5e; } toolbar { padding: 4px 3px 3px 4px; } .osd toolbar { background-color: transparent; } toolbar.osd { padding: 13px; border: none; border-radius: 5px; background-color: rgba(40, 45, 55, 0.93); } toolbar.osd.left, toolbar.osd.right, toolbar.osd.top, toolbar.osd.bottom { border-radius: 0; } toolbar.horizontal separator { margin: 0 7px 1px 6px; } toolbar.vertical separator { margin: 6px 1px 7px 0; } toolbar:not(.inline-toolbar):not(.osd) switch, toolbar:not(.inline-toolbar):not(.osd) scale, toolbar:not(.inline-toolbar):not(.osd) entry, toolbar:not(.inline-toolbar):not(.osd) spinbutton, toolbar:not(.inline-toolbar):not(.osd) button { margin-right: 1px; margin-bottom: 1px; } .inline-toolbar { padding: 3px; border-width: 0 1px 1px; border-radius: 0 0 5px 5px; } searchbar > revealer > box { border-width: 0 0 1px; padding: 5px; } .inline-toolbar, searchbar > revealer > box { border-style: solid; border-color: #262a34; background-color: #3a4251; } .inline-toolbar:backdrop, searchbar > revealer > box:backdrop { border-color: #292d38; background-color: #3a4151; box-shadow: none; transition: 200ms ease-out; } searchbar { background: #3b4252; } /************ * Tooltips * ************/ tooltip { padding: 4px; /* not working */ border-radius: 5px; box-shadow: none; text-shadow: 0 1px black; } tooltip.background { background-color: rgba(40, 45, 55, 0.93); background-clip: padding-box; border: 1px solid #1f232b; } tooltip decoration { background-color: transparent; } tooltip * { padding: 4px; background-color: transparent; color: white; } columnview.view, treeview.view { border-left-color: #262a34; border-top-color: #262a34; } columnview.view:selected:focus, columnview.view:selected, treeview.view:selected:focus, treeview.view:selected { border-radius: 0; outline-color: #bf616a; } columnview.view:disabled, treeview.view:disabled { color: #8e95a4; } columnview.view:disabled:selected, treeview.view:disabled:selected { color: #b3c6d9; } columnview.view:disabled:selected:backdrop, treeview.view:disabled:selected:backdrop { color: rgba(145, 173, 201, 0.85); } columnview.view.separator, treeview.view.separator { min-height: 2px; color: #262a34; } columnview.view:backdrop, treeview.view:backdrop { border-left-color: #4c5362; border-top: #4c5362; } columnview.view:drop(active), treeview.view:drop(active) { box-shadow: none; } columnview.view > dndtarget:drop(active), treeview.view > dndtarget:drop(active) { border-style: solid none; border-width: 1px; border-color: #5f88b0; } columnview.view > dndtarget:drop(active).after, treeview.view > dndtarget:drop(active).after { border-top-style: none; } columnview.view > dndtarget:drop(active).before, treeview.view > dndtarget:drop(active).before { border-bottom-style: none; } columnview.view.expander, treeview.view.expander { min-width: 16px; min-height: 16px; -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); color: #a9afbc; } columnview.view.expander:dir(rtl), treeview.view.expander:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); } columnview.view.expander:hover, treeview.view.expander:hover { color: #d8dee9; } columnview.view.expander:selected, treeview.view.expander:selected { color: #d9e2ec; } columnview.view.expander:selected:hover, treeview.view.expander:selected:hover { color: #fefefe; } columnview.view.expander:checked, treeview.view.expander:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } columnview.view.progressbar, treeview.view.progressbar { border: 1px solid #5f88b0; border-radius: 4px; background-color: #81a1c1; background-image: linear-gradient(to bottom, #81a1c1, #5f88b0); box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), 0 1px rgba(0, 0, 0, 0.1); } columnview.view.progressbar:selected:focus, columnview.view.progressbar:selected, treeview.view.progressbar:selected:focus, treeview.view.progressbar:selected { box-shadow: inset 0 1px rgba(255, 255, 255, 0.05); background-image: image(#3b4252); } columnview.view.progressbar:selected:focus:backdrop, columnview.view.progressbar:selected:backdrop, treeview.view.progressbar:selected:focus:backdrop, treeview.view.progressbar:selected:backdrop { background-color: #3d4455; } columnview.view.trough, treeview.view.trough { background-color: rgba(216, 222, 233, 0.1); } columnview.view.trough:selected:focus, columnview.view.trough:selected, treeview.view.trough:selected:focus, treeview.view.trough:selected { background-color: #5f88b0; } columnview.view > header > button, treeview.view > header > button { color: #4c5462; background-color: #3b4252; font-weight: bold; text-shadow: none; box-shadow: none; } columnview.view > header > button:hover, treeview.view > header > button:hover { color: #9299a6; box-shadow: none; transition: none; } columnview.view > header > button:active, treeview.view > header > button:active { color: #d8dee9; transition: none; } columnview.view > header > button sort-indicator, treeview.view > header > button sort-indicator { min-height: 16px; min-width: 16px; } columnview.view > header > button sort-indicator.ascending, treeview.view > header > button sort-indicator.ascending { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } columnview.view > header > button sort-indicator.descending, treeview.view > header > button sort-indicator.descending { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } columnview.view button.dnd:active, columnview.view button.dnd:selected, columnview.view button.dnd:hover, columnview.view button.dnd, columnview.view header.button.dnd:active, columnview.view header.button.dnd:selected, columnview.view header.button.dnd:hover, columnview.view header.button.dnd, treeview.view button.dnd:active, treeview.view button.dnd:selected, treeview.view button.dnd:hover, treeview.view button.dnd, treeview.view header.button.dnd:active, treeview.view header.button.dnd:selected, treeview.view header.button.dnd:hover, treeview.view header.button.dnd { padding: 0 6px; color: #bf616a; background-image: none; background-color: #81a1c1; border-style: none; border-radius: 0; box-shadow: inset 0 0 0 1px #3b4252; text-shadow: none; transition: none; } columnview.view acceleditor > label, treeview.view acceleditor > label { background-color: #81a1c1; } columnview.view > header > button, treeview.view > header > button, columnview.view > header > button:hover, treeview.view > header > button:hover, columnview.view > header > button:active, treeview.view > header > button:active { padding: 0 6px; background-image: none; border-style: none none solid solid; border-color: #262a34; border-radius: 0; text-shadow: none; } columnview.view > header > button:disabled, treeview.view > header > button:disabled { border-color: #434c5e; background-image: none; } columnview.view > header > button:last-child:backdrop, treeview.view > header > button:last-child:backdrop, columnview.view > header > button:last-child, treeview.view > header > button:last-child { border-right-style: none; } /********************** * Window Decorations * *********************/ window { border-width: 0px; } window.csd { box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.75); margin: 0px; border-radius: 4px 4px 0 0; } window.csd:backdrop { box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.75); transition: 200ms ease-out; } window.csd.popup { border-radius: 7px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.65); } window.csd.dialog.message { border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.65); } window.solid-csd { margin: 0; padding: 4px; border: solid 1px #262a34; border-radius: 0; box-shadow: inset 0 0 0 4px #262a34, inset 0 0 0 3px #2b313c, inset 0 1px rgba(216, 222, 233, 0.07); } window.solid-csd:backdrop { box-shadow: inset 0 0 0 4px #262a34, inset 0 0 0 3px #434c5e, inset 0 1px rgba(216, 222, 233, 0.07); } window.maximized, window.fullscreen { border-radius: 0; box-shadow: none; } window.tiled, window.tiled-top, window.tiled-left, window.tiled-right, window.tiled-bottom { border-radius: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75), 0 0 0 20px transparent; } window.tiled:backdrop, window.tiled-top:backdrop, window.tiled-left:backdrop, window.tiled-right:backdrop, window.tiled-bottom:backdrop { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75), 0 0 0 20px transparent; } window.popup { box-shadow: none; } window.ssd { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75); } windowcontrols button.close, windowcontrols button.maximize, windowcontrols button.minimize { min-width: 20px; min-height: 20px; margin: 0; padding: 0 1px; background-position: center; background-repeat: no-repeat; background-size: 16px 16px; } windowcontrols button.close, windowcontrols button.close:hover, windowcontrols button.close:focus, windowcontrols button.close:active, windowcontrols button.close:backdrop, windowcontrols button.close:backdrop:hover, windowcontrols button.maximize, windowcontrols button.maximize:hover, windowcontrols button.maximize:focus, windowcontrols button.maximize:active, windowcontrols button.maximize:backdrop, windowcontrols button.maximize:backdrop:hover, windowcontrols button.minimize, windowcontrols button.minimize:hover, windowcontrols button.minimize:focus, windowcontrols button.minimize:active, windowcontrols button.minimize:backdrop, windowcontrols button.minimize:backdrop:hover { background-color: transparent; border: none; box-shadow: none; color: transparent; } windowcontrols button.close { background-image: -gtk-scaled(url("../assets/close.png"), url("../assets/close@2.png")); } windowcontrols button.close:hover, windowcontrols button.close:active { background-image: -gtk-scaled(url("../assets/close_prelight.png"), url("../assets/close_prelight@2.png")); } windowcontrols button.maximize { background-image: -gtk-scaled(url("../assets/maximize.png"), url("../assets/maximize@2.png")); } windowcontrols button.maximize:hover, windowcontrols button.maximize:active { background-image: -gtk-scaled(url("../assets/maximize_prelight.png"), url("../assets/maximize_prelight@2.png")); } windowcontrols button.minimize { background-image: -gtk-scaled(url("../assets/min.png"), url("../assets/min@2.png")); } windowcontrols button.minimize:hover, windowcontrols button.minimize:active { background-image: -gtk-scaled(url("../assets/min_prelight.png"), url("../assets/min_prelight@2.png")); } windowcontrols button:backdrop { -gtk-icon-shadow: none; background-image: -gtk-scaled(url("../assets/close_unfocused.png"), url("../assets/close_unfocused@2.png")); } headerbar.selection-mode button.titlebutton, .titlebar.selection-mode button.titlebutton { text-shadow: 0 -1px rgba(0, 0, 0, 0.4949019608); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.4949019608); } headerbar.selection-mode button.titlebutton:backdrop, .titlebar.selection-mode button.titlebutton:backdrop { -gtk-icon-shadow: none; } .history-view:selected:focus, .history-view:selected, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, textview > text:selected:focus, textview > text:selected, textview > text selection:focus, textview > text selection, flowbox flowboxchild:selected, modelbutton.flat:selected, .menuitem.button.flat:selected, calendar > grid > label.day-number:selected, spinbutton:not(.vertical) selection:focus, spinbutton.vertical > text selection:focus, spinbutton:not(.vertical) selection, spinbutton.vertical > text selection, entry selection:focus, entry selection, row:selected, columnview.view:selected:focus, columnview.view:selected, treeview.view:selected:focus, treeview.view:selected { background-color: #81a1c1; } row:selected label, label:selected, .selection-mode windowcontrols button, .history-view:selected:focus, .history-view:selected, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, textview > text:selected:focus, textview > text:selected, textview > text selection:focus, textview > text selection, flowbox flowboxchild:selected, modelbutton.flat:selected, .menuitem.button.flat:selected, calendar > grid > label.day-number:selected, spinbutton:not(.vertical) selection:focus, spinbutton.vertical > text selection:focus, spinbutton:not(.vertical) selection, spinbutton.vertical > text selection, entry selection:focus, entry selection, row:selected, columnview.view:selected:focus, columnview.view:selected, treeview.view:selected:focus, treeview.view:selected { color: #fefefe; font-weight: normal; } row:selected label:disabled, label:disabled:selected, .selection-mode windowcontrols button:disabled, .history-view:disabled:selected, iconview:disabled:selected:focus, .view:disabled:selected, iconview:disabled:selected, textview > text:disabled:selected:focus, textview > text:disabled:selected, textview > text selection:disabled, flowbox flowboxchild:disabled:selected, label:disabled selection, modelbutton.flat:disabled:selected, .menuitem.button.flat:disabled:selected, calendar > grid > label.day-number:disabled:selected, spinbutton:not(.vertical) selection:disabled, spinbutton.vertical > text selection:disabled, entry selection:disabled, row:disabled:selected { color: #c0d0e0; } row:selected label:backdrop, label:backdrop:selected, .selection-mode windowcontrols button:backdrop, .history-view:backdrop:selected, iconview:backdrop:selected:focus, .view:backdrop:selected, iconview:backdrop:selected, textview > text:backdrop:selected:focus, textview > text:backdrop:selected, textview > text selection:backdrop, flowbox flowboxchild:backdrop:selected, label:backdrop selection, modelbutton.flat:backdrop:selected, .menuitem.button.flat:backdrop:selected, calendar > grid > label.day-number:backdrop:selected, spinbutton:not(.vertical) selection:backdrop, spinbutton.vertical > text selection:backdrop, entry selection:backdrop, row:backdrop:selected { color: rgba(254, 254, 254, 0.5); } row:selected label:backdrop:disabled, label:backdrop:disabled:selected, .selection-mode windowcontrols button:backdrop:disabled, .history-view:backdrop:disabled:selected, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, textview > text:backdrop:disabled:selected, textview > text selection:backdrop:disabled, flowbox flowboxchild:backdrop:disabled:selected, label:disabled selection:backdrop, label:backdrop selection:disabled, modelbutton.flat:backdrop:disabled:selected, .menuitem.button.flat:backdrop:disabled:selected, calendar > grid > label.day-number:backdrop:disabled:selected, spinbutton:not(.vertical) selection:backdrop:disabled, spinbutton.vertical > text selection:backdrop:disabled, entry selection:backdrop:disabled, row:backdrop:disabled:selected { color: rgba(145, 173, 201, 0.85); } .monospace { font-family: Monospace; } /********************** * DE-Specific Styles * **********************/ /********* * Budgie * *********/ .budgie-container { background-color: transparent; } .budgie-container:backdrop { background-color: transparent; } .budgie-container popover list, .budgie-container popover row { border: none; background: none; padding: 0; margin: 0; } .budgie-popover .container, .budgie-popover border, .budgie-popover list, .budgie-popover row { padding: 0; margin: 0; background: none; border: none; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; opacity: 1; min-width: 0; min-height: 0; } .budgie-popover, .budgie-popover.background { border-radius: 2px; padding: 0; background: rgba(22, 25, 30, 0.95); background-clip: border-box; box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.35); border: 1px solid #1f232b; } .budgie-popover list:hover, .budgie-popover row:hover, .budgie-popover.background list:hover, .budgie-popover.background row:hover { background: none; } .budgie-popover > frame.container, .budgie-popover.background > frame.container { margin: 0 -1px -1px; padding: 2px 0 0; } .budgie-popover button, .budgie-popover.background button { color: #d8dee9; border: none; background: transparent; } .budgie-popover button:hover, .budgie-popover.background button:hover { color: #81a1c1; } .budgie-popover > .container { padding: 2px; } .budgie-menu { color: #d8dee9; } .budgie-menu .container { padding: 0; } .budgie-menu button:hover { -gtk-icon-filter: none; } .budgie-menu entry.search { border: none; background: none; padding: 5px 2px; border-bottom: 1px solid #1f232b; border-radius: 0; font-size: 120%; box-shadow: none; color: #d8dee9; } .budgie-menu entry.search image:dir(ltr) { padding-left: 8px; padding-right: 12px; } .budgie-menu entry.search image:dir(rtl) { padding-left: 12px; padding-right: 8px; } .budgie-menu .categories { border-width: 0; margin-left: 3px; background: transparent; } .budgie-menu .categories:dir(ltr) { border-right: 1px solid #1f232b; } .budgie-menu .categories:dir(rtl) { border-left: 1px solid #1f232b; } .budgie-menu .category-button { padding: 7px; border-radius: 2px 0 0 2px; } .budgie-menu .category-button:hover { background-color: rgba(216, 222, 233, 0.05); color: #d8dee9; } .budgie-menu .category-button:active { box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); } .budgie-menu .category-button:checked { color: #fefefe; background: linear-gradient(to right, #88c0d0 0%, #88c0d0 100%); } .budgie-menu .category-button:checked:disabled { opacity: 0.5; } .budgie-menu .category-button:checked:disabled label { color: rgba(254, 254, 254, 0.7); } .budgie-menu scrollbar { background-color: transparent; border-color: #1f232b; } .budgie-menu button:not(.category-button) { padding-top: 5px; padding-bottom: 5px; border-radius: 0; box-shadow: none; background: yellow; } .budgie-menu button { border: none; background: transparent; } .budgie-menu undershoot, .budgie-menu overshoot { background: none; } .budgie-menu list { color: rgba(216, 222, 233, 0.7); } button.budgie-menu-launcher { padding: 0 2px; color: #d8dee9; box-shadow: none; background-color: transparent; } button.budgie-menu-launcher:hover { color: #d8dee9; } button.budgie-menu-launcher:active, button.budgie-menu-launcher:checked { color: #d8dee9; } button.budgie-menu-launcher:backdrop { color: #d8dee9; background-color: transparent; } button.budgie-menu-launcher:backdrop:hover { color: #d8dee9; } button.budgie-menu-launcher:backdrop:active, button.budgie-menu-launcher:backdrop:checked { color: #81a1c1; box-shadow: none; background-color: #3d4454; } .user-menu .content-box separator { margin-left: 6px; margin-right: 6px; background-color: rgba(216, 222, 233, 0.1); } .user-menu button { margin: 5px; } .user-menu > box.vertical row.activatable:first-child .indicator-item, .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1); background-color: #81a1c1; transition-duration: 0.2s; } .user-menu > box.vertical row.activatable:first-child .indicator-item:dir(ltr), .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item:dir(ltr) { padding-left: 7px; background-position: left center; background-repeat: no-repeat; background-size: 38px auto; } .user-menu > box.vertical row.activatable:first-child .indicator-item:dir(rtl), .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item:dir(rtl) { padding-right: 7px; background-position: right center; background-repeat: no-repeat; background-size: 38px auto; } .user-menu > box.vertical row.activatable:first-child .indicator-item label, .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item label { color: #fefefe; } .user-menu > box.vertical row.activatable:first-child .indicator-item label:dir(ltr), .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item label:dir(ltr) { padding-left: 5px; } .user-menu > box.vertical row.activatable:first-child .indicator-item label:dir(rtl), .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item label:dir(rtl) { padding-right: 5px; } .user-menu > box.vertical row.activatable:first-child .indicator-item image, .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item image { color: #fefefe; } .user-menu > box.vertical row.activatable:first-child .indicator-item image:first-child, .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item image:first-child { min-width: 24px; min-height: 20px; } button.raven-trigger { padding-left: 2px; padding-right: 2px; color: #d8dee9; box-shadow: none; } button.raven-trigger:hover { color: #d8dee9; background-color: transparent; } button.raven-trigger:active, button.raven-trigger:checked { box-shadow: none; background-color: transparent; color: #81a1c1; } button.raven-trigger:backdrop { color: #d8dee9; } button.raven-trigger:backdrop:hover { color: #d8dee9; } button.raven-trigger:backdrop:active, button.raven-trigger:backdrop:checked { box-shadow: none; color: #81a1c1; background-color: transparent; } .places-menu .container { padding: 0; } .places-menu .message-bar { border-top-left-radius: 3px; border-top-right-radius: 3px; } .places-menu .name-button { border: 0; border-radius: 0; padding: 4px 6px; } .places-menu .unmount-button { padding: 4px 4px; border: 0; border-radius: 0; } .places-menu .places-section-header { padding: 0px; border-bottom: 1px solid rgba(31, 35, 43, 0.95); box-shadow: 0px 1px 1px alpha(@theme_fg_color, 0.03); } .places-menu .places-section-header > button { padding: 8px; border: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } .places-menu .places-list { background: rgba(216, 222, 233, 0.04); border-bottom: 1px solid rgba(31, 35, 43, 0.95); } .places-menu .unlock-area { border-top: 1px solid rgba(31, 35, 43, 0.85); border-bottom: 1px solid rgba(31, 35, 43, 0.85); } .places-menu .unlock-area entry { border-radius: 0; border: 0; } .places-menu .unlock-area button { border-radius: 0; border: 0; border-left: 1px solid rgba(31, 35, 43, 0.85); } .places-menu .alternative-label { font-size: 15px; padding: 3px; } .places-menu .always-expand { background: transparent; border-bottom: none; } .night-light-indicator .container { padding: 0; } .night-light-indicator .view-header { font-size: 14px; padding: 10px; border-bottom: 1px solid mix(@theme_base_color, #000000, 0.35); box-shadow: 0px 1px 1px alpha(@theme_fg_color, 0.04); } .night-light-indicator .display-settings-button { border-top-left-radius: 0px; border-top-right-radius: 0px; border: none; padding: 3px; border-top: 1px solid mix(@theme_base_color, #000000, 0.35); box-shadow: inset 0px 1px 1px alpha(@theme_fg_color, 0.04); } .budgie-panel { color: #d8dee9; background-color: rgba(22, 25, 30, 0.95); background-image: none; box-shadow: none; border: none; transition: all 150ms ease-in; } .budgie-panel .alert { color: #bf616a; } .budgie-panel:backdrop { color: #d8dee9; background-color: rgba(22, 25, 30, 0.95); } .budgie-panel button { border-top-width: 0; border-bottom-width: 0; border-radius: 0; } .budgie-panel button.flat { background: transparent; border: none; } .budgie-panel button.flat:hover, .budgie-panel button.flat:active, .budgie-panel button.flat:checked { background: transparent; color: #81a1c1; } .budgie-panel popover list, .budgie-panel popover row { padding: 0; margin: 0; } .budgie-panel label { color: #d8dee9; font-weight: 700; } .budgie-panel.transparent { background-color: rgba(22, 25, 30, 0.2); } .top .budgie-panel.transparent { border-bottom-color: transparent; } .bottom .budgie-panel.transparent { border-top-color: transparent; } .left .budgie-panel.transparent { border-right-color: transparent; } .right .budgie-panel.transparent { border-left-color: transparent; } .budgie-panel.transparent:backdrop, .budgie-panel.transparent label, .budgie-panel.transparent button.raven-trigger:backdrop, .budgie-panel.transparent button.budgie-menu-launcher { color: #f9fafb; } .budgie-panel .end-region { border-radius: 0px; } .budgie-panel .end-region separator { background-color: rgba(216, 222, 233, 0.15); } .budgie-panel .end-region label { font-weight: 700; color: #d8dee9; } .budgie-panel #tasklist-button, .budgie-panel #tasklist-button:backdrop { outline-color: transparent; transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); border-color: rgba(22, 25, 30, 0); border-radius: 0; background-color: transparent; box-shadow: none; background-clip: padding-box; } .budgie-panel button.flat.launcher { outline-color: transparent; transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); border-color: rgba(22, 25, 30, 0); border-radius: 0; padding: 0; background-clip: padding-box; background-color: transparent; } .budgie-panel button.flat.launcher { box-shadow: none; } .budgie-panel #tasklist-button:hover, .budgie-panel .unpinned button.flat.launcher:hover, .budgie-panel .pinned button.flat.launcher.running:hover { box-shadow: none; } .budgie-panel #tasklist-button:active, .budgie-panel .unpinned button.flat.launcher:active, .budgie-panel .pinned button.flat.launcher.running:active, .budgie-panel #tasklist-button:checked, .budgie-panel .unpinned button.flat.launcher:checked, .budgie-panel .pinned button.flat.launcher.running:checked { box-shadow: none; } .top .budgie-panel #tasklist-button, .budgie-panel .top #tasklist-button, .top .budgie-panel .unpinned button.flat.launcher, .budgie-panel .unpinned .top button.flat.launcher, .top .budgie-panel .pinned button.flat.launcher.running, .budgie-panel .pinned .top button.flat.launcher.running { padding-bottom: 2px; border-top: 2px solid transparent; } .top .budgie-panel .pinned button.flat.launcher:not(.running) { border-top: 2px solid transparent; } .top .budgie-panel .pinned button.flat.launcher:not(.running):hover { border-top: 2px solid rgba(255, 255, 255, 0.1); } .top .budgie-panel .unpinned button.flat.launcher, .top .budgie-panel .pinned button.flat.launcher.running { border-top: 2px solid rgba(255, 255, 255, 0.1); } .top .budgie-panel #tasklist-button:hover, .budgie-panel .top #tasklist-button:hover, .top .budgie-panel .unpinned button.flat.launcher:hover, .budgie-panel .unpinned .top button.flat.launcher:hover, .top .budgie-panel .pinned button.flat.launcher.running:hover, .budgie-panel .pinned .top button.flat.launcher.running:hover { border-top: 2px solid rgba(255, 255, 255, 0.25); } .top .budgie-panel #tasklist-button:active, .budgie-panel .top #tasklist-button:active, .top .budgie-panel .unpinned button.flat.launcher:active, .budgie-panel .unpinned .top button.flat.launcher:active, .top .budgie-panel .pinned button.flat.launcher.running:active, .budgie-panel .pinned .top button.flat.launcher.running:active, .top .budgie-panel #tasklist-button:checked, .budgie-panel .top #tasklist-button:checked, .top .budgie-panel .unpinned button.flat.launcher:checked, .budgie-panel .unpinned .top button.flat.launcher:checked, .top .budgie-panel .pinned button.flat.launcher.running:checked, .budgie-panel .pinned .top button.flat.launcher.running:checked { border-top: 2px solid #81a1c1; } .bottom .budgie-panel #tasklist-button, .budgie-panel .bottom #tasklist-button, .bottom .budgie-panel .unpinned button.flat.launcher, .budgie-panel .unpinned .bottom button.flat.launcher, .bottom .budgie-panel .pinned button.flat.launcher.running, .budgie-panel .pinned .bottom button.flat.launcher.running { padding-top: 2px; border-bottom: 2px solid transparent; } .bottom .budgie-panel .pinned button.flat.launcher:not(.running) { border-bottom: 2px solid transparent; } .bottom .budgie-panel .pinned button.flat.launcher:not(.running):hover { border-bottom: 2px solid rgba(255, 255, 255, 0.1); } .bottom .budgie-panel .unpinned button.flat.launcher, .bottom .budgie-panel .pinned button.flat.launcher.running { border-bottom: 2px solid rgba(255, 255, 255, 0.1); } .bottom .budgie-panel #tasklist-button:hover, .budgie-panel .bottom #tasklist-button:hover, .bottom .budgie-panel .unpinned button.flat.launcher:hover, .budgie-panel .unpinned .bottom button.flat.launcher:hover, .bottom .budgie-panel .pinned button.flat.launcher.running:hover, .budgie-panel .pinned .bottom button.flat.launcher.running:hover { border-bottom: 2px solid rgba(255, 255, 255, 0.25); } .bottom .budgie-panel #tasklist-button:active, .budgie-panel .bottom #tasklist-button:active, .bottom .budgie-panel .unpinned button.flat.launcher:active, .budgie-panel .unpinned .bottom button.flat.launcher:active, .bottom .budgie-panel .pinned button.flat.launcher.running:active, .budgie-panel .pinned .bottom button.flat.launcher.running:active, .bottom .budgie-panel #tasklist-button:checked, .budgie-panel .bottom #tasklist-button:checked, .bottom .budgie-panel .unpinned button.flat.launcher:checked, .budgie-panel .unpinned .bottom button.flat.launcher:checked, .bottom .budgie-panel .pinned button.flat.launcher.running:checked, .budgie-panel .pinned .bottom button.flat.launcher.running:checked { border-bottom: 2px solid #81a1c1; } .left .budgie-panel #tasklist-button, .budgie-panel .left #tasklist-button, .left .budgie-panel .unpinned button.flat.launcher, .budgie-panel .unpinned .left button.flat.launcher, .left .budgie-panel .pinned button.flat.launcher.running, .budgie-panel .pinned .left button.flat.launcher.running { padding-right: 2px; border-left: 2px solid transparent; } .left .budgie-panel .pinned button.flat.launcher:not(.running) { border-left: 2px solid transparent; } .left .budgie-panel .pinned button.flat.launcher:not(.running):hover { border-left: 2px solid rgba(255, 255, 255, 0.1); } .left .budgie-panel .unpinned button.flat.launcher, .left .budgie-panel .pinned button.flat.launcher.running { border-left: 2px solid rgba(255, 255, 255, 0.1); } .left .budgie-panel #tasklist-button:hover, .budgie-panel .left #tasklist-button:hover, .left .budgie-panel .unpinned button.flat.launcher:hover, .budgie-panel .unpinned .left button.flat.launcher:hover, .left .budgie-panel .pinned button.flat.launcher.running:hover, .budgie-panel .pinned .left button.flat.launcher.running:hover { border-left: 2px solid rgba(255, 255, 255, 0.25); } .left .budgie-panel #tasklist-button:active, .budgie-panel .left #tasklist-button:active, .left .budgie-panel .unpinned button.flat.launcher:active, .budgie-panel .unpinned .left button.flat.launcher:active, .left .budgie-panel .pinned button.flat.launcher.running:active, .budgie-panel .pinned .left button.flat.launcher.running:active, .left .budgie-panel #tasklist-button:checked, .budgie-panel .left #tasklist-button:checked, .left .budgie-panel .unpinned button.flat.launcher:checked, .budgie-panel .unpinned .left button.flat.launcher:checked, .left .budgie-panel .pinned button.flat.launcher.running:checked, .budgie-panel .pinned .left button.flat.launcher.running:checked { border-left: 2px solid #81a1c1; } .right .budgie-panel #tasklist-button, .budgie-panel .right #tasklist-button, .right .budgie-panel .unpinned button.flat.launcher, .budgie-panel .unpinned .right button.flat.launcher, .right .budgie-panel .pinned button.flat.launcher.running, .budgie-panel .pinned .right button.flat.launcher.running { padding-left: 2px; border-right: 2px solid transparent; } .right .budgie-panel .pinned button.flat.launcher:not(.running) { border-right: 2px solid transparent; } .right .budgie-panel .pinned button.flat.launcher:not(.running):hover { border-right: 2px solid rgba(255, 255, 255, 0.1); } .right .budgie-panel .unpinned button.flat.launcher, .right .budgie-panel .pinned button.flat.launcher.running { border-right: 2px solid rgba(255, 255, 255, 0.1); } .right .budgie-panel #tasklist-button:hover, .budgie-panel .right #tasklist-button:hover, .right .budgie-panel .unpinned button.flat.launcher:hover, .budgie-panel .unpinned .right button.flat.launcher:hover, .right .budgie-panel .pinned button.flat.launcher.running:hover, .budgie-panel .pinned .right button.flat.launcher.running:hover { border-right: 2px solid rgba(255, 255, 255, 0.25); } .right .budgie-panel #tasklist-button:active, .budgie-panel .right #tasklist-button:active, .right .budgie-panel .unpinned button.flat.launcher:active, .budgie-panel .unpinned .right button.flat.launcher:active, .right .budgie-panel .pinned button.flat.launcher.running:active, .budgie-panel .pinned .right button.flat.launcher.running:active, .right .budgie-panel #tasklist-button:checked, .budgie-panel .right #tasklist-button:checked, .right .budgie-panel .unpinned button.flat.launcher:checked, .budgie-panel .unpinned .right button.flat.launcher:checked, .right .budgie-panel .pinned button.flat.launcher.running:checked, .budgie-panel .pinned .right button.flat.launcher.running:checked { border-right: 2px solid #81a1c1; } .top .budgie-panel { border-bottom: 1px solid rgba(28, 32, 39, 0.92); } .top .raven-frame { padding: 0; background: none; } .top .raven-frame border { border: none; border-bottom: 1px solid rgba(31, 35, 43, 0.92); } .top .shadow-block { background-color: transparent; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent); } .bottom .budgie-panel { border-top: 1px solid rgba(28, 32, 39, 0.92); } .bottom .raven-frame { padding: 0; background: none; } .bottom .raven-frame border { border: none; border-top: 1px solid rgba(31, 35, 43, 0.92); } .bottom .shadow-block { background-color: transparent; background-image: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent); } .left .budgie-panel { border-right: 1px solid rgba(28, 32, 39, 0.92); } .left .raven-frame { padding: 0; background: none; } .left .raven-frame border { border: none; border-right: 1px solid rgba(31, 35, 43, 0.92); } .left .shadow-block { background-color: transparent; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent); } .right .budgie-panel { border-left: 1px solid rgba(28, 32, 39, 0.92); } .right .raven-frame { padding: 0; background: none; } .right .raven-frame border { border: none; border-left: 1px solid rgba(31, 35, 43, 0.92); } .right .shadow-block { background-color: transparent; background-image: linear-gradient(to left, rgba(0, 0, 0, 0.3), transparent); } .raven { padding: 0; color: #bf616a; background: rgba(22, 25, 30, 0.95); transition: 170ms ease-out; } .raven .raven-header { min-height: 32px; color: #d8dee9; border: solid rgba(31, 35, 43, 0.95); border-width: 1px 0; background-color: rgba(54, 61, 75, 0.45); } .raven .raven-header * { padding-top: 0; padding-bottom: 0; } .raven .raven-header.top { border-top-style: none; border-color: transparent; margin-top: 3px; min-height: 32px; } .raven .raven-header.top button.image-button:hover { color: #7094b9; box-shadow: none; } .raven .raven-header > button.text-button { border-radius: 2px; color: #fefefe; background-color: rgba(184, 79, 89, 0.9); box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.1); } .raven .raven-header > button.text-button:hover { border-radius: 2px; color: #fefefe; background-color: rgba(191, 97, 106, 0.9); box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.1); } .raven .raven-header > button.text-button:active { color: #fefefe; background-color: rgba(198, 115, 123, 0.9); box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.1); } .raven .raven-header.bottom { border-bottom-style: none; } .raven .raven-header button { color: #d8dee9; border-radius: 6px; text-shadow: none; box-shadow: none; border: 1px solid #1f232b; background-color: #343b48; border-radius: 0; } .raven .raven-header button:hover { color: #81a1c1; text-shadow: none; background-color: rgba(59, 66, 82, 0.8); border-color: #1f232b; border-radius: 0; } .raven .raven-header button:active, .raven .raven-header button:checked { color: #81a1c1; background-color: #2a2f3a; } .raven .raven-header button:disabled { color: #8e95a4; } .raven list { color: #d8dee9; background-color: transparent; } .raven list:selected { background-color: rgba(129, 161, 193, 0.9); } .raven list row, .raven list row.activatable { background-color: transparent; } .raven list row:hover, .raven list row.activatable:hover { background-color: rgba(54, 61, 75, 0.25); } .raven list row:selected, .raven list row.activatable:selected { background-color: rgba(129, 161, 193, 0.9); } .raven .raven-background { color: #d8dee9; background-color: transparent; border-color: transparent; } .raven .raven-background.middle { border-bottom-style: none; } .raven .powerstrip { background-color: transparent; border-top-color: transparent; } .raven .powerstrip button.image-button { border-radius: 50%; padding: 5px; min-width: 32px; min-height: 32px; margin-bottom: 3px; background: #b48ead; color: #fefefe; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1); border: none; font-size: 100%; } .raven .powerstrip button.image-button:hover { background: rgba(180, 142, 173, 0.85); color: #fefefe; } .raven .powerstrip button.image-button:active { background: #b48ead; color: #fefefe; } .raven .powerstrip button.image-button:first-child { background: linear-gradient(to right, #88c0d0 0%, #88c0d0 100%); } .raven .powerstrip button.image-button:first-child:hover { background: rgba(129, 161, 193, 0.85); } .raven .powerstrip button.image-button:first-child:active { background: #81a1c1; } .raven .powerstrip button.image-button:last-child { background: linear-gradient(to right, #bf616a, #bf616a); } .raven .powerstrip button.image-button:last-child:hover { background: rgba(191, 97, 106, 0.85); } .raven .powerstrip button.image-button:last-child:active { background: #bf616a; } .raven .option-subtitle { font-size: 13px; } calendar.raven-calendar { padding: 6px; color: #d8dee9; background: transparent; border-color: transparent; } calendar.raven-calendar:indeterminate { color: alpha(currentColor,0.3); } calendar.raven-calendar:selected { background: transparent; color: #7397ba; font-weight: bold; } calendar.raven-calendar:backdrop { background-color: transparent; } calendar.raven-calendar.header { color: #d8dee9; border: none; border-radius: 0; background-color: transparent; } calendar.raven-calendar button, calendar.raven-calendar button:focus { color: alpha(currentColor,0.5); background-color: transparent; } calendar.raven-calendar button:hover, calendar.raven-calendar button:focus:hover { color: #d8dee9; background-color: transparent; } .raven-mpris { color: #d8dee9; background-color: rgba(46, 52, 64, 0.9); border: solid rgba(255, 255, 255, 0.1); border-width: 1px 0; border-bottom-color: rgba(0, 0, 0, 0.1); } .raven-mpris button.image-button { padding: 10px; background-color: #3b4252; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1); } .raven-mpris button.image-button:hover { background-color: #81a1c1; } .raven-mpris button.image-button:active { background-color: #7094b9; } .raven-mpris button.image-button:first-child { margin-right: 4px; } .raven-mpris button.image-button:last-child { margin-left: 4px; } .raven-mpris button.image-button:last-child, .raven-mpris button.image-button:first-child { padding: 4px; margin-top: 6px; margin-bottom: 6px; } .budgie-notification-window, .budgie-osd-window, .budgie-switcher-window { background: none; border-radius: 1px; } .budgie-notification-window button, .budgie-osd-window button, .budgie-switcher-window button { background-color: #81a1c1; color: #fefefe; border: none; } .budgie-notification-window button:hover, .budgie-osd-window button:hover, .budgie-switcher-window button:hover { background-color: #7094b9; border: none; } .budgie-notification-window button:active, .budgie-osd-window button:active, .budgie-switcher-window button:active, .budgie-notification-window button:checked, .budgie-osd-window button:checked, .budgie-switcher-window button:checked { background-color: #7094b9; } .budgie-notification.background, .background.budgie-osd, .background.budgie-switcher { border-radius: 1px; } .budgie-notification .notification-title, .budgie-osd .notification-title, .budgie-switcher .notification-title { font-size: 110%; color: #d8dee9; } .budgie-notification .notification-body, .budgie-osd .notification-body, .budgie-switcher .notification-body { color: rgba(216, 222, 233, 0.7); } .budgie-notification button, .budgie-osd button, .budgie-switcher button { background-color: transparent; color: #fefefe; } .budgie-notification button:hover, .budgie-osd button:hover, .budgie-switcher button:hover { background-color: transparent; color: #bf616a; box-shadow: none; } .budgie-notification button:active, .budgie-osd button:active, .budgie-switcher button:active, .budgie-notification button:checked, .budgie-osd button:checked, .budgie-switcher button:checked { background-color: transparent; color: #b84f59; } .drop-shadow, .budgie-session-dialog.background, .background.budgie-polkit-dialog, .background.budgie-run-dialog { color: #d8dee9; background-color: rgba(67, 76, 94, 0.95); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); border-radius: 2px; } .budgie-switcher-window flowbox { color: #d8dee9; } .budgie-switcher-window flowboxchild { padding: 3px; margin: 3px; color: #d8dee9; } .budgie-switcher-window flowboxchild:hover { background-color: transparent; } .budgie-switcher-window flowboxchild:active { color: #d8dee9; } .budgie-switcher-window flowboxchild:selected { color: #fefefe; background-color: rgba(129, 161, 193, 0.5); } .budgie-switcher-window flowboxchild:selected:active { color: #fefefe; } .budgie-switcher-window flowboxchild:selected:hover { background-color: #7491ae; } .budgie-switcher-window flowboxchild:selected:disabled { color: rgba(254, 254, 254, 0.7); background-color: rgba(129, 161, 193, 0.7); } .budgie-switcher-window flowboxchild:selected:disabled label { color: rgba(254, 254, 254, 0.7); } .budgie-session-dialog, .budgie-polkit-dialog, .budgie-run-dialog { color: #d8dee9; background-color: rgba(22, 25, 30, 0.95); } .budgie-session-dialog label:backdrop, .budgie-polkit-dialog label:backdrop, .budgie-run-dialog label:backdrop { color: rgba(216, 222, 233, 0.8); } .budgie-session-dialog .dialog-title, .budgie-polkit-dialog .dialog-title, .budgie-run-dialog .dialog-title { font-size: 120%; } .budgie-session-dialog .linked.horizontal > button, .budgie-polkit-dialog .linked.horizontal > button, .budgie-run-dialog .linked.horizontal > button { margin-bottom: 0; min-height: 32px; border-bottom: none; border-color: #1f232b; border-radius: 0; color: #d8dee9; background-color: transparent; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), inset 0 1px 2px rgba(0, 0, 0, 0.2); } .budgie-session-dialog .linked.horizontal > button label, .budgie-polkit-dialog .linked.horizontal > button label, .budgie-run-dialog .linked.horizontal > button label { font-weight: 700; } .budgie-session-dialog .linked.horizontal > button:first-child, .budgie-polkit-dialog .linked.horizontal > button:first-child, .budgie-run-dialog .linked.horizontal > button:first-child { border-left: none; border-bottom-left-radius: 2px; } .budgie-session-dialog .linked.horizontal > button:last-child, .budgie-polkit-dialog .linked.horizontal > button:last-child, .budgie-run-dialog .linked.horizontal > button:last-child { border-right: none; border-bottom-right-radius: 2px; } .budgie-session-dialog .linked.horizontal > button:hover, .budgie-polkit-dialog .linked.horizontal > button:hover, .budgie-run-dialog .linked.horizontal > button:hover { background-color: rgba(129, 161, 193, 0.9); } .budgie-session-dialog .linked.horizontal > button:hover:backdrop label, .budgie-polkit-dialog .linked.horizontal > button:hover:backdrop label, .budgie-run-dialog .linked.horizontal > button:hover:backdrop label { color: rgba(255, 255, 255, 0.5); } .budgie-session-dialog .linked.horizontal > button.suggested-action, .budgie-polkit-dialog .linked.horizontal > button.suggested-action, .budgie-run-dialog .linked.horizontal > button.suggested-action { background-color: rgba(129, 161, 193, 0.9); } .budgie-session-dialog .linked.horizontal > button.suggested-action:hover, .budgie-polkit-dialog .linked.horizontal > button.suggested-action:hover, .budgie-run-dialog .linked.horizontal > button.suggested-action:hover { background-color: rgba(146, 174, 201, 0.9); } .budgie-session-dialog .linked.horizontal > button.suggested-action:active, .budgie-polkit-dialog .linked.horizontal > button.suggested-action:active, .budgie-run-dialog .linked.horizontal > button.suggested-action:active, .budgie-session-dialog .linked.horizontal > button.suggested-action:checked, .budgie-polkit-dialog .linked.horizontal > button.suggested-action:checked, .budgie-run-dialog .linked.horizontal > button.suggested-action:checked { background-color: rgba(146, 174, 201, 0.9); } .budgie-session-dialog .linked.horizontal > button.destructive-action, .budgie-polkit-dialog .linked.horizontal > button.destructive-action, .budgie-run-dialog .linked.horizontal > button.destructive-action { background-color: rgba(169, 68, 78, 0.9); } .budgie-session-dialog .linked.horizontal > button.destructive-action:hover, .budgie-polkit-dialog .linked.horizontal > button.destructive-action:hover, .budgie-run-dialog .linked.horizontal > button.destructive-action:hover { background-color: rgba(184, 79, 89, 0.9); } .budgie-session-dialog .linked.horizontal > button.destructive-action:active, .budgie-polkit-dialog .linked.horizontal > button.destructive-action:active, .budgie-run-dialog .linked.horizontal > button.destructive-action:active, .budgie-session-dialog .linked.horizontal > button.destructive-action:checked, .budgie-polkit-dialog .linked.horizontal > button.destructive-action:checked, .budgie-run-dialog .linked.horizontal > button.destructive-action:checked { background-color: rgba(184, 79, 89, 0.9); } .budgie-session-dialog entry, .budgie-polkit-dialog entry, .budgie-run-dialog entry { background-color: #505359; color: #d8dee9; } .budgie-session-dialog entry:focus, .budgie-polkit-dialog entry:focus, .budgie-run-dialog entry:focus { background-color: #505359; } .budgie-session-dialog entry:backdrop, .budgie-polkit-dialog entry:backdrop, .budgie-run-dialog entry:backdrop { background-color: #505359; } .budgie-polkit-dialog .message { color: rgba(216, 222, 233, 0.7); } .budgie-polkit-dialog .failure { color: #bf616a; } .budgie-run-dialog entry.search, .budgie-run-dialog entry.search:focus { font-size: 120%; padding: 8px 5px; border: none; box-shadow: none; } .budgie-run-dialog entry.search image, .budgie-run-dialog entry.search:focus image { color: #d8dee9; } .budgie-run-dialog entry.search image:dir(ltr), .budgie-run-dialog entry.search:focus image:dir(ltr) { padding-left: 8px; padding-right: 12px; } .budgie-run-dialog entry.search image:dir(rtl), .budgie-run-dialog entry.search:focus image:dir(rtl) { padding-left: 12px; padding-right: 8px; } .budgie-run-dialog list row:selected .dim-label, .budgie-run-dialog list row:selected label.separator, .budgie-run-dialog list row:selected .titlebar .subtitle, .titlebar .budgie-run-dialog list row:selected .subtitle, .budgie-run-dialog list row:selected headerbar .subtitle, headerbar .budgie-run-dialog list row:selected .subtitle { opacity: 1; } .budgie-run-dialog scrolledwindow { border-top: 1px solid rgba(0, 0, 0, 0); } .budgie-menubar menu { margin: 4px; padding: 5px; border-radius: 0; background-color: rgba(22, 25, 30, 0.95); } .budgie-menubar menu menuitem:hover { background-color: #81a1c1; color: #fefefe; } .budgie-menubar arrow { border: none; min-width: 16px; min-height: 16px; } .budgie-menubar arrow.top { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); border-bottom: 1px solid rgba(63, 69, 80, 0.928); } .budgie-menubar arrow.bottom { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); border-top: 1px solid rgba(63, 69, 80, 0.928); } .budgie-menubar menuitem accelerator { color: rgba(216, 222, 233, 0.35); } .budgie-menubar menuitem check, .budgie-menubar menuitem radio { min-height: 16px; min-width: 16px; } window.background.budgie-settings-window.csd > box.horizontal > stack > scrolledwindow buttonbox.inline-toolbar { border-style: none none solid; } .workspace-switcher .workspace-layout { border: 0 solid rgba(22, 25, 30, 0.95); } .top .workspace-switcher .workspace-layout:dir(ltr), .bottom .workspace-switcher .workspace-layout:dir(ltr) { border-left-width: 1px; } .top .workspace-switcher .workspace-layout:dir(rtl), .bottom .workspace-switcher .workspace-layout:dir(rtl) { border-right-width: 1px; } .left .workspace-switcher .workspace-layout, .right .workspace-switcher .workspace-layout { border-top-width: 1px; } .workspace-switcher .workspace-item, .workspace-switcher .workspace-add-button { border: 0 solid rgba(43, 49, 60, 0.95); } .top .workspace-switcher .workspace-item:dir(ltr), .bottom .workspace-switcher .workspace-item:dir(ltr), .top .workspace-switcher .workspace-add-button:dir(ltr), .bottom .workspace-switcher .workspace-add-button:dir(ltr) { border-right-width: 1px; } .top .workspace-switcher .workspace-item:dir(rtl), .bottom .workspace-switcher .workspace-item:dir(rtl), .top .workspace-switcher .workspace-add-button:dir(rtl), .bottom .workspace-switcher .workspace-add-button:dir(rtl) { border-left-width: 1px; } .left .workspace-switcher .workspace-item, .right .workspace-switcher .workspace-item, .left .workspace-switcher .workspace-add-button, .right .workspace-switcher .workspace-add-button { border-bottom-width: 1px; } .workspace-switcher .workspace-item.current-workspace { background-color: rgba(11, 13, 15, 0.95); } .workspace-switcher .workspace-add-button { border: none; background: transparent; } .workspace-switcher .workspace-add-button:hover { box-shadow: none; } .workspace-switcher .workspace-add-button:active { background-image: none; } .workspace-switcher .workspace-add-button:active image { margin: 1px 0 -1px; } .budgie-panel .workspace-switcher .workspace-icon-button { min-height: 24px; min-width: 24px; padding: 0; border-radius: 2px; } /************ * Nautilus * ************/ .nautilus-window .frame *:selected, .nautilus-window .frame *:selected:backdrop { background: transparent; color: #81a1c1; } .nautilus-window .frame *:selected label, .nautilus-window .frame *:selected:backdrop label { color: #81a1c1; } .nautilus-window paned > separator { background-image: none; } .nautilus-window .sidebar { background-color: transparent; } .nautilus-window .sidebar:backdrop { background-color: transparent; } .nautilus-window .sidebar .list-row button { border: none; background-color: rgba(53, 59, 73, 0.95); } .nautilus-window .sidebar .list-row button:active { background-color: rgba(129, 161, 193, 0.75); } .nautilus-window .sidebar .list-row:selected { background-color: rgba(129, 161, 193, 0.75); } .nautilus-window .sidebar .list-row:selected:hover { background-color: rgba(129, 161, 193, 0.9); } .nautilus-window .sidebar .list-row:hover { background-color: rgba(59, 66, 82, 0.5); } .nautilus-window .sidebar .list-row:hover:active { background-color: rgba(129, 161, 193, 0.9); } .nautilus-window notebook > stack:only-child { background-color: #3b4252; } .nautilus-window notebook > stack:only-child:backdrop { background-color: #3d4455; } .nautilus-window searchbar { border-top: 1px solid rgba(0, 0, 0, 0.12); } .nautilus-window .searchbar-container { margin-top: -1px; } .nautilus-circular-button { border-radius: 20px; } .disk-space-display { border: 2px solid; } .disk-space-display .unknown { background-color: #888a85; border-color: #555653; } .disk-space-display .used { background-color: #9FB0B9; border-color: #667f8c; } .disk-space-display .free { background-color: #D8D8D8; border-color: #a5a5a5; } .nautilus-desktop { color: #d8dee9; } .nautilus-desktop .nautilus-canvas-item { border-radius: 5px; color: #fefefe; text-shadow: 1px 1px rgba(0, 0, 0, 0.6); } .nautilus-desktop .nautilus-canvas-item:active { color: #d8dee9; text-shadow: none; } .nautilus-desktop .nautilus-canvas-item:hover { color: #d8dee9; text-shadow: none; } .nautilus-desktop .nautilus-canvas-item:selected { color: #fefefe; text-shadow: none; } .nautilus-desktop .nautilus-canvas-item .dim-label:selected, .nautilus-desktop .nautilus-canvas-item label.separator:selected, .nautilus-desktop .nautilus-canvas-item .titlebar .subtitle:selected, .titlebar .nautilus-desktop .nautilus-canvas-item .subtitle:selected, .nautilus-desktop .nautilus-canvas-item headerbar .subtitle:selected, headerbar .nautilus-desktop .nautilus-canvas-item .subtitle:selected { color: #fefefe; } .nautilus-desktop .nautilus-list .dim-label:selected, .nautilus-desktop .nautilus-list label.separator:selected, .nautilus-desktop .nautilus-list .titlebar .subtitle:selected, .titlebar .nautilus-desktop .nautilus-list .subtitle:selected, .nautilus-desktop .nautilus-list headerbar .subtitle:selected, headerbar .nautilus-desktop .nautilus-list .subtitle:selected { color: #fefefe; } /********* * Gedit * *********/ .gedit-search-slider { padding: 4px; border-radius: 0 0 3px 3px; border: 0; background-color: #434c5e; } /********* * Gnucash * *********/ .GncMainWindow entry.register-foreground { background: transparent; border: none; } /******************* * Calendar events * ********************/ .color-light.timed label, .color-light .event-popover label { color: #d8dee9; opacity: 1; } /******************* * Calendar sidebar * ********************/ datechooser button { color: #d8dee9; } datechooser .circular.day.text-button { padding: 6px; border-radius: 50%; min-height: 22px; min-width: 22px; border: none; color: #d8dee9; } datechooser .circular.day.text-button.flat.other-month, datechooser .circular.day.text-button.flat.non-workday { color: #8e95a4; } datechooser .circular.day.text-button.today { color: #5e81ac; } datechooser .circular.day.text-button:active, datechooser .circular.day.text-button:selected { color: #fefefe; outline-color: rgba(254, 254, 254, 0.3); background-color: #81a1c1; text-shadow: none; font-weight: bold; } datechooser .weekday, datechooser .weeknum { color: #8e95a4; } datechooser .weeknum { background-color: #373e4c; } datechooser .current-week { background-color: rgba(142, 149, 164, 0.1); } popover datechooser { background-color: #3b4252; } popover datechooser button { color: #d8dee9; } popover datechooser .circular.day.text-button { color: #d8dee9; } popover datechooser .weeknum { background-color: #323846; } agenda-view list.background { padding: 8px; } agenda-view list.background .caption-heading, agenda-view list.background .dim-label.no-events, agenda-view list.background label.no-events.separator, agenda-view list.background .titlebar .no-events.subtitle, .titlebar agenda-view list.background .no-events.subtitle, agenda-view list.background headerbar .no-events.subtitle, headerbar agenda-view list.background .no-events.subtitle { color: #d8dee9; } datechooser, datechooser:backdrop, agenda-view list.background, agenda-view list.background:backdrop, .calendar-list, .calendar-list:backdrop { background-color: #2e3440; } .calendar-list row, .calendar-list label { color: #d8dee9; } .calendar-list row:hover { background-color: #373e4c; } /****************************** * Gnome system monitor graph * ******************************/ #gnome-system-monitor .loadgraph { background: #434c5e; color: #d8dee9; } /******** * Gala * *******/ .gala-notification { border-width: 0; border-radius: 2px; color: white; border: 1px solid #3b4252; background-color: #3b4252; } .gala-notification .title, .gala-notification .label { color: #d8dee9; } .gala-button { padding: 3px; color: #3b4252; border: none; border-radius: 50%; background-image: linear-gradient(to bottom, #7e7e7e, #3e3e3e); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.98), inset 0 1px 0 0 rgba(255, 255, 255, 0.93), inset 0 -1px 0 0 rgba(255, 255, 255, 0.99), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 3px 6px rgba(0, 0, 0, 0.84), 0 3px 6px rgba(0, 0, 0, 0.77); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); } /********** * Notify * *********/ .notify { /*-notify-shadow: 0px 2px 18px transparentize(black, 0.60);*/ border-radius: 5px; border: 1px solid rgba(0, 0, 0, 0.7); background-color: rgba(59, 66, 82, 0.05); } /*************** * SwitchBoard * ***************/ .category-label { font-weight: bold; color: #d8dee9; } /************* * Slingshot * ************/ .button.app { border: none; border-radius: 0; box-shadow: none; background-image: none; } .button.app .app:hover { border-radius: 8px; border: none; background-color: rgba(129, 161, 193, 0.3); color: white; } .button.app .app:focus { /*background-color: transparentize(black, 0.20);*/ } .search-item { border-radius: 0; border: none; color: #d8dee9; background: none; } .search-item:hover, .search-item:focus { border-radius: 0; background-color: rgba(129, 161, 193, 0.3); color: #fefefe; } .search-entry-large, .search-entry-large:focus { border: none; font-size: 18px; font-weight: 300; background-image: none; background: none; box-shadow: none; border-radius: 0; } .search-category-header { font-weight: bold; color: #d8dee9; } /********* * Panel * ********/ .composited-indicator > revealer, .composited-indicator > revealer image, .composited-indicator > revealer label, .composited-indicator > revealer spinner { color: #d8dee9; font-weight: bold; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5); transition: all 200ms ease-in-out; -gtk-icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5); } .composited-indicator > revealer image:first-child + label { margin-left: 5px; } .panel.color-light .composited-indicator > revealer, .panel.color-light .composited-indicator > revealer image, .panel.color-light .composited-indicator > revealer label, .panel.color-light .composited-indicator > revealer spinner { color: rgba(0, 0, 0, 0.6); text-shadow: 0 1px rgba(255, 255, 255, 0.1); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.1); } /************** * Calculator * **************/ PantheonCalculatorMainWindow { border-radius: 0 0 4px 4px; } PantheonCalculatorMainWindow .window-frame { border-radius: 3px; } /********* * Cards * *********/ .deck { background-color: #323946; } .card { background-color: #3b4252; border: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 3px 3px rgba(0, 0, 0, 0.2); transition: all 150ms ease-in-out; } .card.collapsed { background-color: #303643; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.2); } /********* * Noise * *********/ NoiseLibraryWindow { border-radius: 0 0 4px 4px; } NoiseLibraryWindow .action-bar { border-radius: 0 0 4px 4px; } NoiseLibraryWindow .window-frame { border-radius: 3px; } /******** * Snap * ********/ SnapMainWindow .take-button, SnapSnapWindow .take-button { border-radius: 0; } /******************* * Photos/Shotwell * *******************/ DirectWindow .the-button-in-the-combobox, LibraryWindow .the-button-in-the-combobox { background: none; } .checkerboard-layout { background-color: #434c5e; background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1)), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1)); background-size: 24px 24px; background-position: 0 0, 12px 12px; } .checkboard-layout .item { background-color: #d8dee9; } /********* * Avatar * *********/ .avatar { border: 1px solid rgba(0, 0, 0, 0.23); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 0 rgba(255, 255, 255, 0.15), 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.23); } /**level bars**/ .sidebar .source-list.view.level-bar, .sidebar iconview.source-list.level-bar, .sidebar .source-list.view.level-bar:selected, .sidebar iconview.source-list.level-bar:selected, .sidebar .source-list.view.level-bar:selected:focus, .sidebar iconview.source-list.level-bar:selected:focus { background: linear-gradient(to right, #4e586d, #4e586d); border: 1px solid rgba(0, 0, 0, 0.14); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); border-radius: 2px; } .sidebar .source-list.view.level-bar.fill-block, .sidebar iconview.source-list.level-bar.fill-block { border: none; } .sidebar .source-list.view.fill-block, .sidebar iconview.source-list.fill-block, .sidebar .source-list.view.fill-block:hover, .sidebar iconview.source-list.fill-block:hover, .sidebar .source-list.view.fill-block:selected, .sidebar iconview.source-list.fill-block:selected, .sidebar .source-list.view.fill-block:selected:focus, .sidebar iconview.source-list.fill-block:selected:focus { background: linear-gradient(to right, #ebcb8b, #ebcb8b); } /************************** * Colors in context menu * **************************/ checkbutton.color-button { border: 1px solid #262a34; border-radius: 100px; background-clip: border-box; padding: 0; margin: 2px 1px; } checkbutton.color-button > check { -gtk-icon-source: none; background: none; margin-right: 0; padding: 2px; } checkbutton.color-button.none > check { background-color: transparent; border-radius: 100px; -gtk-icon-source: -gtk-icontheme("close-symbolic"); } radiobutton.color-button > radio { -gtk-icon-source: none; margin-right: 0; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 100px; background-clip: border-box; } radiobutton.color-button:active > radio { border: 1px solid rgba(0, 0, 0, 0.35); } .color-button check, .color-button check:checked, .color-button radio, .color-button radio:checked { background-image: none; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 50%; color: #3b4252; -gtk-icon-source: -gtk-icontheme("check-active-symbolic"); } .color-button.red check, .color-button.red radio, .color-button.strawberry check, .color-button.strawberry radio { background-color: @STRAWBERRY_300; -gtk-icon-shadow: 0 1px 1px @STRAWBERRY_500; } .color-button.orange check, .color-button.orange radio { background-color: @ORANGE_300; -gtk-icon-shadow: 0 1px 1px @ORANGE_500; } .color-button.yellow check, .color-button.yellow radio, .color-button.banana check, .color-button.banana radio { background-color: @BANANA_500; -gtk-icon-shadow: 0 1px 1px @BANANA_700; } .color-button.green check, .color-button.green radio, .color-button.lime check, .color-button.lime radio { background-color: @LIME_500; -gtk-icon-shadow: 0 1px 1px @LIME_700; } .color-button.blue check, .color-button.blue radio, .color-button.blueberry check, .color-button.blueberry radio { background-color: @BLUEBERRY_500; -gtk-icon-shadow: 0 1px 1px @BLUEBERRY_700; } .color-button.purple check, .color-button.purple radio, .color-button.grape check, .color-button.grape radio { background-color: @GRAPE_500; -gtk-icon-shadow: 0 1px 1px @GRAPE_700; } .color-button.brown check, .color-button.brown radio, .color-button.cocoa check, .color-button.cocoa radio { background-color: @COCOA_300; -gtk-icon-shadow: 0 1px 1px @COCOA_500; } .color-button.mint check, .color-button.mint radio { background-color: @MINT_500; -gtk-icon-shadow: 0 1px 1px @MINT_700; } .color-button.pink check, .color-button.pink radio, .color-button.bubblegum check, .color-button.bubblegum radio { background-color: @BUBBLEGUM_500; -gtk-icon-shadow: 0 1px 1px @BUBBLEGUM_700; } .color-button.slate check, .color-button.slate radio { background-color: @SLATE_300; -gtk-icon-shadow: 0 1px 1px @SLATE_500; } .color-button.auto radio { background-image: url("assets/color-button-auto.png"); background-position: -1px -1px; background-repeat: no-repeat; background-size: calc(100% + 2px); } .xfce4-panel.panel { background-color: #2e3440; text-shadow: none; -gtk-icon-shadow: none; } #tasklist-button { color: rgba(216, 222, 233, 0.8); border-radius: 0; border: none; background-color: rgba(46, 52, 64, 0); } #tasklist-button:hover { color: #f9fafb; background-color: rgba(0, 0, 0, 0.17); } #tasklist-button:checked { color: white; background-color: rgba(0, 0, 0, 0.25); box-shadow: inset 0 -2px #81a1c1; } .xfce4-panel.panel button.flat:not(.open_group), .mate-panel-menu-bar button:not(#tasklist-button), panel-toplevel.background button:not(#tasklist-button) { color: #d8dee9; border-radius: 0; border: none; background-color: rgba(46, 52, 64, 0); } .xfce4-panel.panel button.flat:hover:not(.open_group), .mate-panel-menu-bar button:hover:not(#tasklist-button), panel-toplevel.background button:hover:not(#tasklist-button) { border: none; background-color: #434c5e; } .xfce4-panel.panel button.flat:active:not(.open_group), .mate-panel-menu-bar button:active:not(#tasklist-button), panel-toplevel.background button:active:not(#tasklist-button), .xfce4-panel.panel button.flat:checked:not(.open_group), .mate-panel-menu-bar button:checked:not(#tasklist-button), panel-toplevel.background button:checked:not(#tasklist-button) { color: #fefefe; border: none; background-color: #81a1c1; } .xfce4-panel.panel button.flat:active:not(.open_group) label, .mate-panel-menu-bar button:active:not(#tasklist-button) label, panel-toplevel.background button:active:not(#tasklist-button) label, .xfce4-panel.panel button.flat:active:not(.open_group) image, .mate-panel-menu-bar button:active:not(#tasklist-button) image, panel-toplevel.background button:active:not(#tasklist-button) image, .xfce4-panel.panel button.flat:checked:not(.open_group) label, .mate-panel-menu-bar button:checked:not(#tasklist-button) label, panel-toplevel.background button:checked:not(#tasklist-button) label, .xfce4-panel.panel button.flat:checked:not(.open_group) image, .mate-panel-menu-bar button:checked:not(#tasklist-button) image, panel-toplevel.background button:checked:not(#tasklist-button) image { color: inherit; } #whiskermenu-window button { background-color: transparent; border: none; border-radius: 0; font-weight: normal; padding: 3px; margin: 1px 2px; } #whiskermenu-window button:hover, #whiskermenu-window button:checked { background-color: #81a1c1; } /* Vala-appmenu-plugin*/ .-vala-panel-appmenu-core scrolledwindow, .-vala-panel-appmenu-private > menuitem, .-vala-panel-appmenu-private > menuitem:first-child > label { color: #d8dee9; } #XfceNotifyWindow { background-color: #2a2f3a; border-radius: 12px; border-width: 1px; border: 1px solid #1f232b; color: #d8dee9; padding: 40px; } #XfceNotifyWindow:hover, #XfceNotifyWindow:focus { background-color: #2e3440; } #XfceNotifyWindow label, #XfceNotifyWindow image { color: #d8dee9; } #XfceNotifyWindow button { color: #d8dee9; border-radius: 6px; text-shadow: none; box-shadow: none; border: 1px solid #1f232b; background-color: #343b48; } #XfceNotifyWindow button:hover { color: #d8dee9; outline-color: rgba(216, 222, 233, 0.3); background-color: #81a1c1; text-shadow: none; } #XfceNotifyWindow button:hover label { color: #fefefe; } /******** * Unity * *********/ /* Unity window border color */ /* Unity window text color */ /* Backdrop Unity window text color */ /* Unity panel color #454D50 */ UnityDecoration { background-color: #eeeeee; color: #31363D; } UnityDecoration .top { padding: 0 5px 0 5px; border-radius: 4px 4px 0px 0px; box-shadow: none; border: 1px solid #eeeeee; border-bottom-width: 0; background-color: #eeeeee; color: #31363D; border-top: 1px solid rgba(255, 255, 255, 0.1); } UnityDecoration .top:backdrop { border-bottom-width: 0; color: #1a1d21; border-top: 1px solid rgba(255, 255, 255, 0.1); } UnityDecoration .top .menuitem { color: #31363D; } UnityDecoration .top .menuitem:backdrop { color: #1a1d21; } UnityDecoration.left, UnityDecoration.right { background-repeat: repeat-x; background-color: #ececec; background-size: 1px 120px; background-clip: border-box; background-image: linear-gradient(to bottom, #eeeeee, #ececec); } UnityDecoration.bottom { background-size: 1px; background-repeat: repeat-x; background-color: #ececec; } UnityDecoration.left:backdrop, UnityDecoration.right:backdrop, UnityDecoration.bottom:backdrop { background-size: 1px; background-repeat: repeat-x; } /************** * Unity Panel * ***************/ UnityPanelWidget, .unity-panel { background-color: #d5d5d5; color: #31363D; } UnityPanelWidget:backdrop, .unity-panel:backdrop { color: #1a1d21; } .unity-panel.menuitem, .unity-panel .menuitem { border-width: 0 1px; color: #31363D; } .unity-panel.menubar, .unity-panel .menubar { color: #31363D; } .unity-panel.menu.menubar, .unity-panel .menu .menubar { background-color: #d5d5d5; color: #31363D; } .unity-panel.menubar:backdrop, .unity-panel .menubar *:backdrop { color: #8e95a4; } .unity-panel.menubar.menuitem, .unity-panel.menubar .menuitem { padding: 3px 5px; border-width: 1px; border-style: solid; border: none; background: none; color: #31363D; box-shadow: none; } .unity-panel.menubar.menuitem:hover, .unity-panel.menubar .menuitem:hover { border-radius: 0; background-color: #ebebeb; color: #31363D; box-shadow: none; } .unity-panel.menubar .menuitem *:hover { color: white; box-shadow: none; } .unity-panel.menubar .menuitem.separator, .unity-panel.menubar.menuitem.separator { border: none; color: #262a34; } /* Force Quit */ SheetStyleDialog.unity-force-quit { background-color: #3b4252; } @keyframes playbackmenuitem_spinner { to { -gtk-icon-transform: rotate(1turn); } } .menu IdoPlaybackMenuItem.menuitem:active { -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); animation: playbackmenuitem_spinner 1s infinite linear; color: #81a1c1; } .mate-panel-menu-bar, .mate-panel-menu-bar menubar, panel-toplevel.background, panel-toplevel.background menubar { background-color: #2e3440; } .mate-panel-menu-bar menubar, .mate-panel-menu-bar #PanelApplet label, .mate-panel-menu-bar #PanelApplet image, panel-toplevel.background menubar, panel-toplevel.background #PanelApplet label, panel-toplevel.background #PanelApplet image { color: #d8dee9; } .mate-panel-menu-bar button label, .mate-panel-menu-bar button image, .mate-panel-menu-bar #tasklist-button label, .mate-panel-menu-bar #tasklist-button image, panel-toplevel.background button label, panel-toplevel.background button image, panel-toplevel.background #tasklist-button label, panel-toplevel.background #tasklist-button image { color: inherit; } .mate-panel-menu-bar .wnck-pager, panel-toplevel.background .wnck-pager { color: #6c6f75; background-color: #282d37; } .mate-panel-menu-bar .wnck-pager:hover, panel-toplevel.background .wnck-pager:hover { background-color: #39404f; } .mate-panel-menu-bar .wnck-pager:selected, panel-toplevel.background .wnck-pager:selected { color: #c5d4e3; background-color: #81a1c1; } MsdOsdWindow.background.osd { border-radius: 2px; border: 1px solid #262a34; } MsdOsdWindow.background.osd .progressbar { background-color: #81a1c1; border: none; border-color: #81a1c1; border-radius: 5px; } MsdOsdWindow.background.osd .trough { background-color: rgba(29, 33, 40, 0.93); border: none; border-radius: 5px; } /*********************** * App-Specific Styles * ***********************/ /********* * Geary * *********/ .geary-titlebar-left .separator, .geary-titlebar-right .separator { opacity: 0; } ConversationListView .view:active, ConversationListView iconview:active, ConversationListView .view:selected, ConversationListView iconview:selected { background-color: #81a1c1; color: #fefefe; } ConversationListView .view:active:backdrop, ConversationListView iconview:active:backdrop, ConversationListView .view:selected:backdrop, ConversationListView iconview:selected:backdrop { background-color: rgba(129, 161, 193, 0.6); color: rgba(254, 254, 254, 0.5); } ConversationListView .view .cell, ConversationListView iconview .cell { border: solid rgba(0, 0, 0, 0.2); border-width: 0 0 1px 0; } ConversationListView .view .cell:selected, ConversationListView iconview .cell:selected { color: #fefefe; border: 0px solid #5f88b0; } /*********** * LightDm * ***********/ #panel_window { background-color: #2e3440; color: #d8dee9; font-weight: bold; box-shadow: inset 0 -1px #1f232b; } #panel_window .menubar, #panel_window .menubar > .menuitem menubar, #panel_window menubar > menuitem { background-color: transparent; color: #d8dee9; font-weight: bold; } #panel_window .menubar .menuitem:disabled, #panel_window menubar menuitem:disabled { color: rgba(216, 222, 233, 0.5); } #panel_window .menubar .menuitem:disabled GtkLabel, #panel_window menubar menuitem:disabled GtkLabel { color: inherit; } #panel_window .menubar .menuitem:disabled label, #panel_window menubar menuitem:disabled label { color: inherit; } #panel_window .menubar .menu > .menuitem, #panel_window menubar menu > menuitem { font-weight: normal; } #login_window, #shutdown_dialog, #restart_dialog { font-weight: normal; border-style: none; background-color: transparent; color: #d8dee9; } #content_frame { padding-bottom: 14px; background-color: #434c5e; border-top-left-radius: 2px; border-top-right-radius: 2px; border: solid rgba(0, 0, 0, 0.1); border-width: 1px 1px 0 1px; } #content_frame button { font-weight: normal; color: #d8dee9; background-color: #3c4454; text-shadow: none; } #content_frame button:hover { color: #d8dee9; outline-color: rgba(216, 222, 233, 0.3); background-color: #3b4252; text-shadow: none; } #content_frame button:active, #content_frame button:checked { color: #d8dee9; outline-color: rgba(216, 222, 233, 0.3); background-color: #81a1c1; text-shadow: none; } #content_frame button:disabled { color: #b9bfcb; outline-color: rgba(216, 222, 233, 0.3); background-color: #404859; text-shadow: none; } #buttonbox_frame { padding-top: 20px; padding-bottom: 0px; border-style: none; background-color: #2b313c; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border: solid rgba(0, 0, 0, 0.1); border-width: 0 1px 1px 1px; } #buttonbox_frame button { color: #d8dee9; border-color: #1f232b; background-color: rgba(40, 45, 55, 0.93); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } #buttonbox_frame button:hover { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(65, 74, 91, 0.93), rgba(65, 74, 91, 0.93)); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } #buttonbox_frame button:active, #buttonbox_frame button:checked { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(52, 59, 73, 0.93), rgba(52, 59, 73, 0.93)); background-clip: padding-box; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(216, 222, 233, 0.3); } #buttonbox_frame button:disabled { color: #808690; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(58, 63, 73, 0.5), rgba(58, 63, 73, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } #login_window #user_combobox { color: #d8dee9; font-size: 13px; } #login_window #user_combobox .menu, #login_window #user_combobox menu { font-weight: normal; } #user_image { padding: 3px; border-radius: 2px; } #greeter_infobar { border-bottom-width: 0; font-weight: bold; } .nemo-window .places-treeview .view.cell:hover, .nemo-window .places-treeview iconview.cell:hover, .nemo-window .places-treeview iconview.cell:hover { background: rgba(40, 45, 55, 0.7); } .nemo-window .places-treeview .view.cell:selected, .nemo-window .places-treeview iconview.cell:selected, .nemo-window .places-treeview iconview.cell:selected { background: #81a1c1; color: #fefefe; } .nemo-window .sidebar { background-color: #2e3440; } .nemo-window .sidebar .view, .nemo-window .sidebar iconview, .nemo-window .sidebar .iconview, .nemo-window .sidebar row { color: #98abb2; background-color: transparent; } .nemo-window .nemo-window-pane widget.entry { background-clip: padding-box; min-height: 28px; padding: 5px; color: #d8dee9; border: 1px solid #262a34; border-radius: 3px; box-shadow: inset 0 1px rgba(0, 0, 0, 0.9), inset 1px 0 rgba(0, 0, 0, 0.96), inset -1px 0 rgba(0, 0, 0, 0.96), inset 0 -1px rgba(0, 0, 0, 0.98), 0 1px rgba(255, 255, 255, 0.6); } .nemo-window .nemo-window-pane widget.entry:selected { background-color: #81a1c1; color: #fefefe; } .nemo-window toolbar.primary-toolbar { margin-bottom: -1px; background: #2b313c; } .nemo-window toolbar.primary-toolbar button { color: #d8dee9; border-radius: 6px; text-shadow: none; box-shadow: none; border: 1px solid #1f232b; background-color: #343b48; min-height: 24px; padding: 3px; } .nemo-window toolbar.primary-toolbar button:hover { color: #fefefe; text-shadow: none; background-color: rgba(129, 161, 193, 0.8); border-color: #1f232b; } .nemo-window toolbar.primary-toolbar button:selected, .nemo-window toolbar.primary-toolbar button:active, .nemo-window toolbar.primary-toolbar button:checked { color: #fefefe; outline-color: rgba(254, 254, 254, 0.3); background-color: #81a1c1; text-shadow: none; } .nemo-window toolbar.primary-toolbar button:selected:backdrop, .nemo-window toolbar.primary-toolbar button:active:backdrop, .nemo-window toolbar.primary-toolbar button:checked:backdrop { color: rgba(254, 254, 254, 0.5); background-color: rgba(129, 161, 193, 0.6); border-color: #1f232b; text-shadow: none; box-shadow: none; } .nemo-window toolbar.primary-toolbar button:backdrop, .nemo-window toolbar.primary-toolbar button:disabled, .nemo-window toolbar.primary-toolbar button:backdrop:disabled { color: rgba(216, 222, 233, 0.2); background-color: #2e3440; border-color: #1f232b; text-shadow: none; box-shadow: none; } .nemo-window .nemo-inactive-pane .view, .nemo-window .nemo-inactive-pane iconview, .nemo-window .nemo-inactive-pane iconview { background-color: #353b49; } /* thunar */ .thunar toolbar { background-color: #2b313c; } .thunar toolbar .flat { color: #d8dee9; } /* buttons in toolbar */ .thunar toolbar.horizontal button image { -gtk-icon-transform: scale(0.72); } scrolledwindow.sidebar treeview.view { background: #2a2f3a; padding: 1.5px; } /* path-bar of thunar */ window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar .path-bar-button, .thunar toolbar .path-bar-button { color: #d8dee9; border-radius: 6px; text-shadow: none; box-shadow: none; border: 1px solid #1f232b; background-color: #343b48; border-radius: 0; border-right: 0.5px solid #1f232b; box-shadow: none; min-height: 20px; padding: 3px 4px; } window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar .path-bar-button:first-child, .thunar toolbar .path-bar-button:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar .path-bar-button:last-child, .thunar toolbar .path-bar-button:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-right-style: solid; } window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar .path-bar-button:only-child, .thunar toolbar .path-bar-button:only-child { border-radius: 4px; border-style: solid; } window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar .path-bar-button:hover, .thunar toolbar .path-bar-button:hover { color: #81a1c1; } window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar .path-bar-button:checked, .thunar toolbar .path-bar-button:checked { color: #fff; outline-color: rgba(255, 255, 255, 0.3); background-color: rgba(129, 161, 193, 0.7); text-shadow: none; } window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar .toggle.path-bar-button:hover, .thunar toolbar .toggle.path-bar-button:hover { color: #fff; outline-color: rgba(255, 255, 255, 0.3); background-color: rgba(129, 161, 193, 0.7); text-shadow: none; } /* thunar sidepane */ window.thunar paned > scrolledwindow treeview.view { color: #98abb2; } window.thunar paned > scrolledwindow treeview.view:hover, window.thunar paned > scrolledwindow treeview.view:selected { background: #81a1c1; color: #fefefe; border-radius: 0; box-shadow: none; } .colorpad { color: @colorpad_fg_color; } .colorpad, .colorpad:backdrop, .colorpad:hover, .colorpad:hover:backdrop, .colorpad:active, .colorpad:active:backdrop, .colorpad:checked, .colorpad:checked:backdrop { background-color: @colorpad_color; } .colorpad:hover { filter: brightness(93%); } .colorpad:active { filter: brightness(86%); } .colorpad:checked { filter: brightness(100%); box-shadow: 0px 0px 0px 1.5px #81a1c1, inset 0px -3px 0px 0px @colorpad_fg_color; } .colorsetter { color: @colorsetter_fg_color; } .colorsetter, .colorsetter:backdrop, .colorsetter:hover, .colorsetter:hover:backdrop, .colorsetter:active, .colorsetter:active:backdrop, .colorsetter:checked, .colorsetter:checked:backdrop { background-color: @colorsetter_color; } .colorsetter:hover { filter: brightness(93%); } .colorsetter:active { filter: brightness(86%); } .colorsetter:checked { filter: brightness(100%); } .overlay_toolbar, .overlay_toolbar_scrollable { background: #464e61; padding: 10px; } /*# sourceMappingURL=gtk-dark.css.map */ ================================================ FILE: gtk-4.0/gtk-dark.scss ================================================ $variant: 'dark'; $accent: 'green'; @import '../gtk-3.0/nord'; @import '../gtk-3.0/colors'; @import '../gtk-3.0/elementary-colors'; @import '../gtk-3.0/colors-public'; @import 'drawing'; @import 'common'; @import 'widgets'; @import 'apps'; ================================================ FILE: gtk-4.0/gtk.css ================================================ /*$selected_bg_color: #00e8c6;06d6a0*/ /* GTK NAMED COLORS ---------------- use responsibly! */ /* widget text/foreground color */ @define-color theme_fg_color #3b4252; /* text color for entries, views and content in general */ @define-color theme_text_color #3b4252; /* widget base background color */ @define-color theme_bg_color #d8dee9; /* text widgets and the like base background color */ @define-color theme_base_color #e5e9f0; /* base background color of selections */ @define-color theme_selected_bg_color #81a1c1; /* text/foreground color of selections */ @define-color theme_selected_fg_color #fefefe; /* base background color of disabled widgets */ @define-color insensitive_bg_color #dde2ec; /* text foreground color of disabled widgets */ @define-color insensitive_fg_color #8a909e; /* disabled text widgets and the like base background color */ @define-color insensitive_base_color #e5e9f0; /* widget text/foreground color on backdrop windows */ @define-color theme_unfocused_fg_color #8a909e; /* text color for entries, views and content in general on backdrop windows */ @define-color theme_unfocused_text_color #3b4252; /* widget base background color on backdrop windows */ @define-color theme_unfocused_bg_color #d8dee9; /* text widgets and the like base background color on backdrop windows */ @define-color theme_unfocused_base_color #e2e6ee; /* base background color of selections on backdrop windows */ @define-color theme_unfocused_selected_bg_color #81a1c1; /* text/foreground color of selections on backdrop windows */ @define-color theme_unfocused_selected_fg_color #fefefe; /* widgets main borders color */ @define-color borders #c5cedd; /* widgets main borders color on backdrop windows */ @define-color unfocused_borders #c7d0de; /* these are pretty self explicative */ @define-color warning_color #d08770; @define-color error_color #bf616a; @define-color success_color #88c0d0; @define-color fg_color #3b4252; @define-color text_color #3b4252; @define-color bg_color #d8dee9; @define-color base_color #e5e9f0; @define-color selected_bg_color #81a1c1; @define-color selected_fg_color #fefefe; @define-color unfocused_fg_color #8a909e; @define-color unfocused_text_color #3b4252; @define-color unfocused_bg_color #d8dee9; @define-color unfocused_base_color #e2e6ee; @define-color unfocused_selected_bg_color #81a1c1; @define-color unfocused_selected_fg_color #fefefe; /* these colors are exported for the window manager and shouldn't be used in applications, read if you used those and something break with a version upgrade you're on your own... */ @define-color wm_title shade(#3b4252, 1.8); @define-color wm_unfocused_title #8a909e; @define-color wm_highlight rgba(255, 255, 255, 0.2); @define-color wm_borders_edge rgba(255, 255, 255, 0.2); @define-color wm_bg_a shade(#d8dee9, 1.2); @define-color wm_bg_b #d8dee9; @define-color wm_shadow alpha(black, 0.35); @define-color wm_border alpha(black, 0.18); @define-color wm_button_hover_color_a shade(#d8dee9, 1.3); @define-color wm_button_hover_color_b #d8dee9; @define-color wm_button_active_color_a shade(#d8dee9, 0.85); @define-color wm_button_active_color_b shade(#d8dee9, 0.89); @define-color wm_button_active_color_c shade(#d8dee9, 0.9); @define-color content_view_bg #e5e9f0; @define-color text_view_bg #e5e9f0; @define-color budgie_tasklist_indicator_color #81a1c1; @define-color budgie_tasklist_indicator_color_active #81a1c1; @define-color STRAWBERRY_100 #ff8c82; @define-color STRAWBERRY_300 #ed5353; @define-color STRAWBERRY_500 #c6262e; @define-color STRAWBERRY_700 #a10705; @define-color STRAWBERRY_900 #7a0000; @define-color ORANGE_100 #ffc27d; @define-color ORANGE_300 #ffa154; @define-color ORANGE_500 #f37329; @define-color ORANGE_700 #cc3b02; @define-color ORANGE_900 #a62100; @define-color BANANA_100 #fff394; @define-color BANANA_300 #ffe16b; @define-color BANANA_500 #f9c440; @define-color BANANA_700 #d48e15; @define-color BANANA_900 #ad5f00; @define-color LIME_100 #d1ff82; @define-color LIME_300 #9bdb4d; @define-color LIME_500 #68b723; @define-color LIME_700 #3a9104; @define-color LIME_900 #206b00; @define-color MINT_100 #89ffdd; @define-color MINT_300 #43d6b5; @define-color MINT_500 #28bca3; @define-color MINT_700 #0e9a83; @define-color MINT_900 #007367; @define-color BLUEBERRY_100 #8cd5ff; @define-color BLUEBERRY_300 #64baff; @define-color BLUEBERRY_500 #3689e6; @define-color BLUEBERRY_700 #0d52bf; @define-color BLUEBERRY_900 #002e99; @define-color BUBBLEGUM_100 #fe9ab8; @define-color BUBBLEGUM_300 #f4679d; @define-color BUBBLEGUM_500 #de3e80; @define-color BUBBLEGUM_700 #bc245d; @define-color BUBBLEGUM_900 #910e38; @define-color GRAPE_100 #e4c6fa; @define-color GRAPE_300 #cd9ef7; @define-color GRAPE_500 #a56de2; @define-color GRAPE_700 #7239b3; @define-color GRAPE_900 #452981; @define-color COCOA_100 #a3907c; @define-color COCOA_300 #8a715e; @define-color COCOA_500 #715344; @define-color COCOA_700 #57392d; @define-color COCOA_900 #3d211b; @define-color SILVER_100 #fafafa; @define-color SILVER_300 #d4d4d4; @define-color SILVER_500 #abacae; @define-color SILVER_700 #7e8087; @define-color SILVER_900 #555761; @define-color SLATE_100 #95a3ab; @define-color SLATE_300 #667885; @define-color SLATE_500 #485a6c; @define-color SLATE_700 #273445; @define-color SLATE_900 #0e141f; @define-color BLACK_100 #666; @define-color BLACK_300 #4d4d4d; @define-color BLACK_500 #333; @define-color BLACK_700 #1a1a1a; @define-color BLACK_900 #000; /***************** * Drawing mixins * *****************/ /********* * Common * *********/ * { padding: 0; outline-color: rgba(59, 66, 82, 0.3); outline-style: dashed; outline-offset: -3px; outline-width: 0px; -gtk-secondary-caret-color: #81a1c1; } /*********** * Widgets * ***********/ /*************** * Action bars * ***************/ .action-bar, actionbar > revealer > box { background-color: #c5cedd; border: solid #c5cedd; border-width: 1px 0 0 0; color: #3b4252; box-shadow: none; } .action-bar:backdrop, actionbar > revealer > box:backdrop { background-color: #b7c2d7; box-shadow: none; } .action-bar:first-child, actionbar > revealer > box:first-child { border-radius: 6px 6px 0px 0px; border-width: 1px 1px 0px 1px; } .action-bar:last-child, actionbar > revealer > box:last-child { border-radius: 0 0 6px 6px; border-width: 0px 1px 1px 1px; } /********************* * App Notifications * *********************/ .app-notification, .app-notification.frame { padding: 10px; border-radius: 0 0 5px 5px; background-color: rgba(40, 45, 55, 0.93); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px); background-clip: padding-box; } .app-notification:backdrop, .app-notification.frame:backdrop { background-image: none; transition: 200ms ease-out; } .app-notification border, .app-notification.frame border { border: none; } toast { padding: 5px; background-color: #e5e9f0; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.35); color: #3b4252; } toast:backdrop { background-image: none; transition: 200ms ease-out; } toast button { padding: 2px; } toast button.circular.flat.image-button { padding: 2px; } toast button.circular.flat.image-button:hover { color: #fefefe; outline-color: rgba(254, 254, 254, 0.3); background-color: #bf616a; text-shadow: none; } /*************** * Base States * ***************/ .background { color: #3b4252; background-color: #d8dee9; } .background:backdrop { color: #8a909e; background-color: #d8dee9; text-shadow: none; -gtk-icon-shadow: none; } /* These wildcard seems unavoidable, need to investigate. Wildcards are bad and troublesome, use them with care, or better, just don't. Everytime a wildcard is used a kitten dies, painfully. */ .gtkstyle-fallback { color: #3b4252; background-color: #d8dee9; } .gtkstyle-fallback:hover { color: #3b4252; background-color: #f9fafb; } .gtkstyle-fallback:active { color: #3b4252; background-color: #b7c2d7; } .gtkstyle-fallback:disabled { color: #8a909e; background-color: #dde2ec; } .gtkstyle-fallback:selected { color: #fefefe; background-color: #81a1c1; } .history-view, .view, iconview, textview > text { color: #3b4252; background-color: #e5e9f0; } .history-view:backdrop, .view:backdrop, iconview:backdrop, textview > text:backdrop { color: #5c6371; background-color: #e2e6ee; } .history-view:selected:focus, .history-view:selected, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, textview > text:selected:focus, textview > text:selected { border-radius: 3px; } textview > text { background-color: transparent; } textview border { background-color: #dfe4ed; } .rubberband, rubberband, flowbox rubberband, .content-view rubberband, columnview.view > rubberband, treeview.view > rubberband { border: 1px solid #5f88b0; background-color: rgba(95, 136, 176, 0.2); } flowbox flowboxchild { padding: 3px; border-radius: 3px; } flowbox flowboxchild:selected { outline-offset: -2px; } gridview { padding: 10px; } gridview > child { padding: 7px; } gridview > child box { border-spacing: 5px; } label { caret-color: currentColor; } label.separator { color: #3b4252; } label.separator:backdrop { color: #8a909e; } label selection { background-color: #81a1c1; color: #fefefe; } label:disabled { color: #8a909e; } label:disabled:backdrop { color: #a7b5cd; } label:backdrop { color: #8a909e; } .dim-label, label.separator, .titlebar .subtitle, headerbar .subtitle { opacity: 0.55; text-shadow: none; } window.assistant .sidebar { background-color: #e5e9f0; border-top: 1px solid #c5cedd; } window.assistant .sidebar:backdrop { background-color: #e2e6ee; border-color: #c7d0de; } window.assistant.csd .sidebar { border-top-style: none; } window.assistant .sidebar label { padding: 6px 12px; } window.assistant .sidebar label.highlight { background-color: #81a1c1; color: #fefefe; } window.aboutdialog image.large-icons { -gtk-icon-size: 128px; } .app-notification, .app-notification.frame, .osd .scale-popup, .osd popover.background > arrow, .osd popover.background > contents, popover.background.touch-selection > arrow, popover.background.touch-selection > contents, popover.background.magnifier > arrow, popover.background.magnifier > contents, .osd { color: #d8dee9; border: none; background-color: rgba(40, 45, 55, 0.93); background-clip: padding-box; outline-color: rgba(216, 222, 233, 0.3); text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; } .app-notification:backdrop, .osd .scale-popup:backdrop, .osd popover.background > arrow:backdrop, .osd popover.background > contents:backdrop, popover.background.touch-selection > arrow:backdrop, popover.background.touch-selection > contents:backdrop, popover.background.magnifier > arrow:backdrop, popover.background.magnifier > contents:backdrop, .osd:backdrop { text-shadow: none; -gtk-icon-shadow: none; } /*********** * Buttons * ***********/ @keyframes needs_attention { from { background-image: radial-gradient(farthest-side, #81a1c1 0%, rgba(129, 161, 193, 0) 0%); } to { background-image: radial-gradient(farthest-side, #81a1c1 95%, rgba(129, 161, 193, 0)); } } notebook > header > tabs > arrow, .sidebar-pane .top-bar popover.background button, .content-pane .top-bar popover.background button, button { min-height: 22px; min-width: 16px; padding: 4px 6px; border: 1px solid #c5cedd; border-radius: 6px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); font-weight: normal; color: #3b4252; background-color: #e3e7ef; text-shadow: none; } notebook > header > tabs > arrow, .sidebar-pane .top-bar popover.background button.flat, .content-pane .top-bar popover.background button.flat, button.flat { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; transition: none; } notebook > header > tabs > arrow:hover, .sidebar-pane .top-bar popover.background button.flat:hover, .content-pane .top-bar popover.background button.flat:hover, button.flat:hover { transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-duration: 500ms; color: #fefefe; outline-color: rgba(254, 254, 254, 0.3); background-color: #81a1c1; text-shadow: none; } notebook > header > tabs > arrow:hover:active, .sidebar-pane .top-bar popover.background button.flat:hover:active, .content-pane .top-bar popover.background button.flat:hover:active, button.flat:hover:active { transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } notebook > header > tabs > arrow:hover, .sidebar-pane .top-bar popover.background button:hover, .content-pane .top-bar popover.background button:hover, button:hover { color: #fefefe; outline-color: rgba(254, 254, 254, 0.3); background-color: #81a1c1; text-shadow: none; -gtk-icon-filter: brightness(1.2); } notebook > header > tabs > arrow:active, notebook > header > tabs > arrow:checked, .sidebar-pane .top-bar popover.background button:active, .content-pane .top-bar popover.background button:active, .sidebar-pane .top-bar popover.background button:checked, .content-pane .top-bar popover.background button:checked, button:active, button:checked { color: #fefefe; outline-color: rgba(254, 254, 254, 0.3); background-color: #7094b9; text-shadow: none; transition-duration: 50ms; } notebook > header > tabs > arrow:backdrop, notebook > header > tabs > arrow:backdrop, .sidebar-pane .top-bar popover.background button:backdrop.flat, .content-pane .top-bar popover.background button:backdrop.flat, .sidebar-pane .top-bar popover.background button:backdrop, .content-pane .top-bar popover.background button:backdrop, button:backdrop.flat, button:backdrop { color: #5c6371; outline-color: rgba(59, 66, 82, 0.3); background-color: #e2e6ee; text-shadow: none; transition: 200ms ease-out; -gtk-icon-filter: none; } notebook > header > tabs > arrow:backdrop:active, notebook > header > tabs > arrow:backdrop:checked, notebook > header > tabs > arrow:backdrop:active, notebook > header > tabs > arrow:backdrop:checked, .sidebar-pane .top-bar popover.background button:backdrop.flat:active, .content-pane .top-bar popover.background button:backdrop.flat:active, .sidebar-pane .top-bar popover.background button:backdrop.flat:checked, .content-pane .top-bar popover.background button:backdrop.flat:checked, .sidebar-pane .top-bar popover.background button:backdrop:active, .content-pane .top-bar popover.background button:backdrop:active, .sidebar-pane .top-bar popover.background button:backdrop:checked, .content-pane .top-bar popover.background button:backdrop:checked, button:backdrop.flat:active, button:backdrop.flat:checked, button:backdrop:active, button:backdrop:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(59, 66, 82, 0.3); background-color: #81a1c1; text-shadow: none; } notebook > header > tabs > arrow:backdrop:active label, notebook > header > tabs > arrow:backdrop:checked label, notebook > header > tabs > arrow:backdrop:active label, notebook > header > tabs > arrow:backdrop:checked label, .sidebar-pane .top-bar popover.background button:backdrop.flat:active label, .content-pane .top-bar popover.background button:backdrop.flat:active label, .sidebar-pane .top-bar popover.background button:backdrop.flat:checked label, .content-pane .top-bar popover.background button:backdrop.flat:checked label, .sidebar-pane .top-bar popover.background button:backdrop:active label, .content-pane .top-bar popover.background button:backdrop:active label, .sidebar-pane .top-bar popover.background button:backdrop:checked label, .content-pane .top-bar popover.background button:backdrop:checked label, button:backdrop.flat:active label, button:backdrop.flat:checked label, button:backdrop:active label, button:backdrop:checked label { color: rgba(254, 254, 254, 0.7); } notebook > header > tabs > arrow:backdrop:disabled, notebook > header > tabs > arrow:backdrop:disabled, .sidebar-pane .top-bar popover.background button:backdrop.flat:disabled, .content-pane .top-bar popover.background button:backdrop.flat:disabled, .sidebar-pane .top-bar popover.background button:backdrop:disabled, .content-pane .top-bar popover.background button:backdrop:disabled, button:backdrop.flat:disabled, button:backdrop:disabled { color: #5c6371; outline-color: rgba(59, 66, 82, 0.3); background-color: #dde2ec; text-shadow: none; } notebook > header > tabs > arrow:backdrop:disabled:active, notebook > header > tabs > arrow:backdrop:disabled:checked, notebook > header > tabs > arrow:backdrop:disabled:active, notebook > header > tabs > arrow:backdrop:disabled:checked, .sidebar-pane .top-bar popover.background button:backdrop.flat:disabled:active, .content-pane .top-bar popover.background button:backdrop.flat:disabled:active, .sidebar-pane .top-bar popover.background button:backdrop.flat:disabled:checked, .content-pane .top-bar popover.background button:backdrop.flat:disabled:checked, .sidebar-pane .top-bar popover.background button:backdrop:disabled:active, .content-pane .top-bar popover.background button:backdrop:disabled:active, .sidebar-pane .top-bar popover.background button:backdrop:disabled:checked, .content-pane .top-bar popover.background button:backdrop:disabled:checked, button:backdrop.flat:disabled:active, button:backdrop.flat:disabled:checked, button:backdrop:disabled:active, button:backdrop:disabled:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(59, 66, 82, 0.3); background-color: #81a1c1; text-shadow: none; } notebook > header > tabs > arrow:backdrop, notebook > header > tabs > arrow:disabled, notebook > header > tabs > arrow:backdrop:disabled, .sidebar-pane .top-bar popover.background button.flat:backdrop, .content-pane .top-bar popover.background button.flat:backdrop, .sidebar-pane .top-bar popover.background button.flat:disabled, .content-pane .top-bar popover.background button.flat:disabled, .sidebar-pane .top-bar popover.background button.flat:backdrop:disabled, .content-pane .top-bar popover.background button.flat:backdrop:disabled, button.flat:backdrop, button.flat:disabled, button.flat:backdrop:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } notebook > header > tabs > arrow:disabled, .sidebar-pane .top-bar popover.background button:disabled, .content-pane .top-bar popover.background button:disabled, button:disabled { color: #5c6371; outline-color: rgba(59, 66, 82, 0.3); background-color: #dde2ec; text-shadow: none; } notebook > header > tabs > arrow:disabled:active, notebook > header > tabs > arrow:disabled:checked, .sidebar-pane .top-bar popover.background button:disabled:active, .content-pane .top-bar popover.background button:disabled:active, .sidebar-pane .top-bar popover.background button:disabled:checked, .content-pane .top-bar popover.background button:disabled:checked, button:disabled:active, button:disabled:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(59, 66, 82, 0.3); background-color: #81a1c1; text-shadow: none; } notebook > header > tabs > arrow:disabled:active label, notebook > header > tabs > arrow:disabled:checked label, .sidebar-pane .top-bar popover.background button:disabled:active label, .content-pane .top-bar popover.background button:disabled:active label, .sidebar-pane .top-bar popover.background button:disabled:checked label, .content-pane .top-bar popover.background button:disabled:checked label, button:disabled:active label, button:disabled:checked label { color: rgba(254, 254, 254, 0.7); } notebook > header > tabs > arrow.image-button, .sidebar-pane .top-bar popover.background button.image-button, .content-pane .top-bar popover.background button.image-button, button.image-button { min-width: 24px; padding-left: 4px; padding-right: 4px; } notebook > header > tabs > arrow.image-button.circular, notebook > header > tabs > arrow.image-button.sidebar-button, .sidebar-pane .top-bar popover.background button.image-button.circular, .content-pane .top-bar popover.background button.image-button.circular, .sidebar-pane .top-bar popover.background button.image-button.sidebar-button, .content-pane .top-bar popover.background button.image-button.sidebar-button, button.image-button.circular, button.image-button.sidebar-button { padding: 6px 4px; border-radius: 50px; box-shadow: none; } notebook > header > tabs > arrow.text-button, .sidebar-pane .top-bar popover.background button.text-button, .content-pane .top-bar popover.background button.text-button, button.text-button { padding-left: 16px; padding-right: 16px; } notebook > header > tabs > arrow.text-button.image-button, .sidebar-pane .top-bar popover.background button.text-button.image-button, .content-pane .top-bar popover.background button.text-button.image-button, button.text-button.image-button { padding-left: 8px; padding-right: 8px; border-radius: 6px; } notebook > header > tabs > arrow.text-button.image-button label, .sidebar-pane .top-bar popover.background button.text-button.image-button label, .content-pane .top-bar popover.background button.text-button.image-button label, button.text-button.image-button label { padding-left: 8px; padding-right: 8px; } combobox:drop(active) button.combo, notebook > header > tabs > arrow:drop(active), .sidebar-pane .top-bar popover.background button:drop(active), .content-pane .top-bar popover.background button:drop(active), button:drop(active) { color: #a3be8c; border-color: #a3be8c; box-shadow: inset 0 0 0 1px #a3be8c; } row:selected .sidebar-pane .top-bar popover.background button, .sidebar-pane .top-bar popover.background row:selected button, row:selected .content-pane .top-bar popover.background button, .content-pane .top-bar popover.background row:selected button, row:selected button { border-color: #5f88b0; } row:selected .sidebar-pane .top-bar popover.background button.flat:not(:active):not(:checked):not(:hover):not(disabled), .sidebar-pane .top-bar popover.background row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled), row:selected .content-pane .top-bar popover.background button.flat:not(:active):not(:checked):not(:hover):not(disabled), .content-pane .top-bar popover.background row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled), row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled) { color: #fefefe; border-color: transparent; } row:selected .sidebar-pane .top-bar popover.background button.flat:not(:active):not(:checked):not(:hover):not(disabled):backdrop, .sidebar-pane .top-bar popover.background row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled):backdrop, row:selected .content-pane .top-bar popover.background button.flat:not(:active):not(:checked):not(:hover):not(disabled):backdrop, .content-pane .top-bar popover.background row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled):backdrop, row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled):backdrop { color: #e2e6ee; } .sidebar-pane .top-bar popover.background button.osd, .content-pane .top-bar popover.background button.osd, button.osd { min-width: 24px; min-height: 20px; color: #d8dee9; border-radius: 6px; outline-color: rgba(216, 222, 233, 0.3); color: #d8dee9; border-color: #1f232b; background-color: rgba(40, 45, 55, 0.93); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); border: none; box-shadow: none; } .sidebar-pane .top-bar popover.background button.osd.image-button, .content-pane .top-bar popover.background button.osd.image-button, button.osd.image-button { min-width: 32px; } .sidebar-pane .top-bar popover.background button.osd:hover, .content-pane .top-bar popover.background button.osd:hover, button.osd:hover { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(65, 74, 91, 0.93), rgba(65, 74, 91, 0.93)); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); border: none; box-shadow: none; } .sidebar-pane .top-bar popover.background button.osd:active, .content-pane .top-bar popover.background button.osd:active, .sidebar-pane .top-bar popover.background button.osd:checked, .content-pane .top-bar popover.background button.osd:checked, button.osd:active, button.osd:checked { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(52, 59, 73, 0.93), rgba(52, 59, 73, 0.93)); background-clip: padding-box; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(216, 222, 233, 0.3); border: none; box-shadow: none; } .sidebar-pane .top-bar popover.background button.osd:disabled:backdrop, .content-pane .top-bar popover.background button.osd:disabled:backdrop, .sidebar-pane .top-bar popover.background button.osd:disabled, .content-pane .top-bar popover.background button.osd:disabled, button.osd:disabled:backdrop, button.osd:disabled { color: #808690; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(58, 63, 73, 0.5), rgba(58, 63, 73, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; border: none; } .sidebar-pane .top-bar popover.background button.osd:backdrop, .content-pane .top-bar popover.background button.osd:backdrop, button.osd:backdrop { color: #d8dee9; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(40, 45, 55, 0.93), rgba(40, 45, 55, 0.93)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; border: none; } .app-notification button, .app-notification.frame button, popover.background.touch-selection button, popover.background.magnifier button, .osd .sidebar-pane .top-bar popover.background button, .sidebar-pane .top-bar popover.background .osd button, .osd .content-pane .top-bar popover.background button, .content-pane .top-bar popover.background .osd button, .osd button { color: #d8dee9; border-color: #1f232b; background-color: rgba(40, 45, 55, 0.93); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } .app-notification button:hover, popover.background.touch-selection button:hover, popover.background.magnifier button:hover, .osd .sidebar-pane .top-bar popover.background button:hover, .sidebar-pane .top-bar popover.background .osd button:hover, .osd .content-pane .top-bar popover.background button:hover, .content-pane .top-bar popover.background .osd button:hover, .osd button:hover { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(65, 74, 91, 0.93), rgba(65, 74, 91, 0.93)); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } .app-notification button:active:backdrop, popover.background.touch-selection button:active:backdrop, popover.background.magnifier button:active:backdrop, .app-notification button:active, popover.background.touch-selection button:active, popover.background.magnifier button:active, .app-notification button:checked:backdrop, popover.background.touch-selection button:checked:backdrop, popover.background.magnifier button:checked:backdrop, .app-notification button:checked, popover.background.touch-selection button:checked, popover.background.magnifier button:checked, .osd .sidebar-pane .top-bar popover.background button:active:backdrop, .sidebar-pane .top-bar popover.background .osd button:active:backdrop, .osd .content-pane .top-bar popover.background button:active:backdrop, .content-pane .top-bar popover.background .osd button:active:backdrop, .osd .sidebar-pane .top-bar popover.background button:active, .sidebar-pane .top-bar popover.background .osd button:active, .osd .content-pane .top-bar popover.background button:active, .content-pane .top-bar popover.background .osd button:active, .osd .sidebar-pane .top-bar popover.background button:checked:backdrop, .sidebar-pane .top-bar popover.background .osd button:checked:backdrop, .osd .content-pane .top-bar popover.background button:checked:backdrop, .content-pane .top-bar popover.background .osd button:checked:backdrop, .osd .sidebar-pane .top-bar popover.background button:checked, .sidebar-pane .top-bar popover.background .osd button:checked, .osd .content-pane .top-bar popover.background button:checked, .content-pane .top-bar popover.background .osd button:checked, .osd button:active:backdrop, .osd button:active, .osd button:checked:backdrop, .osd button:checked { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(52, 59, 73, 0.93), rgba(52, 59, 73, 0.93)); background-clip: padding-box; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(216, 222, 233, 0.3); } .app-notification button:disabled:backdrop, popover.background.touch-selection button:disabled:backdrop, popover.background.magnifier button:disabled:backdrop, .app-notification button:disabled, popover.background.touch-selection button:disabled, popover.background.magnifier button:disabled, .osd .sidebar-pane .top-bar popover.background button:disabled:backdrop, .sidebar-pane .top-bar popover.background .osd button:disabled:backdrop, .osd .content-pane .top-bar popover.background button:disabled:backdrop, .content-pane .top-bar popover.background .osd button:disabled:backdrop, .osd .sidebar-pane .top-bar popover.background button:disabled, .sidebar-pane .top-bar popover.background .osd button:disabled, .osd .content-pane .top-bar popover.background button:disabled, .content-pane .top-bar popover.background .osd button:disabled, .osd button:disabled:backdrop, .osd button:disabled { color: #808690; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(58, 63, 73, 0.5), rgba(58, 63, 73, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } .app-notification button:backdrop, popover.background.touch-selection button:backdrop, popover.background.magnifier button:backdrop, .osd .sidebar-pane .top-bar popover.background button:backdrop, .sidebar-pane .top-bar popover.background .osd button:backdrop, .osd .content-pane .top-bar popover.background button:backdrop, .content-pane .top-bar popover.background .osd button:backdrop, .osd button:backdrop { color: #d8dee9; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(40, 45, 55, 0.93), rgba(40, 45, 55, 0.93)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } .app-notification button.flat, popover.background.touch-selection button.flat, popover.background.magnifier button.flat, .osd .sidebar-pane .top-bar popover.background button.flat, .sidebar-pane .top-bar popover.background .osd button.flat, .osd .content-pane .top-bar popover.background button.flat, .content-pane .top-bar popover.background .osd button.flat, .osd button.flat { color: #d8dee9; border-color: #1f232b; background-color: rgba(40, 45, 55, 0.93); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); box-shadow: none; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; } .app-notification button.flat:hover, popover.background.touch-selection button.flat:hover, popover.background.magnifier button.flat:hover, .osd .sidebar-pane .top-bar popover.background button.flat:hover, .sidebar-pane .top-bar popover.background .osd button.flat:hover, .osd .content-pane .top-bar popover.background button.flat:hover, .content-pane .top-bar popover.background .osd button.flat:hover, .osd button.flat:hover { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(65, 74, 91, 0.93), rgba(65, 74, 91, 0.93)); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } .app-notification button.flat:disabled, popover.background.touch-selection button.flat:disabled, popover.background.magnifier button.flat:disabled, .osd .sidebar-pane .top-bar popover.background button.flat:disabled, .sidebar-pane .top-bar popover.background .osd button.flat:disabled, .osd .content-pane .top-bar popover.background button.flat:disabled, .content-pane .top-bar popover.background .osd button.flat:disabled, .osd button.flat:disabled { color: #808690; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(58, 63, 73, 0.5), rgba(58, 63, 73, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; background-image: none; border-color: transparent; box-shadow: none; } .app-notification button.flat:backdrop, popover.background.touch-selection button.flat:backdrop, popover.background.magnifier button.flat:backdrop, .osd .sidebar-pane .top-bar popover.background button.flat:backdrop, .sidebar-pane .top-bar popover.background .osd button.flat:backdrop, .osd .content-pane .top-bar popover.background button.flat:backdrop, .content-pane .top-bar popover.background .osd button.flat:backdrop, .osd button.flat:backdrop { color: #d8dee9; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(40, 45, 55, 0.93), rgba(40, 45, 55, 0.93)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } .app-notification button.flat:active, popover.background.touch-selection button.flat:active, popover.background.magnifier button.flat:active, .app-notification button.flat:checked, popover.background.touch-selection button.flat:checked, popover.background.magnifier button.flat:checked, .osd .sidebar-pane .top-bar popover.background button.flat:active, .sidebar-pane .top-bar popover.background .osd button.flat:active, .osd .content-pane .top-bar popover.background button.flat:active, .content-pane .top-bar popover.background .osd button.flat:active, .osd .sidebar-pane .top-bar popover.background button.flat:checked, .sidebar-pane .top-bar popover.background .osd button.flat:checked, .osd .content-pane .top-bar popover.background button.flat:checked, .content-pane .top-bar popover.background .osd button.flat:checked, .osd button.flat:active, .osd button.flat:checked { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(52, 59, 73, 0.93), rgba(52, 59, 73, 0.93)); background-clip: padding-box; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(216, 222, 233, 0.3); } .sidebar-pane .top-bar popover.background button.suggested-action, .content-pane .top-bar popover.background button.suggested-action, button.suggested-action { border: none; box-shadow: none; color: #fff; border-radius: 6px; background: linear-gradient(to right, #88c0d0 0%, #88c0d0 100%); } .sidebar-pane .top-bar popover.background button.suggested-action label, .content-pane .top-bar popover.background button.suggested-action label, button.suggested-action label { color: #fff; } .sidebar-pane .top-bar popover.background button.suggested-action.flat, .content-pane .top-bar popover.background button.suggested-action.flat, .selection-mode windowcontrols button, button.suggested-action.flat { box-shadow: none; color: #fff; border-radius: 6px; background: linear-gradient(to right, #88c0d0 0%, #88c0d0 100%); } .sidebar-pane .top-bar popover.background button.suggested-action.flat label, .content-pane .top-bar popover.background button.suggested-action.flat label, .selection-mode windowcontrols button label, button.suggested-action.flat label { color: #fff; } .sidebar-pane .top-bar popover.background button.suggested-action:hover, .content-pane .top-bar popover.background button.suggested-action:hover, button.suggested-action:hover { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #88c0d0; text-shadow: none; opacity: 0.85; } .sidebar-pane .top-bar popover.background button.suggested-action:active, .content-pane .top-bar popover.background button.suggested-action:active, .sidebar-pane .top-bar popover.background button.suggested-action:checked, .content-pane .top-bar popover.background button.suggested-action:checked, button.suggested-action:active, button.suggested-action:checked { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #88c0d0; text-shadow: none; } .sidebar-pane .top-bar popover.background button.suggested-action:backdrop, .content-pane .top-bar popover.background button.suggested-action:backdrop, .sidebar-pane .top-bar popover.background button.suggested-action.flat:backdrop, .content-pane .top-bar popover.background button.suggested-action.flat:backdrop, .selection-mode windowcontrols button:backdrop, button.suggested-action:backdrop, button.suggested-action.flat:backdrop { color: rgba(255, 255, 255, 0.4); outline-color: rgba(255, 255, 255, 0.3); background-color: #88c0d0; text-shadow: none; } .sidebar-pane .top-bar popover.background button.suggested-action:backdrop label, .content-pane .top-bar popover.background button.suggested-action:backdrop label, .sidebar-pane .top-bar popover.background button.suggested-action.flat:backdrop label, .content-pane .top-bar popover.background button.suggested-action.flat:backdrop label, .selection-mode windowcontrols button:backdrop label, button.suggested-action:backdrop label, button.suggested-action.flat:backdrop label { color: rgba(255, 255, 255, 0.5); } .sidebar-pane .top-bar popover.background button.suggested-action:backdrop:active, .content-pane .top-bar popover.background button.suggested-action:backdrop:active, .sidebar-pane .top-bar popover.background button.suggested-action:backdrop:checked, .content-pane .top-bar popover.background button.suggested-action:backdrop:checked, .sidebar-pane .top-bar popover.background button.suggested-action.flat:backdrop:active, .content-pane .top-bar popover.background button.suggested-action.flat:backdrop:active, .selection-mode windowcontrols button:backdrop:active, .sidebar-pane .top-bar popover.background button.suggested-action.flat:backdrop:checked, .content-pane .top-bar popover.background button.suggested-action.flat:backdrop:checked, .selection-mode windowcontrols button:backdrop:checked, button.suggested-action:backdrop:active, button.suggested-action:backdrop:checked, button.suggested-action.flat:backdrop:active, button.suggested-action.flat:backdrop:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(255, 255, 255, 0.3); background-color: #81a1c1; text-shadow: none; } .sidebar-pane .top-bar popover.background button.suggested-action:backdrop:active label, .content-pane .top-bar popover.background button.suggested-action:backdrop:active label, .sidebar-pane .top-bar popover.background button.suggested-action:backdrop:checked label, .content-pane .top-bar popover.background button.suggested-action:backdrop:checked label, .sidebar-pane .top-bar popover.background button.suggested-action.flat:backdrop:active label, .content-pane .top-bar popover.background button.suggested-action.flat:backdrop:active label, .selection-mode windowcontrols button:backdrop:active label, .sidebar-pane .top-bar popover.background button.suggested-action.flat:backdrop:checked label, .content-pane .top-bar popover.background button.suggested-action.flat:backdrop:checked label, .selection-mode windowcontrols button:backdrop:checked label, button.suggested-action:backdrop:active label, button.suggested-action:backdrop:checked label, button.suggested-action.flat:backdrop:active label, button.suggested-action.flat:backdrop:checked label { color: rgba(254, 254, 254, 0.7); } .sidebar-pane .top-bar popover.background button.suggested-action:backdrop:disabled, .content-pane .top-bar popover.background button.suggested-action:backdrop:disabled, .sidebar-pane .top-bar popover.background button.suggested-action.flat:backdrop:disabled, .content-pane .top-bar popover.background button.suggested-action.flat:backdrop:disabled, .selection-mode windowcontrols button:backdrop:disabled, button.suggested-action:backdrop:disabled, button.suggested-action.flat:backdrop:disabled { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #88c0d0; text-shadow: none; } .sidebar-pane .top-bar popover.background button.suggested-action:backdrop:disabled label, .content-pane .top-bar popover.background button.suggested-action:backdrop:disabled label, .sidebar-pane .top-bar popover.background button.suggested-action.flat:backdrop:disabled label, .content-pane .top-bar popover.background button.suggested-action.flat:backdrop:disabled label, .selection-mode windowcontrols button:backdrop:disabled label, button.suggested-action:backdrop:disabled label, button.suggested-action.flat:backdrop:disabled label { color: rgba(255, 255, 255, 0.5); } .sidebar-pane .top-bar popover.background button.suggested-action:backdrop:disabled:active, .content-pane .top-bar popover.background button.suggested-action:backdrop:disabled:active, .sidebar-pane .top-bar popover.background button.suggested-action:backdrop:disabled:checked, .content-pane .top-bar popover.background button.suggested-action:backdrop:disabled:checked, .sidebar-pane .top-bar popover.background button.suggested-action.flat:backdrop:disabled:active, .content-pane .top-bar popover.background button.suggested-action.flat:backdrop:disabled:active, .selection-mode windowcontrols button:backdrop:disabled:active, .sidebar-pane .top-bar popover.background button.suggested-action.flat:backdrop:disabled:checked, .content-pane .top-bar popover.background button.suggested-action.flat:backdrop:disabled:checked, .selection-mode windowcontrols button:backdrop:disabled:checked, button.suggested-action:backdrop:disabled:active, button.suggested-action:backdrop:disabled:checked, button.suggested-action.flat:backdrop:disabled:active, button.suggested-action.flat:backdrop:disabled:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(255, 255, 255, 0.3); background-color: #81a1c1; text-shadow: none; } .sidebar-pane .top-bar popover.background button.suggested-action.flat:backdrop, .content-pane .top-bar popover.background button.suggested-action.flat:backdrop, .selection-mode windowcontrols button:backdrop, .sidebar-pane .top-bar popover.background button.suggested-action.flat:disabled, .content-pane .top-bar popover.background button.suggested-action.flat:disabled, .selection-mode windowcontrols button:disabled, .sidebar-pane .top-bar popover.background button.suggested-action.flat:backdrop:disabled, .content-pane .top-bar popover.background button.suggested-action.flat:backdrop:disabled, .selection-mode windowcontrols button:backdrop:disabled, button.suggested-action.flat:backdrop, button.suggested-action.flat:disabled, button.suggested-action.flat:backdrop:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: rgba(136, 192, 208, 0.8); } .sidebar-pane .top-bar popover.background button.suggested-action:disabled, .content-pane .top-bar popover.background button.suggested-action:disabled, button.suggested-action:disabled { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #88c0d0; text-shadow: none; opacity: 0.75; } .sidebar-pane .top-bar popover.background button.suggested-action:disabled:active, .content-pane .top-bar popover.background button.suggested-action:disabled:active, .sidebar-pane .top-bar popover.background button.suggested-action:disabled:checked, .content-pane .top-bar popover.background button.suggested-action:disabled:checked, button.suggested-action:disabled:active, button.suggested-action:disabled:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(255, 255, 255, 0.3); background-color: #88c0d0; text-shadow: none; } .sidebar-pane .top-bar popover.background button.suggested-action:disabled:active label, .content-pane .top-bar popover.background button.suggested-action:disabled:active label, .sidebar-pane .top-bar popover.background button.suggested-action:disabled:checked label, .content-pane .top-bar popover.background button.suggested-action:disabled:checked label, button.suggested-action:disabled:active label, button.suggested-action:disabled:checked label { color: rgba(254, 254, 254, 0.7); } .osd .sidebar-pane .top-bar popover.background button.suggested-action, .sidebar-pane .top-bar popover.background .osd button.suggested-action, .osd .content-pane .top-bar popover.background button.suggested-action, .content-pane .top-bar popover.background .osd button.suggested-action, .osd button.suggested-action { color: #d8dee9; border-color: #1f232b; background-color: rgba(136, 192, 208, 0.5); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } .osd .sidebar-pane .top-bar popover.background button.suggested-action:hover, .sidebar-pane .top-bar popover.background .osd button.suggested-action:hover, .osd .content-pane .top-bar popover.background button.suggested-action:hover, .content-pane .top-bar popover.background .osd button.suggested-action:hover, .osd button.suggested-action:hover { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(136, 192, 208, 0.7), rgba(136, 192, 208, 0.7)); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } .osd .sidebar-pane .top-bar popover.background button.suggested-action:active:backdrop, .sidebar-pane .top-bar popover.background .osd button.suggested-action:active:backdrop, .osd .content-pane .top-bar popover.background button.suggested-action:active:backdrop, .content-pane .top-bar popover.background .osd button.suggested-action:active:backdrop, .osd .sidebar-pane .top-bar popover.background button.suggested-action:active, .sidebar-pane .top-bar popover.background .osd button.suggested-action:active, .osd .content-pane .top-bar popover.background button.suggested-action:active, .content-pane .top-bar popover.background .osd button.suggested-action:active, .osd .sidebar-pane .top-bar popover.background button.suggested-action:checked:backdrop, .sidebar-pane .top-bar popover.background .osd button.suggested-action:checked:backdrop, .osd .content-pane .top-bar popover.background button.suggested-action:checked:backdrop, .content-pane .top-bar popover.background .osd button.suggested-action:checked:backdrop, .osd .sidebar-pane .top-bar popover.background button.suggested-action:checked, .sidebar-pane .top-bar popover.background .osd button.suggested-action:checked, .osd .content-pane .top-bar popover.background button.suggested-action:checked, .content-pane .top-bar popover.background .osd button.suggested-action:checked, .osd button.suggested-action:active:backdrop, .osd button.suggested-action:active, .osd button.suggested-action:checked:backdrop, .osd button.suggested-action:checked { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, #88c0d0, #88c0d0); background-clip: padding-box; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(216, 222, 233, 0.3); } .osd .sidebar-pane .top-bar popover.background button.suggested-action:disabled:backdrop, .sidebar-pane .top-bar popover.background .osd button.suggested-action:disabled:backdrop, .osd .content-pane .top-bar popover.background button.suggested-action:disabled:backdrop, .content-pane .top-bar popover.background .osd button.suggested-action:disabled:backdrop, .osd .sidebar-pane .top-bar popover.background button.suggested-action:disabled, .sidebar-pane .top-bar popover.background .osd button.suggested-action:disabled, .osd .content-pane .top-bar popover.background button.suggested-action:disabled, .content-pane .top-bar popover.background .osd button.suggested-action:disabled, .osd button.suggested-action:disabled:backdrop, .osd button.suggested-action:disabled { color: #808690; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(58, 63, 73, 0.5), rgba(58, 63, 73, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } .osd .sidebar-pane .top-bar popover.background button.suggested-action:backdrop, .sidebar-pane .top-bar popover.background .osd button.suggested-action:backdrop, .osd .content-pane .top-bar popover.background button.suggested-action:backdrop, .content-pane .top-bar popover.background .osd button.suggested-action:backdrop, .osd button.suggested-action:backdrop { color: #d8dee9; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(136, 192, 208, 0.5), rgba(136, 192, 208, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } .sidebar-pane .top-bar popover.background button.destructive-action, .content-pane .top-bar popover.background button.destructive-action, button.destructive-action { border: none; box-shadow: none; color: #fff; border-radius: 6px; background: linear-gradient(to right, #bf616a, #bf616a); } .sidebar-pane .top-bar popover.background button.destructive-action label, .content-pane .top-bar popover.background button.destructive-action label, button.destructive-action label { color: #fff; } .sidebar-pane .top-bar popover.background button.destructive-action.flat, .content-pane .top-bar popover.background button.destructive-action.flat, button.destructive-action.flat { box-shadow: none; color: #fff; border-radius: 6px; background: linear-gradient(to right, #88c0d0 0%, #88c0d0 100%); } .sidebar-pane .top-bar popover.background button.destructive-action.flat label, .content-pane .top-bar popover.background button.destructive-action.flat label, button.destructive-action.flat label { color: #fff; } .sidebar-pane .top-bar popover.background button.destructive-action:hover, .content-pane .top-bar popover.background button.destructive-action:hover, button.destructive-action:hover { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #b84f59; text-shadow: none; opacity: 0.85; } .sidebar-pane .top-bar popover.background button.destructive-action:active, .content-pane .top-bar popover.background button.destructive-action:active, .sidebar-pane .top-bar popover.background button.destructive-action:checked, .content-pane .top-bar popover.background button.destructive-action:checked, button.destructive-action:active, button.destructive-action:checked { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #b84f59; text-shadow: none; } .sidebar-pane .top-bar popover.background button.destructive-action:backdrop, .content-pane .top-bar popover.background button.destructive-action:backdrop, .sidebar-pane .top-bar popover.background button.destructive-action.flat:backdrop, .content-pane .top-bar popover.background button.destructive-action.flat:backdrop, button.destructive-action:backdrop, button.destructive-action.flat:backdrop { color: rgba(255, 255, 255, 0.4); outline-color: rgba(255, 255, 255, 0.3); background-color: #b84f59; text-shadow: none; } .sidebar-pane .top-bar popover.background button.destructive-action:backdrop label, .content-pane .top-bar popover.background button.destructive-action:backdrop label, .sidebar-pane .top-bar popover.background button.destructive-action.flat:backdrop label, .content-pane .top-bar popover.background button.destructive-action.flat:backdrop label, button.destructive-action:backdrop label, button.destructive-action.flat:backdrop label { color: rgba(255, 255, 255, 0.5); } .sidebar-pane .top-bar popover.background button.destructive-action:backdrop:active, .content-pane .top-bar popover.background button.destructive-action:backdrop:active, .sidebar-pane .top-bar popover.background button.destructive-action:backdrop:checked, .content-pane .top-bar popover.background button.destructive-action:backdrop:checked, .sidebar-pane .top-bar popover.background button.destructive-action.flat:backdrop:active, .content-pane .top-bar popover.background button.destructive-action.flat:backdrop:active, .sidebar-pane .top-bar popover.background button.destructive-action.flat:backdrop:checked, .content-pane .top-bar popover.background button.destructive-action.flat:backdrop:checked, button.destructive-action:backdrop:active, button.destructive-action:backdrop:checked, button.destructive-action.flat:backdrop:active, button.destructive-action.flat:backdrop:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(255, 255, 255, 0.3); background-color: #81a1c1; text-shadow: none; } .sidebar-pane .top-bar popover.background button.destructive-action:backdrop:active label, .content-pane .top-bar popover.background button.destructive-action:backdrop:active label, .sidebar-pane .top-bar popover.background button.destructive-action:backdrop:checked label, .content-pane .top-bar popover.background button.destructive-action:backdrop:checked label, .sidebar-pane .top-bar popover.background button.destructive-action.flat:backdrop:active label, .content-pane .top-bar popover.background button.destructive-action.flat:backdrop:active label, .sidebar-pane .top-bar popover.background button.destructive-action.flat:backdrop:checked label, .content-pane .top-bar popover.background button.destructive-action.flat:backdrop:checked label, button.destructive-action:backdrop:active label, button.destructive-action:backdrop:checked label, button.destructive-action.flat:backdrop:active label, button.destructive-action.flat:backdrop:checked label { color: rgba(254, 254, 254, 0.7); } .sidebar-pane .top-bar popover.background button.destructive-action:backdrop:disabled, .content-pane .top-bar popover.background button.destructive-action:backdrop:disabled, .sidebar-pane .top-bar popover.background button.destructive-action.flat:backdrop:disabled, .content-pane .top-bar popover.background button.destructive-action.flat:backdrop:disabled, button.destructive-action:backdrop:disabled, button.destructive-action.flat:backdrop:disabled { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #b84f59; text-shadow: none; } .sidebar-pane .top-bar popover.background button.destructive-action:backdrop:disabled label, .content-pane .top-bar popover.background button.destructive-action:backdrop:disabled label, .sidebar-pane .top-bar popover.background button.destructive-action.flat:backdrop:disabled label, .content-pane .top-bar popover.background button.destructive-action.flat:backdrop:disabled label, button.destructive-action:backdrop:disabled label, button.destructive-action.flat:backdrop:disabled label { color: rgba(255, 255, 255, 0.5); } .sidebar-pane .top-bar popover.background button.destructive-action:backdrop:disabled:active, .content-pane .top-bar popover.background button.destructive-action:backdrop:disabled:active, .sidebar-pane .top-bar popover.background button.destructive-action:backdrop:disabled:checked, .content-pane .top-bar popover.background button.destructive-action:backdrop:disabled:checked, .sidebar-pane .top-bar popover.background button.destructive-action.flat:backdrop:disabled:active, .content-pane .top-bar popover.background button.destructive-action.flat:backdrop:disabled:active, .sidebar-pane .top-bar popover.background button.destructive-action.flat:backdrop:disabled:checked, .content-pane .top-bar popover.background button.destructive-action.flat:backdrop:disabled:checked, button.destructive-action:backdrop:disabled:active, button.destructive-action:backdrop:disabled:checked, button.destructive-action.flat:backdrop:disabled:active, button.destructive-action.flat:backdrop:disabled:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(255, 255, 255, 0.3); background-color: #81a1c1; text-shadow: none; } .sidebar-pane .top-bar popover.background button.destructive-action.flat:backdrop, .content-pane .top-bar popover.background button.destructive-action.flat:backdrop, .sidebar-pane .top-bar popover.background button.destructive-action.flat:disabled, .content-pane .top-bar popover.background button.destructive-action.flat:disabled, .sidebar-pane .top-bar popover.background button.destructive-action.flat:backdrop:disabled, .content-pane .top-bar popover.background button.destructive-action.flat:backdrop:disabled, button.destructive-action.flat:backdrop, button.destructive-action.flat:disabled, button.destructive-action.flat:backdrop:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: rgba(184, 79, 89, 0.8); } .sidebar-pane .top-bar popover.background button.destructive-action:disabled, .content-pane .top-bar popover.background button.destructive-action:disabled, button.destructive-action:disabled { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #b84f59; text-shadow: none; opacity: 0.75; } .sidebar-pane .top-bar popover.background button.destructive-action:disabled:active, .content-pane .top-bar popover.background button.destructive-action:disabled:active, .sidebar-pane .top-bar popover.background button.destructive-action:disabled:checked, .content-pane .top-bar popover.background button.destructive-action:disabled:checked, button.destructive-action:disabled:active, button.destructive-action:disabled:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(255, 255, 255, 0.3); background-color: #b84f59; text-shadow: none; } .sidebar-pane .top-bar popover.background button.destructive-action:disabled:active label, .content-pane .top-bar popover.background button.destructive-action:disabled:active label, .sidebar-pane .top-bar popover.background button.destructive-action:disabled:checked label, .content-pane .top-bar popover.background button.destructive-action:disabled:checked label, button.destructive-action:disabled:active label, button.destructive-action:disabled:checked label { color: rgba(254, 254, 254, 0.7); } .osd .sidebar-pane .top-bar popover.background button.destructive-action, .sidebar-pane .top-bar popover.background .osd button.destructive-action, .osd .content-pane .top-bar popover.background button.destructive-action, .content-pane .top-bar popover.background .osd button.destructive-action, .osd button.destructive-action { color: #d8dee9; border-color: #1f232b; background-color: rgba(184, 79, 89, 0.5); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } .osd .sidebar-pane .top-bar popover.background button.destructive-action:hover, .sidebar-pane .top-bar popover.background .osd button.destructive-action:hover, .osd .content-pane .top-bar popover.background button.destructive-action:hover, .content-pane .top-bar popover.background .osd button.destructive-action:hover, .osd button.destructive-action:hover { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(184, 79, 89, 0.7), rgba(184, 79, 89, 0.7)); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } .osd .sidebar-pane .top-bar popover.background button.destructive-action:active:backdrop, .sidebar-pane .top-bar popover.background .osd button.destructive-action:active:backdrop, .osd .content-pane .top-bar popover.background button.destructive-action:active:backdrop, .content-pane .top-bar popover.background .osd button.destructive-action:active:backdrop, .osd .sidebar-pane .top-bar popover.background button.destructive-action:active, .sidebar-pane .top-bar popover.background .osd button.destructive-action:active, .osd .content-pane .top-bar popover.background button.destructive-action:active, .content-pane .top-bar popover.background .osd button.destructive-action:active, .osd .sidebar-pane .top-bar popover.background button.destructive-action:checked:backdrop, .sidebar-pane .top-bar popover.background .osd button.destructive-action:checked:backdrop, .osd .content-pane .top-bar popover.background button.destructive-action:checked:backdrop, .content-pane .top-bar popover.background .osd button.destructive-action:checked:backdrop, .osd .sidebar-pane .top-bar popover.background button.destructive-action:checked, .sidebar-pane .top-bar popover.background .osd button.destructive-action:checked, .osd .content-pane .top-bar popover.background button.destructive-action:checked, .content-pane .top-bar popover.background .osd button.destructive-action:checked, .osd button.destructive-action:active:backdrop, .osd button.destructive-action:active, .osd button.destructive-action:checked:backdrop, .osd button.destructive-action:checked { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, #b84f59, #b84f59); background-clip: padding-box; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(216, 222, 233, 0.3); } .osd .sidebar-pane .top-bar popover.background button.destructive-action:disabled:backdrop, .sidebar-pane .top-bar popover.background .osd button.destructive-action:disabled:backdrop, .osd .content-pane .top-bar popover.background button.destructive-action:disabled:backdrop, .content-pane .top-bar popover.background .osd button.destructive-action:disabled:backdrop, .osd .sidebar-pane .top-bar popover.background button.destructive-action:disabled, .sidebar-pane .top-bar popover.background .osd button.destructive-action:disabled, .osd .content-pane .top-bar popover.background button.destructive-action:disabled, .content-pane .top-bar popover.background .osd button.destructive-action:disabled, .osd button.destructive-action:disabled:backdrop, .osd button.destructive-action:disabled { color: #808690; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(58, 63, 73, 0.5), rgba(58, 63, 73, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } .osd .sidebar-pane .top-bar popover.background button.destructive-action:backdrop, .sidebar-pane .top-bar popover.background .osd button.destructive-action:backdrop, .osd .content-pane .top-bar popover.background button.destructive-action:backdrop, .content-pane .top-bar popover.background .osd button.destructive-action:backdrop, .osd button.destructive-action:backdrop { color: #d8dee9; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(184, 79, 89, 0.5), rgba(184, 79, 89, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } .sidebar-pane .top-bar popover.background .stack-switcher > button, .content-pane .top-bar popover.background .stack-switcher > button, .stack-switcher > button { outline-offset: -3px; } .sidebar-pane .top-bar popover.background .stack-switcher > button > label, .content-pane .top-bar popover.background .stack-switcher > button > label, .stack-switcher > button > label { padding-left: 6px; padding-right: 6px; } .sidebar-pane .top-bar popover.background .stack-switcher > button > image, .content-pane .top-bar popover.background .stack-switcher > button > image, .stack-switcher > button > image { padding-left: 6px; padding-right: 6px; padding-top: 3px; padding-bottom: 3px; } .sidebar-pane .top-bar popover.background .stack-switcher > button.text-button, .content-pane .top-bar popover.background .stack-switcher > button.text-button, .stack-switcher > button.text-button { padding-left: 10px; padding-right: 10px; } .sidebar-pane .top-bar popover.background .stack-switcher > button.image-button, .content-pane .top-bar popover.background .stack-switcher > button.image-button, .stack-switcher > button.image-button { padding-left: 2px; padding-right: 2px; } .sidebar-pane .top-bar popover.background .stack-switcher > button.needs-attention:active > label, .content-pane .top-bar popover.background .stack-switcher > button.needs-attention:active > label, .sidebar-pane .top-bar popover.background .stack-switcher > button.needs-attention:active > image, .content-pane .top-bar popover.background .stack-switcher > button.needs-attention:active > image, .sidebar-pane .top-bar popover.background .stack-switcher > button.needs-attention:checked > label, .content-pane .top-bar popover.background .stack-switcher > button.needs-attention:checked > label, .sidebar-pane .top-bar popover.background .stack-switcher > button.needs-attention:checked > image, .content-pane .top-bar popover.background .stack-switcher > button.needs-attention:checked > image, .stack-switcher > button.needs-attention:active > label, .stack-switcher > button.needs-attention:active > image, .stack-switcher > button.needs-attention:checked > label, .stack-switcher > button.needs-attention:checked > image { animation: none; background-image: none; } .inline-toolbar .sidebar-pane .top-bar popover.background button, .sidebar-pane .top-bar popover.background .inline-toolbar button, .inline-toolbar .content-pane .top-bar popover.background button, .content-pane .top-bar popover.background .inline-toolbar button, .inline-toolbar .sidebar-pane .top-bar popover.background button:backdrop, .sidebar-pane .top-bar popover.background .inline-toolbar button:backdrop, .inline-toolbar .content-pane .top-bar popover.background button:backdrop, .content-pane .top-bar popover.background .inline-toolbar button:backdrop, .inline-toolbar button, .inline-toolbar button:backdrop { border-radius: 6px; border-width: 1px; } .primary-toolbar .sidebar-pane .top-bar popover.background button, .sidebar-pane .top-bar popover.background .primary-toolbar button, .primary-toolbar .content-pane .top-bar popover.background button, .content-pane .top-bar popover.background .primary-toolbar button, .primary-toolbar .raised .sidebar-pane .top-bar popover.background button, .sidebar-pane .top-bar popover.background .primary-toolbar .raised button, .primary-toolbar .raised .content-pane .top-bar popover.background button, .content-pane .top-bar popover.background .primary-toolbar .raised button, .primary-toolbar button, .primary-toolbar .raised button { -gtk-icon-shadow: none; } .primary-toolbar .sidebar-pane .top-bar popover.background button:hover, .sidebar-pane .top-bar popover.background .primary-toolbar button:hover, .primary-toolbar .content-pane .top-bar popover.background button:hover, .content-pane .top-bar popover.background .primary-toolbar button:hover, .primary-toolbar .sidebar-pane .top-bar popover.background button:focus, .sidebar-pane .top-bar popover.background .primary-toolbar button:focus, .primary-toolbar .content-pane .top-bar popover.background button:focus, .content-pane .top-bar popover.background .primary-toolbar button:focus, .primary-toolbar .raised .sidebar-pane .top-bar popover.background button:hover, .sidebar-pane .top-bar popover.background .primary-toolbar .raised button:hover, .primary-toolbar .raised .content-pane .top-bar popover.background button:hover, .content-pane .top-bar popover.background .primary-toolbar .raised button:hover, .primary-toolbar .raised .sidebar-pane .top-bar popover.background button:focus, .sidebar-pane .top-bar popover.background .primary-toolbar .raised button:focus, .primary-toolbar .raised .content-pane .top-bar popover.background button:focus, .content-pane .top-bar popover.background .primary-toolbar .raised button:focus, .primary-toolbar button:hover, .primary-toolbar button:focus, .primary-toolbar .raised button:hover, .primary-toolbar .raised button:focus { color: #fefefe; outline-color: rgba(254, 254, 254, 0.3); background-color: #81a1c1; text-shadow: none; } .sidebar-pane .top-bar popover.background .stack-switcher > button.needs-attention > label, .content-pane .top-bar popover.background .stack-switcher > button.needs-attention > label, .sidebar-pane .top-bar popover.background .stack-switcher > button.needs-attention > image, .content-pane .top-bar popover.background .stack-switcher > button.needs-attention > image, .stack-switcher > button.needs-attention > label, .stack-switcher > button.needs-attention > image, stacksidebar row.needs-attention > label { animation: needs_attention 150ms ease-in; background-image: radial-gradient(farthest-side, #81a1c1 96%, rgba(129, 161, 193, 0)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 4px; } .stack-switcher > button.needs-attention > label:backdrop, .stack-switcher > button.needs-attention > image:backdrop, stacksidebar row.needs-attention > label:backdrop { background-size: 6px 6px, 0 0; } .stack-switcher > button.needs-attention > label:dir(rtl), .stack-switcher > button.needs-attention > image:dir(rtl), stacksidebar row.needs-attention > label:dir(rtl) { background-position: left 3px, left 4px; } /* oldstyle toolbar buttons */ .toolbar > button, .toolbar > :not(.linked) > button, .toolbar :not(.linked) > menubutton > button, .toolbar :not(.linked) > scalebutton > button, .toolbar :not(.linked) > dropdown > button, .toolbar :not(.linked) > colorbutton > button, .toolbar :not(.linked) > fontbutton > button, .toolbar :not(.linked) > appchooserbutton > button, .toolbar :not(.linked) > combobox > box > button { margin: 1px; border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } .toolbar > button:hover, .toolbar > button:active, .toolbar > button:checked, .toolbar > :not(.linked) > button:hover, .toolbar > :not(.linked) > button:active, .toolbar > :not(.linked) > button:checked, .toolbar :not(.linked) > menubutton > button:hover, .toolbar :not(.linked) > menubutton > button:active, .toolbar :not(.linked) > menubutton > button:checked, .toolbar :not(.linked) > scalebutton > button:hover, .toolbar :not(.linked) > scalebutton > button:active, .toolbar :not(.linked) > scalebutton > button:checked, .toolbar :not(.linked) > dropdown > button:hover, .toolbar :not(.linked) > dropdown > button:active, .toolbar :not(.linked) > dropdown > button:checked, .toolbar :not(.linked) > colorbutton > button:hover, .toolbar :not(.linked) > colorbutton > button:active, .toolbar :not(.linked) > colorbutton > button:checked, .toolbar :not(.linked) > fontbutton > button:hover, .toolbar :not(.linked) > fontbutton > button:active, .toolbar :not(.linked) > fontbutton > button:checked, .toolbar :not(.linked) > appchooserbutton > button:hover, .toolbar :not(.linked) > appchooserbutton > button:active, .toolbar :not(.linked) > appchooserbutton > button:checked, .toolbar :not(.linked) > combobox > box > button:hover, .toolbar :not(.linked) > combobox > box > button:active, .toolbar :not(.linked) > combobox > box > button:checked { color: #3b4252; outline-color: rgba(59, 66, 82, 0.3); background-color: #b7c2d7; text-shadow: none; } .toolbar > button:disabled, .toolbar > :not(.linked) > button:disabled, .toolbar :not(.linked) > menubutton > button:disabled, .toolbar :not(.linked) > scalebutton > button:disabled, .toolbar :not(.linked) > dropdown > button:disabled, .toolbar :not(.linked) > colorbutton > button:disabled, .toolbar :not(.linked) > fontbutton > button:disabled, .toolbar :not(.linked) > appchooserbutton > button:disabled, .toolbar :not(.linked) > combobox > box > button:disabled { opacity: 0.5; } .inline-toolbar .sidebar-pane .top-bar popover.background button, .sidebar-pane .top-bar popover.background .inline-toolbar button, .inline-toolbar .content-pane .top-bar popover.background button, .content-pane .top-bar popover.background .inline-toolbar button, .inline-toolbar button, .inline-toolbar button:backdrop, .sidebar-pane .top-bar popover.background .linked > button, .content-pane .top-bar popover.background .linked > button, .linked > button, .linked > button:hover, .linked > button:active, .linked > button:checked, .linked > button:backdrop, .linked:not(.vertical) > spinbutton:not(.vertical), spinbutton.vertical.linked:not(.vertical) > text, .linked:not(.vertical) > entry, .linked > combobox > box > button.combo:dir(ltr), .linked > combobox > box > button.combo:dir(rtl) { border: 1px solid #c5cedd; border-radius: 0; border-right-style: none; box-shadow: none; } .inline-toolbar .sidebar-pane .top-bar popover.background button:disabled, .sidebar-pane .top-bar popover.background .inline-toolbar button:disabled, .inline-toolbar .content-pane .top-bar popover.background button:disabled, .content-pane .top-bar popover.background .inline-toolbar button:disabled, .inline-toolbar button:disabled, .sidebar-pane .top-bar popover.background .linked > button:disabled, .content-pane .top-bar popover.background .linked > button:disabled, .linked > button:disabled, .linked:not(.vertical) > spinbutton:disabled:not(.vertical), spinbutton.vertical.linked:not(.vertical) > text:disabled, .linked:not(.vertical) > entry:disabled, .linked > combobox > box > button.combo:disabled:dir(ltr), .linked > combobox > box > button.combo:disabled:dir(rtl) { color: #5c6371; outline-color: rgba(59, 66, 82, 0.3); background-color: #dde2ec; text-shadow: none; color: #8a909e; } .inline-toolbar .sidebar-pane .top-bar popover.background button:first-child, .sidebar-pane .top-bar popover.background .inline-toolbar button:first-child, .inline-toolbar .content-pane .top-bar popover.background button:first-child, .content-pane .top-bar popover.background .inline-toolbar button:first-child, .inline-toolbar button:first-child, .sidebar-pane .top-bar popover.background .linked > button:first-child, .content-pane .top-bar popover.background .linked > button:first-child, .linked > button:first-child, combobox.linked button:nth-child(2):dir(rtl), .linked:not(.vertical) > combobox:first-child > box > button.combo, .linked:not(.vertical) > spinbutton:first-child:not(.vertical), spinbutton.vertical.linked:not(.vertical) > text:first-child, .linked:not(.vertical) > entry:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .inline-toolbar .sidebar-pane .top-bar popover.background button:last-child, .sidebar-pane .top-bar popover.background .inline-toolbar button:last-child, .inline-toolbar .content-pane .top-bar popover.background button:last-child, .content-pane .top-bar popover.background .inline-toolbar button:last-child, .inline-toolbar button:last-child, .sidebar-pane .top-bar popover.background .linked > button:last-child, .content-pane .top-bar popover.background .linked > button:last-child, .linked > button:last-child, combobox.linked button:nth-child(2):dir(ltr), .linked:not(.vertical) > combobox:last-child > box > button.combo, .linked:not(.vertical) > spinbutton:last-child:not(.vertical), spinbutton.vertical.linked:not(.vertical) > text:last-child, .linked:not(.vertical) > entry:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; border-right-style: solid; } .inline-toolbar .sidebar-pane .top-bar popover.background button:only-child, .sidebar-pane .top-bar popover.background .inline-toolbar button:only-child, .inline-toolbar .content-pane .top-bar popover.background button:only-child, .content-pane .top-bar popover.background .inline-toolbar button:only-child, .inline-toolbar button:only-child, .sidebar-pane .top-bar popover.background .linked > button:only-child, .content-pane .top-bar popover.background .linked > button:only-child, .linked > button:only-child, .linked:not(.vertical) > combobox:only-child > box > button.combo, .linked:not(.vertical) > spinbutton:only-child:not(.vertical), spinbutton.vertical.linked:not(.vertical) > text:only-child, .linked:not(.vertical) > entry:only-child { border-radius: 6px; border-style: solid; } .sidebar-pane .top-bar popover.background .linked.vertical > button, .content-pane .top-bar popover.background .linked.vertical > button, .linked.vertical > button, .linked.vertical > button:hover, .linked.vertical > button:active, .linked.vertical > button:checked, .linked.vertical > button:backdrop, .linked.vertical > spinbutton:not(.vertical), spinbutton.vertical.linked > text, .linked.vertical > entry, .linked.vertical > combobox > box > button.combo { border-style: solid solid none solid; border-radius: 0; } .sidebar-pane .top-bar popover.background .linked.vertical > button:first-child, .content-pane .top-bar popover.background .linked.vertical > button:first-child, .linked.vertical > button:first-child, .linked.vertical > combobox:first-child > box > button.combo, .linked.vertical > spinbutton:first-child:not(.vertical), spinbutton.vertical.linked > text:first-child, .linked.vertical > entry:first-child { border-top-left-radius: 6px; border-top-right-radius: 6px; } .sidebar-pane .top-bar popover.background .linked.vertical > button:last-child, .content-pane .top-bar popover.background .linked.vertical > button:last-child, .linked.vertical > button:last-child, .linked.vertical > combobox:last-child > box > button.combo, .linked.vertical > spinbutton:last-child:not(.vertical), spinbutton.vertical.linked > text:last-child, .linked.vertical > entry:last-child { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-style: solid; } .sidebar-pane .top-bar popover.background .linked.vertical > button:only-child, .content-pane .top-bar popover.background .linked.vertical > button:only-child, .linked.vertical > button:only-child, .linked.vertical > combobox:only-child > box > button.combo, .linked.vertical > spinbutton:only-child:not(.vertical), spinbutton.vertical.linked > text:only-child, .linked.vertical > entry:only-child { border-radius: 6px; border-style: solid; } modelbutton.flat, .menuitem.button.flat, modelbutton.flat:backdrop, modelbutton.flat:backdrop:hover, .menuitem.button.flat:backdrop, .menuitem.button.flat:backdrop:hover, button:link, button:visited, button:link:hover, button:link:active, button:link:checked, button:visited:hover, button:visited:active, button:visited:checked, .scale-popup button:hover, .scale-popup button:backdrop:hover, .scale-popup button:backdrop:disabled, .scale-popup button:backdrop { background-color: transparent; background-image: none; border-color: transparent; box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } /* menu buttons */ modelbutton.flat, .menuitem.button.flat { min-height: 26px; padding-left: 5px; padding-right: 5px; border-radius: 6px; outline-offset: -2px; } modelbutton.flat:hover, .menuitem.button.flat:hover { background-color: #d1d8e5; } modelbutton.flat check:last-child, modelbutton.flat radio:last-child, .menuitem.button.flat check:last-child, .menuitem.button.flat radio:last-child { margin-left: 8px; } modelbutton.flat check:first-child, modelbutton.flat radio:first-child, .menuitem.button.flat check:first-child, .menuitem.button.flat radio:first-child { margin-right: 8px; } modelbutton.flat arrow { background: none; } modelbutton.flat arrow:hover { background: none; } modelbutton.flat arrow.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } modelbutton.flat arrow.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } button.color { padding: 4px; } button.color colorswatch:only-child { box-shadow: none; } button.color colorswatch:only-child, button.color colorswatch:only-child overlay { border-radius: 0; } button.color colorswatch:only-child:disabled, button.color colorswatch:only-child:backdrop { box-shadow: none; } notebook button, list button, .view button, iconview button, popover button { box-shadow: none; } notebook button:backdrop, list button:backdrop, .view button:backdrop, iconview button:backdrop, popover button:backdrop { box-shadow: none; } notebook .linked > button, list .linked > button, .view .linked > button, iconview .linked > button, popover .linked > button { box-shadow: none; } toggle-group { padding: 3px; } toggle-group toggle { padding: 0 4px; } toggle-group toggle:checked { background-color: #81a1c1; } toggle-group toggle:checked, toggle-group toggle:checked label { color: #fefefe; } /* * Gnome 48 accent color buttons * Gnome papers - buttons in context menu */ button.accent-button, button.accent-button:backdrop, button.color-button, button.color-button:backdrop { min-height: 24px; min-width: 24px; padding: 3px; border-radius: 100%; background: var(--accent-bg-color); outline: none; background-clip: content-box; box-shadow: none; border: none; } button.accent-button:hover, button.color-button:hover { box-shadow: 0 0 0 3px #d5dbe7; background-color: var(--accent-bg-color); } button.accent-button:checked, button.accent-button:checked:backdrop, button.color-button:checked, button.color-button:checked:backdrop { box-shadow: 0 0 0 3px var(--accent-bg-color); background-color: var(--accent-bg-color); } /************ * Calendar * ***********/ calendar { color: #3b4252; border: 1px solid #c5cedd; font-feature-settings: "tnum"; } calendar > header { border-bottom: 1px solid #c5cedd; } calendar > header > button { border: none; box-shadow: none; background: none; border-radius: 0; } calendar > header > button:backdrop { background: none; } calendar > grid > label.today { box-shadow: inset 0px -2px #81a1c1; } calendar > grid > label.today:selected { box-shadow: none; } calendar > grid > label:focus { outline-color: #81a1c1; outline-offset: -2px; outline-width: 2px; outline-style: solid; } calendar > grid > label.day-number { padding: 4px; } calendar > grid > label.day-number:selected { border-radius: 3px; } calendar > grid > label.day-number:checked { background-color: alpha(#81a1c1,0.3); } calendar > grid > label.day-number.other-month { color: alpha(currentColor,0.3); } /************************* * Check and Radio Items * *************************/ check { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked.png"), url("../assets/checkbox-unchecked@2.png")); -gtk-icon-shadow: none; } radio { -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked.png"), url("../assets/radio-unchecked@2.png")); -gtk-icon-shadow: none; } check:hover { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-hover.png"), url("../assets/checkbox-unchecked-hover@2.png")); -gtk-icon-shadow: none; } radio:hover { -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked-hover.png"), url("../assets/radio-unchecked-hover@2.png")); -gtk-icon-shadow: none; } check:active { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-active.png"), url("../assets/checkbox-unchecked-active@2.png")); -gtk-icon-shadow: none; } radio:active { -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked-active.png"), url("../assets/radio-unchecked-active@2.png")); -gtk-icon-shadow: none; } check:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-backdrop.png"), url("../assets/checkbox-unchecked-backdrop@2.png")); -gtk-icon-shadow: none; } radio:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked-backdrop.png"), url("../assets/radio-unchecked-backdrop@2.png")); -gtk-icon-shadow: none; } check:disabled { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-insensitive.png"), url("../assets/checkbox-unchecked-insensitive@2.png")); -gtk-icon-shadow: none; } radio:disabled { -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked-insensitive.png"), url("../assets/radio-unchecked-insensitive@2.png")); -gtk-icon-shadow: none; } check:disabled:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked-insensitive.png"), url("../assets/checkbox-unchecked-insensitive@2.png")); -gtk-icon-shadow: none; } radio:disabled:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked-insensitive.png"), url("../assets/radio-unchecked-insensitive@2.png")); -gtk-icon-shadow: none; } check:checked { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked.png"), url("../assets/checkbox-checked@2.png")); -gtk-icon-shadow: none; } radio:checked { -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked.png"), url("../assets/radio-checked@2.png")); -gtk-icon-shadow: none; background: none; } check:checked:hover { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-hover.png"), url("../assets/checkbox-checked-hover@2.png")); -gtk-icon-shadow: none; } radio:checked:hover { -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-hover.png"), url("../assets/radio-checked-hover@2.png")); -gtk-icon-shadow: none; background: none; } check:checked:active { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-active.png"), url("../assets/checkbox-checked-active@2.png")); -gtk-icon-shadow: none; } radio:checked:active { -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-active.png"), url("../assets/radio-checked-active@2.png")); -gtk-icon-shadow: none; background: none; } check:checked:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-backdrop.png"), url("../assets/checkbox-checked-backdrop@2.png")); -gtk-icon-shadow: none; } radio:checked:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-backdrop.png"), url("../assets/radio-checked-backdrop@2.png")); -gtk-icon-shadow: none; background: none; } check:checked:disabled { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-insensitive.png"), url("../assets/checkbox-checked-insensitive@2.png")); -gtk-icon-shadow: none; } radio:checked:disabled { -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-insensitive.png"), url("../assets/radio-checked-insensitive@2.png")); -gtk-icon-shadow: none; background: none; } check:checked:disabled:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked-insensitive.png"), url("../assets/checkbox-checked-insensitive@2.png")); -gtk-icon-shadow: none; } radio:checked:disabled:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-insensitive.png"), url("../assets/radio-checked-insensitive@2.png")); -gtk-icon-shadow: none; background: none; } check:indeterminate { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-mixed.png"), url("../assets/checkbox-mixed@2.png")); -gtk-icon-shadow: none; } radio:indeterminate { -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed.png"), url("../assets/radio-mixed@2.png")); -gtk-icon-shadow: none; } check:indeterminate:hover { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-mixed-hover.png"), url("../assets/checkbox-mixed-hover@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:hover { -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed-hover.png"), url("../assets/radio-mixed-hover@2.png")); -gtk-icon-shadow: none; } check:indeterminate:active { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-mixed-active.png"), url("../assets/checkbox-mixed-active@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:active { -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed-active.png"), url("../assets/radio-mixed-active@2.png")); -gtk-icon-shadow: none; } check:indeterminate:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-mixed-backdrop.png"), url("../assets/checkbox-mixed-backdrop@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed-backdrop.png"), url("../assets/radio-mixed-backdrop@2.png")); -gtk-icon-shadow: none; } check:indeterminate:disabled { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-mixed-insensitive.png"), url("../assets/checkbox-mixed-insensitive@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:disabled { -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed-insensitive.png"), url("../assets/radio-mixed-insensitive@2.png")); -gtk-icon-shadow: none; } check:indeterminate:disabled:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-mixed-insensitive.png"), url("../assets/checkbox-mixed-insensitive@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:disabled:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed-insensitive.png"), url("../assets/radio-mixed-insensitive@2.png")); -gtk-icon-shadow: none; } check:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked.png"), url("../assets/checkbox-unchecked@2.png")); -gtk-icon-shadow: none; } radio:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-unchecked.png"), url("../assets/selected-radio-unchecked@2.png")); -gtk-icon-shadow: none; } check:hover:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked.png"), url("../assets/checkbox-unchecked@2.png")); -gtk-icon-shadow: none; } radio:hover:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-unchecked.png"), url("../assets/selected-radio-unchecked@2.png")); -gtk-icon-shadow: none; } check:active:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked.png"), url("../assets/checkbox-unchecked@2.png")); -gtk-icon-shadow: none; } radio:active:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-unchecked.png"), url("../assets/selected-radio-unchecked@2.png")); -gtk-icon-shadow: none; } check:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked.png"), url("../assets/checkbox-unchecked@2.png")); -gtk-icon-shadow: none; } radio:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-unchecked.png"), url("../assets/selected-radio-unchecked@2.png")); -gtk-icon-shadow: none; } check:disabled:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked.png"), url("../assets/checkbox-unchecked@2.png")); -gtk-icon-shadow: none; } radio:disabled:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-unchecked.png"), url("../assets/selected-radio-unchecked@2.png")); -gtk-icon-shadow: none; } check:disabled:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-unchecked.png"), url("../assets/checkbox-unchecked@2.png")); -gtk-icon-shadow: none; } radio:disabled:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-unchecked.png"), url("../assets/selected-radio-unchecked@2.png")); -gtk-icon-shadow: none; } check:checked:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked.png"), url("../assets/checkbox-checked@2.png")); -gtk-icon-shadow: none; } radio:checked:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-checked.png"), url("../assets/selected-radio-checked@2.png")); -gtk-icon-shadow: none; } check:checked:hover:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked.png"), url("../assets/checkbox-checked@2.png")); -gtk-icon-shadow: none; } radio:checked:hover:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-checked.png"), url("../assets/selected-radio-checked@2.png")); -gtk-icon-shadow: none; } check:checked:active:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked.png"), url("../assets/checkbox-checked@2.png")); -gtk-icon-shadow: none; } radio:checked:active:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-checked.png"), url("../assets/selected-radio-checked@2.png")); -gtk-icon-shadow: none; } check:checked:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked.png"), url("../assets/checkbox-checked@2.png")); -gtk-icon-shadow: none; } radio:checked:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-checked.png"), url("../assets/selected-radio-checked@2.png")); -gtk-icon-shadow: none; } check:checked:disabled:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked.png"), url("../assets/checkbox-checked@2.png")); -gtk-icon-shadow: none; } radio:checked:disabled:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-checked.png"), url("../assets/selected-radio-checked@2.png")); -gtk-icon-shadow: none; } check:checked:disabled:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/checkbox-checked.png"), url("../assets/checkbox-checked@2.png")); -gtk-icon-shadow: none; } radio:checked:disabled:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-checked.png"), url("../assets/selected-radio-checked@2.png")); -gtk-icon-shadow: none; } check:indeterminate:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-checkbox-mixed.png"), url("../assets/selected-checkbox-mixed@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-mixed.png"), url("../assets/selected-radio-mixed@2.png")); -gtk-icon-shadow: none; } check:indeterminate:hover:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-checkbox-mixed.png"), url("../assets/selected-checkbox-mixed@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:hover:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-mixed.png"), url("../assets/selected-radio-mixed@2.png")); -gtk-icon-shadow: none; } check:indeterminate:active:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-checkbox-mixed.png"), url("../assets/selected-checkbox-mixed@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:active:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-mixed.png"), url("../assets/selected-radio-mixed@2.png")); -gtk-icon-shadow: none; } check:indeterminate:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-checkbox-mixed.png"), url("../assets/selected-checkbox-mixed@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-mixed.png"), url("../assets/selected-radio-mixed@2.png")); -gtk-icon-shadow: none; } check:indeterminate:disabled:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-checkbox-mixed.png"), url("../assets/selected-checkbox-mixed@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:disabled:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-mixed.png"), url("../assets/selected-radio-mixed@2.png")); -gtk-icon-shadow: none; } check:indeterminate:disabled:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-checkbox-mixed.png"), url("../assets/selected-checkbox-mixed@2.png")); -gtk-icon-shadow: none; } radio:indeterminate:disabled:backdrop:selected { -gtk-icon-source: -gtk-scaled(url("../assets/selected-radio-mixed.png"), url("../assets/selected-radio-mixed@2.png")); -gtk-icon-shadow: none; } .view.content-view check, iconview.content-view check, .view.content-view.check, iconview.content-view.check { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox-unchecked.png"), url("../assets/checkbox-unchecked@2.png")); -gtk-icon-shadow: none; } .view.content-view radio, iconview.content-view radio, .view.content-view.radio, iconview.content-view.radio { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio-unchecked.png"), url("../assets/radio-unchecked@2.png")); -gtk-icon-shadow: none; } .view.content-view check:hover, iconview.content-view check:hover, .view.content-view.check:hover, iconview.content-view.check:hover { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox-unchecked-hover.png"), url("../assets/checkbox-unchecked-hover@2.png")); -gtk-icon-shadow: none; } .view.content-view radio:hover, iconview.content-view radio:hover, .view.content-view.radio:hover, iconview.content-view.radio:hover { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio-unchecked-hover.png"), url("../assets/radio-unchecked-hover@2.png")); -gtk-icon-shadow: none; } .view.content-view check:active, iconview.content-view check:active, .view.content-view.check:active, iconview.content-view.check:active { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox-unchecked-active.png"), url("../assets/checkbox-unchecked-active@2.png")); -gtk-icon-shadow: none; } .view.content-view radio:active, iconview.content-view radio:active, .view.content-view.radio:active, iconview.content-view.radio:active { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio-unchecked-active.png"), url("../assets/radio-unchecked-active@2.png")); -gtk-icon-shadow: none; } .view.content-view check:backdrop, iconview.content-view check:backdrop, .view.content-view.check:backdrop, iconview.content-view.check:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox-unchecked-backdrop.png"), url("../assets/checkbox-unchecked-backdrop@2.png")); -gtk-icon-shadow: none; } .view.content-view radio:backdrop, iconview.content-view radio:backdrop, .view.content-view.radio:backdrop, iconview.content-view.radio:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio-unchecked-backdrop.png"), url("../assets/radio-unchecked-backdrop@2.png")); -gtk-icon-shadow: none; } .view.content-view check:disabled, iconview.content-view check:disabled, .view.content-view.check:disabled, iconview.content-view.check:disabled { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox-unchecked-insensitive.png"), url("../assets/checkbox-unchecked-insensitive@2.png")); -gtk-icon-shadow: none; } .view.content-view radio:disabled, iconview.content-view radio:disabled, .view.content-view.radio:disabled, iconview.content-view.radio:disabled { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio-unchecked-insensitive.png"), url("../assets/radio-unchecked-insensitive@2.png")); -gtk-icon-shadow: none; } .view.content-view check:disabled:backdrop, iconview.content-view check:disabled:backdrop, .view.content-view.check:disabled:backdrop, iconview.content-view.check:disabled:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox-unchecked-backdrop-insensitive.png"), url("../assets/checkbox-unchecked-backdrop-insensitive@2.png")); -gtk-icon-shadow: none; } .view.content-view radio:disabled:backdrop, iconview.content-view radio:disabled:backdrop, .view.content-view.radio:disabled:backdrop, iconview.content-view.radio:disabled:backdrop { -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio-unchecked-backdrop-insensitive.png"), url("../assets/radio-unchecked-backdrop-insensitive@2.png")); -gtk-icon-shadow: none; } checkbutton.text-button, radiobutton.text-button { padding: 2px 0; outline-offset: 0; } checkbutton.text-button label:not(:only-child):first-child, radiobutton.text-button label:not(:only-child):first-child { margin-left: 4px; } checkbutton.text-button label:not(:only-child):last-child, radiobutton.text-button label:not(:only-child):last-child { margin-right: 4px; } check, radio { margin: 0 4px; min-height: 16px; min-width: 16px; border: none; } menu menuitem check, menu menuitem radio { margin: 0; } menu menuitem check, menu menuitem check:hover, menu menuitem check:disabled, menu menuitem radio, menu menuitem radio:hover, menu menuitem radio:disabled { min-height: 14px; min-width: 14px; background-image: none; background-color: transparent; box-shadow: none; -gtk-icon-shadow: none; color: inherit; border-color: currentColor; animation: none; } /***************** * Color Chooser * *****************/ colorswatch, colorswatch:drop(active) { border-style: none; } colorswatch.top { border-top-left-radius: 5.5px; border-top-right-radius: 5.5px; } colorswatch.top overlay { border-top-left-radius: 5px; border-top-right-radius: 5px; } colorswatch.bottom { border-bottom-left-radius: 5.5px; border-bottom-right-radius: 5.5px; } colorswatch.bottom overlay { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } colorswatch.left, colorswatch:first-child:not(.top) { border-top-left-radius: 5.5px; border-bottom-left-radius: 5.5px; } colorswatch.left overlay, colorswatch:first-child:not(.top) overlay { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } colorswatch.right, colorswatch:last-child:not(.bottom) { border-top-right-radius: 5.5px; border-bottom-right-radius: 5.5px; } colorswatch.right overlay, colorswatch:last-child:not(.bottom) overlay { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } colorswatch.dark overlay { color: #fefefe; } colorswatch.dark overlay:hover { border-color: rgba(0, 0, 0, 0.8); } colorswatch.dark overlay:backdrop { color: #fefefe; } colorswatch.light overlay { color: #3b4252; } colorswatch.light overlay:hover { border-color: rgba(0, 0, 0, 0.5); } colorswatch.light overlay:backdrop { color: #5c6371; } colorswatch:drop(active) { box-shadow: none; } colorswatch:drop(active).light overlay { border-color: #a3be8c; box-shadow: inset 0 0 0 2px #91b175, inset 0 0 0 1px #a3be8c; } colorswatch:drop(active).dark overlay { border-color: #a3be8c; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.3), inset 0 0 0 1px #a3be8c; } colorswatch overlay { box-shadow: inset 0 2px 2px -3px rgba(0, 0, 0, 0.7); border: 1px solid rgba(0, 0, 0, 0.3); } colorswatch overlay:hover { box-shadow: inset 0 1px rgba(255, 255, 255, 0.3); } colorswatch overlay:backdrop, colorswatch overlay:backdrop:hover { border-color: rgba(0, 0, 0, 0.3); box-shadow: none; } colorswatch#add-color-button { border-radius: 5px 5px 0 0; } colorswatch#add-color-button:only-child { border-radius: 5px; } colorswatch#add-color-button overlay { font-weight: normal; color: #3b4252; background-color: #e3e7ef; text-shadow: none; } colorswatch#add-color-button overlay:hover { color: #3b4252; outline-color: rgba(59, 66, 82, 0.3); background-color: #e5e9f0; text-shadow: none; } colorswatch#add-color-button overlay:backdrop { color: #5c6371; outline-color: rgba(59, 66, 82, 0.3); background-color: #e2e6ee; text-shadow: none; } colorswatch:disabled { opacity: 0.5; } colorswatch:disabled overlay { border-color: rgba(0, 0, 0, 0.6); box-shadow: none; } row:selected colorswatch { box-shadow: 0 0 0 2px #fefefe; } colorswatch#editor-color-sample { border-radius: 4px; } colorswatch#editor-color-sample overlay { border-radius: 4.5px; } colorchooser .popover.osd { border-radius: 5px; } /************** * ComboBoxes * **************/ combobox arrow { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); min-height: 16px; min-width: 16px; } combobox:drop(active) { box-shadow: none; } /*********** * Dialogs * ***********/ messagedialog, .messagedialog, .dialog { background-color: #2e3440; } messagedialog .titlebar:not(headerbar), .messagedialog .titlebar:not(headerbar), .dialog .titlebar:not(headerbar) { background-color: rgba(43, 49, 60, 0.95); } messagedialog .titlebar, .messagedialog .titlebar, .dialog .titlebar { min-height: 20px; background-image: none; background-color: rgba(43, 49, 60, 0.95); border-style: none; border-top-left-radius: 4px; border-top-right-radius: 4px; } messagedialog.csd.background, .messagedialog.csd.background, .dialog.csd.background { background-color: rgba(229, 233, 240, 0.95); color: #3b4252; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .messagedialog .message-area, .messagedialog .response-area, .dialog .dialog-action-area, .alert.floating .response-area, .alert.floating .body-scrolled-window { padding: 26px; } filechooser .dialog-action-box { border-top: 1px solid #c5cedd; } filechooser .dialog-action-box:backdrop { border-top-color: #c7d0de; } filechooser #pathbarbox { border-bottom: 1px solid #d8dee9; } filechooserbutton:drop(active) { box-shadow: none; border-color: transparent; } /**************** * Text Entries * ****************/ spinbutton:not(.vertical), spinbutton.vertical > text, entry { min-height: 28px; padding-left: 8px; padding-right: 8px; border: 1px solid; border-radius: 6px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #3b4252; border-color: #c5cedd; background-color: #e5e9f0; } spinbutton:not(.vertical) image.left, spinbutton.vertical > text image.left, entry image.left { padding-left: 0; padding-right: 6px; } spinbutton:not(.vertical) image.right, spinbutton.vertical > text image.right, entry image.right { padding-left: 6px; padding-right: 0; } spinbutton:not(.vertical) undershoot.left, spinbutton.vertical > text undershoot.left, entry undershoot.left { background-color: transparent; background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); padding-left: 1px; background-size: 1px 10px; background-repeat: repeat-y; background-origin: content-box; background-position: left center; border: none; box-shadow: none; } spinbutton:not(.vertical) undershoot.right, spinbutton.vertical > text undershoot.right, entry undershoot.right { background-color: transparent; background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); padding-right: 1px; background-size: 1px 10px; background-repeat: repeat-y; background-origin: content-box; background-position: right center; border: none; box-shadow: none; } spinbutton.flat:focus-within:not(.vertical), spinbutton.vertical > text.flat:focus-within, spinbutton.flat:not(.vertical), spinbutton.vertical > text.flat, entry.flat:focus-within, entry.flat { min-height: 0; padding: 2px; background-image: none; border-color: transparent; box-shadow: none; border-radius: 0; } spinbutton:focus-within:not(.vertical), spinbutton.vertical > text:focus-within, entry:focus-within { border-color: #81a1c1; box-shadow: 0px 0px 1px 1px #81a1c1 inset; } spinbutton:disabled:not(.vertical), spinbutton.vertical > text:disabled, entry:disabled { color: #8a909e; border-color: #c5cedd; background-color: #dde2ec; box-shadow: none; } spinbutton:backdrop:not(.vertical), spinbutton.vertical > text:backdrop, entry:backdrop { color: #5c6371; border-color: #c7d0de; background-color: #e2e6ee; box-shadow: none; transition: 200ms ease-out; } spinbutton:backdrop:disabled:not(.vertical), spinbutton.vertical > text:backdrop:disabled, entry:backdrop:disabled { color: #a7b5cd; border-color: #c7d0de; background-color: #dde2ec; box-shadow: none; } spinbutton.error:not(.vertical), spinbutton.vertical > text.error, entry.error { color: #3b4252; border-color: #c5cedd; background-color: #e5e9f0; color: #bf616a; border-color: #bf616a; } spinbutton.error:focus-within:not(.vertical), spinbutton.vertical > text.error:focus-within, entry.error:focus-within { border-color: #bf616a; box-shadow: 0px 0px 1px 1px #81a1c1 inset; } spinbutton.error:selected:focus:not(.vertical), spinbutton.vertical > text.error:selected:focus, spinbutton.error:selected:not(.vertical), spinbutton.vertical > text.error:selected, entry.error:selected:focus, entry.error:selected { background-color: #bf616a; } spinbutton.warning:not(.vertical), spinbutton.vertical > text.warning, entry.warning { color: #3b4252; border-color: #c5cedd; background-color: #e5e9f0; color: #d08770; border-color: #d08770; } spinbutton.warning:focus-within:not(.vertical), spinbutton.vertical > text.warning:focus-within, entry.warning:focus-within { border-color: #d08770; box-shadow: 0px 0px 1px 1px #81a1c1 inset; } spinbutton.warning:selected:focus:not(.vertical), spinbutton.vertical > text.warning:selected:focus, spinbutton.warning:selected:not(.vertical), spinbutton.vertical > text.warning:selected, entry.warning:selected:focus, entry.warning:selected { background-color: #d08770; } spinbutton:not(.vertical) image, spinbutton.vertical > text image, entry image { color: #5d6372; } spinbutton:not(.vertical) image:hover, spinbutton.vertical > text image:hover, entry image:hover { color: #3b4252; } spinbutton:not(.vertical) image:active, spinbutton.vertical > text image:active, entry image:active { color: #81a1c1; } spinbutton:not(.vertical) image:backdrop, spinbutton.vertical > text image:backdrop, entry image:backdrop { color: #9ca1ae; } spinbutton:drop(active):focus-within:not(.vertical), spinbutton.vertical > text:drop(active):focus-within, spinbutton:drop(active):not(.vertical), spinbutton.vertical > text:drop(active), entry:drop(active):focus-within, entry:drop(active) { border-color: #a3be8c; box-shadow: inset 0 0 0 1px #a3be8c; } .osd spinbutton:not(.vertical), .osd spinbutton.vertical > text, .osd entry { color: #d8dee9; border-color: #1f232b; background-color: rgba(31, 35, 43, 0.5); box-shadow: none; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; } .osd spinbutton:focus-within:not(.vertical), .osd spinbutton.vertical > text:focus-within, .osd entry:focus-within { color: #d8dee9; border-color: #81a1c1; background-color: rgba(31, 35, 43, 0.5); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; } .osd spinbutton:backdrop:not(.vertical), .osd spinbutton.vertical > text:backdrop, .osd entry:backdrop { color: #d8dee9; border-color: #1f232b; background-color: rgba(31, 35, 43, 0.5); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } .osd spinbutton:disabled:not(.vertical), .osd spinbutton.vertical > text:disabled, .osd entry:disabled { color: #808690; border-color: #1f232b; background-color: rgba(58, 63, 73, 0.5); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } spinbutton:not(.vertical) progress, spinbutton.vertical > text progress, entry progress { margin: 2px -6px; background-color: transparent; background-image: none; border-radius: 0; border-width: 0 0 2px; border-color: #81a1c1; border-style: solid; box-shadow: none; } spinbutton:not(.vertical) progress:backdrop, spinbutton.vertical > text progress:backdrop, entry progress:backdrop { background-color: transparent; } .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + spinbutton:not(.vertical), spinbutton.vertical.linked:not(.vertical) > text:drop(active) + spinbutton:not(.vertical), spinbutton.vertical.linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + text, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + text, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + menubutton > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + menubutton > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + dropdown > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + dropdown > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + colorbutton > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + colorbutton > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + fontbutton > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + fontbutton > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + filechooserbutton > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + filechooserbutton > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + filechooserbutton > combobox > box > button.combo, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + filechooserbutton > combobox > box > button.combo, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + appchooserbutton > combobox > box > button.combo, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + appchooserbutton > combobox > box > button.combo, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + combobox > box > button.combo, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + combobox > box > button.combo, .linked:not(.vertical) > entry:drop(active) + spinbutton:not(.vertical), spinbutton.vertical.linked:not(.vertical) > entry:drop(active) + text, .linked:not(.vertical) > entry:drop(active) + button, .linked:not(.vertical) > entry:drop(active) + menubutton > button, .linked:not(.vertical) > entry:drop(active) + dropdown > button, .linked:not(.vertical) > entry:drop(active) + colorbutton > button, .linked:not(.vertical) > entry:drop(active) + fontbutton > button, .linked:not(.vertical) > entry:drop(active) + filechooserbutton > button, .linked:not(.vertical) > entry:drop(active) + filechooserbutton > combobox > box > button.combo, .linked:not(.vertical) > entry:drop(active) + appchooserbutton > combobox > box > button.combo, .linked:not(.vertical) > entry:drop(active) + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + entry, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + entry, .linked:not(.vertical) > entry:drop(active) + entry { border-left-color: #a3be8c; } .linked:not(.vertical) > spinbutton:focus-within:not(.vertical), spinbutton.vertical.linked:not(.vertical) > text:focus-within, .linked:not(.vertical) > entry:focus-within { border-color: #81a1c1; box-shadow: 0px 0px 1px 1px #81a1c1 inset; border-right-style: solid; } .linked:not(.vertical) > spinbutton:focus-within:not(.vertical) + .popup button, spinbutton.vertical.linked:not(.vertical) > text:focus-within + .popup button, .linked:not(.vertical) > entry:focus-within + .popup button { border-left-color: #81a1c1; } .linked:not(.vertical) > spinbutton:not(.vertical) + .popup button, spinbutton.vertical.linked:not(.vertical) > text + .popup button, .linked:not(.vertical) > entry + .popup button { border-radius: 0px 6px 6px 0px; } .linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled), spinbutton.vertical.linked > text:not(:disabled) + entry:not(:disabled), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):not(.vertical), spinbutton.vertical.linked > text:not(:disabled) + spinbutton:not(:disabled):not(.vertical), spinbutton.vertical.linked > spinbutton:not(:disabled):not(.vertical) + text:not(:disabled), spinbutton.vertical.linked > text:not(:disabled) + text:not(:disabled), .linked.vertical > entry:not(:disabled) + entry:not(:disabled), .linked.vertical > entry:not(:disabled) + spinbutton:not(:disabled):not(.vertical), spinbutton.vertical.linked > entry:not(:disabled) + text:not(:disabled) { border-top-color: #dbe1ea; background-image: linear-gradient(to bottom, #e5e9f0, #e5e9f0); } .linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled):backdrop, spinbutton.vertical.linked > text:not(:disabled) + entry:not(:disabled):backdrop, .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):backdrop:not(.vertical), spinbutton.vertical.linked > text:not(:disabled) + spinbutton:not(:disabled):backdrop:not(.vertical), spinbutton.vertical.linked > spinbutton:not(:disabled):not(.vertical) + text:not(:disabled):backdrop, spinbutton.vertical.linked > text:not(:disabled) + text:not(:disabled):backdrop, .linked.vertical > entry:not(:disabled) + entry:not(:disabled):backdrop, .linked.vertical > entry:not(:disabled) + spinbutton:not(:disabled):backdrop:not(.vertical), spinbutton.vertical.linked > entry:not(:disabled) + text:not(:disabled):backdrop { border-top-color: #dadfe9; background-image: linear-gradient(to bottom, #e2e6ee, #e2e6ee); } .linked.vertical > spinbutton:disabled:not(.vertical) + spinbutton:disabled:not(.vertical), spinbutton.vertical.linked > text:disabled + spinbutton:disabled:not(.vertical), spinbutton.vertical.linked > spinbutton:disabled:not(.vertical) + text:disabled, spinbutton.vertical.linked > text:disabled + text:disabled, .linked.vertical > spinbutton:disabled:not(.vertical) + entry:disabled, spinbutton.vertical.linked > text:disabled + entry:disabled, .linked.vertical > entry:disabled + spinbutton:disabled:not(.vertical), spinbutton.vertical.linked > entry:disabled + text:disabled, .linked.vertical > entry:disabled + entry:disabled { border-top-color: #dbe1ea; } .linked.vertical > spinbutton:not(.vertical) + spinbutton:focus:not(:only-child):not(.vertical), spinbutton.vertical.linked > text + spinbutton:focus:not(:only-child):not(.vertical), spinbutton.vertical.linked > spinbutton:not(.vertical) + text:focus:not(:only-child), spinbutton.vertical.linked > text + text:focus:not(:only-child), .linked.vertical > spinbutton:not(.vertical) + entry:focus:not(:only-child), spinbutton.vertical.linked > text + entry:focus:not(:only-child), .linked.vertical > entry + spinbutton:focus:not(:only-child):not(.vertical), spinbutton.vertical.linked > entry + text:focus:not(:only-child), .linked.vertical > entry + entry:focus:not(:only-child) { border-top-color: #81a1c1; } .linked.vertical > spinbutton:not(.vertical) + spinbutton:drop(active):not(:only-child):not(.vertical), spinbutton.vertical.linked > text + spinbutton:drop(active):not(:only-child):not(.vertical), spinbutton.vertical.linked > spinbutton:not(.vertical) + text:drop(active):not(:only-child), spinbutton.vertical.linked > text + text:drop(active):not(:only-child), .linked.vertical > spinbutton:not(.vertical) + entry:drop(active):not(:only-child), spinbutton.vertical.linked > text + entry:drop(active):not(:only-child), .linked.vertical > entry + spinbutton:drop(active):not(:only-child):not(.vertical), spinbutton.vertical.linked > entry + text:drop(active):not(:only-child), .linked.vertical > entry + entry:drop(active):not(:only-child) { border-top-color: #a3be8c; } .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + spinbutton:not(.vertical), spinbutton.vertical.linked > text:focus:not(:only-child) + spinbutton:not(.vertical), spinbutton.vertical.linked > spinbutton:focus:not(:only-child):not(.vertical) + text, spinbutton.vertical.linked > text:focus:not(:only-child) + text, .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + entry, spinbutton.vertical.linked > text:focus:not(:only-child) + entry, .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + button, spinbutton.vertical.linked > text:focus:not(:only-child) + button, .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + combobox > box > button.combo, spinbutton.vertical.linked > text:focus:not(:only-child) + combobox > box > button.combo, .linked.vertical > entry:focus:not(:only-child) + spinbutton:not(.vertical), spinbutton.vertical.linked > entry:focus:not(:only-child) + text, .linked.vertical > entry:focus:not(:only-child) + entry, .linked.vertical > entry:focus:not(:only-child) + button, .linked.vertical > entry:focus:not(:only-child) + combobox > box > button.combo { border-top-color: #81a1c1; } .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + spinbutton:not(.vertical), spinbutton.vertical.linked > text:drop(active):not(:only-child) + spinbutton:not(.vertical), spinbutton.vertical.linked > spinbutton:drop(active):not(:only-child):not(.vertical) + text, spinbutton.vertical.linked > text:drop(active):not(:only-child) + text, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + entry, spinbutton.vertical.linked > text:drop(active):not(:only-child) + entry, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + button, spinbutton.vertical.linked > text:drop(active):not(:only-child) + button, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + combobox > box > button.combo, spinbutton.vertical.linked > text:drop(active):not(:only-child) + combobox > box > button.combo, .linked.vertical > entry:drop(active):not(:only-child) + spinbutton:not(.vertical), spinbutton.vertical.linked > entry:drop(active):not(:only-child) + text, .linked.vertical > entry:drop(active):not(:only-child) + entry, .linked.vertical > entry:drop(active):not(:only-child) + button, .linked.vertical > entry:drop(active):not(:only-child) + combobox > box > button.combo { border-top-color: #a3be8c; } treeview entry:focus-within:dir(rtl), treeview entry:focus-within:dir(ltr) { background-color: #e5e9f0; transition-property: color, background; } treeview entry.flat, treeview entry { border-radius: 0; background-image: none; background-color: #e5e9f0; } treeview entry.flat:focus-within, treeview entry:focus-within { border-color: #81a1c1; } /************* * Expanders * *************/ expander { min-width: 16px; min-height: 16px; -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } expander:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); } expander:hover { color: #818ca5; } expander:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } /**************** * Floating Bar * ****************/ .floating-bar { background-color: #d8dee9; border-width: 1px; border-style: solid solid none; border-color: #c5cedd; border-radius: 3px 3px 0 0; box-shadow: inset 0 1px rgba(255, 255, 255, 0.2); } .floating-bar.bottom.left { border-left-style: none; border-top-left-radius: 0; } .floating-bar.bottom.right { border-right-style: none; border-top-right-radius: 0; } .floating-bar > button { padding: 4px; } .floating-bar:backdrop { background-color: #d8dee9; border-color: #c7d0de; } /********** * Frames * **********/ frame > border, .frame { box-shadow: none; margin: 0; padding: 0; border-radius: 0; border: 1px solid #c5cedd; } frame > border.flat, .frame.flat { border-style: none; } frame > border:backdrop, .frame:backdrop { border-color: #c7d0de; } actionbar > revealer > box { padding: 6px; border-top: 1px solid #c5cedd; } actionbar > revealer > box:backdrop { border-color: #c7d0de; } scrolledwindow viewport.frame { border-style: none; } scrolledwindow overshoot.top { background-image: radial-gradient(farthest-side at top, #a4b2cb 85%, rgba(164, 178, 203, 0)), radial-gradient(farthest-side at top, rgba(59, 66, 82, 0.07), rgba(59, 66, 82, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: top; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.top:backdrop { background-image: radial-gradient(farthest-side at top, #c7d0de 85%, rgba(199, 208, 222, 0)); background-size: 100% 3%; background-repeat: no-repeat; background-position: top; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.bottom { background-image: radial-gradient(farthest-side at bottom, #a4b2cb 85%, rgba(164, 178, 203, 0)), radial-gradient(farthest-side at bottom, rgba(59, 66, 82, 0.07), rgba(59, 66, 82, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: bottom; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.bottom:backdrop { background-image: radial-gradient(farthest-side at bottom, #c7d0de 85%, rgba(199, 208, 222, 0)); background-size: 100% 3%; background-repeat: no-repeat; background-position: bottom; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.left { background-image: radial-gradient(farthest-side at left, #a4b2cb 85%, rgba(164, 178, 203, 0)), radial-gradient(farthest-side at left, rgba(59, 66, 82, 0.07), rgba(59, 66, 82, 0)); background-size: 3% 100%, 50% 100%; background-repeat: no-repeat; background-position: left; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.left:backdrop { background-image: radial-gradient(farthest-side at left, #c7d0de 85%, rgba(199, 208, 222, 0)); background-size: 3% 100%; background-repeat: no-repeat; background-position: left; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.right { background-image: radial-gradient(farthest-side at right, #a4b2cb 85%, rgba(164, 178, 203, 0)), radial-gradient(farthest-side at right, rgba(59, 66, 82, 0.07), rgba(59, 66, 82, 0)); background-size: 3% 100%, 50% 100%; background-repeat: no-repeat; background-position: right; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.right:backdrop { background-image: radial-gradient(farthest-side at right, #c7d0de 85%, rgba(199, 208, 222, 0)); background-size: 3% 100%; background-repeat: no-repeat; background-position: right; background-color: transparent; border: none; box-shadow: none; } scrolledwindow undershoot.top { background-color: transparent; background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); padding-top: 1px; background-size: 10px 1px; background-repeat: repeat-x; background-origin: content-box; background-position: center top; border: none; box-shadow: none; } scrolledwindow undershoot.bottom { background-color: transparent; background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); padding-bottom: 1px; background-size: 10px 1px; background-repeat: repeat-x; background-origin: content-box; background-position: center bottom; border: none; box-shadow: none; } scrolledwindow undershoot.left { background-color: transparent; background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); padding-left: 1px; background-size: 1px 10px; background-repeat: repeat-y; background-origin: content-box; background-position: left center; border: none; box-shadow: none; } scrolledwindow undershoot.right { background-color: transparent; background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); padding-right: 1px; background-size: 1px 10px; background-repeat: repeat-y; background-origin: content-box; background-position: right center; border: none; box-shadow: none; } scrolledwindow junction { border-color: transparent; border-image: linear-gradient(to bottom, #c5cedd 1px, transparent 1px) 0 0 0 1/0 1px stretch; background-color: #dfe4ed; } scrolledwindow junction:dir(rtl) { border-image-slice: 0 1 0 0; } scrolledwindow junction:backdrop { border-image-source: linear-gradient(to bottom, #c7d0de 1px, transparent 1px); background-color: #ced6e3; transition: 200ms ease-out; } separator { background: rgba(0, 0, 0, 0.1); } /************ * Popovers * ************/ GraniteWidgetsPopOver { border: 1px solid #e5e9f0; background: #e5e9f0; color: #3b4252; } GraniteWidgetsPopOver .button { background-image: none; background: none; border: none; } GraniteWidgetsPopOver .button:active, GraniteWidgetsPopOver .button:active:hover { color: #81a1c1; } GraniteWidgetsPopOver > .frame { border: none; } GraniteWidgetsPopOver .sidebar.view, GraniteWidgetsPopOver iconview.sidebar { border: none; background: none; } GraniteWidgetsStaticNotebook .frame { border: none; } .popover_bg { background-color: #e5e9f0; background-image: none; border: 1px solid #e5e9f0; color: #3b4252; } /*********** * Welcome * **********/ GraniteWidgetsWelcome { background-color: #e5e9f0; } GraniteWidgetsWelcome GtkLabel { color: #3b4252; } GraniteWidgetsWelcome .h1, GraniteWidgetsWelcome .h3 { color: rgba(59, 66, 82, 0.8); } /************** * Source List * ***************/ .source-list { background-color: #d8dee9; border: solid #c5cedd; color: #3b4252; border-right-width: 1px; } .source-list .category-expander { color: transparent; } .source-list .badge { background-image: none; background-color: rgba(0, 0, 0, 0.4); color: #d8dee9; border-radius: 10px; padding: 0 6px; margin: 0 3px; border-width: 0; } .source-list .badge:selected:backdrop, .source-list .badge:selected:hover:backdrop { background-color: rgba(0, 0, 0, 0.2); color: #c8d0e0; } .source-list row, .source-list .list-row { border: none; padding: 0; } .source-list row > GtkLabel, .source-list row > label, .source-list .list-row > GtkLabel, .source-list .list-row > label { padding-left: 6px; padding-right: 6px; } /************** * Text Styles * **************/ .h1 { font-size: 24px; } .h2 { font-weight: 300; font-size: 18px; } .h3 { font-size: 11px; } .h4, .category-label { font-size: 12px; padding: 6px; color: rgba(59, 66, 82, 0.3); font-weight: bold; text-shadow: 0 1px rgba(255, 255, 255, 0.2); } /************** * Storage Bar * **************/ .storage-bar .trough { border: none; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2); background-image: none; background-color: transparent; padding: 8px 6px; } .storage-bar .fill-block { background-color: #ebcb8b; border: none; box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); transition: all 200ms ease-in-out; padding: 8px 6px; } .storage-bar .fill-block:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-left-width: 1px; box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1), inset 1px 0 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); } .storage-bar .fill-block:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1), inset -1px 0 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); } .storage-bar .fill-block.empty-block { background-color: #e5e9f0; } .storage-bar .fill-block.app { background-color: #5e81ac; } .storage-bar .fill-block.audio { background-color: #d08770; } .storage-bar .fill-block.photo { background-color: #bf616a; } .storage-bar .fill-block.video { background-color: #b48ead; } .storage-bar .fill-block .legend { padding: 12px; border-radius: 4px; } /*************** * Header bars * ***************/ .titlebar:not(headerbar), .titlebar, headerbar { padding: 0 6px; min-height: 38px; background: #2b313c; color: #d8dee9; border-radius: 0; } .titlebar:backdrop, headerbar:backdrop { border-color: #c7d0de; transition: 200ms ease-out; } .titlebar .title, headerbar .title { font-weight: bold; padding-left: 12px; padding-right: 12px; } .titlebar .subtitle, headerbar .subtitle { font-size: smaller; padding-left: 12px; padding-right: 12px; } .titlebar entry, headerbar entry { min-height: 24px; } .titlebar button, headerbar button { color: #d8dee9; border-radius: 6px; text-shadow: none; box-shadow: none; border: 1px solid #1f232b; background-color: #343b48; border-color: #1f232b; } .titlebar button:active, .titlebar button:checked, headerbar button:active, headerbar button:checked { color: #fff; outline-color: rgba(255, 255, 255, 0.3); background-color: #81a1c1; text-shadow: none; border-color: #1f232b; } .titlebar button:backdrop, .titlebar button:disabled, .titlebar button:backdrop:disabled, headerbar button:backdrop, headerbar button:disabled, headerbar button:backdrop:disabled { color: rgba(216, 222, 233, 0.2); background-color: #282d37; border-color: #1f232b; text-shadow: none; box-shadow: none; } .titlebar .linked > button, .titlebar .path-bar-box button, .titlebar headerbar .linked > button, headerbar .path-bar-box .titlebar button, .titlebar .linked > button:hover, .titlebar .linked > button:backdrop, .titlebar headerbar .linked > button, headerbar .path-bar-box .titlebar button, headerbar .titlebar .linked > button, headerbar .linked > button, headerbar .titlebar .path-bar-box button, .titlebar .path-bar-box headerbar button, headerbar .path-bar-box button, headerbar .titlebar .linked > button:hover, .titlebar headerbar .linked > button:hover, headerbar .titlebar .linked > button:backdrop, .titlebar headerbar .linked > button:backdrop, headerbar .linked > button:hover, headerbar .linked > button:backdrop { border-radius: 0; border-right-style: none; box-shadow: none; } .titlebar .linked > button:first-child, .titlebar .path-bar-box button:first-child, .titlebar headerbar .linked > button:first-child, headerbar .path-bar-box .titlebar button:first-child, headerbar .titlebar .linked > button:first-child, headerbar .linked > button:first-child, .titlebar .path-bar-box headerbar button:first-child, headerbar .path-bar-box button:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .titlebar .linked > button:last-child, .titlebar .path-bar-box button:last-child, .titlebar headerbar .linked > button:last-child, headerbar .path-bar-box .titlebar button:last-child, headerbar .titlebar .linked > button:last-child, headerbar .linked > button:last-child, .titlebar .path-bar-box headerbar button:last-child, headerbar .path-bar-box button:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; border-right-style: solid; } .titlebar .linked > button:only-child, .titlebar .path-bar-box button:only-child, .titlebar headerbar .linked > button:only-child, headerbar .path-bar-box .titlebar button:only-child, headerbar .titlebar .linked > button:only-child, headerbar .linked > button:only-child, .titlebar .path-bar-box headerbar button:only-child, headerbar .path-bar-box button:only-child { border-radius: 6px; border-style: solid; } .titlebar .linked > button, .titlebar headerbar .linked > button, .titlebar .path-bar-box button, headerbar .path-bar-box .titlebar button, headerbar .titlebar .linked > button, .titlebar headerbar .linked > button, headerbar .linked > button, headerbar .titlebar .path-bar-box button, .titlebar .path-bar-box headerbar button, headerbar .path-bar-box button { border-color: #1f232b; } .titlebar .linked > button:active, .titlebar headerbar .linked > button:active, .titlebar .path-bar-box button:active, headerbar .path-bar-box .titlebar button:active, .titlebar .linked > button:checked, .titlebar headerbar .linked > button:checked, .titlebar .path-bar-box button:checked, headerbar .path-bar-box .titlebar button:checked, headerbar .titlebar .linked > button:active, headerbar .linked > button:active, .titlebar .path-bar-box headerbar button:active, headerbar .path-bar-box button:active, headerbar .titlebar .linked > button:checked, headerbar .linked > button:checked, .titlebar .path-bar-box headerbar button:checked, headerbar .path-bar-box button:checked { color: #fff; outline-color: rgba(255, 255, 255, 0.3); background-color: #81a1c1; text-shadow: none; } .titlebar .linked > button:active:backdrop, .titlebar headerbar .linked > button:active:backdrop, .titlebar .path-bar-box button:active:backdrop, headerbar .path-bar-box .titlebar button:active:backdrop, .titlebar .linked > button:checked:backdrop, .titlebar headerbar .linked > button:checked:backdrop, .titlebar .path-bar-box button:checked:backdrop, headerbar .path-bar-box .titlebar button:checked:backdrop, headerbar .titlebar .linked > button:active:backdrop, headerbar .linked > button:active:backdrop, .titlebar .path-bar-box headerbar button:active:backdrop, headerbar .path-bar-box button:active:backdrop, headerbar .titlebar .linked > button:checked:backdrop, headerbar .linked > button:checked:backdrop, .titlebar .path-bar-box headerbar button:checked:backdrop, headerbar .path-bar-box button:checked:backdrop { background-color: rgba(129, 161, 193, 0.6); color: #81a1c1; } .titlebar .linked > button:active:backdrop label, .titlebar .path-bar-box button:active:backdrop label, headerbar .path-bar-box .titlebar button:active:backdrop label, .titlebar .linked > button:checked:backdrop label, .titlebar .path-bar-box button:checked:backdrop label, headerbar .path-bar-box .titlebar button:checked:backdrop label, headerbar .linked > button:active:backdrop label, .titlebar .path-bar-box headerbar button:active:backdrop label, headerbar .path-bar-box button:active:backdrop label, headerbar .linked > button:checked:backdrop label, .titlebar .path-bar-box headerbar button:checked:backdrop label, headerbar .path-bar-box button:checked:backdrop label { color: #81a1c1; } .titlebar .linked:not(.vertical) > entry, headerbar .linked:not(.vertical) > entry { border-color: #1f232b; box-shadow: none; background: #2f3642; color: #d8dee9; caret-color: #d8dee9; } .titlebar .linked:not(.vertical) > entry *, headerbar .linked:not(.vertical) > entry * { color: #d8dee9; } .titlebar .linked:not(.vertical) > entry:focus, headerbar .linked:not(.vertical) > entry:focus { border-color: #81a1c1; } .titlebar splitbutton.image-button > button:not(.toggle), headerbar splitbutton.image-button > button:not(.toggle) { border-radius: 6px 0px 0px 6px; } .titlebar splitbutton.image-button menubutton.popup button.toggle, headerbar splitbutton.image-button menubutton.popup button.toggle { border-radius: 0px 6px 6px 0px; } .titlebar .path-bar-box .dim-label, .titlebar .path-bar-box label.separator, .titlebar .path-bar-box .subtitle, headerbar .path-bar-box .dim-label, headerbar .path-bar-box label.separator, headerbar .path-bar-box .subtitle { color: transparent; margin-right: -6px; } .titlebar .path-bar-box button:last-child, headerbar .path-bar-box button:last-child { margin-left: -1px; border-radius: 0px; } .titlebar .path-bar-box button:last-child:active, .titlebar .path-bar-box button:last-child:checked, headerbar .path-bar-box button:last-child:active, headerbar .path-bar-box button:last-child:checked { border-radius: 0px 6px 6px 0px; } .titlebar .path-bar-box button:first-child, headerbar .path-bar-box button:first-child { border-radius: 6px 0px 0px 6px; } .titlebar .path-bar-box button:first-child:active, .titlebar .path-bar-box button:first-child:checked, headerbar .path-bar-box button:first-child:active, headerbar .path-bar-box button:first-child:checked { border-radius: 6px; } .titlebar .path-bar-box widget > .text-button:last-child, headerbar .path-bar-box widget > .text-button:last-child { border-radius: 0px 6px 6px 0px; color: #fff; outline-color: rgba(255, 255, 255, 0.3); background-color: #81a1c1; text-shadow: none; } .titlebar .path-bar-box widget > .text-button:last-child:backdrop, headerbar .path-bar-box widget > .text-button:last-child:backdrop { background: rgba(129, 161, 193, 0.6); } .titlebar .path-bar-box widget > .text-button:last-child:backdrop, .titlebar .path-bar-box widget > .text-button:last-child:backdrop label, headerbar .path-bar-box widget > .text-button:last-child:backdrop, headerbar .path-bar-box widget > .text-button:last-child:backdrop label { color: #81a1c1; } .titlebar .path-bar-box widget > .text-button:last-child:only-child, headerbar .path-bar-box widget > .text-button:last-child:only-child { border-radius: 6px; } .selection-mode.titlebar button:backdrop.flat:active, .selection-mode.titlebar button:backdrop.flat:checked, .selection-mode.titlebar button:backdrop:active, .selection-mode.titlebar button:backdrop:checked, headerbar.selection-mode button:backdrop.flat:active, headerbar.selection-mode button:backdrop.flat:checked, headerbar.selection-mode button:backdrop:active, headerbar.selection-mode button:backdrop:checked { border-color: #5f88b0; } .selection-mode.titlebar button:backdrop.flat:active label, .selection-mode.titlebar button:backdrop.flat:checked label, .selection-mode.titlebar button:backdrop:active label, .selection-mode.titlebar button:backdrop:checked label, headerbar.selection-mode button:backdrop.flat:active label, headerbar.selection-mode button:backdrop.flat:checked label, headerbar.selection-mode button:backdrop:active label, headerbar.selection-mode button:backdrop:checked label { color: rgba(129, 161, 193, 0.6); } .tiled .titlebar, .maximized .titlebar, .tiled headerbar.titlebar, .maximized headerbar.titlebar { box-shadow: none; } .tiled .titlebar:backdrop, .tiled .titlebar, .maximized .titlebar:backdrop, .maximized .titlebar, .tiled headerbar:backdrop, .tiled headerbar, .maximized headerbar:backdrop, .maximized headerbar { border-radius: 0; } .default-decoration.titlebar, headerbar.default-decoration { padding: 5px 4px; min-height: 20px; } .default-decoration.titlebar button.titlebutton, headerbar.default-decoration button.titlebutton { min-height: 20px; min-width: 20px; margin: 0; padding: 0; } headerbar entry, headerbar spinbutton, headerbar separator:not(.sidebar), headerbar button, headerbar menubutton { margin-top: 3px; margin-bottom: 3px; } headerbar menubutton > button, headerbar spinbutton > button, headerbar splitbutton > button, headerbar splitbutton > menubutton, headerbar entry > menubutton { margin-top: 0px; margin-bottom: 0px; } headerbar switch { margin-top: 0; margin-bottom: 0; } headerbar separator { background: transparent; } .background:not(.tiled):not(.maximized) .titlebar { box-shadow: inset 0 1px rgba(255, 255, 255, 0.2); } .background:not(.tiled):not(.maximized) .titlebar:backdrop, .background:not(.tiled):not(.maximized) .titlebar { border-top-left-radius: 6px; border-top-right-radius: 6px; } window:not(.tiled):not(.maximized) separator:first-child + headerbar:backdrop, window:not(.tiled):not(.maximized) separator:first-child + headerbar, window:not(.tiled):not(.maximized) headerbar:first-child:backdrop, window:not(.tiled):not(.maximized) headerbar:first-child { border-top-left-radius: 6px; } window:not(.tiled):not(.maximized) headerbar:last-child:backdrop, window:not(.tiled):not(.maximized) headerbar:last-child { border-top-right-radius: 6px; } window.csd > .titlebar:not(headerbar) { padding: 0; background-color: transparent; background-image: none; border-style: none; border-color: transparent; box-shadow: none; } .titlebar:not(headerbar) > separator, .titlebar:not(headerbar) > separator:backdrop { background: #2b313c; } .sidebar-pane .top-bar, .sidebar-pane .top-bar headerbar, .content-pane .top-bar, .content-pane .top-bar headerbar { background-color: #2b313c; } .raised.top-bar { background-color: #2b313c; } /************** * GtkInfoBar * **************/ .info, .warning, .question, .error, infobar { text-shadow: none; color: #3b4252; background-color: #d8dee9; border-bottom: 1px solid #b7c2d7; box-shadow: none; } .info, .warning, .question, .error { text-shadow: none; color: #fefefe; border: none; } .info .label, .warning .label, .question .label, .error .label { color: #fefefe; } .info .label:backdrop, .warning .label:backdrop, .question .label:backdrop, .error .label:backdrop { color: #fefefe; } .info button, .warning button, .question button, .error button { border-radius: 2px; border: none; background: rgba(229, 233, 240, 0.98); color: #3b4252; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2); } .info button .label, .warning button .label, .question button .label, .error button .label { color: #3b4252; } .info button:active, .warning button:active, .question button:active, .error button:active { background: #e5e9f0; color: #3b4252; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); } .info button:active:backdrop, .warning button:active:backdrop, .question button:active:backdrop, .error button:active:backdrop { background: rgba(229, 233, 240, 0.8); color: rgba(59, 66, 82, 0.5); box-shadow: none; } .info button:hover, .warning button:hover, .question button:hover, .error button:hover, .info button:focus, .warning button:focus, .question button:focus, .error button:focus { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); } .info button:disabled, .warning button:disabled, .question button:disabled, .error button:disabled { background: rgba(229, 233, 240, 0.6); color: rgba(59, 66, 82, 0.5); box-shadow: none; } .info button:disabled:backdrop, .warning button:disabled:backdrop, .question button:disabled:backdrop, .error button:disabled:backdrop { background: rgba(229, 233, 240, 0.5); color: rgba(59, 66, 82, 0.5); box-shadow: none; } .info button:backdrop, .warning button:backdrop, .question button:backdrop, .error button:backdrop { background: rgba(229, 233, 240, 0.8); color: rgba(59, 66, 82, 0.5); box-shadow: none; } .info, .info:backdrop { color: #8fbcbb; background-color: transparent; } .warning, .warning:backdrop { color: #d08770; background-color: transparent; } .question, .question:backdrop { color: #88c0d0; background-color: transparent; } .error, .error:backdrop { color: #bf616a; background-color: transparent; } banner revealer widget { background: linear-gradient(to right, #88c0d0 0%, #88c0d0 100%); padding: 5px; color: #e5e9f0; } levelbar.horizontal trough > block { min-height: 5px; border-radius: 5px; } levelbar.horizontal trough > block:dir(rtl) { border-radius: 0 5px 5px 0; } levelbar.horizontal trough > block:dir(ltr) { border-radius: 5px 0 0 5px; } levelbar.horizontal trough > block.empty, levelbar.horizontal trough > block.full { border-radius: 5px; } levelbar.horizontal.discrete trough > block { min-height: 2px; margin: 1px; min-width: 24px; border-radius: 0; } levelbar.horizontal.discrete trough > block:first-child { border-radius: 2px 0 0 2px; } levelbar.horizontal.discrete trough > block:last-child { border-radius: 0 2px 2px 0; } levelbar.vertical trough > block { min-width: 5px; border-radius: 5px; } levelbar.vertical.discrete > trough > block { min-width: 2px; margin: 1px 0; min-height: 32px; } levelbar > trough { padding: 0; } levelbar > trough > block { border: 1px solid; } levelbar > trough > block.low { border-color: #d08770; background-color: #d08770; } levelbar > trough > block.high, levelbar > trough > block:not(.empty) { border-color: #81a1c1; background-color: #81a1c1; } levelbar > trough > block.full { border-color: #88c0d0; background-color: #88c0d0; } levelbar > trough > block.empty { background-color: #c5cedd; border-color: #c5cedd; } /********* * Links * *********/ *:link, button:link, button:visited { color: #5e81ac; } *:link:visited, button:visited { color: rgba(94, 129, 172, 0.5); } *:selected *:link:visited, *:selected button:visited:link, *:selected button:visited { color: #ccd9e6; } *:link:hover, button:hover:link, button:hover:visited { color: #809bbd; } *:selected *:link:hover, *:selected button:hover:link, *:selected button:hover:visited { color: #f2f5f8; } *:link:active, button:active:link, button:active:visited { color: #5e81ac; } *:selected *:link:active, *:selected button:active:link, *:selected button:active:visited { color: #e5ebf2; } *:link:backdrop:backdrop:hover, button:backdrop:backdrop:hover:link, button:backdrop:backdrop:hover:visited, *:link:backdrop:backdrop:hover:selected, button:backdrop:backdrop:hover:selected:link, button:backdrop:backdrop:hover:selected:visited, *:link:backdrop, button:backdrop:link, button:backdrop:visited { color: #81a1c1; } *:link:selected, button:selected:link, button:selected:visited, *:selected *:link, *:selected button:link, *:selected button:visited { color: #e5ebf2; } button:link, button:visited { text-shadow: none; } button:link:hover, button:link:active, button:link:checked, button:visited:hover, button:visited:active, button:visited:checked { text-shadow: none; } button:link > label, button:visited > label { text-decoration-line: underline; } /********* * Lists * *********/ list, listview { background-color: #e5e9f0; border-color: #c5cedd; } list, list label, listview, listview label { color: #3b4252; } list:backdrop, listview:backdrop { background-color: #e2e6ee; border-color: #c7d0de; } list.horizontal row.separator, list.separators.horizontal > row:not(.separator), listview.horizontal row.separator, listview.separators.horizontal > row:not(.separator) { border-left: 1px solid #c5cedd; } list:not(.horizontal) row.separator, list.separators:not(.horizontal) > row:not(.separator), listview:not(.horizontal) row.separator, listview.separators:not(.horizontal) > row:not(.separator) { border-bottom: 1px solid #c5cedd; } row:hover { transition: none; } row:backdrop { transition: 200ms ease-out; } row.activatable.has-open-popup, row.activatable:hover { background-color: rgba(59, 66, 82, 0.05); } row.activatable:active { box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); } row.activatable:backdrop:hover { background-color: transparent; } row.activatable:selected:active { box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); } row.activatable:selected.has-open-popup, row.activatable:selected:hover { background-color: rgba(129, 161, 193, 0.5); } row.activatable:selected:backdrop { background-color: rgba(129, 161, 193, 0.6); } row.activatable.button { font-weight: normal; color: #3b4252; background-color: #e3e7ef; text-shadow: none; } row .view, row iconview { background-color: transparent; } columnview > listview > row { padding: 0; } columnview > listview > row > cell { padding: 0px 6px; } columnview > listview > row > cell:not(:first-child) { border-left: 1px solid transparent; } columnview.column-separators > listview > row > cell { border-left-color: #c5cedd; } columnview.data-table > listview > row > cell { padding-top: 2px; padding-bottom: 2px; } treeexpander { border-spacing: 4px; } /******************************************************** * Data Tables * * treeview like tables with individual focusable cells * * https://gitlab.gnome.org/GNOME/gtk/-/issues/2929 * ********************************************************/ columnview row:not(:selected) cell editablelabel:not(.editing):focus-within { outline: 2px solid #c5cedd; } columnview row:not(:selected) cell editablelabel.editing:focus-within { outline: 2px solid #81a1c1; } columnview row:not(:selected) cell editablelabel.editing text selection { background-color: rgba(129, 161, 193, 0.6); color: transparent; } columnview row:not(:selected) cell editablelabel.editing text selection:focus-within { background-color: #81a1c1; color: #3b4252; } /******************************************************* * Rich Lists * * Large list usually containing lots of widgets * * https://gitlab.gnome.org/GNOME/gtk/-/issues/3073 * *******************************************************/ .rich-list { /* rich lists usually containing other widgets than just labels/text */ } .rich-list > row { padding: 8px 12px; min-height: 32px; /* should be tall even when only containing a label */ } .rich-list > row > box { border-spacing: 12px; } /******************************************************** * Complex Lists * * Put padding on the cell content so event controllers * * can cover the whole area. * ********************************************************/ columnview.complex > listview > row > cell { padding: 0; } columnview.complex > listview > row > cell > * { padding: 8px 6px; } columnview.complex.data-table > listview > row > cell { padding: 0; } columnview.complex.data-table > listview > row > cell > * { padding-top: 2px; padding-bottom: 2px; } .boxed-list-separate, .boxed-list-separate:backdrop { background-color: transparent; } /********* * Menus * *********/ menubar, .menubar { background-color: #2b313c; color: #d8dee9; padding: 0px; box-shadow: inset 0 -1px rgba(0, 0, 0, 0.1); } menubar > item, .menubar > item { min-height: 16px; padding: 4px 8px; } menubar > item:hover, .menubar > item:hover { box-shadow: inset 0 -3px #81a1c1; } menubar > item:disabled, .menubar > item:disabled { color: #8a909e; box-shadow: none; } menu, .menu, .context-menu { padding: 2px 0px; background: #e5e9f0; border: none; border-radius: 5px; font: initial; } .csd menu, .csd .menu, .csd .context-menu { border: none; } menu:backdrop, .menu:backdrop, .context-menu:backdrop { background-color: #e2e6ee; } menu menuitem, .menu menuitem, .context-menu menuitem { min-height: 17px; min-width: 40px; padding: 4px 6px; text-shadow: none; } menu menuitem:hover, .menu menuitem:hover, .context-menu menuitem:hover { color: #fefefe; background-color: #81a1c1; } menu menuitem:disabled, .menu menuitem:disabled, .context-menu menuitem:disabled { color: #8a909e; } menu menuitem:disabled:backdrop, .menu menuitem:disabled:backdrop, .context-menu menuitem:disabled:backdrop { color: #a7b5cd; } menu menuitem:backdrop, menu menuitem:backdrop:hover, .menu menuitem:backdrop, .menu menuitem:backdrop:hover, .context-menu menuitem:backdrop, .context-menu menuitem:backdrop:hover { color: #8a909e; background-color: transparent; } menu menuitem arrow, .menu menuitem arrow, .context-menu menuitem arrow { min-height: 16px; min-width: 16px; } menu menuitem arrow:dir(ltr), .menu menuitem arrow:dir(ltr), .context-menu menuitem arrow:dir(ltr) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); margin-left: 10px; } menu menuitem arrow:dir(rtl), .menu menuitem arrow:dir(rtl), .context-menu menuitem arrow:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); margin-right: 10px; } menu menuitem label:dir(rtl), menu menuitem label:dir(ltr), .menu menuitem label:dir(rtl), .menu menuitem label:dir(ltr), .context-menu menuitem label:dir(rtl), .context-menu menuitem label:dir(ltr) { color: inherit; } menu > arrow, .menu > arrow, .context-menu > arrow { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; min-height: 16px; min-width: 16px; padding: 4px; background-color: #e5e9f0; border-radius: 0; } menu > arrow.top, .menu > arrow.top, .context-menu > arrow.top { margin-top: -6px; border-bottom: 1px solid #d4d8e0; -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } menu > arrow.bottom, .menu > arrow.bottom, .context-menu > arrow.bottom { margin-bottom: -6px; border-top: 1px solid #d4d8e0; -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } menu > arrow:hover, .menu > arrow:hover, .context-menu > arrow:hover { background-color: #d4d8e0; } menu > arrow:backdrop, .menu > arrow:backdrop, .context-menu > arrow:backdrop { background-color: #e2e6ee; } menu > arrow:disabled, .menu > arrow:disabled, .context-menu > arrow:disabled { color: transparent; background-color: transparent; border-color: transparent; } menuitem accelerator { color: alpha(currentColor,0.55); } menuitem check, menuitem radio { min-height: 16px; min-width: 16px; } menuitem check:dir(ltr), menuitem radio:dir(ltr) { margin-right: 7px; } menuitem check:dir(rtl), menuitem radio:dir(rtl) { margin-left: 7px; } .csd.popup { background-color: transparent; } /******** * Misc * ********/ .content-view { background-color: #c1cbdc; } .content-view:hover { -gtk-icon-filter: brightness(1.2); } .content-view:backdrop { background-color: #c1cbdc; } .osd .scale-popup button.flat { border-style: none; border-radius: 5px; } .scale-popup button:hover { background-color: rgba(59, 66, 82, 0.1); border-radius: 5px; } /************ * Assistant * *************/ assistant { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } assistant .sidebar { background-color: #e5e9f0; border-top: 1px solid #c5cedd; border-bottom-left-radius: 4px; } assistant .sidebar:backdrop { background-color: #e2e6ee; border-color: #c7d0de; } assistant.csd .sidebar { border-top-style: none; } assistant .sidebar GtkLabel, assistant .sidebar label { padding: 6px 12px; } assistant .sidebar GtkLabel.highlight, assistant .sidebar label.highlight { background-color: #b9bfcb; } /************* * Notebooks * *************/ notebook > header { padding: 1px; border-color: #c5cedd; border-width: 1px; background-color: #d5dbe7; } notebook > header:backdrop { border-color: #c7d0de; background-color: #d8dee9; } notebook > header tabs { margin: 0px; } notebook > header.top { border-bottom-style: solid; } notebook > header.top > tabs { margin-bottom: -2px; } notebook > header.top > tabs > tab:backdrop { box-shadow: none; } notebook > header.top > tabs > tab:checked { background-color: #e5e9f0; } notebook > header.top > tabs > tab:checked:hover { background-color: #e5e9f0; } notebook > header.bottom { border-top-style: solid; } notebook > header.bottom > tabs { margin-top: -2px; } notebook > header.bottom > tabs > tab:backdrop { box-shadow: none; } notebook > header.bottom > tabs > tab:checked { background-color: #e5e9f0; box-shadow: -1px 0 0 #c5cedd, 0px 1px 0 #c5cedd, 1px 0 0 #c5cedd; } notebook > header.left { border-right-style: solid; } notebook > header.left > tabs { margin-right: -2px; } notebook > header.left > tabs > tab:backdrop { box-shadow: none; } notebook > header.left > tabs > tab:checked { background-color: #e5e9f0; box-shadow: 0px 1px 0 #c5cedd, 0px -1px 0 #c5cedd, 0px 1px 0 #c5cedd; } notebook > header.right { border-left-style: solid; } notebook > header.right > tabs { margin-left: -2px; } notebook > header.right > tabs > tab:backdrop { box-shadow: none; } notebook > header.right > tabs > tab:checked { background-color: #e5e9f0; box-shadow: 0px 1px 0 #c5cedd, 0px -1px 0 #c5cedd, 1px 0 0 #c5cedd; } notebook > header.top > tabs > arrow { border-top-style: none; } notebook > header.bottom > tabs > arrow { border-bottom-style: none; } notebook > header.top > tabs > arrow, notebook > header.bottom > tabs > arrow { margin-left: -5px; margin-right: -5px; padding-left: 4px; padding-right: 4px; } notebook > header.top > tabs > arrow.down, notebook > header.bottom > tabs > arrow.down { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } notebook > header.top > tabs > arrow.up, notebook > header.bottom > tabs > arrow.up { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } notebook > header.left > tabs > arrow { border-left-style: none; } notebook > header.right > tabs > arrow { border-right-style: none; } notebook > header.left > tabs > arrow, notebook > header.right > tabs > arrow { margin-top: -5px; margin-bottom: -5px; padding-top: 4px; padding-bottom: 4px; } notebook > header.left > tabs > arrow.down, notebook > header.right > tabs > arrow.down { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow.up { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } notebook > header > tabs > arrow { min-height: 14px; min-width: 14px; border-radius: 0; } notebook > header > tabs > arrow:hover:not(:active):not(:backdrop) { background-clip: padding-box; background-image: none; background-color: rgba(255, 255, 255, 0.3); border-color: transparent; box-shadow: none; } notebook > header > tabs > arrow:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } notebook > header tab { min-height: 24px; min-width: 24px; padding: 1px 12px; outline-offset: -5px; color: #8a909e; font-weight: normal; border-width: 1px; border-color: transparent; } notebook > header tab:hover { color: #636978; } notebook > header tab:hover.reorderable-page { border-color: rgba(197, 206, 221, 0.3); background-color: rgba(216, 222, 233, 0.2); } notebook > header tab:backdrop { color: #a9afbc; } notebook > header tab:backdrop.reorderable-page { border-color: transparent; background-color: transparent; } notebook > header tab:checked { color: #3b4252; box-shadow: -1px 0 0 #c5cedd, 0px -1px 0 #c5cedd, 1px 0 0 #c5cedd; } notebook > header tab:checked.reorderable-page { border-color: rgba(197, 206, 221, 0.5); background-color: rgba(216, 222, 233, 0.5); } notebook > header tab:checked.reorderable-page:hover { background-color: rgba(216, 222, 233, 0.7); } notebook > header tab:backdrop:checked { color: #8a909e; } notebook > header tab:backdrop:checked.reorderable-page { border-color: #c7d0de; background-color: #e2e6ee; } notebook > header tab button.flat { padding: 0; margin-top: 4px; margin-bottom: 4px; min-width: 20px; min-height: 20px; } notebook > header tab button.flat:hover { background: transparent; box-shadow: none; color: #bf616a; } notebook > header tab button.flat, notebook > header tab button.flat:backdrop { background: transparent; border: none; color: alpha(currentColor,0.3); } notebook > header tab button.flat:last-child { margin-left: 4px; margin-right: -4px; } notebook > header tab button.flat:first-child { margin-left: -4px; margin-right: 4px; } notebook > header.top tabs, notebook > header.bottom tabs { padding-left: 0px; padding-right: 0px; } notebook > header.top tabs:not(:only-child), notebook > header.bottom tabs:not(:only-child) { margin-left: 0.5px; margin-right: 0.5px; } notebook > header.top tabs:not(:only-child):first-child, notebook > header.bottom tabs:not(:only-child):first-child { margin-left: -1px; } notebook > header.top tabs:not(:only-child):last-child, notebook > header.bottom tabs:not(:only-child):last-child { margin-right: -1px; } notebook > header.top tabs tab, notebook > header.bottom tabs tab { margin-left: 0.5px; margin-right: 0.5px; } notebook > header.top tabs tab.reorderable-page, notebook > header.bottom tabs tab.reorderable-page { border-style: none solid; } notebook > header.left tabs, notebook > header.right tabs { padding-top: 4px; padding-bottom: 4px; } notebook > header.left tabs:not(:only-child), notebook > header.right tabs:not(:only-child) { margin-top: 3px; margin-bottom: 3px; } notebook > header.left tabs:not(:only-child):first-child, notebook > header.right tabs:not(:only-child):first-child { margin-top: -1px; } notebook > header.left tabs:not(:only-child):last-child, notebook > header.right tabs:not(:only-child):last-child { margin-bottom: -1px; } notebook > header.left tabs tab, notebook > header.right tabs tab { margin-top: 4px; margin-bottom: 4px; } notebook > header.left tabs tab.reorderable-page, notebook > header.right tabs tab.reorderable-page { border-style: solid none; } notebook > header.top tab { padding-bottom: 1px; } notebook > header.bottom tab { padding-top: 1px; } notebook > stack:not(:only-child) { background-color: #e5e9f0; } notebook > stack:not(:only-child):backdrop { background-color: #e2e6ee; } tabbar:backdrop .box > scrolledwindow, tabbar:backdrop .box > .start-action, tabbar:backdrop .box > .end-action { filter: opacity(1); } tabbar tabbox { background-color: #d5dbe7; padding: 0px; color: #5b667e; } tabbar tabbox > tabboxchild { margin: 0 -3px; border-radius: 0; } tabbar tabbox > tab, tabbar tabbox > tabboxchild > tab { border-radius: 0; } tabbar tabbox > tab button.flat, tabbar tabbox > tabboxchild > tab button.flat { padding: 0; margin: 4px; min-width: 20px; min-height: 20px; border-radius: 10px; } tabbar tabbox > tab button.flat:hover, tabbar tabbox > tabboxchild > tab button.flat:hover { color: #fefefe; } tabbar tabbox > tab:checked, tabbar tabbox > tab:selected, tabbar tabbox > tabboxchild > tab:checked, tabbar tabbox > tabboxchild > tab:selected { background-color: #e5e9f0; color: #1b1e26; } /********* * Paned * *********/ paned > separator { min-width: 1px; min-height: 1px; -gtk-icon-source: none; border-style: none; background-color: transparent; background-image: image(#c5cedd); background-size: 1px 1px; } paned > separator:selected { background-image: image(#81a1c1); } paned > separator:backdrop { background-image: image(#c7d0de); } paned > separator.wide { min-width: 5px; min-height: 5px; background-color: #d8dee9; background-image: image(#c5cedd), image(#c5cedd); background-size: 1px 1px, 1px 1px; } paned > separator.wide:backdrop { background-color: #d8dee9; background-image: image(#c7d0de), image(#c7d0de); } paned.horizontal > separator { background-repeat: repeat-y; } paned.horizontal > separator:dir(ltr) { margin: 0 -8px 0 0; padding: 0 8px 0 0; background-position: left; } paned.horizontal > separator:dir(rtl) { margin: 0 0 0 -8px; padding: 0 0 0 8px; background-position: right; } paned.horizontal > separator.wide { margin: 0; padding: 0; background-repeat: repeat-y, repeat-y; background-position: left, right; } paned.vertical > separator { margin: 0 0 -8px 0; padding: 0 0 8px 0; background-repeat: repeat-x; background-position: top; } paned.vertical > separator.wide { margin: 0; padding: 0; background-repeat: repeat-x, repeat-x; background-position: bottom, top; } /************ * Pathbars * ************/ .path-bar button.text-button, .path-bar button.image-button, .path-bar button { padding-left: 4px; padding-right: 4px; } .path-bar button.text-button.image-button label { padding-left: 0; padding-right: 0; } .path-bar button.text-button.image-button label:last-child, .path-bar button label:last-child { padding-right: 8px; } .path-bar button.text-button.image-button label:first-child, .path-bar button label:first-child { padding-left: 8px; } .path-bar button image { padding-left: 4px; padding-right: 4px; } .path-bar button.slider-button { padding-left: 0; padding-right: 0; } #NautilusPathBar, .pathbar { color: #d8dee9; border-radius: 6px; text-shadow: none; box-shadow: none; border: 1px solid #1f232b; background-color: #343b48; } #NautilusPathBar .dim-label, #NautilusPathBar label.separator, #NautilusPathBar .titlebar .subtitle, .titlebar #NautilusPathBar .subtitle, #NautilusPathBar headerbar .subtitle, headerbar #NautilusPathBar .subtitle, .pathbar .dim-label, .pathbar label.separator, .pathbar .titlebar .subtitle, .titlebar .pathbar .subtitle, .pathbar headerbar .subtitle, headerbar .pathbar .subtitle { color: transparent; margin-right: -5px; } #NautilusPathBar button .horizontal > .dim-label, #NautilusPathBar button .horizontal > label.separator, #NautilusPathBar button .titlebar .horizontal > .subtitle, .titlebar #NautilusPathBar button .horizontal > .subtitle, #NautilusPathBar button headerbar .horizontal > .subtitle, headerbar #NautilusPathBar button .horizontal > .subtitle, .pathbar button .horizontal > .dim-label, .pathbar button .horizontal > label.separator, .pathbar button .titlebar .horizontal > .subtitle, .titlebar .pathbar button .horizontal > .subtitle, .pathbar button headerbar .horizontal > .subtitle, headerbar .pathbar button .horizontal > .subtitle { color: #d8dee9; padding: 5.5px 12px; margin: 0; border-right: 1px solid #1f232b; } #NautilusPathBar button:hover .dim-label, #NautilusPathBar button:hover label.separator, #NautilusPathBar button:hover .titlebar .subtitle, .titlebar #NautilusPathBar button:hover .subtitle, #NautilusPathBar button:hover headerbar .subtitle, headerbar #NautilusPathBar button:hover .subtitle, #NautilusPathBar button:focus .dim-label, #NautilusPathBar button:focus label.separator, #NautilusPathBar button:focus .titlebar .subtitle, .titlebar #NautilusPathBar button:focus .subtitle, #NautilusPathBar button:focus headerbar .subtitle, headerbar #NautilusPathBar button:focus .subtitle, .pathbar button:hover .dim-label, .pathbar button:hover label.separator, .pathbar button:hover .titlebar .subtitle, .titlebar .pathbar button:hover .subtitle, .pathbar button:hover headerbar .subtitle, headerbar .pathbar button:hover .subtitle, .pathbar button:focus .dim-label, .pathbar button:focus label.separator, .pathbar button:focus .titlebar .subtitle, .titlebar .pathbar button:focus .subtitle, .pathbar button:focus headerbar .subtitle, headerbar .pathbar button:focus .subtitle { color: #fff; text-shadow: none; background-color: rgba(129, 161, 193, 0.8); border-color: #1f232b; } #NautilusPathBar button > .horizontal > image.dim-label, #NautilusPathBar .titlebar button > .horizontal > image.subtitle, .titlebar #NautilusPathBar button > .horizontal > image.subtitle, #NautilusPathBar headerbar button > .horizontal > image.subtitle, headerbar #NautilusPathBar button > .horizontal > image.subtitle, .pathbar button > .horizontal > image.dim-label, .pathbar .titlebar button > .horizontal > image.subtitle, .titlebar .pathbar button > .horizontal > image.subtitle, .pathbar headerbar button > .horizontal > image.subtitle, headerbar .pathbar button > .horizontal > image.subtitle { padding: 3px 0px 3px 12px; border-right: none; margin-right: -6px; border-radius: 6px 0px 0px 6px; } #NautilusPathBar button, .pathbar button { background: transparent; border: none; margin: 0; padding: 0; } #NautilusPathBar .flat.popup, .pathbar .flat.popup { margin: 0; } #NautilusPathBar .flat.popup button, .pathbar .flat.popup button { padding: 4px 6px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; } #NautilusPathBar .flat.popup button:hover, #NautilusPathBar .flat.popup button:active, #NautilusPathBar .flat.popup button:checked, .pathbar .flat.popup button:hover, .pathbar .flat.popup button:active, .pathbar .flat.popup button:checked { color: #3b4252; outline-color: rgba(59, 66, 82, 0.3); background-color: #81a1c1; text-shadow: none; } #NautilusPathBar .current-dir label, .pathbar .current-dir label { padding: 5.5px 12px; } #NautilusPathBar .current-dir label, #NautilusPathBar .current-dir image, .pathbar .current-dir label, .pathbar .current-dir image { color: #fff; outline-color: rgba(255, 255, 255, 0.3); background-color: rgba(129, 161, 193, 0.7); text-shadow: none; } #NautilusPathBar button.current-dir:only-child image, .pathbar button.current-dir:only-child image { margin-right: -6px; padding: 0px 0px 0px 12px; border-radius: 6px 0px 0px 6px; } #NautilusQueryEditor { background: #2f3642; color: #d8dee9; caret-color: #d8dee9; border-color: #1f232b; } #NautilusQueryEditor:focus-within { border-color: #81a1c1; box-shadow: 0px 0px 1px 1px #81a1c1 inset; } #NautilusQueryEditor #NautilusQueryEditorTag > button { margin: 0; } #NautilusQueryEditor > text { background-color: transparent; } #NautilusQueryEditor image { color: #d8dee9; } #NautilusQueryEditor > menubutton > button { margin-right: -7px; -gtk-icon-size: 12px; border: none; background-color: transparent; } #NautilusQueryEditor > menubutton > button:hover image, #NautilusQueryEditor > menubutton > button:active image, #NautilusQueryEditor > menubutton > button:focus image, #NautilusQueryEditor > menubutton > button:checked image { color: #fefefe; } #NautilusQueryEditor > text, #NautilusQueryEditor > image { margin: 0; } /*************** * Popovers * ***************/ popover.background { background-color: transparent; font: initial; } popover.background > arrow, popover.background > contents { background-color: #e5e9f0; background-clip: padding-box; border: 1px solid #c5cedd; box-shadow: 0 4px 6px rgba(112, 112, 112, 0.4); color: #3b4252; } popover.background:backdrop { background-color: transparent; box-shadow: none; } popover.background > contents { padding: 8px; border-radius: 5px; } popover.background > contents > list, popover.background > contents > .view, popover.background > contents > iconview, popover.background > contents > toolbar { border-style: none; background-color: transparent; } popover.background > contents separator { background-color: #cbd3e1; margin: 3px; } popover.background > contents list separator { margin: 0; } .osd popover.background, popover.background.touch-selection, popover.background.magnifier { background-color: transparent; } .osd popover.background > arrow, .osd popover.background > contents, popover.background.touch-selection > arrow, popover.background.touch-selection > contents, popover.background.magnifier > arrow, popover.background.magnifier > contents { border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: none; } magnifier { background-color: #e5e9f0; } /********************** * Popover Base Menus * **********************/ popover.menu { padding: 0; } popover.menu box.inline-buttons { padding: 0 12px; } popover.menu box.inline-buttons button.image-button.model { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; min-height: 30px; min-width: 30px; padding: 0; border: none; outline: none; transition: none; } popover.menu box.inline-buttons button.image-button.model:selected { background: image(#d1d8e5); } popover.menu box.circular-buttons { padding: 12px 12px 6px; } popover.menu box.circular-buttons button.circular.image-button.model { padding: 11px; } popover.menu box.circular-buttons button.circular.image-button.model:focus { background-color: #d1d8e5; border-color: #d1d8e5; } popover.menu > arrow, popover.menu.background > contents { background-color: #e5e9f0; color: #3b4252; padding: 5px; } popover.menu > arrow .view, popover.menu > arrow iconview, popover.menu.background > contents .view, popover.menu.background > contents iconview { background-color: transparent; } popover.menu > arrow .view row, popover.menu > arrow iconview row, popover.menu.background > contents .view row, popover.menu.background > contents iconview row { margin: 0; } popover.menu.background separator { margin: 6px 0; } popover.menu accelerator { color: alpha(currentColor,0.55); } popover.menu accelerator:dir(ltr) { margin-left: 12px; } popover.menu accelerator:dir(rtl) { margin-right: 12px; } popover.menu check:hover, popover.menu check:active, popover.menu radio:hover, popover.menu radio:active { background-color: transparent; } popover.menu radio { border-color: #c5cedd; } popover.menu radio:active { border-color: rgba(197, 206, 221, 0.5); } popover.menu arrow.left, popover.menu radio.left, popover.menu check.left { margin-left: -2px; margin-right: 6px; } popover.menu arrow.right, popover.menu radio.right, popover.menu check.right { margin-left: 6px; margin-right: -2px; } popover.menu modelbutton, popover.menu.background > contents .view row, popover.menu.background > contents iconview row { min-height: 30px; min-width: 40px; padding: 0 12px; border-radius: 5px; } popover.menu modelbutton:selected, popover.menu.background > contents .view row:selected, popover.menu.background > contents iconview row:selected { background-color: #d1d8e5; } popover.menu modelbutton:selected, popover.menu modelbutton:selected label, popover.menu.background > contents .view row:selected, popover.menu.background > contents iconview row:selected, popover.menu.background > contents .view row:selected label, popover.menu.background > contents iconview row:selected label { color: #3b4252; } popover.menu modelbutton:selected:active, popover.menu.background > contents .view row:selected:active, popover.menu.background > contents iconview row:selected:active { background-color: #b1bdd3; } popover.menu label.title { font-weight: bold; padding: 4px 32px; } /***************** * Progress bars * *****************/ progressbar { font-size: smaller; color: rgba(59, 66, 82, 0.4); } progressbar.horizontal trough, progressbar.horizontal progress { min-height: 6px; } progressbar.vertical trough, progressbar.vertical progress { min-width: 6px; } progressbar.horizontal progress { margin: 0; } progressbar.vertical progress { margin: 0; } progressbar:backdrop { box-shadow: none; transition: 200ms ease-out; } progressbar.osd { min-width: 3px; min-height: 3px; background-color: transparent; } progressbar.osd trough { border-style: none; border-radius: 0; background-color: transparent; box-shadow: none; } progressbar.osd progress { border-style: none; border-radius: 0; } /************ * GtkScale * ************/ progressbar trough, scale trough, scale fill { background-color: rgba(0, 0, 0, 0.14); border: none; border-radius: 3px; margin: 0; } progressbar trough:disabled, scale trough:disabled, scale fill:disabled { background-color: rgba(0, 0, 0, 0.06); } progressbar trough:backdrop, progressbar:backdrop trough, scale trough:backdrop, scale fill:backdrop { background-color: rgba(0, 0, 0, 0.06); transition: 200ms ease-out; } progressbar trough:backdrop:disabled, progressbar:backdrop trough:disabled, scale trough:backdrop:disabled, scale fill:backdrop:disabled { background-color: rgba(0, 0, 0, 0.06); } progressbar progress, scale highlight { border: none; background-color: #81a1c1; border-radius: 3px; margin: 0; } progressbar progress:disabled, scale highlight:disabled { border: none; background-color: rgba(0, 0, 0, 0.14); } progressbar progress:backdrop, progressbar:backdrop progress, scale highlight:backdrop, progressbar progress:active:backdrop, progressbar:backdrop progress:active, scale highlight:active:backdrop { border-color: #92aec9; background-color: #92aec9; } progressbar progress:backdrop:disabled, progressbar:backdrop progress:disabled, scale highlight:backdrop:disabled, progressbar progress:active:backdrop:disabled, progressbar:backdrop progress:active:disabled, scale highlight:active:backdrop:disabled { background-color: rgba(0, 0, 0, 0.06); } scale { min-height: 16px; min-width: 16px; padding: 8px; } scale.horizontal trough, scale.horizontal progress { min-height: 6px; } scale.vertical trough, scale.vertical progress { min-width: 6px; } scale slider { min-height: 16px; min-width: 16px; margin: -7px; background-color: #e5e9f0; box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0px 0px 1px 1px rgba(0, 0, 0, 0.1); border-radius: 12px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-property: background, border, box-shadow; } scale slider:active { background-color: #81a1c1; } scale slider:active:disabled { background-color: #dde2ec; box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0px 0px 1px 1px rgba(0, 0, 0, 0.05); } scale.fine-tune.horizontal { padding-top: 9px; padding-bottom: 9px; min-height: 16px; } scale.fine-tune.vertical { padding-left: 9px; padding-right: 9px; min-width: 16px; } scale.fine-tune slider { margin: -6px; } scale.fine-tune fill, scale.fine-tune highlight, scale.fine-tune trough { border-radius: 5px; } scale trough { outline-offset: 2px; outline-color: transparent; } scale fill:backdrop, scale fill { background-color: #c5cedd; } scale fill:disabled:backdrop, scale fill:disabled { border-color: transparent; background-color: transparent; } .osd scale fill { background-color: #4d525b; } .osd scale fill:disabled:backdrop, .osd scale fill:disabled { border-color: transparent; background-color: transparent; } scale slider { border-color: #fff; border: none; border-radius: 12px; background-color: #fff; } scale slider:active { border-color: #5f88b0; } scale slider:disabled { background-color: #ededed; box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0px 0px 1px 1px rgba(0, 0, 0, 0.1); } scale slider:backdrop, scale slider:backdrop:disabled { transition: 200ms ease-out; background-color: #ededed; box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0px 0px 1px 1px rgba(0, 0, 0, 0.1); } row:selected scale slider:disabled, row:selected scale slider { border-color: #5f88b0; } scale value { color: alpha(currentColor,0.4); } scale.horizontal > marks { color: alpha(currentColor,0.55); } scale.horizontal > marks.top { margin-bottom: 6px; } scale.horizontal > marks.bottom { margin-top: 6px; } scale.horizontal > marks indicator { background-color: currentColor; min-height: 6px; min-width: 1px; } scale.horizontal > value.left { margin-right: 9px; } scale.horizontal > value.right { margin-left: 9px; } scale.horizontal.fine-tune > marks.top { margin-top: 3px; } scale.horizontal.fine-tune > marks.bottom { margin-bottom: 3px; } scale.horizontal.fine-tune > marks indicator { min-height: 3px; } scale.vertical > marks { color: alpha(currentColor,0.55); } scale.vertical > marks.top { margin-right: 6px; } scale.vertical > marks.bottom { margin-left: 6px; } scale.vertical > marks indicator { background-color: currentColor; min-height: 1px; min-width: 6px; } scale.vertical > value.top { margin-bottom: 9px; } scale.vertical > value.bottom { margin-top: 9px; } scale.vertical.fine-tune > marks.top { margin-left: 3px; } scale.vertical.fine-tune > marks.bottom { margin-right: 3px; } scale.vertical.fine-tune > marks indicator { min-height: 3px; } scale.horizontal indicator { min-height: 6px; min-width: 1px; } scale.horizontal.fine-tune indicator { min-height: 3px; } scale.vertical indicator { min-height: 1px; min-width: 6px; } scale.vertical.fine-tune indicator { min-width: 3px; } scale.horizontal.marks-before:not(.marks-after) slider { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.horizontal.marks-before:not(.marks-after) slider:hover { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.horizontal.marks-before:not(.marks-after) slider:active { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.horizontal.marks-before:not(.marks-after) slider:disabled { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.horizontal.marks-before:not(.marks-after) slider:backdrop { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.horizontal.marks-before:not(.marks-after) slider:backdrop:disabled { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.horizontal.marks-after:not(.marks-before) slider { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.horizontal.marks-after:not(.marks-before) slider:hover { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.horizontal.marks-after:not(.marks-before) slider:active { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.horizontal.marks-after:not(.marks-before) slider:disabled { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.horizontal.marks-after:not(.marks-before) slider:backdrop { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.horizontal.marks-after:not(.marks-before) slider:backdrop:disabled { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.vertical.marks-before:not(.marks-after) slider { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.vertical.marks-before:not(.marks-after) slider:hover { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.vertical.marks-before:not(.marks-after) slider:active { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.vertical.marks-before:not(.marks-after) slider:disabled { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.vertical.marks-before:not(.marks-after) slider:backdrop { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.vertical.marks-before:not(.marks-after) slider:backdrop:disabled { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; } scale.vertical.marks-after:not(.marks-before) slider { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.vertical.marks-after:not(.marks-before) slider:hover { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.vertical.marks-after:not(.marks-before) slider:active { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.vertical.marks-after:not(.marks-before) slider:disabled { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.vertical.marks-after:not(.marks-before) slider:backdrop { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.vertical.marks-after:not(.marks-before) slider:backdrop:disabled { min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: #fff; box-shadow: inset 0 1px #b7c2d7, 0px 0px 1px 1px #b7c2d7; } scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; } scale.color { min-height: 0; min-width: 0; } scale.color trough { background-image: image(#c5cedd); background-repeat: no-repeat; } scale.color.horizontal { padding: 0 0 15px 0; } scale.color.horizontal trough { padding-bottom: 4px; background-position: 0 -3px; border-top-left-radius: 0; border-top-right-radius: 0; } scale.color.horizontal slider:dir(ltr):hover, scale.color.horizontal slider:dir(ltr):backdrop, scale.color.horizontal slider:dir(ltr):disabled, scale.color.horizontal slider:dir(ltr):backdrop:disabled, scale.color.horizontal slider:dir(ltr), scale.color.horizontal slider:dir(rtl):hover, scale.color.horizontal slider:dir(rtl):backdrop, scale.color.horizontal slider:dir(rtl):disabled, scale.color.horizontal slider:dir(rtl):backdrop:disabled, scale.color.horizontal slider:dir(rtl) { margin-bottom: -15px; margin-top: 6px; } scale.color.vertical:dir(ltr) { padding: 0 0 0 15px; } scale.color.vertical:dir(ltr) trough { padding-left: 4px; background-position: 3px 0; border-bottom-right-radius: 0; border-top-right-radius: 0; } scale.color.vertical:dir(ltr) slider:hover, scale.color.vertical:dir(ltr) slider:backdrop, scale.color.vertical:dir(ltr) slider:disabled, scale.color.vertical:dir(ltr) slider:backdrop:disabled, scale.color.vertical:dir(ltr) slider { margin-left: -15px; margin-right: 6px; } scale.color.vertical:dir(rtl) { padding: 0 15px 0 0; } scale.color.vertical:dir(rtl) trough { padding-right: 4px; background-position: -3px 0; border-bottom-left-radius: 0; border-top-left-radius: 0; } scale.color.vertical:dir(rtl) slider:hover, scale.color.vertical:dir(rtl) slider:backdrop, scale.color.vertical:dir(rtl) slider:disabled, scale.color.vertical:dir(rtl) slider:backdrop:disabled, scale.color.vertical:dir(rtl) slider { margin-right: -15px; margin-left: 6px; } scale.color.fine-tune.horizontal:dir(ltr), scale.color.fine-tune.horizontal:dir(rtl) { padding: 0 0 12px 0; } scale.color.fine-tune.horizontal:dir(ltr) trough, scale.color.fine-tune.horizontal:dir(rtl) trough { padding-bottom: 7px; background-position: 0 -6px; } scale.color.fine-tune.horizontal:dir(ltr) slider, scale.color.fine-tune.horizontal:dir(rtl) slider { margin-bottom: -15px; margin-top: 6px; } scale.color.fine-tune.vertical:dir(ltr) { padding: 0 0 0 12px; } scale.color.fine-tune.vertical:dir(ltr) trough { padding-left: 7px; background-position: 6px 0; } scale.color.fine-tune.vertical:dir(ltr) slider { margin-left: -15px; margin-right: 6px; } scale.color.fine-tune.vertical:dir(rtl) { padding: 0 12px 0 0; } scale.color.fine-tune.vertical:dir(rtl) trough { padding-right: 7px; background-position: -6px 0; } scale.color.fine-tune.vertical:dir(rtl) slider { margin-right: -15px; margin-left: 6px; } /************** * Scrollbars * **************/ scrollbar { background-color: #dfe4ed; transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } scrollbar.top { border-bottom: 1px solid #c5cedd; } scrollbar.bottom { border-top: 1px solid #c5cedd; } scrollbar.left { border-right: 1px solid #c5cedd; } scrollbar.right { border-left: 1px solid #c5cedd; } scrollbar:backdrop { background-color: #ced6e3; border-color: #c7d0de; transition: 200ms ease-out; } scrollbar slider { min-width: 6px; min-height: 6px; margin: -1px; border: 4px solid transparent; border-radius: 8px; background-clip: padding-box; background-color: #7a808e; } scrollbar slider:hover { background-color: #5a6170; } scrollbar slider:hover:active { background-color: #5f88b0; } scrollbar slider:backdrop { background-color: #b9bfcb; } scrollbar slider:disabled { background-color: transparent; } scrollbar.fine-tune slider { min-width: 4px; min-height: 4px; } scrollbar.fine-tune.horizontal slider { border-width: 5px 4px; } scrollbar.fine-tune.vertical slider { border-width: 4px 5px; } scrollbar.overlay-indicator:not(.dragging):not(.hovering) { border-color: transparent; opacity: 0.4; background-color: transparent; } scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider { margin: 0; min-width: 3px; min-height: 3px; background-color: #3b4252; border: 1px solid white; } scrollbar.overlay-indicator:not(.dragging):not(.hovering) button { min-width: 5px; min-height: 5px; background-color: #3b4252; background-clip: padding-box; border-radius: 100%; border: 1px solid white; -gtk-icon-source: none; } scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider { margin: 0 2px; min-width: 40px; } scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal button { margin: 1px 2px; min-width: 5px; } scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider { margin: 2px 0; min-height: 40px; } scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical button { margin: 2px 1px; min-height: 5px; } scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering { opacity: 0.8; } scrollbar.horizontal slider { min-width: 40px; } scrollbar.vertical slider { min-height: 40px; } scrollbar button { padding: 0; min-width: 12px; min-height: 12px; border-style: none; border-radius: 0; transition-property: min-height, min-width, color; border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #7a808e; } scrollbar button:hover { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #5a6170; } scrollbar button:active, scrollbar button:checked { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #5f88b0; } scrollbar button:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: rgba(122, 128, 142, 0.2); } scrollbar button:backdrop { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #b9bfcb; } scrollbar button:backdrop:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: rgba(185, 191, 203, 0.2); } scrollbar.vertical button.down { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } scrollbar.vertical button.up { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } scrollbar.horizontal button.down { -gtk-icon-source: -gtk-icontheme("pan-right-symbolic"); } scrollbar.horizontal button.up { -gtk-icon-source: -gtk-icontheme("pan-left-symbolic"); } treeview ~ scrollbar.vertical { border-top: 1px solid #c5cedd; margin-top: -1px; } /*********** * Sidebar * ***********/ .sidebar { border-style: none; border-width: 0; background-color: #dfe4ed; } .sidebar .frame { border: none; } stacksidebar.sidebar:dir(ltr) list, stacksidebar.sidebar.left list, stacksidebar.sidebar.left:dir(rtl) list, .sidebar:dir(ltr), .sidebar.left, .sidebar.left:dir(rtl) { border-right: none; border-left-style: none; } stacksidebar.sidebar:dir(rtl) list .sidebar:dir(rtl), stacksidebar.sidebar.right list .sidebar:dir(rtl), .sidebar.right { border-left: 1px solid #c5cedd; border-right-style: none; } .sidebar:backdrop { background-color: #dde2ec; border-color: #c7d0de; } .sidebar row { padding: 8px 12px; transition: all .12s ease-in; } .sidebar row label { color: #3b4252; } .sidebar row:selected { color: #fefefe; } .sidebar row:selected:backdrop { color: #fefefe; background: rgba(129, 161, 193, 0.6); } .sidebar row:selected:backdrop label { color: #fefefe; } .sidebar row:selected label { color: #fefefe; } .sidebar.source-list { background: #282d37; color: #d8dee9; padding: 4px 0px; } .sidebar.source-list.view, iconview.sidebar.source-list { transition: all .12s ease-in; } .sidebar.source-list.view:selected, iconview.sidebar.source-list:selected { padding-left: 4px; background: #81a1c1; color: #fefefe; } .sidebar.source-list.view:selected:active, iconview.sidebar.source-list:selected:active { box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); } .sidebar.source-list.view:selected.has-open-popup, iconview.sidebar.source-list:selected.has-open-popup, .sidebar.source-list.view:selected:hover, iconview.sidebar.source-list:selected:hover { background-color: rgba(129, 161, 193, 0.9); } .sidebar.source-list.view:selected:backdrop, iconview.sidebar.source-list:selected:backdrop { background-color: rgba(129, 161, 193, 0.6); } .sidebar.source-list.view:hover, iconview.sidebar.source-list:hover, .sidebar.source-list.view iconview.source-list:hover, iconview.sidebar.source-list iconview.source-list:hover { background-color: rgba(40, 45, 55, 0.95); } paned .sidebar.left, paned .sidebar.right, paned .sidebar.left:dir(rtl), paned .sidebar:dir(rtl), paned .sidebar:dir(ltr), paned .sidebar { border-style: none; border-color: #c5cedd; } stacksidebar row { padding: 10px 4px; } stacksidebar row > label { padding-left: 6px; padding-right: 6px; } stacksidebar row.needs-attention > label { background-size: 6px 6px, 0 0; } /*******************************************************************/ /* PLACESSIDEBAR */ /*******************************************************************/ /*--*/ placessidebar { background-color: transparent; background-image: linear-gradient(to right, #232831 40px, #282d37 35px, #282d37 36px, #282d37 36px, #282d37 99%, #282d37 100%); } placessidebar row { padding: 1px 11px; } placessidebar row.sidebar-row { margin: 0; border-radius: 0; color: #d8dee9; } placessidebar row.sidebar-row label { color: #d8dee9; padding-left: 30px; } placessidebar row.sidebar-row:hover { transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); background-color: transparent; /*rgba(65,67,75,0.4); */ background-image: linear-gradient(to right, rgba(65, 67, 75, 0) 40px, rgba(0, 0, 0, 0.12) 40px, rgba(0, 0, 0, 0.12) 97%); } placessidebar row.sidebar-row:active:hover { background-color: rgba(0, 0, 0, 0.23); } placessidebar row.sidebar-row:selected { color: #fff; background-color: transparent; background-image: linear-gradient(to right, #81a1c1 40px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 97%); } placessidebar row.sidebar-row:selected label { color: #81a1c1; } placessidebar row.sidebar-row:selected:hover { color: #ffffff; background-color: rgba(0, 0, 0, 0.24); } placessidebar row.sidebar-row:selected:hover .sidebar-icon { color: #ffffff; } placessidebar row.sidebar-row:selected:backdrop { color: rgba(0, 0, 0, 0.54); background-color: transparent; background-image: linear-gradient(to right, #81a1c1 40px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 97%); } placessidebar row.sidebar-row:selected:backdrop .sidebar-icon { -gtk-icon-shadow: none; color: inherit; } placessidebar row.sidebar-row:selected .sidebar-icon { -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.8); color: inherit; } placessidebar row.sidebar-row.sidebar-new-bookmark-row, placessidebar row.sidebar-row.sidebar-new-bookmark-row label, placessidebar row.sidebar-row.sidebar-new-bookmark-row .sidebar-icon { color: #ebcb8b; } placessidebar row.sidebar-row:drop(active):not(:disabled) { box-shadow: inset 0 1px #a3be8c, inset 0 -1px #a3be8c; } placessidebar row.sidebar-row:drop(active):not(:disabled), placessidebar row.sidebar-row:drop(active):not(:disabled) label, placessidebar row.sidebar-row:drop(active):not(:disabled) image { color: #a3be8c; } placessidebar row.sidebar-row:drop(active):not(:disabled):selected { background: #a3be8c; } placessidebar row.sidebar-row:drop(active):not(:disabled):selected, placessidebar row.sidebar-row:drop(active):not(:disabled):selected label, placessidebar row.sidebar-row:drop(active):not(:disabled):selected image { color: #fefefe; } placessidebar list { background-color: transparent; } placessidebar list:backdrop { background-color: transparent; } .sidebar-pane, .sidebar-pane .bottom-bar { background-color: #282d37; } .sidebar-pane .bottom-bar button { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } .sidebar-pane .bottom-bar button label { color: #d8dee9; } .sidebar-pane .bottom-bar button .view, .sidebar-pane .bottom-bar button iconview { background-color: transparent; } /***************** * GtkSpinButton * *****************/ spinbutton { font-feature-settings: "tnum"; } spinbutton:not(.vertical) { padding: 0; border-spacing: 0; /* :not here just to bump specificity above that of the list button styling */ } spinbutton:not(.vertical) > text, .osd spinbutton:not(.vertical) > text { min-width: 28px; margin: 0; background: none; background-color: transparent; border: none; border-radius: 0; box-shadow: none; padding: 6px; } spinbutton:not(.vertical) > text:backdrop:disabled, .osd spinbutton:not(.vertical) > text:backdrop:disabled { background-color: transparent; } spinbutton:not(.vertical) > button.image-button.up:not(.flat), spinbutton:not(.vertical) > button.image-button.down:not(.flat) { min-height: 16px; margin: 0; padding-bottom: 0; padding-top: 0; color: #4c5362; background-image: none; border-style: none none none solid; border-color: rgba(197, 206, 221, 0.3); border-radius: 0; box-shadow: none; background-color: transparent; } spinbutton:not(.vertical) > button.image-button.up:not(.flat):dir(rtl), spinbutton:not(.vertical) > button.image-button.down:not(.flat):dir(rtl) { border-style: none solid none none; } spinbutton:not(.vertical) > button.image-button.up:not(.flat):hover, spinbutton:not(.vertical) > button.image-button.down:not(.flat):hover { color: #3b4252; background-color: #c8d0e0; } spinbutton:not(.vertical) > button.image-button.up:not(.flat):disabled, spinbutton:not(.vertical) > button.image-button.down:not(.flat):disabled { color: rgba(138, 144, 158, 0.3); background-color: transparent; } spinbutton:not(.vertical) > button.image-button.up:not(.flat):active, spinbutton:not(.vertical) > button.image-button.down:not(.flat):active { background-color: rgba(0, 0, 0, 0.1); box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2); } spinbutton:not(.vertical) > button.image-button.up:not(.flat):dir(ltr):last-child, spinbutton:not(.vertical) > button.image-button.down:not(.flat):dir(ltr):last-child { border-radius: 0 6px 6px 0; } spinbutton:not(.vertical) > button.image-button.up:not(.flat):dir(rtl):first-child, spinbutton:not(.vertical) > button.image-button.down:not(.flat):dir(rtl):first-child { border-radius: 6px 0 0 6px; } .osd spinbutton:not(.vertical) > button.image-button.up:not(.flat), .osd spinbutton:not(.vertical) > button.image-button.down:not(.flat) { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #d8dee9; border-style: none none none solid; border-color: rgba(31, 35, 43, 0.7); border-radius: 0; box-shadow: none; -gtk-icon-shadow: 0 1px black; } .osd spinbutton:not(.vertical) > button.image-button.up:not(.flat):dir(rtl), .osd spinbutton:not(.vertical) > button.image-button.down:not(.flat):dir(rtl) { border-style: none solid none none; } .osd spinbutton:not(.vertical) > button.image-button.up:not(.flat):hover, .osd spinbutton:not(.vertical) > button.image-button.down:not(.flat):hover { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #d8dee9; border-color: rgba(31, 35, 43, 0.5); background-color: rgba(18, 21, 25, 0.93); -gtk-icon-shadow: 0 1px black; box-shadow: none; } .osd spinbutton:not(.vertical) > button.image-button.up:not(.flat):disabled, .osd spinbutton:not(.vertical) > button.image-button.down:not(.flat):disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #808690; border-color: rgba(31, 35, 43, 0.5); -gtk-icon-shadow: none; box-shadow: none; } .osd spinbutton:not(.vertical) > button.image-button.up:not(.flat):dir(ltr):last-child, .osd spinbutton:not(.vertical) > button.image-button.down:not(.flat):dir(ltr):last-child { border-radius: 0 6px 6px 0; } .osd spinbutton:not(.vertical) > button.image-button.up:not(.flat):dir(rtl):first-child, .osd spinbutton:not(.vertical) > button.image-button.down:not(.flat):dir(rtl):first-child { border-radius: 6px 0 0 6px; } spinbutton.vertical:disabled { color: #8a909e; } spinbutton.vertical:drop(active) { border-color: transparent; box-shadow: none; } spinbutton.vertical > text { min-height: 32px; min-width: 32px; padding: 0; border-radius: 0; } spinbutton.vertical > text > selection { background-color: rgba(129, 161, 193, 0.6); color: transparent; } spinbutton.vertical > text > selection:focus-within { color: #3b4252; } spinbutton.vertical > button { min-height: 32px; min-width: 32px; padding: 0; } spinbutton.vertical > button.up { border-bottom-style: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } spinbutton.vertical > button.down { border-top-style: none; border-top-left-radius: 0; border-top-right-radius: 0; } .osd spinbutton.vertical > button:first-child { color: #d8dee9; border-color: #1f232b; background-color: rgba(40, 45, 55, 0.93); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } .osd spinbutton.vertical > button:first-child:hover { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(65, 74, 91, 0.93), rgba(65, 74, 91, 0.93)); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } .osd spinbutton.vertical > button:first-child:active { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(52, 59, 73, 0.93), rgba(52, 59, 73, 0.93)); background-clip: padding-box; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(216, 222, 233, 0.3); } .osd spinbutton.vertical > button:first-child:disabled { color: #808690; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(58, 63, 73, 0.5), rgba(58, 63, 73, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } treeview spinbutton:not(.vertical) { min-height: 0; border-style: none; border-radius: 0; } treeview spinbutton:not(.vertical) > text { min-height: 0; padding: 1px 2px; } /*********** * Spinner * ***********/ menu spinner { color: #81a1c1; } /********************* * Spinner Animation * *********************/ @keyframes spin { to { -gtk-icon-transform: rotate(1turn); } } spinner { background: none; opacity: 0; -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); } spinner:checked { opacity: 1; animation: spin 1s linear infinite; } spinner:checked:disabled { opacity: 0.5; } /********** * Switch * **********/ switch { font-size: 1px; min-width: 40px; min-height: 25px; background-color: transparent; background-size: 40px 24px; background-repeat: no-repeat; background-position: center center; background-image: -gtk-scaled(url("../assets/switch-off.svg"), url("../assets/switch-off.svg")); } switch:disabled { background-image: -gtk-scaled(url("../assets/switch-insensitive.svg"), url("../assets/switch-insensitive.svg")); } switch:disabled slider { background-image: -gtk-scaled(url("../assets/switch-slider-insensitive.svg"), url("../assets/switch-slider-insensitive@2.png")); } switch, switch slider { outline-color: transparent; color: transparent; border: none; box-shadow: none; } switch:checked { background-image: -gtk-scaled(url("../assets/switch-on.svg"), url("../assets/switch-on.svg")); } switch:checked slider { background-image: -gtk-scaled(url("../assets/switch-slider-on.svg"), url("../assets/switch-slider-on@2.png")); } switch:checked:disabled { background-image: -gtk-scaled(url("../assets/switch-on-insensitive.svg"), url("../assets/switch-on-insensitive.svg")); } switch:checked:disabled slider { background-image: -gtk-scaled(url("../assets/switch-slider-on-insensitive.svg"), url("../assets/switch-slider-on-insensitive@2.png")); } switch slider { min-width: 1px; min-height: 1px; background-repeat: no-repeat; background-position: left center; background-color: transparent; background-image: -gtk-scaled(url("../assets/switch-slider-off.svg"), url("../assets/switch-slider-off@2.png")); } row:selected switch:checked { background-image: -gtk-scaled(url("../assets/switch-off.svg"), url("../assets/switch-off.svg")); } row:selected switch:checked slider { background-image: -gtk-scaled(url("../assets/switch-slider-on-selected.svg"), url("../assets/switch-slider-on-selected@2.png")); } switch trough:active, switch trough:checked { background-color: #81a1c1; } switch trough:active:backdrop, switch trough:checked:backdrop { background-color: rgba(129, 161, 193, 0.6); } /************ * Toolbars * ************/ toolbar, .inline-toolbar, searchbar > revealer > box { padding: 4px; background-color: #d8dee9; } toolbar { padding: 4px 3px 3px 4px; } .osd toolbar { background-color: transparent; } toolbar.osd { padding: 13px; border: none; border-radius: 5px; background-color: rgba(40, 45, 55, 0.93); } toolbar.osd.left, toolbar.osd.right, toolbar.osd.top, toolbar.osd.bottom { border-radius: 0; } toolbar.horizontal separator { margin: 0 7px 1px 6px; } toolbar.vertical separator { margin: 6px 1px 7px 0; } toolbar:not(.inline-toolbar):not(.osd) switch, toolbar:not(.inline-toolbar):not(.osd) scale, toolbar:not(.inline-toolbar):not(.osd) entry, toolbar:not(.inline-toolbar):not(.osd) spinbutton, toolbar:not(.inline-toolbar):not(.osd) button { margin-right: 1px; margin-bottom: 1px; } .inline-toolbar { padding: 3px; border-width: 0 1px 1px; border-radius: 0 0 5px 5px; } searchbar > revealer > box { border-width: 0 0 1px; padding: 5px; } .inline-toolbar, searchbar > revealer > box { border-style: solid; border-color: #c5cedd; background-color: #d2d9e5; } .inline-toolbar:backdrop, searchbar > revealer > box:backdrop { border-color: #c7d0de; background-color: #d2d9e5; box-shadow: none; transition: 200ms ease-out; } searchbar { background: #e5e9f0; } /************ * Tooltips * ************/ tooltip { padding: 4px; /* not working */ border-radius: 5px; box-shadow: none; text-shadow: 0 1px black; } tooltip.background { background-color: rgba(40, 45, 55, 0.93); background-clip: padding-box; border: 1px solid #1f232b; } tooltip decoration { background-color: transparent; } tooltip * { padding: 4px; background-color: transparent; color: white; } columnview.view, treeview.view { border-left-color: #c5cedd; border-top-color: #c5cedd; } columnview.view:selected:focus, columnview.view:selected, treeview.view:selected:focus, treeview.view:selected { border-radius: 0; outline-color: #bf616a; } columnview.view:disabled, treeview.view:disabled { color: #8a909e; } columnview.view:disabled:selected, treeview.view:disabled:selected { color: #b3c6d9; } columnview.view:disabled:selected:backdrop, treeview.view:disabled:selected:backdrop { color: #a7bdd3; } columnview.view.separator, treeview.view.separator { min-height: 2px; color: #c5cedd; } columnview.view:backdrop, treeview.view:backdrop { border-left-color: #cdd5e2; border-top: #cdd5e2; } columnview.view:drop(active), treeview.view:drop(active) { box-shadow: none; } columnview.view > dndtarget:drop(active), treeview.view > dndtarget:drop(active) { border-style: solid none; border-width: 1px; border-color: #5f88b0; } columnview.view > dndtarget:drop(active).after, treeview.view > dndtarget:drop(active).after { border-top-style: none; } columnview.view > dndtarget:drop(active).before, treeview.view > dndtarget:drop(active).before { border-bottom-style: none; } columnview.view.expander, treeview.view.expander { min-width: 16px; min-height: 16px; -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); color: #6e7481; } columnview.view.expander:dir(rtl), treeview.view.expander:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); } columnview.view.expander:hover, treeview.view.expander:hover { color: #3b4252; } columnview.view.expander:selected, treeview.view.expander:selected { color: #d9e2ec; } columnview.view.expander:selected:hover, treeview.view.expander:selected:hover { color: #fefefe; } columnview.view.expander:checked, treeview.view.expander:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } columnview.view.progressbar, treeview.view.progressbar { color: #e5e9f0; border: 1px solid #5f88b0; border-radius: 4px; background-color: #81a1c1; background-image: linear-gradient(to bottom, #81a1c1, #5f88b0); box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px rgba(0, 0, 0, 0.2); } columnview.view.progressbar:selected:focus, columnview.view.progressbar:selected, treeview.view.progressbar:selected:focus, treeview.view.progressbar:selected { color: #81a1c1; background-image: image(#e5e9f0); } columnview.view.progressbar:selected:focus:backdrop, columnview.view.progressbar:selected:backdrop, treeview.view.progressbar:selected:focus:backdrop, treeview.view.progressbar:selected:backdrop { color: #81a1c1; background-color: #e2e6ee; } columnview.view.trough, treeview.view.trough { background-color: rgba(59, 66, 82, 0.1); } columnview.view.trough:selected:focus, columnview.view.trough:selected, treeview.view.trough:selected:focus, treeview.view.trough:selected { background-color: rgba(254, 254, 254, 0.3); } columnview.view > header > button, treeview.view > header > button { color: #3a475e; background-color: #e5e9f0; font-weight: bold; text-shadow: none; box-shadow: none; } columnview.view > header > button:hover, treeview.view > header > button:hover { color: #3b4558; box-shadow: none; transition: none; } columnview.view > header > button:active, treeview.view > header > button:active { color: #3b4252; transition: none; } columnview.view > header > button sort-indicator, treeview.view > header > button sort-indicator { min-height: 16px; min-width: 16px; } columnview.view > header > button sort-indicator.ascending, treeview.view > header > button sort-indicator.ascending { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } columnview.view > header > button sort-indicator.descending, treeview.view > header > button sort-indicator.descending { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } columnview.view button.dnd:active, columnview.view button.dnd:selected, columnview.view button.dnd:hover, columnview.view button.dnd, columnview.view header.button.dnd:active, columnview.view header.button.dnd:selected, columnview.view header.button.dnd:hover, columnview.view header.button.dnd, treeview.view button.dnd:active, treeview.view button.dnd:selected, treeview.view button.dnd:hover, treeview.view button.dnd, treeview.view header.button.dnd:active, treeview.view header.button.dnd:selected, treeview.view header.button.dnd:hover, treeview.view header.button.dnd { padding: 0 6px; color: #bf616a; background-image: none; background-color: #81a1c1; border-style: none; border-radius: 0; box-shadow: inset 0 0 0 1px #e5e9f0; text-shadow: none; transition: none; } columnview.view acceleditor > label, treeview.view acceleditor > label { background-color: #81a1c1; } columnview.view > header > button, treeview.view > header > button, columnview.view > header > button:hover, treeview.view > header > button:hover, columnview.view > header > button:active, treeview.view > header > button:active { padding: 0 6px; background-image: none; border-style: none none solid solid; border-color: #c5cedd; border-radius: 0; text-shadow: none; } columnview.view > header > button:disabled, treeview.view > header > button:disabled { border-color: #d8dee9; background-image: none; } columnview.view > header > button:last-child:backdrop, treeview.view > header > button:last-child:backdrop, columnview.view > header > button:last-child, treeview.view > header > button:last-child { border-right-style: none; } /********************** * Window Decorations * *********************/ window { border-width: 0px; } window.csd { box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.23); margin: 0px; border-radius: 4px 4px 0 0; } window.csd:backdrop { box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.18); transition: 200ms ease-out; } window.csd.popup { border-radius: 7px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.13); } window.csd.dialog.message { border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.13); } window.solid-csd { margin: 0; padding: 4px; border: solid 1px #c5cedd; border-radius: 0; box-shadow: inset 0 0 0 4px #c5cedd, inset 0 0 0 3px #2b313c, inset 0 1px rgba(59, 66, 82, 0.07); } window.solid-csd:backdrop { box-shadow: inset 0 0 0 4px #c5cedd, inset 0 0 0 3px #d8dee9, inset 0 1px rgba(59, 66, 82, 0.07); } window.maximized, window.fullscreen { border-radius: 0; box-shadow: none; } window.tiled, window.tiled-top, window.tiled-left, window.tiled-right, window.tiled-bottom { border-radius: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.23), 0 0 0 20px transparent; } window.tiled:backdrop, window.tiled-top:backdrop, window.tiled-left:backdrop, window.tiled-right:backdrop, window.tiled-bottom:backdrop { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 0 0 20px transparent; } window.popup { box-shadow: none; } window.ssd { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.23); } windowcontrols button.close, windowcontrols button.maximize, windowcontrols button.minimize { min-width: 20px; min-height: 20px; margin: 0; padding: 0 1px; background-position: center; background-repeat: no-repeat; background-size: 16px 16px; } windowcontrols button.close, windowcontrols button.close:hover, windowcontrols button.close:focus, windowcontrols button.close:active, windowcontrols button.close:backdrop, windowcontrols button.close:backdrop:hover, windowcontrols button.maximize, windowcontrols button.maximize:hover, windowcontrols button.maximize:focus, windowcontrols button.maximize:active, windowcontrols button.maximize:backdrop, windowcontrols button.maximize:backdrop:hover, windowcontrols button.minimize, windowcontrols button.minimize:hover, windowcontrols button.minimize:focus, windowcontrols button.minimize:active, windowcontrols button.minimize:backdrop, windowcontrols button.minimize:backdrop:hover { background-color: transparent; border: none; box-shadow: none; color: transparent; } windowcontrols button.close { background-image: -gtk-scaled(url("../assets/close.png"), url("../assets/close@2.png")); } windowcontrols button.close:hover, windowcontrols button.close:active { background-image: -gtk-scaled(url("../assets/close_prelight.png"), url("../assets/close_prelight@2.png")); } windowcontrols button.maximize { background-image: -gtk-scaled(url("../assets/maximize.png"), url("../assets/maximize@2.png")); } windowcontrols button.maximize:hover, windowcontrols button.maximize:active { background-image: -gtk-scaled(url("../assets/maximize_prelight.png"), url("../assets/maximize_prelight@2.png")); } windowcontrols button.minimize { background-image: -gtk-scaled(url("../assets/min.png"), url("../assets/min@2.png")); } windowcontrols button.minimize:hover, windowcontrols button.minimize:active { background-image: -gtk-scaled(url("../assets/min_prelight.png"), url("../assets/min_prelight@2.png")); } windowcontrols button:backdrop { -gtk-icon-shadow: none; background-image: -gtk-scaled(url("../assets/close_unfocused.png"), url("../assets/close_unfocused@2.png")); } headerbar.selection-mode button.titlebutton, .titlebar.selection-mode button.titlebutton { text-shadow: 0 -1px rgba(0, 0, 0, 0.4949019608); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.4949019608); } headerbar.selection-mode button.titlebutton:backdrop, .titlebar.selection-mode button.titlebutton:backdrop { -gtk-icon-shadow: none; } .history-view:selected:focus, .history-view:selected, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, textview > text:selected:focus, textview > text:selected, textview > text selection:focus, textview > text selection, flowbox flowboxchild:selected, modelbutton.flat:selected, .menuitem.button.flat:selected, calendar > grid > label.day-number:selected, spinbutton:not(.vertical) selection:focus, spinbutton.vertical > text selection:focus, spinbutton:not(.vertical) selection, spinbutton.vertical > text selection, entry selection:focus, entry selection, row:selected, columnview.view:selected:focus, columnview.view:selected, treeview.view:selected:focus, treeview.view:selected { background-color: #81a1c1; } row:selected label, label:selected, .selection-mode windowcontrols button, .history-view:selected:focus, .history-view:selected, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, textview > text:selected:focus, textview > text:selected, textview > text selection:focus, textview > text selection, flowbox flowboxchild:selected, modelbutton.flat:selected, .menuitem.button.flat:selected, calendar > grid > label.day-number:selected, spinbutton:not(.vertical) selection:focus, spinbutton.vertical > text selection:focus, spinbutton:not(.vertical) selection, spinbutton.vertical > text selection, entry selection:focus, entry selection, row:selected, columnview.view:selected:focus, columnview.view:selected, treeview.view:selected:focus, treeview.view:selected { color: #fefefe; font-weight: normal; outline-color: rgba(254, 254, 254, 0.3); } row:selected label:disabled, label:disabled:selected, .selection-mode windowcontrols button:disabled, .history-view:disabled:selected, iconview:disabled:selected:focus, .view:disabled:selected, iconview:disabled:selected, textview > text:disabled:selected:focus, textview > text:disabled:selected, textview > text selection:disabled, flowbox flowboxchild:disabled:selected, label:disabled selection, modelbutton.flat:disabled:selected, .menuitem.button.flat:disabled:selected, calendar > grid > label.day-number:disabled:selected, spinbutton:not(.vertical) selection:disabled, spinbutton.vertical > text selection:disabled, entry selection:disabled, row:disabled:selected { color: #c0d0e0; } row:selected label:backdrop, label:backdrop:selected, .selection-mode windowcontrols button:backdrop, .history-view:backdrop:selected, iconview:backdrop:selected:focus, .view:backdrop:selected, iconview:backdrop:selected, textview > text:backdrop:selected:focus, textview > text:backdrop:selected, textview > text selection:backdrop, flowbox flowboxchild:backdrop:selected, label:backdrop selection, modelbutton.flat:backdrop:selected, .menuitem.button.flat:backdrop:selected, calendar > grid > label.day-number:backdrop:selected, spinbutton:not(.vertical) selection:backdrop, spinbutton.vertical > text selection:backdrop, entry selection:backdrop, row:backdrop:selected { color: #fefefe; } row:selected label:backdrop:disabled, label:backdrop:disabled:selected, .selection-mode windowcontrols button:backdrop:disabled, .history-view:backdrop:disabled:selected, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, textview > text:backdrop:disabled:selected, textview > text selection:backdrop:disabled, flowbox flowboxchild:backdrop:disabled:selected, label:disabled selection:backdrop, label:backdrop selection:disabled, modelbutton.flat:backdrop:disabled:selected, .menuitem.button.flat:backdrop:disabled:selected, calendar > grid > label.day-number:backdrop:disabled:selected, spinbutton:not(.vertical) selection:backdrop:disabled, spinbutton.vertical > text selection:backdrop:disabled, entry selection:backdrop:disabled, row:backdrop:disabled:selected { color: #a7bdd3; } .monospace { font-family: Monospace; } /********************** * DE-Specific Styles * **********************/ /********* * Budgie * *********/ .budgie-container { background-color: transparent; } .budgie-container:backdrop { background-color: transparent; } .budgie-container popover list, .budgie-container popover row { border: none; background: none; padding: 0; margin: 0; } .budgie-popover .container, .budgie-popover border, .budgie-popover list, .budgie-popover row { padding: 0; margin: 0; background: none; border: none; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; opacity: 1; min-width: 0; min-height: 0; } .budgie-popover, .budgie-popover.background { border-radius: 2px; padding: 0; background: rgba(22, 25, 30, 0.95); background-clip: border-box; box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.35); border: 1px solid #1f232b; } .budgie-popover list:hover, .budgie-popover row:hover, .budgie-popover.background list:hover, .budgie-popover.background row:hover { background: none; } .budgie-popover > frame.container, .budgie-popover.background > frame.container { margin: 0 -1px -1px; padding: 2px 0 0; } .budgie-popover button, .budgie-popover.background button { color: #d8dee9; border: none; background: transparent; } .budgie-popover button:hover, .budgie-popover.background button:hover { color: #81a1c1; } .budgie-popover > .container { padding: 2px; } .budgie-menu { color: #d8dee9; } .budgie-menu .container { padding: 0; } .budgie-menu button:hover { -gtk-icon-filter: none; } .budgie-menu entry.search { border: none; background: none; padding: 5px 2px; border-bottom: 1px solid #1f232b; border-radius: 0; font-size: 120%; box-shadow: none; color: #d8dee9; } .budgie-menu entry.search image:dir(ltr) { padding-left: 8px; padding-right: 12px; } .budgie-menu entry.search image:dir(rtl) { padding-left: 12px; padding-right: 8px; } .budgie-menu .categories { border-width: 0; margin-left: 3px; background: transparent; } .budgie-menu .categories:dir(ltr) { border-right: 1px solid #1f232b; } .budgie-menu .categories:dir(rtl) { border-left: 1px solid #1f232b; } .budgie-menu .category-button { padding: 7px; border-radius: 2px 0 0 2px; } .budgie-menu .category-button:hover { background-color: rgba(59, 66, 82, 0.05); color: #3b4252; } .budgie-menu .category-button:active { box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); } .budgie-menu .category-button:checked { color: #fefefe; background: linear-gradient(to right, #88c0d0 0%, #88c0d0 100%); } .budgie-menu .category-button:checked:disabled { opacity: 0.5; } .budgie-menu .category-button:checked:disabled label { color: rgba(254, 254, 254, 0.7); } .budgie-menu scrollbar { background-color: transparent; border-color: #1f232b; } .budgie-menu button:not(.category-button) { padding-top: 5px; padding-bottom: 5px; border-radius: 0; box-shadow: none; background: yellow; } .budgie-menu button { border: none; background: transparent; } .budgie-menu undershoot, .budgie-menu overshoot { background: none; } .budgie-menu list { color: rgba(216, 222, 233, 0.7); } button.budgie-menu-launcher { padding: 0 2px; color: #d8dee9; box-shadow: none; background-color: transparent; } button.budgie-menu-launcher:hover { color: #d8dee9; } button.budgie-menu-launcher:active, button.budgie-menu-launcher:checked { color: #d8dee9; } button.budgie-menu-launcher:backdrop { color: #d8dee9; background-color: transparent; } button.budgie-menu-launcher:backdrop:hover { color: #d8dee9; } button.budgie-menu-launcher:backdrop:active, button.budgie-menu-launcher:backdrop:checked { color: #81a1c1; box-shadow: none; background-color: #e2e7ef; } .user-menu .content-box separator { margin-left: 6px; margin-right: 6px; background-color: rgba(59, 66, 82, 0.1); } .user-menu button { margin: 5px; } .user-menu > box.vertical row.activatable:first-child .indicator-item, .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.2); background-color: #81a1c1; transition-duration: 0.2s; } .user-menu > box.vertical row.activatable:first-child .indicator-item:dir(ltr), .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item:dir(ltr) { padding-left: 7px; background-position: left center; background-repeat: no-repeat; background-size: 38px auto; } .user-menu > box.vertical row.activatable:first-child .indicator-item:dir(rtl), .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item:dir(rtl) { padding-right: 7px; background-position: right center; background-repeat: no-repeat; background-size: 38px auto; } .user-menu > box.vertical row.activatable:first-child .indicator-item label, .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item label { color: #fefefe; } .user-menu > box.vertical row.activatable:first-child .indicator-item label:dir(ltr), .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item label:dir(ltr) { padding-left: 5px; } .user-menu > box.vertical row.activatable:first-child .indicator-item label:dir(rtl), .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item label:dir(rtl) { padding-right: 5px; } .user-menu > box.vertical row.activatable:first-child .indicator-item image, .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item image { color: #fefefe; } .user-menu > box.vertical row.activatable:first-child .indicator-item image:first-child, .user-menu > frame.container > box.vertical row.activatable:first-child .indicator-item image:first-child { min-width: 24px; min-height: 20px; } button.raven-trigger { padding-left: 2px; padding-right: 2px; color: #d8dee9; box-shadow: none; } button.raven-trigger:hover { color: #d8dee9; background-color: transparent; } button.raven-trigger:active, button.raven-trigger:checked { box-shadow: none; background-color: transparent; color: #81a1c1; } button.raven-trigger:backdrop { color: #d8dee9; } button.raven-trigger:backdrop:hover { color: #d8dee9; } button.raven-trigger:backdrop:active, button.raven-trigger:backdrop:checked { box-shadow: none; color: #81a1c1; background-color: transparent; } .places-menu .container { padding: 0; } .places-menu .message-bar { border-top-left-radius: 3px; border-top-right-radius: 3px; } .places-menu .name-button { border: 0; border-radius: 0; padding: 4px 6px; } .places-menu .unmount-button { padding: 4px 4px; border: 0; border-radius: 0; } .places-menu .places-section-header { padding: 0px; border-bottom: 1px solid rgba(31, 35, 43, 0.95); box-shadow: 0px 1px 1px alpha(@theme_fg_color, 0.03); } .places-menu .places-section-header > button { padding: 8px; border: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } .places-menu .places-list { background: rgba(59, 66, 82, 0.04); border-bottom: 1px solid rgba(31, 35, 43, 0.95); } .places-menu .unlock-area { border-top: 1px solid rgba(31, 35, 43, 0.85); border-bottom: 1px solid rgba(31, 35, 43, 0.85); } .places-menu .unlock-area entry { border-radius: 0; border: 0; } .places-menu .unlock-area button { border-radius: 0; border: 0; border-left: 1px solid rgba(31, 35, 43, 0.85); } .places-menu .alternative-label { font-size: 15px; padding: 3px; } .places-menu .always-expand { background: transparent; border-bottom: none; } .night-light-indicator .container { padding: 0; } .night-light-indicator .view-header { font-size: 14px; padding: 10px; border-bottom: 1px solid mix(@theme_base_color, #000000, 0.35); box-shadow: 0px 1px 1px alpha(@theme_fg_color, 0.04); } .night-light-indicator .display-settings-button { border-top-left-radius: 0px; border-top-right-radius: 0px; border: none; padding: 3px; border-top: 1px solid mix(@theme_base_color, #000000, 0.35); box-shadow: inset 0px 1px 1px alpha(@theme_fg_color, 0.04); } .budgie-panel { color: #d8dee9; background-color: rgba(22, 25, 30, 0.95); background-image: none; box-shadow: none; border: none; transition: all 150ms ease-in; } .budgie-panel .alert { color: #bf616a; } .budgie-panel:backdrop { color: #d8dee9; background-color: rgba(22, 25, 30, 0.95); } .budgie-panel button { border-top-width: 0; border-bottom-width: 0; border-radius: 0; } .budgie-panel button.flat { background: transparent; border: none; } .budgie-panel button.flat:hover, .budgie-panel button.flat:active, .budgie-panel button.flat:checked { background: transparent; color: #81a1c1; } .budgie-panel popover list, .budgie-panel popover row { padding: 0; margin: 0; } .budgie-panel label { color: #d8dee9; font-weight: 700; } .budgie-panel.transparent { background-color: rgba(22, 25, 30, 0.2); } .top .budgie-panel.transparent { border-bottom-color: transparent; } .bottom .budgie-panel.transparent { border-top-color: transparent; } .left .budgie-panel.transparent { border-right-color: transparent; } .right .budgie-panel.transparent { border-left-color: transparent; } .budgie-panel.transparent:backdrop, .budgie-panel.transparent label, .budgie-panel.transparent button.raven-trigger:backdrop, .budgie-panel.transparent button.budgie-menu-launcher { color: #f9fafb; } .budgie-panel .end-region { border-radius: 0px; } .budgie-panel .end-region separator { background-color: rgba(216, 222, 233, 0.15); } .budgie-panel .end-region label { font-weight: 700; color: #d8dee9; } .budgie-panel #tasklist-button, .budgie-panel #tasklist-button:backdrop { outline-color: transparent; transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); border-color: rgba(22, 25, 30, 0); border-radius: 0; background-color: transparent; box-shadow: none; background-clip: padding-box; } .budgie-panel button.flat.launcher { outline-color: transparent; transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); border-color: rgba(22, 25, 30, 0); border-radius: 0; padding: 0; background-clip: padding-box; background-color: transparent; } .budgie-panel button.flat.launcher { box-shadow: none; } .budgie-panel #tasklist-button:hover, .budgie-panel .unpinned button.flat.launcher:hover, .budgie-panel .pinned button.flat.launcher.running:hover { box-shadow: none; } .budgie-panel #tasklist-button:active, .budgie-panel .unpinned button.flat.launcher:active, .budgie-panel .pinned button.flat.launcher.running:active, .budgie-panel #tasklist-button:checked, .budgie-panel .unpinned button.flat.launcher:checked, .budgie-panel .pinned button.flat.launcher.running:checked { box-shadow: none; } .top .budgie-panel #tasklist-button, .budgie-panel .top #tasklist-button, .top .budgie-panel .unpinned button.flat.launcher, .budgie-panel .unpinned .top button.flat.launcher, .top .budgie-panel .pinned button.flat.launcher.running, .budgie-panel .pinned .top button.flat.launcher.running { padding-bottom: 2px; border-top: 2px solid transparent; } .top .budgie-panel .pinned button.flat.launcher:not(.running) { border-top: 2px solid transparent; } .top .budgie-panel .pinned button.flat.launcher:not(.running):hover { border-top: 2px solid rgba(255, 255, 255, 0.1); } .top .budgie-panel .unpinned button.flat.launcher, .top .budgie-panel .pinned button.flat.launcher.running { border-top: 2px solid rgba(255, 255, 255, 0.1); } .top .budgie-panel #tasklist-button:hover, .budgie-panel .top #tasklist-button:hover, .top .budgie-panel .unpinned button.flat.launcher:hover, .budgie-panel .unpinned .top button.flat.launcher:hover, .top .budgie-panel .pinned button.flat.launcher.running:hover, .budgie-panel .pinned .top button.flat.launcher.running:hover { border-top: 2px solid rgba(255, 255, 255, 0.25); } .top .budgie-panel #tasklist-button:active, .budgie-panel .top #tasklist-button:active, .top .budgie-panel .unpinned button.flat.launcher:active, .budgie-panel .unpinned .top button.flat.launcher:active, .top .budgie-panel .pinned button.flat.launcher.running:active, .budgie-panel .pinned .top button.flat.launcher.running:active, .top .budgie-panel #tasklist-button:checked, .budgie-panel .top #tasklist-button:checked, .top .budgie-panel .unpinned button.flat.launcher:checked, .budgie-panel .unpinned .top button.flat.launcher:checked, .top .budgie-panel .pinned button.flat.launcher.running:checked, .budgie-panel .pinned .top button.flat.launcher.running:checked { border-top: 2px solid #81a1c1; } .bottom .budgie-panel #tasklist-button, .budgie-panel .bottom #tasklist-button, .bottom .budgie-panel .unpinned button.flat.launcher, .budgie-panel .unpinned .bottom button.flat.launcher, .bottom .budgie-panel .pinned button.flat.launcher.running, .budgie-panel .pinned .bottom button.flat.launcher.running { padding-top: 2px; border-bottom: 2px solid transparent; } .bottom .budgie-panel .pinned button.flat.launcher:not(.running) { border-bottom: 2px solid transparent; } .bottom .budgie-panel .pinned button.flat.launcher:not(.running):hover { border-bottom: 2px solid rgba(255, 255, 255, 0.1); } .bottom .budgie-panel .unpinned button.flat.launcher, .bottom .budgie-panel .pinned button.flat.launcher.running { border-bottom: 2px solid rgba(255, 255, 255, 0.1); } .bottom .budgie-panel #tasklist-button:hover, .budgie-panel .bottom #tasklist-button:hover, .bottom .budgie-panel .unpinned button.flat.launcher:hover, .budgie-panel .unpinned .bottom button.flat.launcher:hover, .bottom .budgie-panel .pinned button.flat.launcher.running:hover, .budgie-panel .pinned .bottom button.flat.launcher.running:hover { border-bottom: 2px solid rgba(255, 255, 255, 0.25); } .bottom .budgie-panel #tasklist-button:active, .budgie-panel .bottom #tasklist-button:active, .bottom .budgie-panel .unpinned button.flat.launcher:active, .budgie-panel .unpinned .bottom button.flat.launcher:active, .bottom .budgie-panel .pinned button.flat.launcher.running:active, .budgie-panel .pinned .bottom button.flat.launcher.running:active, .bottom .budgie-panel #tasklist-button:checked, .budgie-panel .bottom #tasklist-button:checked, .bottom .budgie-panel .unpinned button.flat.launcher:checked, .budgie-panel .unpinned .bottom button.flat.launcher:checked, .bottom .budgie-panel .pinned button.flat.launcher.running:checked, .budgie-panel .pinned .bottom button.flat.launcher.running:checked { border-bottom: 2px solid #81a1c1; } .left .budgie-panel #tasklist-button, .budgie-panel .left #tasklist-button, .left .budgie-panel .unpinned button.flat.launcher, .budgie-panel .unpinned .left button.flat.launcher, .left .budgie-panel .pinned button.flat.launcher.running, .budgie-panel .pinned .left button.flat.launcher.running { padding-right: 2px; border-left: 2px solid transparent; } .left .budgie-panel .pinned button.flat.launcher:not(.running) { border-left: 2px solid transparent; } .left .budgie-panel .pinned button.flat.launcher:not(.running):hover { border-left: 2px solid rgba(255, 255, 255, 0.1); } .left .budgie-panel .unpinned button.flat.launcher, .left .budgie-panel .pinned button.flat.launcher.running { border-left: 2px solid rgba(255, 255, 255, 0.1); } .left .budgie-panel #tasklist-button:hover, .budgie-panel .left #tasklist-button:hover, .left .budgie-panel .unpinned button.flat.launcher:hover, .budgie-panel .unpinned .left button.flat.launcher:hover, .left .budgie-panel .pinned button.flat.launcher.running:hover, .budgie-panel .pinned .left button.flat.launcher.running:hover { border-left: 2px solid rgba(255, 255, 255, 0.25); } .left .budgie-panel #tasklist-button:active, .budgie-panel .left #tasklist-button:active, .left .budgie-panel .unpinned button.flat.launcher:active, .budgie-panel .unpinned .left button.flat.launcher:active, .left .budgie-panel .pinned button.flat.launcher.running:active, .budgie-panel .pinned .left button.flat.launcher.running:active, .left .budgie-panel #tasklist-button:checked, .budgie-panel .left #tasklist-button:checked, .left .budgie-panel .unpinned button.flat.launcher:checked, .budgie-panel .unpinned .left button.flat.launcher:checked, .left .budgie-panel .pinned button.flat.launcher.running:checked, .budgie-panel .pinned .left button.flat.launcher.running:checked { border-left: 2px solid #81a1c1; } .right .budgie-panel #tasklist-button, .budgie-panel .right #tasklist-button, .right .budgie-panel .unpinned button.flat.launcher, .budgie-panel .unpinned .right button.flat.launcher, .right .budgie-panel .pinned button.flat.launcher.running, .budgie-panel .pinned .right button.flat.launcher.running { padding-left: 2px; border-right: 2px solid transparent; } .right .budgie-panel .pinned button.flat.launcher:not(.running) { border-right: 2px solid transparent; } .right .budgie-panel .pinned button.flat.launcher:not(.running):hover { border-right: 2px solid rgba(255, 255, 255, 0.1); } .right .budgie-panel .unpinned button.flat.launcher, .right .budgie-panel .pinned button.flat.launcher.running { border-right: 2px solid rgba(255, 255, 255, 0.1); } .right .budgie-panel #tasklist-button:hover, .budgie-panel .right #tasklist-button:hover, .right .budgie-panel .unpinned button.flat.launcher:hover, .budgie-panel .unpinned .right button.flat.launcher:hover, .right .budgie-panel .pinned button.flat.launcher.running:hover, .budgie-panel .pinned .right button.flat.launcher.running:hover { border-right: 2px solid rgba(255, 255, 255, 0.25); } .right .budgie-panel #tasklist-button:active, .budgie-panel .right #tasklist-button:active, .right .budgie-panel .unpinned button.flat.launcher:active, .budgie-panel .unpinned .right button.flat.launcher:active, .right .budgie-panel .pinned button.flat.launcher.running:active, .budgie-panel .pinned .right button.flat.launcher.running:active, .right .budgie-panel #tasklist-button:checked, .budgie-panel .right #tasklist-button:checked, .right .budgie-panel .unpinned button.flat.launcher:checked, .budgie-panel .unpinned .right button.flat.launcher:checked, .right .budgie-panel .pinned button.flat.launcher.running:checked, .budgie-panel .pinned .right button.flat.launcher.running:checked { border-right: 2px solid #81a1c1; } .top .budgie-panel { border-bottom: 1px solid rgba(28, 32, 39, 0.92); } .top .raven-frame { padding: 0; background: none; } .top .raven-frame border { border: none; border-bottom: 1px solid rgba(31, 35, 43, 0.92); } .top .shadow-block { background-color: transparent; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent); } .bottom .budgie-panel { border-top: 1px solid rgba(28, 32, 39, 0.92); } .bottom .raven-frame { padding: 0; background: none; } .bottom .raven-frame border { border: none; border-top: 1px solid rgba(31, 35, 43, 0.92); } .bottom .shadow-block { background-color: transparent; background-image: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent); } .left .budgie-panel { border-right: 1px solid rgba(28, 32, 39, 0.92); } .left .raven-frame { padding: 0; background: none; } .left .raven-frame border { border: none; border-right: 1px solid rgba(31, 35, 43, 0.92); } .left .shadow-block { background-color: transparent; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent); } .right .budgie-panel { border-left: 1px solid rgba(28, 32, 39, 0.92); } .right .raven-frame { padding: 0; background: none; } .right .raven-frame border { border: none; border-left: 1px solid rgba(31, 35, 43, 0.92); } .right .shadow-block { background-color: transparent; background-image: linear-gradient(to left, rgba(0, 0, 0, 0.3), transparent); } .raven { padding: 0; color: #bf616a; background: rgba(22, 25, 30, 0.95); transition: 170ms ease-out; } .raven .raven-header { min-height: 32px; color: #d8dee9; border: solid rgba(31, 35, 43, 0.95); border-width: 1px 0; background-color: rgba(54, 61, 75, 0.45); } .raven .raven-header * { padding-top: 0; padding-bottom: 0; } .raven .raven-header.top { border-top-style: none; border-color: transparent; margin-top: 3px; min-height: 32px; } .raven .raven-header.top button.image-button:hover { color: #7094b9; box-shadow: none; } .raven .raven-header > button.text-button { border-radius: 2px; color: #fefefe; background-color: rgba(184, 79, 89, 0.9); box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.2), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.2); } .raven .raven-header > button.text-button:hover { border-radius: 2px; color: #fefefe; background-color: rgba(191, 97, 106, 0.9); box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.2), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.2); } .raven .raven-header > button.text-button:active { color: #fefefe; background-color: rgba(198, 115, 123, 0.9); box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.2), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.2); } .raven .raven-header.bottom { border-bottom-style: none; } .raven .raven-header button { color: #d8dee9; border-radius: 6px; text-shadow: none; box-shadow: none; border: 1px solid #1f232b; background-color: #343b48; border-radius: 0; } .raven .raven-header button:hover { color: #81a1c1; text-shadow: none; background-color: rgba(229, 233, 240, 0.8); border-color: #1f232b; border-radius: 0; } .raven .raven-header button:active, .raven .raven-header button:checked { color: #81a1c1; background-color: #2a2f3a; } .raven .raven-header button:disabled { color: #8a909e; } .raven list { color: #d8dee9; background-color: transparent; } .raven list:selected { background-color: rgba(129, 161, 193, 0.9); } .raven list row, .raven list row.activatable { background-color: transparent; } .raven list row:hover, .raven list row.activatable:hover { background-color: rgba(54, 61, 75, 0.25); } .raven list row:selected, .raven list row.activatable:selected { background-color: rgba(129, 161, 193, 0.9); } .raven .raven-background { color: #d8dee9; background-color: transparent; border-color: transparent; } .raven .raven-background.middle { border-bottom-style: none; } .raven .powerstrip { background-color: transparent; border-top-color: transparent; } .raven .powerstrip button.image-button { border-radius: 50%; padding: 5px; min-width: 32px; min-height: 32px; margin-bottom: 3px; background: #b48ead; color: #fefefe; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.2); border: none; font-size: 100%; } .raven .powerstrip button.image-button:hover { background: rgba(180, 142, 173, 0.85); color: #fefefe; } .raven .powerstrip button.image-button:active { background: #b48ead; color: #fefefe; } .raven .powerstrip button.image-button:first-child { background: linear-gradient(to right, #88c0d0 0%, #88c0d0 100%); } .raven .powerstrip button.image-button:first-child:hover { background: rgba(129, 161, 193, 0.85); } .raven .powerstrip button.image-button:first-child:active { background: #81a1c1; } .raven .powerstrip button.image-button:last-child { background: linear-gradient(to right, #bf616a, #bf616a); } .raven .powerstrip button.image-button:last-child:hover { background: rgba(191, 97, 106, 0.85); } .raven .powerstrip button.image-button:last-child:active { background: #bf616a; } .raven .option-subtitle { font-size: 13px; } calendar.raven-calendar { padding: 6px; color: #d8dee9; background: transparent; border-color: transparent; } calendar.raven-calendar:indeterminate { color: alpha(currentColor,0.3); } calendar.raven-calendar:selected { background: transparent; color: #7397ba; font-weight: bold; } calendar.raven-calendar:backdrop { background-color: transparent; } calendar.raven-calendar.header { color: #d8dee9; border: none; border-radius: 0; background-color: transparent; } calendar.raven-calendar button, calendar.raven-calendar button:focus { color: alpha(currentColor,0.5); background-color: transparent; } calendar.raven-calendar button:hover, calendar.raven-calendar button:focus:hover { color: #3b4252; background-color: transparent; } .raven-mpris { color: #3b4252; background-color: rgba(229, 233, 240, 0.9); border: solid rgba(255, 255, 255, 0.2); border-width: 1px 0; border-bottom-color: rgba(0, 0, 0, 0.2); } .raven-mpris button.image-button { padding: 10px; background-color: #e5e9f0; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.2); } .raven-mpris button.image-button:hover { background-color: #81a1c1; } .raven-mpris button.image-button:active { background-color: #7094b9; } .raven-mpris button.image-button:first-child { margin-right: 4px; } .raven-mpris button.image-button:last-child { margin-left: 4px; } .raven-mpris button.image-button:last-child, .raven-mpris button.image-button:first-child { padding: 4px; margin-top: 6px; margin-bottom: 6px; } .budgie-notification-window, .budgie-osd-window, .budgie-switcher-window { background: none; border-radius: 1px; } .budgie-notification-window button, .budgie-osd-window button, .budgie-switcher-window button { background-color: #81a1c1; color: #fefefe; border: none; } .budgie-notification-window button:hover, .budgie-osd-window button:hover, .budgie-switcher-window button:hover { background-color: #7094b9; border: none; } .budgie-notification-window button:active, .budgie-osd-window button:active, .budgie-switcher-window button:active, .budgie-notification-window button:checked, .budgie-osd-window button:checked, .budgie-switcher-window button:checked { background-color: #7094b9; } .budgie-notification.background, .background.budgie-osd, .background.budgie-switcher { border-radius: 1px; } .budgie-notification .notification-title, .budgie-osd .notification-title, .budgie-switcher .notification-title { font-size: 110%; color: #d8dee9; } .budgie-notification .notification-body, .budgie-osd .notification-body, .budgie-switcher .notification-body { color: rgba(216, 222, 233, 0.7); } .budgie-notification button, .budgie-osd button, .budgie-switcher button { background-color: transparent; color: #fefefe; } .budgie-notification button:hover, .budgie-osd button:hover, .budgie-switcher button:hover { background-color: transparent; color: #bf616a; box-shadow: none; } .budgie-notification button:active, .budgie-osd button:active, .budgie-switcher button:active, .budgie-notification button:checked, .budgie-osd button:checked, .budgie-switcher button:checked { background-color: transparent; color: #b84f59; } .drop-shadow, .budgie-session-dialog.background, .background.budgie-polkit-dialog, .background.budgie-run-dialog { color: #d8dee9; background-color: rgba(43, 49, 60, 0.95); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); border-radius: 2px; } .budgie-switcher-window flowbox { color: #3b4252; } .budgie-switcher-window flowboxchild { padding: 3px; margin: 3px; color: #3b4252; } .budgie-switcher-window flowboxchild:hover { background-color: transparent; } .budgie-switcher-window flowboxchild:active { color: #3b4252; } .budgie-switcher-window flowboxchild:selected { color: #fefefe; background-color: rgba(129, 161, 193, 0.5); } .budgie-switcher-window flowboxchild:selected:active { color: #fefefe; } .budgie-switcher-window flowboxchild:selected:hover { background-color: #7491ae; } .budgie-switcher-window flowboxchild:selected:disabled { color: rgba(254, 254, 254, 0.7); background-color: rgba(129, 161, 193, 0.7); } .budgie-switcher-window flowboxchild:selected:disabled label { color: rgba(254, 254, 254, 0.7); } .budgie-session-dialog, .budgie-polkit-dialog, .budgie-run-dialog { color: #d8dee9; background-color: rgba(22, 25, 30, 0.95); } .budgie-session-dialog label:backdrop, .budgie-polkit-dialog label:backdrop, .budgie-run-dialog label:backdrop { color: rgba(216, 222, 233, 0.5); } .budgie-session-dialog .dialog-title, .budgie-polkit-dialog .dialog-title, .budgie-run-dialog .dialog-title { font-size: 120%; } .budgie-session-dialog .linked.horizontal > button, .budgie-polkit-dialog .linked.horizontal > button, .budgie-run-dialog .linked.horizontal > button { margin-bottom: 0; min-height: 32px; border-bottom: none; border-color: #1f232b; border-radius: 0; color: #d8dee9; background-color: transparent; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), inset 0 1px 2px rgba(0, 0, 0, 0.2); } .budgie-session-dialog .linked.horizontal > button label, .budgie-polkit-dialog .linked.horizontal > button label, .budgie-run-dialog .linked.horizontal > button label { font-weight: 700; } .budgie-session-dialog .linked.horizontal > button:first-child, .budgie-polkit-dialog .linked.horizontal > button:first-child, .budgie-run-dialog .linked.horizontal > button:first-child { border-left: none; border-bottom-left-radius: 2px; } .budgie-session-dialog .linked.horizontal > button:last-child, .budgie-polkit-dialog .linked.horizontal > button:last-child, .budgie-run-dialog .linked.horizontal > button:last-child { border-right: none; border-bottom-right-radius: 2px; } .budgie-session-dialog .linked.horizontal > button:hover, .budgie-polkit-dialog .linked.horizontal > button:hover, .budgie-run-dialog .linked.horizontal > button:hover { background-color: rgba(129, 161, 193, 0.9); } .budgie-session-dialog .linked.horizontal > button:hover:backdrop label, .budgie-polkit-dialog .linked.horizontal > button:hover:backdrop label, .budgie-run-dialog .linked.horizontal > button:hover:backdrop label { color: rgba(255, 255, 255, 0.5); } .budgie-session-dialog .linked.horizontal > button.suggested-action, .budgie-polkit-dialog .linked.horizontal > button.suggested-action, .budgie-run-dialog .linked.horizontal > button.suggested-action { background-color: rgba(129, 161, 193, 0.9); } .budgie-session-dialog .linked.horizontal > button.suggested-action:hover, .budgie-polkit-dialog .linked.horizontal > button.suggested-action:hover, .budgie-run-dialog .linked.horizontal > button.suggested-action:hover { background-color: rgba(146, 174, 201, 0.9); } .budgie-session-dialog .linked.horizontal > button.suggested-action:active, .budgie-polkit-dialog .linked.horizontal > button.suggested-action:active, .budgie-run-dialog .linked.horizontal > button.suggested-action:active, .budgie-session-dialog .linked.horizontal > button.suggested-action:checked, .budgie-polkit-dialog .linked.horizontal > button.suggested-action:checked, .budgie-run-dialog .linked.horizontal > button.suggested-action:checked { background-color: rgba(146, 174, 201, 0.9); } .budgie-session-dialog .linked.horizontal > button.destructive-action, .budgie-polkit-dialog .linked.horizontal > button.destructive-action, .budgie-run-dialog .linked.horizontal > button.destructive-action { background-color: rgba(184, 79, 89, 0.9); } .budgie-session-dialog .linked.horizontal > button.destructive-action:hover, .budgie-polkit-dialog .linked.horizontal > button.destructive-action:hover, .budgie-run-dialog .linked.horizontal > button.destructive-action:hover { background-color: rgba(191, 97, 106, 0.9); } .budgie-session-dialog .linked.horizontal > button.destructive-action:active, .budgie-polkit-dialog .linked.horizontal > button.destructive-action:active, .budgie-run-dialog .linked.horizontal > button.destructive-action:active, .budgie-session-dialog .linked.horizontal > button.destructive-action:checked, .budgie-polkit-dialog .linked.horizontal > button.destructive-action:checked, .budgie-run-dialog .linked.horizontal > button.destructive-action:checked { background-color: rgba(191, 97, 106, 0.9); } .budgie-session-dialog entry, .budgie-polkit-dialog entry, .budgie-run-dialog entry { background-color: #505359; color: #d8dee9; } .budgie-session-dialog entry:focus, .budgie-polkit-dialog entry:focus, .budgie-run-dialog entry:focus { background-color: #505359; } .budgie-session-dialog entry:backdrop, .budgie-polkit-dialog entry:backdrop, .budgie-run-dialog entry:backdrop { background-color: #505359; } .budgie-polkit-dialog .message { color: rgba(216, 222, 233, 0.7); } .budgie-polkit-dialog .failure { color: #bf616a; } .budgie-run-dialog entry.search, .budgie-run-dialog entry.search:focus { font-size: 120%; padding: 8px 5px; border: none; box-shadow: none; } .budgie-run-dialog entry.search image, .budgie-run-dialog entry.search:focus image { color: #d8dee9; } .budgie-run-dialog entry.search image:dir(ltr), .budgie-run-dialog entry.search:focus image:dir(ltr) { padding-left: 8px; padding-right: 12px; } .budgie-run-dialog entry.search image:dir(rtl), .budgie-run-dialog entry.search:focus image:dir(rtl) { padding-left: 12px; padding-right: 8px; } .budgie-run-dialog list row:selected .dim-label, .budgie-run-dialog list row:selected label.separator, .budgie-run-dialog list row:selected .titlebar .subtitle, .titlebar .budgie-run-dialog list row:selected .subtitle, .budgie-run-dialog list row:selected headerbar .subtitle, headerbar .budgie-run-dialog list row:selected .subtitle { opacity: 1; } .budgie-run-dialog scrolledwindow { border-top: 1px solid rgba(0, 0, 0, 0); } .budgie-menubar menu { margin: 4px; padding: 5px; border-radius: 0; background-color: rgba(22, 25, 30, 0.95); } .budgie-menubar menu menuitem:hover { background-color: #81a1c1; color: #fefefe; } .budgie-menubar arrow { border: none; min-width: 16px; min-height: 16px; } .budgie-menubar arrow.top { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); border-bottom: 1px solid rgba(45, 51, 63, 0.928); } .budgie-menubar arrow.bottom { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); border-top: 1px solid rgba(45, 51, 63, 0.928); } .budgie-menubar menuitem accelerator { color: rgba(59, 66, 82, 0.35); } .budgie-menubar menuitem check, .budgie-menubar menuitem radio { min-height: 16px; min-width: 16px; } window.background.budgie-settings-window.csd > box.horizontal > stack > scrolledwindow buttonbox.inline-toolbar { border-style: none none solid; } .workspace-switcher .workspace-layout { border: 0 solid rgba(22, 25, 30, 0.95); } .top .workspace-switcher .workspace-layout:dir(ltr), .bottom .workspace-switcher .workspace-layout:dir(ltr) { border-left-width: 1px; } .top .workspace-switcher .workspace-layout:dir(rtl), .bottom .workspace-switcher .workspace-layout:dir(rtl) { border-right-width: 1px; } .left .workspace-switcher .workspace-layout, .right .workspace-switcher .workspace-layout { border-top-width: 1px; } .workspace-switcher .workspace-item, .workspace-switcher .workspace-add-button { border: 0 solid rgba(43, 49, 60, 0.95); } .top .workspace-switcher .workspace-item:dir(ltr), .bottom .workspace-switcher .workspace-item:dir(ltr), .top .workspace-switcher .workspace-add-button:dir(ltr), .bottom .workspace-switcher .workspace-add-button:dir(ltr) { border-right-width: 1px; } .top .workspace-switcher .workspace-item:dir(rtl), .bottom .workspace-switcher .workspace-item:dir(rtl), .top .workspace-switcher .workspace-add-button:dir(rtl), .bottom .workspace-switcher .workspace-add-button:dir(rtl) { border-left-width: 1px; } .left .workspace-switcher .workspace-item, .right .workspace-switcher .workspace-item, .left .workspace-switcher .workspace-add-button, .right .workspace-switcher .workspace-add-button { border-bottom-width: 1px; } .workspace-switcher .workspace-item.current-workspace { background-color: rgba(11, 13, 15, 0.95); } .workspace-switcher .workspace-add-button { border: none; background: transparent; } .workspace-switcher .workspace-add-button:hover { box-shadow: none; } .workspace-switcher .workspace-add-button:active { background-image: none; } .workspace-switcher .workspace-add-button:active image { margin: 1px 0 -1px; } .budgie-panel .workspace-switcher .workspace-icon-button { min-height: 24px; min-width: 24px; padding: 0; border-radius: 2px; } /************ * Nautilus * ************/ .nautilus-window .frame *:selected, .nautilus-window .frame *:selected:backdrop { background: transparent; color: #81a1c1; } .nautilus-window .frame *:selected label, .nautilus-window .frame *:selected:backdrop label { color: #81a1c1; } .nautilus-window paned > separator { background-image: none; } .nautilus-window .sidebar { background-color: transparent; } .nautilus-window .sidebar:backdrop { background-color: transparent; } .nautilus-window .sidebar .list-row button { border: none; background-color: rgba(219, 225, 234, 0.95); } .nautilus-window .sidebar .list-row button:active { background-color: rgba(129, 161, 193, 0.75); } .nautilus-window .sidebar .list-row:selected { background-color: rgba(129, 161, 193, 0.75); } .nautilus-window .sidebar .list-row:selected:hover { background-color: rgba(129, 161, 193, 0.9); } .nautilus-window .sidebar .list-row:hover { background-color: rgba(229, 233, 240, 0.5); } .nautilus-window .sidebar .list-row:hover:active { background-color: rgba(129, 161, 193, 0.9); } .nautilus-window notebook > stack:only-child { background-color: #e5e9f0; } .nautilus-window notebook > stack:only-child:backdrop { background-color: #e2e6ee; } .nautilus-window searchbar { border-top: 1px solid rgba(0, 0, 0, 0.12); } .nautilus-window .searchbar-container { margin-top: -1px; } .nautilus-circular-button { border-radius: 20px; } .disk-space-display { border: 2px solid; } .disk-space-display .unknown { background-color: #888a85; border-color: #555653; } .disk-space-display .used { background-color: #9FB0B9; border-color: #667f8c; } .disk-space-display .free { background-color: #D8D8D8; border-color: #a5a5a5; } .nautilus-desktop { color: #3b4252; } .nautilus-desktop .nautilus-canvas-item { border-radius: 5px; color: #fefefe; text-shadow: 1px 1px rgba(0, 0, 0, 0.6); } .nautilus-desktop .nautilus-canvas-item:active { color: #3b4252; text-shadow: none; } .nautilus-desktop .nautilus-canvas-item:hover { color: #3b4252; text-shadow: none; } .nautilus-desktop .nautilus-canvas-item:selected { color: #fefefe; text-shadow: none; } .nautilus-desktop .nautilus-canvas-item .dim-label:selected, .nautilus-desktop .nautilus-canvas-item label.separator:selected, .nautilus-desktop .nautilus-canvas-item .titlebar .subtitle:selected, .titlebar .nautilus-desktop .nautilus-canvas-item .subtitle:selected, .nautilus-desktop .nautilus-canvas-item headerbar .subtitle:selected, headerbar .nautilus-desktop .nautilus-canvas-item .subtitle:selected { color: #fefefe; } .nautilus-desktop .nautilus-list .dim-label:selected, .nautilus-desktop .nautilus-list label.separator:selected, .nautilus-desktop .nautilus-list .titlebar .subtitle:selected, .titlebar .nautilus-desktop .nautilus-list .subtitle:selected, .nautilus-desktop .nautilus-list headerbar .subtitle:selected, headerbar .nautilus-desktop .nautilus-list .subtitle:selected { color: #fefefe; } /********* * Gedit * *********/ .gedit-search-slider { padding: 4px; border-radius: 0 0 3px 3px; border: 0; background-color: #d8dee9; } /********* * Gnucash * *********/ .GncMainWindow entry.register-foreground { background: transparent; border: none; } /******************* * Calendar events * ********************/ .color-light.timed label, .color-light .event-popover label { color: #3b4252; opacity: 1; } /******************* * Calendar sidebar * ********************/ datechooser button { color: #d8dee9; } datechooser .circular.day.text-button { padding: 6px; border-radius: 50%; min-height: 22px; min-width: 22px; border: none; color: #d8dee9; } datechooser .circular.day.text-button.flat.other-month, datechooser .circular.day.text-button.flat.non-workday { color: #8a909e; } datechooser .circular.day.text-button.today { color: #5e81ac; } datechooser .circular.day.text-button:active, datechooser .circular.day.text-button:selected { color: #fefefe; outline-color: rgba(254, 254, 254, 0.3); background-color: #81a1c1; text-shadow: none; font-weight: bold; } datechooser .weekday, datechooser .weeknum { color: #8a909e; } datechooser .weeknum { background-color: #303643; } datechooser .current-week { background-color: rgba(138, 144, 158, 0.1); } popover datechooser { background-color: #e5e9f0; } popover datechooser button { color: #3b4252; } popover datechooser .circular.day.text-button { color: #3b4252; } popover datechooser .weeknum { background-color: #d8dee9; } agenda-view list.background { padding: 8px; } agenda-view list.background .caption-heading, agenda-view list.background .dim-label.no-events, agenda-view list.background label.no-events.separator, agenda-view list.background .titlebar .no-events.subtitle, .titlebar agenda-view list.background .no-events.subtitle, agenda-view list.background headerbar .no-events.subtitle, headerbar agenda-view list.background .no-events.subtitle { color: #d8dee9; } datechooser, datechooser:backdrop, agenda-view list.background, agenda-view list.background:backdrop, .calendar-list, .calendar-list:backdrop { background-color: #282d37; } .calendar-list row, .calendar-list label { color: #d8dee9; } .calendar-list row:hover { background-color: #303643; } /****************************** * Gnome system monitor graph * ******************************/ #gnome-system-monitor .loadgraph { background: #d8dee9; color: #3b4252; } /******** * Gala * *******/ .gala-notification { border-width: 0; border-radius: 2px; color: white; border: 1px solid #e5e9f0; background-color: #e5e9f0; } .gala-notification .title, .gala-notification .label { color: #3b4252; } .gala-button { padding: 3px; color: #e5e9f0; border: none; border-radius: 50%; background-image: linear-gradient(to bottom, #7e7e7e, #3e3e3e); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.98), inset 0 1px 0 0 rgba(255, 255, 255, 0.93), inset 0 -1px 0 0 rgba(255, 255, 255, 0.99), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 3px 6px rgba(0, 0, 0, 0.84), 0 3px 6px rgba(0, 0, 0, 0.77); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); } /********** * Notify * *********/ .notify { /*-notify-shadow: 0px 2px 18px transparentize(black, 0.60);*/ border-radius: 5px; border: 1px solid rgba(0, 0, 0, 0.7); background-color: rgba(229, 233, 240, 0.05); } /*************** * SwitchBoard * ***************/ .category-label { font-weight: bold; color: #3b4252; } /************* * Slingshot * ************/ .button.app { border: none; border-radius: 0; box-shadow: none; background-image: none; } .button.app .app:hover { border-radius: 8px; border: none; background-color: rgba(129, 161, 193, 0.3); color: white; } .button.app .app:focus { /*background-color: transparentize(black, 0.20);*/ } .search-item { border-radius: 0; border: none; color: #3b4252; background: none; } .search-item:hover, .search-item:focus { border-radius: 0; background-color: rgba(129, 161, 193, 0.3); color: #fefefe; } .search-entry-large, .search-entry-large:focus { border: none; font-size: 18px; font-weight: 300; background-image: none; background: none; box-shadow: none; border-radius: 0; } .search-category-header { font-weight: bold; color: #3b4252; } /********* * Panel * ********/ .composited-indicator > revealer, .composited-indicator > revealer image, .composited-indicator > revealer label, .composited-indicator > revealer spinner { color: #d8dee9; font-weight: bold; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5); transition: all 200ms ease-in-out; -gtk-icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5); } .composited-indicator > revealer image:first-child + label { margin-left: 5px; } .panel.color-light .composited-indicator > revealer, .panel.color-light .composited-indicator > revealer image, .panel.color-light .composited-indicator > revealer label, .panel.color-light .composited-indicator > revealer spinner { color: rgba(0, 0, 0, 0.6); text-shadow: 0 1px rgba(255, 255, 255, 0.1); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.1); } /************** * Calculator * **************/ PantheonCalculatorMainWindow { border-radius: 0 0 4px 4px; } PantheonCalculatorMainWindow .window-frame { border-radius: 3px; } /********* * Cards * *********/ .deck { background-color: #bec8da; } .card { background-color: #e5e9f0; border: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 3px 3px rgba(0, 0, 0, 0.2); transition: all 150ms ease-in-out; } .card.collapsed { background-color: #d5dbe7; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.2); } /********* * Noise * *********/ NoiseLibraryWindow { border-radius: 0 0 4px 4px; } NoiseLibraryWindow .action-bar { border-radius: 0 0 4px 4px; } NoiseLibraryWindow .window-frame { border-radius: 3px; } /******** * Snap * ********/ SnapMainWindow .take-button, SnapSnapWindow .take-button { border-radius: 0; } /******************* * Photos/Shotwell * *******************/ DirectWindow .the-button-in-the-combobox, LibraryWindow .the-button-in-the-combobox { background: none; } .checkerboard-layout { background-color: #d8dee9; background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1)), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1)); background-size: 24px 24px; background-position: 0 0, 12px 12px; } .checkboard-layout .item { background-color: #3b4252; } /********* * Avatar * *********/ .avatar { border: 1px solid rgba(0, 0, 0, 0.23); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 0 rgba(255, 255, 255, 0.15), 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.23); } /**level bars**/ .sidebar .source-list.view.level-bar, .sidebar iconview.source-list.level-bar, .sidebar .source-list.view.level-bar:selected, .sidebar iconview.source-list.level-bar:selected, .sidebar .source-list.view.level-bar:selected:focus, .sidebar iconview.source-list.level-bar:selected:focus { background: linear-gradient(to right, #485164, #485164); border: 1px solid rgba(0, 0, 0, 0.14); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); border-radius: 2px; } .sidebar .source-list.view.level-bar.fill-block, .sidebar iconview.source-list.level-bar.fill-block { border: none; } .sidebar .source-list.view.fill-block, .sidebar iconview.source-list.fill-block, .sidebar .source-list.view.fill-block:hover, .sidebar iconview.source-list.fill-block:hover, .sidebar .source-list.view.fill-block:selected, .sidebar iconview.source-list.fill-block:selected, .sidebar .source-list.view.fill-block:selected:focus, .sidebar iconview.source-list.fill-block:selected:focus { background: linear-gradient(to right, #ebcb8b, #ebcb8b); } /************************** * Colors in context menu * **************************/ checkbutton.color-button { border: 1px solid #c5cedd; border-radius: 100px; background-clip: border-box; padding: 0; margin: 2px 1px; } checkbutton.color-button > check { -gtk-icon-source: none; background: none; margin-right: 0; padding: 2px; } checkbutton.color-button.none > check { background-color: transparent; border-radius: 100px; -gtk-icon-source: -gtk-icontheme("close-symbolic"); } radiobutton.color-button > radio { -gtk-icon-source: none; margin-right: 0; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 100px; background-clip: border-box; } radiobutton.color-button:active > radio { border: 1px solid rgba(0, 0, 0, 0.35); } .color-button check, .color-button check:checked, .color-button radio, .color-button radio:checked { background-image: none; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 50%; color: #e5e9f0; -gtk-icon-source: -gtk-icontheme("check-active-symbolic"); } .color-button.red check, .color-button.red radio, .color-button.strawberry check, .color-button.strawberry radio { background-color: @STRAWBERRY_300; -gtk-icon-shadow: 0 1px 1px @STRAWBERRY_500; } .color-button.orange check, .color-button.orange radio { background-color: @ORANGE_300; -gtk-icon-shadow: 0 1px 1px @ORANGE_500; } .color-button.yellow check, .color-button.yellow radio, .color-button.banana check, .color-button.banana radio { background-color: @BANANA_500; -gtk-icon-shadow: 0 1px 1px @BANANA_700; } .color-button.green check, .color-button.green radio, .color-button.lime check, .color-button.lime radio { background-color: @LIME_500; -gtk-icon-shadow: 0 1px 1px @LIME_700; } .color-button.blue check, .color-button.blue radio, .color-button.blueberry check, .color-button.blueberry radio { background-color: @BLUEBERRY_500; -gtk-icon-shadow: 0 1px 1px @BLUEBERRY_700; } .color-button.purple check, .color-button.purple radio, .color-button.grape check, .color-button.grape radio { background-color: @GRAPE_500; -gtk-icon-shadow: 0 1px 1px @GRAPE_700; } .color-button.brown check, .color-button.brown radio, .color-button.cocoa check, .color-button.cocoa radio { background-color: @COCOA_300; -gtk-icon-shadow: 0 1px 1px @COCOA_500; } .color-button.mint check, .color-button.mint radio { background-color: @MINT_500; -gtk-icon-shadow: 0 1px 1px @MINT_700; } .color-button.pink check, .color-button.pink radio, .color-button.bubblegum check, .color-button.bubblegum radio { background-color: @BUBBLEGUM_500; -gtk-icon-shadow: 0 1px 1px @BUBBLEGUM_700; } .color-button.slate check, .color-button.slate radio { background-color: @SLATE_300; -gtk-icon-shadow: 0 1px 1px @SLATE_500; } .color-button.auto radio { background-image: url("assets/color-button-auto.png"); background-position: -1px -1px; background-repeat: no-repeat; background-size: calc(100% + 2px); } .xfce4-panel.panel { background-color: #2e3440; text-shadow: none; -gtk-icon-shadow: none; } #tasklist-button { color: rgba(216, 222, 233, 0.8); border-radius: 0; border: none; background-color: rgba(46, 52, 64, 0); } #tasklist-button:hover { color: #f9fafb; background-color: rgba(0, 0, 0, 0.17); } #tasklist-button:checked { color: white; background-color: rgba(0, 0, 0, 0.25); box-shadow: inset 0 -2px #81a1c1; } .xfce4-panel.panel button.flat:not(.open_group), .mate-panel-menu-bar button:not(#tasklist-button), panel-toplevel.background button:not(#tasklist-button) { color: #d8dee9; border-radius: 0; border: none; background-color: rgba(46, 52, 64, 0); } .xfce4-panel.panel button.flat:hover:not(.open_group), .mate-panel-menu-bar button:hover:not(#tasklist-button), panel-toplevel.background button:hover:not(#tasklist-button) { border: none; background-color: #434c5e; } .xfce4-panel.panel button.flat:active:not(.open_group), .mate-panel-menu-bar button:active:not(#tasklist-button), panel-toplevel.background button:active:not(#tasklist-button), .xfce4-panel.panel button.flat:checked:not(.open_group), .mate-panel-menu-bar button:checked:not(#tasklist-button), panel-toplevel.background button:checked:not(#tasklist-button) { color: #fefefe; border: none; background-color: #81a1c1; } .xfce4-panel.panel button.flat:active:not(.open_group) label, .mate-panel-menu-bar button:active:not(#tasklist-button) label, panel-toplevel.background button:active:not(#tasklist-button) label, .xfce4-panel.panel button.flat:active:not(.open_group) image, .mate-panel-menu-bar button:active:not(#tasklist-button) image, panel-toplevel.background button:active:not(#tasklist-button) image, .xfce4-panel.panel button.flat:checked:not(.open_group) label, .mate-panel-menu-bar button:checked:not(#tasklist-button) label, panel-toplevel.background button:checked:not(#tasklist-button) label, .xfce4-panel.panel button.flat:checked:not(.open_group) image, .mate-panel-menu-bar button:checked:not(#tasklist-button) image, panel-toplevel.background button:checked:not(#tasklist-button) image { color: inherit; } #whiskermenu-window button { background-color: transparent; border: none; border-radius: 0; font-weight: normal; padding: 3px; margin: 1px 2px; } #whiskermenu-window button:hover, #whiskermenu-window button:checked { background-color: #81a1c1; } /* Vala-appmenu-plugin*/ .-vala-panel-appmenu-core scrolledwindow, .-vala-panel-appmenu-private > menuitem, .-vala-panel-appmenu-private > menuitem:first-child > label { color: #d8dee9; } #XfceNotifyWindow { background-color: #2a2f3a; border-radius: 12px; border-width: 1px; border: 1px solid #1f232b; color: #3b4252; padding: 40px; } #XfceNotifyWindow:hover, #XfceNotifyWindow:focus { background-color: #2e3440; } #XfceNotifyWindow label, #XfceNotifyWindow image { color: #d8dee9; } #XfceNotifyWindow button { color: #d8dee9; border-radius: 6px; text-shadow: none; box-shadow: none; border: 1px solid #1f232b; background-color: #343b48; } #XfceNotifyWindow button:hover { color: #3b4252; outline-color: rgba(59, 66, 82, 0.3); background-color: #81a1c1; text-shadow: none; } #XfceNotifyWindow button:hover label { color: #fefefe; } /******** * Unity * *********/ /* Unity window border color */ /* Unity window text color */ /* Backdrop Unity window text color */ /* Unity panel color #454D50 */ UnityDecoration { background-color: #eeeeee; color: #31363D; } UnityDecoration .top { padding: 0 5px 0 5px; border-radius: 4px 4px 0px 0px; box-shadow: none; border: 1px solid #eeeeee; border-bottom-width: 0; background-color: #eeeeee; color: #31363D; border-top: 1px solid rgba(255, 255, 255, 0.1); } UnityDecoration .top:backdrop { border-bottom-width: 0; color: #1a1d21; border-top: 1px solid rgba(255, 255, 255, 0.1); } UnityDecoration .top .menuitem { color: #31363D; } UnityDecoration .top .menuitem:backdrop { color: #1a1d21; } UnityDecoration.left, UnityDecoration.right { background-repeat: repeat-x; background-color: #ececec; background-size: 1px 120px; background-clip: border-box; background-image: linear-gradient(to bottom, #eeeeee, #ececec); } UnityDecoration.bottom { background-size: 1px; background-repeat: repeat-x; background-color: #ececec; } UnityDecoration.left:backdrop, UnityDecoration.right:backdrop, UnityDecoration.bottom:backdrop { background-size: 1px; background-repeat: repeat-x; } /************** * Unity Panel * ***************/ UnityPanelWidget, .unity-panel { background-color: #d5d5d5; color: #31363D; } UnityPanelWidget:backdrop, .unity-panel:backdrop { color: #1a1d21; } .unity-panel.menuitem, .unity-panel .menuitem { border-width: 0 1px; color: #31363D; } .unity-panel.menubar, .unity-panel .menubar { color: #31363D; } .unity-panel.menu.menubar, .unity-panel .menu .menubar { background-color: #d5d5d5; color: #31363D; } .unity-panel.menubar:backdrop, .unity-panel .menubar *:backdrop { color: #8a909e; } .unity-panel.menubar.menuitem, .unity-panel.menubar .menuitem { padding: 3px 5px; border-width: 1px; border-style: solid; border: none; background: none; color: #31363D; box-shadow: none; } .unity-panel.menubar.menuitem:hover, .unity-panel.menubar .menuitem:hover { border-radius: 0; background-color: #ebebeb; color: #31363D; box-shadow: none; } .unity-panel.menubar .menuitem *:hover { color: white; box-shadow: none; } .unity-panel.menubar .menuitem.separator, .unity-panel.menubar.menuitem.separator { border: none; color: #c5cedd; } /* Force Quit */ SheetStyleDialog.unity-force-quit { background-color: #e5e9f0; } @keyframes playbackmenuitem_spinner { to { -gtk-icon-transform: rotate(1turn); } } .menu IdoPlaybackMenuItem.menuitem:active { -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); animation: playbackmenuitem_spinner 1s infinite linear; color: #81a1c1; } .mate-panel-menu-bar, .mate-panel-menu-bar menubar, panel-toplevel.background, panel-toplevel.background menubar { background-color: #2e3440; } .mate-panel-menu-bar menubar, .mate-panel-menu-bar #PanelApplet label, .mate-panel-menu-bar #PanelApplet image, panel-toplevel.background menubar, panel-toplevel.background #PanelApplet label, panel-toplevel.background #PanelApplet image { color: #d8dee9; } .mate-panel-menu-bar button label, .mate-panel-menu-bar button image, .mate-panel-menu-bar #tasklist-button label, .mate-panel-menu-bar #tasklist-button image, panel-toplevel.background button label, panel-toplevel.background button image, panel-toplevel.background #tasklist-button label, panel-toplevel.background #tasklist-button image { color: inherit; } .mate-panel-menu-bar .wnck-pager, panel-toplevel.background .wnck-pager { color: #6c6f75; background-color: #282d37; } .mate-panel-menu-bar .wnck-pager:hover, panel-toplevel.background .wnck-pager:hover { background-color: #39404f; } .mate-panel-menu-bar .wnck-pager:selected, panel-toplevel.background .wnck-pager:selected { color: #c5d4e3; background-color: #81a1c1; } MsdOsdWindow.background.osd { border-radius: 2px; border: 1px solid #c5cedd; } MsdOsdWindow.background.osd .progressbar { background-color: #81a1c1; border: none; border-color: #81a1c1; border-radius: 5px; } MsdOsdWindow.background.osd .trough { background-color: rgba(29, 33, 40, 0.93); border: none; border-radius: 5px; } /*********************** * App-Specific Styles * ***********************/ /********* * Geary * *********/ .geary-titlebar-left .separator, .geary-titlebar-right .separator { opacity: 0; } ConversationListView .view:active, ConversationListView iconview:active, ConversationListView .view:selected, ConversationListView iconview:selected { background-color: #81a1c1; color: #fefefe; } ConversationListView .view:active:backdrop, ConversationListView iconview:active:backdrop, ConversationListView .view:selected:backdrop, ConversationListView iconview:selected:backdrop { background-color: rgba(129, 161, 193, 0.6); color: #fefefe; } ConversationListView .view .cell, ConversationListView iconview .cell { border: solid rgba(0, 0, 0, 0.2); border-width: 0 0 1px 0; } ConversationListView .view .cell:selected, ConversationListView iconview .cell:selected { color: #fefefe; border: 0px solid #5f88b0; } /*********** * LightDm * ***********/ #panel_window { background-color: #2e3440; color: #d8dee9; font-weight: bold; box-shadow: inset 0 -1px #1f232b; } #panel_window .menubar, #panel_window .menubar > .menuitem menubar, #panel_window menubar > menuitem { background-color: transparent; color: #d8dee9; font-weight: bold; } #panel_window .menubar .menuitem:disabled, #panel_window menubar menuitem:disabled { color: rgba(216, 222, 233, 0.5); } #panel_window .menubar .menuitem:disabled GtkLabel, #panel_window menubar menuitem:disabled GtkLabel { color: inherit; } #panel_window .menubar .menuitem:disabled label, #panel_window menubar menuitem:disabled label { color: inherit; } #panel_window .menubar .menu > .menuitem, #panel_window menubar menu > menuitem { font-weight: normal; } #login_window, #shutdown_dialog, #restart_dialog { font-weight: normal; border-style: none; background-color: transparent; color: #3b4252; } #content_frame { padding-bottom: 14px; background-color: #d8dee9; border-top-left-radius: 2px; border-top-right-radius: 2px; border: solid rgba(0, 0, 0, 0.1); border-width: 1px 1px 0 1px; } #content_frame button { font-weight: normal; color: #3b4252; background-color: #e3e7ef; text-shadow: none; } #content_frame button:hover { color: #3b4252; outline-color: rgba(59, 66, 82, 0.3); background-color: #e5e9f0; text-shadow: none; } #content_frame button:active, #content_frame button:checked { color: #3b4252; outline-color: rgba(59, 66, 82, 0.3); background-color: #81a1c1; text-shadow: none; } #content_frame button:disabled { color: #5c6371; outline-color: rgba(59, 66, 82, 0.3); background-color: #dde2ec; text-shadow: none; } #buttonbox_frame { padding-top: 20px; padding-bottom: 0px; border-style: none; background-color: rgba(40, 45, 55, 0.93); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border: solid rgba(0, 0, 0, 0.1); border-width: 0 1px 1px 1px; } #buttonbox_frame button { color: #d8dee9; border-color: #1f232b; background-color: rgba(40, 45, 55, 0.93); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } #buttonbox_frame button:hover { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(65, 74, 91, 0.93), rgba(65, 74, 91, 0.93)); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(216, 222, 233, 0.3); } #buttonbox_frame button:active, #buttonbox_frame button:checked { color: white; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(52, 59, 73, 0.93), rgba(52, 59, 73, 0.93)); background-clip: padding-box; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(216, 222, 233, 0.3); } #buttonbox_frame button:disabled { color: #808690; border-color: #1f232b; background-image: linear-gradient(to bottom, rgba(58, 63, 73, 0.5), rgba(58, 63, 73, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } #login_window #user_combobox { color: #3b4252; font-size: 13px; } #login_window #user_combobox .menu, #login_window #user_combobox menu { font-weight: normal; } #user_image { padding: 3px; border-radius: 2px; } #greeter_infobar { border-bottom-width: 0; font-weight: bold; } .nemo-window .places-treeview .view.cell:hover, .nemo-window .places-treeview iconview.cell:hover, .nemo-window .places-treeview iconview.cell:hover { background: rgba(33, 38, 46, 0.7); } .nemo-window .places-treeview .view.cell:selected, .nemo-window .places-treeview iconview.cell:selected, .nemo-window .places-treeview iconview.cell:selected { background: #81a1c1; color: #fefefe; } .nemo-window .sidebar { background-color: #282d37; } .nemo-window .sidebar .view, .nemo-window .sidebar iconview, .nemo-window .sidebar .iconview, .nemo-window .sidebar row { color: #98abb2; background-color: transparent; } .nemo-window .nemo-window-pane widget.entry { background-clip: padding-box; min-height: 28px; padding: 5px; color: #3b4252; border: 1px solid #c5cedd; border-radius: 3px; box-shadow: inset 0 1px rgba(0, 0, 0, 0.9), inset 1px 0 rgba(0, 0, 0, 0.96), inset -1px 0 rgba(0, 0, 0, 0.96), inset 0 -1px rgba(0, 0, 0, 0.98), 0 1px rgba(255, 255, 255, 0.6); } .nemo-window .nemo-window-pane widget.entry:selected { background-color: #81a1c1; color: #fefefe; } .nemo-window toolbar.primary-toolbar { margin-bottom: -1px; background: #2b313c; } .nemo-window toolbar.primary-toolbar button { color: #d8dee9; border-radius: 6px; text-shadow: none; box-shadow: none; border: 1px solid #1f232b; background-color: #343b48; min-height: 24px; padding: 3px; } .nemo-window toolbar.primary-toolbar button:hover { color: #fefefe; text-shadow: none; background-color: rgba(129, 161, 193, 0.8); border-color: #1f232b; } .nemo-window toolbar.primary-toolbar button:selected, .nemo-window toolbar.primary-toolbar button:active, .nemo-window toolbar.primary-toolbar button:checked { color: #fefefe; outline-color: rgba(254, 254, 254, 0.3); background-color: #81a1c1; text-shadow: none; } .nemo-window toolbar.primary-toolbar button:selected:backdrop, .nemo-window toolbar.primary-toolbar button:active:backdrop, .nemo-window toolbar.primary-toolbar button:checked:backdrop { color: #fefefe; background-color: rgba(129, 161, 193, 0.6); border-color: #1f232b; text-shadow: none; box-shadow: none; } .nemo-window toolbar.primary-toolbar button:backdrop, .nemo-window toolbar.primary-toolbar button:disabled, .nemo-window toolbar.primary-toolbar button:backdrop:disabled { color: rgba(216, 222, 233, 0.2); background-color: #2e3440; border-color: #1f232b; text-shadow: none; box-shadow: none; } .nemo-window .nemo-inactive-pane .view, .nemo-window .nemo-inactive-pane iconview, .nemo-window .nemo-inactive-pane iconview { background-color: #dbe1ea; } /* thunar */ .thunar toolbar { background-color: #2b313c; } .thunar toolbar .flat { color: #d8dee9; } /* buttons in toolbar */ .thunar toolbar.horizontal button image { -gtk-icon-transform: scale(0.72); } scrolledwindow.sidebar treeview.view { background: #232831; padding: 1.5px; } /* path-bar of thunar */ window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar .path-bar-button, .thunar toolbar .path-bar-button { color: #d8dee9; border-radius: 6px; text-shadow: none; box-shadow: none; border: 1px solid #1f232b; background-color: #343b48; border-radius: 0; border-right: 0.5px solid #1f232b; box-shadow: none; min-height: 20px; padding: 3px 4px; } window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar .path-bar-button:first-child, .thunar toolbar .path-bar-button:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar .path-bar-button:last-child, .thunar toolbar .path-bar-button:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-right-style: solid; } window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar .path-bar-button:only-child, .thunar toolbar .path-bar-button:only-child { border-radius: 4px; border-style: solid; } window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar .path-bar-button:hover, .thunar toolbar .path-bar-button:hover { color: #81a1c1; } window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar .path-bar-button:checked, .thunar toolbar .path-bar-button:checked { color: #fff; outline-color: rgba(255, 255, 255, 0.3); background-color: rgba(129, 161, 193, 0.7); text-shadow: none; } window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar .toggle.path-bar-button:hover, .thunar toolbar .toggle.path-bar-button:hover { color: #fff; outline-color: rgba(255, 255, 255, 0.3); background-color: rgba(129, 161, 193, 0.7); text-shadow: none; } /* thunar sidepane */ window.thunar paned > scrolledwindow treeview.view { color: #98abb2; } window.thunar paned > scrolledwindow treeview.view:hover, window.thunar paned > scrolledwindow treeview.view:selected { background: #81a1c1; color: #fefefe; border-radius: 0; box-shadow: none; } .colorpad { color: @colorpad_fg_color; } .colorpad, .colorpad:backdrop, .colorpad:hover, .colorpad:hover:backdrop, .colorpad:active, .colorpad:active:backdrop, .colorpad:checked, .colorpad:checked:backdrop { background-color: @colorpad_color; } .colorpad:hover { filter: brightness(93%); } .colorpad:active { filter: brightness(86%); } .colorpad:checked { filter: brightness(100%); box-shadow: 0px 0px 0px 1.5px #81a1c1, inset 0px -3px 0px 0px @colorpad_fg_color; } .colorsetter { color: @colorsetter_fg_color; } .colorsetter, .colorsetter:backdrop, .colorsetter:hover, .colorsetter:hover:backdrop, .colorsetter:active, .colorsetter:active:backdrop, .colorsetter:checked, .colorsetter:checked:backdrop { background-color: @colorsetter_color; } .colorsetter:hover { filter: brightness(93%); } .colorsetter:active { filter: brightness(86%); } .colorsetter:checked { filter: brightness(100%); } .overlay_toolbar, .overlay_toolbar_scrollable { background: #f5f7f9; padding: 10px; } /*# sourceMappingURL=gtk.css.map */ ================================================ FILE: gtk-4.0/gtk.scss ================================================ $variant: 'light'; @import '../gtk-3.0/nord'; @import '../gtk-3.0/colors'; @import '../gtk-3.0/elementary-colors'; @import '../gtk-3.0/colors-public'; @import 'drawing'; @import 'common'; @import 'widgets'; @import 'apps'; ================================================ FILE: gtk-4.0/widgets/_action-bars.scss ================================================ /*************** * Action bars * ***************/ .action-bar, actionbar > revealer > box { background-color: darken($base_color, 10%); border: solid $borders_color; border-width: 1px 0 0 0; color: $fg_color; box-shadow: none; &:backdrop { background-color: darken($backdrop_bg_color, 10%); box-shadow: none; } &:first-child { border-radius: 6px 6px 0px 0px; border-width: 1px 1px 0px 1px; } &:last-child { border-radius: 0 0 6px 6px; border-width: 0px 1px 1px 1px; } } ================================================ FILE: gtk-4.0/widgets/_app-notifications.scss ================================================ /********************* * App Notifications * *********************/ .app-notification, .app-notification.frame { @extend %osd; padding: 10px; border-radius: 0 0 5px 5px; background-color: $osd_bg_color; background-image: linear-gradient(to bottom, transparentize(black, 0.8), transparent 2px); background-clip: padding-box; &:backdrop { background-image: none; transition: $backdrop_transition; } button { @extend %osd_button; } border { border: none; } } toast { padding: 5px; background-color: $base_color; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.35); color: $fg_color; &:backdrop { background-image: none; transition: $backdrop_transition; } button { padding: 2px; } //close button button.circular.flat.image-button { padding: 2px; &:hover { @include button(hover, $red, $selected_fg_color); } } } ================================================ FILE: gtk-4.0/widgets/_base-states.scss ================================================ /*************** * Base States * ***************/ .background { color: $fg_color; background-color: $bg_color; &:backdrop { color: $backdrop_fg_color; background-color: $backdrop_bg_color; text-shadow: none; -gtk-icon-shadow: none; } } /* These wildcard seems unavoidable, need to investigate. Wildcards are bad and troublesome, use them with care, or better, just don't. Everytime a wildcard is used a kitten dies, painfully. */ .gtkstyle-fallback { color: $fg_color; background-color: $bg_color; &:hover { color: $fg_color; background-color: lighten($bg_color, 10%); } &:active { color: $fg_color; background-color: darken($bg_color, 10%); } &:disabled { color: $insensitive_fg_color; background-color: $insensitive_bg_color; } &:selected { color: $selected_fg_color; background-color: $selected_bg_color; } } .history-view, .view, %view { color: $text_color; background-color: $base_color; &:backdrop { color: $backdrop_text_color; background-color: $backdrop_base_color; } &:selected { &:focus, & { @extend %selected_items; border-radius: 3px; } } } textview { > text { @extend %view; background-color: transparent; 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: 3px; &:selected { @extend %selected_items; outline-offset: -2px; } } } // Nautilus grid view gridview { padding: 10px; > child { padding: 7px; box { //cells border-spacing: 5px; //label separation } } } label { caret-color: currentColor; // this shouldn't be needed. &.separator { @extend .dim-label; color: $fg_color; &:backdrop { color: $backdrop_fg_color; } } row:selected &, &:selected { @extend %nobg_selected_items; } selection { background-color: $selected_bg_color; color: $selected_fg_color; } &:disabled { color: $insensitive_fg_color; selection { @extend %selected_items:disabled; } &:backdrop { color: $backdrop_insensitive_color; } } &:backdrop { color: $backdrop_fg_color; selection { @extend %selected_items:backdrop; } } } .dim-label { opacity: 0.55; text-shadow: none; } window.assistant { .sidebar { background-color: $base_color; border-top: 1px solid $borders_color; &:backdrop { background-color: $backdrop_base_color; border-color: $backdrop_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; } } window.aboutdialog image.large-icons { -gtk-icon-size: 128px; } %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); text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; &:backdrop { text-shadow: none; -gtk-icon-shadow: none; } } ================================================ FILE: gtk-4.0/widgets/_buttons.scss ================================================ /*********** * Buttons * ***********/ // stuff for .needs-attention $_dot_color: if($variant=='light', $selected_bg_color, lighten($selected_bg_color,15%)); @keyframes needs_attention { from { background-image: radial-gradient(farthest-side, $_dot_color 0%, transparentize($_dot_color, 1) 0%); } to { background-image: radial-gradient(farthest-side, $_dot_color 95%, transparentize($_dot_color, 1)); } } %button, button { @at-root %button_basic, & { min-height: 22px; min-width: 16px; padding: 4px 6px; border: 1px solid $borders_color; border-radius: 6px; transition: $button_transition; @include button(normal); &.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: 500ms; @include button(hover,$selected_bg_color,$selected_fg_color); &:active { transition: $button_transition; } } } &:hover { @include button(hover,$selected_bg_color,$selected_fg_color); -gtk-icon-filter: brightness(1.2); } &:active, &:checked { @include button(active,darken($selected_bg_color,5%),$selected_fg_color); transition-duration: 50ms; } &:backdrop { &.flat, & { @include button(backdrop); transition: $backdrop_transition; -gtk-icon-filter: none; &:active, &:checked { @include button(backdrop-active); } &:disabled { @include button(backdrop-insensitive); &:active, &:checked { @include button(backdrop-insensitive-active); } } } } &.flat { &:backdrop, &:disabled, &:backdrop:disabled { @include button(undecorated); }} &:disabled { @include button(insensitive); &:active, &:checked { @include button(insensitive-active); } } &.image-button { min-width: 24px; padding-left: 4px; padding-right: 4px; } &.image-button.circular,&.image-button.sidebar-button{ padding: 6px 4px; border-radius: 50px; box-shadow: none; } &.text-button { padding-left: 16px; padding-right: 16px; } &.text-button.image-button { padding-left: 8px; padding-right: 8px; border-radius: 6px; label { padding-left: 8px; padding-right: 8px; } } &:drop(active) { color: $drop_target_color; border-color: $drop_target_color; box-shadow: inset 0 0 0 1px $drop_target_color; } } @at-root %button_selected, & { row:selected & { @if $variant == 'light' { border-color: $selected_borders_color; } &.flat:not(:active):not(:checked):not(:hover):not(disabled) { color: $selected_fg_color; border-color: transparent; &:backdrop { color: if($variant=='light', $backdrop_base_color, $backdrop_fg_color); } } } } // big standalone buttons like in Documents pager &.osd { min-width: 24px; min-height: 20px; &.image-button { min-width: 32px; } color: $osd_fg_color; border-radius: 6px; outline-color: transparentize($osd_fg_color, 0.7); //FIXME: define a color var? @include button(osd); border: none; box-shadow: none; &:hover { @include button(osd-hover); border: none; box-shadow: none; } &:active, &:checked { @include button(osd-active); border: none; box-shadow: none; } &:disabled { &:backdrop, & { @include button(osd-insensitive); border: none; } } &:backdrop { @include button(osd-backdrop); border: none; } } //overlay / OSD style @at-root %osd_button, .osd & { @include button(osd); &:hover { @include button(osd-hover); } &:active, &:checked { &:backdrop, & { @include button(osd-active); }} &:disabled { &:backdrop, & { @include button(osd-insensitive); }} &:backdrop { @include button(osd-backdrop); } &.flat { @include button(osd); box-shadow: none; //FIXME respect no edge on the button mixin text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; &:hover { @include button(osd-hover); } &:disabled { @include button(osd-insensitive); background-image: none; border-color: transparent; box-shadow: none; } &:backdrop { @include button(osd-backdrop); } &:active, &:checked { @include button(osd-active); } } } // Suggested and Destructive Action buttons @each $b_type, $b_color in (suggested-action, $cyan), (destructive-action, $destructive_color) { &.#{$b_type} { border: none; @if $b_type == suggested-action { @include button(rounded, $b_color, white); } @else { @include button(rounded-red, $b_color, white); } &.flat { // @include button(undecorated); @include button(rounded, $b_color, white); //color: $b_color; //FIXME: does it work on the dark variant? } &:hover { @include button(hover, $b_color, white); opacity: 0.85; } &:active, &:checked { @include button(active, $b_color, white); } &:backdrop, &.flat:backdrop { @include button(backdrop, $b_color, white); label { color: transparentize(white, 0.5);} &:active, &:checked { @include button(backdrop-active, $b_color, white); } &:disabled { @include button(backdrop-insensitive, $b_color, white); label { color: transparentize(white, 0.5);} &:active, &:checked { @include button(backdrop-insensitive-active, $b_color, white); } } } &.flat { &:backdrop, &:disabled, &:backdrop:disabled { @include button(undecorated); color: transparentize($b_color, 0.2); } } &:disabled { @include button(insensitive, $b_color, white); opacity: 0.75; &:active, &:checked { @include button(insensitive-active, $b_color, white); } } .osd & { @include button(osd, $b_color); &:hover { @include button(osd-hover, $b_color); } &:active, &:checked { &:backdrop, & { @include button(osd-active, $b_color); }} &:disabled { &:backdrop, & { @include button(osd-insensitive, $b_color); }} &:backdrop { @include button(osd-backdrop, $b_color); } } } } .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 overriden by GtkRadioButton outline-offset > label { padding-left: 6px; // label padding padding-right: 6px; // } > image { padding-left: 6px; // image padding padding-right: 6px; // padding-top: 3px; // padding-bottom: 3px; // } &.text-button { // compensate text-button paddings padding-left: 10px; padding-right: 10px; } &.image-button { // we want image buttons to have a 1:1 aspect ratio, so compensation // of the padding added to the GtkImage is needed padding-left: 2px; padding-right: 2px; } &.needs-attention { > label, > image { @extend %needs_attention; } &:active, &:checked { > label, > image { animation: none; background-image: none; } } } } //inline-toolbar buttons .inline-toolbar &, .inline-toolbar &:backdrop { border-radius: 6px; border-width: 1px; @extend %linked; } .primary-toolbar &, .primary-toolbar .raised & { // tango icons don't need shadows -gtk-icon-shadow: none; &:hover, &:focus { @include button(hover,$selected_bg_color,$selected_fg_color); } } .linked > &, .linked > &:hover, .linked > &:active, .linked > &:checked, .linked > &:backdrop { @extend %linked; } .linked.vertical > &, .linked.vertical > &:hover, .linked.vertical > &:active, .linked.vertical > &:checked, .linked.vertical > &:backdrop { @extend %linked_vertical; } } %needs_attention { animation: needs_attention 150ms ease-in; $_dot_shadow: _text_shadow_color(); $_dot_shadow_r: if($variant=='light',0.5,0.45); background-image: radial-gradient(farthest-side, $_dot_color 96%, transparentize($_dot_color,1 )); 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; } &:backdrop { background-size: 6px 6px, 0 0;} &:dir(rtl) { @if $variant == 'light' { background-position: left 3px, left 4px; } @else { background-position: left 3px, left 2px; } } } /* oldstyle toolbar buttons */ .toolbar > button, .toolbar > :not(.linked) > button, .toolbar :not(.linked) > menubutton > button, .toolbar :not(.linked) > scalebutton > button, .toolbar :not(.linked) > dropdown > button, .toolbar :not(.linked) > colorbutton > button, .toolbar :not(.linked) > fontbutton > button, .toolbar :not(.linked) > appchooserbutton > button, .toolbar :not(.linked) > combobox > box > button { margin: 1px; @include button(undecorated); &:hover, &:active, &:checked { @include button(hover, $c:darken($bg_color, 10%)); } &:disabled { opacity: 0.5; } } %linked_middle { border: 1px solid $borders_color; border-radius: 0; border-right-style: none; box-shadow: none; &:disabled { @include button(insensitive, $base_color, $text_color); color: $insensitive_fg_color; } } %linked { @extend %linked_middle; &:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } &:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; border-right-style: solid; } &:only-child { border-radius: 6px; border-style: solid; } } %linked_vertical_middle { border-style: solid solid none solid; border-radius: 0; } %linked_vertical{ @extend %linked_vertical_middle; &:first-child { border-top-left-radius: 6px; border-top-right-radius: 6px; } &:last-child { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-style: solid; } &:only-child { border-radius: 6px; border-style: solid; } } %undecorated_button { background-color: transparent; background-image: none; border-color: transparent; box-shadow: inset 0 1px transparentize(white,1), 0 1px transparentize(white, 1); text-shadow: none; -gtk-icon-shadow: none; } /* menu buttons */ modelbutton.flat, .menuitem.button.flat { min-height: 26px; padding-left: 5px; padding-right: 5px; border-radius: 6px; outline-offset: -2px; @extend %undecorated_button; &:hover { background-color: $popover_hover_color; } &:selected { @extend %selected_items; } &:backdrop, &:backdrop:hover { @extend %undecorated_button; } // FIXME: remove the following when the checks/radios rewrite lands check:last-child, radio:last-child { margin-left: 8px; } check:first-child, radio:first-child { margin-right: 8px; } } modelbutton.flat arrow { background: none; &:hover { background: none; } &.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } &.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } } button.color { padding: 4px; colorswatch:only-child { &, overlay { border-radius: 0; } @if $variant == 'light' { box-shadow: none; &:disabled, &:backdrop { box-shadow: none; } } } } notebook, list, .view, popover { button { box-shadow: none; &:backdrop { box-shadow: none; } } .linked > button { box-shadow: none; } } // Gnome 48 toggle groups (screens config) toggle-group{ padding: 3px; toggle{ &:checked { background-color: $selected_bg_color; &, label { color: $selected_fg_color; } } padding: 0 4px; } } /* * Gnome 48 accent color buttons * Gnome papers - buttons in context menu */ button.accent-button, button.color-button { &, &:backdrop { min-height: 24px; min-width: 24px; padding: 3px; border-radius: 100%; background: var(--accent-bg-color); outline: none; background-clip: content-box; box-shadow: none; border: none; } &:hover { box-shadow: 0 0 0 3px darken($base_color, 5%); background-color: var(--accent-bg-color); } &:checked { &, &:backdrop { box-shadow: 0 0 0 3px var(--accent-bg-color); background-color: var(--accent-bg-color); } } } ================================================ FILE: gtk-4.0/widgets/_calendar.scss ================================================ /************ * Calendar * ***********/ calendar { color: $text_color; border: 1px solid $borders_color; font-feature-settings: "tnum"; > header { border-bottom: 1px solid $borders_color; > button { border: none; box-shadow: none; background: none; border-radius: 0; } > button:backdrop { background: none; } } > grid { > label.day-name { } > label.week-number { } > label.today { box-shadow: inset 0px -2px $selected_bg_color; &:selected { box-shadow: none; } } > label:focus { outline-color: $selected_bg_color; outline-offset: -2px; outline-width: 2px; outline-style: solid; } > label.day-number { padding: 4px; &:selected{ @extend %selected_items; border-radius: 3px; } &:checked { background-color: gtkalpha($selected_bg_color, 0.3); } } > label.day-number.other-month { color: gtkalpha(currentColor, 0.3); } } } ================================================ FILE: gtk-4.0/widgets/_checks-radios.scss ================================================ /************************* * Check and Radio Items * *************************/ // draw regular check and radio items using our PNG assets // all assets are rendered from assets.svg. never add pngs directly // unchecked @each $s,$un in ('','-unchecked'), (':hover', '-unchecked-hover'), (':active', '-unchecked-active'), (':backdrop', '-unchecked-backdrop'), (':disabled', '-unchecked-insensitive'), (':disabled:backdrop', '-unchecked-insensitive') { check#{$s}{ -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/checkbox#{$un}.png"),url("../assets/checkbox#{$un}@2.png")), -gtk-scaled(url("../assets/checkbox#{$un}-dark.png"),url("../assets/checkbox#{$un}@2.png"))); -gtk-icon-shadow: none; } radio#{$s}{ -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/radio#{$un}.png"),url("../assets/radio#{$un}@2.png")), -gtk-scaled(url("../assets/radio#{$un}-dark.png"),url("../assets/radio#{$un}@2.png"))); -gtk-icon-shadow: none; } } // checked @each $s,$ch in (':checked', '-checked'), (':checked:hover', '-checked-hover'), (':checked:active', '-checked-active'), (':checked:backdrop', '-checked-backdrop'), (':checked:disabled', '-checked-insensitive'), (':checked:disabled:backdrop', '-checked-insensitive') { check#{$s}{ -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/checkbox#{$ch}.png"),url("../assets/checkbox#{$ch}@2.png")), -gtk-scaled(url("../assets/checkbox#{$ch}-dark.png"),url("../assets/checkbox#{$ch}@2.png"))); -gtk-icon-shadow: none; } radio#{$s}{ -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/radio#{$ch}.png"),url("../assets/radio#{$ch}@2.png")), -gtk-scaled(url("../assets/radio#{$ch}-dark.png"),url("../assets/radio#{$ch}@2.png"))); -gtk-icon-shadow: none; background: none; } } // mixed @each $s,$mx in (':indeterminate', '-mixed'), (':indeterminate:hover', '-mixed-hover'), (':indeterminate:active', '-mixed-active'), (':indeterminate:backdrop', '-mixed-backdrop'), (':indeterminate:disabled', '-mixed-insensitive'), (':indeterminate:disabled:backdrop', '-mixed-insensitive') { check#{$s}{ -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/checkbox#{$mx}.png"),url("../assets/checkbox#{$mx}@2.png")), -gtk-scaled(url("../assets/checkbox#{$mx}.png"),url("../assets/checkbox#{$mx}@2.png"))); -gtk-icon-shadow: none; } radio#{$s}{ -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/radio#{$mx}.png"),url("../assets/radio#{$mx}@2.png")), -gtk-scaled(url("../assets/radio#{$mx}.png"),url("../assets/radio#{$mx}@2.png"))); -gtk-icon-shadow: none; } } // unchecked:selected @each $s,$un in (':selected','-unchecked'), (':hover:selected', '-unchecked'), (':active:selected', '-unchecked'), (':backdrop:selected', '-unchecked'), (':disabled:selected', '-unchecked'), (':disabled:backdrop:selected', '-unchecked') { check#{$s}{ -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/checkbox#{$un}.png"),url("../assets/checkbox#{$un}@2.png")), -gtk-scaled(url("../assets/checkbox#{$un}-dark.png"),url("../assets/checkbox#{$un}@2.png"))); -gtk-icon-shadow: none; } radio#{$s}{ -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/selected-radio#{$un}.png"),url("../assets/selected-radio#{$un}@2.png")), -gtk-scaled(url("../assets/selected-radio#{$un}-dark.png"),url("../assets/selected-radio#{$un}@2.png"))); -gtk-icon-shadow: none; } } // checked:selected @each $s,$ch in (':checked:selected', '-checked'), (':checked:hover:selected', '-checked'), (':checked:active:selected', '-checked'), (':checked:backdrop:selected', '-checked'), (':checked:disabled:selected', '-checked'), (':checked:disabled:backdrop:selected', '-checked') { check#{$s}{ -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/checkbox#{$ch}.png"),url("../assets/checkbox#{$ch}@2.png")), -gtk-scaled(url("../assets/checkbox#{$ch}-dark.png"),url("../assets/checkbox#{$ch}@2.png"))); -gtk-icon-shadow: none; } radio#{$s}{ -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/selected-radio#{$ch}.png"),url("../assets/selected-radio#{$ch}@2.png")), -gtk-scaled(url("../assets/selected-radio#{$ch}-dark.png"),url("../assets/selected-radio#{$ch}@2.png"))); -gtk-icon-shadow: none; } } // mixed:selected @each $s,$mx in (':indeterminate:selected', '-mixed'), (':indeterminate:hover:selected', '-mixed'), (':indeterminate:active:selected', '-mixed'), (':indeterminate:backdrop:selected', '-mixed'), (':indeterminate:disabled:selected', '-mixed'), (':indeterminate:disabled:backdrop:selected', '-mixed') { check#{$s}{ -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/selected-checkbox#{$mx}.png"),url("../assets/selected-checkbox#{$mx}@2.png")), -gtk-scaled(url("../assets/selected-checkbox#{$mx}.png"),url("../assets/selected-checkbox#{$mx}@2.png"))); -gtk-icon-shadow: none; } radio#{$s}{ -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/selected-radio#{$mx}.png"),url("../assets/selected-radio#{$mx}@2.png")), -gtk-scaled(url("../assets/selected-radio#{$mx}.png"),url("../assets/selected-radio#{$mx}@2.png"))); -gtk-icon-shadow: none; } } // selection-mode unchecked @each $s,$un in ('','-unchecked'), (':hover', '-unchecked-hover'), (':active', '-unchecked-active'), (':backdrop', '-unchecked-backdrop'), (':disabled', '-unchecked-insensitive'), (':disabled:backdrop', '-unchecked-backdrop-insensitive') { .view.content-view check#{$s}, .view.content-view.check#{$s}{ -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox#{$un}.png"),url("../assets/checkbox#{$un}@2.png")); -gtk-icon-shadow: none; } .view.content-view radio#{$s}, .view.content-view.radio#{$s}{ -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio#{$un}.png"),url("../assets/radio#{$un}@2.png")); -gtk-icon-shadow: none; } } checkbutton.text-button, radiobutton.text-button { // this is for a nice focus on check and radios text padding: 2px 0; outline-offset: 0; label:not(:only-child) { &:first-child { margin-left: 4px; } &:last-child { margin-right: 4px; } } } check, radio { margin: 0 4px; min-height: 16px; min-width: 16px; border: none; menu menuitem & { margin: 0; // this is a workaround for a menu check/radio size allocation issue &, &:hover, &:disabled { //FIXME use button reset mixin min-height: 14px; min-width: 14px; background-image: none; background-color: transparent; box-shadow: none; -gtk-icon-shadow: none; color: inherit; border-color: currentColor; animation: none; } } } ================================================ FILE: gtk-4.0/widgets/_color-chooser.scss ================================================ /***************** * Color Chooser * *****************/ colorswatch { // This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one // is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is // applied to the overlay box. &, &:drop(active) { border-style: none; } // FIXME: implement a proper drop(active) state $_colorswatch_radius: 5px; $_colorswatch_overlay_shadow: if($variant == 'light', inset 0 2px 2px -3px transparentize(black, 0.3), inset 0 3px 2px -2px transparentize(black, 0.5)); // base color corners rounding // to avoid the artifacts caused by rounded corner anti-aliasing the base color // sports a bigger radius. // nth-child is needed by the custom color strip. &.top { border-top-left-radius: $_colorswatch_radius + 0.5px; border-top-right-radius: $_colorswatch_radius + 0.5px; 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.5px; 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: $selected_fg_color; &:hover { border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color); } &:backdrop { color: $backdrop_selected_fg_color; } } &.light overlay { color: $text_color; &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color); } &:backdrop { color: $backdrop_text_color; } } &:drop(active) { box-shadow: none; &.light overlay { border-color: $drop_target_color; box-shadow: inset 0 0 0 2px if($variant == 'light', darken($drop_target_color, 7%), $borders_color), inset 0 0 0 1px $drop_target_color; } &.dark overlay { border-color: $drop_target_color; box-shadow: inset 0 0 0 2px if($variant == 'light', transparentize(black, 0.7), $borders_color), inset 0 0 0 1px $drop_target_color; } } overlay { box-shadow: $_colorswatch_overlay_shadow; border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color); &:hover { box-shadow: inset 0 1px transparentize(white, 0.7); } &:backdrop, &:backdrop:hover { border-color: if($variant == 'light', transparentize(black, 0.7), $borders_color); box-shadow: none; } } &#add-color-button { border-radius: $_colorswatch_radius $_colorswatch_radius 0 0; &:only-child { border-radius: $_colorswatch_radius; } overlay { @include button(normal); &:hover { @include button(hover); } &:backdrop { @include button(backdrop); } } } &:disabled { opacity: 0.5; overlay { border-color: transparentize(black, 0.4); box-shadow: none; } } row:selected & { box-shadow: 0 0 0 2px $selected_fg_color; } &#editor-color-sample { border-radius: 4px; overlay { border-radius: 4.5px; } } } // colorscale popup colorchooser .popover.osd { border-radius: 5px; } ================================================ FILE: gtk-4.0/widgets/_comboboxes.scss ================================================ /************** * ComboBoxes * **************/ combobox { arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); min-height: 16px; min-width: 16px; } &.linked { button:nth-child(2) { &:dir(ltr) { @extend %linked:last-child; } &:dir(rtl) { @extend %linked:first-child; } } } &:drop(active) { // FIXME: untested box-shadow: none; button.combo { @extend %button_basic:drop(active); } } } .linked > combobox > box > button.combo { // the combo is a composite widget so the way we do button linking 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:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; } .linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; } .linked:not(.vertical) > combobox:only-child > box > button.combo {@extend %linked:only-child; } .linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; } .linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;} .linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; } .linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; } ================================================ FILE: gtk-4.0/widgets/_dialogs.scss ================================================ /*********** * Dialogs * ***********/ messagedialog, .messagedialog, .dialog { // Message Dialog styling background-color: $main_dark_color; .titlebar:not(headerbar) { background-color: transparentize(if($variant=='light', $headerbar_color, $bg_color), 0.05); } .titlebar { min-height: 20px; background-image: none; background-color: transparentize(if($variant=='light', $headerbar_color, $bg_color), 0.05); border-style: none; border-top-left-radius: 4px; border-top-right-radius: 4px; } &.csd { // rounded bottom border styling for csd version &.background { background-color: transparentize(if($variant=='light', $base_color, darken($main_dark_color, 5%)), 0.05); color: $fg_color; // bigger radius for better antialiasing border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } } } .messagedialog .message-area, .messagedialog .response-area, .dialog .dialog-action-area, .alert.floating .response-area, .alert.floating .body-scrolled-window { padding: 26px; } filechooser { .dialog-action-box { border-top: 1px solid $borders_color; &:backdrop { border-top-color: $backdrop_borders_color; } } #pathbarbox { border-bottom: 1px solid $bg_color; } } filechooserbutton:drop(active) { box-shadow: none; border-color: transparent; } ================================================ FILE: gtk-4.0/widgets/_entries.scss ================================================ /**************** * Text Entries * ****************/ %entry, entry { %entry_basic, & { min-height: 28px; padding-left: 8px; padding-right: 8px; border: 1px solid; border-radius: 6px; transition: all 200ms $ease-out-quad; @include entry(normal); image { // icons inside the entry &.left { padding-left: 0; padding-right: 6px; } &.right { padding-left: 6px; padding-right: 0; } } undershoot { &.left { @include undershoot(left); } &.right { @include undershoot(right); } } &.flat { &:focus-within, & { min-height: 0; padding: 2px; background-image: none; border-color: transparent; box-shadow: none; border-radius: 0; } } &:focus-within { @include entry(focus); } &:disabled { @include entry(insensitive); } &:backdrop { @include entry(backdrop); transition: $backdrop_transition; } &:backdrop:disabled { @include entry(backdrop-insensitive); } selection { &:focus, & { @extend %selected_items; }} // entry error and warning style @each $e_type, $e_color in (error, $error_color), (warning, $warning_color) { &.#{$e_type} { @include entry(normal); color: $e_color; border-color: entry_focus_border($e_color); &:focus-within { @include entry(focus, $e_color); } &:selected { &:focus, & { background-color: $e_color; }} } } & image { // entry icons colors color: mix($fg_color, $base_color, 80%); &:hover { color: $fg_color; } &:active { color: $selected_bg_color; } &:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 80%); } } &:drop(active) { &:focus-within, & { border-color: $drop_target_color; box-shadow: inset 0 0 0 1px $drop_target_color; } } .osd & { @include entry(osd); &:focus-within { @include entry(osd-focus); } &:backdrop { @include entry(osd-backdrop); } &:disabled { @include entry(osd-insensitive); } } } progress { margin: 2px -6px; background-color: transparent; background-image: none; border-radius: 0; border-width: 0 0 2px; border-color: $selected_bg_color; border-style: solid; box-shadow: none; &:backdrop { background-color: transparent; } } // linked entries .linked:not(.vertical) > & { @extend %linked; } .linked:not(.vertical) > &:drop(active) + &, .linked:not(.vertical) > &:drop(active) + button, .linked:not(.vertical) > &:drop(active) + menubutton > button, .linked:not(.vertical) > &:drop(active) + dropdown > button, .linked:not(.vertical) > &:drop(active) + colorbutton > button, .linked:not(.vertical) > &:drop(active) + fontbutton > button, .linked:not(.vertical) > &:drop(active) + filechooserbutton > button, .linked:not(.vertical) > &:drop(active) + filechooserbutton > combobox > box > button.combo, .linked:not(.vertical) > &:drop(active) + appchooserbutton > combobox > box > button.combo, .linked:not(.vertical) > &:drop(active) + combobox > box > button.combo { border-left-color: $drop_target_color; } .linked:not(.vertical) > & { &:focus-within { border-color: entry_focus_border(); box-shadow: 0px 0px 1px 1px $selected_bg_color inset; border-right-style: solid; + .popup button { border-left-color: $selected_bg_color; } } + .popup button { border-radius: 0px 6px 6px 0px; } } // Vertically linked entries // FIXME: take care of "colored" entries .linked.vertical > & { @extend %linked_vertical; // brighter border between linked entries &:not(:disabled) + entry:not(:disabled), &:not(:disabled) + %entry:not(:disabled) { border-top-color: mix($borders_color, $base_color, 30%); background-image: linear-gradient(to bottom, $base_color, $base_color); &:backdrop { border-top-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); background-image: linear-gradient(to bottom, $backdrop_base_color, $backdrop_base_color); } } // brighter border between linked insensitive entries &:disabled + %entry:disabled, &:disabled + entry:disabled { border-top-color: mix($borders_color, $base_color, 30%); } // color back the top border of a linked focused entry following another entry and add back the focus shadow. // :not(:only-child) is a specificity bump hack. + %entry:focus:not(:only-child), + entry:focus:not(:only-child) { border-top-color: entry_focus_border(); } + %entry:drop(active):not(:only-child), + entry:drop(active):not(:only-child) { border-top-color: $drop_target_color; } // this takes care of coloring the top border of the focused entry subsequent widget. // :not(:only-child) is a specificity bump hack. &:focus:not(:only-child) { + %entry, + entry, + button, + combobox > box > button.combo { border-top-color: entry_focus_border(); } } &:drop(active):not(:only-child) { + %entry, + entry, + button, + combobox > box > button.combo { border-top-color: $drop_target_color; } } } } treeview entry { &:focus-within { &:dir(rtl), &:dir(ltr) { // specificity bump hack background-color: $base_color; transition-property: color, background; } } &.flat, & { border-radius: 0; background-image: none; background-color: $base_color; &:focus-within { border-color: $selected_bg_color; } } } ================================================ FILE: gtk-4.0/widgets/_expanders.scss ================================================ /************* * Expanders * *************/ expander { 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'); } } ================================================ FILE: gtk-4.0/widgets/_file-chooser.scss ================================================ /**************** * File chooser * ****************/ $_placesidebar_icons_opacity: 0.7; placessidebar { > viewport.frame { border-style: none; } row { // Needs overriding of the GtkListBoxRow padding min-height: 36px; padding: 0px; // Using margins/padding directly in the SidebarRow // will make the animation of the new bookmark row jump > revealer { padding: 0 14px; } &:selected { color: $selected_fg_color; } &:disabled { color: $insensitive_fg_color; } &:backdrop { color: $backdrop_fg_color; &:selected { color: $backdrop_selected_fg_color; } &:disabled { color: $backdrop_insensitive_color; } } image.sidebar-icon { opacity: $_placesidebar_icons_opacity; // dim the device icons &: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 { @extend %button_basic.flat; @extend %button_selected.flat; min-height: 26px; min-width: 26px; margin-top: 3px; margin-bottom: 3px; padding: 0; border-radius: 100%; -gtk-outline-radius: 100%; &:not(:hover):not(:active), &:backdrop { > image { opacity: $_placesidebar_icons_opacity; }} } // in the sidebar case it makes no sense to click the selected row &:selected:active { box-shadow: none; } &.sidebar-placeholder-row { padding: 0 8px; min-height: 2px; background-image: image($drop_target_color); background-clip: content-box; } &.sidebar-new-bookmark-row { color: $selected_bg_color; } &:drop(active):not(:disabled) { color: $drop_target_color; box-shadow: inset 0 1px $drop_target_color, inset 0 -1px $drop_target_color; &:selected { color: $selected_fg_color; background-color: $drop_target_color; } } } } placesview { .server-list-button > image { transition: 200ms $ease-out-quad; -gtk-icon-transform: rotate(0turn); } .server-list-button:checked > image { transition: 200ms $ease-out-quad; -gtk-icon-transform: rotate(-0.5turn); } row.activatable:hover { background-color: transparent; } // this selects the "connect to server" label > actionbar > revealer > box > label { padding-left: 8px; padding-right: 8px; } } ================================================ FILE: gtk-4.0/widgets/_floating-bar.scss ================================================ /**************** * Floating Bar * ****************/ .floating-bar { background-color: $bg_color; border-width: 1px; border-style: solid solid none; border-color: $borders_color; border-radius: 3px 3px 0 0; box-shadow: inset 0 1px $top_highlight; &.bottom { &.left { border-left-style: none; border-top-left-radius: 0; } &.right { border-right-style: none; border-top-right-radius: 0; } } > button { padding:4px; } &:backdrop { background-color: $backdrop_bg_color; border-color: $backdrop_borders_color; } } ================================================ FILE: gtk-4.0/widgets/_frames.scss ================================================ /********** * Frames * **********/ frame > border, .frame { box-shadow: none; margin: 0; padding: 0; border-radius: 0; border: 1px solid $borders_color; &.flat { border-style: none; } &:backdrop { border-color: $backdrop_borders_color; } } actionbar > revealer > box { padding: 6px; border-top: 1px solid $borders_color; &:backdrop { border-color: $backdrop_borders_color; } } scrolledwindow { viewport.frame { // avoid double borders when viewport inside scrolled window border-style: none; } // This is used when content is touch-dragged past boundaries. // draws a box on top of the content, the size changes programmatically. overshoot { &.top { @include overshoot(top); &:backdrop { @include overshoot(top, backdrop); } } &.bottom { @include overshoot(bottom); &:backdrop { @include overshoot(bottom, backdrop); } } &.left { @include overshoot(left); &:backdrop { @include overshoot(left, backdrop); } } &.right { @include overshoot(right); &:backdrop { @include overshoot(right, backdrop); } } } // 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; } &:backdrop { border-image-source: linear-gradient(to bottom, $backdrop_borders_color 1px, transparent 1px); background-color: $backdrop_scrollbar_bg_color; transition: $backdrop_transition; } } } //vbox and hbox separators separator { background: transparentize(black, 0.9); } ================================================ FILE: gtk-4.0/widgets/_granite.scss ================================================ /************ * Popovers * ************/ GraniteWidgetsPopOver { border: 1px solid $base_color; background: $base_color; color: $fg_color; .button { background-image: none; background: none; border: none; &:active, &:active:hover, { color: $selected_bg_color; } } > .frame { border:none; } .sidebar.view { border: none; background: none; } } GraniteWidgetsStaticNotebook .frame { border: none; } .popover_bg { background-color: $base_color; background-image: none; border: 1px solid $base_color; color: $fg_color; } /*********** * Welcome * **********/ GraniteWidgetsWelcome { background-color: $base_color; GtkLabel { color: $fg_color; } .h1,.h3 { color: transparentize($fg_color, 0.2); } } /************** * Source List * ***************/ .source-list { background-color: $bg_color; border: solid $borders_color; color: $fg_color; border-right-width: 1px; &:backdrop {} .category-expander { color: transparent; } .badge { background-image: none; background-color: transparentize(black, 0.6); color: $bg_color; border-radius: 10px; padding: 0 6px; margin: 0 3px; border-width: 0; &:selected:backdrop, &:selected:hover:backdrop { background-color: transparentize(black, 0.8); color: darken($bg_color, 5%); } } row, .list-row { border:none; padding: 0; > GtkLabel, > label { padding-left: 6px; padding-right: 6px; } } } /************** * Text Styles * **************/ .h1 { font-size: 24px; } .h2 { font-weight: 300; font-size: 18px; } .h3 { font-size: 11px; } .h4, .category-label { font-size: 12px; padding: 6px; color: transparentize($fg_color, 0.7); font-weight: bold; text-shadow: 0 1px transparentize(white,0.8); } /************** * Storage Bar * **************/ .storage-bar { .trough { border: none; box-shadow:0 1px 0 0 $bottom_highlight; background-image: none; background-color: transparent; padding: 8px 6px; } .fill-block { background-color: $yellow; border:none; box-shadow: inset 0 1px 0 0 transparentize(black, 0.9), inset 0 -1px 0 0 transparentize(black, 0.9); transition: all 200ms ease-in-out; padding: 8px 6px; &:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-left-width: 1px; box-shadow: inset 0 1px 0 0 transparentize(black, 0.9), inset 1px 0 0 transparentize(black, 0.9), inset 0 -1px 0 0 transparentize(black, 0.9); } &:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; box-shadow: inset 0 1px 0 0 transparentize(black, 0.9), inset -1px 0 0 transparentize(black, 0.9), inset 0 -1px 0 0 transparentize(black, 0.9); } &.empty-block { background-color: $base_color; } &.app { background-color: $blue; } &.audio { background-color: $orange; } &.photo { background-color: $red; } &.video { background-color: $purple; } .legend { padding: 12px; border-radius: 4px; } } } ================================================ FILE: gtk-4.0/widgets/_header-bars.scss ================================================ /*************** * Header bars * ***************/ %titlebar, headerbar { padding: 0 6px; min-height: 38px; background: $headerbar_color; color: $headerbar_fg_color; border-radius: 0; &:backdrop { border-color: $backdrop_borders_color; transition: $backdrop_transition; } .title { font-weight: bold; padding-left: 12px; padding-right: 12px; } .subtitle { font-size: smaller; padding-left: 12px; padding-right: 12px; @extend .dim-label; } entry { min-height: 24px; } button { @include button(normal-header); border-color: $dark_borders_color; &:active, &:checked { @include button(active, $selected_bg_color, #fff); border-color: $dark_borders_color; } &:backdrop, &:disabled, &:backdrop:disabled { @include button(backdrop-header, darken($main_dark_color, 3%), transparentize($headerbar_fg_color,0.8)); } } %linked-header { border-radius: 0; border-right-style: none; box-shadow: none; &:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } &:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; border-right-style: solid; } &:only-child { border-radius: 6px; border-style: solid; } } %linked-button { @extend %linked-header; border-color: $dark_borders_color; &:active, &:checked { @include button(active, $selected_bg_color, #fff); &:backdrop{ background-color: $backdrop_selected_bg_color; color:$selected_bg_color; label{ color: $selected_bg_color; } } } } .linked > button { @extend %linked-button; } .linked > button:hover, .linked > button:backdrop { @extend %linked-header; } .linked:not(.vertical) > entry { border-color: $dark_borders_color; box-shadow: none; background: lighten($headerbar_color, 2%); color: $headerbar_fg_color; caret-color: $headerbar_fg_color; *{ color: $headerbar_fg_color; } &:focus { border-color: entry_focus_border(); } } splitbutton.image-button { > button:not(.toggle) { border-radius: 6px 0px 0px 6px; } menubutton.popup button.toggle { border-radius: 0px 6px 6px 0px ; } } // End reset style .path-bar-box { .dim-label { color: transparent; margin-right: -6px; } button { @extend %linked-button; &:last-child { margin-left: -1px; border-radius: 0px; &:active, &:checked { border-radius: 0px 6px 6px 0px; } } &:first-child { border-radius: 6px 0px 0px 6px; &:active, &:checked { border-radius: 6px; } } } widget > .text-button:last-child{ border-radius: 0px 6px 6px 0px; @include button(active, $selected_bg_color, #fff); &:backdrop { background: $backdrop_selected_bg_color; &, label { color: $selected_bg_color; } } &:only-child{ border-radius: 6px; } } } &.selection-mode { button { &:backdrop { &.flat, & { &:active, &:checked { //@include button(backdrop-active, $selected_bg_color, $selected_fg_color); label{ color:$backdrop_selected_bg_color; } border-color: $selected_borders_color; } } } } } .tiled &, .maximized & { &.titlebar { @if $variant == 'light' { box-shadow: none; } @else { box-shadow: inset 0 -1px $bottom_highlight; } } &:backdrop, & { border-radius: 0; } } // squared corners when the window is maximized or tiled &.default-decoration { padding: 5px 4px; min-height: 20px; button.titlebutton { min-height: 20px; min-width: 20px; margin: 0; padding: 0; } } } headerbar { // add vertical margins to common widget on the headerbar to avoid them spanning the whole height entry, spinbutton, separator:not(.sidebar), button, menubutton { margin-top: 3px; margin-bottom: 3px; } // Reset margins for buttons inside menubutton menubutton > button, spinbutton > button, splitbutton > button, splitbutton > menubutton, entry > menubutton { margin-top: 0px; margin-bottom: 0px; } switch { margin-top: 0; margin-bottom: 0; } separator { background: transparent; } } .background:not(.tiled):not(.maximized) .titlebar { @if $variant == 'light' { box-shadow: inset 0 1px $top_highlight; } @else { box-shadow: inset 0 1px $top_highlight,inset 0 -1px $bottom_highlight; } &:backdrop, & { border-top-left-radius: 6px; border-top-right-radius: 6px; } } headerbar { window:not(.tiled):not(.maximized) separator:first-child + &, // tackles the paned container case window:not(.tiled):not(.maximized) &:first-child { &:backdrop, & { border-top-left-radius: 6px; }} window:not(.tiled):not(.maximized) &:last-child { &:backdrop, & { border-top-right-radius: 6px; }} } .titlebar:not(headerbar) { window.csd > & { // in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases padding: 0; background-color: transparent; background-image: none; border-style: none; border-color: transparent; box-shadow: none; } > separator { &, &:backdrop { background: $headerbar_color; } } @extend %titlebar; } .titlebar{ @extend %titlebar; } // Gnome 45 .sidebar-pane, .content-pane { .top-bar { &, headerbar { background-color: $headerbar_color; } // buttons in nautilus search configuration popover popover.background button { @extend %button; } } } .raised.top-bar { background-color: $headerbar_color; } ================================================ FILE: gtk-4.0/widgets/_infobars.scss ================================================ /************** * GtkInfoBar * **************/ %infobar, infobar { text-shadow: none; color: $fg_color; background-color: $bg_color; border-bottom:1px solid darken($bg_color,10%); box-shadow: none; } %color_infobar { @extend %infobar; text-shadow: none; color: $selected_fg_color; border:none; .label { color: $selected_fg_color; &:backdrop { color: $backdrop_selected_fg_color; } } button { border-radius: 2px; border: none; background: transparentize($base_color, 0.02); color: $fg_color; box-shadow: 0 1px 0 0 transparentize(black, 0.8); .label { color: $fg_color; } &:active { background: $base_color; color: $fg_color; box-shadow: 0 1px 2px 0 transparentize(black, 0.6); &:backdrop { background: transparentize($base_color, 0.2); color: transparentize($fg_color, 0.5); box-shadow: none; } } &:hover, &:focus { box-shadow: 0 1px 2px 0 transparentize(black, 0.6); } &:disabled { background: transparentize($base_color, 0.4); color: transparentize($fg_color, 0.5); box-shadow: none; &:backdrop { background: transparentize($base_color, 0.5); color: transparentize($fg_color, 0.5); box-shadow: none; } } &:backdrop { background: transparentize($base_color, 0.2); color: transparentize($fg_color, 0.5); box-shadow: none; } } } .info { @extend %color_infobar; &, &:backdrop { color: $info_color; background-color: transparent; } } .warning { @extend %color_infobar; &, &:backdrop { color: $warning_color; background-color: transparent; } } .question { @extend %color_infobar; &, &:backdrop { color: $question_color; background-color: transparent; } } .error { @extend %color_infobar; &, &:backdrop { color: $error_color; background-color: transparent; } } // Gnome 47 info bars banner revealer widget { background: $suggested_bg_color; padding: 5px; color: $base_color; } ================================================ FILE: gtk-4.0/widgets/_level-bars.scss ================================================ $_levelbar_size: 5px; $_levelbar_border_radius: 5px; levelbar { &.horizontal { trough > block { min-height: $_levelbar_size; border-radius: $_levelbar_border_radius; &:dir(rtl) { border-radius: 0 $_levelbar_border_radius $_levelbar_border_radius 0; } &:dir(ltr) { border-radius: $_levelbar_border_radius 0 0 $_levelbar_border_radius; } &.empty,&.full { border-radius: $_levelbar_border_radius; } } // segmented level bar &.discrete { trough > block { min-height: 2px; margin: 1px; min-width: 24px; border-radius:0; &:first-child {border-radius: 2px 0 0 2px;} &:last-child { border-radius: 0 2px 2px 0; } } } } &.vertical { trough > block { min-width: $_levelbar_size; border-radius: $_levelbar_border_radius; } &.discrete > trough > block { min-width: $_levelbar_size - 3px; margin: 1px 0; min-height: 32px; } } > trough { padding: 0; } // level bar colours > trough > block { border: 1px solid; &.low { border-color: $warning_color; background-color: $warning_color; } &.high, &:not(.empty) { border-color: $nord9; background-color: $nord9; } &.full { border-color: $success_color; background-color: $success_color; } &.empty { background-color: darken($base_color, 10%); border-color: darken($base_color, 10%); } } } ================================================ FILE: gtk-4.0/widgets/_links.scss ================================================ /********* * 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%); } } &:backdrop { &:backdrop:hover, &:backdrop:hover:selected, & { color: $selected_bg_color; }} @at-root %link_selected, &:selected, *:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); } } button:link, button:visited { @extend %undecorated_button; @extend *:link; text-shadow: none; &:hover, &:active, &:checked { @extend %undecorated_button; text-shadow: none; } > label { text-decoration-line: underline; } } ================================================ FILE: gtk-4.0/widgets/_lists.scss ================================================ /********* * Lists * *********/ list, listview { &, label { color: $text_color; } background-color: $base_color; border-color: $borders_color; &:backdrop { background-color: $backdrop_base_color; border-color: $backdrop_borders_color; } &.horizontal row.separator, &.separators.horizontal > row:not(.separator) { border-left: 1px solid $borders_color; } &:not(.horizontal) row.separator, &.separators:not(.horizontal) > row:not(.separator) { border-bottom: 1px solid $borders_color; } } row { &:hover { transition: none; } &:backdrop { transition: $backdrop_transition; } &.activatable { &.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411 &:hover { background-color: if(variant == light, transparentize($fg_color, 0.9), transparentize($fg_color, 0.95)); } &:active { box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); } &:backdrop:hover { background-color: transparent; } &:selected { &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); } &.has-open-popup, &:hover { background-color: transparentize($selected_bg_color, 0.5); } &:backdrop { background-color: $backdrop_selected_bg_color; } } &.button { @include button(normal); } } .view {background-color: transparent; } &:selected { @extend %selected_items; } } columnview { // move padding to child cells > listview > row { padding: 0; // align horizontal sizing with header buttons > cell { padding: 0px 6px; &:not(:first-child) { border-left: 1px solid transparent; } } } // make column separators visible when :show-column-separators is true &.column-separators > listview > row > cell { border-left-color: $borders_color; } // shrink vertically for .data-table &.data-table > listview > row > cell { padding-top: 2px; padding-bottom: 2px; } } treeexpander { border-spacing: 4px; } /******************************************************** * Data Tables * * treeview like tables with individual focusable cells * * https://gitlab.gnome.org/GNOME/gtk/-/issues/2929 * ********************************************************/ columnview row:not(:selected) cell editablelabel:not(.editing):focus-within { outline: 2px solid $borders_color; } columnview row:not(:selected) cell editablelabel.editing:focus-within { outline: 2px solid $selected_bg_color; } columnview row:not(:selected) cell editablelabel.editing text selection { background-color: $backdrop_selected_bg_color; color: transparent; &:focus-within { background-color: $selected_bg_color; color: $fg_color; } } /******************************************************* * Rich Lists * * Large list usually containing lots of widgets * * https://gitlab.gnome.org/GNOME/gtk/-/issues/3073 * *******************************************************/ .rich-list { /* rich lists usually containing other widgets than just labels/text */ & > row { padding: 8px 12px; min-height: 32px; /* should be tall even when only containing a label */ & > box { border-spacing: 12px; } } } /******************************************************** * Complex Lists * * Put padding on the cell content so event controllers * * can cover the whole area. * ********************************************************/ columnview.complex { > listview > row > cell { padding: 0; > * { padding: 8px 6px; } } // shrink vertically for .data-table &.data-table > listview > row > cell { padding: 0; > * { padding-top: 2px; padding-bottom: 2px; } } } .boxed-list-separate { &, &:backdrop { background-color: transparent; }} ================================================ FILE: gtk-4.0/widgets/_menus.scss ================================================ /********* * Menus * *********/ menubar, .menubar { background-color: $headerbar_color; color: $headerbar_fg_color; padding: 0px; box-shadow: inset 0 -1px transparentize(black, 0.9); > item { min-height: 16px; padding: 4px 8px; &:hover { //Seems like it :hover even with keyboard focus box-shadow: inset 0 -3px $selected_bg_color; } &:disabled { color: $insensitive_fg_color; box-shadow: none; } } } menu, .menu, .context-menu { padding: 2px 0px; background: $menu_color; border: none; // adds borders in a non composited env border-radius: 5px; font: initial; .csd & { border: none; } // axes borders in a composited env &:backdrop { background-color: $backdrop_menu_color; } menuitem { min-height: 17px; min-width: 40px; padding: 4px 6px; text-shadow: none; &:hover { color: $selected_fg_color; background-color: $selected_bg_color; } &:disabled { color: $insensitive_fg_color; &:backdrop { color: $backdrop_insensitive_color; } } &:backdrop, &:backdrop:hover { color: $backdrop_fg_color; background-color: transparent; } // 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; } } // avoids labels color being overridden, see // https://bugzilla.gnome.org/show_bug.cgi?id=767058 label { &:dir(rtl), &:dir(ltr) { color: inherit; }} } // overflow arrows > arrow { @include button(undecorated); min-height: 16px; min-width: 16px; padding: 4px; background-color: $menu_color; 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%); } &:backdrop { background-color: $backdrop_menu_color; } &:disabled { color: transparent; background-color: transparent; border-color: transparent ; } } } menuitem { accelerator { color: gtkalpha(currentColor,0.55); } check, radio { min-height: 16px; min-width: 16px; &:dir(ltr) { margin-right: 7px; } &:dir(rtl) { margin-left: 7px; } } } .csd.popup { background-color: transparent; } ================================================ FILE: gtk-4.0/widgets/_misc.scss ================================================ /******** * Misc * ********/ //content view (grid/list) .content-view { background-color: darken($bg_color,7%); &:hover { -gtk-icon-filter: brightness(1.2); } &:backdrop { background-color: darken($bg_color,7%); } rubberband { @extend rubberband; } } .scale-popup { .osd & { @extend %osd; } .osd & button.flat { //FIXME: quick hack, redo properly border-style: none; border-radius: 5px; } button { // +/- buttons on GtkVolumeButton popup &:hover { @extend %undecorated_button; background-color: transparentize($fg_color,0.9); border-radius: 5px; } &:backdrop { &:hover, &:disabled, & { @extend %undecorated_button; }} } } /************ * Assistant * *************/ assistant { border-bottom-left-radius:4px; border-bottom-right-radius:4px; .sidebar { background-color: $base_color; border-top: 1px solid $borders_color; border-bottom-left-radius:4px; &:backdrop { background-color: $backdrop_base_color; border-color: $backdrop_borders_color; } } &.csd .sidebar { border-top-style: none; } .sidebar GtkLabel, .sidebar label { padding: 6px 12px; } .sidebar GtkLabel.highlight, .sidebar label.highlight { background-color: mix($bg_color, $fg_color, 80%); } } ================================================ FILE: gtk-4.0/widgets/_notebooks.scss ================================================ /************* * Notebooks * *************/ notebook { > header { padding: 1px; border-color: $borders_color; border-width: 1px; background-color: darken($base_color, 5%); &:backdrop { border-color: $backdrop_borders_color; background-color: $backdrop_bg_color; } tabs { margin: 0px; } &.top { border-bottom-style: solid; > tabs { margin-bottom: -2px; > tab { &:backdrop { box-shadow: none; } &:checked { background-color: $base_color; &:hover{background-color: $base_color;} } } } } &.bottom { border-top-style: solid; > tabs { margin-top: -2px; > tab { &:backdrop { box-shadow: none; } &:checked { background-color: $base_color; box-shadow: -1px 0 0 $borders_color, 0px 1px 0 $borders_color, 1px 0 0 $borders_color; } } } } &.left { border-right-style: solid; > tabs { margin-right: -2px; > tab { &:backdrop { box-shadow: none; } &:checked { background-color: $base_color; box-shadow: 0px 1px 0 $borders_color, 0px -1px 0 $borders_color, 0px 1px 0 $borders_color; } } } } &.right { border-left-style: solid; > tabs { margin-left: -2px; > tab { &:backdrop { box-shadow: none; } &:checked { background-color: $base_color; box-shadow: 0px 1px 0 $borders_color, 0px -1px 0 $borders_color, 1px 0 0 $borders_color; } } } } &.top > tabs > arrow { @extend %notebook_vert_arrows; border-top-style: none; } &.bottom > tabs > arrow { @extend %notebook_vert_arrows; border-bottom-style: none; } @at-root %notebook_vert_arrows { margin-left: -5px; margin-right: -5px; padding-left: 4px; padding-right: 4px; &.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); } &.up { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); } } &.left > tabs > arrow { @extend %notebook_horz_arrows; border-left-style: none; } &.right > tabs > arrow { @extend %notebook_horz_arrows; border-right-style: none; } @at-root %notebook_horz_arrows { margin-top: -5px; margin-bottom: -5px; padding-top: 4px; padding-bottom: 4px; &.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); } &.up { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } } > tabs > arrow { @extend %button_basic; @extend %button_basic.flat; min-height: 14px; min-width: 14px; border-radius: 0; &:hover:not(:active):not(:backdrop) { background-clip: padding-box; background-image: none; background-color: transparentize(white, 0.7); border-color: transparent; box-shadow: none; } &:disabled { @include button(undecorated); } } tab { min-height: 24px; min-width: 24px; padding: 1px 12px; outline-offset: -5px; color: $insensitive_fg_color; font-weight: normal; border-width: 1px; // for reorderable tabs border-color: transparent; // &:hover { color: mix($insensitive_fg_color, $fg_color, 50%); &.reorderable-page { border-color: transparentize($borders_color, 0.7); background-color: transparentize($bg_color, 0.8); } } &:backdrop { color: mix($backdrop_fg_color, $backdrop_bg_color, 60%); &.reorderable-page { border-color: transparent; background-color: transparent; } } &:checked { color: $fg_color; box-shadow: -1px 0 0 $borders_color, 0px -1px 0 $borders_color, 1px 0 0 $borders_color; &.reorderable-page { border-color: transparentize($borders_color, 0.5); background-color: transparentize($bg_color, 0.5); &:hover { background-color: transparentize($bg_color, 0.3); } } } &:backdrop:checked { color: $backdrop_fg_color; &.reorderable-page { border-color: $backdrop_borders_color; background-color: $backdrop_base_color; } } // colors the button like the label, overridden otherwise button.flat { &:hover { background: transparent; box-shadow: none; color: $red; } &, &:backdrop { background: transparent; border: none; color: gtkalpha(currentColor, 0.3); } padding: 0; margin-top: 4px; margin-bottom: 4px; // FIXME: generalize .small-button? min-width: 20px; min-height: 20px; &:last-child { margin-left: 4px; margin-right: -4px; } &:first-child { margin-left: -4px; margin-right: 4px; } } } &.top, &.bottom { tabs { padding-left: 0px; padding-right: 0px; &:not(:only-child) { margin-left: 0.5px; margin-right: 0.5px; &:first-child { margin-left: -1px; } &:last-child { margin-right: -1px; } } tab { margin-left: 0.5px; margin-right: 0.5px; &.reorderable-page { border-style: none solid; } } } } &.left, &.right { tabs { padding-top: 4px; padding-bottom: 4px; &:not(:only-child) { margin-top: 3px; margin-bottom: 3px; &:first-child { margin-top: -1px; } &:last-child { margin-bottom: -1px; } } tab { margin-top: 4px; margin-bottom: 4px; &.reorderable-page { border-style: solid none; } } } } &.top tab { padding-bottom: 1px; } &.bottom tab { padding-top: 1px; } } > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks background-color: $base_color; &:backdrop { background-color: $backdrop_base_color; } } } tabbar { &:backdrop .box { > scrolledwindow, > .start-action, > .end-action { filter: opacity(1); } } tabbox { background-color: darken($base_color, 5%); padding: 0px; color: lighten($fg_color, 15%); > tabboxchild { margin: 0 -3px; border-radius: 0; } > tab, > tabboxchild > tab { border-radius: 0; button.flat { padding: 0; margin: 4px; min-width: 20px; min-height: 20px; border-radius: 10px; &:hover { color: $selected_fg_color; } } &:checked, &:selected { background-color: $base_color; color: darken($fg_color, 15%); } } } } ================================================ FILE: gtk-4.0/widgets/_paned.scss ================================================ /********* * Paned * *********/ paned { > separator { min-width: 1px; min-height: 1px; -gtk-icon-source: none; // defeats the ugly default handle decoration border-style: none; // just to be sure background-color: transparent; // workaround, using background istead of a border since the border will get rendered twice (?) background-image: image($borders_color); background-size: 1px 1px; &:selected { background-image: image($selected_bg_color); } // FIXME is this needed? &:backdrop { background-image: image($backdrop_borders_color); } &.wide { min-width: 5px; min-height: 5px; background-color: $bg_color; background-image: image($borders_color), image($borders_color); background-size: 1px 1px, 1px 1px; &:backdrop { background-color: $backdrop_bg_color; background-image: image($backdrop_borders_color), image($backdrop_borders_color); } } } &.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; } } } ================================================ FILE: gtk-4.0/widgets/_pathbars.scss ================================================ /************ * Pathbars * ************/ .path-bar button { &.text-button, &.image-button, & { padding-left: 4px; padding-right: 4px; } &.text-button.image-button label { padding-left: 0; padding-right: 0; } &.text-button.image-button, & { label:last-child { padding-right: 8px; } label:first-child { padding-left: 8px; } } image { padding-left: 4px; padding-right: 4px; } &.slider-button { padding-left: 0; padding-right: 0; } } // Nautilus, filechooser path-bar #NautilusPathBar, .pathbar { @include button(normal-header); .dim-label { color: transparent; margin-right: -5px; } //Buttons before current path button { .horizontal > .dim-label { color: $headerbar_fg_color; padding: 5.5px 12px; margin: 0; border-right: 1px solid $dark_borders_color; } &:hover, &:focus { .dim-label {@include button(hover-header, $selected_bg_color, #fff); } } } // Home icon button > .horizontal > image.dim-label { padding: 3px 0px 3px 12px; border-right: none; margin-right: -6px; border-radius: 6px 0px 0px 6px; } // Reset path buttons appearance button { background: transparent; border: none; margin: 0; padding: 0; } // Current directory options button .flat.popup { margin: 0; button { padding: 4px 6px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; &:hover, &:active, &:checked { @include button(active); } } } // Selected dir .current-dir { label { padding: 5.5px 12px; } label, image { @include button(active, transparentize($selected_bg_color, 0.3), #fff); } } button.current-dir:only-child { image { margin-right: -6px; padding: 0px 0px 0px 12px; border-radius: 6px 0px 0px 6px; } } } // search entry #NautilusQueryEditor { background: lighten($headerbar_color, 2%); color: $headerbar_fg_color; caret-color: $headerbar_fg_color; border-color: $dark_borders_color; &:focus-within { @include entry(focus); } #NautilusQueryEditorTag { > button { margin: 0; } } > text { background-color: transparent; } image { color: $headerbar_fg_color; } > menubutton > button { margin-right: -7px; -gtk-icon-size: 12px; border: none; background-color: transparent; &:hover, &:active, &:focus, &:checked { image { color: $selected_fg_color; } } } > text, > image { margin: 0;} } ================================================ FILE: gtk-4.0/widgets/_popovers.scss ================================================ /*************** * Popovers * ***************/ popover.background { background-color: transparent; font: initial; > arrow, > contents { $_popover_border: if($variant=='light', transparentize(black, 0.77), transparentize(black, 0.25)); background-color: $popover_bg_color; background-clip: padding-box; border: 1px solid $borders_color; box-shadow: 0 4px 6px $menu_shadow_color; color: $fg_color; } &:backdrop { background-color: transparent; box-shadow: none; } > contents { padding: 8px; border-radius: 5px; > list, > .view, > toolbar { border-style: none; background-color: transparent; } separator { background-color: mix($bg_color, $borders_color, 30%); margin: 3px; } list separator { margin: 0; } } .osd &, &.touch-selection, &.magnifier { background-color: transparent; > arrow, > contents { @extend %osd; border: 1px solid transparentize(white, 0.9); box-shadow: none; } } &.touch-selection, &.magnifier { button { @extend %osd_button; } } } magnifier { background-color: $base_color; } /********************** * Popover Base Menus * **********************/ $_menu-padding: 12px; //inner menuitem padding //global 5px for outside menuitems popover.menu { padding: 0; box.inline-buttons { padding: 0 $_menu-padding; button.image-button.model { @include button(undecorated); min-height: 30px; min-width: 30px; padding: 0; border: none; outline: none; transition: none; &:selected { background: image($popover_hover_color); // @if $contrast == 'high' { // box-shadow: inset 0 0 0 1px $borders_color; // } } } } box.circular-buttons { padding: $_menu-padding $_menu-padding 6px; button.circular.image-button.model { // @extend %list_button; padding: 11px; &:focus { background-color: $popover_hover_color; border-color: $popover_hover_color; } } } & > arrow, &.background > contents { background-color: $popover_bg_color; color: $fg_color; padding: 5px; .view { background-color: transparent; row { margin: 0; } } } &.background separator { margin: 6px 0; } accelerator { color: gtkalpha(currentColor,0.55); &:dir(ltr) { margin-left: $_menu-padding; } &:dir(rtl) { margin-right: $_menu-padding; } } check, radio { // @include check('menu', 'transparent', $text_color); &:hover, &:active { background-color: transparent; } } radio { border-color: $borders_color; &:active { border-color: transparentize($borders_color,0.5); } } arrow.left, radio.left, check.left { margin-left: -2px; margin-right: 6px; } arrow.right, radio.right, check.right { margin-left: 6px; margin-right: -2px; } modelbutton, &.background > contents .view row { min-height: 30px; min-width: 40px; padding: 0 $_menu-padding; border-radius: 5px; &:selected { &, label { color: $text-color; } background-color: $popover_hover_color; } &:selected:active { //@extend %selected_items; //color: $selected_fg_color; background-color: darken($popover_hover_color, 10%); // matching buttons } } label.title { font-weight: bold; padding: 4px ($_menu-padding + 20px); //this will fall apart with font sizing } } ================================================ FILE: gtk-4.0/widgets/_print-dialog.scss ================================================ /**************** * Print dialog * *****************/ printdialog { paper { color: $fg_color; border: 1px solid $borders_color; background: white; padding: 0; &:backdrop { color: $backdrop_fg_color; border-color: $backdrop_borders_color; } } .dialog-action-box { margin: 12px; } } ================================================ FILE: gtk-4.0/widgets/_progress-bars.scss ================================================ /***************** * Progress bars * *****************/ progressbar { // sizing &.horizontal { trough, progress { min-height: 6px; } } &.vertical { trough, progress { min-width: 6px; } } &.horizontal progress { margin: 0; } // the progress node is positioned after the trough border &.vertical progress { margin: 0; } // this moves it over it. // FIXME: insensitive state missing and some other state should be set probably font-size: smaller; color: transparentize($fg_color, 0.6); &:backdrop { box-shadow: none; transition: $backdrop_transition; } trough { @extend %scale_trough; } &:backdrop trough { @extend %scale_trough:backdrop; } // looks like states are not passed to the trough component here progress { @extend %scale_highlight; } &:backdrop progress { @extend %scale_highlight:backdrop; } // states not passed here as well &.osd { // progressbar.osd used for epiphany page loading progress min-width: 3px; min-height: 3px; background-color: transparent; trough { border-style: none; border-radius: 0; background-color: transparent; box-shadow: none; } progress { border-style: none; border-radius: 0; } } } ================================================ FILE: gtk-4.0/widgets/_scales.scss ================================================ /************ * GtkScale * ************/ %scale_trough { background-color: $scale_bg; border: none; border-radius: 3px; margin: 0; &:disabled { background-color: $scale_disabled_bg; } &:backdrop { background-color: $scale_disabled_bg; transition: $backdrop_transition; &:disabled { background-color: $scale_disabled_bg; } } } %scale_highlight { border: none; background-color: $selected_bg_color; border-radius: 3px; margin: 0; &:disabled { border: none; background-color: $scale_bg; } &:backdrop, &:active:backdrop { border-color: lighten($selected_bg_color, 5%); background-color: lighten($selected_bg_color, 5%); &:disabled { background-color: $scale_disabled_bg; } } } scale { // sizing $_marks_length: 6px; $_marks_distance: 6px; min-height: 16px; min-width: 16px; padding: 8px; &.horizontal { trough, progress { min-height: 6px; } } &.vertical { trough, progress { min-width: 6px; } } // the slider is inside the trough, so to have make it bigger there's a negative margin slider { min-height: 16px; min-width: 16px; margin: -7px; background-color: $base_color; box-shadow: inset 0 1px $top_highlight, 0px 0px 1px 1px rgba(0,0,0,0.1); border-radius: 12px; transition: $button_transition; transition-property: background, border, box-shadow; &:active { background-color: $selected_bg_color; &:disabled { background-color: $insensitive_bg_color; box-shadow: inset 0 1px $top_highlight, 0px 0px 1px 1px rgba(0,0,0,0.05); } } } // click-and-hold the slider to activate &.fine-tune { &.horizontal { padding-top: 9px; padding-bottom: 9px; min-height: 16px; } &.vertical { padding-left: 9px; padding-right: 9px; min-width: 16px; } // to make the trough grow in fine-tune mode slider { margin: -6px; } fill, highlight, trough { border-radius: 5px; } } // the backing bit trough { @extend %scale_trough; outline-offset: 2px; outline-color: transparent; } // the colored part of the backing bit highlight { @extend %scale_highlight; } // this is another differently styled part of the backing bit, the most relevant use case is for example // in media player to indicate how much video stream as been cached fill { @extend %scale_trough; &:backdrop, & { background-color: $borders_color; } &:disabled { &:backdrop, & { border-color: transparent; background-color: transparent; } } // OSD .osd & { background-color: mix($osd_fg_color, $osd_borders_color, 25%); &:disabled { &:backdrop, & { border-color: transparent; background-color: transparent; } } } } $_scale_bg: if($variant == 'light', #fff, lighten($main_dark_color, 20%)); $_scale_disabled_bg: darken($_scale_bg, 7%); slider { border-color: $_scale_bg; border: none; border-radius: 12px; background-color: $_scale_bg; &:hover { @include button(hover-alt, $edge: $shadow_color); } &:active { border-color: $selected_borders_color; } &:disabled { background-color: $_scale_disabled_bg; box-shadow: inset 0 1px $top_highlight, 0px 0px 1px 1px rgba(0,0,0,0.1); } &:backdrop, &:backdrop:disabled { transition: $backdrop_transition; background-color: $_scale_disabled_bg; box-shadow: inset 0 1px $top_highlight, 0px 0px 1px 1px rgba(0,0,0,0.1); } // ...on selected list rows row:selected & { &:disabled, & { border-color: $selected_borders_color; } } } value { color: gtkalpha(currentColor, 0.4); } &.horizontal { > marks { color: gtkalpha(currentColor, 0.55); &.top { margin-bottom: $_marks_distance; } &.bottom { margin-top: $_marks_distance; } indicator { background-color: currentColor; min-height: $_marks_length; min-width: 1px; } } > value.left { margin-right: 9px; } > value.right { margin-left: 9px; } &.fine-tune >marks { &.top { margin-top: 3px; } &.bottom { margin-bottom: 3px; } indicator { min-height: ($_marks_length - 3px); } } } &.vertical { > marks { color: gtkalpha(currentColor, 0.55); &.top { margin-right: $_marks_distance; } &.bottom { margin-left: $_marks_distance; } indicator { background-color: currentColor; min-height: 1px; min-width: $_marks_length; } } > value.top { margin-bottom: 9px; } > value.bottom { margin-top: 9px; } &.fine-tune >marks { &.top { margin-left: 3px; } &.bottom { margin-right: 3px; } indicator { min-height: ($_marks_length - 3px); } } } &.horizontal { indicator { min-height: $_marks_length; min-width: 1px; } &.fine-tune indicator { min-height: ($_marks_length - 3px); } } &.vertical { indicator { min-height: 1px; min-width: $_marks_length; } &.fine-tune indicator { min-width: ($_marks_length - 3px); } } // *WARNING* scale with marks madness following // FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those... $suffix: if($variant == 'light', '', '-dark'); @each $dir_class, $dir_infix in ('horizontal', 'horz'), ('vertical', 'vert') { @each $marks_infix, $marks_class in ('scale-has-marks-above', 'marks-before:not(.marks-after)'), ('scale-has-marks-below', 'marks-after:not(.marks-before)') { @each $state, $state_infix in ('', ''), (':hover', '-hover'), (':active', '-active'), (':disabled', '-insensitive'), (':backdrop', '-backdrop'), (':backdrop:disabled', '-backdrop-insensitive') { &.#{$dir_class}.#{$marks_class} { slider { &#{$state} { // an asymmetric slider asset is used here, so the margins are uneven, the smaller // margin is set on the point side. min-height: 16px; min-width: 16px; margin: -7px; border: none; border-radius: 50%; background-color: $_scale_bg; box-shadow: inset 0 1px darken($bg_color, 10%), 0px 0px 1px 1px darken($bg_color, 10%); } } &.fine-tune slider { // bigger negative margins to make the trough grow here as well margin: -7px; } } } } } &.color { min-height: 0; min-width: 0; trough { background-image: image($borders_color); background-repeat: no-repeat; } &.horizontal { padding: 0 0 15px 0; trough { padding-bottom: 4px; background-position: 0 -3px; border-top-left-radius: 0; border-top-right-radius: 0; } slider { &:dir(ltr), &:dir(rtl) { // specificity bumb &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & { margin-bottom: -15px; margin-top: 6px; } } } } &.vertical { &:dir(ltr) { padding: 0 0 0 15px; trough { padding-left: 4px; background-position: 3px 0; border-bottom-right-radius: 0; border-top-right-radius: 0; } slider { &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & { margin-left: -15px; margin-right: 6px; } } } &:dir(rtl) { padding: 0 15px 0 0; trough { padding-right: 4px; background-position: -3px 0; border-bottom-left-radius: 0; border-top-left-radius: 0; } slider { &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & { margin-right: -15px; margin-left: 6px; } } } } &.fine-tune { &.horizontal { &:dir(ltr), &:dir(rtl) { // specificity bump padding: 0 0 12px 0; trough { padding-bottom: 7px; background-position: 0 -6px; } slider { margin-bottom: -15px; margin-top: 6px; } } } &.vertical { &:dir(ltr) { padding: 0 0 0 12px; trough { padding-left: 7px; background-position: 6px 0; } slider { margin-left: -15px; margin-right: 6px; } } &:dir(rtl) { padding: 0 12px 0 0; trough { padding-right: 7px; background-position: -6px 0; } slider { margin-right: -15px; margin-left: 6px; } } } } } } ================================================ FILE: gtk-4.0/widgets/_scrollbars.scss ================================================ /************** * Scrollbars * **************/ scrollbar { $_slider_min_length: 40px; 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; } &:backdrop { background-color: $backdrop_scrollbar_bg_color; border-color: $backdrop_borders_color; transition: $backdrop_transition; } // slider slider { min-width: 6px; min-height: 6px; margin: -1px; border: 4px solid transparent; border-radius: 8px; background-clip: padding-box; background-color: $scrollbar_slider_color; &:hover { background-color: $scrollbar_slider_hover_color; } &:hover:active { background-color: $scrollbar_slider_active_color; } &:backdrop { background-color: $backdrop_scrollbar_slider_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) { border-color: transparent; opacity: 0.4; background-color: transparent; slider { margin: 0; min-width: 3px; min-height: 3px; background-color: $fg_color; border: 1px solid if($variant == 'light', white, black); } button { min-width: 5px; min-height: 5px; background-color: $fg_color; background-clip: padding-box; border-radius: 100%; border: 1px solid if($variant == 'light', white, black); -gtk-icon-source: none; } &.horizontal { slider { margin: 0 2px; min-width: $_slider_min_length; } button { margin: 1px 2px; min-width: 5px; } } &.vertical { slider { margin: 2px 0; min-height: $_slider_min_length; } button { margin: 2px 1px; min-height: 5px; } } } &.dragging, &.hovering { opacity: 0.8; } } &.horizontal slider { min-width: $_slider_min_length; } &.vertical slider { min-height: $_slider_min_length; } // button styling button { padding: 0; min-width: 12px; min-height: 12px; border-style: none; border-radius: 0; transition-property: min-height, min-width, color; @include button(undecorated); color: $scrollbar_slider_color; &:hover { @include button(undecorated); color: $scrollbar_slider_hover_color; } &:active, &:checked { @include button(undecorated); color: $scrollbar_slider_active_color; } &:disabled { @include button(undecorated); color: transparentize($scrollbar_slider_color, 0.8); } &:backdrop { @include button(undecorated); color: $backdrop_scrollbar_slider_color; &:disabled { @include button(undecorated); color: transparentize($backdrop_scrollbar_slider_color, 0.8); } } } // button icons &.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-right-symbolic'); } &.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); } } } } treeview ~ scrollbar.vertical { border-top: 1px solid $borders_color; margin-top: -1px; } ================================================ FILE: gtk-4.0/widgets/_sidebar.scss ================================================ /*********** * Sidebar * ***********/ .sidebar { border-style: none; border-width: 0; background-color: mix($bg_color, $base_color, 50%); .frame{ border: none; } @at-root %sidebar_left, &:dir(ltr), &.left, &.left:dir(rtl) { border-right: none; border-left-style: none; } @at-root %sidebar_right &:dir(rtl), &.right { border-left: 1px solid $borders_color; border-right-style: none; } &:backdrop { background-color: $backdrop_sidebar_bg_color; border-color: $backdrop_borders_color; } row{ padding: 8px 12px; transition: all .12s ease-in; label{ color: $text_color; } &:selected{ color: $selected_fg_color; // border-left: 4px solid $selected_bg_color; &:backdrop{ color: $backdrop_selected_fg_color; background: $backdrop_selected_bg_color; label{ color: $selected_fg_color; } } &:hover{ // background-color: transparentize($selected_bg_color, 0.8); } label{ color: $selected_fg_color; } } } //elementary os file manager &.source-list{ background: $_sidebar_color; color: $headerbar_fg_color; padding: 4px 0px; &.view{ transition: all .12s ease-in; &:selected { padding-left: 4px; background: $selected_bg_color; color: $selected_fg_color; &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); } &.has-open-popup, &:hover { background-color: transparentize($selected_bg_color, 0.1); } &:backdrop { background-color: $backdrop_selected_bg_color; } } &:hover, iconview.source-list:hover { background-color: transparentize($_sidebar_color, 0.05); } } } paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; border-color: $borders_color; } } } stacksidebar { &.sidebar { &:dir(ltr), &.left, &.left:dir(rtl) { list { @extend %sidebar_left; }} &:dir(rtl), &.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 */ /*******************************************************************/ /*--*/ placessidebar { background-color: transparent; background-image:linear-gradient(to right, darken($main_dark_color, 5%) 40px, $_sidebar_color 35px,$_sidebar_color 36px, $_sidebar_color 36px,$_sidebar_color 99%, $_sidebar_color 100%); row{ padding: 1px 11px; &.sidebar-row { label { color: $headerbar_fg_color; padding-left: 30px; } margin: 0; border-radius: 0; color: $headerbar_fg_color; &:hover{ transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); background-color: transparent; /*rgba(65,67,75,0.4); */ background-image:linear-gradient(to right, rgba(65,67,75,0) 40px, rgba(0,0,0,0.12) 40px,rgba(0,0,0,0.12) 97%); } &:active{ &:hover{ background-color: rgba(0,0,0,0.23); } } &:selected{ color: #fff; label { color: $selected_bg_color; } background-color: transparent; background-image:linear-gradient(to right, $selected_bg_color 40px, rgba(65,67,75,0) 36px, rgba(65,67,75,0)97%); &:hover{ color: #ffffff; background-color: rgba(0,0,0,0.24); .sidebar-icon { color: #ffffff; } } &:backdrop{ color: rgba(0,0,0,0.54);; background-color: transparent; background-image:linear-gradient(to right, $selected_bg_color 40px, rgba(65,67,75,0) 36px, rgba(65,67,75,0)97%); .sidebar-icon { -gtk-icon-shadow: none; color: inherit; } } .sidebar-icon { -gtk-icon-shadow: 0 1px transparentize(#fff, 0.2); color: inherit; } } &.sidebar-new-bookmark-row { &, label, .sidebar-icon { color: $yellow; } } &: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: $drop_target_color; } } } } list{ background-color: transparent; &:backdrop { background-color: transparent; } } } // Gnome 46: File operations status bar at the bottom of sidebar .sidebar-pane { &, .bottom-bar { background-color: $_sidebar_color; } .bottom-bar { button { @include button(undecorated); label { color: $headerbar_fg_color; } .view { background-color: transparent; } } } } ================================================ FILE: gtk-4.0/widgets/_spinbuttons.scss ================================================ /***************** * GtkSpinButton * *****************/ spinbutton { &:not(.vertical) { // in this horizontal configuration, the whole spinbutton // behaves as the entry, so we extend the entry styling // and nuke the style on the internal entry @extend %entry; padding: 0; border-spacing: 0; %spinbutton_horz_entry { min-width: 28px; // reset all the other props since the spinbutton node is styled here margin: 0; background: none; background-color: transparent; border: none; border-radius: 0; box-shadow: none; padding: 6px; &:backdrop:disabled { background-color: transparent; } } > text { @extend %spinbutton_horz_entry; } /* :not here just to bump specificity above that of the list button styling */ > button.image-button.up:not(.flat), > button.image-button.down:not(.flat) { min-height: 16px; margin: 0; padding-bottom: 0; padding-top: 0; color: mix($fg_color, $base_color, 90%); background-image: none; border-style: none none none solid; border-color: transparentize($borders_color, 0.7); border-radius: 0; box-shadow: none; background-color: transparent; &:dir(rtl) { border-style: none solid none none; } &:hover { color: $fg_color; background-color: darken($bg_color,5%); } &:disabled { color: transparentize($insensitive_fg_color, 0.7); background-color: transparent; } &:active { background-color: transparentize(black, 0.9); box-shadow: inset 0 2px 3px -1px transparentize(black, 0.8); } &:dir(ltr):last-child { border-radius: 0 6px 6px 0; } &:dir(rtl):first-child { border-radius: 6px 0 0 6px; } } } // OSD horizontal .osd &:not(.vertical) { > text { @extend %spinbutton_horz_entry; } > button.image-button.up:not(.flat), > button.image-button.down:not(.flat) { @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; -gtk-icon-shadow: 0 1px black; &: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: darken($osd_bg_color,10%); -gtk-icon-shadow: 0 1px black; box-shadow: none; } &:disabled { @include button(undecorated); color: $osd_insensitive_fg_color; border-color: transparentize(opacify($osd_borders_color, 1), 0.5); -gtk-icon-shadow: none; box-shadow: none; } &:dir(ltr):last-child { border-radius: 0 6px 6px 0; } &:dir(rtl):first-child { border-radius: 6px 0 0 6px; } } } // Vertical &.vertical { // in the vertical configuration, we treat the spinbutton // as a box, and tweak the style of the entry in the middle // so that it's linked // FIXME: this should not be set at all, but otherwise it gets the wrong // color &:disabled { color: $insensitive_fg_color; } &:drop(active) { border-color: transparent; box-shadow: none; } > text { @extend %entry; min-height: 32px; min-width: 32px; padding: 0; border-radius: 0; > selection { background-color: $backdrop_selected_bg_color; color: transparent; &:focus-within { color: $fg_color; } } > block-cursor { @include entry(block_cursor); } } > button { min-height: 32px; min-width: 32px; padding: 0; &.up { @extend %top_button; } &.down { @extend %bottom_button; } } %top_button { border-bottom-style: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } %bottom_button { border-top-style: none; border-top-left-radius: 0; border-top-right-radius: 0; } } // OSD vertical .osd &.vertical > button:first-child { @include button(osd); &:hover { @include button(osd-hover);} &:active { @include button(osd-active); } &:disabled { @include button(osd-insensitive); } } // Misc treeview &:not(.vertical) { min-height: 0; border-style: none; border-radius: 0; > text { min-height: 0; padding: 1px 2px; } } font-feature-settings: "tnum"; } ================================================ FILE: gtk-4.0/widgets/_spinner.scss ================================================ /*********** * Spinner * ***********/ menu spinner { color: $selected_bg_color; } /********************* * Spinner Animation * *********************/ @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; } } } ================================================ FILE: gtk-4.0/widgets/_switches.scss ================================================ /********** * Switch * **********/ switch { font-size: 1px; min-width: 40px; min-height: 25px; background-color: transparent; background-size: 40px 24px; background-repeat: no-repeat; background-position: center center; background-image: -gtk-scaled(url("../assets/switch-off.svg"),url("../assets/switch-off.svg")); &:disabled { background-image: -gtk-scaled(url("../assets/switch-insensitive.svg"),url("../assets/switch-insensitive.svg")); slider { background-image: -gtk-scaled(url("../assets/switch-slider-insensitive.svg"),url("../assets/switch-slider-insensitive@2.png")); } } &, & slider { outline-color: transparent; color: transparent; border: none; box-shadow: none; } &:checked { background-image: -gtk-scaled(url("../assets/switch-on.svg"),url("../assets/switch-on.svg")); slider { background-image: -gtk-scaled(url("../assets/switch-slider-on.svg"),url("../assets/switch-slider-on@2.png")); } &:disabled { background-image: -gtk-scaled(url("../assets/switch-on-insensitive.svg"),url("../assets/switch-on-insensitive.svg")); slider { background-image: -gtk-scaled(url("../assets/switch-slider-on-insensitive.svg"),url("../assets/switch-slider-on-insensitive@2.png")); } } } // Handle slider { min-width: 1px; min-height: 1px; background-repeat: no-repeat; background-position: left center; background-color: transparent; background-image: -gtk-scaled(url("../assets/switch-slider-off.svg"),url("../assets/switch-slider-off@2.png")); } &:checked slider { } &:backdrop { } row:selected & { &:checked { background-image: -gtk-scaled(url("../assets/switch-off.svg"),url("../assets/switch-off.svg")); slider { background-image: -gtk-scaled(url("../assets/switch-slider-on-selected.svg"),url("../assets/switch-slider-on-selected@2.png")); } } } // Trough trough { &:active, &:checked { background-color: $selected_bg_color; &:backdrop { background-color: $backdrop_selected_bg_color; } } } } ================================================ FILE: gtk-4.0/widgets/_toolbars.scss ================================================ /************ * Toolbars * ************/ %toolbar { padding: 4px; background-color: $bg_color; } toolbar { @extend %toolbar; padding: 4px 3px 3px 4px; // on OSD .osd & { background-color: transparent; } // stand-alone OSD toolbars &.osd { padding: 13px; border: none; border-radius: 5px; background-color: $osd_bg_color; &.left, &.right, &.top, &.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars } // toolbar separators &.horizontal separator { margin: 0 7px 1px 6px; } &.vertical separator { margin: 6px 1px 7px 0; } &:not(.inline-toolbar):not(.osd) { switch, scale, entry, spinbutton, button { margin-right: 1px; margin-bottom: 1px; } } } //searchbar, location-bar & inline-toolbar .inline-toolbar { @extend %toolbar; @extend %darkbar; padding: 3px; border-width: 0 1px 1px; border-radius: 0 0 5px 5px; } searchbar > revealer > box { @extend %toolbar; @extend %darkbar; border-width: 0 0 1px; padding: 5px; } %darkbar { border-style: solid; border-color: $borders_color; $_bg: mix($bg_color, $borders_color, 70%); background-color: $_bg; &:backdrop { border-color: $backdrop_borders_color; background-color: $backdrop_dark_fill; box-shadow: none; transition: $backdrop_transition; } } searchbar{ background: $base_color; } ================================================ FILE: gtk-4.0/widgets/_tooltips.scss ================================================ /************ * 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: $osd_bg_color; background-clip: padding-box; border: 1px solid $tooltip_borders_color; // this suble border is meant to // not make the tooltip melt with // very dark backgrounds } padding: 4px; /* not working */ border-radius: 5px; box-shadow: none; // otherwise it gets inherited by windowframe.csd text-shadow: 0 1px black; // FIXME: we need a border or tooltips vanish on black background. decoration { background-color: transparent; } * { // Yeah this is ugly padding: 4px; background-color: transparent; color: white; } } ================================================ FILE: gtk-4.0/widgets/_touch-copy-paste.scss ================================================ /********************** * Touch Copy & Paste * *********************/ //touch selection handlebars for the Popover.osd above cursor-handle { background-color: transparent; background-image: none; box-shadow: none; border-style: none; @each $s,$as in ('',''), (':hover','-hover'), (':active','-active') { //no need for insensitive and backdrop &.top#{$s}:dir(ltr), &.bottom#{$s}:dir(rtl) { $_url: 'assets/text-select-start#{$as}#{$asset_suffix}'; -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')); padding-left: 10px; } &.bottom#{$s}:dir(ltr), &.top#{$s}:dir(rtl) { $_url: 'assets/text-select-end#{$as}#{$asset_suffix}'; -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')); padding-right: 10px; } &.insertion-cursor#{$s}:dir(ltr), &.insertion-cursor#{$s}:dir(rtl) { $_url: 'assets/slider-horz-scale-has-marks-above#{$as}#{$asset_suffix}'; -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')); } } } .context-menu { font: initial; } // Decouple the font of context menus from their entry/textview button.circular { // FIXME: aggregate to buttons border-radius: 20px; -gtk-outline-radius: 20px; label { padding: 0; } } // shortcut window keys .keycap { min-width: 20px; min-height: 25px; margin-top: 2px; padding-bottom: 3px; padding-left: 6px; padding-right: 6px; color: $fg_color; background-color: $base_color; border: 1px solid; border-color: if($variant == 'light', mix($borders_color, $bg_color, 50%), $borders_color); border-radius: 5px; box-shadow: if($variant == 'light', inset 0 -3px mix($base_color, $bg_color, 20%), inset 0 -3px mix($borders_color, $base_color, 60%)); font-size: smaller; &:backdrop { background-color: $backdrop_base_color; color: $backdrop_fg_color; transition: $backdrop_transition; } } *:drop(active):focus, *:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die border-color: $drop_target_color; box-shadow: inset 0 0 0 1px $drop_target_color; } stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons stackswitcher button.circular, stackswitcher button.text-button.circular { // FIXME aggregate with buttons min-width: 32px; min-height: 32px; padding: 0; } ================================================ FILE: gtk-4.0/widgets/_treeviews.scss ================================================ $_treeview_borders_color: $borders_color; $_treeview_backdrop_borders_color: if($variant=='light',mix($backdrop_borders_color, $base_color, 80%),mix($backdrop_fg_color, $base_color, 20%)); columnview.view, treeview.view { border-left-color: $_treeview_borders_color; // this is actually the tree lines color, border-top-color: $_treeview_borders_color; // while this is the grid lines color, better then nothing //@include focus-ring(); > rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props &:selected { &:focus, & { border-radius: 0; outline-color: $red; @extend %selected_items; } } &:disabled { color: $insensitive_fg_color; &:selected { color: mix($selected_fg_color, $selected_bg_color, 40%); &:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); } } } &.separator { min-height: 2px; color: $_treeview_borders_color; } &:backdrop { border-left-color: $_treeview_backdrop_borders_color; border-top: $_treeview_backdrop_borders_color; } &:drop(active) { box-shadow: none; } > dndtarget:drop(active) { border-style: solid none; border-width: 1px; border-color: $selected_borders_color; &.after { border-top-style: none; } &.before { border-bottom-style: none; } } &.expander { // GtkTreeView uses the larger of the expander’s min-width and min-height 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'); } color: mix($text_color, $base_color, 70%); &:hover { color: $text_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 { // progress bar in treeviews @if $variant == light { color: $base_color; } border: 1px solid $selected_borders_color; border-radius: 4px; background-color: $selected_bg_color; background-image: linear-gradient(to bottom, $selected_bg_color, darken($selected_bg_color,10%)); box-shadow: inset 0 1px if($variant=='light', transparentize(white,0.7), transparentize(white,0.85)), 0 1px if($variant=='light', transparentize(black, 0.8), transparentize(black,0.9)); &:selected { &:focus, & { @if $variant == 'light' { color: $selected_bg_color; } @else { box-shadow: inset 0 1px transparentize(white, 0.95); } background-image: image($base_color); &:backdrop { @if $variant == 'light' { color: $selected_bg_color; } background-color: $backdrop_base_color; } } } } &.trough { // progress bar trough in treeviews background-color: transparentize($fg_color,0.9); &:selected { &:focus, & { background-color: if($variant == 'light', transparentize($selected_fg_color, 0.7), darken($selected_bg_color, 10%)); } } } > header { > button { $_column_header_color: mix(darken($fg_color, 20%), darken($base_color, 40%), 50%); @extend %column_header_button; color: $_column_header_color; background-color: $base_color; font-weight: bold; text-shadow: none; box-shadow: none; &:hover { @extend %column_header_button; color: mix($_column_header_color, $fg_color, 50%); 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 } sort-indicator { &.ascending { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); } &.descending { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } min-height: 16px; min-width: 16px; } } } button.dnd, header.button.dnd { // for treeview-like derive widgets &:active, &:selected, &:hover, & { padding: 0 6px; color: $red; background-image: none; background-color: $selected_bg_color; border-style: none; border-radius: 0; box-shadow: inset 0 0 0 1px $base_color; text-shadow: none; transition: none; } } acceleditor > label { background-color: $selected_bg_color; } // see tests/testaccel to test } %column_header_button { padding: 0 6px; background-image: none; border-style: none none solid solid; border-color: $_treeview_borders_color; border-radius: 0; text-shadow: none; &:disabled { border-color: $bg_color; background-image: none; } &:last-child { &:backdrop, & { border-right-style: none; }} } ================================================ FILE: gtk-4.0/widgets/_windows.scss ================================================ /********************** * Window Decorations * *********************/ window { // lamefun trick to get rounded borders regardless of CSD use border-width: 0px; // this needs to be transparent // see bug #722563 $_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize(black, 0.25)); $_wm_border_backdrop: if($variant=='light', transparentize(black, 0.82), transparentize(black, 0.25)); $_window_radius: 4px; $_menu_radius: 7px; &.csd { box-shadow: 0 3px 9px 1px transparentize(black, 0.5), 0 0 0 1px $_wm_border; //doing borders with box-shadow margin: 0px; border-radius: $_window_radius $_window_radius 0 0; &:backdrop { // the transparent shadow here is to enforce that the shadow extents don't // change when we go to backdrop, to prevent jumping windows. // The biggest shadow should be in the same order then in the active state // or the jumping will happen during the transition. box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px transparentize(black, 0.8), 0 0 0 1px $_wm_border_backdrop; transition: $backdrop_transition; } &.popup { border-radius: $_menu_radius; box-shadow: 0 1px 2px transparentize(black, 0.8), 0 0 0 1px transparentize($_wm_border, 0.1); } &.dialog.message { border-radius: $_window_radius; box-shadow: 0 1px 2px transparentize(black, 0.8), 0 0 0 1px transparentize($_wm_border, 0.1); } } &.solid-csd { margin: 0; padding: 4px; border: solid 1px $borders_color; border-radius: 0; box-shadow: inset 0 0 0 4px $borders_color, inset 0 0 0 3px $headerbar_color, inset 0 1px transparentize($fg_color, 0.93); &:backdrop { box-shadow: inset 0 0 0 4px $borders_color, inset 0 0 0 3px $backdrop_bg_color, inset 0 1px transparentize($fg_color, 0.93); } } &.maximized, &.fullscreen { border-radius: 0; box-shadow: none; } &.tiled, &.tiled-top, &.tiled-left, &.tiled-right, &.tiled-bottom { border-radius: 0; box-shadow: 0 0 0 1px $_wm_border, 0 0 0 20px transparent; //transparent control workaround -- #3670 &:backdrop { box-shadow: 0 0 0 1px $_wm_border_backdrop, 0 0 0 20px transparent; // #3670 } } &.popup { box-shadow: none; } // server-side decorations as used by mutter &.ssd { box-shadow: 0 0 0 1px $_wm_border; } //just doing borders, wm draws actual shadows } // Window Close button windowcontrols { button { &.close, &.maximize, &.minimize { min-width: 20px; min-height: 20px; margin: 0; padding: 0 1px; background-position: center; background-repeat: no-repeat; background-size: 16px 16px; &, &:hover, &:focus, &:active, &:backdrop, &:backdrop:hover { background-color: transparent; border: none; box-shadow: none; color: transparent; } } &.close { background-image: -gtk-scaled(url("../assets/close.png"),url("../assets/close@2.png")); &:hover,&:active { background-image: -gtk-scaled(url("../assets/close_prelight.png"),url("../assets/close_prelight@2.png")); } } &.maximize { background-image: -gtk-scaled(url("../assets/maximize.png"),url("../assets/maximize@2.png")); &:hover,&:active { background-image: -gtk-scaled(url("../assets/maximize_prelight.png"),url("../assets/maximize_prelight@2.png")); } } &.minimize { background-image: -gtk-scaled(url("../assets/min.png"),url("../assets/min@2.png")); &:hover,&:active { background-image: -gtk-scaled(url("../assets/min_prelight.png"),url("../assets/min_prelight@2.png")); } } .selection-mode & { @extend %button.flat.suggested-action; @extend %nobg_selected_items; } &:backdrop { -gtk-icon-shadow: none; background-image: -gtk-scaled(url("../assets/close_unfocused.png"),url("../assets/close_unfocused@2.png")); } } } headerbar.selection-mode button.titlebutton, .titlebar.selection-mode button.titlebutton { @include _button_text_shadow(white, $selected_bg_color); &:backdrop { -gtk-icon-shadow: none; } } // catch all extend :) %selected_items { background-color: $selected_bg_color; @at-root %nobg_selected_items, & { color: $selected_fg_color; font-weight: normal; //&:hover{background-color: transparent;} @if $variant == 'light' { outline-color: transparentize($selected_fg_color, 0.7); } &:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); } &:backdrop { color: $backdrop_selected_fg_color; &:disabled { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); } } } } .monospace { font-family: Monospace; } ================================================ FILE: index.theme ================================================ [Desktop Entry] Type=X-GNOME-Metatheme Name=Nordic-Polar Comment=Dark theme created using the awesome Nord color palette Encoding=UTF-8 [X-GNOME-Metatheme] GtkTheme=Nordic-Polar MetacityTheme=Nordic-Polar IconTheme=Zafiro-icons ButtonLayout=:minimize,maximize,close ================================================ FILE: metacity-1/metacity-theme-3.xml ================================================ Nordic-Polar Eliver Lara <eliverlara@gmail> ÂEliver Lara, 2019 2019 Nordic Window Theme </draw_ops> <draw_ops name="title_unfocused"> <title x="(0 `max` ((width - title_width) / 2)) + 2" y="(0 `max` ((height - title_height) / 2))" color="C_title_unfocused" /> </draw_ops> <!-- WINDOW DECORATIONS --> <draw_ops name="entire_background_focused"> <rectangle color="C_titlebar" x="0" y="0" width="width" height="height" filled="true" /> </draw_ops> <draw_ops name="entire_background_unfocused"> <include name="entire_background_focused" /> </draw_ops> <draw_ops name="titlebar_fill_focused"> <rectangle color="C_titlebar" x="4" y="0" width="width" height="height" filled="true" /> </draw_ops> <draw_ops name="titlebar_fill_attached_focused"> <include name="entire_background_focused" /> </draw_ops> <draw_ops name="titlebar_fill_unfocused"> <rectangle color="C_titlebar_unfocused" x="0" y="0" width="width" height="height" filled="true" /> </draw_ops> <draw_ops name="titlebar_focused"> <include name="titlebar_fill_focused" /> </draw_ops> <draw_ops name="titlebar_attached_focused"> <!-- titlebar for attached and modal dialogs --> <include name="titlebar_fill_attached_focused" /> </draw_ops> <draw_ops name="rounded_titlebar_focused"> <include name="titlebar_fill_focused" /> </draw_ops> <draw_ops name="border_focused"> <rectangle color="C_border_focused" x="0" y="0" width="width-1" height="height-1" filled="false" /> </draw_ops> <draw_ops name="border_unfocused"> <rectangle color="C_border_unfocused" x="0" y="0" width="width-1" height="height-1" filled="false" /> </draw_ops> <draw_ops name="rounded_border_focused"> <line color="C_border_focused" x1="2" y1="0" x2="width-3" y2="0" /> <line color="C_border_focused" x1="0" y1="height-1" x2="width-1" y2="height-1" /> <line color="C_border_focused" x1="0" y1="2" x2="0" y2="height-2" /> <line color="C_border_focused" x1="width-1" y1="2" x2="width-1" y2="height-2" /> <arc color="C_border_focused" x="0" y="0" width="3" height="3" start_angle="270" extent_angle="90" /> <arc color="C_border_focused" x="width-3" y="0" width="2" height="3" start_angle="0" extent_angle="90" /> <!-- double arcs for darker borders --> <arc color="C_border_focused" x="0" y="0" width="3" height="3" start_angle="270" extent_angle="90" /> <arc color="C_border_focused" x="width-3" y="0" width="2" height="3" start_angle="0" extent_angle="90" /> </draw_ops> <draw_ops name="rounded_border_unfocused"> <line color="C_border_unfocused" x1="2" y1="0" x2="width-3" y2="0" /> <line color="C_border_unfocused" x1="0" y1="height-1" x2="width-1" y2="height-1" /> <line color="C_border_unfocused" x1="0" y1="2" x2="0" y2="height-2" /> <line color="C_border_unfocused" x1="width-1" y1="2" x2="width-1" y2="height-2" /> <arc color="C_border_unfocused" x="0" y="0" width="3" height="3" start_angle="270" extent_angle="90" /> <arc color="C_border_unfocused" x="width-3" y="0" width="2" height="3" start_angle="0" extent_angle="90" /> <!-- double arcs for darker borders --> <arc color="C_border_unfocused" x="0" y="0" width="3" height="3" start_angle="270" extent_angle="90" /> <arc color="C_border_unfocused" x="width-3" y="0" width="2" height="3" start_angle="0" extent_angle="90" /> </draw_ops> <draw_ops name="border_right_focused"> <line x1="width-1" y1="0" x2="width-1" y2="height" color="C_border_focused" /> </draw_ops> <draw_ops name="border_right_unfocused"> <line x1="width-1" y1="0" x2="width-1" y2="height" color="C_border_unfocused" /> </draw_ops> <draw_ops name="border_left_focused"> <line x1="0" y1="0" x2="0" y2="height" color="C_border_focused" /> </draw_ops> <draw_ops name="border_left_unfocused"> <line x1="0" y1="0" x2="0" y2="height" color="C_border_unfocused" /> </draw_ops> <!-- BUTTON ICONS --> <!-- note: negative values in x or y causes gnome-shell to crash --> <!-- Close icon --> <draw_ops name="close_focused"> <image filename="close_focused_normal.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="close_focused_prelight"> <image filename="close_focused_prelight.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="close_focused_pressed"> <image filename="close_focused_pressed.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="close_unfocused"> <image filename="close_unfocused.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="close_unfocused_prelight"> <image filename="close_unfocused_prelight.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="close_unfocused_pressed"> <image filename="close_unfocused_pressed.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <!-- Maximize icon --> <draw_ops name="maximize_focused"> <image filename="maximize_focused_normal.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="maximize_focused_prelight"> <image filename="maximize_focused_prelight.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="maximize_focused_pressed"> <image filename="maximize_focused_pressed.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="maximize_unfocused"> <image filename="maximize_unfocused.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="maximize_unfocused_prelight"> <image filename="maximize_unfocused_prelight.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="maximize_unfocused_pressed"> <image filename="maximize_unfocused_pressed.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <!-- Unmaximize icon --> <draw_ops name="unmaximize_focused"> <image filename="unmaximize_focused_normal.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="unmaximize_focused_prelight"> <image filename="unmaximize_focused_prelight.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="unmaximize_focused_pressed"> <image filename="unmaximize_focused_pressed.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="unmaximize_unfocused"> <image filename="unmaximize_unfocused.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="unmaximize_unfocused_prelight"> <image filename="unmaximize_unfocused_prelight.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="unmaximize_unfocused_pressed"> <image filename="unmaximize_unfocused_prelight.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <!-- Minimize icon --> <draw_ops name="minimize_focused"> <image filename="minimize_focused_normal.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="minimize_focused_prelight"> <image filename="minimize_focused_prelight.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="minimize_focused_pressed"> <image filename="minimize_focused_pressed.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="minimize_unfocused"> <image filename="minimize_unfocused.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="minimize_unfocused_prelight"> <image filename="minimize_unfocused_prelight.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="minimize_unfocused_pressed"> <image filename="minimize_unfocused_pressed.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <!-- Menu icon --> <draw_ops name="menu_focused"> <image filename="menu_focused_normal.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="menu_focused_prelight"> <image filename="menu_focused_prelight.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="menu_focused_pressed"> <image filename="menu_focused_pressed.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="menu_unfocused"> <image filename="menu_unfocused.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="menu_unfocused_prelight"> <image filename="menu_unfocused_prelight.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="menu_unfocused_pressed"> <image filename="menu_unfocused_pressed.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <!-- Shade icon --> <draw_ops name="shade_focused"> <image filename="shade_focused_normal.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="shade_focused_prelight"> <image filename="shade_focused_prelight.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="shade_focused_pressed"> <image filename="shade_focused_pressed.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="shade_unfocused"> <image filename="shade_unfocused.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="shade_unfocused_prelight"> <image filename="shade_unfocused_prelight.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="shade_unfocused_pressed"> <image filename="shade_unfocused_pressed.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <!-- Unshade icon --> <draw_ops name="unshade_focused"> <image filename="unshade_focused_normal.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="unshade_focused_prelight"> <image filename="unshade_focused_prelight.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="unshade_focused_pressed"> <image filename="unshade_focused_pressed.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="unshade_unfocused"> <image filename="unshade_unfocused.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="unshade_unfocused_prelight"> <image filename="unshade_unfocused_prelight.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="unshade_unfocused_pressed"> <image filename="unshade_unfocused_pressed.png" x="0" y="2" width="object_width" height="object_height" /> </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="rounded_titlebar_focused" /> <piece position="title" draw_ops="title_focused" /> <piece position="overlay" draw_ops="rounded_border_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="prelight" draw_ops="menu_focused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="prelight" draw_ops="shade_focused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="unshade_focused" /> <button function="unshade" state="prelight" draw_ops="unshade_focused_prelight" /> <button function="unshade" state="pressed" draw_ops="unshade_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_fill_unfocused" /> <piece position="title" draw_ops="title_unfocused" /> <piece position="overlay" draw_ops="rounded_border_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="unshade_unfocused" /> <button function="unshade" state="prelight" draw_ops="unshade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="unshade_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_fill_focused" /> <piece position="title" draw_ops="title_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="prelight" draw_ops="menu_focused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="prelight" draw_ops="shade_focused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="unshade_focused" /> <button function="unshade" state="prelight" draw_ops="unshade_focused_prelight" /> <button function="unshade" state="pressed" draw_ops="unshade_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_fill_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="unshade_unfocused" /> <button function="unshade" state="prelight" draw_ops="unshade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="unshade_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_fill_focused" /> <piece position="title" draw_ops="title_focused" /> <piece position="overlay"><draw_ops><line x1="0" y1="height-1" x2="width" y2="height-1" color="C_border_focused" /></draw_ops></piece> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="prelight" draw_ops="menu_focused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="prelight" draw_ops="shade_focused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="unshade_focused" /> <button function="unshade" state="prelight" draw_ops="unshade_focused_prelight" /> <button function="unshade" state="pressed" draw_ops="unshade_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_fill_unfocused" /> <piece position="title" draw_ops="title_unfocused" /> <piece position="overlay"><draw_ops><line x1="0" y1="height-1" x2="width" y2="height-1" color="C_border_unfocused" /></draw_ops></piece> <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="unshade_unfocused" /> <button function="unshade" state="prelight" draw_ops="unshade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="unshade_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="rounded_titlebar_focused" /> <piece position="title" draw_ops="title_focused" /> <piece position="overlay" draw_ops="rounded_border_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="prelight" draw_ops="menu_focused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="prelight" draw_ops="shade_focused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="unshade_focused" /> <button function="unshade" state="prelight" draw_ops="unshade_focused_prelight" /> <button function="unshade" state="pressed" draw_ops="unshade_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_unfocused"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="titlebar" draw_ops="titlebar_fill_unfocused" /> <piece position="title" draw_ops="title_unfocused" /> <piece position="overlay" draw_ops="rounded_border_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="prelight"><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="prelight"><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_attached_focused" /> <piece position="title" draw_ops="title_focused" /> <piece position="overlay" draw_ops="border_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="prelight" draw_ops="menu_focused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="prelight" draw_ops="shade_focused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="unshade_focused" /> <button function="unshade" state="prelight" draw_ops="unshade_focused_prelight" /> <button function="unshade" state="pressed" draw_ops="unshade_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_fill_unfocused" /> <piece position="title" draw_ops="title_unfocused" /> <piece position="overlay" draw_ops="border_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="unshade_unfocused" /> <button function="unshade" state="prelight" draw_ops="unshade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="unshade_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_focused" /> <piece position="title" draw_ops="title_focused" /> <piece position="overlay" draw_ops="border_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="prelight" draw_ops="menu_focused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="prelight" draw_ops="shade_focused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="unshade_focused" /> <button function="unshade" state="prelight" draw_ops="unshade_focused_prelight" /> <button function="unshade" state="pressed" draw_ops="unshade_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_fill_unfocused" /> <piece position="title" draw_ops="title_unfocused" /> <piece position="overlay" draw_ops="border_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="unshade_unfocused" /> <button function="unshade" state="prelight" draw_ops="unshade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="unshade_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="prelight"><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="prelight"><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="prelight"><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="prelight"><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="prelight"><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="prelight"><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_attached_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="prelight"><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="prelight"><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_attached_focused" /> <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="prelight"><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="prelight"><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_fill_focused" /> <piece position="title" draw_ops="title_focused" /> <piece position="overlay" draw_ops="border_right_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="prelight" draw_ops="menu_focused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="prelight" draw_ops="shade_focused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="unshade_focused" /> <button function="unshade" state="prelight" draw_ops="unshade_focused_prelight" /> <button function="unshade" state="pressed" draw_ops="unshade_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_fill_unfocused" /> <piece position="title" draw_ops="title_unfocused" /> <piece position="overlay" draw_ops="border_right_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="unshade_unfocused" /> <button function="unshade" state="prelight" draw_ops="unshade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="unshade_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_fill_focused" /> <piece position="title" draw_ops="title_focused" /> <piece position="overlay" draw_ops="border_left_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="prelight" draw_ops="menu_focused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="prelight" draw_ops="shade_focused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="unshade_focused" /> <button function="unshade" state="prelight" draw_ops="unshade_focused_prelight" /> <button function="unshade" state="pressed" draw_ops="unshade_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_fill_unfocused" /> <piece position="title" draw_ops="title_unfocused" /> <piece position="overlay" draw_ops="border_left_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="unshade_unfocused" /> <button function="unshade" state="prelight" draw_ops="unshade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="unshade_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="prelight"><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="prelight"><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="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> <!-- 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: metacity-1/metacity-theme.xml ================================================ <?xml version="1.0"?> <metacity_theme> <info> <name>Nordic-Polar</name> <author>Eliver Lara <eliverlara@gmail></author> <copyright>ÂEliver Lara, 2019</copyright> <date>2019</date> <description>Nordic Window Theme</description> </info> <!-- CONSTANTS --> <constant name="C_titlebar" value="#2b313c" /> <constant name="C_titlebar_unfocused" value="#2b313c" /> <constant name="C_border_focused" value="#2b313c" /> <constant name="C_border_unfocused" value="#2b313c" /> <constant name="C_title_focused" value="#d8dee9" /> <constant name="C_title_unfocused" value="#93979f" /> <constant name="C_wm_button_background" value="#fc2" /> <constant name="C_wm_button_foreground" value="#283141" /> <constant name="C_wm_button_unfocused" value="#e6e8eb" /> <constant name="C_close_button" value="#283141" /> <constant name="C_maximize_button" value="#283141" /> <constant name="C_restore_button" value="#283141" /> <constant name="C_minimize_button" value="#283141" /> <!-- GEOMETRY --> <!-- Focused window --> <frame_geometry name="normal" title_scale="medium" rounded_top_left="4" rounded_top_right="4"> <distance name="left_width" value="1" /> <distance name="right_width" value="1" /> <distance name="bottom_height" value="3" /> <distance name="left_titlebar_edge" value="5" /> <distance name="right_titlebar_edge" value="5" /> <distance name="title_vertical_pad" value="4" /> <aspect_ratio name="button" value="1.0" /> <border name="title_border" left="4" right="4" top="4" bottom="4" /> <border name="button_border" left="0" right="0" top="4" bottom="4" /> </frame_geometry> <!-- Unfocused window --> <frame_geometry name="normal_unfocused" title_scale="medium" rounded_top_left="4" rounded_top_right="4" parent="normal" > <distance name="left_width" value="0" /> <distance name="right_width" value="0" /> <distance name="bottom_height" value="0" /> <distance name="left_titlebar_edge" value="5"/> <distance name="right_titlebar_edge" value="5"/> <distance name="title_vertical_pad" value="4" /> <border name="title_border" left="4" right="4" top="4" bottom="4" /> <border name="button_border" left="0" right="0" top="4" bottom="4" /> </frame_geometry> <!-- Maximized window --> <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="title_vertical_pad" value="4" /> <border name="title_border" left="4" right="4" top="4" bottom="4" /> <border name="button_border" left="0" right="0" top="4" bottom="4" /> </frame_geometry> <!-- Left tiled window --> <frame_geometry name="tiled_left" title_scale="medium" rounded_top_left="false" rounded_top_right="false" parent="max"> <distance name="right_width" value="0" /> </frame_geometry> <!-- Right tiled window --> <frame_geometry name="tiled_right" title_scale="medium" rounded_top_left="false" rounded_top_right="false" parent="max"> <distance name="left_width" value="0" /> </frame_geometry> <!-- Small window --> <frame_geometry name="small" title_scale="small" parent="normal" rounded_top_left="false" rounded_top_right="false"> <distance name="title_vertical_pad" value="4" /> <border name="title_border" left="4" right="4" top="0" bottom="0" /> <border name="button_border" left="0" right="0" top="0" bottom="0" /> </frame_geometry> <!-- Small unfocused window --> <frame_geometry name="small_unfocused" parent="small"> <distance name="left_titlebar_edge" value="5"/> <distance name="right_titlebar_edge" value="5"/> </frame_geometry> <!-- No buttons --> <frame_geometry name="nobuttons" hide_buttons="true" parent="normal"> </frame_geometry> <!-- Border --> <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" /> <distance name="title_vertical_pad" value="1" /> <border name="title_border" left="10" right="10" top="0" bottom="0" /> <border name="button_border" left="0" right="0" top="0" bottom="0"/> </frame_geometry> <!-- Borderless --> <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="0" right="0" top="0" bottom="0" /> <border name="button_border" left="0" right="0" top="0" bottom="0" /> </frame_geometry> <!-- Modal --> <frame_geometry name="modal" title_scale="small" hide_buttons="true" rounded_top_left="false" rounded_top_right="false" parent="small"> <distance name="title_vertical_pad" value="5"/> </frame_geometry> <frame_geometry name="attached" title_scale="medium" hide_buttons="true" rounded_top_left="false" rounded_top_right="false" parent="normal"> <distance name="title_vertical_pad" value="8"/> <distance name="bottom_height" value="1"/> <distance name="left_width" value="1"/> <distance name="right_width" value="1"/> </frame_geometry> <!-- TITLES --> <!-- Title alignment --> <draw_ops name="title_focused"> <title x="(0 `max` ((width - title_width) / 2)) + 2" y="(0 `max` ((height - title_height) / 2))" 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))" color="C_title_unfocused" /> </draw_ops> <!-- WINDOW DECORATIONS --> <draw_ops name="entire_background_focused"> <rectangle color="C_titlebar" x="0" y="0" width="width" height="height" filled="true" /> </draw_ops> <draw_ops name="entire_background_unfocused"> <include name="entire_background_focused" /> </draw_ops> <draw_ops name="titlebar_fill_focused"> <rectangle color="C_titlebar" x="4" y="0" width="width" height="height" filled="true" /> </draw_ops> <draw_ops name="titlebar_fill_attached_focused"> <include name="entire_background_focused" /> </draw_ops> <draw_ops name="titlebar_fill_unfocused"> <rectangle color="C_titlebar_unfocused" x="0" y="0" width="width" height="height" filled="true" /> </draw_ops> <draw_ops name="titlebar_focused"> <include name="titlebar_fill_focused" /> </draw_ops> <draw_ops name="titlebar_attached_focused"> <!-- titlebar for attached and modal dialogs --> <include name="titlebar_fill_attached_focused" /> </draw_ops> <draw_ops name="rounded_titlebar_focused"> <include name="titlebar_fill_focused" /> </draw_ops> <draw_ops name="border_focused"> <rectangle color="C_border_focused" x="0" y="0" width="width-1" height="height-1" filled="false" /> </draw_ops> <draw_ops name="border_unfocused"> <rectangle color="C_border_unfocused" x="0" y="0" width="width-1" height="height-1" filled="false" /> </draw_ops> <draw_ops name="rounded_border_focused"> <line color="C_border_focused" x1="2" y1="0" x2="width-3" y2="0" /> <line color="C_border_focused" x1="0" y1="height-1" x2="width-1" y2="height-1" /> <line color="C_border_focused" x1="0" y1="2" x2="0" y2="height-2" /> <line color="C_border_focused" x1="width-1" y1="2" x2="width-1" y2="height-2" /> <arc color="C_border_focused" x="0" y="0" width="3" height="3" start_angle="270" extent_angle="90" /> <arc color="C_border_focused" x="width-3" y="0" width="2" height="3" start_angle="0" extent_angle="90" /> <!-- double arcs for darker borders --> <arc color="C_border_focused" x="0" y="0" width="3" height="3" start_angle="270" extent_angle="90" /> <arc color="C_border_focused" x="width-3" y="0" width="2" height="3" start_angle="0" extent_angle="90" /> </draw_ops> <draw_ops name="rounded_border_unfocused"> <line color="C_border_unfocused" x1="2" y1="0" x2="width-3" y2="0" /> <line color="C_border_unfocused" x1="0" y1="height-1" x2="width-1" y2="height-1" /> <line color="C_border_unfocused" x1="0" y1="2" x2="0" y2="height-2" /> <line color="C_border_unfocused" x1="width-1" y1="2" x2="width-1" y2="height-2" /> <arc color="C_border_unfocused" x="0" y="0" width="3" height="3" start_angle="270" extent_angle="90" /> <arc color="C_border_unfocused" x="width-3" y="0" width="2" height="3" start_angle="0" extent_angle="90" /> <!-- double arcs for darker borders --> <arc color="C_border_unfocused" x="0" y="0" width="3" height="3" start_angle="270" extent_angle="90" /> <arc color="C_border_unfocused" x="width-3" y="0" width="2" height="3" start_angle="0" extent_angle="90" /> </draw_ops> <draw_ops name="border_right_focused"> <line x1="width-1" y1="0" x2="width-1" y2="height" color="C_border_focused" /> </draw_ops> <draw_ops name="border_right_unfocused"> <line x1="width-1" y1="0" x2="width-1" y2="height" color="C_border_unfocused" /> </draw_ops> <draw_ops name="border_left_focused"> <line x1="0" y1="0" x2="0" y2="height" color="C_border_focused" /> </draw_ops> <draw_ops name="border_left_unfocused"> <line x1="0" y1="0" x2="0" y2="height" color="C_border_unfocused" /> </draw_ops> <!-- BUTTON ICONS --> <!-- note: negative values in x or y causes gnome-shell to crash --> <!-- Close icon --> <draw_ops name="close_focused"> <image filename="close_focused_normal.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="close_focused_prelight"> <image filename="close_focused_prelight.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="close_focused_pressed"> <image filename="close_focused_pressed.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="close_unfocused"> <image filename="close_unfocused.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="close_unfocused_prelight"> <image filename="close_unfocused_prelight.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="close_unfocused_pressed"> <image filename="close_unfocused_pressed.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <!-- Maximize icon --> <draw_ops name="maximize_focused"> <image filename="maximize_focused_normal.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="maximize_focused_prelight"> <image filename="maximize_focused_prelight.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="maximize_focused_pressed"> <image filename="maximize_focused_pressed.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="maximize_unfocused"> <image filename="maximize_unfocused.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="maximize_unfocused_prelight"> <image filename="maximize_unfocused_prelight.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="maximize_unfocused_pressed"> <image filename="maximize_unfocused_pressed.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <!-- Unmaximize icon --> <draw_ops name="unmaximize_focused"> <image filename="unmaximize_focused_normal.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="unmaximize_focused_prelight"> <image filename="unmaximize_focused_prelight.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="unmaximize_focused_pressed"> <image filename="unmaximize_focused_pressed.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="unmaximize_unfocused"> <image filename="unmaximize_unfocused.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="unmaximize_unfocused_prelight"> <image filename="unmaximize_unfocused_prelight.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="unmaximize_unfocused_pressed"> <image filename="unmaximize_unfocused_prelight.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <!-- Minimize icon --> <draw_ops name="minimize_focused"> <image filename="minimize_focused_normal.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="minimize_focused_prelight"> <image filename="minimize_focused_prelight.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="minimize_focused_pressed"> <image filename="minimize_focused_pressed.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="minimize_unfocused"> <image filename="minimize_unfocused.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="minimize_unfocused_prelight"> <image filename="minimize_unfocused_prelight.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="minimize_unfocused_pressed"> <image filename="minimize_unfocused_pressed.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <!-- Menu icon --> <draw_ops name="menu_focused"> <image filename="menu_focused_normal.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="menu_focused_prelight"> <image filename="menu_focused_prelight.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="menu_focused_pressed"> <image filename="menu_focused_pressed.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="menu_unfocused"> <image filename="menu_unfocused.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="menu_unfocused_prelight"> <image filename="menu_unfocused_prelight.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="menu_unfocused_pressed"> <image filename="menu_unfocused_pressed.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <!-- Shade icon --> <draw_ops name="shade_focused"> <image filename="shade_focused_normal.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="shade_focused_prelight"> <image filename="shade_focused_prelight.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="shade_focused_pressed"> <image filename="shade_focused_pressed.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="shade_unfocused"> <image filename="shade_unfocused.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="shade_unfocused_prelight"> <image filename="shade_unfocused_prelight.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="shade_unfocused_pressed"> <image filename="shade_unfocused_pressed.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <!-- Unshade icon --> <draw_ops name="unshade_focused"> <image filename="unshade_focused_normal.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="unshade_focused_prelight"> <image filename="unshade_focused_prelight.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="unshade_focused_pressed"> <image filename="unshade_focused_pressed.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="unshade_unfocused"> <image filename="unshade_unfocused.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="unshade_unfocused_prelight"> <image filename="unshade_unfocused_prelight.png" x="0" y="2" width="object_width" height="object_height" /> </draw_ops> <draw_ops name="unshade_unfocused_pressed"> <image filename="unshade_unfocused_pressed.png" x="0" y="2" width="object_width" height="object_height" /> </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="rounded_titlebar_focused" /> <piece position="title" draw_ops="title_focused" /> <piece position="overlay" draw_ops="rounded_border_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="prelight" draw_ops="menu_focused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="prelight" draw_ops="shade_focused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="unshade_focused" /> <button function="unshade" state="prelight" draw_ops="unshade_focused_prelight" /> <button function="unshade" state="pressed" draw_ops="unshade_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_fill_unfocused" /> <piece position="title" draw_ops="title_unfocused" /> <piece position="overlay" draw_ops="rounded_border_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="unshade_unfocused" /> <button function="unshade" state="prelight" draw_ops="unshade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="unshade_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_fill_focused" /> <piece position="title" draw_ops="title_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="prelight" draw_ops="menu_focused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="prelight" draw_ops="shade_focused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="unshade_focused" /> <button function="unshade" state="prelight" draw_ops="unshade_focused_prelight" /> <button function="unshade" state="pressed" draw_ops="unshade_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_fill_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="unshade_unfocused" /> <button function="unshade" state="prelight" draw_ops="unshade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="unshade_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_fill_focused" /> <piece position="title" draw_ops="title_focused" /> <piece position="overlay"><draw_ops><line x1="0" y1="height-1" x2="width" y2="height-1" color="C_border_focused" /></draw_ops></piece> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="prelight" draw_ops="menu_focused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="prelight" draw_ops="shade_focused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="unshade_focused" /> <button function="unshade" state="prelight" draw_ops="unshade_focused_prelight" /> <button function="unshade" state="pressed" draw_ops="unshade_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_fill_unfocused" /> <piece position="title" draw_ops="title_unfocused" /> <piece position="overlay"><draw_ops><line x1="0" y1="height-1" x2="width" y2="height-1" color="C_border_unfocused" /></draw_ops></piece> <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="unshade_unfocused" /> <button function="unshade" state="prelight" draw_ops="unshade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="unshade_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="rounded_titlebar_focused" /> <piece position="title" draw_ops="title_focused" /> <piece position="overlay" draw_ops="rounded_border_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="prelight" draw_ops="menu_focused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="prelight" draw_ops="shade_focused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="unshade_focused" /> <button function="unshade" state="prelight" draw_ops="unshade_focused_prelight" /> <button function="unshade" state="pressed" draw_ops="unshade_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_unfocused"> <piece position="entire_background" draw_ops="entire_background_unfocused" /> <piece position="titlebar" draw_ops="titlebar_fill_unfocused" /> <piece position="title" draw_ops="title_unfocused" /> <piece position="overlay" draw_ops="rounded_border_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="prelight"><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="prelight"><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_attached_focused" /> <piece position="title" draw_ops="title_focused" /> <piece position="overlay" draw_ops="border_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="prelight" draw_ops="menu_focused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="prelight" draw_ops="shade_focused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="unshade_focused" /> <button function="unshade" state="prelight" draw_ops="unshade_focused_prelight" /> <button function="unshade" state="pressed" draw_ops="unshade_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_fill_unfocused" /> <piece position="title" draw_ops="title_unfocused" /> <piece position="overlay" draw_ops="border_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="unshade_unfocused" /> <button function="unshade" state="prelight" draw_ops="unshade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="unshade_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_focused" /> <piece position="title" draw_ops="title_focused" /> <piece position="overlay" draw_ops="border_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="prelight" draw_ops="menu_focused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="prelight" draw_ops="shade_focused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="unshade_focused" /> <button function="unshade" state="prelight" draw_ops="unshade_focused_prelight" /> <button function="unshade" state="pressed" draw_ops="unshade_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_fill_unfocused" /> <piece position="title" draw_ops="title_unfocused" /> <piece position="overlay" draw_ops="border_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="unshade_unfocused" /> <button function="unshade" state="prelight" draw_ops="unshade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="unshade_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="prelight"><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="prelight"><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="prelight"><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="prelight"><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="prelight"><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="prelight"><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_attached_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="prelight"><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="prelight"><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_attached_focused" /> <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="prelight"><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="prelight"><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_fill_focused" /> <piece position="title" draw_ops="title_focused" /> <piece position="overlay" draw_ops="border_right_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="prelight" draw_ops="menu_focused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="prelight" draw_ops="shade_focused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="unshade_focused" /> <button function="unshade" state="prelight" draw_ops="unshade_focused_prelight" /> <button function="unshade" state="pressed" draw_ops="unshade_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_fill_unfocused" /> <piece position="title" draw_ops="title_unfocused" /> <piece position="overlay" draw_ops="border_right_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="unshade_unfocused" /> <button function="unshade" state="prelight" draw_ops="unshade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="unshade_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_fill_focused" /> <piece position="title" draw_ops="title_focused" /> <piece position="overlay" draw_ops="border_left_focused" /> <button function="close" state="normal" draw_ops="close_focused" /> <button function="close" state="prelight" draw_ops="close_focused_prelight" /> <button function="close" state="pressed" draw_ops="close_focused_pressed" /> <button function="maximize" state="normal" draw_ops="maximize_focused" /> <button function="maximize" state="prelight" draw_ops="maximize_focused_prelight" /> <button function="maximize" state="pressed" draw_ops="maximize_focused_pressed" /> <button function="minimize" state="normal" draw_ops="minimize_focused" /> <button function="minimize" state="prelight" draw_ops="minimize_focused_prelight" /> <button function="minimize" state="pressed" draw_ops="minimize_focused_pressed" /> <button function="menu" state="normal" draw_ops="menu_focused" /> <button function="menu" state="prelight" draw_ops="menu_focused_prelight" /> <button function="menu" state="pressed" draw_ops="menu_focused_pressed" /> <button function="shade" state="normal" draw_ops="shade_focused" /> <button function="shade" state="prelight" draw_ops="shade_focused_prelight" /> <button function="shade" state="pressed" draw_ops="shade_focused_pressed" /> <button function="unshade" state="normal" draw_ops="unshade_focused" /> <button function="unshade" state="prelight" draw_ops="unshade_focused_prelight" /> <button function="unshade" state="pressed" draw_ops="unshade_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_fill_unfocused" /> <piece position="title" draw_ops="title_unfocused" /> <piece position="overlay" draw_ops="border_left_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="unshade_unfocused" /> <button function="unshade" state="prelight" draw_ops="unshade_unfocused_prelight" /> <button function="unshade" state="pressed" draw_ops="unshade_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="prelight"><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="prelight"><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="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> <!-- 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: package.json ================================================ { "name": "nordic-polar", "version": "1.0.0", "description": "Dark theme created using the awesome Nord color palette", "main": "index.js", "scripts": { "build": "git push && sh install.sh" }, "repository": { "type": "git", "url": "git+https://github.com/EliverLara/Nordic-Polar.git" }, "keywords": [], "author": "", "license": "ISC", "bugs": { "url": "https://github.com/EliverLara/Nordic-Polar/issues" }, "homepage": "https://github.com/EliverLara/Nordic-Polar#readme", "dependencies": { "gulp": "^4.0.0", "gulp-exec": "^2.1.3", "gulp-sass": "^4.0.2" } } ================================================ FILE: src/render-gtk3-assets-hidpi.py ================================================ #!/usr/bin/python3 import os import sys import xml.sax import subprocess INKSCAPE = '/usr/bin/inkscape' OPTIPNG = '/usr/bin/optipng' MAINDIR = '../' SRC = os.path.join('.', 'gtk3') inkscape_process = None def optimize_png(png_file): if os.path.exists(OPTIPNG): process = subprocess.Popen([OPTIPNG, '-quiet', '-o7', png_file]) process.wait() def wait_for_prompt(process, command=None): if command is not None: process.stdin.write((command+'\n').encode('utf-8')) # This is kinda ugly ... # Wait for just a '>', or '\n>' if some other char appearead first output = process.stdout.read(1) if output == b'>': return output += process.stdout.read(1) # while output != b'\n>': # output += process.stdout.read(1) # output = output[1:] def start_inkscape(): process = subprocess.Popen( [INKSCAPE, '--shell'], bufsize=0, stdin=subprocess.PIPE, stdout=subprocess.PIPE ) wait_for_prompt(process) return process def inkscape_render_rect(icon_file, rect, output_file): global inkscape_process if inkscape_process is None: inkscape_process = start_inkscape() wait_for_prompt(inkscape_process, 'file-open:%s; export-id:%s; export-filename:%s; export-dpi:180; export-do' % (icon_file, rect, output_file)) optimize_png(output_file) class ContentHandler(xml.sax.ContentHandler): ROOT = 0 SVG = 1 LAYER = 2 OTHER = 3 TEXT = 4 def __init__(self, path, force=False, filter=None): self.stack = [self.ROOT] self.inside = [self.ROOT] self.path = path self.rects = [] self.state = self.ROOT self.chars = "" self.force = force self.filter = filter def endDocument(self): pass def startElement(self, name, attrs): if self.inside[-1] == self.ROOT: if name == "svg": self.stack.append(self.SVG) self.inside.append(self.SVG) return elif self.inside[-1] == self.SVG: if (name == "g" and ('inkscape:groupmode' in attrs) and ('inkscape:label' in attrs) and attrs['inkscape:groupmode'] == 'layer' and attrs['inkscape:label'].startswith('Baseplate')): self.stack.append(self.LAYER) self.inside.append(self.LAYER) self.context = None self.icon_name = None self.rects = [] return elif self.inside[-1] == self.LAYER: if name == "text" and ('inkscape:label' in attrs) and attrs['inkscape:label'] == 'context': self.stack.append(self.TEXT) self.inside.append(self.TEXT) self.text = 'context' self.chars = "" return elif name == "text" and ('inkscape:label' in attrs) and attrs['inkscape:label'] == 'icon-name': self.stack.append(self.TEXT) self.inside.append(self.TEXT) self.text = 'icon-name' self.chars = "" return elif name == "rect": self.rects.append(attrs) self.stack.append(self.OTHER) def endElement(self, name): stacked = self.stack.pop() if self.inside[-1] == stacked: self.inside.pop() if stacked == self.TEXT and self.text is not None: assert self.text in ['context', 'icon-name'] if self.text == 'context': self.context = self.chars elif self.text == 'icon-name': self.icon_name = self.chars self.text = None elif stacked == self.LAYER: assert self.icon_name assert self.context if self.filter is not None and not self.icon_name in self.filter: return print (self.context, self.icon_name) for rect in self.rects: width = rect['width'] height = rect['height'] id = rect['id'] dir = os.path.join(MAINDIR, self.context) outfile = os.path.join(dir, self.icon_name+'@2'+'.png') if not os.path.exists(dir): os.makedirs(dir) # Do a time based check! if self.force or not os.path.exists(outfile): inkscape_render_rect(self.path, id, outfile) sys.stdout.write('.') else: stat_in = os.stat(self.path) stat_out = os.stat(outfile) if stat_in.st_mtime > stat_out.st_mtime: inkscape_render_rect(self.path, id, outfile) sys.stdout.write('.') else: sys.stdout.write('-') sys.stdout.flush() sys.stdout.write('\n') sys.stdout.flush() def characters(self, chars): self.chars += chars.strip() if len(sys.argv) == 1: if not os.path.exists(MAINDIR): os.mkdir(MAINDIR) print ('Rendering from SVGs in', SRC) for file in os.listdir(SRC): if file[-4:] == '.svg': file = os.path.join(SRC, file) handler = ContentHandler(file) xml.sax.parse(open(file), handler) else: file = os.path.join(SRC, sys.argv[1] + '.svg') if len(sys.argv) > 2: icons = sys.argv[2:] else: icons = None if os.path.exists(os.path.join(file)): handler = ContentHandler(file, True, filter=icons) xml.sax.parse(open(file), handler) else: print ("Error: No such file", file) sys.exit(1) ================================================ FILE: src/render-gtk3-assets.py ================================================ #!/usr/bin/python3 import os import sys import xml.sax import subprocess INKSCAPE = '/usr/bin/inkscape' OPTIPNG = '/usr/bin/optipng' MAINDIR = '../' SRC = os.path.join('.', 'gtk3') inkscape_process = None def optimize_png(png_file): if os.path.exists(OPTIPNG): process = subprocess.Popen([OPTIPNG, '-quiet', '-o7', png_file]) process.wait() def wait_for_prompt(process, command=None): if command is not None: process.stdin.write((command+'\n').encode('utf-8')) # This is kinda ugly ... # Wait for just a '>', or '\n>' if some other char appearead first output = process.stdout.read(1) if output == b'>': return output += process.stdout.read(1) # while output != b'\n>': # output += process.stdout.read(1) # output = output[1:] def start_inkscape(): process = subprocess.Popen( [INKSCAPE, '--shell'], bufsize=0, stdin=subprocess.PIPE, stdout=subprocess.PIPE ) wait_for_prompt(process) return process def inkscape_render_rect(icon_file, rect, output_file): global inkscape_process if inkscape_process is None: inkscape_process = start_inkscape() wait_for_prompt(inkscape_process, 'file-open:%s; export-id:%s; export-filename:%s; export-do' % (icon_file, rect, output_file)) optimize_png(output_file) class ContentHandler(xml.sax.ContentHandler): ROOT = 0 SVG = 1 LAYER = 2 OTHER = 3 TEXT = 4 def __init__(self, path, force=False, filter=None): self.stack = [self.ROOT] self.inside = [self.ROOT] self.path = path self.rects = [] self.state = self.ROOT self.chars = "" self.force = force self.filter = filter def endDocument(self): pass def startElement(self, name, attrs): if self.inside[-1] == self.ROOT: if name == "svg": self.stack.append(self.SVG) self.inside.append(self.SVG) return elif self.inside[-1] == self.SVG: if (name == "g" and ('inkscape:groupmode' in attrs) and ('inkscape:label' in attrs) and attrs['inkscape:groupmode'] == 'layer' and attrs['inkscape:label'].startswith('Baseplate')): self.stack.append(self.LAYER) self.inside.append(self.LAYER) self.context = None self.icon_name = None self.rects = [] return elif self.inside[-1] == self.LAYER: if name == "text" and ('inkscape:label' in attrs) and attrs['inkscape:label'] == 'context': self.stack.append(self.TEXT) self.inside.append(self.TEXT) self.text = 'context' self.chars = "" return elif name == "text" and ('inkscape:label' in attrs) and attrs['inkscape:label'] == 'icon-name': self.stack.append(self.TEXT) self.inside.append(self.TEXT) self.text = 'icon-name' self.chars = "" return elif name == "rect": self.rects.append(attrs) self.stack.append(self.OTHER) def endElement(self, name): stacked = self.stack.pop() if self.inside[-1] == stacked: self.inside.pop() if stacked == self.TEXT and self.text is not None: assert self.text in ['context', 'icon-name'] if self.text == 'context': self.context = self.chars elif self.text == 'icon-name': self.icon_name = self.chars self.text = None elif stacked == self.LAYER: assert self.icon_name assert self.context if self.filter is not None and not self.icon_name in self.filter: return print (self.context, self.icon_name) for rect in self.rects: width = rect['width'] height = rect['height'] id = rect['id'] dir = os.path.join(MAINDIR, self.context) outfile = os.path.join(dir, self.icon_name+'.png') if not os.path.exists(dir): os.makedirs(dir) # Do a time based check! if self.force or not os.path.exists(outfile): inkscape_render_rect(self.path, id, outfile) sys.stdout.write('.') else: stat_in = os.stat(self.path) stat_out = os.stat(outfile) if stat_in.st_mtime > stat_out.st_mtime: inkscape_render_rect(self.path, id, outfile) sys.stdout.write('.') else: sys.stdout.write('-') sys.stdout.flush() sys.stdout.write('\n') sys.stdout.flush() def characters(self, chars): self.chars += chars.strip() if len(sys.argv) == 1: if not os.path.exists(MAINDIR): os.mkdir(MAINDIR) print ('Rendering from SVGs in', SRC) for file in os.listdir(SRC): if file[-4:] == '.svg': file = os.path.join(SRC, file) handler = ContentHandler(file) xml.sax.parse(open(file), handler) else: file = os.path.join(SRC, sys.argv[1] + '.svg') if len(sys.argv) > 2: icons = sys.argv[2:] else: icons = None if os.path.exists(os.path.join(file)): handler = ContentHandler(file, True, filter=icons) xml.sax.parse(open(file), handler) else: print ("Error: No such file", file) sys.exit(1) ================================================ FILE: src/render-wm-assets-hidpi.py ================================================ #!/usr/bin/python3 # Thanks to the GNOME theme nerds for the original source of this script import os import sys import xml.sax import subprocess INKSCAPE = '/usr/bin/inkscape' OPTIPNG = '/usr/bin/optipng' MAINDIR = '../' SRC = os.path.join('.', 'wm') inkscape_process = None def optimize_png(png_file): if os.path.exists(OPTIPNG): process = subprocess.Popen([OPTIPNG, '-quiet', '-o7', png_file]) process.wait() def wait_for_prompt(process, command=None): if command is not None: process.stdin.write((command+'\n').encode('utf-8')) # This is kinda ugly ... # Wait for just a '>', or '\n>' if some other char appearead first output = process.stdout.read(1) if output == b'>': return output += process.stdout.read(1) # while output != b'\n>': # output += process.stdout.read(1) # output = output[1:] def start_inkscape(): process = subprocess.Popen( [INKSCAPE, '--shell'], bufsize=0, stdin=subprocess.PIPE, stdout=subprocess.PIPE ) wait_for_prompt(process) return process def inkscape_render_rect(icon_file, rect, output_file): global inkscape_process if inkscape_process is None: inkscape_process = start_inkscape() wait_for_prompt(inkscape_process, 'file-open:%s; export-id:%s; export-filename:%s; export-dpi:180; export-do' % (icon_file, rect, output_file)) optimize_png(output_file) class ContentHandler(xml.sax.ContentHandler): ROOT = 0 SVG = 1 LAYER = 2 OTHER = 3 TEXT = 4 def __init__(self, path, force=False, filter=None): self.stack = [self.ROOT] self.inside = [self.ROOT] self.path = path self.rects = [] self.state = self.ROOT self.chars = "" self.force = force self.filter = filter def endDocument(self): pass def startElement(self, name, attrs): if self.inside[-1] == self.ROOT: if name == "svg": self.stack.append(self.SVG) self.inside.append(self.SVG) return elif self.inside[-1] == self.SVG: if (name == "g" and ('inkscape:groupmode' in attrs) and ('inkscape:label' in attrs) and attrs['inkscape:groupmode'] == 'layer' and attrs['inkscape:label'].startswith('Baseplate')): self.stack.append(self.LAYER) self.inside.append(self.LAYER) self.context = None self.icon_name = None self.rects = [] return elif self.inside[-1] == self.LAYER: if name == "text" and ('inkscape:label' in attrs) and attrs['inkscape:label'] == 'context': self.stack.append(self.TEXT) self.inside.append(self.TEXT) self.text='context' self.chars = "" return elif name == "text" and ('inkscape:label' in attrs) and attrs['inkscape:label'] == 'icon-name': self.stack.append(self.TEXT) self.inside.append(self.TEXT) self.text = 'icon-name' self.chars = "" return elif name == "rect": self.rects.append(attrs) self.stack.append(self.OTHER) def endElement(self, name): stacked = self.stack.pop() if self.inside[-1] == stacked: self.inside.pop() if stacked == self.TEXT and self.text is not None: assert self.text in ['context', 'icon-name'] if self.text == 'context': self.context = self.chars elif self.text == 'icon-name': self.icon_name = self.chars self.text = None elif stacked == self.LAYER: assert self.icon_name assert self.context if self.filter is not None and not self.icon_name in self.filter: return print (self.context, self.icon_name) for rect in self.rects: width = rect['width'] height = rect['height'] id = rect['id'] dir = os.path.join(MAINDIR, self.context) outfile = os.path.join(dir, self.icon_name+'.png') if not os.path.exists(dir): os.makedirs(dir) # Do a time based check! if self.force or not os.path.exists(outfile): inkscape_render_rect(self.path, id, outfile) sys.stdout.write('.') else: stat_in = os.stat(self.path) stat_out = os.stat(outfile) if stat_in.st_mtime > stat_out.st_mtime: inkscape_render_rect(self.path, id, outfile) sys.stdout.write('.') else: sys.stdout.write('-') sys.stdout.flush() sys.stdout.write('\n') sys.stdout.flush() def characters(self, chars): self.chars += chars.strip() if len(sys.argv) == 1: if not os.path.exists(MAINDIR): os.mkdir(MAINDIR) print ('Rendering from SVGs in', SRC) for file in os.listdir(SRC): if file[-4:] == '.svg': file = os.path.join(SRC, file) handler = ContentHandler(file) xml.sax.parse(open(file), handler) else: file = os.path.join(SRC, sys.argv[1] + '.svg') if len(sys.argv) > 2: icons = sys.argv[2:] else: icons = None if os.path.exists(os.path.join(file)): handler = ContentHandler(file, True, filter=icons) xml.sax.parse(open(file), handler) else: print ("Error: No such file", file) sys.exit(1) ================================================ FILE: src/render-wm-assets.py ================================================ #!/usr/bin/python3 # Thanks to the GNOME theme nerds for the original source of this script import os import sys import xml.sax import subprocess INKSCAPE = '/usr/bin/inkscape' OPTIPNG = '/usr/bin/optipng' MAINDIR = '../' SRC = os.path.join('.', 'wm') inkscape_process = None def optimize_png(png_file): if os.path.exists(OPTIPNG): process = subprocess.Popen([OPTIPNG, '-quiet', '-o7', png_file]) process.wait() def wait_for_prompt(process, command=None): if command is not None: process.stdin.write((command+'\n').encode('utf-8')) # This is kinda ugly ... # Wait for just a '>', or '\n>' if some other char appearead first output = process.stdout.read(1) if output == b'>': return output += process.stdout.read(1) # while output != b'\n>': # output += process.stdout.read(1) # output = output[1:] def start_inkscape(): process = subprocess.Popen( [INKSCAPE, '--shell'], bufsize=0, stdin=subprocess.PIPE, stdout=subprocess.PIPE ) wait_for_prompt(process) return process def inkscape_render_rect(icon_file, rect, output_file): global inkscape_process if inkscape_process is None: inkscape_process = start_inkscape() wait_for_prompt(inkscape_process, 'file-open:%s; export-id:%s; export-filename:%s; export-do' % (icon_file, rect, output_file)) optimize_png(output_file) class ContentHandler(xml.sax.ContentHandler): ROOT = 0 SVG = 1 LAYER = 2 OTHER = 3 TEXT = 4 def __init__(self, path, force=False, filter=None): self.stack = [self.ROOT] self.inside = [self.ROOT] self.path = path self.rects = [] self.state = self.ROOT self.chars = "" self.force = force self.filter = filter def endDocument(self): pass def startElement(self, name, attrs): if self.inside[-1] == self.ROOT: if name == "svg": self.stack.append(self.SVG) self.inside.append(self.SVG) return elif self.inside[-1] == self.SVG: if (name == "g" and ('inkscape:groupmode' in attrs) and ('inkscape:label' in attrs) and attrs['inkscape:groupmode'] == 'layer' and attrs['inkscape:label'].startswith('Baseplate')): self.stack.append(self.LAYER) self.inside.append(self.LAYER) self.context = None self.icon_name = None self.rects = [] return elif self.inside[-1] == self.LAYER: if name == "text" and ('inkscape:label' in attrs) and attrs['inkscape:label'] == 'context': self.stack.append(self.TEXT) self.inside.append(self.TEXT) self.text='context' self.chars = "" return elif name == "text" and ('inkscape:label' in attrs) and attrs['inkscape:label'] == 'icon-name': self.stack.append(self.TEXT) self.inside.append(self.TEXT) self.text = 'icon-name' self.chars = "" return elif name == "rect": self.rects.append(attrs) self.stack.append(self.OTHER) def endElement(self, name): stacked = self.stack.pop() if self.inside[-1] == stacked: self.inside.pop() if stacked == self.TEXT and self.text is not None: assert self.text in ['context', 'icon-name'] if self.text == 'context': self.context = self.chars elif self.text == 'icon-name': self.icon_name = self.chars self.text = None elif stacked == self.LAYER: assert self.icon_name assert self.context if self.filter is not None and not self.icon_name in self.filter: return print (self.context, self.icon_name) for rect in self.rects: width = rect['width'] height = rect['height'] id = rect['id'] dir = os.path.join(MAINDIR, self.context) outfile = os.path.join(dir, self.icon_name+'.png') if not os.path.exists(dir): os.makedirs(dir) # Do a time based check! if self.force or not os.path.exists(outfile): inkscape_render_rect(self.path, id, outfile) sys.stdout.write('.') else: stat_in = os.stat(self.path) stat_out = os.stat(outfile) if stat_in.st_mtime > stat_out.st_mtime: inkscape_render_rect(self.path, id, outfile) sys.stdout.write('.') else: sys.stdout.write('-') sys.stdout.flush() sys.stdout.write('\n') sys.stdout.flush() def characters(self, chars): self.chars += chars.strip() if len(sys.argv) == 1: if not os.path.exists(MAINDIR): os.mkdir(MAINDIR) print ('Rendering from SVGs in', SRC) for file in os.listdir(SRC): if file[-4:] == '.svg': file = os.path.join(SRC, file) handler = ContentHandler(file) xml.sax.parse(open(file), handler) else: file = os.path.join(SRC, sys.argv[1] + '.svg') if len(sys.argv) > 2: icons = sys.argv[2:] else: icons = None if os.path.exists(os.path.join(file)): handler = ContentHandler(file, True, filter=icons) xml.sax.parse(open(file), handler) else: print ("Error: No such file", file) sys.exit(1) ================================================ FILE: src/wm_controls.fish ================================================ set -l wm 'close' 'close_prelight' 'close_unfocused' 'min' 'min_prelight' 'maximize' 'maximize_prelight' set -l path '../assets/' for item in $wm inkscape -z $path$item.svg -e $path$item@2.png --export-dpi=192; optipng -o7 --quiet $path$item@2.png end ================================================ FILE: xfwm4/Nordic-Polar-hdpi/xfwm4/themerc ================================================ #button_layout=O|HMC button_offset=2 button_spacing=-1 full_width_title=true title_horizontal_offset=0 title_vertical_offset_active=1 title_vertical_offset_inactive=1 title_shadow_active=false title_shadow_inactive=false active_text_color=#d8dee9 active_text_shadow_color=#d8dee9 inactive_text_color=#778085 inactive_text_shadow_color=#778085 shadow_delta_height=2 shadow_delta_width=0 shadow_delta_x=0 shadow_delta_y=-4 shadow_opacity=46 show_popup_shadow=true show_app_icon=true ================================================ FILE: xfwm4/Nordic-Polar-xhdpi/xfwm4/themerc ================================================ #button_layout=O|HMC button_offset=2 button_spacing=-1 full_width_title=true title_horizontal_offset=0 title_vertical_offset_active=1 title_vertical_offset_inactive=1 title_shadow_active=false title_shadow_inactive=false active_text_color=#d8dee9 active_text_shadow_color=#d8dee9 inactive_text_color=#778085 inactive_text_shadow_color=#778085 shadow_delta_height=2 shadow_delta_width=0 shadow_delta_x=0 shadow_delta_y=-4 shadow_opacity=46 show_popup_shadow=true show_app_icon=true ================================================ FILE: xfwm4/render-assets.sh ================================================ #! /bin/bash INKSCAPE="/usr/bin/inkscape" OPTIPNG="/usr/bin/optipng" for screen in '' '-hdpi' '-xhdpi'; do for i in assets/*; do BASE_FILE_NAME=`basename -s .svg $i` ASSETS_DIR="Nordic-darker${screen}/xfwm4" case "${screen}" in -hdpi) DPI='144' ;; -xhdpi) DPI='192' ;; *) DPI='96' ;; esac mkdir -p $ASSETS_DIR if [ -f $ASSETS_DIR/$BASE_FILE_NAME.png ]; then echo $ASSETS_DIR/$BASE_FILE_NAME.png exists. else echo echo Rendering $ASSETS_DIR/$BASE_FILE_NAME.png $INKSCAPE --export-dpi=$DPI \ --export-filename=$ASSETS_DIR/$BASE_FILE_NAME.png $i \ && $OPTIPNG -o7 --quiet $ASSETS_DIR/$BASE_FILE_NAME.png fi done done exit 0 ================================================ FILE: xfwm4/render_assets.fish ================================================ for i in assets/*; set -l file_name (basename $i .svg) convert -background none $i ./$file_name'.png' ;end ================================================ FILE: xfwm4/themerc ================================================ #button_layout=O|HMC button_offset=2 button_spacing=-1 full_width_title=true title_horizontal_offset=0 title_vertical_offset_active=1 title_vertical_offset_inactive=1 title_shadow_active=false title_shadow_inactive=false active_text_color=#d8dee9 active_text_shadow_color=#d8dee9 inactive_text_color=#778085 inactive_text_shadow_color=#778085 shadow_delta_height=2 shadow_delta_width=0 shadow_delta_x=0 shadow_delta_y=-4 shadow_opacity=46 show_popup_shadow=true show_app_icon=true