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