From 36ea87af388b6e1aaf349fe793a8d38823973602 Mon Sep 17 00:00:00 2001
From: vyv03354 <VYV03354@nifty.ne.jp>
Date: Sun, 7 Apr 2013 20:57:14 +0900
Subject: [PATCH] Remove prefixed gradients usage
---
web/viewer.css | 61 +++++++++-----------------------------------------
1 file changed, 11 insertions(+), 50 deletions(-)
diff --git a/web/viewer.css b/web/viewer.css
index 34adfbffb..a505689ce 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -254,14 +254,7 @@ html[dir='rtl'] #sidebarContent {
#toolbarSidebar {
width: 200px;
height: 32px;
- background-image: url(images/texture.png),
- -webkit-linear-gradient(hsla(0,0%,30%,.99), hsla(0,0%,25%,.95));
- background-image: url(images/texture.png),
- -moz-linear-gradient(hsla(0,0%,30%,.99), hsla(0,0%,25%,.95));
- background-image: url(images/texture.png),
- -ms-linear-gradient(hsla(0,0%,30%,.99), hsla(0,0%,25%,.95));
- background-image: url(images/texture.png),
- -o-linear-gradient(hsla(0,0%,30%,.99), hsla(0,0%,25%,.95));
+ background-color: #424242; /* fallback */
background-image: url(images/texture.png),
linear-gradient(hsla(0,0%,30%,.99), hsla(0,0%,25%,.95));
box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25),
@@ -274,15 +267,7 @@ html[dir='rtl'] #sidebarContent {
#toolbarViewer, .findbar {
position: relative;
height: 32px;
- background-color: #474747; /* IE9 */
- background-image: url(images/texture.png),
- -webkit-linear-gradient(hsla(0,0%,32%,.99), hsla(0,0%,27%,.95));
- background-image: url(images/texture.png),
- -moz-linear-gradient(hsla(0,0%,32%,.99), hsla(0,0%,27%,.95));
- background-image: url(images/texture.png),
- -ms-linear-gradient(hsla(0,0%,32%,.99), hsla(0,0%,27%,.95));
- background-image: url(images/texture.png),
- -o-linear-gradient(hsla(0,0%,32%,.99), hsla(0,0%,27%,.95));
+ background-color: #474747; /* fallback */
background-image: url(images/texture.png),
linear-gradient(hsla(0,0%,32%,.99), hsla(0,0%,27%,.95));
box-shadow: inset 1px 0 0 hsla(0,0%,100%,.08),
@@ -462,10 +447,6 @@ html[dir='rtl'] .splitToolbarButton > .toolbarButton {
.splitToolbarButton.toggled > .toolbarButton,
.toolbarButton.textButton {
background-color: hsla(0,0%,0%,.12);
- background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
- background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
- background-image: -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
- background-image: -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
background-clip: padding-box;
border: 1px solid hsla(0,0%,0%,.35);
@@ -600,10 +581,6 @@ html[dir='rtl'] .dropdownToolbarButton {
.toolbarButton:focus,
.dropdownToolbarButton {
background-color: hsla(0,0%,0%,.12);
- background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
- background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
- background-image: -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
- background-image: -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
background-clip: padding-box;
border: 1px solid hsla(0,0%,0%,.35);
@@ -616,10 +593,6 @@ html[dir='rtl'] .dropdownToolbarButton {
.toolbarButton:hover:active,
.dropdownToolbarButton:hover:active {
background-color: hsla(0,0%,0%,.2);
- background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
- background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
- background-image: -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
- background-image: -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
border-color: hsla(0,0%,0%,.35) hsla(0,0%,0%,.4) hsla(0,0%,0%,.45);
box-shadow: 0 1px 1px hsla(0,0%,0%,.1) inset,
@@ -645,10 +618,6 @@ html[dir='rtl'] .dropdownToolbarButton {
.toolbarButton.toggled,
.splitToolbarButton.toggled > .toolbarButton.toggled {
background-color: hsla(0,0%,0%,.3);
- background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
- background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
- background-image: -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
- background-image: -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
border-color: hsla(0,0%,0%,.4) hsla(0,0%,0%,.45) hsla(0,0%,0%,.5);
box-shadow: 0 1px 1px hsla(0,0%,0%,.1) inset,
@@ -880,7 +849,7 @@ html[dir='rtl'] .toolbarButton.pageDown::before {
border: 1px solid transparent;
border-radius: 2px;
background-color: hsla(0,0%,100%,.09);
- background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
+ background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
background-clip: padding-box;
border: 1px solid hsla(0,0%,0%,.35);
border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42);
@@ -977,7 +946,7 @@ a:focus > .thumbnail > .thumbnailSelectionRing > .thumbnailImage,
a:focus > .thumbnail > .thumbnailSelectionRing,
.thumbnail:hover > .thumbnailSelectionRing {
background-color: hsla(0,0%,100%,.15);
- background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
+ background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
background-clip: padding-box;
box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
0 0 1px hsla(0,0%,100%,.2) inset,
@@ -992,7 +961,7 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
.thumbnail.selected > .thumbnailSelectionRing {
background-color: hsla(0,0%,100%,.3);
- background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
+ background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
background-clip: padding-box;
box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
0 0 1px hsla(0,0%,100%,.1) inset,
@@ -1043,7 +1012,7 @@ html[dir='rtl'] .outlineItem > a {
.outlineItem > a:hover {
background-color: hsla(0,0%,100%,.02);
- background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
+ background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
background-clip: padding-box;
box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
0 0 1px hsla(0,0%,100%,.2) inset,
@@ -1053,7 +1022,7 @@ html[dir='rtl'] .outlineItem > a {
.outlineItem.selected {
background-color: hsla(0,0%,100%,.08);
- background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
+ background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
background-clip: padding-box;
box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
0 0 1px hsla(0,0%,100%,.1) inset,
@@ -1146,8 +1115,7 @@ canvas {
height: 25px;
background-color: hsla(0,0%,0%,.3);
- background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
- background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
+ background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
border: 1px solid #000;
box-shadow: 0 1px 1px hsla(0,0%,0%,.1) inset,
0 0 1px hsla(0,0%,0%,.2) inset,
@@ -1159,12 +1127,7 @@ canvas {
float: left;
background: #666;
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2b2b2), color-stop(100%,#898989));
- background: -webkit-linear-gradient(top, #b2b2b2 0%,#898989 100%);
- background: -moz-linear-gradient(top, #b2b2b2 0%,#898989 100%);
- background: -ms-linear-gradient(top, #b2b2b2 0%,#898989 100%);
- background: -o-linear-gradient(top, #b2b2b2 0%,#898989 100%);
- background: linear-gradient(top, #b2b2b2 0%,#898989 100%);
+ background: linear-gradient(#b2b2b2 0%,#898989 100%);
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
@@ -1181,10 +1144,8 @@ canvas {
#loadingBar .progress.indeterminate {
width: 100%;
height: 25px;
- background-image: -moz-linear-gradient( 30deg, #404040, #404040 15%, #898989, #404040 85%, #404040);
- background-image: -webkit-linear-gradient( 30deg, #404040, #404040 15%, #898989, #404040 85%, #404040);
- background-image: -ms-linear-gradient( 30deg, #404040, #404040 15%, #898989, #404040 85%, #404040);
- background-image: -o-linear-gradient( 30deg, #404040, #404040 15%, #898989, #404040 85%, #404040);
+ background-color: #666;
+ background-image: linear-gradient(60deg, #404040, #404040 15%, #898989, #404040 85%, #404040);
background-size: 75px 25px;
-moz-animation: progressIndeterminate 1s linear infinite;
-webkit-animation: progressIndeterminate 1s linear infinite;