Compare commits
84 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 5edffcd859 | |||
| d8b526a715 | |||
| a5b6871562 | |||
| deb6031381 | |||
| 486cb59aff | |||
| de9a3df7bd | |||
| db131fc7da | |||
| 80c6656c4f | |||
| a5a3523df8 | |||
| 06acd9ff25 | |||
| 1a1d45d9e4 | |||
| 1d3775b3d1 | |||
| 15c83db793 | |||
| cc021589b8 | |||
| 5e316d37cb | |||
| 28dbb47937 | |||
| 619de9d5ee | |||
| 561b8aeb03 | |||
| 4286fd1bcc | |||
| 3bb0897bc1 | |||
| 12eedcf6f7 | |||
| 08d382facc | |||
| d9ae9a023a | |||
| 96a1de92db | |||
| cc2f46b837 | |||
| 9f25047e24 | |||
| fb66afbf71 | |||
| 365fa6abc9 | |||
| d7a824f35f | |||
| 0d8e412220 | |||
| 991f6ef508 | |||
| 37f03f5e2e | |||
| b4a4ff0a06 | |||
| de8876bd5e | |||
| 5ad272e628 | |||
| 3b22582752 | |||
| e734fcbd21 | |||
| 435879c121 | |||
| ed81650f55 | |||
| 1276a880de | |||
| 584016c291 | |||
| 41664b152c | |||
| 8957c277a1 | |||
| 8b9be8f120 | |||
| d3b687df8b | |||
| df463177e7 | |||
| 62af36ebfa | |||
| c5246b7415 | |||
| d39c1fd685 | |||
| 665a7fbbcb | |||
| a4987d03b8 | |||
| c477f10bfb | |||
| 2ae0f368b9 | |||
| ac33058086 | |||
| c7a08aaf74 | |||
| 8c1d6d88cf | |||
| 33b16681c6 | |||
| 3c51716268 | |||
| e5421b6cc6 | |||
| f1e7ae1010 | |||
| 10fe907c83 | |||
| ae9809caba | |||
| c95d197c5c | |||
| ae8749b7e1 | |||
| 84a548c0b9 | |||
| f047cb0baf | |||
| 28494941e1 | |||
| b70059ac4d | |||
| eb567c1120 | |||
| b1eb9b9080 | |||
| a0b6535210 | |||
| 9a9b3afa31 | |||
| 59bc054ef6 | |||
| 57e9dfe722 | |||
| f17a519c38 | |||
| 8223ca9739 | |||
| fe20c27b60 | |||
| 5ba59d1096 | |||
| 0ad1e9bbc1 | |||
| 5ea14f063f | |||
| 3cc3d03f0b | |||
| 057e5bb0c1 | |||
| 07fc66765d | |||
| daa7b9b6ab |
-29
@@ -1,29 +0,0 @@
|
|||||||
ABOUT-NLS
|
|
||||||
Makefile
|
|
||||||
Makefile.in
|
|
||||||
Makefile.in.in
|
|
||||||
aclocal.m4
|
|
||||||
autom4te.cache/
|
|
||||||
config/
|
|
||||||
configure
|
|
||||||
config.log
|
|
||||||
config.status
|
|
||||||
data/*.json
|
|
||||||
m4/
|
|
||||||
po/*.header
|
|
||||||
po/*.sed
|
|
||||||
po/*.sin
|
|
||||||
po/Makevars.template
|
|
||||||
po/POTFILES
|
|
||||||
po/Rules-quot
|
|
||||||
po/gnome-shell-extensions.pot
|
|
||||||
po/stamp-it
|
|
||||||
staging/
|
|
||||||
zip-files/
|
|
||||||
|
|
||||||
*~
|
|
||||||
*.gmo
|
|
||||||
metadata.json
|
|
||||||
*.desktop
|
|
||||||
*.gschema.valid
|
|
||||||
*.session
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
[submodule "data/gnome-shell-sass"]
|
|
||||||
path = data/gnome-shell-sass
|
|
||||||
url = https://gitlab.gnome.org/GNOME/gnome-shell-sass.git
|
|
||||||
Submodule data/gnome-shell-sass deleted from b267200d75
@@ -0,0 +1,339 @@
|
|||||||
|
GNU GENERAL PUBLIC LICENSE
|
||||||
|
Version 2, June 1991
|
||||||
|
|
||||||
|
Copyright (C) 1989, 1991 Free Software Foundation, Inc. <http://fsf.org>
|
||||||
|
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.
|
||||||
|
|
||||||
|
<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 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.
|
||||||
|
|
||||||
|
<signature of Ty Coon>, 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.
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
# GNOME Shell Sass
|
||||||
|
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.
|
||||||
|
|
||||||
|
Any changes should be done in the [GNOME Shell subtree][shell-subtree]
|
||||||
|
and not the stand-alone [gnome-shell-sass repository][sass-repo]. They
|
||||||
|
will then be synchronized periodically before releases.
|
||||||
|
|
||||||
|
## License
|
||||||
|
GNOME Shell Sass is distributed under the terms of the GNU General Public
|
||||||
|
License, version 2 or later. See the [COPYING][license] file for details.
|
||||||
|
|
||||||
|
[shell-subtree]: https://gitlab.gnome.org/GNOME/gnome-shell/tree/HEAD/data/theme/gnome-shell-sass
|
||||||
|
[sass-repo]: https://gitlab.gnome.org/GNOME/gnome-shell-sass
|
||||||
|
[license]: COPYING
|
||||||
@@ -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', #fff, lighten(desaturate(#241f31, 20%), 2%));
|
||||||
|
$bg_color: if($variant == 'light', #f6f5f4, darken(desaturate(#3d3846, 100%), 4%));
|
||||||
|
$fg_color: if($variant == 'light', #2e3436, #eeeeec);
|
||||||
|
|
||||||
|
$selected_fg_color: #fff;
|
||||||
|
$selected_bg_color: if($variant == 'light', #3584e4, darken(#3584e4, 10%));
|
||||||
|
$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%));
|
||||||
|
$borders_color: if($variant == 'light', darken($bg_color, 18%), darken($bg_color, 8%));
|
||||||
|
$borders_edge: if($variant == 'light', rgba(255,255,255,0.8), transparentize($fg_color, 0.93));
|
||||||
|
$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: #ff8080;
|
||||||
|
$success_color: if($variant == 'light', #33d17a, darken(#33d17a, 10%));
|
||||||
|
$destructive_color: if($variant == 'light', #e01b24, darken(#e01b24, 10%));
|
||||||
|
|
||||||
|
$osd_fg_color: #eeeeec;
|
||||||
|
$osd_text_color: white;
|
||||||
|
$osd_bg_color: transparentize(darken(desaturate(#3d3846, 100%), 12%),0.04);
|
||||||
|
$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: transparentize(black, 0.3);
|
||||||
|
$osd_outer_borders_color: transparentize(white, 0.84);
|
||||||
|
|
||||||
|
$shadow_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(0,0,0,0.2));
|
||||||
|
$system_bg_color: desaturate(#241f31,100%); //neutralize the HIG 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: mix($borders_color, $base_color, 60%);
|
||||||
|
|
||||||
|
//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%);
|
||||||
@@ -0,0 +1,176 @@
|
|||||||
|
//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} */
|
||||||
|
|
||||||
|
/* 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.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Global Values */
|
||||||
|
|
||||||
|
// padding, margin and spacing
|
||||||
|
$base_padding: 6px;
|
||||||
|
$base_margin: 4px;
|
||||||
|
$base_spacing: 6px;
|
||||||
|
|
||||||
|
// border radii
|
||||||
|
$base_border_radius: 8px;
|
||||||
|
|
||||||
|
$modal_radius:$base_border_radius * 2;
|
||||||
|
|
||||||
|
// non-standard colors
|
||||||
|
$bubble_borders_color: lighten($borders_color, if($variant=='light', 0%, 5%));
|
||||||
|
// $bubble_borders_color: if($variant == 'light', rgba(255,255,255,0.1), rgba(0,0,0,0.3));
|
||||||
|
|
||||||
|
// hover
|
||||||
|
$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 5%));
|
||||||
|
$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 5%));
|
||||||
|
$hover_borders_color: lighten($borders_color,if($variant=='light', 5%, 3%));
|
||||||
|
|
||||||
|
// active
|
||||||
|
$active_bg_color: if($variant == 'light', darken($bg_color, 7%), darken($bg_color, 9%));
|
||||||
|
$active_fg_color: darken($fg_color,if($variant=='light', 5%, 3%));
|
||||||
|
$active_borders_color: darken($borders_color,if($variant=='light', 5%, 3%));
|
||||||
|
|
||||||
|
// fonts
|
||||||
|
$base_font_size: 11;
|
||||||
|
$text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.2));
|
||||||
|
|
||||||
|
// icons
|
||||||
|
$base_icon_size: 1.09em;
|
||||||
|
// $base_icon_size: 16px;
|
||||||
|
|
||||||
|
// Stage
|
||||||
|
stage {
|
||||||
|
@include fontsize($base_font_size);
|
||||||
|
color: $fg_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Common Stylings */
|
||||||
|
|
||||||
|
// Text
|
||||||
|
%status_text {
|
||||||
|
font-size: 2em;
|
||||||
|
font-weight: bold;
|
||||||
|
color: $osd_fg_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
// osd panels
|
||||||
|
%osd_panel {
|
||||||
|
color: $osd_fg_color;
|
||||||
|
background-color: $osd_bg_color;
|
||||||
|
//border: 1px solid $osd_outer_borders_color;
|
||||||
|
border-radius: $base_border_radius * 2 + 4px;
|
||||||
|
padding: $base_padding * 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Overview panels
|
||||||
|
// for the dash and workspace switcher
|
||||||
|
%overview_panel {
|
||||||
|
color: $osd_fg_color;
|
||||||
|
background-color: transparentize($osd_fg_color, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
// icon tiles
|
||||||
|
%icon_tile {
|
||||||
|
border-radius: $base_border_radius + 4px;
|
||||||
|
padding: $base_padding;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
transition-duration: 100ms;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
// dialogs
|
||||||
|
%bubble_panel {
|
||||||
|
color: $fg_color;
|
||||||
|
background-color: $bg_color;
|
||||||
|
border: 1px solid if($variant=='light', rgba(0,0,0, 0.6), $borders_color);
|
||||||
|
}
|
||||||
|
|
||||||
|
// button styling
|
||||||
|
%button {
|
||||||
|
border-radius: $base_border_radius;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 1px;
|
||||||
|
min-height: 22px;
|
||||||
|
padding: $base_padding * 0.5 $base_padding * 4;
|
||||||
|
|
||||||
|
@include button(normal);
|
||||||
|
&:focus { @include button(focus);}
|
||||||
|
&:hover { @include button(hover);}
|
||||||
|
&:insensitive { @include button(insensitive);}
|
||||||
|
&:active { @include button(active);}
|
||||||
|
}
|
||||||
|
|
||||||
|
// buttons in dialogs
|
||||||
|
%bubble_button {
|
||||||
|
@include button(normal, $shadow: none);
|
||||||
|
padding: $base_padding * 2;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 1px;
|
||||||
|
border-left-width: 0;
|
||||||
|
border-bottom-width: 0;
|
||||||
|
|
||||||
|
&:insensitive { @include button(insensitive, $shadow: none); }
|
||||||
|
&:focus { @include button(focus, $shadow: none); }
|
||||||
|
&:hover { @include button(hover, $shadow: none); }
|
||||||
|
&:active { @include button(active, $shadow: none); }
|
||||||
|
|
||||||
|
// radius is 2 pixel less to fit in bubble
|
||||||
|
&:first-child {
|
||||||
|
border-radius: 0 0 0 $modal_radius - 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-right-width: 0;
|
||||||
|
border-radius: 0 0 $modal_radius - 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-child:last-child {
|
||||||
|
border-radius: 0 0 $modal_radius - 2px $modal_radius - 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// notification styling
|
||||||
|
@mixin notification_bubble($flat: false) {
|
||||||
|
border-width: 1px;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: $base_border_radius + 2px;
|
||||||
|
margin: $base_margin;
|
||||||
|
|
||||||
|
@if $flat {
|
||||||
|
@include button(undecorated);
|
||||||
|
} @else {
|
||||||
|
@include button(normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
@include button(focus);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
@include button(hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
@include button(active);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,232 @@
|
|||||||
|
// Drawing mixins
|
||||||
|
|
||||||
|
// generic drawing of more complex things
|
||||||
|
|
||||||
|
@function draw_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 draw_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: $base_color;
|
||||||
|
border-color: $borders_color;
|
||||||
|
|
||||||
|
}
|
||||||
|
@if $t==focus {
|
||||||
|
border-color: if($fc==$selected_bg_color,
|
||||||
|
$selected_borders_color,
|
||||||
|
darken($fc,35%));
|
||||||
|
box-shadow: inset 0 0 0 2px $fc;
|
||||||
|
}
|
||||||
|
@if $t==hover { }
|
||||||
|
@if $t==insensitive {
|
||||||
|
color: $insensitive_fg_color;
|
||||||
|
border-color: $insensitive_bg_color;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// buttons
|
||||||
|
|
||||||
|
@function draw_border_color ($c) {
|
||||||
|
//
|
||||||
|
// colored buttons want the border form the base color
|
||||||
|
//
|
||||||
|
@return if($variant == 'light', darken($c, 18%), darken($c, 4%));
|
||||||
|
}
|
||||||
|
|
||||||
|
@function draw_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 rgba(255,255,255,$lbg/($lbg*1.3)); }
|
||||||
|
@else { @return rgba(0,0,0,1-$lbg*0.8); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@function draw_button_hilight_color($c) {
|
||||||
|
//
|
||||||
|
// calculate the right top highlight color for buttons
|
||||||
|
//
|
||||||
|
// $c: base color;
|
||||||
|
//
|
||||||
|
@if lightness($c)>90% { @return white; }
|
||||||
|
@else if lightness($c)>80% { @return rgba(255,255,255, 0.7); }
|
||||||
|
@else if lightness($c)>50% { @return rgba(255,255,255, 0.5); }
|
||||||
|
@else if lightness($c)>40% { @return rgba(255,255,255, 0.3); }
|
||||||
|
@else { @return rgba(255,255,255, 0.1); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin draw_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: draw_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:$bg_color, $tc:$fg_color, $edge: $borders_edge, $shadow: $shadow_color) {
|
||||||
|
//
|
||||||
|
// 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
|
||||||
|
// $shadow: set to none to not draw the drop shadow 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: draw_button_hilight_color($c);
|
||||||
|
$button_edge: if($edge == none, none, draw_widget_edge($edge));
|
||||||
|
$blank_edge: if($edge == none, none, draw_widget_edge(transparentize($edge,1)));
|
||||||
|
$button_shadow: if($shadow == none, none, 0 1px 1px 0 $shadow);
|
||||||
|
|
||||||
|
// normal button
|
||||||
|
@if $t==normal {
|
||||||
|
color: $tc;
|
||||||
|
background-color: lighten($c, 3%);
|
||||||
|
border-color: draw_border_color($c);
|
||||||
|
@include draw_shadows($button_shadow);
|
||||||
|
// box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
|
||||||
|
text-shadow: 0 1px $text_shadow_color;
|
||||||
|
icon-shadow: 0 1px $text_shadow_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
// focused button
|
||||||
|
@if $t==focus {
|
||||||
|
color: $tc;
|
||||||
|
text-shadow: 0 1px $text_shadow_color;
|
||||||
|
icon-shadow: 0 1px $text_shadow_color;
|
||||||
|
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
|
||||||
|
//border-color: $selected_bg_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
// hover button
|
||||||
|
@else if $t==hover {
|
||||||
|
color: $tc;
|
||||||
|
background-color: lighten($c, if($variant == 'light', 8%, 5%));
|
||||||
|
border-color: if($variant == 'light', draw_border_color(lighten($c, 7%)), draw_border_color($c));
|
||||||
|
@include draw_shadows($button_shadow);
|
||||||
|
text-shadow: 0 1px $text_shadow_color;
|
||||||
|
icon-shadow: 0 1px $text_shadow_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
// active button
|
||||||
|
@else if $t==active {
|
||||||
|
color: $tc;
|
||||||
|
background-color: darken($c,3%);
|
||||||
|
border-color: draw_border_color(if($variant == 'light', $c, darken($c,7%)));
|
||||||
|
text-shadow: none;
|
||||||
|
icon-shadow: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// insensitive button
|
||||||
|
@else if $t==insensitive {
|
||||||
|
color: $insensitive_fg_color;
|
||||||
|
border-color: $insensitive_borders_color;
|
||||||
|
background-color: $insensitive_bg_color;
|
||||||
|
box-shadow: none;
|
||||||
|
text-shadow: none;
|
||||||
|
icon-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// reset
|
||||||
|
@else if $t==undecorated {
|
||||||
|
border-color: transparent;
|
||||||
|
background-color: transparent;
|
||||||
|
background-image: none;
|
||||||
|
@include draw_shadows(inset 0 1px rgba(255,255,255,0),$blank_edge);
|
||||||
|
text-shadow: none;
|
||||||
|
icon-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// overview icons
|
||||||
|
@mixin overview-icon($color) {
|
||||||
|
.overview-icon {
|
||||||
|
@extend %icon_tile;
|
||||||
|
color: $color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:selected {
|
||||||
|
.overview-icon {
|
||||||
|
background-color: transparentize($color, .9);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
.overview-icon {
|
||||||
|
background-color: transparentize($color, .7);
|
||||||
|
// border-color: $selected_bg_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:drop {
|
||||||
|
.overview-icon {
|
||||||
|
border: 2px solid $selected_bg_color; //already 2px transparent so no jumping
|
||||||
|
background-color: transparentize($selected_bg_color, .8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active,
|
||||||
|
&:checked {
|
||||||
|
.overview-icon {
|
||||||
|
background-color: transparentize(darken($osd_bg_color, 10%), .5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
// 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: rgba(0,0,0, 0.7);
|
||||||
|
$osd_outer_borders_color: rgba(255,255,255, 0.1);
|
||||||
|
|
||||||
|
$shadow_color: rgba(0,0,0, 0.1);
|
||||||
|
$system_bg_color: desaturate(#241f31,100%); //neutralize the HIG 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%);
|
||||||
@@ -0,0 +1,51 @@
|
|||||||
|
//
|
||||||
|
// Shell widgets stylesheets are placed in separate .scss files
|
||||||
|
// in 'widgets' and imported into the main stylesheet in this file.
|
||||||
|
// To create or update a widget for the shell modify the list below.
|
||||||
|
//
|
||||||
|
|
||||||
|
/* WIDGETS */
|
||||||
|
|
||||||
|
// Primary widgets
|
||||||
|
@import 'widgets/base';
|
||||||
|
@import 'widgets/entries';
|
||||||
|
@import 'widgets/buttons';
|
||||||
|
@import 'widgets/check-box';
|
||||||
|
@import 'widgets/switches';
|
||||||
|
@import 'widgets/slider';
|
||||||
|
@import 'widgets/scrollbars';
|
||||||
|
// Popovers
|
||||||
|
@import 'widgets/popovers';
|
||||||
|
@import 'widgets/calendar';
|
||||||
|
@import 'widgets/message-list';
|
||||||
|
@import 'widgets/ibus-popup';
|
||||||
|
// Notifications
|
||||||
|
@import 'widgets/notifications';
|
||||||
|
@import 'widgets/hotplug';
|
||||||
|
// Dialogs
|
||||||
|
@import 'widgets/dialogs';
|
||||||
|
@import 'widgets/network-dialog';
|
||||||
|
// OSDs
|
||||||
|
@import 'widgets/osd';
|
||||||
|
@import 'widgets/switcher-popup';
|
||||||
|
@import 'widgets/workspace-switcher';
|
||||||
|
// Panel
|
||||||
|
@import 'widgets/panel';
|
||||||
|
@import 'widgets/corner-ripple';
|
||||||
|
// Overview
|
||||||
|
@import 'widgets/overview';
|
||||||
|
@import 'widgets/window-picker';
|
||||||
|
@import 'widgets/search-entry';
|
||||||
|
@import 'widgets/search-results';
|
||||||
|
@import 'widgets/dash';
|
||||||
|
@import 'widgets/app-grid';
|
||||||
|
@import 'widgets/workspace-thumbnails';
|
||||||
|
// A11y / misc
|
||||||
|
@import 'widgets/a11y';
|
||||||
|
@import 'widgets/misc';
|
||||||
|
@import 'widgets/tiled-previews';
|
||||||
|
@import 'widgets/keyboard';
|
||||||
|
@import 'widgets/looking-glass';
|
||||||
|
// Lock / login screens
|
||||||
|
@import 'widgets/login-dialog';
|
||||||
|
@import 'widgets/screen-shield';
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
<Project xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"
|
||||||
|
xmlns:foaf="http://xmlns.com/foaf/0.1/"
|
||||||
|
xmlns:gnome="http://api.gnome.org/doap-extensions#"
|
||||||
|
xmlns="http://usefulinc.com/ns/doap#">
|
||||||
|
|
||||||
|
<name xml:lang="en">GNOME Shell Sass</name>
|
||||||
|
<shortdesc xml:lang="en">Sass sources of GNOME Shell</shortdesc>
|
||||||
|
<description>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.</description>
|
||||||
|
|
||||||
|
<category rdf:resource="http://api.gnome.org/doap-extensions#core" />
|
||||||
|
<programming-language>sass</programming-language>
|
||||||
|
<programming-language>css</programming-language>
|
||||||
|
|
||||||
|
<maintainer>
|
||||||
|
<foaf:Person>
|
||||||
|
<foaf:name>Carlos Soriano</foaf:name>
|
||||||
|
<foaf:mbox rdf:resource="mailto:csoriano@gnome.org" />
|
||||||
|
<gnome:userid>csoriano</gnome:userid>
|
||||||
|
</foaf:Person>
|
||||||
|
</maintainer>
|
||||||
|
<maintainer>
|
||||||
|
<foaf:Person>
|
||||||
|
<foaf:name>Florian Müllner</foaf:name>
|
||||||
|
<foaf:mbox rdf:resource="mailto:fmuellner@gnome.org" />
|
||||||
|
<gnome:userid>fmuellner</gnome:userid>
|
||||||
|
</foaf:Person>
|
||||||
|
</maintainer>
|
||||||
|
<maintainer>
|
||||||
|
<foaf:Person>
|
||||||
|
<foaf:name>Jakub Steiner</foaf:name>
|
||||||
|
<foaf:mbox rdf:resource="mailto:jimmac@gmail.com" />
|
||||||
|
<gnome:userid>jimmac</gnome:userid>
|
||||||
|
</foaf:Person>
|
||||||
|
</maintainer>
|
||||||
|
</Project>
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
// Pointer location
|
||||||
|
.ripple-pointer-location {
|
||||||
|
width: $ripple_size;
|
||||||
|
height: $ripple_size;
|
||||||
|
border-radius: $ripple_size * 0.5; // radius equals the size of the box to give us the curve
|
||||||
|
background-color: lighten(transparentize($selected_bg_color, 0.7), 30%);
|
||||||
|
box-shadow: 0 0 2px 2px lighten($selected_bg_color, 20%);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pointer accessibility notifications
|
||||||
|
.pie-timer {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
-pie-border-width: 3px;
|
||||||
|
-pie-border-color: $selected_bg_color;
|
||||||
|
-pie-background-color: lighten(transparentize($selected_bg_color, 0.7), 40%);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Screen zoom/Magnifier
|
||||||
|
.magnifier-zoom-region {
|
||||||
|
border: 2px solid $selected_bg_color;
|
||||||
|
|
||||||
|
&.full-screen { border-width: 0; }
|
||||||
|
}
|
||||||
@@ -0,0 +1,167 @@
|
|||||||
|
/* App Grid */
|
||||||
|
|
||||||
|
$app_icon_size: 96px;
|
||||||
|
|
||||||
|
// app icons
|
||||||
|
.icon-grid {
|
||||||
|
row-spacing: $base_spacing * 2;
|
||||||
|
column-spacing: $base_spacing * 2;
|
||||||
|
max-row-spacing: $base_spacing * 12;
|
||||||
|
max-column-spacing: $base_spacing * 12;
|
||||||
|
page-padding-top: $base_padding * 4;
|
||||||
|
page-padding-bottom: $base_padding * 4;
|
||||||
|
page-padding-left: $base_padding * 2;
|
||||||
|
page-padding-right: $base_padding * 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* App Icons */
|
||||||
|
|
||||||
|
$app_grid_fg_color: #fff;
|
||||||
|
|
||||||
|
// Icon tiles in the app grid
|
||||||
|
.app-well-app,
|
||||||
|
%app-well-app {
|
||||||
|
@include overview-icon($app_grid_fg_color);
|
||||||
|
|
||||||
|
.overview-icon.overview-icon-with-label {
|
||||||
|
padding: 10px 8px 5px 8px;
|
||||||
|
|
||||||
|
> StBoxLayout {
|
||||||
|
spacing: $base_spacing;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* App Folders */
|
||||||
|
.app-well-app.app-folder {
|
||||||
|
background-color: $dash_background_color;
|
||||||
|
border-radius: $base_border_radius + 4px; // same as %icon_tile
|
||||||
|
}
|
||||||
|
|
||||||
|
// expanded folder
|
||||||
|
.app-folder-dialog { //style like the dash
|
||||||
|
border-radius: $modal_radius * 1.5;
|
||||||
|
background-color: $dash_background_color;
|
||||||
|
padding: 12px 0px 12px 0px;
|
||||||
|
|
||||||
|
& .folder-name-container {
|
||||||
|
padding: 24px 36px 0;
|
||||||
|
spacing: 12px;
|
||||||
|
|
||||||
|
& .folder-name-label,
|
||||||
|
& .folder-name-entry {
|
||||||
|
font-size: 18pt;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .folder-name-entry { width: 300px }
|
||||||
|
|
||||||
|
/* FIXME: this is to keep the label in sync with the entry */
|
||||||
|
& .folder-name-label { padding: 5px 7px; color: $osd_fg_color; }
|
||||||
|
|
||||||
|
& .edit-folder-button {
|
||||||
|
@extend %button;
|
||||||
|
|
||||||
|
padding: 0;
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 18px;
|
||||||
|
|
||||||
|
& > StIcon { icon-size: 16px }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& .icon-grid {
|
||||||
|
row-spacing: $base_spacing * 2;
|
||||||
|
column-spacing: $base_spacing * 5;
|
||||||
|
page-padding-top: 0;
|
||||||
|
page-padding-bottom: 0;
|
||||||
|
page-padding-left: 0;
|
||||||
|
page-padding-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .page-indicators {
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.app-folder-dialog-container {
|
||||||
|
padding: 12px;
|
||||||
|
width: 620px;
|
||||||
|
height: 620px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Running app indicator (also shown in dash)
|
||||||
|
.app-well-app-running-dot {
|
||||||
|
height: 5px;
|
||||||
|
width: 5px;
|
||||||
|
border-radius:5px;
|
||||||
|
background-color: $osd_fg_color;
|
||||||
|
margin-bottom: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Rename popup for app folders
|
||||||
|
.rename-folder-popup {
|
||||||
|
.rename-folder-popup-item {
|
||||||
|
spacing: $base_spacing;
|
||||||
|
&:ltr, &:rtl { padding: 0 $base_padding * 2; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// right-click app menu
|
||||||
|
.app-menu {
|
||||||
|
max-width: 27.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
// App Grid pagination indicators
|
||||||
|
.page-indicator {
|
||||||
|
padding: $base_padding $base_padding * 2 0;
|
||||||
|
|
||||||
|
.page-indicator-icon {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 10px; // the same as height&width
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.apps-scroll-view {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// shutdown and other actions in the grid
|
||||||
|
.system-action-icon {
|
||||||
|
background-color: rgba(0,0,0,0.8);
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 99px;
|
||||||
|
icon-size: $app_icon_size * 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-navigation-hint {
|
||||||
|
width: 300px;
|
||||||
|
|
||||||
|
&.dnd {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.next:ltr,
|
||||||
|
&.previous:rtl {
|
||||||
|
background-gradient-start: rgba(255, 255, 255, 0.05);
|
||||||
|
background-gradient-end: transparent;
|
||||||
|
background-gradient-direction: horizontal;
|
||||||
|
border-radius: 15px 0px 0px 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.previous:ltr,
|
||||||
|
&.next:rtl {
|
||||||
|
background-gradient-start: transparent;
|
||||||
|
background-gradient-end: rgba(255, 255, 255, 0.05);
|
||||||
|
background-gradient-direction: horizontal;
|
||||||
|
border-radius: 0px 15px 15px 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-navigation-arrow {
|
||||||
|
margin: 6px;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
// Links
|
||||||
|
.shell-link {
|
||||||
|
color: $link_color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: lighten($link_color, 10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Outline for low res icons
|
||||||
|
.lowres-icon {
|
||||||
|
icon-shadow: 0 1px 2px rgba(black, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dropshadow for large icons
|
||||||
|
.icon-dropshadow {
|
||||||
|
icon-shadow: 0 1px 5px rgba(black, 0.8);
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
/* Buttons */
|
||||||
|
|
||||||
|
.button {
|
||||||
|
@extend %button; // that's it
|
||||||
|
}
|
||||||
@@ -0,0 +1,291 @@
|
|||||||
|
/* Date/Time Menu */
|
||||||
|
|
||||||
|
.clock-display-box {
|
||||||
|
spacing: 2px;
|
||||||
|
|
||||||
|
.clock {
|
||||||
|
padding-left: $base_padding * 2;
|
||||||
|
padding-right: $base_padding * 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// overall menu
|
||||||
|
#calendarArea {
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calendar menu side column
|
||||||
|
.datemenu-calendar-column {
|
||||||
|
spacing: $base_spacing;
|
||||||
|
border: 0 solid $bubble_borders_color;
|
||||||
|
padding: 0 $base_padding * 2;
|
||||||
|
|
||||||
|
&:ltr {margin-right: $base_margin * 2; border-left-width: 1px; }
|
||||||
|
&:rtl {margin-left: $base_margin * 2; border-right-width: 1px; }
|
||||||
|
|
||||||
|
.datemenu-displays-section {
|
||||||
|
}
|
||||||
|
|
||||||
|
.datemenu-displays-box {
|
||||||
|
spacing: $base_spacing;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-section-title {
|
||||||
|
@include notification_bubble($flat: true);
|
||||||
|
color: desaturate(darken($fg_color,40%), 10%);
|
||||||
|
font-weight: bold;
|
||||||
|
padding: .4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* today button (the date) */
|
||||||
|
.datemenu-today-button {
|
||||||
|
@include notification_bubble($flat: true);
|
||||||
|
padding: $base_padding * 1.5;
|
||||||
|
|
||||||
|
// weekday label
|
||||||
|
.day-label {
|
||||||
|
@include fontsize($base_font_size+1);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
// date label
|
||||||
|
.date-label {
|
||||||
|
@include fontsize($base_font_size+7);
|
||||||
|
font-weight: 1000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Calendar */
|
||||||
|
.calendar {
|
||||||
|
@include notification_bubble;
|
||||||
|
padding: $base_padding;
|
||||||
|
|
||||||
|
// month
|
||||||
|
.calendar-month-label {
|
||||||
|
color: lighten($fg_color,5%);
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 8px 0;
|
||||||
|
&:focus {}
|
||||||
|
}
|
||||||
|
|
||||||
|
// prev/next month icons
|
||||||
|
.calendar-change-month-back StIcon,
|
||||||
|
.calendar-change-month-forward StIcon {
|
||||||
|
icon-size: $base_icon_size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pager-button {
|
||||||
|
background-color: transparent;
|
||||||
|
height: 32px;
|
||||||
|
width: 32px;
|
||||||
|
border-radius: $base_border_radius;
|
||||||
|
&:hover, &:focus { background-color: lighten($hover_bg_color, 5%); }
|
||||||
|
&:active { background-color: $active_bg_color; }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
$calendar_day_size: 32px;
|
||||||
|
|
||||||
|
.calendar-day-base {
|
||||||
|
@include fontsize($base_font_size - 3);
|
||||||
|
text-align: center;
|
||||||
|
width: $calendar_day_size;
|
||||||
|
height: $calendar_day_size;
|
||||||
|
padding: 0;
|
||||||
|
margin: 2px;
|
||||||
|
border-radius: $calendar_day_size * 0.5 + 2px;
|
||||||
|
border: 1px solid transparent; //avoid jumparound due to today
|
||||||
|
font-feature-settings: "tnum";
|
||||||
|
&:hover, &:focus { background-color: $hover_bg_color; }
|
||||||
|
&:active,&:selected {
|
||||||
|
color: lighten($fg_color,10%);
|
||||||
|
background-color: darken($bg_color,5%);
|
||||||
|
}
|
||||||
|
|
||||||
|
// day of week heading
|
||||||
|
&.calendar-day-heading {
|
||||||
|
color: lighten($fg_color,10%);
|
||||||
|
margin-top: 1em;
|
||||||
|
@include fontsize($base_font_size - 4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Today
|
||||||
|
.calendar-today {
|
||||||
|
font-weight: bold;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
background-color: $selected_bg_color;
|
||||||
|
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 {
|
||||||
|
background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg");
|
||||||
|
&.calendar-work-day {
|
||||||
|
color: lighten($fg_color,10%);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-other-month-day {
|
||||||
|
color: transparentize($fg_color ,0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-week-number {
|
||||||
|
@include fontsize($base_font_size - 4);
|
||||||
|
font-weight: bold;
|
||||||
|
height: 1.8em;
|
||||||
|
width: 2.3em;
|
||||||
|
border-radius: 2px;
|
||||||
|
margin: 6px;
|
||||||
|
background-color: darken($bg_color, 2%);
|
||||||
|
color: lighten($fg_color, 5%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Events */
|
||||||
|
.events-button {
|
||||||
|
@include notification_bubble;
|
||||||
|
padding: $base_padding * 2;
|
||||||
|
|
||||||
|
.events-box {
|
||||||
|
spacing: $base_spacing;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-list {
|
||||||
|
spacing: 2 * $base_spacing;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-title {
|
||||||
|
color: desaturate(darken($fg_color,40%), 10%);
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: $base_margin;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-time {
|
||||||
|
color: darken($fg_color,20%);
|
||||||
|
font-feature-settings: "tnum";
|
||||||
|
@include fontsize($base_font_size - 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* World clocks */
|
||||||
|
.world-clocks-button {
|
||||||
|
@include notification_bubble;
|
||||||
|
padding: $base_padding * 2;
|
||||||
|
|
||||||
|
.world-clocks-grid {
|
||||||
|
spacing-rows: $base_spacing;
|
||||||
|
spacing-columns: $base_spacing * 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
// title
|
||||||
|
.world-clocks-header {
|
||||||
|
color: desaturate(darken($fg_color,40%), 10%);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
// city label
|
||||||
|
.world-clocks-city {
|
||||||
|
color: $fg_color;
|
||||||
|
@include fontsize($base_font_size);
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
// timezone time
|
||||||
|
.world-clocks-time {
|
||||||
|
font-weight: bold;
|
||||||
|
color: $fg_color;
|
||||||
|
font-feature-settings: "tnum";
|
||||||
|
@include fontsize($base_font_size);
|
||||||
|
|
||||||
|
&:ltr { text-align: right; }
|
||||||
|
&:rtl { text-align: left; }
|
||||||
|
}
|
||||||
|
|
||||||
|
// timezone offset label
|
||||||
|
.world-clocks-timezone {
|
||||||
|
color: darken($fg_color,20%);
|
||||||
|
font-feature-settings: "tnum";
|
||||||
|
@include fontsize($base_font_size - 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Weather */
|
||||||
|
.weather-button {
|
||||||
|
@include notification_bubble;
|
||||||
|
padding: $base_padding * 2;
|
||||||
|
|
||||||
|
.weather-box {
|
||||||
|
spacing: $base_spacing + $base_margin;
|
||||||
|
}
|
||||||
|
|
||||||
|
.weather-header-box {
|
||||||
|
spacing: $base_spacing;
|
||||||
|
}
|
||||||
|
|
||||||
|
.weather-header {
|
||||||
|
color: desaturate(darken($fg_color,40%), 10%);
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
&.location {
|
||||||
|
font-weight: normal;
|
||||||
|
@include fontsize($base_font_size - 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.weather-grid {
|
||||||
|
spacing-rows: $base_spacing;
|
||||||
|
spacing-columns: $base_spacing * 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.weather-forecast-time {
|
||||||
|
color: darken($fg_color,30%);
|
||||||
|
font-feature-settings: "tnum";
|
||||||
|
@include fontsize($base_font_size - 2);
|
||||||
|
font-weight: normal;
|
||||||
|
padding-top: 0.2em;
|
||||||
|
padding-bottom: 0.4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.weather-forecast-icon {
|
||||||
|
icon-size: $base_icon_size * 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.weather-forecast-temp {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
/* Check Boxes */
|
||||||
|
|
||||||
|
// these are equal to the size of the SVG assets
|
||||||
|
$check_height: 22px;
|
||||||
|
$check_width: 24px;
|
||||||
|
|
||||||
|
|
||||||
|
.check-box {
|
||||||
|
StBoxLayout { spacing: .8em; }
|
||||||
|
StBin {
|
||||||
|
width: $check_width;
|
||||||
|
height: $check_height;
|
||||||
|
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"); }
|
||||||
|
}
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
/* Activities Ripple */
|
||||||
|
|
||||||
|
$ripple_size: 50px;
|
||||||
|
|
||||||
|
.ripple-box {
|
||||||
|
background-color: lighten(transparentize($selected_bg_color, 0.7), 40%);
|
||||||
|
box-shadow: 0 0 2px 2px lighten($selected_bg_color, 20%);
|
||||||
|
// plus + 2px for the border (box-shadow)
|
||||||
|
width: $ripple_size + 2px;
|
||||||
|
height: $ripple_size + 2px;
|
||||||
|
border-radius: 0 0 $ripple_size + 2px 0; // radius equals the size of the box to give us the curve
|
||||||
|
|
||||||
|
// just a simple change to the border radius position
|
||||||
|
&:rtl { border-radius: 0 0 0 $ripple_size + 2px; }
|
||||||
|
}
|
||||||
@@ -0,0 +1,73 @@
|
|||||||
|
/* Dash */
|
||||||
|
|
||||||
|
$dash_background_color: #3b3b3b;
|
||||||
|
$dash_placeholder_size: 32px;
|
||||||
|
$dash_padding: $base_padding + 4px; // 10px
|
||||||
|
$dash_spacing: $base_padding / 4;
|
||||||
|
|
||||||
|
$dash_bottom_margin: $base_margin * 4;
|
||||||
|
|
||||||
|
$dash_border_radius: $modal_radius * 1.5;
|
||||||
|
|
||||||
|
#dash {
|
||||||
|
@include fontsize($base_font_size - 2);
|
||||||
|
margin-top: $base_spacing * 3;
|
||||||
|
padding: 0 $dash_padding;
|
||||||
|
|
||||||
|
.placeholder {
|
||||||
|
// background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg");
|
||||||
|
background-image:none;
|
||||||
|
background-size: contain;
|
||||||
|
height: $dash_placeholder_size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-dash-drop-target {
|
||||||
|
width: $dash_placeholder_size;
|
||||||
|
height: $dash_placeholder_size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overview-icon {
|
||||||
|
padding: $dash_padding / 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dash-background {
|
||||||
|
background-color: $dash_background_color;
|
||||||
|
margin-bottom: $dash_bottom_margin;
|
||||||
|
padding: $dash_padding;
|
||||||
|
border-radius: $dash_border_radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dash Items
|
||||||
|
.dash-item-container .app-well-app, .show-apps {
|
||||||
|
padding: $dash_padding $dash_spacing $dash_padding + $dash_bottom_margin;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dash-separator {
|
||||||
|
width: 1px;
|
||||||
|
margin: 0 ($dash_spacing + ($dash_padding / 2)) $dash_bottom_margin;
|
||||||
|
background-color: transparentize($osd_fg_color,0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
// OSD Tooltip
|
||||||
|
.dash-label {
|
||||||
|
color: $osd_fg_color;
|
||||||
|
background-color: $osd_bg_color;
|
||||||
|
border-radius: 99px;
|
||||||
|
padding: $base_padding $base_padding * 2;
|
||||||
|
text-align: center;
|
||||||
|
-y-offset: $base_margin * 3; // distance from the dash edge
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show apps button
|
||||||
|
.show-apps {
|
||||||
|
@include overview-icon($osd_fg_color);
|
||||||
|
|
||||||
|
&:focus,
|
||||||
|
&:checked {
|
||||||
|
.overview-icon {
|
||||||
|
background-color: transparentize($osd_bg_color,0.5);
|
||||||
|
color: $fg_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,173 @@
|
|||||||
|
/* Modal Dialogs */
|
||||||
|
|
||||||
|
.headline {
|
||||||
|
@include fontsize($base_font_size + 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-dialog {
|
||||||
|
border-radius: $modal_radius;
|
||||||
|
@extend %bubble_panel;
|
||||||
|
|
||||||
|
.modal-dialog-content-box {
|
||||||
|
margin: 32px 40px;
|
||||||
|
spacing: 32px;
|
||||||
|
max-width: 28em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-dialog-linked-button {
|
||||||
|
@extend %bubble_button;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* End Session Dialog */
|
||||||
|
.end-session-dialog {
|
||||||
|
width: 30em;
|
||||||
|
|
||||||
|
.end-session-dialog-battery-warning,
|
||||||
|
.dialog-list-title {
|
||||||
|
color: $warning_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Message Dialog */
|
||||||
|
.message-dialog-content {
|
||||||
|
spacing: 18px;
|
||||||
|
|
||||||
|
.message-dialog-title {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 18pt;
|
||||||
|
font-weight: 800;
|
||||||
|
|
||||||
|
&.lightweight {
|
||||||
|
font-size: 13pt;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.message-dialog-description { text-align: center; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dialog List */
|
||||||
|
.dialog-list {
|
||||||
|
spacing: 18px;
|
||||||
|
|
||||||
|
.dialog-list-title {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 {
|
||||||
|
color: darken($fg_color,5%);
|
||||||
|
@include fontsize($base_font_size - 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Run Dialog */
|
||||||
|
.run-dialog {
|
||||||
|
.modal-dialog-content-box {
|
||||||
|
margin-top: 24px;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
.run-dialog-entry { width: 20em; }
|
||||||
|
.run-dialog-description {
|
||||||
|
@include fontsize($base_font_size - 1);
|
||||||
|
text-align: center;
|
||||||
|
color: darken($fg_color, 20%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Password or Authentication Dialog */
|
||||||
|
|
||||||
|
.prompt-dialog {
|
||||||
|
width: 28em;
|
||||||
|
|
||||||
|
.modal-dialog-content-box {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.prompt-dialog-password-grid {
|
||||||
|
spacing-rows: 8px;
|
||||||
|
spacing-columns: 4px;
|
||||||
|
|
||||||
|
.prompt-dialog-password-entry {
|
||||||
|
width: auto;
|
||||||
|
|
||||||
|
// 4px (spacing) + 16px (spinner-width)
|
||||||
|
&:ltr { margin-left: 20px; }
|
||||||
|
&:rtl { margin-right: 20px; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.prompt-dialog-password-layout {
|
||||||
|
spacing: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prompt-dialog-password-entry {
|
||||||
|
width: 20em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prompt-dialog-error-label,
|
||||||
|
.prompt-dialog-info-label,
|
||||||
|
.prompt-dialog-null-label {
|
||||||
|
text-align: center;
|
||||||
|
@include fontsize($base_font_size - 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.prompt-dialog-error-label {
|
||||||
|
color: $warning_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Polkit Dialog */
|
||||||
|
|
||||||
|
.polkit-dialog-user-layout {
|
||||||
|
text-align: center;
|
||||||
|
spacing: 8px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
|
||||||
|
.polkit-dialog-user-root-label { color: $warning_color; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Audio selection dialog */
|
||||||
|
.audio-device-selection-dialog {
|
||||||
|
.modal-dialog-content-box { margin-bottom: 28px; }
|
||||||
|
.audio-selection-box { spacing: 20px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-selection-device {
|
||||||
|
border: 1px solid $bubble_borders_color;
|
||||||
|
border-radius: 12px;
|
||||||
|
&:hover,&:focus { background-color: $hover_bg_color; }
|
||||||
|
&:active {
|
||||||
|
background-color: $selected_bg_color;
|
||||||
|
color: $selected_fg_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-selection-device-box {
|
||||||
|
padding: 20px;
|
||||||
|
spacing: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-selection-device-icon {
|
||||||
|
icon-size: $base_icon_size * 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Welcome dialog */
|
||||||
|
.welcome-dialog-image {
|
||||||
|
background-image: url("resource:///org/gnome/shell/theme/gnome-shell-start.svg");
|
||||||
|
background-size: contain;
|
||||||
|
/* Reasonable maximum dimensions */
|
||||||
|
height: 300px;
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
/* Entries */
|
||||||
|
|
||||||
|
StEntry {
|
||||||
|
border-radius: $base_border_radius;
|
||||||
|
padding: 8px;
|
||||||
|
border-width: 0;
|
||||||
|
color: $fg_color;
|
||||||
|
@include entry(normal);
|
||||||
|
//&:hover { @include entry(hover);}
|
||||||
|
&:focus { @include entry(focus);}
|
||||||
|
&: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;
|
||||||
|
}
|
||||||
|
StIcon.peek-password {
|
||||||
|
icon-size: $base_icon_size;
|
||||||
|
padding: 0 4px;
|
||||||
|
}
|
||||||
|
StLabel.hint-text {
|
||||||
|
margin-left: 2px;
|
||||||
|
color: transparentize($fg_color, 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
// hotplug
|
||||||
|
|
||||||
|
.hotplug-notification-item {
|
||||||
|
@extend %bubble_button;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hotplug-notification-item-icon {
|
||||||
|
icon-size: 24px;
|
||||||
|
padding: 0 4px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,35 @@
|
|||||||
|
// IBus Candidate Popup
|
||||||
|
|
||||||
|
.candidate-popup-boxpointer {
|
||||||
|
@extend .popup-menu-boxpointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: $base_border_radius;
|
||||||
|
&: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: $base_border_radius 0px 0px $base_border_radius; border-right-width: 0; }
|
||||||
|
.candidate-page-button-next { border-radius: 0px $base_border_radius $base_border_radius 0px; }
|
||||||
|
.candidate-page-button-icon { icon-size: 1em; }
|
||||||
@@ -0,0 +1,115 @@
|
|||||||
|
/* On-screen Keyboard */
|
||||||
|
|
||||||
|
$key_size: 1.2em;
|
||||||
|
$key_border_radius: $base_border_radius + 3px;
|
||||||
|
$key_bg_color: $bg_color;
|
||||||
|
// $default_key_bg_color: darken($key_bg_color, 4%);
|
||||||
|
$default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten($osd_bg_color, 2%));
|
||||||
|
|
||||||
|
|
||||||
|
// draw keys using button function
|
||||||
|
#keyboard {
|
||||||
|
background-color: transparentize(if($variant=='light', darken($bg_color, 5%), darken($bg_color, 8%)), 0.1);
|
||||||
|
box-shadow: inset 0 1px 0 0 $osd_outer_borders_color;
|
||||||
|
|
||||||
|
.page-indicator {
|
||||||
|
padding: $base_padding;
|
||||||
|
|
||||||
|
.page-indicator-icon {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// the container for individual keys
|
||||||
|
.key-container {
|
||||||
|
padding: $base_margin;
|
||||||
|
spacing: $base_margin;
|
||||||
|
}
|
||||||
|
|
||||||
|
// the keys
|
||||||
|
.keyboard-key {
|
||||||
|
|
||||||
|
@include button(normal, $c:$key_bg_color);
|
||||||
|
|
||||||
|
&:focus { @include button(focus);}
|
||||||
|
&:hover, &:checked { @include button(hover, $c: $key_bg_color);}
|
||||||
|
&:active { @include button(active, $c: $key_bg_color); }
|
||||||
|
|
||||||
|
@include fontsize($base_font_size + 5);
|
||||||
|
min-height: $key_size;
|
||||||
|
min-width: $key_size;
|
||||||
|
border-width: 1px;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: $key_border_radius;
|
||||||
|
|
||||||
|
&:grayed { //FIXMEy
|
||||||
|
background-color: darken($bg_color, 3%);
|
||||||
|
color: $osd_fg_color;
|
||||||
|
border-color: $osd_borders_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
// non-character keys
|
||||||
|
&.default-key {
|
||||||
|
@include button(normal, $c:$default_key_bg_color);
|
||||||
|
&:hover, &:checked {@include button(hover, $c: $default_key_bg_color);}
|
||||||
|
&:active { @include button(active, $c: $default_key_bg_color);}
|
||||||
|
}
|
||||||
|
|
||||||
|
// enter key is suggested-action
|
||||||
|
&.enter-key {
|
||||||
|
@include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color);
|
||||||
|
&:hover, &:checked { @include button(hover, $c: lighten($selected_bg_color, 3%));}
|
||||||
|
&:active {@include button(active, $c: darken($selected_bg_color, 2%));}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.shift-key-uppercase { color: $selected_bg_color }
|
||||||
|
|
||||||
|
StIcon { icon-size: 1.125em; }
|
||||||
|
}
|
||||||
|
|
||||||
|
// long press on a key popup
|
||||||
|
.keyboard-subkeys {
|
||||||
|
color: $osd_fg_color;
|
||||||
|
-arrow-border-radius: $modal_radius;
|
||||||
|
-arrow-background-color: $osd_bg_color;
|
||||||
|
-arrow-border-width: 1px;
|
||||||
|
-arrow-border-color: lighten($osd_bg_color, 9%);
|
||||||
|
-arrow-base: 20px;
|
||||||
|
-arrow-rise: 10px;
|
||||||
|
-boxpointer-gap: $base_spacing;
|
||||||
|
|
||||||
|
.keyboard-key {
|
||||||
|
@include button(normal, $c:$key_bg_color);
|
||||||
|
|
||||||
|
&:focus { @include button(focus);}
|
||||||
|
&:hover, &:checked { @include button(hover, $c: $key_bg_color);}
|
||||||
|
&:active { @include button(active, $c: $key_bg_color); }
|
||||||
|
|
||||||
|
border-radius:$base_border_radius;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// emoji
|
||||||
|
.emoji-page {
|
||||||
|
.keyboard-key {
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
color: initial;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-panel {
|
||||||
|
.keyboard-key:latched {
|
||||||
|
border-color: lighten($selected_bg_color, 5%);
|
||||||
|
background-color: $selected_bg_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// suggestions
|
||||||
|
.word-suggestions {
|
||||||
|
@include fontsize($base_font_size + 3);
|
||||||
|
spacing: 12px;
|
||||||
|
min-height: 20pt;
|
||||||
|
}
|
||||||
@@ -0,0 +1,174 @@
|
|||||||
|
/* Login Dialog */
|
||||||
|
|
||||||
|
.login-dialog-banner-view {
|
||||||
|
padding-top: 24px;
|
||||||
|
max-width: 23em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-dialog,
|
||||||
|
.unlock-dialog {
|
||||||
|
//reset
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
|
$_gdm_bg: $system_bg_color;
|
||||||
|
|
||||||
|
StEntry {
|
||||||
|
@if $variant=='dark' {
|
||||||
|
$_gdm_entry_bg: darken($system_bg_color, 3%);
|
||||||
|
background-color: $_gdm_entry_bg;
|
||||||
|
color: $fg_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-dialog-button-box { spacing: 3px; }
|
||||||
|
.modal-dialog-button {
|
||||||
|
padding: 4px 18px;
|
||||||
|
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
||||||
|
background-color: darken($system_bg_color, 3%);
|
||||||
|
border-color: darken($system_bg_color, 3%);
|
||||||
|
color: $osd_fg_color;
|
||||||
|
|
||||||
|
$_hover_c: lighten($_gdm_bg, 5%);
|
||||||
|
&:hover, &:focus {
|
||||||
|
background-color: $_hover_c;
|
||||||
|
border-color: $_hover_c;
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
$_active_c: darken($_gdm_bg, 5%);
|
||||||
|
box-shadow: none;
|
||||||
|
background-color: $_active_c;
|
||||||
|
border-color: $_active_c;
|
||||||
|
}
|
||||||
|
&:insensitive {
|
||||||
|
@include button(insensitive);
|
||||||
|
border-color: darken($_gdm_bg, 5%);
|
||||||
|
background-color: darken($_gdm_bg, 5%);
|
||||||
|
color: transparentize($osd_fg_color, 0.3);
|
||||||
|
}
|
||||||
|
&:default {
|
||||||
|
@include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color);
|
||||||
|
border-color: $selected_bg_color;
|
||||||
|
&:hover, &:focus {
|
||||||
|
@include button(hover,$c:$selected_bg_color, $tc:$selected_fg_color);
|
||||||
|
$_def_hover_c: lighten($selected_bg_color, 5%);
|
||||||
|
background-color: $_def_hover_c;
|
||||||
|
border-color: $_def_hover_c;
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
@include button(active,$c:$selected_bg_color, $tc:$selected_fg_color);
|
||||||
|
$_def_active_c: darken($selected_bg_color, 5%);
|
||||||
|
background-color: $_def_active_c;
|
||||||
|
border-color: $_def_active_c;
|
||||||
|
}
|
||||||
|
&:insensitive {
|
||||||
|
@include button(insensitive);
|
||||||
|
border-color: darken($selected_bg_color, 10%);
|
||||||
|
background-color: darken($selected_bg_color, 10%);
|
||||||
|
color: transparentize($selected_fg_color, 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-button,
|
||||||
|
.switch-user-button,
|
||||||
|
.login-dialog-session-list-button {
|
||||||
|
padding: 0;
|
||||||
|
border-radius: 99px;
|
||||||
|
width: $base_icon_size * 2;
|
||||||
|
height: $base_icon_size * 2;
|
||||||
|
border-color: darken($system_bg_color, 3%);
|
||||||
|
background-color: darken($system_bg_color, 3%);
|
||||||
|
|
||||||
|
StIcon { icon-size: $base_icon_size; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.caps-lock-warning-label,
|
||||||
|
.login-dialog-message-warning {
|
||||||
|
color: $osd_fg_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-dialog-logo-bin { padding: 24px 0px; }
|
||||||
|
.login-dialog-banner { color: darken($osd_fg_color,10%); }
|
||||||
|
.login-dialog-button-box { width: 23em; spacing: 5px; }
|
||||||
|
.login-dialog-message { text-align: center; }
|
||||||
|
.login-dialog-user-selection-box { padding: 100px 0px; }
|
||||||
|
.login-dialog-not-listed-label {
|
||||||
|
padding-left: 2px;
|
||||||
|
.login-dialog-not-listed-button:focus &,
|
||||||
|
.login-dialog-not-listed-button:hover & {
|
||||||
|
color: $osd_fg_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-dialog-not-listed-label {
|
||||||
|
@include fontsize($base_font_size - 1);
|
||||||
|
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;
|
||||||
|
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: $base_border_radius + 4px;
|
||||||
|
padding: 6px;
|
||||||
|
color: darken($osd_fg_color,30%);
|
||||||
|
&:ltr .user-widget { padding-right: 1em; }
|
||||||
|
&:rtl .user-widget { padding-left: 1em; }
|
||||||
|
.login-dialog-timed-login-indicator {
|
||||||
|
height: 2px;
|
||||||
|
margin-top: 6px;
|
||||||
|
background-color: $osd_fg_color;
|
||||||
|
}
|
||||||
|
&:focus .login-dialog-timed-login-indicator { background-color: $selected_fg_color; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-widget-label {
|
||||||
|
color: $osd_fg_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-widget.horizontal .user-widget-label {
|
||||||
|
@include fontsize($base_font_size + 2);
|
||||||
|
font-weight: bold;
|
||||||
|
padding-left: 15px;
|
||||||
|
|
||||||
|
&:ltr { padding-left: 14px; text-align: left; }
|
||||||
|
&:rtl { padding-right: 14px; text-align: right; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-widget.vertical .user-widget-label {
|
||||||
|
@include fontsize($base_font_size + 5);
|
||||||
|
text-align: center;
|
||||||
|
font-weight: normal;
|
||||||
|
padding-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-dialog-timed-login-indicator {
|
||||||
|
height: 2px;
|
||||||
|
background-color: darken($fg_color,40%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-dialog-prompt-layout {
|
||||||
|
padding-top: 24px;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
spacing: $base_spacing * 2;
|
||||||
|
width: 23em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-dialog-prompt-entry {
|
||||||
|
height: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-dialog-prompt-label {
|
||||||
|
color: darken($osd_fg_color, 20%);
|
||||||
|
@include fontsize($base_font_size + 1);
|
||||||
|
padding-top: 1em;
|
||||||
|
}
|
||||||
@@ -0,0 +1,109 @@
|
|||||||
|
/* Looking Glass */
|
||||||
|
|
||||||
|
$text_fg_color: #ccc;
|
||||||
|
|
||||||
|
// Dialog
|
||||||
|
#LookingGlassDialog {
|
||||||
|
background-color: $osd_bg_color;
|
||||||
|
spacing: $base_spacing;
|
||||||
|
padding: 4px;
|
||||||
|
border: 1px solid transparentize($osd_fg_color, 0.8);
|
||||||
|
border-radius: $base_border_radius;
|
||||||
|
color: $osd_fg_color;
|
||||||
|
|
||||||
|
& > #Toolbar {
|
||||||
|
border: none;
|
||||||
|
border-radius: $base_border_radius;
|
||||||
|
background-color: $osd_bg_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.labels { spacing: $base_spacing; }
|
||||||
|
.notebook-tab {
|
||||||
|
-natural-hpadding: $base_padding * 2;
|
||||||
|
-minimum-hpadding: 6px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: darken($osd_fg_color, 15%);
|
||||||
|
transition-duration: 100ms;
|
||||||
|
padding-left: .3em;
|
||||||
|
padding-right: .3em;
|
||||||
|
border-bottom-width: 2px;
|
||||||
|
&:hover {
|
||||||
|
color: $osd_fg_color;
|
||||||
|
}
|
||||||
|
&:selected {
|
||||||
|
border-bottom-width: 2px;
|
||||||
|
box-shadow: inset 0 -2px 0 0 lighten($selected_bg_color, 5%);
|
||||||
|
color: $osd_fg_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
StBoxLayout#EvalBox { padding: 4px; spacing: $base_spacing; }
|
||||||
|
StBoxLayout#ResultsArea { spacing: $base_spacing; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg-dialog {
|
||||||
|
StEntry {
|
||||||
|
background-color: transparentize(lighten($osd_bg_color, 5%), 0.4);
|
||||||
|
color: $osd_fg_color;
|
||||||
|
border-color: transparentize($osd_fg_color, 0.8);
|
||||||
|
min-height: 22px;
|
||||||
|
selection-background-color: $selected_bg_color;
|
||||||
|
selected-color: $selected_fg_color;
|
||||||
|
}
|
||||||
|
.shell-link {
|
||||||
|
color: $link_color;
|
||||||
|
&:hover { color: lighten($link_color, 10%); }
|
||||||
|
&:active { color: darken($link_color, 10%); }
|
||||||
|
}
|
||||||
|
.actor-link {
|
||||||
|
color: $text_fg_color;
|
||||||
|
&:hover { color: lighten($text_fg_color, 20%); }
|
||||||
|
&:active { color: darken($text_fg_color, 20%); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg-completions-text {
|
||||||
|
font-size: .9em;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg-obj-inspector-title {
|
||||||
|
spacing: $base_spacing;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg-obj-inspector-button {
|
||||||
|
border: 1px solid $osd_borders_color;
|
||||||
|
padding: 4px;
|
||||||
|
border-radius: $base_border_radius;
|
||||||
|
&:hover { border: 1px solid #ffffff; }
|
||||||
|
}
|
||||||
|
|
||||||
|
// Extensions
|
||||||
|
#lookingGlassExtensions { padding: 4px; }
|
||||||
|
|
||||||
|
.lg-extensions-list {
|
||||||
|
padding: 4px;
|
||||||
|
spacing: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg-extension {
|
||||||
|
border: 1px solid lighten($osd_borders_color, 5%);
|
||||||
|
background-color: lighten($osd_bg_color, 5%);
|
||||||
|
border-radius: $base_border_radius;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg-extension-name {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg-extension-meta {
|
||||||
|
spacing: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Inspector
|
||||||
|
#LookingGlassPropertyInspector {
|
||||||
|
background: $osd_bg_color;
|
||||||
|
border: 1px solid $osd_borders_color;
|
||||||
|
border-radius: $base_border_radius;
|
||||||
|
padding: 6px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,150 @@
|
|||||||
|
/* Message List */
|
||||||
|
// a.k.a. notifications in the menu
|
||||||
|
|
||||||
|
// main list
|
||||||
|
.message-list {
|
||||||
|
width: 31.5em;
|
||||||
|
padding: 0 $base_padding * 2;
|
||||||
|
|
||||||
|
.message-list-placeholder { spacing: 12px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-list-sections {
|
||||||
|
spacing: $base_spacing;
|
||||||
|
margin: 0 $base_margin * 4; // to account for scrollbar
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-list-section,
|
||||||
|
.message-list-section-list {
|
||||||
|
spacing: $base_spacing;
|
||||||
|
}
|
||||||
|
|
||||||
|
// do-not-disturb + clear button
|
||||||
|
.message-list-controls {
|
||||||
|
margin: ($base_margin * 2) ($base_margin * 4) 0;
|
||||||
|
// NOTE: remove the padding if notification_bubble could remove margin for drop shadow
|
||||||
|
padding: $base_margin;
|
||||||
|
spacing: $base_spacing * 2;
|
||||||
|
|
||||||
|
.dnd-button {
|
||||||
|
// We need this because the focus outline isn't inset like for the buttons
|
||||||
|
// so the dnd button would grow when it gets focus if we didn't change only
|
||||||
|
// its color when focusing.
|
||||||
|
border-width: 2px;
|
||||||
|
border-color: transparent;
|
||||||
|
border-radius: 99px;
|
||||||
|
border-style: solid;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: transparentize($selected_bg_color, 0.4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// message bubbles
|
||||||
|
.message {
|
||||||
|
@include notification_bubble;
|
||||||
|
|
||||||
|
// icon container
|
||||||
|
.message-icon-bin {
|
||||||
|
padding: ($base_padding * 3) 0 ($base_padding * 3) ($base_padding * 2);
|
||||||
|
|
||||||
|
&:rtl {
|
||||||
|
padding: ($base_padding * 3) ($base_padding * 2) ($base_padding * 3) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// icon size and color
|
||||||
|
> StIcon {
|
||||||
|
icon-size: $base_icon_size*2; // 32px
|
||||||
|
-st-icon-style: symbolic;
|
||||||
|
}
|
||||||
|
|
||||||
|
// fallback
|
||||||
|
> .fallback-app-icon {
|
||||||
|
width: $base_icon_size;
|
||||||
|
height: $base_icon_size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// content
|
||||||
|
.message-content {
|
||||||
|
padding: $base_padding + $base_margin * 2;
|
||||||
|
spacing: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// title
|
||||||
|
.message-title {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
// secondary container in title box
|
||||||
|
.message-secondary-bin {
|
||||||
|
padding: 0 $base_margin * 2;
|
||||||
|
|
||||||
|
// notification time stamp
|
||||||
|
> .event-time {
|
||||||
|
color: transparentize($fg_color, 0.5);
|
||||||
|
@include fontsize($base_font_size - 2);
|
||||||
|
/* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
|
||||||
|
padding-bottom: 0.13em;
|
||||||
|
|
||||||
|
&:ltr { text-align: right };
|
||||||
|
&:rtl { text-align: left };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// close button
|
||||||
|
.message-close-button {
|
||||||
|
color: lighten($fg_color, 15%);
|
||||||
|
&:hover { color: if($variant=='light', lighten($fg_color, 30%), darken($fg_color, 10%)); }
|
||||||
|
&:active { color: if($variant=='light', lighten($fg_color, 40%), darken($fg_color, 20%)); }
|
||||||
|
}
|
||||||
|
|
||||||
|
// body
|
||||||
|
.message-body {
|
||||||
|
color: darken($fg_color, 10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// URLs in messages
|
||||||
|
.url-highlighter {
|
||||||
|
link-color: $link_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Media Controls */
|
||||||
|
.message-media-control {
|
||||||
|
padding: $base_padding * 2 1.64em; // $base_padding * 4 = 24px
|
||||||
|
color: darken($fg_color, 15%);
|
||||||
|
|
||||||
|
// uses $hover_bg_color since the media controls are in a notification_bubble
|
||||||
|
&:hover {
|
||||||
|
background-color: lighten($hover_bg_color, 5%);
|
||||||
|
color: $fg_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: darken($hover_bg_color, 2%);
|
||||||
|
color: $fg_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:insensitive { color: darken($fg_color,40%); }
|
||||||
|
|
||||||
|
// fix border-radius for last button
|
||||||
|
&:last-child:ltr { border-radius: 0 $base_border_radius+2 $base_border_radius+2 0; }
|
||||||
|
&:last-child:rtl { border-radius: $base_border_radius+2 0 0 $base_border_radius+2; }
|
||||||
|
}
|
||||||
|
|
||||||
|
// album-art
|
||||||
|
.media-message-cover-icon {
|
||||||
|
icon-size: $base_icon_size*2 !important; // 48px
|
||||||
|
border-radius: $base_border_radius;
|
||||||
|
|
||||||
|
// when there is no artwork
|
||||||
|
&.fallback {
|
||||||
|
color: darken($fg_color, 17%);
|
||||||
|
background-color: $bg_color;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-radius: $base_border_radius;
|
||||||
|
icon-size: $base_icon_size * 2 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,59 @@
|
|||||||
|
// Rubberband for select-area screenshots
|
||||||
|
.select-area-rubberband {
|
||||||
|
background-color: transparentize($selected_bg_color,0.7);
|
||||||
|
border: 1px solid $selected_bg_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
// User icon
|
||||||
|
.user-icon {
|
||||||
|
background-size: contain;
|
||||||
|
color: $osd_fg_color;
|
||||||
|
border-radius: 99px;
|
||||||
|
icon-size: $base_icon_size * 4; // 64px
|
||||||
|
&:hover {
|
||||||
|
color: lighten($osd_fg_color,30%);
|
||||||
|
}
|
||||||
|
|
||||||
|
& StIcon {
|
||||||
|
background-color: transparentize($osd_fg_color,0.95);
|
||||||
|
border-radius: 99px;
|
||||||
|
padding: $base_padding * 2 ; // 12px
|
||||||
|
width: $base_icon_size * 2.5; height: $base_icon_size * 2.5; // 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.user-avatar {
|
||||||
|
border: 2px $osd_fg_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-widget.vertical .user-icon {
|
||||||
|
icon-size: $base_icon_size * 6; // 128px
|
||||||
|
|
||||||
|
& StIcon {
|
||||||
|
padding: $base_padding * 3 + 2px; // 20px
|
||||||
|
padding-top: $base_padding * 3; // 18 px
|
||||||
|
padding-bottom: $base_padding * 3 + 4px; // 22px
|
||||||
|
width: $base_icon_size * 5.5; height: $base_icon_size * 5.5; // 88px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightbox { background-color: black; }
|
||||||
|
.flashspot { background-color: white; }
|
||||||
|
|
||||||
|
|
||||||
|
// Hidden
|
||||||
|
.hidden { color: rgba(0,0,0,0);}
|
||||||
|
|
||||||
|
// Caps-lock warning
|
||||||
|
.caps-lock-warning-label {
|
||||||
|
text-align: center;
|
||||||
|
padding-bottom: 8px;
|
||||||
|
@include fontsize($base_font_size - 1);
|
||||||
|
color: $warning_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Workspace animation */
|
||||||
|
|
||||||
|
.workspace-animation {
|
||||||
|
background-color: $system_bg_color;
|
||||||
|
}
|
||||||
@@ -0,0 +1,56 @@
|
|||||||
|
/* Network Dialogs */
|
||||||
|
.nm-dialog {
|
||||||
|
max-height: 34em;
|
||||||
|
min-height: 31em;
|
||||||
|
min-width: 32em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nm-dialog-content {
|
||||||
|
spacing: 20px;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nm-dialog-airplane-box { spacing: 12px; }
|
||||||
|
|
||||||
|
.nm-dialog-airplane-headline {
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nm-dialog-airplane-text { color: $fg_color; }
|
||||||
|
|
||||||
|
// header
|
||||||
|
.nm-dialog-header {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.nm-dialog-header-icon {
|
||||||
|
icon-size: $base_icon_size * 2;
|
||||||
|
}
|
||||||
|
.nm-dialog-header-hbox { spacing: 10px; }
|
||||||
|
|
||||||
|
// list of networks
|
||||||
|
.nm-dialog-scroll-view {
|
||||||
|
border: 1px solid $borders_color;
|
||||||
|
padding:0;
|
||||||
|
background-color: darken($bg_color, 3%);
|
||||||
|
}
|
||||||
|
|
||||||
|
// list item
|
||||||
|
.nm-dialog-item {
|
||||||
|
@include fontsize($base_font_size);
|
||||||
|
border-bottom: 1px solid $borders_color;
|
||||||
|
padding: $base_padding * 2;
|
||||||
|
spacing: 0px;
|
||||||
|
&:selected {
|
||||||
|
background-color: $selected_bg_color;
|
||||||
|
color: $selected_fg_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// icons in list
|
||||||
|
.nm-dialog-icon { icon-size: $base_icon_size; }
|
||||||
|
.nm-dialog-icons { spacing: $base_spacing * 2; }
|
||||||
|
|
||||||
|
// no networks
|
||||||
|
.no-networks-label { color: $insensitive_fg_color; }
|
||||||
|
.no-networks-box { spacing: $base_padding; }
|
||||||
@@ -0,0 +1,57 @@
|
|||||||
|
/* Notifications & Message Tray */
|
||||||
|
|
||||||
|
$notification_banner_height: 64px;
|
||||||
|
$notification_banner_width: 34em;
|
||||||
|
|
||||||
|
// Banner notifications
|
||||||
|
.notification-banner {
|
||||||
|
min-height: $notification_banner_height;
|
||||||
|
width: $notification_banner_width;
|
||||||
|
|
||||||
|
.notification-actions {
|
||||||
|
spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-button {
|
||||||
|
@extend %bubble_button;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// counter
|
||||||
|
.summary-source-counter {
|
||||||
|
font-size: $base_font_size - 1pt;
|
||||||
|
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 $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%;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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: lighten($fg_color, 15%);
|
||||||
|
&:rtl { padding-left: 0; padding-right: 18pt; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-meta-message {
|
||||||
|
padding-left: 4px;
|
||||||
|
@include fontsize($base_font_size - 2);
|
||||||
|
font-weight: bold;
|
||||||
|
color: lighten($fg_color,18%);
|
||||||
|
&:rtl { padding-left: 0; padding-right: 4px; }
|
||||||
|
}
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
/* OSD */
|
||||||
|
|
||||||
|
$osd_levelbar_height:8px;
|
||||||
|
|
||||||
|
.osd-window {
|
||||||
|
@extend %osd_panel;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
spacing: $base_spacing * 2; // 12px
|
||||||
|
margin: $base_margin * 8; // 32px
|
||||||
|
min-width: 64px;
|
||||||
|
min-height: 64px;
|
||||||
|
|
||||||
|
StIcon {
|
||||||
|
icon-size:$base_icon_size * 6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.osd-monitor-label { font-size: 3em; }
|
||||||
|
|
||||||
|
.level {
|
||||||
|
height: $osd_levelbar_height;
|
||||||
|
-barlevel-height: $osd_levelbar_height;
|
||||||
|
-barlevel-background-color: transparentize($osd_fg_color, if($variant=='light', 0.7, 0.9));
|
||||||
|
-barlevel-active-background-color: $osd_fg_color;
|
||||||
|
-barlevel-overdrive-color: $destructive_color;
|
||||||
|
-barlevel-overdrive-separator-width: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pad OSD */
|
||||||
|
.pad-osd-window {
|
||||||
|
padding: 32px;
|
||||||
|
background-color: transparentize(#000, 0.2);
|
||||||
|
|
||||||
|
.pad-osd-title-box { spacing: 12px; }
|
||||||
|
.pad-osd-title-menu-box { spacing: 6px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.combo-box-label {
|
||||||
|
width: 15em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resize-popup {
|
||||||
|
@extend %osd_panel;
|
||||||
|
}
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
/* OVERVIEW */
|
||||||
|
|
||||||
|
.controls-manager, .secondary-monitor-workspaces {
|
||||||
|
spacing: $base_spacing * 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#overviewGroup {
|
||||||
|
background-color: $system_bg_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overview-controls {
|
||||||
|
padding-bottom: 32px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,135 @@
|
|||||||
|
/* Top Bar */
|
||||||
|
// a.k.a. the panel
|
||||||
|
|
||||||
|
$panel_corner_radius: $base_border_radius+1;
|
||||||
|
$panel_bg_color: #000;
|
||||||
|
$panel_fg_color: #ddd;
|
||||||
|
$panel_height: 2.2em;
|
||||||
|
$panel_transition_duration: 250ms; // same as the overview transition duration
|
||||||
|
|
||||||
|
#panel {
|
||||||
|
background-color: $panel_bg_color;
|
||||||
|
font-weight: bold;
|
||||||
|
height: $panel_height;
|
||||||
|
font-feature-settings: "tnum";
|
||||||
|
transition-duration: $panel_transition_duration;
|
||||||
|
|
||||||
|
// transparent panel on lock & login screens
|
||||||
|
&.unlock-screen,
|
||||||
|
&.login-screen,
|
||||||
|
&:overview {
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
|
.panel-corner {
|
||||||
|
-panel-corner-opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// the rounded outset corners
|
||||||
|
.panel-corner {
|
||||||
|
-panel-corner-radius: $panel_corner_radius;
|
||||||
|
-panel-corner-background-color: $panel_bg_color;
|
||||||
|
-panel-corner-border-width: 2px;
|
||||||
|
-panel-corner-border-color: transparent;
|
||||||
|
-panel-corner-opacity: 1;
|
||||||
|
transition-duration: $panel_transition_duration;
|
||||||
|
}
|
||||||
|
|
||||||
|
// panel menus
|
||||||
|
.panel-button {
|
||||||
|
font-weight: bold;
|
||||||
|
color: $panel_fg_color;
|
||||||
|
-natural-hpadding: $base_padding * 2;
|
||||||
|
-minimum-hpadding: $base_padding;
|
||||||
|
transition-duration: 150ms;
|
||||||
|
border: 3px solid transparent;
|
||||||
|
border-radius: 99px;
|
||||||
|
|
||||||
|
&.clock-display {
|
||||||
|
.clock {
|
||||||
|
transition-duration: 150ms;
|
||||||
|
border: 3px solid transparent;
|
||||||
|
border-radius: 99px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover, &:active, &:overview, &:focus, &:checked {
|
||||||
|
box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.20);
|
||||||
|
|
||||||
|
// The clock display needs to have the background on .clock because
|
||||||
|
// we want to exclude the do-not-disturb indicator from the background
|
||||||
|
&.clock-display {
|
||||||
|
box-shadow: none;
|
||||||
|
|
||||||
|
.clock {
|
||||||
|
box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.20);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// status area icons
|
||||||
|
.system-status-icon {
|
||||||
|
icon-size: $base_icon_size;
|
||||||
|
padding: $base_padding - 1px;
|
||||||
|
margin: 0 $base_margin;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-status-indicators-box .system-status-icon,
|
||||||
|
.panel-status-menu-box .system-status-icon {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// app menu icon
|
||||||
|
.app-menu-icon {
|
||||||
|
-st-icon-style: symbolic;
|
||||||
|
// dimensions of the icon are hardcoded
|
||||||
|
}
|
||||||
|
|
||||||
|
&#panelActivities {
|
||||||
|
-natural-hpadding: $base_padding * 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.unlock-screen,
|
||||||
|
&.login-screen,
|
||||||
|
&:overview {
|
||||||
|
.panel-button {
|
||||||
|
&:hover, &:active, &:overview, &:focus, &:checked {
|
||||||
|
box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15);
|
||||||
|
|
||||||
|
&.clock-display {
|
||||||
|
box-shadow: none;
|
||||||
|
|
||||||
|
.clock {
|
||||||
|
box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
// indicator for active
|
||||||
|
.screencast-indicator,
|
||||||
|
.remote-access-indicator { color: $warning_color; }
|
||||||
|
}
|
||||||
|
|
||||||
|
// App Menu
|
||||||
|
#appMenu {
|
||||||
|
spacing: $base_spacing;
|
||||||
|
.label-shadow { color: transparent; }
|
||||||
|
}
|
||||||
|
|
||||||
|
#appMenu .panel-status-menu-box {
|
||||||
|
padding: 0 $base_padding;
|
||||||
|
spacing: $base_spacing;
|
||||||
|
}
|
||||||
@@ -0,0 +1,131 @@
|
|||||||
|
/* Popovers/Menus */
|
||||||
|
|
||||||
|
$popover_arrow_height: 12px;
|
||||||
|
|
||||||
|
//.the popover itself
|
||||||
|
.popup-menu-boxpointer {
|
||||||
|
-arrow-border-radius: $base_border_radius+4;
|
||||||
|
-arrow-background-color: $bg_color;
|
||||||
|
-arrow-border-width: 1px;
|
||||||
|
-arrow-border-color: $borders_color;
|
||||||
|
-arrow-base: $popover_arrow_height * 2;
|
||||||
|
-arrow-rise: $popover_arrow_height;
|
||||||
|
-arrow-box-shadow: 0 1px 3px rgba(0,0,0,0.5); // dreaming bugzilla #689995
|
||||||
|
}
|
||||||
|
|
||||||
|
// container of the popover menu
|
||||||
|
.popup-menu {
|
||||||
|
min-width: 15em;
|
||||||
|
color: $fg_color;
|
||||||
|
|
||||||
|
//.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is
|
||||||
|
&.panel-menu {
|
||||||
|
-boxpointer-gap: $base_margin; // distance from the panel
|
||||||
|
margin-bottom: 1.75em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-menu-content {
|
||||||
|
padding: $base_padding * 2 + $base_margin 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// menu items
|
||||||
|
.popup-menu-item {
|
||||||
|
spacing: $base_padding;
|
||||||
|
padding: $base_padding;
|
||||||
|
|
||||||
|
&:ltr { padding-right:1.75em; padding-left: 0; }
|
||||||
|
&:rtl { padding-right: 0; padding-left:1.75em; }
|
||||||
|
|
||||||
|
&:checked {
|
||||||
|
background-color: lighten($bg_color, 2%);
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.selected {
|
||||||
|
background-color: transparentize(white, if($variant=='light', 0.2, 0.9));
|
||||||
|
color: $fg_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: $selected_bg_color;
|
||||||
|
color: $selected_fg_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:insensitive { color: transparentize($fg_color,0.5);}
|
||||||
|
}
|
||||||
|
|
||||||
|
// all icons and other graphical elements
|
||||||
|
.popup-inactive-menu-item {
|
||||||
|
color: $fg_color;
|
||||||
|
|
||||||
|
&:insensitive { color: transparentize($fg_color,0.5); }
|
||||||
|
}
|
||||||
|
|
||||||
|
// symbolic icons in popover
|
||||||
|
.popup-menu-arrow,
|
||||||
|
.popup-menu-icon { icon-size: $base_icon_size; }
|
||||||
|
|
||||||
|
// popover submenus
|
||||||
|
.popup-sub-menu {
|
||||||
|
background-color: darken($bg_color, 3%);
|
||||||
|
box-shadow: none;
|
||||||
|
border-top: 1px solid transparentize($borders_color, 0.2);
|
||||||
|
border-bottom: 1px solid transparentize($borders_color, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
// container for radio and check boxes
|
||||||
|
.popup-menu-ornament {
|
||||||
|
width: 1.2em;
|
||||||
|
|
||||||
|
&:ltr { text-align: right };
|
||||||
|
&:rtl { text-align: left };
|
||||||
|
}
|
||||||
|
|
||||||
|
// separator
|
||||||
|
.popup-separator-menu-item {
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
.popup-separator-menu-item-separator {
|
||||||
|
//-margin-horizontal: 24px;
|
||||||
|
height: 1px; //not really the whole box
|
||||||
|
margin: 6px 64px;
|
||||||
|
background-color: lighten($borders_color, 2%);
|
||||||
|
.popup-sub-menu & { //submenu separators
|
||||||
|
margin: 0 64px 0 32px;
|
||||||
|
@if $variant == 'dark' {
|
||||||
|
background-color: lighten($bg_color,10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// desktop background menu
|
||||||
|
.background-menu {
|
||||||
|
-boxpointer-gap: $base_margin;
|
||||||
|
-arrow-rise: 0px; // hide the beak on the menu
|
||||||
|
}
|
||||||
|
|
||||||
|
// system status menu
|
||||||
|
.aggregate-menu {
|
||||||
|
min-width: 21em;
|
||||||
|
|
||||||
|
// lock screen, shutdown, etc. buttons
|
||||||
|
.popup-menu-icon {
|
||||||
|
padding:0;
|
||||||
|
margin: 0 $base_margin;
|
||||||
|
-st-icon-style: symbolic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-sub-menu .popup-menu-item > :first-child {
|
||||||
|
// account for icons in submenus with padding
|
||||||
|
&:ltr {
|
||||||
|
padding-left: $base_padding + $base_margin * 2;
|
||||||
|
margin-left: $base_icon_size;
|
||||||
|
}
|
||||||
|
&:rtl {
|
||||||
|
padding-right: $base_padding + $base_margin * 2; ;
|
||||||
|
margin-right: $base_icon_size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,78 @@
|
|||||||
|
/* Screen Shield */
|
||||||
|
|
||||||
|
.unlock-dialog-clock {
|
||||||
|
color: white;
|
||||||
|
font-weight: 300;
|
||||||
|
text-align: center;
|
||||||
|
spacing: 24px;
|
||||||
|
padding-bottom: 2.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unlock-dialog-clock-time {
|
||||||
|
font-size: 64pt;
|
||||||
|
padding-top: 42px;
|
||||||
|
font-feature-settings: "tnum";
|
||||||
|
}
|
||||||
|
|
||||||
|
.unlock-dialog-clock-date {
|
||||||
|
font-size: 16pt;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unlock-dialog-clock-hint {
|
||||||
|
font-weight: normal;
|
||||||
|
padding-top: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unlock-dialog-notifications-container {
|
||||||
|
margin: 12px 0;
|
||||||
|
spacing: 6px;
|
||||||
|
width: 23em;
|
||||||
|
background-color: transparent;
|
||||||
|
.summary-notification-stack-scrollview {
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification,
|
||||||
|
.unlock-dialog-notification-source {
|
||||||
|
padding: 12px 6px;
|
||||||
|
border: none;
|
||||||
|
background-color: transparentize($osd_bg_color,0.7);
|
||||||
|
color: $osd_fg_color;
|
||||||
|
border-radius: $modal_radius;
|
||||||
|
|
||||||
|
&.critical { background-color: transparentize($osd_bg_color,0.1) }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.unlock-dialog-notification-label {
|
||||||
|
padding: 0px 0px 0px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unlock-dialog-notification-count-text {
|
||||||
|
weight: bold;
|
||||||
|
padding: 0 6px;
|
||||||
|
color: $osd_bg_color;
|
||||||
|
background-color: transparentize($osd_fg_color, 0.7);
|
||||||
|
border-radius: 99px;
|
||||||
|
margin-right: 12px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.screen-shield-background { //just the shadow, really
|
||||||
|
background: black;
|
||||||
|
box-shadow: 0px 2px 4px rgba(0,0,0,0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
#lockDialogGroup {
|
||||||
|
background-color: $system_bg_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
#unlockDialogNotifications {
|
||||||
|
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); }
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
/* 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; }
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
// Search entry
|
||||||
|
|
||||||
|
$search_entry_width: 320px;
|
||||||
|
$search_entry_height: 36px;
|
||||||
|
|
||||||
|
%search_entry,
|
||||||
|
.search-entry {
|
||||||
|
width: $search_entry_width;
|
||||||
|
padding: $base_padding+1 $base_padding+3;
|
||||||
|
border-radius: $search_entry_height * 0.5; // half the height
|
||||||
|
color: transparentize($fg_color,0.3);
|
||||||
|
background-color: $bg_color;
|
||||||
|
margin-top: $base_spacing * 2;
|
||||||
|
margin-bottom: $base_spacing;
|
||||||
|
border-width: 2px;
|
||||||
|
border-color: transparent;
|
||||||
|
&:hover {
|
||||||
|
background-color: $hover_bg_color;
|
||||||
|
color: $hover_fg_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-style: solid;
|
||||||
|
border-color: $selected_bg_color;
|
||||||
|
color: $fg_color;
|
||||||
|
box-shadow: inset 0 1px 2px 1px rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-entry-icon {
|
||||||
|
icon-size: $base_icon_size;
|
||||||
|
padding: 0 4px;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,108 @@
|
|||||||
|
/* Search */
|
||||||
|
|
||||||
|
// search overview container
|
||||||
|
#searchResultsContent {
|
||||||
|
max-width: 1024px;
|
||||||
|
spacing: $base_margin * 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
// search results sections "the boxes"
|
||||||
|
.search-section {
|
||||||
|
// This should be equal to #searchResultsContent spacing
|
||||||
|
spacing: $base_margin * 2;
|
||||||
|
|
||||||
|
// separator
|
||||||
|
.search-section-separator {
|
||||||
|
// height: 1px;
|
||||||
|
// background-color: $osd_outer_borders_color;
|
||||||
|
height: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// content
|
||||||
|
.search-section-content {
|
||||||
|
background-color: transparentize(lighten($osd_bg_color, 5%), 0.2);
|
||||||
|
border-radius: $modal_radius+3;
|
||||||
|
border: 1px solid $osd_outer_borders_color;
|
||||||
|
box-shadow: 0 2px 4px 0 $shadow_color;
|
||||||
|
text-shadow: 0 1px if($variant == 'light', rgba(255,255,255,0.2), rgba(0,0,0,0.2));
|
||||||
|
color: $osd_fg_color;
|
||||||
|
padding: $base_padding * 3;
|
||||||
|
// This is the space between the provider icon and the results container
|
||||||
|
spacing: $base_margin * 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
%search-section-content-item {
|
||||||
|
@extend %icon_tile;
|
||||||
|
|
||||||
|
&:focus,
|
||||||
|
&:hover,
|
||||||
|
&:selected {
|
||||||
|
background-color: transparentize($osd_fg_color, .9);
|
||||||
|
transition-duration: 200ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active,
|
||||||
|
&:checked {
|
||||||
|
background-color: transparentize(darken($osd_bg_color, 10%), .1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// "no results" text
|
||||||
|
.search-statustext {
|
||||||
|
@extend %status_text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-search-results {
|
||||||
|
spacing: $base_spacing * 6;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Search results with icons
|
||||||
|
.grid-search-result {
|
||||||
|
@extend %app-well-app;
|
||||||
|
}
|
||||||
|
|
||||||
|
// search result provider
|
||||||
|
.search-provider-icon {
|
||||||
|
@extend %search-section-content-item;
|
||||||
|
|
||||||
|
// content
|
||||||
|
.list-search-provider-content {
|
||||||
|
spacing: $base_spacing * 2;
|
||||||
|
|
||||||
|
// provider labels
|
||||||
|
.list-search-provider-details {
|
||||||
|
width: 120px;
|
||||||
|
margin-top: 0;
|
||||||
|
color: darken($osd_fg_color, 8%);
|
||||||
|
// font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// search results list
|
||||||
|
.list-search-results {
|
||||||
|
spacing: $base_spacing;
|
||||||
|
}
|
||||||
|
|
||||||
|
// search result listitem
|
||||||
|
.list-search-result {
|
||||||
|
@extend %search-section-content-item;
|
||||||
|
|
||||||
|
// content
|
||||||
|
.list-search-result-content {
|
||||||
|
spacing: $base_padding;
|
||||||
|
}
|
||||||
|
|
||||||
|
// list item title (with leading icon)
|
||||||
|
.list-search-result-title {
|
||||||
|
spacing: $base_spacing * 2;
|
||||||
|
// font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
// list item description
|
||||||
|
.list-search-result-description {
|
||||||
|
color: darken($osd_fg_color, 30%);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
/* Slider */
|
||||||
|
|
||||||
|
$slider_size: 15px;
|
||||||
|
|
||||||
|
.slider {
|
||||||
|
height: $slider_size;
|
||||||
|
// slider trough
|
||||||
|
-barlevel-height: 3px; // has to be an odd number
|
||||||
|
-barlevel-background-color: $borders_color; //background of the trough
|
||||||
|
-barlevel-border-width: 1px;
|
||||||
|
-barlevel-border-color: $borders_color; // trough border color
|
||||||
|
// fill style
|
||||||
|
-barlevel-active-background-color: $selected_bg_color; //active trough fill
|
||||||
|
-barlevel-active-border-color: if($variant == 'light', darken($selected_bg_color, 4%), lighten($selected_bg_color, 2%)); //active trough border
|
||||||
|
// overfill style (red in this case)
|
||||||
|
-barlevel-overdrive-color: $destructive_color;
|
||||||
|
-barlevel-overdrive-border-color: if($variant == 'light', darken($destructive_color, 4%), lighten($destructive_color, 2%)); //trough border when red;
|
||||||
|
-barlevel-overdrive-separator-width:1px;
|
||||||
|
// slider handler
|
||||||
|
-slider-handle-radius: $slider_size * 0.5; // half the size of the size
|
||||||
|
-slider-handle-border-width: 1px;
|
||||||
|
-slider-handle-border-color: if($variant == 'light', $borders_color, $fg_color);
|
||||||
|
|
||||||
|
color: if($variant == 'light', lighten($bg_color, 10%), $fg_color);
|
||||||
|
&:hover { color: $hover_bg_color; }
|
||||||
|
&:active { color: $active_bg_color; }
|
||||||
|
}
|
||||||
@@ -0,0 +1,65 @@
|
|||||||
|
/* App Switcher */
|
||||||
|
|
||||||
|
.switcher-popup {
|
||||||
|
padding: 8px;
|
||||||
|
spacing: $base_spacing * 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
// switcher onscreen panel
|
||||||
|
.switcher-list {
|
||||||
|
@extend %osd_panel;
|
||||||
|
|
||||||
|
.item-box {
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: $base_border_radius + 1px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
|
||||||
|
&:outlined {
|
||||||
|
background-color: transparentize($osd_fg_color, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:selected {
|
||||||
|
background-color: transparentize($osd_fg_color, 0.7);
|
||||||
|
color: $osd_fg_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// window thumbnails
|
||||||
|
.thumbnail-box {
|
||||||
|
padding: 2px;
|
||||||
|
spacing: $base_spacing;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumbnail {
|
||||||
|
width: 256px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.separator {
|
||||||
|
width: 1px;
|
||||||
|
background: $borders_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switcher-list-item-container {
|
||||||
|
spacing: $base_spacing * 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.switcher-arrow {
|
||||||
|
border-color: rgba(0,0,0,0);
|
||||||
|
color: transparentize($fg_color,0.2);
|
||||||
|
&:highlighted {
|
||||||
|
color: $fg_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Input Source Switcher
|
||||||
|
.input-source-switcher-symbol {
|
||||||
|
font-size: 34pt;
|
||||||
|
width: 96px;
|
||||||
|
height: 96px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Window cycler highlight
|
||||||
|
.cycler-highlight {
|
||||||
|
border: 5px solid $selected_bg_color;
|
||||||
|
}
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
/* Switches */
|
||||||
|
|
||||||
|
// these are equal to the size of the SVG assets
|
||||||
|
$switch_height: 22px;
|
||||||
|
$switch_width: 46px;
|
||||||
|
|
||||||
|
.toggle-switch {
|
||||||
|
color: $fg_color;
|
||||||
|
height: $switch_height;
|
||||||
|
width: $switch_width;
|
||||||
|
background-size: contain;
|
||||||
|
background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-off.svg"),url("resource:///org/gnome/shell/theme/toggle-off-dark.svg"));
|
||||||
|
&:checked {
|
||||||
|
background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-on.svg"),url("resource:///org/gnome/shell/theme/toggle-on-dark.svg"));
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
|
||||||
|
/* Tiled window previews */
|
||||||
|
$tile_corner_radius: $base_border_radius + 1px;
|
||||||
|
.tile-preview {
|
||||||
|
background-color: transparentize($selected_bg_color,0.5);
|
||||||
|
border: 1px solid $selected_bg_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile-preview-left.on-primary {
|
||||||
|
border-radius: $tile_corner_radius 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile-preview-right.on-primary {
|
||||||
|
border-radius: 0 $tile_corner_radius 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile-preview-left.tile-preview-right.on-primary {
|
||||||
|
border-radius: $tile_corner_radius $tile_corner_radius 0 0;
|
||||||
|
}
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
/* Window Picker */
|
||||||
|
|
||||||
|
$window_picker_spacing: $base_spacing; // 6px
|
||||||
|
$window_picker_padding: $base_padding * 2; // 12px
|
||||||
|
|
||||||
|
$window_thumbnail_label_color: transparentize($osd_bg_color, 0.4);
|
||||||
|
|
||||||
|
$window_close_button_size: 30px;
|
||||||
|
$window_close_button_padding: 3px;
|
||||||
|
|
||||||
|
// Window picker
|
||||||
|
.window-picker {
|
||||||
|
// Space between window thumbnails
|
||||||
|
spacing: $window_picker_spacing;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Window titles
|
||||||
|
.window-caption {
|
||||||
|
color: $osd_fg_color;
|
||||||
|
background-color: $osd_bg_color;
|
||||||
|
border-radius: 99px;
|
||||||
|
padding: $base_padding $base_padding * 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Close button
|
||||||
|
.window-close {
|
||||||
|
background-color: $osd_bg_color;
|
||||||
|
color: $osd_fg_color;
|
||||||
|
border-radius: $window_close_button_size * 0.5 + $window_close_button_padding * 2;
|
||||||
|
padding: $window_close_button_padding;
|
||||||
|
height: $window_close_button_size;
|
||||||
|
width: $window_close_button_size;
|
||||||
|
box-shadow: -1px 1px 5px 0px rgba(0,0,0,0.5);
|
||||||
|
transition-duration: 300ms;
|
||||||
|
|
||||||
|
& StIcon { icon-size: 24px; }
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: lighten($osd_bg_color, 15%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
color: transparentize($osd_fg_color, 0.2);
|
||||||
|
background-color: darken($osd_bg_color, 5%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.workspace-background {
|
||||||
|
// keep in sync with BACKGROUND_CORNER_RADIUS_PIXELS in workspace.js
|
||||||
|
border-radius: 30px;
|
||||||
|
box-shadow: 0 4px 16px 4px transparentize(darken($osd_bg_color, 30%), 0.7);
|
||||||
|
}
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
/* Workspace Switcher */
|
||||||
|
.workspace-switcher-group {
|
||||||
|
padding: $base_padding * 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.workspace-switcher-container {
|
||||||
|
@extend %osd_panel;
|
||||||
|
}
|
||||||
|
|
||||||
|
.workspace-switcher {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
padding: 0;
|
||||||
|
spacing: $base_spacing * 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ws-switcher-box {
|
||||||
|
background: transparent;
|
||||||
|
height: 50px;
|
||||||
|
background-size: 32px;
|
||||||
|
border: 1px solid transparentize($osd_fg_color,0.9);
|
||||||
|
border-radius: $base_border_radius + 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// active workspace in the switcher
|
||||||
|
.ws-switcher-active-up,
|
||||||
|
.ws-switcher-active-down,
|
||||||
|
.ws-switcher-active-left,
|
||||||
|
.ws-switcher-active-right {
|
||||||
|
height: 52px;
|
||||||
|
background-color: $selected_bg_color;
|
||||||
|
border: 1px solid if($variant=='light', darken($selected_bg_color, 8%), lighten($selected_bg_color, 5%));
|
||||||
|
border-radius: $base_border_radius + 3px;
|
||||||
|
color: $selected_fg_color;
|
||||||
|
}
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
/* Workspace pager */
|
||||||
|
|
||||||
|
// thumbnails in overview
|
||||||
|
.workspace-thumbnails {
|
||||||
|
visible-width: 32px; //amount visible before hover
|
||||||
|
spacing: $base_spacing;
|
||||||
|
padding: $base_padding;
|
||||||
|
|
||||||
|
.workspace-thumbnail {
|
||||||
|
@extend %overview_panel;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// drag and drop indicator
|
||||||
|
.placeholder {
|
||||||
|
background-image: url("resource:///org/gnome/shell/theme/workspace-placeholder.svg");
|
||||||
|
background-size: contain;
|
||||||
|
width: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// selected indicator
|
||||||
|
.workspace-thumbnail-indicator {
|
||||||
|
border: 3px solid $selected_bg_color;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 0px;
|
||||||
|
// background-color: transparentize($selected_bg_color, 0.9);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user