Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Convert all HSLA colors to RGBA colors

Browse Source
This commit is contained in:
Tim van der Meij 2019-12-25 14:15:39 +01:00
parent 0bdb1ab202
commit 3717dcdf57
No known key found for this signature in database
GPG Key ID: 8C3FD2925A5F2762
1 changed files with 110 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

220
web/viewer.css
View File

@ -155,15 +155,15 @@ html[dir='rtl'] #outerContainer.sidebarOpen #sidebarContainer {
-webkit-overflow-scrolling: touch;
position: absolute;
width: 100%;
background-color: hsla(0,0%,0%,.1);
background-color: rgba(0, 0, 0, 0.1);
}
html[dir='ltr'] #sidebarContent {
left: 0;
box-shadow: inset -1px 0 0 hsla(0,0%,0%,.25);
box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25);
}
html[dir='rtl'] #sidebarContent {
right: 0;
box-shadow: inset 1px 0 0 hsla(0,0%,0%,.25);
box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25);
}
#viewerContainer {
@ -181,10 +181,10 @@ html[dir='rtl'] #sidebarContent {
transition-timing-function: ease;
}
html[dir='ltr'] #viewerContainer {
box-shadow: inset 1px 0 0 hsla(0,0%,100%,.05);
box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.05);
}
html[dir='rtl'] #viewerContainer {
box-shadow: inset -1px 0 0 hsla(0,0%,100%,.05);
box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.05);
}
#outerContainer.sidebarResizing #viewerContainer {
@ -220,19 +220,19 @@ html[dir='rtl'] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentatio
height: 32px;
background-color: #424242; /* fallback */
background-image: url(images/texture.png),
linear-gradient(hsla(0,0%,30%,.99), hsla(0,0%,25%,.95));
linear-gradient(rgba(77, 77, 77, 0.99), rgba(64, 64, 64, 0.95));
}
html[dir='ltr'] #toolbarSidebar {
box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25),
inset 0 -1px 0 hsla(0,0%,100%,.05),
0 1px 0 hsla(0,0%,0%,.15),
0 0 1px hsla(0,0%,0%,.1);
inset 0 -1px 0 rgba(255, 255, 255, 0.05),
0 1px 0 rgba(0, 0, 0, 0.15),
0 0 1px rgba(0, 0, 0, 0.1);
}
html[dir='rtl'] #toolbarSidebar {
box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25),
inset 0 1px 0 hsla(0,0%,100%,.05),
0 1px 0 hsla(0,0%,0%,.15),
0 0 1px hsla(0,0%,0%,.1);
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 1px 0 rgba(0, 0, 0, 0.15),
0 0 1px rgba(0, 0, 0, 0.1);
}
#sidebarResizer {
@ -255,19 +255,19 @@ html[dir='rtl'] #sidebarResizer {
height: 32px;
background-color: #474747; /* fallback */
background-image: url(images/texture.png),
linear-gradient(hsla(0,0%,32%,.99), hsla(0,0%,27%,.95));
linear-gradient(rgba(82, 82, 82, 0.99), rgba(69, 69, 69, 0.95));
}
html[dir='ltr'] #toolbarContainer, .findbar, .secondaryToolbar {
box-shadow: inset 0 1px 1px hsla(0,0%,0%,.15),
inset 0 -1px 0 hsla(0,0%,100%,.05),
0 1px 0 hsla(0,0%,0%,.15),
0 1px 1px hsla(0,0%,0%,.1);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15),
inset 0 -1px 0 rgba(255, 255, 255, 0.05),
0 1px 0 rgba(0, 0, 0, 0.15),
0 1px 1px rgba(0, 0, 0, 0.1);
}
html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
box-shadow: inset 0 1px 1px hsla(0,0%,0%,.15),
inset 0 -1px 0 hsla(0,0%,100%,.05),
0 1px 0 hsla(0,0%,0%,.15),
0 1px 1px hsla(0,0%,0%,.1);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15),
inset 0 -1px 0 rgba(255, 255, 255, 0.05),
0 1px 0 rgba(0, 0, 0, 0.15),
0 1px 1px rgba(0, 0, 0, 0.1);
}
#toolbarViewer {
@ -401,7 +401,7 @@ html[dir='rtl'] .secondaryToolbar {
.doorHanger,
.doorHangerRight {
border: 1px solid hsla(0,0%,0%,.5);
border: 1px solid rgba(0, 0, 0, 0.5);
border-radius: 2px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
@ -417,12 +417,12 @@ html[dir='rtl'] .secondaryToolbar {
}
.doorHanger:after,
.doorHangerRight:after {
border-bottom-color: hsla(0,0%,32%,.99);
border-bottom-color: rgba(82, 82, 82, 0.99);
border-width: 8px;
}
.doorHanger:before,
.doorHangerRight:before {
border-bottom-color: hsla(0,0%,0%,.5);
border-bottom-color: rgba(0, 0, 0, 0.5);
border-width: 9px;
}
@ -545,14 +545,14 @@ html[dir='rtl'] .splitToolbarButton > .toolbarButton {
.splitToolbarButton:focus > .toolbarButton,
.splitToolbarButton.toggled > .toolbarButton,
.toolbarButton.textButton {
background-color: hsla(0,0%,0%,.12);
background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
background-color: rgba(0, 0, 0, 0.12);
background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 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);
border: 1px solid rgba(0, 0, 0, 0.35);
border-color: rgba(0, 0, 0, 0.32) rgba(0, 0, 0, 0.38) rgba(0, 0, 0, 0.42);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
0 0 1px rgba(255, 255, 255, 0.15) inset,
0 1px 0 rgba(255, 255, 255, 0.05);
transition-property: background-color, border-color, box-shadow;
transition-duration: 150ms;
transition-timing-function: ease;
@ -565,10 +565,10 @@ html[dir='rtl'] .splitToolbarButton > .toolbarButton {
.overlayButton:focus,
.toolbarButton.textButton:hover,
.toolbarButton.textButton:focus {
background-color: hsla(0,0%,0%,.2);
box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
0 0 1px hsla(0,0%,100%,.15) inset,
0 0 1px hsla(0,0%,0%,.05);
background-color: rgba(0,0,0,0.2);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
0 0 1px rgba(255, 255, 255, 0.15) inset,
0 0 1px rgba(0, 0, 0, 0.05);
z-index: 199;
}
.splitToolbarButton > .toolbarButton {
@ -595,9 +595,9 @@ html[dir='rtl'] .splitToolbarButton > .toolbarButton:first-child {
.splitToolbarButtonSeparator {
padding: 8px 0;
width: 1px;
background-color: hsla(0,0%,0%,.5);
background-color: rgba(0, 0, 0, 0.5);
z-index: 99;
box-shadow: 0 0 0 1px hsla(0,0%,100%,.08);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
display: inline-block;
margin: 5px 0;
}
@ -611,7 +611,7 @@ html[dir='rtl'] .splitToolbarButtonSeparator {
.splitToolbarButton.toggled > .splitToolbarButtonSeparator {
padding: 12px 0;
margin: 1px 0;
box-shadow: 0 0 0 1px hsla(0,0%,100%,.03);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03);
transition-property: padding;
transition-duration: 10ms;
transition-timing-function: ease;
@ -625,7 +625,7 @@ html[dir='rtl'] .splitToolbarButtonSeparator {
padding: 2px 6px 0;
border: 1px solid transparent;
border-radius: 2px;
color: hsla(0,0%,100%,.8);
color: rgba(255, 255, 255, 0.8);
font-size: 12px;
line-height: 14px;
user-select: none;
@ -653,26 +653,26 @@ html[dir='rtl'] .dropdownToolbarButton {
.overlayButton,
.secondaryToolbarButton:hover,
.secondaryToolbarButton:focus {
background-color: hsla(0,0%,0%,.12);
background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
background-color: rgba(0, 0, 0, 0.12);
background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 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);
border: 1px solid rgba(0, 0, 0, 0.35);
border-color: rgba(0, 0, 0, 0.32) rgba(0, 0, 0, 0.38) rgba(0, 0, 0, 0.42);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
0 0 1px rgba(255, 255, 255, 0.15) inset,
0 1px 0 rgba(255, 255, 255, 0.05);
}
.toolbarButton:hover:active,
.overlayButton:hover:active,
.dropdownToolbarButton:hover:active,
.secondaryToolbarButton:hover:active {
background-color: hsla(0,0%,0%,.2);
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);
background-color: rgba(0, 0, 0, 0.2);
background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
border-color: rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.45);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset,
0 0 1px rgba(0, 0, 0, 0.2) inset,
0 1px 0 rgba(255, 255, 255, 0.05);
transition-property: background-color, border-color, box-shadow;
transition-duration: 10ms;
transition-timing-function: linear;
@ -681,12 +681,12 @@ html[dir='rtl'] .dropdownToolbarButton {
.toolbarButton.toggled,
.splitToolbarButton.toggled > .toolbarButton.toggled,
.secondaryToolbarButton.toggled {
background-color: hsla(0,0%,0%,.3);
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);
background-color: rgba(0, 0, 0, 0.3);
background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
border-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.45) rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset,
0 0 1px rgba(0, 0, 0, 0.2) inset,
0 1px 0 rgba(255, 255, 255, 0.05);
transition-property: background-color, border-color, box-shadow;
transition-duration: 10ms;
transition-timing-function: linear;
@ -695,11 +695,11 @@ html[dir='rtl'] .dropdownToolbarButton {
.toolbarButton.toggled:hover:active,
.splitToolbarButton.toggled > .toolbarButton.toggled:hover:active,
.secondaryToolbarButton.toggled:hover:active {
background-color: hsla(0,0%,0%,.4);
border-color: hsla(0,0%,0%,.4) hsla(0,0%,0%,.5) hsla(0,0%,0%,.55);
box-shadow: 0 1px 1px hsla(0,0%,0%,.2) inset,
0 0 1px hsla(0,0%,0%,.3) inset,
0 1px 0 hsla(0,0%,100%,.05);
background-color: rgba(0, 0, 0, 0.4);
border-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.55);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) inset,
0 0 1px rgba(0, 0, 0, 0.3) inset,
0 1px 0 rgba(255, 255, 255, 0.05);
}
.dropdownToolbarButton {
@ -1005,8 +1005,8 @@ html[dir="rtl"] .secondaryToolbarButton > span {
padding: 8px 0;
margin: 8px 4px;
width: 1px;
background-color: hsla(0,0%,0%,.5);
box-shadow: 0 0 0 1px hsla(0,0%,100%,.08);
background-color: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
html[dir='ltr'] .verticalToolbarSeparator {
margin-left: 2px;
@ -1020,22 +1020,22 @@ html[dir='rtl'] .verticalToolbarSeparator {
margin: 0 0 4px 0;
height: 1px;
width: 100%;
background-color: hsla(0,0%,0%,.5);
box-shadow: 0 0 0 1px hsla(0,0%,100%,.08);
background-color: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.toolbarField {
padding: 3px 6px;
margin: 4px 0 4px 0;
border-radius: 2px;
background-color: hsla(0,0%,100%,.09);
background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
background-color: rgba(255, 255, 255, 0.09);
background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
background-clip: padding-box;
border-width: 1px;
border-style: solid;
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%,0%,.05) inset,
0 1px 0 hsla(0,0%,100%,.05);
border-color: rgba(0, 0, 0, 0.32) rgba(0, 0, 0, 0.38) rgba(0, 0, 0, 0.42);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset,
0 1px 0 rgba(255, 255, 255, 0.05);
color: rgba(242, 242, 242, 1);
font-size: 12px;
line-height: 14px;
@ -1070,13 +1070,13 @@ html[dir='rtl'] .verticalToolbarSeparator {
}
.toolbarField:hover {
background-color: hsla(0,0%,100%,.11);
border-color: hsla(0,0%,0%,.4) hsla(0,0%,0%,.43) hsla(0,0%,0%,.45);
background-color: rgba(255, 255, 255, 0.11);
border-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.43) rgba(0, 0, 0, 0.45);
}
.toolbarField:focus {
background-color: hsla(0,0%,100%,.15);
border-color: hsla(204,100%,65%,.8) hsla(204,100%,65%,.85) hsla(204,100%,65%,.9);
background-color: rgba(255, 255, 255, 0.15);
border-color: rgba(77, 184, 255, 0.8) rgba(77, 184, 255, 0.85) rgba(77, 184, 255, 0.9);
}
.toolbarLabel {
@ -1152,28 +1152,28 @@ a:focus > .thumbnail > .thumbnailSelectionRing > .thumbnailImage,
a:focus > .thumbnail > .thumbnailSelectionRing,
.thumbnail:hover > .thumbnailSelectionRing {
background-color: hsla(0,0%,100%,.15);
background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
background-color: rgba(255, 255, 255, 0.15);
background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 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,
0 0 1px hsla(0,0%,0%,.2);
color: hsla(0,0%,100%,.9);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
0 0 1px rgba(255, 255, 255, 0.2) inset,
0 0 1px rgba(0, 0, 0, 0.2);
color: rgba(255, 255, 255, 0.9);
}
.thumbnail.selected > .thumbnailSelectionRing > .thumbnailImage {
box-shadow: 0 0 0 1px hsla(0,0%,0%,.5);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
opacity: 1;
}
.thumbnail.selected > .thumbnailSelectionRing {
background-color: hsla(0,0%,100%,.3);
background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
background-color: rgba(255, 255, 255, 0.3);
background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 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,
0 0 1px hsla(0,0%,0%,.2);
color: hsla(0,0%,100%,1);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
0 0 1px rgba(255, 255, 255, 0.1) inset,
0 0 1px rgba(0, 0, 0, 0.2);
color: rgba(255, 255, 255,1);
}
#outlineView,
@ -1214,7 +1214,7 @@ html[dir='rtl'] .outlineItem > .outlineItems {
height: auto;
margin-bottom: 1px;
border-radius: 2px;
color: hsla(0,0%,100%,.8);
color: rgba(255, 255, 255, 0.8);
font-size: 13px;
line-height: 15px;
user-select: none;
@ -1248,7 +1248,7 @@ html[dir='rtl'] .attachmentsItem > button {
position: relative;
height: 0;
width: 0;
color: hsla(0,0%,100%,.5);
color: rgba(255, 255, 255, 0.5);
}
.outlineItemToggler::before {
content: url(images/treeitem-expanded.png);
@ -1282,29 +1282,29 @@ html[dir='rtl'] .outlineItemToggler::before {
.outlineItemToggler:hover ~ .outlineItems,
.outlineItem > a:hover,
.attachmentsItem > button:hover {
background-color: hsla(0,0%,100%,.02);
background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
background-color: rgba(255, 255, 255, 0.02);
background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 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,
0 0 1px hsla(0,0%,0%,.2);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
0 0 1px rgba(255, 255, 255, 0.2) inset,
0 0 1px rgba(0, 0, 0, 0.2);
border-radius: 2px;
color: hsla(0,0%,100%,.9);
color: rgba(255, 255, 255, 0.9);
}
.outlineItem.selected {
background-color: hsla(0,0%,100%,.08);
background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
background-color: rgba(255, 255, 255, 0.08);
background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 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,
0 0 1px hsla(0,0%,0%,.2);
color: hsla(0,0%,100%,1);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
0 0 1px rgba(255, 255, 255, 0.1) inset,
0 0 1px rgba(0, 0, 0, 0.2);
color: rgba(255, 255, 255, 1);
}
.noResults {
font-size: 12px;
color: hsla(0,0%,100%,.8);
color: rgba(255, 255, 255, 0.8);
font-style: italic;
cursor: default;
}
@ -1355,7 +1355,7 @@ html[dir='rtl'] .outlineItemToggler::before {
position: absolute;
width: 100%;
height: 100%;
background-color: hsla(0,0%,0%,.2);
background-color: rgba(0, 0, 0, 0.2);
z-index: 40000;
}
#overlayContainer > * {
@ -1378,8 +1378,8 @@ html[dir='rtl'] .outlineItemToggler::before {
line-height: 14px;
background-color: #474747; /* fallback */
background-image: url(images/texture.png),
linear-gradient(hsla(0,0%,32%,.99), hsla(0,0%,27%,.95));
border: 1px solid hsla(0,0%,0%,.5);
linear-gradient(rgba(82, 82, 82,0.99), rgba(69, 69, 69, 0.95));
border: 1px solid rgba(0, 0, 0, 0.5);
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
@ -1401,8 +1401,8 @@ html[dir='rtl'] .outlineItemToggler::before {
margin: 4px 0 4px 0;
height: 1px;
width: 100%;
background-color: hsla(0,0%,0%,.5);
box-shadow: 0 0 0 1px hsla(0,0%,100%,.08);
background-color: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.dialog .buttonRow {
@ -1848,7 +1848,7 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
@media all and (max-width: 840px) {
#sidebarContent {
background-color: hsla(0,0%,0%,.7);
background-color: rgba(0, 0, 0, 0.7);
}
html[dir='ltr'] #outerContainer.sidebarOpen #viewerContainer {