From 3fe45e29e4f6f1e19f3b64bd082e0f05eb45dd19 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20M=C3=BCllner?= Date: Fri, 9 Feb 2018 19:22:55 +0100 Subject: [PATCH] theme: Replace gnome-shell-sass submodule with subtree As the style has grown bigger and more complex, generating the different variants from a common source has been a good decision. However given how intertwined the theme is with gnome-shell itself, relying on a submodule has proven to be quite painful. And as things stand right now, it is going to get worse: - using either pre-generated CSS or generating it at build time is odd, and violates meson's strict separation between source- and build directories; we are therefore considering dropping the CSS and depending on sassc to always generate it at build time - with the migration to gitlab, our workflow shifts decisively towards branches; however there is no support in either git or gitlab for handling two brances of separate repositories consecutively, which gets particularly awkward for branches in a private namespace With those pain points in mind, we will adjust our setup as follows: - remove the submodule from gnome-shell and instead import the sass as subtree - after that, the sass sources can be changed like any other files in the repository, and regular contributors can forget that there was ever anything special about them - whenever we want to update the classic style, we can push the subtree changes and bump gnome-shell-extension's sass submodule In other words: Updating the classic styling will become slightly more painful, but not much and only for me; in return, everyone else can stop fiddling with submodules (and buy me a beer). --- .gitmodules | 3 - data/theme/gnome-shell-sass | 1 - data/theme/gnome-shell-sass/COPYING | 339 +++ data/theme/gnome-shell-sass/HACKING | 6 + data/theme/gnome-shell-sass/NEWS | 0 data/theme/gnome-shell-sass/README | 7 + data/theme/gnome-shell-sass/_colors.scss | 44 + data/theme/gnome-shell-sass/_common.scss | 1996 +++++++++++++++++ data/theme/gnome-shell-sass/_drawing.scss | 221 ++ .../_high-contrast-colors.scss | 41 + .../gnome-shell-sass/gnome-shell-sass.doap | 37 + 11 files changed, 2691 insertions(+), 4 deletions(-) delete mode 160000 data/theme/gnome-shell-sass create mode 100644 data/theme/gnome-shell-sass/COPYING create mode 100644 data/theme/gnome-shell-sass/HACKING create mode 100644 data/theme/gnome-shell-sass/NEWS create mode 100644 data/theme/gnome-shell-sass/README create mode 100644 data/theme/gnome-shell-sass/_colors.scss create mode 100644 data/theme/gnome-shell-sass/_common.scss create mode 100644 data/theme/gnome-shell-sass/_drawing.scss create mode 100644 data/theme/gnome-shell-sass/_high-contrast-colors.scss create mode 100644 data/theme/gnome-shell-sass/gnome-shell-sass.doap diff --git a/.gitmodules b/.gitmodules index 475cfb581..f25d09d19 100644 --- a/.gitmodules +++ b/.gitmodules @@ -1,6 +1,3 @@ -[submodule "data/theme/gnome-shell-sass"] - path = data/theme/gnome-shell-sass - url = https://git.gnome.org/browse/gnome-shell-sass [submodule "subprojects/gvc"] path = subprojects/gvc url = https://git.gnome.org/browse/libgnome-volume-control diff --git a/data/theme/gnome-shell-sass b/data/theme/gnome-shell-sass deleted file mode 160000 index d509706ff..000000000 --- a/data/theme/gnome-shell-sass +++ /dev/null @@ -1 +0,0 @@ -Subproject commit d509706ff45800e1c15166d8f803577abfe9f240 diff --git a/data/theme/gnome-shell-sass/COPYING b/data/theme/gnome-shell-sass/COPYING new file mode 100644 index 000000000..e55e5b8a2 --- /dev/null +++ b/data/theme/gnome-shell-sass/COPYING @@ -0,0 +1,339 @@ + GNU GENERAL PUBLIC LICENSE + Version 2, June 1991 + + Copyright (C) 1989, 1991 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 licenses for most software are designed to take away your +freedom to share and change it. By contrast, the GNU General Public +License is intended to guarantee your freedom to share and change free +software--to make sure the software is free for all its users. This +General Public License applies to most of the Free Software +Foundation's software and to any other program whose authors commit to +using it. (Some other Free Software Foundation software is covered by +the GNU Library General Public License instead.) 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 +this service 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 make restrictions that forbid +anyone to deny you these rights or to ask you to surrender the rights. +These restrictions translate to certain responsibilities for you if you +distribute copies of the software, or if you modify it. + + For example, if you distribute copies of such a program, whether +gratis or for a fee, you must give the recipients all the rights that +you have. 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. + + We protect your rights with two steps: (1) copyright the software, and +(2) offer you this license which gives you legal permission to copy, +distribute and/or modify the software. + + Also, for each author's protection and ours, we want to make certain +that everyone understands that there is no warranty for this free +software. If the software is modified by someone else and passed on, we +want its recipients to know that what they have is not the original, so +that any problems introduced by others will not reflect on the original +authors' reputations. + + Finally, any free program is threatened constantly by software +patents. We wish to avoid the danger that redistributors of a free +program will individually obtain patent licenses, in effect making the +program proprietary. To prevent this, we have made it clear that any +patent must be licensed for everyone's free use or not licensed at all. + + The precise terms and conditions for copying, distribution and +modification follow. + + GNU GENERAL PUBLIC LICENSE + TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION + + 0. This License applies to any program or other work which contains +a notice placed by the copyright holder saying it may be distributed +under the terms of this General Public License. The "Program", below, +refers to any such program or work, and a "work based on the Program" +means either the Program or any derivative work under copyright law: +that is to say, a work containing the Program or a portion of it, +either verbatim or with modifications and/or translated into another +language. (Hereinafter, translation is included without limitation in +the term "modification".) Each licensee is addressed as "you". + +Activities other than copying, distribution and modification are not +covered by this License; they are outside its scope. The act of +running the Program is not restricted, and the output from the Program +is covered only if its contents constitute a work based on the +Program (independent of having been made by running the Program). +Whether that is true depends on what the Program does. + + 1. You may copy and distribute 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 and disclaimer of warranty; keep intact all the +notices that refer to this License and to the absence of any warranty; +and give any other recipients of the Program a copy of this License +along with the Program. + +You may charge a fee for the physical act of transferring a copy, and +you may at your option offer warranty protection in exchange for a fee. + + 2. You may modify your copy or copies of the Program or any portion +of it, thus forming a work based on the Program, and copy and +distribute such modifications or work under the terms of Section 1 +above, provided that you also meet all of these conditions: + + a) You must cause the modified files to carry prominent notices + stating that you changed the files and the date of any change. + + b) You must cause any work that you distribute or publish, that in + whole or in part contains or is derived from the Program or any + part thereof, to be licensed as a whole at no charge to all third + parties under the terms of this License. + + c) If the modified program normally reads commands interactively + when run, you must cause it, when started running for such + interactive use in the most ordinary way, to print or display an + announcement including an appropriate copyright notice and a + notice that there is no warranty (or else, saying that you provide + a warranty) and that users may redistribute the program under + these conditions, and telling the user how to view a copy of this + License. (Exception: if the Program itself is interactive but + does not normally print such an announcement, your work based on + the Program is not required to print an announcement.) + +These requirements apply to the modified work as a whole. If +identifiable sections of that work are not derived from the Program, +and can be reasonably considered independent and separate works in +themselves, then this License, and its terms, do not apply to those +sections when you distribute them as separate works. But when you +distribute the same sections as part of a whole which is a work based +on the Program, the distribution of the whole must be on the terms of +this License, whose permissions for other licensees extend to the +entire whole, and thus to each and every part regardless of who wrote it. + +Thus, it is not the intent of this section to claim rights or contest +your rights to work written entirely by you; rather, the intent is to +exercise the right to control the distribution of derivative or +collective works based on the Program. + +In addition, mere aggregation of another work not based on the Program +with the Program (or with a work based on the Program) on a volume of +a storage or distribution medium does not bring the other work under +the scope of this License. + + 3. You may copy and distribute the Program (or a work based on it, +under Section 2) in object code or executable form under the terms of +Sections 1 and 2 above provided that you also do one of the following: + + a) Accompany it with the complete corresponding machine-readable + source code, which must be distributed under the terms of Sections + 1 and 2 above on a medium customarily used for software interchange; or, + + b) Accompany it with a written offer, valid for at least three + years, to give any third party, for a charge no more than your + cost of physically performing source distribution, a complete + machine-readable copy of the corresponding source code, to be + distributed under the terms of Sections 1 and 2 above on a medium + customarily used for software interchange; or, + + c) Accompany it with the information you received as to the offer + to distribute corresponding source code. (This alternative is + allowed only for noncommercial distribution and only if you + received the program in object code or executable form with such + an offer, in accord with Subsection b above.) + +The source code for a work means the preferred form of the work for +making modifications to it. For an executable work, complete source +code means all the source code for all modules it contains, plus any +associated interface definition files, plus the scripts used to +control compilation and installation of the executable. However, as a +special exception, the source code distributed need not include +anything that is normally distributed (in either source or binary +form) with the major components (compiler, kernel, and so on) of the +operating system on which the executable runs, unless that component +itself accompanies the executable. + +If distribution of executable or object code is made by offering +access to copy from a designated place, then offering equivalent +access to copy the source code from the same place counts as +distribution of the source code, even though third parties are not +compelled to copy the source along with the object code. + + 4. You may not copy, modify, sublicense, or distribute the Program +except as expressly provided under this License. Any attempt +otherwise to copy, modify, sublicense or distribute the Program is +void, and will automatically terminate your rights under this License. +However, parties who have received copies, or rights, from you under +this License will not have their licenses terminated so long as such +parties remain in full compliance. + + 5. You are not required to accept this License, since you have not +signed it. However, nothing else grants you permission to modify or +distribute the Program or its derivative works. These actions are +prohibited by law if you do not accept this License. Therefore, by +modifying or distributing the Program (or any work based on the +Program), you indicate your acceptance of this License to do so, and +all its terms and conditions for copying, distributing or modifying +the Program or works based on it. + + 6. Each time you redistribute the Program (or any work based on the +Program), the recipient automatically receives a license from the +original licensor to copy, distribute or modify the Program subject to +these terms and conditions. You may not impose any further +restrictions on the recipients' exercise of the rights granted herein. +You are not responsible for enforcing compliance by third parties to +this License. + + 7. If, as a consequence of a court judgment or allegation of patent +infringement or for any other reason (not limited to patent issues), +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 +distribute so as to satisfy simultaneously your obligations under this +License and any other pertinent obligations, then as a consequence you +may not distribute the Program at all. For example, if a patent +license would not permit royalty-free redistribution of the Program by +all those who receive copies directly or indirectly through you, then +the only way you could satisfy both it and this License would be to +refrain entirely from distribution of the Program. + +If any portion of this section is held invalid or unenforceable under +any particular circumstance, the balance of the section is intended to +apply and the section as a whole is intended to apply in other +circumstances. + +It is not the purpose of this section to induce you to infringe any +patents or other property right claims or to contest validity of any +such claims; this section has the sole purpose of protecting the +integrity of the free software distribution system, which is +implemented by public license practices. Many people have made +generous contributions to the wide range of software distributed +through that system in reliance on consistent application of that +system; it is up to the author/donor to decide if he or she is willing +to distribute software through any other system and a licensee cannot +impose that choice. + +This section is intended to make thoroughly clear what is believed to +be a consequence of the rest of this License. + + 8. If the distribution and/or use of the Program is restricted in +certain countries either by patents or by copyrighted interfaces, the +original copyright holder who places the Program under this License +may add an explicit geographical distribution limitation excluding +those countries, so that distribution is permitted only in or among +countries not thus excluded. In such case, this License incorporates +the limitation as if written in the body of this License. + + 9. The Free Software Foundation may publish revised and/or new versions +of the 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 a version number of this License which applies to it and "any +later version", you have the option of following the terms and conditions +either of that version or of any later version published by the Free +Software Foundation. If the Program does not specify a version number of +this License, you may choose any version ever published by the Free Software +Foundation. + + 10. If you wish to incorporate parts of the Program into other free +programs whose distribution conditions are different, write to the author +to ask for permission. For software which is copyrighted by the Free +Software Foundation, write to the Free Software Foundation; we sometimes +make exceptions for this. Our decision will be guided by the two goals +of preserving the free status of all derivatives of our free software and +of promoting the sharing and reuse of software generally. + + NO WARRANTY + + 11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, 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. + + 12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING +WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR +REDISTRIBUTE 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. + + 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 +convey the exclusion of warranty; and each file should have at least +the "copyright" line and a pointer to where the full notice is found. + + + Copyright (C) + + This program is free software; you can redistribute it and/or modify + it under the terms of the GNU General Public License as published by + the Free Software Foundation; either version 2 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, write to the Free Software + Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA + + +Also add information on how to contact you by electronic and paper mail. + +If the program is interactive, make it output a short notice like this +when it starts in an interactive mode: + + Gnomovision version 69, Copyright (C) year name of author + Gnomovision 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, the commands you use may +be called something other than `show w' and `show c'; they could even be +mouse-clicks or menu items--whatever suits your program. + +You should also get your employer (if you work as a programmer) or your +school, if any, to sign a "copyright disclaimer" for the program, if +necessary. Here is a sample; alter the names: + + Yoyodyne, Inc., hereby disclaims all copyright interest in the program + `Gnomovision' (which makes passes at compilers) written by James Hacker. + + , 1 April 1989 + Ty Coon, President of Vice + +This 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 Library General +Public License instead of this License. diff --git a/data/theme/gnome-shell-sass/HACKING b/data/theme/gnome-shell-sass/HACKING new file mode 100644 index 000000000..2a8554b34 --- /dev/null +++ b/data/theme/gnome-shell-sass/HACKING @@ -0,0 +1,6 @@ +--- Generating the css file --- + +You need sass to generate the css file. + +To generate them run from a command line in the project directory: +sass --sourcemap=none --update ./ diff --git a/data/theme/gnome-shell-sass/NEWS b/data/theme/gnome-shell-sass/NEWS new file mode 100644 index 000000000..e69de29bb diff --git a/data/theme/gnome-shell-sass/README b/data/theme/gnome-shell-sass/README new file mode 100644 index 000000000..7f2a257e8 --- /dev/null +++ b/data/theme/gnome-shell-sass/README @@ -0,0 +1,7 @@ +GNOME Shell Sass is a project intended to allow the sharing of the theme sources in sass between gnome-shell and other projects like gnome-shell-extensions. + +License +======= +GNOME Shell Sass is distributed under the terms of the GNU General Public License, +version 2 or later. See the COPYING file for details. + diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss new file mode 100644 index 000000000..d1fa4b6fc --- /dev/null +++ b/data/theme/gnome-shell-sass/_colors.scss @@ -0,0 +1,44 @@ +// When color definition differs for dark and light variant, +// it gets @if ed depending on $variant + + +$base_color: if($variant =='light', #ffffff, #292929); +$bg_color: if($variant =='light', #ededed, #393f3f); +$fg_color: if($variant =='light', #2e3436, #eeeeec); + +$selected_fg_color: #ffffff; +$selected_bg_color: if($variant == 'light', #4a90d9, darken(#4a90d9,20%)); +$selected_borders_color: if($variant=='light', darken($selected_bg_color, 30%), + darken($selected_bg_color, 20%)); +$borders_color: if($variant =='light', darken($bg_color,30%), darken($bg_color,12%)); +$borders_edge: if($variant =='light', white, transparentize($fg_color, 0.9)); +$link_color: if($variant == 'light', darken($selected_bg_color,10%), + lighten($selected_bg_color,20%)); +$link_visited_color: if($variant == 'light', darken($selected_bg_color,20%), + lighten($selected_bg_color,10%)); +$top_hilight: $borders_edge; + +$warning_color: #f57900; +$error_color: #cc0000; +$success_color: if($variant =='light', #73d216, darken(#73d216,10%)); +$destructive_color: if($variant =='light', #ef2929, darken(#ef2929,10%)); + +$osd_fg_color: #eeeeec; +$osd_bg_color: #2e3436; +$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: if($variant =='light', darken($base_color,1%), lighten($base_color,1%)); +$backdrop_bg_color: $bg_color; +$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 80%); +$backdrop_insensitive_color: if($variant =='light', darken($backdrop_bg_color,15%), 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%); diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss new file mode 100644 index 000000000..d166075e4 --- /dev/null +++ b/data/theme/gnome-shell-sass/_common.scss @@ -0,0 +1,1996 @@ +//This is the RIGHT PLACE to edit the stylesheet + +//let's start by telling people not to edit the generated CSS: +$cakeisalie: "This stylesheet is generated, DO NOT EDIT"; +/* #{$cakeisalie} */ + +$panel-corner-radius: 6px; + +/* Copyright 2009, 2015 Red Hat, Inc. + * + * Portions adapted from Mx's data/style/default.css + * Copyright 2009 Intel Corporation + * + * This program is free software; you can redistribute it and/or modify it + * under the terms and conditions of the GNU Lesser General Public License, + * version 2.1, as published by the Free Software Foundation. + * + * This program is distributed in the hope it will be useful, but WITHOUT ANY + * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS + * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for + * more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA. + */ + + +/* GLOBALS */ +$font-size: 11; +$font-family: Cantarell, Sans-Serif; +$_bubble_bg_color: opacify($osd_bg_color,0.25); +$_bubble_fg_color: $osd_fg_color; +$_bubble_borders_color: transparentize($osd_fg_color,0.8); + +stage { + font-family: $font-family; + @include fontsize($font-size); + color: $fg_color; +} + +/* WIDGETS */ + +/* Buttons */ +.button { + border-radius: 3px; + border-width: 1px; + padding: 4px 32px; + @include button(normal); + &:focus { @include button(focus); } + &:insensitive { @include button(insensitive); } + &:active { @include button(active); } + +} + +.modal-dialog-linked-button { + border-right-width: 1px; + @include button(normal); + &:insensitive { @include button(insensitive); } + &:active { @include button(active); } + &:focus { @include button(focus); } + padding: 12px; + + &:first-child { + border-radius: 0px 0px 0px 6px; + } + &:last-child { + border-right-width: 0px; + border-radius: 0px 0px 6px 0px; + } + &:first-child:last-child { + border-right-width: 0px; + border-radius: 0px 0px 6px 6px; + } +} + +/* Entries */ +StEntry { + border-radius: 3px; + padding: 4px; + border-width: 1px; + color: $fg_color; + @include entry(normal); + //&: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; + } +} + + +/* 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, 60%); + //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; + -slider-height: 0.3em; + -slider-background-color: $insensitive_bg_color; //background of the trough + -slider-border-color: $borders_color; //trough border color + -slider-active-background-color: $selected_bg_color; //active trough fill + -slider-active-border-color: darken($selected_bg_color,10%); //active trough border + -slider-border-width: 1px; + -slider-handle-radius: 6px; +} + +/* Check Boxes */ + +.check-box { + StBoxLayout { spacing: .8em; } + StBin { + width: 24px; + height: 22px; + background-image: url("resource:///org/gnome/shell/theme/checkbox-off.svg"); + } + &:focus StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox-off-focused.svg"); } + &:checked StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox.svg"); } + &:focus:checked StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox-focused.svg"); } +} + +/* Switches */ +.toggle-switch { + width: 65px; + height: 22px; + background-size: contain; +} + + @each $v in us, intl { + .toggle-switch-#{$v} { + background-image: url("resource:///org/gnome/shell/theme/toggle-off-#{$v}.svg"); + &:checked { background-image: url("resource:///org/gnome/shell/theme/toggle-on-#{$v}.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-radius: 9px; + color: $osd_fg_color; + background-color: transparentize(darken($osd_bg_color,10%),0.05); + border: 1px solid $_bubble_borders_color; + .modal-dialog-content-box { + padding: 24px; + } + .run-dialog-entry { width: 20em; margin-bottom: 6px; } + .run-dialog-error-box { + 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; + } + +} + + .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: 1px solid $_bubble_borders_color; +} + + .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: 5px; + width: 48px; + height: 48px; + background-size: contain; + } + + .end-session-dialog-shutdown-icon { + color: $fg_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: 3px solid $_bubble_borders_color; + + .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: 5px; + 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; + + .popup-menu-arrow { } //defined globally in the TOP BAR + .popup-sub-menu { + background-color: darken($bg_color,2%); + box-shadow: inset 0 -1px 0px lighten($borders_color,5%); + } + + .popup-menu-content { padding: 1em 0em; } + .popup-menu-item { + spacing: 12px; + + &:ltr { padding: .4em 1.75em .4em 0em; } + &:rtl { padding: .4em 0em .4em 1.75em; } + &:checked { + background-color: darken($bg_color,2%); + box-shadow: inset 0 1px 0px lighten($borders_color,5%); + font-weight: bold; + } + &.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: 3px; + -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 { + //-margin-horizontal: 24px; + height: 1px; //not really the whole box + margin: 6px 64px; + background-color: transparent; + border-color: lighten($borders_color,10%); + border-bottom-width: 1px; + border-bottom-style: solid; + } + + +// 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.6em; + border-radius: 0.3em; + background-color: transparentize(darken($osd_bg_color,15%),0.5); + color: $osd_fg_color; + } + .level-bar { + background-color: $osd_fg_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 { + height: 50px; + background-color: $selected_bg_color; + color: $selected_fg_color; + //background-image: url("resource:///org/gnome/shell/theme/ws-switch-arrow-up.png"); + background-size: 32px; + border-radius: 8px; + } + + .ws-switcher-box { + height: 50px; + border: 1px solid transparentize($osd_fg_color,0.9); + background: transparent; + border-radius: 8px; + } + +%osd-panel { + color: $_bubble_fg_color; + background-color: $_bubble_bg_color; + border: 1px solid $_bubble_borders_color; + border-radius: 12px; + 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: $panel-corner-radius 0 0 0; + } + + .tile-preview-right.on-primary { + border-radius: 0 $panel-corner-radius 0 0; + } + + .tile-preview-left.tile-preview-right.on-primary { + border-radius: $panel-corner-radius $panel-corner-radius 0 0; + } + +/* TOP BAR */ + +#panel { + background-color: rgba(0, 0, 0, 0.35); + /* transition from solid to transparent */ + transition-duration: 500ms; + font-weight: bold; + height: 1.86em; + + &.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: $panel-corner-radius; + -panel-corner-background-color: rgba(0, 0, 0, 0.35); + -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: #eee; + text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9); + transition-duration: 100ms; + + .app-menu-icon { + -st-icon-style: symbolic; + margin-left: 4px; + margin-right: 4px; + //dimensions of the icon are hardcoded + } + + .system-status-icon, + .app-menu-icon > StIcon, + .popup-menu-arrow { + icon-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9); + } + + &:hover { + color: lighten($fg_color, 10%); + text-shadow: 0px 1px 6px rgba(0, 0, 0, 1); + + .system-status-icon, + .app-menu-icon > StIcon, + .popup-menu-arrow { + icon-shadow: 0px 1px 6px rgba(0, 0, 0, 1); + } + } + + &:active, &:overview, &:focus, &:checked { + // Trick due to St limitations. It needs a background to draw + // a box-shadow + background-color: rgba(0, 0, 0, 0.01); + box-shadow: inset 0 -2px 0px lighten($selected_bg_color,5%); + color: lighten($fg_color,10%); + + & > .system-status-icon { icon-shadow: black 0 2px 2px; } + } + + .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: black; + /* transition from transparent to solid */ + transition-duration: 300ms; + + .panel-corner { + -panel-corner-background-color: black; + } + + .panel-button { + color: #ccc; + text-shadow: none; + + &:hover, &:active, &:overview, &:focus, &:checked { + color: lighten($fg_color, 10%); + } + } + + .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, + .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 lighten($bg_color,5%); + &:ltr { border-left-width: 1px; } + &:rtl { border-right-width: 1px; } + } + + .datemenu-today-button, + .world-clocks-button, + .weather-button, + .events-section-title { + border-radius: 4px; + 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 { + &: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 { + color: darken($fg_color,40%); + font-weight: bold; + } + + .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("resource:///org/gnome/shell/theme/calendar-arrow-left.svg"); + &:rtl { background-image: url("resource:///org/gnome/shell/theme/calendar-arrow-right.svg"); } + } + .calendar-change-month-forward { //arrow foreward + background-image: url("resource:///org/gnome/shell/theme/calendar-arrow-right.svg"); + &:rtl { background-image: url("resource:///org/gnome/shell/theme/calendar-arrow-left.svg"); } + } + + .calendar-day-base { + font-size: 80%; + text-align: center; + width: 2.4em; height: 2.4em; + padding: 0.1em; + margin: 2px; + border-radius: 1.4em; + &: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("resource:///org/gnome/shell/theme/calendar-today.svg"); + } + .calendar-other-month-day { + color: transparentize($fg_color,0.85); + 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-list-clear-button.button { + background-color: transparent; + &: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 { + &:hover,&:focus { background-color: lighten($bg_color,5%); } + border-radius: 3px; + } + + .message-icon-bin { + padding: 0.68em 0.2em 0.68em 0.68em; + &:rtl { padding: 0.68em 0.68em 0.68em 0.2em; } + } + + .message-icon-bin > StIcon { + color: darken($fg_color,20%); + icon-size: 1.09em; + -st-icon-style: symbolic; + } + + .message-secondary-bin { + padding: 0 0.82em;; + } + + .message-secondary-bin > .event-time { + color: darken($fg_color,40%); + 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: 1.09em; + } + + .message-title { + color: darken($fg_color,5%); + } + + .message-content { + color: darken($fg_color,20%); + padding: 10px; + } + + .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; } + } + + + // 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("resource:///org/gnome/shell/theme/process-working.svg"); + spacing: 4px; + + .label-shadow { color: transparent; } + } + + .aggregate-menu { + min-width: 21em; + .popup-menu-icon { padding: 0 4px; } + .popup-sub-menu .popup-menu-item :first-child { + &:ltr { /* 12px spacing + 2*4px padding */ + padding-left: 20px; margin-left: 1.09em; } + &:rtl { /* 12px spacing + 2*4px padding */ + padding-right: 20px; margin-right: 1.09em; } + } + } + + .system-menu-action { + color: $fg_color; + border-radius: 32px; /* wish we could do 50% */ + padding: 13px; + border: 1px solid lighten($borders_color,5%); + + &:hover, &:focus { + background-color: transparentize($fg_color,0.9); + color: $fg_color; + border: none; + padding: 14px; + } + &:active { background-color: $selected_bg_color; color: $selected_fg_color; } + + & > StIcon { icon-size: 16px; } + } + +//Activities Ripples +.ripple-box { + width: 52px; + height: 52px; + background-image: url("resource:///org/gnome/shell/theme/corner-ripple-ltr.png"); + background-size: contain; +} + +.ripple-box:rtl { + background-image: url("resource:///org/gnome/shell/theme/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-image: url("resource:///org/gnome/shell/theme/close-window.svg"); + background-size: 32px; + height: 32px; + width: 32px; + -shell-close-overlap: 16px; + + &:hover { background-image: url("resource:///org/gnome/shell/theme/close-window-hover.svg"); } + &:active { background-image: url("resource:///org/gnome/shell/theme/close-window-active.svg"); } +} + +/* 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; } + .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-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 $selected_bg_color; + border-radius: 4px; + // 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 0px 0px 0px 1px $selected_bg_color; + } + .window-caption { + spacing: 25px; + color: $selected_fg_color; + background-color: $selected_bg_color; + border-radius: 8px; + padding: 4px 12px; + } + + //search entry + .search-entry { + width: 320px; + padding: 7px 9px; + border-radius: 6px; + border-color: darken($osd_fg_color,50%); + color: $osd_fg_color; + background-color: $osd_bg_color; + &:focus { + padding: 6px 8px; + border-width: 2px; + border-color: $selected_bg_color; + } + + .search-entry-icon { icon-size: 1em; padding: 0 4px; color: transparentize($fg_color,.3); } + + &:hover, &:focus { + .search-entry-icon { color: $fg_color; } + } + } + + //search results + + #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 { spacing: 32px; } // This is the space between the provider icon and the results container + .search-statustext { // "no results" + @extend %status_text; + } + .list-search-results { spacing: 3px; } + + .search-section-separator { height: 2px; background-color: rgba(255, 255, 255, 0.2); } + + .list-search-result-content { spacing: 30px; } + .list-search-result-title { color: darken($osd_fg_color,5%); spacing: 12px; } + .list-search-result-description { color: transparentize(darken($osd_fg_color,15%), 0.5); } + .list-search-provider-details { width: 150px; color: darken($osd_fg_color,5%); margin-top: 0.24em; } + .list-search-provider-content { spacing: 20px; } + .search-provider-icon { padding: 15px; } + + + /* DASHBOARD */ + + #dash { + font-size: 9pt; + color: $_bubble_fg_color; + background-color: $_bubble_bg_color; + padding: 4px 0; + border: 1px solid rgba(128, 128, 128, 0.4); + border-left: 0px; + border-radius: 0px 9px 9px 0px; + + &:rtl { + border-radius: 9px 0 0 9px; + } + + .placeholder { + background-image: url("resource:///org/gnome/shell/theme/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: $osd_fg_color; + background-color: transparentize($osd_bg_color,0.3); + 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; + } + } + + //Icon tile + .search-provider-icon, + .list-search-result { + @extend %icon_tile; + &:active, &:checked { background-color: transparentize(darken($osd_bg_color,10%),.1); } + &:focus, &:selected, &:hover { + background-color: transparentize($osd_fg_color,.9); + transition-duration: 200ms; + } + } + .app-well-app, + .app-well-app.app-folder, + .show-apps, + .grid-search-result { + & .overview-icon { + @extend %icon_tile; + } + &:active .overview-icon, + &:checked .overview-icon { + background-color: transparentize(darken($osd_bg_color,10%),.1); + box-shadow: inset 0 1px 2px $osd_borders_color; + } + &:hover .overview-icon, + &:focus .overview-icon, + &:selected .overview-icon { + background-color: transparentize($osd_fg_color,.9); + transition-duration: 0ms; + border-image: none; + background-image: none; + } + + } + + .app-well-app-running-dot { //running apps indicator + width: 10px; height: 3px; + background-color: $selected_bg_color; + margin-bottom: 2px; + } + + %icon_tile { + color: $osd_fg_color; + border-radius: 4px; + padding: 6px; + border: 1px solid transparent; + transition-duration: 100ms; + text-align: center; + } + + .app-well-app.app-folder > .overview-icon { + background-color: transparentize($osd_bg_color,.6); + } + + .show-apps:checked .show-apps-icon, + .show-apps:focus .show-apps-icon { + color: white; + transition-duration: 100ms; + } + + + // Collections + .app-folder-popup { //expanded collection + -arrow-border-radius: 8px; + -arrow-background-color: transparentize($osd_bg_color,0.7); + -arrow-base: 24px; + -arrow-rise: 11px; + } + .app-folder-popup-bin { padding: 5px; } + .app-folder-icon { + padding: 5px; + spacing-rows: 5px; + spacing-columns: 5px; + } + + .page-indicator { + padding: 15px 20px; + + .page-indicator-icon { + width: 18px; + height: 18px; + background-image: url(resource:///org/gnome/shell/theme/page-indicator-inactive.svg); + } + + &:hover .page-indicator-icon { background-image: url(resource:///org/gnome/shell/theme/page-indicator-hover.svg); } + &:active .page-indicator-icon { background-image: url(resource:///org/gnome/shell/theme/page-indicator-active.svg); } + &:checked .page-indicator-icon, + &:checked:active { background-image: url(resource:///org/gnome/shell/theme/page-indicator-checked.svg); } + } + + .no-frequent-applications-label { @extend %status_text; } + + .app-well-app > .overview-icon.overview-icon-with-label, + .grid-search-result .overview-icon.overview-icon-with-label { + padding: 10px 8px 5px 8px; + spacing: 4px; + } + + // Workspace pager + .workspace-thumbnails { //container ala dash + @extend %overview-panel; + visible-width: 32px; //amount visible before hover + spacing: 11px; + padding: 8px; + border-radius: 9px 0 0 9px; + //border-width: 1px 0 1px 1px; //fixme: can't have non unoform borders :( + &:rtl { border-radius: 0 9px 9px 0;} + + .placeholder { + background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg"); + background-size: contain; + height: 24px; + } + } + .workspace-thumbnail-indicator { + border: 4px solid $selected_bg_color; + padding: 1px; + } + + //Some hacks I don't even + .search-display > StBoxLayout, + .all-apps, + .frequent-apps > StBoxLayout { + // horizontal padding to make sure scrollbars or dash don't overlap content + padding: 0px 88px 10px 88px; + } + +%overview-panel { + color: $_bubble_fg_color; + background-color: $_bubble_bg_color; + border: 1px solid $_bubble_borders_color; +} + +%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: 6px; + color: $_bubble_fg_color; + background-color: $_bubble_bg_color; + border: 1px solid $borders_color; + //box-shadow: 0 1px 4px black; + &:hover { background-color: $_bubble_bg_color; } + &:focus { background-color: $_bubble_bg_color; } + + .notification-icon { padding: 5px; } + .notification-content { padding: 5px; spacing: 5px; } + .secondary-icon { icon-size: 1.09em; } + .notification-actions { + background-color: $borders_color; + padding-top: 2px; + spacing: 1px; + } + .notification-button { + padding: 4px 4px 5px; + background-color: darken($_bubble_bg_color,5%); + &:first-child { border-radius: 0 0 0 6px; } + &:last-child { border-radius: 0 0 6px 0; } + &:hover, &focus { background-color: darken($_bubble_bg_color,2%); } + } + } + .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 */ +.word-suggestions { + font-size: 14pt; + spacing: 12px; + min-height: 20pt; +} + +#keyboard { + background-color: transparentize($osd_bg_color, 0.3); +} + + .key-container { + padding: 4px; + spacing: 4px; + } + + .keyboard-key { + background-color: #393f3f; + min-height: 2em; + min-width: 2em; + font-size: 14pt; + border-radius: 3px; + border: 1px solid #464d4d; + color: #e5e5e5; + &: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; + } + &.default-key { + border-color: #2d3232; + background-color: #1d2020; + } + &.enter-key { + border-color: #005684; + background-color: #006098; + } + } + + .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; + } diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss new file mode 100644 index 000000000..66d5adab6 --- /dev/null +++ b/data/theme/gnome-shell-sass/_drawing.scss @@ -0,0 +1,221 @@ +// Drawing mixins + +// 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 +// + $_inner_shadows: inset 0 2px 4px transparentize(black, 0.6); + + @if $t==normal { + background-color: $base_color; + border-color: $borders_color; + @include _shadows($_inner_shadows); + + } + @if $t==focus { + @include _shadows($_inner_shadows); + border-color: if($fc==$selected_bg_color, + $selected_borders_color, + darken($fc,35%)); + } + @if $t==hover { } + @if $t==insensitive { + color: $insensitive_fg_color; + border-color: $insensitive_bg_color; + box-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)>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 + // + $_bg: if($c!=$osd_bg_color, transparentize($c, 0.5), + $osd_bg_color); + + color: $osd_fg_color; + background-color: $_bg; + border-color: $osd_borders_color; + box-shadow: inset 0 1px lighten($osd_bg_color,10%); + text-shadow: 0 1px black; + icon-shadow: 0 1px black; + } + @if $t==focus { + // + // focused button + // + $_bg: if($c!=$osd_bg_color, transparentize($c, 0.5), + $osd_bg_color); + + color: $osd_fg_color; + text-shadow: 0 1px black; + icon-shadow: 0 1px black; + box-shadow: inset 0px 0px 0px 1px $selected_bg_color; + } + + @else if $t==hover { + // + // active osd button + // + $_bg: if($c!=$osd_bg_color, transparentize($c, 0.3), + lighten($osd_bg_color,10%)); + + color: white; + border-color: $osd_borders_color; + background-color: $_bg; + box-shadow: inset 0 1px lighten($osd_bg_color,20%); + text-shadow: 0 1px black; + icon-shadow: 0 1px black; + + } + @else if $t==active { + // + // active osd button + // + $_bg: if($c!=$bg_color, $c, $osd_borders_color); + + color: white; + border-color: $osd_borders_color; + background-color: darken($_bg,5%); + // 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 + box-shadow: inset 0 0 black; + 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; + border-color: $osd_borders_color; + background-color: $_bg; + box-shadow: 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; + } +} + diff --git a/data/theme/gnome-shell-sass/_high-contrast-colors.scss b/data/theme/gnome-shell-sass/_high-contrast-colors.scss new file mode 100644 index 000000000..af1e52f0c --- /dev/null +++ b/data/theme/gnome-shell-sass/_high-contrast-colors.scss @@ -0,0 +1,41 @@ +// When color definition differs for dark and light variant, +// it gets @if ed depending on $variant + + +$base_color: #222; +$bg_color: #000; +$fg_color: #fff; + +$selected_fg_color: #ffffff; +$selected_bg_color: darken(#4a90d9,20%); +$selected_borders_color: darken($selected_bg_color, 20%); +$borders_color: darken($bg_color,12%); +$borders_edge: transparentize($fg_color, 0.9); +$link_color: lighten($selected_bg_color,20%); +$link_visited_color: lighten($selected_bg_color,10%); +$top_hilight: $borders_edge; + +$warning_color: #f57900; +$error_color: #cc0000; +$success_color: darken(#73d216,10%); +$destructive_color: darken(#ef2929,10%); + +$osd_fg_color: #eeeeec; +$osd_bg_color: #2e3436; +$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: mix($fg_color, $backdrop_bg_color, 80%); +$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%); diff --git a/data/theme/gnome-shell-sass/gnome-shell-sass.doap b/data/theme/gnome-shell-sass/gnome-shell-sass.doap new file mode 100644 index 000000000..f18ec1b82 --- /dev/null +++ b/data/theme/gnome-shell-sass/gnome-shell-sass.doap @@ -0,0 +1,37 @@ + + + GNOME Shell Sass + Sass sources of GNOME Shell + GNOME Shell Sass is a project intended to allow the sharing of the + sass theme sources between gnome-shell and other projects like gnome-shell-extensions. + + + sass + css + + + + Carlos Soriano + + csoriano + + + + + Florian Müllner + + fmuellner + + + + + Jakub Steiner + + jimmac + + +