From 3b14930eec5630892b727acfee6b25eb9beedd63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Steffen=20M=C3=A4rcker?= Date: Mon, 11 Jun 2012 11:03:15 +0200 Subject: [PATCH] added missing css vendor prefixes and reordered some properties according to cascade --- web/viewer.css | 186 +++++++++++++++++++++++++++++++++++++------------ 1 file changed, 141 insertions(+), 45 deletions(-) diff --git a/web/viewer.css b/web/viewer.css index 329bff2d5..5a8ee2aaf 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -54,19 +54,31 @@ html[dir='rtl'] .innerCenter { bottom: 0; width: 200px; visibility: hidden; - -moz-transition-duration: 200ms; - -moz-transition-timing-function: ease; -webkit-transition-duration: 200ms; -webkit-transition-timing-function: ease; + -moz-transition-duration: 200ms; + -moz-transition-timing-function: ease; + -ms-transition-duration: 200ms; + -ms-transition-timing-function: ease; + -o-transition-duration: 200ms; + -o-transition-timing-function: ease; + transition-duration: 200ms; + transition-timing-function: ease; + } html[dir='ltr'] #sidebarContainer { - -moz-transition-property: left; -webkit-transition-property: left; + -moz-transition-property: left; + -ms-transition-property: left; + -o-transition-property: left; + transition-property: left; left: -200px; } html[dir='rtl'] #sidebarContainer { - -moz-transition-property: right; -webkit-transition-property: right; + -ms-transition-property: right; + -o-transition-property: right; + transition-property: right; right: -200px; } @@ -87,19 +99,31 @@ html[dir='rtl'] #outerContainer.sidebarOpen > #sidebarContainer { right: 0; bottom: 0; left: 0; - -moz-transition-duration: 200ms; - -moz-transition-timing-function: ease; -webkit-transition-duration: 200ms; -webkit-transition-timing-function: ease; + -moz-transition-duration: 200ms; + -moz-transition-timing-function: ease; + -ms-transition-duration: 200ms; + -ms-transition-timing-function: ease; + -o-transition-duration: 200ms; + -o-transition-timing-function: ease; + transition-duration: 200ms; + transition-timing-function: ease; } html[dir='ltr'] #outerContainer.sidebarOpen > #mainContainer { - -moz-transition-property: left; -webkit-transition-property: left; + -moz-transition-property: left; + -ms-transition-property: left; + -o-transition-property: left; + transition-property: left; left: 200px; } html[dir='rtl'] #outerContainer.sidebarOpen > #mainContainer { - -moz-transition-property: right; -webkit-transition-property: right; + -moz-transition-property: right; + -ms-transition-property: right; + -o-transition-property: right; + transition-property: right; right: 200px; } @@ -147,10 +171,16 @@ 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), - -webkit-linear-gradient(hsla(0,0%,30%,.99), hsla(0,0%,25%,.95)); + -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-image: url(images/texture.png), + linear-gradient(hsla(0,0%,30%,.99), hsla(0,0%,25%,.95)); box-shadow: inset -2px 0 0 hsla(0,0%,100%,.08), inset 0 1px 1px hsla(0,0%,0%,.15), inset 0 -1px 0 hsla(0,0%,100%,.05), @@ -161,10 +191,16 @@ html[dir='rtl'] #sidebarContent { #toolbarViewer { position: relative; height: 32px; + 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), - -webkit-linear-gradient(hsla(0,0%,32%,.99), hsla(0,0%,27%,.95)); + -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-image: url(images/texture.png), + linear-gradient(hsla(0,0%,32%,.99), hsla(0,0%,27%,.95)); border-left: 1px solid hsla(0,0%,0%,.5); box-shadow: inset 1px 0 0 hsla(0,0%,100%,.08), inset 0 1px 1px hsla(0,0%,0%,.15), @@ -246,20 +282,33 @@ html[dir='rtl'] .splitToolbarButton > .toolbarButton { .splitToolbarButton:focus > .toolbarButton, .splitToolbarButton.toggled > .toolbarButton { background-color: hsla(0,0%,0%,.12); - 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: -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); border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42); box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset, 0 0 1px hsla(0,0%,100%,.15) inset, 0 1px 0 hsla(0,0%,100%,.05); - -moz-transition-property: background-color, border-color, box-shadow; - -moz-transition-duration: 150ms; - -moz-transition-timing-function: ease; -webkit-transition-property: background-color, border-color, box-shadow; -webkit-transition-duration: 150ms; -webkit-transition-timing-function: ease; + -moz-transition-property: background-color, border-color, box-shadow; + -moz-transition-duration: 150ms; + -moz-transition-timing-function: ease; + -ms-transition-property: background-color, border-color, box-shadow; + -ms-transition-duration: 150ms; + -ms-transition-timing-function: ease; + -o-transition-property: background-color, border-color, box-shadow; + -o-transition-duration: 150ms; + -o-transition-timing-function: ease; + transition-property: background-color, border-color, box-shadow; + transition-duration: 150ms; + transition-timing-function: ease; + } .splitToolbarButton > .toolbarButton:hover, .splitToolbarButton > .toolbarButton:focus, @@ -308,12 +357,21 @@ html[dir='rtl'] .splitToolbarButtonSeparator { padding: 12px 0; margin: 0; box-shadow: 0 0 0 1px hsla(0,0%,100%,.03); - -moz-transition-property: padding; - -moz-transition-duration: 10ms; - -moz-transition-timing-function: ease; -webkit-transition-property: padding; -webkit-transition-duration: 10ms; -webkit-transition-timing-function: ease; + -moz-transition-property: padding; + -moz-transition-duration: 10ms; + -moz-transition-timing-function: ease; + -ms-transition-property: padding; + -ms-transition-duration: 10ms; + -ms-transition-timing-function: ease; + -o-transition-property: padding; + -o-transition-duration: 10ms; + -o-transition-timing-function: ease; + transition-property: padding; + transition-duration: 10ms; + transition-timing-function: ease; } .toolbarButton, @@ -325,15 +383,26 @@ html[dir='rtl'] .splitToolbarButtonSeparator { color: hsl(0,0%,95%); font-size: 12px; line-height: 14px; - -moz-user-select:none; -webkit-user-select:none; + -moz-user-select:none; + -ms-user-select:none; + /* Opera does not support user-select, use <... unselectable="on"> instead */ cursor: default; - -moz-transition-property: background-color, border-color, box-shadow; - -moz-transition-duration: 150ms; - -moz-transition-timing-function: ease; -webkit-transition-property: background-color, border-color, box-shadow; -webkit-transition-duration: 150ms; -webkit-transition-timing-function: ease; + -moz-transition-property: background-color, border-color, box-shadow; + -moz-transition-duration: 150ms; + -moz-transition-timing-function: ease; + -ms-transition-property: background-color, border-color, box-shadow; + -ms-transition-duration: 150ms; + -ms-transition-timing-function: ease; + -o-transition-property: background-color, border-color, box-shadow; + -o-transition-duration: 150ms; + -o-transition-timing-function: ease; + transition-property: background-color, border-color, box-shadow; + transition-duration: 150ms; + transition-timing-function: ease; } html[dir='ltr'] .toolbarButton, @@ -349,8 +418,11 @@ html[dir='rtl'] .dropdownToolbarButton { .toolbarButton:focus, .dropdownToolbarButton { background-color: hsla(0,0%,0%,.12); - 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: -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); border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42); @@ -362,35 +434,59 @@ html[dir='rtl'] .dropdownToolbarButton { .toolbarButton:hover:active, .dropdownToolbarButton:hover:active { background-color: hsla(0,0%,0%,.2); - 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: -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, 0 0 1px hsla(0,0%,0%,.2) inset, 0 1px 0 hsla(0,0%,100%,.05); - -moz-transition-property: background-color, border-color, box-shadow; - -moz-transition-duration: 10ms; - -moz-transition-timing-function: linear; -webkit-transition-property: background-color, border-color, box-shadow; -webkit-transition-duration: 10ms; -webkit-transition-timing-function: linear; + -moz-transition-property: background-color, border-color, box-shadow; + -moz-transition-duration: 10ms; + -moz-transition-timing-function: linear; + -ms-transition-property: background-color, border-color, box-shadow; + -ms-transition-duration: 10ms; + -ms-transition-timing-function: linear; + -o-transition-property: background-color, border-color, box-shadow; + -o-transition-duration: 10ms; + -o-transition-timing-function: linear; + transition-property: background-color, border-color, box-shadow; + transition-duration: 10ms; + transition-timing-function: linear; } .toolbarButton.toggled, .splitToolbarButton.toggled > .toolbarButton.toggled { 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: -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, 0 0 1px hsla(0,0%,0%,.2) inset, 0 1px 0 hsla(0,0%,100%,.05); - -moz-transition-property: background-color, border-color, box-shadow; - -moz-transition-duration: 10ms; - -moz-transition-timing-function: linear; -webkit-transition-property: background-color, border-color, box-shadow; -webkit-transition-duration: 10ms; -webkit-transition-timing-function: linear; + -moz-transition-property: background-color, border-color, box-shadow; + -moz-transition-duration: 10ms; + -moz-transition-timing-function: linear; + -ms-transition-property: background-color, border-color, box-shadow; + -ms-transition-duration: 10ms; + -ms-transition-timing-function: linear; + -o-transition-property: background-color, border-color, box-shadow; + -o-transition-duration: 10ms; + -o-transition-timing-function: linear; + transition-property: background-color, border-color, box-shadow; + transition-duration: 10ms; + transition-timing-function: linear; } .toolbarButton.toggled:hover:active, @@ -417,8 +513,8 @@ html[dir='rtl'] .dropdownToolbarButton { } .dropdownToolbarButton > select { - -moz-appearance: none; /* in the future this might matter, see bugzilla bug #649849 */ -webkit-appearance: none; + -moz-appearance: none; /* in the future this might matter, see bugzilla bug #649849 */ min-width: 140px; font-size: 12px; color: hsl(0,0%,95%); @@ -460,8 +556,8 @@ html[dir='rtl'] .toolbarButton:first-child { } .toolbarButtonFlexibleSpacer { - -moz-box-flex: 1; -webkit-box-flex: 1; + -moz-box-flex: 1; min-width: 30px; } @@ -516,8 +612,8 @@ html[dir='rtl'] .toolbarButton.pageDown::before { } .toolbarButton.bookmark { - -moz-box-sizing: border-box; -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; box-sizing: border-box; margin-top: 3px; padding-top: 4px; @@ -597,8 +693,8 @@ html[dir='rtl'] .toolbarButton.pageDown::before { font-size: 12px; line-height: 14px; text-align: left; - -moz-user-select:none; -webkit-user-select:none; + -moz-user-select:none; cursor: default; } @@ -674,8 +770,8 @@ a:focus > .thumbnail > .thumbnailSelectionRing, bottom: 0; padding: 4px 4px 0; overflow: auto; - -moz-user-select:none; -webkit-user-select:none; + -moz-user-select:none; } .outlineItem > .outlineItems { @@ -784,9 +880,9 @@ canvas { margin: 10px auto; position: relative; overflow: hidden; - box-shadow: 0px 4px 10px #000; - -moz-box-shadow: 0px 4px 10px #000; -webkit-box-shadow: 0px 4px 10px #000; + -moz-box-shadow: 0px 4px 10px #000; + box-shadow: 0px 4px 10px #000; background-color: white; } @@ -798,9 +894,9 @@ canvas { .page > a:hover { opacity: 0.2; background: #ff0; - box-shadow: 0px 2px 10px #ff0; - -moz-box-shadow: 0px 2px 10px #ff0; -webkit-box-shadow: 0px 2px 10px #ff0; + -moz-box-shadow: 0px 2px 10px #ff0; + box-shadow: 0px 2px 10px #ff0; } .loadingIcon { @@ -838,11 +934,11 @@ canvas { float: left; background: #666; - background: -moz-linear-gradient(top, #999 0%, #666 50%, #999 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(50%,#666), color-stop(100%,#999)); background: -webkit-linear-gradient(top, #999 0%,#666 50%,#999 100%); - background: -o-linear-gradient(top, #999 0%,#666 50%,#999 100%); + background: -moz-linear-gradient(top, #999 0%, #666 50%, #999 100%); background: -ms-linear-gradient(top, #999 0%,#666 50%,#999 100%); + background: -o-linear-gradient(top, #999 0%,#666 50%,#999 100%); background: linear-gradient(top, #999 0%,#666 50%,#999 100%); border-top-left-radius: 3px; @@ -896,9 +992,9 @@ canvas { padding: 0.2em; max-width: 20em; background-color: #F1E47B; - box-shadow: 0px 2px 10px #333; - -moz-box-shadow: 0px 2px 10px #333; -webkit-box-shadow: 0px 2px 10px #333; + -moz-box-shadow: 0px 2px 10px #333; + box-shadow: 0px 2px 10px #333; } .annotComment > div > h1 { @@ -1008,9 +1104,9 @@ canvas { .page { float: left; display: none; - box-shadow: none; - -moz-box-shadow: none; -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; } .page[data-loaded] {