You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
152 lines
13 KiB
152 lines
13 KiB
From 75d1884df6740c268b665935af909a9a1e1ef6be Mon Sep 17 00:00:00 2001
|
|
From: Hugo Pereira Da Costa <hugo.pereira@free.fr>
|
|
Date: Fri, 14 Nov 2014 18:37:33 +0100
|
|
Subject: update spinner code (copied from Adwaita) to have working spinner for
|
|
gtk+-3.14 BUG: 340901
|
|
|
|
---
|
|
rc/gtk-spinner.css | 128 +++++++++--------------------------------------------
|
|
1 file changed, 20 insertions(+), 108 deletions(-)
|
|
|
|
diff --git a/rc/gtk-spinner.css b/rc/gtk-spinner.css
|
|
index f90a8d4..d20264f 100644
|
|
--- a/rc/gtk-spinner.css
|
|
+++ b/rc/gtk-spinner.css
|
|
@@ -1,114 +1,26 @@
|
|
-/* spinners */
|
|
-/*
|
|
-this is copied from Adwaita.
|
|
-cannot be implemented in the code because of the 'new' way gtk3 renders spinners
|
|
-*/
|
|
-@keyframes spinner {
|
|
- 0.00% { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)); }
|
|
-
|
|
- 12.5% { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)); }
|
|
-
|
|
- 25.0% { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)); }
|
|
-
|
|
- 37.5% { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)); }
|
|
-
|
|
- 50.0% { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)); }
|
|
-
|
|
- 62.5% { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)); }
|
|
-
|
|
- 75.0% { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)); }
|
|
-
|
|
- 87.5% { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)); }
|
|
+/*********************
|
|
+ * Spinner Animation *
|
|
+ *********************/
|
|
+@keyframes spin
|
|
+{
|
|
+ to { -gtk-icon-transform: rotate(1turn); }
|
|
+}
|
|
|
|
- 100% { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)); }
|
|
+.spinner
|
|
+{
|
|
+ background-image: none;
|
|
+ background-color: blue;
|
|
+ opacity: 0;
|
|
+ -gtk-icon-source: -gtk-icontheme("process-working-symbolic");
|
|
}
|
|
|
|
-.spinner {
|
|
- background-color: transparent;
|
|
- background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent));
|
|
- background-position: 14% 14%, 0% 50%, 14% 86%, 50% 100%, 86% 86%, 100% 50%, 86% 14%, 50% 0%;
|
|
- background-size: 20% 20%;
|
|
- background-repeat: no-repeat;
|
|
+.spinner:active
|
|
+{
|
|
+ opacity: 1;
|
|
+ animation: spin 1s linear infinite;
|
|
}
|
|
|
|
-.spinner:active {
|
|
- background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)),
|
|
- -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent));
|
|
- animation: spinner 1s infinite linear;
|
|
+.spinner:active:insensitive
|
|
+{
|
|
+ opacity: 0.5;
|
|
}
|
|
--
|
|
cgit v0.11.2
|