diff options
Diffstat (limited to 'third-party/pdfjs/web/viewer.css')
| -rw-r--r-- | third-party/pdfjs/web/viewer.css | 2982 |
1 files changed, 2308 insertions, 674 deletions
diff --git a/third-party/pdfjs/web/viewer.css b/third-party/pdfjs/web/viewer.css index 8711953bf..605cad57e 100644 --- a/third-party/pdfjs/web/viewer.css +++ b/third-party/pdfjs/web/viewer.css @@ -1,5 +1,4 @@ /* Copyright 2014 Mozilla Foundation - * Modifications made for Epiphany by Jan-Michael Brummer <jan.brummer@tabos.org> * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -22,7 +21,7 @@ bottom: 0; overflow: hidden; opacity: 0.2; - line-height: 1.0; + line-height: 1; } .textLayer > span { @@ -169,7 +168,7 @@ .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after, .annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before { background-color: rgba(0, 0, 0, 1); - content: ''; + content: ""; display: block; position: absolute; } @@ -309,13 +308,16 @@ border: none; } -.pdfViewer.scrollHorizontal, .pdfViewer.scrollWrapped, .spread { +.pdfViewer.scrollHorizontal, +.pdfViewer.scrollWrapped, +.spread { margin-left: 3.5px; margin-right: 3.5px; text-align: center; } -.pdfViewer.scrollHorizontal, .spread { +.pdfViewer.scrollHorizontal, +.spread { white-space: nowrap; } @@ -365,7 +367,7 @@ top: 0; right: 0; bottom: 0; - background: url('images/loading-icon.gif') center no-repeat; + background: url("images/loading-icon.gif") center no-repeat; } .pdfPresentationMode .pdfViewer { @@ -407,6 +409,149 @@ --sidebar-width: 200px; --sidebar-transition-duration: 200ms; --sidebar-transition-timing-function: ease; + + --toolbar-icon-opacity: 0.7; + --doorhanger-icon-opacity: 0.9; + + --main-color: rgba(12, 12, 13, 1); + --body-bg-color: rgba(237, 237, 240, 1); + --errorWrapper-bg-color: rgba(255, 74, 74, 1); + --progressBar-color: rgba(10, 132, 255, 1); + --progressBar-indeterminate-bg-color: rgba(221, 221, 222, 1); + --progressBar-indeterminate-blend-color: rgba(116, 177, 239, 1); + --scrollbar-color: auto; + --scrollbar-bg-color: auto; + + --sidebar-bg-color: rgba(245, 246, 247, 1); + --toolbar-bg-color: rgba(249, 249, 250, 1); + --toolbar-border-color: rgba(204, 204, 204, 1); + --button-hover-color: rgba(221, 222, 223, 1); + --toggled-btn-bg-color: rgba(0, 0, 0, 0.3); + --dropdown-btn-bg-color: rgba(215, 215, 219, 1); + --separator-color: rgba(0, 0, 0, 0.3); + --field-color: rgba(6, 6, 6, 1); + --field-bg-color: rgba(255, 255, 255, 1); + --field-border-color: rgba(187, 187, 188, 1); + --findbar-nextprevious-btn-bg-color: rgba(227, 228, 230, 1); + --outline-color: rgba(0, 0, 0, 0.8); + --outline-hover-color: rgba(0, 0, 0, 0.9); + --outline-active-color: rgba(0, 0, 0, 0.08); + --outline-active-bg-color: rgba(0, 0, 0, 1); + --sidebaritem-bg-color: rgba(0, 0, 0, 0.15); + --doorhanger-bg-color: rgba(255, 255, 255, 1); + --doorhanger-border-color: rgba(12, 12, 13, 0.2); + --doorhanger-hover-color: rgba(237, 237, 237, 1); + --doorhanger-separator-color: rgba(222, 222, 222, 1); + --overlay-button-bg-color: rgba(12, 12, 13, 0.1); + --overlay-button-hover-color: rgba(12, 12, 13, 0.3); + + --loading-icon: url(images/loading.svg); + --treeitem-expanded-icon: url(images/treeitem-expanded.svg); + --treeitem-collapsed-icon: url(images/treeitem-collapsed.svg); + --toolbarButton-menuArrow-icon: url(images/toolbarButton-menuArrow.svg); + --toolbarButton-sidebarToggle-icon: url(images/toolbarButton-sidebarToggle.svg); + --toolbarButton-secondaryToolbarToggle-icon: url(images/toolbarButton-secondaryToolbarToggle.svg); + --toolbarButton-pageUp-icon: url(images/toolbarButton-pageUp.svg); + --toolbarButton-pageDown-icon: url(images/toolbarButton-pageDown.svg); + --toolbarButton-zoomOut-icon: url(images/toolbarButton-zoomOut.svg); + --toolbarButton-zoomIn-icon: url(images/toolbarButton-zoomIn.svg); + --toolbarButton-presentationMode-icon: url(images/toolbarButton-presentationMode.svg); + --toolbarButton-print-icon: url(images/toolbarButton-print.svg); + --toolbarButton-openFile-icon: url(images/toolbarButton-openFile.svg); + --toolbarButton-download-icon: url(images/toolbarButton-download.svg); + --toolbarButton-bookmark-icon: url(images/toolbarButton-bookmark.svg); + --toolbarButton-viewThumbnail-icon: url(images/toolbarButton-viewThumbnail.svg); + --toolbarButton-viewOutline-icon: url(images/toolbarButton-viewOutline.svg); + --toolbarButton-viewAttachments-icon: url(images/toolbarButton-viewAttachments.svg); + --toolbarButton-viewLayers-icon: url(images/toolbarButton-viewLayers.svg); + --toolbarButton-search-icon: url(images/toolbarButton-search.svg); + --findbarButton-previous-icon: url(images/findbarButton-previous.svg); + --findbarButton-next-icon: url(images/findbarButton-next.svg); + --secondaryToolbarButton-firstPage-icon: url(images/secondaryToolbarButton-firstPage.svg); + --secondaryToolbarButton-lastPage-icon: url(images/secondaryToolbarButton-lastPage.svg); + --secondaryToolbarButton-rotateCcw-icon: url(images/secondaryToolbarButton-rotateCcw.svg); + --secondaryToolbarButton-rotateCw-icon: url(images/secondaryToolbarButton-rotateCw.svg); + --secondaryToolbarButton-selectTool-icon: url(images/secondaryToolbarButton-selectTool.svg); + --secondaryToolbarButton-handTool-icon: url(images/secondaryToolbarButton-handTool.svg); + --secondaryToolbarButton-scrollVertical-icon: url(images/secondaryToolbarButton-scrollVertical.svg); + --secondaryToolbarButton-scrollHorizontal-icon: url(images/secondaryToolbarButton-scrollHorizontal.svg); + --secondaryToolbarButton-scrollWrapped-icon: url(images/secondaryToolbarButton-scrollWrapped.svg); + --secondaryToolbarButton-spreadNone-icon: url(images/secondaryToolbarButton-spreadNone.svg); + --secondaryToolbarButton-spreadOdd-icon: url(images/secondaryToolbarButton-spreadOdd.svg); + --secondaryToolbarButton-spreadEven-icon: url(images/secondaryToolbarButton-spreadEven.svg); + --secondaryToolbarButton-documentProperties-icon: url(images/secondaryToolbarButton-documentProperties.svg); +} + +@media (prefers-color-scheme: dark) { + :root { + --main-color: rgba(249, 249, 250, 1); + --body-bg-color: rgba(42, 42, 46, 1); + --errorWrapper-bg-color: rgba(199, 17, 17, 1); + --progressBar-color: rgba(0, 96, 223, 1); + --progressBar-indeterminate-bg-color: rgba(40, 40, 43, 1); + --progressBar-indeterminate-blend-color: rgba(20, 68, 133, 1); + --scrollbar-color: rgba(121, 121, 123, 1); + --scrollbar-bg-color: rgba(35, 35, 39, 1); + + --sidebar-bg-color: rgba(50, 50, 52, 1); + --toolbar-bg-color: rgba(56, 56, 61, 1); + --toolbar-border-color: rgba(12, 12, 13, 1); + --button-hover-color: rgba(102, 102, 103, 1); + --toggled-btn-bg-color: rgba(0, 0, 0, 0.3); + --dropdown-btn-bg-color: rgba(74, 74, 79, 1); + --separator-color: rgba(0, 0, 0, 0.3); + --field-color: rgba(250, 250, 250, 1); + --field-bg-color: rgba(64, 64, 68, 1); + --field-border-color: rgba(115, 115, 115, 1); + --findbar-nextprevious-btn-bg-color: rgba(89, 89, 89, 1); + --outline-color: rgba(255, 255, 255, 0.8); + --outline-hover-color: rgba(255, 255, 255, 0.9); + --outline-active-color: rgba(255, 255, 255, 0.08); + --outline-active-bg-color: rgba(255, 255, 255, 1); + --sidebaritem-bg-color: rgba(255, 255, 255, 0.15); + --doorhanger-bg-color: rgba(74, 74, 79, 1); + --doorhanger-border-color: rgba(39, 39, 43, 1); + --doorhanger-hover-color: rgba(93, 94, 98, 1); + --doorhanger-separator-color: rgba(92, 92, 97, 1); + --overlay-button-bg-color: rgba(92, 92, 97, 1); + --overlay-button-hover-color: rgba(115, 115, 115, 1); + + --loading-icon: url(images/loading-dark.svg); + --treeitem-expanded-icon: url(images/treeitem-expanded-dark.svg); + --treeitem-collapsed-icon: url(images/treeitem-collapsed-dark.svg); + --toolbarButton-menuArrow-icon: url(images/toolbarButton-menuArrow-dark.svg); + --toolbarButton-sidebarToggle-icon: url(images/toolbarButton-sidebarToggle-dark.svg); + --toolbarButton-secondaryToolbarToggle-icon: url(images/toolbarButton-secondaryToolbarToggle-dark.svg); + --toolbarButton-pageUp-icon: url(images/toolbarButton-pageUp-dark.svg); + --toolbarButton-pageDown-icon: url(images/toolbarButton-pageDown-dark.svg); + --toolbarButton-zoomOut-icon: url(images/toolbarButton-zoomOut-dark.svg); + --toolbarButton-zoomIn-icon: url(images/toolbarButton-zoomIn-dark.svg); + --toolbarButton-presentationMode-icon: url(images/toolbarButton-presentationMode-dark.svg); + --toolbarButton-print-icon: url(images/toolbarButton-print-dark.svg); + --toolbarButton-openFile-icon: url(images/toolbarButton-openFile-dark.svg); + --toolbarButton-download-icon: url(images/toolbarButton-download-dark.svg); + --toolbarButton-bookmark-icon: url(images/toolbarButton-bookmark-dark.svg); + --toolbarButton-viewThumbnail-icon: url(images/toolbarButton-viewThumbnail-dark.svg); + --toolbarButton-viewOutline-icon: url(images/toolbarButton-viewOutline-dark.svg); + --toolbarButton-viewAttachments-icon: url(images/toolbarButton-viewAttachments-dark.svg); + --toolbarButton-viewLayers-icon: url(images/toolbarButton-viewLayers-dark.svg); + --toolbarButton-search-icon: url(images/toolbarButton-search-dark.svg); + --findbarButton-previous-icon: url(images/findbarButton-previous-dark.svg); + --findbarButton-next-icon: url(images/findbarButton-next-dark.svg); + --secondaryToolbarButton-firstPage-icon: url(images/secondaryToolbarButton-firstPage-dark.svg); + --secondaryToolbarButton-lastPage-icon: url(images/secondaryToolbarButton-lastPage-dark.svg); + --secondaryToolbarButton-rotateCcw-icon: url(images/secondaryToolbarButton-rotateCcw-dark.svg); + --secondaryToolbarButton-rotateCw-icon: url(images/secondaryToolbarButton-rotateCw-dark.svg); + --secondaryToolbarButton-selectTool-icon: url(images/secondaryToolbarButton-selectTool-dark.svg); + --secondaryToolbarButton-handTool-icon: url(images/secondaryToolbarButton-handTool-dark.svg); + --secondaryToolbarButton-scrollVertical-icon: url(images/secondaryToolbarButton-scrollVertical-dark.svg); + --secondaryToolbarButton-scrollHorizontal-icon: url(images/secondaryToolbarButton-scrollHorizontal-dark.svg); + --secondaryToolbarButton-scrollWrapped-icon: url(images/secondaryToolbarButton-scrollWrapped-dark.svg); + --secondaryToolbarButton-spreadNone-icon: url(images/secondaryToolbarButton-spreadNone-dark.svg); + --secondaryToolbarButton-spreadOdd-icon: url(images/secondaryToolbarButton-spreadOdd-dark.svg); + --secondaryToolbarButton-spreadEven-icon: url(images/secondaryToolbarButton-spreadEven-dark.svg); + --secondaryToolbarButton-documentProperties-icon: url(images/secondaryToolbarButton-documentProperties-dark.svg); + } } * { @@ -424,16 +569,172 @@ html { body { height: 100%; width: 100%; - background-color: rgba(64, 64, 64, 1); - background-image: url(images/texture.png); + background-color: rgba(237, 237, 240, 1); + background-color: var(--body-bg-color); +} + +@media (prefers-color-scheme: dark) { + + body { + background-color: rgba(42, 42, 46, 1); + background-color: var(--body-bg-color); + } +} + +body { + font: message-box; + outline: none; + scrollbar-color: auto auto; + scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color); +} + +@media (prefers-color-scheme: dark) { + + body { + scrollbar-color: rgba(121, 121, 123, 1) rgba(35, 35, 39, 1); + scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color); + } +} + +@media (prefers-color-scheme: dark) { + + body { + scrollbar-color: rgba(121, 121, 123, 1) rgba(35, 35, 39, 1); + scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color); + } +} + +@media (prefers-color-scheme: dark) { + + body { + scrollbar-color: rgba(121, 121, 123, 1) rgba(35, 35, 39, 1); + scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color); + } +} + +@media (prefers-color-scheme: dark) { + + body { + scrollbar-color: rgba(121, 121, 123, 1) rgba(35, 35, 39, 1); + scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color); + } +} + +input { + font: message-box; + outline: none; + scrollbar-color: auto auto; + scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color); +} + +@media (prefers-color-scheme: dark) { + + input { + scrollbar-color: rgba(121, 121, 123, 1) rgba(35, 35, 39, 1); + scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color); + } +} + +@media (prefers-color-scheme: dark) { + + input { + scrollbar-color: rgba(121, 121, 123, 1) rgba(35, 35, 39, 1); + scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color); + } +} + +@media (prefers-color-scheme: dark) { + + input { + scrollbar-color: rgba(121, 121, 123, 1) rgba(35, 35, 39, 1); + scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color); + } +} + +@media (prefers-color-scheme: dark) { + + input { + scrollbar-color: rgba(121, 121, 123, 1) rgba(35, 35, 39, 1); + scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color); + } +} + +button { + font: message-box; + outline: none; + scrollbar-color: auto auto; + scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color); +} + +@media (prefers-color-scheme: dark) { + + button { + scrollbar-color: rgba(121, 121, 123, 1) rgba(35, 35, 39, 1); + scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color); + } +} + +@media (prefers-color-scheme: dark) { + + button { + scrollbar-color: rgba(121, 121, 123, 1) rgba(35, 35, 39, 1); + scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color); + } +} + +@media (prefers-color-scheme: dark) { + + button { + scrollbar-color: rgba(121, 121, 123, 1) rgba(35, 35, 39, 1); + scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color); + } +} + +@media (prefers-color-scheme: dark) { + + button { + scrollbar-color: rgba(121, 121, 123, 1) rgba(35, 35, 39, 1); + scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color); + } } -body, -input, -button, select { font: message-box; outline: none; + scrollbar-color: auto auto; + scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color); +} + +@media (prefers-color-scheme: dark) { + + select { + scrollbar-color: rgba(121, 121, 123, 1) rgba(35, 35, 39, 1); + scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color); + } +} + +@media (prefers-color-scheme: dark) { + + select { + scrollbar-color: rgba(121, 121, 123, 1) rgba(35, 35, 39, 1); + scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color); + } +} + +@media (prefers-color-scheme: dark) { + + select { + scrollbar-color: rgba(121, 121, 123, 1) rgba(35, 35, 39, 1); + scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color); + } +} + +@media (prefers-color-scheme: dark) { + + select { + scrollbar-color: rgba(121, 121, 123, 1) rgba(35, 35, 39, 1); + scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color); + } } .hidden { @@ -567,12 +868,12 @@ select { transition-timing-function: ease; transition-timing-function: var(--sidebar-transition-timing-function); } -html[dir='ltr'] #sidebarContainer { +html[dir="ltr"] #sidebarContainer { transition-property: left; left: -200px; left: calc(0px - var(--sidebar-width)); } -html[dir='rtl'] #sidebarContainer { +html[dir="rtl"] #sidebarContainer { transition-property: right; right: -200px; right: calc(0px - var(--sidebar-width)); @@ -596,10 +897,10 @@ html[dir='rtl'] #sidebarContainer { #outerContainer.sidebarOpen #sidebarContainer { visibility: visible; } -html[dir='ltr'] #outerContainer.sidebarOpen #sidebarContainer { +html[dir="ltr"] #outerContainer.sidebarOpen #sidebarContainer { left: 0px; } -html[dir='rtl'] #outerContainer.sidebarOpen #sidebarContainer { +html[dir="rtl"] #outerContainer.sidebarOpen #sidebarContainer { right: 0px; } @@ -621,11 +922,11 @@ html[dir='rtl'] #outerContainer.sidebarOpen #sidebarContainer { width: 100%; background-color: rgba(0, 0, 0, 0.1); } -html[dir='ltr'] #sidebarContent { +html[dir="ltr"] #sidebarContent { left: 0; box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25); } -html[dir='rtl'] #sidebarContent { +html[dir="rtl"] #sidebarContent { right: 0; box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25); } @@ -646,24 +947,22 @@ html[dir='rtl'] #sidebarContent { transition-timing-function: ease; transition-timing-function: var(--sidebar-transition-timing-function); } -html[dir='ltr'] #viewerContainer { - box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.05); -} -html[dir='rtl'] #viewerContainer { - box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.05); -} #outerContainer.sidebarResizing #viewerContainer { /* Improve responsiveness and avoid visual glitches when the sidebar is resized. */ transition-duration: 0s; } -html[dir='ltr'] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) { +html[dir="ltr"] + #outerContainer.sidebarOpen + #viewerContainer:not(.pdfPresentationMode) { transition-property: left; left: 200px; left: var(--sidebar-width); } -html[dir='rtl'] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) { +html[dir="rtl"] + #outerContainer.sidebarOpen + #viewerContainer:not(.pdfPresentationMode) { transition-property: right; right: 200px; right: var(--sidebar-width); @@ -684,21 +983,31 @@ html[dir='rtl'] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentatio #toolbarSidebar { width: 100%; height: 32px; - background-color: rgba(66, 66, 66, 1); /* fallback */ - background-image: url(images/texture.png), - linear-gradient(rgba(77, 77, 77, 0.99), rgba(64, 64, 64, 0.95)); + background-color: rgba(245, 246, 247, 1); + background-color: var(--sidebar-bg-color); +} + +@media (prefers-color-scheme: dark) { + + #toolbarSidebar { + background-color: rgba(50, 50, 52, 1); + background-color: var(--sidebar-bg-color); + } +} +html[dir="ltr"] #toolbarSidebar { + box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25), 0 1px 0 rgba(0, 0, 0, 0.15), + 0 0 1px rgba(0, 0, 0, 0.1); } -html[dir='ltr'] #toolbarSidebar { - box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25), - 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), 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 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="ltr"] #toolbarSidebar .toolbarButton { + margin-right: 2px !important; +} +html[dir="rtl"] #toolbarSidebar .toolbarButton { + margin-left: 2px !important; } #sidebarResizer { @@ -709,31 +1018,122 @@ html[dir='rtl'] #toolbarSidebar { z-index: 200; cursor: ew-resize; } -html[dir='ltr'] #sidebarResizer { +html[dir="ltr"] #sidebarResizer { right: -6px; } -html[dir='rtl'] #sidebarResizer { +html[dir="rtl"] #sidebarResizer { left: -6px; } -#toolbarContainer, .findbar, .secondaryToolbar { +#toolbarContainer { + position: relative; + height: 32px; + background-color: rgba(249, 249, 250, 1); + background-color: var(--toolbar-bg-color); +} + +@media (prefers-color-scheme: dark) { + + #toolbarContainer { + background-color: rgba(56, 56, 61, 1); + background-color: var(--toolbar-bg-color); + } +} + +.findbar { + position: relative; + height: 32px; + background-color: rgba(249, 249, 250, 1); + background-color: var(--toolbar-bg-color); +} + +@media (prefers-color-scheme: dark) { + + .findbar { + background-color: rgba(56, 56, 61, 1); + background-color: var(--toolbar-bg-color); + } +} + +.secondaryToolbar { position: relative; height: 32px; - background-color: rgba(71, 71, 71, 1); /* fallback */ - background-image: url(images/texture.png), - linear-gradient(rgba(82, 82, 82, 0.99), rgba(69, 69, 69, 0.95)); + background-color: rgba(249, 249, 250, 1); + background-color: var(--toolbar-bg-color); +} + +@media (prefers-color-scheme: dark) { + + .secondaryToolbar { + background-color: rgba(56, 56, 61, 1); + background-color: var(--toolbar-bg-color); + } +} +html[dir="ltr"] #toolbarContainer { + box-shadow: 0 1px 0 rgba(204, 204, 204, 1); + box-shadow: 0 1px 0 var(--toolbar-border-color); +} +@media (prefers-color-scheme: dark) { + + html[dir="ltr"] #toolbarContainer { + box-shadow: 0 1px 0 rgba(12, 12, 13, 1); + box-shadow: 0 1px 0 var(--toolbar-border-color); + } +} +.findbar { + box-shadow: 0 1px 0 rgba(204, 204, 204, 1); + box-shadow: 0 1px 0 var(--toolbar-border-color); +} +@media (prefers-color-scheme: dark) { + + .findbar { + box-shadow: 0 1px 0 rgba(12, 12, 13, 1); + box-shadow: 0 1px 0 var(--toolbar-border-color); + } +} +.secondaryToolbar { + box-shadow: 0 1px 0 rgba(204, 204, 204, 1); + box-shadow: 0 1px 0 var(--toolbar-border-color); +} +@media (prefers-color-scheme: dark) { + + .secondaryToolbar { + box-shadow: 0 1px 0 rgba(12, 12, 13, 1); + box-shadow: 0 1px 0 var(--toolbar-border-color); + } } -html[dir='ltr'] #toolbarContainer, .findbar, .secondaryToolbar { - 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 { + box-shadow: 0 1px 0 rgba(204, 204, 204, 1); + box-shadow: 0 1px 0 var(--toolbar-border-color); } -html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar { - 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); +@media (prefers-color-scheme: dark) { + + html[dir="rtl"] #toolbarContainer { + box-shadow: 0 1px 0 rgba(12, 12, 13, 1); + box-shadow: 0 1px 0 var(--toolbar-border-color); + } +} +.findbar { + box-shadow: 0 1px 0 rgba(204, 204, 204, 1); + box-shadow: 0 1px 0 var(--toolbar-border-color); +} +@media (prefers-color-scheme: dark) { + + .findbar { + box-shadow: 0 1px 0 rgba(12, 12, 13, 1); + box-shadow: 0 1px 0 var(--toolbar-border-color); + } +} +.secondaryToolbar { + box-shadow: 0 1px 0 rgba(204, 204, 204, 1); + box-shadow: 0 1px 0 var(--toolbar-border-color); +} +@media (prefers-color-scheme: dark) { + + .secondaryToolbar { + box-shadow: 0 1px 0 rgba(12, 12, 13, 1); + box-shadow: 0 1px 0 var(--toolbar-border-color); + } } #toolbarViewer { @@ -744,8 +1144,26 @@ html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar { position: relative; width: 100%; height: 4px; - background-color: rgba(51, 51, 51, 1); - border-bottom: 1px solid rgba(51, 51, 51, 1); + background-color: rgba(237, 237, 240, 1); + background-color: var(--body-bg-color); + border-bottom: 1px solid rgba(204, 204, 204, 1); + border-bottom: 1px solid var(--toolbar-border-color); +} + +@media (prefers-color-scheme: dark) { + + #loadingBar { + border-bottom: 1px solid rgba(12, 12, 13, 1); + border-bottom: 1px solid var(--toolbar-border-color); + } +} + +@media (prefers-color-scheme: dark) { + + #loadingBar { + background-color: rgba(42, 42, 46, 1); + background-color: var(--body-bg-color); + } } #loadingBar .progress { @@ -754,47 +1172,304 @@ html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar { left: 0; width: 0%; height: 100%; - background-color: rgba(221, 221, 221, 1); + background-color: rgba(10, 132, 255, 1); + background-color: var(--progressBar-color); overflow: hidden; transition: width 200ms; } +@media (prefers-color-scheme: dark) { + + #loadingBar .progress { + background-color: rgba(0, 96, 223, 1); + background-color: var(--progressBar-color); + } +} + @-webkit-keyframes progressIndeterminate { - 0% { left: -142px; } - 100% { left: 0; } + 0% { + left: -142px; + } + 100% { + left: 0; + } } @keyframes progressIndeterminate { - 0% { left: -142px; } - 100% { left: 0; } + 0% { + left: -142px; + } + 100% { + left: 0; + } } #loadingBar .progress.indeterminate { - background-color: rgba(153, 153, 153, 1); + background-color: rgba(221, 221, 222, 1); + background-color: var(--progressBar-indeterminate-bg-color); transition: none; } +@media (prefers-color-scheme: dark) { + + #loadingBar .progress.indeterminate { + background-color: rgba(40, 40, 43, 1); + background-color: var(--progressBar-indeterminate-bg-color); + } +} + #loadingBar .progress.indeterminate .glimmer { position: absolute; top: 0; left: 0; height: 100%; width: calc(100% + 150px); - background: repeating-linear-gradient(135deg, - rgba(187, 187, 187, 1) 0, rgba(153, 153, 153, 1) 5px, - rgba(153, 153, 153, 1) 45px, rgba(221, 221, 221, 1) 55px, - rgba(221, 221, 221, 1) 95px, rgba(187, 187, 187, 1) 100px); - -webkit-animation: progressIndeterminate 950ms linear infinite; - animation: progressIndeterminate 950ms linear infinite; -} - -.findbar, .secondaryToolbar { + background: repeating-linear-gradient( + 135deg, + rgba(116, 177, 239, 1) 0, + rgba(221, 221, 222, 1) 5px, + rgba(221, 221, 222, 1) 45px, + rgba(10, 132, 255, 1) 55px, + rgba(10, 132, 255, 1) 95px, + rgba(116, 177, 239, 1) 100px + ); + background: repeating-linear-gradient( + 135deg, + var(--progressBar-indeterminate-blend-color) 0, + var(--progressBar-indeterminate-bg-color) 5px, + var(--progressBar-indeterminate-bg-color) 45px, + var(--progressBar-color) 55px, + var(--progressBar-color) 95px, + var(--progressBar-indeterminate-blend-color) 100px + ); + -webkit-animation: progressIndeterminate 1s linear infinite; + animation: progressIndeterminate 1s linear infinite; +} + +@media (prefers-color-scheme: dark) { + + #loadingBar .progress.indeterminate .glimmer { + background: repeating-linear-gradient( + 135deg, + rgba(20, 68, 133, 1) 0, + rgba(40, 40, 43, 1) 5px, + rgba(40, 40, 43, 1) 45px, + rgba(0, 96, 223, 1) 55px, + rgba(0, 96, 223, 1) 95px, + rgba(20, 68, 133, 1) 100px + ); + background: repeating-linear-gradient( + 135deg, + var(--progressBar-indeterminate-blend-color) 0, + var(--progressBar-indeterminate-bg-color) 5px, + var(--progressBar-indeterminate-bg-color) 45px, + var(--progressBar-color) 55px, + var(--progressBar-color) 95px, + var(--progressBar-indeterminate-blend-color) 100px + ); + } +} + +@media (prefers-color-scheme: dark) { + + #loadingBar .progress.indeterminate .glimmer { + background: repeating-linear-gradient( + 135deg, + rgba(20, 68, 133, 1) 0, + rgba(40, 40, 43, 1) 5px, + rgba(40, 40, 43, 1) 45px, + rgba(0, 96, 223, 1) 55px, + rgba(0, 96, 223, 1) 95px, + rgba(20, 68, 133, 1) 100px + ); + background: repeating-linear-gradient( + 135deg, + var(--progressBar-indeterminate-blend-color) 0, + var(--progressBar-indeterminate-bg-color) 5px, + var(--progressBar-indeterminate-bg-color) 45px, + var(--progressBar-color) 55px, + var(--progressBar-color) 95px, + var(--progressBar-indeterminate-blend-color) 100px + ); + } +} + +@media (prefers-color-scheme: dark) { + + #loadingBar .progress.indeterminate .glimmer { + background: repeating-linear-gradient( + 135deg, + rgba(20, 68, 133, 1) 0, + rgba(40, 40, 43, 1) 5px, + rgba(40, 40, 43, 1) 45px, + rgba(0, 96, 223, 1) 55px, + rgba(0, 96, 223, 1) 95px, + rgba(20, 68, 133, 1) 100px + ); + background: repeating-linear-gradient( + 135deg, + var(--progressBar-indeterminate-blend-color) 0, + var(--progressBar-indeterminate-bg-color) 5px, + var(--progressBar-indeterminate-bg-color) 45px, + var(--progressBar-color) 55px, + var(--progressBar-color) 95px, + var(--progressBar-indeterminate-blend-color) 100px + ); + } +} + +@media (prefers-color-scheme: dark) { + + #loadingBar .progress.indeterminate .glimmer { + background: repeating-linear-gradient( + 135deg, + rgba(20, 68, 133, 1) 0, + rgba(40, 40, 43, 1) 5px, + rgba(40, 40, 43, 1) 45px, + rgba(0, 96, 223, 1) 55px, + rgba(0, 96, 223, 1) 95px, + rgba(20, 68, 133, 1) 100px + ); + background: repeating-linear-gradient( + 135deg, + var(--progressBar-indeterminate-blend-color) 0, + var(--progressBar-indeterminate-bg-color) 5px, + var(--progressBar-indeterminate-bg-color) 45px, + var(--progressBar-color) 55px, + var(--progressBar-color) 95px, + var(--progressBar-indeterminate-blend-color) 100px + ); + } +} + +@media (prefers-color-scheme: dark) { + + #loadingBar .progress.indeterminate .glimmer { + background: repeating-linear-gradient( + 135deg, + rgba(20, 68, 133, 1) 0, + rgba(40, 40, 43, 1) 5px, + rgba(40, 40, 43, 1) 45px, + rgba(0, 96, 223, 1) 55px, + rgba(0, 96, 223, 1) 95px, + rgba(20, 68, 133, 1) 100px + ); + background: repeating-linear-gradient( + 135deg, + var(--progressBar-indeterminate-blend-color) 0, + var(--progressBar-indeterminate-bg-color) 5px, + var(--progressBar-indeterminate-bg-color) 45px, + var(--progressBar-color) 55px, + var(--progressBar-color) 95px, + var(--progressBar-indeterminate-blend-color) 100px + ); + } +} + +@media (prefers-color-scheme: dark) { + + #loadingBar .progress.indeterminate .glimmer { + background: repeating-linear-gradient( + 135deg, + rgba(20, 68, 133, 1) 0, + rgba(40, 40, 43, 1) 5px, + rgba(40, 40, 43, 1) 45px, + rgba(0, 96, 223, 1) 55px, + rgba(0, 96, 223, 1) 95px, + rgba(20, 68, 133, 1) 100px + ); + background: repeating-linear-gradient( + 135deg, + var(--progressBar-indeterminate-blend-color) 0, + var(--progressBar-indeterminate-bg-color) 5px, + var(--progressBar-indeterminate-bg-color) 45px, + var(--progressBar-color) 55px, + var(--progressBar-color) 95px, + var(--progressBar-indeterminate-blend-color) 100px + ); + } +} + +@media (prefers-color-scheme: dark) { + + #loadingBar .progress.indeterminate .glimmer { + background: repeating-linear-gradient( + 135deg, + rgba(20, 68, 133, 1) 0, + rgba(40, 40, 43, 1) 5px, + rgba(40, 40, 43, 1) 45px, + rgba(0, 96, 223, 1) 55px, + rgba(0, 96, 223, 1) 95px, + rgba(20, 68, 133, 1) 100px + ); + background: repeating-linear-gradient( + 135deg, + var(--progressBar-indeterminate-blend-color) 0, + var(--progressBar-indeterminate-bg-color) 5px, + var(--progressBar-indeterminate-bg-color) 45px, + var(--progressBar-color) 55px, + var(--progressBar-color) 95px, + var(--progressBar-indeterminate-blend-color) 100px + ); + } +} + +@media (prefers-color-scheme: dark) { + + #loadingBar .progress.indeterminate .glimmer { + background: repeating-linear-gradient( + 135deg, + rgba(20, 68, 133, 1) 0, + rgba(40, 40, 43, 1) 5px, + rgba(40, 40, 43, 1) 45px, + rgba(0, 96, 223, 1) 55px, + rgba(0, 96, 223, 1) 95px, + rgba(20, 68, 133, 1) 100px + ); + background: repeating-linear-gradient( + 135deg, + var(--progressBar-indeterminate-blend-color) 0, + var(--progressBar-indeterminate-bg-color) 5px, + var(--progressBar-indeterminate-bg-color) 45px, + var(--progressBar-color) 55px, + var(--progressBar-color) 95px, + var(--progressBar-indeterminate-blend-color) 100px + ); + } +} + +@media (prefers-color-scheme: dark) { + + #loadingBar .progress.indeterminate .glimmer { + background: repeating-linear-gradient( + 135deg, + rgba(20, 68, 133, 1) 0, + rgba(40, 40, 43, 1) 5px, + rgba(40, 40, 43, 1) 45px, + rgba(0, 96, 223, 1) 55px, + rgba(0, 96, 223, 1) 95px, + rgba(20, 68, 133, 1) 100px + ); + background: repeating-linear-gradient( + 135deg, + var(--progressBar-indeterminate-blend-color) 0, + var(--progressBar-indeterminate-bg-color) 5px, + var(--progressBar-indeterminate-bg-color) 45px, + var(--progressBar-color) 55px, + var(--progressBar-color) 95px, + var(--progressBar-indeterminate-blend-color) 100px + ); + } +} + +.findbar, +.secondaryToolbar { top: 32px; position: absolute; z-index: 10000; height: auto; min-width: 16px; - padding: 0px 6px 0px 6px; + padding: 0px 4px 0px 4px; margin: 4px 2px 4px 2px; color: rgba(217, 217, 217, 1); font-size: 12px; @@ -805,6 +1480,16 @@ html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar { .findbar { min-width: 300px; + background-color: rgba(249, 249, 250, 1); + background-color: var(--toolbar-bg-color); +} + +@media (prefers-color-scheme: dark) { + + .findbar { + background-color: rgba(56, 56, 61, 1); + background-color: var(--toolbar-bg-color); + } } .findbar > div { height: 32px; @@ -815,11 +1500,114 @@ html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar { .findbar.wrapContainers > div#findbarMessageContainer { height: auto; } -html[dir='ltr'] .findbar { - left: 68px; +html[dir="ltr"] .findbar { + left: 64px; +} +html[dir="rtl"] .findbar { + right: 64px; +} + +html[dir="ltr"] .findbar .splitToolbarButton { + margin-left: 0px; + margin-top: 3px; +} + +html[dir="rtl"] .findbar .splitToolbarButton { + margin-right: 0px; + margin-top: 3px; +} + +.findbar .splitToolbarButton .findNext { + width: 29px; +} + +html[dir="ltr"] .findbar .splitToolbarButton .findNext { + border-right: 1px solid rgba(187, 187, 188, 1); + border-right: 1px solid var(--field-border-color); +} + +@media (prefers-color-scheme: dark) { + + html[dir="ltr"] .findbar .splitToolbarButton .findNext { + border-right: 1px solid rgba(115, 115, 115, 1); + border-right: 1px solid var(--field-border-color); + } +} + +html[dir="rtl"] .findbar .splitToolbarButton .findNext { + border-left: 1px solid rgba(187, 187, 188, 1); + border-left: 1px solid var(--field-border-color); +} + +@media (prefers-color-scheme: dark) { + + html[dir="rtl"] .findbar .splitToolbarButton .findNext { + border-left: 1px solid rgba(115, 115, 115, 1); + border-left: 1px solid var(--field-border-color); + } +} + +.findbar .splitToolbarButton .toolbarButton { + background-color: rgba(227, 228, 230, 1); + background-color: var(--findbar-nextprevious-btn-bg-color); + border-radius: 0px; + height: 26px; + border-top: 1px solid rgba(187, 187, 188, 1); + border-top: 1px solid var(--field-border-color); + border-bottom: 1px solid rgba(187, 187, 188, 1); + border-bottom: 1px solid var(--field-border-color); +} + +@media (prefers-color-scheme: dark) { + + .findbar .splitToolbarButton .toolbarButton { + border-bottom: 1px solid rgba(115, 115, 115, 1); + border-bottom: 1px solid var(--field-border-color); + } } -html[dir='rtl'] .findbar { - right: 68px; + +@media (prefers-color-scheme: dark) { + + .findbar .splitToolbarButton .toolbarButton { + border-top: 1px solid rgba(115, 115, 115, 1); + border-top: 1px solid var(--field-border-color); + } +} + +@media (prefers-color-scheme: dark) { + + .findbar .splitToolbarButton .toolbarButton { + background-color: rgba(89, 89, 89, 1); + background-color: var(--findbar-nextprevious-btn-bg-color); + } +} + +.findbar .splitToolbarButton .toolbarButton::before { + top: 5px; +} + +html[dir="ltr"] .findbar .splitToolbarButton > .findPrevious { + border-radius: 0; +} +html[dir="ltr"] .findbar .splitToolbarButton > .findNext { + border-bottom-left-radius: 0; + border-bottom-right-radius: 2px; + border-top-left-radius: 0; + border-top-right-radius: 2px; +} + +html[dir="rtl"] .findbar .splitToolbarButton > .findPrevious { + border-radius: 0; +} +html[dir="rtl"] .findbar .splitToolbarButton > .findNext { + border-bottom-left-radius: 2px; + border-bottom-right-radius: 0; + border-top-left-radius: 2px; + border-top-right-radius: 0; +} + +.findbar input[type="checkbox"] { + pointer-events: none; } .findbar label { @@ -829,6 +1617,55 @@ html[dir='rtl'] .findbar { user-select: none; } +.findbar label:hover { + background-color: rgba(221, 222, 223, 1); + background-color: var(--button-hover-color); +} + +@media (prefers-color-scheme: dark) { + + .findbar label:hover { + background-color: rgba(102, 102, 103, 1); + background-color: var(--button-hover-color); + } +} + +.findbar input:focus + label { + background-color: rgba(221, 222, 223, 1); + background-color: var(--button-hover-color); +} + +@media (prefers-color-scheme: dark) { + + .findbar input:focus + label { + background-color: rgba(102, 102, 103, 1); + background-color: var(--button-hover-color); + } +} + +html[dir="ltr"] #findInput { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +html[dir="rtl"] #findInput { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.findbar .toolbarField[type="checkbox"]:checked + .toolbarLabel { + background-color: rgba(0, 0, 0, 0.3) !important; + background-color: var(--toggled-btn-bg-color) !important; +} + +@media (prefers-color-scheme: dark) { + + .findbar .toolbarField[type="checkbox"]:checked + .toolbarLabel { + background-color: rgba(0, 0, 0, 0.3) !important; + background-color: var(--toggled-btn-bg-color) !important; + } +} + #findInput { width: 200px; } @@ -836,40 +1673,58 @@ html[dir='rtl'] .findbar { color: rgba(191, 191, 191, 1); } #findInput::-moz-placeholder { - font-style: italic; + font-style: normal; } #findInput:-ms-input-placeholder { - font-style: italic; + font-style: normal; } #findInput::-ms-input-placeholder { - font-style: italic; + font-style: normal; } #findInput::placeholder { - font-style: italic; + font-style: normal; } #findInput[data-status="pending"] { - background-image: url(images/loading-small.png); + background-image: url(images/loading.svg); + background-image: var(--loading-icon); background-repeat: no-repeat; - background-position: right; + background-position: 98%; +} +@media (prefers-color-scheme: dark) { + + #findInput[data-status="pending"] { + background-image: url(images/loading-dark.svg); + background-image: var(--loading-icon); + } } -html[dir='rtl'] #findInput[data-status="pending"] { - background-position: left; +html[dir="rtl"] #findInput[data-status="pending"] { + background-position: 3px; } .secondaryToolbar { - padding: 6px; + padding: 6px 0 10px 0; height: auto; z-index: 30000; + background-color: rgba(255, 255, 255, 1); + background-color: var(--doorhanger-bg-color); +} + +@media (prefers-color-scheme: dark) { + + .secondaryToolbar { + background-color: rgba(74, 74, 79, 1); + background-color: var(--doorhanger-bg-color); + } } -html[dir='ltr'] .secondaryToolbar { +html[dir="ltr"] .secondaryToolbar { right: 4px; } -html[dir='rtl'] .secondaryToolbar { +html[dir="rtl"] .secondaryToolbar { left: 4px; } #secondaryToolbarButtonContainer { - max-width: 200px; + max-width: 220px; max-height: 400px; overflow-y: auto; -webkit-overflow-scrolling: touch; @@ -881,14 +1736,45 @@ html[dir='rtl'] .secondaryToolbar { display: none !important; } -.doorHanger, +.doorHanger { + border-radius: 2px; + box-shadow: 0 1px 5px rgba(12, 12, 13, 0.2), + 0 0 0 1px rgba(12, 12, 13, 0.2); + box-shadow: 0 1px 5px var(--doorhanger-border-color), + 0 0 0 1px var(--doorhanger-border-color); +} + +@media (prefers-color-scheme: dark) { + + .doorHanger { + box-shadow: 0 1px 5px rgba(39, 39, 43, 1), + 0 0 0 1px rgba(39, 39, 43, 1); + box-shadow: 0 1px 5px var(--doorhanger-border-color), + 0 0 0 1px var(--doorhanger-border-color); + } +} + .doorHangerRight { - border: 1px solid rgba(0, 0, 0, 0.5); border-radius: 2px; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); + box-shadow: 0 1px 5px rgba(12, 12, 13, 0.2), + 0 0 0 1px rgba(12, 12, 13, 0.2); + box-shadow: 0 1px 5px var(--doorhanger-border-color), + 0 0 0 1px var(--doorhanger-border-color); } -.doorHanger:after, .doorHanger:before, -.doorHangerRight:after, .doorHangerRight:before { + +@media (prefers-color-scheme: dark) { + + .doorHangerRight { + box-shadow: 0 1px 5px rgba(39, 39, 43, 1), + 0 0 0 1px rgba(39, 39, 43, 1); + box-shadow: 0 1px 5px var(--doorhanger-border-color), + 0 0 0 1px var(--doorhanger-border-color); + } +} +.doorHanger:after, +.doorHanger:before, +.doorHangerRight:after, +.doorHangerRight:before { bottom: 100%; border: solid rgba(0, 0, 0, 0); content: " "; @@ -899,36 +1785,76 @@ html[dir='rtl'] .secondaryToolbar { } .doorHanger:after, .doorHangerRight:after { - border-bottom-color: rgba(82, 82, 82, 0.99); border-width: 8px; } -.doorHanger:before, +.doorHanger:after { + border-bottom-color: rgba(249, 249, 250, 1); + border-bottom-color: var(--toolbar-bg-color); +} +@media (prefers-color-scheme: dark) { + + .doorHanger:after { + border-bottom-color: rgba(56, 56, 61, 1); + border-bottom-color: var(--toolbar-bg-color); + } +} +.doorHangerRight:after { + border-bottom-color: rgba(255, 255, 255, 1); + border-bottom-color: var(--doorhanger-bg-color); +} +@media (prefers-color-scheme: dark) { + + .doorHangerRight:after { + border-bottom-color: rgba(74, 74, 79, 1); + border-bottom-color: var(--doorhanger-bg-color); + } +} +.doorHanger:before { + border-bottom-color: rgba(12, 12, 13, 0.2); + border-bottom-color: var(--doorhanger-border-color); + border-width: 9px; +} +@media (prefers-color-scheme: dark) { + + .doorHanger:before { + border-bottom-color: rgba(39, 39, 43, 1); + border-bottom-color: var(--doorhanger-border-color); + } +} .doorHangerRight:before { - border-bottom-color: rgba(0, 0, 0, 0.5); + border-bottom-color: rgba(12, 12, 13, 0.2); + border-bottom-color: var(--doorhanger-border-color); border-width: 9px; } +@media (prefers-color-scheme: dark) { + + .doorHangerRight:before { + border-bottom-color: rgba(39, 39, 43, 1); + border-bottom-color: var(--doorhanger-border-color); + } +} -html[dir='ltr'] .doorHanger:after, -html[dir='rtl'] .doorHangerRight:after { - left: 13px; +html[dir="ltr"] .doorHanger:after, +html[dir="rtl"] .doorHangerRight:after { + left: 10px; margin-left: -8px; } -html[dir='ltr'] .doorHanger:before, -html[dir='rtl'] .doorHangerRight:before { - left: 13px; +html[dir="ltr"] .doorHanger:before, +html[dir="rtl"] .doorHangerRight:before { + left: 10px; margin-left: -9px; } -html[dir='rtl'] .doorHanger:after, -html[dir='ltr'] .doorHangerRight:after { - right: 13px; +html[dir="rtl"] .doorHanger:after, +html[dir="ltr"] .doorHangerRight:after { + right: 10px; margin-right: -8px; } -html[dir='rtl'] .doorHanger:before, -html[dir='ltr'] .doorHangerRight:before { - right: 13px; +html[dir="rtl"] .doorHanger:before, +html[dir="ltr"] .doorHangerRight:before { + right: 10px; margin-right: -9px; } @@ -937,11 +1863,11 @@ html[dir='ltr'] .doorHangerRight:before { color: rgba(82, 82, 82, 1); text-align: center; padding: 3px 4px; + margin: 5px; } #findMsg { - font-style: italic; - color: rgba(166, 183, 208, 1); + color: rgba(251, 0, 0, 1); } #findMsg:empty { display: none; @@ -957,43 +1883,43 @@ html[dir='ltr'] .doorHangerRight:before { transform: translateX(-50%); } -html[dir='ltr'] #toolbarViewerLeft, -html[dir='rtl'] #toolbarViewerRight { +html[dir="ltr"] #toolbarViewerLeft, +html[dir="rtl"] #toolbarViewerRight { float: left; } -html[dir='ltr'] #toolbarViewerRight, -html[dir='rtl'] #toolbarViewerLeft { +html[dir="ltr"] #toolbarViewerRight, +html[dir="rtl"] #toolbarViewerLeft { float: right; } -html[dir='ltr'] #toolbarViewerLeft > *, -html[dir='ltr'] #toolbarViewerMiddle > *, -html[dir='ltr'] #toolbarViewerRight > *, -html[dir='ltr'] .findbar * { +html[dir="ltr"] #toolbarViewerLeft > *, +html[dir="ltr"] #toolbarViewerMiddle > *, +html[dir="ltr"] #toolbarViewerRight > *, +html[dir="ltr"] .findbar * { position: relative; float: left; } -html[dir='rtl'] #toolbarViewerLeft > *, -html[dir='rtl'] #toolbarViewerMiddle > *, -html[dir='rtl'] #toolbarViewerRight > *, -html[dir='rtl'] .findbar * { +html[dir="rtl"] #toolbarViewerLeft > *, +html[dir="rtl"] #toolbarViewerMiddle > *, +html[dir="rtl"] #toolbarViewerRight > *, +html[dir="rtl"] .findbar * { position: relative; float: right; } -html[dir='ltr'] .splitToolbarButton { - margin: 3px 2px 4px 0; +html[dir="ltr"] .splitToolbarButton { + margin: 2px 2px 0; display: inline-block; } -html[dir='rtl'] .splitToolbarButton { - margin: 3px 0 4px 2px; +html[dir="rtl"] .splitToolbarButton { + margin: 2px 2px 0; display: inline-block; } -html[dir='ltr'] .splitToolbarButton > .toolbarButton { - border-radius: 0; +html[dir="ltr"] .splitToolbarButton > .toolbarButton { + border-radius: 2px; float: left; } -html[dir='rtl'] .splitToolbarButton > .toolbarButton { - border-radius: 0; +html[dir="rtl"] .splitToolbarButton > .toolbarButton { + border-radius: 2px; float: right; } @@ -1002,8 +1928,45 @@ html[dir='rtl'] .splitToolbarButton > .toolbarButton { .overlayButton { border: 0 none; background: none; - width: 32px; - height: 25px; + width: 28px; + height: 28px; +} +.overlayButton { + background-color: rgba(12, 12, 13, 0.1); + background-color: var(--overlay-button-bg-color); +} +@media (prefers-color-scheme: dark) { + + .overlayButton { + background-color: rgba(92, 92, 97, 1); + background-color: var(--overlay-button-bg-color); + } +} + +.overlayButton:hover { + background-color: rgba(12, 12, 13, 0.3); + background-color: var(--overlay-button-hover-color); +} + +@media (prefers-color-scheme: dark) { + + .overlayButton:hover { + background-color: rgba(115, 115, 115, 1); + background-color: var(--overlay-button-hover-color); + } +} + +.overlayButton:focus { + background-color: rgba(12, 12, 13, 0.3); + background-color: var(--overlay-button-hover-color); +} + +@media (prefers-color-scheme: dark) { + + .overlayButton:focus { + background-color: rgba(115, 115, 115, 1); + background-color: var(--overlay-button-hover-color); + } } .toolbarButton > span { @@ -1016,94 +1979,219 @@ html[dir='rtl'] .splitToolbarButton > .toolbarButton { .toolbarButton[disabled], .secondaryToolbarButton[disabled], .overlayButton[disabled] { - opacity: .5; + opacity: 0.5; } .splitToolbarButton.toggled .toolbarButton { margin: 0; } -.splitToolbarButton:hover > .toolbarButton, -.splitToolbarButton:focus > .toolbarButton, -.splitToolbarButton.toggled > .toolbarButton, -.toolbarButton.textButton { - 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 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); -} -.splitToolbarButton > .toolbarButton:hover, -.splitToolbarButton > .toolbarButton:focus, -.dropdownToolbarButton:hover, -.overlayButton:hover, -.overlayButton:focus, -.toolbarButton.textButton:hover, -.toolbarButton.textButton:focus { - 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); +.splitToolbarButton > .toolbarButton:hover { + background-color: rgba(221, 222, 223, 1); + background-color: var(--button-hover-color); + z-index: 199; +} + +@media (prefers-color-scheme: dark) { + + .splitToolbarButton > .toolbarButton:hover { + background-color: rgba(102, 102, 103, 1); + background-color: var(--button-hover-color); + } +} + +.splitToolbarButton > .toolbarButton:focus { + background-color: rgba(221, 222, 223, 1); + background-color: var(--button-hover-color); z-index: 199; } + +@media (prefers-color-scheme: dark) { + + .splitToolbarButton > .toolbarButton:focus { + background-color: rgba(102, 102, 103, 1); + background-color: var(--button-hover-color); + } +} + .dropdownToolbarButton:hover { - background-color: rgba(0, 0, 0, 0.26); + background-color: rgba(221, 222, 223, 1); + background-color: var(--button-hover-color); + z-index: 199; +} + +@media (prefers-color-scheme: dark) { + + .dropdownToolbarButton:hover { + background-color: rgba(102, 102, 103, 1); + background-color: var(--button-hover-color); + } +} + +.toolbarButton.textButton:hover { + background-color: rgba(221, 222, 223, 1); + background-color: var(--button-hover-color); + z-index: 199; +} + +@media (prefers-color-scheme: dark) { + + .toolbarButton.textButton:hover { + background-color: rgba(102, 102, 103, 1); + background-color: var(--button-hover-color); + } +} + +.toolbarButton.textButton:focus { + background-color: rgba(221, 222, 223, 1); + background-color: var(--button-hover-color); + z-index: 199; +} + +@media (prefers-color-scheme: dark) { + + .toolbarButton.textButton:focus { + background-color: rgba(102, 102, 103, 1); + background-color: var(--button-hover-color); + } } .splitToolbarButton > .toolbarButton { position: relative; } -html[dir='ltr'] .splitToolbarButton > .toolbarButton:first-child, -html[dir='rtl'] .splitToolbarButton > .toolbarButton:last-child { +html[dir="ltr"] .splitToolbarButton > .toolbarButton:first-child, +html[dir="rtl"] .splitToolbarButton > .toolbarButton:last-child { position: relative; margin: 0; - margin-right: -1px; - border-top-left-radius: 2px; - border-bottom-left-radius: 2px; - border-right-color: rgba(0, 0, 0, 0); } -html[dir='ltr'] .splitToolbarButton > .toolbarButton:last-child, -html[dir='rtl'] .splitToolbarButton > .toolbarButton:first-child { +html[dir="ltr"] .splitToolbarButton > .toolbarButton:last-child, +html[dir="rtl"] .splitToolbarButton > .toolbarButton:first-child { position: relative; margin: 0; - margin-left: -1px; - border-top-right-radius: 2px; - border-bottom-right-radius: 2px; - border-left-color: rgba(0, 0, 0, 0); } .splitToolbarButtonSeparator { - padding: 8px 0; + padding: 10px 0; width: 1px; - background-color: rgba(0, 0, 0, 0.5); + background-color: rgba(0, 0, 0, 0.3); + background-color: var(--separator-color); z-index: 99; - box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); display: inline-block; - margin: 5px 0; + margin: 4px 0; +} +@media (prefers-color-scheme: dark) { + + .splitToolbarButtonSeparator { + background-color: rgba(0, 0, 0, 0.3); + background-color: var(--separator-color); + } +} + +.findbar .splitToolbarButtonSeparator { + background-color: rgba(187, 187, 188, 1); + background-color: var(--field-border-color); + margin: 0; + padding: 13px 0; +} + +@media (prefers-color-scheme: dark) { + + .findbar .splitToolbarButtonSeparator { + background-color: rgba(115, 115, 115, 1); + background-color: var(--field-border-color); + } } -html[dir='ltr'] .splitToolbarButtonSeparator { + +html[dir="ltr"] .splitToolbarButtonSeparator { float: left; } -html[dir='rtl'] .splitToolbarButtonSeparator { +html[dir="rtl"] .splitToolbarButtonSeparator { float: right; } -.splitToolbarButton:hover > .splitToolbarButtonSeparator, -.splitToolbarButton.toggled > .splitToolbarButtonSeparator { - padding: 12px 0; - margin: 1px 0; - box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03); + +.toolbarButton { + min-width: 16px; + padding: 2px 6px 0; + border: none; + border-radius: 2px; + color: rgba(12, 12, 13, 1); + color: var(--main-color); + font-size: 12px; + line-height: 14px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + /* Opera does not support user-select, use <... unselectable="on"> instead */ + cursor: default; + box-sizing: border-box; +} + +@media (prefers-color-scheme: dark) { + + .toolbarButton { + color: rgba(249, 249, 250, 1); + color: var(--main-color); + } +} + +.dropdownToolbarButton { + min-width: 16px; + padding: 2px 6px 0; + border: none; + border-radius: 2px; + color: rgba(12, 12, 13, 1); + color: var(--main-color); + font-size: 12px; + line-height: 14px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + /* Opera does not support user-select, use <... unselectable="on"> instead */ + cursor: default; + box-sizing: border-box; +} + +@media (prefers-color-scheme: dark) { + + .dropdownToolbarButton { + color: rgba(249, 249, 250, 1); + color: var(--main-color); + } +} + +.secondaryToolbarButton { + min-width: 16px; + padding: 2px 6px 0; + border: none; + border-radius: 2px; + color: rgba(12, 12, 13, 1); + color: var(--main-color); + font-size: 12px; + line-height: 14px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + /* Opera does not support user-select, use <... unselectable="on"> instead */ + cursor: default; + box-sizing: border-box; +} + +@media (prefers-color-scheme: dark) { + + .secondaryToolbarButton { + color: rgba(249, 249, 250, 1); + color: var(--main-color); + } } -.toolbarButton, -.dropdownToolbarButton, -.secondaryToolbarButton, .overlayButton { min-width: 16px; padding: 2px 6px 0; - border: 1px solid rgba(0, 0, 0, 0); + border: none; border-radius: 2px; - color: rgba(255, 255, 255, 0.8); + color: rgba(12, 12, 13, 1); + color: var(--main-color); font-size: 12px; line-height: 14px; -webkit-user-select: none; @@ -1112,100 +2200,236 @@ html[dir='rtl'] .splitToolbarButtonSeparator { user-select: none; /* Opera does not support user-select, use <... unselectable="on"> instead */ cursor: default; + box-sizing: border-box; } -html[dir='ltr'] .toolbarButton, -html[dir='ltr'] .overlayButton, -html[dir='ltr'] .dropdownToolbarButton { - margin: 3px 2px 4px 0; +@media (prefers-color-scheme: dark) { + + .overlayButton { + color: rgba(249, 249, 250, 1); + color: var(--main-color); + } +} + +html[dir="ltr"] .toolbarButton, +html[dir="ltr"] .overlayButton, +html[dir="ltr"] .dropdownToolbarButton { + margin: 2px 1px; } -html[dir='rtl'] .toolbarButton, -html[dir='rtl'] .overlayButton, -html[dir='rtl'] .dropdownToolbarButton { - margin: 3px 0 4px 2px; +html[dir="rtl"] .toolbarButton, +html[dir="rtl"] .overlayButton, +html[dir="rtl"] .dropdownToolbarButton { + margin: 2px 1px; } -.toolbarButton:hover, -.toolbarButton:focus, -.dropdownToolbarButton, -.overlayButton, -.secondaryToolbarButton:hover, +html[dir="ltr"] #toolbarViewerLeft > .toolbarButton:first-child, +html[dir="rtl"] #toolbarViewerRight > .toolbarButton:last-child { + margin-left: 2px; +} + +html[dir="ltr"] #toolbarViewerRight > .toolbarButton:last-child, +html[dir="rtl"] #toolbarViewerLeft > .toolbarButton:first-child { + margin-right: 2px; +} +.toolbarButton:hover { + background-color: rgba(221, 222, 223, 1); + background-color: var(--button-hover-color); +} +@media (prefers-color-scheme: dark) { + + .toolbarButton:hover { + background-color: rgba(102, 102, 103, 1); + background-color: var(--button-hover-color); + } +} +.toolbarButton:focus { + background-color: rgba(221, 222, 223, 1); + background-color: var(--button-hover-color); +} +@media (prefers-color-scheme: dark) { + + .toolbarButton:focus { + background-color: rgba(102, 102, 103, 1); + background-color: var(--button-hover-color); + } +} +.secondaryToolbarButton:hover { + background-color: rgba(237, 237, 237, 1); + background-color: var(--doorhanger-hover-color); +} +@media (prefers-color-scheme: dark) { + + .secondaryToolbarButton:hover { + background-color: rgba(93, 94, 98, 1); + background-color: var(--doorhanger-hover-color); + } +} .secondaryToolbarButton:focus { - 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 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); + background-color: rgba(237, 237, 237, 1); + background-color: var(--doorhanger-hover-color); } +@media (prefers-color-scheme: dark) { -.toolbarButton:hover:active, -.overlayButton:hover:active, -.dropdownToolbarButton:hover:active, -.secondaryToolbarButton:hover:active { - 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); + .secondaryToolbarButton:focus { + background-color: rgba(93, 94, 98, 1); + background-color: var(--doorhanger-hover-color); + } +} + +.toolbarButton.toggled { + background-color: rgba(0, 0, 0, 0.3); + background-color: var(--toggled-btn-bg-color); +} + +@media (prefers-color-scheme: dark) { + + .toolbarButton.toggled { + background-color: rgba(0, 0, 0, 0.3); + background-color: var(--toggled-btn-bg-color); + } +} + +.splitToolbarButton.toggled > .toolbarButton.toggled { + background-color: rgba(0, 0, 0, 0.3); + background-color: var(--toggled-btn-bg-color); +} + +@media (prefers-color-scheme: dark) { + + .splitToolbarButton.toggled > .toolbarButton.toggled { + background-color: rgba(0, 0, 0, 0.3); + background-color: var(--toggled-btn-bg-color); + } } -.toolbarButton.toggled, -.splitToolbarButton.toggled > .toolbarButton.toggled, .secondaryToolbarButton.toggled { 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); + background-color: var(--toggled-btn-bg-color); +} + +@media (prefers-color-scheme: dark) { + + .secondaryToolbarButton.toggled { + background-color: rgba(0, 0, 0, 0.3); + background-color: var(--toggled-btn-bg-color); + } } .toolbarButton.toggled:hover:active, .splitToolbarButton.toggled > .toolbarButton.toggled:hover:active, .secondaryToolbarButton.toggled:hover:active { 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 { width: 140px; padding: 0; overflow: hidden; + background-color: rgba(215, 215, 219, 1); + background-color: var(--dropdown-btn-bg-color); + margin-top: 2px !important; +} + +@media (prefers-color-scheme: dark) { + + .dropdownToolbarButton { + background-color: rgba(74, 74, 79, 1); + background-color: var(--dropdown-btn-bg-color); + } } .dropdownToolbarButton::after { position: absolute; display: inline-block; - top: 4px; - content: url(images/toolbarButton-menuArrows.png); + top: 6px; + content: url(images/toolbarButton-menuArrow.svg); + content: var(--toolbarButton-menuArrow-icon); + pointer-events: none; + max-width: 16px; +} +@media (prefers-color-scheme: dark) { + + .dropdownToolbarButton::after { + content: url(images/toolbarButton-menuArrow-dark.svg); + content: var(--toolbarButton-menuArrow-icon); + } } -html[dir='ltr'] .dropdownToolbarButton::after { - right: 8px; +html[dir="ltr"] .dropdownToolbarButton::after { + right: 7px; } -html[dir='rtl'] .dropdownToolbarButton::after { - left: 8px; +html[dir="rtl"] .dropdownToolbarButton::after { + left: 7px; } .dropdownToolbarButton > select { - -webkit-appearance: none; width: 162px; - height: 23px; + height: 28px; font-size: 12px; - color: rgba(242, 242, 242, 1); + color: rgba(12, 12, 13, 1); + color: var(--main-color); margin: 0; - padding: 3px 2px 2px; + padding: 1px 0 2px; border: none; - background: rgba(0,0,0,0); /* Opera does not support 'transparent' <select> background */ + background-color: rgba(215, 215, 219, 1); + background-color: var(--dropdown-btn-bg-color); +} + +@media (prefers-color-scheme: dark) { + + .dropdownToolbarButton > select { + background-color: rgba(74, 74, 79, 1); + background-color: var(--dropdown-btn-bg-color); + } +} + +@media (prefers-color-scheme: dark) { + + .dropdownToolbarButton > select { + color: rgba(249, 249, 250, 1); + color: var(--main-color); + } +} +html[dir="ltr"] .dropdownToolbarButton > select { + padding-left: 4px; +} +html[dir="rtl"] .dropdownToolbarButton > select { + padding-right: 4px; +} +.dropdownToolbarButton > select:hover { + background-color: rgba(221, 222, 223, 1); + background-color: var(--button-hover-color); +} +@media (prefers-color-scheme: dark) { + + .dropdownToolbarButton > select:hover { + background-color: rgba(102, 102, 103, 1); + background-color: var(--button-hover-color); + } +} + +.dropdownToolbarButton > select:focus { + background-color: rgba(221, 222, 223, 1); + background-color: var(--button-hover-color); +} + +@media (prefers-color-scheme: dark) { + + .dropdownToolbarButton > select:focus { + background-color: rgba(102, 102, 103, 1); + background-color: var(--button-hover-color); + } } .dropdownToolbarButton > select > option { - background: rgba(61, 61, 61, 1); + background: rgba(255, 255, 255, 1); + background: var(--doorhanger-bg-color); +} + +@media (prefers-color-scheme: dark) { + + .dropdownToolbarButton > select > option { + background: rgba(74, 74, 79, 1); + background: var(--doorhanger-bg-color); + } } #customScaleOption { @@ -1216,164 +2440,383 @@ html[dir='rtl'] .dropdownToolbarButton::after { border-bottom: 1px rgba(255, 255, 255, 0.5) solid; } -html[dir='ltr'] .splitToolbarButton:first-child, -html[dir='ltr'] .toolbarButton:first-child, -html[dir='rtl'] .splitToolbarButton:last-child, -html[dir='rtl'] .toolbarButton:last-child { - margin-left: 4px; -} -html[dir='ltr'] .splitToolbarButton:last-child, -html[dir='ltr'] .toolbarButton:last-child, -html[dir='rtl'] .splitToolbarButton:first-child, -html[dir='rtl'] .toolbarButton:first-child { - margin-right: 4px; -} - .toolbarButtonSpacer { width: 30px; display: inline-block; height: 1px; } -html[dir='ltr'] #findPrevious { - margin-left: 3px; +html[dir="ltr"] #findPrevious { + margin-left: 0; } -html[dir='ltr'] #findNext { +html[dir="ltr"] #findNext { margin-right: 3px; } -html[dir='rtl'] #findPrevious { - margin-right: 3px; +html[dir="rtl"] #findPrevious { + margin-right: 0; } -html[dir='rtl'] #findNext { +html[dir="rtl"] #findNext { margin-left: 3px; } +.toolbarButton::before { + opacity: 0.7; + opacity: var(--toolbar-icon-opacity); + top: 6px; +} + +.secondaryToolbarButton::before { + opacity: 0.9; + opacity: var(--doorhanger-icon-opacity); + top: 5px; +} + .toolbarButton::before, .secondaryToolbarButton::before { /* All matching images have a size of 16x16 - * All relevant containers have a size of 32x25 */ + * All relevant containers have a size of 28x28 */ position: absolute; display: inline-block; - top: 4px; - left: 7px; + left: 6px; + max-width: 16px; } html[dir="ltr"] .secondaryToolbarButton::before { - left: 4px; + left: 12px; } html[dir="rtl"] .secondaryToolbarButton::before { - right: 4px; + right: 12px; } .toolbarButton#sidebarToggle::before { - content: url(images/toolbarButton-sidebarToggle.png); + content: url(images/toolbarButton-sidebarToggle.svg); + content: var(--toolbarButton-sidebarToggle-icon); } -html[dir='rtl'] .toolbarButton#sidebarToggle::before { + +@media (prefers-color-scheme: dark) { + + .toolbarButton#sidebarToggle::before { + content: url(images/toolbarButton-sidebarToggle-dark.svg); + content: var(--toolbarButton-sidebarToggle-icon); + } +} +html[dir="rtl"] .toolbarButton#sidebarToggle::before { transform: scaleX(-1); } .toolbarButton#secondaryToolbarToggle::before { - content: url(images/toolbarButton-secondaryToolbarToggle.png); + content: url(images/toolbarButton-secondaryToolbarToggle.svg); + content: var(--toolbarButton-secondaryToolbarToggle-icon); } -html[dir='rtl'] .toolbarButton#secondaryToolbarToggle::before { + +@media (prefers-color-scheme: dark) { + + .toolbarButton#secondaryToolbarToggle::before { + content: url(images/toolbarButton-secondaryToolbarToggle-dark.svg); + content: var(--toolbarButton-secondaryToolbarToggle-icon); + } +} +html[dir="rtl"] .toolbarButton#secondaryToolbarToggle::before { transform: scaleX(-1); } .toolbarButton.findPrevious::before { - content: url(images/findbarButton-previous.png); + content: url(images/findbarButton-previous.svg); + content: var(--findbarButton-previous-icon); } -html[dir='rtl'] .toolbarButton.findPrevious::before { + +@media (prefers-color-scheme: dark) { + + .toolbarButton.findPrevious::before { + content: url(images/findbarButton-previous-dark.svg); + content: var(--findbarButton-previous-icon); + } +} +html[dir="rtl"] .toolbarButton.findPrevious::before { transform: scaleX(-1); } .toolbarButton.findNext::before { - content: url(images/findbarButton-next.png); + content: url(images/findbarButton-next.svg); + content: var(--findbarButton-next-icon); +} + +@media (prefers-color-scheme: dark) { + + .toolbarButton.findNext::before { + content: url(images/findbarButton-next-dark.svg); + content: var(--findbarButton-next-icon); + } } -html[dir='rtl'] .toolbarButton.findNext::before { +html[dir="rtl"] .toolbarButton.findNext::before { transform: scaleX(-1); } .toolbarButton.pageUp::before { - content: url(images/toolbarButton-pageUp.png); + content: url(images/toolbarButton-pageUp.svg); + content: var(--toolbarButton-pageUp-icon); +} + +@media (prefers-color-scheme: dark) { + + .toolbarButton.pageUp::before { + content: url(images/toolbarButton-pageUp-dark.svg); + content: var(--toolbarButton-pageUp-icon); + } } -html[dir='rtl'] .toolbarButton.pageUp::before { +html[dir="rtl"] .toolbarButton.pageUp::before { transform: scaleX(-1); } .toolbarButton.pageDown::before { - content: url(images/toolbarButton-pageDown.png); + content: url(images/toolbarButton-pageDown.svg); + content: var(--toolbarButton-pageDown-icon); +} + +@media (prefers-color-scheme: dark) { + + .toolbarButton.pageDown::before { + content: url(images/toolbarButton-pageDown-dark.svg); + content: var(--toolbarButton-pageDown-icon); + } } -html[dir='rtl'] .toolbarButton.pageDown::before { +html[dir="rtl"] .toolbarButton.pageDown::before { transform: scaleX(-1); } .toolbarButton.zoomOut::before { - content: url(images/toolbarButton-zoomOut.png); + content: url(images/toolbarButton-zoomOut.svg); + content: var(--toolbarButton-zoomOut-icon); +} + +@media (prefers-color-scheme: dark) { + + .toolbarButton.zoomOut::before { + content: url(images/toolbarButton-zoomOut-dark.svg); + content: var(--toolbarButton-zoomOut-icon); + } } .toolbarButton.zoomIn::before { - content: url(images/toolbarButton-zoomIn.png); + content: url(images/toolbarButton-zoomIn.svg); + content: var(--toolbarButton-zoomIn-icon); +} + +@media (prefers-color-scheme: dark) { + + .toolbarButton.zoomIn::before { + content: url(images/toolbarButton-zoomIn-dark.svg); + content: var(--toolbarButton-zoomIn-icon); + } +} + +.toolbarButton.presentationMode::before { + content: url(images/toolbarButton-presentationMode.svg); + content: var(--toolbarButton-presentationMode-icon); +} + +@media (prefers-color-scheme: dark) { + + .toolbarButton.presentationMode::before { + content: url(images/toolbarButton-presentationMode-dark.svg); + content: var(--toolbarButton-presentationMode-icon); + } } -.toolbarButton.presentationMode::before, .secondaryToolbarButton.presentationMode::before { - content: url(images/toolbarButton-presentationMode.png); + content: url(images/toolbarButton-presentationMode.svg); + content: var(--toolbarButton-presentationMode-icon); +} + +@media (prefers-color-scheme: dark) { + + .secondaryToolbarButton.presentationMode::before { + content: url(images/toolbarButton-presentationMode-dark.svg); + content: var(--toolbarButton-presentationMode-icon); + } +} + +.toolbarButton.print::before { + content: url(images/toolbarButton-print.svg); + content: var(--toolbarButton-print-icon); +} + +@media (prefers-color-scheme: dark) { + + .toolbarButton.print::before { + content: url(images/toolbarButton-print-dark.svg); + content: var(--toolbarButton-print-icon); + } } -.toolbarButton.print::before, .secondaryToolbarButton.print::before { - content: url(images/toolbarButton-print.png); + content: url(images/toolbarButton-print.svg); + content: var(--toolbarButton-print-icon); +} + +@media (prefers-color-scheme: dark) { + + .secondaryToolbarButton.print::before { + content: url(images/toolbarButton-print-dark.svg); + content: var(--toolbarButton-print-icon); + } +} + +.toolbarButton.openFile::before { + content: url(images/toolbarButton-openFile.svg); + content: var(--toolbarButton-openFile-icon); +} + +@media (prefers-color-scheme: dark) { + + .toolbarButton.openFile::before { + content: url(images/toolbarButton-openFile-dark.svg); + content: var(--toolbarButton-openFile-icon); + } } -.toolbarButton.openFile::before, .secondaryToolbarButton.openFile::before { - content: url(images/toolbarButton-openFile.png); + content: url(images/toolbarButton-openFile.svg); + content: var(--toolbarButton-openFile-icon); +} + +@media (prefers-color-scheme: dark) { + + .secondaryToolbarButton.openFile::before { + content: url(images/toolbarButton-openFile-dark.svg); + content: var(--toolbarButton-openFile-icon); + } +} + +.toolbarButton.download::before { + content: url(images/toolbarButton-download.svg); + content: var(--toolbarButton-download-icon); +} + +@media (prefers-color-scheme: dark) { + + .toolbarButton.download::before { + content: url(images/toolbarButton-download-dark.svg); + content: var(--toolbarButton-download-icon); + } } -.toolbarButton.download::before, .secondaryToolbarButton.download::before { - content: url(images/toolbarButton-download.png); + content: url(images/toolbarButton-download.svg); + content: var(--toolbarButton-download-icon); } -.toolbarButton.bookmark, -.secondaryToolbarButton.bookmark { - box-sizing: border-box; - outline: none; - padding-top: 4px; - text-decoration: none; +@media (prefers-color-scheme: dark) { + + .secondaryToolbarButton.download::before { + content: url(images/toolbarButton-download-dark.svg); + content: var(--toolbarButton-download-icon); + } } + .secondaryToolbarButton.bookmark { - padding-top: 5px; + padding-top: 6px; + text-decoration: none; } -.bookmark[href='#'] { - opacity: .5; +.bookmark[href="#"] { + opacity: 0.5; pointer-events: none; } -.toolbarButton.bookmark::before, +.toolbarButton.bookmark::before { + content: url(images/toolbarButton-bookmark.svg); + content: var(--toolbarButton-bookmark-icon); +} + +@media (prefers-color-scheme: dark) { + + .toolbarButton.bookmark::before { + content: url(images/toolbarButton-bookmark-dark.svg); + content: var(--toolbarButton-bookmark-icon); + } +} + .secondaryToolbarButton.bookmark::before { - content: url(images/toolbarButton-bookmark.png); + content: url(images/toolbarButton-bookmark.svg); + content: var(--toolbarButton-bookmark-icon); +} + +@media (prefers-color-scheme: dark) { + + .secondaryToolbarButton.bookmark::before { + content: url(images/toolbarButton-bookmark-dark.svg); + content: var(--toolbarButton-bookmark-icon); + } } #viewThumbnail.toolbarButton::before { - content: url(images/toolbarButton-viewThumbnail.png); + content: url(images/toolbarButton-viewThumbnail.svg); + content: var(--toolbarButton-viewThumbnail-icon); +} + +@media (prefers-color-scheme: dark) { + + #viewThumbnail.toolbarButton::before { + content: url(images/toolbarButton-viewThumbnail-dark.svg); + content: var(--toolbarButton-viewThumbnail-icon); + } } #viewOutline.toolbarButton::before { - content: url(images/toolbarButton-viewOutline.png); + content: url(images/toolbarButton-viewOutline.svg); + content: var(--toolbarButton-viewOutline-icon); +} + +@media (prefers-color-scheme: dark) { + + #viewOutline.toolbarButton::before { + content: url(images/toolbarButton-viewOutline-dark.svg); + content: var(--toolbarButton-viewOutline-icon); + } } html[dir="rtl"] #viewOutline.toolbarButton::before { transform: scaleX(-1); } #viewAttachments.toolbarButton::before { - content: url(images/toolbarButton-viewAttachments.png); + content: url(images/toolbarButton-viewAttachments.svg); + content: var(--toolbarButton-viewAttachments-icon); +} + +@media (prefers-color-scheme: dark) { + + #viewAttachments.toolbarButton::before { + content: url(images/toolbarButton-viewAttachments-dark.svg); + content: var(--toolbarButton-viewAttachments-icon); + } +} + +#viewLayers.toolbarButton::before { + content: url(images/toolbarButton-viewLayers.svg); + content: var(--toolbarButton-viewLayers-icon); +} + +@media (prefers-color-scheme: dark) { + + #viewLayers.toolbarButton::before { + content: url(images/toolbarButton-viewLayers-dark.svg); + content: var(--toolbarButton-viewLayers-icon); + } } #viewFind.toolbarButton::before { - content: url(images/toolbarButton-search.png); + content: url(images/toolbarButton-search.svg); + content: var(--toolbarButton-search-icon); +} + +@media (prefers-color-scheme: dark) { + + #viewFind.toolbarButton::before { + content: url(images/toolbarButton-search-dark.svg); + content: var(--toolbarButton-search-icon); + } } .toolbarButton.pdfSidebarNotification::after { @@ -1381,43 +2824,39 @@ html[dir="rtl"] #viewOutline.toolbarButton::before { display: inline-block; top: 1px; /* Create a filled circle, with a diameter of 9 pixels, using only CSS: */ - content: ''; + content: ""; background-color: rgba(112, 219, 85, 1); height: 9px; width: 9px; border-radius: 50%; } -html[dir='ltr'] .toolbarButton.pdfSidebarNotification::after { +html[dir="ltr"] .toolbarButton.pdfSidebarNotification::after { left: 17px; } -html[dir='rtl'] .toolbarButton.pdfSidebarNotification::after { +html[dir="rtl"] .toolbarButton.pdfSidebarNotification::after { right: 17px; } .secondaryToolbarButton { position: relative; - margin: 0 0 4px 0; - padding: 3px 0 1px 0; + margin: 0; + padding: 0 0 1px 0; height: auto; - min-height: 25px; + min-height: 26px; width: auto; min-width: 100%; white-space: normal; + border-radius: 0; + box-sizing: border-box; } html[dir="ltr"] .secondaryToolbarButton { - padding-left: 24px; + padding-left: 36px; text-align: left; } html[dir="rtl"] .secondaryToolbarButton { - padding-right: 24px; + padding-right: 36px; text-align: right; } -html[dir="ltr"] .secondaryToolbarButton.bookmark { - padding-left: 27px; -} -html[dir="rtl"] .secondaryToolbarButton.bookmark { - padding-right: 27px; -} html[dir="ltr"] .secondaryToolbarButton > span { padding-right: 4px; @@ -1427,106 +2866,272 @@ html[dir="rtl"] .secondaryToolbarButton > span { } .secondaryToolbarButton.firstPage::before { - content: url(images/secondaryToolbarButton-firstPage.png); + content: url(images/secondaryToolbarButton-firstPage.svg); + content: var(--secondaryToolbarButton-firstPage-icon); +} + +@media (prefers-color-scheme: dark) { + + .secondaryToolbarButton.firstPage::before { + content: url(images/secondaryToolbarButton-firstPage-dark.svg); + content: var(--secondaryToolbarButton-firstPage-icon); + } } .secondaryToolbarButton.lastPage::before { - content: url(images/secondaryToolbarButton-lastPage.png); + content: url(images/secondaryToolbarButton-lastPage.svg); + content: var(--secondaryToolbarButton-lastPage-icon); +} + +@media (prefers-color-scheme: dark) { + + .secondaryToolbarButton.lastPage::before { + content: url(images/secondaryToolbarButton-lastPage-dark.svg); + content: var(--secondaryToolbarButton-lastPage-icon); + } } .secondaryToolbarButton.rotateCcw::before { - content: url(images/secondaryToolbarButton-rotateCcw.png); + content: url(images/secondaryToolbarButton-rotateCcw.svg); + content: var(--secondaryToolbarButton-rotateCcw-icon); +} + +@media (prefers-color-scheme: dark) { + + .secondaryToolbarButton.rotateCcw::before { + content: url(images/secondaryToolbarButton-rotateCcw-dark.svg); + content: var(--secondaryToolbarButton-rotateCcw-icon); + } } .secondaryToolbarButton.rotateCw::before { - content: url(images/secondaryToolbarButton-rotateCw.png); + content: url(images/secondaryToolbarButton-rotateCw.svg); + content: var(--secondaryToolbarButton-rotateCw-icon); +} + +@media (prefers-color-scheme: dark) { + + .secondaryToolbarButton.rotateCw::before { + content: url(images/secondaryToolbarButton-rotateCw-dark.svg); + content: var(--secondaryToolbarButton-rotateCw-icon); + } } .secondaryToolbarButton.selectTool::before { - content: url(images/secondaryToolbarButton-selectTool.png); + content: url(images/secondaryToolbarButton-selectTool.svg); + content: var(--secondaryToolbarButton-selectTool-icon); +} + +@media (prefers-color-scheme: dark) { + + .secondaryToolbarButton.selectTool::before { + content: url(images/secondaryToolbarButton-selectTool-dark.svg); + content: var(--secondaryToolbarButton-selectTool-icon); + } } .secondaryToolbarButton.handTool::before { - content: url(images/secondaryToolbarButton-handTool.png); + content: url(images/secondaryToolbarButton-handTool.svg); + content: var(--secondaryToolbarButton-handTool-icon); +} + +@media (prefers-color-scheme: dark) { + + .secondaryToolbarButton.handTool::before { + content: url(images/secondaryToolbarButton-handTool-dark.svg); + content: var(--secondaryToolbarButton-handTool-icon); + } } .secondaryToolbarButton.scrollVertical::before { - content: url(images/secondaryToolbarButton-scrollVertical.png); + content: url(images/secondaryToolbarButton-scrollVertical.svg); + content: var(--secondaryToolbarButton-scrollVertical-icon); +} + +@media (prefers-color-scheme: dark) { + + .secondaryToolbarButton.scrollVertical::before { + content: url(images/secondaryToolbarButton-scrollVertical-dark.svg); + content: var(--secondaryToolbarButton-scrollVertical-icon); + } } .secondaryToolbarButton.scrollHorizontal::before { - content: url(images/secondaryToolbarButton-scrollHorizontal.png); + content: url(images/secondaryToolbarButton-scrollHorizontal.svg); + content: var(--secondaryToolbarButton-scrollHorizontal-icon); +} + +@media (prefers-color-scheme: dark) { + + .secondaryToolbarButton.scrollHorizontal::before { + content: url(images/secondaryToolbarButton-scrollHorizontal-dark.svg); + content: var(--secondaryToolbarButton-scrollHorizontal-icon); + } } .secondaryToolbarButton.scrollWrapped::before { - content: url(images/secondaryToolbarButton-scrollWrapped.png); + content: url(images/secondaryToolbarButton-scrollWrapped.svg); + content: var(--secondaryToolbarButton-scrollWrapped-icon); +} + +@media (prefers-color-scheme: dark) { + + .secondaryToolbarButton.scrollWrapped::before { + content: url(images/secondaryToolbarButton-scrollWrapped-dark.svg); + content: var(--secondaryToolbarButton-scrollWrapped-icon); + } } .secondaryToolbarButton.spreadNone::before { - content: url(images/secondaryToolbarButton-spreadNone.png); + content: url(images/secondaryToolbarButton-spreadNone.svg); + content: var(--secondaryToolbarButton-spreadNone-icon); +} + +@media (prefers-color-scheme: dark) { + + .secondaryToolbarButton.spreadNone::before { + content: url(images/secondaryToolbarButton-spreadNone-dark.svg); + content: var(--secondaryToolbarButton-spreadNone-icon); + } } .secondaryToolbarButton.spreadOdd::before { - content: url(images/secondaryToolbarButton-spreadOdd.png); + content: url(images/secondaryToolbarButton-spreadOdd.svg); + content: var(--secondaryToolbarButton-spreadOdd-icon); +} + +@media (prefers-color-scheme: dark) { + + .secondaryToolbarButton.spreadOdd::before { + content: url(images/secondaryToolbarButton-spreadOdd-dark.svg); + content: var(--secondaryToolbarButton-spreadOdd-icon); + } } .secondaryToolbarButton.spreadEven::before { - content: url(images/secondaryToolbarButton-spreadEven.png); + content: url(images/secondaryToolbarButton-spreadEven.svg); + content: var(--secondaryToolbarButton-spreadEven-icon); +} + +@media (prefers-color-scheme: dark) { + + .secondaryToolbarButton.spreadEven::before { + content: url(images/secondaryToolbarButton-spreadEven-dark.svg); + content: var(--secondaryToolbarButton-spreadEven-icon); + } } .secondaryToolbarButton.documentProperties::before { - content: url(images/secondaryToolbarButton-documentProperties.png); + content: url(images/secondaryToolbarButton-documentProperties.svg); + content: var(--secondaryToolbarButton-documentProperties-icon); +} + +@media (prefers-color-scheme: dark) { + + .secondaryToolbarButton.documentProperties::before { + content: url(images/secondaryToolbarButton-documentProperties-dark.svg); + content: var(--secondaryToolbarButton-documentProperties-icon); + } } .verticalToolbarSeparator { display: block; - padding: 8px 0; - margin: 8px 4px; + padding: 11px 0; + margin: 5px 2px; width: 1px; - background-color: rgba(0, 0, 0, 0.5); - box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); + background-color: rgba(0, 0, 0, 0.3); + background-color: var(--separator-color); } -html[dir='ltr'] .verticalToolbarSeparator { + +@media (prefers-color-scheme: dark) { + + .verticalToolbarSeparator { + background-color: rgba(0, 0, 0, 0.3); + background-color: var(--separator-color); + } +} +html[dir="ltr"] .verticalToolbarSeparator { margin-left: 2px; } -html[dir='rtl'] .verticalToolbarSeparator { +html[dir="rtl"] .verticalToolbarSeparator { margin-right: 2px; } .horizontalToolbarSeparator { display: block; - margin: 0 0 4px 0; + margin: 6px 0 5px 0; height: 1px; width: 100%; - background-color: rgba(0, 0, 0, 0.5); - box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); + border-top: 1px solid rgba(222, 222, 222, 1); + border-top: 1px solid var(--doorhanger-separator-color); +} + +@media (prefers-color-scheme: dark) { + + .horizontalToolbarSeparator { + border-top: 1px solid rgba(92, 92, 97, 1); + border-top: 1px solid var(--doorhanger-separator-color); + } } .toolbarField { - padding: 3px 6px; - margin: 4px 0 4px 0; + padding: 4px 7px; + margin: 3px 0 3px 0; border-radius: 2px; - background-color: rgba(255, 255, 255, 0.09); - background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)); + background-color: rgba(255, 255, 255, 1); + background-color: var(--field-bg-color); background-clip: padding-box; border-width: 1px; border-style: solid; - 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); + border-color: rgba(187, 187, 188, 1); + border-color: var(--field-border-color); + box-shadow: none; + color: rgba(6, 6, 6, 1); + color: var(--field-color); font-size: 12px; - line-height: 14px; + line-height: 16px; outline-style: none; } -.toolbarField[type=checkbox] { - display: inline-block; - margin: 8px 0px; +@media (prefers-color-scheme: dark) { + + .toolbarField { + color: rgba(250, 250, 250, 1); + color: var(--field-color); + } +} + +@media (prefers-color-scheme: dark) { + + .toolbarField { + border-color: rgba(115, 115, 115, 1); + border-color: var(--field-border-color); + } +} + +@media (prefers-color-scheme: dark) { + + .toolbarField { + background-color: rgba(64, 64, 68, 1); + background-color: var(--field-bg-color); + } +} + +.toolbarField[type="checkbox"] { + opacity: 0; + position: absolute !important; + left: 0; +} + +html[dir="ltr"] .toolbarField[type="checkbox"] { + margin: 10px 0 3px 7px; +} + +html[dir="rtl"] .toolbarField[type="checkbox"] { + margin: 10px 7px 3px 0; } .toolbarField.pageNumber { - -webkit-appearance: none; -moz-appearance: textfield; /* hides the spinner in moz */ min-width: 16px; text-align: right; @@ -1534,34 +3139,38 @@ html[dir='rtl'] .verticalToolbarSeparator { } .toolbarField.pageNumber.visiblePageIsLoading { - background-image: url(images/loading-small.png); + background-image: url(images/loading.svg); + background-image: var(--loading-icon); background-repeat: no-repeat; - background-position: 1px; + background-position: 3px; } -.toolbarField.pageNumber::-webkit-inner-spin-button, -.toolbarField.pageNumber::-webkit-outer-spin-button { - -webkit-appearance: none; - margin: 0; +@media (prefers-color-scheme: dark) { + + .toolbarField.pageNumber.visiblePageIsLoading { + background-image: url(images/loading-dark.svg); + background-image: var(--loading-icon); + } } -.toolbarField:hover { - 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.pageNumber::-webkit-inner-spin-button, +.toolbarField.pageNumber::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; } .toolbarField:focus { - 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); + border-color: #0a84ff; } .toolbarLabel { min-width: 16px; - padding: 3px 6px 3px 2px; - margin: 4px 2px 4px 0; + padding: 6px; + margin: 2px; border: 1px solid rgba(0, 0, 0, 0); border-radius: 2px; - color: rgba(217, 217, 217, 1); + color: rgba(12, 12, 13, 1); + color: var(--main-color); font-size: 12px; line-height: 14px; text-align: left; @@ -1572,6 +3181,21 @@ html[dir='rtl'] .verticalToolbarSeparator { cursor: default; } +@media (prefers-color-scheme: dark) { + + .toolbarLabel { + color: rgba(249, 249, 250, 1); + color: var(--main-color); + } +} + +html[dir="ltr"] #numPages.toolbarLabel { + padding-left: 2px; +} +html[dir="rtl"] #numPages.toolbarLabel { + padding-right: 2px; +} + #thumbnailView { position: absolute; width: calc(100% - 60px); @@ -1590,10 +3214,10 @@ html[dir='rtl'] .verticalToolbarSeparator { .thumbnail { margin: 0 10px 5px 10px; } -html[dir='ltr'] .thumbnail { +html[dir="ltr"] .thumbnail { float: left; } -html[dir='rtl'] .thumbnail { +html[dir="rtl"] .thumbnail { float: right; } @@ -1606,7 +3230,7 @@ html[dir='rtl'] .thumbnail { } .thumbnail:not([data-loaded]) { - border: 1px dashed rgba(255, 255, 255, 0.5); + border: 1px dashed rgba(132, 132, 132, 1); margin: -1px 9px 4px 9px; } @@ -1626,41 +3250,66 @@ html[dir='rtl'] .thumbnail { a:focus > .thumbnail > .thumbnailSelectionRing > .thumbnailImage, .thumbnail:hover > .thumbnailSelectionRing > .thumbnailImage { - opacity: .9; + opacity: 0.9; } -a:focus > .thumbnail > .thumbnailSelectionRing, -.thumbnail:hover > .thumbnailSelectionRing { +a:focus > .thumbnail > .thumbnailSelectionRing { + background-color: rgba(0, 0, 0, 0.15); + background-color: var(--sidebaritem-bg-color); + background-clip: padding-box; + color: rgba(255, 255, 255, 0.9); +} + +@media (prefers-color-scheme: dark) { + + a:focus > .thumbnail > .thumbnailSelectionRing { background-color: rgba(255, 255, 255, 0.15); - background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)); + background-color: var(--sidebaritem-bg-color); + } +} + +.thumbnail:hover > .thumbnailSelectionRing { + background-color: rgba(0, 0, 0, 0.15); + background-color: var(--sidebaritem-bg-color); background-clip: padding-box; - 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); } +@media (prefers-color-scheme: dark) { + + .thumbnail:hover > .thumbnailSelectionRing { + background-color: rgba(255, 255, 255, 0.15); + background-color: var(--sidebaritem-bg-color); + } +} + .thumbnail.selected > .thumbnailSelectionRing > .thumbnailImage { - box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); opacity: 1; } .thumbnail.selected > .thumbnailSelectionRing { - background-color: rgba(255, 255, 255, 0.3); - background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)); + background-color: rgba(0, 0, 0, 0.15); + background-color: var(--sidebaritem-bg-color); background-clip: padding-box; - 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); + color: rgba(255, 255, 255, 1); +} + +@media (prefers-color-scheme: dark) { + + .thumbnail.selected > .thumbnailSelectionRing { + background-color: rgba(255, 255, 255, 0.15); + background-color: var(--sidebaritem-bg-color); + } } #outlineView, -#attachmentsView { +#attachmentsView, +#layersView { position: absolute; width: calc(100% - 8px); top: 0; bottom: 0; + padding: 4px 4px 0; overflow: auto; -webkit-overflow-scrolling: touch; -webkit-user-select: none; @@ -1669,34 +3318,27 @@ a:focus > .thumbnail > .thumbnailSelectionRing, user-select: none; } -#outlineView { - padding: 4px 4px 0; -} -#attachmentsView { - padding: 3px 4px 0; -} - -html[dir='ltr'] .outlineWithDeepNesting > .outlineItem, -html[dir='ltr'] .outlineItem > .outlineItems { +html[dir="ltr"] .treeWithDeepNesting > .treeItem, +html[dir="ltr"] .treeItem > .treeItems { margin-left: 20px; } -html[dir='rtl'] .outlineWithDeepNesting > .outlineItem, -html[dir='rtl'] .outlineItem > .outlineItems { +html[dir="rtl"] .treeWithDeepNesting > .treeItem, +html[dir="rtl"] .treeItem > .treeItems { margin-right: 20px; } -.outlineItem > a, -.attachmentsItem > button { +.treeItem > a { text-decoration: none; display: inline-block; min-width: 95%; - min-width: calc(100% - 4px); /* Subtract the right padding (left, in RTL mode) - of the container. */ + /* Subtract the right padding (left, in RTL mode) of the container: */ + min-width: calc(100% - 4px); height: auto; margin-bottom: 1px; border-radius: 2px; - color: rgba(255, 255, 255, 0.8); + color: rgba(0, 0, 0, 0.8); + color: var(--outline-color); font-size: 13px; line-height: 15px; -webkit-user-select: none; @@ -1704,87 +3346,206 @@ html[dir='rtl'] .outlineItem > .outlineItems { -ms-user-select: none; user-select: none; white-space: normal; -} - -.attachmentsItem > button { - border: 0 none; - background: none; cursor: pointer; - width: 100%; } -html[dir='ltr'] .outlineItem > a { +@media (prefers-color-scheme: dark) { + + .treeItem > a { + color: rgba(255, 255, 255, 0.8); + color: var(--outline-color); + } +} +html[dir="ltr"] .treeItem > a { padding: 2px 0 5px 4px; } -html[dir='ltr'] .attachmentsItem > button { - padding: 2px 0 3px 7px; - text-align: left; +html[dir="rtl"] .treeItem > a { + padding: 2px 4px 5px 0; } -html[dir='rtl'] .outlineItem > a { - padding: 2px 4px 5px 0; +#layersView .treeItem > a > * { + cursor: pointer; } -html[dir='rtl'] .attachmentsItem > button { - padding: 2px 7px 3px 0; - text-align: right; +html[dir="ltr"] #layersView .treeItem > a > label { + padding-left: 4px; +} +html[dir="rtl"] #layersView .treesItem > a > label { + padding-right: 4px; } -.outlineItemToggler { +.treeItemToggler { position: relative; height: 0; width: 0; color: rgba(255, 255, 255, 0.5); } -.outlineItemToggler::before { - content: url(images/treeitem-expanded.png); +.treeItemToggler::before { + content: url(images/treeitem-expanded.svg); + content: var(--treeitem-expanded-icon); display: inline-block; position: absolute; + max-width: 16px; +} +@media (prefers-color-scheme: dark) { + + .treeItemToggler::before { + content: url(images/treeitem-expanded-dark.svg); + content: var(--treeitem-expanded-icon); + } } -.outlineItemToggler.outlineItemsHidden::before { - content: url(images/treeitem-collapsed.png); +.treeItemToggler.treeItemsHidden::before { + content: url(images/treeitem-collapsed.svg); + content: var(--treeitem-collapsed-icon); + max-width: 16px; } -html[dir='rtl'] .outlineItemToggler.outlineItemsHidden::before { +@media (prefers-color-scheme: dark) { + + .treeItemToggler.treeItemsHidden::before { + content: url(images/treeitem-collapsed-dark.svg); + content: var(--treeitem-collapsed-icon); + } +} +html[dir="rtl"] .treeItemToggler.treeItemsHidden::before { transform: scaleX(-1); } -.outlineItemToggler.outlineItemsHidden ~ .outlineItems { +.treeItemToggler.treeItemsHidden ~ .treeItems { display: none; } -html[dir='ltr'] .outlineItemToggler { +html[dir="ltr"] .treeItemToggler { float: left; } -html[dir='rtl'] .outlineItemToggler { +html[dir="rtl"] .treeItemToggler { float: right; } -html[dir='ltr'] .outlineItemToggler::before { +html[dir="ltr"] .treeItemToggler::before { right: 4px; } -html[dir='rtl'] .outlineItemToggler::before { +html[dir="rtl"] .treeItemToggler::before { left: 4px; } -.outlineItemToggler:hover, -.outlineItemToggler:hover + a, -.outlineItemToggler:hover ~ .outlineItems, -.outlineItem > a:hover, -.attachmentsItem > button:hover { - background-color: rgba(255, 255, 255, 0.02); - background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)); +.treeItemToggler:hover { + background-color: rgba(0, 0, 0, 0.15); + background-color: var(--sidebaritem-bg-color); background-clip: padding-box; - 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: rgba(0, 0, 0, 0.9); + color: var(--outline-hover-color); +} + +@media (prefers-color-scheme: dark) { + + .treeItemToggler:hover { color: rgba(255, 255, 255, 0.9); + color: var(--outline-hover-color); + } } -.outlineItem.selected { - background-color: rgba(255, 255, 255, 0.08); - background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)); +@media (prefers-color-scheme: dark) { + + .treeItemToggler:hover { + background-color: rgba(255, 255, 255, 0.15); + background-color: var(--sidebaritem-bg-color); + } +} + +.treeItemToggler:hover + a { + background-color: rgba(0, 0, 0, 0.15); + background-color: var(--sidebaritem-bg-color); background-clip: padding-box; - 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); + border-radius: 2px; + color: rgba(0, 0, 0, 0.9); + color: var(--outline-hover-color); +} + +@media (prefers-color-scheme: dark) { + + .treeItemToggler:hover + a { + color: rgba(255, 255, 255, 0.9); + color: var(--outline-hover-color); + } +} + +@media (prefers-color-scheme: dark) { + + .treeItemToggler:hover + a { + background-color: rgba(255, 255, 255, 0.15); + background-color: var(--sidebaritem-bg-color); + } +} + +.treeItemToggler:hover ~ .treeItems { + background-color: rgba(0, 0, 0, 0.15); + background-color: var(--sidebaritem-bg-color); + background-clip: padding-box; + border-radius: 2px; + color: rgba(0, 0, 0, 0.9); + color: var(--outline-hover-color); +} + +@media (prefers-color-scheme: dark) { + + .treeItemToggler:hover ~ .treeItems { + color: rgba(255, 255, 255, 0.9); + color: var(--outline-hover-color); + } +} + +@media (prefers-color-scheme: dark) { + + .treeItemToggler:hover ~ .treeItems { + background-color: rgba(255, 255, 255, 0.15); + background-color: var(--sidebaritem-bg-color); + } +} + +.treeItem > a:hover { + background-color: rgba(0, 0, 0, 0.15); + background-color: var(--sidebaritem-bg-color); + background-clip: padding-box; + border-radius: 2px; + color: rgba(0, 0, 0, 0.9); + color: var(--outline-hover-color); +} + +@media (prefers-color-scheme: dark) { + + .treeItem > a:hover { + color: rgba(255, 255, 255, 0.9); + color: var(--outline-hover-color); + } +} + +@media (prefers-color-scheme: dark) { + + .treeItem > a:hover { + background-color: rgba(255, 255, 255, 0.15); + background-color: var(--sidebaritem-bg-color); + } +} + +.treeItem.selected { + background-color: rgba(0, 0, 0, 1); + background-color: var(--outline-active-bg-color); + background-clip: padding-box; + color: rgba(0, 0, 0, 0.08); + color: var(--outline-active-color); +} + +@media (prefers-color-scheme: dark) { + + .treeItem.selected { + color: rgba(255, 255, 255, 0.08); + color: var(--outline-active-color); + } +} + +@media (prefers-color-scheme: dark) { + + .treeItem.selected { + background-color: rgba(255, 255, 255, 1); + background-color: var(--outline-active-bg-color); + } } .noResults { @@ -1805,14 +3566,31 @@ html[dir='rtl'] .outlineItemToggler::before { } #errorWrapper { - background: none repeat scroll 0 0 rgba(255, 85, 85, 1); - color: rgba(255, 255, 255, 1); + background: none repeat scroll 0 0 rgba(255, 74, 74, 1); + background: none repeat scroll 0 0 var(--errorWrapper-bg-color); + color: rgba(12, 12, 13, 1); + color: var(--main-color); left: 0; position: absolute; right: 0; z-index: 1000; - padding: 3px; - font-size: 0.8em; + padding: 3px 6px; +} + +@media (prefers-color-scheme: dark) { + + #errorWrapper { + color: rgba(249, 249, 250, 1); + color: var(--main-color); + } +} + +@media (prefers-color-scheme: dark) { + + #errorWrapper { + background: none repeat scroll 0 0 rgba(199, 17, 17, 1); + background: none repeat scroll 0 0 var(--errorWrapper-bg-color); + } } .loadingInProgress #errorWrapper { top: 37px; @@ -1828,16 +3606,44 @@ html[dir='rtl'] .outlineItemToggler::before { #errorMoreInfo { background-color: rgba(255, 255, 255, 1); - color: rgba(0, 0, 0, 1); + background-color: var(--field-bg-color); + color: rgba(6, 6, 6, 1); + color: var(--field-color); + border: 1px solid rgba(187, 187, 188, 1); + border: 1px solid var(--field-border-color); padding: 3px; margin: 3px; width: 98%; } +@media (prefers-color-scheme: dark) { + + #errorMoreInfo { + border: 1px solid rgba(115, 115, 115, 1); + border: 1px solid var(--field-border-color); + } +} + +@media (prefers-color-scheme: dark) { + + #errorMoreInfo { + color: rgba(250, 250, 250, 1); + color: var(--field-color); + } +} + +@media (prefers-color-scheme: dark) { + + #errorMoreInfo { + background-color: rgba(64, 64, 68, 1); + background-color: var(--field-bg-color); + } +} + .overlayButton { width: auto; margin: 3px 4px 2px 4px !important; - padding: 2px 6px 3px 6px; + padding: 2px 11px 2px 11px; } #overlayContainer { @@ -1863,17 +3669,33 @@ html[dir='rtl'] .outlineItemToggler::before { display: inline-block; padding: 15px; border-spacing: 4px; - color: rgba(217, 217, 217, 1); + color: rgba(12, 12, 13, 1); + color: var(--main-color); font-size: 12px; line-height: 14px; - background-color: rgba(71, 71, 71, 1); /* fallback */ - background-image: url(images/texture.png), - linear-gradient(rgba(82, 82, 82,0.99), rgba(69, 69, 69, 0.95)); + background-color: rgba(255, 255, 255, 1); + background-color: var(--doorhanger-bg-color); border: 1px solid rgba(0, 0, 0, 0.5); border-radius: 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } +@media (prefers-color-scheme: dark) { + + #overlayContainer > .container > .dialog { + background-color: rgba(74, 74, 79, 1); + background-color: var(--doorhanger-bg-color); + } +} + +@media (prefers-color-scheme: dark) { + + #overlayContainer > .container > .dialog { + color: rgba(249, 249, 250, 1); + color: var(--main-color); + } +} + .dialog > .row { display: table-row; } @@ -1891,8 +3713,16 @@ html[dir='rtl'] .outlineItemToggler::before { margin: 4px 0 4px 0; height: 1px; width: 100%; - background-color: rgba(0, 0, 0, 0.5); - box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); + background-color: rgba(0, 0, 0, 0.3); + background-color: var(--separator-color); +} + +@media (prefers-color-scheme: dark) { + + .dialog .separator { + background-color: rgba(0, 0, 0, 0.3); + background-color: var(--separator-color); + } } .dialog .buttonRow { @@ -1917,10 +3747,10 @@ html[dir='rtl'] .outlineItemToggler::before { #documentPropertiesOverlay .row > * { min-width: 100px; } -html[dir='ltr'] #documentPropertiesOverlay .row > * { +html[dir="ltr"] #documentPropertiesOverlay .row > * { text-align: left; } -html[dir='rtl'] #documentPropertiesOverlay .row > * { +html[dir="rtl"] #documentPropertiesOverlay .row > * { text-align: right; } #documentPropertiesOverlay .row > span { @@ -1993,14 +3823,14 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * { white-space: pre; } #PDFBug .stats .title { - font-weight: bold; + font-weight: bold; } #PDFBug table { font-size: 10px; } #viewer.textLayer-visible .textLayer { - opacity: 1.0; + opacity: 1; } #viewer.textLayer-visible .canvasWrapper { @@ -2033,7 +3863,8 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * { cursor: -webkit-grab !important; cursor: grab !important; } -.grab-to-pan-grab *:not(input):not(textarea):not(button):not(select):not(:link) { +.grab-to-pan-grab + *:not(input):not(textarea):not(button):not(select):not(:link) { cursor: inherit !important; } .grab-to-pan-grab:active, @@ -2060,213 +3891,6 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * { display: none; } -@media screen and (-webkit-min-device-pixel-ratio: 1.1), screen and (min-resolution: 1.1dppx) { - /* Rules for Retina screens */ - .toolbarButton::before { - transform: scale(0.5); - top: -5px; - } - - .secondaryToolbarButton::before { - transform: scale(0.5); - top: -4px; - } - - html[dir='ltr'] .toolbarButton::before, - html[dir='rtl'] .toolbarButton::before { - left: -1px; - } - - html[dir='ltr'] .secondaryToolbarButton::before { - left: -2px; - } - html[dir='rtl'] .secondaryToolbarButton::before { - left: 186px; - } - - .toolbarField.pageNumber.visiblePageIsLoading, - #findInput[data-status="pending"] { - background-image: url(images/loading-small@2x.png); - background-size: 16px 17px; - } - - .dropdownToolbarButton::after { - transform: scale(0.5); - top: -5px; - content: url(images/toolbarButton-menuArrows@2x.png); - } - html[dir='ltr'] .dropdownToolbarButton::after { - right: 4px; - } - html[dir='rtl'] .dropdownToolbarButton::after { - left: 4px; - } - - .toolbarButton#sidebarToggle::before { - content: url(images/toolbarButton-sidebarToggle@2x.png); - } - html[dir='rtl'] .toolbarButton#sidebarToggle::before { - transform: scale(-0.5, 0.5); - } - - .toolbarButton#secondaryToolbarToggle::before { - content: url(images/toolbarButton-secondaryToolbarToggle@2x.png); - } - html[dir='rtl'] .toolbarButton#secondaryToolbarToggle::before { - transform: scale(-0.5, 0.5); - } - - .toolbarButton.findPrevious::before { - content: url(images/findbarButton-previous@2x.png); - } - html[dir='rtl'] .toolbarButton.findPrevious::before { - transform: scale(-0.5, 0.5); - } - - .toolbarButton.findNext::before { - content: url(images/findbarButton-next@2x.png); - } - html[dir='rtl'] .toolbarButton.findNext::before { - transform: scale(-0.5, 0.5); - } - - .toolbarButton.pageUp::before { - content: url(images/toolbarButton-pageUp@2x.png); - } - html[dir='rtl'] .toolbarButton.pageUp::before { - transform: scale(-0.5, 0.5); - } - - .toolbarButton.pageDown::before { - content: url(images/toolbarButton-pageDown@2x.png); - } - html[dir='rtl'] .toolbarButton.pageDown::before { - transform: scale(-0.5, 0.5); - } - - .toolbarButton.zoomIn::before { - content: url(images/toolbarButton-zoomIn@2x.png); - } - - .toolbarButton.zoomOut::before { - content: url(images/toolbarButton-zoomOut@2x.png); - } - - .toolbarButton.presentationMode::before, - .secondaryToolbarButton.presentationMode::before { - content: url(images/toolbarButton-presentationMode@2x.png); - } - - .toolbarButton.print::before, - .secondaryToolbarButton.print::before { - content: url(images/toolbarButton-print@2x.png); - } - - .toolbarButton.openFile::before, - .secondaryToolbarButton.openFile::before { - content: url(images/toolbarButton-openFile@2x.png); - } - - .toolbarButton.download::before, - .secondaryToolbarButton.download::before { - content: url(images/toolbarButton-download@2x.png); - } - - .toolbarButton.bookmark::before, - .secondaryToolbarButton.bookmark::before { - content: url(images/toolbarButton-bookmark@2x.png); - } - - #viewThumbnail.toolbarButton::before { - content: url(images/toolbarButton-viewThumbnail@2x.png); - } - - #viewOutline.toolbarButton::before { - content: url(images/toolbarButton-viewOutline@2x.png); - } - html[dir="rtl"] #viewOutline.toolbarButton::before { - transform: scale(-0.5, 0.5); - } - - #viewAttachments.toolbarButton::before { - content: url(images/toolbarButton-viewAttachments@2x.png); - } - - #viewFind.toolbarButton::before { - content: url(images/toolbarButton-search@2x.png); - } - - .secondaryToolbarButton.firstPage::before { - content: url(images/secondaryToolbarButton-firstPage@2x.png); - } - - .secondaryToolbarButton.lastPage::before { - content: url(images/secondaryToolbarButton-lastPage@2x.png); - } - - .secondaryToolbarButton.rotateCcw::before { - content: url(images/secondaryToolbarButton-rotateCcw@2x.png); - } - - .secondaryToolbarButton.rotateCw::before { - content: url(images/secondaryToolbarButton-rotateCw@2x.png); - } - - .secondaryToolbarButton.selectTool::before { - content: url(images/secondaryToolbarButton-selectTool@2x.png); - } - - .secondaryToolbarButton.handTool::before { - content: url(images/secondaryToolbarButton-handTool@2x.png); - } - - .secondaryToolbarButton.scrollVertical::before { - content: url(images/secondaryToolbarButton-scrollVertical@2x.png); - } - - .secondaryToolbarButton.scrollHorizontal::before { - content: url(images/secondaryToolbarButton-scrollHorizontal@2x.png); - } - - .secondaryToolbarButton.scrollWrapped::before { - content: url(images/secondaryToolbarButton-scrollWrapped@2x.png); - } - - .secondaryToolbarButton.spreadNone::before { - content: url(images/secondaryToolbarButton-spreadNone@2x.png); - } - - .secondaryToolbarButton.spreadOdd::before { - content: url(images/secondaryToolbarButton-spreadOdd@2x.png); - } - - .secondaryToolbarButton.spreadEven::before { - content: url(images/secondaryToolbarButton-spreadEven@2x.png); - } - - .secondaryToolbarButton.documentProperties::before { - content: url(images/secondaryToolbarButton-documentProperties@2x.png); - } - - .outlineItemToggler::before { - transform: scale(0.5); - top: -1px; - content: url(images/treeitem-expanded@2x.png); - } - .outlineItemToggler.outlineItemsHidden::before { - content: url(images/treeitem-collapsed@2x.png); - } - html[dir='rtl'] .outlineItemToggler.outlineItemsHidden::before { - transform: scale(-0.5, 0.5); - } - html[dir='ltr'] .outlineItemToggler::before { - right: 0; - } - html[dir='rtl'] .outlineItemToggler::before { - left: 0; - } -} - @media print { /* General rules for printing. */ body { @@ -2274,14 +3898,22 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * { } /* Rules for browsers that don't support mozPrintCallback. */ - #sidebarContainer, #secondaryToolbar, .toolbar, #loadingBox, #errorWrapper, .textLayer { + #sidebarContainer, + #secondaryToolbar, + .toolbar, + #loadingBox, + #errorWrapper, + .textLayer { display: none; } #viewerContainer { overflow: visible; } - #mainContainer, #viewerContainer, .page, .page canvas { + #mainContainer, + #viewerContainer, + .page, + .page canvas { position: static; padding: 0; margin: 0; @@ -2327,6 +3959,7 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * { } #printContainer canvas, #printContainer img { + direction: ltr; display: block; } } @@ -2352,10 +3985,10 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * { background-color: rgba(0, 0, 0, 0.7); } - html[dir='ltr'] #outerContainer.sidebarOpen #viewerContainer { + html[dir="ltr"] #outerContainer.sidebarOpen #viewerContainer { left: 0px !important; } - html[dir='rtl'] #outerContainer.sidebarOpen #viewerContainer { + html[dir="rtl"] #outerContainer.sidebarOpen #viewerContainer { right: 0px !important; } @@ -2388,7 +4021,8 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * { } @media all and (max-width: 640px) { - .hiddenSmallView, .hiddenSmallView * { + .hiddenSmallView, + .hiddenSmallView * { display: none; } .visibleSmallView { @@ -2397,11 +4031,11 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * { .toolbarButtonSpacer { width: 0; } - html[dir='ltr'] .findbar { - left: 38px; + html[dir="ltr"] .findbar { + left: 34px; } - html[dir='rtl'] .findbar { - right: 38px; + html[dir="rtl"] .findbar { + right: 34px; } } |