From 42ff673048d169bcbec5e4bb17619d66e6f6f61d Mon Sep 17 00:00:00 2001
From: Anika Henke <anika@selfthinker.org>
Date: Sun, 25 Mar 2012 14:41:39 +0100
Subject: [PATCH] fixed performance issues with gradient in Firefox (which also
added gradient support for IE9) (FS#2447)
* removed all occurrences of '-moz-linear-gradient'
* added SVG as fallback for Firefox, IE9 and other browsers to page background and buttons
---
lib/tpl/dokuwiki/css/basic.css | 13 ++++++++-----
lib/tpl/dokuwiki/css/content.css | 2 +-
lib/tpl/dokuwiki/images/page-background.svg | 8 ++++++++
3 files changed, 17 insertions(+), 6 deletions(-)
create mode 100644 lib/tpl/dokuwiki/images/page-background.svg
diff --git a/lib/tpl/dokuwiki/css/basic.css b/lib/tpl/dokuwiki/css/basic.css
index ae9be499e..dce632b9a 100644
--- a/lib/tpl/dokuwiki/css/basic.css
+++ b/lib/tpl/dokuwiki/css/basic.css
@@ -16,7 +16,8 @@ html,
body {
color: __text__;
background-color: __background_site__;
- background-image: -moz-linear-gradient( top, __background_neu__ 0%, __background_alt__ 1em, __background_site__ 4em);
+ background-image: url(images/page-background.svg);
+ /*background-image: -moz-linear-gradient( top, __background_neu__ 0%, __background_alt__ 1em, __background_site__ 4em); see FS#2447*/
background-image: -webkit-linear-gradient(top, __background_neu__ 0%, __background_alt__ 1em, __background_site__ 4em);
background-image: -o-linear-gradient( top, __background_neu__ 0%, __background_alt__ 1em, __background_site__ 4em);
background-image: -ms-linear-gradient( top, __background_neu__ 0%, __background_alt__ 1em, __background_site__ 4em);
@@ -333,7 +334,8 @@ button,
.qq-upload-button {
color: #333;
background-color: #eee;
- background: -moz-linear-gradient( top, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%);
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4MjQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0VFRUVFRSIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0NDQ0NDQyIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnODI0KSIgLz4KPC9zdmc+);
+ /*background: -moz-linear-gradient( top, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%); see FS#2447*/
background: -webkit-linear-gradient(top, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%);
background: -o-linear-gradient( top, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%);
background: -ms-linear-gradient( top, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%);
@@ -359,10 +361,11 @@ button:focus,
.qq-upload-button:hover {
border-color: #999;
background-color: #ddd;
- background: -moz-linear-gradient( top, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #cccccc 99%);
+ background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2NzAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0RERERERCIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0JCQkJCQiIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNjcwKSIgLz4KPC9zdmc+);
+ /*background: -moz-linear-gradient( top, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #cccccc 99%); see FS#2447*/
background: -webkit-linear-gradient(top, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%);
- background: -o-linear-gradient( top, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #cccccc 99%);
- background: -ms-linear-gradient( top, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #cccccc 99%);
+ background: -o-linear-gradient( top, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%);
+ background: -ms-linear-gradient( top, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%);
background: linear-gradient( top, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%);
}
diff --git a/lib/tpl/dokuwiki/css/content.css b/lib/tpl/dokuwiki/css/content.css
index ca2294950..7cb7c6edf 100644
--- a/lib/tpl/dokuwiki/css/content.css
+++ b/lib/tpl/dokuwiki/css/content.css
@@ -119,7 +119,7 @@
.dokuwiki dl.code dt,
.dokuwiki dl.file dt {
background-color: __background_alt__;
- background: -moz-linear-gradient( top, __background__ 0%, __background_alt__ 100%);
+ /*background: -moz-linear-gradient( top, __background__ 0%, __background_alt__ 100%); see FS#2447 */
background: -webkit-linear-gradient(top, __background__ 0%, __background_alt__ 100%);
background: -o-linear-gradient( top, __background__ 0%, __background_alt__ 100%);
background: -ms-linear-gradient( top, __background__ 0%, __background_alt__ 100%);
diff --git a/lib/tpl/dokuwiki/images/page-background.svg b/lib/tpl/dokuwiki/images/page-background.svg
new file mode 100644
index 000000000..086341ddf
--- /dev/null
+++ b/lib/tpl/dokuwiki/images/page-background.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
+ <linearGradient id="g" x1="0%" y1="0%" x2="0%" y2="100%">
+ <stop offset="0" stop-color="#dddddd" />
+ <stop offset="0.1" stop-color="#eeeeee" />
+ <stop offset="0.4" stop-color="#fbfaf9" />
+ </linearGradient>
+ <rect x="0" y="0" width="100%" height="100%" fill="url(#g)" />
+</svg>
\ No newline at end of file
--
GitLab